@wular/coder 0.4.7 → 0.4.8

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/app/dash/{settings/[tab]/models-list.052f3ccc66833937.js → [org]/settings/[tab]/models-list.04eb5a47bca3bd09.js}

@@ -1,16 +1,17 @@
 "use client";
-import { client } from "../../../../utils/client.a8205c524e63d4a9.js";
-import { useRef, useState } from "../../../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
-import { Card, Loading } from "../../../../comps/ui/card.b0873d38765c9d20.js";
-import { ErrorText, Field } from "../../../../comps/ui/field.7b2a2075ee8c6e29.js";
-import { Badge } from "../../../../comps/ui/badge.5abdef72e9189fdc.js";
-import { MenuItem } from "../../../../comps/ui/menu.a4dd9fb9f566689a.js";
-import { Select } from "../../../../comps/ui/select.f036fdc3fce02b92.js";
-import { Combo } from "../../../../comps/ui/combo.ca0efacf2ce15578.js";
-import { CUSTOM_PROVIDERS, ENGINES, ENGINE_NAMES, defaultLabel } from "../model-options.bccfaced52fc0c00.js";
-import { reasonText } from "../../../../utils/format.6a7d1beaf4d09d9c.js";
-import { List, Row, useConfig, useSend } from "./list.db2e212e3c8b5d32.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "../../../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+import { client } from "../../../../../utils/client.d25e6dcc6704eb60.js";
+import { useRef, useState } from "../../../../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
+import { FoldCard, Loading } from "../../../../../comps/ui/card.6227f43fc0ae4bd1.js";
+import { Field } from "../../../../../comps/ui/field.75588c33b72824a7.js";
+import { Badge } from "../../../../../comps/ui/badge.3d9163a51e6f6d6e.js";
+import { MenuItem } from "../../../../../comps/ui/menu.0f064f75822888be.js";
+import { Select } from "../../../../../comps/ui/select.7f481669998074f8.js";
+import { Combo } from "../../../../../comps/ui/combo.0572dd5730c94112.js";
+import { CUSTOM_PROVIDERS, ENGINES, ENGINE_NAMES, defaultLabel } from "../model-options.2eacf7f8ac0032df.js";
+import { reasonText } from "../../../../../utils/format.6a7d1beaf4d09d9c.js";
+import { useAction } from "../../../../../utils/action.568346602027ac74.js";
+import { List, Row, useConfig } from "./list.6d6180438e2bd0c8.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "../../../../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
 const PROVIDERS = [
 	["custom", "Custom endpoint"],
 	["claude", "Claude"],
@@ -40,7 +41,7 @@ const slug = (id) => id.split("/").pop().toLowerCase().replace(/[^a-z0-9]+/g, "-
 /** The first example name no model has, for a placeholder. */
 const unused = (names, taken) => names.find((name) => !(name in taken));
 /** A short name for a Claude or Codex model id, or a custom OpenAI-compatible endpoint. Enter adds. */
-function AddModel({ builtin, credentials, admin, taken, efforts, error, onAdd }) {
+function AddModel({ builtin, credentials, admin, taken, efforts, onAdd }) {
 	const [provider, setProvider] = useState("custom");
 	const kind = provider === "custom" ? "custom" : "alias";
 	const engine = /* @__PURE__ */ _jsx(Field, {
@@ -58,9 +59,9 @@ function AddModel({ builtin, credentials, admin, taken, efforts, error, onAdd })
 	const [round, setRound] = useState(0);
 	const known = builtin[provider] ?? {};
 	const example = known[EXAMPLES[provider]] ?? Object.values(known)[0];
-	return /* @__PURE__ */ _jsx(Card, {
+	return /* @__PURE__ */ _jsx(FoldCard, {
 		title: "Add a model",
-		actions: /* @__PURE__ */ _jsx(ErrorText, { value: error }),
+		note: "A short name for an engine model, or an OpenAI-compatible endpoint",
 		children: /* @__PURE__ */ _jsx("form", {
 			class: "add-form",
 			method: "post",
@@ -134,6 +135,7 @@ function AddModel({ builtin, credentials, admin, taken, efforts, error, onAdd })
 					/* @__PURE__ */ _jsx("button", {
 						class: "btn",
 						disabled: busy,
+						"aria-busy": busy,
 						children: "Add"
 					})
 				]
@@ -316,6 +318,7 @@ function CustomFields({ engine, credentials, admin, taken, busy }) {
 			}), /* @__PURE__ */ _jsx("button", {
 				class: "btn",
 				disabled: busy,
+				"aria-busy": busy,
 				children: "Add model"
 			})]
 		})
@@ -323,21 +326,25 @@ function CustomFields({ engine, credentials, admin, taken, busy }) {
 }
 /** Each engine's models, what each points to, and its default; the default engine's default runs new tasks. */
 export function ModelsList({ first, config, credentials, admin }) {
-	const models = useSend(first);
+	const [models, setModels] = useState(first);
+	const action = useAction();
 	const settings = useConfig(config.config);
-	const refresh = (answer) => ({
-		...models.value,
-		models: answer.models ?? {}
+	const send = (act) => action.run("send", async () => {
+		const answer = await act();
+		setModels((now) => ({
+			...now,
+			models: answer.models ?? {}
+		}));
 	});
 	const defaultOf = (engine) => settings.value.engines?.[engine]?.model ?? config.effective.engines?.[engine]?.model;
-	const off = (name) => models.value.models[name]?.disabled === true;
+	const off = (name) => models.models[name]?.disabled === true;
 	const chain = settings.value.chain ?? config.effective.chain ?? ENGINES;
-	const own = Object.entries(models.value.models).filter(([, entry]) => entry.provider || entry.baseUrl);
-	const shown = [...Object.entries(models.value.builtin).flatMap(([engine, names]) => Object.entries(names).filter(([name]) => !own.some(([alias]) => alias === name)).map(([name, id]) => ({
+	const own = Object.entries(models.models).filter(([, entry]) => entry.provider || entry.baseUrl);
+	const shown = [...Object.entries(models.builtin).flatMap(([engine, names]) => Object.entries(names).filter(([name]) => !own.some(([alias]) => alias === name)).map(([name, id]) => ({
 		name,
 		engine,
 		target: id,
-		entry: models.value.models[name],
+		entry: models.models[name],
 		removable: false
 	}))), ...own.map(([name, entry]) => ({
 		name,
@@ -348,20 +355,18 @@ export function ModelsList({ first, config, credentials, admin }) {
 	}))];
 	const groups = [...new Set([...chain, ...ENGINES])].map((engine) => [engine, shown.filter((model) => model.engine === engine)]).filter(([, list]) => list.length);
 	return /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx(AddModel, {
-		builtin: models.value.builtin,
+		builtin: models.builtin,
 		credentials,
 		admin,
 		taken: {
-			...models.value.models,
-			...Object.assign({}, ...Object.values(models.value.builtin))
+			...models.models,
+			...Object.assign({}, ...Object.values(models.builtin))
 		},
 		efforts: Object.fromEntries(ENGINES.map((engine) => [engine, settings.value.engines?.[engine]?.effort ?? config.effective.engines?.[engine]?.effort])),
-		error: models.error,
-		onAdd: (act) => models.send(act, refresh)
-	}), groups.map(([engine, list], index) => /* @__PURE__ */ _jsx(List, {
+		onAdd: send
+	}), groups.map(([engine, list]) => /* @__PURE__ */ _jsx(List, {
 		title: ENGINE_NAMES[engine] ?? engine,
 		count: list.length,
-		error: index ? "" : settings.error,
 		children: list.map(({ name, target, entry, removable }) => {
 			const isDefault = [name, target].includes(defaultOf(engine) ?? "");
 			return /* @__PURE__ */ _jsx(Row, {
@@ -383,12 +388,12 @@ export function ModelsList({ first, config, credentials, admin }) {
 				}),
 				menu: /* @__PURE__ */ _jsx(MenuItem, {
 					title: off(name) ? "Enable" : "Disable",
-					onClick: () => void models.send(() => client.models[off(name) ? "enable" : "disable"](name), refresh)
+					onClick: () => void send(() => client.models[off(name) ? "enable" : "disable"](name))
 				}),
 				remove: removable ? {
 					title: `Remove ${name}?`,
 					body: "Tasks that ask for it stop running.",
-					onRemove: () => models.send(() => client.models.remove(name), refresh)
+					onRemove: () => send(() => client.models.remove(name))
 				} : undefined
 			}, name);
 		})

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/app/dash/[org]/settings/[tab]/page.dd00f57d398be882.js

@@ -0,0 +1,133 @@
+import "./runners-list.a835c9a264cf8903.css.pnext-asset.js";
+import "./connections-list.f742847e4887f072.css.pnext-asset.js";
+import "./engines-list.9927d602ebe9e7fc.css.pnext-asset.js";
+import "./credentials-list.1236d6680ec02696.css.pnext-asset.js";
+import "./list.e0ce46919b75ef76.css.pnext-asset.js";
+import "./@/app/dash/[org]/setup/outcome.3ad5f7ec67e5238d.css.pnext-asset.js";
+import { dynamic } from "../../../../../../../../../../node_modules/@wular/pnext/src/api/dynamic.tsx";
+import { notFound } from "../../../../../../../../../../node_modules/@wular/pnext/src/api/navigation.ts";
+import { DEFAULT_CONFIG } from "../../../../../../../core/defaults.e6ce0944639198a2.js";
+import { load } from "../../../../../api/load.4f942c7f68b2e273.js";
+import { Settle, Stream } from "../../../../../comps/frame/stream.2fea238dc4f4f9a4.js";
+import { Loading } from "../../../../../comps/ui/card.6227f43fc0ae4bd1.js";
+import { SETTINGS } from "../settings-head.a14b9796a8af62dc.js";
+import { localServer } from "../../../../../api/types.9f59e6c761d6aac4.js";
+import { outcomeName, outcomeText, outcomeTitle, readOutcome, succeeded } from "../../setup/outcome.cbbc8cd1bbbee01b.js";
+import { Credentials } from "./credentials.c1a312e6ec58db83.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "../../../../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+const ADMIN_ROLES = new Set(["owner", "admin"]);
+/** What a connection's sign-in says when it comes back with `outcome`. */
+const SIGN_IN_FAILED = "The sign-in did not finish. Try Reconnect.";
+const SIGN_IN = {
+	connected: "Signed in. New tasks can use the connection.",
+	denied: "The sign-in was declined, so nothing changed.",
+	failed: SIGN_IN_FAILED,
+	"invalid-state": "This sign-in link expired or was already used. Try Reconnect."
+};
+const ModelsList = dynamic(() => import("./models-list.04eb5a47bca3bd09.js").then((m) => m.ModelsList), undefined, {
+	"file": decodeURIComponent(new URL("../../../../../../../../../../../../../src/server/dash/app/dash/[org]/settings/[tab]/models-list.tsx", import.meta.url).pathname),
+	"exportName": "ModelsList",
+	"id": "c-4e3afd9170"
+});
+const ConnectionsList = dynamic(() => import("./connections-list.544315916300ed07.js").then((m) => m.ConnectionsList), undefined, {
+	"file": decodeURIComponent(new URL("../../../../../../../../../../../../../src/server/dash/app/dash/[org]/settings/[tab]/connections-list.tsx", import.meta.url).pathname),
+	"exportName": "ConnectionsList",
+	"id": "c-91b1d58ca3"
+});
+const OutcomeDialog = dynamic(() => import("../../setup/outcome-dialog.d730e0bfbe0cf2f8.js").then((m) => m.OutcomeDialog), undefined, {
+	"file": decodeURIComponent(new URL("../../../../../../../../../../../../../src/server/dash/app/dash/[org]/setup/outcome-dialog.tsx", import.meta.url).pathname),
+	"exportName": "OutcomeDialog",
+	"id": "c-f677dcd4b7"
+});
+const EnginesList = dynamic(() => import("./engines-list.75dc69caed34ff8f.js").then((m) => m.EnginesList), undefined, {
+	"file": decodeURIComponent(new URL("../../../../../../../../../../../../../src/server/dash/app/dash/[org]/settings/[tab]/engines-list.tsx", import.meta.url).pathname),
+	"exportName": "EnginesList",
+	"id": "c-6ab193b131"
+});
+const RunnersList = dynamic(() => import("./runners-list.e644287ae91ea8c3.js").then((m) => m.RunnersList), undefined, {
+	"file": decodeURIComponent(new URL("../../../../../../../../../../../../../src/server/dash/app/dash/[org]/settings/[tab]/runners-list.tsx", import.meta.url).pathname),
+	"exportName": "RunnersList",
+	"id": "c-729fd0c984"
+});
+/** One settings tab. */
+export default async function SettingsTabPage({ request, params }) {
+	if (!request) return null;
+	const { tab } = await params;
+	if (!SETTINGS.some((item) => item.tab === tab)) notFound();
+	if (tab === "credentials") return /* @__PURE__ */ _jsx(Credentials, { request });
+	if (tab === "models") {
+		const models = load(request).models.list();
+		const config = load(request).config.get();
+		const me = load(request).me();
+		const credentials = load(request).credentials.list();
+		return /* @__PURE__ */ _jsx(Settle, { load: async () => {
+			const [list, shape, who] = await Promise.all([
+				models,
+				config,
+				me
+			]);
+			const local = localServer(who);
+			return /* @__PURE__ */ _jsx(ModelsList, {
+				first: list,
+				config: shape,
+				credentials: local ? null : await credentials,
+				admin: !who.user || ADMIN_ROLES.has(who.organization?.role ?? "")
+			});
+		} });
+	}
+	if (tab === "connections") {
+		const rows = load(request).connections.list();
+		const catalog = load(request).integrations.list().catch(() => []);
+		const me = load(request).me();
+		const search = new URL(request.url).searchParams;
+		const outcome = readOutcome(search);
+		const signIn = search.get("outcome");
+		return /* @__PURE__ */ _jsx(Settle, { load: async () => {
+			const [first, integrations, who] = await Promise.all([
+				rows,
+				catalog,
+				me
+			]);
+			return /* @__PURE__ */ _jsxs(_Fragment, { children: [
+				outcome ? /* @__PURE__ */ _jsx(OutcomeDialog, {
+					ok: succeeded(outcome),
+					title: outcomeTitle(outcome, outcomeName(outcome, integrations)),
+					text: outcomeText(outcome, outcomeName(outcome, integrations)),
+					issues: who.server?.issuesUrl
+				}) : null,
+				signIn ? /* @__PURE__ */ _jsx(OutcomeDialog, {
+					ok: signIn === "connected",
+					title: signIn === "connected" ? "Signed in" : "Not signed in",
+					text: SIGN_IN[signIn] ?? SIGN_IN_FAILED,
+					issues: who.server?.issuesUrl
+				}) : null,
+				/* @__PURE__ */ _jsx(ConnectionsList, {
+					first,
+					catalog: integrations,
+					local: localServer(who),
+					admin: !who.user || ADMIN_ROLES.has(who.organization?.role ?? ""),
+					operator: who.operator === true
+				})
+			] });
+		} });
+	}
+	if (tab === "engines") {
+		const config = load(request).config.get();
+		return /* @__PURE__ */ _jsx(Settle, { load: () => config.then((first) => /* @__PURE__ */ _jsx(EnginesList, {
+			first,
+			defaults: DEFAULT_CONFIG.engines ?? {}
+		})) });
+	}
+	const runners = load(request).runners.list();
+	const me = load(request).me();
+	return /* @__PURE__ */ _jsx(Stream, {
+		fallback: /* @__PURE__ */ _jsx(Loading, {
+			label: "Loading runners",
+			h: 188
+		}),
+		load: () => Promise.all([runners, me]).then(([first, who]) => /* @__PURE__ */ _jsx(RunnersList, {
+			first,
+			me: who
+		}))
+	});
+}

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/app/dash/{settings/[tab]/runners-list.b5296983ba8007aa.js → [org]/settings/[tab]/runners-list.e644287ae91ea8c3.js}

@@ -1,18 +1,21 @@
 "use client";
-import "./runners-list.0e2d8a76197cde60.css.pnext-asset.js";
-import { useEffect, useRef, useState } from "../../../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
-import { client, poll } from "../../../../utils/client.a8205c524e63d4a9.js";
-import { iCheck, iCopy, iDots, iDown, iGit, iMonitor, iPlug, iPlus, iSpark, iTerminal } from "../../../../comps/ui/icons.1777c0350d5d215e.js";
-import { Card, Loading } from "../../../../comps/ui/card.b0873d38765c9d20.js";
-import { Badge } from "../../../../comps/ui/badge.5abdef72e9189fdc.js";
-import { ErrorText, Field } from "../../../../comps/ui/field.7b2a2075ee8c6e29.js";
-import { Icon } from "../../../../comps/ui/icon.0874ca2f58f7db14.js";
-import { Menu, MenuItem } from "../../../../comps/ui/menu.a4dd9fb9f566689a.js";
-import { Select } from "../../../../comps/ui/select.f036fdc3fce02b92.js";
-import { formatDuration, reasonText } from "../../../../utils/format.6a7d1beaf4d09d9c.js";
-import { sortedRunners } from "../../tasks/composer-data.5f12d8ef1db38026.js";
-import { useRemove } from "./list.db2e212e3c8b5d32.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "../../../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+import "./runners-list.a835c9a264cf8903.css.pnext-asset.js";
+import { useEffect, useRef, useState } from "../../../../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
+import { client } from "../../../../../utils/client.d25e6dcc6704eb60.js";
+import { toastFailure, useAction } from "../../../../../utils/action.568346602027ac74.js";
+import { iCheck, iDots, iDown, iGit, iMonitor, iPlug, iPlus, iSpark, iTerminal } from "../../../../../comps/ui/icons.868385119bf2de28.js";
+import { Card, Loading } from "../../../../../comps/ui/card.6227f43fc0ae4bd1.js";
+import { Badge } from "../../../../../comps/ui/badge.3d9163a51e6f6d6e.js";
+import { CopyLine } from "../../../../../comps/ui/copy.9be99c94423eb1ca.js";
+import { Field } from "../../../../../comps/ui/field.75588c33b72824a7.js";
+import { Icon } from "../../../../../comps/ui/icon.0874ca2f58f7db14.js";
+import { Menu, MenuItem } from "../../../../../comps/ui/menu.0f064f75822888be.js";
+import { Select } from "../../../../../comps/ui/select.7f481669998074f8.js";
+import { formatDuration } from "../../../../../utils/format.6a7d1beaf4d09d9c.js";
+import { sortedRunners } from "../../tasks/composer-data.ff108c0ef82a4d7b.js";
+import { useRunnerEvents } from "../../../../../comps/frame/task-toasts.4282affa47415a36.js";
+import { useRemove } from "./list.6d6180438e2bd0c8.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "../../../../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
 const KIND_ICONS = {
 	local: iMonitor,
 	"local-docker": iTerminal,
@@ -38,7 +41,7 @@ function Status({ runner, tested }) {
 		children: [/* @__PURE__ */ _jsx("i", { class: "dot" }), runner.online ? "Online" : runner.lastSeen ? `Last seen ${ago(runner.lastSeen)}` : "Not seen yet"]
 	});
 }
-function RunnerItem({ runner, manage, onChange, onError }) {
+function RunnerItem({ runner, manage, onChange }) {
 	const [making, setMaking] = useState(false);
 	const [renaming, setRenaming] = useState(false);
 	const [tested, setTested] = useState();
@@ -54,7 +57,7 @@ function RunnerItem({ runner, manage, onChange, onError }) {
 		setTested("testing");
 		client.runners.test(runner.id).then(setTested, (reason) => {
 			setTested(undefined);
-			onError(reasonText(reason));
+			toastFailure(reason);
 		});
 	};
 	return /* @__PURE__ */ _jsxs("tr", { children: [/* @__PURE__ */ _jsxs("td", { children: [/* @__PURE__ */ _jsxs("span", {
@@ -118,21 +121,6 @@ function RunnerItem({ runner, manage, onChange, onError }) {
 		]
 	})] });
 }
-/** One command to copy. */
-function Command({ value }) {
-	const [copied, setCopied] = useState(false);
-	return /* @__PURE__ */ _jsxs("div", {
-		class: "runner-cmd",
-		children: [/* @__PURE__ */ _jsx("code", { children: value }), /* @__PURE__ */ _jsx("button", {
-			type: "button",
-			class: copied ? "icon-btn copied" : "icon-btn",
-			"aria-label": copied ? "Copied" : "Copy command",
-			title: copied ? "Copied" : "Copy command",
-			onClick: () => void navigator.clipboard.writeText(value).then(() => setCopied(true)),
-			children: /* @__PURE__ */ _jsx(Icon, { d: copied ? iCheck : iCopy })
-		})]
-	});
-}
 /** A pairing in progress: what to run on the other computer, step by step, and a wait until it connects. */
 function Pairing({ pairing, onCancel }) {
 	return /* @__PURE__ */ _jsxs("div", {
@@ -140,11 +128,11 @@ function Pairing({ pairing, onCancel }) {
 		children: [
 			/* @__PURE__ */ _jsxs("details", {
 				class: "runner-step",
-				children: [/* @__PURE__ */ _jsx("summary", { children: "Install the Coder CLI on that computer, if it is not there yet" }), /* @__PURE__ */ _jsx(Command, { value: "npm install -g @wular/coder" })]
+				children: [/* @__PURE__ */ _jsx("summary", { children: "Install the Coder CLI on that computer, if it is not there yet" }), /* @__PURE__ */ _jsx(CopyLine, { value: "npm install -g @wular/coder" })]
 			}),
 			/* @__PURE__ */ _jsxs("div", {
 				class: "runner-step",
-				children: [/* @__PURE__ */ _jsx("p", { children: "Run this there. The token works once and expires in 15 minutes." }), /* @__PURE__ */ _jsx(Command, { value: pairing.command })]
+				children: [/* @__PURE__ */ _jsx("p", { children: "Run this there. The token works once and expires in 15 minutes." }), /* @__PURE__ */ _jsx(CopyLine, { value: pairing.command })]
 			}),
 			/* @__PURE__ */ _jsxs("details", {
 				class: "runner-step",
@@ -156,7 +144,7 @@ function Pairing({ pairing, onCancel }) {
 						/* @__PURE__ */ _jsx("code", { children: "--runner-url" }),
 						"."
 					] }),
-					/* @__PURE__ */ _jsx(Command, { value: "cloudflared tunnel --url http://localhost:4100" })
+					/* @__PURE__ */ _jsx(CopyLine, { value: "cloudflared tunnel --url http://localhost:4100" })
 				]
 			}),
 			/* @__PURE__ */ _jsxs("div", {
@@ -177,29 +165,21 @@ function Pairing({ pairing, onCancel }) {
 }
 /** Add a runner: pick a kind, then fill its fields or pair a machine. */
 function AddRunner({ catalog, admin, personal, known, onAdded }) {
-	const [kind, setKind] = useState();
+	const [picked, setKind] = useState();
 	const [scope, setScope] = useState(personal ? "personal" : "workspace");
-	const [busy, setBusy] = useState(false);
-	const [error, setError] = useState("");
-	const [pairing, setPairing] = useState();
+	const action = useAction();
+	const busy = Boolean(action.pending);
+	const [paired, setPairing] = useState();
+	// A paired machine shows up in the list, through the events stream, once it calls home.
+	const [before, setBefore] = useState(known);
+	const joined = Boolean(paired) && known.some((id) => !before.includes(id));
+	const kind = joined ? undefined : picked;
+	const pairing = joined ? undefined : paired;
 	const spec = catalog.find((each) => each.kind === kind);
-	// A paired machine shows up in the list once it calls home.
 	useEffect(() => {
 		if (!pairing) return;
-		const until = Math.min(pairing.expiresAt, Date.now() + 15 * 6e4);
-		// A list read from a pairing already gone never ends the next one.
-		let current = true;
-		const stop = poll(async () => {
-			if (Date.now() > until) return cancel();
-			const rows = await client.runners.list();
-			if (!current || !rows.items.some((row) => !known.includes(row.id))) return;
-			onAdded(rows);
-			cancel();
-		}, 2e3);
-		return () => {
-			current = false;
-			stop();
-		};
+		const timer = setTimeout(cancel, Math.min(pairing.expiresAt - Date.now(), 15 * 6e4));
+		return () => clearTimeout(timer);
 	}, [pairing]);
 	const cancel = () => {
 		setPairing(undefined);
@@ -207,24 +187,18 @@ function AddRunner({ catalog, admin, personal, known, onAdded }) {
 	};
 	// Picking another kind drops a pairing still waiting.
 	const pick = (next) => {
-		setError("");
 		setPairing(undefined);
 		setKind(next.kind);
 		if (next.connect !== "pair") return;
-		setBusy(true);
-		client.runners.pair({ scope }).then(setPairing, (reason) => {
-			setKind(undefined);
-			setError(reasonText(reason));
-		}).finally(() => setBusy(false));
+		setBefore(known);
+		void action.run("pair", async () => setPairing(await client.runners.pair({ scope }))).then((ok) => ok || setKind(undefined));
 	};
 	const add = async (event) => {
 		event.preventDefault();
 		if (!spec || busy) return;
 		const values = Object.fromEntries([...new FormData(event.currentTarget)].map(([key, value]) => [key, String(value).trim()]));
 		const { name, ...config } = values;
-		setBusy(true);
-		setError("");
-		try {
+		await action.run("add", async () => {
 			await client.runners.add({
 				kind: spec.kind,
 				name: name || spec.name,
@@ -233,10 +207,7 @@ function AddRunner({ catalog, admin, personal, known, onAdded }) {
 			});
 			onAdded(await client.runners.list());
 			setKind(undefined);
-		} catch (reason) {
-			setError(reasonText(reason));
-		}
-		setBusy(false);
+		});
 	};
 	return /* @__PURE__ */ _jsxs("form", {
 		class: "runner-add",
@@ -298,36 +269,28 @@ function AddRunner({ catalog, admin, personal, known, onAdded }) {
 				})] }) : null,
 				spec?.connect === "fields" ? /* @__PURE__ */ _jsxs("div", {
 					class: "runner-foot",
-					children: [
-						/* @__PURE__ */ _jsx(ErrorText, { value: error }),
-						personal ? /* @__PURE__ */ _jsx(Select, {
-							label: "Who can use this runner",
-							options: SCOPES,
-							value: admin ? scope : "personal",
-							onChange: setScope,
-							disabled: !admin
-						}) : null,
-						/* @__PURE__ */ _jsx("button", {
-							class: "btn",
-							"aria-busy": busy,
-							disabled: busy,
-							children: "Add runner"
-						})
-					]
-				}) : /* @__PURE__ */ _jsxs(_Fragment, { children: [
-					spec && personal ? /* @__PURE__ */ _jsx(Select, {
+					children: [personal ? /* @__PURE__ */ _jsx(Select, {
 						label: "Who can use this runner",
 						options: SCOPES,
 						value: admin ? scope : "personal",
 						onChange: setScope,
-						disabled: !admin || Boolean(pairing)
-					}) : null,
-					busy && !pairing ? /* @__PURE__ */ _jsx(Loading, {
-						label: "Pairing",
-						inline: true
-					}) : null,
-					/* @__PURE__ */ _jsx(ErrorText, { value: error })
-				] })
+						disabled: !admin
+					}) : null, /* @__PURE__ */ _jsx("button", {
+						class: "btn",
+						"aria-busy": busy,
+						disabled: busy,
+						children: "Add runner"
+					})]
+				}) : /* @__PURE__ */ _jsxs(_Fragment, { children: [spec && personal ? /* @__PURE__ */ _jsx(Select, {
+					label: "Who can use this runner",
+					options: SCOPES,
+					value: admin ? scope : "personal",
+					onChange: setScope,
+					disabled: !admin || Boolean(pairing)
+				}) : null, busy && !pairing ? /* @__PURE__ */ _jsx(Loading, {
+					label: "Pairing",
+					inline: true
+				}) : null] })
 			]
 		}), pairing ? /* @__PURE__ */ _jsx(Pairing, {
 			pairing,
@@ -338,26 +301,20 @@ function AddRunner({ catalog, admin, personal, known, onAdded }) {
 /** Where tasks run: every runner by name, the default first, and how to add one. */
 export function RunnersList({ first, me }) {
 	const [rows, setRows] = useState(first);
-	const [error, setError] = useState("");
+	const action = useAction();
 	const admin = !me.user || ADMIN_ROLES.has(me.organization?.role ?? "");
 	const items = sortedRunners(rows.items);
-	// Online dots stay fresh while the tab is open.
-	useEffect(() => poll(() => client.runners.list().then(setRows), 3e4), []);
-	const change = async (act) => {
-		setError("");
-		try {
-			await act();
-			setRows(await client.runners.list());
-			return true;
-		} catch (reason) {
-			setError(reasonText(reason));
-			return false;
-		}
-	};
+	useRunnerEvents(({ items }) => setRows((current) => ({
+		...current,
+		items
+	})));
+	const change = (act) => action.run("change", async () => {
+		await act();
+		setRows(await client.runners.list());
+	});
 	return /* @__PURE__ */ _jsxs(Card, {
 		title: "Runners",
 		count: items.length,
-		actions: /* @__PURE__ */ _jsx(ErrorText, { value: error }),
 		children: [/* @__PURE__ */ _jsx("div", {
 			class: "table-scroll",
 			children: /* @__PURE__ */ _jsx("table", {
@@ -365,8 +322,7 @@ export function RunnersList({ first, me }) {
 				children: /* @__PURE__ */ _jsx("tbody", { children: items.map((runner) => /* @__PURE__ */ _jsx(RunnerItem, {
 					runner,
 					manage: runner.scope === "personal" || admin,
-					onChange: change,
-					onError: setError
+					onChange: change
 				}, runner.id)) })
 			})
 		}), /* @__PURE__ */ _jsx(AddRunner, {