diff --git a/web/src/app.css b/web/src/app.css
index 94baea7e1..3549e93d3 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -323,6 +323,26 @@
 	}
 }
 
+@utility row-breathe {
+	animation: row-breathe 1.2s ease-in-out infinite;
+	background-color: var(--color-background-muted);
+	border-radius: var(--radius-sm, 0.25rem);
+
+	@media (prefers-reduced-motion: reduce) {
+		animation: none;
+	}
+}
+
+@keyframes row-breathe {
+	0%,
+	100% {
+		opacity: 0.88;
+	}
+	50% {
+		opacity: 1;
+	}
+}
+
 @layer base {
 	@font-face {
 		font-family: "InterVariable";
diff --git a/web/src/lib/api/blob.ts b/web/src/lib/api/blob.ts
index c880167e7..6b95e9f2b 100644
--- a/web/src/lib/api/blob.ts
+++ b/web/src/lib/api/blob.ts
@@ -86,7 +86,8 @@ export const loadRepoBlob = async (
 	ref: string,
 	path: string
 ): Promise<RepoBlobView> => {
-	const git = gitTarget(parent.publicConfig, parent.repo, event.fetch);
+	const repo = await parent.repo;
+	const git = gitTarget(parent.publicConfig, repo, event.fetch);
 
 	// the knot 404s directories and missing paths alike
 	// knot2's repo_blob answers 413 over its serving limit instead of
@@ -136,7 +137,8 @@ export const loadRepoBlob = async (
 		kind === "markup" && contents !== null
 			? await renderReadme(
 					{ filename: path, contents },
-					parent,
+					repo,
+					parent.publicConfig,
 					event,
 					ref,
 					path.includes("/") ? path.slice(0, path.lastIndexOf("/")) : undefined
diff --git a/web/src/lib/api/commitStatuses.ts b/web/src/lib/api/commitStatuses.ts
index 38d9024b9..03554e55e 100644
--- a/web/src/lib/api/commitStatuses.ts
+++ b/web/src/lib/api/commitStatuses.ts
@@ -3,7 +3,8 @@ import type { PipelineSummary } from "$lib/components/repo/types";
 
 export type CommitStatuses = Record<string, PipelineSummary>;
 
-const never = new Promise<CommitStatuses>(() => {});
+// the server has no spindle session, resolve empty so the boundary doesn't hang
+const none: Promise<CommitStatuses> = Promise.resolve({});
 
 export const commitStatuses = (
 	spindle: string | undefined,
@@ -13,14 +14,12 @@ export const commitStatuses = (
 ): Promise<CommitStatuses> | undefined => {
 	// only repos with a spindle run CI
 	if (!spindle || shas.length === 0) return undefined;
-	if (!browser) return never;
+	if (!browser) return none;
 
 	const params = new URLSearchParams();
 	for (const sha of new Set(shas)) params.append("sha", sha);
 	const path = `/${encodeURIComponent(ownerHandle)}/${encodeURIComponent(repoName)}/commit-statuses?${params}`;
-	return (
-		fetch(path)
-			.then((res) => (res.ok ? (res.json() as Promise<CommitStatuses>) : ({} as CommitStatuses)))
-			.catch(() => ({}))
-	);
+	return fetch(path)
+		.then((res) => (res.ok ? (res.json() as Promise<CommitStatuses>) : ({} as CommitStatuses)))
+		.catch(() => ({}));
 };
diff --git a/web/src/lib/api/load.ts b/web/src/lib/api/load.ts
index 7e9bd8503..eb93f2a07 100644
--- a/web/src/lib/api/load.ts
+++ b/web/src/lib/api/load.ts
@@ -41,6 +41,12 @@ export const parallel = async <T extends Record<string, Promise<unknown>>>(
 	return out;
 };
 
+// unhandled rejections kill node if nothing on the page awaits the promise
+export const stream = <T>(promise: Promise<T>): Promise<T> => {
+	promise.catch(() => {});
+	return promise;
+};
+
 // per-request promise de-dupe cache.
 export interface RequestCache {
 	run<T>(key: string, load: () => Promise<T>): Promise<T>;
diff --git a/web/src/lib/api/pullCompose.ts b/web/src/lib/api/pullCompose.ts
index 349cb13c2..592420614 100644
--- a/web/src/lib/api/pullCompose.ts
+++ b/web/src/lib/api/pullCompose.ts
@@ -1,3 +1,4 @@
+import { error } from "@sveltejs/kit";
 import type { Did } from "@atcute/lexicons/syntax";
 import type { RepoInfo } from "$lib/components/repo/types";
 import { createBobbinClient } from "./client";
@@ -117,15 +118,15 @@ export interface ComposeData {
 // on the identity
 export const loadCompose = async (args: {
 	config: GitServiceConfig;
-	repo: RepoInfo;
+	repo: RepoInfo | Promise<RepoInfo>;
 	viewer: { did: string; handle: string } | null;
 	params: URLSearchParams;
 	fetch: typeof globalThis.fetch;
 }): Promise<ComposeData> => {
-	const { config, repo, viewer, params, fetch: fetchFn } = args;
+	const { config, repo: repoInput, viewer, params, fetch: fetchFn } = args;
+	const repo = await repoInput;
 	const repoDid = repo.repoDid;
-	if (!repoDid) throw new Error("This repository has not been indexed yet");
-
+	if (!repoDid) throw error(404, "This repository has not been indexed yet");
 	const ctx = createBobbinClient({ serviceUrl: config.bobbinUrl, fetch: fetchFn });
 	const source: PullSource = parseSource(params.get("source")) ?? "branch";
 
diff --git a/web/src/lib/api/repoIndex.ts b/web/src/lib/api/repoIndex.ts
index 1132a1ccb..561457bb7 100644
--- a/web/src/lib/api/repoIndex.ts
+++ b/web/src/lib/api/repoIndex.ts
@@ -9,7 +9,7 @@ import {
 	tags as gitTags,
 	tree as gitTree
 } from "$lib/api/gitclient";
-import { parallel } from "$lib/api/load";
+import { parallel, stream } from "$lib/api/load";
 import {
 	sortBranches,
 	sortTreeEntries,
@@ -24,15 +24,15 @@ import { renderDocument } from "$lib/markup";
 import type { CommitSummary, LanguageSlice, RepoInfo } from "$lib/components/repo/types";
 // `/tree/{ref}` is this same page at another ref, so they share a load
 
-const COMMIT_LIMIT = 10;
-const BRANCH_LIMIT = 5;
-const TAG_LIMIT = 5;
+export const COMMIT_LIMIT = 10;
+export const BRANCH_LIMIT = 5;
+export const TAG_LIMIT = 5;
 // a knot only ever lists 100 refs, so any total we get is really a minimum
 export const REF_LIMIT = 100;
 
 export interface RepoParent {
 	publicConfig: { bobbinUrl: string; knotMirrorUrl: string; camoEnabled: boolean };
-	repo: RepoInfo;
+	repo: RepoInfo | Promise<RepoInfo>;
 }
 
 export interface RepoLoadEvent {
@@ -96,18 +96,19 @@ const refNames = (branches: { name: string }[], tags: { name: string }[]) => ({
 
 export const renderReadme = (
 	readme: { filename: string; contents: string } | null,
-	parent: RepoParent,
+	repo: RepoInfo,
+	publicConfig: { camoEnabled: boolean },
 	event: RepoLoadEvent,
 	ref: string,
 	dir?: string
 ) =>
 	readme
 		? renderDocument(readme.filename, readme.contents, {
-				repo: `${parent.repo.ownerHandle}/${parent.repo.name}`,
+				repo: `${repo.ownerHandle}/${repo.name}`,
 				ref,
 				dir,
 				host: event.url.host,
-				camo: parent.publicConfig.camoEnabled
+				camo: publicConfig.camoEnabled
 			})
 		: Promise.resolve(null);
 
@@ -143,95 +144,119 @@ const withAuthorHandles = async (
 	);
 };
 
-export const loadRepoIndex = async (
+export const loadRepoIndex = (
 	event: RepoLoadEvent,
 	parent: RepoParent,
-	ref: string,
+	ref?: string,
 	// a ref from the url has to resolve or a typo looks like a repo with no
 	// files. the default branch renders whatever the knot managed to answer
 	{ requireRef = false }: RepoIndexOptions = {}
 ) => {
-	const git = gitTarget(parent.publicConfig, parent.repo, event.fetch);
+	const repoP = Promise.resolve(parent.repo);
 
 	// each list falls back on its own, so half a page still renders
-	const results = await parallel({
-		tree: attempt(gitTree(git, { ref })),
-		log: attempt(gitLog(git, { ref, limit: COMMIT_LIMIT })),
-		branches: attempt(gitBranches(git, REF_LIMIT)),
-		tags: attempt(gitTags(git, REF_LIMIT)),
-		languages: attempt(gitLanguages(git, ref))
-	});
-
-	const branches = sortBranches((results.branches.value?.branches ?? []).map(toBranchSummary));
-	const tags = (results.tags.value?.tags ?? []).map(toTagSummary);
-	const commits = await withAuthorHandles(
-		(results.log.value?.commits ?? []).map(toCommitSummary),
-		parent.publicConfig.bobbinUrl,
-		event.fetch
-	);
-	const files = sortTreeEntries((results.tree.value?.files ?? []).map(toTreeEntrySummary));
-
-	const languages = toLanguageSlices(results.languages.value?.languages ?? []);
+	const content = repoP.then(async (repo) => {
+		const targetRef = ref ?? (await repo.defaultBranch);
+		const git = gitTarget(parent.publicConfig, repo, event.fetch);
+
+		const results = await parallel({
+			tree: attempt(gitTree(git, { ref: targetRef })),
+			log: attempt(gitLog(git, { ref: targetRef, limit: COMMIT_LIMIT })),
+			branches: attempt(gitBranches(git, REF_LIMIT)),
+			tags: attempt(gitTags(git, REF_LIMIT))
+		});
 
-	const readme = readmeOf(results.tree.value);
-	const readmeHtml = await renderReadme(readme, parent, event, ref);
+		const branches = sortBranches(
+			(results.branches.value?.branches ?? []).map(toBranchSummary)
+		);
+		const tags = (results.tags.value?.tags ?? []).map(toTagSummary);
+		const commits = await withAuthorHandles(
+			(results.log.value?.commits ?? []).map(toCommitSummary),
+			parent.publicConfig.bobbinUrl,
+			event.fetch
+		);
+		const files = sortTreeEntries((results.tree.value?.files ?? []).map(toTreeEntrySummary));
+
+		const contentAttempts = [results.tree, results.log, results.branches];
+		const knot = classifyRepoAvailability(contentAttempts);
+		const availability: RepoAvailability =
+			knot === "ok" && files.length === 0 && branches.length === 0 ? "empty" : knot;
+
+		// there are refs but not this one, so it is not a real ref. an empty repo has
+		// no refs at all and still gets a page
+		if (requireRef && results.tree.value === null && branches.length > 0) {
+			error(404, `${targetRef} does not exist in this repository`);
+		}
+
+		return {
+			ref: targetRef,
+			availability,
+			files,
+			readme: readmeOf(results.tree.value),
+			commits,
+			tagsByCommit: tagsByCommitHash(commits, tags),
+			totalCommits: results.log.value?.total ?? commits.length,
+			branches: branches.slice(0, BRANCH_LIMIT),
+			totalBranches: branches.length,
+			tags: tags.slice(0, TAG_LIMIT),
+			totalTags: tags.length,
+			// the switcher needs every ref, not just the visible slice
+			refs: refNames(branches, tags)
+		};
+	});
 
-	const contentAttempts = [results.tree, results.log, results.branches];
-	const knot = classifyRepoAvailability(contentAttempts);
-	const availability: RepoAvailability =
-		knot === "ok" && files.length === 0 && branches.length === 0 ? "empty" : knot;
+	const languages = repoP.then(async (repo) => {
+		const targetRef = ref ?? (await repo.defaultBranch);
+		const git = gitTarget(parent.publicConfig, repo, event.fetch);
+		const result = await attempt(gitLanguages(git, targetRef));
+		return toLanguageSlices(result.value?.languages ?? []);
+	});
 
-	// there are refs but not this one, so it is not a real ref. an empty repo has
-	// no refs at all and still gets a page
-	if (requireRef && results.tree.value === null && branches.length > 0) {
-		error(404, `${ref} does not exist in this repository`);
-	}
+	const readmeHtml = Promise.all([repoP, content]).then(([repo, resolved]) =>
+		renderReadme(resolved.readme, repo, parent.publicConfig, event, resolved.ref)
+	);
 
 	return {
-		ref,
-		availability,
-		files,
-		readme,
-		readmeHtml,
-		commits,
-		tagsByCommit: tagsByCommitHash(commits, tags),
-		totalCommits: results.log.value?.total ?? commits.length,
-		branches: branches.slice(0, BRANCH_LIMIT),
-		totalBranches: branches.length,
-		tags: tags.slice(0, TAG_LIMIT),
-		totalTags: tags.length,
-		// the switcher needs every ref, not just the visible slice
-		refs: refNames(branches, tags),
-		languages
+		ref: ref ?? "",
+		content: stream(content),
+		languages: stream(languages),
+		readmeHtml: stream(readmeHtml)
 	};
 };
 
-export const loadRepoTree = async (
+export const loadRepoTree = (
 	event: RepoLoadEvent,
 	parent: RepoParent,
 	ref: string,
 	path: string
 ) => {
-	const git = gitTarget(parent.publicConfig, parent.repo, event.fetch);
-
-	// the tree is the whole page here, so a miss is just a 404
-	const tree = await orNull(gitTree(git, { ref, path }));
-	const files = sortTreeEntries((tree?.files ?? []).map(toTreeEntrySummary));
-	// git cannot store an empty directory. so nothing here means the path is a
-	// file, or was never there
-	if (tree === null || files.length === 0) {
-		error(404, `${path} does not exist at ${ref}`);
-	}
+	const repoP = Promise.resolve(parent.repo);
+
+	const tree = repoP.then(async (repo) => {
+		const git = gitTarget(parent.publicConfig, repo, event.fetch);
+		const result = await orNull(gitTree(git, { ref, path }));
+		const files = sortTreeEntries((result?.files ?? []).map(toTreeEntrySummary));
+		// git cannot store an empty directory. so nothing here means the path is a
+		// file, or was never there
+		if (result === null || files.length === 0) {
+			error(404, `${path} does not exist at ${ref}`);
+		}
+
+		return {
+			files,
+			readme: readmeOf(result),
+			lastCommit: result.lastCommit ? toTreeCommitSummary(result.lastCommit) : null
+		};
+	});
 
-	const readme = readmeOf(tree);
-	const readmeHtml = await renderReadme(readme, parent, event, ref, path);
+	const readmeHtml = Promise.all([repoP, tree]).then(([repo, resolved]) =>
+		renderReadme(resolved.readme, repo, parent.publicConfig, event, ref, path)
+	);
 
 	return {
 		ref,
 		path,
-		files,
-		readme,
-		readmeHtml,
-		lastCommit: tree.lastCommit ? toTreeCommitSummary(tree.lastCommit) : null
+		tree: stream(tree),
+		readmeHtml: stream(readmeHtml)
 	};
 };
diff --git a/web/src/lib/components/profile/ProfileChrome.svelte b/web/src/lib/components/profile/ProfileChrome.svelte
new file mode 100644
index 000000000..d080772f7
--- /dev/null
+++ b/web/src/lib/components/profile/ProfileChrome.svelte
@@ -0,0 +1,98 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { setContext } from "svelte";
+	import { createBobbinClient } from "$lib/api/client";
+	import { IdentityCache } from "$lib/api/identity";
+	import { getAuth } from "$lib/auth.svelte";
+	import type { ProfileRecord } from "$lib/api/records";
+	import EmptyState from "$lib/components/ui/EmptyState.svelte";
+	import TabPanel from "$lib/components/ui/TabPanel.svelte";
+	import { createProfileCounts, PROFILE_COUNTS_KEY } from "./counts.svelte";
+	import { fetchVouchesPage } from "./pages";
+	import ProfileCard from "./ProfileCard.svelte";
+	import ProfileTabs from "./ProfileTabs.svelte";
+	import type { DirectVouch, NetworkVouch, ProfileCounts } from "./types";
+
+	interface Props {
+		identity: { did: string; handle: string };
+		profile: ProfileRecord | null;
+		loadedCounts: ProfileCounts;
+		viewerFollowRkey?: string | null;
+		viewerVouch: DirectVouch | null;
+		notJoined: boolean;
+		bobbinUrl: string;
+		activeTab: string;
+		content: Snippet;
+	}
+
+	let {
+		identity,
+		profile,
+		loadedCounts,
+		viewerFollowRkey,
+		viewerVouch,
+		notJoined,
+		bobbinUrl,
+		activeTab,
+		content
+	}: Props = $props();
+
+	// setContext refuses to run after an await, so the shell awaits the props first
+	const profileCounts = createProfileCounts(
+		() => identity.did,
+		() => loadedCounts
+	);
+	setContext(PROFILE_COUNTS_KEY, profileCounts);
+	const counts = $derived(profileCounts.value);
+
+	// network vouches need the viewer's oauth agent, which only lives in the browser
+	const auth = getAuth();
+	let networkVouches = $state<NetworkVouch[]>([]);
+
+	$effect(() => {
+		const agent = auth.agent;
+		const did = identity.did;
+		const viewerDid = auth.currentDid;
+		networkVouches = [];
+		if (!agent) return;
+
+		let cancelled = false;
+		const ctx = createBobbinClient({ serviceUrl: bobbinUrl, agent });
+		const cache = new IdentityCache(createBobbinClient({ serviceUrl: bobbinUrl }));
+		fetchVouchesPage(ctx, { did, cache })
+			.then((page) => {
+				if (cancelled) return;
+				networkVouches = page.items
+					.filter((v) => v.direction === "incoming" && v.did !== viewerDid)
+					.map((v) => ({ did: v.did, handle: v.handle, kind: v.kind }));
+			})
+			.catch(() => {
+				if (!cancelled) networkVouches = [];
+			});
+		return () => {
+			cancelled = true;
+		};
+	});
+</script>
+
+{#if notJoined}
+	<EmptyState message={`${identity.handle} hasn't joined Tangled yet.`} />
+{:else}
+	<ProfileTabs handle={identity.handle} active={activeTab} {counts} />
+	<TabPanel as="div" padded={false} class="grid md:grid-cols-11 md:gap-4 md:p-6">
+		<aside class="p-6 md:col-span-3 md:p-0">
+			<ProfileCard
+				{identity}
+				{profile}
+				followers={counts.followers}
+				following={counts.following}
+				{viewerFollowRkey}
+				{viewerVouch}
+				{networkVouches}
+			/>
+		</aside>
+		<div class="min-w-0 border-t border-border-default p-6 md:col-span-8 md:border-t-0 md:p-0">
+			{@render content()}
+		</div>
+	</TabPanel>
+{/if}
diff --git a/web/src/lib/components/profile/ProfileShell.svelte b/web/src/lib/components/profile/ProfileShell.svelte
new file mode 100644
index 000000000..62a1a844b
--- /dev/null
+++ b/web/src/lib/components/profile/ProfileShell.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { ProfileRecord } from "$lib/api/records";
+	import ProfileChrome from "./ProfileChrome.svelte";
+	import type { DirectVouch, ProfileCounts } from "./types";
+
+	interface Identity {
+		did: string;
+		handle: string;
+	}
+
+	interface Props {
+		identity: Identity | Promise<Identity>;
+		profile: ProfileRecord | null | Promise<ProfileRecord | null>;
+		counts: ProfileCounts | Promise<ProfileCounts>;
+		viewerFollowRkey?: string | null | Promise<string | null | undefined>;
+		viewerVouch: DirectVouch | null | Promise<DirectVouch | null>;
+		notJoined: boolean | Promise<boolean>;
+		bobbinUrl: string;
+		activeTab: string;
+		content: Snippet;
+	}
+
+	let {
+		identity: identityProp,
+		profile: profileProp,
+		counts: countsProp,
+		viewerFollowRkey: viewerFollowRkeyProp,
+		viewerVouch: viewerVouchProp,
+		notJoined: notJoinedProp,
+		bobbinUrl,
+		activeTab,
+		content
+	}: Props = $props();
+
+	// an await here suspends the whole navigation, so awaits live below the boundary
+	const identity = $derived(await identityProp);
+	const profile = $derived(await profileProp);
+	const loadedCounts = $derived(await countsProp);
+	const viewerFollowRkey = $derived(await viewerFollowRkeyProp);
+	const viewerVouch = $derived(await viewerVouchProp);
+	const notJoined = $derived(await notJoinedProp);
+</script>
+
+<ProfileChrome
+	{identity}
+	{profile}
+	{loadedCounts}
+	{viewerFollowRkey}
+	{viewerVouch}
+	{notJoined}
+	{bobbinUrl}
+	{activeTab}
+	{content}
+/>
diff --git a/web/src/lib/components/profile/ProfileTabs.svelte b/web/src/lib/components/profile/ProfileTabs.svelte
index 1b9b7b617..931e8ed74 100644
--- a/web/src/lib/components/profile/ProfileTabs.svelte
+++ b/web/src/lib/components/profile/ProfileTabs.svelte
@@ -26,7 +26,13 @@
 			count: counts.repos,
 			href: hrefFor("repos")
 		},
-		{ id: "starred", label: "Starred", icon: Star, count: counts.stars, href: hrefFor("starred") },
+		{
+			id: "starred",
+			label: "Starred",
+			icon: Star,
+			count: counts.stars,
+			href: hrefFor("starred")
+		},
 		{
 			id: "strings",
 			label: "Strings",
diff --git a/web/src/lib/components/profile/StringCardContent.svelte b/web/src/lib/components/profile/StringCardContent.svelte
index a742e5e3a..ab4599656 100644
--- a/web/src/lib/components/profile/StringCardContent.svelte
+++ b/web/src/lib/components/profile/StringCardContent.svelte
@@ -19,11 +19,13 @@
 	</div>
 
 	{#if entry.description}
-		<p class="line-clamp-2 typography-paragraph-small text-foreground-muted">{entry.description}</p>
+		<p class="line-clamp-2 typography-paragraph-small text-foreground-muted">
+			{entry.description}
+		</p>
 	{/if}
 
 	<div
-		class="mt-auto flex flex-wrap items-center gap-4 pt-2 font-mono typography-monospace-small text-foreground-subtle"
+		class="mt-auto flex flex-wrap items-center gap-4 pt-2 typography-monospace-small font-mono text-foreground-subtle"
 	>
 		<span class="shrink-0"
 			>{entry.lines} line{entry.lines === 1 ? "" : "s"} &middot; {compactRelativeTime(
diff --git a/web/src/lib/components/profile/VouchCard.svelte b/web/src/lib/components/profile/VouchCard.svelte
index 4ebc39fcb..fe7ced25f 100644
--- a/web/src/lib/components/profile/VouchCard.svelte
+++ b/web/src/lib/components/profile/VouchCard.svelte
@@ -45,7 +45,9 @@
 			{:else}
 				<span class="font-medium">{profileLabel}</span>
 			{/if}
-			<span class="typography-paragraph-small text-foreground-placeholder">{relativeTime(vouch.createdAt)}</span>
+			<span class="typography-paragraph-small text-foreground-placeholder"
+				>{relativeTime(vouch.createdAt)}</span
+			>
 		</div>
 		{#if vouch.reason}
 			<p class="typography-paragraph-small text-foreground-subtle">{vouch.reason}</p>
diff --git a/web/src/lib/components/profile/tabs/RepoListTab.svelte b/web/src/lib/components/profile/tabs/RepoListTab.svelte
index 6d03cc870..eae09118f 100644
--- a/web/src/lib/components/profile/tabs/RepoListTab.svelte
+++ b/web/src/lib/components/profile/tabs/RepoListTab.svelte
@@ -50,7 +50,9 @@
 
 <Section
 	empty={repos.length === 0}
-	emptyMessage={searchQuery ? `No repositories match "${searchQuery}".` : "No repositories found."}
+	emptyMessage={searchQuery
+		? `No repositories match "${searchQuery}".`
+		: "No repositories found."}
 >
 	{#snippet header()}
 		<div class="mb-4">
diff --git a/web/src/lib/components/profile/tabs/StarredTab.svelte b/web/src/lib/components/profile/tabs/StarredTab.svelte
index 47dcb4de4..d034d2c73 100644
--- a/web/src/lib/components/profile/tabs/StarredTab.svelte
+++ b/web/src/lib/components/profile/tabs/StarredTab.svelte
@@ -22,14 +22,18 @@
 
 	const auth = getAuth();
 
-	const pager = createOffsetPager(untrack(() => initial), PROFILE_PAGE_LIMIT, (offset) => {
-		const ctx = createBobbinClient({ serviceUrl: auth.bobbinUrl });
-		return fetchStarredPage(ctx, {
-			did,
-			viewerDid: auth.currentDid ?? undefined,
-			offset
-		}).then((p) => p.items);
-	});
+	const pager = createOffsetPager(
+		untrack(() => initial),
+		PROFILE_PAGE_LIMIT,
+		(offset) => {
+			const ctx = createBobbinClient({ serviceUrl: auth.bobbinUrl });
+			return fetchStarredPage(ctx, {
+				did,
+				viewerDid: auth.currentDid ?? undefined,
+				offset
+			}).then((p) => p.items);
+		}
+	);
 	const stars = $derived(pager.items);
 	const pages = $derived(pageCount(total, PROFILE_PAGE_LIMIT));
 </script>
diff --git a/web/src/lib/components/repo/BlobHeader.stories.svelte b/web/src/lib/components/repo/BlobHeader.stories.svelte
index a068bee1f..0b7a18c58 100644
--- a/web/src/lib/components/repo/BlobHeader.stories.svelte
+++ b/web/src/lib/components/repo/BlobHeader.stories.svelte
@@ -79,7 +79,13 @@
 
 <Story
 	name="Submodule"
-	args={{ kind: "submodule", path: "vendor/spindle", sizeLabel: null, lines: null, copyText: null }}
+	args={{
+		kind: "submodule",
+		path: "vendor/spindle",
+		sizeLabel: null,
+		lines: null,
+		copyText: null
+	}}
 	play={async ({ canvas }: PlayContext) => {
 		await expect(canvas.getByText("spindle")).toBeVisible();
 		await expect(canvas.queryByRole("link", { name: "View raw" })).toBeNull();
diff --git a/web/src/lib/components/repo/BlobHeader.svelte b/web/src/lib/components/repo/BlobHeader.svelte
index 6f650ecc5..48bfeebb7 100644
--- a/web/src/lib/components/repo/BlobHeader.svelte
+++ b/web/src/lib/components/repo/BlobHeader.svelte
@@ -92,7 +92,10 @@
 		{#if kind !== "submodule"}
 			<ButtonGroup>
 				{#if hasRenderedView(kind)}
-					<Button size="small" onclick={() => (view = view === "code" ? "rendered" : "code")}>
+					<Button
+						size="small"
+						onclick={() => (view = view === "code" ? "rendered" : "code")}
+					>
 						View {view === "rendered" ? "code" : "rendered"}
 					</Button>
 				{/if}
diff --git a/web/src/lib/components/repo/BlobView.svelte b/web/src/lib/components/repo/BlobView.svelte
index 04b9c9503..39a55b746 100644
--- a/web/src/lib/components/repo/BlobView.svelte
+++ b/web/src/lib/components/repo/BlobView.svelte
@@ -58,7 +58,9 @@
 
 	let wrap = $state(false);
 
-	const textViewActive = $derived(hasTextView(blob.kind) && view === "code" && !blob.fileTooLarge);
+	const textViewActive = $derived(
+		hasTextView(blob.kind) && view === "code" && !blob.fileTooLarge
+	);
 
 	let overflows = $state(false);
 
@@ -126,7 +128,9 @@
 	{:else if blob.fileTooLarge}
 		<p class="py-8 text-center text-foreground-muted">
 			This file is too large to render.
-			<a href={rawHref} class="text-foreground-default no-underline hover:underline">View raw.</a>
+			<a href={rawHref} class="text-foreground-default no-underline hover:underline"
+				>View raw.</a
+			>
 		</p>
 	{:else if blob.kind === "image" || (blob.kind === "svg" && view === "rendered")}
 		<div class="text-center">
@@ -147,7 +151,13 @@
 		<div class="markup overflow-x-auto">{@html blob.renderedHtml}</div>
 	{:else if blob.contents !== null}
 		<div bind:this={codeHost}>
-			<PierreFile name={fileName} contents={blob.contents} {wrap} {prerenderedHTML} {onPostRender} />
+			<PierreFile
+				name={fileName}
+				contents={blob.contents}
+				{wrap}
+				{prerenderedHTML}
+				{onPostRender}
+			/>
 		</div>
 	{:else}
 		<p class="py-8 text-center text-foreground-muted">
diff --git a/web/src/lib/components/repo/BranchTable.svelte b/web/src/lib/components/repo/BranchTable.svelte
index 8d0513f90..8a3cca7b1 100644
--- a/web/src/lib/components/repo/BranchTable.svelte
+++ b/web/src/lib/components/repo/BranchTable.svelte
@@ -77,7 +77,11 @@
 
 		<div class="md:hidden">
 			{#each branches as branch, index (branch.name)}
-				<div class="p-2 {index < branches.length - 1 ? 'border-b border-border-default' : ''}">
+				<div
+					class="p-2 {index < branches.length - 1
+						? 'border-b border-border-default'
+						: ''}"
+				>
 					<div class="flex items-center gap-2">
 						<a
 							href={treeHref(branch.name)}
@@ -92,7 +96,10 @@
 					<div
 						class="mt-1 flex items-center gap-1 typography-paragraph-small text-foreground-muted"
 					>
-						<a href={logHref(branch.name)} class="font-mono no-underline hover:underline">
+						<a
+							href={logHref(branch.name)}
+							class="font-mono no-underline hover:underline"
+						>
 							{branch.hash.slice(0, 8)}
 						</a>
 						{#if branch.when}
diff --git a/web/src/lib/components/repo/CloneDropdown.stories.svelte b/web/src/lib/components/repo/CloneDropdown.stories.svelte
index 11d333aa9..4b06f0e6d 100644
--- a/web/src/lib/components/repo/CloneDropdown.stories.svelte
+++ b/web/src/lib/components/repo/CloneDropdown.stories.svelte
@@ -12,7 +12,7 @@
 		ownerHandle: "dawn",
 		repoDid: "did:plc:repo",
 		knot: "knot1.tangled.sh",
-		defaultBranch: "main"
+		defaultBranch: Promise.resolve("main")
 	};
 
 	const selfHostedRepo = { ...repo, knot: "https://git.example.test:8443" };
diff --git a/web/src/lib/components/repo/CloneDropdown.svelte b/web/src/lib/components/repo/CloneDropdown.svelte
index 1cf4bc203..f84e17f14 100644
--- a/web/src/lib/components/repo/CloneDropdown.svelte
+++ b/web/src/lib/components/repo/CloneDropdown.svelte
@@ -48,7 +48,6 @@
 		url.searchParams.set("format", format);
 		return url.toString();
 	};
-
 </script>
 
 <Dropdown
@@ -64,9 +63,14 @@
 	{/snippet}
 
 	<div class="flex items-center justify-between">
-		<h3 class="typography-paragraph-small font-medium text-foreground-default">Clone this repository</h3>
+		<h3 class="typography-paragraph-small font-medium text-foreground-default">
+			Clone this repository
+		</h3>
 		{#if repo.repoDid}
-			<Checkbox bind:checked={permalink} class="typography-paragraph-small text-foreground-muted">
+			<Checkbox
+				bind:checked={permalink}
+				class="typography-paragraph-small text-foreground-muted"
+			>
 				Use permalink
 			</Checkbox>
 		{/if}
diff --git a/web/src/lib/components/repo/CommitHeader.svelte b/web/src/lib/components/repo/CommitHeader.svelte
index 5e737a60b..607f681d9 100644
--- a/web/src/lib/components/repo/CommitHeader.svelte
+++ b/web/src/lib/components/repo/CommitHeader.svelte
@@ -2,6 +2,7 @@
 	import { resolve } from "$app/paths";
 	import type { CommitDetail } from "$lib/api/repo";
 	import Avatar from "$lib/components/ui/Avatar.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
 	import { formatDateTime } from "$lib/format";
 	import type { CommitStatuses } from "$lib/api/commitStatuses";
@@ -125,18 +126,19 @@
 	</div>
 
 	{#if pipelineStatuses}
-		{#await pipelineStatuses then statuses}
-			{#if statuses[commit.hash]}
+		<Pending>
+			{@const pipeline = (await pipelineStatuses)[commit.hash]}
+			{#if pipeline}
 				<div class="pt-4">
 					<PipelineWorkflows
 						{ownerHandle}
 						{repoName}
-						pipeline={statuses[commit.hash]}
+						{pipeline}
 						variant="symbol"
 						summary="long"
 					/>
 				</div>
 			{/if}
-		{/await}
+		</Pending>
 	{/if}
 </section>
diff --git a/web/src/lib/components/repo/CommitList.svelte b/web/src/lib/components/repo/CommitList.svelte
index 80eb05e09..69e8f1ad1 100644
--- a/web/src/lib/components/repo/CommitList.svelte
+++ b/web/src/lib/components/repo/CommitList.svelte
@@ -3,6 +3,7 @@
 	import Ellipsis from "$icon/ellipsis";
 	import Tag from "$lib/components/ui/Tag.svelte";
 	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 	import User from "$lib/components/ui/User.svelte";
 	import Separator from "../ui/Separator.svelte";
 	import PipelineWorkflows from "./pipelines/PipelineWorkflows.svelte";
@@ -14,7 +15,7 @@
 		repoName: string;
 		commits: CommitSummary[];
 		tagsByCommit?: Record<string, string[]>;
-		pipelineStatuses?: Promise<CommitStatuses>;
+		pipelineStatuses?: Promise<CommitStatuses | undefined>;
 	}
 
 	let { ownerHandle, repoName, commits, tagsByCommit = {}, pipelineStatuses }: Props = $props();
@@ -47,7 +48,9 @@
 			</div>
 
 			{#if commit.body && expanded[commit.hash]}
-				<p class="mt-1 pb-2 typography-paragraph-small whitespace-pre-wrap text-foreground-muted">
+				<p
+					class="mt-1 pb-2 typography-paragraph-small whitespace-pre-wrap text-foreground-muted"
+				>
 					{commit.body}
 				</p>
 			{/if}
@@ -75,7 +78,12 @@
 						<User handle={commit.authorName} size="small" link={false} />
 					</a>
 				{:else if commit.authorName}
-					<User did={commit.authorDid} handle={commit.authorName} size="small" link={false} />
+					<User
+						did={commit.authorDid}
+						handle={commit.authorName}
+						size="small"
+						link={false}
+					/>
 				{/if}
 				{#if commit.when}
 					<span aria-hidden="true">&middot;</span>
@@ -88,17 +96,18 @@
 					{/each}
 				{/if}
 				{#if pipelineStatuses}
-					{#await pipelineStatuses then statuses}
-						{#if statuses[commit.hash]}
+					<Pending>
+						{@const pipeline = (await pipelineStatuses)?.[commit.hash]}
+						{#if pipeline}
 							<PipelineWorkflows
 								{ownerHandle}
 								{repoName}
 								size="mini"
-								pipeline={statuses[commit.hash]}
+								{pipeline}
 								variant="symbol"
 							/>
 						{/if}
-					{/await}
+					</Pending>
 				{/if}
 			</div>
 		</div>
diff --git a/web/src/lib/components/repo/CommitLogView.svelte b/web/src/lib/components/repo/CommitLogView.svelte
index e60b0f882..0d06460f9 100644
--- a/web/src/lib/components/repo/CommitLogView.svelte
+++ b/web/src/lib/components/repo/CommitLogView.svelte
@@ -6,6 +6,7 @@
 	import FolderCode from "$icon/folder-code";
 	import Avatar from "$lib/components/ui/Avatar.svelte";
 	import Pagination from "$lib/components/ui/Pagination.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 	import Tag from "$lib/components/ui/Tag.svelte";
 	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
 	import { createCopyFeedback } from "$lib/copy.svelte";
@@ -18,7 +19,7 @@
 		repoName: string;
 		ref: string;
 		commits: CommitSummary[];
-		tagsByCommit?: Record<string, string[]>;
+		tagsByCommit?: Record<string, string[]> | Promise<Record<string, string[]>>;
 		pipelineStatuses?: Promise<CommitStatuses>;
 		page: number;
 		pageCount: number;
@@ -30,7 +31,7 @@
 		repoName,
 		ref,
 		commits,
-		tagsByCommit = {},
+		tagsByCommit,
 		pipelineStatuses,
 		page,
 		pageCount,
@@ -99,11 +100,12 @@
 {#snippet pipelineCell(commit: CommitSummary)}
 	{#if pipelineStatuses}
 		<span class="flex min-h-9 items-center">
-			{#await pipelineStatuses then statuses}
-				{#if statuses[commit.hash]}
-					<PipelineWorkflows {ownerHandle} {repoName} pipeline={statuses[commit.hash]} />
+			<Pending>
+				{@const pipeline = (await pipelineStatuses)[commit.hash]}
+				{#if pipeline}
+					<PipelineWorkflows {ownerHandle} {repoName} {pipeline} />
 				{/if}
-			{/await}
+			</Pending>
 		</span>
 	{/if}
 {/snippet}
@@ -127,9 +129,13 @@
 				<Ellipsis class="size-3" aria-hidden="true" />
 			</button>
 		{/if}
-		{#each tagsByCommit[commit.hash] ?? [] as name (name)}
-			<Tag color="gray" class="ml-2 font-mono">{name}</Tag>
-		{/each}
+		{#if tagsByCommit}
+			<Pending>
+				{#each (await tagsByCommit)[commit.hash] ?? [] as name (name)}
+					<Tag color="gray" class="ml-2 font-mono">{name}</Tag>
+				{/each}
+			</Pending>
+		{/if}
 	</div>
 	{#if commit.body && expanded[commit.hash]}
 		<p class="mt-1 typography-paragraph-regular whitespace-pre-wrap text-foreground-muted">
diff --git a/web/src/lib/components/repo/DiffFileCard.svelte b/web/src/lib/components/repo/DiffFileCard.svelte
index 0d303c9b0..6971ba685 100644
--- a/web/src/lib/components/repo/DiffFileCard.svelte
+++ b/web/src/lib/components/repo/DiffFileCard.svelte
@@ -95,6 +95,10 @@
 			This is a binary file and will not be displayed.
 		</p>
 	{:else}
-		<PierreDiff files={fileDiff ? [fileDiff] : []} {diffStyle} prerenderedHTML={[prerenderedHTML]} />
+		<PierreDiff
+			files={fileDiff ? [fileDiff] : []}
+			{diffStyle}
+			prerenderedHTML={[prerenderedHTML]}
+		/>
 	{/if}
 </details>
diff --git a/web/src/lib/components/repo/DiffStatPill.svelte b/web/src/lib/components/repo/DiffStatPill.svelte
index 800c8dc01..fe647dfd1 100644
--- a/web/src/lib/components/repo/DiffStatPill.svelte
+++ b/web/src/lib/components/repo/DiffStatPill.svelte
@@ -10,20 +10,28 @@
 </script>
 
 {#if stat.insertions > 0 || stat.deletions > 0}
-	<div class="flex items-center font-mono typography-monospace-regular {className}">
+	<div class="flex items-center typography-monospace-regular font-mono {className}">
 		{#if stat.insertions > 0 && stat.deletions > 0}
-			<span class="rounded-l bg-background-success-subtle p-1 text-foreground-success select-none">
+			<span
+				class="rounded-l bg-background-success-subtle p-1 text-foreground-success select-none"
+			>
 				+{stat.insertions}
 			</span>
-			<span class="rounded-r bg-background-danger-subtle p-1 text-foreground-danger select-none">
+			<span
+				class="rounded-r bg-background-danger-subtle p-1 text-foreground-danger select-none"
+			>
 				-{stat.deletions}
 			</span>
 		{:else if stat.insertions > 0}
-			<span class="rounded bg-background-success-subtle p-1 text-foreground-success select-none">
+			<span
+				class="rounded bg-background-success-subtle p-1 text-foreground-success select-none"
+			>
 				+{stat.insertions}
 			</span>
 		{:else}
-			<span class="rounded bg-background-danger-subtle p-1 text-foreground-danger select-none">
+			<span
+				class="rounded bg-background-danger-subtle p-1 text-foreground-danger select-none"
+			>
 				-{stat.deletions}
 			</span>
 		{/if}
diff --git a/web/src/lib/components/repo/DiffTopbar.stories.svelte b/web/src/lib/components/repo/DiffTopbar.stories.svelte
index 27cbbdc3d..4d2176aa8 100644
--- a/web/src/lib/components/repo/DiffTopbar.stories.svelte
+++ b/web/src/lib/components/repo/DiffTopbar.stories.svelte
@@ -87,7 +87,7 @@
 <Story name="Topbar slots" asChild>
 	<DiffTopbar stat={{ insertions: 19, deletions: 11, files_changed: 1 }} fileCount={1}>
 		{#snippet center()}
-			<span class="font-mono typography-monospace-small text-foreground-muted">Round #2</span>
+			<span class="typography-monospace-small font-mono text-foreground-muted">Round #2</span>
 		{/snippet}
 		{#snippet actions()}
 			<span class="typography-paragraph-small text-foreground-muted">review panel</span>
diff --git a/web/src/lib/components/repo/DiffTopbar.svelte b/web/src/lib/components/repo/DiffTopbar.svelte
index 9d37f9da5..465560bc1 100644
--- a/web/src/lib/components/repo/DiffTopbar.svelte
+++ b/web/src/lib/components/repo/DiffTopbar.svelte
@@ -72,11 +72,17 @@
 	{#if downloadUrls}
 		<!-- below md these crowd the topbar into page-level horizontal scroll -->
 		<ButtonGroup spaced class="hidden md:inline-flex">
-			<Button href={downloadUrls.patch as "/"} data-sveltekit-reload size="small" icon={Download}
-				>.patch</Button
+			<Button
+				href={downloadUrls.patch as "/"}
+				data-sveltekit-reload
+				size="small"
+				icon={Download}>.patch</Button
 			>
-			<Button href={downloadUrls.diff as "/"} data-sveltekit-reload size="small" icon={Download}
-				>.diff</Button
+			<Button
+				href={downloadUrls.diff as "/"}
+				data-sveltekit-reload
+				size="small"
+				icon={Download}>.diff</Button
 			>
 		</ButtonGroup>
 	{/if}
diff --git a/web/src/lib/components/repo/DiffView.svelte b/web/src/lib/components/repo/DiffView.svelte
index f07d50421..5daa26aba 100644
--- a/web/src/lib/components/repo/DiffView.svelte
+++ b/web/src/lib/components/repo/DiffView.svelte
@@ -51,7 +51,9 @@
 			fileDiff: file.is_binary ? undefined : toFileDiffMetadata(file),
 			prerenderedHTML: file.is_binary ? undefined : prerendered?.[diffRowKey(file)],
 			blobUrl:
-				blobBase && file.name.new ? `${blobBase}/${encodePathSegments(file.name.new)}` : undefined
+				blobBase && file.name.new
+					? `${blobBase}/${encodePathSegments(file.name.new)}`
+					: undefined
 		}))
 	);
 
diff --git a/web/src/lib/components/repo/EmptyRepo.stories.svelte b/web/src/lib/components/repo/EmptyRepo.stories.svelte
index 8721213fe..f2750e8e8 100644
--- a/web/src/lib/components/repo/EmptyRepo.stories.svelte
+++ b/web/src/lib/components/repo/EmptyRepo.stories.svelte
@@ -12,7 +12,7 @@
 		ownerHandle: "dawn",
 		repoDid: "did:plc:repo",
 		knot: "knot1.tangled.sh",
-		defaultBranch: "main"
+		defaultBranch: Promise.resolve("main")
 	};
 	const otherRepo = { ...ownerRepo, ownerDid: "did:plc:other", ownerHandle: "other" };
 
diff --git a/web/src/lib/components/repo/EmptyRepo.svelte b/web/src/lib/components/repo/EmptyRepo.svelte
index 9e6405405..7d456b2a2 100644
--- a/web/src/lib/components/repo/EmptyRepo.svelte
+++ b/web/src/lib/components/repo/EmptyRepo.svelte
@@ -27,6 +27,12 @@
 	);
 	const remote = $derived(`git@${sshHost}:${repo.repoDid ?? `${repo.ownerHandle}/${repo.name}`}`);
 
+	let defaultBranch = $state("main");
+	$effect(() => {
+		void repo.defaultBranch.then((b) => {
+			defaultBranch = b;
+		});
+	});
 	const keyStatus = createLoad(async (): Promise<boolean | undefined> => {
 		if (hasSshKey !== undefined) {
 			return hasSshKey;
@@ -56,7 +62,8 @@
 {/snippet}
 
 {#snippet codeBlock(lines: string[])}
-	<pre class="overflow-x-auto rounded-sm bg-background-inset p-3 font-mono typography-paragraph-small">{lines.join(
+	<pre
+		class="overflow-x-auto rounded-sm bg-background-inset p-3 font-mono typography-paragraph-small">{lines.join(
 			"\n"
 		)}</pre>
 {/snippet}
@@ -69,15 +76,17 @@
 			<div class="flex w-fit flex-col gap-5 py-6 typography-paragraph-small">
 				<p>This is an empty repository.</p>
 				<div class="flex flex-col gap-2">
-					<p class="text-foreground-subtle">…create a new repository on the command line</p>
+					<p class="text-foreground-subtle">
+						…create a new repository on the command line
+					</p>
 					{@render codeBlock([
 						`echo "# ${repo.name}" >> README.md`,
 						"git init",
 						"git add README.md",
 						'git commit -m "initial commit"',
-						`git branch -M ${repo.defaultBranch}`,
+						`git branch -M ${defaultBranch}`,
 						`git remote add origin ${remote}`,
-						`git push -u origin ${repo.defaultBranch}`
+						`git push -u origin ${defaultBranch}`
 					])}
 				</div>
 				<div class="flex flex-col gap-2">
@@ -86,8 +95,8 @@
 					</p>
 					{@render codeBlock([
 						`git remote add origin ${remote}`,
-						`git branch -M ${repo.defaultBranch}`,
-						`git push -u origin ${repo.defaultBranch}`
+						`git branch -M ${defaultBranch}`,
+						`git push -u origin ${defaultBranch}`
 					])}
 				</div>
 			</div>
diff --git a/web/src/lib/components/repo/FileTree.svelte b/web/src/lib/components/repo/FileTree.svelte
index 6b1c23191..a855304df 100644
--- a/web/src/lib/components/repo/FileTree.svelte
+++ b/web/src/lib/components/repo/FileTree.svelte
@@ -5,6 +5,7 @@
 	import Folder from "$icon/folder";
 	import FolderInput from "$icon/folder-input";
 	import { splitMessage } from "$lib/api/repo";
+	import { navigatingTo } from "$lib/navPulse";
 	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
 	import type { TreeEntrySummary } from "./types";
 	import { encodePathSegments } from "./urls";
@@ -52,9 +53,13 @@
 <div class="min-w-0">
 	{#each entries as entry (entry.name)}
 		{@const Glyph = iconFor(entry)}
-		<div class={`grid items-center gap-4 py-1 ${withMessage ? "grid-cols-12" : "grid-cols-3"}`}>
+		{@const href = resolve(linkFor(entry) as "/")}
+		<div
+			class={`grid items-center gap-4 py-1 ${withMessage ? "grid-cols-12" : "grid-cols-3"}`}
+			class:row-breathe={navigatingTo(href)}
+		>
 			<a
-				href={resolve(linkFor(entry) as "/")}
+				{href}
 				class={`flex min-w-0 items-center gap-2 text-foreground-default no-underline hover:underline ${
 					withMessage ? "col-span-8 md:col-span-4" : "col-span-2"
 				}`}
diff --git a/web/src/lib/components/repo/LastCommitPanel.svelte b/web/src/lib/components/repo/LastCommitPanel.svelte
index 7864729ac..d762cf317 100644
--- a/web/src/lib/components/repo/LastCommitPanel.svelte
+++ b/web/src/lib/components/repo/LastCommitPanel.svelte
@@ -20,7 +20,7 @@
 >
 	<div class="flex min-w-0 flex-wrap items-center gap-2">
 		{#if commit.authorName}
-		    <!-- no email→did mapping yet, always the placeholder -->
+			<!-- no email→did mapping yet, always the placeholder -->
 			<Avatar size="regular" />
 			<span class="truncate text-foreground-default">{commit.authorName}</span>
 			<span class="text-foreground-subtle" aria-hidden="true">&middot;</span>
@@ -35,7 +35,7 @@
 	</div>
 	<a
 		{href}
-		class="w-fit rounded-sm bg-background-inset px-2 py-1 font-mono typography-monospace-small text-foreground-muted no-underline hover:underline"
+		class="w-fit rounded-sm bg-background-inset px-2 py-1 typography-monospace-small font-mono text-foreground-muted no-underline hover:underline"
 	>
 		{commit.shortHash}
 	</a>
diff --git a/web/src/lib/components/repo/PanelHeader.svelte b/web/src/lib/components/repo/PanelHeader.svelte
index 06f98237a..3130b6cae 100644
--- a/web/src/lib/components/repo/PanelHeader.svelte
+++ b/web/src/lib/components/repo/PanelHeader.svelte
@@ -23,7 +23,7 @@
 	<Glyph class="size-4 shrink-0" aria-hidden="true" />
 	{title}
 	{#if count !== undefined}
-		<span class="rounded-sm bg-background-inset px-1 mt-px typography-paragraph-small">
+		<span class="mt-px rounded-sm bg-background-inset px-1 typography-paragraph-small">
 			{approximate && count > 0 ? `${formatCount(count)}+` : formatCount(count)}
 		</span>
 	{/if}
diff --git a/web/src/lib/components/repo/PierreDiff.svelte b/web/src/lib/components/repo/PierreDiff.svelte
index 54aaffd18..aa7c6a431 100644
--- a/web/src/lib/components/repo/PierreDiff.svelte
+++ b/web/src/lib/components/repo/PierreDiff.svelte
@@ -35,10 +35,21 @@
 			// the html prop never reaches the client, pierre marks its ssr
 			// output with data-dehydrated. a style toggle lands here with the
 			// previous style's render: drop it, keep pierre's own style nodes
-			if (html[index] === undefined && element.shadowRoot?.querySelector("[data-dehydrated]") == null)
+			if (
+				html[index] === undefined &&
+				element.shadowRoot?.querySelector("[data-dehydrated]") == null
+			)
 				clearPierreRender(element);
-			const instance = new FileDiff(pierreDiffOptions(untrack(() => diffStyle)), undefined, true);
-			instance.hydrate({ fileDiff: file, fileContainer: element, prerenderedHTML: html[index] });
+			const instance = new FileDiff(
+				pierreDiffOptions(untrack(() => diffStyle)),
+				undefined,
+				true
+			);
+			instance.hydrate({
+				fileDiff: file,
+				fileContainer: element,
+				prerenderedHTML: html[index]
+			});
 			return { instance, file };
 		});
 		mountedStyle = untrack(() => diffStyle);
diff --git a/web/src/lib/components/repo/PierreFile.stories.svelte b/web/src/lib/components/repo/PierreFile.stories.svelte
index 693d133a8..83c080c60 100644
--- a/web/src/lib/components/repo/PierreFile.stories.svelte
+++ b/web/src/lib/components/repo/PierreFile.stories.svelte
@@ -17,8 +17,12 @@ export const main = () => {
 	const rendersContents = async ({ canvasElement }: PlayContext) => {
 		const host = canvasElement.querySelector("diffs-container");
 		await expect(host?.shadowRoot).toBeTruthy();
-		await waitFor(() => expect(host?.shadowRoot?.textContent).toContain("serve({ port: 5555 })"));
-		await waitFor(() => expect(host?.shadowRoot?.querySelector("[data-diffs-header]")).toBeNull());
+		await waitFor(() =>
+			expect(host?.shadowRoot?.textContent).toContain("serve({ port: 5555 })")
+		);
+		await waitFor(() =>
+			expect(host?.shadowRoot?.querySelector("[data-diffs-header]")).toBeNull()
+		);
 	};
 
 	const { Story } = defineMeta({
diff --git a/web/src/lib/components/repo/Readme.svelte b/web/src/lib/components/repo/Readme.svelte
index 3806d8f6a..74fb961ce 100644
--- a/web/src/lib/components/repo/Readme.svelte
+++ b/web/src/lib/components/repo/Readme.svelte
@@ -16,7 +16,9 @@
 	<div class="border-b border-border-default px-4 py-2">
 		<span class="flex items-center gap-2">
 			<FileText class="size-4 text-foreground-subtle" aria-hidden="true" />
-			<span class="font-mono typography-paragraph-small text-foreground-muted">{filename}</span>
+			<span class="font-mono typography-paragraph-small text-foreground-muted"
+				>{filename}</span
+			>
 		</span>
 	</div>
 	{#if html}
@@ -24,7 +26,8 @@
 		<div class="markup overflow-x-auto px-6 py-4">{@html html}</div>
 	{:else}
 		<div class="overflow-x-auto px-6 py-4">
-			<pre class="font-mono typography-paragraph-small whitespace-pre text-foreground-default">{contents}</pre>
+			<pre
+				class="font-mono typography-paragraph-small whitespace-pre text-foreground-default">{contents}</pre>
 		</div>
 	{/if}
 </div>
diff --git a/web/src/lib/components/repo/RefSelector.svelte b/web/src/lib/components/repo/RefSelector.svelte
index d8c4eb4e9..568099c80 100644
--- a/web/src/lib/components/repo/RefSelector.svelte
+++ b/web/src/lib/components/repo/RefSelector.svelte
@@ -11,19 +11,32 @@
 		current: string;
 		branches: string[];
 		tags: string[];
-		defaultBranch?: string;
+		defaultBranch?: string | Promise<string>;
 	}
 
 	let { ownerHandle, repoName, current, branches, tags, defaultBranch }: Props = $props();
 
 	const base = $derived(`/${ownerHandle}/${repoName}`);
 
+	let resolvedDefaultBranch = $state<string | undefined>();
+	$effect(() => {
+		if (typeof defaultBranch === "string") {
+			resolvedDefaultBranch = defaultBranch;
+		} else if (defaultBranch) {
+			void defaultBranch.then((b) => {
+				resolvedDefaultBranch = b;
+			});
+		} else {
+			resolvedDefaultBranch = undefined;
+		}
+	});
+
 	// no counts in the headings: the knot caps how many refs it hands back, so the length here
 	// is the loaded count rather than the repo's total, and it would not track the filter either
 	const options = $derived<SelectOption[]>([
 		...branches.map((branch) => ({
 			value: branch,
-			hint: branch === defaultBranch ? "default" : undefined,
+			hint: branch === resolvedDefaultBranch ? "default" : undefined,
 			group: "Branches"
 		})),
 		...(tags.length > 0
diff --git a/web/src/lib/components/repo/RepoCard.svelte b/web/src/lib/components/repo/RepoCard.svelte
index 7caef6193..d2817a58f 100644
--- a/web/src/lib/components/repo/RepoCard.svelte
+++ b/web/src/lib/components/repo/RepoCard.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
+	import { resolve } from "$app/paths";
 	import Card, { type CardVariants } from "$lib/components/ui/Card.svelte";
 	import RepoCardContent from "./RepoCardContent.svelte";
 	import type { RepoCardData } from "$lib/components/profile/types";
-
+	import { navigatingTo } from "$lib/navPulse";
 	let {
 		repo,
 		starButton = true,
@@ -20,8 +21,16 @@
 		background?: CardVariants["background"];
 		padding?: CardVariants["padding"];
 	} = $props();
+
+	const href = $derived(resolve(`/${repo.ownerHandle}/${repo.name}` as "/"));
 </script>
 
-<Card {border} {shadow} {background} {padding}>
+<Card
+	{border}
+	{shadow}
+	{background}
+	{padding}
+	class={navigatingTo(href) ? "row-breathe" : undefined}
+>
 	<RepoCardContent {repo} {starButton} {showOwner} />
 </Card>
diff --git a/web/src/lib/components/repo/RepoChrome.svelte b/web/src/lib/components/repo/RepoChrome.svelte
new file mode 100644
index 000000000..536e13acd
--- /dev/null
+++ b/web/src/lib/components/repo/RepoChrome.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { RepoCounts, RepoInfo, RepoSource } from "$lib/components/repo/types";
+	import RepoHeader from "./RepoHeader.svelte";
+	import RepoTabs from "./RepoTabs.svelte";
+
+	interface Props {
+		// awaited here, below the layout's boundary, so the navigation is never held
+		repo: RepoInfo | Promise<RepoInfo>;
+		counts: Promise<RepoCounts> | RepoCounts;
+		viewerStarRkey: Promise<string | null> | string | null;
+		source: Promise<RepoSource | null> | RepoSource | null;
+		activeTab: string;
+		showTabs?: boolean;
+	}
+
+	let {
+		repo: repoField,
+		counts,
+		viewerStarRkey,
+		source,
+		activeTab,
+		showTabs = true
+	}: Props = $props();
+
+	const repo = $derived(await repoField);
+</script>
+
+<RepoHeader {repo} {counts} {viewerStarRkey} {source} />
+{#if showTabs}
+	<RepoTabs {repo} {counts} active={activeTab} />
+{/if}
diff --git a/web/src/lib/components/repo/RepoHeader.stories.svelte b/web/src/lib/components/repo/RepoHeader.stories.svelte
index 0765e7afe..71caad494 100644
--- a/web/src/lib/components/repo/RepoHeader.stories.svelte
+++ b/web/src/lib/components/repo/RepoHeader.stories.svelte
@@ -25,7 +25,7 @@
 		description: "social code collaboration for the at protocol",
 		website: "https://tangled.org",
 		topics: ["atproto", "git", "svelte"],
-		defaultBranch: "main",
+		defaultBranch: Promise.resolve("main"),
 		source: { ownerHandle: "upstream", name: "tangled" }
 	};
 	const counts = { stars: 128, issues: 7, pulls: 3, forks: 12 };
diff --git a/web/src/lib/components/repo/RepoHeader.svelte b/web/src/lib/components/repo/RepoHeader.svelte
index 4e66514a7..9052db816 100644
--- a/web/src/lib/components/repo/RepoHeader.svelte
+++ b/web/src/lib/components/repo/RepoHeader.svelte
@@ -6,17 +6,18 @@
 	import Button from "$lib/components/ui/Button.svelte";
 	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
 	import Tag from "$lib/components/ui/Tag.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 	import StarButton from "./StarButton.svelte";
-	import type { RepoCounts, RepoInfo } from "./types";
+	import type { RepoCounts, RepoInfo, RepoSource } from "./types";
 	import { formatCount } from "$lib/format";
-
 	interface Props {
 		repo: RepoInfo;
-		counts: RepoCounts;
-		viewerStarRkey?: string | null;
+		counts: RepoCounts | Promise<RepoCounts>;
+		viewerStarRkey?: string | null | Promise<string | null>;
+		source?: RepoSource | null | Promise<RepoSource | null>;
 	}
 
-	let { repo, counts, viewerStarRkey }: Props = $props();
+	let { repo, counts, viewerStarRkey, source }: Props = $props();
 
 	const base = $derived(`/${repo.ownerHandle}/${repo.name}`);
 	const trimScheme = (url: string) => url.replace(/^https?:\/\//, "").replace(/\/$/, "");
@@ -29,7 +30,7 @@
 			repoDid={repo.repoDid ?? ""}
 			repoOwnerHandle={repo.ownerHandle}
 			repoName={repo.name}
-			initialCount={counts.stars}
+			initialCount={counts}
 			initialRkey={viewerStarRkey}
 		/>
 
@@ -50,7 +51,13 @@
 				size="small"
 				title="Forked by"
 			>
-				{formatCount(counts.forks)}
+				{#if typeof counts === "object" && counts !== null && "then" in counts}
+					<Pending>
+						{formatCount((await counts).forks)}
+					</Pending>
+				{:else}
+					{formatCount(counts.forks)}
+				{/if}
 			</Button>
 		</ButtonGroup>
 	</div>
@@ -76,20 +83,25 @@
 				</a>
 			</div>
 
-			{#if repo.source}
-				<div
-					class="flex flex-wrap items-center gap-1 typography-paragraph-small text-foreground-muted"
-				>
-					<GitFork class="size-3 shrink-0" aria-hidden="true" />
-					<span>forked from</span>
-					<a
-						href={resolve(`/${repo.source.ownerHandle}/${repo.source.name}` as "/")}
-						class="underline"
+			<Pending>
+				{@const resolvedSource = await (source ?? repo.source)}
+				{#if resolvedSource}
+					<div
+						class="flex flex-wrap items-center gap-1 typography-paragraph-small text-foreground-muted"
 					>
-						{repo.source.ownerHandle}/{repo.source.name}
-					</a>
-				</div>
-			{/if}
+						<GitFork class="size-3 shrink-0" aria-hidden="true" />
+						<span>forked from</span>
+						<a
+							href={resolve(
+								`/${resolvedSource.ownerHandle}/${resolvedSource.name}` as "/"
+							)}
+							class="underline"
+						>
+							{resolvedSource.ownerHandle}/{resolvedSource.name}
+						</a>
+					</div>
+				{/if}
+			</Pending>
 		</div>
 
 		{@render repoActions("hidden shrink-0 items-start gap-2 sm:flex")}
diff --git a/web/src/lib/components/repo/RepoIndexView.stories.svelte b/web/src/lib/components/repo/RepoIndexView.stories.svelte
index 35b79d7ca..740349087 100644
--- a/web/src/lib/components/repo/RepoIndexView.stories.svelte
+++ b/web/src/lib/components/repo/RepoIndexView.stories.svelte
@@ -13,7 +13,7 @@
 		ownerHandle: "dawn",
 		repoDid: "did:plc:repo",
 		knot: "knot1.tangled.sh",
-		defaultBranch: "main"
+		defaultBranch: Promise.resolve("main")
 	};
 
 	const commits = [
@@ -46,7 +46,10 @@
 		}
 	];
 
-	const data = {
+	type IndexData = Awaited<ReturnType<typeof loadRepoIndex>>;
+	type IndexContent = Awaited<IndexData["content"]>;
+
+	const content: IndexContent = {
 		ref: "main",
 		availability: "ok",
 		files: [
@@ -54,7 +57,6 @@
 			{ name: "README.md", kind: "file" as const, size: 512 }
 		],
 		readme: { filename: "README.md", contents: "# tangled" },
-		readmeHtml: "<h1>tangled</h1>",
 		commits,
 		tagsByCommit: {},
 		totalCommits: 42,
@@ -69,34 +71,46 @@
 		totalBranches: 1,
 		tags: [{ name: "v1.0.0", hash: "abcdef0123456789", commitHash: "0123456789abcdef" }],
 		totalTags: 1,
-		refs: { branches: ["main"], tags: ["v1.0.0"], capped: false },
-		languages: [
-			{ name: "TypeScript", percentage: 70, share: 70 },
-			{ name: "Svelte", percentage: 30, share: 30 }
-		]
-	} satisfies Awaited<ReturnType<typeof loadRepoIndex>>;
-	const cappedData = {
-		...data,
+		refs: { branches: ["main"], tags: ["v1.0.0"], capped: false }
+	};
+
+	const indexData = (
+		overrides: Partial<IndexContent> = {},
+		streamed: Partial<Pick<IndexData, "languages" | "readmeHtml">> = {}
+	): IndexData => ({
+		ref: "main",
+		content: Promise.resolve({ ...content, ...overrides }),
+		languages:
+			streamed.languages ??
+			Promise.resolve([
+				{ name: "TypeScript", percentage: 70, share: 70 },
+				{ name: "Svelte", percentage: 30, share: 30 }
+			]),
+		readmeHtml: streamed.readmeHtml ?? Promise.resolve("<h1>tangled</h1>")
+	});
+
+	const data = indexData();
+	const cappedData = indexData({
 		totalBranches: 100,
 		totalTags: 100,
-		refs: { ...data.refs, capped: true }
-	} satisfies Awaited<ReturnType<typeof loadRepoIndex>>;
-	const emptyData = {
-		...data,
-		availability: "empty",
-		files: [],
-		readme: null,
-		readmeHtml: null,
-		commits: [],
-		tagsByCommit: {},
-		totalCommits: 0,
-		branches: [],
-		totalBranches: 0,
-		tags: [],
-		totalTags: 0,
-		refs: { branches: [], tags: [], capped: false },
-		languages: []
-	} satisfies Awaited<ReturnType<typeof loadRepoIndex>>;
+		refs: { ...content.refs, capped: true }
+	});
+	const emptyData = indexData(
+		{
+			availability: "empty",
+			files: [],
+			readme: null,
+			commits: [],
+			tagsByCommit: {},
+			totalCommits: 0,
+			branches: [],
+			totalBranches: 0,
+			tags: [],
+			totalTags: 0,
+			refs: { branches: [], tags: [], capped: false }
+		},
+		{ languages: Promise.resolve([]), readmeHtml: Promise.resolve(null) }
+	);
 
 	const { Story } = defineMeta({
 		title: "Repo/RepoIndexView",
@@ -116,8 +130,8 @@
 
 <Story name="Populated repository" />
 <Story name="Reference counts are lower bounds" args={{ data: cappedData }} />
-<Story name="Knot needs upgrade" args={{ data: { ...data, availability: "needs-upgrade" } }} />
-<Story name="Knot is unreachable" args={{ data: { ...data, availability: "unreachable" } }} />
+<Story name="Knot needs upgrade" args={{ data: indexData({ availability: "needs-upgrade" }) }} />
+<Story name="Knot is unreachable" args={{ data: indexData({ availability: "unreachable" }) }} />
 <Story name="Empty repository" asChild parameters={{ auth: false }}>
 	<RepoIndexView {repo} data={emptyData} bobbinUrl="https://bobbin.example.test" />
 </Story>
diff --git a/web/src/lib/components/repo/RepoIndexView.svelte b/web/src/lib/components/repo/RepoIndexView.svelte
index 8e7960ffe..bddbc0ad7 100644
--- a/web/src/lib/components/repo/RepoIndexView.svelte
+++ b/web/src/lib/components/repo/RepoIndexView.svelte
@@ -12,6 +12,7 @@
 	import Readme from "./Readme.svelte";
 	import RepoToolbar from "./RepoToolbar.svelte";
 	import TagList from "./TagList.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 	import TabPanel from "$lib/components/ui/TabPanel.svelte";
 	import type { loadRepoIndex } from "$lib/api/repoIndex";
 	import type { CommitStatuses } from "$lib/api/commitStatuses";
@@ -21,122 +22,137 @@
 		repo: RepoInfo;
 		data: Awaited<ReturnType<typeof loadRepoIndex>>;
 		bobbinUrl: string;
-		pipelineStatuses?: Promise<CommitStatuses>;
+		pipelineStatuses?: Promise<CommitStatuses | undefined>;
 	}
 
 	let { repo, data, bobbinUrl, pipelineStatuses }: Props = $props();
 
 	const base = $derived(`/${repo.ownerHandle}/${repo.name}`);
-	const encodedRef = $derived(encodeURIComponent(data.ref));
-	const refsCapped = $derived(data.refs.capped);
 </script>
 
-<TabPanel class="relative mx-auto w-full">
- 	{#if data.needsUpgrade}
-		<div class="flex h-96 items-center justify-center text-center text-foreground-danger">
-			<div>
-				<span class="flex items-center justify-center gap-2">
+<Pending>
+	{@const content = await data.content}
+	<TabPanel class="relative mx-auto w-full">
+		{#if content.availability === "needs-upgrade"}
+			<div class="flex h-96 items-center justify-center text-center text-foreground-danger">
+				<div>
+					<span class="flex items-center justify-center gap-2">
+						<TriangleAlert class="size-5 shrink-0" aria-hidden="true" />
+						The knot hosting this repository needs an upgrade.
+					</span>
+					<p class="mt-2">
+						This repository is currently unavailable.
+						<a
+							href="https://docs.tangled.org/migrating-knots-and-spindles.html"
+							rel="external noopener noreferrer"
+							class="underline">Read the upgrade guide</a
+						>
+					</p>
+				</div>
+			</div>
+		{:else if content.availability === "unreachable"}
+			<div class="flex h-96 items-center justify-center text-center text-foreground-danger">
+				<span class="flex items-center gap-2">
 					<TriangleAlert class="size-5 shrink-0" aria-hidden="true" />
-					The knot hosting this repository needs an upgrade.
+					The knot hosting this repository is unreachable.
 				</span>
-				<p class="mt-2">
-					This repository is currently unavailable.
-					<a
-						href="https://docs.tangled.org/migrating-knots-and-spindles.html"
-						rel="external noopener noreferrer"
-						class="underline">Read the upgrade guide</a
-					>
-				</p>
 			</div>
-		</div>
-	{:else if data.availability === "unreachable"}
-		<div class="flex h-96 items-center justify-center text-center text-foreground-danger">
-			<span class="flex items-center gap-2">
-				<TriangleAlert class="size-5 shrink-0" aria-hidden="true" />
-				The knot hosting this repository is unreachable.
-			</span>
-		</div>
-	{:else if data.availability === "empty"}
-		<EmptyRepo {repo} />
-	{:else}
-		{#if data.languages.length > 0}
-			<LanguageBar languages={data.languages} />
-		{/if}
+		{:else if content.availability === "empty"}
+			<EmptyRepo {repo} />
+		{:else}
+			<!-- fills in silently, it's a thin strip -->
+			<Pending>
+				{@const languages = await data.languages}
+				{#if languages.length > 0}
+					<LanguageBar {languages} />
+				{/if}
+			</Pending>
 
-		<RepoToolbar
-			{repo}
-			ref={data.ref}
-			refs={data.refs}
-			totalCommits={data.totalCommits}
-			totalBranches={data.totalBranches}
-			totalTags={data.totalTags}
-			{bobbinUrl}
-		/>
+			<RepoToolbar
+				{repo}
+				ref={content.ref}
+				refs={content.refs}
+				totalCommits={content.totalCommits}
+				totalBranches={content.totalBranches}
+				totalTags={content.totalTags}
+				{bobbinUrl}
+			/>
+			<div class="grid grid-cols-1 gap-2 md:grid-cols-2">
+				<div class="min-w-0 pr-2 md:border-r md:border-border-default">
+					<FileTree
+						ownerHandle={repo.ownerHandle}
+						repoName={repo.name}
+						ref={content.ref}
+						entries={content.files}
+					/>
+				</div>
 
-		<div class="grid grid-cols-1 gap-2 md:grid-cols-2">
-			<div class="min-w-0 pr-2 md:border-r md:border-border-default">
-				<FileTree
-					ownerHandle={repo.ownerHandle}
-					repoName={repo.name}
-					ref={data.ref}
-					entries={data.files}
-				/>
-			</div>
+				<div class="hidden md:block">
+					{#if content.commits.length > 0}
+						<div class="border-border-default pr-2 pb-4 md:px-2">
+							<PanelHeader
+								title="Commits"
+								icon={Logs}
+								href={`${base}/commits/${encodeURIComponent(content.ref)}`}
+								count={content.totalCommits}
+							/>
+							<CommitList
+								ownerHandle={repo.ownerHandle}
+								repoName={repo.name}
+								commits={content.commits}
+								tagsByCommit={content.tagsByCommit}
+								{pipelineStatuses}
+							/>
+						</div>
+					{/if}
 
-			<div class="hidden md:block">
-				{#if data.commits.length > 0}
-					<div class="border-border-default pr-2 pb-4 md:px-2">
-						<PanelHeader
-							title="Commits"
-							icon={Logs}
-							href={`${base}/commits/${encodedRef}`}
-							count={data.totalCommits}
-						/>
-						<CommitList
-							ownerHandle={repo.ownerHandle}
-							repoName={repo.name}
-							commits={data.commits}
-							tagsByCommit={data.tagsByCommit}
-							{pipelineStatuses}
-						/>
-					</div>
-				{/if}
+					{#if content.branches.length > 0}
+						<div class="border-t border-border-default py-4 pr-2 md:px-2">
+							<PanelHeader
+								title="Branches"
+								icon={GitBranch}
+								href={`${base}/branches`}
+								count={content.totalBranches}
+								approximate={content.refs.capped}
+							/>
+							<BranchList
+								ownerHandle={repo.ownerHandle}
+								repoName={repo.name}
+								currentRef={content.ref}
+								branches={content.branches}
+							/>
+						</div>
+					{/if}
 
-				{#if data.branches.length > 0}
-					<div class="border-t border-border-default py-4 pr-2 md:px-2">
-						<PanelHeader
-							title="Branches"
-							icon={GitBranch}
-							href={`${base}/branches`}
-							count={data.totalBranches}
-							approximate={refsCapped}
-						/>
-						<BranchList
-							ownerHandle={repo.ownerHandle}
-							repoName={repo.name}
-							currentRef={data.ref}
-							branches={data.branches}
-						/>
-					</div>
-				{/if}
-
-				{#if data.tags.length > 0}
-					<div class="border-t border-border-default py-4 pr-2 md:px-2">
-						<PanelHeader
-							title="Tags"
-							icon={Tags}
-							href={`${base}/tags`}
-							count={data.totalTags}
-							approximate={refsCapped}
-						/>
-						<TagList ownerHandle={repo.ownerHandle} repoName={repo.name} tags={data.tags} />
-					</div>
-				{/if}
+					{#if content.tags.length > 0}
+						<div class="border-t border-border-default py-4 pr-2 md:px-2">
+							<PanelHeader
+								title="Tags"
+								icon={Tags}
+								href={`${base}/tags`}
+								count={content.totalTags}
+								approximate={content.refs.capped}
+							/>
+							<TagList
+								ownerHandle={repo.ownerHandle}
+								repoName={repo.name}
+								tags={content.tags}
+							/>
+						</div>
+					{/if}
+				</div>
 			</div>
-		</div>
-	{/if}
-</TabPanel>
+		{/if}
+	</TabPanel>
+</Pending>
 
-{#if data.readme}
-	<Readme filename={data.readme.filename} contents={data.readme.contents} html={data.readmeHtml} />
-{/if}
+<Pending>
+	{@const readme = (await data.content).readme}
+	{#if readme}
+		<Readme
+			filename={readme.filename}
+			contents={readme.contents}
+			html={await data.readmeHtml}
+		/>
+	{/if}
+</Pending>
diff --git a/web/src/lib/components/repo/RepoTabs.stories.svelte b/web/src/lib/components/repo/RepoTabs.stories.svelte
index 5cae6f355..eaf633dee 100644
--- a/web/src/lib/components/repo/RepoTabs.stories.svelte
+++ b/web/src/lib/components/repo/RepoTabs.stories.svelte
@@ -10,7 +10,7 @@
 		ownerDid: "did:plc:owner",
 		ownerHandle: "dawn",
 		knot: "knot1.tangled.sh",
-		defaultBranch: "main"
+		defaultBranch: Promise.resolve("main")
 	};
 
 	const { Story } = defineMeta({
diff --git a/web/src/lib/components/repo/RepoTabs.svelte b/web/src/lib/components/repo/RepoTabs.svelte
index b7826854c..e0378bd21 100644
--- a/web/src/lib/components/repo/RepoTabs.svelte
+++ b/web/src/lib/components/repo/RepoTabs.svelte
@@ -9,7 +9,7 @@
 
 	interface Props {
 		repo: RepoInfo;
-		counts: RepoCounts;
+		counts: RepoCounts | Promise<RepoCounts>;
 		active: string;
 	}
 
@@ -17,20 +17,27 @@
 
 	const base = $derived(`/${repo.ownerHandle}/${repo.name}`);
 
+	const countFor = (key: keyof RepoCounts) => {
+		if (typeof counts === "object" && counts !== null && "then" in counts) {
+			return (counts as Promise<RepoCounts>).then((c) => c[key]);
+		}
+		return (counts as RepoCounts)[key];
+	};
+
 	const tabs = $derived<TabDef[]>([
 		{ id: "overview", label: "Overview", icon: SquareChartGantt, href: base },
 		{
 			id: "issues",
 			label: "Issues",
 			icon: CircleDot,
-			count: counts.issues,
+			count: countFor("issues"),
 			href: `${base}/issues`
 		},
 		{
 			id: "pulls",
 			label: "Pulls",
 			icon: GitPullRequest,
-			count: counts.pulls,
+			count: countFor("pulls"),
 			href: `${base}/pulls`
 		},
 		{ id: "pipelines", label: "Pipelines", icon: Layers2, href: `${base}/pipelines` },
diff --git a/web/src/lib/components/repo/RepoToolbar.stories.svelte b/web/src/lib/components/repo/RepoToolbar.stories.svelte
index d8e46d2fc..0bd17a9e3 100644
--- a/web/src/lib/components/repo/RepoToolbar.stories.svelte
+++ b/web/src/lib/components/repo/RepoToolbar.stories.svelte
@@ -11,7 +11,7 @@
 		ownerHandle: "dawn",
 		repoDid: "did:plc:repo",
 		knot: "knot1.tangled.sh",
-		defaultBranch: "main"
+		defaultBranch: Promise.resolve("main")
 	};
 
 	const { Story } = defineMeta({
diff --git a/web/src/lib/components/repo/StarButton.svelte b/web/src/lib/components/repo/StarButton.svelte
index 706666a4c..5a6496921 100644
--- a/web/src/lib/components/repo/StarButton.svelte
+++ b/web/src/lib/components/repo/StarButton.svelte
@@ -10,16 +10,16 @@
 	import { getProfileCounts } from "$lib/components/profile/counts.svelte";
 	import { createOptimisticRelation, createOptimisticCount } from "$lib/optimistic.svelte";
 	import { formatCount } from "$lib/format";
+	import type { RepoCounts } from "./types";
 
 	interface Props {
 		repoDid: string;
 		repoOwnerHandle: string;
 		repoName: string;
-		initialCount?: number;
-		initialRkey?: string | null;
+		initialCount?: number | RepoCounts | Promise<number> | Promise<RepoCounts>;
+		initialRkey?: string | null | Promise<string | null>;
 		insetShadow?: boolean;
 	}
-
 	let {
 		repoDid,
 		repoOwnerHandle,
@@ -32,15 +32,50 @@
 	const auth = getAuth();
 	const profileCounts = getProfileCounts();
 	const signedIn = $derived(Boolean(auth.currentDid));
+	let loadedRkey = $state<string | null | undefined>();
+	$effect(() => {
+		if (initialRkey instanceof Promise) {
+			loadedRkey = undefined;
+			void initialRkey
+				.then((rkey) => {
+					loadedRkey = rkey;
+				})
+				.catch(() => {
+					loadedRkey = null;
+				});
+		} else {
+			loadedRkey = initialRkey;
+		}
+	});
+
+	let loadedCount = $state<number | undefined>();
+	$effect(() => {
+		if (initialCount instanceof Promise) {
+			loadedCount = undefined;
+			void (initialCount as Promise<number | RepoCounts>)
+				.then((val: number | RepoCounts) => {
+					loadedCount = typeof val === "number" ? val : (val?.stars ?? 0);
+				})
+				.catch(() => {
+					loadedCount = 0;
+				});
+		} else if (typeof initialCount === "number") {
+			loadedCount = initialCount;
+		} else if (typeof initialCount === "object" && initialCount !== null) {
+			loadedCount = (initialCount as RepoCounts).stars;
+		} else {
+			loadedCount = undefined;
+		}
+	});
+
 	const relation = createOptimisticRelation({
 		key: () => `${auth.currentDid ?? ""}:${repoDid}`,
-		loadedRkey: () => initialRkey
+		loadedRkey: () => loadedRkey
 	});
 	const starCount = createOptimisticCount({
 		key: () => repoDid,
-		loaded: () => initialCount
+		loaded: () => loadedCount
 	});
-
 	const starred = $derived(relation.active);
 	const failed = $derived(relation.failed || starCount.failed);
 	// if signed out, sends you to log in first, then back here
@@ -92,7 +127,9 @@
 			<span>{starred ? "Unstar" : "Star"}</span>
 		</Button>
 		<Button href={starsHref} variant="ghost" size="small" title="Starred by">
-			{formatCount(starCount.value)}
+			{#if loadedCount !== undefined}
+				{formatCount(starCount.value)}
+			{/if}
 		</Button>
 	</ButtonGroup>
 	{#if failed}
diff --git a/web/src/lib/components/repo/TagCard.svelte b/web/src/lib/components/repo/TagCard.svelte
index 0d3c642c0..5dacf5dc0 100644
--- a/web/src/lib/components/repo/TagCard.svelte
+++ b/web/src/lib/components/repo/TagCard.svelte
@@ -54,7 +54,10 @@
 				{tag.name}
 			</a>
 			<div class="flex flex-col typography-paragraph-regular text-foreground-muted">
-				<a href={commitHref} class="flex items-center gap-2 font-mono no-underline hover:underline">
+				<a
+					href={commitHref}
+					class="flex items-center gap-2 font-mono no-underline hover:underline"
+				>
 					<GitCommitHorizontal class="size-4" aria-hidden="true" />
 					{shortHash}
 				</a>
diff --git a/web/src/lib/components/repo/TagList.svelte b/web/src/lib/components/repo/TagList.svelte
index 354fb6c52..48c489022 100644
--- a/web/src/lib/components/repo/TagList.svelte
+++ b/web/src/lib/components/repo/TagList.svelte
@@ -29,7 +29,10 @@
 			{#if tag.when || index === 0}
 				<div class="flex items-center gap-2">
 					{#if tag.when}
-						<TimeAgo value={tag.when} class="typography-paragraph-regular text-foreground-muted" />
+						<TimeAgo
+							value={tag.when}
+							class="typography-paragraph-regular text-foreground-muted"
+						/>
 					{/if}
 					{#if index === 0}
 						<Tag color="gray" class="typography-monospace-regular">Latest</Tag>
diff --git a/web/src/lib/components/repo/TreeHeader.svelte b/web/src/lib/components/repo/TreeHeader.svelte
index 60c842764..d3eb8b52f 100644
--- a/web/src/lib/components/repo/TreeHeader.svelte
+++ b/web/src/lib/components/repo/TreeHeader.svelte
@@ -20,7 +20,7 @@
 	const plural = (count: number, noun: string) => `${count} ${noun}${count === 1 ? "" : "s"}`;
 </script>
 
-<div class="flex items-center justify-between gap-2 typography-paragraph-regular mb-2">
+<div class="mb-2 flex items-center justify-between gap-2 typography-paragraph-regular">
 	<div class="flex min-w-0 items-center gap-3">
 		<RepoCrumbs {ownerHandle} {repoName} {ref} {path} />
 
diff --git a/web/src/lib/components/repo/fileDiff.test.ts b/web/src/lib/components/repo/fileDiff.test.ts
index f40136868..2a443c7c5 100644
--- a/web/src/lib/components/repo/fileDiff.test.ts
+++ b/web/src/lib/components/repo/fileDiff.test.ts
@@ -130,7 +130,9 @@ describe("toFileDiffMetadata", () => {
 	});
 
 	it("marks the file type from the wire flags", () => {
-		expect(toFileDiffMetadata({ name: { old: "", new: "n.go" }, is_new: true }).type).toBe("new");
+		expect(toFileDiffMetadata({ name: { old: "", new: "n.go" }, is_new: true }).type).toBe(
+			"new"
+		);
 		expect(toFileDiffMetadata({ name: { old: "o.go", new: "" }, is_delete: true }).type).toBe(
 			"deleted"
 		);
diff --git a/web/src/lib/components/repo/issues/IssueHeader.stories.svelte b/web/src/lib/components/repo/issues/IssueHeader.stories.svelte
index 6b7fdae53..071f376bc 100644
--- a/web/src/lib/components/repo/issues/IssueHeader.stories.svelte
+++ b/web/src/lib/components/repo/issues/IssueHeader.stories.svelte
@@ -21,7 +21,6 @@
 <Story
 	name="Long title"
 	args={{
-		title:
-			"Investigate intermittent failures when pushing large packfiles over the git smart protocol"
+		title: "Investigate intermittent failures when pushing large packfiles over the git smart protocol"
 	}}
 />
diff --git a/web/src/lib/components/repo/issues/IssueThreadView.svelte b/web/src/lib/components/repo/issues/IssueThreadView.svelte
new file mode 100644
index 000000000..a0f4a3fab
--- /dev/null
+++ b/web/src/lib/components/repo/issues/IssueThreadView.svelte
@@ -0,0 +1,221 @@
+<script module lang="ts">
+	import type { ReactionGroup } from "$lib/components/reaction/reactions";
+
+	export interface IssueData {
+		uri: string;
+		cid?: string;
+		rkey: string;
+		title: string;
+		body: string;
+		bodyHtml: string | null;
+		state: "open" | "closed";
+		authorDid: string;
+		authorHandle: string;
+		createdAt: string;
+		reactions: ReactionGroup[];
+	}
+</script>
+
+<script lang="ts">
+	import { untrack } from "svelte";
+	import { goto } from "$app/navigation";
+	import { resolve } from "$app/paths";
+	import Pencil from "$icon/pencil";
+	import Trash2 from "$icon/trash-2";
+	import { createAction } from "$lib/action.svelte";
+	import { deleteIssue, type IssueRecord } from "$lib/api/issue";
+	import type { RecordView } from "$lib/api/records";
+	import { getAuth } from "$lib/auth.svelte";
+	import CommentBox from "$lib/components/comment/CommentBox.svelte";
+	import CommentList from "$lib/components/comment/CommentList.svelte";
+	import type { CommentThread, ThreadInput } from "$lib/components/comment/comments";
+	import Reactions from "$lib/components/reaction/Reactions.svelte";
+	import IssueBody from "$lib/components/repo/issues/IssueBody.svelte";
+	import IssueForm from "$lib/components/repo/issues/IssueForm.svelte";
+	import IssueHeader from "$lib/components/repo/issues/IssueHeader.svelte";
+	import IssueInfoBar from "$lib/components/repo/issues/IssueInfoBar.svelte";
+	import IssueLabelPanel from "$lib/components/repo/issues/IssueLabelPanel.svelte";
+	import type { RepoInfo } from "$lib/components/repo/types";
+	import ErrorAlert from "$lib/components/ui/Error.svelte";
+	import SignupPrompt from "$lib/components/ui/SignupPrompt.svelte";
+	import TabPanel from "$lib/components/ui/TabPanel.svelte";
+	import { renderMarkup } from "$lib/markup";
+	import type { MarkupContext } from "$lib/markup/paths";
+	import type { Did } from "@atcute/lexicons/syntax";
+
+	interface Props {
+		issue: IssueData;
+		comments: CommentThread[];
+		markup: MarkupContext;
+		repo: RepoInfo;
+	}
+
+	let props: Props = $props();
+
+	const auth = getAuth();
+
+	// local state for optimistic replies, re-synced when streamed props land
+	let issue = $state<IssueData>(untrack(() => props.issue));
+	let comments = $state<CommentThread[]>(untrack(() => props.comments));
+	$effect(() => {
+		issue = props.issue;
+		comments = props.comments;
+	});
+
+	let editing = $state(false);
+
+	const isAuthor = $derived(auth.hasAccount(issue.authorDid));
+	const issuesBase = $derived(`/${props.repo.ownerHandle}/${props.repo.name}/issues`);
+
+	const insertComment = ({ comment, replyTo }: ThreadInput) => {
+		if (replyTo === null) {
+			comments = [...comments, { self: comment, replies: [] }];
+		} else {
+			comments = comments.map((thread) =>
+				thread.self.uri === replyTo
+					? { ...thread, replies: [...thread.replies, comment] }
+					: thread
+			);
+		}
+	};
+
+	const updateComment = ({ comment }: ThreadInput) => {
+		comments = comments.map((thread) => ({
+			self: thread.self.uri === comment.uri ? comment : thread.self,
+			replies: thread.replies.map((reply) => (reply.uri === comment.uri ? comment : reply))
+		}));
+	};
+
+	const removeComment = (uri: string) => {
+		comments = comments
+			.map((thread) => {
+				if (thread.self.uri === uri) {
+					return thread.replies.length
+						? {
+								...thread,
+								self: { ...thread.self, body: "", bodyHtml: null, deleted: true }
+							}
+						: null;
+				}
+				return { ...thread, replies: thread.replies.filter((reply) => reply.uri !== uri) };
+			})
+			.filter((thread) => thread !== null);
+	};
+
+	const handleSaved = async (saved: RecordView<IssueRecord>) => {
+		const { title, body = "" } = saved.value;
+		const bodyHtml = body ? await renderMarkup(body, props.markup).catch(() => null) : null;
+		issue = { ...issue, title, body, bodyHtml };
+		editing = false;
+	};
+
+	const removeIssue = createAction(async () => {
+		const agent = await auth.agentFor(issue.authorDid as Did);
+		await deleteIssue(agent, issue.rkey);
+		await goto(resolve(issuesBase as "/"));
+	});
+
+	const handleDelete = () => {
+		if (!auth.currentDid || removeIssue.loading) return;
+		if (!confirm("Delete this issue? This cannot be undone.")) return;
+		void removeIssue.run();
+	};
+</script>
+
+<svelte:head>
+	<title
+		>{issue.title} &middot; Issue #{issue.rkey} &middot; {props.repo.ownerHandle}/{props.repo
+			.name} &middot; Tangled</title
+	>
+</svelte:head>
+
+{#snippet issueActions()}
+	<button
+		type="button"
+		aria-label="Edit issue"
+		class="cursor-pointer text-foreground-subtle hover:text-foreground-default"
+		onclick={() => (editing = true)}
+	>
+		<Pencil class="size-3" />
+	</button>
+	<button
+		type="button"
+		aria-label="Delete issue"
+		disabled={removeIssue.loading}
+		class="cursor-pointer text-foreground-danger hover:text-foreground-danger-strong disabled:opacity-50"
+		onclick={handleDelete}
+	>
+		<Trash2 class="size-3" />
+	</button>
+{/snippet}
+
+<div class="grid grid-cols-1 gap-4 lg:grid-cols-10">
+	<div class="lg:col-span-8">
+		<TabPanel>
+			{#if editing}
+				<IssueForm
+					mode="edit"
+					authorDid={issue.authorDid}
+					repoDid={props.repo.repoDid ?? ""}
+					markup={props.markup}
+					rkey={issue.rkey}
+					createdAt={issue.createdAt}
+					title={issue.title}
+					body={issue.body}
+					onsaved={handleSaved}
+					oncancel={() => (editing = false)}
+				/>
+			{:else}
+				<IssueHeader title={issue.title} rkey={issue.rkey} />
+				<IssueInfoBar
+					state={issue.state}
+					authorHandle={issue.authorHandle}
+					authorDid={issue.authorDid}
+					createdAt={issue.createdAt}
+					actions={isAuthor ? issueActions : undefined}
+				/>
+				<IssueBody body={issue.body} bodyHtml={issue.bodyHtml} />
+				<Reactions
+					reactions={issue.reactions}
+					subjectUri={issue.uri}
+					alwaysShow
+					class="mt-2"
+				/>
+				{#if removeIssue.error}
+					<div class="mt-3">
+						<ErrorAlert label={removeIssue.error} />
+					</div>
+				{/if}
+			{/if}
+		</TabPanel>
+
+		<div class="mt-4 flex flex-col gap-4">
+			<CommentList
+				threads={comments}
+				subjectUri={issue.uri}
+				subjectCid={issue.cid}
+				markup={props.markup}
+				onsubmitted={insertComment}
+				onedited={updateComment}
+				ondeleted={removeComment}
+			/>
+
+			{#if auth.currentUser}
+				<CommentBox
+					subjectUri={issue.uri}
+					subjectCid={issue.cid}
+					authorDid={auth.currentUser.did}
+					authorHandle={auth.currentUser.handle}
+					markup={props.markup}
+					onsubmitted={insertComment}
+				/>
+			{:else}
+				<SignupPrompt />
+			{/if}
+		</div>
+	</div>
+
+	<div class="lg:col-span-2">
+		<IssueLabelPanel />
+	</div>
+</div>
diff --git a/web/src/lib/components/repo/issues/IssueToolbar.svelte b/web/src/lib/components/repo/issues/IssueToolbar.svelte
index d7e600058..6107ab945 100644
--- a/web/src/lib/components/repo/issues/IssueToolbar.svelte
+++ b/web/src/lib/components/repo/issues/IssueToolbar.svelte
@@ -6,14 +6,15 @@
 	import Button from "$lib/components/ui/Button.svelte";
 	import ButtonGroup, { segmentProps } from "$lib/components/ui/ButtonGroup.svelte";
 	import IssueSearch from "./IssueSearch.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 	import { formatCount } from "$lib/format";
 
 	interface Props {
 		ownerHandle: string;
 		repoName: string;
 		state: "open" | "closed";
-		openCount: number;
-		closedCount: number;
+		openCount: number | Promise<number>;
+		closedCount: number | Promise<number>;
 	}
 
 	let { ownerHandle, repoName, state, openCount, closedCount }: Props = $props();
@@ -39,7 +40,7 @@
 			icon={CircleDot}
 		>
 			<span>
-				<span class="hidden sm:inline">{formatCount(openCount)}</span>
+				<span class="hidden sm:inline">{@render pendingCount(openCount)}</span>
 				Open
 			</span>
 		</Button>
@@ -50,7 +51,7 @@
 			icon={Ban}
 		>
 			<span>
-				<span class="hidden sm:inline">{formatCount(closedCount)}</span>
+				<span class="hidden sm:inline">{@render pendingCount(closedCount)}</span>
 				Closed
 			</span>
 		</Button>
@@ -67,3 +68,10 @@
 		New
 	</Button>
 </div>
+
+<!-- a boundary per count keeps the tabs clickable while a count is still loading -->
+{#snippet pendingCount(value: number | Promise<number>)}
+	<Pending>
+		{formatCount(await value)}
+	</Pending>
+{/snippet}
diff --git a/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte b/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte
index b16abfd03..ffb7233ae 100644
--- a/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte
@@ -48,6 +48,7 @@
 	import PipelineWorkflows from "./PipelineWorkflows.svelte";
 	import Separator from "$lib/components/ui/Separator.svelte";
 	import Skeleton from "$lib/components/ui/Skeleton.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 	import Button from "$lib/components/ui/Button.svelte";
 
 	interface Props {
@@ -71,7 +72,9 @@
 				)
 			: undefined
 	);
-	const commitHref = $derived(resolve(`/${ownerHandle}/${repoName}/commit/${pipeline.sha}` as "/"));
+	const commitHref = $derived(
+		resolve(`/${ownerHandle}/${repoName}/commit/${pipeline.sha}` as "/")
+	);
 
 	const classes = $derived(pipelineCardContent({ linked: href !== undefined }));
 </script>
@@ -87,17 +90,20 @@
 		<span class={classes.triggerRef()}>{pipeline.trigger.targetRef}</span>
 		<ArrowLeft class={classes.triggerArrow()} aria-hidden="true" />
 		{#if pipeline.trigger.sourceRepo && forkLabels}
-			{#await forkLabels}
-				<Skeleton class="h-4.5 w-28 rounded-sm" />
-			{:then labels}
+			{@const sourceRepo = pipeline.trigger.sourceRepo}
+			{@const sourceLabel = pipeline.trigger.sourceLabel}
+			<Pending>
+				{#snippet skeleton()}
+					<Skeleton class="h-4.5 w-28 rounded-sm" />
+				{/snippet}
+				{#snippet failed()}
+					<span class={classes.triggerRef()}>{sourceLabel}</span>
+				{/snippet}
+				{@const fork = (await forkLabels)[sourceRepo]}
 				<span class={classes.triggerRef()}>
-					{labels[pipeline.trigger.sourceRepo]
-						? `${labels[pipeline.trigger.sourceRepo]}:${pipeline.trigger.sourceLabel}`
-						: pipeline.trigger.sourceLabel}
+					{fork ? `${fork}:${sourceLabel}` : sourceLabel}
 				</span>
-			{:catch}
-				<span class={classes.triggerRef()}>{pipeline.trigger.sourceLabel}</span>
-			{/await}
+			</Pending>
 		{:else}
 			<span class={classes.triggerRef()}>{pipeline.trigger.sourceLabel}</span>
 		{/if}
diff --git a/web/src/lib/components/repo/pipelines/PipelineEmptyState.svelte b/web/src/lib/components/repo/pipelines/PipelineEmptyState.svelte
index de73d7aea..f9a13601c 100644
--- a/web/src/lib/components/repo/pipelines/PipelineEmptyState.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineEmptyState.svelte
@@ -10,8 +10,7 @@
 			body: "max-w-md typography-paragraph-small text-foreground-muted",
 			steps: "flex max-w-md flex-col gap-3 text-left",
 			step: "flex items-start gap-3",
-			badge:
-				"flex size-6 shrink-0 items-center justify-center rounded-full bg-background-inset typography-paragraph-small font-semibold text-foreground-default",
+			badge: "flex size-6 shrink-0 items-center justify-center rounded-full bg-background-inset typography-paragraph-small font-semibold text-foreground-default",
 			stepBody: "typography-paragraph-small text-foreground-muted",
 			link: "text-foreground-default underline hover:no-underline"
 		}
diff --git a/web/src/lib/components/repo/pipelines/PipelineList.svelte b/web/src/lib/components/repo/pipelines/PipelineList.svelte
index 553fbbadd..fb1738139 100644
--- a/web/src/lib/components/repo/pipelines/PipelineList.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineList.svelte
@@ -15,8 +15,14 @@
 		forkLabels?: Promise<Record<string, string>>;
 	}
 
-	let { ownerHandle, ownerDid, repoName, pipelines, filtered = false, forkLabels }: Props =
-		$props();
+	let {
+		ownerHandle,
+		ownerDid,
+		repoName,
+		pipelines,
+		filtered = false,
+		forkLabels
+	}: Props = $props();
 </script>
 
 {#if pipelines.length > 0}
diff --git a/web/src/lib/components/repo/pipelines/PipelineStatusIcon.svelte b/web/src/lib/components/repo/pipelines/PipelineStatusIcon.svelte
index 8d9420f16..d437c966a 100644
--- a/web/src/lib/components/repo/pipelines/PipelineStatusIcon.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineStatusIcon.svelte
@@ -26,7 +26,7 @@
 		variants: {
 			status: {
 				pending: "text-foreground-muted",
-				running: "text-foreground-warning animate-[spin_2s_linear_infinite]",
+				running: "animate-[spin_2s_linear_infinite] text-foreground-warning",
 				success: "text-foreground-success",
 				failed: "text-foreground-danger",
 				timeout: "text-foreground-warning",
diff --git a/web/src/lib/components/repo/pipelines/PipelineSymbol.svelte b/web/src/lib/components/repo/pipelines/PipelineSymbol.svelte
index 8c3fb79c6..c1124781c 100644
--- a/web/src/lib/components/repo/pipelines/PipelineSymbol.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineSymbol.svelte
@@ -60,7 +60,11 @@
 	<Hourglass class={classes.waiting({ class: className })} aria-hidden="true" />
 {:else if arcs.length === 1}
 	<!-- every workflow agrees: a full ring of one colour says less than the status' own icon -->
-	<PipelineStatusIcon status={arcs[0].status} colored class={classes.icon({ class: className })} />
+	<PipelineStatusIcon
+		status={arcs[0].status}
+		colored
+		class={classes.icon({ class: className })}
+	/>
 {:else}
 	<!-- the arcs always add up to the whole circle, so the ring needs no track under them -->
 	<svg class={classes.ring({ class: className })} viewBox="0 0 20 20" aria-hidden="true">
diff --git a/web/src/lib/components/repo/pipelines/PipelineToolbar.svelte b/web/src/lib/components/repo/pipelines/PipelineToolbar.svelte
index 6d730bf1e..02b1daeb0 100644
--- a/web/src/lib/components/repo/pipelines/PipelineToolbar.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineToolbar.svelte
@@ -7,8 +7,7 @@
 			root: "grid grid-cols-[auto_1fr_auto] gap-2",
 			search: "col-span-3 sm:col-span-1 sm:col-start-2",
 			group: "sm:row-start-1",
-			count:
-				"col-start-3 row-start-2 flex items-center gap-2 self-center justify-self-end typography-paragraph-small whitespace-nowrap text-foreground-muted sm:row-start-1 md:mr-2.5 md:ml-2",
+			count: "col-start-3 row-start-2 flex items-center gap-2 self-center justify-self-end typography-paragraph-small whitespace-nowrap text-foreground-muted sm:row-start-1 md:mr-2.5 md:ml-2",
 			qualifier: "hidden sm:inline"
 		}
 	});
@@ -23,6 +22,7 @@
 	import Layers2 from "$icon/layers-2";
 	import Button from "$lib/components/ui/Button.svelte";
 	import ButtonGroup, { segmentProps } from "$lib/components/ui/ButtonGroup.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 	import type { PipelineFilter } from "./pipeline";
 	import PipelineSearch from "./PipelineSearch.svelte";
 	import { formatCount } from "$lib/format";
@@ -32,7 +32,7 @@
 		repoName: string;
 		filter: PipelineFilter;
 		/** how many runs match the tab and query */
-		total: number;
+		total: number | Promise<number>;
 	}
 
 	let { ownerHandle, repoName, filter, total }: Props = $props();
@@ -83,10 +83,17 @@
 		</Button>
 	</ButtonGroup>
 
-	{#if total > 0}
-		<span class={classes.count()}>
-			<Play />
-			{formatCount(total)} pipeline {total === 1 ? "run" : "runs"}
-		</span>
-	{/if}
+	{@render pendingCount(total)}
 </div>
+
+{#snippet pendingCount(value: number | Promise<number>)}
+	<Pending>
+		{@const count = await value}
+		{#if count > 0}
+			<span class={classes.count()}>
+				<Play />
+				{formatCount(count)} pipeline {count === 1 ? "run" : "runs"}
+			</span>
+		{/if}
+	</Pending>
+{/snippet}
diff --git a/web/src/lib/components/repo/pipelines/WorkflowRunView.svelte b/web/src/lib/components/repo/pipelines/WorkflowRunView.svelte
new file mode 100644
index 000000000..f6c22f956
--- /dev/null
+++ b/web/src/lib/components/repo/pipelines/WorkflowRunView.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+	import type { PipelineSummary, WorkflowSummary } from "$lib/components/repo/types";
+	import PipelineCardContent from "$lib/components/repo/pipelines/PipelineCardContent.svelte";
+	import WorkflowView from "$lib/components/repo/pipelines/WorkflowView.svelte";
+	import { isLive } from "$lib/components/repo/pipelines/pipeline";
+	import { LogStream } from "$lib/components/repo/pipelines/logStream.svelte";
+	import TabPanel from "$lib/components/ui/TabPanel.svelte";
+
+	// the log stream's effects need a sync context, so the page awaits before rendering this
+	interface Props {
+		ownerHandle: string;
+		repoName: string;
+		spindle: string;
+		pipeline: PipelineSummary;
+		workflow: WorkflowSummary;
+	}
+
+	let { ownerHandle, repoName, spindle, pipeline, workflow }: Props = $props();
+
+	const stream = $derived(
+		new LogStream({
+			host: spindle,
+			pipeline: pipeline.id,
+			workflow: workflow.name,
+			live: isLive(workflow.status)
+		})
+	);
+
+	$effect(() => {
+		const current = stream;
+		current.open();
+		return () => current.destroy();
+	});
+</script>
+
+<TabPanel padded={false} class="flex flex-col gap-2 p-4">
+	<PipelineCardContent {ownerHandle} {repoName} {pipeline} link={true} />
+</TabPanel>
+
+<div class="mt-2">
+	<WorkflowView
+		{ownerHandle}
+		{repoName}
+		{pipeline}
+		{workflow}
+		steps={stream.steps}
+		status={stream.status}
+		error={stream.error}
+	/>
+</div>
diff --git a/web/src/lib/components/repo/pipelines/logStream.svelte.ts b/web/src/lib/components/repo/pipelines/logStream.svelte.ts
index 69b440010..cd57e0e45 100644
--- a/web/src/lib/components/repo/pipelines/logStream.svelte.ts
+++ b/web/src/lib/components/repo/pipelines/logStream.svelte.ts
@@ -1,11 +1,7 @@
 import { subscribePipelineLogs } from "$lib/api/spindleLogs";
 import { createLogAccumulator, type LogStep } from "./logs";
 
-export type LogStreamStatus =
-	| "connecting"
-	| "streaming"
-	| "done"
-	| "dropped";
+export type LogStreamStatus = "connecting" | "streaming" | "done" | "dropped";
 
 export interface LogStreamTarget {
 	host: string;
@@ -45,7 +41,8 @@ export class LogStream {
 					return;
 				}
 				// ignore frames for other workflows
-				const name = frame.kind === "control" ? frame.control.workflow : frame.data.workflow;
+				const name =
+					frame.kind === "control" ? frame.control.workflow : frame.data.workflow;
 				if (name !== workflow) return;
 				this.#dirty = this.#accumulator.push(frame) || this.#dirty;
 				this.#schedule();
diff --git a/web/src/lib/components/repo/pipelines/logs.test.ts b/web/src/lib/components/repo/pipelines/logs.test.ts
index 71cdf6939..b8a175919 100644
--- a/web/src/lib/components/repo/pipelines/logs.test.ts
+++ b/web/src/lib/components/repo/pipelines/logs.test.ts
@@ -72,7 +72,11 @@ describe("LogAccumulator", () => {
 	});
 
 	it("carries an unterminated colour across lines, like the terminal would", () => {
-		const steps = drain([start(1, "Run"), line(1, "\u001b[32mstart\n"), line(1, "still green\n")]);
+		const steps = drain([
+			start(1, "Run"),
+			line(1, "\u001b[32mstart\n"),
+			line(1, "still green\n")
+		]);
 		expect(steps[0].lines[1]).toBe('<span class="ansi-green-fg">still green</span>');
 	});
 
@@ -120,7 +124,9 @@ describe("toRows", () => {
 			"step",
 			"line"
 		]);
-		expect(rows.filter((row) => row.kind === "line").map((row) => row.number)).toEqual([1, 2, 1]);
+		expect(rows.filter((row) => row.kind === "line").map((row) => row.number)).toEqual([
+			1, 2, 1
+		]);
 	});
 
 	it("drops the body of a collapsed step but keeps its header", () => {
diff --git a/web/src/lib/components/repo/pulls/PullCompose.stories.svelte b/web/src/lib/components/repo/pulls/PullCompose.stories.svelte
index 388aead23..eaa465770 100644
--- a/web/src/lib/components/repo/pulls/PullCompose.stories.svelte
+++ b/web/src/lib/components/repo/pulls/PullCompose.stories.svelte
@@ -64,7 +64,7 @@
 				ownerHandle: "tangled.org",
 				repoDid: "did:plc:wshs7t2adsemcrrd4snkeqli",
 				knot: "knot.example.test",
-				defaultBranch: "main"
+				defaultBranch: Promise.resolve("main")
 			},
 			bobbinUrl: "https://bobbin.example.test",
 			knotMirrorUrl: "https://mirror.example.test",
diff --git a/web/src/lib/components/repo/pulls/PullToolbar.svelte b/web/src/lib/components/repo/pulls/PullToolbar.svelte
index 8db11648a..9bb09f01e 100644
--- a/web/src/lib/components/repo/pulls/PullToolbar.svelte
+++ b/web/src/lib/components/repo/pulls/PullToolbar.svelte
@@ -7,15 +7,16 @@
 	import Button from "$lib/components/ui/Button.svelte";
 	import ButtonGroup, { segmentProps } from "$lib/components/ui/ButtonGroup.svelte";
 	import PullSearch from "./PullSearch.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 	import { formatCount } from "$lib/format";
 
 	interface Props {
 		ownerHandle: string;
 		repoName: string;
 		state: "open" | "closed" | "merged";
-		openCount: number;
-		closedCount: number;
-		mergedCount: number;
+		openCount: number | Promise<number>;
+		closedCount: number | Promise<number>;
+		mergedCount: number | Promise<number>;
 	}
 
 	let { ownerHandle, repoName, state, openCount, closedCount, mergedCount }: Props = $props();
@@ -40,7 +41,7 @@
 			icon={GitPullRequest}
 		>
 			<span>
-				<span class="hidden sm:inline">{formatCount(openCount)}</span>
+				<span class="hidden sm:inline">{@render pendingCount(openCount)}</span>
 				Open
 			</span>
 		</Button>
@@ -51,7 +52,7 @@
 			icon={GitMerge}
 		>
 			<span>
-				<span class="hidden sm:inline">{formatCount(mergedCount)}</span>
+				<span class="hidden sm:inline">{@render pendingCount(mergedCount)}</span>
 				Merged
 			</span>
 		</Button>
@@ -62,7 +63,7 @@
 			icon={GitPullRequestClosed}
 		>
 			<span>
-				<span class="hidden sm:inline">{formatCount(closedCount)}</span>
+				<span class="hidden sm:inline">{@render pendingCount(closedCount)}</span>
 				Closed
 			</span>
 		</Button>
@@ -78,3 +79,10 @@
 		New
 	</Button>
 </div>
+
+<!-- a boundary per count keeps the tabs clickable while a count is still loading -->
+{#snippet pendingCount(value: number | Promise<number>)}
+	<Pending>
+		{formatCount(await value)}
+	</Pending>
+{/snippet}
diff --git a/web/src/lib/components/repo/types.ts b/web/src/lib/components/repo/types.ts
index 680266645..54425bdba 100644
--- a/web/src/lib/components/repo/types.ts
+++ b/web/src/lib/components/repo/types.ts
@@ -15,7 +15,7 @@ export interface RepoInfo {
 	website?: string;
 	topics?: string[];
 	source?: RepoSource;
-	defaultBranch: string;
+	defaultBranch: Promise<string>;
 }
 
 /** the repo this one was forked from */
diff --git a/web/src/lib/components/settings/CodeChip.svelte b/web/src/lib/components/settings/CodeChip.svelte
index 9e19b74fc..c96b6b424 100644
--- a/web/src/lib/components/settings/CodeChip.svelte
+++ b/web/src/lib/components/settings/CodeChip.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <span
-	class="inline-flex items-center rounded-sm bg-background-subtle px-2 py-0.5 font-mono typography-monospace-regular text-foreground-default {className ??
+	class="inline-flex items-center rounded-sm bg-background-subtle px-2 py-0.5 typography-monospace-regular font-mono text-foreground-default {className ??
 		''}"
 >
 	{@render children()}
diff --git a/web/src/lib/components/settings/KeyCardContent.svelte b/web/src/lib/components/settings/KeyCardContent.svelte
index cbabe9375..9b9ae9031 100644
--- a/web/src/lib/components/settings/KeyCardContent.svelte
+++ b/web/src/lib/components/settings/KeyCardContent.svelte
@@ -23,9 +23,13 @@
 			<span class="font-bold text-foreground-default">{name}</span>
 		</div>
 		{#if fingerprint}
-			<span class="truncate font-mono typography-paragraph-small text-foreground-subtle">{fingerprint}</span>
+			<span class="truncate font-mono typography-paragraph-small text-foreground-subtle"
+				>{fingerprint}</span
+			>
 		{/if}
-		<span class="typography-paragraph-small text-foreground-subtle">added {relativeTime(createdAt)}</span>
+		<span class="typography-paragraph-small text-foreground-subtle"
+			>added {relativeTime(createdAt)}</span
+		>
 	</div>
 	<Button
 		variant="danger"
diff --git a/web/src/lib/components/settings/SettingsBlock.svelte b/web/src/lib/components/settings/SettingsBlock.svelte
index 02face3b0..5789f99dd 100644
--- a/web/src/lib/components/settings/SettingsBlock.svelte
+++ b/web/src/lib/components/settings/SettingsBlock.svelte
@@ -30,7 +30,9 @@
 	{#if title || lines.length > 0 || action}
 		<!-- the action sits on the last line of the description, not its middle — until
 		     the description needs the whole phone width, where it drops below instead -->
-		<div class="flex w-full flex-col gap-2 sm:flex-row sm:items-end sm:justify-between sm:gap-16">
+		<div
+			class="flex w-full flex-col gap-2 sm:flex-row sm:items-end sm:justify-between sm:gap-16"
+		>
 			<div class="flex min-w-0 flex-col">
 				{#if title}
 					<span
diff --git a/web/src/lib/components/settings/SettingsEntry.svelte b/web/src/lib/components/settings/SettingsEntry.svelte
index 4b41c94e1..2cdb83a1f 100644
--- a/web/src/lib/components/settings/SettingsEntry.svelte
+++ b/web/src/lib/components/settings/SettingsEntry.svelte
@@ -36,6 +36,8 @@
 		{/if}
 	</div>
 	{#if actions}
-		<div class="flex shrink-0 items-center gap-2 self-start sm:self-auto">{@render actions()}</div>
+		<div class="flex shrink-0 items-center gap-2 self-start sm:self-auto">
+			{@render actions()}
+		</div>
 	{/if}
 </div>
diff --git a/web/src/lib/components/settings/SettingsNav.stories.svelte b/web/src/lib/components/settings/SettingsNav.stories.svelte
index cbe4468e1..5a7b3efc6 100644
--- a/web/src/lib/components/settings/SettingsNav.stories.svelte
+++ b/web/src/lib/components/settings/SettingsNav.stories.svelte
@@ -13,7 +13,12 @@
 		{ id: "profile", label: "Profile", href: "/settings", icon: User },
 		{ id: "keys", label: "Keys", href: "/settings/keys", icon: Key },
 		{ id: "emails", label: "Emails", href: "/settings/emails", icon: Mail },
-		{ id: "notifications", label: "Notifications", href: "/settings/notifications", icon: Bell },
+		{
+			id: "notifications",
+			label: "Notifications",
+			href: "/settings/notifications",
+			icon: Bell
+		},
 		{ id: "knots", label: "Knots", href: "/settings/knots", icon: Volleyball },
 		{ id: "spindles", label: "Spindles", href: "/settings/spindles", icon: Spool },
 		{ id: "sites", label: "Sites", href: "/settings/sites", icon: Globe }
diff --git a/web/src/lib/components/settings/SettingsPanel.stories.svelte b/web/src/lib/components/settings/SettingsPanel.stories.svelte
index 61069723a..06ae4b36e 100644
--- a/web/src/lib/components/settings/SettingsPanel.stories.svelte
+++ b/web/src/lib/components/settings/SettingsPanel.stories.svelte
@@ -59,7 +59,9 @@
 			<SettingsList>
 				<SettingsEntry icon={Key} title="laptop">
 					{#snippet meta()}
-						<span class="font-mono typography-monospace-regular break-all text-foreground-muted">
+						<span
+							class="typography-monospace-regular font-mono break-all text-foreground-muted"
+						>
 							SHA256:68LweWe1t0oBuxOD8CpUyhjxGzBiylRDTNVD8WMVKfg=
 						</span>
 					{/snippet}
@@ -74,7 +76,9 @@
 				<Input placeholder="Write a bio" class="w-full sm:w-80" />
 			</SettingsRow>
 			<SettingsRow title="Decentralized Identifier (DID)" stack>
-				<CodeChip class="w-full break-all sm:w-auto">did:plc:rhcxsdhvxax7ezkq6zbunls2</CodeChip>
+				<CodeChip class="w-full break-all sm:w-auto"
+					>did:plc:rhcxsdhvxax7ezkq6zbunls2</CodeChip
+				>
 			</SettingsRow>
 			<SettingsRow title="Hide mine">
 				<Toggle aria-label="Hide mine" />
@@ -98,16 +102,24 @@
 				<SettingsRow stack>
 					{#snippet label()}
 						<span class="flex min-w-0 items-center gap-2">
-							<span class="typography-paragraph-regular text-foreground-default">user.tld</span>
-							<span class="typography-paragraph-regular text-foreground-muted">Owner</span>
+							<span class="typography-paragraph-regular text-foreground-default"
+								>user.tld</span
+							>
+							<span class="typography-paragraph-regular text-foreground-muted"
+								>Owner</span
+							>
 						</span>
 					{/snippet}
 				</SettingsRow>
 				<SettingsRow stack>
 					{#snippet label()}
 						<span class="flex min-w-0 items-center gap-2">
-							<span class="typography-paragraph-regular text-foreground-default">user2.tld</span>
-							<span class="typography-paragraph-regular text-foreground-muted">Collaborator</span>
+							<span class="typography-paragraph-regular text-foreground-default"
+								>user2.tld</span
+							>
+							<span class="typography-paragraph-regular text-foreground-muted"
+								>Collaborator</span
+							>
 						</span>
 					{/snippet}
 					<Button icon={UserRoundMinus}>Remove collaborator</Button>
diff --git a/web/src/lib/components/settings/tabs/EmailsTab.svelte b/web/src/lib/components/settings/tabs/EmailsTab.svelte
index 243c92a93..57e927c27 100644
--- a/web/src/lib/components/settings/tabs/EmailsTab.svelte
+++ b/web/src/lib/components/settings/tabs/EmailsTab.svelte
@@ -74,13 +74,19 @@
 						{/if}
 					{/snippet}
 					{#snippet meta()}
-						<span class="typography-paragraph-regular text-foreground-muted">{email.added}</span>
+						<span class="typography-paragraph-regular text-foreground-muted"
+							>{email.added}</span
+						>
 					{/snippet}
 					{#snippet actions()}
 						{#if !email.primary}
-							<Button icon={Star} onclick={() => setPrimary(email.id)}>Set as primary</Button>
+							<Button icon={Star} onclick={() => setPrimary(email.id)}
+								>Set as primary</Button
+							>
 						{/if}
-						<Button variant="danger" icon={Trash} onclick={() => remove(email.id)}>Delete</Button>
+						<Button variant="danger" icon={Trash} onclick={() => remove(email.id)}
+							>Delete</Button
+						>
 					{/snippet}
 				</SettingsEntry>
 			{/each}
diff --git a/web/src/lib/components/settings/tabs/KnotsTab.svelte b/web/src/lib/components/settings/tabs/KnotsTab.svelte
index 907b3bb75..ebe201956 100644
--- a/web/src/lib/components/settings/tabs/KnotsTab.svelte
+++ b/web/src/lib/components/settings/tabs/KnotsTab.svelte
@@ -65,13 +65,17 @@
 						{/if}
 					{/snippet}
 					{#snippet meta()}
-						<span class="typography-paragraph-regular text-foreground-muted">{knot.added}</span>
+						<span class="typography-paragraph-regular text-foreground-muted"
+							>{knot.added}</span
+						>
 					{/snippet}
 					{#snippet actions()}
 						{#if !knot.verified}
 							<Button icon={RotateCcw} onclick={() => retry(knot.id)}>Retry</Button>
 						{/if}
-						<Button variant="danger" icon={Trash} onclick={() => remove(knot.id)}>Delete</Button>
+						<Button variant="danger" icon={Trash} onclick={() => remove(knot.id)}
+							>Delete</Button
+						>
 					{/snippet}
 				</SettingsEntry>
 			{/each}
diff --git a/web/src/lib/components/settings/tabs/ProfileTab.svelte b/web/src/lib/components/settings/tabs/ProfileTab.svelte
index cf9daeaa9..c53a97f2d 100644
--- a/web/src/lib/components/settings/tabs/ProfileTab.svelte
+++ b/web/src/lib/components/settings/tabs/ProfileTab.svelte
@@ -137,7 +137,9 @@
 			</Button>
 		</SettingsRow>
 		<SettingsRow title="Delete">
-			<Button variant="danger" icon={Trash} href="/settings/profile/delete">Delete account</Button>
+			<Button variant="danger" icon={Trash} href="/settings/profile/delete"
+				>Delete account</Button
+			>
 		</SettingsRow>
 	</SettingsSection>
 </div>
diff --git a/web/src/lib/components/settings/tabs/SpindlesTab.svelte b/web/src/lib/components/settings/tabs/SpindlesTab.svelte
index 8fdc3657c..389b717de 100644
--- a/web/src/lib/components/settings/tabs/SpindlesTab.svelte
+++ b/web/src/lib/components/settings/tabs/SpindlesTab.svelte
@@ -62,13 +62,18 @@
 						{/if}
 					{/snippet}
 					{#snippet meta()}
-						<span class="typography-paragraph-regular text-foreground-muted">{spindle.added}</span>
+						<span class="typography-paragraph-regular text-foreground-muted"
+							>{spindle.added}</span
+						>
 					{/snippet}
 					{#snippet actions()}
 						{#if !spindle.verified}
-							<Button icon={RotateCcw} onclick={() => retry(spindle.id)}>Retry</Button>
+							<Button icon={RotateCcw} onclick={() => retry(spindle.id)}>Retry</Button
+							>
 						{/if}
-						<Button variant="danger" icon={Trash} onclick={() => remove(spindle.id)}>Delete</Button>
+						<Button variant="danger" icon={Trash} onclick={() => remove(spindle.id)}
+							>Delete</Button
+						>
 					{/snippet}
 				</SettingsEntry>
 			{/each}
diff --git a/web/src/lib/components/ui/Avatar.svelte b/web/src/lib/components/ui/Avatar.svelte
index 6ce200797..b33d9b642 100644
--- a/web/src/lib/components/ui/Avatar.svelte
+++ b/web/src/lib/components/ui/Avatar.svelte
@@ -58,31 +58,34 @@
 		src ?? (did ? avatarUrl(did, px === undefined ? undefined : px * 2) : undefined)
 	);
 
-	// an unconfigured avatar service 404s, same as a broken image
-	let failed = $state(false);
+	// hidden with a style, not state, a page full of 404s would write state mid-render
+	const hide = (event: Event) => {
+		(event.currentTarget as HTMLImageElement).style.display = "none";
+	};
 
-	$effect(() => {
-		if (source) failed = false;
-	});
+	// a reused element has to recover from a previous failure
+	const show = (event: Event) => {
+		(event.currentTarget as HTMLImageElement).style.display = "";
+	};
 </script>
 
-{#if source && !failed}
-	<img
-		src={source}
-		alt={handle ? `${handle}'s avatar` : "avatar"}
-		class={avatar({ size, class: `object-cover ${className}` })}
-		onerror={() => (failed = true)}
-	/>
-{:else}
-	<span
-		class={avatar({
-			size,
-			class: `flex items-center justify-center bg-background-canvas text-foreground-subtle ${className}`
-		})}
-		role={handle ? "img" : undefined}
-		aria-label={handle ? `${handle}'s avatar` : undefined}
-		aria-hidden={handle ? undefined : "true"}
-	>
-		<UserRound class="size-1/2" />
-	</span>
-{/if}
+<span
+	class={avatar({
+		size,
+		class: `relative flex items-center justify-center overflow-hidden bg-background-canvas text-foreground-subtle ${className}`
+	})}
+	role={handle ? "img" : undefined}
+	aria-label={handle ? `${handle}'s avatar` : undefined}
+	aria-hidden={handle ? undefined : "true"}
+>
+	<UserRound class="size-1/2" />
+	{#if source}
+		<img
+			src={source}
+			alt=""
+			class="absolute inset-0 size-full object-cover"
+			onerror={hide}
+			onload={show}
+		/>
+	{/if}
+</span>
diff --git a/web/src/lib/components/ui/MarkdownEditor.svelte b/web/src/lib/components/ui/MarkdownEditor.svelte
index 06e10c8f8..57388143e 100644
--- a/web/src/lib/components/ui/MarkdownEditor.svelte
+++ b/web/src/lib/components/ui/MarkdownEditor.svelte
@@ -4,6 +4,7 @@
 	import Pencil from "$icon/pencil";
 	import Button from "./Button.svelte";
 	import ButtonGroup, { segmentProps } from "./ButtonGroup.svelte";
+	import Pending from "./Pending.svelte";
 	import Textarea, { textareaMinHeight } from "./Textarea.svelte";
 	import { renderMarkup, type MarkupContext } from "$lib/markup";
 
@@ -104,23 +105,34 @@
 			class={transparent ? "bg-transparent" : undefined}
 		/>
 	{:else}
-		{#await preview}
-			<div class={`${pane} ${surface} typography-paragraph-small text-foreground-subtle italic`}>Rendering…</div>
-		{:then html}
+		<Pending>
+			{#snippet skeleton()}
+				<div
+					class={`${pane} ${surface} typography-paragraph-small text-foreground-subtle italic`}
+				>
+					Rendering…
+				</div>
+			{/snippet}
+			{#snippet failed()}
+				<div
+					class={`${pane} ${surface} typography-paragraph-small text-foreground-subtle italic`}
+				>
+					Could not render preview.
+				</div>
+			{/snippet}
+			{@const html = await preview}
 			{#if html}
 				<div class={`markup ${pane} ${surface}`}>
 					<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
 					{@html html}
 				</div>
 			{:else}
-				<div class={`${pane} ${surface} typography-paragraph-small text-foreground-subtle italic`}>
+				<div
+					class={`${pane} ${surface} typography-paragraph-small text-foreground-subtle italic`}
+				>
 					Nothing to preview.
 				</div>
 			{/if}
-		{:catch}
-			<div class={`${pane} ${surface} typography-paragraph-small text-foreground-subtle italic`}>
-				Could not render preview.
-			</div>
-		{/await}
+		</Pending>
 	{/if}
 </div>
diff --git a/web/src/lib/components/ui/Pending.svelte b/web/src/lib/components/ui/Pending.svelte
new file mode 100644
index 000000000..7a3880557
--- /dev/null
+++ b/web/src/lib/components/ui/Pending.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { browser } from "$app/environment";
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		skeleton?: Snippet;
+		failed?: Snippet<[error: unknown]>;
+		children: Snippet;
+	}
+
+	let { skeleton, failed: failedProp, children }: Props = $props();
+</script>
+
+<!-- pending stays browser-only because a server-rendered pending branch would replace the page's ssr content -->
+{#if failedProp}
+	<svelte:boundary pending={browser ? skeleton : undefined}>
+		{@render children()}
+		{#snippet failed(error: unknown)}
+			{@render failedProp(error)}
+		{/snippet}
+	</svelte:boundary>
+{:else}
+	<svelte:boundary pending={browser ? skeleton : undefined}>
+		{@render children()}
+	</svelte:boundary>
+{/if}
diff --git a/web/src/lib/components/ui/Tabs.stories.svelte b/web/src/lib/components/ui/Tabs.stories.svelte
index 32f725142..d83a3b397 100644
--- a/web/src/lib/components/ui/Tabs.stories.svelte
+++ b/web/src/lib/components/ui/Tabs.stories.svelte
@@ -1,5 +1,6 @@
 <script module lang="ts">
 	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { expect } from "storybook/test";
 	import Tabs from "./Tabs.svelte";
 	import BookMarked from "$icon/book-marked";
 	import Star from "$icon/star";
@@ -16,6 +17,12 @@
 		{ id: "closed", label: "Closed", count: 28, href: "#" }
 	];
 
+	// counts arrive with streamed repo data, so tabs hold their space
+	const streamingTabs = [
+		{ id: "open", label: "Open", count: new Promise<number>(() => {}), href: "#" },
+		{ id: "closed", label: "Closed", count: Promise.resolve(28), href: "#" }
+	];
+
 	const { Story } = defineMeta({
 		title: "UI/Tabs",
 		component: Tabs,
@@ -30,6 +37,16 @@
 <Story name="Default" />
 <Story name="SecondActive" args={{ active: "repos" }} />
 <Story name="WithoutIcons" args={{ tabs: plainTabs, active: "open" }} />
+<Story
+	name="StreamingCounts"
+	args={{ tabs: streamingTabs, active: "open" }}
+	play={async ({ canvas }) => {
+		// the settled count renders, the pending one stays out of the tab
+		await expect(await canvas.findByText("28")).toBeVisible();
+		const open = canvas.getByRole("link", { name: "Open" });
+		await expect(open).not.toHaveTextContent(/\d/);
+	}}
+/>
 <!-- the vertical variant is the settings sidebar shape: it stretches to its container
      rather than hugging its items -->
 <Story name="Vertical" args={{ vertical: true }}>
diff --git a/web/src/lib/components/ui/Tabs.svelte b/web/src/lib/components/ui/Tabs.svelte
index 2dc7411ed..889955054 100644
--- a/web/src/lib/components/ui/Tabs.svelte
+++ b/web/src/lib/components/ui/Tabs.svelte
@@ -8,7 +8,7 @@
 		label: string;
 		href: string;
 		icon?: Component<SvelteHTMLElements["svg"]>;
-		count?: number;
+		count?: number | Promise<number | undefined>;
 	}
 
 	export const tabs = tv({
@@ -25,8 +25,7 @@
 			vertical: {
 				true: {
 					nav: "relative flex w-full flex-col gap-1 bg-background-navigation-frame p-2",
-					plate:
-						"rounded-sm border border-border-navigation-item-active bg-background-navigation-item",
+					plate: "rounded-sm border border-border-navigation-item-active bg-background-navigation-item",
 					item: "min-h-8 w-full gap-1.5 overflow-hidden rounded-sm border border-transparent px-3 py-1.5 typography-paragraph-regular text-foreground-default transition-colors duration-150 ease-in-out focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
 					icon: "size-3.5 shrink-0",
 					// Figma clips the item rather than letting a long label wrap it taller
@@ -95,6 +94,7 @@
 	import { navigating } from "$app/state";
 	import type { ResolvedPathname } from "$app/types";
 	import { Spring, prefersReducedMotion } from "svelte/motion";
+	import Pending from "$lib/components/ui/Pending.svelte";
 	import { formatCount } from "$lib/format";
 
 	interface Props {
@@ -119,7 +119,9 @@
 	const items = $derived(
 		defs.map((tab) => ({
 			...tab,
-			url: (tab.href.startsWith("/") ? resolve(tab.href as "/") : tab.href) as ResolvedPathname
+			url: (tab.href.startsWith("/")
+				? resolve(tab.href as "/")
+				: tab.href) as ResolvedPathname
 		}))
 	);
 
@@ -185,9 +187,12 @@
 	let placed = false;
 	$effect(() => {
 		if (!box) return;
-		plate.set(vertical ? { pos: box.top, size: box.height } : { pos: box.left, size: box.width }, {
-			instant: !placed || prefersReducedMotion.current
-		});
+		plate.set(
+			vertical ? { pos: box.top, size: box.height } : { pos: box.left, size: box.width },
+			{
+				instant: !placed || prefersReducedMotion.current
+			}
+		);
 		placed = true;
 		ready = true;
 	});
@@ -221,8 +226,21 @@
 					<span aria-hidden="true" class={style.ghost()}>{tab.label}</span>
 				{/if}
 			</span>
-			{#if tab.count}
-				<span class={style.count({ selected: isSelected })}>{formatCount(tab.count)}</span>
+			{#if tab.count !== undefined}
+				{#if typeof tab.count === "object" && tab.count !== null && "then" in tab.count}
+					<Pending>
+						{@const count = await tab.count}
+						{#if count}
+							<span class={style.count({ selected: isSelected })}
+								>{formatCount(count)}</span
+							>
+						{/if}
+					</Pending>
+				{:else if tab.count}
+					<span class={style.count({ selected: isSelected })}
+						>{formatCount(tab.count)}</span
+					>
+				{/if}
 			{/if}
 		</a>
 	{/each}
diff --git a/web/src/lib/navPulse.test.ts b/web/src/lib/navPulse.test.ts
new file mode 100644
index 000000000..66557cf95
--- /dev/null
+++ b/web/src/lib/navPulse.test.ts
@@ -0,0 +1,35 @@
+import { describe, expect, it, vi } from "vitest";
+import { navigatingTo } from "./navPulse";
+
+const mockNavigating = vi.hoisted(() => ({
+	to: null as { url: URL } | null
+}));
+
+vi.mock("$app/state", () => ({
+	navigating: mockNavigating
+}));
+
+describe("navigatingTo", () => {
+	it("returns false when there is no active navigation", () => {
+		mockNavigating.to = null;
+		expect(navigatingTo("/alice/repo")).toBe(false);
+	});
+
+	it("returns true when navigating to the matching href path", () => {
+		mockNavigating.to = { url: new URL("https://tangled.org/alice/repo") };
+		expect(navigatingTo("/alice/repo")).toBe(true);
+		expect(navigatingTo("https://tangled.org/alice/repo")).toBe(true);
+	});
+
+	it("returns false when navigating to a different path", () => {
+		mockNavigating.to = { url: new URL("https://tangled.org/alice/repo/tree/main") };
+		expect(navigatingTo("/alice/repo")).toBe(false);
+		expect(navigatingTo("/alice/other-repo")).toBe(false);
+	});
+
+	it("matches pathnames regardless of search params or hashes in href or to", () => {
+		mockNavigating.to = { url: new URL("https://tangled.org/alice/repo?tab=overview#section") };
+		expect(navigatingTo("/alice/repo")).toBe(true);
+		expect(navigatingTo("/alice/repo?tab=repos")).toBe(true);
+	});
+});
diff --git a/web/src/lib/navPulse.ts b/web/src/lib/navPulse.ts
new file mode 100644
index 000000000..c0a233df0
--- /dev/null
+++ b/web/src/lib/navPulse.ts
@@ -0,0 +1,8 @@
+import { navigating } from "$app/state";
+
+// the old page stays mounted while the destination loads, pulse the clicked row
+export function navigatingTo(href: string): boolean {
+	const to = navigating.to?.url;
+	if (!to) return false;
+	return to.pathname === new URL(href, to.origin).pathname;
+}
diff --git a/web/src/routes/+error.svelte b/web/src/routes/+error.svelte
index 2aad00a9a..ed8749f43 100644
--- a/web/src/routes/+error.svelte
+++ b/web/src/routes/+error.svelte
@@ -47,12 +47,16 @@
 			<div
 				class={`mx-auto mb-4 flex size-16 items-center justify-center rounded-full ${copy.tone}`}
 			>
-				<span class="font-mono typography-heading-4 font-bold" aria-hidden="true">{copy.mark}</span>
+				<span class="font-mono typography-heading-4 font-bold" aria-hidden="true"
+					>{copy.mark}</span
+				>
 			</div>
 		</div>
 
 		<div class="space-y-4">
-			<h1 class="typography-heading-3 font-bold text-foreground-default sm:typography-heading-2">
+			<h1
+				class="typography-heading-3 font-bold text-foreground-default sm:typography-heading-2"
+			>
 				{copy.status} &mdash; {copy.title}
 			</h1>
 			<p class="text-foreground-muted">{copy.message}</p>
diff --git a/web/src/routes/[handle]/+layout.svelte b/web/src/routes/[handle]/+layout.svelte
index e23bf94f4..2a5fac1a9 100644
--- a/web/src/routes/[handle]/+layout.svelte
+++ b/web/src/routes/[handle]/+layout.svelte
@@ -1,89 +1,77 @@
 <script lang="ts">
+	import { goto } from "$app/navigation";
 	import { page } from "$app/state";
-	import { setContext } from "svelte";
-	import { createProfileCounts, PROFILE_COUNTS_KEY } from "$lib/components/profile/counts.svelte";
-	import EmptyState from "$lib/components/ui/EmptyState.svelte";
-	import ProfileCard from "$lib/components/profile/ProfileCard.svelte";
-	import ProfileTabs from "$lib/components/profile/ProfileTabs.svelte";
-	import TabPanel from "$lib/components/ui/TabPanel.svelte";
-	import { getAuth } from "$lib/auth.svelte";
-	import { createBobbinClient } from "$lib/api/client";
-	import { IdentityCache } from "$lib/api/identity";
-	import { fetchVouchesPage } from "$lib/components/profile/pages";
-	import type { NetworkVouch } from "$lib/components/profile/types";
+	import Error from "$lib/components/ui/Error.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
+	import ProfileShell from "$lib/components/profile/ProfileShell.svelte";
 
 	let { children, data } = $props();
 
-	const profileCounts = createProfileCounts(
-		() => data.identity.did,
-		() => data.counts
+	const tabParam = $derived(page.url.searchParams.get("tab") ?? "overview");
+	const activeTab = $derived(
+		["repos", "starred", "strings", "vouches"].includes(tabParam) ? tabParam : "overview"
 	);
-	setContext(PROFILE_COUNTS_KEY, profileCounts);
-	const counts = $derived(profileCounts.value);
 
-	// network vouches are viewer-specific: bobbin derives the trust network from
-	// the authenticated viewer, so this is a service-auth'd call that can only run
-	// client-side (the oauth agent lives in the browser). anonymous viewers have no
-	// network and see nothing. identity resolution stays on an unauthed client since
-	// it's public and would otherwise need its own rpc scope.
-	const auth = getAuth();
-	let networkVouches = $state<NetworkVouch[]>([]);
+	// bare data accesses can see mid-commit state across child reads, derived stays coherent
+	const identity = $derived(data.identity);
+	const profile = $derived(data.profile);
+	const counts = $derived(data.counts);
+	const viewerFollowRkey = $derived(data.viewerFollowRkey);
+	const viewerVouch = $derived(data.viewerVouch);
+	const notJoined = $derived(data.notJoined);
 
-	$effect(() => {
-		const agent = auth.agent;
-		const did = data.identity.did;
-		const viewerDid = auth.currentDid;
-		networkVouches = [];
-		if (!agent) return;
+	// kit's HttpError is not an Error subclass, the message lives on body
+	const failureLabel = (cause: unknown): string => {
+		if (typeof cause === "object" && cause !== null) {
+			const httpMessage = (cause as { body?: { message?: unknown } }).body?.message;
+			if (typeof httpMessage === "string") return httpMessage;
+			if ("message" in cause && typeof cause.message === "string") return cause.message;
+		}
+		return "Couldn't load this profile";
+	};
 
-		let cancelled = false;
-		const bobbinUrl = data.publicConfig.bobbinUrl;
-		const ctx = createBobbinClient({ serviceUrl: bobbinUrl, agent });
-		const cache = new IdentityCache(createBobbinClient({ serviceUrl: bobbinUrl }));
-		fetchVouchesPage(ctx, { did, cache })
-			.then((page) => {
-				if (cancelled) return;
-				networkVouches = page.items
-					.filter((v) => v.direction === "incoming" && v.did !== viewerDid)
-					.map((v) => ({ did: v.did, handle: v.handle, kind: v.kind }));
+	// client navigations stream identity, so canonical redirects happen here once resolved
+	$effect(() => {
+		const pending = data.identity;
+		if (!(pending instanceof Promise)) return;
+		const identifier = decodeURIComponent(page.params.handle ?? "");
+		const search = page.url.search;
+		void pending
+			.then((resolved) => {
+				const canonical = resolved.handle.endsWith(".invalid") ? null : resolved.handle;
+				if (canonical && identifier.toLowerCase() !== canonical.toLowerCase()) {
+					goto(`/${canonical}${search}`);
+				}
 			})
-			.catch(() => {
-				if (!cancelled) networkVouches = [];
-			});
-		return () => {
-			cancelled = true;
-		};
+			// failures surface through the error boundary instead
+			.catch(() => {});
 	});
-	const tabParam = $derived(page.url.searchParams.get("tab") ?? "overview");
-	const activeTab = $derived(
-		["repos", "starred", "strings", "vouches"].includes(tabParam) ? tabParam : "overview"
-	);
 </script>
 
 <svelte:head>
-	<title>{data.identity.handle} &middot; Tangled</title>
+	<title>{decodeURIComponent(page.params.handle ?? "")} &middot; Tangled</title>
 </svelte:head>
 
 <section class="mx-auto w-full max-w-screen-lg py-6">
-	{#if data.notJoined}
-		<EmptyState message={`${data.identity.handle} hasn't joined Tangled yet.`} />
-	{:else}
-		<ProfileTabs handle={data.identity.handle} active={activeTab} {counts} />
-		<TabPanel as="div" padded={false} class="grid md:grid-cols-11 md:gap-4 md:p-6">
-			<aside class="p-6 md:col-span-3 md:p-0">
-				<ProfileCard
-					identity={data.identity}
-					profile={data.profile}
-					followers={counts.followers}
-					following={counts.following}
-					viewerFollowRkey={data.viewerFollowRkey}
-					viewerVouch={data.viewerVouch}
-					{networkVouches}
-				/>
-			</aside>
-			<div class="min-w-0 border-t border-border-default p-6 md:col-span-8 md:border-t-0 md:p-0">
-				{@render children()}
-			</div>
-		</TabPanel>
-	{/if}
+	<!-- remount on navigation, svelte only paints a pending snippet when the boundary is new -->
+	{#key page.params.handle}
+		<Pending>
+			{#snippet failed(cause: unknown)}
+				<div class="px-4 py-8">
+					<Error size="large" label={failureLabel(cause)} />
+				</div>
+			{/snippet}
+			<ProfileShell
+				{identity}
+				{profile}
+				{counts}
+				{viewerFollowRkey}
+				{viewerVouch}
+				{notJoined}
+				bobbinUrl={data.publicConfig.bobbinUrl}
+				{activeTab}
+				content={children}
+			/>
+		</Pending>
+	{/key}
 </section>
diff --git a/web/src/routes/[handle]/+layout.ts b/web/src/routes/[handle]/+layout.ts
index 9a0d57482..73b3755bd 100644
--- a/web/src/routes/[handle]/+layout.ts
+++ b/web/src/routes/[handle]/+layout.ts
@@ -1,3 +1,4 @@
+import { browser } from "$app/environment";
 import { error, redirect } from "@sveltejs/kit";
 import { createBobbinClient } from "$lib/api/client";
 import type { MiniDoc } from "$lib/api/identity";
@@ -12,7 +13,7 @@ import {
 	STRING_COUNT,
 	VOUCH_COUNT
 } from "$lib/api/descriptors";
-import { toHttpError, httpStatusFor } from "$lib/api/load";
+import { toHttpError, httpStatusFor, stream } from "$lib/api/load";
 import { ClientResponseError } from "$lib/api/client";
 import { getViewerVouch } from "$lib/api/graph";
 import type { ProfileCounts, DirectVouch } from "$lib/components/profile/types";
@@ -36,60 +37,96 @@ export const load: LayoutLoad = async (event) => {
 		error(404, "Not found");
 	}
 
-	const ctx = createBobbinClient({ serviceUrl: parent.publicConfig.bobbinUrl, fetch: event.fetch });
+	const ctx = createBobbinClient({
+		serviceUrl: parent.publicConfig.bobbinUrl,
+		fetch: event.fetch
+	});
 	const viewerDid = parent.auth?.did;
-	const resolved = await enrich<MiniDoc>(ctx, {
-		xrpc: "blue.microcosm.identity.resolveMiniDoc",
-		params: { identifier },
-		enrich: targetAll([...PROFILE_COUNTS, FOLLOW_VIEWER], ["did"]),
-		viewer: viewerDid
-	}).catch((cause) => toHttpError(cause, "Could not resolve user"));
-	const doc = resolved.output;
 
-	// redirects dids and stale handles to the canonical handle url
-	const canonical = doc.handle && !doc.handle.endsWith(".invalid") ? doc.handle : null;
-	if (canonical && identifier.toLowerCase() !== canonical.toLowerCase()) {
-		redirect(307, `/${canonical}${event.url.search}`);
-	}
+	// server awaits for 404s and redirects, client navigation streams for instant commit
+	const resolved = (async () => {
+		const enriched = await enrich<MiniDoc>(ctx, {
+			xrpc: "blue.microcosm.identity.resolveMiniDoc",
+			params: { identifier },
+			enrich: targetAll([...PROFILE_COUNTS, FOLLOW_VIEWER], ["did"]),
+			viewer: viewerDid
+		}).catch((cause) => toHttpError(cause, "Could not resolve user"));
+		const doc = enriched.output;
+		const did = doc.did;
 
-	const did = doc.did;
+		const counts: ProfileCounts = {
+			repos: countOf(enriched.data, did, REPO_COUNT),
+			strings: countOf(enriched.data, did, STRING_COUNT),
+			stars: countOf(enriched.data, did, STARRED_COUNT),
+			followers: countOf(enriched.data, did, FOLLOWER_COUNT),
+			following: countOf(enriched.data, did, FOLLOWING_COUNT),
+			vouches: countOf(enriched.data, did, VOUCH_COUNT)
+		};
 
-	const profile: ProfileRecord | null = await getProfile(ctx, did)
-		.then((view) => view.value)
-		.catch((cause) => {
-			if (cause instanceof ClientResponseError && httpStatusFor(cause) === 404) return null;
-			return toHttpError(cause, "Could not load profile");
-		});
+		return {
+			identity: { did, handle: doc.handle },
+			counts,
+			viewerFollowRkey:
+				viewerDid && viewerDid !== did
+					? viewerRkeyOf(enriched.data, did, FOLLOW_VIEWER)
+					: null,
+			canonical: doc.handle && !doc.handle.endsWith(".invalid") ? doc.handle : null
+		};
+	})();
 
-	const counts: ProfileCounts = {
-		repos: countOf(resolved.data, did, REPO_COUNT),
-		strings: countOf(resolved.data, did, STRING_COUNT),
-		stars: countOf(resolved.data, did, STARRED_COUNT),
-		followers: countOf(resolved.data, did, FOLLOWER_COUNT),
-		following: countOf(resolved.data, did, FOLLOWING_COUNT),
-		vouches: countOf(resolved.data, did, VOUCH_COUNT)
-	};
-	const viewerFollowRkey =
-		viewerDid && viewerDid !== did ? viewerRkeyOf(resolved.data, did, FOLLOW_VIEWER) : null;
+	// stream at creation, a rejection on the server kills node before the return runs
+	const identityPromise = stream(resolved.then(({ identity }) => identity));
+	const countsPromise = stream(resolved.then(({ counts }) => counts));
+	const followPromise = stream(resolved.then(({ viewerFollowRkey }) => viewerFollowRkey));
+
+	const profilePromise = stream(
+		resolved.then(({ identity }): Promise<ProfileRecord | null> =>
+			getProfile(ctx, identity.did)
+				.then((view) => view.value)
+				.catch((cause) => {
+					if (cause instanceof ClientResponseError && httpStatusFor(cause) === 404)
+						return null;
+					return toHttpError(cause, "Could not load profile");
+				})
+		)
+	);
 
-	// the viewer's own vouch drives the button state. it's readable without auth
-	// via the viewer's own outgoing vouches, so it stays in the server load. the
-	// network-vouches list is viewer-scoped and needs a service-auth'd request
-	// (bobbin derives the network from the authenticated viewer), so it's fetched
-	// client-side in the layout component where the oauth agent is available.
-	const viewerVouch: DirectVouch | null =
-		viewerDid && did !== viewerDid
-			? await getViewerVouch(ctx, viewerDid, did).catch(() => null)
-			: null;
+	// direct vouch is public so it loads here, network vouches require viewer auth client-side
+	const vouchPromise = stream(
+		resolved.then(({ identity }): Promise<DirectVouch | null> | null =>
+			viewerDid && identity.did !== viewerDid
+				? getViewerVouch(ctx, viewerDid, identity.did).catch(() => null)
+				: null
+		)
+	);
 
-	const notJoined = !profile && Object.values(counts).every((n) => n === 0);
+	const notJoinedPromise = stream(
+		Promise.all([profilePromise, countsPromise]).then(
+			([profile, counts]) => !profile && Object.values(counts).every((n) => n === 0)
+		)
+	);
+
+	if (!browser) {
+		const { identity, canonical } = await resolved;
+		if (canonical && identifier.toLowerCase() !== canonical.toLowerCase()) {
+			redirect(307, `/${canonical}${event.url.search}`);
+		}
+		return {
+			identity,
+			profile: profilePromise,
+			counts: countsPromise,
+			viewerFollowRkey: followPromise,
+			viewerVouch: vouchPromise,
+			notJoined: notJoinedPromise
+		};
+	}
 
 	return {
-		identity: { did, handle: doc.handle },
-		profile,
-		counts,
-		viewerFollowRkey,
-		viewerVouch,
-		notJoined
+		identity: identityPromise,
+		profile: profilePromise,
+		counts: countsPromise,
+		viewerFollowRkey: followPromise,
+		viewerVouch: vouchPromise,
+		notJoined: notJoinedPromise
 	};
 };
diff --git a/web/src/routes/[handle]/+page.svelte b/web/src/routes/[handle]/+page.svelte
index e06446641..fd9c2496f 100644
--- a/web/src/routes/[handle]/+page.svelte
+++ b/web/src/routes/[handle]/+page.svelte
@@ -5,58 +5,73 @@
 	import StarredTab from "$lib/components/profile/tabs/StarredTab.svelte";
 	import StringListTab from "$lib/components/profile/tabs/StringListTab.svelte";
 	import VouchTab from "$lib/components/profile/tabs/VouchTab.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 
 	let { data } = $props();
 </script>
 
 {#if data.tab === "overview"}
-	<OverviewTab pinned={data.overview.pinned} handle={data.identity.handle} />
+	<Pending>
+		{@const identity = await data.identity}
+		<OverviewTab pinned={await data.overview.pinned} handle={identity.handle} />
+	</Pending>
 {:else if data.tab === "repos"}
-	{#key data.repos}
+	<Pending>
+		{@const identity = await data.identity}
+		{@const counts = await data.counts}
 		<RepoListTab
-			initial={data.repos}
-			total={data.counts.repos}
-			did={data.identity.did}
-			handle={data.identity.handle}
+			initial={await data.repos}
+			total={counts.repos}
+			did={identity.did}
+			handle={identity.handle}
 		/>
-	{/key}
+	</Pending>
 {:else if data.tab === "starred"}
-	{#key data.stars}
-		<StarredTab initial={data.stars} total={data.counts.stars} did={data.identity.did} />
-	{/key}
+	<Pending>
+		{@const identity = await data.identity}
+		{@const counts = await data.counts}
+		<StarredTab initial={await data.stars} total={counts.stars} did={identity.did} />
+	</Pending>
 {:else if data.tab === "strings"}
-	{#key data.strings}
+	<Pending>
+		{@const identity = await data.identity}
+		{@const counts = await data.counts}
 		<StringListTab
-			initial={data.strings}
-			total={data.counts.strings}
-			did={data.identity.did}
-			handle={data.identity.handle}
+			initial={await data.strings}
+			total={counts.strings}
+			did={identity.did}
+			handle={identity.handle}
 		/>
-	{/key}
+	</Pending>
 {:else if data.tab === "followers"}
-	{#key data.people}
+	<Pending>
+		{@const identity = await data.identity}
+		{@const counts = await data.counts}
 		<PeopleTab
-			initial={data.people}
-			total={data.counts.followers}
-			did={data.identity.did}
+			initial={await data.people}
+			total={counts.followers}
+			did={identity.did}
 			direction="followers"
 			title="Followers"
 			emptyMessage="No followers yet."
 		/>
-	{/key}
+	</Pending>
 {:else if data.tab === "following"}
-	{#key data.people}
+	<Pending>
+		{@const identity = await data.identity}
+		{@const counts = await data.counts}
 		<PeopleTab
-			initial={data.people}
-			total={data.counts.following}
-			did={data.identity.did}
+			initial={await data.people}
+			total={counts.following}
+			did={identity.did}
 			direction="following"
 			title="Following"
 			emptyMessage="Not following anyone yet."
 		/>
-	{/key}
+	</Pending>
 {:else if data.tab === "vouches"}
-	{#key data.identity.did}
-		<VouchTab did={data.identity.did} isSelf={data.isSelf} profileHandle={data.profileHandle} />
-	{/key}
+	<Pending>
+		{@const identity = await data.identity}
+		<VouchTab did={identity.did} isSelf={await data.isSelf} profileHandle={identity.handle} />
+	</Pending>
 {/if}
diff --git a/web/src/routes/[handle]/+page.ts b/web/src/routes/[handle]/+page.ts
index c7a1b6285..f1fd32048 100644
--- a/web/src/routes/[handle]/+page.ts
+++ b/web/src/routes/[handle]/+page.ts
@@ -1,6 +1,6 @@
 import type { Did } from "@atcute/lexicons/syntax";
 import { createBobbinClient } from "$lib/api/client";
-import { toHttpError } from "$lib/api/load";
+import { stream } from "$lib/api/load";
 import {
 	fetchReposPage,
 	fetchStringsPage,
@@ -28,55 +28,67 @@ export const load: PageLoad = async (event) => {
 	const parent = await event.parent();
 	const tab = normalizeTab(event.url.searchParams.get("tab"));
 
-	if (parent.notJoined) return { tab: "overview" as const, overview: { pinned: [] } };
-
-	const ctx = createBobbinClient({ serviceUrl: parent.publicConfig.bobbinUrl, fetch: event.fetch });
-	const did = parent.identity.did as Did;
-	const handle = parent.identity.handle;
+	const ctx = createBobbinClient({
+		serviceUrl: parent.publicConfig.bobbinUrl,
+		fetch: event.fetch
+	});
+	// the tab fetches hang off identity without awaiting it, so the navigation commits right away
+	const identity = Promise.resolve(parent.identity);
+	const profile = Promise.resolve(parent.profile);
 	const viewerDid = parent.auth?.did;
 
-	try {
-		switch (tab) {
-			case "repos": {
-				const q = event.url.searchParams.get("q")?.trim();
-				const page = await fetchReposPage(ctx, { did, handle, viewerDid, q: q || undefined });
-				return { tab: "repos" as const, repos: page.items };
-			}
-			case "strings": {
-				const page = await fetchStringsPage(ctx, { did, handle });
-				return { tab: "strings" as const, strings: page.items };
-			}
-			case "followers":
-			case "following": {
-				const page = await fetchPeoplePage(ctx, { did, viewerDid, direction: tab });
-				return { tab, people: page.items } as const;
-			}
-			case "vouches": {
-				// the vouch network is viewer-scoped and needs a service-auth'd request,
-				// so it's fetched client-side in VouchTab. nothing to prefetch here.
-				return {
-					tab: "vouches" as const,
-					isSelf: viewerDid === did,
-					profileHandle: handle
-				};
-			}
-			case "starred": {
-				const page = await fetchStarredPage(ctx, { did, viewerDid });
-				return { tab: "starred" as const, stars: page.items };
-			}
-			case "overview":
-			default: {
-				const pinned = await fetchPinned(ctx, {
-					keys: parent.profile?.pinnedRepositories ?? [],
-					did,
+	switch (tab) {
+		case "repos": {
+			const q = event.url.searchParams.get("q")?.trim();
+			const repos = identity.then(({ did, handle }) =>
+				fetchReposPage(ctx, {
+					did: did as Did,
+					handle,
+					viewerDid,
+					q: q || undefined
+				}).then((page) => page.items)
+			);
+			return { tab: "repos" as const, repos: stream(repos) };
+		}
+		case "strings": {
+			const strings = identity.then(({ did, handle }) =>
+				fetchStringsPage(ctx, { did: did as Did, handle }).then((page) => page.items)
+			);
+			return { tab: "strings" as const, strings: stream(strings) };
+		}
+		case "followers":
+		case "following": {
+			const people = identity.then(({ did }) =>
+				fetchPeoplePage(ctx, { did: did as Did, viewerDid, direction: tab }).then(
+					(page) => page.items
+				)
+			);
+			return { tab, people: stream(people) };
+		}
+		case "vouches": {
+			// network vouches require viewer auth, fetched client-side in VouchTab
+			return {
+				tab: "vouches" as const,
+				isSelf: stream(identity.then(({ did }) => viewerDid === did))
+			};
+		}
+		case "starred": {
+			const stars = identity.then(({ did }) =>
+				fetchStarredPage(ctx, { did: did as Did, viewerDid }).then((page) => page.items)
+			);
+			return { tab: "starred" as const, stars: stream(stars) };
+		}
+		case "overview":
+		default: {
+			const pinned = Promise.all([identity, profile]).then(([{ did, handle }, record]) =>
+				fetchPinned(ctx, {
+					keys: record?.pinnedRepositories ?? [],
+					did: did as Did,
 					handle,
 					viewerDid
-				});
-				return { tab: "overview" as const, overview: { pinned } };
-			}
+				})
+			);
+			return { tab: "overview" as const, overview: { pinned: stream(pinned) } };
 		}
-	} catch (cause) {
-		console.error("Page load error:", cause);
-		toHttpError(cause, "Could not load profile data");
 	}
 };
diff --git a/web/src/routes/[handle]/[repo]/+layout.ts b/web/src/routes/[handle]/[repo]/+layout.ts
index d00c52170..a62a24905 100644
--- a/web/src/routes/[handle]/[repo]/+layout.ts
+++ b/web/src/routes/[handle]/[repo]/+layout.ts
@@ -1,3 +1,4 @@
+import { browser } from "$app/environment";
 import { error, redirect } from "@sveltejs/kit";
 import { createBobbinClient } from "$lib/api/client";
 import { count } from "$lib/api/count";
@@ -6,7 +7,7 @@ import { authorOf, enrich, target } from "$lib/api/enrich";
 import { gitTarget, resolveDefaultBranch } from "$lib/api/gitclient";
 import { getStarRkey } from "$lib/api/graph";
 import { resolveMiniDoc } from "$lib/api/identity";
-import { parallel, toHttpError } from "$lib/api/load";
+import { parallel, stream, toHttpError } from "$lib/api/load";
 import type { RecordView, RepoRecord } from "$lib/api/records";
 import { repoNameOf, resolveRepoByName } from "$lib/api/repo";
 import { rkeyFromUri } from "$lib/api/uri";
@@ -50,73 +51,111 @@ export const load: LayoutLoad = async (event) => {
 		error(404, "Not found");
 	}
 
-	const ctx = createBobbinClient({ serviceUrl: parent.publicConfig.bobbinUrl, fetch: event.fetch });
-	const doc = await resolveMiniDoc(ctx, identifier).catch((cause) =>
-		toHttpError(cause, "Could not resolve user")
-	);
+	const ctx = createBobbinClient({
+		serviceUrl: parent.publicConfig.bobbinUrl,
+		fetch: event.fetch
+	});
+	const viewerDid = parent.auth?.did;
 
-	// redirects dids and stale handles to the canonical handle url
-	const canonical = doc.handle && !doc.handle.endsWith(".invalid") ? doc.handle : null;
-	if (canonical && identifier.toLowerCase() !== canonical.toLowerCase()) {
-		redirect(307, `/${canonical}/${event.params.repo}${event.url.search}`);
-	}
+	// server awaits for 404s and redirects, client navigation streams for instant commit
+	const resolved = (async () => {
+		const doc = await resolveMiniDoc(ctx, identifier).catch((cause) =>
+			toHttpError(cause, "Could not resolve user")
+		);
+		const view = await resolveRepoByName(ctx, doc.did, name).catch((cause) =>
+			toHttpError(cause, "Could not load repository")
+		);
+		if (!view) error(404, `${doc.handle}/${name} does not exist`);
+
+		const record = view.value;
+		const repoDid = record.repoDid;
+		const git = gitTarget(parent.publicConfig, { uri: view.uri, repoDid }, event.fetch);
+
+		const repo: RepoInfo = {
+			uri: view.uri,
+			rkey: rkeyFromUri(view.uri),
+			name: repoNameOf(view),
+			ownerDid: doc.did,
+			ownerHandle: doc.handle,
+			repoDid,
+			knot: record.knot,
+			spindle: record.spindle,
+			description: record.description,
+			website: record.website,
+			topics: record.topics,
+			defaultBranch: stream(
+				resolveDefaultBranch(git)
+					.then((branch) => branch ?? FALLBACK_BRANCH)
+					.catch(() => FALLBACK_BRANCH)
+			)
+		};
+
+		return {
+			repo,
+			record,
+			canonical: doc.handle && !doc.handle.endsWith(".invalid") ? doc.handle : null
+		};
+	})();
 
-	const view = await resolveRepoByName(ctx, doc.did, name).catch((cause) =>
-		toHttpError(cause, "Could not load repository")
+	// stream at creation, a rejection on the server kills node before the return runs
+	const repoPromise = stream(resolved.then(({ repo }) => repo));
+
+	const countsPromise = stream(
+		resolved.then(({ repo }) => {
+			const repoDid = repo.repoDid;
+			return parallel({
+				stars: repoDid
+					? count(ctx, "sh.tangled.feed.countStars", repoDid).catch(() => null)
+					: Promise.resolve(null),
+				issues: repoDid
+					? count(ctx, "sh.tangled.repo.countIssues", repoDid, { state: "open" }).catch(
+							() => null
+						)
+					: Promise.resolve(null),
+				pulls: repoDid
+					? count(ctx, "sh.tangled.repo.countPulls", repoDid, { status: "open" }).catch(
+							() => null
+						)
+					: Promise.resolve(null),
+				forks: repoDid
+					? count(ctx, "sh.tangled.repo.countForks", repoDid).catch(() => null)
+					: Promise.resolve(null)
+			}).then((stats): RepoCounts => ({
+				stars: stats.stars?.count ?? 0,
+				issues: stats.issues?.count ?? 0,
+				pulls: stats.pulls?.count ?? 0,
+				forks: stats.forks?.count ?? 0
+			}));
+		})
 	);
-	if (!view) error(404, `${doc.handle}/${name} does not exist`);
 
-	const record = view.value;
-	const repoDid = record.repoDid;
-	const viewerDid = parent.auth?.did;
-	const git = gitTarget(parent.publicConfig, { uri: view.uri, repoDid }, event.fetch);
+	const viewerStarPromise = stream(
+		resolved.then(({ repo }) =>
+			viewerDid && repo.repoDid
+				? getStarRkey(ctx, viewerDid, repo.repoDid).catch(() => null)
+				: null
+		)
+	);
 
-	const stats = await parallel({
-		// only the git backend knows the default branch, and one that is down
-		// or still syncing shouldn't take out the whole layout
-		defaultBranch: resolveDefaultBranch(git),
-		stars: repoDid
-			? count(ctx, "sh.tangled.feed.countStars", repoDid).catch(() => null)
-			: Promise.resolve(null),
-		// the tabs count what is still open, closed ones matter on their own pages
-		issues: repoDid
-			? count(ctx, "sh.tangled.repo.countIssues", repoDid, { state: "open" }).catch(() => null)
-			: Promise.resolve(null),
-		pulls: repoDid
-			? count(ctx, "sh.tangled.repo.countPulls", repoDid, { status: "open" }).catch(() => null)
-			: Promise.resolve(null),
-		forks: repoDid
-			? count(ctx, "sh.tangled.repo.countForks", repoDid).catch(() => null)
-			: Promise.resolve(null),
-		viewerStarRkey:
-			viewerDid && repoDid
-				? getStarRkey(ctx, viewerDid, repoDid).catch(() => null)
-				: Promise.resolve(null),
-		source: resolveSource(ctx, record.source)
-	});
+	const sourcePromise = stream(resolved.then(({ record }) => resolveSource(ctx, record.source)));
 
-	const repo: RepoInfo = {
-		uri: view.uri,
-		rkey: rkeyFromUri(view.uri),
-		name: repoNameOf(view),
-		ownerDid: doc.did,
-		ownerHandle: doc.handle,
-		repoDid,
-		knot: record.knot,
-		spindle: record.spindle,
-		description: record.description,
-		website: record.website,
-		topics: record.topics,
-		source: stats.source ?? undefined,
-		defaultBranch: stats.defaultBranch ?? FALLBACK_BRANCH
-	};
+	if (!browser) {
+		const { repo, canonical } = await resolved;
+		if (canonical && identifier.toLowerCase() !== canonical.toLowerCase()) {
+			redirect(307, `/${canonical}/${event.params.repo}${event.url.search}`);
+		}
+		return {
+			repo,
+			counts: countsPromise,
+			viewerStarRkey: viewerStarPromise,
+			source: sourcePromise
+		};
+	}
 
-	const counts: RepoCounts = {
-		stars: stats.stars?.count ?? 0,
-		issues: stats.issues?.count ?? 0,
-		pulls: stats.pulls?.count ?? 0,
-		forks: stats.forks?.count ?? 0
+	return {
+		repo: repoPromise,
+		counts: countsPromise,
+		viewerStarRkey: viewerStarPromise,
+		source: sourcePromise
 	};
-
-	return { repo, counts, viewerStarRkey: stats.viewerStarRkey };
 };
diff --git a/web/src/routes/[handle]/[repo]/+layout@.svelte b/web/src/routes/[handle]/[repo]/+layout@.svelte
index d6bafb90e..d7ab6dcb0 100644
--- a/web/src/routes/[handle]/[repo]/+layout@.svelte
+++ b/web/src/routes/[handle]/[repo]/+layout@.svelte
@@ -1,15 +1,29 @@
 <script lang="ts">
 	// the @ resets out of the profile shell, repo pages want their own header and
 	// tabs instead of the profile card
+	import { goto } from "$app/navigation";
 	import { page } from "$app/state";
-	import RepoHeader from "$lib/components/repo/RepoHeader.svelte";
-	import RepoTabs from "$lib/components/repo/RepoTabs.svelte";
+	import RepoChrome from "$lib/components/repo/RepoChrome.svelte";
+	import Error from "$lib/components/ui/Error.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 
 	let { children, data } = $props();
 
-	const fullName = $derived(`${data.repo.ownerHandle}/${data.repo.name}`);
-	const repoUrl = $derived(`${page.url.origin}/${fullName}`);
-	const fullNameWithoutAt = $derived(fullName.replace(/^@/, ""));
+	// nothing awaits at this level, the component holding a boundary has to render synchronously
+	const counts = $derived(data.counts);
+	const viewerStarRkey = $derived(data.viewerStarRkey);
+	const source = $derived(data.source);
+
+	// head tags render from params on client nav so streaming never blocks the commit
+	const paramFullName = $derived(
+		`${decodeURIComponent(page.params.handle ?? "")}/${decodeURIComponent(page.params.repo ?? "")}`
+	);
+	const repoMeta = $derived(data.repo instanceof Promise ? null : data.repo);
+	const metaFullName = $derived(
+		repoMeta ? `${repoMeta.ownerHandle}/${repoMeta.name}` : paramFullName
+	);
+	const metaUrl = $derived(`${page.url.origin}/${metaFullName}`);
+	const metaFullNameWithoutAt = $derived(metaFullName.replace(/^@/, ""));
 
 	const activeTab = $derived.by(() => {
 		const segment = page.route.id?.split("/")[3] ?? "";
@@ -24,31 +38,101 @@
 	// commit and pull pages break out of the reading column, everything else
 	// stays capped
 	const fullWidth = $derived(bare || (page.route.id ?? "").includes("/commit/"));
+
+	// kit's HttpError is not an Error subclass, the message lives on body
+	const failureLabel = (cause: unknown): string => {
+		if (typeof cause === "object" && cause !== null) {
+			const httpMessage = (cause as { body?: { message?: unknown } }).body?.message;
+			if (typeof httpMessage === "string") return httpMessage;
+			if ("message" in cause && typeof cause.message === "string") return cause.message;
+		}
+		return "Couldn't load this page";
+	};
+
+	// an errored boundary stays failed across route changes until reset, and these stay plain
+	// flags because writing state here would retrigger the effect below
+	let childrenFailed = false;
+	let childrenReset: (() => void) | null = null;
+	const noteFailure = (reset: () => void) => {
+		childrenFailed = true;
+		childrenReset = reset;
+	};
+	$effect(() => {
+		page.url.pathname;
+		if (childrenFailed) {
+			childrenFailed = false;
+			childrenReset?.();
+		}
+	});
+
+	// client navigations stream repo data, so canonical redirects happen here once resolved
+	$effect(() => {
+		const pending = data.repo;
+		if (!(pending instanceof Promise)) return;
+		const identifier = decodeURIComponent(page.params.handle ?? "");
+		const name = page.params.repo;
+		const search = page.url.search;
+		void pending
+			.then((resolved) => {
+				const canonical = resolved.ownerHandle.endsWith(".invalid")
+					? null
+					: resolved.ownerHandle;
+				if (canonical && identifier.toLowerCase() !== canonical.toLowerCase()) {
+					goto(`/${canonical}/${name}${search}`);
+				}
+			})
+			// failures surface through the error boundary instead
+			.catch(() => {});
+	});
 </script>
 
 <!-- todo: og and twitter card tags, the appview has repo/fragments/og.html -->
 <svelte:head>
-	<title>{fullName} &middot; Tangled</title>
-	<meta name="description" content={data.repo.description ?? "A repository on Tangled"} />
-	<meta name="vcs:clone" content={repoUrl} />
-	<meta name="forge:summary" content={repoUrl} />
-	<meta name="forge:dir" content={`${repoUrl}/tree/{ref}/{path}`} />
-	<meta name="forge:file" content={`${repoUrl}/blob/{ref}/{path}`} />
-	<meta name="forge:line" content={`${repoUrl}/blob/{ref}/{path}#L{line}`} />
-	<meta
-		name="go-import"
-		content={`tangled.sh/${fullNameWithoutAt} git https://tangled.sh/${fullName}`}
-	/>
-	<meta
-		name="go-import"
-		content={`tangled.org/${fullNameWithoutAt} git https://tangled.org/${fullName}`}
-	/>
+	<title>{paramFullName} &middot; Tangled</title>
+	{#if repoMeta}
+		<meta name="description" content={repoMeta.description ?? "A repository on Tangled"} />
+		<meta name="vcs:clone" content={metaUrl} />
+		<meta name="forge:summary" content={metaUrl} />
+		<meta name="forge:dir" content={`${metaUrl}/tree/{ref}/{path}`} />
+		<meta name="forge:file" content={`${metaUrl}/blob/{ref}/{path}`} />
+		<meta name="forge:line" content={`${metaUrl}/blob/{ref}/{path}#L{line}`} />
+		<meta
+			name="go-import"
+			content={`tangled.sh/${metaFullNameWithoutAt} git https://tangled.sh/${metaFullName}`}
+		/>
+		<meta
+			name="go-import"
+			content={`tangled.org/${metaFullNameWithoutAt} git https://tangled.org/${metaFullName}`}
+		/>
+	{/if}
 </svelte:head>
 
 <section class={fullWidth ? "w-full pt-6" : "mx-auto w-full max-w-screen-lg py-6"}>
-	<RepoHeader repo={data.repo} counts={data.counts} viewerStarRkey={data.viewerStarRkey} />
-	{#if !bare}
-		<RepoTabs repo={data.repo} counts={data.counts} active={activeTab} />
-	{/if}
-	{@render children()}
+	<!-- remount on navigation, svelte only paints a pending snippet when the boundary is new -->
+	{#key `${page.params.handle}/${page.params.repo}`}
+		<Pending>
+			<!-- header collapses on error, the boundary below shows the full failure -->
+			{#snippet failed(_error: unknown)}
+				<span class="hidden"></span>
+			{/snippet}
+			<RepoChrome
+				repo={data.repo}
+				{counts}
+				{viewerStarRkey}
+				{source}
+				{activeTab}
+				showTabs={!bare}
+			/>
+		</Pending>
+		<!-- streamed rejections can't reach +error.svelte after the commit, so they land here -->
+		<svelte:boundary>
+			{@render children()}
+			{#snippet failed(cause: unknown, reset: () => void)}
+				{noteFailure(reset)}
+				<div class="px-4 py-8">
+					<Error size="large" label={failureLabel(cause)} />
+				</div>
+			{/snippet}
+		</svelte:boundary>
+	{/key}
 </section>
diff --git a/web/src/routes/[handle]/[repo]/+page.svelte b/web/src/routes/[handle]/[repo]/+page.svelte
index 7c469da9b..46960702e 100644
--- a/web/src/routes/[handle]/[repo]/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/+page.svelte
@@ -1,17 +1,23 @@
 <script lang="ts">
 	import { commitStatuses } from "$lib/api/commitStatuses";
 	import RepoIndexView from "$lib/components/repo/RepoIndexView.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 
 	let { data } = $props();
 
 	const pipelineStatuses = $derived(
-		commitStatuses(
-			data.repo.spindle,
-			data.repo.ownerHandle,
-			data.repo.name,
-			data.commits.map((commit) => commit.hash)
+		Promise.all([data.content, data.repo]).then(([content, repo]) =>
+			commitStatuses(
+				repo.spindle,
+				repo.ownerHandle,
+				repo.name,
+				content.commits.map((commit) => commit.hash)
+			)
 		)
 	);
 </script>
 
-<RepoIndexView repo={data.repo} {data} bobbinUrl={data.publicConfig.bobbinUrl} {pipelineStatuses} />
+<Pending>
+	{@const repo = await data.repo}
+	<RepoIndexView {repo} {data} bobbinUrl={data.publicConfig.bobbinUrl} {pipelineStatuses} />
+</Pending>
diff --git a/web/src/routes/[handle]/[repo]/+page.ts b/web/src/routes/[handle]/[repo]/+page.ts
index 0be20980c..13a4ce541 100644
--- a/web/src/routes/[handle]/[repo]/+page.ts
+++ b/web/src/routes/[handle]/[repo]/+page.ts
@@ -3,5 +3,5 @@ import type { PageLoad } from "./$types";
 
 export const load: PageLoad = async (event) => {
 	const parent = await event.parent();
-	return loadRepoIndex(event, parent, parent.repo.defaultBranch);
+	return loadRepoIndex(event, parent);
 };
diff --git a/web/src/routes/[handle]/[repo]/blob/[ref]/[...path]/+page.svelte b/web/src/routes/[handle]/[repo]/blob/[ref]/[...path]/+page.svelte
index bf7cbae6f..a360853b0 100644
--- a/web/src/routes/[handle]/[repo]/blob/[ref]/[...path]/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/blob/[ref]/[...path]/+page.svelte
@@ -1,14 +1,17 @@
 <script lang="ts">
 	import BlobView from "$lib/components/repo/BlobView.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 
 	let { data } = $props();
-
-	const repo = $derived(data.repo);
 </script>
 
-<BlobView
-	ownerHandle={repo.ownerHandle}
-	repoName={repo.name}
-	blob={data}
-	prerenderedHTML={data.prerenderedHTML}
-/>
+<Pending>
+	{@const repo = await data.repo}
+	{@const blob = await data.blob}
+	<BlobView
+		ownerHandle={repo.ownerHandle}
+		repoName={repo.name}
+		{blob}
+		prerenderedHTML={blob.prerenderedHTML}
+	/>
+</Pending>
diff --git a/web/src/routes/[handle]/[repo]/blob/[ref]/[...path]/+page.ts b/web/src/routes/[handle]/[repo]/blob/[ref]/[...path]/+page.ts
index b9182a650..26ea1bd8c 100644
--- a/web/src/routes/[handle]/[repo]/blob/[ref]/[...path]/+page.ts
+++ b/web/src/routes/[handle]/[repo]/blob/[ref]/[...path]/+page.ts
@@ -1,35 +1,46 @@
 import { error } from "@sveltejs/kit";
 import { browser } from "$app/environment";
-import { hasTextView, loadRepoBlob } from "$lib/api/blob";
+import { hasTextView, loadRepoBlob, type RepoBlobView } from "$lib/api/blob";
+import { stream } from "$lib/api/load";
 import { pierreFileOptions } from "$lib/components/repo/pierre";
 import { baseName } from "$lib/components/repo/urls";
 import type { PageLoad } from "./$types";
 
+export interface BlobContent extends RepoBlobView {
+	prerenderedHTML?: string;
+}
+
 // the ref is a single encoded segment, `feature/x` arrives intact. the
 // rest param is already the path as git knows it
 export const load: PageLoad = async (event) => {
 	// no path means the knot would 400 on the empty path, 404 instead
 	if (event.params.path === "") error(404, "Not found");
 	const parent = await event.parent();
-	const blob = await loadRepoBlob(event, parent, event.params.ref, event.params.path);
 
-	// same deal as the commit page: prerender the code view's shadow dom on
-	// the server, pierre paints client navigations itself
-	let prerenderedHTML: string | undefined;
-	if (
-		!browser &&
-		blob.contents !== null &&
-		!blob.fileTooLarge &&
-		hasTextView(blob.kind) &&
-		blob.defaultView === "code"
-	) {
-		const { preloadFile } = await import("@pierre/diffs/ssr");
-		const prerendered = await preloadFile({
-			file: { name: baseName(blob.path), contents: blob.contents },
-			options: pierreFileOptions(false)
-		});
-		prerenderedHTML = prerendered.prerenderedHTML;
-	}
+	const blobPromise = loadRepoBlob(event, parent, event.params.ref, event.params.path).then(
+		async (blob): Promise<BlobContent> => {
+			let prerenderedHTML: string | undefined;
+			if (
+				!browser &&
+				blob.contents !== null &&
+				!blob.fileTooLarge &&
+				hasTextView(blob.kind) &&
+				blob.defaultView === "code"
+			) {
+				const { preloadFile } = await import("@pierre/diffs/ssr");
+				const prerendered = await preloadFile({
+					file: { name: baseName(blob.path), contents: blob.contents },
+					options: pierreFileOptions(false)
+				});
+				prerenderedHTML = prerendered.prerenderedHTML;
+			}
+			return { ...blob, prerenderedHTML };
+		}
+	);
 
-	return { ...blob, prerenderedHTML };
+	return {
+		ref: event.params.ref,
+		path: event.params.path,
+		blob: stream(blobPromise)
+	};
 };
diff --git a/web/src/routes/[handle]/[repo]/branches/+page.svelte b/web/src/routes/[handle]/[repo]/branches/+page.svelte
index 4d9970390..ddd2aa764 100644
--- a/web/src/routes/[handle]/[repo]/branches/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/branches/+page.svelte
@@ -3,30 +3,41 @@
 	import { resolve } from "$app/paths";
 	import BranchTable from "$lib/components/repo/BranchTable.svelte";
 	import Pagination from "$lib/components/ui/Pagination.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 
 	let { data } = $props();
 
-	const pageHref = (page: number) =>
-		resolve(
-			`/${data.repo.ownerHandle}/${data.repo.name}/branches${page > 1 ? `?page=${page}` : ""}` as "/"
-		);
-	const changePage = (page: number) => void goto(pageHref(page));
+	const changePage = (page: number) => {
+		void Promise.resolve(data.repo).then((repo) => {
+			void goto(
+				resolve(
+					`/${repo.ownerHandle}/${repo.name}/branches${page > 1 ? `?page=${page}` : ""}` as "/"
+				)
+			);
+		});
+	};
 </script>
 
-<BranchTable
-	ownerHandle={data.repo.ownerHandle}
-	repoName={data.repo.name}
-	branches={data.branches}
-/>
+<Pending>
+	{@const repo = await data.repo}
+	<BranchTable
+		ownerHandle={repo.ownerHandle}
+		repoName={repo.name}
+		branches={await data.branches}
+	/>
+</Pending>
 
-{#if data.pageCount > 1}
-	<div class="mt-4 flex justify-center">
-		<Pagination
-			page={data.page}
-			total={data.pageCount}
-			labels
-			onchange={changePage}
-			class="gap-5"
-		/>
-	</div>
-{/if}
+<Pending>
+	{@const pageCount = await data.pageCount}
+	{#if pageCount > 1}
+		<div class="mt-4 flex justify-center">
+			<Pagination
+				page={data.page}
+				total={pageCount}
+				labels
+				onchange={changePage}
+				class="gap-5"
+			/>
+		</div>
+	{/if}
+</Pending>
diff --git a/web/src/routes/[handle]/[repo]/branches/+page.ts b/web/src/routes/[handle]/[repo]/branches/+page.ts
index a2c80fd7f..a2732d04d 100644
--- a/web/src/routes/[handle]/[repo]/branches/+page.ts
+++ b/web/src/routes/[handle]/[repo]/branches/+page.ts
@@ -1,23 +1,29 @@
 import { branches, gitTarget } from "$lib/api/gitclient";
 import { REF_LIMIT } from "$lib/api/repoIndex";
 import { sortBranches, toBranchSummary } from "$lib/api/repo";
+import { stream } from "$lib/api/load";
 import type { PageLoad } from "./$types";
 
 export const load: PageLoad = async (event) => {
 	const parent = await event.parent();
-	const git = gitTarget(parent.publicConfig, parent.repo, event.fetch);
+	const repoPromise = Promise.resolve(parent.repo);
 	const rawPage = event.url.searchParams.get("page") ?? "";
 	const parsed = /^\d+$/.test(rawPage) ? Number(rawPage) : 1;
 	const page = parsed >= 1 ? parsed : 1;
 	const cursor = page > 1 ? String((page - 1) * REF_LIMIT) : undefined;
-	const results = await branches(git, REF_LIMIT, cursor);
-	const list = sortBranches((results.branches ?? []).map(toBranchSummary));
-	const total = results.total ?? 0;
-	const pageCount =
-		total > 0 ? Math.ceil(total / REF_LIMIT) : page + (list.length === REF_LIMIT ? 1 : 0);
+	const results = repoPromise.then((repo) => {
+		const git = gitTarget(parent.publicConfig, repo, event.fetch);
+		return branches(git, REF_LIMIT, cursor);
+	});
+	const list = results.then((res) => sortBranches((res.branches ?? []).map(toBranchSummary)));
+	const pageCount = results.then((res) => {
+		const total = res.total ?? 0;
+		const len = res.branches?.length ?? 0;
+		return total > 0 ? Math.ceil(total / REF_LIMIT) : page + (len === REF_LIMIT ? 1 : 0);
+	});
 	return {
-		branches: list,
+		branches: stream(list),
 		page,
-		pageCount
+		pageCount: stream(pageCount)
 	};
 };
diff --git a/web/src/routes/[handle]/[repo]/commit/[ref]/+page.svelte b/web/src/routes/[handle]/[repo]/commit/[ref]/+page.svelte
index 33ff333b3..b1e0e3e03 100644
--- a/web/src/routes/[handle]/[repo]/commit/[ref]/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/commit/[ref]/+page.svelte
@@ -3,6 +3,7 @@
 	import { commitStatuses } from "$lib/api/commitStatuses";
 	import { toCommitDetail } from "$lib/api/repo";
 	import CommitView from "$lib/components/repo/CommitView.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 	import type { DiffStyle } from "$lib/components/repo/pierre";
 
 	let { data } = $props();
@@ -10,29 +11,29 @@
 	const diffStyle = $derived<DiffStyle>(
 		page.url.searchParams.get("diff") === "split" ? "split" : "unified"
 	);
-	// the load guarantees a commit, the fallback only satisfies the type
-	const wire = $derived(data.commitDiff.commit ?? {});
-	const commit = $derived(toCommitDetail(wire));
-	const pipelineStatuses = $derived(
-		commitStatuses(
-			data.repo.spindle,
-			data.repo.ownerHandle,
-			data.repo.name,
-			commit.hash ? [commit.hash] : []
-		)
-	);
 </script>
 
-<CommitView
-	ownerHandle={data.repo.ownerHandle}
-	repoName={data.repo.name}
-	ref={data.ref}
-	{commit}
-	parent={wire.parent ?? ""}
-	changeId={wire.change_id ?? ""}
-	files={data.commitDiff.diff ?? []}
-	stat={data.commitDiff.stat}
-	{diffStyle}
-	prerendered={data.prerendered}
-	{pipelineStatuses}
-/>
+<Pending>
+	{@const repo = await data.repo}
+	{@const commitDiff = await data.commitDiff}
+	{@const wire = commitDiff.commit ?? {}}
+	{@const commit = toCommitDetail(wire)}
+	<CommitView
+		ownerHandle={repo.ownerHandle}
+		repoName={repo.name}
+		ref={data.ref}
+		{commit}
+		parent={wire.parent ?? ""}
+		changeId={wire.change_id ?? ""}
+		files={commitDiff.diff ?? []}
+		stat={commitDiff.stat}
+		{diffStyle}
+		prerendered={await data.prerendered}
+		pipelineStatuses={commitStatuses(
+			repo.spindle,
+			repo.ownerHandle,
+			repo.name,
+			commit.hash ? [commit.hash] : []
+		)}
+	/>
+</Pending>
diff --git a/web/src/routes/[handle]/[repo]/commit/[ref]/+page.ts b/web/src/routes/[handle]/[repo]/commit/[ref]/+page.ts
index 8c6c3cb43..7d11a9cf2 100644
--- a/web/src/routes/[handle]/[repo]/commit/[ref]/+page.ts
+++ b/web/src/routes/[handle]/[repo]/commit/[ref]/+page.ts
@@ -1,14 +1,14 @@
 import { error } from "@sveltejs/kit";
 import { browser } from "$app/environment";
 import { ClientResponseError, createBobbinClient } from "$lib/api/client";
-import { diffFor, type DiffFile } from "$lib/api/diff";
-import { toHttpError } from "$lib/api/load";
+import { diffFor } from "$lib/api/diff";
+import type { DiffFile } from "$lib/api/diff";
+import { stream, toHttpError } from "$lib/api/load";
 import { diffRowKey, toFileDiffMetadata } from "$lib/components/repo/fileDiff";
-import { pierreDiffOptions, type DiffStyle } from "$lib/components/repo/pierre";
+import { pierreDiffOptions } from "$lib/components/repo/pierre";
+import type { DiffStyle } from "$lib/components/repo/pierre";
 import type { PageLoad } from "./$types";
 
-// the first paint ships highlighted: prerender each file's shadow dom on
-// the server. skipped on client navigations, pierre paints those itself
 const prerenderDiffs = async (
 	files: DiffFile[],
 	style: DiffStyle
@@ -30,25 +30,33 @@ const prerenderDiffs = async (
 	return Object.fromEntries(entries);
 };
 
-// the ref is a single encoded segment, `feature/x` arrives intact
 export const load: PageLoad = async (event) => {
 	const parent = await event.parent();
+	const repoPromise = Promise.resolve(parent.repo);
 	const ctx = createBobbinClient({
 		serviceUrl: parent.publicConfig.bobbinUrl,
 		fetch: event.fetch
 	});
-	const repo = parent.repo.uri;
 
-	const result = await diffFor(ctx, repo, event.params.ref).catch((cause: unknown): never => {
-		if (cause instanceof ClientResponseError && cause.status === 404) {
-			error(404, "Commit not found");
-		}
-		return toHttpError(cause, "Could not load commit");
+	const diffPromise = repoPromise.then(async (repo) => {
+		const result = await diffFor(ctx, repo.uri, event.params.ref).catch(
+			(cause: unknown): never => {
+				if (cause instanceof ClientResponseError && cause.status === 404) {
+					error(404, "Commit not found");
+				}
+				return toHttpError(cause, "Could not load commit");
+			}
+		);
+		if (!result?.diff?.commit) error(404, "Commit not found");
+		return result.diff;
 	});
-	if (!result?.diff?.commit) error(404, "Commit not found");
 
 	const style = event.url.searchParams.get("diff") === "split" ? "split" : "unified";
-	const prerendered = await prerenderDiffs(result.diff.diff ?? [], style);
+	const prerendered = diffPromise.then((diff) => prerenderDiffs(diff.diff ?? [], style));
 
-	return { ref: event.params.ref, commitDiff: result.diff, prerendered };
+	return {
+		ref: event.params.ref,
+		commitDiff: stream(diffPromise),
+		prerendered: stream(prerendered)
+	};
 };
diff --git a/web/src/routes/[handle]/[repo]/commits/[ref]/+page.svelte b/web/src/routes/[handle]/[repo]/commits/[ref]/+page.svelte
index 533eb4619..37c483e5c 100644
--- a/web/src/routes/[handle]/[repo]/commits/[ref]/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/commits/[ref]/+page.svelte
@@ -3,33 +3,38 @@
 	import { resolve } from "$app/paths";
 	import { commitStatuses } from "$lib/api/commitStatuses";
 	import CommitLogView from "$lib/components/repo/CommitLogView.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 
 	let { data } = $props();
 
-	const pipelineStatuses = $derived(
-		commitStatuses(
-			data.repo.spindle,
-			data.repo.ownerHandle,
-			data.repo.name,
-			data.commits.map((commit) => commit.hash)
-		)
-	);
-
-	const pageHref = (page: number) =>
-		resolve(
-			`/${data.repo.ownerHandle}/${data.repo.name}/commits/${encodeURIComponent(data.ref)}${page > 1 ? `?page=${page}` : ""}` as "/"
-		);
-	const changePage = (page: number) => void goto(pageHref(page));
+	const changePage = (page: number) => {
+		void Promise.resolve(data.repo).then((repo) => {
+			void goto(
+				resolve(
+					`/${repo.ownerHandle}/${repo.name}/commits/${encodeURIComponent(data.ref)}${page > 1 ? `?page=${page}` : ""}` as "/"
+				)
+			);
+		});
+	};
 </script>
 
-<CommitLogView
-	ownerHandle={data.repo.ownerHandle}
-	repoName={data.repo.name}
-	ref={data.ref}
-	commits={data.commits}
-	tagsByCommit={data.tagsByCommit}
-	{pipelineStatuses}
-	page={data.page}
-	pageCount={data.pageCount}
-	onPageChange={changePage}
-/>
+<Pending>
+	{@const repo = await data.repo}
+	{@const commits = await data.commits}
+	<CommitLogView
+		ownerHandle={repo.ownerHandle}
+		repoName={repo.name}
+		ref={data.ref}
+		{commits}
+		tagsByCommit={data.tagsByCommit}
+		pipelineStatuses={commitStatuses(
+			repo.spindle,
+			repo.ownerHandle,
+			repo.name,
+			commits.map((commit) => commit.hash)
+		)}
+		page={data.page}
+		pageCount={await data.pageCount}
+		onPageChange={changePage}
+	/>
+</Pending>
diff --git a/web/src/routes/[handle]/[repo]/commits/[ref]/+page.ts b/web/src/routes/[handle]/[repo]/commits/[ref]/+page.ts
index 9290d8670..9a0c33e64 100644
--- a/web/src/routes/[handle]/[repo]/commits/[ref]/+page.ts
+++ b/web/src/routes/[handle]/[repo]/commits/[ref]/+page.ts
@@ -1,53 +1,66 @@
-import { parallel } from "$lib/api/load";
 import { branches, gitTarget, log, tags } from "$lib/api/gitclient";
 import { REF_LIMIT } from "$lib/api/repoIndex";
 import { tagsByCommitHash, toBranchSummary, toCommitSummary, toTagSummary } from "$lib/api/repo";
+import { stream } from "$lib/api/load";
 import type { PageLoad } from "./$types";
 
-// same page size as the appview's log
 const COMMIT_LIMIT = 60;
 
 export const load: PageLoad = async (event) => {
 	const parent = await event.parent();
-	const git = gitTarget(parent.publicConfig, parent.repo, event.fetch);
+	const repoPromise = Promise.resolve(parent.repo);
 	const ref = event.params.ref;
 
-	// Number accepts hex/exponents/whitespace that the appview's Atoi rejects,
-	// gate first
 	const rawPage = event.url.searchParams.get("page") ?? "";
 	const parsed = /^\d+$/.test(rawPage) ? Number(rawPage) : 1;
 	const page = parsed >= 1 ? parsed : 1;
-	// the log cursor is a numeric offset
 	const cursor = page > 1 ? String((page - 1) * COMMIT_LIMIT) : undefined;
 
-	const results = await parallel({
-		log: log(git, { ref, limit: COMMIT_LIMIT, cursor }),
-		tags: tags(git, REF_LIMIT),
-		branches: branches(git, REF_LIMIT)
+	const logPromise = repoPromise.then((repo) => {
+		const git = gitTarget(parent.publicConfig, repo, event.fetch);
+		return log(git, { ref, limit: COMMIT_LIMIT, cursor });
 	});
 
-	const commits = (results.log.commits ?? []).map(toCommitSummary);
-	const totalCommits = results.log.total ?? 0;
-	// knot2 answers an exact total when it can, without one a full page hints
-	// at another
-	const pageCount =
-		totalCommits > 0
-			? Math.ceil(totalCommits / COMMIT_LIMIT)
-			: page + (commits.length === COMMIT_LIMIT ? 1 : 0);
-
-	const tagsByCommit = tagsByCommitHash(commits, (results.tags.tags ?? []).map(toTagSummary));
-	// branch tips go into the same badge map as tags
-	const shown = new Set(commits.map((commit) => commit.hash));
-	for (const branch of (results.branches.branches ?? []).map(toBranchSummary)) {
-		if (shown.has(branch.hash)) (tagsByCommit[branch.hash] ??= []).push(branch.name);
-	}
+	const commits = logPromise.then((res) => (res.commits ?? []).map(toCommitSummary));
+	const totalCommits = logPromise.then((res) => res.total ?? 0);
+	const pageCount = logPromise.then((res) => {
+		const total = res.total ?? 0;
+		const count = res.commits?.length ?? 0;
+		return total > 0
+			? Math.ceil(total / COMMIT_LIMIT)
+			: page + (count === COMMIT_LIMIT ? 1 : 0);
+	});
+
+	const tagsPromise = repoPromise
+		.then((repo) => {
+			const git = gitTarget(parent.publicConfig, repo, event.fetch);
+			return tags(git, REF_LIMIT);
+		})
+		.catch(() => ({ tags: [] }));
+	const branchesPromise = repoPromise
+		.then((repo) => {
+			const git = gitTarget(parent.publicConfig, repo, event.fetch);
+			return branches(git, REF_LIMIT);
+		})
+		.catch(() => ({ branches: [] }));
+
+	const tagsByCommit = Promise.all([commits, tagsPromise, branchesPromise]).then(
+		([commitList, tagRes, branchRes]) => {
+			const map = tagsByCommitHash(commitList, (tagRes.tags ?? []).map(toTagSummary));
+			const shown = new Set(commitList.map((commit) => commit.hash));
+			for (const branch of (branchRes.branches ?? []).map(toBranchSummary)) {
+				if (shown.has(branch.hash)) (map[branch.hash] ??= []).push(branch.name);
+			}
+			return map;
+		}
+	);
 
 	return {
 		ref,
 		page,
-		pageCount,
-		commits,
-		totalCommits,
-		tagsByCommit
+		pageCount: stream(pageCount),
+		commits: stream(commits),
+		totalCommits: stream(totalCommits),
+		tagsByCommit: stream(tagsByCommit)
 	};
 };
diff --git a/web/src/routes/[handle]/[repo]/issues/+page.svelte b/web/src/routes/[handle]/[repo]/issues/+page.svelte
index 32ad18ab1..2a6b6a66a 100644
--- a/web/src/routes/[handle]/[repo]/issues/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/issues/+page.svelte
@@ -1,21 +1,32 @@
 <script lang="ts">
 	import IssueList from "$lib/components/repo/issues/IssueList.svelte";
 	import IssueToolbar from "$lib/components/repo/issues/IssueToolbar.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 	import TabPanel from "$lib/components/ui/TabPanel.svelte";
 
 	let { data } = $props();
 </script>
 
-<TabPanel padded={false} class="p-4">
-	<IssueToolbar
-		ownerHandle={data.repo.ownerHandle}
-		repoName={data.repo.name}
-		state={data.state}
-		openCount={data.openCount}
-		closedCount={data.closedCount}
-	/>
-</TabPanel>
+<Pending>
+	<!-- an await here suspends the whole navigation, so the awaits live below the boundary -->
+	{@const repo = await data.repo}
+	<TabPanel padded={false} class="p-4">
+		<IssueToolbar
+			ownerHandle={repo.ownerHandle}
+			repoName={repo.name}
+			state={data.state}
+			openCount={data.openCount}
+			closedCount={data.closedCount}
+		/>
+	</TabPanel>
 
-<div class="mt-2">
-	<IssueList ownerHandle={data.repo.ownerHandle} repoName={data.repo.name} issues={data.issues} />
-</div>
+	<div class="mt-2">
+		<Pending>
+			<IssueList
+				ownerHandle={repo.ownerHandle}
+				repoName={repo.name}
+				issues={await data.issues}
+			/>
+		</Pending>
+	</div>
+</Pending>
diff --git a/web/src/routes/[handle]/[repo]/issues/+page.ts b/web/src/routes/[handle]/[repo]/issues/+page.ts
index a4a76a56c..4d08380bb 100644
--- a/web/src/routes/[handle]/[repo]/issues/+page.ts
+++ b/web/src/routes/[handle]/[repo]/issues/+page.ts
@@ -3,55 +3,58 @@ import { count } from "$lib/api/count";
 import { ISSUE_AUTHOR_DOCS } from "$lib/api/descriptors";
 import { authorOf, enrich, target } from "$lib/api/enrich";
 import type { IssueListPage } from "$lib/api/issue";
+import { stream } from "$lib/api/load";
 import { rkeyFromUri } from "$lib/api/uri";
 import type { IssueSummary } from "$lib/components/repo/types";
 import type { PageLoad } from "./$types";
 
 export const load: PageLoad = async (event) => {
 	const parent = await event.parent();
+	const repo = Promise.resolve(parent.repo);
 	const state = event.url.searchParams.get("state") === "closed" ? "closed" : "open";
-	const repoDid = parent.repo.repoDid;
-
-	// no repoDid means bobbin never indexed this repo, so there is nothing to list
-	if (!repoDid) {
-		return {
-			state: state as "open" | "closed",
-			issues: [] as IssueSummary[],
-			openCount: parent.counts.issues,
-			closedCount: 0
-		};
-	}
-
-	const ctx = createBobbinClient({ serviceUrl: parent.publicConfig.bobbinUrl, fetch: event.fetch });
+	const ctx = createBobbinClient({
+		serviceUrl: parent.publicConfig.bobbinUrl,
+		fetch: event.fetch
+	});
 
-	const [page, closed] = await Promise.all([
-		enrich<IssueListPage>(ctx, {
+	// returned unawaited so the page can paint its skeleton, ssr still waits for them
+	const issues = repo.then(async (r) => {
+		const repoDid = r.repoDid;
+		if (!repoDid) return [] as IssueSummary[];
+		return enrich<IssueListPage>(ctx, {
 			xrpc: "sh.tangled.repo.listIssues",
 			params: { subject: repoDid, state },
 			enrich: [target(ISSUE_AUTHOR_DOCS, ["items[].uri"])]
-		}),
-		// the layout only knows the open count, the closed tab needs its own
-		count(ctx, "sh.tangled.repo.countIssues", repoDid, { state: "closed" }).catch(() => null)
-	]);
+		}).then((page) =>
+			page.output.items.map((item): IssueSummary => {
+				const author = authorOf(page.data, item.uri, ISSUE_AUTHOR_DOCS);
+				return {
+					uri: item.uri,
+					rkey: rkeyFromUri(item.uri),
+					title: item.value.title,
+					state: item.state === "closed" ? "closed" : "open",
+					authorDid: author.did,
+					authorHandle: author.handle,
+					createdAt: item.value.createdAt,
+					commentCount: item.commentCount
+				};
+			})
+		);
+	});
 
-	const issues: IssueSummary[] = page.output.items.map((item): IssueSummary => {
-		const author = authorOf(page.data, item.uri, ISSUE_AUTHOR_DOCS);
-		return {
-			uri: item.uri,
-			rkey: rkeyFromUri(item.uri),
-			title: item.value.title,
-			state: item.state === "closed" ? "closed" : "open",
-			authorDid: author.did,
-			authorHandle: author.handle,
-			createdAt: item.value.createdAt,
-			commentCount: item.commentCount
-		};
+	// the layout only knows the open count, the closed tab needs its own
+	const closedCount = repo.then(async (r) => {
+		const repoDid = r.repoDid;
+		if (!repoDid) return 0;
+		return count(ctx, "sh.tangled.repo.countIssues", repoDid, { state: "closed" })
+			.then((c) => c?.count ?? 0)
+			.catch(() => 0);
 	});
 
 	return {
 		state: state as "open" | "closed",
-		issues,
-		openCount: parent.counts.issues,
-		closedCount: closed?.count ?? 0
+		issues: stream(issues),
+		openCount: stream(Promise.resolve(parent.counts).then((c) => c.issues)),
+		closedCount: stream(closedCount)
 	};
 };
diff --git a/web/src/routes/[handle]/[repo]/issues/[aturi]/+page.svelte b/web/src/routes/[handle]/[repo]/issues/[aturi]/+page.svelte
index 5fd364b5a..3fd4fff8a 100644
--- a/web/src/routes/[handle]/[repo]/issues/[aturi]/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/issues/[aturi]/+page.svelte
@@ -1,195 +1,25 @@
 <script lang="ts">
-	import IssueHeader from "$lib/components/repo/issues/IssueHeader.svelte";
-	import IssueInfoBar from "$lib/components/repo/issues/IssueInfoBar.svelte";
-	import IssueBody from "$lib/components/repo/issues/IssueBody.svelte";
-	import IssueLabelPanel from "$lib/components/repo/issues/IssueLabelPanel.svelte";
-	import CommentList from "$lib/components/comment/CommentList.svelte";
-	import CommentBox from "$lib/components/comment/CommentBox.svelte";
-	import Reactions from "$lib/components/reaction/Reactions.svelte";
-	import SignupPrompt from "$lib/components/ui/SignupPrompt.svelte";
-	import TabPanel from "$lib/components/ui/TabPanel.svelte";
-	import IssueForm from "$lib/components/repo/issues/IssueForm.svelte";
+	import IssueThreadView from "$lib/components/repo/issues/IssueThreadView.svelte";
+	import EmptyState from "$lib/components/ui/EmptyState.svelte";
 	import ErrorAlert from "$lib/components/ui/Error.svelte";
-	import Pencil from "$icon/pencil";
-	import Trash2 from "$icon/trash-2";
-	import { goto } from "$app/navigation";
-	import { resolve } from "$app/paths";
-	import { renderMarkup } from "$lib/markup";
-	import { deleteIssue, type IssueRecord } from "$lib/api/issue";
-	import type { RecordView } from "$lib/api/records";
-	import type { ThreadInput } from "$lib/components/comment/comments";
-	import type { Did } from "@atcute/lexicons/syntax";
-	import { getAuth } from "$lib/auth.svelte";
-	import { createAction } from "$lib/action.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 
 	let { data } = $props();
-
-	const auth = getAuth();
-
-	let issue = $derived(data.issue);
-
-	const isAuthor = $derived(auth.hasAccount(issue.authorDid));
-	const issuesBase = $derived(`/${data.repo.ownerHandle}/${data.repo.name}/issues`);
-
-	let editing = $state(false);
-
-	let comments = $derived(data.comments);
-
-	// optimistic update
-	const insertComment = ({ comment, replyTo }: ThreadInput) => {
-		if (replyTo === null) {
-			comments = [...comments, { self: comment, replies: [] }];
-		} else {
-			comments = comments.map((thread) =>
-				thread.self.uri === replyTo
-					? { ...thread, replies: [...thread.replies, comment] }
-					: thread
-			);
-		}
-	};
-
-	const updateComment = ({ comment }: ThreadInput) => {
-		comments = comments.map((thread) => ({
-			self: thread.self.uri === comment.uri ? comment : thread.self,
-			replies: thread.replies.map((reply) => (reply.uri === comment.uri ? comment : reply))
-		}));
-	};
-
-	const removeComment = (uri: string) => {
-		comments = comments
-			.map((thread) => {
-				// a deleted parent that still has replies stays as a tombstone so its
-				// replies remain grouped; otherwise drop it entirely
-				if (thread.self.uri === uri) {
-					return thread.replies.length
-						? {
-								...thread,
-								self: { ...thread.self, body: "", bodyHtml: null, deleted: true }
-							}
-						: null;
-				}
-				return { ...thread, replies: thread.replies.filter((reply) => reply.uri !== uri) };
-			})
-			.filter((thread) => thread !== null);
-	};
-
-	const handleSaved = async (saved: RecordView<IssueRecord>) => {
-		const { title, body = "" } = saved.value;
-		const bodyHtml = body ? await renderMarkup(body, data.markup).catch(() => null) : null;
-		issue = { ...issue, title, body, bodyHtml };
-		editing = false;
-	};
-
-	const removeIssue = createAction(async () => {
-		const agent = await auth.agentFor(issue.authorDid as Did);
-		await deleteIssue(agent, issue.rkey);
-		await goto(resolve(issuesBase as "/"));
-	});
-
-	const handleDelete = () => {
-		if (!auth.currentDid || removeIssue.loading) return;
-		if (!confirm("Delete this issue? This cannot be undone.")) return;
-		void removeIssue.run();
-	};
 </script>
 
-<svelte:head>
-	<title
-		>{issue.title} &middot; Issue #{issue.rkey} &middot; {data.repo.ownerHandle}/{data.repo
-			.name}
-		&middot; Tangled</title
-	>
-</svelte:head>
-
-{#snippet issueActions()}
-	<button
-		type="button"
-		aria-label="Edit issue"
-		class="cursor-pointer text-foreground-subtle hover:text-foreground-default"
-		onclick={() => (editing = true)}
-	>
-		<Pencil class="size-3" />
-	</button>
-	<button
-		type="button"
-		aria-label="Delete issue"
-		disabled={removeIssue.loading}
-		class="cursor-pointer text-foreground-danger hover:text-foreground-danger-strong disabled:opacity-50"
-		onclick={handleDelete}
-	>
-		<Trash2 class="size-3" />
-	</button>
-{/snippet}
-
-<div class="grid grid-cols-1 gap-4 lg:grid-cols-10">
-	<!-- conversation -->
-	<div class="lg:col-span-8">
-		<TabPanel>
-			{#if editing}
-				<IssueForm
-					mode="edit"
-					authorDid={issue.authorDid}
-					repoDid={data.repo.repoDid ?? ""}
-					markup={data.markup}
-					rkey={issue.rkey}
-					createdAt={issue.createdAt}
-					title={issue.title}
-					body={issue.body}
-					onsaved={handleSaved}
-					oncancel={() => (editing = false)}
-				/>
-			{:else}
-				<IssueHeader title={issue.title} rkey={issue.rkey} />
-				<IssueInfoBar
-					state={issue.state}
-					authorHandle={issue.authorHandle}
-					authorDid={issue.authorDid}
-					createdAt={issue.createdAt}
-					actions={isAuthor ? issueActions : undefined}
-				/>
-				<IssueBody body={issue.body} bodyHtml={issue.bodyHtml} />
-				<Reactions
-					reactions={issue.reactions}
-					subjectUri={issue.uri}
-					alwaysShow
-					class="mt-2"
-				/>
-				{#if removeIssue.error}
-					<div class="mt-3">
-						<ErrorAlert label={removeIssue.error} />
-					</div>
-				{/if}
-			{/if}
-		</TabPanel>
-
-		<div class="mt-4 flex flex-col gap-4">
-			<CommentList
-				threads={comments}
-				subjectUri={issue.uri}
-				subjectCid={issue.cid}
-				markup={data.markup}
-				onsubmitted={insertComment}
-				onedited={updateComment}
-				ondeleted={removeComment}
-			/>
-
-			{#if auth.currentUser}
-				<CommentBox
-					subjectUri={issue.uri}
-					subjectCid={issue.cid}
-					authorDid={auth.currentUser.did}
-					authorHandle={auth.currentUser.handle}
-					markup={data.markup}
-					onsubmitted={insertComment}
-				/>
-			{:else}
-				<SignupPrompt />
-			{/if}
-		</div>
-	</div>
-
-	<!-- label panel -->
-	<div class="lg:col-span-2">
-		<IssueLabelPanel />
-	</div>
-</div>
+<Pending>
+	{@const repo = await data.repo}
+	{@const result = await data.page}
+	{#if result.kind === "ok"}
+		<IssueThreadView
+			issue={result.issue}
+			comments={result.comments}
+			markup={result.markup}
+			{repo}
+		/>
+	{:else if result.kind === "not-found"}
+		<EmptyState message="Issue not found." />
+	{:else if result.kind === "error"}
+		<ErrorAlert label={result.message} />
+	{/if}
+</Pending>
diff --git a/web/src/routes/[handle]/[repo]/issues/[aturi]/+page.ts b/web/src/routes/[handle]/[repo]/issues/[aturi]/+page.ts
index 753f3c54e..05bc43d70 100644
--- a/web/src/routes/[handle]/[repo]/issues/[aturi]/+page.ts
+++ b/web/src/routes/[handle]/[repo]/issues/[aturi]/+page.ts
@@ -1,5 +1,6 @@
-import { error } from "@sveltejs/kit";
-import { createBobbinClient } from "$lib/api/client";
+import { browser } from "$app/environment";
+import { error, isHttpError } from "@sveltejs/kit";
+import { createBobbinClient, ClientResponseError, type BobbinContext } from "$lib/api/client";
 import { COMMENT_AUTHOR_DOCS, ISSUE_AUTHOR_DOCS, REACTION_AUTHOR_DOCS } from "$lib/api/descriptors";
 import { authorOf, enrich, miniDocOf, target } from "$lib/api/enrich";
 import { INVALID_HANDLE, type MiniDoc } from "$lib/api/identity";
@@ -8,129 +9,201 @@ import type { CommentListPage } from "$lib/api/comment";
 import type { ReactionListPage, ReactionRecord } from "$lib/api/reaction";
 import type { RecordView } from "$lib/api/records";
 import { didFromUri, rkeyFromUri } from "$lib/api/uri";
+import { httpStatusFor, stream } from "$lib/api/load";
 import { renderMarkup } from "$lib/markup";
-import { buildCommentThreads, type ThreadInput } from "$lib/components/comment/comments";
+import type { MarkupContext } from "$lib/markup/paths";
+import {
+	buildCommentThreads,
+	type CommentThread,
+	type ThreadInput
+} from "$lib/components/comment/comments";
 import { buildReactions, type ReactionGroup } from "$lib/components/reaction/reactions";
+import type { IssueData } from "$lib/components/repo/issues/IssueThreadView.svelte";
+import type { RepoInfo } from "$lib/components/repo/types";
 import type { PageLoad } from "./$types";
 
+export type { IssueData };
+
+export type IssueThreadResult =
+	| {
+			kind: "ok";
+			issue: IssueData;
+			comments: CommentThread[];
+			markup: MarkupContext;
+	  }
+	| {
+			kind: "not-found";
+	  }
+	| {
+			kind: "error";
+			message: string;
+	  };
+
+const loadThread = async (
+	ctx: BobbinContext,
+	uri: string,
+	repoPromise: Promise<RepoInfo>,
+	host: string,
+	viewerDid: string | undefined
+): Promise<IssueThreadResult> => {
+	try {
+		const issuePromise = enrich<RecordView<IssueRecord>>(ctx, {
+			xrpc: "sh.tangled.repo.getIssue",
+			params: { issue: uri },
+			enrich: [target(ISSUE_AUTHOR_DOCS, ["uri"])]
+		}).catch((cause: unknown) => {
+			if (
+				cause instanceof ClientResponseError &&
+				(cause.status === 404 || httpStatusFor(cause) === 404)
+			) {
+				return null;
+			}
+			throw cause;
+		});
+
+		const [issuePage, resolvedRepo] = await Promise.all([issuePromise, repoPromise]);
+		if (!issuePage) return { kind: "not-found" };
+
+		const ref = (await resolvedRepo.defaultBranch) ?? "main";
+		const markupOpts: MarkupContext = {
+			repo: `${resolvedRepo.ownerHandle}/${resolvedRepo.name}`,
+			ref,
+			host
+		};
+		const record = issuePage.output;
+		const author = authorOf(issuePage.data, record.uri, ISSUE_AUTHOR_DOCS);
+
+		const [states, comments] = await Promise.all([
+			listIssueStates(ctx, record.uri, { limit: 1, order: "desc" }).catch(() => null),
+			enrich<CommentListPage>(ctx, {
+				xrpc: "sh.tangled.feed.listComments",
+				params: { subject: record.uri, order: "asc", limit: 100 },
+				enrich: [target(COMMENT_AUTHOR_DOCS, ["items[].uri"])]
+			}).catch(() => null)
+		]);
+
+		const latest = states?.items?.[0]?.value?.state;
+		const state = latest?.endsWith(".closed") ? ("closed" as const) : ("open" as const);
+		const body = record.value.body ?? "";
+		const bodyHtml = body ? await renderMarkup(body, markupOpts) : null;
+		const commentItems = comments?.output?.items ?? [];
+
+		const subjects = [record.uri, ...commentItems.map((item) => item.uri)];
+		const reactionPages = await Promise.all(
+			subjects.map((subject) =>
+				enrich<ReactionListPage>(ctx, {
+					xrpc: "sh.tangled.feed.listReactions",
+					params: { subject, order: "asc", limit: 100 },
+					enrich: [target(REACTION_AUTHOR_DOCS, ["items[].uri"])]
+				}).catch(() => null)
+			)
+		);
+		const reactionsBySubject = new Map<string, RecordView<ReactionRecord>[]>();
+		subjects.forEach((subject, i) =>
+			reactionsBySubject.set(subject, reactionPages[i]?.output?.items ?? [])
+		);
+
+		const reactorDids = new Set<string>();
+		for (const items of reactionsBySubject.values()) {
+			for (const item of items) reactorDids.add(didFromUri(item.uri));
+		}
+
+		const reactorDoc = (did: string): MiniDoc | undefined => {
+			for (const page of reactionPages) {
+				const doc = page && miniDocOf(page.data, did, REACTION_AUTHOR_DOCS);
+				if (doc) return doc;
+			}
+			return undefined;
+		};
+		const reactorHandles = new Map(
+			[...reactorDids].map((did) => [did, reactorDoc(did)?.handle ?? INVALID_HANDLE] as const)
+		);
+		const reactionsFor = (subject: string): ReactionGroup[] =>
+			buildReactions(
+				reactionsBySubject.get(subject) ?? [],
+				viewerDid,
+				(did) => reactorHandles.get(did) ?? INVALID_HANDLE
+			);
+
+		const threadInputs: ThreadInput[] = await Promise.all(
+			commentItems.map(async (item): Promise<ThreadInput> => {
+				const commentAuthor = authorOf(comments?.data ?? {}, item.uri, COMMENT_AUTHOR_DOCS);
+				const commentBody = item.value.body?.text ?? "";
+				const commentBodyHtml = commentBody
+					? await renderMarkup(commentBody, markupOpts)
+					: null;
+				return {
+					comment: {
+						uri: item.uri,
+						cid: item.cid,
+						rkey: rkeyFromUri(item.uri),
+						authorDid: commentAuthor.did,
+						authorHandle: commentAuthor.handle ?? INVALID_HANDLE,
+						createdAt: item.value.createdAt,
+						body: commentBody,
+						bodyHtml: commentBodyHtml,
+						reactions: reactionsFor(item.uri)
+					},
+					replyTo: item.value.replyTo?.uri ?? null,
+					replyToCid: item.value.replyTo?.cid
+				};
+			})
+		);
+
+		return {
+			kind: "ok",
+			issue: {
+				uri: record.uri,
+				cid: record.cid,
+				rkey: rkeyFromUri(record.uri),
+				title: record.value.title,
+				body,
+				bodyHtml,
+				state,
+				authorDid: author.did,
+				authorHandle: author.handle ?? INVALID_HANDLE,
+				createdAt: record.value.createdAt,
+				reactions: reactionsFor(record.uri)
+			},
+			comments: buildCommentThreads(threadInputs),
+			markup: markupOpts
+		};
+	} catch (cause) {
+		if (isHttpError(cause)) throw cause;
+		if (
+			cause instanceof ClientResponseError &&
+			(cause.status === 404 || httpStatusFor(cause) === 404)
+		) {
+			return { kind: "not-found" };
+		}
+		const message =
+			cause instanceof ClientResponseError
+				? (cause.description ?? cause.error)
+				: cause instanceof Error
+					? cause.message
+					: "Could not load issue";
+		return { kind: "error", message };
+	}
+};
+
 export const load: PageLoad = async (event) => {
 	const parent = await event.parent();
 	const uri = event.params.aturi;
 
 	if (!uri.startsWith("at://")) error(404, "Issue not found");
 
-	const ctx = createBobbinClient({ serviceUrl: parent.publicConfig.bobbinUrl, fetch: event.fetch });
-
-	const issuePage = await enrich<RecordView<IssueRecord>>(ctx, {
-		xrpc: "sh.tangled.repo.getIssue",
-		params: { issue: uri },
-		enrich: [target(ISSUE_AUTHOR_DOCS, ["uri"])]
-	}).catch(() => null);
-	if (!issuePage) error(404, "Issue not found");
-
-	const record = issuePage.output;
-	const author = authorOf(issuePage.data, record.uri, ISSUE_AUTHOR_DOCS);
-	const markupOpts = {
-		repo: `${parent.repo.ownerHandle}/${parent.repo.name}`,
-		ref: parent.repo.defaultBranch,
-		host: event.url.host
-	};
-
-	const [states, comments] = await Promise.all([
-		listIssueStates(ctx, record.uri, { limit: 1, order: "desc" }).catch(() => null),
-		enrich<CommentListPage>(ctx, {
-			xrpc: "sh.tangled.feed.listComments",
-			params: { subject: record.uri, order: "asc", limit: 100 },
-			enrich: [target(COMMENT_AUTHOR_DOCS, ["items[].uri"])]
-		}).catch(() => null)
-	]);
-
-	const latest = states?.items[0]?.value.state;
-	const state = latest?.endsWith(".closed") ? ("closed" as const) : ("open" as const);
-	const body = record.value.body ?? "";
-	const bodyHtml = body ? await renderMarkup(body, markupOpts) : null;
+	const ctx = createBobbinClient({
+		serviceUrl: parent.publicConfig.bobbinUrl,
+		fetch: event.fetch
+	});
 	const viewerDid = parent.auth?.did;
-	const commentItems = comments?.output.items ?? [];
-
-	// reactions: one listReactions per subject (the issue itself + each comment).
-	// bobbin has no batch-by-subject query and enrich can't break counts down by
-	// emoji, so fan out and group client-side. reactor docs ride along in the
-	// same enrich calls
-	const subjects = [record.uri, ...commentItems.map((item) => item.uri)];
-	const reactionPages = await Promise.all(
-		subjects.map((subject) =>
-			enrich<ReactionListPage>(ctx, {
-				xrpc: "sh.tangled.feed.listReactions",
-				params: { subject, order: "asc", limit: 100 },
-				enrich: [target(REACTION_AUTHOR_DOCS, ["items[].uri"])]
-			}).catch(() => null)
-		)
-	);
-	const reactionsBySubject = new Map<string, RecordView<ReactionRecord>[]>();
-	subjects.forEach((subject, i) =>
-		reactionsBySubject.set(subject, reactionPages[i]?.output.items ?? [])
-	);
-
-	const reactorDids = new Set<string>();
-	for (const items of reactionsBySubject.values()) {
-		for (const item of items) reactorDids.add(didFromUri(item.uri));
+
+	const page = loadThread(ctx, uri, Promise.resolve(parent.repo), event.url.host, viewerDid);
+	if (!browser) {
+		const resolved = await page;
+		if (resolved.kind === "not-found") error(404, "Issue not found");
+		if (resolved.kind === "error") error(500, resolved.message);
 	}
-	// a reactor's doc can land in any subject's sidecar
-	const reactorDoc = (did: string): MiniDoc | undefined => {
-		for (const page of reactionPages) {
-			const doc = page && miniDocOf(page.data, did, REACTION_AUTHOR_DOCS);
-			if (doc) return doc;
-		}
-		return undefined;
-	};
-	const reactorHandles = new Map(
-		[...reactorDids].map((did) => [did, reactorDoc(did)?.handle ?? INVALID_HANDLE] as const)
-	);
-	const reactionsFor = (subject: string): ReactionGroup[] =>
-		buildReactions(
-			reactionsBySubject.get(subject) ?? [],
-			viewerDid,
-			(did) => reactorHandles.get(did) ?? INVALID_HANDLE
-		);
 
-	const threadInputs: ThreadInput[] = await Promise.all(
-		commentItems.map(async (item): Promise<ThreadInput> => {
-			const commentAuthor = authorOf(comments?.data ?? {}, item.uri, COMMENT_AUTHOR_DOCS);
-			const commentBody = item.value.body?.text ?? "";
-			const commentBodyHtml = commentBody ? await renderMarkup(commentBody, markupOpts) : null;
-			return {
-				comment: {
-					uri: item.uri,
-					cid: item.cid,
-					rkey: rkeyFromUri(item.uri),
-					authorDid: commentAuthor.did,
-					authorHandle: commentAuthor.handle,
-					createdAt: item.value.createdAt,
-					body: commentBody,
-					bodyHtml: commentBodyHtml,
-					reactions: reactionsFor(item.uri)
-				},
-				replyTo: item.value.replyTo?.uri ?? null,
-				replyToCid: item.value.replyTo?.cid
-			};
-		})
-	);
-
-	return {
-		issue: {
-			uri: record.uri,
-			cid: record.cid,
-			rkey: rkeyFromUri(record.uri),
-			title: record.value.title,
-			body,
-			bodyHtml,
-			state,
-			authorDid: author.did,
-			authorHandle: author.handle,
-			createdAt: record.value.createdAt,
-			reactions: reactionsFor(record.uri)
-		},
-		comments: buildCommentThreads(threadInputs),
-		markup: markupOpts
-	};
+	return { page: stream(page) };
 };
diff --git a/web/src/routes/[handle]/[repo]/issues/[aturi]/issue.test.ts b/web/src/routes/[handle]/[repo]/issues/[aturi]/issue.test.ts
new file mode 100644
index 000000000..359ee124a
--- /dev/null
+++ b/web/src/routes/[handle]/[repo]/issues/[aturi]/issue.test.ts
@@ -0,0 +1,119 @@
+import { describe, expect, it, vi } from "vitest";
+import { load } from "./+page";
+import { ISSUE_AUTHOR_DOCS } from "$lib/api/descriptors";
+import { TYPE_MINIDOC } from "$lib/api/enrich";
+
+const REPO_DID = "did:plc:j5hmlfdrwkvtxm7cjmu7j2is";
+const AUTHOR_DID = "did:plc:2zcfjzyocp6kapg6jc4eacok";
+const ISSUE_URI = `at://${AUTHOR_DID}/sh.tangled.repo.issue/3mgftgdw6ad22`;
+
+const jsonResponse = (body: unknown, status = 200): Response =>
+	new Response(JSON.stringify(body), {
+		status,
+		headers: { "content-type": "application/json" }
+	});
+
+const issueResponse = () =>
+	jsonResponse({
+		output: {
+			uri: ISSUE_URI,
+			cid: "bafyreidakrovoxr2yfueukylm44kthte5g3usyex27e5cqv3nkze7tfxb4",
+			value: {
+				title: "bug: login fails",
+				body: "steps to reproduce",
+				createdAt: "2026-08-04T09:00:00.000Z"
+			}
+		},
+		data: {
+			[AUTHOR_DID]: {
+				[ISSUE_AUTHOR_DOCS.source]: {
+					[TYPE_MINIDOC]: { did: AUTHOR_DID, handle: "andrew.heiss.phd" }
+				}
+			}
+		}
+	});
+
+const makeEvent = (fetchOverride?: typeof fetch) => {
+	const fetchMock =
+		fetchOverride ??
+		vi.fn<typeof fetch>().mockImplementation(async (input, init) => {
+			const str = String(input);
+			const bodyStr = init?.body ? String(init.body) : "";
+			if (bodyStr.includes("getIssue") || str.includes("getIssue")) return issueResponse();
+			if (str.includes("listIssueStates")) return jsonResponse({ items: [] });
+			if (bodyStr.includes("listComments") || str.includes("listComments"))
+				return jsonResponse({ output: { items: [] }, data: {} });
+			if (bodyStr.includes("listReactions") || str.includes("listReactions"))
+				return jsonResponse({ output: { items: [] }, data: {} });
+			return jsonResponse({ output: { items: [] }, data: {} });
+		});
+
+	return {
+		fetchMock,
+		event: {
+			url: new URL("http://web.test/alice.test/core/issues/" + encodeURIComponent(ISSUE_URI)),
+			params: {
+				handle: "alice.test",
+				repo: "core",
+				aturi: ISSUE_URI
+			},
+			fetch: fetchMock,
+			parent: async () => ({
+				publicConfig: { bobbinUrl: "https://bobbin.test" },
+				repo: {
+					repoDid: REPO_DID,
+					ownerHandle: "alice.test",
+					name: "core",
+					defaultBranch: Promise.resolve("main")
+				},
+				counts: Promise.resolve({ stars: 0, issues: 1, pulls: 0, forks: 0 }),
+				auth: { did: AUTHOR_DID }
+			})
+		} as never
+	};
+};
+
+describe("issue detail load", () => {
+	it("returns streamed page promise that resolves to ok kind", async () => {
+		const { event } = makeEvent();
+		const data = (await load(event))!;
+
+		expect(data.page).toBeInstanceOf(Promise);
+		const result = await data.page;
+		if (result.kind === "error") {
+			throw new Error(`got error: ${result.message}`);
+		}
+		expect(result.kind).toBe("ok");
+		if (result.kind === "ok") {
+			expect(result.issue).toMatchObject({
+				uri: ISSUE_URI,
+				title: "bug: login fails",
+				authorDid: AUTHOR_DID,
+				authorHandle: "andrew.heiss.phd",
+				state: "open"
+			});
+			expect(result.comments).toEqual([]);
+		}
+	});
+
+	it("returns 404 when the issue is missing", async () => {
+		const fetchMock = vi.fn<typeof fetch>().mockImplementation(async () => {
+			return jsonResponse({ error: "RecordNotFound", message: "no such issue" }, 404);
+		});
+		const { event } = makeEvent(fetchMock);
+
+		await expect(load(event)).rejects.toMatchObject({ status: 404 });
+	});
+
+	it("returns 500 when the issue load fails", async () => {
+		const fetchMock = vi.fn<typeof fetch>().mockImplementation(async () => {
+			return jsonResponse({ error: "InternalError", message: "db down" }, 500);
+		});
+		const { event } = makeEvent(fetchMock);
+
+		await expect(load(event)).rejects.toMatchObject({
+			status: 500,
+			body: { message: "db down" }
+		});
+	});
+});
diff --git a/web/src/routes/[handle]/[repo]/issues/new/+page.svelte b/web/src/routes/[handle]/[repo]/issues/new/+page.svelte
index 299587603..a89cbf4c6 100644
--- a/web/src/routes/[handle]/[repo]/issues/new/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/issues/new/+page.svelte
@@ -3,39 +3,55 @@
 	import { page } from "$app/state";
 	import { resolve } from "$app/paths";
 	import IssueForm from "$lib/components/repo/issues/IssueForm.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 	import TabPanel from "$lib/components/ui/TabPanel.svelte";
 
 	let { data } = $props();
 
-	const base = $derived(`/${data.repo.ownerHandle}/${data.repo.name}/issues`);
-
-	const markup = $derived({
-		repo: `${data.repo.ownerHandle}/${data.repo.name}`,
-		ref: data.repo.defaultBranch,
-		host: page.url.host,
-		camo: data.publicConfig?.camoEnabled
+	let defaultBranch = $state("main");
+	$effect(() => {
+		void Promise.resolve(data.repo)
+			.then((r) => r.defaultBranch)
+			.then((b) => {
+				defaultBranch = b;
+			});
 	});
 
 	// no issue detail route yet, so land back on the list after creating
 	const handleSaved = async () => {
-		await goto(resolve(base as "/"));
+		const repo = await data.repo;
+		await goto(resolve(`/${repo.ownerHandle}/${repo.name}/issues` as "/"));
 	};
 
-	const handleCancel = () => {
-		void goto(resolve(base as "/"));
+	const handleCancel = async () => {
+		const repo = await data.repo;
+		void goto(resolve(`/${repo.ownerHandle}/${repo.name}/issues` as "/"));
 	};
 </script>
 
 <svelte:head>
-	<title>New issue · {data.repo.ownerHandle}/{data.repo.name} · Tangled</title>
+	<title
+		>New issue &middot; {decodeURIComponent(page.params.handle ?? "")}/{decodeURIComponent(
+			page.params.repo ?? ""
+		)} &middot; Tangled</title
+	>
 </svelte:head>
 
 <TabPanel class="py-6">
 	<h1 class="mb-4 typography-heading-4 text-foreground-default">Create a new issue</h1>
-	<IssueForm
-		{markup}
-		repoDid={data.repo.repoDid ?? ""}
-		onsaved={handleSaved}
-		oncancel={handleCancel}
-	/>
+	<Pending>
+		{@const repo = await data.repo}
+		{@const markup = {
+			repo: `${repo.ownerHandle}/${repo.name}`,
+			ref: defaultBranch,
+			host: page.url.host,
+			camo: data.publicConfig?.camoEnabled
+		}}
+		<IssueForm
+			{markup}
+			repoDid={repo.repoDid ?? ""}
+			onsaved={handleSaved}
+			oncancel={handleCancel}
+		/>
+	</Pending>
 </TabPanel>
diff --git a/web/src/routes/[handle]/[repo]/pipelines/+page.svelte b/web/src/routes/[handle]/[repo]/pipelines/+page.svelte
index a695c2e9d..85a1f8803 100644
--- a/web/src/routes/[handle]/[repo]/pipelines/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/pipelines/+page.svelte
@@ -1,32 +1,41 @@
 <script lang="ts">
 	import PipelineList from "$lib/components/repo/pipelines/PipelineList.svelte";
 	import PipelineToolbar from "$lib/components/repo/pipelines/PipelineToolbar.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 	import TabPanel from "$lib/components/ui/TabPanel.svelte";
 	import Error from "$lib/components/ui/Error.svelte";
 
 	let { data } = $props();
 </script>
 
-<TabPanel padded={false} class="p-4">
-	<PipelineToolbar
-		ownerHandle={data.repo.ownerHandle}
-		repoName={data.repo.name}
-		filter={data.filter}
-		total={data.total}
-	/>
-</TabPanel>
-
-<div class="mt-2">
-	{#if data.spindleError}
-		<Error label={data.spindleError} />
-	{:else}
-		<PipelineList
-			ownerHandle={data.repo.ownerHandle}
-			ownerDid={data.repo.ownerDid}
-			repoName={data.repo.name}
-			pipelines={data.pipelines}
-			filtered={data.filtered}
-			forkLabels={data.forkLabels}
+<Pending>
+	<!-- an await at script level suspends the whole navigation batch; below the
+	     boundary the skeleton paints instead -->
+	{@const repo = await data.repo}
+	<TabPanel padded={false} class="p-4">
+		<PipelineToolbar
+			ownerHandle={repo.ownerHandle}
+			repoName={repo.name}
+			filter={data.filter}
+			total={data.total}
 		/>
-	{/if}
-</div>
+	</TabPanel>
+
+	<div class="mt-2">
+		<Pending>
+			{@const spindleError = await data.spindleError}
+			{#if spindleError}
+				<Error label={spindleError} />
+			{:else}
+				<PipelineList
+					ownerHandle={repo.ownerHandle}
+					ownerDid={repo.ownerDid}
+					repoName={repo.name}
+					pipelines={await data.pipelines}
+					filtered={await data.filtered}
+					forkLabels={data.forkLabels}
+				/>
+			{/if}
+		</Pending>
+	</div>
+</Pending>
diff --git a/web/src/routes/[handle]/[repo]/pipelines/+page.ts b/web/src/routes/[handle]/[repo]/pipelines/+page.ts
index 59c2cf8e2..ce07497de 100644
--- a/web/src/routes/[handle]/[repo]/pipelines/+page.ts
+++ b/web/src/routes/[handle]/[repo]/pipelines/+page.ts
@@ -1,6 +1,7 @@
 import { createSpindleClient, queryPipelines, toPipelineSummary } from "$lib/api/spindle";
 import { createBobbinClient } from "$lib/api/client";
 import { resolveForkRepoLabels } from "$lib/api/repo";
+import { stream } from "$lib/api/load";
 import { matchesQuery, type PipelineFilter } from "$lib/components/repo/pipelines/pipeline";
 import type { PipelineSummary } from "$lib/components/repo/types";
 import type { Did } from "@atcute/lexicons";
@@ -14,75 +15,88 @@ const PIPELINE_LIMIT = 30;
 
 export const load: PageLoad = async (event) => {
 	const parent = await event.parent();
+	const repo = Promise.resolve(parent.repo);
 	const requested = event.url.searchParams.get("trigger") as PipelineFilter | null;
 	const filter = requested && FILTERS.includes(requested) ? requested : "all";
 	const query = event.url.searchParams.get("q") ?? "";
 
-	const empty = {
-		filter,
-		query,
-		pipelines: [] as PipelineSummary[],
-		forkLabels: Promise.resolve({}),
-		total: 0,
-		// the setup steps only make sense on the plain unfiltered view, otherwise
-		// an empty result reads as "nothing matched"
-		filtered: filter !== "all" || query !== "",
-		spindleError: null as string | null
-	};
-
-	const { spindle, repoDid } = parent.repo;
-
-	if (!spindle || !repoDid) return empty;
+	const queryResult = repo.then(async (repo) => {
+		const { spindle, repoDid } = repo;
+		if (!spindle || !repoDid) return { page: null, spindleError: null };
 
-	const ctx = createSpindleClient(spindle, event.fetch);
-
-	let page;
-	try {
-		page = await queryPipelines(ctx, {
-			repo: repoDid as Did,
-			kinds: filter === "all" ? undefined : [filter],
-			limit: PIPELINE_LIMIT
-		});
-	} catch {
-		// a spindle that is down or slow shouldn't take out the tab, say so instead
-		return { ...empty, spindleError: `Could not reach ${spindle}` };
-	}
+		const ctx = createSpindleClient(spindle, event.fetch);
+		try {
+			const page = await queryPipelines(ctx, {
+				repo: repoDid as Did,
+				kinds: filter === "all" ? undefined : [filter],
+				limit: PIPELINE_LIMIT
+			});
+			return { page, spindleError: null };
+		} catch {
+			return { page: null, spindleError: `Could not reach ${spindle}` };
+		}
+	});
 
 	// the lexicon says pipelines is required, but the spindle sends null for an
 	// empty result
-	const pipelines = (page.pipelines ?? [])
-		// a spindle answering for a different repo is misconfigured or lying
-		.filter((pipeline) => pipeline.repo === repoDid)
-		.map((pipeline) => toPipelineSummary(pipeline, repoDid))
-		.filter((pipeline) => matchesQuery(pipeline, query));
+	const pipelines = Promise.all([repo, queryResult]).then(([repo, result]) => {
+		const page = result.page;
+		if (!page || !repo.repoDid) return [] as PipelineSummary[];
+		return (
+			(page.pipelines ?? [])
+				// a spindle answering for a different repo is misconfigured or lying
+				.filter((pipeline) => pipeline.repo === repo.repoDid)
+				.map((pipeline) => toPipelineSummary(pipeline, repo.repoDid!))
+				.filter((pipeline) => matchesQuery(pipeline, query))
+		);
+	});
 
-	const forkDids = [
-		...new Set(
-			pipelines.flatMap((pipeline) =>
-				pipeline.trigger.kind === "pull_request" && pipeline.trigger.sourceRepo
-					? [pipeline.trigger.sourceRepo]
-					: []
-			)
-		)
-	];
 	// fork labels stream in behind the list, cards show a skeleton until bobbin
 	// answers. a failed resolve leaves the bare branch
-	const forkLabels =
-		forkDids.length > 0
-			? resolveForkRepoLabels(
-					createBobbinClient({ serviceUrl: parent.publicConfig.bobbinUrl, fetch: event.fetch }),
-					forkDids
-				).catch(() => ({}))
-			: Promise.resolve({});
+	const forkLabels = pipelines
+		.then((list) => {
+			const forkDids = [
+				...new Set(
+					list.flatMap((pipeline) =>
+						pipeline.trigger.kind === "pull_request" && pipeline.trigger.sourceRepo
+							? [pipeline.trigger.sourceRepo]
+							: []
+					)
+				)
+			];
+			return forkDids.length > 0
+				? resolveForkRepoLabels(
+						createBobbinClient({
+							serviceUrl: parent.publicConfig.bobbinUrl,
+							fetch: event.fetch
+						}),
+						forkDids
+					).catch(() => ({}))
+				: {};
+		})
+		.catch(() => ({}));
+
+	// the spindle counts every run matching the tab, the query narrows here
+	const total = Promise.all([queryResult, pipelines]).then(([result, list]) => {
+		const page = result.page;
+		if (!page) return 0;
+		return query === "" ? page.total : list.length;
+	});
+
+	const filtered = queryResult.then(({ page }) => {
+		if (!page) return filter !== "all" || query !== "";
+		return page.total > 0 || filter !== "all" || query !== "";
+	});
+
+	const spindleError = queryResult.then(({ spindleError }) => spindleError);
 
 	return {
 		filter,
 		query,
-		pipelines,
-		forkLabels,
-		// the spindle counts every run matching the tab, the query narrows here
-		total: query === "" ? page.total : pipelines.length,
-		filtered: page.total > 0 || filter !== "all" || query !== "",
-		spindleError: null
+		pipelines: stream(pipelines),
+		forkLabels: stream(forkLabels),
+		total: stream(total),
+		filtered: stream(filtered),
+		spindleError: stream(spindleError)
 	};
 };
diff --git a/web/src/routes/[handle]/[repo]/pipelines/[pipeline]/workflow/[workflow]/+page.svelte b/web/src/routes/[handle]/[repo]/pipelines/[pipeline]/workflow/[workflow]/+page.svelte
index 120680b46..1a04777aa 100644
--- a/web/src/routes/[handle]/[repo]/pipelines/[pipeline]/workflow/[workflow]/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/pipelines/[pipeline]/workflow/[workflow]/+page.svelte
@@ -1,49 +1,25 @@
 <script lang="ts">
-	import PipelineCardContent from "$lib/components/repo/pipelines/PipelineCardContent.svelte";
-	import WorkflowView from "$lib/components/repo/pipelines/WorkflowView.svelte";
-	import { isLive } from "$lib/components/repo/pipelines/pipeline";
-	import { LogStream } from "$lib/components/repo/pipelines/logStream.svelte";
-	import TabPanel from "$lib/components/ui/TabPanel.svelte";
+	import { page } from "$app/state";
+	import WorkflowRunView from "$lib/components/repo/pipelines/WorkflowRunView.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 
 	let { data } = $props();
-
-	const stream = $derived(
-		new LogStream({
-			host: data.spindle,
-			pipeline: data.pipeline.id,
-			workflow: data.workflow.name,
-			live: isLive(data.workflow.status)
-		})
-	);
-
-	$effect(() => {
-		const current = stream;
-		current.open();
-		return () => current.destroy();
-	});
 </script>
 
 <svelte:head>
-	<title>{data.workflow.name} · Pipeline {data.pipeline.id} · Tangled</title>
+	<title>{page.params.workflow} · Pipeline {page.params.pipeline} · Tangled</title>
 </svelte:head>
 
-<TabPanel padded={false} class="flex flex-col gap-2 p-4">
-	<PipelineCardContent
-		ownerHandle={data.repo.ownerHandle}
-		repoName={data.repo.name}
-		pipeline={data.pipeline}
-		link={true}
-	/>
-</TabPanel>
-
-<div class="mt-2">
-	<WorkflowView
-		ownerHandle={data.repo.ownerHandle}
-		repoName={data.repo.name}
-		pipeline={data.pipeline}
-		workflow={data.workflow}
-		steps={stream.steps}
-		status={stream.status}
-		error={stream.error}
+<Pending>
+	{@const repo = await data.repo}
+	{@const pipeline = await data.pipeline}
+	{@const workflow = await data.workflow}
+	{@const spindle = await data.spindle}
+	<WorkflowRunView
+		ownerHandle={repo.ownerHandle}
+		repoName={repo.name}
+		{spindle}
+		{pipeline}
+		{workflow}
 	/>
-</div>
+</Pending>
diff --git a/web/src/routes/[handle]/[repo]/pipelines/[pipeline]/workflow/[workflow]/+page.ts b/web/src/routes/[handle]/[repo]/pipelines/[pipeline]/workflow/[workflow]/+page.ts
index 37e5aa4b9..3a82a204c 100644
--- a/web/src/routes/[handle]/[repo]/pipelines/[pipeline]/workflow/[workflow]/+page.ts
+++ b/web/src/routes/[handle]/[repo]/pipelines/[pipeline]/workflow/[workflow]/+page.ts
@@ -1,26 +1,34 @@
 import { error } from "@sveltejs/kit";
+import { stream } from "$lib/api/load";
 import { createSpindleClient, getPipeline, toPipelineSummary } from "$lib/api/spindle";
 import type { PageLoad } from "./$types";
 
 export const load: PageLoad = async (event) => {
 	const parent = await event.parent();
-	const { spindle, repoDid } = parent.repo;
+	const repo = Promise.resolve(parent.repo);
 
-	if (!spindle || !repoDid) error(404, "This repo has no spindle");
+	const loaded = repo.then(async (repo) => {
+		const { spindle, repoDid } = repo;
+		if (!spindle || !repoDid) error(404, "This repo has no spindle");
 
-	const ctx = createSpindleClient(spindle, event.fetch);
+		const ctx = createSpindleClient(spindle, event.fetch);
 
-	const result = await getPipeline(ctx, { pipeline: event.params.pipeline }).catch(() => {
-		// unknown id or dead spindle is a 404 for this page
-		error(404, `Could not load pipeline ${event.params.pipeline} from ${spindle}`);
-	});
+		const result = await getPipeline(ctx, { pipeline: event.params.pipeline }).catch(() => {
+			error(404, `Could not load pipeline ${event.params.pipeline} from ${spindle}`);
+		});
+
+		if (result.repo !== repoDid) error(404, "Pipeline belongs to another repo");
 
-	// spindle returning another repo is invalid
-	if (result.repo !== repoDid) error(404, "Pipeline belongs to another repo");
+		const pipeline = toPipelineSummary(result, repoDid);
+		const workflow = pipeline.workflows.find((each) => each.name === event.params.workflow);
+		if (!workflow) error(404, `No workflow named ${event.params.workflow} in this run`);
 
-	const pipeline = toPipelineSummary(result, repoDid);
-	const workflow = pipeline.workflows.find((each) => each.name === event.params.workflow);
-	if (!workflow) error(404, `No workflow named ${event.params.workflow} in this run`);
+		return { spindle, pipeline, workflow };
+	});
 
-	return { spindle, pipeline, workflow };
+	return {
+		spindle: stream(loaded.then((l) => l.spindle)),
+		pipeline: stream(loaded.then((l) => l.pipeline)),
+		workflow: stream(loaded.then((l) => l.workflow))
+	};
 };
diff --git a/web/src/routes/[handle]/[repo]/pipelines/pipelines.test.ts b/web/src/routes/[handle]/[repo]/pipelines/pipelines.test.ts
index b366f11cb..c922a1506 100644
--- a/web/src/routes/[handle]/[repo]/pipelines/pipelines.test.ts
+++ b/web/src/routes/[handle]/[repo]/pipelines/pipelines.test.ts
@@ -54,7 +54,7 @@ const makeEvent = ({
 				repo: {
 					spindle: spindle ?? undefined,
 					repoDid: REPO_DID,
-					ownerHandle3: "tangled.org",
+					ownerHandle: "tangled.org",
 					name: "core"
 				}
 			})
@@ -74,7 +74,9 @@ describe("pipelines load", () => {
 		const { event, fetchMock } = makeEvent({ spindle: null });
 		const data = await runLoad(event);
 		expect(fetchMock).not.toHaveBeenCalled();
-		expect(data).toMatchObject({ pipelines: [], total: 0, filtered: false, spindleError: null });
+		expect(await data.pipelines).toEqual([]);
+		expect(await data.total).toBe(0);
+		expect(await data.filtered).toBe(false);
 	});
 
 	it("maps a real push run and marks the plain view unfiltered", async () => {
@@ -82,53 +84,56 @@ describe("pipelines load", () => {
 		fetchMock.mockResolvedValue(jsonResponse({ pipelines: [pushPipeline()], total: 1 }));
 
 		const data = await runLoad(event);
-		expect(data.pipelines).toHaveLength(1);
-		expect(data.pipelines[0]).toMatchObject({
+		const pipelines = await data.pipelines;
+		expect(pipelines).toHaveLength(1);
+		expect(pipelines[0]).toMatchObject({
 			trigger: { kind: "push", targetRef: "master" },
 			workflows: [{ name: "build.yml", status: "success", duration: 120_000 }]
 		});
-		expect(data.total).toBe(1);
+		expect(await data.total).toBe(1);
 		// setup steps belong to a repo that never ran anything, with runs the
 		// flag just has to keep them hidden
-		expect(data.filtered).toBe(true);
+		expect(await data.filtered).toBe(true);
 	});
 
 	it("tolerates a null pipelines array, which is what the spindle sends when empty", async () => {
 		const { event, fetchMock } = makeEvent();
 		fetchMock.mockResolvedValue(jsonResponse({ pipelines: null, total: 0 }));
 		const data = await runLoad(event);
-		expect(data.pipelines).toEqual([]);
+		expect(await data.pipelines).toEqual([]);
 	});
 
 	it("drops runs that answer for a different repo", async () => {
 		const { event, fetchMock } = makeEvent();
 		fetchMock.mockResolvedValue(
 			jsonResponse({
-				pipelines: [pushPipeline(), pushPipeline({ id: "other", repo: "did:plc:someoneelse" })],
+				pipelines: [
+					pushPipeline(),
+					pushPipeline({ id: "other", repo: "did:plc:someoneelse" })
+				],
 				total: 2
 			})
 		);
 		const data = await runLoad(event);
-		expect(data.pipelines.map((p: PipelineSummary) => p.id)).toEqual(["3mrf4wqyxv22"]);
+		const pipelines = await data.pipelines;
+		expect(pipelines.map((p: PipelineSummary) => p.id)).toEqual(["3mrf4wqyxv22"]);
 	});
 
 	it("narrows by the query and counts what survived, not the spindle total", async () => {
 		const { event, fetchMock } = makeEvent({ search: "?q=nope" });
 		fetchMock.mockResolvedValue(jsonResponse({ pipelines: [pushPipeline()], total: 5 }));
 		const data = await runLoad(event);
-		expect(data.pipelines).toEqual([]);
-		expect(data.total).toBe(0);
-		expect(data.filtered).toBe(true);
+		expect(await data.pipelines).toEqual([]);
+		expect(await data.total).toBe(0);
+		expect(await data.filtered).toBe(true);
 	});
 
 	it("says so instead of throwing when the spindle is down", async () => {
 		const { event, fetchMock } = makeEvent();
 		fetchMock.mockRejectedValue(new Error("connection refused"));
 		const data = await runLoad(event);
-		expect(data).toMatchObject({
-			pipelines: [],
-			spindleError: "Could not reach spindle.tangled.sh"
-		});
+		expect(await data.pipelines).toEqual([]);
+		expect(await data.spindleError).toBe("Could not reach spindle.tangled.sh");
 	});
 
 	it("streams fork labels for pulls that came from another repo", async () => {
@@ -176,7 +181,8 @@ describe("pipelines load", () => {
 			);
 
 		const data = await runLoad(event);
-		expect(data.pipelines[0].trigger).toMatchObject({ sourceRepo: "did:plc:forkrepo" });
+		const pipelines = await data.pipelines;
+		expect(pipelines[0].trigger).toMatchObject({ sourceRepo: "did:plc:forkrepo" });
 		await expect(data.forkLabels).resolves.toEqual({ "did:plc:forkrepo": "fork.example/core" });
 		// one call to the spindle, one to bobbin's enrich
 		expect(fetchMock).toHaveBeenCalledTimes(2);
@@ -202,7 +208,8 @@ describe("pipelines load", () => {
 		);
 
 		const data = await runLoad(event);
-		expect(data.pipelines[0].trigger).not.toHaveProperty("sourceRepo");
+		const pipelines = await data.pipelines;
+		expect(pipelines[0].trigger).not.toHaveProperty("sourceRepo");
 		await expect(data.forkLabels).resolves.toEqual({});
 		expect(fetchMock).toHaveBeenCalledTimes(1);
 	});
diff --git a/web/src/routes/[handle]/[repo]/pulls/+page.svelte b/web/src/routes/[handle]/[repo]/pulls/+page.svelte
index 0cc232b9d..10e3d12d4 100644
--- a/web/src/routes/[handle]/[repo]/pulls/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/pulls/+page.svelte
@@ -1,22 +1,33 @@
 <script lang="ts">
 	import PullList from "$lib/components/repo/pulls/PullList.svelte";
 	import PullToolbar from "$lib/components/repo/pulls/PullToolbar.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 	import TabPanel from "$lib/components/ui/TabPanel.svelte";
 
 	let { data } = $props();
 </script>
 
-<TabPanel padded={false} class="p-4">
-	<PullToolbar
-		ownerHandle={data.repo.ownerHandle}
-		repoName={data.repo.name}
-		state={data.state}
-		openCount={data.openCount}
-		closedCount={data.closedCount}
-		mergedCount={data.mergedCount}
-	/>
-</TabPanel>
+<Pending>
+	<!-- an await here suspends the whole navigation, so the awaits live below the boundary -->
+	{@const repo = await data.repo}
+	<TabPanel padded={false} class="p-4">
+		<PullToolbar
+			ownerHandle={repo.ownerHandle}
+			repoName={repo.name}
+			state={data.state}
+			openCount={data.openCount}
+			closedCount={data.closedCount}
+			mergedCount={data.mergedCount}
+		/>
+	</TabPanel>
 
-<div class="mt-2">
-	<PullList ownerHandle={data.repo.ownerHandle} repoName={data.repo.name} pulls={data.pulls} />
-</div>
+	<div class="mt-2">
+		<Pending>
+			<PullList
+				ownerHandle={repo.ownerHandle}
+				repoName={repo.name}
+				pulls={await data.pulls}
+			/>
+		</Pending>
+	</div>
+</Pending>
diff --git a/web/src/routes/[handle]/[repo]/pulls/+page.ts b/web/src/routes/[handle]/[repo]/pulls/+page.ts
index 064bc6330..93a4726ec 100644
--- a/web/src/routes/[handle]/[repo]/pulls/+page.ts
+++ b/web/src/routes/[handle]/[repo]/pulls/+page.ts
@@ -3,59 +3,68 @@ import { count } from "$lib/api/count";
 import { PULL_AUTHOR_DOCS } from "$lib/api/descriptors";
 import { authorOf, enrich, target } from "$lib/api/enrich";
 import type { PullListPage, PullState } from "$lib/api/records";
+import { stream } from "$lib/api/load";
 import { rkeyFromUri } from "$lib/api/uri";
 import type { PullSummary } from "$lib/components/repo/types";
 import type { PageLoad } from "./$types";
 
 export const load: PageLoad = async (event) => {
 	const parent = await event.parent();
+	const repo = Promise.resolve(parent.repo);
 	const raw = event.url.searchParams.get("state");
 	const state: PullState = raw === "closed" || raw === "merged" ? raw : "open";
-	const repoDid = parent.repo.repoDid;
-
-	// no repoDid means bobbin never indexed this repo, so there is nothing to list
-	if (!repoDid) {
-		return {
-			state,
-			pulls: [] as PullSummary[],
-			openCount: parent.counts.pulls,
-			mergedCount: 0,
-			closedCount: 0
-		};
-	}
-
-	const ctx = createBobbinClient({ serviceUrl: parent.publicConfig.bobbinUrl, fetch: event.fetch });
+	const ctx = createBobbinClient({
+		serviceUrl: parent.publicConfig.bobbinUrl,
+		fetch: event.fetch
+	});
 
-	const [page, closed, merged] = await Promise.all([
-		enrich<PullListPage>(ctx, {
+	// returned unawaited so the page can paint its skeleton, ssr still waits for them
+	const pulls = repo.then(async (r) => {
+		const repoDid = r.repoDid;
+		if (!repoDid) return [] as PullSummary[];
+		return enrich<PullListPage>(ctx, {
 			xrpc: "sh.tangled.repo.listPulls",
 			params: { subject: repoDid, status: state },
 			enrich: [target(PULL_AUTHOR_DOCS, ["items[].uri"])]
-		}),
-		// the layout only knows the open count, the closed tab needs its own
-		count(ctx, "sh.tangled.repo.countPulls", repoDid, { status: "closed" }).catch(() => null),
-		count(ctx, "sh.tangled.repo.countPulls", repoDid, { status: "merged" }).catch(() => null)
-	]);
+		}).then((page) =>
+			page.output.items.map((item): PullSummary => {
+				const author = authorOf(page.data, item.uri, PULL_AUTHOR_DOCS);
+				return {
+					uri: item.uri,
+					rkey: rkeyFromUri(item.uri),
+					title: item.value.title,
+					state: item.state === "closed" || item.state === "merged" ? item.state : "open",
+					authorDid: author.did,
+					authorHandle: author.handle,
+					createdAt: item.value.createdAt,
+					commentCount: item.commentCount
+				};
+			})
+		);
+	});
+
+	// the layout only knows the open count, the closed tab needs its own
+	const closedCount = repo.then(async (r) => {
+		const repoDid = r.repoDid;
+		if (!repoDid) return 0;
+		return count(ctx, "sh.tangled.repo.countPulls", repoDid, { status: "closed" })
+			.then((c) => c?.count ?? 0)
+			.catch(() => 0);
+	});
 
-	const pulls: PullSummary[] = page.output.items.map((item): PullSummary => {
-		const author = authorOf(page.data, item.uri, PULL_AUTHOR_DOCS);
-		return {
-			uri: item.uri,
-			rkey: rkeyFromUri(item.uri),
-			title: item.value.title,
-			state: item.state === "closed" || item.state === "merged" ? item.state : "open",
-			authorDid: author.did,
-			authorHandle: author.handle,
-			createdAt: item.value.createdAt,
-			commentCount: item.commentCount
-		};
+	const mergedCount = repo.then(async (r) => {
+		const repoDid = r.repoDid;
+		if (!repoDid) return 0;
+		return count(ctx, "sh.tangled.repo.countPulls", repoDid, { status: "merged" })
+			.then((c) => c?.count ?? 0)
+			.catch(() => 0);
 	});
 
 	return {
 		state,
-		pulls,
-		openCount: parent.counts.pulls,
-		closedCount: closed?.count ?? 0,
-		mergedCount: merged?.count ?? 0
+		pulls: stream(pulls),
+		openCount: stream(Promise.resolve(parent.counts).then((c) => c.pulls)),
+		closedCount: stream(closedCount),
+		mergedCount: stream(mergedCount)
 	};
 };
diff --git a/web/src/routes/[handle]/[repo]/pulls/[aturi]/+layout.ts b/web/src/routes/[handle]/[repo]/pulls/[aturi]/+layout.ts
index f19e8e38f..c8b5997e5 100644
--- a/web/src/routes/[handle]/[repo]/pulls/[aturi]/+layout.ts
+++ b/web/src/routes/[handle]/[repo]/pulls/[aturi]/+layout.ts
@@ -11,10 +11,12 @@ import type { LayoutLoad } from "./$types";
 
 export const load: LayoutLoad = async (event) => {
 	const parent = await event.parent();
+	const repo = await parent.repo;
+	const defaultBranch = await repo.defaultBranch;
 	const uri = event.params.aturi;
 	if (!uri.startsWith("at://")) error(404, "Pull request not found");
 
-	const repoDid = parent.repo.repoDid;
+	const repoDid = repo.repoDid;
 	if (!repoDid) error(404, "Pull request not found");
 
 	const ctx = createBobbinClient({
@@ -23,8 +25,8 @@ export const load: LayoutLoad = async (event) => {
 	});
 
 	const markup: MarkupContext = {
-		repo: `${parent.repo.ownerHandle}/${parent.repo.name}`,
-		ref: parent.repo.defaultBranch,
+		repo: `${repo.ownerHandle}/${repo.name}`,
+		ref: defaultBranch,
 		host: event.url.host
 	};
 
@@ -65,6 +67,7 @@ export const load: LayoutLoad = async (event) => {
 	);
 
 	return {
+		repo,
 		comments,
 		markup,
 		sourceRepoDid: pullView.source?.repo?.did ?? repoDid,
diff --git a/web/src/routes/[handle]/[repo]/pulls/new/+page.svelte b/web/src/routes/[handle]/[repo]/pulls/new/+page.svelte
index 3c9252581..537cfa38c 100644
--- a/web/src/routes/[handle]/[repo]/pulls/new/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/pulls/new/+page.svelte
@@ -1,31 +1,48 @@
 <script lang="ts">
 	import { page } from "$app/state";
 	import PullCompose from "$lib/components/repo/pulls/PullCompose.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 	import TabPanel from "$lib/components/ui/TabPanel.svelte";
 
 	let { data } = $props();
 
-	const markup = $derived({
-		repo: `${data.repo.ownerHandle}/${data.repo.name}`,
-		ref: data.repo.defaultBranch,
-		host: page.url.host,
-		camo: data.publicConfig?.camoEnabled
+	let defaultBranch = $state("main");
+	$effect(() => {
+		void Promise.resolve(data.repo)
+			.then((r) => r.defaultBranch)
+			.then((b) => {
+				defaultBranch = b;
+			});
 	});
 </script>
 
 <svelte:head>
-	<title>New pull &middot; {data.repo.ownerHandle}/{data.repo.name} &middot; Tangled</title>
+	<title
+		>New pull &middot; {decodeURIComponent(page.params.handle ?? "")}/{decodeURIComponent(
+			page.params.repo ?? ""
+		)} &middot; Tangled</title
+	>
 </svelte:head>
 
 <TabPanel class="py-6">
-	<PullCompose
-		{markup}
-		ownerHandle={data.repo.ownerHandle}
-		repoName={data.repo.name}
-		repoDid={data.repo.repoDid ?? ""}
-		repo={data.repo}
-		bobbinUrl={data.publicConfig.bobbinUrl}
-		knotMirrorUrl={data.publicConfig.knotMirrorUrl}
-		compose={data}
-	/>
+	<Pending>
+		{@const repo = await data.repo}
+		{@const compose = await data.compose}
+		{@const markup = {
+			repo: `${repo.ownerHandle}/${repo.name}`,
+			ref: defaultBranch,
+			host: page.url.host,
+			camo: data.publicConfig?.camoEnabled
+		}}
+		<PullCompose
+			{markup}
+			ownerHandle={repo.ownerHandle}
+			repoName={repo.name}
+			repoDid={repo.repoDid ?? ""}
+			{repo}
+			bobbinUrl={data.publicConfig.bobbinUrl}
+			knotMirrorUrl={data.publicConfig.knotMirrorUrl}
+			{compose}
+		/>
+	</Pending>
 </TabPanel>
diff --git a/web/src/routes/[handle]/[repo]/pulls/new/+page.ts b/web/src/routes/[handle]/[repo]/pulls/new/+page.ts
index ce7880efe..25c29f1d0 100644
--- a/web/src/routes/[handle]/[repo]/pulls/new/+page.ts
+++ b/web/src/routes/[handle]/[repo]/pulls/new/+page.ts
@@ -1,16 +1,20 @@
-import { error } from "@sveltejs/kit";
+import { stream } from "$lib/api/load";
 import { loadCompose } from "$lib/api/pullCompose";
 import type { PageLoad } from "./$types";
 
 export const load: PageLoad = async (event) => {
 	const parent = await event.parent();
-	if (!parent.repo.repoDid) error(404, "This repository has not been indexed yet");
+	const repo = Promise.resolve(parent.repo);
 
-	return loadCompose({
-		config: parent.publicConfig,
-		repo: parent.repo,
-		viewer: parent.auth,
-		params: event.url.searchParams,
-		fetch: event.fetch
-	});
+	return {
+		compose: stream(
+			loadCompose({
+				config: parent.publicConfig,
+				repo,
+				viewer: parent.auth,
+				params: event.url.searchParams,
+				fetch: event.fetch
+			})
+		)
+	};
 };
diff --git a/web/src/routes/[handle]/[repo]/pulls/pulls.test.ts b/web/src/routes/[handle]/[repo]/pulls/pulls.test.ts
index df585275b..1906a4303 100644
--- a/web/src/routes/[handle]/[repo]/pulls/pulls.test.ts
+++ b/web/src/routes/[handle]/[repo]/pulls/pulls.test.ts
@@ -49,8 +49,13 @@ const makeEvent = () => {
 			fetch: fetchMock,
 			parent: async () => ({
 				publicConfig: { bobbinUrl: "https://bobbin.test" },
-				repo: { repoDid: REPO_DID, ownerHandle: "alice.test", name: "core" },
-				counts: { pulls: 1 }
+				repo: {
+					repoDid: REPO_DID,
+					ownerHandle: "alice.test",
+					name: "core",
+					defaultBranch: Promise.resolve("main")
+				},
+				counts: Promise.resolve({ stars: 0, issues: 0, pulls: 1, forks: 0 })
 			})
 		} as never
 	};
@@ -61,7 +66,8 @@ describe("pulls load", () => {
 		const { event, fetchMock } = makeEvent();
 		const data = (await load(event))!;
 
-		expect(data.pulls[0]).toMatchObject({
+		const pulls = await data.pulls;
+		expect(pulls[0]).toMatchObject({
 			authorDid: AUTHOR_DID,
 			authorHandle: "andrew.heiss.phd",
 			state: "open"
diff --git a/web/src/routes/[handle]/[repo]/settings/+layout.svelte b/web/src/routes/[handle]/[repo]/settings/+layout.svelte
index fb2e78dcb..b108de935 100644
--- a/web/src/routes/[handle]/[repo]/settings/+layout.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/+layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { page } from "$app/state";
+	import Pending from "$lib/components/ui/Pending.svelte";
 	import type { SettingsNavItem } from "$lib/components/settings/SettingsNav.svelte";
 	import SettingsPanel from "$lib/components/settings/SettingsPanel.svelte";
 	import SlidersHorizontal from "$icon/sliders-horizontal";
@@ -10,22 +11,23 @@
 
 	let { children, data } = $props();
 
-	const base = $derived(`/${data.repo.ownerHandle}/${data.repo.name}/settings`);
+	// drill-downs keep the parent tab active, so only the segment after settings matters
+	const segment = $derived(page.route.id?.split("/")[4] ?? "");
+</script>
 
-	const items = $derived<SettingsNavItem[]>([
+<Pending>
+	<!-- an await here suspends the whole navigation, so the awaits live below the boundary -->
+	{@const repo = await data.repo}
+	{@const base = `/${repo.ownerHandle}/${repo.name}/settings`}
+	{@const items: SettingsNavItem[] = [
 		{ id: "general", label: "General", href: base, icon: SlidersHorizontal },
 		{ id: "access", label: "Access", href: `${base}/access`, icon: UsersRound },
 		{ id: "pipelines", label: "Pipelines", href: `${base}/pipelines`, icon: Layers },
 		{ id: "hooks", label: "Hooks", href: `${base}/hooks`, icon: Webhook },
 		{ id: "sites", label: "Sites", href: `${base}/sites`, icon: Globe }
-	]);
-
-	// route ids look like /[handle]/[repo]/settings/<tab>/…, and a drill-down keeps
-	// its parent tab active, so only the segment right after `settings` matters
-	const segment = $derived(page.route.id?.split("/")[4] ?? "");
-	const active = $derived(items.some((i) => i.id === segment) ? segment : "general");
-</script>
-
-<SettingsPanel {items} {active} label="Repository settings">
-	{@render children()}
-</SettingsPanel>
+	]}
+	{@const active = items.some((i) => i.id === segment) ? segment : "general"}
+	<SettingsPanel {items} {active} label="Repository settings">
+		{@render children()}
+	</SettingsPanel>
+</Pending>
diff --git a/web/src/routes/[handle]/[repo]/settings/+page.svelte b/web/src/routes/[handle]/[repo]/settings/+page.svelte
index 6b212491e..40df48779 100644
--- a/web/src/routes/[handle]/[repo]/settings/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { untrack } from "svelte";
 	import { resolve } from "$app/paths";
 	import Button from "$lib/components/ui/Button.svelte";
 	import Input from "$lib/components/ui/Input.svelte";
 	import type { InputTag } from "$lib/components/ui/inputField";
+	import Pending from "$lib/components/ui/Pending.svelte";
 	import Select from "$lib/components/ui/Select.svelte";
 	import Toggle from "$lib/components/ui/Toggle.svelte";
 	import SettingsEmpty from "$lib/components/settings/SettingsEmpty.svelte";
@@ -19,7 +19,6 @@
 
 	let { data } = $props();
 
-	const base = $derived(`/${data.repo.ownerHandle}/${data.repo.name}/settings`);
 	const path = (p: string) => resolve(p as "/");
 
 	// mocked — repo settings have no write path in the rewrite yet, so the form is
@@ -28,12 +27,19 @@
 		description: "",
 		website: "",
 		topics: "",
-		defaultBranch: untrack(() => data.repo.defaultBranch)
+		defaultBranch: "main"
 	};
 	let form = $state({ ...initial });
 	const dirty = $derived(JSON.stringify(form) !== JSON.stringify(initial));
 	const reset = () => (form = { ...initial });
 
+	$effect(() => {
+		void Promise.resolve(data.repo)
+			.then((r) => r.defaultBranch)
+			.then((b) => {
+				if (!dirty) form.defaultBranch = b;
+			});
+	});
 	let labels = $state([
 		{
 			name: "documentation",
@@ -53,7 +59,12 @@
 			meta: "Basic · sh.tangled.repo.issue",
 			subscribed: true
 		},
-		{ name: "wontfix", color: "#3b82f6", meta: "Basic · sh.tangled.repo.issue", subscribed: true },
+		{
+			name: "wontfix",
+			color: "#3b82f6",
+			meta: "Basic · sh.tangled.repo.issue",
+			subscribed: true
+		},
 		{
 			name: "assignee",
 			color: "#10b981",
@@ -66,127 +77,138 @@
 		labels = labels.map((l) => ({ ...l, subscribed: false }));
 	};
 
-	const branches = $derived([data.repo.defaultBranch, "develop", "trunk"]);
+	const branches = $derived([form.defaultBranch, "develop", "trunk"]);
 
 	let topics = $state<InputTag[]>([{ value: "svelte" }, { value: "motion" }]);
 </script>
 
-<div class="flex min-h-9 w-full items-center justify-between gap-4">
-	<h1 class="typography-heading-2 text-foreground-default">General</h1>
-	<SettingsSaveBar {dirty} onreset={reset} />
-</div>
-
-<div class="flex w-full flex-col gap-10">
-	<div class="flex w-full flex-col gap-4">
-		<SettingsList>
-			<SettingsRow title="Description" stack>
-				<Input
-					bind:value={form.description}
-					placeholder="What this project is about"
-					class="w-full sm:w-80"
-				/>
-			</SettingsRow>
-			<SettingsRow title="Website" stack>
-				<Input bind:value={form.website} placeholder="URL" class="w-full sm:w-80" />
-			</SettingsRow>
-			<SettingsRow title="Topics" description="List of topics separated by spaces." stack>
-				<Input
-					rich
-					bind:tags={topics}
-					commitOn={["space", "enter"]}
-					label="Topics"
-					placeholder="Add a topic"
-					class="w-full sm:w-80"
-				/>
-			</SettingsRow>
-		</SettingsList>
+<Pending>
+	<!-- an await here suspends the whole navigation, so the awaits live below the boundary -->
+	{@const repo = await data.repo}
+	{@const base = `/${repo.ownerHandle}/${repo.name}/settings`}
+	<div class="flex min-h-9 w-full items-center justify-between gap-4">
+		<h1 class="typography-heading-2 text-foreground-default">General</h1>
+		<SettingsSaveBar {dirty} onreset={reset} />
+	</div>
+
+	<div class="flex w-full flex-col gap-10">
+		<div class="flex w-full flex-col gap-4">
+			<SettingsList>
+				<SettingsRow title="Description" stack>
+					<Input
+						bind:value={form.description}
+						placeholder="What this project is about"
+						class="w-full sm:w-80"
+					/>
+				</SettingsRow>
+				<SettingsRow title="Website" stack>
+					<Input bind:value={form.website} placeholder="URL" class="w-full sm:w-80" />
+				</SettingsRow>
+				<SettingsRow title="Topics" description="List of topics separated by spaces." stack>
+					<Input
+						rich
+						bind:tags={topics}
+						commitOn={["space", "enter"]}
+						label="Topics"
+						placeholder="Add a topic"
+						class="w-full sm:w-80"
+					/>
+				</SettingsRow>
+			</SettingsList>
+
+			<SettingsList>
+				<SettingsRow
+					title="Default branch"
+					description={[
+						'The default branch is considered the "base" branch in your repository, against which all pull requests and code commits are automatically made, unless you specify a different branch.'
+					]}
+					stack
+				>
+					<Select
+						rich
+						bind:value={form.defaultBranch}
+						options={branches.map((branch) => ({ value: branch }))}
+						label="Default branch"
+						searchPlaceholder="Find a branch…"
+						emptyLabel="No branch matches"
+						class="w-full sm:w-80"
+					/>
+				</SettingsRow>
+			</SettingsList>
+		</div>
 
-		<SettingsList>
+		<SettingsSection title="Labels" framed={false} headingGap="4">
+			<div class="flex w-full flex-col gap-4">
+				<SettingsBlock
+					title="Default labels"
+					titleSize="large"
+					description={[
+						"Manage your issues and pulls by creating labels to categorize them. Only repository owners may configure labels.",
+						"You may choose to subscribe to default labels, or create entirely custom labels."
+					]}
+				>
+					{#snippet action()}
+						<Button icon={X} onclick={unsubscribeAll}>Unsubscribe all</Button>
+					{/snippet}
+
+					<SettingsList>
+						{#each labels as item (item.name)}
+							<SettingsRow>
+								{#snippet label()}
+									<span class="flex min-w-0 flex-col gap-1">
+										<span class="flex items-center gap-2">
+											<span
+												class="size-2 shrink-0 rounded-full"
+												style="background-color: {item.color}"
+												aria-hidden="true"
+											></span>
+											<span
+												class="typography-paragraph-regular text-foreground-default"
+											>
+												{item.name}
+											</span>
+										</span>
+										<span
+											class="typography-paragraph-regular text-foreground-muted"
+										>
+											{item.meta}
+										</span>
+									</span>
+								{/snippet}
+								<Toggle bind:checked={item.subscribed} aria-label={item.name} />
+							</SettingsRow>
+						{/each}
+					</SettingsList>
+				</SettingsBlock>
+
+				<SettingsBlock title="Custom labels" titleSize="large">
+					{#snippet action()}
+						<Button icon={Plus} href={path(`${base}/labels/new`)}
+							>Add custom label</Button
+						>
+					{/snippet}
+					<SettingsEmpty message="No custom labels added yet" />
+				</SettingsBlock>
+			</div>
+		</SettingsSection>
+
+		<hr class="w-full border-0 border-t border-border-default" />
+
+		<SettingsSection title="Danger zone" headingGap="4">
+			<SettingsRow title="Rename">
+				<Button icon={Pencil} href={path(`${base}/rename`)}>Rename repository</Button>
+			</SettingsRow>
 			<SettingsRow
-				title="Default branch"
-				description={[
-					'The default branch is considered the "base" branch in your repository, against which all pull requests and code commits are automatically made, unless you specify a different branch.'
-				]}
+				title="Delete"
+				description="Deleting a repository is irreversible and permanent. Be certain before deleting a repository."
 				stack
 			>
-				<Select
-					rich
-					bind:value={form.defaultBranch}
-					options={branches.map((branch) => ({ value: branch }))}
-					label="Default branch"
-					searchPlaceholder="Find a branch…"
-					emptyLabel="No branch matches"
-					class="w-full sm:w-80"
-				/>
+				<Button variant="danger" icon={Trash}>Delete repository</Button>
 			</SettingsRow>
-		</SettingsList>
+		</SettingsSection>
 	</div>
 
-	<SettingsSection title="Labels" framed={false} headingGap="4">
-		<div class="flex w-full flex-col gap-4">
-			<SettingsBlock
-				title="Default labels"
-				titleSize="large"
-				description={[
-					"Manage your issues and pulls by creating labels to categorize them. Only repository owners may configure labels.",
-					"You may choose to subscribe to default labels, or create entirely custom labels."
-				]}
-			>
-				{#snippet action()}
-					<Button icon={X} onclick={unsubscribeAll}>Unsubscribe all</Button>
-				{/snippet}
-
-				<SettingsList>
-					{#each labels as item (item.name)}
-						<SettingsRow>
-							{#snippet label()}
-								<span class="flex min-w-0 flex-col gap-1">
-									<span class="flex items-center gap-2">
-										<span
-											class="size-2 shrink-0 rounded-full"
-											style="background-color: {item.color}"
-											aria-hidden="true"
-										></span>
-										<span class="typography-paragraph-regular text-foreground-default">
-											{item.name}
-										</span>
-									</span>
-									<span class="typography-paragraph-regular text-foreground-muted">
-										{item.meta}
-									</span>
-								</span>
-							{/snippet}
-							<Toggle bind:checked={item.subscribed} aria-label={item.name} />
-						</SettingsRow>
-					{/each}
-				</SettingsList>
-			</SettingsBlock>
-
-			<SettingsBlock title="Custom labels" titleSize="large">
-				{#snippet action()}
-					<Button icon={Plus} href={path(`${base}/labels/new`)}>Add custom label</Button>
-				{/snippet}
-				<SettingsEmpty message="No custom labels added yet" />
-			</SettingsBlock>
-		</div>
-	</SettingsSection>
-
-	<hr class="w-full border-0 border-t border-border-default" />
-
-	<SettingsSection title="Danger zone" headingGap="4">
-		<SettingsRow title="Rename">
-			<Button icon={Pencil} href={path(`${base}/rename`)}>Rename repository</Button>
-		</SettingsRow>
-		<SettingsRow
-			title="Delete"
-			description="Deleting a repository is irreversible and permanent. Be certain before deleting a repository."
-			stack
-		>
-			<Button variant="danger" icon={Trash}>Delete repository</Button>
-		</SettingsRow>
-	</SettingsSection>
-</div>
-
-<div class="flex w-full justify-end">
-	<SettingsSaveBar {dirty} onreset={reset} />
-</div>
+	<div class="flex w-full justify-end">
+		<SettingsSaveBar {dirty} onreset={reset} />
+	</div>
+</Pending>
diff --git a/web/src/routes/[handle]/[repo]/settings/access/+page.svelte b/web/src/routes/[handle]/[repo]/settings/access/+page.svelte
index a962be402..7033864ee 100644
--- a/web/src/routes/[handle]/[repo]/settings/access/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/access/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { untrack } from "svelte";
 	import { resolve } from "$app/paths";
 	import Avatar from "$lib/components/ui/Avatar.svelte";
 	import Button from "$lib/components/ui/Button.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 	import SettingsBlock from "$lib/components/settings/SettingsBlock.svelte";
 	import SettingsList from "$lib/components/settings/SettingsList.svelte";
 	import SettingsRow from "$lib/components/settings/SettingsRow.svelte";
@@ -11,59 +11,74 @@
 
 	let { data } = $props();
 
-	const base = $derived(`/${data.repo.ownerHandle}/${data.repo.name}/settings`);
 	const path = (p: string) => resolve(p as "/");
 
 	// mocked — collaborator management is not wired up yet
-	let collaborators = $state([
+	let collaborators = $state<
+		Array<{ handle: string; did: string | undefined; role: string; owner: boolean }>
+	>([
 		{
-			handle: untrack(() => data.repo.ownerHandle),
-			did: untrack(() => data.repo.ownerDid),
+			handle: "",
+			did: undefined,
 			role: "Owner",
 			owner: true
 		},
 		{ handle: "user2.tld", did: undefined, role: "Collaborator", owner: false }
 	]);
 
+	$effect(() => {
+		void Promise.resolve(data.repo).then((r) => {
+			collaborators[0].handle = r.ownerHandle;
+			collaborators[0].did = r.ownerDid;
+		});
+	});
+
 	const remove = (handle: string) => {
 		collaborators = collaborators.filter((c) => c.handle !== handle);
 	};
 </script>
 
-<div class="flex min-h-8 w-full items-center gap-4">
-	<h1 class="typography-heading-2 text-foreground-default">Access</h1>
-</div>
+<Pending>
+	<!-- an await here suspends the whole navigation, so the awaits live below the boundary -->
+	{@const repo = await data.repo}
+	{@const base = `/${repo.ownerHandle}/${repo.name}/settings`}
+	<div class="flex min-h-8 w-full items-center gap-4">
+		<h1 class="typography-heading-2 text-foreground-default">Access</h1>
+	</div>
 
-<SettingsBlock
-	title="Collaborators"
-	description={[
-		"Any user added as a collaborator will be able to push commits and tags to this repository,",
-		"upload releases, and workflows."
-	]}
-	separator
->
-	{#snippet action()}
-		<Button icon={UserRoundPlus} href={path(`${base}/access/new`)}>Add collaborator</Button>
-	{/snippet}
+	<SettingsBlock
+		title="Collaborators"
+		description={[
+			"Any user added as a collaborator will be able to push commits and tags to this repository,",
+			"upload releases, and workflows."
+		]}
+		separator
+	>
+		{#snippet action()}
+			<Button icon={UserRoundPlus} href={path(`${base}/access/new`)}>Add collaborator</Button>
+		{/snippet}
 
-	<SettingsList>
-		{#each collaborators as person (person.handle)}
-			<SettingsRow stack>
-				{#snippet label()}
-					<span class="flex min-w-0 items-center gap-2">
-						<Avatar did={person.did} handle={person.handle} size="regular" />
-						<span class="typography-paragraph-regular text-foreground-default">
-							{person.handle}
+		<SettingsList>
+			{#each collaborators as person (person.handle)}
+				<SettingsRow stack>
+					{#snippet label()}
+						<span class="flex min-w-0 items-center gap-2">
+							<Avatar did={person.did} handle={person.handle} size="regular" />
+							<span class="typography-paragraph-regular text-foreground-default">
+								{person.handle}
+							</span>
+							<span class="typography-paragraph-regular text-foreground-muted"
+								>{person.role}</span
+							>
 						</span>
-						<span class="typography-paragraph-regular text-foreground-muted">{person.role}</span>
-					</span>
-				{/snippet}
-				{#if !person.owner}
-					<Button icon={UserRoundMinus} onclick={() => remove(person.handle)}>
-						Remove collaborator
-					</Button>
-				{/if}
-			</SettingsRow>
-		{/each}
-	</SettingsList>
-</SettingsBlock>
+					{/snippet}
+					{#if !person.owner}
+						<Button icon={UserRoundMinus} onclick={() => remove(person.handle)}>
+							Remove collaborator
+						</Button>
+					{/if}
+				</SettingsRow>
+			{/each}
+		</SettingsList>
+	</SettingsBlock>
+</Pending>
diff --git a/web/src/routes/[handle]/[repo]/settings/access/new/+page.svelte b/web/src/routes/[handle]/[repo]/settings/access/new/+page.svelte
index be7a2c34b..b5dcda059 100644
--- a/web/src/routes/[handle]/[repo]/settings/access/new/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/access/new/+page.svelte
@@ -3,6 +3,7 @@
 	import { resolve } from "$app/paths";
 	import Button from "$lib/components/ui/Button.svelte";
 	import Input from "$lib/components/ui/Input.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 	import DrillDown from "$lib/components/settings/DrillDown.svelte";
 	import SettingsList from "$lib/components/settings/SettingsList.svelte";
 	import FormRow from "$lib/components/settings/FormRow.svelte";
@@ -12,29 +13,36 @@
 
 	let { data } = $props();
 
-	const back = $derived(`/${data.repo.ownerHandle}/${data.repo.name}/settings/access`);
-
 	let user = $state("");
 	const valid = $derived(user.trim().length > 0);
 
 	// mocked — collaborator management is not wired up yet
-	const submit = () => goto(resolve(back as "/"));
+	const submit = () => {
+		void Promise.resolve(data.repo).then((repo) => {
+			void goto(resolve(`/${repo.ownerHandle}/${repo.name}/settings/access` as "/"));
+		});
+	};
 </script>
 
-<DrillDown
-	backLabel="Access"
-	backHref={back}
-	title="Add collaborator"
-	description="Collaborators can push to this repository."
->
-	<SettingsList padding="small">
-		<FormRow label="User" for="collaborator">
-			<Input id="collaborator" bind:value={user} placeholder="user.tngl.sh" />
-		</FormRow>
-	</SettingsList>
+<Pending>
+	<!-- an await here suspends the whole navigation, so the awaits live below the boundary -->
+	{@const repo = await data.repo}
+	{@const back = `/${repo.ownerHandle}/${repo.name}/settings/access`}
+	<DrillDown
+		backLabel="Access"
+		backHref={back}
+		title="Add collaborator"
+		description="Collaborators can push to this repository."
+	>
+		<SettingsList padding="small">
+			<FormRow label="User" for="collaborator">
+				<Input id="collaborator" bind:value={user} placeholder="user.tngl.sh" />
+			</FormRow>
+		</SettingsList>
 
-	<FormActions>
-		<Button href={resolve(back as "/")} icon={X}>Cancel</Button>
-		<Button variant="primary" icon={Plus} disabled={!valid} onclick={submit}>Add</Button>
-	</FormActions>
-</DrillDown>
+		<FormActions>
+			<Button href={resolve(back as "/")} icon={X}>Cancel</Button>
+			<Button variant="primary" icon={Plus} disabled={!valid} onclick={submit}>Add</Button>
+		</FormActions>
+	</DrillDown>
+</Pending>
diff --git a/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte b/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte
index 121b4b475..03f5d3470 100644
--- a/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/hooks/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { untrack } from "svelte";
 	import { resolve } from "$app/paths";
 	import Avatar from "$lib/components/ui/Avatar.svelte";
 	import Button from "$lib/components/ui/Button.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 	import Toggle from "$lib/components/ui/Toggle.svelte";
 	import SettingsEmpty from "$lib/components/settings/SettingsEmpty.svelte";
 	import SettingsBlock from "$lib/components/settings/SettingsBlock.svelte";
@@ -16,7 +16,6 @@
 
 	let { data } = $props();
 
-	const base = $derived(`/${data.repo.ownerHandle}/${data.repo.name}/settings`);
 	const path = (p: string) => resolve(p as "/");
 
 	// mocked — webhooks are not wired up yet
@@ -26,7 +25,7 @@
 			url: "https://hooks.user.tld/tg/repository-cs-hk",
 			events: "push, pull_request:created, pull_request:closed",
 			added: "Added 2 mins ago by",
-			by: untrack(() => data.repo.ownerHandle),
+			by: "",
 			enabled: true
 		},
 		{
@@ -34,62 +33,83 @@
 			url: "https://hooks.user.tld/tg/repository",
 			events: "push, pull_request:created, pull_request:closed",
 			added: "Added 5 hours ago by",
-			by: untrack(() => data.repo.ownerHandle),
+			by: "",
 			enabled: false
 		}
 	]);
 
+	$effect(() => {
+		void Promise.resolve(data.repo).then((r) => {
+			for (const h of hooks) {
+				h.by = r.ownerHandle;
+			}
+		});
+	});
+
 	const remove = (id: string) => {
 		hooks = hooks.filter((h) => h.id !== id);
 	};
 </script>
 
-<div class="flex min-h-8 w-full items-center gap-4">
-	<h1 class="typography-heading-2 text-foreground-default">Hooks</h1>
-</div>
+<Pending>
+	<!-- an await here suspends the whole navigation, so the awaits live below the boundary -->
+	{@const repo = await data.repo}
+	{@const base = `/${repo.ownerHandle}/${repo.name}/settings`}
+	<div class="flex min-h-8 w-full items-center gap-4">
+		<h1 class="typography-heading-2 text-foreground-default">Hooks</h1>
+	</div>
 
-<SettingsBlock
-	description={[
-		"Webhooks allow external services to be notified when certain events happen.",
-		"When the specified events happen, we'll send a POST request to each of the URLs you provide."
-	]}
->
-	{#snippet action()}
-		<Button icon={Plus} href={path(`${base}/hooks/new`)}>New webhook</Button>
-	{/snippet}
+	<SettingsBlock
+		description={[
+			"Webhooks allow external services to be notified when certain events happen.",
+			"When the specified events happen, we'll send a POST request to each of the URLs you provide."
+		]}
+	>
+		{#snippet action()}
+			<Button icon={Plus} href={path(`${base}/hooks/new`)}>New webhook</Button>
+		{/snippet}
 
-	{#if hooks.length === 0}
-		<SettingsEmpty message="No webhooks yet" />
-	{:else}
-		<SettingsList>
-			{#each hooks as hook (hook.id)}
-				<div class="flex w-full flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-					<div class="flex min-w-0 flex-col gap-1">
-						<CodeChip class="w-fit break-all">{hook.url}</CodeChip>
-						<span
-							class="flex items-center gap-1.5 typography-paragraph-regular text-foreground-muted"
-						>
-							<Eye class="size-3.5 shrink-0" aria-hidden="true" />
-							{hook.events}
-						</span>
-						<span
-							class="flex items-center gap-1.5 typography-paragraph-regular text-foreground-muted"
-						>
-							{hook.added}
-							<Avatar handle={hook.by} size="small" />
-							{hook.by}
-						</span>
-					</div>
-					<div class="flex flex-col items-end gap-4 sm:shrink-0">
-						<Toggle bind:checked={hook.enabled} aria-label="Enable {hook.url}" />
-						<div class="flex w-full items-center justify-between gap-2 sm:w-auto sm:justify-end">
-							<Button icon={Inbox}>Deliveries</Button>
-							<Button icon={Pencil}>Edit</Button>
-							<Button variant="danger" icon={Trash} onclick={() => remove(hook.id)}>Delete</Button>
+		{#if hooks.length === 0}
+			<SettingsEmpty message="No webhooks yet" />
+		{:else}
+			<SettingsList>
+				{#each hooks as hook (hook.id)}
+					<div
+						class="flex w-full flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"
+					>
+						<div class="flex min-w-0 flex-col gap-1">
+							<CodeChip class="w-fit break-all">{hook.url}</CodeChip>
+							<span
+								class="flex items-center gap-1.5 typography-paragraph-regular text-foreground-muted"
+							>
+								<Eye class="size-3.5 shrink-0" aria-hidden="true" />
+								{hook.events}
+							</span>
+							<span
+								class="flex items-center gap-1.5 typography-paragraph-regular text-foreground-muted"
+							>
+								{hook.added}
+								<Avatar handle={hook.by} size="small" />
+								{hook.by}
+							</span>
+						</div>
+						<div class="flex flex-col items-end gap-4 sm:shrink-0">
+							<Toggle bind:checked={hook.enabled} aria-label="Enable {hook.url}" />
+							<div
+								class="flex w-full items-center justify-between gap-2 sm:w-auto sm:justify-end"
+							>
+								<Button icon={Inbox}>Deliveries</Button>
+								<Button icon={Pencil}>Edit</Button>
+								<Button
+									variant="danger"
+									icon={Trash}
+									onclick={() => remove(hook.id)}>Delete</Button
+								>
+							</div>
 						</div>
 					</div>
-				</div>
-			{/each}
-		</SettingsList>
-	{/if}
-</SettingsBlock>
+				{/each}
+			</SettingsList>
+		{/if}
+	</SettingsBlock>
+</Pending>
diff --git a/web/src/routes/[handle]/[repo]/settings/hooks/new/+page.svelte b/web/src/routes/[handle]/[repo]/settings/hooks/new/+page.svelte
index eb6351543..47db3ce0c 100644
--- a/web/src/routes/[handle]/[repo]/settings/hooks/new/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/hooks/new/+page.svelte
@@ -4,6 +4,7 @@
 	import Button from "$lib/components/ui/Button.svelte";
 	import Input from "$lib/components/ui/Input.svelte";
 	import Checkbox from "$lib/components/ui/Checkbox.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 	import DrillDown from "$lib/components/settings/DrillDown.svelte";
 	import SettingsList from "$lib/components/settings/SettingsList.svelte";
 	import FormRow from "$lib/components/settings/FormRow.svelte";
@@ -13,8 +14,6 @@
 
 	let { data } = $props();
 
-	const back = $derived(`/${data.repo.ownerHandle}/${data.repo.name}/settings/hooks`);
-
 	let url = $state("");
 	let secret = $state("");
 	// mocked — webhooks are not wired up yet. Push is preselected, as in the design.
@@ -39,43 +38,56 @@
 	];
 
 	const valid = $derived(url.trim().length > 0 && Object.values(events).some(Boolean));
-	const submit = () => goto(resolve(back as "/"));
+	const submit = () => {
+		void Promise.resolve(data.repo).then((repo) => {
+			void goto(resolve(`/${repo.ownerHandle}/${repo.name}/settings/hooks` as "/"));
+		});
+	};
 </script>
 
-<DrillDown backLabel="Hooks" backHref={back} title="New webhook">
-	<SettingsList padding="small">
-		<FormRow
-			label="Payload URL"
-			description="The URL that will receive the webhook POST requests."
-			for="hook-url"
-		>
-			<Input id="hook-url" bind:value={url} placeholder="https://example.com/webhook" />
-		</FormRow>
+<Pending>
+	<!-- an await here suspends the whole navigation, so the awaits live below the boundary -->
+	{@const repo = await data.repo}
+	{@const back = `/${repo.ownerHandle}/${repo.name}/settings/hooks`}
+	<DrillDown backLabel="Hooks" backHref={back} title="New webhook">
+		<SettingsList padding="small">
+			<FormRow
+				label="Payload URL"
+				description="The URL that will receive the webhook POST requests."
+				for="hook-url"
+			>
+				<Input id="hook-url" bind:value={url} placeholder="https://example.com/webhook" />
+			</FormRow>
 
-		<FormRow
-			label="Secret"
-			optional
-			description="If provided, webhook payloads will be signed with HMAC-SHA256. Leave blank to send unsigned webhooks."
-			for="hook-secret"
-		>
-			<Input id="hook-secret" bind:value={secret} placeholder="A secret for signed webhooks" />
-		</FormRow>
+			<FormRow
+				label="Secret"
+				optional
+				description="If provided, webhook payloads will be signed with HMAC-SHA256. Leave blank to send unsigned webhooks."
+				for="hook-secret"
+			>
+				<Input
+					id="hook-secret"
+					bind:value={secret}
+					placeholder="A secret for signed webhooks"
+				/>
+			</FormRow>
 
-		<FormRow
-			label="Events"
-			description="Additional event types (issues) will be available in future updates."
-			align="start"
-		>
-			<div class="flex flex-col gap-1">
-				{#each EVENTS as event (event.id)}
-					<Checkbox bind:checked={events[event.id]}>{event.label}</Checkbox>
-				{/each}
-			</div>
-		</FormRow>
-	</SettingsList>
+			<FormRow
+				label="Events"
+				description="Additional event types (issues) will be available in future updates."
+				align="start"
+			>
+				<div class="flex flex-col gap-1">
+					{#each EVENTS as event (event.id)}
+						<Checkbox bind:checked={events[event.id]}>{event.label}</Checkbox>
+					{/each}
+				</div>
+			</FormRow>
+		</SettingsList>
 
-	<FormActions>
-		<Button href={resolve(back as "/")} icon={X}>Cancel</Button>
-		<Button variant="primary" icon={Plus} disabled={!valid} onclick={submit}>Add</Button>
-	</FormActions>
-</DrillDown>
+		<FormActions>
+			<Button href={resolve(back as "/")} icon={X}>Cancel</Button>
+			<Button variant="primary" icon={Plus} disabled={!valid} onclick={submit}>Add</Button>
+		</FormActions>
+	</DrillDown>
+</Pending>
diff --git a/web/src/routes/[handle]/[repo]/settings/labels/new/+page.svelte b/web/src/routes/[handle]/[repo]/settings/labels/new/+page.svelte
index 4e43a0b60..f0d0c9904 100644
--- a/web/src/routes/[handle]/[repo]/settings/labels/new/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/labels/new/+page.svelte
@@ -5,6 +5,7 @@
 	import Input from "$lib/components/ui/Input.svelte";
 	import Radio from "$lib/components/ui/Radio.svelte";
 	import Checkbox from "$lib/components/ui/Checkbox.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 	import DrillDown from "$lib/components/settings/DrillDown.svelte";
 	import SettingsList from "$lib/components/settings/SettingsList.svelte";
 	import FormRow from "$lib/components/settings/FormRow.svelte";
@@ -14,8 +15,6 @@
 
 	let { data } = $props();
 
-	const back = $derived(`/${data.repo.ownerHandle}/${data.repo.name}/settings`);
-
 	const COLORS = [
 		"#ef4444",
 		"#3b82f6",
@@ -35,56 +34,66 @@
 	let color = $state(COLORS[0]);
 
 	const valid = $derived(name.trim().length > 0 && (scopeIssues || scopePulls));
-	const submit = () => goto(resolve(back as "/"));
+	const submit = () => {
+		void Promise.resolve(data.repo).then((repo) => {
+			void goto(resolve(`/${repo.ownerHandle}/${repo.name}/settings` as "/"));
+		});
+	};
 </script>
 
-<DrillDown backLabel="General" backHref={back} title="Add custom label">
-	<SettingsList padding="small">
-		<FormRow
-			label="Label type"
-			description={[
-				"Basic labels can have a name and a color.",
-				"Key-value labels are more detailed, they can have a key and an associated value.",
-				"You may define additional constraints on label values."
-			]}
-		>
-			<div class="flex items-center gap-6">
-				<Radio value="basic" bind:group={type} name="label-type">Basic</Radio>
-				<Radio value="key-value" bind:group={type} name="label-type">Key-value</Radio>
-			</div>
-		</FormRow>
+<Pending>
+	<!-- an await here suspends the whole navigation, so the awaits live below the boundary -->
+	{@const repo = await data.repo}
+	{@const back = `/${repo.ownerHandle}/${repo.name}/settings`}
+	<DrillDown backLabel="General" backHref={back} title="Add custom label">
+		<SettingsList padding="small">
+			<FormRow
+				label="Label type"
+				description={[
+					"Basic labels can have a name and a color.",
+					"Key-value labels are more detailed, they can have a key and an associated value.",
+					"You may define additional constraints on label values."
+				]}
+			>
+				<div class="flex items-center gap-6">
+					<Radio value="basic" bind:group={type} name="label-type">Basic</Radio>
+					<Radio value="key-value" bind:group={type} name="label-type">Key-value</Radio>
+				</div>
+			</FormRow>
 
-		<FormRow label="Name" for="label-name">
-			<Input id="label-name" bind:value={name} placeholder="improvement" />
-		</FormRow>
+			<FormRow label="Name" for="label-name">
+				<Input id="label-name" bind:value={name} placeholder="improvement" />
+			</FormRow>
 
-		<FormRow label="Scope" align="start">
-			<div class="flex flex-col gap-1">
-				<Checkbox bind:checked={scopeIssues}>Issues</Checkbox>
-				<Checkbox bind:checked={scopePulls}>Pull requests</Checkbox>
-			</div>
-		</FormRow>
+			<FormRow label="Scope" align="start">
+				<div class="flex flex-col gap-1">
+					<Checkbox bind:checked={scopeIssues}>Issues</Checkbox>
+					<Checkbox bind:checked={scopePulls}>Pull requests</Checkbox>
+				</div>
+			</FormRow>
 
-		<FormRow label="Color">
-			<div class="flex items-center gap-2">
-				{#each COLORS as swatch (swatch)}
-					<button
-						type="button"
-						onclick={() => (color = swatch)}
-						aria-label="Use colour {swatch}"
-						aria-pressed={color === swatch}
-						class="size-5 cursor-pointer rounded-full transition-shadow {color === swatch
-							? 'ring-2 ring-foreground-default ring-offset-2 ring-offset-background-default'
-							: ''}"
-						style="background-color: {swatch}"
-					></button>
-				{/each}
-			</div>
-		</FormRow>
-	</SettingsList>
+			<FormRow label="Color">
+				<div class="flex items-center gap-2">
+					{#each COLORS as swatch (swatch)}
+						<button
+							type="button"
+							onclick={() => (color = swatch)}
+							aria-label="Use colour {swatch}"
+							aria-pressed={color === swatch}
+							class="size-5 cursor-pointer rounded-full transition-shadow {color ===
+							swatch
+								? 'ring-2 ring-foreground-default ring-offset-2 ring-offset-background-default'
+								: ''}"
+							style="background-color: {swatch}"
+						></button>
+					{/each}
+				</div>
+			</FormRow>
+		</SettingsList>
 
-	<FormActions>
-		<Button href={resolve(back as "/")} icon={X}>Cancel</Button>
-		<Button variant="primary" icon={Plus} disabled={!valid} onclick={submit}>Add</Button>
-	</FormActions>
-</DrillDown>
+		<FormActions>
+			<Button href={resolve(back as "/")} icon={X}>Cancel</Button>
+			<Button variant="primary" icon={Plus} disabled={!valid} onclick={submit}>Add</Button>
+		</FormActions>
+	</DrillDown>
+</Pending>
diff --git a/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte b/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte
index daf19d3b9..1ab17bd89 100644
--- a/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/pipelines/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { untrack } from "svelte";
 	import { resolve } from "$app/paths";
 	import Avatar from "$lib/components/ui/Avatar.svelte";
 	import Button from "$lib/components/ui/Button.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 	import Select from "$lib/components/ui/Select.svelte";
 	import SettingsBlock from "$lib/components/settings/SettingsBlock.svelte";
 	import SettingsList from "$lib/components/settings/SettingsList.svelte";
@@ -13,85 +13,102 @@
 
 	let { data } = $props();
 
-	const base = $derived(`/${data.repo.ownerHandle}/${data.repo.name}/settings`);
 	const path = (p: string) => resolve(p as "/");
 
 	// mocked — spindle selection and secrets are not wired up yet
-	let spindle = $state(untrack(() => data.repo.spindle) ?? "spindle.tangled.sh");
+	let spindle = $state("spindle.tangled.sh");
 	const spindles = $derived([spindle, "spindle.user.tld"]);
 
 	let secrets = $state([
 		{
 			name: "generic_secret",
 			added: "Added 5 hours ago by",
-			by: untrack(() => data.repo.ownerHandle)
+			by: ""
 		}
 	]);
 
+	$effect(() => {
+		void Promise.resolve(data.repo).then((r) => {
+			if (r.spindle) spindle = r.spindle;
+			for (const s of secrets) {
+				s.by = r.ownerHandle;
+			}
+		});
+	});
+
 	const remove = (name: string) => {
 		secrets = secrets.filter((s) => s.name !== name);
 	};
 </script>
 
-<div class="flex min-h-8 w-full items-center gap-4">
-	<h1 class="typography-heading-2 text-foreground-default">Pipelines</h1>
-</div>
+<Pending>
+	<!-- an await here suspends the whole navigation, so the awaits live below the boundary -->
+	{@const repo = await data.repo}
+	{@const base = `/${repo.ownerHandle}/${repo.name}/settings`}
+	<div class="flex min-h-8 w-full items-center gap-4">
+		<h1 class="typography-heading-2 text-foreground-default">Pipelines</h1>
+	</div>
 
-<SettingsBlock
-	title="Spindle"
-	description={[
-		"Choose a spindle to execute your workflows on. Only repository owners can configure spindles.",
-		"Spindles can be selfhosted."
-	]}
-	separator
->
-	{#snippet action()}
-		<DocsButton href="https://docs.tangled.org/spindles" />
-	{/snippet}
+	<SettingsBlock
+		title="Spindle"
+		description={[
+			"Choose a spindle to execute your workflows on. Only repository owners can configure spindles.",
+			"Spindles can be selfhosted."
+		]}
+		separator
+	>
+		{#snippet action()}
+			<DocsButton href="https://docs.tangled.org/spindles" />
+		{/snippet}
 
-	<SettingsList>
-		<SettingsRow title="Spindle" stack>
-			<Select
-				bind:value={spindle}
-				options={spindles.map((option) => ({ value: option }))}
-				label="Spindle"
-				class="w-full sm:w-80"
-			/>
-		</SettingsRow>
-	</SettingsList>
-</SettingsBlock>
+		<SettingsList>
+			<SettingsRow title="Spindle" stack>
+				<Select
+					bind:value={spindle}
+					options={spindles.map((option) => ({ value: option }))}
+					label="Spindle"
+					class="w-full sm:w-80"
+				/>
+			</SettingsRow>
+		</SettingsList>
+	</SettingsBlock>
 
-<SettingsBlock
-	title="Secrets"
-	description={[
-		"Secrets are accessible in workflow runs via environment variables.",
-		"Anyone with collaborator access to this repository can add and use secrets in workflow runs."
-	]}
-	separator
->
-	{#snippet action()}
-		<Button icon={Plus} href={path(`${base}/pipelines/secrets/new`)}>Add secret</Button>
-	{/snippet}
+	<SettingsBlock
+		title="Secrets"
+		description={[
+			"Secrets are accessible in workflow runs via environment variables.",
+			"Anyone with collaborator access to this repository can add and use secrets in workflow runs."
+		]}
+		separator
+	>
+		{#snippet action()}
+			<Button icon={Plus} href={path(`${base}/pipelines/secrets/new`)}>Add secret</Button>
+		{/snippet}
 
-	<SettingsList>
-		{#each secrets as secret (secret.name)}
-			<SettingsRow stack>
-				{#snippet label()}
-					<span class="flex min-w-0 flex-col gap-1">
-						<span class="font-mono typography-monospace-regular break-all text-foreground-default">
-							{secret.name}
+		<SettingsList>
+			{#each secrets as secret (secret.name)}
+				<SettingsRow stack>
+					{#snippet label()}
+						<span class="flex min-w-0 flex-col gap-1">
+							<span
+								class="typography-monospace-regular font-mono break-all text-foreground-default"
+							>
+								{secret.name}
+							</span>
+							<span
+								class="flex items-center gap-1.5 typography-paragraph-regular text-foreground-muted"
+							>
+								{secret.added}
+								<Avatar handle={secret.by} size="small" />
+								{secret.by}
+							</span>
 						</span>
-						<span
-							class="flex items-center gap-1.5 typography-paragraph-regular text-foreground-muted"
-						>
-							{secret.added}
-							<Avatar handle={secret.by} size="small" />
-							{secret.by}
-						</span>
-					</span>
-				{/snippet}
-				<Button variant="danger" icon={Trash} onclick={() => remove(secret.name)}>Delete</Button>
-			</SettingsRow>
-		{/each}
-	</SettingsList>
-</SettingsBlock>
+					{/snippet}
+					<Button variant="danger" icon={Trash} onclick={() => remove(secret.name)}
+						>Delete</Button
+					>
+				</SettingsRow>
+			{/each}
+		</SettingsList>
+	</SettingsBlock>
+</Pending>
diff --git a/web/src/routes/[handle]/[repo]/settings/pipelines/secrets/new/+page.svelte b/web/src/routes/[handle]/[repo]/settings/pipelines/secrets/new/+page.svelte
index 68f9a4a91..2a9010ed6 100644
--- a/web/src/routes/[handle]/[repo]/settings/pipelines/secrets/new/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/pipelines/secrets/new/+page.svelte
@@ -3,6 +3,7 @@
 	import { resolve } from "$app/paths";
 	import Button from "$lib/components/ui/Button.svelte";
 	import Input from "$lib/components/ui/Input.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 	import DrillDown from "$lib/components/settings/DrillDown.svelte";
 	import SettingsList from "$lib/components/settings/SettingsList.svelte";
 	import FormRow from "$lib/components/settings/FormRow.svelte";
@@ -12,33 +13,40 @@
 
 	let { data } = $props();
 
-	const back = $derived(`/${data.repo.ownerHandle}/${data.repo.name}/settings/pipelines`);
-
 	let name = $state("");
 	let value = $state("");
 	const valid = $derived(name.trim().length > 0 && value.length > 0);
 
 	// mocked — secrets are not wired up yet
-	const submit = () => goto(resolve(back as "/"));
+	const submit = () => {
+		void Promise.resolve(data.repo).then((repo) => {
+			void goto(resolve(`/${repo.ownerHandle}/${repo.name}/settings/pipelines` as "/"));
+		});
+	};
 </script>
 
-<DrillDown
-	backLabel="Pipelines"
-	backHref={back}
-	title="Add secret"
-	description="Secrets are available as environment variables in the workflow."
->
-	<SettingsList padding="small">
-		<FormRow label="Name" for="secret-name">
-			<Input id="secret-name" bind:value={name} placeholder="SECRET_NAME" />
-		</FormRow>
-		<FormRow label="Value" for="secret-value">
-			<Input id="secret-value" bind:value placeholder="very important secret" />
-		</FormRow>
-	</SettingsList>
+<Pending>
+	<!-- an await here suspends the whole navigation, so the awaits live below the boundary -->
+	{@const repo = await data.repo}
+	{@const back = `/${repo.ownerHandle}/${repo.name}/settings/pipelines`}
+	<DrillDown
+		backLabel="Pipelines"
+		backHref={back}
+		title="Add secret"
+		description="Secrets are available as environment variables in the workflow."
+	>
+		<SettingsList padding="small">
+			<FormRow label="Name" for="secret-name">
+				<Input id="secret-name" bind:value={name} placeholder="SECRET_NAME" />
+			</FormRow>
+			<FormRow label="Value" for="secret-value">
+				<Input id="secret-value" bind:value placeholder="very important secret" />
+			</FormRow>
+		</SettingsList>
 
-	<FormActions>
-		<Button href={resolve(back as "/")} icon={X}>Cancel</Button>
-		<Button variant="primary" icon={Plus} disabled={!valid} onclick={submit}>Add</Button>
-	</FormActions>
-</DrillDown>
+		<FormActions>
+			<Button href={resolve(back as "/")} icon={X}>Cancel</Button>
+			<Button variant="primary" icon={Plus} disabled={!valid} onclick={submit}>Add</Button>
+		</FormActions>
+	</DrillDown>
+</Pending>
diff --git a/web/src/routes/[handle]/[repo]/settings/rename/+page.svelte b/web/src/routes/[handle]/[repo]/settings/rename/+page.svelte
index 60ab27487..279639665 100644
--- a/web/src/routes/[handle]/[repo]/settings/rename/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/rename/+page.svelte
@@ -3,6 +3,7 @@
 	import { resolve } from "$app/paths";
 	import Button from "$lib/components/ui/Button.svelte";
 	import Input from "$lib/components/ui/Input.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 	import DrillDown from "$lib/components/settings/DrillDown.svelte";
 	import SettingsList from "$lib/components/settings/SettingsList.svelte";
 	import FormRow from "$lib/components/settings/FormRow.svelte";
@@ -15,60 +16,68 @@
 
 	let { data } = $props();
 
-	const back = $derived(`/${data.repo.ownerHandle}/${data.repo.name}/settings`);
-	const did = $derived(data.repo.ownerDid);
-
-	// the point of the screen: these survive a rename, the handle-based ones don't
-	const stableUrls = $derived([`https://tangled.org/${did}`, `git@tangled.org:${did}`]);
-
 	const copyFeedback = createCopyFeedback();
 
 	let name = $state("");
-	const valid = $derived(name.trim().length > 0 && name.trim() !== data.repo.name);
 
 	// mocked — renaming is not wired up yet
-	const submit = () => goto(resolve(back as "/"));
+	const submit = () => {
+		void Promise.resolve(data.repo).then((repo) => {
+			void goto(resolve(`/${repo.ownerHandle}/${repo.name}/settings` as "/"));
+		});
+	};
 </script>
 
-<DrillDown
-	backLabel="General"
-	backHref={back}
-	title="Rename repository"
-	description={[
-		"Existing git remotes that use the old name will break.",
-		"Use the stable, DID-based URLs below to avoid breakage on future renames."
-	]}
->
-	<div class="flex w-full flex-col gap-1">
-		{#each stableUrls as url (url)}
-			<div class="flex items-center gap-2">
-				<code class="font-mono typography-monospace-regular break-all text-foreground-default">
-					{url}
-				</code>
-				<button
-					type="button"
-					onclick={() => void copyFeedback.copy(url)}
-					aria-label="Copy {url}"
-					class="cursor-pointer text-foreground-muted hover:text-foreground-default"
-				>
-					{#if copyFeedback.copied === url}
-						<CopyCheck class="size-3.5" aria-hidden="true" />
-					{:else}
-						<Copy class="size-3.5" aria-hidden="true" />
-					{/if}
-				</button>
-			</div>
-		{/each}
-	</div>
+<Pending>
+	<!-- an await here suspends the whole navigation, so the awaits live below the boundary -->
+	{@const repo = await data.repo}
+	{@const back = `/${repo.ownerHandle}/${repo.name}/settings`}
+	{@const did = repo.ownerDid}
+	<!-- these survive a rename, handle-based ones don't -->
+	{@const stableUrls = [`https://tangled.org/${did}`, `git@tangled.org:${did}`]}
+	{@const valid = name.trim().length > 0 && name.trim() !== repo.name}
+	<DrillDown
+		backLabel="General"
+		backHref={back}
+		title="Rename repository"
+		description={[
+			"Existing git remotes that use the old name will break.",
+			"Use the stable, DID-based URLs below to avoid breakage on future renames."
+		]}
+	>
+		<div class="flex w-full flex-col gap-1">
+			{#each stableUrls as url (url)}
+				<div class="flex items-center gap-2">
+					<code
+						class="typography-monospace-regular font-mono break-all text-foreground-default"
+					>
+						{url}
+					</code>
+					<button
+						type="button"
+						onclick={() => void copyFeedback.copy(url)}
+						aria-label="Copy {url}"
+						class="cursor-pointer text-foreground-muted hover:text-foreground-default"
+					>
+						{#if copyFeedback.copied === url}
+							<CopyCheck class="size-3.5" aria-hidden="true" />
+						{:else}
+							<Copy class="size-3.5" aria-hidden="true" />
+						{/if}
+					</button>
+				</div>
+			{/each}
+		</div>
 
-	<SettingsList padding="small">
-		<FormRow label="Name" for="repo-name">
-			<Input id="repo-name" bind:value={name} placeholder="great-project" />
-		</FormRow>
-	</SettingsList>
+		<SettingsList padding="small">
+			<FormRow label="Name" for="repo-name">
+				<Input id="repo-name" bind:value={name} placeholder="great-project" />
+			</FormRow>
+		</SettingsList>
 
-	<FormActions>
-		<Button href={resolve(back as "/")} icon={X}>Cancel</Button>
-		<Button variant="primary" icon={Plus} disabled={!valid} onclick={submit}>Add</Button>
-	</FormActions>
-</DrillDown>
+		<FormActions>
+			<Button href={resolve(back as "/")} icon={X}>Cancel</Button>
+			<Button variant="primary" icon={Plus} disabled={!valid} onclick={submit}>Add</Button>
+		</FormActions>
+	</DrillDown>
+</Pending>
diff --git a/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte b/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte
index e1638c691..359bf89ba 100644
--- a/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/sites/+page.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
-	import { untrack } from "svelte";
 	import Button from "$lib/components/ui/Button.svelte";
-	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
 	import Input from "$lib/components/ui/Input.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 	import Radio from "$lib/components/ui/Radio.svelte";
 	import Select from "$lib/components/ui/Select.svelte";
 	import Toggle from "$lib/components/ui/Toggle.svelte";
@@ -20,7 +19,6 @@
 	let { data } = $props();
 
 	const domain = "user.tngl.sh";
-	const subPath = $derived(`${domain}/${data.repo.name}`);
 
 	// mocked — sites config is backed by G7 and has no write path here. Rendering
 	// the deployed state so the live-status pair and Disable row are visible; an
@@ -28,7 +26,7 @@
 	const deployed = true;
 
 	const initial = {
-		branch: untrack(() => data.repo.defaultBranch),
+		branch: "main",
 		directory: "/",
 		type: "index" as "index" | "subpath",
 		disabled: false
@@ -37,8 +35,16 @@
 	const dirty = $derived(JSON.stringify(form) !== JSON.stringify(initial));
 	const reset = () => (form = { ...initial });
 
+	$effect(() => {
+		void Promise.resolve(data.repo)
+			.then((r) => r.defaultBranch)
+			.then((b) => {
+				if (!dirty) form.branch = b;
+			});
+	});
+
 	const branches = $derived([
-		{ value: data.repo.defaultBranch, label: `${data.repo.defaultBranch} (default)` },
+		{ value: form.branch, label: `${form.branch} (default)` },
 		{ value: "develop", label: "develop" }
 	]);
 
@@ -47,100 +53,116 @@
 	];
 </script>
 
-<div class="flex min-h-9 w-full items-center justify-between gap-4">
-	<h1 class="typography-heading-2 text-foreground-default">Sites</h1>
-	<SettingsSaveBar {dirty} onreset={reset} />
-</div>
-
-<div class="flex w-full flex-col gap-4">
-	<p class="typography-paragraph-regular text-foreground-muted">
-		Serve a static site directly from this repository. Choose a branch and the directory containing
-		your <code class="font-mono typography-monospace-regular">index.html</code>.<br />
-		Only repository owners can configure sites.
-	</p>
-
-	{#if deployed}
-		<div class="flex gap-2">
-			<Tag color="success" icon={Check}>Live at {domain}</Tag>
-			<Button icon={ExternalLink}>Open</Button>
-		</div>
-	{/if}
-</div>
-
-<SettingsList>
-	<SettingsRow title="Branch" description="The branch to build and deploy the site from." stack>
-		<Select
-			rich
-			bind:value={form.branch}
-			options={branches}
-			label="Branch"
-			searchPlaceholder="Find a branch…"
-			emptyLabel="No branch matches"
-			class="w-full sm:w-80"
-		/>
-	</SettingsRow>
-
-	<SettingsRow
-		title="Deploy directory"
-		description={[
-			"Path within the repository that contains your index.html.",
-			"Use / for the root, or a subdirectory like /docs."
-		]}
-		stack
-	>
-		<Input bind:value={form.directory} placeholder="/" class="w-full sm:w-80" />
-	</SettingsRow>
-
-	<SettingsRow
-		title="Type"
-		description={[
-			"An index site is served at the root of your sites domain.",
-			"A sub-path site is served under the repository name."
-		]}
-		align="start"
-		stack
-	>
-		<div class="flex w-full flex-col gap-2 sm:w-80">
-			<div class="flex flex-col gap-1">
-				<Radio value="index" bind:group={form.type} name="site-type">Index site</Radio>
-				<CodeChip class="w-fit">{domain}</CodeChip>
-			</div>
-			<div class="flex flex-col gap-1">
-				<Radio value="subpath" bind:group={form.type} name="site-type">Sub-path site</Radio>
-				<CodeChip class="w-fit">{subPath}</CodeChip>
+<Pending>
+	<!-- an await here suspends the whole navigation, so the awaits live below the boundary -->
+	{@const repo = await data.repo}
+	{@const subPath = `${domain}/${repo.name}`}
+	<div class="flex min-h-9 w-full items-center justify-between gap-4">
+		<h1 class="typography-heading-2 text-foreground-default">Sites</h1>
+		<SettingsSaveBar {dirty} onreset={reset} />
+	</div>
+
+	<div class="flex w-full flex-col gap-4">
+		<p class="typography-paragraph-regular text-foreground-muted">
+			Serve a static site directly from this repository. Choose a branch and the directory
+			containing your <code class="typography-monospace-regular font-mono">index.html</code
+			>.<br />
+			Only repository owners can configure sites.
+		</p>
+
+		{#if deployed}
+			<div class="flex gap-2">
+				<Tag color="success" icon={Check}>Live at {domain}</Tag>
+				<Button icon={ExternalLink}>Open</Button>
 			</div>
-		</div>
-	</SettingsRow>
+		{/if}
+	</div>
 
-	{#if deployed}
+	<SettingsList>
 		<SettingsRow
-			title="Disable site"
-			description="Disables the site for this repository. The site will no longer be served."
+			title="Branch"
+			description="The branch to build and deploy the site from."
+			stack
 		>
-			<Toggle bind:checked={form.disabled} aria-label="Disable site" />
+			<Select
+				rich
+				bind:value={form.branch}
+				options={branches}
+				label="Branch"
+				searchPlaceholder="Find a branch…"
+				emptyLabel="No branch matches"
+				class="w-full sm:w-80"
+			/>
 		</SettingsRow>
-	{/if}
-</SettingsList>
-
-<hr class="w-full border-0 border-t border-border-default" />
-
-<SettingsSection title="Recent deploys" headingGap="4" framed={deploys.length > 0}>
-	{#if deploys.length === 0}
-		<SettingsEmpty message="No deploys yet." />
-	{:else}
-		{#each deploys as deploy (deploy.branch)}
-			<SettingsRow>
-				{#snippet label()}
-					<span class="flex min-w-0 items-center gap-2">
-						<span class="font-mono typography-monospace-regular text-foreground-default">
-							{deploy.branch}
-						</span>
-						<Tag color="success" size="small" icon={Check}>{deploy.status}</Tag>
-						<Tag color="gray" size="small" icon={Settings2}>{deploy.reason}</Tag>
-					</span>
-				{/snippet}
-				<span class="typography-paragraph-regular text-foreground-subtle">{deploy.when}</span>
+
+		<SettingsRow
+			title="Deploy directory"
+			description={[
+				"Path within the repository that contains your index.html.",
+				"Use / for the root, or a subdirectory like /docs."
+			]}
+			stack
+		>
+			<Input bind:value={form.directory} placeholder="/" class="w-full sm:w-80" />
+		</SettingsRow>
+
+		<SettingsRow
+			title="Type"
+			description={[
+				"An index site is served at the root of your sites domain.",
+				"A sub-path site is served under the repository name."
+			]}
+			align="start"
+			stack
+		>
+			<div class="flex w-full flex-col gap-2 sm:w-80">
+				<div class="flex flex-col gap-1">
+					<Radio value="index" bind:group={form.type} name="site-type">Index site</Radio>
+					<CodeChip class="w-fit">{domain}</CodeChip>
+				</div>
+				<div class="flex flex-col gap-1">
+					<Radio value="subpath" bind:group={form.type} name="site-type"
+						>Sub-path site</Radio
+					>
+					<CodeChip class="w-fit">{subPath}</CodeChip>
+				</div>
+			</div>
+		</SettingsRow>
+
+		{#if deployed}
+			<SettingsRow
+				title="Disable site"
+				description="Disables the site for this repository. The site will no longer be served."
+			>
+				<Toggle bind:checked={form.disabled} aria-label="Disable site" />
 			</SettingsRow>
-		{/each}
-	{/if}
-</SettingsSection>
+		{/if}
+	</SettingsList>
+
+	<hr class="w-full border-0 border-t border-border-default" />
+
+	<SettingsSection title="Recent deploys" headingGap="4" framed={deploys.length > 0}>
+		{#if deploys.length === 0}
+			<SettingsEmpty message="No deploys yet." />
+		{:else}
+			{#each deploys as deploy (deploy.branch)}
+				<SettingsRow>
+					{#snippet label()}
+						<span class="flex min-w-0 items-center gap-2">
+							<span
+								class="typography-monospace-regular font-mono text-foreground-default"
+							>
+								{deploy.branch}
+							</span>
+							<Tag color="success" size="small" icon={Check}>{deploy.status}</Tag>
+							<Tag color="gray" size="small" icon={Settings2}>{deploy.reason}</Tag>
+						</span>
+					{/snippet}
+					<span class="typography-paragraph-regular text-foreground-subtle"
+						>{deploy.when}</span
+					>
+				</SettingsRow>
+			{/each}
+		{/if}
+	</SettingsSection>
+</Pending>
diff --git a/web/src/routes/[handle]/[repo]/stars/+page.svelte b/web/src/routes/[handle]/[repo]/stars/+page.svelte
index 38df14b27..75cae6ce3 100644
--- a/web/src/routes/[handle]/[repo]/stars/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/stars/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import StarredBy from "$lib/components/repo/StarredBy.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 	import TabPanel from "$lib/components/ui/TabPanel.svelte";
 
 	let { data } = $props();
@@ -8,13 +9,20 @@
 <TabPanel class="flex flex-col gap-4">
 	<h2 class="typography-heading-4">Starred by</h2>
 
-	{#if data.starrers.length === 0}
-		<p class="text-foreground-muted">No stars yet.</p>
-	{:else}
-		<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
-			{#each data.starrers as starrer (starrer.did)}
-				<StarredBy did={starrer.did} handle={starrer.handle} createdAt={starrer.createdAt} />
-			{/each}
-		</div>
-	{/if}
+	<Pending>
+		{@const starrers = await data.starrers}
+		{#if starrers.length === 0}
+			<p class="text-foreground-muted">No stars yet.</p>
+		{:else}
+			<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+				{#each starrers as starrer (starrer.did)}
+					<StarredBy
+						did={starrer.did}
+						handle={starrer.handle}
+						createdAt={starrer.createdAt}
+					/>
+				{/each}
+			</div>
+		{/if}
+	</Pending>
 </TabPanel>
diff --git a/web/src/routes/[handle]/[repo]/stars/+page.ts b/web/src/routes/[handle]/[repo]/stars/+page.ts
index e510df10f..cbebae7c2 100644
--- a/web/src/routes/[handle]/[repo]/stars/+page.ts
+++ b/web/src/routes/[handle]/[repo]/stars/+page.ts
@@ -1,5 +1,6 @@
 import { createBobbinClient } from "$lib/api/client";
 import { IdentityCache } from "$lib/api/identity";
+import { stream } from "$lib/api/load";
 import { listStars } from "$lib/api/records";
 import { didFromUri } from "$lib/api/uri";
 import type { PageLoad } from "./$types";
@@ -14,27 +15,34 @@ export interface Starrer {
 
 export const load: PageLoad = async (event) => {
 	const parent = await event.parent();
-	const repoDid = parent.repo.repoDid;
-
-	// no repoDid means bobbin never indexed this repo, so there is nothing to list
-	if (!repoDid) {
-		return { starrers: [] as Starrer[] };
-	}
-
-	const ctx = createBobbinClient({ serviceUrl: parent.publicConfig.bobbinUrl, fetch: event.fetch });
-
-	// TODO: paginate
-	const result = await listStars(ctx, repoDid, { limit: LIMIT }).catch(() => null);
-	const items = result?.items ?? [];
-
-	const identity = new IdentityCache(ctx);
-	const starrers: Starrer[] = await Promise.all(
-		items.map(async (item): Promise<Starrer> => {
-			const did = didFromUri(item.uri);
-			const doc = await identity.resolve(did).catch(() => null);
-			return { did, handle: doc?.handle ?? did, createdAt: item.value.createdAt };
-		})
-	);
-
-	return { starrers };
+	const repo = Promise.resolve(parent.repo);
+
+	const ctx = createBobbinClient({
+		serviceUrl: parent.publicConfig.bobbinUrl,
+		fetch: event.fetch
+	});
+
+	const starrers = repo.then(async (repo) => {
+		const repoDid = repo.repoDid;
+
+		// no repoDid means bobbin never indexed this repo, so there is nothing to list
+		if (!repoDid) {
+			return [] as Starrer[];
+		}
+
+		// TODO: paginate
+		const result = await listStars(ctx, repoDid, { limit: LIMIT }).catch(() => null);
+		const items = result?.items ?? [];
+
+		const identity = new IdentityCache(ctx);
+		return Promise.all(
+			items.map(async (item): Promise<Starrer> => {
+				const did = didFromUri(item.uri);
+				const doc = await identity.resolve(did).catch(() => null);
+				return { did, handle: doc?.handle ?? did, createdAt: item.value.createdAt };
+			})
+		);
+	});
+
+	return { starrers: stream(starrers) };
 };
diff --git a/web/src/routes/[handle]/[repo]/tags/+page.svelte b/web/src/routes/[handle]/[repo]/tags/+page.svelte
index 48fcdfd1b..65e3bb802 100644
--- a/web/src/routes/[handle]/[repo]/tags/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/tags/+page.svelte
@@ -3,38 +3,49 @@
 	import { resolve } from "$app/paths";
 	import TagCard from "$lib/components/repo/TagCard.svelte";
 	import Pagination from "$lib/components/ui/Pagination.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 	import TabPanel from "$lib/components/ui/TabPanel.svelte";
 
 	let { data } = $props();
 
-	const pageHref = (page: number) =>
-		resolve(
-			`/${data.repo.ownerHandle}/${data.repo.name}/tags${page > 1 ? `?page=${page}` : ""}` as "/"
-		);
-	const changePage = (page: number) => void goto(pageHref(page));
+	const changePage = (page: number) => {
+		void Promise.resolve(data.repo).then((repo) => {
+			void goto(
+				resolve(
+					`/${repo.ownerHandle}/${repo.name}/tags${page > 1 ? `?page=${page}` : ""}` as "/"
+				)
+			);
+		});
+	};
 </script>
 
 <TabPanel>
 	<h2 class="mb-4 typography-paragraph-regular font-bold">Tags</h2>
-	<div class="flex flex-col gap-12 py-2 md:gap-0">
-		{#each data.tags as tag (tag.name)}
-			<TagCard ownerHandle={data.repo.ownerHandle} repoName={data.repo.name} {tag} />
-		{:else}
-			<p class="p-4 text-center text-foreground-subtle">
-				This repository does not contain any tags.
-			</p>
-		{/each}
-	</div>
+	<Pending>
+		{@const repo = await data.repo}
+		<div class="flex flex-col gap-12 py-2 md:gap-0">
+			{#each await data.tags as tag (tag.name)}
+				<TagCard ownerHandle={repo.ownerHandle} repoName={repo.name} {tag} />
+			{:else}
+				<p class="p-4 text-center text-foreground-subtle">
+					This repository does not contain any tags.
+				</p>
+			{/each}
+		</div>
+	</Pending>
 </TabPanel>
 
-{#if data.pageCount > 1}
-	<div class="mt-4 flex justify-center">
-		<Pagination
-			page={data.page}
-			total={data.pageCount}
-			labels
-			onchange={changePage}
-			class="gap-5"
-		/>
-	</div>
-{/if}
+<Pending>
+	{@const pageCount = await data.pageCount}
+	{#if pageCount > 1}
+		<div class="mt-4 flex justify-center">
+			<Pagination
+				page={data.page}
+				total={pageCount}
+				labels
+				onchange={changePage}
+				class="gap-5"
+			/>
+		</div>
+	{/if}
+</Pending>
diff --git a/web/src/routes/[handle]/[repo]/tags/+page.ts b/web/src/routes/[handle]/[repo]/tags/+page.ts
index 699a90a10..f450cc349 100644
--- a/web/src/routes/[handle]/[repo]/tags/+page.ts
+++ b/web/src/routes/[handle]/[repo]/tags/+page.ts
@@ -1,23 +1,29 @@
 import { gitTarget, tags } from "$lib/api/gitclient";
 import { REF_LIMIT } from "$lib/api/repoIndex";
 import { toTagSummary } from "$lib/api/repo";
+import { stream } from "$lib/api/load";
 import type { PageLoad } from "./$types";
 
 export const load: PageLoad = async (event) => {
 	const parent = await event.parent();
-	const git = gitTarget(parent.publicConfig, parent.repo, event.fetch);
+	const repoPromise = Promise.resolve(parent.repo);
 	const rawPage = event.url.searchParams.get("page") ?? "";
 	const parsed = /^\d+$/.test(rawPage) ? Number(rawPage) : 1;
 	const page = parsed >= 1 ? parsed : 1;
 	const cursor = page > 1 ? String((page - 1) * REF_LIMIT) : undefined;
-	const results = await tags(git, REF_LIMIT, cursor);
-	const list = (results.tags ?? []).map(toTagSummary);
-	const total = results.total ?? 0;
-	const pageCount =
-		total > 0 ? Math.ceil(total / REF_LIMIT) : page + (list.length === REF_LIMIT ? 1 : 0);
+	const results = repoPromise.then((repo) => {
+		const git = gitTarget(parent.publicConfig, repo, event.fetch);
+		return tags(git, REF_LIMIT, cursor);
+	});
+	const list = results.then((res) => (res.tags ?? []).map(toTagSummary));
+	const pageCount = results.then((res) => {
+		const total = res.total ?? 0;
+		const len = res.tags?.length ?? 0;
+		return total > 0 ? Math.ceil(total / REF_LIMIT) : page + (len === REF_LIMIT ? 1 : 0);
+	});
 	return {
-		tags: list,
+		tags: stream(list),
 		page,
-		pageCount
+		pageCount: stream(pageCount)
 	};
 };
diff --git a/web/src/routes/[handle]/[repo]/tags/[tag]/+page.svelte b/web/src/routes/[handle]/[repo]/tags/[tag]/+page.svelte
index 4c892d18d..5371ec677 100644
--- a/web/src/routes/[handle]/[repo]/tags/[tag]/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/tags/[tag]/+page.svelte
@@ -1,11 +1,15 @@
 <script lang="ts">
 	import TagCard from "$lib/components/repo/TagCard.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 
 	let { data } = $props();
 </script>
 
 <section class="rounded bg-background-default px-6 py-4">
-	<div class="flex flex-col py-2">
-		<TagCard ownerHandle={data.repo.ownerHandle} repoName={data.repo.name} tag={data.tag} />
-	</div>
+	<Pending>
+		{@const repo = await data.repo}
+		<div class="flex flex-col py-2">
+			<TagCard ownerHandle={repo.ownerHandle} repoName={repo.name} tag={await data.tag} />
+		</div>
+	</Pending>
 </section>
diff --git a/web/src/routes/[handle]/[repo]/tags/[tag]/+page.ts b/web/src/routes/[handle]/[repo]/tags/[tag]/+page.ts
index b9f86c3c8..41695d5c3 100644
--- a/web/src/routes/[handle]/[repo]/tags/[tag]/+page.ts
+++ b/web/src/routes/[handle]/[repo]/tags/[tag]/+page.ts
@@ -1,21 +1,26 @@
 import { error } from "@sveltejs/kit";
 import { gitTarget, tag, tags } from "$lib/api/gitclient";
+import { stream } from "$lib/api/load";
 import { toTagSummary } from "$lib/api/repo";
 import type { PageLoad } from "./$types";
 
 export const load: PageLoad = async (event) => {
 	const parent = await event.parent();
-	const git = gitTarget(parent.publicConfig, parent.repo, event.fetch);
+	const repoPromise = Promise.resolve(parent.repo);
 	// the params arrive decoded, the wire names are raw
 	const name = event.params.tag;
-	let entry = await tag(git, name)
-		.then((result) => result.tag)
-		.catch(() => undefined);
-	if (!entry && name === "latest") {
-		entry = await tags(git, 1)
-			.then((results) => results.tags?.[0])
+	const tagPromise = repoPromise.then(async (repo) => {
+		const git = gitTarget(parent.publicConfig, repo, event.fetch);
+		let entry = await tag(git, name)
+			.then((result) => result.tag)
 			.catch(() => undefined);
-	}
-	if (!entry) error(404, `no tag named ${name}`);
-	return { tag: toTagSummary(entry) };
+		if (!entry && name === "latest") {
+			entry = await tags(git, 1)
+				.then((results) => results.tags?.[0])
+				.catch(() => undefined);
+		}
+		if (!entry) error(404, `no tag named ${name}`);
+		return toTagSummary(entry);
+	});
+	return { tag: stream(tagPromise) };
 };
diff --git a/web/src/routes/[handle]/[repo]/tree/[ref]/+page.svelte b/web/src/routes/[handle]/[repo]/tree/[ref]/+page.svelte
index 7c469da9b..46960702e 100644
--- a/web/src/routes/[handle]/[repo]/tree/[ref]/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/tree/[ref]/+page.svelte
@@ -1,17 +1,23 @@
 <script lang="ts">
 	import { commitStatuses } from "$lib/api/commitStatuses";
 	import RepoIndexView from "$lib/components/repo/RepoIndexView.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 
 	let { data } = $props();
 
 	const pipelineStatuses = $derived(
-		commitStatuses(
-			data.repo.spindle,
-			data.repo.ownerHandle,
-			data.repo.name,
-			data.commits.map((commit) => commit.hash)
+		Promise.all([data.content, data.repo]).then(([content, repo]) =>
+			commitStatuses(
+				repo.spindle,
+				repo.ownerHandle,
+				repo.name,
+				content.commits.map((commit) => commit.hash)
+			)
 		)
 	);
 </script>
 
-<RepoIndexView repo={data.repo} {data} bobbinUrl={data.publicConfig.bobbinUrl} {pipelineStatuses} />
+<Pending>
+	{@const repo = await data.repo}
+	<RepoIndexView {repo} {data} bobbinUrl={data.publicConfig.bobbinUrl} {pipelineStatuses} />
+</Pending>
diff --git a/web/src/routes/[handle]/[repo]/tree/[ref]/[...path]/+page.svelte b/web/src/routes/[handle]/[repo]/tree/[ref]/[...path]/+page.svelte
index c294eb478..0d27ce76d 100644
--- a/web/src/routes/[handle]/[repo]/tree/[ref]/[...path]/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/tree/[ref]/[...path]/+page.svelte
@@ -3,37 +3,50 @@
 	import LastCommitPanel from "$lib/components/repo/LastCommitPanel.svelte";
 	import Readme from "$lib/components/repo/Readme.svelte";
 	import TreeHeader from "$lib/components/repo/TreeHeader.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 	import TabPanel from "$lib/components/ui/TabPanel.svelte";
 
 	let { data } = $props();
-
-	const repo = $derived(data.repo);
 </script>
 
-<TabPanel padded={false} class="relative mx-auto w-full p-4">
-	<TreeHeader
-		ownerHandle={repo.ownerHandle}
-		repoName={repo.name}
-		ref={data.ref}
-		path={data.path}
-		entries={data.files}
-	/>
+<!-- shared boundary avoids reserving a skeleton card for directories without a readme -->
+<Pending>
+	{@const repo = await data.repo}
+	{@const tree = await data.tree}
+	<TabPanel padded={false} class="relative mx-auto w-full p-4">
+		<TreeHeader
+			ownerHandle={repo.ownerHandle}
+			repoName={repo.name}
+			ref={data.ref}
+			path={data.path}
+			entries={tree.files}
+		/>
 
-	{#if data.lastCommit}
-		<LastCommitPanel ownerHandle={repo.ownerHandle} repoName={repo.name} commit={data.lastCommit} />
-	{/if}
+		{#if tree.lastCommit}
+			<LastCommitPanel
+				ownerHandle={repo.ownerHandle}
+				repoName={repo.name}
+				commit={tree.lastCommit}
+			/>
+		{/if}
 
-	<!-- one column, the commit and ref panels describe the repo not a folder -->
-	<FileTree
-		ownerHandle={repo.ownerHandle}
-		repoName={repo.name}
-		ref={data.ref}
-		entries={data.files}
-		path={data.path}
-		withMessage
-	/>
-</TabPanel>
+		<FileTree
+			ownerHandle={repo.ownerHandle}
+			repoName={repo.name}
+			ref={data.ref}
+			entries={tree.files}
+			path={data.path}
+			withMessage
+		/>
+	</TabPanel>
 
-{#if data.readme}
-	<Readme filename={data.readme.filename} contents={data.readme.contents} html={data.readmeHtml} />
-{/if}
+	{#if tree.readme}
+		<Pending>
+			<Readme
+				filename={tree.readme.filename}
+				contents={tree.readme.contents}
+				html={await data.readmeHtml}
+			/>
+		</Pending>
+	{/if}
+</Pending>
diff --git a/web/src/routes/repo/new/+page.svelte b/web/src/routes/repo/new/+page.svelte
index 1188bd8aa..49be0e63a 100644
--- a/web/src/routes/repo/new/+page.svelte
+++ b/web/src/routes/repo/new/+page.svelte
@@ -23,10 +23,12 @@
 
 <div class="mx-auto w-full max-w-2xl px-4 py-12">
 	<div class="px-6 py-2">
-		<h1 class="typography-heading-4 font-bold text-foreground-default">Create a new repository</h1>
+		<h1 class="typography-heading-4 font-bold text-foreground-default">
+			Create a new repository
+		</h1>
 		<p class="mb-1 typography-paragraph-small text-foreground-subtle">
-			Repositories contain a project's files and version history. All repositories are publicly
-			accessible.
+			Repositories contain a project's files and version history. All repositories are
+			publicly accessible.
 		</p>
 	</div>
 
@@ -42,15 +44,23 @@
 				</div>
 
 				<div class="flex-1 pb-12">
-					<h2 class="typography-paragraph-large font-medium text-foreground-default">General</h2>
-					<div class="mb-4 typography-paragraph-small text-foreground-subtle">Basic repository information.</div>
+					<h2 class="typography-paragraph-large font-medium text-foreground-default">
+						General
+					</h2>
+					<div class="mb-4 typography-paragraph-small text-foreground-subtle">
+						Basic repository information.
+					</div>
 
 					<div class="space-y-2">
 						<div>
-							<label class="mb-1 block typography-paragraph-small font-bold text-foreground-default">
+							<label
+								class="mb-1 block typography-paragraph-small font-bold text-foreground-default"
+							>
 								Repository name
 							</label>
-							<div class="flex w-full flex-col gap-2 md:flex-row md:items-center md:gap-0">
+							<div
+								class="flex w-full flex-col gap-2 md:flex-row md:items-center md:gap-0"
+							>
 								<div
 									class="hidden shrink-0 items-center gap-1 p-2 typography-paragraph-small text-foreground-muted md:flex md:rounded-l md:border md:border-r-0 md:border-border-default md:bg-background-inset"
 								>
@@ -68,13 +78,16 @@
 								/>
 							</div>
 							<p class="mt-1 typography-paragraph-small text-foreground-subtle">
-								Choose a unique, descriptive name for your repository. Use letters, numbers, and
-								hyphens.
+								Choose a unique, descriptive name for your repository. Use letters,
+								numbers, and hyphens.
 							</p>
 						</div>
 
 						<div>
-							<label for="description" class="mb-1 block typography-paragraph-small font-bold text-foreground-default">
+							<label
+								for="description"
+								class="mb-1 block typography-paragraph-small font-bold text-foreground-default"
+							>
 								Description
 							</label>
 							<input
@@ -87,8 +100,8 @@
 								class="w-full rounded-sm border border-border-default bg-background-default p-2 typography-paragraph-small text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none"
 							/>
 							<p class="mt-1 typography-paragraph-small text-foreground-subtle">
-								Optional. A short description to help others understand what your project does (max
-								140 characters).
+								Optional. A short description to help others understand what your
+								project does (max 140 characters).
 							</p>
 						</div>
 					</div>
@@ -108,11 +121,16 @@
 					<h2 class="typography-paragraph-large font-medium text-foreground-default">
 						Configuration
 					</h2>
-					<div class="mb-4 typography-paragraph-small text-foreground-subtle">Repository settings and hosting.</div>
+					<div class="mb-4 typography-paragraph-small text-foreground-subtle">
+						Repository settings and hosting.
+					</div>
 
 					<div class="space-y-2">
 						<div>
-							<label for="branch" class="mb-1 block typography-paragraph-small font-bold text-foreground-default">
+							<label
+								for="branch"
+								class="mb-1 block typography-paragraph-small font-bold text-foreground-default"
+							>
 								Default branch
 							</label>
 							<input
@@ -124,12 +142,15 @@
 								class="w-full rounded-sm border border-border-default bg-background-default p-2 typography-paragraph-small text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none"
 							/>
 							<p class="mt-1 typography-paragraph-small text-foreground-subtle">
-								The primary branch where development happens. Common choices are "main" or "master".
+								The primary branch where development happens. Common choices are
+								"main" or "master".
 							</p>
 						</div>
 
 						<div>
-							<label class="mb-1 block typography-paragraph-small font-bold text-foreground-default">
+							<label
+								class="mb-1 block typography-paragraph-small font-bold text-foreground-default"
+							>
 								Select a knot
 							</label>
 							<div class="w-full space-y-2">
@@ -140,7 +161,8 @@
 								{/each}
 							</div>
 							<p class="mt-1 typography-paragraph-small text-foreground-subtle">
-								A knot hosts repository data and handles Git operations. You can also
+								A knot hosts repository data and handles Git operations. You can
+								also
 								<a href={resolve("/settings/knots" as "/")} class="underline"
 									>register your own knot</a
 								>.
@@ -151,7 +173,9 @@
 			</div>
 
 			<div class="mt-8 flex justify-end">
-				<Button variant="primary" type="submit" icon={BookPlus}>Create repository (TODO)</Button>
+				<Button variant="primary" type="submit" icon={BookPlus}
+					>Create repository (TODO)</Button
+				>
 			</div>
 		</form>
 	</div>
diff --git a/web/src/routes/settings/+layout.svelte b/web/src/routes/settings/+layout.svelte
index a5b827408..5ea3e76f8 100644
--- a/web/src/routes/settings/+layout.svelte
+++ b/web/src/routes/settings/+layout.svelte
@@ -16,7 +16,12 @@
 		{ id: "profile", label: "Profile", href: "/settings", icon: User },
 		{ id: "keys", label: "Keys", href: "/settings/keys", icon: Key },
 		{ id: "emails", label: "Emails", href: "/settings/emails", icon: Mail },
-		{ id: "notifications", label: "Notifications", href: "/settings/notifications", icon: Bell },
+		{
+			id: "notifications",
+			label: "Notifications",
+			href: "/settings/notifications",
+			icon: Bell
+		},
 		{ id: "knots", label: "Knots", href: "/settings/knots", icon: Volleyball },
 		{ id: "spindles", label: "Spindles", href: "/settings/spindles", icon: Spool },
 		{ id: "sites", label: "Sites", href: "/settings/sites", icon: Globe }
diff --git a/web/src/routes/settings/emails/new/+page.svelte b/web/src/routes/settings/emails/new/+page.svelte
index 110e420b2..a23b04855 100644
--- a/web/src/routes/settings/emails/new/+page.svelte
+++ b/web/src/routes/settings/emails/new/+page.svelte
@@ -25,7 +25,12 @@
 >
 	<SettingsList padding="small">
 		<FormRow label="Email" for="email-address">
-			<Input id="email-address" type="email" bind:value={email} placeholder="your@email.com" />
+			<Input
+				id="email-address"
+				type="email"
+				bind:value={email}
+				placeholder="your@email.com"
+			/>
 		</FormRow>
 	</SettingsList>
 
diff --git a/web/src/routes/settings/keys/new/+page.svelte b/web/src/routes/settings/keys/new/+page.svelte
index 35a5b3302..0fc6e31de 100644
--- a/web/src/routes/settings/keys/new/+page.svelte
+++ b/web/src/routes/settings/keys/new/+page.svelte
@@ -48,7 +48,13 @@
 
 	<FormActions>
 		<Button href="/settings/keys" icon={X}>Cancel</Button>
-		<Button variant="primary" icon={Plus} disabled={!valid} loading={save.loading} onclick={submit}>
+		<Button
+			variant="primary"
+			icon={Plus}
+			disabled={!valid}
+			loading={save.loading}
+			onclick={submit}
+		>
 			Add
 		</Button>
 	</FormActions>
diff --git a/web/src/routes/settings/profile/delete/+page.svelte b/web/src/routes/settings/profile/delete/+page.svelte
index 9c503b744..280b16847 100644
--- a/web/src/routes/settings/profile/delete/+page.svelte
+++ b/web/src/routes/settings/profile/delete/+page.svelte
@@ -19,7 +19,11 @@
 	description="This permanently deletes your account and all associated data. This cannot be undone."
 >
 	<SettingsList padding="small">
-		<FormRow label="Password" description="Confirm your identity to proceed." for="delete-password">
+		<FormRow
+			label="Password"
+			description="Confirm your identity to proceed."
+			for="delete-password"
+		>
 			<Input id="delete-password" type="password" bind:value={password} />
 		</FormRow>
 	</SettingsList>
diff --git a/web/svelte.config.js b/web/svelte.config.js
index fd5611010..4745bba0b 100644
--- a/web/svelte.config.js
+++ b/web/svelte.config.js
@@ -7,7 +7,10 @@ const useCloudflareAdapter = process.env.SVELTE_ADAPTER === "cloudflare";
 const config = {
 	preprocess: vitePreprocess(),
 	compilerOptions: {
-		runes: ({ filename }) => (filename.split(/[/\\]/).includes("node_modules") ? undefined : true)
+		runes: ({ filename }) => (filename.split(/[/\\]/).includes("node_modules") ? undefined : true),
+		// `await` in templates, so a page can hand a streamed promise straight to
+		// <svelte:boundary pending> instead of threading {#await} through every view
+		experimental: { async: true }
 	},
 	kit: {
 		adapter: useCloudflareAdapter ? cloudflareAdapter({ config: "wrangler.dev.jsonc" }) : adapter(),