@wular/coder 0.4.8 → 0.4.9

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/app/dash/[org]/settings/[tab]/{connections-list.544315916300ed07.js → connections-list.9b96914a4fa4e2a9.js}

@@ -2,21 +2,22 @@
 import "./connections-list.f742847e4887f072.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 { toastFailure, useAction } from "../../../../../utils/action.1a6356d5b722cafb.js";
 import { held } from "../../../../../utils/paged.18f5872fc5aebe96.js";
-import { Card, Empty, FoldCard, Loading } from "../../../../../comps/ui/card.6227f43fc0ae4bd1.js";
+import { Card, Empty, FoldCard, Loading } from "../../../../../comps/ui/card.c08471eaa0bc1cec.js";
 import { reasonText } from "../../../../../utils/format.6a7d1beaf4d09d9c.js";
 import { Field } from "../../../../../comps/ui/field.75588c33b72824a7.js";
-import { Badge } from "../../../../../comps/ui/badge.3d9163a51e6f6d6e.js";
+import { Badge } from "../../../../../comps/ui/badge.0851f234f300c694.js";
+import { MenuItem } from "../../../../../comps/ui/menu-items.a8e580a0c90631ff.js";
 import { Icon } from "../../../../../comps/ui/icon.0874ca2f58f7db14.js";
-import { iAlert } from "../../../../../comps/ui/icons.868385119bf2de28.js";
-import { Link } from "../../../../../../../../../../node_modules/@wular/pnext/src/api/link.tsx";
-import { Segmented } from "../../../../../comps/ui/segmented.5ac52bb38fb64ae5.js";
-import { Select } from "../../../../../comps/ui/select.7f481669998074f8.js";
-import { Search } from "../../../../../comps/ui/toolbar.801bbd3163d3fbb0.js";
-import { BrandIcon } from "../../agents/agent/agent-pills.19e913c8cb22db21.js";
-import { Row } from "./list.6d6180438e2bd0c8.js";
-import { useOrg } from "../../../../../comps/nav/org.813dc34bd23a336f.js";
+import { iAlert } from "../../../../../comps/ui/icons.a34176f37808cd66.js";
+import { Button, LinkButton } from "../../../../../comps/ui/button.983daea9e687fc5d.js";
+import { Segmented } from "../../../../../comps/ui/segmented.a08dc08338d080e9.js";
+import { Select } from "../../../../../comps/ui/select.36c6f21ce6aa720f.js";
+import { Search } from "../../../../../comps/ui/toolbar.9621ef221a896a8e.js";
+import { BrandIcon } from "../../agents/agent/agent-pills.d8e785c45f5410a6.js";
+import { Row } from "./list.df5ee5d74bec0f5b.js";
+import { useOrg } from "../../../../../comps/nav/org.4d84ad0ac340fbe2.js";
 import { Notice } from "../../../../../comps/ui/notice.f395f231cbb96445.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "../../../../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
 /** Splits a typed command into words, keeping quoted paths whole. */
@@ -186,8 +187,9 @@ function AddPlatform({ catalog, rows, ...props }) {
 							props.operator ? null : " Ask whoever runs this server to add one."
 						]
 					}),
-					props.operator ? /* @__PURE__ */ _jsx(Link, {
-						class: "btn outline sm",
+					props.operator ? /* @__PURE__ */ _jsx(LinkButton, {
+						variant: "outline",
+						size: "sm",
 						href: "/dash/[org]/operator",
 						params: { org },
 						children: "Set it up"
@@ -199,10 +201,10 @@ function AddPlatform({ catalog, rows, ...props }) {
 				children: [/* @__PURE__ */ _jsx("p", {
 					class: "muted grow",
 					children: !info ? "No platform here offers sign-in yet." : mine && info.connectable ? `Connected as ${mine.account ?? "you"}.` : null
-				}), /* @__PURE__ */ _jsxs("button", {
-					class: "btn",
-					disabled: busy || !info?.connectable,
-					"aria-busy": busy,
+				}), /* @__PURE__ */ _jsxs(Button, {
+					type: "submit",
+					disabled: !info?.connectable,
+					loading: busy,
 					children: [
 						info ? /* @__PURE__ */ _jsx(BrandIcon, { brand: info.brand }) : null,
 						"Sign in to ",
@@ -346,9 +348,9 @@ function AddMcp(props) {
 					children: found.error ? /* @__PURE__ */ _jsxs("div", {
 						class: "registry-note err",
 						role: "alert",
-						children: [/* @__PURE__ */ _jsx("span", { children: found.error }), /* @__PURE__ */ _jsx("button", {
-							type: "button",
-							class: "btn ghost sm",
+						children: [/* @__PURE__ */ _jsx("span", { children: found.error }), /* @__PURE__ */ _jsx(Button, {
+							variant: "ghost",
+							size: "sm",
 							// Keeps focus in the search, so swapping this note for the loader does not close the list.
 							onMouseDown: (event) => event.preventDefault(),
 							onClick: () => run(found.q),
@@ -361,29 +363,24 @@ function AddMcp(props) {
 							inline: true,
 							dots: true
 						})
-					}) : found.items.length ? found.items.map((server) => /* @__PURE__ */ _jsx("button", {
-						type: "button",
-						class: "pop-item rich",
+					}) : found.items.length ? found.items.map((server) => /* @__PURE__ */ _jsx(MenuItem, {
 						onClick: () => pick(server),
-						children: /* @__PURE__ */ _jsxs("span", {
-							class: "grow",
-							children: [
-								/* @__PURE__ */ _jsx("b", { children: server.title }),
-								server.verified ? /* @__PURE__ */ _jsx("span", {
-									title: `The MCP registry checked that the publisher owns ${domainOf(server.name)}`,
-									children: /* @__PURE__ */ _jsxs(Badge, {
-										tone: "ok",
-										children: ["by ", domainOf(server.name)]
-									})
-								}) : null,
-								server.curated ? /* @__PURE__ */ _jsx("span", {
-									title: "In GitHub's reviewed list of MCP servers",
-									children: /* @__PURE__ */ _jsx(Badge, { children: "GitHub list" })
-								}) : null,
-								/* @__PURE__ */ _jsx(Badge, { children: server.type }),
-								/* @__PURE__ */ _jsx("small", { children: server.description || server.name })
-							]
-						})
+						title: /* @__PURE__ */ _jsxs(_Fragment, { children: [
+							/* @__PURE__ */ _jsx("b", { children: server.title }),
+							server.verified ? /* @__PURE__ */ _jsx("span", {
+								title: `The MCP registry checked that the publisher owns ${domainOf(server.name)}`,
+								children: /* @__PURE__ */ _jsxs(Badge, {
+									tone: "ok",
+									children: ["by ", domainOf(server.name)]
+								})
+							}) : null,
+							server.curated ? /* @__PURE__ */ _jsx("span", {
+								title: "In GitHub's reviewed list of MCP servers",
+								children: /* @__PURE__ */ _jsx(Badge, { children: "GitHub list" })
+							}) : null,
+							/* @__PURE__ */ _jsx(Badge, { children: server.type })
+						] }),
+						sub: server.description || server.name
 					}, server.name)) : /* @__PURE__ */ _jsx("p", {
 						class: "registry-note",
 						children: "No known server matches. Paste its URL or command below."
@@ -485,10 +482,10 @@ function AddMcp(props) {
 			}) : null,
 			/* @__PURE__ */ _jsx("div", {
 				class: "add-foot",
-				children: /* @__PURE__ */ _jsx("button", {
-					class: "btn",
-					disabled: busy || blocked,
-					"aria-busy": busy,
+				children: /* @__PURE__ */ _jsx(Button, {
+					type: "submit",
+					disabled: blocked,
+					loading: busy,
 					children: "Add connection"
 				})
 			})
@@ -555,15 +552,13 @@ function NewKey({ row, onSaved, onClose }) {
 				autocomplete: "off",
 				required: true
 			}),
-			/* @__PURE__ */ _jsx("button", {
-				class: "btn",
-				disabled: busy,
-				"aria-busy": busy,
+			/* @__PURE__ */ _jsx(Button, {
+				type: "submit",
+				loading: busy,
 				children: "Save key"
 			}),
-			/* @__PURE__ */ _jsx("button", {
-				type: "button",
-				class: "btn ghost",
+			/* @__PURE__ */ _jsx(Button, {
+				variant: "ghost",
 				disabled: busy,
 				onClick: onClose,
 				children: "Cancel"
@@ -613,11 +608,10 @@ export function ConnectionsList({ first, catalog, local, admin, operator }) {
 						row,
 						catalog
 					}),
-					actions: row.status === "ok" ? null : /* @__PURE__ */ _jsx("button", {
-						type: "button",
-						class: "btn outline sm",
-						disabled: action.pending === row.id,
-						"aria-busy": action.pending === row.id,
+					actions: row.status === "ok" ? null : /* @__PURE__ */ _jsx(Button, {
+						variant: "outline",
+						size: "sm",
+						loading: action.pending === row.id,
 						onClick: () => reconnect(row),
 						children: "Reconnect"
 					}),

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/app/dash/[org]/settings/[tab]/{credentials-list.41ce6eb622300bb3.js → credentials-list.dbaa8f3d82445b90.js}

@@ -1,20 +1,24 @@
 "use client";
-import "./credentials-list.1236d6680ec02696.css.pnext-asset.js";
+import "./credentials-list.98e0b34932a6ee4c.css.pnext-asset.js";
 import { useEffect, useRef, useState } from "../../../../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
 import { client, usePoll } from "../../../../../utils/client.d25e6dcc6704eb60.js";
-import { toastFailure, useAction } from "../../../../../utils/action.568346602027ac74.js";
-import { iCheck, iCopy, iDots } from "../../../../../comps/ui/icons.868385119bf2de28.js";
+import { toastFailure, useAction } from "../../../../../utils/action.1a6356d5b722cafb.js";
+import { iCheck, iDots, iPlus } from "../../../../../comps/ui/icons.a34176f37808cd66.js";
 import { useRouter } from "../../../../../../../../../../node_modules/@wular/pnext/src/api/client-navigation.ts";
-import { Card, Loading } from "../../../../../comps/ui/card.6227f43fc0ae4bd1.js";
+import { Card, Loading } from "../../../../../comps/ui/card.c08471eaa0bc1cec.js";
+import { Modal } from "../../../../../comps/ui/modal.b5f74ebf59590fa6.js";
 import { reasonText } from "../../../../../utils/format.6a7d1beaf4d09d9c.js";
-import { Badge } from "../../../../../comps/ui/badge.3d9163a51e6f6d6e.js";
+import { Badge } from "../../../../../comps/ui/badge.0851f234f300c694.js";
+import { Button, IconButton } from "../../../../../comps/ui/button.983daea9e687fc5d.js";
+import { CopyButton } from "../../../../../comps/ui/copy.0b23d7dc05757df5.js";
 import { Icon } from "../../../../../comps/ui/icon.0874ca2f58f7db14.js";
-import { Menu, MenuItem } from "../../../../../comps/ui/menu.0f064f75822888be.js";
-import { Segmented } from "../../../../../comps/ui/segmented.5ac52bb38fb64ae5.js";
-import { Select } from "../../../../../comps/ui/select.7f481669998074f8.js";
-import { Combo } from "../../../../../comps/ui/combo.0572dd5730c94112.js";
-import { useRemove } from "./list.6d6180438e2bd0c8.js";
-import { useOrg } from "../../../../../comps/nav/org.813dc34bd23a336f.js";
+import { Menu } from "../../../../../comps/ui/menu.a41edd5cde1c90cf.js";
+import { MenuItem } from "../../../../../comps/ui/menu-items.a8e580a0c90631ff.js";
+import { Segmented } from "../../../../../comps/ui/segmented.a08dc08338d080e9.js";
+import { Select } from "../../../../../comps/ui/select.36c6f21ce6aa720f.js";
+import { Combo } from "../../../../../comps/ui/combo.efb84f0cca771948.js";
+import { useRemove } from "./list.df5ee5d74bec0f5b.js";
+import { useOrg } from "../../../../../comps/nav/org.4d84ad0ac340fbe2.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "../../../../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
 const ENGINES = [
 	{
@@ -79,15 +83,15 @@ function Row({ row, busy, onAct, onSignIn, canManage }) {
 	})] }), /* @__PURE__ */ _jsxs("td", {
 		class: "acts",
 		children: [
-			row.isDefault || !canManage ? null : /* @__PURE__ */ _jsx("button", {
-				type: "button",
-				class: "btn ghost sm",
-				"aria-busy": busy === "default",
+			row.isDefault || !canManage ? null : /* @__PURE__ */ _jsx(Button, {
+				variant: "ghost",
+				size: "sm",
+				loading: busy === "default",
 				onClick: () => void onAct("default"),
 				children: "Make default"
 			}),
 			signIn || removing.item ? /* @__PURE__ */ _jsxs(Menu, {
-				summaryClass: "icon-btn",
+				button: "icon",
 				label: "Actions",
 				summary: /* @__PURE__ */ _jsx(Icon, { d: iDots }),
 				children: [signIn ? /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx(MenuItem, {
@@ -163,112 +167,106 @@ function KeyField({ engine, token, admin, autoFocus, onSaved }) {
 		]
 	});
 }
-/** 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);
-	usePoll(login.id && login.state !== "done" && login.state !== "failed" ? () => client.credentials.loginStatus(login.id).then((next) => {
+/** 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) => onError(reasonText(reason))) : undefined, 800, [login.id]);
+	}).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)));
 	};
-	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…",
+	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
-			}),
-			/* @__PURE__ */ _jsxs("span", {
+			}) }), 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("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 })
+				children: [login.code, /* @__PURE__ */ _jsx(CopyButton, {
+					value: login.code,
+					label: "Copy code"
 				})]
-			}),
-			/* @__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`
-			})
+			}) : 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
+			] })] })]
 		})]
 	});
 }
@@ -319,24 +317,24 @@ export function EngineLogins({ status: initial }) {
 						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`,
-						"aria-busy": busy === `${engine.id}:logout`,
+					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", {
-						type: "button",
-						class: "btn secondary sm",
-						"aria-busy": signingIn,
+					}) : /* @__PURE__ */ _jsx(Button, {
+						variant: "secondary",
+						size: "sm",
+						loading: signingIn,
 						disabled: Boolean(busy),
 						onClick: () => act(engine.id, "login"),
 						children: "Sign in"
 					}),
-					signingIn ? /* @__PURE__ */ _jsx("button", {
-						type: "button",
-						class: "btn ghost sm",
+					signingIn ? /* @__PURE__ */ _jsx(Button, {
+						variant: "ghost",
+						size: "sm",
 						onClick: () => setWatching(undefined),
 						children: "Cancel"
 					}) : null
@@ -436,23 +434,19 @@ export function CredentialsList({ rows, me, focus }) {
 		const how = chosen[engine.id] ?? methods[0];
 		const open = !own.length || adding === engine.id;
 		const active = engine.id === "custom" ? undefined : logins[engine.id];
+		const ready = own.length > 0 && engine.id !== "custom";
+		const add = !active && own.length > 0 && adding !== 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,
+			actions: ready || add ? /* @__PURE__ */ _jsxs(_Fragment, { children: [ready ? /* @__PURE__ */ _jsx(Badge, {
+				tone: "ok",
+				children: "ready"
+			}) : null, add ? /* @__PURE__ */ _jsx(IconButton, {
+				icon: iPlus,
+				label: `Add a ${engine.name} credential`,
+				onClick: () => setAdding(engine.id)
+			}) : null] }) : null,
 			children: /* @__PURE__ */ _jsxs("div", {
 				id: `engine-${engine.id}`,
 				class: "cred-engine",
@@ -481,18 +475,6 @@ export function CredentialsList({ rows, me, focus }) {
 							}, 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/${org}/settings/models`,
-								children: "Models"
-							}),
-							"."
-						]
-					}) : null,
 					open || active ? /* @__PURE__ */ _jsxs("div", {
 						class: "cred-new",
 						children: [methods.length > 1 ? /* @__PURE__ */ _jsx(Segmented, {
@@ -504,27 +486,27 @@ export function CredentialsList({ rows, me, focus }) {
 								...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);
-								toastFailure(reason);
-							}
-						}) : how === "signin" ? /* @__PURE__ */ _jsx("div", {
+						}) : null, active || how === "signin" ? /* @__PURE__ */ _jsxs("div", {
 							class: "cred-login grow end",
-							children: /* @__PURE__ */ _jsx("button", {
-								type: "button",
-								class: "btn",
+							children: [/* @__PURE__ */ _jsxs(Button, {
 								autoFocus: focus === engine.id,
+								disabled: Boolean(active),
 								onClick: () => signIn(engine.id),
-								children: /* @__PURE__ */ _jsx(SignInLabel, {
-									engine,
-									label: `Sign in with ${engine.signIn}`
-								})
-							})
+								children: ["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]
 						}) : /* @__PURE__ */ _jsx(KeyField, {
 							engine,
 							token: how === "token",

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

@@ -1,23 +1,23 @@
 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 { Settle } from "../../../../../comps/frame/stream.1cc355a530dcc5e3.js";
 import { localServer } from "../../../../../api/types.9f59e6c761d6aac4.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.dbaa8f3d82445b90.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-9e407065ce"
 });
-const EngineLogins = dynamic(() => import("./credentials-list.41ce6eb622300bb3.js").then((m) => m.EngineLogins), undefined, {
+const EngineLogins = dynamic(() => import("./credentials-list.dbaa8f3d82445b90.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-52d89d4c42"
 });
-const TaskSecrets = dynamic(() => import("./secrets-list.35fa72bf3f00d1af.js").then((m) => m.TaskSecrets), undefined, {
+const TaskSecrets = dynamic(() => import("./secrets-list.b0dedc1567efc09f.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-e1c3846201"
 });
 const ADMIN_ROLES = new Set(["owner", "admin"]);
 /** The credentials settings tab. */

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/app/dash/[org]/settings/[tab]/{engines-list.75dc69caed34ff8f.js → engines-list.5c03e83663a6a9b7.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 { Badge } from "../../../../../comps/ui/badge.0851f234f300c694.js";
+import { Button } from "../../../../../comps/ui/button.983daea9e687fc5d.js";
+import { MenuItem } from "../../../../../comps/ui/menu-items.a8e580a0c90631ff.js";
+import { Select } from "../../../../../comps/ui/select.36c6f21ce6aa720f.js";
 import { ENGINES, ENGINE_NAMES, defaultLabel } from "../model-options.2eacf7f8ac0032df.js";
-import { useConfig, List, Row, EFFORTS, PERMISSIONS, AddRow } from "./list.6d6180438e2bd0c8.js";
+import { useConfig, List, Row, EFFORTS, PERMISSIONS, AddRow } from "./list.df5ee5d74bec0f5b.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 }) {
@@ -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(""));