refactor: split out plc-applicator tool into components

src/api/utils/auth.ts

···
+export const TOTP_RE = /^([a-zA-Z0-9]{5})[\- ]?([a-zA-Z0-9]{5})$/;
+
+export const formatTotpCode = (code: string) => {
+	const match = TOTP_RE.exec(code);
+	if (match !== null) {
+		return `${match[1]}-${match[2]}`.toUpperCase();
+	}
+
+	return undefined;
+};

src/api/utils/types.ts

···
+export type UnwrapArray<T> = T extends (infer V)[] ? V : never;
+export type AccessorMaybe<T> = T | (() => T);

src/components/inputs/button.tsx

···
+import { JSX } from 'solid-js';
+
+interface ButtonProps {
+	children?: JSX.Element;
+	variant?: 'primary' | 'secondary';
+	type?: 'button' | 'submit';
+	onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;
+}
+
+const buttonStyles = ({ variant = 'primary' }: ButtonProps): string => {
+	let cn = `flex h-9 select-none items-center rounded px-4 text-sm font-semibold`;
+
+	if (variant === 'primary') {
+		cn += ` bg-purple-800 text-white hover:bg-purple-700 active:bg-purple-700`;
+	} else if (variant === 'secondary') {
+		cn += ` bg-gray-200 text-black hover:bg-gray-300 active:bg-gray-300`;
+	}
+
+	return cn;
+};
+
+const Button = (props: ButtonProps) => {
+	return (
+		<button type={props.type ?? 'button'} class={buttonStyles(props)} onClick={props.onClick}>
+			{props.children}
+		</button>
+	);
+};
+
+export default Button;

src/components/inputs/multiline-input.tsx

···
+import { createEffect, JSX } from 'solid-js';
+
+import { createId } from '~/lib/hooks/id';
+
+interface MultilineInputProps {
+	label: JSX.Element;
+	name?: string;
+	required?: boolean;
+	autocomplete?: 'off' | 'on';
+	autocorrect?: 'off' | 'on';
+	value?: string;
+	autofocus?: boolean;
+	onChange?: (next: string) => void;
+}
+
+const MultilineInput = (props: MultilineInputProps) => {
+	const fieldId = createId();
+
+	const onChange = props.onChange;
+
+	return (
+		<div class="flex flex-col gap-2">
+			<label for={fieldId} class="font-semibold text-gray-600">
+				{props.label}
+			</label>
+
+			<textarea
+				ref={(node) => {
+					if ('autofocus' in props) {
+						createEffect(() => {
+							if (props.autofocus) {
+								node.focus();
+							}
+						});
+					}
+				}}
+				name={props.name}
+				required={props.required}
+				autocomplete={props.autocomplete}
+				// @ts-expect-error
+				autocorrect={props.autocorrect}
+				rows={22}
+				value={props.value}
+				class="resize-y break-all rounded border border-gray-400 px-3 py-2 font-mono text-xs tracking-wider placeholder:text-gray-400 focus:border-purple-800 focus:ring-1 focus:ring-purple-800 focus:ring-offset-0"
+				style="field-sizing: content"
+				onChange={(ev) => onChange?.(ev.target.value)}
+			/>
+		</div>
+	);
+};
+
+export default MultilineInput;

src/components/inputs/radio-input.tsx

···
+import { JSX } from 'solid-js';
+
+import { createId } from '~/lib/hooks/id';
+
+interface RadioInputProps<T extends string> {
+	label: JSX.Element;
+	name?: string;
+	required?: boolean;
+	value?: T | undefined;
+	options: { value: T; label: string }[];
+	onChange?: (next: T) => void;
+}
+
+const RadioInput = <T extends string>(props: RadioInputProps<T>) => {
+	const fieldId = createId();
+
+	const onChange = props.onChange;
+	const hasValue = 'value' in props;
+
+	return (
+		<fieldset class="flex flex-col gap-2">
+			<legend class="contents">
+				<span class="font-semibold text-gray-600">{props.label}</span>
+			</legend>
+
+			{props.options.map(({ value, label }, idx) => {
+				const optionId = fieldId + idx;
+
+				return (
+					<span class="flex items-center gap-3">
+						<input
+							type="radio"
+							id={optionId}
+							name={props.name ?? fieldId}
+							required={props.required}
+							value={value}
+							checked={hasValue ? props.value === value : false}
+							class="border-gray-400 text-purple-800 focus:ring-purple-800"
+							onInput={() => onChange?.(value)}
+						/>
+
+						<label for={optionId} class="text-sm">
+							{label}
+						</label>
+					</span>
+				);
+			})}
+		</fieldset>
+	);
+};
+
+export default RadioInput;

src/components/inputs/select-input.tsx

···
+import { createEffect, JSX } from 'solid-js';
+
+import { createId } from '~/lib/hooks/id';
+
+interface SelectInputProps<T extends string> {
+	label: JSX.Element;
+	blurb?: string;
+	name?: string;
+	required?: boolean;
+	value?: T;
+	autofocus?: boolean;
+	options: { value: T; label: string; disabled?: boolean }[];
+	onChange?: (next: T) => void;
+}
+
+const SelectInput = <T extends string>(props: SelectInputProps<T>) => {
+	const fieldId = createId();
+
+	const onChange = props.onChange;
+
+	return (
+		<div class="flex flex-col gap-2">
+			<label for={fieldId} class="font-semibold text-gray-600">
+				{props.label}
+			</label>
+
+			<select
+				ref={(node) => {
+					if ('autofocus' in props) {
+						createEffect(() => {
+							if (props.autofocus) {
+								node.focus();
+							}
+						});
+					}
+				}}
+				id={fieldId}
+				name={props.name}
+				required={props.required}
+				value={props.value ?? ''}
+				class="rounded border border-gray-400 py-2 pl-3 pr-8 text-sm focus:border-purple-800 focus:ring-1 focus:ring-purple-800 focus:ring-offset-0"
+				onChange={(ev) => onChange?.(ev.target.value as T)}
+			>
+				{props.options.map((props) => {
+					return (
+						<option value={/* @once */ props.value} disabled={props.disabled}>
+							{props.label}
+						</option>
+					);
+				})}
+			</select>
+
+			<p class="text-pretty text-[0.8125rem] leading-5 text-gray-500 empty:hidden">{props.blurb}</p>
+		</div>
+	);
+};
+
+export default SelectInput;

src/components/inputs/text-input.tsx

···
+import { createEffect, JSX } from 'solid-js';
+import { createId } from '~/lib/hooks/id';
+
+interface TextInputProps {
+	label: JSX.Element;
+	blurb?: JSX.Element;
+	monospace?: boolean;
+	type?: 'text' | 'password' | 'url' | 'email';
+	name?: string;
+	required?: boolean;
+	autocomplete?: 'off' | 'on' | 'one-time-code';
+	autocorrect?: 'off' | 'on';
+	pattern?: string;
+	placeholder?: string;
+	value?: string;
+	autofocus?: boolean;
+	onChange?: (next: string) => void;
+}
+
+const textInputStyles = ({ monospace = false }: TextInputProps) => {
+	let cn = `rounded border border-gray-400 px-3 py-2 text-sm placeholder:text-gray-400 focus:border-purple-800 focus:ring-1 focus:ring-purple-800 focus:ring-offset-0`;
+
+	if (monospace) {
+		cn += ` font-mono tracking-wide`;
+	}
+
+	return cn;
+};
+
+const TextInput = (props: TextInputProps) => {
+	const fieldId = createId();
+
+	const onChange = props.onChange;
+
+	return (
+		<div class="flex flex-col gap-2">
+			<label for={fieldId} class="font-semibold text-gray-600">
+				{props.label}
+			</label>
+
+			<input
+				ref={(node) => {
+					if ('autofocus' in props) {
+						createEffect(() => {
+							if (props.autofocus) {
+								node.focus();
+							}
+						});
+					}
+				}}
+				type={props.type ?? 'text'}
+				id={fieldId}
+				name={props.type}
+				required={props.required}
+				autocomplete={props.autocomplete}
+				pattern={props.pattern}
+				placeholder={props.placeholder}
+				value={props.value ?? ''}
+				class={textInputStyles(props)}
+				onChange={(ev) => onChange?.(ev.target.value)}
+			/>
+
+			<p class="text-pretty text-[0.8125rem] leading-5 text-gray-500 empty:hidden">{props.blurb}</p>
+		</div>
+	);
+};
+
+export default TextInput;

src/components/wizard.tsx

···
+import { Component, createMemo, createSignal, For, JSX } from 'solid-js';
+
+type EmptyObjectKeys<T> = {
+	[K in keyof T]: T[K] extends Record<string, never> ? K : never;
+}[keyof T];
+
+export type WizardConstraints = Record<string, Record<string, any>>;
+
+export interface WizardStepProps<TConstraints extends WizardConstraints, TStep extends keyof TConstraints> {
+	data: TConstraints[TStep];
+	isActive: () => boolean;
+	onNext: <TNext extends keyof TConstraints>(step: TNext, data: TConstraints[TNext]) => void;
+	onPrevious: () => void;
+}
+
+export interface WizardProps<TConstraints extends WizardConstraints> {
+	initialStep: EmptyObjectKeys<TConstraints>;
+	components: {
+		[TStep in keyof TConstraints]: Component<WizardStepProps<TConstraints, TStep>>;
+	};
+	onStepChange?: (step: number) => void;
+}
+
+interface HistoryEntry<TConstraints extends WizardConstraints> {
+	step: keyof TConstraints;
+	data: TConstraints[keyof TConstraints];
+}
+
+export const Wizard = <TConstraints extends WizardConstraints>(props: WizardProps<TConstraints>) => {
+	const components = props.components;
+	const onStepChange = props.onStepChange;
+
+	const [history, setHistory] = createSignal<HistoryEntry<TConstraints>[]>([
+		// @ts-expect-error
+		{ step: props.initialStep, data: {} },
+	]);
+
+	const current = createMemo(() => {
+		return history().length - 1;
+	});
+
+	const handleNext = <TNext extends keyof TConstraints>(step: TNext, data: TConstraints[TNext]) => {
+		const entries = history();
+
+		setHistory([...entries, { step, data }]);
+		onStepChange?.(entries.length + 1);
+	};
+
+	const handleBack = () => {
+		const entries = history();
+
+		if (entries.length > 1) {
+			setHistory(entries.slice(0, -1));
+			onStepChange?.(entries.length - 1);
+		}
+	};
+
+	return (
+		<div class="pb-8">
+			<For each={history()}>
+				{({ step, data }, index) => {
+					const Component = components[step];
+
+					const isActive = createMemo(() => current() === index());
+
+					return (
+						<fieldset
+							disabled={!isActive()}
+							class={`flex min-w-0 gap-4 px-4` + (!isActive() ? ` opacity-50` : ``)}
+						>
+							<div class="flex flex-col items-center gap-1 pt-4">
+								<div class="grid h-6 w-6 place-items-center rounded-full bg-gray-200 py-1 text-center text-sm font-medium leading-none text-black">
+									{'' + (index() + 1)}
+								</div>
+								<div hidden={isActive()} class="-mb-3 grow border-l border-gray-400"></div>
+							</div>
+
+							<Component data={data} isActive={isActive} onNext={handleNext} onPrevious={handleBack} />
+						</fieldset>
+					);
+				}}
+			</For>
+		</div>
+	);
+};
+
+export interface StageProps {
+	title: string;
+	disabled?: boolean;
+	onSubmit?: JSX.EventHandler<HTMLFormElement, SubmitEvent>;
+	children: JSX.Element;
+}
+
+export const Stage = (props: StageProps) => {
+	const onSubmit = props.onSubmit;
+
+	return (
+		<form
+			onSubmit={(ev) => {
+				ev.preventDefault();
+				onSubmit?.(ev);
+			}}
+			class="flex min-w-0 grow flex-col py-4"
+		>
+			<h3 class="mb-[1.125rem] mt-0.5 text-sm font-semibold">{props.title}</h3>
+			<fieldset
+				disabled={props.disabled}
+				class={`flex min-w-0 flex-col gap-6` + (props.disabled ? ` opacity-50` : ``)}
+			>
+				{props.children}
+			</fieldset>
+		</form>
+	);
+};
+
+export interface StageActionsProps {
+	hidden?: boolean;
+	children: JSX.Element;
+}
+
+export interface StageActionsDividerProps {}
+
+export const StageActions = (props: StageActionsProps) => {
+	return (
+		<div hidden={props.hidden} class="flex flex-wrap gap-4">
+			{props.children}
+		</div>
+	);
+};
+
+StageActions.Divider = (_props: StageActionsDividerProps) => {
+	return <div class="grow"></div>;
+};
+
+export interface StageErrorViewProps {
+	error: string | undefined;
+}
+
+export const StageErrorView = (props: StageErrorViewProps) => {
+	return (
+		<div
+			hidden={!props.error}
+			class="whitespace-pre-wrap text-[0.8125rem] font-medium leading-5 text-red-800"
+		>
+			{'' + props.error}
+		</div>
+	);
+};

src/lib/hooks/id.ts

···
+let uid = 0;
+
+export const createId = () => {
+	return `_${uid++}_`;
+};

src/lib/utils/confirmation-code.ts

···
+import { customAlphabet } from 'nanoid';
+
+const generateCode = customAlphabet('ABCDEFGHIJKLMNOPQRSTUVWXYZ234567', 10);
+
+export const generateConfirmationCode = () => {
+	const code = generateCode();
+	return `${code.slice(0, 5)}-${code.slice(5, 10)}`;
+};

src/lib/utils/mutation.ts

···
+import { createSignal } from 'solid-js';
+import { makeAbortable } from './abortable';
+
+export interface SuccessMutationState<D, V> {
+	data: D;
+	error: undefined;
+	variables: V;
+	isSuccess: true;
+	isError: false;
+	isPending: false;
+	isIdle: false;
+}
+
+export interface ErrorMutationState<V> {
+	data: undefined;
+	error: unknown;
+	variables: V;
+	isSuccess: false;
+	isError: true;
+	isPending: false;
+	isIdle: false;
+}
+
+export interface PendingMutationState<V> {
+	data: undefined;
+	error: undefined;
+	variables: V;
+	isSuccess: false;
+	isError: false;
+	isPending: true;
+	isIdle: false;
+}
+
+export interface IdleMutationState {
+	data: undefined;
+	error: undefined;
+	variables: undefined;
+	isSuccess: false;
+	isError: false;
+	isPending: false;
+	isIdle: true;
+}
+
+export type MutationReturn<D, V> = (
+	| IdleMutationState
+	| PendingMutationState<V>
+	| SuccessMutationState<D, V>
+	| ErrorMutationState<V>
+) & {
+	mutate(variables: V): void;
+	mutateAsync(variables: V): Promise<D>;
+};
+
+type MutationFunction<D = unknown, V = unknown> = (variables: V, signal: AbortSignal) => Promise<D>;
+
+export interface MutationOptions<D = unknown, V = unknown> {
+	mutationFn: MutationFunction<D, V>;
+	onMutate?: (variables: V) => void;
+	onSuccess?: (data: NoInfer<D>, variables: NoInfer<V>) => void;
+	onError?: (error: unknown, variables: NoInfer<V>) => void;
+	onSettled?: (data: NoInfer<D> | undefined, error: unknown, variables: NoInfer<V>) => void;
+}
+
+const enum MutationState {
+	IDLE,
+	PENDING,
+	SUCCESS,
+	ERROR,
+}
+
+export const createMutation = <D, V = void>(options: MutationOptions<D, V>): MutationReturn<D, V> => {
+	const [getSignal, cleanup] = makeAbortable();
+	const [state, setState] = createSignal<{ s: MutationState; v?: any; d?: any; e?: any }>(
+		{ s: MutationState.IDLE },
+		{ equals: (prev, next) => prev.s === next.s },
+	);
+
+	const mutate = async (variables: V): Promise<D> => {
+		const signal = getSignal();
+
+		setState({ s: MutationState.PENDING, v: variables });
+
+		try {
+			options.onMutate?.(variables);
+
+			const data = await options.mutationFn(variables, signal);
+
+			if (!signal.aborted) {
+				options.onSuccess?.(data, variables);
+				options.onSettled?.(data, undefined, variables);
+
+				setState({ s: MutationState.SUCCESS, v: variables, d: data });
+			}
+
+			return data;
+		} catch (err) {
+			if (!signal.aborted) {
+				options.onError?.(err, variables);
+				options.onSettled?.(undefined, err, variables);
+
+				setState({ s: MutationState.ERROR, v: variables, e: err });
+			}
+
+			throw err;
+		} finally {
+			if (!signal.aborted) {
+				cleanup();
+			}
+		}
+	};
+
+	return {
+		get data() {
+			const $state = state();
+			if ($state.s === MutationState.SUCCESS) {
+				return $state.d;
+			}
+		},
+		get error() {
+			const $state = state();
+			if ($state.s === MutationState.ERROR) {
+				return $state.e;
+			}
+		},
+		get variables() {
+			return state().v;
+		},
+		get isSuccess() {
+			return state().s === MutationState.SUCCESS;
+		},
+		get isError() {
+			return state().s === MutationState.ERROR;
+		},
+		get isPending() {
+			return state().s === MutationState.PENDING;
+		},
+		get isIdle() {
+			return state().s === MutationState.IDLE;
+		},
+		mutateAsync: mutate,
+		mutate: (variables: V) => mutate(variables).then(noop, noop),
+	} as any;
+};
+
+const noop = () => {};

src/routes.ts

···
 	},
 	{
 		path: '/plc-applicator',
-		component: lazy(() => import('./views/identity/plc-applicator')),
+		component: lazy(() => import('./views/identity/plc-applicator/page')),
 	},
 
 	{

src/views/identity/plc-applicator.tsx

···
-import { createEffect, createSignal, JSX, Match, onCleanup, Show, Switch } from 'solid-js';
-import { createMutable, unwrap } from 'solid-js/store';
-
-import * as CBOR from '@atcute/cbor';
-import { AtpSessionData, CredentialManager, XRPC, XRPCError } from '@atcute/client';
-import { At, ComAtprotoIdentityGetRecommendedDidCredentials } from '@atcute/client/lexicons';
-
-import { P256Keypair, Secp256k1Keypair, verifySignature } from '@atproto/crypto';
-import * as uint8arrays from 'uint8arrays';
-
-import { getDidDocument } from '~/api/queries/did-doc';
-import { resolveHandleViaAppView } from '~/api/queries/handle';
-import { getPlcAuditLogs } from '~/api/queries/plc';
-import { DidDocument, getPdsEndpoint } from '~/api/types/did-doc';
-import { PlcLogEntry, PlcUpdateOp, PlcUpdatePayload, updatePayload } from '~/api/types/plc';
-import { DID_OR_HANDLE_RE, isDid } from '~/api/utils/strings';
-
-import { history } from '~/globals/navigation';
-
-import { useTitle } from '~/lib/navigation/router';
-import { assert } from '~/lib/utils/invariant';
-
-const EMAIL_OTP_RE = /^([a-zA-Z0-9]{5})[\- ]?([a-zA-Z0-9]{5})$/;
-
-const PlcUpdatePage = () => {
-	const [step, setStep] = createSignal(1);
-	const [pending, setPending] = createSignal(false);
-
-	const [error, setError] = createSignal<{ step: number; message: string }>();
-
-	const states = createMutable<{
-		didDoc?: DidDocument;
-		logs?: Awaited<ReturnType<typeof getPlcKeying>>;
-
-		rotationKeyType?: 'owned' | 'pds';
-		ownedRotationKey?: {
-			keypair: P256Keypair | Secp256k1Keypair;
-			didPublicKey: string;
-		};
-		pdsData?: {
-			service: string;
-			session: AtpSessionData;
-			rpc: XRPC;
-			recommendedDidDoc: ComAtprotoIdentityGetRecommendedDidCredentials.Output;
-		};
-		accountHasOtp?: boolean;
-
-		prev?: PlcLogEntry;
-		payload?: PlcUpdatePayload;
-	}>({});
-
-	useTitle(() => `Apply PLC operations — boat`);
-
-	createEffect(() => {
-		const $step = step();
-		if (($step > 1 && $step < 6) || pending()) {
-			const cleanup = history.block((tx) => {
-				if (window.confirm(`Abort this action?`)) {
-					cleanup();
-					tx.retry();
-				}
-			});
-
-			onCleanup(cleanup);
-		}
-	});
-
-	return (
-		<fieldset disabled={pending()} class="contents">
-			<div class="p-4">
-				<h1 class="text-lg font-bold text-purple-800">Apply PLC operations</h1>
-				<p class="text-gray-600">Submit operations to your did:plc identity</p>
-			</div>
-			<hr class="mx-4 border-gray-300" />
-
-			<StepPage
-				step={1}
-				title="Enter the did:plc identity you want to edit"
-				current={step()}
-				onSubmit={async (form) => {
-					try {
-						setPending(true);
-						setError();
-
-						const identifier = form.get('ident') as string;
-						const rotation = form.get('rotation') as 'owned' | 'pds';
-
-						let did: At.DID;
-						if (isDid(identifier)) {
-							did = identifier;
-						} else {
-							did = await resolveHandleViaAppView({ handle: identifier });
-						}
-
-						if (!did.startsWith('did:plc:')) {
-							setError({ step: 1, message: `"${did}" is not did:plc` });
-							return;
-						}
-
-						const [didDoc, logs] = await Promise.all([getDidDocument({ did }), getPlcAuditLogs({ did })]);
-
-						states.didDoc = didDoc;
-						states.logs = await getPlcKeying(logs);
-
-						states.rotationKeyType = rotation;
-
-						if (rotation === 'owned') {
-							states.pdsData = undefined;
-						} else if (rotation === 'pds') {
-							states.ownedRotationKey = undefined;
-						}
-
-						if (states.pdsData) {
-							if (states.pdsData.session.did !== did) {
-								states.pdsData = undefined;
-								states.accountHasOtp = false;
-							}
-						}
-
-						setStep(2);
-					} catch (err) {
-						console.error(err);
-						setError({ step: 1, message: `Something went wrong: ${err}` });
-					} finally {
-						setPending(false);
-					}
-				}}
-			>
-				<label class="flex flex-col gap-2">
-					<span class="font-semibold text-gray-600">Handle or DID identifier</span>
-					<input
-						ref={(node) => {
-							createEffect(() => {
-								if (step() === 1) {
-									setTimeout(() => node.focus(), 1);
-								}
-							});
-						}}
-						type="text"
-						name="ident"
-						required
-						pattern={/* @once */ DID_OR_HANDLE_RE.source}
-						placeholder="paul.bsky.social"
-						class="rounded border border-gray-400 px-3 py-2 text-sm placeholder:text-gray-400 focus:border-purple-800 focus:ring-1 focus:ring-purple-800 focus:ring-offset-0"
-					/>
-				</label>
-
-				<fieldset class="mt-6 flex flex-col gap-2">
-					<span class="font-semibold text-gray-600">I will be using...</span>
-
-					<label class="flex items-center gap-3">
-						<input
-							type="radio"
-							name="rotation"
-							required
-							value="pds"
-							class="border-gray-400 text-purple-800 focus:ring-purple-800"
-						/>
-						<span class="text-sm">my PDS' rotation key (requires sign in)</span>
-					</label>
-
-					<label class="flex items-center gap-3">
-						<input
-							type="radio"
-							name="rotation"
-							required
-							value="owned"
-							class="border-gray-400 text-purple-800 focus:ring-purple-800"
-						/>
-						<span class="text-sm">my own rotation key</span>
-					</label>
-				</fieldset>
-
-				<ErrorMessageView step={1} error={error()} />
-
-				<div hidden={step() !== 1} class="mt-6 flex flex-wrap gap-4">
-					<div class="grow"></div>
-
-					<button
-						type="submit"
-						class="flex h-9 select-none items-center rounded bg-purple-800 px-4 text-sm font-semibold text-white hover:bg-purple-700 active:bg-purple-700"
-					>
-						Next
-					</button>
-				</div>
-			</StepPage>
-
-			<Switch>
-				<Match when={states.rotationKeyType === 'pds'}>
-					<StepPage
-						step={2}
-						title="Sign in to your PDS"
-						current={step()}
-						onSubmit={async (form) => {
-							if (states.pdsData) {
-								setStep(3);
-								return;
-							}
-
-							assert(states.didDoc);
-
-							try {
-								setPending(true);
-								setError();
-
-								const service = form.get('service') as string;
-								const pass = form.get('pass') as string;
-								const otp = form.get('otp') as string | null;
-
-								const manager = new CredentialManager({ service });
-								const session = await manager.login({
-									identifier: states.didDoc.id,
-									password: pass,
-									code: otp ? formatEmailOtpCode(otp) : undefined,
-								});
-
-								const rpc = new XRPC({ handler: manager });
-								const { data: recommendedDidDoc } = await rpc.get(
-									'com.atproto.identity.getRecommendedDidCredentials',
-									{},
-								);
-
-								const data = {
-									service,
-									session,
-									recommendedDidDoc,
-									rpc,
-								};
-
-								states.pdsData = data;
-								states.accountHasOtp = false;
-
-								setStep(3);
-							} catch (err) {
-								let msg: string | undefined;
-
-								if (err instanceof XRPCError) {
-									if (err.kind === 'AuthFactorTokenRequired') {
-										states.accountHasOtp = true;
-										return;
-									}
-
-									if (err.kind === 'AuthenticationRequired') {
-										msg = `Invalid identifier or password`;
-									} else if (err.kind === 'AccountTakedown') {
-										msg = `Account has been taken down`;
-									} else if (err.message.includes('Token is invalid')) {
-										msg = `Invalid one-time confirmation code`;
-										states.accountHasOtp = true;
-									}
-								}
-
-								if (msg !== undefined) {
-									setError({ step: 2, message: msg });
-								} else {
-									console.error(err);
-									setError({ step: 2, message: `Something went wrong: ${err}` });
-								}
-							} finally {
-								setPending(false);
-							}
-						}}
-					>
-						<Show when={states.pdsData}>
-							{(session) => (
-								<p class="break-words">
-									Signed in via <b>{session().service}</b>.{' '}
-									<button
-										type="button"
-										onClick={() => (states.pdsData = undefined)}
-										hidden={step() !== 2}
-										class="text-purple-800 hover:underline disabled:pointer-events-none"
-									>
-										Sign out?
-									</button>
-								</p>
-							)}
-						</Show>
-
-						<Show when={!states.pdsData}>
-							<label class="flex flex-col gap-2">
-								<span class="font-semibold text-gray-600">PDS service</span>
-								<input
-									type="url"
-									name="service"
-									required
-									value={(states.didDoc && getPdsEndpoint(states.didDoc)) || ''}
-									placeholder="https://bsky.social"
-									class="rounded border border-gray-400 px-3 py-2 text-sm placeholder:text-gray-400 focus:border-purple-800 focus:ring-1 focus:ring-purple-800 focus:ring-offset-0"
-								/>
-							</label>
-
-							<label class="mt-6 flex flex-col gap-2">
-								<span class="font-semibold text-gray-600">Main password</span>
-								<input
-									ref={(node) => {
-										createEffect(() => {
-											if (step() === 2) {
-												setTimeout(() => node.focus(), 1);
-											}
-										});
-									}}
-									type="password"
-									name="pass"
-									required
-									class="rounded border border-gray-400 px-3 py-2 text-sm placeholder:text-gray-400 focus:border-purple-800 focus:ring-1 focus:ring-purple-800 focus:ring-offset-0"
-								/>
-							</label>
-
-							<Show when={states.accountHasOtp}>
-								<label class="mt-6 flex flex-col gap-2">
-									<span class="font-semibold text-gray-600">One-time confirmation code</span>
-									<input
-										type="text"
-										name="otp"
-										required
-										autocomplete="one-time-code"
-										pattern={/* @once */ EMAIL_OTP_RE.source}
-										placeholder="AAAAA-BBBBB"
-										class="rounded border border-gray-400 px-3 py-2 font-mono text-sm tracking-wide placeholder:text-gray-400 focus:border-purple-800 focus:ring-1 focus:ring-purple-800 focus:ring-offset-0"
-									/>
-								</label>
-							</Show>
-
-							<p class="mt-2 text-[0.8125rem] leading-5 text-gray-500">
-								This app runs locally on your browser, your credentials stays entirely within your device.
-							</p>
-						</Show>
-
-						<ErrorMessageView step={2} error={error()} />
-
-						<div hidden={step() !== 2} class="mt-6 flex flex-wrap gap-4">
-							<div class="grow"></div>
-
-							<button
-								type="button"
-								onClick={() => setStep(1)}
-								class="flex h-9 select-none items-center rounded bg-gray-200 px-4 text-sm font-semibold text-black hover:bg-gray-300 active:bg-gray-300"
-							>
-								Previous
-							</button>
-
-							<button
-								type="submit"
-								class="flex h-9 select-none items-center rounded bg-purple-800 px-4 text-sm font-semibold text-white hover:bg-purple-700 active:bg-purple-700"
-							>
-								Next
-							</button>
-						</div>
-					</StepPage>
-				</Match>
-
-				<Match when={states.rotationKeyType === 'owned'}>
-					<StepPage
-						step={2}
-						title="Enter your private key"
-						current={step()}
-						onSubmit={async (form) => {
-							try {
-								setPending(true);
-								setError();
-
-								const key = form.get('key') as string;
-								const type = form.get('type') as 'secp256k1' | 'nistp256';
-
-								let keypair: P256Keypair | Secp256k1Keypair;
-
-								if (type === 'nistp256') {
-									keypair = await P256Keypair.import(key);
-								} else if (type === 'secp256k1') {
-									keypair = await Secp256k1Keypair.import(key);
-								} else {
-									throw new Error(`unsupported '${type}' type`);
-								}
-
-								states.ownedRotationKey = { didPublicKey: keypair.did(), keypair: keypair };
-
-								setStep(3);
-							} catch (err) {
-								let msg: string | undefined;
-
-								if (msg !== undefined) {
-									setError({ step: 2, message: msg });
-								} else {
-									console.error(err);
-									setError({ step: 2, message: `Something went wrong: ${err}` });
-								}
-							} finally {
-								setPending(false);
-							}
-						}}
-					>
-						<label class="flex flex-col gap-2">
-							<span class="font-semibold text-gray-600">Hex-encoded private key</span>
-							<input
-								ref={(node) => {
-									createEffect(() => {
-										if (step() === 2) {
-											setTimeout(() => node.focus(), 1);
-										}
-									});
-								}}
-								type={step() === 2 ? 'text' : 'password'}
-								name="key"
-								required
-								autocomplete="off"
-								autocorrect="off"
-								placeholder="a5973930f9d348..."
-								pattern="[0-9a-f]+"
-								class="rounded border border-gray-400 px-3 py-2 font-mono text-sm placeholder:text-gray-400 focus:border-purple-800 focus:ring-1 focus:ring-purple-800 focus:ring-offset-0"
-							/>
-						</label>
-						<p hidden={step() !== 2} class="mt-2 text-[0.8125rem] leading-5 text-gray-500">
-							This app runs locally on your browser, your private key stays entirely within your device.
-						</p>
-
-						<fieldset class="mt-6 flex flex-col gap-2">
-							<span class="font-semibold text-gray-600">This is a...</span>
-
-							<label class="flex items-start gap-3">
-								<input
-									type="radio"
-									name="type"
-									required
-									value="secp256k1"
-									class="border-gray-400 text-purple-800 focus:ring-purple-800"
-								/>
-								<span class="text-sm">ES256K (secp256k1) private key</span>
-							</label>
-
-							<label class="flex items-start gap-3">
-								<input
-									type="radio"
-									name="type"
-									required
-									value="nistp256"
-									class="border-gray-400 text-purple-800 focus:ring-purple-800"
-								/>
-								<span class="text-sm">ES256 (nistp256) private key</span>
-							</label>
-						</fieldset>
-
-						<ErrorMessageView step={2} error={error()} />
-
-						<div hidden={step() !== 2} class="mt-6 flex flex-wrap gap-4">
-							<div class="grow"></div>
-
-							<button
-								type="button"
-								onClick={() => setStep(1)}
-								class="flex h-9 select-none items-center rounded bg-gray-200 px-4 text-sm font-semibold text-black hover:bg-gray-300 active:bg-gray-300"
-							>
-								Previous
-							</button>
-
-							<button
-								type="submit"
-								class="flex h-9 select-none items-center rounded bg-purple-800 px-4 text-sm font-semibold text-white hover:bg-purple-700 active:bg-purple-700"
-							>
-								Next
-							</button>
-						</div>
-					</StepPage>
-				</Match>
-			</Switch>
-
-			<StepPage
-				step={3}
-				title="Select which operation to use as foundation"
-				current={step()}
-				onSubmit={(form) => {
-					setError();
-
-					const cid = form.get('cid') as string;
-					const entry = states.logs?.find((entry) => entry.cid === cid);
-
-					if (!entry) {
-						setError({ step: 3, message: `Can't find CID ${cid}` });
-						return;
-					}
-
-					const op = entry.operation;
-					if (op.type !== 'plc_operation' && op.type !== 'create') {
-						setError({ step: 3, message: `Expected op to be 'plc_operation' or 'create'` });
-						return;
-					}
-
-					states.prev = entry;
-					states.payload = getPlcPayload(entry);
-
-					setStep(4);
-				}}
-			>
-				<label class="flex flex-col gap-2">
-					<span class="font-semibold text-gray-600">Base operation</span>
-
-					<select
-						ref={(node) => {
-							createEffect(() => {
-								if (step() === 3) {
-									setTimeout(() => node.focus(), 1);
-								}
-							});
-						}}
-						name="cid"
-						value=""
-						required
-						class="rounded border border-gray-400 py-2 pl-3 pr-8 text-sm focus:border-purple-800 focus:ring-1 focus:ring-purple-800 focus:ring-offset-0"
-					>
-						<option value="">Select an operation...</option>
-						{(() => {
-							const logs = states.logs;
-							if (!logs) {
-								return null;
-							}
-
-							const rotationKeyType = states.rotationKeyType;
-
-							let ownKey: string | undefined;
-							if (rotationKeyType === 'pds') {
-								ownKey = states.pdsData?.recommendedDidDoc.rotationKeys?.at(-1);
-							} else if (rotationKeyType === 'owned') {
-								ownKey = states.ownedRotationKey?.didPublicKey;
-							}
-
-							if (ownKey === undefined) {
-								return [];
-							}
-
-							const length = logs.length;
-							const nodes = logs.map((entry, idx) => {
-								const signers = getCurrentSignersFromEntry(entry);
-								const last = idx === length - 1;
-
-								let enabled = signers.includes(ownKey!);
-
-								// If we're showing older operations for forking/nullification,
-								// check to see that our key has priority over the signer.
-								if (enabled && !last) {
-									if (rotationKeyType === 'pds') {
-										// `signPlcOperation` will always grab the last op
-										enabled = false;
-									} else {
-										const holderKey = logs[idx + 1].signedBy;
-
-										const holderPriority = signers.indexOf(holderKey);
-										const ownPriority = signers.indexOf(ownKey);
-
-										enabled = ownPriority < holderPriority;
-									}
-								}
-
-								return (
-									<option disabled={!enabled} value={/* @once */ entry.cid}>
-										{/* @once */ `${entry.createdAt} (by ${entry.signedBy})`}
-									</option>
-								);
-							});
-
-							return nodes.reverse();
-						})()}
-					</select>
-				</label>
-
-				<p class="mt-2 text-[0.8125rem] leading-5 text-gray-500">
-					Some operations can't be used as a base if the rotation key does not have the privilege for
-					nullification, or if it is not listed.
-				</p>
-
-				<ErrorMessageView step={3} error={error()} />
-
-				<div hidden={step() !== 3} class="mt-6 flex flex-wrap gap-4">
-					<div class="grow"></div>
-
-					<button
-						type="button"
-						onClick={() => setStep(2)}
-						class="flex h-9 select-none items-center rounded bg-gray-200 px-4 text-sm font-semibold text-black hover:bg-gray-300 active:bg-gray-300"
-					>
-						Previous
-					</button>
-
-					<button
-						type="submit"
-						class="flex h-9 select-none items-center rounded bg-purple-800 px-4 text-sm font-semibold text-white hover:bg-purple-700 active:bg-purple-700"
-					>
-						Next
-					</button>
-				</div>
-			</StepPage>
-
-			<StepPage
-				step={4}
-				title="Enter your payload"
-				current={step()}
-				onSubmit={(form) => {
-					setError();
-
-					const payload = form.get('payload') as string;
-
-					let json: unknown;
-					try {
-						json = JSON.parse(payload);
-					} catch {
-						setError({ step: 4, message: `Unable to parse JSON` });
-						return;
-					}
-
-					const result = updatePayload.try(json);
-					if (!result.ok) {
-						setError({ step: 4, message: result.message });
-						return;
-					}
-
-					states.payload = result.value;
-
-					setStep(5);
-				}}
-			>
-				<label class="flex flex-col gap-2">
-					<span class="font-semibold text-gray-600">Payload input</span>
-
-					<textarea
-						ref={(node) => {
-							createEffect(() => {
-								if (step() === 4) {
-									setTimeout(() => node.focus(), 1);
-								}
-							});
-						}}
-						name="payload"
-						required
-						rows={22}
-						value={JSON.stringify(states.payload, null, 2)}
-						class="resize-y break-all rounded border border-gray-400 px-3 py-2 font-mono text-xs tracking-wider placeholder:text-gray-400 focus:border-purple-800 focus:ring-1 focus:ring-purple-800 focus:ring-offset-0"
-						style="field-sizing: content"
-					/>
-				</label>
-
-				<div hidden={step() !== 4} class="mt-2 flex flex-wrap gap-4">
-					{states.pdsData && (
-						<button
-							type="button"
-							onClick={() => {
-								const entry = unwrap(states.prev);
-								assert(entry !== undefined);
-
-								const recommended = unwrap(states.pdsData!.recommendedDidDoc);
-								const payload = getPlcPayload(entry);
-
-								if (recommended.alsoKnownAs) {
-									payload.alsoKnownAs = recommended.alsoKnownAs;
-								}
-								if (recommended.rotationKeys) {
-									payload.rotationKeys = recommended.rotationKeys;
-								}
-								if (recommended.services) {
-									// @ts-expect-error
-									payload.services = recommended.services;
-								}
-								if (recommended.verificationMethods) {
-									// @ts-expect-error
-									payload.verificationMethods = recommended.verificationMethods;
-								}
-
-								states.payload = payload;
-							}}
-							class="text-[0.8125rem] leading-5 text-purple-800 hover:underline disabled:pointer-events-none"
-						>
-							Use PDS recommendation
-						</button>
-					)}
-
-					<button
-						type="button"
-						onClick={() => {
-							const entry = unwrap(states.prev);
-							assert(entry !== undefined);
-
-							const payload = getPlcPayload(entry);
-
-							states.payload = payload;
-						}}
-						class="text-[0.8125rem] leading-5 text-purple-800 hover:underline disabled:pointer-events-none"
-					>
-						Reset to default
-					</button>
-				</div>
-
-				<ErrorMessageView step={4} error={error()} />
-
-				<div hidden={step() !== 4} class="mt-6 flex flex-wrap gap-4">
-					<div class="grow"></div>
-
-					<button
-						type="button"
-						onClick={() => setStep(3)}
-						class="flex h-9 select-none items-center rounded bg-gray-200 px-4 text-sm font-semibold text-black hover:bg-gray-300 active:bg-gray-300"
-					>
-						Previous
-					</button>
-
-					<button
-						type="submit"
-						class="flex h-9 select-none items-center rounded bg-purple-800 px-4 text-sm font-semibold text-white hover:bg-purple-700 active:bg-purple-700"
-					>
-						Next
-					</button>
-				</div>
-			</StepPage>
-
-			<Switch>
-				<Match when={states.rotationKeyType === 'pds'}>
-					<StepPage
-						step={5}
-						title="One more step"
-						current={step()}
-						onSubmit={async (form) => {
-							try {
-								setPending(true);
-								setError();
-
-								const code = form.get('code') as string;
-
-								const rpc = states.pdsData!.rpc;
-								const payload = states.payload!;
-
-								const { data: signage } = await rpc.call('com.atproto.identity.signPlcOperation', {
-									data: {
-										token: code,
-										alsoKnownAs: payload.alsoKnownAs,
-										rotationKeys: payload.rotationKeys,
-										services: payload.services,
-										verificationMethods: payload.verificationMethods,
-									},
-								});
-
-								await rpc.call('com.atproto.identity.submitPlcOperation', {
-									data: {
-										operation: signage.operation,
-									},
-								});
-
-								setStep(6);
-							} catch (err) {
-								let msg: string | undefined;
-
-								if (err instanceof XRPCError) {
-									if (err.kind === 'InvalidToken' || err.kind === 'ExpiredToken') {
-										msg = `Confirmation code has expired`;
-									}
-								}
-
-								if (msg !== undefined) {
-									setError({ step: 5, message: msg });
-								} else {
-									console.error(err);
-									setError({ step: 5, message: `Something went wrong: ${err}` });
-								}
-							} finally {
-								setPending(false);
-							}
-						}}
-					>
-						<p>
-							To continue with this submission, you will need to request a confirmation code from your PDS.
-							This code will be sent to your account's email address.
-						</p>
-
-						<label class="mt-6 flex flex-col gap-2">
-							<span class="font-semibold text-gray-600">One-time confirmation code</span>
-							<input
-								ref={(node) => {
-									createEffect(() => {
-										if (step() === 5) {
-											setTimeout(() => node.focus(), 1);
-										}
-									});
-								}}
-								type="text"
-								name="code"
-								required
-								autocomplete="one-time-code"
-								pattern={/* @once */ EMAIL_OTP_RE.source}
-								placeholder="AAAAA-BBBBB"
-								class="rounded border border-gray-400 px-3 py-2 font-mono text-sm tracking-wide placeholder:text-gray-400 focus:border-purple-800 focus:ring-1 focus:ring-purple-800 focus:ring-offset-0"
-							/>
-						</label>
-
-						<div hidden={step() !== 5} class="mt-2 flex flex-wrap gap-4">
-							<button
-								type="button"
-								onClick={async () => {
-									try {
-										const rpc = states.pdsData!.rpc;
-
-										await rpc.call('com.atproto.identity.requestPlcOperationSignature', {});
-										alert(`Confirmation code has been sent, check your email inbox.`);
-									} catch (err) {
-										let msg: string | undefined;
-
-										if (err instanceof XRPCError) {
-											if (err.message.includes(`does not have an email address`)) {
-												msg = `Account does not have an email address`;
-											} else if (err.message.includes(`not found`)) {
-												msg = `Account is not registered on the PDS`;
-											}
-										}
-
-										if (msg !== undefined) {
-											setError({ step: 5, message: msg });
-										} else {
-											console.error(err);
-											setError({ step: 5, message: `Something went wrong: ${err}` });
-										}
-									}
-								}}
-								class="text-[0.8125rem] leading-5 text-purple-800 hover:underline disabled:pointer-events-none"
-							>
-								Request confirmation code
-							</button>
-						</div>
-
-						<p class="mt-6">
-							Now, relax. Take a breather. Verify that you have provided the intended payload, and hit{' '}
-							<i>Submit</i> when you're ready.
-						</p>
-
-						<p class="mt-3 text-[0.8125rem] font-medium leading-5 text-red-800">
-							Caution: This action carries significant risk which can possibly render your did:plc identity
-							unusable. Proceed at your own risk, we assume no liability for any consequences.
-						</p>
-
-						<label class="mt-6 flex items-start gap-3">
-							<input
-								type="checkbox"
-								name="confirm"
-								required
-								class="rounded border-gray-400 text-purple-800 focus:ring-purple-800"
-							/>
-							<span class="text-sm">I have verified and am ready to proceed</span>
-						</label>
-
-						<ErrorMessageView step={5} error={error()} />
-
-						<div hidden={step() !== 5} class="mt-6 flex flex-wrap gap-4">
-							<div class="grow"></div>
-
-							<button
-								type="button"
-								onClick={() => setStep(4)}
-								class="flex h-9 select-none items-center rounded bg-gray-200 px-4 text-sm font-semibold text-black hover:bg-gray-300 active:bg-gray-300"
-							>
-								Previous
-							</button>
-
-							<button
-								type="submit"
-								class="flex h-9 select-none items-center rounded bg-purple-800 px-4 text-sm font-semibold text-white hover:bg-purple-700 active:bg-purple-700"
-							>
-								Submit
-							</button>
-						</div>
-					</StepPage>
-				</Match>
-
-				<Match when={states.rotationKeyType === 'owned'}>
-					<StepPage
-						step={5}
-						title="One more step"
-						current={step()}
-						onSubmit={async () => {
-							try {
-								setPending(true);
-								setError();
-
-								const keypair = states.ownedRotationKey!.keypair;
-								const payload = states.payload!;
-								const prev = states.prev!;
-
-								const operation: Omit<PlcUpdateOp, 'sig'> = {
-									type: 'plc_operation',
-									prev: prev!.cid,
-
-									alsoKnownAs: payload.alsoKnownAs,
-									rotationKeys: payload.rotationKeys,
-									services: payload.services,
-									verificationMethods: payload.verificationMethods,
-								};
-
-								const opBytes = CBOR.encode(operation);
-								const sigBytes = await keypair.sign(opBytes);
-
-								const signature = uint8arrays.toString(sigBytes, 'base64url');
-
-								const signedOperation: PlcUpdateOp = {
-									...operation,
-									sig: signature,
-								};
-
-								await pushPlcOperation(states.didDoc!.id, signedOperation);
-
-								setStep(6);
-							} catch (err) {
-								let msg: string | undefined;
-
-								if (msg !== undefined) {
-									setError({ step: 5, message: msg });
-								} else {
-									console.error(err);
-									setError({ step: 5, message: `Something went wrong: ${err}` });
-								}
-							} finally {
-								setPending(false);
-							}
-						}}
-					>
-						<p>
-							Now, relax. Take a breather. Verify that you have provided the intended payload, and hit{' '}
-							<i>Submit</i> when you're ready.
-						</p>
-
-						<p class="mt-3 text-[0.8125rem] font-medium leading-5 text-red-800">
-							Caution: This action carries significant risk which can possibly render your did:plc identity
-							unusable. Proceed at your own risk, we assume no liability for any consequences.
-						</p>
-
-						<label class="mt-6 flex items-start gap-3">
-							<input
-								ref={(node) => {
-									createEffect(() => {
-										if (step() === 5) {
-											setTimeout(() => node.focus(), 1);
-										}
-									});
-								}}
-								type="checkbox"
-								name="confirm"
-								required
-								class="rounded border-gray-400 text-purple-800 focus:ring-purple-800"
-							/>
-							<span class="text-sm">I have verified and am ready to proceed</span>
-						</label>
-
-						<ErrorMessageView step={5} error={error()} />
-
-						<div hidden={step() !== 5} class="mt-6 flex flex-wrap gap-4">
-							<div class="grow"></div>
-
-							<button
-								type="button"
-								onClick={() => setStep(4)}
-								class="flex h-9 select-none items-center rounded bg-gray-200 px-4 text-sm font-semibold text-black hover:bg-gray-300 active:bg-gray-300"
-							>
-								Previous
-							</button>
-
-							<button
-								type="submit"
-								class="flex h-9 select-none items-center rounded bg-purple-800 px-4 text-sm font-semibold text-white hover:bg-purple-700 active:bg-purple-700"
-							>
-								Submit
-							</button>
-						</div>
-					</StepPage>
-				</Match>
-			</Switch>
-
-			<StepPage step={6} title="All done!" current={step()} onSubmit={() => {}}>
-				<p>Your did:plc identity has been updated.</p>
-
-				<p class="mt-3">
-					You can close this page, or reload the page if you intend on doing another submission.
-				</p>
-			</StepPage>
-
-			<div class="pb-24"></div>
-		</fieldset>
-	);
-};
-
-export default PlcUpdatePage;
-
-const pushPlcOperation = async (did: string, operation: PlcUpdateOp) => {
-	const origin = import.meta.env.VITE_PLC_DIRECTORY_URL;
-	const response = await fetch(`${origin}/${did}`, {
-		method: 'post',
-		headers: {
-			'content-type': 'application/json',
-		},
-		body: JSON.stringify(operation),
-	});
-
-	const headers = response.headers;
-	if (!response.ok) {
-		const type = headers.get('content-type');
-
-		if (type?.includes('application/json')) {
-			const json = await response.json();
-			if (typeof json === 'object' && json !== null && typeof json.message === 'string') {
-				throw new Error(json.message);
-			}
-		}
-
-		throw new Error(`got http ${response.status} from plc`);
-	}
-};
-
-const formatEmailOtpCode = (code: string) => {
-	code = code.toUpperCase();
-
-	const match = EMAIL_OTP_RE.exec(code);
-	if (match !== null) {
-		return `${match[1]}-${match[2]}`;
-	}
-
-	return '';
-};
-
-const getPlcPayload = (entry: PlcLogEntry): PlcUpdatePayload => {
-	const op = entry.operation;
-	assert(op.type === 'plc_operation' || op.type === 'create');
-
-	if (op.type === 'create') {
-		return {
-			alsoKnownAs: [`at://${op.handle}`],
-			rotationKeys: [op.recoveryKey, op.signingKey],
-			verificationMethods: {
-				atproto: op.signingKey,
-			},
-			services: {
-				atproto_pds: {
-					type: 'AtprotoPersonalDataServer',
-					endpoint: op.service,
-				},
-			},
-		};
-	} else if (op.type === 'plc_operation') {
-		return {
-			alsoKnownAs: op.alsoKnownAs,
-			rotationKeys: op.rotationKeys,
-			services: op.services,
-			verificationMethods: op.verificationMethods,
-		};
-	}
-
-	assert(false);
-};
-
-const getPlcKeying = async (logs: PlcLogEntry[]) => {
-	logs = logs.filter((entry) => !entry.nullified);
-
-	const length = logs.length;
-	const promises = logs.map(async (entry, idx) => {
-		const operation = entry.operation;
-		if (operation.type === 'plc_tombstone') {
-			return;
-		}
-
-		// If it's not the last entry, check if the next entry ahead of this one
-		// was made within the last 72 hours.
-		if (idx !== length - 1) {
-			const next = logs[idx + 1]!;
-			const date = new Date(next.createdAt);
-			const diff = Date.now() - date.getTime();
-
-			if (diff / (1_000 * 60 * 60) > 72) {
-				return;
-			}
-		}
-
-		/** keys that potentially signed this operation */
-		let signers: string[] | undefined;
-		if (operation.prev === null) {
-			if (operation.type === 'create') {
-				signers = [operation.recoveryKey, operation.signingKey];
-			} else if (operation.type === 'plc_operation') {
-				signers = operation.rotationKeys;
-			}
-		} else {
-			const prev = logs[idx - 1];
-			assert(prev !== undefined, `missing previous entry from ${entry.createdAt}`);
-			assert(prev.cid === operation.prev, `prev cid mismatch on ${entry.createdAt}`);
-
-			const prevOp = prev.operation;
-
-			if (prevOp.type === 'create') {
-				signers = [prevOp.recoveryKey, prevOp.signingKey];
-			} else if (prevOp.type === 'plc_operation') {
-				signers = prevOp.rotationKeys;
-			}
-		}
-
-		assert(signers !== undefined, `no signers found for ${entry.createdAt}`);
-
-		const opBytes = CBOR.encode({ ...operation, sig: undefined });
-		const sigBytes = uint8arrays.fromString(operation.sig, 'base64url');
-
-		/** key that signed this operation */
-		let signedBy: string | undefined;
-		for (const key of signers) {
-			const valid = await verifySignature(key, opBytes, sigBytes);
-			if (valid) {
-				signedBy = key;
-				break;
-			}
-		}
-
-		assert(signedBy !== undefined, `no valid signer for ${entry.createdAt}`);
-
-		return {
-			...entry,
-			signers,
-			signedBy,
-		};
-	});
-
-	const fulfilled = await Promise.all(promises);
-	return fulfilled.filter((entry) => entry !== undefined);
-};
-
-const getCurrentSignersFromEntry = (entry: PlcLogEntry): string[] => {
-	const operation = entry.operation;
-
-	/** keys that can sign the next operation */
-	let nextSigners: string[] | undefined;
-	if (operation.type === 'create') {
-		nextSigners = [operation.recoveryKey, operation.signingKey];
-	} else if (operation.type === 'plc_operation') {
-		nextSigners = operation.rotationKeys;
-	}
-
-	assert(nextSigners !== undefined, `no signers found for ${entry.createdAt}`);
-	return nextSigners;
-};
-
-const ErrorMessageView = (props: { step: number; error: { step: number; message: string } | undefined }) => {
-	return (
-		<Show
-			when={(() => {
-				const error = props.error;
-				if (error && props.step === error.step) {
-					return error;
-				}
-			})()}
-		>
-			{(error) => (
-				<p class="mt-4 whitespace-pre-wrap text-[0.8125rem] font-medium leading-5 text-red-800">
-					{error().message}
-				</p>
-			)}
-		</Show>
-	);
-};
-
-const StepPage = (props: {
-	step: number;
-	title: string;
-	current: number;
-	onSubmit: (formData: FormData) => void;
-	children: JSX.Element;
-}) => {
-	const onSubmit = props.onSubmit;
-
-	const handleSubmit: JSX.EventHandler<HTMLFormElement, SubmitEvent> = (ev) => {
-		ev.preventDefault();
-
-		const formData = new FormData(ev.currentTarget);
-		onSubmit(formData);
-	};
-
-	return (
-		<Show when={props.step <= props.current}>
-			<form onSubmit={handleSubmit} class="contents">
-				<fieldset disabled={props.step !== props.current} class="flex min-w-0 gap-4 px-4 disabled:opacity-50">
-					<div class="flex flex-col items-center gap-1 pt-4">
-						<div class="grid h-6 w-6 place-items-center rounded-full bg-gray-200 py-1 text-center text-sm font-medium leading-none text-black">
-							{'' + props.step}
-						</div>
-
-						<div hidden={!(props.current > props.step)} class="-mb-3 grow border-l border-gray-400"></div>
-					</div>
-
-					<div class="min-w-0 grow py-4">
-						<h3 class="mb-[1.125rem] mt-0.5 text-sm font-semibold">{props.title}</h3>
-						{props.children}
-					</div>
-				</fieldset>
-			</form>
-		</Show>
-	);
-};

src/views/identity/plc-applicator/page.tsx

···
+import { createEffect, createSignal, onCleanup } from 'solid-js';
+
+import type { CredentialManager } from '@atcute/client';
+import type { ComAtprotoIdentityGetRecommendedDidCredentials } from '@atcute/client/lexicons';
+import type { P256Keypair, Secp256k1Keypair } from '@atproto/crypto';
+
+import type { DidDocument } from '~/api/types/did-doc';
+import type { PlcUpdatePayload } from '~/api/types/plc';
+
+import { history } from '~/globals/navigation';
+
+import { Wizard } from '~/components/wizard';
+
+import type { DetailedPlcEntry } from './plc-utils';
+
+import Step1_HandleInput from './steps/step1_handle-input';
+import Step2_PdsAuthentication from './steps/step2_pds-authentication';
+import Step2_PrivateKeyInput from './steps/step2_private-key-input';
+import Step3_OperationSelect from './steps/step3_operation-select';
+import Step4_PayloadInput from './steps/step4_payload-input';
+import Step5_PdsConfirmation from './steps/step5_pds-confirmation';
+import Step5_PrivateKeyConfirmation from './steps/step5_private-key-confirmation';
+import Step6_Finished from './steps/step6_finished';
+
+export interface PlcInformation {
+	didDoc: DidDocument;
+	logs: DetailedPlcEntry[];
+}
+
+export interface PdsSigningMethod {
+	type: 'pds';
+	manager: CredentialManager;
+	recommendedDidDoc: ComAtprotoIdentityGetRecommendedDidCredentials.Output;
+}
+
+export interface PrivateKeySigningMethod {
+	type: 'private_key';
+	keypair: P256Keypair | Secp256k1Keypair;
+	didPublicKey: string;
+}
+
+export type SigningMethod = PdsSigningMethod | PrivateKeySigningMethod;
+
+export type PlcApplicatorConstraints = {
+	Step1_HandleInput: {};
+
+	Step2_PdsAuthentication: {
+		info: PlcInformation;
+	};
+	Step2_PrivateKeyInput: {
+		info: PlcInformation;
+	};
+
+	Step3_OperationSelect: {
+		info: PlcInformation;
+		method: SigningMethod;
+	};
+
+	Step4_PayloadInput: {
+		info: PlcInformation;
+		method: SigningMethod;
+		base: DetailedPlcEntry;
+	};
+
+	Step5_PdsConfirmation: {
+		info: PlcInformation;
+		method: PdsSigningMethod;
+		base: DetailedPlcEntry;
+		payload: PlcUpdatePayload;
+	};
+	Step5_PrivateKeyConfirmation: {
+		info: PlcInformation;
+		method: PrivateKeySigningMethod;
+		base: DetailedPlcEntry;
+		payload: PlcUpdatePayload;
+	};
+
+	Step6_Finished: {};
+};
+
+const PlcApplicatorPage = () => {
+	const [isActive, setIsActive] = createSignal(false);
+
+	createEffect(() => {
+		if (isActive()) {
+			const cleanup = history.block((tx) => {
+				if (window.confirm(`Abort this action?`)) {
+					cleanup();
+					tx.retry();
+				}
+			});
+
+			onCleanup(cleanup);
+		}
+	});
+
+	return (
+		<>
+			<div class="p-4">
+				<h1 class="text-lg font-bold text-purple-800">Apply PLC operations</h1>
+				<p class="text-gray-600">Submit operations to your did:plc identity</p>
+			</div>
+			<hr class="mx-4 border-gray-300" />
+
+			<Wizard<PlcApplicatorConstraints>
+				initialStep="Step1_HandleInput"
+				components={{
+					Step1_HandleInput,
+					Step2_PdsAuthentication,
+					Step2_PrivateKeyInput,
+					Step3_OperationSelect,
+					Step4_PayloadInput,
+					Step5_PdsConfirmation,
+					Step5_PrivateKeyConfirmation,
+					Step6_Finished,
+				}}
+				onStepChange={(step) => setIsActive(step > 1 && step < 6)}
+			/>
+		</>
+	);
+};
+
+export default PlcApplicatorPage;

src/views/identity/plc-applicator/plc-utils.ts

···
+import * as CBOR from '@atcute/cbor';
+import { verifySignature } from '@atproto/crypto';
+import * as uint8arrays from 'uint8arrays';
+
+import { PlcLogEntry, PlcUpdatePayload } from '~/api/types/plc';
+import { UnwrapArray } from '~/api/utils/types';
+
+import { assert } from '~/lib/utils/invariant';
+
+export const getPlcPayload = (entry: PlcLogEntry): PlcUpdatePayload => {
+	const op = entry.operation;
+	assert(op.type === 'plc_operation' || op.type === 'create');
+
+	if (op.type === 'create') {
+		return {
+			alsoKnownAs: [`at://${op.handle}`],
+			rotationKeys: [op.recoveryKey, op.signingKey],
+			verificationMethods: {
+				atproto: op.signingKey,
+			},
+			services: {
+				atproto_pds: {
+					type: 'AtprotoPersonalDataServer',
+					endpoint: op.service,
+				},
+			},
+		};
+	} else if (op.type === 'plc_operation') {
+		return {
+			alsoKnownAs: op.alsoKnownAs,
+			rotationKeys: op.rotationKeys,
+			services: op.services,
+			verificationMethods: op.verificationMethods,
+		};
+	}
+
+	assert(false);
+};
+
+export const getPlcKeying = async (logs: PlcLogEntry[]) => {
+	logs = logs.filter((entry) => !entry.nullified);
+
+	const length = logs.length;
+	const promises = logs.map(async (entry, idx) => {
+		const operation = entry.operation;
+		if (operation.type === 'plc_tombstone') {
+			return;
+		}
+
+		// If it's not the last entry, check if the next entry ahead of this one
+		// was made within the last 72 hours.
+		if (idx !== length - 1) {
+			const next = logs[idx + 1]!;
+			const date = new Date(next.createdAt);
+			const diff = Date.now() - date.getTime();
+
+			if (diff / (1_000 * 60 * 60) > 72) {
+				return;
+			}
+		}
+
+		/** keys that potentially signed this operation */
+		let signers: string[] | undefined;
+		if (operation.prev === null) {
+			if (operation.type === 'create') {
+				signers = [operation.recoveryKey, operation.signingKey];
+			} else if (operation.type === 'plc_operation') {
+				signers = operation.rotationKeys;
+			}
+		} else {
+			const prev = logs[idx - 1];
+			assert(prev !== undefined, `missing previous entry from ${entry.createdAt}`);
+			assert(prev.cid === operation.prev, `prev cid mismatch on ${entry.createdAt}`);
+
+			const prevOp = prev.operation;
+
+			if (prevOp.type === 'create') {
+				signers = [prevOp.recoveryKey, prevOp.signingKey];
+			} else if (prevOp.type === 'plc_operation') {
+				signers = prevOp.rotationKeys;
+			}
+		}
+
+		assert(signers !== undefined, `no signers found for ${entry.createdAt}`);
+
+		const opBytes = CBOR.encode({ ...operation, sig: undefined });
+		const sigBytes = uint8arrays.fromString(operation.sig, 'base64url');
+
+		/** key that signed this operation */
+		let signedBy: string | undefined;
+		for (const key of signers) {
+			const valid = await verifySignature(key, opBytes, sigBytes);
+			if (valid) {
+				signedBy = key;
+				break;
+			}
+		}
+
+		assert(signedBy !== undefined, `no valid signer for ${entry.createdAt}`);
+
+		return {
+			...entry,
+			signers,
+			signedBy,
+		};
+	});
+
+	const fulfilled = await Promise.all(promises);
+	return fulfilled.filter((entry) => entry !== undefined);
+};
+
+type DetailedEntries = Awaited<ReturnType<typeof getPlcKeying>>;
+export type DetailedPlcEntry = UnwrapArray<DetailedEntries>;
+
+export const getCurrentSignersFromEntry = (entry: PlcLogEntry): string[] => {
+	const operation = entry.operation;
+
+	/** keys that can sign the next operation */
+	let nextSigners: string[] | undefined;
+	if (operation.type === 'create') {
+		nextSigners = [operation.recoveryKey, operation.signingKey];
+	} else if (operation.type === 'plc_operation') {
+		nextSigners = operation.rotationKeys;
+	}
+
+	assert(nextSigners !== undefined, `no signers found for ${entry.createdAt}`);
+	return nextSigners;
+};

src/views/identity/plc-applicator/steps/step1_handle-input.tsx

···
+import { createSignal } from 'solid-js';
+
+import { At } from '@atcute/client/lexicons';
+
+import { getDidDocument } from '~/api/queries/did-doc';
+import { resolveHandleViaAppView } from '~/api/queries/handle';
+import { getPlcAuditLogs } from '~/api/queries/plc';
+import { DID_OR_HANDLE_RE, DID_PLC_RE, isDid } from '~/api/utils/strings';
+
+import { createMutation } from '~/lib/utils/mutation';
+
+import Button from '~/components/inputs/button';
+import RadioInput from '~/components/inputs/radio-input';
+import TextInput from '~/components/inputs/text-input';
+import { Stage, StageActions, StageErrorView, WizardStepProps } from '~/components/wizard';
+
+import { type PlcInformation, PlcApplicatorConstraints } from '../page';
+import { getPlcKeying } from '../plc-utils';
+
+type Method = 'pds' | 'key';
+
+interface MutationVariables {
+	identifier: string;
+	method: Method;
+}
+
+class DidIsNotPlcError extends Error {}
+
+const Step1_HandleInput = ({
+	isActive,
+	onNext,
+}: WizardStepProps<PlcApplicatorConstraints, 'Step1_HandleInput'>) => {
+	const [error, setError] = createSignal<string>();
+
+	const [identifier, setIdentifier] = createSignal('');
+	const [method, setMethod] = createSignal<Method>('pds');
+
+	const mutation = createMutation({
+		async mutationFn({ identifier }: MutationVariables): Promise<PlcInformation> {
+			let did: At.DID;
+			if (isDid(identifier)) {
+				did = identifier;
+			} else {
+				did = await resolveHandleViaAppView({ handle: identifier });
+			}
+
+			if (!DID_PLC_RE.test(did)) {
+				throw new DidIsNotPlcError(`"${did}" is not did:plc`);
+			}
+
+			const [didDoc, logs] = await Promise.all([getDidDocument({ did }), getPlcAuditLogs({ did })]);
+
+			return {
+				didDoc,
+				logs: await getPlcKeying(logs),
+			};
+		},
+		onMutate() {
+			setError();
+		},
+		onSuccess(info, { method }) {
+			if (method === 'pds') {
+				onNext('Step2_PdsAuthentication', { info });
+			} else {
+				onNext('Step2_PrivateKeyInput', { info });
+			}
+		},
+		onError(error) {
+			let message: string | undefined;
+
+			if (error instanceof DidIsNotPlcError) {
+				message = error.message;
+			}
+
+			if (message !== undefined) {
+				setError(message);
+			} else {
+				setError(`Something went wrong: ${error}`);
+			}
+		},
+	});
+
+	return (
+		<Stage
+			title="Enter the did:plc you want to edit"
+			disabled={mutation.isPending}
+			onSubmit={() => {
+				mutation.mutate({
+					identifier: identifier(),
+					method: method(),
+				});
+			}}
+		>
+			<TextInput
+				label="Handle or DID identifier"
+				placeholder="paul.bsky.social"
+				value={identifier()}
+				required
+				pattern={/* @once */ DID_OR_HANDLE_RE.source}
+				autofocus={isActive()}
+				onChange={setIdentifier}
+			/>
+
+			<RadioInput
+				label="I will be using..."
+				value={method()}
+				required
+				options={[
+					{ value: 'pds', label: `my PDS' rotation keys (requires sign in)` },
+					{ value: 'key', label: `my own rotation keys` },
+				]}
+				onChange={setMethod}
+			/>
+
+			<StageErrorView error={error()} />
+
+			<StageActions hidden={!isActive()}>
+				<StageActions.Divider />
+				<Button type="submit">Next</Button>
+			</StageActions>
+		</Stage>
+	);
+};
+
+export default Step1_HandleInput;

src/views/identity/plc-applicator/steps/step2_pds-authentication.tsx

···
+import { createSignal, Match, Show, Switch } from 'solid-js';
+
+import { AtpAccessJwt, CredentialManager, XRPC, XRPCError } from '@atcute/client';
+import { decodeJwt } from '@atcute/client/utils/jwt';
+
+import { getPdsEndpoint } from '~/api/types/did-doc';
+import { TOTP_RE, formatTotpCode } from '~/api/utils/auth';
+
+import { createMutation } from '~/lib/utils/mutation';
+
+import Button from '~/components/inputs/button';
+import TextInput from '~/components/inputs/text-input';
+import { Stage, StageActions, StageErrorView, WizardStepProps } from '~/components/wizard';
+
+import { PlcApplicatorConstraints } from '../page';
+
+class InsufficientLoginError extends Error {}
+
+const Step2_PdsAuthentication = ({
+	data,
+	isActive,
+	onPrevious,
+	onNext,
+}: WizardStepProps<PlcApplicatorConstraints, 'Step2_PdsAuthentication'>) => {
+	const [error, setError] = createSignal<string>();
+	const [isTotpRequired, setIsTotpRequired] = createSignal(false);
+
+	const [manager, setManager] = createSignal<CredentialManager>();
+
+	const [serviceUrl, setServiceUrl] = createSignal(getPdsEndpoint(data.info.didDoc) ?? '');
+	const [password, setPassword] = createSignal('');
+	const [otp, setOtp] = createSignal('');
+
+	const loginMutation = createMutation({
+		async mutationFn({ service, password, otp }: { service: string; password: string; otp: string }) {
+			const manager = new CredentialManager({ service });
+			const _session = await manager.login({
+				identifier: data.info.didDoc.id,
+				password: password,
+				code: formatTotpCode(otp),
+			});
+
+			const decoded = decodeJwt(_session.accessJwt) as AtpAccessJwt;
+			if (decoded.scope !== 'com.atproto.access') {
+				throw new InsufficientLoginError(`You need to be signed in with a main password`);
+			}
+
+			return manager;
+		},
+		onMutate() {
+			setError();
+		},
+		onSuccess(manager) {
+			dispatchMutation.mutate({ manager });
+
+			setManager(manager);
+
+			setOtp('');
+			setPassword('');
+			setIsTotpRequired(false);
+		},
+		onError(error) {
+			let message: string | undefined;
+
+			if (error instanceof XRPCError) {
+				if (error.kind === 'AuthFactorTokenRequired') {
+					setOtp('');
+					setIsTotpRequired(true);
+					return;
+				}
+
+				if (error.kind === 'AuthenticationRequired') {
+					message = `Invalid identifier or password`;
+				} else if (error.kind === 'AccountTakedown') {
+					message = `Account has been taken down`;
+				} else if (error.message.includes('Token is invalid')) {
+					message = `Invalid one-time confirmation code`;
+					setIsTotpRequired(true);
+				}
+			} else if (error instanceof InsufficientLoginError) {
+				message = error.message;
+			}
+
+			if (message !== undefined) {
+				setError(message);
+			} else {
+				console.error(error);
+				setError(`Something went wrong: ${error}`);
+			}
+		},
+	});
+
+	const dispatchMutation = createMutation({
+		async mutationFn({ manager }: { manager: CredentialManager }) {
+			const rpc = new XRPC({ handler: manager });
+			const { data: recommendedDidDoc } = await rpc.get(
+				'com.atproto.identity.getRecommendedDidCredentials',
+				{},
+			);
+
+			return { recommendedDidDoc };
+		},
+		onMutate() {
+			setError();
+		},
+		onSuccess({ recommendedDidDoc }, { manager }) {
+			onNext('Step3_OperationSelect', {
+				info: data.info,
+				method: {
+					type: 'pds',
+					manager,
+					recommendedDidDoc,
+				},
+			});
+		},
+		onError(error) {
+			let message: string | undefined;
+
+			if (message !== undefined) {
+				setError(message);
+			} else {
+				console.error(error);
+				setError(`Something went wrong: ${error}`);
+			}
+		},
+	});
+
+	return (
+		<Stage
+			title="Sign in to your PDS"
+			disabled={loginMutation.isPending || dispatchMutation.isPending}
+			onSubmit={() => {
+				const $manager = manager();
+
+				if ($manager) {
+					dispatchMutation.mutate({
+						manager: $manager,
+					});
+				} else {
+					loginMutation.mutate({
+						service: serviceUrl(),
+						password: password(),
+						otp: otp(),
+					});
+				}
+			}}
+		>
+			<Switch>
+				<Match when={manager()} keyed>
+					{(manager) => (
+						<p class="break-words">
+							Signed in via <b>{/* @once */ manager.dispatchUrl}</b>.{' '}
+							<button
+								type="button"
+								onClick={() => setManager(undefined)}
+								hidden={!isActive()}
+								class="text-purple-800 hover:underline disabled:pointer-events-none"
+							>
+								Sign out?
+							</button>
+						</p>
+					)}
+				</Match>
+
+				<Match when>
+					<TextInput
+						label="PDS service URL"
+						type="url"
+						placeholder="https://pds.example.com"
+						value={serviceUrl()}
+						required
+						onChange={setServiceUrl}
+					/>
+
+					<TextInput
+						label="Main password"
+						blurb="This app runs locally on your browser, your credentials stays entirely within your device."
+						type="password"
+						value={password()}
+						required
+						autofocus={isActive()}
+						onChange={setPassword}
+					/>
+
+					<Show when={isTotpRequired()}>
+						<TextInput
+							label="One-time confirmation code"
+							blurb="A code has been sent to your email address, check your inbox."
+							type="text"
+							autocomplete="one-time-code"
+							autocorrect="off"
+							pattern={/* @once */ TOTP_RE.source}
+							placeholder="AAAAA-BBBBB"
+							value={otp()}
+							required
+							onChange={setOtp}
+							monospace
+						/>
+					</Show>
+				</Match>
+			</Switch>
+
+			<StageErrorView error={error()} />
+
+			<StageActions hidden={!isActive()}>
+				<StageActions.Divider />
+
+				<Button variant="secondary" onClick={onPrevious}>
+					Previous
+				</Button>
+				<Button type="submit">Next</Button>
+			</StageActions>
+		</Stage>
+	);
+};
+
+export default Step2_PdsAuthentication;

src/views/identity/plc-applicator/steps/step2_private-key-input.tsx

···
+import { createSignal } from 'solid-js';
+
+import { createMutation } from '~/lib/utils/mutation';
+
+import Button from '~/components/inputs/button';
+import RadioInput from '~/components/inputs/radio-input';
+import TextInput from '~/components/inputs/text-input';
+import { Stage, StageActions, StageErrorView, WizardStepProps } from '~/components/wizard';
+
+import { PlcApplicatorConstraints } from '../page';
+import { P256Keypair, Secp256k1Keypair } from '@atproto/crypto';
+
+type KeyType = 'nistp256' | 'secp256k1';
+
+const Step2_PrivateKeyInput = ({
+	data,
+	isActive,
+	onPrevious,
+	onNext,
+}: WizardStepProps<PlcApplicatorConstraints, 'Step2_PrivateKeyInput'>) => {
+	const [error, setError] = createSignal<string>();
+
+	const [type, setType] = createSignal<KeyType>();
+	const [hex, setHex] = createSignal('');
+
+	const hexMutation = createMutation({
+		async mutationFn({ type, hex }: { type: KeyType; hex: string }) {
+			let keypair: P256Keypair | Secp256k1Keypair;
+
+			if (type === 'nistp256') {
+				keypair = await P256Keypair.import(hex);
+			} else if (type === 'secp256k1') {
+				keypair = await Secp256k1Keypair.import(hex);
+			} else {
+				throw new Error(`unsupported "${type}" type`);
+			}
+
+			return keypair;
+		},
+		onMutate() {
+			setError();
+		},
+		onSuccess(keypair) {
+			onNext('Step3_OperationSelect', {
+				info: data.info,
+				method: {
+					type: 'private_key',
+					didPublicKey: keypair.did(),
+					keypair: keypair,
+				},
+			});
+		},
+		onError(error) {
+			let message: string | undefined;
+
+			if (message !== undefined) {
+				setError(message);
+			} else {
+				console.error(error);
+				setError(`Something went wrong: ${error}`);
+			}
+		},
+	});
+
+	return (
+		<Stage
+			title="Enter your private key"
+			disabled={hexMutation.isPending}
+			onSubmit={() => {
+				hexMutation.mutate({
+					type: type()!,
+					hex: hex(),
+				});
+			}}
+		>
+			<TextInput
+				label="Hex-encoded private key"
+				blurb="This app runs locally on your browser, your private key stays entirely within your device."
+				placeholder="a5973930f9d348..."
+				value={hex()}
+				required
+				pattern="[0-9a-f]+"
+				autofocus={isActive()}
+				onChange={setHex}
+			/>
+
+			<RadioInput
+				label="This is a..."
+				value={type()}
+				required
+				options={[
+					{ value: 'secp256k1', label: `ES256K (secp256k1) private key` },
+					{ value: 'nistp256', label: `ES256 (nistp256) private key` },
+				]}
+				onChange={setType}
+			/>
+
+			<StageErrorView error={error()} />
+
+			<StageActions hidden={!isActive()}>
+				<StageActions.Divider />
+
+				<Button variant="secondary" onClick={onPrevious}>
+					Previous
+				</Button>
+				<Button type="submit">Next</Button>
+			</StageActions>
+		</Stage>
+	);
+};
+
+export default Step2_PrivateKeyInput;

src/views/identity/plc-applicator/steps/step3_operation-select.tsx

···
+import { createMemo, createSignal } from 'solid-js';
+
+import Button from '~/components/inputs/button';
+import SelectInput from '~/components/inputs/select-input';
+import { Stage, StageActions, StageErrorView, WizardStepProps } from '~/components/wizard';
+
+import { PlcApplicatorConstraints } from '../page';
+import { getCurrentSignersFromEntry } from '../plc-utils';
+
+const Step3_OperationSelect = ({
+	data,
+	isActive,
+	onPrevious,
+	onNext,
+}: WizardStepProps<PlcApplicatorConstraints, 'Step3_OperationSelect'>) => {
+	const [error, setError] = createSignal<string>();
+	const [selectedCid, setSelectedCid] = createSignal<string>();
+
+	const options = createMemo(() => {
+		const signingMethod = data.method;
+		const logs = data.info.logs;
+
+		let ownKey: string | undefined;
+		if (signingMethod.type === 'pds') {
+			ownKey = signingMethod.recommendedDidDoc.rotationKeys?.at(-1);
+		} else if (signingMethod.type === 'private_key') {
+			ownKey = signingMethod.didPublicKey;
+		}
+
+		if (ownKey === undefined) {
+			return [];
+		}
+
+		const length = logs.length;
+		const items = logs.map((entry, idx) => {
+			const signers = getCurrentSignersFromEntry(entry);
+			const last = idx === length - 1;
+
+			let enabled = signers.includes(ownKey!);
+
+			// If we're showing older operations for forking/nullification,
+			// check to see that our key has priority over the signer.
+			if (enabled && !last) {
+				if (signingMethod.type === 'pds') {
+					// `signPlcOperation` will always grab the last op
+					enabled = false;
+				} else {
+					const holderKey = logs[idx + 1].signedBy;
+
+					const holderPriority = signers.indexOf(holderKey);
+					const ownPriority = signers.indexOf(ownKey);
+
+					enabled = ownPriority < holderPriority;
+				}
+			}
+
+			return {
+				value: entry.cid,
+				label: `${entry.createdAt} (by ${entry.signedBy})`,
+				disabled: !enabled,
+			};
+		});
+
+		return items.reverse();
+	});
+
+	return (
+		<Stage
+			title="Select which operation to use as foundation"
+			onSubmit={() => {
+				setError();
+
+				const cid = selectedCid();
+				const entry = data.info.logs.find((entry) => entry.cid === cid);
+
+				if (!entry) {
+					setError(`Can't find CID ${cid}`);
+					return;
+				}
+
+				const operation = entry.operation;
+				if (operation.type !== 'plc_operation' && operation.type === 'create') {
+					setError(`Expected operation to be of type "plc_operation" or "create"`);
+					return;
+				}
+
+				onNext('Step4_PayloadInput', {
+					info: data.info,
+					method: data.method,
+					base: entry,
+				});
+			}}
+		>
+			<SelectInput
+				label="Base operation"
+				blurb="Some operations can't be used as a base if the rotation key does not have the privilege for nullification, or if it is not listed."
+				required
+				value={selectedCid()}
+				autofocus={isActive()}
+				options={[{ value: '', label: `Select an operation...` }, ...options()]}
+				onChange={setSelectedCid}
+			/>
+
+			<StageErrorView error={error()} />
+
+			<StageActions hidden={!isActive()}>
+				<StageActions.Divider />
+				<Button variant="secondary" onClick={onPrevious}>
+					Previous
+				</Button>
+				<Button type="submit">Next</Button>
+			</StageActions>
+		</Stage>
+	);
+};
+
+export default Step3_OperationSelect;

src/views/identity/plc-applicator/steps/step4_payload-input.tsx

···
+import { createSignal } from 'solid-js';
+
+import { updatePayload } from '~/api/types/plc';
+
+import Button from '~/components/inputs/button';
+import MultilineInput from '~/components/inputs/multiline-input';
+import { Stage, StageActions, StageErrorView, WizardStepProps } from '~/components/wizard';
+
+import { PlcApplicatorConstraints } from '../page';
+import { getPlcPayload } from '../plc-utils';
+
+export const Step4_PayloadInput = ({
+	data,
+	isActive,
+	onPrevious,
+	onNext,
+}: WizardStepProps<PlcApplicatorConstraints, 'Step4_PayloadInput'>) => {
+	const [error, setError] = createSignal<string>();
+
+	const originalSource = JSON.stringify(getPlcPayload(data.base), null, 2);
+	const [source, setSource] = createSignal(originalSource);
+
+	const method = data.method;
+	const isPdsMethod = method.type === 'pds';
+
+	return (
+		<Stage
+			title="Enter your payload"
+			onSubmit={() => {
+				setError();
+
+				const $source = source();
+
+				let json: unknown;
+				try {
+					json = JSON.parse($source);
+				} catch {
+					setError(`Unable to parse JSON`);
+					return;
+				}
+
+				const result = updatePayload.try(json);
+				if (!result.ok) {
+					setError(result.message);
+					return;
+				}
+
+				if (method.type === 'pds') {
+					onNext('Step5_PdsConfirmation', {
+						info: data.info,
+						method: method,
+						base: data.base,
+						payload: result.value,
+					});
+				} else if (method.type === 'private_key') {
+					onNext('Step5_PrivateKeyConfirmation', {
+						info: data.info,
+						method: method,
+						base: data.base,
+						payload: result.value,
+					});
+				}
+			}}
+		>
+			<MultilineInput
+				label="Payload input"
+				required
+				autocomplete="off"
+				autocorrect="off"
+				value={source()}
+				autofocus={isActive()}
+				onChange={setSource}
+			/>
+
+			<div class="-mt-4 flex flex-wrap gap-4">
+				{isPdsMethod && (
+					<button
+						type="button"
+						class="text-[0.8125rem] leading-5 text-purple-800 hover:underline disabled:pointer-events-none"
+						onClick={() => {
+							const recommended = method.recommendedDidDoc;
+							const payload = getPlcPayload(data.base);
+
+							if (recommended.alsoKnownAs) {
+								payload.alsoKnownAs = recommended.alsoKnownAs;
+							}
+							if (recommended.rotationKeys) {
+								payload.rotationKeys = recommended.rotationKeys;
+							}
+							if (recommended.services) {
+								// @ts-expect-error
+								payload.services = recommended.services;
+							}
+							if (recommended.verificationMethods) {
+								// @ts-expect-error
+								payload.verificationMethods = recommended.verificationMethods;
+							}
+
+							setSource(JSON.stringify(payload, null, 2));
+						}}
+					>
+						Use PDS recommendation
+					</button>
+				)}
+
+				<button
+					type="button"
+					class="text-[0.8125rem] leading-5 text-purple-800 hover:underline disabled:pointer-events-none"
+					onClick={() => {
+						setSource(originalSource);
+					}}
+				>
+					Reset to default
+				</button>
+			</div>
+
+			<StageErrorView error={error()} />
+
+			<StageActions hidden={!isActive()}>
+				<StageActions.Divider />
+				<Button variant="secondary" onClick={onPrevious}>
+					Previous
+				</Button>
+				<Button type="submit">Next</Button>
+			</StageActions>
+		</Stage>
+	);
+};
+
+export default Step4_PayloadInput;

src/views/identity/plc-applicator/steps/step5_pds-confirmation.tsx

···
+import { createSignal } from 'solid-js';
+
+import { XRPC, XRPCError } from '@atcute/client';
+
+import { formatTotpCode, TOTP_RE } from '~/api/utils/auth';
+
+import { createMutation } from '~/lib/utils/mutation';
+
+import CheckIcon from '~/components/ic-icons/baseline-check';
+import Button from '~/components/inputs/button';
+import TextInput from '~/components/inputs/text-input';
+import { Stage, StageActions, StageErrorView, WizardStepProps } from '~/components/wizard';
+
+import { PlcApplicatorConstraints } from '../page';
+
+export const Step5_PdsConfirmation = ({
+	data,
+	isActive,
+	onPrevious,
+	onNext,
+}: WizardStepProps<PlcApplicatorConstraints, 'Step5_PdsConfirmation'>) => {
+	const [requestError, setRequestError] = createSignal<string>();
+	const [applyError, setApplyError] = createSignal<string>();
+
+	const [otp, setOtp] = createSignal('');
+
+	const requestMutation = createMutation({
+		async mutationFn() {
+			const manager = data.method.manager;
+			const rpc = new XRPC({ handler: manager });
+
+			await rpc.call('com.atproto.identity.requestPlcOperationSignature', {});
+		},
+		onMutate() {
+			setRequestError();
+		},
+		onError(error) {
+			let message: string | undefined;
+
+			if (message !== undefined) {
+				setRequestError(message);
+			} else {
+				console.error(error);
+				setRequestError(`Something went wrong: ${error}`);
+			}
+		},
+	});
+
+	const applyMutation = createMutation({
+		async mutationFn({ code }: { code: string }) {
+			const manager = data.method.manager;
+			const rpc = new XRPC({ handler: manager });
+
+			const payload = data.payload;
+
+			const { data: signage } = await rpc.call('com.atproto.identity.signPlcOperation', {
+				data: {
+					token: formatTotpCode(code),
+					alsoKnownAs: payload.alsoKnownAs,
+					rotationKeys: payload.rotationKeys,
+					services: payload.services,
+					verificationMethods: payload.verificationMethods,
+				},
+			});
+
+			await rpc.call('com.atproto.identity.submitPlcOperation', {
+				data: {
+					operation: signage.operation,
+				},
+			});
+		},
+		onMutate() {
+			setApplyError();
+		},
+		onSuccess() {
+			onNext('Step6_Finished', {});
+		},
+		onError(error) {
+			let message: string | undefined;
+
+			if (error instanceof XRPCError) {
+				if (error.kind === 'InvalidToken' || error.kind === 'ExpiredToken') {
+					message = `Confirmation code has expired`;
+				}
+			}
+
+			if (message !== undefined) {
+				setApplyError(message);
+			} else {
+				console.error(error);
+				setApplyError(`Something went wrong: ${error}`);
+			}
+		},
+	});
+
+	return (
+		<Stage
+			title="One more step"
+			onSubmit={() => {
+				applyMutation.mutate({
+					code: otp(),
+				});
+			}}
+		>
+			<p class="text-pretty">
+				To continue with this submission, you will need to request a confirmation code from your PDS. This
+				code will be sent to your account's email address.
+			</p>
+
+			<TextInput
+				label="One-time confirmation code"
+				type="text"
+				autocomplete="one-time-code"
+				autocorrect="off"
+				pattern={/* @once */ TOTP_RE.source}
+				placeholder="AAAAA-BBBBB"
+				value={otp()}
+				required
+				autofocus={isActive()}
+				onChange={setOtp}
+				monospace
+			/>
+
+			<div hidden={!isActive()} class="-mt-4 flex flex-wrap gap-4">
+				<button
+					disabled={requestMutation.isPending}
+					type="button"
+					class={
+						`flex items-center gap-1 text-[0.8125rem] leading-5 text-purple-800 hover:underline disabled:pointer-events-none` +
+						(requestMutation.isPending ? `disabled:opacity-50` : ``)
+					}
+					onClick={() => requestMutation.mutate()}
+				>
+					<span>Request confirmation code</span>
+					{requestMutation.isSuccess && <CheckIcon class="text-lg text-green-600" />}
+				</button>
+			</div>
+
+			<StageErrorView error={requestError()} />
+
+			<div>
+				<p class="text-pretty">
+					Review your payload carefully, and click <i>Submit</i> when ready.
+				</p>
+
+				<p class="mt-3 text-pretty font-medium text-red-800">
+					Caution: This action carries significant risk which can possibly render your did:plc identity
+					unusable. Proceed at your own risk, we assume no liability for any consequences.
+				</p>
+			</div>
+
+			<StageErrorView error={applyError()} />
+
+			<StageActions hidden={!isActive()}>
+				<StageActions.Divider />
+				<Button variant="secondary" onClick={onPrevious}>
+					Previous
+				</Button>
+				<Button type="submit">Next</Button>
+			</StageActions>
+		</Stage>
+	);
+};
+
+export default Step5_PdsConfirmation;

src/views/identity/plc-applicator/steps/step5_private-key-confirmation.tsx

···
+import { createSignal } from 'solid-js';
+
+import * as CBOR from '@atcute/cbor';
+import * as uint8arrays from 'uint8arrays';
+
+import { PlcUpdateOp } from '~/api/types/plc';
+
+import { generateConfirmationCode } from '~/lib/utils/confirmation-code';
+import { createMutation } from '~/lib/utils/mutation';
+
+import Button from '~/components/inputs/button';
+import TextInput from '~/components/inputs/text-input';
+import { Stage, StageActions, StageErrorView, WizardStepProps } from '~/components/wizard';
+
+import { PlcApplicatorConstraints } from '../page';
+
+const Step5_PrivateKeyConfirmation = ({
+	data,
+	isActive,
+	onPrevious,
+	onNext,
+}: WizardStepProps<PlcApplicatorConstraints, 'Step5_PrivateKeyConfirmation'>) => {
+	const [error, setError] = createSignal<string>();
+
+	const code = generateConfirmationCode();
+
+	const mutation = createMutation({
+		async mutationFn() {
+			const keypair = data.method.keypair;
+			const payload = data.payload;
+			const prev = data.base;
+
+			const operation: Omit<PlcUpdateOp, 'sig'> = {
+				type: 'plc_operation',
+				prev: prev!.cid,
+
+				alsoKnownAs: payload.alsoKnownAs,
+				rotationKeys: payload.rotationKeys,
+				services: payload.services,
+				verificationMethods: payload.verificationMethods,
+			};
+
+			const opBytes = CBOR.encode(operation);
+			const sigBytes = await keypair.sign(opBytes);
+
+			const signature = uint8arrays.toString(sigBytes, 'base64url');
+
+			const signedOperation: PlcUpdateOp = {
+				...operation,
+				sig: signature,
+			};
+
+			await pushPlcOperation(data.info.didDoc.id, signedOperation);
+		},
+		onMutate() {
+			setError();
+		},
+		onSuccess() {
+			onNext('Step6_Finished', {});
+		},
+		onError(error) {
+			let message: string | undefined;
+
+			if (message !== undefined) {
+				setError(message);
+			} else {
+				console.error(error);
+				setError(`Something went wrong: ${error}`);
+			}
+		},
+	});
+
+	return (
+		<Stage
+			title="One more step"
+			disabled={mutation.isPending}
+			onSubmit={() => {
+				mutation.mutate();
+			}}
+		>
+			<p class="text-pretty">
+				To continue with this submission, type in the following code{' '}
+				<code class="whitespace-nowrap font-bold">{code}</code> to the confirmation box below.
+			</p>
+
+			<TextInput
+				label="Confirmation code"
+				type="text"
+				autocomplete="one-time-code"
+				autocorrect="off"
+				required
+				pattern={code}
+				placeholder="AAAAA-BBBBB"
+				autofocus={isActive()}
+				monospace
+			/>
+
+			<div>
+				<p class="text-pretty">
+					Review your payload carefully, and click <i>Submit</i> when ready.
+				</p>
+
+				<p class="mt-3 text-pretty font-medium text-red-800">
+					Caution: This action carries significant risk which can possibly render your did:plc identity
+					unusable. Proceed at your own risk, we assume no liability for any consequences.
+				</p>
+			</div>
+
+			<StageErrorView error={error()} />
+
+			<StageActions hidden={!isActive()}>
+				<StageActions.Divider />
+
+				<Button variant="secondary" onClick={onPrevious}>
+					Previous
+				</Button>
+				<Button type="submit">Next</Button>
+			</StageActions>
+		</Stage>
+	);
+};
+
+export default Step5_PrivateKeyConfirmation;
+
+const pushPlcOperation = async (did: string, operation: PlcUpdateOp) => {
+	const origin = import.meta.env.VITE_PLC_DIRECTORY_URL;
+	const response = await fetch(`${origin}/${did}`, {
+		method: 'post',
+		headers: {
+			'content-type': 'application/json',
+		},
+		body: JSON.stringify(operation),
+	});
+
+	const headers = response.headers;
+	if (!response.ok) {
+		const type = headers.get('content-type');
+
+		if (type?.includes('application/json')) {
+			const json = await response.json();
+			if (typeof json === 'object' && json !== null && typeof json.message === 'string') {
+				throw new Error(json.message);
+			}
+		}
+
+		throw new Error(`got http ${response.status} from plc`);
+	}
+};

src/views/identity/plc-applicator/steps/step6_finished.tsx

···
+import { Stage, WizardStepProps } from '~/components/wizard';
+
+import { PlcApplicatorConstraints } from '../page';
+
+export const Step6_Finished = ({}: WizardStepProps<PlcApplicatorConstraints, 'Step6_Finished'>) => {
+	return (
+		<Stage title="All done!">
+			<div>
+				<p class="text-pretty">Your did:plc identity has been updated.</p>
+
+				<p class="mt-3 text-pretty">
+					You can close this page, or reload the page if you intend on doing another submission.
+				</p>
+			</div>
+		</Stage>
+	);
+};
+
+export default Step6_Finished;