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

package/dist/web/features/settings/TemplateSettings.d.mts

@@ -0,0 +1,8 @@
+//#region src/web/features/settings/TemplateSettings.d.ts
+/** Select only admitted template contributions, and make the config write destination explicit. */
+export declare function TemplateSettings({ target, onTargetChange }: {
+  target: string;
+  onTargetChange: (target: string) => void;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=TemplateSettings.d.mts.map

package/dist/web/features/settings/TemplateSettings.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateSettings.d.mts","names":[],"sources":["../../../../src/web/features/settings/TemplateSettings.tsx"],"mappings":";;wBAkCgB,mBACd,QACA;EAEA;EACA,iBAAiB;oBAClB,IAAA"}

package/dist/web/features/settings/TemplateSettings.mjs

@@ -0,0 +1,177 @@
+import { resolveWebTemplate } from "../../lib/templateCatalog.mjs";
+import { webTemplateCatalog } from "../../lib/pluginRegistry.mjs";
+import { reloadWebTemplateDecision } from "../../lib/pluginCompositions.mjs";
+import { configuredTemplate, refreshTemplateConfiguration, saveTemplateDefault, useTemplateConfiguration } from "../../stores/templateStore.mjs";
+import { useWebPluginRegistry } from "../../stores/useWebPluginRegistry.mjs";
+import { workspacesStore } from "../../stores/workspacesStore.mjs";
+import { useDashboardState } from "../../stores/dashboardStateStore.mjs";
+import { useStore } from "@tanstack/react-store";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, CheckIcon, RadioGroup, RadioGroupCard, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, SettingsActions, SettingsNote, SettingsSection, SettingsSectionDescription, SettingsSectionHeader, SettingsSectionTitle } from "@agimon-ai/po-web-components";
+//#region src/web/features/settings/TemplateSettings.tsx
+const WORKSPACE_TARGET = "workspace:";
+/** Select only admitted template contributions, and make the config write destination explicit. */
+function TemplateSettings({ target, onTargetChange }) {
+	useWebPluginRegistry();
+	const workspaces = useStore(workspacesStore, (state) => state);
+	const workspaceId = target.startsWith(WORKSPACE_TARGET) ? target.slice(10) : void 0;
+	const configuration = useTemplateConfiguration(workspaceId);
+	const catalog = webTemplateCatalog(workspaceId === void 0 ? { scope: "global" } : {
+		scope: "workspace",
+		workspaceId
+	});
+	const configured = configuredTemplate(configuration);
+	const resolved = resolveWebTemplate(catalog.templates, configured);
+	const [draft, setDraft] = useDashboardState("template/draft", null);
+	const choice = draft?.target === target ? draft.id : resolved.template?.id;
+	const busy = configuration.saving || configuration.loading;
+	const origin = configuration.config?.values["web.template"]?.origin ?? "default";
+	const missingWorkspace = workspaceId !== void 0 && workspaces.byId[workspaceId] === void 0;
+	const changed = choice !== void 0 && choice !== configured;
+	return /* @__PURE__ */ jsxs(SettingsSection, {
+		"data-testid": "template-settings",
+		children: [
+			/* @__PURE__ */ jsxs(SettingsSectionHeader, { children: [/* @__PURE__ */ jsx(SettingsSectionTitle, { children: "Layout" }), /* @__PURE__ */ jsx(SettingsSectionDescription, { children: "The arrangement Po opens with. Set it for everyone, or let one workspace choose its own." })] }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					id: "template-scope-label",
+					className: "text-sm text-doom-dim",
+					children: "Applies to"
+				}), /* @__PURE__ */ jsxs(Select, {
+					value: target,
+					onValueChange: (value) => {
+						onTargetChange(value);
+						setDraft(null);
+					},
+					disabled: configuration.saving,
+					children: [/* @__PURE__ */ jsx(SelectTrigger, {
+						"aria-labelledby": "template-scope-label",
+						"data-testid": "template-scope",
+						className: "w-auto min-w-56 max-w-full",
+						children: /* @__PURE__ */ jsx(SelectValue, {})
+					}), /* @__PURE__ */ jsxs(SelectContent, { children: [/* @__PURE__ */ jsx(SelectItem, {
+						value: "global",
+						children: "Global default"
+					}), workspaces.order.map((id) => /* @__PURE__ */ jsxs(SelectItem, {
+						value: `${WORKSPACE_TARGET}${id}`,
+						children: ["Workspace: ", workspaces.byId[id]?.root ?? id]
+					}, id))] })]
+				})]
+			}),
+			/* @__PURE__ */ jsx(RadioGroup, {
+				"aria-label": "Layout",
+				value: choice ?? "",
+				onValueChange: (id) => setDraft({
+					target,
+					id
+				}),
+				className: "grid grid-cols-1 gap-3 sm:grid-cols-2",
+				disabled: busy || missingWorkspace,
+				children: catalog.templates.map((template) => /* @__PURE__ */ jsxs(RadioGroupCard, {
+					value: template.id,
+					"data-testid": `template-${template.id}`,
+					"data-selected": choice === template.id,
+					className: "flex items-start gap-2 rounded-lg p-4",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "flex min-w-0 flex-1 flex-col gap-1",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "text-base font-semibold text-doom-hi",
+								children: template.label
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-sm leading-relaxed text-doom-dim",
+								children: template.description
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "font-mono text-sm text-doom-dim",
+								children: template.pluginId
+							})
+						]
+					}), choice === template.id ? /* @__PURE__ */ jsx(CheckIcon, { className: "size-4 shrink-0 text-doom-green" }) : null]
+				}, template.id))
+			}),
+			resolved.warning ? /* @__PURE__ */ jsx("output", {
+				className: "block text-sm text-doom-yellow",
+				children: resolved.warning
+			}) : null,
+			catalog.diagnostics.map((diagnostic, index) => /* @__PURE__ */ jsx("output", {
+				className: "block text-sm text-doom-yellow",
+				children: diagnostic.message
+			}, `${diagnostic.pluginId}:${index}`)),
+			configuration.error ? /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				"data-testid": "template-save-error",
+				className: "text-sm text-doom-red",
+				children: configuration.error
+			}) : null,
+			/* @__PURE__ */ jsxs(SettingsActions, { children: [
+				/* @__PURE__ */ jsx(Button, {
+					"data-testid": "template-save",
+					size: "sm",
+					variant: changed ? "primary" : "outline",
+					disabled: busy || missingWorkspace || choice === void 0 || configuration.config === void 0,
+					onClick: () => {
+						if (choice !== void 0) saveTemplateDefault(choice, workspaceId).then((saved) => {
+							if (saved) {
+								setDraft(null);
+								reloadWebTemplateDecision();
+							}
+						});
+					},
+					children: configuration.saving ? "Saving…" : "Set as default"
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					"data-testid": "template-inherit",
+					size: "sm",
+					variant: "ghost",
+					disabled: busy || missingWorkspace || configuration.config === void 0,
+					onClick: () => {
+						saveTemplateDefault(null, workspaceId).then((saved) => {
+							if (saved) {
+								setDraft(null);
+								reloadWebTemplateDecision();
+							}
+						});
+					},
+					children: workspaceId === void 0 ? "Use automatic fallback" : "Inherit global default"
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					"data-testid": "template-reload",
+					size: "sm",
+					variant: "ghost",
+					disabled: busy,
+					onClick: () => {
+						refreshTemplateConfiguration(workspaceId).then(() => reloadWebTemplateDecision());
+					},
+					children: "Reload configuration"
+				})
+			] }),
+			/* @__PURE__ */ jsxs(SettingsNote, {
+				"data-testid": "template-origin",
+				children: [
+					"Saved to",
+					" ",
+					/* @__PURE__ */ jsx("code", {
+						className: "font-mono",
+						children: workspaceId === void 0 ? "~/.po/config.yaml" : `${configuration.config?.repoRoot ?? workspaces.byId[workspaceId]?.root ?? workspaceId}/.po/config.yaml`
+					}),
+					". Currently using",
+					" ",
+					configured === void 0 ? "automatic fallback" : /* @__PURE__ */ jsx("code", {
+						className: "font-mono",
+						children: configured
+					}),
+					" (",
+					origin,
+					")."
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { TemplateSettings };
+
+//# sourceMappingURL=TemplateSettings.mjs.map

package/dist/web/features/settings/TemplateSettings.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateSettings.mjs","names":[],"sources":["../../../../src/web/features/settings/TemplateSettings.tsx"],"sourcesContent":["import {\n  Button,\n  CheckIcon,\n  RadioGroup,\n  RadioGroupCard,\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  SettingsActions,\n  SettingsNote,\n  SettingsSection,\n  SettingsSectionDescription,\n  SettingsSectionHeader,\n  SettingsSectionTitle,\n} from '@agimon-ai/po-web-components';\nimport { useStore } from '@tanstack/react-store';\n\nimport { reloadWebTemplateDecision } from '../../lib/pluginCompositions';\nimport { webTemplateCatalog } from '../../lib/pluginRegistry';\nimport { resolveWebTemplate } from '../../lib/templateCatalog';\nimport { useDashboardState } from '../../stores/dashboardStateStore';\nimport {\n  configuredTemplate,\n  refreshTemplateConfiguration,\n  saveTemplateDefault,\n  useTemplateConfiguration,\n} from '../../stores/templateStore';\nimport { useWebPluginRegistry } from '../../stores/useWebPluginRegistry';\nimport { workspacesStore } from '../../stores/workspacesStore';\n\nconst WORKSPACE_TARGET = 'workspace:';\n/** Select only admitted template contributions, and make the config write destination explicit. */\nexport function TemplateSettings({\n  target,\n  onTargetChange,\n}: {\n  target: string;\n  onTargetChange: (target: string) => void;\n}) {\n  useWebPluginRegistry();\n  const workspaces = useStore(workspacesStore, (state) => state);\n  const workspaceId = target.startsWith(WORKSPACE_TARGET) ? target.slice(WORKSPACE_TARGET.length) : undefined;\n  const configuration = useTemplateConfiguration(workspaceId);\n  const catalog = webTemplateCatalog(\n    workspaceId === undefined ? { scope: 'global' } : { scope: 'workspace', workspaceId },\n  );\n  const configured = configuredTemplate(configuration);\n  const resolved = resolveWebTemplate(catalog.templates, configured);\n  const [draft, setDraft] = useDashboardState<{ target: string; id: string } | null>('template/draft', null);\n  const choice = draft?.target === target ? draft.id : resolved.template?.id;\n  const busy = configuration.saving || configuration.loading;\n  const origin = configuration.config?.values['web.template']?.origin ?? 'default';\n  const missingWorkspace = workspaceId !== undefined && workspaces.byId[workspaceId] === undefined;\n  const changed = choice !== undefined && choice !== configured;\n  return (\n    <SettingsSection data-testid=\"template-settings\">\n      <SettingsSectionHeader>\n        <SettingsSectionTitle>Layout</SettingsSectionTitle>\n        <SettingsSectionDescription>\n          The arrangement Po opens with. Set it for everyone, or let one workspace choose its own.\n        </SettingsSectionDescription>\n      </SettingsSectionHeader>\n      <div className=\"flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2\">\n        <span id=\"template-scope-label\" className=\"text-sm text-doom-dim\">\n          Applies to\n        </span>\n        <Select\n          value={target}\n          onValueChange={(value) => {\n            onTargetChange(value);\n            setDraft(null);\n          }}\n          disabled={configuration.saving}\n        >\n          <SelectTrigger\n            aria-labelledby=\"template-scope-label\"\n            data-testid=\"template-scope\"\n            className=\"w-auto min-w-56 max-w-full\"\n          >\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"global\">Global default</SelectItem>\n            {workspaces.order.map((id) => (\n              <SelectItem key={id} value={`${WORKSPACE_TARGET}${id}`}>\n                Workspace: {workspaces.byId[id]?.root ?? id}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      </div>\n      <RadioGroup\n        aria-label=\"Layout\"\n        value={choice ?? ''}\n        onValueChange={(id) => setDraft({ target, id })}\n        className=\"grid grid-cols-1 gap-3 sm:grid-cols-2\"\n        disabled={busy || missingWorkspace}\n      >\n        {catalog.templates.map((template) => (\n          <RadioGroupCard\n            key={template.id}\n            value={template.id}\n            data-testid={`template-${template.id}`}\n            data-selected={choice === template.id}\n            className=\"flex items-start gap-2 rounded-lg p-4\"\n          >\n            <span className=\"flex min-w-0 flex-1 flex-col gap-1\">\n              <span className=\"text-base font-semibold text-doom-hi\">{template.label}</span>\n              <span className=\"text-sm leading-relaxed text-doom-dim\">{template.description}</span>\n              <span className=\"font-mono text-sm text-doom-dim\">{template.pluginId}</span>\n            </span>\n            {choice === template.id ? <CheckIcon className=\"size-4 shrink-0 text-doom-green\" /> : null}\n          </RadioGroupCard>\n        ))}\n      </RadioGroup>\n      {resolved.warning ? <output className=\"block text-sm text-doom-yellow\">{resolved.warning}</output> : null}\n      {catalog.diagnostics.map((diagnostic, index) => (\n        <output key={`${diagnostic.pluginId}:${index}`} className=\"block text-sm text-doom-yellow\">\n          {diagnostic.message}\n        </output>\n      ))}\n      {configuration.error ? (\n        <p role=\"alert\" data-testid=\"template-save-error\" className=\"text-sm text-doom-red\">\n          {configuration.error}\n        </p>\n      ) : null}\n      <SettingsActions>\n        <Button\n          data-testid=\"template-save\"\n          size=\"sm\"\n          variant={changed ? 'primary' : 'outline'}\n          disabled={busy || missingWorkspace || choice === undefined || configuration.config === undefined}\n          onClick={() => {\n            if (choice !== undefined)\n              void saveTemplateDefault(choice, workspaceId).then((saved) => {\n                if (saved) {\n                  setDraft(null);\n                  void reloadWebTemplateDecision();\n                }\n              });\n          }}\n        >\n          {configuration.saving ? 'Saving…' : 'Set as default'}\n        </Button>\n        <Button\n          data-testid=\"template-inherit\"\n          size=\"sm\"\n          variant=\"ghost\"\n          disabled={busy || missingWorkspace || configuration.config === undefined}\n          onClick={() => {\n            void saveTemplateDefault(null, workspaceId).then((saved) => {\n              if (saved) {\n                setDraft(null);\n                void reloadWebTemplateDecision();\n              }\n            });\n          }}\n        >\n          {workspaceId === undefined ? 'Use automatic fallback' : 'Inherit global default'}\n        </Button>\n        <Button\n          data-testid=\"template-reload\"\n          size=\"sm\"\n          variant=\"ghost\"\n          disabled={busy}\n          onClick={() => {\n            void refreshTemplateConfiguration(workspaceId).then(() => reloadWebTemplateDecision());\n          }}\n        >\n          Reload configuration\n        </Button>\n      </SettingsActions>\n      <SettingsNote data-testid=\"template-origin\">\n        Saved to{' '}\n        <code className=\"font-mono\">\n          {workspaceId === undefined\n            ? '~/.po/config.yaml'\n            : `${configuration.config?.repoRoot ?? workspaces.byId[workspaceId]?.root ?? workspaceId}/.po/config.yaml`}\n        </code>\n        . Currently using{' '}\n        {configured === undefined ? 'automatic fallback' : <code className=\"font-mono\">{configured}</code>} ({origin}).\n      </SettingsNote>\n    </SettingsSection>\n  );\n}\n"],"mappings":"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"}

package/dist/web/features/settings/TunnelSettings.cjs

@@ -0,0 +1,182 @@
+const require_remoteAccessStore = require("../../stores/remoteAccessStore.cjs");
+const require_dashboardStateStore = require("../../stores/dashboardStateStore.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _agimon_ai_po_web_components = require("@agimon-ai/po-web-components");
+//#region src/web/features/settings/TunnelSettings.tsx
+const PUBLIC_HOSTNAME = /^(?=.{1,253}$)(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?$/iu;
+function namedTunnel(tunnel) {
+	return tunnel.kind === "named" ? tunnel : {
+		kind: "named",
+		hostname: ""
+	};
+}
+function optional(value) {
+	const trimmed = value.trim();
+	return trimmed === "" ? void 0 : trimmed;
+}
+const TUNNEL_KINDS = [{
+	kind: "quick",
+	label: "Quick tunnel",
+	detail: "No account needed. The address changes each time."
+}, {
+	kind: "named",
+	label: "Named tunnel",
+	detail: "Your own domain, and the address stays put."
+}];
+/** Selects a rotating quick tunnel or the stable named tunnel needed for a custom domain and passkeys. */
+function TunnelSettings({ tunnel }) {
+	const [draft, setDraft] = require_dashboardStateStore.useDashboardState("tunnel/draft", tunnel);
+	const [lastTunnel, setLastTunnel] = require_dashboardStateStore.useDashboardState("tunnel/source", tunnel);
+	const [busy, setBusy, busyState] = require_dashboardStateStore.useDashboardState("tunnel/saving", false);
+	if (lastTunnel !== tunnel && JSON.stringify(draft) === JSON.stringify(lastTunnel)) {
+		setLastTunnel(tunnel);
+		setDraft(tunnel);
+	}
+	const hostname = draft.kind === "named" ? draft.hostname.trim() : "";
+	const invalidHostname = draft.kind === "named" && !PUBLIC_HOSTNAME.test(hostname);
+	const changed = JSON.stringify(draft) !== JSON.stringify(tunnel);
+	function updateNamed(patch) {
+		setDraft((current) => ({
+			...namedTunnel(current),
+			...patch
+		}));
+	}
+	async function save() {
+		if (busyState.state) return;
+		setBusy(true);
+		const named = namedTunnel(draft);
+		const tokenFile = optional(named.tokenFile ?? "");
+		const name = optional(named.name ?? "");
+		const configFile = optional(named.configFile ?? "");
+		const next = draft.kind === "quick" ? draft : {
+			kind: "named",
+			hostname,
+			...tokenFile === void 0 ? {} : { tokenFile },
+			...name === void 0 ? {} : { name },
+			...configFile === void 0 ? {} : { configFile }
+		};
+		try {
+			if (await require_remoteAccessStore.updateRemoteSettings({ tunnel: next })) {
+				setLastTunnel(next);
+				setDraft((current) => current === draft ? next : current);
+			}
+		} finally {
+			setBusy(false);
+		}
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.SettingsSection, {
+		"data-testid": "remote-tunnel-settings",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.SettingsSectionHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SettingsSectionTitle, { children: "Tunnel" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SettingsSectionDescription, { children: "How your other devices reach Po. A named tunnel gives you a stable address, which passkeys need." })] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.RadioGroup, {
+				value: draft.kind,
+				onValueChange: (kind) => setDraft(kind === "named" ? namedTunnel(draft) : { kind: "quick" }),
+				className: "grid grid-cols-1 gap-3 min-[480px]:grid-cols-2",
+				"aria-label": "Tunnel type",
+				children: TUNNEL_KINDS.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.RadioGroupCard, {
+					value: option.kind,
+					"data-testid": `remote-tunnel-${option.kind}`,
+					className: "flex items-start gap-2 rounded-lg p-4",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "flex min-w-0 flex-1 flex-col gap-1",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-base font-semibold text-doom-hi",
+							children: option.label
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-sm leading-relaxed text-doom-dim",
+							children: option.detail
+						})]
+					}), draft.kind === option.kind ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.CheckIcon, { className: "size-4 shrink-0 text-doom-green" }) : null]
+				}, option.kind))
+			}),
+			draft.kind === "named" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.SettingsCard, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SettingsField, {
+					id: "remote-tunnel-hostname",
+					label: "Hostname",
+					description: invalidHostname ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "text-doom-red",
+						children: "Enter the hostname only, without https://, a port or a path."
+					}) : "The domain your devices will open.",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Input, {
+						id: "remote-tunnel-hostname",
+						"data-testid": "remote-tunnel-hostname",
+						value: draft.hostname,
+						placeholder: "po.example.com",
+						"aria-invalid": invalidHostname,
+						spellCheck: false,
+						onChange: (event) => updateNamed({ hostname: event.target.value }),
+						className: "font-mono text-sm"
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SettingsField, {
+					id: "remote-tunnel-token-file",
+					label: "Token file",
+					description: "A local file holding your Cloudflare connector token. Po reads the file and never stores the token itself.",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Input, {
+						id: "remote-tunnel-token-file",
+						"data-testid": "remote-tunnel-token-file",
+						value: draft.tokenFile ?? "",
+						placeholder: "~/.cloudflared/po.token",
+						spellCheck: false,
+						onChange: (event) => updateNamed({ tokenFile: event.target.value }),
+						className: "font-mono text-sm"
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("details", {
+					className: "group",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("summary", {
+						className: "cursor-pointer px-5 py-3 text-sm text-doom-dim hover:text-doom-hi",
+						children: "Tunnel you manage with cloudflared"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex flex-col divide-y divide-doom-border-soft border-t border-doom-border-soft",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SettingsField, {
+							id: "remote-tunnel-name",
+							label: "Tunnel name",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Input, {
+								id: "remote-tunnel-name",
+								"data-testid": "remote-tunnel-name",
+								value: draft.name ?? "",
+								placeholder: "po",
+								spellCheck: false,
+								onChange: (event) => updateNamed({ name: event.target.value }),
+								className: "font-mono text-sm"
+							})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SettingsField, {
+							id: "remote-tunnel-config-file",
+							label: "Config file",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Input, {
+								id: "remote-tunnel-config-file",
+								"data-testid": "remote-tunnel-config-file",
+								value: draft.configFile ?? "",
+								placeholder: "~/.cloudflared/config.yml",
+								spellCheck: false,
+								onChange: (event) => updateNamed({ configFile: event.target.value }),
+								className: "font-mono text-sm"
+							})
+						})]
+					})]
+				})
+			] }) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.SettingsActions, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Button, {
+				variant: changed && !invalidHostname ? "primary" : "outline",
+				size: "sm",
+				"data-testid": "remote-tunnel-save",
+				loading: busy,
+				disabled: busy || !changed || invalidHostname,
+				onClick: () => void save(),
+				children: "Save tunnel"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.SettingsNote, { children: [
+				"Takes effect the next time remote access starts. Install ",
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+					className: "font-mono",
+					children: "cloudflared"
+				}),
+				" on this machine first."
+			] })] })
+		]
+	});
+}
+//#endregion
+exports.TunnelSettings = TunnelSettings;
+
+//# sourceMappingURL=TunnelSettings.cjs.map

package/dist/web/features/settings/TunnelSettings.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TunnelSettings.cjs","names":["useDashboardState","updateRemoteSettings","SettingsSection","SettingsSectionHeader","SettingsSectionTitle","SettingsSectionDescription","RadioGroup","RadioGroupCard","CheckIcon","SettingsCard","SettingsField","Input","SettingsActions","Button","SettingsNote"],"sources":["../../../../src/web/features/settings/TunnelSettings.tsx"],"sourcesContent":["import {\n  Button,\n  CheckIcon,\n  Input,\n  RadioGroup,\n  RadioGroupCard,\n  SettingsActions,\n  SettingsCard,\n  SettingsField,\n  SettingsNote,\n  SettingsSection,\n  SettingsSectionDescription,\n  SettingsSectionHeader,\n  SettingsSectionTitle,\n} from '@agimon-ai/po-web-components';\n\nimport type { TunnelConfig } from '../../../types/remoteAccess';\nimport { useDashboardState } from '../../stores/dashboardStateStore';\nimport { updateRemoteSettings } from '../../stores/remoteAccessStore';\n\nconst PUBLIC_HOSTNAME =\n  /^(?=.{1,253}$)(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?$/iu;\n\nfunction namedTunnel(tunnel: TunnelConfig): Extract<TunnelConfig, { kind: 'named' }> {\n  return tunnel.kind === 'named' ? tunnel : { kind: 'named', hostname: '' };\n}\n\nfunction optional(value: string): string | undefined {\n  const trimmed = value.trim();\n  return trimmed === '' ? undefined : trimmed;\n}\n\nconst TUNNEL_KINDS = [\n  { kind: 'quick', label: 'Quick tunnel', detail: 'No account needed. The address changes each time.' },\n  { kind: 'named', label: 'Named tunnel', detail: 'Your own domain, and the address stays put.' },\n] as const;\n\n/** Selects a rotating quick tunnel or the stable named tunnel needed for a custom domain and passkeys. */\nexport function TunnelSettings({ tunnel }: { tunnel: TunnelConfig }) {\n  const [draft, setDraft] = useDashboardState<TunnelConfig>('tunnel/draft', tunnel);\n\n  // Refreshes must not replace an unsaved draft, including after an app remount.\n  const [lastTunnel, setLastTunnel] = useDashboardState('tunnel/source', tunnel);\n  const [busy, setBusy, busyState] = useDashboardState('tunnel/saving', false);\n  if (lastTunnel !== tunnel && JSON.stringify(draft) === JSON.stringify(lastTunnel)) {\n    setLastTunnel(tunnel);\n    setDraft(tunnel);\n  }\n\n  const hostname = draft.kind === 'named' ? draft.hostname.trim() : '';\n  const invalidHostname = draft.kind === 'named' && !PUBLIC_HOSTNAME.test(hostname);\n  const changed = JSON.stringify(draft) !== JSON.stringify(tunnel);\n\n  function updateNamed(patch: Partial<Extract<TunnelConfig, { kind: 'named' }>>): void {\n    setDraft((current) => ({ ...namedTunnel(current), ...patch }));\n  }\n\n  async function save(): Promise<void> {\n    if (busyState.state) return;\n    setBusy(true);\n    const named = namedTunnel(draft);\n    const tokenFile = optional(named.tokenFile ?? '');\n    const name = optional(named.name ?? '');\n    const configFile = optional(named.configFile ?? '');\n    const next: TunnelConfig =\n      draft.kind === 'quick'\n        ? draft\n        : {\n            kind: 'named',\n            hostname,\n            ...(tokenFile === undefined ? {} : { tokenFile }),\n            ...(name === undefined ? {} : { name }),\n            ...(configFile === undefined ? {} : { configFile }),\n          };\n    try {\n      if (await updateRemoteSettings({ tunnel: next })) {\n        setLastTunnel(next);\n        setDraft((current) => (current === draft ? next : current));\n      }\n    } finally {\n      setBusy(false);\n    }\n  }\n\n  return (\n    <SettingsSection data-testid=\"remote-tunnel-settings\">\n      <SettingsSectionHeader>\n        <SettingsSectionTitle>Tunnel</SettingsSectionTitle>\n        <SettingsSectionDescription>\n          How your other devices reach Po. A named tunnel gives you a stable address, which passkeys need.\n        </SettingsSectionDescription>\n      </SettingsSectionHeader>\n\n      <RadioGroup\n        value={draft.kind}\n        onValueChange={(kind) => setDraft(kind === 'named' ? namedTunnel(draft) : { kind: 'quick' })}\n        className=\"grid grid-cols-1 gap-3 min-[480px]:grid-cols-2\"\n        aria-label=\"Tunnel type\"\n      >\n        {TUNNEL_KINDS.map((option) => (\n          <RadioGroupCard\n            key={option.kind}\n            value={option.kind}\n            data-testid={`remote-tunnel-${option.kind}`}\n            className=\"flex items-start gap-2 rounded-lg p-4\"\n          >\n            <span className=\"flex min-w-0 flex-1 flex-col gap-1\">\n              <span className=\"text-base font-semibold text-doom-hi\">{option.label}</span>\n              <span className=\"text-sm leading-relaxed text-doom-dim\">{option.detail}</span>\n            </span>\n            {draft.kind === option.kind ? <CheckIcon className=\"size-4 shrink-0 text-doom-green\" /> : null}\n          </RadioGroupCard>\n        ))}\n      </RadioGroup>\n\n      {draft.kind === 'named' ? (\n        <SettingsCard>\n          <SettingsField\n            id=\"remote-tunnel-hostname\"\n            label=\"Hostname\"\n            description={\n              invalidHostname ? (\n                <span className=\"text-doom-red\">Enter the hostname only, without https://, a port or a path.</span>\n              ) : (\n                'The domain your devices will open.'\n              )\n            }\n          >\n            <Input\n              id=\"remote-tunnel-hostname\"\n              data-testid=\"remote-tunnel-hostname\"\n              value={draft.hostname}\n              placeholder=\"po.example.com\"\n              aria-invalid={invalidHostname}\n              spellCheck={false}\n              onChange={(event) => updateNamed({ hostname: event.target.value })}\n              className=\"font-mono text-sm\"\n            />\n          </SettingsField>\n          <SettingsField\n            id=\"remote-tunnel-token-file\"\n            label=\"Token file\"\n            description=\"A local file holding your Cloudflare connector token. Po reads the file and never stores the token itself.\"\n          >\n            <Input\n              id=\"remote-tunnel-token-file\"\n              data-testid=\"remote-tunnel-token-file\"\n              value={draft.tokenFile ?? ''}\n              placeholder=\"~/.cloudflared/po.token\"\n              spellCheck={false}\n              onChange={(event) => updateNamed({ tokenFile: event.target.value })}\n              className=\"font-mono text-sm\"\n            />\n          </SettingsField>\n          <details className=\"group\">\n            <summary className=\"cursor-pointer px-5 py-3 text-sm text-doom-dim hover:text-doom-hi\">\n              Tunnel you manage with cloudflared\n            </summary>\n            <div className=\"flex flex-col divide-y divide-doom-border-soft border-t border-doom-border-soft\">\n              <SettingsField id=\"remote-tunnel-name\" label=\"Tunnel name\">\n                <Input\n                  id=\"remote-tunnel-name\"\n                  data-testid=\"remote-tunnel-name\"\n                  value={draft.name ?? ''}\n                  placeholder=\"po\"\n                  spellCheck={false}\n                  onChange={(event) => updateNamed({ name: event.target.value })}\n                  className=\"font-mono text-sm\"\n                />\n              </SettingsField>\n              <SettingsField id=\"remote-tunnel-config-file\" label=\"Config file\">\n                <Input\n                  id=\"remote-tunnel-config-file\"\n                  data-testid=\"remote-tunnel-config-file\"\n                  value={draft.configFile ?? ''}\n                  placeholder=\"~/.cloudflared/config.yml\"\n                  spellCheck={false}\n                  onChange={(event) => updateNamed({ configFile: event.target.value })}\n                  className=\"font-mono text-sm\"\n                />\n              </SettingsField>\n            </div>\n          </details>\n        </SettingsCard>\n      ) : null}\n\n      <SettingsActions>\n        <Button\n          variant={changed && !invalidHostname ? 'primary' : 'outline'}\n          size=\"sm\"\n          data-testid=\"remote-tunnel-save\"\n          loading={busy}\n          disabled={busy || !changed || invalidHostname}\n          onClick={() => void save()}\n        >\n          Save tunnel\n        </Button>\n        <SettingsNote>\n          Takes effect the next time remote access starts. Install <code className=\"font-mono\">cloudflared</code> on\n          this machine first.\n        </SettingsNote>\n      </SettingsActions>\n    </SettingsSection>\n  );\n}\n"],"mappings":"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"}

package/dist/web/features/settings/TunnelSettings.d.mts

@@ -0,0 +1,8 @@
+import { TunnelConfig } from "../../../types/remoteAccess.mjs";
+//#region src/web/features/settings/TunnelSettings.d.ts
+/** Selects a rotating quick tunnel or the stable named tunnel needed for a custom domain and passkeys. */
+export declare function TunnelSettings({ tunnel }: {
+  tunnel: TunnelConfig;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=TunnelSettings.d.mts.map

package/dist/web/features/settings/TunnelSettings.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TunnelSettings.d.mts","names":[],"sources":["../../../../src/web/features/settings/TunnelSettings.tsx"],"mappings":";;;wBAsCgB,iBAAiB;EAAY,QAAQ;oBAAc,IAAA"}

package/dist/web/features/settings/TunnelSettings.mjs

@@ -0,0 +1,182 @@
+import { updateRemoteSettings } from "../../stores/remoteAccessStore.mjs";
+import { useDashboardState } from "../../stores/dashboardStateStore.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, CheckIcon, Input, RadioGroup, RadioGroupCard, SettingsActions, SettingsCard, SettingsField, SettingsNote, SettingsSection, SettingsSectionDescription, SettingsSectionHeader, SettingsSectionTitle } from "@agimon-ai/po-web-components";
+//#region src/web/features/settings/TunnelSettings.tsx
+const PUBLIC_HOSTNAME = /^(?=.{1,253}$)(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?$/iu;
+function namedTunnel(tunnel) {
+	return tunnel.kind === "named" ? tunnel : {
+		kind: "named",
+		hostname: ""
+	};
+}
+function optional(value) {
+	const trimmed = value.trim();
+	return trimmed === "" ? void 0 : trimmed;
+}
+const TUNNEL_KINDS = [{
+	kind: "quick",
+	label: "Quick tunnel",
+	detail: "No account needed. The address changes each time."
+}, {
+	kind: "named",
+	label: "Named tunnel",
+	detail: "Your own domain, and the address stays put."
+}];
+/** Selects a rotating quick tunnel or the stable named tunnel needed for a custom domain and passkeys. */
+function TunnelSettings({ tunnel }) {
+	const [draft, setDraft] = useDashboardState("tunnel/draft", tunnel);
+	const [lastTunnel, setLastTunnel] = useDashboardState("tunnel/source", tunnel);
+	const [busy, setBusy, busyState] = useDashboardState("tunnel/saving", false);
+	if (lastTunnel !== tunnel && JSON.stringify(draft) === JSON.stringify(lastTunnel)) {
+		setLastTunnel(tunnel);
+		setDraft(tunnel);
+	}
+	const hostname = draft.kind === "named" ? draft.hostname.trim() : "";
+	const invalidHostname = draft.kind === "named" && !PUBLIC_HOSTNAME.test(hostname);
+	const changed = JSON.stringify(draft) !== JSON.stringify(tunnel);
+	function updateNamed(patch) {
+		setDraft((current) => ({
+			...namedTunnel(current),
+			...patch
+		}));
+	}
+	async function save() {
+		if (busyState.state) return;
+		setBusy(true);
+		const named = namedTunnel(draft);
+		const tokenFile = optional(named.tokenFile ?? "");
+		const name = optional(named.name ?? "");
+		const configFile = optional(named.configFile ?? "");
+		const next = draft.kind === "quick" ? draft : {
+			kind: "named",
+			hostname,
+			...tokenFile === void 0 ? {} : { tokenFile },
+			...name === void 0 ? {} : { name },
+			...configFile === void 0 ? {} : { configFile }
+		};
+		try {
+			if (await updateRemoteSettings({ tunnel: next })) {
+				setLastTunnel(next);
+				setDraft((current) => current === draft ? next : current);
+			}
+		} finally {
+			setBusy(false);
+		}
+	}
+	return /* @__PURE__ */ jsxs(SettingsSection, {
+		"data-testid": "remote-tunnel-settings",
+		children: [
+			/* @__PURE__ */ jsxs(SettingsSectionHeader, { children: [/* @__PURE__ */ jsx(SettingsSectionTitle, { children: "Tunnel" }), /* @__PURE__ */ jsx(SettingsSectionDescription, { children: "How your other devices reach Po. A named tunnel gives you a stable address, which passkeys need." })] }),
+			/* @__PURE__ */ jsx(RadioGroup, {
+				value: draft.kind,
+				onValueChange: (kind) => setDraft(kind === "named" ? namedTunnel(draft) : { kind: "quick" }),
+				className: "grid grid-cols-1 gap-3 min-[480px]:grid-cols-2",
+				"aria-label": "Tunnel type",
+				children: TUNNEL_KINDS.map((option) => /* @__PURE__ */ jsxs(RadioGroupCard, {
+					value: option.kind,
+					"data-testid": `remote-tunnel-${option.kind}`,
+					className: "flex items-start gap-2 rounded-lg p-4",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "flex min-w-0 flex-1 flex-col gap-1",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-base font-semibold text-doom-hi",
+							children: option.label
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-sm leading-relaxed text-doom-dim",
+							children: option.detail
+						})]
+					}), draft.kind === option.kind ? /* @__PURE__ */ jsx(CheckIcon, { className: "size-4 shrink-0 text-doom-green" }) : null]
+				}, option.kind))
+			}),
+			draft.kind === "named" ? /* @__PURE__ */ jsxs(SettingsCard, { children: [
+				/* @__PURE__ */ jsx(SettingsField, {
+					id: "remote-tunnel-hostname",
+					label: "Hostname",
+					description: invalidHostname ? /* @__PURE__ */ jsx("span", {
+						className: "text-doom-red",
+						children: "Enter the hostname only, without https://, a port or a path."
+					}) : "The domain your devices will open.",
+					children: /* @__PURE__ */ jsx(Input, {
+						id: "remote-tunnel-hostname",
+						"data-testid": "remote-tunnel-hostname",
+						value: draft.hostname,
+						placeholder: "po.example.com",
+						"aria-invalid": invalidHostname,
+						spellCheck: false,
+						onChange: (event) => updateNamed({ hostname: event.target.value }),
+						className: "font-mono text-sm"
+					})
+				}),
+				/* @__PURE__ */ jsx(SettingsField, {
+					id: "remote-tunnel-token-file",
+					label: "Token file",
+					description: "A local file holding your Cloudflare connector token. Po reads the file and never stores the token itself.",
+					children: /* @__PURE__ */ jsx(Input, {
+						id: "remote-tunnel-token-file",
+						"data-testid": "remote-tunnel-token-file",
+						value: draft.tokenFile ?? "",
+						placeholder: "~/.cloudflared/po.token",
+						spellCheck: false,
+						onChange: (event) => updateNamed({ tokenFile: event.target.value }),
+						className: "font-mono text-sm"
+					})
+				}),
+				/* @__PURE__ */ jsxs("details", {
+					className: "group",
+					children: [/* @__PURE__ */ jsx("summary", {
+						className: "cursor-pointer px-5 py-3 text-sm text-doom-dim hover:text-doom-hi",
+						children: "Tunnel you manage with cloudflared"
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col divide-y divide-doom-border-soft border-t border-doom-border-soft",
+						children: [/* @__PURE__ */ jsx(SettingsField, {
+							id: "remote-tunnel-name",
+							label: "Tunnel name",
+							children: /* @__PURE__ */ jsx(Input, {
+								id: "remote-tunnel-name",
+								"data-testid": "remote-tunnel-name",
+								value: draft.name ?? "",
+								placeholder: "po",
+								spellCheck: false,
+								onChange: (event) => updateNamed({ name: event.target.value }),
+								className: "font-mono text-sm"
+							})
+						}), /* @__PURE__ */ jsx(SettingsField, {
+							id: "remote-tunnel-config-file",
+							label: "Config file",
+							children: /* @__PURE__ */ jsx(Input, {
+								id: "remote-tunnel-config-file",
+								"data-testid": "remote-tunnel-config-file",
+								value: draft.configFile ?? "",
+								placeholder: "~/.cloudflared/config.yml",
+								spellCheck: false,
+								onChange: (event) => updateNamed({ configFile: event.target.value }),
+								className: "font-mono text-sm"
+							})
+						})]
+					})]
+				})
+			] }) : null,
+			/* @__PURE__ */ jsxs(SettingsActions, { children: [/* @__PURE__ */ jsx(Button, {
+				variant: changed && !invalidHostname ? "primary" : "outline",
+				size: "sm",
+				"data-testid": "remote-tunnel-save",
+				loading: busy,
+				disabled: busy || !changed || invalidHostname,
+				onClick: () => void save(),
+				children: "Save tunnel"
+			}), /* @__PURE__ */ jsxs(SettingsNote, { children: [
+				"Takes effect the next time remote access starts. Install ",
+				/* @__PURE__ */ jsx("code", {
+					className: "font-mono",
+					children: "cloudflared"
+				}),
+				" on this machine first."
+			] })] })
+		]
+	});
+}
+//#endregion
+export { TunnelSettings };
+
+//# sourceMappingURL=TunnelSettings.mjs.map