diff --git a/web/src/lib/api/blame.test.ts b/web/src/lib/api/blame.test.ts
new file mode 100644
index 000000000..e9ad86a89
--- /dev/null
+++ b/web/src/lib/api/blame.test.ts
@@ -0,0 +1,261 @@
+import type { ResourceUri } from "@atcute/lexicons";
+import type { Did } from "@atcute/lexicons/syntax";
+import { describe, expect, it, vi } from "vitest";
+import { blameFor, hydrateBlameAuthors } from "$lib/api/blame";
+import { createBobbinClient } from "$lib/api/client";
+
+// bobbin mints a repo did that is not the owner's: the mirror is keyed by the
+// former, the knot by the record's at-uri
+const REPO = "at://did:plc:owner/sh.tangled.repo/core" as ResourceUri;
+const REPO_DID = "did:plc:repo" as Did;
+
+const jsonResponse = (body: unknown): Response =>
+	new Response(JSON.stringify(body), {
+		status: 200,
+		headers: { "content-type": "application/json" }
+	});
+
+const errorResponse = (status: number, error: string): Response =>
+	new Response(JSON.stringify({ error }), {
+		status,
+		headers: { "content-type": "application/json" }
+	});
+
+const mirrorResponse = (body: {
+	commits: Array<Record<string, unknown>>;
+	runs: Array<Record<string, unknown>>;
+}): Response => jsonResponse({ commit: "abc123", ...body });
+
+const makeCtx = (fetchMock: typeof globalThis.fetch) =>
+	createBobbinClient({ serviceUrl: "https://bobbin.example", fetch: fetchMock });
+
+const blameCall = (ctx: ReturnType<typeof makeCtx>) =>
+	blameFor(ctx, { repo: REPO, repoDid: REPO_DID }, "main", "src/main.rs");
+
+describe("blameFor", () => {
+	it("requests gitmirror getBlame and maps its one-based runs", async () => {
+		const fetchMock = vi.fn<typeof globalThis.fetch>().mockResolvedValue(
+			mirrorResponse({
+				commits: [
+					{
+						oid: "abc123",
+						message: "add main\n\nlonger explanation",
+						author: {
+							name: "dawn",
+							email: "did:plc:dawn",
+							when: "2026-06-01T12:30:00Z"
+						}
+					}
+				],
+				runs: [{ start: 1, count: 3, commit: "abc123" }]
+			})
+		);
+		const ctx = makeCtx(fetchMock);
+
+		await expect(blameCall(ctx)).resolves.toEqual([
+			{
+				start: 1,
+				count: 3,
+				commit: {
+					sha: "abc123",
+					subject: "add main",
+					when: "2026-06-01T12:30:00Z",
+					author: { name: "dawn", email: "did:plc:dawn", did: "did:plc:dawn" }
+				}
+			}
+		]);
+
+		const url = new URL(String(fetchMock.mock.calls[0][0]));
+		expect(url.pathname).toBe("/xrpc/sh.tangled.git.temp2.getBlame");
+		expect(url.searchParams.get("repo")).toBe(REPO_DID);
+		expect(url.searchParams.get("ref")).toBe("main");
+		expect(url.searchParams.get("path")).toBe("src/main.rs");
+	});
+
+	it("keeps only the subject of the mirror's full commit message", async () => {
+		const fetchMock = vi.fn<typeof globalThis.fetch>().mockResolvedValue(
+			mirrorResponse({
+				commits: [
+					{
+						oid: "abc123",
+						message: "subject line\n\nbody",
+						author: {
+							name: "dawn",
+							email: "dawn@example.com",
+							when: "2026-06-01T12:30:00Z"
+						}
+					}
+				],
+				runs: [{ start: 1, count: 1, commit: "abc123" }]
+			})
+		);
+		const ctx = makeCtx(fetchMock);
+
+		const runs = await blameCall(ctx);
+		expect(runs[0].commit.subject).toBe("subject line");
+		expect(runs[0].commit.author.did).toBeUndefined();
+	});
+
+	// a repo the mirror doesn't have, and a commit it hasn't fetched yet, both mean "ask the knot"
+	it.each(["RepoNotFound", "RefNotFound"])(
+		"falls back to the knot when the mirror answers %s",
+		async (miss) => {
+			const fetchMock = vi
+				.fn<typeof globalThis.fetch>()
+				.mockResolvedValueOnce(errorResponse(404, miss))
+				.mockResolvedValueOnce(
+					jsonResponse({
+						commit: "abc123",
+						commits: [
+							{
+								sha: "abc123",
+								subject: "add main",
+								authoredAt: "2026-06-01T12:30:00Z",
+								author: { name: "dawn", email: "did:plc:dawn" }
+							}
+						],
+						runs: [{ start: 1, count: 3, commit: "abc123" }]
+					})
+				);
+			const ctx = makeCtx(fetchMock);
+
+			await expect(blameCall(ctx)).resolves.toEqual([
+				{
+					start: 1,
+					count: 3,
+					commit: {
+						sha: "abc123",
+						subject: "add main",
+						when: "2026-06-01T12:30:00Z",
+						author: { name: "dawn", email: "did:plc:dawn", did: "did:plc:dawn" }
+					}
+				}
+			]);
+
+			const urls = fetchMock.mock.calls.map((call) => new URL(String(call[0])).pathname);
+			expect(urls).toEqual([
+				"/xrpc/sh.tangled.git.temp2.getBlame",
+				"/xrpc/sh.tangled.repo.blame"
+			]);
+			const knotUrl = new URL(String(fetchMock.mock.calls[1][0]));
+			expect(knotUrl.searchParams.get("repo")).toBe(REPO);
+		}
+	);
+
+	// bobbin never indexed the repo, so there is no did to ask the mirror with
+	it("goes straight to the knot without a repo did", async () => {
+		const fetchMock = vi.fn<typeof globalThis.fetch>().mockResolvedValue(
+			jsonResponse({
+				commit: "abc123",
+				commits: [
+					{
+						sha: "abc123",
+						subject: "add main",
+						authoredAt: "2026-06-01T12:30:00Z",
+						author: { name: "dawn", email: "did:plc:dawn" }
+					}
+				],
+				runs: [{ start: 1, count: 3, commit: "abc123" }]
+			})
+		);
+		const ctx = makeCtx(fetchMock);
+
+		const runs = await blameFor(ctx, { repo: REPO }, "main", "src/main.rs");
+		expect(runs[0].commit.sha).toBe("abc123");
+		expect(fetchMock).toHaveBeenCalledTimes(1);
+		expect(new URL(String(fetchMock.mock.calls[0][0])).pathname).toBe(
+			"/xrpc/sh.tangled.repo.blame"
+		);
+	});
+
+	it("propagates mirror errors that are not a mirror miss", async () => {
+		const fetchMock = vi
+			.fn<typeof globalThis.fetch>()
+			.mockResolvedValue(errorResponse(500, "InternalError"));
+		const ctx = makeCtx(fetchMock);
+
+		await expect(blameCall(ctx)).rejects.toThrow("InternalError");
+		expect(fetchMock).toHaveBeenCalledTimes(1);
+	});
+
+	it("rejects duplicate commit metadata", async () => {
+		const commit = {
+			oid: "abc123",
+			message: "add main",
+			author: { name: "dawn", email: "dawn@example.com", when: "2026-06-01T12:30:00Z" }
+		};
+		const fetchMock = vi.fn<typeof globalThis.fetch>().mockResolvedValue(
+			mirrorResponse({
+				commits: [commit, commit],
+				runs: [{ start: 1, count: 1, commit: "abc123" }]
+			})
+		);
+		const ctx = makeCtx(fetchMock);
+
+		await expect(blameCall(ctx)).rejects.toThrow("duplicate blame commit: abc123");
+	});
+
+	it("rejects runs that reference missing commits", async () => {
+		const fetchMock = vi
+			.fn<typeof globalThis.fetch>()
+			.mockResolvedValue(
+				mirrorResponse({ commits: [], runs: [{ start: 1, count: 1, commit: "abc123" }] })
+			);
+		const ctx = makeCtx(fetchMock);
+
+		await expect(blameCall(ctx)).rejects.toThrow("unknown blame commit: abc123");
+	});
+
+	it("rejects non-contiguous run tables", async () => {
+		const fetchMock = vi.fn<typeof globalThis.fetch>().mockResolvedValue(
+			mirrorResponse({
+				commits: [
+					{
+						oid: "abc123",
+						message: "add main",
+						author: {
+							name: "dawn",
+							email: "dawn@example.com",
+							when: "2026-06-01T12:30:00Z"
+						}
+					}
+				],
+				runs: [{ start: 2, count: 1, commit: "abc123" }]
+			})
+		);
+		const ctx = makeCtx(fetchMock);
+
+		await expect(blameCall(ctx)).rejects.toThrow("invalid blame run at line 2");
+	});
+});
+
+describe("hydrateBlameAuthors", () => {
+	it("bounds identity lookups for large blame results", async () => {
+		const blame = Array.from({ length: 300 }, (_, index) => ({
+			start: index + 1,
+			count: 1,
+			commit: {
+				sha: `sha-${index}`,
+				subject: `commit ${index}`,
+				when: "2026-06-01T12:30:00Z",
+				author: {
+					name: `author ${index}`,
+					email: `did:plc:blameauthor${index}`,
+					did: `did:plc:blameauthor${index}`
+				}
+			}
+		}));
+		const fetchMock = vi.fn<typeof globalThis.fetch>(async (input) => {
+			const url = new URL(String(input));
+			const did = url.searchParams.get("identifier")!;
+			return jsonResponse({ did, handle: `${did.slice("did:plc:".length)}.example` });
+		});
+
+		const ctx = createBobbinClient({ serviceUrl: "https://bobbin.example", fetch: fetchMock });
+		const hydrated = await hydrateBlameAuthors(blame, ctx);
+
+		expect(fetchMock).toHaveBeenCalledTimes(250);
+		expect(hydrated[249].commit.author.handle).toBe("blameauthor249.example");
+		expect(hydrated[250].commit.author.handle).toBeUndefined();
+	});
+});
diff --git a/web/src/lib/api/blame.ts b/web/src/lib/api/blame.ts
new file mode 100644
index 000000000..efc285c4c
--- /dev/null
+++ b/web/src/lib/api/blame.ts
@@ -0,0 +1,156 @@
+import type { ResourceUri } from "@atcute/lexicons";
+import type { Did } from "@atcute/lexicons/syntax";
+import { ClientResponseError, type BobbinContext, type XrpcRequestInit } from "$lib/api/client";
+import { resolveEmailToDid } from "$lib/api/emailDid";
+import { getBlame } from "$lib/api/gitmirror";
+import { resolveMiniDoc } from "$lib/api/identity";
+import { blame as knotBlame } from "$lib/api/knot";
+import { didFromSignature, splitMessage } from "$lib/api/repo";
+import type * as GetBlame from "$lib/api/lexicons/types/sh/tangled/git/temp2/getBlame";
+import type * as KnotBlame from "$lib/api/lexicons/types/sh/tangled/repo/blame";
+import type { Blame, BlameCommit } from "$lib/components/repo/blame/types";
+
+type RunTable = { start: number; count: number; commit: string };
+
+// knot and mirror payloads share the run-table contract: commits must be unique
+// and runs must be a gap-free, sorted cover of the file starting at line 1
+const toBlame = (commits: readonly BlameCommit[], runs: readonly RunTable[]): Blame => {
+	const byShort = new Map<string, BlameCommit>();
+	for (const commit of commits) {
+		if (byShort.has(commit.sha)) throw new Error(`duplicate blame commit: ${commit.sha}`);
+		byShort.set(commit.sha, commit);
+	}
+	const blame: Blame = [];
+	let nextLine = 1;
+	for (const run of runs) {
+		if (run.start !== nextLine || run.count < 1 || !Number.isSafeInteger(run.count)) {
+			throw new Error(`invalid blame run at line ${run.start}`);
+		}
+		const commit = byShort.get(run.commit);
+		if (!commit) throw new Error(`unknown blame commit: ${run.commit}`);
+		blame.push({ start: run.start, count: run.count, commit });
+		nextLine += run.count;
+	}
+	return blame;
+};
+
+// a did in the author slot is a tangled account signing its own commits
+const toAuthor = ({ name, email }: { name: string; email: string }) => ({
+	name,
+	email,
+	did: didFromSignature(email)
+});
+
+const fromKnot = (result: KnotBlame.$output): Blame =>
+	toBlame(
+		result.commits.map((commit) => ({
+			sha: commit.sha,
+			subject: commit.subject,
+			when: commit.authoredAt,
+			author: toAuthor(commit.author)
+		})),
+		result.runs
+	);
+
+const fromMirror = (result: GetBlame.$output): Blame =>
+	toBlame(
+		result.commits.map((commit) => ({
+			sha: commit.oid,
+			subject: splitMessage(commit.message)[0],
+			when: commit.author.when,
+			author: toAuthor(commit.author)
+		})),
+		result.runs
+	);
+
+// the mirror only speaks for what it has fetched: a repo it doesn't mirror is
+// RepoNotFound, a commit it hasn't caught up to is RefNotFound, and the knot can
+// still answer both
+const mirrorMiss = (cause: unknown): boolean =>
+	cause instanceof ClientResponseError &&
+	(cause.error === "RepoNotFound" || cause.error === "RefNotFound");
+
+// the mirror keys repos by bobbin's repo did, the knot by the record's at-uri, so
+// blame needs both names for the same repo
+export const blameFor = async (
+	ctx: BobbinContext,
+	repo: { repo: ResourceUri; repoDid?: Did },
+	ref: string,
+	path: string,
+	init?: XrpcRequestInit
+): Promise<Blame> => {
+	if (repo.repoDid) {
+		try {
+			return fromMirror(await getBlame(ctx, { repo: repo.repoDid, ref, path }, init));
+		} catch (cause) {
+			if (!mirrorMiss(cause)) throw cause;
+		}
+	}
+	return fromKnot(await knotBlame(ctx, { repo: repo.repo, ref, path }, init));
+};
+
+const MAX_AUTHOR_HYDRATIONS = 250;
+const AUTHOR_HYDRATION_CONCURRENCY = 8;
+
+const mapConcurrent = async <T, U>(
+	items: T[],
+	concurrency: number,
+	fn: (item: T) => Promise<U>
+): Promise<U[]> => {
+	const results = new Array<U>(items.length);
+	let next = 0;
+	await Promise.all(
+		Array.from({ length: Math.min(concurrency, items.length) }, async () => {
+			while (next < items.length) {
+				const index = next++;
+				results[index] = await fn(items[index]);
+			}
+		})
+	);
+	return results;
+};
+
+export const hydrateBlameAuthors = async (blame: Blame, ctx: BobbinContext): Promise<Blame> => {
+	const emails = [
+		...new Set(
+			blame.flatMap(({ commit }) =>
+				commit.author.did || !commit.author.email ? [] : [commit.author.email]
+			)
+		)
+	].slice(0, MAX_AUTHOR_HYDRATIONS);
+	const emailDids = await resolveEmailToDid(ctx.fetch, emails);
+	const didFor = (email: string): string | undefined =>
+		email.startsWith("did:") ? email : emailDids.get(email);
+	const dids = [
+		...new Set(
+			blame.flatMap(({ commit }) => {
+				const did = commit.author.did ?? didFor(commit.author.email);
+				return did ? [did] : [];
+			})
+		)
+	].slice(0, MAX_AUTHOR_HYDRATIONS);
+	const docs = await mapConcurrent(
+		dids,
+		AUTHOR_HYDRATION_CONCURRENCY,
+		async (did) => [did, await resolveMiniDoc(ctx, did).catch(() => null)] as const
+	);
+	const handles = new Map(
+		docs.flatMap(([did, doc]) =>
+			doc && !doc.handle.endsWith(".invalid") ? [[did, doc.handle] as const] : []
+		)
+	);
+	return blame.map((run) => {
+		const did = run.commit.author.did ?? didFor(run.commit.author.email);
+		return {
+			...run,
+			commit: {
+				...run.commit,
+				author: {
+					...run.commit.author,
+					did,
+					handle: did ? handles.get(did) : undefined
+				}
+			}
+		};
+	});
+};
diff --git a/web/src/lib/api/gitmirror.ts b/web/src/lib/api/gitmirror.ts
index 0856d589c..186471b1f 100644
--- a/web/src/lib/api/gitmirror.ts
+++ b/web/src/lib/api/gitmirror.ts
@@ -11,6 +11,7 @@ import type { Did } from "@atcute/lexicons/syntax";
 import type { BobbinContext, XrpcRequestInit } from "$lib/api/client";
 import type { Revspec } from "$lib/api/pullRoute";
 import type * as ShTangledGitDefs from "$lib/api/lexicons/types/sh/tangled/git/defs";
+import type * as GetBlame from "$lib/api/lexicons/types/sh/tangled/git/temp2/getBlame";
 import type * as GetDiff from "$lib/api/lexicons/types/sh/tangled/git/temp2/getDiff";
 import type * as GetInterdiff from "$lib/api/lexicons/types/sh/tangled/git/temp2/getInterdiff";
 import type * as ListCommits from "$lib/api/lexicons/types/sh/tangled/git/temp2/listCommits";
@@ -21,8 +22,12 @@ import type * as MergeCheck from "$lib/api/lexicons/types/sh/tangled/git/temp2/m
 const LIST_COMMITS_NSID = "sh.tangled.git.temp2.listCommits";
 const GET_DIFF_NSID = "sh.tangled.git.temp2.getDiff";
 const GET_INTERDIFF_NSID = "sh.tangled.git.temp2.getInterdiff";
+const GET_BLAME_NSID = "sh.tangled.git.temp2.getBlame";
 const MERGE_CHECK_NSID = "sh.tangled.git.temp2.mergeCheck";
 
+export const getBlame = (ctx: BobbinContext, params: GetBlame.$params, init?: XrpcRequestInit) =>
+	jsonGet<GetBlame.$output>(ctx, GET_BLAME_NSID, params, init);
+
 export type MirrorCommit = ListCommits.Commit;
 
 export const listCommits = (
diff --git a/web/src/lib/api/knot.ts b/web/src/lib/api/knot.ts
index 50391d895..01632e74c 100644
--- a/web/src/lib/api/knot.ts
+++ b/web/src/lib/api/knot.ts
@@ -1,6 +1,7 @@
 import type { BobbinContext, QueryValue, XrpcRequestInit } from "$lib/api/client";
 import { buildUrl, jsonGet, rawGet } from "$lib/api/_request";
 import type * as Archive from "$lib/api/lexicons/types/sh/tangled/repo/archive";
+import type * as Blame from "$lib/api/lexicons/types/sh/tangled/repo/blame";
 import type * as Blob_ from "$lib/api/lexicons/types/sh/tangled/repo/blob";
 import type * as Branch from "$lib/api/lexicons/types/sh/tangled/repo/branch";
 import type * as Branches from "$lib/api/lexicons/types/sh/tangled/repo/branches";
@@ -26,6 +27,9 @@ export const tree = (ctx: BobbinContext, params: Tree.$params, init?: XrpcReques
 export const blob = (ctx: BobbinContext, params: Blob_.$params, init?: XrpcRequestInit) =>
 	jsonGet<Blob_.$output>(ctx, "sh.tangled.repo.blob", asParams(params), init);
 
+export const blame = (ctx: BobbinContext, params: Blame.$params, init?: XrpcRequestInit) =>
+	jsonGet<Blame.$output>(ctx, "sh.tangled.repo.blame", asParams(params), init);
+
 export const branch = (ctx: BobbinContext, params: Branch.$params, init?: XrpcRequestInit) =>
 	jsonGet<Branch.$output>(ctx, "sh.tangled.repo.branch", asParams(params), init);
 
diff --git a/web/src/lib/components/repo/BlobHeader.svelte b/web/src/lib/components/repo/BlobHeader.svelte
index 85b23b972..78bb235b8 100644
--- a/web/src/lib/components/repo/BlobHeader.svelte
+++ b/web/src/lib/components/repo/BlobHeader.svelte
@@ -29,6 +29,10 @@
 		view?: BlobViewMode;
 		wrap?: boolean;
 		showWrap?: boolean;
+		showBlame?: boolean;
+		blame?: boolean;
+		blameLoading?: boolean;
+		blameError?: string | null;
 		copyText?: string | null;
 	}
 
@@ -44,6 +48,10 @@
 		view = $bindable("code"),
 		wrap = $bindable(false),
 		showWrap = false,
+		showBlame = false,
+		blame = $bindable(false),
+		blameLoading = false,
+		blameError = null,
 		copyText = null
 	}: Props = $props();
 
@@ -53,6 +61,7 @@
 
 	const showLines = $derived(lines !== null && view === "code");
 	const showWrapToggle = $derived(showWrap && hasTextView(kind) && view === "code");
+	const showBlameToggle = $derived(showBlame && hasTextView(kind) && view === "code");
 	const languageColor = $derived(
 		language ? (LANGUAGE_COLORS[language] ?? LANGUAGE_COLOR_FALLBACK) : null
 	);
@@ -97,8 +106,18 @@
 
 		{#if kind !== "submodule"}
 			<div class="flex items-center gap-2 max-md:justify-between">
-				{#if showWrapToggle || hasRenderedView(kind)}
+				{#if showWrapToggle || showBlameToggle || hasRenderedView(kind)}
 					<div class="flex items-center gap-2">
+						{#if showBlameToggle}
+							<Checkbox
+								bind:checked={blame}
+								aria-busy={blameLoading}
+								title={blameError ?? undefined}
+								class="px-2 text-foreground-muted"
+							>
+								{blameLoading ? "Blame…" : "Blame"}
+							</Checkbox>
+						{/if}
 						{#if showWrapToggle}
 							<Checkbox bind:checked={wrap} class="px-2 text-foreground-muted">
 								Wrap
diff --git a/web/src/lib/components/repo/BlobView.svelte b/web/src/lib/components/repo/BlobView.svelte
index 1ca2727e8..631defced 100644
--- a/web/src/lib/components/repo/BlobView.svelte
+++ b/web/src/lib/components/repo/BlobView.svelte
@@ -6,6 +6,7 @@
 	import LastCommitPanel from "$lib/components/repo/LastCommitPanel.svelte";
 	import PierreFile from "$lib/components/repo/PierreFile.svelte";
 	import { baseName, rawBlobHref } from "$lib/components/repo/urls";
+	import { createBlame, type BlameSource } from "$lib/components/repo/blame/request.svelte";
 	import TabPanel from "$lib/components/ui/TabPanel.svelte";
 
 	interface Props {
@@ -16,9 +17,10 @@
 		prerenderedHTML?: string;
 		// enry language name override, defaults to the extension guess
 		language?: string | null;
+		blameSource?: BlameSource;
 	}
 
-	let { ownerHandle, repoName, blob, prerenderedHTML, language }: Props = $props();
+	let { ownerHandle, repoName, blob, prerenderedHTML, language, blameSource }: Props = $props();
 
 	const rawHref = $derived(rawBlobHref(ownerHandle, repoName, blob.ref, blob.path));
 	const fileName = $derived(baseName(blob.path));
@@ -57,6 +59,16 @@
 	});
 
 	let wrap = $state(false);
+	let blame = $state(false);
+	// blame the commit these lines came from, not the branch name they were requested by: the
+	// mirror can be a push behind the knot that served the file, and an immutable sha makes it
+	// answer RefNotFound instead of blaming an older snapshot onto the rendered lines
+	const blameRequest = createBlame({
+		enabled: () => blame,
+		source: () => blameSource,
+		ref: () => blob.lastCommit?.hash ?? blob.ref,
+		path: () => blob.path
+	});
 
 	const textViewActive = $derived(
 		hasTextView(blob.kind) && view === "code" && !blob.fileTooLarge
@@ -108,10 +120,18 @@
 		lines={blob.lines}
 		bind:view
 		bind:wrap
+		bind:blame
 		{showWrap}
+		showBlame={blameSource !== undefined}
+		blameLoading={blameRequest.loading}
+		blameError={blameRequest.error}
 		copyText={blob.contents}
 	/>
 
+	{#if blameRequest.error}
+		<p role="alert" class="px-4 py-2 text-foreground-danger">{blameRequest.error}</p>
+	{/if}
+
 	{#if blob.lastCommit}
 		<LastCommitPanel {ownerHandle} {repoName} commit={blob.lastCommit} />
 	{/if}
@@ -160,6 +180,7 @@
 				{wrap}
 				{prerenderedHTML}
 				{onPostRender}
+				blame={blame ? blameRequest.runs : undefined}
 			/>
 		</div>
 	{:else}
diff --git a/web/src/lib/components/repo/CommitView.svelte b/web/src/lib/components/repo/CommitView.svelte
index d54debf14..63ef92ae8 100644
--- a/web/src/lib/components/repo/CommitView.svelte
+++ b/web/src/lib/components/repo/CommitView.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import type { ResourceUri } from "@atcute/lexicons";
+	import type { Did } from "@atcute/lexicons/syntax";
 	import { resolve } from "$app/paths";
 	import type { DiffFile, DiffStat } from "$lib/api/diff";
 	import type { PullDiff as MirrorDiff, PullDiffDeps } from "$lib/api/pullDiff";
@@ -14,6 +16,10 @@
 	interface Props {
 		ownerHandle: string;
 		repoName: string;
+		repoUri: ResourceUri;
+		// bobbin's repo did, which is how the mirror names this repo
+		repoDid?: Did;
+		bobbinUrl: string;
 		// the ref the page was loaded with. raw downloads only work for full hashes
 		ref: string;
 		commit: CommitDetail;
@@ -33,6 +39,9 @@
 	let {
 		ownerHandle,
 		repoName,
+		repoUri,
+		repoDid,
+		bobbinUrl,
 		ref,
 		commit,
 		parent = "",
@@ -73,6 +82,14 @@
 			stickyTop="viewport"
 		/>
 	{:else}
-		<DiffView {files} {stat} {diffStyle} {downloadUrls} {blobBase} {prerendered} />
+		<DiffView
+			{files}
+			{stat}
+			{diffStyle}
+			{downloadUrls}
+			{blobBase}
+			{prerendered}
+			blameSource={parent ? { bobbinUrl, repo: repoUri, repoDid, ref: parent } : undefined}
+		/>
 	{/if}
 </div>
diff --git a/web/src/lib/components/repo/DiffFileCard.svelte b/web/src/lib/components/repo/DiffFileCard.svelte
index 8b5485524..ecd48831b 100644
--- a/web/src/lib/components/repo/DiffFileCard.svelte
+++ b/web/src/lib/components/repo/DiffFileCard.svelte
@@ -9,6 +9,7 @@
 	import DiffCardChrome from "$lib/components/repo/DiffCardChrome.svelte";
 	import DiffStatPill from "$lib/components/repo/DiffStatPill.svelte";
 	import PierreDiff from "$lib/components/repo/PierreDiff.svelte";
+	import { createBlame, type BlameSource } from "$lib/components/repo/blame/request.svelte";
 	import type { DiffStyle } from "$lib/components/repo/pierre";
 
 	interface Props {
@@ -22,6 +23,9 @@
 		prerenderedHTML?: string;
 		// side-by-side or stacked
 		diffStyle?: DiffStyle;
+		blame?: boolean;
+		blameSource?: BlameSource & { ref: string };
+		blamePath?: string;
 		// blob route for the "view file" link, hidden when absent
 		blobUrl?: string;
 		open?: boolean;
@@ -36,10 +40,20 @@
 		fileDiff,
 		prerenderedHTML,
 		diffStyle = "unified",
+		blame = false,
+		blameSource,
+		blamePath,
 		blobUrl,
 		open = $bindable(true),
 		headerActions
 	}: Props = $props();
+
+	const blameRequest = createBlame({
+		enabled: () => blame && open && !file.is_binary,
+		source: () => blameSource,
+		ref: () => blameSource?.ref,
+		path: () => blamePath
+	});
 </script>
 
 <DiffCardChrome id="file-{name}" bind:open stickyTop="commit">
@@ -57,6 +71,9 @@
 	{/snippet}
 
 	{#snippet actions()}
+		{#if blameRequest.loading}
+			<span class="me-2 text-foreground-muted">Loading blame…</span>
+		{/if}
 		{#if blobUrl}
 			<Button
 				href={blobUrl as "/"}
@@ -80,10 +97,14 @@
 				class="justify-center p-4"
 			/>
 		{:else}
+			{#if blameRequest.error}
+				<p role="alert" class="px-4 py-2 text-foreground-danger">{blameRequest.error}</p>
+			{/if}
 			<PierreDiff
 				files={fileDiff ? [fileDiff] : []}
 				{diffStyle}
 				prerenderedHTML={[prerenderedHTML]}
+				blame={blame && open ? blameRequest.runs : undefined}
 			/>
 		{/if}
 	{/snippet}
diff --git a/web/src/lib/components/repo/DiffTopbar.svelte b/web/src/lib/components/repo/DiffTopbar.svelte
index 6c2d88034..ac2d4cda9 100644
--- a/web/src/lib/components/repo/DiffTopbar.svelte
+++ b/web/src/lib/components/repo/DiffTopbar.svelte
@@ -10,6 +10,7 @@
 	import type { DiffStyle } from "$lib/components/repo/pierre";
 	import Button from "$lib/components/ui/Button.svelte";
 	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
+	import Checkbox from "$lib/components/ui/Checkbox.svelte";
 	import type { Snippet } from "svelte";
 	import DiffStatPill from "$lib/components/repo/DiffStatPill.svelte";
 
@@ -25,6 +26,8 @@
 		onToggleFiles?: () => void;
 		allOpen?: boolean;
 		onSetAllOpen?: (open: boolean) => void;
+		blame?: boolean;
+		showBlame?: boolean;
 		// round/interdiff indicator slot, sits after the stats
 		center?: Snippet;
 		// subscription-toggle slot, pinned to the far end (pull review panel)
@@ -40,6 +43,8 @@
 		onToggleFiles,
 		allOpen = true,
 		onSetAllOpen,
+		blame = $bindable(false),
+		showBlame = false,
 		center,
 		actions
 	}: Props = $props();
@@ -70,6 +75,10 @@
 
 	<div class="grow"></div>
 
+	{#if showBlame}
+		<Checkbox bind:checked={blame} class="px-2 text-foreground-muted">Blame</Checkbox>
+	{/if}
+
 	{#if downloadUrls}
 		<!-- below md these crowd the topbar into page-level horizontal scroll -->
 		<span class="inline-flex gap-2">
diff --git a/web/src/lib/components/repo/DiffView.svelte b/web/src/lib/components/repo/DiffView.svelte
index 430835b6f..9001342e8 100644
--- a/web/src/lib/components/repo/DiffView.svelte
+++ b/web/src/lib/components/repo/DiffView.svelte
@@ -8,10 +8,15 @@
 	import DiffTopbar from "$lib/components/repo/DiffTopbar.svelte";
 	import { diffRowKey, toFileDiffMetadata } from "$lib/components/repo/fileDiff";
 	import type { DiffStyle } from "$lib/components/repo/pierre";
+	import type { BlameSource } from "$lib/components/repo/blame/request.svelte";
 	import { encodePathSegments } from "$lib/components/repo/urls";
 	import Bones from "$lib/components/ui/Bones.svelte";
 	import repoDiffviewSkeletonFixture from "$lib/bones/repo-diffview--skeleton-fixture.bones.json";
 
+	interface DiffBlameSource extends BlameSource {
+		ref: string;
+	}
+
 	interface Props {
 		files: DiffFile[];
 		loading?: boolean;
@@ -24,6 +29,7 @@
 		blobBase?: string;
 		// server-prerendered shadow dom per row key, only for the initial ssr
 		prerendered?: Record<string, string>;
+		blameSource?: DiffBlameSource;
 		// round/interdiff indicator slot in the topbar (pull pages)
 		topbarCenter?: Snippet;
 		// subscription-toggle slot at the topbar's far end (pull review panel)
@@ -39,6 +45,7 @@
 		downloadUrls,
 		blobBase,
 		prerendered,
+		blameSource,
 		topbarCenter,
 		topbarActions,
 		fileHeaderActions,
@@ -71,6 +78,7 @@
 	};
 
 	let filesOpen = $state(true);
+	let blame = $state(false);
 </script>
 
 {#if loading}
@@ -85,6 +93,8 @@
 			{filesOpen}
 			onToggleFiles={rows.length > 0 ? () => (filesOpen = !filesOpen) : undefined}
 			{allOpen}
+			bind:blame
+			showBlame={blameSource !== undefined && rows.some((row) => row.file.name.old !== "")}
 			onSetAllOpen={setAll}
 			center={topbarCenter}
 			actions={topbarActions}
@@ -119,6 +129,9 @@
 						fileDiff={row.fileDiff}
 						prerenderedHTML={row.prerenderedHTML}
 						{diffStyle}
+						{blame}
+						{blameSource}
+						blamePath={row.file.name.old || undefined}
 						blobUrl={row.blobUrl}
 						bind:open={() => isOpen(row.key), (open) => (openStates[row.key] = open)}
 						headerActions={fileHeaderActions}
diff --git a/web/src/lib/components/repo/PierreDiff.svelte b/web/src/lib/components/repo/PierreDiff.svelte
index c9b6f789e..ad0597bcc 100644
--- a/web/src/lib/components/repo/PierreDiff.svelte
+++ b/web/src/lib/components/repo/PierreDiff.svelte
@@ -1,11 +1,14 @@
 <script lang="ts">
 	import { untrack } from "svelte";
-	import { FileDiff, type FileDiffMetadata } from "@pierre/diffs";
+	import { FileDiff, type FileDiffMetadata, type FileDiffOptions } from "@pierre/diffs";
 	import {
 		clearPierreRender,
 		pierreDiffOptions,
 		type DiffStyle
 	} from "$lib/components/repo/pierre";
+	import BlameOverlay from "$lib/components/repo/blame/BlameOverlay.svelte";
+	import { BlameHover } from "$lib/components/repo/blame/hover.svelte";
+	import type { Blame } from "$lib/components/repo/blame/types";
 
 	interface Props {
 		files: FileDiffMetadata[];
@@ -14,11 +17,32 @@
 		// server-prerendered shadow dom, aligned with files. only set for the
 		// initial ssr, client navigations let pierre paint on its own
 		prerenderedHTML?: (string | undefined)[];
+		// one run per stretch of lines sharing a commit, absent when blame is off
+		blame?: Blame;
 	}
 
-	let { files, diffStyle = "unified", prerenderedHTML = [] }: Props = $props();
+	let { files, diffStyle = "unified", prerenderedHTML = [], blame }: Props = $props();
 
 	let container: HTMLElement | undefined = $state();
+	let wrapper: HTMLElement | undefined = $state();
+
+	const hover = new BlameHover(() => wrapper);
+
+	// an added line exists in no commit yet, only context and deletions carry
+	// history worth blaming
+	const options = (style: DiffStyle): FileDiffOptions<undefined> => ({
+		...pierreDiffOptions(style),
+		onLineEnter: ({ lineNumber, lineElement, lineType, event }) => {
+			if (!blame || event.pointerType === "touch") return;
+			if (lineType === "change-addition") return hover.hide();
+			hover.enter(lineNumber, lineElement);
+		},
+		onLineLeave: () => hover.leave()
+	});
+
+	$effect(() => {
+		if (!blame) hover.hide();
+	});
 
 	let mounted: { instance: FileDiff; file: FileDiffMetadata }[] = [];
 	// the style at hydrate time, the options effect skips right after a
@@ -44,11 +68,7 @@
 				element.shadowRoot?.querySelector("[data-dehydrated]") == null
 			)
 				clearPierreRender(element);
-			const instance = new FileDiff(
-				pierreDiffOptions(untrack(() => diffStyle)),
-				undefined,
-				true
-			);
+			const instance = new FileDiff(options(untrack(() => diffStyle)), undefined, true);
 			instance.hydrate({
 				fileDiff: file,
 				fileContainer: element,
@@ -72,19 +92,24 @@
 		if (style === mountedStyle) return;
 		mountedStyle = style;
 		for (const { instance, file } of mounted) {
-			instance.setOptions(pierreDiffOptions(style));
+			instance.setOptions(options(style));
 			instance.render({ fileDiff: file, forceRender: true });
 		}
 	});
 </script>
 
-<div bind:this={container} class="flex flex-col gap-4">
-	{#each files, index (index)}
-		<diffs-container class="diffs-container">
-			{#if prerenderedHTML[index]}
-				<!-- eslint-disable-next-line svelte/no-at-html-tags -- pierre's own renderer output, token text is escaped by its hast builder -->
-				<template shadowrootmode="open">{@html prerenderedHTML[index]}</template>
-			{/if}
-		</diffs-container>
-	{/each}
+<div bind:this={wrapper} class="relative">
+	<div bind:this={container} class="flex flex-col gap-4">
+		{#each files, index (index)}
+			<diffs-container class="diffs-container">
+				{#if prerenderedHTML[index]}
+					<!-- eslint-disable-next-line svelte/no-at-html-tags -- pierre's own renderer output, token text is escaped by its hast builder -->
+					<template shadowrootmode="open">{@html prerenderedHTML[index]}</template>
+				{/if}
+			</diffs-container>
+		{/each}
+	</div>
+	{#if blame}
+		<BlameOverlay {blame} {hover} />
+	{/if}
 </div>
diff --git a/web/src/lib/components/repo/PierreFile.svelte b/web/src/lib/components/repo/PierreFile.svelte
index 8ee9f360c..f21843c66 100644
--- a/web/src/lib/components/repo/PierreFile.svelte
+++ b/web/src/lib/components/repo/PierreFile.svelte
@@ -2,6 +2,9 @@
 	import { untrack } from "svelte";
 	import { File, type FileOptions } from "@pierre/diffs";
 	import { clearPierreRender, pierreFileOptions } from "$lib/components/repo/pierre";
+	import BlameOverlay from "$lib/components/repo/blame/BlameOverlay.svelte";
+	import { BlameHover } from "$lib/components/repo/blame/hover.svelte";
+	import type { Blame } from "$lib/components/repo/blame/types";
 
 	interface Props {
 		// used for the header and to infer the highlighting language
@@ -13,11 +16,30 @@
 		prerenderedHTML?: string;
 		// forwarded to pierre, fires after every (async-safe) render pass
 		onPostRender?: FileOptions<undefined>["onPostRender"];
+		// one run per stretch of lines sharing a commit, absent when blame is off
+		blame?: Blame;
 	}
 
-	let { name, contents, wrap = false, prerenderedHTML, onPostRender }: Props = $props();
+	let { name, contents, wrap = false, prerenderedHTML, onPostRender, blame }: Props = $props();
 
 	let element: HTMLElement | undefined = $state();
+	let wrapper: HTMLElement | undefined = $state();
+
+	const hover = new BlameHover(() => wrapper);
+
+	const options = (forWrap: boolean): FileOptions<undefined> => ({
+		...pierreFileOptions(forWrap),
+		onPostRender,
+		onLineEnter: ({ lineNumber, lineElement, event }) => {
+			if (!blame || event.pointerType === "touch") return;
+			hover.enter(lineNumber, lineElement);
+		},
+		onLineLeave: () => hover.leave()
+	});
+
+	$effect(() => {
+		if (!blame) hover.hide();
+	});
 
 	let instance: File | undefined;
 
@@ -28,17 +50,12 @@
 		if (!host) return;
 		// scroll and wrap lay out differently enough in grid to re-hydrate on
 		// toggle, and the toggle is rare
-		const options: FileOptions<undefined> = {
-			...pierreFileOptions(wrap),
-			onPostRender
-		};
-
 		// sveltekit re-runs the load on hydration, the prop never reaches the
 		// client. pierre marks its ssr output with data-dehydrated. a wrap toggle
 		// lands here with the previous render: drop it, keep pierre's style nodes
 		const dehydrated = host.shadowRoot?.querySelector("[data-dehydrated]") != null;
 		if (prerenderedHTML === undefined && !dehydrated) clearPierreRender(host);
-		const created = new File(options, undefined, true);
+		const created = new File(options(wrap), undefined, true);
 		// untracked, the render effect below owns updates
 		created.hydrate({
 			file: untrack(() => ({ name, contents })),
@@ -66,9 +83,14 @@
 	});
 </script>
 
-<diffs-container bind:this={element} class="diffs-container">
-	{#if prerenderedHTML}
-		<!-- eslint-disable-next-line svelte/no-at-html-tags -- pierre's own renderer output, token text is escaped by its hast builder -->
-		<template shadowrootmode="open">{@html prerenderedHTML}</template>
+<div bind:this={wrapper} class="relative">
+	<diffs-container bind:this={element} class="diffs-container">
+		{#if prerenderedHTML}
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -- pierre's own renderer output, token text is escaped by its hast builder -->
+			<template shadowrootmode="open">{@html prerenderedHTML}</template>
+		{/if}
+	</diffs-container>
+	{#if blame}
+		<BlameOverlay {blame} {hover} />
 	{/if}
-</diffs-container>
+</div>
diff --git a/web/src/lib/components/repo/blame/BlameChip.svelte b/web/src/lib/components/repo/blame/BlameChip.svelte
new file mode 100644
index 000000000..439529c9f
--- /dev/null
+++ b/web/src/lib/components/repo/blame/BlameChip.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+	import Avatar from "$lib/components/ui/Avatar.svelte";
+	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
+	import { formatDateTime } from "$lib/format";
+	import type { BlameCommit } from "$lib/components/repo/blame/types";
+
+	interface Props {
+		commit: BlameCommit;
+		top: number;
+		right: number;
+		height: number;
+		onKeep: () => void;
+		onLeave: () => void;
+	}
+
+	let { commit, top, right, height, onKeep, onLeave }: Props = $props();
+
+	const author = $derived(commit.author);
+	const label = $derived(`${commit.subject}\n${commit.sha} · ${formatDateTime(commit.when)}`);
+
+	let element = $state<HTMLElement>();
+
+	// handlers live here rather than in the markup: a div carrying pointer
+	// handlers has no honest aria role, same trade-off Hovercard takes
+	$effect(() => {
+		const node = element;
+		if (!node) return;
+		node.addEventListener("pointerenter", onKeep);
+		node.addEventListener("pointerleave", onLeave);
+		return () => {
+			node.removeEventListener("pointerenter", onKeep);
+			node.removeEventListener("pointerleave", onLeave);
+		};
+	});
+</script>
+
+<div
+	bind:this={element}
+	class="chip"
+	style="top: {top}px; right: {right}px; height: {height}px"
+	title={label}
+>
+	<span class="who">
+		{#if author.did}
+			<Avatar did={author.did} handle={author.handle} size="mini" />
+		{/if}
+		<span>{author.handle ?? author.name}</span>
+	</span>
+	<span aria-hidden="true">·</span>
+	<TimeAgo value={commit.when} variant="full" />
+</div>
+
+<style>
+	.chip {
+		position: absolute;
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding-left: 3ch;
+		font-family: var(--font-mono);
+		font-size: var(--diffs-font-size, 0.875rem);
+		color: var(--color-foreground-placeholder);
+		white-space: nowrap;
+		/* the code slides under the chip on a long line */
+		background: linear-gradient(
+			to right,
+			transparent,
+			var(--color-background-default) 2ch,
+			var(--color-background-default)
+		);
+	}
+
+	.who {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+	}
+</style>
diff --git a/web/src/lib/components/repo/blame/BlameOverlay.svelte b/web/src/lib/components/repo/blame/BlameOverlay.svelte
new file mode 100644
index 000000000..b1c4fff45
--- /dev/null
+++ b/web/src/lib/components/repo/blame/BlameOverlay.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import BlameChip from "$lib/components/repo/blame/BlameChip.svelte";
+	import type { BlameHover } from "$lib/components/repo/blame/hover.svelte";
+	import { commitForLine, type Blame } from "$lib/components/repo/blame/types";
+
+	interface Props {
+		blame: Blame;
+		hover: BlameHover;
+	}
+
+	let { blame, hover }: Props = $props();
+
+	const commit = $derived(
+		hover.line === undefined ? undefined : commitForLine(blame, hover.line)
+	);
+
+	// the chip's position comes from the row it points at, so a scroll that
+	// moves the row without moving the pointer has to be followed
+	$effect(() => {
+		if (hover.line === undefined) return;
+		let frame = 0;
+		const sync = () => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => hover.measure());
+		};
+		window.addEventListener("scroll", sync, { passive: true, capture: true });
+		window.addEventListener("resize", sync);
+		return () => {
+			cancelAnimationFrame(frame);
+			window.removeEventListener("scroll", sync, { capture: true });
+			window.removeEventListener("resize", sync);
+		};
+	});
+</script>
+
+{#if commit}
+	<BlameChip
+		{commit}
+		top={hover.top}
+		right={hover.right}
+		height={hover.height}
+		onKeep={() => hover.keep()}
+		onLeave={() => hover.leave()}
+	/>
+{/if}
diff --git a/web/src/lib/components/repo/blame/hover.svelte.ts b/web/src/lib/components/repo/blame/hover.svelte.ts
new file mode 100644
index 000000000..29e3b65fd
--- /dev/null
+++ b/web/src/lib/components/repo/blame/hover.svelte.ts
@@ -0,0 +1,54 @@
+// pierre hands us the hovered row element from inside its shadow root, so the
+// chip is one floating node in the light dom rather than a decoration per line.
+
+export class BlameHover {
+	line = $state<number | undefined>(undefined);
+	top = $state(0);
+	height = $state(0);
+	right = $state(0);
+
+	#wrapper: () => HTMLElement | undefined;
+	#row: HTMLElement | undefined;
+	#timer: ReturnType<typeof setTimeout> | undefined;
+
+	constructor(wrapper: () => HTMLElement | undefined) {
+		this.#wrapper = wrapper;
+	}
+
+	enter(line: number, row: HTMLElement) {
+		clearTimeout(this.#timer);
+		this.#row = row;
+		this.line = line;
+		this.measure();
+	}
+
+	// the pointer leaving the row may only mean it reached the chip, so give it
+	// a moment to arrive before the chip goes away
+	leave() {
+		clearTimeout(this.#timer);
+		this.#timer = setTimeout(() => this.hide(), 120);
+	}
+
+	keep() {
+		clearTimeout(this.#timer);
+	}
+
+	hide() {
+		clearTimeout(this.#timer);
+		this.#row = undefined;
+		this.line = undefined;
+	}
+
+	measure() {
+		const wrapper = this.#wrapper();
+		const row = this.#row;
+		if (!wrapper || !row) return;
+		const box = wrapper.getBoundingClientRect();
+		const rect = row.getBoundingClientRect();
+		this.top = rect.top - box.top;
+		this.height = rect.height;
+		// a line wider than the view puts its right edge off screen, pin to the
+		// scroll port instead
+		this.right = Math.max(0, box.right - rect.right);
+	}
+}
diff --git a/web/src/lib/components/repo/blame/request.stories.svelte b/web/src/lib/components/repo/blame/request.stories.svelte
new file mode 100644
index 000000000..f2f1e7dff
--- /dev/null
+++ b/web/src/lib/components/repo/blame/request.stories.svelte
@@ -0,0 +1,67 @@
+<script module lang="ts">
+	import type { ResourceUri } from "@atcute/lexicons";
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { expect, fn, userEvent, waitFor, within } from "storybook/test";
+	import { createBlame } from "$lib/components/repo/blame/request.svelte";
+
+	const { Story } = defineMeta({ title: "Repo/Blame request" });
+	const emptyBlame = (): Response =>
+		new Response(JSON.stringify({ commit: "abc123", commits: [], runs: [] }), {
+			status: 200,
+			headers: { "content-type": "application/json" }
+		});
+</script>
+
+<script lang="ts">
+	let enabled = $state(false);
+	const request = createBlame({
+		enabled: () => enabled,
+		source: () => ({
+			bobbinUrl: "https://bobbin.example",
+			repo: "at://did:plc:dawn/sh.tangled.repo/core" as ResourceUri
+		}),
+		ref: () => "main",
+		path: () => "README.md"
+	});
+</script>
+
+<Story
+	name="Retries failures and retains empty results"
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const originalFetch = globalThis.fetch;
+		const fetchMock = fn<typeof globalThis.fetch>()
+			.mockRejectedValueOnce(new Error("offline"))
+			.mockResolvedValue(emptyBlame());
+		globalThis.fetch = fetchMock;
+		try {
+			const toggle = canvas.getByRole("button");
+			await userEvent.click(toggle);
+			await waitFor(() =>
+				expect(canvas.getByRole("status")).toHaveTextContent("Could not load")
+			);
+
+			await userEvent.click(toggle);
+			await userEvent.click(toggle);
+			await waitFor(() => expect(canvas.getByRole("status")).toHaveTextContent("loaded:0"));
+			expect(fetchMock).toHaveBeenCalledTimes(2);
+
+			await userEvent.click(toggle);
+			await userEvent.click(toggle);
+			await waitFor(() => expect(toggle).toHaveTextContent("Disable"));
+			expect(fetchMock).toHaveBeenCalledTimes(2);
+		} finally {
+			globalThis.fetch = originalFetch;
+		}
+	}}
+>
+	<button type="button" onclick={() => (enabled = !enabled)}>
+		{enabled ? "Disable" : "Enable"}
+	</button>
+	<p role="status">
+		{request.loading
+			? "loading"
+			: (request.error ??
+				(request.runs === undefined ? "idle" : `loaded:${request.runs.length}`))}
+	</p>
+</Story>
diff --git a/web/src/lib/components/repo/blame/request.svelte.ts b/web/src/lib/components/repo/blame/request.svelte.ts
new file mode 100644
index 000000000..9ef4e275c
--- /dev/null
+++ b/web/src/lib/components/repo/blame/request.svelte.ts
@@ -0,0 +1,82 @@
+import type { ResourceUri } from "@atcute/lexicons";
+import type { Did } from "@atcute/lexicons/syntax";
+import { blameFor, hydrateBlameAuthors } from "$lib/api/blame";
+import { createBobbinClient } from "$lib/api/client";
+import { errorMessage } from "$lib/api/load";
+import type { Blame } from "$lib/components/repo/blame/types";
+
+export interface BlameSource {
+	bobbinUrl: string;
+	repo: ResourceUri;
+	// the mirror stores repos under bobbin's repo did, not the owner's; absent
+	// when bobbin never indexed the repo, and then only the knot can answer
+	repoDid?: Did;
+}
+
+interface BlameOptions {
+	enabled: () => boolean;
+	source: () => BlameSource | undefined;
+	ref: () => string | undefined;
+	path: () => string | undefined;
+}
+
+export const createBlame = (options: BlameOptions) => {
+	let runs = $state<Blame | undefined>();
+	let loading = $state(false);
+	let error = $state<string | null>(null);
+	let loadedKey: string | undefined;
+
+	$effect(() => {
+		const enabled = options.enabled();
+		const source = options.source();
+		const ref = options.ref();
+		const path = options.path();
+		if (!enabled || !source || !ref || !path) {
+			loading = false;
+			error = null;
+			return;
+		}
+		const key = JSON.stringify([source.bobbinUrl, source.repo, source.repoDid, ref, path]);
+		if (loadedKey === key && runs !== undefined) return;
+		loadedKey = key;
+
+		const controller = new AbortController();
+		const { signal } = controller;
+		const ctx = createBobbinClient({ serviceUrl: source.bobbinUrl, fetch: globalThis.fetch });
+		runs = undefined;
+		loading = true;
+		error = null;
+
+		blameFor(ctx, source, ref, path, { signal })
+			.then((found) => {
+				if (signal.aborted) return;
+				runs = found;
+				loading = false;
+				hydrateBlameAuthors(found, ctx)
+					.then((hydrated) => {
+						if (!signal.aborted) runs = hydrated;
+					})
+					.catch(() => {});
+			})
+			.catch((cause: unknown) => {
+				if (signal.aborted) return;
+				runs = undefined;
+				loading = false;
+				error = errorMessage(cause, "Could not load blame.");
+			});
+
+		return () => controller.abort();
+	});
+
+	return {
+		get runs() {
+			return runs;
+		},
+		get loading() {
+			return loading;
+		},
+		get error() {
+			return error;
+		}
+	};
+};
diff --git a/web/src/lib/components/repo/blame/types.test.ts b/web/src/lib/components/repo/blame/types.test.ts
new file mode 100644
index 000000000..f537cd501
--- /dev/null
+++ b/web/src/lib/components/repo/blame/types.test.ts
@@ -0,0 +1,30 @@
+import { describe, expect, it } from "vitest";
+import { commitForLine, type Blame } from "$lib/components/repo/blame/types";
+
+const commit = (sha: string) => ({
+	sha,
+	subject: sha,
+	when: "2026-06-01T12:30:00Z",
+	author: { name: "dawn", email: "dawn@example.com" }
+});
+
+const blame: Blame = [
+	{ start: 1, count: 2, commit: commit("aaa") },
+	{ start: 3, count: 4, commit: commit("bbb") },
+	{ start: 7, count: 1, commit: commit("ccc") }
+];
+
+describe("commitForLine", () => {
+	it("finds both ends of every one-based run", () => {
+		expect(commitForLine(blame, 1)?.sha).toBe("aaa");
+		expect(commitForLine(blame, 2)?.sha).toBe("aaa");
+		expect(commitForLine(blame, 3)?.sha).toBe("bbb");
+		expect(commitForLine(blame, 6)?.sha).toBe("bbb");
+		expect(commitForLine(blame, 7)?.sha).toBe("ccc");
+	});
+
+	it("returns undefined outside the blamed lines", () => {
+		expect(commitForLine(blame, 0)).toBeUndefined();
+		expect(commitForLine(blame, 8)).toBeUndefined();
+	});
+});
diff --git a/web/src/lib/components/repo/blame/types.ts b/web/src/lib/components/repo/blame/types.ts
new file mode 100644
index 000000000..01b96fc54
--- /dev/null
+++ b/web/src/lib/components/repo/blame/types.ts
@@ -0,0 +1,35 @@
+export interface BlameAuthor {
+	name: string;
+	email: string;
+	did?: string;
+	handle?: string;
+}
+
+export interface BlameCommit {
+	sha: string;
+	subject: string;
+	when: string;
+	author: BlameAuthor;
+}
+
+// one entry per run of consecutive lines sharing a commit, sorted by start
+export interface BlameRun {
+	start: number;
+	count: number;
+	commit: BlameCommit;
+}
+
+export type Blame = BlameRun[];
+
+export const commitForLine = (blame: Blame, line: number): BlameCommit | undefined => {
+	let low = 0;
+	let high = blame.length - 1;
+	while (low <= high) {
+		const mid = (low + high) >> 1;
+		const run = blame[mid];
+		if (line < run.start) high = mid - 1;
+		else if (line >= run.start + run.count) low = mid + 1;
+		else return run.commit;
+	}
+	return undefined;
+};
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 85c0a8960..7bc1d593c 100644
--- a/web/src/routes/[handle]/[repo]/blob/[ref]/[...path]/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/blob/[ref]/[...path]/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import type { ResourceUri } from "@atcute/lexicons";
+	import type { Did } from "@atcute/lexicons/syntax";
 	import { isMarkdownFile } from "$lib/markup";
 	import Bones from "$lib/components/ui/Bones.svelte";
 	import blobCode from "$lib/bones/repo-blobview--code-file.bones.json";
@@ -20,5 +22,10 @@
 		repoName={repo.name}
 		{blob}
 		prerenderedHTML={blob.prerenderedHTML}
+		blameSource={{
+			bobbinUrl: data.publicConfig.bobbinUrl,
+			repo: repo.uri as ResourceUri,
+			repoDid: repo.repoDid as Did | undefined
+		}}
 	/>
 </Pending>
diff --git a/web/src/routes/[handle]/[repo]/commit/[ref]/+page.svelte b/web/src/routes/[handle]/[repo]/commit/[ref]/+page.svelte
index 6040476d3..4d8a20699 100644
--- a/web/src/routes/[handle]/[repo]/commit/[ref]/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/commit/[ref]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { ResourceUri } from "@atcute/lexicons";
 	import { page } from "$app/state";
 	import { createBobbinClient } from "$lib/api/client";
 	import { knotMirrorTarget } from "$lib/api/gitclient";
@@ -51,6 +52,9 @@
 	<CommitView
 		ownerHandle={repo.ownerHandle}
 		repoName={repo.name}
+		repoUri={repo.uri as ResourceUri}
+		repoDid={commitPage.repoDid}
+		bobbinUrl={data.publicConfig.bobbinUrl}
 		ref={data.ref}
 		{commit}
 		parent={commitPage.parent}