npm - @memberjunction/ng-core-entity-forms - Versions diffs - 5.0.0 → 5.1.0 - Mend

@memberjunction/ng-core-entity-forms 5.0.0 → 5.1.0

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

Files changed (2433) hide show

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

@@ -63,5 +63,5 @@ export { FlowAgentFormSectionComponent };
         type: Component,
         args: [{ standalone: false, selector: 'mj-flow-agent-form-section', template: "@if (AgentID) {\n    <mj-flow-agent-editor\n        [AgentID]=\"AgentID\"\n        [EditMode]=\"EditMode\"\n        [FullScreen]=\"IsFullScreen\"\n        (FlowSaved)=\"OnFlowSaved()\"\n        (FullScreenToggled)=\"OnFullScreenToggled($event)\">\n    </mj-flow-agent-editor>\n} @else {\n    <div class=\"flow-empty-state\">\n        <i class=\"fa-solid fa-info-circle\"></i>\n        <p>Save the agent first to configure the workflow.</p>\n    </div>\n}\n", styles: ["/* Flow Agent Form Section - thin wrapper */\n:host {\n    display: block;\n    width: 100%;\n    height: 100%;\n}\n\nmj-flow-agent-editor {\n    display: block;\n    width: 100%;\n    /* Subtract the full stack of containers above:\n       form-toolbar (~40px) + agent-header (~75px) + form-content padding (24px)\n       + panelbar-item header (~52px) + panel-content padding (16px) + margins (~30px)\n       + browser chrome (~50px) \u2248 290px. Use 300px with a safety buffer. */\n    height: calc(100vh - 300px);\n    min-height: 400px;\n}\n\n.flow-empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px 20px;\n    text-align: center;\n    color: #94a3b8;\n}\n\n.flow-empty-state i {\n    font-size: 32px;\n    margin-bottom: 12px;\n    color: #cbd5e1;\n}\n\n.flow-empty-state p {\n    font-size: 14px;\n    margin: 0;\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FlowAgentFormSectionComponent, { className: "FlowAgentFormSectionComponent", filePath: "src/lib/custom/aiagents/flowagenttype/flow-agent-form-section.component.ts", lineNumber: 18 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FlowAgentFormSectionComponent, { className: "FlowAgentFormSectionComponent", filePath: "src/lib/custom/AIAgents/FlowAgentType/flow-agent-form-section.component.ts", lineNumber: 18 }); })();
 //# sourceMappingURL=flow-agent-form-section.component.js.map

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

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

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

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

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

@@ -4496,5 +4496,5 @@ export { AIAgentFormComponentExtended };
             type: ViewChild,
             args: ['customSectionContainer', { read: ViewContainerRef }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAgentFormComponentExtended, { className: "AIAgentFormComponentExtended", filePath: "src/lib/custom/aiagents/ai-agent-form.component.ts", lineNumber: 74 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAgentFormComponentExtended, { className: "AIAgentFormComponentExtended", filePath: "src/lib/custom/AIAgents/ai-agent-form.component.ts", lineNumber: 74 }); })();
 //# sourceMappingURL=ai-agent-form.component.js.map

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

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

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

@@ -712,5 +712,5 @@ export class CreateSubAgentDialogComponent {
         type: Component,
         args: [{ 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          <div class=\"empty-state\">\n            <i class=\"fa-solid fa-comments\"></i>\n            <p>No prompts added yet. Click the buttons above to add prompts.</p>\n          </div>\n        }\n      </div>\n\n      <!-- Actions Section -->\n      <div class=\"form-section\">\n        <h3 class=\"section-title\">\n          <i class=\"fa-solid fa-bolt\"></i>\n          Actions ({{ linkedActionCount }})\n        </h3>\n        \n        <div class=\"section-actions\">\n          <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addAction()\">\n            <i class=\"fa-solid fa-plus\"></i>\n            Add Action\n          </button>\n        </div>\n\n        @if (linkedActions.length > 0) {\n          <div class=\"linked-items\">\n            @for (action of linkedActions; track action.ID) {\n              <div class=\"linked-item action-item\">\n                <div class=\"item-info\">\n                  <i class=\"fa-solid fa-bolt\"></i>\n                  <span class=\"item-name\">{{ action.Name }}</span>\n                  @if (action.Description) {\n                    <span class=\"item-description\">{{ action.Description }}</span>\n                  }\n                </div>\n                <button type=\"button\" class=\"btn btn-danger btn-xs\" (click)=\"removeAction(action)\">\n                  <i class=\"fa-solid fa-times\"></i>\n                </button>\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"empty-state\">\n            <i class=\"fa-solid fa-bolt\"></i>\n            <p>No actions added yet. Click the button above to add actions.</p>\n          </div>\n        }\n      </div>\n    </form>\n  }\n\n  <!-- Dialog Actions -->\n  <div class=\"dialog-actions\">\n    <button type=\"button\" class=\"btn btn-secondary\" (click)=\"cancel()\" [disabled]=\"isSaving$ | async\">\n      <i class=\"fa-solid fa-times\"></i>\n      Cancel\n    </button>\n    <button type=\"button\" class=\"btn btn-primary\" (click)=\"save()\" [disabled]=\"(isSaving$ | async) || !subAgentForm.valid\">\n      @if (isSaving$ | async) {\n        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n        Creating...\n      } @else {\n        <i class=\"fa-solid fa-save\"></i>\n        Create Sub-Agent\n      }\n    </button>\n  </div>\n</div>", styles: [".sub-agent-dialog {\n  padding: 16px;\n  max-width: 100%;\n  max-height: 90vh;\n  overflow-y: auto;\n}\n\n.sub-agent-header {\n  margin-bottom: 20px;\n  border-bottom: 1px solid #e0e0e0;\n  padding-bottom: 15px;\n}\n\n.dialog-title {\n  margin: 0;\n  font-size: 1.4em;\n  font-weight: 600;\n  color: #333;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.dialog-title i {\n  color: #007bff;\n}\n\n.parent-info {\n  margin: 8px 0 0 0;\n  color: #666;\n  font-size: 0.9em;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.parent-info i {\n  color: #28a745;\n}\n\n.loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  padding: 40px;\n  color: #666;\n}\n\n.loading-container i {\n  font-size: 1.2em;\n  color: #007bff;\n}\n\n.sub-agent-form {\n  display: flex;\n  flex-direction: column;\n  gap: 25px;\n}\n\n.form-section {\n  border: 1px solid #e9ecef;\n  border-radius: 8px;\n  padding: 20px;\n  background-color: #f8f9fa;\n}\n\n.section-title {\n  margin: 0 0 15px 0;\n  font-size: 1.1em;\n  font-weight: 600;\n  color: #495057;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.section-title i {\n  color: #007bff;\n}\n\n.form-row {\n  display: flex;\n  gap: 15px;\n  margin-bottom: 15px;\n}\n\n.form-row:last-child {\n  margin-bottom: 0;\n}\n\n.form-group {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n}\n\n.form-group label {\n  font-weight: 500;\n  color: #495057;\n  margin-bottom: 5px;\n  font-size: 0.9em;\n}\n\n.form-group label[for=\"enableCaching\"] {\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n}\n\n.form-group label[for=\"enableCaching\"] input {\n  margin: 0;\n  width: auto;\n}\n\n.form-control {\n  padding: 8px 12px;\n  border: 1px solid #ced4da;\n  border-radius: 4px;\n  font-size: 0.9em;\n  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n\n.form-control:focus {\n  outline: none;\n  border-color: #007bff;\n  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);\n}\n\n.form-control[readonly] {\n  background-color: #e9ecef;\n  opacity: 1;\n}\n\n.section-actions {\n  display: flex;\n  gap: 10px;\n  margin-bottom: 15px;\n}\n\n.linked-items {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.linked-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px;\n  background-color: #ffffff;\n  border: 1px solid #dee2e6;\n  border-radius: 6px;\n  transition: box-shadow 0.15s ease-in-out;\n}\n\n.linked-item:hover {\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.item-info {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex: 1;\n}\n\n.item-info i {\n  color: #007bff;\n  width: 16px;\n  text-align: center;\n}\n\n.item-name {\n  font-weight: 500;\n  color: #333;\n}\n\n.item-description {\n  color: #666;\n  font-size: 0.85em;\n  margin-left: 10px;\n}\n\n.prompt-item .item-info i {\n  color: #28a745;\n}\n\n.action-item .item-info i {\n  color: #ffc107;\n}\n\n.empty-state {\n  text-align: center;\n  padding: 30px;\n  color: #6c757d;\n}\n\n.empty-state i {\n  font-size: 2em;\n  color: #dee2e6;\n  margin-bottom: 10px;\n}\n\n.empty-state p {\n  margin: 0;\n  font-size: 0.9em;\n}\n\n.dialog-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 10px;\n  margin-top: 30px;\n  padding-top: 20px;\n  border-top: 1px solid #e0e0e0;\n}\n\n.btn {\n  padding: 8px 16px;\n  border: none;\n  border-radius: 4px;\n  font-size: 0.9em;\n  font-weight: 500;\n  cursor: pointer;\n  transition: background-color 0.15s ease-in-out;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.btn:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.btn-primary {\n  background-color: #007bff;\n  color: white;\n}\n\n.btn-primary:hover:not(:disabled) {\n  background-color: #0056b3;\n}\n\n.btn-secondary {\n  background-color: #6c757d;\n  color: white;\n}\n\n.btn-secondary:hover:not(:disabled) {\n  background-color: #545b62;\n}\n\n.btn-success {\n  background-color: #28a745;\n  color: white;\n}\n\n.btn-success:hover:not(:disabled) {\n  background-color: #1e7e34;\n}\n\n.btn-danger {\n  background-color: #dc3545;\n  color: white;\n}\n\n.btn-danger:hover:not(:disabled) {\n  background-color: #c82333;\n}\n\n.btn-sm {\n  padding: 6px 12px;\n  font-size: 0.8em;\n}\n\n.btn-xs {\n  padding: 4px 8px;\n  font-size: 0.75em;\n}\n\n/* Responsive adjustments */\n@media (max-width: 768px) {\n  .sub-agent-dialog {\n    padding: 15px;\n    max-width: 95vw;\n  }\n  \n  .form-row {\n    flex-direction: column;\n    gap: 10px;\n  }\n  \n  .section-actions {\n    flex-direction: column;\n  }\n  \n  .dialog-actions {\n    flex-direction: column;\n  }\n  \n  .linked-item {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 10px;\n  }\n}\n\n/* Validation styles */\n.form-control.ng-invalid.ng-touched {\n  border-color: #dc3545;\n}\n\n.form-control.ng-valid.ng-touched {\n  border-color: #28a745;\n}\n\n/* Custom scrollbar for dialog */\n.sub-agent-dialog::-webkit-scrollbar {\n  width: 8px;\n}\n\n.sub-agent-dialog::-webkit-scrollbar-track {\n  background: #f1f1f1;\n  border-radius: 4px;\n}\n\n.sub-agent-dialog::-webkit-scrollbar-thumb {\n  background: #c1c1c1;\n  border-radius: 4px;\n}\n\n.sub-agent-dialog::-webkit-scrollbar-thumb:hover {\n  background: #a8a8a8;\n}\n\n/* Ensure dialog appears above banner and other elements */\n:host ::ng-deep .k-dialog,\n:host ::ng-deep .k-window {\n  z-index: 10000 !important;\n}\n\n:host ::ng-deep .k-overlay {\n  z-index: 9999 !important;\n}"] }]
     }], () => [{ type: i1.WindowRef }, { type: i0.ChangeDetectorRef }, { type: i2.AIAgentManagementService }, { type: i0.ViewContainerRef }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CreateSubAgentDialogComponent, { className: "CreateSubAgentDialogComponent", filePath: "src/lib/custom/aiagents/create-sub-agent-dialog.component.ts", lineNumber: 49 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CreateSubAgentDialogComponent, { className: "CreateSubAgentDialogComponent", filePath: "src/lib/custom/AIAgents/create-sub-agent-dialog.component.ts", lineNumber: 49 }); })();
 //# sourceMappingURL=create-sub-agent-dialog.component.js.map

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

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

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

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

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

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

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

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

package/dist/lib/custom/AIPromptRuns/ai-prompt-run-form.component.js CHANGED Viewed

@@ -2224,5 +2224,5 @@ export { AIPromptRunFormComponentExtended };
         type: Component,
         args: [{ standalone: false, selector: 'mj-ai-prompt-run-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"record-form-container\">\n    @if (record) {\n        <form class=\"record-form\" #form=\"ngForm\">\n            <mj-form-toolbar [Form]=\"this\"></mj-form-toolbar>\n\n            <!-- Header Section -->\n            <div class=\"prompt-run-header\">\n                <div class=\"header-content\">\n                    <div class=\"run-overview\">\n                        <div class=\"run-icon-wrapper\" [style.background-color]=\"getStatusColor() + '20'\">\n                            <i [class]=\"'fa-solid ' + getStatusIcon()\" [style.color]=\"getStatusColor()\"></i>\n                        </div>\n                        <div class=\"run-info\">\n                            <h1 class=\"run-title\">\n                                Prompt Run\n                                @if (record.ID) {\n                                    <span class=\"run-id\">#{{ record.ID.substring(0, 8) }}</span>\n                                }\n                            </h1>\n                            <div class=\"run-meta\">\n                                <span class=\"status-badge\" [style.background-color]=\"getStatusColor()\">\n                                    <i [class]=\"'fa-solid ' + getStatusIcon()\"></i>\n                                    {{ getStatusText() }}\n                                </span>\n                                @if (record.RunType) {\n                                    <span class=\"run-type-badge\" [style.color]=\"getRunTypeColor(record.RunType)\">\n                                        <i [class]=\"'fa-solid ' + getRunTypeIcon(record.RunType)\"></i>\n                                        {{ record.RunType }}\n                                    </span>\n                                }\n                                @if (prompt) {\n                                    <span class=\"prompt-name\" (click)=\"navigateToEntity('MJ: AI Prompts', prompt.ID)\" title=\"View Prompt\">\n                                        <i class=\"fa-solid fa-comment-dots\"></i>\n                                        {{ prompt.Name }}\n                                    </span>\n                                }\n                                @if (model) {\n                                    <span class=\"model-name\" (click)=\"navigateToEntity('MJ: AI Models', model.ID)\" title=\"View Model\">\n                                        <i class=\"fa-solid fa-microchip\"></i>\n                                        {{ model.Name }}\n                                    </span>\n                                }\n                                @if (record.Vendor) {\n                                    <span class=\"vendor-name\" (click)=\"navigateToEntity('MJ: AI Vendors', record.VendorID)\" title=\"View Vendor\">\n                                        <i class=\"fa-solid fa-building\"></i>\n                                        {{ record.Vendor }}\n                                    </span>\n                                }\n                                @if (record.RerunFromPromptRunID) {\n                                    <span class=\"original-run\" title=\"View Original Run\">\n                                        <i class=\"fa-solid fa-level-up-alt\"></i>\n                                        <a (click)=\"navigateToOriginalRun()\" class=\"original-link\">Original Run</a>\n                                    </span>\n                                }\n                            </div>\n                        </div>\n                    </div>\n                    \n                    <!-- Action Buttons -->\n                    <div class=\"run-actions\">\n                        <button kendoButton fillMode=\"outline\" size=\"small\" (click)=\"reRunPrompt()\" title=\"Re-run this prompt\">\n                            <i class=\"fa-solid fa-play-circle\"></i>\n                            Re-Run\n                        </button>\n                        <button kendoButton fillMode=\"outline\" size=\"small\" (click)=\"refreshData()\" title=\"Refresh data\">\n                            <i class=\"fa-solid fa-refresh\"></i>\n                        </button>\n                    </div>\n                </div>\n                \n                <!-- Key Metrics Bar -->\n                @if (record.ConfigurationID) {\n                    <!-- Configuration Bar -->\n                    <div class=\"metrics-bar\">\n                        <div class=\"metric-item\">\n                            <i class=\"fa-solid fa-cog\"></i>\n                            <div class=\"metric-content\">\n                                <div class=\"metric-label\">Configuration</div>\n                                <div class=\"metric-value\">\n                                    <a href=\"javascript:void(0)\" class=\"config-link\" (click)=\"navigateToEntity('MJ: AI Configurations', record.ConfigurationID)\">\n                                        {{ record.Configuration || 'Unknown' }}\n                                    </a>\n                                </div>\n                            </div>\n                        </div>\n                        @if (record.Temperature !== null && record.Temperature !== undefined) {\n                            <div class=\"metric-item\">\n                                <i class=\"fa-solid fa-temperature-high\"></i>\n                                <div class=\"metric-content\">\n                                    <div class=\"metric-label\">Temperature</div>\n                                    <div class=\"metric-value\">{{ record.Temperature }}</div>\n                                </div>\n                            </div>\n                        }\n                        @if (record.TopP !== null && record.TopP !== undefined) {\n                            <div class=\"metric-item\">\n                                <i class=\"fa-solid fa-percentage\"></i>\n                                <div class=\"metric-content\">\n                                    <div class=\"metric-label\">Top P</div>\n                                    <div class=\"metric-value\">{{ record.TopP }}</div>\n                                </div>\n                            </div>\n                        }\n                        @if (record.TopK !== null && record.TopK !== undefined) {\n                            <div class=\"metric-item\">\n                                <i class=\"fa-solid fa-list-ol\"></i>\n                                <div class=\"metric-content\">\n                                    <div class=\"metric-label\">Top K</div>\n                                    <div class=\"metric-value\">{{ record.TopK }}</div>\n                                </div>\n                            </div>\n                        }\n                        @if (record.EffortLevel !== null && record.EffortLevel !== undefined) {\n                            <div class=\"metric-item\">\n                                <i class=\"fa-solid fa-tachometer-alt\"></i>\n                                <div class=\"metric-content\">\n                                    <div class=\"metric-label\">Effort Level</div>\n                                    <div class=\"metric-value\">{{ record.EffortLevel }}</div>\n                                </div>\n                            </div>\n                        }\n                        @if (record.ResponseFormat) {\n                            <div class=\"metric-item\">\n                                <i class=\"fa-solid fa-code\"></i>\n                                <div class=\"metric-content\">\n                                    <div class=\"metric-label\">Response Format</div>\n                                    <div class=\"metric-value\">{{ record.ResponseFormat }}</div>\n                                </div>\n                            </div>\n                        }\n                    </div>\n                    \n                    <!-- Execution Metrics Bar (always show when configuration exists) -->\n                    <div class=\"metrics-bar\">\n                        <div class=\"metric-item\">\n                            <i class=\"fa-solid fa-clock\"></i>\n                            <div class=\"metric-content\">\n                                <div class=\"metric-label\">Duration</div>\n                                <div class=\"metric-value\">{{ formatDuration(record.ExecutionTimeMS) }}</div>\n                            </div>\n                        </div>\n                        <div class=\"metric-item\">\n                            <i class=\"fa-solid fa-coins\"></i>\n                            <div class=\"metric-content\">\n                                <div class=\"metric-label\">Total Tokens</div>\n                                <div class=\"metric-value\">{{ formatTokens(record.TokensUsed) }}</div>\n                            </div>\n                        </div>\n                        <div class=\"metric-item\">\n                            <i class=\"fa-solid fa-dollar-sign\"></i>\n                            <div class=\"metric-content\">\n                                <div class=\"metric-label\">Cost</div>\n                                <div class=\"metric-value\">{{ formatCost(record.TotalCost || record.Cost) }}</div>\n                            </div>\n                        </div>\n                        @if (record.RunAt) {\n                            <div class=\"metric-item\">\n                                <i class=\"fa-solid fa-calendar\"></i>\n                                <div class=\"metric-content\">\n                                    <div class=\"metric-label\">Started</div>\n                                    <div class=\"metric-value\">{{ record.RunAt | date:'short' }}</div>\n                                </div>\n                            </div>\n                        }\n                    </div>\n                } @else {\n                    <!-- Execution Metrics Bar (original behavior when no configuration) -->\n                    <div class=\"metrics-bar\">\n                        <div class=\"metric-item\">\n                            <i class=\"fa-solid fa-clock\"></i>\n                            <div class=\"metric-content\">\n                                <div class=\"metric-label\">Duration</div>\n                                <div class=\"metric-value\">{{ formatDuration(record.ExecutionTimeMS) }}</div>\n                            </div>\n                        </div>\n                        <div class=\"metric-item\">\n                            <i class=\"fa-solid fa-coins\"></i>\n                            <div class=\"metric-content\">\n                                <div class=\"metric-label\">Total Tokens</div>\n                                <div class=\"metric-value\">{{ formatTokens(record.TokensUsed) }}</div>\n                            </div>\n                        </div>\n                        <div class=\"metric-item\">\n                            <i class=\"fa-solid fa-dollar-sign\"></i>\n                            <div class=\"metric-content\">\n                                <div class=\"metric-label\">Cost</div>\n                                <div class=\"metric-value\">{{ formatCost(record.TotalCost || record.Cost) }}</div>\n                            </div>\n                        </div>\n                        @if (record.RunAt) {\n                            <div class=\"metric-item\">\n                                <i class=\"fa-solid fa-calendar\"></i>\n                                <div class=\"metric-content\">\n                                    <div class=\"metric-label\">Started</div>\n                                    <div class=\"metric-value\">{{ record.RunAt | date:'short' }}</div>\n                                </div>\n                            </div>\n                        }\n                    </div>\n                }\n            </div>\n\n            <!-- Main Content with Expansion Panels -->\n            <div class=\"form-content\">\n                <kendo-panelbar [keepItemContent]=\"true\">\n                    \n                    <!-- Input Panel with nested sub-panels -->\n                    <kendo-panelbar-item [expanded]=\"inputExpanded\" (stateChange)=\"onInputPanelToggle($event)\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <span class=\"panel-title\">\n                                <i class=\"fa-solid fa-comment-dots\"></i>\n                                Input\n                                @if (record.Messages && record.Messages.trim() !== '') {\n                                    <span class=\"panel-badge\">JSON</span>\n                                }\n                            </span>\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                @if (record.Messages && record.Messages.trim() !== '') {\n                                    <!-- Nested expansion panels for sub-sections -->\n                                    <div class=\"nested-panels\">\n                                        <!-- Messages Sub-Panel -->\n                                        <kendo-expansionpanel \n                                            [expanded]=\"messagesExpanded\" \n                                            class=\"sub-expansion-panel\"\n                                            [animation]=\"false\">\n                                            <ng-template kendoExpansionPanelTitleDirective>\n                                                <span class=\"sub-panel-title\">\n                                                    <i class=\"fa-solid fa-comments\"></i>\n                                                    Messages\n                                                    @if (chatMessages.length > 0) {\n                                                        <span class=\"panel-count\">({{ chatMessages.length }})</span>\n                                                    }\n                                                </span>\n                                            </ng-template>\n                                            <div class=\"sub-panel-content\">\n                                                @if (isParsingMessages || isLoadingRelatedData) {\n                                                    <div class=\"loading-state\">\n                                                        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                                                        <p>Loading messages...</p>\n                                                    </div>\n                                                } @else if (chatMessages.length > 0) {\n                                                    <mj-chat-message-viewer \n                                                        [messages]=\"chatMessages\">\n                                                    </mj-chat-message-viewer>\n                                                } @else {\n                                                    <div class=\"empty-state\">\n                                                        <i class=\"fa-solid fa-comment-slash\"></i>\n                                                        <p>No chat messages found</p>\n                                                    </div>\n                                                }\n                                            </div>\n                                        </kendo-expansionpanel>\n                                        \n                                        <!-- Data Sub-Panel -->\n                                        <kendo-expansionpanel \n                                            [expanded]=\"dataExpanded\" \n                                            class=\"sub-expansion-panel\"\n                                            [animation]=\"false\">\n                                            <ng-template kendoExpansionPanelTitleDirective>\n                                                <span class=\"sub-panel-title\">\n                                                    <i class=\"fa-solid fa-database\"></i>\n                                                    Data\n                                                    @if (inputData) {\n                                                        <span class=\"panel-badge\">Object</span>\n                                                    }\n                                                </span>\n                                            </ng-template>\n                                            <div class=\"sub-panel-content\">\n                                                @if (inputData && formattedData) {\n                                                    <div class=\"json-editor-container\">\n                                                        <div class=\"json-toolbar\">\n                                                            <button kendoButton\n                                                                fillMode=\"flat\" \n                                                                size=\"small\"\n                                                                (click)=\"copyToClipboard(formattedData, 'Data')\"\n                                                                title=\"Copy JSON\">\n                                                                <i class=\"fa-solid fa-copy\"></i> Copy\n                                                            </button>\n                                                        </div>\n                                                        <mj-code-editor \n                                                            [(ngModel)]=\"formattedData\"\n                                                            name=\"formattedData\"\n                                                            [readonly]=\"true\"\n                                                            [language]=\"'json'\"\n                                                            [lineWrapping]=\"true\"\n                                                            style=\"height: 300px; width: 100%;\">\n                                                        </mj-code-editor>\n                                                    </div>\n                                                } @else {\n                                                    <div class=\"empty-state\">\n                                                        <i class=\"fa-solid fa-database\"></i>\n                                                        <p>No data object found</p>\n                                                    </div>\n                                                }\n                                            </div>\n                                        </kendo-expansionpanel>\n                                        \n                                        <!-- Raw Sub-Panel -->\n                                        <kendo-expansionpanel \n                                            [expanded]=\"rawExpanded\" \n                                            class=\"sub-expansion-panel\"\n                                            [animation]=\"false\">\n                                            <ng-template kendoExpansionPanelTitleDirective>\n                                                <span class=\"sub-panel-title\">\n                                                    <i class=\"fa-solid fa-code\"></i>\n                                                    Raw\n                                                </span>\n                                            </ng-template>\n                                            <div class=\"sub-panel-content\">\n                                                <div class=\"json-editor-container\">\n                                                    <div class=\"json-toolbar\">\n                                                        <button kendoButton\n                                                            fillMode=\"flat\" \n                                                            size=\"small\"\n                                                            (click)=\"copyToClipboard(formattedMessages, 'Messages')\"\n                                                            title=\"Copy JSON\">\n                                                            <i class=\"fa-solid fa-copy\"></i> Copy\n                                                        </button>\n                                                    </div>\n                                                    <mj-code-editor \n                                                        [(ngModel)]=\"formattedMessages\"\n                                                        name=\"formattedMessages\"\n                                                        [readonly]=\"true\"\n                                                        [language]=\"'json'\"\n                                                        [lineWrapping]=\"true\"\n                                                        style=\"height: 400px; width: 100%;\">\n                                                    </mj-code-editor>\n                                                </div>\n                                            </div>\n                                        </kendo-expansionpanel>\n                                    </div>\n                                } @else {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-comment-slash\"></i>\n                                        <p>No input messages recorded</p>\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                    \n                    <!-- Result Panel -->\n                    <kendo-panelbar-item [expanded]=\"resultExpanded\" (stateChange)=\"onResultPanelToggle($event)\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <span class=\"panel-title\">\n                                <i class=\"fa-solid fa-square-check\"></i>\n                                Result\n                                @if (record.Result && record.Result.trim() !== '') {\n                                    <span class=\"panel-badge\">JSON</span>\n                                }\n                                @if (record.ErrorMessage) {\n                                    <span class=\"panel-badge error\">Error</span>\n                                }\n                            </span>\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                @if (record.ErrorMessage) {\n                                    <div class=\"error-message\">\n                                        <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                                        <div class=\"error-content\">\n                                            <h4>Error Message</h4>\n                                            <p>{{ record.ErrorMessage }}</p>\n                                        </div>\n                                    </div>\n                                }\n                                \n                                @if (record.Result && record.Result.trim() !== '') {\n                                    <div class=\"json-editor-container\">\n                                        <div class=\"json-toolbar\">\n                                            <button kendoButton\n                                                fillMode=\"flat\" \n                                                size=\"small\"\n                                                (click)=\"copyToClipboard(formattedResult, 'Result')\"\n                                                title=\"Copy JSON\">\n                                                <i class=\"fa-solid fa-copy\"></i> Copy\n                                            </button>\n                                        </div>\n                                        <mj-code-editor \n                                            [(ngModel)]=\"formattedResult\"\n                                            name=\"formattedResult\"\n                                            [readonly]=\"true\"\n                                            [language]=\"'json'\"\n                                            [lineWrapping]=\"true\"\n                                            style=\"height: 400px; width: 100%;\">\n                                        </mj-code-editor>\n                                    </div>\n                                } @else if (!record.ErrorMessage) {\n                                    <div class=\"empty-state\">\n                                        <i class=\"fa-solid fa-inbox\"></i>\n                                        <p>No result data recorded</p>\n                                        @if (record.Status === 'Failed' || record.Success === false) {\n                                            <div class=\"error-info\">\n                                                @if (record.Status) {\n                                                    <p class=\"finish-reason\">\n                                                        <strong>Status:</strong> {{ record.Status }}\n                                                    </p>\n                                                }\n                                                @if (formattedErrorDetails) {\n                                                    <div class=\"error-details\">\n                                                        <h4>Error Details</h4>\n                                                        <mj-code-editor\n                                                            [ngModel]=\"formattedErrorDetails\"\n                                                            [disabled]=\"true\"\n                                                            [language]=\"'json'\"\n                                                            [lineWrapping]=\"true\"\n                                                            style=\"height: 200px; width: 100%;\">\n                                                        </mj-code-editor>\n                                                    </div>\n                                                }\n                                                @if (!formattedErrorDetails) {\n                                                    <p class=\"error-hint\">\n                                                        The prompt execution failed but no additional error information is available.\n                                                    </p>\n                                                }\n                                            </div>\n                                        }\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                    \n                    <!-- Token Usage & Metrics Panel -->\n                    <kendo-panelbar-item [expanded]=\"metricsExpanded\" (stateChange)=\"onMetricsPanelToggle($event)\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <span class=\"panel-title\">\n                                <i class=\"fa-solid fa-chart-line\"></i>\n                                Token Usage & Metrics\n                            </span>\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                <div class=\"metrics-grid\">\n                                    <div class=\"metric-card\">\n                                        <div class=\"metric-header\">\n                                            <i class=\"fa-solid fa-message\"></i>\n                                            <h4>Prompt Tokens</h4>\n                                        </div>\n                                        <div class=\"metric-value large\">{{ formatTokens(record.TokensPrompt) }}</div>\n                                        @if (record.TokensPromptRollup && record.TokensPromptRollup !== record.TokensPrompt) {\n                                            <div class=\"metric-rollup\">\n                                                <span>Rollup: {{ formatTokens(record.TokensPromptRollup) }}</span>\n                                            </div>\n                                        }\n                                    </div>\n                                    \n                                    <div class=\"metric-card\">\n                                        <div class=\"metric-header\">\n                                            <i class=\"fa-solid fa-reply\"></i>\n                                            <h4>Completion Tokens</h4>\n                                        </div>\n                                        <div class=\"metric-value large\">{{ formatTokens(record.TokensCompletion) }}</div>\n                                        @if (record.TokensCompletionRollup && record.TokensCompletionRollup !== record.TokensCompletion) {\n                                            <div class=\"metric-rollup\">\n                                                <span>Rollup: {{ formatTokens(record.TokensCompletionRollup) }}</span>\n                                            </div>\n                                        }\n                                    </div>\n                                    \n                                    <div class=\"metric-card\">\n                                        <div class=\"metric-header\">\n                                            <i class=\"fa-solid fa-coins\"></i>\n                                            <h4>Total Tokens</h4>\n                                        </div>\n                                        <div class=\"metric-value large\">{{ formatTokens(record.TokensUsed) }}</div>\n                                        @if (record.TokensUsedRollup && record.TokensUsedRollup !== record.TokensUsed) {\n                                            <div class=\"metric-rollup\">\n                                                <span>Rollup: {{ formatTokens(record.TokensUsedRollup) }}</span>\n                                            </div>\n                                        }\n                                    </div>\n                                    \n                                    <div class=\"metric-card\">\n                                        <div class=\"metric-header\">\n                                            <i class=\"fa-solid fa-dollar-sign\"></i>\n                                            <h4>Cost</h4>\n                                        </div>\n                                        <div class=\"metric-value large\">{{ formatCost(record.Cost) }}</div>\n                                        @if (record.TotalCost && record.TotalCost !== record.Cost) {\n                                            <div class=\"metric-rollup\">\n                                                <span>Total: {{ formatCost(record.TotalCost) }}</span>\n                                            </div>\n                                        }\n                                        @if (record.CostCurrency) {\n                                            <div class=\"metric-currency\">{{ record.CostCurrency }}</div>\n                                        }\n                                    </div>\n                                    \n                                    <!-- Timing Metrics -->\n                                    @if (record.QueueTime != null) {\n                                        <div class=\"metric-card\">\n                                            <div class=\"metric-header\">\n                                                <i class=\"fa-solid fa-hourglass-start\"></i>\n                                                <h4>Queue Time</h4>\n                                            </div>\n                                            <div class=\"metric-value large\">{{ formatDuration(record.QueueTime) }}</div>\n                                        </div>\n                                    }\n                                    \n                                    @if (record.PromptTime != null) {\n                                        <div class=\"metric-card\">\n                                            <div class=\"metric-header\">\n                                                <i class=\"fa-solid fa-brain\"></i>\n                                                <h4>Prompt Time</h4>\n                                            </div>\n                                            <div class=\"metric-value large\">{{ formatDuration(record.PromptTime) }}</div>\n                                        </div>\n                                    }\n                                    \n                                    @if (record.CompletionTime != null) {\n                                        <div class=\"metric-card\">\n                                            <div class=\"metric-header\">\n                                                <i class=\"fa-solid fa-flag-checkered\"></i>\n                                                <h4>Completion Time</h4>\n                                            </div>\n                                            <div class=\"metric-value large\">{{ formatDuration(record.CompletionTime) }}</div>\n                                        </div>\n                                    }\n                                </div>\n                                \n                                <!-- Additional Metrics -->\n                                <div class=\"additional-metrics\">\n                                    @if (record.ExecutionOrder !== null) {\n                                        <div class=\"metric-row\">\n                                            <span class=\"metric-label\">Execution Order:</span>\n                                            <span class=\"metric-value\">{{ record.ExecutionOrder }}</span>\n                                        </div>\n                                    }\n                                    @if (record.AgentID) {\n                                        <div class=\"metric-row\">\n                                            <span class=\"metric-label\">Agent:</span>\n                                            <span class=\"metric-value link\" (click)=\"navigateToEntity('MJ: AI Agents', record.AgentID)\">\n                                                {{ record.Agent }}\n                                                <i class=\"fa-solid fa-external-link\"></i>\n                                            </span>\n                                        </div>\n                                    }\n                                </div>\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                    \n                    <!-- Validation & Retry Panel -->\n                    @if (record && ((record.ValidationAttemptCount && record.ValidationAttemptCount > 0) || record.ValidationBehavior)) {\n                        <kendo-panelbar-item [expanded]=\"validationExpanded\" (stateChange)=\"onValidationPanelToggle($event)\">\n                            <ng-template kendoPanelBarItemTitle>\n                                <span class=\"panel-title\">\n                                    <i class=\"fa-solid fa-shield-check\"></i>\n                                    Validation & Retries\n                                    @if (record && record.ValidationAttemptCount && record.ValidationAttemptCount > 1) {\n                                        <span class=\"panel-count\">({{ record.ValidationAttemptCount }} attempts)</span>\n                                    }\n                                    @if (record.FinalValidationPassed) {\n                                        <span class=\"panel-badge success\">Passed</span>\n                                    } @else if (record.FinalValidationPassed === false) {\n                                        <span class=\"panel-badge error\">Failed</span>\n                                    }\n                                </span>\n                            </ng-template>\n                            <ng-template kendoPanelBarContent>\n                                <div class=\"panel-content\">\n                                    <!-- Validation Summary -->\n                                    <div class=\"validation-summary\">\n                                        <div class=\"summary-header\">\n                                            <h4>Validation Summary</h4>\n                                            <div class=\"validation-status\" [class.success]=\"record.FinalValidationPassed\" [class.failed]=\"!record.FinalValidationPassed\">\n                                                <i [class]=\"record.FinalValidationPassed ? 'fa-solid fa-check-circle' : 'fa-solid fa-times-circle'\"></i>\n                                                {{ record.FinalValidationPassed ? 'Validation Passed' : 'Validation Failed' }}\n                                            </div>\n                                        </div>\n                                        \n                                        <div class=\"validation-metrics\">\n                                            <div class=\"metric-card small\">\n                                                <div class=\"metric-label\">Total Attempts</div>\n                                                <div class=\"metric-value\">{{ record.ValidationAttemptCount || 0 }}</div>\n                                            </div>\n                                            <div class=\"metric-card small\">\n                                                <div class=\"metric-label\">Successful</div>\n                                                <div class=\"metric-value\">{{ record.SuccessfulValidationCount || 0 }}</div>\n                                            </div>\n                                            <div class=\"metric-card small\">\n                                                <div class=\"metric-label\">Behavior</div>\n                                                <div class=\"metric-value\">{{ record.ValidationBehavior || 'Not set' }}</div>\n                                            </div>\n                                            <div class=\"metric-card small\">\n                                                <div class=\"metric-label\">Retry Strategy</div>\n                                                <div class=\"metric-value\">{{ record.RetryStrategy || 'Not set' }}</div>\n                                            </div>\n                                        </div>\n                                        \n                                        @if (record.FinalValidationError) {\n                                            <div class=\"validation-error\">\n                                                <h5><i class=\"fa-solid fa-exclamation-triangle\"></i> Final Validation Error</h5>\n                                                <p>{{ record.FinalValidationError }}</p>\n                                                @if (record && record.ValidationErrorCount && record.ValidationErrorCount > 0) {\n                                                    <span class=\"error-count\">{{ record.ValidationErrorCount }} validation errors</span>\n                                                }\n                                            </div>\n                                        }\n                                        \n                                        @if (record.CommonValidationError && record.CommonValidationError !== record.FinalValidationError) {\n                                            <div class=\"common-error\">\n                                                <h5><i class=\"fa-solid fa-repeat\"></i> Most Common Error</h5>\n                                                <p>{{ record.CommonValidationError }}</p>\n                                            </div>\n                                        }\n                                    </div>\n                                    \n                                    <!-- Retry Timeline -->\n                                    @if (record && record.ValidationAttemptCount && record.ValidationAttemptCount > 1) {\n                                        <div class=\"retry-timeline\">\n                                            <h4>Retry Timeline</h4>\n                                            <div class=\"timeline-info\">\n                                                <div class=\"timeline-stat\">\n                                                    <i class=\"fa-solid fa-clock\"></i>\n                                                    <span>First Attempt: {{ record.FirstAttemptAt | date:'short' }}</span>\n                                                </div>\n                                                <div class=\"timeline-stat\">\n                                                    <i class=\"fa-solid fa-flag-checkered\"></i>\n                                                    <span>Last Attempt: {{ record.LastAttemptAt | date:'short' }}</span>\n                                                </div>\n                                                <div class=\"timeline-stat\">\n                                                    <i class=\"fa-solid fa-stopwatch\"></i>\n                                                    <span>Total Retry Duration: {{ formatDuration(record.TotalRetryDurationMS) }}</span>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    <!-- Validation Attempts Details -->\n                                    @if (validationAttempts && validationAttempts.length > 0) {\n                                        <div class=\"validation-attempts\">\n                                            <h4>Validation Attempts</h4>\n                                            <div class=\"attempts-list\">\n                                                @for (attempt of validationAttempts; track attempt.attemptNumber) {\n                                                    <div class=\"attempt-item\" [class.success]=\"attempt.success\" [class.failed]=\"!attempt.success\">\n                                                        <div class=\"attempt-number\">\n                                                            <i [class]=\"attempt.success ? 'fa-solid fa-check' : 'fa-solid fa-times'\"></i>\n                                                            Attempt #{{ attempt.attemptNumber }}\n                                                        </div>\n                                                        <div class=\"attempt-details\">\n                                                            <span class=\"attempt-time\">{{ attempt.timestamp }}</span>\n                                                            @if (!attempt.success) {\n                                                                <span class=\"attempt-error\">{{ attempt.errorMessage || 'Unknown error' }}</span>\n                                                                @if (attempt.validationErrorCount > 0) {\n                                                                    <span class=\"error-count\">({{ attempt.validationErrorCount }} errors)</span>\n                                                                }\n                                                            }\n                                                            @if (attempt.outputLength) {\n                                                                <span class=\"output-length\">Output: {{ attempt.outputLength }} chars</span>\n                                                            }\n                                                        </div>\n                                                    </div>\n                                                }\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    <!-- Validation Summary JSON -->\n                                    @if (validationSummary) {\n                                        <div class=\"validation-json\">\n                                            <h4>Validation Summary Details</h4>\n                                            <div class=\"json-viewer-container\">\n                                                <mj-code-editor \n                                                    [(ngModel)]=\"formattedValidationSummary\"\n                                                    name=\"formattedValidationSummary\"\n                                                    [readonly]=\"true\"\n                                                    [language]=\"'json'\"\n                                                    [lineWrapping]=\"true\"\n                                                    style=\"height: 200px; width: 100%;\">\n                                                </mj-code-editor>\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    <!-- Validation Attempts JSON -->\n                                    @if (record.ValidationAttempts) {\n                                        <div class=\"validation-json\">\n                                            <h4>Validation Attempts (Raw JSON)</h4>\n                                            <div class=\"json-viewer-container\">\n                                                <mj-code-editor \n                                                    [(ngModel)]=\"formattedValidationAttempts\"\n                                                    name=\"formattedValidationAttempts\"\n                                                    [readonly]=\"true\"\n                                                    [language]=\"'json'\"\n                                                    [lineWrapping]=\"true\"\n                                                    style=\"height: 300px; width: 100%;\">\n                                                </mj-code-editor>\n                                            </div>\n                                        </div>\n                                    }\n                                </div>\n                            </ng-template>\n                        </kendo-panelbar-item>\n                    }\n                    \n                    <!-- Hierarchy Panel (for parent/child relationships) -->\n                    @if (record.ParentID || childRuns.length > 0) {\n                        <kendo-panelbar-item [expanded]=\"hierarchyExpanded\">\n                            <ng-template kendoPanelBarItemTitle>\n                                <span class=\"panel-title\">\n                                    <i class=\"fa-solid fa-sitemap\"></i>\n                                    Run Hierarchy\n                                    @if (childRuns.length > 0) {\n                                        <span class=\"panel-count\">({{ childRuns.length }} children)</span>\n                                    }\n                                </span>\n                            </ng-template>\n                            <ng-template kendoPanelBarContent>\n                                <div class=\"panel-content\">\n                                    @if (parentRun) {\n                                        <div class=\"parent-run-section\">\n                                            <h4><i class=\"fa-solid fa-level-up-alt\"></i> Parent Run</h4>\n                                            <div class=\"run-item parent\" (click)=\"navigateToEntity('MJ: AI Prompt Runs', parentRun.ID)\">\n                                                <div class=\"run-item-icon\" [style.background-color]=\"getStatusColor() + '20'\">\n                                                    <i [class]=\"'fa-solid ' + getRunTypeIcon(parentRun.RunType)\"></i>\n                                                </div>\n                                                <div class=\"run-item-content\">\n                                                    <div class=\"run-item-title\">\n                                                        Parent Run #{{ parentRun.ID.substring(0, 8) }}\n                                                        <span class=\"run-item-type\">{{ parentRun.RunType }}</span>\n                                                    </div>\n                                                    <div class=\"run-item-meta\">\n                                                        <span><i class=\"fa-solid fa-clock\"></i> {{ formatDuration(parentRun.ExecutionTimeMS) }}</span>\n                                                        <span><i class=\"fa-solid fa-coins\"></i> {{ formatTokens(parentRun.TokensUsed) }}</span>\n                                                        <span><i class=\"fa-solid fa-calendar\"></i> {{ parentRun.RunAt | date:'short' }}</span>\n                                                    </div>\n                                                </div>\n                                                <i class=\"fa-solid fa-external-link\"></i>\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    @if (childRuns.length > 0) {\n                                        <div class=\"child-runs-section\">\n                                            <h4><i class=\"fa-solid fa-level-down-alt\"></i> Child Runs</h4>\n                                            <div class=\"runs-list\">\n                                                @for (childRun of childRuns; track childRun.ID) {\n                                                    <div class=\"run-item child\" (click)=\"navigateToEntity('MJ: AI Prompt Runs', childRun.ID)\">\n                                                        <div class=\"run-item-icon\" [style.background-color]=\"getStatusColor() + '20'\">\n                                                            <i [class]=\"'fa-solid ' + getRunTypeIcon(childRun.RunType)\"></i>\n                                                        </div>\n                                                        <div class=\"run-item-content\">\n                                                            <div class=\"run-item-title\">\n                                                                Child Run #{{ childRun.ID.substring(0, 8) }}\n                                                                @if (childRun.ExecutionOrder !== null) {\n                                                                    <span class=\"execution-order\">#{{ childRun.ExecutionOrder }}</span>\n                                                                }\n                                                                <span class=\"run-item-type\">{{ childRun.RunType }}</span>\n                                                            </div>\n                                                            <div class=\"run-item-meta\">\n                                                                <span class=\"status-indicator\" [style.color]=\"getStatusColor()\">\n                                                                    <i [class]=\"'fa-solid ' + getStatusIcon()\"></i>\n                                                                    {{ childRun.Success ? 'Success' : childRun.ErrorMessage ? 'Failed' : 'Running' }}\n                                                                </span>\n                                                                <span><i class=\"fa-solid fa-clock\"></i> {{ formatDuration(childRun.ExecutionTimeMS) }}</span>\n                                                                <span><i class=\"fa-solid fa-coins\"></i> {{ formatTokens(childRun.TokensUsed) }}</span>\n                                                            </div>\n                                                        </div>\n                                                        <i class=\"fa-solid fa-external-link\"></i>\n                                                    </div>\n                                                }\n                                            </div>\n                                        </div>\n                                    }\n                                </div>\n                            </ng-template>\n                        </kendo-panelbar-item>\n                    }\n                    \n                    <!-- Additional Details Panel -->\n                    <kendo-panelbar-item [expanded]=\"false\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <span class=\"panel-title\">\n                                <i class=\"fa-solid fa-info-circle\"></i>\n                                Additional Details\n                            </span>\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                <div class=\"detail-fields-grid\">\n                                    @if (record.AgentID) {\n                                        <div class=\"detail-field\">\n                                            <label>Agent</label>\n                                            <div class=\"detail-value clickable\" (click)=\"navigateToEntity('MJ: AI Agents', record.AgentID)\" title=\"View Agent\">\n                                                <i class=\"fa-solid fa-robot\"></i>\n                                                {{ record.Agent || 'Unknown' }}\n                                                <i class=\"fa-solid fa-external-link\"></i>\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    \n                                    @if (record.RunType) {\n                                        <div class=\"detail-field\">\n                                            <label>Run Type</label>\n                                            <div class=\"detail-value\">\n                                                <i [class]=\"'fa-solid ' + getRunTypeIcon(record.RunType)\"></i>\n                                                {{ record.RunType }}\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    @if (record.ResponseFormat) {\n                                        <div class=\"detail-field\">\n                                            <label>Response Format</label>\n                                            <div class=\"detail-value\">\n                                                <i class=\"fa-solid fa-code\"></i>\n                                                {{ record.ResponseFormat }}\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    <div class=\"detail-field\">\n                                        <label>Temperature</label>\n                                        <div class=\"detail-value\" [class.null-value]=\"record.Temperature === null || record.Temperature === undefined\">\n                                            <i class=\"fa-solid fa-temperature-high\"></i>\n                                            {{ record.Temperature !== null && record.Temperature !== undefined ? record.Temperature : '\u2014' }}\n                                        </div>\n                                    </div>\n                                    \n                                    <div class=\"detail-field\">\n                                        <label>Top P</label>\n                                        <div class=\"detail-value\" [class.null-value]=\"record.TopP === null || record.TopP === undefined\">\n                                            <i class=\"fa-solid fa-percentage\"></i>\n                                            {{ record.TopP !== null && record.TopP !== undefined ? record.TopP : '\u2014' }}\n                                        </div>\n                                    </div>\n                                    \n                                    <div class=\"detail-field\">\n                                        <label>Top K</label>\n                                        <div class=\"detail-value\" [class.null-value]=\"record.TopK === null || record.TopK === undefined\">\n                                            <i class=\"fa-solid fa-list-ol\"></i>\n                                            {{ record.TopK !== null && record.TopK !== undefined ? record.TopK : '\u2014' }}\n                                        </div>\n                                    </div>\n                                    \n                                    <div class=\"detail-field\">\n                                        <label>Min P</label>\n                                        <div class=\"detail-value\" [class.null-value]=\"record.MinP === null || record.MinP === undefined\">\n                                            <i class=\"fa-solid fa-filter\"></i>\n                                            {{ record.MinP !== null && record.MinP !== undefined ? record.MinP : '\u2014' }}\n                                        </div>\n                                    </div>\n                                    \n                                    <div class=\"detail-field\">\n                                        <label>Frequency Penalty</label>\n                                        <div class=\"detail-value\" [class.null-value]=\"record.FrequencyPenalty === null || record.FrequencyPenalty === undefined\">\n                                            <i class=\"fa-solid fa-repeat\"></i>\n                                            {{ record.FrequencyPenalty !== null && record.FrequencyPenalty !== undefined ? record.FrequencyPenalty : '\u2014' }}\n                                        </div>\n                                    </div>\n                                    \n                                    <div class=\"detail-field\">\n                                        <label>Presence Penalty</label>\n                                        <div class=\"detail-value\" [class.null-value]=\"record.PresencePenalty === null || record.PresencePenalty === undefined\">\n                                            <i class=\"fa-solid fa-plus-circle\"></i>\n                                            {{ record.PresencePenalty !== null && record.PresencePenalty !== undefined ? record.PresencePenalty : '\u2014' }}\n                                        </div>\n                                    </div>\n                                    \n                                    <div class=\"detail-field\">\n                                        <label>Seed</label>\n                                        <div class=\"detail-value\" [class.null-value]=\"record.Seed === null || record.Seed === undefined\">\n                                            <i class=\"fa-solid fa-seedling\"></i>\n                                            {{ record.Seed !== null && record.Seed !== undefined ? record.Seed : '\u2014' }}\n                                        </div>\n                                    </div>\n                                    \n                                    @if (record.RunAt) {\n                                        <div class=\"detail-field\">\n                                            <label>Started At</label>\n                                            <div class=\"detail-value\">\n                                                <i class=\"fa-solid fa-clock\"></i>\n                                                {{ record.RunAt | date:'medium' }}\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    @if (record.CompletedAt) {\n                                        <div class=\"detail-field\">\n                                            <label>Completed At</label>\n                                            <div class=\"detail-value\">\n                                                <i class=\"fa-solid fa-check-circle\"></i>\n                                                {{ record.CompletedAt | date:'medium' }}\n                                            </div>\n                                        </div>\n                                    }\n                                </div>\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                    \n                    <!-- Model Specific Response Details Panel -->\n                    @if (record.ModelSpecificResponseDetails) {\n                        <kendo-panelbar-item [expanded]=\"modelSpecificExpanded\" (stateChange)=\"onModelSpecificPanelToggle($event)\">\n                            <ng-template kendoPanelBarItemTitle>\n                                <span class=\"panel-title\">\n                                    <i class=\"fa-solid fa-microchip\"></i>\n                                    Model Specific Response Details\n                                    <span class=\"panel-badge\">JSON</span>\n                                </span>\n                            </ng-template>\n                            <ng-template kendoPanelBarContent>\n                                <div class=\"panel-content\">\n                                    <div class=\"json-editor-container\">\n                                        <div class=\"json-toolbar\">\n                                            <button kendoButton\n                                                fillMode=\"flat\" \n                                                size=\"small\"\n                                                (click)=\"copyToClipboard(formattedModelSpecificResponseDetails, 'Model Specific Response Details')\"\n                                                title=\"Copy JSON\">\n                                                <i class=\"fa-solid fa-copy\"></i> Copy\n                                            </button>\n                                        </div>\n                                        <mj-code-editor \n                                            [(ngModel)]=\"formattedModelSpecificResponseDetails\"\n                                            name=\"formattedModelSpecificResponseDetails\"\n                                            [readonly]=\"true\"\n                                            [language]=\"'json'\"\n                                            [lineWrapping]=\"true\"\n                                            style=\"height: 400px; width: 100%;\">\n                                        </mj-code-editor>\n                                    </div>\n                                </div>\n                            </ng-template>\n                        </kendo-panelbar-item>\n                    }\n                    \n                    <!-- Model Selection & Performance Panel (v2.78 fields) -->\n                    <kendo-panelbar-item [expanded]=\"false\" (stateChange)=\"onModelSelectionPanelToggle($event)\">\n                        <ng-template kendoPanelBarItemTitle>\n                            <span class=\"panel-title\">\n                                <i class=\"fa-solid fa-microchip\"></i>\n                                Model Selection & Performance\n                                @if (record.CacheHit) {\n                                    <span class=\"panel-badge success\">Cached</span>\n                                }\n                                @if (record.WasSelectedResult) {\n                                    <span class=\"panel-badge success\">Selected</span>\n                                }\n                            </span>\n                        </ng-template>\n                        <ng-template kendoPanelBarContent>\n                            <div class=\"panel-content\">\n                                <div class=\"detail-fields-grid\">\n                                    <!-- Model Selection Details -->\n                                    <div class=\"detail-field\">\n                                        <label>Status</label>\n                                        <div class=\"detail-value\">\n                                            <i class=\"fa-solid fa-info-circle\"></i>\n                                            {{ record.Status || 'Unknown' }}\n                                        </div>\n                                    </div>\n                                    \n                                    <div class=\"detail-field\">\n                                        <label>Selection Strategy</label>\n                                        <div class=\"detail-value\">\n                                            <i class=\"fa-solid fa-strategy\"></i>\n                                            {{ record.SelectionStrategy || '\u2014' }}\n                                        </div>\n                                    </div>\n                                    \n                                    <div class=\"detail-field\">\n                                        <label>Model Power Rank</label>\n                                        <div class=\"detail-value\" [class.null-value]=\"record.ModelPowerRank === null\">\n                                            <i class=\"fa-solid fa-ranking-star\"></i>\n                                            {{ record.ModelPowerRank !== null ? record.ModelPowerRank : '\u2014' }}\n                                        </div>\n                                    </div>\n                                    \n                                    <!-- Cache Information -->\n                                    <div class=\"detail-field\">\n                                        <label>Cache Hit</label>\n                                        <div class=\"detail-value\">\n                                            <i [class]=\"record.CacheHit ? 'fa-solid fa-check-circle' : 'fa-solid fa-times-circle'\"></i>\n                                            {{ record.CacheHit ? 'Yes' : 'No' }}\n                                        </div>\n                                    </div>\n                                    \n                                    @if (record.CacheKey) {\n                                        <div class=\"detail-field full-width\">\n                                            <label>Cache Key</label>\n                                            <div class=\"detail-value\">\n                                                <i class=\"fa-solid fa-key\"></i>\n                                                <code>{{ record.CacheKey }}</code>\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    <!-- Judge Information -->\n                                    @if (record.JudgeID) {\n                                        <div class=\"detail-field\">\n                                            <label>Judge Prompt</label>\n                                            <div class=\"detail-value clickable\" (click)=\"navigateToEntity('MJ: AI Prompts', record.JudgeID)\" title=\"View Judge Prompt\">\n                                                <i class=\"fa-solid fa-gavel\"></i>\n                                                {{ record.Judge || 'Unknown' }}\n                                                <i class=\"fa-solid fa-external-link\"></i>\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    @if (record.JudgeScore !== null) {\n                                        <div class=\"detail-field\">\n                                            <label>Judge Score</label>\n                                            <div class=\"detail-value\">\n                                                <i class=\"fa-solid fa-star\"></i>\n                                                {{ record.JudgeScore }}\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    <div class=\"detail-field\">\n                                        <label>Was Selected Result</label>\n                                        <div class=\"detail-value\">\n                                            <i [class]=\"record.WasSelectedResult ? 'fa-solid fa-trophy' : 'fa-solid fa-times'\"></i>\n                                            {{ record.WasSelectedResult ? 'Yes' : 'No' }}\n                                        </div>\n                                    </div>\n                                    \n                                    <!-- Performance Metrics -->\n                                    <div class=\"detail-field\">\n                                        <label>Streaming Enabled</label>\n                                        <div class=\"detail-value\">\n                                            <i [class]=\"record.StreamingEnabled ? 'fa-solid fa-stream' : 'fa-solid fa-ban'\"></i>\n                                            {{ record.StreamingEnabled ? 'Yes' : 'No' }}\n                                        </div>\n                                    </div>\n                                    \n                                    @if (record.FirstTokenTime !== null) {\n                                        <div class=\"detail-field\">\n                                            <label>First Token Time</label>\n                                            <div class=\"detail-value\">\n                                                <i class=\"fa-solid fa-bolt\"></i>\n                                                {{ record.FirstTokenTime }} ms\n                                            </div>\n                                        </div>\n                                    }\n                                    \n                                    @if (record.Cancelled) {\n                                        <div class=\"detail-field\">\n                                            <label>Cancelled</label>\n                                            <div class=\"detail-value error\">\n                                                <i class=\"fa-solid fa-ban\"></i>\n                                                Yes\n                                            </div>\n                                        </div>\n                                        \n                                        @if (record.CancellationReason) {\n                                            <div class=\"detail-field full-width\">\n                                                <label>Cancellation Reason</label>\n                                                <div class=\"detail-value\">\n                                                    <i class=\"fa-solid fa-exclamation-circle\"></i>\n                                                    {{ record.CancellationReason }}\n                                                </div>\n                                            </div>\n                                        }\n                                    }\n                                </div>\n                                \n                                <!-- Model Selection JSON -->\n                                @if (record.ModelSelection) {\n                                    <div class=\"model-selection-json\">\n                                        <h4>Model Selection Details</h4>\n                                        <div class=\"json-viewer-container\">\n                                            <mj-code-editor \n                                                [(ngModel)]=\"formattedModelSelection\"\n                                                name=\"formattedModelSelection\"\n                                                [readonly]=\"true\"\n                                                [language]=\"'json'\"\n                                                [lineWrapping]=\"true\"\n                                                style=\"height: 300px; width: 100%;\">\n                                            </mj-code-editor>\n                                        </div>\n                                    </div>\n                                }\n                                \n                                <!-- Error Details JSON -->\n                                @if (record.ErrorDetails) {\n                                    <div class=\"error-details-json\">\n                                        <h4>Error Details</h4>\n                                        <div class=\"json-viewer-container\">\n                                            <mj-code-editor \n                                                [(ngModel)]=\"formattedErrorDetails\"\n                                                name=\"formattedErrorDetails\"\n                                                [readonly]=\"true\"\n                                                [language]=\"'json'\"\n                                                [lineWrapping]=\"true\"\n                                                style=\"height: 200px; width: 100%;\">\n                                            </mj-code-editor>\n                                        </div>\n                                    </div>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-panelbar-item>\n                    \n                </kendo-panelbar>\n            </div>\n        </form>\n    }\n</div>", styles: ["/* Error Info Styles */\n.error-info {\n    margin-top: 16px;\n    padding: 16px;\n    background-color: #fef3f3;\n    border: 1px solid #fecaca;\n    border-radius: 8px;\n}\n\n.finish-reason {\n    margin: 0 0 12px 0;\n    color: #dc2626;\n    font-size: 14px;\n}\n\n.error-details {\n    margin-top: 12px;\n}\n\n.error-details h4 {\n    margin: 0 0 8px 0;\n    color: #991b1b;\n    font-size: 14px;\n    font-weight: 600;\n}\n\n.error-hint {\n    margin: 0;\n    color: #7f1d1d;\n    font-size: 14px;\n    font-style: italic;\n}\n\n/* Header Section */\n.prompt-run-header {\n    background: #f8f9fa;\n    border-bottom: 2px solid #e9ecef;\n    padding: 20px;\n    margin-bottom: 0;\n}\n\n.header-content {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 20px;\n    margin-bottom: 16px;\n}\n\n.run-overview {\n    display: flex;\n    align-items: flex-start;\n    gap: 16px;\n    flex: 1;\n}\n\n.run-icon-wrapper {\n    width: 56px;\n    height: 56px;\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.run-icon-wrapper i {\n    font-size: 24px;\n}\n\n.run-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.run-title {\n    margin: 0 0 8px 0;\n    font-size: 1.5em;\n    font-weight: 600;\n    color: #2c3e50;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.run-id {\n    font-size: 0.8em;\n    color: #6c757d;\n    font-weight: 400;\n    font-family: 'Courier New', monospace;\n}\n\n.run-meta {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    flex-wrap: wrap;\n}\n\n.status-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    border-radius: 16px;\n    color: white;\n    font-size: 0.85em;\n    font-weight: 500;\n}\n\n.status-badge i {\n    font-size: 0.9em;\n}\n\n.run-type-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    border-radius: 16px;\n    background: #f1f3f5;\n    font-size: 0.85em;\n    font-weight: 500;\n}\n\n.prompt-name, .model-name, .vendor-name {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    border-radius: 16px;\n    background: #e9ecef;\n    color: #495057;\n    font-size: 0.85em;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.prompt-name:hover, .model-name:hover, .vendor-name:hover {\n    background: #dee2e6;\n    color: #007bff;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.original-run {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    border-radius: 16px;\n    background: #fff3cd;\n    font-size: 0.85em;\n}\n\n.original-link {\n    color: #ff6358;\n    text-decoration: none;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.original-link:hover {\n    color: #ff4444;\n    text-decoration: underline;\n}\n\n.run-actions {\n    display: flex;\n    gap: 8px;\n}\n\n/* Metrics Bar */\n.metrics-bar {\n    display: flex;\n    gap: 24px;\n    padding-top: 16px;\n    border-top: 1px solid #e9ecef;\n    flex-wrap: wrap;\n}\n\n.metric-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.metric-item > i {\n    font-size: 1.2em;\n    color: #6c757d;\n    width: 24px;\n    text-align: center;\n}\n\n.metric-content {\n    display: flex;\n    flex-direction: column;\n}\n\n.metric-label {\n    font-size: 0.75em;\n    color: #6c757d;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.metric-value {\n    font-size: 1.1em;\n    font-weight: 600;\n    color: #2c3e50;\n}\n\n.config-link {\n    color: #007bff;\n    text-decoration: none;\n    cursor: pointer;\n    transition: color 0.2s;\n}\n\n.config-link:hover {\n    color: #0056b3;\n    text-decoration: underline;\n}\n\n/* Panels */\n.form-content {\n    padding: 16px;\n}\n\n.panel-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n}\n\n/* Nested Sub-Panel Styles */\n.sub-panel-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 500;\n    font-size: 0.95em;\n}\n\n.sub-panel-content {\n    padding: 0;\n}\n\n/* Nested kendo-panelbar styles */\n.k-panelbar .k-panelbar {\n    border: none;\n    background: transparent;\n}\n\n.k-panelbar .k-panelbar > .k-item {\n    border: 1px solid #e5e7eb;\n    margin-bottom: 8px;\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.k-panelbar .k-panelbar > .k-item > .k-link {\n    background-color: #f9fafb;\n    padding: 12px 16px;\n}\n\n.k-panelbar .k-panelbar > .k-item.k-expanded > .k-link {\n    background-color: #f3f4f6;\n}\n\n.k-panelbar .k-panelbar .k-content {\n    padding: 0;\n    background: white;\n}\n\n/* Ensure chat message viewer takes appropriate height */\n.sub-panel-content mj-chat-message-viewer {\n    display: block;\n    min-height: 200px;\n    max-height: 750px; /* Increased by 50% from 500px */\n    height: auto;\n    overflow: hidden;\n}\n\n/* Different colors for sub-expansion panels */\n.sub-expansion-panel {\n    margin-bottom: 8px;\n}\n\n.sub-expansion-panel::ng-deep .k-expander {\n    background-color: #f7fafc;\n    border-color: #e2e8f0;\n}\n\n.sub-expansion-panel::ng-deep .k-expander:hover {\n    background-color: #edf2f7;\n}\n\n.sub-expansion-panel::ng-deep .k-header {\n    background-color: #f7fafc;\n    border-color: #e2e8f0;\n}\n\n.sub-expansion-panel::ng-deep .k-content {\n    background-color: #ffffff;\n    border-color: #e2e8f0;\n}\n\n.panel-badge {\n    margin-left: auto;\n    padding: 2px 8px;\n    border-radius: 12px;\n    background: #e9ecef;\n    color: #495057;\n    font-size: 0.75em;\n    font-weight: 500;\n}\n\n.panel-badge.error {\n    background: #dc3545;\n    color: white;\n}\n\n.panel-count {\n    color: #6c757d;\n    font-weight: 400;\n    font-size: 0.9em;\n}\n\n.panel-content {\n    padding: 20px;\n    max-height: none !important;\n    overflow: visible !important;\n}\n\n/* JSON Editor Container */\n.json-editor-container {\n    border: 1px solid #e9ecef;\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.json-toolbar {\n    background: #f8f9fa;\n    padding: 8px 12px;\n    border-bottom: 1px solid #e9ecef;\n    display: flex;\n    justify-content: flex-end;\n}\n\n/* Error Message */\n.error-message {\n    background: #dc354510;\n    border: 1px solid #dc3545;\n    border-radius: 6px;\n    padding: 16px;\n    display: flex;\n    gap: 16px;\n    margin-bottom: 16px;\n}\n\n.error-message i {\n    font-size: 1.5em;\n    color: #dc3545;\n    flex-shrink: 0;\n}\n\n.error-content h4 {\n    margin: 0 0 8px 0;\n    color: #dc3545;\n    font-size: 1em;\n}\n\n.error-content p {\n    margin: 0;\n    color: #495057;\n}\n\n/* Empty State */\n.empty-state {\n    text-align: center;\n    padding: 60px 40px;\n    color: #6c757d;\n}\n\n.empty-state i {\n    font-size: 3em;\n    margin-bottom: 16px;\n    opacity: 0.3;\n}\n\n.empty-state p {\n    margin: 0;\n    font-size: 1.1em;\n}\n\n/* Loading State */\n.loading-state {\n    text-align: center;\n    padding: 60px 40px;\n    color: #6c757d;\n}\n\n.loading-state i {\n    font-size: 3em;\n    margin-bottom: 16px;\n    opacity: 0.6;\n    color: #007bff;\n}\n\n.loading-state p {\n    margin: 0;\n    font-size: 1.1em;\n}\n\n/* Metrics Grid */\n.metrics-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 20px;\n    margin-bottom: 24px;\n}\n\n.metric-card {\n    background: #f8f9fa;\n    border: 1px solid #e9ecef;\n    border-radius: 8px;\n    padding: 20px;\n}\n\n.metric-header {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 12px;\n}\n\n.metric-header i {\n    font-size: 1.2em;\n    color: #6c757d;\n}\n\n.metric-header h4 {\n    margin: 0;\n    font-size: 0.9em;\n    color: #6c757d;\n    font-weight: 500;\n}\n\n.metric-value.large {\n    font-size: 1.8em;\n    font-weight: 700;\n    color: #2c3e50;\n}\n\n.metric-rollup {\n    margin-top: 8px;\n    font-size: 0.85em;\n    color: #6c757d;\n}\n\n.metric-currency {\n    margin-top: 4px;\n    font-size: 0.85em;\n    color: #6c757d;\n    text-transform: uppercase;\n}\n\n/* Additional Metrics */\n.additional-metrics {\n    padding-top: 16px;\n}\n\n.metric-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 8px 0;\n    border-bottom: 1px solid #f1f3f5;\n}\n\n.metric-row:last-child {\n    border-bottom: none;\n}\n\n.metric-row .metric-label {\n    font-weight: 500;\n    color: #6c757d;\n}\n\n.metric-row .metric-value {\n    font-weight: 400;\n    color: #2c3e50;\n}\n\n.metric-row .metric-value.link {\n    color: #007bff;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: color 0.2s;\n}\n\n.metric-row .metric-value.link:hover {\n    color: #0056b3;\n}\n\n/* Hierarchy Section */\n.parent-run-section,\n.child-runs-section {\n    margin-bottom: 24px;\n}\n\n.parent-run-section:last-child,\n.child-runs-section:last-child {\n    margin-bottom: 0;\n}\n\n.parent-run-section h4,\n.child-runs-section h4 {\n    margin: 0 0 12px 0;\n    font-size: 0.95em;\n    color: #495057;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.runs-list {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.run-item {\n    background: #f8f9fa;\n    border: 1px solid #e9ecef;\n    border-radius: 8px;\n    padding: 12px 16px;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.run-item:hover {\n    background: #e9ecef;\n    border-color: #dee2e6;\n}\n\n.run-item.parent {\n    background: #e3f2fd;\n    border-color: #90caf9;\n}\n\n.run-item.parent:hover {\n    background: #bbdefb;\n}\n\n.run-item-icon {\n    width: 36px;\n    height: 36px;\n    border-radius: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n}\n\n.run-item-content {\n    flex: 1;\n    min-width: 0;\n}\n\n.run-item-title {\n    font-weight: 500;\n    color: #2c3e50;\n    margin-bottom: 4px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.execution-order {\n    background: #6c757d;\n    color: white;\n    padding: 2px 6px;\n    border-radius: 10px;\n    font-size: 0.75em;\n    font-weight: 600;\n}\n\n.run-item-type {\n    font-size: 0.85em;\n    color: #6c757d;\n    font-weight: 400;\n}\n\n.run-item-meta {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    font-size: 0.85em;\n    color: #6c757d;\n}\n\n.run-item-meta span {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.status-indicator {\n    font-weight: 500;\n}\n\n.run-item > i:last-child {\n    color: #6c757d;\n    font-size: 0.85em;\n}\n\n/* Detail Fields Grid */\n.detail-fields-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n    gap: 24px;\n    width: 100%;\n    min-height: auto;\n    overflow: visible;\n}\n\n.detail-field {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.detail-field label {\n    font-size: 0.85em;\n    color: #6c757d;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.detail-value {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-size: 1em;\n    color: #2c3e50;\n    padding: 10px 14px;\n    background: #f8f9fa;\n    border: 1px solid #e9ecef;\n    border-radius: 8px;\n    transition: all 0.2s;\n}\n\n.detail-value i:first-child {\n    color: #6c757d;\n    font-size: 1.1em;\n    width: 20px;\n    text-align: center;\n}\n\n.detail-value.clickable {\n    cursor: pointer;\n}\n\n.detail-value.clickable:hover {\n    background: #e9ecef;\n    border-color: #dee2e6;\n    color: #007bff;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.detail-value.clickable i:last-child {\n    margin-left: auto;\n    font-size: 0.85em;\n    opacity: 0.6;\n}\n\n.detail-value.clickable:hover i:last-child {\n    opacity: 1;\n}\n\n.detail-value.null-value {\n    color: #adb5bd;\n    font-style: italic;\n}\n\n.detail-value.null-value i:first-child {\n    opacity: 0.5;\n}\n\n/* Kendo Overrides */\nkendo-panelbar {\n    border: none !important;\n}\n\nkendo-panelbar-item {\n    margin-bottom: 8px;\n    border: 1px solid #e9ecef !important;\n    border-radius: 8px !important;\n    overflow: hidden;\n}\n\nkendo-panelbar-item .k-panelbar-header {\n    background: #f8f9fa !important;\n    border: none !important;\n    padding: 12px 16px !important;\n}\n\nkendo-panelbar-item .k-panelbar-header:hover {\n    background: #e9ecef !important;\n}\n\nkendo-panelbar-item .k-panelbar-content {\n    border: none !important;\n    padding: 0 !important;\n    max-height: none !important;\n    overflow: visible !important;\n}\n\n/* Validation Panel Styles */\n.validation-summary {\n    margin-bottom: 24px;\n}\n\n.summary-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 16px;\n}\n\n.summary-header h4 {\n    margin: 0;\n    font-size: 1.1em;\n    color: #2c3e50;\n}\n\n.validation-status {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 6px 16px;\n    border-radius: 20px;\n    font-weight: 500;\n    font-size: 0.9em;\n}\n\n.validation-status.success {\n    background: #28a74520;\n    color: #28a745;\n}\n\n.validation-status.failed {\n    background: #dc354520;\n    color: #dc3545;\n}\n\n.validation-metrics {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n    gap: 12px;\n    margin-bottom: 20px;\n}\n\n.metric-card.small {\n    padding: 16px;\n    text-align: center;\n}\n\n.metric-card.small .metric-label {\n    font-size: 0.8em;\n    margin-bottom: 8px;\n    font-weight: 600;\n}\n\n.metric-card.small .metric-value {\n    font-size: 1.4em;\n    font-weight: 700;\n}\n\n.validation-error,\n.common-error {\n    background: #dc354510;\n    border: 1px solid #dc354530;\n    border-radius: 8px;\n    padding: 16px;\n    margin-bottom: 16px;\n}\n\n.validation-error h5,\n.common-error h5 {\n    margin: 0 0 8px 0;\n    color: #dc3545;\n    font-size: 0.95em;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.validation-error p,\n.common-error p {\n    margin: 0;\n    color: #495057;\n    font-size: 0.9em;\n}\n\n.error-count {\n    display: inline-block;\n    margin-top: 8px;\n    padding: 2px 8px;\n    background: #dc3545;\n    color: white;\n    border-radius: 12px;\n    font-size: 0.75em;\n    font-weight: 500;\n}\n\n/* Retry Timeline */\n.retry-timeline {\n    margin-bottom: 24px;\n}\n\n.retry-timeline h4 {\n    margin: 0 0 12px 0;\n    font-size: 1em;\n    color: #495057;\n}\n\n.timeline-info {\n    display: flex;\n    gap: 24px;\n    flex-wrap: wrap;\n}\n\n.timeline-stat {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    color: #6c757d;\n    font-size: 0.9em;\n}\n\n.timeline-stat i {\n    font-size: 1.1em;\n}\n\n/* Validation Attempts */\n.validation-attempts {\n    margin-bottom: 24px;\n}\n\n.validation-attempts h4 {\n    margin: 0 0 12px 0;\n    font-size: 1em;\n    color: #495057;\n}\n\n.attempts-list {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.attempt-item {\n    border: 1px solid #e9ecef;\n    border-radius: 8px;\n    padding: 12px 16px;\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 16px;\n}\n\n.attempt-item.success {\n    background: #28a74510;\n    border-color: #28a74530;\n}\n\n.attempt-item.failed {\n    background: #dc354510;\n    border-color: #dc354530;\n}\n\n.attempt-number {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n    color: #2c3e50;\n}\n\n.attempt-item.success .attempt-number {\n    color: #28a745;\n}\n\n.attempt-item.failed .attempt-number {\n    color: #dc3545;\n}\n\n.attempt-details {\n    flex: 1;\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n    font-size: 0.85em;\n}\n\n.attempt-time {\n    color: #6c757d;\n}\n\n.attempt-error {\n    color: #dc3545;\n    flex: 1 0 100%;\n}\n\n.output-length {\n    color: #6c757d;\n    font-style: italic;\n}\n\n/* Validation JSON */\n.validation-json {\n    margin-top: 24px;\n}\n\n.validation-json h4 {\n    margin: 0 0 12px 0;\n    font-size: 1em;\n    color: #495057;\n}\n\n.json-viewer-container {\n    border: 1px solid #e9ecef;\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n/* Panel badge styles */\n.panel-badge.success {\n    background: #28a745;\n    color: white;\n}"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIPromptRunFormComponentExtended, { className: "AIPromptRunFormComponentExtended", filePath: "src/lib/custom/aipromptruns/ai-prompt-run-form.component.ts", lineNumber: 21 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIPromptRunFormComponentExtended, { className: "AIPromptRunFormComponentExtended", filePath: "src/lib/custom/AIPromptRuns/ai-prompt-run-form.component.ts", lineNumber: 21 }); })();
 //# sourceMappingURL=ai-prompt-run-form.component.js.map

package/dist/lib/custom/AIPromptRuns/chat-message-viewer.component.js CHANGED Viewed

@@ -522,5 +522,5 @@ export class ChatMessageViewerComponent {
     }], null, { messages: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ChatMessageViewerComponent, { className: "ChatMessageViewerComponent", filePath: "src/lib/custom/aipromptruns/chat-message-viewer.component.ts", lineNumber: 17 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ChatMessageViewerComponent, { className: "ChatMessageViewerComponent", filePath: "src/lib/custom/AIPromptRuns/chat-message-viewer.component.ts", lineNumber: 17 }); })();
 //# sourceMappingURL=chat-message-viewer.component.js.map

package/dist/lib/custom/AIPrompts/ai-prompt-form.component.js CHANGED Viewed

@@ -3085,5 +3085,5 @@ export { AIPromptFormComponentExtended };
             type: ViewChild,
             args: ['templateEditor']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIPromptFormComponentExtended, { className: "AIPromptFormComponentExtended", filePath: "src/lib/custom/aiprompts/ai-prompt-form.component.ts", lineNumber: 22 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIPromptFormComponentExtended, { className: "AIPromptFormComponentExtended", filePath: "src/lib/custom/AIPrompts/ai-prompt-form.component.ts", lineNumber: 22 }); })();
 //# sourceMappingURL=ai-prompt-form.component.js.map