@mcp-use/inspector 20.0.0-beta.1 → 20.0.0-beta.3

package/dist/cdn/PromptsTab-BajHFLa3.js

@@ -0,0 +1,901 @@
+import { s as e, t } from "./react-BIs9pQ3H.js";
+import { Pr as n, Rr as r, cr as i, f as a, lr as o, sr as s, t as c, ur as l } from "./input-C2OBd4PJ.js";
+import { t as u } from "./jsx-runtime-CIxvMpEo.js";
+import { t as d } from "./label-B9Jmm9be.js";
+import { t as ee } from "./AnimatePresence-Dcw-FOy8.js";
+import { a as f, i as p, n as m, r as h, t as g } from "./select-DDdiIPR2.js";
+import { a as _, i as v, t as y } from "./browser-CbQIH4w2.js";
+import { n as b, t as te } from "./zap-Mb-pbw2X.js";
+import { t as x } from "./clock-CmUbSx_B.js";
+import { t as ne } from "./JSONDisplay-BFxf5oEu.js";
+import { a as S, i as C, n as w, o as T, r as E, s as D } from "./shared-DaILIQPP.js";
+import { t as re } from "./history-Csw4rb44.js";
+import { t as O } from "./maximize-BALCV_ep.js";
+import { t as k } from "./message-square-BnxdpJxZ.js";
+import { n as A, t as j } from "./save-Tgil_AJZ.js";
+import { t as M } from "./play-vuZ5PLnI.js";
+import { t as N } from "./trash-2-RwpJY5SL.js";
+import { t as P } from "./not-found-DEtSM_Wd.js";
+import { t as F } from "./spinner-jQtC7EBj.js";
+import { n as ie } from "./InspectorContext-UjtEbNod.js";
+import { n as ae, t as I } from "./MarkdownRenderer-_aYcof42.js";
+import { t as L } from "./textarea-DSbwcFVt.js";
+import { t as oe } from "./ListTabHeader-Cv-GmtGF.js";
+//#region src/client/components/prompts/PromptInputForm.tsx
+var R = /* @__PURE__ */ e(t(), 1), z = u();
+function B({ selectedPrompt: e, promptArgs: t, onArgChange: n }) {
+	let r = e?.arguments || [];
+	if (!(r.length > 0)) return /* @__PURE__ */ (0, z.jsx)("div", {
+		className: "flex items-center justify-center h-32 text-gray-500 dark:text-gray-400 text-sm",
+		children: "No arguments required"
+	});
+	let i = (e) => {
+		let r = e.name, i = t[r], a = typeof i == "string" ? i : JSON.stringify(i);
+		return e.type === "boolean" ? /* @__PURE__ */ (0, z.jsxs)("div", {
+			className: "space-y-2",
+			children: [/* @__PURE__ */ (0, z.jsxs)("div", { children: [/* @__PURE__ */ (0, z.jsxs)(d, {
+				htmlFor: r,
+				className: "text-sm font-medium",
+				children: [r, e.required && /* @__PURE__ */ (0, z.jsx)("span", {
+					className: "text-red-500 ml-1",
+					children: "*"
+				})]
+			}), e.description && /* @__PURE__ */ (0, z.jsx)("p", {
+				className: "mt-0.5 text-xs text-gray-500 dark:text-gray-400",
+				children: e.description
+			})] }), /* @__PURE__ */ (0, z.jsx)("input", {
+				id: r,
+				type: "checkbox",
+				checked: !!i,
+				onChange: (e) => n(r, e.target.checked),
+				className: "rounded",
+				"aria-label": `Toggle ${r}`
+			})]
+		}, r) : e.type === "number" ? /* @__PURE__ */ (0, z.jsxs)("div", {
+			className: "space-y-2",
+			children: [/* @__PURE__ */ (0, z.jsxs)("div", { children: [/* @__PURE__ */ (0, z.jsxs)(d, {
+				htmlFor: r,
+				className: "text-sm font-medium",
+				children: [r, e.required && /* @__PURE__ */ (0, z.jsx)("span", {
+					className: "text-red-500 ml-1",
+					children: "*"
+				})]
+			}), e.description && /* @__PURE__ */ (0, z.jsx)("p", {
+				className: "mt-0.5 text-xs text-gray-500 dark:text-gray-400",
+				children: e.description
+			})] }), /* @__PURE__ */ (0, z.jsx)(c, {
+				id: r,
+				type: "number",
+				value: Number(i) || 0,
+				onChange: (e) => n(r, Number(e.target.value)),
+				placeholder: `Enter ${r}`
+			})]
+		}, r) : e.type === "array" || e.type === "object" ? /* @__PURE__ */ (0, z.jsxs)("div", {
+			className: "space-y-2",
+			children: [/* @__PURE__ */ (0, z.jsxs)("div", { children: [/* @__PURE__ */ (0, z.jsxs)(d, {
+				htmlFor: r,
+				className: "text-sm font-medium",
+				children: [r, e.required && /* @__PURE__ */ (0, z.jsx)("span", {
+					className: "text-red-500 ml-1",
+					children: "*"
+				})]
+			}), e.description && /* @__PURE__ */ (0, z.jsx)("p", {
+				className: "mt-0.5 text-xs text-gray-500 dark:text-gray-400",
+				children: e.description
+			})] }), /* @__PURE__ */ (0, z.jsx)(L, {
+				id: r,
+				value: a,
+				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, z.jsxs)("div", {
+			className: "space-y-2",
+			children: [/* @__PURE__ */ (0, z.jsxs)("div", { children: [/* @__PURE__ */ (0, z.jsxs)(d, {
+				htmlFor: r,
+				className: "text-sm font-medium",
+				children: [r, e.required && /* @__PURE__ */ (0, z.jsx)("span", {
+					className: "text-red-500 ml-1",
+					children: "*"
+				})]
+			}), e.description && /* @__PURE__ */ (0, z.jsx)("p", {
+				className: "mt-0.5 text-xs text-gray-500 dark:text-gray-400",
+				children: e.description
+			})] }), /* @__PURE__ */ (0, z.jsx)(c, {
+				id: r,
+				"data-testid": `prompt-param-${r}`,
+				value: a,
+				onChange: (e) => n(r, e.target.value),
+				placeholder: `Enter ${r}`
+			})]
+		}, r);
+	};
+	return /* @__PURE__ */ (0, z.jsx)("div", {
+		className: "space-y-4",
+		children: r.map((e) => i(e))
+	});
+}
+//#endregion
+//#region src/client/components/prompts/PromptExecutionPanel.tsx
+function se({ selectedPrompt: e, promptArgs: t, isExecuting: n, isConnected: a, onArgChange: c, onExecute: u, onSave: d }) {
+	return (0, R.useEffect)(() => {
+		let t = (t) => {
+			(t.metaKey || t.ctrlKey) && t.key === "Enter" && e && !n && a && (t.preventDefault(), u());
+		};
+		return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+	}, [
+		e,
+		n,
+		a,
+		u
+	]), e ? /* @__PURE__ */ (0, z.jsxs)("div", {
+		className: "flex flex-col h-full",
+		children: [/* @__PURE__ */ (0, z.jsx)("div", {
+			className: "flex-shrink-0 p-3 sm:p-6 pt-3 pb-4 pr-3",
+			children: /* @__PURE__ */ (0, z.jsxs)("div", { children: [/* @__PURE__ */ (0, z.jsxs)("div", {
+				className: "flex flex-row items-center justify-between mb-0 gap-2",
+				children: [/* @__PURE__ */ (0, z.jsx)("h3", {
+					className: "text-base sm:text-lg font-semibold",
+					children: e.name
+				}), /* @__PURE__ */ (0, z.jsxs)("div", {
+					className: "flex gap-2 flex-shrink-0",
+					children: [/* @__PURE__ */ (0, z.jsx)(s, {
+						onClick: u,
+						disabled: n || !a,
+						size: "sm",
+						className: i,
+						"data-testid": "prompt-execute-button",
+						children: n ? /* @__PURE__ */ (0, z.jsxs)(z.Fragment, { children: [/* @__PURE__ */ (0, z.jsx)(F, {}), /* @__PURE__ */ (0, z.jsx)("span", {
+							className: "hidden sm:inline",
+							children: "Executing..."
+						})] }) : /* @__PURE__ */ (0, z.jsxs)(z.Fragment, { children: [
+							/* @__PURE__ */ (0, z.jsx)(M, {}),
+							/* @__PURE__ */ (0, z.jsx)("span", {
+								className: "hidden sm:inline",
+								children: "Execute"
+							}),
+							/* @__PURE__ */ (0, z.jsx)("span", {
+								className: o,
+								children: "⌘↵"
+							})
+						] })
+					}), /* @__PURE__ */ (0, z.jsxs)(s, {
+						variant: "outline",
+						onClick: d,
+						disabled: n,
+						size: "sm",
+						className: r(l, "gap-2"),
+						children: [/* @__PURE__ */ (0, z.jsx)(j, {}), /* @__PURE__ */ (0, z.jsx)("span", {
+							className: "hidden sm:inline",
+							children: "Save"
+						})]
+					})]
+				})]
+			}), e.description && /* @__PURE__ */ (0, z.jsx)("p", {
+				className: "text-sm text-gray-600 dark:text-gray-400 leading-relaxed mt-2",
+				children: e.description
+			})] })
+		}), /* @__PURE__ */ (0, z.jsx)("div", {
+			className: "flex-1 overflow-y-auto px-3 sm:px-6 pb-4 pr-3",
+			children: /* @__PURE__ */ (0, z.jsx)(B, {
+				selectedPrompt: e,
+				promptArgs: t,
+				onArgChange: c
+			})
+		})]
+	}) : /* @__PURE__ */ (0, z.jsxs)("div", {
+		className: "flex flex-col items-center justify-center h-full p-4 text-center",
+		children: [/* @__PURE__ */ (0, z.jsx)("p", {
+			className: "text-gray-500 dark:text-gray-400 mb-2",
+			children: "Select a prompt to get started"
+		}), /* @__PURE__ */ (0, z.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 V(e) {
+	switch (e) {
+		case "system": return "default";
+		case "user": return "outline";
+		case "assistant": return "secondary";
+		default: return "outline";
+	}
+}
+function H(e) {
+	return e.charAt(0).toUpperCase() + e.slice(1);
+}
+function U(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 W({ message: e, index: t }) {
+	let [r, i] = (0, R.useState)(!1);
+	return /* @__PURE__ */ (0, z.jsxs)("div", {
+		className: "border border-border rounded-lg overflow-hidden bg-white dark:bg-zinc-900",
+		children: [/* @__PURE__ */ (0, z.jsxs)("div", {
+			className: "flex items-center justify-between px-4 py-2 bg-muted/30 border-b border-border",
+			children: [/* @__PURE__ */ (0, z.jsx)(n, {
+				variant: V(e.role),
+				children: H(e.role)
+			}), /* @__PURE__ */ (0, z.jsx)(s, {
+				variant: "ghost",
+				size: "sm",
+				onClick: async () => {
+					await y(U(e.content)), i(!0), setTimeout(() => i(!1), 2e3);
+				},
+				className: "h-6 px-2",
+				title: "Copy message content",
+				children: r ? /* @__PURE__ */ (0, z.jsx)(_, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, z.jsx)(v, { className: "h-3.5 w-3.5" })
+			})]
+		}), /* @__PURE__ */ (0, z.jsx)("div", {
+			className: "px-4 py-3",
+			"data-testid": `prompt-message-content-${t}`,
+			children: (() => {
+				let t = e.content;
+				return typeof t == "string" ? /* @__PURE__ */ (0, z.jsx)(I, { content: t }) : t.type === "text" && t.text ? /* @__PURE__ */ (0, z.jsx)(I, { content: t.text }) : t.type === "image" ? /* @__PURE__ */ (0, z.jsxs)("div", {
+					className: "flex items-center gap-2 text-sm text-muted-foreground",
+					children: [/* @__PURE__ */ (0, z.jsxs)("span", {
+						className: "font-mono bg-muted px-2 py-1 rounded",
+						children: ["Image: ", t.mimeType || "unknown type"]
+					}), t.data && /* @__PURE__ */ (0, z.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, z.jsxs)("div", {
+					className: "space-y-2",
+					children: [/* @__PURE__ */ (0, z.jsxs)("div", {
+						className: "flex items-center gap-2 text-sm",
+						children: [/* @__PURE__ */ (0, z.jsx)("span", {
+							className: "text-muted-foreground font-medium",
+							children: "Resource:"
+						}), /* @__PURE__ */ (0, z.jsx)("code", {
+							className: "bg-muted px-2 py-0.5 rounded text-xs font-mono",
+							children: t.resource.uri
+						})]
+					}), t.resource.text && /* @__PURE__ */ (0, z.jsx)("div", {
+						className: "mt-2",
+						children: /* @__PURE__ */ (0, z.jsx)(I, { content: t.resource.text })
+					})]
+				}) : /* @__PURE__ */ (0, z.jsx)("pre", {
+					className: "bg-muted p-3 rounded-lg text-sm overflow-x-auto",
+					children: /* @__PURE__ */ (0, z.jsx)("code", { children: JSON.stringify(t, null, 2) })
+				});
+			})()
+		})]
+	});
+}
+//#endregion
+//#region src/client/components/prompts/PromptResultDisplay.tsx
+function G(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 K(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 ce({ results: e, copiedResult: t, previewMode: n = !0, onCopy: r, onDelete: i, onFullscreen: a, onTogglePreview: o, onMaximize: c, isMaximized: l = !1 }) {
+	let [u, d] = (0, R.useState)(0), [ee, y] = (0, R.useState)(""), [b, x] = (0, R.useState)(!0), S = e[0], C = S ? e.filter((e) => e.promptName === S.promptName) : [], w = C[u] || C[0], T = e.findIndex((e) => e === w);
+	if ((0, R.useEffect)(() => {
+		C.length > 0 && u >= C.length && d(0);
+	}, [C.length, u]), (0, R.useEffect)(() => {
+		let e = () => {
+			w && y(G(w.timestamp));
+		};
+		e();
+		let t = setInterval(e, 1e3);
+		return () => clearInterval(t);
+	}, [w]), e.length === 0) return /* @__PURE__ */ (0, z.jsx)("div", {
+		className: "flex flex-col h-full bg-white dark:bg-black border-t dark:border-zinc-700",
+		children: /* @__PURE__ */ (0, z.jsx)("div", {
+			className: "flex-1 overflow-y-auto h-full",
+			children: /* @__PURE__ */ (0, z.jsx)("div", {
+				className: "flex items-center justify-center h-full",
+				children: /* @__PURE__ */ (0, z.jsx)("div", {
+					className: "text-center",
+					children: /* @__PURE__ */ (0, z.jsx)(P, {
+						vertical: !0,
+						noBorder: !0,
+						message: "No Results yet"
+					})
+				})
+			})
+		})
+	});
+	let E = w.error || K(w.result), D = "messages" in w.result && Array.isArray(w.result.messages);
+	return /* @__PURE__ */ (0, z.jsx)("div", {
+		className: "flex flex-col h-full bg-white dark:bg-black border-t dark:border-zinc-700",
+		children: /* @__PURE__ */ (0, z.jsx)("div", {
+			className: "flex-1 overflow-y-auto h-full",
+			children: /* @__PURE__ */ (0, z.jsxs)("div", {
+				className: "space-y-0 flex-1 h-full flex flex-col",
+				children: [/* @__PURE__ */ (0, z.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, z.jsx)("h3", {
+							className: "text-sm font-medium hidden sm:block",
+							children: "Response"
+						}),
+						w.duration !== void 0 && /* @__PURE__ */ (0, z.jsxs)("div", {
+							className: "hidden sm:flex items-center gap-1",
+							children: [/* @__PURE__ */ (0, z.jsx)(te, { className: "h-3 w-3 text-gray-400" }), /* @__PURE__ */ (0, z.jsxs)("span", {
+								className: "text-xs text-gray-500 dark:text-gray-400",
+								children: [w.duration, "ms"]
+							})]
+						}),
+						D && /* @__PURE__ */ (0, z.jsx)("div", {
+							className: "flex items-center gap-4 sm:ml-4",
+							children: /* @__PURE__ */ (0, z.jsxs)("div", {
+								className: "flex items-center gap-2",
+								children: [
+									/* @__PURE__ */ (0, z.jsx)("button", {
+										onClick: () => x(!0),
+										className: `text-xs font-medium ${b ? "text-black dark:text-white" : "text-zinc-500 dark:text-zinc-400"}`,
+										children: "Formatted"
+									}),
+									/* @__PURE__ */ (0, z.jsx)("span", {
+										className: "text-xs text-zinc-400",
+										children: "|"
+									}),
+									/* @__PURE__ */ (0, z.jsx)("button", {
+										onClick: () => x(!1),
+										className: `text-xs font-medium ${b ? "text-zinc-500 dark:text-zinc-400" : "text-black dark:text-white"}`,
+										children: "Raw"
+									})
+								]
+							})
+						}),
+						/* @__PURE__ */ (0, z.jsxs)("div", {
+							className: "ml-auto flex items-center gap-1",
+							children: [
+								C.length > 1 && /* @__PURE__ */ (0, z.jsxs)("div", {
+									className: "flex items-center gap-2 mr-2",
+									children: [/* @__PURE__ */ (0, z.jsx)(re, { className: "h-3 w-3 text-gray-400" }), /* @__PURE__ */ (0, z.jsxs)(g, {
+										value: u.toString(),
+										onValueChange: (e) => d(parseInt(e)),
+										children: [/* @__PURE__ */ (0, z.jsx)(p, {
+											className: "h-7 w-[120px] text-xs",
+											children: /* @__PURE__ */ (0, z.jsx)(f, {})
+										}), /* @__PURE__ */ (0, z.jsx)(m, { children: C.map((e, t) => /* @__PURE__ */ (0, z.jsx)(h, {
+											value: t.toString(),
+											children: t === 0 ? "Latest" : `${t + 1} call ago`
+										}, t)) })]
+									})]
+								}),
+								/* @__PURE__ */ (0, z.jsx)("span", {
+									className: "text-xs text-gray-500 dark:text-gray-400 mr-2",
+									children: ee
+								}),
+								/* @__PURE__ */ (0, z.jsx)(s, {
+									variant: "ghost",
+									size: "sm",
+									onClick: () => r(T, w.result),
+									className: "h-7 w-7 p-0",
+									title: "Copy result",
+									children: t === T ? /* @__PURE__ */ (0, z.jsx)(_, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, z.jsx)(v, { className: "h-4 w-4" })
+								}),
+								i && /* @__PURE__ */ (0, z.jsx)(s, {
+									variant: "ghost",
+									size: "sm",
+									onClick: () => i(T),
+									className: "h-7 w-7 p-0",
+									title: "Delete result",
+									children: /* @__PURE__ */ (0, z.jsx)(N, { className: "h-4 w-4" })
+								}),
+								a && /* @__PURE__ */ (0, z.jsx)(s, {
+									variant: "ghost",
+									size: "sm",
+									onClick: () => a(T),
+									className: "h-7 w-7 p-0 sm:hidden",
+									title: "Fullscreen",
+									children: /* @__PURE__ */ (0, z.jsx)(O, { className: "h-4 w-4" })
+								}),
+								c && /* @__PURE__ */ (0, z.jsx)(s, {
+									variant: "ghost",
+									size: "sm",
+									onClick: c,
+									className: "h-7 w-7 p-0 hidden sm:flex",
+									title: l ? "Restore" : "Maximize",
+									children: l ? /* @__PURE__ */ (0, z.jsx)(A, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, z.jsx)(O, { className: "h-4 w-4" })
+								})
+							]
+						})
+					]
+				}), /* @__PURE__ */ (0, z.jsx)("div", {
+					className: "flex-1 overflow-y-auto p-4",
+					children: E ? /* @__PURE__ */ (0, z.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, z.jsx)("p", {
+							className: "text-red-800 dark:text-red-300 font-medium",
+							children: "Error:"
+						}), /* @__PURE__ */ (0, z.jsx)("p", {
+							className: "text-red-700 dark:text-red-400 text-sm",
+							children: E
+						})]
+					}) : b && D ? /* @__PURE__ */ (0, z.jsx)("div", {
+						className: "space-y-3",
+						children: ("messages" in w.result ? w.result.messages : []).map((e, t) => /* @__PURE__ */ (0, z.jsx)(W, {
+							message: e,
+							index: t
+						}, t))
+					}) : /* @__PURE__ */ (0, z.jsx)(ne, {
+						data: w.result,
+						filename: `prompt-result-${w.promptName}-${Date.now()}.json`
+					})
+				})]
+			})
+		})
+	});
+}
+//#endregion
+//#region src/client/components/prompts/PromptsList.tsx
+function le({ prompts: e, selectedPrompt: t, onPromptSelect: r, focusedIndex: i }) {
+	return e.length === 0 ? /* @__PURE__ */ (0, z.jsxs)("div", {
+		className: "flex flex-1 flex-col items-center justify-center p-4 text-center",
+		children: [/* @__PURE__ */ (0, z.jsx)(k, { className: "h-12 w-12 text-gray-400 dark:text-gray-600 mb-3" }), /* @__PURE__ */ (0, z.jsx)("p", {
+			className: "text-gray-500 dark:text-gray-400",
+			children: "No prompts available"
+		})]
+	}) : /* @__PURE__ */ (0, z.jsx)("div", { children: e.map((e, a) => /* @__PURE__ */ (0, z.jsx)(E, {
+		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, z.jsxs)(n, {
+			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: () => r(e)
+	}, e.name)) });
+}
+//#endregion
+//#region src/client/components/prompts/SavedPromptsList.tsx
+function ue({ savedPrompts: e, selectedPrompt: t, onLoadPrompt: n, onDeletePrompt: r, focusedIndex: i }) {
+	return e.length === 0 ? /* @__PURE__ */ (0, z.jsxs)("div", {
+		className: "flex flex-1 flex-col items-center justify-center p-4 text-center",
+		children: [
+			/* @__PURE__ */ (0, z.jsx)(x, { className: "h-12 w-12 text-gray-400 dark:text-gray-600 mb-3" }),
+			/* @__PURE__ */ (0, z.jsx)("p", {
+				className: "text-gray-500 dark:text-gray-400",
+				children: "No history"
+			}),
+			/* @__PURE__ */ (0, z.jsx)("p", {
+				className: "text-sm text-gray-400 dark:text-gray-500 mt-1",
+				children: "Prompts you execute will appear here"
+			})
+		]
+	}) : /* @__PURE__ */ (0, z.jsx)("div", { children: e.map((e, r) => /* @__PURE__ */ (0, z.jsx)(E, {
+		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 de = "mcp-inspector-saved-prompts";
+function q({ ref: e, prompts: t, callPrompt: n, serverId: r, isConnected: i, refreshPrompts: o }) {
+	let [c, l] = (0, R.useState)(!1), [u, d] = (0, R.useState)(null), { selectedPromptName: f, setSelectedPromptName: p } = ie(), [m, h] = (0, R.useState)(null), [g, _] = (0, R.useState)("prompts"), [v, te] = (0, R.useState)([]), [ne, E] = (0, R.useState)(!1), [re, O] = (0, R.useState)(""), [A, j] = (0, R.useState)(!1), [M, N] = (0, R.useState)(-1), P = (0, R.useRef)(null), [F, I] = (0, R.useState)(!1), [L, B] = (0, R.useState)("list"), [V, H] = (0, R.useState)(!1), { filteredPrompts: U, selectedPrompt: W, setSelectedPrompt: G, results: K, handleDeleteResult: q, promptArgs: fe, setPromptArgs: pe, isExecuting: J, handlePromptSelect: Y, handleArgChange: me, executeSelectedPrompt: he, searchQuery: X, setSearchQuery: ge } = ae({
+		prompts: t,
+		callPrompt: n,
+		serverId: r
+	}), Z = D(), Q = D();
+	(0, R.useEffect)(() => {
+		let e = () => {
+			I(window.innerWidth < 1024);
+		};
+		return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+	}, []), (0, R.useEffect)(() => {
+		B(W ? "detail" : "list");
+	}, [W]), (0, R.useEffect)(() => {
+		F && K.length > 0 && !J && B("response");
+	}, [
+		K,
+		J,
+		F
+	]), (0, R.useImperativeHandle)(e, () => ({
+		focusSearch: () => {
+			j(!0), setTimeout(() => {
+				P.current && P.current.focus();
+			}, 0);
+		},
+		blurSearch: () => {
+			ge(""), j(!1), P.current && P.current.blur();
+		}
+	})), (0, R.useEffect)(() => {
+		try {
+			let e = localStorage.getItem(de);
+			e && te(JSON.parse(e));
+		} catch (e) {
+			console.error("[PromptsTab] Failed to load saved prompts:", e);
+		}
+	}, []);
+	let _e = (0, R.useCallback)((e) => {
+		try {
+			localStorage.setItem(de, JSON.stringify(e));
+		} catch (e) {
+			console.error("[PromptsTab] Failed to save prompts:", e);
+		}
+	}, []);
+	(0, R.useEffect)(() => {
+		A && P.current && P.current.focus();
+	}, [A]);
+	let ve = (0, R.useCallback)(() => {
+		X.trim() || j(!1);
+	}, [X]), ye = (0, R.useCallback)(async () => {
+		if (o) {
+			l(!0);
+			try {
+				await o();
+			} finally {
+				l(!1);
+			}
+		}
+	}, [o]), $ = (0, R.useCallback)((e) => {
+		let n = t.find((t) => t.name === e.promptName);
+		n && (G(n), pe(e.args), d(e));
+	}, [
+		t,
+		G,
+		pe
+	]);
+	(0, R.useEffect)(() => {
+		N(-1);
+	}, [X, g]), (0, R.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 = g === "prompts" ? U : v;
+			if (e.key === "ArrowDown") e.preventDefault(), N((e) => {
+				let t = e + 1;
+				return t >= n.length ? 0 : t;
+			});
+			else if (e.key === "ArrowUp") e.preventDefault(), N((e) => {
+				let t = e - 1;
+				return t < 0 ? n.length - 1 : t;
+			});
+			else if (e.key === "Enter" && M >= 0) if (e.preventDefault(), g === "prompts") {
+				let e = U[M];
+				e && Y(e);
+			} else {
+				let e = v[M];
+				e && $(e);
+			}
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [
+		M,
+		U,
+		v,
+		g,
+		Y,
+		$
+	]), (0, R.useEffect)(() => {
+		if (M >= 0) {
+			let e = g === "prompts" ? `prompt-${U[M]?.name}` : `saved-prompt-${v[M]?.id}`, t = document.getElementById(e);
+			t && t.scrollIntoView({
+				behavior: "smooth",
+				block: "nearest"
+			});
+		}
+	}, [
+		M,
+		U,
+		v,
+		g
+	]), (0, R.useEffect)(() => {
+		if (console.warn("[PromptsTab] Auto-selection effect triggered:", {
+			selectedPromptName: f,
+			promptsCount: t.length,
+			currentSelectedPrompt: W?.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 && W?.name !== e.name
+			}), e && W?.name !== e.name) {
+				console.warn("[PromptsTab] Selecting prompt:", e.name), p(null);
+				let t = setTimeout(() => {
+					Y(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,
+		W,
+		Y,
+		p
+	]);
+	let be = (0, R.useCallback)(async (e, t) => {
+		try {
+			await y(JSON.stringify(t, null, 2)), h(e), setTimeout(() => h(null), 2e3);
+		} catch (e) {
+			console.error("[PromptsTab] Failed to copy result:", e);
+		}
+	}, []), xe = (0, R.useCallback)((e) => {
+		if (F) B("response");
+		else {
+			let t = K[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();
+				}
+			}
+		}
+	}, [F, K]), Se = (0, R.useCallback)(() => {
+		V ? (Z.current && Z.current.expand(), Q.current && Q.current.expand(), H(!1)) : (Z.current && Z.current.collapse(), Q.current && Q.current.collapse(), H(!0));
+	}, [
+		V,
+		Z,
+		Q
+	]), Ce = (0, R.useCallback)(() => {
+		W && (O(""), E(!0));
+	}, [W]), we = (0, R.useCallback)((e) => {
+		_e(v.filter((t) => t.id !== e)), u?.id === e && d(null);
+	}, [
+		v,
+		_e,
+		u
+	]);
+	return F ? /* @__PURE__ */ (0, z.jsxs)("div", {
+		className: "h-full flex flex-col overflow-hidden relative bg-background",
+		children: [L !== "list" && /* @__PURE__ */ (0, z.jsxs)("div", {
+			className: "flex items-center gap-2 p-2 border-b shrink-0 bg-background z-10",
+			children: [/* @__PURE__ */ (0, z.jsx)(s, {
+				variant: "ghost",
+				size: "sm",
+				onClick: () => {
+					L === "response" ? B("detail") : (G(null), B("list"));
+				},
+				className: "p-0 h-8 w-8",
+				children: /* @__PURE__ */ (0, z.jsx)(b, { className: "h-4 w-4" })
+			}), /* @__PURE__ */ (0, z.jsxs)("div", {
+				className: "flex items-center text-sm font-medium",
+				children: [
+					/* @__PURE__ */ (0, z.jsx)("button", {
+						onClick: () => {
+							G(null), B("list");
+						},
+						className: "text-muted-foreground hover:text-foreground hover:underline cursor-pointer",
+						children: "Prompts"
+					}),
+					L === "detail" && /* @__PURE__ */ (0, z.jsxs)(z.Fragment, { children: [/* @__PURE__ */ (0, z.jsx)("span", {
+						className: "mx-2 text-muted-foreground",
+						children: "/"
+					}), /* @__PURE__ */ (0, z.jsx)("button", {
+						onClick: () => {
+							B("response");
+						},
+						className: L === "detail" ? "text-foreground hover:underline" : L === "response" ? "text-muted-foreground hover:text-foreground hover:underline cursor-pointer" : "text-muted-foreground",
+						children: "Execute"
+					})] }),
+					L === "response" && /* @__PURE__ */ (0, z.jsxs)(z.Fragment, { children: [/* @__PURE__ */ (0, z.jsx)("span", {
+						className: "mx-2 text-muted-foreground",
+						children: "/"
+					}), /* @__PURE__ */ (0, z.jsx)("span", {
+						className: "text-foreground",
+						children: "Response"
+					})] })
+				]
+			})]
+		}), /* @__PURE__ */ (0, z.jsx)("div", {
+			className: "flex-1 relative overflow-hidden",
+			children: /* @__PURE__ */ (0, z.jsxs)(ee, {
+				initial: !1,
+				mode: "popLayout",
+				children: [
+					L === "list" && /* @__PURE__ */ (0, z.jsx)(a.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, z.jsx)(w, { children: (e) => /* @__PURE__ */ (0, z.jsxs)(z.Fragment, { children: [/* @__PURE__ */ (0, z.jsx)(oe, {
+							isScrolled: e,
+							activeTab: g,
+							isSearchExpanded: A,
+							searchQuery: X,
+							primaryTabName: "prompts",
+							secondaryTabName: "saved",
+							primaryTabTitle: "Prompts",
+							secondaryTabTitle: "History",
+							primaryCount: U.length,
+							secondaryCount: v.length,
+							primaryIcon: k,
+							secondaryIcon: x,
+							searchPlaceholder: "Search prompts...",
+							onSearchExpand: () => j(!0),
+							onSearchChange: ge,
+							onSearchBlur: ve,
+							onTabSwitch: () => _(g === "prompts" ? "saved" : "prompts"),
+							searchInputRef: P,
+							onRefresh: o ? ye : void 0,
+							isRefreshing: c
+						}), g === "prompts" ? /* @__PURE__ */ (0, z.jsx)(le, {
+							prompts: U,
+							selectedPrompt: W,
+							onPromptSelect: Y,
+							focusedIndex: M
+						}) : /* @__PURE__ */ (0, z.jsx)(ue, {
+							savedPrompts: v,
+							selectedPrompt: u,
+							onLoadPrompt: $,
+							onDeletePrompt: we,
+							focusedIndex: M
+						})] }) })
+					}, "list"),
+					L === "detail" && /* @__PURE__ */ (0, z.jsx)(a.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, z.jsx)(se, {
+							selectedPrompt: W,
+							promptArgs: fe,
+							isExecuting: J,
+							isConnected: i,
+							onArgChange: me,
+							onExecute: he,
+							onSave: Ce
+						})
+					}, "detail"),
+					L === "response" && /* @__PURE__ */ (0, z.jsx)(a.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, z.jsx)(ce, {
+							results: K,
+							copiedResult: m,
+							onCopy: be,
+							onDelete: q,
+							onFullscreen: xe
+						})
+					}, "response")
+				]
+			})
+		})]
+	}) : /* @__PURE__ */ (0, z.jsxs)(T, {
+		orientation: "horizontal",
+		className: "h-full",
+		children: [
+			/* @__PURE__ */ (0, z.jsx)(S, {
+				id: "left-panel",
+				panelRef: Z,
+				defaultSize: "33%",
+				collapsible: !0,
+				className: "flex flex-col h-full relative",
+				children: /* @__PURE__ */ (0, z.jsx)("div", {
+					className: "flex h-full flex-col overflow-hidden border-r dark:border-zinc-700",
+					children: /* @__PURE__ */ (0, z.jsx)(w, { children: (e) => /* @__PURE__ */ (0, z.jsxs)(z.Fragment, { children: [/* @__PURE__ */ (0, z.jsx)(oe, {
+						isScrolled: e,
+						activeTab: g,
+						isSearchExpanded: A,
+						searchQuery: X,
+						primaryTabName: "prompts",
+						secondaryTabName: "saved",
+						primaryTabTitle: "Prompts",
+						secondaryTabTitle: "History",
+						primaryCount: U.length,
+						secondaryCount: v.length,
+						primaryIcon: k,
+						secondaryIcon: x,
+						searchPlaceholder: "Search prompts...",
+						onSearchExpand: () => j(!0),
+						onSearchChange: ge,
+						onSearchBlur: ve,
+						onTabSwitch: () => _(g === "prompts" ? "saved" : "prompts"),
+						searchInputRef: P,
+						onRefresh: o ? ye : void 0,
+						isRefreshing: c
+					}), g === "prompts" ? /* @__PURE__ */ (0, z.jsx)(le, {
+						prompts: U,
+						selectedPrompt: W,
+						onPromptSelect: Y,
+						focusedIndex: M
+					}) : /* @__PURE__ */ (0, z.jsx)(ue, {
+						savedPrompts: v,
+						selectedPrompt: u,
+						onLoadPrompt: $,
+						onDeletePrompt: we,
+						focusedIndex: M
+					})] }) })
+				})
+			}),
+			/* @__PURE__ */ (0, z.jsx)(C, { withHandle: !0 }),
+			/* @__PURE__ */ (0, z.jsx)(S, {
+				defaultSize: "67%",
+				children: /* @__PURE__ */ (0, z.jsxs)(T, {
+					orientation: "vertical",
+					children: [
+						/* @__PURE__ */ (0, z.jsx)(S, {
+							panelRef: Q,
+							defaultSize: "40%",
+							collapsible: !0,
+							children: /* @__PURE__ */ (0, z.jsx)(se, {
+								selectedPrompt: W,
+								promptArgs: fe,
+								isExecuting: J,
+								isConnected: i,
+								onArgChange: me,
+								onExecute: he,
+								onSave: Ce
+							})
+						}),
+						/* @__PURE__ */ (0, z.jsx)(C, { withHandle: !0 }),
+						/* @__PURE__ */ (0, z.jsx)(S, {
+							defaultSize: "60%",
+							children: /* @__PURE__ */ (0, z.jsx)("div", {
+								className: "flex flex-col h-full",
+								children: /* @__PURE__ */ (0, z.jsx)(ce, {
+									results: K,
+									copiedResult: m,
+									onCopy: be,
+									onDelete: q,
+									onFullscreen: xe,
+									onMaximize: Se,
+									isMaximized: V
+								})
+							})
+						})
+					]
+				})
+			})
+		]
+	});
+}
+q.displayName = "PromptsTab";
+//#endregion
+export { q as PromptsTab };