@memberjunction/ng-core-entity-forms 6.2.0 → 6.3.0-edge.0

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

@@ -556,11 +556,11 @@ export class CreatePromptDialogComponent extends BaseAngularComponent {
             i0.ɵɵproperty("disabled", !ctx.promptForm.valid || (i0.ɵɵpipeBind1(15, 9, ctx.isSaving$) || false));
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(i0.ɵɵpipeBind1(17, 11, ctx.isSaving$) ? 16 : 18);
-        } }, dependencies: [i2.ɵNgNoValidate, i2.DefaultValueAccessor, i2.RadioControlValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.FormGroupDirective, i2.FormControlName, i3.MJButtonDirective, i3.MJDropdownComponent, i4.TemplateEditorComponent, i5.AsyncPipe], styles: ["\n.create-prompt-dialog[_ngcontent-%COMP%] {\n  padding: 0;\n  min-height: 400px;\n  display: flex;\n  flex-direction: column;\n}\n\n\n[_nghost-%COMP%]     .k-dialog, \n[_nghost-%COMP%]     .k-window {\n  z-index: 10000 !important;\n}\n\n[_nghost-%COMP%]     .k-overlay {\n  z-index: 9999 !important;\n}\n\n\n.loading-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\n  text-align: center;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n  color: var(--mj-brand-primary);\n}\n\n\n.dialog-content[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 20px;\n  overflow-y: auto;\n  max-height: 70vh;\n}\n\n\n.form-section[_ngcontent-%COMP%] {\n  margin-bottom: 24px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  padding: 16px;\n  background: var(--mj-bg-surface-card);\n}\n\n.section-title[_ngcontent-%COMP%] {\n  margin: 0 0 16px 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n\n.form-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 16px;\n  margin-bottom: 16px;\n}\n\n.form-field[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.form-field.full-width[_ngcontent-%COMP%] {\n  grid-column: 1 / -1;\n}\n\n\n.field-label[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.field-label.required[_ngcontent-%COMP%]::after {\n  content: '*';\n  color: var(--mj-status-error);\n  margin-left: 2px;\n}\n\n.field-label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n\n.full-width[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n\n.field-error[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 12px;\n  color: var(--mj-status-error);\n  margin-top: 4px;\n}\n\n.field-error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n\n.template-mode-section[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n}\n\n.template-mode-options[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n  margin-top: 8px;\n  flex-wrap: wrap;\n}\n\n.radio-option[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.radio-input[_ngcontent-%COMP%] {\n  margin: 0;\n}\n\n.radio-label[_ngcontent-%COMP%] {\n  font-size: 13px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: background-color 0.2s ease;\n}\n\n.radio-label[_ngcontent-%COMP%]:hover {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.radio-label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n\n.template-editor-section[_ngcontent-%COMP%] {\n  margin-top: 16px;\n  padding: 16px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  background: var(--mj-bg-surface);\n}\n\n.template-info[_ngcontent-%COMP%] {\n  margin-bottom: 12px;\n}\n\n.template-name[_ngcontent-%COMP%] {\n  margin: 0 0 4px 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.template-description[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.template-editor-container[_ngcontent-%COMP%] {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  overflow: hidden;\n  min-height: 200px;\n}\n\n\n.existing-template-section[_ngcontent-%COMP%] {\n  margin-top: 16px;\n  padding: 16px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  background: var(--mj-bg-surface);\n}\n\n.existing-template-info[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.template-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 12px;\n}\n\n.template-type-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px 8px;\n  background-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 500;\n}\n\n.template-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n\n.dialog-footer[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  gap: 16px;\n}\n\n.footer-left[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.footer-right[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.form-hint[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.form-hint[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n\n@media (max-width: 768px) {\n  .form-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .template-mode-options[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 8px;\n  }\n\n  .dialog-footer[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 12px;\n  }\n\n  .footer-right[_ngcontent-%COMP%] {\n    justify-content: stretch;\n  }\n\n  .footer-right[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n    flex: 1;\n  }\n}\n\n\n[_nghost-%COMP%]     .template-editor-container mj-template-editor {\n  --template-editor-min-height: 200px;\n}\n\n[_nghost-%COMP%]     .template-editor-container .template-editor-help {\n  display: none; \n}"] }); }
+        } }, dependencies: [i2.ɵNgNoValidate, i2.DefaultValueAccessor, i2.RadioControlValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.FormGroupDirective, i2.FormControlName, i3.MJButtonDirective, i3.MJDropdownComponent, i4.TemplateEditorComponent, i5.AsyncPipe], styles: ["\n.create-prompt-dialog[_ngcontent-%COMP%] {\n  padding: 0;\n  min-height: 400px;\n  display: flex;\n  flex-direction: column;\n}\n\n\n.loading-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\n  text-align: center;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n  color: var(--mj-brand-primary);\n}\n\n\n.dialog-content[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 20px;\n  overflow-y: auto;\n  max-height: 70vh;\n}\n\n\n.form-section[_ngcontent-%COMP%] {\n  margin-bottom: 24px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  padding: 16px;\n  background: var(--mj-bg-surface-card);\n}\n\n.section-title[_ngcontent-%COMP%] {\n  margin: 0 0 16px 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n\n.form-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 16px;\n  margin-bottom: 16px;\n}\n\n.form-field[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.form-field.full-width[_ngcontent-%COMP%] {\n  grid-column: 1 / -1;\n}\n\n\n.field-label[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.field-label.required[_ngcontent-%COMP%]::after {\n  content: '*';\n  color: var(--mj-status-error);\n  margin-left: 2px;\n}\n\n.field-label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n\n.full-width[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n\n.field-error[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 12px;\n  color: var(--mj-status-error);\n  margin-top: 4px;\n}\n\n.field-error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n\n.template-mode-section[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n}\n\n.template-mode-options[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n  margin-top: 8px;\n  flex-wrap: wrap;\n}\n\n.radio-option[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.radio-input[_ngcontent-%COMP%] {\n  margin: 0;\n}\n\n.radio-label[_ngcontent-%COMP%] {\n  font-size: 13px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: background-color 0.2s ease;\n}\n\n.radio-label[_ngcontent-%COMP%]:hover {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.radio-label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n\n.template-editor-section[_ngcontent-%COMP%] {\n  margin-top: 16px;\n  padding: 16px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  background: var(--mj-bg-surface);\n}\n\n.template-info[_ngcontent-%COMP%] {\n  margin-bottom: 12px;\n}\n\n.template-name[_ngcontent-%COMP%] {\n  margin: 0 0 4px 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.template-description[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.template-editor-container[_ngcontent-%COMP%] {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  overflow: hidden;\n  min-height: 200px;\n}\n\n\n.existing-template-section[_ngcontent-%COMP%] {\n  margin-top: 16px;\n  padding: 16px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  background: var(--mj-bg-surface);\n}\n\n.existing-template-info[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.template-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 12px;\n}\n\n.template-type-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px 8px;\n  background-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 500;\n}\n\n.template-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n\n.dialog-footer[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  gap: 16px;\n}\n\n.footer-left[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.footer-right[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.form-hint[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.form-hint[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n\n@media (max-width: 768px) {\n  .form-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .template-mode-options[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 8px;\n  }\n\n  .dialog-footer[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 12px;\n  }\n\n  .footer-right[_ngcontent-%COMP%] {\n    justify-content: stretch;\n  }\n\n  .footer-right[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n    flex: 1;\n  }\n}\n\n\n[_nghost-%COMP%]     .template-editor-container mj-template-editor {\n  --template-editor-min-height: 200px;\n}\n\n[_nghost-%COMP%]     .template-editor-container .template-editor-help {\n  display: none; \n}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CreatePromptDialogComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-create-prompt-dialog', template: "<!-- Create Prompt Dialog -->\n<div class=\"create-prompt-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 creation form...</p>\n    </div>\n  } @else {\n    \n    <!-- Form Content -->\n    <form [formGroup]=\"promptForm\" class=\"dialog-content\">\n      \n      <!-- Basic Prompt Information -->\n      <div class=\"form-section\">\n        <h4 class=\"section-title\">\n          <i class=\"fa-solid fa-info-circle\"></i>\n          Basic Information\n        </h4>\n        \n        <div class=\"form-grid\">\n          \n          <!-- Name Field -->\n          <div class=\"form-field\">\n            <label for=\"promptName\" class=\"field-label required\">\n              <i class=\"fa-solid fa-tag\"></i>\n              Name\n            </label>\n            <input\n              id=\"promptName\"\n              class=\"mj-input full-width\"\n              formControlName=\"name\"\n              placeholder=\"Enter prompt name...\">\n            @if (promptForm.get('name')?.invalid && promptForm.get('name')?.touched) {\n              <div class=\"field-error\">\n                <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                Name is required\n              </div>\n            }\n          </div>\n\n          <!-- Type Field -->\n          <div class=\"form-field\">\n            <label for=\"promptType\" class=\"field-label required\">\n              <i class=\"fa-solid fa-category\"></i>\n              Type\n            </label>\n            <mj-dropdown\n              id=\"promptType\"\n              formControlName=\"typeID\"\n              [Data]=\"availablePromptTypes$ | async\"\n              TextField=\"Name\"\n              ValueField=\"ID\"\n              [ValuePrimitive]=\"true\"\n              Placeholder=\"Select prompt type...\"\n              class=\"full-width\">\n            </mj-dropdown>\n            @if (promptForm.get('typeID')?.invalid && promptForm.get('typeID')?.touched) {\n              <div class=\"field-error\">\n                <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                Type is required\n              </div>\n            }\n          </div>\n\n          <!-- Status Field -->\n          <div class=\"form-field\">\n            <label for=\"promptStatus\" class=\"field-label\">\n              <i class=\"fa-solid fa-toggle-on\"></i>\n              Status\n            </label>\n            <mj-dropdown\n              id=\"promptStatus\"\n              formControlName=\"status\"\n              [Data]=\"['Pending', 'Active', 'Disabled']\"\n              [ValuePrimitive]=\"true\"\n              class=\"full-width\">\n            </mj-dropdown>\n          </div>\n\n          <!-- Output Type Field -->\n          <div class=\"form-field\">\n            <label for=\"outputType\" class=\"field-label\">\n              <i class=\"fa-solid fa-file-code\"></i>\n              Output Type\n            </label>\n            <mj-dropdown\n              id=\"outputType\"\n              formControlName=\"outputType\"\n              [Data]=\"['string', 'object']\"\n              [ValuePrimitive]=\"true\"\n              class=\"full-width\">\n            </mj-dropdown>\n          </div>\n\n        </div>\n\n        <!-- Description Field -->\n        <div class=\"form-field full-width\">\n          <label for=\"promptDescription\" class=\"field-label\">\n            <i class=\"fa-solid fa-align-left\"></i>\n            Description\n          </label>\n          <textarea\n            id=\"promptDescription\"\n            class=\"mj-textarea full-width\"\n            formControlName=\"description\"\n            placeholder=\"Enter prompt description (optional)...\"\n            rows=\"3\"></textarea>\n        </div>\n\n      </div>\n\n      <!-- Template Configuration -->\n      <div class=\"form-section\">\n        <h4 class=\"section-title\">\n          <i class=\"fa-solid fa-file-alt\"></i>\n          Template Configuration\n        </h4>\n        \n        <div class=\"template-mode-section\">\n          <label class=\"field-label\">\n            <i class=\"fa-solid fa-cog\"></i>\n            Template Mode\n          </label>\n          \n          <div class=\"template-mode-options\">\n            <div class=\"radio-option\">\n              <input type=\"radio\" \n                     id=\"templateNew\" \n                     value=\"new\" \n                     formControlName=\"templateMode\"\n                     class=\"radio-input\">\n              <label for=\"templateNew\" class=\"radio-label\">\n                <i class=\"fa-solid fa-plus-circle\"></i>\n                Create New Template\n              </label>\n            </div>\n            \n            <div class=\"radio-option\">\n              <input type=\"radio\" \n                     id=\"templateExisting\" \n                     value=\"existing\" \n                     formControlName=\"templateMode\"\n                     class=\"radio-input\">\n              <label for=\"templateExisting\" class=\"radio-label\">\n                <i class=\"fa-solid fa-link\"></i>\n                Link Existing Template\n              </label>\n            </div>\n          </div>\n        </div>\n\n        <!-- Template Editor Section (New Template) -->\n        @if (showTemplateEditor && templateEntity && templateMode === 'new') {\n          <div class=\"template-editor-section\">\n            <div class=\"template-info\">\n              <h5 class=\"template-name\">\n                <i class=\"fa-solid fa-file-code\"></i>\n                {{ templateEntity.Name }}\n              </h5>\n              @if (templateEntity.Description) {\n                <p class=\"template-description\">{{ templateEntity.Description }}</p>\n              }\n            </div>\n            \n            <div class=\"template-editor-container\">\n              <mj-template-editor \n                #templateEditor\n                [template]=\"templateEntity\"\n                [config]=\"templateEditorConfig\"\n                (contentChange)=\"onTemplateContentChange($event)\">\n              </mj-template-editor>\n            </div>\n          </div>\n        }\n        \n        <!-- Existing Template Display -->\n        @if (templateEntity && templateMode === 'existing') {\n          <div class=\"existing-template-section\">\n            <div class=\"existing-template-info\">\n              <div class=\"template-header\">\n                <h5 class=\"template-name\">\n                  <i class=\"fa-solid fa-link\"></i>\n                  {{ templateEntity.Name }}\n                </h5>\n                <span class=\"template-type-badge\">\n                  <i class=\"fa-solid fa-tag\"></i>\n                  Existing Template\n                </span>\n              </div>\n              \n              @if (templateEntity.Description) {\n                <p class=\"template-description\">{{ templateEntity.Description }}</p>\n              }\n              \n              <div class=\"template-actions\">\n                <button mjButton\n                        variant=\"flat\"\n                        (click)=\"handleTemplateModeChange('existing')\">\n                  <i class=\"fa-solid fa-sync\"></i>\n                  Change Template\n                </button>\n              </div>\n            </div>\n          </div>\n        }\n\n      </div>\n\n    </form>\n\n  }\n\n</div>\n\n<!-- Dialog Footer -->\n<div class=\"dialog-footer\">\n  <div class=\"footer-left\">\n    <span class=\"form-hint\">\n      <i class=\"fa-solid fa-info-circle\"></i>\n      @if (templateMode === 'new') {\n        Created prompts and templates will be saved when you save the AI Agent\n      } @else {\n        Created prompt will be linked to existing template when you save the AI Agent\n      }\n    </span>\n  </div>\n  \n  <div class=\"footer-right\">\n    <button mjButton\n            variant=\"flat\"\n            (click)=\"cancel()\"\n            [disabled]=\"(isSaving$ | async) || false\">\n      Cancel\n    </button>\n\n    <button mjButton\n            variant=\"primary\"\n            (click)=\"save()\"\n            [disabled]=\"!promptForm.valid || ((isSaving$ | async) || false)\">\n      @if (isSaving$ | async) {\n        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n        Creating...\n      } @else {\n        <i class=\"fa-solid fa-plus\"></i>\n        Create Prompt\n      }\n    </button>\n  </div>\n</div>", styles: ["/* Create Prompt Dialog Styles */\n.create-prompt-dialog {\n  padding: 0;\n  min-height: 400px;\n  display: flex;\n  flex-direction: column;\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  padding: 60px 20px;\n  text-align: center;\n}\n\n.loading-spinner {\n  margin-bottom: 16px;\n  color: var(--mj-brand-primary);\n}\n\n/* Dialog Content */\n.dialog-content {\n  flex: 1;\n  padding: 20px;\n  overflow-y: auto;\n  max-height: 70vh;\n}\n\n/* Form Sections */\n.form-section {\n  margin-bottom: 24px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  padding: 16px;\n  background: var(--mj-bg-surface-card);\n}\n\n.section-title {\n  margin: 0 0 16px 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.section-title i {\n  color: var(--mj-brand-primary);\n}\n\n/* Form Grid Layout */\n.form-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 16px;\n  margin-bottom: 16px;\n}\n\n.form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.form-field.full-width {\n  grid-column: 1 / -1;\n}\n\n/* Field Labels */\n.field-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.field-label.required::after {\n  content: '*';\n  color: var(--mj-status-error);\n  margin-left: 2px;\n}\n\n.field-label i {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n/* Form Controls */\n.full-width {\n  width: 100%;\n}\n\n/* Field Errors */\n.field-error {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 12px;\n  color: var(--mj-status-error);\n  margin-top: 4px;\n}\n\n.field-error i {\n  font-size: 11px;\n}\n\n/* Template Mode Section */\n.template-mode-section {\n  margin-bottom: 16px;\n}\n\n.template-mode-options {\n  display: flex;\n  gap: 16px;\n  margin-top: 8px;\n  flex-wrap: wrap;\n}\n\n.radio-option {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.radio-input {\n  margin: 0;\n}\n\n.radio-label {\n  font-size: 13px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: background-color 0.2s ease;\n}\n\n.radio-label:hover {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.radio-label i {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n/* Template Editor Section */\n.template-editor-section {\n  margin-top: 16px;\n  padding: 16px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  background: var(--mj-bg-surface);\n}\n\n.template-info {\n  margin-bottom: 12px;\n}\n\n.template-name {\n  margin: 0 0 4px 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.template-description {\n  margin: 0;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.template-editor-container {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  overflow: hidden;\n  min-height: 200px;\n}\n\n/* Existing Template Section */\n.existing-template-section {\n  margin-top: 16px;\n  padding: 16px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  background: var(--mj-bg-surface);\n}\n\n.existing-template-info {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.template-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 12px;\n}\n\n.template-type-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px 8px;\n  background-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 500;\n}\n\n.template-actions {\n  display: flex;\n  gap: 8px;\n}\n\n/* Dialog Footer */\n.dialog-footer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  gap: 16px;\n}\n\n.footer-left {\n  flex: 1;\n}\n\n.footer-right {\n  display: flex;\n  gap: 8px;\n}\n\n.form-hint {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.form-hint i {\n  color: var(--mj-brand-primary);\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .form-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .template-mode-options {\n    flex-direction: column;\n    gap: 8px;\n  }\n\n  .dialog-footer {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 12px;\n  }\n\n  .footer-right {\n    justify-content: stretch;\n  }\n\n  .footer-right button {\n    flex: 1;\n  }\n}\n\n/* Compact Template Editor Styles */\n:host ::ng-deep .template-editor-container mj-template-editor {\n  --template-editor-min-height: 200px;\n}\n\n:host ::ng-deep .template-editor-container .template-editor-help {\n  display: none; /* Hide help section in compact mode */\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-create-prompt-dialog', template: "<!-- Create Prompt Dialog -->\n<div class=\"create-prompt-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 creation form...</p>\n    </div>\n  } @else {\n    \n    <!-- Form Content -->\n    <form [formGroup]=\"promptForm\" class=\"dialog-content\">\n      \n      <!-- Basic Prompt Information -->\n      <div class=\"form-section\">\n        <h4 class=\"section-title\">\n          <i class=\"fa-solid fa-info-circle\"></i>\n          Basic Information\n        </h4>\n        \n        <div class=\"form-grid\">\n          \n          <!-- Name Field -->\n          <div class=\"form-field\">\n            <label for=\"promptName\" class=\"field-label required\">\n              <i class=\"fa-solid fa-tag\"></i>\n              Name\n            </label>\n            <input\n              id=\"promptName\"\n              class=\"mj-input full-width\"\n              formControlName=\"name\"\n              placeholder=\"Enter prompt name...\">\n            @if (promptForm.get('name')?.invalid && promptForm.get('name')?.touched) {\n              <div class=\"field-error\">\n                <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                Name is required\n              </div>\n            }\n          </div>\n\n          <!-- Type Field -->\n          <div class=\"form-field\">\n            <label for=\"promptType\" class=\"field-label required\">\n              <i class=\"fa-solid fa-category\"></i>\n              Type\n            </label>\n            <mj-dropdown\n              id=\"promptType\"\n              formControlName=\"typeID\"\n              [Data]=\"availablePromptTypes$ | async\"\n              TextField=\"Name\"\n              ValueField=\"ID\"\n              [ValuePrimitive]=\"true\"\n              Placeholder=\"Select prompt type...\"\n              class=\"full-width\">\n            </mj-dropdown>\n            @if (promptForm.get('typeID')?.invalid && promptForm.get('typeID')?.touched) {\n              <div class=\"field-error\">\n                <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                Type is required\n              </div>\n            }\n          </div>\n\n          <!-- Status Field -->\n          <div class=\"form-field\">\n            <label for=\"promptStatus\" class=\"field-label\">\n              <i class=\"fa-solid fa-toggle-on\"></i>\n              Status\n            </label>\n            <mj-dropdown\n              id=\"promptStatus\"\n              formControlName=\"status\"\n              [Data]=\"['Pending', 'Active', 'Disabled']\"\n              [ValuePrimitive]=\"true\"\n              class=\"full-width\">\n            </mj-dropdown>\n          </div>\n\n          <!-- Output Type Field -->\n          <div class=\"form-field\">\n            <label for=\"outputType\" class=\"field-label\">\n              <i class=\"fa-solid fa-file-code\"></i>\n              Output Type\n            </label>\n            <mj-dropdown\n              id=\"outputType\"\n              formControlName=\"outputType\"\n              [Data]=\"['string', 'object']\"\n              [ValuePrimitive]=\"true\"\n              class=\"full-width\">\n            </mj-dropdown>\n          </div>\n\n        </div>\n\n        <!-- Description Field -->\n        <div class=\"form-field full-width\">\n          <label for=\"promptDescription\" class=\"field-label\">\n            <i class=\"fa-solid fa-align-left\"></i>\n            Description\n          </label>\n          <textarea\n            id=\"promptDescription\"\n            class=\"mj-textarea full-width\"\n            formControlName=\"description\"\n            placeholder=\"Enter prompt description (optional)...\"\n            rows=\"3\"></textarea>\n        </div>\n\n      </div>\n\n      <!-- Template Configuration -->\n      <div class=\"form-section\">\n        <h4 class=\"section-title\">\n          <i class=\"fa-solid fa-file-alt\"></i>\n          Template Configuration\n        </h4>\n        \n        <div class=\"template-mode-section\">\n          <label class=\"field-label\">\n            <i class=\"fa-solid fa-cog\"></i>\n            Template Mode\n          </label>\n          \n          <div class=\"template-mode-options\">\n            <div class=\"radio-option\">\n              <input type=\"radio\" \n                     id=\"templateNew\" \n                     value=\"new\" \n                     formControlName=\"templateMode\"\n                     class=\"radio-input\">\n              <label for=\"templateNew\" class=\"radio-label\">\n                <i class=\"fa-solid fa-plus-circle\"></i>\n                Create New Template\n              </label>\n            </div>\n            \n            <div class=\"radio-option\">\n              <input type=\"radio\" \n                     id=\"templateExisting\" \n                     value=\"existing\" \n                     formControlName=\"templateMode\"\n                     class=\"radio-input\">\n              <label for=\"templateExisting\" class=\"radio-label\">\n                <i class=\"fa-solid fa-link\"></i>\n                Link Existing Template\n              </label>\n            </div>\n          </div>\n        </div>\n\n        <!-- Template Editor Section (New Template) -->\n        @if (showTemplateEditor && templateEntity && templateMode === 'new') {\n          <div class=\"template-editor-section\">\n            <div class=\"template-info\">\n              <h5 class=\"template-name\">\n                <i class=\"fa-solid fa-file-code\"></i>\n                {{ templateEntity.Name }}\n              </h5>\n              @if (templateEntity.Description) {\n                <p class=\"template-description\">{{ templateEntity.Description }}</p>\n              }\n            </div>\n            \n            <div class=\"template-editor-container\">\n              <mj-template-editor \n                #templateEditor\n                [template]=\"templateEntity\"\n                [config]=\"templateEditorConfig\"\n                (contentChange)=\"onTemplateContentChange($event)\">\n              </mj-template-editor>\n            </div>\n          </div>\n        }\n        \n        <!-- Existing Template Display -->\n        @if (templateEntity && templateMode === 'existing') {\n          <div class=\"existing-template-section\">\n            <div class=\"existing-template-info\">\n              <div class=\"template-header\">\n                <h5 class=\"template-name\">\n                  <i class=\"fa-solid fa-link\"></i>\n                  {{ templateEntity.Name }}\n                </h5>\n                <span class=\"template-type-badge\">\n                  <i class=\"fa-solid fa-tag\"></i>\n                  Existing Template\n                </span>\n              </div>\n              \n              @if (templateEntity.Description) {\n                <p class=\"template-description\">{{ templateEntity.Description }}</p>\n              }\n              \n              <div class=\"template-actions\">\n                <button mjButton\n                        variant=\"flat\"\n                        (click)=\"handleTemplateModeChange('existing')\">\n                  <i class=\"fa-solid fa-sync\"></i>\n                  Change Template\n                </button>\n              </div>\n            </div>\n          </div>\n        }\n\n      </div>\n\n    </form>\n\n  }\n\n</div>\n\n<!-- Dialog Footer -->\n<div class=\"dialog-footer\">\n  <div class=\"footer-left\">\n    <span class=\"form-hint\">\n      <i class=\"fa-solid fa-info-circle\"></i>\n      @if (templateMode === 'new') {\n        Created prompts and templates will be saved when you save the AI Agent\n      } @else {\n        Created prompt will be linked to existing template when you save the AI Agent\n      }\n    </span>\n  </div>\n  \n  <div class=\"footer-right\">\n    <button mjButton\n            variant=\"flat\"\n            (click)=\"cancel()\"\n            [disabled]=\"(isSaving$ | async) || false\">\n      Cancel\n    </button>\n\n    <button mjButton\n            variant=\"primary\"\n            (click)=\"save()\"\n            [disabled]=\"!promptForm.valid || ((isSaving$ | async) || false)\">\n      @if (isSaving$ | async) {\n        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n        Creating...\n      } @else {\n        <i class=\"fa-solid fa-plus\"></i>\n        Create Prompt\n      }\n    </button>\n  </div>\n</div>", styles: ["/* Create Prompt Dialog Styles */\n.create-prompt-dialog {\n  padding: 0;\n  min-height: 400px;\n  display: flex;\n  flex-direction: column;\n}\n\n/* Loading State */\n.loading-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\n  text-align: center;\n}\n\n.loading-spinner {\n  margin-bottom: 16px;\n  color: var(--mj-brand-primary);\n}\n\n/* Dialog Content */\n.dialog-content {\n  flex: 1;\n  padding: 20px;\n  overflow-y: auto;\n  max-height: 70vh;\n}\n\n/* Form Sections */\n.form-section {\n  margin-bottom: 24px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  padding: 16px;\n  background: var(--mj-bg-surface-card);\n}\n\n.section-title {\n  margin: 0 0 16px 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.section-title i {\n  color: var(--mj-brand-primary);\n}\n\n/* Form Grid Layout */\n.form-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 16px;\n  margin-bottom: 16px;\n}\n\n.form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.form-field.full-width {\n  grid-column: 1 / -1;\n}\n\n/* Field Labels */\n.field-label {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.field-label.required::after {\n  content: '*';\n  color: var(--mj-status-error);\n  margin-left: 2px;\n}\n\n.field-label i {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n/* Form Controls */\n.full-width {\n  width: 100%;\n}\n\n/* Field Errors */\n.field-error {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 12px;\n  color: var(--mj-status-error);\n  margin-top: 4px;\n}\n\n.field-error i {\n  font-size: 11px;\n}\n\n/* Template Mode Section */\n.template-mode-section {\n  margin-bottom: 16px;\n}\n\n.template-mode-options {\n  display: flex;\n  gap: 16px;\n  margin-top: 8px;\n  flex-wrap: wrap;\n}\n\n.radio-option {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.radio-input {\n  margin: 0;\n}\n\n.radio-label {\n  font-size: 13px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 8px;\n  border-radius: 4px;\n  transition: background-color 0.2s ease;\n}\n\n.radio-label:hover {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.radio-label i {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n/* Template Editor Section */\n.template-editor-section {\n  margin-top: 16px;\n  padding: 16px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  background: var(--mj-bg-surface);\n}\n\n.template-info {\n  margin-bottom: 12px;\n}\n\n.template-name {\n  margin: 0 0 4px 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.template-description {\n  margin: 0;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.template-editor-container {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  overflow: hidden;\n  min-height: 200px;\n}\n\n/* Existing Template Section */\n.existing-template-section {\n  margin-top: 16px;\n  padding: 16px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  background: var(--mj-bg-surface);\n}\n\n.existing-template-info {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.template-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 12px;\n}\n\n.template-type-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px 8px;\n  background-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-radius: 12px;\n  font-size: 11px;\n  font-weight: 500;\n}\n\n.template-actions {\n  display: flex;\n  gap: 8px;\n}\n\n/* Dialog Footer */\n.dialog-footer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n  gap: 16px;\n}\n\n.footer-left {\n  flex: 1;\n}\n\n.footer-right {\n  display: flex;\n  gap: 8px;\n}\n\n.form-hint {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.form-hint i {\n  color: var(--mj-brand-primary);\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .form-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .template-mode-options {\n    flex-direction: column;\n    gap: 8px;\n  }\n\n  .dialog-footer {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 12px;\n  }\n\n  .footer-right {\n    justify-content: stretch;\n  }\n\n  .footer-right button {\n    flex: 1;\n  }\n}\n\n/* Compact Template Editor Styles */\n:host ::ng-deep .template-editor-container mj-template-editor {\n  --template-editor-min-height: 200px;\n}\n\n:host ::ng-deep .template-editor-container .template-editor-help {\n  display: none; /* Hide help section in compact mode */\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.AIPromptManagementService }], { TemplateEditor: [{
             type: ViewChild,
             args: ['templateEditor']

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

@@ -861,11 +861,11 @@ export class CreateSubAgentDialogComponent extends BaseAngularComponent {
             i0.ɵɵproperty("disabled", i0.ɵɵpipeBind1(15, 10, ctx.isSaving$) || !ctx.subAgentForm.valid);
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(i0.ɵɵpipeBind1(17, 12, ctx.isSaving$) ? 16 : 18);
-        } }, dependencies: [i2.ɵNgNoValidate, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.NumberValueAccessor, i2.CheckboxControlValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.MinValidator, i2.MaxValidator, i2.FormGroupDirective, i2.FormControlName, i3.MJEmptyStateComponent, i4.AsyncPipe], styles: [".sub-agent-dialog[_ngcontent-%COMP%] {\n  padding: 16px;\n  max-width: 100%;\n  max-height: 90vh;\n  overflow-y: auto;\n}\n\n.sub-agent-header[_ngcontent-%COMP%] {\n  margin-bottom: 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  padding-bottom: 15px;\n}\n\n.dialog-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 1.4em;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.dialog-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.parent-info[_ngcontent-%COMP%] {\n  margin: 8px 0 0 0;\n  color: var(--mj-text-secondary);\n  font-size: 0.9em;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.parent-info[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  padding: 40px;\n  color: var(--mj-text-secondary);\n}\n\n.loading-container[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1.2em;\n  color: var(--mj-brand-primary);\n}\n\n.sub-agent-form[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 25px;\n}\n\n.form-section[_ngcontent-%COMP%] {\n  border: 1px solid var(--mj-bg-surface-sunken);\n  border-radius: 8px;\n  padding: 20px;\n  background-color: var(--mj-bg-surface-card);\n}\n\n.section-title[_ngcontent-%COMP%] {\n  margin: 0 0 15px 0;\n  font-size: 1.1em;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.form-row[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 15px;\n  margin-bottom: 15px;\n}\n\n.form-row[_ngcontent-%COMP%]:last-child {\n  margin-bottom: 0;\n}\n\n.form-group[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n}\n\n.form-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  margin-bottom: 5px;\n  font-size: 0.9em;\n}\n\n.form-group[_ngcontent-%COMP%]   label[for=\"enableCaching\"][_ngcontent-%COMP%] {\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n}\n\n.form-group[_ngcontent-%COMP%]   label[for=\"enableCaching\"][_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n  margin: 0;\n  width: auto;\n}\n\n.form-control[_ngcontent-%COMP%] {\n  padding: 8px 12px;\n  border: 1px solid var(--mj-border-strong);\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[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.form-control[readonly][_ngcontent-%COMP%] {\n  background-color: var(--mj-bg-surface-sunken);\n  opacity: 1;\n}\n\n.section-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  margin-bottom: 15px;\n}\n\n.linked-items[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.linked-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px;\n  background-color: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  transition: box-shadow 0.15s ease-in-out;\n}\n\n.linked-item[_ngcontent-%COMP%]:hover {\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.item-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex: 1;\n}\n\n.item-info[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  width: 16px;\n  text-align: center;\n}\n\n.item-name[_ngcontent-%COMP%] {\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n\n.item-description[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 0.85em;\n  margin-left: 10px;\n}\n\n.prompt-item[_ngcontent-%COMP%]   .item-info[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n\n.action-item[_ngcontent-%COMP%]   .item-info[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n\n.dialog-actions[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 10px;\n  margin-top: 30px;\n  padding-top: 20px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.btn[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n  background-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background-color: var(--mj-brand-primary-hover);\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n  background-color: var(--mj-text-muted);\n  color: var(--mj-text-inverse);\n}\n\n.btn-secondary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background-color: var(--mj-text-secondary);\n}\n\n.btn-success[_ngcontent-%COMP%] {\n  background-color: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n}\n\n.btn-success[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background-color: var(--mj-status-success);\n}\n\n.btn-danger[_ngcontent-%COMP%] {\n  background-color: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n}\n\n.btn-danger[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background-color: var(--mj-status-error);\n}\n\n.btn-sm[_ngcontent-%COMP%] {\n  padding: 6px 12px;\n  font-size: 0.8em;\n}\n\n.btn-xs[_ngcontent-%COMP%] {\n  padding: 4px 8px;\n  font-size: 0.75em;\n}\n\n\n@media (max-width: 768px) {\n  .sub-agent-dialog[_ngcontent-%COMP%] {\n    padding: 15px;\n    max-width: 95vw;\n  }\n\n  .form-row[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 10px;\n  }\n\n  .section-actions[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n\n  .dialog-actions[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n\n  .linked-item[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 10px;\n  }\n}\n\n\n.form-control.ng-invalid.ng-touched[_ngcontent-%COMP%] {\n  border-color: var(--mj-status-error);\n}\n\n.form-control.ng-valid.ng-touched[_ngcontent-%COMP%] {\n  border-color: var(--mj-status-success);\n}\n\n\n.sub-agent-dialog[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 8px;\n}\n\n.sub-agent-dialog[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n}\n\n.sub-agent-dialog[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 4px;\n}\n\n.sub-agent-dialog[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-disabled);\n}\n\n\n[_nghost-%COMP%]     .k-dialog, \n[_nghost-%COMP%]     .k-window {\n  z-index: 10000 !important;\n}\n\n[_nghost-%COMP%]     .k-overlay {\n  z-index: 9999 !important;\n}"] }); }
+        } }, dependencies: [i2.ɵNgNoValidate, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.NumberValueAccessor, i2.CheckboxControlValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.MinValidator, i2.MaxValidator, i2.FormGroupDirective, i2.FormControlName, i3.MJEmptyStateComponent, i4.AsyncPipe], styles: [".sub-agent-dialog[_ngcontent-%COMP%] {\n  padding: 16px;\n  max-width: 100%;\n  max-height: 90vh;\n  overflow-y: auto;\n}\n\n.sub-agent-header[_ngcontent-%COMP%] {\n  margin-bottom: 20px;\n  border-bottom: 1px solid var(--mj-border-default);\n  padding-bottom: 15px;\n}\n\n.dialog-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 1.4em;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.dialog-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.parent-info[_ngcontent-%COMP%] {\n  margin: 8px 0 0 0;\n  color: var(--mj-text-secondary);\n  font-size: 0.9em;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.parent-info[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  padding: 40px;\n  color: var(--mj-text-secondary);\n}\n\n.loading-container[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1.2em;\n  color: var(--mj-brand-primary);\n}\n\n.sub-agent-form[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 25px;\n}\n\n.form-section[_ngcontent-%COMP%] {\n  border: 1px solid var(--mj-bg-surface-sunken);\n  border-radius: 8px;\n  padding: 20px;\n  background-color: var(--mj-bg-surface-card);\n}\n\n.section-title[_ngcontent-%COMP%] {\n  margin: 0 0 15px 0;\n  font-size: 1.1em;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.form-row[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 15px;\n  margin-bottom: 15px;\n}\n\n.form-row[_ngcontent-%COMP%]:last-child {\n  margin-bottom: 0;\n}\n\n.form-group[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n}\n\n.form-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  margin-bottom: 5px;\n  font-size: 0.9em;\n}\n\n.form-group[_ngcontent-%COMP%]   label[for=\"enableCaching\"][_ngcontent-%COMP%] {\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n}\n\n.form-group[_ngcontent-%COMP%]   label[for=\"enableCaching\"][_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n  margin: 0;\n  width: auto;\n}\n\n.form-control[_ngcontent-%COMP%] {\n  padding: 8px 12px;\n  border: 1px solid var(--mj-border-strong);\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[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.form-control[readonly][_ngcontent-%COMP%] {\n  background-color: var(--mj-bg-surface-sunken);\n  opacity: 1;\n}\n\n.section-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  margin-bottom: 15px;\n}\n\n.linked-items[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.linked-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px;\n  background-color: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  transition: box-shadow 0.15s ease-in-out;\n}\n\n.linked-item[_ngcontent-%COMP%]:hover {\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.item-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex: 1;\n}\n\n.item-info[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  width: 16px;\n  text-align: center;\n}\n\n.item-name[_ngcontent-%COMP%] {\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n\n.item-description[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 0.85em;\n  margin-left: 10px;\n}\n\n.prompt-item[_ngcontent-%COMP%]   .item-info[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n\n.action-item[_ngcontent-%COMP%]   .item-info[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n\n.dialog-actions[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 10px;\n  margin-top: 30px;\n  padding-top: 20px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.btn[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%]:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n  background-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background-color: var(--mj-brand-primary-hover);\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n  background-color: var(--mj-text-muted);\n  color: var(--mj-text-inverse);\n}\n\n.btn-secondary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background-color: var(--mj-text-secondary);\n}\n\n.btn-success[_ngcontent-%COMP%] {\n  background-color: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n}\n\n.btn-success[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background-color: var(--mj-status-success);\n}\n\n.btn-danger[_ngcontent-%COMP%] {\n  background-color: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n}\n\n.btn-danger[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background-color: var(--mj-status-error);\n}\n\n.btn-sm[_ngcontent-%COMP%] {\n  padding: 6px 12px;\n  font-size: 0.8em;\n}\n\n.btn-xs[_ngcontent-%COMP%] {\n  padding: 4px 8px;\n  font-size: 0.75em;\n}\n\n\n@media (max-width: 768px) {\n  .sub-agent-dialog[_ngcontent-%COMP%] {\n    padding: 15px;\n    max-width: 95vw;\n  }\n\n  .form-row[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 10px;\n  }\n\n  .section-actions[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n\n  .dialog-actions[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n\n  .linked-item[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 10px;\n  }\n}\n\n\n.form-control.ng-invalid.ng-touched[_ngcontent-%COMP%] {\n  border-color: var(--mj-status-error);\n}\n\n.form-control.ng-valid.ng-touched[_ngcontent-%COMP%] {\n  border-color: var(--mj-status-success);\n}\n\n\n.sub-agent-dialog[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 8px;\n}\n\n.sub-agent-dialog[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n}\n\n.sub-agent-dialog[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 4px;\n}\n\n.sub-agent-dialog[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-disabled);\n}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CreateSubAgentDialogComponent, [{
         type: Component,
-        args: [{ standalone: false, 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 MJAIAgentEntity -->\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          <mj-empty-state\n            Icon=\"fa-solid fa-comments\"\n            Title=\"No prompts added yet. Click the buttons above to add prompts.\"\n            Size=\"compact\" />\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          <mj-empty-state\n            Icon=\"fa-solid fa-bolt\"\n            Title=\"No actions added yet. Click the button above to add actions.\"\n            Size=\"compact\" />\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 var(--mj-border-default);\n  padding-bottom: 15px;\n}\n\n.dialog-title {\n  margin: 0;\n  font-size: 1.4em;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.dialog-title i {\n  color: var(--mj-brand-primary);\n}\n\n.parent-info {\n  margin: 8px 0 0 0;\n  color: var(--mj-text-secondary);\n  font-size: 0.9em;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.parent-info i {\n  color: var(--mj-status-success);\n}\n\n.loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  padding: 40px;\n  color: var(--mj-text-secondary);\n}\n\n.loading-container i {\n  font-size: 1.2em;\n  color: var(--mj-brand-primary);\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 var(--mj-bg-surface-sunken);\n  border-radius: 8px;\n  padding: 20px;\n  background-color: var(--mj-bg-surface-card);\n}\n\n.section-title {\n  margin: 0 0 15px 0;\n  font-size: 1.1em;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.section-title i {\n  color: var(--mj-brand-primary);\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: var(--mj-text-secondary);\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 var(--mj-border-strong);\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: var(--mj-brand-primary);\n  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.form-control[readonly] {\n  background-color: var(--mj-bg-surface-sunken);\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: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\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: var(--mj-brand-primary);\n  width: 16px;\n  text-align: center;\n}\n\n.item-name {\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n\n.item-description {\n  color: var(--mj-text-secondary);\n  font-size: 0.85em;\n  margin-left: 10px;\n}\n\n.prompt-item .item-info i {\n  color: var(--mj-status-success);\n}\n\n.action-item .item-info i {\n  color: var(--mj-status-warning);\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 var(--mj-border-default);\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: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.btn-primary:hover:not(:disabled) {\n  background-color: var(--mj-brand-primary-hover);\n}\n\n.btn-secondary {\n  background-color: var(--mj-text-muted);\n  color: var(--mj-text-inverse);\n}\n\n.btn-secondary:hover:not(:disabled) {\n  background-color: var(--mj-text-secondary);\n}\n\n.btn-success {\n  background-color: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n}\n\n.btn-success:hover:not(:disabled) {\n  background-color: var(--mj-status-success);\n}\n\n.btn-danger {\n  background-color: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n}\n\n.btn-danger:hover:not(:disabled) {\n  background-color: var(--mj-status-error);\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: var(--mj-status-error);\n}\n\n.form-control.ng-valid.ng-touched {\n  border-color: var(--mj-status-success);\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: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n}\n\n.sub-agent-dialog::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 4px;\n}\n\n.sub-agent-dialog::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-disabled);\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"] }]
+        args: [{ standalone: false, 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 MJAIAgentEntity -->\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          <mj-empty-state\n            Icon=\"fa-solid fa-comments\"\n            Title=\"No prompts added yet. Click the buttons above to add prompts.\"\n            Size=\"compact\" />\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          <mj-empty-state\n            Icon=\"fa-solid fa-bolt\"\n            Title=\"No actions added yet. Click the button above to add actions.\"\n            Size=\"compact\" />\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 var(--mj-border-default);\n  padding-bottom: 15px;\n}\n\n.dialog-title {\n  margin: 0;\n  font-size: 1.4em;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.dialog-title i {\n  color: var(--mj-brand-primary);\n}\n\n.parent-info {\n  margin: 8px 0 0 0;\n  color: var(--mj-text-secondary);\n  font-size: 0.9em;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.parent-info i {\n  color: var(--mj-status-success);\n}\n\n.loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  padding: 40px;\n  color: var(--mj-text-secondary);\n}\n\n.loading-container i {\n  font-size: 1.2em;\n  color: var(--mj-brand-primary);\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 var(--mj-bg-surface-sunken);\n  border-radius: 8px;\n  padding: 20px;\n  background-color: var(--mj-bg-surface-card);\n}\n\n.section-title {\n  margin: 0 0 15px 0;\n  font-size: 1.1em;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.section-title i {\n  color: var(--mj-brand-primary);\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: var(--mj-text-secondary);\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 var(--mj-border-strong);\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: var(--mj-brand-primary);\n  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.form-control[readonly] {\n  background-color: var(--mj-bg-surface-sunken);\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: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\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: var(--mj-brand-primary);\n  width: 16px;\n  text-align: center;\n}\n\n.item-name {\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n\n.item-description {\n  color: var(--mj-text-secondary);\n  font-size: 0.85em;\n  margin-left: 10px;\n}\n\n.prompt-item .item-info i {\n  color: var(--mj-status-success);\n}\n\n.action-item .item-info i {\n  color: var(--mj-status-warning);\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 var(--mj-border-default);\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: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.btn-primary:hover:not(:disabled) {\n  background-color: var(--mj-brand-primary-hover);\n}\n\n.btn-secondary {\n  background-color: var(--mj-text-muted);\n  color: var(--mj-text-inverse);\n}\n\n.btn-secondary:hover:not(:disabled) {\n  background-color: var(--mj-text-secondary);\n}\n\n.btn-success {\n  background-color: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n}\n\n.btn-success:hover:not(:disabled) {\n  background-color: var(--mj-status-success);\n}\n\n.btn-danger {\n  background-color: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n}\n\n.btn-danger:hover:not(:disabled) {\n  background-color: var(--mj-status-error);\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: var(--mj-status-error);\n}\n\n.form-control.ng-valid.ng-touched {\n  border-color: var(--mj-status-success);\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: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n}\n\n.sub-agent-dialog::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 4px;\n}\n\n.sub-agent-dialog::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-disabled);\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.AIAgentManagementService }, { type: i0.ViewContainerRef }], { DialogClose: [{
             type: Output
         }] }); })();

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

@@ -305,11 +305,11 @@ export class NewAgentDialogComponent extends BaseAngularComponent {
             i0.ɵɵproperty("disabled", ctx.form.invalid || ctx.isSubmitting);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.isSubmitting ? 59 : 60);
-        } }, dependencies: [i1.ɵNgNoValidate, i1.DefaultValueAccessor, i1.RangeValueAccessor, i1.CheckboxControlValueAccessor, i1.NgControlStatus, i1.NgControlStatusGroup, i1.FormGroupDirective, i1.FormControlName, i3.MJAlertComponent, i3.MJButtonDirective, i3.MJDropdownComponent, i3.MJNumericInputComponent, i4.AsyncPipe], styles: [".new-agent-dialog[_ngcontent-%COMP%] {\n  padding: 1.5rem;\n  min-width: 500px;\n  position: relative;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .new-agent-alert-pos[_ngcontent-%COMP%] {\n  margin-bottom: 1.5rem;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .loading-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: color-mix(in srgb, var(--mj-bg-surface) 90%, transparent);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  border-radius: 8px;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .form-fields[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%] {\n  margin-bottom: 1.5rem;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .form-fields[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: block;\n  font-weight: 500;\n  margin-bottom: 0.5rem;\n  color: var(--mj-text-secondary);\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .form-fields[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   label.required[_ngcontent-%COMP%]::after {\n  content: ' *';\n  color: var(--mj-status-error);\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .form-fields[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .full-width[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .form-fields[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .error-message[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n  font-size: 0.875rem;\n  margin-top: 0.25rem;\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .form-fields[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .error-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 0.75rem;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .form-fields[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .field-hint[_ngcontent-%COMP%] {\n  font-size: 0.875rem;\n  color: var(--mj-text-muted);\n  margin-top: 0.25rem;\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .form-fields[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .field-hint[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 0.75rem;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .form-fields[_ngcontent-%COMP%]   .model-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.5rem 0;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .form-fields[_ngcontent-%COMP%]   .model-item[_ngcontent-%COMP%]   .model-icon[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border-radius: 6px;\n  background: var(--mj-brand-primary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-inverse);\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .form-fields[_ngcontent-%COMP%]   .model-item[_ngcontent-%COMP%]   .model-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1rem;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .form-fields[_ngcontent-%COMP%]   .model-item[_ngcontent-%COMP%]   .model-details[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .form-fields[_ngcontent-%COMP%]   .model-item[_ngcontent-%COMP%]   .model-details[_ngcontent-%COMP%]   .model-name[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .form-fields[_ngcontent-%COMP%]   .model-item[_ngcontent-%COMP%]   .model-details[_ngcontent-%COMP%]   .model-vendor[_ngcontent-%COMP%] {\n  font-size: 0.75rem;\n  color: var(--mj-text-muted);\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .form-fields[_ngcontent-%COMP%]   .k-textbox[_ngcontent-%COMP%], \n.new-agent-dialog[_ngcontent-%COMP%]   .form-fields[_ngcontent-%COMP%]   .k-textarea[_ngcontent-%COMP%], \n.new-agent-dialog[_ngcontent-%COMP%]   .form-fields[_ngcontent-%COMP%]   .k-dropdown[_ngcontent-%COMP%], \n.new-agent-dialog[_ngcontent-%COMP%]   .form-fields[_ngcontent-%COMP%]   .k-numerictextbox[_ngcontent-%COMP%] {\n  border-radius: 6px;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .advanced-settings[_ngcontent-%COMP%] {\n  margin-top: 1.5rem;\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .advanced-settings[_ngcontent-%COMP%]   .k-expander-header[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  padding: 1rem;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .advanced-settings[_ngcontent-%COMP%]   .k-expander-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 0.5rem;\n  color: var(--mj-brand-primary);\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .advanced-settings[_ngcontent-%COMP%]   .advanced-grid[_ngcontent-%COMP%] {\n  padding: 1rem;\n  display: grid;\n  gap: 1.5rem;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .advanced-settings[_ngcontent-%COMP%]   .advanced-grid[_ngcontent-%COMP%]   .setting-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: block;\n  font-weight: 500;\n  margin-bottom: 0.5rem;\n  color: var(--mj-text-secondary);\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .advanced-settings[_ngcontent-%COMP%]   .advanced-grid[_ngcontent-%COMP%]   .setting-group[_ngcontent-%COMP%]   .slider-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .advanced-settings[_ngcontent-%COMP%]   .advanced-grid[_ngcontent-%COMP%]   .setting-group[_ngcontent-%COMP%]   .slider-container[_ngcontent-%COMP%]   .temperature-slider[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .advanced-settings[_ngcontent-%COMP%]   .advanced-grid[_ngcontent-%COMP%]   .setting-group[_ngcontent-%COMP%]   .slider-container[_ngcontent-%COMP%]   .slider-value[_ngcontent-%COMP%] {\n  min-width: 3rem;\n  text-align: right;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .advanced-settings[_ngcontent-%COMP%]   .advanced-grid[_ngcontent-%COMP%]   .setting-group.checkbox-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  cursor: pointer;\n  font-weight: normal;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .advanced-settings[_ngcontent-%COMP%]   .advanced-grid[_ngcontent-%COMP%]   .setting-group.checkbox-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .dialog-actions[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.75rem;\n  margin-top: 2rem;\n  padding-top: 1.5rem;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .dialog-actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  min-width: 120px;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .dialog-actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 0.5rem;\n}"] }); }
+        } }, dependencies: [i1.ɵNgNoValidate, i1.DefaultValueAccessor, i1.RangeValueAccessor, i1.CheckboxControlValueAccessor, i1.NgControlStatus, i1.NgControlStatusGroup, i1.FormGroupDirective, i1.FormControlName, i3.MJAlertComponent, i3.MJButtonDirective, i3.MJDropdownComponent, i3.MJNumericInputComponent, i4.AsyncPipe], styles: [".new-agent-dialog[_ngcontent-%COMP%] {\n  padding: 1.5rem;\n  min-width: 500px;\n  position: relative;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .new-agent-alert-pos[_ngcontent-%COMP%] {\n  margin-bottom: 1.5rem;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .loading-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: color-mix(in srgb, var(--mj-bg-surface) 90%, transparent);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  border-radius: 8px;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .form-fields[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%] {\n  margin-bottom: 1.5rem;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .form-fields[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: block;\n  font-weight: 500;\n  margin-bottom: 0.5rem;\n  color: var(--mj-text-secondary);\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .form-fields[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   label.required[_ngcontent-%COMP%]::after {\n  content: ' *';\n  color: var(--mj-status-error);\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .form-fields[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .full-width[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .form-fields[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .error-message[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n  font-size: 0.875rem;\n  margin-top: 0.25rem;\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .form-fields[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .error-message[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 0.75rem;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .form-fields[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .field-hint[_ngcontent-%COMP%] {\n  font-size: 0.875rem;\n  color: var(--mj-text-muted);\n  margin-top: 0.25rem;\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .form-fields[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   .field-hint[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 0.75rem;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .form-fields[_ngcontent-%COMP%]   .model-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.5rem 0;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .form-fields[_ngcontent-%COMP%]   .model-item[_ngcontent-%COMP%]   .model-icon[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border-radius: 6px;\n  background: var(--mj-brand-primary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-inverse);\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .form-fields[_ngcontent-%COMP%]   .model-item[_ngcontent-%COMP%]   .model-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1rem;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .form-fields[_ngcontent-%COMP%]   .model-item[_ngcontent-%COMP%]   .model-details[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .form-fields[_ngcontent-%COMP%]   .model-item[_ngcontent-%COMP%]   .model-details[_ngcontent-%COMP%]   .model-name[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .form-fields[_ngcontent-%COMP%]   .model-item[_ngcontent-%COMP%]   .model-details[_ngcontent-%COMP%]   .model-vendor[_ngcontent-%COMP%] {\n  font-size: 0.75rem;\n  color: var(--mj-text-muted);\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .advanced-settings[_ngcontent-%COMP%] {\n  margin-top: 1.5rem;\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .advanced-settings[_ngcontent-%COMP%]   .advanced-grid[_ngcontent-%COMP%] {\n  padding: 1rem;\n  display: grid;\n  gap: 1.5rem;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .advanced-settings[_ngcontent-%COMP%]   .advanced-grid[_ngcontent-%COMP%]   .setting-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: block;\n  font-weight: 500;\n  margin-bottom: 0.5rem;\n  color: var(--mj-text-secondary);\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .advanced-settings[_ngcontent-%COMP%]   .advanced-grid[_ngcontent-%COMP%]   .setting-group[_ngcontent-%COMP%]   .slider-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .advanced-settings[_ngcontent-%COMP%]   .advanced-grid[_ngcontent-%COMP%]   .setting-group[_ngcontent-%COMP%]   .slider-container[_ngcontent-%COMP%]   .temperature-slider[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .advanced-settings[_ngcontent-%COMP%]   .advanced-grid[_ngcontent-%COMP%]   .setting-group[_ngcontent-%COMP%]   .slider-container[_ngcontent-%COMP%]   .slider-value[_ngcontent-%COMP%] {\n  min-width: 3rem;\n  text-align: right;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .advanced-settings[_ngcontent-%COMP%]   .advanced-grid[_ngcontent-%COMP%]   .setting-group.checkbox-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  cursor: pointer;\n  font-weight: normal;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .advanced-settings[_ngcontent-%COMP%]   .advanced-grid[_ngcontent-%COMP%]   .setting-group.checkbox-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .dialog-actions[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.75rem;\n  margin-top: 2rem;\n  padding-top: 1.5rem;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .dialog-actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  min-width: 120px;\n}\n\n.new-agent-dialog[_ngcontent-%COMP%]   .dialog-actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 0.5rem;\n}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NewAgentDialogComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-new-agent-dialog', template: "<div class=\"new-agent-dialog\">\n  <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n    <!-- Parent Agent Info (if creating sub-agent) -->\n    @if (config.parentAgentId) {\n      <mj-alert Variant=\"info\" Icon=\"fa-solid fa-robot\" class=\"new-agent-alert-pos\">\n        Creating sub-agent for: <strong>{{ config.parentAgentName || 'Parent Agent' }}</strong>\n      </mj-alert>\n    }\n    \n    <!-- Loading State -->\n    @if (isLoading$ | async) {\n      <div class=\"loading-overlay\">\n        <div class=\"spinner\">Loading...</div>\n      </div>\n    }\n    \n    <!-- Form Fields -->\n    <div class=\"form-fields\">\n      <!-- Agent Name -->\n      <div class=\"form-group\">\n        <label class=\"required\">Agent Name</label>\n        <input\n          class=\"mj-input full-width\"\n          formControlName=\"name\"\n          placeholder=\"Enter a descriptive name for your agent\">\n        @if (form.get('name')?.invalid && form.get('name')?.touched) {\n          <div class=\"error-message\">\n            <i class=\"fa-solid fa-exclamation-circle\"></i>\n            Agent name is required\n          </div>\n        }\n      </div>\n      \n      <!-- Description -->\n      <div class=\"form-group\">\n        <label>Description</label>\n        <textarea\n          class=\"mj-textarea full-width\"\n          formControlName=\"description\"\n          placeholder=\"Describe what this agent does...\"\n          rows=\"3\"></textarea>\n      </div>\n      \n      <!-- AI Model Selection -->\n      <div class=\"form-group\">\n        <label class=\"required\">AI Model</label>\n        <mj-dropdown\n          formControlName=\"modelId\"\n          [Data]=\"models$ | async\"\n          TextField=\"Name\"\n          ValueField=\"ID\"\n          Placeholder=\"Select an AI model...\"\n          class=\"full-width\">\n        </mj-dropdown>\n        @if (form.get('modelId')?.invalid && form.get('modelId')?.touched) {\n          <div class=\"error-message\">\n            <i class=\"fa-solid fa-exclamation-circle\"></i>\n            Please select an AI model\n          </div>\n        }\n      </div>\n      \n      <!-- System Prompt -->\n      <div class=\"form-group\">\n        <label>System Prompt</label>\n        <textarea\n          class=\"mj-textarea full-width\"\n          formControlName=\"systemPrompt\"\n          placeholder=\"Define the agent's behavior and personality...\"\n          rows=\"4\"></textarea>\n        <div class=\"field-hint\">\n          <i class=\"fa-solid fa-info-circle\"></i>\n          This sets the agent's context and behavior\n        </div>\n      </div>\n      \n      <!-- Advanced Settings -->\n      <div class=\"advanced-settings\">\n        <div class=\"section-header\">\n          <i class=\"fa-solid fa-cog\"></i>\n          Advanced Settings\n        </div>\n        \n        <div class=\"advanced-grid\">\n          <!-- Temperature -->\n          <div class=\"setting-group\">\n            <label>Temperature</label>\n            <div class=\"slider-container\">\n              <input\n                type=\"range\"\n                class=\"mj-input temperature-slider\"\n                formControlName=\"temperature\"\n                min=\"0\"\n                max=\"2\"\n                step=\"0.1\">\n              <span class=\"slider-value\">{{ form.get('temperature')?.value }}</span>\n            </div>\n            <div class=\"field-hint\">Higher values make output more creative</div>\n          </div>\n          \n          <!-- Max Tokens -->\n          <div class=\"setting-group\">\n            <label>Max Tokens</label>\n            <mj-numeric-input\n              formControlName=\"maxTokens\"\n              [Min]=\"1\"\n              [Max]=\"8000\"\n              [Step]=\"100\"\n              Format=\"n0\"\n              class=\"full-width\">\n            </mj-numeric-input>\n            <div class=\"field-hint\">Maximum response length</div>\n          </div>\n          \n          <!-- Enable Streaming -->\n          <div class=\"setting-group checkbox-group\">\n            <label>\n              <input type=\"checkbox\" formControlName=\"enableStreaming\" class=\"mj-checkbox\" />\n              <span>Enable Response Streaming</span>\n            </label>\n            <div class=\"field-hint\">Stream responses in real-time</div>\n          </div>\n        </div>\n      </div>\n    </div>\n    \n    <!-- Dialog Actions -->\n    <div class=\"dialog-actions\">\n      <button\n        type=\"button\"\n        mjButton\n        (click)=\"onCancel()\"\n        [disabled]=\"isSubmitting\">\n        Cancel\n      </button>\n      <button\n        type=\"submit\"\n        mjButton\n        variant=\"primary\"\n        [disabled]=\"form.invalid || isSubmitting\">\n        @if (isSubmitting) {\n          <span class=\"spinner-small\"></span>\n          <span>Creating...</span>\n        } @else {\n          <i class=\"fa-solid fa-plus-circle\"></i>\n          <span>Create Agent</span>\n        }\n      </button>\n    </div>\n  </form>\n</div>", styles: [".new-agent-dialog {\n  padding: 1.5rem;\n  min-width: 500px;\n  position: relative;\n}\n\n.new-agent-dialog .new-agent-alert-pos {\n  margin-bottom: 1.5rem;\n}\n\n.new-agent-dialog .loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: color-mix(in srgb, var(--mj-bg-surface) 90%, transparent);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  border-radius: 8px;\n}\n\n.new-agent-dialog .form-fields .form-group {\n  margin-bottom: 1.5rem;\n}\n\n.new-agent-dialog .form-fields .form-group label {\n  display: block;\n  font-weight: 500;\n  margin-bottom: 0.5rem;\n  color: var(--mj-text-secondary);\n}\n\n.new-agent-dialog .form-fields .form-group label.required::after {\n  content: ' *';\n  color: var(--mj-status-error);\n}\n\n.new-agent-dialog .form-fields .form-group .full-width {\n  width: 100%;\n}\n\n.new-agent-dialog .form-fields .form-group .error-message {\n  color: var(--mj-status-error);\n  font-size: 0.875rem;\n  margin-top: 0.25rem;\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.new-agent-dialog .form-fields .form-group .error-message i {\n  font-size: 0.75rem;\n}\n\n.new-agent-dialog .form-fields .form-group .field-hint {\n  font-size: 0.875rem;\n  color: var(--mj-text-muted);\n  margin-top: 0.25rem;\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.new-agent-dialog .form-fields .form-group .field-hint i {\n  font-size: 0.75rem;\n}\n\n.new-agent-dialog .form-fields .model-item {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.5rem 0;\n}\n\n.new-agent-dialog .form-fields .model-item .model-icon {\n  width: 36px;\n  height: 36px;\n  border-radius: 6px;\n  background: var(--mj-brand-primary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-inverse);\n}\n\n.new-agent-dialog .form-fields .model-item .model-icon i {\n  font-size: 1rem;\n}\n\n.new-agent-dialog .form-fields .model-item .model-details {\n  display: flex;\n  flex-direction: column;\n}\n\n.new-agent-dialog .form-fields .model-item .model-details .model-name {\n  font-weight: 500;\n}\n\n.new-agent-dialog .form-fields .model-item .model-details .model-vendor {\n  font-size: 0.75rem;\n  color: var(--mj-text-muted);\n}\n\n.new-agent-dialog .form-fields .k-textbox,\n.new-agent-dialog .form-fields .k-textarea,\n.new-agent-dialog .form-fields .k-dropdown,\n.new-agent-dialog .form-fields .k-numerictextbox {\n  border-radius: 6px;\n}\n\n.new-agent-dialog .advanced-settings {\n  margin-top: 1.5rem;\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.new-agent-dialog .advanced-settings .k-expander-header {\n  background: var(--mj-bg-surface-card);\n  padding: 1rem;\n}\n\n.new-agent-dialog .advanced-settings .k-expander-header i {\n  margin-right: 0.5rem;\n  color: var(--mj-brand-primary);\n}\n\n.new-agent-dialog .advanced-settings .advanced-grid {\n  padding: 1rem;\n  display: grid;\n  gap: 1.5rem;\n}\n\n.new-agent-dialog .advanced-settings .advanced-grid .setting-group label {\n  display: block;\n  font-weight: 500;\n  margin-bottom: 0.5rem;\n  color: var(--mj-text-secondary);\n}\n\n.new-agent-dialog .advanced-settings .advanced-grid .setting-group .slider-container {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n.new-agent-dialog .advanced-settings .advanced-grid .setting-group .slider-container .temperature-slider {\n  flex: 1;\n}\n\n.new-agent-dialog .advanced-settings .advanced-grid .setting-group .slider-container .slider-value {\n  min-width: 3rem;\n  text-align: right;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n}\n\n.new-agent-dialog .advanced-settings .advanced-grid .setting-group.checkbox-group label {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  cursor: pointer;\n  font-weight: normal;\n}\n\n.new-agent-dialog .advanced-settings .advanced-grid .setting-group.checkbox-group label input[type=\"checkbox\"] {\n  cursor: pointer;\n}\n\n.new-agent-dialog .dialog-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.75rem;\n  margin-top: 2rem;\n  padding-top: 1.5rem;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.new-agent-dialog .dialog-actions button {\n  min-width: 120px;\n}\n\n.new-agent-dialog .dialog-actions button i {\n  margin-right: 0.5rem;\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-new-agent-dialog', template: "<div class=\"new-agent-dialog\">\n  <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n    <!-- Parent Agent Info (if creating sub-agent) -->\n    @if (config.parentAgentId) {\n      <mj-alert Variant=\"info\" Icon=\"fa-solid fa-robot\" class=\"new-agent-alert-pos\">\n        Creating sub-agent for: <strong>{{ config.parentAgentName || 'Parent Agent' }}</strong>\n      </mj-alert>\n    }\n    \n    <!-- Loading State -->\n    @if (isLoading$ | async) {\n      <div class=\"loading-overlay\">\n        <div class=\"spinner\">Loading...</div>\n      </div>\n    }\n    \n    <!-- Form Fields -->\n    <div class=\"form-fields\">\n      <!-- Agent Name -->\n      <div class=\"form-group\">\n        <label class=\"required\">Agent Name</label>\n        <input\n          class=\"mj-input full-width\"\n          formControlName=\"name\"\n          placeholder=\"Enter a descriptive name for your agent\">\n        @if (form.get('name')?.invalid && form.get('name')?.touched) {\n          <div class=\"error-message\">\n            <i class=\"fa-solid fa-exclamation-circle\"></i>\n            Agent name is required\n          </div>\n        }\n      </div>\n      \n      <!-- Description -->\n      <div class=\"form-group\">\n        <label>Description</label>\n        <textarea\n          class=\"mj-textarea full-width\"\n          formControlName=\"description\"\n          placeholder=\"Describe what this agent does...\"\n          rows=\"3\"></textarea>\n      </div>\n      \n      <!-- AI Model Selection -->\n      <div class=\"form-group\">\n        <label class=\"required\">AI Model</label>\n        <mj-dropdown\n          formControlName=\"modelId\"\n          [Data]=\"models$ | async\"\n          TextField=\"Name\"\n          ValueField=\"ID\"\n          Placeholder=\"Select an AI model...\"\n          class=\"full-width\">\n        </mj-dropdown>\n        @if (form.get('modelId')?.invalid && form.get('modelId')?.touched) {\n          <div class=\"error-message\">\n            <i class=\"fa-solid fa-exclamation-circle\"></i>\n            Please select an AI model\n          </div>\n        }\n      </div>\n      \n      <!-- System Prompt -->\n      <div class=\"form-group\">\n        <label>System Prompt</label>\n        <textarea\n          class=\"mj-textarea full-width\"\n          formControlName=\"systemPrompt\"\n          placeholder=\"Define the agent's behavior and personality...\"\n          rows=\"4\"></textarea>\n        <div class=\"field-hint\">\n          <i class=\"fa-solid fa-info-circle\"></i>\n          This sets the agent's context and behavior\n        </div>\n      </div>\n      \n      <!-- Advanced Settings -->\n      <div class=\"advanced-settings\">\n        <div class=\"section-header\">\n          <i class=\"fa-solid fa-cog\"></i>\n          Advanced Settings\n        </div>\n        \n        <div class=\"advanced-grid\">\n          <!-- Temperature -->\n          <div class=\"setting-group\">\n            <label>Temperature</label>\n            <div class=\"slider-container\">\n              <input\n                type=\"range\"\n                class=\"mj-input temperature-slider\"\n                formControlName=\"temperature\"\n                min=\"0\"\n                max=\"2\"\n                step=\"0.1\">\n              <span class=\"slider-value\">{{ form.get('temperature')?.value }}</span>\n            </div>\n            <div class=\"field-hint\">Higher values make output more creative</div>\n          </div>\n          \n          <!-- Max Tokens -->\n          <div class=\"setting-group\">\n            <label>Max Tokens</label>\n            <mj-numeric-input\n              formControlName=\"maxTokens\"\n              [Min]=\"1\"\n              [Max]=\"8000\"\n              [Step]=\"100\"\n              Format=\"n0\"\n              class=\"full-width\">\n            </mj-numeric-input>\n            <div class=\"field-hint\">Maximum response length</div>\n          </div>\n          \n          <!-- Enable Streaming -->\n          <div class=\"setting-group checkbox-group\">\n            <label>\n              <input type=\"checkbox\" formControlName=\"enableStreaming\" class=\"mj-checkbox\" />\n              <span>Enable Response Streaming</span>\n            </label>\n            <div class=\"field-hint\">Stream responses in real-time</div>\n          </div>\n        </div>\n      </div>\n    </div>\n    \n    <!-- Dialog Actions -->\n    <div class=\"dialog-actions\">\n      <button\n        type=\"button\"\n        mjButton\n        (click)=\"onCancel()\"\n        [disabled]=\"isSubmitting\">\n        Cancel\n      </button>\n      <button\n        type=\"submit\"\n        mjButton\n        variant=\"primary\"\n        [disabled]=\"form.invalid || isSubmitting\">\n        @if (isSubmitting) {\n          <span class=\"spinner-small\"></span>\n          <span>Creating...</span>\n        } @else {\n          <i class=\"fa-solid fa-plus-circle\"></i>\n          <span>Create Agent</span>\n        }\n      </button>\n    </div>\n  </form>\n</div>", styles: [".new-agent-dialog {\n  padding: 1.5rem;\n  min-width: 500px;\n  position: relative;\n}\n\n.new-agent-dialog .new-agent-alert-pos {\n  margin-bottom: 1.5rem;\n}\n\n.new-agent-dialog .loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: color-mix(in srgb, var(--mj-bg-surface) 90%, transparent);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  border-radius: 8px;\n}\n\n.new-agent-dialog .form-fields .form-group {\n  margin-bottom: 1.5rem;\n}\n\n.new-agent-dialog .form-fields .form-group label {\n  display: block;\n  font-weight: 500;\n  margin-bottom: 0.5rem;\n  color: var(--mj-text-secondary);\n}\n\n.new-agent-dialog .form-fields .form-group label.required::after {\n  content: ' *';\n  color: var(--mj-status-error);\n}\n\n.new-agent-dialog .form-fields .form-group .full-width {\n  width: 100%;\n}\n\n.new-agent-dialog .form-fields .form-group .error-message {\n  color: var(--mj-status-error);\n  font-size: 0.875rem;\n  margin-top: 0.25rem;\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.new-agent-dialog .form-fields .form-group .error-message i {\n  font-size: 0.75rem;\n}\n\n.new-agent-dialog .form-fields .form-group .field-hint {\n  font-size: 0.875rem;\n  color: var(--mj-text-muted);\n  margin-top: 0.25rem;\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.new-agent-dialog .form-fields .form-group .field-hint i {\n  font-size: 0.75rem;\n}\n\n.new-agent-dialog .form-fields .model-item {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.5rem 0;\n}\n\n.new-agent-dialog .form-fields .model-item .model-icon {\n  width: 36px;\n  height: 36px;\n  border-radius: 6px;\n  background: var(--mj-brand-primary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-inverse);\n}\n\n.new-agent-dialog .form-fields .model-item .model-icon i {\n  font-size: 1rem;\n}\n\n.new-agent-dialog .form-fields .model-item .model-details {\n  display: flex;\n  flex-direction: column;\n}\n\n.new-agent-dialog .form-fields .model-item .model-details .model-name {\n  font-weight: 500;\n}\n\n.new-agent-dialog .form-fields .model-item .model-details .model-vendor {\n  font-size: 0.75rem;\n  color: var(--mj-text-muted);\n}\n\n.new-agent-dialog .advanced-settings {\n  margin-top: 1.5rem;\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.new-agent-dialog .advanced-settings .advanced-grid {\n  padding: 1rem;\n  display: grid;\n  gap: 1.5rem;\n}\n\n.new-agent-dialog .advanced-settings .advanced-grid .setting-group label {\n  display: block;\n  font-weight: 500;\n  margin-bottom: 0.5rem;\n  color: var(--mj-text-secondary);\n}\n\n.new-agent-dialog .advanced-settings .advanced-grid .setting-group .slider-container {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n.new-agent-dialog .advanced-settings .advanced-grid .setting-group .slider-container .temperature-slider {\n  flex: 1;\n}\n\n.new-agent-dialog .advanced-settings .advanced-grid .setting-group .slider-container .slider-value {\n  min-width: 3rem;\n  text-align: right;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n}\n\n.new-agent-dialog .advanced-settings .advanced-grid .setting-group.checkbox-group label {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  cursor: pointer;\n  font-weight: normal;\n}\n\n.new-agent-dialog .advanced-settings .advanced-grid .setting-group.checkbox-group label input[type=\"checkbox\"] {\n  cursor: pointer;\n}\n\n.new-agent-dialog .dialog-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.75rem;\n  margin-top: 2rem;\n  padding-top: 1.5rem;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.new-agent-dialog .dialog-actions button {\n  min-width: 120px;\n}\n\n.new-agent-dialog .dialog-actions button i {\n  margin-right: 0.5rem;\n}\n"] }]
     }], () => [{ type: i1.FormBuilder }, { type: i2.NavigationService }], { config: [{
             type: Input
         }] }); })();

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

@@ -462,11 +462,11 @@ export class PromptSelectorDialogComponent extends BaseAngularComponent {
             i0.ɵɵproperty("disabled", ctx.selectedPrompts.size === 0);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.config.MultiSelect ? 11 : 12);
-        } }, dependencies: [i1.DefaultValueAccessor, i1.NgControlStatus, i1.FormControlDirective, i2.MJEmptyStateComponent, i2.MJButtonDirective, i3.AsyncPipe, i3.DatePipe], styles: [".prompt-selector-dialog[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  max-height: 70vh;\n}\n\n\n[_nghost-%COMP%]     .k-dialog, \n[_nghost-%COMP%]     .k-window {\n  z-index: 10000 !important;\n}\n\n[_nghost-%COMP%]     .k-overlay {\n  z-index: 9999 !important;\n}\n\n\n.loading-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 300px;\n  color: var(--mj-text-secondary);\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n}\n\n\n.dialog-header[_ngcontent-%COMP%] {\n  padding: 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n}\n\n.search-section[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.search-box[_ngcontent-%COMP%] {\n  flex: 1;\n  position: relative;\n}\n\n.search-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mj-text-secondary);\n  z-index: 2;\n}\n\n.search-input[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n.search-input[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n  padding-left: 36px !important;\n}\n\n.view-controls[_ngcontent-%COMP%]   button.active[_ngcontent-%COMP%] {\n  background-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n\n.results-summary[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-sunken);\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.results-count[_ngcontent-%COMP%], .selected-count[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.selected-count[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-weight: 500;\n}\n\n\n.prompts-container[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n}\n\n\n.prompts-container.list-view[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n\n.prompts-container.grid-view[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n  gap: 16px;\n}\n\n\n.prompt-card[_ngcontent-%COMP%] {\n  border: 2px solid var(--mj-border-default);\n  border-radius: 8px;\n  padding: 16px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  background: var(--mj-bg-surface);\n  display: flex;\n  gap: 12px;\n  position: relative;\n}\n\n.prompt-card[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.prompt-card.selected[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 4%, var(--mj-bg-surface));\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.prompt-card.linked[_ngcontent-%COMP%] {\n  border-color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-card);\n  opacity: 0.7;\n  cursor: not-allowed;\n}\n\n.prompt-card.linked[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-text-muted);\n  box-shadow: none;\n}\n\n\n.selection-indicator[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  margin-top: 2px;\n}\n\n.selected-icon[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 18px;\n}\n\n.unselected-icon[_ngcontent-%COMP%] {\n  color: var(--mj-border-strong);\n  font-size: 18px;\n}\n\n.linked-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 18px;\n}\n\n\n.prompt-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.prompt-header[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  line-height: 1.4;\n  flex: 1;\n}\n\n.prompt-badges[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n  padding: 4px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mj-text-inverse);\n  white-space: nowrap;\n}\n\n.linked-badge[_ngcontent-%COMP%] {\n  padding: 4px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 500;\n  background: var(--mj-text-muted);\n  color: var(--mj-text-inverse);\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.prompt-description[_ngcontent-%COMP%] {\n  margin: 0 0 12px 0;\n  color: var(--mj-text-secondary);\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\n.prompt-metadata[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n  flex-wrap: wrap;\n}\n\n.metadata-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.metadata-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 12px;\n  font-size: 10px;\n}\n\n\n.prompts-container[_ngcontent-%COMP%]   mj-empty-state[_ngcontent-%COMP%] {\n  grid-column: 1 / -1;\n  width: 100%;\n}\n\n\n.dialog-footer[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n}\n\n.footer-left[_ngcontent-%COMP%] {\n  display: flex;\n}\n\n.footer-right[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n\n@media (max-width: 768px) {\n  .prompts-container.grid-view[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .prompt-header[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 8px;\n  }\n\n  .search-section[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 8px;\n  }\n\n  .view-controls[_ngcontent-%COMP%] {\n    align-self: flex-end;\n  }\n}"] }); }
+        } }, dependencies: [i1.DefaultValueAccessor, i1.NgControlStatus, i1.FormControlDirective, i2.MJEmptyStateComponent, i2.MJButtonDirective, i3.AsyncPipe, i3.DatePipe], styles: [".prompt-selector-dialog[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  max-height: 70vh;\n}\n\n\n.loading-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 300px;\n  color: var(--mj-text-secondary);\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n}\n\n\n.dialog-header[_ngcontent-%COMP%] {\n  padding: 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n}\n\n.search-section[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.search-box[_ngcontent-%COMP%] {\n  flex: 1;\n  position: relative;\n}\n\n.search-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 12px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mj-text-secondary);\n  z-index: 2;\n}\n\n.search-input[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n.search-input[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n  padding-left: 36px !important;\n}\n\n.view-controls[_ngcontent-%COMP%]   button.active[_ngcontent-%COMP%] {\n  background-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n\n.results-summary[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-sunken);\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.results-count[_ngcontent-%COMP%], .selected-count[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.selected-count[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-weight: 500;\n}\n\n\n.prompts-container[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n}\n\n\n.prompts-container.list-view[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n\n.prompts-container.grid-view[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n  gap: 16px;\n}\n\n\n.prompt-card[_ngcontent-%COMP%] {\n  border: 2px solid var(--mj-border-default);\n  border-radius: 8px;\n  padding: 16px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  background: var(--mj-bg-surface);\n  display: flex;\n  gap: 12px;\n  position: relative;\n}\n\n.prompt-card[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.prompt-card.selected[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 4%, var(--mj-bg-surface));\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.prompt-card.linked[_ngcontent-%COMP%] {\n  border-color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-card);\n  opacity: 0.7;\n  cursor: not-allowed;\n}\n\n.prompt-card.linked[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-text-muted);\n  box-shadow: none;\n}\n\n\n.selection-indicator[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  margin-top: 2px;\n}\n\n.selected-icon[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 18px;\n}\n\n.unselected-icon[_ngcontent-%COMP%] {\n  color: var(--mj-border-strong);\n  font-size: 18px;\n}\n\n.linked-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 18px;\n}\n\n\n.prompt-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.prompt-header[_ngcontent-%COMP%] {\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[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  line-height: 1.4;\n  flex: 1;\n}\n\n.prompt-badges[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n  padding: 4px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--mj-text-inverse);\n  white-space: nowrap;\n}\n\n.linked-badge[_ngcontent-%COMP%] {\n  padding: 4px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 500;\n  background: var(--mj-text-muted);\n  color: var(--mj-text-inverse);\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.prompt-description[_ngcontent-%COMP%] {\n  margin: 0 0 12px 0;\n  color: var(--mj-text-secondary);\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\n.prompt-metadata[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 16px;\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n  flex-wrap: wrap;\n}\n\n.metadata-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.metadata-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 12px;\n  font-size: 10px;\n}\n\n\n.prompts-container[_ngcontent-%COMP%]   mj-empty-state[_ngcontent-%COMP%] {\n  grid-column: 1 / -1;\n  width: 100%;\n}\n\n\n.dialog-footer[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n}\n\n.footer-left[_ngcontent-%COMP%] {\n  display: flex;\n}\n\n.footer-right[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n\n@media (max-width: 768px) {\n  .prompts-container.grid-view[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .prompt-header[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 8px;\n  }\n\n  .search-section[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 8px;\n  }\n\n  .view-controls[_ngcontent-%COMP%] {\n    align-self: flex-end;\n  }\n}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PromptSelectorDialogComponent, [{
         type: Component,
-        args: [{ standalone: false, 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          <input\n            class=\"mj-input search-input\"\n            [formControl]=\"searchControl\"\n            placeholder=\"Search prompts by name or description...\">\n        </div>\n        \n        <div class=\"view-controls\">\n          <button mjButton\n                  variant=\"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        <mj-empty-state\n          Variant=\"no-results\"\n          Title=\"No prompts found\"\n          Message=\"Try adjusting your search criteria or check that prompts are properly configured.\"\n          Size=\"compact\" />\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 mjButton\n                variant=\"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 mjButton\n              variant=\"flat\"\n              (click)=\"cancel()\">\n        Cancel\n      </button>\n\n      <button mjButton\n              variant=\"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: var(--mj-text-secondary);\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 var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\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: var(--mj-text-secondary);\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: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n/* === Results Summary === */\n.results-summary {\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-sunken);\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.results-count, .selected-count {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.selected-count {\n  color: var(--mj-brand-primary);\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 var(--mj-border-default);\n  border-radius: 8px;\n  padding: 16px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  background: var(--mj-bg-surface);\n  display: flex;\n  gap: 12px;\n  position: relative;\n}\n\n.prompt-card:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.prompt-card.selected {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 4%, var(--mj-bg-surface));\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.prompt-card.linked {\n  border-color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-card);\n  opacity: 0.7;\n  cursor: not-allowed;\n}\n\n.prompt-card.linked:hover {\n  border-color: var(--mj-text-muted);\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: var(--mj-brand-primary);\n  font-size: 18px;\n}\n\n.unselected-icon {\n  color: var(--mj-border-strong);\n  font-size: 18px;\n}\n\n.linked-icon {\n  color: var(--mj-text-muted);\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: var(--mj-text-primary);\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: var(--mj-text-inverse);\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: var(--mj-text-muted);\n  color: var(--mj-text-inverse);\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: var(--mj-text-secondary);\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: var(--mj-text-disabled);\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 empty state spans the full container in grid view */\n.prompts-container mj-empty-state {\n  grid-column: 1 / -1;\n  width: 100%;\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 var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\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}\n"] }]
+        args: [{ standalone: false, 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          <input\n            class=\"mj-input search-input\"\n            [formControl]=\"searchControl\"\n            placeholder=\"Search prompts by name or description...\">\n        </div>\n        \n        <div class=\"view-controls\">\n          <button mjButton\n                  variant=\"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        <mj-empty-state\n          Variant=\"no-results\"\n          Title=\"No prompts found\"\n          Message=\"Try adjusting your search criteria or check that prompts are properly configured.\"\n          Size=\"compact\" />\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 mjButton\n                variant=\"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 mjButton\n              variant=\"flat\"\n              (click)=\"cancel()\">\n        Cancel\n      </button>\n\n      <button mjButton\n              variant=\"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/* === 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: var(--mj-text-secondary);\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 var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\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: var(--mj-text-secondary);\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: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n/* === Results Summary === */\n.results-summary {\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-sunken);\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.results-count, .selected-count {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.selected-count {\n  color: var(--mj-brand-primary);\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 var(--mj-border-default);\n  border-radius: 8px;\n  padding: 16px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  background: var(--mj-bg-surface);\n  display: flex;\n  gap: 12px;\n  position: relative;\n}\n\n.prompt-card:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.prompt-card.selected {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 4%, var(--mj-bg-surface));\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.prompt-card.linked {\n  border-color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-card);\n  opacity: 0.7;\n  cursor: not-allowed;\n}\n\n.prompt-card.linked:hover {\n  border-color: var(--mj-text-muted);\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: var(--mj-brand-primary);\n  font-size: 18px;\n}\n\n.unselected-icon {\n  color: var(--mj-border-strong);\n  font-size: 18px;\n}\n\n.linked-icon {\n  color: var(--mj-text-muted);\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: var(--mj-text-primary);\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: var(--mj-text-inverse);\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: var(--mj-text-muted);\n  color: var(--mj-text-inverse);\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: var(--mj-text-secondary);\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: var(--mj-text-disabled);\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 empty state spans the full container in grid view */\n.prompts-container mj-empty-state {\n  grid-column: 1 / -1;\n  width: 100%;\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 var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\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}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }], { DialogClose: [{
             type: Output
         }] }); })();

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

@@ -444,11 +444,11 @@ export class SubAgentAdvancedSettingsDialogComponent extends BaseAngularComponen
             i0.ɵɵproperty("disabled", i0.ɵɵpipeBind1(9, 8, ctx.isSaving$) || false || (i0.ɵɵpipeBind1(10, 10, ctx.isLoading$) || false) || ctx.hasExecutionOrderError());
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(i0.ɵɵpipeBind1(12, 12, ctx.isSaving$) ? 11 : 13);
-        } }, dependencies: [i1.ɵNgNoValidate, i1.CheckboxControlValueAccessor, i1.NgControlStatus, i1.NgControlStatusGroup, i1.FormGroupDirective, i1.FormControlName, i2.MJButtonDirective, i2.MJDropdownComponent, i2.MJNumericInputComponent, i3.AsyncPipe], styles: [".sub-agent-advanced-settings-dialog[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n\n\n[_nghost-%COMP%]     .k-dialog, \n[_nghost-%COMP%]     .k-window {\n  z-index: 10000 !important;\n}\n\n[_nghost-%COMP%]     .k-overlay {\n  z-index: 9999 !important;\n}\n\n\n.loading-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 300px;\n  color: var(--mj-text-muted);\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  margin-bottom: 1rem;\n}\n\n.loading-spinner[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.loading-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin-top: 1rem;\n  font-size: 1.1rem;\n}\n\n\n.advanced-form[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 1.5rem;\n}\n\n.form-section[_ngcontent-%COMP%] {\n  margin-bottom: 2rem;\n  background: var(--mj-bg-surface);\n  border-radius: 8px;\n  border: 1px solid var(--mj-border-default);\n  overflow: hidden;\n}\n\n.section-title[_ngcontent-%COMP%] {\n  margin: 0;\n  padding: 1rem 1.5rem;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\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[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.form-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 1.5rem;\n  padding: 1.5rem;\n}\n\n.form-field[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.form-field.full-width[_ngcontent-%COMP%] {\n  grid-column: 1 / -1;\n}\n\n\nlabel[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  font-size: 0.9rem;\n}\n\n.checkbox-label[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n}\n\n.checkbox-label.disabled[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  cursor: not-allowed;\n}\n\n.form-control[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n.field-hint[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 0.8rem;\n  margin-top: 0.25rem;\n  line-height: 1.3;\n}\n\n.disabled-hint[_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled);\n  font-style: italic;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.disabled-hint[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.field-error[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n  font-size: 0.8rem;\n  margin-top: 0.25rem;\n}\n\n\n.form-control.ng-invalid.ng-touched[_ngcontent-%COMP%], \n.error-border[_ngcontent-%COMP%] {\n  border-color: var(--mj-status-error) !important;\n}\n\n.form-control.ng-valid.ng-touched[_ngcontent-%COMP%] {\n  border-color: var(--mj-status-success);\n}\n\n\n.execution-mode-option[_ngcontent-%COMP%] {\n  padding: 0.5rem 0;\n}\n\n.option-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-bottom: 0.25rem;\n}\n\n.option-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  width: 16px;\n}\n\n.option-title[_ngcontent-%COMP%] {\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  font-size: 0.9rem;\n}\n\n.option-description[_ngcontent-%COMP%] {\n  font-size: 0.8rem;\n  color: var(--mj-text-secondary);\n  line-height: 1.3;\n  margin-left: 1.5rem;\n}\n\n\n.dialog-footer[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 1rem;\n  padding: 1rem 1.5rem;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n}\n\n.dialog-footer[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  min-width: 120px;\n}\n\n.dialog-footer[_ngcontent-%COMP%]   button[themeColor=\"primary\"][_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 0.5rem;\n}\n\n\n\n\n.form-section[_ngcontent-%COMP%]:first-child   .section-title[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n\n.form-section[_ngcontent-%COMP%]:nth-child(2)   .section-title[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n\n.form-section[_ngcontent-%COMP%]:nth-child(3)   .section-title[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n}\n\n\n@media (max-width: 768px) {\n  .form-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n    gap: 1rem;\n    padding: 1rem;\n  }\n\n  .form-field.full-width[_ngcontent-%COMP%] {\n    grid-column: 1;\n  }\n\n  .advanced-form[_ngcontent-%COMP%] {\n    padding: 1rem;\n  }\n\n  .section-title[_ngcontent-%COMP%] {\n    padding: 0.75rem 1rem;\n    font-size: 1rem;\n  }\n\n  .dialog-footer[_ngcontent-%COMP%] {\n    padding: 1rem;\n    flex-direction: column;\n  }\n\n  .dialog-footer[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n    width: 100%;\n  }\n}\n\n\n.error-border[_ngcontent-%COMP%] {\n  border: 2px solid var(--mj-status-error) !important;\n  background-color: color-mix(in srgb, var(--mj-status-error) 4%, var(--mj-bg-surface));\n}"] }); }
+        } }, dependencies: [i1.ɵNgNoValidate, i1.CheckboxControlValueAccessor, i1.NgControlStatus, i1.NgControlStatusGroup, i1.FormGroupDirective, i1.FormControlName, i2.MJButtonDirective, i2.MJDropdownComponent, i2.MJNumericInputComponent, i3.AsyncPipe], styles: [".sub-agent-advanced-settings-dialog[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n\n\n.loading-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 300px;\n  color: var(--mj-text-muted);\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  margin-bottom: 1rem;\n}\n\n.loading-spinner[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.loading-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin-top: 1rem;\n  font-size: 1.1rem;\n}\n\n\n.advanced-form[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 1.5rem;\n}\n\n.form-section[_ngcontent-%COMP%] {\n  margin-bottom: 2rem;\n  background: var(--mj-bg-surface);\n  border-radius: 8px;\n  border: 1px solid var(--mj-border-default);\n  overflow: hidden;\n}\n\n.section-title[_ngcontent-%COMP%] {\n  margin: 0;\n  padding: 1rem 1.5rem;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\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[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.form-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 1.5rem;\n  padding: 1.5rem;\n}\n\n.form-field[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.form-field.full-width[_ngcontent-%COMP%] {\n  grid-column: 1 / -1;\n}\n\n\nlabel[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  font-size: 0.9rem;\n}\n\n.checkbox-label[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n}\n\n.checkbox-label.disabled[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  cursor: not-allowed;\n}\n\n.form-control[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n.field-hint[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 0.8rem;\n  margin-top: 0.25rem;\n  line-height: 1.3;\n}\n\n.disabled-hint[_ngcontent-%COMP%] {\n  color: var(--mj-text-disabled);\n  font-style: italic;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.disabled-hint[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.field-error[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n  font-size: 0.8rem;\n  margin-top: 0.25rem;\n}\n\n\n.form-control.ng-invalid.ng-touched[_ngcontent-%COMP%], \n.error-border[_ngcontent-%COMP%] {\n  border-color: var(--mj-status-error) !important;\n}\n\n.form-control.ng-valid.ng-touched[_ngcontent-%COMP%] {\n  border-color: var(--mj-status-success);\n}\n\n\n.execution-mode-option[_ngcontent-%COMP%] {\n  padding: 0.5rem 0;\n}\n\n.option-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-bottom: 0.25rem;\n}\n\n.option-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  width: 16px;\n}\n\n.option-title[_ngcontent-%COMP%] {\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  font-size: 0.9rem;\n}\n\n.option-description[_ngcontent-%COMP%] {\n  font-size: 0.8rem;\n  color: var(--mj-text-secondary);\n  line-height: 1.3;\n  margin-left: 1.5rem;\n}\n\n\n.dialog-footer[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 1rem;\n  padding: 1rem 1.5rem;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\n}\n\n.dialog-footer[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  min-width: 120px;\n}\n\n.dialog-footer[_ngcontent-%COMP%]   button[themeColor=\"primary\"][_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 0.5rem;\n}\n\n\n\n\n.form-section[_ngcontent-%COMP%]:first-child   .section-title[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n\n.form-section[_ngcontent-%COMP%]:nth-child(2)   .section-title[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n\n.form-section[_ngcontent-%COMP%]:nth-child(3)   .section-title[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n}\n\n\n@media (max-width: 768px) {\n  .form-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n    gap: 1rem;\n    padding: 1rem;\n  }\n\n  .form-field.full-width[_ngcontent-%COMP%] {\n    grid-column: 1;\n  }\n\n  .advanced-form[_ngcontent-%COMP%] {\n    padding: 1rem;\n  }\n\n  .section-title[_ngcontent-%COMP%] {\n    padding: 0.75rem 1rem;\n    font-size: 1rem;\n  }\n\n  .dialog-footer[_ngcontent-%COMP%] {\n    padding: 1rem;\n    flex-direction: column;\n  }\n\n  .dialog-footer[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n    width: 100%;\n  }\n}\n\n\n.error-border[_ngcontent-%COMP%] {\n  border: 2px solid var(--mj-status-error) !important;\n  background-color: color-mix(in srgb, var(--mj-status-error) 4%, var(--mj-bg-surface));\n}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SubAgentAdvancedSettingsDialogComponent, [{
         type: Component,
-        args: [{ standalone: false, 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            <mj-numeric-input\n              formControlName=\"executionOrder\"\n              [Min]=\"0\"\n              Format=\"0\"\n              [class.error-border]=\"hasExecutionOrderError()\"\n              class=\"form-control\">\n            </mj-numeric-input>\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            <mj-dropdown\n              formControlName=\"executionMode\"\n              [Data]=\"executionModeOptions\"\n              TextField=\"text\"\n              ValueField=\"value\"\n              [ValuePrimitive]=\"true\"\n              class=\"form-control\">\n            </mj-dropdown>\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            <mj-dropdown\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            </mj-dropdown>\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            <mj-dropdown\n              formControlName=\"status\"\n              [Data]=\"statusOptions\"\n              TextField=\"text\"\n              ValueField=\"value\"\n              [ValuePrimitive]=\"true\"\n              class=\"form-control\">\n            </mj-dropdown>\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              <input type=\"checkbox\"\n                class=\"mj-checkbox\"\n                formControlName=\"exposeAsAction\"\n                [disabled]=\"true\">\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 mjButton\n            variant=\"flat\"\n            (click)=\"cancel()\"\n            [disabled]=\"(isSaving$ | async) || false\">\n      Cancel\n    </button>\n\n    <button mjButton\n            variant=\"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: var(--mj-text-muted);\n}\n\n.loading-spinner {\n  margin-bottom: 1rem;\n}\n\n.loading-spinner i {\n  color: var(--mj-brand-primary);\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: var(--mj-bg-surface);\n  border-radius: 8px;\n  border: 1px solid var(--mj-border-default);\n  overflow: hidden;\n}\n\n.section-title {\n  margin: 0;\n  padding: 1rem 1.5rem;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\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: var(--mj-brand-primary);\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: var(--mj-text-secondary);\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: var(--mj-text-secondary);\n  cursor: pointer;\n}\n\n.checkbox-label.disabled {\n  color: var(--mj-text-muted);\n  cursor: not-allowed;\n}\n\n.form-control {\n  width: 100%;\n}\n\n.field-hint {\n  color: var(--mj-text-muted);\n  font-size: 0.8rem;\n  margin-top: 0.25rem;\n  line-height: 1.3;\n}\n\n.disabled-hint {\n  color: var(--mj-text-disabled);\n  font-style: italic;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.disabled-hint i {\n  color: var(--mj-brand-primary);\n}\n\n.field-error {\n  color: var(--mj-status-error);\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: var(--mj-status-error) !important;\n}\n\n.form-control.ng-valid.ng-touched {\n  border-color: var(--mj-status-success);\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: var(--mj-brand-primary);\n  width: 16px;\n}\n\n.option-title {\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  font-size: 0.9rem;\n}\n\n.option-description {\n  font-size: 0.8rem;\n  color: var(--mj-text-secondary);\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 var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\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: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n/* Agent Configuration */\n.form-section:nth-child(2) .section-title {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n/* Capability Restrictions */\n.form-section:nth-child(3) .section-title {\n  background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\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 var(--mj-status-error) !important;\n  background-color: color-mix(in srgb, var(--mj-status-error) 4%, var(--mj-bg-surface));\n}\n"] }]
+        args: [{ standalone: false, 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            <mj-numeric-input\n              formControlName=\"executionOrder\"\n              [Min]=\"0\"\n              Format=\"0\"\n              [class.error-border]=\"hasExecutionOrderError()\"\n              class=\"form-control\">\n            </mj-numeric-input>\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            <mj-dropdown\n              formControlName=\"executionMode\"\n              [Data]=\"executionModeOptions\"\n              TextField=\"text\"\n              ValueField=\"value\"\n              [ValuePrimitive]=\"true\"\n              class=\"form-control\">\n            </mj-dropdown>\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            <mj-dropdown\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            </mj-dropdown>\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            <mj-dropdown\n              formControlName=\"status\"\n              [Data]=\"statusOptions\"\n              TextField=\"text\"\n              ValueField=\"value\"\n              [ValuePrimitive]=\"true\"\n              class=\"form-control\">\n            </mj-dropdown>\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              <input type=\"checkbox\"\n                class=\"mj-checkbox\"\n                formControlName=\"exposeAsAction\"\n                [disabled]=\"true\">\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 mjButton\n            variant=\"flat\"\n            (click)=\"cancel()\"\n            [disabled]=\"(isSaving$ | async) || false\">\n      Cancel\n    </button>\n\n    <button mjButton\n            variant=\"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/* === 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: var(--mj-text-muted);\n}\n\n.loading-spinner {\n  margin-bottom: 1rem;\n}\n\n.loading-spinner i {\n  color: var(--mj-brand-primary);\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: var(--mj-bg-surface);\n  border-radius: 8px;\n  border: 1px solid var(--mj-border-default);\n  overflow: hidden;\n}\n\n.section-title {\n  margin: 0;\n  padding: 1rem 1.5rem;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\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: var(--mj-brand-primary);\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: var(--mj-text-secondary);\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: var(--mj-text-secondary);\n  cursor: pointer;\n}\n\n.checkbox-label.disabled {\n  color: var(--mj-text-muted);\n  cursor: not-allowed;\n}\n\n.form-control {\n  width: 100%;\n}\n\n.field-hint {\n  color: var(--mj-text-muted);\n  font-size: 0.8rem;\n  margin-top: 0.25rem;\n  line-height: 1.3;\n}\n\n.disabled-hint {\n  color: var(--mj-text-disabled);\n  font-style: italic;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.disabled-hint i {\n  color: var(--mj-brand-primary);\n}\n\n.field-error {\n  color: var(--mj-status-error);\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: var(--mj-status-error) !important;\n}\n\n.form-control.ng-valid.ng-touched {\n  border-color: var(--mj-status-success);\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: var(--mj-brand-primary);\n  width: 16px;\n}\n\n.option-title {\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  font-size: 0.9rem;\n}\n\n.option-description {\n  font-size: 0.8rem;\n  color: var(--mj-text-secondary);\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 var(--mj-border-default);\n  background: var(--mj-bg-surface-card);\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: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n/* Agent Configuration */\n.form-section:nth-child(2) .section-title {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n/* Capability Restrictions */\n.form-section:nth-child(3) .section-title {\n  background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\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 var(--mj-status-error) !important;\n  background-color: color-mix(in srgb, var(--mj-status-error) 4%, var(--mj-bg-surface));\n}\n"] }]
     }], () => [{ type: i1.FormBuilder }, { type: i0.ChangeDetectorRef }], { DialogClose: [{
             type: Output
         }] }); })();