@memberjunction/ng-core-entity-forms 5.43.0 → 5.44.0

package/dist/lib/custom/ai-agent-run/ai-agent-run-step-detail.component.js

@@ -4,8 +4,9 @@ import { ParseJSONRecursive } from '@memberjunction/global';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@angular/forms";
-import * as i3 from "@memberjunction/ng-code-editor";
-import * as i4 from "@memberjunction/ng-deep-diff";
+import * as i3 from "@memberjunction/ng-ui-components";
+import * as i4 from "@memberjunction/ng-code-editor";
+import * as i5 from "@memberjunction/ng-deep-diff";
 const _c0 = a0 => ({ $implicit: a0 });
 const _forTrack0 = ($index, $item) => $item.id;
 function AIAgentRunStepDetailComponent_Conditional_0_Conditional_24_Template(rf, ctx) { if (rf & 1) {
@@ -84,34 +85,26 @@ function AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Conditional_
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵproperty("oldValue", ctx_r1.stepScratchpadInput)("newValue", ctx_r1.stepScratchpadOutput)("title", "")("showSummary", true)("showUnchanged", false)("expandAll", true)("maxDepth", 6)("maxStringLength", 300)("treatNullAsUndefined", true);
 } }
-function AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Conditional_11_Conditional_2_ng_container_5_Template(rf, ctx) { if (rf & 1) {
+function AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Conditional_11_Conditional_2_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
 function AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Conditional_11_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 32);
-    i0.ɵɵelement(1, "i", 33);
-    i0.ɵɵelementStart(2, "span");
-    i0.ɵɵtext(3, "Scratchpad created in this step (no prior state)");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 34);
-    i0.ɵɵtemplate(5, AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Conditional_11_Conditional_2_ng_container_5_Template, 1, 0, "ng-container", 35);
+    i0.ɵɵelement(0, "mj-empty-state", 33);
+    i0.ɵɵelementStart(1, "div", 34);
+    i0.ɵɵtemplate(2, AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Conditional_11_Conditional_2_ng_container_2_Template, 1, 0, "ng-container", 35);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     const scratchpadSnapshotTpl_r8 = i0.ɵɵreference(2);
-    i0.ɵɵadvance(5);
+    i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngTemplateOutlet", scratchpadSnapshotTpl_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, ctx_r1.stepScratchpadOutput));
 } }
 function AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Conditional_11_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 32);
-    i0.ɵɵelement(1, "i", 36);
-    i0.ɵɵelementStart(2, "span");
-    i0.ɵɵtext(3, "No scratchpad changes in this step");
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(0, "mj-empty-state", 32);
 } }
 function AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 30);
-    i0.ɵɵconditionalCreate(1, AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Conditional_11_Conditional_1_Template, 1, 9, "mj-deep-diff", 24)(2, AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Conditional_11_Conditional_2_Template, 6, 4)(3, AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Conditional_11_Conditional_3_Template, 4, 0, "div", 32);
+    i0.ɵɵconditionalCreate(1, AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Conditional_11_Conditional_1_Template, 1, 9, "mj-deep-diff", 24)(2, AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Conditional_11_Conditional_2_Template, 3, 4)(3, AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Conditional_11_Conditional_3_Template, 1, 0, "mj-empty-state", 32);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -129,15 +122,11 @@ function AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Conditional_
     i0.ɵɵproperty("ngTemplateOutlet", scratchpadSnapshotTpl_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, ctx_r1.stepScratchpadInput));
 } }
 function AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Conditional_12_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 32);
-    i0.ɵɵelement(1, "i", 36);
-    i0.ɵɵelementStart(2, "span");
-    i0.ɵɵtext(3, "No scratchpad input for this step");
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(0, "mj-empty-state", 36);
 } }
 function AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 31);
-    i0.ɵɵconditionalCreate(1, AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Conditional_12_Conditional_1_Template, 1, 4, "ng-container")(2, AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Conditional_12_Conditional_2_Template, 4, 0, "div", 32);
+    i0.ɵɵconditionalCreate(1, AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Conditional_12_Conditional_1_Template, 1, 4, "ng-container")(2, AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Conditional_12_Conditional_2_Template, 1, 0, "mj-empty-state", 36);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -155,15 +144,11 @@ function AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Conditional_
     i0.ɵɵproperty("ngTemplateOutlet", scratchpadSnapshotTpl_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, ctx_r1.stepScratchpadOutput));
 } }
 function AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Conditional_13_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 32);
-    i0.ɵɵelement(1, "i", 36);
-    i0.ɵɵelementStart(2, "span");
-    i0.ɵɵtext(3, "No scratchpad output for this step");
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(0, "mj-empty-state", 37);
 } }
 function AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 31);
-    i0.ɵɵconditionalCreate(1, AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Conditional_13_Conditional_1_Template, 1, 4, "ng-container")(2, AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Conditional_13_Conditional_2_Template, 4, 0, "div", 32);
+    i0.ɵɵconditionalCreate(1, AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Conditional_13_Conditional_1_Template, 1, 4, "ng-container")(2, AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Conditional_13_Conditional_2_Template, 1, 0, "mj-empty-state", 37);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -208,11 +193,11 @@ function AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Template(rf,
 } }
 function AIAgentRunStepDetailComponent_Conditional_0_Conditional_29_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 15)(1, "div", 37)(2, "button", 38);
+    i0.ɵɵelementStart(0, "div", 15)(1, "div", 38)(2, "button", 39);
     i0.ɵɵlistener("click", function AIAgentRunStepDetailComponent_Conditional_0_Conditional_29_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onCopyToClipboard()); });
-    i0.ɵɵelement(3, "i", 39);
+    i0.ɵɵelement(3, "i", 40);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "mj-code-editor", 40);
+    i0.ɵɵelementStart(4, "mj-code-editor", 41);
     i0.ɵɵtwoWayListener("ngModelChange", function AIAgentRunStepDetailComponent_Conditional_0_Conditional_29_Template_mj_code_editor_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.selectedItemJsonString, $event) || (ctx_r1.selectedItemJsonString = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -284,11 +269,11 @@ function AIAgentRunStepDetailComponent_Conditional_0_Template(rf, ctx) { if (rf
     i0.ɵɵconditional(ctx_r1.detailPaneTab === "json" || !ctx_r1.showStepPayloadDiff && !ctx_r1.showScratchpadTab ? 29 : -1);
 } }
 function AIAgentRunStepDetailComponent_ng_template_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 41)(1, "h4");
-    i0.ɵɵelement(2, "i", 43);
+    i0.ɵɵelementStart(0, "div", 42)(1, "h4");
+    i0.ɵɵelement(2, "i", 45);
     i0.ɵɵtext(3, " Notes");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 44);
+    i0.ɵɵelementStart(4, "div", 46);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -297,19 +282,19 @@ function AIAgentRunStepDetailComponent_ng_template_1_Conditional_1_Template(rf,
     i0.ɵɵtextInterpolate(snapshot_r10.notes);
 } }
 function AIAgentRunStepDetailComponent_ng_template_1_Conditional_2_For_6_Case_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 49);
+    i0.ɵɵelement(0, "i", 51);
 } }
 function AIAgentRunStepDetailComponent_ng_template_1_Conditional_2_For_6_Case_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 50);
+    i0.ɵɵelement(0, "i", 52);
 } }
 function AIAgentRunStepDetailComponent_ng_template_1_Conditional_2_For_6_Case_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 51);
+    i0.ɵɵelement(0, "i", 53);
 } }
 function AIAgentRunStepDetailComponent_ng_template_1_Conditional_2_For_6_Case_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 52);
+    i0.ɵɵelement(0, "i", 54);
 } }
 function AIAgentRunStepDetailComponent_ng_template_1_Conditional_2_For_6_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 56);
+    i0.ɵɵelementStart(0, "span", 58);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -318,18 +303,18 @@ function AIAgentRunStepDetailComponent_ng_template_1_Conditional_2_For_6_Conditi
     i0.ɵɵtextInterpolate(task_r11.notes);
 } }
 function AIAgentRunStepDetailComponent_ng_template_1_Conditional_2_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 47)(1, "span", 48);
-    i0.ɵɵconditionalCreate(2, AIAgentRunStepDetailComponent_ng_template_1_Conditional_2_For_6_Case_2_Template, 1, 0, "i", 49)(3, AIAgentRunStepDetailComponent_ng_template_1_Conditional_2_For_6_Case_3_Template, 1, 0, "i", 50)(4, AIAgentRunStepDetailComponent_ng_template_1_Conditional_2_For_6_Case_4_Template, 1, 0, "i", 51)(5, AIAgentRunStepDetailComponent_ng_template_1_Conditional_2_For_6_Case_5_Template, 1, 0, "i", 52);
+    i0.ɵɵelementStart(0, "div", 49)(1, "span", 50);
+    i0.ɵɵconditionalCreate(2, AIAgentRunStepDetailComponent_ng_template_1_Conditional_2_For_6_Case_2_Template, 1, 0, "i", 51)(3, AIAgentRunStepDetailComponent_ng_template_1_Conditional_2_For_6_Case_3_Template, 1, 0, "i", 52)(4, AIAgentRunStepDetailComponent_ng_template_1_Conditional_2_For_6_Case_4_Template, 1, 0, "i", 53)(5, AIAgentRunStepDetailComponent_ng_template_1_Conditional_2_For_6_Case_5_Template, 1, 0, "i", 54);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 53)(7, "span", 54);
+    i0.ɵɵelementStart(6, "div", 55)(7, "span", 56);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 55);
+    i0.ɵɵelementStart(9, "span", 57);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(11, AIAgentRunStepDetailComponent_ng_template_1_Conditional_2_For_6_Conditional_11_Template, 2, 1, "span", 56);
+    i0.ɵɵconditionalCreate(11, AIAgentRunStepDetailComponent_ng_template_1_Conditional_2_For_6_Conditional_11_Template, 2, 1, "span", 58);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "span", 57);
+    i0.ɵɵelementStart(12, "span", 59);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -352,12 +337,12 @@ function AIAgentRunStepDetailComponent_ng_template_1_Conditional_2_For_6_Templat
     i0.ɵɵtextInterpolate(task_r11.status);
 } }
 function AIAgentRunStepDetailComponent_ng_template_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 42)(1, "h4");
-    i0.ɵɵelement(2, "i", 45);
+    i0.ɵɵelementStart(0, "div", 43)(1, "h4");
+    i0.ɵɵelement(2, "i", 47);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 46);
-    i0.ɵɵrepeaterCreate(5, AIAgentRunStepDetailComponent_ng_template_1_Conditional_2_For_6_Template, 14, 8, "div", 47, _forTrack0);
+    i0.ɵɵelementStart(4, "div", 48);
+    i0.ɵɵrepeaterCreate(5, AIAgentRunStepDetailComponent_ng_template_1_Conditional_2_For_6_Template, 14, 8, "div", 49, _forTrack0);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const snapshot_r10 = i0.ɵɵnextContext().$implicit;
@@ -367,17 +352,13 @@ function AIAgentRunStepDetailComponent_ng_template_1_Conditional_2_Template(rf,
     i0.ɵɵrepeater(snapshot_r10.tasks);
 } }
 function AIAgentRunStepDetailComponent_ng_template_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 32);
-    i0.ɵɵelement(1, "i", 36);
-    i0.ɵɵelementStart(2, "span");
-    i0.ɵɵtext(3, "Empty scratchpad");
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(0, "mj-empty-state", 44);
 } }
 function AIAgentRunStepDetailComponent_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 34);
-    i0.ɵɵconditionalCreate(1, AIAgentRunStepDetailComponent_ng_template_1_Conditional_1_Template, 6, 1, "div", 41);
-    i0.ɵɵconditionalCreate(2, AIAgentRunStepDetailComponent_ng_template_1_Conditional_2_Template, 7, 1, "div", 42);
-    i0.ɵɵconditionalCreate(3, AIAgentRunStepDetailComponent_ng_template_1_Conditional_3_Template, 4, 0, "div", 32);
+    i0.ɵɵconditionalCreate(1, AIAgentRunStepDetailComponent_ng_template_1_Conditional_1_Template, 6, 1, "div", 42);
+    i0.ɵɵconditionalCreate(2, AIAgentRunStepDetailComponent_ng_template_1_Conditional_2_Template, 7, 1, "div", 43);
+    i0.ɵɵconditionalCreate(3, AIAgentRunStepDetailComponent_ng_template_1_Conditional_3_Template, 1, 0, "mj-empty-state", 44);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const snapshot_r10 = ctx.$implicit;
@@ -600,16 +581,16 @@ export class AIAgentRunStepDetailComponent {
         }
     }
     static { this.ɵfac = function AIAgentRunStepDetailComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AIAgentRunStepDetailComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AIAgentRunStepDetailComponent, selectors: [["mj-ai-agent-run-step-detail"]], inputs: { selectedTimelineItem: "selectedTimelineItem" }, outputs: { closePanel: "closePanel", navigateToActionLog: "navigateToActionLog", copyToClipboard: "copyToClipboard" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 3, vars: 1, consts: [["scratchpadSnapshotTpl", ""], [1, "json-detail-pane"], [1, "json-pane-header"], [1, "fas", 3, "ngClass"], ["title", "Close", 1, "btn-icon", 3, "click"], [1, "fas", "fa-times"], [1, "json-pane-content"], [1, "json-meta"], [1, "meta-item"], [1, "status-badge", "small"], [1, "action-link"], [1, "detail-pane-tabs"], [1, "detail-pane-content"], [1, "step-payload-diff"], [1, "scratchpad-content"], [1, "json-viewer"], [1, "btn-link", 3, "click"], [1, "fas", "fa-external-link-alt"], [1, "detail-tab", 3, "active"], [1, "detail-tab", 3, "click"], [1, "fa-solid", "fa-code"], [1, "fa-solid", "fa-code-branch"], [1, "fa-solid", "fa-clipboard-list"], [1, "tab-badge"], [3, "oldValue", "newValue", "title", "showSummary", "showUnchanged", "expandAll", "maxDepth", "maxStringLength", "treatNullAsUndefined"], [1, "scratchpad-sub-tabs"], [1, "scratchpad-sub-tab", 3, "click"], [1, "fa-solid", "fa-code-compare"], [1, "fa-solid", "fa-arrow-right-to-bracket"], [1, "fa-solid", "fa-arrow-right-from-bracket"], [1, "scratchpad-diff-view"], [1, "scratchpad-snapshot-view"], [1, "scratchpad-empty-state"], [1, "fa-solid", "fa-circle-plus"], [1, "scratchpad-snapshot"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "fa-solid", "fa-circle-info"], [1, "json-toolbar"], ["title", "Copy JSON", 1, "btn-icon", 3, "click"], [1, "fas", "fa-copy"], [2, "width", "100%", 3, "ngModelChange", "ngModel", "language", "readonly"], [1, "scratchpad-notes-section"], [1, "scratchpad-tasks-section"], [1, "fa-solid", "fa-note-sticky"], [1, "scratchpad-notes-content"], [1, "fa-solid", "fa-list-check"], [1, "scratchpad-task-list"], [1, "scratchpad-task-item"], [1, "task-status-indicator"], [1, "fa-solid", "fa-circle-check"], [1, "fa-solid", "fa-spinner"], [1, "fa-solid", "fa-circle-xmark"], [1, "fa-regular", "fa-circle"], [1, "task-content"], [1, "task-id"], [1, "task-title"], [1, "task-notes"], [1, "task-status-badge"]], template: function AIAgentRunStepDetailComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AIAgentRunStepDetailComponent, selectors: [["mj-ai-agent-run-step-detail"]], inputs: { selectedTimelineItem: "selectedTimelineItem" }, outputs: { closePanel: "closePanel", navigateToActionLog: "navigateToActionLog", copyToClipboard: "copyToClipboard" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 3, vars: 1, consts: [["scratchpadSnapshotTpl", ""], [1, "json-detail-pane"], [1, "json-pane-header"], [1, "fas", 3, "ngClass"], ["title", "Close", 1, "btn-icon", 3, "click"], [1, "fas", "fa-times"], [1, "json-pane-content"], [1, "json-meta"], [1, "meta-item"], [1, "status-badge", "small"], [1, "action-link"], [1, "detail-pane-tabs"], [1, "detail-pane-content"], [1, "step-payload-diff"], [1, "scratchpad-content"], [1, "json-viewer"], [1, "btn-link", 3, "click"], [1, "fas", "fa-external-link-alt"], [1, "detail-tab", 3, "active"], [1, "detail-tab", 3, "click"], [1, "fa-solid", "fa-code"], [1, "fa-solid", "fa-code-branch"], [1, "fa-solid", "fa-clipboard-list"], [1, "tab-badge"], [3, "oldValue", "newValue", "title", "showSummary", "showUnchanged", "expandAll", "maxDepth", "maxStringLength", "treatNullAsUndefined"], [1, "scratchpad-sub-tabs"], [1, "scratchpad-sub-tab", 3, "click"], [1, "fa-solid", "fa-code-compare"], [1, "fa-solid", "fa-arrow-right-to-bracket"], [1, "fa-solid", "fa-arrow-right-from-bracket"], [1, "scratchpad-diff-view"], [1, "scratchpad-snapshot-view"], ["Size", "compact", "Icon", "fa-solid fa-circle-info", "Title", "No scratchpad changes in this step"], ["Size", "compact", "Icon", "fa-solid fa-circle-plus", "Title", "Scratchpad created in this step (no prior state)"], [1, "scratchpad-snapshot"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["Size", "compact", "Icon", "fa-solid fa-circle-info", "Title", "No scratchpad input for this step"], ["Size", "compact", "Icon", "fa-solid fa-circle-info", "Title", "No scratchpad output for this step"], [1, "json-toolbar"], ["title", "Copy JSON", 1, "btn-icon", 3, "click"], [1, "fas", "fa-copy"], [2, "width", "100%", 3, "ngModelChange", "ngModel", "language", "readonly"], [1, "scratchpad-notes-section"], [1, "scratchpad-tasks-section"], ["Size", "compact", "Icon", "fa-solid fa-circle-info", "Title", "Empty scratchpad"], [1, "fa-solid", "fa-note-sticky"], [1, "scratchpad-notes-content"], [1, "fa-solid", "fa-list-check"], [1, "scratchpad-task-list"], [1, "scratchpad-task-item"], [1, "task-status-indicator"], [1, "fa-solid", "fa-circle-check"], [1, "fa-solid", "fa-spinner"], [1, "fa-solid", "fa-circle-xmark"], [1, "fa-regular", "fa-circle"], [1, "task-content"], [1, "task-id"], [1, "task-title"], [1, "task-notes"], [1, "task-status-badge"]], template: function AIAgentRunStepDetailComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, AIAgentRunStepDetailComponent_Conditional_0_Template, 30, 13, "div", 1);
             i0.ɵɵtemplate(1, AIAgentRunStepDetailComponent_ng_template_1_Template, 4, 3, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.selectedTimelineItem ? 0 : -1);
-        } }, dependencies: [i1.NgClass, i1.NgTemplateOutlet, i2.NgControlStatus, i2.NgModel, i3.CodeEditorComponent, i4.DeepDiffComponent], styles: [".json-detail-pane[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n}\n\n.json-pane-header[_ngcontent-%COMP%] {\n  padding: 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.json-pane-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  padding: 4px 8px;\n  cursor: pointer;\n  color: var(--mj-text-muted);\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-text-primary) 5%, transparent);\n  color: var(--mj-text-secondary);\n}\n\n.json-pane-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n.json-meta[_ngcontent-%COMP%] {\n  padding: 16px;\n  display: flex;\n  gap: 24px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.meta-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.meta-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  text-transform: uppercase;\n  color: var(--mj-text-muted);\n  font-weight: 600;\n}\n\n.meta-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.status-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 4px 8px;\n  border-radius: 4px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n.status-badge.small[_ngcontent-%COMP%] {\n  padding: 2px 6px;\n  font-size: 10px;\n}\n\n.status-badge[data-status=\"Running\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.status-badge[data-status=\"Completed\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.status-badge[data-status=\"Failed\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.status-badge[data-status=\"Cancelled\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.action-link[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.btn-link[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  padding: 6px 12px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 13px;\n}\n\n.btn-link[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  color: var(--mj-brand-primary);\n}\n\n.detail-pane-tabs[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0;\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 0 16px;\n}\n\n.detail-tab[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  background: none;\n  border: none;\n  border-bottom: 2px solid transparent;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.detail-tab[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n  background: color-mix(in srgb, var(--mj-text-primary) 2%, transparent);\n}\n\n.detail-tab.active[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n  font-weight: 600;\n}\n\n.detail-pane-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0; \n\n}\n\n\n\n\n\n\n\n\n.json-viewer[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  overflow: hidden;\n  min-height: 0; \n\n}\n\n.json-toolbar[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  z-index: 10;\n  display: flex;\n  gap: 4px;\n}\n\n.step-payload-diff[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n  min-height: 0; \n\n}\n\n\n\n.json-viewer[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n\n\n.tab-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  border-radius: 9px;\n  font-size: 10px;\n  font-weight: 700;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n\n\n.scratchpad-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0;\n}\n\n\n\n.scratchpad-sub-tabs[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0;\n  padding: 0 16px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-surface);\n}\n\n.scratchpad-sub-tab[_ngcontent-%COMP%] {\n  padding: 8px 12px;\n  background: none;\n  border: none;\n  border-bottom: 2px solid transparent;\n  cursor: pointer;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n\n.scratchpad-sub-tab[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n  background: color-mix(in srgb, var(--mj-text-primary) 2%, transparent);\n}\n\n.scratchpad-sub-tab.active[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n  font-weight: 600;\n}\n\n\n\n.scratchpad-diff-view[_ngcontent-%COMP%], \n.scratchpad-snapshot-view[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n  min-height: 0;\n}\n\n\n\n.scratchpad-snapshot[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.scratchpad-notes-section[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%], \n.scratchpad-tasks-section[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.scratchpad-notes-content[_ngcontent-%COMP%] {\n  padding: 12px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 6px;\n  border: 1px solid var(--mj-border-subtle);\n  font-size: 13px;\n  line-height: 1.5;\n  color: var(--mj-text-primary);\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n\n\n.scratchpad-task-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.scratchpad-task-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding: 8px 12px;\n  border-radius: 6px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-subtle);\n  transition: background 0.15s;\n}\n\n.scratchpad-task-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n\n\n.task-status-indicator[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  width: 16px;\n  margin-top: 2px;\n  font-size: 14px;\n}\n\n.task-status-indicator[data-status=\"completed\"][_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n\n.task-status-indicator[data-status=\"in_progress\"][_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.task-status-indicator[data-status=\"blocked\"][_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.task-status-indicator[data-status=\"pending\"][_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n\n\n\n.task-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.task-id[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n}\n\n.task-title[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  line-height: 1.4;\n}\n\n.task-notes[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  line-height: 1.4;\n  font-style: italic;\n}\n\n\n\n.task-status-badge[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-size: 10px;\n  font-weight: 600;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n.task-status-badge[data-status=\"completed\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.task-status-badge[data-status=\"in_progress\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.task-status-badge[data-status=\"blocked\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.task-status-badge[data-status=\"pending\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-text-muted) 15%, var(--mj-bg-surface));\n  color: var(--mj-text-muted);\n}\n\n\n\n.scratchpad-empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 16px;\n  color: var(--mj-text-muted);\n  font-size: 13px;\n  font-style: italic;\n}"] }); }
+        } }, dependencies: [i1.NgClass, i1.NgTemplateOutlet, i2.NgControlStatus, i2.NgModel, i3.MJEmptyStateComponent, i4.CodeEditorComponent, i5.DeepDiffComponent], styles: [".json-detail-pane[_ngcontent-%COMP%] {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n}\n\n.json-pane-header[_ngcontent-%COMP%] {\n  padding: 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.json-pane-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  padding: 4px 8px;\n  cursor: pointer;\n  color: var(--mj-text-muted);\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-text-primary) 5%, transparent);\n  color: var(--mj-text-secondary);\n}\n\n.json-pane-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n.json-meta[_ngcontent-%COMP%] {\n  padding: 16px;\n  display: flex;\n  gap: 24px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.meta-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.meta-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  text-transform: uppercase;\n  color: var(--mj-text-muted);\n  font-weight: 600;\n}\n\n.meta-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.status-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 4px 8px;\n  border-radius: 4px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n.status-badge.small[_ngcontent-%COMP%] {\n  padding: 2px 6px;\n  font-size: 10px;\n}\n\n.status-badge[data-status=\"Running\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.status-badge[data-status=\"Completed\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.status-badge[data-status=\"Failed\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.status-badge[data-status=\"Cancelled\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.action-link[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.btn-link[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  padding: 6px 12px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 13px;\n}\n\n.btn-link[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  color: var(--mj-brand-primary);\n}\n\n.detail-pane-tabs[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0;\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 0 16px;\n}\n\n.detail-tab[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  background: none;\n  border: none;\n  border-bottom: 2px solid transparent;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.detail-tab[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n  background: color-mix(in srgb, var(--mj-text-primary) 2%, transparent);\n}\n\n.detail-tab.active[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n  font-weight: 600;\n}\n\n.detail-pane-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0; \n\n}\n\n\n\n\n\n\n\n\n.json-viewer[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  overflow: hidden;\n  min-height: 0; \n\n}\n\n.json-toolbar[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  z-index: 10;\n  display: flex;\n  gap: 4px;\n}\n\n.step-payload-diff[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n  min-height: 0; \n\n}\n\n\n\n.json-viewer[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n\n\n.tab-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  border-radius: 9px;\n  font-size: 10px;\n  font-weight: 700;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n\n\n.scratchpad-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0;\n}\n\n\n\n.scratchpad-sub-tabs[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0;\n  padding: 0 16px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-surface);\n}\n\n.scratchpad-sub-tab[_ngcontent-%COMP%] {\n  padding: 8px 12px;\n  background: none;\n  border: none;\n  border-bottom: 2px solid transparent;\n  cursor: pointer;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n\n.scratchpad-sub-tab[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-secondary);\n  background: color-mix(in srgb, var(--mj-text-primary) 2%, transparent);\n}\n\n.scratchpad-sub-tab.active[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n  font-weight: 600;\n}\n\n\n\n.scratchpad-diff-view[_ngcontent-%COMP%], \n.scratchpad-snapshot-view[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n  min-height: 0;\n}\n\n\n\n.scratchpad-snapshot[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.scratchpad-notes-section[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%], \n.scratchpad-tasks-section[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.scratchpad-notes-content[_ngcontent-%COMP%] {\n  padding: 12px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 6px;\n  border: 1px solid var(--mj-border-subtle);\n  font-size: 13px;\n  line-height: 1.5;\n  color: var(--mj-text-primary);\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n\n\n.scratchpad-task-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.scratchpad-task-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding: 8px 12px;\n  border-radius: 6px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-subtle);\n  transition: background 0.15s;\n}\n\n.scratchpad-task-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n\n\n.task-status-indicator[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  width: 16px;\n  margin-top: 2px;\n  font-size: 14px;\n}\n\n.task-status-indicator[data-status=\"completed\"][_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n\n.task-status-indicator[data-status=\"in_progress\"][_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.task-status-indicator[data-status=\"blocked\"][_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.task-status-indicator[data-status=\"pending\"][_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n\n\n\n.task-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.task-id[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n}\n\n.task-title[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  line-height: 1.4;\n}\n\n.task-notes[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  line-height: 1.4;\n  font-style: italic;\n}\n\n\n\n.task-status-badge[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-size: 10px;\n  font-weight: 600;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n.task-status-badge[data-status=\"completed\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.task-status-badge[data-status=\"in_progress\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.task-status-badge[data-status=\"blocked\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.task-status-badge[data-status=\"pending\"][_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-text-muted) 15%, var(--mj-bg-surface));\n  color: var(--mj-text-muted);\n}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AIAgentRunStepDetailComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-ai-agent-run-step-detail', template: "@if (selectedTimelineItem) {\n  <div class=\"json-detail-pane\">\n    <div class=\"json-pane-header\">\n      <h3>\n        <i class=\"fas\" [ngClass]=\"selectedTimelineItem.icon\"></i>\n        {{ selectedTimelineItem.title }}\n      </h3>\n      <button class=\"btn-icon\" (click)=\"onClosePanel()\" title=\"Close\">\n        <i class=\"fas fa-times\"></i>\n      </button>\n    </div>\n    <div class=\"json-pane-content\">\n      <div class=\"json-meta\">\n        <div class=\"meta-item\">\n          <label>Type</label>\n          <span>{{ selectedTimelineItem.type }}</span>\n        </div>\n        <div class=\"meta-item\">\n          <label>Status</label>\n          <span class=\"status-badge small\" [attr.data-status]=\"selectedTimelineItem.status\">\n            {{ selectedTimelineItem.status }}\n          </span>\n        </div>\n        <div class=\"meta-item\">\n          <label>Duration</label>\n          <span>{{ selectedTimelineItem.duration || 'N/A' }}</span>\n        </div>\n      </div>\n      <!-- Action-specific link -->\n      @if (selectedTimelineItem.type === 'action' && selectedTimelineItem.data?.ID) {\n        <div class=\"action-link\">\n          <button class=\"btn-link\" (click)=\"onNavigateToActionLog(selectedTimelineItem.data.ID)\">\n            <i class=\"fas fa-external-link-alt\"></i> View Action Execution Log\n          </button>\n        </div>\n      }\n      <!-- Tab Navigation - Show when we have payload diff or scratchpad data -->\n      @if (showStepPayloadDiff || showScratchpadTab) {\n        <div class=\"detail-pane-tabs\">\n          @if (showStepPayloadDiff) {\n            <button\n              class=\"detail-tab\"\n              [class.active]=\"detailPaneTab === 'diff'\"\n              (click)=\"detailPaneTab = 'diff'\">\n              <i class=\"fa-solid fa-code-branch\"></i>\n              Payload Changes\n            </button>\n          }\n          @if (showScratchpadTab) {\n            <button\n              class=\"detail-tab\"\n              [class.active]=\"detailPaneTab === 'scratchpad'\"\n              (click)=\"detailPaneTab = 'scratchpad'\">\n              <i class=\"fa-solid fa-clipboard-list\"></i>\n              Scratchpad\n              @if (scratchpadTaskChangeCount > 0) {\n                <span class=\"tab-badge\">{{ scratchpadTaskChangeCount }}</span>\n              }\n            </button>\n          }\n          <button\n            class=\"detail-tab\"\n            [class.active]=\"detailPaneTab === 'json'\"\n            (click)=\"detailPaneTab = 'json'\">\n            <i class=\"fa-solid fa-code\"></i>\n            Full JSON\n          </button>\n        </div>\n      }\n      <!-- Tab Content -->\n      <div class=\"detail-pane-content\" [class.with-tabs]=\"showStepPayloadDiff || showScratchpadTab\">\n        <!-- Payload Diff Tab -->\n        @if (detailPaneTab === 'diff' && showStepPayloadDiff) {\n          <div class=\"step-payload-diff\">\n            <mj-deep-diff\n              [oldValue]=\"stepPayloadAtStartObject\"\n              [newValue]=\"stepPayloadAtEndObject\"\n              [title]=\"''\"\n              [showSummary]=\"true\"\n              [showUnchanged]=\"false\"\n              [expandAll]=\"false\"\n              [maxDepth]=\"8\"\n              [maxStringLength]=\"150\"\n              [treatNullAsUndefined]=\"true\">\n            </mj-deep-diff>\n          </div>\n        }\n        <!-- Scratchpad Tab -->\n        @if (detailPaneTab === 'scratchpad' && showScratchpadTab) {\n          <div class=\"scratchpad-content\">\n            <div class=\"scratchpad-sub-tabs\">\n              <button\n                class=\"scratchpad-sub-tab\"\n                [class.active]=\"scratchpadSubTab === 'diff'\"\n                (click)=\"scratchpadSubTab = 'diff'\">\n                <i class=\"fa-solid fa-code-compare\"></i> Diff\n              </button>\n              <button\n                class=\"scratchpad-sub-tab\"\n                [class.active]=\"scratchpadSubTab === 'input'\"\n                (click)=\"scratchpadSubTab = 'input'\">\n                <i class=\"fa-solid fa-arrow-right-to-bracket\"></i> Input\n              </button>\n              <button\n                class=\"scratchpad-sub-tab\"\n                [class.active]=\"scratchpadSubTab === 'output'\"\n                (click)=\"scratchpadSubTab = 'output'\">\n                <i class=\"fa-solid fa-arrow-right-from-bracket\"></i> Output\n              </button>\n            </div>\n            <!-- Scratchpad Diff Sub-Tab -->\n            @if (scratchpadSubTab === 'diff') {\n              <div class=\"scratchpad-diff-view\">\n                @if (stepScratchpadInput && stepScratchpadOutput) {\n                  <mj-deep-diff\n                    [oldValue]=\"stepScratchpadInput\"\n                    [newValue]=\"stepScratchpadOutput\"\n                    [title]=\"''\"\n                    [showSummary]=\"true\"\n                    [showUnchanged]=\"false\"\n                    [expandAll]=\"true\"\n                    [maxDepth]=\"6\"\n                    [maxStringLength]=\"300\"\n                    [treatNullAsUndefined]=\"true\">\n                  </mj-deep-diff>\n                } @else if (stepScratchpadOutput) {\n                  <div class=\"scratchpad-empty-state\">\n                    <i class=\"fa-solid fa-circle-plus\"></i>\n                    <span>Scratchpad created in this step (no prior state)</span>\n                  </div>\n                  <div class=\"scratchpad-snapshot\">\n                    <ng-container *ngTemplateOutlet=\"scratchpadSnapshotTpl; context: { $implicit: stepScratchpadOutput }\"></ng-container>\n                  </div>\n                } @else {\n                  <div class=\"scratchpad-empty-state\">\n                    <i class=\"fa-solid fa-circle-info\"></i>\n                    <span>No scratchpad changes in this step</span>\n                  </div>\n                }\n              </div>\n            }\n            <!-- Scratchpad Input Sub-Tab -->\n            @if (scratchpadSubTab === 'input') {\n              <div class=\"scratchpad-snapshot-view\">\n                @if (stepScratchpadInput) {\n                  <ng-container *ngTemplateOutlet=\"scratchpadSnapshotTpl; context: { $implicit: stepScratchpadInput }\"></ng-container>\n                } @else {\n                  <div class=\"scratchpad-empty-state\">\n                    <i class=\"fa-solid fa-circle-info\"></i>\n                    <span>No scratchpad input for this step</span>\n                  </div>\n                }\n              </div>\n            }\n            <!-- Scratchpad Output Sub-Tab -->\n            @if (scratchpadSubTab === 'output') {\n              <div class=\"scratchpad-snapshot-view\">\n                @if (stepScratchpadOutput) {\n                  <ng-container *ngTemplateOutlet=\"scratchpadSnapshotTpl; context: { $implicit: stepScratchpadOutput }\"></ng-container>\n                } @else {\n                  <div class=\"scratchpad-empty-state\">\n                    <i class=\"fa-solid fa-circle-info\"></i>\n                    <span>No scratchpad output for this step</span>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n        <!-- Full JSON Tab -->\n        @if (detailPaneTab === 'json' || (!showStepPayloadDiff && !showScratchpadTab)) {\n          <div class=\"json-viewer\">\n            <div class=\"json-toolbar\">\n              <button class=\"btn-icon\" title=\"Copy JSON\" (click)=\"onCopyToClipboard()\">\n                <i class=\"fas fa-copy\"></i>\n              </button>\n            </div>\n            <mj-code-editor\n              [(ngModel)]=\"selectedItemJsonString\"\n              [language]=\"'json'\"\n              [readonly]=\"true\"\n              style=\"width: 100%;\">\n            </mj-code-editor>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Reusable scratchpad snapshot template -->\n<ng-template #scratchpadSnapshotTpl let-snapshot>\n  <div class=\"scratchpad-snapshot\">\n    @if (snapshot.notes) {\n      <div class=\"scratchpad-notes-section\">\n        <h4><i class=\"fa-solid fa-note-sticky\"></i> Notes</h4>\n        <div class=\"scratchpad-notes-content\">{{ snapshot.notes }}</div>\n      </div>\n    }\n    @if (snapshot.tasks?.length > 0) {\n      <div class=\"scratchpad-tasks-section\">\n        <h4><i class=\"fa-solid fa-list-check\"></i> Tasks ({{ snapshot.tasks.length }})</h4>\n        <div class=\"scratchpad-task-list\">\n          @for (task of snapshot.tasks; track task.id) {\n            <div class=\"scratchpad-task-item\" [attr.data-status]=\"task.status\">\n              <span class=\"task-status-indicator\" [attr.data-status]=\"task.status\">\n                @switch (task.status) {\n                  @case ('completed') { <i class=\"fa-solid fa-circle-check\"></i> }\n                  @case ('in_progress') { <i class=\"fa-solid fa-spinner\"></i> }\n                  @case ('blocked') { <i class=\"fa-solid fa-circle-xmark\"></i> }\n                  @default { <i class=\"fa-regular fa-circle\"></i> }\n                }\n              </span>\n              <div class=\"task-content\">\n                <span class=\"task-id\">{{ task.id }}</span>\n                <span class=\"task-title\">{{ task.title }}</span>\n                @if (task.notes) {\n                  <span class=\"task-notes\">{{ task.notes }}</span>\n                }\n              </div>\n              <span class=\"task-status-badge\" [attr.data-status]=\"task.status\">{{ task.status }}</span>\n            </div>\n          }\n        </div>\n      </div>\n    }\n    @if (!snapshot.notes && (!snapshot.tasks || snapshot.tasks.length === 0)) {\n      <div class=\"scratchpad-empty-state\">\n        <i class=\"fa-solid fa-circle-info\"></i>\n        <span>Empty scratchpad</span>\n      </div>\n    }\n  </div>\n</ng-template>", styles: [".json-detail-pane {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n}\n\n.json-pane-header {\n  padding: 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.json-pane-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.btn-icon {\n  background: none;\n  border: none;\n  padding: 4px 8px;\n  cursor: pointer;\n  color: var(--mj-text-muted);\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.btn-icon:hover {\n  background: color-mix(in srgb, var(--mj-text-primary) 5%, transparent);\n  color: var(--mj-text-secondary);\n}\n\n.json-pane-content {\n  flex: 1;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n.json-meta {\n  padding: 16px;\n  display: flex;\n  gap: 24px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.meta-item {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.meta-item label {\n  font-size: 11px;\n  text-transform: uppercase;\n  color: var(--mj-text-muted);\n  font-weight: 600;\n}\n\n.meta-item span {\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 4px 8px;\n  border-radius: 4px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n.status-badge.small {\n  padding: 2px 6px;\n  font-size: 10px;\n}\n\n.status-badge[data-status=\"Running\"] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.status-badge[data-status=\"Completed\"] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.status-badge[data-status=\"Failed\"] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.status-badge[data-status=\"Cancelled\"] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.action-link {\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.btn-link {\n  background: none;\n  border: none;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  padding: 6px 12px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 13px;\n}\n\n.btn-link:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  color: var(--mj-brand-primary);\n}\n\n.detail-pane-tabs {\n  display: flex;\n  gap: 0;\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 0 16px;\n}\n\n.detail-tab {\n  padding: 12px 16px;\n  background: none;\n  border: none;\n  border-bottom: 2px solid transparent;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.detail-tab:hover {\n  color: var(--mj-text-secondary);\n  background: color-mix(in srgb, var(--mj-text-primary) 2%, transparent);\n}\n\n.detail-tab.active {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n  font-weight: 600;\n}\n\n.detail-pane-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0; /* Allow flexbox to properly size */\n}\n\n/* \n.detail-pane-content.with-tabs {\n  // No explicit height needed with flexbox \n} \n*/\n\n.json-viewer {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  overflow: hidden;\n  min-height: 0; /* Important for flexbox children to respect overflow */\n}\n\n.json-toolbar {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  z-index: 10;\n  display: flex;\n  gap: 4px;\n}\n\n.step-payload-diff {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n  min-height: 0; /* Allow proper scrolling */\n}\n\n/* Specific styling for mj-code-editor container */\n.json-viewer mj-code-editor {\n  flex: 1;\n  overflow: hidden;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n/* Tab badge for change count */\n.tab-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  border-radius: 9px;\n  font-size: 10px;\n  font-weight: 700;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n/* Scratchpad content area */\n.scratchpad-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0;\n}\n\n/* Scratchpad sub-tabs */\n.scratchpad-sub-tabs {\n  display: flex;\n  gap: 0;\n  padding: 0 16px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-surface);\n}\n\n.scratchpad-sub-tab {\n  padding: 8px 12px;\n  background: none;\n  border: none;\n  border-bottom: 2px solid transparent;\n  cursor: pointer;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n\n.scratchpad-sub-tab:hover {\n  color: var(--mj-text-secondary);\n  background: color-mix(in srgb, var(--mj-text-primary) 2%, transparent);\n}\n\n.scratchpad-sub-tab.active {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n  font-weight: 600;\n}\n\n/* Scratchpad diff and snapshot views */\n.scratchpad-diff-view,\n.scratchpad-snapshot-view {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n  min-height: 0;\n}\n\n/* Scratchpad snapshot rendering */\n.scratchpad-snapshot {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.scratchpad-notes-section h4,\n.scratchpad-tasks-section h4 {\n  margin: 0 0 8px 0;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.scratchpad-notes-content {\n  padding: 12px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 6px;\n  border: 1px solid var(--mj-border-subtle);\n  font-size: 13px;\n  line-height: 1.5;\n  color: var(--mj-text-primary);\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n/* Task list */\n.scratchpad-task-list {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.scratchpad-task-item {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding: 8px 12px;\n  border-radius: 6px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-subtle);\n  transition: background 0.15s;\n}\n\n.scratchpad-task-item:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n/* Task status indicator icon */\n.task-status-indicator {\n  flex-shrink: 0;\n  width: 16px;\n  margin-top: 2px;\n  font-size: 14px;\n}\n\n.task-status-indicator[data-status=\"completed\"] {\n  color: var(--mj-status-success);\n}\n\n.task-status-indicator[data-status=\"in_progress\"] {\n  color: var(--mj-brand-primary);\n}\n\n.task-status-indicator[data-status=\"blocked\"] {\n  color: var(--mj-status-error);\n}\n\n.task-status-indicator[data-status=\"pending\"] {\n  color: var(--mj-text-muted);\n}\n\n/* Task content */\n.task-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.task-id {\n  font-size: 10px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n}\n\n.task-title {\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  line-height: 1.4;\n}\n\n.task-notes {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  line-height: 1.4;\n  font-style: italic;\n}\n\n/* Task status badge */\n.task-status-badge {\n  flex-shrink: 0;\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-size: 10px;\n  font-weight: 600;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n.task-status-badge[data-status=\"completed\"] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.task-status-badge[data-status=\"in_progress\"] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.task-status-badge[data-status=\"blocked\"] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.task-status-badge[data-status=\"pending\"] {\n  background: color-mix(in srgb, var(--mj-text-muted) 15%, var(--mj-bg-surface));\n  color: var(--mj-text-muted);\n}\n\n/* Empty state */\n.scratchpad-empty-state {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 16px;\n  color: var(--mj-text-muted);\n  font-size: 13px;\n  font-style: italic;\n}"] }]
+        args: [{ standalone: false, selector: 'mj-ai-agent-run-step-detail', template: "@if (selectedTimelineItem) {\n  <div class=\"json-detail-pane\">\n    <div class=\"json-pane-header\">\n      <h3>\n        <i class=\"fas\" [ngClass]=\"selectedTimelineItem.icon\"></i>\n        {{ selectedTimelineItem.title }}\n      </h3>\n      <button class=\"btn-icon\" (click)=\"onClosePanel()\" title=\"Close\">\n        <i class=\"fas fa-times\"></i>\n      </button>\n    </div>\n    <div class=\"json-pane-content\">\n      <div class=\"json-meta\">\n        <div class=\"meta-item\">\n          <label>Type</label>\n          <span>{{ selectedTimelineItem.type }}</span>\n        </div>\n        <div class=\"meta-item\">\n          <label>Status</label>\n          <span class=\"status-badge small\" [attr.data-status]=\"selectedTimelineItem.status\">\n            {{ selectedTimelineItem.status }}\n          </span>\n        </div>\n        <div class=\"meta-item\">\n          <label>Duration</label>\n          <span>{{ selectedTimelineItem.duration || 'N/A' }}</span>\n        </div>\n      </div>\n      <!-- Action-specific link -->\n      @if (selectedTimelineItem.type === 'action' && selectedTimelineItem.data?.ID) {\n        <div class=\"action-link\">\n          <button class=\"btn-link\" (click)=\"onNavigateToActionLog(selectedTimelineItem.data.ID)\">\n            <i class=\"fas fa-external-link-alt\"></i> View Action Execution Log\n          </button>\n        </div>\n      }\n      <!-- Tab Navigation - Show when we have payload diff or scratchpad data -->\n      @if (showStepPayloadDiff || showScratchpadTab) {\n        <div class=\"detail-pane-tabs\">\n          @if (showStepPayloadDiff) {\n            <button\n              class=\"detail-tab\"\n              [class.active]=\"detailPaneTab === 'diff'\"\n              (click)=\"detailPaneTab = 'diff'\">\n              <i class=\"fa-solid fa-code-branch\"></i>\n              Payload Changes\n            </button>\n          }\n          @if (showScratchpadTab) {\n            <button\n              class=\"detail-tab\"\n              [class.active]=\"detailPaneTab === 'scratchpad'\"\n              (click)=\"detailPaneTab = 'scratchpad'\">\n              <i class=\"fa-solid fa-clipboard-list\"></i>\n              Scratchpad\n              @if (scratchpadTaskChangeCount > 0) {\n                <span class=\"tab-badge\">{{ scratchpadTaskChangeCount }}</span>\n              }\n            </button>\n          }\n          <button\n            class=\"detail-tab\"\n            [class.active]=\"detailPaneTab === 'json'\"\n            (click)=\"detailPaneTab = 'json'\">\n            <i class=\"fa-solid fa-code\"></i>\n            Full JSON\n          </button>\n        </div>\n      }\n      <!-- Tab Content -->\n      <div class=\"detail-pane-content\" [class.with-tabs]=\"showStepPayloadDiff || showScratchpadTab\">\n        <!-- Payload Diff Tab -->\n        @if (detailPaneTab === 'diff' && showStepPayloadDiff) {\n          <div class=\"step-payload-diff\">\n            <mj-deep-diff\n              [oldValue]=\"stepPayloadAtStartObject\"\n              [newValue]=\"stepPayloadAtEndObject\"\n              [title]=\"''\"\n              [showSummary]=\"true\"\n              [showUnchanged]=\"false\"\n              [expandAll]=\"false\"\n              [maxDepth]=\"8\"\n              [maxStringLength]=\"150\"\n              [treatNullAsUndefined]=\"true\">\n            </mj-deep-diff>\n          </div>\n        }\n        <!-- Scratchpad Tab -->\n        @if (detailPaneTab === 'scratchpad' && showScratchpadTab) {\n          <div class=\"scratchpad-content\">\n            <div class=\"scratchpad-sub-tabs\">\n              <button\n                class=\"scratchpad-sub-tab\"\n                [class.active]=\"scratchpadSubTab === 'diff'\"\n                (click)=\"scratchpadSubTab = 'diff'\">\n                <i class=\"fa-solid fa-code-compare\"></i> Diff\n              </button>\n              <button\n                class=\"scratchpad-sub-tab\"\n                [class.active]=\"scratchpadSubTab === 'input'\"\n                (click)=\"scratchpadSubTab = 'input'\">\n                <i class=\"fa-solid fa-arrow-right-to-bracket\"></i> Input\n              </button>\n              <button\n                class=\"scratchpad-sub-tab\"\n                [class.active]=\"scratchpadSubTab === 'output'\"\n                (click)=\"scratchpadSubTab = 'output'\">\n                <i class=\"fa-solid fa-arrow-right-from-bracket\"></i> Output\n              </button>\n            </div>\n            <!-- Scratchpad Diff Sub-Tab -->\n            @if (scratchpadSubTab === 'diff') {\n              <div class=\"scratchpad-diff-view\">\n                @if (stepScratchpadInput && stepScratchpadOutput) {\n                  <mj-deep-diff\n                    [oldValue]=\"stepScratchpadInput\"\n                    [newValue]=\"stepScratchpadOutput\"\n                    [title]=\"''\"\n                    [showSummary]=\"true\"\n                    [showUnchanged]=\"false\"\n                    [expandAll]=\"true\"\n                    [maxDepth]=\"6\"\n                    [maxStringLength]=\"300\"\n                    [treatNullAsUndefined]=\"true\">\n                  </mj-deep-diff>\n                } @else if (stepScratchpadOutput) {\n                  <mj-empty-state\n                    Size=\"compact\"\n                    Icon=\"fa-solid fa-circle-plus\"\n                    Title=\"Scratchpad created in this step (no prior state)\" />\n                  <div class=\"scratchpad-snapshot\">\n                    <ng-container *ngTemplateOutlet=\"scratchpadSnapshotTpl; context: { $implicit: stepScratchpadOutput }\"></ng-container>\n                  </div>\n                } @else {\n                  <mj-empty-state\n                    Size=\"compact\"\n                    Icon=\"fa-solid fa-circle-info\"\n                    Title=\"No scratchpad changes in this step\" />\n                }\n              </div>\n            }\n            <!-- Scratchpad Input Sub-Tab -->\n            @if (scratchpadSubTab === 'input') {\n              <div class=\"scratchpad-snapshot-view\">\n                @if (stepScratchpadInput) {\n                  <ng-container *ngTemplateOutlet=\"scratchpadSnapshotTpl; context: { $implicit: stepScratchpadInput }\"></ng-container>\n                } @else {\n                  <mj-empty-state\n                    Size=\"compact\"\n                    Icon=\"fa-solid fa-circle-info\"\n                    Title=\"No scratchpad input for this step\" />\n                }\n              </div>\n            }\n            <!-- Scratchpad Output Sub-Tab -->\n            @if (scratchpadSubTab === 'output') {\n              <div class=\"scratchpad-snapshot-view\">\n                @if (stepScratchpadOutput) {\n                  <ng-container *ngTemplateOutlet=\"scratchpadSnapshotTpl; context: { $implicit: stepScratchpadOutput }\"></ng-container>\n                } @else {\n                  <mj-empty-state\n                    Size=\"compact\"\n                    Icon=\"fa-solid fa-circle-info\"\n                    Title=\"No scratchpad output for this step\" />\n                }\n              </div>\n            }\n          </div>\n        }\n        <!-- Full JSON Tab -->\n        @if (detailPaneTab === 'json' || (!showStepPayloadDiff && !showScratchpadTab)) {\n          <div class=\"json-viewer\">\n            <div class=\"json-toolbar\">\n              <button class=\"btn-icon\" title=\"Copy JSON\" (click)=\"onCopyToClipboard()\">\n                <i class=\"fas fa-copy\"></i>\n              </button>\n            </div>\n            <mj-code-editor\n              [(ngModel)]=\"selectedItemJsonString\"\n              [language]=\"'json'\"\n              [readonly]=\"true\"\n              style=\"width: 100%;\">\n            </mj-code-editor>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Reusable scratchpad snapshot template -->\n<ng-template #scratchpadSnapshotTpl let-snapshot>\n  <div class=\"scratchpad-snapshot\">\n    @if (snapshot.notes) {\n      <div class=\"scratchpad-notes-section\">\n        <h4><i class=\"fa-solid fa-note-sticky\"></i> Notes</h4>\n        <div class=\"scratchpad-notes-content\">{{ snapshot.notes }}</div>\n      </div>\n    }\n    @if (snapshot.tasks?.length > 0) {\n      <div class=\"scratchpad-tasks-section\">\n        <h4><i class=\"fa-solid fa-list-check\"></i> Tasks ({{ snapshot.tasks.length }})</h4>\n        <div class=\"scratchpad-task-list\">\n          @for (task of snapshot.tasks; track task.id) {\n            <div class=\"scratchpad-task-item\" [attr.data-status]=\"task.status\">\n              <span class=\"task-status-indicator\" [attr.data-status]=\"task.status\">\n                @switch (task.status) {\n                  @case ('completed') { <i class=\"fa-solid fa-circle-check\"></i> }\n                  @case ('in_progress') { <i class=\"fa-solid fa-spinner\"></i> }\n                  @case ('blocked') { <i class=\"fa-solid fa-circle-xmark\"></i> }\n                  @default { <i class=\"fa-regular fa-circle\"></i> }\n                }\n              </span>\n              <div class=\"task-content\">\n                <span class=\"task-id\">{{ task.id }}</span>\n                <span class=\"task-title\">{{ task.title }}</span>\n                @if (task.notes) {\n                  <span class=\"task-notes\">{{ task.notes }}</span>\n                }\n              </div>\n              <span class=\"task-status-badge\" [attr.data-status]=\"task.status\">{{ task.status }}</span>\n            </div>\n          }\n        </div>\n      </div>\n    }\n    @if (!snapshot.notes && (!snapshot.tasks || snapshot.tasks.length === 0)) {\n      <mj-empty-state\n        Size=\"compact\"\n        Icon=\"fa-solid fa-circle-info\"\n        Title=\"Empty scratchpad\" />\n    }\n  </div>\n</ng-template>", styles: [".json-detail-pane {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\n}\n\n.json-pane-header {\n  padding: 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: var(--mj-bg-surface-sunken);\n}\n\n.json-pane-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.btn-icon {\n  background: none;\n  border: none;\n  padding: 4px 8px;\n  cursor: pointer;\n  color: var(--mj-text-muted);\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.btn-icon:hover {\n  background: color-mix(in srgb, var(--mj-text-primary) 5%, transparent);\n  color: var(--mj-text-secondary);\n}\n\n.json-pane-content {\n  flex: 1;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n.json-meta {\n  padding: 16px;\n  display: flex;\n  gap: 24px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.meta-item {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.meta-item label {\n  font-size: 11px;\n  text-transform: uppercase;\n  color: var(--mj-text-muted);\n  font-weight: 600;\n}\n\n.meta-item span {\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 4px 8px;\n  border-radius: 4px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n.status-badge.small {\n  padding: 2px 6px;\n  font-size: 10px;\n}\n\n.status-badge[data-status=\"Running\"] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.status-badge[data-status=\"Completed\"] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.status-badge[data-status=\"Failed\"] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.status-badge[data-status=\"Cancelled\"] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.action-link {\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.btn-link {\n  background: none;\n  border: none;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n  padding: 6px 12px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 13px;\n}\n\n.btn-link:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  color: var(--mj-brand-primary);\n}\n\n.detail-pane-tabs {\n  display: flex;\n  gap: 0;\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n  padding: 0 16px;\n}\n\n.detail-tab {\n  padding: 12px 16px;\n  background: none;\n  border: none;\n  border-bottom: 2px solid transparent;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.detail-tab:hover {\n  color: var(--mj-text-secondary);\n  background: color-mix(in srgb, var(--mj-text-primary) 2%, transparent);\n}\n\n.detail-tab.active {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n  font-weight: 600;\n}\n\n.detail-pane-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0; /* Allow flexbox to properly size */\n}\n\n/* \n.detail-pane-content.with-tabs {\n  // No explicit height needed with flexbox \n} \n*/\n\n.json-viewer {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  overflow: hidden;\n  min-height: 0; /* Important for flexbox children to respect overflow */\n}\n\n.json-toolbar {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  z-index: 10;\n  display: flex;\n  gap: 4px;\n}\n\n.step-payload-diff {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n  min-height: 0; /* Allow proper scrolling */\n}\n\n/* Specific styling for mj-code-editor container */\n.json-viewer mj-code-editor {\n  flex: 1;\n  overflow: hidden;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n/* Tab badge for change count */\n.tab-badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  border-radius: 9px;\n  font-size: 10px;\n  font-weight: 700;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n/* Scratchpad content area */\n.scratchpad-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0;\n}\n\n/* Scratchpad sub-tabs */\n.scratchpad-sub-tabs {\n  display: flex;\n  gap: 0;\n  padding: 0 16px;\n  border-bottom: 1px solid var(--mj-border-subtle);\n  background: var(--mj-bg-surface);\n}\n\n.scratchpad-sub-tab {\n  padding: 8px 12px;\n  background: none;\n  border: none;\n  border-bottom: 2px solid transparent;\n  cursor: pointer;\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n\n.scratchpad-sub-tab:hover {\n  color: var(--mj-text-secondary);\n  background: color-mix(in srgb, var(--mj-text-primary) 2%, transparent);\n}\n\n.scratchpad-sub-tab.active {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\n  font-weight: 600;\n}\n\n/* Scratchpad diff and snapshot views */\n.scratchpad-diff-view,\n.scratchpad-snapshot-view {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n  min-height: 0;\n}\n\n/* Scratchpad snapshot rendering */\n.scratchpad-snapshot {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n\n.scratchpad-notes-section h4,\n.scratchpad-tasks-section h4 {\n  margin: 0 0 8px 0;\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.scratchpad-notes-content {\n  padding: 12px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 6px;\n  border: 1px solid var(--mj-border-subtle);\n  font-size: 13px;\n  line-height: 1.5;\n  color: var(--mj-text-primary);\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n/* Task list */\n.scratchpad-task-list {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.scratchpad-task-item {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  padding: 8px 12px;\n  border-radius: 6px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-subtle);\n  transition: background 0.15s;\n}\n\n.scratchpad-task-item:hover {\n  background: var(--mj-bg-surface-hover);\n}\n\n/* Task status indicator icon */\n.task-status-indicator {\n  flex-shrink: 0;\n  width: 16px;\n  margin-top: 2px;\n  font-size: 14px;\n}\n\n.task-status-indicator[data-status=\"completed\"] {\n  color: var(--mj-status-success);\n}\n\n.task-status-indicator[data-status=\"in_progress\"] {\n  color: var(--mj-brand-primary);\n}\n\n.task-status-indicator[data-status=\"blocked\"] {\n  color: var(--mj-status-error);\n}\n\n.task-status-indicator[data-status=\"pending\"] {\n  color: var(--mj-text-muted);\n}\n\n/* Task content */\n.task-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.task-id {\n  font-size: 10px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n}\n\n.task-title {\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  line-height: 1.4;\n}\n\n.task-notes {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  line-height: 1.4;\n  font-style: italic;\n}\n\n/* Task status badge */\n.task-status-badge {\n  flex-shrink: 0;\n  padding: 2px 6px;\n  border-radius: 4px;\n  font-size: 10px;\n  font-weight: 600;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n.task-status-badge[data-status=\"completed\"] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.task-status-badge[data-status=\"in_progress\"] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.task-status-badge[data-status=\"blocked\"] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.task-status-badge[data-status=\"pending\"] {\n  background: color-mix(in srgb, var(--mj-text-muted) 15%, var(--mj-bg-surface));\n  color: var(--mj-text-muted);\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }], { selectedTimelineItem: [{
             type: Input
         }], closePanel: [{

package/dist/lib/custom/ai-agent-run/ai-agent-run-step-detail.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-agent-run-step-detail.component.js","sourceRoot":"","sources":["../../../../src/lib/custom/ai-agent-run/ai-agent-run-step-detail.component.ts","../../../../src/lib/custom/ai-agent-run/ai-agent-run-step-detail.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';\nimport { TimelineItem } from './ai-agent-run-timeline.component';\nimport { MJAIAgentRunStepEntity } from '@memberjunction/core-entities';\nimport { ParseJSONRecursive, ParseJSONOptions } from '@memberjunction/global';\n\ninterface ScratchpadSnapshotView {\n  notes: string;\n  tasks: Array<{\n    id: string;\n    title: string;\n    status: string;\n    notes?: string;\n  }>;\n}\n\n@Component({\n  standalone: false,\n  selector: 'mj-ai-agent-run-step-detail',\n  templateUrl: './ai-agent-run-step-detail.component.html',\n  styleUrls: ['./ai-agent-run-step-detail.component.css']\n})\nexport class AIAgentRunStepDetailComponent {\n  @Input() selectedTimelineItem: TimelineItem | null = null;\n  @Output() closePanel = new EventEmitter<void>();\n  @Output() navigateToActionLog = new EventEmitter<string>();\n  @Output() copyToClipboard = new EventEmitter<string>();\n\n  selectedItemJsonString = '{}';\n  detailPaneTab: 'json' | 'diff' | 'scratchpad' = 'diff';\n  scratchpadSubTab: 'input' | 'output' | 'diff' = 'diff';\n\n  constructor(private cdr: ChangeDetectorRef) {}\n\n  ngOnChanges() {\n    if (this.selectedTimelineItem) {\n      this.selectedItemJsonString = this.getSelectedItemJson();\n      // Default to diff tab if step has payload diff, scratchpad if available, otherwise json\n      if (this.showStepPayloadDiff) {\n        this.detailPaneTab = 'diff';\n      } else if (this.showScratchpadTab) {\n        this.detailPaneTab = 'scratchpad';\n      } else {\n        this.detailPaneTab = 'json';\n      }\n      this.scratchpadSubTab = 'diff';\n      this.cdr.detectChanges();\n    }\n  }\n\n  getSelectedItemJson(): string {\n    if (!this.selectedTimelineItem) return '{}';\n    \n    // Get all the data from the entity\n    let data;\n    if (this.selectedTimelineItem.data instanceof MJAIAgentRunStepEntity) {\n      // If it's a step entity, we need to get the full run data\n      data = this.selectedTimelineItem.data.GetAll();\n    } else {\n      data = this.selectedTimelineItem.data;\n    }\n    \n    // Apply recursive JSON parsing to the entire data object\n    const parseOptions: ParseJSONOptions = {\n      extractInlineJson: true,\n      maxDepth: 100,\n      debug: false\n    };\n    const parsedData = ParseJSONRecursive(data, parseOptions);\n    \n    return JSON.stringify(parsedData, null, 2);\n  }\n\n  /**\n   * Check if selected timeline item is a step with payload changes\n   */\n  get showStepPayloadDiff(): boolean {\n    if (!this.selectedTimelineItem || this.selectedTimelineItem.type !== 'step') {\n      return false;\n    }\n    \n    const stepData = this.selectedTimelineItem.data;\n    if (stepData && (stepData.PayloadAtStart?.trim().length > 0 \n                 || stepData.PayloadAtEnd?.trim().length > 0)) {\n      return stepData.PayloadAtStart !== stepData.PayloadAtEnd;\n    } else {\n      return false;\n    }\n  }\n\n  /**\n   * Get parsed PayloadAtStart for the selected step\n   */\n  get stepPayloadAtStartObject(): any {\n    if (!this.selectedTimelineItem || this.selectedTimelineItem.type !== 'step') {\n      return null;\n    }\n    \n    const stepData = this.selectedTimelineItem.data;\n    if (!stepData?.PayloadAtStart) return null;\n    \n    try {\n      // First, check if PayloadAtStart is a JSON string that needs to be parsed\n      let payloadData = stepData.PayloadAtStart;\n      try {\n        // If PayloadAtStart is a JSON string, parse it first\n        payloadData = JSON.parse(stepData.PayloadAtStart);\n      } catch {\n        // If it's not valid JSON, use it as-is\n        payloadData = stepData.PayloadAtStart;\n      }\n      \n      const parseOptions: ParseJSONOptions = {\n        extractInlineJson: true,\n        maxDepth: 100,\n        debug: false\n      };\n      return ParseJSONRecursive(payloadData, parseOptions);\n    } catch (e) {\n      return null;\n    }\n  }\n\n  /**\n   * Get parsed PayloadAtEnd for the selected step\n   */\n  get stepPayloadAtEndObject(): any {\n    if (!this.selectedTimelineItem || this.selectedTimelineItem.type !== 'step') {\n      return null;\n    }\n    \n    const stepData = this.selectedTimelineItem.data;\n    if (!stepData?.PayloadAtEnd) return null;\n    \n    try {\n      // First, check if PayloadAtEnd is a JSON string that needs to be parsed\n      let payloadData = stepData.PayloadAtEnd;\n      try {\n        // If PayloadAtEnd is a JSON string, parse it first\n        payloadData = JSON.parse(stepData.PayloadAtEnd);\n      } catch {\n        // If it's not valid JSON, use it as-is\n        payloadData = stepData.PayloadAtEnd;\n      }\n      \n      const parseOptions: ParseJSONOptions = {\n        extractInlineJson: true,\n        maxDepth: 100,\n        debug: false\n      };\n      return ParseJSONRecursive(payloadData, parseOptions);\n    } catch (e) {\n      return null;\n    }\n  }\n\n  onClosePanel() {\n    this.closePanel.emit();\n  }\n\n  onNavigateToActionLog(logId: string) {\n    this.navigateToActionLog.emit(logId);\n  }\n\n  onCopyToClipboard() {\n    this.copyToClipboard.emit(this.getSelectedItemJson());\n  }\n\n  /**\n   * Whether the scratchpad tab should be shown (step has scratchpad data in InputData or OutputData)\n   */\n  get showScratchpadTab(): boolean {\n    if (!this.selectedTimelineItem || this.selectedTimelineItem.type !== 'step') {\n      return false;\n    }\n    return this.stepScratchpadInput !== null || this.stepScratchpadOutput !== null;\n  }\n\n  /**\n   * Parse scratchpad snapshot from InputData JSON\n   */\n  get stepScratchpadInput(): ScratchpadSnapshotView | null {\n    return this.extractScratchpadFromField('InputData');\n  }\n\n  /**\n   * Parse scratchpad snapshot from OutputData JSON\n   */\n  get stepScratchpadOutput(): ScratchpadSnapshotView | null {\n    return this.extractScratchpadFromField('OutputData');\n  }\n\n  /**\n   * Number of tasks that changed between input and output scratchpad snapshots\n   */\n  get scratchpadTaskChangeCount(): number {\n    const input = this.stepScratchpadInput;\n    const output = this.stepScratchpadOutput;\n    if (!input && !output) return 0;\n    if (!input || !output) return (output?.tasks?.length ?? 0) + (input?.tasks?.length ?? 0);\n\n    let changes = 0;\n    const inputMap = new Map(input.tasks.map(t => [t.id, t]));\n    const outputMap = new Map(output.tasks.map(t => [t.id, t]));\n\n    for (const [id, task] of outputMap) {\n      const prev = inputMap.get(id);\n      if (!prev || prev.status !== task.status || prev.title !== task.title || prev.notes !== task.notes) {\n        changes++;\n      }\n    }\n    for (const id of inputMap.keys()) {\n      if (!outputMap.has(id)) changes++; // removed tasks\n    }\n    if (input.notes !== output.notes) changes++;\n    return changes;\n  }\n\n  private extractScratchpadFromField(fieldName: 'InputData' | 'OutputData'): ScratchpadSnapshotView | null {\n    if (!this.selectedTimelineItem || this.selectedTimelineItem.type !== 'step') {\n      return null;\n    }\n\n    const stepData = this.selectedTimelineItem.data;\n    const rawValue = stepData?.[fieldName];\n    if (!rawValue) return null;\n\n    try {\n      let parsed = rawValue;\n      if (typeof parsed === 'string') {\n        parsed = JSON.parse(parsed);\n      }\n      const scratchpad = parsed?.scratchpad;\n      if (!scratchpad) return null;\n      return {\n        notes: scratchpad.notes ?? '',\n        tasks: Array.isArray(scratchpad.tasks) ? scratchpad.tasks : []\n      };\n    } catch {\n      return null;\n    }\n  }\n}","@if (selectedTimelineItem) {\n  <div class=\"json-detail-pane\">\n    <div class=\"json-pane-header\">\n      <h3>\n        <i class=\"fas\" [ngClass]=\"selectedTimelineItem.icon\"></i>\n        {{ selectedTimelineItem.title }}\n      </h3>\n      <button class=\"btn-icon\" (click)=\"onClosePanel()\" title=\"Close\">\n        <i class=\"fas fa-times\"></i>\n      </button>\n    </div>\n    <div class=\"json-pane-content\">\n      <div class=\"json-meta\">\n        <div class=\"meta-item\">\n          <label>Type</label>\n          <span>{{ selectedTimelineItem.type }}</span>\n        </div>\n        <div class=\"meta-item\">\n          <label>Status</label>\n          <span class=\"status-badge small\" [attr.data-status]=\"selectedTimelineItem.status\">\n            {{ selectedTimelineItem.status }}\n          </span>\n        </div>\n        <div class=\"meta-item\">\n          <label>Duration</label>\n          <span>{{ selectedTimelineItem.duration || 'N/A' }}</span>\n        </div>\n      </div>\n      <!-- Action-specific link -->\n      @if (selectedTimelineItem.type === 'action' && selectedTimelineItem.data?.ID) {\n        <div class=\"action-link\">\n          <button class=\"btn-link\" (click)=\"onNavigateToActionLog(selectedTimelineItem.data.ID)\">\n            <i class=\"fas fa-external-link-alt\"></i> View Action Execution Log\n          </button>\n        </div>\n      }\n      <!-- Tab Navigation - Show when we have payload diff or scratchpad data -->\n      @if (showStepPayloadDiff || showScratchpadTab) {\n        <div class=\"detail-pane-tabs\">\n          @if (showStepPayloadDiff) {\n            <button\n              class=\"detail-tab\"\n              [class.active]=\"detailPaneTab === 'diff'\"\n              (click)=\"detailPaneTab = 'diff'\">\n              <i class=\"fa-solid fa-code-branch\"></i>\n              Payload Changes\n            </button>\n          }\n          @if (showScratchpadTab) {\n            <button\n              class=\"detail-tab\"\n              [class.active]=\"detailPaneTab === 'scratchpad'\"\n              (click)=\"detailPaneTab = 'scratchpad'\">\n              <i class=\"fa-solid fa-clipboard-list\"></i>\n              Scratchpad\n              @if (scratchpadTaskChangeCount > 0) {\n                <span class=\"tab-badge\">{{ scratchpadTaskChangeCount }}</span>\n              }\n            </button>\n          }\n          <button\n            class=\"detail-tab\"\n            [class.active]=\"detailPaneTab === 'json'\"\n            (click)=\"detailPaneTab = 'json'\">\n            <i class=\"fa-solid fa-code\"></i>\n            Full JSON\n          </button>\n        </div>\n      }\n      <!-- Tab Content -->\n      <div class=\"detail-pane-content\" [class.with-tabs]=\"showStepPayloadDiff || showScratchpadTab\">\n        <!-- Payload Diff Tab -->\n        @if (detailPaneTab === 'diff' && showStepPayloadDiff) {\n          <div class=\"step-payload-diff\">\n            <mj-deep-diff\n              [oldValue]=\"stepPayloadAtStartObject\"\n              [newValue]=\"stepPayloadAtEndObject\"\n              [title]=\"''\"\n              [showSummary]=\"true\"\n              [showUnchanged]=\"false\"\n              [expandAll]=\"false\"\n              [maxDepth]=\"8\"\n              [maxStringLength]=\"150\"\n              [treatNullAsUndefined]=\"true\">\n            </mj-deep-diff>\n          </div>\n        }\n        <!-- Scratchpad Tab -->\n        @if (detailPaneTab === 'scratchpad' && showScratchpadTab) {\n          <div class=\"scratchpad-content\">\n            <div class=\"scratchpad-sub-tabs\">\n              <button\n                class=\"scratchpad-sub-tab\"\n                [class.active]=\"scratchpadSubTab === 'diff'\"\n                (click)=\"scratchpadSubTab = 'diff'\">\n                <i class=\"fa-solid fa-code-compare\"></i> Diff\n              </button>\n              <button\n                class=\"scratchpad-sub-tab\"\n                [class.active]=\"scratchpadSubTab === 'input'\"\n                (click)=\"scratchpadSubTab = 'input'\">\n                <i class=\"fa-solid fa-arrow-right-to-bracket\"></i> Input\n              </button>\n              <button\n                class=\"scratchpad-sub-tab\"\n                [class.active]=\"scratchpadSubTab === 'output'\"\n                (click)=\"scratchpadSubTab = 'output'\">\n                <i class=\"fa-solid fa-arrow-right-from-bracket\"></i> Output\n              </button>\n            </div>\n            <!-- Scratchpad Diff Sub-Tab -->\n            @if (scratchpadSubTab === 'diff') {\n              <div class=\"scratchpad-diff-view\">\n                @if (stepScratchpadInput && stepScratchpadOutput) {\n                  <mj-deep-diff\n                    [oldValue]=\"stepScratchpadInput\"\n                    [newValue]=\"stepScratchpadOutput\"\n                    [title]=\"''\"\n                    [showSummary]=\"true\"\n                    [showUnchanged]=\"false\"\n                    [expandAll]=\"true\"\n                    [maxDepth]=\"6\"\n                    [maxStringLength]=\"300\"\n                    [treatNullAsUndefined]=\"true\">\n                  </mj-deep-diff>\n                } @else if (stepScratchpadOutput) {\n                  <div class=\"scratchpad-empty-state\">\n                    <i class=\"fa-solid fa-circle-plus\"></i>\n                    <span>Scratchpad created in this step (no prior state)</span>\n                  </div>\n                  <div class=\"scratchpad-snapshot\">\n                    <ng-container *ngTemplateOutlet=\"scratchpadSnapshotTpl; context: { $implicit: stepScratchpadOutput }\"></ng-container>\n                  </div>\n                } @else {\n                  <div class=\"scratchpad-empty-state\">\n                    <i class=\"fa-solid fa-circle-info\"></i>\n                    <span>No scratchpad changes in this step</span>\n                  </div>\n                }\n              </div>\n            }\n            <!-- Scratchpad Input Sub-Tab -->\n            @if (scratchpadSubTab === 'input') {\n              <div class=\"scratchpad-snapshot-view\">\n                @if (stepScratchpadInput) {\n                  <ng-container *ngTemplateOutlet=\"scratchpadSnapshotTpl; context: { $implicit: stepScratchpadInput }\"></ng-container>\n                } @else {\n                  <div class=\"scratchpad-empty-state\">\n                    <i class=\"fa-solid fa-circle-info\"></i>\n                    <span>No scratchpad input for this step</span>\n                  </div>\n                }\n              </div>\n            }\n            <!-- Scratchpad Output Sub-Tab -->\n            @if (scratchpadSubTab === 'output') {\n              <div class=\"scratchpad-snapshot-view\">\n                @if (stepScratchpadOutput) {\n                  <ng-container *ngTemplateOutlet=\"scratchpadSnapshotTpl; context: { $implicit: stepScratchpadOutput }\"></ng-container>\n                } @else {\n                  <div class=\"scratchpad-empty-state\">\n                    <i class=\"fa-solid fa-circle-info\"></i>\n                    <span>No scratchpad output for this step</span>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n        <!-- Full JSON Tab -->\n        @if (detailPaneTab === 'json' || (!showStepPayloadDiff && !showScratchpadTab)) {\n          <div class=\"json-viewer\">\n            <div class=\"json-toolbar\">\n              <button class=\"btn-icon\" title=\"Copy JSON\" (click)=\"onCopyToClipboard()\">\n                <i class=\"fas fa-copy\"></i>\n              </button>\n            </div>\n            <mj-code-editor\n              [(ngModel)]=\"selectedItemJsonString\"\n              [language]=\"'json'\"\n              [readonly]=\"true\"\n              style=\"width: 100%;\">\n            </mj-code-editor>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Reusable scratchpad snapshot template -->\n<ng-template #scratchpadSnapshotTpl let-snapshot>\n  <div class=\"scratchpad-snapshot\">\n    @if (snapshot.notes) {\n      <div class=\"scratchpad-notes-section\">\n        <h4><i class=\"fa-solid fa-note-sticky\"></i> Notes</h4>\n        <div class=\"scratchpad-notes-content\">{{ snapshot.notes }}</div>\n      </div>\n    }\n    @if (snapshot.tasks?.length > 0) {\n      <div class=\"scratchpad-tasks-section\">\n        <h4><i class=\"fa-solid fa-list-check\"></i> Tasks ({{ snapshot.tasks.length }})</h4>\n        <div class=\"scratchpad-task-list\">\n          @for (task of snapshot.tasks; track task.id) {\n            <div class=\"scratchpad-task-item\" [attr.data-status]=\"task.status\">\n              <span class=\"task-status-indicator\" [attr.data-status]=\"task.status\">\n                @switch (task.status) {\n                  @case ('completed') { <i class=\"fa-solid fa-circle-check\"></i> }\n                  @case ('in_progress') { <i class=\"fa-solid fa-spinner\"></i> }\n                  @case ('blocked') { <i class=\"fa-solid fa-circle-xmark\"></i> }\n                  @default { <i class=\"fa-regular fa-circle\"></i> }\n                }\n              </span>\n              <div class=\"task-content\">\n                <span class=\"task-id\">{{ task.id }}</span>\n                <span class=\"task-title\">{{ task.title }}</span>\n                @if (task.notes) {\n                  <span class=\"task-notes\">{{ task.notes }}</span>\n                }\n              </div>\n              <span class=\"task-status-badge\" [attr.data-status]=\"task.status\">{{ task.status }}</span>\n            </div>\n          }\n        </div>\n      </div>\n    }\n    @if (!snapshot.notes && (!snapshot.tasks || snapshot.tasks.length === 0)) {\n      <div class=\"scratchpad-empty-state\">\n        <i class=\"fa-solid fa-circle-info\"></i>\n        <span>Empty scratchpad</span>\n      </div>\n    }\n  </div>\n</ng-template>"]}
+{"version":3,"file":"ai-agent-run-step-detail.component.js","sourceRoot":"","sources":["../../../../src/lib/custom/ai-agent-run/ai-agent-run-step-detail.component.ts","../../../../src/lib/custom/ai-agent-run/ai-agent-run-step-detail.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';\nimport { TimelineItem } from './ai-agent-run-timeline.component';\nimport { MJAIAgentRunStepEntity } from '@memberjunction/core-entities';\nimport { ParseJSONRecursive, ParseJSONOptions } from '@memberjunction/global';\n\ninterface ScratchpadSnapshotView {\n  notes: string;\n  tasks: Array<{\n    id: string;\n    title: string;\n    status: string;\n    notes?: string;\n  }>;\n}\n\n@Component({\n  standalone: false,\n  selector: 'mj-ai-agent-run-step-detail',\n  templateUrl: './ai-agent-run-step-detail.component.html',\n  styleUrls: ['./ai-agent-run-step-detail.component.css']\n})\nexport class AIAgentRunStepDetailComponent {\n  @Input() selectedTimelineItem: TimelineItem | null = null;\n  @Output() closePanel = new EventEmitter<void>();\n  @Output() navigateToActionLog = new EventEmitter<string>();\n  @Output() copyToClipboard = new EventEmitter<string>();\n\n  selectedItemJsonString = '{}';\n  detailPaneTab: 'json' | 'diff' | 'scratchpad' = 'diff';\n  scratchpadSubTab: 'input' | 'output' | 'diff' = 'diff';\n\n  constructor(private cdr: ChangeDetectorRef) {}\n\n  ngOnChanges() {\n    if (this.selectedTimelineItem) {\n      this.selectedItemJsonString = this.getSelectedItemJson();\n      // Default to diff tab if step has payload diff, scratchpad if available, otherwise json\n      if (this.showStepPayloadDiff) {\n        this.detailPaneTab = 'diff';\n      } else if (this.showScratchpadTab) {\n        this.detailPaneTab = 'scratchpad';\n      } else {\n        this.detailPaneTab = 'json';\n      }\n      this.scratchpadSubTab = 'diff';\n      this.cdr.detectChanges();\n    }\n  }\n\n  getSelectedItemJson(): string {\n    if (!this.selectedTimelineItem) return '{}';\n    \n    // Get all the data from the entity\n    let data;\n    if (this.selectedTimelineItem.data instanceof MJAIAgentRunStepEntity) {\n      // If it's a step entity, we need to get the full run data\n      data = this.selectedTimelineItem.data.GetAll();\n    } else {\n      data = this.selectedTimelineItem.data;\n    }\n    \n    // Apply recursive JSON parsing to the entire data object\n    const parseOptions: ParseJSONOptions = {\n      extractInlineJson: true,\n      maxDepth: 100,\n      debug: false\n    };\n    const parsedData = ParseJSONRecursive(data, parseOptions);\n    \n    return JSON.stringify(parsedData, null, 2);\n  }\n\n  /**\n   * Check if selected timeline item is a step with payload changes\n   */\n  get showStepPayloadDiff(): boolean {\n    if (!this.selectedTimelineItem || this.selectedTimelineItem.type !== 'step') {\n      return false;\n    }\n    \n    const stepData = this.selectedTimelineItem.data;\n    if (stepData && (stepData.PayloadAtStart?.trim().length > 0 \n                 || stepData.PayloadAtEnd?.trim().length > 0)) {\n      return stepData.PayloadAtStart !== stepData.PayloadAtEnd;\n    } else {\n      return false;\n    }\n  }\n\n  /**\n   * Get parsed PayloadAtStart for the selected step\n   */\n  get stepPayloadAtStartObject(): any {\n    if (!this.selectedTimelineItem || this.selectedTimelineItem.type !== 'step') {\n      return null;\n    }\n    \n    const stepData = this.selectedTimelineItem.data;\n    if (!stepData?.PayloadAtStart) return null;\n    \n    try {\n      // First, check if PayloadAtStart is a JSON string that needs to be parsed\n      let payloadData = stepData.PayloadAtStart;\n      try {\n        // If PayloadAtStart is a JSON string, parse it first\n        payloadData = JSON.parse(stepData.PayloadAtStart);\n      } catch {\n        // If it's not valid JSON, use it as-is\n        payloadData = stepData.PayloadAtStart;\n      }\n      \n      const parseOptions: ParseJSONOptions = {\n        extractInlineJson: true,\n        maxDepth: 100,\n        debug: false\n      };\n      return ParseJSONRecursive(payloadData, parseOptions);\n    } catch (e) {\n      return null;\n    }\n  }\n\n  /**\n   * Get parsed PayloadAtEnd for the selected step\n   */\n  get stepPayloadAtEndObject(): any {\n    if (!this.selectedTimelineItem || this.selectedTimelineItem.type !== 'step') {\n      return null;\n    }\n    \n    const stepData = this.selectedTimelineItem.data;\n    if (!stepData?.PayloadAtEnd) return null;\n    \n    try {\n      // First, check if PayloadAtEnd is a JSON string that needs to be parsed\n      let payloadData = stepData.PayloadAtEnd;\n      try {\n        // If PayloadAtEnd is a JSON string, parse it first\n        payloadData = JSON.parse(stepData.PayloadAtEnd);\n      } catch {\n        // If it's not valid JSON, use it as-is\n        payloadData = stepData.PayloadAtEnd;\n      }\n      \n      const parseOptions: ParseJSONOptions = {\n        extractInlineJson: true,\n        maxDepth: 100,\n        debug: false\n      };\n      return ParseJSONRecursive(payloadData, parseOptions);\n    } catch (e) {\n      return null;\n    }\n  }\n\n  onClosePanel() {\n    this.closePanel.emit();\n  }\n\n  onNavigateToActionLog(logId: string) {\n    this.navigateToActionLog.emit(logId);\n  }\n\n  onCopyToClipboard() {\n    this.copyToClipboard.emit(this.getSelectedItemJson());\n  }\n\n  /**\n   * Whether the scratchpad tab should be shown (step has scratchpad data in InputData or OutputData)\n   */\n  get showScratchpadTab(): boolean {\n    if (!this.selectedTimelineItem || this.selectedTimelineItem.type !== 'step') {\n      return false;\n    }\n    return this.stepScratchpadInput !== null || this.stepScratchpadOutput !== null;\n  }\n\n  /**\n   * Parse scratchpad snapshot from InputData JSON\n   */\n  get stepScratchpadInput(): ScratchpadSnapshotView | null {\n    return this.extractScratchpadFromField('InputData');\n  }\n\n  /**\n   * Parse scratchpad snapshot from OutputData JSON\n   */\n  get stepScratchpadOutput(): ScratchpadSnapshotView | null {\n    return this.extractScratchpadFromField('OutputData');\n  }\n\n  /**\n   * Number of tasks that changed between input and output scratchpad snapshots\n   */\n  get scratchpadTaskChangeCount(): number {\n    const input = this.stepScratchpadInput;\n    const output = this.stepScratchpadOutput;\n    if (!input && !output) return 0;\n    if (!input || !output) return (output?.tasks?.length ?? 0) + (input?.tasks?.length ?? 0);\n\n    let changes = 0;\n    const inputMap = new Map(input.tasks.map(t => [t.id, t]));\n    const outputMap = new Map(output.tasks.map(t => [t.id, t]));\n\n    for (const [id, task] of outputMap) {\n      const prev = inputMap.get(id);\n      if (!prev || prev.status !== task.status || prev.title !== task.title || prev.notes !== task.notes) {\n        changes++;\n      }\n    }\n    for (const id of inputMap.keys()) {\n      if (!outputMap.has(id)) changes++; // removed tasks\n    }\n    if (input.notes !== output.notes) changes++;\n    return changes;\n  }\n\n  private extractScratchpadFromField(fieldName: 'InputData' | 'OutputData'): ScratchpadSnapshotView | null {\n    if (!this.selectedTimelineItem || this.selectedTimelineItem.type !== 'step') {\n      return null;\n    }\n\n    const stepData = this.selectedTimelineItem.data;\n    const rawValue = stepData?.[fieldName];\n    if (!rawValue) return null;\n\n    try {\n      let parsed = rawValue;\n      if (typeof parsed === 'string') {\n        parsed = JSON.parse(parsed);\n      }\n      const scratchpad = parsed?.scratchpad;\n      if (!scratchpad) return null;\n      return {\n        notes: scratchpad.notes ?? '',\n        tasks: Array.isArray(scratchpad.tasks) ? scratchpad.tasks : []\n      };\n    } catch {\n      return null;\n    }\n  }\n}","@if (selectedTimelineItem) {\n  <div class=\"json-detail-pane\">\n    <div class=\"json-pane-header\">\n      <h3>\n        <i class=\"fas\" [ngClass]=\"selectedTimelineItem.icon\"></i>\n        {{ selectedTimelineItem.title }}\n      </h3>\n      <button class=\"btn-icon\" (click)=\"onClosePanel()\" title=\"Close\">\n        <i class=\"fas fa-times\"></i>\n      </button>\n    </div>\n    <div class=\"json-pane-content\">\n      <div class=\"json-meta\">\n        <div class=\"meta-item\">\n          <label>Type</label>\n          <span>{{ selectedTimelineItem.type }}</span>\n        </div>\n        <div class=\"meta-item\">\n          <label>Status</label>\n          <span class=\"status-badge small\" [attr.data-status]=\"selectedTimelineItem.status\">\n            {{ selectedTimelineItem.status }}\n          </span>\n        </div>\n        <div class=\"meta-item\">\n          <label>Duration</label>\n          <span>{{ selectedTimelineItem.duration || 'N/A' }}</span>\n        </div>\n      </div>\n      <!-- Action-specific link -->\n      @if (selectedTimelineItem.type === 'action' && selectedTimelineItem.data?.ID) {\n        <div class=\"action-link\">\n          <button class=\"btn-link\" (click)=\"onNavigateToActionLog(selectedTimelineItem.data.ID)\">\n            <i class=\"fas fa-external-link-alt\"></i> View Action Execution Log\n          </button>\n        </div>\n      }\n      <!-- Tab Navigation - Show when we have payload diff or scratchpad data -->\n      @if (showStepPayloadDiff || showScratchpadTab) {\n        <div class=\"detail-pane-tabs\">\n          @if (showStepPayloadDiff) {\n            <button\n              class=\"detail-tab\"\n              [class.active]=\"detailPaneTab === 'diff'\"\n              (click)=\"detailPaneTab = 'diff'\">\n              <i class=\"fa-solid fa-code-branch\"></i>\n              Payload Changes\n            </button>\n          }\n          @if (showScratchpadTab) {\n            <button\n              class=\"detail-tab\"\n              [class.active]=\"detailPaneTab === 'scratchpad'\"\n              (click)=\"detailPaneTab = 'scratchpad'\">\n              <i class=\"fa-solid fa-clipboard-list\"></i>\n              Scratchpad\n              @if (scratchpadTaskChangeCount > 0) {\n                <span class=\"tab-badge\">{{ scratchpadTaskChangeCount }}</span>\n              }\n            </button>\n          }\n          <button\n            class=\"detail-tab\"\n            [class.active]=\"detailPaneTab === 'json'\"\n            (click)=\"detailPaneTab = 'json'\">\n            <i class=\"fa-solid fa-code\"></i>\n            Full JSON\n          </button>\n        </div>\n      }\n      <!-- Tab Content -->\n      <div class=\"detail-pane-content\" [class.with-tabs]=\"showStepPayloadDiff || showScratchpadTab\">\n        <!-- Payload Diff Tab -->\n        @if (detailPaneTab === 'diff' && showStepPayloadDiff) {\n          <div class=\"step-payload-diff\">\n            <mj-deep-diff\n              [oldValue]=\"stepPayloadAtStartObject\"\n              [newValue]=\"stepPayloadAtEndObject\"\n              [title]=\"''\"\n              [showSummary]=\"true\"\n              [showUnchanged]=\"false\"\n              [expandAll]=\"false\"\n              [maxDepth]=\"8\"\n              [maxStringLength]=\"150\"\n              [treatNullAsUndefined]=\"true\">\n            </mj-deep-diff>\n          </div>\n        }\n        <!-- Scratchpad Tab -->\n        @if (detailPaneTab === 'scratchpad' && showScratchpadTab) {\n          <div class=\"scratchpad-content\">\n            <div class=\"scratchpad-sub-tabs\">\n              <button\n                class=\"scratchpad-sub-tab\"\n                [class.active]=\"scratchpadSubTab === 'diff'\"\n                (click)=\"scratchpadSubTab = 'diff'\">\n                <i class=\"fa-solid fa-code-compare\"></i> Diff\n              </button>\n              <button\n                class=\"scratchpad-sub-tab\"\n                [class.active]=\"scratchpadSubTab === 'input'\"\n                (click)=\"scratchpadSubTab = 'input'\">\n                <i class=\"fa-solid fa-arrow-right-to-bracket\"></i> Input\n              </button>\n              <button\n                class=\"scratchpad-sub-tab\"\n                [class.active]=\"scratchpadSubTab === 'output'\"\n                (click)=\"scratchpadSubTab = 'output'\">\n                <i class=\"fa-solid fa-arrow-right-from-bracket\"></i> Output\n              </button>\n            </div>\n            <!-- Scratchpad Diff Sub-Tab -->\n            @if (scratchpadSubTab === 'diff') {\n              <div class=\"scratchpad-diff-view\">\n                @if (stepScratchpadInput && stepScratchpadOutput) {\n                  <mj-deep-diff\n                    [oldValue]=\"stepScratchpadInput\"\n                    [newValue]=\"stepScratchpadOutput\"\n                    [title]=\"''\"\n                    [showSummary]=\"true\"\n                    [showUnchanged]=\"false\"\n                    [expandAll]=\"true\"\n                    [maxDepth]=\"6\"\n                    [maxStringLength]=\"300\"\n                    [treatNullAsUndefined]=\"true\">\n                  </mj-deep-diff>\n                } @else if (stepScratchpadOutput) {\n                  <mj-empty-state\n                    Size=\"compact\"\n                    Icon=\"fa-solid fa-circle-plus\"\n                    Title=\"Scratchpad created in this step (no prior state)\" />\n                  <div class=\"scratchpad-snapshot\">\n                    <ng-container *ngTemplateOutlet=\"scratchpadSnapshotTpl; context: { $implicit: stepScratchpadOutput }\"></ng-container>\n                  </div>\n                } @else {\n                  <mj-empty-state\n                    Size=\"compact\"\n                    Icon=\"fa-solid fa-circle-info\"\n                    Title=\"No scratchpad changes in this step\" />\n                }\n              </div>\n            }\n            <!-- Scratchpad Input Sub-Tab -->\n            @if (scratchpadSubTab === 'input') {\n              <div class=\"scratchpad-snapshot-view\">\n                @if (stepScratchpadInput) {\n                  <ng-container *ngTemplateOutlet=\"scratchpadSnapshotTpl; context: { $implicit: stepScratchpadInput }\"></ng-container>\n                } @else {\n                  <mj-empty-state\n                    Size=\"compact\"\n                    Icon=\"fa-solid fa-circle-info\"\n                    Title=\"No scratchpad input for this step\" />\n                }\n              </div>\n            }\n            <!-- Scratchpad Output Sub-Tab -->\n            @if (scratchpadSubTab === 'output') {\n              <div class=\"scratchpad-snapshot-view\">\n                @if (stepScratchpadOutput) {\n                  <ng-container *ngTemplateOutlet=\"scratchpadSnapshotTpl; context: { $implicit: stepScratchpadOutput }\"></ng-container>\n                } @else {\n                  <mj-empty-state\n                    Size=\"compact\"\n                    Icon=\"fa-solid fa-circle-info\"\n                    Title=\"No scratchpad output for this step\" />\n                }\n              </div>\n            }\n          </div>\n        }\n        <!-- Full JSON Tab -->\n        @if (detailPaneTab === 'json' || (!showStepPayloadDiff && !showScratchpadTab)) {\n          <div class=\"json-viewer\">\n            <div class=\"json-toolbar\">\n              <button class=\"btn-icon\" title=\"Copy JSON\" (click)=\"onCopyToClipboard()\">\n                <i class=\"fas fa-copy\"></i>\n              </button>\n            </div>\n            <mj-code-editor\n              [(ngModel)]=\"selectedItemJsonString\"\n              [language]=\"'json'\"\n              [readonly]=\"true\"\n              style=\"width: 100%;\">\n            </mj-code-editor>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Reusable scratchpad snapshot template -->\n<ng-template #scratchpadSnapshotTpl let-snapshot>\n  <div class=\"scratchpad-snapshot\">\n    @if (snapshot.notes) {\n      <div class=\"scratchpad-notes-section\">\n        <h4><i class=\"fa-solid fa-note-sticky\"></i> Notes</h4>\n        <div class=\"scratchpad-notes-content\">{{ snapshot.notes }}</div>\n      </div>\n    }\n    @if (snapshot.tasks?.length > 0) {\n      <div class=\"scratchpad-tasks-section\">\n        <h4><i class=\"fa-solid fa-list-check\"></i> Tasks ({{ snapshot.tasks.length }})</h4>\n        <div class=\"scratchpad-task-list\">\n          @for (task of snapshot.tasks; track task.id) {\n            <div class=\"scratchpad-task-item\" [attr.data-status]=\"task.status\">\n              <span class=\"task-status-indicator\" [attr.data-status]=\"task.status\">\n                @switch (task.status) {\n                  @case ('completed') { <i class=\"fa-solid fa-circle-check\"></i> }\n                  @case ('in_progress') { <i class=\"fa-solid fa-spinner\"></i> }\n                  @case ('blocked') { <i class=\"fa-solid fa-circle-xmark\"></i> }\n                  @default { <i class=\"fa-regular fa-circle\"></i> }\n                }\n              </span>\n              <div class=\"task-content\">\n                <span class=\"task-id\">{{ task.id }}</span>\n                <span class=\"task-title\">{{ task.title }}</span>\n                @if (task.notes) {\n                  <span class=\"task-notes\">{{ task.notes }}</span>\n                }\n              </div>\n              <span class=\"task-status-badge\" [attr.data-status]=\"task.status\">{{ task.status }}</span>\n            </div>\n          }\n        </div>\n      </div>\n    }\n    @if (!snapshot.notes && (!snapshot.tasks || snapshot.tasks.length === 0)) {\n      <mj-empty-state\n        Size=\"compact\"\n        Icon=\"fa-solid fa-circle-info\"\n        Title=\"Empty scratchpad\" />\n    }\n  </div>\n</ng-template>"]}