feat: migration tool first pass

src/components/accordion.tsx

···
+import { createSignal, type JSX, Show } from 'solid-js';
+
+import ChevronRightIcon from '~/components/ic-icons/baseline-chevron-right';
+
+export interface AccordionProps {
+	title: string;
+	children: JSX.Element;
+	defaultOpen?: boolean;
+}
+
+export const Accordion = (props: AccordionProps) => {
+	const [isOpen, setIsOpen] = createSignal(props.defaultOpen ?? false);
+
+	return (
+		<div class="border-b border-gray-200">
+			<button
+				type="button"
+				onClick={() => setIsOpen(!isOpen())}
+				class="flex w-full items-center gap-3 px-4 py-3 text-left hover:bg-gray-50"
+			>
+				<ChevronRightIcon
+					class={`h-5 w-5 text-gray-500 transition-transform` + (isOpen() ? ` rotate-90` : ``)}
+				/>
+				<span class="font-semibold">{props.title}</span>
+			</button>
+
+			<Show when={isOpen()}>
+				<div class="pb-4 pl-12 pr-4">{props.children}</div>
+			</Show>
+		</div>
+	);
+};
+
+export interface SubsectionProps {
+	title: string;
+	children: JSX.Element;
+}
+
+export const Subsection = (props: SubsectionProps) => {
+	return (
+		<div class="mb-4 last:mb-0">
+			<h4 class="mb-3 text-sm font-semibold text-gray-600">{props.title}</h4>
+			<div class="flex flex-col gap-3">{props.children}</div>
+		</div>
+	);
+};
+
+export interface StatusBadgeProps {
+	variant: 'idle' | 'pending' | 'success' | 'error';
+	children: JSX.Element;
+}
+
+export const StatusBadge = (props: StatusBadgeProps) => {
+	const variantStyles = () => {
+		switch (props.variant) {
+			case 'idle':
+				return 'bg-gray-100 text-gray-600';
+			case 'pending':
+				return 'bg-yellow-100 text-yellow-800';
+			case 'success':
+				return 'bg-green-100 text-green-800';
+			case 'error':
+				return 'bg-red-100 text-red-800';
+		}
+	};
+
+	return (
+		<span class={`inline-flex items-center rounded px-2 py-0.5 text-xs font-medium ${variantStyles()}`}>
+			{props.children}
+		</span>
+	);
+};

src/components/inputs/text-input.tsx

···
 
 import type { BoundInputEvent } from './_types';
 
-interface TextInputProps {
+export interface TextInputProps {
 	label: JSX.Element;
 	blurb?: JSX.Element;
 	monospace?: boolean;
 	type?: 'text' | 'password' | 'url' | 'email';
 	name?: string;
 	required?: boolean;
+	disabled?: boolean;
 	autocomplete?: 'off' | 'on' | 'one-time-code' | 'username';
 	autocorrect?: 'off' | 'on';
 	pattern?: string;
···
 				id={fieldId}
 				name={props.name}
 				required={props.required}
+				disabled={props.disabled}
 				autocomplete={props.autocomplete}
 				pattern={props.pattern}
 				placeholder={props.placeholder}

src/lib/utils/stream.ts

···
+export async function* iterateStream<T>(stream: ReadableStream<T>) {
+	const reader = stream.getReader();
+
+	try {
+		while (true) {
+			const { done, value } = await reader.read();
+
+			if (done) {
+				return;
+			}
+
+			yield value;
+		}
+	} finally {
+		reader.releaseLock();
+	}
+}

src/routes.ts

···
 	},
 
 	{
+		path: '/account-migrate',
+		component: lazy(() => import('./views/account/account-migrate/page')),
+	},
+
+	{
 		path: '*',
 		component: lazy(() => import('./views/_404')),
 	},

src/views/account/account-migrate/context.tsx

···
+import { createContext, createSignal, useContext, type JSX } from 'solid-js';
+
+import type { CredentialManager } from '@atcute/client';
+import type { DidDocument } from '@atcute/identity';
+import type { AtprotoDid, Did } from '@atcute/lexicons/syntax';
+
+export interface SourceAccount {
+	did: AtprotoDid;
+	didDoc: DidDocument;
+	pdsUrl: string;
+	manager: CredentialManager | null;
+}
+
+export interface DestinationAccount {
+	pdsUrl: string;
+	serviceDid: Did;
+	manager: CredentialManager | null;
+}
+
+export interface MigrationContextValue {
+	source: () => SourceAccount | null;
+	setSource: (account: SourceAccount | null) => void;
+	destination: () => DestinationAccount | null;
+	setDestination: (account: DestinationAccount | null) => void;
+}
+
+const MigrationContext = createContext<MigrationContextValue>();
+
+export const MigrationProvider = (props: { children: JSX.Element }) => {
+	const [source, setSource] = createSignal<SourceAccount | null>(null);
+	const [destination, setDestination] = createSignal<DestinationAccount | null>(null);
+
+	const value: MigrationContextValue = {
+		source,
+		setSource,
+		destination,
+		setDestination,
+	};
+
+	return <MigrationContext.Provider value={value}>{props.children}</MigrationContext.Provider>;
+};
+
+export const useMigration = (): MigrationContextValue => {
+	const context = useContext(MigrationContext);
+	if (!context) {
+		throw new Error('useMigration must be used within a MigrationProvider');
+	}
+	return context;
+};

src/views/account/account-migrate/page.tsx

···
+import { createEffect, createSignal, onCleanup } from 'solid-js';
+
+import { history } from '~/globals/navigation';
+
+import { useTitle } from '~/lib/navigation/router';
+
+import PageHeader from '~/components/page-header';
+
+import { MigrationProvider } from './context';
+
+import SourceAccountSection from './sections/source-account';
+import DestinationAccountSection from './sections/destination-account';
+import RepositorySection from './sections/repository';
+import BlobsSection from './sections/blobs';
+import PreferencesSection from './sections/preferences';
+import IdentitySection from './sections/identity';
+import AccountStatusSection from './sections/account-status';
+
+const AccountMigratePage = () => {
+	const [hasStarted, setHasStarted] = createSignal(false);
+
+	createEffect(() => {
+		if (hasStarted()) {
+			const cleanup = history.block((tx) => {
+				if (window.confirm(`You have a migration in progress. Leave this page?`)) {
+					cleanup();
+					tx.retry();
+				}
+			});
+
+			onCleanup(cleanup);
+		}
+	});
+
+	useTitle(() => `Migrate account — boat`);
+
+	return (
+		<MigrationProvider>
+			<PageHeader title="Migrate account" subtitle="Move your account data to another server" />
+
+			<div class="flex flex-col">
+				<SourceAccountSection onStarted={() => setHasStarted(true)} />
+				<DestinationAccountSection />
+				<RepositorySection />
+				<BlobsSection />
+				<PreferencesSection />
+				<IdentitySection />
+				<AccountStatusSection />
+			</div>
+		</MigrationProvider>
+	);
+};
+
+export default AccountMigratePage;

src/views/account/account-migrate/sections/account-status.tsx

···
+import { Show } from 'solid-js';
+
+import { Client, type CredentialManager, ok } from '@atcute/client';
+
+import { createMutation } from '~/lib/utils/mutation';
+
+import { Accordion, StatusBadge, Subsection } from '~/components/accordion';
+import Button from '~/components/inputs/button';
+
+import { useMigration } from '../context';
+
+interface AccountStatus {
+	activated: boolean;
+	validDid: boolean;
+	repoCommit: string;
+	repoRev: string;
+	repoBlocks: number;
+	indexedRecords: number;
+	privateStateValues: number;
+	expectedBlobs: number;
+	importedBlobs: number;
+}
+
+const AccountStatusSection = () => {
+	const { source, destination } = useMigration();
+
+	const checkSourceMutation = createMutation({
+		async mutationFn({ manager }: { manager: CredentialManager }) {
+			const sourceClient = new Client({ handler: manager });
+			return await ok(sourceClient.get('com.atproto.server.checkAccountStatus')) as AccountStatus;
+		},
+		onError(err) {
+			console.error(err);
+		},
+	});
+
+	const checkDestMutation = createMutation({
+		async mutationFn({ manager }: { manager: CredentialManager }) {
+			const destClient = new Client({ handler: manager });
+			return await ok(destClient.get('com.atproto.server.checkAccountStatus')) as AccountStatus;
+		},
+		onError(err) {
+			console.error(err);
+		},
+	});
+
+	const activateMutation = createMutation({
+		async mutationFn({ manager }: { manager: CredentialManager }) {
+			const destClient = new Client({ handler: manager });
+			await ok(destClient.post('com.atproto.server.activateAccount', { as: null }));
+		},
+		onSuccess() {
+			const dest = destination();
+			if (dest?.manager) {
+				checkDestMutation.mutate({ manager: dest.manager });
+			}
+		},
+		onError(err) {
+			console.error(err);
+		},
+	});
+
+	const deactivateMutation = createMutation({
+		async mutationFn({ manager }: { manager: CredentialManager }) {
+			if (!confirm('Are you sure you want to deactivate your source account? This will prevent the old PDS from serving your data.')) {
+				throw new Error('Cancelled');
+			}
+			const sourceClient = new Client({ handler: manager });
+			await ok(sourceClient.post('com.atproto.server.deactivateAccount', { as: null, input: {} }));
+		},
+		onSuccess() {
+			const src = source();
+			if (src?.manager) {
+				checkSourceMutation.mutate({ manager: src.manager });
+			}
+		},
+		onError(err) {
+			if (err instanceof Error && err.message === 'Cancelled') return;
+			console.error(err);
+		},
+	});
+
+	const renderStatus = (status: AccountStatus) => (
+		<div class="space-y-1 text-sm">
+			<p>
+				<span class="text-gray-500">Status:</span>{' '}
+				<StatusBadge variant={status.activated ? 'success' : 'idle'}>
+					{status.activated ? 'Active' : 'Deactivated'}
+				</StatusBadge>
+			</p>
+			<p>
+				<span class="text-gray-500">Records:</span>{' '}
+				<span class="font-mono">{status.indexedRecords}</span>
+			</p>
+			<p>
+				<span class="text-gray-500">Blobs:</span>{' '}
+				<span class="font-mono">{status.importedBlobs}/{status.expectedBlobs}</span>
+			</p>
+			<p>
+				<span class="text-gray-500">Repo blocks:</span>{' '}
+				<span class="font-mono">{status.repoBlocks}</span>
+			</p>
+		</div>
+	);
+
+	return (
+		<Accordion title="Account Status">
+			<Subsection title="Source account">
+				<Show
+					when={source()?.manager}
+					fallback={<p class="text-sm text-gray-500">Sign in to source account first.</p>}
+				>
+					{(manager) => (
+						<>
+							<div class="flex items-center gap-3">
+								<Button
+									variant="outline"
+									onClick={() => checkSourceMutation.mutate({ manager: manager() })}
+									disabled={checkSourceMutation.isPending}
+								>
+									{checkSourceMutation.isPending ? 'Checking...' : 'Check status'}
+								</Button>
+							</div>
+
+							<Show when={checkSourceMutation.isError}>
+								<p class="text-sm text-red-600">{`${checkSourceMutation.error}`}</p>
+							</Show>
+
+							<Show when={checkSourceMutation.data}>
+								{(status) => (
+									<>
+										{renderStatus(status())}
+
+										<Show when={status().activated}>
+											<div class="mt-3">
+												<Button
+													variant="secondary"
+													onClick={() => deactivateMutation.mutate({ manager: manager() })}
+													disabled={deactivateMutation.isPending}
+												>
+													{deactivateMutation.isPending ? 'Deactivating...' : 'Deactivate source account'}
+												</Button>
+											</div>
+										</Show>
+									</>
+								)}
+							</Show>
+						</>
+					)}
+				</Show>
+			</Subsection>
+
+			<Subsection title="Destination account">
+				<Show
+					when={destination()?.manager}
+					fallback={<p class="text-sm text-gray-500">Sign in to destination account first.</p>}
+				>
+					{(manager) => (
+						<>
+							<div class="flex items-center gap-3">
+								<Button
+									variant="outline"
+									onClick={() => checkDestMutation.mutate({ manager: manager() })}
+									disabled={checkDestMutation.isPending}
+								>
+									{checkDestMutation.isPending ? 'Checking...' : 'Check status'}
+								</Button>
+							</div>
+
+							<Show when={checkDestMutation.isError}>
+								<p class="text-sm text-red-600">{`${checkDestMutation.error}`}</p>
+							</Show>
+
+							<Show when={checkDestMutation.data}>
+								{(status) => (
+									<>
+										{renderStatus(status())}
+
+										<Show when={!status().activated}>
+											<div class="mt-3">
+												<Button
+													onClick={() => activateMutation.mutate({ manager: manager() })}
+													disabled={activateMutation.isPending}
+												>
+													{activateMutation.isPending ? 'Activating...' : 'Activate destination account'}
+												</Button>
+											</div>
+										</Show>
+									</>
+								)}
+							</Show>
+						</>
+					)}
+				</Show>
+			</Subsection>
+
+			<Show when={activateMutation.isError || deactivateMutation.isError}>
+				<p class="text-sm text-red-600">
+					{activateMutation.isError ? `Failed to activate: ${activateMutation.error}` : ''}
+					{deactivateMutation.isError ? `Failed to deactivate: ${deactivateMutation.error}` : ''}
+				</p>
+			</Show>
+		</Accordion>
+	);
+};
+
+export default AccountStatusSection;

src/views/account/account-migrate/sections/blobs.tsx

···
+import { showOpenFilePicker, showSaveFilePicker } from 'native-file-system-adapter';
+import { createSignal, For, Show } from 'solid-js';
+
+import { Client, ClientResponseError, type CredentialManager, ok, simpleFetchHandler } from '@atcute/client';
+import { untar, writeTarEntry } from '@mary/tar';
+
+import { createMutation } from '~/lib/utils/mutation';
+
+import { Accordion, StatusBadge, Subsection } from '~/components/accordion';
+import Button from '~/components/inputs/button';
+
+import { useMigration, type SourceAccount } from '../context';
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+const BlobsSection = () => {
+	const { source, destination } = useMigration();
+
+	// Progress state (kept separate since mutations don't handle incremental updates)
+	const [exportProgress, setExportProgress] = createSignal<string>();
+	const [importProgress, setImportProgress] = createSignal<string>();
+
+	const exportMutation = createMutation({
+		async mutationFn({ source }: { source: SourceAccount }) {
+			const sourceClient = new Client({ handler: simpleFetchHandler({ service: source.pdsUrl }) });
+
+			setExportProgress('Retrieving list of blobs...');
+
+			// Get list of all blobs
+			let blobs: string[] = [];
+			let cursor: string | undefined;
+			do {
+				const data = await ok(
+					sourceClient.get('com.atproto.sync.listBlobs', {
+						params: { did: source.did, cursor, limit: 1_000 },
+					}),
+				);
+				cursor = data.cursor;
+				blobs = blobs.concat(data.cids);
+				setExportProgress(`Retrieving list of blobs (found ${blobs.length})`);
+			} while (cursor !== undefined);
+
+			if (blobs.length === 0) {
+				return { count: 0, cancelled: false };
+			}
+
+			setExportProgress('Waiting for file picker...');
+
+			const fd = await showSaveFilePicker({
+				suggestedName: `blobs-${source.did}-${new Date().toISOString()}.tar`,
+				// @ts-expect-error: ponyfill doesn't have the full typings
+				id: 'blob-export',
+				startIn: 'downloads',
+				types: [
+					{
+						description: 'Tarball archive',
+						accept: { 'application/tar': ['.tar'] },
+					},
+				],
+			}).catch((err) => {
+				if (err instanceof DOMException && err.name === 'AbortError') {
+					return undefined;
+				}
+				throw err;
+			});
+
+			if (!fd) {
+				return { count: 0, cancelled: true };
+			}
+
+			const writable = await fd.createWritable();
+
+			let downloaded = 0;
+			for (const cid of blobs) {
+				setExportProgress(`Downloading blobs (${downloaded}/${blobs.length})`);
+
+				const downloadBlob = async (): Promise<Uint8Array | undefined> => {
+					let attempts = 0;
+					while (true) {
+						if (attempts > 0) await sleep(2_000);
+						attempts++;
+
+						try {
+							const response = await sourceClient.get('com.atproto.sync.getBlob', {
+								as: 'bytes',
+								params: { did: source.did, cid },
+							});
+
+							if (response.ok) {
+								return response.data;
+							}
+
+							if (response.status === 400 && response.data.message === 'Blob not found') {
+								return undefined;
+							}
+
+							if (response.status === 429) {
+								await sleep(10_000);
+							}
+
+							if (attempts < 3) continue;
+							throw new ClientResponseError(response);
+						} catch (err) {
+							if (attempts < 3) continue;
+							throw err;
+						}
+					}
+				};
+
+				const data = await downloadBlob();
+				if (data !== undefined) {
+					const entry = writeTarEntry({ filename: `blobs/${cid}`, data });
+					await writable.write(entry);
+				}
+
+				downloaded++;
+			}
+
+			await writable.close();
+			return { count: blobs.length, cancelled: false };
+		},
+		onError(err) {
+			console.error(err);
+		},
+		onSettled() {
+			setExportProgress();
+		},
+	});
+
+	const importFromFileMutation = createMutation({
+		async mutationFn({ destManager }: { destManager: CredentialManager }) {
+			setImportProgress('Waiting for file picker...');
+
+			const [fd] = await showOpenFilePicker({
+				// @ts-expect-error: ponyfill doesn't have the full typings
+				id: 'blob-import',
+				types: [
+					{
+						description: 'Tarball archive',
+						accept: { 'application/tar': ['.tar'] },
+					},
+				],
+			}).catch((err) => {
+				if (err instanceof DOMException && err.name === 'AbortError') {
+					return [undefined];
+				}
+				throw err;
+			});
+
+			if (!fd) {
+				return { uploaded: 0, failed: 0, cancelled: true };
+			}
+
+			setImportProgress('Reading archive...');
+			const file = await fd.getFile();
+
+			const destClient = new Client({ handler: destManager });
+
+			let uploaded = 0;
+			let failed = 0;
+
+			for await (const entry of untar(file.stream())) {
+				if (entry.type !== 'file') continue;
+
+				const filename = entry.name;
+				// Extract CID from path like "blobs/bafk..."
+				const cid = filename.split('/').pop();
+				if (!cid) continue;
+
+				setImportProgress(`Uploading blobs (${uploaded} uploaded, ${failed} failed)`);
+
+				try {
+					const data = await entry.bytes();
+					await destClient.post('com.atproto.repo.uploadBlob', {
+						encoding: 'application/octet-stream',
+						input: data,
+					});
+					uploaded++;
+				} catch (err) {
+					console.error(`Failed to upload blob ${cid}:`, err);
+					failed++;
+				}
+			}
+
+			return { uploaded, failed, cancelled: false };
+		},
+		onError(err) {
+			console.error(err);
+		},
+		onSettled() {
+			setImportProgress();
+		},
+	});
+
+	const importFromSourceMutation = createMutation({
+		async mutationFn({ source, destManager }: { source: SourceAccount; destManager: CredentialManager }) {
+			setImportProgress('Checking for missing blobs...');
+
+			const sourceClient = new Client({ handler: simpleFetchHandler({ service: source.pdsUrl }) });
+			const destClient = new Client({ handler: destManager });
+
+			let uploaded = 0;
+			let failed = 0;
+			let cursor: string | undefined;
+
+			do {
+				const data = await ok(
+					destClient.get('com.atproto.repo.listMissingBlobs', {
+						params: { cursor, limit: 100 },
+					}),
+				);
+				cursor = data.cursor;
+
+				for (const blob of data.blobs) {
+					setImportProgress(`Uploading missing blobs (${uploaded} uploaded, ${failed} failed)`);
+
+					try {
+						const response = await sourceClient.get('com.atproto.sync.getBlob', {
+							as: 'stream',
+							params: { did: source.did, cid: blob.cid },
+						});
+
+						if (!response.ok) {
+							failed++;
+							continue;
+						}
+
+						const contentType = response.headers.get('content-type') || 'application/octet-stream';
+
+						await destClient.post('com.atproto.repo.uploadBlob', {
+							encoding: contentType,
+							input: response.data,
+						});
+
+						uploaded++;
+					} catch (err) {
+						console.error(`Failed to transfer blob ${blob.cid}:`, err);
+						failed++;
+					}
+				}
+			} while (cursor !== undefined);
+
+			return { uploaded, failed };
+		},
+		onError(err) {
+			console.error(err);
+		},
+		onSettled() {
+			setImportProgress();
+		},
+	});
+
+	const checkStatusMutation = createMutation({
+		async mutationFn({ destManager }: { destManager: CredentialManager }) {
+			const destClient = new Client({ handler: destManager });
+			const status = await ok(destClient.get('com.atproto.server.checkAccountStatus'));
+
+			let missingBlobs: string[] = [];
+
+			// Get list of missing blobs if any
+			if (status.expectedBlobs > status.importedBlobs) {
+				let cursor: string | undefined;
+				do {
+					const data = await ok(
+						destClient.get('com.atproto.repo.listMissingBlobs', {
+							params: { cursor, limit: 100 },
+						}),
+					);
+					cursor = data.cursor;
+					missingBlobs.push(...data.blobs.map((b) => b.cid));
+				} while (cursor !== undefined);
+			}
+
+			return {
+				expected: status.expectedBlobs,
+				imported: status.importedBlobs,
+				missingBlobs,
+			};
+		},
+		onError(err) {
+			console.error(err);
+		},
+	});
+
+	const isImporting = () => importFromFileMutation.isPending || importFromSourceMutation.isPending;
+
+	const getExportStatusText = () => {
+		const data = exportMutation.data;
+		if (data?.cancelled) return undefined;
+		if (data?.count === 0) return 'No blobs to export';
+		if (data) return `Exported ${data.count} blobs`;
+		return exportProgress();
+	};
+
+	const getImportStatusText = () => {
+		const fileData = importFromFileMutation.data;
+		const sourceData = importFromSourceMutation.data;
+
+		if (fileData && !fileData.cancelled) {
+			return `Uploaded ${fileData.uploaded} blobs` + (fileData.failed > 0 ? ` (${fileData.failed} failed)` : '');
+		}
+		if (sourceData) {
+			if (sourceData.uploaded === 0 && sourceData.failed === 0) return 'No missing blobs';
+			return `Uploaded ${sourceData.uploaded} blobs` + (sourceData.failed > 0 ? ` (${sourceData.failed} failed)` : '');
+		}
+		return importProgress();
+	};
+
+	const getImportError = () => importFromFileMutation.error || importFromSourceMutation.error;
+
+	return (
+		<Accordion title="Blobs">
+			<Subsection title="Export from source">
+				<p class="text-sm text-gray-600">
+					Download all blobs as a tarball for backup or manual import.
+				</p>
+
+				<Show when={source()} fallback={<p class="text-sm text-gray-500">Resolve source account first.</p>}>
+					{(src) => (
+						<>
+							<div class="flex items-center gap-3">
+								<Button
+									onClick={() => exportMutation.mutate({ source: src() })}
+									disabled={exportMutation.isPending}
+								>
+									{exportMutation.isPending ? 'Exporting...' : 'Export to file'}
+								</Button>
+								<Show when={getExportStatusText()}>
+									{(text) => <span class="text-sm text-gray-600">{text()}</span>}
+								</Show>
+							</div>
+
+							<Show when={exportMutation.error}>
+								{(err) => <p class="text-sm text-red-600">{`${err()}`}</p>}
+							</Show>
+						</>
+					)}
+				</Show>
+			</Subsection>
+
+			<Subsection title="Import to destination">
+				<p class="text-sm text-gray-600">
+					Upload blobs from a tarball or transfer directly from source.
+				</p>
+
+				<Show
+					when={destination()?.manager}
+					fallback={<p class="text-sm text-gray-500">Sign in to destination account first.</p>}
+				>
+					{(destManager) => (
+						<>
+							<div class="flex flex-wrap items-center gap-3">
+								<Button
+									onClick={() => importFromFileMutation.mutate({ destManager: destManager() })}
+									disabled={isImporting()}
+								>
+									{isImporting() ? 'Importing...' : 'Import from file'}
+								</Button>
+
+								<Show when={source()}>
+									{(src) => (
+										<Button
+											variant="secondary"
+											onClick={() =>
+												importFromSourceMutation.mutate({ source: src(), destManager: destManager() })
+											}
+											disabled={isImporting()}
+										>
+											Transfer from source
+										</Button>
+									)}
+								</Show>
+							</div>
+
+							<Show when={getImportStatusText()}>
+								{(text) => <span class="text-sm text-gray-600">{text()}</span>}
+							</Show>
+
+							<Show when={getImportError()}>
+								{(err) => <p class="text-sm text-red-600">{`${err()}`}</p>}
+							</Show>
+						</>
+					)}
+				</Show>
+			</Subsection>
+
+			<Subsection title="Status">
+				<Show
+					when={destination()?.manager}
+					fallback={<p class="text-sm text-gray-500">Sign in to destination account first.</p>}
+				>
+					{(destManager) => (
+						<>
+							<div class="flex items-center gap-3">
+								<Button
+									variant="outline"
+									onClick={() => checkStatusMutation.mutate({ destManager: destManager() })}
+									disabled={checkStatusMutation.isPending}
+								>
+									{checkStatusMutation.isPending ? 'Checking...' : 'Check status'}
+								</Button>
+
+								<Show when={checkStatusMutation.data}>
+									{(status) => (
+										<span class="text-sm">
+											<StatusBadge
+												variant={status().imported === status().expected ? 'success' : 'pending'}
+											>
+												{status().imported}/{status().expected} blobs
+											</StatusBadge>
+										</span>
+									)}
+								</Show>
+							</div>
+
+							<Show when={checkStatusMutation.data?.missingBlobs.length}>
+								{(count) => (
+									<div class="mt-2 rounded border border-yellow-300 bg-yellow-50 p-3">
+										<p class="mb-2 text-sm font-medium text-yellow-800">{count()} missing blobs</p>
+
+										<Show when={source()}>
+											{(src) => (
+												<Button
+													variant="secondary"
+													onClick={() =>
+														importFromSourceMutation.mutate({ source: src(), destManager: destManager() })
+													}
+													disabled={isImporting()}
+												>
+													Transfer missing from source
+												</Button>
+											)}
+										</Show>
+
+										<details class="mt-2">
+											<summary class="cursor-pointer text-sm text-yellow-700">Show CIDs</summary>
+											<div class="mt-1 max-h-32 overflow-auto font-mono text-xs">
+												<For each={checkStatusMutation.data?.missingBlobs}>
+													{(cid) => <div class="truncate">{cid}</div>}
+												</For>
+											</div>
+										</details>
+									</div>
+								)}
+							</Show>
+						</>
+					)}
+				</Show>
+			</Subsection>
+		</Accordion>
+	);
+};
+
+export default BlobsSection;

src/views/account/account-migrate/sections/destination-account.tsx

···
+import { createSignal, Show } from 'solid-js';
+
+import {
+	type AtpAccessJwt,
+	Client,
+	ClientResponseError,
+	CredentialManager,
+	ok,
+	simpleFetchHandler,
+} from '@atcute/client';
+import type { Did, Handle } from '@atcute/lexicons/syntax';
+
+import { formatTotpCode, TOTP_RE } from '~/api/utils/auth';
+import { decodeJwt } from '~/api/utils/jwt';
+import { isServiceUrlString } from '~/api/types/strings';
+
+import { createMutation } from '~/lib/utils/mutation';
+
+import { Accordion, StatusBadge, Subsection } from '~/components/accordion';
+import Button from '~/components/inputs/button';
+import TextInput from '~/components/inputs/text-input';
+
+import { useMigration } from '../context';
+
+class InsufficientLoginError extends Error {}
+
+const DestinationAccountSection = () => {
+	const { source, destination, setDestination } = useMigration();
+
+	// Connect state
+	const [pdsUrl, setPdsUrl] = createSignal('');
+	const [connectError, setConnectError] = createSignal<string>();
+
+	// Create account state
+	const [newHandle, setNewHandle] = createSignal('');
+	const [newEmail, setNewEmail] = createSignal('');
+	const [newPassword, setNewPassword] = createSignal('');
+	const [inviteCode, setInviteCode] = createSignal('');
+	const [createError, setCreateError] = createSignal<string>();
+
+	// Login state
+	const [loginPassword, setLoginPassword] = createSignal('');
+	const [loginOtp, setLoginOtp] = createSignal('');
+	const [isLoginTotpRequired, setIsLoginTotpRequired] = createSignal(false);
+	const [loginError, setLoginError] = createSignal<string>();
+
+	const connectMutation = createMutation({
+		async mutationFn({ pdsUrl }: { pdsUrl: string }) {
+			const destClient = new Client({ handler: simpleFetchHandler({ service: pdsUrl }) });
+			const desc = await ok(destClient.get('com.atproto.server.describeServer'));
+
+			return { serviceDid: desc.did };
+		},
+		onMutate() {
+			setConnectError();
+		},
+		onSuccess({ serviceDid }) {
+			setDestination({ pdsUrl: pdsUrl(), serviceDid, manager: null });
+		},
+		onError(err) {
+			console.error(err);
+			setConnectError(`Failed to connect: ${err}`);
+		},
+	});
+
+	const createAccountMutation = createMutation({
+		async mutationFn({
+			sourceDid,
+			sourceManager,
+			destPdsUrl,
+			destServiceDid,
+			handle,
+			email,
+			password,
+			inviteCode,
+		}: {
+			sourceDid: Did;
+			sourceManager: CredentialManager;
+			destPdsUrl: string;
+			destServiceDid: string;
+			handle: Handle;
+			email: string;
+			password: string;
+			inviteCode: string;
+		}) {
+			// Get service auth token from old PDS
+			const sourceClient = new Client({ handler: sourceManager });
+			const authResp = await ok(
+				sourceClient.get('com.atproto.server.getServiceAuth', {
+					params: {
+						aud: destServiceDid as Did,
+						lxm: 'com.atproto.server.createAccount',
+					},
+				}),
+			);
+			const serviceJwt = authResp.token;
+
+			// Create account on new PDS with service auth
+			const destClient = new Client({ handler: simpleFetchHandler({ service: destPdsUrl }) });
+			const createResp = await destClient.post('com.atproto.server.createAccount', {
+				headers: { Authorization: `Bearer ${serviceJwt}` },
+				input: {
+					did: sourceDid,
+					handle: handle,
+					email: email,
+					password: password,
+					inviteCode: inviteCode || undefined,
+				},
+			});
+
+			if (!createResp.ok) {
+				throw new ClientResponseError(createResp);
+			}
+
+			if (createResp.data.did !== sourceDid) {
+				throw new Error(`Created account has different DID: ${createResp.data.did}`);
+			}
+
+			// Login to the new account
+			const manager = new CredentialManager({ service: destPdsUrl });
+			await manager.login({
+				identifier: sourceDid,
+				password: password,
+			});
+
+			return manager;
+		},
+		onMutate() {
+			setCreateError();
+		},
+		onSuccess(manager) {
+			setDestination({ ...destination()!, manager });
+			setNewPassword('');
+		},
+		onError(err) {
+			if (err instanceof ClientResponseError) {
+				if (err.error === 'InvalidInviteCode') {
+					setCreateError(`Invalid invite code`);
+					return;
+				}
+				if (err.error === 'HandleNotAvailable') {
+					setCreateError(`Handle is not available`);
+					return;
+				}
+				if (err.description) {
+					setCreateError(err.description);
+					return;
+				}
+			}
+			console.error(err);
+			setCreateError(`${err}`);
+		},
+	});
+
+	const loginMutation = createMutation({
+		async mutationFn({
+			pdsUrl,
+			did,
+			password,
+			otp,
+		}: {
+			pdsUrl: string;
+			did: string;
+			password: string;
+			otp: string;
+		}) {
+			const manager = new CredentialManager({ service: pdsUrl });
+			const session = await manager.login({
+				identifier: did,
+				password: password,
+				code: formatTotpCode(otp),
+			});
+
+			const decoded = decodeJwt(session.accessJwt) as AtpAccessJwt;
+			if (decoded.scope !== 'com.atproto.access') {
+				throw new InsufficientLoginError(`You need to sign in with a main password, not an app password`);
+			}
+
+			return manager;
+		},
+		onMutate() {
+			setLoginError();
+		},
+		onSuccess(manager) {
+			setDestination({ ...destination()!, manager });
+			setLoginPassword('');
+			setLoginOtp('');
+			setIsLoginTotpRequired(false);
+		},
+		onError(err) {
+			if (err instanceof ClientResponseError) {
+				if (err.error === 'AuthFactorTokenRequired') {
+					setLoginOtp('');
+					setIsLoginTotpRequired(true);
+					return;
+				}
+				if (err.error === 'AuthenticationRequired') {
+					setLoginError(`Invalid identifier or password`);
+					return;
+				}
+				if (err.description?.includes('Token is invalid')) {
+					setLoginError(`Invalid one-time confirmation code`);
+					setIsLoginTotpRequired(true);
+					return;
+				}
+			}
+			if (err instanceof InsufficientLoginError) {
+				setLoginError(err.message);
+				return;
+			}
+			console.error(err);
+			setLoginError(`${err}`);
+		},
+	});
+
+	const isConnected = () => destination() !== null;
+	const isAuthenticated = () => destination()?.manager != null;
+	const canCreateAccount = () => source()?.manager != null;
+
+	return (
+		<Accordion title="Destination Account">
+			<Subsection title="Connect to PDS">
+				<Show when={!isConnected()}>
+					<form
+						onSubmit={(ev) => {
+							ev.preventDefault();
+							connectMutation.mutate({ pdsUrl: pdsUrl() });
+						}}
+						class="flex flex-col gap-3"
+					>
+						<TextInput
+							label="PDS URL"
+							type="url"
+							placeholder="https://pds.example.com"
+							value={pdsUrl()}
+							required
+							onChange={(text, event) => {
+								setPdsUrl(text);
+								const input = event.currentTarget;
+								if (text !== '' && !isServiceUrlString(text)) {
+									input.setCustomValidity('Must be a valid URL');
+								} else {
+									input.setCustomValidity('');
+								}
+							}}
+						/>
+
+						<Show when={connectError()}>
+							<p class="text-sm text-red-600">{connectError()}</p>
+						</Show>
+
+						<div>
+							<Button type="submit" disabled={connectMutation.isPending}>
+								{connectMutation.isPending ? 'Connecting...' : 'Connect'}
+							</Button>
+						</div>
+					</form>
+				</Show>
+
+				<Show when={isConnected()}>
+					<div class="flex flex-col gap-2 text-sm">
+						<p>
+							<span class="text-gray-500">URL:</span>{' '}
+							<span class="font-mono">{destination()!.pdsUrl}</span>
+						</p>
+						<p>
+							<span class="text-gray-500">Service DID:</span>{' '}
+							<span class="font-mono">{destination()!.serviceDid}</span>
+						</p>
+						<div class="mt-1">
+							<button
+								type="button"
+								onClick={() => setDestination(null)}
+								class="text-sm text-purple-800 hover:underline"
+							>
+								Change PDS
+							</button>
+						</div>
+					</div>
+				</Show>
+			</Subsection>
+
+			<Show when={isConnected() && !isAuthenticated()}>
+				<Subsection title="Create new account">
+					<Show when={!canCreateAccount()}>
+						<p class="text-sm text-gray-600">
+							You need to authenticate to your source account first to create an account on the
+							destination PDS.
+						</p>
+					</Show>
+
+					<Show when={canCreateAccount()}>
+						<form
+							onSubmit={(ev) => {
+								ev.preventDefault();
+								const src = source()!;
+								const dest = destination()!;
+								createAccountMutation.mutate({
+									sourceDid: src.did,
+									sourceManager: src.manager!,
+									destPdsUrl: dest.pdsUrl,
+									destServiceDid: dest.serviceDid,
+									handle: newHandle() as Handle,
+									email: newEmail(),
+									password: newPassword(),
+									inviteCode: inviteCode(),
+								});
+							}}
+							class="flex flex-col gap-3"
+						>
+							<TextInput
+								label="Handle"
+								placeholder="alice.pds.example.com"
+								value={newHandle()}
+								required
+								onChange={setNewHandle}
+							/>
+
+							<TextInput
+								label="Email"
+								type="email"
+								placeholder="[e-mail]"
+								value={newEmail()}
+								required
+								onChange={setNewEmail}
+							/>
+
+							<TextInput
+								label="Password"
+								type="password"
+								value={newPassword()}
+								required
+								onChange={setNewPassword}
+							/>
+
+							<TextInput
+								label="Invite code (if required)"
+								placeholder="pds-example-com-xxxxx"
+								value={inviteCode()}
+								onChange={setInviteCode}
+							/>
+
+							<Show when={createError()}>
+								<p class="text-sm text-red-600">{createError()}</p>
+							</Show>
+
+							<div>
+								<Button type="submit" disabled={createAccountMutation.isPending}>
+									{createAccountMutation.isPending ? 'Creating...' : 'Create account'}
+								</Button>
+							</div>
+						</form>
+					</Show>
+				</Subsection>
+
+				<Subsection title="Or login to existing account">
+					<p class="mb-2 text-sm text-gray-600">
+						If you already have a deactivated account on the destination PDS.
+					</p>
+
+					<Show when={!source()}>
+						<p class="text-sm text-gray-600">
+							Resolve your source account first so we know which DID to use.
+						</p>
+					</Show>
+
+					<Show when={source()}>
+						<form
+							onSubmit={(ev) => {
+								ev.preventDefault();
+								const src = source()!;
+								const dest = destination()!;
+								loginMutation.mutate({
+									pdsUrl: dest.pdsUrl,
+									did: src.did,
+									password: loginPassword(),
+									otp: loginOtp(),
+								});
+							}}
+							class="flex flex-col gap-3"
+						>
+							<TextInput
+								label="Password"
+								type="password"
+								value={loginPassword()}
+								required
+								onChange={setLoginPassword}
+							/>
+
+							<Show when={isLoginTotpRequired()}>
+								<TextInput
+									label="One-time confirmation code"
+									blurb="A code has been sent to your email address."
+									type="text"
+									autocomplete="one-time-code"
+									pattern={TOTP_RE.source}
+									placeholder="AAAAA-BBBBB"
+									value={loginOtp()}
+									required
+									onChange={setLoginOtp}
+									monospace
+								/>
+							</Show>
+
+							<Show when={loginError()}>
+								<p class="text-sm text-red-600">{loginError()}</p>
+							</Show>
+
+							<div>
+								<Button type="submit" disabled={loginMutation.isPending}>
+									{loginMutation.isPending ? 'Signing in...' : 'Sign in'}
+								</Button>
+							</div>
+						</form>
+					</Show>
+				</Subsection>
+			</Show>
+
+			<Show when={isAuthenticated()}>
+				<Subsection title="Account status">
+					<div class="flex items-center gap-2">
+						<StatusBadge variant="success">Signed in</StatusBadge>
+						<button
+							type="button"
+							onClick={() => setDestination({ ...destination()!, manager: null })}
+							class="text-sm text-purple-800 hover:underline"
+						>
+							Sign out
+						</button>
+					</div>
+				</Subsection>
+			</Show>
+		</Accordion>
+	);
+};
+
+export default DestinationAccountSection;

src/views/account/account-migrate/sections/identity.tsx

···
+import { createSignal, For, Index, Show } from 'solid-js';
+
+import { Client, ClientResponseError, type CredentialManager, ok } from '@atcute/client';
+import { type DidKeyString, Secp256k1PrivateKeyExportable } from '@atcute/crypto';
+
+import { formatTotpCode, TOTP_RE } from '~/api/utils/auth';
+
+import { createMutation } from '~/lib/utils/mutation';
+
+import { Accordion, StatusBadge, Subsection } from '~/components/accordion';
+import Button from '~/components/inputs/button';
+import TextInput from '~/components/inputs/text-input';
+import ToggleInput from '~/components/inputs/toggle-input';
+
+import { useMigration } from '../context';
+
+interface RecommendedCredentials {
+	alsoKnownAs?: string[];
+	rotationKeys?: string[];
+	verificationMethods?: Record<string, unknown>;
+	services?: Record<string, unknown>;
+}
+
+interface GeneratedKeypair {
+	publicDidKey: DidKeyString;
+	privateHex: string;
+	privateMultikey: string;
+}
+
+const IdentitySection = () => {
+	const { source, destination } = useMigration();
+
+	// Rotation key state
+	const [useGeneratedKey, setUseGeneratedKey] = createSignal(false);
+	const [customKeys, setCustomKeys] = createSignal<string[]>([]);
+	const [plcToken, setPlcToken] = createSignal('');
+
+	const requestTokenMutation = createMutation({
+		async mutationFn({ manager }: { manager: CredentialManager }) {
+			const client = new Client({ handler: manager });
+			await ok(client.post('com.atproto.identity.requestPlcOperationSignature', { as: null }));
+		},
+		onError(err) {
+			console.error(err);
+		},
+	});
+
+	const loadCredentialsMutation = createMutation({
+		async mutationFn({ manager }: { manager: CredentialManager }) {
+			const client = new Client({ handler: manager });
+			return (await ok(client.get('com.atproto.identity.getRecommendedDidCredentials', {}))) as RecommendedCredentials;
+		},
+		onError(err) {
+			console.error(err);
+		},
+	});
+
+	const generateKeyMutation = createMutation({
+		async mutationFn() {
+			const keypair = await Secp256k1PrivateKeyExportable.createKeypair();
+			const [publicDidKey, privateHex, privateMultikey] = await Promise.all([
+				keypair.exportPublicKey('did'),
+				keypair.exportPrivateKey('rawHex'),
+				keypair.exportPrivateKey('multikey'),
+			]);
+			return { publicDidKey, privateHex, privateMultikey } as GeneratedKeypair;
+		},
+		onError(err) {
+			console.error(err);
+		},
+	});
+
+	const signAndSubmitMutation = createMutation({
+		async mutationFn({
+			sourceManager,
+			destManager,
+			token,
+			credentials,
+			generatedKey,
+			customKeys,
+		}: {
+			sourceManager: CredentialManager;
+			destManager: CredentialManager;
+			token: string;
+			credentials: RecommendedCredentials;
+			generatedKey?: GeneratedKeypair;
+			customKeys: string[];
+		}) {
+			const sourceClient = new Client({ handler: sourceManager });
+			const destClient = new Client({ handler: destManager });
+
+			// Prepend user keys to PDS-provided keys (so user keys appear first for recovery)
+			const pdsRotationKeys = credentials.rotationKeys ?? [];
+			const userKeys: string[] = [];
+			if (generatedKey) {
+				userKeys.push(generatedKey.publicDidKey);
+			}
+			userKeys.push(...customKeys.filter((k) => k.trim()));
+			const rotationKeys = [...userKeys, ...pdsRotationKeys];
+
+			// Sign the PLC operation on the source PDS
+			const signage = await ok(
+				sourceClient.post('com.atproto.identity.signPlcOperation', {
+					input: {
+						token: formatTotpCode(token),
+						alsoKnownAs: credentials.alsoKnownAs,
+						rotationKeys: rotationKeys,
+						services: credentials.services,
+						verificationMethods: credentials.verificationMethods,
+					},
+				}),
+			);
+
+			// Submit via the destination PDS
+			await ok(
+				destClient.post('com.atproto.identity.submitPlcOperation', {
+					as: null,
+					input: {
+						operation: signage.operation,
+					},
+				}),
+			);
+		},
+		onSuccess() {
+			setPlcToken('');
+		},
+		onError(err) {
+			console.error(err);
+		},
+	});
+
+	// Calculate rotation key counts
+	const pdsKeyCount = () => loadCredentialsMutation.data?.rotationKeys?.length ?? 0;
+	const totalKeyCount = () => {
+		const custom = customKeys().filter((k) => k.trim()).length;
+		const generated = useGeneratedKey() && generateKeyMutation.data ? 1 : 0;
+		return pdsKeyCount() + custom + generated;
+	};
+	const canAddCustomKey = () => totalKeyCount() < 5;
+	const isOverLimit = () => totalKeyCount() > 5;
+
+	const addCustomKey = () => {
+		if (canAddCustomKey()) {
+			setCustomKeys([...customKeys(), '']);
+		}
+	};
+
+	const removeCustomKey = (index: number) => {
+		setCustomKeys(customKeys().filter((_, i) => i !== index));
+	};
+
+	const updateCustomKey = (index: number, value: string) => {
+		setCustomKeys(customKeys().map((k, i) => (i === index ? value : k)));
+	};
+
+	const canSignAndSubmit = () => {
+		const src = source();
+		const dest = destination();
+		const creds = loadCredentialsMutation.data;
+		const token = plcToken().trim();
+
+		return !!(src?.manager && dest?.manager && creds && token && !isOverLimit());
+	};
+
+	const handleSignAndSubmit = () => {
+		const src = source();
+		const dest = destination();
+		const creds = loadCredentialsMutation.data;
+		const token = plcToken().trim();
+
+		if (!src?.manager || !dest?.manager || !creds || !token || isOverLimit()) return;
+
+		signAndSubmitMutation.mutate({
+			sourceManager: src.manager,
+			destManager: dest.manager,
+			token,
+			credentials: creds,
+			generatedKey: useGeneratedKey() ? generateKeyMutation.data : undefined,
+			customKeys: customKeys(),
+		});
+	};
+
+	const getSubmitErrorMessage = () => {
+		const err = signAndSubmitMutation.error;
+		if (err instanceof ClientResponseError) {
+			if (err.error === 'InvalidToken' || err.error === 'ExpiredToken') {
+				return 'Confirmation code has expired or is invalid';
+			}
+		}
+		return `${err}`;
+	};
+
+	return (
+		<Accordion title="Identity (PLC)">
+			<div class="mb-4 rounded border border-yellow-300 bg-yellow-50 p-3">
+				<p class="text-sm font-medium text-yellow-800">
+					This updates your DID document to point to the new PDS. This is the critical step that makes the
+					migration official.
+				</p>
+			</div>
+
+			<Subsection title="1. Request operation signature">
+				<p class="text-sm text-gray-600">Request a confirmation token via email from your source PDS.</p>
+
+				<Show
+					when={source()?.manager}
+					fallback={<p class="text-sm text-gray-500">Sign in to source account first.</p>}
+				>
+					{(manager) => (
+						<>
+							<div class="flex items-center gap-3">
+								<Button
+									onClick={() => requestTokenMutation.mutate({ manager: manager() })}
+									disabled={requestTokenMutation.isPending}
+								>
+									{requestTokenMutation.isPending ? 'Requesting...' : 'Request token'}
+								</Button>
+
+								<Show when={requestTokenMutation.isSuccess}>
+									<StatusBadge variant="success">Email sent</StatusBadge>
+								</Show>
+							</div>
+
+							<Show when={requestTokenMutation.isError}>
+								<p class="text-sm text-red-600">{`${requestTokenMutation.error}`}</p>
+							</Show>
+
+							<Show when={requestTokenMutation.isSuccess}>
+								<p class="text-sm text-gray-600">Check your email inbox for the confirmation code.</p>
+							</Show>
+						</>
+					)}
+				</Show>
+			</Subsection>
+
+			<Subsection title="2. Preview new credentials">
+				<p class="text-sm text-gray-600">View what your DID document will look like after the migration.</p>
+
+				<Show
+					when={destination()?.manager}
+					fallback={<p class="text-sm text-gray-500">Sign in to destination account first.</p>}
+				>
+					{(manager) => (
+						<>
+							<div class="flex items-center gap-3">
+								<Button
+									variant="outline"
+									onClick={() => loadCredentialsMutation.mutate({ manager: manager() })}
+									disabled={loadCredentialsMutation.isPending}
+								>
+									{loadCredentialsMutation.isPending ? 'Loading...' : 'Load credentials'}
+								</Button>
+
+								<Show when={loadCredentialsMutation.isSuccess}>
+									<StatusBadge variant="success">Loaded</StatusBadge>
+								</Show>
+							</div>
+
+							<Show when={loadCredentialsMutation.isError}>
+								<p class="text-sm text-red-600">{`${loadCredentialsMutation.error}`}</p>
+							</Show>
+
+							<Show when={loadCredentialsMutation.data}>
+								{(creds) => (
+									<>
+										<div class="mt-2 text-sm">
+											<p class="text-gray-500">
+												PDS rotation keys ({creds().rotationKeys?.length ?? 0}/5):
+											</p>
+											<div class="mt-1 flex flex-col gap-1">
+												<For each={creds().rotationKeys ?? []}>
+													{(key) => (
+														<code class="block truncate text-xs text-gray-700">{key}</code>
+													)}
+												</For>
+											</div>
+										</div>
+
+										<details class="mt-2">
+											<summary class="cursor-pointer text-sm text-gray-600">
+												View full credentials
+											</summary>
+											<pre class="mt-2 max-h-48 overflow-auto rounded border border-gray-200 bg-gray-50 p-2 font-mono text-xs">
+												{JSON.stringify(creds(), null, 2)}
+											</pre>
+										</details>
+									</>
+								)}
+							</Show>
+						</>
+					)}
+				</Show>
+			</Subsection>
+
+			<Subsection title="3. Rotation keys (optional)">
+				<p class="text-sm text-gray-600">
+					Add a rotation key to recover your account if your new PDS goes rogue. This will be prepended to
+					the PDS rotation keys shown above.
+				</p>
+
+				<ToggleInput
+					label="Generate a new rotation key"
+					checked={useGeneratedKey()}
+					onChange={(checked) => {
+						setUseGeneratedKey(checked);
+						// Auto-generate if checked and no key exists yet
+						if (checked && !generateKeyMutation.data && !generateKeyMutation.isPending) {
+							generateKeyMutation.mutate();
+						}
+					}}
+				/>
+
+				<Show when={useGeneratedKey() && generateKeyMutation.isPending}>
+					<p class="mt-2 text-sm text-gray-500">Generating key...</p>
+				</Show>
+
+				<Show when={useGeneratedKey() && generateKeyMutation.isError}>
+					<p class="mt-2 text-sm text-red-600">{`${generateKeyMutation.error}`}</p>
+				</Show>
+
+				<Show when={useGeneratedKey() && generateKeyMutation.data}>
+					{(keypair) => (
+						<div class="rounded border border-green-300 bg-green-50 p-3">
+							<p class="mb-2 text-sm font-semibold text-green-800">Save your rotation key private key!</p>
+							<p class="mb-3 text-xs text-green-700">
+								Store this securely. You'll need it to recover your account if your PDS becomes
+								unavailable or malicious.
+							</p>
+
+							<div class="flex flex-col gap-2 text-sm">
+								<div>
+									<p class="font-medium text-gray-600">Public key (did:key)</p>
+									<p class="break-all font-mono text-xs">{keypair().publicDidKey}</p>
+								</div>
+								<div>
+									<p class="font-medium text-gray-600">Private key (hex)</p>
+									<p class="break-all font-mono text-xs">{keypair().privateHex}</p>
+								</div>
+								<div>
+									<p class="font-medium text-gray-600">Private key (multikey)</p>
+									<p class="break-all font-mono text-xs">{keypair().privateMultikey}</p>
+								</div>
+							</div>
+						</div>
+					)}
+				</Show>
+
+				<div class="mt-4 border-t border-gray-200 pt-4">
+					<p class="mb-2 text-sm font-medium text-gray-700">Custom rotation keys</p>
+					<p class="mb-3 text-xs text-gray-500">
+						Add existing rotation keys (did:key format) you already control.
+					</p>
+
+					<Index each={customKeys()}>
+						{(key, index) => (
+							<div class="mb-2 flex items-center gap-2">
+								<TextInput
+									label=""
+									placeholder="did:key:z..."
+									monospace
+									autocomplete="off"
+									value={key()}
+									onChange={(value) => updateCustomKey(index, value)}
+								/>
+								<button
+									type="button"
+									class="shrink-0 rounded px-2 py-1 text-sm text-red-600 hover:bg-red-50"
+									onClick={() => removeCustomKey(index)}
+								>
+									Remove
+								</button>
+							</div>
+						)}
+					</Index>
+
+					<Button variant="outline" onClick={addCustomKey} disabled={!canAddCustomKey()}>
+						Add rotation key
+					</Button>
+
+					<Show when={isOverLimit()}>
+						<p class="mt-2 text-sm text-red-600">
+							Too many rotation keys. PLC documents can only have up to 5 rotation keys total.
+						</p>
+					</Show>
+
+					<p class="mt-2 text-xs text-gray-500">
+						Total keys: {totalKeyCount()}/5 (PDS: {pdsKeyCount()}
+						{useGeneratedKey() && generateKeyMutation.data ? ', generated: 1' : ''}
+						{customKeys().filter((k) => k.trim()).length > 0
+							? `, custom: ${customKeys().filter((k) => k.trim()).length}`
+							: ''}
+						)
+					</p>
+				</div>
+			</Subsection>
+
+			<Subsection title="4. Sign and submit">
+				<p class="text-sm text-gray-600">Enter the confirmation code and submit the PLC operation.</p>
+
+				<Show when={!source()?.manager || !destination()?.manager}>
+					<p class="text-sm text-gray-500">Sign in to both source and destination accounts first.</p>
+				</Show>
+
+				<Show when={!loadCredentialsMutation.data}>
+					<p class="text-sm text-gray-500">Load credentials first.</p>
+				</Show>
+
+				<Show when={useGeneratedKey() && !generateKeyMutation.data}>
+					<p class="text-sm text-gray-500">Generate your rotation key first.</p>
+				</Show>
+
+				<Show when={source()?.manager && destination()?.manager && loadCredentialsMutation.data}>
+					<TextInput
+						label="Confirmation code from email"
+						type="text"
+						autocomplete="one-time-code"
+						pattern={TOTP_RE.source}
+						placeholder="AAAAA-BBBBB"
+						value={plcToken()}
+						onChange={setPlcToken}
+						monospace
+					/>
+
+					<div class="flex items-center gap-3">
+						<Button onClick={handleSignAndSubmit} disabled={signAndSubmitMutation.isPending || !canSignAndSubmit()}>
+							{signAndSubmitMutation.isPending ? 'Submitting...' : 'Sign and submit'}
+						</Button>
+
+						<Show when={signAndSubmitMutation.isSuccess}>
+							<StatusBadge variant="success">Identity updated successfully</StatusBadge>
+						</Show>
+					</div>
+
+					<Show when={signAndSubmitMutation.isError}>
+						<p class="text-sm text-red-600">{getSubmitErrorMessage()}</p>
+					</Show>
+				</Show>
+			</Subsection>
+		</Accordion>
+	);
+};
+
+export default IdentitySection;

src/views/account/account-migrate/sections/preferences.tsx

···
+import { showSaveFilePicker } from 'native-file-system-adapter';
+import { createSignal, Show } from 'solid-js';
+
+import { Client, type CredentialManager, ok } from '@atcute/client';
+
+import { createMutation } from '~/lib/utils/mutation';
+
+import { Accordion, StatusBadge, Subsection } from '~/components/accordion';
+import Button from '~/components/inputs/button';
+import MultilineInput from '~/components/inputs/multiline-input';
+
+import { useMigration } from '../context';
+
+const PreferencesSection = () => {
+	const { source, destination } = useMigration();
+
+	const [prefsInput, setPrefsInput] = createSignal('');
+
+	const exportMutation = createMutation({
+		async mutationFn({ sourceManager }: { sourceManager: CredentialManager }) {
+			const sourceClient = new Client({ handler: sourceManager });
+			const prefs = await ok(sourceClient.get('app.bsky.actor.getPreferences', { params: {} }));
+			return JSON.stringify(prefs, null, 2);
+		},
+		onSuccess(json) {
+			setPrefsInput(json);
+		},
+		onError(err) {
+			console.error(err);
+		},
+	});
+
+	const downloadPrefs = async () => {
+		const prefs = exportMutation.data;
+		if (!prefs) return;
+
+		try {
+			const fd = await showSaveFilePicker({
+				suggestedName: `preferences-${source()?.did}-${new Date().toISOString()}.json`,
+				// @ts-expect-error: ponyfill doesn't have the full typings
+				id: 'prefs-export',
+				startIn: 'downloads',
+				types: [
+					{
+						description: 'JSON file',
+						accept: { 'application/json': ['.json'] },
+					},
+				],
+			}).catch((err) => {
+				if (err instanceof DOMException && err.name === 'AbortError') {
+					return undefined;
+				}
+				throw err;
+			});
+
+			if (!fd) return;
+
+			const writable = await fd.createWritable();
+			await writable.write(prefs);
+			await writable.close();
+		} catch (err) {
+			console.error(err);
+		}
+	};
+
+	const importMutation = createMutation({
+		async mutationFn({ destManager, input }: { destManager: CredentialManager; input: string }) {
+			const prefs = JSON.parse(input);
+
+			// Validate that it has a preferences array
+			if (!prefs.preferences || !Array.isArray(prefs.preferences)) {
+				throw new Error('Invalid preferences format: missing preferences array');
+			}
+
+			const destClient = new Client({ handler: destManager });
+			await destClient.post('app.bsky.actor.putPreferences', {
+				as: null,
+				input: prefs,
+			});
+		},
+		onError(err) {
+			console.error(err);
+		},
+	});
+
+	const getImportErrorMessage = () => {
+		const err = importMutation.error;
+		if (err instanceof SyntaxError) {
+			return 'Invalid JSON format';
+		}
+		return `${err}`;
+	};
+
+	return (
+		<Accordion title="Preferences">
+			<Subsection title="Export from source">
+				<p class="text-sm text-gray-600">
+					Export your Bluesky preferences (muted words, content filters, saved feeds, etc).
+				</p>
+
+				<Show
+					when={source()?.manager}
+					fallback={<p class="text-sm text-gray-500">Sign in to source account first.</p>}
+				>
+					{(sourceManager) => (
+						<>
+							<div class="flex items-center gap-3">
+								<Button
+									onClick={() => exportMutation.mutate({ sourceManager: sourceManager() })}
+									disabled={exportMutation.isPending}
+								>
+									{exportMutation.isPending ? 'Exporting...' : 'Export preferences'}
+								</Button>
+
+								<Show when={exportMutation.data}>
+									<Button variant="secondary" onClick={downloadPrefs}>
+										Download as file
+									</Button>
+								</Show>
+							</div>
+
+							<Show when={exportMutation.error}>
+								{(err) => <p class="text-sm text-red-600">{`${err()}`}</p>}
+							</Show>
+
+							<Show when={exportMutation.data}>
+								{(prefs) => (
+									<details class="mt-2">
+										<summary class="cursor-pointer text-sm text-gray-600">
+											View exported preferences
+										</summary>
+										<pre class="mt-2 max-h-48 overflow-auto rounded border border-gray-200 bg-gray-50 p-2 font-mono text-xs">
+											{prefs()}
+										</pre>
+									</details>
+								)}
+							</Show>
+						</>
+					)}
+				</Show>
+			</Subsection>
+
+			<Subsection title="Import to destination">
+				<p class="text-sm text-gray-600">Paste preferences JSON or use the exported data above.</p>
+
+				<Show
+					when={destination()?.manager}
+					fallback={<p class="text-sm text-gray-500">Sign in to destination account first.</p>}
+				>
+					{(destManager) => (
+						<>
+							<MultilineInput label="Preferences JSON" value={prefsInput()} onChange={setPrefsInput} />
+
+							<div class="flex items-center gap-3">
+								<Button
+									onClick={() =>
+										importMutation.mutate({ destManager: destManager(), input: prefsInput().trim() })
+									}
+									disabled={importMutation.isPending || !prefsInput().trim()}
+								>
+									{importMutation.isPending ? 'Importing...' : 'Import preferences'}
+								</Button>
+
+								<Show when={importMutation.isSuccess}>
+									<StatusBadge variant="success">Preferences imported successfully</StatusBadge>
+								</Show>
+							</div>
+
+							<Show when={importMutation.error}>
+								<p class="text-sm text-red-600">{getImportErrorMessage()}</p>
+							</Show>
+						</>
+					)}
+				</Show>
+			</Subsection>
+		</Accordion>
+	);
+};
+
+export default PreferencesSection;

src/views/account/account-migrate/sections/repository.tsx

···
+import { showOpenFilePicker, showSaveFilePicker } from 'native-file-system-adapter';
+import { createSignal, Show } from 'solid-js';
+
+import { Client, type CredentialManager, ok, simpleFetchHandler } from '@atcute/client';
+import type { Did } from '@atcute/lexicons/syntax';
+
+import { formatBytes } from '~/lib/utils/intl/bytes';
+import { createMutation } from '~/lib/utils/mutation';
+import { iterateStream } from '~/lib/utils/stream';
+
+import { Accordion, StatusBadge, Subsection } from '~/components/accordion';
+import Button from '~/components/inputs/button';
+
+import { useMigration } from '../context';
+
+const RepositorySection = () => {
+	const { source, destination } = useMigration();
+
+	// Export state
+	const [exportStatus, setExportStatus] = createSignal<string>();
+
+	// Import state
+	const [importStatus, setImportStatus] = createSignal<string>();
+	const [importedRecords, setImportedRecords] = createSignal<number>();
+
+	const exportMutation = createMutation({
+		async mutationFn({ pdsUrl, did }: { pdsUrl: string; did: Did }) {
+			setExportStatus('Waiting for file picker...');
+
+			const fd = await showSaveFilePicker({
+				suggestedName: `repo-${did}-${new Date().toISOString()}.car`,
+				// @ts-expect-error: ponyfill doesn't have the full typings
+				id: 'repo-export',
+				startIn: 'downloads',
+				types: [
+					{
+						description: 'CAR archive file',
+						accept: { 'application/vnd.ipld.car': ['.car'] },
+					},
+				],
+			}).catch((err) => {
+				if (err instanceof DOMException && err.name === 'AbortError') {
+					return undefined;
+				}
+				throw err;
+			});
+
+			if (!fd) {
+				setExportStatus();
+				return null;
+			}
+
+			const writable = await fd.createWritable();
+
+			setExportStatus('Downloading repository...');
+
+			const sourceClient = new Client({ handler: simpleFetchHandler({ service: pdsUrl }) });
+			const response = await sourceClient.get('com.atproto.sync.getRepo', {
+				as: 'stream',
+				params: { did },
+			});
+
+			if (!response.ok) {
+				throw new Error(`Failed to download repository: ${response.status}`);
+			}
+
+			let size = 0;
+			for await (const chunk of iterateStream(response.data)) {
+				size += chunk.length;
+				await writable.write(chunk);
+				setExportStatus(`Downloading repository... (${formatBytes(size)})`);
+			}
+
+			await writable.close();
+			setExportStatus(`Exported ${formatBytes(size)}`);
+			return size;
+		},
+		onMutate() {
+			setExportStatus();
+		},
+		onError(err) {
+			console.error(err);
+			setExportStatus();
+		},
+	});
+
+	const importFromFileMutation = createMutation({
+		async mutationFn({ manager }: { manager: CredentialManager }) {
+			setImportStatus('Waiting for file picker...');
+
+			const [fd] = await showOpenFilePicker({
+				// @ts-expect-error: ponyfill doesn't have the full typings
+				id: 'repo-import',
+				types: [
+					{
+						description: 'CAR archive file',
+						accept: { 'application/vnd.ipld.car': ['.car'] },
+					},
+				],
+			}).catch((err) => {
+				if (err instanceof DOMException && err.name === 'AbortError') {
+					return [undefined];
+				}
+				throw err;
+			});
+
+			if (!fd) {
+				setImportStatus();
+				return null;
+			}
+
+			setImportStatus('Reading file...');
+			const file = await fd.getFile();
+			const data = new Uint8Array(await file.arrayBuffer());
+
+			setImportStatus(`Uploading repository (${formatBytes(data.length)})...`);
+
+			const destClient = new Client({ handler: manager });
+			const importResp = await destClient.post('com.atproto.repo.importRepo', {
+				as: null,
+				encoding: 'application/vnd.ipld.car',
+				input: data,
+			});
+
+			if (!importResp.ok) {
+				throw new Error(`Failed to import repository: ${importResp.status}`);
+			}
+
+			// Check account status to get record count
+			const status = await ok(destClient.get('com.atproto.server.checkAccountStatus', {}));
+			setImportedRecords(status.indexedRecords);
+
+			setImportStatus(`Imported successfully`);
+			return status.indexedRecords;
+		},
+		onMutate() {
+			setImportStatus();
+			setImportedRecords();
+		},
+		onError(err) {
+			console.error(err);
+			setImportStatus();
+		},
+	});
+
+	const importFromSourceMutation = createMutation({
+		async mutationFn({
+			sourcePdsUrl,
+			sourceDid,
+			destManager,
+		}: {
+			sourcePdsUrl: string;
+			sourceDid: Did;
+			destManager: CredentialManager;
+		}) {
+			setImportStatus('Downloading from source PDS...');
+
+			const sourceClient = new Client({ handler: simpleFetchHandler({ service: sourcePdsUrl }) });
+			const response = await sourceClient.get('com.atproto.sync.getRepo', {
+				as: 'bytes',
+				params: { did: sourceDid },
+			});
+
+			if (!response.ok) {
+				throw new Error(`Failed to download repository: ${response.status}`);
+			}
+
+			setImportStatus(`Uploading to destination (${formatBytes(response.data.length)})...`);
+
+			const destClient = new Client({ handler: destManager });
+			const importResp = await destClient.post('com.atproto.repo.importRepo', {
+				as: null,
+				encoding: 'application/vnd.ipld.car',
+				input: response.data,
+			});
+
+			if (!importResp.ok) {
+				throw new Error(`Failed to import repository: ${importResp.status}`);
+			}
+
+			// Check account status to get record count
+			const status = await ok(destClient.get('com.atproto.server.checkAccountStatus', {}));
+			setImportedRecords(status.indexedRecords);
+
+			setImportStatus(`Imported successfully`);
+			return status.indexedRecords;
+		},
+		onMutate() {
+			setImportStatus();
+			setImportedRecords();
+		},
+		onError(err) {
+			console.error(err);
+			setImportStatus();
+		},
+	});
+
+	const isExporting = () => exportMutation.isPending;
+	const isImporting = () => importFromFileMutation.isPending || importFromSourceMutation.isPending;
+
+	return (
+		<Accordion title="Repository">
+			<Subsection title="Export from source">
+				<p class="text-sm text-gray-600">
+					Download the repository as a CAR file for backup or manual import.
+				</p>
+
+				<Show when={source()} fallback={<p class="text-sm text-gray-500">Resolve source account first.</p>}>
+					{(src) => (
+						<>
+							<div class="flex items-center gap-3">
+								<Button
+									onClick={() => exportMutation.mutate({ pdsUrl: src().pdsUrl, did: src().did })}
+									disabled={isExporting()}
+								>
+									{isExporting() ? 'Exporting...' : 'Export to file'}
+								</Button>
+								<Show when={exportStatus()}>
+									<span class="text-sm text-gray-600">{exportStatus()}</span>
+								</Show>
+							</div>
+
+							<Show when={exportMutation.isError}>
+								<p class="text-sm text-red-600">{`${exportMutation.error}`}</p>
+							</Show>
+						</>
+					)}
+				</Show>
+			</Subsection>
+
+			<Subsection title="Import to destination">
+				<p class="text-sm text-gray-600">
+					Upload a repository CAR file or transfer directly from source.
+				</p>
+
+				<Show
+					when={destination()?.manager}
+					fallback={<p class="text-sm text-gray-500">Sign in to destination account first.</p>}
+				>
+					{(manager) => (
+						<>
+							<div class="flex flex-wrap items-center gap-3">
+								<Button
+									onClick={() => importFromFileMutation.mutate({ manager: manager() })}
+									disabled={isImporting()}
+								>
+									{isImporting() ? 'Importing...' : 'Import from file'}
+								</Button>
+
+								<Show when={source()}>
+									{(src) => (
+										<Button
+											variant="secondary"
+											onClick={() =>
+												importFromSourceMutation.mutate({
+													sourcePdsUrl: src().pdsUrl,
+													sourceDid: src().did,
+													destManager: manager(),
+												})
+											}
+											disabled={isImporting()}
+										>
+											Transfer from source
+										</Button>
+									)}
+								</Show>
+							</div>
+
+							<Show when={importStatus()}>
+								<div class="flex items-center gap-2">
+									<span class="text-sm text-gray-600">{importStatus()}</span>
+									<Show when={importedRecords() !== undefined}>
+										<StatusBadge variant="success">{importedRecords()} records</StatusBadge>
+									</Show>
+								</div>
+							</Show>
+
+							<Show when={importFromFileMutation.isError || importFromSourceMutation.isError}>
+								<p class="text-sm text-red-600">
+									{`${importFromFileMutation.error || importFromSourceMutation.error}`}
+								</p>
+							</Show>
+						</>
+					)}
+				</Show>
+			</Subsection>
+		</Accordion>
+	);
+};
+
+export default RepositorySection;

src/views/account/account-migrate/sections/source-account.tsx

···
+import { createSignal, Show } from 'solid-js';
+
+import { type AtpAccessJwt, ClientResponseError, CredentialManager } from '@atcute/client';
+import { getPdsEndpoint, isAtprotoDid } from '@atcute/identity';
+import { isHandle, type AtprotoDid } from '@atcute/lexicons/syntax';
+
+import { getDidDocument } from '~/api/queries/did-doc';
+import { resolveHandleViaAppView } from '~/api/queries/handle';
+import { formatTotpCode, TOTP_RE } from '~/api/utils/auth';
+import { decodeJwt } from '~/api/utils/jwt';
+
+import { createMutation } from '~/lib/utils/mutation';
+
+import { Accordion, StatusBadge, Subsection } from '~/components/accordion';
+import Button from '~/components/inputs/button';
+import TextInput from '~/components/inputs/text-input';
+
+import { useMigration } from '../context';
+
+interface SourceAccountSectionProps {
+	onStarted?: () => void;
+}
+
+class InsufficientLoginError extends Error {}
+
+const SourceAccountSection = (props: SourceAccountSectionProps) => {
+	const { source, setSource } = useMigration();
+
+	// Resolve state
+	const [identifier, setIdentifier] = createSignal('');
+	const [resolveError, setResolveError] = createSignal<string>();
+
+	// Auth state
+	const [password, setPassword] = createSignal('');
+	const [otp, setOtp] = createSignal('');
+	const [isTotpRequired, setIsTotpRequired] = createSignal(false);
+	const [authError, setAuthError] = createSignal<string>();
+
+	const resolveMutation = createMutation({
+		async mutationFn({ identifier }: { identifier: string }) {
+			let did: AtprotoDid;
+			if (isAtprotoDid(identifier)) {
+				did = identifier;
+			} else if (isHandle(identifier)) {
+				did = await resolveHandleViaAppView({ handle: identifier });
+			} else {
+				throw new Error(`${identifier} is not a valid DID or handle`);
+			}
+
+			const didDoc = await getDidDocument({ did });
+			const pdsUrl = getPdsEndpoint(didDoc);
+
+			if (!pdsUrl) {
+				throw new Error(`No PDS endpoint found in DID document`);
+			}
+
+			return { did, didDoc, pdsUrl };
+		},
+		onMutate() {
+			setResolveError();
+		},
+		onSuccess({ did, didDoc, pdsUrl }) {
+			setSource({ did, didDoc, pdsUrl, manager: null });
+			props.onStarted?.();
+		},
+		onError(err) {
+			if (err instanceof ClientResponseError) {
+				if (err.error === 'InvalidRequest' && err.description?.includes('resolve handle')) {
+					setResolveError(`Can't resolve handle, is it typed correctly?`);
+					return;
+				}
+			}
+			console.error(err);
+			setResolveError(`${err}`);
+		},
+	});
+
+	const authMutation = createMutation({
+		async mutationFn({ pdsUrl, did, password, otp }: { pdsUrl: string; did: string; password: string; otp: string }) {
+			const manager = new CredentialManager({ service: pdsUrl });
+			const session = await manager.login({
+				identifier: did,
+				password: password,
+				code: formatTotpCode(otp),
+			});
+
+			const decoded = decodeJwt(session.accessJwt) as AtpAccessJwt;
+			if (decoded.scope !== 'com.atproto.access') {
+				throw new InsufficientLoginError(`You need to sign in with a main password, not an app password`);
+			}
+
+			return manager;
+		},
+		onMutate() {
+			setAuthError();
+		},
+		onSuccess(manager) {
+			setSource({ ...source()!, manager });
+			setPassword('');
+			setOtp('');
+			setIsTotpRequired(false);
+		},
+		onError(err) {
+			if (err instanceof ClientResponseError) {
+				if (err.error === 'AuthFactorTokenRequired') {
+					setOtp('');
+					setIsTotpRequired(true);
+					return;
+				}
+				if (err.error === 'AuthenticationRequired') {
+					setAuthError(`Invalid identifier or password`);
+					return;
+				}
+				if (err.error === 'AccountTakedown') {
+					setAuthError(`Account has been taken down`);
+					return;
+				}
+				if (err.description?.includes('Token is invalid')) {
+					setAuthError(`Invalid one-time confirmation code`);
+					setIsTotpRequired(true);
+					return;
+				}
+			}
+			if (err instanceof InsufficientLoginError) {
+				setAuthError(err.message);
+				return;
+			}
+			console.error(err);
+			setAuthError(`${err}`);
+		},
+	});
+
+	const isResolved = () => source() !== null;
+	const isAuthenticated = () => source()?.manager != null;
+
+	return (
+		<Accordion title="Source Account" defaultOpen>
+			<Subsection title="Resolve identity">
+				<Show when={!isResolved()}>
+					<form
+						onSubmit={(ev) => {
+							ev.preventDefault();
+							resolveMutation.mutate({ identifier: identifier() });
+						}}
+						class="flex flex-col gap-3"
+					>
+						<TextInput
+							label="Handle or DID"
+							placeholder="alice.bsky.social"
+							value={identifier()}
+							required
+							autofocus
+							onChange={setIdentifier}
+						/>
+
+						<Show when={resolveError()}>
+							<p class="text-sm text-red-600">{resolveError()}</p>
+						</Show>
+
+						<div>
+							<Button type="submit" disabled={resolveMutation.isPending}>
+								{resolveMutation.isPending ? 'Resolving...' : 'Resolve'}
+							</Button>
+						</div>
+					</form>
+				</Show>
+
+				<Show when={isResolved()}>
+					<div class="flex flex-col gap-2 text-sm">
+						<p>
+							<span class="text-gray-500">DID:</span>{' '}
+							<span class="font-mono">{source()!.did}</span>
+						</p>
+						<p>
+							<span class="text-gray-500">PDS:</span>{' '}
+							<span class="font-mono">{source()!.pdsUrl}</span>
+						</p>
+						<div class="mt-1">
+							<button
+								type="button"
+								onClick={() => setSource(null)}
+								class="text-sm text-purple-800 hover:underline"
+							>
+								Change account
+							</button>
+						</div>
+					</div>
+				</Show>
+			</Subsection>
+
+			<Show when={isResolved()}>
+				<Subsection title="Authenticate">
+					<p class="text-sm text-gray-600">
+						Authentication is required for some operations like exporting preferences or signing PLC operations.
+					</p>
+
+					<Show when={!isAuthenticated()}>
+						<form
+							onSubmit={(ev) => {
+								ev.preventDefault();
+								const src = source()!;
+								authMutation.mutate({
+									pdsUrl: src.pdsUrl,
+									did: src.did,
+									password: password(),
+									otp: otp(),
+								});
+							}}
+							class="flex flex-col gap-3"
+						>
+							<TextInput
+								label="Main password"
+								blurb="Your credentials stay entirely within your browser."
+								type="password"
+								value={password()}
+								required
+								onChange={setPassword}
+							/>
+
+							<Show when={isTotpRequired()}>
+								<TextInput
+									label="One-time confirmation code"
+									blurb="A code has been sent to your email address."
+									type="text"
+									autocomplete="one-time-code"
+									pattern={TOTP_RE.source}
+									placeholder="AAAAA-BBBBB"
+									value={otp()}
+									required
+									onChange={setOtp}
+									monospace
+								/>
+							</Show>
+
+							<Show when={authError()}>
+								<p class="text-sm text-red-600">{authError()}</p>
+							</Show>
+
+							<div>
+								<Button type="submit" disabled={authMutation.isPending}>
+									{authMutation.isPending ? 'Signing in...' : 'Sign in'}
+								</Button>
+							</div>
+						</form>
+					</Show>
+
+					<Show when={isAuthenticated()}>
+						<div class="flex items-center gap-2">
+							<StatusBadge variant="success">Signed in</StatusBadge>
+							<button
+								type="button"
+								onClick={() => setSource({ ...source()!, manager: null })}
+								class="text-sm text-purple-800 hover:underline"
+							>
+								Sign out
+							</button>
+						</div>
+					</Show>
+				</Subsection>
+			</Show>
+		</Accordion>
+	);
+};
+
+export default SourceAccountSection;

src/views/frontpage.tsx

···
 				{
 					name: `Migrate account`,
 					description: `Move your account data to another server`,
-					href: null,
+					href: '/account-migrate',
 					icon: MoveUpOutlinedIcon,
 				},
 			],

src/views/repository/repo-export.tsx

···
 import { useTitle } from '~/lib/navigation/router';
 import { makeAbortable } from '~/lib/utils/abortable';
 import { formatBytes } from '~/lib/utils/intl/bytes';
+import { iterateStream } from '~/lib/utils/stream';
 
 import Button from '~/components/inputs/button';
 import TextInput from '~/components/inputs/text-input';
···
 };
 
 export default RepoExportPage;
-
-export async function* iterateStream<T>(stream: ReadableStream<T>) {
-	// Get a lock on the stream
-	const reader = stream.getReader();
-
-	try {
-		while (true) {
-			const { done, value } = await reader.read();
-
-			if (done) {
-				return;
-			}
-
-			yield value;
-		}
-	} finally {
-		reader.releaseLock();
-	}
-}