diff --git a/web/src/lib/action.svelte.ts b/web/src/lib/action.svelte.ts
new file mode 100644
index 00000000..d92b6faa
--- /dev/null
+++ b/web/src/lib/action.svelte.ts
@@ -0,0 +1,75 @@
+type ActionState<T> =
+	| { kind: "idle" }
+	| { kind: "loading" }
+	| { kind: "ready"; value: T }
+	| { kind: "failed"; error: string };
+type Operation<T, Args extends unknown[] = []> = (...args: Args) => Promise<T>;
+
+const defaultError = (cause: unknown) => (cause instanceof Error ? cause.message : String(cause));
+
+const create = <T, Args extends unknown[] = []>(
+	operation: Operation<T, Args>,
+	initial: ActionState<T>,
+	toError: typeof defaultError
+) => {
+	let state = $state<ActionState<T>>(initial);
+	let revision = 0;
+	let args: Args | undefined;
+
+	const run: Operation<void, Args> = async (...nextArgs) => {
+		const currentRevision = ++revision;
+		args = nextArgs;
+		state = { kind: "loading" };
+		try {
+			const value = await operation(...nextArgs);
+			if (currentRevision !== revision) return;
+			args = undefined;
+			state = { kind: "ready", value };
+		} catch (cause) {
+			if (currentRevision !== revision) return;
+			args = undefined;
+			state = { kind: "failed", error: toError(cause) };
+		}
+	};
+
+	return {
+		get data() {
+			return state.kind === "ready" ? state.value : undefined;
+		},
+		get error() {
+			return state.kind === "failed" ? state.error : undefined;
+		},
+		get loading() {
+			return state.kind === "loading";
+		},
+		get args() {
+			return state.kind === "loading" ? args : undefined;
+		},
+		run,
+		update(update: (current: T) => T): boolean {
+			if (state.kind !== "ready") return false;
+			revision++;
+			state = { kind: "ready", value: update(state.value) };
+			return true;
+		}
+	};
+};
+
+// loads run automatically and rerun when reactive values change:
+// const post = createLoad(() => api.getPost(id));
+//
+// actions only run when called:
+// const save = createAction(api.savePost);
+// await save.run(draft);
+//
+// both expose .data, .error, .loading, and .args.
+export const createAction = <T, Args extends unknown[] = []>(
+	operation: Operation<T, Args>,
+	toError: typeof defaultError = defaultError
+) => create(operation, { kind: "idle" }, toError);
+
+export const createLoad = <T>(load: Operation<T>, toError: typeof defaultError = defaultError) => {
+	const action = create(load, { kind: "loading" }, toError);
+	$effect(() => void action.run());
+	return action;
+};
diff --git a/web/src/lib/action.test.ts b/web/src/lib/action.test.ts
new file mode 100644
index 00000000..6ab86daa
--- /dev/null
+++ b/web/src/lib/action.test.ts
@@ -0,0 +1,57 @@
+import { describe, expect, it } from "vitest";
+import { createAction } from "./action.svelte";
+
+describe("createAction", () => {
+	it("derives ergonomic projections from one state", async () => {
+		let resolve!: (value: string) => void;
+		const action = createAction(() => new Promise<string>((done) => (resolve = done)));
+
+		expect(action.loading).toBe(false);
+		expect(action.data).toBeUndefined();
+		expect(action.error).toBeUndefined();
+
+		const running = action.run();
+		expect(action.loading).toBe(true);
+
+		resolve("done");
+		await running;
+		expect(action.data).toBe("done");
+	});
+
+	it("converts failures", async () => {
+		const action = createAction(
+			async () => {
+				throw new Error("nope");
+			},
+			(cause) => (cause instanceof Error ? cause.message : "unknown")
+		);
+
+		await action.run();
+		expect(action.error).toBe("nope");
+	});
+
+	it("ignores an older result after a newer run starts", async () => {
+		const resolvers: Array<(value: string) => void> = [];
+		const names: string[] = [];
+		const action = createAction(
+			(name: string) =>
+				new Promise<string>((resolve) => {
+					names.push(name);
+					resolvers.push(resolve);
+				})
+		);
+		const first = action.run("first");
+		const second = action.run("second");
+		expect(names).toEqual(["first", "second"]);
+		expect(action.args).toEqual(["second"]);
+
+		resolvers[0]("stale");
+		await first;
+		expect(action.loading).toBe(true);
+
+		resolvers[1]("current");
+		await second;
+		expect(action.data).toBe("current");
+		expect(action.args).toBeUndefined();
+	});
+});
diff --git a/web/src/lib/auth.svelte.ts b/web/src/lib/auth.svelte.ts
index 619220a8..cd4d3430 100644
--- a/web/src/lib/auth.svelte.ts
+++ b/web/src/lib/auth.svelte.ts
@@ -66,9 +66,24 @@ export interface CurrentUser {
 	handle: string;
 }
 
+export type AuthState =
+	| { kind: "logged-out" }
+	| { kind: "loading"; did: Did | null; profile: AuthProfile | null }
+	| { kind: "authenticating" }
+	| { kind: "profile-loading"; agent: OAuthUserAgent; did: Did }
+	| { kind: "authenticated"; agent: OAuthUserAgent; profile: AuthProfile }
+	| {
+			kind: "failed";
+			message: string;
+			agent?: OAuthUserAgent;
+			did?: Did;
+			profile?: AuthProfile;
+	  };
+
 export type { AuthAccount } from "./auth/accounts";
 
 export interface Auth {
+	readonly state: AuthState;
 	readonly agent: OAuthUserAgent | null;
 	readonly currentDid: Did | null;
 	readonly profile: AuthProfile | null;
@@ -170,14 +185,16 @@ export const createAuth = (
 	initial?: { did: string; handle: string } | null
 ): Auth => {
 	const seed = initial ?? null;
-	let agent = $state<OAuthUserAgent | null>(null);
 	const bobbinUrlValue = bobbinUrl;
-	let currentDid = $state<Did | null>((seed?.did as Did | undefined) ?? null);
-	let profile = $state<AuthProfile | null>(
-		seed ? { did: seed.did as Did, handle: seed.handle } : null
+	let state = $state<AuthState>(
+		seed
+			? {
+					kind: "loading",
+					did: seed.did as Did,
+					profile: { did: seed.did as Did, handle: seed.handle }
+				}
+			: { kind: "logged-out" }
 	);
-	let error = $state<string | null>(null);
-	let authenticating = $state(false);
 	let accounts = $state<AuthAccount[]>([]);
 
 	// merge atcute's stored sessions with persisted account metadata.
@@ -186,36 +203,52 @@ export const createAuth = (
 		saveAccounts(accounts);
 	};
 
-	const resetLoggedOut = () => {
+	const currentAgent = (): OAuthUserAgent | null =>
+		"agent" in state ? (state.agent ?? null) : null;
+	const currentDid = (): Did | null =>
+		"did" in state
+			? (state.did ?? null)
+			: state.kind === "authenticated"
+				? state.profile.did
+				: null;
+	const currentProfile = (): AuthProfile | null =>
+		"profile" in state ? (state.profile ?? null) : null;
+	const failureState = (message: string): AuthState => ({
+		kind: "failed",
+		message,
+		agent: currentAgent() ?? undefined,
+		did: currentDid() ?? undefined,
+		profile: currentProfile() ?? undefined
+	});
+
+	const resetLoggedOut = (message?: string) => {
 		clearActive();
-		agent = null;
-		currentDid = null;
-		profile = null;
+		state = message ? { kind: "failed", message } : { kind: "logged-out" };
 		syncAccounts();
 	};
 
-	const hydrateProfile = async (did: Did) => {
+	const hydrateProfile = async (did: Did, nextAgent: OAuthUserAgent) => {
 		const resolved = await resolveProfile(did, bobbinUrl);
-		profile = resolved ?? { did, handle: did };
+		if (state.kind !== "profile-loading" || state.agent !== nextAgent) return;
+		const nextProfile = resolved ?? { did, handle: did };
+		state = { kind: "authenticated", agent: nextAgent, profile: nextProfile };
 		const meta = upsertAccount(loadAccounts(), {
 			did,
-			handle: profile.handle,
+			handle: nextProfile.handle,
 			addedAt: Math.floor(Date.now() / 1000)
 		});
 		saveAccounts(meta);
 		accounts = reconcileAccounts(listStoredSessions(), meta);
-		persistActive(did, profile.handle);
+		persistActive(did, nextProfile.handle);
 	};
 
 	const adoptSession = (session: OAuthSession) => {
 		const nextAgent = new OAuthUserAgent(session);
-		agent = nextAgent;
-		error = null;
 		const did = nextAgent.sub as Did;
-		currentDid = did;
+		state = { kind: "profile-loading", agent: nextAgent, did };
 		const known = loadAccounts().find((account) => account.did === did);
 		persistActive(did, known?.handle ?? did);
-		void hydrateProfile(did);
+		void hydrateProfile(did, nextAgent);
 	};
 
 	// prune dead sessions when re-adoption fails.
@@ -227,7 +260,7 @@ export const createAuth = (
 		} catch (cause) {
 			deleteStoredSession(did);
 			saveAccounts(dropAccount(loadAccounts(), did));
-			error = errorMessage(cause);
+			state = failureState(errorMessage(cause));
 			return false;
 		}
 	};
@@ -235,29 +268,33 @@ export const createAuth = (
 	const refresh = async () => {
 		if (!browser) return;
 		configure();
-		error = null;
+		const previousDid = currentDid();
+		const previousProfile = currentProfile();
+		state = { kind: "loading", did: previousDid, profile: previousProfile };
 		syncAccounts();
 
 		const candidates: Did[] = [];
-		for (const candidate of [readActiveDid(), currentDid, ...listStoredSessions()]) {
+		for (const candidate of [readActiveDid(), currentDid(), ...listStoredSessions()]) {
 			if (candidate && !candidates.includes(candidate)) candidates.push(candidate);
 		}
 
+		let lastFailure: string | undefined;
 		for (const candidate of candidates) {
 			if (await activate(candidate)) return;
+			const nextState = state as AuthState;
+			if (nextState.kind === "failed") lastFailure = nextState.message;
 		}
 
-		resetLoggedOut();
+		resetLoggedOut(lastFailure);
 	};
 
 	const signIn = async (identifier: string, returnTo = "/") => {
 		if (!browser) return;
 		configure();
-		error = null;
 
 		const trimmed = identifier.trim();
 		if (!trimmed) {
-			error = "Handle or DID required";
+			state = failureState("Handle or DID required");
 			return;
 		}
 
@@ -282,7 +319,7 @@ export const createAuth = (
 
 			window.location.assign(url.toString());
 		} catch (cause) {
-			error = errorMessage(cause);
+			state = failureState(errorMessage(cause));
 			throw cause;
 		}
 	};
@@ -290,8 +327,7 @@ export const createAuth = (
 	const completeSignIn = async () => {
 		if (!browser) return "/";
 		configure();
-		error = null;
-		authenticating = true;
+		state = { kind: "authenticating" };
 
 		try {
 			const params = new SvelteURLSearchParams(location.hash.slice(1));
@@ -302,27 +338,24 @@ export const createAuth = (
 
 			return returnToFromState(state);
 		} catch (cause) {
-			error = errorMessage(cause);
+			state = failureState(errorMessage(cause));
 			throw cause;
-		} finally {
-			authenticating = false;
 		}
 	};
 
 	const switchAccount = async (did: Did) => {
 		if (!browser) return;
 		configure();
-		error = null;
 		if (!(await activate(did))) syncAccounts();
 	};
 
 	const removeAccount = async (did: Did) => {
 		if (!browser) return;
-		error = null;
-		const wasActive = currentDid === did;
+		const wasActive = currentDid() === did;
 		try {
-			if (wasActive && agent) {
-				await agent.signOut();
+			const activeAgent = currentAgent();
+			if (wasActive && activeAgent) {
+				await activeAgent.signOut();
 			} else {
 				deleteStoredSession(did);
 			}
@@ -344,17 +377,18 @@ export const createAuth = (
 	};
 
 	const signOut = async () => {
-		if (currentDid) {
-			await removeAccount(currentDid);
+		const did = currentDid();
+		if (did) {
+			await removeAccount(did);
 		} else {
 			resetLoggedOut();
 		}
 	};
 
 	const signOutAll = async () => {
-		error = null;
 		try {
-			if (agent) await agent.signOut();
+			const activeAgent = currentAgent();
+			if (activeAgent) await activeAgent.signOut();
 		} catch {
 			// remove local session state below.
 		}
@@ -366,32 +400,40 @@ export const createAuth = (
 	};
 
 	return {
+		get state() {
+			return state;
+		},
 		get agent() {
-			return agent;
+			return currentAgent();
 		},
 		get currentDid() {
-			return currentDid;
+			return currentDid();
 		},
 		get profile() {
-			return profile;
+			return currentProfile();
 		},
 		get bobbinUrl() {
 			return bobbinUrlValue;
 		},
 		get error() {
-			return error;
+			return state.kind === "failed" ? state.message : null;
 		},
 		get profileLoading() {
-			return currentDid !== null && profile === null;
+			return (
+				state.kind === "profile-loading" ||
+				(state.kind === "loading" && state.did !== null && state.profile === null)
+			);
 		},
 		get authenticating() {
-			return authenticating;
+			return state.kind === "authenticating";
 		},
 		get currentUser() {
-			if (!currentDid) return null;
+			const did = currentDid();
+			if (!did) return null;
+			const profile = currentProfile();
 			return {
-				did: currentDid,
-				handle: profile?.handle ?? currentDid
+				did,
+				handle: profile?.handle ?? did
 			};
 		},
 		get accounts() {
diff --git a/web/src/lib/components/comment/CommentCard.svelte b/web/src/lib/components/comment/CommentCard.svelte
index bf6a9b2c..622708c4 100644
--- a/web/src/lib/components/comment/CommentCard.svelte
+++ b/web/src/lib/components/comment/CommentCard.svelte
@@ -17,6 +17,7 @@
 	import CommentBox from "./CommentBox.svelte";
 	import CommentEditor from "./CommentEditor.svelte";
 	import type { CommentThread, CommentView, ThreadInput } from "./comments";
+	import { createAction } from "$lib/action.svelte";
 
 	interface Props {
 		thread: CommentThread;
@@ -36,8 +37,6 @@
 
 	let replying = $state(false);
 	let editingUri = $state<string | null>(null);
-	let deletingUri = $state<string | null>(null);
-	let deleteError = $state<string | null>(null);
 
 	let reactionsByUri = $derived.by(() => {
 		const map: Record<string, ReactionGroup[]> = {};
@@ -75,20 +74,17 @@
 		);
 	};
 
-	const handleDelete = async (comment: CommentView) => {
+	const deleteSelected = createAction(async (comment: CommentView) => {
 		const agent = auth?.agent;
-		if (!agent || deletingUri) return;
+		if (!agent) return;
+		await deleteComment(agent, comment.rkey);
+		ondeleted?.(comment.uri);
+	});
+
+	const handleDelete = (comment: CommentView) => {
+		if (!auth?.agent || deleteSelected.loading) return;
 		if (!confirm("Delete this comment? This cannot be undone.")) return;
-		deletingUri = comment.uri;
-		deleteError = null;
-		try {
-			await deleteComment(agent, comment.rkey);
-			ondeleted?.(comment.uri);
-		} catch (err) {
-			deleteError = err instanceof Error ? err.message : "Failed to delete comment";
-		} finally {
-			deletingUri = null;
-		}
+		void deleteSelected.run(comment);
 	};
 </script>
 
@@ -115,7 +111,7 @@
 				<button
 					type="button"
 					aria-label="Delete comment"
-					disabled={deletingUri === comment.uri}
+					disabled={deleteSelected.loading && deleteSelected.args?.[0].uri === comment.uri}
 					class="cursor-pointer text-foreground-danger hover:text-foreground-danger-strong disabled:opacity-50"
 					onclick={() => handleDelete(comment)}
 				>
@@ -211,9 +207,9 @@
 		</div>
 	{/if}
 
-	{#if deleteError}
+	{#if deleteSelected.error}
 		<div class="border-t border-border-default px-6 py-2">
-			<ErrorAlert label={deleteError} />
+			<ErrorAlert label={deleteSelected.error} />
 		</div>
 	{/if}
 
diff --git a/web/src/lib/components/comment/CommentEditor.svelte b/web/src/lib/components/comment/CommentEditor.svelte
index 9d1d01db..f8a3ae5d 100644
--- a/web/src/lib/components/comment/CommentEditor.svelte
+++ b/web/src/lib/components/comment/CommentEditor.svelte
@@ -11,6 +11,7 @@
 	import Spinner from "$lib/components/ui/Spinner.svelte";
 	import { renderMarkup, type MarkupContext } from "$lib/markup";
 	import type { CommentRecord } from "$lib/api/records";
+	import { createAction } from "$lib/action.svelte";
 	import type { ThreadInput } from "./comments";
 
 	interface Props {
@@ -59,63 +60,49 @@
 
 	let body = $state(untrack(() => initialBody));
 	let tab = $state<"write" | "preview">("write");
-	let isPublishing = $state(false);
-	let error = $state<string | null>(null);
 
-	const canSubmit = $derived(body.trim() !== "" && !isPublishing);
-
-	const handleSubmit = async (e: SubmitEvent) => {
-		e.preventDefault();
+	const publish = createAction(async (event: SubmitEvent) => {
+		event.preventDefault();
 		const agent = auth.agent;
-		if (!agent || !canSubmit) return;
-		if (!subjectCid) {
-			error = "Cannot comment: the subject record is missing a cid.";
-			return;
+		if (!agent || body.trim() === "") return;
+		if (!subjectCid) throw new Error("Cannot comment: the subject record is missing a cid.");
+		const createdAtValue = createdAt ?? new Date().toISOString();
+		const targetRkey = rkey ?? tidNow();
+		const record: CommentRecord = {
+			$type: "sh.tangled.feed.comment",
+			subject: { uri: subjectUri, cid: subjectCid } as CommentRecord["subject"],
+			body: { $type: "sh.tangled.markup.markdown", text: body },
+			createdAt: createdAtValue
+		};
+		if (replyToUri && replyToCid) {
+			record.replyTo = { uri: replyToUri, cid: replyToCid } as CommentRecord["replyTo"];
 		}
-		isPublishing = true;
-		error = null;
-		try {
-			const createdAtValue = createdAt ?? new Date().toISOString();
-			const targetRkey = rkey ?? tidNow();
-			const record: CommentRecord = {
-				$type: "sh.tangled.feed.comment",
-				subject: { uri: subjectUri, cid: subjectCid } as CommentRecord["subject"],
-				body: { $type: "sh.tangled.markup.markdown", text: body },
-				createdAt: createdAtValue
-			};
-			if (replyToUri && replyToCid) {
-				record.replyTo = { uri: replyToUri, cid: replyToCid } as CommentRecord["replyTo"];
-			}
-			const saved = await putComment(agent, targetRkey, record);
-			// render markdown client-side so the optimistic comment matches a real one
-			const bodyHtml = await renderMarkup(body, markup).catch(() => null);
-			onsubmitted?.({
-				comment: {
-					uri: saved.uri,
-					cid: saved.cid,
-					rkey: targetRkey,
-					authorDid,
-					authorHandle,
-					createdAt: createdAtValue,
-					body,
-					bodyHtml
-				},
-				replyTo: replyToUri ?? null
-			});
-			// keep the prefilled body when editing; reset when composing a fresh comment
-			if (!rkey) {
-				body = "";
-				tab = "write";
-			}
-		} catch (err) {
-			error = err instanceof Error ? err.message : "Failed to post comment";
-		} finally {
-			isPublishing = false;
+		const saved = await putComment(agent, targetRkey, record);
+		// render markdown client-side so the optimistic comment matches a real one
+		const bodyHtml = await renderMarkup(body, markup).catch(() => null);
+		onsubmitted?.({
+			comment: {
+				uri: saved.uri,
+				cid: saved.cid,
+				rkey: targetRkey,
+				authorDid,
+				authorHandle,
+				createdAt: createdAtValue,
+				body,
+				bodyHtml
+			},
+			replyTo: replyToUri ?? null
+		});
+		// keep the prefilled body when editing; reset when composing a fresh comment
+		if (!rkey) {
+			body = "";
+			tab = "write";
 		}
-	};
+	});
+	const canSubmit = $derived(body.trim() !== "" && !publish.loading);
 </script>
 
-<form onsubmit={handleSubmit} class="flex flex-col gap-2">
+<form onsubmit={publish.run} class="flex flex-col gap-2">
 	<MarkdownEditor
 		name="body"
 		{rows}
@@ -125,24 +112,28 @@
 		transparent
 		bind:value={body}
 		bind:tab
-		disabled={isPublishing}
+		disabled={publish.loading}
 	/>
 
-	{#if error}
-		<ErrorAlert label={error} />
-	{/if}
+	<ErrorAlert label={publish.error} />
 
 	<div class="flex items-center gap-2">
 		<Button
 			type="submit"
 			variant="primary"
-			icon={isPublishing ? Spinner : submitIcon}
+			icon={publish.loading ? Spinner : submitIcon}
 			disabled={!canSubmit}
 		>
 			{submitLabel}
 		</Button>
 		{#if oncancel}
-			<Button type="button" variant="default" icon={X} disabled={isPublishing} onclick={oncancel}>
+			<Button
+				type="button"
+				variant="default"
+				icon={X}
+				disabled={publish.loading}
+				onclick={oncancel}
+			>
 				Cancel
 			</Button>
 		{/if}
diff --git a/web/src/lib/components/profile/FollowButton.svelte b/web/src/lib/components/profile/FollowButton.svelte
index ca27cef8..be1cd1cc 100644
--- a/web/src/lib/components/profile/FollowButton.svelte
+++ b/web/src/lib/components/profile/FollowButton.svelte
@@ -26,7 +26,6 @@
 		loadedRkey: () => initialRkey
 	});
 
-	let busy = $state(false);
 	const following = $derived(relation.active);
 
 	const commit = (change: FollowChange) => {
@@ -37,9 +36,8 @@
 
 	const toggle = async () => {
 		const agent = auth.agent;
-		if (!agent || busy || !relation.known) return;
-		busy = true;
-		relation.resetFailure();
+		if (!agent || !relation.known || relation.loading) return;
+		relation.begin();
 		try {
 			if (relation.active && relation.rkey) {
 				await deleteFollow(agent, relation.rkey);
@@ -64,8 +62,6 @@
 			}
 		} catch {
 			relation.fail();
-		} finally {
-			busy = false;
 		}
 	};
 </script>
@@ -81,7 +77,7 @@
 				variant="default"
 				class="w-full gap-2"
 				insetShadow={true}
-				loading={busy}
+				loading={relation.loading}
 				disabled={!relation.known}
 				onclick={toggle}
 			>
diff --git a/web/src/lib/components/profile/ProfileEditForm.svelte b/web/src/lib/components/profile/ProfileEditForm.svelte
index ffcee257..7f1cf7d0 100644
--- a/web/src/lib/components/profile/ProfileEditForm.svelte
+++ b/web/src/lib/components/profile/ProfileEditForm.svelte
@@ -8,6 +8,7 @@
 	import { getAuth } from "$lib/auth.svelte";
 	import { putProfile } from "$lib/api/profile";
 	import type { ProfileRecord } from "$lib/api/records";
+	import { createAction } from "$lib/action.svelte";
 
 	interface Props {
 		profile: ProfileRecord | null;
@@ -30,41 +31,33 @@
 			value: (seed?.links?.[index] as string | undefined) ?? ""
 		}))
 	);
-	let busy = $state(false);
-	let error = $state<string | null>(null);
-
 	const inputClass =
 		"w-full rounded border border-border-default bg-background-default px-2 py-1 outline-none focus:border-border-strong focus:ring-1 focus:ring-border-strong";
 
-	const save = async (event: SubmitEvent) => {
-		event.preventDefault();
-		const agent = auth.agent;
-		if (!agent || busy) return;
-		busy = true;
-		error = null;
-		const cleanLinks = links.map((link) => link.value.trim()).filter(Boolean);
-		// put replaces the whole record, so carry unedited fields (avatar, pins, stats).
-		const record: ProfileRecord = {
-			...profile,
-			$type: "sh.tangled.actor.profile",
-			bluesky,
-			description: description.trim() || undefined,
-			pronouns: pronouns.trim() || undefined,
-			location: location.trim() || undefined,
-			links: cleanLinks.length > 0 ? (cleanLinks as ProfileRecord["links"]) : undefined
-		};
-		try {
+	const save = createAction(
+		async (event: SubmitEvent) => {
+			event.preventDefault();
+			const agent = auth.agent;
+			if (!agent) return;
+			const cleanLinks = links.map((link) => link.value.trim()).filter(Boolean);
+			// put replaces the whole record, so carry unedited fields (avatar, pins, stats).
+			const record: ProfileRecord = {
+				...profile,
+				$type: "sh.tangled.actor.profile",
+				bluesky,
+				description: description.trim() || undefined,
+				pronouns: pronouns.trim() || undefined,
+				location: location.trim() || undefined,
+				links: cleanLinks.length > 0 ? (cleanLinks as ProfileRecord["links"]) : undefined
+			};
 			await putProfile(agent, record);
 			onSaved(record);
-		} catch {
-			error = "Could not save profile. Try again.";
-		} finally {
-			busy = false;
-		}
-	};
+		},
+		() => "Could not save profile. Try again."
+	);
 </script>
 
-<form class="my-2 flex max-w-full flex-col gap-4 text-sm" onsubmit={save}>
+<form class="my-2 flex max-w-full flex-col gap-4 text-sm" onsubmit={save.run}>
 	<div class="flex flex-col gap-1">
 		<label for="profile-bio">Bio</label>
 		<textarea
@@ -113,16 +106,16 @@
 		{/each}
 	</div>
 
-	{#if error}
-		<p class="typography-paragraph-small text-foreground-danger">{error}</p>
+	{#if save.error}
+		<p class="typography-paragraph-small text-foreground-danger">{save.error}</p>
 	{/if}
 
 	<div class="flex items-center justify-between gap-2">
-		<Button type="submit" variant="default" class="w-full gap-2" loading={busy}>
+		<Button type="submit" variant="default" class="w-full gap-2" loading={save.loading}>
 			<Check class="size-4" aria-hidden="true" />
 			Save
 		</Button>
-		<Button variant="default" class="w-full gap-2" disabled={busy} onclick={onCancel}>
+		<Button variant="default" class="w-full gap-2" disabled={save.loading} onclick={onCancel}>
 			<X class="size-4" aria-hidden="true" />
 			Cancel
 		</Button>
diff --git a/web/src/lib/components/reaction/ReactionPicker.svelte b/web/src/lib/components/reaction/ReactionPicker.svelte
index 789c1beb..54266267 100644
--- a/web/src/lib/components/reaction/ReactionPicker.svelte
+++ b/web/src/lib/components/reaction/ReactionPicker.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { now as tidNow } from "@atcute/tid";
 	import SmilePlus from "$icon/smile-plus";
+	import { createAction } from "$lib/action.svelte";
 	import { putReaction, deleteReaction } from "$lib/api/reaction";
 	import { getAuth } from "$lib/auth.svelte";
 	import type { ReactionRecord } from "$lib/api/records";
@@ -24,35 +25,31 @@
 	const anchorName = `--${popoverId}`;
 
 	let panel = $state<HTMLElement>();
-	let pending = $state<ReactionKind | null>(null);
 
-	const pick = async (kind: ReactionKind) => {
+	const pick = createAction(async (kind: ReactionKind) => {
 		const agent = auth?.agent;
-		if (!agent || pending) return;
+		if (!agent) return;
 
-		pending = kind;
-		try {
-			const existingRkey = reacted?.get(kind);
-			if (existingRkey) {
-				await deleteReaction(agent, existingRkey);
-				onunreacted?.(kind);
-			} else {
-				const rkey = tidNow();
-				const record: ReactionRecord = {
-					$type: "sh.tangled.feed.reaction",
-					subject: subjectUri as ReactionRecord["subject"],
-					reaction: kind,
-					createdAt: new Date().toISOString()
-				};
-				await putReaction(agent, rkey, record);
-				onreacted?.(kind, rkey);
-			}
-			panel?.hidePopover();
-		} catch {
-			// leave the panel open on failure so the user can retry
-		} finally {
-			pending = null;
+		const existingRkey = reacted?.get(kind);
+		if (existingRkey) {
+			await deleteReaction(agent, existingRkey);
+			onunreacted?.(kind);
+		} else {
+			const rkey = tidNow();
+			const record: ReactionRecord = {
+				$type: "sh.tangled.feed.reaction",
+				subject: subjectUri as ReactionRecord["subject"],
+				reaction: kind,
+				createdAt: new Date().toISOString()
+			};
+			await putReaction(agent, rkey, record);
+			onreacted?.(kind, rkey);
 		}
+		panel?.hidePopover();
+	});
+
+	const handlePick = (kind: ReactionKind) => {
+		if (!pick.loading) void pick.run(kind);
 	};
 </script>
 
@@ -80,8 +77,8 @@
 				size="sm"
 				aria-label={`React with ${kind}`}
 				aria-pressed={reacted?.has(kind) ?? false}
-				disabled={pending !== null}
-				onclick={() => pick(kind)}
+				disabled={pick.loading}
+				onclick={() => handlePick(kind)}
 			>
 				{kind}
 			</Button>
diff --git a/web/src/lib/components/repo/EmptyRepo.svelte b/web/src/lib/components/repo/EmptyRepo.svelte
index 4568f82d..af2b5417 100644
--- a/web/src/lib/components/repo/EmptyRepo.svelte
+++ b/web/src/lib/components/repo/EmptyRepo.svelte
@@ -3,6 +3,7 @@
 	import { getAuth } from "$lib/auth.svelte";
 	import { createBobbinClient } from "$lib/api/client";
 	import { count } from "$lib/api/count";
+	import { createLoad } from "$lib/action.svelte";
 	import type { RepoInfo } from "./types";
 
 	interface Props {
@@ -26,43 +27,29 @@
 	);
 	const remote = $derived(`git@${sshHost}:${repo.repoDid ?? `${repo.ownerHandle}/${repo.name}`}`);
 
-	type KeyStatus = "checking" | "has-key" | "no-key";
-
-	let keyStatus = $state<KeyStatus>("checking");
-
-	$effect(() => {
+	const keyStatus = createLoad(async (): Promise<boolean | undefined> => {
 		if (hasSshKey !== undefined) {
-			keyStatus = hasSshKey ? "has-key" : "no-key";
-			return;
+			return hasSshKey;
 		}
 
-		if (!isOwner) return;
+		const owner = isOwner;
 		const did = auth.currentDid;
-		if (!did) return;
-
-		let cancelled = false;
-		keyStatus = "checking";
-
-		(async () => {
-			try {
-				const ctx = createBobbinClient({ serviceUrl: auth.bobbinUrl });
-				const result = await count(ctx, "sh.tangled.publicKey.countKeys", did);
-				if (!cancelled) keyStatus = result.count > 0 ? "has-key" : "no-key";
-			} catch {
-				// safe fallback: guide the owner through generating a key.
-				if (!cancelled) keyStatus = "no-key";
-			}
-		})();
-
-		return () => {
-			cancelled = true;
-		};
+		const serviceUrl = auth.bobbinUrl;
+		if (!owner || !did) return undefined;
+		try {
+			const ctx = createBobbinClient({ serviceUrl });
+			const result = await count(ctx, "sh.tangled.publicKey.countKeys", did);
+			return result.count > 0;
+		} catch {
+			// safe fallback: guide the owner through generating a key.
+			return false;
+		}
 	});
 </script>
 
 {#snippet bullet(n: number)}
 	<span
-		class="mr-2 inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-background-inset align-middle font-mono typography-monospace-small"
+		class="mr-2 inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-background-inset align-middle typography-monospace-small font-mono"
 	>
 		{n}
 	</span>
@@ -75,9 +62,9 @@
 {/snippet}
 
 {#if isOwner}
-	{#if keyStatus === "checking"}
+	{#if keyStatus.loading || keyStatus.data === undefined}
 		<div class="py-6" aria-hidden="true"></div>
-	{:else if keyStatus === "has-key"}
+	{:else if keyStatus.data}
 		<div class="flex w-full place-content-center">
 			<div class="flex w-fit flex-col gap-5 py-6 text-sm">
 				<p>This is an empty repository.</p>
diff --git a/web/src/lib/components/repo/StarButton.svelte b/web/src/lib/components/repo/StarButton.svelte
index 1b27bf61..ee45b571 100644
--- a/web/src/lib/components/repo/StarButton.svelte
+++ b/web/src/lib/components/repo/StarButton.svelte
@@ -37,15 +37,13 @@
 		loaded: () => initialCount
 	});
 
-	let busy = $state(false);
 	const starred = $derived(relation.active);
 	const failed = $derived(relation.failed || starCount.failed);
 
 	const toggle = async () => {
 		const agent = auth.agent;
-		if (!agent || busy || !relation.known || !repoDid) return;
-		busy = true;
-		relation.resetFailure();
+		if (!agent || !relation.known || relation.loading || !repoDid) return;
+		relation.begin();
 		starCount.resetFailure();
 		try {
 			if (relation.active && relation.rkey) {
@@ -62,8 +60,6 @@
 		} catch {
 			relation.fail();
 			starCount.fail();
-		} finally {
-			busy = false;
 		}
 	};
 </script>
@@ -76,7 +72,7 @@
 				size="sm"
 				{insetShadow}
 				class="flex-1"
-				loading={busy}
+				loading={relation.loading}
 				disabled={!relation.known}
 				onclick={toggle}
 			>
diff --git a/web/src/lib/components/repo/issues/IssueForm.svelte b/web/src/lib/components/repo/issues/IssueForm.svelte
index 92d15054..51206155 100644
--- a/web/src/lib/components/repo/issues/IssueForm.svelte
+++ b/web/src/lib/components/repo/issues/IssueForm.svelte
@@ -13,6 +13,7 @@
 	import Spinner from "$lib/components/ui/Spinner.svelte";
 	import { type MarkupContext } from "$lib/markup";
 	import type { IssueRecord, RecordView } from "$lib/api/records";
+	import { createAction } from "$lib/action.svelte";
 
 	interface Props {
 		repoDid: string;
@@ -46,42 +47,31 @@
 
 	let title = $state(untrack(() => initialTitle));
 	let body = $state(untrack(() => initialBody));
-	let isPublishing = $state(false);
-	let error = $state<string | null>(null);
-
 	const submitText = $derived(submitLabel ?? (mode === "edit" ? "Save" : "Create issue"));
 	const submitIcon = $derived(mode === "edit" ? Pencil : CirclePlus);
-	const canSubmit = $derived(title.trim() !== "" && !isPublishing);
 
-	const handleSubmit = async (e: SubmitEvent) => {
-		e.preventDefault();
+	const save = createAction(async (event: SubmitEvent) => {
+		event.preventDefault();
 		const agent = auth.agent;
-		if (!agent || !canSubmit) return;
-		isPublishing = true;
-		error = null;
-		try {
-			const targetRkey = rkey ?? tidNow();
-			const record: IssueRecord = {
-				$type: "sh.tangled.repo.issue",
-				repo: repoDid as IssueRecord["repo"],
-				title,
-				body,
-				createdAt: createdAt ?? new Date().toISOString()
-			};
-			const saved = await putIssue(agent, targetRkey, record);
-			onsaved(saved);
-		} catch (err) {
-			error = err instanceof Error ? err.message : "Failed to save issue";
-		} finally {
-			isPublishing = false;
-		}
-	};
+		if (!agent || title.trim() === "") return;
+		const targetRkey = rkey ?? tidNow();
+		const record: IssueRecord = {
+			$type: "sh.tangled.repo.issue",
+			repo: repoDid as IssueRecord["repo"],
+			title,
+			body,
+			createdAt: createdAt ?? new Date().toISOString()
+		};
+		const saved = await putIssue(agent, targetRkey, record);
+		onsaved(saved);
+	});
+	const canSubmit = $derived(title.trim() !== "" && !save.loading);
 </script>
 
-<form onsubmit={handleSubmit} class="flex flex-col gap-4">
+<form onsubmit={save.run} class="flex flex-col gap-4">
 	<div class="flex flex-col gap-1.5">
 		<label for="issue-title" class="text-sm text-foreground-default">Title</label>
-		<Input id="issue-title" name="title" required bind:value={title} disabled={isPublishing} />
+		<Input id="issue-title" name="title" required bind:value={title} disabled={save.loading} />
 	</div>
 
 	<div class="flex flex-col gap-1.5">
@@ -94,22 +84,20 @@
 			placeholder={bodyPlaceholder}
 			{markup}
 			bind:value={body}
-			disabled={isPublishing}
+			disabled={save.loading}
 		/>
 	</div>
 
-	{#if error}
-		<ErrorAlert label={error} />
-	{/if}
+	<ErrorAlert label={save.error} />
 
 	<div class="flex items-center justify-end gap-2">
-		<Button type="button" variant="default" icon={X} disabled={isPublishing} onclick={oncancel}>
+		<Button type="button" variant="default" icon={X} disabled={save.loading} onclick={oncancel}>
 			Cancel
 		</Button>
 		<Button
 			type="submit"
 			variant="primary"
-			icon={isPublishing ? Spinner : submitIcon}
+			icon={save.loading ? Spinner : submitIcon}
 			disabled={!canSubmit}
 		>
 			{submitText}
diff --git a/web/src/lib/components/settings/tabs/KeysTab.svelte b/web/src/lib/components/settings/tabs/KeysTab.svelte
index 0fc31f04..5ee44fef 100644
--- a/web/src/lib/components/settings/tabs/KeysTab.svelte
+++ b/web/src/lib/components/settings/tabs/KeysTab.svelte
@@ -16,6 +16,7 @@
 	import SettingsToolbar from "../SettingsToolbar.svelte";
 	import SettingsList from "../SettingsList.svelte";
 	import SettingsEntry from "../SettingsEntry.svelte";
+	import { createAction, createLoad } from "$lib/action.svelte";
 	import Plus from "$icon/plus";
 	import Trash from "$icon/trash-2";
 	import Key from "$icon/key";
@@ -23,12 +24,10 @@
 	const auth = getAuth();
 	const user = $derived(auth.currentUser);
 
-	let keys = $state<ListedRecord<PublicKeyRecord>[]>([]);
-	let fingerprints = $state<Record<string, string>>({});
-	let loading = $state(true);
-	let loadError = $state<string | null>(null);
-	let deleting = $state<string | null>(null);
-
+	type KeysData = {
+		keys: ListedRecord<PublicKeyRecord>[];
+		fingerprints: Record<string, string>;
+	};
 	// ssh SHA256 fingerprint of the base64 key blob, matching `ssh-keygen -lf`.
 	const sshFingerprint = async (pubkey: string): Promise<string | null> => {
 		const parts = pubkey.trim().split(/\s+/);
@@ -43,44 +42,36 @@
 		}
 	};
 
-	const load = async () => {
+	const loaded = createLoad(async (): Promise<KeysData> => {
+		const serviceUrl = auth.bobbinUrl;
 		const did = user?.did;
-		if (!did) return;
-		loading = true;
-		loadError = null;
-		try {
-			const ctx = createBobbinClient({ serviceUrl: auth.bobbinUrl });
-			keys = await listPubKeys(ctx, did);
-			const entries = await Promise.all(
-				keys.map(async (k) => [k.rkey, await sshFingerprint(k.value.key)] as const)
-			);
-			fingerprints = Object.fromEntries(
-				entries.filter(([, fp]) => fp !== null) as [string, string][]
-			);
-		} catch (err) {
-			loadError = err instanceof Error ? err.message : "Failed to load keys";
-		} finally {
-			loading = false;
-		}
-	};
+		if (!did) return { keys: [], fingerprints: {} };
+		const ctx = createBobbinClient({ serviceUrl });
+		const keys = await listPubKeys(ctx, did);
+		const entries = await Promise.all(
+			keys.map(async (k) => [k.rkey, await sshFingerprint(k.value.key)] as const)
+		);
+		const fingerprints = Object.fromEntries(
+			entries.filter(([, fp]) => fp !== null) as [string, string][]
+		);
+		return { keys, fingerprints };
+	});
 
-	$effect(() => {
-		if (user?.did) void load();
+	const removeKey = createAction(async (key: ListedRecord<PublicKeyRecord>) => {
+		const agent = auth.agent;
+		if (!agent) return;
+		await deletePubKey(agent, key.rkey);
+		// drop just this key from local state instead of refetching everything.
+		loaded.update((data) => ({
+			...data,
+			keys: data.keys.filter((candidate) => candidate.rkey !== key.rkey)
+		}));
 	});
 
-	const remove = async (k: ListedRecord<PublicKeyRecord>) => {
-		if (!auth.agent) return;
-		if (!confirm(`Are you sure you want to delete the key ${k.value.name}?`)) return;
-		deleting = k.rkey;
-		try {
-			await deletePubKey(auth.agent, k.rkey);
-			// drop just this key from local state instead of refetching everything.
-			keys = keys.filter((x) => x.rkey !== k.rkey);
-		} catch (err) {
-			loadError = err instanceof Error ? err.message : "Failed to delete key";
-		} finally {
-			deleting = null;
-		}
+	const remove = (key: ListedRecord<PublicKeyRecord>) => {
+		if (!auth.agent || removeKey.loading) return;
+		if (!confirm(`Are you sure you want to delete the key ${key.value.name}?`)) return;
+		void removeKey.run(key);
 	};
 </script>
 
@@ -96,26 +87,26 @@
 		{/snippet}
 	</SettingsToolbar>
 
-	{#if loadError}
-		<ErrorAlert label={loadError} />
-	{/if}
+	<ErrorAlert label={loaded.error} />
+	<ErrorAlert label={removeKey.error} />
 
-	{#if loading}
+	{#if loaded.loading}
 		<div
 			class="flex items-center justify-center gap-2 p-4 typography-paragraph-regular text-foreground-subtle"
 		>
 			<Spinner /> Loading…
 		</div>
-	{:else if keys.length === 0}
+	{:else if loaded.data?.keys.length === 0}
 		<SettingsEmpty message="No keys added yet" />
-	{:else}
+	{:else if loaded.data}
+		{@const data = loaded.data}
 		<SettingsList>
-			{#each keys as k (k.rkey)}
+			{#each data.keys as k (k.rkey)}
 				<SettingsEntry icon={Key} title={k.value.name}>
 					{#snippet meta()}
-						{#if fingerprints[k.rkey]}
-							<span class="font-mono typography-monospace-regular break-all text-foreground-muted">
-								{fingerprints[k.rkey]}
+						{#if data.fingerprints[k.rkey]}
+							<span class="typography-monospace-regular font-mono break-all text-foreground-muted">
+								{data.fingerprints[k.rkey]}
 							</span>
 						{/if}
 						<span class="typography-paragraph-regular text-foreground-muted">
@@ -126,7 +117,7 @@
 						<Button
 							variant="danger"
 							icon={Trash}
-							loading={deleting === k.rkey}
+							loading={removeKey.loading && removeKey.args?.[0].rkey === k.rkey}
 							onclick={() => remove(k)}
 						>
 							Delete
diff --git a/web/src/lib/components/settings/tabs/NotificationsTab.svelte b/web/src/lib/components/settings/tabs/NotificationsTab.svelte
index b7a7c86e..6828084f 100644
--- a/web/src/lib/components/settings/tabs/NotificationsTab.svelte
+++ b/web/src/lib/components/settings/tabs/NotificationsTab.svelte
@@ -15,6 +15,7 @@
 	import ErrorAlert from "$lib/components/ui/Error.svelte";
 	import SettingsHeader from "../SettingsHeader.svelte";
 	import SettingsList from "../SettingsList.svelte";
+	import { createAction, createLoad } from "$lib/action.svelte";
 	import Save from "$icon/save";
 	import Star from "$icon/star";
 	import CircleDot from "$icon/circle-dot";
@@ -113,57 +114,34 @@
 		}
 	]);
 
-	let loading = $state(true);
-	let saving = $state(false);
-	let loadError = $state<string | null>(null);
-	let saveError = $state<string | null>(null);
 	// last-saved values; Save lights up when the toggles drift from these.
 	let baseline = $state<NotificationPreferences | null>(null);
 
 	const dirty = $derived(baseline !== null && prefs.some((p) => p.enabled !== baseline![p.key]));
 
-	const load = async () => {
+	const loaded = createLoad(async () => {
 		const agent = auth.agent;
-		if (!agent || !apiUrl) return;
-		loading = true;
-		loadError = null;
-		try {
-			const ctx = createAppviewClient({ apiUrl, agent });
-			const values = await getNotificationPreferences(ctx);
-			for (const pref of prefs) pref.enabled = values[pref.key];
-			baseline = values;
-		} catch (err) {
-			loadError =
-				err instanceof Error ? err.message : "Failed to load notification preferences.";
-		} finally {
-			loading = false;
-		}
-	};
-
-	$effect(() => {
-		if (auth.agent && apiUrl) void load();
+		const url = apiUrl;
+		if (!agent || !url) return;
+		const ctx = createAppviewClient({ apiUrl: url, agent });
+		const values = await getNotificationPreferences(ctx);
+		for (const pref of prefs) pref.enabled = values[pref.key];
+		baseline = values;
 	});
 
-	const save = async () => {
+	const save = createAction(async () => {
 		const agent = auth.agent;
-		if (!agent || !apiUrl || !baseline || !dirty) return;
-		saving = true;
-		saveError = null;
+		const url = apiUrl;
+		if (!agent || !url || !baseline || !dirty) return;
 		// send only the toggles that changed since the last save.
 		const patch: Partial<NotificationPreferences> = {};
 		for (const pref of prefs) {
 			if (pref.enabled !== baseline[pref.key]) patch[pref.key] = pref.enabled;
 		}
-		try {
-			const ctx = createAppviewClient({ apiUrl, agent });
-			await updateNotificationPreferences(ctx, patch);
-			baseline = { ...baseline, ...patch };
-		} catch (err) {
-			saveError = err instanceof Error ? err.message : "Failed to save preferences.";
-		} finally {
-			saving = false;
-		}
-	};
+		const ctx = createAppviewClient({ apiUrl: url, agent });
+		await updateNotificationPreferences(ctx, patch);
+		baseline = { ...baseline, ...patch };
+	});
 </script>
 
 <SettingsHeader
@@ -171,18 +149,16 @@
 	description="Choose which notifications you want to receive when activity happens on your repositories and profile."
 >
 	{#snippet action()}
-		<Button variant="primary" icon={Save} disabled={!dirty || saving} onclick={save}>Save</Button>
+		<Button variant="primary" icon={Save} disabled={!dirty || save.loading} onclick={save.run}>
+			Save
+		</Button>
 	{/snippet}
 </SettingsHeader>
 
-{#if loadError}
-	<ErrorAlert label={loadError} />
-{/if}
-{#if saveError}
-	<ErrorAlert label={saveError} />
-{/if}
+<ErrorAlert label={loaded.error} />
+<ErrorAlert label={save.error} />
 
-{#if loading}
+{#if loaded.loading}
 	<div class="flex items-center justify-center gap-2 p-4 text-sm text-foreground-subtle">
 		<Spinner /> Loading…
 	</div>
@@ -198,7 +174,7 @@
 					</span>
 					<span class="typography-paragraph-regular text-foreground-muted">{pref.description}</span>
 				</div>
-				<Toggle bind:checked={pref.enabled} disabled={saving} aria-label={pref.label} />
+				<Toggle bind:checked={pref.enabled} disabled={save.loading} aria-label={pref.label} />
 			</div>
 		{/each}
 	</SettingsList>
diff --git a/web/src/lib/components/settings/tabs/ProfileTab.svelte b/web/src/lib/components/settings/tabs/ProfileTab.svelte
index 6f9eb6f7..872dd382 100644
--- a/web/src/lib/components/settings/tabs/ProfileTab.svelte
+++ b/web/src/lib/components/settings/tabs/ProfileTab.svelte
@@ -12,6 +12,7 @@
 	import SettingsSaveBar from "../SettingsSaveBar.svelte";
 	import CodeChip from "../CodeChip.svelte";
 	import ThemePicker from "../ThemePicker.svelte";
+	import { createLoad } from "$lib/action.svelte";
 	import Pencil from "$icon/pencil";
 	import Key from "$icon/key";
 	import Pause from "$icon/pause";
@@ -20,23 +21,12 @@
 	const auth = getAuth();
 	const user = $derived(auth.currentUser);
 
-	let pds = $state<string | null>(null);
-
-	$effect(() => {
+	const pds = createLoad(async () => {
 		const did = user?.did;
-		if (!did) return;
-		const ctx = createBobbinClient({ serviceUrl: auth.bobbinUrl });
-		let cancelled = false;
-		resolveMiniDoc(ctx, did)
-			.then((doc) => {
-				if (!cancelled) pds = doc.pds ?? null;
-			})
-			.catch(() => {
-				if (!cancelled) pds = null;
-			});
-		return () => {
-			cancelled = true;
-		};
+		const serviceUrl = auth.bobbinUrl;
+		if (!did) return null;
+		const ctx = createBobbinClient({ serviceUrl });
+		return (await resolveMiniDoc(ctx, did)).pds ?? null;
 	});
 
 	// everything below is mocked — nothing is persisted yet
@@ -116,7 +106,7 @@
 			<CodeChip class="w-full break-all sm:w-auto">{user?.did ?? "…"}</CodeChip>
 		</SettingsRow>
 		<SettingsRow title="Personal Data Server (PDS)">
-			<CodeChip class="break-all">{pds ?? "…"}</CodeChip>
+			<CodeChip class="break-all">{pds.data ?? "…"}</CodeChip>
 		</SettingsRow>
 	</SettingsSection>
 
diff --git a/web/src/lib/components/settings/tabs/SitesTab.svelte b/web/src/lib/components/settings/tabs/SitesTab.svelte
index 9c107347..82f08306 100644
--- a/web/src/lib/components/settings/tabs/SitesTab.svelte
+++ b/web/src/lib/components/settings/tabs/SitesTab.svelte
@@ -16,6 +16,7 @@
 	import SettingsEntry from "../SettingsEntry.svelte";
 	import FormRow from "../FormRow.svelte";
 	import DocsButton from "../DocsButton.svelte";
+	import { createAction, createLoad } from "$lib/action.svelte";
 	import Globe from "$icon/globe";
 	import Check from "$icon/check";
 	import Unlink from "$icon/unlink";
@@ -25,72 +26,58 @@
 	const apiUrl = $derived(page.data.publicConfig?.apiUrl as string | undefined);
 	const sitesDomain = $derived((page.data.publicConfig?.sitesDomain as string | undefined) ?? "");
 
-	let domain = $state<string | null>(null);
-	let loading = $state(true);
-	let loadError = $state<string | null>(null);
-	let actionError = $state<string | null>(null);
 	let subdomain = $state("");
-	let claiming = $state(false);
-	let releasing = $state(false);
 
 	// prefer the xrpc error's message/name over a generic client error string.
 	const errMessage = (err: unknown, fallback: string): string => {
 		if (err instanceof ClientResponseError) return err.description || err.error || fallback;
 		return err instanceof Error ? err.message : fallback;
 	};
+	const loaded = createLoad(
+		async (): Promise<string | null> => {
+			const agent = auth.agent;
+			const url = apiUrl;
+			if (!agent || !url) return null;
+			const ctx = createAppviewClient({ apiUrl: url, agent });
+			return getDomainClaim(ctx);
+		},
+		(cause) => errMessage(cause, "Failed to load your sites domain.")
+	);
 
-	const load = async () => {
-		const agent = auth.agent;
-		if (!agent || !apiUrl) return;
-		loading = true;
-		loadError = null;
-		try {
-			const ctx = createAppviewClient({ apiUrl, agent });
-			domain = await getDomainClaim(ctx);
-		} catch (err) {
-			loadError = errMessage(err, "Failed to load your sites domain.");
-		} finally {
-			loading = false;
-		}
-	};
-
-	$effect(() => {
-		if (auth.agent && apiUrl) void load();
-	});
-
-	const claim = async () => {
-		const agent = auth.agent;
-		const sd = subdomain.trim();
-		if (!agent || !apiUrl || !sd || claiming) return;
-		claiming = true;
-		actionError = null;
-		try {
-			const ctx = createAppviewClient({ apiUrl, agent });
-			await claimDomain(ctx, sd);
+	const claim = createAction(
+		async (event: SubmitEvent) => {
+			event.preventDefault();
+			const agent = auth.agent;
+			const url = apiUrl;
+			const domain = subdomain.trim();
+			if (!agent || !url || !domain) return;
+			const ctx = createAppviewClient({ apiUrl: url, agent });
+			await claimDomain(ctx, domain);
 			subdomain = "";
-			await load();
-		} catch (err) {
-			actionError = errMessage(err, "Failed to claim domain.");
-		} finally {
-			claiming = false;
-		}
-	};
+			await loaded.run();
+		},
+		(cause) => errMessage(cause, "Failed to claim domain.")
+	);
 
-	const release = async () => {
-		const agent = auth.agent;
-		if (!agent || !apiUrl || !domain || releasing) return;
-		if (!confirm(`Release ${domain}? This removes all site data served from it.`)) return;
-		releasing = true;
-		actionError = null;
-		try {
-			const ctx = createAppviewClient({ apiUrl, agent });
+	const release = createAction(
+		async () => {
+			const agent = auth.agent;
+			const url = apiUrl;
+			const domain = loaded.data;
+			if (!agent || !url || !domain) return;
+			const ctx = createAppviewClient({ apiUrl: url, agent });
 			await releaseDomain(ctx, domain);
-			await load();
-		} catch (err) {
-			actionError = errMessage(err, "Failed to release domain.");
-		} finally {
-			releasing = false;
-		}
+			await loaded.run();
+		},
+		(cause) => errMessage(cause, "Failed to release domain.")
+	);
+	const actionError = $derived(claim.error ?? release.error);
+
+	const releaseDomainClaim = () => {
+		const domain = loaded.data;
+		if (!auth.agent || release.loading || !domain) return;
+		if (!confirm(`Release ${domain}? This removes all site data served from it.`)) return;
+		void release.run();
 	};
 </script>
 
@@ -106,48 +93,54 @@
 		{/snippet}
 	</SettingsToolbar>
 
-	{#if loadError}
-		<ErrorAlert label={loadError} />
-	{/if}
+	<ErrorAlert label={loaded.error} />
 	{#if actionError}
 		<ErrorAlert label={actionError} />
 	{/if}
 
-	{#if loading}
+	{#if loaded.loading}
 		<div class="flex items-center justify-center gap-2 p-4 text-sm text-foreground-subtle">
 			<Spinner /> Loading…
 		</div>
-	{:else if domain}
+	{:else if loaded.data}
 		<SettingsList>
-			<SettingsEntry icon={Globe} title={domain}>
+			<SettingsEntry icon={Globe} title={loaded.data}>
 				{#snippet tags()}
 					<Tag color="success" size="sm" icon={Check}>Active</Tag>
 				{/snippet}
 				{#snippet actions()}
-					<Button variant="danger" icon={Unlink} disabled={releasing} onclick={release}>
+					<Button
+						variant="danger"
+						icon={Unlink}
+						loading={release.loading}
+						onclick={releaseDomainClaim}
+					>
 						Release
 					</Button>
 				{/snippet}
 			</SettingsEntry>
 		</SettingsList>
-	{:else}
-		<form
-			class="flex w-full flex-col gap-4"
-			onsubmit={(e) => {
-				e.preventDefault();
-				void claim();
-			}}
-		>
-			<FormRow label="Subdomain" description="Lowercase letters, digits, and hyphens; 4–63 characters.">
+	{:else if loaded.data !== undefined}
+		<form class="flex w-full flex-col gap-4" onsubmit={claim.run}>
+			<FormRow
+				label="Subdomain"
+				description="Lowercase letters, digits, and hyphens; 4–63 characters."
+			>
 				<div class="flex items-center gap-2">
 					<Input
 						bind:value={subdomain}
 						placeholder="floo"
 						suffix={sitesDomain ? `.${sitesDomain}` : undefined}
-						disabled={claiming}
+						disabled={claim.loading}
 						class="flex-1"
 					/>
-					<Button type="submit" variant="primary" icon={Plus} disabled={claiming || !subdomain.trim()}>
+					<Button
+						type="submit"
+						variant="primary"
+						icon={Plus}
+						loading={claim.loading}
+						disabled={!subdomain.trim()}
+					>
 						Claim
 					</Button>
 				</div>
diff --git a/web/src/lib/components/strings/StringForm.svelte b/web/src/lib/components/strings/StringForm.svelte
index 618cc9c9..e31ab566 100644
--- a/web/src/lib/components/strings/StringForm.svelte
+++ b/web/src/lib/components/strings/StringForm.svelte
@@ -9,6 +9,7 @@
 	import { getAuth } from "$lib/auth.svelte";
 	import { putString } from "$lib/api/strings";
 	import type { StringRecord } from "$lib/api/records";
+	import { createAction } from "$lib/action.svelte";
 
 	interface Props {
 		mode?: "create" | "edit";
@@ -37,39 +38,29 @@
 	let filename = $state(untrack(() => initialFilename));
 	let description = $state(untrack(() => initialDescription));
 	let content = $state(untrack(() => initialContent));
-	let isPublishing = $state(false);
-	let error = $state<string | null>(null);
 
 	const lineCount = $derived(content === "" ? 0 : content.split("\n").length);
 	const byteCount = $derived(new TextEncoder().encode(content).length);
 
-	const handleSubmit = async (e: SubmitEvent) => {
-		e.preventDefault();
+	const publish = createAction(async (event: SubmitEvent) => {
+		event.preventDefault();
 		const agent = auth.agent;
-		if (!agent || isPublishing) return;
-		isPublishing = true;
-		error = null;
-		try {
-			const targetRkey = rkey ?? tidNow();
-			const record: StringRecord = {
-				$type: "sh.tangled.string",
-				filename,
-				description,
-				contents: content,
-				createdAt: createdAt ?? new Date().toISOString()
-			};
-			await putString(agent, targetRkey, record);
-			onsaved(targetRkey);
-		} catch (err) {
-			error = err instanceof Error ? err.message : "Failed to publish string";
-		} finally {
-			isPublishing = false;
-		}
-	};
+		if (!agent) return;
+		const targetRkey = rkey ?? tidNow();
+		const record: StringRecord = {
+			$type: "sh.tangled.string",
+			filename,
+			description,
+			contents: content,
+			createdAt: createdAt ?? new Date().toISOString()
+		};
+		await putString(agent, targetRkey, record);
+		onsaved(targetRkey);
+	});
 </script>
 
 <div class="rounded-sm border border-border-default bg-background-default">
-	<form onsubmit={handleSubmit}>
+	<form onsubmit={publish.run}>
 		<div class="flex flex-col gap-2 p-4">
 			<div class="flex flex-col gap-2 md:flex-row">
 				<input
@@ -79,7 +70,7 @@
 					placeholder="Filename"
 					required
 					bind:value={filename}
-					disabled={isPublishing}
+					disabled={publish.loading}
 					class="rounded-sm border border-border-default bg-background-default p-2 text-sm text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none disabled:opacity-50 md:max-w-64"
 				/>
 				<input
@@ -89,7 +80,7 @@
 					placeholder="Description ..."
 					maxlength={280}
 					bind:value={description}
-					disabled={isPublishing}
+					disabled={publish.loading}
 					class="flex-1 rounded-sm border border-border-default bg-background-default p-2 text-sm text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none disabled:opacity-50"
 				/>
 			</div>
@@ -102,7 +93,7 @@
 				rows={20}
 				spellcheck={false}
 				bind:value={content}
-				disabled={isPublishing}
+				disabled={publish.loading}
 				class="w-full resize-y rounded-sm border border-border-default bg-background-default p-2 font-mono text-sm text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none disabled:opacity-50"
 			></textarea>
 		</div>
@@ -120,7 +111,7 @@
 						type="button"
 						variant="default"
 						icon={X}
-						disabled={isPublishing}
+						disabled={publish.loading}
 						onclick={oncancel}
 					>
 						Cancel
@@ -129,17 +120,17 @@
 				<Button
 					type="submit"
 					variant="primary"
-					icon={isPublishing ? Spinner : ArrowUp}
-					disabled={isPublishing}
+					icon={publish.loading ? Spinner : ArrowUp}
+					disabled={publish.loading}
 				>
 					Publish
 				</Button>
 			</div>
 		</div>
 
-		{#if error}
+		{#if publish.error}
 			<div class="px-4 pb-4">
-				<ErrorAlert label={error} />
+				<ErrorAlert label={publish.error} />
 			</div>
 		{/if}
 	</form>
diff --git a/web/src/lib/components/ui/Error.svelte b/web/src/lib/components/ui/Error.svelte
index 441bd6a6..8775c2d6 100644
--- a/web/src/lib/components/ui/Error.svelte
+++ b/web/src/lib/components/ui/Error.svelte
@@ -45,8 +45,8 @@
 	import ChevronRight from "$icon/chevron-right";
 
 	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class" | "children"> {
-		/** The error message shown next to the icon. */
-		label: string;
+		/** The error message shown next to the icon; renders nothing when absent. */
+		label?: string;
 		size?: ErrorVariants["size"];
 		class?: string;
 		/** Optional collapsible content revealed by a "Show code" toggle. */
@@ -56,25 +56,30 @@
 	let { label, size = "small", class: className, children, ...rest }: Props = $props();
 
 	let open = $state(false);
+	$effect(() => {
+		if (!label) open = false;
+	});
 
 	const classes = $derived(error({ size }));
 </script>
 
-<div class={classes.root({ class: className })} role="alert" {...rest}>
-	<div class={classes.header()}>
-		<OctagonAlert class={classes.icon()} aria-hidden="true" />
-		<span class={classes.label()}>{label}</span>
-	</div>
+{#if label}
+	<div class={classes.root({ class: className })} role="alert" {...rest}>
+		<div class={classes.header()}>
+			<OctagonAlert class={classes.icon()} aria-hidden="true" />
+			<span class={classes.label()}>{label}</span>
+		</div>
 
-	{#if children}
-		<button type="button" class={classes.toggle()} onclick={() => (open = !open)}>
-			<ChevronRight class="{classes.chevron()} {open ? 'rotate-90' : ''}" aria-hidden="true" />
-			<span>Show code</span>
-		</button>
-		{#if open}
-			<div class={classes.body()}>
-				{@render children()}
-			</div>
+		{#if children}
+			<button type="button" class={classes.toggle()} onclick={() => (open = !open)}>
+				<ChevronRight class="{classes.chevron()} {open ? 'rotate-90' : ''}" aria-hidden="true" />
+				<span>Show code</span>
+			</button>
+			{#if open}
+				<div class={classes.body()}>
+					{@render children()}
+				</div>
+			{/if}
 		{/if}
-	{/if}
-</div>
+	</div>
+{/if}
diff --git a/web/src/lib/components/ui/MarkdownEditor.svelte b/web/src/lib/components/ui/MarkdownEditor.svelte
index d5eaeb06..07296316 100644
--- a/web/src/lib/components/ui/MarkdownEditor.svelte
+++ b/web/src/lib/components/ui/MarkdownEditor.svelte
@@ -39,8 +39,7 @@
 	// height and inset — otherwise the whole editor resizes every time you switch tabs.
 	const pane = `rounded border border-border-default px-2.5 py-2 ${textareaMinHeight}`;
 
-	let previewHtml = $state<string | null>(null);
-	let previewing = $state(false);
+	let preview = $state<Promise<string> | null>(null);
 	let textareaEl = $state<HTMLTextAreaElement>();
 
 	// focus on mount (and when returning to the write tab) if requested
@@ -49,28 +48,16 @@
 	});
 
 	$effect(() => {
-		if (tab !== "preview") return;
+		if (tab !== "preview") {
+			preview = null;
+			return;
+		}
 		const source = value;
 		if (!source.trim()) {
-			previewHtml = null;
-			previewing = false;
+			preview = null;
 			return;
 		}
-		let cancelled = false;
-		previewing = true;
-		renderMarkup(source, markup)
-			.then((html) => {
-				if (!cancelled) previewHtml = html;
-			})
-			.catch(() => {
-				if (!cancelled) previewHtml = null;
-			})
-			.finally(() => {
-				if (!cancelled) previewing = false;
-			});
-		return () => {
-			cancelled = true;
-		};
+		preview = renderMarkup(source, markup).then((html) => html ?? "");
 	});
 	// ctrl/cmd+enter submits the enclosing form, mirroring the old htmx editor
 	const handleKeydown: KeyboardEventHandler<HTMLTextAreaElement> = (e) => {
@@ -116,14 +103,24 @@
 			onkeydown={handleKeydown}
 			class={transparent ? "bg-transparent" : undefined}
 		/>
-	{:else if previewHtml}
-		<div class={`markup ${pane} ${surface}`}>
-			<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
-			{@html previewHtml}
-		</div>
 	{:else}
-		<div class={`${pane} ${surface} text-sm text-foreground-subtle italic`}>
-			{previewing ? "Rendering…" : "Nothing to preview."}
-		</div>
+		{#await preview}
+			<div class={`${pane} ${surface} text-sm text-foreground-subtle italic`}>Rendering…</div>
+		{:then html}
+			{#if html}
+				<div class={`markup ${pane} ${surface}`}>
+					<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
+					{@html html}
+				</div>
+			{:else}
+				<div class={`${pane} ${surface} text-sm text-foreground-subtle italic`}>
+					Nothing to preview.
+				</div>
+			{/if}
+		{:catch}
+			<div class={`${pane} ${surface} text-sm text-foreground-subtle italic`}>
+				Could not render preview.
+			</div>
+		{/await}
 	{/if}
 </div>
diff --git a/web/src/lib/optimistic.svelte.ts b/web/src/lib/optimistic.svelte.ts
index ba036ff6..012c0725 100644
--- a/web/src/lib/optimistic.svelte.ts
+++ b/web/src/lib/optimistic.svelte.ts
@@ -64,7 +64,9 @@ export interface OptimisticRelation {
 	readonly rkey: string | null;
 	readonly known: boolean;
 	readonly active: boolean;
+	readonly loading: boolean;
 	readonly failed: boolean;
+	begin(): void;
 	created(rkey: string): void;
 	deleted(): void;
 	fail(): void;
@@ -74,22 +76,24 @@ export interface OptimisticRelation {
 export const createOptimisticRelation = (
 	options: OptimisticRelationOptions
 ): OptimisticRelation => {
-	let failed = $state(false);
+	let status = $state<"idle" | "loading" | "failed">("idle");
 	let committed = $state<null | { key: string; rkey: string | null }>(null);
 	const currentKey = $derived(options.key());
 	const loaded = $derived(options.loadedRkey());
 	const rkey = $derived(committed?.key === currentKey ? committed.rkey : (loaded ?? null));
+	const known = $derived(loaded !== undefined || committed?.key === currentKey);
+	const active = $derived(rkey !== null);
 
 	$effect(() => {
 		if (committed === null) return;
 		if (committed.key !== currentKey || loaded === committed.rkey) {
 			committed = null;
-			failed = false;
+			status = "idle";
 		}
 	});
 
 	const set = (next: string | null): void => {
-		failed = false;
+		status = "idle";
 		committed = { key: currentKey, rkey: next };
 	};
 
@@ -98,21 +102,27 @@ export const createOptimisticRelation = (
 			return rkey;
 		},
 		get known() {
-			return loaded !== undefined || committed?.key === currentKey;
+			return known;
 		},
 		get active() {
-			return rkey !== null;
+			return active;
+		},
+		get loading() {
+			return status === "loading";
 		},
 		get failed() {
-			return failed;
+			return status === "failed";
+		},
+		begin() {
+			status = "loading";
 		},
 		created: set,
 		deleted: () => set(null),
 		fail() {
-			failed = true;
+			status = "failed";
 		},
 		resetFailure() {
-			failed = false;
+			status = "idle";
 		}
 	};
 };
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index d115b13f..0d9bea87 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -46,7 +46,7 @@
 			<Topbar
 				user={auth.currentUser}
 				variant={topbarVariant}
-				loading={auth.authenticating || auth.profileLoading}
+				loading={auth.state.kind === "authenticating" || auth.state.kind === "profile-loading"}
 				onSignOut={auth.signOut}
 			/>
 		</header>
diff --git a/web/src/routes/[handle]/[repo]/issues/[aturi]/+page.svelte b/web/src/routes/[handle]/[repo]/issues/[aturi]/+page.svelte
index 03fa33c6..905809ae 100644
--- a/web/src/routes/[handle]/[repo]/issues/[aturi]/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/issues/[aturi]/+page.svelte
@@ -19,6 +19,7 @@
 	import type { IssueRecord, RecordView } from "$lib/api/records";
 	import type { ThreadInput } from "$lib/components/comment/comments";
 	import { getAuth } from "$lib/auth.svelte";
+	import { createAction } from "$lib/action.svelte";
 
 	let { data } = $props();
 
@@ -30,8 +31,6 @@
 	const issuesBase = $derived(`/${data.repo.ownerHandle}/${data.repo.name}/issues`);
 
 	let editing = $state(false);
-	let deleting = $state(false);
-	let deleteError = $state<string | null>(null);
 
 	let comments = $derived(data.comments);
 
@@ -75,19 +74,17 @@
 		editing = false;
 	};
 
-	const handleDelete = async () => {
+	const removeIssue = createAction(async () => {
 		const agent = auth.agent;
-		if (!agent || deleting) return;
+		if (!agent) return;
+		await deleteIssue(agent, issue.rkey);
+		await goto(resolve(issuesBase as "/"));
+	});
+
+	const handleDelete = () => {
+		if (!auth.agent || removeIssue.loading) return;
 		if (!confirm("Delete this issue? This cannot be undone.")) return;
-		deleting = true;
-		deleteError = null;
-		try {
-			await deleteIssue(agent, issue.rkey);
-			await goto(resolve(issuesBase as "/"));
-		} catch (err) {
-			deleteError = err instanceof Error ? err.message : "Failed to delete issue";
-			deleting = false;
-		}
+		void removeIssue.run();
 	};
 </script>
 
@@ -110,7 +107,7 @@
 	<button
 		type="button"
 		aria-label="Delete issue"
-		disabled={deleting}
+		disabled={removeIssue.loading}
 		class="cursor-pointer text-foreground-danger hover:text-foreground-danger-strong disabled:opacity-50"
 		onclick={handleDelete}
 	>
@@ -144,15 +141,10 @@
 					actions={isAuthor ? issueActions : undefined}
 				/>
 				<IssueBody body={issue.body} bodyHtml={issue.bodyHtml} />
-				<Reactions
-					reactions={issue.reactions}
-					subjectUri={issue.uri}
-					alwaysShow
-					class="mt-2"
-				/>
-				{#if deleteError}
+				<Reactions reactions={issue.reactions} subjectUri={issue.uri} alwaysShow class="mt-2" />
+				{#if removeIssue.error}
 					<div class="mt-3">
-						<ErrorAlert label={deleteError} />
+						<ErrorAlert label={removeIssue.error} />
 					</div>
 				{/if}
 			{/if}
diff --git a/web/src/routes/login/+page.svelte b/web/src/routes/login/+page.svelte
index 7b41aa93..c7537c98 100644
--- a/web/src/routes/login/+page.svelte
+++ b/web/src/routes/login/+page.svelte
@@ -3,6 +3,7 @@
 	import { resolve } from "$app/paths";
 	import { page } from "$app/state";
 	import { getAuth } from "$lib/auth.svelte";
+	import { createAction } from "$lib/action.svelte";
 	import Button from "$lib/components/ui/Button.svelte";
 	import CircleAlert from "$icon/circle-alert";
 	import { onMount } from "svelte";
@@ -13,7 +14,10 @@
 	const returnTo = $derived(page.url.searchParams.get("return_url") ?? "/");
 
 	let identifier = $state(page.url.searchParams.get("identifier") ?? "");
-	let isSubmitting = $state(false);
+	const login = createAction(async (event: SubmitEvent) => {
+		event.preventDefault();
+		await auth.signIn(identifier, returnTo);
+	});
 
 	onMount(() => {
 		if (browser && location.hostname === "localhost") {
@@ -22,16 +26,6 @@
 			location.replace(url);
 		}
 	});
-
-	const submit = async (event: SubmitEvent) => {
-		event.preventDefault();
-		isSubmitting = true;
-		try {
-			await auth.signIn(identifier, returnTo);
-		} finally {
-			isSubmitting = false;
-		}
-	};
 </script>
 
 <svelte:head>
@@ -48,13 +42,13 @@
 		</p>
 	</div>
 
-	<form class="mt-4" onsubmit={submit}>
+	<form class="mt-4" onsubmit={login.run}>
 		<div class="flex flex-col">
 			<label for="identifier" class="py-2 text-sm text-foreground-default">Handle</label>
 			<input
 				id="identifier"
 				bind:value={identifier}
-				disabled={isSubmitting}
+				disabled={login.loading}
 				type="text"
 				autocomplete="username"
 				autocapitalize="none"
@@ -68,12 +62,12 @@
 				Use your <span class="text-foreground-default">AT Protocol</span> handle to log in. If
 				you're unsure, this is likely your Tangled
 				<code
-					class="rounded-sm bg-background-inset px-1 font-mono typography-monospace-small text-foreground-default"
+					class="rounded-sm bg-background-inset px-1 typography-monospace-small font-mono text-foreground-default"
 					>(.tngl.sh)</code
 				>
 				or Bluesky
 				<code
-					class="rounded-sm bg-background-inset px-1 font-mono typography-monospace-small text-foreground-default"
+					class="rounded-sm bg-background-inset px-1 typography-monospace-small font-mono text-foreground-default"
 					>(.bsky.social)</code
 				>
 				account.
@@ -83,10 +77,9 @@
 		<Button
 			type="submit"
 			size="sm"
-			disabled={isSubmitting}
-			loading={isSubmitting}
+			loading={login.loading}
 			spinnerClass="size-4"
-			aria-label={isSubmitting ? "Logging in" : undefined}
+			aria-label={login.loading ? "Logging in" : undefined}
 			class="my-2 mt-6 w-full typography-paragraph-large disabled:opacity-100"
 		>
 			Login
@@ -100,14 +93,14 @@
 		on Tangled now!
 	</p>
 
-	{#if auth.error}
+	{#if auth.state.kind === "failed"}
 		<div
 			class="my-2 flex gap-2 rounded-sm border border-border-danger bg-background-danger-subtle px-3 py-2 text-foreground-danger shadow-xs"
 		>
 			<span class="py-1" aria-hidden="true"><CircleAlert class="size-4" /></span>
 			<div>
 				<h5 class="font-medium">Login error</h5>
-				<p class="text-sm">{auth.error} Please try again.</p>
+				<p class="text-sm">{auth.state.message} Please try again.</p>
 			</div>
 		</div>
 	{/if}
diff --git a/web/src/routes/oauth/callback/+page.svelte b/web/src/routes/oauth/callback/+page.svelte
index 773542fa..05ac5d68 100644
--- a/web/src/routes/oauth/callback/+page.svelte
+++ b/web/src/routes/oauth/callback/+page.svelte
@@ -23,9 +23,9 @@
 	<title>Signing in &middot; Tangled</title>
 </svelte:head>
 
-{#if auth.error}
+{#if auth.state.kind === "failed"}
 	<section class="mx-auto flex max-w-md flex-col items-center gap-4 px-7 py-16 text-center">
-		<p class="typography-paragraph-large text-foreground-danger">{auth.error}</p>
+		<p class="typography-paragraph-large text-foreground-danger">{auth.state.message}</p>
 		<a href={appPath("/login")} class="inline-flex underline">Try again</a>
 	</section>
 {:else}
diff --git a/web/src/routes/settings/keys/new/+page.svelte b/web/src/routes/settings/keys/new/+page.svelte
index 11a7616f..eaf623b3 100644
--- a/web/src/routes/settings/keys/new/+page.svelte
+++ b/web/src/routes/settings/keys/new/+page.svelte
@@ -3,6 +3,7 @@
 	import { resolve } from "$app/paths";
 	import { getAuth } from "$lib/auth.svelte";
 	import { createPubKey } from "$lib/api/settings";
+	import { createAction } from "$lib/action.svelte";
 	import Button from "$lib/components/ui/Button.svelte";
 	import Input from "$lib/components/ui/Input.svelte";
 	import ErrorAlert from "$lib/components/ui/Error.svelte";
@@ -17,23 +18,15 @@
 
 	let name = $state("");
 	let key = $state("");
-	let submitting = $state(false);
-	let error = $state<string | null>(null);
 
 	const valid = $derived(name.trim().length > 0 && key.trim().length > 0);
 
-	const submit = async () => {
+	const save = createAction(async () => {
 		if (!auth.agent || !valid) return;
-		submitting = true;
-		error = null;
-		try {
-			await createPubKey(auth.agent, name.trim(), key.trim());
-			await goto(resolve("/settings/keys"));
-		} catch (err) {
-			error = err instanceof Error ? err.message : "Failed to add key";
-			submitting = false;
-		}
-	};
+		await createPubKey(auth.agent, name.trim(), key.trim());
+		await goto(resolve("/settings/keys"));
+	});
+	const submit = save.run;
 </script>
 
 <DrillDown
@@ -42,9 +35,7 @@
 	title="Add SSH key"
 	description="SSH keys allow you to push to repositories in knots you're a member of."
 >
-	{#if error}
-		<ErrorAlert label={error} />
-	{/if}
+	<ErrorAlert label={save.error} />
 
 	<SettingsList padding="tight">
 		<FormRow label="Title" for="key-title">
@@ -57,7 +48,7 @@
 
 	<FormActions>
 		<Button href="/settings/keys" icon={X}>Cancel</Button>
-		<Button variant="primary" icon={Plus} disabled={!valid} loading={submitting} onclick={submit}>
+		<Button variant="primary" icon={Plus} disabled={!valid} loading={save.loading} onclick={submit}>
 			Add
 		</Button>
 	</FormActions>