/**
 * @fileoverview MCP Log Detail Slide-Out Panel Component
 *
 * Displays detailed information about an MCP tool execution log
 * in a slide-out panel from the right side.
 */
import { Component, Input, Output, EventEmitter, HostListener } from '@angular/core';
import { Subject } from 'rxjs';
import { debounceTime, takeUntil } from 'rxjs/operators';
import { trigger, transition, style, animate } from '@angular/animations';
import { UserInfoEngine } from '@memberjunction/core-entities';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "@progress/kendo-angular-buttons";
import * as i4 from "@memberjunction/ng-code-editor";
function MCPLogDetailPanelComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
    const _r1 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 2);
    i0.ɵɵlistener("click", function MCPLogDetailPanelComponent_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closePanel()); });
    i0.ɵɵelementEnd();
} }
function MCPLogDetailPanelComponent_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
    const _r4 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 28);
    i0.ɵɵlistener("mousedown", function MCPLogDetailPanelComponent_Conditional_1_Conditional_1_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onResizeStart($event)); });
    i0.ɵɵelement(1, "div", 29);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵclassProp("active", ctx_r1.IsResizing);
} }
function MCPLogDetailPanelComponent_Conditional_1_Conditional_13_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 13);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(ctx_r1.formatDuration(ctx_r1.Log.DurationMs));
} }
function MCPLogDetailPanelComponent_Conditional_1_Conditional_24_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 18)(1, "span", 19);
    i0.ɵɵtext(2, "Server");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(3, "span", 21);
    i0.ɵɵtext(4);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(4);
    i0.ɵɵtextInterpolate(ctx_r1.Log.ServerName);
} }
function MCPLogDetailPanelComponent_Conditional_1_Conditional_50_Conditional_9_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 37)(1, "pre", 38);
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(3);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(ctx_r1.Log.ErrorMessage);
} }
function MCPLogDetailPanelComponent_Conditional_1_Conditional_50_Template(rf, ctx) { if (rf & 1) {
    const _r5 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 23)(1, "div", 30);
    i0.ɵɵlistener("click", function MCPLogDetailPanelComponent_Conditional_1_Conditional_50_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleSection(ctx_r1.ErrorSection)); });
    i0.ɵɵelementStart(2, "div", 31);
    i0.ɵɵelement(3, "i", 32);
    i0.ɵɵelementStart(4, "h3", 33);
    i0.ɵɵelement(5, "i", 34);
    i0.ɵɵtext(6, " Error ");
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(7, "button", 35);
    i0.ɵɵlistener("click", function MCPLogDetailPanelComponent_Conditional_1_Conditional_50_Template_button_click_7_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.copyError(); return i0.ɵɵresetView($event.stopPropagation()); });
    i0.ɵɵelement(8, "i", 36);
    i0.ɵɵelementEnd()();
    i0.ɵɵconditionalCreate(9, MCPLogDetailPanelComponent_Conditional_1_Conditional_50_Conditional_9_Template, 3, 1, "div", 37);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(3);
    i0.ɵɵclassProp("expanded", ctx_r1.ErrorSection.expanded);
    i0.ɵɵadvance(6);
    i0.ɵɵconditional(ctx_r1.ErrorSection.expanded ? 9 : -1);
} }
function MCPLogDetailPanelComponent_Conditional_1_Conditional_51_Conditional_9_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 41);
    i0.ɵɵelement(1, "mj-code-editor", 42);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(3);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngModel", ctx_r1.FormattedInputArgs)("language", "json")("readonly", true);
} }
function MCPLogDetailPanelComponent_Conditional_1_Conditional_51_Template(rf, ctx) { if (rf & 1) {
    const _r6 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 24)(1, "div", 30);
    i0.ɵɵlistener("click", function MCPLogDetailPanelComponent_Conditional_1_Conditional_51_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleSection(ctx_r1.InputArgsSection)); });
    i0.ɵɵelementStart(2, "div", 31);
    i0.ɵɵelement(3, "i", 32);
    i0.ɵɵelementStart(4, "h3", 15);
    i0.ɵɵelement(5, "i", 39);
    i0.ɵɵtext(6, " Input Arguments ");
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(7, "button", 40);
    i0.ɵɵlistener("click", function MCPLogDetailPanelComponent_Conditional_1_Conditional_51_Template_button_click_7_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.copyInputArgs(); return i0.ɵɵresetView($event.stopPropagation()); });
    i0.ɵɵelement(8, "i", 36);
    i0.ɵɵelementEnd()();
    i0.ɵɵconditionalCreate(9, MCPLogDetailPanelComponent_Conditional_1_Conditional_51_Conditional_9_Template, 2, 3, "div", 41);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(3);
    i0.ɵɵclassProp("expanded", ctx_r1.InputArgsSection.expanded);
    i0.ɵɵadvance(6);
    i0.ɵɵconditional(ctx_r1.InputArgsSection.expanded ? 9 : -1);
} }
function MCPLogDetailPanelComponent_Conditional_1_Conditional_52_Conditional_9_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 41);
    i0.ɵɵelement(1, "mj-code-editor", 42);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(3);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngModel", ctx_r1.FormattedResult)("language", "json")("readonly", true);
} }
function MCPLogDetailPanelComponent_Conditional_1_Conditional_52_Template(rf, ctx) { if (rf & 1) {
    const _r7 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 24)(1, "div", 30);
    i0.ɵɵlistener("click", function MCPLogDetailPanelComponent_Conditional_1_Conditional_52_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleSection(ctx_r1.ResultSection)); });
    i0.ɵɵelementStart(2, "div", 31);
    i0.ɵɵelement(3, "i", 32);
    i0.ɵɵelementStart(4, "h3", 15);
    i0.ɵɵelement(5, "i", 43);
    i0.ɵɵtext(6, " Result ");
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(7, "button", 44);
    i0.ɵɵlistener("click", function MCPLogDetailPanelComponent_Conditional_1_Conditional_52_Template_button_click_7_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.copyResult(); return i0.ɵɵresetView($event.stopPropagation()); });
    i0.ɵɵelement(8, "i", 36);
    i0.ɵɵelementEnd()();
    i0.ɵɵconditionalCreate(9, MCPLogDetailPanelComponent_Conditional_1_Conditional_52_Conditional_9_Template, 2, 3, "div", 41);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(3);
    i0.ɵɵclassProp("expanded", ctx_r1.ResultSection.expanded);
    i0.ɵɵadvance(6);
    i0.ɵɵconditional(ctx_r1.ResultSection.expanded ? 9 : -1);
} }
function MCPLogDetailPanelComponent_Conditional_1_Conditional_53_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 14)(1, "h3", 15);
    i0.ɵɵelement(2, "i", 45);
    i0.ɵɵtext(3, " Executed By ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "div", 17)(5, "div", 18)(6, "span", 19);
    i0.ɵɵtext(7, "User");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(8, "span", 21);
    i0.ɵɵtext(9);
    i0.ɵɵelementEnd()()()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(9);
    i0.ɵɵtextInterpolate(ctx_r1.Log.UserName);
} }
function MCPLogDetailPanelComponent_Conditional_1_Conditional_55_Template(rf, ctx) { if (rf & 1) {
    const _r8 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 46);
    i0.ɵɵlistener("click", function MCPLogDetailPanelComponent_Conditional_1_Conditional_55_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onRunAgain()); });
    i0.ɵɵelement(1, "i", 47);
    i0.ɵɵtext(2, " Run Again ");
    i0.ɵɵelementEnd();
} }
function MCPLogDetailPanelComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
    const _r3 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 3);
    i0.ɵɵconditionalCreate(1, MCPLogDetailPanelComponent_Conditional_1_Conditional_1_Template, 2, 2, "div", 4);
    i0.ɵɵelementStart(2, "div", 5)(3, "h2", 6);
    i0.ɵɵelement(4, "i", 7);
    i0.ɵɵtext(5, " Execution Details ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(6, "button", 8);
    i0.ɵɵlistener("click", function MCPLogDetailPanelComponent_Conditional_1_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closePanel()); });
    i0.ɵɵelement(7, "i", 9);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(8, "div", 10)(9, "div", 11);
    i0.ɵɵelement(10, "i");
    i0.ɵɵelementStart(11, "span", 12);
    i0.ɵɵtext(12);
    i0.ɵɵelementEnd();
    i0.ɵɵconditionalCreate(13, MCPLogDetailPanelComponent_Conditional_1_Conditional_13_Template, 2, 1, "span", 13);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(14, "div", 14)(15, "h3", 15);
    i0.ɵɵelement(16, "i", 16);
    i0.ɵɵtext(17, " Tool ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(18, "div", 17)(19, "div", 18)(20, "span", 19);
    i0.ɵɵtext(21, "Name");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(22, "span", 20);
    i0.ɵɵtext(23);
    i0.ɵɵelementEnd()();
    i0.ɵɵconditionalCreate(24, MCPLogDetailPanelComponent_Conditional_1_Conditional_24_Template, 5, 1, "div", 18);
    i0.ɵɵelementStart(25, "div", 18)(26, "span", 19);
    i0.ɵɵtext(27, "Connection");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(28, "span", 21);
    i0.ɵɵtext(29);
    i0.ɵɵelementEnd()()()();
    i0.ɵɵelementStart(30, "div", 14)(31, "h3", 15);
    i0.ɵɵelement(32, "i", 22);
    i0.ɵɵtext(33, " Timing ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(34, "div", 17)(35, "div", 18)(36, "span", 19);
    i0.ɵɵtext(37, "Started");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(38, "span", 21);
    i0.ɵɵtext(39);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(40, "div", 18)(41, "span", 19);
    i0.ɵɵtext(42, "Completed");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(43, "span", 21);
    i0.ɵɵtext(44);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(45, "div", 18)(46, "span", 19);
    i0.ɵɵtext(47, "Duration");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(48, "span", 21);
    i0.ɵɵtext(49);
    i0.ɵɵelementEnd()()()();
    i0.ɵɵconditionalCreate(50, MCPLogDetailPanelComponent_Conditional_1_Conditional_50_Template, 10, 3, "div", 23);
    i0.ɵɵconditionalCreate(51, MCPLogDetailPanelComponent_Conditional_1_Conditional_51_Template, 10, 3, "div", 24);
    i0.ɵɵconditionalCreate(52, MCPLogDetailPanelComponent_Conditional_1_Conditional_52_Template, 10, 3, "div", 24);
    i0.ɵɵconditionalCreate(53, MCPLogDetailPanelComponent_Conditional_1_Conditional_53_Template, 10, 1, "div", 14);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(54, "div", 25);
    i0.ɵɵconditionalCreate(55, MCPLogDetailPanelComponent_Conditional_1_Conditional_55_Template, 3, 0, "button", 26);
    i0.ɵɵelementStart(56, "button", 27);
    i0.ɵɵlistener("click", function MCPLogDetailPanelComponent_Conditional_1_Template_button_click_56_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closePanel()); });
    i0.ɵɵtext(57, "Close");
    i0.ɵɵelementEnd()()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵstyleProp("width", ctx_r1.IsMobileMode ? null : ctx_r1.PanelWidth, "px");
    i0.ɵɵclassProp("mobile", ctx_r1.IsMobileMode)("resizing", ctx_r1.IsResizing);
    i0.ɵɵproperty("@slideIn", undefined);
    i0.ɵɵadvance();
    i0.ɵɵconditional(!ctx_r1.IsMobileMode ? 1 : -1);
    i0.ɵɵadvance(8);
    i0.ɵɵproperty("ngClass", ctx_r1.getStatusClass(ctx_r1.Log.Status));
    i0.ɵɵadvance();
    i0.ɵɵclassMap(ctx_r1.getStatusIcon(ctx_r1.Log.Status));
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(ctx_r1.Log.Status);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r1.Log.DurationMs ? 13 : -1);
    i0.ɵɵadvance(10);
    i0.ɵɵtextInterpolate(ctx_r1.Log.ToolName);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r1.Log.ServerName ? 24 : -1);
    i0.ɵɵadvance(5);
    i0.ɵɵtextInterpolate(ctx_r1.Log.ConnectionName);
    i0.ɵɵadvance(10);
    i0.ɵɵtextInterpolate(ctx_r1.formatDate(ctx_r1.Log.StartedAt));
    i0.ɵɵadvance(5);
    i0.ɵɵtextInterpolate(ctx_r1.formatDate(ctx_r1.Log.CompletedAt));
    i0.ɵɵadvance(5);
    i0.ɵɵtextInterpolate(ctx_r1.formatDuration(ctx_r1.Log.DurationMs));
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r1.Log.ErrorMessage ? 50 : -1);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r1.Log.InputArgs ? 51 : -1);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r1.Log.Result ? 52 : -1);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r1.Log.UserName ? 53 : -1);
    i0.ɵɵadvance(2);
    i0.ɵɵconditional(ctx_r1.Log.ToolID ? 55 : -1);
} }
export class MCPLogDetailPanelComponent {
    cdr;
    // ========================================
    // Inputs
    // ========================================
    Visible = false;
    Log = null;
    // ========================================
    // Outputs
    // ========================================
    Close = new EventEmitter();
    RunAgain = new EventEmitter();
    // ========================================
    // Expandable Sections State
    // ========================================
    InputArgsSection = { expanded: true };
    ResultSection = { expanded: true };
    ErrorSection = { expanded: true };
    // ========================================
    // Panel Width / Resize State
    // ========================================
    PANEL_WIDTH_SETTING_KEY = 'mcp-log-detail-panel/width';
    MIN_PANEL_WIDTH = 320;
    MAX_PANEL_WIDTH = 800;
    DEFAULT_PANEL_WIDTH = 500;
    MOBILE_BREAKPOINT = 768;
    PanelWidth = this.DEFAULT_PANEL_WIDTH;
    IsResizing = false;
    get IsMobileMode() {
        return typeof window !== 'undefined' && window.innerWidth <= this.MOBILE_BREAKPOINT;
    }
    widthPersistSubject = new Subject();
    destroy$ = new Subject();
    constructor(cdr) {
        this.cdr = cdr;
        this.widthPersistSubject.pipe(debounceTime(500), takeUntil(this.destroy$)).subscribe(width => {
            this.persistPanelWidth(width);
        });
    }
    ngOnInit() {
        this.loadSavedPanelWidth();
    }
    ngOnDestroy() {
        this.destroy$.next();
        this.destroy$.complete();
    }
    // ========================================
    // Panel Resize Handlers
    // ========================================
    onResizeStart(event) {
        if (this.IsMobileMode)
            return;
        event.preventDefault();
        this.IsResizing = true;
        document.body.style.cursor = 'ew-resize';
        document.body.style.userSelect = 'none';
    }
    onMouseMove(event) {
        if (!this.IsResizing)
            return;
        const newWidth = window.innerWidth - event.clientX;
        this.PanelWidth = Math.min(Math.max(newWidth, this.MIN_PANEL_WIDTH), Math.min(this.MAX_PANEL_WIDTH, window.innerWidth - 50));
        this.cdr.detectChanges();
    }
    onMouseUp() {
        if (this.IsResizing) {
            this.IsResizing = false;
            document.body.style.cursor = '';
            document.body.style.userSelect = '';
            this.widthPersistSubject.next(this.PanelWidth);
        }
    }
    onWindowResize() {
        if (this.IsMobileMode) {
            this.PanelWidth = window.innerWidth;
        }
        else if (this.PanelWidth > window.innerWidth - 50) {
            this.PanelWidth = Math.max(this.MIN_PANEL_WIDTH, window.innerWidth - 50);
        }
        this.cdr.detectChanges();
    }
    loadSavedPanelWidth() {
        if (this.IsMobileMode) {
            this.PanelWidth = window.innerWidth;
            return;
        }
        try {
            const savedWidth = UserInfoEngine.Instance.GetSetting(this.PANEL_WIDTH_SETTING_KEY);
            if (savedWidth) {
                const width = parseInt(savedWidth, 10);
                if (!isNaN(width) && width >= this.MIN_PANEL_WIDTH && width <= this.MAX_PANEL_WIDTH) {
                    this.PanelWidth = width;
                }
            }
        }
        catch (error) {
            console.warn('[MCPLogDetailPanel] Failed to load saved panel width:', error);
        }
    }
    async persistPanelWidth(width) {
        try {
            await UserInfoEngine.Instance.SetSetting(this.PANEL_WIDTH_SETTING_KEY, String(width));
        }
        catch (error) {
            console.warn('[MCPLogDetailPanel] Failed to persist panel width:', error);
        }
    }
    // ========================================
    // Actions
    // ========================================
    closePanel() {
        this.Close.emit();
    }
    onRunAgain() {
        if (this.Log?.ToolID && this.Log?.ConnectionID) {
            this.RunAgain.emit({
                toolId: this.Log.ToolID,
                connectionId: this.Log.ConnectionID
            });
        }
    }
    // ========================================
    // Section Toggle & Copy Actions
    // ========================================
    toggleSection(section) {
        section.expanded = !section.expanded;
        this.cdr.detectChanges();
    }
    async copyInputArgs() {
        await this.copyToClipboard(this.FormattedInputArgs, 'Input arguments copied to clipboard');
    }
    async copyResult() {
        await this.copyToClipboard(this.FormattedResult, 'Result copied to clipboard');
    }
    async copyError() {
        await this.copyToClipboard(this.Log?.ErrorMessage || '', 'Error message copied to clipboard');
    }
    async copyToClipboard(text, successMessage) {
        if (!text)
            return;
        try {
            await navigator.clipboard.writeText(text);
            // Could emit an event or show a toast here
            console.log(successMessage);
        }
        catch (error) {
            console.error('Failed to copy to clipboard:', error);
        }
    }
    // ========================================
    // Formatting Helpers
    // ========================================
    formatDate(date) {
        if (!date)
            return 'N/A';
        const d = typeof date === 'string' ? new Date(date) : date;
        return d.toLocaleString();
    }
    formatDuration(ms) {
        if (ms === null)
            return '-';
        if (ms < 1000)
            return `${ms}ms`;
        return `${(ms / 1000).toFixed(2)}s`;
    }
    formatJson(jsonString) {
        if (!jsonString)
            return '';
        try {
            const parsed = JSON.parse(jsonString);
            return JSON.stringify(parsed, null, 2);
        }
        catch {
            return jsonString;
        }
    }
    get FormattedInputArgs() {
        return this.formatJson(this.Log?.InputArgs);
    }
    get FormattedResult() {
        return this.formatJson(this.Log?.Result);
    }
    getStatusIcon(status) {
        switch (status) {
            case 'Success': return 'fa-solid fa-check-circle';
            case 'Error': return 'fa-solid fa-times-circle';
            case 'Running': return 'fa-solid fa-spinner fa-spin';
            default: return 'fa-solid fa-question-circle';
        }
    }
    getStatusClass(status) {
        switch (status) {
            case 'Success': return 'status-success';
            case 'Error': return 'status-error';
            case 'Running': return 'status-running';
            default: return 'status-unknown';
        }
    }
    static ɵfac = function MCPLogDetailPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MCPLogDetailPanelComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MCPLogDetailPanelComponent, selectors: [["mj-mcp-log-detail-panel"]], hostBindings: function MCPLogDetailPanelComponent_HostBindings(rf, ctx) { if (rf & 1) {
            i0.ɵɵlistener("mousemove", function MCPLogDetailPanelComponent_mousemove_HostBindingHandler($event) { return ctx.onMouseMove($event); }, i0.ɵɵresolveDocument)("mouseup", function MCPLogDetailPanelComponent_mouseup_HostBindingHandler() { return ctx.onMouseUp(); }, i0.ɵɵresolveDocument)("resize", function MCPLogDetailPanelComponent_resize_HostBindingHandler() { return ctx.onWindowResize(); }, i0.ɵɵresolveWindow);
        } }, inputs: { Visible: "Visible", Log: "Log" }, outputs: { Close: "Close", RunAgain: "RunAgain" }, standalone: false, decls: 2, vars: 2, consts: [[1, "panel-backdrop"], [1, "slide-out-panel", 3, "width", "mobile", "resizing"], [1, "panel-backdrop", 3, "click"], [1, "slide-out-panel"], ["title", "Drag to resize", 1, "resize-handle", 3, "active"], [1, "panel-header"], [1, "panel-title"], [1, "fa-solid", "fa-list-check"], ["title", "Close", 1, "close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "panel-content"], [1, "status-banner", 3, "ngClass"], [1, "status-text"], [1, "duration"], [1, "info-section"], [1, "section-title"], [1, "fa-solid", "fa-wrench"], [1, "info-card"], [1, "info-row"], [1, "info-label"], [1, "info-value", "tool-name"], [1, "info-value"], [1, "fa-solid", "fa-clock"], [1, "info-section", "error-section", "expandable-section"], [1, "info-section", "expandable-section"], [1, "panel-actions"], ["kendoButton", "", "themeColor", "primary"], ["kendoButton", "", "fillMode", "flat", 3, "click"], ["title", "Drag to resize", 1, "resize-handle", 3, "mousedown"], [1, "resize-grip"], [1, "section-header", "clickable", 3, "click"], [1, "section-title-row"], [1, "fa-solid", "fa-chevron-right", "expand-icon"], [1, "section-title", "error"], [1, "fa-solid", "fa-exclamation-triangle"], ["kendoButton", "", "fillMode", "flat", "size", "small", "title", "Copy error", 3, "click"], [1, "fa-solid", "fa-copy"], [1, "error-card"], [1, "error-message"], [1, "fa-solid", "fa-arrow-right-to-bracket"], ["kendoButton", "", "fillMode", "flat", "size", "small", "title", "Copy input arguments", 3, "click"], [1, "code-card"], [3, "ngModel", "language", "readonly"], [1, "fa-solid", "fa-arrow-right-from-bracket"], ["kendoButton", "", "fillMode", "flat", "size", "small", "title", "Copy result", 3, "click"], [1, "fa-solid", "fa-user"], ["kendoButton", "", "themeColor", "primary", 3, "click"], [1, "fa-solid", "fa-play"]], template: function MCPLogDetailPanelComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵconditionalCreate(0, MCPLogDetailPanelComponent_Conditional_0_Template, 1, 0, "div", 0);
            i0.ɵɵconditionalCreate(1, MCPLogDetailPanelComponent_Conditional_1_Template, 58, 24, "div", 1);
        } if (rf & 2) {
            i0.ɵɵconditional(ctx.Visible ? 0 : -1);
            i0.ɵɵadvance();
            i0.ɵɵconditional(ctx.Visible && ctx.Log ? 1 : -1);
        } }, dependencies: [i1.NgClass, i2.NgControlStatus, i2.NgModel, i3.ButtonComponent, i4.CodeEditorComponent], styles: ["\n\n\n\n\n\n\n.panel-backdrop[_ngcontent-%COMP%] {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.4);\n    z-index: 1000;\n    animation: _ngcontent-%COMP%_fadeIn 0.2s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n}\n\n\n\n\n\n.slide-out-panel[_ngcontent-%COMP%] {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    background: var(--mj-bg-surface);\n    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);\n    z-index: 1001;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n\n.slide-out-panel.mobile[_ngcontent-%COMP%] {\n    width: 100% !important;\n    left: 0;\n}\n\n.slide-out-panel.resizing[_ngcontent-%COMP%] {\n    user-select: none;\n    transition: none;\n}\n\n\n\n\n\n.resize-handle[_ngcontent-%COMP%] {\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    width: 6px;\n    cursor: ew-resize;\n    background: transparent;\n    z-index: 10;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: background 0.15s ease;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover, \n.resize-handle.active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.resize-grip[_ngcontent-%COMP%] {\n    width: 3px;\n    height: 40px;\n    background: var(--mj-border-strong);\n    border-radius: 2px;\n    opacity: 0;\n    transition: opacity 0.15s ease;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover   .resize-grip[_ngcontent-%COMP%], \n.resize-handle.active[_ngcontent-%COMP%]   .resize-grip[_ngcontent-%COMP%] {\n    opacity: 1;\n    background: var(--mj-brand-primary);\n}\n\n\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin: 0;\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.close-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    border: none;\n    background: transparent;\n    border-radius: 50%;\n    cursor: pointer;\n    color: var(--mj-text-muted);\n    transition: all 0.15s ease;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-primary);\n}\n\n.close-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 18px;\n}\n\n\n\n\n\n.panel-content[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 20px;\n}\n\n\n\n\n\n.status-banner[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 16px;\n    border-radius: 8px;\n    margin-bottom: 20px;\n    font-weight: 600;\n    font-size: 16px;\n}\n\n.status-banner.status-success[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-color-success-700);\n}\n\n.status-banner.status-success[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    color: var(--mj-status-success);\n}\n\n.status-banner.status-error[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.status-banner.status-error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    color: var(--mj-status-error);\n}\n\n.status-banner.status-running[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.status-banner.status-running[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    color: var(--mj-brand-primary);\n}\n\n.status-banner[_ngcontent-%COMP%]   .status-text[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.status-banner[_ngcontent-%COMP%]   .duration[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: normal;\n    background: rgba(0, 0, 0, 0.05);\n    padding: 4px 10px;\n    border-radius: 4px;\n}\n\n\n\n\n\n.info-section[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.section-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-brand-primary);\n}\n\n.section-title.error[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n}\n\n.section-title.error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n}\n\n\n\n\n\n.expandable-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 12px;\n}\n\n.expandable-section[_ngcontent-%COMP%]   .section-header.clickable[_ngcontent-%COMP%] {\n    cursor: pointer;\n    padding: 8px 12px;\n    margin: -8px -12px 12px -12px;\n    border-radius: 6px;\n    transition: background 0.15s ease;\n}\n\n.expandable-section[_ngcontent-%COMP%]   .section-header.clickable[_ngcontent-%COMP%]:hover {\n    background: rgba(0, 0, 0, 0.03);\n}\n\n.section-title-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    transition: transform 0.2s ease;\n}\n\n.expand-icon.expanded[_ngcontent-%COMP%] {\n    transform: rotate(90deg);\n}\n\n\n\n\n\n.info-card[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-default);\n    padding: 12px 16px;\n}\n\n.info-row[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 8px 0;\n    font-size: 14px;\n}\n\n.info-row[_ngcontent-%COMP%]:not(:last-child) {\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.info-label[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n}\n\n.info-value[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n.info-value.tool-name[_ngcontent-%COMP%] {\n    font-family: 'Consolas', 'Monaco', monospace;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    padding: 2px 8px;\n    border-radius: 4px;\n    color: var(--mj-brand-primary);\n}\n\n\n\n\n\n.error-card[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-status-error) 20%, transparent);\n    border-radius: 8px;\n    padding: 16px;\n}\n\n.error-message[_ngcontent-%COMP%] {\n    margin: 0;\n    font-family: monospace;\n    font-size: 13px;\n    line-height: 1.5;\n    color: var(--mj-status-error);\n    white-space: pre-wrap;\n    word-break: break-word;\n}\n\n\n\n\n\n.code-card[_ngcontent-%COMP%] {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n    height: 200px;\n}\n\n.code-card[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n}\n\n\n\n\n\n.panel-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    padding: 16px 20px;\n    background: var(--mj-bg-surface);\n    border-top: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.panel-actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n    min-width: 100px;\n}\n\n.panel-actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    margin-right: 6px;\n}\n\n\n\n\n\n@media (max-width: 768px) {\n    .slide-out-panel[_ngcontent-%COMP%] {\n        width: 100% !important;\n        left: 0;\n    }\n\n    .resize-handle[_ngcontent-%COMP%] {\n        display: none;\n    }\n\n    .panel-content[_ngcontent-%COMP%] {\n        padding: 16px;\n    }\n\n    .status-banner[_ngcontent-%COMP%] {\n        flex-wrap: wrap;\n    }\n\n    .panel-actions[_ngcontent-%COMP%] {\n        flex-wrap: wrap;\n    }\n\n    .panel-actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n        flex: 1;\n        min-width: 80px;\n    }\n\n    .code-card[_ngcontent-%COMP%] {\n        height: 150px;\n    }\n}"], data: { animation: [
                trigger('slideIn', [
                    transition(':enter', [
                        style({ transform: 'translateX(100%)', opacity: 0 }),
                        animate('250ms ease-out', style({ transform: 'translateX(0)', opacity: 1 }))
                    ]),
                    transition(':leave', [
                        animate('200ms ease-in', style({ transform: 'translateX(100%)', opacity: 0 }))
                    ])
                ])
            ] } });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MCPLogDetailPanelComponent, [{
        type: Component,
        args: [{ standalone: false, selector: 'mj-mcp-log-detail-panel', animations: [
                    trigger('slideIn', [
                        transition(':enter', [
                            style({ transform: 'translateX(100%)', opacity: 0 }),
                            animate('250ms ease-out', style({ transform: 'translateX(0)', opacity: 1 }))
                        ]),
                        transition(':leave', [
                            animate('200ms ease-in', style({ transform: 'translateX(100%)', opacity: 0 }))
                        ])
                    ])
                ], template: "<!-- Backdrop -->\n@if (Visible) {\n  <div class=\"panel-backdrop\" (click)=\"closePanel()\"></div>\n}\n\n<!-- Slide-out Panel -->\n@if (Visible && Log) {\n  <div class=\"slide-out-panel\"\n    @slideIn\n    [style.width.px]=\"IsMobileMode ? null : PanelWidth\"\n    [class.mobile]=\"IsMobileMode\"\n    [class.resizing]=\"IsResizing\">\n    <!-- Resize Handle -->\n    @if (!IsMobileMode) {\n      <div class=\"resize-handle\"\n        (mousedown)=\"onResizeStart($event)\"\n        [class.active]=\"IsResizing\"\n        title=\"Drag to resize\">\n        <div class=\"resize-grip\"></div>\n      </div>\n    }\n    <!-- Panel Header -->\n    <div class=\"panel-header\">\n      <h2 class=\"panel-title\">\n        <i class=\"fa-solid fa-list-check\"></i>\n        Execution Details\n      </h2>\n      <button class=\"close-btn\" (click)=\"closePanel()\" title=\"Close\">\n        <i class=\"fa-solid fa-times\"></i>\n      </button>\n    </div>\n    <!-- Panel Content -->\n    <div class=\"panel-content\">\n      <!-- Status Banner -->\n      <div class=\"status-banner\" [ngClass]=\"getStatusClass(Log.Status)\">\n        <i [class]=\"getStatusIcon(Log.Status)\"></i>\n        <span class=\"status-text\">{{ Log.Status }}</span>\n        @if (Log.DurationMs) {\n          <span class=\"duration\">{{ formatDuration(Log.DurationMs) }}</span>\n        }\n      </div>\n      <!-- Tool Info -->\n      <div class=\"info-section\">\n        <h3 class=\"section-title\">\n          <i class=\"fa-solid fa-wrench\"></i>\n          Tool\n        </h3>\n        <div class=\"info-card\">\n          <div class=\"info-row\">\n            <span class=\"info-label\">Name</span>\n            <span class=\"info-value tool-name\">{{ Log.ToolName }}</span>\n          </div>\n          @if (Log.ServerName) {\n            <div class=\"info-row\">\n              <span class=\"info-label\">Server</span>\n              <span class=\"info-value\">{{ Log.ServerName }}</span>\n            </div>\n          }\n          <div class=\"info-row\">\n            <span class=\"info-label\">Connection</span>\n            <span class=\"info-value\">{{ Log.ConnectionName }}</span>\n          </div>\n        </div>\n      </div>\n      <!-- Timing Info -->\n      <div class=\"info-section\">\n        <h3 class=\"section-title\">\n          <i class=\"fa-solid fa-clock\"></i>\n          Timing\n        </h3>\n        <div class=\"info-card\">\n          <div class=\"info-row\">\n            <span class=\"info-label\">Started</span>\n            <span class=\"info-value\">{{ formatDate(Log.StartedAt) }}</span>\n          </div>\n          <div class=\"info-row\">\n            <span class=\"info-label\">Completed</span>\n            <span class=\"info-value\">{{ formatDate(Log.CompletedAt) }}</span>\n          </div>\n          <div class=\"info-row\">\n            <span class=\"info-label\">Duration</span>\n            <span class=\"info-value\">{{ formatDuration(Log.DurationMs) }}</span>\n          </div>\n        </div>\n      </div>\n      <!-- Error Message (if any) -->\n      @if (Log.ErrorMessage) {\n        <div class=\"info-section error-section expandable-section\">\n          <div class=\"section-header clickable\" (click)=\"toggleSection(ErrorSection)\">\n            <div class=\"section-title-row\">\n              <i class=\"fa-solid fa-chevron-right expand-icon\" [class.expanded]=\"ErrorSection.expanded\"></i>\n              <h3 class=\"section-title error\">\n                <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                Error\n              </h3>\n            </div>\n            <button kendoButton fillMode=\"flat\" size=\"small\" (click)=\"copyError(); $event.stopPropagation()\" title=\"Copy error\">\n              <i class=\"fa-solid fa-copy\"></i>\n            </button>\n          </div>\n          @if (ErrorSection.expanded) {\n            <div class=\"error-card\">\n              <pre class=\"error-message\">{{ Log.ErrorMessage }}</pre>\n            </div>\n          }\n        </div>\n      }\n      <!-- Input Arguments -->\n      @if (Log.InputArgs) {\n        <div class=\"info-section expandable-section\">\n          <div class=\"section-header clickable\" (click)=\"toggleSection(InputArgsSection)\">\n            <div class=\"section-title-row\">\n              <i class=\"fa-solid fa-chevron-right expand-icon\" [class.expanded]=\"InputArgsSection.expanded\"></i>\n              <h3 class=\"section-title\">\n                <i class=\"fa-solid fa-arrow-right-to-bracket\"></i>\n                Input Arguments\n              </h3>\n            </div>\n            <button kendoButton fillMode=\"flat\" size=\"small\" (click)=\"copyInputArgs(); $event.stopPropagation()\" title=\"Copy input arguments\">\n              <i class=\"fa-solid fa-copy\"></i>\n            </button>\n          </div>\n          @if (InputArgsSection.expanded) {\n            <div class=\"code-card\">\n              <mj-code-editor\n                [ngModel]=\"FormattedInputArgs\"\n                [language]=\"'json'\"\n                [readonly]=\"true\">\n              </mj-code-editor>\n            </div>\n          }\n        </div>\n      }\n      <!-- Result -->\n      @if (Log.Result) {\n        <div class=\"info-section expandable-section\">\n          <div class=\"section-header clickable\" (click)=\"toggleSection(ResultSection)\">\n            <div class=\"section-title-row\">\n              <i class=\"fa-solid fa-chevron-right expand-icon\" [class.expanded]=\"ResultSection.expanded\"></i>\n              <h3 class=\"section-title\">\n                <i class=\"fa-solid fa-arrow-right-from-bracket\"></i>\n                Result\n              </h3>\n            </div>\n            <button kendoButton fillMode=\"flat\" size=\"small\" (click)=\"copyResult(); $event.stopPropagation()\" title=\"Copy result\">\n              <i class=\"fa-solid fa-copy\"></i>\n            </button>\n          </div>\n          @if (ResultSection.expanded) {\n            <div class=\"code-card\">\n              <mj-code-editor\n                [ngModel]=\"FormattedResult\"\n                [language]=\"'json'\"\n                [readonly]=\"true\">\n              </mj-code-editor>\n            </div>\n          }\n        </div>\n      }\n      <!-- User Info -->\n      @if (Log.UserName) {\n        <div class=\"info-section\">\n          <h3 class=\"section-title\">\n            <i class=\"fa-solid fa-user\"></i>\n            Executed By\n          </h3>\n          <div class=\"info-card\">\n            <div class=\"info-row\">\n              <span class=\"info-label\">User</span>\n              <span class=\"info-value\">{{ Log.UserName }}</span>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n    <!-- Panel Actions -->\n    <div class=\"panel-actions\">\n      @if (Log.ToolID) {\n        <button kendoButton themeColor=\"primary\" (click)=\"onRunAgain()\">\n          <i class=\"fa-solid fa-play\"></i>\n          Run Again\n        </button>\n      }\n      <button kendoButton fillMode=\"flat\" (click)=\"closePanel()\">Close</button>\n    </div>\n  </div>\n}\n", styles: ["/* MCP Log Detail Panel Styles */\n\n/* ========================================\n   Backdrop\n   ======================================== */\n.panel-backdrop {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.4);\n    z-index: 1000;\n    animation: fadeIn 0.2s ease-out;\n}\n\n@keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n}\n\n/* ========================================\n   Slide-Out Panel\n   ======================================== */\n.slide-out-panel {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    background: var(--mj-bg-surface);\n    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);\n    z-index: 1001;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n\n.slide-out-panel.mobile {\n    width: 100% !important;\n    left: 0;\n}\n\n.slide-out-panel.resizing {\n    user-select: none;\n    transition: none;\n}\n\n/* ========================================\n   Resize Handle\n   ======================================== */\n.resize-handle {\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    width: 6px;\n    cursor: ew-resize;\n    background: transparent;\n    z-index: 10;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: background 0.15s ease;\n}\n\n.resize-handle:hover,\n.resize-handle.active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.resize-grip {\n    width: 3px;\n    height: 40px;\n    background: var(--mj-border-strong);\n    border-radius: 2px;\n    opacity: 0;\n    transition: opacity 0.15s ease;\n}\n\n.resize-handle:hover .resize-grip,\n.resize-handle.active .resize-grip {\n    opacity: 1;\n    background: var(--mj-brand-primary);\n}\n\n/* ========================================\n   Panel Header\n   ======================================== */\n.panel-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.panel-title {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin: 0;\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.panel-title i {\n    color: var(--mj-brand-primary);\n}\n\n.close-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    border: none;\n    background: transparent;\n    border-radius: 50%;\n    cursor: pointer;\n    color: var(--mj-text-muted);\n    transition: all 0.15s ease;\n}\n\n.close-btn:hover {\n    background: var(--mj-bg-surface-card);\n    color: var(--mj-text-primary);\n}\n\n.close-btn i {\n    font-size: 18px;\n}\n\n/* ========================================\n   Panel Content\n   ======================================== */\n.panel-content {\n    flex: 1;\n    overflow-y: auto;\n    padding: 20px;\n}\n\n/* ========================================\n   Status Banner\n   ======================================== */\n.status-banner {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 16px;\n    border-radius: 8px;\n    margin-bottom: 20px;\n    font-weight: 600;\n    font-size: 16px;\n}\n\n.status-banner.status-success {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-color-success-700);\n}\n\n.status-banner.status-success i {\n    font-size: 24px;\n    color: var(--mj-status-success);\n}\n\n.status-banner.status-error {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.status-banner.status-error i {\n    font-size: 24px;\n    color: var(--mj-status-error);\n}\n\n.status-banner.status-running {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.status-banner.status-running i {\n    font-size: 24px;\n    color: var(--mj-brand-primary);\n}\n\n.status-banner .status-text {\n    flex: 1;\n}\n\n.status-banner .duration {\n    font-size: 14px;\n    font-weight: normal;\n    background: rgba(0, 0, 0, 0.05);\n    padding: 4px 10px;\n    border-radius: 4px;\n}\n\n/* ========================================\n   Info Sections\n   ======================================== */\n.info-section {\n    margin-bottom: 20px;\n}\n\n.section-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.section-title i {\n    font-size: 14px;\n    color: var(--mj-brand-primary);\n}\n\n.section-title.error {\n    color: var(--mj-status-error);\n}\n\n.section-title.error i {\n    color: var(--mj-status-error);\n}\n\n/* ========================================\n   Expandable Sections\n   ======================================== */\n.expandable-section .section-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 12px;\n}\n\n.expandable-section .section-header.clickable {\n    cursor: pointer;\n    padding: 8px 12px;\n    margin: -8px -12px 12px -12px;\n    border-radius: 6px;\n    transition: background 0.15s ease;\n}\n\n.expandable-section .section-header.clickable:hover {\n    background: rgba(0, 0, 0, 0.03);\n}\n\n.section-title-row {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.expand-icon {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    transition: transform 0.2s ease;\n}\n\n.expand-icon.expanded {\n    transform: rotate(90deg);\n}\n\n/* ========================================\n   Info Cards\n   ======================================== */\n.info-card {\n    background: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-default);\n    padding: 12px 16px;\n}\n\n.info-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 8px 0;\n    font-size: 14px;\n}\n\n.info-row:not(:last-child) {\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.info-label {\n    color: var(--mj-text-muted);\n}\n\n.info-value {\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n.info-value.tool-name {\n    font-family: 'Consolas', 'Monaco', monospace;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    padding: 2px 8px;\n    border-radius: 4px;\n    color: var(--mj-brand-primary);\n}\n\n/* ========================================\n   Error Card\n   ======================================== */\n.error-card {\n    background: color-mix(in srgb, var(--mj-status-error) 5%, var(--mj-bg-surface));\n    border: 1px solid color-mix(in srgb, var(--mj-status-error) 20%, transparent);\n    border-radius: 8px;\n    padding: 16px;\n}\n\n.error-message {\n    margin: 0;\n    font-family: monospace;\n    font-size: 13px;\n    line-height: 1.5;\n    color: var(--mj-status-error);\n    white-space: pre-wrap;\n    word-break: break-word;\n}\n\n/* ========================================\n   Code Card\n   ======================================== */\n.code-card {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n    height: 200px;\n}\n\n.code-card mj-code-editor {\n    width: 100%;\n    height: 100%;\n}\n\n/* ========================================\n   Panel Actions\n   ======================================== */\n.panel-actions {\n    display: flex;\n    gap: 8px;\n    padding: 16px 20px;\n    background: var(--mj-bg-surface);\n    border-top: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.panel-actions button {\n    min-width: 100px;\n}\n\n.panel-actions button i {\n    margin-right: 6px;\n}\n\n/* ========================================\n   Responsive / Mobile\n   ======================================== */\n@media (max-width: 768px) {\n    .slide-out-panel {\n        width: 100% !important;\n        left: 0;\n    }\n\n    .resize-handle {\n        display: none;\n    }\n\n    .panel-content {\n        padding: 16px;\n    }\n\n    .status-banner {\n        flex-wrap: wrap;\n    }\n\n    .panel-actions {\n        flex-wrap: wrap;\n    }\n\n    .panel-actions button {\n        flex: 1;\n        min-width: 80px;\n    }\n\n    .code-card {\n        height: 150px;\n    }\n}\n"] }]
    }], () => [{ type: i0.ChangeDetectorRef }], { Visible: [{
            type: Input
        }], Log: [{
            type: Input
        }], Close: [{
            type: Output
        }], RunAgain: [{
            type: Output
        }], onMouseMove: [{
            type: HostListener,
            args: ['document:mousemove', ['$event']]
        }], onMouseUp: [{
            type: HostListener,
            args: ['document:mouseup']
        }], onWindowResize: [{
            type: HostListener,
            args: ['window:resize']
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MCPLogDetailPanelComponent, { className: "MCPLogDetailPanelComponent", filePath: "src/MCP/components/mcp-log-detail-panel.component.ts", lineNumber: 48 }); })();
//# sourceMappingURL=mcp-log-detail-panel.component.js.map