@memberjunction/ng-core-entity-forms 6.2.0-edge.4 → 6.2.0-edge.5

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

@@ -1,6 +1,7 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
 import { MJAIAgentRunStepEntity } from '@memberjunction/core-entities';
 import { ResolveTaskGraphPositions } from '@memberjunction/ai-core-plus';
+import { TaskGraphRunViewComponent } from '@memberjunction/ng-task-graph-editor';
 import { ParseJSONRecursive } from '@memberjunction/global';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
@@ -136,17 +137,23 @@ function AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Template(rf,
     i0.ɵɵelementStart(3, "button", 32);
     i0.ɵɵlistener("click", function AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.RequestSaveAsWorkflow()); });
     i0.ɵɵelement(4, "i", 33);
-    i0.ɵɵtext(5, " Save as Workflow ");
+    i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
     i0.ɵɵconditionalCreate(6, AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Conditional_6_Template, 1, 3, "mj-task-graph-run-view", 34)(7, AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Conditional_7_Template, 1, 5, "mj-task-graph-editor", 35);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    let tmp_4_0;
+    let tmp_7_0;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r1.stepTaskGraphWasFolded ? 2 : -1);
-    i0.ɵɵadvance(4);
-    i0.ɵɵconditional((tmp_4_0 = ctx_r1.stepTaskGraphParentTaskID) ? 6 : 7, tmp_4_0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", ctx_r1.SavingWorkflow);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.SavingWorkflow ? "fa-spinner fa-spin" : "fa-floppy-disk");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.SavingWorkflow ? "Saving Workflow\u2026" : "Save as Workflow", " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((tmp_7_0 = ctx_r1.stepTaskGraphParentTaskID) ? 6 : 7, tmp_7_0);
 } }
 function AIAgentRunStepDetailComponent_Conditional_0_Conditional_29_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 40);
@@ -400,7 +407,7 @@ function AIAgentRunStepDetailComponent_Conditional_0_Template(rf, ctx) { if (rf
     i0.ɵɵconditionalCreate(25, AIAgentRunStepDetailComponent_Conditional_0_Conditional_25_Template, 4, 0, "div", 11);
     i0.ɵɵconditionalCreate(26, AIAgentRunStepDetailComponent_Conditional_0_Conditional_26_Template, 8, 6, "div", 12);
     i0.ɵɵelementStart(27, "div", 13);
-    i0.ɵɵconditionalCreate(28, AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Template, 8, 2, "div", 14);
+    i0.ɵɵconditionalCreate(28, AIAgentRunStepDetailComponent_Conditional_0_Conditional_28_Template, 8, 5, "div", 14);
     i0.ɵɵconditionalCreate(29, AIAgentRunStepDetailComponent_Conditional_0_Conditional_29_Template, 3, 0, "div", 15);
     i0.ɵɵconditionalCreate(30, AIAgentRunStepDetailComponent_Conditional_0_Conditional_30_Template, 2, 9, "div", 16);
     i0.ɵɵconditionalCreate(31, AIAgentRunStepDetailComponent_Conditional_0_Conditional_31_Template, 14, 9, "div", 17);
@@ -573,11 +580,14 @@ export class AIAgentRunStepDetailComponent {
     set scratchpadSubTab(value) {
         this.ScratchpadSubTab = value;
     }
+    static { this.EMPTY_SKILL_INVOCATIONS = []; }
     constructor(cdr) {
         this.cdr = cdr;
         this.SelectedTimelineItem = null;
         /** The provider the host is on, so the run view reads through the right one. */
         this.Provider = null;
+        /** True while the host is persisting the workflow via WorkflowSaveOperation. */
+        this.SavingWorkflow = false;
         this.ClosePanel = new EventEmitter();
         /**
          * @deprecated Use {@link ClosePanel}.
@@ -624,10 +634,58 @@ export class AIAgentRunStepDetailComponent {
         this.SelectedItemJsonString = '{}';
         this.DetailPaneTab = 'diff';
         this.ScratchpadSubTab = 'diff';
+        this._cacheFingerprint = null;
+        this._cachedSelectedItem = null;
+        this._stepNoticeCache = null;
+        this._selectedItemJsonCache = '{}';
+        this._showStepPayloadDiffCache = false;
+        this._stepPayloadAtStartObjectCache = null;
+        this._stepPayloadAtEndObjectCache = null;
+        this._stepSkillInvocationsCache = AIAgentRunStepDetailComponent.EMPTY_SKILL_INVOCATIONS;
+        this._stepTaskGraphCache = null;
+        this._stepTaskGraphPositionsCache = null;
+        this._stepTaskGraphParentTaskIdCache = null;
+        this._stepTaskGraphWasFoldedCache = false;
+        this._stepScratchpadInputCache = null;
+        this._stepScratchpadOutputCache = null;
+        this._scratchpadTaskChangeCountCache = 0;
+    }
+    computeCacheFingerprint(item) {
+        if (!item) {
+            return '';
+        }
+        const d = item.data ?? {};
+        return `${item.id ?? ''}|${item.type ?? ''}|${item.status ?? ''}|${d.StepType ?? ''}|${Boolean(d.IsWorkflowStep)}|${d.PayloadAtStart ?? ''}|${d.PayloadAtEnd ?? ''}|${typeof d.Skills === 'string' ? d.Skills : JSON.stringify(d.Skills ?? '')}|${typeof d.InputData === 'string' ? d.InputData : JSON.stringify(d.InputData ?? '')}|${typeof d.OutputData === 'string' ? d.OutputData : JSON.stringify(d.OutputData ?? '')}`;
+    }
+    ensureStepDetailCache() {
+        const item = this.SelectedTimelineItem;
+        const fp = this.computeCacheFingerprint(item);
+        if (this._cachedSelectedItem === item && this._cacheFingerprint === fp) {
+            return;
+        }
+        this._cachedSelectedItem = item;
+        this._cacheFingerprint = fp;
+        this._stepNoticeCache = this.computeStepNotice(item);
+        this._selectedItemJsonCache = this.computeSelectedItemJson(item);
+        this._showStepPayloadDiffCache = this.computeShowStepPayloadDiff(item);
+        this._stepPayloadAtStartObjectCache = this.computeStepPayloadObject(item, 'PayloadAtStart');
+        this._stepPayloadAtEndObjectCache = this.computeStepPayloadObject(item, 'PayloadAtEnd');
+        this._stepSkillInvocationsCache = this.computeStepSkillInvocations(item);
+        this._stepTaskGraphCache = this.computeStepTaskGraph(item);
+        this._stepTaskGraphPositionsCache = this._stepTaskGraphCache
+            ? ResolveTaskGraphPositions(this._stepTaskGraphCache)
+            : null;
+        this._stepTaskGraphParentTaskIdCache = this.computeStepTaskGraphParentTaskID(item);
+        this._stepTaskGraphWasFoldedCache = this.computeStepTaskGraphWasFolded(item);
+        this._stepScratchpadInputCache = this.extractScratchpadFromField('InputData');
+        this._stepScratchpadOutputCache = this.extractScratchpadFromField('OutputData');
+        this._scratchpadTaskChangeCountCache = this.computeScratchpadTaskChangeCount(this._stepScratchpadInputCache, this._stepScratchpadOutputCache);
+        this.SelectedItemJsonString = this._selectedItemJsonCache;
     }
     ngOnChanges() {
+        this._cacheFingerprint = null;
+        this.ensureStepDetailCache();
         if (this.SelectedTimelineItem) {
-            this.SelectedItemJsonString = this.GetSelectedItemJson();
             // Default to diff tab if step has payload diff, skills for Skill steps (the activation IS
             // the story there), scratchpad if available, otherwise json
             if (this.ShowStepPayloadDiff) {
@@ -670,7 +728,10 @@ export class AIAgentRunStepDetailComponent {
      * half-broken.
      */
     get StepNotice() {
-        const item = this.SelectedTimelineItem;
+        this.ensureStepDetailCache();
+        return this._stepNoticeCache;
+    }
+    computeStepNotice(item) {
         if (!item?.data?.IsWorkflowStep)
             return null;
         switch (item.status) {
@@ -699,16 +760,20 @@ export class AIAgentRunStepDetailComponent {
         }
     }
     GetSelectedItemJson() {
-        if (!this.SelectedTimelineItem)
+        this.ensureStepDetailCache();
+        return this._selectedItemJsonCache;
+    }
+    computeSelectedItemJson(item) {
+        if (!item)
             return '{}';
         // Get all the data from the entity
         let data;
-        if (this.SelectedTimelineItem.data instanceof MJAIAgentRunStepEntity) {
+        if (item.data instanceof MJAIAgentRunStepEntity) {
             // If it's a step entity, we need to get the full run data
-            data = this.SelectedTimelineItem.data.GetAll();
+            data = item.data.GetAll();
         }
         else {
-            data = this.SelectedTimelineItem.data;
+            data = item.data;
         }
         // Apply recursive JSON parsing to the entire data object
         const parseOptions = {
@@ -727,10 +792,14 @@ export class AIAgentRunStepDetailComponent {
      * Check if selected timeline item is a step with payload changes
      */
     get ShowStepPayloadDiff() {
-        if (!this.SelectedTimelineItem || this.SelectedTimelineItem.type !== 'step') {
+        this.ensureStepDetailCache();
+        return this._showStepPayloadDiffCache;
+    }
+    computeShowStepPayloadDiff(item) {
+        if (!item || item.type !== 'step') {
             return false;
         }
-        const stepData = this.SelectedTimelineItem.data;
+        const stepData = item.data;
         if (stepData && (stepData.PayloadAtStart?.trim().length > 0
             || stepData.PayloadAtEnd?.trim().length > 0)) {
             return stepData.PayloadAtStart !== stepData.PayloadAtEnd;
@@ -747,33 +816,8 @@ export class AIAgentRunStepDetailComponent {
      * Get parsed PayloadAtStart for the selected step
      */
     get StepPayloadAtStartObject() {
-        if (!this.SelectedTimelineItem || this.SelectedTimelineItem.type !== 'step') {
-            return null;
-        }
-        const stepData = this.SelectedTimelineItem.data;
-        if (!stepData?.PayloadAtStart)
-            return null;
-        try {
-            // First, check if PayloadAtStart is a JSON string that needs to be parsed
-            let payloadData = stepData.PayloadAtStart;
-            try {
-                // If PayloadAtStart is a JSON string, parse it first
-                payloadData = JSON.parse(stepData.PayloadAtStart);
-            }
-            catch {
-                // If it's not valid JSON, use it as-is
-                payloadData = stepData.PayloadAtStart;
-            }
-            const parseOptions = {
-                extractInlineJson: true,
-                maxDepth: 100,
-                debug: false
-            };
-            return ParseJSONRecursive(payloadData, parseOptions);
-        }
-        catch (e) {
-            return null;
-        }
+        this.ensureStepDetailCache();
+        return this._stepPayloadAtStartObjectCache;
     }
     /** @deprecated Use {@link StepPayloadAtStartObject}. */
     get stepPayloadAtStartObject() {
@@ -783,22 +827,28 @@ export class AIAgentRunStepDetailComponent {
      * Get parsed PayloadAtEnd for the selected step
      */
     get StepPayloadAtEndObject() {
-        if (!this.SelectedTimelineItem || this.SelectedTimelineItem.type !== 'step') {
+        this.ensureStepDetailCache();
+        return this._stepPayloadAtEndObjectCache;
+    }
+    /** @deprecated Use {@link StepPayloadAtEndObject}. */
+    get stepPayloadAtEndObject() {
+        return this.StepPayloadAtEndObject;
+    }
+    computeStepPayloadObject(item, field) {
+        if (!item || item.type !== 'step') {
             return null;
         }
-        const stepData = this.SelectedTimelineItem.data;
-        if (!stepData?.PayloadAtEnd)
+        const stepData = item.data;
+        const rawPayload = stepData?.[field];
+        if (!rawPayload)
             return null;
         try {
-            // First, check if PayloadAtEnd is a JSON string that needs to be parsed
-            let payloadData = stepData.PayloadAtEnd;
+            let payloadData = rawPayload;
             try {
-                // If PayloadAtEnd is a JSON string, parse it first
-                payloadData = JSON.parse(stepData.PayloadAtEnd);
+                payloadData = JSON.parse(rawPayload);
             }
             catch {
-                // If it's not valid JSON, use it as-is
-                payloadData = stepData.PayloadAtEnd;
+                payloadData = rawPayload;
             }
             const parseOptions = {
                 extractInlineJson: true,
@@ -807,14 +857,10 @@ export class AIAgentRunStepDetailComponent {
             };
             return ParseJSONRecursive(payloadData, parseOptions);
         }
-        catch (e) {
+        catch {
             return null;
         }
     }
-    /** @deprecated Use {@link StepPayloadAtEndObject}. */
-    get stepPayloadAtEndObject() {
-        return this.StepPayloadAtEndObject;
-    }
     OnClosePanel() {
         this.ClosePanel.emit();
     }
@@ -853,18 +899,24 @@ export class AIAgentRunStepDetailComponent {
      * JSON column. Empty array when the step has no skill linkage or the JSON is malformed.
      */
     get StepSkillInvocations() {
-        if (!this.SelectedTimelineItem || this.SelectedTimelineItem.type !== 'step') {
-            return [];
+        this.ensureStepDetailCache();
+        return this._stepSkillInvocationsCache;
+    }
+    computeStepSkillInvocations(item) {
+        if (!item || item.type !== 'step') {
+            return AIAgentRunStepDetailComponent.EMPTY_SKILL_INVOCATIONS;
         }
-        const raw = this.SelectedTimelineItem.data?.Skills;
+        const raw = item.data?.Skills;
         if (!raw)
-            return [];
+            return AIAgentRunStepDetailComponent.EMPTY_SKILL_INVOCATIONS;
         try {
             const parsed = typeof raw === 'string' ? JSON.parse(raw) : raw;
-            return Array.isArray(parsed) ? parsed : [];
+            return Array.isArray(parsed)
+                ? parsed
+                : AIAgentRunStepDetailComponent.EMPTY_SKILL_INVOCATIONS;
         }
         catch {
-            return [];
+            return AIAgentRunStepDetailComponent.EMPTY_SKILL_INVOCATIONS;
         }
     }
     /** @deprecated Use {@link StepSkillInvocations}. */
@@ -896,11 +948,15 @@ export class AIAgentRunStepDetailComponent {
      * a malformed or absent payload simply means no tab rather than a broken panel.
      */
     get StepTaskGraph() {
-        if (!this.SelectedTimelineItem || this.SelectedTimelineItem.type !== 'step')
+        this.ensureStepDetailCache();
+        return this._stepTaskGraphCache;
+    }
+    computeStepTaskGraph(item) {
+        if (!item || item.type !== 'step')
             return null;
-        if (this.SelectedTimelineItem.data?.StepType !== 'TaskGraph')
+        if (item.data?.StepType !== 'TaskGraph')
             return null;
-        for (const raw of [this.SelectedTimelineItem.data?.InputData, this.SelectedTimelineItem.data?.OutputData]) {
+        for (const raw of [item.data?.InputData, item.data?.OutputData]) {
             if (!raw)
                 continue;
             try {
@@ -930,10 +986,8 @@ export class AIAgentRunStepDetailComponent {
      * carries the arrangement its author dragged into place, on every node.
      */
     get StepTaskGraphPositions() {
-        const spec = this.StepTaskGraph;
-        if (!spec)
-            return null;
-        return ResolveTaskGraphPositions(spec);
+        this.ensureStepDetailCache();
+        return this._stepTaskGraphPositionsCache;
     }
     /** @deprecated Use {@link StepTaskGraphPositions}. */
     get stepTaskGraphPositions() {
@@ -953,7 +1007,11 @@ export class AIAgentRunStepDetailComponent {
      * drawn as one.
      */
     get StepTaskGraphParentTaskID() {
-        const raw = this.SelectedTimelineItem?.data?.OutputData;
+        this.ensureStepDetailCache();
+        return this._stepTaskGraphParentTaskIdCache;
+    }
+    computeStepTaskGraphParentTaskID(item) {
+        const raw = item?.data?.OutputData;
         if (!raw)
             return null;
         try {
@@ -971,9 +1029,13 @@ export class AIAgentRunStepDetailComponent {
     }
     /** True when the recorded graph was constant-folded rather than dispatched (D9). */
     get StepTaskGraphWasFolded() {
-        if (!this.SelectedTimelineItem)
+        this.ensureStepDetailCache();
+        return this._stepTaskGraphWasFoldedCache;
+    }
+    computeStepTaskGraphWasFolded(item) {
+        if (!item)
             return false;
-        const raw = this.SelectedTimelineItem.data?.InputData;
+        const raw = item.data?.InputData;
         if (!raw)
             return false;
         try {
@@ -990,7 +1052,7 @@ export class AIAgentRunStepDetailComponent {
     }
     /** Asks the host to save this run's graph as a reusable workflow. */
     RequestSaveAsWorkflow() {
-        const spec = this.StepTaskGraph;
+        const spec = this.StepTaskGraph ?? this.TaskGraphRunView?.Spec ?? null;
         if (spec)
             this.SaveAsWorkflowRequested.emit(spec);
     }
@@ -1011,7 +1073,8 @@ export class AIAgentRunStepDetailComponent {
      * Parse scratchpad snapshot from InputData JSON
      */
     get StepScratchpadInput() {
-        return this.extractScratchpadFromField('InputData');
+        this.ensureStepDetailCache();
+        return this._stepScratchpadInputCache;
     }
     /** @deprecated Use {@link StepScratchpadInput}. */
     get stepScratchpadInput() {
@@ -1021,7 +1084,8 @@ export class AIAgentRunStepDetailComponent {
      * Parse scratchpad snapshot from OutputData JSON
      */
     get StepScratchpadOutput() {
-        return this.extractScratchpadFromField('OutputData');
+        this.ensureStepDetailCache();
+        return this._stepScratchpadOutputCache;
     }
     /** @deprecated Use {@link StepScratchpadOutput}. */
     get stepScratchpadOutput() {
@@ -1031,8 +1095,10 @@ export class AIAgentRunStepDetailComponent {
      * Number of tasks that changed between input and output scratchpad snapshots
      */
     get ScratchpadTaskChangeCount() {
-        const input = this.StepScratchpadInput;
-        const output = this.StepScratchpadOutput;
+        this.ensureStepDetailCache();
+        return this._scratchpadTaskChangeCountCache;
+    }
+    computeScratchpadTaskChangeCount(input, output) {
         if (!input && !output)
             return 0;
         if (!input || !output)
@@ -1084,7 +1150,12 @@ 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", selectedTimelineItem: "selectedTimelineItem", Provider: "Provider" }, outputs: { ClosePanel: "ClosePanel", closePanel: "closePanel", NavigateToActionLog: "NavigateToActionLog", navigateToActionLog: "navigateToActionLog", CopyToClipboard: "CopyToClipboard", copyToClipboard: "copyToClipboard", SaveAsWorkflowRequested: "SaveAsWorkflowRequested", saveAsWorkflowRequested: "saveAsWorkflowRequested" }, 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, "step-notice"], [1, "action-link"], [1, "detail-pane-tabs"], [1, "detail-pane-content"], [1, "detail-graph"], [1, "skills-content"], [1, "step-payload-diff"], [1, "scratchpad-content"], [1, "json-viewer"], ["Size", "sm", 3, "Variant", "Message"], [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-diagram-project"], [1, "fa-solid", "fa-code-branch"], [1, "fa-solid", "fa-wand-magic-sparkles"], [1, "tab-badge"], [1, "fa-solid", "fa-clipboard-list"], [1, "detail-graph__actions"], ["Variant", "info", "Size", "sm", "Message", "This ran inline as a single step \u2014 a workflow of one needs no scheduling. You can still save it."], ["mjButton", "", "variant", "primary", "size", "sm", 3, "click"], [1, "fa-solid", "fa-floppy-disk"], ["Height", "100%", 1, "detail-graph__canvas", 3, "Provider", "ParentTaskID", "WorkflowName"], [1, "detail-graph__canvas", 3, "Spec", "NodePositions", "ReadOnly", "ShowPalette", "ShowLegend"], [1, "skill-invocation-card"], [1, "skill-invocation-header"], [1, "skill-invocation-name"], [1, "skill-invocation-type"], [1, "skill-invocation-reason"], [1, "skill-invocation-provenance"], [1, "provenance-title"], [1, "provenance-row"], [1, "provenance-label"], [1, "provenance-value"], [1, "provenance-value", "provenance-id"], [1, "fa-solid", "fa-quote-left"], [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) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AIAgentRunStepDetailComponent, selectors: [["mj-ai-agent-run-step-detail"]], viewQuery: function AIAgentRunStepDetailComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(TaskGraphRunViewComponent, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.TaskGraphRunView = _t.first);
+        } }, inputs: { SelectedTimelineItem: "SelectedTimelineItem", selectedTimelineItem: "selectedTimelineItem", Provider: "Provider", SavingWorkflow: "SavingWorkflow" }, outputs: { ClosePanel: "ClosePanel", closePanel: "closePanel", NavigateToActionLog: "NavigateToActionLog", navigateToActionLog: "navigateToActionLog", CopyToClipboard: "CopyToClipboard", copyToClipboard: "copyToClipboard", SaveAsWorkflowRequested: "SaveAsWorkflowRequested", saveAsWorkflowRequested: "saveAsWorkflowRequested" }, 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, "step-notice"], [1, "action-link"], [1, "detail-pane-tabs"], [1, "detail-pane-content"], [1, "detail-graph"], [1, "skills-content"], [1, "step-payload-diff"], [1, "scratchpad-content"], [1, "json-viewer"], ["Size", "sm", 3, "Variant", "Message"], [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-diagram-project"], [1, "fa-solid", "fa-code-branch"], [1, "fa-solid", "fa-wand-magic-sparkles"], [1, "tab-badge"], [1, "fa-solid", "fa-clipboard-list"], [1, "detail-graph__actions"], ["Variant", "info", "Size", "sm", "Message", "This ran inline as a single step \u2014 a workflow of one needs no scheduling. You can still save it."], ["mjButton", "", "variant", "primary", "size", "sm", 3, "click", "disabled"], [1, "fa-solid", 3, "ngClass"], ["Height", "100%", 1, "detail-graph__canvas", 3, "Provider", "ParentTaskID", "WorkflowName"], [1, "detail-graph__canvas", 3, "Spec", "NodePositions", "ReadOnly", "ShowPalette", "ShowLegend"], [1, "skill-invocation-card"], [1, "skill-invocation-header"], [1, "skill-invocation-name"], [1, "skill-invocation-type"], [1, "skill-invocation-reason"], [1, "skill-invocation-provenance"], [1, "provenance-title"], [1, "provenance-row"], [1, "provenance-label"], [1, "provenance-value"], [1, "provenance-value", "provenance-id"], [1, "fa-solid", "fa-quote-left"], [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, 33, 16, "div", 1);
             i0.ɵɵtemplate(1, AIAgentRunStepDetailComponent_ng_template_1_Template, 4, 3, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
@@ -1093,13 +1164,15 @@ export class AIAgentRunStepDetailComponent {
 }
 (() => { (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      <!-- Why a workflow step has nothing to show: it never ran. Above the tabs, because it explains\n           the emptiness the reader is about to look at. -->\n      @if (StepNotice) {\n        <div class=\"step-notice\">\n          <mj-alert [Variant]=\"StepNotice.Variant\" Size=\"sm\" [Message]=\"StepNotice.Message\"></mj-alert>\n        </div>\n      }\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 || showSkillsTab || showGraphTab) {\n        <div class=\"detail-pane-tabs\">\n          @if (showGraphTab) {\n            <button\n              class=\"detail-tab\"\n              [class.active]=\"detailPaneTab === 'graph'\"\n              (click)=\"detailPaneTab = 'graph'\">\n              <i class=\"fa-solid fa-diagram-project\"></i>\n              Workflow\n            </button>\n          }\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 (showSkillsTab) {\n            <button\n              class=\"detail-tab\"\n              [class.active]=\"detailPaneTab === 'skills'\"\n              (click)=\"detailPaneTab = 'skills'\">\n              <i class=\"fa-solid fa-wand-magic-sparkles\"></i>\n              Skills\n              <span class=\"tab-badge\">{{ stepSkillInvocations.length }}</span>\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 || showSkillsTab || showGraphTab\">\n        <!-- Skills Tab \u2014 skill-invocation observability (activation type, provenance of authority, reason) -->\n        @if (detailPaneTab === 'graph' && showGraphTab) {\n          <div class=\"detail-graph\">\n            <div class=\"detail-graph__actions\">\n              @if (stepTaskGraphWasFolded) {\n                <!-- The fold is recorded rather than silent (D9), so the reader can see WHY this\n                     graph never reached the dispatcher instead of inferring it. -->\n                <mj-alert Variant=\"info\" Size=\"sm\"\n                          Message=\"This ran inline as a single step \u2014 a workflow of one needs no scheduling. You can still save it.\">\n                </mj-alert>\n              }\n              <button mjButton variant=\"primary\" size=\"sm\" (click)=\"RequestSaveAsWorkflow()\">\n                <i class=\"fa-solid fa-floppy-disk\"></i> Save as Workflow\n              </button>\n            </div>\n            @if (stepTaskGraphParentTaskID; as parentTaskID) {\n              <!-- The RUN, not the plan. Same component the Workflows app uses, so a workflow is\n                   drawn identically wherever it is opened from \u2014 declined branches hatched,\n                   untravelled edges absent, toolbar on, legend off. -->\n              <mj-task-graph-run-view\n                class=\"detail-graph__canvas\"\n                [Provider]=\"Provider\"\n                [ParentTaskID]=\"parentTaskID\"\n                [WorkflowName]=\"stepTaskGraph?.workflowName || 'Workflow'\"\n                Height=\"100%\">\n              </mj-task-graph-run-view>\n            } @else {\n              <!-- No dispatcher rows to read: a folded graph never ran. Drawing the spec is the\n                   honest rendering \u2014 it is a plan, and it is drawn as one. -->\n              <mj-task-graph-editor\n                class=\"detail-graph__canvas\"\n                [Spec]=\"stepTaskGraph\"\n                [NodePositions]=\"stepTaskGraphPositions\"\n                [ReadOnly]=\"true\"\n                [ShowPalette]=\"false\"\n                [ShowLegend]=\"false\">\n              </mj-task-graph-editor>\n            }\n          </div>\n        }\n        @if (detailPaneTab === 'skills' && showSkillsTab) {\n          <div class=\"skills-content\">\n            @for (inv of stepSkillInvocations; track inv.SkillID) {\n              <div class=\"skill-invocation-card\" [attr.data-activation]=\"inv.ActivationType\">\n                <div class=\"skill-invocation-header\">\n                  <span class=\"skill-invocation-name\">\n                    <i class=\"fa-solid fa-wand-magic-sparkles\"></i>\n                    {{ inv.SkillName }}\n                  </span>\n                  <span class=\"skill-invocation-type\" [attr.data-activation]=\"inv.ActivationType\">\n                    {{ GetActivationTypeLabel(inv) }}\n                  </span>\n                </div>\n                @if (inv.Reason) {\n                  <div class=\"skill-invocation-reason\">\n                    <i class=\"fa-solid fa-quote-left\"></i>\n                    {{ inv.Reason }}\n                  </div>\n                }\n                <div class=\"skill-invocation-provenance\">\n                  <div class=\"provenance-title\">Provenance of Authority</div>\n                  <div class=\"provenance-row\">\n                    <span class=\"provenance-label\">Requested By</span>\n                    <span class=\"provenance-value\">{{ inv.Provenance.RequestedBy === 'user-request' ? 'User (/skill mention)' : 'Agent decision' }}</span>\n                  </div>\n                  <div class=\"provenance-row\">\n                    <span class=\"provenance-label\">Agent AcceptsSkills</span>\n                    <span class=\"provenance-value\">{{ inv.Provenance.AgentAcceptsSkills }}</span>\n                  </div>\n                  <div class=\"provenance-row\">\n                    <span class=\"provenance-label\">Skill ActivationMode</span>\n                    <span class=\"provenance-value\">{{ inv.Provenance.SkillActivationMode }}</span>\n                  </div>\n                  <div class=\"provenance-row\">\n                    <span class=\"provenance-label\">Agent SkillActivationMode</span>\n                    <span class=\"provenance-value\">{{ inv.Provenance.AgentSkillActivationMode }}</span>\n                  </div>\n                  <div class=\"provenance-row\">\n                    <span class=\"provenance-label\">Skill ID</span>\n                    <span class=\"provenance-value provenance-id\">{{ inv.SkillID }}</span>\n                  </div>\n                </div>\n              </div>\n            }\n          </div>\n        }\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\n/* ============================================================\n   Skills tab \u2014 skill-invocation observability cards\n   ============================================================ */\n.skills-content {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 12px;\n}\n\n.skill-invocation-card {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  padding: 12px 14px;\n  background: var(--mj-bg-surface);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.skill-invocation-card[data-activation=\"auto\"] {\n  border-left-color: var(--mj-status-warning);\n}\n\n.skill-invocation-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.skill-invocation-name {\n  font-weight: 600;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.skill-invocation-name i {\n  color: var(--mj-brand-primary);\n}\n\n.skill-invocation-type {\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  padding: 2px 10px;\n  border-radius: 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.skill-invocation-type[data-activation=\"auto\"] {\n  background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n  color: var(--mj-status-warning-text);\n}\n\n.skill-invocation-reason {\n  margin-top: 8px;\n  font-size: 13px;\n  font-style: italic;\n  color: var(--mj-text-secondary);\n  display: flex;\n  gap: 8px;\n  align-items: baseline;\n}\n\n.skill-invocation-reason i {\n  color: var(--mj-text-muted);\n  font-size: 10px;\n}\n\n.skill-invocation-provenance {\n  margin-top: 10px;\n  padding-top: 10px;\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n.provenance-title {\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--mj-text-muted);\n  margin-bottom: 6px;\n}\n\n.provenance-row {\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n  font-size: 12px;\n  padding: 2px 0;\n}\n\n.provenance-label {\n  color: var(--mj-text-secondary);\n}\n\n.provenance-value {\n  color: var(--mj-text-primary);\n  font-weight: 500;\n}\n\n.provenance-id {\n  font-family: monospace;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n/* Workflow tab \u2014 the recorded task graph, read-only, with the Save as Workflow action. */\n.detail-graph {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n}\n\n.detail-graph__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-sm, 0.5rem);\n  padding: var(--mj-space-sm, 0.5rem);\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n/* min-height:0 is what lets the canvas actually shrink inside the flex column. */\n.detail-graph__canvas {\n  flex: 1 1 auto;\n  min-height: 0;\n}\n\n/* Explanation for a step that never executed \u2014 see StepNotice. Sits above the tabs because it\n   accounts for the emptiness the reader is about to look at. */\n.step-notice {\n  padding: 0 var(--mj-space-3, 12px) var(--mj-space-2, 8px);\n}\n\n/* The run view fills the tab rather than taking its intrinsic size \u2014 a canvas that stops halfway\n   down its pane with dead space beneath reads as a broken layout. */\n.detail-graph {\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  height: 100%;\n}\n\n.detail-graph__canvas {\n  flex: 1 1 auto;\n  min-height: 0;\n}\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      <!-- Why a workflow step has nothing to show: it never ran. Above the tabs, because it explains\n           the emptiness the reader is about to look at. -->\n      @if (StepNotice) {\n        <div class=\"step-notice\">\n          <mj-alert [Variant]=\"StepNotice.Variant\" Size=\"sm\" [Message]=\"StepNotice.Message\"></mj-alert>\n        </div>\n      }\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 || showSkillsTab || showGraphTab) {\n        <div class=\"detail-pane-tabs\">\n          @if (showGraphTab) {\n            <button\n              class=\"detail-tab\"\n              [class.active]=\"detailPaneTab === 'graph'\"\n              (click)=\"detailPaneTab = 'graph'\">\n              <i class=\"fa-solid fa-diagram-project\"></i>\n              Workflow\n            </button>\n          }\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 (showSkillsTab) {\n            <button\n              class=\"detail-tab\"\n              [class.active]=\"detailPaneTab === 'skills'\"\n              (click)=\"detailPaneTab = 'skills'\">\n              <i class=\"fa-solid fa-wand-magic-sparkles\"></i>\n              Skills\n              <span class=\"tab-badge\">{{ stepSkillInvocations.length }}</span>\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 || showSkillsTab || showGraphTab\">\n        <!-- Skills Tab \u2014 skill-invocation observability (activation type, provenance of authority, reason) -->\n        @if (detailPaneTab === 'graph' && showGraphTab) {\n          <div class=\"detail-graph\">\n            <div class=\"detail-graph__actions\">\n              @if (stepTaskGraphWasFolded) {\n                <!-- The fold is recorded rather than silent (D9), so the reader can see WHY this\n                     graph never reached the dispatcher instead of inferring it. -->\n                <mj-alert Variant=\"info\" Size=\"sm\"\n                          Message=\"This ran inline as a single step \u2014 a workflow of one needs no scheduling. You can still save it.\">\n                </mj-alert>\n              }\n              <button mjButton variant=\"primary\" size=\"sm\" [disabled]=\"SavingWorkflow\" (click)=\"RequestSaveAsWorkflow()\">\n                <i class=\"fa-solid\" [ngClass]=\"SavingWorkflow ? 'fa-spinner fa-spin' : 'fa-floppy-disk'\"></i>\n                {{ SavingWorkflow ? 'Saving Workflow\u2026' : 'Save as Workflow' }}\n              </button>\n            </div>\n            @if (stepTaskGraphParentTaskID; as parentTaskID) {\n              <!-- The RUN, not the plan. Same component the Workflows app uses, so a workflow is\n                   drawn identically wherever it is opened from \u2014 declined branches hatched,\n                   untravelled edges absent, toolbar on, legend off. -->\n              <mj-task-graph-run-view\n                class=\"detail-graph__canvas\"\n                [Provider]=\"Provider\"\n                [ParentTaskID]=\"parentTaskID\"\n                [WorkflowName]=\"stepTaskGraph?.workflowName || 'Workflow'\"\n                Height=\"100%\">\n              </mj-task-graph-run-view>\n            } @else {\n              <!-- No dispatcher rows to read: a folded graph never ran. Drawing the spec is the\n                   honest rendering \u2014 it is a plan, and it is drawn as one. -->\n              <mj-task-graph-editor\n                class=\"detail-graph__canvas\"\n                [Spec]=\"stepTaskGraph\"\n                [NodePositions]=\"stepTaskGraphPositions\"\n                [ReadOnly]=\"true\"\n                [ShowPalette]=\"false\"\n                [ShowLegend]=\"false\">\n              </mj-task-graph-editor>\n            }\n          </div>\n        }\n        @if (detailPaneTab === 'skills' && showSkillsTab) {\n          <div class=\"skills-content\">\n            @for (inv of stepSkillInvocations; track inv.SkillID) {\n              <div class=\"skill-invocation-card\" [attr.data-activation]=\"inv.ActivationType\">\n                <div class=\"skill-invocation-header\">\n                  <span class=\"skill-invocation-name\">\n                    <i class=\"fa-solid fa-wand-magic-sparkles\"></i>\n                    {{ inv.SkillName }}\n                  </span>\n                  <span class=\"skill-invocation-type\" [attr.data-activation]=\"inv.ActivationType\">\n                    {{ GetActivationTypeLabel(inv) }}\n                  </span>\n                </div>\n                @if (inv.Reason) {\n                  <div class=\"skill-invocation-reason\">\n                    <i class=\"fa-solid fa-quote-left\"></i>\n                    {{ inv.Reason }}\n                  </div>\n                }\n                <div class=\"skill-invocation-provenance\">\n                  <div class=\"provenance-title\">Provenance of Authority</div>\n                  <div class=\"provenance-row\">\n                    <span class=\"provenance-label\">Requested By</span>\n                    <span class=\"provenance-value\">{{ inv.Provenance.RequestedBy === 'user-request' ? 'User (/skill mention)' : 'Agent decision' }}</span>\n                  </div>\n                  <div class=\"provenance-row\">\n                    <span class=\"provenance-label\">Agent AcceptsSkills</span>\n                    <span class=\"provenance-value\">{{ inv.Provenance.AgentAcceptsSkills }}</span>\n                  </div>\n                  <div class=\"provenance-row\">\n                    <span class=\"provenance-label\">Skill ActivationMode</span>\n                    <span class=\"provenance-value\">{{ inv.Provenance.SkillActivationMode }}</span>\n                  </div>\n                  <div class=\"provenance-row\">\n                    <span class=\"provenance-label\">Agent SkillActivationMode</span>\n                    <span class=\"provenance-value\">{{ inv.Provenance.AgentSkillActivationMode }}</span>\n                  </div>\n                  <div class=\"provenance-row\">\n                    <span class=\"provenance-label\">Skill ID</span>\n                    <span class=\"provenance-value provenance-id\">{{ inv.SkillID }}</span>\n                  </div>\n                </div>\n              </div>\n            }\n          </div>\n        }\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\n/* ============================================================\n   Skills tab \u2014 skill-invocation observability cards\n   ============================================================ */\n.skills-content {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 12px;\n}\n\n.skill-invocation-card {\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  padding: 12px 14px;\n  background: var(--mj-bg-surface);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.skill-invocation-card[data-activation=\"auto\"] {\n  border-left-color: var(--mj-status-warning);\n}\n\n.skill-invocation-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.skill-invocation-name {\n  font-weight: 600;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.skill-invocation-name i {\n  color: var(--mj-brand-primary);\n}\n\n.skill-invocation-type {\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  padding: 2px 10px;\n  border-radius: 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.skill-invocation-type[data-activation=\"auto\"] {\n  background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n  color: var(--mj-status-warning-text);\n}\n\n.skill-invocation-reason {\n  margin-top: 8px;\n  font-size: 13px;\n  font-style: italic;\n  color: var(--mj-text-secondary);\n  display: flex;\n  gap: 8px;\n  align-items: baseline;\n}\n\n.skill-invocation-reason i {\n  color: var(--mj-text-muted);\n  font-size: 10px;\n}\n\n.skill-invocation-provenance {\n  margin-top: 10px;\n  padding-top: 10px;\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n.provenance-title {\n  font-size: 11px;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  color: var(--mj-text-muted);\n  margin-bottom: 6px;\n}\n\n.provenance-row {\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n  font-size: 12px;\n  padding: 2px 0;\n}\n\n.provenance-label {\n  color: var(--mj-text-secondary);\n}\n\n.provenance-value {\n  color: var(--mj-text-primary);\n  font-weight: 500;\n}\n\n.provenance-id {\n  font-family: monospace;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n\n/* Workflow tab \u2014 the recorded task graph, read-only, with the Save as Workflow action. */\n.detail-graph {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n}\n\n.detail-graph__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--mj-space-sm, 0.5rem);\n  padding: var(--mj-space-sm, 0.5rem);\n  border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n/* min-height:0 is what lets the canvas actually shrink inside the flex column. */\n.detail-graph__canvas {\n  flex: 1 1 auto;\n  min-height: 0;\n}\n\n/* Explanation for a step that never executed \u2014 see StepNotice. Sits above the tabs because it\n   accounts for the emptiness the reader is about to look at. */\n.step-notice {\n  padding: 0 var(--mj-space-3, 12px) var(--mj-space-2, 8px);\n}\n\n/* The run view fills the tab rather than taking its intrinsic size \u2014 a canvas that stops halfway\n   down its pane with dead space beneath reads as a broken layout. */\n.detail-graph {\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  height: 100%;\n}\n\n.detail-graph__canvas {\n  flex: 1 1 auto;\n  min-height: 0;\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }], { SelectedTimelineItem: [{
             type: Input
         }], selectedTimelineItem: [{
             type: Input
         }], Provider: [{
             type: Input
+        }], SavingWorkflow: [{
+            type: Input
         }], ClosePanel: [{
             type: Output
         }], closePanel: [{
@@ -1116,6 +1189,9 @@ export class AIAgentRunStepDetailComponent {
             type: Output
         }], saveAsWorkflowRequested: [{
             type: Output
+        }], TaskGraphRunView: [{
+            type: ViewChild,
+            args: [TaskGraphRunViewComponent]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAgentRunStepDetailComponent, { className: "AIAgentRunStepDetailComponent", filePath: "src/lib/custom/ai-agent-run/ai-agent-run-step-detail.component.ts", lineNumber: 25 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAgentRunStepDetailComponent, { className: "AIAgentRunStepDetailComponent", filePath: "src/lib/custom/ai-agent-run/ai-agent-run-step-detail.component.ts", lineNumber: 26 }); })();
 //# sourceMappingURL=ai-agent-run-step-detail.component.js.map