@memberjunction/ng-dashboards 5.35.0 → 5.37.0

package/dist/AI/components/agents/agent-configuration.component.js

@@ -1282,7 +1282,7 @@ let AgentConfigurationComponent = class AgentConfigurationComponent extends Base
         return 'fa-solid fa-robot';
     }
     static ɵfac = function AgentConfigurationComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AgentConfigurationComponent)(i0.ɵɵdirectiveInject(i1.AITestHarnessDialogService), i0.ɵɵdirectiveInject(i2.CreateAgentService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AgentConfigurationComponent, selectors: [["app-agent-configuration"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 21, vars: 19, consts: [["Title", "Agents", "Icon", "fa-solid fa-robot"], ["meta", ""], ["Label", "agents", 3, "Count"], ["actions", ""], [3, "ClearAllRequested", "ActiveCount", "ShowClearAll"], [3, "ValuesChange", "Reset", "Fields", "Values"], ["Label", "Category", "Icon", "fa-solid fa-folder-tree"], ["SelectionMode", "single", "SelectableTypes", "branch", "Placeholder", "All Categories", 3, "ValueChange", "BranchConfig", "Value", "Clearable", "EnableSearch"], [3, "KeyChange", "Options", "ActiveKey"], ["mjButton", "", "variant", "primary", "size", "sm", "title", "Create New Agent", 3, "click"], [1, "fa-solid", "fa-plus"], ["toolbar", ""], ["Placeholder", "Search agents...", 3, "ValueChange", "Value"], [3, "Flex"], [1, "loading-container"], [1, "detail-panel-overlay"], [1, "detail-panel"], ["text", "Loading agents...", "size", "large"], [1, "empty-state"], [1, "fa-solid", "fa-robot"], ["type", "button", 1, "empty-state-btn", 3, "click"], [1, "agents-grid"], [1, "agents-tree"], [1, "agents-list"], [1, "agent-card", 3, "expanded"], [1, "agent-card"], [1, "card-header", 3, "click"], [1, "agent-info"], [1, "agent-icon"], [1, "agent-logo", 3, "src", "alt"], [3, "class"], [1, "agent-details"], [1, "agent-name", 3, "innerHTML"], [1, "agent-meta"], [1, "meta-item", "type-badge"], [1, "fa-solid", "fa-tag"], [1, "meta-item", 3, "class"], [1, "fa-solid", "fa-chevron-down", "expand-icon"], [1, "card-body"], [1, "agent-description", 3, "innerHTML"], [1, "agent-description", "text-muted"], [1, "expanded-content"], [1, "card-actions"], ["type", "button", "title", "View Details", 1, "action-btn"], ["type", "button", "title", "Run Agent", 1, "action-btn", "action-btn-primary"], [1, "meta-item"], [1, "fa-solid", "fa-circle", 2, "font-size", "8px"], [1, "agent-stats"], [1, "stat-item"], [1, "stat-label"], [1, "stat-value"], [1, "fa-solid", "fa-check", 2, "color", "#28a745"], [1, "fa-solid", "fa-times", 2, "color", "#dc3545"], ["type", "button", "title", "View Details", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-eye"], ["type", "button", "title", "Run Agent", 1, "action-btn", "action-btn-primary", 3, "click"], [1, "fa-solid", "fa-play"], [3, "AfterNodeClick", "AfterNodeDoubleClick", "BranchConfig", "LeafConfig", "SelectionMode", "SelectableTypes", "ShowDescriptions", "ShowBadges", "ShowExpandCollapseAll", "EmptyMessage", "EmptyIcon"], [1, "agents-table"], [3, "click"], [1, "sort-header"], [1, "fa-solid", "fa-chevron-up", "sort-icon"], [1, "agent-name-cell"], [1, "agent-icon-small"], [1, "agent-logo-small", 3, "src", "alt"], [1, "agent-description-small", 3, "innerHTML"], [1, "type-badge"], [1, "status-badge"], [1, "table-actions"], ["type", "button", "title", "View Details", 1, "action-btn-small"], ["type", "button", "title", "Run Agent", 1, "action-btn-small", "primary"], ["type", "button", "title", "View Details", 1, "action-btn-small", 3, "click"], ["type", "button", "title", "Run Agent", 1, "action-btn-small", "primary", 3, "click"], [1, "detail-panel-overlay", 3, "click"], [1, "detail-panel-header"], [1, "detail-panel-title"], [1, "detail-icon"], [1, "detail-logo", 3, "src", "alt"], [1, "detail-title-info"], [1, "detail-subtitle"], [1, "detail-panel-close", 3, "click"], [1, "fa-solid", "fa-times"], [1, "detail-panel-content"], [1, "detail-section"], [1, "detail-badges"], [1, "feature-badge"], [1, "detail-section-title"], [1, "fa-solid", "fa-cog"], [1, "detail-grid"], [1, "detail-item"], [1, "detail-label"], [1, "detail-value"], [1, "fa-solid", "fa-clock"], [1, "detail-panel-actions"], ["type", "button", 1, "detail-action-btn", "secondary"], ["type", "button", 1, "detail-action-btn", "primary", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "fa-solid", "fa-bolt"], [1, "fa-solid", "fa-align-left"], [1, "detail-description"], [1, "fa-solid", "fa-check", 2, "color", "#10b981"], [1, "fa-solid", "fa-times", 2, "color", "#ef4444"], ["type", "button", 1, "detail-action-btn", "secondary", 3, "click"]], template: function AgentConfigurationComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AgentConfigurationComponent, selectors: [["app-agent-configuration"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 21, vars: 20, consts: [["Title", "Agents", "Icon", "fa-solid fa-robot"], ["meta", ""], ["Label", "agents", 3, "Count", "Total"], ["actions", ""], [3, "ClearAllRequested", "ActiveCount", "ShowClearAll"], [3, "ValuesChange", "Reset", "Fields", "Values"], ["Label", "Category", "Icon", "fa-solid fa-folder-tree"], ["SelectionMode", "single", "SelectableTypes", "branch", "Placeholder", "All Categories", 3, "ValueChange", "BranchConfig", "Value", "Clearable", "EnableSearch"], [3, "KeyChange", "Options", "ActiveKey"], ["mjButton", "", "variant", "primary", "size", "sm", "title", "Create New Agent", 3, "click"], [1, "fa-solid", "fa-plus"], ["toolbar", ""], ["Placeholder", "Search agents...", 3, "ValueChange", "Value"], [3, "Flex"], [1, "loading-container"], [1, "detail-panel-overlay"], [1, "detail-panel"], ["text", "Loading agents...", "size", "large"], [1, "empty-state"], [1, "fa-solid", "fa-robot"], ["type", "button", 1, "empty-state-btn", 3, "click"], [1, "agents-grid"], [1, "agents-tree"], [1, "agents-list"], [1, "agent-card", 3, "expanded"], [1, "agent-card"], [1, "card-header", 3, "click"], [1, "agent-info"], [1, "agent-icon"], [1, "agent-logo", 3, "src", "alt"], [3, "class"], [1, "agent-details"], [1, "agent-name", 3, "innerHTML"], [1, "agent-meta"], [1, "meta-item", "type-badge"], [1, "fa-solid", "fa-tag"], [1, "meta-item", 3, "class"], [1, "fa-solid", "fa-chevron-down", "expand-icon"], [1, "card-body"], [1, "agent-description", 3, "innerHTML"], [1, "agent-description", "text-muted"], [1, "expanded-content"], [1, "card-actions"], ["type", "button", "title", "View Details", 1, "action-btn"], ["type", "button", "title", "Run Agent", 1, "action-btn", "action-btn-primary"], [1, "meta-item"], [1, "fa-solid", "fa-circle", 2, "font-size", "8px"], [1, "agent-stats"], [1, "stat-item"], [1, "stat-label"], [1, "stat-value"], [1, "fa-solid", "fa-check", 2, "color", "#28a745"], [1, "fa-solid", "fa-times", 2, "color", "#dc3545"], ["type", "button", "title", "View Details", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-eye"], ["type", "button", "title", "Run Agent", 1, "action-btn", "action-btn-primary", 3, "click"], [1, "fa-solid", "fa-play"], [3, "AfterNodeClick", "AfterNodeDoubleClick", "BranchConfig", "LeafConfig", "SelectionMode", "SelectableTypes", "ShowDescriptions", "ShowBadges", "ShowExpandCollapseAll", "EmptyMessage", "EmptyIcon"], [1, "agents-table"], [3, "click"], [1, "sort-header"], [1, "fa-solid", "fa-chevron-up", "sort-icon"], [1, "agent-name-cell"], [1, "agent-icon-small"], [1, "agent-logo-small", 3, "src", "alt"], [1, "agent-description-small", 3, "innerHTML"], [1, "type-badge"], [1, "status-badge"], [1, "table-actions"], ["type", "button", "title", "View Details", 1, "action-btn-small"], ["type", "button", "title", "Run Agent", 1, "action-btn-small", "primary"], ["type", "button", "title", "View Details", 1, "action-btn-small", 3, "click"], ["type", "button", "title", "Run Agent", 1, "action-btn-small", "primary", 3, "click"], [1, "detail-panel-overlay", 3, "click"], [1, "detail-panel-header"], [1, "detail-panel-title"], [1, "detail-icon"], [1, "detail-logo", 3, "src", "alt"], [1, "detail-title-info"], [1, "detail-subtitle"], [1, "detail-panel-close", 3, "click"], [1, "fa-solid", "fa-times"], [1, "detail-panel-content"], [1, "detail-section"], [1, "detail-badges"], [1, "feature-badge"], [1, "detail-section-title"], [1, "fa-solid", "fa-cog"], [1, "detail-grid"], [1, "detail-item"], [1, "detail-label"], [1, "detail-value"], [1, "fa-solid", "fa-clock"], [1, "detail-panel-actions"], ["type", "button", 1, "detail-action-btn", "secondary"], ["type", "button", 1, "detail-action-btn", "primary", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "fa-solid", "fa-bolt"], [1, "fa-solid", "fa-align-left"], [1, "detail-description"], [1, "fa-solid", "fa-check", 2, "color", "#10b981"], [1, "fa-solid", "fa-times", 2, "color", "#ef4444"], ["type", "button", 1, "detail-action-btn", "secondary", 3, "click"]], template: function AgentConfigurationComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "mj-page-layout")(1, "mj-page-header", 0)(2, "div", 1);
             i0.ɵɵelement(3, "mj-stat-badge", 2);
             i0.ɵɵelementEnd();
@@ -1314,7 +1314,7 @@ let AgentConfigurationComponent = class AgentConfigurationComponent extends Base
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("Count", ctx.filteredAgents.length);
+            i0.ɵɵproperty("Count", ctx.filteredAgents.length)("Total", ctx.agents.length);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ActiveCount", ctx.ActiveFilterCount)("ShowClearAll", ctx.ActiveFilterCount > 0);
             i0.ɵɵadvance();
@@ -1345,7 +1345,7 @@ AgentConfigurationComponent = __decorate([
 export { AgentConfigurationComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AgentConfigurationComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'app-agent-configuration', template: "<mj-page-layout>\n  <!-- Header -->\n  <mj-page-header\n    Title=\"Agents\"\n    Icon=\"fa-solid fa-robot\">\n    <div meta>\n      <mj-stat-badge [Count]=\"filteredAgents.length\" Label=\"agents\"></mj-stat-badge>\n    </div>\n    <div actions>\n      <mj-filter-popover\n        [ActiveCount]=\"ActiveFilterCount\"\n        [ShowClearAll]=\"ActiveFilterCount > 0\"\n        (ClearAllRequested)=\"onResetFilters()\">\n        <mj-filter-panel\n          [Fields]=\"agentFilterFields\"\n          [Values]=\"$any(currentFilters)\"\n          (ValuesChange)=\"onFilterValuesChange($event)\"\n          (Reset)=\"onResetFilters()\">\n          <!-- Custom widget: Category uses a tree-dropdown, projected via mj-filter-field -->\n          <mj-filter-field Label=\"Category\" Icon=\"fa-solid fa-folder-tree\">\n            <mj-tree-dropdown\n              [BranchConfig]=\"CategoryBranchConfig\"\n              [Value]=\"SelectedCategoryKey\"\n              SelectionMode=\"single\"\n              SelectableTypes=\"branch\"\n              Placeholder=\"All Categories\"\n              [Clearable]=\"true\"\n              [EnableSearch]=\"true\"\n              (ValueChange)=\"onCategoryChange($event)\">\n            </mj-tree-dropdown>\n          </mj-filter-field>\n        </mj-filter-panel>\n      </mj-filter-popover>\n\n      <mj-view-toggle\n        [Options]=\"agentViewOptions\"\n        [ActiveKey]=\"viewMode\"\n        (KeyChange)=\"setViewMode($any($event))\">\n      </mj-view-toggle>\n\n      <button mjButton variant=\"primary\" size=\"sm\" (click)=\"createNewAgent()\" title=\"Create New Agent\">\n        <i class=\"fa-solid fa-plus\"></i>\n        New Agent\n      </button>\n    </div>\n    <div toolbar>\n      <mj-page-search\n        Placeholder=\"Search agents...\"\n        [Value]=\"currentFilters.searchTerm\"\n        (ValueChange)=\"onSearchTermChange($event)\">\n      </mj-page-search>\n    </div>\n  </mj-page-header>\n\n  <!-- Main Content (no sidebar \u2014 filters live in the popover above) -->\n  <mj-page-body [Flex]=\"true\">\n          <!-- Loading State -->\n          @if (isLoading) {\n            <div class=\"loading-container\">\n              <mj-loading text=\"Loading agents...\" size=\"large\"></mj-loading>\n            </div>\n          }\n\n          <!-- Agents Display -->\n          @if (!isLoading) {\n            @if (filteredAgents.length === 0) {\n              <div class=\"empty-state\">\n                <i class=\"fa-solid fa-robot\"></i>\n                <h3>No agents found</h3>\n                <p>No agents match your current filters. Try adjusting your search criteria or create a new agent.</p>\n                <button \n                  type=\"button\" \n                  class=\"empty-state-btn\"\n                  (click)=\"createNewAgent()\">\n                  <i class=\"fa-solid fa-plus\"></i>\n                  Create New Agent\n                </button>\n              </div>\n            } @else {\n              <!-- Grid View -->\n              @if (viewMode === 'grid') {\n                <div class=\"agents-grid\">\n                  @for (agent of filteredAgents; track agent.ID) {\n                    <div class=\"agent-card\" [class.expanded]=\"expandedAgentId === agent.ID\">\n                      <!-- Card Header -->\n                      <div class=\"card-header\" (click)=\"toggleAgentExpansion(agent.ID)\">\n                        <div class=\"agent-info\">\n                          <div class=\"agent-icon\" [style.background-color]=\"getAgentIconColor(agent)\">\n                            @if (hasLogoURL(agent)) {\n                              <img [src]=\"agent.LogoURL\" [alt]=\"agent.Name + ' logo'\" class=\"agent-logo\">\n                            } @else {\n                              <i [class]=\"getAgentIcon(agent)\"></i>\n                            }\n                          </div>\n                          <div class=\"agent-details\">\n                            <h4 class=\"agent-name\" [innerHTML]=\"agent.Name | highlightSearch:currentFilters.searchTerm\"></h4>\n                            <div class=\"agent-meta\">\n                              <span class=\"meta-item type-badge\">\n                                <i class=\"fa-solid fa-tag\"></i>\n                                {{ getAgentTypeName(agent) }}\n                              </span>\n                              @if (agent.Status) {\n                                <span class=\"meta-item\" [class]=\"'status-' + agent.Status.toLowerCase()\">\n                                  <i class=\"fa-solid fa-circle\" style=\"font-size: 8px;\"></i>\n                                  {{ agent.Status }}\n                                </span>\n                              }\n                            </div>\n                          </div>\n                        </div>\n                        \n                        <i class=\"fa-solid fa-chevron-down expand-icon\" \n                           [class.rotated]=\"expandedAgentId === agent.ID\"></i>\n                      </div>\n\n                      <!-- Card Body -->\n                      <div class=\"card-body\">\n                        @if (agent.Description) {\n                          <p class=\"agent-description\" [innerHTML]=\"agent.Description | highlightSearch:currentFilters.searchTerm\"></p>\n                        } @else {\n                          <p class=\"agent-description text-muted\">No description provided</p>\n                        }\n                        \n                        <!-- Expandable Content -->\n                        @if (expandedAgentId === agent.ID) {\n                          <div class=\"expanded-content\">\n                            <div class=\"agent-stats\">\n                              @if (agent.Parent) {\n                                <div class=\"stat-item\">\n                                  <span class=\"stat-label\">Parent</span>\n                                  <span class=\"stat-value\">{{ agent.Parent }}</span>\n                                </div>\n                              }\n                              <div class=\"stat-item\">\n                                <span class=\"stat-label\">Context Compression</span>\n                                <span class=\"stat-value\">\n                                  @if (agent.EnableContextCompression) {\n                                    <i class=\"fa-solid fa-check\" style=\"color: #28a745;\"></i> Enabled\n                                  } @else {\n                                    <i class=\"fa-solid fa-times\" style=\"color: #dc3545;\"></i> Disabled\n                                  }\n                                </span>\n                              </div>\n                            </div>\n                          </div>\n                        }\n                      </div>\n\n                      <!-- Card Actions -->\n                      <div class=\"card-actions\">\n                        @if (UserCanReadAgents) {\n                          <button\n                            type=\"button\"\n                            class=\"action-btn\"\n                            (click)=\"showAgentDetails(agent, $event)\"\n                            title=\"View Details\">\n                            <i class=\"fa-solid fa-eye\"></i>\n                            Details\n                          </button>\n                        }\n\n                        @if (agent.Status === 'Active' && UserCanReadAgents) {\n                          <button\n                            type=\"button\"\n                            class=\"action-btn action-btn-primary\"\n                            (click)=\"runAgent(agent); $event.stopPropagation()\"\n                            title=\"Run Agent\">\n                            <i class=\"fa-solid fa-play\"></i>\n                            Run\n                          </button>\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n              \n              <!-- Tree View (mj-tree component) -->\n              @if (viewMode === 'tree') {\n                <div class=\"agents-tree\">\n                  <mj-tree\n                    [BranchConfig]=\"CategoryBranchConfig\"\n                    [LeafConfig]=\"AgentLeafConfig\"\n                    [SelectionMode]=\"'single'\"\n                    [SelectableTypes]=\"'leaf'\"\n                    [ShowDescriptions]=\"true\"\n                    [ShowBadges]=\"true\"\n                    [ShowExpandCollapseAll]=\"true\"\n                    [EmptyMessage]=\"'No agents found'\"\n                    [EmptyIcon]=\"'fa-solid fa-robot'\"\n                    (AfterNodeClick)=\"onTreeNodeClick($event)\"\n                    (AfterNodeDoubleClick)=\"onTreeNodeDoubleClick($event)\">\n                  </mj-tree>\n                </div>\n              }\n\n              <!-- List View -->\n              @if (viewMode === 'list') {\n                <div class=\"agents-list\">\n                  <table class=\"agents-table\">\n                    <thead>\n                      <tr>\n                        <th (click)=\"sortBy('Name')\"\n                            [class.sorted]=\"sortColumn === 'Name'\"\n                            [class.desc]=\"sortColumn === 'Name' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Name\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th>Type</th>\n                        <th (click)=\"sortBy('Status')\"\n                            [class.sorted]=\"sortColumn === 'Status'\"\n                            [class.desc]=\"sortColumn === 'Status' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Status\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th>Actions</th>\n                      </tr>\n                    </thead>\n                    <tbody>\n                      @for (agent of filteredAgents; track agent.ID) {\n                        <tr>\n                          <td>\n                            <div class=\"agent-name-cell\">\n                              <div class=\"agent-icon-small\" [style.background-color]=\"getAgentIconColor(agent)\">\n                                @if (hasLogoURL(agent)) {\n                                  <img [src]=\"agent.LogoURL\" [alt]=\"agent.Name + ' logo'\" class=\"agent-logo-small\">\n                                } @else {\n                                  <i [class]=\"getAgentIcon(agent)\"></i>\n                                }\n                              </div>\n                              <div>\n                                <div class=\"agent-name\" [innerHTML]=\"agent.Name | highlightSearch:currentFilters.searchTerm\"></div>\n                                @if (agent.Description) {\n                                  <div class=\"agent-description-small\" [innerHTML]=\"agent.Description | highlightSearch:currentFilters.searchTerm\"></div>\n                                }\n                              </div>\n                            </div>\n                          </td>\n                          <td>\n                            <span class=\"type-badge\">\n                              {{ getAgentTypeName(agent) }}\n                            </span>\n                          </td>\n                          <td>\n                            <span class=\"status-badge\" [class]=\"'status-' + (agent.Status || 'unknown').toLowerCase()\">\n                              {{ agent.Status || 'Unknown' }}\n                            </span>\n                          </td>\n                          <td>\n                            <div class=\"table-actions\">\n                              @if (UserCanReadAgents) {\n                                <button\n                                  type=\"button\"\n                                  class=\"action-btn-small\"\n                                  (click)=\"showAgentDetails(agent)\"\n                                  title=\"View Details\">\n                                  <i class=\"fa-solid fa-eye\"></i>\n                                </button>\n                              }\n                              @if (agent.Status === 'Active' && UserCanReadAgents) {\n                                <button\n                                  type=\"button\"\n                                  class=\"action-btn-small primary\"\n                                  (click)=\"runAgent(agent)\"\n                                  title=\"Run Agent\">\n                                  <i class=\"fa-solid fa-play\"></i>\n                                </button>\n                              }\n                            </div>\n                          </td>\n                        </tr>\n                      }\n                    </tbody>\n                  </table>\n                </div>\n              }\n            }\n          }\n  </mj-page-body>\n\n  <!-- Detail Panel Overlay -->\n  @if (detailPanelVisible) {\n    <div class=\"detail-panel-overlay\" (click)=\"closeDetailPanel()\"></div>\n  }\n\n  <!-- Detail Panel -->\n  <div class=\"detail-panel\" [class.visible]=\"detailPanelVisible\">\n    @if (selectedAgent) {\n      <!-- Panel Header -->\n      <div class=\"detail-panel-header\">\n        <div class=\"detail-panel-title\">\n          <div class=\"detail-icon\" [style.background-color]=\"getAgentIconColor(selectedAgent)\">\n            @if (hasLogoURL(selectedAgent)) {\n              <img [src]=\"selectedAgent.LogoURL\" [alt]=\"selectedAgent.Name + ' logo'\" class=\"detail-logo\">\n            } @else {\n              <i [class]=\"getAgentIcon(selectedAgent)\"></i>\n            }\n          </div>\n          <div class=\"detail-title-info\">\n            <h3>{{ selectedAgent.Name }}</h3>\n            <span class=\"detail-subtitle\">{{ getAgentTypeName(selectedAgent) }}</span>\n          </div>\n        </div>\n        <button class=\"detail-panel-close\" (click)=\"closeDetailPanel()\">\n          <i class=\"fa-solid fa-times\"></i>\n        </button>\n      </div>\n\n      <!-- Panel Content -->\n      <div class=\"detail-panel-content\">\n        <!-- Status and Type Section -->\n        <div class=\"detail-section\">\n          <div class=\"detail-badges\">\n            <span class=\"status-badge\" [class]=\"'status-' + (selectedAgent.Status || 'unknown').toLowerCase()\">\n              <i class=\"fa-solid fa-circle\" style=\"font-size: 8px;\"></i>\n              {{ selectedAgent.Status || 'Unknown' }}\n            </span>\n            @if (selectedAgent.ExposeAsAction) {\n              <span class=\"feature-badge\">\n                <i class=\"fa-solid fa-bolt\"></i>\n                Exposed as Action\n              </span>\n            }\n          </div>\n        </div>\n\n        <!-- Description -->\n        @if (selectedAgent.Description) {\n          <div class=\"detail-section\">\n            <h4 class=\"detail-section-title\">\n              <i class=\"fa-solid fa-align-left\"></i>\n              Description\n            </h4>\n            <p class=\"detail-description\">{{ selectedAgent.Description }}</p>\n          </div>\n        }\n\n        <!-- Configuration Details -->\n        <div class=\"detail-section\">\n          <h4 class=\"detail-section-title\">\n            <i class=\"fa-solid fa-cog\"></i>\n            Configuration\n          </h4>\n          <div class=\"detail-grid\">\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Execution Mode</span>\n              <span class=\"detail-value\">\n                <i [class]=\"getExecutionModeIcon(selectedAgent.ExecutionMode)\"></i>\n                {{ selectedAgent.ExecutionMode }}\n              </span>\n            </div>\n            @if (getParentAgentName(selectedAgent)) {\n              <div class=\"detail-item\">\n                <span class=\"detail-label\">Parent Agent</span>\n                <span class=\"detail-value\">{{ getParentAgentName(selectedAgent) }}</span>\n              </div>\n            }\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Context Compression</span>\n              <span class=\"detail-value\">\n                @if (selectedAgent.EnableContextCompression) {\n                  <i class=\"fa-solid fa-check\" style=\"color: #10b981;\"></i> Enabled\n                } @else {\n                  <i class=\"fa-solid fa-times\" style=\"color: #ef4444;\"></i> Disabled\n                }\n              </span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Exposed as Action</span>\n              <span class=\"detail-value\">\n                @if (selectedAgent.ExposeAsAction) {\n                  <i class=\"fa-solid fa-check\" style=\"color: #10b981;\"></i> Yes\n                } @else {\n                  <i class=\"fa-solid fa-times\" style=\"color: #ef4444;\"></i> No\n                }\n              </span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Model Selection</span>\n              <span class=\"detail-value\">{{ selectedAgent.ModelSelectionMode }}</span>\n            </div>\n          </div>\n        </div>\n\n        <!-- Timestamps -->\n        <div class=\"detail-section\">\n          <h4 class=\"detail-section-title\">\n            <i class=\"fa-solid fa-clock\"></i>\n            Timestamps\n          </h4>\n          <div class=\"detail-grid\">\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Created</span>\n              <span class=\"detail-value\">{{ selectedAgent.__mj_CreatedAt | date:'medium' }}</span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Updated</span>\n              <span class=\"detail-value\">{{ selectedAgent.__mj_UpdatedAt | date:'medium' }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Panel Actions -->\n      <div class=\"detail-panel-actions\">\n        @if (selectedAgent.Status === 'Active') {\n          <button\n            type=\"button\"\n            class=\"detail-action-btn secondary\"\n            (click)=\"runAgent(selectedAgent)\">\n            <i class=\"fa-solid fa-play\"></i>\n            Run Agent\n          </button>\n        }\n        <button\n          type=\"button\"\n          class=\"detail-action-btn primary\"\n          (click)=\"openAgentFromPanel()\">\n          <i class=\"fa-solid fa-external-link-alt\"></i>\n          Open Full Record\n        </button>\n      </div>\n    }\n  </div>\n</mj-page-layout>\n\n<!-- AI Agent Test Harness - Now handled by service with minimize support -->", styles: ["/* ============================================\n   AI Agents Dashboard - World-Class Design\n   Clean white header with brand blue accents\n   ============================================ */\n\n/* Container is now provided by <mj-page-layout> */\n\n/* Tinted card background on the body \u2014 matches the original .agents-content\n   surface treatment so cards/lists sit on a lightly-tinted surface rather\n   than the page background. */\n:host mj-page-body {\n  background: var(--mj-bg-surface-card);\n}\n\n/* View toggle now provided by <mj-view-toggle>. */\n\n.control-btn {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  padding: 10px 18px;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.control-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.control-btn i {\n  font-size: 14px;\n}\n\n.control-btn.primary {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary-hover);\n  color: var(--mj-text-inverse);\n}\n\n.control-btn.primary:hover {\n  background: var(--mj-brand-primary-hover);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n\n.main-splitter {\n  flex: 1;\n  min-height: 0;\n}\n\n/* Splitter Styling */\nas-split {\n  background: transparent;\n}\n\n/* Filter Panel Styles - used by child component */\n\n/* Agents Content */\n\n/* Grid View */\n.agents-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));\n  gap: 24px;\n}\n\n.agent-card {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);\n  border: 1px solid var(--mj-border-default);\n  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n  position: relative;\n}\n\n.agent-card::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 4px;\n  background: var(--mj-brand-primary);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.agent-card:hover {\n  box-shadow: 0 20px 40px -15px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  transform: translateY(-4px);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.agent-card:hover::before {\n  opacity: 1;\n}\n\n.agent-card.expanded {\n  box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  border-color: var(--mj-brand-accent);\n}\n\n.agent-card.expanded::before {\n  opacity: 1;\n}\n\n.card-header {\n  padding: 24px;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  cursor: pointer;\n  user-select: none;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  transition: background-color 0.2s;\n}\n\n.card-header:hover {\n  background-color: var(--mj-bg-surface-hover);\n}\n\n.agent-info {\n  display: flex;\n  gap: 18px;\n  flex: 1;\n}\n\n.agent-icon {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.agent-icon i {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n.agent-icon .agent-logo {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 14px;\n}\n\n.agent-details {\n  flex: 1;\n  min-width: 0;\n}\n\n.agent-name {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin-bottom: 8px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.agent-meta {\n  display: flex;\n  gap: 14px;\n  flex-wrap: wrap;\n}\n\n.meta-item {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-bg-surface-sunken);\n  padding: 4px 10px;\n  border-radius: 6px;\n}\n\n.meta-item i {\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n}\n\n.meta-item.status-active {\n  color: var(--mj-color-success-700);\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n}\n\n.meta-item.status-active i {\n  color: var(--mj-color-success-700);\n}\n\n.meta-item.status-pending {\n  color: var(--mj-color-warning-700);\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n}\n\n.meta-item.status-pending i {\n  color: var(--mj-color-warning-700);\n}\n\n.meta-item.status-disabled,\n.meta-item.status-inactive {\n  color: var(--mj-text-muted);\n  background: var(--mj-border-default);\n}\n\n.meta-item.status-disabled i,\n.meta-item.status-inactive i {\n  color: var(--mj-text-muted);\n}\n\n/* Type Badge - for Agent Type display */\n.type-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 600;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.type-badge i {\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n}\n\n/* Type badge in meta context (grid view) */\n.meta-item.type-badge {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.meta-item.type-badge i {\n  color: var(--mj-brand-primary);\n}\n\n.expand-icon {\n  font-size: 16px;\n  color: var(--mj-text-disabled);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  padding: 8px;\n  border-radius: 8px;\n}\n\n.expand-icon:hover {\n  color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.expand-icon.rotated {\n  transform: rotate(180deg);\n  color: var(--mj-brand-primary);\n}\n\n.card-body {\n  padding: 0 24px 24px 24px;\n}\n\n.agent-description {\n  margin: 18px 0 0 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: var(--mj-text-muted);\n}\n\n.agent-description.text-muted {\n  font-style: italic;\n  color: var(--mj-text-disabled);\n}\n\n/* Expanded Content */\n.expanded-content {\n  margin-top: 20px;\n  padding-top: 20px;\n  border-top: 1px solid var(--mj-border-default);\n  animation: slideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-12px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.agent-stats {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n  gap: 18px;\n}\n\n.stat-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 16px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 12px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.stat-label {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.stat-value {\n  font-size: 15px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n}\n\n/* Card Actions */\n.card-actions {\n  padding: 18px 24px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 12px;\n  justify-content: flex-end;\n}\n\n.action-btn {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  padding: 10px 20px;\n  border-radius: 10px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.action-btn:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n}\n\n.action-btn-primary {\n  background: var(--mj-brand-primary);\n  border-color: transparent;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.action-btn-primary:hover {\n  background: var(--mj-brand-primary-hover);\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n/* List View */\n.agents-list {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\n  border: 1px solid var(--mj-border-default);\n  overflow: hidden;\n}\n\n.agents-table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.agents-table thead {\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n}\n\n.agents-table th {\n  padding: 16px 20px;\n  text-align: left;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.2s ease;\n}\n\n.agents-table th:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-brand-primary);\n}\n\n.agents-table th.sorted {\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.sort-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.sort-icon {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  transition: all 0.2s ease;\n}\n\n.agents-table th:hover .sort-icon {\n  color: var(--mj-brand-primary);\n}\n\n.agents-table th.sorted .sort-icon {\n  color: var(--mj-brand-primary);\n}\n\n.agents-table th.sorted.desc .sort-icon {\n  transform: rotate(180deg);\n}\n\n.agents-table tbody tr {\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  transition: background-color 0.2s;\n}\n\n.agents-table tbody tr:last-child {\n  border-bottom: none;\n}\n\n.agents-table tbody tr:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.agents-table td {\n  padding: 18px 20px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n}\n\n.agent-name-cell {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n}\n\n.agent-icon-small {\n  width: 42px;\n  height: 42px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.agent-icon-small i {\n  color: var(--mj-text-inverse);\n  font-size: 18px;\n}\n\n.agent-icon-small .agent-logo-small {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 10px;\n}\n\n.agent-name-cell .agent-name {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 0;\n  white-space: normal;\n}\n\n.agent-description-small {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-top: 4px;\n  line-height: 1.4;\n}\n\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.status-badge i {\n  font-size: 8px;\n}\n\n.status-badge.status-active {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-success-700);\n}\n\n.status-badge.status-pending {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-warning-700);\n}\n\n.status-badge.status-disabled,\n.status-badge.status-inactive {\n  background: var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n.status-badge.status-unknown {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n.execution-mode {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--mj-text-secondary);\n}\n\n.execution-mode i {\n  color: var(--mj-brand-primary);\n}\n\n.table-actions {\n  display: flex;\n  gap: 10px;\n}\n\n.action-btn-small {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  padding: 8px 12px;\n  border-radius: 8px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.action-btn-small:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.action-btn-small.primary {\n  background: var(--mj-brand-primary);\n  border-color: transparent;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.action-btn-small.primary:hover {\n  background: var(--mj-brand-primary-hover);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n/* Empty State */\n.empty-state {\n  text-align: center;\n  padding: 100px 32px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state i {\n  font-size: 80px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  margin-bottom: 28px;\n  display: block;\n}\n\n.empty-state h3 {\n  color: var(--mj-text-primary);\n  font-size: 24px;\n  font-weight: 700;\n  margin: 0 0 12px 0;\n}\n\n.empty-state p {\n  font-size: 16px;\n  line-height: 1.6;\n  max-width: 420px;\n  margin: 0 auto 32px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state-btn {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: none;\n  padding: 14px 28px;\n  border-radius: 12px;\n  font-size: 15px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  box-shadow: 0 4px 15px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.empty-state-btn:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 25px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n/* Loading State */\n.loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 400px;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .dashboard-header {\n    flex-direction: column;\n    gap: 16px;\n    align-items: stretch;\n    padding: 16px 20px;\n  }\n\n  .header-info {\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n\n  .header-controls {\n    justify-content: center;\n  }\n\n  .agents-grid {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n\n  .agent-stats {\n    grid-template-columns: 1fr;\n  }\n\n  .card-header {\n    padding: 18px;\n  }\n\n  .card-body {\n    padding: 0 18px 18px 18px;\n  }\n\n  .card-actions {\n    padding: 14px 18px;\n    flex-wrap: wrap;\n  }\n}\n\n/* =============================================\n   Detail Panel - Slide-in Overlay\n   ============================================= */\n\n.detail-panel-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.4);\n  backdrop-filter: blur(4px);\n  z-index: 1000;\n  animation: fadeIn 0.25s ease-out;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.detail-panel {\n  position: fixed;\n  top: 0;\n  right: -480px;\n  width: 480px;\n  height: 100vh;\n  background: var(--mj-bg-surface);\n  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n}\n\n.detail-panel.visible {\n  right: 0;\n}\n\n/* Detail Panel Header */\n.detail-panel-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.detail-panel-title {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.detail-icon {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.detail-icon i {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n.detail-icon .detail-logo {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 14px;\n}\n\n.detail-title-info h3 {\n  margin: 0 0 4px 0;\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.detail-subtitle {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  font-weight: 500;\n}\n\n.detail-panel-close {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  color: var(--mj-text-muted);\n}\n\n.detail-panel-close:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-primary);\n}\n\n/* Detail Panel Content */\n.detail-panel-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 24px;\n}\n\n.detail-section {\n  margin-bottom: 28px;\n}\n\n.detail-section:last-child {\n  margin-bottom: 0;\n}\n\n.detail-badges {\n  display: flex;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.feature-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.feature-badge i {\n  font-size: 11px;\n}\n\n.detail-section-title {\n  margin: 0 0 16px 0;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.detail-section-title i {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n.detail-description {\n  margin: 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: var(--mj-text-secondary);\n}\n\n.detail-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 16px;\n}\n\n.detail-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 14px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 12px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.detail-label {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.detail-value {\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.detail-value i {\n  font-size: 13px;\n}\n\n.detail-code-block {\n  background: var(--mj-text-primary);\n  color: var(--mj-border-default);\n  padding: 16px;\n  border-radius: 10px;\n  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n  font-size: 13px;\n  line-height: 1.6;\n  overflow-x: auto;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n/* Detail Panel Actions */\n.detail-panel-actions {\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n.detail-action-btn {\n  flex: 1;\n  padding: 14px 20px;\n  border-radius: 12px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n\n.detail-action-btn.secondary {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n.detail-action-btn.secondary:hover {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-hover);\n}\n\n.detail-action-btn.primary {\n  background: var(--mj-brand-primary);\n  border: 2px solid transparent;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.detail-action-btn.primary:hover {\n  background: var(--mj-brand-primary-hover);\n  transform: translateY(-1px);\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n/* Detail Panel Responsive */\n@media (max-width: 520px) {\n  .detail-panel {\n    width: 100%;\n    right: -100%;\n  }\n\n  .detail-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n/* Search Highlight */\n:host ::ng-deep .search-highlight,\n.search-highlight {\n  background-color: color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n  padding: 1px 2px;\n  border-radius: 2px;\n  font-weight: inherit;\n}\n\n/* ============================================\n   Tree View - Mac Finder Style\n   ============================================ */\n\n.agents-tree {\n  padding: 8px 16px;\n  height: 100%;\n  overflow: auto;\n}\n"] }]
+        args: [{ standalone: false, selector: 'app-agent-configuration', template: "<mj-page-layout>\n  <!-- Header -->\n  <mj-page-header\n    Title=\"Agents\"\n    Icon=\"fa-solid fa-robot\">\n    <!-- X-of-Y filtered count earns its meta spot per chrome conventions \u00A72. -->\n    <div meta>\n      <mj-stat-badge\n        [Count]=\"filteredAgents.length\"\n        [Total]=\"agents.length\"\n        Label=\"agents\">\n      </mj-stat-badge>\n    </div>\n    <div actions>\n      <mj-filter-popover\n        [ActiveCount]=\"ActiveFilterCount\"\n        [ShowClearAll]=\"ActiveFilterCount > 0\"\n        (ClearAllRequested)=\"onResetFilters()\">\n        <mj-filter-panel\n          [Fields]=\"agentFilterFields\"\n          [Values]=\"$any(currentFilters)\"\n          (ValuesChange)=\"onFilterValuesChange($event)\"\n          (Reset)=\"onResetFilters()\">\n          <!-- Custom widget: Category uses a tree-dropdown, projected via mj-filter-field -->\n          <mj-filter-field Label=\"Category\" Icon=\"fa-solid fa-folder-tree\">\n            <mj-tree-dropdown\n              [BranchConfig]=\"CategoryBranchConfig\"\n              [Value]=\"SelectedCategoryKey\"\n              SelectionMode=\"single\"\n              SelectableTypes=\"branch\"\n              Placeholder=\"All Categories\"\n              [Clearable]=\"true\"\n              [EnableSearch]=\"true\"\n              (ValueChange)=\"onCategoryChange($event)\">\n            </mj-tree-dropdown>\n          </mj-filter-field>\n        </mj-filter-panel>\n      </mj-filter-popover>\n\n      <mj-view-toggle\n        [Options]=\"agentViewOptions\"\n        [ActiveKey]=\"viewMode\"\n        (KeyChange)=\"setViewMode($any($event))\">\n      </mj-view-toggle>\n\n      <button mjButton variant=\"primary\" size=\"sm\" (click)=\"createNewAgent()\" title=\"Create New Agent\">\n        <i class=\"fa-solid fa-plus\"></i>\n        New Agent\n      </button>\n    </div>\n    <div toolbar>\n      <mj-page-search\n        Placeholder=\"Search agents...\"\n        [Value]=\"currentFilters.searchTerm\"\n        (ValueChange)=\"onSearchTermChange($event)\">\n      </mj-page-search>\n    </div>\n  </mj-page-header>\n\n  <!-- Main Content (no sidebar \u2014 filters live in the popover above) -->\n  <mj-page-body [Flex]=\"true\">\n          <!-- Loading State -->\n          @if (isLoading) {\n            <div class=\"loading-container\">\n              <mj-loading text=\"Loading agents...\" size=\"large\"></mj-loading>\n            </div>\n          }\n\n          <!-- Agents Display -->\n          @if (!isLoading) {\n            @if (filteredAgents.length === 0) {\n              <div class=\"empty-state\">\n                <i class=\"fa-solid fa-robot\"></i>\n                <h3>No agents found</h3>\n                <p>No agents match your current filters. Try adjusting your search criteria or create a new agent.</p>\n                <button \n                  type=\"button\" \n                  class=\"empty-state-btn\"\n                  (click)=\"createNewAgent()\">\n                  <i class=\"fa-solid fa-plus\"></i>\n                  Create New Agent\n                </button>\n              </div>\n            } @else {\n              <!-- Grid View -->\n              @if (viewMode === 'grid') {\n                <div class=\"agents-grid\">\n                  @for (agent of filteredAgents; track agent.ID) {\n                    <div class=\"agent-card\" [class.expanded]=\"expandedAgentId === agent.ID\">\n                      <!-- Card Header -->\n                      <div class=\"card-header\" (click)=\"toggleAgentExpansion(agent.ID)\">\n                        <div class=\"agent-info\">\n                          <div class=\"agent-icon\" [style.background-color]=\"getAgentIconColor(agent)\">\n                            @if (hasLogoURL(agent)) {\n                              <img [src]=\"agent.LogoURL\" [alt]=\"agent.Name + ' logo'\" class=\"agent-logo\">\n                            } @else {\n                              <i [class]=\"getAgentIcon(agent)\"></i>\n                            }\n                          </div>\n                          <div class=\"agent-details\">\n                            <h4 class=\"agent-name\" [innerHTML]=\"agent.Name | highlightSearch:currentFilters.searchTerm\"></h4>\n                            <div class=\"agent-meta\">\n                              <span class=\"meta-item type-badge\">\n                                <i class=\"fa-solid fa-tag\"></i>\n                                {{ getAgentTypeName(agent) }}\n                              </span>\n                              @if (agent.Status) {\n                                <span class=\"meta-item\" [class]=\"'status-' + agent.Status.toLowerCase()\">\n                                  <i class=\"fa-solid fa-circle\" style=\"font-size: 8px;\"></i>\n                                  {{ agent.Status }}\n                                </span>\n                              }\n                            </div>\n                          </div>\n                        </div>\n                        \n                        <i class=\"fa-solid fa-chevron-down expand-icon\" \n                           [class.rotated]=\"expandedAgentId === agent.ID\"></i>\n                      </div>\n\n                      <!-- Card Body -->\n                      <div class=\"card-body\">\n                        @if (agent.Description) {\n                          <p class=\"agent-description\" [innerHTML]=\"agent.Description | highlightSearch:currentFilters.searchTerm\"></p>\n                        } @else {\n                          <p class=\"agent-description text-muted\">No description provided</p>\n                        }\n                        \n                        <!-- Expandable Content -->\n                        @if (expandedAgentId === agent.ID) {\n                          <div class=\"expanded-content\">\n                            <div class=\"agent-stats\">\n                              @if (agent.Parent) {\n                                <div class=\"stat-item\">\n                                  <span class=\"stat-label\">Parent</span>\n                                  <span class=\"stat-value\">{{ agent.Parent }}</span>\n                                </div>\n                              }\n                              <div class=\"stat-item\">\n                                <span class=\"stat-label\">Context Compression</span>\n                                <span class=\"stat-value\">\n                                  @if (agent.EnableContextCompression) {\n                                    <i class=\"fa-solid fa-check\" style=\"color: #28a745;\"></i> Enabled\n                                  } @else {\n                                    <i class=\"fa-solid fa-times\" style=\"color: #dc3545;\"></i> Disabled\n                                  }\n                                </span>\n                              </div>\n                            </div>\n                          </div>\n                        }\n                      </div>\n\n                      <!-- Card Actions -->\n                      <div class=\"card-actions\">\n                        @if (UserCanReadAgents) {\n                          <button\n                            type=\"button\"\n                            class=\"action-btn\"\n                            (click)=\"showAgentDetails(agent, $event)\"\n                            title=\"View Details\">\n                            <i class=\"fa-solid fa-eye\"></i>\n                            Details\n                          </button>\n                        }\n\n                        @if (agent.Status === 'Active' && UserCanReadAgents) {\n                          <button\n                            type=\"button\"\n                            class=\"action-btn action-btn-primary\"\n                            (click)=\"runAgent(agent); $event.stopPropagation()\"\n                            title=\"Run Agent\">\n                            <i class=\"fa-solid fa-play\"></i>\n                            Run\n                          </button>\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n              \n              <!-- Tree View (mj-tree component) -->\n              @if (viewMode === 'tree') {\n                <div class=\"agents-tree\">\n                  <mj-tree\n                    [BranchConfig]=\"CategoryBranchConfig\"\n                    [LeafConfig]=\"AgentLeafConfig\"\n                    [SelectionMode]=\"'single'\"\n                    [SelectableTypes]=\"'leaf'\"\n                    [ShowDescriptions]=\"true\"\n                    [ShowBadges]=\"true\"\n                    [ShowExpandCollapseAll]=\"true\"\n                    [EmptyMessage]=\"'No agents found'\"\n                    [EmptyIcon]=\"'fa-solid fa-robot'\"\n                    (AfterNodeClick)=\"onTreeNodeClick($event)\"\n                    (AfterNodeDoubleClick)=\"onTreeNodeDoubleClick($event)\">\n                  </mj-tree>\n                </div>\n              }\n\n              <!-- List View -->\n              @if (viewMode === 'list') {\n                <div class=\"agents-list\">\n                  <table class=\"agents-table\">\n                    <thead>\n                      <tr>\n                        <th (click)=\"sortBy('Name')\"\n                            [class.sorted]=\"sortColumn === 'Name'\"\n                            [class.desc]=\"sortColumn === 'Name' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Name\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th>Type</th>\n                        <th (click)=\"sortBy('Status')\"\n                            [class.sorted]=\"sortColumn === 'Status'\"\n                            [class.desc]=\"sortColumn === 'Status' && sortDirection === 'desc'\">\n                          <span class=\"sort-header\">\n                            Status\n                            <i class=\"fa-solid fa-chevron-up sort-icon\"></i>\n                          </span>\n                        </th>\n                        <th>Actions</th>\n                      </tr>\n                    </thead>\n                    <tbody>\n                      @for (agent of filteredAgents; track agent.ID) {\n                        <tr>\n                          <td>\n                            <div class=\"agent-name-cell\">\n                              <div class=\"agent-icon-small\" [style.background-color]=\"getAgentIconColor(agent)\">\n                                @if (hasLogoURL(agent)) {\n                                  <img [src]=\"agent.LogoURL\" [alt]=\"agent.Name + ' logo'\" class=\"agent-logo-small\">\n                                } @else {\n                                  <i [class]=\"getAgentIcon(agent)\"></i>\n                                }\n                              </div>\n                              <div>\n                                <div class=\"agent-name\" [innerHTML]=\"agent.Name | highlightSearch:currentFilters.searchTerm\"></div>\n                                @if (agent.Description) {\n                                  <div class=\"agent-description-small\" [innerHTML]=\"agent.Description | highlightSearch:currentFilters.searchTerm\"></div>\n                                }\n                              </div>\n                            </div>\n                          </td>\n                          <td>\n                            <span class=\"type-badge\">\n                              {{ getAgentTypeName(agent) }}\n                            </span>\n                          </td>\n                          <td>\n                            <span class=\"status-badge\" [class]=\"'status-' + (agent.Status || 'unknown').toLowerCase()\">\n                              {{ agent.Status || 'Unknown' }}\n                            </span>\n                          </td>\n                          <td>\n                            <div class=\"table-actions\">\n                              @if (UserCanReadAgents) {\n                                <button\n                                  type=\"button\"\n                                  class=\"action-btn-small\"\n                                  (click)=\"showAgentDetails(agent)\"\n                                  title=\"View Details\">\n                                  <i class=\"fa-solid fa-eye\"></i>\n                                </button>\n                              }\n                              @if (agent.Status === 'Active' && UserCanReadAgents) {\n                                <button\n                                  type=\"button\"\n                                  class=\"action-btn-small primary\"\n                                  (click)=\"runAgent(agent)\"\n                                  title=\"Run Agent\">\n                                  <i class=\"fa-solid fa-play\"></i>\n                                </button>\n                              }\n                            </div>\n                          </td>\n                        </tr>\n                      }\n                    </tbody>\n                  </table>\n                </div>\n              }\n            }\n          }\n  </mj-page-body>\n\n  <!-- Detail Panel Overlay -->\n  @if (detailPanelVisible) {\n    <div class=\"detail-panel-overlay\" (click)=\"closeDetailPanel()\"></div>\n  }\n\n  <!-- Detail Panel -->\n  <div class=\"detail-panel\" [class.visible]=\"detailPanelVisible\">\n    @if (selectedAgent) {\n      <!-- Panel Header -->\n      <div class=\"detail-panel-header\">\n        <div class=\"detail-panel-title\">\n          <div class=\"detail-icon\" [style.background-color]=\"getAgentIconColor(selectedAgent)\">\n            @if (hasLogoURL(selectedAgent)) {\n              <img [src]=\"selectedAgent.LogoURL\" [alt]=\"selectedAgent.Name + ' logo'\" class=\"detail-logo\">\n            } @else {\n              <i [class]=\"getAgentIcon(selectedAgent)\"></i>\n            }\n          </div>\n          <div class=\"detail-title-info\">\n            <h3>{{ selectedAgent.Name }}</h3>\n            <span class=\"detail-subtitle\">{{ getAgentTypeName(selectedAgent) }}</span>\n          </div>\n        </div>\n        <button class=\"detail-panel-close\" (click)=\"closeDetailPanel()\">\n          <i class=\"fa-solid fa-times\"></i>\n        </button>\n      </div>\n\n      <!-- Panel Content -->\n      <div class=\"detail-panel-content\">\n        <!-- Status and Type Section -->\n        <div class=\"detail-section\">\n          <div class=\"detail-badges\">\n            <span class=\"status-badge\" [class]=\"'status-' + (selectedAgent.Status || 'unknown').toLowerCase()\">\n              <i class=\"fa-solid fa-circle\" style=\"font-size: 8px;\"></i>\n              {{ selectedAgent.Status || 'Unknown' }}\n            </span>\n            @if (selectedAgent.ExposeAsAction) {\n              <span class=\"feature-badge\">\n                <i class=\"fa-solid fa-bolt\"></i>\n                Exposed as Action\n              </span>\n            }\n          </div>\n        </div>\n\n        <!-- Description -->\n        @if (selectedAgent.Description) {\n          <div class=\"detail-section\">\n            <h4 class=\"detail-section-title\">\n              <i class=\"fa-solid fa-align-left\"></i>\n              Description\n            </h4>\n            <p class=\"detail-description\">{{ selectedAgent.Description }}</p>\n          </div>\n        }\n\n        <!-- Configuration Details -->\n        <div class=\"detail-section\">\n          <h4 class=\"detail-section-title\">\n            <i class=\"fa-solid fa-cog\"></i>\n            Configuration\n          </h4>\n          <div class=\"detail-grid\">\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Execution Mode</span>\n              <span class=\"detail-value\">\n                <i [class]=\"getExecutionModeIcon(selectedAgent.ExecutionMode)\"></i>\n                {{ selectedAgent.ExecutionMode }}\n              </span>\n            </div>\n            @if (getParentAgentName(selectedAgent)) {\n              <div class=\"detail-item\">\n                <span class=\"detail-label\">Parent Agent</span>\n                <span class=\"detail-value\">{{ getParentAgentName(selectedAgent) }}</span>\n              </div>\n            }\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Context Compression</span>\n              <span class=\"detail-value\">\n                @if (selectedAgent.EnableContextCompression) {\n                  <i class=\"fa-solid fa-check\" style=\"color: #10b981;\"></i> Enabled\n                } @else {\n                  <i class=\"fa-solid fa-times\" style=\"color: #ef4444;\"></i> Disabled\n                }\n              </span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Exposed as Action</span>\n              <span class=\"detail-value\">\n                @if (selectedAgent.ExposeAsAction) {\n                  <i class=\"fa-solid fa-check\" style=\"color: #10b981;\"></i> Yes\n                } @else {\n                  <i class=\"fa-solid fa-times\" style=\"color: #ef4444;\"></i> No\n                }\n              </span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Model Selection</span>\n              <span class=\"detail-value\">{{ selectedAgent.ModelSelectionMode }}</span>\n            </div>\n          </div>\n        </div>\n\n        <!-- Timestamps -->\n        <div class=\"detail-section\">\n          <h4 class=\"detail-section-title\">\n            <i class=\"fa-solid fa-clock\"></i>\n            Timestamps\n          </h4>\n          <div class=\"detail-grid\">\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Created</span>\n              <span class=\"detail-value\">{{ selectedAgent.__mj_CreatedAt | date:'medium' }}</span>\n            </div>\n            <div class=\"detail-item\">\n              <span class=\"detail-label\">Updated</span>\n              <span class=\"detail-value\">{{ selectedAgent.__mj_UpdatedAt | date:'medium' }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Panel Actions -->\n      <div class=\"detail-panel-actions\">\n        @if (selectedAgent.Status === 'Active') {\n          <button\n            type=\"button\"\n            class=\"detail-action-btn secondary\"\n            (click)=\"runAgent(selectedAgent)\">\n            <i class=\"fa-solid fa-play\"></i>\n            Run Agent\n          </button>\n        }\n        <button\n          type=\"button\"\n          class=\"detail-action-btn primary\"\n          (click)=\"openAgentFromPanel()\">\n          <i class=\"fa-solid fa-external-link-alt\"></i>\n          Open Full Record\n        </button>\n      </div>\n    }\n  </div>\n</mj-page-layout>\n\n<!-- AI Agent Test Harness - Now handled by service with minimize support -->", styles: ["/* ============================================\n   AI Agents Dashboard - World-Class Design\n   Clean white header with brand blue accents\n   ============================================ */\n\n/* Container is now provided by <mj-page-layout> */\n\n/* Tinted card background on the body \u2014 matches the original .agents-content\n   surface treatment so cards/lists sit on a lightly-tinted surface rather\n   than the page background. */\n:host mj-page-body {\n  background: var(--mj-bg-surface-card);\n}\n\n/* View toggle now provided by <mj-view-toggle>. */\n\n.control-btn {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  padding: 10px 18px;\n  border-radius: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.control-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.control-btn i {\n  font-size: 14px;\n}\n\n.control-btn.primary {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary-hover);\n  color: var(--mj-text-inverse);\n}\n\n.control-btn.primary:hover {\n  background: var(--mj-brand-primary-hover);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n\n.main-splitter {\n  flex: 1;\n  min-height: 0;\n}\n\n/* Splitter Styling */\nas-split {\n  background: transparent;\n}\n\n/* Filter Panel Styles - used by child component */\n\n/* Agents Content */\n\n/* Grid View */\n.agents-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));\n  gap: 24px;\n}\n\n.agent-card {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);\n  border: 1px solid var(--mj-border-default);\n  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n  position: relative;\n}\n\n.agent-card::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 4px;\n  background: var(--mj-brand-primary);\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.agent-card:hover {\n  box-shadow: 0 20px 40px -15px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  transform: translateY(-4px);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.agent-card:hover::before {\n  opacity: 1;\n}\n\n.agent-card.expanded {\n  box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  border-color: var(--mj-brand-accent);\n}\n\n.agent-card.expanded::before {\n  opacity: 1;\n}\n\n.card-header {\n  padding: 24px;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  cursor: pointer;\n  user-select: none;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  transition: background-color 0.2s;\n}\n\n.card-header:hover {\n  background-color: var(--mj-bg-surface-hover);\n}\n\n.agent-info {\n  display: flex;\n  gap: 18px;\n  flex: 1;\n}\n\n.agent-icon {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.agent-icon i {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n.agent-icon .agent-logo {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 14px;\n}\n\n.agent-details {\n  flex: 1;\n  min-width: 0;\n}\n\n.agent-name {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  margin-bottom: 8px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.agent-meta {\n  display: flex;\n  gap: 14px;\n  flex-wrap: wrap;\n}\n\n.meta-item {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-bg-surface-sunken);\n  padding: 4px 10px;\n  border-radius: 6px;\n}\n\n.meta-item i {\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n}\n\n.meta-item.status-active {\n  color: var(--mj-color-success-700);\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n}\n\n.meta-item.status-active i {\n  color: var(--mj-color-success-700);\n}\n\n.meta-item.status-pending {\n  color: var(--mj-color-warning-700);\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n}\n\n.meta-item.status-pending i {\n  color: var(--mj-color-warning-700);\n}\n\n.meta-item.status-disabled,\n.meta-item.status-inactive {\n  color: var(--mj-text-muted);\n  background: var(--mj-border-default);\n}\n\n.meta-item.status-disabled i,\n.meta-item.status-inactive i {\n  color: var(--mj-text-muted);\n}\n\n/* Type Badge - for Agent Type display */\n.type-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 600;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.type-badge i {\n  font-size: 11px;\n  color: var(--mj-brand-primary);\n}\n\n/* Type badge in meta context (grid view) */\n.meta-item.type-badge {\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.meta-item.type-badge i {\n  color: var(--mj-brand-primary);\n}\n\n.expand-icon {\n  font-size: 16px;\n  color: var(--mj-text-disabled);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  padding: 8px;\n  border-radius: 8px;\n}\n\n.expand-icon:hover {\n  color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.expand-icon.rotated {\n  transform: rotate(180deg);\n  color: var(--mj-brand-primary);\n}\n\n.card-body {\n  padding: 0 24px 24px 24px;\n}\n\n.agent-description {\n  margin: 18px 0 0 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: var(--mj-text-muted);\n}\n\n.agent-description.text-muted {\n  font-style: italic;\n  color: var(--mj-text-disabled);\n}\n\n/* Expanded Content */\n.expanded-content {\n  margin-top: 20px;\n  padding-top: 20px;\n  border-top: 1px solid var(--mj-border-default);\n  animation: slideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-12px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.agent-stats {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n  gap: 18px;\n}\n\n.stat-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 16px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 12px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.stat-label {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.stat-value {\n  font-size: 15px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n}\n\n/* Card Actions */\n.card-actions {\n  padding: 18px 24px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 12px;\n  justify-content: flex-end;\n}\n\n.action-btn {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  padding: 10px 20px;\n  border-radius: 10px;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.action-btn:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n}\n\n.action-btn-primary {\n  background: var(--mj-brand-primary);\n  border-color: transparent;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.action-btn-primary:hover {\n  background: var(--mj-brand-primary-hover);\n  transform: translateY(-2px);\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n/* List View */\n.agents-list {\n  background: var(--mj-bg-surface);\n  border-radius: 16px;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);\n  border: 1px solid var(--mj-border-default);\n  overflow: hidden;\n}\n\n.agents-table {\n  width: 100%;\n  border-collapse: collapse;\n}\n\n.agents-table thead {\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n}\n\n.agents-table th {\n  padding: 16px 20px;\n  text-align: left;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.2s ease;\n}\n\n.agents-table th:hover {\n  background: var(--mj-border-default);\n  color: var(--mj-brand-primary);\n}\n\n.agents-table th.sorted {\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.sort-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.sort-icon {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  transition: all 0.2s ease;\n}\n\n.agents-table th:hover .sort-icon {\n  color: var(--mj-brand-primary);\n}\n\n.agents-table th.sorted .sort-icon {\n  color: var(--mj-brand-primary);\n}\n\n.agents-table th.sorted.desc .sort-icon {\n  transform: rotate(180deg);\n}\n\n.agents-table tbody tr {\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  transition: background-color 0.2s;\n}\n\n.agents-table tbody tr:last-child {\n  border-bottom: none;\n}\n\n.agents-table tbody tr:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n.agents-table td {\n  padding: 18px 20px;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n}\n\n.agent-name-cell {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n}\n\n.agent-icon-small {\n  width: 42px;\n  height: 42px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.agent-icon-small i {\n  color: var(--mj-text-inverse);\n  font-size: 18px;\n}\n\n.agent-icon-small .agent-logo-small {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 10px;\n}\n\n.agent-name-cell .agent-name {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 0;\n  white-space: normal;\n}\n\n.agent-description-small {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-top: 4px;\n  line-height: 1.4;\n}\n\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.status-badge i {\n  font-size: 8px;\n}\n\n.status-badge.status-active {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-success-700);\n}\n\n.status-badge.status-pending {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-color-warning-700);\n}\n\n.status-badge.status-disabled,\n.status-badge.status-inactive {\n  background: var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n.status-badge.status-unknown {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n.execution-mode {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--mj-text-secondary);\n}\n\n.execution-mode i {\n  color: var(--mj-brand-primary);\n}\n\n.table-actions {\n  display: flex;\n  gap: 10px;\n}\n\n.action-btn-small {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  padding: 8px 12px;\n  border-radius: 8px;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.action-btn-small:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.action-btn-small.primary {\n  background: var(--mj-brand-primary);\n  border-color: transparent;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.action-btn-small.primary:hover {\n  background: var(--mj-brand-primary-hover);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n/* Empty State */\n.empty-state {\n  text-align: center;\n  padding: 100px 32px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state i {\n  font-size: 80px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  margin-bottom: 28px;\n  display: block;\n}\n\n.empty-state h3 {\n  color: var(--mj-text-primary);\n  font-size: 24px;\n  font-weight: 700;\n  margin: 0 0 12px 0;\n}\n\n.empty-state p {\n  font-size: 16px;\n  line-height: 1.6;\n  max-width: 420px;\n  margin: 0 auto 32px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state-btn {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: none;\n  padding: 14px 28px;\n  border-radius: 12px;\n  font-size: 15px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  box-shadow: 0 4px 15px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.empty-state-btn:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 25px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n/* Loading State */\n.loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 400px;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .dashboard-header {\n    flex-direction: column;\n    gap: 16px;\n    align-items: stretch;\n    padding: 16px 20px;\n  }\n\n  .header-info {\n    flex-wrap: wrap;\n    justify-content: center;\n  }\n\n  .header-controls {\n    justify-content: center;\n  }\n\n  .agents-grid {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n\n  .agent-stats {\n    grid-template-columns: 1fr;\n  }\n\n  .card-header {\n    padding: 18px;\n  }\n\n  .card-body {\n    padding: 0 18px 18px 18px;\n  }\n\n  .card-actions {\n    padding: 14px 18px;\n    flex-wrap: wrap;\n  }\n}\n\n/* =============================================\n   Detail Panel - Slide-in Overlay\n   ============================================= */\n\n.detail-panel-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.4);\n  backdrop-filter: blur(4px);\n  z-index: 1000;\n  animation: fadeIn 0.25s ease-out;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.detail-panel {\n  position: fixed;\n  top: 0;\n  right: -480px;\n  width: 480px;\n  height: 100vh;\n  background: var(--mj-bg-surface);\n  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);\n  z-index: 1001;\n  display: flex;\n  flex-direction: column;\n  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n  overflow: hidden;\n}\n\n.detail-panel.visible {\n  right: 0;\n}\n\n/* Detail Panel Header */\n.detail-panel-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.detail-panel-title {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n}\n\n.detail-icon {\n  width: 56px;\n  height: 56px;\n  border-radius: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  background: var(--mj-brand-primary);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.detail-icon i {\n  color: var(--mj-text-inverse);\n  font-size: 24px;\n}\n\n.detail-icon .detail-logo {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 14px;\n}\n\n.detail-title-info h3 {\n  margin: 0 0 4px 0;\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n}\n\n.detail-subtitle {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  font-weight: 500;\n}\n\n.detail-panel-close {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  color: var(--mj-text-muted);\n}\n\n.detail-panel-close:hover {\n  background: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-primary);\n}\n\n/* Detail Panel Content */\n.detail-panel-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 24px;\n}\n\n.detail-section {\n  margin-bottom: 28px;\n}\n\n.detail-section:last-child {\n  margin-bottom: 0;\n}\n\n.detail-badges {\n  display: flex;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.feature-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 14px;\n  border-radius: 20px;\n  font-size: 12px;\n  font-weight: 600;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary-hover);\n}\n\n.feature-badge i {\n  font-size: 11px;\n}\n\n.detail-section-title {\n  margin: 0 0 16px 0;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.detail-section-title i {\n  color: var(--mj-brand-primary);\n  font-size: 14px;\n}\n\n.detail-description {\n  margin: 0;\n  font-size: 14px;\n  line-height: 1.7;\n  color: var(--mj-text-secondary);\n}\n\n.detail-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 16px;\n}\n\n.detail-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 14px;\n  background: var(--mj-bg-surface-card);\n  border-radius: 12px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.detail-label {\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.detail-value {\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.detail-value i {\n  font-size: 13px;\n}\n\n.detail-code-block {\n  background: var(--mj-text-primary);\n  color: var(--mj-border-default);\n  padding: 16px;\n  border-radius: 10px;\n  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n  font-size: 13px;\n  line-height: 1.6;\n  overflow-x: auto;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n/* Detail Panel Actions */\n.detail-panel-actions {\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-default);\n  display: flex;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n.detail-action-btn {\n  flex: 1;\n  padding: 14px 20px;\n  border-radius: 12px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n}\n\n.detail-action-btn.secondary {\n  background: var(--mj-bg-surface);\n  border: 2px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\n}\n\n.detail-action-btn.secondary:hover {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-hover);\n}\n\n.detail-action-btn.primary {\n  background: var(--mj-brand-primary);\n  border: 2px solid transparent;\n  color: var(--mj-text-inverse);\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.detail-action-btn.primary:hover {\n  background: var(--mj-brand-primary-hover);\n  transform: translateY(-1px);\n  box-shadow: 0 6px 16px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n}\n\n/* Detail Panel Responsive */\n@media (max-width: 520px) {\n  .detail-panel {\n    width: 100%;\n    right: -100%;\n  }\n\n  .detail-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n/* Search Highlight */\n:host ::ng-deep .search-highlight,\n.search-highlight {\n  background-color: color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n  padding: 1px 2px;\n  border-radius: 2px;\n  font-weight: inherit;\n}\n\n/* ============================================\n   Tree View - Mac Finder Style\n   ============================================ */\n\n.agents-tree {\n  padding: 8px 16px;\n  height: 100%;\n  overflow: auto;\n}\n"] }]
     }], () => [{ type: i1.AITestHarnessDialogService }, { type: i2.CreateAgentService }, { type: i0.ChangeDetectorRef }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AgentConfigurationComponent, { className: "AgentConfigurationComponent", filePath: "src/AI/components/agents/agent-configuration.component.ts", lineNumber: 48 }); })();
 //# sourceMappingURL=agent-configuration.component.js.map