@mcp-use/inspector 20.0.0-beta.5 → 20.0.0-beta.7

package/dist/cdn/PromptsTab-BlXDcau3.js

@@ -0,0 +1,902 @@
+import { s as e, t } from "./react-BIs9pQ3H.js";
+import { f as n, sr as r, t as i } from "./input-BCpgLXU1.js";
+import { n as a } from "./createLucideIcon-BONxC1L5.js";
+import { U as o, i as s, n as c, r as l, t as u } from "./button-CB4uOoUV.js";
+import { t as d } from "./label-A0UGV8FE.js";
+import { t as ee } from "./AnimatePresence-D1bZ5_-l.js";
+import { a as f, i as p, n as m, r as te, t as h } from "./select-CCFHjOGk.js";
+import { a as g, i as _, t as v } from "./browser-DG2Z8392.js";
+import { n as y, t as ne } from "./zap-0Wr9QO7N.js";
+import { t as b } from "./clock-YMF8Gtw5.js";
+import { t as re } from "./JSONDisplay-BJqMz7Ny.js";
+import { a as x, i as S, n as C, o as w, r as T, s as E } from "./shared-CJVHJhag.js";
+import { t as ie } from "./history-BfUFpL1d.js";
+import { t as D } from "./maximize-hSOCz133.js";
+import { t as O } from "./message-square-D3tKB3uJ.js";
+import { n as k, t as A } from "./save-CmdEPUAm.js";
+import { t as j } from "./play-B1leulYf.js";
+import { t as M } from "./trash-2-BhumJAFE.js";
+import { t as N } from "./not-found-BajFyZpp.js";
+import { t as P } from "./spinner-Be1GlSGX.js";
+import { n as ae } from "./InspectorContext-BBKCdfmK.js";
+import { n as oe, t as F } from "./MarkdownRenderer-bX1BrKgI.js";
+import { t as I } from "./textarea-CwmI8_uI.js";
+import { t as se } from "./ListTabHeader-DzmTtN1e.js";
+//#region src/client/components/prompts/PromptInputForm.tsx
+var L = /* @__PURE__ */ e(t(), 1), R = a();
+function z({ selectedPrompt: e, promptArgs: t, onArgChange: n }) {
+	let r = e?.arguments || [];
+	if (!(r.length > 0)) return /* @__PURE__ */ (0, R.jsx)("div", {
+		className: "flex items-center justify-center h-32 text-gray-500 dark:text-gray-400 text-sm",
+		children: "No arguments required"
+	});
+	let a = (e) => {
+		let r = e.name, a = t[r], o = typeof a == "string" ? a : JSON.stringify(a);
+		return e.type === "boolean" ? /* @__PURE__ */ (0, R.jsxs)("div", {
+			className: "space-y-2",
+			children: [/* @__PURE__ */ (0, R.jsxs)("div", { children: [/* @__PURE__ */ (0, R.jsxs)(d, {
+				htmlFor: r,
+				className: "text-sm font-medium",
+				children: [r, e.required && /* @__PURE__ */ (0, R.jsx)("span", {
+					className: "text-red-500 ml-1",
+					children: "*"
+				})]
+			}), e.description && /* @__PURE__ */ (0, R.jsx)("p", {
+				className: "mt-0.5 text-xs text-gray-500 dark:text-gray-400",
+				children: e.description
+			})] }), /* @__PURE__ */ (0, R.jsx)("input", {
+				id: r,
+				type: "checkbox",
+				checked: !!a,
+				onChange: (e) => n(r, e.target.checked),
+				className: "rounded",
+				"aria-label": `Toggle ${r}`
+			})]
+		}, r) : e.type === "number" ? /* @__PURE__ */ (0, R.jsxs)("div", {
+			className: "space-y-2",
+			children: [/* @__PURE__ */ (0, R.jsxs)("div", { children: [/* @__PURE__ */ (0, R.jsxs)(d, {
+				htmlFor: r,
+				className: "text-sm font-medium",
+				children: [r, e.required && /* @__PURE__ */ (0, R.jsx)("span", {
+					className: "text-red-500 ml-1",
+					children: "*"
+				})]
+			}), e.description && /* @__PURE__ */ (0, R.jsx)("p", {
+				className: "mt-0.5 text-xs text-gray-500 dark:text-gray-400",
+				children: e.description
+			})] }), /* @__PURE__ */ (0, R.jsx)(i, {
+				id: r,
+				type: "number",
+				value: Number(a) || 0,
+				onChange: (e) => n(r, Number(e.target.value)),
+				placeholder: `Enter ${r}`
+			})]
+		}, r) : e.type === "array" || e.type === "object" ? /* @__PURE__ */ (0, R.jsxs)("div", {
+			className: "space-y-2",
+			children: [/* @__PURE__ */ (0, R.jsxs)("div", { children: [/* @__PURE__ */ (0, R.jsxs)(d, {
+				htmlFor: r,
+				className: "text-sm font-medium",
+				children: [r, e.required && /* @__PURE__ */ (0, R.jsx)("span", {
+					className: "text-red-500 ml-1",
+					children: "*"
+				})]
+			}), e.description && /* @__PURE__ */ (0, R.jsx)("p", {
+				className: "mt-0.5 text-xs text-gray-500 dark:text-gray-400",
+				children: e.description
+			})] }), /* @__PURE__ */ (0, R.jsx)(I, {
+				id: r,
+				value: o,
+				onChange: (e) => {
+					try {
+						n(r, JSON.parse(e.target.value));
+					} catch {
+						n(r, e.target.value);
+					}
+				},
+				placeholder: `Enter ${r} as JSON`,
+				className: "font-mono text-sm min-h-[100px]"
+			})]
+		}, r) : /* @__PURE__ */ (0, R.jsxs)("div", {
+			className: "space-y-2",
+			children: [/* @__PURE__ */ (0, R.jsxs)("div", { children: [/* @__PURE__ */ (0, R.jsxs)(d, {
+				htmlFor: r,
+				className: "text-sm font-medium",
+				children: [r, e.required && /* @__PURE__ */ (0, R.jsx)("span", {
+					className: "text-red-500 ml-1",
+					children: "*"
+				})]
+			}), e.description && /* @__PURE__ */ (0, R.jsx)("p", {
+				className: "mt-0.5 text-xs text-gray-500 dark:text-gray-400",
+				children: e.description
+			})] }), /* @__PURE__ */ (0, R.jsx)(i, {
+				id: r,
+				"data-testid": `prompt-param-${r}`,
+				value: o,
+				onChange: (e) => n(r, e.target.value),
+				placeholder: `Enter ${r}`
+			})]
+		}, r);
+	};
+	return /* @__PURE__ */ (0, R.jsx)("div", {
+		className: "space-y-4",
+		children: r.map((e) => a(e))
+	});
+}
+//#endregion
+//#region src/client/components/prompts/PromptExecutionPanel.tsx
+function ce({ selectedPrompt: e, promptArgs: t, isExecuting: n, isConnected: r, onArgChange: i, onExecute: a, onSave: d }) {
+	return (0, L.useEffect)(() => {
+		let t = (t) => {
+			(t.metaKey || t.ctrlKey) && t.key === "Enter" && e && !n && r && (t.preventDefault(), a());
+		};
+		return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+	}, [
+		e,
+		n,
+		r,
+		a
+	]), e ? /* @__PURE__ */ (0, R.jsxs)("div", {
+		className: "flex flex-col h-full",
+		children: [/* @__PURE__ */ (0, R.jsx)("div", {
+			className: "flex-shrink-0 p-3 sm:p-6 pt-3 pb-4 pr-3",
+			children: /* @__PURE__ */ (0, R.jsxs)("div", { children: [/* @__PURE__ */ (0, R.jsxs)("div", {
+				className: "flex flex-row items-center justify-between mb-0 gap-2",
+				children: [/* @__PURE__ */ (0, R.jsx)("h3", {
+					className: "text-base sm:text-lg font-semibold",
+					children: e.name
+				}), /* @__PURE__ */ (0, R.jsxs)("div", {
+					className: "flex gap-2 flex-shrink-0",
+					children: [/* @__PURE__ */ (0, R.jsx)(u, {
+						onClick: a,
+						disabled: n || !r,
+						size: "sm",
+						className: c,
+						"data-testid": "prompt-execute-button",
+						children: n ? /* @__PURE__ */ (0, R.jsxs)(R.Fragment, { children: [/* @__PURE__ */ (0, R.jsx)(P, {}), /* @__PURE__ */ (0, R.jsx)("span", {
+							className: "hidden sm:inline",
+							children: "Executing..."
+						})] }) : /* @__PURE__ */ (0, R.jsxs)(R.Fragment, { children: [
+							/* @__PURE__ */ (0, R.jsx)(j, {}),
+							/* @__PURE__ */ (0, R.jsx)("span", {
+								className: "hidden sm:inline",
+								children: "Execute"
+							}),
+							/* @__PURE__ */ (0, R.jsx)("span", {
+								className: l,
+								children: "⌘↵"
+							})
+						] })
+					}), /* @__PURE__ */ (0, R.jsxs)(u, {
+						variant: "outline",
+						onClick: d,
+						disabled: n,
+						size: "sm",
+						className: o(s, "gap-2"),
+						children: [/* @__PURE__ */ (0, R.jsx)(A, {}), /* @__PURE__ */ (0, R.jsx)("span", {
+							className: "hidden sm:inline",
+							children: "Save"
+						})]
+					})]
+				})]
+			}), e.description && /* @__PURE__ */ (0, R.jsx)("p", {
+				className: "text-sm text-gray-600 dark:text-gray-400 leading-relaxed mt-2",
+				children: e.description
+			})] })
+		}), /* @__PURE__ */ (0, R.jsx)("div", {
+			className: "flex-1 overflow-y-auto px-3 sm:px-6 pb-4 pr-3",
+			children: /* @__PURE__ */ (0, R.jsx)(z, {
+				selectedPrompt: e,
+				promptArgs: t,
+				onArgChange: i
+			})
+		})]
+	}) : /* @__PURE__ */ (0, R.jsxs)("div", {
+		className: "flex flex-col items-center justify-center h-full p-4 text-center",
+		children: [/* @__PURE__ */ (0, R.jsx)("p", {
+			className: "text-gray-500 dark:text-gray-400 mb-2",
+			children: "Select a prompt to get started"
+		}), /* @__PURE__ */ (0, R.jsx)("p", {
+			className: "text-xs text-gray-400 dark:text-gray-500",
+			children: "Choose a prompt from the list to view its details and execute it"
+		})]
+	});
+}
+//#endregion
+//#region src/client/components/prompts/PromptMessageCard.tsx
+function B(e) {
+	switch (e) {
+		case "system": return "default";
+		case "user": return "outline";
+		case "assistant": return "secondary";
+		default: return "outline";
+	}
+}
+function V(e) {
+	return e.charAt(0).toUpperCase() + e.slice(1);
+}
+function H(e) {
+	return typeof e == "string" ? e : e.text ? e.text : e.type === "resource" && e.resource?.text ? e.resource.text : e.type === "image" ? `[Image: ${e.mimeType || "unknown type"}]` : JSON.stringify(e, null, 2);
+}
+function U({ message: e, index: t }) {
+	let [n, i] = (0, L.useState)(!1);
+	return /* @__PURE__ */ (0, R.jsxs)("div", {
+		className: "border border-border rounded-lg overflow-hidden bg-white dark:bg-zinc-900",
+		children: [/* @__PURE__ */ (0, R.jsxs)("div", {
+			className: "flex items-center justify-between px-4 py-2 bg-muted/30 border-b border-border",
+			children: [/* @__PURE__ */ (0, R.jsx)(r, {
+				variant: B(e.role),
+				children: V(e.role)
+			}), /* @__PURE__ */ (0, R.jsx)(u, {
+				variant: "ghost",
+				size: "sm",
+				onClick: async () => {
+					await v(H(e.content)), i(!0), setTimeout(() => i(!1), 2e3);
+				},
+				className: "h-6 px-2",
+				title: "Copy message content",
+				children: n ? /* @__PURE__ */ (0, R.jsx)(g, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, R.jsx)(_, { className: "h-3.5 w-3.5" })
+			})]
+		}), /* @__PURE__ */ (0, R.jsx)("div", {
+			className: "px-4 py-3",
+			"data-testid": `prompt-message-content-${t}`,
+			children: (() => {
+				let t = e.content;
+				return typeof t == "string" ? /* @__PURE__ */ (0, R.jsx)(F, { content: t }) : t.type === "text" && t.text ? /* @__PURE__ */ (0, R.jsx)(F, { content: t.text }) : t.type === "image" ? /* @__PURE__ */ (0, R.jsxs)("div", {
+					className: "flex items-center gap-2 text-sm text-muted-foreground",
+					children: [/* @__PURE__ */ (0, R.jsxs)("span", {
+						className: "font-mono bg-muted px-2 py-1 rounded",
+						children: ["Image: ", t.mimeType || "unknown type"]
+					}), t.data && /* @__PURE__ */ (0, R.jsx)("img", {
+						src: `data:${t.mimeType};base64,${t.data}`,
+						alt: "Prompt image",
+						className: "max-w-full max-h-[300px] object-contain rounded-lg border border-border mt-2"
+					})]
+				}) : t.type === "resource" && t.resource ? /* @__PURE__ */ (0, R.jsxs)("div", {
+					className: "space-y-2",
+					children: [/* @__PURE__ */ (0, R.jsxs)("div", {
+						className: "flex items-center gap-2 text-sm",
+						children: [/* @__PURE__ */ (0, R.jsx)("span", {
+							className: "text-muted-foreground font-medium",
+							children: "Resource:"
+						}), /* @__PURE__ */ (0, R.jsx)("code", {
+							className: "bg-muted px-2 py-0.5 rounded text-xs font-mono",
+							children: t.resource.uri
+						})]
+					}), t.resource.text && /* @__PURE__ */ (0, R.jsx)("div", {
+						className: "mt-2",
+						children: /* @__PURE__ */ (0, R.jsx)(F, { content: t.resource.text })
+					})]
+				}) : /* @__PURE__ */ (0, R.jsx)("pre", {
+					className: "bg-muted p-3 rounded-lg text-sm overflow-x-auto",
+					children: /* @__PURE__ */ (0, R.jsx)("code", { children: JSON.stringify(t, null, 2) })
+				});
+			})()
+		})]
+	});
+}
+//#endregion
+//#region src/client/components/prompts/PromptResultDisplay.tsx
+function W(e) {
+	let t = Date.now() - e, n = Math.floor(t / 1e3), r = Math.floor(n / 60), i = Math.floor(r / 60), a = Math.floor(i / 24);
+	return n < 10 ? "now" : n < 60 ? `${n}s ago` : r < 60 ? `${r}m ago` : i < 24 ? `${i}h ago` : `${a}d ago`;
+}
+function G(e) {
+	return "isError" in e && !e.isError ? null : "error" in e && e.error ? String(e.error) : "isError" in e && e.isError ? "An error occurred" : null;
+}
+function le({ results: e, copiedResult: t, previewMode: n = !0, onCopy: r, onDelete: i, onFullscreen: a, onTogglePreview: o, onMaximize: s, isMaximized: c = !1 }) {
+	let [l, d] = (0, L.useState)(0), [ee, v] = (0, L.useState)(""), [y, b] = (0, L.useState)(!0), x = e[0], S = x ? e.filter((e) => e.promptName === x.promptName) : [], C = S[l] || S[0], w = e.findIndex((e) => e === C);
+	if ((0, L.useEffect)(() => {
+		S.length > 0 && l >= S.length && d(0);
+	}, [S.length, l]), (0, L.useEffect)(() => {
+		let e = () => {
+			C && v(W(C.timestamp));
+		};
+		e();
+		let t = setInterval(e, 1e3);
+		return () => clearInterval(t);
+	}, [C]), e.length === 0) return /* @__PURE__ */ (0, R.jsx)("div", {
+		className: "flex flex-col h-full bg-white dark:bg-black border-t dark:border-zinc-700",
+		children: /* @__PURE__ */ (0, R.jsx)("div", {
+			className: "flex-1 overflow-y-auto h-full",
+			children: /* @__PURE__ */ (0, R.jsx)("div", {
+				className: "flex items-center justify-center h-full",
+				children: /* @__PURE__ */ (0, R.jsx)("div", {
+					className: "text-center",
+					children: /* @__PURE__ */ (0, R.jsx)(N, {
+						vertical: !0,
+						noBorder: !0,
+						message: "No Results yet"
+					})
+				})
+			})
+		})
+	});
+	let T = C.error || G(C.result), E = "messages" in C.result && Array.isArray(C.result.messages);
+	return /* @__PURE__ */ (0, R.jsx)("div", {
+		className: "flex flex-col h-full bg-white dark:bg-black border-t dark:border-zinc-700",
+		children: /* @__PURE__ */ (0, R.jsx)("div", {
+			className: "flex-1 overflow-y-auto h-full",
+			children: /* @__PURE__ */ (0, R.jsxs)("div", {
+				className: "space-y-0 flex-1 h-full flex flex-col",
+				children: [/* @__PURE__ */ (0, R.jsxs)("div", {
+					className: "flex items-center gap-2 px-4 pt-2 border-b border-gray-200 dark:border-zinc-600 pb-2",
+					children: [
+						/* @__PURE__ */ (0, R.jsx)("h3", {
+							className: "text-sm font-medium hidden sm:block",
+							children: "Response"
+						}),
+						C.duration !== void 0 && /* @__PURE__ */ (0, R.jsxs)("div", {
+							className: "hidden sm:flex items-center gap-1",
+							children: [/* @__PURE__ */ (0, R.jsx)(ne, { className: "h-3 w-3 text-gray-400" }), /* @__PURE__ */ (0, R.jsxs)("span", {
+								className: "text-xs text-gray-500 dark:text-gray-400",
+								children: [C.duration, "ms"]
+							})]
+						}),
+						E && /* @__PURE__ */ (0, R.jsx)("div", {
+							className: "flex items-center gap-4 sm:ml-4",
+							children: /* @__PURE__ */ (0, R.jsxs)("div", {
+								className: "flex items-center gap-2",
+								children: [
+									/* @__PURE__ */ (0, R.jsx)("button", {
+										onClick: () => b(!0),
+										className: `text-xs font-medium ${y ? "text-black dark:text-white" : "text-zinc-500 dark:text-zinc-400"}`,
+										children: "Formatted"
+									}),
+									/* @__PURE__ */ (0, R.jsx)("span", {
+										className: "text-xs text-zinc-400",
+										children: "|"
+									}),
+									/* @__PURE__ */ (0, R.jsx)("button", {
+										onClick: () => b(!1),
+										className: `text-xs font-medium ${y ? "text-zinc-500 dark:text-zinc-400" : "text-black dark:text-white"}`,
+										children: "Raw"
+									})
+								]
+							})
+						}),
+						/* @__PURE__ */ (0, R.jsxs)("div", {
+							className: "ml-auto flex items-center gap-1",
+							children: [
+								S.length > 1 && /* @__PURE__ */ (0, R.jsxs)("div", {
+									className: "flex items-center gap-2 mr-2",
+									children: [/* @__PURE__ */ (0, R.jsx)(ie, { className: "h-3 w-3 text-gray-400" }), /* @__PURE__ */ (0, R.jsxs)(h, {
+										value: l.toString(),
+										onValueChange: (e) => d(parseInt(e)),
+										children: [/* @__PURE__ */ (0, R.jsx)(p, {
+											className: "h-7 w-[120px] text-xs",
+											children: /* @__PURE__ */ (0, R.jsx)(f, {})
+										}), /* @__PURE__ */ (0, R.jsx)(m, { children: S.map((e, t) => /* @__PURE__ */ (0, R.jsx)(te, {
+											value: t.toString(),
+											children: t === 0 ? "Latest" : `${t + 1} call ago`
+										}, t)) })]
+									})]
+								}),
+								/* @__PURE__ */ (0, R.jsx)("span", {
+									className: "text-xs text-gray-500 dark:text-gray-400 mr-2",
+									children: ee
+								}),
+								/* @__PURE__ */ (0, R.jsx)(u, {
+									variant: "ghost",
+									size: "sm",
+									onClick: () => r(w, C.result),
+									className: "h-7 w-7 p-0",
+									title: "Copy result",
+									children: t === w ? /* @__PURE__ */ (0, R.jsx)(g, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, R.jsx)(_, { className: "h-4 w-4" })
+								}),
+								i && /* @__PURE__ */ (0, R.jsx)(u, {
+									variant: "ghost",
+									size: "sm",
+									onClick: () => i(w),
+									className: "h-7 w-7 p-0",
+									title: "Delete result",
+									children: /* @__PURE__ */ (0, R.jsx)(M, { className: "h-4 w-4" })
+								}),
+								a && /* @__PURE__ */ (0, R.jsx)(u, {
+									variant: "ghost",
+									size: "sm",
+									onClick: () => a(w),
+									className: "h-7 w-7 p-0 sm:hidden",
+									title: "Fullscreen",
+									children: /* @__PURE__ */ (0, R.jsx)(D, { className: "h-4 w-4" })
+								}),
+								s && /* @__PURE__ */ (0, R.jsx)(u, {
+									variant: "ghost",
+									size: "sm",
+									onClick: s,
+									className: "h-7 w-7 p-0 hidden sm:flex",
+									title: c ? "Restore" : "Maximize",
+									children: c ? /* @__PURE__ */ (0, R.jsx)(k, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, R.jsx)(D, { className: "h-4 w-4" })
+								})
+							]
+						})
+					]
+				}), /* @__PURE__ */ (0, R.jsx)("div", {
+					className: "flex-1 overflow-y-auto p-4",
+					children: T ? /* @__PURE__ */ (0, R.jsxs)("div", {
+						className: "bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded p-3",
+						children: [/* @__PURE__ */ (0, R.jsx)("p", {
+							className: "text-red-800 dark:text-red-300 font-medium",
+							children: "Error:"
+						}), /* @__PURE__ */ (0, R.jsx)("p", {
+							className: "text-red-700 dark:text-red-400 text-sm",
+							children: T
+						})]
+					}) : y && E ? /* @__PURE__ */ (0, R.jsx)("div", {
+						className: "space-y-3",
+						children: ("messages" in C.result ? C.result.messages : []).map((e, t) => /* @__PURE__ */ (0, R.jsx)(U, {
+							message: e,
+							index: t
+						}, t))
+					}) : /* @__PURE__ */ (0, R.jsx)(re, {
+						data: C.result,
+						filename: `prompt-result-${C.promptName}-${Date.now()}.json`
+					})
+				})]
+			})
+		})
+	});
+}
+//#endregion
+//#region src/client/components/prompts/PromptsList.tsx
+function ue({ prompts: e, selectedPrompt: t, onPromptSelect: n, focusedIndex: i }) {
+	return e.length === 0 ? /* @__PURE__ */ (0, R.jsxs)("div", {
+		className: "flex flex-1 flex-col items-center justify-center p-4 text-center",
+		children: [/* @__PURE__ */ (0, R.jsx)(O, { className: "h-12 w-12 text-gray-400 dark:text-gray-600 mb-3" }), /* @__PURE__ */ (0, R.jsx)("p", {
+			className: "text-gray-500 dark:text-gray-400",
+			children: "No prompts available"
+		})]
+	}) : /* @__PURE__ */ (0, R.jsx)("div", { children: e.map((e, a) => /* @__PURE__ */ (0, R.jsx)(T, {
+		id: `prompt-${e.name}`,
+		"data-testid": `prompt-item-${e.name}`,
+		isSelected: t?.name === e.name,
+		isFocused: i === a,
+		title: e.name,
+		description: e.description,
+		metadata: e.arguments && e.arguments.length > 0 && /* @__PURE__ */ (0, R.jsxs)(r, {
+			variant: "outline",
+			className: "text-xs border-gray-300 dark:border-zinc-600 text-gray-600 dark:text-gray-400",
+			children: [e.arguments.length, " args"]
+		}),
+		onClick: () => n(e)
+	}, e.name)) });
+}
+//#endregion
+//#region src/client/components/prompts/SavedPromptsList.tsx
+function de({ savedPrompts: e, selectedPrompt: t, onLoadPrompt: n, onDeletePrompt: r, focusedIndex: i }) {
+	return e.length === 0 ? /* @__PURE__ */ (0, R.jsxs)("div", {
+		className: "flex flex-1 flex-col items-center justify-center p-4 text-center",
+		children: [
+			/* @__PURE__ */ (0, R.jsx)(b, { className: "h-12 w-12 text-gray-400 dark:text-gray-600 mb-3" }),
+			/* @__PURE__ */ (0, R.jsx)("p", {
+				className: "text-gray-500 dark:text-gray-400",
+				children: "No history"
+			}),
+			/* @__PURE__ */ (0, R.jsx)("p", {
+				className: "text-sm text-gray-400 dark:text-gray-500 mt-1",
+				children: "Prompts you execute will appear here"
+			})
+		]
+	}) : /* @__PURE__ */ (0, R.jsx)("div", { children: e.map((e, r) => /* @__PURE__ */ (0, R.jsx)(T, {
+		id: `saved-prompt-${e.id}`,
+		isSelected: t?.id === e.id,
+		isFocused: i === r,
+		title: e.name,
+		description: `${e.promptName} - ${new Date(e.savedAt).toLocaleString()}`,
+		onClick: () => n(e)
+	}, e.id)) });
+}
+//#endregion
+//#region src/client/components/PromptsTab.tsx
+var fe = "mcp-inspector-saved-prompts";
+function K({ ref: e, prompts: t, callPrompt: r, serverId: i, isConnected: a, refreshPrompts: o }) {
+	let [s, c] = (0, L.useState)(!1), [l, d] = (0, L.useState)(null), { selectedPromptName: f, setSelectedPromptName: p } = ae(), [m, te] = (0, L.useState)(null), [h, g] = (0, L.useState)("prompts"), [_, ne] = (0, L.useState)([]), [re, T] = (0, L.useState)(!1), [ie, D] = (0, L.useState)(""), [k, A] = (0, L.useState)(!1), [j, M] = (0, L.useState)(-1), N = (0, L.useRef)(null), [P, F] = (0, L.useState)(!1), [I, z] = (0, L.useState)("list"), [B, V] = (0, L.useState)(!1), { filteredPrompts: H, selectedPrompt: U, setSelectedPrompt: W, results: G, handleDeleteResult: K, promptArgs: pe, setPromptArgs: me, isExecuting: q, handlePromptSelect: J, handleArgChange: he, executeSelectedPrompt: ge, searchQuery: Y, setSearchQuery: X } = oe({
+		prompts: t,
+		callPrompt: r,
+		serverId: i
+	}), Z = E(), Q = E();
+	(0, L.useEffect)(() => {
+		let e = () => {
+			F(window.innerWidth < 1024);
+		};
+		return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+	}, []), (0, L.useEffect)(() => {
+		z(U ? "detail" : "list");
+	}, [U]), (0, L.useEffect)(() => {
+		P && G.length > 0 && !q && z("response");
+	}, [
+		G,
+		q,
+		P
+	]), (0, L.useImperativeHandle)(e, () => ({
+		focusSearch: () => {
+			A(!0), setTimeout(() => {
+				N.current && N.current.focus();
+			}, 0);
+		},
+		blurSearch: () => {
+			X(""), A(!1), N.current && N.current.blur();
+		}
+	})), (0, L.useEffect)(() => {
+		try {
+			let e = localStorage.getItem(fe);
+			e && ne(JSON.parse(e));
+		} catch (e) {
+			console.error("[PromptsTab] Failed to load saved prompts:", e);
+		}
+	}, []);
+	let _e = (0, L.useCallback)((e) => {
+		try {
+			localStorage.setItem(fe, JSON.stringify(e));
+		} catch (e) {
+			console.error("[PromptsTab] Failed to save prompts:", e);
+		}
+	}, []);
+	(0, L.useEffect)(() => {
+		k && N.current && N.current.focus();
+	}, [k]);
+	let ve = (0, L.useCallback)(() => {
+		Y.trim() || A(!1);
+	}, [Y]), ye = (0, L.useCallback)(async () => {
+		if (o) {
+			c(!0);
+			try {
+				await o();
+			} finally {
+				c(!1);
+			}
+		}
+	}, [o]), $ = (0, L.useCallback)((e) => {
+		let n = t.find((t) => t.name === e.promptName);
+		n && (W(n), me(e.args), d(e));
+	}, [
+		t,
+		W,
+		me
+	]);
+	(0, L.useEffect)(() => {
+		M(-1);
+	}, [Y, h]), (0, L.useEffect)(() => {
+		let e = (e) => {
+			let t = e.target;
+			if (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.contentEditable === "true" || e.metaKey || e.ctrlKey || e.altKey) return;
+			let n = h === "prompts" ? H : _;
+			if (e.key === "ArrowDown") e.preventDefault(), M((e) => {
+				let t = e + 1;
+				return t >= n.length ? 0 : t;
+			});
+			else if (e.key === "ArrowUp") e.preventDefault(), M((e) => {
+				let t = e - 1;
+				return t < 0 ? n.length - 1 : t;
+			});
+			else if (e.key === "Enter" && j >= 0) if (e.preventDefault(), h === "prompts") {
+				let e = H[j];
+				e && J(e);
+			} else {
+				let e = _[j];
+				e && $(e);
+			}
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [
+		j,
+		H,
+		_,
+		h,
+		J,
+		$
+	]), (0, L.useEffect)(() => {
+		if (j >= 0) {
+			let e = h === "prompts" ? `prompt-${H[j]?.name}` : `saved-prompt-${_[j]?.id}`, t = document.getElementById(e);
+			t && t.scrollIntoView({
+				behavior: "smooth",
+				block: "nearest"
+			});
+		}
+	}, [
+		j,
+		H,
+		_,
+		h
+	]), (0, L.useEffect)(() => {
+		if (console.warn("[PromptsTab] Auto-selection effect triggered:", {
+			selectedPromptName: f,
+			promptsCount: t.length,
+			currentSelectedPrompt: U?.name
+		}), f && t.length > 0) {
+			let e = t.find((e) => e.name === f);
+			if (console.warn("[PromptsTab] Prompt lookup result:", {
+				selectedPromptName: f,
+				promptFound: !!e,
+				promptName: e?.name,
+				shouldSelect: e && U?.name !== e.name
+			}), e && U?.name !== e.name) {
+				console.warn("[PromptsTab] Selecting prompt:", e.name), p(null);
+				let t = setTimeout(() => {
+					J(e);
+					let t = document.getElementById(`prompt-${e.name}`);
+					t && (console.warn("[PromptsTab] Scrolling to prompt element"), t.scrollIntoView({
+						behavior: "smooth",
+						block: "nearest"
+					}));
+				}, 100);
+				return () => clearTimeout(t);
+			}
+		}
+	}, [
+		f,
+		t,
+		U,
+		J,
+		p
+	]);
+	let be = (0, L.useCallback)(async (e, t) => {
+		try {
+			await v(JSON.stringify(t, null, 2)), te(e), setTimeout(() => te(null), 2e3);
+		} catch (e) {
+			console.error("[PromptsTab] Failed to copy result:", e);
+		}
+	}, []), xe = (0, L.useCallback)((e) => {
+		if (P) z("response");
+		else {
+			let t = G[e];
+			if (t) {
+				let e = window.open("", "_blank", "width=800,height=600");
+				if (e) {
+					let n = t.result;
+					e.document.write(`
+            <html>
+              <head>
+                <title>${t.promptName} Result</title>
+                <style>
+                  body { font-family: monospace; padding: 20px; background: #1e1e1e; color: #d4d4d4; }
+                  pre { white-space: pre-wrap; word-wrap: break-word; }
+                </style>
+              </head>
+              <body>
+                <h2>${t.promptName}</h2>
+                <pre>${JSON.stringify(n, null, 2)}</pre>
+              </body>
+            </html>
+          `), e.document.close();
+				}
+			}
+		}
+	}, [P, G]), Se = (0, L.useCallback)(() => {
+		B ? (Z.current && Z.current.expand(), Q.current && Q.current.expand(), V(!1)) : (Z.current && Z.current.collapse(), Q.current && Q.current.collapse(), V(!0));
+	}, [
+		B,
+		Z,
+		Q
+	]), Ce = (0, L.useCallback)(() => {
+		U && (D(""), T(!0));
+	}, [U]), we = (0, L.useCallback)((e) => {
+		_e(_.filter((t) => t.id !== e)), l?.id === e && d(null);
+	}, [
+		_,
+		_e,
+		l
+	]);
+	return P ? /* @__PURE__ */ (0, R.jsxs)("div", {
+		className: "h-full flex flex-col overflow-hidden relative bg-background",
+		children: [I !== "list" && /* @__PURE__ */ (0, R.jsxs)("div", {
+			className: "flex items-center gap-2 p-2 border-b shrink-0 bg-background z-10",
+			children: [/* @__PURE__ */ (0, R.jsx)(u, {
+				variant: "ghost",
+				size: "sm",
+				onClick: () => {
+					I === "response" ? z("detail") : (W(null), z("list"));
+				},
+				className: "p-0 h-8 w-8",
+				children: /* @__PURE__ */ (0, R.jsx)(y, { className: "h-4 w-4" })
+			}), /* @__PURE__ */ (0, R.jsxs)("div", {
+				className: "flex items-center text-sm font-medium",
+				children: [
+					/* @__PURE__ */ (0, R.jsx)("button", {
+						onClick: () => {
+							W(null), z("list");
+						},
+						className: "text-muted-foreground hover:text-foreground hover:underline cursor-pointer",
+						children: "Prompts"
+					}),
+					I === "detail" && /* @__PURE__ */ (0, R.jsxs)(R.Fragment, { children: [/* @__PURE__ */ (0, R.jsx)("span", {
+						className: "mx-2 text-muted-foreground",
+						children: "/"
+					}), /* @__PURE__ */ (0, R.jsx)("button", {
+						onClick: () => {
+							z("response");
+						},
+						className: I === "detail" ? "text-foreground hover:underline" : I === "response" ? "text-muted-foreground hover:text-foreground hover:underline cursor-pointer" : "text-muted-foreground",
+						children: "Execute"
+					})] }),
+					I === "response" && /* @__PURE__ */ (0, R.jsxs)(R.Fragment, { children: [/* @__PURE__ */ (0, R.jsx)("span", {
+						className: "mx-2 text-muted-foreground",
+						children: "/"
+					}), /* @__PURE__ */ (0, R.jsx)("span", {
+						className: "text-foreground",
+						children: "Response"
+					})] })
+				]
+			})]
+		}), /* @__PURE__ */ (0, R.jsx)("div", {
+			className: "flex-1 relative overflow-hidden",
+			children: /* @__PURE__ */ (0, R.jsxs)(ee, {
+				initial: !1,
+				mode: "popLayout",
+				children: [
+					I === "list" && /* @__PURE__ */ (0, R.jsx)(n.div, {
+						initial: { x: "-100%" },
+						animate: { x: 0 },
+						exit: { x: "-100%" },
+						transition: {
+							type: "spring",
+							stiffness: 300,
+							damping: 30
+						},
+						className: "absolute inset-0 flex flex-col bg-background z-0",
+						children: /* @__PURE__ */ (0, R.jsx)(C, { children: (e) => /* @__PURE__ */ (0, R.jsxs)(R.Fragment, { children: [/* @__PURE__ */ (0, R.jsx)(se, {
+							isScrolled: e,
+							activeTab: h,
+							isSearchExpanded: k,
+							searchQuery: Y,
+							primaryTabName: "prompts",
+							secondaryTabName: "saved",
+							primaryTabTitle: "Prompts",
+							secondaryTabTitle: "History",
+							primaryCount: H.length,
+							secondaryCount: _.length,
+							primaryIcon: O,
+							secondaryIcon: b,
+							searchPlaceholder: "Search prompts...",
+							onSearchExpand: () => A(!0),
+							onSearchChange: X,
+							onSearchBlur: ve,
+							onTabSwitch: () => g(h === "prompts" ? "saved" : "prompts"),
+							searchInputRef: N,
+							onRefresh: o ? ye : void 0,
+							isRefreshing: s
+						}), h === "prompts" ? /* @__PURE__ */ (0, R.jsx)(ue, {
+							prompts: H,
+							selectedPrompt: U,
+							onPromptSelect: J,
+							focusedIndex: j
+						}) : /* @__PURE__ */ (0, R.jsx)(de, {
+							savedPrompts: _,
+							selectedPrompt: l,
+							onLoadPrompt: $,
+							onDeletePrompt: we,
+							focusedIndex: j
+						})] }) })
+					}, "list"),
+					I === "detail" && /* @__PURE__ */ (0, R.jsx)(n.div, {
+						initial: { x: "100%" },
+						animate: { x: 0 },
+						exit: { x: "-100%" },
+						transition: {
+							type: "spring",
+							stiffness: 300,
+							damping: 30
+						},
+						className: "absolute inset-0 bg-background z-10",
+						children: /* @__PURE__ */ (0, R.jsx)(ce, {
+							selectedPrompt: U,
+							promptArgs: pe,
+							isExecuting: q,
+							isConnected: a,
+							onArgChange: he,
+							onExecute: ge,
+							onSave: Ce
+						})
+					}, "detail"),
+					I === "response" && /* @__PURE__ */ (0, R.jsx)(n.div, {
+						initial: { x: "100%" },
+						animate: { x: 0 },
+						exit: { x: "100%" },
+						transition: {
+							type: "spring",
+							stiffness: 300,
+							damping: 30
+						},
+						className: "absolute inset-0 bg-background z-20",
+						children: /* @__PURE__ */ (0, R.jsx)(le, {
+							results: G,
+							copiedResult: m,
+							onCopy: be,
+							onDelete: K,
+							onFullscreen: xe
+						})
+					}, "response")
+				]
+			})
+		})]
+	}) : /* @__PURE__ */ (0, R.jsxs)(w, {
+		orientation: "horizontal",
+		className: "h-full",
+		children: [
+			/* @__PURE__ */ (0, R.jsx)(x, {
+				id: "left-panel",
+				panelRef: Z,
+				defaultSize: "33%",
+				collapsible: !0,
+				className: "flex flex-col h-full relative",
+				children: /* @__PURE__ */ (0, R.jsx)("div", {
+					className: "flex h-full flex-col overflow-hidden border-r dark:border-zinc-700",
+					children: /* @__PURE__ */ (0, R.jsx)(C, { children: (e) => /* @__PURE__ */ (0, R.jsxs)(R.Fragment, { children: [/* @__PURE__ */ (0, R.jsx)(se, {
+						isScrolled: e,
+						activeTab: h,
+						isSearchExpanded: k,
+						searchQuery: Y,
+						primaryTabName: "prompts",
+						secondaryTabName: "saved",
+						primaryTabTitle: "Prompts",
+						secondaryTabTitle: "History",
+						primaryCount: H.length,
+						secondaryCount: _.length,
+						primaryIcon: O,
+						secondaryIcon: b,
+						searchPlaceholder: "Search prompts...",
+						onSearchExpand: () => A(!0),
+						onSearchChange: X,
+						onSearchBlur: ve,
+						onTabSwitch: () => g(h === "prompts" ? "saved" : "prompts"),
+						searchInputRef: N,
+						onRefresh: o ? ye : void 0,
+						isRefreshing: s
+					}), h === "prompts" ? /* @__PURE__ */ (0, R.jsx)(ue, {
+						prompts: H,
+						selectedPrompt: U,
+						onPromptSelect: J,
+						focusedIndex: j
+					}) : /* @__PURE__ */ (0, R.jsx)(de, {
+						savedPrompts: _,
+						selectedPrompt: l,
+						onLoadPrompt: $,
+						onDeletePrompt: we,
+						focusedIndex: j
+					})] }) })
+				})
+			}),
+			/* @__PURE__ */ (0, R.jsx)(S, { withHandle: !0 }),
+			/* @__PURE__ */ (0, R.jsx)(x, {
+				defaultSize: "67%",
+				children: /* @__PURE__ */ (0, R.jsxs)(w, {
+					orientation: "vertical",
+					children: [
+						/* @__PURE__ */ (0, R.jsx)(x, {
+							panelRef: Q,
+							defaultSize: "40%",
+							collapsible: !0,
+							children: /* @__PURE__ */ (0, R.jsx)(ce, {
+								selectedPrompt: U,
+								promptArgs: pe,
+								isExecuting: q,
+								isConnected: a,
+								onArgChange: he,
+								onExecute: ge,
+								onSave: Ce
+							})
+						}),
+						/* @__PURE__ */ (0, R.jsx)(S, { withHandle: !0 }),
+						/* @__PURE__ */ (0, R.jsx)(x, {
+							defaultSize: "60%",
+							children: /* @__PURE__ */ (0, R.jsx)("div", {
+								className: "flex flex-col h-full",
+								children: /* @__PURE__ */ (0, R.jsx)(le, {
+									results: G,
+									copiedResult: m,
+									onCopy: be,
+									onDelete: K,
+									onFullscreen: xe,
+									onMaximize: Se,
+									isMaximized: B
+								})
+							})
+						})
+					]
+				})
+			})
+		]
+	});
+}
+K.displayName = "PromptsTab";
+//#endregion
+export { K as PromptsTab };