@memberjunction/ng-conversations 6.2.0-edge.3 → 6.2.0-edge.5

package/dist/lib/components/task/tasks-full-view.component.js

@@ -1,50 +1,766 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ChangeDetectorRef, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
 import { RunView } from '@memberjunction/core';
-import { TaskComponent } from '@memberjunction/ng-tasks';
 import { AIEngineBase } from '@memberjunction/ai-engine-base';
-import { UUIDsEqual } from '@memberjunction/global';
+import { ConversationsRuntime } from '@memberjunction/conversations-runtime';
+import { EscapeSQLString, ExcludeByUUIDs, IndexByUUID, UUIDsEqual, UUIDSet } from '@memberjunction/global';
 import * as i0 from "@angular/core";
-function TasksFullViewComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-task", 3);
-    i0.ɵɵlistener("taskClicked", function TasksFullViewComponent_Conditional_1_Template_mj_task_taskClicked_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onTaskClick($event)); });
+import * as i1 from "@angular/forms";
+const _forTrack0 = ($index, $item) => $item.id;
+const _forTrack1 = ($index, $item) => $item.RootTaskId;
+const _forTrack2 = ($index, $item) => $item.Task.ID;
+function TasksFullViewComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 8);
+    i0.ɵɵelement(1, "span", 55);
+    i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("tasks", ctx_r1.filteredTasks)("title", "Tasks")("description", ctx_r1.getDescription())("showHeader", true)("showViewToggle", false)("viewMode", "simple");
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.Kpis.ActiveWorkflows, " Running Live ");
 } }
-function TasksFullViewComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function TasksFullViewComponent_Conditional_86_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 56);
+    i0.ɵɵlistener("click", function TasksFullViewComponent_Conditional_86_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.ClearSearch()); });
+    i0.ɵɵelement(1, "i", 57);
+    i0.ɵɵelementEnd();
+} }
+function TasksFullViewComponent_Conditional_111_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 61);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ag_r4 = ctx.$implicit;
+    i0.ɵɵproperty("value", ag_r4.id);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2("", ag_r4.name, " (", ag_r4.count, ")");
+} }
+function TasksFullViewComponent_Conditional_111_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 4)(1, "div", 5)(2, "button", 6);
-    i0.ɵɵlistener("click", function TasksFullViewComponent_Conditional_2_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.backToTaskList()); });
-    i0.ɵɵelement(3, "i", 7);
-    i0.ɵɵelementStart(4, "span");
-    i0.ɵɵtext(5, "Back to Tasks");
+    i0.ɵɵelementStart(0, "div", 48);
+    i0.ɵɵelement(1, "i", 58);
+    i0.ɵɵelementStart(2, "select", 59);
+    i0.ɵɵlistener("ngModelChange", function TasksFullViewComponent_Conditional_111_Template_select_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.SetAgentFilter($event)); });
+    i0.ɵɵelementStart(3, "option", 60);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(5, TasksFullViewComponent_Conditional_111_For_6_Template, 2, 3, "option", 61, _forTrack0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 8);
-    i0.ɵɵtext(7, "/");
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngModel", ctx_r0.SelectedAgentFilter);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("All Specialist Agents (", ctx_r0.AvailableAgents.length, ")");
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.AvailableAgents);
+} }
+function TasksFullViewComponent_Conditional_114_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 51)(1, "div", 62);
+    i0.ɵɵelement(2, "i", 63);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "span", 9);
-    i0.ɵɵtext(9);
+    i0.ɵɵelementStart(3, "h3");
+    i0.ɵɵtext(4, "Loading AI Agent Workflows...");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "p");
+    i0.ɵɵtext(6, "Fetching orchestrated task graphs, specialist agent steps, and execution telemetry.");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "mj-task", 10);
-    i0.ɵɵlistener("taskClicked", function TasksFullViewComponent_Conditional_2_Template_mj_task_taskClicked_10_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSubTaskClick($event)); })("openEntityRecord", function TasksFullViewComponent_Conditional_2_Template_mj_task_openEntityRecord_10_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onOpenEntityRecord($event)); });
+} }
+function TasksFullViewComponent_Conditional_115_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "h3");
+    i0.ɵɵtext(1, "No Agent Workflows Recorded Yet");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "When Sage or other orchestrator agents launch multi-step task graphs in Chat, their live progress, specialist delegations, and outputs will appear here.");
+    i0.ɵɵelementEnd();
+} }
+function TasksFullViewComponent_Conditional_115_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "h3");
+    i0.ɵɵtext(1, "No Workflows Match Your Filters");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "Try clearing your search query or switching the status / specialist agent filter.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 64);
+    i0.ɵɵlistener("click", function TasksFullViewComponent_Conditional_115_Conditional_4_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.ResetAllFilters()); });
+    i0.ɵɵelement(5, "i", 65);
+    i0.ɵɵelementStart(6, "span");
+    i0.ɵɵtext(7, "Reset Filters");
+    i0.ɵɵelementEnd()();
+} }
+function TasksFullViewComponent_Conditional_115_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 51)(1, "div", 62);
+    i0.ɵɵelement(2, "i", 4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(3, TasksFullViewComponent_Conditional_115_Conditional_3_Template, 4, 0)(4, TasksFullViewComponent_Conditional_115_Conditional_4_Template, 8, 0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r0.WorkflowGroups.length === 0 ? 3 : 4);
+} }
+function TasksFullViewComponent_Conditional_116_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 71);
+} }
+function TasksFullViewComponent_Conditional_116_For_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 63);
+} }
+function TasksFullViewComponent_Conditional_116_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 72);
+} }
+function TasksFullViewComponent_Conditional_116_For_2_Conditional_15_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 92);
+} }
+function TasksFullViewComponent_Conditional_116_For_2_Conditional_15_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 90);
+    i0.ɵɵlistener("click", function TasksFullViewComponent_Conditional_116_For_2_Conditional_15_For_2_Template_button_click_0_listener($event) { const ag_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.OnAgentChipClicked($event, ag_r9.id)); });
+    i0.ɵɵelement(1, "i", 91);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(4, TasksFullViewComponent_Conditional_116_For_2_Conditional_15_For_2_Conditional_4_Template, 1, 0, "i", 92);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("swoosh-in", ctx_r1.showDetailAnimation);
+    const ag_r9 = ctx.$implicit;
+    const ɵ$index_298_r10 = ctx.$index;
+    const ɵ$count_298_r11 = ctx.$count;
+    i0.ɵɵproperty("title", i0.ɵɵinterpolate1("Inspect ", ag_r9.name));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ag_r9.name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!(ɵ$index_298_r10 === ɵ$count_298_r11 - 1) ? 4 : -1);
+} }
+function TasksFullViewComponent_Conditional_116_For_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 78);
+    i0.ɵɵrepeaterCreate(1, TasksFullViewComponent_Conditional_116_For_2_Conditional_15_For_2_Template, 5, 4, null, null, _forTrack0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const group_r7 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(group_r7.AgentPipeline);
+} }
+function TasksFullViewComponent_Conditional_116_For_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 80);
+    i0.ɵɵelement(1, "i", 93);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const group_r7 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", group_r7.DurationText, " ");
+} }
+function TasksFullViewComponent_Conditional_116_For_2_Conditional_29_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const group_r7 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵtextInterpolate1(" \u00B7 ", group_r7.SkippedSteps, " skipped ");
+} }
+function TasksFullViewComponent_Conditional_116_For_2_For_33_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 71);
+} }
+function TasksFullViewComponent_Conditional_116_For_2_For_33_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 96);
+} }
+function TasksFullViewComponent_Conditional_116_For_2_For_33_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 97);
+} }
+function TasksFullViewComponent_Conditional_116_For_2_For_33_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 57);
+} }
+function TasksFullViewComponent_Conditional_116_For_2_For_33_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const step_r13 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(step_r13.StepNumber);
+} }
+function TasksFullViewComponent_Conditional_116_For_2_For_33_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 101);
+    i0.ɵɵelement(1, "i", 91);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const step_r13 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", step_r13.AgentName, " ");
+} }
+function TasksFullViewComponent_Conditional_116_For_2_For_33_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 102);
+    i0.ɵɵelement(1, "i", 108);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const step_r13 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("title", i0.ɵɵinterpolate1("Waits for: ", step_r13.DependsOnNames.join(", ")));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" After ", step_r13.DependsOnNames.join(", "), " ");
+} }
+function TasksFullViewComponent_Conditional_116_For_2_For_33_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 109);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const step_r13 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassProp("preview-error", step_r13.IsErrorOutput);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", step_r13.OutputPreview, " ");
+} }
+function TasksFullViewComponent_Conditional_116_For_2_For_33_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 105);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const step_r13 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(step_r13.DurationText);
+} }
+function TasksFullViewComponent_Conditional_116_For_2_For_33_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 110);
+    i0.ɵɵlistener("click", function TasksFullViewComponent_Conditional_116_For_2_For_33_Conditional_18_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r14); const step_r13 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OnOpenAgentRunClicked($event, step_r13.AgentRunID)); });
+    i0.ɵɵelement(1, "i", 111);
+    i0.ɵɵelementEnd();
+} }
+function TasksFullViewComponent_Conditional_116_For_2_For_33_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 94);
+    i0.ɵɵlistener("click", function TasksFullViewComponent_Conditional_116_For_2_For_33_Template_div_click_0_listener($event) { const step_r13 = i0.ɵɵrestoreView(_r12).$implicit; const group_r7 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.InspectWorkflowGroup(group_r7, step_r13, $event)); });
+    i0.ɵɵelementStart(1, "div", 95);
+    i0.ɵɵconditionalCreate(2, TasksFullViewComponent_Conditional_116_For_2_For_33_Conditional_2_Template, 1, 0, "i", 71)(3, TasksFullViewComponent_Conditional_116_For_2_For_33_Conditional_3_Template, 1, 0, "i", 96)(4, TasksFullViewComponent_Conditional_116_For_2_For_33_Conditional_4_Template, 1, 0, "i", 97)(5, TasksFullViewComponent_Conditional_116_For_2_For_33_Conditional_5_Template, 1, 0, "i", 57)(6, TasksFullViewComponent_Conditional_116_For_2_For_33_Conditional_6_Template, 2, 1, "span");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 98)(8, "div", 99)(9, "span", 100);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(11, TasksFullViewComponent_Conditional_116_For_2_For_33_Conditional_11_Template, 3, 1, "span", 101);
+    i0.ɵɵconditionalCreate(12, TasksFullViewComponent_Conditional_116_For_2_For_33_Conditional_12_Template, 3, 3, "span", 102);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(13, TasksFullViewComponent_Conditional_116_For_2_For_33_Conditional_13_Template, 2, 3, "p", 103);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "div", 104);
+    i0.ɵɵconditionalCreate(15, TasksFullViewComponent_Conditional_116_For_2_For_33_Conditional_15_Template, 2, 1, "span", 105);
+    i0.ɵɵelementStart(16, "span", 106);
+    i0.ɵɵtext(17);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(18, TasksFullViewComponent_Conditional_116_For_2_For_33_Conditional_18_Template, 2, 0, "button", 107);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const step_r13 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("step-selected", ctx_r0.IsStepInspected(step_r13.Task));
+    i0.ɵɵattribute("data-status", ctx_r0.GetStepCategory(step_r13.Task.Status));
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("data-status", ctx_r0.GetStepCategory(step_r13.Task.Status));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(step_r13.Task.Status === "Complete" ? 2 : step_r13.Task.Status === "In Progress" ? 3 : step_r13.Task.Status === "Skipped" ? 4 : step_r13.Task.Status === "Failed" || step_r13.Task.Status === "Cancelled" ? 5 : 6);
+    i0.ɵɵadvance(8);
+    i0.ɵɵtextInterpolate(step_r13.Task.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(step_r13.AgentName ? 11 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(step_r13.DependsOnNames.length > 0 ? 12 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(step_r13.OutputPreview ? 13 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(step_r13.DurationText ? 15 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("data-status", ctx_r0.GetStepCategory(step_r13.Task.Status));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", step_r13.Task.Status, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(step_r13.AgentRunID ? 18 : -1);
+} }
+function TasksFullViewComponent_Conditional_116_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "article", 67);
+    i0.ɵɵlistener("click", function TasksFullViewComponent_Conditional_116_For_2_Template_article_click_0_listener() { const group_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.InspectWorkflowGroup(group_r7)); });
+    i0.ɵɵelementStart(1, "div", 68)(2, "div", 69)(3, "div", 70);
+    i0.ɵɵconditionalCreate(4, TasksFullViewComponent_Conditional_116_For_2_Conditional_4_Template, 1, 0, "i", 71)(5, TasksFullViewComponent_Conditional_116_For_2_Conditional_5_Template, 1, 0, "i", 63)(6, TasksFullViewComponent_Conditional_116_For_2_Conditional_6_Template, 1, 0, "i", 72);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 73)(8, "div", 74)(9, "h3", 75);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "span", 76);
+    i0.ɵɵtext(12);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "span", 77);
+    i0.ɵɵtext(14);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(15, TasksFullViewComponent_Conditional_116_For_2_Conditional_15_Template, 3, 0, "div", 78);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(16, "div", 79);
+    i0.ɵɵconditionalCreate(17, TasksFullViewComponent_Conditional_116_For_2_Conditional_17_Template, 3, 1, "span", 80);
+    i0.ɵɵelementStart(18, "span", 81);
+    i0.ɵɵtext(19);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(20, "button", 82);
+    i0.ɵɵlistener("click", function TasksFullViewComponent_Conditional_116_For_2_Template_button_click_20_listener($event) { const group_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.InspectWorkflowGroup(group_r7, undefined, $event)); });
+    i0.ɵɵelementStart(21, "span");
+    i0.ɵɵtext(22, "Inspect");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(23, "i", 83);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(24, "div", 84)(25, "div", 85);
+    i0.ɵɵelement(26, "div", 86);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(27, "span", 87);
+    i0.ɵɵtext(28);
+    i0.ɵɵconditionalCreate(29, TasksFullViewComponent_Conditional_116_For_2_Conditional_29_Template, 1, 1);
+    i0.ɵɵtext(30);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(31, "div", 88);
+    i0.ɵɵrepeaterCreate(32, TasksFullViewComponent_Conditional_116_For_2_For_33_Template, 19, 13, "div", 89, _forTrack2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const group_r7 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("card-active", group_r7.NormalizedCategory === "active")("card-completed", group_r7.NormalizedCategory === "completed")("card-failed", group_r7.NormalizedCategory === "failed")("card-selected", ctx_r0.IsGroupInspected(group_r7));
+    i0.ɵɵadvance(3);
+    i0.ɵɵattribute("data-status", group_r7.NormalizedCategory);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(group_r7.NormalizedCategory === "completed" ? 4 : group_r7.NormalizedCategory === "active" ? 5 : 6);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(group_r7.Title);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2(" ", group_r7.TotalSteps, " ", group_r7.TotalSteps === 1 ? "Step" : "Steps", " ");
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("data-status", group_r7.NormalizedCategory);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", group_r7.Status, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(group_r7.AgentPipeline.length > 0 ? 15 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(group_r7.DurationText ? 17 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(group_r7.RelativeTimeText);
+    i0.ɵɵadvance(7);
+    i0.ɵɵstyleProp("width", group_r7.PercentComplete, "%");
+    i0.ɵɵattribute("data-status", group_r7.NormalizedCategory);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2(" ", group_r7.CompletedSteps, " of ", group_r7.TotalSteps, " completed ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(group_r7.SkippedSteps > 0 ? 29 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" \u00B7 ", group_r7.PercentComplete, "% ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(group_r7.Steps);
+} }
+function TasksFullViewComponent_Conditional_116_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 52);
+    i0.ɵɵrepeaterCreate(1, TasksFullViewComponent_Conditional_116_For_2_Template, 34, 25, "article", 66, _forTrack1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.FilteredWorkflowGroups);
+} }
+function TasksFullViewComponent_Conditional_117_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 117);
+    i0.ɵɵelement(1, "i", 33);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const group_r16 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" Total: ", group_r16.DurationText, " ");
+} }
+function TasksFullViewComponent_Conditional_117_For_2_For_23_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 126);
+    i0.ɵɵelement(1, "i", 131);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const step_r18 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" Depends on: ", step_r18.DependsOnNames.join(", "), " ");
+} }
+function TasksFullViewComponent_Conditional_117_For_2_For_23_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 101);
+    i0.ɵɵelement(1, "i", 91);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const step_r18 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", step_r18.AgentName, " ");
+} }
+function TasksFullViewComponent_Conditional_117_For_2_For_23_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 127);
+    i0.ɵɵtext(1, "Orchestrator");
+    i0.ɵɵelementEnd();
+} }
+function TasksFullViewComponent_Conditional_117_For_2_For_23_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 124);
+    i0.ɵɵlistener("click", function TasksFullViewComponent_Conditional_117_For_2_For_23_Template_div_click_0_listener($event) { const step_r18 = i0.ɵɵrestoreView(_r17).$implicit; const group_r16 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.InspectWorkflowGroup(group_r16, step_r18, $event)); });
+    i0.ɵɵelementStart(1, "div", 120)(2, "span", 95);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 125)(5, "span", 100);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(7, TasksFullViewComponent_Conditional_117_For_2_For_23_Conditional_7_Template, 3, 1, "span", 126);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 121);
+    i0.ɵɵconditionalCreate(9, TasksFullViewComponent_Conditional_117_For_2_For_23_Conditional_9_Template, 3, 1, "span", 101)(10, TasksFullViewComponent_Conditional_117_For_2_For_23_Conditional_10_Template, 2, 0, "span", 127);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "div", 122)(12, "div", 128)(13, "div", 129)(14, "span", 130);
+    i0.ɵɵtext(15);
+    i0.ɵɵelementEnd()()()()();
+} if (rf & 2) {
+    const step_r18 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("step-selected", ctx_r0.IsStepInspected(step_r18.Task));
+    i0.ɵɵadvance(2);
+    i0.ɵɵattribute("data-status", ctx_r0.GetStepCategory(step_r18.Task.Status));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", step_r18.StepNumber, " ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(step_r18.Task.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(step_r18.DependsOnNames.length > 0 ? 7 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(step_r18.AgentName ? 9 : 10);
+    i0.ɵɵadvance(4);
+    i0.ɵɵstyleProp("left", step_r18.TimelineOffsetPercent, "%")("width", step_r18.TimelineWidthPercent, "%");
+    i0.ɵɵattribute("data-status", ctx_r0.GetStepCategory(step_r18.Task.Status));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2(" ", step_r18.StartOffsetLabel, " \u00B7 ", step_r18.DurationText || step_r18.Task.Status, " ");
+} }
+function TasksFullViewComponent_Conditional_117_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "section", 113)(1, "div", 114);
+    i0.ɵɵlistener("click", function TasksFullViewComponent_Conditional_117_For_2_Template_div_click_1_listener() { const group_r16 = i0.ɵɵrestoreView(_r15).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.InspectWorkflowGroup(group_r16)); });
+    i0.ɵɵelementStart(2, "div", 115)(3, "span", 77);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "h3", 75);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "span", 76);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "div", 116);
+    i0.ɵɵconditionalCreate(10, TasksFullViewComponent_Conditional_117_For_2_Conditional_10_Template, 3, 1, "span", 117);
+    i0.ɵɵelementStart(11, "span", 81);
+    i0.ɵɵtext(12);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(13, "div", 118)(14, "div", 119)(15, "div", 120);
+    i0.ɵɵtext(16, "Workflow Step & Dependencies");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(17, "div", 121);
+    i0.ɵɵtext(18, "Specialist Agent");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(19, "div", 122)(20, "span");
+    i0.ɵɵtext(21);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵrepeaterCreate(22, TasksFullViewComponent_Conditional_117_For_2_For_23_Template, 16, 14, "div", 123, _forTrack2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const group_r16 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("card-selected", ctx_r0.IsGroupInspected(group_r16));
+    i0.ɵɵadvance(3);
+    i0.ɵɵattribute("data-status", group_r16.NormalizedCategory);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", group_r16.Status, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(group_r16.Title);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("", group_r16.TotalSteps, " Steps");
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(group_r16.DurationText ? 10 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(group_r16.RelativeTimeText);
     i0.ɵɵadvance(9);
-    i0.ɵɵtextInterpolate(ctx_r1.selectedTask.Name);
+    i0.ɵɵtextInterpolate1("Execution Waterfall (0s \u2192 ", group_r16.DurationText || "Live", ")");
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(group_r16.Steps);
+} }
+function TasksFullViewComponent_Conditional_117_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 53);
+    i0.ɵɵrepeaterCreate(1, TasksFullViewComponent_Conditional_117_For_2_Template, 24, 9, "section", 112, _forTrack1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.FilteredWorkflowGroups);
+} }
+function TasksFullViewComponent_Conditional_118_Conditional_10_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 141);
+    i0.ɵɵlistener("click", function TasksFullViewComponent_Conditional_118_Conditional_10_For_2_Template_button_click_0_listener() { const s_r21 = i0.ɵɵrestoreView(_r20).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.SelectInspectorStep(s_r21)); });
+    i0.ɵɵelementStart(1, "span", 142);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 143);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const s_r21 = ctx.$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("active", ctx_r0.IsStepInspected(s_r21.Task));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(s_r21.StepNumber);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(s_r21.Task.Name);
+} }
+function TasksFullViewComponent_Conditional_118_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 138);
+    i0.ɵɵrepeaterCreate(1, TasksFullViewComponent_Conditional_118_Conditional_10_For_2_Template, 5, 4, "button", 140, _forTrack2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r0.InspectedGroup.Steps);
+} }
+function TasksFullViewComponent_Conditional_118_Conditional_12_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 156);
+    i0.ɵɵlistener("click", function TasksFullViewComponent_Conditional_118_Conditional_12_Conditional_22_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r22); const activeStep_r23 = i0.ɵɵnextContext(); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnAgentChipClicked($event, activeStep_r23.AgentID)); });
+    i0.ɵɵelementStart(1, "div", 157);
+    i0.ɵɵelement(2, "i", 91);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 158)(4, "span", 159);
+    i0.ɵɵtext(5, "Assigned Specialist Agent");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 160);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(8, "i", 161);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const activeStep_r23 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate(activeStep_r23.AgentName);
+} }
+function TasksFullViewComponent_Conditional_118_Conditional_12_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    const _r24 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 156);
+    i0.ɵɵlistener("click", function TasksFullViewComponent_Conditional_118_Conditional_12_Conditional_23_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r24); const activeStep_r23 = i0.ɵɵnextContext(); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.OnOpenAgentRunClicked($event, activeStep_r23.AgentRunID)); });
+    i0.ɵɵelementStart(1, "div", 162);
+    i0.ɵɵelement(2, "i", 163);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 158)(4, "span", 159);
+    i0.ɵɵtext(5, "AI Agent Run Trace");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 160);
+    i0.ɵɵtext(7, "Open Full Step & Prompt Run Log");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(8, "i", 161);
+    i0.ɵɵelementEnd();
+} }
+function TasksFullViewComponent_Conditional_118_Conditional_12_Conditional_24_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 165);
+    i0.ɵɵelement(1, "i", 166);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const depName_r25 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", depName_r25, " ");
+} }
+function TasksFullViewComponent_Conditional_118_Conditional_12_Conditional_24_For_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 165);
+    i0.ɵɵelement(1, "i", 167);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const cond_r26 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" if ", cond_r26, " ");
+} }
+function TasksFullViewComponent_Conditional_118_Conditional_12_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 150)(1, "h4", 151);
+    i0.ɵɵtext(2, "Prerequisite Dependencies");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 164);
+    i0.ɵɵrepeaterCreate(4, TasksFullViewComponent_Conditional_118_Conditional_12_Conditional_24_For_5_Template, 3, 1, "span", 165, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(6, TasksFullViewComponent_Conditional_118_Conditional_12_Conditional_24_For_7_Template, 3, 1, "span", 165, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const activeStep_r23 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵrepeater(activeStep_r23.DependsOnNames);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(activeStep_r23.DependsOnConditions);
+} }
+function TasksFullViewComponent_Conditional_118_Conditional_12_Conditional_29_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 155)(1, "span", 168);
+    i0.ɵɵtext(2, "Started");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 169);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const activeStep_r23 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r0.FormatDateTime(activeStep_r23.Task.StartedAt));
+} }
+function TasksFullViewComponent_Conditional_118_Conditional_12_Conditional_30_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 155)(1, "span", 168);
+    i0.ɵɵtext(2, "Completed");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 169);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const activeStep_r23 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r0.FormatDateTime(activeStep_r23.Task.CompletedAt));
+} }
+function TasksFullViewComponent_Conditional_118_Conditional_12_Conditional_31_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 150)(1, "h4", 151);
+    i0.ɵɵtext(2, "Step Instructions");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 170);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const activeStep_r23 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(activeStep_r23.Instructions);
+} }
+function TasksFullViewComponent_Conditional_118_Conditional_12_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+    const _r27 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 150)(1, "div", 171)(2, "h4", 151);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 172);
+    i0.ɵɵlistener("click", function TasksFullViewComponent_Conditional_118_Conditional_12_Conditional_32_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r27); const activeStep_r23 = i0.ɵɵnextContext(); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.CopyStepOutput(activeStep_r23.Output)); });
+    i0.ɵɵelement(5, "i", 173);
+    i0.ɵɵelementStart(6, "span");
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(8, "div", 174);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const activeStep_r23 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", activeStep_r23.IsErrorOutput ? "Error Diagnostics" : "Specialist Agent Output", " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("fa-copy", !ctx_r0.CopiedOutput)("fa-check", ctx_r0.CopiedOutput);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.CopiedOutput ? "Copied" : "Copy");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("output-error", activeStep_r23.IsErrorOutput);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(activeStep_r23.Output);
+} }
+function TasksFullViewComponent_Conditional_118_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 144)(1, "div", 145)(2, "span", 146);
+    i0.ɵɵtext(3, "Status");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 77);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 145)(7, "span", 146);
+    i0.ɵɵtext(8, "Duration");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "span", 147);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "div", 145)(12, "span", 146);
+    i0.ɵɵtext(13, "Completion");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "span", 147);
+    i0.ɵɵtext(15);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(16, "div", 148);
+    i0.ɵɵelement(17, "div", 149);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "div", 150)(19, "h4", 151);
+    i0.ɵɵtext(20, "Execution & Telemetry Links");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(21, "div", 152);
+    i0.ɵɵconditionalCreate(22, TasksFullViewComponent_Conditional_118_Conditional_12_Conditional_22_Template, 9, 1, "button", 153);
+    i0.ɵɵconditionalCreate(23, TasksFullViewComponent_Conditional_118_Conditional_12_Conditional_23_Template, 9, 0, "button", 153);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(24, TasksFullViewComponent_Conditional_118_Conditional_12_Conditional_24_Template, 8, 0, "div", 150);
+    i0.ɵɵelementStart(25, "div", 150)(26, "h4", 151);
+    i0.ɵɵtext(27, "Timeline");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(28, "div", 154);
+    i0.ɵɵconditionalCreate(29, TasksFullViewComponent_Conditional_118_Conditional_12_Conditional_29_Template, 5, 1, "div", 155);
+    i0.ɵɵconditionalCreate(30, TasksFullViewComponent_Conditional_118_Conditional_12_Conditional_30_Template, 5, 1, "div", 155);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(31, TasksFullViewComponent_Conditional_118_Conditional_12_Conditional_31_Template, 5, 1, "div", 150);
+    i0.ɵɵconditionalCreate(32, TasksFullViewComponent_Conditional_118_Conditional_12_Conditional_32_Template, 10, 9, "div", 150);
+} if (rf & 2) {
+    const activeStep_r23 = ctx;
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵattribute("data-status", ctx_r0.GetStepCategory(activeStep_r23.Task.Status));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", activeStep_r23.Task.Status, " ");
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(activeStep_r23.DurationText || "\u2014");
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1("", activeStep_r23.Task.PercentComplete ?? 0, "%");
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("width", activeStep_r23.Task.PercentComplete ?? 0, "%");
+    i0.ɵɵattribute("data-status", ctx_r0.GetStepCategory(activeStep_r23.Task.Status));
+    i0.ɵɵadvance(5);
+    i0.ɵɵconditional(activeStep_r23.AgentID && activeStep_r23.AgentName ? 22 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(activeStep_r23.AgentRunID ? 23 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(activeStep_r23.DependsOnNames.length > 0 ? 24 : -1);
+    i0.ɵɵadvance(5);
+    i0.ɵɵconditional(activeStep_r23.Task.StartedAt ? 29 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(activeStep_r23.Task.CompletedAt ? 30 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("tasks", ctx_r1.subTasks)("ganttTasks", ctx_r1.subTasksWithParent)("taskDependencies", ctx_r1.taskDependencies)("agentRunMap", ctx_r1.agentRunMap)("title", ctx_r1.selectedTask.Name)("description", ctx_r1.getTaskDetailDescription())("showHeader", true)("showViewToggle", true)("viewMode", "gantt");
+    i0.ɵɵconditional(activeStep_r23.Instructions ? 31 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(activeStep_r23.Output ? 32 : -1);
+} }
+function TasksFullViewComponent_Conditional_118_Template(rf, ctx) { if (rf & 1) {
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "aside", 54)(1, "div", 132)(2, "div", 133)(3, "span", 134);
+    i0.ɵɵelement(4, "i", 135);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 136);
+    i0.ɵɵlistener("click", function TasksFullViewComponent_Conditional_118_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r19); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.BackToTaskList()); });
+    i0.ɵɵelement(7, "i", 57);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "h2", 137);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(10, TasksFullViewComponent_Conditional_118_Conditional_10_Template, 3, 0, "div", 138);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "div", 139);
+    i0.ɵɵconditionalCreate(12, TasksFullViewComponent_Conditional_118_Conditional_12_Template, 33, 14);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    let tmp_4_0;
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.InspectedStep ? "Step " + ctx_r0.InspectedStep.StepNumber + " of " + ctx_r0.InspectedGroup.TotalSteps : "Workflow Overview", " ");
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.InspectedStep ? ctx_r0.InspectedStep.Task.Name : ctx_r0.InspectedGroup.Title, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.InspectedGroup.Steps.length > 1 ? 10 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional((tmp_4_0 = ctx_r0.InspectedStep) ? 12 : -1, tmp_4_0);
 } }
 /**
- * Full-page tasks view with task list and Gantt chart
- * Generic component that displays tasks based on provided filter
- * Supports drilling into individual tasks to see sub-tasks
+ * AI Agent Workflows & Tasks Command Center (`mj-tasks-full-view`).
+ *
+ * Provides a hierarchy-aware, real-time command center for monitoring and inspecting
+ * multi-agent task graphs and durable background agent executions launched from conversations.
  */
 export class TasksFullViewComponent extends BaseAngularComponent {
+    cdr = inject(ChangeDetectorRef, { optional: true });
     EnvironmentId;
     /** @deprecated Use {@link EnvironmentId}. */
     set environmentId(value) {
@@ -71,7 +787,12 @@ export class TasksFullViewComponent extends BaseAngularComponent {
     /** @deprecated Use {@link BaseFilter}. */
     get baseFilter() {
         return this.BaseFilter;
-    } // SQL filter for tasks (default: show all)
+    }
+    /**
+     * Builds the task filter each time the view loads or refreshes, so the list includes tasks
+     * created since the last load. Replaces {@link BaseFilter} when set.
+     */
+    BaseFilterResolver = null;
     ActiveTaskId;
     /** @deprecated Use {@link ActiveTaskId}. */
     set activeTaskId(value) {
@@ -80,25 +801,13 @@ export class TasksFullViewComponent extends BaseAngularComponent {
     /** @deprecated Use {@link ActiveTaskId}. */
     get activeTaskId() {
         return this.ActiveTaskId;
-    } // Task ID to auto-select and drill into
+    }
     OpenEntityRecord = new EventEmitter();
-    /**
-     * @deprecated Use {@link OpenEntityRecord}.
-     *
-     * The same emitter under the old binding name, so a template still binding
-     * (openEntityRecord) keeps working. Must stay AFTER OpenEntityRecord: class fields
-     * initialise in order, and the other way round this captures undefined.
-     */
+    /** @deprecated Use {@link OpenEntityRecord}. */
     openEntityRecord = this.OpenEntityRecord;
     TaskSelected = new EventEmitter();
-    /**
-     * @deprecated Use {@link TaskSelected}.
-     *
-     * The same emitter under the old binding name, so a template still binding
-     * (taskSelected) keeps working. Must stay AFTER TaskSelected: class fields
-     * initialise in order, and the other way round this captures undefined.
-     */
-    taskSelected = this.TaskSelected; // Emits task ID when drill-down occurs, null when returning to list
+    /** @deprecated Use {@link TaskSelected}. */
+    taskSelected = this.TaskSelected;
     AllTasks = [];
     /** @deprecated Use {@link AllTasks}. */
     get allTasks() {
@@ -134,7 +843,7 @@ export class TasksFullViewComponent extends BaseAngularComponent {
     /** @deprecated Use {@link SubTasksWithParent}. */
     set subTasksWithParent(value) {
         this.SubTasksWithParent = value;
-    } // Includes parent for Gantt hierarchy
+    }
     TaskDependencies = [];
     /** @deprecated Use {@link TaskDependencies}. */
     get taskDependencies() {
@@ -143,7 +852,7 @@ export class TasksFullViewComponent extends BaseAngularComponent {
     /** @deprecated Use {@link TaskDependencies}. */
     set taskDependencies(value) {
         this.TaskDependencies = value;
-    } // Dependencies for Gantt links
+    }
     AgentRunMap = new Map();
     /** @deprecated Use {@link AgentRunMap}. */
     get agentRunMap() {
@@ -152,7 +861,7 @@ export class TasksFullViewComponent extends BaseAngularComponent {
     /** @deprecated Use {@link AgentRunMap}. */
     set agentRunMap(value) {
         this.AgentRunMap = value;
-    } // Maps TaskID -> AgentRunID
+    }
     SelectedTask = null;
     /** @deprecated Use {@link SelectedTask}. */
     get selectedTask() {
@@ -173,185 +882,537 @@ export class TasksFullViewComponent extends BaseAngularComponent {
     }
     isLoading = false;
     aiEngineConfigured = false;
+    // Command Center state
+    CommandViewMode = 'workflows';
+    StatusFilter = 'all';
+    SearchQuery = '';
+    SelectedAgentFilter = 'all';
+    WorkflowGroups = [];
+    FilteredWorkflowGroups = [];
+    AvailableAgents = [];
+    InspectedGroup = null;
+    InspectedStep = null;
+    CopiedOutput = false;
+    Kpis = {
+        TotalWorkflows: 0,
+        TotalSteps: 0,
+        ActiveWorkflows: 0,
+        CompletedSteps: 0,
+        SuccessRatePercent: 100,
+        AvgExecutionTimeText: '—'
+    };
+    allHierarchyTasks = [];
+    streamSubscription = null;
+    livePollTimer = null;
     ngOnInit() {
         this.LoadTasks();
+        this.setupLiveTaskGraphSubscription();
     }
     ngOnChanges(changes) {
-        // Reload tasks if baseFilter changes
-        if (changes['baseFilter'] && !changes['baseFilter'].firstChange) {
+        const filterChanged = (key) => !!changes[key] && !changes[key].firstChange;
+        if (filterChanged('baseFilter') || filterChanged('BaseFilter') || filterChanged('BaseFilterResolver')) {
             this.LoadTasks();
         }
-        // Auto-drill into task if activeTaskId changes
-        if (changes['activeTaskId'] && this.ActiveTaskId) {
-            const task = this.AllTasks.find(t => UUIDsEqual(t.ID, this.ActiveTaskId));
-            if (task) {
-                this.OnTaskClick(task);
+        if ((changes['activeTaskId'] || changes['ActiveTaskId']) && this.ActiveTaskId) {
+            this.selectTaskById(this.ActiveTaskId);
+        }
+    }
+    ngOnDestroy() {
+        if (this.streamSubscription) {
+            this.streamSubscription.unsubscribe();
+            this.streamSubscription = null;
+        }
+        this.stopLivePolling();
+    }
+    setupLiveTaskGraphSubscription() {
+        try {
+            const runtime = ConversationsRuntime.Instance;
+            if (runtime?.Streaming?.TaskGraphEvents$) {
+                this.streamSubscription = runtime.Streaming.TaskGraphEvents$.subscribe(() => {
+                    void this.LoadTasks();
+                });
             }
         }
+        catch {
+            // Safe no-op in isolated test contexts
+        }
+    }
+    updateLivePollingState() {
+        const hasActive = this.WorkflowGroups.some(g => g.NormalizedCategory === 'active');
+        if (hasActive && !this.livePollTimer) {
+            this.livePollTimer = setInterval(() => {
+                void this.LoadTasks();
+            }, 4000);
+        }
+        else if (!hasActive && this.livePollTimer) {
+            this.stopLivePolling();
+        }
+    }
+    stopLivePolling() {
+        if (this.livePollTimer) {
+            clearInterval(this.livePollTimer);
+            this.livePollTimer = null;
+        }
     }
     async LoadTasks() {
         this.isLoading = true;
         try {
-            // Configure AIEngineBase on first load (false = don't force refresh)
             if (!this.aiEngineConfigured) {
                 await AIEngineBase.Instance.Config(false);
                 this.aiEngineConfigured = true;
             }
             const rv = RunView.FromMetadataProvider(this.ProviderToUse);
-            console.log('📝 Tasks filter SQL:', this.BaseFilter);
-            // Load all tasks with the provided filter
+            const filter = this.BaseFilterResolver ? await this.BaseFilterResolver() : this.BaseFilter;
             const tasksResult = await rv.RunView({
                 EntityName: 'MJ: Tasks',
-                ExtraFilter: this.BaseFilter,
+                ExtraFilter: filter,
                 OrderBy: '__mj_CreatedAt DESC',
                 MaxRows: 1000,
-                ResultType: 'entity_object'
+                ResultType: 'entity_object',
+                BypassCache: true
             }, this.CurrentUser);
-            console.log('📊 Tasks query result:', {
-                success: tasksResult.Success,
-                resultCount: tasksResult.Results?.length || 0,
-                errorMessage: tasksResult.ErrorMessage
-            });
             if (tasksResult.Success) {
                 this.AllTasks = tasksResult.Results || [];
                 this.FilteredTasks = this.AllTasks;
-                console.log(`📋 Loaded ${this.AllTasks.length} tasks`);
-                if (this.AllTasks.length === 0) {
-                    console.log('💡 No tasks found with current filter');
-                }
-                else {
-                    console.log('✅ Sample task:', {
-                        id: this.AllTasks[0].ID,
-                        name: this.AllTasks[0].Name,
-                        status: this.AllTasks[0].Status,
-                        conversationDetailID: this.AllTasks[0].ConversationDetailID
-                    });
-                }
+                await this.loadChildTasksAndDependencies(rv, this.AllTasks);
+                this.rebuildWorkflowCommandCenter();
             }
             else {
-                console.error('❌ Failed to load tasks:', tasksResult.ErrorMessage);
                 this.AllTasks = [];
                 this.FilteredTasks = [];
+                this.allHierarchyTasks = [];
+                this.WorkflowGroups = [];
+                this.FilteredWorkflowGroups = [];
             }
         }
         catch (error) {
             console.error('Failed to load tasks:', error);
             this.AllTasks = [];
             this.FilteredTasks = [];
+            this.allHierarchyTasks = [];
+            this.WorkflowGroups = [];
+            this.FilteredWorkflowGroups = [];
         }
         finally {
             this.isLoading = false;
+            this.updateLivePollingState();
+            this.cdr?.markForCheck();
         }
     }
     /** @deprecated Use {@link LoadTasks}. */
     async loadTasks() {
         return this.LoadTasks();
     }
-    async OnTaskClick(task) {
-        console.log('Task clicked:', task);
-        this.SelectedTask = task;
-        this.ShowDetailAnimation = true;
-        // Emit task selection event for URL tracking
-        this.TaskSelected.emit(task.ID);
-        // Load all tasks in the hierarchy using RootParentID
-        await this.loadTaskHierarchy(task);
-    }
-    /** @deprecated Use {@link OnTaskClick}. */
-    async onTaskClick(task) {
-        return this.OnTaskClick(task);
-    }
-    async loadTaskHierarchy(task) {
-        try {
-            const rv = RunView.FromMetadataProvider(this.ProviderToUse);
-            // Use RootParentID to load all tasks in this hierarchy
-            // If task has no RootParentID, it's the root itself, so use its ID
-            const rootId = task.RootParentID || task.ID;
-            // Load all tasks where RootParentID matches, or tasks that are the root itself
-            const hierarchyResult = await rv.RunView({
-                EntityName: 'MJ: Tasks',
-                ExtraFilter: `RootParentID='${rootId}' OR ID='${rootId}'`,
-                OrderBy: '__mj_CreatedAt ASC',
-                MaxRows: 1000,
-                ResultType: 'entity_object'
-            }, this.CurrentUser);
-            if (hierarchyResult.Success) {
-                const allHierarchy = hierarchyResult.Results || [];
-                // For list view: Filter out the clicked task itself - only show its children/descendants
-                this.SubTasks = allHierarchy.filter(t => !UUIDsEqual(t.ID, task.ID));
-                // For Gantt view: Include the parent task so hierarchy works correctly
-                this.SubTasksWithParent = allHierarchy;
-                console.log(`📋 Loaded ${this.SubTasks.length} tasks in hierarchy for root ${rootId}`);
-                // Load task dependencies for this hierarchy
-                await this.loadTaskDependencies(rootId);
-                // Load agent runs for this hierarchy
-                this.loadAgentRuns(allHierarchy);
-            }
-            else {
-                console.error('❌ Failed to load task hierarchy:', hierarchyResult.ErrorMessage);
-                this.SubTasks = [];
-                this.SubTasksWithParent = [];
-                this.TaskDependencies = [];
+    /**
+     * Ensures child step tasks and dependencies are loaded even when the primary filter
+     * scopes to top-level (`ParentID IS NULL`) tasks.
+     */
+    async loadChildTasksAndDependencies(rv, primaryTasks) {
+        const mergedMap = new Map();
+        for (const t of primaryTasks) {
+            if (t?.ID) {
+                mergedMap.set(t.ID.toLowerCase(), t);
             }
         }
-        catch (error) {
-            console.error('Failed to load task hierarchy:', error);
-            this.SubTasks = [];
+        const rootIds = Array.from(new Set(primaryTasks
+            .map(t => t.RootParentID || t.ParentID || t.ID)
+            .filter((id) => Boolean(id))));
+        if (rootIds.length > 0) {
+            const quotedIds = rootIds.map(id => `'${EscapeSQLString(id)}'`).join(',');
+            try {
+                const childrenResult = await rv.RunView({
+                    EntityName: 'MJ: Tasks',
+                    ExtraFilter: `ParentID IN (${quotedIds}) OR RootParentID IN (${quotedIds})`,
+                    OrderBy: '__mj_CreatedAt ASC',
+                    MaxRows: 1000,
+                    ResultType: 'entity_object',
+                    BypassCache: true
+                }, this.CurrentUser);
+                if (childrenResult.Success && childrenResult.Results) {
+                    for (const child of childrenResult.Results) {
+                        if (child?.ID && !mergedMap.has(child.ID.toLowerCase())) {
+                            mergedMap.set(child.ID.toLowerCase(), child);
+                        }
+                    }
+                }
+            }
+            catch {
+                // Fallback to primaryTasks when running against minimal unit-test fake providers
+            }
+            const allTaskIds = Array.from(mergedMap.values())
+                .map(t => t.ID)
+                .filter((id) => Boolean(id));
+            if (allTaskIds.length > 0) {
+                const quotedAllIds = allTaskIds.slice(0, 300).map(id => `'${EscapeSQLString(id)}'`).join(',');
+                try {
+                    const depsResult = await rv.RunView({
+                        EntityName: 'MJ: Task Dependencies',
+                        ExtraFilter: `TaskID IN (${quotedAllIds}) OR DependsOnTaskID IN (${quotedAllIds})`,
+                        ResultType: 'entity_object'
+                    }, this.CurrentUser);
+                    if (depsResult.Success && depsResult.Results) {
+                        this.TaskDependencies = depsResult.Results;
+                    }
+                }
+                catch {
+                    // Optional dependency enrichment
+                }
+            }
         }
+        this.allHierarchyTasks = Array.from(mergedMap.values());
+        this.loadAgentRuns(this.allHierarchyTasks);
     }
-    async loadTaskDependencies(rootId) {
-        try {
-            const rv = RunView.FromMetadataProvider(this.ProviderToUse);
-            // Load task dependencies where either TaskID or DependsOnTaskID is in this hierarchy
-            // Use subquery to find all tasks with this RootParentID
-            // Note: Using __mj as the default schema - this is the standard MJ schema
-            const schema = '__mj';
-            const depsResult = await rv.RunView({
-                EntityName: 'MJ: Task Dependencies',
-                ExtraFilter: `
-            TaskID IN (SELECT ID FROM [${schema}].[vwTasks] WHERE RootParentID='${rootId}' OR ID='${rootId}')
-            OR
-            DependsOnTaskID IN (SELECT ID FROM [${schema}].[vwTasks] WHERE RootParentID='${rootId}' OR ID='${rootId}')
-          `,
-                ResultType: 'entity_object'
-            }, this.CurrentUser);
-            if (depsResult.Success) {
-                this.TaskDependencies = depsResult.Results || [];
-                console.log(`🔗 Loaded ${this.TaskDependencies.length} task dependencies`);
+    /**
+     * Builds the hierarchy-aware `WorkflowGroups`, KPI metrics, and agent filter options.
+     */
+    rebuildWorkflowCommandCenter() {
+        const tasks = this.allHierarchyTasks.length > 0 ? this.allHierarchyTasks : this.AllTasks;
+        const taskById = new Map();
+        for (const t of tasks) {
+            if (t?.ID) {
+                taskById.set(t.ID.toLowerCase(), t);
             }
-            else {
-                console.error('❌ Failed to load task dependencies:', depsResult.ErrorMessage);
-                this.TaskDependencies = [];
+        }
+        // Group tasks by root workflow ID
+        const buckets = new Map();
+        for (const t of tasks) {
+            if (!t?.ID)
+                continue;
+            const rootKey = (t.RootParentID || t.ParentID || t.ID).toLowerCase();
+            const list = buckets.get(rootKey) ?? [];
+            list.push(t);
+            buckets.set(rootKey, list);
+        }
+        const depsByTaskId = new Map();
+        for (const dep of this.TaskDependencies) {
+            if (dep?.TaskID) {
+                const key = dep.TaskID.toLowerCase();
+                const existing = depsByTaskId.get(key) ?? [];
+                existing.push(dep);
+                depsByTaskId.set(key, existing);
             }
         }
-        catch (error) {
-            console.error('Failed to load task dependencies:', error);
-            this.TaskDependencies = [];
+        const groups = [];
+        const agentUsageMap = new Map();
+        for (const [rootKey, bucket] of buckets.entries()) {
+            const parentTask = bucket.find(t => t.ID.toLowerCase() === rootKey) ??
+                bucket.find(t => !t.ParentID) ??
+                bucket[0];
+            const childSteps = ExcludeByUUIDs(bucket, [parentTask.ID]);
+            const rawSteps = childSteps.length > 0 ? childSteps : [parentTask];
+            // Sort steps chronologically by StartedAt / __mj_CreatedAt
+            const sortedRawSteps = [...rawSteps].sort((a, b) => {
+                const aTime = this.toEpochMs(a.StartedAt ?? a.__mj_CreatedAt);
+                const bTime = this.toEpochMs(b.StartedAt ?? b.__mj_CreatedAt);
+                return aTime - bTime;
+            });
+            // Calculate workflow time bounds
+            const startCandidates = bucket
+                .map(t => this.toEpochMs(t.StartedAt ?? t.__mj_CreatedAt))
+                .filter(ms => ms > 0);
+            const endCandidates = bucket
+                .map(t => this.toEpochMs(t.CompletedAt ?? t.__mj_UpdatedAt))
+                .filter(ms => ms > 0);
+            const workflowStartMs = startCandidates.length > 0 ? Math.min(...startCandidates) : 0;
+            const workflowEndMs = endCandidates.length > 0 ? Math.max(...endCandidates) : workflowStartMs;
+            const totalSpanMs = Math.max(1000, workflowEndMs - workflowStartMs);
+            const pipelineAgents = [];
+            const seenPipelineAgents = new Set();
+            const seenUpstreamKeyValues = new Map();
+            const enrichedSteps = sortedRawSteps.map((stepTask, idx) => {
+                const agentName = this.resolveAgentName(stepTask);
+                const agentId = stepTask.AgentID || null;
+                if (agentId && agentName) {
+                    const lowerId = agentId.toLowerCase();
+                    if (!seenPipelineAgents.has(lowerId)) {
+                        seenPipelineAgents.add(lowerId);
+                        pipelineAgents.push({ id: agentId, name: agentName });
+                    }
+                    const existingUsage = agentUsageMap.get(lowerId);
+                    if (existingUsage) {
+                        existingUsage.count += 1;
+                    }
+                    else {
+                        agentUsageMap.set(lowerId, { id: agentId, name: agentName, count: 1 });
+                    }
+                }
+                const { instructions, output: rawDescOutput, isError } = this.splitTaskDescription(stepTask.Description || '');
+                const deltaPayloadOutput = this.resolveDeltaStepOutput(stepTask.OutputPayload, seenUpstreamKeyValues);
+                const output = (!rawDescOutput || rawDescOutput.startsWith('output available (')) && deltaPayloadOutput
+                    ? deltaPayloadOutput
+                    : rawDescOutput;
+                const stepStartMs = this.toEpochMs(stepTask.StartedAt ?? stepTask.__mj_CreatedAt) || workflowStartMs;
+                const stepEndMs = this.toEpochMs(stepTask.CompletedAt) ||
+                    (stepTask.Status === 'In Progress' ? Date.now() : stepStartMs + 1000);
+                const stepDurationMs = Math.max(0, stepEndMs - stepStartMs);
+                const rawOffsetPct = workflowStartMs > 0
+                    ? ((stepStartMs - workflowStartMs) / totalSpanMs) * 100
+                    : idx * (80 / Math.max(1, sortedRawSteps.length));
+                const offsetPct = Math.max(0, Math.min(86, Math.round(rawOffsetPct)));
+                const rawWidthPct = (Math.max(1000, stepDurationMs) / totalSpanMs) * 100;
+                const widthPct = Math.max(14, Math.min(100 - offsetPct, Math.round(rawWidthPct)));
+                const startOffsetSec = Math.max(0, Math.round((stepStartMs - workflowStartMs) / 1000));
+                // Resolve dependencies for this step
+                const stepDeps = stepTask.ID ? (depsByTaskId.get(stepTask.ID.toLowerCase()) ?? []) : [];
+                const dependsOnNames = [];
+                const dependsOnTaskIds = [];
+                const dependsOnConditions = [];
+                for (const dep of stepDeps) {
+                    if (dep.DependsOnTaskID) {
+                        dependsOnTaskIds.push(dep.DependsOnTaskID);
+                        const prereq = taskById.get(dep.DependsOnTaskID.toLowerCase());
+                        if (prereq?.Name) {
+                            dependsOnNames.push(prereq.Name);
+                        }
+                    }
+                    if (dep.Condition && dep.Condition.trim().length > 0) {
+                        dependsOnConditions.push(dep.Condition.trim());
+                    }
+                }
+                const isSkipped = stepTask.Status === 'Skipped';
+                const effectiveDurationMs = isSkipped ? 0 : stepDurationMs;
+                const rawPreview = isSkipped && !output
+                    ? dependsOnConditions.length > 0
+                        ? `Skipped (condition not met: ${dependsOnConditions.join(' AND ')}) — ${instructions || ''}`
+                        : `Skipped (conditional prerequisite not met) — ${instructions || ''}`
+                    : output || instructions || '';
+                const cleanPreview = rawPreview.replace(/[#*`_~]/g, '').replace(/\s+/g, ' ').trim();
+                return {
+                    Task: stepTask,
+                    StepNumber: idx + 1,
+                    AgentName: agentName,
+                    AgentID: agentId,
+                    AgentRunID: stepTask.AgentRunID || null,
+                    Instructions: instructions,
+                    Output: output,
+                    IsErrorOutput: isError,
+                    OutputPreview: cleanPreview.length > 180 ? `${cleanPreview.substring(0, 180)}...` : cleanPreview,
+                    DurationText: isSkipped ? '' : this.formatDurationMs(effectiveDurationMs, Boolean(stepTask.StartedAt)),
+                    DurationMs: effectiveDurationMs,
+                    TimelineOffsetPercent: offsetPct,
+                    TimelineWidthPercent: widthPct,
+                    StartOffsetLabel: `+${startOffsetSec}s`,
+                    DependsOnNames: dependsOnNames,
+                    DependsOnTaskIds: dependsOnTaskIds,
+                    DependsOnConditions: dependsOnConditions
+                };
+            });
+            const totalSteps = enrichedSteps.length;
+            const completedSteps = enrichedSteps.filter(s => s.Task.Status === 'Complete').length;
+            const skippedSteps = enrichedSteps.filter(s => s.Task.Status === 'Skipped').length;
+            const failedSteps = enrichedSteps.filter(s => s.Task.Status === 'Failed' || s.Task.Status === 'Cancelled' || s.Task.Status === 'Blocked').length;
+            const activeSteps = enrichedSteps.filter(s => s.Task.Status === 'In Progress' || s.Task.Status === 'Pending').length;
+            let category = 'active';
+            if (failedSteps > 0 || parentTask.Status === 'Failed' || parentTask.Status === 'Cancelled') {
+                category = 'failed';
+            }
+            else if ((completedSteps + skippedSteps) === totalSteps || parentTask.Status === 'Complete') {
+                category = 'completed';
+            }
+            const percentComplete = category === 'completed'
+                ? 100
+                : totalSteps > 0
+                    ? Math.round(((completedSteps + skippedSteps) / totalSteps) * 100)
+                    : parentTask.PercentComplete ?? 0;
+            const { instructions: parentInstructions } = this.splitTaskDescription(parentTask.Description || '');
+            const wfStartDate = parentTask.StartedAt ?? sortedRawSteps[0]?.StartedAt ?? parentTask.__mj_CreatedAt ?? null;
+            const wfEndDate = parentTask.CompletedAt ?? sortedRawSteps[sortedRawSteps.length - 1]?.CompletedAt ?? null;
+            const wfDurationMs = wfStartDate && wfEndDate
+                ? Math.max(0, new Date(wfEndDate).getTime() - new Date(wfStartDate).getTime())
+                : enrichedSteps.reduce((acc, s) => acc + s.DurationMs, 0);
+            groups.push({
+                RootTaskId: parentTask.ID,
+                ParentTask: parentTask,
+                Title: parentTask.Name || 'Agent Workflow',
+                SummaryInstruction: parentInstructions,
+                Status: parentTask.Status,
+                NormalizedCategory: category,
+                PercentComplete: percentComplete,
+                TotalSteps: totalSteps,
+                CompletedSteps: completedSteps,
+                SkippedSteps: skippedSteps,
+                ActiveSteps: activeSteps,
+                FailedSteps: failedSteps,
+                Steps: enrichedSteps,
+                AgentPipeline: pipelineAgents,
+                StartedAt: wfStartDate ? new Date(wfStartDate) : null,
+                CompletedAt: wfEndDate ? new Date(wfEndDate) : null,
+                DurationText: this.formatDurationMs(wfDurationMs, wfDurationMs > 0),
+                DurationMs: wfDurationMs,
+                RelativeTimeText: this.formatRelativeTime(wfStartDate),
+                ConversationDetailID: parentTask.ConversationDetailID || sortedRawSteps[0]?.ConversationDetailID || null,
+                IsMultiStep: childSteps.length > 0
+            });
+        }
+        // Sort workflows newest first
+        groups.sort((a, b) => {
+            const aMs = a.StartedAt ? a.StartedAt.getTime() : 0;
+            const bMs = b.StartedAt ? b.StartedAt.getTime() : 0;
+            return bMs - aMs;
+        });
+        this.WorkflowGroups = groups;
+        this.AvailableAgents = Array.from(agentUsageMap.values()).sort((a, b) => b.count - a.count);
+        this.computeCommandCenterKPIs(groups);
+        this.ApplyWorkflowFilters();
+        // Refresh open inspector drawer if active
+        if (this.ActiveTaskId) {
+            this.selectTaskById(this.ActiveTaskId, false);
+        }
+        else if (this.InspectedGroup) {
+            const updatedGroup = IndexByUUID(groups, g => g.RootTaskId).Get(this.InspectedGroup.RootTaskId) ?? null;
+            this.InspectedGroup = updatedGroup;
+            if (updatedGroup && this.InspectedStep) {
+                this.InspectedStep =
+                    IndexByUUID(updatedGroup.Steps, s => s.Task.ID).Get(this.InspectedStep.Task.ID) ??
+                        updatedGroup.Steps[0] ??
+                        null;
+            }
         }
     }
-    /**
-     * Builds the TaskID -> AgentRunID map from each task's own AgentRunID column.
-     *
-     * Previously this joined tasks to runs through the shared ConversationDetailID, which meant
-     * every sibling task in a graph resolved to the SAME agent run — the run link in the Gantt
-     * and detail panel was wrong for all but one task. Each task now records the specific run
-     * that executed it (Task.AgentRunID), so the mapping is direct and needs no query at all.
-     */
-    loadAgentRuns(tasks) {
-        this.AgentRunMap.clear();
-        for (const task of tasks) {
-            if (task.AgentRunID) {
-                this.AgentRunMap.set(task.ID, task.AgentRunID);
+    computeCommandCenterKPIs(groups) {
+        const totalWorkflows = groups.length;
+        const totalSteps = groups.reduce((sum, g) => sum + g.TotalSteps, 0);
+        const activeWorkflows = groups.filter(g => g.NormalizedCategory === 'active').length;
+        const completedSteps = groups.reduce((sum, g) => sum + g.CompletedSteps, 0);
+        const failedSteps = groups.reduce((sum, g) => sum + g.FailedSteps, 0);
+        const terminalSteps = completedSteps + failedSteps;
+        const successRate = terminalSteps > 0 ? Math.round((completedSteps / terminalSteps) * 100) : 100;
+        const completedWithDuration = groups.filter(g => g.NormalizedCategory === 'completed' && g.DurationMs > 0);
+        const avgMs = completedWithDuration.length > 0
+            ? Math.round(completedWithDuration.reduce((sum, g) => sum + g.DurationMs, 0) / completedWithDuration.length)
+            : 0;
+        this.Kpis = {
+            TotalWorkflows: totalWorkflows,
+            TotalSteps: totalSteps,
+            ActiveWorkflows: activeWorkflows,
+            CompletedSteps: completedSteps,
+            SuccessRatePercent: successRate,
+            AvgExecutionTimeText: avgMs > 0 ? this.formatDurationMs(avgMs, true) : '—'
+        };
+    }
+    ApplyWorkflowFilters() {
+        const q = this.SearchQuery.trim().toLowerCase();
+        this.FilteredWorkflowGroups = this.WorkflowGroups.filter(group => {
+            if (this.StatusFilter !== 'all' && group.NormalizedCategory !== this.StatusFilter) {
+                return false;
+            }
+            if (this.SelectedAgentFilter !== 'all') {
+                const stepAgentIds = new UUIDSet(group.Steps.map(s => s.AgentID));
+                if (!stepAgentIds.Has(this.SelectedAgentFilter))
+                    return false;
+            }
+            if (q) {
+                const titleMatch = group.Title.toLowerCase().includes(q);
+                const stepMatch = group.Steps.some(s => (s.Task.Name || '').toLowerCase().includes(q) ||
+                    s.Instructions.toLowerCase().includes(q) ||
+                    (s.Output || '').toLowerCase().includes(q) ||
+                    (s.AgentName || '').toLowerCase().includes(q));
+                return titleMatch || stepMatch;
+            }
+            return true;
+        });
+    }
+    /** @deprecated Use {@link ApplyWorkflowFilters}. */
+    applyWorkflowFilters() {
+        this.ApplyWorkflowFilters();
+    }
+    SetCommandViewMode(mode) {
+        this.CommandViewMode = mode;
+    }
+    SetStatusFilter(filter) {
+        this.StatusFilter = filter;
+        this.ApplyWorkflowFilters();
+    }
+    SetAgentFilter(agentId) {
+        this.SelectedAgentFilter = agentId;
+        this.ApplyWorkflowFilters();
+    }
+    OnFilterCriteriaChanged() {
+        this.ApplyWorkflowFilters();
+    }
+    ClearSearch() {
+        this.SearchQuery = '';
+        this.ApplyWorkflowFilters();
+    }
+    ResetAllFilters() {
+        this.SearchQuery = '';
+        this.StatusFilter = 'all';
+        this.SelectedAgentFilter = 'all';
+        this.ApplyWorkflowFilters();
+    }
+    CountByCategory(category) {
+        return this.WorkflowGroups.filter(g => g.NormalizedCategory === category).length;
+    }
+    GetStepCategory(status) {
+        if (status === 'Complete')
+            return 'completed';
+        if (status === 'Skipped')
+            return 'skipped';
+        if (status === 'Failed' || status === 'Cancelled' || status === 'Blocked')
+            return 'failed';
+        return 'active';
+    }
+    IsGroupInspected(group) {
+        return Boolean(this.InspectedGroup && UUIDsEqual(this.InspectedGroup.RootTaskId, group.RootTaskId));
+    }
+    IsStepInspected(task) {
+        return Boolean(this.InspectedStep && UUIDsEqual(this.InspectedStep.Task.ID, task.ID));
+    }
+    InspectWorkflowGroup(group, step, event) {
+        event?.stopPropagation();
+        this.InspectedGroup = group;
+        this.InspectedStep = step ?? group.Steps[0] ?? null;
+        this.SelectedTask = step ? step.Task : group.ParentTask;
+        this.SubTasks = group.Steps.map(s => s.Task);
+        this.SubTasksWithParent = [group.ParentTask, ...this.SubTasks];
+        this.ShowDetailAnimation = true;
+        this.TaskSelected.emit(this.SelectedTask.ID);
+    }
+    SelectInspectorStep(step) {
+        this.InspectedStep = step;
+        this.SelectedTask = step.Task;
+        this.TaskSelected.emit(step.Task.ID);
+    }
+    selectTaskById(taskId, emitEvent = true) {
+        for (const group of this.WorkflowGroups) {
+            if (UUIDsEqual(group.RootTaskId, taskId)) {
+                this.InspectedGroup = group;
+                this.InspectedStep = group.Steps[0] ?? null;
+                this.SelectedTask = group.ParentTask;
+                if (emitEvent) {
+                    this.TaskSelected.emit(taskId);
+                }
+                return;
+            }
+            const stepMatch = IndexByUUID(group.Steps, s => s.Task.ID).Get(taskId);
+            if (stepMatch) {
+                this.InspectedGroup = group;
+                this.InspectedStep = stepMatch;
+                this.SelectedTask = stepMatch.Task;
+                if (emitEvent) {
+                    this.TaskSelected.emit(taskId);
+                }
+                return;
             }
         }
     }
+    async OnTaskClick(task) {
+        this.SelectedTask = task;
+        this.ShowDetailAnimation = true;
+        this.TaskSelected.emit(task.ID);
+        this.selectTaskById(task.ID, false);
+    }
+    /** @deprecated Use {@link OnTaskClick}. */
+    async onTaskClick(task) {
+        return this.OnTaskClick(task);
+    }
     BackToTaskList() {
+        this.InspectedGroup = null;
+        this.InspectedStep = null;
         this.SelectedTask = null;
         this.SubTasks = [];
         this.SubTasksWithParent = [];
-        this.TaskDependencies = [];
-        this.AgentRunMap.clear();
         this.ShowDetailAnimation = false;
-        // Emit null to indicate returning to task list (for URL tracking)
         this.TaskSelected.emit(null);
     }
     /** @deprecated Use {@link BackToTaskList}. */
@@ -359,21 +1420,167 @@ export class TasksFullViewComponent extends BaseAngularComponent {
         return this.BackToTaskList();
     }
     OnSubTaskClick(subTask) {
-        console.log('Sub-task clicked:', subTask);
-        // Could drill down further if needed
+        this.selectTaskById(subTask.ID, true);
     }
     /** @deprecated Use {@link OnSubTaskClick}. */
     onSubTaskClick(subTask) {
         return this.OnSubTaskClick(subTask);
     }
+    OnAgentChipClicked(event, agentId) {
+        event.stopPropagation();
+        if (agentId) {
+            this.OpenEntityRecord.emit({
+                entityName: 'MJ: AI Agents',
+                recordId: agentId
+            });
+        }
+    }
+    OnOpenAgentRunClicked(event, agentRunId) {
+        event.stopPropagation();
+        if (agentRunId) {
+            this.OpenEntityRecord.emit({
+                entityName: 'MJ: AI Agent Runs',
+                recordId: agentRunId
+            });
+        }
+    }
     OnOpenEntityRecord(event) {
-        // Bubble up the event to parent component
         this.OpenEntityRecord.emit(event);
     }
     /** @deprecated Use {@link OnOpenEntityRecord}. */
     onOpenEntityRecord(event) {
         return this.OnOpenEntityRecord(event);
     }
+    CopyStepOutput(output) {
+        if (typeof navigator !== 'undefined' && navigator.clipboard) {
+            void navigator.clipboard.writeText(output);
+            this.CopiedOutput = true;
+            setTimeout(() => {
+                this.CopiedOutput = false;
+                this.cdr?.markForCheck();
+            }, 1800);
+        }
+    }
+    loadAgentRuns(tasks) {
+        this.AgentRunMap.clear();
+        for (const task of tasks) {
+            if (task?.ID && task.AgentRunID) {
+                this.AgentRunMap.set(task.ID, task.AgentRunID);
+            }
+        }
+    }
+    resolveAgentName(task) {
+        if (task.Agent) {
+            return task.Agent;
+        }
+        if (task.AgentID) {
+            const agents = AIEngineBase.Instance.Agents || [];
+            const found = agents.find((a) => UUIDsEqual(a.ID, task.AgentID));
+            if (found?.Name) {
+                return found.Name;
+            }
+        }
+        return null;
+    }
+    splitTaskDescription(raw) {
+        const outputMarker = '\n\n--- Output ---\n';
+        const errorMarker = '\n\n--- Error ---\n';
+        const outIdx = raw.indexOf(outputMarker);
+        if (outIdx >= 0) {
+            return {
+                instructions: raw.substring(0, outIdx).trim(),
+                output: raw.substring(outIdx + outputMarker.length).trim(),
+                isError: false
+            };
+        }
+        const errIdx = raw.indexOf(errorMarker);
+        if (errIdx >= 0) {
+            return {
+                instructions: raw.substring(0, errIdx).trim(),
+                output: raw.substring(errIdx + errorMarker.length).trim(),
+                isError: true
+            };
+        }
+        return {
+            instructions: raw.trim(),
+            output: null,
+            isError: false
+        };
+    }
+    /**
+     * Strips upstream keys inherited unchanged from earlier workflow steps and returns a formatted
+     * human-readable or JSON excerpt for the step inspector drawer.
+     */
+    resolveDeltaStepOutput(rawPayload, seenUpstreamKeyValues) {
+        const trimmed = rawPayload?.trim();
+        if (!trimmed) {
+            return null;
+        }
+        try {
+            const parsed = JSON.parse(trimmed);
+            if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+                const delta = {};
+                for (const [k, v] of Object.entries(parsed)) {
+                    const serializedVal = JSON.stringify(v);
+                    if (seenUpstreamKeyValues.get(k) !== serializedVal) {
+                        delta[k] = v;
+                    }
+                    seenUpstreamKeyValues.set(k, serializedVal);
+                }
+                const source = Object.keys(delta).length > 0 ? delta : parsed;
+                return JSON.stringify(source, null, 2);
+            }
+        }
+        catch {
+            // Non-JSON payload; return as-is.
+        }
+        return trimmed;
+    }
+    toEpochMs(date) {
+        if (!date)
+            return 0;
+        const ms = new Date(date).getTime();
+        return Number.isFinite(ms) ? ms : 0;
+    }
+    formatDurationMs(durationMs, hasStarted) {
+        if (!hasStarted || durationMs <= 0)
+            return '';
+        const totalSeconds = Math.max(1, Math.round(durationMs / 1000));
+        if (totalSeconds < 60) {
+            return `${totalSeconds}s`;
+        }
+        const minutes = Math.floor(totalSeconds / 60);
+        const seconds = totalSeconds % 60;
+        return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;
+    }
+    formatRelativeTime(date) {
+        if (!date)
+            return '';
+        const ms = new Date(date).getTime();
+        if (!Number.isFinite(ms))
+            return '';
+        const diffSec = Math.round((Date.now() - ms) / 1000);
+        if (diffSec < 60)
+            return 'Just now';
+        if (diffSec < 3600)
+            return `${Math.floor(diffSec / 60)}m ago`;
+        if (diffSec < 86400)
+            return `${Math.floor(diffSec / 3600)}h ago`;
+        return new Date(date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+    }
+    FormatDateTime(date) {
+        if (!date)
+            return '';
+        const d = new Date(date);
+        return d.toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit'
+        });
+    }
     getDescription() {
         const activeCount = this.AllTasks.filter(t => t.Status === 'Pending' || t.Status === 'In Progress').length;
         const completedCount = this.AllTasks.filter(t => t.Status === 'Complete').length;
@@ -392,61 +1599,865 @@ export class TasksFullViewComponent extends BaseAngularComponent {
         return this.GetTaskDetailDescription();
     }
     static ɵfac = /*@__PURE__*/ (() => { let ɵTasksFullViewComponent_BaseFactory; return function TasksFullViewComponent_Factory(__ngFactoryType__) { return (ɵTasksFullViewComponent_BaseFactory || (ɵTasksFullViewComponent_BaseFactory = i0.ɵɵgetInheritedFactory(TasksFullViewComponent)))(__ngFactoryType__ || TasksFullViewComponent); }; })();
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TasksFullViewComponent, selectors: [["mj-tasks-full-view"]], inputs: { EnvironmentId: "EnvironmentId", environmentId: "environmentId", CurrentUser: "CurrentUser", currentUser: "currentUser", BaseFilter: "BaseFilter", baseFilter: "baseFilter", ActiveTaskId: "ActiveTaskId", activeTaskId: "activeTaskId" }, outputs: { OpenEntityRecord: "OpenEntityRecord", openEntityRecord: "openEntityRecord", TaskSelected: "TaskSelected", taskSelected: "taskSelected" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 3, vars: 1, consts: [[1, "tasks-full-view"], [3, "tasks", "title", "description", "showHeader", "showViewToggle", "viewMode"], [1, "task-detail-view", 3, "swoosh-in"], [3, "taskClicked", "tasks", "title", "description", "showHeader", "showViewToggle", "viewMode"], [1, "task-detail-view"], [1, "breadcrumb-nav"], [1, "breadcrumb-back", 3, "click"], [1, "fas", "fa-arrow-left"], [1, "breadcrumb-divider"], [1, "breadcrumb-current"], [3, "taskClicked", "openEntityRecord", "tasks", "ganttTasks", "taskDependencies", "agentRunMap", "title", "description", "showHeader", "showViewToggle", "viewMode"]], template: function TasksFullViewComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵconditionalCreate(1, TasksFullViewComponent_Conditional_1_Template, 1, 6, "mj-task", 1)(2, TasksFullViewComponent_Conditional_2_Template, 11, 12, "div", 2);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TasksFullViewComponent, selectors: [["mj-tasks-full-view"]], inputs: { EnvironmentId: "EnvironmentId", environmentId: "environmentId", CurrentUser: "CurrentUser", currentUser: "currentUser", BaseFilter: "BaseFilter", baseFilter: "baseFilter", BaseFilterResolver: "BaseFilterResolver", ActiveTaskId: "ActiveTaskId", activeTaskId: "activeTaskId" }, outputs: { OpenEntityRecord: "OpenEntityRecord", openEntityRecord: "openEntityRecord", TaskSelected: "TaskSelected", taskSelected: "taskSelected" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 119, vars: 37, consts: [[1, "tasks-command-center"], [1, "cc-header"], [1, "cc-header-left"], [1, "cc-title-icon"], [1, "fa-solid", "fa-diagram-project"], [1, "cc-title-block"], [1, "cc-title-row"], [1, "cc-title"], [1, "cc-live-pill"], [1, "cc-subtitle"], [1, "cc-header-actions"], ["role", "tablist", "aria-label", "View Mode", 1, "cc-view-switcher"], ["type", "button", 1, "cc-view-btn", 3, "click"], [1, "fa-solid", "fa-layer-group"], [1, "fa-solid", "fa-bars-staggered"], ["type", "button", "title", "Refresh workflows and tasks", 1, "cc-refresh-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-arrows-rotate"], ["aria-label", "Workflow Metrics", 1, "cc-kpi-ribbon"], [1, "cc-kpi-card"], [1, "cc-kpi-icon", "kpi-brand"], [1, "fa-solid", "fa-sitemap"], [1, "cc-kpi-body"], [1, "cc-kpi-label"], [1, "cc-kpi-value-row"], [1, "cc-kpi-value"], [1, "cc-kpi-sub"], [1, "cc-kpi-icon", "kpi-active"], [1, "fa-solid", "fa-bolt"], [1, "cc-kpi-icon", "kpi-success"], [1, "fa-solid", "fa-circle-check"], [1, "cc-kpi-icon", "kpi-rate"], [1, "fa-solid", "fa-chart-line"], [1, "cc-kpi-icon", "kpi-time"], [1, "fa-solid", "fa-stopwatch"], [1, "cc-filter-bar"], [1, "cc-search-box"], [1, "fa-solid", "fa-magnifying-glass", "cc-search-icon"], ["type", "text", "placeholder", "Search workflows, step names, specialist agents, or outputs...", 1, "cc-search-input", 3, "ngModelChange", "ngModel"], ["type", "button", "title", "Clear search", 1, "cc-search-clear"], ["role", "group", "aria-label", "Filter by status", 1, "cc-status-pills"], ["type", "button", 1, "cc-filter-pill", 3, "click"], [1, "cc-pill-count"], ["type", "button", 1, "cc-filter-pill", "pill-active", 3, "click"], [1, "cc-status-dot", "dot-active"], ["type", "button", 1, "cc-filter-pill", "pill-completed", 3, "click"], [1, "cc-status-dot", "dot-completed"], ["type", "button", 1, "cc-filter-pill", "pill-failed", 3, "click"], [1, "cc-status-dot", "dot-failed"], [1, "cc-agent-filter"], [1, "cc-workspace-body"], [1, "cc-main-scroll"], [1, "cc-empty-state"], [1, "cc-workflow-grid"], [1, "cc-timeline-list"], ["aria-label", "Workflow and Step Inspector", 1, "cc-inspector-drawer"], [1, "cc-live-dot"], ["type", "button", "title", "Clear search", 1, "cc-search-clear", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "fa-solid", "fa-robot", "cc-agent-filter-icon"], ["aria-label", "Filter by specialist agent", 1, "cc-agent-select", 3, "ngModelChange", "ngModel"], ["value", "all"], [3, "value"], [1, "cc-empty-icon"], [1, "fa-solid", "fa-circle-notch", "fa-spin"], ["type", "button", 1, "cc-reset-filters-btn", 3, "click"], [1, "fa-solid", "fa-rotate-left"], [1, "cc-workflow-card", 3, "card-active", "card-completed", "card-failed", "card-selected"], [1, "cc-workflow-card", 3, "click"], [1, "cc-wf-header"], [1, "cc-wf-header-left"], [1, "cc-wf-status-icon"], [1, "fa-solid", "fa-check"], [1, "fa-solid", "fa-triangle-exclamation"], [1, "cc-wf-title-group"], [1, "cc-wf-title-line"], [1, "cc-wf-title"], [1, "cc-wf-step-count-badge"], [1, "cc-wf-status-badge"], [1, "cc-wf-agent-pipeline"], [1, "cc-wf-header-right"], ["title", "Total workflow execution duration", 1, "cc-wf-duration"], [1, "cc-wf-timestamp"], ["type", "button", "title", "Open Workflow Inspector", 1, "cc-wf-inspect-btn", 3, "click"], [1, "fa-solid", "fa-chevron-right"], [1, "cc-wf-progress-row"], [1, "cc-wf-progress-track"], [1, "cc-wf-progress-fill"], [1, "cc-wf-progress-label"], [1, "cc-wf-steps-list"], [1, "cc-step-row", 3, "step-selected"], ["type", "button", 1, "cc-agent-chip", 3, "click", "title"], [1, "fa-solid", "fa-robot"], [1, "fa-solid", "fa-arrow-right", "cc-pipeline-arrow"], [1, "fa-regular", "fa-clock"], [1, "cc-step-row", 3, "click"], [1, "cc-step-index"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-forward-step"], [1, "cc-step-main"], [1, "cc-step-top-line"], [1, "cc-step-name"], [1, "cc-step-agent-tag"], [1, "cc-step-dep-tag", 3, "title"], [1, "cc-step-preview", 3, "preview-error"], [1, "cc-step-right"], [1, "cc-step-duration"], [1, "cc-step-status-pill"], ["type", "button", "title", "Open AI Agent Run Telemetry", 1, "cc-step-run-btn"], [1, "fa-solid", "fa-link"], [1, "cc-step-preview"], ["type", "button", "title", "Open AI Agent Run Telemetry", 1, "cc-step-run-btn", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square"], [1, "cc-timeline-card", 3, "card-selected"], [1, "cc-timeline-card"], [1, "cc-timeline-card-header", 3, "click"], [1, "cc-timeline-title-wrap"], [1, "cc-timeline-meta"], [1, "cc-wf-duration"], [1, "cc-waterfall-table"], [1, "cc-waterfall-head"], [1, "cc-wf-col-step"], [1, "cc-wf-col-agent"], [1, "cc-wf-col-bars"], [1, "cc-waterfall-row", 3, "step-selected"], [1, "cc-waterfall-row", 3, "click"], [1, "cc-waterfall-step-text"], [1, "cc-waterfall-dep"], [1, "cc-text-muted"], [1, "cc-waterfall-track"], [1, "cc-waterfall-bar"], [1, "cc-waterfall-bar-label"], [1, "fa-solid", "fa-turn-up", "fa-rotate-90"], [1, "cc-drawer-header"], [1, "cc-drawer-header-top"], [1, "cc-drawer-eyebrow"], [1, "fa-solid", "fa-microscope"], ["type", "button", "title", "Close Inspector", 1, "cc-drawer-close", 3, "click"], [1, "cc-drawer-title"], [1, "cc-drawer-step-tabs"], [1, "cc-drawer-content"], ["type", "button", 1, "cc-drawer-step-tab", 3, "active"], ["type", "button", 1, "cc-drawer-step-tab", 3, "click"], [1, "cc-tab-num"], [1, "cc-tab-label"], [1, "cc-drawer-metrics-grid"], [1, "cc-drawer-metric-box"], [1, "cc-drawer-metric-label"], [1, "cc-drawer-metric-val"], [1, "cc-drawer-progress-bar"], [1, "cc-drawer-progress-fill"], [1, "cc-drawer-section"], [1, "cc-drawer-section-title"], [1, "cc-drawer-links-stack"], ["type", "button", 1, "cc-drawer-link-card"], [1, "cc-drawer-timestamps"], [1, "cc-ts-row"], ["type", "button", 1, "cc-drawer-link-card", 3, "click"], [1, "cc-link-card-icon"], [1, "cc-link-card-body"], [1, "cc-link-card-label"], [1, "cc-link-card-title"], [1, "fa-solid", "fa-arrow-up-right-from-square", "cc-link-card-ext"], [1, "cc-link-card-icon", "run-icon"], [1, "fa-solid", "fa-gauge-high"], [1, "cc-drawer-deps-list"], [1, "cc-drawer-dep-pill"], [1, "fa-solid", "fa-code-commit"], [1, "fa-solid", "fa-code-branch"], [1, "cc-ts-label"], [1, "cc-ts-val"], [1, "cc-drawer-text-box"], [1, "cc-drawer-section-head"], ["type", "button", "title", "Copy output to clipboard", 1, "cc-copy-btn", 3, "click"], [1, "fa-regular"], [1, "cc-drawer-output-box"]], template: function TasksFullViewComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "header", 1)(2, "div", 2)(3, "div", 3);
+            i0.ɵɵelement(4, "i", 4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "div", 5)(6, "div", 6)(7, "h1", 7);
+            i0.ɵɵtext(8, "AI Agent Workflows & Tasks");
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(9, TasksFullViewComponent_Conditional_9_Template, 3, 1, "span", 8);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(10, "p", 9);
+            i0.ɵɵtext(11, " Real-time multi-agent task orchestration, step dependencies & execution telemetry ");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(12, "div", 10)(13, "div", 11)(14, "button", 12);
+            i0.ɵɵlistener("click", function TasksFullViewComponent_Template_button_click_14_listener() { return ctx.SetCommandViewMode("workflows"); });
+            i0.ɵɵelement(15, "i", 13);
+            i0.ɵɵelementStart(16, "span");
+            i0.ɵɵtext(17, "Workflow Cards");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(18, "button", 12);
+            i0.ɵɵlistener("click", function TasksFullViewComponent_Template_button_click_18_listener() { return ctx.SetCommandViewMode("timeline"); });
+            i0.ɵɵelement(19, "i", 14);
+            i0.ɵɵelementStart(20, "span");
+            i0.ɵɵtext(21, "Execution Timeline & DAG");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(22, "button", 15);
+            i0.ɵɵlistener("click", function TasksFullViewComponent_Template_button_click_22_listener() { return ctx.LoadTasks(); });
+            i0.ɵɵelement(23, "i", 16);
+            i0.ɵɵelementStart(24, "span");
+            i0.ɵɵtext(25, "Refresh");
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(26, "section", 17)(27, "div", 18)(28, "div", 19);
+            i0.ɵɵelement(29, "i", 20);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(30, "div", 21)(31, "span", 22);
+            i0.ɵɵtext(32, "Total Workflows");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(33, "div", 23)(34, "span", 24);
+            i0.ɵɵtext(35);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(36, "span", 25);
+            i0.ɵɵtext(37);
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(38, "div", 18)(39, "div", 26);
+            i0.ɵɵelement(40, "i", 27);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(41, "div", 21)(42, "span", 22);
+            i0.ɵɵtext(43, "Active / Running");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(44, "div", 23)(45, "span", 24);
+            i0.ɵɵtext(46);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(47, "span", 25);
+            i0.ɵɵtext(48);
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(49, "div", 18)(50, "div", 28);
+            i0.ɵɵelement(51, "i", 29);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(52, "div", 21)(53, "span", 22);
+            i0.ɵɵtext(54, "Completed Steps");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(55, "div", 23)(56, "span", 24);
+            i0.ɵɵtext(57);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(58, "span", 25);
+            i0.ɵɵtext(59);
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(60, "div", 18)(61, "div", 30);
+            i0.ɵɵelement(62, "i", 31);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(63, "div", 21)(64, "span", 22);
+            i0.ɵɵtext(65, "Success Rate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(66, "div", 23)(67, "span", 24);
+            i0.ɵɵtext(68);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(69, "span", 25);
+            i0.ɵɵtext(70, "terminal reliability");
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(71, "div", 18)(72, "div", 32);
+            i0.ɵɵelement(73, "i", 33);
             i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(74, "div", 21)(75, "span", 22);
+            i0.ɵɵtext(76, "Avg Execution Time");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(77, "div", 23)(78, "span", 24);
+            i0.ɵɵtext(79);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(80, "span", 25);
+            i0.ɵɵtext(81, "per completed workflow");
+            i0.ɵɵelementEnd()()()()();
+            i0.ɵɵelementStart(82, "section", 34)(83, "div", 35);
+            i0.ɵɵelement(84, "i", 36);
+            i0.ɵɵelementStart(85, "input", 37);
+            i0.ɵɵtwoWayListener("ngModelChange", function TasksFullViewComponent_Template_input_ngModelChange_85_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.SearchQuery, $event) || (ctx.SearchQuery = $event); return $event; });
+            i0.ɵɵlistener("ngModelChange", function TasksFullViewComponent_Template_input_ngModelChange_85_listener() { return ctx.OnFilterCriteriaChanged(); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(86, TasksFullViewComponent_Conditional_86_Template, 2, 0, "button", 38);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(87, "div", 39)(88, "button", 40);
+            i0.ɵɵlistener("click", function TasksFullViewComponent_Template_button_click_88_listener() { return ctx.SetStatusFilter("all"); });
+            i0.ɵɵelementStart(89, "span");
+            i0.ɵɵtext(90, "All");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(91, "span", 41);
+            i0.ɵɵtext(92);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(93, "button", 42);
+            i0.ɵɵlistener("click", function TasksFullViewComponent_Template_button_click_93_listener() { return ctx.SetStatusFilter("active"); });
+            i0.ɵɵelement(94, "span", 43);
+            i0.ɵɵelementStart(95, "span");
+            i0.ɵɵtext(96, "Active");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(97, "span", 41);
+            i0.ɵɵtext(98);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(99, "button", 44);
+            i0.ɵɵlistener("click", function TasksFullViewComponent_Template_button_click_99_listener() { return ctx.SetStatusFilter("completed"); });
+            i0.ɵɵelement(100, "span", 45);
+            i0.ɵɵelementStart(101, "span");
+            i0.ɵɵtext(102, "Completed");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(103, "span", 41);
+            i0.ɵɵtext(104);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(105, "button", 46);
+            i0.ɵɵlistener("click", function TasksFullViewComponent_Template_button_click_105_listener() { return ctx.SetStatusFilter("failed"); });
+            i0.ɵɵelement(106, "span", 47);
+            i0.ɵɵelementStart(107, "span");
+            i0.ɵɵtext(108, "Failed");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(109, "span", 41);
+            i0.ɵɵtext(110);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵconditionalCreate(111, TasksFullViewComponent_Conditional_111_Template, 7, 2, "div", 48);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(112, "div", 49)(113, "div", 50);
+            i0.ɵɵconditionalCreate(114, TasksFullViewComponent_Conditional_114_Template, 7, 0, "div", 51)(115, TasksFullViewComponent_Conditional_115_Template, 5, 1, "div", 51)(116, TasksFullViewComponent_Conditional_116_Template, 3, 0, "div", 52)(117, TasksFullViewComponent_Conditional_117_Template, 3, 0, "div", 53);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(118, TasksFullViewComponent_Conditional_118_Template, 13, 4, "aside", 54);
+            i0.ɵɵelementEnd()();
         } if (rf & 2) {
+            i0.ɵɵadvance(9);
+            i0.ɵɵconditional(ctx.Kpis.ActiveWorkflows > 0 ? 9 : -1);
+            i0.ɵɵadvance(5);
+            i0.ɵɵclassProp("active", ctx.CommandViewMode === "workflows");
+            i0.ɵɵadvance(4);
+            i0.ɵɵclassProp("active", ctx.CommandViewMode === "timeline");
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("disabled", ctx.isLoading);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("fa-spin", ctx.isLoading);
+            i0.ɵɵadvance(12);
+            i0.ɵɵtextInterpolate(ctx.Kpis.TotalWorkflows);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1("", ctx.Kpis.TotalSteps, " total steps");
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("kpi-card-active", ctx.Kpis.ActiveWorkflows > 0);
+            i0.ɵɵadvance(8);
+            i0.ɵɵtextInterpolate(ctx.Kpis.ActiveWorkflows);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.Kpis.ActiveWorkflows > 0 ? "Streaming live updates" : "All queues idle");
+            i0.ɵɵadvance(9);
+            i0.ɵɵtextInterpolate(ctx.Kpis.CompletedSteps);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate1("of ", ctx.Kpis.TotalSteps, " steps");
+            i0.ɵɵadvance(9);
+            i0.ɵɵtextInterpolate1("", ctx.Kpis.SuccessRatePercent, "%");
+            i0.ɵɵadvance(11);
+            i0.ɵɵtextInterpolate(ctx.Kpis.AvgExecutionTimeText);
+            i0.ɵɵadvance(6);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.SearchQuery);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.SearchQuery ? 86 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("active", ctx.StatusFilter === "all");
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate(ctx.WorkflowGroups.length);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("active", ctx.StatusFilter === "active");
+            i0.ɵɵadvance(5);
+            i0.ɵɵtextInterpolate(ctx.CountByCategory("active"));
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.selectedTask ? 1 : 2);
-        } }, dependencies: [TaskComponent], styles: [".tasks-full-view[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .task-detail-view[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: var(--mj-bg-surface);\n    }\n\n    .swoosh-in[_ngcontent-%COMP%] {\n      animation: _ngcontent-%COMP%_swooshIn 0.3s ease-out;\n    }\n\n    @keyframes _ngcontent-%COMP%_swooshIn {\n      from {\n        opacity: 0;\n        transform: translateX(50px);\n      }\n      to {\n        opacity: 1;\n        transform: translateX(0);\n      }\n    }\n\n    .breadcrumb-nav[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 16px 24px;\n      background: var(--mj-bg-surface);\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .breadcrumb-back[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      background: transparent;\n      border: 1px solid var(--mj-border-strong);\n      border-radius: 6px;\n      color: var(--mj-text-secondary);\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .breadcrumb-back[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n      border-color: var(--mj-text-disabled);\n    }\n\n    .breadcrumb-back[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 12px;\n    }\n\n    .breadcrumb-divider[_ngcontent-%COMP%] {\n      color: var(--mj-text-disabled);\n      font-size: 14px;\n    }\n\n    .breadcrumb-current[_ngcontent-%COMP%] {\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }"] });
+            i0.ɵɵclassProp("active", ctx.StatusFilter === "completed");
+            i0.ɵɵadvance(5);
+            i0.ɵɵtextInterpolate(ctx.CountByCategory("completed"));
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("active", ctx.StatusFilter === "failed");
+            i0.ɵɵadvance(5);
+            i0.ɵɵtextInterpolate(ctx.CountByCategory("failed"));
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.AvailableAgents.length > 0 ? 111 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("drawer-open", !!ctx.InspectedGroup);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.isLoading && ctx.WorkflowGroups.length === 0 ? 114 : ctx.FilteredWorkflowGroups.length === 0 ? 115 : ctx.CommandViewMode === "workflows" ? 116 : 117);
+            i0.ɵɵadvance(4);
+            i0.ɵɵconditional(ctx.InspectedGroup ? 118 : -1);
+        } }, dependencies: [FormsModule, i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgModel], styles: ["[_nghost-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n    }\n\n    .tasks-command-center[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      height: 100%;\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-primary);\n      overflow: hidden;\n    }\n\n    \n    .cc-header[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 16px;\n      padding: 18px 24px;\n      background: var(--mj-bg-surface);\n      border-bottom: 1px solid var(--mj-border-default);\n      flex-shrink: 0;\n    }\n\n    .cc-header-left[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 14px;\n      min-width: 0;\n    }\n\n    .cc-title-icon[_ngcontent-%COMP%] {\n      width: 42px;\n      height: 42px;\n      border-radius: 10px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n      border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 26%, var(--mj-border-default));\n      color: var(--mj-brand-primary);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 18px;\n      flex-shrink: 0;\n    }\n\n    .cc-title-block[_ngcontent-%COMP%] {\n      min-width: 0;\n    }\n\n    .cc-title-row[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      flex-wrap: wrap;\n    }\n\n    .cc-title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 19px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      letter-spacing: -0.01em;\n    }\n\n    .cc-live-pill[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 3px 10px;\n      border-radius: 999px;\n      font-size: 12px;\n      font-weight: 600;\n      background: color-mix(in srgb, var(--mj-brand-primary) 14%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n      border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n    }\n\n    .cc-live-dot[_ngcontent-%COMP%] {\n      width: 7px;\n      height: 7px;\n      border-radius: 50%;\n      background: var(--mj-brand-primary);\n      animation: _ngcontent-%COMP%_ccPulse 1.5s infinite ease-in-out;\n    }\n\n    @keyframes _ngcontent-%COMP%_ccPulse {\n      0%, 100% { opacity: 1; transform: scale(1); }\n      50% { opacity: 0.4; transform: scale(1.25); }\n    }\n\n    .cc-subtitle[_ngcontent-%COMP%] {\n      margin: 3px 0 0 0;\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n    }\n\n    .cc-header-actions[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      flex-shrink: 0;\n    }\n\n    .cc-view-switcher[_ngcontent-%COMP%] {\n      display: inline-flex;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      padding: 3px;\n      gap: 2px;\n    }\n\n    .cc-view-btn[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 7px;\n      padding: 6px 12px;\n      border: none;\n      border-radius: 6px;\n      background: transparent;\n      color: var(--mj-text-secondary);\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: all 0.15s ease;\n    }\n\n    .cc-view-btn[_ngcontent-%COMP%]:hover {\n      color: var(--mj-text-primary);\n    }\n\n    .cc-view-btn.active[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      color: var(--mj-brand-primary);\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n    }\n\n    .cc-refresh-btn[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 7px;\n      padding: 7px 14px;\n      border-radius: 8px;\n      border: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-primary);\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: all 0.15s ease;\n    }\n\n    .cc-refresh-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: var(--mj-bg-surface-sunken);\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-brand-primary);\n    }\n\n    .cc-refresh-btn[_ngcontent-%COMP%]:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    \n    .cc-kpi-ribbon[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(5, minmax(0, 1fr));\n      gap: 12px;\n      padding: 14px 24px;\n      background: var(--mj-bg-surface);\n      border-bottom: 1px solid var(--mj-border-default);\n      flex-shrink: 0;\n    }\n\n    .cc-kpi-card[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 11px 14px;\n      border-radius: 10px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      min-width: 0;\n    }\n\n    .cc-kpi-card.kpi-card-active[_ngcontent-%COMP%] {\n      border-color: color-mix(in srgb, var(--mj-brand-primary) 45%, var(--mj-border-default));\n      background: color-mix(in srgb, var(--mj-brand-primary) 6%, var(--mj-bg-surface));\n    }\n\n    .cc-kpi-icon[_ngcontent-%COMP%] {\n      width: 36px;\n      height: 36px;\n      border-radius: 8px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 15px;\n      flex-shrink: 0;\n    }\n\n    .cc-kpi-icon.kpi-brand[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    .cc-kpi-icon.kpi-active[_ngcontent-%COMP%] {\n      background: rgba(245, 158, 11, 0.15);\n      color: #d97706;\n    }\n\n    .cc-kpi-icon.kpi-success[_ngcontent-%COMP%] {\n      background: rgba(16, 185, 129, 0.15);\n      color: #059669;\n    }\n\n    .cc-kpi-icon.kpi-rate[_ngcontent-%COMP%] {\n      background: rgba(99, 102, 241, 0.15);\n      color: #4f46e5;\n    }\n\n    .cc-kpi-icon.kpi-time[_ngcontent-%COMP%] {\n      background: rgba(14, 165, 233, 0.15);\n      color: #0284c7;\n    }\n\n    .cc-kpi-body[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      min-width: 0;\n    }\n\n    .cc-kpi-label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n      color: var(--mj-text-muted);\n    }\n\n    .cc-kpi-value-row[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: baseline;\n      gap: 6px;\n      margin-top: 2px;\n      flex-wrap: wrap;\n    }\n\n    .cc-kpi-value[_ngcontent-%COMP%] {\n      font-size: 18px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n    }\n\n    .cc-kpi-sub[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    \n    .cc-filter-bar[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px 24px;\n      background: var(--mj-bg-surface);\n      border-bottom: 1px solid var(--mj-border-default);\n      flex-shrink: 0;\n      flex-wrap: wrap;\n    }\n\n    .cc-search-box[_ngcontent-%COMP%] {\n      position: relative;\n      flex: 1;\n      min-width: 240px;\n      display: flex;\n      align-items: center;\n    }\n\n    .cc-search-icon[_ngcontent-%COMP%] {\n      position: absolute;\n      left: 12px;\n      color: var(--mj-text-muted);\n      font-size: 13px;\n      pointer-events: none;\n    }\n\n    .cc-search-input[_ngcontent-%COMP%] {\n      width: 100%;\n      padding: 8px 32px 8px 34px;\n      border-radius: 8px;\n      border: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-primary);\n      font-size: 13px;\n      outline: none;\n      transition: border-color 0.15s ease;\n    }\n\n    .cc-search-input[_ngcontent-%COMP%]:focus {\n      border-color: var(--mj-brand-primary);\n      background: var(--mj-bg-surface);\n    }\n\n    .cc-search-clear[_ngcontent-%COMP%] {\n      position: absolute;\n      right: 8px;\n      background: none;\n      border: none;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      padding: 4px;\n    }\n\n    .cc-status-pills[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .cc-filter-pill[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 11px;\n      border-radius: 999px;\n      border: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-secondary);\n      font-size: 12px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: all 0.15s ease;\n    }\n\n    .cc-filter-pill[_ngcontent-%COMP%]:hover {\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-text-primary);\n    }\n\n    .cc-filter-pill.active[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 14%, var(--mj-bg-surface));\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-brand-primary);\n    }\n\n    .cc-status-dot[_ngcontent-%COMP%] {\n      width: 7px;\n      height: 7px;\n      border-radius: 50%;\n    }\n\n    .cc-status-dot.dot-active[_ngcontent-%COMP%] { background: #f59e0b; }\n    .cc-status-dot.dot-completed[_ngcontent-%COMP%] { background: #10b981; }\n    .cc-status-dot.dot-failed[_ngcontent-%COMP%] { background: #ef4444; }\n\n    .cc-pill-count[_ngcontent-%COMP%] {\n      padding: 1px 6px;\n      border-radius: 999px;\n      background: var(--mj-bg-surface);\n      font-size: 11px;\n      color: var(--mj-text-muted);\n    }\n\n    .cc-agent-filter[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      padding: 0 10px;\n      border-radius: 8px;\n      border: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .cc-agent-filter-icon[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n      font-size: 13px;\n    }\n\n    .cc-agent-select[_ngcontent-%COMP%] {\n      padding: 7px 4px;\n      border: none;\n      background: transparent;\n      color: var(--mj-text-primary);\n      font-size: 12px;\n      font-weight: 600;\n      outline: none;\n      cursor: pointer;\n    }\n\n    \n    .cc-workspace-body[_ngcontent-%COMP%] {\n      flex: 1;\n      min-height: 0;\n      display: flex;\n      overflow: hidden;\n      position: relative;\n    }\n\n    .cc-main-scroll[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n      overflow-y: auto;\n      padding: 20px 24px;\n    }\n\n    .cc-workflow-grid[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      max-width: 1280px;\n      margin: 0 auto;\n    }\n\n    .cc-workflow-card[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 12px;\n      padding: 16px 18px;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\n      transition: border-color 0.15s ease, box-shadow 0.15s ease;\n      cursor: pointer;\n    }\n\n    .cc-workflow-card[_ngcontent-%COMP%]:hover {\n      border-color: color-mix(in srgb, var(--mj-brand-primary) 45%, var(--mj-border-default));\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);\n    }\n\n    .cc-workflow-card.card-selected[_ngcontent-%COMP%] {\n      border-color: var(--mj-brand-primary);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n    }\n\n    .cc-workflow-card.card-active[_ngcontent-%COMP%] {\n      border-left: 4px solid var(--mj-brand-primary);\n    }\n\n    .cc-workflow-card.card-completed[_ngcontent-%COMP%] {\n      border-left: 4px solid #10b981;\n    }\n\n    .cc-workflow-card.card-failed[_ngcontent-%COMP%] {\n      border-left: 4px solid #ef4444;\n    }\n\n    .cc-wf-header[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: flex-start;\n      justify-content: space-between;\n      gap: 16px;\n    }\n\n    .cc-wf-header-left[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: flex-start;\n      gap: 12px;\n      min-width: 0;\n      flex: 1;\n    }\n\n    .cc-wf-status-icon[_ngcontent-%COMP%] {\n      width: 32px;\n      height: 32px;\n      border-radius: 8px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 14px;\n      flex-shrink: 0;\n      margin-top: 2px;\n    }\n\n    .cc-wf-status-icon[data-status=\"completed\"][_ngcontent-%COMP%] {\n      background: rgba(16, 185, 129, 0.14);\n      color: #059669;\n    }\n\n    .cc-wf-status-icon[data-status=\"active\"][_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    .cc-wf-status-icon[data-status=\"failed\"][_ngcontent-%COMP%] {\n      background: rgba(239, 68, 68, 0.14);\n      color: #dc2626;\n    }\n\n    .cc-wf-title-group[_ngcontent-%COMP%] {\n      min-width: 0;\n      flex: 1;\n    }\n\n    .cc-wf-title-line[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      flex-wrap: wrap;\n    }\n\n    .cc-wf-title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 15px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n    }\n\n    .cc-wf-step-count-badge[_ngcontent-%COMP%] {\n      padding: 2px 8px;\n      border-radius: 999px;\n      font-size: 11px;\n      font-weight: 600;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      color: var(--mj-text-secondary);\n    }\n\n    .cc-wf-status-badge[_ngcontent-%COMP%] {\n      padding: 2px 9px;\n      border-radius: 999px;\n      font-size: 11px;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 0.03em;\n    }\n\n    .cc-wf-status-badge[data-status=\"completed\"][_ngcontent-%COMP%] {\n      background: rgba(16, 185, 129, 0.14);\n      color: #059669;\n    }\n\n    .cc-wf-status-badge[data-status=\"active\"][_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    .cc-wf-status-badge[data-status=\"failed\"][_ngcontent-%COMP%] {\n      background: rgba(239, 68, 68, 0.14);\n      color: #dc2626;\n    }\n\n    .cc-wf-agent-pipeline[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      flex-wrap: wrap;\n      margin-top: 8px;\n    }\n\n    .cc-agent-chip[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      padding: 3px 9px;\n      border-radius: 6px;\n      border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 28%, var(--mj-border-default));\n      background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n      font-size: 11px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: all 0.15s ease;\n    }\n\n    .cc-agent-chip[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 18%, var(--mj-bg-surface));\n    }\n\n    .cc-pipeline-arrow[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: var(--mj-text-muted);\n    }\n\n    .cc-wf-header-right[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      flex-shrink: 0;\n    }\n\n    .cc-wf-duration[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      padding: 3px 8px;\n      border-radius: 6px;\n      background: var(--mj-bg-surface-sunken);\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-secondary);\n      font-variant-numeric: tabular-nums;\n    }\n\n    .cc-wf-timestamp[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n    }\n\n    .cc-wf-inspect-btn[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      padding: 5px 10px;\n      border-radius: 6px;\n      border: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-secondary);\n      font-size: 12px;\n      font-weight: 600;\n      cursor: pointer;\n    }\n\n    .cc-wf-inspect-btn[_ngcontent-%COMP%]:hover {\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-brand-primary);\n    }\n\n    \n    .cc-wf-progress-row[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      margin: 12px 0;\n    }\n\n    .cc-wf-progress-track[_ngcontent-%COMP%] {\n      flex: 1;\n      height: 6px;\n      border-radius: 999px;\n      background: var(--mj-bg-surface-sunken);\n      overflow: hidden;\n    }\n\n    .cc-wf-progress-fill[_ngcontent-%COMP%] {\n      height: 100%;\n      border-radius: 999px;\n      transition: width 0.35s ease;\n    }\n\n    .cc-wf-progress-fill[data-status=\"completed\"][_ngcontent-%COMP%] { background: #10b981; }\n    .cc-wf-progress-fill[data-status=\"active\"][_ngcontent-%COMP%] { background: var(--mj-brand-primary); }\n    .cc-wf-progress-fill[data-status=\"failed\"][_ngcontent-%COMP%] { background: #ef4444; }\n\n    .cc-wf-progress-label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      font-variant-numeric: tabular-nums;\n    }\n\n    \n    .cc-wf-steps-list[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      border-top: 1px solid var(--mj-border-default);\n      padding-top: 10px;\n    }\n\n    .cc-step-row[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: flex-start;\n      gap: 10px;\n      padding: 8px 10px;\n      border-radius: 8px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid transparent;\n      transition: all 0.15s ease;\n    }\n\n    .cc-step-row[_ngcontent-%COMP%]:hover {\n      border-color: var(--mj-border-default);\n      background: color-mix(in srgb, var(--mj-brand-primary) 4%, var(--mj-bg-surface-sunken));\n    }\n\n    .cc-step-row.step-selected[_ngcontent-%COMP%] {\n      border-color: var(--mj-brand-primary);\n      background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    }\n\n    .cc-step-index[_ngcontent-%COMP%] {\n      width: 22px;\n      height: 22px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 11px;\n      font-weight: 700;\n      flex-shrink: 0;\n      margin-top: 1px;\n    }\n\n    .cc-step-index[data-status=\"completed\"][_ngcontent-%COMP%] {\n      background: rgba(16, 185, 129, 0.16);\n      color: #059669;\n    }\n\n    .cc-step-index[data-status=\"active\"][_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 16%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    .cc-step-index[data-status=\"failed\"][_ngcontent-%COMP%] {\n      background: rgba(239, 68, 68, 0.16);\n      color: #dc2626;\n    }\n\n    .cc-step-index[data-status=\"skipped\"][_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      border: 1px dashed var(--mj-border-strong);\n      color: var(--mj-text-muted);\n    }\n\n    .cc-step-main[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .cc-step-top-line[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      flex-wrap: wrap;\n    }\n\n    .cc-step-name[_ngcontent-%COMP%] {\n      font-size: 13px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .cc-step-row[data-status=\"skipped\"][_ngcontent-%COMP%]   .cc-step-name[_ngcontent-%COMP%] {\n      color: var(--mj-text-muted);\n    }\n\n    .cc-step-agent-tag[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      padding: 1px 7px;\n      border-radius: 4px;\n      font-size: 11px;\n      font-weight: 600;\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-default);\n      color: var(--mj-text-secondary);\n    }\n\n    .cc-step-dep-tag[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      font-size: 11px;\n      color: var(--mj-text-muted);\n    }\n\n    .cc-step-preview[_ngcontent-%COMP%] {\n      margin: 4px 0 0 0;\n      font-size: 12px;\n      color: var(--mj-text-secondary);\n      line-height: 1.4;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    }\n\n    .cc-step-preview.preview-error[_ngcontent-%COMP%] {\n      color: #dc2626;\n    }\n\n    .cc-step-right[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      flex-shrink: 0;\n    }\n\n    .cc-step-duration[_ngcontent-%COMP%] {\n      font-size: 11px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      font-variant-numeric: tabular-nums;\n    }\n\n    .cc-step-status-pill[_ngcontent-%COMP%] {\n      font-size: 10px;\n      font-weight: 700;\n      text-transform: uppercase;\n      padding: 2px 7px;\n      border-radius: 999px;\n    }\n\n    .cc-step-status-pill[data-status=\"completed\"][_ngcontent-%COMP%] {\n      background: rgba(16, 185, 129, 0.14);\n      color: #059669;\n    }\n\n    .cc-step-status-pill[data-status=\"active\"][_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    .cc-step-status-pill[data-status=\"failed\"][_ngcontent-%COMP%] {\n      background: rgba(239, 68, 68, 0.14);\n      color: #dc2626;\n    }\n\n    .cc-step-status-pill[data-status=\"skipped\"][_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      border: 1px dashed var(--mj-border-strong);\n      color: var(--mj-text-muted);\n    }\n\n    .cc-step-run-btn[_ngcontent-%COMP%] {\n      background: none;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 5px;\n      color: var(--mj-text-muted);\n      width: 24px;\n      height: 24px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      font-size: 11px;\n    }\n\n    .cc-step-run-btn[_ngcontent-%COMP%]:hover {\n      color: var(--mj-brand-primary);\n      border-color: var(--mj-brand-primary);\n    }\n\n    \n    .cc-timeline-list[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      max-width: 1280px;\n      margin: 0 auto;\n    }\n\n    .cc-timeline-card[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 12px;\n      overflow: hidden;\n    }\n\n    .cc-timeline-card-header[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 14px 18px;\n      background: var(--mj-bg-surface-sunken);\n      border-bottom: 1px solid var(--mj-border-default);\n      cursor: pointer;\n    }\n\n    .cc-timeline-title-wrap[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      flex-wrap: wrap;\n    }\n\n    .cc-timeline-meta[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .cc-waterfall-table[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n    }\n\n    .cc-waterfall-head[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 280px 170px 1fr;\n      gap: 12px;\n      padding: 8px 18px;\n      font-size: 11px;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n      color: var(--mj-text-muted);\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .cc-waterfall-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 280px 170px 1fr;\n      gap: 12px;\n      align-items: center;\n      padding: 10px 18px;\n      border-bottom: 1px solid var(--mj-border-default);\n      cursor: pointer;\n      transition: background 0.12s ease;\n    }\n\n    .cc-waterfall-row[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .cc-waterfall-row[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .cc-waterfall-row.step-selected[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    }\n\n    .cc-wf-col-step[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: flex-start;\n      gap: 8px;\n      min-width: 0;\n    }\n\n    .cc-waterfall-step-text[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      min-width: 0;\n    }\n\n    .cc-waterfall-dep[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      margin-top: 2px;\n    }\n\n    .cc-waterfall-track[_ngcontent-%COMP%] {\n      position: relative;\n      height: 26px;\n      background: var(--mj-bg-surface-sunken);\n      border-radius: 6px;\n      overflow: hidden;\n    }\n\n    .cc-waterfall-bar[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 3px;\n      bottom: 3px;\n      border-radius: 4px;\n      display: flex;\n      align-items: center;\n      padding: 0 8px;\n      min-width: 64px;\n      white-space: nowrap;\n      font-size: 11px;\n      font-weight: 600;\n    }\n\n    .cc-waterfall-bar[data-status=\"completed\"][_ngcontent-%COMP%] {\n      background: rgba(16, 185, 129, 0.2);\n      border: 1px solid rgba(16, 185, 129, 0.5);\n      color: #047857;\n    }\n\n    .cc-waterfall-bar[data-status=\"active\"][_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n      border: 1px solid var(--mj-brand-primary);\n      color: var(--mj-brand-primary);\n    }\n\n    .cc-waterfall-bar[data-status=\"failed\"][_ngcontent-%COMP%] {\n      background: rgba(239, 68, 68, 0.2);\n      border: 1px solid rgba(239, 68, 68, 0.5);\n      color: #b91c1c;\n    }\n\n    .cc-waterfall-bar[data-status=\"skipped\"][_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      border: 1px dashed var(--mj-border-strong);\n      color: var(--mj-text-muted);\n    }\n\n    \n    .cc-inspector-drawer[_ngcontent-%COMP%] {\n      width: 440px;\n      max-width: 46%;\n      height: 100%;\n      background: var(--mj-bg-surface);\n      border-left: 1px solid var(--mj-border-default);\n      display: flex;\n      flex-direction: column;\n      flex-shrink: 0;\n      box-shadow: -4px 0 18px rgba(0, 0, 0, 0.06);\n      animation: _ngcontent-%COMP%_ccSlideIn 0.2s ease-out;\n    }\n\n    @keyframes _ngcontent-%COMP%_ccSlideIn {\n      from { opacity: 0; transform: translateX(24px); }\n      to { opacity: 1; transform: translateX(0); }\n    }\n\n    .cc-drawer-header[_ngcontent-%COMP%] {\n      padding: 16px 20px;\n      background: var(--mj-bg-surface-sunken);\n      border-bottom: 1px solid var(--mj-border-default);\n      flex-shrink: 0;\n    }\n\n    .cc-drawer-header-top[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: 6px;\n    }\n\n    .cc-drawer-eyebrow[_ngcontent-%COMP%] {\n      font-size: 11px;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      color: var(--mj-brand-primary);\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .cc-drawer-close[_ngcontent-%COMP%] {\n      background: none;\n      border: none;\n      width: 28px;\n      height: 28px;\n      border-radius: 6px;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .cc-drawer-close[_ngcontent-%COMP%]:hover {\n      background: var(--mj-border-default);\n      color: var(--mj-text-primary);\n    }\n\n    .cc-drawer-title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      line-height: 1.35;\n    }\n\n    .cc-drawer-step-tabs[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 6px;\n      overflow-x: auto;\n      margin-top: 12px;\n      padding-bottom: 2px;\n    }\n\n    .cc-drawer-step-tab[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 5px 10px;\n      border-radius: 6px;\n      border: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-secondary);\n      font-size: 12px;\n      font-weight: 600;\n      cursor: pointer;\n      max-width: 180px;\n      white-space: nowrap;\n    }\n\n    .cc-drawer-step-tab.active[_ngcontent-%COMP%] {\n      border-color: var(--mj-brand-primary);\n      background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .cc-tab-num[_ngcontent-%COMP%] {\n      width: 18px;\n      height: 18px;\n      border-radius: 50%;\n      background: var(--mj-bg-surface-sunken);\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 10px;\n      flex-shrink: 0;\n    }\n\n    .cc-tab-label[_ngcontent-%COMP%] {\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .cc-drawer-content[_ngcontent-%COMP%] {\n      flex: 1;\n      min-height: 0;\n      overflow-y: auto;\n      padding: 18px 20px;\n      display: flex;\n      flex-direction: column;\n      gap: 18px;\n    }\n\n    .cc-drawer-metrics-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: 10px;\n    }\n\n    .cc-drawer-metric-box[_ngcontent-%COMP%] {\n      padding: 10px;\n      border-radius: 8px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n      align-items: flex-start;\n    }\n\n    .cc-drawer-metric-label[_ngcontent-%COMP%] {\n      font-size: 10px;\n      font-weight: 700;\n      text-transform: uppercase;\n      color: var(--mj-text-muted);\n    }\n\n    .cc-drawer-metric-val[_ngcontent-%COMP%] {\n      font-size: 14px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n    }\n\n    .cc-drawer-progress-bar[_ngcontent-%COMP%] {\n      height: 8px;\n      border-radius: 999px;\n      background: var(--mj-bg-surface-sunken);\n      overflow: hidden;\n    }\n\n    .cc-drawer-progress-fill[_ngcontent-%COMP%] {\n      height: 100%;\n      border-radius: 999px;\n      transition: width 0.3s ease;\n    }\n\n    .cc-drawer-progress-fill[data-status=\"completed\"][_ngcontent-%COMP%] { background: #10b981; }\n    .cc-drawer-progress-fill[data-status=\"active\"][_ngcontent-%COMP%] { background: var(--mj-brand-primary); }\n    .cc-drawer-progress-fill[data-status=\"failed\"][_ngcontent-%COMP%] { background: #ef4444; }\n\n    .cc-drawer-section[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .cc-drawer-section-head[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n    }\n\n    .cc-drawer-section-title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 11px;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      color: var(--mj-text-muted);\n    }\n\n    .cc-drawer-links-stack[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .cc-drawer-link-card[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 10px 12px;\n      border-radius: 8px;\n      border: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface-sunken);\n      cursor: pointer;\n      text-align: left;\n      transition: all 0.15s ease;\n    }\n\n    .cc-drawer-link-card[_ngcontent-%COMP%]:hover {\n      border-color: var(--mj-brand-primary);\n      background: color-mix(in srgb, var(--mj-brand-primary) 6%, var(--mj-bg-surface));\n    }\n\n    .cc-link-card-icon[_ngcontent-%COMP%] {\n      width: 34px;\n      height: 34px;\n      border-radius: 8px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent);\n      color: var(--mj-brand-primary);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 15px;\n      flex-shrink: 0;\n    }\n\n    .cc-link-card-body[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .cc-link-card-label[_ngcontent-%COMP%] {\n      font-size: 10px;\n      font-weight: 600;\n      text-transform: uppercase;\n      color: var(--mj-text-muted);\n    }\n\n    .cc-link-card-title[_ngcontent-%COMP%] {\n      font-size: 13px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .cc-link-card-ext[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n    }\n\n    .cc-drawer-deps-list[_ngcontent-%COMP%] {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 6px;\n    }\n\n    .cc-drawer-dep-pill[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      padding: 4px 10px;\n      border-radius: 6px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      font-size: 12px;\n      color: var(--mj-text-secondary);\n    }\n\n    .cc-drawer-timestamps[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      padding: 10px 12px;\n      border-radius: 8px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n    }\n\n    .cc-ts-row[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      font-size: 12px;\n    }\n\n    .cc-ts-label[_ngcontent-%COMP%] { color: var(--mj-text-muted); font-weight: 600; }\n    .cc-ts-val[_ngcontent-%COMP%] { color: var(--mj-text-primary); font-variant-numeric: tabular-nums; }\n\n    .cc-drawer-text-box[_ngcontent-%COMP%] {\n      padding: 12px;\n      border-radius: 8px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      font-size: 13px;\n      line-height: 1.55;\n      color: var(--mj-text-primary);\n      white-space: pre-wrap;\n      word-break: break-word;\n    }\n\n    .cc-drawer-output-box[_ngcontent-%COMP%] {\n      padding: 12px;\n      border-radius: 8px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      font-size: 13px;\n      line-height: 1.6;\n      color: var(--mj-text-primary);\n      white-space: pre-wrap;\n      word-break: break-word;\n      max-height: 360px;\n      overflow-y: auto;\n    }\n\n    .cc-drawer-output-box.output-error[_ngcontent-%COMP%] {\n      border-color: #ef4444;\n      color: #dc2626;\n    }\n\n    .cc-copy-btn[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      padding: 3px 8px;\n      border-radius: 5px;\n      border: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-secondary);\n      font-size: 11px;\n      font-weight: 600;\n      cursor: pointer;\n    }\n\n    \n    .cc-empty-state[_ngcontent-%COMP%] {\n      max-width: 460px;\n      margin: 64px auto;\n      text-align: center;\n      padding: 32px 24px;\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 14px;\n    }\n\n    .cc-empty-icon[_ngcontent-%COMP%] {\n      width: 52px;\n      height: 52px;\n      border-radius: 12px;\n      margin: 0 auto 14px auto;\n      background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n      color: var(--mj-brand-primary);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 22px;\n    }\n\n    .cc-empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n      margin: 0 0 8px 0;\n      font-size: 16px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n    }\n\n    .cc-empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 13px;\n      line-height: 1.55;\n      color: var(--mj-text-secondary);\n    }\n\n    .cc-reset-filters-btn[_ngcontent-%COMP%] {\n      margin-top: 14px;\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 7px 14px;\n      border-radius: 8px;\n      border: 1px solid var(--mj-brand-primary);\n      background: transparent;\n      color: var(--mj-brand-primary);\n      font-size: 12px;\n      font-weight: 600;\n      cursor: pointer;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TasksFullViewComponent, [{
         type: Component,
-        args: [{ selector: 'mj-tasks-full-view', standalone: true, imports: [TaskComponent], template: `
-    <div class="tasks-full-view">
-      @if (!selectedTask) {
-        <!-- Task List View -->
-        <mj-task
-          [tasks]="filteredTasks"
-          [title]="'Tasks'"
-          [description]="getDescription()"
-          [showHeader]="true"
-          [showViewToggle]="false"
-          [viewMode]="'simple'"
-          (taskClicked)="onTaskClick($event)">
-        </mj-task>
-      } @else {
-        <!-- Task Detail View with Sub-tasks -->
-        <div class="task-detail-view" [class.swoosh-in]="showDetailAnimation">
-          <!-- Breadcrumb -->
-          <div class="breadcrumb-nav">
-            <button class="breadcrumb-back" (click)="backToTaskList()">
-              <i class="fas fa-arrow-left"></i>
-              <span>Back to Tasks</span>
+        args: [{ selector: 'mj-tasks-full-view', standalone: true, imports: [FormsModule], template: `
+    <div class="tasks-command-center">
+      <!-- Top Command Center Header -->
+      <header class="cc-header">
+        <div class="cc-header-left">
+          <div class="cc-title-icon">
+            <i class="fa-solid fa-diagram-project"></i>
+          </div>
+          <div class="cc-title-block">
+            <div class="cc-title-row">
+              <h1 class="cc-title">AI Agent Workflows &amp; Tasks</h1>
+              @if (Kpis.ActiveWorkflows > 0) {
+                <span class="cc-live-pill">
+                  <span class="cc-live-dot"></span>
+                  {{ Kpis.ActiveWorkflows }} Running Live
+                </span>
+              }
+            </div>
+            <p class="cc-subtitle">
+              Real-time multi-agent task orchestration, step dependencies &amp; execution telemetry
+            </p>
+          </div>
+        </div>
+
+        <div class="cc-header-actions">
+          <!-- View Mode Switcher -->
+          <div class="cc-view-switcher" role="tablist" aria-label="View Mode">
+            <button
+              type="button"
+              class="cc-view-btn"
+              [class.active]="CommandViewMode === 'workflows'"
+              (click)="SetCommandViewMode('workflows')">
+              <i class="fa-solid fa-layer-group"></i>
+              <span>Workflow Cards</span>
+            </button>
+            <button
+              type="button"
+              class="cc-view-btn"
+              [class.active]="CommandViewMode === 'timeline'"
+              (click)="SetCommandViewMode('timeline')">
+              <i class="fa-solid fa-bars-staggered"></i>
+              <span>Execution Timeline &amp; DAG</span>
+            </button>
+          </div>
+
+          <button
+            type="button"
+            class="cc-refresh-btn"
+            [disabled]="isLoading"
+            (click)="LoadTasks()"
+            title="Refresh workflows and tasks">
+            <i class="fa-solid fa-arrows-rotate" [class.fa-spin]="isLoading"></i>
+            <span>Refresh</span>
+          </button>
+        </div>
+      </header>
+
+      <!-- KPI Metric Ribbon -->
+      <section class="cc-kpi-ribbon" aria-label="Workflow Metrics">
+        <div class="cc-kpi-card">
+          <div class="cc-kpi-icon kpi-brand">
+            <i class="fa-solid fa-sitemap"></i>
+          </div>
+          <div class="cc-kpi-body">
+            <span class="cc-kpi-label">Total Workflows</span>
+            <div class="cc-kpi-value-row">
+              <span class="cc-kpi-value">{{ Kpis.TotalWorkflows }}</span>
+              <span class="cc-kpi-sub">{{ Kpis.TotalSteps }} total steps</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="cc-kpi-card" [class.kpi-card-active]="Kpis.ActiveWorkflows > 0">
+          <div class="cc-kpi-icon kpi-active">
+            <i class="fa-solid fa-bolt"></i>
+          </div>
+          <div class="cc-kpi-body">
+            <span class="cc-kpi-label">Active / Running</span>
+            <div class="cc-kpi-value-row">
+              <span class="cc-kpi-value">{{ Kpis.ActiveWorkflows }}</span>
+              <span class="cc-kpi-sub">{{ Kpis.ActiveWorkflows > 0 ? 'Streaming live updates' : 'All queues idle' }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="cc-kpi-card">
+          <div class="cc-kpi-icon kpi-success">
+            <i class="fa-solid fa-circle-check"></i>
+          </div>
+          <div class="cc-kpi-body">
+            <span class="cc-kpi-label">Completed Steps</span>
+            <div class="cc-kpi-value-row">
+              <span class="cc-kpi-value">{{ Kpis.CompletedSteps }}</span>
+              <span class="cc-kpi-sub">of {{ Kpis.TotalSteps }} steps</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="cc-kpi-card">
+          <div class="cc-kpi-icon kpi-rate">
+            <i class="fa-solid fa-chart-line"></i>
+          </div>
+          <div class="cc-kpi-body">
+            <span class="cc-kpi-label">Success Rate</span>
+            <div class="cc-kpi-value-row">
+              <span class="cc-kpi-value">{{ Kpis.SuccessRatePercent }}%</span>
+              <span class="cc-kpi-sub">terminal reliability</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="cc-kpi-card">
+          <div class="cc-kpi-icon kpi-time">
+            <i class="fa-solid fa-stopwatch"></i>
+          </div>
+          <div class="cc-kpi-body">
+            <span class="cc-kpi-label">Avg Execution Time</span>
+            <div class="cc-kpi-value-row">
+              <span class="cc-kpi-value">{{ Kpis.AvgExecutionTimeText }}</span>
+              <span class="cc-kpi-sub">per completed workflow</span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Filter & Search Bar -->
+      <section class="cc-filter-bar">
+        <div class="cc-search-box">
+          <i class="fa-solid fa-magnifying-glass cc-search-icon"></i>
+          <input
+            type="text"
+            class="cc-search-input"
+            placeholder="Search workflows, step names, specialist agents, or outputs..."
+            [(ngModel)]="SearchQuery"
+            (ngModelChange)="OnFilterCriteriaChanged()" />
+          @if (SearchQuery) {
+            <button type="button" class="cc-search-clear" (click)="ClearSearch()" title="Clear search">
+              <i class="fa-solid fa-xmark"></i>
             </button>
-            <div class="breadcrumb-divider">/</div>
-            <span class="breadcrumb-current">{{ selectedTask.Name }}</span>
+          }
+        </div>
+
+        <div class="cc-status-pills" role="group" aria-label="Filter by status">
+          <button
+            type="button"
+            class="cc-filter-pill"
+            [class.active]="StatusFilter === 'all'"
+            (click)="SetStatusFilter('all')">
+            <span>All</span>
+            <span class="cc-pill-count">{{ WorkflowGroups.length }}</span>
+          </button>
+          <button
+            type="button"
+            class="cc-filter-pill pill-active"
+            [class.active]="StatusFilter === 'active'"
+            (click)="SetStatusFilter('active')">
+            <span class="cc-status-dot dot-active"></span>
+            <span>Active</span>
+            <span class="cc-pill-count">{{ CountByCategory('active') }}</span>
+          </button>
+          <button
+            type="button"
+            class="cc-filter-pill pill-completed"
+            [class.active]="StatusFilter === 'completed'"
+            (click)="SetStatusFilter('completed')">
+            <span class="cc-status-dot dot-completed"></span>
+            <span>Completed</span>
+            <span class="cc-pill-count">{{ CountByCategory('completed') }}</span>
+          </button>
+          <button
+            type="button"
+            class="cc-filter-pill pill-failed"
+            [class.active]="StatusFilter === 'failed'"
+            (click)="SetStatusFilter('failed')">
+            <span class="cc-status-dot dot-failed"></span>
+            <span>Failed</span>
+            <span class="cc-pill-count">{{ CountByCategory('failed') }}</span>
+          </button>
+        </div>
+
+        @if (AvailableAgents.length > 0) {
+          <div class="cc-agent-filter">
+            <i class="fa-solid fa-robot cc-agent-filter-icon"></i>
+            <select
+              class="cc-agent-select"
+              [ngModel]="SelectedAgentFilter"
+              (ngModelChange)="SetAgentFilter($event)"
+              aria-label="Filter by specialist agent">
+              <option value="all">All Specialist Agents ({{ AvailableAgents.length }})</option>
+              @for (ag of AvailableAgents; track ag.id) {
+                <option [value]="ag.id">{{ ag.name }} ({{ ag.count }})</option>
+              }
+            </select>
           </div>
+        }
+      </section>
+
+      <!-- Main Body: Content List + Slide-Over Inspector Drawer -->
+      <div class="cc-workspace-body" [class.drawer-open]="!!InspectedGroup">
+        <div class="cc-main-scroll">
+          @if (isLoading && WorkflowGroups.length === 0) {
+            <div class="cc-empty-state">
+              <div class="cc-empty-icon">
+                <i class="fa-solid fa-circle-notch fa-spin"></i>
+              </div>
+              <h3>Loading AI Agent Workflows...</h3>
+              <p>Fetching orchestrated task graphs, specialist agent steps, and execution telemetry.</p>
+            </div>
+          } @else if (FilteredWorkflowGroups.length === 0) {
+            <div class="cc-empty-state">
+              <div class="cc-empty-icon">
+                <i class="fa-solid fa-diagram-project"></i>
+              </div>
+              @if (WorkflowGroups.length === 0) {
+                <h3>No Agent Workflows Recorded Yet</h3>
+                <p>When Sage or other orchestrator agents launch multi-step task graphs in Chat, their live progress, specialist delegations, and outputs will appear here.</p>
+              } @else {
+                <h3>No Workflows Match Your Filters</h3>
+                <p>Try clearing your search query or switching the status / specialist agent filter.</p>
+                <button type="button" class="cc-reset-filters-btn" (click)="ResetAllFilters()">
+                  <i class="fa-solid fa-rotate-left"></i>
+                  <span>Reset Filters</span>
+                </button>
+              }
+            </div>
+          } @else if (CommandViewMode === 'workflows') {
+            <!-- VIEW MODE 1: HIERARCHY-AWARE WORKFLOW CARDS -->
+            <div class="cc-workflow-grid">
+              @for (group of FilteredWorkflowGroups; track group.RootTaskId) {
+                <article
+                  class="cc-workflow-card"
+                  [class.card-active]="group.NormalizedCategory === 'active'"
+                  [class.card-completed]="group.NormalizedCategory === 'completed'"
+                  [class.card-failed]="group.NormalizedCategory === 'failed'"
+                  [class.card-selected]="IsGroupInspected(group)"
+                  (click)="InspectWorkflowGroup(group)">
+
+                  <!-- Workflow Card Header -->
+                  <div class="cc-wf-header">
+                    <div class="cc-wf-header-left">
+                      <div class="cc-wf-status-icon" [attr.data-status]="group.NormalizedCategory">
+                        @if (group.NormalizedCategory === 'completed') {
+                          <i class="fa-solid fa-check"></i>
+                        } @else if (group.NormalizedCategory === 'active') {
+                          <i class="fa-solid fa-circle-notch fa-spin"></i>
+                        } @else {
+                          <i class="fa-solid fa-triangle-exclamation"></i>
+                        }
+                      </div>
+
+                      <div class="cc-wf-title-group">
+                        <div class="cc-wf-title-line">
+                          <h3 class="cc-wf-title">{{ group.Title }}</h3>
+                          <span class="cc-wf-step-count-badge">
+                            {{ group.TotalSteps }} {{ group.TotalSteps === 1 ? 'Step' : 'Steps' }}
+                          </span>
+                          <span class="cc-wf-status-badge" [attr.data-status]="group.NormalizedCategory">
+                            {{ group.Status }}
+                          </span>
+                        </div>
+
+                        <!-- Agent Pipeline Chips -->
+                        @if (group.AgentPipeline.length > 0) {
+                          <div class="cc-wf-agent-pipeline">
+                            @for (ag of group.AgentPipeline; track ag.id; let isLast = $last) {
+                              <button
+                                type="button"
+                                class="cc-agent-chip"
+                                (click)="OnAgentChipClicked($event, ag.id)"
+                                title="Inspect {{ ag.name }}">
+                                <i class="fa-solid fa-robot"></i>
+                                <span>{{ ag.name }}</span>
+                              </button>
+                              @if (!isLast) {
+                                <i class="fa-solid fa-arrow-right cc-pipeline-arrow"></i>
+                              }
+                            }
+                          </div>
+                        }
+                      </div>
+                    </div>
 
-          <!-- Task Details & Sub-tasks with Gantt Toggle -->
-          <mj-task
-            [tasks]="subTasks"
-            [ganttTasks]="subTasksWithParent"
-            [taskDependencies]="taskDependencies"
-            [agentRunMap]="agentRunMap"
-            [title]="selectedTask.Name"
-            [description]="getTaskDetailDescription()"
-            [showHeader]="true"
-            [showViewToggle]="true"
-            [viewMode]="'gantt'"
-            (taskClicked)="onSubTaskClick($event)"
-            (openEntityRecord)="onOpenEntityRecord($event)">
-          </mj-task>
+                    <div class="cc-wf-header-right">
+                      @if (group.DurationText) {
+                        <span class="cc-wf-duration" title="Total workflow execution duration">
+                          <i class="fa-regular fa-clock"></i>
+                          {{ group.DurationText }}
+                        </span>
+                      }
+                      <span class="cc-wf-timestamp">{{ group.RelativeTimeText }}</span>
+                      <button
+                        type="button"
+                        class="cc-wf-inspect-btn"
+                        (click)="InspectWorkflowGroup(group, undefined, $event)"
+                        title="Open Workflow Inspector">
+                        <span>Inspect</span>
+                        <i class="fa-solid fa-chevron-right"></i>
+                      </button>
+                    </div>
+                  </div>
+
+                  <!-- Progress Bar -->
+                  <div class="cc-wf-progress-row">
+                    <div class="cc-wf-progress-track">
+                      <div
+                        class="cc-wf-progress-fill"
+                        [attr.data-status]="group.NormalizedCategory"
+                        [style.width.%]="group.PercentComplete">
+                      </div>
+                    </div>
+                    <span class="cc-wf-progress-label">
+                      {{ group.CompletedSteps }} of {{ group.TotalSteps }} completed
+                      @if (group.SkippedSteps > 0) {
+                        &middot; {{ group.SkippedSteps }} skipped
+                      }
+                      &middot; {{ group.PercentComplete }}%
+                    </span>
+                  </div>
+
+                  <!-- Step Pipeline List inside Card -->
+                  <div class="cc-wf-steps-list">
+                    @for (step of group.Steps; track step.Task.ID) {
+                      <div
+                        class="cc-step-row"
+                        [class.step-selected]="IsStepInspected(step.Task)"
+                        [attr.data-status]="GetStepCategory(step.Task.Status)"
+                        (click)="InspectWorkflowGroup(group, step, $event)">
+
+                        <div class="cc-step-index" [attr.data-status]="GetStepCategory(step.Task.Status)">
+                          @if (step.Task.Status === 'Complete') {
+                            <i class="fa-solid fa-check"></i>
+                          } @else if (step.Task.Status === 'In Progress') {
+                            <i class="fa-solid fa-spinner fa-spin"></i>
+                          } @else if (step.Task.Status === 'Skipped') {
+                            <i class="fa-solid fa-forward-step"></i>
+                          } @else if (step.Task.Status === 'Failed' || step.Task.Status === 'Cancelled') {
+                            <i class="fa-solid fa-xmark"></i>
+                          } @else {
+                            <span>{{ step.StepNumber }}</span>
+                          }
+                        </div>
+
+                        <div class="cc-step-main">
+                          <div class="cc-step-top-line">
+                            <span class="cc-step-name">{{ step.Task.Name }}</span>
+
+                            @if (step.AgentName) {
+                              <span class="cc-step-agent-tag">
+                                <i class="fa-solid fa-robot"></i>
+                                {{ step.AgentName }}
+                              </span>
+                            }
+
+                            @if (step.DependsOnNames.length > 0) {
+                              <span class="cc-step-dep-tag" title="Waits for: {{ step.DependsOnNames.join(', ') }}">
+                                <i class="fa-solid fa-link"></i>
+                                After {{ step.DependsOnNames.join(', ') }}
+                              </span>
+                            }
+                          </div>
+
+                          @if (step.OutputPreview) {
+                            <p class="cc-step-preview" [class.preview-error]="step.IsErrorOutput">
+                              {{ step.OutputPreview }}
+                            </p>
+                          }
+                        </div>
+
+                        <div class="cc-step-right">
+                          @if (step.DurationText) {
+                            <span class="cc-step-duration">{{ step.DurationText }}</span>
+                          }
+                          <span class="cc-step-status-pill" [attr.data-status]="GetStepCategory(step.Task.Status)">
+                            {{ step.Task.Status }}
+                          </span>
+                          @if (step.AgentRunID) {
+                            <button
+                              type="button"
+                              class="cc-step-run-btn"
+                              (click)="OnOpenAgentRunClicked($event, step.AgentRunID)"
+                              title="Open AI Agent Run Telemetry">
+                              <i class="fa-solid fa-arrow-up-right-from-square"></i>
+                            </button>
+                          }
+                        </div>
+                      </div>
+                    }
+                  </div>
+                </article>
+              }
+            </div>
+          } @else {
+            <!-- VIEW MODE 2: EXECUTION TIMELINE & DEPENDENCY DAG WATERFALL -->
+            <div class="cc-timeline-list">
+              @for (group of FilteredWorkflowGroups; track group.RootTaskId) {
+                <section
+                  class="cc-timeline-card"
+                  [class.card-selected]="IsGroupInspected(group)">
+                  <div class="cc-timeline-card-header" (click)="InspectWorkflowGroup(group)">
+                    <div class="cc-timeline-title-wrap">
+                      <span class="cc-wf-status-badge" [attr.data-status]="group.NormalizedCategory">
+                        {{ group.Status }}
+                      </span>
+                      <h3 class="cc-wf-title">{{ group.Title }}</h3>
+                      <span class="cc-wf-step-count-badge">{{ group.TotalSteps }} Steps</span>
+                    </div>
+                    <div class="cc-timeline-meta">
+                      @if (group.DurationText) {
+                        <span class="cc-wf-duration">
+                          <i class="fa-solid fa-stopwatch"></i>
+                          Total: {{ group.DurationText }}
+                        </span>
+                      }
+                      <span class="cc-wf-timestamp">{{ group.RelativeTimeText }}</span>
+                    </div>
+                  </div>
+
+                  <div class="cc-waterfall-table">
+                    <div class="cc-waterfall-head">
+                      <div class="cc-wf-col-step">Workflow Step &amp; Dependencies</div>
+                      <div class="cc-wf-col-agent">Specialist Agent</div>
+                      <div class="cc-wf-col-bars">
+                        <span>Execution Waterfall (0s &rarr; {{ group.DurationText || 'Live' }})</span>
+                      </div>
+                    </div>
+
+                    @for (step of group.Steps; track step.Task.ID) {
+                      <div
+                        class="cc-waterfall-row"
+                        [class.step-selected]="IsStepInspected(step.Task)"
+                        (click)="InspectWorkflowGroup(group, step, $event)">
+                        <div class="cc-wf-col-step">
+                          <span class="cc-step-index" [attr.data-status]="GetStepCategory(step.Task.Status)">
+                            {{ step.StepNumber }}
+                          </span>
+                          <div class="cc-waterfall-step-text">
+                            <span class="cc-step-name">{{ step.Task.Name }}</span>
+                            @if (step.DependsOnNames.length > 0) {
+                              <span class="cc-waterfall-dep">
+                                <i class="fa-solid fa-turn-up fa-rotate-90"></i>
+                                Depends on: {{ step.DependsOnNames.join(', ') }}
+                              </span>
+                            }
+                          </div>
+                        </div>
+
+                        <div class="cc-wf-col-agent">
+                          @if (step.AgentName) {
+                            <span class="cc-step-agent-tag">
+                              <i class="fa-solid fa-robot"></i>
+                              {{ step.AgentName }}
+                            </span>
+                          } @else {
+                            <span class="cc-text-muted">Orchestrator</span>
+                          }
+                        </div>
+
+                        <div class="cc-wf-col-bars">
+                          <div class="cc-waterfall-track">
+                            <div
+                              class="cc-waterfall-bar"
+                              [attr.data-status]="GetStepCategory(step.Task.Status)"
+                              [style.left.%]="step.TimelineOffsetPercent"
+                              [style.width.%]="step.TimelineWidthPercent">
+                              <span class="cc-waterfall-bar-label">
+                                {{ step.StartOffsetLabel }} &middot; {{ step.DurationText || step.Task.Status }}
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    }
+                  </div>
+                </section>
+              }
+            </div>
+          }
         </div>
-      }
+
+        <!-- SLIDE-OVER WORKFLOW & STEP INSPECTOR DRAWER -->
+        @if (InspectedGroup) {
+          <aside class="cc-inspector-drawer" aria-label="Workflow and Step Inspector">
+            <div class="cc-drawer-header">
+              <div class="cc-drawer-header-top">
+                <span class="cc-drawer-eyebrow">
+                  <i class="fa-solid fa-microscope"></i>
+                  {{ InspectedStep ? 'Step ' + InspectedStep.StepNumber + ' of ' + InspectedGroup.TotalSteps : 'Workflow Overview' }}
+                </span>
+                <button
+                  type="button"
+                  class="cc-drawer-close"
+                  (click)="BackToTaskList()"
+                  title="Close Inspector">
+                  <i class="fa-solid fa-xmark"></i>
+                </button>
+              </div>
+
+              <h2 class="cc-drawer-title">
+                {{ InspectedStep ? InspectedStep.Task.Name : InspectedGroup.Title }}
+              </h2>
+
+              <!-- Step Switcher Pills inside Drawer -->
+              @if (InspectedGroup.Steps.length > 1) {
+                <div class="cc-drawer-step-tabs">
+                  @for (s of InspectedGroup.Steps; track s.Task.ID) {
+                    <button
+                      type="button"
+                      class="cc-drawer-step-tab"
+                      [class.active]="IsStepInspected(s.Task)"
+                      (click)="SelectInspectorStep(s)">
+                      <span class="cc-tab-num">{{ s.StepNumber }}</span>
+                      <span class="cc-tab-label">{{ s.Task.Name }}</span>
+                    </button>
+                  }
+                </div>
+              }
+            </div>
+
+            <div class="cc-drawer-content">
+              @if (InspectedStep; as activeStep) {
+                <!-- Status + Progress + Duration Summary -->
+                <div class="cc-drawer-metrics-grid">
+                  <div class="cc-drawer-metric-box">
+                    <span class="cc-drawer-metric-label">Status</span>
+                    <span class="cc-wf-status-badge" [attr.data-status]="GetStepCategory(activeStep.Task.Status)">
+                      {{ activeStep.Task.Status }}
+                    </span>
+                  </div>
+                  <div class="cc-drawer-metric-box">
+                    <span class="cc-drawer-metric-label">Duration</span>
+                    <span class="cc-drawer-metric-val">{{ activeStep.DurationText || '—' }}</span>
+                  </div>
+                  <div class="cc-drawer-metric-box">
+                    <span class="cc-drawer-metric-label">Completion</span>
+                    <span class="cc-drawer-metric-val">{{ activeStep.Task.PercentComplete ?? 0 }}%</span>
+                  </div>
+                </div>
+
+                <div class="cc-drawer-progress-bar">
+                  <div
+                    class="cc-drawer-progress-fill"
+                    [attr.data-status]="GetStepCategory(activeStep.Task.Status)"
+                    [style.width.%]="activeStep.Task.PercentComplete ?? 0">
+                  </div>
+                </div>
+
+                <!-- Specialist Agent & AI Agent Run Deep Links -->
+                <div class="cc-drawer-section">
+                  <h4 class="cc-drawer-section-title">Execution &amp; Telemetry Links</h4>
+                  <div class="cc-drawer-links-stack">
+                    @if (activeStep.AgentID && activeStep.AgentName) {
+                      <button
+                        type="button"
+                        class="cc-drawer-link-card"
+                        (click)="OnAgentChipClicked($event, activeStep.AgentID)">
+                        <div class="cc-link-card-icon">
+                          <i class="fa-solid fa-robot"></i>
+                        </div>
+                        <div class="cc-link-card-body">
+                          <span class="cc-link-card-label">Assigned Specialist Agent</span>
+                          <span class="cc-link-card-title">{{ activeStep.AgentName }}</span>
+                        </div>
+                        <i class="fa-solid fa-arrow-up-right-from-square cc-link-card-ext"></i>
+                      </button>
+                    }
+
+                    @if (activeStep.AgentRunID) {
+                      <button
+                        type="button"
+                        class="cc-drawer-link-card"
+                        (click)="OnOpenAgentRunClicked($event, activeStep.AgentRunID)">
+                        <div class="cc-link-card-icon run-icon">
+                          <i class="fa-solid fa-gauge-high"></i>
+                        </div>
+                        <div class="cc-link-card-body">
+                          <span class="cc-link-card-label">AI Agent Run Trace</span>
+                          <span class="cc-link-card-title">Open Full Step &amp; Prompt Run Log</span>
+                        </div>
+                        <i class="fa-solid fa-arrow-up-right-from-square cc-link-card-ext"></i>
+                      </button>
+                    }
+                  </div>
+                </div>
+
+                <!-- Dependencies -->
+                @if (activeStep.DependsOnNames.length > 0) {
+                  <div class="cc-drawer-section">
+                    <h4 class="cc-drawer-section-title">Prerequisite Dependencies</h4>
+                    <div class="cc-drawer-deps-list">
+                      @for (depName of activeStep.DependsOnNames; track depName) {
+                        <span class="cc-drawer-dep-pill">
+                          <i class="fa-solid fa-code-commit"></i>
+                          {{ depName }}
+                        </span>
+                      }
+                      @for (cond of activeStep.DependsOnConditions; track cond) {
+                        <span class="cc-drawer-dep-pill">
+                          <i class="fa-solid fa-code-branch"></i>
+                          if {{ cond }}
+                        </span>
+                      }
+                    </div>
+                  </div>
+                }
+
+                <!-- Timestamps -->
+                <div class="cc-drawer-section">
+                  <h4 class="cc-drawer-section-title">Timeline</h4>
+                  <div class="cc-drawer-timestamps">
+                    @if (activeStep.Task.StartedAt) {
+                      <div class="cc-ts-row">
+                        <span class="cc-ts-label">Started</span>
+                        <span class="cc-ts-val">{{ FormatDateTime(activeStep.Task.StartedAt) }}</span>
+                      </div>
+                    }
+                    @if (activeStep.Task.CompletedAt) {
+                      <div class="cc-ts-row">
+                        <span class="cc-ts-label">Completed</span>
+                        <span class="cc-ts-val">{{ FormatDateTime(activeStep.Task.CompletedAt) }}</span>
+                      </div>
+                    }
+                  </div>
+                </div>
+
+                <!-- Task Instructions -->
+                @if (activeStep.Instructions) {
+                  <div class="cc-drawer-section">
+                    <h4 class="cc-drawer-section-title">Step Instructions</h4>
+                    <div class="cc-drawer-text-box">{{ activeStep.Instructions }}</div>
+                  </div>
+                }
+
+                <!-- Agent Output / Error Details -->
+                @if (activeStep.Output) {
+                  <div class="cc-drawer-section">
+                    <div class="cc-drawer-section-head">
+                      <h4 class="cc-drawer-section-title">
+                        {{ activeStep.IsErrorOutput ? 'Error Diagnostics' : 'Specialist Agent Output' }}
+                      </h4>
+                      <button
+                        type="button"
+                        class="cc-copy-btn"
+                        (click)="CopyStepOutput(activeStep.Output)"
+                        title="Copy output to clipboard">
+                        <i class="fa-regular" [class.fa-copy]="!CopiedOutput" [class.fa-check]="CopiedOutput"></i>
+                        <span>{{ CopiedOutput ? 'Copied' : 'Copy' }}</span>
+                      </button>
+                    </div>
+                    <div class="cc-drawer-output-box" [class.output-error]="activeStep.IsErrorOutput">{{ activeStep.Output }}</div>
+                  </div>
+                }
+              }
+            </div>
+          </aside>
+        }
+      </div>
     </div>
-  `, styles: ["\n    .tasks-full-view {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .task-detail-view {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: var(--mj-bg-surface);\n    }\n\n    .swoosh-in {\n      animation: swooshIn 0.3s ease-out;\n    }\n\n    @keyframes swooshIn {\n      from {\n        opacity: 0;\n        transform: translateX(50px);\n      }\n      to {\n        opacity: 1;\n        transform: translateX(0);\n      }\n    }\n\n    .breadcrumb-nav {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 16px 24px;\n      background: var(--mj-bg-surface);\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .breadcrumb-back {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      background: transparent;\n      border: 1px solid var(--mj-border-strong);\n      border-radius: 6px;\n      color: var(--mj-text-secondary);\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .breadcrumb-back:hover {\n      background: var(--mj-bg-surface-sunken);\n      border-color: var(--mj-text-disabled);\n    }\n\n    .breadcrumb-back i {\n      font-size: 12px;\n    }\n\n    .breadcrumb-divider {\n      color: var(--mj-text-disabled);\n      font-size: 14px;\n    }\n\n    .breadcrumb-current {\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n  "] }]
+  `, styles: ["\n    :host {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n    }\n\n    .tasks-command-center {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      height: 100%;\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-primary);\n      overflow: hidden;\n    }\n\n    /* Header */\n    .cc-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: 16px;\n      padding: 18px 24px;\n      background: var(--mj-bg-surface);\n      border-bottom: 1px solid var(--mj-border-default);\n      flex-shrink: 0;\n    }\n\n    .cc-header-left {\n      display: flex;\n      align-items: center;\n      gap: 14px;\n      min-width: 0;\n    }\n\n    .cc-title-icon {\n      width: 42px;\n      height: 42px;\n      border-radius: 10px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n      border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 26%, var(--mj-border-default));\n      color: var(--mj-brand-primary);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 18px;\n      flex-shrink: 0;\n    }\n\n    .cc-title-block {\n      min-width: 0;\n    }\n\n    .cc-title-row {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      flex-wrap: wrap;\n    }\n\n    .cc-title {\n      margin: 0;\n      font-size: 19px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      letter-spacing: -0.01em;\n    }\n\n    .cc-live-pill {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 3px 10px;\n      border-radius: 999px;\n      font-size: 12px;\n      font-weight: 600;\n      background: color-mix(in srgb, var(--mj-brand-primary) 14%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n      border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n    }\n\n    .cc-live-dot {\n      width: 7px;\n      height: 7px;\n      border-radius: 50%;\n      background: var(--mj-brand-primary);\n      animation: ccPulse 1.5s infinite ease-in-out;\n    }\n\n    @keyframes ccPulse {\n      0%, 100% { opacity: 1; transform: scale(1); }\n      50% { opacity: 0.4; transform: scale(1.25); }\n    }\n\n    .cc-subtitle {\n      margin: 3px 0 0 0;\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n    }\n\n    .cc-header-actions {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      flex-shrink: 0;\n    }\n\n    .cc-view-switcher {\n      display: inline-flex;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      padding: 3px;\n      gap: 2px;\n    }\n\n    .cc-view-btn {\n      display: inline-flex;\n      align-items: center;\n      gap: 7px;\n      padding: 6px 12px;\n      border: none;\n      border-radius: 6px;\n      background: transparent;\n      color: var(--mj-text-secondary);\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: all 0.15s ease;\n    }\n\n    .cc-view-btn:hover {\n      color: var(--mj-text-primary);\n    }\n\n    .cc-view-btn.active {\n      background: var(--mj-bg-surface);\n      color: var(--mj-brand-primary);\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n    }\n\n    .cc-refresh-btn {\n      display: inline-flex;\n      align-items: center;\n      gap: 7px;\n      padding: 7px 14px;\n      border-radius: 8px;\n      border: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-primary);\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: all 0.15s ease;\n    }\n\n    .cc-refresh-btn:hover:not(:disabled) {\n      background: var(--mj-bg-surface-sunken);\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-brand-primary);\n    }\n\n    .cc-refresh-btn:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    /* KPI Ribbon */\n    .cc-kpi-ribbon {\n      display: grid;\n      grid-template-columns: repeat(5, minmax(0, 1fr));\n      gap: 12px;\n      padding: 14px 24px;\n      background: var(--mj-bg-surface);\n      border-bottom: 1px solid var(--mj-border-default);\n      flex-shrink: 0;\n    }\n\n    .cc-kpi-card {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 11px 14px;\n      border-radius: 10px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      min-width: 0;\n    }\n\n    .cc-kpi-card.kpi-card-active {\n      border-color: color-mix(in srgb, var(--mj-brand-primary) 45%, var(--mj-border-default));\n      background: color-mix(in srgb, var(--mj-brand-primary) 6%, var(--mj-bg-surface));\n    }\n\n    .cc-kpi-icon {\n      width: 36px;\n      height: 36px;\n      border-radius: 8px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 15px;\n      flex-shrink: 0;\n    }\n\n    .cc-kpi-icon.kpi-brand {\n      background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    .cc-kpi-icon.kpi-active {\n      background: rgba(245, 158, 11, 0.15);\n      color: #d97706;\n    }\n\n    .cc-kpi-icon.kpi-success {\n      background: rgba(16, 185, 129, 0.15);\n      color: #059669;\n    }\n\n    .cc-kpi-icon.kpi-rate {\n      background: rgba(99, 102, 241, 0.15);\n      color: #4f46e5;\n    }\n\n    .cc-kpi-icon.kpi-time {\n      background: rgba(14, 165, 233, 0.15);\n      color: #0284c7;\n    }\n\n    .cc-kpi-body {\n      display: flex;\n      flex-direction: column;\n      min-width: 0;\n    }\n\n    .cc-kpi-label {\n      font-size: 11px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n      color: var(--mj-text-muted);\n    }\n\n    .cc-kpi-value-row {\n      display: flex;\n      align-items: baseline;\n      gap: 6px;\n      margin-top: 2px;\n      flex-wrap: wrap;\n    }\n\n    .cc-kpi-value {\n      font-size: 18px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n    }\n\n    .cc-kpi-sub {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    /* Filter Bar */\n    .cc-filter-bar {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px 24px;\n      background: var(--mj-bg-surface);\n      border-bottom: 1px solid var(--mj-border-default);\n      flex-shrink: 0;\n      flex-wrap: wrap;\n    }\n\n    .cc-search-box {\n      position: relative;\n      flex: 1;\n      min-width: 240px;\n      display: flex;\n      align-items: center;\n    }\n\n    .cc-search-icon {\n      position: absolute;\n      left: 12px;\n      color: var(--mj-text-muted);\n      font-size: 13px;\n      pointer-events: none;\n    }\n\n    .cc-search-input {\n      width: 100%;\n      padding: 8px 32px 8px 34px;\n      border-radius: 8px;\n      border: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-primary);\n      font-size: 13px;\n      outline: none;\n      transition: border-color 0.15s ease;\n    }\n\n    .cc-search-input:focus {\n      border-color: var(--mj-brand-primary);\n      background: var(--mj-bg-surface);\n    }\n\n    .cc-search-clear {\n      position: absolute;\n      right: 8px;\n      background: none;\n      border: none;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      padding: 4px;\n    }\n\n    .cc-status-pills {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .cc-filter-pill {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 11px;\n      border-radius: 999px;\n      border: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-secondary);\n      font-size: 12px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: all 0.15s ease;\n    }\n\n    .cc-filter-pill:hover {\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-text-primary);\n    }\n\n    .cc-filter-pill.active {\n      background: color-mix(in srgb, var(--mj-brand-primary) 14%, var(--mj-bg-surface));\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-brand-primary);\n    }\n\n    .cc-status-dot {\n      width: 7px;\n      height: 7px;\n      border-radius: 50%;\n    }\n\n    .cc-status-dot.dot-active { background: #f59e0b; }\n    .cc-status-dot.dot-completed { background: #10b981; }\n    .cc-status-dot.dot-failed { background: #ef4444; }\n\n    .cc-pill-count {\n      padding: 1px 6px;\n      border-radius: 999px;\n      background: var(--mj-bg-surface);\n      font-size: 11px;\n      color: var(--mj-text-muted);\n    }\n\n    .cc-agent-filter {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      padding: 0 10px;\n      border-radius: 8px;\n      border: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .cc-agent-filter-icon {\n      color: var(--mj-brand-primary);\n      font-size: 13px;\n    }\n\n    .cc-agent-select {\n      padding: 7px 4px;\n      border: none;\n      background: transparent;\n      color: var(--mj-text-primary);\n      font-size: 12px;\n      font-weight: 600;\n      outline: none;\n      cursor: pointer;\n    }\n\n    /* Main Workspace Body & Grid */\n    .cc-workspace-body {\n      flex: 1;\n      min-height: 0;\n      display: flex;\n      overflow: hidden;\n      position: relative;\n    }\n\n    .cc-main-scroll {\n      flex: 1;\n      min-width: 0;\n      overflow-y: auto;\n      padding: 20px 24px;\n    }\n\n    .cc-workflow-grid {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      max-width: 1280px;\n      margin: 0 auto;\n    }\n\n    .cc-workflow-card {\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 12px;\n      padding: 16px 18px;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\n      transition: border-color 0.15s ease, box-shadow 0.15s ease;\n      cursor: pointer;\n    }\n\n    .cc-workflow-card:hover {\n      border-color: color-mix(in srgb, var(--mj-brand-primary) 45%, var(--mj-border-default));\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);\n    }\n\n    .cc-workflow-card.card-selected {\n      border-color: var(--mj-brand-primary);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n    }\n\n    .cc-workflow-card.card-active {\n      border-left: 4px solid var(--mj-brand-primary);\n    }\n\n    .cc-workflow-card.card-completed {\n      border-left: 4px solid #10b981;\n    }\n\n    .cc-workflow-card.card-failed {\n      border-left: 4px solid #ef4444;\n    }\n\n    .cc-wf-header {\n      display: flex;\n      align-items: flex-start;\n      justify-content: space-between;\n      gap: 16px;\n    }\n\n    .cc-wf-header-left {\n      display: flex;\n      align-items: flex-start;\n      gap: 12px;\n      min-width: 0;\n      flex: 1;\n    }\n\n    .cc-wf-status-icon {\n      width: 32px;\n      height: 32px;\n      border-radius: 8px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 14px;\n      flex-shrink: 0;\n      margin-top: 2px;\n    }\n\n    .cc-wf-status-icon[data-status=\"completed\"] {\n      background: rgba(16, 185, 129, 0.14);\n      color: #059669;\n    }\n\n    .cc-wf-status-icon[data-status=\"active\"] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    .cc-wf-status-icon[data-status=\"failed\"] {\n      background: rgba(239, 68, 68, 0.14);\n      color: #dc2626;\n    }\n\n    .cc-wf-title-group {\n      min-width: 0;\n      flex: 1;\n    }\n\n    .cc-wf-title-line {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      flex-wrap: wrap;\n    }\n\n    .cc-wf-title {\n      margin: 0;\n      font-size: 15px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n    }\n\n    .cc-wf-step-count-badge {\n      padding: 2px 8px;\n      border-radius: 999px;\n      font-size: 11px;\n      font-weight: 600;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      color: var(--mj-text-secondary);\n    }\n\n    .cc-wf-status-badge {\n      padding: 2px 9px;\n      border-radius: 999px;\n      font-size: 11px;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 0.03em;\n    }\n\n    .cc-wf-status-badge[data-status=\"completed\"] {\n      background: rgba(16, 185, 129, 0.14);\n      color: #059669;\n    }\n\n    .cc-wf-status-badge[data-status=\"active\"] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    .cc-wf-status-badge[data-status=\"failed\"] {\n      background: rgba(239, 68, 68, 0.14);\n      color: #dc2626;\n    }\n\n    .cc-wf-agent-pipeline {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      flex-wrap: wrap;\n      margin-top: 8px;\n    }\n\n    .cc-agent-chip {\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      padding: 3px 9px;\n      border-radius: 6px;\n      border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 28%, var(--mj-border-default));\n      background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n      font-size: 11px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: all 0.15s ease;\n    }\n\n    .cc-agent-chip:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 18%, var(--mj-bg-surface));\n    }\n\n    .cc-pipeline-arrow {\n      font-size: 10px;\n      color: var(--mj-text-muted);\n    }\n\n    .cc-wf-header-right {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      flex-shrink: 0;\n    }\n\n    .cc-wf-duration {\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      padding: 3px 8px;\n      border-radius: 6px;\n      background: var(--mj-bg-surface-sunken);\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-secondary);\n      font-variant-numeric: tabular-nums;\n    }\n\n    .cc-wf-timestamp {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n    }\n\n    .cc-wf-inspect-btn {\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      padding: 5px 10px;\n      border-radius: 6px;\n      border: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-secondary);\n      font-size: 12px;\n      font-weight: 600;\n      cursor: pointer;\n    }\n\n    .cc-wf-inspect-btn:hover {\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-brand-primary);\n    }\n\n    /* Progress Bar inside Card */\n    .cc-wf-progress-row {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      margin: 12px 0;\n    }\n\n    .cc-wf-progress-track {\n      flex: 1;\n      height: 6px;\n      border-radius: 999px;\n      background: var(--mj-bg-surface-sunken);\n      overflow: hidden;\n    }\n\n    .cc-wf-progress-fill {\n      height: 100%;\n      border-radius: 999px;\n      transition: width 0.35s ease;\n    }\n\n    .cc-wf-progress-fill[data-status=\"completed\"] { background: #10b981; }\n    .cc-wf-progress-fill[data-status=\"active\"] { background: var(--mj-brand-primary); }\n    .cc-wf-progress-fill[data-status=\"failed\"] { background: #ef4444; }\n\n    .cc-wf-progress-label {\n      font-size: 11px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      font-variant-numeric: tabular-nums;\n    }\n\n    /* Step Rows inside Card */\n    .cc-wf-steps-list {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      border-top: 1px solid var(--mj-border-default);\n      padding-top: 10px;\n    }\n\n    .cc-step-row {\n      display: flex;\n      align-items: flex-start;\n      gap: 10px;\n      padding: 8px 10px;\n      border-radius: 8px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid transparent;\n      transition: all 0.15s ease;\n    }\n\n    .cc-step-row:hover {\n      border-color: var(--mj-border-default);\n      background: color-mix(in srgb, var(--mj-brand-primary) 4%, var(--mj-bg-surface-sunken));\n    }\n\n    .cc-step-row.step-selected {\n      border-color: var(--mj-brand-primary);\n      background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    }\n\n    .cc-step-index {\n      width: 22px;\n      height: 22px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 11px;\n      font-weight: 700;\n      flex-shrink: 0;\n      margin-top: 1px;\n    }\n\n    .cc-step-index[data-status=\"completed\"] {\n      background: rgba(16, 185, 129, 0.16);\n      color: #059669;\n    }\n\n    .cc-step-index[data-status=\"active\"] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 16%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    .cc-step-index[data-status=\"failed\"] {\n      background: rgba(239, 68, 68, 0.16);\n      color: #dc2626;\n    }\n\n    .cc-step-index[data-status=\"skipped\"] {\n      background: var(--mj-bg-surface);\n      border: 1px dashed var(--mj-border-strong);\n      color: var(--mj-text-muted);\n    }\n\n    .cc-step-main {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .cc-step-top-line {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      flex-wrap: wrap;\n    }\n\n    .cc-step-name {\n      font-size: 13px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .cc-step-row[data-status=\"skipped\"] .cc-step-name {\n      color: var(--mj-text-muted);\n    }\n\n    .cc-step-agent-tag {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      padding: 1px 7px;\n      border-radius: 4px;\n      font-size: 11px;\n      font-weight: 600;\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-default);\n      color: var(--mj-text-secondary);\n    }\n\n    .cc-step-dep-tag {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      font-size: 11px;\n      color: var(--mj-text-muted);\n    }\n\n    .cc-step-preview {\n      margin: 4px 0 0 0;\n      font-size: 12px;\n      color: var(--mj-text-secondary);\n      line-height: 1.4;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    }\n\n    .cc-step-preview.preview-error {\n      color: #dc2626;\n    }\n\n    .cc-step-right {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      flex-shrink: 0;\n    }\n\n    .cc-step-duration {\n      font-size: 11px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      font-variant-numeric: tabular-nums;\n    }\n\n    .cc-step-status-pill {\n      font-size: 10px;\n      font-weight: 700;\n      text-transform: uppercase;\n      padding: 2px 7px;\n      border-radius: 999px;\n    }\n\n    .cc-step-status-pill[data-status=\"completed\"] {\n      background: rgba(16, 185, 129, 0.14);\n      color: #059669;\n    }\n\n    .cc-step-status-pill[data-status=\"active\"] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent);\n      color: var(--mj-brand-primary);\n    }\n\n    .cc-step-status-pill[data-status=\"failed\"] {\n      background: rgba(239, 68, 68, 0.14);\n      color: #dc2626;\n    }\n\n    .cc-step-status-pill[data-status=\"skipped\"] {\n      background: var(--mj-bg-surface);\n      border: 1px dashed var(--mj-border-strong);\n      color: var(--mj-text-muted);\n    }\n\n    .cc-step-run-btn {\n      background: none;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 5px;\n      color: var(--mj-text-muted);\n      width: 24px;\n      height: 24px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      font-size: 11px;\n    }\n\n    .cc-step-run-btn:hover {\n      color: var(--mj-brand-primary);\n      border-color: var(--mj-brand-primary);\n    }\n\n    /* Timeline & Waterfall DAG View */\n    .cc-timeline-list {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      max-width: 1280px;\n      margin: 0 auto;\n    }\n\n    .cc-timeline-card {\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 12px;\n      overflow: hidden;\n    }\n\n    .cc-timeline-card-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 14px 18px;\n      background: var(--mj-bg-surface-sunken);\n      border-bottom: 1px solid var(--mj-border-default);\n      cursor: pointer;\n    }\n\n    .cc-timeline-title-wrap {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      flex-wrap: wrap;\n    }\n\n    .cc-timeline-meta {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .cc-waterfall-table {\n      display: flex;\n      flex-direction: column;\n    }\n\n    .cc-waterfall-head {\n      display: grid;\n      grid-template-columns: 280px 170px 1fr;\n      gap: 12px;\n      padding: 8px 18px;\n      font-size: 11px;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n      color: var(--mj-text-muted);\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .cc-waterfall-row {\n      display: grid;\n      grid-template-columns: 280px 170px 1fr;\n      gap: 12px;\n      align-items: center;\n      padding: 10px 18px;\n      border-bottom: 1px solid var(--mj-border-default);\n      cursor: pointer;\n      transition: background 0.12s ease;\n    }\n\n    .cc-waterfall-row:last-child {\n      border-bottom: none;\n    }\n\n    .cc-waterfall-row:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .cc-waterfall-row.step-selected {\n      background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    }\n\n    .cc-wf-col-step {\n      display: flex;\n      align-items: flex-start;\n      gap: 8px;\n      min-width: 0;\n    }\n\n    .cc-waterfall-step-text {\n      display: flex;\n      flex-direction: column;\n      min-width: 0;\n    }\n\n    .cc-waterfall-dep {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      margin-top: 2px;\n    }\n\n    .cc-waterfall-track {\n      position: relative;\n      height: 26px;\n      background: var(--mj-bg-surface-sunken);\n      border-radius: 6px;\n      overflow: hidden;\n    }\n\n    .cc-waterfall-bar {\n      position: absolute;\n      top: 3px;\n      bottom: 3px;\n      border-radius: 4px;\n      display: flex;\n      align-items: center;\n      padding: 0 8px;\n      min-width: 64px;\n      white-space: nowrap;\n      font-size: 11px;\n      font-weight: 600;\n    }\n\n    .cc-waterfall-bar[data-status=\"completed\"] {\n      background: rgba(16, 185, 129, 0.2);\n      border: 1px solid rgba(16, 185, 129, 0.5);\n      color: #047857;\n    }\n\n    .cc-waterfall-bar[data-status=\"active\"] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n      border: 1px solid var(--mj-brand-primary);\n      color: var(--mj-brand-primary);\n    }\n\n    .cc-waterfall-bar[data-status=\"failed\"] {\n      background: rgba(239, 68, 68, 0.2);\n      border: 1px solid rgba(239, 68, 68, 0.5);\n      color: #b91c1c;\n    }\n\n    .cc-waterfall-bar[data-status=\"skipped\"] {\n      background: var(--mj-bg-surface);\n      border: 1px dashed var(--mj-border-strong);\n      color: var(--mj-text-muted);\n    }\n\n    /* Slide-Over Inspector Drawer */\n    .cc-inspector-drawer {\n      width: 440px;\n      max-width: 46%;\n      height: 100%;\n      background: var(--mj-bg-surface);\n      border-left: 1px solid var(--mj-border-default);\n      display: flex;\n      flex-direction: column;\n      flex-shrink: 0;\n      box-shadow: -4px 0 18px rgba(0, 0, 0, 0.06);\n      animation: ccSlideIn 0.2s ease-out;\n    }\n\n    @keyframes ccSlideIn {\n      from { opacity: 0; transform: translateX(24px); }\n      to { opacity: 1; transform: translateX(0); }\n    }\n\n    .cc-drawer-header {\n      padding: 16px 20px;\n      background: var(--mj-bg-surface-sunken);\n      border-bottom: 1px solid var(--mj-border-default);\n      flex-shrink: 0;\n    }\n\n    .cc-drawer-header-top {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: 6px;\n    }\n\n    .cc-drawer-eyebrow {\n      font-size: 11px;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      color: var(--mj-brand-primary);\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .cc-drawer-close {\n      background: none;\n      border: none;\n      width: 28px;\n      height: 28px;\n      border-radius: 6px;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .cc-drawer-close:hover {\n      background: var(--mj-border-default);\n      color: var(--mj-text-primary);\n    }\n\n    .cc-drawer-title {\n      margin: 0;\n      font-size: 16px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      line-height: 1.35;\n    }\n\n    .cc-drawer-step-tabs {\n      display: flex;\n      gap: 6px;\n      overflow-x: auto;\n      margin-top: 12px;\n      padding-bottom: 2px;\n    }\n\n    .cc-drawer-step-tab {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 5px 10px;\n      border-radius: 6px;\n      border: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-secondary);\n      font-size: 12px;\n      font-weight: 600;\n      cursor: pointer;\n      max-width: 180px;\n      white-space: nowrap;\n    }\n\n    .cc-drawer-step-tab.active {\n      border-color: var(--mj-brand-primary);\n      background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .cc-tab-num {\n      width: 18px;\n      height: 18px;\n      border-radius: 50%;\n      background: var(--mj-bg-surface-sunken);\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 10px;\n      flex-shrink: 0;\n    }\n\n    .cc-tab-label {\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .cc-drawer-content {\n      flex: 1;\n      min-height: 0;\n      overflow-y: auto;\n      padding: 18px 20px;\n      display: flex;\n      flex-direction: column;\n      gap: 18px;\n    }\n\n    .cc-drawer-metrics-grid {\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: 10px;\n    }\n\n    .cc-drawer-metric-box {\n      padding: 10px;\n      border-radius: 8px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n      align-items: flex-start;\n    }\n\n    .cc-drawer-metric-label {\n      font-size: 10px;\n      font-weight: 700;\n      text-transform: uppercase;\n      color: var(--mj-text-muted);\n    }\n\n    .cc-drawer-metric-val {\n      font-size: 14px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n    }\n\n    .cc-drawer-progress-bar {\n      height: 8px;\n      border-radius: 999px;\n      background: var(--mj-bg-surface-sunken);\n      overflow: hidden;\n    }\n\n    .cc-drawer-progress-fill {\n      height: 100%;\n      border-radius: 999px;\n      transition: width 0.3s ease;\n    }\n\n    .cc-drawer-progress-fill[data-status=\"completed\"] { background: #10b981; }\n    .cc-drawer-progress-fill[data-status=\"active\"] { background: var(--mj-brand-primary); }\n    .cc-drawer-progress-fill[data-status=\"failed\"] { background: #ef4444; }\n\n    .cc-drawer-section {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .cc-drawer-section-head {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n    }\n\n    .cc-drawer-section-title {\n      margin: 0;\n      font-size: 11px;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      color: var(--mj-text-muted);\n    }\n\n    .cc-drawer-links-stack {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .cc-drawer-link-card {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 10px 12px;\n      border-radius: 8px;\n      border: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface-sunken);\n      cursor: pointer;\n      text-align: left;\n      transition: all 0.15s ease;\n    }\n\n    .cc-drawer-link-card:hover {\n      border-color: var(--mj-brand-primary);\n      background: color-mix(in srgb, var(--mj-brand-primary) 6%, var(--mj-bg-surface));\n    }\n\n    .cc-link-card-icon {\n      width: 34px;\n      height: 34px;\n      border-radius: 8px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent);\n      color: var(--mj-brand-primary);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 15px;\n      flex-shrink: 0;\n    }\n\n    .cc-link-card-body {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .cc-link-card-label {\n      font-size: 10px;\n      font-weight: 600;\n      text-transform: uppercase;\n      color: var(--mj-text-muted);\n    }\n\n    .cc-link-card-title {\n      font-size: 13px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .cc-link-card-ext {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n    }\n\n    .cc-drawer-deps-list {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 6px;\n    }\n\n    .cc-drawer-dep-pill {\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      padding: 4px 10px;\n      border-radius: 6px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      font-size: 12px;\n      color: var(--mj-text-secondary);\n    }\n\n    .cc-drawer-timestamps {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n      padding: 10px 12px;\n      border-radius: 8px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n    }\n\n    .cc-ts-row {\n      display: flex;\n      justify-content: space-between;\n      font-size: 12px;\n    }\n\n    .cc-ts-label { color: var(--mj-text-muted); font-weight: 600; }\n    .cc-ts-val { color: var(--mj-text-primary); font-variant-numeric: tabular-nums; }\n\n    .cc-drawer-text-box {\n      padding: 12px;\n      border-radius: 8px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      font-size: 13px;\n      line-height: 1.55;\n      color: var(--mj-text-primary);\n      white-space: pre-wrap;\n      word-break: break-word;\n    }\n\n    .cc-drawer-output-box {\n      padding: 12px;\n      border-radius: 8px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      font-size: 13px;\n      line-height: 1.6;\n      color: var(--mj-text-primary);\n      white-space: pre-wrap;\n      word-break: break-word;\n      max-height: 360px;\n      overflow-y: auto;\n    }\n\n    .cc-drawer-output-box.output-error {\n      border-color: #ef4444;\n      color: #dc2626;\n    }\n\n    .cc-copy-btn {\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      padding: 3px 8px;\n      border-radius: 5px;\n      border: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-secondary);\n      font-size: 11px;\n      font-weight: 600;\n      cursor: pointer;\n    }\n\n    /* Empty State */\n    .cc-empty-state {\n      max-width: 460px;\n      margin: 64px auto;\n      text-align: center;\n      padding: 32px 24px;\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 14px;\n    }\n\n    .cc-empty-icon {\n      width: 52px;\n      height: 52px;\n      border-radius: 12px;\n      margin: 0 auto 14px auto;\n      background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n      color: var(--mj-brand-primary);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 22px;\n    }\n\n    .cc-empty-state h3 {\n      margin: 0 0 8px 0;\n      font-size: 16px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n    }\n\n    .cc-empty-state p {\n      margin: 0;\n      font-size: 13px;\n      line-height: 1.55;\n      color: var(--mj-text-secondary);\n    }\n\n    .cc-reset-filters-btn {\n      margin-top: 14px;\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 7px 14px;\n      border-radius: 8px;\n      border: 1px solid var(--mj-brand-primary);\n      background: transparent;\n      color: var(--mj-brand-primary);\n      font-size: 12px;\n      font-weight: 600;\n      cursor: pointer;\n    }\n  "] }]
     }], null, { EnvironmentId: [{
             type: Input
         }], environmentId: [{
@@ -459,6 +2470,8 @@ export class TasksFullViewComponent extends BaseAngularComponent {
             type: Input
         }], baseFilter: [{
             type: Input
+        }], BaseFilterResolver: [{
+            type: Input
         }], ActiveTaskId: [{
             type: Input
         }], activeTaskId: [{
@@ -472,5 +2485,5 @@ export class TasksFullViewComponent extends BaseAngularComponent {
         }], taskSelected: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TasksFullViewComponent, { className: "TasksFullViewComponent", filePath: "src/lib/components/task/tasks-full-view.component.ts", lineNumber: 138 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TasksFullViewComponent, { className: "TasksFullViewComponent", filePath: "src/lib/components/task/tasks-full-view.component.ts", lineNumber: 2150 }); })();
 //# sourceMappingURL=tasks-full-view.component.js.map