@wular/coder 0.4.13 → 0.5.0

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/app/dash/[org]/agents/new/{page.880bdac7fe843635.js → page.2b326d00ccef5544.js}

@@ -1,14 +1,14 @@
 import { dynamic } from "../../../../../../../../../../node_modules/@wular/pnext/src/api/dynamic.tsx";
-import { load, loadRunDefaults } from "../../../../../api/load.30ed8c28774a1a82.js";
-import { Page } from "../../../../../comps/frame/page-head.87b92529dbb53ceb.js";
-import { Settle } from "../../../../../comps/frame/stream.c32d78562f75db25.js";
+import { load, loadRunDefaults } from "../../../../../api/load.252f972b42c690e2.js";
+import { Page } from "../../../../../comps/frame/page-head.2eb1e0213eb50349.js";
+import { Settle } from "../../../../../comps/frame/stream.e3800e736f832124.js";
 import { needsTunnel } from "../../../../../api/types.79f9092cdb5a00d1.js";
 import { suggestName } from "../editor/names.1ee5bba8d2b6ac41.js";
 import { jsx as _jsx } from "../../../../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
-const AgentEditor = dynamic(() => import("../editor/editor.471af698b8060eba.js").then((m) => m.AgentEditor), undefined, {
+const AgentEditor = dynamic(() => import("../editor/editor.6548f8f757578f90.js").then((m) => m.AgentEditor), undefined, {
 	"file": decodeURIComponent(new URL("../../../../../../../../../../../../../src/server/dash/app/dash/[org]/agents/editor/editor.tsx", import.meta.url).pathname),
 	"exportName": "AgentEditor",
-	"id": "c-50e54fead0"
+	"id": "c-a1967c140b"
 });
 /** A new agent from a template, or imported from a repository. */
 export default function NewAgentPage({ request }) {
@@ -24,7 +24,7 @@ export default function NewAgentPage({ request }) {
 		run,
 		installations.catch(() => []),
 		me.catch(() => ({}))
-	]).then(([integrations, { models, defaults }, installed, who]) => {
+	]).then(([integrations, { shape, defaults }, installed, who]) => {
 		const reach = integrations.filter((entry) => entry.repositories);
 		const connected = installed.some(({ value }) => !value.deletedAt && reach.some((entry) => entry.id === value.integration));
 		const template = [
@@ -36,13 +36,14 @@ export default function NewAgentPage({ request }) {
 		return /* @__PURE__ */ _jsx(AgentEditor, {
 			catalog: integrations,
 			suggested: suggestName(),
-			models,
+			shape,
 			defaults,
 			template,
 			connected,
 			connectLabel: reach[0]?.installLabel ?? "Connect",
 			tunnel: needsTunnel(who),
-			port: url.port || "8787"
+			port: url.port || "8787",
+			asked: Object.fromEntries(url.searchParams)
 		});
 	}) }) });
 }

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/app/dash/[org]/{layout.81f7e055829854a3.js → layout.45a09107b19f0a7e.js}

@@ -1,23 +1,23 @@
-import "./layout.a4efa8d807fe5416.css.pnext-asset.js";
-import { CoderError } from "../../../../../core/errors.1bd0542d832ae0c0.js";
+import "./layout.52abe52dcfa736d7.css.pnext-asset.js";
+import { CoderError } from "../../../../../core/errors.200335e62a9d9564.js";
 import { redirect } from "../../../../../../../../node_modules/@wular/pnext/src/api/navigation.ts";
 import { AuthPanel } from "../../../comps/frame/auth-panel.5712a8d190b003b4.js";
-import { iActivity, iAgent, iChart, iExternal, iKey, iMonitor, iMoon, iOut, iSliders, iSun, iUpdown, iUser, iUsers } from "../../../comps/ui/icons.e36c72f54750663a.js";
+import { iActivity, iAgent, iChart, iExternal, iKey, iMonitor, iMoon, iOut, iPlug, iPlus, iSliders, iSpark, iSun, iTerminal, iUpdown, iUser, iUsers } from "../../../comps/ui/icons.f769275420d072ce.js";
 import { Link } from "../../../../../../../../node_modules/@wular/pnext/src/api/link.tsx";
-import { load, orgOf, signedOut } from "../../../api/load.30ed8c28774a1a82.js";
+import { load, orgOf, signedOut } from "../../../api/load.252f972b42c690e2.js";
 import { initial } from "../../../utils/format.ceeaafa10a0563f3.js";
 import { Icon, Mark } from "../../../comps/ui/icon.0874ca2f58f7db14.js";
-import { ThemeChoices } from "../../../comps/frame/theme-choices.85100ed66d6f9200.js";
-import { Drawer } from "../../../comps/frame/drawer.d3e61538dbc8ec39.js";
-import { SignOut } from "./account/sign-out.730aa96b086ac996.js";
+import { ThemeChoices } from "../../../comps/frame/theme-choices.fc86071c1b634176.js";
+import { Drawer } from "../../../comps/frame/drawer.1a08ff611df7fe38.js";
+import { SignOut } from "./account/sign-out.713d3ec10951fde5.js";
 import { CurrentLink } from "../../../comps/nav/current-link.727b350a40b9ca13.js";
-import { SideToggle } from "../../../comps/nav/side-toggle.489faf1a259479f7.js";
+import { SideToggle } from "../../../comps/nav/side-toggle.be7d2a7529557435.js";
 import { linkOf } from "../../../comps/nav/to.a2c840c09bd4bf4a.js";
-import { Menu } from "../../../comps/ui/menu.ee45bace979944b6.js";
-import { MenuHead, MenuItem, MenuLabel, MenuLink, MenuNote, MenuRadio } from "../../../comps/ui/menu-items.1d082ac4dae8f3d4.js";
-import { Button } from "../../../comps/ui/button.ce9e6cdb08ca86db.js";
-import { ActiveCount, TaskToasts } from "../../../comps/frame/task-toasts.44075fa7e04575e8.js";
-import { ForeignLink } from "../../../comps/frame/foreign-link.8c6adf9c5a6f467c.js";
+import { Menu } from "../../../comps/ui/menu.7f558c7c6f6345d5.js";
+import { MenuHead, MenuItem, MenuLabel, MenuLink, MenuNote, MenuRadio } from "../../../comps/ui/menu-items.759a1b1f7c5ee365.js";
+import { Button } from "../../../comps/ui/button.b62fa52e18fa338b.js";
+import { ActiveCount, TaskToasts } from "../../../comps/frame/task-toasts.3b7eeee29fc327de.js";
+import { ForeignLink } from "../../../comps/frame/foreign-link.1d4f63a0379cbd1d.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "../../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
 // Four places; the workspace lives in the account menu.
 const nav = (org) => [
@@ -208,6 +208,59 @@ function ServerMenu({ me, host }) {
 		]
 	});
 }
+/** Every create action in one place; each opens its page's own form. */
+function CreateMenu({ org }) {
+	const settings = (tab) => ({
+		href: "/dash/[org]/settings/[tab]",
+		params: {
+			org,
+			tab
+		}
+	});
+	return /* @__PURE__ */ _jsxs(Menu, {
+		class: "create",
+		label: "Create",
+		button: { wide: true },
+		summary: /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx(Icon, { d: iPlus }), "Create"] }),
+		children: [
+			/* @__PURE__ */ _jsx(MenuLink, {
+				href: "/dash/[org]/tasks",
+				params: { org },
+				search: { new: "" },
+				icon: iActivity,
+				children: "New task"
+			}),
+			/* @__PURE__ */ _jsx(MenuLink, {
+				href: "/dash/[org]/agents/new",
+				params: { org },
+				icon: iAgent,
+				children: "New agent"
+			}),
+			/* @__PURE__ */ _jsx(MenuLink, {
+				...settings("connections"),
+				search: { add: "" },
+				icon: iPlug,
+				children: "Add connection"
+			}),
+			/* @__PURE__ */ _jsx(MenuLink, {
+				...settings("models"),
+				search: { add: "" },
+				icon: iSpark,
+				children: "Add model"
+			}),
+			/* @__PURE__ */ _jsx(MenuLink, {
+				...settings("credentials"),
+				icon: iKey,
+				children: "Add credential"
+			}),
+			/* @__PURE__ */ _jsx(MenuLink, {
+				...settings("runners"),
+				icon: iTerminal,
+				children: "Add runner"
+			})
+		]
+	});
+}
 // Without a saved choice, mid-width screens start with the sidebar collapsed, before first paint.
 const SIDE_AUTO = `(() => {
   const app = document.currentScript.parentElement;
@@ -293,7 +346,7 @@ async function Gate({ me, request }) {
 export default function DashLayout({ request, children }) {
 	if (!request) return null;
 	const org = orgOf(request);
-	const { pathname, host, searchParams } = new URL(request.url);
+	const { host, searchParams } = new URL(request.url);
 	const link = searchParams.get("link");
 	const me = load(request).me();
 	const side = /(?:^|; )side=(min|max)(?:;|$)/.exec(request.headers.get("cookie") ?? "")?.[1];
@@ -327,18 +380,28 @@ export default function DashLayout({ request, children }) {
 			}),
 			/* @__PURE__ */ _jsxs("aside", {
 				class: "side",
-				children: [/* @__PURE__ */ _jsx("nav", {
-					"aria-label": "Dashboard",
-					children: navFor(request.headers.get("x-coder-mode") === "local", org).map(({ within, label, icon, ...to }) => /* @__PURE__ */ _jsxs(CurrentLink, {
-						...linkOf(to),
-						within,
-						"data-tip": label,
-						children: [
-							/* @__PURE__ */ _jsx(Icon, { d: icon }),
-							label,
-							label === "Tasks" ? /* @__PURE__ */ _jsx(ActiveCount, {}) : null
-						]
-					}, within))
+				children: [/* @__PURE__ */ _jsxs("div", {
+					class: "side-main",
+					children: [/* @__PURE__ */ _jsx(CreateMenu, { org }), /* @__PURE__ */ _jsx("nav", {
+						"aria-label": "Dashboard",
+						children: navFor(request.headers.get("x-coder-mode") === "local", org).map(({ within, label, icon, ...to }) => /* @__PURE__ */ _jsxs(CurrentLink, {
+							...linkOf(to),
+							within,
+							"data-tip": label,
+							children: [
+								/* @__PURE__ */ _jsx(Icon, { d: icon }),
+								label,
+								label === "Tasks" ? /* @__PURE__ */ _jsx(ActiveCount, {}) : null,
+								label === "Settings" ? /* @__PURE__ */ _jsx(WithMe, {
+									me,
+									children: (who) => who?.reconnect ? /* @__PURE__ */ _jsx("i", {
+										class: "dot",
+										title: "A connection needs reconnecting"
+									}) : null
+								}) : null
+							]
+						}, within))
+					})]
 				}), /* @__PURE__ */ _jsxs("div", {
 					class: "side-foot",
 					children: [/* @__PURE__ */ _jsx(SideToggle, { collapsed: side === "min" }), /* @__PURE__ */ _jsx(WithMe, {

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/app/dash/[org]/operator/operator-apps.f8d679f2d06b0ebc.js

@@ -0,0 +1,155 @@
+"use client";
+import "./@/app/dash/[org]/agents/[slug]/(tabs)/platforms/page.944b02c09bbf6c22.css.pnext-asset.js";
+import { useState } from "../../../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
+import { useRouter, useSearchParams } from "../../../../../../../../../node_modules/@wular/pnext/src/api/client-navigation.ts";
+import { client } from "../../../../utils/client.c8d7efefb6194d7d.js";
+import { toastFailure, useAction } from "../../../../utils/action.f22057e7dfac40fe.js";
+import { ClientError } from "../../../../../../client/index.54c45900f2153d34.js";
+import { showToast } from "../../../../comps/frame/task-toasts.3b7eeee29fc327de.js";
+import { UpdateDialog } from "../agents/[slug]/(tabs)/platforms/platform-actions.c44c7df7841719f2.js";
+import { Badge } from "../../../../comps/ui/badge.9f63fd615cf0ee22.js";
+import { Field } from "../../../../comps/ui/field.75588c33b72824a7.js";
+import { Button } from "../../../../comps/ui/button.b62fa52e18fa338b.js";
+import { iOut } from "../../../../comps/ui/icons.f769275420d072ce.js";
+import { Modal } from "../../../../comps/ui/modal.08ac85d31f4c76c1.js";
+import { List, Row } from "../settings/[tab]/list.e7d6a422f6a869ea.js";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "../../../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+/** The set-up form for one platform's shared app, as a dialog like an agent's Create app. */
+function SetUpDialog({ row, product, unreachable, onClose }) {
+	const [busy, setBusy] = useState(false);
+	const submit = (event) => {
+		event.preventDefault();
+		const form = new FormData(event.currentTarget);
+		const value = (key) => String(form.get(key) ?? "").trim() || undefined;
+		setBusy(true);
+		void client.operator.setUp(row.integration, {
+			name: value("name"),
+			owner: value("owner")
+		}).then(({ url }) => {
+			location.href = url;
+		}).catch((reason) => {
+			// Operator mode ended; the page signs in again.
+			if (reason instanceof ClientError && reason.status === 401) return location.assign(location.pathname);
+			setBusy(false);
+			toastFailure(reason);
+		});
+	};
+	return /* @__PURE__ */ _jsxs(Modal, {
+		class: "create-dialog",
+		title: `Set up shared ${row.name} app`,
+		dismiss: true,
+		busy,
+		onSubmit: submit,
+		onClose,
+		actions: /* @__PURE__ */ _jsxs(Button, {
+			type: "submit",
+			rightIcon: iOut,
+			disabled: unreachable,
+			loading: busy,
+			children: ["Continue on ", row.name]
+		}),
+		children: [
+			unreachable ? /* @__PURE__ */ _jsxs("p", {
+				class: "flash err",
+				children: [
+					row.name,
+					" cannot reach this server yet. Set a public address first: run the server with PUBLIC_URL set to an address ",
+					row.name,
+					" can reach."
+				]
+			}) : null,
+			/* @__PURE__ */ _jsxs("p", {
+				class: "muted",
+				children: [
+					"One app on ",
+					row.name,
+					" serves the built-in agent in every workspace. People see its name on consent screens, as in ",
+					product,
+					" wants to connect."
+				]
+			}),
+			/* @__PURE__ */ _jsx(Field, {
+				label: "App name",
+				children: /* @__PURE__ */ _jsx("input", {
+					name: "name",
+					defaultValue: product,
+					autocomplete: "off",
+					required: true
+				})
+			}),
+			row.organizationApps ? /* @__PURE__ */ _jsx(Field, {
+				label: `${row.name} organization`,
+				hint: "owns the app; leave empty to own it on your personal account",
+				children: /* @__PURE__ */ _jsx("input", {
+					name: "owner",
+					placeholder: "your-org",
+					autocomplete: "off"
+				})
+			}) : null
+		]
+	});
+}
+/** One shared app per platform for the built-in agent in every workspace; Set up opens its create dialog, Update brings it up to date as an agent's Platforms tab does. */
+export function OperatorApps({ first }) {
+	const nav = useRouter();
+	// A Set up shared app link from Connections opens that platform's dialog at once.
+	const asked = useSearchParams().get("setup");
+	const [open, setOpen] = useState(first.platforms.find((row) => row.integration === asked && !row.app));
+	const [updating, setUpdating] = useState();
+	const action = useAction();
+	const update = (row) => void action.run(row.integration, async () => {
+		if (row.appUpdate !== "push") return setUpdating({
+			row,
+			check: await client.operator.drift(row.integration)
+		});
+		await client.operator.update(row.integration);
+		showToast(`${row.name} app updated`, `${row.app.name} now matches the built-in agent.`, "success");
+		nav.refresh();
+	});
+	return /* @__PURE__ */ _jsxs(_Fragment, { children: [
+		/* @__PURE__ */ _jsx(List, {
+			title: "Built-in apps",
+			count: first.platforms.length,
+			children: first.platforms.map((row) => /* @__PURE__ */ _jsx(Row, {
+				title: row.name,
+				badges: row.app?.changed ? /* @__PURE__ */ _jsx(Badge, {
+					tone: "warn",
+					children: "update needed"
+				}) : row.app ? /* @__PURE__ */ _jsx(Badge, {
+					tone: "ok",
+					children: "set up"
+				}) : null,
+				sub: row.app ? row.app.name : "Not set up. Workspaces cannot add the built-in agent here.",
+				actions: !row.app ? /* @__PURE__ */ _jsx(Button, {
+					variant: "secondary",
+					size: "sm",
+					onClick: () => setOpen(row),
+					children: "Set up"
+				}) : row.appUpdate ? /* @__PURE__ */ _jsx(Button, {
+					variant: "secondary",
+					size: "sm",
+					disabled: Boolean(action.pending),
+					loading: action.pending === row.integration,
+					onClick: () => update(row),
+					children: "Update"
+				}) : null
+			}, row.integration))
+		}),
+		updating ? /* @__PURE__ */ _jsx(UpdateDialog, {
+			app: updating.row.app,
+			name: updating.row.name,
+			check: updating.check,
+			confirmed: () => client.operator.update(updating.row.integration),
+			onClose: () => {
+				setUpdating(undefined);
+				nav.refresh();
+			}
+		}) : null,
+		open ? /* @__PURE__ */ _jsx(SetUpDialog, {
+			row: open,
+			product: first.name,
+			unreachable: first.unreachable,
+			onClose: () => setOpen(undefined)
+		}) : null
+	] });
+}

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/app/dash/[org]/operator/{page.8f8697b1b6b34ad7.js → page.5aa3ddc669366703.js}

@@ -1,20 +1,20 @@
 import "./@/app/dash/[org]/settings/[tab]/list.83f35dd8a36acdfd.css.pnext-asset.js";
-import { ClientError } from "../../../../../../client/index.de1f1311bab4252f.js";
+import { ClientError } from "../../../../../../client/index.54c45900f2153d34.js";
 import { dynamic } from "../../../../../../../../../node_modules/@wular/pnext/src/api/dynamic.tsx";
 import { notFound, redirect } from "../../../../../../../../../node_modules/@wular/pnext/src/api/navigation.ts";
-import { load } from "../../../../api/load.30ed8c28774a1a82.js";
-import { Page, PageHead } from "../../../../comps/frame/page-head.87b92529dbb53ceb.js";
-import { Button, LinkButton } from "../../../../comps/ui/button.ce9e6cdb08ca86db.js";
-import { Card, FoldCard } from "../../../../comps/ui/card.9f0d45b73bc78b4f.js";
+import { load } from "../../../../api/load.252f972b42c690e2.js";
+import { Page, PageHead } from "../../../../comps/frame/page-head.2eb1e0213eb50349.js";
+import { Button, LinkButton } from "../../../../comps/ui/button.b62fa52e18fa338b.js";
+import { Card, FoldCard } from "../../../../comps/ui/card.c0030eafd76587e3.js";
 import { formatDate, reasonText, zoneOf } from "../../../../utils/format.ceeaafa10a0563f3.js";
-import { Row } from "../settings/[tab]/list.a5b273558fb7f0f0.js";
-import { outcomeText, outcomeTitle, readOutcome, succeeded } from "../setup/outcome.cbbc8cd1bbbee01b.js";
-import { OperatorApps } from "./operator-apps.09bf294d753ee9d7.js";
+import { Row } from "../settings/[tab]/list.e7d6a422f6a869ea.js";
+import { outcomeText, outcomeTitle, readOutcome, succeeded } from "../setup/outcome.22a83d756e4020a7.js";
+import { OperatorApps } from "./operator-apps.f8d679f2d06b0ebc.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "../../../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
-const OutcomeDialog = dynamic(() => import("../setup/outcome-dialog.18cf32fa42247b91.js").then((m) => m.OutcomeDialog), undefined, {
+const OutcomeDialog = dynamic(() => import("../setup/outcome-dialog.a74e686aaed0c584.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-d6a383147e"
+	"id": "c-b191395787"
 });
 const SIGN_IN_ERRORS = {
 	stale: "That sign-in was not fresh enough. Sign in again.",

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/app/dash/[org]/{page.fe608b8e661aba1d.js → page.5a5188f0fc75dcd2.js}

@@ -1,5 +1,5 @@
 import { redirect } from "../../../../../../../../node_modules/@wular/pnext/src/api/navigation.ts";
-import { load, orgOf } from "../../../api/load.30ed8c28774a1a82.js";
+import { load, orgOf } from "../../../api/load.252f972b42c690e2.js";
 import { localServer } from "../../../api/types.79f9092cdb5a00d1.js";
 /** A local server lands on Tasks, a cloud one on Agents; an account that fails to load is the layout's to handle. */
 export default async function DashboardHome({ request }) {

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/app/dash/[org]/settings/[tab]/advanced-list.73cdadb2968a39d2.js

@@ -0,0 +1,63 @@
+"use client";
+import "./advanced-list.819e410e4178b328.css.pnext-asset.js";
+import { useState } from "../../../../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
+import { Card } from "../../../../../comps/ui/card.c0030eafd76587e3.js";
+import { Icon } from "../../../../../comps/ui/icon.0874ca2f58f7db14.js";
+import { iX } from "../../../../../comps/ui/icons.f769275420d072ce.js";
+import { useConfig } from "./list.e7d6a422f6a869ea.js";
+import { jsx as _jsx, jsxs as _jsxs } from "../../../../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+/** The network every task has: hosts auto tasks reach without review, and whether read-only tasks reach them too. */
+export function AdvancedList({ first, admin }) {
+	const config = useConfig(first.config);
+	const hosts = config.value.network?.allowedHosts ?? [];
+	const [host, setHost] = useState("");
+	const save = (next) => config.patch({ network: { allowedHosts: next } });
+	return /* @__PURE__ */ _jsxs(Card, {
+		look: "filled",
+		title: "Network",
+		children: [
+			/* @__PURE__ */ _jsx("p", {
+				class: "body muted",
+				children: "Hosts tasks reach without review, with their subdomains."
+			}),
+			/* @__PURE__ */ _jsxs("div", {
+				class: "hosts",
+				children: [hosts.map((each) => /* @__PURE__ */ _jsxs("span", {
+					class: "host mono",
+					children: [each, admin ? /* @__PURE__ */ _jsx("button", {
+						type: "button",
+						"aria-label": `Remove ${each}`,
+						onClick: () => void save(hosts.filter((other) => other !== each)),
+						children: /* @__PURE__ */ _jsx(Icon, { d: iX })
+					}) : null]
+				}, each)), admin ? /* @__PURE__ */ _jsx("input", {
+					class: "mono",
+					value: host,
+					onInput: (event) => setHost(event.currentTarget.value),
+					onKeyDown: (event) => {
+						const next = host.trim();
+						if (event.key !== "Enter" || !next) return;
+						event.preventDefault();
+						setHost("");
+						if (!hosts.includes(next)) void save([...hosts, next]);
+					},
+					placeholder: hosts.length ? "Add a host, then Enter" : "registry.npmjs.org, then Enter",
+					"aria-label": "Add a host",
+					autocomplete: "off",
+					spellcheck: false
+				}) : null]
+			}),
+			/* @__PURE__ */ _jsxs("label", {
+				class: "hosts-switch",
+				children: [/* @__PURE__ */ _jsx("input", {
+					type: "checkbox",
+					role: "switch",
+					class: "switch",
+					checked: config.value.network?.readOnlyTasks ?? false,
+					disabled: !admin,
+					onChange: (event) => void config.patch({ network: { readOnlyTasks: event.currentTarget.checked } })
+				}), "Read-only tasks reach these hosts too"]
+			})
+		]
+	});
+}