@dong-victor/dsh-better-sidebar-starter 0.1.3 → 0.1.6

package/lib/client.js

@@ -143,7 +143,7 @@ window.__ModuleLoader__.load({
 			"python",
 			"custom"
 		];
-		const TYPE_LABELS$2 = {
+		const TYPE_LABELS$1 = {
 			npm: "npm",
 			springboot: "Spring Boot",
 			python: "Python",
@@ -187,7 +187,7 @@ window.__ModuleLoader__.load({
 			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 label = TYPE_LABELS$1[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",
@@ -628,42 +628,105 @@ window.__ModuleLoader__.load({
 		/** Render ANSI-colored text segments, applying Java-log syntax highlighting
 		*  to text the program did not color itself (ANSI-colored spans keep the
 		*  program's own colors). Tokens with a source link become clickable. */
+		/** Split plain text into plain/url parts. Trailing punctuation that is
+		*  almost certainly sentence text (.,;:)]）。，) stays outside the link. */
+		const URL_RE = /https?:\/\/[^\s"'<>()\[\]{}]+/g;
+		function splitUrlParts(text) {
+			const out = [];
+			let last = 0;
+			for (const m of text.matchAll(URL_RE)) {
+				const idx = m.index ?? 0;
+				if (idx > last) out.push({ text: text.slice(last, idx) });
+				let url = m[0];
+				let trail = "";
+				while (url.length > 0 && /[.,;:)\]}》」），。；：]$/.test(url)) {
+					trail = url.slice(-1) + trail;
+					url = url.slice(0, -1);
+				}
+				if (url !== "") out.push({
+					text: url,
+					url
+				});
+				if (trail !== "") out.push({ text: trail });
+				last = idx + m[0].length;
+			}
+			if (last < text.length) out.push({ text: text.slice(last) });
+			return out;
+		}
 		function renderAnsiLine(text, keyBase, onLinkClick) {
 			const segments = parseAnsi(text);
 			const nodes = [];
+			if (segments.length === 0) return nodes;
 			let hlCounter = 0;
-			for (let i = 0; i < segments.length; i++) {
-				const seg = segments[i];
-				const fg = segmentFgColor(seg);
-				const bg = segmentBgColor(seg);
-				const baseStyle = {};
-				if (seg.bold) baseStyle.fontWeight = "bold";
-				if (seg.dim) baseStyle.opacity = "0.6";
-				if (seg.italic) baseStyle.fontStyle = "italic";
-				if (seg.underline) baseStyle.textDecoration = "underline";
-				if (fg !== null || bg !== null) {
-					const style = { ...baseStyle };
+			let fullText = "";
+			const ranges = [];
+			for (const seg of segments) {
+				ranges.push({
+					seg,
+					start: fullText.length,
+					end: fullText.length + seg.text.length
+				});
+				fullText += seg.text;
+			}
+			const parts = splitUrlParts(fullText);
+			let offset = 0;
+			for (const part of parts) {
+				const pStart = offset;
+				const pEnd = offset + part.text.length;
+				offset = pEnd;
+				for (const r of ranges) {
+					const s = Math.max(r.start, pStart);
+					const e = Math.min(r.end, pEnd);
+					if (s >= e) continue;
+					const slice = fullText.slice(s, e);
+					const seg = r.seg;
+					const style = {};
+					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";
+					const fg = segmentFgColor(seg);
+					const bg = segmentBgColor(seg);
 					if (fg !== null) style.color = fg;
 					if (bg !== null) style.backgroundColor = bg;
-					nodes.push((0, react.createElement)("span", {
-						key: `${keyBase}-${i}`,
-						style
-					}, seg.text));
-				} else {
-					const hl = highlightLogText(seg.text);
-					for (const h of hl) {
-						const style = { ...baseStyle };
-						if (h.color !== void 0) style.color = h.color;
-						if (h.bold === true) style.fontWeight = "bold";
+					if (part.url !== void 0) {
+						const url = part.url;
 						nodes.push((0, react.createElement)("span", {
-							key: `${keyBase}-${i}-hl${hlCounter++}`,
-							className: h.link !== void 0 ? "sts-log-link" : void 0,
-							style,
-							onClick: h.link !== void 0 ? (e) => {
+							key: `${keyBase}-u${hlCounter++}`,
+							className: "sts-log-url",
+							style: {
+								...style,
+								textDecoration: "underline",
+								cursor: "pointer"
+							},
+							title: `在浏览器打开 ${url}`,
+							onClick: (e) => {
 								e.stopPropagation();
-								onLinkClick(h.link);
-							} : void 0
-						}, h.text));
+								try {
+									window.open(url, "_blank", "noopener");
+								} catch {}
+							}
+						}, slice));
+					} else if (fg !== null || bg !== null) nodes.push((0, react.createElement)("span", {
+						key: `${keyBase}-c${hlCounter++}`,
+						style
+					}, slice));
+					else {
+						const hl = highlightLogText(slice);
+						for (const h of hl) {
+							const hStyle = { ...style };
+							if (h.color !== void 0) hStyle.color = h.color;
+							if (h.bold === true) hStyle.fontWeight = "bold";
+							nodes.push((0, react.createElement)("span", {
+								key: `${keyBase}-hl${hlCounter++}`,
+								className: h.link !== void 0 ? "sts-log-link" : void 0,
+								style: hStyle,
+								onClick: h.link !== void 0 ? (e) => {
+									e.stopPropagation();
+									onLinkClick(h.link);
+								} : void 0
+							}, h.text));
+						}
 					}
 				}
 			}
@@ -870,7 +933,7 @@ window.__ModuleLoader__.load({
 			if (parts.length > 1 && parts[parts.length - 1] === "") pushLine();
 		}
 		/** The log history viewer. */
-		function LogHistoryView({ ctx, sessionId, cwd, onClose }) {
+		function LogHistoryView({ ctx, sessionId, cwd, onClose, filter }) {
 			const [files, setFiles] = (0, react.useState)(null);
 			const [loading, setLoading] = (0, react.useState)(false);
 			const [activeFile, setActiveFile] = (0, react.useState)(null);
@@ -884,7 +947,7 @@ window.__ModuleLoader__.load({
 					if (cwd !== void 0 && cwd !== "") params.set("cwd", cwd);
 					const resp = await fetch(`${API_BASE$1}/logs-history?${params.toString()}`);
 					if (!resp.ok) {
-						let reason = "加载历史日志失败";
+						let reason = filter !== void 0 ? "加载历史日志失败" : "加载历史日志失败";
 						try {
 							const err = await resp.json();
 							if (typeof err.error === "string" && err.error !== "") reason = err.error;
@@ -893,15 +956,20 @@ window.__ModuleLoader__.load({
 						setFiles([]);
 						return;
 					}
-					const data = await resp.json();
-					setFiles(data.logs ?? []);
+					const all = (await resp.json()).logs ?? [];
+					const shown = filter !== void 0 ? all.filter((f) => f.name.startsWith(filter)) : all;
+					setFiles(shown);
 				} catch {
 					showToast("加载历史日志失败", false);
 					setFiles([]);
 				} finally {
 					setLoading(false);
 				}
-			}, [sessionId, cwd]);
+			}, [
+				sessionId,
+				cwd,
+				filter
+			]);
 			const [initialized, setInitialized] = (0, react.useState)(false);
 			if (!initialized) {
 				setInitialized(true);
@@ -941,40 +1009,43 @@ window.__ModuleLoader__.load({
 					setLoading(false);
 				}
 			}, [sessionId, cwd]);
-			if (activeFile === null) return (0, react.createElement)("div", { style: {
-				display: "flex",
-				flexDirection: "column",
-				height: "100%",
-				minHeight: 0
-			} }, (0, react.createElement)("div", { className: "sts-log-toolbar" }, "历史日志", (0, react.createElement)("div", { className: "sts-log-toolbar-spacer" }), (0, react.createElement)("button", {
-				className: "sts-icon-btn",
-				title: "刷新",
-				onClick: () => {
-					loadList();
-				}
-			}, RefreshIcon({ size: 14 }), (0, react.createElement)("span", { className: "sts-icon-btn-label" }, "刷新")), (0, react.createElement)("button", {
-				className: "sts-icon-btn",
-				title: "关闭历史日志",
-				onClick: onClose
-			}, CloseIcon({ size: 14 }), (0, react.createElement)("span", { className: "sts-icon-btn-label" }, "关闭"))), (0, react.createElement)("div", { style: {
-				overflow: "auto",
-				flex: 1,
-				minHeight: 0,
-				padding: "4px 0"
-			} }, loading && files === null ? (0, react.createElement)("div", { className: "sts-empty" }, "加载中…") : files !== null && files.length === 0 ? (0, react.createElement)("div", { className: "sts-empty" }, "暂无历史日志（工作空间 .dsh/logs 为空）。每次启动服务都会在 <工作空间>/.dsh/logs 下永久保留一份日志，即使启动失败或实例被清理也能查看。") : (0, react.createElement)("div", {}, (files ?? []).map((f) => (0, react.createElement)("button", {
-				key: f.file,
-				className: "sts-history-item",
-				title: f.file,
-				onClick: () => {
-					openFile(f);
-				}
-			}, (0, react.createElement)(FileIcon, { size: 13 }), (0, react.createElement)("span", { style: {
-				flex: 1,
-				textAlign: "left",
-				overflow: "hidden",
-				textOverflow: "ellipsis",
-				whiteSpace: "nowrap"
-			} }, f.name), (0, react.createElement)("span", { className: "sts-history-item-meta" }, `${new Date(f.mtime).toLocaleString()}  ${(f.size / 1024).toFixed(1)} KB`))))));
+			if (activeFile === null) {
+				const title = filter !== void 0 ? `${filter} · 历史日志` : "历史日志";
+				return (0, react.createElement)("div", { style: {
+					display: "flex",
+					flexDirection: "column",
+					height: "100%",
+					minHeight: 0
+				} }, (0, react.createElement)("div", { className: "sts-log-toolbar" }, title, (0, react.createElement)("div", { className: "sts-log-toolbar-spacer" }), (0, react.createElement)("button", {
+					className: "sts-icon-btn",
+					title: "刷新",
+					onClick: () => {
+						loadList();
+					}
+				}, RefreshIcon({ size: 14 }), (0, react.createElement)("span", { className: "sts-icon-btn-label" }, "刷新")), (0, react.createElement)("button", {
+					className: "sts-icon-btn",
+					title: filter !== void 0 ? "返回服务视图" : "关闭历史日志",
+					onClick: onClose
+				}, CloseIcon({ size: 14 }), (0, react.createElement)("span", { className: "sts-icon-btn-label" }, filter !== void 0 ? "返回" : "关闭"))), (0, react.createElement)("div", { style: {
+					overflow: "auto",
+					flex: 1,
+					minHeight: 0,
+					padding: "4px 0"
+				} }, loading && files === null ? (0, react.createElement)("div", { className: "sts-empty" }, "加载中…") : files !== null && files.length === 0 ? (0, react.createElement)("div", { className: "sts-empty" }, filter !== void 0 ? `「${filter}」暂无历史日志。每次启动都会在 <工作空间>/logs/ 下永久保留一份日志，即使启动失败或 dsh 重启也能查看。` : "暂无历史日志（工作空间 logs/ 为空）。每次启动服务都会在 <工作空间>/logs/ 下永久保留一份日志，即使启动失败或 dsh 重启也能查看。") : (0, react.createElement)("div", {}, (files ?? []).map((f) => (0, react.createElement)("button", {
+					key: f.file,
+					className: "sts-history-item",
+					title: f.file,
+					onClick: () => {
+						openFile(f);
+					}
+				}, (0, react.createElement)(FileIcon, { size: 13 }), (0, react.createElement)("span", { style: {
+					flex: 1,
+					textAlign: "left",
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap"
+				} }, f.name), (0, react.createElement)("span", { className: "sts-history-item-meta" }, `${new Date(f.mtime).toLocaleString()}  ${(f.size / 1024).toFixed(1)} KB`))))));
+			}
 			return (0, react.createElement)("div", { style: {
 				display: "flex",
 				flexDirection: "column",
@@ -1009,53 +1080,6 @@ window.__ModuleLoader__.load({
 			}, `—— 历史日志已加载完毕（${lines.length} 行），此为只读视图 ——`)));
 		}
 		//#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, onDuplicate, 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: onDuplicate,
-				title: "复制为副本（保留全部信息）"
-			}, (0, react.createElement)(CopyIcon, { 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
@@ -2021,6 +2045,13 @@ window.__ModuleLoader__.load({
   background: rgba(97, 175, 239, 0.14);
   border-bottom-color: #61afef;
 }
+/* Clickable http(s) URLs inside the log (open in a new browser tab). */
+.sts-log-url {
+  color: #61afef;
+}
+.sts-log-url:hover {
+  background: rgba(97, 175, 239, 0.18);
+}
 
 /* ===== Config detail ===== */
 .sts-detail {
@@ -2646,7 +2677,6 @@ window.__ModuleLoader__.load({
 			const [splitRatio, setSplitRatio] = (0, react.useState)(.33);
 			const [dragging, setDragging] = (0, react.useState)(false);
 			const [isHorizontal, setIsHorizontal] = (0, react.useState)(true);
-			const [historyOpen, setHistoryOpen] = (0, react.useState)(false);
 			const containerRef = (0, react.useRef)(null);
 			(0, react.useEffect)(() => {
 				const el = containerRef.current;
@@ -2821,8 +2851,7 @@ window.__ModuleLoader__.load({
 					}
 				} catch {}
 			}, [sessionQuery, fetchConfigs]);
-			/** Delete a config. */
-			const handleDeleteConfig = (0, react.useCallback)(async (configId) => {
+			(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) {
@@ -2883,14 +2912,7 @@ window.__ModuleLoader__.load({
 			}, (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)("button", {
-				className: `sts-toolbar-btn${historyOpen ? " active" : ""}`,
-				title: "查看持久化历史日志（.dsh/logs，含启动失败记录）",
-				onClick: () => {
-					setHistoryOpen((v) => !v);
-					if (historyOpen) {}
-				}
-			}, (0, react.createElement)(FileIcon, { size: 13 }), "历史日志")), (0, react.createElement)("div", { className: `sts-split${isHorizontal ? "" : " sts-split-vertical"}` }, (0, react.createElement)("div", {
+			}, (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, {
@@ -2911,12 +2933,7 @@ window.__ModuleLoader__.load({
 			})), (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"}` }, historyOpen ? (0, react.createElement)(LogHistoryView, {
-				ctx: props.ctx,
-				sessionId: scope.sessionId ?? store.getSnapshot().sessionId ?? "",
-				cwd: scope.cwd,
-				onClose: () => setHistoryOpen(false)
-			}) : selectedInstance !== null ? (0, react.createElement)(LogView, {
+			}), (0, react.createElement)("div", { className: `sts-split-second${isHorizontal ? "" : " sts-split-second-v"}` }, selectedInstance !== null ? (0, react.createElement)(LogView, {
 				instance: selectedInstance,
 				ctx: props.ctx,
 				sessionId: scope.sessionId ?? store.getSnapshot().sessionId ?? "",
@@ -2927,17 +2944,15 @@ window.__ModuleLoader__.load({
 				onRestart: () => {
 					handleRestart(selectedInstance.id);
 				}
-			}) : selectedConfig !== null ? (0, react.createElement)(ConfigDetail, {
-				config: selectedConfig,
-				onStart: () => {
-					handleStart(selectedConfig.id);
-				},
-				onEdit: () => handleEditConfig(selectedConfig.id),
-				onDuplicate: () => handleDuplicateConfig(selectedConfig.id),
-				onDelete: () => {
-					handleDeleteConfig(selectedConfig.id);
+			}) : selectedConfig !== null ? (0, react.createElement)(LogHistoryView, {
+				ctx: props.ctx,
+				sessionId: scope.sessionId ?? store.getSnapshot().sessionId ?? "",
+				cwd: scope.cwd,
+				filter: selectedConfig.name,
+				onClose: () => {
+					setSelectedConfigId(null);
 				}
-			}) : (0, react.createElement)("div", { className: "sts-empty" }, "选择左侧配置查看详情或日志"))), showModal ? (0, react.createElement)(ConfigEditorModal, {
+			}) : (0, react.createElement)("div", { className: "sts-empty" }, "选择左侧配置查看其历史日志，或选择运行中的服务查看实时日志"))), showModal ? (0, react.createElement)(ConfigEditorModal, {
 				config: editingConfig,
 				scope: {
 					sessionId: scope.sessionId ?? store.getSnapshot().sessionId ?? "",