@wular/coder 0.4.8 → 0.4.10

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/app/dash/[org]/settings/[tab]/credentials-list.87a1f8ab71eb4bed.js

@@ -0,0 +1,486 @@
+"use client";
+import "./credentials-list.f7c27f170ec1e868.css.pnext-asset.js";
+import { useEffect, useRef, useState } from "../../../../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
+import { client, usePoll } from "../../../../../utils/client.189224c16057d7a1.js";
+import { toastFailure, useAction } from "../../../../../utils/action.968bcab0f5e3665d.js";
+import { iCheck } from "../../../../../comps/ui/icons.e36c72f54750663a.js";
+import { useRouter } from "../../../../../../../../../../node_modules/@wular/pnext/src/api/client-navigation.ts";
+import { Card, Loading } from "../../../../../comps/ui/card.9f0d45b73bc78b4f.js";
+import { Modal } from "../../../../../comps/ui/modal.25d53e5b41b9c4e5.js";
+import { reasonText } from "../../../../../utils/format.ceeaafa10a0563f3.js";
+import { Badge } from "../../../../../comps/ui/badge.c0bc352791a95fd6.js";
+import { Button } from "../../../../../comps/ui/button.ce9e6cdb08ca86db.js";
+import { CopyButton } from "../../../../../comps/ui/copy.bd6fc1577a393965.js";
+import { Icon } from "../../../../../comps/ui/icon.0874ca2f58f7db14.js";
+import { MenuItem } from "../../../../../comps/ui/menu-items.1d082ac4dae8f3d4.js";
+import { Select } from "../../../../../comps/ui/select.2eb33e5bea28d804.js";
+import { Combo } from "../../../../../comps/ui/combo.54270c0251466fda.js";
+import { Row, replaceTitle, useReplace } from "./list.0c87d55cf4ef382c.js";
+import { useOrg } from "../../../../../comps/nav/org.572ad93c7707ab27.js";
+import { isAdmin } from "../../../../../api/types.79f9092cdb5a00d1.js";
+import { CUSTOM_PROVIDERS, SCOPES } from "../model-options.a96c11d11674f598.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "../../../../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+const ENGINES = [{
+	id: "claude",
+	name: "Claude",
+	key: "ANTHROPIC_API_KEY",
+	signIn: "Claude"
+}, {
+	id: "codex",
+	name: "Codex",
+	key: "OPENAI_API_KEY",
+	signIn: "ChatGPT"
+}];
+const KEYS = [...ENGINES.map((engine) => engine.key), ...CUSTOM_PROVIDERS.flatMap((provider) => provider.envKey || [])];
+/** One API key by its variable; a variable already saved in that scope asks before it is replaced. */
+function KeyForm({ keys, admin, focus, ask }) {
+	const [name, setName] = useState(ENGINES.find((engine) => engine.id === focus)?.key ?? "OPENAI_API_KEY");
+	const [scope, setScope] = useState(admin ? "workspace" : "personal");
+	const input = useRef(null);
+	const action = useAction({
+		toast: "Not saved",
+		refresh: true
+	});
+	useEffect(() => {
+		if (focus) input.current?.focus();
+	}, []);
+	return /* @__PURE__ */ _jsxs("form", {
+		class: "cred-add",
+		method: "post",
+		onSubmit: (event) => {
+			event.preventDefault();
+			const form = event.currentTarget;
+			const variable = name.trim();
+			const value = String(new FormData(form).get("key") ?? "").trim();
+			if (!variable || !value) return;
+			const save = () => void action.run("add", async () => {
+				await client.credentials.add({
+					env: { [variable]: value },
+					...scope === "workspace" ? { workspace: true } : {}
+				});
+				form.reset();
+				setName("OPENAI_API_KEY");
+			});
+			if (keys.some((row) => row.name === variable && row.scope === scope)) ask(replaceTitle(variable, scope), save);
+			else save();
+		},
+		children: [
+			/* @__PURE__ */ _jsx(Combo, {
+				label: "Variable",
+				name: "name",
+				class: "mono cred-var",
+				options: KEYS,
+				placeholder: "OPENAI_API_KEY",
+				value: name,
+				onChange: setName
+			}),
+			/* @__PURE__ */ _jsx("input", {
+				type: "password",
+				name: "key",
+				autocomplete: "off",
+				"aria-label": "API key",
+				placeholder: "API key",
+				ref: input,
+				"aria-busy": Boolean(action.pending),
+				required: true
+			}),
+			admin ? /* @__PURE__ */ _jsx(Select, {
+				label: "Who can use this key",
+				options: SCOPES,
+				value: scope,
+				onChange: setScope
+			}) : null,
+			/* @__PURE__ */ _jsx(Button, {
+				type: "submit",
+				loading: Boolean(action.pending),
+				children: "Add"
+			})
+		]
+	});
+}
+/** A subscription sign-in, step by step in a dialog: the official login runs on a private machine and the engine's page approves it. */
+function SignIn({ login, engine, onChange, onDone, onError, onCancel }) {
+	const [openedUrl, setOpenedUrl] = useState();
+	// The link a code was pasted for; claude offers a new link when it rejects the code.
+	const [sentUrl, setSentUrl] = useState();
+	usePoll(login.id && login.state !== "done" && login.state !== "failed" ? (signal) => client.credentials.loginStatus(login.id).then((next) => {
+		// A status that lands after Cancel or close belongs to a sign-in already gone.
+		if (signal.aborted) return;
+		if (next.state === "done") return onDone();
+		if (next.state === "failed") return onError(next.error ?? "Sign-in failed. Try again.");
+		// Read before the pasted code landed.
+		if (login.state === "verifying" && next.state === "open" && next.url === sentUrl) return;
+		onChange(next);
+	}).catch((reason) => {
+		if (signal.aborted) return;
+		// A restarting server or a dropped connection only delays the next check.
+		const status = reason.status;
+		if (status === undefined || status >= 500) return console.error("coder dashboard: sign-in status", reason);
+		onError(reasonText(reason));
+	}) : undefined, 800, [login.id]);
+	const onCode = (code) => {
+		setSentUrl(login.url);
+		onChange({
+			...login,
+			state: "verifying"
+		});
+		void client.credentials.loginCode(login.id, code).catch((reason) => onError(reasonText(reason)));
+	};
+	const ready = Boolean(login.url);
+	const verifying = login.state === "verifying";
+	const opened = Boolean(login.url) && openedUrl === login.url;
+	const rejected = Boolean(sentUrl) && login.state === "open" && login.url !== sentUrl;
+	const open = `Open ${engine.signIn} sign-in`;
+	return /* @__PURE__ */ _jsxs(Modal, {
+		class: "sign-in",
+		title: `Sign in with ${engine.signIn}`,
+		cancelDanger: true,
+		focus: "actions",
+		onClose: onCancel,
+		actions: /* @__PURE__ */ _jsx(Button, {
+			href: login.url,
+			external: true,
+			variant: opened ? "outline" : "primary",
+			loading: !ready,
+			autoFocus: true,
+			onClick: () => setOpenedUrl(login.url),
+			children: opened ? "Open again" : open
+		}),
+		children: [/* @__PURE__ */ _jsx("p", {
+			class: "muted",
+			children: "Coder signs in on a private machine and keeps the sign-in for your tasks."
+		}), /* @__PURE__ */ _jsxs("ol", {
+			class: "steps-list sign-steps",
+			role: "status",
+			children: [/* @__PURE__ */ _jsx("li", { children: ready ? "The sign-in machine is ready." : /* @__PURE__ */ _jsx(Loading, {
+				label: "Starting the sign-in machine…",
+				inline: true
+			}) }), login.engine === "codex" ? /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsxs("li", { children: ["Open the sign-in page and enter this code.", login.code ? /* @__PURE__ */ _jsxs("span", {
+				class: "code-box",
+				children: [login.code, /* @__PURE__ */ _jsx(CopyButton, {
+					value: login.code,
+					label: "Copy code"
+				})]
+			}) : null] }), /* @__PURE__ */ _jsx("li", { children: ready ? /* @__PURE__ */ _jsx(Loading, {
+				label: "Waiting for your approval on the sign-in page…",
+				inline: true
+			}) : "Approve it there." })] }) : /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsxs("li", { children: [
+				"Open the ",
+				engine.signIn,
+				" sign-in and approve it."
+			] }), /* @__PURE__ */ _jsxs("li", { children: [
+				rejected ? /* @__PURE__ */ _jsx("span", {
+					class: "rejected",
+					role: "alert",
+					children: "That code did not work. Open the sign-in again and paste the new code."
+				}) : "Paste the code it shows.",
+				/* @__PURE__ */ _jsx("input", {
+					class: "mono",
+					autocomplete: "off",
+					"aria-label": `Code from the ${engine.signIn} sign-in page`,
+					placeholder: "Paste the code from the sign-in page",
+					disabled: login.state !== "open",
+					onPaste: (event) => {
+						const code = event.clipboardData?.getData("text").trim();
+						if (code) {
+							event.preventDefault();
+							event.currentTarget.value = code;
+							onCode(code);
+						}
+					},
+					onKeyDown: (event) => {
+						const code = event.currentTarget.value.trim();
+						if (event.key === "Enter" && code) onCode(code);
+					}
+				}, login.url),
+				verifying ? /* @__PURE__ */ _jsx(Loading, {
+					label: "Checking the code…",
+					inline: true
+				}) : null
+			] })] })]
+		})]
+	});
+}
+/** 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 action = useAction();
+	// A sign-in finishes in the browser the engine opened; the status says when.
+	const [watching, setWatching] = useState();
+	const busy = action.pending ?? (watching ? `${watching.engine}:login` : "");
+	usePoll(watching ? async (signal) => {
+		const next = await client.engines.status();
+		// A status read from a sign-in already stopped never stops the next one.
+		if (signal.aborted) return;
+		setStatus(next);
+		if (next[watching.engine]?.signedIn || Date.now() > watching.until) setWatching(undefined);
+	} : undefined, 2e3, [watching]);
+	const act = (engine, kind) => void action.run(`${engine}:${kind}`, async () => {
+		setStatus(await client.engines[kind](engine));
+		if (kind === "login") setWatching({
+			engine,
+			until: Date.now() + 5 * 6e4
+		});
+	});
+	return /* @__PURE__ */ _jsxs(_Fragment, { children: [ENGINES.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, {
+						variant: "secondary",
+						danger: true,
+						size: "sm",
+						loading: busy === `${engine.id}:logout`,
+						onClick: () => act(engine.id, "logout"),
+						children: "Sign out"
+					}) : /* @__PURE__ */ _jsx(Button, {
+						variant: "secondary",
+						size: "sm",
+						loading: signingIn,
+						disabled: Boolean(busy),
+						onClick: () => act(engine.id, "login"),
+						children: "Sign in"
+					}),
+					signingIn ? /* @__PURE__ */ _jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						onClick: () => setWatching(undefined),
+						children: "Cancel"
+					}) : null
+				]
+			})
+		}, engine.id);
+	}), /* @__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 }) {
+	const nav = useRouter();
+	const org = useOrg();
+	const [logins, setLogins] = useState({});
+	const [pasting, setPasting] = useState(false);
+	const admin = isAdmin(me);
+	const signIns = ENGINES.filter((engine) => me.user && me.server?.subscriptions?.[engine.id]);
+	const keys = rows.filter((row) => !row.subscription);
+	const action = useAction({ refresh: true });
+	const replace = useReplace();
+	// The tab remembers its sign-ins in progress, so a reload picks them back up.
+	const saved = `coder-logins:${org}`;
+	const remembered = () => {
+		try {
+			return JSON.parse(sessionStorage.getItem(saved) ?? "{}");
+		} catch {
+			return {};
+		}
+	};
+	const setLogin = (engine, login) => {
+		setLogins((all) => ({
+			...all,
+			[engine]: login
+		}));
+		try {
+			const ids = {
+				...remembered(),
+				[engine]: login?.id || undefined
+			};
+			sessionStorage.setItem(saved, JSON.stringify(ids));
+		} catch {}
+	};
+	// A sign-in started on this page wins over a restore still in flight.
+	const started = useRef(new Set());
+	useEffect(() => {
+		for (const [engine, id] of Object.entries(remembered())) {
+			void client.credentials.loginStatus(id).then((next) => {
+				if (started.current.has(engine)) return;
+				if (next.state === "done") return done(engine);
+				if (next.state === "failed") {
+					setLogin(engine);
+					return toastFailure(next.error ?? "Sign-in failed. Try again.");
+				}
+				setLogin(engine, next);
+			}).catch(() => {
+				if (!started.current.has(engine)) setLogin(engine);
+			});
+		}
+	}, []);
+	const done = (engine) => {
+		setLogin(engine);
+		nav.refresh();
+	};
+	const signIn = (engine) => {
+		started.current.add(engine);
+		setLogin(engine, {
+			id: "",
+			engine,
+			state: "starting"
+		});
+		void client.credentials.login(engine).then((next) => setLogin(engine, next)).catch((reason) => {
+			setLogin(engine);
+			toastFailure(reason);
+		});
+	};
+	const subscription = (engine) => rows.find((row) => row.subscription && row.name === engine);
+	// One subscription per engine: a new one asks before it replaces the saved one.
+	const replacing = (engine, run) => subscription(engine.id) ? replace.ask(`Replace your ${engine.name} subscription?`, run) : run();
+	const remove = (row) => action.run(`remove:${row.scope}/${row.name}`, () => client.credentials.remove(row.name, { workspace: row.scope === "workspace" }));
+	return /* @__PURE__ */ _jsxs(_Fragment, { children: [
+		signIns.length ? /* @__PURE__ */ _jsx(Card, {
+			title: "Subscriptions",
+			children: /* @__PURE__ */ _jsxs("div", {
+				class: "cred-engine",
+				children: [
+					/* @__PURE__ */ _jsx("p", {
+						class: "muted cred-note",
+						children: "Personal only: a subscription runs your own tasks and your 1:1 DMs with agents, never the workspace's shared threads."
+					}),
+					/* @__PURE__ */ _jsx("table", {
+						class: "rows creds",
+						children: /* @__PURE__ */ _jsx("tbody", { children: signIns.map((engine) => {
+							const row = subscription(engine.id);
+							const active = logins[engine.id];
+							const account = [
+								row?.account?.email,
+								row?.account?.plan,
+								row?.masked
+							];
+							return /* @__PURE__ */ _jsx(Row, {
+								title: engine.name,
+								sub: row ? account.filter(Boolean).join(" · ") : undefined,
+								actions: /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx(Button, {
+									...row ? {
+										variant: "ghost",
+										size: "sm"
+									} : {},
+									autoFocus: focus === engine.id && !row,
+									disabled: Boolean(active),
+									onClick: () => replacing(engine, () => signIn(engine.id)),
+									children: row ? "Sign in again" : `Sign in with ${engine.signIn}`
+								}), active ? /* @__PURE__ */ _jsx(SignIn, {
+									login: active,
+									engine,
+									onChange: (next) => setLogin(active.engine, next),
+									onDone: () => done(active.engine),
+									onError: (reason) => {
+										setLogin(active.engine);
+										toastFailure(reason);
+									},
+									onCancel: () => {
+										setLogin(active.engine);
+										if (active.id) void client.credentials.cancelLogin(active.id).catch(toastFailure);
+									}
+								}) : null] }),
+								alignMenu: true,
+								menu: engine.id === "claude" ? /* @__PURE__ */ _jsx(MenuItem, {
+									title: "Paste a setup token",
+									onClick: () => setPasting(true)
+								}) : undefined,
+								remove: row ? {
+									label: "Sign out",
+									title: `Sign out of ${engine.name}?`,
+									body: "Tasks that use it stop running.",
+									onRemove: () => remove(row)
+								} : undefined
+							}, engine.id);
+						}) })
+					}),
+					pasting ? /* @__PURE__ */ _jsx("div", {
+						class: "cred-new",
+						children: /* @__PURE__ */ _jsxs("form", {
+							class: "cred-add",
+							method: "post",
+							onSubmit: (event) => {
+								event.preventDefault();
+								const token = String(new FormData(event.currentTarget).get("token") ?? "");
+								if (!token.trim()) return;
+								replacing(ENGINES[0], () => void action.run("token", async () => {
+									await client.credentials.add({ env: { CLAUDE_CODE_OAUTH_TOKEN: token.trim() } });
+									setPasting(false);
+								}));
+							},
+							children: [/* @__PURE__ */ _jsx("input", {
+								type: "password",
+								name: "token",
+								autocomplete: "off",
+								"aria-label": "Your claude setup-token",
+								placeholder: "Paste a claude setup-token",
+								ref: (input) => input?.focus(),
+								required: true
+							}), /* @__PURE__ */ _jsx(Button, {
+								type: "submit",
+								loading: action.pending === "token",
+								children: "Add"
+							})]
+						})
+					}) : null
+				]
+			})
+		}) : null,
+		/* @__PURE__ */ _jsx(Card, {
+			title: "API keys",
+			count: keys.length || undefined,
+			children: /* @__PURE__ */ _jsxs("div", {
+				class: "cred-engine",
+				children: [
+					/* @__PURE__ */ _jsxs("p", {
+						class: "muted cred-note",
+						children: [
+							"Tasks read each key as its variable. Claude uses ANTHROPIC_API_KEY, Codex uses OPENAI_API_KEY, and a ",
+							/* @__PURE__ */ _jsx("a", {
+								class: "link",
+								href: `/dash/${org}/settings/models`,
+								children: "custom model"
+							}),
+							" uses the one it names."
+						]
+					}),
+					keys.length ? /* @__PURE__ */ _jsx("table", {
+						class: "rows creds",
+						children: /* @__PURE__ */ _jsx("tbody", { children: keys.map((row) => /* @__PURE__ */ _jsx(Row, {
+							title: row.name,
+							badges: /* @__PURE__ */ _jsx(Badge, { children: row.scope }),
+							sub: row.masked,
+							remove: row.scope === "personal" || admin ? {
+								title: `Remove ${row.name}?`,
+								body: "Tasks that use it stop running.",
+								onRemove: () => remove(row)
+							} : undefined
+						}, `${row.scope}/${row.name}`)) })
+					}) : null,
+					/* @__PURE__ */ _jsx("div", {
+						class: "cred-new",
+						children: /* @__PURE__ */ _jsx(KeyForm, {
+							keys,
+							admin,
+							focus: signIns.some((engine) => engine.id === focus) ? "" : focus,
+							ask: replace.ask
+						})
+					})
+				]
+			})
+		}),
+		replace.dialog
+	] });
+}

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/app/dash/[org]/settings/[tab]/{credentials.c1a312e6ec58db83.js → credentials.a535c9c6dd8b4cdf.js}

@@ -1,25 +1,24 @@
 import { dynamic } from "../../../../../../../../../../node_modules/@wular/pnext/src/api/dynamic.tsx";
-import { load } from "../../../../../api/load.4f942c7f68b2e273.js";
-import { Settle } from "../../../../../comps/frame/stream.2fea238dc4f4f9a4.js";
-import { localServer } from "../../../../../api/types.9f59e6c761d6aac4.js";
+import { load } from "../../../../../api/load.7ae462ef36271be8.js";
+import { Settle } from "../../../../../comps/frame/stream.95a2468086aceb84.js";
+import { isAdmin, localServer } from "../../../../../api/types.79f9092cdb5a00d1.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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.41ce6eb622300bb3.js").then((m) => m.CredentialsList), undefined, {
+const CredentialsList = dynamic(() => import("./credentials-list.87a1f8ab71eb4bed.js").then((m) => m.CredentialsList), undefined, {
 	"file": decodeURIComponent(new URL("../../../../../../../../../../../../../src/server/dash/app/dash/[org]/settings/[tab]/credentials-list.tsx", import.meta.url).pathname),
 	"exportName": "CredentialsList",
-	"id": "c-1583af22cd"
+	"id": "c-59271b1518"
 });
-const EngineLogins = dynamic(() => import("./credentials-list.41ce6eb622300bb3.js").then((m) => m.EngineLogins), undefined, {
+const EngineLogins = dynamic(() => import("./credentials-list.87a1f8ab71eb4bed.js").then((m) => m.EngineLogins), undefined, {
 	"file": decodeURIComponent(new URL("../../../../../../../../../../../../../src/server/dash/app/dash/[org]/settings/[tab]/credentials-list.tsx", import.meta.url).pathname),
 	"exportName": "EngineLogins",
-	"id": "c-5a8d952797"
+	"id": "c-91a3f848b3"
 });
-const TaskSecrets = dynamic(() => import("./secrets-list.35fa72bf3f00d1af.js").then((m) => m.TaskSecrets), undefined, {
+const TaskSecrets = dynamic(() => import("./secrets-list.50f487766f87383c.js").then((m) => m.TaskSecrets), undefined, {
 	"file": decodeURIComponent(new URL("../../../../../../../../../../../../../src/server/dash/app/dash/[org]/settings/[tab]/secrets-list.tsx", import.meta.url).pathname),
 	"exportName": "TaskSecrets",
-	"id": "c-a80f71b0fa"
+	"id": "c-bdd3e21d31"
 });
-const ADMIN_ROLES = new Set(["owner", "admin"]);
 /** The credentials settings tab. */
 export function Credentials({ request }) {
 	const params = new URL(request.url).searchParams;
@@ -32,7 +31,7 @@ export function Credentials({ request }) {
 		const list = /* @__PURE__ */ _jsx(TaskSecrets, {
 			first: env,
 			local,
-			admin: !who.user || ADMIN_ROLES.has(who.organization?.role ?? "")
+			admin: isAdmin(who)
 		});
 		if (local) return /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx(EngineLogins, { status: await load(request).engines.status() }), list] });
 		return rows.then((credentials) => /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx(CredentialsList, {

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/app/dash/[org]/settings/[tab]/{engines-list.75dc69caed34ff8f.js → engines-list.29fffd07c1c3b771.js}

@@ -1,11 +1,12 @@
 "use client";
 import "./engines-list.9927d602ebe9e7fc.css.pnext-asset.js";
 import { useState } from "../../../../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
-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 { ENGINES, ENGINE_NAMES, defaultLabel } from "../model-options.2eacf7f8ac0032df.js";
-import { useConfig, List, Row, EFFORTS, PERMISSIONS, AddRow } from "./list.6d6180438e2bd0c8.js";
+import { Badge } from "../../../../../comps/ui/badge.c0bc352791a95fd6.js";
+import { Button } from "../../../../../comps/ui/button.ce9e6cdb08ca86db.js";
+import { MenuItem } from "../../../../../comps/ui/menu-items.1d082ac4dae8f3d4.js";
+import { Select } from "../../../../../comps/ui/select.2eb33e5bea28d804.js";
+import { EFFORTS, ENGINES, ENGINE_NAMES, PERMISSIONS, defaultLabel } from "../model-options.a96c11d11674f598.js";
+import { useConfig, List, Row, AddRow } from "./list.0c87d55cf4ef382c.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 }) {
@@ -19,7 +20,7 @@ export function EnginesList({ first, defaults }) {
 	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])],
+		options: [["", defaultLabel(resolved(name, key) ?? (key === "permissions" ? "auto" : undefined))], ...options],
 		onChange: (value) => void config.patch({ engines: { [name]: { [key]: value || null } } })
 	})] });
 	return /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx(List, {
@@ -35,11 +36,10 @@ export function EnginesList({ first, defaults }) {
 				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,
+			actions: chain[0] === name ? null : /* @__PURE__ */ _jsx(Button, {
+				variant: "secondary",
+				size: "sm",
+				loading: making === name,
 				onClick: () => {
 					setMaking(name);
 					void config.patch({ chain: [name, ...chain.filter((each) => each !== name)] }).finally(() => setMaking(""));