diff --git a/web/src/lib/components/repo/RefChip.stories.svelte b/web/src/lib/components/repo/RefChip.stories.svelte
index d2901e117..b886130ad 100644
--- a/web/src/lib/components/repo/RefChip.stories.svelte
+++ b/web/src/lib/components/repo/RefChip.stories.svelte
@@ -7,16 +7,25 @@
 
 	const linksToTree = async ({ canvas }: PlayContext) => {
 		await expect(canvas.getByText("at")).toBeVisible();
-		await expect(canvas.getByRole("link", { name: "main" })).toHaveAttribute(
+		await expect(canvas.getByRole("link", { name: "Browse main" })).toHaveAttribute(
 			"href",
 			"/dawn/tangled/tree/main"
 		);
 	};
 
 	const encodesRef = async ({ canvas }: PlayContext) => {
-		await expect(canvas.getByRole("link", { name: "feature/split-diffs" })).toHaveAttribute(
+		await expect(
+			canvas.getByRole("link", { name: "Browse feature/split-diffs" })
+		).toHaveAttribute("href", "/dawn/tangled/tree/feature%2Fsplit-diffs");
+	};
+
+	const namesTheCommit = async ({ canvas }: PlayContext) => {
+		await expect(canvas.getByText("at commit")).toBeVisible();
+		const link = canvas.getByRole("link", { name: "Browse commit a76742de" });
+		await expect(link).toHaveTextContent("a76742de");
+		await expect(link).toHaveAttribute(
 			"href",
-			"/dawn/tangled/tree/feature%2Fsplit-diffs"
+			"/dawn/tangled/tree/a76742de1f9c4b0e8a3d5f6072819abcdef01234"
 		);
 	};
 
@@ -34,3 +43,8 @@
 
 <Story name="Branch" play={linksToTree} />
 <Story name="Branch with slash" args={{ ref: "feature/split-diffs" }} play={encodesRef} />
+<Story
+	name="Commit"
+	args={{ ref: "a76742de1f9c4b0e8a3d5f6072819abcdef01234" }}
+	play={namesTheCommit}
+/>
diff --git a/web/src/lib/components/repo/RefChip.svelte b/web/src/lib/components/repo/RefChip.svelte
index 7100366d1..9f465b99a 100644
--- a/web/src/lib/components/repo/RefChip.svelte
+++ b/web/src/lib/components/repo/RefChip.svelte
@@ -10,14 +10,20 @@
 
 	let { ownerHandle, repoName, ref, class: className = "" }: Props = $props();
 
+	const isCommit = $derived(/^[0-9a-f]{7,40}$/.test(ref));
+	const label = $derived(isCommit ? ref.slice(0, 8) : ref);
+	const description = $derived(isCommit ? `commit ${label}` : label);
+
 	const treeHref = $derived(
 		resolve(`/${ownerHandle}/${repoName}/tree/${encodeURIComponent(ref)}` as "/")
 	);
 </script>
 
-<div
-	class="flex w-fit items-center justify-center gap-1 rounded-sm border border-background-canvas bg-background-canvas px-2 py-1 whitespace-nowrap {className}"
->
-	<span class="text-foreground-muted">at</span>
-	<a href={treeHref} class="text-foreground-default no-underline hover:underline">{ref}</a>
+<div class="flex w-fit items-center justify-center gap-1 whitespace-nowrap {className}">
+	<span class="text-foreground-muted">at{isCommit ? " commit" : ""}</span>
+	<a
+		href={treeHref}
+		aria-label="Browse {description}"
+		class="text-foreground-default no-underline hover:underline">{label}</a
+	>
 </div>