@memberjunction/ng-dashboards 3.3.0 → 3.4.0

package/dist/MCP/components/mcp-test-tool-dialog.component.js

@@ -0,0 +1,1300 @@
+/**
+ * @fileoverview MCP Test Tool Slide-Out Panel Component
+ *
+ * Provides a beautiful UX for testing MCP tools with:
+ * - Server/Connection/Tool selection
+ * - Dynamic parameter input UI based on JSON Schema
+ * - Tool execution with results display
+ * - User settings caching via UserInfoEngine
+ * - Resizable slide-out panel with width persistence
+ */
+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 { GraphQLDataProvider, gql } from '@memberjunction/graphql-dataprovider';
+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 "@progress/kendo-angular-dropdowns";
+import * as i5 from "@progress/kendo-angular-inputs";
+import * as i6 from "@memberjunction/ng-code-editor";
+const _forTrack0 = ($index, $item) => $item.name;
+function MCPTestToolDialogComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 2);
+    i0.ɵɵlistener("click", function MCPTestToolDialogComponent_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeDialog()); });
+    i0.ɵɵelementEnd();
+} }
+function MCPTestToolDialogComponent_div_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 19);
+    i0.ɵɵlistener("mousedown", function MCPTestToolDialogComponent_div_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", 20);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("active", ctx_r1.IsResizing);
+} }
+function MCPTestToolDialogComponent_div_1_div_27_ng_template_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 37)(1, "span", 38);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 39);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const dataItem_r6 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(dataItem_r6.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap("status-" + dataItem_r6.Status.toLowerCase());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", dataItem_r6.Status, " ");
+} }
+function MCPTestToolDialogComponent_div_1_div_27_ng_template_17_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 40);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const dataItem_r7 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(dataItem_r7.Description);
+} }
+function MCPTestToolDialogComponent_div_1_div_27_ng_template_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 37)(1, "span", 38);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(3, MCPTestToolDialogComponent_div_1_div_27_ng_template_17_Conditional_3_Template, 2, 1, "span", 40);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const dataItem_r7 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(dataItem_r7.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(dataItem_r7.Description ? 3 : -1);
+} }
+function MCPTestToolDialogComponent_div_1_div_27_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 31);
+    i0.ɵɵtext(1, "Select a server first");
+    i0.ɵɵelementEnd();
+} }
+function MCPTestToolDialogComponent_div_1_div_27_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 32);
+    i0.ɵɵelement(1, "i", 41);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.NoConnectionsWarning, " ");
+} }
+function MCPTestToolDialogComponent_div_1_div_27_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 33);
+    i0.ɵɵelement(1, "i", 42);
+    i0.ɵɵtext(2, " Auto-selected (only connection available) ");
+    i0.ɵɵelementEnd();
+} }
+function MCPTestToolDialogComponent_div_1_div_27_ng_template_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const dataItem_r8 = ctx.$implicit;
+    i0.ɵɵtextInterpolate1(" ", (dataItem_r8 == null ? null : dataItem_r8.ToolTitle) || (dataItem_r8 == null ? null : dataItem_r8.ToolName) || "Select a tool...", " ");
+} }
+function MCPTestToolDialogComponent_div_1_div_27_ng_template_29_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 40);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const dataItem_r9 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(dataItem_r9.ToolDescription);
+} }
+function MCPTestToolDialogComponent_div_1_div_27_ng_template_29_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 43)(1, "span", 38);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(3, MCPTestToolDialogComponent_div_1_div_27_ng_template_29_Conditional_3_Template, 2, 1, "span", 40);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const dataItem_r9 = ctx.$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(dataItem_r9.ToolTitle || dataItem_r9.ToolName);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(dataItem_r9.ToolDescription ? 3 : -1);
+} }
+function MCPTestToolDialogComponent_div_1_div_27_Conditional_30_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 31);
+    i0.ɵɵtext(1, "Select a server first");
+    i0.ɵɵelementEnd();
+} }
+function MCPTestToolDialogComponent_div_1_div_27_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 21)(1, "div", 22)(2, "div", 23)(3, "label", 24);
+    i0.ɵɵelement(4, "i", 25);
+    i0.ɵɵtext(5, " Server ");
+    i0.ɵɵelementStart(6, "span", 26);
+    i0.ɵɵtext(7, "*");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "kendo-dropdownlist", 27);
+    i0.ɵɵtwoWayListener("ngModelChange", function MCPTestToolDialogComponent_div_1_div_27_Template_kendo_dropdownlist_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.ServerID, $event) || (ctx_r1.ServerID = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("valueChange", function MCPTestToolDialogComponent_div_1_div_27_Template_kendo_dropdownlist_valueChange_8_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onServerChange()); })("filterChange", function MCPTestToolDialogComponent_div_1_div_27_Template_kendo_dropdownlist_filterChange_8_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onServerFilterChange($event)); });
+    i0.ɵɵtemplate(9, MCPTestToolDialogComponent_div_1_div_27_ng_template_9_Template, 5, 4, "ng-template", 28);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(10, "div", 23)(11, "label", 24);
+    i0.ɵɵelement(12, "i", 29);
+    i0.ɵɵtext(13, " Connection ");
+    i0.ɵɵelementStart(14, "span", 26);
+    i0.ɵɵtext(15, "*");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(16, "kendo-dropdownlist", 30);
+    i0.ɵɵtwoWayListener("ngModelChange", function MCPTestToolDialogComponent_div_1_div_27_Template_kendo_dropdownlist_ngModelChange_16_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.ConnectionID, $event) || (ctx_r1.ConnectionID = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("valueChange", function MCPTestToolDialogComponent_div_1_div_27_Template_kendo_dropdownlist_valueChange_16_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onConnectionChange()); })("filterChange", function MCPTestToolDialogComponent_div_1_div_27_Template_kendo_dropdownlist_filterChange_16_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onConnectionFilterChange($event)); });
+    i0.ɵɵtemplate(17, MCPTestToolDialogComponent_div_1_div_27_ng_template_17_Template, 4, 2, "ng-template", 28);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(18, MCPTestToolDialogComponent_div_1_div_27_Conditional_18_Template, 2, 0, "span", 31)(19, MCPTestToolDialogComponent_div_1_div_27_Conditional_19_Template, 3, 1, "span", 32)(20, MCPTestToolDialogComponent_div_1_div_27_Conditional_20_Template, 3, 0, "span", 33);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(21, "div", 23)(22, "label", 24);
+    i0.ɵɵelement(23, "i", 34);
+    i0.ɵɵtext(24, " Tool ");
+    i0.ɵɵelementStart(25, "span", 26);
+    i0.ɵɵtext(26, "*");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(27, "kendo-dropdownlist", 35);
+    i0.ɵɵtwoWayListener("ngModelChange", function MCPTestToolDialogComponent_div_1_div_27_Template_kendo_dropdownlist_ngModelChange_27_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.ToolID, $event) || (ctx_r1.ToolID = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("valueChange", function MCPTestToolDialogComponent_div_1_div_27_Template_kendo_dropdownlist_valueChange_27_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onToolChange()); })("filterChange", function MCPTestToolDialogComponent_div_1_div_27_Template_kendo_dropdownlist_filterChange_27_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onToolFilterChange($event)); });
+    i0.ɵɵtemplate(28, MCPTestToolDialogComponent_div_1_div_27_ng_template_28_Template, 1, 1, "ng-template", 36)(29, MCPTestToolDialogComponent_div_1_div_27_ng_template_29_Template, 4, 2, "ng-template", 28);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(30, MCPTestToolDialogComponent_div_1_div_27_Conditional_30_Template, 2, 0, "span", 31);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(8);
+    i0.ɵɵproperty("data", ctx_r1.DisplayServers)("textField", "Name")("valueField", "ID")("valuePrimitive", true);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.ServerID);
+    i0.ɵɵproperty("filterable", true);
+    i0.ɵɵadvance(8);
+    i0.ɵɵproperty("data", ctx_r1.DisplayConnections)("textField", "Name")("valueField", "ID")("valuePrimitive", true);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.ConnectionID);
+    i0.ɵɵproperty("disabled", !ctx_r1.ServerID || ctx_r1.NoConnectionsWarning !== null)("filterable", true);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(!ctx_r1.ServerID ? 18 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.NoConnectionsWarning ? 19 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.FilteredConnections.length === 1 && ctx_r1.ConnectionID ? 20 : -1);
+    i0.ɵɵadvance(7);
+    i0.ɵɵproperty("data", ctx_r1.DisplayTools)("textField", "ToolTitle")("valueField", "ID")("valuePrimitive", true);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.ToolID);
+    i0.ɵɵproperty("disabled", !ctx_r1.ServerID)("filterable", true);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(!ctx_r1.ServerID ? 30 : -1);
+} }
+function MCPTestToolDialogComponent_div_1_div_28_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 47);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.SelectedTool == null ? null : ctx_r1.SelectedTool.ToolDescription);
+} }
+function MCPTestToolDialogComponent_div_1_div_28_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 50);
+    i0.ɵɵelement(1, "i", 52);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "This tool requires no parameters.");
+    i0.ɵɵelementEnd()();
+} }
+function MCPTestToolDialogComponent_div_1_div_28_Conditional_15_For_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 26);
+    i0.ɵɵtext(1, "*");
+    i0.ɵɵelementEnd();
+} }
+function MCPTestToolDialogComponent_div_1_div_28_Conditional_15_For_4_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 57);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const config_r10 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(config_r10.description);
+} }
+function MCPTestToolDialogComponent_div_1_div_28_Conditional_15_For_4_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dropdownlist", 61);
+    i0.ɵɵtwoWayListener("ngModelChange", function MCPTestToolDialogComponent_div_1_div_28_Conditional_15_For_4_Conditional_5_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r11); const config_r10 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r1.ParameterValues[config_r10.name], $event) || (ctx_r1.ParameterValues[config_r10.name] = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("valueChange", function MCPTestToolDialogComponent_div_1_div_28_Conditional_15_For_4_Conditional_5_Template_kendo_dropdownlist_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r11); const config_r10 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onParameterChange(config_r10.name, $event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const config_r10 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("data", config_r10.enumValues)("valuePrimitive", true);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.ParameterValues[config_r10.name]);
+} }
+function MCPTestToolDialogComponent_div_1_div_28_Conditional_15_For_4_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 59)(1, "input", 62);
+    i0.ɵɵlistener("change", function MCPTestToolDialogComponent_div_1_div_28_Conditional_15_For_4_Conditional_6_Template_input_change_1_listener($event) { i0.ɵɵrestoreView(_r12); const config_r10 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onParameterChange(config_r10.name, $event.target.checked)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "label", 63);
+    i0.ɵɵtext(3, "Enabled");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const config_r10 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("id", "param-" + config_r10.name)("checked", ctx_r1.ParameterValues[config_r10.name]);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("for", "param-" + config_r10.name);
+} }
+function MCPTestToolDialogComponent_div_1_div_28_Conditional_15_For_4_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-numerictextbox", 64);
+    i0.ɵɵtwoWayListener("ngModelChange", function MCPTestToolDialogComponent_div_1_div_28_Conditional_15_For_4_Conditional_7_Template_kendo_numerictextbox_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r13); const config_r10 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r1.ParameterValues[config_r10.name], $event) || (ctx_r1.ParameterValues[config_r10.name] = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("valueChange", function MCPTestToolDialogComponent_div_1_div_28_Conditional_15_For_4_Conditional_7_Template_kendo_numerictextbox_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r13); const config_r10 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onParameterChange(config_r10.name, $event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const config_r10 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("format", config_r10.type === "integer" ? "n0" : "n")("step", config_r10.type === "integer" ? 1 : 0.1);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.ParameterValues[config_r10.name]);
+} }
+function MCPTestToolDialogComponent_div_1_div_28_Conditional_15_For_4_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "textarea", 65);
+    i0.ɵɵlistener("input", function MCPTestToolDialogComponent_div_1_div_28_Conditional_15_For_4_Conditional_8_Template_textarea_input_0_listener($event) { i0.ɵɵrestoreView(_r14); const config_r10 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onTextareaChange(config_r10.name, $event.target.value, config_r10)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(1, "span", 31);
+    i0.ɵɵtext(2, "Enter valid JSON");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const config_r10 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵpropertyInterpolate1("placeholder", "Enter JSON ", config_r10.type, "...");
+    i0.ɵɵproperty("value", ctx_r1.getTextareaValue(config_r10.name));
+} }
+function MCPTestToolDialogComponent_div_1_div_28_Conditional_15_For_4_Conditional_9_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "textarea", 68);
+    i0.ɵɵtwoWayListener("ngModelChange", function MCPTestToolDialogComponent_div_1_div_28_Conditional_15_For_4_Conditional_9_Conditional_0_Template_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r15); const config_r10 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r1.ParameterValues[config_r10.name], $event) || (ctx_r1.ParameterValues[config_r10.name] = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("input", function MCPTestToolDialogComponent_div_1_div_28_Conditional_15_For_4_Conditional_9_Conditional_0_Template_textarea_input_0_listener($event) { i0.ɵɵrestoreView(_r15); const config_r10 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onParameterChange(config_r10.name, $event.target.value)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const config_r10 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.ParameterValues[config_r10.name]);
+    i0.ɵɵproperty("placeholder", config_r10.description || "Enter value...");
+} }
+function MCPTestToolDialogComponent_div_1_div_28_Conditional_15_For_4_Conditional_9_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-textbox", 69);
+    i0.ɵɵtwoWayListener("ngModelChange", function MCPTestToolDialogComponent_div_1_div_28_Conditional_15_For_4_Conditional_9_Conditional_1_Template_kendo_textbox_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r16); const config_r10 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r1.ParameterValues[config_r10.name], $event) || (ctx_r1.ParameterValues[config_r10.name] = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("valueChange", function MCPTestToolDialogComponent_div_1_div_28_Conditional_15_For_4_Conditional_9_Conditional_1_Template_kendo_textbox_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r16); const config_r10 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onParameterChange(config_r10.name, $event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const config_r10 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.ParameterValues[config_r10.name]);
+    i0.ɵɵproperty("placeholder", config_r10.description || "Enter value...");
+} }
+function MCPTestToolDialogComponent_div_1_div_28_Conditional_15_For_4_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, MCPTestToolDialogComponent_div_1_div_28_Conditional_15_For_4_Conditional_9_Conditional_0_Template, 1, 2, "textarea", 66)(1, MCPTestToolDialogComponent_div_1_div_28_Conditional_15_For_4_Conditional_9_Conditional_1_Template, 1, 2, "kendo-textbox", 67);
+} if (rf & 2) {
+    const config_r10 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵconditional(ctx_r1.isTextarea(config_r10) ? 0 : 1);
+} }
+function MCPTestToolDialogComponent_div_1_div_28_Conditional_15_For_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 55)(1, "label", 56);
+    i0.ɵɵtext(2);
+    i0.ɵɵtemplate(3, MCPTestToolDialogComponent_div_1_div_28_Conditional_15_For_4_Conditional_3_Template, 2, 0, "span", 26);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(4, MCPTestToolDialogComponent_div_1_div_28_Conditional_15_For_4_Conditional_4_Template, 2, 1, "p", 57)(5, MCPTestToolDialogComponent_div_1_div_28_Conditional_15_For_4_Conditional_5_Template, 1, 3, "kendo-dropdownlist", 58)(6, MCPTestToolDialogComponent_div_1_div_28_Conditional_15_For_4_Conditional_6_Template, 4, 3, "div", 59)(7, MCPTestToolDialogComponent_div_1_div_28_Conditional_15_For_4_Conditional_7_Template, 1, 3, "kendo-numerictextbox", 60)(8, MCPTestToolDialogComponent_div_1_div_28_Conditional_15_For_4_Conditional_8_Template, 3, 3)(9, MCPTestToolDialogComponent_div_1_div_28_Conditional_15_For_4_Conditional_9_Template, 2, 1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const config_r10 = ctx.$implicit;
+    i0.ɵɵclassProp("required", config_r10.required);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", config_r10.name, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(config_r10.required ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(config_r10.description ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(config_r10.enumValues.length > 0 ? 5 : config_r10.type === "boolean" ? 6 : config_r10.type === "number" || config_r10.type === "integer" ? 7 : config_r10.type === "array" || config_r10.type === "object" ? 8 : 9);
+} }
+function MCPTestToolDialogComponent_div_1_div_28_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 51)(1, "h4", 53);
+    i0.ɵɵtext(2, "Parameters");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(3, MCPTestToolDialogComponent_div_1_div_28_Conditional_15_For_4_Template, 10, 6, "div", 54, _forTrack0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r1.ParameterConfigs);
+} }
+function MCPTestToolDialogComponent_div_1_div_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 21)(1, "div", 44)(2, "div", 45)(3, "h3", 46);
+    i0.ɵɵelement(4, "i", 34);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(6, MCPTestToolDialogComponent_div_1_div_28_Conditional_6_Template, 2, 1, "p", 47);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 48)(8, "span", 49);
+    i0.ɵɵelement(9, "i", 25);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "span", 49);
+    i0.ɵɵelement(12, "i", 29);
+    i0.ɵɵtext(13);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵtemplate(14, MCPTestToolDialogComponent_div_1_div_28_Conditional_14_Template, 4, 0, "div", 50)(15, MCPTestToolDialogComponent_div_1_div_28_Conditional_15_Template, 5, 0, "div", 51);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1(" ", (ctx_r1.SelectedTool == null ? null : ctx_r1.SelectedTool.ToolTitle) || (ctx_r1.SelectedTool == null ? null : ctx_r1.SelectedTool.ToolName), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((ctx_r1.SelectedTool == null ? null : ctx_r1.SelectedTool.ToolDescription) ? 6 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.SelectedServerName, " ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.SelectedConnectionName, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.ParameterConfigs.length === 0 ? 14 : 15);
+} }
+function MCPTestToolDialogComponent_div_1_div_29_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 52);
+    i0.ɵɵelementStart(1, "span", 80);
+    i0.ɵɵtext(2, "Execution Successful");
+    i0.ɵɵelementEnd();
+} }
+function MCPTestToolDialogComponent_div_1_div_29_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 81);
+    i0.ɵɵelementStart(1, "span", 80);
+    i0.ɵɵtext(2, "Execution Failed");
+    i0.ɵɵelementEnd();
+} }
+function MCPTestToolDialogComponent_div_1_div_29_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 73);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("", ctx_r1.ExecutionResult == null ? null : ctx_r1.ExecutionResult.DurationMs, "ms");
+} }
+function MCPTestToolDialogComponent_div_1_div_29_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 78)(1, "h4");
+    i0.ɵɵelement(2, "i", 41);
+    i0.ɵɵtext(3, " Error");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "pre", 82);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.ExecutionResult == null ? null : ctx_r1.ExecutionResult.ErrorMessage);
+} }
+function MCPTestToolDialogComponent_div_1_div_29_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 79)(1, "div", 83)(2, "h4");
+    i0.ɵɵelement(3, "i", 84);
+    i0.ɵɵtext(4, " Result");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 85);
+    i0.ɵɵlistener("click", function MCPTestToolDialogComponent_div_1_div_29_Conditional_23_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.copyResult()); });
+    i0.ɵɵelement(6, "i", 86);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 87);
+    i0.ɵɵelement(8, "mj-code-editor", 88);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(8);
+    i0.ɵɵproperty("ngModel", ctx_r1.FormattedResult)("language", "json")("readonly", true);
+} }
+function MCPTestToolDialogComponent_div_1_div_29_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 70)(1, "div", 71)(2, "div", 72);
+    i0.ɵɵtemplate(3, MCPTestToolDialogComponent_div_1_div_29_Conditional_3_Template, 3, 0)(4, MCPTestToolDialogComponent_div_1_div_29_Conditional_4_Template, 3, 0)(5, MCPTestToolDialogComponent_div_1_div_29_Conditional_5_Template, 2, 1, "span", 73);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 74)(7, "div", 75)(8, "span", 76);
+    i0.ɵɵtext(9, "Tool:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "span", 77);
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(12, "div", 75)(13, "span", 76);
+    i0.ɵɵtext(14, "Server:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "span", 77);
+    i0.ɵɵtext(16);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(17, "div", 75)(18, "span", 76);
+    i0.ɵɵtext(19, "Connection:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(20, "span", 77);
+    i0.ɵɵtext(21);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵtemplate(22, MCPTestToolDialogComponent_div_1_div_29_Conditional_22_Template, 6, 1, "div", 78)(23, MCPTestToolDialogComponent_div_1_div_29_Conditional_23_Template, 9, 3, "div", 79);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("success", ctx_r1.ExecutionResult == null ? null : ctx_r1.ExecutionResult.Success)("error", !(ctx_r1.ExecutionResult == null ? null : ctx_r1.ExecutionResult.Success));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((ctx_r1.ExecutionResult == null ? null : ctx_r1.ExecutionResult.Success) ? 3 : 4);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional((ctx_r1.ExecutionResult == null ? null : ctx_r1.ExecutionResult.DurationMs) ? 5 : -1);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r1.SelectedToolName);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.SelectedServerName);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.SelectedConnectionName);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((ctx_r1.ExecutionResult == null ? null : ctx_r1.ExecutionResult.ErrorMessage) ? 22 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((ctx_r1.ExecutionResult == null ? null : ctx_r1.ExecutionResult.Result) ? 23 : -1);
+} }
+function MCPTestToolDialogComponent_div_1_Case_31_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 89);
+    i0.ɵɵlistener("click", function MCPTestToolDialogComponent_div_1_Case_31_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.proceedToConfig()); });
+    i0.ɵɵelement(1, "i", 90);
+    i0.ɵɵtext(2, " Next ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 91);
+    i0.ɵɵlistener("click", function MCPTestToolDialogComponent_div_1_Case_31_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.closeDialog()); });
+    i0.ɵɵtext(4, "Cancel");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("disabled", !ctx_r1.CanProceedToConfig);
+} }
+function MCPTestToolDialogComponent_div_1_Case_32_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 93);
+    i0.ɵɵtext(1, " Executing... ");
+} }
+function MCPTestToolDialogComponent_div_1_Case_32_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 94);
+    i0.ɵɵtext(1, " Execute Tool ");
+} }
+function MCPTestToolDialogComponent_div_1_Case_32_Template(rf, ctx) { if (rf & 1) {
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 89);
+    i0.ɵɵlistener("click", function MCPTestToolDialogComponent_div_1_Case_32_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.executeTool()); });
+    i0.ɵɵtemplate(1, MCPTestToolDialogComponent_div_1_Case_32_Conditional_1_Template, 2, 0)(2, MCPTestToolDialogComponent_div_1_Case_32_Conditional_2_Template, 2, 0);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 91);
+    i0.ɵɵlistener("click", function MCPTestToolDialogComponent_div_1_Case_32_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.goBack()); });
+    i0.ɵɵelement(4, "i", 92);
+    i0.ɵɵtext(5, " Back ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("disabled", !ctx_r1.IsValid || ctx_r1.IsExecuting);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.IsExecuting ? 1 : 2);
+} }
+function MCPTestToolDialogComponent_div_1_Case_33_Template(rf, ctx) { if (rf & 1) {
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 95);
+    i0.ɵɵlistener("click", function MCPTestToolDialogComponent_div_1_Case_33_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.runAgain()); });
+    i0.ɵɵelement(1, "i", 96);
+    i0.ɵɵtext(2, " Run Again ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 91);
+    i0.ɵɵlistener("click", function MCPTestToolDialogComponent_div_1_Case_33_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.goBack()); });
+    i0.ɵɵelement(4, "i", 92);
+    i0.ɵɵtext(5, " Edit Parameters ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 91);
+    i0.ɵɵlistener("click", function MCPTestToolDialogComponent_div_1_Case_33_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.closeDialog()); });
+    i0.ɵɵtext(7, "Close");
+    i0.ɵɵelementEnd();
+} }
+function MCPTestToolDialogComponent_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 3);
+    i0.ɵɵtemplate(1, MCPTestToolDialogComponent_div_1_Conditional_1_Template, 2, 2, "div", 4);
+    i0.ɵɵelementStart(2, "div", 5)(3, "h2", 6);
+    i0.ɵɵelement(4, "i", 7);
+    i0.ɵɵtext(5, " Test MCP Tool ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 8);
+    i0.ɵɵlistener("click", function MCPTestToolDialogComponent_div_1_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeDialog()); });
+    i0.ɵɵelement(7, "i", 9);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 10)(9, "div", 11)(10, "span", 12);
+    i0.ɵɵtext(11, "1");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "span", 13);
+    i0.ɵɵtext(13, "Select Tool");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(14, "div", 14);
+    i0.ɵɵelementStart(15, "div", 11)(16, "span", 12);
+    i0.ɵɵtext(17, "2");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "span", 13);
+    i0.ɵɵtext(19, "Configure");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(20, "div", 14);
+    i0.ɵɵelementStart(21, "div", 11)(22, "span", 12);
+    i0.ɵɵtext(23, "3");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(24, "span", 13);
+    i0.ɵɵtext(25, "Results");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(26, "div", 15);
+    i0.ɵɵtemplate(27, MCPTestToolDialogComponent_div_1_div_27_Template, 31, 24, "div", 16)(28, MCPTestToolDialogComponent_div_1_div_28_Template, 16, 5, "div", 16)(29, MCPTestToolDialogComponent_div_1_div_29_Template, 24, 11, "div", 17);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(30, "div", 18);
+    i0.ɵɵtemplate(31, MCPTestToolDialogComponent_div_1_Case_31_Template, 5, 1)(32, MCPTestToolDialogComponent_div_1_Case_32_Template, 6, 2)(33, MCPTestToolDialogComponent_div_1_Case_33_Template, 8, 0);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    let tmp_16_0;
+    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.ɵɵclassProp("active", ctx_r1.CurrentStep === "select")("completed", ctx_r1.CurrentStep !== "select");
+    i0.ɵɵadvance(5);
+    i0.ɵɵclassProp("completed", ctx_r1.CurrentStep !== "select");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("active", ctx_r1.CurrentStep === "configure")("completed", ctx_r1.CurrentStep === "results");
+    i0.ɵɵadvance(5);
+    i0.ɵɵclassProp("completed", ctx_r1.CurrentStep === "results");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("active", ctx_r1.CurrentStep === "results");
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("ngIf", ctx_r1.CurrentStep === "select");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.CurrentStep === "configure");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.CurrentStep === "results");
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional((tmp_16_0 = ctx_r1.CurrentStep) === "select" ? 31 : tmp_16_0 === "configure" ? 32 : tmp_16_0 === "results" ? 33 : -1);
+} }
+/**
+ * GraphQL mutation for executing MCP tool
+ */
+const ExecuteMCPToolMutation = gql `
+    mutation ExecuteMCPTool($input: ExecuteMCPToolInput!) {
+        ExecuteMCPTool(input: $input) {
+            Success
+            ErrorMessage
+            Result
+            DurationMs
+        }
+    }
+`;
+export class MCPTestToolDialogComponent {
+    cdr;
+    elementRef;
+    // ========================================
+    // Inputs
+    // ========================================
+    Visible = false;
+    Servers = [];
+    Connections = [];
+    Tools = [];
+    /** Pre-selected server ID */
+    SelectedServerID = null;
+    /** Pre-selected connection ID */
+    SelectedConnectionID = null;
+    /** Pre-selected tool ID */
+    SelectedToolID = null;
+    // ========================================
+    // Outputs
+    // ========================================
+    Close = new EventEmitter();
+    // ========================================
+    // State
+    // ========================================
+    /** Current step: 'select' | 'configure' | 'results' */
+    CurrentStep = 'select';
+    /** Selected IDs */
+    ServerID = null;
+    ConnectionID = null;
+    ToolID = null;
+    /** Filtered lists based on selection */
+    FilteredConnections = [];
+    FilteredTools = [];
+    /** Display lists for dropdowns (filtered by search) */
+    DisplayServers = [];
+    DisplayConnections = [];
+    DisplayTools = [];
+    /** No connections warning */
+    NoConnectionsWarning = null;
+    /** Selected tool details */
+    SelectedTool = null;
+    ParameterConfigs = [];
+    ParameterValues = {};
+    /** Execution state */
+    IsExecuting = false;
+    ExecutionResult = null;
+    ExecutionError = null;
+    /** User settings key prefix */
+    SETTINGS_PREFIX = 'mcp-tool-test/';
+    // ========================================
+    // Panel Width / Resize State
+    // ========================================
+    /** Panel width settings key */
+    PANEL_WIDTH_SETTING_KEY = 'mcp-test-tool-panel/width';
+    /** Panel width constraints */
+    MIN_PANEL_WIDTH = 320;
+    MAX_PANEL_WIDTH = 900;
+    DEFAULT_PANEL_WIDTH = 700;
+    MOBILE_BREAKPOINT = 768;
+    /** Current panel width in pixels */
+    PanelWidth = this.DEFAULT_PANEL_WIDTH;
+    /** Whether user is currently resizing */
+    IsResizing = false;
+    /** Whether panel should be full-width (mobile mode) */
+    get IsMobileMode() {
+        return typeof window !== 'undefined' && window.innerWidth <= this.MOBILE_BREAKPOINT;
+    }
+    /** Subject for debounced width persistence */
+    widthPersistSubject = new Subject();
+    destroy$ = new Subject();
+    gqlProvider = GraphQLDataProvider.Instance;
+    constructor(cdr, elementRef) {
+        this.cdr = cdr;
+        this.elementRef = elementRef;
+        // Debounce width persistence to avoid excessive writes
+        this.widthPersistSubject.pipe(debounceTime(500), takeUntil(this.destroy$)).subscribe(width => {
+            this.persistPanelWidth(width);
+        });
+    }
+    ngOnInit() {
+        // Load saved panel width
+        this.loadSavedPanelWidth();
+        // Initialize display arrays
+        this.DisplayServers = [...this.Servers];
+        // Apply pre-selected values
+        if (this.SelectedServerID) {
+            this.ServerID = this.SelectedServerID;
+            this.onServerChange();
+        }
+        if (this.SelectedConnectionID) {
+            this.ConnectionID = this.SelectedConnectionID;
+            this.onConnectionChange();
+        }
+        if (this.SelectedToolID) {
+            this.ToolID = this.SelectedToolID;
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    // ========================================
+    // Selection Handlers
+    // ========================================
+    onServerChange() {
+        this.NoConnectionsWarning = null;
+        // Filter connections by selected server
+        if (this.ServerID) {
+            this.FilteredConnections = this.Connections.filter(c => c.MCPServerID === this.ServerID && c.Status === 'Active');
+            // Filter tools by selected server
+            this.FilteredTools = this.Tools.filter(t => t.MCPServerID === this.ServerID && t.Status === 'Active');
+            // Check if server requires authentication
+            const server = this.Servers.find(s => s.ID === this.ServerID);
+            const serverRequiresAuth = server?.Status === 'Active'; // All servers currently need connections
+            // Auto-select connection logic
+            if (this.FilteredConnections.length === 0) {
+                this.ConnectionID = null;
+                if (serverRequiresAuth) {
+                    this.NoConnectionsWarning = 'No active connections available for this server. Please create a connection first.';
+                }
+            }
+            else if (this.FilteredConnections.length === 1) {
+                // Auto-select the only connection
+                this.ConnectionID = this.FilteredConnections[0].ID;
+            }
+            else {
+                // Select the first connection by default
+                this.ConnectionID = this.FilteredConnections[0].ID;
+            }
+        }
+        else {
+            this.FilteredConnections = [];
+            this.FilteredTools = [];
+            this.ConnectionID = null;
+        }
+        // Update display arrays for filtering
+        this.DisplayConnections = [...this.FilteredConnections];
+        this.DisplayTools = [...this.FilteredTools];
+        // Reset tool selection
+        this.ToolID = null;
+        this.cdr.detectChanges();
+    }
+    onConnectionChange() {
+        // Connection changed - tools are filtered by server, not connection
+        this.cdr.detectChanges();
+    }
+    onToolChange() {
+        this.cdr.detectChanges();
+    }
+    // ========================================
+    // Dropdown Filter Handlers
+    // ========================================
+    /**
+     * Handle server dropdown filter change
+     */
+    onServerFilterChange(filter) {
+        const filterLower = (filter || '').toLowerCase();
+        this.DisplayServers = this.Servers.filter(s => s.Name.toLowerCase().includes(filterLower) ||
+            (s.Description?.toLowerCase().includes(filterLower) ?? false));
+    }
+    /**
+     * Handle connection dropdown filter change
+     */
+    onConnectionFilterChange(filter) {
+        const filterLower = (filter || '').toLowerCase();
+        this.DisplayConnections = this.FilteredConnections.filter(c => c.Name.toLowerCase().includes(filterLower) ||
+            (c.Description?.toLowerCase().includes(filterLower) ?? false));
+    }
+    /**
+     * Handle tool dropdown filter change
+     */
+    onToolFilterChange(filter) {
+        const filterLower = (filter || '').toLowerCase();
+        this.DisplayTools = this.FilteredTools.filter(t => t.ToolName.toLowerCase().includes(filterLower) ||
+            (t.ToolTitle?.toLowerCase().includes(filterLower) ?? false) ||
+            (t.ToolDescription?.toLowerCase().includes(filterLower) ?? false));
+    }
+    /**
+     * Can proceed to configuration step
+     */
+    get CanProceedToConfig() {
+        return this.ServerID != null && this.ConnectionID != null && this.ToolID != null;
+    }
+    /**
+     * Proceed to configuration step
+     */
+    async proceedToConfig() {
+        if (!this.CanProceedToConfig)
+            return;
+        this.SelectedTool = this.Tools.find(t => t.ID === this.ToolID) || null;
+        if (!this.SelectedTool)
+            return;
+        // Parse input schema and create parameter configs
+        this.parseInputSchema();
+        // Load cached parameter values
+        await this.loadCachedParameters();
+        this.CurrentStep = 'configure';
+        this.cdr.detectChanges();
+    }
+    /**
+     * Parse the tool's input schema to create parameter configurations
+     */
+    parseInputSchema() {
+        if (!this.SelectedTool?.InputSchema) {
+            this.ParameterConfigs = [];
+            return;
+        }
+        try {
+            const schema = JSON.parse(this.SelectedTool.InputSchema);
+            const properties = schema.properties || {};
+            const required = schema.required || [];
+            this.ParameterConfigs = Object.entries(properties).map(([name, prop]) => {
+                const propDef = prop;
+                return {
+                    name,
+                    type: this.normalizeType(propDef.type),
+                    description: propDef.description || '',
+                    required: required.includes(name),
+                    defaultValue: propDef.default,
+                    enumValues: propDef.enum || [],
+                    format: propDef.format || null,
+                    minimum: propDef.minimum,
+                    maximum: propDef.maximum
+                };
+            });
+            // Sort: required first, then alphabetically
+            this.ParameterConfigs.sort((a, b) => {
+                if (a.required !== b.required)
+                    return a.required ? -1 : 1;
+                return a.name.localeCompare(b.name);
+            });
+            // Initialize parameter values with defaults
+            this.ParameterValues = {};
+            for (const config of this.ParameterConfigs) {
+                if (config.defaultValue !== undefined) {
+                    this.ParameterValues[config.name] = config.defaultValue;
+                }
+                else {
+                    this.ParameterValues[config.name] = this.getDefaultForType(config.type);
+                }
+            }
+        }
+        catch (error) {
+            console.error('Failed to parse input schema:', error);
+            this.ParameterConfigs = [];
+        }
+    }
+    /**
+     * Normalize JSON Schema type to string
+     */
+    normalizeType(type) {
+        if (!type)
+            return 'string';
+        if (Array.isArray(type)) {
+            // Filter out 'null' and take first type
+            const nonNull = type.filter(t => t !== 'null');
+            return nonNull.length > 0 ? nonNull[0] : 'string';
+        }
+        return type;
+    }
+    /**
+     * Get default value for a type
+     */
+    getDefaultForType(type) {
+        switch (type) {
+            case 'string': return '';
+            case 'number':
+            case 'integer': return null;
+            case 'boolean': return false;
+            case 'array': return [];
+            case 'object': return {};
+            default: return '';
+        }
+    }
+    /**
+     * Load cached parameter values from UserInfoEngine
+     */
+    async loadCachedParameters() {
+        if (!this.SelectedTool)
+            return;
+        const settingKey = this.getSettingKey();
+        const engine = UserInfoEngine.Instance;
+        const cachedValue = engine.GetSetting(settingKey);
+        if (cachedValue) {
+            try {
+                const cached = JSON.parse(cachedValue);
+                // Merge cached values with defaults (cached takes precedence)
+                this.ParameterValues = { ...this.ParameterValues, ...cached };
+            }
+            catch (error) {
+                console.warn('Failed to parse cached parameters:', error);
+            }
+        }
+    }
+    /**
+     * Save current parameter values to cache
+     */
+    async saveCachedParameters() {
+        if (!this.SelectedTool)
+            return;
+        const settingKey = this.getSettingKey();
+        const engine = UserInfoEngine.Instance;
+        try {
+            await engine.SetSetting(settingKey, JSON.stringify(this.ParameterValues));
+        }
+        catch (error) {
+            console.warn('Failed to save cached parameters:', error);
+        }
+    }
+    /**
+     * Get the setting key for caching parameters
+     */
+    getSettingKey() {
+        return `${this.SETTINGS_PREFIX}${this.ServerID}/${this.ToolID}`;
+    }
+    // ========================================
+    // Parameter Input Helpers
+    // ========================================
+    /**
+     * Get input type for a parameter
+     */
+    getInputType(config) {
+        if (config.enumValues.length > 0)
+            return 'select';
+        if (config.format === 'date')
+            return 'date';
+        if (config.format === 'date-time')
+            return 'datetime-local';
+        if (config.format === 'email')
+            return 'email';
+        if (config.format === 'uri' || config.format === 'url')
+            return 'url';
+        switch (config.type) {
+            case 'boolean': return 'checkbox';
+            case 'integer':
+            case 'number': return 'number';
+            case 'array':
+            case 'object': return 'textarea';
+            default: return 'text';
+        }
+    }
+    /**
+     * Check if parameter should use textarea
+     */
+    isTextarea(config) {
+        return config.type === 'array' || config.type === 'object' ||
+            (config.description != null && config.description.length > 100);
+    }
+    /**
+     * Handle parameter value change
+     */
+    onParameterChange(name, value) {
+        this.ParameterValues[name] = value;
+    }
+    /**
+     * Get parameter value as string for textarea display
+     */
+    getTextareaValue(name) {
+        const value = this.ParameterValues[name];
+        if (value === null || value === undefined)
+            return '';
+        if (typeof value === 'object')
+            return JSON.stringify(value, null, 2);
+        return String(value);
+    }
+    /**
+     * Handle textarea change - parse JSON if needed
+     */
+    onTextareaChange(name, value, config) {
+        if (config.type === 'array' || config.type === 'object') {
+            try {
+                this.ParameterValues[name] = JSON.parse(value || (config.type === 'array' ? '[]' : '{}'));
+            }
+            catch {
+                // Keep as string if not valid JSON
+                this.ParameterValues[name] = value;
+            }
+        }
+        else {
+            this.ParameterValues[name] = value;
+        }
+    }
+    // ========================================
+    // Execution
+    // ========================================
+    /**
+     * Validate that all required parameters have values
+     */
+    get IsValid() {
+        for (const config of this.ParameterConfigs) {
+            if (config.required) {
+                const value = this.ParameterValues[config.name];
+                if (value === null || value === undefined || value === '') {
+                    return false;
+                }
+            }
+        }
+        return true;
+    }
+    /**
+     * Execute the tool
+     */
+    async executeTool() {
+        if (!this.IsValid || !this.ConnectionID || !this.ToolID)
+            return;
+        this.IsExecuting = true;
+        this.ExecutionError = null;
+        this.cdr.detectChanges();
+        // Save parameters before execution
+        await this.saveCachedParameters();
+        // Build input arguments, filtering out empty optional values
+        const inputArgs = {};
+        for (const config of this.ParameterConfigs) {
+            const value = this.ParameterValues[config.name];
+            if (config.required || (value !== null && value !== undefined && value !== '')) {
+                inputArgs[config.name] = value;
+            }
+        }
+        try {
+            const result = await this.gqlProvider.ExecuteGQL(ExecuteMCPToolMutation, {
+                input: {
+                    ConnectionID: this.ConnectionID,
+                    ToolID: this.ToolID,
+                    ToolName: this.SelectedTool?.ToolName,
+                    InputArgs: JSON.stringify(inputArgs)
+                }
+            });
+            this.ExecutionResult = result?.ExecuteMCPTool || {
+                Success: false,
+                ErrorMessage: 'No result returned from server'
+            };
+            this.CurrentStep = 'results';
+        }
+        catch (error) {
+            this.ExecutionError = error instanceof Error ? error.message : String(error);
+            this.ExecutionResult = {
+                Success: false,
+                ErrorMessage: this.ExecutionError
+            };
+            this.CurrentStep = 'results';
+        }
+        finally {
+            this.IsExecuting = false;
+            this.cdr.detectChanges();
+        }
+    }
+    // ========================================
+    // Results Helpers
+    // ========================================
+    /**
+     * Format the result for display
+     */
+    get FormattedResult() {
+        if (!this.ExecutionResult?.Result)
+            return '';
+        try {
+            if (typeof this.ExecutionResult.Result === 'string') {
+                // Try to parse as JSON for pretty printing
+                const parsed = JSON.parse(this.ExecutionResult.Result);
+                return JSON.stringify(parsed, null, 2);
+            }
+            return JSON.stringify(this.ExecutionResult.Result, null, 2);
+        }
+        catch {
+            return String(this.ExecutionResult.Result);
+        }
+    }
+    /**
+     * Check if result is JSON
+     */
+    get IsResultJson() {
+        if (!this.ExecutionResult?.Result)
+            return false;
+        try {
+            if (typeof this.ExecutionResult.Result === 'string') {
+                JSON.parse(this.ExecutionResult.Result);
+            }
+            return typeof this.ExecutionResult.Result === 'object';
+        }
+        catch {
+            return false;
+        }
+    }
+    /**
+     * Copy result to clipboard
+     */
+    async copyResult() {
+        if (!this.FormattedResult)
+            return;
+        try {
+            await navigator.clipboard.writeText(this.FormattedResult);
+        }
+        catch (error) {
+            console.error('Failed to copy to clipboard:', error);
+        }
+    }
+    // ========================================
+    // Navigation
+    // ========================================
+    /**
+     * Go back to previous step
+     */
+    goBack() {
+        if (this.CurrentStep === 'results') {
+            this.CurrentStep = 'configure';
+        }
+        else if (this.CurrentStep === 'configure') {
+            this.CurrentStep = 'select';
+        }
+        this.cdr.detectChanges();
+    }
+    /**
+     * Run the tool again with same parameters
+     */
+    async runAgain() {
+        this.CurrentStep = 'configure';
+        this.ExecutionResult = null;
+        this.ExecutionError = null;
+        this.cdr.detectChanges();
+    }
+    /**
+     * Close the dialog
+     */
+    closeDialog() {
+        this.Close.emit();
+    }
+    // ========================================
+    // Panel Resize Handlers
+    // ========================================
+    /**
+     * Start resize operation
+     */
+    onResizeStart(event) {
+        if (this.IsMobileMode)
+            return; // No resize on mobile
+        event.preventDefault();
+        this.IsResizing = true;
+        document.body.style.cursor = 'ew-resize';
+        document.body.style.userSelect = 'none';
+    }
+    /**
+     * Handle mouse move during resize
+     */
+    onMouseMove(event) {
+        if (!this.IsResizing)
+            return;
+        // Calculate width from right edge of viewport to cursor
+        const newWidth = window.innerWidth - event.clientX;
+        // Clamp to bounds
+        this.PanelWidth = Math.min(Math.max(newWidth, this.MIN_PANEL_WIDTH), Math.min(this.MAX_PANEL_WIDTH, window.innerWidth - 50) // Leave 50px margin
+        );
+        this.cdr.detectChanges();
+    }
+    /**
+     * End resize operation
+     */
+    onMouseUp() {
+        if (this.IsResizing) {
+            this.IsResizing = false;
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+            // Persist panel width (debounced)
+            this.widthPersistSubject.next(this.PanelWidth);
+        }
+    }
+    /**
+     * Handle window resize for mobile mode
+     */
+    onWindowResize() {
+        // In mobile mode, always use full width
+        if (this.IsMobileMode) {
+            this.PanelWidth = window.innerWidth;
+        }
+        else {
+            // Ensure panel doesn't exceed viewport
+            if (this.PanelWidth > window.innerWidth - 50) {
+                this.PanelWidth = Math.max(this.MIN_PANEL_WIDTH, window.innerWidth - 50);
+            }
+        }
+        this.cdr.detectChanges();
+    }
+    /**
+     * Load saved panel width from user settings
+     */
+    loadSavedPanelWidth() {
+        // In mobile mode, always use full width
+        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('[MCPTestToolPanel] Failed to load saved panel width:', error);
+        }
+    }
+    /**
+     * Persist panel width to user settings
+     */
+    async persistPanelWidth(width) {
+        try {
+            await UserInfoEngine.Instance.SetSetting(this.PANEL_WIDTH_SETTING_KEY, String(width));
+        }
+        catch (error) {
+            console.warn('[MCPTestToolPanel] Failed to persist panel width:', error);
+        }
+    }
+    /**
+     * Get display name for selected server
+     */
+    get SelectedServerName() {
+        const server = this.Servers.find(s => s.ID === this.ServerID);
+        return server?.Name || '';
+    }
+    /**
+     * Get display name for selected connection
+     */
+    get SelectedConnectionName() {
+        const connection = this.Connections.find(c => c.ID === this.ConnectionID);
+        return connection?.Name || '';
+    }
+    /**
+     * Get display name for selected tool
+     */
+    get SelectedToolName() {
+        return this.SelectedTool?.ToolTitle || this.SelectedTool?.ToolName || '';
+    }
+    static ɵfac = function MCPTestToolDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MCPTestToolDialogComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ElementRef)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MCPTestToolDialogComponent, selectors: [["mj-mcp-test-tool-dialog"]], hostBindings: function MCPTestToolDialogComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("mousemove", function MCPTestToolDialogComponent_mousemove_HostBindingHandler($event) { return ctx.onMouseMove($event); }, false, i0.ɵɵresolveDocument)("mouseup", function MCPTestToolDialogComponent_mouseup_HostBindingHandler() { return ctx.onMouseUp(); }, false, i0.ɵɵresolveDocument)("resize", function MCPTestToolDialogComponent_resize_HostBindingHandler() { return ctx.onWindowResize(); }, false, i0.ɵɵresolveWindow);
+        } }, inputs: { Visible: "Visible", Servers: "Servers", Connections: "Connections", Tools: "Tools", SelectedServerID: "SelectedServerID", SelectedConnectionID: "SelectedConnectionID", SelectedToolID: "SelectedToolID" }, outputs: { Close: "Close" }, decls: 2, vars: 2, consts: [[1, "panel-backdrop"], ["class", "slide-out-panel", 3, "width", "mobile", "resizing", 4, "ngIf"], [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-flask"], ["title", "Close", 1, "close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "step-indicator"], [1, "step"], [1, "step-number"], [1, "step-label"], [1, "step-connector"], [1, "panel-content"], ["class", "step-content", 4, "ngIf"], ["class", "step-content results-step", 4, "ngIf"], [1, "panel-actions"], ["title", "Drag to resize", 1, "resize-handle", 3, "mousedown"], [1, "resize-grip"], [1, "step-content"], [1, "selection-form"], [1, "form-group"], [1, "form-label"], [1, "fa-solid", "fa-server"], [1, "required"], ["placeholder", "Select a server...", 3, "ngModelChange", "valueChange", "filterChange", "data", "textField", "valueField", "valuePrimitive", "ngModel", "filterable"], ["kendoDropDownListItemTemplate", ""], [1, "fa-solid", "fa-link"], ["placeholder", "Select a connection...", 3, "ngModelChange", "valueChange", "filterChange", "data", "textField", "valueField", "valuePrimitive", "ngModel", "disabled", "filterable"], [1, "field-hint"], [1, "field-error"], [1, "field-hint", "auto-selected"], [1, "fa-solid", "fa-wrench"], ["placeholder", "Select a tool...", 3, "ngModelChange", "valueChange", "filterChange", "data", "textField", "valueField", "valuePrimitive", "ngModel", "disabled", "filterable"], ["kendoDropDownListValueTemplate", ""], [1, "dropdown-item"], [1, "item-name"], [1, "item-status"], [1, "item-description"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "fa-solid", "fa-check"], [1, "dropdown-item", "tool-item"], [1, "tool-header"], [1, "tool-info"], [1, "tool-name"], [1, "tool-description"], [1, "tool-context"], [1, "context-item"], [1, "no-params"], [1, "parameters-form"], [1, "fa-solid", "fa-check-circle"], [1, "params-title"], [1, "param-group", 3, "required"], [1, "param-group"], [1, "param-label"], [1, "param-description"], [3, "data", "valuePrimitive", "ngModel"], [1, "checkbox-wrapper"], [3, "format", "step", "ngModel"], [3, "ngModelChange", "valueChange", "data", "valuePrimitive", "ngModel"], ["type", "checkbox", 3, "change", "id", "checked"], [3, "for"], [3, "ngModelChange", "valueChange", "format", "step", "ngModel"], ["rows", "4", 1, "json-input", 3, "input", "value", "placeholder"], ["rows", "3", 1, "text-input", 3, "ngModel", "placeholder"], [3, "ngModel", "placeholder"], ["rows", "3", 1, "text-input", 3, "ngModelChange", "input", "ngModel", "placeholder"], [3, "ngModelChange", "valueChange", "ngModel", "placeholder"], [1, "step-content", "results-step"], [1, "results-container"], [1, "result-header"], [1, "duration"], [1, "execution-info"], [1, "info-row"], [1, "info-label"], [1, "info-value"], [1, "error-panel"], [1, "result-panel", "fill-space"], [1, "result-status"], [1, "fa-solid", "fa-times-circle"], [1, "error-message"], [1, "result-panel-header"], [1, "fa-solid", "fa-code"], ["kendoButton", "", "fillMode", "flat", "title", "Copy to clipboard", 3, "click"], [1, "fa-solid", "fa-copy"], [1, "code-editor-container"], [3, "ngModel", "language", "readonly"], ["kendoButton", "", "themeColor", "primary", 3, "click", "disabled"], [1, "fa-solid", "fa-arrow-right"], ["kendoButton", "", "fillMode", "flat", 3, "click"], [1, "fa-solid", "fa-arrow-left"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-play"], ["kendoButton", "", "themeColor", "primary", 3, "click"], [1, "fa-solid", "fa-redo"]], template: function MCPTestToolDialogComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, MCPTestToolDialogComponent_Conditional_0_Template, 1, 0, "div", 0)(1, MCPTestToolDialogComponent_div_1_Template, 34, 26, "div", 1);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.Visible ? 0 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.Visible);
+        } }, dependencies: [i1.NgIf, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel, i3.ButtonComponent, i4.ItemTemplateDirective, i4.ValueTemplateDirective, i4.DropDownListComponent, i5.TextBoxComponent, i5.NumericTextBoxComponent, i6.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: white;\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: rgba(33, 150, 243, 0.1);\n}\n\n.resize-grip[_ngcontent-%COMP%] {\n    width: 3px;\n    height: 40px;\n    background: #ccc;\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-primary-color, #2196f3);\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: white;\n    border-bottom: 1px solid #e0e0e0;\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-color, #333);\n}\n\n.panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-primary-color, #2196f3);\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: #666;\n    transition: all 0.15s ease;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n    background: #f5f5f5;\n    color: #333;\n}\n\n.close-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 18px;\n}\n\n\n\n\n\n.step-indicator[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 16px 20px;\n    background: #fafafa;\n    border-bottom: 1px solid #e0e0e0;\n    flex-shrink: 0;\n}\n\n.step[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    opacity: 0.5;\n    transition: opacity 0.2s ease;\n}\n\n.step.active[_ngcontent-%COMP%], \n.step.completed[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.step-number[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    border-radius: 50%;\n    background: #e0e0e0;\n    color: #666;\n    font-weight: 600;\n    font-size: 13px;\n    transition: all 0.2s ease;\n}\n\n.step.active[_ngcontent-%COMP%]   .step-number[_ngcontent-%COMP%] {\n    background: var(--mj-primary-color, #2196f3);\n    color: white;\n}\n\n.step.completed[_ngcontent-%COMP%]   .step-number[_ngcontent-%COMP%] {\n    background: #4caf50;\n    color: white;\n}\n\n.step-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-color, #333);\n}\n\n.step-connector[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 2px;\n    background: #e0e0e0;\n    margin: 0 10px;\n    transition: background 0.2s ease;\n}\n\n.step-connector.completed[_ngcontent-%COMP%] {\n    background: #4caf50;\n}\n\n\n\n\n\n.panel-content[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 20px;\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n}\n\n.step-content[_ngcontent-%COMP%] {\n    min-height: 100%;\n}\n\n.step-content.results-step[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n\n\n\n\n\n.selection-form[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n}\n\n.form-group[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.form-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--mj-text-color, #333);\n}\n\n.form-label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-primary-color, #2196f3);\n    font-size: 14px;\n}\n\n.required[_ngcontent-%COMP%] {\n    color: #f44336;\n    font-weight: 600;\n}\n\n.field-hint[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--mj-text-secondary-color, #666);\n    font-style: italic;\n    margin-top: 4px;\n}\n\n.field-hint.auto-selected[_ngcontent-%COMP%] {\n    color: #4caf50;\n    font-style: normal;\n}\n\n.field-hint.auto-selected[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 11px;\n}\n\n.field-error[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: #f44336;\n    margin-top: 4px;\n    padding: 8px 10px;\n    background: rgba(244, 67, 54, 0.08);\n    border-radius: 4px;\n    border: 1px solid rgba(244, 67, 54, 0.2);\n}\n\n.field-error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 13px;\n}\n\n\n\n.dropdown-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    padding: 4px 0;\n}\n\n.dropdown-item.tool-item[_ngcontent-%COMP%] {\n    max-width: 100%;\n}\n\n.item-name[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--mj-text-color, #333);\n}\n\n.item-description[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-secondary-color, #666);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 100%;\n}\n\n.item-status[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n}\n\n.item-status.status-active[_ngcontent-%COMP%] {\n    color: #4caf50;\n}\n\n.item-status.status-inactive[_ngcontent-%COMP%] {\n    color: #9e9e9e;\n}\n\n\n\n\n\n.tool-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    padding: 16px;\n    background: linear-gradient(135deg, rgba(33, 150, 243, 0.08), rgba(33, 150, 243, 0.02));\n    border-radius: 8px;\n    margin-bottom: 20px;\n    border: 1px solid rgba(33, 150, 243, 0.15);\n}\n\n.tool-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.tool-name[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin: 0 0 8px 0;\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--mj-text-color, #333);\n}\n\n.tool-name[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-primary-color, #2196f3);\n}\n\n.tool-description[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 13px;\n    color: var(--mj-text-secondary-color, #666);\n    line-height: 1.5;\n}\n\n.tool-context[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    align-items: flex-end;\n    flex-shrink: 0;\n}\n\n.context-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--mj-text-secondary-color, #666);\n}\n\n.context-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: #999;\n}\n\n\n\n\n\n.no-params[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px 20px;\n    text-align: center;\n    color: var(--mj-text-secondary-color, #666);\n}\n\n.no-params[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    color: #4caf50;\n    margin-bottom: 16px;\n}\n\n.no-params[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 15px;\n}\n\n.params-title[_ngcontent-%COMP%] {\n    margin: 0 0 16px 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-secondary-color, #666);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.parameters-form[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n.param-group[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    padding: 12px;\n    background: #fafafa;\n    border-radius: 6px;\n    border: 1px solid #e8e8e8;\n}\n\n.param-group.required[_ngcontent-%COMP%] {\n    border-left: 3px solid var(--mj-primary-color, #2196f3);\n}\n\n.param-label[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-color, #333);\n}\n\n.param-description[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 12px;\n    color: var(--mj-text-secondary-color, #666);\n    line-height: 1.4;\n}\n\n.checkbox-wrapper[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 4px 0;\n}\n\n.checkbox-wrapper[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n    width: 18px;\n    height: 18px;\n    cursor: pointer;\n}\n\n.checkbox-wrapper[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-text-color, #333);\n    cursor: pointer;\n}\n\n.json-input[_ngcontent-%COMP%], \n.text-input[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 10px 12px;\n    font-family: 'Consolas', 'Monaco', monospace;\n    font-size: 13px;\n    line-height: 1.5;\n    border: 1px solid #ddd;\n    border-radius: 4px;\n    background: white;\n    resize: vertical;\n    box-sizing: border-box;\n}\n\n.json-input[_ngcontent-%COMP%]:focus, \n.text-input[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-primary-color, #2196f3);\n    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);\n}\n\n\n\n\n\n.results-container[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    flex: 1;\n    min-height: 0;\n}\n\n.result-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 16px;\n    border-radius: 8px;\n    font-weight: 600;\n}\n\n.result-header.success[_ngcontent-%COMP%] {\n    background: rgba(76, 175, 80, 0.1);\n    color: #388e3c;\n}\n\n.result-header.success[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    color: #4caf50;\n}\n\n.result-header.error[_ngcontent-%COMP%] {\n    background: rgba(244, 67, 54, 0.1);\n    color: #c62828;\n}\n\n.result-header.error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    color: #f44336;\n}\n\n.result-status[_ngcontent-%COMP%] {\n    flex: 1;\n    font-size: 16px;\n}\n\n.duration[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: normal;\n    color: var(--mj-text-secondary-color, #666);\n    background: rgba(0, 0, 0, 0.05);\n    padding: 4px 8px;\n    border-radius: 4px;\n}\n\n.error-panel[_ngcontent-%COMP%] {\n    background: #fff5f5;\n    border: 1px solid rgba(244, 67, 54, 0.2);\n    border-radius: 8px;\n    padding: 16px;\n}\n\n.error-panel[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin: 0 0 12px 0;\n    font-size: 14px;\n    color: #c62828;\n}\n\n.error-message[_ngcontent-%COMP%] {\n    margin: 0;\n    padding: 12px;\n    background: white;\n    border-radius: 4px;\n    font-family: monospace;\n    font-size: 13px;\n    line-height: 1.5;\n    color: #c62828;\n    white-space: pre-wrap;\n    word-break: break-word;\n}\n\n.result-panel[_ngcontent-%COMP%] {\n    background: white;\n    border: 1px solid #e0e0e0;\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.result-panel.fill-space[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    min-height: 200px;\n}\n\n.result-panel-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 12px 16px;\n    background: #fafafa;\n    border-bottom: 1px solid #e0e0e0;\n}\n\n.result-panel-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin: 0;\n    font-size: 14px;\n    color: var(--mj-text-color, #333);\n}\n\n.code-editor-container[_ngcontent-%COMP%] {\n    height: 300px;\n    min-height: 200px;\n    max-height: 400px;\n    overflow: hidden;\n}\n\n.result-panel.fill-space[_ngcontent-%COMP%]   .code-editor-container[_ngcontent-%COMP%] {\n    flex: 1;\n    height: auto;\n    max-height: none;\n}\n\n.code-editor-container[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n}\n\n.execution-info[_ngcontent-%COMP%] {\n    padding: 16px;\n    background: #fafafa;\n    border-radius: 8px;\n    border: 1px solid #e8e8e8;\n}\n\n.info-row[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    padding: 6px 0;\n    font-size: 13px;\n}\n\n.info-row[_ngcontent-%COMP%]:not(:last-child) {\n    border-bottom: 1px solid #e8e8e8;\n}\n\n.info-label[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary-color, #666);\n}\n\n.info-value[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--mj-text-color, #333);\n}\n\n\n\n\n\n.panel-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    padding: 16px 20px;\n    background: white;\n    border-top: 1px solid #e0e0e0;\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    .step-indicator[_ngcontent-%COMP%] {\n        padding: 12px 16px;\n    }\n\n    .step-connector[_ngcontent-%COMP%] {\n        width: 20px;\n        margin: 0 6px;\n    }\n\n    .step-label[_ngcontent-%COMP%] {\n        display: none;\n    }\n\n    .panel-content[_ngcontent-%COMP%] {\n        padding: 16px;\n    }\n\n    .tool-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        gap: 12px;\n    }\n\n    .tool-context[_ngcontent-%COMP%] {\n        align-items: flex-start;\n        flex-direction: row;\n        flex-wrap: wrap;\n        gap: 12px;\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\n@media (max-width: 480px) {\n    .panel-header[_ngcontent-%COMP%] {\n        padding: 12px 16px;\n    }\n\n    .panel-title[_ngcontent-%COMP%] {\n        font-size: 16px;\n    }\n\n    .step-number[_ngcontent-%COMP%] {\n        width: 24px;\n        height: 24px;\n        font-size: 12px;\n    }\n\n    .tool-name[_ngcontent-%COMP%] {\n        font-size: 16px;\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(MCPTestToolDialogComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-mcp-test-tool-dialog', 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)=\"closeDialog()\"></div>\n}\n\n<!-- Slide-out Panel -->\n<div class=\"slide-out-panel\"\n     *ngIf=\"Visible\"\n     @slideIn\n     [style.width.px]=\"IsMobileMode ? null : PanelWidth\"\n     [class.mobile]=\"IsMobileMode\"\n     [class.resizing]=\"IsResizing\">\n\n    <!-- Resize Handle (left edge) -->\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\n    <!-- Panel Header -->\n    <div class=\"panel-header\">\n        <h2 class=\"panel-title\">\n            <i class=\"fa-solid fa-flask\"></i>\n            Test MCP Tool\n        </h2>\n        <button class=\"close-btn\" (click)=\"closeDialog()\" title=\"Close\">\n            <i class=\"fa-solid fa-times\"></i>\n        </button>\n    </div>\n\n    <!-- Step Indicator -->\n    <div class=\"step-indicator\">\n        <div class=\"step\" [class.active]=\"CurrentStep === 'select'\" [class.completed]=\"CurrentStep !== 'select'\">\n            <span class=\"step-number\">1</span>\n            <span class=\"step-label\">Select Tool</span>\n        </div>\n        <div class=\"step-connector\" [class.completed]=\"CurrentStep !== 'select'\"></div>\n        <div class=\"step\" [class.active]=\"CurrentStep === 'configure'\" [class.completed]=\"CurrentStep === 'results'\">\n            <span class=\"step-number\">2</span>\n            <span class=\"step-label\">Configure</span>\n        </div>\n        <div class=\"step-connector\" [class.completed]=\"CurrentStep === 'results'\"></div>\n        <div class=\"step\" [class.active]=\"CurrentStep === 'results'\">\n            <span class=\"step-number\">3</span>\n            <span class=\"step-label\">Results</span>\n        </div>\n    </div>\n\n    <!-- Panel Content -->\n    <div class=\"panel-content\">\n        <!-- Step 1: Select Server, Connection, Tool -->\n        <div class=\"step-content\" *ngIf=\"CurrentStep === 'select'\">\n            <div class=\"selection-form\">\n                <!-- Server Selection -->\n                <div class=\"form-group\">\n                    <label class=\"form-label\">\n                        <i class=\"fa-solid fa-server\"></i>\n                        Server\n                        <span class=\"required\">*</span>\n                    </label>\n                    <kendo-dropdownlist\n                        [data]=\"DisplayServers\"\n                        [textField]=\"'Name'\"\n                        [valueField]=\"'ID'\"\n                        [valuePrimitive]=\"true\"\n                        [(ngModel)]=\"ServerID\"\n                        (valueChange)=\"onServerChange()\"\n                        [filterable]=\"true\"\n                        (filterChange)=\"onServerFilterChange($event)\"\n                        placeholder=\"Select a server...\">\n                        <ng-template kendoDropDownListItemTemplate let-dataItem>\n                            <div class=\"dropdown-item\">\n                                <span class=\"item-name\">{{ dataItem.Name }}</span>\n                                <span class=\"item-status\" [class]=\"'status-' + dataItem.Status.toLowerCase()\">\n                                    {{ dataItem.Status }}\n                                </span>\n                            </div>\n                        </ng-template>\n                    </kendo-dropdownlist>\n                </div>\n\n                <!-- Connection Selection -->\n                <div class=\"form-group\">\n                    <label class=\"form-label\">\n                        <i class=\"fa-solid fa-link\"></i>\n                        Connection\n                        <span class=\"required\">*</span>\n                    </label>\n                    <kendo-dropdownlist\n                        [data]=\"DisplayConnections\"\n                        [textField]=\"'Name'\"\n                        [valueField]=\"'ID'\"\n                        [valuePrimitive]=\"true\"\n                        [(ngModel)]=\"ConnectionID\"\n                        (valueChange)=\"onConnectionChange()\"\n                        [disabled]=\"!ServerID || NoConnectionsWarning !== null\"\n                        [filterable]=\"true\"\n                        (filterChange)=\"onConnectionFilterChange($event)\"\n                        placeholder=\"Select a connection...\">\n                        <ng-template kendoDropDownListItemTemplate let-dataItem>\n                            <div class=\"dropdown-item\">\n                                <span class=\"item-name\">{{ dataItem.Name }}</span>\n                                @if (dataItem.Description) {\n                                    <span class=\"item-description\">{{ dataItem.Description }}</span>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-dropdownlist>\n                    @if (!ServerID) {\n                        <span class=\"field-hint\">Select a server first</span>\n                    }\n                    @if (NoConnectionsWarning) {\n                        <span class=\"field-error\">\n                            <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                            {{ NoConnectionsWarning }}\n                        </span>\n                    }\n                    @if (FilteredConnections.length === 1 && ConnectionID) {\n                        <span class=\"field-hint auto-selected\">\n                            <i class=\"fa-solid fa-check\"></i>\n                            Auto-selected (only connection available)\n                        </span>\n                    }\n                </div>\n\n                <!-- Tool Selection -->\n                <div class=\"form-group\">\n                    <label class=\"form-label\">\n                        <i class=\"fa-solid fa-wrench\"></i>\n                        Tool\n                        <span class=\"required\">*</span>\n                    </label>\n                    <kendo-dropdownlist\n                        [data]=\"DisplayTools\"\n                        [textField]=\"'ToolTitle'\"\n                        [valueField]=\"'ID'\"\n                        [valuePrimitive]=\"true\"\n                        [(ngModel)]=\"ToolID\"\n                        (valueChange)=\"onToolChange()\"\n                        [disabled]=\"!ServerID\"\n                        [filterable]=\"true\"\n                        (filterChange)=\"onToolFilterChange($event)\"\n                        placeholder=\"Select a tool...\">\n                        <ng-template kendoDropDownListValueTemplate let-dataItem>\n                            {{ dataItem?.ToolTitle || dataItem?.ToolName || 'Select a tool...' }}\n                        </ng-template>\n                        <ng-template kendoDropDownListItemTemplate let-dataItem>\n                            <div class=\"dropdown-item tool-item\">\n                                <span class=\"item-name\">{{ dataItem.ToolTitle || dataItem.ToolName }}</span>\n                                @if (dataItem.ToolDescription) {\n                                    <span class=\"item-description\">{{ dataItem.ToolDescription }}</span>\n                                }\n                            </div>\n                        </ng-template>\n                    </kendo-dropdownlist>\n                    @if (!ServerID) {\n                        <span class=\"field-hint\">Select a server first</span>\n                    }\n                </div>\n            </div>\n        </div>\n\n        <!-- Step 2: Configure Parameters -->\n        <div class=\"step-content\" *ngIf=\"CurrentStep === 'configure'\">\n            <div class=\"tool-header\">\n                <div class=\"tool-info\">\n                    <h3 class=\"tool-name\">\n                        <i class=\"fa-solid fa-wrench\"></i>\n                        {{ SelectedTool?.ToolTitle || SelectedTool?.ToolName }}\n                    </h3>\n                    @if (SelectedTool?.ToolDescription) {\n                        <p class=\"tool-description\">{{ SelectedTool?.ToolDescription }}</p>\n                    }\n                </div>\n                <div class=\"tool-context\">\n                    <span class=\"context-item\">\n                        <i class=\"fa-solid fa-server\"></i>\n                        {{ SelectedServerName }}\n                    </span>\n                    <span class=\"context-item\">\n                        <i class=\"fa-solid fa-link\"></i>\n                        {{ SelectedConnectionName }}\n                    </span>\n                </div>\n            </div>\n\n            @if (ParameterConfigs.length === 0) {\n                <div class=\"no-params\">\n                    <i class=\"fa-solid fa-check-circle\"></i>\n                    <p>This tool requires no parameters.</p>\n                </div>\n            } @else {\n                <div class=\"parameters-form\">\n                    <h4 class=\"params-title\">Parameters</h4>\n                    @for (config of ParameterConfigs; track config.name) {\n                        <div class=\"param-group\" [class.required]=\"config.required\">\n                            <label class=\"param-label\">\n                                {{ config.name }}\n                                @if (config.required) {\n                                    <span class=\"required\">*</span>\n                                }\n                            </label>\n                            @if (config.description) {\n                                <p class=\"param-description\">{{ config.description }}</p>\n                            }\n\n                            <!-- Enum/Select -->\n                            @if (config.enumValues.length > 0) {\n                                <kendo-dropdownlist\n                                    [data]=\"config.enumValues\"\n                                    [valuePrimitive]=\"true\"\n                                    [(ngModel)]=\"ParameterValues[config.name]\"\n                                    (valueChange)=\"onParameterChange(config.name, $event)\">\n                                </kendo-dropdownlist>\n                            }\n                            <!-- Boolean -->\n                            @else if (config.type === 'boolean') {\n                                <div class=\"checkbox-wrapper\">\n                                    <input type=\"checkbox\"\n                                           [id]=\"'param-' + config.name\"\n                                           [checked]=\"ParameterValues[config.name]\"\n                                           (change)=\"onParameterChange(config.name, $any($event.target).checked)\">\n                                    <label [for]=\"'param-' + config.name\">Enabled</label>\n                                </div>\n                            }\n                            <!-- Number/Integer -->\n                            @else if (config.type === 'number' || config.type === 'integer') {\n                                <kendo-numerictextbox\n                                    [format]=\"config.type === 'integer' ? 'n0' : 'n'\"\n                                    [step]=\"config.type === 'integer' ? 1 : 0.1\"\n                                    [(ngModel)]=\"ParameterValues[config.name]\"\n                                    (valueChange)=\"onParameterChange(config.name, $event)\">\n                                </kendo-numerictextbox>\n                            }\n                            <!-- Array/Object (Textarea with JSON) -->\n                            @else if (config.type === 'array' || config.type === 'object') {\n                                <textarea class=\"json-input\"\n                                          rows=\"4\"\n                                          [value]=\"getTextareaValue(config.name)\"\n                                          (input)=\"onTextareaChange(config.name, $any($event.target).value, config)\"\n                                          placeholder=\"Enter JSON {{ config.type }}...\"></textarea>\n                                <span class=\"field-hint\">Enter valid JSON</span>\n                            }\n                            <!-- String (default) -->\n                            @else {\n                                @if (isTextarea(config)) {\n                                    <textarea class=\"text-input\"\n                                              rows=\"3\"\n                                              [(ngModel)]=\"ParameterValues[config.name]\"\n                                              (input)=\"onParameterChange(config.name, $any($event.target).value)\"\n                                              [placeholder]=\"config.description || 'Enter value...'\"></textarea>\n                                } @else {\n                                    <kendo-textbox\n                                        [(ngModel)]=\"ParameterValues[config.name]\"\n                                        (valueChange)=\"onParameterChange(config.name, $event)\"\n                                        [placeholder]=\"config.description || 'Enter value...'\">\n                                    </kendo-textbox>\n                                }\n                            }\n                        </div>\n                    }\n                </div>\n            }\n        </div>\n\n        <!-- Step 3: Results -->\n        <div class=\"step-content results-step\" *ngIf=\"CurrentStep === 'results'\">\n            <div class=\"results-container\">\n                <!-- Success/Error Header -->\n                <div class=\"result-header\" [class.success]=\"ExecutionResult?.Success\" [class.error]=\"!ExecutionResult?.Success\">\n                    @if (ExecutionResult?.Success) {\n                        <i class=\"fa-solid fa-check-circle\"></i>\n                        <span class=\"result-status\">Execution Successful</span>\n                    } @else {\n                        <i class=\"fa-solid fa-times-circle\"></i>\n                        <span class=\"result-status\">Execution Failed</span>\n                    }\n                    @if (ExecutionResult?.DurationMs) {\n                        <span class=\"duration\">{{ ExecutionResult?.DurationMs }}ms</span>\n                    }\n                </div>\n\n                <!-- Executed Tool Info (moved to top) -->\n                <div class=\"execution-info\">\n                    <div class=\"info-row\">\n                        <span class=\"info-label\">Tool:</span>\n                        <span class=\"info-value\">{{ SelectedToolName }}</span>\n                    </div>\n                    <div class=\"info-row\">\n                        <span class=\"info-label\">Server:</span>\n                        <span class=\"info-value\">{{ SelectedServerName }}</span>\n                    </div>\n                    <div class=\"info-row\">\n                        <span class=\"info-label\">Connection:</span>\n                        <span class=\"info-value\">{{ SelectedConnectionName }}</span>\n                    </div>\n                </div>\n\n                <!-- Error Message -->\n                @if (ExecutionResult?.ErrorMessage) {\n                    <div class=\"error-panel\">\n                        <h4><i class=\"fa-solid fa-exclamation-triangle\"></i> Error</h4>\n                        <pre class=\"error-message\">{{ ExecutionResult?.ErrorMessage }}</pre>\n                    </div>\n                }\n\n                <!-- Result Data (fills remaining space) -->\n                @if (ExecutionResult?.Result) {\n                    <div class=\"result-panel fill-space\">\n                        <div class=\"result-panel-header\">\n                            <h4><i class=\"fa-solid fa-code\"></i> Result</h4>\n                            <button kendoButton fillMode=\"flat\" (click)=\"copyResult()\" title=\"Copy to clipboard\">\n                                <i class=\"fa-solid fa-copy\"></i>\n                            </button>\n                        </div>\n                        <div class=\"code-editor-container\">\n                            <mj-code-editor\n                                [ngModel]=\"FormattedResult\"\n                                [language]=\"'json'\"\n                                [readonly]=\"true\">\n                            </mj-code-editor>\n                        </div>\n                    </div>\n                }\n            </div>\n        </div>\n    </div>\n\n    <!-- Panel Actions -->\n    <div class=\"panel-actions\">\n        @switch (CurrentStep) {\n            @case ('select') {\n                <button kendoButton themeColor=\"primary\" (click)=\"proceedToConfig()\" [disabled]=\"!CanProceedToConfig\">\n                    <i class=\"fa-solid fa-arrow-right\"></i>\n                    Next\n                </button>\n                <button kendoButton fillMode=\"flat\" (click)=\"closeDialog()\">Cancel</button>\n            }\n            @case ('configure') {\n                <button kendoButton themeColor=\"primary\" (click)=\"executeTool()\" [disabled]=\"!IsValid || IsExecuting\">\n                    @if (IsExecuting) {\n                        <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                        Executing...\n                    } @else {\n                        <i class=\"fa-solid fa-play\"></i>\n                        Execute Tool\n                    }\n                </button>\n                <button kendoButton fillMode=\"flat\" (click)=\"goBack()\">\n                    <i class=\"fa-solid fa-arrow-left\"></i>\n                    Back\n                </button>\n            }\n            @case ('results') {\n                <button kendoButton themeColor=\"primary\" (click)=\"runAgain()\">\n                    <i class=\"fa-solid fa-redo\"></i>\n                    Run Again\n                </button>\n                <button kendoButton fillMode=\"flat\" (click)=\"goBack()\">\n                    <i class=\"fa-solid fa-arrow-left\"></i>\n                    Edit Parameters\n                </button>\n                <button kendoButton fillMode=\"flat\" (click)=\"closeDialog()\">Close</button>\n            }\n        }\n    </div>\n</div>\n", styles: ["/* MCP Test Tool Slide-Out 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: white;\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: rgba(33, 150, 243, 0.1);\n}\n\n.resize-grip {\n    width: 3px;\n    height: 40px;\n    background: #ccc;\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-primary-color, #2196f3);\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: white;\n    border-bottom: 1px solid #e0e0e0;\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-color, #333);\n}\n\n.panel-title i {\n    color: var(--mj-primary-color, #2196f3);\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: #666;\n    transition: all 0.15s ease;\n}\n\n.close-btn:hover {\n    background: #f5f5f5;\n    color: #333;\n}\n\n.close-btn i {\n    font-size: 18px;\n}\n\n/* ========================================\n   Step Indicator\n   ======================================== */\n.step-indicator {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 16px 20px;\n    background: #fafafa;\n    border-bottom: 1px solid #e0e0e0;\n    flex-shrink: 0;\n}\n\n.step {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    opacity: 0.5;\n    transition: opacity 0.2s ease;\n}\n\n.step.active,\n.step.completed {\n    opacity: 1;\n}\n\n.step-number {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    border-radius: 50%;\n    background: #e0e0e0;\n    color: #666;\n    font-weight: 600;\n    font-size: 13px;\n    transition: all 0.2s ease;\n}\n\n.step.active .step-number {\n    background: var(--mj-primary-color, #2196f3);\n    color: white;\n}\n\n.step.completed .step-number {\n    background: #4caf50;\n    color: white;\n}\n\n.step-label {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-color, #333);\n}\n\n.step-connector {\n    width: 40px;\n    height: 2px;\n    background: #e0e0e0;\n    margin: 0 10px;\n    transition: background 0.2s ease;\n}\n\n.step-connector.completed {\n    background: #4caf50;\n}\n\n/* ========================================\n   Panel Content\n   ======================================== */\n.panel-content {\n    flex: 1;\n    overflow-y: auto;\n    padding: 20px;\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n}\n\n.step-content {\n    min-height: 100%;\n}\n\n.step-content.results-step {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n\n/* ========================================\n   Selection Form (Step 1)\n   ======================================== */\n.selection-form {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n}\n\n.form-group {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.form-label {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--mj-text-color, #333);\n}\n\n.form-label i {\n    color: var(--mj-primary-color, #2196f3);\n    font-size: 14px;\n}\n\n.required {\n    color: #f44336;\n    font-weight: 600;\n}\n\n.field-hint {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--mj-text-secondary-color, #666);\n    font-style: italic;\n    margin-top: 4px;\n}\n\n.field-hint.auto-selected {\n    color: #4caf50;\n    font-style: normal;\n}\n\n.field-hint.auto-selected i {\n    font-size: 11px;\n}\n\n.field-error {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: #f44336;\n    margin-top: 4px;\n    padding: 8px 10px;\n    background: rgba(244, 67, 54, 0.08);\n    border-radius: 4px;\n    border: 1px solid rgba(244, 67, 54, 0.2);\n}\n\n.field-error i {\n    font-size: 13px;\n}\n\n/* Dropdown Item Styling */\n.dropdown-item {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    padding: 4px 0;\n}\n\n.dropdown-item.tool-item {\n    max-width: 100%;\n}\n\n.item-name {\n    font-weight: 500;\n    color: var(--mj-text-color, #333);\n}\n\n.item-description {\n    font-size: 12px;\n    color: var(--mj-text-secondary-color, #666);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 100%;\n}\n\n.item-status {\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n}\n\n.item-status.status-active {\n    color: #4caf50;\n}\n\n.item-status.status-inactive {\n    color: #9e9e9e;\n}\n\n/* ========================================\n   Tool Header (Step 2)\n   ======================================== */\n.tool-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    padding: 16px;\n    background: linear-gradient(135deg, rgba(33, 150, 243, 0.08), rgba(33, 150, 243, 0.02));\n    border-radius: 8px;\n    margin-bottom: 20px;\n    border: 1px solid rgba(33, 150, 243, 0.15);\n}\n\n.tool-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.tool-name {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin: 0 0 8px 0;\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--mj-text-color, #333);\n}\n\n.tool-name i {\n    color: var(--mj-primary-color, #2196f3);\n}\n\n.tool-description {\n    margin: 0;\n    font-size: 13px;\n    color: var(--mj-text-secondary-color, #666);\n    line-height: 1.5;\n}\n\n.tool-context {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    align-items: flex-end;\n    flex-shrink: 0;\n}\n\n.context-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--mj-text-secondary-color, #666);\n}\n\n.context-item i {\n    font-size: 11px;\n    color: #999;\n}\n\n/* ========================================\n   Parameters Form (Step 2)\n   ======================================== */\n.no-params {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px 20px;\n    text-align: center;\n    color: var(--mj-text-secondary-color, #666);\n}\n\n.no-params i {\n    font-size: 48px;\n    color: #4caf50;\n    margin-bottom: 16px;\n}\n\n.no-params p {\n    margin: 0;\n    font-size: 15px;\n}\n\n.params-title {\n    margin: 0 0 16px 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-secondary-color, #666);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.parameters-form {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n.param-group {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    padding: 12px;\n    background: #fafafa;\n    border-radius: 6px;\n    border: 1px solid #e8e8e8;\n}\n\n.param-group.required {\n    border-left: 3px solid var(--mj-primary-color, #2196f3);\n}\n\n.param-label {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-color, #333);\n}\n\n.param-description {\n    margin: 0;\n    font-size: 12px;\n    color: var(--mj-text-secondary-color, #666);\n    line-height: 1.4;\n}\n\n.checkbox-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 4px 0;\n}\n\n.checkbox-wrapper input[type=\"checkbox\"] {\n    width: 18px;\n    height: 18px;\n    cursor: pointer;\n}\n\n.checkbox-wrapper label {\n    font-size: 14px;\n    color: var(--mj-text-color, #333);\n    cursor: pointer;\n}\n\n.json-input,\n.text-input {\n    width: 100%;\n    padding: 10px 12px;\n    font-family: 'Consolas', 'Monaco', monospace;\n    font-size: 13px;\n    line-height: 1.5;\n    border: 1px solid #ddd;\n    border-radius: 4px;\n    background: white;\n    resize: vertical;\n    box-sizing: border-box;\n}\n\n.json-input:focus,\n.text-input:focus {\n    outline: none;\n    border-color: var(--mj-primary-color, #2196f3);\n    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);\n}\n\n/* ========================================\n   Results (Step 3)\n   ======================================== */\n.results-container {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    flex: 1;\n    min-height: 0;\n}\n\n.result-header {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 16px;\n    border-radius: 8px;\n    font-weight: 600;\n}\n\n.result-header.success {\n    background: rgba(76, 175, 80, 0.1);\n    color: #388e3c;\n}\n\n.result-header.success i {\n    font-size: 24px;\n    color: #4caf50;\n}\n\n.result-header.error {\n    background: rgba(244, 67, 54, 0.1);\n    color: #c62828;\n}\n\n.result-header.error i {\n    font-size: 24px;\n    color: #f44336;\n}\n\n.result-status {\n    flex: 1;\n    font-size: 16px;\n}\n\n.duration {\n    font-size: 13px;\n    font-weight: normal;\n    color: var(--mj-text-secondary-color, #666);\n    background: rgba(0, 0, 0, 0.05);\n    padding: 4px 8px;\n    border-radius: 4px;\n}\n\n.error-panel {\n    background: #fff5f5;\n    border: 1px solid rgba(244, 67, 54, 0.2);\n    border-radius: 8px;\n    padding: 16px;\n}\n\n.error-panel h4 {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin: 0 0 12px 0;\n    font-size: 14px;\n    color: #c62828;\n}\n\n.error-message {\n    margin: 0;\n    padding: 12px;\n    background: white;\n    border-radius: 4px;\n    font-family: monospace;\n    font-size: 13px;\n    line-height: 1.5;\n    color: #c62828;\n    white-space: pre-wrap;\n    word-break: break-word;\n}\n\n.result-panel {\n    background: white;\n    border: 1px solid #e0e0e0;\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.result-panel.fill-space {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    min-height: 200px;\n}\n\n.result-panel-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 12px 16px;\n    background: #fafafa;\n    border-bottom: 1px solid #e0e0e0;\n}\n\n.result-panel-header h4 {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin: 0;\n    font-size: 14px;\n    color: var(--mj-text-color, #333);\n}\n\n.code-editor-container {\n    height: 300px;\n    min-height: 200px;\n    max-height: 400px;\n    overflow: hidden;\n}\n\n.result-panel.fill-space .code-editor-container {\n    flex: 1;\n    height: auto;\n    max-height: none;\n}\n\n.code-editor-container mj-code-editor {\n    width: 100%;\n    height: 100%;\n}\n\n.execution-info {\n    padding: 16px;\n    background: #fafafa;\n    border-radius: 8px;\n    border: 1px solid #e8e8e8;\n}\n\n.info-row {\n    display: flex;\n    justify-content: space-between;\n    padding: 6px 0;\n    font-size: 13px;\n}\n\n.info-row:not(:last-child) {\n    border-bottom: 1px solid #e8e8e8;\n}\n\n.info-label {\n    color: var(--mj-text-secondary-color, #666);\n}\n\n.info-value {\n    font-weight: 500;\n    color: var(--mj-text-color, #333);\n}\n\n/* ========================================\n   Panel Actions\n   ======================================== */\n.panel-actions {\n    display: flex;\n    gap: 8px;\n    padding: 16px 20px;\n    background: white;\n    border-top: 1px solid #e0e0e0;\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    .step-indicator {\n        padding: 12px 16px;\n    }\n\n    .step-connector {\n        width: 20px;\n        margin: 0 6px;\n    }\n\n    .step-label {\n        display: none;\n    }\n\n    .panel-content {\n        padding: 16px;\n    }\n\n    .tool-header {\n        flex-direction: column;\n        gap: 12px;\n    }\n\n    .tool-context {\n        align-items: flex-start;\n        flex-direction: row;\n        flex-wrap: wrap;\n        gap: 12px;\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\n@media (max-width: 480px) {\n    .panel-header {\n        padding: 12px 16px;\n    }\n\n    .panel-title {\n        font-size: 16px;\n    }\n\n    .step-number {\n        width: 24px;\n        height: 24px;\n        font-size: 12px;\n    }\n\n    .tool-name {\n        font-size: 16px;\n    }\n}\n"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], { Visible: [{
+            type: Input
+        }], Servers: [{
+            type: Input
+        }], Connections: [{
+            type: Input
+        }], Tools: [{
+            type: Input
+        }], SelectedServerID: [{
+            type: Input
+        }], SelectedConnectionID: [{
+            type: Input
+        }], SelectedToolID: [{
+            type: Input
+        }], Close: [{
+            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(MCPTestToolDialogComponent, { className: "MCPTestToolDialogComponent", filePath: "src/MCP/components/mcp-test-tool-dialog.component.ts", lineNumber: 138 }); })();
+/**
+ * Tree-shaking prevention function
+ */
+export function LoadMCPTestToolDialog() {
+    // Ensures the component is not tree-shaken
+}
+//# sourceMappingURL=mcp-test-tool-dialog.component.js.map