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

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

@@ -0,0 +1,122 @@
+import { DEV_PROXY_PREFIX } from "../../../types/devProxy.mjs";
+import { createDevProxyTarget, deleteDevProxyTarget, devProxyStore, refreshDevProxyTargets } from "../../stores/devProxyStore.mjs";
+import { useDashboardState } from "../../stores/dashboardStateStore.mjs";
+import { useEffect } from "react";
+import { useStore } from "@tanstack/react-store";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Input, SectionLabel } from "@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 = useStore(devProxyStore);
+	const [name, setName] = useDashboardState("dev-proxy/name", "");
+	const [port, setPort] = useDashboardState("dev-proxy/port", "");
+	useEffect(() => {
+		refreshDevProxyTargets();
+	}, []);
+	const submit = async () => {
+		if (await createDevProxyTarget(name.trim(), Number(port))) {
+			setName((current) => current === name ? "" : current);
+			setPort((current) => current === port ? "" : current);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full flex-col gap-1.5",
+		children: [
+			/* @__PURE__ */ jsx(SectionLabel, { children: "dev sites" }),
+			/* @__PURE__ */ 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__ */ 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__ */ jsxs("span", {
+					className: "flex min-w-0 flex-col",
+					children: [/* @__PURE__ */ jsxs("a", {
+						href: state.canRegister ? `http://localhost:${String(target.port)}${DEV_PROXY_PREFIX}${target.name}/` : `${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: [
+							DEV_PROXY_PREFIX,
+							target.name,
+							"/"
+						]
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "truncate text-sm text-doom-dim",
+						children: [
+							"port ",
+							target.port,
+							" · set base: '",
+							DEV_PROXY_PREFIX,
+							target.name,
+							"/' in the dev server"
+						]
+					})]
+				}), state.canRegister ? /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "sm",
+					"data-testid": `dev-proxy-remove-${target.name}`,
+					onClick: () => void deleteDevProxyTarget(target.name),
+					children: "remove"
+				}) : null]
+			}, target.name)),
+			state.canRegister ? /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsx(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__ */ jsx(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__ */ jsx(Button, {
+						variant: "outline",
+						size: "sm",
+						"data-testid": "dev-proxy-add",
+						disabled: state.busy || name.trim() === "" || port === "",
+						onClick: () => void submit(),
+						children: "add"
+					})
+				]
+			}) : /* @__PURE__ */ 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__ */ jsx("span", {
+				"data-testid": "dev-proxy-error",
+				className: "text-sm text-doom-yellow",
+				children: state.error
+			})
+		]
+	});
+}
+//#endregion
+export { DevProxyTargets };
+
+//# sourceMappingURL=DevProxyTargets.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DevProxyTargets.mjs","names":[],"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":";;;;;;;;;;;;;;;;;;;AAwBA,SAAgB,kBAAkB;CAChC,MAAM,QAAQ,SAAS,aAAa;CACpC,MAAM,CAAC,MAAM,WAAW,kBAAkB,kBAAkB,EAAE;CAC9D,MAAM,CAAC,MAAM,WAAW,kBAAkB,kBAAkB,EAAE;CAE9D,gBAAgB;EACd,uBAA4B;CAC9B,GAAG,CAAC,CAAC;CAEL,MAAM,SAAS,YAA2B;EACxC,IAAI,MAAM,qBAAqB,KAAK,KAAK,GAAG,OAAO,IAAI,CAAC,GAAG;GACzD,SAAS,YAAa,YAAY,OAAO,KAAK,OAAQ;GACtD,SAAS,YAAa,YAAY,OAAO,KAAK,OAAQ;EACxD;CACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACE,oBAAC,cAAD,EAAA,UAAc,YAAuB,CAAA;GACrC,oBAAC,QAAD;IAAM,WAAU;IAAwB,UAAA;GAElC,CAAA;GAEL,MAAM,QAAQ,KAAK,WAClB,qBAAC,OAAD;IAEE,eAAa,oBAAoB,OAAO;IACxC,WAAU;IAHZ,UAAA,CAKE,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACE,qBAAC,KAAD;MAGE,MACE,MAAM,cACF,oBAAoB,OAAO,OAAO,IAAI,IAAI,mBAAmB,OAAO,KAAK,KACzE,GAAG,mBAAmB,OAAO,KAAK;MAExC,QAAO;MACP,KAAI;MACJ,WAAU;MACV,eAAa,kBAAkB,OAAO;MAXxC,UAAA;OAaG;OACA,OAAO;OAAK;MACZ;KACH,CAAA,GAAA,qBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA;OAAiD;OACzC,OAAO;OAAK;OAA2B;OAC5C,OAAO;OAAK;MACT;KACF,CAAA,CAAA;IACL,CAAA,GAAA,MAAM,cACL,oBAAC,QAAD;KACE,SAAQ;KACR,MAAK;KACL,eAAa,oBAAoB,OAAO;KACxC,eAAe,KAAK,qBAAqB,OAAO,IAAI;KACrD,UAAA;IAEO,CAAA,IACN,IACD;GApCE,GAAA,OAAO,IAoCT,CACN;GAEA,MAAM,cACL,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,oBAAC,OAAD;MACE,cAAW;MACX,eAAY;MACZ,aAAY;MACZ,WAAU;MACV,OAAO;MACP,WAAW,UAAU,QAAQ,MAAM,OAAO,KAAK;KAChD,CAAA;KACD,oBAAC,OAAD;MACE,cAAW;MACX,eAAY;MACZ,MAAK;MACL,KAAK;MACL,KAAK;MACL,aAAY;MACZ,WAAU;MACV,OAAO;MACP,WAAW,UAAU,QAAQ,MAAM,OAAO,KAAK;KAChD,CAAA;KACD,oBAAC,QAAD;MACE,SAAQ;MACR,MAAK;MACL,eAAY;MACZ,UAAU,MAAM,QAAQ,KAAK,KAAK,MAAM,MAAM,SAAS;MACvD,eAAe,KAAK,OAAO;MAC5B,UAAA;KAEO,CAAA;IACL;GAEL,CAAA,IAAA,oBAAC,QAAD;IAAM,WAAU;IAAwB,UAAA;GAElC,CAAA;GAGP,MAAM,UAAU,KAAA,IAAY,OAC3B,oBAAC,QAAD;IAAM,eAAY;IAAkB,WAAU;IAC3C,UAAA,MAAM;GACH,CAAA;EAEL;;AAET"}

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

@@ -0,0 +1,28 @@
+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/HandoverProgress.tsx
+/**
+* What the page shows while its own hub is being replaced.
+*
+* There is nothing to ask the server during a handover, because the server is
+* the thing moving. The socket reconnects on its own once the container is
+* serving, and that reconnection is what ends this panel, so the copy says to
+* wait rather than offering a button that would fail.
+*/
+function HandoverProgress() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-3",
+		"data-testid": "remote-handover",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-2 text-base text-doom-text",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Spinner, {}), "Moving the cockpit into a container."]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "text-sm leading-relaxed text-doom-dim",
+			children: "This page reconnects on its own when the container is serving, and the code to scan appears then. The first run for a new version builds the image, which can take several minutes. Progress is printed in the terminal that started the cockpit."
+		})]
+	});
+}
+//#endregion
+exports.HandoverProgress = HandoverProgress;
+
+//# sourceMappingURL=HandoverProgress.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HandoverProgress.cjs","names":["Spinner"],"sources":["../../../../src/web/features/remote/HandoverProgress.tsx"],"sourcesContent":["import { Spinner } from '@agimon-ai/po-web-components';\n\n/**\n * What the page shows while its own hub is being replaced.\n *\n * There is nothing to ask the server during a handover, because the server is\n * the thing moving. The socket reconnects on its own once the container is\n * serving, and that reconnection is what ends this panel, so the copy says to\n * wait rather than offering a button that would fail.\n */\nexport function HandoverProgress() {\n  return (\n    <div className=\"flex flex-col gap-3\" data-testid=\"remote-handover\">\n      <div className=\"flex items-center gap-2 text-base text-doom-text\">\n        <Spinner />\n        Moving the cockpit into a container.\n      </div>\n      <p className=\"text-sm leading-relaxed text-doom-dim\">\n        This page reconnects on its own when the container is serving, and the code to scan appears then. The first run\n        for a new version builds the image, which can take several minutes. Progress is printed in the terminal that\n        started the cockpit.\n      </p>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAUA,SAAgB,mBAAmB;CACjC,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAU;EAAsB,eAAY;EAAjD,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,6BAAAA,SAAD,CAAU,CAAA,GAAC,sCAER;EACL,CAAA,GAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;GAAG,WAAU;GAAwC,UAAA;EAIlD,CAAA,CACA;;AAET"}

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

@@ -0,0 +1,12 @@
+//#region src/web/features/remote/HandoverProgress.d.ts
+/**
+ * What the page shows while its own hub is being replaced.
+ *
+ * There is nothing to ask the server during a handover, because the server is
+ * the thing moving. The socket reconnects on its own once the container is
+ * serving, and that reconnection is what ends this panel, so the copy says to
+ * wait rather than offering a button that would fail.
+ */
+export declare function HandoverProgress(): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=HandoverProgress.d.mts.map

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

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

package/dist/web/features/remote/HandoverProgress.mjs

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Spinner } from "@agimon-ai/po-web-components";
+//#region src/web/features/remote/HandoverProgress.tsx
+/**
+* What the page shows while its own hub is being replaced.
+*
+* There is nothing to ask the server during a handover, because the server is
+* the thing moving. The socket reconnects on its own once the container is
+* serving, and that reconnection is what ends this panel, so the copy says to
+* wait rather than offering a button that would fail.
+*/
+function HandoverProgress() {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-3",
+		"data-testid": "remote-handover",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 text-base text-doom-text",
+			children: [/* @__PURE__ */ jsx(Spinner, {}), "Moving the cockpit into a container."]
+		}), /* @__PURE__ */ jsx("p", {
+			className: "text-sm leading-relaxed text-doom-dim",
+			children: "This page reconnects on its own when the container is serving, and the code to scan appears then. The first run for a new version builds the image, which can take several minutes. Progress is printed in the terminal that started the cockpit."
+		})]
+	});
+}
+//#endregion
+export { HandoverProgress };
+
+//# sourceMappingURL=HandoverProgress.mjs.map

package/dist/web/features/remote/HandoverProgress.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HandoverProgress.mjs","names":[],"sources":["../../../../src/web/features/remote/HandoverProgress.tsx"],"sourcesContent":["import { Spinner } from '@agimon-ai/po-web-components';\n\n/**\n * What the page shows while its own hub is being replaced.\n *\n * There is nothing to ask the server during a handover, because the server is\n * the thing moving. The socket reconnects on its own once the container is\n * serving, and that reconnection is what ends this panel, so the copy says to\n * wait rather than offering a button that would fail.\n */\nexport function HandoverProgress() {\n  return (\n    <div className=\"flex flex-col gap-3\" data-testid=\"remote-handover\">\n      <div className=\"flex items-center gap-2 text-base text-doom-text\">\n        <Spinner />\n        Moving the cockpit into a container.\n      </div>\n      <p className=\"text-sm leading-relaxed text-doom-dim\">\n        This page reconnects on its own when the container is serving, and the code to scan appears then. The first run\n        for a new version builds the image, which can take several minutes. Progress is printed in the terminal that\n        started the cockpit.\n      </p>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAUA,SAAgB,mBAAmB;CACjC,OACE,qBAAC,OAAD;EAAK,WAAU;EAAsB,eAAY;EAAjD,UAAA,CACE,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,SAAD,CAAU,CAAA,GAAC,sCAER;EACL,CAAA,GAAA,oBAAC,KAAD;GAAG,WAAU;GAAwC,UAAA;EAIlD,CAAA,CACA;;AAET"}

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

@@ -0,0 +1,37 @@
+const require_remoteAccessStore = require("../../stores/remoteAccessStore.cjs");
+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/PairedDeviceList.tsx
+/** Every device currently holding a session, with the one way to take it back. */
+function PairedDeviceList() {
+	const devices = (0, _tanstack_react_store.useStore)(require_remoteAccessStore.remoteAccessStore).view?.devices ?? [];
+	if (devices.length === 0) return null;
+	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: "paired devices" }), devices.map((device) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			"data-testid": `remote-device-${device.id}`,
+			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)("span", {
+					className: "truncate text-base font-semibold text-doom-hi",
+					children: [device.label, device.self ? " · this device" : ""]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "truncate text-sm text-doom-dim",
+					children: device.userAgent
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Button, {
+				variant: "ghost",
+				size: "sm",
+				"data-testid": `remote-revoke-${device.id}`,
+				onClick: () => void require_remoteAccessStore.revokePairedDevice(device.id),
+				children: "revoke"
+			})]
+		}, device.id))]
+	});
+}
+//#endregion
+exports.PairedDeviceList = PairedDeviceList;
+
+//# sourceMappingURL=PairedDeviceList.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PairedDeviceList.cjs","names":["useStore","remoteAccessStore","SectionLabel","Button","revokePairedDevice"],"sources":["../../../../src/web/features/remote/PairedDeviceList.tsx"],"sourcesContent":["import { Button, SectionLabel } from '@agimon-ai/po-web-components';\nimport { useStore } from '@tanstack/react-store';\n\nimport { remoteAccessStore, revokePairedDevice } from '../../stores/remoteAccessStore';\n\n/** Every device currently holding a session, with the one way to take it back. */\nexport function PairedDeviceList() {\n  const state = useStore(remoteAccessStore);\n  const devices = state.view?.devices ?? [];\n  if (devices.length === 0) return null;\n\n  return (\n    <div className=\"flex w-full flex-col gap-1.5\">\n      <SectionLabel>paired devices</SectionLabel>\n      {devices.map((device) => (\n        <div\n          key={device.id}\n          data-testid={`remote-device-${device.id}`}\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            <span className=\"truncate text-base font-semibold text-doom-hi\">\n              {device.label}\n              {device.self ? ' \\u00b7 this device' : ''}\n            </span>\n            <span className=\"truncate text-sm text-doom-dim\">{device.userAgent}</span>\n          </span>\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            data-testid={`remote-revoke-${device.id}`}\n            onClick={() => void revokePairedDevice(device.id)}\n          >\n            revoke\n          </Button>\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAgB,mBAAmB;CAEjC,MAAM,WAAA,GADQA,sBAAAA,SAAAA,CAASC,0BAAAA,iBACH,CAAC,CAAC,MAAM,WAAW,CAAC;CACxC,IAAI,QAAQ,WAAW,GAAG,OAAO;CAEjC,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,6BAAAA,cAAD,EAAA,UAAc,iBAA4B,CAAA,GACzC,QAAQ,KAAK,WACZ,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAEE,eAAa,iBAAiB,OAAO;GACrC,WAAU;GAHZ,UAAA,CAKE,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACG,OAAO,OACP,OAAO,OAAO,mBAAwB,EACnC;IACN,CAAA,GAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;KAAM,WAAU;KAAkC,UAAA,OAAO;IAAgB,CAAA,CACrE;GACN,CAAA,GAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,6BAAAA,QAAD;IACE,SAAQ;IACR,MAAK;IACL,eAAa,iBAAiB,OAAO;IACrC,eAAe,KAAKC,0BAAAA,mBAAmB,OAAO,EAAE;IACjD,UAAA;GAEO,CAAA,CACL;EAnBE,GAAA,OAAO,EAmBT,CACN,CACE;;AAET"}

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

@@ -0,0 +1,5 @@
+//#region src/web/features/remote/PairedDeviceList.d.ts
+/** Every device currently holding a session, with the one way to take it back. */
+export declare function PairedDeviceList(): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=PairedDeviceList.d.mts.map

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

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

package/dist/web/features/remote/PairedDeviceList.mjs

@@ -0,0 +1,37 @@
+import { remoteAccessStore, revokePairedDevice } from "../../stores/remoteAccessStore.mjs";
+import { useStore } from "@tanstack/react-store";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, SectionLabel } from "@agimon-ai/po-web-components";
+//#region src/web/features/remote/PairedDeviceList.tsx
+/** Every device currently holding a session, with the one way to take it back. */
+function PairedDeviceList() {
+	const devices = useStore(remoteAccessStore).view?.devices ?? [];
+	if (devices.length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full flex-col gap-1.5",
+		children: [/* @__PURE__ */ jsx(SectionLabel, { children: "paired devices" }), devices.map((device) => /* @__PURE__ */ jsxs("div", {
+			"data-testid": `remote-device-${device.id}`,
+			className: "flex items-center justify-between gap-3 rounded border border-doom-border px-2.5 py-1.5",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "flex min-w-0 flex-col",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "truncate text-base font-semibold text-doom-hi",
+					children: [device.label, device.self ? " · this device" : ""]
+				}), /* @__PURE__ */ jsx("span", {
+					className: "truncate text-sm text-doom-dim",
+					children: device.userAgent
+				})]
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "sm",
+				"data-testid": `remote-revoke-${device.id}`,
+				onClick: () => void revokePairedDevice(device.id),
+				children: "revoke"
+			})]
+		}, device.id))]
+	});
+}
+//#endregion
+export { PairedDeviceList };
+
+//# sourceMappingURL=PairedDeviceList.mjs.map

package/dist/web/features/remote/PairedDeviceList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PairedDeviceList.mjs","names":[],"sources":["../../../../src/web/features/remote/PairedDeviceList.tsx"],"sourcesContent":["import { Button, SectionLabel } from '@agimon-ai/po-web-components';\nimport { useStore } from '@tanstack/react-store';\n\nimport { remoteAccessStore, revokePairedDevice } from '../../stores/remoteAccessStore';\n\n/** Every device currently holding a session, with the one way to take it back. */\nexport function PairedDeviceList() {\n  const state = useStore(remoteAccessStore);\n  const devices = state.view?.devices ?? [];\n  if (devices.length === 0) return null;\n\n  return (\n    <div className=\"flex w-full flex-col gap-1.5\">\n      <SectionLabel>paired devices</SectionLabel>\n      {devices.map((device) => (\n        <div\n          key={device.id}\n          data-testid={`remote-device-${device.id}`}\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            <span className=\"truncate text-base font-semibold text-doom-hi\">\n              {device.label}\n              {device.self ? ' \\u00b7 this device' : ''}\n            </span>\n            <span className=\"truncate text-sm text-doom-dim\">{device.userAgent}</span>\n          </span>\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            data-testid={`remote-revoke-${device.id}`}\n            onClick={() => void revokePairedDevice(device.id)}\n          >\n            revoke\n          </Button>\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAgB,mBAAmB;CAEjC,MAAM,UADQ,SAAS,iBACH,CAAC,CAAC,MAAM,WAAW,CAAC;CACxC,IAAI,QAAQ,WAAW,GAAG,OAAO;CAEjC,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,cAAD,EAAA,UAAc,iBAA4B,CAAA,GACzC,QAAQ,KAAK,WACZ,qBAAC,OAAD;GAEE,eAAa,iBAAiB,OAAO;GACrC,WAAU;GAHZ,UAAA,CAKE,qBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CACE,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACG,OAAO,OACP,OAAO,OAAO,mBAAwB,EACnC;IACN,CAAA,GAAA,oBAAC,QAAD;KAAM,WAAU;KAAkC,UAAA,OAAO;IAAgB,CAAA,CACrE;GACN,CAAA,GAAA,oBAAC,QAAD;IACE,SAAQ;IACR,MAAK;IACL,eAAa,iBAAiB,OAAO;IACrC,eAAe,KAAK,mBAAmB,OAAO,EAAE;IACjD,UAAA;GAEO,CAAA,CACL;EAnBE,GAAA,OAAO,EAmBT,CACN,CACE;;AAET"}

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

@@ -0,0 +1,65 @@
+const require_remoteAccessStore = require("../../stores/remoteAccessStore.cjs");
+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/PairingApprovalDialog.tsx
+/**
+* The second factor, and the reason a photographed QR is not enough.
+*
+* Only ever rendered on the host: the hub sends pairing frames to local pages
+* alone, so a paired phone cannot approve the next device and make its own
+* access permanent.
+*/
+function PairingApprovalDialog() {
+	const request = (0, _tanstack_react_store.useStore)(require_remoteAccessStore.remoteAccessStore).view?.pending?.[0];
+	if (request === void 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Dialog, {
+		open: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.DialogContent, {
+			"data-testid": "pairing-approval",
+			className: "max-w-md",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.DialogHeader, {
+					className: "flex-col items-start",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.DialogTitle, { children: "Pair this device?" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.DialogDescription, { children: "Something scanned your code. Approve it only if it is the device in your hand." })]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.DialogBody, {
+					className: "flex flex-col gap-2",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							"data-testid": "pairing-approval-agent",
+							className: "break-words text-base text-doom-text",
+							children: request.userAgent
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+							className: "text-sm text-doom-dim",
+							children: ["address reported by the edge: ", request.edgeIp]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "text-sm text-doom-dim",
+							children: "Approving grants the same access you have here, including running shell commands."
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.DialogFooter, {
+					className: "px-3 pb-3 sm:px-4 sm:pb-4",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Button, {
+						variant: "outline",
+						"data-testid": "pairing-deny",
+						onClick: () => void require_remoteAccessStore.denyDevice(request.id),
+						children: "deny"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Button, {
+						variant: "primary",
+						"data-testid": "pairing-approve",
+						onClick: () => void require_remoteAccessStore.approveDevice(request.id),
+						children: "approve"
+					})]
+				})
+			]
+		})
+	});
+}
+//#endregion
+exports.PairingApprovalDialog = PairingApprovalDialog;
+
+//# sourceMappingURL=PairingApprovalDialog.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PairingApprovalDialog.cjs","names":["useStore","remoteAccessStore","Dialog","DialogContent","DialogHeader","DialogTitle","DialogDescription","DialogBody","DialogFooter","Button","denyDevice","approveDevice"],"sources":["../../../../src/web/features/remote/PairingApprovalDialog.tsx"],"sourcesContent":["import {\n  Button,\n  Dialog,\n  DialogBody,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '@agimon-ai/po-web-components';\nimport { useStore } from '@tanstack/react-store';\n\nimport { approveDevice, denyDevice, remoteAccessStore } from '../../stores/remoteAccessStore';\n\n/**\n * The second factor, and the reason a photographed QR is not enough.\n *\n * Only ever rendered on the host: the hub sends pairing frames to local pages\n * alone, so a paired phone cannot approve the next device and make its own\n * access permanent.\n */\nexport function PairingApprovalDialog() {\n  const state = useStore(remoteAccessStore);\n  const request = state.view?.pending?.[0];\n  if (request === undefined) return null;\n\n  return (\n    <Dialog open>\n      <DialogContent data-testid=\"pairing-approval\" className=\"max-w-md\">\n        <DialogHeader className=\"flex-col items-start\">\n          <DialogTitle>Pair this device?</DialogTitle>\n          <DialogDescription>\n            Something scanned your code. Approve it only if it is the device in your hand.\n          </DialogDescription>\n        </DialogHeader>\n        <DialogBody className=\"flex flex-col gap-2\">\n          <p data-testid=\"pairing-approval-agent\" className=\"break-words text-base text-doom-text\">\n            {request.userAgent}\n          </p>\n          {/* Labelled as reported rather than stated as fact: anything that can\n              reach the tunnel listener can set this header to whatever it likes,\n              so it is a clue for the human and never a security decision. */}\n          <p className=\"text-sm text-doom-dim\">address reported by the edge: {request.edgeIp}</p>\n          <p className=\"text-sm text-doom-dim\">\n            Approving grants the same access you have here, including running shell commands.\n          </p>\n        </DialogBody>\n        <DialogFooter className=\"px-3 pb-3 sm:px-4 sm:pb-4\">\n          <Button variant=\"outline\" data-testid=\"pairing-deny\" onClick={() => void denyDevice(request.id)}>\n            deny\n          </Button>\n          <Button variant=\"primary\" data-testid=\"pairing-approve\" onClick={() => void approveDevice(request.id)}>\n            approve\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAqBA,SAAgB,wBAAwB;CAEtC,MAAM,WAAA,GADQA,sBAAAA,SAAAA,CAASC,0BAAAA,iBACH,CAAC,CAAC,MAAM,UAAU;CACtC,IAAI,YAAY,KAAA,GAAW,OAAO;CAElC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,6BAAAA,QAAD;EAAQ,MAAA;EACN,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAACC,6BAAAA,eAAD;GAAe,eAAY;GAAmB,WAAU;GAAxD,UAAA;IACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,6BAAAA,cAAD;KAAc,WAAU;KAAxB,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,6BAAAA,aAAD,EAAA,UAAa,oBAA8B,CAAA,GAC3C,iBAAA,GAAA,kBAAA,IAAA,CAACC,6BAAAA,mBAAD,EAAA,UAAmB,iFAEA,CAAA,CACP;;IACd,iBAAA,GAAA,kBAAA,KAAA,CAACC,6BAAAA,YAAD;KAAY,WAAU;KAAtB,UAAA;MACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;OAAG,eAAY;OAAyB,WAAU;OAC/C,UAAA,QAAQ;MACR,CAAA;MAIH,iBAAA,GAAA,kBAAA,KAAA,CAAC,KAAD;OAAG,WAAU;OAAb,UAAA,CAAqC,kCAA+B,QAAQ,MAAU;;MACtF,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;OAAG,WAAU;OAAwB,UAAA;MAElC,CAAA;KACO;;IACZ,iBAAA,GAAA,kBAAA,KAAA,CAACC,6BAAAA,cAAD;KAAc,WAAU;KAAxB,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,6BAAAA,QAAD;MAAQ,SAAQ;MAAU,eAAY;MAAe,eAAe,KAAKC,0BAAAA,WAAW,QAAQ,EAAE;MAAG,UAAA;KAEzF,CAAA,GACR,iBAAA,GAAA,kBAAA,IAAA,CAACD,6BAAAA,QAAD;MAAQ,SAAQ;MAAU,eAAY;MAAkB,eAAe,KAAKE,0BAAAA,cAAc,QAAQ,EAAE;MAAG,UAAA;KAE/F,CAAA,CACI;;GACD;;CACT,CAAA;AAEZ"}

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

@@ -0,0 +1,11 @@
+//#region src/web/features/remote/PairingApprovalDialog.d.ts
+/**
+ * The second factor, and the reason a photographed QR is not enough.
+ *
+ * Only ever rendered on the host: the hub sends pairing frames to local pages
+ * alone, so a paired phone cannot approve the next device and make its own
+ * access permanent.
+ */
+export declare function PairingApprovalDialog(): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=PairingApprovalDialog.d.mts.map

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

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

package/dist/web/features/remote/PairingApprovalDialog.mjs

@@ -0,0 +1,65 @@
+import { approveDevice, denyDevice, remoteAccessStore } from "../../stores/remoteAccessStore.mjs";
+import { useStore } from "@tanstack/react-store";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@agimon-ai/po-web-components";
+//#region src/web/features/remote/PairingApprovalDialog.tsx
+/**
+* The second factor, and the reason a photographed QR is not enough.
+*
+* Only ever rendered on the host: the hub sends pairing frames to local pages
+* alone, so a paired phone cannot approve the next device and make its own
+* access permanent.
+*/
+function PairingApprovalDialog() {
+	const request = useStore(remoteAccessStore).view?.pending?.[0];
+	if (request === void 0) return null;
+	return /* @__PURE__ */ jsx(Dialog, {
+		open: true,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			"data-testid": "pairing-approval",
+			className: "max-w-md",
+			children: [
+				/* @__PURE__ */ jsxs(DialogHeader, {
+					className: "flex-col items-start",
+					children: [/* @__PURE__ */ jsx(DialogTitle, { children: "Pair this device?" }), /* @__PURE__ */ jsx(DialogDescription, { children: "Something scanned your code. Approve it only if it is the device in your hand." })]
+				}),
+				/* @__PURE__ */ jsxs(DialogBody, {
+					className: "flex flex-col gap-2",
+					children: [
+						/* @__PURE__ */ jsx("p", {
+							"data-testid": "pairing-approval-agent",
+							className: "break-words text-base text-doom-text",
+							children: request.userAgent
+						}),
+						/* @__PURE__ */ jsxs("p", {
+							className: "text-sm text-doom-dim",
+							children: ["address reported by the edge: ", request.edgeIp]
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "text-sm text-doom-dim",
+							children: "Approving grants the same access you have here, including running shell commands."
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs(DialogFooter, {
+					className: "px-3 pb-3 sm:px-4 sm:pb-4",
+					children: [/* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						"data-testid": "pairing-deny",
+						onClick: () => void denyDevice(request.id),
+						children: "deny"
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "primary",
+						"data-testid": "pairing-approve",
+						onClick: () => void approveDevice(request.id),
+						children: "approve"
+					})]
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { PairingApprovalDialog };
+
+//# sourceMappingURL=PairingApprovalDialog.mjs.map

package/dist/web/features/remote/PairingApprovalDialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PairingApprovalDialog.mjs","names":[],"sources":["../../../../src/web/features/remote/PairingApprovalDialog.tsx"],"sourcesContent":["import {\n  Button,\n  Dialog,\n  DialogBody,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '@agimon-ai/po-web-components';\nimport { useStore } from '@tanstack/react-store';\n\nimport { approveDevice, denyDevice, remoteAccessStore } from '../../stores/remoteAccessStore';\n\n/**\n * The second factor, and the reason a photographed QR is not enough.\n *\n * Only ever rendered on the host: the hub sends pairing frames to local pages\n * alone, so a paired phone cannot approve the next device and make its own\n * access permanent.\n */\nexport function PairingApprovalDialog() {\n  const state = useStore(remoteAccessStore);\n  const request = state.view?.pending?.[0];\n  if (request === undefined) return null;\n\n  return (\n    <Dialog open>\n      <DialogContent data-testid=\"pairing-approval\" className=\"max-w-md\">\n        <DialogHeader className=\"flex-col items-start\">\n          <DialogTitle>Pair this device?</DialogTitle>\n          <DialogDescription>\n            Something scanned your code. Approve it only if it is the device in your hand.\n          </DialogDescription>\n        </DialogHeader>\n        <DialogBody className=\"flex flex-col gap-2\">\n          <p data-testid=\"pairing-approval-agent\" className=\"break-words text-base text-doom-text\">\n            {request.userAgent}\n          </p>\n          {/* Labelled as reported rather than stated as fact: anything that can\n              reach the tunnel listener can set this header to whatever it likes,\n              so it is a clue for the human and never a security decision. */}\n          <p className=\"text-sm text-doom-dim\">address reported by the edge: {request.edgeIp}</p>\n          <p className=\"text-sm text-doom-dim\">\n            Approving grants the same access you have here, including running shell commands.\n          </p>\n        </DialogBody>\n        <DialogFooter className=\"px-3 pb-3 sm:px-4 sm:pb-4\">\n          <Button variant=\"outline\" data-testid=\"pairing-deny\" onClick={() => void denyDevice(request.id)}>\n            deny\n          </Button>\n          <Button variant=\"primary\" data-testid=\"pairing-approve\" onClick={() => void approveDevice(request.id)}>\n            approve\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAqBA,SAAgB,wBAAwB;CAEtC,MAAM,UADQ,SAAS,iBACH,CAAC,CAAC,MAAM,UAAU;CACtC,IAAI,YAAY,KAAA,GAAW,OAAO;CAElC,OACE,oBAAC,QAAD;EAAQ,MAAA;EACN,UAAA,qBAAC,eAAD;GAAe,eAAY;GAAmB,WAAU;GAAxD,UAAA;IACE,qBAAC,cAAD;KAAc,WAAU;KAAxB,UAAA,CACE,oBAAC,aAAD,EAAA,UAAa,oBAA8B,CAAA,GAC3C,oBAAC,mBAAD,EAAA,UAAmB,iFAEA,CAAA,CACP;;IACd,qBAAC,YAAD;KAAY,WAAU;KAAtB,UAAA;MACE,oBAAC,KAAD;OAAG,eAAY;OAAyB,WAAU;OAC/C,UAAA,QAAQ;MACR,CAAA;MAIH,qBAAC,KAAD;OAAG,WAAU;OAAb,UAAA,CAAqC,kCAA+B,QAAQ,MAAU;;MACtF,oBAAC,KAAD;OAAG,WAAU;OAAwB,UAAA;MAElC,CAAA;KACO;;IACZ,qBAAC,cAAD;KAAc,WAAU;KAAxB,UAAA,CACE,oBAAC,QAAD;MAAQ,SAAQ;MAAU,eAAY;MAAe,eAAe,KAAK,WAAW,QAAQ,EAAE;MAAG,UAAA;KAEzF,CAAA,GACR,oBAAC,QAAD;MAAQ,SAAQ;MAAU,eAAY;MAAkB,eAAe,KAAK,cAAc,QAAQ,EAAE;MAAG,UAAA;KAE/F,CAAA,CACI;;GACD;;CACT,CAAA;AAEZ"}

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

@@ -0,0 +1,83 @@
+const require_remoteAccessStore = require("../../stores/remoteAccessStore.cjs");
+const require_HandoverProgress = require("./HandoverProgress.cjs");
+const require_RemoteAccessOptions = require("./RemoteAccessOptions.cjs");
+const require_RemoteAccessPairing = require("./RemoteAccessPairing.cjs");
+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/RemoteAccessDialog.tsx
+/**
+* Two panels rather than one.
+*
+* Turning this on puts a shell on this machine within reach of the internet, so
+* the settings that bound it come first and the code to scan comes second, once
+* those are answered.
+*/
+function RemoteAccessDialog() {
+	const state = (0, _tanstack_react_store.useStore)(require_remoteAccessStore.remoteAccessStore);
+	const view = state.view;
+	const pairing = state.step === "pairing";
+	const moving = state.step === "handover";
+	const starting = state.busy || view?.status === "starting";
+	if (view?.pending?.length) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Dialog, {
+		open: state.step !== "closed",
+		onOpenChange: (next) => next ? void 0 : require_remoteAccessStore.closeRemoteDialog(),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.DialogContent, {
+			width: "lg",
+			"data-testid": "remote-access-dialog",
+			"aria-describedby": void 0,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.DialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.DialogTitle, { children: pairing ? "Pair a device" : "Remote access" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.DialogDescription, { children: pairing ? "Scan this with the device you want to use. You will be asked to approve it here." : "Reach this cockpit from your phone over a public tunnel." })] }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.DialogBody, {
+					className: "flex flex-col gap-5",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "text-sm leading-relaxed text-doom-dim",
+							children: "A paired device can prompt the agent, approve its tool calls, and run shell commands as you. Pair only devices you hold, and only when you mean to."
+						}),
+						moving ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_HandoverProgress.HandoverProgress, {}) : null,
+						pairing ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_RemoteAccessPairing.RemoteAccessPairing, {}) : null,
+						pairing || moving ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_RemoteAccessOptions.RemoteAccessOptions, {}),
+						state.error === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							"data-testid": "remote-access-error",
+							className: "text-sm text-doom-red",
+							children: state.error
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.DialogFooter, {
+					className: moving ? "hidden" : void 0,
+					children: view?.status === "on" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Button, {
+						variant: "danger-outline",
+						"data-testid": "remote-access-off",
+						disabled: state.busy,
+						onClick: () => void require_remoteAccessStore.turnRemoteAccessOff(),
+						children: "turn off"
+					}), pairing ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Button, {
+						variant: "ghost",
+						"data-testid": "remote-access-back",
+						onClick: require_remoteAccessStore.showRemoteOptions,
+						children: "options"
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Button, {
+						variant: "primary",
+						"data-testid": "remote-access-pair",
+						disabled: state.busy,
+						onClick: () => void require_remoteAccessStore.newPairingCode(),
+						children: "pair a device"
+					})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.Button, {
+						variant: "primary",
+						"data-testid": "remote-access-on",
+						disabled: starting,
+						onClick: () => void require_remoteAccessStore.turnRemoteAccessOn(),
+						children: [starting ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Spinner, {}) : null, "turn on and show the code"]
+					})
+				})
+			]
+		})
+	});
+}
+//#endregion
+exports.RemoteAccessDialog = RemoteAccessDialog;
+
+//# sourceMappingURL=RemoteAccessDialog.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RemoteAccessDialog.cjs","names":["useStore","remoteAccessStore","Dialog","closeRemoteDialog","DialogContent","DialogHeader","DialogTitle","DialogDescription","DialogBody","HandoverProgress","RemoteAccessPairing","RemoteAccessOptions","DialogFooter","Button","turnRemoteAccessOff","showRemoteOptions","newPairingCode","turnRemoteAccessOn","Spinner"],"sources":["../../../../src/web/features/remote/RemoteAccessDialog.tsx"],"sourcesContent":["import {\n  Button,\n  Dialog,\n  DialogBody,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  Spinner,\n} from '@agimon-ai/po-web-components';\nimport { useStore } from '@tanstack/react-store';\n\nimport {\n  closeRemoteDialog,\n  newPairingCode,\n  remoteAccessStore,\n  showRemoteOptions,\n  turnRemoteAccessOff,\n  turnRemoteAccessOn,\n} from '../../stores/remoteAccessStore';\nimport { HandoverProgress } from './HandoverProgress';\nimport { RemoteAccessOptions } from './RemoteAccessOptions';\nimport { RemoteAccessPairing } from './RemoteAccessPairing';\n\n/**\n * Two panels rather than one.\n *\n * Turning this on puts a shell on this machine within reach of the internet, so\n * the settings that bound it come first and the code to scan comes second, once\n * those are answered.\n */\nexport function RemoteAccessDialog() {\n  const state = useStore(remoteAccessStore);\n  const view = state.view;\n  const pairing = state.step === 'pairing';\n  const moving = state.step === 'handover';\n  const starting = state.busy || view?.status === 'starting';\n\n  // The approval prompt is the only action that matters while a device waits.\n  // Two modal roots compete for focus and backdrop ordering when both stay open.\n  if (view?.pending?.length) return null;\n\n  return (\n    <Dialog open={state.step !== 'closed'} onOpenChange={(next) => (next ? undefined : closeRemoteDialog())}>\n      <DialogContent width=\"lg\" data-testid=\"remote-access-dialog\" aria-describedby={undefined}>\n        <DialogHeader>\n          <DialogTitle>{pairing ? 'Pair a device' : 'Remote access'}</DialogTitle>\n          <DialogDescription>\n            {pairing\n              ? 'Scan this with the device you want to use. You will be asked to approve it here.'\n              : 'Reach this cockpit from your phone over a public tunnel.'}\n          </DialogDescription>\n        </DialogHeader>\n\n        <DialogBody className=\"flex flex-col gap-5\">\n          {/* Said before the switch, not after: a paired device can do\n              everything the person at this keyboard can do. */}\n          <p className=\"text-sm leading-relaxed text-doom-dim\">\n            A paired device can prompt the agent, approve its tool calls, and run shell commands as you. Pair only\n            devices you hold, and only when you mean to.\n          </p>\n\n          {moving ? <HandoverProgress /> : null}\n          {pairing ? <RemoteAccessPairing /> : null}\n          {pairing || moving ? null : <RemoteAccessOptions />}\n\n          {state.error === undefined ? null : (\n            <p data-testid=\"remote-access-error\" className=\"text-sm text-doom-red\">\n              {state.error}\n            </p>\n          )}\n        </DialogBody>\n\n        {/* Nothing to offer during a handover: every control here would call a\n            server that is in the middle of being replaced. */}\n        <DialogFooter className={moving ? 'hidden' : undefined}>\n          {view?.status === 'on' ? (\n            <>\n              <Button\n                variant=\"danger-outline\"\n                data-testid=\"remote-access-off\"\n                disabled={state.busy}\n                onClick={() => void turnRemoteAccessOff()}\n              >\n                turn off\n              </Button>\n              {pairing ? (\n                <Button variant=\"ghost\" data-testid=\"remote-access-back\" onClick={showRemoteOptions}>\n                  options\n                </Button>\n              ) : (\n                <Button\n                  variant=\"primary\"\n                  data-testid=\"remote-access-pair\"\n                  disabled={state.busy}\n                  onClick={() => void newPairingCode()}\n                >\n                  pair a device\n                </Button>\n              )}\n            </>\n          ) : (\n            <Button\n              variant=\"primary\"\n              data-testid=\"remote-access-on\"\n              disabled={starting}\n              onClick={() => void turnRemoteAccessOn()}\n            >\n              {starting ? <Spinner /> : null}\n              turn on and show the code\n            </Button>\n          )}\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAgCA,SAAgB,qBAAqB;CACnC,MAAM,SAAA,GAAQA,sBAAAA,SAAAA,CAASC,0BAAAA,iBAAiB;CACxC,MAAM,OAAO,MAAM;CACnB,MAAM,UAAU,MAAM,SAAS;CAC/B,MAAM,SAAS,MAAM,SAAS;CAC9B,MAAM,WAAW,MAAM,QAAQ,MAAM,WAAW;CAIhD,IAAI,MAAM,SAAS,QAAQ,OAAO;CAElC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,6BAAAA,QAAD;EAAQ,MAAM,MAAM,SAAS;EAAU,eAAe,SAAU,OAAO,KAAA,IAAYC,0BAAAA,kBAAkB;EACnG,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAACC,6BAAAA,eAAD;GAAe,OAAM;GAAK,eAAY;GAAuB,oBAAkB,KAAA;GAA/E,UAAA;IACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,6BAAAA,cAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,6BAAAA,aAAD,EAAA,UAAc,UAAU,kBAAkB,gBAA6B,CAAA,GACvE,iBAAA,GAAA,kBAAA,IAAA,CAACC,6BAAAA,mBAAD,EAAA,UACG,UACG,qFACA,2DACa,CAAA,CACP,EAAA,CAAA;IAEd,iBAAA,GAAA,kBAAA,KAAA,CAACC,6BAAAA,YAAD;KAAY,WAAU;KAAtB,UAAA;MAGE,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;OAAG,WAAU;OAAwC,UAAA;MAGlD,CAAA;MAEF,SAAS,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,kBAAD,CAAmB,CAAA,IAAI;MAChC,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAACC,4BAAAA,qBAAD,CAAsB,CAAA,IAAI;MACpC,WAAW,SAAS,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,4BAAAA,qBAAD,CAAsB,CAAA;MAEjD,MAAM,UAAU,KAAA,IAAY,OAC3B,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;OAAG,eAAY;OAAsB,WAAU;OAC5C,UAAA,MAAM;MACN,CAAA;KAEK;;IAIZ,iBAAA,GAAA,kBAAA,IAAA,CAACC,6BAAAA,cAAD;KAAc,WAAW,SAAS,WAAW,KAAA;KAC1C,UAAA,MAAM,WAAW,OAChB,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,6BAAAA,QAAD;MACE,SAAQ;MACR,eAAY;MACZ,UAAU,MAAM;MAChB,eAAe,KAAKC,0BAAAA,oBAAoB;MACzC,UAAA;KAEO,CAAA,GACP,UACC,iBAAA,GAAA,kBAAA,IAAA,CAACD,6BAAAA,QAAD;MAAQ,SAAQ;MAAQ,eAAY;MAAqB,SAASE,0BAAAA;MAAmB,UAAA;KAE7E,CAAA,IAER,iBAAA,GAAA,kBAAA,IAAA,CAACF,6BAAAA,QAAD;MACE,SAAQ;MACR,eAAY;MACZ,UAAU,MAAM;MAChB,eAAe,KAAKG,0BAAAA,eAAe;MACpC,UAAA;KAEO,CAAA,CAEV,EAAA,CAAA,IAEF,iBAAA,GAAA,kBAAA,KAAA,CAACH,6BAAAA,QAAD;MACE,SAAQ;MACR,eAAY;MACZ,UAAU;MACV,eAAe,KAAKI,0BAAAA,mBAAmB;MAJzC,UAAA,CAMG,WAAW,iBAAA,GAAA,kBAAA,IAAA,CAACC,6BAAAA,SAAD,CAAU,CAAA,IAAI,MAAK,2BAEzB;;IAEE,CAAA;GACD;;CACT,CAAA;AAEZ"}

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

@@ -0,0 +1,11 @@
+//#region src/web/features/remote/RemoteAccessDialog.d.ts
+/**
+ * Two panels rather than one.
+ *
+ * Turning this on puts a shell on this machine within reach of the internet, so
+ * the settings that bound it come first and the code to scan comes second, once
+ * those are answered.
+ */
+export declare function RemoteAccessDialog(): import("react").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=RemoteAccessDialog.d.mts.map

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

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