dsh-prompt-customizer 0.2.5 → 0.2.7

package/client/client.js

@@ -15,6 +15,7 @@ window.__ModuleLoader__.load({
 				tabsSections: "提示词",
 				tabsTools: "工具",
 				tabsPresets: "预设",
+				tabsPreview: "预览",
 				refresh: "刷新",
 				blockedOff: "未屏蔽",
 				blockedOn: "已屏蔽",
@@ -30,13 +31,18 @@ window.__ModuleLoader__.load({
 				add: "添加",
 				hiddenOff: "可见",
 				hiddenOn: "已隐藏",
-				includeMode: "白名单模式：仅保留勾选项",
-				excludeMode: "黑名单模式：勾选 = 隐藏",
+				selectAll: "全选",
+				selectNone: "全不选",
 				empty: "（空）",
 				dynamic: "<动态生成>",
 				drag: "拖动排序",
 				moveUp: "上移",
 				moveDown: "下移",
+				previewHint: "以下为屏蔽/替换/注入后的最终系统提示词：",
+				previewPrompt: "提示词预览",
+				previewSections: "段",
+				previewTools: "工具预览",
+				previewToolCount: "个工具",
 				savePreset: "保存当前为预设",
 				presetName: "预设名称",
 				save: "保存",
@@ -55,6 +61,7 @@ window.__ModuleLoader__.load({
 				tabsSections: "Sections",
 				tabsTools: "Tools",
 				tabsPresets: "Presets",
+				tabsPreview: "Preview",
 				refresh: "Refresh",
 				blockedOff: "Active",
 				blockedOn: "Blocked",
@@ -70,13 +77,18 @@ window.__ModuleLoader__.load({
 				add: "Add",
 				hiddenOff: "Visible",
 				hiddenOn: "Hidden",
-				includeMode: "Whitelist: keep only checked",
-				excludeMode: "Blacklist: check to hide",
+				selectAll: "Select all",
+				selectNone: "Select none",
 				empty: "(empty)",
 				dynamic: "<dynamic>",
 				drag: "Drag to reorder",
 				moveUp: "Move up",
 				moveDown: "Move down",
+				previewHint: "Final system prompt after block/replace/inject:",
+				previewPrompt: "Prompt preview",
+				previewSections: "sections",
+				previewTools: "Tools preview",
+				previewToolCount: "tools",
 				savePreset: "Save current as preset",
 				presetName: "Preset name",
 				save: "Save",
@@ -179,6 +191,34 @@ window.__ModuleLoader__.load({
 					textOverflow: "ellipsis",
 					whiteSpace: "nowrap"
 				},
+				previewText: {
+					fontFamily: "monospace",
+					fontSize: 12,
+					lineHeight: 1.6,
+					whiteSpace: "pre-wrap",
+					wordBreak: "break-word",
+					maxHeight: 480,
+					overflowY: "auto",
+					padding: 10,
+					border: "1px solid rgba(128,128,128,.2)",
+					borderRadius: 8,
+					background: "rgba(0,0,0,.18)",
+					margin: 0
+				},
+				toolWrap: {
+					display: "flex",
+					flexWrap: "wrap",
+					gap: 6
+				},
+				toolChip: {
+					fontFamily: "monospace",
+					fontSize: 12,
+					color: "rgba(128,128,128,.95)",
+					border: "1px solid rgba(128,128,128,.3)",
+					borderRadius: 6,
+					padding: "2px 6px",
+					cursor: "help"
+				},
 				badgeOk: {
 					color: "#3fb950",
 					fontSize: 11,
@@ -478,60 +518,6 @@ window.__ModuleLoader__.load({
 				replace
 			};
 		}
-		/** Whether a tool is hidden under the current include/exclude config. */
-		function isToolHidden(name, toolsCfg) {
-			const include = toolsCfg?.include ?? [];
-			const exclude = toolsCfg?.exclude ?? [];
-			return include.length > 0 ? !include.includes(name) : exclude.includes(name);
-		}
-		/** Toggle a tool's hidden state, returning a new tools config. */
-		function toggleTool(name, currentlyHidden, toolsCfg) {
-			const include = toolsCfg?.include ?? [];
-			const exclude = toolsCfg?.exclude ?? [];
-			if (include.length > 0) {
-				const next = include.slice();
-				if (currentlyHidden) {
-					next.push(name);
-					return {
-						exclude: exclude.filter((n) => n !== name),
-						include: next
-					};
-				}
-				const i = next.indexOf(name);
-				if (i >= 0) next.splice(i, 1);
-				return {
-					exclude,
-					include: next
-				};
-			}
-			const next = exclude.slice();
-			if (currentlyHidden) {
-				const i = next.indexOf(name);
-				if (i >= 0) next.splice(i, 1);
-			} else next.push(name);
-			return {
-				exclude: next,
-				include
-			};
-		}
-		/**
-		* Switch between include (whitelist) and exclude (blacklist) modes. Turning
-		* include mode on discards names unknown to the current tool set and seeds the
-		* include list from the currently non-excluded tools; turning it off clears the
-		* include list (keep only known exclude names).
-		*/
-		function setToolMode(on, toolsCfg, toolNames) {
-			const known = new Set(toolNames);
-			const exclude = (toolsCfg?.exclude ?? []).filter((n) => known.has(n));
-			if (on) return {
-				exclude,
-				include: toolNames.filter((n) => !exclude.includes(n))
-			};
-			return {
-				exclude,
-				include: []
-			};
-		}
 		/** Serialize a preset for export (JSON-safe full snapshot). */
 		function serializePreset(preset) {
 			return {
@@ -808,36 +794,44 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/client/ToolsTab.tsx
-		/** Tools tab: hide tools from the model catalog by exclude/include. */
+		/** Tools tab: hide tools from the model catalog (blacklist only — check = hide). */
 		function ToolsTab({ cfg, inv, scope, t }) {
 			const tools = inv?.tools ?? [];
-			const toolsCfg = cfg.tools ?? {
-				exclude: [],
-				include: []
-			};
-			const includeMode = (toolsCfg.include ?? []).length > 0;
+			const exclude = cfg.tools?.exclude ?? [];
+			const hidden = (name) => exclude.includes(name);
 			const toggle = (name, currentlyHidden) => {
-				scope.set("tools", toggleTool(name, currentlyHidden, toolsCfg));
+				const next = exclude.slice();
+				if (currentlyHidden) {
+					const i = next.indexOf(name);
+					if (i >= 0) next.splice(i, 1);
+				} else next.push(name);
+				scope.set("tools", {
+					exclude: next,
+					include: []
+				});
 			};
-			const setIncludeMode = (on) => {
-				scope.set("tools", setToolMode(on, toolsCfg, tools.map((tool) => tool.name)));
+			const setAll = (hideAll) => {
+				scope.set("tools", {
+					exclude: hideAll ? tools.map((tool) => tool.name) : [],
+					include: []
+				});
 			};
 			return (0, react.createElement)("div", {}, [(0, react.createElement)("div", { style: s.bar }, [(0, react.createElement)("button", {
-				style: includeMode ? s.tabActive : s.tab,
-				onClick: () => setIncludeMode(true)
-			}, t("includeMode")), (0, react.createElement)("button", {
-				style: includeMode ? s.tab : s.tabActive,
-				onClick: () => setIncludeMode(false)
-			}, t("excludeMode"))]), (0, react.createElement)("div", { style: s.list }, [tools.length === 0 ? (0, react.createElement)("div", { style: s.muted }, t("empty")) : null, tools.map((tool) => {
-				const hidden = isToolHidden(tool.name, toolsCfg);
+				style: s.mini,
+				onClick: () => setAll(true)
+			}, t("selectAll")), (0, react.createElement)("button", {
+				style: s.mini,
+				onClick: () => setAll(false)
+			}, t("selectNone"))]), (0, react.createElement)("div", { style: s.list }, [tools.length === 0 ? (0, react.createElement)("div", { style: s.muted }, t("empty")) : null, tools.map((tool) => {
+				const isHidden = hidden(tool.name);
 				return (0, react.createElement)("div", {
 					key: tool.name,
 					style: s.row
 				}, [(0, react.createElement)("label", { style: s.switchWrap }, [(0, react.createElement)("input", {
 					type: "checkbox",
-					checked: hidden,
-					onChange: () => toggle(tool.name, hidden)
-				}), (0, react.createElement)("span", { style: hidden ? s.badgeBlocked : s.badgeOk }, hidden ? t("hiddenOn") : t("hiddenOff"))]), (0, react.createElement)("div", { style: s.rowBody }, [(0, react.createElement)("div", { style: s.rowTitle }, (0, react.createElement)("span", { style: s.code }, tool.name)), (0, react.createElement)("div", { style: s.preview }, String(tool.description ?? "").slice(0, 140))])]);
+					checked: isHidden,
+					onChange: () => toggle(tool.name, isHidden)
+				}), (0, react.createElement)("span", { style: isHidden ? s.badgeBlocked : s.badgeOk }, isHidden ? t("hiddenOn") : t("hiddenOff"))]), (0, react.createElement)("div", { style: s.rowBody }, [(0, react.createElement)("div", { style: s.rowTitle }, (0, react.createElement)("span", { style: s.code }, tool.name)), (0, react.createElement)("div", { style: s.preview }, String(tool.description ?? "").slice(0, 140))])]);
 			})])]);
 		}
 		//#endregion
@@ -945,6 +939,77 @@ window.__ModuleLoader__.load({
 			return "p_" + Date.now().toString(36) + Math.random().toString(36).slice(2, 7);
 		}
 		//#endregion
+		//#region src/client/PreviewTools.tsx
+		/** Tools preview: read-only whitelist-style list of the tools the current
+		*  preset will inject (the FINAL model-visible catalog after include/exclude).
+		*  A tool being listed means it is visible — there is no "blocked" state here.
+		*  This view never edits the blacklist/whitelist config. */
+		function norm(tool) {
+			return typeof tool === "string" ? {
+				name: tool,
+				description: ""
+			} : tool;
+		}
+		function PreviewTools({ tools, t }) {
+			if (tools.length === 0) return (0, react.createElement)("div", { style: s.muted }, t("empty"));
+			return (0, react.createElement)("div", { style: s.list }, [(0, react.createElement)("div", { style: s.rowTitle }, [(0, react.createElement)("span", { style: s.orderTag }, `${tools.length} ${t("previewToolCount")}`)]), tools.map((tool) => {
+				const { name, description } = norm(tool);
+				return (0, react.createElement)("div", {
+					key: name,
+					style: s.row
+				}, [(0, react.createElement)("div", { style: s.rowBody }, [(0, react.createElement)("div", { style: s.rowTitle }, (0, react.createElement)("span", { style: s.code }, name)), (0, react.createElement)("div", { style: s.preview }, String(description ?? "").slice(0, 140))])]);
+			})]);
+		}
+		//#endregion
+		//#region src/client/PreviewTab.tsx
+		/** Preview tab: two read-only sub-tabs — the FINAL assembled system prompt
+		*  after every plugin's filter, and the tools the current preset will inject
+		*  (whitelist-style, after include/exclude). Neither view edits config. */
+		const PREVIEW_URL = "/api/prompt-customizer/preview";
+		function PreviewTab({ scope, t }) {
+			const [sub, setSub] = (0, react.useState)("prompt");
+			const [data, setData] = (0, react.useState)(null);
+			const [error, setError] = (0, react.useState)(null);
+			const inFlight = (0, react.useRef)(false);
+			const pending = (0, react.useRef)(false);
+			const load = () => {
+				if (inFlight.current) {
+					pending.current = true;
+					return;
+				}
+				inFlight.current = true;
+				setData(null);
+				fetch(PREVIEW_URL, { cache: "no-store" }).then((r) => r.json()).then((body) => {
+					if (body && body.ok === false) throw new Error(body.error ?? "preview failed");
+					setData(body);
+					setError(null);
+				}).catch((e) => setError(String(e instanceof Error ? e.message : e))).finally(() => {
+					inFlight.current = false;
+					if (pending.current) {
+						pending.current = false;
+						load();
+					}
+				});
+			};
+			(0, react.useEffect)(load, []);
+			(0, react.useEffect)(() => scope.subscribe(load), [scope]);
+			return (0, react.createElement)("div", { style: s.list }, [
+				(0, react.createElement)("div", { style: s.bar }, [(0, react.createElement)("button", {
+					style: sub === "prompt" ? s.tabActive : s.tab,
+					onClick: () => setSub("prompt")
+				}, t("previewPrompt")), (0, react.createElement)("button", {
+					style: sub === "tools" ? s.tabActive : s.tab,
+					onClick: () => setSub("tools")
+				}, t("previewTools"))]),
+				error ? (0, react.createElement)("div", { style: s.error }, String(error)) : null,
+				data === null && !error ? (0, react.createElement)("div", { style: s.muted }, t("loading")) : null,
+				sub === "prompt" ? data ? [(0, react.createElement)("div", { style: s.rowTitle }, [(0, react.createElement)("span", { style: s.muted }, t("previewHint")), (0, react.createElement)("span", { style: s.orderTag }, `${data.sections.length} ${t("previewSections")}`)]), (0, react.createElement)("pre", { style: s.previewText }, data.text || t("empty"))] : null : data ? (0, react.createElement)(PreviewTools, {
+					tools: data.tools,
+					t
+				}) : null
+			]);
+		}
+		//#endregion
 		//#region src/client/index.ts
 		/**
 		* dsh-prompt-customizer — browser half (TypeScript source).
@@ -1017,6 +1082,10 @@ window.__ModuleLoader__.load({
 						style: tab === "presets" ? s.tabActive : s.tab,
 						onClick: () => setTab("presets")
 					}, t("tabsPresets")),
+					(0, react.createElement)("button", {
+						style: tab === "preview" ? s.tabActive : s.tab,
+						onClick: () => setTab("preview")
+					}, t("tabsPreview")),
 					(0, react.createElement)("button", {
 						style: s.refresh,
 						onClick: refresh
@@ -1033,11 +1102,14 @@ window.__ModuleLoader__.load({
 					inv,
 					scope,
 					t
-				}) : (0, react.createElement)(PresetsTab, {
+				}) : tab === "presets" ? (0, react.createElement)(PresetsTab, {
 					cfg,
 					inv,
 					scope,
 					t
+				}) : (0, react.createElement)(PreviewTab, {
+					scope,
+					t
 				})
 			]);
 		}