@norman-else/dsh-claude 0.1.10 → 0.1.12

package/lib/client.js

@@ -3,7 +3,7 @@ window.__ModuleLoader__.load({
 	factory: (require) => {
 		var module = { exports: {} };
 		module.exports;
-		var { useCallback, useEffect, useMemo, useState } = require("react");
+		var { useCallback, useEffect, useId, useMemo, useRef, useState } = require("react");
 		var { Fragment, jsx, jsxs } = require("react/jsx-runtime");
 		var { DisclosureRow, IconApiOutline14, IconThinkOutline14, StateDot } = require("@deepseek-ai/dsh-client-ui-primitives");
 		/** Claude's subagent dispatch tools; rendered as plugin-owned group cards
@@ -310,6 +310,91 @@ window.__ModuleLoader__.load({
 			fontWeight: 500,
 			overflowWrap: "anywhere"
 		};
+		const settingSelect = {
+			position: "relative",
+			minWidth: 0
+		};
+		const settingSelectTrigger = {
+			width: "100%",
+			minHeight: 38,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			gap: 12,
+			padding: "7px 11px 7px 13px",
+			border: "1px solid var(--dsw-alias-border-l2)",
+			borderRadius: 10,
+			background: "var(--dsw-alias-bg-layer-2)",
+			color: "var(--dsw-alias-label-primary)",
+			boxShadow: "0 1px 2px color-mix(in srgb, var(--dsw-alias-label-primary) 5%, transparent)",
+			font: "inherit",
+			fontSize: 13,
+			lineHeight: "20px",
+			textAlign: "left",
+			cursor: "pointer",
+			transition: "border-color 120ms ease, box-shadow 120ms ease, background 120ms ease"
+		};
+		const settingSelectTriggerOpen = {
+			borderColor: "var(--dsw-static-blue-450)",
+			boxShadow: "0 0 0 3px color-mix(in srgb, var(--dsw-static-blue-450) 15%, transparent)"
+		};
+		const settingSelectValue = {
+			minWidth: 0,
+			flex: 1,
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			whiteSpace: "nowrap",
+			fontWeight: 550
+		};
+		const settingSelectChevron = {
+			flex: "none",
+			color: "var(--dsw-alias-label-tertiary)",
+			fontSize: 16,
+			lineHeight: 1,
+			transform: "translateY(-1px)",
+			transition: "transform 120ms ease"
+		};
+		const settingSelectChevronOpen = { transform: "translateY(1px) rotate(180deg)" };
+		const settingSelectMenu = {
+			position: "absolute",
+			zIndex: 20,
+			top: "calc(100% + 6px)",
+			left: 0,
+			right: 0,
+			maxHeight: 240,
+			overflowY: "auto",
+			padding: 5,
+			border: "1px solid var(--dsw-alias-border-l2)",
+			borderRadius: 11,
+			background: "var(--dsw-alias-bg-layer-1)",
+			boxShadow: "0 12px 32px color-mix(in srgb, var(--dsw-alias-label-primary) 16%, transparent), 0 2px 8px color-mix(in srgb, var(--dsw-alias-label-primary) 8%, transparent)"
+		};
+		const settingSelectOption = {
+			width: "100%",
+			minHeight: 34,
+			display: "flex",
+			alignItems: "center",
+			gap: 8,
+			padding: "6px 9px",
+			border: "none",
+			borderRadius: 7,
+			background: "transparent",
+			color: "var(--dsw-alias-label-primary)",
+			font: "inherit",
+			fontSize: 13,
+			lineHeight: "20px",
+			textAlign: "left",
+			cursor: "pointer"
+		};
+		const settingSelectOptionActive = { background: "var(--dsw-alias-bg-layer-2)" };
+		const settingSelectCheck = {
+			width: 14,
+			flex: "none",
+			color: "var(--dsw-static-blue-450)",
+			fontSize: 12,
+			fontWeight: 700,
+			textAlign: "center"
+		};
 		const settingsActions = {
 			display: "flex",
 			flexWrap: "wrap",
@@ -1033,6 +1118,120 @@ window.__ModuleLoader__.load({
 		function value(status, detail) {
 			return detail === void 0 ? status : `${status} · ${detail}`;
 		}
+		function GlobalSettingSelect({ setting, disabled, onChange }) {
+			const [open, setOpen] = useState(false);
+			const [activeIndex, setActiveIndex] = useState(0);
+			const rootRef = useRef(null);
+			const triggerRef = useRef(null);
+			const listboxId = useId();
+			const selectedIndex = Math.max(0, setting.options.findIndex((option) => option.value === setting.value));
+			const selectedOption = setting.options[selectedIndex];
+			useEffect(() => {
+				if (!open) return;
+				const closeOnOutsidePointer = (event) => {
+					if (!rootRef.current?.contains(event.target)) setOpen(false);
+				};
+				document.addEventListener("mousedown", closeOnOutsidePointer);
+				return () => document.removeEventListener("mousedown", closeOnOutsidePointer);
+			}, [open]);
+			const openMenu = (index = selectedIndex) => {
+				setActiveIndex(index);
+				setOpen(true);
+			};
+			const choose = (index) => {
+				const option = setting.options[index];
+				if (option === void 0) return;
+				setOpen(false);
+				triggerRef.current?.focus();
+				if (option.value !== setting.value) onChange(option.value);
+			};
+			const move = (offset) => {
+				const count = setting.options.length;
+				if (count === 0) return;
+				setActiveIndex((current) => (current + offset + count) % count);
+			};
+			return /* @__PURE__ */ jsxs("div", {
+				ref: rootRef,
+				style: settingSelect,
+				onBlur: (event) => {
+					if (!event.currentTarget.contains(event.relatedTarget)) setOpen(false);
+				},
+				children: [/* @__PURE__ */ jsxs("button", {
+					ref: triggerRef,
+					type: "button",
+					"aria-haspopup": "listbox",
+					"aria-expanded": open,
+					"aria-controls": open ? listboxId : void 0,
+					"aria-activedescendant": open ? `${listboxId}-${activeIndex}` : void 0,
+					disabled: disabled || setting.options.length === 0,
+					style: {
+						...settingSelectTrigger,
+						...open ? settingSelectTriggerOpen : {}
+					},
+					onClick: () => {
+						if (open) setOpen(false);
+						else openMenu();
+					},
+					onKeyDown: (event) => {
+						if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+							event.preventDefault();
+							if (!open) openMenu(event.key === "ArrowDown" ? selectedIndex : Math.max(0, setting.options.length - 1));
+							else move(event.key === "ArrowDown" ? 1 : -1);
+						} else if (event.key === "Home" && open) {
+							event.preventDefault();
+							setActiveIndex(0);
+						} else if (event.key === "End" && open) {
+							event.preventDefault();
+							setActiveIndex(Math.max(0, setting.options.length - 1));
+						} else if ((event.key === "Enter" || event.key === " ") && open) {
+							event.preventDefault();
+							choose(activeIndex);
+						} else if (event.key === "Escape" && open) {
+							event.preventDefault();
+							setOpen(false);
+						}
+					},
+					children: [/* @__PURE__ */ jsx("span", {
+						style: settingSelectValue,
+						children: selectedOption?.label ?? setting.value
+					}), /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						style: {
+							...settingSelectChevron,
+							...open ? settingSelectChevronOpen : {}
+						},
+						children: "⌄"
+					})]
+				}), open ? /* @__PURE__ */ jsx("div", {
+					id: listboxId,
+					role: "listbox",
+					"aria-activedescendant": `${listboxId}-${activeIndex}`,
+					style: settingSelectMenu,
+					children: setting.options.map((option, index) => {
+						const selected = option.value === setting.value;
+						const active = index === activeIndex;
+						return /* @__PURE__ */ jsxs("button", {
+							id: `${listboxId}-${index}`,
+							type: "button",
+							role: "option",
+							"aria-selected": selected,
+							style: {
+								...settingSelectOption,
+								...active ? settingSelectOptionActive : {}
+							},
+							onMouseEnter: () => setActiveIndex(index),
+							onMouseDown: (event) => event.preventDefault(),
+							onClick: () => choose(index),
+							children: [/* @__PURE__ */ jsx("span", {
+								style: settingSelectCheck,
+								"aria-hidden": "true",
+								children: selected ? "✓" : ""
+							}), /* @__PURE__ */ jsx("span", { children: option.label })]
+						}, `${option.source}:${option.value}`);
+					})
+				}) : null]
+			});
+		}
 		function ClaudeCodeSettings({ t }) {
 			const [report, setReport] = useState();
 			const [error, setError] = useState();
@@ -1207,22 +1406,17 @@ window.__ModuleLoader__.load({
 							globalSettings === void 0 ? /* @__PURE__ */ jsx("p", {
 								style: notice,
 								children: t("globalSettingsLoading")
-							}) : globalSettings.settings.map((setting) => /* @__PURE__ */ jsxs("label", {
+							}) : globalSettings.settings.map((setting) => /* @__PURE__ */ jsxs("div", {
 								style: diagnosticGrid,
 								children: [/* @__PURE__ */ jsx("span", {
 									style: diagnosticLabel,
 									children: setting.key === "outputStyle" ? t("outputStyle") : setting.key
-								}), /* @__PURE__ */ jsx("select", {
-									value: setting.value,
+								}), /* @__PURE__ */ jsx(GlobalSettingSelect, {
+									setting,
 									disabled: globalSettingsBusy,
-									onChange: (event) => {
-										requestGlobalSettings({ [setting.key]: event.target.value });
-									},
-									style: diagnosticValue,
-									children: setting.options.map((option) => /* @__PURE__ */ jsx("option", {
-										value: option.value,
-										children: option.label
-									}, `${option.source}:${option.value}`))
+									onChange: (nextValue) => {
+										requestGlobalSettings({ [setting.key]: nextValue });
+									}
 								})]
 							}, setting.key)),
 							globalSettings?.settings.some((setting) => setting.effect === "new-session") === true ? /* @__PURE__ */ jsx("p", {
@@ -1353,10 +1547,12 @@ window.__ModuleLoader__.load({
 			schemaVersion: 1,
 			revision: 0,
 			owned: false,
+			commands: [],
 			activities: []
 		};
 		const POLL_INTERVAL_MS = 2e3;
 		const MAX_ACTIVITIES = 1e4;
+		const MAX_COMMANDS = 2e3;
 		function record(value) {
 			return value !== null && typeof value === "object" && !Array.isArray(value) ? value : void 0;
 		}
@@ -1366,7 +1562,11 @@ window.__ModuleLoader__.load({
 		/** Validate the public route envelope before publishing it to UI components. */
 		function parseClaudeClientProjection(value) {
 			const input = record(value);
-			if (input === void 0 || input.schemaVersion !== 1 || !nonNegativeInteger(input.revision) || typeof input.owned !== "boolean" || !Array.isArray(input.activities) || input.activities.length > MAX_ACTIVITIES) throw new Error("invalid Claude sidecar projection");
+			if (input === void 0 || input.schemaVersion !== 1 || !nonNegativeInteger(input.revision) || typeof input.owned !== "boolean" || !Array.isArray(input.commands) || input.commands.length > MAX_COMMANDS || !Array.isArray(input.activities) || input.activities.length > MAX_ACTIVITIES) throw new Error("invalid Claude sidecar projection");
+			for (const item of input.commands) {
+				const command = record(item);
+				if (command === void 0 || typeof command.publicName !== "string" || typeof command.claudeName !== "string" || typeof command.description !== "string" || command.hint !== void 0 && typeof command.hint !== "string" || typeof command.prefixed !== "boolean") throw new Error("invalid Claude command projection");
+			}
 			for (const item of input.activities) {
 				const activity = record(item);
 				if (activity === void 0 || !nonNegativeInteger(activity.turn) || !nonNegativeInteger(activity.step) || !nonNegativeInteger(activity.ordinal) || typeof activity.kind !== "string") throw new Error("invalid Claude sidecar activity");
@@ -1400,7 +1600,8 @@ window.__ModuleLoader__.load({
 					});
 					if (!response.ok) throw new Error(`Claude projection request failed (${response.status})`);
 					const next = parseClaudeClientProjection(await response.json());
-					if (next.revision !== snapshot.revision || next.owned !== snapshot.owned) {
+					const commandCatalogChanged = JSON.stringify(next.commands) !== JSON.stringify(snapshot.commands);
+					if (next.revision !== snapshot.revision || next.owned !== snapshot.owned || commandCatalogChanged) {
 						snapshot = next;
 						for (const listener of [...listeners]) listener();
 					}
@@ -1456,6 +1657,76 @@ window.__ModuleLoader__.load({
 			}
 		};
 		//#endregion
+		//#region src/client/claude-command-source.ts
+		const SOURCE_NAME = "Claude Code";
+		function commandsFor(store, session) {
+			const projection = store.source(session.sessionId).getSnapshot();
+			return projection.owned ? projection.commands : [];
+		}
+		function findCommand(store, session, publicName) {
+			return commandsFor(store, session).find((command) => command.publicName === publicName);
+		}
+		function claimFor(command) {
+			return {
+				token: `/${command.publicName} `,
+				...command.hint === void 0 ? {} : { hint: command.hint },
+				async submit(args, actx) {
+					const line = `/${command.claudeName}${args.length === 0 ? "" : ` ${args}`}`;
+					try {
+						await actx.conversation.send(line);
+						return { kind: "success" };
+					} catch (error) {
+						return {
+							kind: "error",
+							text: error instanceof Error ? error.message : String(error)
+						};
+					}
+				}
+			};
+		}
+		function pickCommand(store, pick) {
+			const command = findCommand(store, pick.session, pick.candidate.name);
+			if (command === void 0) return void 0;
+			return { claim: claimFor(command) };
+		}
+		/** Build a client-owned slash source. It never calls command.execute, so
+		* Claude Skill submission creates only the ordinary user-message turn. */
+		function createClaudeCommandSource(store) {
+			return {
+				trigger: "/",
+				name: SOURCE_NAME,
+				order: 10,
+				async candidates(session, request) {
+					if (request.position !== "leading") return [];
+					return commandsFor(store, session).map((command) => ({
+						name: command.publicName,
+						description: command.description,
+						...command.hint === void 0 ? {} : { hint: command.hint }
+					}));
+				},
+				onPick(pick) {
+					return pickCommand(store, pick);
+				},
+				matchSpace(session, token) {
+					if (!token.startsWith("/")) return void 0;
+					const command = findCommand(store, session, token.slice(1));
+					return command === void 0 ? void 0 : { claim: claimFor(command) };
+				},
+				async matchEnter(session, line) {
+					if (!line.startsWith("/")) return void 0;
+					const separator = line.indexOf(" ");
+					const command = findCommand(store, session, line.slice(1, separator === -1 ? void 0 : separator));
+					return command === void 0 ? void 0 : { claim: claimFor(command) };
+				},
+				lexicon(session) {
+					return commandsFor(store, session).map((command) => command.publicName);
+				},
+				subscribeLexicon(session, listener) {
+					return store.source(session.sessionId).subscribe(listener);
+				}
+			};
+		}
+		//#endregion
 		//#region src/client/locales.ts
 		const zh = {
 			nav: "Claude Code",
@@ -1632,7 +1903,9 @@ window.__ModuleLoader__.load({
 			"slots",
 			"locale",
 			"conversationEvents",
-			"sessions"
+			"sessions",
+			"inputTriggers",
+			"conversation"
 		];
 		function apply(ctx) {
 			const namespace = "settings.claude-code";
@@ -1642,6 +1915,7 @@ window.__ModuleLoader__.load({
 			}), "dsh-claude: client copy");
 			const t = ctx.locale.bind(namespace);
 			const projections = new ClaudeProjectionStore();
+			ctx.effect(() => ctx.inputTriggers.registerSource(createClaudeCommandSource(projections)), "dsh-claude: Claude slash source");
 			const sessions = ctx.get("sessions");
 			if (sessions !== void 0) ctx.effect(() => sessions.provide({
 				hooks: ["claudeProjection"],