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

package/lib/client.js

@@ -100,6 +100,14 @@ window.__ModuleLoader__.load({
 		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"/>`);
 		}
+		/** 📄 Copy — duplicate a run config. */
+		function CopyIcon({ size }) {
+			return svg(size, `<path d="M21 8c0-1.1-.9-2-2-2h-9c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h9c1.1 0 2-.9 2-2V8z" fill="currentColor"/><path d="M3 16V4c0-1.1.9-2 2-2h10v2H5v12H3z" fill="currentColor" opacity="0.6"/>`);
+		}
+		/** ✈️ Send — send selected text to the conversation composer. */
+		function SendToChatIcon({ size }) {
+			return svg(size, `<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" fill="currentColor"/>`);
+		}
 		/** Get the icon for a config type. */
 		function typeIcon(type, size) {
 			switch (type) {
@@ -141,7 +149,7 @@ window.__ModuleLoader__.load({
 		}
 		/** The config tree component. */
 		function ConfigTree(props) {
-			const { configs, instances, selectedInstanceId, selectedConfigId, onSelectConfig, onSelectInstance, onStartConfig, onStopInstance, onEditConfig } = props;
+			const { configs, instances, selectedInstanceId, selectedConfigId, onSelectConfig, onSelectInstance, onStartConfig, onStopInstance, onEditConfig, onDuplicateConfig } = props;
 			const [collapsed, setCollapsed] = (0, react.useState)(/* @__PURE__ */ new Set());
 			const toggleGroup = (type) => {
 				setCollapsed((prev) => {
@@ -201,7 +209,14 @@ window.__ModuleLoader__.load({
 							e.stopPropagation();
 							onEditConfig(config.id);
 						}
-					}, GearIcon({ size: 12 }))))];
+					}, GearIcon({ size: 12 })), (0, react.createElement)("button", {
+						className: "sts-icon-btn dup",
+						title: "复制（生成副本配置）",
+						onClick: (e) => {
+							e.stopPropagation();
+							onDuplicateConfig(config.id);
+						}
+					}, CopyIcon({ size: 12 }))))];
 					for (const inst of configInstances) {
 						const instSelected = selectedInstanceId === inst.id;
 						rows.push((0, react.createElement)("div", {
@@ -324,6 +339,221 @@ window.__ModuleLoader__.load({
 			return ANSI_COLORS[seg.bg] ?? null;
 		}
 		//#endregion
+		//#region src/client/logHighlight.ts
+		const C = {
+			ts: "#8f8f98",
+			thread: "#b48ead",
+			levelInfo: "#6ab04c",
+			levelDebug: "#7a9ce8",
+			levelWarn: "#e2b93d",
+			levelError: "#f0625f",
+			clazz: "#61afef",
+			exception: "#ff5f56",
+			frame: "#c678dd",
+			location: "#56b6c2"
+		};
+		/** Log level → color. */
+		function levelColor(level) {
+			switch (level) {
+				case "DEBUG":
+				case "TRACE": return C.levelDebug;
+				case "INFO": return C.levelInfo;
+				case "WARN": return C.levelWarn;
+				case "ERROR":
+				case "FATAL":
+				case "OFF": return C.levelError;
+				default: return C.levelInfo;
+			}
+		}
+		/** One-pass tokenizer: timestamps, levels, threads, exceptions, stacks, classes. */
+		const TOKEN_RE = new RegExp([
+			"(?<ts>\\d{4}-\\d{2}-\\d{2}[T ]\\d{2}:\\d{2}:\\d{2}[.,]\\d{1,6}(?:Z|[+-]\\d{2}:?\\d{2})?)",
+			"|(?<level>\\b(?:DEBUG|INFO|WARN|ERROR|TRACE|FATAL|OFF)\\b)",
+			"|(?<thread>\\[[^\\]\\r\\n]+\\])",
+			"|(?<exception>\\bCaused by:|[A-Z]\\w*(?:Exception|Error)(?:\\b|:\\s))",
+			"|(?<frame>\\s+at\\s+(?<target>[\\w$./<>]+)(?:\\((?<loc>[^)]*)\\))?)",
+			"|(?<location>\\((?<lfile>[\\w$]+\\.(?:java|kt|groovy|scala)):(?<lline>\\d+)(?::\\d+)?\\))",
+			"|(?<call>(?<callCls>[A-Za-z_$][\\w$]*(?:\\.[A-Za-z_$][\\w$]*)+)\\.(?<callMethod>[A-Za-z_$][\\w$]*)\\s*\\()",
+			"|(?<clazz>[A-Za-z_$][\\w$]*(?:\\.[A-Za-z_$][\\w$]*)+\\b)"
+		].join(""), "g");
+		/** The last segment must look like a class name (starts uppercase); field
+		*  chains such as System.out are skipped. */
+		function looksLikeClassName(fqcn) {
+			const last = fqcn.split(".").pop() ?? "";
+			return last !== "" && /^[A-Z]/.test(last);
+		}
+		/** Split a stack-frame target `pkg.Cls.method` into class + method. */
+		function parseFrameTarget(target) {
+			const dot = target.lastIndexOf(".");
+			if (dot > 0 && dot < target.length - 1) return {
+				className: target.slice(0, dot),
+				method: target.slice(dot + 1)
+			};
+			return {
+				className: target,
+				method: ""
+			};
+		}
+		/** Parse a `File.java:45` (or `File.java:45:12`) location string. */
+		function parseFrameLoc(loc) {
+			if (loc === void 0 || loc.trim() === "") return {};
+			const parts = loc.trim().split(":");
+			if (parts.length < 2) return {};
+			const line = Number(parts[1]);
+			return {
+				file: parts[0],
+				line: Number.isInteger(line) && line > 0 ? line : void 0
+			};
+		}
+		/**
+		* Tokenize a single log line into highlighted segments.
+		* Returns one segment per token; the rest stays plain.
+		*/
+		function highlightLogText(text) {
+			const out = [];
+			let last = 0;
+			TOKEN_RE.lastIndex = 0;
+			let m;
+			while ((m = TOKEN_RE.exec(text)) !== null) {
+				if (m.index > last) out.push({ text: text.slice(last, m.index) });
+				const g = m.groups ?? {};
+				if (g.ts !== void 0) out.push({
+					text: m[0],
+					color: C.ts
+				});
+				else if (g.level !== void 0) out.push({
+					text: m[0],
+					color: levelColor(g.level),
+					bold: true
+				});
+				else if (g.thread !== void 0) out.push({
+					text: m[0],
+					color: C.thread
+				});
+				else if (g.exception !== void 0) out.push({
+					text: m[0],
+					color: C.exception,
+					bold: true
+				});
+				else if (g.frame !== void 0) {
+					const { className, method } = parseFrameTarget(g.target ?? "");
+					const { file, line } = parseFrameLoc(g.loc);
+					out.push({
+						text: m[0],
+						color: C.frame,
+						link: {
+							kind: "frame",
+							className,
+							method,
+							file,
+							line
+						}
+					});
+				} else if (g.location !== void 0) out.push({
+					text: m[0],
+					color: C.location,
+					link: {
+						kind: "location",
+						file: g.lfile,
+						line: Number(g.lline)
+					}
+				});
+				else if (g.call !== void 0) {
+					const className = g.callCls ?? "";
+					out.push({
+						text: m[0],
+						color: C.clazz,
+						link: looksLikeClassName(className) ? {
+							kind: "class",
+							className,
+							method: g.callMethod ?? ""
+						} : void 0
+					});
+				} else if (g.clazz !== void 0) {
+					const className = g.clazz;
+					out.push({
+						text: m[0],
+						color: C.clazz,
+						link: looksLikeClassName(className) ? {
+							kind: "class",
+							className
+						} : void 0
+					});
+				} else out.push({ text: m[0] });
+				last = m.index + m[0].length;
+			}
+			if (last < text.length) out.push({ text: text.slice(last) });
+			return out;
+		}
+		//#endregion
+		//#region src/client/conversationDraft.ts
+		/**
+		* Append `text` to the session's composer draft (space-separated, like the
+		* @-mentions). Returns false — and warns — when the conversation service
+		* or the session scope is unavailable.
+		*/
+		function appendToDraft(ctx, sessionId, text) {
+			try {
+				const actx = ctx.sessions?.scope(sessionId);
+				if (actx === void 0) return false;
+				const conversation = ctx.get.bind(ctx)("conversation");
+				if (conversation === void 0 || conversation === null) return false;
+				const input = conversation.input.for(actx);
+				if (input === void 0) return false;
+				const draft = input.state.getSnapshot().draft ?? "";
+				input.setDraft(draft.trim() === "" ? text : `${draft} ${text}`);
+				return true;
+			} catch (error) {
+				console.warn("[dsh-better-sidebar-starter] draft insert failed:", error);
+				return false;
+			}
+		}
+		//#endregion
+		//#region src/client/utils.ts
+		/**
+		* Shared utility functions for the starter plugin.
+		* @module dsh-better-sidebar-starter/client/utils
+		*/
+		let toastEl = null;
+		let toastTimer = null;
+		/** Show a small floating toast notification. */
+		function showToast(message, success) {
+			if (toastTimer !== null) {
+				clearTimeout(toastTimer);
+				toastTimer = null;
+			}
+			if (toastEl !== null) {
+				document.body.removeChild(toastEl);
+				toastEl = null;
+			}
+			const el = document.createElement("div");
+			el.textContent = message;
+			el.style.cssText = `
+    position: fixed;
+    top: 16px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 8px 16px;
+    background: ${success ? "rgba(78,154,6,0.9)" : "rgba(235,87,87,0.9)"};
+    color: #fff;
+    font-size: 12px;
+    border-radius: 6px;
+    z-index: 999999;
+    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
+    pointer-events: none;
+    font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", "Cascadia Code", Menlo, Consolas, monospace;
+  `;
+			document.body.appendChild(el);
+			toastEl = el;
+			toastTimer = setTimeout(() => {
+				if (toastEl !== null) {
+					document.body.removeChild(toastEl);
+					toastEl = null;
+				}
+				toastTimer = null;
+			}, 2e3);
+		}
+		//#endregion
 		//#region src/client/LogView.tsx
 		/**
 		* Log view: the right pane showing real-time log output from a running
@@ -331,32 +561,126 @@ window.__ModuleLoader__.load({
 		* 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 = {};
+		/** API base. */
+		const API_BASE$1 = "/api/dsh-better-sidebar-starter";
+		/** 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. */
+		function renderAnsiLine(text, keyBase, onLinkClick) {
+			const segments = parseAnsi(text);
+			const nodes = [];
+			let hlCounter = 0;
+			for (let i = 0; i < segments.length; i++) {
+				const seg = segments[i];
 				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);
-			});
+				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 };
+					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";
+						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) => {
+								e.stopPropagation();
+								onLinkClick(h.link);
+							} : void 0
+						}, h.text));
+					}
+				}
+			}
+			return nodes;
 		}
 		/** The log view component. */
-		function LogView({ instance, onStop, onRestart }) {
+		function LogView({ instance, ctx, sessionId, cwd, onStop, onRestart }) {
 			const [logLines, setLogLines] = (0, react.useState)([]);
 			const [autoScroll, setAutoScroll] = (0, react.useState)(true);
 			const [exitInfo, setExitInfo] = (0, react.useState)(null);
+			const [selLength, setSelLength] = (0, react.useState)(0);
 			const contentRef = (0, react.useRef)(null);
 			const wsRef = (0, react.useRef)(null);
 			const lineKeyCounter = (0, react.useRef)(0);
+			(0, react.useEffect)(() => {
+				const updateSel = () => {
+					const sel = window.getSelection();
+					const len = sel !== null && !sel.isCollapsed ? sel.toString().trim().length : 0;
+					setSelLength(len);
+				};
+				document.addEventListener("selectionchange", updateSel);
+				return () => document.removeEventListener("selectionchange", updateSel);
+			}, []);
+			/** Send the currently selected log text into the conversation composer. */
+			const handleSendSelection = () => {
+				const sel = window.getSelection();
+				const text = sel !== null && !sel.isCollapsed ? sel.toString().trim() : "";
+				if (text === "") {
+					showToast("请先在日志中选中文本", false);
+					return;
+				}
+				if (appendToDraft(ctx, sessionId, text)) showToast(`已将选中文本（${text.length} 字符）发送到对话`, true);
+				else showToast("发送失败：对话服务不可用", false);
+			};
+			/** Open the source file behind a highlighted class / frame / location token. */
+			const handleCodeClick = async (link) => {
+				const payload = { root: instance.cwd };
+				if (link.kind === "class" || link.kind === "frame") payload.className = link.className;
+				if (link.file !== void 0) payload.file = link.file;
+				if (link.method !== void 0 && link.method !== "<init>" && link.method !== "<clinit>") payload.method = link.method;
+				if (link.line !== void 0) payload.line = link.line;
+				try {
+					const params = new URLSearchParams({ sessionId });
+					if (cwd !== void 0 && cwd !== "") params.set("cwd", cwd);
+					const resp = await fetch(`${API_BASE$1}/locate-source?${params.toString()}`, {
+						method: "POST",
+						headers: { "content-type": "application/json" },
+						body: JSON.stringify(payload)
+					});
+					if (!resp.ok) {
+						let reason = "定位源码失败";
+						try {
+							const err = await resp.json();
+							if (typeof err.error === "string" && err.error !== "") reason = err.error;
+						} catch {}
+						showToast(reason, false);
+						return;
+					}
+					const data = await resp.json();
+					if (data.ok !== true || typeof data.path !== "string") {
+						showToast(data.reason ?? "未找到源文件", false);
+						return;
+					}
+					const base = data.path.split(/[\\/]/).pop() ?? data.path;
+					const line = typeof data.line === "number" ? data.line : void 0;
+					const title = line !== void 0 ? `${base} : ${line}` : base;
+					const betterSidebar = ctx.betterSidebar;
+					if (betterSidebar !== void 0) betterSidebar.openFile({
+						sessionId,
+						cwd
+					}, data.path, title);
+					try {
+						navigator.clipboard?.writeText(`${base}${line !== void 0 ? `:${line}` : ""}`);
+					} catch {}
+					showToast(line !== void 0 ? `已打开 ${base}，定位到第 ${line} 行（已复制 ${base}:${line}）` : `已打开 ${base}`, true);
+				} catch {
+					showToast("定位源码失败", false);
+				}
+			};
 			const lineBuffer = (0, react.useRef)({ current: [] });
 			/** Flush the buffer into a new log line. */
 			const flushLine = (0, react.useCallback)(() => {
@@ -438,15 +762,19 @@ window.__ModuleLoader__.load({
 				className: "sts-icon-btn stop",
 				title: "停止",
 				onClick: onStop
-			}, StopIcon({ size: 14 }), " 停止") : null, (0, react.createElement)("button", {
+			}, StopIcon({ size: 14 }), (0, react.createElement)("span", { className: "sts-icon-btn-label" }, "停止")) : null, (0, react.createElement)("button", {
 				className: "sts-icon-btn",
 				title: "重启",
 				onClick: onRestart
-			}, RestartIcon({ size: 14 }), " 重启"), (0, react.createElement)("button", {
+			}, RestartIcon({ size: 14 }), (0, react.createElement)("span", { className: "sts-icon-btn-label" }, "重启")), (0, react.createElement)("button", {
 				className: "sts-icon-btn",
 				title: "清空",
 				onClick: handleClear
-			}, TrashIcon({ size: 14 }), " 清空"), (0, react.createElement)("label", {
+			}, TrashIcon({ size: 14 }), (0, react.createElement)("span", { className: "sts-icon-btn-label" }, "清空")), (0, react.createElement)("button", {
+				className: "sts-icon-btn send",
+				title: selLength > 0 ? `发送选中的 ${selLength} 字符到对话` : "发送选中的文本到对话",
+				onClick: handleSendSelection
+			}, SendToChatIcon({ size: 14 }), (0, react.createElement)("span", { className: "sts-icon-btn-label" }, selLength > 0 ? `发送选中(${selLength})` : "发送选中")), (0, react.createElement)("label", {
 				className: "sts-log-toolbar-label",
 				onClick: () => setAutoScroll((v) => !v)
 			}, autoScroll ? "☑" : "☐", " 自动滚动")), (0, react.createElement)("div", {
@@ -462,7 +790,9 @@ window.__ModuleLoader__.load({
 					return (0, react.createElement)("span", {
 						key: segKey,
 						className: entry.stream === "stderr" ? "sts-log-stderr" : ""
-					}, renderAnsiLine(entry.text, segKey));
+					}, renderAnsiLine(entry.text, segKey, (link) => {
+						handleCodeClick(link);
+					}));
 				}));
 			}), exitInfo !== null ? (0, react.createElement)("div", {
 				key: "exit-info",
@@ -487,7 +817,7 @@ window.__ModuleLoader__.load({
 			custom: "Custom"
 		};
 		/** The detail card component. */
-		function ConfigDetail({ config, onStart, onEdit, onDelete }) {
+		function ConfigDetail({ config, onStart, onEdit, onDuplicate, onDelete }) {
 			const envEntries = Object.entries(config.env);
 			const dateFmt = (ts) => {
 				if (ts === null) return "—";
@@ -500,6 +830,10 @@ window.__ModuleLoader__.load({
 				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", {
@@ -1324,6 +1658,30 @@ window.__ModuleLoader__.load({
 .sts-icon-btn.stop { color: #eb5757; }
 .sts-icon-btn.gear { color: var(--dsw-alias-label-secondary, #b0b0b0); }
 .sts-icon-btn.trash { color: #eb5757; }
+.sts-icon-btn.dup { color: var(--dsw-alias-label-secondary, #b0b0b0); }
+.sts-icon-btn.send { color: #4a90d9; }
+/* Toolbar buttons (log view) are icon-only; the label expands on hover. */
+.sts-log-toolbar .sts-icon-btn {
+  width: 26px;
+  height: 26px;
+  padding: 0 6px;
+  gap: 0;
+  font-size: 11px;
+  opacity: 1;
+}
+.sts-log-toolbar .sts-icon-btn .sts-icon-btn-label {
+  display: inline-block;
+  max-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  opacity: 0;
+  transition: max-width 0.18s ease, opacity 0.18s ease, margin-left 0.18s ease;
+}
+.sts-log-toolbar .sts-icon-btn:hover .sts-icon-btn-label {
+  max-width: 120px;
+  margin-left: 4px;
+  opacity: 1;
+}
 
 /* ===== Instance row ===== */
 .sts-instance-row {
@@ -1411,6 +1769,16 @@ window.__ModuleLoader__.load({
 .sts-log-line {
   min-height: 1em;
 }
+/* Clickable source tokens (classes / stack frames) inside the log. */
+.sts-log-link {
+  cursor: pointer;
+  border-bottom: 1px dashed rgba(97, 175, 239, 0.4);
+  transition: background 0.1s ease;
+}
+.sts-log-link:hover {
+  background: rgba(97, 175, 239, 0.14);
+  border-bottom-color: #61afef;
+}
 
 /* ===== Config detail ===== */
 .sts-detail {
@@ -2168,6 +2536,34 @@ window.__ModuleLoader__.load({
 				});
 				setShowModal(true);
 			};
+			/**
+			* Duplicate a config: open the editor prefilled with ALL of the original
+			* config's info under an auto-generated "xxx-副本" name (deduped against
+			* existing names). Saving it (id omitted) creates a brand-new config.
+			*/
+			const handleDuplicateConfig = (configId) => {
+				const config = configs.find((c) => c.id === configId);
+				if (config === void 0) return;
+				const stem = config.name.endsWith("-副本") ? config.name.slice(0, -3) : config.name;
+				const taken = new Set(configs.map((c) => c.name));
+				let dupName = `${stem}-副本`;
+				let suffix = 2;
+				while (taken.has(dupName)) {
+					dupName = `${stem}-副本${suffix}`;
+					suffix++;
+				}
+				setEditingConfig({
+					name: dupName,
+					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 {
@@ -2260,12 +2656,16 @@ window.__ModuleLoader__.load({
 				onStopInstance: (id) => {
 					handleStop(id);
 				},
-				onEditConfig: handleEditConfig
+				onEditConfig: handleEditConfig,
+				onDuplicateConfig: handleDuplicateConfig
 			})), (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,
+				ctx: props.ctx,
+				sessionId: scope.sessionId ?? store.getSnapshot().sessionId ?? "",
+				cwd: scope.cwd,
 				onStop: () => {
 					handleStop(selectedInstance.id);
 				},
@@ -2278,6 +2678,7 @@ window.__ModuleLoader__.load({
 					handleStart(selectedConfig.id);
 				},
 				onEdit: () => handleEditConfig(selectedConfig.id),
+				onDuplicate: () => handleDuplicateConfig(selectedConfig.id),
 				onDelete: () => {
 					handleDeleteConfig(selectedConfig.id);
 				}