diff --git a/web/src/lib/components/repo/RefChip.stories.svelte b/web/src/lib/components/repo/RefChip.stories.svelte
new file mode 100644
index 000000000..d2901e117
--- /dev/null
+++ b/web/src/lib/components/repo/RefChip.stories.svelte
@@ -0,0 +1,36 @@
+<script module lang="ts">
+	import { defineMeta, type StoryContext } from "@storybook/addon-svelte-csf";
+	import { expect } from "storybook/test";
+	import RefChip from "./RefChip.svelte";
+
+	type PlayContext = Pick<StoryContext<Record<string, unknown>>, "canvas">;
+
+	const linksToTree = async ({ canvas }: PlayContext) => {
+		await expect(canvas.getByText("at")).toBeVisible();
+		await expect(canvas.getByRole("link", { name: "main" })).toHaveAttribute(
+			"href",
+			"/dawn/tangled/tree/main"
+		);
+	};
+
+	const encodesRef = async ({ canvas }: PlayContext) => {
+		await expect(canvas.getByRole("link", { name: "feature/split-diffs" })).toHaveAttribute(
+			"href",
+			"/dawn/tangled/tree/feature%2Fsplit-diffs"
+		);
+	};
+
+	const { Story } = defineMeta({
+		title: "Repo/RefChip",
+		component: RefChip,
+		tags: ["autodocs"],
+		args: {
+			ownerHandle: "dawn",
+			repoName: "tangled",
+			ref: "main"
+		}
+	});
+</script>
+
+<Story name="Branch" play={linksToTree} />
+<Story name="Branch with slash" args={{ ref: "feature/split-diffs" }} play={encodesRef} />
diff --git a/web/src/lib/components/repo/RefChip.svelte b/web/src/lib/components/repo/RefChip.svelte
new file mode 100644
index 000000000..9b649ddb4
--- /dev/null
+++ b/web/src/lib/components/repo/RefChip.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { resolve } from "$app/paths";
+
+	interface Props {
+		ownerHandle: string;
+		repoName: string;
+		ref: string;
+		class?: string;
+	}
+
+	let { ownerHandle, repoName, ref, class: className = "" }: Props = $props();
+
+	const treeHref = $derived(
+		resolve(`/${ownerHandle}/${repoName}/tree/${encodeURIComponent(ref)}` as "/")
+	);
+</script>
+
+<div
+	class="flex w-fit items-center justify-center gap-2 rounded-sm border border-border-default bg-background-inset p-2 whitespace-nowrap {className}"
+>
+	<span class="text-foreground-muted">at</span>
+	<a href={treeHref} class="text-foreground-default no-underline hover:underline">{ref}</a>
+</div>
diff --git a/web/src/lib/components/repo/RepoCrumbs.stories.svelte b/web/src/lib/components/repo/RepoCrumbs.stories.svelte
new file mode 100644
index 000000000..77121befb
--- /dev/null
+++ b/web/src/lib/components/repo/RepoCrumbs.stories.svelte
@@ -0,0 +1,59 @@
+<script module lang="ts">
+	import { defineMeta, type StoryContext } from "@storybook/addon-svelte-csf";
+	import { expect } from "storybook/test";
+	import RepoCrumbs from "./RepoCrumbs.svelte";
+
+	type PlayContext = Pick<StoryContext<Record<string, unknown>>, "canvas">;
+
+	const nestedPath = async ({ canvas }: PlayContext) => {
+		await expect(canvas.getByRole("link", { name: "tangled" })).toHaveAttribute(
+			"href",
+			"/dawn/tangled/tree/main"
+		);
+		await expect(canvas.getByRole("link", { name: "web" })).toHaveAttribute(
+			"href",
+			"/dawn/tangled/tree/main/web"
+		);
+		await expect(canvas.getByRole("link", { name: "src" })).toHaveAttribute(
+			"href",
+			"/dawn/tangled/tree/main/web/src"
+		);
+		const current = canvas.getByText("lib");
+		await expect(current).toHaveAttribute("aria-current", "page");
+		await expect(canvas.queryByRole("link", { name: "lib" })).toBeNull();
+	};
+
+	const rootIsCurrent = async ({ canvas }: PlayContext) => {
+		const current = canvas.getByText("tangled");
+		await expect(current).toHaveAttribute("aria-current", "page");
+		await expect(canvas.queryByRole("link")).toBeNull();
+	};
+
+	const encodesSegments = async ({ canvas }: PlayContext) => {
+		await expect(canvas.getByRole("link", { name: "what#next?" })).toHaveAttribute(
+			"href",
+			"/dawn/tangled/tree/main/what%23next%3F"
+		);
+		await expect(canvas.getByText("100%.md")).toHaveAttribute("aria-current", "page");
+	};
+
+	const { Story } = defineMeta({
+		title: "Repo/RepoCrumbs",
+		component: RepoCrumbs,
+		tags: ["autodocs"],
+		args: {
+			ownerHandle: "dawn",
+			repoName: "tangled",
+			ref: "main",
+			path: "web/src/lib"
+		}
+	});
+</script>
+
+<Story name="Nested path" play={nestedPath} />
+<Story name="Repository root" args={{ path: "" }} play={rootIsCurrent} />
+<Story
+	name="Segments needing encoding"
+	args={{ path: "what#next?/100%.md" }}
+	play={encodesSegments}
+/>
diff --git a/web/src/lib/components/repo/RepoCrumbs.svelte b/web/src/lib/components/repo/RepoCrumbs.svelte
new file mode 100644
index 000000000..cfb2d3ff2
--- /dev/null
+++ b/web/src/lib/components/repo/RepoCrumbs.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { resolve } from "$app/paths";
+	import { encodePathSegments } from "./urls";
+
+	interface Props {
+		ownerHandle: string;
+		repoName: string;
+		ref: string;
+		// repo-relative path, empty at the tree root
+		path: string;
+	}
+
+	let { ownerHandle, repoName, ref, path }: Props = $props();
+
+	const treeBase = $derived(`/${ownerHandle}/${repoName}/tree/${encodeURIComponent(ref)}`);
+
+	const crumbs = $derived.by(() => {
+		const parts = path.split("/").filter(Boolean);
+		return [
+			{ name: repoName, href: treeBase, last: parts.length === 0 },
+			...parts.map((name, index) => ({
+				name,
+				href: `${treeBase}/${encodePathSegments(parts.slice(0, index + 1).join("/"))}`,
+				last: index === parts.length - 1
+			}))
+		];
+	});
+</script>
+
+<div
+	class="flex w-fit items-center gap-1 overflow-x-auto rounded-sm border border-border-default bg-background-inset px-3 py-2 whitespace-nowrap"
+>
+	{#each crumbs as crumb (crumb.href)}
+		{#if crumb.last}
+			<span class="text-foreground-default" aria-current="page">{crumb.name}</span>
+		{:else}
+			<a
+				href={resolve(crumb.href as "/")}
+				class="text-foreground-muted no-underline hover:underline">{crumb.name}</a
+			>
+			<span class="text-foreground-muted" aria-hidden="true">/</span>
+		{/if}
+	{/each}
+</div>
diff --git a/web/src/lib/components/repo/TreeHeader.svelte b/web/src/lib/components/repo/TreeHeader.svelte
index 3241f680f..63d9293fc 100644
--- a/web/src/lib/components/repo/TreeHeader.svelte
+++ b/web/src/lib/components/repo/TreeHeader.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { resolve } from "$app/paths";
+	import RefChip from "./RefChip.svelte";
+	import RepoCrumbs from "./RepoCrumbs.svelte";
 	import type { TreeEntrySummary } from "./types";
 
 	interface Props {
@@ -12,21 +13,6 @@
 
 	let { ownerHandle, repoName, ref, path, entries }: Props = $props();
 
-	const base = $derived(`/${ownerHandle}/${repoName}`);
-	const encodedRef = $derived(encodeURIComponent(ref));
-
-	const crumbs = $derived.by(() => {
-		const parts = path.split("/").filter(Boolean);
-		return [
-			{ name: repoName, href: `${base}/tree/${encodedRef}`, last: parts.length === 0 },
-			...parts.map((name, index) => ({
-				name,
-				href: `${base}/tree/${encodedRef}/${parts.slice(0, index + 1).join("/")}`,
-				last: index === parts.length - 1
-			}))
-		];
-	});
-
 	const folders = $derived(
 		entries.filter((entry) => entry.kind === "directory" || entry.kind === "submodule").length
 	);
@@ -36,21 +22,7 @@
 
 <div class="mb-3 flex items-center justify-between gap-2 text-sm">
 	<div class="flex min-w-0 items-center gap-3">
-		<div
-			class="flex w-fit items-center gap-1 overflow-x-auto rounded-sm border border-border-default bg-background-inset px-3 py-2 whitespace-nowrap"
-		>
-			{#each crumbs as crumb (crumb.href)}
-				{#if crumb.last}
-					<span class="text-foreground-default" aria-current="page">{crumb.name}</span>
-				{:else}
-					<a
-						href={resolve(crumb.href as "/")}
-						class="text-foreground-muted no-underline hover:underline">{crumb.name}</a
-					>
-					<span class="text-foreground-muted" aria-hidden="true">/</span>
-				{/if}
-			{/each}
-		</div>
+		<RepoCrumbs {ownerHandle} {repoName} {ref} {path} />
 
 		<div class="flex items-center gap-2 text-foreground-muted">
 			{#if folders > 0}
@@ -65,12 +37,5 @@
 		</div>
 	</div>
 
-	<div
-		class="hidden w-fit items-center gap-1 rounded-sm border border-border-default bg-background-inset p-2 whitespace-nowrap text-foreground-muted md:flex"
-	>
-		at <a
-			href={resolve(`${base}/tree/${encodedRef}` as "/")}
-			class="text-foreground-default no-underline hover:underline">{ref}</a
-		>
-	</div>
+	<RefChip {ownerHandle} {repoName} {ref} class="hidden md:flex" />
 </div>
diff --git a/web/src/lib/components/repo/urls.ts b/web/src/lib/components/repo/urls.ts
new file mode 100644
index 000000000..690c1e809
--- /dev/null
+++ b/web/src/lib/components/repo/urls.ts
@@ -0,0 +1,13 @@
+import { resolve } from "$app/paths";
+
+// rest params arrive decoded, re-encode per segment or `#`/`?`/`%` corrupt
+// the url
+export const encodePathSegments = (path: string): string =>
+	path.split("/").map(encodeURIComponent).join("/");
+
+export const baseName = (path: string): string => path.split("/").pop() ?? path;
+
+export const rawBlobHref = (ownerHandle: string, repoName: string, ref: string, path: string) =>
+	resolve(
+		`/${ownerHandle}/${repoName}/raw/${encodeURIComponent(ref)}/${encodePathSegments(path)}` as "/"
+	);