import { Component, Input, Output, EventEmitter } from '@angular/core';
import { AIAgentRunStepEntity } from '@memberjunction/core-entities';
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";
function AIAgentRunStepDetailComponent_div_0_div_24_Template(rf, ctx) { if (rf & 1) {
    const _r3 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 15)(1, "button", 16);
    i0.ɵɵlistener("click", function AIAgentRunStepDetailComponent_div_0_div_24_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onNavigateToActionLog(ctx_r1.selectedTimelineItem.data.ID)); });
    i0.ɵɵelement(2, "i", 17);
    i0.ɵɵtext(3, " View Action Execution Log ");
    i0.ɵɵelementEnd()();
} }
function AIAgentRunStepDetailComponent_div_0_Conditional_25_Template(rf, ctx) { if (rf & 1) {
    const _r4 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 11)(1, "button", 18);
    i0.ɵɵlistener("click", function AIAgentRunStepDetailComponent_div_0_Conditional_25_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.detailPaneTab = "diff"); });
    i0.ɵɵelement(2, "i", 19);
    i0.ɵɵtext(3, " Payload Changes ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "button", 18);
    i0.ɵɵlistener("click", function AIAgentRunStepDetailComponent_div_0_Conditional_25_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.detailPaneTab = "json"); });
    i0.ɵɵelement(5, "i", 20);
    i0.ɵɵtext(6, " Full JSON ");
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵclassProp("active", ctx_r1.detailPaneTab === "diff");
    i0.ɵɵadvance(3);
    i0.ɵɵclassProp("active", ctx_r1.detailPaneTab === "json");
} }
function AIAgentRunStepDetailComponent_div_0_Conditional_27_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 13);
    i0.ɵɵelement(1, "mj-deep-diff", 21);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵproperty("oldValue", ctx_r1.stepPayloadAtStartObject)("newValue", ctx_r1.stepPayloadAtEndObject)("title", "")("showSummary", true)("showUnchanged", false)("expandAll", false)("maxDepth", 8)("maxStringLength", 150)("treatNullAsUndefined", true);
} }
function AIAgentRunStepDetailComponent_div_0_Conditional_28_Template(rf, ctx) { if (rf & 1) {
    const _r5 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 14)(1, "div", 22)(2, "button", 23);
    i0.ɵɵlistener("click", function AIAgentRunStepDetailComponent_div_0_Conditional_28_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onCopyToClipboard()); });
    i0.ɵɵelement(3, "i", 24);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(4, "mj-code-editor", 25);
    i0.ɵɵtwoWayListener("ngModelChange", function AIAgentRunStepDetailComponent_div_0_Conditional_28_Template_mj_code_editor_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r5); 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) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(4);
    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.selectedItemJsonString);
    i0.ɵɵproperty("language", "json")("readonly", true);
} }
function AIAgentRunStepDetailComponent_div_0_Template(rf, ctx) { if (rf & 1) {
    const _r1 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "h3");
    i0.ɵɵelement(3, "i", 3);
    i0.ɵɵtext(4);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(5, "button", 4);
    i0.ɵɵlistener("click", function AIAgentRunStepDetailComponent_div_0_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onClosePanel()); });
    i0.ɵɵelement(6, "i", 5);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(7, "div", 6)(8, "div", 7)(9, "div", 8)(10, "label");
    i0.ɵɵtext(11, "Type");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(12, "span");
    i0.ɵɵtext(13);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(14, "div", 8)(15, "label");
    i0.ɵɵtext(16, "Status");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(17, "span", 9);
    i0.ɵɵtext(18);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(19, "div", 8)(20, "label");
    i0.ɵɵtext(21, "Duration");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(22, "span");
    i0.ɵɵtext(23);
    i0.ɵɵelementEnd()()();
    i0.ɵɵtemplate(24, AIAgentRunStepDetailComponent_div_0_div_24_Template, 4, 0, "div", 10)(25, AIAgentRunStepDetailComponent_div_0_Conditional_25_Template, 7, 4, "div", 11);
    i0.ɵɵelementStart(26, "div", 12);
    i0.ɵɵtemplate(27, AIAgentRunStepDetailComponent_div_0_Conditional_27_Template, 2, 9, "div", 13)(28, AIAgentRunStepDetailComponent_div_0_Conditional_28_Template, 5, 3, "div", 14);
    i0.ɵɵelementEnd()()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance(3);
    i0.ɵɵproperty("ngClass", ctx_r1.selectedTimelineItem.icon);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", ctx_r1.selectedTimelineItem.title, " ");
    i0.ɵɵadvance(9);
    i0.ɵɵtextInterpolate(ctx_r1.selectedTimelineItem.type);
    i0.ɵɵadvance(4);
    i0.ɵɵattribute("data-status", ctx_r1.selectedTimelineItem.status);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", ctx_r1.selectedTimelineItem.status, " ");
    i0.ɵɵadvance(5);
    i0.ɵɵtextInterpolate(ctx_r1.selectedTimelineItem.duration || "N/A");
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", ctx_r1.selectedTimelineItem.type === "action" && (ctx_r1.selectedTimelineItem.data == null ? null : ctx_r1.selectedTimelineItem.data.ID));
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r1.showStepPayloadDiff ? 25 : -1);
    i0.ɵɵadvance();
    i0.ɵɵclassProp("with-tabs", ctx_r1.showStepPayloadDiff);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r1.detailPaneTab === "diff" && ctx_r1.showStepPayloadDiff ? 27 : -1);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r1.detailPaneTab === "json" || !ctx_r1.showStepPayloadDiff ? 28 : -1);
} }
export class AIAgentRunStepDetailComponent {
    constructor(cdr) {
        this.cdr = cdr;
        this.selectedTimelineItem = null;
        this.closePanel = new EventEmitter();
        this.navigateToActionLog = new EventEmitter();
        this.copyToClipboard = new EventEmitter();
        this.selectedItemJsonString = '{}';
        this.detailPaneTab = 'diff';
    }
    ngOnChanges() {
        if (this.selectedTimelineItem) {
            this.selectedItemJsonString = this.getSelectedItemJson();
            // Default to diff tab if step has payload diff, otherwise json tab
            this.detailPaneTab = this.showStepPayloadDiff ? 'diff' : 'json';
            this.cdr.detectChanges();
        }
    }
    getSelectedItemJson() {
        if (!this.selectedTimelineItem)
            return '{}';
        // Get all the data from the entity
        let data;
        if (this.selectedTimelineItem.data instanceof AIAgentRunStepEntity) {
            // If it's a step entity, we need to get the full run data
            data = this.selectedTimelineItem.data.GetAll();
        }
        else {
            data = this.selectedTimelineItem.data;
        }
        // Apply recursive JSON parsing to the entire data object
        const parseOptions = {
            extractInlineJson: true,
            maxDepth: 100,
            debug: false
        };
        const parsedData = ParseJSONRecursive(data, parseOptions);
        return JSON.stringify(parsedData, null, 2);
    }
    /**
     * Check if selected timeline item is a step with payload changes
     */
    get showStepPayloadDiff() {
        if (!this.selectedTimelineItem || this.selectedTimelineItem.type !== 'step') {
            return false;
        }
        const stepData = this.selectedTimelineItem.data;
        if (stepData && (stepData.PayloadAtStart?.trim().length > 0
            || stepData.PayloadAtEnd?.trim().length > 0)) {
            return stepData.PayloadAtStart !== stepData.PayloadAtEnd;
        }
        else {
            return false;
        }
    }
    /**
     * 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;
        }
    }
    /**
     * Get parsed PayloadAtEnd for the selected step
     */
    get stepPayloadAtEndObject() {
        if (!this.selectedTimelineItem || this.selectedTimelineItem.type !== 'step') {
            return null;
        }
        const stepData = this.selectedTimelineItem.data;
        if (!stepData?.PayloadAtEnd)
            return null;
        try {
            // First, check if PayloadAtEnd is a JSON string that needs to be parsed
            let payloadData = stepData.PayloadAtEnd;
            try {
                // If PayloadAtEnd is a JSON string, parse it first
                payloadData = JSON.parse(stepData.PayloadAtEnd);
            }
            catch {
                // If it's not valid JSON, use it as-is
                payloadData = stepData.PayloadAtEnd;
            }
            const parseOptions = {
                extractInlineJson: true,
                maxDepth: 100,
                debug: false
            };
            return ParseJSONRecursive(payloadData, parseOptions);
        }
        catch (e) {
            return null;
        }
    }
    onClosePanel() {
        this.closePanel.emit();
    }
    onNavigateToActionLog(logId) {
        this.navigateToActionLog.emit(logId);
    }
    onCopyToClipboard() {
        this.copyToClipboard.emit(this.getSelectedItemJson());
    }
    static { this.ɵfac = function AIAgentRunStepDetailComponent_Factory(t) { return new (t || 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" }, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [["class", "json-detail-pane", 4, "ngIf"], [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"], ["class", "action-link", 4, "ngIf"], [1, "detail-pane-tabs"], [1, "detail-pane-content"], [1, "step-payload-diff"], [1, "json-viewer"], [1, "action-link"], [1, "btn-link", 3, "click"], [1, "fas", "fa-external-link-alt"], [1, "detail-tab", 3, "click"], [1, "fa-solid", "fa-code-branch"], [1, "fa-solid", "fa-code"], [3, "oldValue", "newValue", "title", "showSummary", "showUnchanged", "expandAll", "maxDepth", "maxStringLength", "treatNullAsUndefined"], [1, "json-toolbar"], ["title", "Copy JSON", 1, "btn-icon", 3, "click"], [1, "fas", "fa-copy"], [2, "width", "100%", 3, "ngModelChange", "ngModel", "language", "readonly"]], template: function AIAgentRunStepDetailComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵtemplate(0, AIAgentRunStepDetailComponent_div_0_Template, 29, 12, "div", 0);
        } if (rf & 2) {
            i0.ɵɵproperty("ngIf", ctx.selectedTimelineItem);
        } }, dependencies: [i1.NgClass, i1.NgIf, 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: white;\n  border-left: 1px solid #e0e6ed;\n}\n\n.json-pane-header[_ngcontent-%COMP%] {\n  padding: 16px;\n  border-bottom: 1px solid #e0e6ed;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #f8f9fa;\n}\n\n.json-pane-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: #2c3e50;\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: #6c757d;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n  background: rgba(0, 0, 0, 0.05);\n  color: #495057;\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 #e0e6ed;\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: #6c757d;\n  font-weight: 600;\n}\n\n.meta-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #2c3e50;\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: #e3f2fd;\n  color: #1976d2;\n}\n\n.status-badge[data-status=\"Completed\"][_ngcontent-%COMP%] {\n  background: #e8f5e9;\n  color: #388e3c;\n}\n\n.status-badge[data-status=\"Failed\"][_ngcontent-%COMP%] {\n  background: #ffebee;\n  color: #d32f2f;\n}\n\n.status-badge[data-status=\"Cancelled\"][_ngcontent-%COMP%] {\n  background: #fff3e0;\n  color: #f57c00;\n}\n\n.action-link[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  border-bottom: 1px solid #e0e6ed;\n}\n\n.btn-link[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  color: #2196f3;\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: rgba(33, 150, 243, 0.1);\n  color: #1976d2;\n}\n\n.detail-pane-tabs[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0;\n  background: #f8f9fa;\n  border-bottom: 1px solid #e0e6ed;\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: #6c757d;\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: #495057;\n  background: rgba(0, 0, 0, 0.02);\n}\n\n.detail-tab.active[_ngcontent-%COMP%] {\n  color: #2196f3;\n  border-bottom-color: #2196f3;\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}"] }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AIAgentRunStepDetailComponent, [{
        type: Component,
        args: [{ selector: 'mj-ai-agent-run-step-detail', template: "<div class=\"json-detail-pane\" *ngIf=\"selectedTimelineItem\">\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    \n    <!-- Action-specific link -->\n    <div class=\"action-link\" *ngIf=\"selectedTimelineItem.type === 'action' && selectedTimelineItem.data?.ID\">\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 - Only show when we have both options -->\n    @if (showStepPayloadDiff) {\n      <div class=\"detail-pane-tabs\">\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        <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    \n    <!-- Tab Content -->\n    <div class=\"detail-pane-content\" [class.with-tabs]=\"showStepPayloadDiff\">\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      \n      <!-- Full JSON Tab -->\n      @if (detailPaneTab === 'json' || !showStepPayloadDiff) {\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>", styles: [".json-detail-pane {\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  background: white;\n  border-left: 1px solid #e0e6ed;\n}\n\n.json-pane-header {\n  padding: 16px;\n  border-bottom: 1px solid #e0e6ed;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: #f8f9fa;\n}\n\n.json-pane-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: #2c3e50;\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: #6c757d;\n  border-radius: 4px;\n  transition: all 0.2s;\n}\n\n.btn-icon:hover {\n  background: rgba(0, 0, 0, 0.05);\n  color: #495057;\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 #e0e6ed;\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: #6c757d;\n  font-weight: 600;\n}\n\n.meta-item span {\n  font-size: 13px;\n  color: #2c3e50;\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: #e3f2fd;\n  color: #1976d2;\n}\n\n.status-badge[data-status=\"Completed\"] {\n  background: #e8f5e9;\n  color: #388e3c;\n}\n\n.status-badge[data-status=\"Failed\"] {\n  background: #ffebee;\n  color: #d32f2f;\n}\n\n.status-badge[data-status=\"Cancelled\"] {\n  background: #fff3e0;\n  color: #f57c00;\n}\n\n.action-link {\n  padding: 12px 16px;\n  border-bottom: 1px solid #e0e6ed;\n}\n\n.btn-link {\n  background: none;\n  border: none;\n  color: #2196f3;\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: rgba(33, 150, 243, 0.1);\n  color: #1976d2;\n}\n\n.detail-pane-tabs {\n  display: flex;\n  gap: 0;\n  background: #f8f9fa;\n  border-bottom: 1px solid #e0e6ed;\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: #6c757d;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.detail-tab:hover {\n  color: #495057;\n  background: rgba(0, 0, 0, 0.02);\n}\n\n.detail-tab.active {\n  color: #2196f3;\n  border-bottom-color: #2196f3;\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}"] }]
    }], () => [{ type: i0.ChangeDetectorRef }], { selectedTimelineItem: [{
            type: Input
        }], closePanel: [{
            type: Output
        }], navigateToActionLog: [{
            type: Output
        }], copyToClipboard: [{
            type: Output
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AIAgentRunStepDetailComponent, { className: "AIAgentRunStepDetailComponent", filePath: "src/lib/custom/ai-agent-run/ai-agent-run-step-detail.component.ts", lineNumber: 11 }); })();
//# sourceMappingURL=ai-agent-run-step-detail.component.js.map