@dong-victor/dsh-better-sidebar-starter 0.1.0

package/lib/client.js

@@ -0,0 +1,2465 @@
+window.__ModuleLoader__.load({
+	id: "@dong-victor/dsh-better-sidebar-starter",
+	factory: (require) => {
+		var module = { exports: {} };
+		var exports = module.exports;
+		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+		let react = require("react");
+		//#region src/client/icons.tsx
+		/**
+		* SVG icons for the starter plugin. Each icon is a React component that
+		* takes a size prop and renders an inline SVG. Monochrome, currentColor fill.
+		* @module dsh-better-sidebar-starter/client/icons
+		*/
+		function svg(size, pathChildren) {
+			const svgHtml = `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">${pathChildren}</svg>`;
+			return (0, react.createElement)("span", {
+				style: {
+					display: "inline-flex",
+					alignItems: "center",
+					justifyContent: "center",
+					width: size,
+					height: size
+				},
+				dangerouslySetInnerHTML: { __html: svgHtml }
+			});
+		}
+		/** 🚀 Rocket — the tab icon. */
+		function RocketIcon({ size }) {
+			return svg(size, `<path d="M9.19 8.35c.34-.05.67-.1 1-.13 1.2-1.49 2.85-2.49 4.85-3.02 2-.53 4.16-.42 6.5.33.75 2.34.86 4.5.33 6.5-.53 2-1.53 3.65-3.02 4.85-.04.33-.08.66-.13 1-.13.87-.32 1.71-.57 2.5-.42 1.3-1.02 2.5-1.78 3.6-.42.6-1.1.96-1.86.96-.72 0-1.4-.34-1.84-.93l-2.06-2.76c-.2-.27-.5-.43-.82-.43H7.68c-.32 0-.62-.16-.82-.43l-2.06-2.76C4.36 19.34 4 18.66 4 17.94c0-.76.36-1.44.96-1.86 1.1-.76 2.3-1.36 3.6-1.78.79-.25 1.63-.44 2.5-.57l.13-1c.05-.34.1-.67.13-1z" fill="currentColor" opacity="0.85"/><circle cx="15.5" cy="8.5" r="1.5" fill="currentColor" opacity="0.6"/><path d="M5 14c-1 0-2 .5-2 2 0 1 .5 2 .5 2s1-.5 1.5-.5 1.5.5 1.5.5 1-.5 1-2-.5-2-2-2z" fill="currentColor" opacity="0.5"/>`);
+		}
+		/** ▶ Play — start button. */
+		function PlayIcon({ size }) {
+			return svg(size, `<path d="M8 5v14l11-7z" fill="currentColor"/>`);
+		}
+		/** ⏹ Stop — stop button. */
+		function StopIcon({ size }) {
+			return svg(size, `<rect x="6" y="6" width="12" height="12" rx="1" fill="currentColor"/>`);
+		}
+		/** 🔄 Restart — restart button. */
+		function RestartIcon({ size }) {
+			return svg(size, `<path d="M12 5V2L7 7l5 5V8c2.76 0 5 2.24 5 5s-2.24 5-5 5-5-2.24-5-5H5c0 3.87 3.13 7 7 7s7-3.13 7-7-3.13-7-7-7z" fill="currentColor"/>`);
+		}
+		/** ⚙ Gear — edit button. */
+		function GearIcon({ size }) {
+			return svg(size, `<path d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3l-1.97-.39c-.11-.37-.26-.72-.44-1.06l1.14-1.64c.26-.37.22-.88-.09-1.2l-1.28-1.28c-.32-.31-.83-.35-1.2-.09l-1.64 1.14c-.34-.18-.69-.33-1.06-.44L14.94 4c-.1-.42-.47-.72-.9-.72h-1.8c-.43 0-.8.3-.9.72l-.39 1.97c-.37.11-.72.26-1.06.44L7.25 5.27c-.37-.26-.88-.22-1.2.09L4.77 6.64c-.31.32-.35.83-.09 1.2l1.14 1.64c-.18.34-.33.69-.44 1.06L3.4 11c-.42.1-.72.47-.72.9v1.8c0 .43.3.8.72.9l1.97.39c.11.37.26.72.44 1.06l-1.14 1.64c-.26.37-.22.88.09 1.2l1.28 1.28c.32.31.83.35 1.2.09l1.64-1.14c.34.18.69.33 1.06.44l.39 1.97c.1.42.47.72.9.72h1.8c.43 0 .8-.3.9-.72l.39-1.97c.37-.11.72-.26 1.06-.44l1.64 1.14c.37.26.88.22 1.2-.09l1.28-1.28c.31-.32.35-.83.09-1.2l-1.14-1.64c.18-.34.33-.69.44-1.06L20.6 14c.42-.1.72-.47.72-.9v-1.8c0-.43-.3-.8-.72-.9z" fill="currentColor"/>`);
+		}
+		/** 🗑 Trash — delete button. */
+		function TrashIcon({ size }) {
+			return svg(size, `<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" fill="currentColor"/>`);
+		}
+		/** ➕ Plus — add new config. */
+		function PlusIcon({ size }) {
+			return svg(size, `<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="currentColor"/>`);
+		}
+		/** ✕ Close — modal cancel. */
+		function CloseIcon({ size }) {
+			return svg(size, `<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="currentColor"/>`);
+		}
+		/** ▾ Chevron down — tree expand. */
+		function ChevronDownIcon({ size }) {
+			return svg(size, `<path d="M7 10l5 5 5-5z" fill="currentColor"/>`);
+		}
+		/** ▸ Chevron right — tree collapse. */
+		function ChevronRightIcon({ size }) {
+			return svg(size, `<path d="M10 7l5 5-5 5z" fill="currentColor"/>`);
+		}
+		/** 🟢 Dot — running status. */
+		function RunningDotIcon({ size }) {
+			return svg(size, `<circle cx="12" cy="12" r="5" fill="#4e9a06"/>`);
+		}
+		/** ✅ Check — completed status. */
+		function CheckIcon({ size }) {
+			return svg(size, `<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="#4e9a06"/>`);
+		}
+		/** 🔴 Error dot — failed status. */
+		function ErrorDotIcon({ size }) {
+			return svg(size, `<circle cx="12" cy="12" r="5" fill="#cc0000"/>`);
+		}
+		/** 📦 npm package icon. */
+		function NpmIcon({ size }) {
+			return svg(size, `<rect x="3" y="3" width="18" height="18" rx="2" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M7 17V8h4v6h2V8h4v9h-4v-3h-2v3H7z" fill="currentColor"/>`);
+		}
+		/** ☕ springboot icon. */
+		function SpringIcon({ size }) {
+			return svg(size, `<path d="M12 2C7.5 2 4 5.5 4 10c0 3 2 5.5 4.5 7 .5-2 1.5-3.5 3-4.5 1.5 1 2.5 2.5 3 4.5 2.5-1.5 4.5-4 4.5-7 0-4.5-3.5-8-7-8z" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M8 10c1-1 2.5-1.5 4-1.5s3 .5 4 1.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>`);
+		}
+		/** 🐍 python icon. */
+		function PythonIcon({ size }) {
+			return svg(size, `<path d="M12 4c-2 0-4 1-4 3v2h4v1H6c-1 0-2 1-2 3s1 3 2 3h2v-2c0-2 2-3 4-3h2c1 0 2-1 2-2V7c0-2-2-3-4-3z" fill="none" stroke="currentColor" stroke-width="1.5"/><circle cx="10.5" cy="6.5" r="0.8" fill="currentColor"/><path d="M12 20c2 0 4-1 4-3v-2h-4v-1h4c1 0 2-1 2-3s-1-3-2-3h-2v2c0 2-2 3-4 3h-2c-1 0-2 1-2 2v3c0 2 2 3 4 3z" fill="none" stroke="currentColor" stroke-width="1.5"/><circle cx="13.5" cy="17.5" r="0.8" fill="currentColor"/>`);
+		}
+		/** ⚡ custom icon. */
+		function CustomIcon({ size }) {
+			return svg(size, `<path d="M11 21h-1l1-7H7.5c-.6 0-.8-.4-.5-.9 1.5-2.6 3.7-6.2 6.5-10.1h1l-1 7h3.5c.6 0 .8.4.5.9C14.5 14.7 12.3 18.1 11 21z" fill="currentColor"/>`);
+		}
+		/** 📁 Folder — directory tree icon. */
+		function FolderIcon({ size }) {
+			return svg(size, `<path d="M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" fill="currentColor" opacity="0.7"/>`);
+		}
+		/** 📋 Clipboard — bulk paste env. */
+		function ClipboardIcon({ size }) {
+			return svg(size, `<path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z" fill="currentColor"/>`);
+		}
+		/** Get the icon for a config type. */
+		function typeIcon(type, size) {
+			switch (type) {
+				case "npm": return NpmIcon({ size });
+				case "springboot": return SpringIcon({ size });
+				case "python": return PythonIcon({ size });
+				default: return CustomIcon({ size });
+			}
+		}
+		//#endregion
+		//#region src/client/ConfigTree.tsx
+		/**
+		* Config tree: the left pane showing all run configurations grouped by type,
+		* with running instances as child nodes.
+		* @module dsh-better-sidebar-starter/client/ConfigTree
+		*/
+		/** Type group order. */
+		const TYPE_ORDER = [
+			"npm",
+			"springboot",
+			"python",
+			"custom"
+		];
+		const TYPE_LABELS$2 = {
+			npm: "npm",
+			springboot: "Spring Boot",
+			python: "Python",
+			custom: "Custom"
+		};
+		/** Status icon for an instance. */
+		function statusIcon(status, size) {
+			switch (status) {
+				case "running": return RunningDotIcon({ size });
+				case "exited": return CheckIcon({ size });
+				case "killed":
+				case "error": return ErrorDotIcon({ size });
+				default: return null;
+			}
+		}
+		/** The config tree component. */
+		function ConfigTree(props) {
+			const { configs, instances, selectedInstanceId, selectedConfigId, onSelectConfig, onSelectInstance, onStartConfig, onStopInstance, onEditConfig } = props;
+			const [collapsed, setCollapsed] = (0, react.useState)(/* @__PURE__ */ new Set());
+			const toggleGroup = (type) => {
+				setCollapsed((prev) => {
+					const next = new Set(prev);
+					if (next.has(type)) next.delete(type);
+					else next.add(type);
+					return next;
+				});
+			};
+			const groups = (0, react.useMemo)(() => {
+				const map = /* @__PURE__ */ new Map();
+				for (const config of configs) {
+					const arr = map.get(config.type) ?? [];
+					arr.push(config);
+					map.set(config.type, arr);
+				}
+				for (const arr of map.values()) arr.sort((a, b) => (b.lastRunAt ?? 0) - (a.lastRunAt ?? 0));
+				return TYPE_ORDER.filter((type) => map.has(type) && map.get(type).length > 0).map((type) => ({
+					type,
+					items: map.get(type)
+				}));
+			}, [configs]);
+			if (configs.length === 0) return (0, react.createElement)("div", { className: "sts-empty" }, "暂无运行配置", (0, react.createElement)("br"), "点击右上角 + 新建配置");
+			return (0, react.createElement)("div", { className: "sts-tree" }, ...groups.map((group) => {
+				const isCollapsed = collapsed.has(group.type);
+				const label = TYPE_LABELS$2[group.type] ?? group.type;
+				const runningCount = instances.filter((inst) => inst.configType === group.type && inst.status === "running").length;
+				return (0, react.createElement)("div", { key: group.type }, (0, react.createElement)("div", {
+					className: "sts-group-header",
+					onClick: () => toggleGroup(group.type)
+				}, isCollapsed ? (0, react.createElement)(ChevronRightIcon, { size: 12 }) : (0, react.createElement)(ChevronDownIcon, { size: 12 }), typeIcon(group.type, 14), label, (0, react.createElement)("span", { className: "sts-group-count" }, ` (${group.items.length}${runningCount > 0 ? `, ${runningCount} 运行中` : ""})`)), (0, react.createElement)("div", { className: `sts-group-children${isCollapsed ? " collapsed" : ""}` }, ...group.items.flatMap((config) => {
+					const configInstances = instances.filter((inst) => inst.configId === config.id);
+					const isRunning = configInstances.some((inst) => inst.status === "running");
+					const isSelected = selectedConfigId === config.id && selectedInstanceId === null;
+					const rows = [(0, react.createElement)("div", {
+						key: config.id,
+						className: `sts-config-row${isSelected ? " selected" : ""}${isRunning ? " running" : ""}`,
+						onClick: () => onSelectConfig(config.id)
+					}, isRunning ? RunningDotIcon({ size: 12 }) : typeIcon(config.type, 12), (0, react.createElement)("div", { className: "sts-config-name" }, config.name), (0, react.createElement)("div", { className: "sts-config-cmd" }, config.command), (0, react.createElement)("div", { className: "sts-config-actions" }, isRunning ? (0, react.createElement)("button", {
+						className: "sts-icon-btn stop",
+						title: "停止全部",
+						onClick: (e) => {
+							e.stopPropagation();
+							for (const inst of configInstances) if (inst.status === "running") onStopInstance(inst.id);
+						}
+					}, StopIcon({ size: 14 })) : (0, react.createElement)("button", {
+						className: "sts-icon-btn play",
+						title: "启动",
+						onClick: (e) => {
+							e.stopPropagation();
+							onStartConfig(config.id);
+						}
+					}, PlayIcon({ size: 14 })), (0, react.createElement)("button", {
+						className: "sts-icon-btn gear",
+						title: "编辑",
+						onClick: (e) => {
+							e.stopPropagation();
+							onEditConfig(config.id);
+						}
+					}, GearIcon({ size: 12 }))))];
+					for (const inst of configInstances) {
+						const instSelected = selectedInstanceId === inst.id;
+						rows.push((0, react.createElement)("div", {
+							key: inst.id,
+							className: `sts-instance-row${instSelected ? " selected" : ""}`,
+							onClick: () => onSelectInstance(inst.id)
+						}, statusIcon(inst.status, 10), `#${inst.id.slice(0, 8)}`, (0, react.createElement)("span", { className: "sts-instance-pid" }, inst.status === "running" ? ` pid:${inst.pid}` : ` ${inst.status}`), inst.status === "running" ? (0, react.createElement)("button", {
+							className: "sts-icon-btn stop",
+							title: "停止",
+							onClick: (e) => {
+								e.stopPropagation();
+								onStopInstance(inst.id);
+							}
+						}, StopIcon({ size: 12 })) : null));
+					}
+					return rows;
+				})));
+			}));
+		}
+		//#endregion
+		//#region src/client/ansi.ts
+		function cloneState(s) {
+			return {
+				text: "",
+				bold: s.bold,
+				dim: s.dim,
+				italic: s.italic,
+				underline: s.underline,
+				fg: s.fg,
+				bg: s.bg
+			};
+		}
+		/** Apply one SGR parameter to the parse state. */
+		function applySgr(state, code) {
+			if (code === 0) {
+				state.bold = false;
+				state.dim = false;
+				state.italic = false;
+				state.underline = false;
+				state.fg = null;
+				state.bg = null;
+			} else if (code === 1) state.bold = true;
+			else if (code === 2) state.dim = true;
+			else if (code === 3) state.italic = true;
+			else if (code === 4) state.underline = true;
+			else if (code === 22) {
+				state.bold = false;
+				state.dim = false;
+			} else if (code === 23) state.italic = false;
+			else if (code === 24) state.underline = false;
+			else if (code >= 30 && code <= 37) state.fg = code - 30;
+			else if (code === 39) state.fg = null;
+			else if (code >= 40 && code <= 47) state.bg = code - 40;
+			else if (code === 49) state.bg = null;
+			else if (code >= 90 && code <= 97) state.fg = code - 90 + 8;
+			else if (code >= 100 && code <= 107) state.bg = code - 100 + 8;
+		}
+		/**
+		* Parse a string with ANSI escape codes into styled segments.
+		* Returns an array of AnsiSegment objects ready for React rendering.
+		*/
+		function parseAnsi(input) {
+			const state = {
+				bold: false,
+				dim: false,
+				italic: false,
+				underline: false,
+				fg: null,
+				bg: null
+			};
+			const segments = [];
+			let current = cloneState(state);
+			const regex = /\x1b\[([0-9;]*)m|\x1b\][^\x07]*\x07|\x1b\[[0-9;]*[A-Za-z]/g;
+			let lastIndex = 0;
+			let match;
+			while ((match = regex.exec(input)) !== null) {
+				if (match.index > lastIndex) current.text += input.slice(lastIndex, match.index);
+				if (match[1] !== void 0) {
+					if (current.text !== "") segments.push(current);
+					const params = match[1] === "" ? "0" : match[1];
+					for (const codeStr of params.split(";")) {
+						const code = codeStr === "" ? 0 : Number(codeStr);
+						if (!Number.isNaN(code)) applySgr(state, code);
+					}
+					current = cloneState(state);
+				}
+				lastIndex = regex.lastIndex;
+			}
+			if (lastIndex < input.length) current.text += input.slice(lastIndex);
+			if (current.text !== "") segments.push(current);
+			return segments;
+		}
+		/** Map an ANSI color index (0-15) to a CSS color string. */
+		const ANSI_COLORS = [
+			"#000000",
+			"#cc0000",
+			"#4e9a06",
+			"#c4a000",
+			"#3465a4",
+			"#75507b",
+			"#06989a",
+			"#d3d7cf",
+			"#555753",
+			"#ef2929",
+			"#8ae234",
+			"#fce94f",
+			"#729fcf",
+			"#ad7fa8",
+			"#34e2e2",
+			"#eeeeec"
+		];
+		/** Resolve a segment's foreground color to a CSS string, or null for default. */
+		function segmentFgColor(seg) {
+			if (seg.fg === null) return null;
+			return ANSI_COLORS[seg.fg] ?? null;
+		}
+		/** Resolve a segment's background color to a CSS string, or null for default. */
+		function segmentBgColor(seg) {
+			if (seg.bg === null) return null;
+			return ANSI_COLORS[seg.bg] ?? null;
+		}
+		//#endregion
+		//#region src/client/LogView.tsx
+		/**
+		* Log view: the right pane showing real-time log output from a running
+		* instance. Connects to the WebSocket endpoint, parses ANSI colors, and
+		* renders log lines with auto-scroll.
+		* @module dsh-better-sidebar-starter/client/LogView
+		*/
+		/** Render ANSI-colored text segments. */
+		function renderAnsiLine(text, keyBase) {
+			return parseAnsi(text).map((seg, i) => {
+				const style = {};
+				const fg = segmentFgColor(seg);
+				const bg = segmentBgColor(seg);
+				if (fg !== null) style.color = fg;
+				if (bg !== null) style.backgroundColor = bg;
+				if (seg.bold) style.fontWeight = "bold";
+				if (seg.dim) style.opacity = "0.6";
+				if (seg.italic) style.fontStyle = "italic";
+				if (seg.underline) style.textDecoration = "underline";
+				return (0, react.createElement)("span", {
+					key: `${keyBase}-${i}`,
+					style
+				}, seg.text);
+			});
+		}
+		/** The log view component. */
+		function LogView({ instance, onStop, onRestart }) {
+			const [logLines, setLogLines] = (0, react.useState)([]);
+			const [autoScroll, setAutoScroll] = (0, react.useState)(true);
+			const [exitInfo, setExitInfo] = (0, react.useState)(null);
+			const contentRef = (0, react.useRef)(null);
+			const wsRef = (0, react.useRef)(null);
+			const lineKeyCounter = (0, react.useRef)(0);
+			const lineBuffer = (0, react.useRef)({ current: [] });
+			/** Flush the buffer into a new log line. */
+			const flushLine = (0, react.useCallback)(() => {
+				const entries = lineBuffer.current.current;
+				if (entries.length === 0) return;
+				lineBuffer.current.current = [];
+				setLogLines((prev) => {
+					const key = lineKeyCounter.current++;
+					const next = [...prev, {
+						entries,
+						key
+					}];
+					if (next.length > 5e3) next.splice(0, next.length - 5e3);
+					return next;
+				});
+			}, []);
+			/** Add an entry to the current line buffer, splitting on newlines. */
+			const addEntry = (0, react.useCallback)((entry) => {
+				const parts = entry.text.split("\n");
+				for (let i = 0; i < parts.length; i++) {
+					if (i > 0) flushLine();
+					if (parts[i] !== "") lineBuffer.current.current.push({
+						stream: entry.stream,
+						text: parts[i],
+						ts: entry.ts
+					});
+				}
+				if (parts.length > 1 && parts[parts.length - 1] === "") flushLine();
+			}, [flushLine]);
+			(0, react.useEffect)(() => {
+				const url = `/api/dsh-better-sidebar-starter/logs?instanceId=${encodeURIComponent(instance.id)}`;
+				const ws = new WebSocket(url);
+				wsRef.current = ws;
+				ws.onmessage = (event) => {
+					try {
+						const msg = JSON.parse(event.data);
+						if (msg.type === "history") {
+							setLogLines([]);
+							lineBuffer.current.current = [];
+							for (const entry of msg.entries) addEntry(entry);
+							flushLine();
+						} else if (msg.type === "log") addEntry(msg.entry);
+						else if (msg.type === "status") {
+							if (msg.status !== "running") {
+								flushLine();
+								setExitInfo({
+									status: msg.status,
+									exitCode: msg.exitCode
+								});
+							}
+						}
+					} catch {}
+				};
+				return () => {
+					ws.close();
+					wsRef.current = null;
+				};
+			}, [
+				instance.id,
+				addEntry,
+				flushLine
+			]);
+			(0, react.useEffect)(() => {
+				if (autoScroll && contentRef.current !== null) contentRef.current.scrollTop = contentRef.current.scrollHeight;
+			}, [logLines, autoScroll]);
+			const handleClear = () => {
+				setLogLines([]);
+				lineBuffer.current.current = [];
+			};
+			return (0, react.createElement)("div", { style: {
+				display: "flex",
+				flexDirection: "column",
+				height: "100%",
+				minHeight: 0
+			} }, (0, react.createElement)("div", { className: "sts-log-toolbar" }, instance.configName, (0, react.createElement)("span", { style: {
+				opacity: .5,
+				marginLeft: "4px"
+			} }, `#${instance.id.slice(0, 8)}`), (0, react.createElement)("div", { className: "sts-log-toolbar-spacer" }), instance.status === "running" ? (0, react.createElement)("button", {
+				className: "sts-icon-btn stop",
+				title: "停止",
+				onClick: onStop
+			}, StopIcon({ size: 14 }), " 停止") : null, (0, react.createElement)("button", {
+				className: "sts-icon-btn",
+				title: "重启",
+				onClick: onRestart
+			}, RestartIcon({ size: 14 }), " 重启"), (0, react.createElement)("button", {
+				className: "sts-icon-btn",
+				title: "清空",
+				onClick: handleClear
+			}, TrashIcon({ size: 14 }), " 清空"), (0, react.createElement)("label", {
+				className: "sts-log-toolbar-label",
+				onClick: () => setAutoScroll((v) => !v)
+			}, autoScroll ? "☑" : "☐", " 自动滚动")), (0, react.createElement)("div", {
+				ref: contentRef,
+				className: "sts-log-content"
+			}, ...logLines.map((line) => {
+				const keyStr = `line-${line.key}`;
+				return (0, react.createElement)("div", {
+					key: keyStr,
+					className: "sts-log-line"
+				}, ...line.entries.map((entry, i) => {
+					const segKey = `${keyStr}-e${i}`;
+					return (0, react.createElement)("span", {
+						key: segKey,
+						className: entry.stream === "stderr" ? "sts-log-stderr" : ""
+					}, renderAnsiLine(entry.text, segKey));
+				}));
+			}), exitInfo !== null ? (0, react.createElement)("div", {
+				key: "exit-info",
+				style: {
+					color: exitInfo.status === "exited" && exitInfo.exitCode === 0 ? "#4e9a06" : "#cc0000",
+					fontWeight: "bold",
+					marginTop: "4px"
+				}
+			}, `\n进程${exitInfo.status === "exited" ? "退出" : exitInfo.status === "killed" ? "被终止" : "出错"}`, exitInfo.exitCode !== null ? `，退出码: ${exitInfo.exitCode}` : "") : null));
+		}
+		//#endregion
+		//#region src/client/ConfigDetail.tsx
+		/**
+		* Config detail card: shown in the right pane when an idle config is selected.
+		* Displays the config's full info and offers start / edit / delete buttons.
+		* @module dsh-better-sidebar-starter/client/ConfigDetail
+		*/
+		const TYPE_LABELS$1 = {
+			npm: "npm",
+			springboot: "Spring Boot",
+			python: "Python",
+			custom: "Custom"
+		};
+		/** The detail card component. */
+		function ConfigDetail({ config, onStart, onEdit, onDelete }) {
+			const envEntries = Object.entries(config.env);
+			const dateFmt = (ts) => {
+				if (ts === null) return "—";
+				return new Date(ts).toLocaleString("zh-CN", { hour12: false });
+			};
+			return (0, react.createElement)("div", { className: "sts-detail" }, (0, react.createElement)("div", { className: "sts-detail-card" }, (0, react.createElement)("div", { className: "sts-detail-title" }, typeIcon(config.type, 20), config.name), (0, react.createElement)("div", { className: "sts-detail-row" }, (0, react.createElement)("div", { className: "sts-detail-label" }, "类型"), (0, react.createElement)("div", { className: "sts-detail-value" }, TYPE_LABELS$1[config.type] ?? config.type)), (0, react.createElement)("div", { className: "sts-detail-row" }, (0, react.createElement)("div", { className: "sts-detail-label" }, "命令"), (0, react.createElement)("div", { className: "sts-detail-value" }, config.command)), (0, react.createElement)("div", { className: "sts-detail-row" }, (0, react.createElement)("div", { className: "sts-detail-label" }, "工作目录"), (0, react.createElement)("div", { className: "sts-detail-value" }, config.cwd)), config.type === "springboot" && config.jvmArgs ? (0, react.createElement)("div", { className: "sts-detail-row" }, (0, react.createElement)("div", { className: "sts-detail-label" }, "JVM参数"), (0, react.createElement)("div", { className: "sts-detail-value" }, config.jvmArgs)) : null, config.args ? (0, react.createElement)("div", { className: "sts-detail-row" }, (0, react.createElement)("div", { className: "sts-detail-label" }, "程序实参"), (0, react.createElement)("div", { className: "sts-detail-value" }, config.args)) : null, envEntries.length > 0 ? (0, react.createElement)("div", { className: "sts-detail-row" }, (0, react.createElement)("div", { className: "sts-detail-label" }, "环境变量"), (0, react.createElement)("div", { style: { flex: 1 } }, ...envEntries.map(([key, value]) => (0, react.createElement)("div", {
+				key,
+				className: "sts-detail-value"
+			}, `${key} = ${value}`)))) : null, (0, react.createElement)("div", { className: "sts-detail-row" }, (0, react.createElement)("div", { className: "sts-detail-label" }, "创建时间"), (0, react.createElement)("div", { className: "sts-detail-value" }, dateFmt(config.createdAt))), config.lastRunAt !== null ? (0, react.createElement)("div", { className: "sts-detail-row" }, (0, react.createElement)("div", { className: "sts-detail-label" }, "最近运行"), (0, react.createElement)("div", { className: "sts-detail-value" }, dateFmt(config.lastRunAt))) : null, (0, react.createElement)("div", { className: "sts-detail-actions" }, (0, react.createElement)("button", {
+				className: "sts-detail-btn danger",
+				onClick: onDelete
+			}, (0, react.createElement)(TrashIcon, { size: 14 }), " 删除"), (0, react.createElement)("button", {
+				className: "sts-detail-btn",
+				onClick: onEdit
+			}, (0, react.createElement)(GearIcon, { size: 14 }), " 编辑"), (0, react.createElement)("button", {
+				className: "sts-detail-btn primary",
+				onClick: onStart,
+				style: {
+					background: "#1a1a1e",
+					border: "1px solid #3a3a3e",
+					color: "#fff",
+					borderRadius: "6px",
+					padding: "6px 14px",
+					cursor: "pointer",
+					fontSize: "12px"
+				}
+			}, (0, react.createElement)(PlayIcon, { size: 14 }), " 启动"))));
+		}
+		//#endregion
+		//#region src/client/DirChooser.tsx
+		/**
+		* Shared directory chooser: a filesystem folder tree (backed by the sidebar
+		* fs.tree API, which can list any absolute path) plus a browse button that
+		* opens a modal popup. Browsing starts at the user's home directory and can
+		* navigate up to any drive/root, so runtime tool paths (JDK/Maven/...) that
+		* live outside the workspace can be selected.
+		* @module dsh-better-sidebar-starter/client/DirChooser
+		*/
+		/** Call the sidebar fs.tree API directly via fetch. Returns directories only. */
+		async function fsTree$1(scope, path) {
+			const payload = {
+				sessionId: scope.sessionId,
+				path
+			};
+			if (scope.cwd !== void 0 && scope.cwd !== "") payload.cwd = scope.cwd;
+			const resp = await fetch("/sidebar/api/fs.tree", {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify(payload)
+			});
+			if (!resp.ok) throw new Error(`fs.tree ${path}: ${resp.status}`);
+			const parsed = await resp.json();
+			if (!parsed.ok || parsed.value === void 0) throw new Error(`fs.tree ${path}: ${parsed.error?.message ?? "unknown error"}`);
+			return parsed.value.entries.filter((e) => e.isDir && !e.hidden);
+		}
+		/** Fetch the user's home directory from the host. Falls back to cwd. */
+		async function fetchHomeDefault(scope) {
+			try {
+				const r = await fetch("/api/dsh-better-sidebar-starter/detect-env", { method: "GET" });
+				if (r.ok) {
+					const data = await r.json();
+					if (data.home && data.home !== "") return data.home;
+				}
+			} catch {}
+			return scope.cwd ?? ".";
+		}
+		/** Normalize a path, returning its parent or null if at the root. */
+		function parentOf(p) {
+			const trimmed = p.replace(/[\\/]+$/, "");
+			const lastSep = Math.max(trimmed.lastIndexOf("/"), trimmed.lastIndexOf("\\"));
+			if (lastSep <= 0) return null;
+			return trimmed.substring(0, lastSep);
+		}
+		/** The folder tree panel: shows the current dir's subdirectories with up-nav. */
+		function DirTree(props) {
+			const { scope, selectedPath, onPick } = props;
+			const [cur, setCur] = (0, react.useState)(".");
+			const [entries, setEntries] = (0, react.useState)(null);
+			const [loading, setLoading] = (0, react.useState)(false);
+			const [error, setError] = (0, react.useState)(null);
+			const [expanded, setExpanded] = (0, react.useState)(/* @__PURE__ */ new Set());
+			const scopeRef = (0, react.useRef)(scope);
+			const initDoneRef = (0, react.useRef)(false);
+			const initialValueRef = (0, react.useRef)(selectedPath);
+			(0, react.useEffect)(() => {
+				if (initDoneRef.current) return;
+				initDoneRef.current = true;
+				let cancelled = false;
+				const s = scopeRef.current;
+				const startPath = initialValueRef.current?.trim() && initialValueRef.current !== "." && initialValueRef.current !== "./" ? initialValueRef.current.trim() : null;
+				if (startPath !== null) {
+					setCur(startPath);
+					loadDir(s, startPath);
+				} else fetchHomeDefault(s).then((home) => {
+					if (cancelled) return;
+					setCur(home);
+					loadDir(s, home);
+				});
+				return () => {
+					cancelled = true;
+				};
+			}, []);
+			const loadDir = (s, path) => {
+				setLoading(true);
+				setError(null);
+				fsTree$1(s, path).then((dirs) => {
+					setEntries(dirs);
+					setLoading(false);
+				}).catch((err) => {
+					setError(err instanceof Error ? err.message : String(err));
+					setLoading(false);
+				});
+			};
+			const goUp = () => {
+				const parent = parentOf(cur);
+				if (parent !== null) {
+					setCur(parent);
+					loadDir(scopeRef.current, parent);
+				}
+			};
+			const navigateInto = (path) => {
+				setCur(path);
+				loadDir(scopeRef.current, path);
+			};
+			const toggleExpand = (path) => {
+				setExpanded((prev) => {
+					const next = new Set(prev);
+					if (next.has(path)) next.delete(path);
+					else next.add(path);
+					return next;
+				});
+			};
+			const isSelected = (p) => selectedPath !== "" && selectedPath !== "." && selectedPath === p;
+			return (0, react.createElement)("div", { className: "sts-dirtree" }, (0, react.createElement)("div", { className: "sts-dirtree-nav" }, (0, react.createElement)("button", {
+				className: "sts-dirtree-up",
+				onClick: goUp,
+				disabled: parentOf(cur) === null,
+				title: "上级目录"
+			}, "↑"), (0, react.createElement)("button", {
+				className: "sts-dirtree-home",
+				onClick: () => loadDir(scopeRef.current, cur),
+				title: "刷新"
+			}, "↻"), (0, react.createElement)("span", {
+				className: "sts-dirtree-cur",
+				title: cur
+			}, cur || "(.)")), (0, react.createElement)("div", {
+				className: `sts-tree-row${isSelected(cur) ? " selected" : ""}`,
+				style: { paddingLeft: "8px" },
+				onClick: () => onPick(cur)
+			}, (0, react.createElement)("span", { className: "sts-tree-icon" }, (0, react.createElement)(FolderIcon, { size: 14 })), (0, react.createElement)("span", { className: "sts-tree-label" }, cur || "(.)"), (0, react.createElement)("span", { className: "sts-tree-select-hint" }, "● 选择此目录")), loading ? (0, react.createElement)("div", {
+				className: "sts-tree-loading",
+				style: { paddingLeft: "16px" }
+			}, "加载中...") : error !== null ? (0, react.createElement)("div", {
+				className: "sts-tree-error",
+				style: { paddingLeft: "16px" }
+			}, error) : entries !== null && entries.length > 0 ? (0, react.createElement)("div", { className: "sts-dirtree-sub" }, ...entries.map((entry) => (0, react.createElement)(DirRow, {
+				key: entry.path,
+				scope,
+				entry,
+				depth: 1,
+				selectedPath,
+				expanded,
+				onToggleExpand: toggleExpand,
+				onPick,
+				onNavigate: navigateInto
+			}))) : (0, react.createElement)("div", {
+				className: "sts-tree-empty",
+				style: { paddingLeft: "16px" }
+			}, "无子目录"));
+		}
+		/** One directory row with recursive expansion + click into. */
+		function DirRow(props) {
+			const { scope, entry, depth, selectedPath, expanded, onToggleExpand, onPick, onNavigate } = props;
+			const [children, setChildren] = (0, react.useState)(null);
+			const [loading, setLoading] = (0, react.useState)(false);
+			const isExpanded = expanded.has(entry.path);
+			const isSelected = selectedPath === entry.path;
+			const handleClick = () => {
+				onPick(entry.path);
+				if (isExpanded) {
+					onToggleExpand(entry.path);
+					return;
+				}
+				onToggleExpand(entry.path);
+				if (children === null) {
+					setLoading(true);
+					fsTree$1(scope, entry.path).then((dirs) => {
+						setChildren(dirs);
+						setLoading(false);
+					}).catch(() => {
+						setChildren([]);
+						setLoading(false);
+					});
+				}
+			};
+			return (0, react.createElement)("div", null, (0, react.createElement)("div", {
+				className: `sts-tree-row${isSelected ? " selected" : ""}`,
+				style: { paddingLeft: `${depth * 16 + 8}px` },
+				onClick: handleClick
+			}, (0, react.createElement)("span", { className: `sts-tree-chevron${isExpanded ? " expanded" : ""}` }, (0, react.createElement)(isExpanded ? ChevronDownIcon : ChevronRightIcon, { size: 12 })), (0, react.createElement)("span", { className: "sts-tree-icon" }, (0, react.createElement)(FolderIcon, { size: 14 })), (0, react.createElement)("span", { className: "sts-tree-label" }, entry.name)), isExpanded ? loading ? (0, react.createElement)("div", {
+				className: "sts-tree-loading",
+				style: { paddingLeft: `${(depth + 1) * 16 + 8}px` }
+			}, "加载中...") : children !== null && children.length > 0 ? (0, react.createElement)("div", null, ...children.map((child) => (0, react.createElement)(DirRow, {
+				key: child.path,
+				scope,
+				entry: child,
+				depth: depth + 1,
+				selectedPath,
+				expanded,
+				onToggleExpand,
+				onPick,
+				onNavigate: props.onNavigate
+			}))) : null : null);
+		}
+		/** A read-only path input + browse button that opens a modal folder tree. */
+		function DirChooser(props) {
+			const { scope, value, onChange, compact, placeholder } = props;
+			const [open, setOpen] = (0, react.useState)(false);
+			return (0, react.createElement)("div", { className: "sts-settings-path-row" }, (0, react.createElement)("span", { className: "sts-settings-path-icon" }, (0, react.createElement)(FolderIcon, { size: 14 })), (0, react.createElement)("input", {
+				className: compact ? "sts-modal-input mono" : "sts-settings-input",
+				value,
+				readOnly: true,
+				placeholder: placeholder ?? "",
+				title: value,
+				onClick: () => setOpen(true)
+			}), (0, react.createElement)("button", {
+				className: "sts-settings-browse",
+				onClick: () => setOpen(true),
+				title: "选择文件夹"
+			}, "浏览"), open ? (0, react.createElement)(DirChooserModal, {
+				scope,
+				value,
+				onConfirm: (p) => {
+					onChange(p);
+					setOpen(false);
+				},
+				onCancel: () => setOpen(false)
+			}) : null);
+		}
+		/** Modal popup hosting the folder tree with confirm/cancel. */
+		function DirChooserModal(props) {
+			const { scope, value, onConfirm, onCancel } = props;
+			const [sel, setSel] = (0, react.useState)(value);
+			return (0, react.createElement)("div", {
+				className: "sts-modal-overlay",
+				onClick: (e) => {
+					if (e.target === e.currentTarget) onCancel();
+				}
+			}, (0, react.createElement)("div", { className: "sts-dir-modal" }, (0, react.createElement)("div", { className: "sts-modal-header" }, "选择文件夹", (0, react.createElement)("button", {
+				className: "sts-icon-btn",
+				onClick: onCancel
+			}, (0, react.createElement)(CloseIcon, { size: 16 }))), (0, react.createElement)("div", { className: "sts-dir-modal-tree" }, (0, react.createElement)(DirTree, {
+				scope,
+				selectedPath: sel,
+				onPick: setSel
+			})), (0, react.createElement)("div", { className: "sts-modal-footer" }, (0, react.createElement)("button", {
+				className: "sts-modal-btn",
+				onClick: onCancel
+			}, "取消"), (0, react.createElement)("button", {
+				className: "sts-modal-btn primary",
+				onClick: () => onConfirm(sel),
+				style: {
+					background: "#1a1a1e",
+					border: "1px solid #3a3a3e",
+					color: "#fff",
+					borderRadius: "6px",
+					padding: "8px 18px",
+					cursor: "pointer",
+					fontSize: "13px"
+				}
+			}, (0, react.createElement)(CheckIcon, { size: 14 }), " 确定"))));
+		}
+		//#endregion
+		//#region src/client/PathPicker.tsx
+		/**
+		* Path picker: a read-only input + browse button that opens a folder tree
+		* modal (DirChooser). Shared by the settings panel and the config editor.
+		* @module dsh-better-sidebar-starter/client/PathPicker
+		*/
+		/** A folder-browse input with a hosted modal tree chooser. */
+		function PathPicker(props) {
+			const { scope, value, onChange, compact, desc } = props;
+			return (0, react.createElement)(DirChooser, {
+				scope,
+				value,
+				onChange,
+				compact,
+				placeholder: desc
+			});
+		}
+		//#endregion
+		//#region src/client/ConfigEditorModal.tsx
+		/**
+		* Config editor modal dialog: create or edit a run configuration.
+		* Lets the user set name, type, command, cwd (tree picker), jvmArgs, args,
+		* and environment variables.
+		* @module dsh-better-sidebar-starter/client/ConfigEditorModal
+		*/
+		/** Call the sidebar fs.tree API directly via fetch. Returns directories only.
+		*  If path is omitted, the server uses the session cwd (root listing).
+		*  The sidebar API wraps responses in { ok: true, value: ... } envelope. */
+		async function fsTree(scope, path) {
+			const payload = { sessionId: scope.sessionId };
+			if (scope.cwd !== void 0 && scope.cwd !== "") payload.cwd = scope.cwd;
+			if (path !== void 0) payload.path = path;
+			const resp = await fetch("/sidebar/api/fs.tree", {
+				method: "POST",
+				headers: { "content-type": "application/json" },
+				body: JSON.stringify(payload)
+			});
+			if (!resp.ok) throw new Error(`fs.tree ${path ?? "(root)"}: ${resp.status}`);
+			const parsed = await resp.json();
+			if (!parsed.ok || parsed.value === void 0) throw new Error(`fs.tree ${path ?? "(root)"}: ${parsed.error?.message ?? "unknown error"}`);
+			return parsed.value.entries.filter((e) => e.isDir && !e.hidden);
+		}
+		/** Recursive tree node: loads its own children on expand. */
+		function TreeNode(props) {
+			const { scope, entry, depth, selectedPath, onSelect } = props;
+			const [expanded, setExpanded] = (0, react.useState)(false);
+			const [children, setChildren] = (0, react.useState)(null);
+			const [loading, setLoading] = (0, react.useState)(false);
+			const handleToggle = () => {
+				if (!expanded && children === null) {
+					setLoading(true);
+					fsTree(scope, entry.path).then((dirs) => {
+						setChildren(dirs);
+						setLoading(false);
+					}).catch(() => {
+						setChildren([]);
+						setLoading(false);
+					});
+				}
+				setExpanded(!expanded);
+			};
+			const isSelected = selectedPath === entry.path;
+			return (0, react.createElement)("div", null, (0, react.createElement)("div", {
+				className: `sts-tree-row${isSelected ? " selected" : ""}`,
+				style: { paddingLeft: `${depth * 16 + 8}px` },
+				onClick: () => {
+					onSelect(entry.path);
+					handleToggle();
+				}
+			}, (0, react.createElement)("span", { className: `sts-tree-chevron${expanded ? " expanded" : ""}` }, (0, react.createElement)(ChevronRightIcon, { size: 12 })), (0, react.createElement)("span", { className: "sts-tree-icon" }, (0, react.createElement)(FolderIcon, { size: 14 })), (0, react.createElement)("span", { className: "sts-tree-label" }, entry.name)), expanded ? loading ? (0, react.createElement)("div", {
+				className: "sts-tree-loading",
+				style: { paddingLeft: `${(depth + 1) * 16 + 8}px` }
+			}, "加载中...") : children !== null && children.length > 0 ? (0, react.createElement)("div", null, ...children.map((child) => (0, react.createElement)(TreeNode, {
+				key: child.path,
+				scope,
+				entry: child,
+				depth: depth + 1,
+				selectedPath,
+				onSelect
+			}))) : (0, react.createElement)("div", {
+				className: "sts-tree-empty",
+				style: { paddingLeft: `${(depth + 1) * 16 + 8}px` }
+			}, "无子目录") : null);
+		}
+		/** Directory tree picker: shows a collapsible tree rooted at session cwd. */
+		function DirTreePicker(props) {
+			const { scope, value, onSelect } = props;
+			const [expanded, setExpanded] = (0, react.useState)(false);
+			const [children, setChildren] = (0, react.useState)(null);
+			const [loading, setLoading] = (0, react.useState)(false);
+			const [error, setError] = (0, react.useState)(null);
+			const handleToggle = () => {
+				if (!expanded && children === null) {
+					setLoading(true);
+					setError(null);
+					fsTree(scope).then((dirs) => {
+						setChildren(dirs);
+						setLoading(false);
+					}).catch((err) => {
+						setError(err instanceof Error ? err.message : String(err));
+						setLoading(false);
+					});
+				}
+				setExpanded(!expanded);
+			};
+			return (0, react.createElement)("div", { className: "sts-tree-picker" }, (0, react.createElement)("div", {
+				className: `sts-tree-row${value === "." || value === "" || value === "./" ? " selected" : ""}`,
+				style: { paddingLeft: "8px" },
+				onClick: () => {
+					onSelect(".");
+					handleToggle();
+				}
+			}, (0, react.createElement)("span", { className: `sts-tree-chevron${expanded ? " expanded" : ""}` }, (0, react.createElement)(ChevronRightIcon, { size: 12 })), (0, react.createElement)("span", { className: "sts-tree-icon" }, (0, react.createElement)(FolderIcon, { size: 14 })), (0, react.createElement)("span", { className: "sts-tree-label" }, "(工作空间根目录)")), expanded ? loading ? (0, react.createElement)("div", {
+				className: "sts-tree-loading",
+				style: { paddingLeft: "24px" }
+			}, "加载中...") : error !== null ? (0, react.createElement)("div", {
+				className: "sts-tree-error",
+				style: { paddingLeft: "24px" }
+			}, error) : children !== null && children.length > 0 ? (0, react.createElement)("div", null, ...children.map((child) => (0, react.createElement)(TreeNode, {
+				key: child.path,
+				scope,
+				entry: child,
+				depth: 1,
+				selectedPath: value,
+				onSelect
+			}))) : (0, react.createElement)("div", {
+				className: "sts-tree-empty",
+				style: { paddingLeft: "24px" }
+			}, "无子目录") : null);
+		}
+		/** Type \u2192 default command mapping. */
+		const TYPE_DEFAULTS = {
+			npm: "npm run dev",
+			springboot: "mvn spring-boot:run",
+			python: "python main.py",
+			custom: ""
+		};
+		const TYPE_LABELS = {
+			npm: "npm",
+			springboot: "Spring Boot",
+			python: "Python",
+			custom: "Custom"
+		};
+		/** The modal dialog component. */
+		function ConfigEditorModal({ config, scope, onSave, onCancel }) {
+			const [name, setName] = (0, react.useState)(config?.name ?? "");
+			const [type, setType] = (0, react.useState)(config?.type ?? "custom");
+			const [command, setCommand] = (0, react.useState)(config?.command ?? "");
+			const [cwd, setCwd] = (0, react.useState)(config?.cwd ?? ".");
+			const [jvmArgs, setJvmArgs] = (0, react.useState)(config?.jvmArgs ?? "");
+			const [args, setArgs] = (0, react.useState)(config?.args ?? "");
+			const [envRows, setEnvRows] = (0, react.useState)(config ? Object.entries(config.env).map(([key, value]) => ({
+				key,
+				value
+			})) : []);
+			const [showTree, setShowTree] = (0, react.useState)(false);
+			const [showRuntime, setShowRuntime] = (0, react.useState)(false);
+			const [rtJava, setRtJava] = (0, react.useState)(config?.runtime?.java ?? "");
+			const [rtNode, setRtNode] = (0, react.useState)(config?.runtime?.node ?? "");
+			const [rtPython, setRtPython] = (0, react.useState)(config?.runtime?.python ?? "");
+			const [rtMvn, setRtMvn] = (0, react.useState)(config?.runtime?.mvn ?? "");
+			(0, react.useEffect)(() => {
+				if (command === "" && TYPE_DEFAULTS[type] !== "") setCommand(TYPE_DEFAULTS[type]);
+			}, [type]);
+			const handleSave = () => {
+				const env = {};
+				for (const row of envRows) if (row.key.trim() !== "") env[row.key.trim()] = row.value;
+				const runtime = {};
+				if (rtJava.trim() !== "") runtime.java = rtJava.trim();
+				if (rtNode.trim() !== "") runtime.node = rtNode.trim();
+				if (rtPython.trim() !== "") runtime.python = rtPython.trim();
+				if (rtMvn.trim() !== "") runtime.mvn = rtMvn.trim();
+				onSave({
+					id: config?.id,
+					name: name.trim(),
+					type,
+					command: command.trim(),
+					cwd: cwd.trim() === "" ? "." : cwd.trim(),
+					env,
+					jvmArgs: jvmArgs.trim(),
+					args: args.trim(),
+					runtime
+				});
+			};
+			const updateEnvRow = (idx, field, val) => {
+				setEnvRows((prev) => prev.map((row, i) => i === idx ? {
+					...row,
+					[field]: val
+				} : row));
+			};
+			const addEnvRow = () => setEnvRows((prev) => [...prev, {
+				key: "",
+				value: ""
+			}]);
+			const removeEnvRow = (idx) => setEnvRows((prev) => prev.filter((_, i) => i !== idx));
+			const [showEnvPaste, setShowEnvPaste] = (0, react.useState)(false);
+			const [envPasteText, setEnvPasteText] = (0, react.useState)("");
+			/** Parse "K=V;K=V,..." (or newline/comma separated) into env rows, merging
+			*  into the existing rows (later values override earlier for duplicate keys). */
+			const applyEnvPaste = () => {
+				const existing = new Map(envRows.filter((r) => r.key.trim() !== "").map((r) => [r.key.trim(), r.value]));
+				const text = envPasteText.trim();
+				if (text === "") return;
+				const pairs = text.split(/[;,\n]+/);
+				for (const pair of pairs) {
+					const p = pair.trim();
+					if (p === "") continue;
+					const eq = p.indexOf("=");
+					if (eq <= 0) continue;
+					const key = p.substring(0, eq).trim();
+					const value = p.substring(eq + 1).trim();
+					if (key !== "") existing.set(key, value);
+				}
+				setEnvRows(Array.from(existing, ([key, value]) => ({
+					key,
+					value
+				})));
+				setEnvPasteText("");
+				setShowEnvPaste(false);
+			};
+			const isSpringboot = type === "springboot";
+			return (0, react.createElement)("div", {
+				className: "sts-modal-overlay",
+				onClick: (e) => {
+					if (e.target === e.currentTarget) onCancel();
+				}
+			}, (0, react.createElement)("div", { className: "sts-modal" }, (0, react.createElement)("div", { className: "sts-modal-header" }, config?.id ? "编辑运行配置" : "新建运行配置", (0, react.createElement)("button", {
+				className: "sts-icon-btn",
+				onClick: onCancel
+			}, (0, react.createElement)(CloseIcon, { size: 16 }))), (0, react.createElement)("div", { className: "sts-modal-body" }, (0, react.createElement)("div", { className: "sts-modal-field" }, (0, react.createElement)("label", { className: "sts-modal-label" }, "名称"), (0, react.createElement)("input", {
+				className: "sts-modal-input",
+				value: name,
+				onChange: (e) => setName(e.target.value),
+				placeholder: "配置名称"
+			})), (0, react.createElement)("div", { className: "sts-modal-field" }, (0, react.createElement)("label", { className: "sts-modal-label" }, "类型"), (0, react.createElement)("select", {
+				className: "sts-modal-select",
+				value: type,
+				onChange: (e) => setType(e.target.value)
+			}, ...Object.entries(TYPE_LABELS).map(([val, label]) => (0, react.createElement)("option", {
+				key: val,
+				value: val
+			}, label)))), (0, react.createElement)("div", { className: "sts-modal-field" }, (0, react.createElement)("label", { className: "sts-modal-label" }, "命令"), (0, react.createElement)("input", {
+				className: "sts-modal-input mono",
+				value: command,
+				onChange: (e) => setCommand(e.target.value),
+				placeholder: "要执行的命令"
+			})), (0, react.createElement)("div", { className: "sts-modal-field" }, (0, react.createElement)("label", { className: "sts-modal-label" }, "工作目录"), (0, react.createElement)("div", {
+				className: "sts-cwd-display",
+				onClick: () => setShowTree(!showTree)
+			}, (0, react.createElement)("span", { className: "sts-cwd-icon" }, (0, react.createElement)(FolderIcon, { size: 14 })), (0, react.createElement)("span", { className: "sts-cwd-value" }, cwd)), showTree ? (0, react.createElement)("div", { className: "sts-tree-picker-container" }, (0, react.createElement)(DirTreePicker, {
+				scope,
+				value: cwd,
+				onSelect: (p) => setCwd(p)
+			})) : null), isSpringboot ? (0, react.createElement)("div", { className: "sts-modal-field" }, (0, react.createElement)("label", { className: "sts-modal-label" }, "虚拟机参数 (JVM Args)"), (0, react.createElement)("input", {
+				className: "sts-modal-input mono",
+				value: jvmArgs,
+				onChange: (e) => setJvmArgs(e.target.value),
+				placeholder: "例: -Xmx512m -Dspring.profiles.active=dev"
+			})) : null, (0, react.createElement)("div", { className: "sts-modal-field" }, (0, react.createElement)("label", { className: "sts-modal-label" }, "程序实参"), (0, react.createElement)("input", {
+				className: "sts-modal-input mono",
+				value: args,
+				onChange: (e) => setArgs(e.target.value),
+				placeholder: "例: --server.port=8080 --debug"
+			})), (0, react.createElement)("div", { className: "sts-modal-field" }, (0, react.createElement)("div", {
+				className: `sts-collapse-header${showRuntime ? " open" : ""}`,
+				onClick: () => setShowRuntime(!showRuntime)
+			}, (0, react.createElement)("span", { className: `sts-collapse-chevron${showRuntime ? " expanded" : ""}` }, (0, react.createElement)(ChevronRightIcon, { size: 12 })), (0, react.createElement)("span", null, "运行时环境 (高级)"), (0, react.createElement)("span", { className: "sts-collapse-hint" }, "默认用全局配置")), showRuntime ? (0, react.createElement)("div", { className: "sts-collapse-body" }, (0, react.createElement)("div", { className: "sts-modal-label" }, "留空则用全局/系统配置"), (0, react.createElement)("div", { className: "sts-modal-field" }, (0, react.createElement)("label", { className: "sts-modal-label" }, "Java 路径"), (0, react.createElement)(PathPicker, {
+				scope,
+				kind: "java",
+				value: rtJava,
+				onChange: setRtJava,
+				compact: true,
+				desc: "选择 JDK 目录"
+			})), (0, react.createElement)("div", { className: "sts-modal-field" }, (0, react.createElement)("label", { className: "sts-modal-label" }, "Node.js 路径"), (0, react.createElement)(PathPicker, {
+				scope,
+				kind: "node",
+				value: rtNode,
+				onChange: setRtNode,
+				compact: true,
+				desc: "选择 Node 目录"
+			})), (0, react.createElement)("div", { className: "sts-modal-field" }, (0, react.createElement)("label", { className: "sts-modal-label" }, "Python 路径"), (0, react.createElement)(PathPicker, {
+				scope,
+				kind: "python",
+				value: rtPython,
+				onChange: setRtPython,
+				compact: true,
+				desc: "选择 Python 目录"
+			})), (0, react.createElement)("div", { className: "sts-modal-field" }, (0, react.createElement)("label", { className: "sts-modal-label" }, "Maven 路径 (MVN)"), (0, react.createElement)(PathPicker, {
+				scope,
+				kind: "mvn",
+				value: rtMvn,
+				onChange: setRtMvn,
+				compact: true,
+				desc: "选择 Maven 目录"
+			}))) : null), (0, react.createElement)("div", { className: "sts-modal-field" }, (0, react.createElement)("label", { className: "sts-modal-label" }, "环境变量"), ...envRows.map((row, idx) => (0, react.createElement)("div", {
+				key: idx,
+				className: "sts-env-row"
+			}, (0, react.createElement)("input", {
+				className: "sts-modal-input sts-env-key",
+				value: row.key,
+				onChange: (e) => updateEnvRow(idx, "key", e.target.value),
+				placeholder: "变量名 (如 JAVA_HOME)"
+			}), (0, react.createElement)("span", { className: "sts-env-sep" }, "="), (0, react.createElement)("input", {
+				className: "sts-modal-input sts-env-val",
+				value: row.value,
+				onChange: (e) => updateEnvRow(idx, "value", e.target.value),
+				placeholder: "变量值"
+			}), (0, react.createElement)("button", {
+				className: "sts-icon-btn trash",
+				onClick: () => removeEnvRow(idx)
+			}, (0, react.createElement)(TrashIcon, { size: 14 })))), (0, react.createElement)("div", { className: "sts-env-actions" }, (0, react.createElement)("button", {
+				className: "sts-env-add",
+				onClick: addEnvRow
+			}, (0, react.createElement)(PlusIcon, { size: 12 }), " 添加环境变量"), (0, react.createElement)("button", {
+				className: "sts-env-add",
+				onClick: () => setShowEnvPaste(!showEnvPaste)
+			}, (0, react.createElement)(ClipboardIcon, { size: 12 }), showEnvPaste ? " 取消" : " 批量粘贴")), showEnvPaste ? (0, react.createElement)("div", { className: "sts-env-paste" }, (0, react.createElement)("textarea", {
+				className: "sts-env-paste-input",
+				value: envPasteText,
+				onChange: (e) => setEnvPasteText(e.target.value),
+				placeholder: "粘贴 KEY=VALUE;KEY=VALUE;或以换行/逗号分隔，如：\nDB_DATABASE=cassiopeia_ap;DB_HOST=10.18.18.18;DB_PORT=3306;MQ_HOST=10.18.18.18;MQ_PASSWORD=admin123;MQ_PORT=5672;MQ_USERNAME=admin;MQ_VIRTUAL_HOST=/;REDIS_HOST=10.18.18.17;REDIS_PASSWORD=Qaz!wsx2;REDIS_PORT=6379",
+				rows: 4
+			}), (0, react.createElement)("div", { className: "sts-env-paste-footer" }, (0, react.createElement)("button", {
+				className: "sts-env-paste-apply",
+				onClick: applyEnvPaste
+			}, "确定并生成环境变量"), (0, react.createElement)("span", { className: "sts-env-paste-hint" }, "重复将覆盖"))) : null)), (0, react.createElement)("div", { className: "sts-modal-footer" }, (0, react.createElement)("button", {
+				className: "sts-modal-btn",
+				onClick: onCancel
+			}, "取消"), (0, react.createElement)("button", {
+				className: "sts-modal-btn primary",
+				onClick: handleSave,
+				disabled: name.trim() === "",
+				style: {
+					background: "#1a1a1e",
+					border: "1px solid #3a3a3e",
+					color: "#fff",
+					borderRadius: "6px",
+					padding: "8px 18px",
+					cursor: name.trim() === "" ? "not-allowed" : "pointer",
+					fontSize: "13px",
+					opacity: name.trim() === "" ? .5 : 1
+				}
+			}, "保存"))));
+		}
+		//#endregion
+		//#region src/client/styles.ts
+		/**
+		* CSS styles for the starter plugin panel. Uses .sts- prefixed class names
+		* (scoped enough to avoid collisions with the host shell).
+		* Uses --dsw-alias-* CSS variables from the DSH design system to follow the
+		* active theme automatically (dark/light).
+		* @module dsh-better-sidebar-starter/client/styles
+		*/
+		const STYLES_CSS = `
+/* ===== Root container ===== */
+.sts-root {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  font-size: 13px;
+  color: var(--dsw-alias-label-primary, #e6e6e6);
+  background: var(--dsw-alias-bg-base, #1a1a1e);
+}
+
+/* ===== Toolbar ===== */
+.sts-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px;
+  height: 40px;
+  border-bottom: 1px solid var(--dsw-alias-border-l2, #2a2a2e);
+  flex-shrink: 0;
+}
+.sts-toolbar-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font: var(--dsw-font-m-14, 500 14px/20px sans-serif);
+  color: var(--dsw-alias-label-primary, #e6e6e6);
+}
+.sts-toolbar-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border: 1px solid var(--dsw-alias-border-l2, #2a2a2e);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary, #b0b0b0);
+  cursor: pointer;
+  font-size: 12px;
+  transition: background 0.12s, border-color 0.12s;
+}
+.sts-toolbar-btn:hover {
+  background: var(--dsw-alias-interactive-bg-hover, rgba(255,255,255,0.06));
+  border-color: var(--dsw-alias-border-l3, #3a3a3e);
+  color: var(--dsw-alias-label-primary, #e6e6e6);
+}
+
+/* ===== Split pane (horizontal: default for right panel) ===== */
+.sts-split {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+.sts-split-first {
+  overflow-y: auto;
+  overflow-x: hidden;
+  border-right: 1px solid var(--dsw-alias-border-l2, #2a2a2e);
+  flex-shrink: 0;
+}
+.sts-split-gutter {
+  width: 1px;
+  background: var(--dsw-alias-border-l2, #2a2a2e);
+  cursor: col-resize;
+  flex-shrink: 0;
+  transition: width 0.12s, background 0.12s;
+}
+.sts-split-gutter:hover,
+.sts-split-gutter.dragging {
+  width: 3px;
+  background: var(--dsw-alias-interactive-bg-hover-accent, #007acc);
+}
+.sts-split-second {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* ===== Split pane (vertical: for bottom panel) ===== */
+.sts-split-vertical {
+  flex-direction: column;
+}
+.sts-split-first-v {
+  border-right: none;
+  border-bottom: 1px solid var(--dsw-alias-border-l2, #2a2a2e);
+  width: 100% !important;
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex-shrink: 0;
+}
+.sts-split-gutter-v {
+  width: auto;
+  height: 1px;
+  cursor: row-resize;
+  transition: height 0.12s, background 0.12s;
+}
+.sts-split-gutter-v:hover,
+.sts-split-gutter-v.dragging {
+  width: auto;
+  height: 3px;
+  background: var(--dsw-alias-interactive-bg-hover-accent, #007acc);
+}
+.sts-split-second-v {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* ===== Config tree ===== */
+.sts-tree {
+  padding: 4px 4px 8px;
+  user-select: none;
+}
+.sts-group-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px;
+  font: var(--dsw-font-xxxs-11, 500 11px/16px sans-serif);
+  color: var(--dsw-alias-label-tertiary, #888);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  cursor: pointer;
+  border-radius: 6px;
+}
+.sts-group-header:hover {
+  background: var(--dsw-alias-interactive-bg-hover, rgba(255,255,255,0.04));
+}
+.sts-group-count {
+  color: rgba(255,255,255,0.4);
+  font-weight: 400;
+  font-variant-numeric: tabular-nums;
+}
+.sts-group-children {
+  overflow: hidden;
+}
+.sts-group-children.collapsed {
+  display: none;
+}
+
+/* ===== Config row ===== */
+.sts-config-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 8px 5px 24px;
+  cursor: pointer;
+  font-size: 13px;
+  border-radius: 6px;
+  margin: 1px 2px;
+  transition: background 0.1s;
+  color: var(--dsw-alias-label-primary, #e6e6e6);
+}
+.sts-config-row:hover {
+  background: var(--dsw-alias-interactive-bg-hover, rgba(255,255,255,0.04));
+}
+.sts-config-row.selected {
+  background: var(--dsw-alias-interactive-bg-active, rgba(0,122,204,0.12));
+}
+.sts-config-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 400;
+}
+.sts-config-cmd {
+  font-size: 10px;
+  color: rgba(255,255,255,0.4);
+  font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", "Cascadia Code", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100px;
+}
+.sts-config-actions {
+  display: flex;
+  align-items: center;
+  gap: 1px;
+  flex-shrink: 0;
+}
+.sts-icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary, #b0b0b0);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.1s, background 0.1s;
+}
+.sts-config-row:hover .sts-icon-btn {
+  opacity: 0.7;
+}
+.sts-icon-btn:hover {
+  opacity: 1 !important;
+  background: var(--dsw-alias-interactive-bg-hover, rgba(255,255,255,0.08));
+}
+.sts-icon-btn.play { color: #6ab04c; }
+.sts-icon-btn.stop { color: #eb5757; }
+.sts-icon-btn.gear { color: var(--dsw-alias-label-secondary, #b0b0b0); }
+.sts-icon-btn.trash { color: #eb5757; }
+
+/* ===== Instance row ===== */
+.sts-instance-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 3px 8px 3px 40px;
+  font-size: 11px;
+  cursor: pointer;
+  border-radius: 6px;
+  margin: 1px 2px;
+  color: var(--dsw-alias-label-tertiary, #888);
+  transition: background 0.1s;
+}
+.sts-instance-row:hover {
+  background: var(--dsw-alias-interactive-bg-hover, rgba(255,255,255,0.04));
+}
+.sts-instance-row.selected {
+  background: var(--dsw-alias-interactive-bg-active, rgba(0,122,204,0.12));
+  color: var(--dsw-alias-label-primary, #e6e6e6);
+}
+.sts-instance-pid {
+  color: rgba(255,255,255,0.4);
+  font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", "Cascadia Code", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ===== Empty states ===== */
+.sts-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: rgba(255,255,255,0.4);
+  font-size: 12px;
+  padding: 24px;
+  text-align: center;
+  gap: 8px;
+  line-height: 20px;
+}
+
+/* ===== Log view ===== */
+.sts-log-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 0 8px;
+  height: 36px;
+  border-bottom: 1px solid var(--dsw-alias-border-l2, #2a2a2e);
+  flex-shrink: 0;
+  color: var(--dsw-alias-label-secondary, #b0b0b0);
+  font-size: 12px;
+}
+.sts-log-toolbar-spacer {
+  flex: 1;
+}
+.sts-log-toolbar-label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  cursor: pointer;
+  color: var(--dsw-alias-label-tertiary, #888);
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+.sts-log-toolbar-label:hover {
+  color: var(--dsw-alias-label-primary, #e6e6e6);
+  background: var(--dsw-alias-interactive-bg-hover, rgba(255,255,255,0.04));
+}
+.sts-log-content {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 8px 12px;
+  font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", "Cascadia Code", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
+  font-size: 12px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-all;
+  color: var(--dsw-alias-label-primary, #e6e6e6);
+  background: var(--dsw-alias-bg-base, #1a1a1e);
+}
+.sts-log-line {
+  min-height: 1em;
+}
+
+/* ===== Config detail ===== */
+.sts-detail {
+  padding: 20px;
+  overflow-y: auto;
+  flex: 1;
+}
+.sts-detail-card {
+  border: 1px solid var(--dsw-alias-border-l2, #2a2a2e);
+  background: var(--dsw-alias-bg-layer-2, #202024);
+  border-radius: 12px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.sts-detail-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--dsw-alias-label-primary, #e6e6e6);
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--dsw-alias-border-l2, #2a2a2e);
+}
+.sts-detail-row {
+  display: flex;
+  gap: 12px;
+  font-size: 13px;
+  align-items: baseline;
+}
+.sts-detail-label {
+  width: 72px;
+  flex-shrink: 0;
+  color: var(--dsw-alias-label-tertiary, #888);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+.sts-detail-value {
+  font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", "Cascadia Code", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
+  word-break: break-all;
+  color: var(--dsw-alias-label-primary, #e6e6e6);
+}
+.sts-detail-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  margin-top: 12px;
+  padding-top: 16px;
+  border-top: 1px solid var(--dsw-alias-border-l2, #2a2a2e);
+}
+.sts-detail-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border: 1px solid var(--dsw-alias-border-l2, #2a2a2e);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary, #b0b0b0);
+  cursor: pointer;
+  font-size: 12px;
+  transition: background 0.12s, color 0.12s;
+}
+.sts-detail-btn:hover {
+  background: var(--dsw-alias-interactive-bg-hover, rgba(255,255,255,0.06));
+  color: var(--dsw-alias-label-primary, #e6e6e6);
+}
+.sts-detail-btn.danger {
+  color: #eb5757;
+  border-color: rgba(235,87,87,0.4);
+}
+.sts-detail-btn.danger:hover {
+  background: rgba(235,87,87,0.1);
+}
+
+/* ===== Modal ===== */
+.sts-modal-overlay {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0,0,0,0.45);
+  backdrop-filter: blur(2px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+}
+.sts-modal {
+  background: var(--dsw-alias-bg-layer-3, #242428);
+  border: 1px solid var(--dsw-alias-border-l3, #3a3a3e);
+  border-radius: 12px;
+  width: 480px;
+  max-width: 90vw;
+  max-height: 80vh;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+}
+.sts-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 20px;
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--dsw-alias-label-primary, #e6e6e6);
+  border-bottom: 1px solid var(--dsw-alias-border-l2, #2a2a2e);
+}
+.sts-modal-body {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.sts-modal-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.sts-modal-label {
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary, #888);
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+.sts-modal-input,
+.sts-modal-select {
+  padding: 8px 10px;
+  border: 1px solid var(--dsw-alias-border-l2, #2a2a2e);
+  border-radius: 6px;
+  background: var(--dsw-alias-bg-layer-1, #1a1a1e);
+  color: var(--dsw-alias-label-primary, #e6e6e6);
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.12s, background 0.12s;
+}
+.sts-modal-input:focus,
+.sts-modal-select:focus {
+  border-color: var(--dsw-alias-button-primary-fill, #007acc);
+  background: var(--dsw-alias-bg-base, #1a1a1e);
+}
+.sts-modal-input.mono {
+  font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", "Cascadia Code", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
+}
+.sts-env-row {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+.sts-env-key {
+  flex: 1;
+}
+.sts-env-val {
+  flex: 2;
+}
+.sts-env-sep {
+  color: var(--dsw-alias-label-dimmed, #555);
+  font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", "Cascadia Code", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
+}
+.sts-env-add {
+  font-size: 12px;
+  padding: 6px 10px;
+  border: 1px dashed var(--dsw-alias-border-l3, #3a3a3e);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--dsw-alias-label-tertiary, #888);
+  cursor: pointer;
+  align-self: flex-start;
+  transition: color 0.12s, border-color 0.12s;
+}
+.sts-env-add:hover {
+  color: var(--dsw-alias-label-primary, #e6e6e6);
+  border-color: var(--dsw-alias-button-primary-fill, #007acc);
+}
+.sts-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 14px 20px;
+  border-top: 1px solid var(--dsw-alias-border-l2, #2a2a2e);
+}
+.sts-modal-btn {
+  padding: 8px 18px;
+  border: 1px solid var(--dsw-alias-border-l2, #2a2a2e);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary, #b0b0b0);
+  cursor: pointer;
+  font-size: 13px;
+  transition: background 0.12s, color 0.12s;
+}
+.sts-modal-btn:hover {
+  background: var(--dsw-alias-interactive-bg-hover, rgba(255,255,255,0.06));
+  color: var(--dsw-alias-label-primary, #e6e6e6);
+}
+
+/* ===== Directory tree picker ===== */
+.sts-cwd-display {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 10px;
+  border: 1px solid var(--dsw-alias-border-l2, #2a2a2e);
+  border-radius: 6px;
+  background: var(--dsw-alias-bg-layer-1, #1a1a1e);
+  cursor: pointer;
+  transition: border-color 0.12s;
+  font-size: 13px;
+}
+.sts-cwd-display:hover {
+  border-color: var(--dsw-alias-border-l3, #3a3a3e);
+}
+.sts-cwd-icon {
+  display: flex;
+  align-items: center;
+  color: var(--dsw-alias-label-secondary, #b0b0b0);
+}
+.sts-cwd-value {
+  font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", "Cascadia Code", Menlo, Consolas, monospace;
+  color: var(--dsw-alias-label-primary, #e6e6e6);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sts-tree-picker-container {
+  margin-top: 4px;
+  border: 1px solid var(--dsw-alias-border-l2, #2a2a2e);
+  border-radius: 6px;
+  background: var(--dsw-alias-bg-layer-1, #1a1a1e);
+  max-height: 240px;
+  overflow-y: auto;
+  padding: 4px;
+}
+.sts-tree-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  cursor: pointer;
+  border-radius: 4px;
+  font-size: 13px;
+  color: var(--dsw-alias-label-secondary, #b0b0b0);
+  transition: background 0.08s;
+  white-space: nowrap;
+}
+.sts-tree-row:hover {
+  background: var(--dsw-alias-interactive-bg-hover, rgba(255,255,255,0.04));
+  color: var(--dsw-alias-label-primary, #e6e6e6);
+}
+.sts-tree-row.selected {
+  background: var(--dsw-alias-interactive-bg-active, rgba(0,122,204,0.12));
+  color: var(--dsw-alias-label-primary, #e6e6e6);
+}
+.sts-tree-chevron {
+  display: flex;
+  align-items: center;
+  transition: transform 0.1s;
+  flex-shrink: 0;
+}
+.sts-tree-chevron.expanded {
+  transform: rotate(90deg);
+}
+.sts-tree-icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--dsw-alias-label-tertiary, #888);
+}
+.sts-tree-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sts-tree-loading,
+.sts-tree-error,
+.sts-tree-empty {
+  padding: 8px 12px;
+  font-size: 12px;
+  color: rgba(255,255,255,0.4);
+}
+.sts-tree-error {
+  color: #eb5757;
+}
+
+/* ===== Settings panel ===== */
+.sts-settings-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px;
+  min-width: 320px;
+}
+.sts-settings-row {
+  padding: 4px 0;
+}
+.sts-settings-switch-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--dsw-alias-label-primary, #e6e6e6);
+}
+.sts-settings-switch {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+.sts-settings-sep {
+  margin: 8px 0 4px;
+  padding: 0 4px;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: rgba(255,255,255,0.4);
+}
+.sts-settings-path {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 4px 0;
+}
+.sts-settings-path-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.sts-settings-label {
+  font-size: 12px;
+  color: var(--dsw-alias-label-secondary, #b0b0b0);
+}
+.sts-settings-badge {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 10px;
+}
+.sts-settings-badge.ok {
+  color: #4e9a06;
+  background: rgba(78,154,6,0.12);
+}
+.sts-settings-badge.err {
+  color: #eb5757;
+  background: rgba(235,87,87,0.12);
+}
+.sts-settings-path-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.sts-settings-path-icon {
+  display: flex;
+  align-items: center;
+  color: var(--dsw-alias-label-tertiary, #888);
+  flex-shrink: 0;
+}
+.sts-settings-input {
+  flex: 1;
+  padding: 6px 8px;
+  border: 1px solid var(--dsw-alias-border-l2, #2a2a2e);
+  border-radius: 4px;
+  background: var(--dsw-alias-bg-layer-1, #1a1a1e);
+  color: var(--dsw-alias-label-primary, #e6e6e6);
+  font-size: 12px;
+  font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", "Cascadia Code", Menlo, Consolas, monospace;
+  outline: none;
+  min-width: 0;
+}
+.sts-settings-input:focus {
+  border-color: var(--dsw-alias-border-l3, #3a3a3e);
+}
+.sts-settings-input::placeholder {
+  color: rgba(255,255,255,0.3);
+}
+.sts-settings-browse {
+  padding: 6px 10px;
+  border: 1px solid var(--dsw-alias-border-l2, #2a2a2e);
+  border-radius: 4px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary, #b0b0b0);
+  cursor: pointer;
+  font-size: 12px;
+  flex-shrink: 0;
+  transition: background 0.12s, color 0.12s;
+}
+.sts-settings-browse:hover {
+  background: var(--dsw-alias-interactive-bg-hover, rgba(255,255,255,0.06));
+  color: var(--dsw-alias-label-primary, #e6e6e6);
+}
+.sts-settings-msg {
+  font-size: 10px;
+  padding: 0 4px;
+  color: rgba(255,255,255,0.4);
+}
+.sts-settings-msg.valid {
+  color: #4e9a06;
+}
+.sts-settings-msg.invalid {
+  color: #eb5757;
+}
+
+/* ===== Collapsible advanced section ===== */
+.sts-collapse-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 10px;
+  border: 1px solid var(--dsw-alias-border-l2, #2a2a2e);
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--dsw-alias-label-primary, #e6e6e6);
+  background: var(--dsw-alias-bg-layer-1, #1a1a1e);
+  transition: border-color 0.12s;
+  user-select: none;
+}
+.sts-collapse-header:hover {
+  border-color: var(--dsw-alias-border-l3, #3a3a3e);
+}
+.sts-collapse-chevron {
+  display: flex;
+  align-items: center;
+  transition: transform 0.12s;
+  color: var(--dsw-alias-label-secondary, #b0b0b0);
+}
+.sts-collapse-chevron.expanded {
+  transform: rotate(90deg);
+}
+.sts-collapse-hint {
+  margin-left: auto;
+  font-size: 10px;
+  color: rgba(255,255,255,0.4);
+}
+.sts-collapse-body {
+  margin-top: 8px;
+  padding: 12px;
+  border: 1px solid var(--dsw-alias-border-l2, #2a2a2e);
+  border-radius: 6px;
+  background: var(--dsw-alias-bg-layer-1, #1a1a1e);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+/* ===== Settings picker rows & dir chooser modal ===== */
+.sts-settings-picker-row {
+  margin: 6px 0;
+}
+.sts-settings-picker-row .sts-settings-label {
+  display: block;
+  margin-bottom: 4px;
+  font-size: 11px;
+}
+.sts-dir-modal {
+  background: var(--dsw-alias-bg-layer-3, #242428);
+  border: 1px solid var(--dsw-alias-border-l3, #3a3a3e);
+  border-radius: 12px;
+  width: 420px;
+  max-width: 90vw;
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+}
+.sts-dir-modal-tree {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+  min-height: 160px;
+}
+.sts-dirtree {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.sts-dirtree-nav {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 4px 8px;
+  border-bottom: 1px solid var(--dsw-alias-border-l2, #2a2a2e);
+  margin-bottom: 4px;
+}
+.sts-dirtree-up,
+.sts-dirtree-home {
+  width: 24px;
+  height: 24px;
+  border: 1px solid var(--dsw-alias-border-l2, #2a2a2e);
+  border-radius: 4px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary, #b0b0b0);
+  cursor: pointer;
+  font-size: 13px;
+  flex-shrink: 0;
+  transition: background 0.12s, color 0.12s;
+}
+.sts-dirtree-up:hover,
+.sts-dirtree-home:hover {
+  background: var(--dsw-alias-interactive-bg-hover, rgba(255,255,255,0.06));
+  color: var(--dsw-alias-label-primary, #e6e6e6);
+}
+.sts-dirtree-up:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+.sts-dirtree-cur {
+  flex: 1;
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary, #888);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  direction: rtl;
+  text-align: left;
+  font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", "Cascadia Code", Menlo, Consolas, monospace;
+}
+.sts-tree-select-hint {
+  margin-left: auto;
+  font-size: 10px;
+  color: rgba(255,255,255,0.4);
+}
+.sts-dirtree-sub {
+  border-top: 1px solid var(--dsw-alias-border-l2, #2a2a2e);
+  margin-top: 2px;
+  padding-top: 2px;
+}
+
+/* ===== Env bulk paste ===== */
+.sts-env-actions {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  margin-top: 2px;
+}
+.sts-env-paste {
+  margin-top: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.sts-env-paste-input {
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid var(--dsw-alias-border-l2, #2a2a2e);
+  border-radius: 6px;
+  background: var(--dsw-alias-bg-layer-1, #1a1a1e);
+  color: var(--dsw-alias-label-primary, #e6e6e6);
+  font-size: 12px;
+  font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", "Cascadia Code", Menlo, Consolas, monospace;
+  outline: none;
+  resize: vertical;
+  min-height: 80px;
+  box-sizing: border-box;
+}
+.sts-env-paste-input:focus {
+  border-color: var(--dsw-alias-border-l3, #3a3a3e);
+}
+.sts-env-paste-input::placeholder {
+  color: rgba(255,255,255,0.3);
+  font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", "Cascadia Code", Menlo, Consolas, monospace;
+}
+.sts-env-paste-footer {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.sts-env-paste-apply {
+  padding: 6px 14px;
+  border: 1px solid var(--dsw-alias-border-l2, #2a2a2e);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--dsw-alias-label-primary, #e6e6e6);
+  cursor: pointer;
+  font-size: 12px;
+  transition: background 0.12s;
+}
+.sts-env-paste-apply:hover {
+  background: var(--dsw-alias-interactive-bg-hover, rgba(255,255,255,0.06));
+}
+.sts-env-paste-hint {
+  font-size: 10px;
+  color: rgba(255,255,255,0.4);
+}
+`;
+		//#endregion
+		//#region src/client/ServicesTab.tsx
+		/**
+		* Services tab: the main sidebar panel component. Left 1/3 config tree,
+		* right 2/3 log view or config detail. Manages config CRUD via the host
+		* REST API and tracks running instances.
+		* @module dsh-better-sidebar-starter/client/ServicesTab
+		*/
+		/** API base. */
+		const API_BASE = "/api/dsh-better-sidebar-starter";
+		/** Instance poll interval (ms). */
+		const POLL_INTERVAL = 3e3;
+		/** Inject styles once. */
+		let STYLES_INJECTED = false;
+		function injectStyles() {
+			if (STYLES_INJECTED) return;
+			STYLES_INJECTED = true;
+			const tag = document.createElement("style");
+			tag.id = "dsh-better-sidebar-starter-styles";
+			tag.setAttribute("data-plugin", "@dong-victor/dsh-better-sidebar-starter");
+			tag.textContent = STYLES_CSS;
+			document.head.appendChild(tag);
+		}
+		/** The main services tab component. */
+		function ServicesTab(props) {
+			injectStyles();
+			const { scope, store } = props;
+			const [configs, setConfigs] = (0, react.useState)([]);
+			const [instances, setInstances] = (0, react.useState)([]);
+			const [selectedConfigId, setSelectedConfigId] = (0, react.useState)(null);
+			const [selectedInstanceId, setSelectedInstanceId] = (0, react.useState)(null);
+			const [editingConfig, setEditingConfig] = (0, react.useState)(null);
+			const [showModal, setShowModal] = (0, react.useState)(false);
+			const [splitRatio, setSplitRatio] = (0, react.useState)(.33);
+			const [dragging, setDragging] = (0, react.useState)(false);
+			const [isHorizontal, setIsHorizontal] = (0, react.useState)(true);
+			const containerRef = (0, react.useRef)(null);
+			(0, react.useEffect)(() => {
+				const el = containerRef.current;
+				if (el === null) return;
+				const check = () => {
+					const rect = el.getBoundingClientRect();
+					setIsHorizontal(rect.width > rect.height * 1.2);
+				};
+				check();
+				const ro = new ResizeObserver(check);
+				ro.observe(el);
+				return () => ro.disconnect();
+			}, []);
+			(0, react.useEffect)(() => {
+				const blob = store.getPrefs()?.pluginSettings?.["dsh-better-sidebar-starter:services"] ?? {};
+				if (typeof blob.splitRatio === "number") setSplitRatio(Math.max(.2, Math.min(.5, blob.splitRatio)));
+			}, [store]);
+			/** Persist split ratio to plugin settings. */
+			const persistSplitRatio = (0, react.useCallback)((ratio) => {
+				const service = store.service;
+				if (service !== void 0 && typeof service.updateTab === "function") {}
+			}, [store]);
+			/** Build a query string for the session scope. */
+			const sessionQuery = (0, react.useCallback)(() => {
+				const params = new URLSearchParams({ sessionId: scope.sessionId });
+				if (scope.cwd !== void 0) params.set("cwd", scope.cwd);
+				return params.toString();
+			}, [scope]);
+			/** Fetch configs from the host. */
+			const fetchConfigs = (0, react.useCallback)(async () => {
+				try {
+					const resp = await fetch(`${API_BASE}/configs?${sessionQuery()}`);
+					if (resp.ok) {
+						const data = await resp.json();
+						setConfigs(data.configs);
+					}
+				} catch {}
+			}, [sessionQuery]);
+			/** Fetch instances from the host. */
+			const fetchInstances = (0, react.useCallback)(async () => {
+				try {
+					const resp = await fetch(`${API_BASE}/instances?${sessionQuery()}`);
+					if (resp.ok) {
+						const data = await resp.json();
+						setInstances(data.instances);
+					}
+				} catch {}
+			}, [sessionQuery]);
+			(0, react.useEffect)(() => {
+				fetchConfigs();
+				fetchInstances();
+			}, [fetchConfigs, fetchInstances]);
+			(0, react.useEffect)(() => {
+				const timer = setInterval(() => void fetchInstances(), POLL_INTERVAL);
+				return () => clearInterval(timer);
+			}, [fetchInstances]);
+			/** Start a config. */
+			const handleStart = (0, react.useCallback)(async (configId) => {
+				try {
+					const blob = store.getPrefs()?.pluginSettings?.["dsh-better-sidebar-starter:services"] ?? {};
+					const globalEnv = {};
+					if (typeof blob.javaHome === "string" && blob.javaHome.trim() !== "") globalEnv.JAVA_HOME = blob.javaHome.trim();
+					if (typeof blob.nodePath === "string" && blob.nodePath.trim() !== "") globalEnv.NODE_PATH = blob.nodePath.trim();
+					if (typeof blob.pythonPath === "string" && blob.pythonPath.trim() !== "") globalEnv.PYTHON_PATH = blob.pythonPath.trim();
+					if (typeof blob.mvnPath === "string" && blob.mvnPath.trim() !== "") globalEnv.MVN_PATH = blob.mvnPath.trim();
+					const resp = await fetch(`${API_BASE}/run?${sessionQuery()}`, {
+						method: "POST",
+						headers: { "content-type": "application/json" },
+						body: JSON.stringify({
+							configId,
+							globalEnv
+						})
+					});
+					if (resp.ok) {
+						const data = await resp.json();
+						setSelectedInstanceId(data.instance.id);
+						setSelectedConfigId(null);
+						fetchInstances();
+						fetchConfigs();
+					}
+				} catch {}
+			}, [
+				sessionQuery,
+				fetchInstances,
+				fetchConfigs,
+				store
+			]);
+			/** Stop an instance. */
+			const handleStop = (0, react.useCallback)(async (instanceId) => {
+				try {
+					await fetch(`${API_BASE}/stop`, {
+						method: "POST",
+						headers: { "content-type": "application/json" },
+						body: JSON.stringify({ instanceId })
+					});
+					fetchInstances();
+				} catch {}
+			}, [fetchInstances]);
+			/** Restart = stop + start the same config. */
+			const handleRestart = (0, react.useCallback)(async (instanceId) => {
+				const inst = instances.find((i) => i.id === instanceId);
+				if (inst === void 0) return;
+				await handleStop(instanceId);
+				await new Promise((r) => setTimeout(r, 200));
+				await handleStart(inst.configId);
+			}, [
+				instances,
+				handleStop,
+				handleStart
+			]);
+			/** Open the new config modal. */
+			const handleNewConfig = () => {
+				setEditingConfig(null);
+				setShowModal(true);
+			};
+			/** Open the edit config modal. */
+			const handleEditConfig = (configId) => {
+				const config = configs.find((c) => c.id === configId);
+				if (config === void 0) return;
+				setEditingConfig({
+					id: config.id,
+					name: config.name,
+					type: config.type,
+					command: config.command,
+					cwd: config.cwd,
+					env: config.env,
+					jvmArgs: config.jvmArgs,
+					args: config.args,
+					runtime: config.runtime
+				});
+				setShowModal(true);
+			};
+			/** Save a config (create or update). */
+			const handleSaveConfig = (0, react.useCallback)(async (config) => {
+				try {
+					if ((await fetch(`${API_BASE}/configs?${sessionQuery()}`, {
+						method: "POST",
+						headers: { "content-type": "application/json" },
+						body: JSON.stringify({ config })
+					})).ok) {
+						setShowModal(false);
+						setEditingConfig(null);
+						fetchConfigs();
+					}
+				} catch {}
+			}, [sessionQuery, fetchConfigs]);
+			/** Delete a config. */
+			const handleDeleteConfig = (0, react.useCallback)(async (configId) => {
+				for (const inst of instances) if (inst.configId === configId && inst.status === "running") await handleStop(inst.id);
+				try {
+					if ((await fetch(`${API_BASE}/configs?${sessionQuery()}&id=${encodeURIComponent(configId)}`, { method: "DELETE" })).ok) {
+						if (selectedConfigId === configId) setSelectedConfigId(null);
+						fetchConfigs();
+						fetchInstances();
+					}
+				} catch {}
+			}, [
+				instances,
+				handleStop,
+				sessionQuery,
+				fetchConfigs,
+				fetchInstances,
+				selectedConfigId
+			]);
+			/** Select a config (deselect any instance). */
+			const handleSelectConfig = (configId) => {
+				setSelectedConfigId(configId);
+				setSelectedInstanceId(null);
+			};
+			/** Select an instance. */
+			const handleSelectInstance = (instanceId) => {
+				setSelectedInstanceId(instanceId);
+				setSelectedConfigId(null);
+			};
+			const handleMouseDown = (e) => {
+				e.preventDefault();
+				setDragging(true);
+			};
+			(0, react.useEffect)(() => {
+				if (!dragging) return;
+				const handleMove = (e) => {
+					if (containerRef.current === null) return;
+					const rect = containerRef.current.getBoundingClientRect();
+					const ratio = isHorizontal ? (e.clientX - rect.left) / rect.width : (e.clientY - rect.top) / rect.height;
+					const clamped = Math.max(.2, Math.min(.5, ratio));
+					setSplitRatio(clamped);
+					persistSplitRatio(clamped);
+				};
+				const handleUp = () => setDragging(false);
+				document.addEventListener("mousemove", handleMove);
+				document.addEventListener("mouseup", handleUp);
+				return () => {
+					document.removeEventListener("mousemove", handleMove);
+					document.removeEventListener("mouseup", handleUp);
+				};
+			}, [
+				dragging,
+				isHorizontal,
+				persistSplitRatio
+			]);
+			const selectedInstance = selectedInstanceId !== null ? instances.find((i) => i.id === selectedInstanceId) ?? null : null;
+			const selectedConfig = selectedConfigId !== null ? configs.find((c) => c.id === selectedConfigId) ?? null : null;
+			return (0, react.createElement)("div", {
+				ref: containerRef,
+				className: "sts-root"
+			}, (0, react.createElement)("div", { className: "sts-toolbar" }, (0, react.createElement)("div", { className: "sts-toolbar-title" }, (0, react.createElement)(RocketIcon, { size: 16 }), "服务"), (0, react.createElement)("button", {
+				className: "sts-toolbar-btn",
+				onClick: handleNewConfig
+			}, (0, react.createElement)(PlusIcon, { size: 13 }), "新建配置")), (0, react.createElement)("div", { className: `sts-split${isHorizontal ? "" : " sts-split-vertical"}` }, (0, react.createElement)("div", {
+				className: `sts-split-first${isHorizontal ? "" : " sts-split-first-v"}`,
+				style: isHorizontal ? { width: `${splitRatio * 100}%` } : { height: `${splitRatio * 100}%` }
+			}, configs.length === 0 ? (0, react.createElement)("div", { className: "sts-empty" }, "暂无运行配置，点击右上角 + 新建") : (0, react.createElement)(ConfigTree, {
+				configs,
+				instances,
+				selectedInstanceId,
+				selectedConfigId,
+				onSelectConfig: handleSelectConfig,
+				onSelectInstance: handleSelectInstance,
+				onStartConfig: (id) => {
+					handleStart(id);
+				},
+				onStopInstance: (id) => {
+					handleStop(id);
+				},
+				onEditConfig: handleEditConfig
+			})), (0, react.createElement)("div", {
+				className: `sts-split-gutter${dragging ? " dragging" : ""}${isHorizontal ? "" : " sts-split-gutter-v"}`,
+				onMouseDown: handleMouseDown
+			}), (0, react.createElement)("div", { className: `sts-split-second${isHorizontal ? "" : " sts-split-second-v"}` }, selectedInstance !== null ? (0, react.createElement)(LogView, {
+				instance: selectedInstance,
+				onStop: () => {
+					handleStop(selectedInstance.id);
+				},
+				onRestart: () => {
+					handleRestart(selectedInstance.id);
+				}
+			}) : selectedConfig !== null ? (0, react.createElement)(ConfigDetail, {
+				config: selectedConfig,
+				onStart: () => {
+					handleStart(selectedConfig.id);
+				},
+				onEdit: () => handleEditConfig(selectedConfig.id),
+				onDelete: () => {
+					handleDeleteConfig(selectedConfig.id);
+				}
+			}) : (0, react.createElement)("div", { className: "sts-empty" }, "选择左侧配置查看详情或日志"))), showModal ? (0, react.createElement)(ConfigEditorModal, {
+				config: editingConfig,
+				scope: {
+					sessionId: scope.sessionId ?? store.getSnapshot().sessionId ?? "",
+					cwd: scope.cwd
+				},
+				onSave: (c) => {
+					handleSaveConfig(c);
+				},
+				onCancel: () => {
+					setShowModal(false);
+					setEditingConfig(null);
+				}
+			}) : null);
+		}
+		//#endregion
+		//#region src/client/SettingsPanel.tsx
+		/**
+		* Custom settings panel for the "服务" tab: renders switch toggles plus
+		* validated directory pickers for Java/Node/Python/Maven paths.
+		* @module dsh-better-sidebar-starter/client/SettingsPanel
+		*/
+		/** The custom settings panel rendered in the gear popup. */
+		function SettingsPanel(props) {
+			const { store, pluginSettings, updatePluginSetting } = props;
+			const scope = { sessionId: store.getSnapshot().sessionId ?? "" };
+			const get = (key) => typeof pluginSettings[key] === "string" ? pluginSettings[key] : "";
+			const getBool = (key) => pluginSettings[key] === true;
+			const [autoSelect, setAutoSelect] = (0, react.useState)(getBool("autoSelectOnStart"));
+			const [autoScroll, setAutoScroll] = (0, react.useState)(getBool("autoScroll"));
+			const [javaHome, setJavaHome] = (0, react.useState)(get("javaHome"));
+			const [nodePath, setNodePath] = (0, react.useState)(get("nodePath"));
+			const [pythonPath, setPythonPath] = (0, react.useState)(get("pythonPath"));
+			const [mvnPath, setMvnPath] = (0, react.useState)(get("mvnPath"));
+			(0, react.useEffect)(() => {
+				if (!(get("javaHome") === "" && get("nodePath") === "" && get("pythonPath") === "" && get("mvnPath") === "")) return;
+				let cancelled = false;
+				fetch("/api/dsh-better-sidebar-starter/detect-env").then((r) => r.ok ? r.json() : null).then((detected) => {
+					if (cancelled || detected === null) return;
+					if (detected.javaHome !== void 0 && detected.javaHome !== "") {
+						setJavaHome(detected.javaHome);
+						updatePluginSetting("javaHome", detected.javaHome);
+					}
+					if (detected.nodePath !== void 0 && detected.nodePath !== "") {
+						setNodePath(detected.nodePath);
+						updatePluginSetting("nodePath", detected.nodePath);
+					}
+					if (detected.pythonPath !== void 0 && detected.pythonPath !== "") {
+						setPythonPath(detected.pythonPath);
+						updatePluginSetting("pythonPath", detected.pythonPath);
+					}
+					if (detected.mvnPath !== void 0 && detected.mvnPath !== "") {
+						setMvnPath(detected.mvnPath);
+						updatePluginSetting("mvnPath", detected.mvnPath);
+					}
+				}).catch(() => {});
+				return () => {
+					cancelled = true;
+				};
+			}, []);
+			const handleSwitch = (key, setter) => (v) => {
+				setter(v);
+				updatePluginSetting(key, v);
+			};
+			const handlePath = (key, setter) => (v) => {
+				setter(v);
+				updatePluginSetting(key, v);
+			};
+			return (0, react.createElement)("div", { className: "sts-settings-panel" }, (0, react.createElement)("div", { className: "sts-settings-row" }, (0, react.createElement)("label", { className: "sts-settings-switch-row" }, (0, react.createElement)("input", {
+				type: "checkbox",
+				className: "sts-settings-switch",
+				checked: autoSelect,
+				onChange: (e) => handleSwitch("autoSelectOnStart", setAutoSelect)(e.target.checked)
+			}), (0, react.createElement)("span", null, "启动后自动选中日志"))), (0, react.createElement)("div", { className: "sts-settings-row" }, (0, react.createElement)("label", { className: "sts-settings-switch-row" }, (0, react.createElement)("input", {
+				type: "checkbox",
+				className: "sts-settings-switch",
+				checked: autoScroll,
+				onChange: (e) => handleSwitch("autoScroll", setAutoScroll)(e.target.checked)
+			}), (0, react.createElement)("span", null, "自动滚动到最新日志"))), (0, react.createElement)("div", { className: "sts-settings-sep" }, "运行环境路径"), (0, react.createElement)(PathPickerRow, {
+				label: "Java 主目录 (JAVA_HOME)",
+				scope,
+				kind: "java",
+				value: javaHome,
+				onChange: handlePath("javaHome", setJavaHome),
+				desc: "Spring Boot 用的 JDK，留空则自动查找"
+			}), (0, react.createElement)(PathPickerRow, {
+				label: "Node.js 路径",
+				scope,
+				kind: "node",
+				value: nodePath,
+				onChange: handlePath("nodePath", setNodePath),
+				desc: "npm 用的 Node，留空则用系统默认"
+			}), (0, react.createElement)(PathPickerRow, {
+				label: "Python 路径",
+				scope,
+				kind: "python",
+				value: pythonPath,
+				onChange: handlePath("pythonPath", setPythonPath),
+				desc: "Python 解释器，留空则用系统默认"
+			}), (0, react.createElement)(PathPickerRow, {
+				label: "Maven 路径 (MVN)",
+				scope,
+				kind: "mvn",
+				value: mvnPath,
+				onChange: handlePath("mvnPath", setMvnPath),
+				desc: "springboot 用的 Maven，留空则自动查找"
+			}));
+		}
+		/** A labeled path picker row for the settings panel. */
+		function PathPickerRow(props) {
+			return (0, react.createElement)("div", { className: "sts-settings-picker-row" }, (0, react.createElement)("label", { className: "sts-settings-label" }, props.label), (0, react.createElement)(PathPicker, {
+				scope: props.scope,
+				kind: props.kind,
+				value: props.value,
+				onChange: props.onChange,
+				desc: props.desc
+			}));
+		}
+		//#endregion
+		//#region src/client/index.tsx
+		/**
+		* Client half of the dsh-better-sidebar-starter plugin: registers the
+		* "服务" (Services) sidebar tab through the `ctx.betterSidebar` service.
+		* The tab renders a split-pane panel: left config tree + right log/detail.
+		* The host half (same package) owns the session-scoped config/process routes.
+		* @module dsh-better-sidebar-starter/client
+		*/
+		/** Services required before mounting: the betterSidebar registry (provided
+		*  by dsh-better-sidebar's own client half) and the session store. */
+		const inject = ["betterSidebar", "sessions"];
+		/** Plugin body. */
+		function apply(ctx) {
+			ctx.effect(() => ctx.betterSidebar.registerTab({
+				id: "dsh-better-sidebar-starter:services",
+				title: () => "服务",
+				icon: (size) => (0, react.createElement)(RocketIcon, { size }),
+				order: 50,
+				single: true,
+				settings: {
+					pluginToggles: [
+						{
+							key: "autoSelectOnStart",
+							type: "switch",
+							title: "启动后自动选中日志"
+						},
+						{
+							key: "autoScroll",
+							type: "switch",
+							title: "自动滚动到最新日志"
+						},
+						{
+							key: "javaHome",
+							type: "text",
+							title: "Java 主目录 (JAVA_HOME)",
+							desc: "Spring Boot 用的 JDK 路径，留空则自动查找"
+						},
+						{
+							key: "nodePath",
+							type: "text",
+							title: "Node.js 路径",
+							desc: "npm 命令用的 Node 路径，留空则用系统默认"
+						},
+						{
+							key: "pythonPath",
+							type: "text",
+							title: "Python 路径",
+							desc: "Python 命令用的解释器路径，留空则用系统默认"
+						}
+					],
+					render: (props) => (0, react.createElement)(SettingsPanel, props)
+				},
+				component: (props) => (0, react.createElement)(ServicesTab, props)
+			}), "dsh-better-sidebar-starter: services tab");
+		}
+		//#endregion
+		exports.apply = apply;
+		exports.inject = inject;
+		return module.exports;
+	}
+});
+
+//# sourceMappingURL=client.js.map