@agimon-ai/po-web-dashboard 0.0.0-alpha.0

package/dist/web/features/leader/CommandPalette.mjs

@@ -0,0 +1,390 @@
+import { leaderGroup } from "../../lib/leaderTree.mjs";
+import { paletteCommands, pluginLeaderBindings } from "../../lib/pluginRegistry.mjs";
+import { sendFrame } from "../../lib/transport.mjs";
+import { focusPrompt } from "../../lib/promptFocus.mjs";
+import { sessionsStore } from "../../stores/sessionsStore.mjs";
+import { runCommand, useActiveSession } from "../../stores/sessionStore.mjs";
+import { closePalette, paletteStore, setPalettePath, togglePalette } from "../../stores/paletteStore.mjs";
+import { openTransientTab } from "../../stores/transientTabsStore.mjs";
+import { useOpenTab } from "../../stores/useOpenTab.mjs";
+import { useWebPluginRegistry } from "../../stores/useWebPluginRegistry.mjs";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useStore } from "@tanstack/react-store";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { CommandEmpty, CommandFooter, CommandGroupLabel, CommandHeader, CommandInput, CommandItem, CommandItemLabel, CommandList, Dialog, DialogContent, DialogTitle, Kbd, OptionLabel, OptionRow, StatusBadge, cn } from "@agimon-ai/po-web-components";
+//#region src/web/features/leader/CommandPalette.tsx
+const LEADER_PREFIX = "SPC";
+const SEARCH_KEY = "/";
+const LEADER_KEY = /^[a-z0-9]$/;
+function pathLabel(keys) {
+	return [LEADER_PREFIX, ...keys].join(" ");
+}
+/**
+* Leader Space, as much of it as a browser can honestly show.
+*
+* The session's own leader tree never reaches an RPC client, so the tree here
+* is what the installed web plugins declared: each package's cockpit half of
+* the key paths its TUI documents. Keys walk the tree the way the TUI does,
+* backspace climbs, and the slash search is the road to the commands no
+* package has put on a key. The surface is a modal dialog, so focus comes
+* back to wherever it was (usually the composer) when it closes.
+*/
+function CommandPalette() {
+	useWebPluginRegistry();
+	const commands = useActiveSession((state) => state.commands);
+	const { open, path } = useStore(paletteStore);
+	const activeId = useStore(sessionsStore, (state) => state.activeId);
+	const openTab = useOpenTab();
+	const openTransient = (tab) => {
+		if (activeId === null) return;
+		openTransientTab(activeId, tab);
+		openTab(tab.id);
+	};
+	const [search, setSearch] = useState("");
+	const [selected, setSelected] = useState(0);
+	const surface = useRef(null);
+	const searchInput = useRef(null);
+	useEffect(() => {
+		const onKey = (event) => {
+			if ((event.key === "k" || event.key === " ") && (event.ctrlKey || event.metaKey)) {
+				event.preventDefault();
+				togglePalette();
+			}
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, []);
+	const [wasOpen, setWasOpen] = useState(open);
+	if (wasOpen !== open) {
+		setWasOpen(open);
+		if (open) {
+			setSearch("");
+			setSelected(0);
+		}
+	}
+	const keys = useMemo(() => path.split(""), [path]);
+	const bindings = pluginLeaderBindings();
+	const group = useMemo(() => leaderGroup(bindings, keys) ?? leaderGroup(bindings, []), [bindings, keys]);
+	const options = group?.options ?? [];
+	const needle = search.trim().toLowerCase();
+	const searching = needle.length > 0;
+	const matches = useMemo(() => searching ? commands.filter((entry) => entry.name.toLowerCase().includes(needle)) : [], [
+		commands,
+		needle,
+		searching
+	]);
+	const pluginEntries = keys.length === 0 && !searching ? paletteCommands() : [];
+	const rowCount = searching ? matches.length : options.length;
+	const cursor = Math.min(selected, Math.max(rowCount - 1, 0));
+	const current = searching ? void 0 : options[cursor];
+	const currentMatch = searching ? matches[cursor] : void 0;
+	const fire = (binding) => {
+		closePalette();
+		if ("command" in binding) {
+			runCommand(binding.command);
+			return;
+		}
+		binding.run({
+			sessionId: activeId,
+			openTab,
+			openTransientTab: openTransient,
+			sendSessionFrame: sendFrame
+		});
+	};
+	const descend = (option, from = keys) => {
+		if (option.binding) {
+			fire(option.binding);
+			return;
+		}
+		setPalettePath([...from, option.key].join(""));
+		setSelected(0);
+	};
+	const climb = () => {
+		if (keys.length === 0) {
+			closePalette();
+			return;
+		}
+		setPalettePath(keys.slice(0, -1).join(""));
+		setSelected(0);
+	};
+	const invoke = (name) => {
+		closePalette();
+		runCommand(name);
+	};
+	const runPluginCommand = (id) => {
+		const command = paletteCommands().find((candidate) => candidate.id === id);
+		if (!command) return;
+		closePalette();
+		command.run({
+			sessionId: activeId,
+			openTab,
+			openTransientTab: openTransient,
+			sendSessionFrame: sendFrame
+		});
+	};
+	const onSurfaceKey = (event) => {
+		if (event.target === searchInput.current) return;
+		if (event.key === "Backspace") {
+			event.preventDefault();
+			climb();
+			return;
+		}
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			setSelected(Math.min(cursor + 1, Math.max(rowCount - 1, 0)));
+			return;
+		}
+		if (event.key === "ArrowUp") {
+			event.preventDefault();
+			setSelected(Math.max(cursor - 1, 0));
+			return;
+		}
+		if (event.key === "Enter") {
+			event.preventDefault();
+			if (current) descend(current);
+			return;
+		}
+		if (event.key === SEARCH_KEY) {
+			event.preventDefault();
+			searchInput.current?.focus();
+			return;
+		}
+		if (event.ctrlKey || event.metaKey || event.altKey) return;
+		const key = event.key.toLowerCase();
+		if (!LEADER_KEY.test(key)) return;
+		const option = options.find((candidate) => candidate.key === key);
+		if (!option) return;
+		event.preventDefault();
+		descend(option);
+	};
+	const onSearchKey = (event) => {
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			setSelected(Math.min(cursor + 1, Math.max(rowCount - 1, 0)));
+			return;
+		}
+		if (event.key === "ArrowUp") {
+			event.preventDefault();
+			setSelected(Math.max(cursor - 1, 0));
+			return;
+		}
+		if (event.key === "Enter" && currentMatch) {
+			event.preventDefault();
+			invoke(currentMatch.name);
+		}
+	};
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange: (next) => {
+			if (!next) closePalette();
+		},
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			ref: surface,
+			width: "lg",
+			"data-testid": "palette",
+			"data-path": path,
+			"aria-describedby": void 0,
+			onKeyDown: onSurfaceKey,
+			onOpenAutoFocus: (event) => {
+				event.preventDefault();
+				surface.current?.focus();
+			},
+			onCloseAutoFocus: (event) => {
+				event.preventDefault();
+				focusPrompt();
+			},
+			onEscapeKeyDown: (event) => {
+				if (searching && document.activeElement === searchInput.current) {
+					event.preventDefault();
+					setSearch("");
+					setSelected(0);
+					surface.current?.focus();
+				}
+			},
+			className: "top-[12vh] w-[720px] max-w-[92vw] translate-y-0",
+			children: [
+				/* @__PURE__ */ jsx(DialogTitle, {
+					className: "sr-only",
+					children: "Leader Space"
+				}),
+				/* @__PURE__ */ jsxs(CommandHeader, {
+					className: "gap-3 px-4 py-3",
+					children: [
+						/* @__PURE__ */ jsx(StatusBadge, {
+							tone: "accent",
+							size: "xs",
+							children: LEADER_PREFIX
+						}),
+						/* @__PURE__ */ jsx("span", {
+							"data-testid": "palette-path",
+							className: "text-base font-semibold text-doom-hi",
+							children: keys.length === 0 ? "Leader Space" : `${keys.join(" ")} · ${group?.label ?? ""}`
+						}),
+						/* @__PURE__ */ jsx(CommandInput, {
+							ref: searchInput,
+							"data-testid": "palette-filter",
+							value: search,
+							autoFocus: false,
+							placeholder: "/ search commands…",
+							onChange: (event) => {
+								setSearch(event.target.value);
+								setSelected(0);
+							},
+							onKeyDown: onSearchKey,
+							className: "text-right"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							"data-testid": "palette-count",
+							className: "text-sm text-doom-dim",
+							children: rowCount
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex min-h-[260px] flex-col sm:flex-row",
+					children: [/* @__PURE__ */ jsxs(CommandList, {
+						"data-testid": "palette-keys",
+						className: "w-full shrink-0 gap-0 border-b border-doom-border p-1 sm:w-[280px] sm:border-r sm:border-b-0",
+						children: [searching ? matches.length === 0 ? /* @__PURE__ */ jsx(CommandEmpty, {
+							"data-testid": "palette-no-match",
+							children: "no command matches"
+						}) : matches.map((command, index) => /* @__PURE__ */ jsxs(CommandItem, {
+							"data-testid": `palette-sub-${command.name}`,
+							active: index === cursor,
+							onMouseEnter: () => setSelected(index),
+							onClick: () => invoke(command.name),
+							className: cn("w-full gap-2.5 px-3 py-1.5", index === cursor && "bg-doom-magenta/10"),
+							children: [/* @__PURE__ */ jsxs("span", {
+								className: "text-base font-semibold text-doom-hi",
+								children: ["/", command.name]
+							}), /* @__PURE__ */ jsx(CommandItemLabel, {
+								className: "text-sm text-doom-dim",
+								children: command.description
+							})]
+						}, command.name)) : options.length === 0 ? /* @__PURE__ */ jsx(CommandEmpty, {
+							"data-testid": "palette-empty",
+							children: keys.length === 0 ? "no package in this bundle registered leader keys · / searches the session’s commands" : "nothing bound under this key"
+						}) : options.map((option, index) => /* @__PURE__ */ jsxs(CommandItem, {
+							"data-testid": `palette-item-${index}`,
+							"data-key": option.key,
+							active: index === cursor,
+							onMouseEnter: () => setSelected(index),
+							onClick: () => descend(option),
+							className: cn("w-full gap-2.5 px-3 py-1.5", index === cursor && "bg-doom-magenta/10"),
+							children: [
+								/* @__PURE__ */ jsx(Kbd, {
+									className: cn("w-5 text-center", index === cursor ? "bg-doom-deep text-doom-magenta" : "bg-doom-deep text-doom-dim"),
+									children: option.key
+								}),
+								/* @__PURE__ */ jsx(CommandItemLabel, { children: option.label }),
+								option.binding ? null : /* @__PURE__ */ jsxs("span", {
+									className: "text-sm text-doom-dim",
+									children: [
+										option.children.length,
+										" ",
+										option.children.length === 1 ? "key" : "keys"
+									]
+								})
+							]
+						}, option.key)), pluginEntries.length > 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CommandGroupLabel, { children: "plugins" }), pluginEntries.map((command) => /* @__PURE__ */ jsxs(CommandItem, {
+							"data-testid": `palette-plugin-${command.id}`,
+							onClick: () => runPluginCommand(command.id),
+							className: "w-full gap-2.5 px-3 py-1.5 hover:bg-doom-magenta/10",
+							children: [/* @__PURE__ */ jsx(CommandItemLabel, { children: command.title }), command.description ? /* @__PURE__ */ jsx("span", {
+								className: "truncate text-sm text-doom-dim",
+								children: command.description
+							}) : null]
+						}, command.id))] }) : null]
+					}), /* @__PURE__ */ jsxs("div", {
+						"data-testid": "palette-detail",
+						className: "hidden min-w-0 flex-1 flex-col gap-2 px-4 py-3 sm:flex",
+						children: [currentMatch ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
+							className: "text-base font-semibold text-doom-hi",
+							children: ["/", currentMatch.name]
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-sm text-doom-dim",
+							children: currentMatch.description
+						})] }) : null, current ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "text-sm font-semibold text-doom-magenta",
+									children: pathLabel([...keys, current.key])
+								}), /* @__PURE__ */ jsx("span", {
+									className: "text-sm text-doom-hi",
+									children: current.label
+								})]
+							}),
+							current.detail ? /* @__PURE__ */ jsx("span", {
+								className: "text-sm text-doom-dim",
+								children: current.detail
+							}) : null,
+							current.binding ? /* @__PURE__ */ jsx("span", {
+								"data-testid": "palette-target",
+								className: "text-base font-semibold text-doom-hi",
+								children: "command" in current.binding ? `/${current.binding.command}` : "in the cockpit"
+							}) : /* @__PURE__ */ jsx("div", {
+								className: "flex flex-col gap-1",
+								children: current.children.map((child) => /* @__PURE__ */ jsxs(OptionRow, {
+									"data-testid": `palette-child-${child.key}`,
+									onClick: () => descend(child, [...keys, current.key]),
+									className: "min-h-0 gap-3 border-doom-border-soft bg-doom-deep px-3 py-1.5 hover:border-doom-blue/50",
+									children: [
+										/* @__PURE__ */ jsx("span", {
+											className: "w-5 text-center text-xs font-semibold text-doom-magenta",
+											children: child.key
+										}),
+										/* @__PURE__ */ jsx("span", {
+											className: "text-base font-semibold text-doom-hi",
+											children: child.label
+										}),
+										/* @__PURE__ */ jsx(OptionLabel, {
+											className: "truncate text-sm text-doom-dim",
+											children: child.detail
+										})
+									]
+								}, child.key))
+							})
+						] }) : null]
+					})]
+				}),
+				/* @__PURE__ */ jsxs(CommandFooter, {
+					className: "px-4 py-2.5",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "flex items-center gap-1.5 text-sm text-doom-dim",
+						children: searching ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+							/* @__PURE__ */ jsx(Kbd, { children: "↑↓" }),
+							" move · ",
+							/* @__PURE__ */ jsx(Kbd, { children: "enter" }),
+							" run · ",
+							/* @__PURE__ */ jsx(Kbd, { children: "esc" }),
+							" back to keys"
+						] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+							"keys walk · ",
+							/* @__PURE__ */ jsx(Kbd, { children: "⌫" }),
+							" up · ",
+							/* @__PURE__ */ jsx(Kbd, { children: "enter" }),
+							" select · ",
+							/* @__PURE__ */ jsx(Kbd, { children: "/" }),
+							" search · ",
+							/* @__PURE__ */ jsx(Kbd, { children: "esc" }),
+							" close"
+						] })
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "text-sm text-doom-dim",
+						children: [
+							bindings.length,
+							" keys · ",
+							commands.length,
+							" commands"
+						]
+					})]
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { CommandPalette };
+
+//# sourceMappingURL=CommandPalette.mjs.map

package/dist/web/features/leader/CommandPalette.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette.mjs","names":[],"sources":["../../../../src/web/features/leader/CommandPalette.tsx"],"sourcesContent":["import type { LeaderBindingContribution, TransientTab } from '@agimon-ai/po-core/web';\nimport {\n  cn,\n  CommandEmpty,\n  CommandFooter,\n  CommandGroupLabel,\n  CommandHeader,\n  CommandInput,\n  CommandItem,\n  CommandItemLabel,\n  CommandList,\n  Dialog,\n  DialogContent,\n  DialogTitle,\n  Kbd,\n  OptionLabel,\n  OptionRow,\n  StatusBadge,\n} from '@agimon-ai/po-web-components';\nimport { useStore } from '@tanstack/react-store';\nimport { type KeyboardEvent as ReactKeyboardEvent, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { type LeaderOption, leaderGroup } from '../../lib/leaderTree';\nimport { paletteCommands, pluginLeaderBindings } from '../../lib/pluginRegistry';\nimport { focusPrompt } from '../../lib/promptFocus';\nimport { sendFrame } from '../../lib/transport';\nimport { closePalette, paletteStore, setPalettePath, togglePalette } from '../../stores/paletteStore';\nimport { sessionsStore } from '../../stores/sessionsStore';\nimport { runCommand, useActiveSession } from '../../stores/sessionStore';\nimport { openTransientTab } from '../../stores/transientTabsStore';\nimport { useOpenTab } from '../../stores/useOpenTab';\nimport { useWebPluginRegistry } from '../../stores/useWebPluginRegistry';\n\nconst LEADER_PREFIX = 'SPC';\nconst SEARCH_KEY = '/';\nconst LEADER_KEY = /^[a-z0-9]$/;\n\nfunction pathLabel(keys: readonly string[]): string {\n  return [LEADER_PREFIX, ...keys].join(' ');\n}\n\n/**\n * Leader Space, as much of it as a browser can honestly show.\n *\n * The session's own leader tree never reaches an RPC client, so the tree here\n * is what the installed web plugins declared: each package's cockpit half of\n * the key paths its TUI documents. Keys walk the tree the way the TUI does,\n * backspace climbs, and the slash search is the road to the commands no\n * package has put on a key. The surface is a modal dialog, so focus comes\n * back to wherever it was (usually the composer) when it closes.\n */\nexport function CommandPalette() {\n  useWebPluginRegistry();\n  const commands = useActiveSession((state) => state.commands);\n  const { open, path } = useStore(paletteStore);\n  const activeId = useStore(sessionsStore, (state) => state.activeId);\n  const openTab = useOpenTab();\n  // Leader keys reach the same temporary tabs the activity dock opens, so a\n  // group without a declared tab is still one key path away.\n  const openTransient = (tab: TransientTab): void => {\n    if (activeId === null) return;\n    openTransientTab(activeId, tab);\n    openTab(tab.id);\n  };\n  const [search, setSearch] = useState('');\n  const [selected, setSelected] = useState(0);\n  const surface = useRef<HTMLDivElement>(null);\n  const searchInput = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    const onKey = (event: KeyboardEvent): void => {\n      // ctrl+k is the browser-friendly binding; ctrl+space mirrors the TUI's\n      // global leader key. Space in an empty composer opens it too.\n      const leaderKey = event.key === 'k' || event.key === ' ';\n      if (leaderKey && (event.ctrlKey || event.metaKey)) {\n        event.preventDefault();\n        togglePalette();\n      }\n    };\n    window.addEventListener('keydown', onKey);\n    return () => window.removeEventListener('keydown', onKey);\n  }, []);\n\n  // Every opening starts at the root with an empty search. Adjusted during\n  // render rather than in an effect so the palette never paints the previous\n  // search for a frame.\n  const [wasOpen, setWasOpen] = useState(open);\n  if (wasOpen !== open) {\n    setWasOpen(open);\n    if (open) {\n      setSearch('');\n      setSelected(0);\n    }\n  }\n\n  const keys = useMemo(() => path.split(''), [path]);\n  const bindings = pluginLeaderBindings();\n  const group = useMemo(() => leaderGroup(bindings, keys) ?? leaderGroup(bindings, []), [bindings, keys]);\n  const options = group?.options ?? [];\n\n  const needle = search.trim().toLowerCase();\n  const searching = needle.length > 0;\n  const matches = useMemo(\n    () => (searching ? commands.filter((entry) => entry.name.toLowerCase().includes(needle)) : []),\n    [commands, needle, searching],\n  );\n  const pluginEntries = keys.length === 0 && !searching ? paletteCommands() : [];\n\n  const rowCount = searching ? matches.length : options.length;\n  const cursor = Math.min(selected, Math.max(rowCount - 1, 0));\n  const current = searching ? undefined : options[cursor];\n  const currentMatch = searching ? matches[cursor] : undefined;\n\n  const fire = (binding: LeaderBindingContribution): void => {\n    closePalette();\n    if ('command' in binding) {\n      runCommand(binding.command);\n      return;\n    }\n    binding.run({ sessionId: activeId, openTab, openTransientTab: openTransient, sendSessionFrame: sendFrame });\n  };\n\n  const descend = (option: LeaderOption, from: readonly string[] = keys): void => {\n    if (option.binding) {\n      fire(option.binding);\n      return;\n    }\n    setPalettePath([...from, option.key].join(''));\n    setSelected(0);\n  };\n\n  const climb = (): void => {\n    if (keys.length === 0) {\n      closePalette();\n      return;\n    }\n    setPalettePath(keys.slice(0, -1).join(''));\n    setSelected(0);\n  };\n\n  const invoke = (name: string): void => {\n    closePalette();\n    runCommand(name);\n  };\n\n  const runPluginCommand = (id: string): void => {\n    const command = paletteCommands().find((candidate) => candidate.id === id);\n    if (!command) return;\n    closePalette();\n    command.run({ sessionId: activeId, openTab, openTransientTab: openTransient, sendSessionFrame: sendFrame });\n  };\n\n  const onSurfaceKey = (event: ReactKeyboardEvent<HTMLDivElement>): void => {\n    // The search box handles its own keys; letters typed there are text.\n    if (event.target === searchInput.current) return;\n    if (event.key === 'Backspace') {\n      event.preventDefault();\n      climb();\n      return;\n    }\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      setSelected(Math.min(cursor + 1, Math.max(rowCount - 1, 0)));\n      return;\n    }\n    if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      setSelected(Math.max(cursor - 1, 0));\n      return;\n    }\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      if (current) descend(current);\n      return;\n    }\n    if (event.key === SEARCH_KEY) {\n      event.preventDefault();\n      searchInput.current?.focus();\n      return;\n    }\n    if (event.ctrlKey || event.metaKey || event.altKey) return;\n    const key = event.key.toLowerCase();\n    if (!LEADER_KEY.test(key)) return;\n    const option = options.find((candidate) => candidate.key === key);\n    if (!option) return;\n    event.preventDefault();\n    descend(option);\n  };\n\n  const onSearchKey = (event: ReactKeyboardEvent<HTMLInputElement>): void => {\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      setSelected(Math.min(cursor + 1, Math.max(rowCount - 1, 0)));\n      return;\n    }\n    if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      setSelected(Math.max(cursor - 1, 0));\n      return;\n    }\n    if (event.key === 'Enter' && currentMatch) {\n      event.preventDefault();\n      invoke(currentMatch.name);\n    }\n  };\n\n  return (\n    <Dialog\n      open={open}\n      onOpenChange={(next) => {\n        if (!next) closePalette();\n      }}\n    >\n      <DialogContent\n        ref={surface}\n        width=\"lg\"\n        data-testid=\"palette\"\n        data-path={path}\n        aria-describedby={undefined}\n        onKeyDown={onSurfaceKey}\n        // The palette owns the keyboard: focus lands on the surface, not the\n        // search box, so a typed letter is a leader key rather than filter text.\n        onOpenAutoFocus={(event) => {\n          event.preventDefault();\n          surface.current?.focus();\n        }}\n        // Opened by a shortcut, so there is no trigger to restore focus to.\n        onCloseAutoFocus={(event) => {\n          event.preventDefault();\n          focusPrompt();\n        }}\n        // Escape in a live search clears the search; only an empty one closes.\n        onEscapeKeyDown={(event) => {\n          if (searching && document.activeElement === searchInput.current) {\n            event.preventDefault();\n            setSearch('');\n            setSelected(0);\n            surface.current?.focus();\n          }\n        }}\n        className=\"top-[12vh] w-[720px] max-w-[92vw] translate-y-0\"\n      >\n        <DialogTitle className=\"sr-only\">Leader Space</DialogTitle>\n        <CommandHeader className=\"gap-3 px-4 py-3\">\n          <StatusBadge tone=\"accent\" size=\"xs\">\n            {LEADER_PREFIX}\n          </StatusBadge>\n          <span data-testid=\"palette-path\" className=\"text-base font-semibold text-doom-hi\">\n            {keys.length === 0 ? 'Leader Space' : `${keys.join(' ')} · ${group?.label ?? ''}`}\n          </span>\n          <CommandInput\n            ref={searchInput}\n            data-testid=\"palette-filter\"\n            value={search}\n            autoFocus={false}\n            placeholder=\"/ search commands…\"\n            onChange={(event) => {\n              setSearch(event.target.value);\n              setSelected(0);\n            }}\n            onKeyDown={onSearchKey}\n            className=\"text-right\"\n          />\n          <span data-testid=\"palette-count\" className=\"text-sm text-doom-dim\">\n            {rowCount}\n          </span>\n        </CommandHeader>\n\n        <div className=\"flex min-h-[260px] flex-col sm:flex-row\">\n          <CommandList\n            data-testid=\"palette-keys\"\n            className=\"w-full shrink-0 gap-0 border-b border-doom-border p-1 sm:w-[280px] sm:border-r sm:border-b-0\"\n          >\n            {searching ? (\n              matches.length === 0 ? (\n                <CommandEmpty data-testid=\"palette-no-match\">no command matches</CommandEmpty>\n              ) : (\n                matches.map((command, index) => (\n                  <CommandItem\n                    key={command.name}\n                    data-testid={`palette-sub-${command.name}`}\n                    active={index === cursor}\n                    onMouseEnter={() => setSelected(index)}\n                    onClick={() => invoke(command.name)}\n                    className={cn('w-full gap-2.5 px-3 py-1.5', index === cursor && 'bg-doom-magenta/10')}\n                  >\n                    <span className=\"text-base font-semibold text-doom-hi\">/{command.name}</span>\n                    <CommandItemLabel className=\"text-sm text-doom-dim\">{command.description}</CommandItemLabel>\n                  </CommandItem>\n                ))\n              )\n            ) : options.length === 0 ? (\n              <CommandEmpty data-testid=\"palette-empty\">\n                {keys.length === 0\n                  ? 'no package in this bundle registered leader keys · / searches the session’s commands'\n                  : 'nothing bound under this key'}\n              </CommandEmpty>\n            ) : (\n              options.map((option, index) => (\n                <CommandItem\n                  key={option.key}\n                  data-testid={`palette-item-${index}`}\n                  data-key={option.key}\n                  active={index === cursor}\n                  onMouseEnter={() => setSelected(index)}\n                  onClick={() => descend(option)}\n                  className={cn('w-full gap-2.5 px-3 py-1.5', index === cursor && 'bg-doom-magenta/10')}\n                >\n                  <Kbd\n                    className={cn(\n                      'w-5 text-center',\n                      index === cursor ? 'bg-doom-deep text-doom-magenta' : 'bg-doom-deep text-doom-dim',\n                    )}\n                  >\n                    {option.key}\n                  </Kbd>\n                  <CommandItemLabel>{option.label}</CommandItemLabel>\n                  {option.binding ? null : (\n                    <span className=\"text-sm text-doom-dim\">\n                      {option.children.length} {option.children.length === 1 ? 'key' : 'keys'}\n                    </span>\n                  )}\n                </CommandItem>\n              ))\n            )}\n            {pluginEntries.length > 0 ? (\n              <>\n                <CommandGroupLabel>plugins</CommandGroupLabel>\n                {pluginEntries.map((command) => (\n                  <CommandItem\n                    key={command.id}\n                    data-testid={`palette-plugin-${command.id}`}\n                    onClick={() => runPluginCommand(command.id)}\n                    className=\"w-full gap-2.5 px-3 py-1.5 hover:bg-doom-magenta/10\"\n                  >\n                    <CommandItemLabel>{command.title}</CommandItemLabel>\n                    {command.description ? (\n                      <span className=\"truncate text-sm text-doom-dim\">{command.description}</span>\n                    ) : null}\n                  </CommandItem>\n                ))}\n              </>\n            ) : null}\n          </CommandList>\n\n          <div data-testid=\"palette-detail\" className=\"hidden min-w-0 flex-1 flex-col gap-2 px-4 py-3 sm:flex\">\n            {currentMatch ? (\n              <>\n                <span className=\"text-base font-semibold text-doom-hi\">/{currentMatch.name}</span>\n                <span className=\"text-sm text-doom-dim\">{currentMatch.description}</span>\n              </>\n            ) : null}\n            {current ? (\n              <>\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"text-sm font-semibold text-doom-magenta\">{pathLabel([...keys, current.key])}</span>\n                  <span className=\"text-sm text-doom-hi\">{current.label}</span>\n                </div>\n                {current.detail ? <span className=\"text-sm text-doom-dim\">{current.detail}</span> : null}\n                {current.binding ? (\n                  <span data-testid=\"palette-target\" className=\"text-base font-semibold text-doom-hi\">\n                    {'command' in current.binding ? `/${current.binding.command}` : 'in the cockpit'}\n                  </span>\n                ) : (\n                  <div className=\"flex flex-col gap-1\">\n                    {current.children.map((child) => (\n                      <OptionRow\n                        key={child.key}\n                        data-testid={`palette-child-${child.key}`}\n                        onClick={() => descend(child, [...keys, current.key])}\n                        className=\"min-h-0 gap-3 border-doom-border-soft bg-doom-deep px-3 py-1.5 hover:border-doom-blue/50\"\n                      >\n                        <span className=\"w-5 text-center text-xs font-semibold text-doom-magenta\">{child.key}</span>\n                        <span className=\"text-base font-semibold text-doom-hi\">{child.label}</span>\n                        <OptionLabel className=\"truncate text-sm text-doom-dim\">{child.detail}</OptionLabel>\n                      </OptionRow>\n                    ))}\n                  </div>\n                )}\n              </>\n            ) : null}\n          </div>\n        </div>\n\n        <CommandFooter className=\"px-4 py-2.5\">\n          <span className=\"flex items-center gap-1.5 text-sm text-doom-dim\">\n            {searching ? (\n              <>\n                <Kbd>↑↓</Kbd> move · <Kbd>enter</Kbd> run · <Kbd>esc</Kbd> back to keys\n              </>\n            ) : (\n              <>\n                keys walk · <Kbd>⌫</Kbd> up · <Kbd>enter</Kbd> select · <Kbd>/</Kbd> search · <Kbd>esc</Kbd> close\n              </>\n            )}\n          </span>\n          <span className=\"text-sm text-doom-dim\">\n            {bindings.length} keys · {commands.length} commands\n          </span>\n        </CommandFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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"}

package/dist/web/features/remote/DevProxyTargets.cjs

@@ -0,0 +1,122 @@
+const require_devProxy = require("../../../types/devProxy.cjs");
+const require_devProxyStore = require("../../stores/devProxyStore.cjs");
+const require_dashboardStateStore = require("../../stores/dashboardStateStore.cjs");
+let react = require("react");
+let _tanstack_react_store = require("@tanstack/react-store");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _agimon_ai_po_web_components = require("@agimon-ai/po-web-components");
+//#region src/web/features/remote/DevProxyTargets.tsx
+/**
+* Local dev servers reachable through the cockpit's own address.
+*
+* The `base` line is shown rather than described. A sub-path proxy needs the
+* application to know its base path, exactly as it would behind nginx, and a
+* developer who has to work that out from prose will conclude the feature is
+* broken when their assets 404.
+*
+* Adding a target is host-only, so on a phone the form is replaced by the
+* reason rather than rendered as a button that would be refused.
+*/
+function DevProxyTargets() {
+	const state = (0, _tanstack_react_store.useStore)(require_devProxyStore.devProxyStore);
+	const [name, setName] = require_dashboardStateStore.useDashboardState("dev-proxy/name", "");
+	const [port, setPort] = require_dashboardStateStore.useDashboardState("dev-proxy/port", "");
+	(0, react.useEffect)(() => {
+		require_devProxyStore.refreshDevProxyTargets();
+	}, []);
+	const submit = async () => {
+		if (await require_devProxyStore.createDevProxyTarget(name.trim(), Number(port))) {
+			setName((current) => current === name ? "" : current);
+			setPort((current) => current === port ? "" : current);
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex w-full flex-col gap-1.5",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SectionLabel, { children: "dev sites" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-sm text-doom-dim",
+				children: "Reach a local dev server from a paired device, on this same address."
+			}),
+			state.targets.map((target) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				"data-testid": `dev-proxy-target-${target.name}`,
+				className: "flex items-center justify-between gap-3 rounded border border-doom-border px-2.5 py-1.5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "flex min-w-0 flex-col",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+						href: state.canRegister ? `http://localhost:${String(target.port)}${require_devProxy.DEV_PROXY_PREFIX}${target.name}/` : `${require_devProxy.DEV_PROXY_PREFIX}${target.name}/`,
+						target: "_blank",
+						rel: "noreferrer",
+						className: "truncate text-sm text-doom-hi underline",
+						"data-testid": `dev-proxy-open-${target.name}`,
+						children: [
+							require_devProxy.DEV_PROXY_PREFIX,
+							target.name,
+							"/"
+						]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "truncate text-sm text-doom-dim",
+						children: [
+							"port ",
+							target.port,
+							" · set base: '",
+							require_devProxy.DEV_PROXY_PREFIX,
+							target.name,
+							"/' in the dev server"
+						]
+					})]
+				}), state.canRegister ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Button, {
+					variant: "ghost",
+					size: "sm",
+					"data-testid": `dev-proxy-remove-${target.name}`,
+					onClick: () => void require_devProxyStore.deleteDevProxyTarget(target.name),
+					children: "remove"
+				}) : null]
+			}, target.name)),
+			state.canRegister ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Input, {
+						"aria-label": "dev site name",
+						"data-testid": "dev-proxy-name",
+						placeholder: "storefront",
+						className: "min-w-0 flex-1",
+						value: name,
+						onChange: (event) => setName(event.target.value)
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Input, {
+						"aria-label": "dev site port",
+						"data-testid": "dev-proxy-port",
+						type: "number",
+						min: 1,
+						max: 65535,
+						placeholder: "3000",
+						className: "w-24",
+						value: port,
+						onChange: (event) => setPort(event.target.value)
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Button, {
+						variant: "outline",
+						size: "sm",
+						"data-testid": "dev-proxy-add",
+						disabled: state.busy || name.trim() === "" || port === "",
+						onClick: () => void submit(),
+						children: "add"
+					})
+				]
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-sm text-doom-dim",
+				children: "Add a dev site on the host. A paired device can open the ones already listed, but not name new ones."
+			}),
+			state.error === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"data-testid": "dev-proxy-error",
+				className: "text-sm text-doom-yellow",
+				children: state.error
+			})
+		]
+	});
+}
+//#endregion
+exports.DevProxyTargets = DevProxyTargets;
+
+//# sourceMappingURL=DevProxyTargets.cjs.map

package/dist/web/features/remote/DevProxyTargets.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevProxyTargets.cjs","names":["useStore","devProxyStore","useDashboardState","refreshDevProxyTargets","createDevProxyTarget","SectionLabel","DEV_PROXY_PREFIX","Button","deleteDevProxyTarget","Input"],"sources":["../../../../src/web/features/remote/DevProxyTargets.tsx"],"sourcesContent":["import { Button, Input, SectionLabel } from '@agimon-ai/po-web-components';\nimport { useStore } from '@tanstack/react-store';\nimport { useEffect } from 'react';\n\nimport { DEV_PROXY_PREFIX } from '../../../types/devProxy';\nimport { useDashboardState } from '../../stores/dashboardStateStore';\nimport {\n  createDevProxyTarget,\n  deleteDevProxyTarget,\n  devProxyStore,\n  refreshDevProxyTargets,\n} from '../../stores/devProxyStore';\n\n/**\n * Local dev servers reachable through the cockpit's own address.\n *\n * The `base` line is shown rather than described. A sub-path proxy needs the\n * application to know its base path, exactly as it would behind nginx, and a\n * developer who has to work that out from prose will conclude the feature is\n * broken when their assets 404.\n *\n * Adding a target is host-only, so on a phone the form is replaced by the\n * reason rather than rendered as a button that would be refused.\n */\nexport function DevProxyTargets() {\n  const state = useStore(devProxyStore);\n  const [name, setName] = useDashboardState('dev-proxy/name', '');\n  const [port, setPort] = useDashboardState('dev-proxy/port', '');\n\n  useEffect(() => {\n    void refreshDevProxyTargets();\n  }, []);\n\n  const submit = async (): Promise<void> => {\n    if (await createDevProxyTarget(name.trim(), Number(port))) {\n      setName((current) => (current === name ? '' : current));\n      setPort((current) => (current === port ? '' : current));\n    }\n  };\n\n  return (\n    <div className=\"flex w-full flex-col gap-1.5\">\n      <SectionLabel>dev sites</SectionLabel>\n      <span className=\"text-sm text-doom-dim\">\n        Reach a local dev server from a paired device, on this same address.\n      </span>\n\n      {state.targets.map((target) => (\n        <div\n          key={target.name}\n          data-testid={`dev-proxy-target-${target.name}`}\n          className=\"flex items-center justify-between gap-3 rounded border border-doom-border px-2.5 py-1.5\"\n        >\n          <span className=\"flex min-w-0 flex-col\">\n            <a\n              // The proxy serves paired devices through the tunnel. At the host, the dev server\n              // already answers on its own port under the same base path.\n              href={\n                state.canRegister\n                  ? `http://localhost:${String(target.port)}${DEV_PROXY_PREFIX}${target.name}/`\n                  : `${DEV_PROXY_PREFIX}${target.name}/`\n              }\n              target=\"_blank\"\n              rel=\"noreferrer\"\n              className=\"truncate text-sm text-doom-hi underline\"\n              data-testid={`dev-proxy-open-${target.name}`}\n            >\n              {DEV_PROXY_PREFIX}\n              {target.name}/\n            </a>\n            <span className=\"truncate text-sm text-doom-dim\">\n              port {target.port} &middot; set base: &apos;{DEV_PROXY_PREFIX}\n              {target.name}/&apos; in the dev server\n            </span>\n          </span>\n          {state.canRegister ? (\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              data-testid={`dev-proxy-remove-${target.name}`}\n              onClick={() => void deleteDevProxyTarget(target.name)}\n            >\n              remove\n            </Button>\n          ) : null}\n        </div>\n      ))}\n\n      {state.canRegister ? (\n        <div className=\"flex items-center gap-2\">\n          <Input\n            aria-label=\"dev site name\"\n            data-testid=\"dev-proxy-name\"\n            placeholder=\"storefront\"\n            className=\"min-w-0 flex-1\"\n            value={name}\n            onChange={(event) => setName(event.target.value)}\n          />\n          <Input\n            aria-label=\"dev site port\"\n            data-testid=\"dev-proxy-port\"\n            type=\"number\"\n            min={1}\n            max={65_535}\n            placeholder=\"3000\"\n            className=\"w-24\"\n            value={port}\n            onChange={(event) => setPort(event.target.value)}\n          />\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            data-testid=\"dev-proxy-add\"\n            disabled={state.busy || name.trim() === '' || port === ''}\n            onClick={() => void submit()}\n          >\n            add\n          </Button>\n        </div>\n      ) : (\n        <span className=\"text-sm text-doom-dim\">\n          Add a dev site on the host. A paired device can open the ones already listed, but not name new ones.\n        </span>\n      )}\n\n      {state.error === undefined ? null : (\n        <span data-testid=\"dev-proxy-error\" className=\"text-sm text-doom-yellow\">\n          {state.error}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/web/features/remote/DevProxyTargets.d.mts

@@ -0,0 +1,15 @@
+//#region src/web/features/remote/DevProxyTargets.d.ts
+/**
+ * Local dev servers reachable through the cockpit's own address.
+ *
+ * The `base` line is shown rather than described. A sub-path proxy needs the
+ * application to know its base path, exactly as it would behind nginx, and a
+ * developer who has to work that out from prose will conclude the feature is
+ * broken when their assets 404.
+ *
+ * Adding a target is host-only, so on a phone the form is replaced by the
+ * reason rather than rendered as a button that would be refused.
+ */
+export declare function DevProxyTargets(): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=DevProxyTargets.d.mts.map

package/dist/web/features/remote/DevProxyTargets.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevProxyTargets.d.mts","names":[],"sources":["../../../../src/web/features/remote/DevProxyTargets.tsx"],"mappings":";;;;;;;;;;;;wBAwBgB,mCAAe,IAAA"}