@wular/coder 0.4.2 → 0.4.5

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/app/dash/settings/[tab]/credentials-list.3fbc413d972a0447.js

@@ -0,0 +1,538 @@
+"use client";
+import "./credentials-list.3bd27b14c0d60e48.css.pnext-asset.js";
+import { useEffect, useRef, useState } from "../../../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
+import { client, poll } from "../../../../utils/client.f37a313f4811ddb8.js";
+import { iCheck, iCopy, iDots } from "../../../../comps/ui/icons.e17bdd0b5504787f.js";
+import { useRouter } from "../../../../../../../../../node_modules/@wular/pnext/src/api/client-navigation.ts";
+import { Card, Loading } from "../../../../comps/ui/card.e6876039e375b849.js";
+import { reasonText } from "../../../../utils/format.ba382c381ea40e77.js";
+import { ErrorText } from "../../../../comps/ui/field.37f93068217e1470.js";
+import { Badge } from "../../../../comps/ui/badge.e52db98d78836f9a.js";
+import { Icon } from "../../../../comps/ui/icon.93605083edf7efe3.js";
+import { Menu, MenuItem } from "../../../../comps/ui/menu.3b3026ecd4dc31f0.js";
+import { Segmented } from "../../../../comps/ui/segmented.620f07f6b949d7f1.js";
+import { Select } from "../../../../comps/ui/select.14e820c8a26ab8b5.js";
+import { Combo } from "../../../../comps/ui/combo.d478120a76502dd1.js";
+import { useRemove } from "./list.2cafbe93b7b2dc0f.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "../../../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+const ENGINES = [
+	{
+		id: "claude",
+		name: "Claude",
+		key: "ANTHROPIC_API_KEY",
+		hint: "Anthropic API key",
+		signIn: "Claude"
+	},
+	{
+		id: "codex",
+		name: "Codex",
+		key: "OPENAI_API_KEY",
+		hint: "OpenAI API key",
+		signIn: "ChatGPT"
+	},
+	{
+		id: "custom",
+		name: "Custom",
+		key: "OPENAI_API_KEY",
+		hint: "API key"
+	}
+];
+const CUSTOM_KEYS = [
+	"OPENAI_API_KEY",
+	"OPENROUTER_API_KEY",
+	"AI_GATEWAY_API_KEY",
+	"GROQ_API_KEY",
+	"TOGETHER_API_KEY",
+	"ANTHROPIC_API_KEY"
+];
+const SCOPES = [["personal", "Just me"], ["workspace", "Workspace"]];
+const METHODS = {
+	signin: "Sign in",
+	key: "API key",
+	token: "Setup token"
+};
+const ADMIN_ROLES = new Set(["owner", "admin"]);
+function Row({ row, busy, onAct, onSignIn, canManage }) {
+	const subscription = row.label.endsWith("-subscription");
+	const account = [row.account?.email, row.account?.plan].filter(Boolean).join(" · ");
+	const signIn = subscription && onSignIn;
+	const removing = useRemove(canManage ? {
+		label: subscription ? "Sign out" : "Remove",
+		title: subscription ? `Sign out of ${row.label}?` : `Remove ${row.label}?`,
+		body: "Tasks that use it stop running.",
+		onRemove: () => onAct("remove")
+	} : undefined);
+	return /* @__PURE__ */ _jsxs("tr", { children: [/* @__PURE__ */ _jsxs("td", { children: [/* @__PURE__ */ _jsxs("span", {
+		class: "row-title",
+		children: [
+			/* @__PURE__ */ _jsx("b", { children: row.label }),
+			/* @__PURE__ */ _jsx(Badge, { children: row.scope }),
+			row.isDefault ? /* @__PURE__ */ _jsx(Badge, {
+				tone: "acc",
+				children: "default"
+			}) : null
+		]
+	}), /* @__PURE__ */ _jsx("span", {
+		class: "sub mono",
+		children: account ? `${account} · ${row.masked}` : row.masked
+	})] }), /* @__PURE__ */ _jsxs("td", {
+		class: "acts",
+		children: [
+			row.isDefault || !canManage ? null : /* @__PURE__ */ _jsx("button", {
+				type: "button",
+				class: "btn ghost sm",
+				"aria-busy": busy === "default",
+				onClick: () => void onAct("default"),
+				children: "Make default"
+			}),
+			signIn || removing.item ? /* @__PURE__ */ _jsxs(Menu, {
+				summaryClass: "icon-btn",
+				label: "Actions",
+				summary: /* @__PURE__ */ _jsx(Icon, { d: iDots }),
+				children: [signIn ? /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx(MenuItem, {
+					title: "Sign in again",
+					onClick: signIn
+				}), /* @__PURE__ */ _jsx(MenuItem, {
+					title: "Switch account",
+					onClick: signIn
+				})] }) : null, removing.item]
+			}) : null,
+			removing.dialog
+		]
+	})] });
+}
+/** One key field for an engine; Enter saves it. A custom key also names its variable. */
+function KeyField({ engine, token, admin, autoFocus, onSaved }) {
+	const [value, setValue] = useState("");
+	const input = useRef(null);
+	const [name, setName] = useState(engine.key);
+	const [scope, setScope] = useState("personal");
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState("");
+	useEffect(() => {
+		if (autoFocus) input.current?.focus();
+	}, []);
+	const save = () => {
+		if (busy || !value.trim() || !name.trim()) return;
+		setBusy(true);
+		setError("");
+		void client.credentials.add({
+			engine: engine.id,
+			env: { [token ? "CLAUDE_CODE_OAUTH_TOKEN" : name.trim()]: value.trim() },
+			...scope === "workspace" && !token ? { workspace: true } : {}
+		}).then(onSaved).catch((reason) => {
+			setBusy(false);
+			setError(reasonText(reason));
+		});
+	};
+	return /* @__PURE__ */ _jsxs("form", {
+		class: "cred-add",
+		method: "post",
+		onSubmit: (event) => {
+			event.preventDefault();
+			save();
+		},
+		children: [
+			engine.id === "custom" ? /* @__PURE__ */ _jsx(_Fragment, { children: /* @__PURE__ */ _jsx(Combo, {
+				label: "Environment variable",
+				name: "custom-var",
+				class: "mono cred-var",
+				options: CUSTOM_KEYS,
+				placeholder: "OPENAI_API_KEY",
+				value: name,
+				onChange: setName
+			}) }) : null,
+			/* @__PURE__ */ _jsx("input", {
+				type: "password",
+				autocomplete: "off",
+				name: `${engine.id}-${token ? "token" : "key"}`,
+				"aria-label": token ? "Your claude setup-token" : engine.hint,
+				placeholder: token ? "Paste a claude setup-token, then Enter" : `${engine.hint}, then Enter`,
+				ref: input,
+				"aria-busy": busy,
+				value,
+				onInput: (event) => setValue(event.currentTarget.value)
+			}),
+			admin ? /* @__PURE__ */ _jsx(Select, {
+				label: "Who can use this key",
+				options: SCOPES,
+				value: token ? "personal" : scope,
+				onChange: setScope,
+				disabled: token
+			}) : null,
+			/* @__PURE__ */ _jsx(ErrorText, { value: error }),
+			/* @__PURE__ */ _jsx("button", { hidden: true })
+		]
+	});
+}
+/** The sign-in button's label, as wide as its widest state so the button never moves. */
+function SignInLabel({ engine, label }) {
+	const all = [
+		`Sign in with ${engine.signIn}`,
+		`Open ${engine.signIn} sign-in`,
+		"Open sign-in page",
+		"Open again"
+	];
+	return /* @__PURE__ */ _jsx("span", {
+		class: "sign-label",
+		"data-all": all.join("\n"),
+		children: label
+	});
+}
+/** A subscription sign-in: the official login runs on the server, and the page leads through each step. */
+function SignIn({ login, engine, onChange, onDone, onError }) {
+	const [copied, setCopied] = useState(false);
+	const [opened, setOpened] = useState(false);
+	useEffect(() => {
+		if (!login.id || login.state === "done" || login.state === "failed") return;
+		const timer = setTimeout(() => {
+			void client.credentials.loginStatus(login.id).then((next) => {
+				if (next.state === "done") return onDone();
+				if (next.state === "failed") return onError(next.error ?? "Sign-in failed. Try again.");
+				onChange(next);
+			}).catch((reason) => onError(reasonText(reason)));
+		}, 800);
+		return () => clearTimeout(timer);
+	}, [login]);
+	const onCode = (code) => {
+		onChange({
+			...login,
+			state: "verifying"
+		});
+		void client.credentials.loginCode(login.id, code).catch((reason) => onError(reasonText(reason)));
+	};
+	if (!login.url) return /* @__PURE__ */ _jsx("div", {
+		class: "cred-login grow end",
+		role: "status",
+		children: /* @__PURE__ */ _jsx("button", {
+			type: "button",
+			class: "btn",
+			disabled: true,
+			"aria-busy": "true",
+			children: /* @__PURE__ */ _jsx(SignInLabel, {
+				engine,
+				label: `Sign in with ${engine.signIn}`
+			})
+		})
+	});
+	if (login.engine === "codex") return /* @__PURE__ */ _jsxs("div", {
+		class: "cred-login grow end",
+		role: "status",
+		children: [
+			/* @__PURE__ */ _jsx(Loading, {
+				label: "Waiting for approval…",
+				inline: true
+			}),
+			/* @__PURE__ */ _jsxs("span", {
+				class: "code-box",
+				children: [login.code, /* @__PURE__ */ _jsx("button", {
+					type: "button",
+					class: "icon-btn",
+					"aria-label": copied ? "Copied" : "Copy code",
+					title: copied ? "Copied" : "Copy code",
+					onClick: () => void navigator.clipboard.writeText(login.code ?? "").then(() => setCopied(true)),
+					children: /* @__PURE__ */ _jsx(Icon, { d: copied ? iCheck : iCopy })
+				})]
+			}),
+			/* @__PURE__ */ _jsx("a", {
+				class: "btn",
+				href: login.url,
+				target: "_blank",
+				rel: "noopener noreferrer",
+				children: /* @__PURE__ */ _jsx(SignInLabel, {
+					engine,
+					label: "Open sign-in page"
+				})
+			})
+		]
+	});
+	return /* @__PURE__ */ _jsxs("div", {
+		class: "cred-login grow end",
+		role: "status",
+		children: [opened ? /* @__PURE__ */ _jsx("input", {
+			class: "mono",
+			autoFocus: true,
+			autocomplete: "off",
+			"aria-label": `Code from the ${engine.signIn} sign-in page`,
+			placeholder: "Paste the code from the sign-in page",
+			disabled: login.state === "verifying",
+			onPaste: (event) => {
+				const code = event.clipboardData?.getData("text").trim();
+				if (code) {
+					event.preventDefault();
+					onCode(code);
+				}
+			},
+			onKeyDown: (event) => {
+				const code = event.currentTarget.value.trim();
+				if (event.key === "Enter" && code) onCode(code);
+			}
+		}) : null, /* @__PURE__ */ _jsx("a", {
+			class: "btn",
+			href: login.url,
+			target: "_blank",
+			rel: "noopener noreferrer",
+			onClick: () => setOpened(true),
+			children: /* @__PURE__ */ _jsx(SignInLabel, {
+				engine,
+				label: opened ? "Open again" : `Open ${engine.signIn} sign-in`
+			})
+		})]
+	});
+}
+/** A server on this machine: tasks use its own claude and codex logins, so nothing is stored here. */
+export function EngineLogins({ status: initial }) {
+	const [status, setStatus] = useState(initial);
+	const [busy, setBusy] = useState("");
+	const [error, setError] = useState("");
+	const waiting = useRef();
+	// A sign-in finishes in the browser the engine opened; the status says when.
+	const watch = (engine) => {
+		waiting.current?.();
+		const until = Date.now() + 5 * 6e4;
+		// A status read from a sign-in already stopped never stops the next one.
+		let current = true;
+		const stopPoll = poll(async () => {
+			const next = await client.engines.status();
+			if (!current) return;
+			setStatus(next);
+			if (next[engine]?.signedIn || Date.now() > until) {
+				stop();
+				setBusy("");
+			}
+		}, 2e3);
+		const stop = () => {
+			current = false;
+			stopPoll();
+		};
+		waiting.current = stop;
+	};
+	useEffect(() => () => waiting.current?.(), []);
+	const act = (engine, action) => {
+		setBusy(`${engine}:${action}`);
+		setError("");
+		client.engines[action](engine).then((next) => {
+			setStatus(next);
+			if (action === "login") watch(engine);
+			else setBusy("");
+		}).catch((reason) => {
+			setBusy("");
+			setError(reasonText(reason));
+		});
+	};
+	return /* @__PURE__ */ _jsxs(_Fragment, { children: [
+		ENGINES.filter((engine) => engine.id !== "custom").map((engine) => {
+			const own = status[engine.id];
+			const signingIn = busy === `${engine.id}:login`;
+			return /* @__PURE__ */ _jsx(Card, {
+				title: engine.name,
+				children: /* @__PURE__ */ _jsxs("div", {
+					class: "cred-new",
+					children: [
+						own?.signedIn ? /* @__PURE__ */ _jsxs("span", {
+							class: "signed grow",
+							children: [
+								/* @__PURE__ */ _jsx(Icon, { d: iCheck }),
+								"Signed in to ",
+								engine.name
+							]
+						}) : signingIn ? /* @__PURE__ */ _jsxs("span", {
+							class: "grow muted",
+							children: [
+								"Finish signing in in the window ",
+								engine.name,
+								" opened."
+							]
+						}) : /* @__PURE__ */ _jsx("span", {
+							class: "grow muted",
+							children: "Not signed in on this machine."
+						}),
+						own?.signedIn ? /* @__PURE__ */ _jsx("button", {
+							type: "button",
+							class: "btn secondary-danger sm",
+							disabled: busy === `${engine.id}:logout`,
+							onClick: () => act(engine.id, "logout"),
+							children: "Sign out"
+						}) : /* @__PURE__ */ _jsx("button", {
+							type: "button",
+							class: "btn secondary sm",
+							"aria-busy": signingIn,
+							disabled: Boolean(busy),
+							onClick: () => act(engine.id, "login"),
+							children: "Sign in"
+						}),
+						signingIn ? /* @__PURE__ */ _jsx("button", {
+							type: "button",
+							class: "btn ghost sm",
+							onClick: () => {
+								waiting.current?.();
+								setBusy("");
+							},
+							children: "Cancel"
+						}) : null
+					]
+				})
+			}, engine.id);
+		}),
+		/* @__PURE__ */ _jsx(ErrorText, { value: error }),
+		/* @__PURE__ */ _jsx("p", {
+			class: "muted",
+			children: "On the local server, custom models read their key variable from this machine's environment."
+		})
+	] });
+}
+export function CredentialsList({ rows, me, focus, back }) {
+	const nav = useRouter();
+	const [error, setError] = useState("");
+	const [pending, setPending] = useState("");
+	const [adding, setAdding] = useState("");
+	const [logins, setLogins] = useState({});
+	const [chosen, setChosen] = useState({});
+	const token = !me.user;
+	const admin = token || ADMIN_ROLES.has(me.organization?.role ?? "");
+	const subscriptions = me.server?.subscriptions;
+	useEffect(() => setPending(""), [rows]);
+	const setLogin = (engine, login) => setLogins((all) => ({
+		...all,
+		[engine]: login
+	}));
+	const done = (engine) => {
+		if (engine) setLogin(engine);
+		setAdding("");
+		if (back) location.href = back;
+		else nav.refresh();
+	};
+	const signIn = (engine) => {
+		setError("");
+		setLogin(engine, {
+			id: "",
+			engine,
+			state: "starting"
+		});
+		void client.credentials.login(engine).then((next) => setLogin(engine, next)).catch((reason) => {
+			setLogin(engine);
+			setError(reasonText(reason));
+		});
+	};
+	const act = (row, kind) => {
+		if (pending) return Promise.resolve();
+		setPending(`${row.scope}/${row.label}/${kind}`);
+		setError("");
+		return client.credentials[kind === "default" ? "setDefault" : "remove"](row.label, { workspace: row.scope === "workspace" }).then(() => nav.refresh()).catch((reason) => {
+			setPending("");
+			setError(reasonText(reason));
+		});
+	};
+	return /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx(ErrorText, { value: error }), ENGINES.map((engine) => {
+		const own = rows.filter((row) => row.engine === engine.id);
+		const canSignIn = engine.id !== "custom" && !token && Boolean(subscriptions?.[engine.id]);
+		const methods = [
+			...canSignIn ? ["signin"] : [],
+			"key",
+			...engine.id === "claude" && !canSignIn ? ["token"] : []
+		];
+		const how = chosen[engine.id] ?? methods[0];
+		const open = !own.length || adding === engine.id;
+		const active = engine.id === "custom" ? undefined : logins[engine.id];
+		return /* @__PURE__ */ _jsx(Card, {
+			title: engine.name,
+			count: own.length || undefined,
+			actions: active ? /* @__PURE__ */ _jsx("button", {
+				type: "button",
+				class: "btn ghost-danger sm",
+				onClick: () => {
+					setLogin(active.engine);
+					if (active.id) void client.credentials.cancelLogin(active.id).catch(() => {});
+				},
+				children: "Cancel"
+			}) : own.length && adding !== engine.id ? /* @__PURE__ */ _jsx("button", {
+				type: "button",
+				class: "btn ghost sm",
+				onClick: () => setAdding(engine.id),
+				children: "Add"
+			}) : null,
+			children: /* @__PURE__ */ _jsxs("div", {
+				id: `engine-${engine.id}`,
+				class: "cred-engine",
+				children: [
+					engine.id === "custom" ? /* @__PURE__ */ _jsxs("p", {
+						class: "muted cred-note",
+						children: [
+							"Custom keys back ",
+							/* @__PURE__ */ _jsx("a", {
+								href: "/dash/settings/models",
+								children: "custom models"
+							}),
+							". A model uses OPENAI_API_KEY unless it names another variable."
+						]
+					}) : null,
+					own.length ? /* @__PURE__ */ _jsx("table", {
+						class: "rows creds",
+						children: /* @__PURE__ */ _jsx("tbody", { children: own.map((row) => {
+							const key = `${row.scope}/${row.label}/`;
+							return /* @__PURE__ */ _jsx(Row, {
+								row,
+								busy: pending.startsWith(key) ? pending.slice(key.length) : "",
+								canManage: row.scope === "personal" || admin,
+								onAct: (kind) => act(row, kind),
+								...canSignIn && row.scope === "personal" ? { onSignIn: () => signIn(engine.id) } : {}
+							}, key);
+						}) })
+					}) : null,
+					own.length && engine.id !== "custom" ? /* @__PURE__ */ _jsxs("p", {
+						class: "muted cred-note",
+						children: [
+							"Ready. Built-in models run on this key. Add aliases or custom endpoints on",
+							" ",
+							/* @__PURE__ */ _jsx("a", {
+								href: "/dash/settings/models",
+								children: "Models"
+							}),
+							"."
+						]
+					}) : null,
+					open || active ? /* @__PURE__ */ _jsxs("div", {
+						class: "cred-new",
+						children: [methods.length > 1 ? /* @__PURE__ */ _jsx(Segmented, {
+							label: `How to add ${engine.name}`,
+							disabled: Boolean(active),
+							options: methods.map((method) => [method, METHODS[method]]),
+							value: how,
+							onChange: (method) => setChosen({
+								...chosen,
+								[engine.id]: method
+							})
+						}) : null, active ? /* @__PURE__ */ _jsx(SignIn, {
+							login: active,
+							engine,
+							onChange: (next) => setLogin(active.engine, next),
+							onDone: () => done(active.engine),
+							onError: (reason) => {
+								setLogin(active.engine);
+								setError(reason);
+							}
+						}) : how === "signin" ? /* @__PURE__ */ _jsx("div", {
+							class: "cred-login grow end",
+							children: /* @__PURE__ */ _jsx("button", {
+								type: "button",
+								class: "btn",
+								autoFocus: focus === engine.id,
+								onClick: () => signIn(engine.id),
+								children: /* @__PURE__ */ _jsx(SignInLabel, {
+									engine,
+									label: `Sign in with ${engine.signIn}`
+								})
+							})
+						}) : /* @__PURE__ */ _jsx(KeyField, {
+							engine,
+							token: how === "token",
+							admin,
+							autoFocus: focus === engine.id || Boolean(chosen[engine.id]),
+							onSaved: () => done()
+						}, how)]
+					}) : null
+				]
+			})
+		}, engine.id);
+	})] });
+}

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/app/dash/settings/[tab]/credentials.6423846391b20446.js

@@ -0,0 +1,34 @@
+import { dynamic } from "../../../../../../../../../node_modules/@wular/pnext/src/api/dynamic.tsx";
+import { load } from "../../../../api/load.bdbf17006af803d1.js";
+import { Settle } from "../../../../comps/frame/stream.4c04416dab6ffc52.js";
+import { localServer } from "../../../../api/types.0cf02e7714d7c1a2.js";
+import { jsx as _jsx } from "../../../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+// Hydrates as soon as the page does, so its sign-in buttons are live at once.
+const CredentialsList = dynamic(() => import("./credentials-list.3fbc413d972a0447.js").then((m) => m.CredentialsList), undefined, {
+	"file": decodeURIComponent(new URL("../../../../../../../../../../../../src/server/dash/app/dash/settings/[tab]/credentials-list.tsx", import.meta.url).pathname),
+	"exportName": "CredentialsList",
+	"id": "c-e027c11a27"
+});
+const EngineLogins = dynamic(() => import("./credentials-list.3fbc413d972a0447.js").then((m) => m.EngineLogins), undefined, {
+	"file": decodeURIComponent(new URL("../../../../../../../../../../../../src/server/dash/app/dash/settings/[tab]/credentials-list.tsx", import.meta.url).pathname),
+	"exportName": "EngineLogins",
+	"id": "c-c6fa5eeeda"
+});
+/** Same-origin dashboard path to go back to after signing in. */
+const backPath = (value) => value && /^\/(?!\/)/.test(value) ? value : undefined;
+/** The credentials settings tab. */
+export function Credentials({ request }) {
+	const params = new URL(request.url).searchParams;
+	const me = load(request).me();
+	const rows = load(request).credentials.list();
+	return /* @__PURE__ */ _jsx(Settle, { load: async () => {
+		const who = await me;
+		if (localServer(who)) return /* @__PURE__ */ _jsx(EngineLogins, { status: await load(request).engines.status() });
+		return rows.then((list) => /* @__PURE__ */ _jsx(CredentialsList, {
+			rows: list,
+			me: who,
+			focus: params.get("engine") ?? "",
+			back: backPath(params.get("return"))
+		}));
+	} });
+}

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/app/dash/settings/[tab]/engines-list.5bad79f0d4e12e07.js

@@ -0,0 +1,75 @@
+"use client";
+import "./engines-list.39cd71b7dc568516.css.pnext-asset.js";
+import { useState } from "../../../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
+import { Badge } from "../../../../comps/ui/badge.e52db98d78836f9a.js";
+import { MenuItem } from "../../../../comps/ui/menu.3b3026ecd4dc31f0.js";
+import { Select } from "../../../../comps/ui/select.14e820c8a26ab8b5.js";
+import { ENGINES, ENGINE_NAMES, defaultLabel } from "../model-options.2ca6c87aedf3588c.js";
+import { useConfig, List, Row, EFFORTS, PERMISSIONS, AddRow } from "./list.2cafbe93b7b2dc0f.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "../../../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+/** Each engine's defaults, the order tasks try them, and the hosts tasks may reach. */
+export function EnginesList({ first, defaults }) {
+	const [making, setMaking] = useState("");
+	const config = useConfig(first.config);
+	const chain = config.value.chain ?? first.effective.chain ?? ENGINES;
+	const hosts = config.value.approvals?.allowedNetworkHosts ?? [];
+	const rows = [...chain.filter((name) => ENGINES.includes(name)), ...ENGINES.filter((name) => !chain.includes(name))];
+	// What an unset select resolves to: the inherited value, else the built-in default.
+	const resolved = (name, key) => (first.config.engines?.[name]?.[key] ? undefined : first.effective.engines?.[name]?.[key]) ?? defaults[name]?.[key];
+	const pick = (name, key, options) => /* @__PURE__ */ _jsxs("label", { children: [key, /* @__PURE__ */ _jsx(Select, {
+		label: `${ENGINE_NAMES[name]} ${key}`,
+		value: config.value.engines?.[name]?.[key] ?? "",
+		options: [["", defaultLabel(resolved(name, key) ?? (key === "permissions" ? "auto" : undefined))], ...options.map((option) => [option, option])],
+		onChange: (value) => void config.patch({ engines: { [name]: { [key]: value || null } } })
+	})] });
+	return /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx(List, {
+		title: "Engines",
+		count: chain.length,
+		error: config.error,
+		children: rows.map((name) => /* @__PURE__ */ _jsx(Row, {
+			title: ENGINE_NAMES[name],
+			badges: /* @__PURE__ */ _jsxs(_Fragment, { children: [chain[0] === name ? /* @__PURE__ */ _jsx(Badge, {
+				tone: "acc",
+				children: "default"
+			}) : null, chain.includes(name) ? null : /* @__PURE__ */ _jsx(Badge, { children: "off" })] }),
+			sub: /* @__PURE__ */ _jsxs("span", {
+				class: "inline-picks",
+				children: [pick(name, "effort", EFFORTS), pick(name, "permissions", PERMISSIONS)]
+			}),
+			actions: chain[0] === name ? null : /* @__PURE__ */ _jsx("button", {
+				type: "button",
+				class: "btn secondary sm",
+				disabled: making === name,
+				"aria-busy": making === name,
+				onClick: () => {
+					setMaking(name);
+					void config.patch({ chain: [name, ...chain.filter((each) => each !== name)] }).finally(() => setMaking(""));
+				},
+				children: "Make default"
+			}),
+			menu: chain.includes(name) ? chain.length > 1 ? /* @__PURE__ */ _jsx(MenuItem, {
+				title: "Disable",
+				onClick: () => void config.patch({ chain: chain.filter((each) => each !== name) })
+			}) : undefined : /* @__PURE__ */ _jsx(MenuItem, {
+				title: "Enable",
+				onClick: () => void config.patch({ chain: [...chain, name] })
+			})
+		}, name))
+	}), /* @__PURE__ */ _jsx(List, {
+		title: "Allowed network hosts",
+		count: hosts.length,
+		error: "",
+		add: /* @__PURE__ */ _jsx(AddRow, {
+			fields: [["host", "Host, like registry.npmjs.org"]],
+			onAdd: ({ host }) => config.patch({ approvals: { allowedNetworkHosts: [...new Set([...hosts, host])] } })
+		}),
+		children: hosts.map((host) => /* @__PURE__ */ _jsx(Row, {
+			title: host,
+			remove: {
+				title: `Remove ${host}?`,
+				body: "Tasks lose access to it.",
+				onRemove: () => config.patch({ approvals: { allowedNetworkHosts: hosts.filter((each) => each !== host) } })
+			}
+		}, host))
+	})] });
+}