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

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

@@ -0,0 +1,323 @@
+import { answerLogin, cancelLogin, listProviders, logoutProvider, readLogin, startLogin } from "../../lib/authApi.mjs";
+import { useDashboardState } from "../../stores/dashboardStateStore.mjs";
+import { LoginFlowDialog } from "./LoginFlowDialog.mjs";
+import { useCallback, useEffect } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Button, Dot, EmptyState, Input, SearchIcon, SettingsCard, SettingsDescription, SettingsHeader, SettingsPage, SettingsRow, SettingsRowDescription, SettingsRowText, SettingsRowTitle, SettingsSection, SettingsSectionHeader, SettingsSectionTitle, SettingsTitle, Skeleton } from "@agimon-ai/po-web-components";
+//#region src/web/features/settings/ProviderSettings.tsx
+const FLOW_POLL_MS = 500;
+/** The auth source Pi reports for a credential its own /login stored; the only kind /logout removes. */
+const STORED_SOURCE = "stored";
+const ACTION_LABEL = {
+	oauth: "Sign in",
+	api_key: "Add API key"
+};
+const METHOD_NAME = {
+	oauth: "OAuth",
+	api_key: "an API key"
+};
+/** Where the credential came from, in words: Pi's own store, or the variable that holds the key. */
+function ConnectedStatus({ type, source }) {
+	if (source === STORED_SOURCE) return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		"Signed in with ",
+		METHOD_NAME[type],
+		", saved on this machine"
+	] });
+	if (!source) return /* @__PURE__ */ jsxs(Fragment$1, { children: ["Signed in with ", METHOD_NAME[type]] });
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: ["Using the key in ", /* @__PURE__ */ jsx("code", {
+		className: "font-mono text-doom-hi",
+		children: source
+	})] });
+}
+function ConnectedRow({ provider, busy, onLogout }) {
+	const auth = provider.authenticated;
+	if (!auth) return null;
+	return /* @__PURE__ */ jsx(SettingsRow, {
+		asChild: true,
+		className: "gap-x-4",
+		children: /* @__PURE__ */ jsxs("li", {
+			"data-testid": `provider-${provider.id}`,
+			"data-authenticated": true,
+			children: [
+				/* @__PURE__ */ jsx(Dot, {
+					tone: "green",
+					className: "size-2"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-1 flex-col gap-0.5",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "truncate text-base font-semibold text-doom-hi",
+						children: provider.name
+					}), /* @__PURE__ */ jsx("span", {
+						"data-testid": `provider-status-${provider.id}`,
+						className: "min-w-0 break-words text-sm text-doom-dim",
+						children: /* @__PURE__ */ jsx(ConnectedStatus, { ...auth })
+					})]
+				}),
+				auth.source === STORED_SOURCE ? /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "sm",
+					"data-testid": `provider-logout-${provider.id}`,
+					disabled: busy,
+					onClick: onLogout,
+					className: "hover:text-doom-red",
+					children: "Sign out"
+				}) : auth.source ? /* @__PURE__ */ jsx("span", {
+					className: "shrink-0 text-sm text-doom-dim",
+					children: "Set by your environment"
+				}) : null
+			]
+		})
+	});
+}
+function AvailableRow({ provider, busy, onLogin }) {
+	return /* @__PURE__ */ jsx(SettingsRow, {
+		asChild: true,
+		className: "gap-x-4 py-3",
+		children: /* @__PURE__ */ jsxs("li", {
+			"data-testid": `provider-${provider.id}`,
+			"data-authenticated": false,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 flex-col",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "truncate text-base font-semibold text-doom-hi",
+						children: provider.name
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "truncate font-mono text-sm text-doom-dim",
+						children: provider.id
+					}),
+					/* @__PURE__ */ jsx("span", {
+						"data-testid": `provider-status-${provider.id}`,
+						className: "sr-only",
+						children: "Not connected"
+					})
+				]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 flex-wrap gap-2",
+				children: provider.methods.length === 0 ? /* @__PURE__ */ jsx("span", {
+					className: "text-sm text-doom-dim",
+					children: "Reads credentials from your environment"
+				}) : provider.methods.map((method) => /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "sm",
+					"data-testid": `provider-login-${method.type}-${provider.id}`,
+					title: method.label,
+					disabled: busy,
+					onClick: () => onLogin(method.type),
+					className: "hover:text-doom-green",
+					children: ACTION_LABEL[method.type]
+				}, method.type))
+			})]
+		})
+	});
+}
+/**
+* The providers page: what Pi can sign in to on the hub's machine, and
+* whether it has. A login runs on the hub; this page polls its flow and
+* relays the one question it may ask.
+*/
+function ProviderSettings() {
+	const [providers, setProviders] = useDashboardState("providers/list", null);
+	const [error, setError] = useDashboardState("providers/error", "");
+	const [flow, setFlow, flowState] = useDashboardState("providers/flow", null);
+	const [busyId, setBusyId, busyState] = useDashboardState("providers/busy", null);
+	const [filter, setFilter] = useDashboardState("providers/filter", "");
+	const reload = useCallback(async () => {
+		const result = await listProviders();
+		if ("providers" in result) {
+			setProviders(result.providers);
+			setError("");
+		} else setError(result.error);
+	}, [setProviders, setError]);
+	useEffect(() => {
+		reload();
+	}, [reload]);
+	const flowId = flow?.id;
+	const running = flow?.status === "running";
+	useEffect(() => {
+		if (flowId === void 0 || !running) return;
+		let stopped = false;
+		let timer;
+		const poll = async () => {
+			const result = await readLogin(flowId);
+			if (stopped) return;
+			if ("error" in result) {
+				setFlow((current) => current && current.id === flowId ? {
+					...current,
+					status: "failed",
+					error: result.error
+				} : current);
+				return;
+			}
+			setFlow(result.flow);
+			if (result.flow.status !== "running") {
+				reload();
+				return;
+			}
+			timer = setTimeout(() => void poll(), FLOW_POLL_MS);
+		};
+		timer = setTimeout(() => void poll(), FLOW_POLL_MS);
+		return () => {
+			stopped = true;
+			if (timer !== void 0) clearTimeout(timer);
+		};
+	}, [
+		flowId,
+		running,
+		reload,
+		setFlow
+	]);
+	const begin = async (providerId, type) => {
+		if (busyState.state !== null || flowState.state?.status === "running") return;
+		setBusyId(providerId);
+		const result = await startLogin(providerId, type);
+		setBusyId(null);
+		if ("flow" in result) setFlow(result.flow);
+		else setError(result.error);
+	};
+	const answer = async (promptId, value) => {
+		if (!flow || busyState.state !== null) return;
+		setBusyId(flow.providerId);
+		const result = await answerLogin(flow.id, promptId, value);
+		setBusyId(null);
+		if ("flow" in result) setFlow(result.flow);
+		else setError(result.error);
+	};
+	const cancel = async () => {
+		if (!flow || busyState.state !== null) return;
+		setBusyId(flow.providerId);
+		const result = await cancelLogin(flow.id);
+		setBusyId(null);
+		setFlow("flow" in result ? result.flow : null);
+		reload();
+	};
+	const signOut = async (providerId) => {
+		if (busyState.state !== null) return;
+		setBusyId(providerId);
+		const result = await logoutProvider(providerId);
+		if ("error" in result) setError(result.error);
+		else await reload();
+		setBusyId(null);
+	};
+	const needle = filter.trim().toLowerCase();
+	const connected = (providers ?? []).filter((provider) => provider.authenticated !== void 0);
+	const available = (providers ?? []).filter((provider) => provider.authenticated === void 0).filter((provider) => `${provider.name} ${provider.id}`.toLowerCase().includes(needle));
+	const busy = busyId !== null || running;
+	return /* @__PURE__ */ jsxs(SettingsPage, {
+		"data-testid": "provider-settings",
+		children: [
+			/* @__PURE__ */ jsxs(SettingsHeader, { children: [/* @__PURE__ */ jsx(SettingsTitle, { children: "Providers" }), /* @__PURE__ */ jsxs(SettingsDescription, { children: [
+				"Connect the model providers Po can work with. Sign in once and every session on this machine can use it. Credentials stay on this machine, in Pi's ",
+				/* @__PURE__ */ jsx("code", {
+					className: "font-mono text-doom-hi",
+					children: "auth.json"
+				}),
+				"."
+			] })] }),
+			providers === null && !error ? /* @__PURE__ */ jsxs(SettingsCard, {
+				role: "status",
+				"aria-busy": true,
+				className: "gap-4 p-5",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: "Reading providers"
+					}),
+					/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-40" }),
+					/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-64" }),
+					/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-52" })
+				]
+			}) : null,
+			providers === null && error ? /* @__PURE__ */ jsx(SettingsCard, { children: /* @__PURE__ */ jsxs(SettingsRow, {
+				"data-testid": "provider-settings-error",
+				title: error,
+				children: [/* @__PURE__ */ jsxs(SettingsRowText, {
+					role: "alert",
+					children: [/* @__PURE__ */ jsx(SettingsRowTitle, { children: "Po couldn't reach your providers just now" }), /* @__PURE__ */ jsx(SettingsRowDescription, { children: "Nothing has changed. Your sign-ins are where you left them." })]
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "sm",
+					onClick: () => void reload(),
+					children: "Try again"
+				})]
+			}) }) : null,
+			providers && error ? /* @__PURE__ */ jsx("p", {
+				"data-testid": "provider-settings-error",
+				role: "alert",
+				className: "text-sm leading-relaxed text-doom-red",
+				children: error
+			}) : null,
+			providers?.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {
+				"data-testid": "provider-list-empty",
+				className: "rounded-lg border border-dashed border-doom-border py-8",
+				title: "No providers to connect",
+				description: "Pi hasn't offered any model providers on this machine yet."
+			}) : null,
+			providers && providers.length > 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(SettingsSection, { children: [/* @__PURE__ */ jsx(SettingsSectionHeader, { children: /* @__PURE__ */ jsx(SettingsSectionTitle, { children: "Connected" }) }), connected.length > 0 ? /* @__PURE__ */ jsx(SettingsCard, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx("ul", { children: connected.map((provider) => /* @__PURE__ */ jsx(ConnectedRow, {
+					provider,
+					busy,
+					onLogout: () => void signOut(provider.id)
+				}, provider.id)) })
+			}) : /* @__PURE__ */ jsx(EmptyState, {
+				className: "rounded-lg border border-dashed border-doom-border py-8",
+				title: "Nothing connected yet",
+				description: "Pick a provider below. Po takes it from there."
+			})] }), /* @__PURE__ */ jsxs(SettingsSection, { children: [
+				/* @__PURE__ */ jsxs(SettingsSectionHeader, { children: [/* @__PURE__ */ jsx(SettingsSectionTitle, { children: "Available" }), /* @__PURE__ */ jsxs("span", {
+					className: "text-sm text-doom-dim",
+					children: [
+						connected.length,
+						" of ",
+						providers.length,
+						" connected"
+					]
+				})] }),
+				/* @__PURE__ */ jsxs("label", {
+					className: "flex min-h-10 items-center gap-2.5 rounded-lg border border-doom-border bg-doom-deep px-3 transition-colors focus-within:border-doom-green/60",
+					children: [/* @__PURE__ */ jsx(SearchIcon, { className: "size-4 shrink-0 text-doom-faint" }), /* @__PURE__ */ jsx(Input, {
+						variant: "bare",
+						"data-testid": "provider-filter",
+						value: filter,
+						placeholder: "Search providers",
+						"aria-label": "Search providers",
+						onChange: (event) => setFilter(event.target.value),
+						className: "flex-1"
+					})]
+				}),
+				available.length > 0 ? /* @__PURE__ */ jsx(SettingsCard, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx("ul", {
+						"data-testid": "provider-list",
+						children: available.map((provider) => /* @__PURE__ */ jsx(AvailableRow, {
+							provider,
+							busy,
+							onLogin: (type) => void begin(provider.id, type)
+						}, provider.id))
+					})
+				}) : needle ? /* @__PURE__ */ jsx(EmptyState, {
+					"data-testid": "provider-no-match",
+					className: "rounded-lg border border-doom-border bg-doom-panel py-8",
+					title: `No provider called “${filter.trim()}”`,
+					description: "Try the company name, like Google or Mistral."
+				}) : /* @__PURE__ */ jsx("p", {
+					className: "text-sm text-doom-dim",
+					children: "Every provider Po knows about is connected."
+				})
+			] })] }) : null,
+			flow ? /* @__PURE__ */ jsx(LoginFlowDialog, {
+				flow,
+				onAnswer: (promptId, value) => void answer(promptId, value),
+				onCancel: () => void cancel(),
+				onClose: () => setFlow(null)
+			}) : null
+		]
+	});
+}
+//#endregion
+export { ProviderSettings };
+
+//# sourceMappingURL=ProviderSettings.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProviderSettings.mjs","names":[],"sources":["../../../../src/web/features/settings/ProviderSettings.tsx"],"sourcesContent":["import {\n  Button,\n  Dot,\n  EmptyState,\n  Input,\n  SearchIcon,\n  SettingsCard,\n  SettingsDescription,\n  SettingsHeader,\n  SettingsPage,\n  SettingsRow,\n  SettingsRowDescription,\n  SettingsRowText,\n  SettingsRowTitle,\n  SettingsSection,\n  SettingsSectionHeader,\n  SettingsSectionTitle,\n  SettingsTitle,\n  Skeleton,\n} from '@agimon-ai/po-web-components';\nimport { useCallback, useEffect } from 'react';\n\nimport type { AuthMethodType, LoginFlowSnapshot, ProviderAuthSummary } from '../../../types/auth';\nimport { answerLogin, cancelLogin, listProviders, logoutProvider, readLogin, startLogin } from '../../lib/authApi';\nimport { useDashboardState } from '../../stores/dashboardStateStore';\nimport { LoginFlowDialog } from './LoginFlowDialog';\n\nconst FLOW_POLL_MS = 500;\n/** The auth source Pi reports for a credential its own /login stored; the only kind /logout removes. */\nconst STORED_SOURCE = 'stored';\n\nconst ACTION_LABEL: Readonly<Record<AuthMethodType, string>> = { oauth: 'Sign in', api_key: 'Add API key' };\nconst METHOD_NAME: Readonly<Record<AuthMethodType, string>> = { oauth: 'OAuth', api_key: 'an API key' };\n\n/** Where the credential came from, in words: Pi's own store, or the variable that holds the key. */\nfunction ConnectedStatus({ type, source }: NonNullable<ProviderAuthSummary['authenticated']>) {\n  if (source === STORED_SOURCE) return <>Signed in with {METHOD_NAME[type]}, saved on this machine</>;\n  if (!source) return <>Signed in with {METHOD_NAME[type]}</>;\n  return (\n    <>\n      Using the key in <code className=\"font-mono text-doom-hi\">{source}</code>\n    </>\n  );\n}\n\nfunction ConnectedRow({\n  provider,\n  busy,\n  onLogout,\n}: {\n  provider: ProviderAuthSummary;\n  busy: boolean;\n  onLogout: () => void;\n}) {\n  const auth = provider.authenticated;\n  if (!auth) return null;\n  return (\n    <SettingsRow asChild className=\"gap-x-4\">\n      <li data-testid={`provider-${provider.id}`} data-authenticated>\n        <Dot tone=\"green\" className=\"size-2\" />\n        <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n          <span className=\"truncate text-base font-semibold text-doom-hi\">{provider.name}</span>\n          <span data-testid={`provider-status-${provider.id}`} className=\"min-w-0 break-words text-sm text-doom-dim\">\n            <ConnectedStatus {...auth} />\n          </span>\n        </div>\n        {/* Only a credential Pi stored can be removed here; an environment key is the shell's to unset. */}\n        {auth.source === STORED_SOURCE ? (\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            data-testid={`provider-logout-${provider.id}`}\n            disabled={busy}\n            onClick={onLogout}\n            className=\"hover:text-doom-red\"\n          >\n            Sign out\n          </Button>\n        ) : auth.source ? (\n          <span className=\"shrink-0 text-sm text-doom-dim\">Set by your environment</span>\n        ) : null}\n      </li>\n    </SettingsRow>\n  );\n}\n\nfunction AvailableRow({\n  provider,\n  busy,\n  onLogin,\n}: {\n  provider: ProviderAuthSummary;\n  busy: boolean;\n  onLogin: (type: AuthMethodType) => void;\n}) {\n  return (\n    <SettingsRow asChild className=\"gap-x-4 py-3\">\n      <li data-testid={`provider-${provider.id}`} data-authenticated={false}>\n        <div className=\"flex min-w-0 flex-1 flex-col\">\n          <span className=\"truncate text-base font-semibold text-doom-hi\">{provider.name}</span>\n          <span className=\"truncate font-mono text-sm text-doom-dim\">{provider.id}</span>\n          <span data-testid={`provider-status-${provider.id}`} className=\"sr-only\">\n            Not connected\n          </span>\n        </div>\n        <div className=\"flex shrink-0 flex-wrap gap-2\">\n          {provider.methods.length === 0 ? (\n            <span className=\"text-sm text-doom-dim\">Reads credentials from your environment</span>\n          ) : (\n            provider.methods.map((method) => (\n              <Button\n                key={method.type}\n                variant=\"ghost\"\n                size=\"sm\"\n                data-testid={`provider-login-${method.type}-${provider.id}`}\n                title={method.label}\n                disabled={busy}\n                onClick={() => onLogin(method.type)}\n                className=\"hover:text-doom-green\"\n              >\n                {ACTION_LABEL[method.type]}\n              </Button>\n            ))\n          )}\n        </div>\n      </li>\n    </SettingsRow>\n  );\n}\n\n/**\n * The providers page: what Pi can sign in to on the hub's machine, and\n * whether it has. A login runs on the hub; this page polls its flow and\n * relays the one question it may ask.\n */\nexport function ProviderSettings() {\n  const [providers, setProviders] = useDashboardState<ProviderAuthSummary[] | null>('providers/list', null);\n  const [error, setError] = useDashboardState('providers/error', '');\n  const [flow, setFlow, flowState] = useDashboardState<LoginFlowSnapshot | null>('providers/flow', null);\n  const [busyId, setBusyId, busyState] = useDashboardState<string | null>('providers/busy', null);\n  const [filter, setFilter] = useDashboardState('providers/filter', '');\n\n  const reload = useCallback(async (): Promise<void> => {\n    const result = await listProviders();\n    if ('providers' in result) {\n      setProviders(result.providers);\n      setError('');\n    } else {\n      setError(result.error);\n    }\n  }, [setProviders, setError]);\n\n  useEffect(() => {\n    // eslint-disable-next-line react/set-state-in-effect -- reads the hub's provider auth list over HTTP; the state is the response.\n    void reload();\n  }, [reload]);\n\n  // Poll the running flow one request at a time; once it settles, the list\n  // is re-read so the provider's chip reflects the outcome.\n  const flowId = flow?.id;\n  const running = flow?.status === 'running';\n  useEffect(() => {\n    if (flowId === undefined || !running) return;\n    let stopped = false;\n    let timer: ReturnType<typeof setTimeout> | undefined;\n    const poll = async (): Promise<void> => {\n      const result = await readLogin(flowId);\n      if (stopped) return;\n      if ('error' in result) {\n        setFlow((current) =>\n          current && current.id === flowId ? { ...current, status: 'failed', error: result.error } : current,\n        );\n        return;\n      }\n      setFlow(result.flow);\n      if (result.flow.status !== 'running') {\n        void reload();\n        return;\n      }\n      timer = setTimeout(() => void poll(), FLOW_POLL_MS);\n    };\n    timer = setTimeout(() => void poll(), FLOW_POLL_MS);\n    return () => {\n      stopped = true;\n      if (timer !== undefined) clearTimeout(timer);\n    };\n  }, [flowId, running, reload, setFlow]);\n\n  const begin = async (providerId: string, type: AuthMethodType): Promise<void> => {\n    if (busyState.state !== null || flowState.state?.status === 'running') return;\n    setBusyId(providerId);\n    const result = await startLogin(providerId, type);\n    setBusyId(null);\n    if ('flow' in result) setFlow(result.flow);\n    else setError(result.error);\n  };\n\n  const answer = async (promptId: string, value: string): Promise<void> => {\n    if (!flow || busyState.state !== null) return;\n    setBusyId(flow.providerId);\n    const result = await answerLogin(flow.id, promptId, value);\n    setBusyId(null);\n    if ('flow' in result) setFlow(result.flow);\n    else setError(result.error);\n  };\n\n  const cancel = async (): Promise<void> => {\n    if (!flow || busyState.state !== null) return;\n    setBusyId(flow.providerId);\n    const result = await cancelLogin(flow.id);\n    setBusyId(null);\n    setFlow('flow' in result ? result.flow : null);\n    void reload();\n  };\n\n  const signOut = async (providerId: string): Promise<void> => {\n    if (busyState.state !== null) return;\n    setBusyId(providerId);\n    const result = await logoutProvider(providerId);\n    if ('error' in result) setError(result.error);\n    else await reload();\n    setBusyId(null);\n  };\n\n  // Connected providers are what a reader came to check, so they get their own\n  // group; the long tail is a searchable list rather than a wall of cards.\n  const needle = filter.trim().toLowerCase();\n  const connected = (providers ?? []).filter((provider) => provider.authenticated !== undefined);\n  const available = (providers ?? [])\n    .filter((provider) => provider.authenticated === undefined)\n    .filter((provider) => `${provider.name} ${provider.id}`.toLowerCase().includes(needle));\n  const busy = busyId !== null || running;\n\n  return (\n    <SettingsPage data-testid=\"provider-settings\">\n      <SettingsHeader>\n        <SettingsTitle>Providers</SettingsTitle>\n        <SettingsDescription>\n          Connect the model providers Po can work with. Sign in once and every session on this machine can use it.\n          Credentials stay on this machine, in Pi&apos;s <code className=\"font-mono text-doom-hi\">auth.json</code>.\n        </SettingsDescription>\n      </SettingsHeader>\n      {providers === null && !error ? (\n        <SettingsCard role=\"status\" aria-busy className=\"gap-4 p-5\">\n          <span className=\"sr-only\">Reading providers</span>\n          <Skeleton className=\"h-4 w-40\" />\n          <Skeleton className=\"h-4 w-64\" />\n          <Skeleton className=\"h-4 w-52\" />\n        </SettingsCard>\n      ) : null}\n      {providers === null && error ? (\n        <SettingsCard>\n          <SettingsRow data-testid=\"provider-settings-error\" title={error}>\n            <SettingsRowText role=\"alert\">\n              <SettingsRowTitle>Po couldn&apos;t reach your providers just now</SettingsRowTitle>\n              <SettingsRowDescription>\n                Nothing has changed. Your sign-ins are where you left them.\n              </SettingsRowDescription>\n            </SettingsRowText>\n            <Button variant=\"outline\" size=\"sm\" onClick={() => void reload()}>\n              Try again\n            </Button>\n          </SettingsRow>\n        </SettingsCard>\n      ) : null}\n      {providers && error ? (\n        <p data-testid=\"provider-settings-error\" role=\"alert\" className=\"text-sm leading-relaxed text-doom-red\">\n          {error}\n        </p>\n      ) : null}\n      {providers?.length === 0 ? (\n        <EmptyState\n          data-testid=\"provider-list-empty\"\n          className=\"rounded-lg border border-dashed border-doom-border py-8\"\n          title=\"No providers to connect\"\n          description=\"Pi hasn't offered any model providers on this machine yet.\"\n        />\n      ) : null}\n      {providers && providers.length > 0 ? (\n        <>\n          <SettingsSection>\n            <SettingsSectionHeader>\n              <SettingsSectionTitle>Connected</SettingsSectionTitle>\n            </SettingsSectionHeader>\n            {connected.length > 0 ? (\n              <SettingsCard asChild>\n                <ul>\n                  {connected.map((provider) => (\n                    <ConnectedRow\n                      key={provider.id}\n                      provider={provider}\n                      busy={busy}\n                      onLogout={() => void signOut(provider.id)}\n                    />\n                  ))}\n                </ul>\n              </SettingsCard>\n            ) : (\n              <EmptyState\n                className=\"rounded-lg border border-dashed border-doom-border py-8\"\n                title=\"Nothing connected yet\"\n                description=\"Pick a provider below. Po takes it from there.\"\n              />\n            )}\n          </SettingsSection>\n          <SettingsSection>\n            <SettingsSectionHeader>\n              <SettingsSectionTitle>Available</SettingsSectionTitle>\n              <span className=\"text-sm text-doom-dim\">\n                {connected.length} of {providers.length} connected\n              </span>\n            </SettingsSectionHeader>\n            <label className=\"flex min-h-10 items-center gap-2.5 rounded-lg border border-doom-border bg-doom-deep px-3 transition-colors focus-within:border-doom-green/60\">\n              <SearchIcon className=\"size-4 shrink-0 text-doom-faint\" />\n              <Input\n                variant=\"bare\"\n                data-testid=\"provider-filter\"\n                value={filter}\n                placeholder=\"Search providers\"\n                aria-label=\"Search providers\"\n                onChange={(event) => setFilter(event.target.value)}\n                className=\"flex-1\"\n              />\n            </label>\n            {available.length > 0 ? (\n              <SettingsCard asChild>\n                <ul data-testid=\"provider-list\">\n                  {available.map((provider) => (\n                    <AvailableRow\n                      key={provider.id}\n                      provider={provider}\n                      busy={busy}\n                      onLogin={(type) => void begin(provider.id, type)}\n                    />\n                  ))}\n                </ul>\n              </SettingsCard>\n            ) : needle ? (\n              <EmptyState\n                data-testid=\"provider-no-match\"\n                className=\"rounded-lg border border-doom-border bg-doom-panel py-8\"\n                title={`No provider called “${filter.trim()}”`}\n                description=\"Try the company name, like Google or Mistral.\"\n              />\n            ) : (\n              <p className=\"text-sm text-doom-dim\">Every provider Po knows about is connected.</p>\n            )}\n          </SettingsSection>\n        </>\n      ) : null}\n      {flow ? (\n        <LoginFlowDialog\n          flow={flow}\n          onAnswer={(promptId, value) => void answer(promptId, value)}\n          onCancel={() => void cancel()}\n          onClose={() => setFlow(null)}\n        />\n      ) : null}\n    </SettingsPage>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,50 @@
+const require_remoteAccessStore = require("../../stores/remoteAccessStore.cjs");
+const require_SessionMcpSettings = require("./SessionMcpSettings.cjs");
+const require_TunnelSettings = require("./TunnelSettings.cjs");
+let react = require("react");
+let _tanstack_react_store = require("@tanstack/react-store");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _agimon_ai_po_web_components = require("@agimon-ai/po-web-components");
+//#region src/web/features/settings/RemoteControlSettings.tsx
+/** Persistent tunnel configuration, separate from the dialog that starts and pairs a remote session. */
+function RemoteControlSettings() {
+	const state = (0, _tanstack_react_store.useStore)(require_remoteAccessStore.remoteAccessStore);
+	(0, react.useEffect)(() => {
+		require_remoteAccessStore.refreshRemoteState();
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.SettingsPage, {
+		"data-testid": "remote-control-settings",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.SettingsHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SettingsTitle, { children: "Remote control" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SettingsDescription, { children: "Reach this Po from your phone or another computer. You turn access on and pair devices from the remote access dialog; this page holds what stays the same between visits." })] }),
+			state.view === void 0 && state.error ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SettingsCard, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.SettingsRow, {
+				title: state.error,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.SettingsRowText, {
+					role: "alert",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SettingsRowTitle, { children: "Po couldn't read your remote settings just now" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.SettingsRowDescription, { children: "Nothing has changed. Remote access is as you left it." })]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Button, {
+					variant: "outline",
+					size: "sm",
+					onClick: () => void require_remoteAccessStore.refreshRemoteState(),
+					children: "Try again"
+				})]
+			}) }) : state.view === void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_agimon_ai_po_web_components.SettingsCard, {
+				role: "status",
+				"aria-busy": true,
+				className: "gap-4 p-5",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "sr-only",
+						children: "Reading remote settings"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Skeleton, { className: "h-4 w-48" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_agimon_ai_po_web_components.Skeleton, { className: "h-4 w-72" })
+				]
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TunnelSettings.TunnelSettings, { tunnel: state.view.settings.tunnel }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SessionMcpSettings.SessionMcpSettings, {})
+		]
+	});
+}
+//#endregion
+exports.RemoteControlSettings = RemoteControlSettings;
+
+//# sourceMappingURL=RemoteControlSettings.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RemoteControlSettings.cjs","names":["useStore","remoteAccessStore","refreshRemoteState","SettingsPage","SettingsHeader","SettingsTitle","SettingsDescription","SettingsCard","SettingsRow","SettingsRowText","SettingsRowTitle","SettingsRowDescription","Button","Skeleton","TunnelSettings","SessionMcpSettings"],"sources":["../../../../src/web/features/settings/RemoteControlSettings.tsx"],"sourcesContent":["import {\n  Button,\n  SettingsCard,\n  SettingsDescription,\n  SettingsHeader,\n  SettingsPage,\n  SettingsRow,\n  SettingsRowDescription,\n  SettingsRowText,\n  SettingsRowTitle,\n  SettingsTitle,\n  Skeleton,\n} from '@agimon-ai/po-web-components';\nimport { useStore } from '@tanstack/react-store';\nimport { useEffect } from 'react';\n\nimport { refreshRemoteState, remoteAccessStore } from '../../stores/remoteAccessStore';\nimport { SessionMcpSettings } from './SessionMcpSettings';\nimport { TunnelSettings } from './TunnelSettings';\n\n/** Persistent tunnel configuration, separate from the dialog that starts and pairs a remote session. */\nexport function RemoteControlSettings() {\n  const state = useStore(remoteAccessStore);\n\n  useEffect(() => {\n    void refreshRemoteState();\n  }, []);\n\n  return (\n    <SettingsPage data-testid=\"remote-control-settings\">\n      <SettingsHeader>\n        <SettingsTitle>Remote control</SettingsTitle>\n        <SettingsDescription>\n          Reach this Po from your phone or another computer. You turn access on and pair devices from the remote access\n          dialog; this page holds what stays the same between visits.\n        </SettingsDescription>\n      </SettingsHeader>\n\n      {state.view === undefined && state.error ? (\n        <SettingsCard>\n          <SettingsRow title={state.error}>\n            <SettingsRowText role=\"alert\">\n              <SettingsRowTitle>Po couldn&apos;t read your remote settings just now</SettingsRowTitle>\n              <SettingsRowDescription>Nothing has changed. Remote access is as you left it.</SettingsRowDescription>\n            </SettingsRowText>\n            <Button variant=\"outline\" size=\"sm\" onClick={() => void refreshRemoteState()}>\n              Try again\n            </Button>\n          </SettingsRow>\n        </SettingsCard>\n      ) : state.view === undefined ? (\n        <SettingsCard role=\"status\" aria-busy className=\"gap-4 p-5\">\n          <span className=\"sr-only\">Reading remote settings</span>\n          <Skeleton className=\"h-4 w-48\" />\n          <Skeleton className=\"h-4 w-72\" />\n        </SettingsCard>\n      ) : (\n        <TunnelSettings tunnel={state.view.settings.tunnel} />\n      )}\n\n      <SessionMcpSettings />\n    </SettingsPage>\n  );\n}\n"],"mappings":";;;;;;;;;AAqBA,SAAgB,wBAAwB;CACtC,MAAM,SAAA,GAAQA,sBAAAA,SAAAA,CAASC,0BAAAA,iBAAiB;CAExC,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,0BAAKC,mBAAmB;CAC1B,GAAG,CAAC,CAAC;CAEL,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,6BAAAA,cAAD;EAAc,eAAY;EAA1B,UAAA;GACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,6BAAAA,gBAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,6BAAAA,eAAD,EAAA,UAAe,iBAA6B,CAAA,GAC5C,iBAAA,GAAA,kBAAA,IAAA,CAACC,6BAAAA,qBAAD,EAAA,UAAqB,4KAGA,CAAA,CACP,EAAA,CAAA;GAEf,MAAM,SAAS,KAAA,KAAa,MAAM,QACjC,iBAAA,GAAA,kBAAA,IAAA,CAACC,6BAAAA,cAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,6BAAAA,aAAD;IAAa,OAAO,MAAM;IAA1B,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,6BAAAA,iBAAD;KAAiB,MAAK;KAAtB,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,6BAAAA,kBAAD,EAAA,UAAkB,iDAAqE,CAAA,GACvF,iBAAA,GAAA,kBAAA,IAAA,CAACC,6BAAAA,wBAAD,EAAA,UAAwB,wDAA6E,CAAA,CACtF;IACjB,CAAA,GAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,6BAAAA,QAAD;KAAQ,SAAQ;KAAU,MAAK;KAAK,eAAe,KAAKV,0BAAAA,mBAAmB;KAAG,UAAA;IAEtE,CAAA,CACG;GACD,CAAA,EAAA,CAAA,IACZ,MAAM,SAAS,KAAA,IACjB,iBAAA,GAAA,kBAAA,KAAA,CAACK,6BAAAA,cAAD;IAAc,MAAK;IAAS,aAAA;IAAU,WAAU;IAAhD,UAAA;KACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;MAAM,WAAU;MAAU,UAAA;KAA6B,CAAA;KACvD,iBAAA,GAAA,kBAAA,IAAA,CAACM,6BAAAA,UAAD,EAAU,WAAU,WAAY,CAAA;KAChC,iBAAA,GAAA,kBAAA,IAAA,CAACA,6BAAAA,UAAD,EAAU,WAAU,WAAY,CAAA;IACpB;GAEd,CAAA,IAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,uBAAAA,gBAAD,EAAgB,QAAQ,MAAM,KAAK,SAAS,OAAS,CAAA;GAGvD,iBAAA,GAAA,kBAAA,IAAA,CAACC,2BAAAA,oBAAD,CAAqB,CAAA;EACT;;AAElB"}

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

@@ -0,0 +1,5 @@
+//#region src/web/features/settings/RemoteControlSettings.d.ts
+/** Persistent tunnel configuration, separate from the dialog that starts and pairs a remote session. */
+export declare function RemoteControlSettings(): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=RemoteControlSettings.d.mts.map

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

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

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

@@ -0,0 +1,50 @@
+import { refreshRemoteState, remoteAccessStore } from "../../stores/remoteAccessStore.mjs";
+import { SessionMcpSettings } from "./SessionMcpSettings.mjs";
+import { TunnelSettings } from "./TunnelSettings.mjs";
+import { useEffect } from "react";
+import { useStore } from "@tanstack/react-store";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, SettingsCard, SettingsDescription, SettingsHeader, SettingsPage, SettingsRow, SettingsRowDescription, SettingsRowText, SettingsRowTitle, SettingsTitle, Skeleton } from "@agimon-ai/po-web-components";
+//#region src/web/features/settings/RemoteControlSettings.tsx
+/** Persistent tunnel configuration, separate from the dialog that starts and pairs a remote session. */
+function RemoteControlSettings() {
+	const state = useStore(remoteAccessStore);
+	useEffect(() => {
+		refreshRemoteState();
+	}, []);
+	return /* @__PURE__ */ jsxs(SettingsPage, {
+		"data-testid": "remote-control-settings",
+		children: [
+			/* @__PURE__ */ jsxs(SettingsHeader, { children: [/* @__PURE__ */ jsx(SettingsTitle, { children: "Remote control" }), /* @__PURE__ */ jsx(SettingsDescription, { children: "Reach this Po from your phone or another computer. You turn access on and pair devices from the remote access dialog; this page holds what stays the same between visits." })] }),
+			state.view === void 0 && state.error ? /* @__PURE__ */ jsx(SettingsCard, { children: /* @__PURE__ */ jsxs(SettingsRow, {
+				title: state.error,
+				children: [/* @__PURE__ */ jsxs(SettingsRowText, {
+					role: "alert",
+					children: [/* @__PURE__ */ jsx(SettingsRowTitle, { children: "Po couldn't read your remote settings just now" }), /* @__PURE__ */ jsx(SettingsRowDescription, { children: "Nothing has changed. Remote access is as you left it." })]
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "sm",
+					onClick: () => void refreshRemoteState(),
+					children: "Try again"
+				})]
+			}) }) : state.view === void 0 ? /* @__PURE__ */ jsxs(SettingsCard, {
+				role: "status",
+				"aria-busy": true,
+				className: "gap-4 p-5",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: "Reading remote settings"
+					}),
+					/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-48" }),
+					/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-72" })
+				]
+			}) : /* @__PURE__ */ jsx(TunnelSettings, { tunnel: state.view.settings.tunnel }),
+			/* @__PURE__ */ jsx(SessionMcpSettings, {})
+		]
+	});
+}
+//#endregion
+export { RemoteControlSettings };
+
+//# sourceMappingURL=RemoteControlSettings.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RemoteControlSettings.mjs","names":[],"sources":["../../../../src/web/features/settings/RemoteControlSettings.tsx"],"sourcesContent":["import {\n  Button,\n  SettingsCard,\n  SettingsDescription,\n  SettingsHeader,\n  SettingsPage,\n  SettingsRow,\n  SettingsRowDescription,\n  SettingsRowText,\n  SettingsRowTitle,\n  SettingsTitle,\n  Skeleton,\n} from '@agimon-ai/po-web-components';\nimport { useStore } from '@tanstack/react-store';\nimport { useEffect } from 'react';\n\nimport { refreshRemoteState, remoteAccessStore } from '../../stores/remoteAccessStore';\nimport { SessionMcpSettings } from './SessionMcpSettings';\nimport { TunnelSettings } from './TunnelSettings';\n\n/** Persistent tunnel configuration, separate from the dialog that starts and pairs a remote session. */\nexport function RemoteControlSettings() {\n  const state = useStore(remoteAccessStore);\n\n  useEffect(() => {\n    void refreshRemoteState();\n  }, []);\n\n  return (\n    <SettingsPage data-testid=\"remote-control-settings\">\n      <SettingsHeader>\n        <SettingsTitle>Remote control</SettingsTitle>\n        <SettingsDescription>\n          Reach this Po from your phone or another computer. You turn access on and pair devices from the remote access\n          dialog; this page holds what stays the same between visits.\n        </SettingsDescription>\n      </SettingsHeader>\n\n      {state.view === undefined && state.error ? (\n        <SettingsCard>\n          <SettingsRow title={state.error}>\n            <SettingsRowText role=\"alert\">\n              <SettingsRowTitle>Po couldn&apos;t read your remote settings just now</SettingsRowTitle>\n              <SettingsRowDescription>Nothing has changed. Remote access is as you left it.</SettingsRowDescription>\n            </SettingsRowText>\n            <Button variant=\"outline\" size=\"sm\" onClick={() => void refreshRemoteState()}>\n              Try again\n            </Button>\n          </SettingsRow>\n        </SettingsCard>\n      ) : state.view === undefined ? (\n        <SettingsCard role=\"status\" aria-busy className=\"gap-4 p-5\">\n          <span className=\"sr-only\">Reading remote settings</span>\n          <Skeleton className=\"h-4 w-48\" />\n          <Skeleton className=\"h-4 w-72\" />\n        </SettingsCard>\n      ) : (\n        <TunnelSettings tunnel={state.view.settings.tunnel} />\n      )}\n\n      <SessionMcpSettings />\n    </SettingsPage>\n  );\n}\n"],"mappings":";;;;;;;;;AAqBA,SAAgB,wBAAwB;CACtC,MAAM,QAAQ,SAAS,iBAAiB;CAExC,gBAAgB;EACd,mBAAwB;CAC1B,GAAG,CAAC,CAAC;CAEL,OACE,qBAAC,cAAD;EAAc,eAAY;EAA1B,UAAA;GACE,qBAAC,gBAAD,EAAA,UAAA,CACE,oBAAC,eAAD,EAAA,UAAe,iBAA6B,CAAA,GAC5C,oBAAC,qBAAD,EAAA,UAAqB,4KAGA,CAAA,CACP,EAAA,CAAA;GAEf,MAAM,SAAS,KAAA,KAAa,MAAM,QACjC,oBAAC,cAAD,EAAA,UACE,qBAAC,aAAD;IAAa,OAAO,MAAM;IAA1B,UAAA,CACE,qBAAC,iBAAD;KAAiB,MAAK;KAAtB,UAAA,CACE,oBAAC,kBAAD,EAAA,UAAkB,iDAAqE,CAAA,GACvF,oBAAC,wBAAD,EAAA,UAAwB,wDAA6E,CAAA,CACtF;IACjB,CAAA,GAAA,oBAAC,QAAD;KAAQ,SAAQ;KAAU,MAAK;KAAK,eAAe,KAAK,mBAAmB;KAAG,UAAA;IAEtE,CAAA,CACG;GACD,CAAA,EAAA,CAAA,IACZ,MAAM,SAAS,KAAA,IACjB,qBAAC,cAAD;IAAc,MAAK;IAAS,aAAA;IAAU,WAAU;IAAhD,UAAA;KACE,oBAAC,QAAD;MAAM,WAAU;MAAU,UAAA;KAA6B,CAAA;KACvD,oBAAC,UAAD,EAAU,WAAU,WAAY,CAAA;KAChC,oBAAC,UAAD,EAAU,WAAU,WAAY,CAAA;IACpB;GAEd,CAAA,IAAA,oBAAC,gBAAD,EAAgB,QAAQ,MAAM,KAAK,SAAS,OAAS,CAAA;GAGvD,oBAAC,oBAAD,CAAqB,CAAA;EACT;;AAElB"}