@memberjunction/ng-dashboards 5.34.0 → 5.35.0

package/dist/Actions/components/explorer/action-explorer.component.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { Component, ChangeDetectionStrategy, ViewChild } from '@angular/core';
 import { Subject } from 'rxjs';
-import { takeUntil, debounceTime, combineLatestWith } from 'rxjs/operators';
+import { takeUntil, debounceTime, distinctUntilChanged, combineLatestWith } from 'rxjs/operators';
 import { CompositeKey, LogError, RunView } from '@memberjunction/core';
 import { ActionEngineBase } from '@memberjunction/actions-base';
 import { RegisterClass, UUIDsEqual } from '@memberjunction/global';
@@ -19,139 +19,262 @@ import * as i2 from "@memberjunction/ng-ui-components";
 import * as i3 from "@memberjunction/ng-actions";
 import * as i4 from "@memberjunction/ng-shared-generic";
 import * as i5 from "./action-tree-panel.component";
-import * as i6 from "./action-toolbar.component";
-import * as i7 from "./action-breadcrumb.component";
-import * as i8 from "./action-card.component";
-import * as i9 from "./action-list-item.component";
-import * as i10 from "./new-category-panel.component";
-import * as i11 from "./new-action-panel.component";
-const _forTrack0 = ($index, $item) => $item.ID;
-function ActionExplorerComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 1);
-    i0.ɵɵelement(1, "mj-loading", 11);
+import * as i6 from "./action-breadcrumb.component";
+import * as i7 from "./action-card.component";
+import * as i8 from "./action-list-item.component";
+import * as i9 from "./new-category-panel.component";
+import * as i10 from "./new-action-panel.component";
+const _forTrack0 = ($index, $item) => $item.value;
+const _forTrack1 = ($index, $item) => $item.field;
+const _forTrack2 = ($index, $item) => $item.ID;
+function ActionExplorerComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 31);
+    i0.ɵɵlistener("click", function ActionExplorerComponent_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.StateService.setStatusFilter([])); });
+    i0.ɵɵtext(1, "Clear");
     i0.ɵɵelementEnd();
 } }
-function ActionExplorerComponent_Conditional_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelement(0, "i", 12);
+function ActionExplorerComponent_For_13_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "label", 32)(1, "input", 33);
+    i0.ɵɵlistener("change", function ActionExplorerComponent_For_13_Template_input_change_1_listener() { const status_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleStatus(status_r4.value)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(2, "span", 34);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const status_r4 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("selected", ctx_r1.isStatusSelected(status_r4.value));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("checked", ctx_r1.isStatusSelected(status_r4.value));
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("data-status", status_r4.value);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", status_r4.label, " ");
+} }
+function ActionExplorerComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 31);
+    i0.ɵɵlistener("click", function ActionExplorerComponent_Conditional_18_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.StateService.setTypeFilter([])); });
+    i0.ɵɵtext(1, "Clear");
+    i0.ɵɵelementEnd();
+} }
+function ActionExplorerComponent_For_21_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "label", 32)(1, "input", 33);
+    i0.ɵɵlistener("change", function ActionExplorerComponent_For_21_Template_input_change_1_listener() { const type_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleType(type_r7.value)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(2, "i");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const type_r7 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("selected", ctx_r1.isTypeSelected(type_r7.value));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("checked", ctx_r1.isTypeSelected(type_r7.value));
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(type_r7.icon);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", type_r7.label, " ");
+} }
+function ActionExplorerComponent_Conditional_27_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 38);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassMap(ctx_r1.SortDirection === "asc" ? "fa-solid fa-arrow-up" : "fa-solid fa-arrow-down");
+} }
+function ActionExplorerComponent_Conditional_27_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 36);
+    i0.ɵɵlistener("click", function ActionExplorerComponent_Conditional_27_For_2_Template_button_click_0_listener() { const option_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setSortField(option_r9.field)); });
+    i0.ɵɵelement(1, "i");
+    i0.ɵɵtext(2);
+    i0.ɵɵconditionalCreate(3, ActionExplorerComponent_Conditional_27_For_2_Conditional_3_Template, 1, 2, "i", 37);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const option_r9 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("selected", ctx_r1.SortField === option_r9.field);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(option_r9.icon);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", option_r9.label, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.SortField === option_r9.field ? 3 : -1);
+} }
+function ActionExplorerComponent_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 12);
+    i0.ɵɵrepeaterCreate(1, ActionExplorerComponent_Conditional_27_For_2_Template, 4, 6, "button", 35, _forTrack1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.SortOptions);
+} }
+function ActionExplorerComponent_Conditional_35_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 40);
+    i0.ɵɵlistener("click", function ActionExplorerComponent_Conditional_35_For_2_Template_span_click_0_listener() { const status_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleStatus(status_r11)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelement(2, "i", 41);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const status_r11 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" Status: ", status_r11, " ");
+} }
+function ActionExplorerComponent_Conditional_35_For_4_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 40);
+    i0.ɵɵlistener("click", function ActionExplorerComponent_Conditional_35_For_4_Template_span_click_0_listener() { const type_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleType(type_r13)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelement(2, "i", 41);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const type_r13 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" Type: ", type_r13 === "Generated" ? "AI Generated" : type_r13, " ");
+} }
+function ActionExplorerComponent_Conditional_35_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 19);
+    i0.ɵɵrepeaterCreate(1, ActionExplorerComponent_Conditional_35_For_2_Template, 3, 1, "span", 39, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(3, ActionExplorerComponent_Conditional_35_For_4_Template, 3, 1, "span", 39, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.Filters.statuses);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r1.Filters.types);
+} }
+function ActionExplorerComponent_Conditional_38_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 22);
+    i0.ɵɵelement(1, "mj-loading", 42);
+    i0.ɵɵelementEnd();
+} }
+function ActionExplorerComponent_Conditional_43_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelement(0, "i", 43);
     i0.ɵɵelementStart(1, "h3");
     i0.ɵɵtext(2, "No actions match your filters");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "p");
     i0.ɵɵtext(4, "Try adjusting your search or filter criteria");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 13);
-    i0.ɵɵlistener("click", function ActionExplorerComponent_Conditional_7_Conditional_1_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.StateService.clearFilters(); return i0.ɵɵresetView(ctx_r1.StateService.setSelectedCategoryId("all")); });
-    i0.ɵɵelement(6, "i", 14);
+    i0.ɵɵelementStart(5, "button", 44);
+    i0.ɵɵlistener("click", function ActionExplorerComponent_Conditional_43_Conditional_1_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.StateService.clearFilters(); return i0.ɵɵresetView(ctx_r1.StateService.setSelectedCategoryId("all")); });
+    i0.ɵɵelement(6, "i", 41);
     i0.ɵɵtext(7, " Clear All Filters ");
     i0.ɵɵelementEnd();
 } }
-function ActionExplorerComponent_Conditional_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelement(0, "i", 15);
+function ActionExplorerComponent_Conditional_43_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelement(0, "i", 45);
     i0.ɵɵelementStart(1, "h3");
     i0.ɵɵtext(2, "No actions yet");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "p");
     i0.ɵɵtext(4, "Create your first action to get started");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 16);
-    i0.ɵɵlistener("click", function ActionExplorerComponent_Conditional_7_Conditional_2_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onNewAction()); });
-    i0.ɵɵelement(6, "i", 17);
+    i0.ɵɵelementStart(5, "button", 46);
+    i0.ɵɵlistener("click", function ActionExplorerComponent_Conditional_43_Conditional_2_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onNewAction()); });
+    i0.ɵɵelement(6, "i", 16);
     i0.ɵɵtext(7, " Create Action ");
     i0.ɵɵelementEnd();
 } }
-function ActionExplorerComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 7);
-    i0.ɵɵconditionalCreate(1, ActionExplorerComponent_Conditional_7_Conditional_1_Template, 8, 0)(2, ActionExplorerComponent_Conditional_7_Conditional_2_Template, 8, 0);
+function ActionExplorerComponent_Conditional_43_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 27);
+    i0.ɵɵconditionalCreate(1, ActionExplorerComponent_Conditional_43_Conditional_1_Template, 8, 0)(2, ActionExplorerComponent_Conditional_43_Conditional_2_Template, 8, 0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.StateService.hasActiveFilters() || ctx_r1.SelectedCategoryId !== "all" ? 1 : 2);
 } }
-function ActionExplorerComponent_Conditional_8_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-action-card", 22);
-    i0.ɵɵlistener("ActionClick", function ActionExplorerComponent_Conditional_8_Conditional_0_For_2_Template_mj_action_card_ActionClick_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onActionClick($event)); })("EditClick", function ActionExplorerComponent_Conditional_8_Conditional_0_For_2_Template_mj_action_card_EditClick_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onActionEdit($event)); })("RunClick", function ActionExplorerComponent_Conditional_8_Conditional_0_For_2_Template_mj_action_card_RunClick_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onActionRun($event)); })("CategoryClick", function ActionExplorerComponent_Conditional_8_Conditional_0_For_2_Template_mj_action_card_CategoryClick_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onCategoryClick($event)); });
+function ActionExplorerComponent_Conditional_44_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-action-card", 51);
+    i0.ɵɵlistener("ActionClick", function ActionExplorerComponent_Conditional_44_Conditional_0_For_2_Template_mj_action_card_ActionClick_0_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onActionClick($event)); })("EditClick", function ActionExplorerComponent_Conditional_44_Conditional_0_For_2_Template_mj_action_card_EditClick_0_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onActionEdit($event)); })("RunClick", function ActionExplorerComponent_Conditional_44_Conditional_0_For_2_Template_mj_action_card_RunClick_0_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onActionRun($event)); })("CategoryClick", function ActionExplorerComponent_Conditional_44_Conditional_0_For_2_Template_mj_action_card_CategoryClick_0_listener($event) { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onCategoryClick($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const action_r5 = ctx.$implicit;
+    const action_r17 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("Action", action_r5)("Categories", ctx_r1.CategoriesMap);
+    i0.ɵɵproperty("Action", action_r17)("Categories", ctx_r1.CategoriesMap);
 } }
-function ActionExplorerComponent_Conditional_8_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 18);
-    i0.ɵɵrepeaterCreate(1, ActionExplorerComponent_Conditional_8_Conditional_0_For_2_Template, 1, 2, "mj-action-card", 21, _forTrack0);
+function ActionExplorerComponent_Conditional_44_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 47);
+    i0.ɵɵrepeaterCreate(1, ActionExplorerComponent_Conditional_44_Conditional_0_For_2_Template, 1, 2, "mj-action-card", 50, _forTrack2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.FilteredActions);
 } }
-function ActionExplorerComponent_Conditional_8_Conditional_1_For_17_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-action-list-item", 33);
-    i0.ɵɵlistener("ActionClick", function ActionExplorerComponent_Conditional_8_Conditional_1_For_17_Template_mj_action_list_item_ActionClick_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onActionClick($event)); })("EditClick", function ActionExplorerComponent_Conditional_8_Conditional_1_For_17_Template_mj_action_list_item_EditClick_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onActionEdit($event)); })("RunClick", function ActionExplorerComponent_Conditional_8_Conditional_1_For_17_Template_mj_action_list_item_RunClick_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onActionRun($event)); })("CategoryClick", function ActionExplorerComponent_Conditional_8_Conditional_1_For_17_Template_mj_action_list_item_CategoryClick_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onCategoryClick($event)); });
+function ActionExplorerComponent_Conditional_44_Conditional_1_For_17_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-action-list-item", 62);
+    i0.ɵɵlistener("ActionClick", function ActionExplorerComponent_Conditional_44_Conditional_1_For_17_Template_mj_action_list_item_ActionClick_0_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onActionClick($event)); })("EditClick", function ActionExplorerComponent_Conditional_44_Conditional_1_For_17_Template_mj_action_list_item_EditClick_0_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onActionEdit($event)); })("RunClick", function ActionExplorerComponent_Conditional_44_Conditional_1_For_17_Template_mj_action_list_item_RunClick_0_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onActionRun($event)); })("CategoryClick", function ActionExplorerComponent_Conditional_44_Conditional_1_For_17_Template_mj_action_list_item_CategoryClick_0_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onCategoryClick($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const action_r7 = ctx.$implicit;
+    const action_r19 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("Action", action_r7)("Categories", ctx_r1.CategoriesMap)("IsCompact", false);
+    i0.ɵɵproperty("Action", action_r19)("Categories", ctx_r1.CategoriesMap)("IsCompact", false);
 } }
-function ActionExplorerComponent_Conditional_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 19)(1, "div", 23);
-    i0.ɵɵelement(2, "div", 24);
-    i0.ɵɵelementStart(3, "div", 25);
+function ActionExplorerComponent_Conditional_44_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 48)(1, "div", 52);
+    i0.ɵɵelement(2, "div", 53);
+    i0.ɵɵelementStart(3, "div", 54);
     i0.ɵɵtext(4, "Name");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 26);
+    i0.ɵɵelementStart(5, "div", 55);
     i0.ɵɵtext(6, "Category");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 27);
+    i0.ɵɵelementStart(7, "div", 56);
     i0.ɵɵtext(8, "Status");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 28);
+    i0.ɵɵelementStart(9, "div", 57);
     i0.ɵɵtext(10, "Type");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 29);
+    i0.ɵɵelementStart(11, "div", 58);
     i0.ɵɵtext(12, "Params");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "div", 30);
+    i0.ɵɵelementStart(13, "div", 59);
     i0.ɵɵtext(14, "Updated");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(15, "div", 31);
+    i0.ɵɵelement(15, "div", 60);
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(16, ActionExplorerComponent_Conditional_8_Conditional_1_For_17_Template, 1, 3, "mj-action-list-item", 32, _forTrack0);
+    i0.ɵɵrepeaterCreate(16, ActionExplorerComponent_Conditional_44_Conditional_1_For_17_Template, 1, 3, "mj-action-list-item", 61, _forTrack2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(16);
     i0.ɵɵrepeater(ctx_r1.FilteredActions);
 } }
-function ActionExplorerComponent_Conditional_8_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-action-list-item", 33);
-    i0.ɵɵlistener("ActionClick", function ActionExplorerComponent_Conditional_8_Conditional_2_For_2_Template_mj_action_list_item_ActionClick_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onActionClick($event)); })("EditClick", function ActionExplorerComponent_Conditional_8_Conditional_2_For_2_Template_mj_action_list_item_EditClick_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onActionEdit($event)); })("RunClick", function ActionExplorerComponent_Conditional_8_Conditional_2_For_2_Template_mj_action_list_item_RunClick_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onActionRun($event)); })("CategoryClick", function ActionExplorerComponent_Conditional_8_Conditional_2_For_2_Template_mj_action_list_item_CategoryClick_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onCategoryClick($event)); });
+function ActionExplorerComponent_Conditional_44_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-action-list-item", 62);
+    i0.ɵɵlistener("ActionClick", function ActionExplorerComponent_Conditional_44_Conditional_2_For_2_Template_mj_action_list_item_ActionClick_0_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onActionClick($event)); })("EditClick", function ActionExplorerComponent_Conditional_44_Conditional_2_For_2_Template_mj_action_list_item_EditClick_0_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onActionEdit($event)); })("RunClick", function ActionExplorerComponent_Conditional_44_Conditional_2_For_2_Template_mj_action_list_item_RunClick_0_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onActionRun($event)); })("CategoryClick", function ActionExplorerComponent_Conditional_44_Conditional_2_For_2_Template_mj_action_list_item_CategoryClick_0_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onCategoryClick($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const action_r9 = ctx.$implicit;
+    const action_r21 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("Action", action_r9)("Categories", ctx_r1.CategoriesMap)("IsCompact", true);
+    i0.ɵɵproperty("Action", action_r21)("Categories", ctx_r1.CategoriesMap)("IsCompact", true);
 } }
-function ActionExplorerComponent_Conditional_8_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 20);
-    i0.ɵɵrepeaterCreate(1, ActionExplorerComponent_Conditional_8_Conditional_2_For_2_Template, 1, 3, "mj-action-list-item", 32, _forTrack0);
+function ActionExplorerComponent_Conditional_44_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 49);
+    i0.ɵɵrepeaterCreate(1, ActionExplorerComponent_Conditional_44_Conditional_2_For_2_Template, 1, 3, "mj-action-list-item", 61, _forTrack2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r1.FilteredActions);
 } }
-function ActionExplorerComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, ActionExplorerComponent_Conditional_8_Conditional_0_Template, 3, 0, "div", 18);
-    i0.ɵɵconditionalCreate(1, ActionExplorerComponent_Conditional_8_Conditional_1_Template, 18, 0, "div", 19);
-    i0.ɵɵconditionalCreate(2, ActionExplorerComponent_Conditional_8_Conditional_2_Template, 3, 0, "div", 20);
+function ActionExplorerComponent_Conditional_44_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, ActionExplorerComponent_Conditional_44_Conditional_0_Template, 3, 0, "div", 47);
+    i0.ɵɵconditionalCreate(1, ActionExplorerComponent_Conditional_44_Conditional_1_Template, 18, 0, "div", 48);
+    i0.ɵɵconditionalCreate(2, ActionExplorerComponent_Conditional_44_Conditional_2_Template, 3, 0, "div", 49);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵconditional(ctx_r1.ViewMode === "card" ? 0 : -1);
@@ -160,10 +283,10 @@ function ActionExplorerComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.ViewMode === "compact" ? 2 : -1);
 } }
-function ActionExplorerComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-action-test-harness-dialog", 34);
-    i0.ɵɵlistener("Close", function ActionExplorerComponent_Conditional_11_Template_mj_action_test_harness_dialog_Close_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnRunDialogClose()); });
+function ActionExplorerComponent_Conditional_47_Template(rf, ctx) { if (rf & 1) {
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-action-test-harness-dialog", 63);
+    i0.ɵɵlistener("Close", function ActionExplorerComponent_Conditional_47_Template_mj_action_test_harness_dialog_Close_0_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnRunDialogClose()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -179,13 +302,46 @@ let ActionExplorerComponent = class ActionExplorerComponent extends BaseResource
     Categories = [];
     CategoriesMap = new Map();
     ViewMode = 'card';
+    SortField = 'name';
+    SortDirection = 'asc';
+    Filters = {
+        searchTerm: '',
+        statuses: [],
+        types: [],
+        approvalStatuses: [],
+        hasExecutions: null
+    };
+    ShowSortDropdown = false;
     SelectedCategoryId = 'all';
     NewCategoryParentId = null;
     // Run dialog state
     IsRunDialogOpen = false;
     SelectedActionForRun = null;
     SelectedActionParams = [];
+    // ───── Toolbar option arrays + helpers (consolidated from former mj-action-toolbar) ─────
+    ViewToggleOptions = [
+        { key: 'card', icon: 'fa-solid fa-grip', title: 'Card view' },
+        { key: 'list', icon: 'fa-solid fa-list', title: 'List view' },
+        { key: 'compact', icon: 'fa-solid fa-bars', title: 'Compact view' }
+    ];
+    SortOptions = [
+        { field: 'name', label: 'Name', icon: 'fa-solid fa-font' },
+        { field: 'updated', label: 'Last Updated', icon: 'fa-solid fa-clock' },
+        { field: 'status', label: 'Status', icon: 'fa-solid fa-circle-check' },
+        { field: 'type', label: 'Type', icon: 'fa-solid fa-tag' },
+        { field: 'category', label: 'Category', icon: 'fa-solid fa-folder' }
+    ];
+    StatusOptions = [
+        { value: 'Active', label: 'Active' },
+        { value: 'Pending', label: 'Pending' },
+        { value: 'Disabled', label: 'Disabled' }
+    ];
+    TypeOptions = [
+        { value: 'Generated', label: 'AI Generated', icon: 'fa-solid fa-robot' },
+        { value: 'Custom', label: 'Custom', icon: 'fa-solid fa-code' }
+    ];
     destroy$ = new Subject();
+    searchInput$ = new Subject();
     constructor(StateService, cdr) {
         super();
         this.StateService = StateService;
@@ -194,10 +350,16 @@ let ActionExplorerComponent = class ActionExplorerComponent extends BaseResource
     ngOnInit() {
         super.ngOnInit();
         this.subscribeToState();
+        this.setupSearchDebounce();
         this.applyQueryParams(this.GetQueryParams());
         this.StateService.loadSavedState();
         this.loadData();
     }
+    setupSearchDebounce() {
+        this.searchInput$.pipe(debounceTime(300), distinctUntilChanged(), takeUntil(this.destroy$)).subscribe(term => {
+            this.StateService.setSearchTerm(term);
+        });
+    }
     ngOnDestroy() {
         super.ngOnDestroy();
         this.destroy$.next();
@@ -217,7 +379,10 @@ let ActionExplorerComponent = class ActionExplorerComponent extends BaseResource
             this.cdr.markForCheck();
         });
         // Subscribe to filter and sort changes
-        this.StateService.Filters$.pipe(combineLatestWith(this.StateService.SortConfig$), debounceTime(50), takeUntil(this.destroy$)).subscribe(() => {
+        this.StateService.Filters$.pipe(combineLatestWith(this.StateService.SortConfig$), debounceTime(50), takeUntil(this.destroy$)).subscribe(([filters, sort]) => {
+            this.Filters = filters;
+            this.SortField = sort.field;
+            this.SortDirection = sort.direction;
             this.applyFilters();
             this.UpdateQueryParams(this.StateService.buildQueryParams());
             this.cdr.markForCheck();
@@ -421,6 +586,65 @@ let ActionExplorerComponent = class ActionExplorerComponent extends BaseResource
         // Refresh data to include new action
         await this.loadData();
     }
+    // ───── Toolbar handlers (consolidated from former mj-action-toolbar) ─────
+    onSearchInput(term) {
+        this.searchInput$.next(term);
+    }
+    clearSearch() {
+        this.StateService.setSearchTerm('');
+    }
+    setViewMode(mode) {
+        this.StateService.setViewMode(mode);
+    }
+    setSortField(field) {
+        this.StateService.setSortField(field);
+        this.ShowSortDropdown = false;
+    }
+    toggleStatus(status) {
+        const current = [...this.Filters.statuses];
+        const i = current.indexOf(status);
+        if (i >= 0)
+            current.splice(i, 1);
+        else
+            current.push(status);
+        this.StateService.setStatusFilter(current);
+    }
+    toggleType(type) {
+        const current = [...this.Filters.types];
+        const i = current.indexOf(type);
+        if (i >= 0)
+            current.splice(i, 1);
+        else
+            current.push(type);
+        this.StateService.setTypeFilter(current);
+    }
+    isStatusSelected(status) {
+        return this.Filters.statuses.includes(status);
+    }
+    isTypeSelected(type) {
+        return this.Filters.types.includes(type);
+    }
+    clearFilters() {
+        this.StateService.clearFilters();
+    }
+    hasActiveFilters() {
+        return this.StateService.hasActiveFilters();
+    }
+    /** Active filter count for the popover badge — counts only Status + Type
+     *  (searchTerm has its own search input, not part of the popover). */
+    get StatusTypeFilterCount() {
+        return this.Filters.statuses.length + this.Filters.types.length;
+    }
+    toggleSortDropdown() {
+        this.ShowSortDropdown = !this.ShowSortDropdown;
+    }
+    getSortLabel() {
+        const option = this.SortOptions.find(o => o.field === this.SortField);
+        return option?.label || 'Sort';
+    }
+    getSortIcon() {
+        return this.SortDirection === 'asc' ? 'fa-solid fa-arrow-up-short-wide' : 'fa-solid fa-arrow-down-wide-short';
+    }
     async GetResourceDisplayName(data) {
         return 'Action Explorer';
     }
@@ -433,47 +657,117 @@ let ActionExplorerComponent = class ActionExplorerComponent extends BaseResource
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.TreePanel = _t.first);
-        } }, standalone: false, features: [i0.ɵɵProvidersFeature([ActionExplorerStateService]), i0.ɵɵInheritDefinitionFeature], decls: 12, vars: 12, consts: [[1, "action-explorer"], [1, "loading-overlay"], [3, "CategorySelected", "NewCategoryClick", "EditCategoryClick", "Categories", "Actions"], [1, "explorer-main"], [3, "NewActionClick", "RefreshClick", "TotalCount", "FilteredCount"], [3, "CategorySelect", "SelectedCategoryId", "Categories"], [1, "explorer-content"], [1, "empty-state"], [3, "CategoryCreated", "Close", "Categories", "PreselectedParentId"], [3, "ActionCreated", "Categories"], [3, "Action", "ActionParams", "IsOpen"], ["text", "Loading actions...", "size", "medium"], [1, "fa-solid", "fa-filter-circle-xmark"], ["mjButton", "", "variant", "outline", 3, "click"], [1, "fa-solid", "fa-times"], [1, "fa-solid", "fa-bolt"], ["mjButton", "", "variant", "primary", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "card-grid"], [1, "list-view"], [1, "compact-view"], [3, "Action", "Categories"], [3, "ActionClick", "EditClick", "RunClick", "CategoryClick", "Action", "Categories"], [1, "list-header"], [1, "header-icon"], [1, "header-name"], [1, "header-category"], [1, "header-status"], [1, "header-type"], [1, "header-params"], [1, "header-updated"], [1, "header-actions"], [3, "Action", "Categories", "IsCompact"], [3, "ActionClick", "EditClick", "RunClick", "CategoryClick", "Action", "Categories", "IsCompact"], [3, "Close", "Action", "ActionParams", "IsOpen"]], template: function ActionExplorerComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵconditionalCreate(1, ActionExplorerComponent_Conditional_1_Template, 2, 0, "div", 1);
-            i0.ɵɵelementStart(2, "mj-action-tree-panel", 2);
-            i0.ɵɵlistener("CategorySelected", function ActionExplorerComponent_Template_mj_action_tree_panel_CategorySelected_2_listener($event) { return ctx.onCategorySelect($event); })("NewCategoryClick", function ActionExplorerComponent_Template_mj_action_tree_panel_NewCategoryClick_2_listener($event) { return ctx.onNewCategory($event); })("EditCategoryClick", function ActionExplorerComponent_Template_mj_action_tree_panel_EditCategoryClick_2_listener($event) { return ctx.onEditCategory($event); });
+        } }, standalone: false, features: [i0.ɵɵProvidersFeature([ActionExplorerStateService]), i0.ɵɵInheritDefinitionFeature], decls: 48, vars: 28, consts: [["Title", "Action Explorer", "Icon", "fa-solid fa-folder-tree", "Subtitle", "Browse, organize, and run all configured actions"], ["meta", ""], ["Label", "actions", 3, "Count", "Total"], ["actions", ""], [3, "ClearAllRequested", "ActiveCount", "ShowClearAll"], [1, "dropdown-section"], [1, "section-header"], ["mjButton", "", "variant", "flat", "size", "sm"], [1, "filter-options"], [1, "filter-option", 3, "selected"], [1, "dropdown-container", 3, "clickOutside"], ["mjButton", "", "variant", "secondary", "size", "sm", 3, "click"], [1, "dropdown-menu", "sort-menu"], [3, "KeyChange", "Options", "ActiveKey"], [3, "Clicked"], ["mjButton", "", "variant", "primary", "size", "sm", 3, "click"], [1, "fa-solid", "fa-plus"], ["toolbar", ""], ["Placeholder", "Search actions...", 3, "ValueChange", "Value"], [1, "active-filters"], [3, "Flex", "Padding"], [1, "action-explorer"], [1, "loading-overlay"], [3, "CategorySelected", "NewCategoryClick", "EditCategoryClick", "Categories", "Actions"], [1, "explorer-main"], [3, "CategorySelect", "SelectedCategoryId", "Categories"], [1, "explorer-content"], [1, "empty-state"], [3, "CategoryCreated", "Close", "Categories", "PreselectedParentId"], [3, "ActionCreated", "Categories"], [3, "Action", "ActionParams", "IsOpen"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "click"], [1, "filter-option"], ["type", "checkbox", 3, "change", "checked"], [1, "status-dot"], [1, "sort-option", 3, "selected"], [1, "sort-option", 3, "click"], [1, "direction-icon", 3, "class"], [1, "direction-icon"], [1, "status-chip", "removable"], [1, "status-chip", "removable", 3, "click"], [1, "fa-solid", "fa-times"], ["text", "Loading actions...", "size", "medium"], [1, "fa-solid", "fa-filter-circle-xmark"], ["mjButton", "", "variant", "outline", 3, "click"], [1, "fa-solid", "fa-bolt"], ["mjButton", "", "variant", "primary", 3, "click"], [1, "card-grid"], [1, "list-view"], [1, "compact-view"], [3, "Action", "Categories"], [3, "ActionClick", "EditClick", "RunClick", "CategoryClick", "Action", "Categories"], [1, "list-header"], [1, "header-icon"], [1, "header-name"], [1, "header-category"], [1, "header-status"], [1, "header-type"], [1, "header-params"], [1, "header-updated"], [1, "header-actions"], [3, "Action", "Categories", "IsCompact"], [3, "ActionClick", "EditClick", "RunClick", "CategoryClick", "Action", "Categories", "IsCompact"], [3, "Close", "Action", "ActionParams", "IsOpen"]], template: function ActionExplorerComponent_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();
+            i0.ɵɵelementStart(4, "div", 3)(5, "mj-filter-popover", 4);
+            i0.ɵɵlistener("ClearAllRequested", function ActionExplorerComponent_Template_mj_filter_popover_ClearAllRequested_5_listener() { return ctx.clearFilters(); });
+            i0.ɵɵelementStart(6, "div", 5)(7, "div", 6)(8, "span");
+            i0.ɵɵtext(9, "Status");
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(10, ActionExplorerComponent_Conditional_10_Template, 2, 0, "button", 7);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(11, "div", 8);
+            i0.ɵɵrepeaterCreate(12, ActionExplorerComponent_For_13_Template, 4, 5, "label", 9, _forTrack0);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(14, "div", 5)(15, "div", 6)(16, "span");
+            i0.ɵɵtext(17, "Type");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(3, "div", 3)(4, "mj-action-toolbar", 4);
-            i0.ɵɵlistener("NewActionClick", function ActionExplorerComponent_Template_mj_action_toolbar_NewActionClick_4_listener() { return ctx.onNewAction(); })("RefreshClick", function ActionExplorerComponent_Template_mj_action_toolbar_RefreshClick_4_listener() { return ctx.onRefresh(); });
+            i0.ɵɵconditionalCreate(18, ActionExplorerComponent_Conditional_18_Template, 2, 0, "button", 7);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(5, "mj-action-breadcrumb", 5);
-            i0.ɵɵlistener("CategorySelect", function ActionExplorerComponent_Template_mj_action_breadcrumb_CategorySelect_5_listener($event) { return ctx.onCategorySelect($event); });
+            i0.ɵɵelementStart(19, "div", 8);
+            i0.ɵɵrepeaterCreate(20, ActionExplorerComponent_For_21_Template, 4, 6, "label", 9, _forTrack0);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(22, "div", 10);
+            i0.ɵɵlistener("clickOutside", function ActionExplorerComponent_Template_div_clickOutside_22_listener() { return ctx.ShowSortDropdown = false; });
+            i0.ɵɵelementStart(23, "button", 11);
+            i0.ɵɵlistener("click", function ActionExplorerComponent_Template_button_click_23_listener() { return ctx.toggleSortDropdown(); });
+            i0.ɵɵelement(24, "i");
+            i0.ɵɵtext(25);
+            i0.ɵɵelement(26, "i");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(6, "div", 6);
-            i0.ɵɵconditionalCreate(7, ActionExplorerComponent_Conditional_7_Template, 3, 1, "div", 7)(8, ActionExplorerComponent_Conditional_8_Template, 3, 3);
+            i0.ɵɵconditionalCreate(27, ActionExplorerComponent_Conditional_27_Template, 3, 0, "div", 12);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(28, "mj-view-toggle", 13);
+            i0.ɵɵlistener("KeyChange", function ActionExplorerComponent_Template_mj_view_toggle_KeyChange_28_listener($event) { return ctx.setViewMode($event); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(29, "mj-refresh-button", 14);
+            i0.ɵɵlistener("Clicked", function ActionExplorerComponent_Template_mj_refresh_button_Clicked_29_listener() { return ctx.onRefresh(); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(30, "button", 15);
+            i0.ɵɵlistener("click", function ActionExplorerComponent_Template_button_click_30_listener() { return ctx.onNewAction(); });
+            i0.ɵɵelement(31, "i", 16);
+            i0.ɵɵtext(32, " New Action ");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(9, "mj-new-category-panel", 8);
-            i0.ɵɵlistener("CategoryCreated", function ActionExplorerComponent_Template_mj_new_category_panel_CategoryCreated_9_listener($event) { return ctx.onCategoryCreated($event); })("Close", function ActionExplorerComponent_Template_mj_new_category_panel_Close_9_listener() { return ctx.NewCategoryParentId = null; });
+            i0.ɵɵelementStart(33, "div", 17)(34, "mj-page-search", 18);
+            i0.ɵɵlistener("ValueChange", function ActionExplorerComponent_Template_mj_page_search_ValueChange_34_listener($event) { return ctx.onSearchInput($event); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(10, "mj-new-action-panel", 9);
-            i0.ɵɵlistener("ActionCreated", function ActionExplorerComponent_Template_mj_new_action_panel_ActionCreated_10_listener() { return ctx.onActionCreated(); });
+            i0.ɵɵconditionalCreate(35, ActionExplorerComponent_Conditional_35_Template, 5, 0, "div", 19);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(36, "mj-page-body", 20)(37, "div", 21);
+            i0.ɵɵconditionalCreate(38, ActionExplorerComponent_Conditional_38_Template, 2, 0, "div", 22);
+            i0.ɵɵelementStart(39, "mj-action-tree-panel", 23);
+            i0.ɵɵlistener("CategorySelected", function ActionExplorerComponent_Template_mj_action_tree_panel_CategorySelected_39_listener($event) { return ctx.onCategorySelect($event); })("NewCategoryClick", function ActionExplorerComponent_Template_mj_action_tree_panel_NewCategoryClick_39_listener($event) { return ctx.onNewCategory($event); })("EditCategoryClick", function ActionExplorerComponent_Template_mj_action_tree_panel_EditCategoryClick_39_listener($event) { return ctx.onEditCategory($event); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(40, "div", 24)(41, "mj-action-breadcrumb", 25);
+            i0.ɵɵlistener("CategorySelect", function ActionExplorerComponent_Template_mj_action_breadcrumb_CategorySelect_41_listener($event) { return ctx.onCategorySelect($event); });
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(11, ActionExplorerComponent_Conditional_11_Template, 1, 3, "mj-action-test-harness-dialog", 10);
+            i0.ɵɵelementStart(42, "div", 26);
+            i0.ɵɵconditionalCreate(43, ActionExplorerComponent_Conditional_43_Template, 3, 1, "div", 27)(44, ActionExplorerComponent_Conditional_44_Template, 3, 3);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(45, "mj-new-category-panel", 28);
+            i0.ɵɵlistener("CategoryCreated", function ActionExplorerComponent_Template_mj_new_category_panel_CategoryCreated_45_listener($event) { return ctx.onCategoryCreated($event); })("Close", function ActionExplorerComponent_Template_mj_new_category_panel_Close_45_listener() { return ctx.NewCategoryParentId = null; });
             i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(46, "mj-new-action-panel", 29);
+            i0.ɵɵlistener("ActionCreated", function ActionExplorerComponent_Template_mj_new_action_panel_ActionCreated_46_listener() { return ctx.onActionCreated(); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(47, ActionExplorerComponent_Conditional_47_Template, 1, 3, "mj-action-test-harness-dialog", 30);
+            i0.ɵɵelementEnd()()();
         } if (rf & 2) {
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("Count", ctx.FilteredActions.length)("Total", ctx.Actions.length);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ActiveCount", ctx.StatusTypeFilterCount)("ShowClearAll", ctx.StatusTypeFilterCount > 0);
+            i0.ɵɵadvance(5);
+            i0.ɵɵconditional(ctx.Filters.statuses.length > 0 ? 10 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵrepeater(ctx.StatusOptions);
+            i0.ɵɵadvance(6);
+            i0.ɵɵconditional(ctx.Filters.types.length > 0 ? 18 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵrepeater(ctx.TypeOptions);
+            i0.ɵɵadvance(4);
+            i0.ɵɵclassMap(ctx.getSortIcon());
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.IsLoading ? 1 : -1);
+            i0.ɵɵtextInterpolate1(" ", ctx.getSortLabel(), " ");
             i0.ɵɵadvance();
-            i0.ɵɵproperty("Categories", ctx.Categories)("Actions", ctx.Actions);
+            i0.ɵɵclassMap(ctx.ShowSortDropdown ? "fa-solid fa-chevron-up" : "fa-solid fa-chevron-down");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ShowSortDropdown ? 27 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("Options", ctx.ViewToggleOptions)("ActiveKey", ctx.ViewMode);
+            i0.ɵɵadvance(6);
+            i0.ɵɵproperty("Value", ctx.Filters.searchTerm);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.hasActiveFilters() ? 35 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("Flex", true)("Padding", false);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("TotalCount", ctx.Actions.length)("FilteredCount", ctx.FilteredActions.length);
+            i0.ɵɵconditional(ctx.IsLoading ? 38 : -1);
             i0.ɵɵadvance();
+            i0.ɵɵproperty("Categories", ctx.Categories)("Actions", ctx.Actions);
+            i0.ɵɵadvance(2);
             i0.ɵɵproperty("SelectedCategoryId", ctx.SelectedCategoryId)("Categories", ctx.Categories);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.FilteredActions.length === 0 && !ctx.IsLoading ? 7 : 8);
+            i0.ɵɵconditional(ctx.FilteredActions.length === 0 && !ctx.IsLoading ? 43 : 44);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("Categories", ctx.Categories)("PreselectedParentId", ctx.NewCategoryParentId);
             i0.ɵɵadvance();
             i0.ɵɵproperty("Categories", ctx.Categories);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.SelectedActionForRun ? 11 : -1);
-        } }, dependencies: [i2.MJButtonDirective, i3.ActionTestHarnessDialogComponent, i4.LoadingComponent, i5.ActionTreePanelComponent, i6.ActionToolbarComponent, i7.ActionBreadcrumbComponent, i8.ActionCardComponent, i9.ActionListItemComponent, i10.NewCategoryPanelComponent, i11.NewActionPanelComponent], styles: [".action-explorer[_ngcontent-%COMP%] {\n  display: flex;\n  height: 100%;\n  background: var(--mj-bg-page);\n  overflow: hidden;\n  position: relative;\n}\n\n\n\n.explorer-main[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.explorer-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n}\n\n\n\n.loading-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--mj-bg-surface) 85%, transparent);\n  z-index: 100;\n  backdrop-filter: blur(2px);\n}\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  min-height: 300px;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  padding: 60px 20px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  margin-bottom: 20px;\n  opacity: 0.5;\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0 0 20px 0;\n  font-size: 14px;\n}\n\n.empty-state[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n\n\n.card-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));\n  gap: 20px;\n}\n\n\n\n.list-view[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.list-header[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 40px 1fr 140px 90px 70px 50px 90px 70px;\n  gap: 12px;\n  padding: 12px 16px;\n  background: var(--mj-bg-page);\n  border-bottom: 1px solid var(--mj-border-default);\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--mj-text-muted);\n}\n\n.header-icon[_ngcontent-%COMP%] {\n  \n\n}\n\n\n\n.compact-view[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n\n\n@media (max-width: 1200px) {\n  .card-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n  }\n}\n\n@media (max-width: 1024px) {\n  .list-header[_ngcontent-%COMP%] {\n    grid-template-columns: 36px 1fr 90px 50px 80px 60px;\n  }\n\n  .list-header[_ngcontent-%COMP%]   .header-category[_ngcontent-%COMP%], \n   .list-header[_ngcontent-%COMP%]   .header-params[_ngcontent-%COMP%] {\n    display: none;\n  }\n}\n\n@media (max-width: 768px) {\n  .explorer-content[_ngcontent-%COMP%] {\n    padding: 12px;\n  }\n\n  .card-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n    gap: 12px;\n  }\n\n  .list-header[_ngcontent-%COMP%] {\n    display: none;\n  }\n}\n\n\n\n.explorer-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 8px;\n}\n\n.explorer-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.explorer-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-border-default);\n  border-radius: 4px;\n}\n\n.explorer-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-muted);\n}"], changeDetection: 0 });
+            i0.ɵɵconditional(ctx.SelectedActionForRun ? 47 : -1);
+        } }, dependencies: [i2.MJButtonDirective, i2.MJPageBodyComponent, i2.MJPageHeaderComponent, i2.MJPageLayoutComponent, i2.MJPageSearchComponent, i2.MJFilterPopoverComponent, i2.MJViewToggleComponent, i2.MJStatBadgeComponent, i2.MJRefreshButtonComponent, i3.ActionTestHarnessDialogComponent, i4.LoadingComponent, i5.ActionTreePanelComponent, i6.ActionBreadcrumbComponent, i7.ActionCardComponent, i8.ActionListItemComponent, i9.NewCategoryPanelComponent, i10.NewActionPanelComponent], styles: ["\n\n.dropdown-section[_ngcontent-%COMP%] {\n  padding: 8px 12px;\n}\n.dropdown-section[_ngcontent-%COMP%]:not(:last-child) {\n  border-bottom: 1px solid var(--mj-border-default);\n}\n.section-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  color: var(--mj-text-muted);\n  letter-spacing: 0.5px;\n}\n.section-header[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  font-size: 11px;\n  padding: 2px 6px;\n}\n.filter-options[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.filter-option[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 8px;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background 0.15s ease;\n  font-size: 13px;\n}\n.filter-option[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.filter-option.selected[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n.filter-option[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n  display: none;\n}\n.filter-option[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 13px;\n  width: 18px;\n  color: var(--mj-text-muted);\n}\n.filter-option.selected[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n.status-dot[_ngcontent-%COMP%] {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n}\n.status-dot[data-status=\"Active\"][_ngcontent-%COMP%]   { background: var(--mj-status-success); }\n.status-dot[data-status=\"Pending\"][_ngcontent-%COMP%]  { background: var(--mj-status-warning); }\n.status-dot[data-status=\"Disabled\"][_ngcontent-%COMP%] { background: var(--mj-status-error); }\n\n\n\n.dropdown-container[_ngcontent-%COMP%] {\n  position: relative;\n}\n.dropdown-menu[_ngcontent-%COMP%] {\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  z-index: 100;\n  min-width: 220px;\n  padding: 8px 0;\n}\n.sort-option[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 8px 12px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-size: 13px;\n  text-align: left;\n  transition: background 0.15s ease;\n}\n.sort-option[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.sort-option.selected[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n.sort-option[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:first-child {\n  width: 18px;\n  color: var(--mj-text-muted);\n}\n.sort-option.selected[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:first-child {\n  color: var(--mj-brand-primary);\n}\n.sort-option[_ngcontent-%COMP%]   .direction-icon[_ngcontent-%COMP%] {\n  margin-left: auto;\n  font-size: 11px;\n}\n\n\n\n.active-filters[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n.status-chip[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 3px 10px;\n  font-size: 12px;\n  font-weight: 500;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  color: var(--mj-text-primary);\n  border-radius: 14px;\n}\n.status-chip.removable[_ngcontent-%COMP%] {\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n.status-chip.removable[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 18%, var(--mj-bg-surface));\n}\n.status-chip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n\n.action-explorer[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  background: var(--mj-bg-page);\n  overflow: hidden;\n  position: relative;\n}\n\n\n\n.explorer-main[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.explorer-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n}\n\n\n\n.loading-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--mj-bg-surface) 85%, transparent);\n  z-index: 100;\n  backdrop-filter: blur(2px);\n}\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  min-height: 300px;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  padding: 60px 20px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  margin-bottom: 20px;\n  opacity: 0.5;\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0 0 20px 0;\n  font-size: 14px;\n}\n\n.empty-state[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n\n\n.card-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));\n  gap: 20px;\n}\n\n\n\n.list-view[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.list-header[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 40px 1fr 140px 90px 70px 50px 90px 70px;\n  gap: 12px;\n  padding: 12px 16px;\n  background: var(--mj-bg-page);\n  border-bottom: 1px solid var(--mj-border-default);\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--mj-text-muted);\n}\n\n.header-icon[_ngcontent-%COMP%] {\n  \n\n}\n\n\n\n.compact-view[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n\n\n@media (max-width: 1200px) {\n  .card-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n  }\n}\n\n@media (max-width: 1024px) {\n  .list-header[_ngcontent-%COMP%] {\n    grid-template-columns: 36px 1fr 90px 50px 80px 60px;\n  }\n\n  .list-header[_ngcontent-%COMP%]   .header-category[_ngcontent-%COMP%], \n   .list-header[_ngcontent-%COMP%]   .header-params[_ngcontent-%COMP%] {\n    display: none;\n  }\n}\n\n@media (max-width: 768px) {\n  .explorer-content[_ngcontent-%COMP%] {\n    padding: 12px;\n  }\n\n  .card-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n    gap: 12px;\n  }\n\n  .list-header[_ngcontent-%COMP%] {\n    display: none;\n  }\n}\n\n\n\n.explorer-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 8px;\n}\n\n.explorer-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.explorer-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-border-default);\n  border-radius: 4px;\n}\n\n.explorer-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-muted);\n}"], changeDetection: 0 });
 };
 ActionExplorerComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'ActionExplorerResource')
@@ -481,10 +775,10 @@ ActionExplorerComponent = __decorate([
 export { ActionExplorerComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActionExplorerComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-action-explorer', changeDetection: ChangeDetectionStrategy.OnPush, providers: [ActionExplorerStateService], template: "<div class=\"action-explorer\">\n  <!-- Full-page Loading Overlay -->\n  @if (IsLoading) {\n    <div class=\"loading-overlay\">\n      <mj-loading text=\"Loading actions...\" size=\"medium\"></mj-loading>\n    </div>\n  }\n\n  <!-- Tree Panel (Left Sidebar) -->\n  <mj-action-tree-panel\n    [Categories]=\"Categories\"\n    [Actions]=\"Actions\"\n    (CategorySelected)=\"onCategorySelect($event)\"\n    (NewCategoryClick)=\"onNewCategory($event)\"\n    (EditCategoryClick)=\"onEditCategory($event)\">\n  </mj-action-tree-panel>\n\n  <!-- Main Content Area -->\n  <div class=\"explorer-main\">\n    <!-- Toolbar -->\n    <mj-action-toolbar\n      [TotalCount]=\"Actions.length\"\n      [FilteredCount]=\"FilteredActions.length\"\n      (NewActionClick)=\"onNewAction()\"\n      (RefreshClick)=\"onRefresh()\">\n    </mj-action-toolbar>\n\n    <!-- Breadcrumb -->\n    <mj-action-breadcrumb\n      [SelectedCategoryId]=\"SelectedCategoryId\"\n      [Categories]=\"Categories\"\n      (CategorySelect)=\"onCategorySelect($event)\">\n    </mj-action-breadcrumb>\n\n    <!-- Content Area -->\n    <div class=\"explorer-content\">\n      @if (FilteredActions.length === 0 && !IsLoading) {\n        <div class=\"empty-state\">\n          @if (StateService.hasActiveFilters() || SelectedCategoryId !== 'all') {\n            <i class=\"fa-solid fa-filter-circle-xmark\"></i>\n            <h3>No actions match your filters</h3>\n            <p>Try adjusting your search or filter criteria</p>\n            <button mjButton\n              variant=\"outline\"\n              (click)=\"StateService.clearFilters(); StateService.setSelectedCategoryId('all')\">\n              <i class=\"fa-solid fa-times\"></i>\n              Clear All Filters\n            </button>\n          } @else {\n            <i class=\"fa-solid fa-bolt\"></i>\n            <h3>No actions yet</h3>\n            <p>Create your first action to get started</p>\n            <button mjButton\n              variant=\"primary\"\n              (click)=\"onNewAction()\">\n              <i class=\"fa-solid fa-plus\"></i>\n              Create Action\n            </button>\n          }\n        </div>\n      } @else {\n        <!-- Card View -->\n        @if (ViewMode === 'card') {\n          <div class=\"card-grid\">\n            @for (action of FilteredActions; track action.ID) {\n              <mj-action-card\n                [Action]=\"action\"\n                [Categories]=\"CategoriesMap\"\n                (ActionClick)=\"onActionClick($event)\"\n                (EditClick)=\"onActionEdit($event)\"\n                (RunClick)=\"onActionRun($event)\"\n                (CategoryClick)=\"onCategoryClick($event)\">\n              </mj-action-card>\n            }\n          </div>\n        }\n\n        <!-- List View -->\n        @if (ViewMode === 'list') {\n          <div class=\"list-view\">\n            <div class=\"list-header\">\n              <div class=\"header-icon\"></div>\n              <div class=\"header-name\">Name</div>\n              <div class=\"header-category\">Category</div>\n              <div class=\"header-status\">Status</div>\n              <div class=\"header-type\">Type</div>\n              <div class=\"header-params\">Params</div>\n              <div class=\"header-updated\">Updated</div>\n              <div class=\"header-actions\"></div>\n            </div>\n            @for (action of FilteredActions; track action.ID) {\n              <mj-action-list-item\n                [Action]=\"action\"\n                [Categories]=\"CategoriesMap\"\n                [IsCompact]=\"false\"\n                (ActionClick)=\"onActionClick($event)\"\n                (EditClick)=\"onActionEdit($event)\"\n                (RunClick)=\"onActionRun($event)\"\n                (CategoryClick)=\"onCategoryClick($event)\">\n              </mj-action-list-item>\n            }\n          </div>\n        }\n\n        <!-- Compact View -->\n        @if (ViewMode === 'compact') {\n          <div class=\"compact-view\">\n            @for (action of FilteredActions; track action.ID) {\n              <mj-action-list-item\n                [Action]=\"action\"\n                [Categories]=\"CategoriesMap\"\n                [IsCompact]=\"true\"\n                (ActionClick)=\"onActionClick($event)\"\n                (EditClick)=\"onActionEdit($event)\"\n                (RunClick)=\"onActionRun($event)\"\n                (CategoryClick)=\"onCategoryClick($event)\">\n              </mj-action-list-item>\n            }\n          </div>\n        }\n      }\n    </div>\n  </div>\n\n  <!-- Slide-in Panels -->\n  <mj-new-category-panel\n    [Categories]=\"Categories\"\n    [PreselectedParentId]=\"NewCategoryParentId\"\n    (CategoryCreated)=\"onCategoryCreated($event)\"\n    (Close)=\"NewCategoryParentId = null\">\n  </mj-new-category-panel>\n\n  <mj-new-action-panel\n    [Categories]=\"Categories\"\n    (ActionCreated)=\"onActionCreated()\">\n  </mj-new-action-panel>\n\n  <!-- Action Run Dialog -->\n  @if (SelectedActionForRun) {\n    <mj-action-test-harness-dialog\n      [Action]=\"SelectedActionForRun\"\n      [ActionParams]=\"SelectedActionParams\"\n      [IsOpen]=\"IsRunDialogOpen\"\n      (Close)=\"OnRunDialogClose()\">\n    </mj-action-test-harness-dialog>\n  }\n</div>\n", styles: [".action-explorer {\n  display: flex;\n  height: 100%;\n  background: var(--mj-bg-page);\n  overflow: hidden;\n  position: relative;\n}\n\n/* Main Content Area */\n.explorer-main {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.explorer-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n}\n\n/* Full-page Loading Overlay */\n.loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--mj-bg-surface) 85%, transparent);\n  z-index: 100;\n  backdrop-filter: blur(2px);\n}\n\n/* Legacy loading container (kept for backwards compatibility) */\n.loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  min-height: 300px;\n}\n\n/* Empty State */\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  padding: 60px 20px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state i {\n  font-size: 48px;\n  margin-bottom: 20px;\n  opacity: 0.5;\n}\n\n.empty-state h3 {\n  margin: 0 0 8px 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.empty-state p {\n  margin: 0 0 20px 0;\n  font-size: 14px;\n}\n\n.empty-state button {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n/* Card Grid */\n.card-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));\n  gap: 20px;\n}\n\n/* List View */\n.list-view {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.list-header {\n  display: grid;\n  grid-template-columns: 40px 1fr 140px 90px 70px 50px 90px 70px;\n  gap: 12px;\n  padding: 12px 16px;\n  background: var(--mj-bg-page);\n  border-bottom: 1px solid var(--mj-border-default);\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--mj-text-muted);\n}\n\n.header-icon {\n  /* Empty column for icon */\n}\n\n/* Compact View */\n.compact-view {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n/* Responsive */\n@media (max-width: 1200px) {\n  .card-grid {\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n  }\n}\n\n@media (max-width: 1024px) {\n  .list-header {\n    grid-template-columns: 36px 1fr 90px 50px 80px 60px;\n  }\n\n  .list-header .header-category,\n  .list-header .header-params {\n    display: none;\n  }\n}\n\n@media (max-width: 768px) {\n  .explorer-content {\n    padding: 12px;\n  }\n\n  .card-grid {\n    grid-template-columns: 1fr;\n    gap: 12px;\n  }\n\n  .list-header {\n    display: none;\n  }\n}\n\n/* Scrollbar Styling */\n.explorer-content::-webkit-scrollbar {\n  width: 8px;\n}\n\n.explorer-content::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.explorer-content::-webkit-scrollbar-thumb {\n  background: var(--mj-border-default);\n  border-radius: 4px;\n}\n\n.explorer-content::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-muted);\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-action-explorer', changeDetection: ChangeDetectionStrategy.OnPush, providers: [ActionExplorerStateService], template: "<mj-page-layout>\n  <mj-page-header\n    Title=\"Action Explorer\"\n    Icon=\"fa-solid fa-folder-tree\"\n    Subtitle=\"Browse, organize, and run all configured actions\">\n    <div meta>\n      <mj-stat-badge\n        [Count]=\"FilteredActions.length\"\n        [Total]=\"Actions.length\"\n        Label=\"actions\">\n      </mj-stat-badge>\n    </div>\n    <div actions>\n      <!-- Filters popover (shared trigger + popover chrome; multi-select checkbox content stays bespoke) -->\n      <mj-filter-popover\n        [ActiveCount]=\"StatusTypeFilterCount\"\n        [ShowClearAll]=\"StatusTypeFilterCount > 0\"\n        (ClearAllRequested)=\"clearFilters()\">\n        <div class=\"dropdown-section\">\n          <div class=\"section-header\">\n            <span>Status</span>\n            @if (Filters.statuses.length > 0) {\n              <button mjButton variant=\"flat\" size=\"sm\" (click)=\"StateService.setStatusFilter([])\">Clear</button>\n            }\n          </div>\n          <div class=\"filter-options\">\n            @for (status of StatusOptions; track status.value) {\n              <label class=\"filter-option\" [class.selected]=\"isStatusSelected(status.value)\">\n                <input type=\"checkbox\"\n                  [checked]=\"isStatusSelected(status.value)\"\n                  (change)=\"toggleStatus(status.value)\">\n                <span class=\"status-dot\" [attr.data-status]=\"status.value\"></span>\n                {{ status.label }}\n              </label>\n            }\n          </div>\n        </div>\n        <div class=\"dropdown-section\">\n          <div class=\"section-header\">\n            <span>Type</span>\n            @if (Filters.types.length > 0) {\n              <button mjButton variant=\"flat\" size=\"sm\" (click)=\"StateService.setTypeFilter([])\">Clear</button>\n            }\n          </div>\n          <div class=\"filter-options\">\n            @for (type of TypeOptions; track type.value) {\n              <label class=\"filter-option\" [class.selected]=\"isTypeSelected(type.value)\">\n                <input type=\"checkbox\"\n                  [checked]=\"isTypeSelected(type.value)\"\n                  (change)=\"toggleType(type.value)\">\n                <i [class]=\"type.icon\"></i>\n                {{ type.label }}\n              </label>\n            }\n          </div>\n        </div>\n      </mj-filter-popover>\n\n      <!-- Sort Dropdown (bespoke \u2014 no shared sort component yet) -->\n      <div class=\"dropdown-container\" (clickOutside)=\"ShowSortDropdown = false\">\n        <button mjButton variant=\"secondary\" size=\"sm\" (click)=\"toggleSortDropdown()\">\n          <i [class]=\"getSortIcon()\"></i> {{ getSortLabel() }}\n          <i [class]=\"ShowSortDropdown ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'\"></i>\n        </button>\n        @if (ShowSortDropdown) {\n          <div class=\"dropdown-menu sort-menu\">\n            @for (option of SortOptions; track option.field) {\n              <button class=\"sort-option\"\n                [class.selected]=\"SortField === option.field\"\n                (click)=\"setSortField(option.field)\">\n                <i [class]=\"option.icon\"></i>\n                {{ option.label }}\n                @if (SortField === option.field) {\n                  <i [class]=\"SortDirection === 'asc' ? 'fa-solid fa-arrow-up' : 'fa-solid fa-arrow-down'\" class=\"direction-icon\"></i>\n                }\n              </button>\n            }\n          </div>\n        }\n      </div>\n\n      <mj-view-toggle\n        [Options]=\"ViewToggleOptions\"\n        [ActiveKey]=\"ViewMode\"\n        (KeyChange)=\"setViewMode($any($event))\">\n      </mj-view-toggle>\n\n      <mj-refresh-button (Clicked)=\"onRefresh()\"></mj-refresh-button>\n\n      <button mjButton variant=\"primary\" size=\"sm\" (click)=\"onNewAction()\">\n        <i class=\"fa-solid fa-plus\"></i> New Action\n      </button>\n    </div>\n    <div toolbar>\n      <mj-page-search\n        Placeholder=\"Search actions...\"\n        [Value]=\"Filters.searchTerm\"\n        (ValueChange)=\"onSearchInput($event)\">\n      </mj-page-search>\n      @if (hasActiveFilters()) {\n        <div class=\"active-filters\">\n          @for (status of Filters.statuses; track status) {\n            <span class=\"status-chip removable\" (click)=\"toggleStatus(status)\">\n              Status: {{ status }} <i class=\"fa-solid fa-times\"></i>\n            </span>\n          }\n          @for (type of Filters.types; track type) {\n            <span class=\"status-chip removable\" (click)=\"toggleType(type)\">\n              Type: {{ type === 'Generated' ? 'AI Generated' : type }} <i class=\"fa-solid fa-times\"></i>\n            </span>\n          }\n        </div>\n      }\n    </div>\n  </mj-page-header>\n\n  <mj-page-body [Flex]=\"true\" [Padding]=\"false\">\n<div class=\"action-explorer\">\n  <!-- Full-page Loading Overlay -->\n  @if (IsLoading) {\n    <div class=\"loading-overlay\">\n      <mj-loading text=\"Loading actions...\" size=\"medium\"></mj-loading>\n    </div>\n  }\n\n  <!-- Tree Panel (Left Sidebar) -->\n  <mj-action-tree-panel\n    [Categories]=\"Categories\"\n    [Actions]=\"Actions\"\n    (CategorySelected)=\"onCategorySelect($event)\"\n    (NewCategoryClick)=\"onNewCategory($event)\"\n    (EditCategoryClick)=\"onEditCategory($event)\">\n  </mj-action-tree-panel>\n\n  <!-- Main Content Area -->\n  <div class=\"explorer-main\">\n    <!-- Breadcrumb -->\n    <mj-action-breadcrumb\n      [SelectedCategoryId]=\"SelectedCategoryId\"\n      [Categories]=\"Categories\"\n      (CategorySelect)=\"onCategorySelect($event)\">\n    </mj-action-breadcrumb>\n\n    <!-- Content Area -->\n    <div class=\"explorer-content\">\n      @if (FilteredActions.length === 0 && !IsLoading) {\n        <div class=\"empty-state\">\n          @if (StateService.hasActiveFilters() || SelectedCategoryId !== 'all') {\n            <i class=\"fa-solid fa-filter-circle-xmark\"></i>\n            <h3>No actions match your filters</h3>\n            <p>Try adjusting your search or filter criteria</p>\n            <button mjButton\n              variant=\"outline\"\n              (click)=\"StateService.clearFilters(); StateService.setSelectedCategoryId('all')\">\n              <i class=\"fa-solid fa-times\"></i>\n              Clear All Filters\n            </button>\n          } @else {\n            <i class=\"fa-solid fa-bolt\"></i>\n            <h3>No actions yet</h3>\n            <p>Create your first action to get started</p>\n            <button mjButton\n              variant=\"primary\"\n              (click)=\"onNewAction()\">\n              <i class=\"fa-solid fa-plus\"></i>\n              Create Action\n            </button>\n          }\n        </div>\n      } @else {\n        <!-- Card View -->\n        @if (ViewMode === 'card') {\n          <div class=\"card-grid\">\n            @for (action of FilteredActions; track action.ID) {\n              <mj-action-card\n                [Action]=\"action\"\n                [Categories]=\"CategoriesMap\"\n                (ActionClick)=\"onActionClick($event)\"\n                (EditClick)=\"onActionEdit($event)\"\n                (RunClick)=\"onActionRun($event)\"\n                (CategoryClick)=\"onCategoryClick($event)\">\n              </mj-action-card>\n            }\n          </div>\n        }\n\n        <!-- List View -->\n        @if (ViewMode === 'list') {\n          <div class=\"list-view\">\n            <div class=\"list-header\">\n              <div class=\"header-icon\"></div>\n              <div class=\"header-name\">Name</div>\n              <div class=\"header-category\">Category</div>\n              <div class=\"header-status\">Status</div>\n              <div class=\"header-type\">Type</div>\n              <div class=\"header-params\">Params</div>\n              <div class=\"header-updated\">Updated</div>\n              <div class=\"header-actions\"></div>\n            </div>\n            @for (action of FilteredActions; track action.ID) {\n              <mj-action-list-item\n                [Action]=\"action\"\n                [Categories]=\"CategoriesMap\"\n                [IsCompact]=\"false\"\n                (ActionClick)=\"onActionClick($event)\"\n                (EditClick)=\"onActionEdit($event)\"\n                (RunClick)=\"onActionRun($event)\"\n                (CategoryClick)=\"onCategoryClick($event)\">\n              </mj-action-list-item>\n            }\n          </div>\n        }\n\n        <!-- Compact View -->\n        @if (ViewMode === 'compact') {\n          <div class=\"compact-view\">\n            @for (action of FilteredActions; track action.ID) {\n              <mj-action-list-item\n                [Action]=\"action\"\n                [Categories]=\"CategoriesMap\"\n                [IsCompact]=\"true\"\n                (ActionClick)=\"onActionClick($event)\"\n                (EditClick)=\"onActionEdit($event)\"\n                (RunClick)=\"onActionRun($event)\"\n                (CategoryClick)=\"onCategoryClick($event)\">\n              </mj-action-list-item>\n            }\n          </div>\n        }\n      }\n    </div>\n  </div>\n\n  <!-- Slide-in Panels -->\n  <mj-new-category-panel\n    [Categories]=\"Categories\"\n    [PreselectedParentId]=\"NewCategoryParentId\"\n    (CategoryCreated)=\"onCategoryCreated($event)\"\n    (Close)=\"NewCategoryParentId = null\">\n  </mj-new-category-panel>\n\n  <mj-new-action-panel\n    [Categories]=\"Categories\"\n    (ActionCreated)=\"onActionCreated()\">\n  </mj-new-action-panel>\n\n  <!-- Action Run Dialog -->\n  @if (SelectedActionForRun) {\n    <mj-action-test-harness-dialog\n      [Action]=\"SelectedActionForRun\"\n      [ActionParams]=\"SelectedActionParams\"\n      [IsOpen]=\"IsRunDialogOpen\"\n      (Close)=\"OnRunDialogClose()\">\n    </mj-action-test-harness-dialog>\n  }\n</div>\n  </mj-page-body>\n</mj-page-layout>\n", styles: ["/* \u2500\u2500\u2500\u2500 Filter popover internals (multi-select Status/Type) \u2500\u2500\u2500\u2500 */\n.dropdown-section {\n  padding: 8px 12px;\n}\n.dropdown-section:not(:last-child) {\n  border-bottom: 1px solid var(--mj-border-default);\n}\n.section-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  color: var(--mj-text-muted);\n  letter-spacing: 0.5px;\n}\n.section-header button {\n  font-size: 11px;\n  padding: 2px 6px;\n}\n.filter-options {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.filter-option {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 8px;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background 0.15s ease;\n  font-size: 13px;\n}\n.filter-option:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.filter-option.selected {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n.filter-option input[type=\"checkbox\"] {\n  display: none;\n}\n.filter-option i {\n  font-size: 13px;\n  width: 18px;\n  color: var(--mj-text-muted);\n}\n.filter-option.selected i {\n  color: var(--mj-brand-primary);\n}\n.status-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n}\n.status-dot[data-status=\"Active\"]   { background: var(--mj-status-success); }\n.status-dot[data-status=\"Pending\"]  { background: var(--mj-status-warning); }\n.status-dot[data-status=\"Disabled\"] { background: var(--mj-status-error); }\n\n/* \u2500\u2500\u2500\u2500 Sort dropdown \u2500\u2500\u2500\u2500 */\n.dropdown-container {\n  position: relative;\n}\n.dropdown-menu {\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  z-index: 100;\n  min-width: 220px;\n  padding: 8px 0;\n}\n.sort-option {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  padding: 8px 12px;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-size: 13px;\n  text-align: left;\n  transition: background 0.15s ease;\n}\n.sort-option:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.sort-option.selected {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n.sort-option i:first-child {\n  width: 18px;\n  color: var(--mj-text-muted);\n}\n.sort-option.selected i:first-child {\n  color: var(--mj-brand-primary);\n}\n.sort-option .direction-icon {\n  margin-left: auto;\n  font-size: 11px;\n}\n\n/* \u2500\u2500\u2500\u2500 Active filter chips (in [toolbar] next to search) \u2500\u2500\u2500\u2500 */\n.active-filters {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n.status-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 3px 10px;\n  font-size: 12px;\n  font-weight: 500;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n  color: var(--mj-text-primary);\n  border-radius: 14px;\n}\n.status-chip.removable {\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n.status-chip.removable:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 18%, var(--mj-bg-surface));\n}\n.status-chip i {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n\n.action-explorer {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  background: var(--mj-bg-page);\n  overflow: hidden;\n  position: relative;\n}\n\n/* Main Content Area */\n.explorer-main {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.explorer-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n}\n\n/* Full-page Loading Overlay */\n.loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--mj-bg-surface) 85%, transparent);\n  z-index: 100;\n  backdrop-filter: blur(2px);\n}\n\n/* Legacy loading container (kept for backwards compatibility) */\n.loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  min-height: 300px;\n}\n\n/* Empty State */\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  padding: 60px 20px;\n  color: var(--mj-text-muted);\n}\n\n.empty-state i {\n  font-size: 48px;\n  margin-bottom: 20px;\n  opacity: 0.5;\n}\n\n.empty-state h3 {\n  margin: 0 0 8px 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.empty-state p {\n  margin: 0 0 20px 0;\n  font-size: 14px;\n}\n\n.empty-state button {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n/* Card Grid */\n.card-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));\n  gap: 20px;\n}\n\n/* List View */\n.list-view {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.list-header {\n  display: grid;\n  grid-template-columns: 40px 1fr 140px 90px 70px 50px 90px 70px;\n  gap: 12px;\n  padding: 12px 16px;\n  background: var(--mj-bg-page);\n  border-bottom: 1px solid var(--mj-border-default);\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--mj-text-muted);\n}\n\n.header-icon {\n  /* Empty column for icon */\n}\n\n/* Compact View */\n.compact-view {\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n/* Responsive */\n@media (max-width: 1200px) {\n  .card-grid {\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n  }\n}\n\n@media (max-width: 1024px) {\n  .list-header {\n    grid-template-columns: 36px 1fr 90px 50px 80px 60px;\n  }\n\n  .list-header .header-category,\n  .list-header .header-params {\n    display: none;\n  }\n}\n\n@media (max-width: 768px) {\n  .explorer-content {\n    padding: 12px;\n  }\n\n  .card-grid {\n    grid-template-columns: 1fr;\n    gap: 12px;\n  }\n\n  .list-header {\n    display: none;\n  }\n}\n\n/* Scrollbar Styling */\n.explorer-content::-webkit-scrollbar {\n  width: 8px;\n}\n\n.explorer-content::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.explorer-content::-webkit-scrollbar-thumb {\n  background: var(--mj-border-default);\n  border-radius: 4px;\n}\n\n.explorer-content::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-muted);\n}\n"] }]
     }], () => [{ type: i1.ActionExplorerStateService }, { type: i0.ChangeDetectorRef }], { TreePanel: [{
             type: ViewChild,
             args: [ActionTreePanelComponent]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActionExplorerComponent, { className: "ActionExplorerComponent", filePath: "src/Actions/components/explorer/action-explorer.component.ts", lineNumber: 32 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActionExplorerComponent, { className: "ActionExplorerComponent", filePath: "src/Actions/components/explorer/action-explorer.component.ts", lineNumber: 41 }); })();
 //# sourceMappingURL=action-explorer.component.js.map