From ac4e983ae36f2af9c322714796cc2558287a35ea Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Fri, 28 Aug 2026 19:54:06 +0100
Subject: [PATCH] web/components: improve PR UI, add stories for all components

Signed-off-by: oppiliappan <me@oppi.li>
---
 .../lib/components/repo/DiffStatPill.svelte   |   8 +-
 .../repo/pipelines/PipelineEmptyState.svelte  |   2 +-
 .../repo/pulls/PullActions.stories.svelte     |  76 ++++++++
 .../pulls/PullCommitListDiff.stories.svelte   | 104 ++++++++++
 .../pulls/PullCommitListHeader.stories.svelte | 137 ++++++++++++++
 .../PullCommitListInterdiff.stories.svelte    | 118 ++++++++++++
 .../repo/pulls/PullDiff.stories.svelte        | 177 ++++++++++++++++++
 .../lib/components/repo/pulls/PullDiff.svelte |  15 +-
 .../repo/pulls/PullDiffFileCard.svelte        |   4 +-
 .../repo/pulls/PullDiscussion.stories.svelte  | 124 ++++++++++++
 .../repo/pulls/PullDiscussion.svelte          |   2 +-
 .../repo/pulls/PullReviewCommentForm.svelte   |   2 +-
 .../[version]/[[range]]/PullViewPage.svelte   |  27 +--
 13 files changed, 765 insertions(+), 31 deletions(-)
 create mode 100644 web/src/lib/components/repo/pulls/PullActions.stories.svelte
 create mode 100644 web/src/lib/components/repo/pulls/PullCommitListDiff.stories.svelte
 create mode 100644 web/src/lib/components/repo/pulls/PullCommitListHeader.stories.svelte
 create mode 100644 web/src/lib/components/repo/pulls/PullCommitListInterdiff.stories.svelte
 create mode 100644 web/src/lib/components/repo/pulls/PullDiff.stories.svelte
 create mode 100644 web/src/lib/components/repo/pulls/PullDiscussion.stories.svelte

diff --git a/web/src/lib/components/repo/DiffStatPill.svelte b/web/src/lib/components/repo/DiffStatPill.svelte
index 7a8005408..7604defae 100644
--- a/web/src/lib/components/repo/DiffStatPill.svelte
+++ b/web/src/lib/components/repo/DiffStatPill.svelte
@@ -13,24 +13,24 @@
 	<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"
+				class="rounded-l bg-background-success-subtle px-1 py-0.5 text-foreground-success select-none"
 			>
 				+{stat.insertions}
 			</span>
 			<span
-				class="rounded-r bg-background-danger-subtle p-1 text-foreground-danger select-none"
+				class="rounded-r bg-background-danger-subtle px-1 py-0.5 text-foreground-danger select-none"
 			>
 				-{stat.deletions}
 			</span>
 		{:else if stat.insertions > 0}
 			<span
-				class="rounded-sm bg-background-success-subtle p-1 text-foreground-success select-none"
+				class="rounded-sm bg-background-success-subtle px-1 py-0.5 text-foreground-success select-none"
 			>
 				+{stat.insertions}
 			</span>
 		{:else}
 			<span
-				class="rounded-sm bg-background-danger-subtle p-1 text-foreground-danger select-none"
+				class="rounded-sm bg-background-danger-subtle px-1 py-0.5 text-foreground-danger select-none"
 			>
 				-{stat.deletions}
 			</span>
diff --git a/web/src/lib/components/repo/pipelines/PipelineEmptyState.svelte b/web/src/lib/components/repo/pipelines/PipelineEmptyState.svelte
index f9a13601c..77f8de81d 100644
--- a/web/src/lib/components/repo/pipelines/PipelineEmptyState.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineEmptyState.svelte
@@ -6,7 +6,7 @@
 			root: "flex flex-col items-center gap-6 rounded-sm border border-border-default bg-background-default px-6 py-12 text-center shadow-xs",
 			icon: "size-16 text-foreground-disabled",
 			intro: "flex flex-col gap-2",
-			heading: "typography-paragraph-large text-foreground-subtle italic",
+			heading: "typography-paragraph-large text-foreground-subtle",
 			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",
diff --git a/web/src/lib/components/repo/pulls/PullActions.stories.svelte b/web/src/lib/components/repo/pulls/PullActions.stories.svelte
new file mode 100644
index 000000000..4b301e030
--- /dev/null
+++ b/web/src/lib/components/repo/pulls/PullActions.stories.svelte
@@ -0,0 +1,76 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import PullActions from "./PullActions.svelte";
+	import type { PullState } from "$lib/api/records";
+
+	const { Story } = defineMeta({
+		title: "Repo/Pulls/PullActions",
+		component: PullActions,
+		tags: ["autodocs"],
+		args: {
+			pullState: "open" as PullState,
+			canChangeState: true,
+			canMerge: true
+		}
+	});
+</script>
+
+<script lang="ts">
+	import type { MergeStyle } from "./PullActions.svelte";
+
+	// the story is the owner: it holds the pull's state and only moves it when a
+	// callback fires, same shape as the real page's setStatus/doMerge actions
+	let pullState = $state<PullState>("open");
+	let calls = $state<string[]>([]);
+</script>
+
+<Story name="Open, can close">
+	{#snippet template(args)}
+		<div class="w-100 bg-background-default p-4">
+			<PullActions {...args} canMerge={false} />
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="Open, can merge (rebase armed)" />
+
+<!-- the merge check found conflicts: rebase is blocked, manual mark-as-merged still isn't -->
+<Story name="Merge conflict blocks rebase" args={{ conflicted: true }} />
+
+<Story name="Loading" args={{ loading: true }} />
+
+<Story name="Error" args={{ error: "Merge failed: 3 files conflict with the target branch." }} />
+
+<Story name="Closed, can reopen" args={{ pullState: "closed" as PullState, canMerge: false }} />
+
+<!-- merged pulls show neither Close/Reopen nor the merge split button -->
+<Story
+	name="Merged"
+	args={{ pullState: "merged" as PullState, canChangeState: false, canMerge: false }}
+/>
+
+<Story name="Read-only viewer" args={{ canChangeState: false, canMerge: false }} />
+
+<Story name="Interactive">
+	{#snippet template(args)}
+		<div class="w-100 space-y-2 bg-background-default p-4">
+			<PullActions
+				{...args}
+				{pullState}
+				onChangeState={(next) => {
+					pullState = next;
+					calls.push(`state -> ${next}`);
+				}}
+				onMerge={(style: MergeStyle) => {
+					pullState = "merged";
+					calls.push(`merge (${style})`);
+				}}
+			/>
+			<output class="block space-y-1 typography-monospace-small">
+				{#each calls as call, i (i)}
+					<p>{call}</p>
+				{/each}
+			</output>
+		</div>
+	{/snippet}
+</Story>
diff --git a/web/src/lib/components/repo/pulls/PullCommitListDiff.stories.svelte b/web/src/lib/components/repo/pulls/PullCommitListDiff.stories.svelte
new file mode 100644
index 000000000..398012674
--- /dev/null
+++ b/web/src/lib/components/repo/pulls/PullCommitListDiff.stories.svelte
@@ -0,0 +1,104 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import type { ComponentProps } from "svelte";
+	import PullCommitListDiff from "./PullCommitListDiff.svelte";
+	import { pipelinesByCommitHash } from "$fixtures/pipelines";
+	import type { CommitSummary } from "$lib/components/repo/types";
+
+	type Props = ComponentProps<typeof PullCommitListDiff>;
+
+	const commits: CommitSummary[] = [
+		{
+			hash: "d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1d2e3",
+			shortHash: "d4e5f6a7",
+			subject: "tidy diff toolbar spacing",
+			body: "",
+			authorName: "oppi",
+			authorEmail: "oppi@example.test",
+			when: "2026-08-20T15:00:00Z",
+			changeId: "zsuskuln"
+		},
+		{
+			hash: "c3d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1d2",
+			shortHash: "c3d4e5f6",
+			subject: "fix pierre hydrate leak on version switch",
+			body: "reuses `{#key diff}` so the fill pool tears down cleanly.",
+			authorName: "oppi",
+			authorEmail: "oppi@example.test",
+			when: "2026-08-20T14:30:00Z",
+			changeId: "rlvkpxrz"
+		},
+		{
+			hash: "b2c3d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1",
+			shortHash: "b2c3d4e5",
+			subject: "add interdiff change-id narrowing",
+			body: "",
+			authorName: "anirudh",
+			authorEmail: "anirudh@example.test",
+			when: "2026-08-19T11:00:00Z",
+			changeId: "kkmtprmw"
+		}
+	];
+
+	const { Story } = defineMeta({
+		title: "Repo/Pulls/PullCommitListDiff",
+		component: PullCommitListDiff,
+		tags: ["autodocs"],
+		args: { commits, commitRange: { start: 0, end: commits.length - 1 } }
+	});
+</script>
+
+<script lang="ts">
+	import type { Range } from "$lib/components/ui/RangeSelector.svelte";
+
+	// the story is the owner: it holds the picked range and only moves it when
+	// `oncommitCommits` asks, same as the real page's confirmCommits
+	let picked = $state<Range>({ start: 0, end: commits.length - 1 });
+</script>
+
+{#snippet frame(args: Props)}
+	<div class="w-150 rounded-sm border border-border-default bg-background-default p-4">
+		<PullCommitListDiff {...args} />
+	</div>
+{/snippet}
+
+<Story name="Whole version selected">
+	{#snippet template(args)}
+		{@render frame(args)}
+	{/snippet}
+</Story>
+
+<Story name="Narrowed to the latest commit" args={{ commitRange: { start: 0, end: 0 } }}>
+	{#snippet template(args)}
+		{@render frame(args)}
+	{/snippet}
+</Story>
+
+<Story
+	name="With pipeline statuses"
+	args={{
+		pipelineStatuses: Promise.resolve(
+			pipelinesByCommitHash(commits.map((commit) => commit.hash))
+		)
+	}}
+>
+	{#snippet template(args)}
+		{@render frame(args)}
+	{/snippet}
+</Story>
+
+<Story name="Interactive">
+	{#snippet template(args)}
+		<div
+			class="w-150 space-y-2 rounded-sm border border-border-default bg-background-default p-4"
+		>
+			<PullCommitListDiff
+				{...args}
+				commitRange={picked}
+				oncommitCommits={(next) => (picked = next)}
+			/>
+			<output class="typography-monospace-small">picked v{picked.start}..v{picked.end}</output
+			>
+		</div>
+	{/snippet}
+</Story>
diff --git a/web/src/lib/components/repo/pulls/PullCommitListHeader.stories.svelte b/web/src/lib/components/repo/pulls/PullCommitListHeader.stories.svelte
new file mode 100644
index 000000000..da42127f9
--- /dev/null
+++ b/web/src/lib/components/repo/pulls/PullCommitListHeader.stories.svelte
@@ -0,0 +1,137 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import type { ComponentProps } from "svelte";
+	import PullCommitListHeader from "./PullCommitListHeader.svelte";
+	import IterationCcw from "$icon/iteration-ccw";
+	import Button from "$lib/components/ui/Button.svelte";
+	import type { CommitSummary } from "$lib/components/repo/types";
+	import type { PullSubmission } from "$lib/api";
+
+	type Props = ComponentProps<typeof PullCommitListHeader>;
+
+	const commits: CommitSummary[] = [
+		{
+			hash: "d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1d2e3",
+			shortHash: "d4e5f6a7",
+			subject: "tidy diff toolbar spacing",
+			body: "",
+			authorName: "oppi",
+			authorEmail: "oppi@example.test",
+			when: "2026-08-20T15:00:00Z",
+			changeId: "zsuskuln"
+		},
+		{
+			hash: "c3d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1d2",
+			shortHash: "c3d4e5f6",
+			subject: "fix pierre hydrate leak on version switch",
+			body: "reuses `{#key diff}` so the fill pool tears down cleanly.",
+			authorName: "oppi",
+			authorEmail: "oppi@example.test",
+			when: "2026-08-20T14:30:00Z",
+			changeId: "rlvkpxrz"
+		},
+		{
+			hash: "b2c3d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1",
+			shortHash: "b2c3d4e5",
+			subject: "add interdiff change-id narrowing",
+			body: "",
+			authorName: "anirudh",
+			authorEmail: "anirudh@example.test",
+			when: "2026-08-19T11:00:00Z",
+			changeId: "kkmtprmw"
+		}
+	];
+
+	const versions: PullSubmission[] = [
+		{
+			head: "b2c3d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1",
+			base: "fedcba9876543210fedcba9876543210fedcba98",
+			createdAt: "2026-08-19T11:30:00Z"
+		},
+		{
+			head: "d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1d2e3",
+			base: "fedcba9876543210fedcba9876543210fedcba98",
+			createdAt: "2026-08-20T15:30:00Z"
+		}
+	];
+
+	const { Story } = defineMeta({
+		title: "Repo/Pulls/PullCommitListHeader",
+		component: PullCommitListHeader,
+		tags: ["autodocs"],
+		args: { versions, commits, versionRange: { start: 1, end: 1 } }
+	});
+</script>
+
+<script lang="ts">
+	import type { Range } from "$lib/components/ui/RangeSelector.svelte";
+
+	// the story is the owner: it holds the viewed range and only moves it when
+	// `oncommitVersions` asks, same as the real page's confirmVersions
+	let viewed = $state<Range>({ start: 1, end: 1 });
+	let commits_ = $state(0);
+</script>
+
+{#snippet frame(args: Props)}
+	<div class="w-150 space-y-2 rounded-sm border border-border-default bg-background-default p-4">
+		<PullCommitListHeader {...args} />
+	</div>
+{/snippet}
+
+<Story name="Latest version selected">
+	{#snippet template(args)}
+		{@render frame(args)}
+	{/snippet}
+</Story>
+
+<!-- a versionRange spanning more than one version renders the Interdiff tag -->
+<Story name="Interdiff selected" args={{ versionRange: { start: 0, end: 1 } }}>
+	{#snippet template(args)}
+		{@render frame(args)}
+	{/snippet}
+</Story>
+
+<!-- the appview slots resubmit/approve buttons in here, next to the version list -->
+<Story name="With actions slot">
+	{#snippet template(args)}
+		<div
+			class="w-150 space-y-2 rounded-sm border border-border-default bg-background-default p-4"
+		>
+			<PullCommitListHeader {...args}>
+				{#snippet actions()}
+					<Button icon={IterationCcw} title="Resubmit pull request">Resubmit</Button>
+				{/snippet}
+			</PullCommitListHeader>
+		</div>
+	{/snippet}
+</Story>
+
+<Story
+	name="Single version"
+	args={{ versions: versions.slice(1), versionRange: { start: 0, end: 0 } }}
+>
+	{#snippet template(args)}
+		{@render frame(args)}
+	{/snippet}
+</Story>
+
+<Story name="Interactive">
+	{#snippet template(args)}
+		<div
+			class="w-150 space-y-2 rounded-sm border border-border-default bg-background-default p-4"
+		>
+			<PullCommitListHeader
+				{...args}
+				versionRange={viewed}
+				oncommitVersions={(next) => {
+					viewed = next;
+					commits_++;
+				}}
+			/>
+			<output class="typography-monospace-small">
+				viewing v{viewed.start}{viewed.start === viewed.end ? "" : `..v${viewed.end}`} · {commits_}
+				commit{commits_ === 1 ? "" : "s"}
+			</output>
+		</div>
+	{/snippet}
+</Story>
diff --git a/web/src/lib/components/repo/pulls/PullCommitListInterdiff.stories.svelte b/web/src/lib/components/repo/pulls/PullCommitListInterdiff.stories.svelte
new file mode 100644
index 000000000..95271e9b2
--- /dev/null
+++ b/web/src/lib/components/repo/pulls/PullCommitListInterdiff.stories.svelte
@@ -0,0 +1,118 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import type { ComponentProps } from "svelte";
+	import PullCommitListInterdiff from "./PullCommitListInterdiff.svelte";
+	import { pipelinesByCommitHash } from "$fixtures/pipelines";
+	import type { CommitSummary } from "$lib/components/repo/types";
+
+	type Props = ComponentProps<typeof PullCommitListInterdiff>;
+
+	const commits: CommitSummary[] = [
+		{
+			hash: "d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1d2e3",
+			shortHash: "d4e5f6a7",
+			subject: "tidy diff toolbar spacing",
+			body: "",
+			authorName: "oppi",
+			authorEmail: "oppi@example.test",
+			when: "2026-08-20T15:00:00Z",
+			changeId: "zsuskuln"
+		},
+		{
+			hash: "c3d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1d2",
+			shortHash: "c3d4e5f6",
+			subject: "fix pierre hydrate leak on version switch",
+			body: "reuses `{#key diff}` so the fill pool tears down cleanly.",
+			authorName: "oppi",
+			authorEmail: "oppi@example.test",
+			when: "2026-08-20T14:30:00Z",
+			changeId: "rlvkpxrz"
+		},
+		{
+			hash: "b2c3d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1",
+			shortHash: "b2c3d4e5",
+			subject: "add interdiff change-id narrowing",
+			body: "",
+			authorName: "anirudh",
+			authorEmail: "anirudh@example.test",
+			when: "2026-08-19T11:00:00Z",
+			changeId: "kkmtprmw"
+		},
+		{
+			// a repo without jj change ids has no stable identity to narrow to
+			hash: "a1b2c3d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0",
+			shortHash: "a1b2c3d4",
+			subject: "wip: sketch pull diff toolbar",
+			body: "",
+			authorName: "anirudh",
+			authorEmail: "anirudh@example.test",
+			when: "2026-08-18T09:00:00Z"
+		}
+	];
+
+	const { Story } = defineMeta({
+		title: "Repo/Pulls/PullCommitListInterdiff",
+		component: PullCommitListInterdiff,
+		tags: ["autodocs"],
+		args: { commits, changeId: "" }
+	});
+</script>
+
+<script lang="ts">
+	let picked = $state("");
+</script>
+
+{#snippet frame(args: Props)}
+	<div class="w-150 rounded-sm border border-border-default bg-background-default p-4">
+		<PullCommitListInterdiff {...args} onselect={() => {}} />
+	</div>
+{/snippet}
+
+<Story name="All changes selected">
+	{#snippet template(args)}
+		{@render frame(args)}
+	{/snippet}
+</Story>
+
+<Story name="One change selected" args={{ changeId: "rlvkpxrz" }}>
+	{#snippet template(args)}
+		{@render frame(args)}
+	{/snippet}
+</Story>
+
+<!-- the commit with no change id renders muted and is not clickable -->
+<Story name="Commit without a change id" args={{ changeId: "" }}>
+	{#snippet template(args)}
+		{@render frame(args)}
+	{/snippet}
+</Story>
+
+<Story
+	name="With pipeline statuses"
+	args={{
+		pipelineStatuses: Promise.resolve(
+			pipelinesByCommitHash(commits.map((commit) => commit.hash))
+		)
+	}}
+>
+	{#snippet template(args)}
+		{@render frame(args)}
+	{/snippet}
+</Story>
+
+<Story name="Interactive">
+	{#snippet template(args)}
+		<div
+			class="w-150 space-y-2 rounded-sm border border-border-default bg-background-default p-4"
+		>
+			<PullCommitListInterdiff
+				{...args}
+				changeId={picked}
+				onselect={(next) => (picked = next)}
+			/>
+			<output class="typography-monospace-small">
+				narrowed to {picked || "all changes"}
+			</output>
+		</div>
+	{/snippet}
+</Story>
diff --git a/web/src/lib/components/repo/pulls/PullDiff.stories.svelte b/web/src/lib/components/repo/pulls/PullDiff.stories.svelte
new file mode 100644
index 000000000..3d6abe870
--- /dev/null
+++ b/web/src/lib/components/repo/pulls/PullDiff.stories.svelte
@@ -0,0 +1,177 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import PullDiff from "./PullDiff.svelte";
+	import type { PullDiff as PullDiffData, PullDiffDeps, PullDiffFile } from "$lib/api/pullDiff";
+
+	// every file below inlines `content` on both sides, so `fetchSides` never
+	// falls back to `deps.git`'s blob endpoint -- `deps` itself is never touched
+	const deps = { ctx: {}, git: {} } as unknown as PullDiffDeps;
+
+	const zeroOid = "0".repeat(40);
+
+	const changed: PullDiffFile = {
+		key: "src/lib/components/repo/pulls/PullDiff.svelte→src/lib/components/repo/pulls/PullDiff.svelte",
+		name: "src/lib/components/repo/pulls/PullDiff.svelte",
+		kind: "changed",
+		stat: { insertions: 2, deletions: 1 },
+		lines: 6,
+		sides: {
+			lhs: {
+				path: "src/lib/components/repo/pulls/PullDiff.svelte",
+				oid: "1111111111111111111111111111111111111111",
+				isBinary: false,
+				isSubmodule: false,
+				size: 60,
+				content: "let treeOpen = true;\n"
+			},
+			rhs: {
+				path: "src/lib/components/repo/pulls/PullDiff.svelte",
+				oid: "2222222222222222222222222222222222222222",
+				isBinary: false,
+				isSubmodule: false,
+				size: 100,
+				content: "let treeOpen = $state(true);\nlet allOpen = $state(true);\n"
+			}
+		}
+	};
+
+	const added: PullDiffFile = {
+		key: "→src/lib/components/repo/pulls/PullFileTree.svelte",
+		name: "src/lib/components/repo/pulls/PullFileTree.svelte",
+		kind: "new",
+		stat: { insertions: 3, deletions: 0 },
+		lines: 4,
+		sides: {
+			lhs: { path: "", oid: zeroOid, isBinary: false, isSubmodule: false, size: 0 },
+			rhs: {
+				path: "src/lib/components/repo/pulls/PullFileTree.svelte",
+				oid: "3333333333333333333333333333333333333333",
+				isBinary: false,
+				isSubmodule: false,
+				size: 80,
+				content: "interface Props {\n\tfiles: { name: string }[];\n}\n"
+			}
+		}
+	};
+
+	const deleted: PullDiffFile = {
+		key: "src/lib/components/repo/pulls/PullOldPanel.svelte→",
+		name: "src/lib/components/repo/pulls/PullOldPanel.svelte",
+		kind: "deleted",
+		stat: { insertions: 0, deletions: 4 },
+		lines: 4,
+		sides: {
+			lhs: {
+				path: "src/lib/components/repo/pulls/PullOldPanel.svelte",
+				oid: "4444444444444444444444444444444444444444",
+				isBinary: false,
+				isSubmodule: false,
+				size: 90,
+				content: "<div>\n\told panel, replaced by PullFileTree\n</div>\n"
+			},
+			rhs: { path: "", oid: zeroOid, isBinary: false, isSubmodule: false, size: 0 }
+		}
+	};
+
+	const renamed: PullDiffFile = {
+		key: "src/lib/components/repo/PierreDiff.svelte→src/lib/components/repo/pulls/PullDiffFileCard.svelte",
+		name: "src/lib/components/repo/pulls/PullDiffFileCard.svelte",
+		oldName: "src/lib/components/repo/PierreDiff.svelte",
+		kind: "renamed",
+		stat: { insertions: 1, deletions: 1 },
+		lines: 4,
+		sides: {
+			lhs: {
+				path: "src/lib/components/repo/PierreDiff.svelte",
+				oid: "5555555555555555555555555555555555555555",
+				isBinary: false,
+				isSubmodule: false,
+				size: 70,
+				content: "let diffStyle = 'unified';\n"
+			},
+			rhs: {
+				path: "src/lib/components/repo/pulls/PullDiffFileCard.svelte",
+				oid: "6666666666666666666666666666666666666666",
+				isBinary: false,
+				isSubmodule: false,
+				size: 80,
+				content: "let diffStyle: DiffStyle = 'unified';\n"
+			}
+		}
+	};
+
+	const binary: PullDiffFile = {
+		key: "assets/diff-icon.png→assets/diff-icon.png",
+		name: "assets/diff-icon.png",
+		kind: "changed",
+		stat: { insertions: 0, deletions: 0 },
+		lines: 0,
+		note: "This is a binary file and will not be displayed."
+	};
+
+	const submodule: PullDiffFile = {
+		key: "vendor/pierre→vendor/pierre",
+		name: "vendor/pierre",
+		kind: "changed",
+		stat: { insertions: 0, deletions: 0 },
+		lines: 0,
+		note: "Submodule pointer, not shown."
+	};
+
+	const mixedFiles = [changed, added, deleted, renamed, binary, submodule];
+
+	const stat = (files: PullDiffFile[]) => ({
+		insertions: files.reduce((n, f) => n + f.stat.insertions, 0),
+		deletions: files.reduce((n, f) => n + f.stat.deletions, 0),
+		files_changed: files.length
+	});
+
+	const diff: PullDiffData = {
+		files: mixedFiles,
+		stat: stat(mixedFiles),
+		truncated: 0,
+		contents: { inlineOld: false, oldRef: "old-ref", newRef: "new-ref" }
+	};
+
+	const { Story } = defineMeta({
+		title: "Repo/Pulls/PullDiff",
+		component: PullDiff,
+		tags: ["autodocs"],
+		args: { deps, diff }
+	});
+</script>
+
+<Story name="Mixed file kinds" />
+
+<Story
+	name="Truncated"
+	args={{
+		diff: {
+			...diff,
+			files: [
+				...mixedFiles,
+				{
+					key: "generated/huge.lock→generated/huge.lock",
+					name: "generated/huge.lock",
+					kind: "changed",
+					stat: { insertions: 0, deletions: 0 },
+					lines: 0,
+					note: "Not rendered: too many files in this diff."
+				}
+			],
+			truncated: 1
+		}
+	}}
+/>
+
+<Story
+	name="No change between two revisions"
+	args={{ diff: { ...diff, files: [], stat: stat([]) } }}
+/>
+
+<Story name="Loading" args={{ diff: undefined, loading: true }} />
+
+<Story
+	name="Failed to load"
+	args={{ diff: undefined, error: "Failed to load diff: gitmirror returned 500." }}
+/>
diff --git a/web/src/lib/components/repo/pulls/PullDiff.svelte b/web/src/lib/components/repo/pulls/PullDiff.svelte
index aef98f8a1..3ffcecfd0 100644
--- a/web/src/lib/components/repo/pulls/PullDiff.svelte
+++ b/web/src/lib/components/repo/pulls/PullDiff.svelte
@@ -29,14 +29,13 @@
 	let diffStyle = $state<DiffStyle>("unified");
 </script>
 
-<div class="flex gap-4 rounded-sm border border-border-default bg-background-default px-4 pb-4">
+<div class="flex gap-2 rounded-sm border border-border-default bg-background-default px-2 pb-4">
 	<!-- file tree -->
 	{#if treeOpen}
 		<aside
-			class="sticky top-17 flex max-h-[calc(100vh-5.25rem)] flex-col self-start"
-			style="width: 17rem;"
+			class="sticky top-11 flex max-h-[calc(100vh-3.75rem)] w-fit min-w-40 max-w-80 shrink-0 flex-col self-start"
 		>
-			<div class="sticky top-17 bg-background-default py-4">
+			<div class="sticky top-11 bg-background-default py-2">
 				<Button icon={PanelLeftClose} onclick={() => (treeOpen = false)} />
 			</div>
 			<div class="min-h-0 flex-1 overflow-y-auto typography-paragraph-small">
@@ -54,7 +53,7 @@
 	<!-- diffs -->
 	<div class="min-w-0 flex-1">
 		<div
-			class="sticky top-17 z-20 flex items-center justify-between bg-background-default py-4"
+			class="sticky top-11 z-20 flex items-center justify-between bg-background-default py-2"
 		>
 			<div class="flex items-center gap-3">
 				{#if !treeOpen}
@@ -96,6 +95,12 @@
 				</ButtonGroup>
 			</div>
 		</div>
+		<!-- sits just above the first file header's sticky position (top-24.5). the
+		     toolbar above assumes a fixed height, which can be off by a few pixels
+		     at some viewport sizes; this shim plugs the resulting gap so the diff
+		     scrolling underneath doesn't peek through. harmless when there's no gap:
+		     the toolbar's higher z-index paints over it. -->
+		<div class="sticky top-[4.625rem] -mb-6 h-6 bg-background-default" aria-hidden="true"></div>
 
 		{#if error}
 			<div
diff --git a/web/src/lib/components/repo/pulls/PullDiffFileCard.svelte b/web/src/lib/components/repo/pulls/PullDiffFileCard.svelte
index 42d57ffd6..938e379a6 100644
--- a/web/src/lib/components/repo/pulls/PullDiffFileCard.svelte
+++ b/web/src/lib/components/repo/pulls/PullDiffFileCard.svelte
@@ -73,8 +73,8 @@
 
 <div use:observe data-diff-key={file.key} class="overflow-clip rounded-sm drop-shadow-xs">
 	<details id="file-{file.name}" {open} class="group w-full">
-		<!-- sticks below the diff toolbar, which is itself sticky at top-17 -->
-		<summary class="sticky top-34.5 z-10 cursor-pointer list-none bg-background-default">
+		<!-- sticks below the diff toolbar, which is itself sticky at top-11 -->
+		<summary class="sticky top-24.5 z-10 cursor-pointer list-none bg-background-default">
 			<div
 				class="flex justify-between rounded-sm border border-border-default bg-background-default group-open:rounded-b-none"
 			>
diff --git a/web/src/lib/components/repo/pulls/PullDiscussion.stories.svelte b/web/src/lib/components/repo/pulls/PullDiscussion.stories.svelte
new file mode 100644
index 000000000..ea528136f
--- /dev/null
+++ b/web/src/lib/components/repo/pulls/PullDiscussion.stories.svelte
@@ -0,0 +1,124 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import type { ComponentProps } from "svelte";
+	import PullDiscussion from "./PullDiscussion.svelte";
+	import { sampleComments, sampleMarkup } from "$fixtures/comments";
+	import { pipelinesByCommitHash } from "$fixtures/pipelines";
+	import type { CommentRecord } from "$lib/api/comment";
+	import type { CommitSummary } from "$lib/components/repo/types";
+
+	type Props = ComponentProps<typeof PullDiscussion>;
+
+	const commits: CommitSummary[] = [
+		{
+			hash: "b2c3d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1",
+			shortHash: "b2c3d4e5",
+			subject: "add interdiff change-id narrowing",
+			body: "",
+			authorName: "anirudh",
+			authorEmail: "anirudh@example.test",
+			when: "2024-10-04T09:30:00Z"
+		},
+		{
+			hash: "d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0c1d2e3",
+			shortHash: "d4e5f6a7",
+			subject: "tidy diff toolbar spacing",
+			body: "",
+			authorName: "oppi",
+			authorEmail: "oppi@example.test",
+			when: "2024-10-06T08:30:00Z"
+		}
+	];
+
+	// pinned to the first commit above, to show the commit tag PullReviewComment
+	// renders for a comment carrying an embed
+	const pinned = {
+		uri: "at://did:plc:anirudh/sh.tangled.feed.comment/pinned1",
+		cid: "bafyreicustompin00000000000000000000000000000000000000000",
+		rkey: "pinned1",
+		authorDid: "did:plc:anirudh",
+		authorHandle: "anirudh.fi",
+		createdAt: "2024-10-04T11:00:00Z",
+		body: "This line needs a null check before the merge.",
+		bodyHtml: "<p>This line needs a null check before the merge.</p>",
+		embed: { commit: { oid: commits[0].hash } } as CommentRecord["embed"]
+	};
+
+	// two versions straddling the sample comments (2024-10-02 through 2024-11-10),
+	// so the story can show both the pre-v0 slot and each version's own group
+	const versions = [
+		{ base: "0".repeat(40), head: commits[0].hash, createdAt: "2024-10-03T00:00:00Z" },
+		{ base: commits[0].hash, head: commits[1].hash, createdAt: "2024-10-04T12:00:00Z" }
+	];
+
+	const comments = [
+		sampleComments.byjp,
+		sampleComments.cam,
+		sampleComments.samuel,
+		sampleComments.moth,
+		sampleComments.anirudh,
+		pinned,
+		sampleComments.knowtheory,
+		sampleComments.mine,
+		sampleComments.anil
+	];
+
+	const { Story } = defineMeta({
+		title: "Repo/Pulls/PullDiscussion",
+		component: PullDiscussion,
+		tags: ["autodocs"],
+		args: {
+			markup: sampleMarkup,
+			currentVersion: 1,
+			versions,
+			comments,
+			commits,
+			onUpdateComment: async () => {}
+		}
+	});
+</script>
+
+{#snippet frame(args: Props)}
+	<div class="w-100 bg-background-default">
+		<PullDiscussion {...args} />
+	</div>
+{/snippet}
+
+<!-- comments before v0 render with no version header, each version's own
+     comments follow under a "v<n>" header, and only the latest version's are
+     marked active -->
+<Story name="Grouped by version">
+	{#snippet template(args)}
+		{@render frame(args)}
+	{/snippet}
+</Story>
+
+<Story name="No comments" args={{ comments: [] }}>
+	{#snippet template(args)}
+		{@render frame(args)}
+	{/snippet}
+</Story>
+
+<!-- `filter` narrows to comments pinned to a given commit (or unpinned) -- here
+     it drops the comment pinned to commits[0], leaving the rest untouched -->
+<Story
+	name="Filtered out a commit's comments"
+	args={{ filter: (commit: CommitSummary) => commit.hash !== commits[0].hash }}
+>
+	{#snippet template(args)}
+		{@render frame(args)}
+	{/snippet}
+</Story>
+
+<Story
+	name="With pipeline status per version"
+	args={{
+		pipelineStatuses: Promise.resolve(
+			pipelinesByCommitHash(versions.map((version) => version.head))
+		)
+	}}
+>
+	{#snippet template(args)}
+		{@render frame(args)}
+	{/snippet}
+</Story>
diff --git a/web/src/lib/components/repo/pulls/PullDiscussion.svelte b/web/src/lib/components/repo/pulls/PullDiscussion.svelte
index 94507e078..a1b46fa0c 100644
--- a/web/src/lib/components/repo/pulls/PullDiscussion.svelte
+++ b/web/src/lib/components/repo/pulls/PullDiscussion.svelte
@@ -46,7 +46,7 @@
 	const groups = $derived(groupCommentsByVersion(visible, versions));
 </script>
 
-<div class="space-y-4 px-4 pt-4 pb-80">
+<div class="space-y-4 px-2 pt-2 pb-80">
 	{#if !visible.length}
 		<p class="p-2 text-foreground-subtle">No comments yet.</p>
 	{:else}
diff --git a/web/src/lib/components/repo/pulls/PullReviewCommentForm.svelte b/web/src/lib/components/repo/pulls/PullReviewCommentForm.svelte
index d709abee1..4a47f510b 100644
--- a/web/src/lib/components/repo/pulls/PullReviewCommentForm.svelte
+++ b/web/src/lib/components/repo/pulls/PullReviewCommentForm.svelte
@@ -41,7 +41,7 @@
 
 <form onsubmit={publish.run} class="space-y-2">
 	<Checkbox bind:checked={pinToCommit}>
-		<span>Pin comment to <Tag>{short(currentCommit)}</Tag></span>
+		<span>Comment on <Tag>{short(currentCommit)}</Tag></span>
 	</Checkbox>
 	<ButtonGroup class="w-full">
 		<Input
diff --git a/web/src/routes/[handle]/[repo]/pulls/[aturi]/[version]/[[range]]/PullViewPage.svelte b/web/src/routes/[handle]/[repo]/pulls/[aturi]/[version]/[[range]]/PullViewPage.svelte
index ae1b80f6d..e359557c7 100644
--- a/web/src/routes/[handle]/[repo]/pulls/[aturi]/[version]/[[range]]/PullViewPage.svelte
+++ b/web/src/routes/[handle]/[repo]/pulls/[aturi]/[version]/[[range]]/PullViewPage.svelte
@@ -8,7 +8,6 @@
 	import IterationCcw from "$icon/iteration-ccw";
 	import PanelRightClose from "$icon/panel-right-close";
 	import MessagesSquare from "$icon/messages-square";
-	import Circle from "$icon/circle";
 	import { createBobbinClient } from "$lib/api/client";
 	import {
 		deleteSubscription,
@@ -431,12 +430,12 @@
 	>
 </svelte:head>
 
-<div class="flex items-stretch gap-1">
-	<div class="min-w-0 flex-1 space-y-2 py-4 pl-4">
+<div class="flex items-stretch gap-0">
+	<div class="min-w-0 flex-1 space-y-2 py-4">
 		<!-- TODO: extract as a component -->
 		<div class="sticky top-0 z-30 mb-0 h-0">
 			<div
-				class="absolute inset-x-0 top-0 flex h-17 items-center justify-between border-x border-b border-border-default bg-background-default px-4 {showHeader
+				class="absolute inset-x-0 top-0 flex h-11 items-center justify-between border-x border-b border-border-default bg-background-default px-2 {showHeader
 					? 'opacity-100'
 					: 'pointer-events-none opacity-0'}"
 			>
@@ -454,7 +453,7 @@
 					/>
 				</div>
 				{#if !discussionOpen}
-					<Button icon={Circle} onclick={() => (discussionOpen = true)} />
+					<Button icon={MessagesSquare} onclick={() => (discussionOpen = true)} />
 				{/if}
 			</div>
 		</div>
@@ -490,7 +489,7 @@
 						{/if}
 					</Dropdown>
 					{#if !discussionOpen}
-						<Button icon={Circle} onclick={() => (discussionOpen = true)} />
+						<Button icon={MessagesSquare} onclick={() => (discussionOpen = true)} />
 					{/if}
 				{/snippet}
 			</Ticket>
@@ -575,16 +574,12 @@
 	</div>
 	{#if discussionOpen}
 		<div
-			class="group sticky top-0 flex max-h-screen w-2 shrink-0 cursor-col-resize flex-col items-center justify-center"
+			class="sticky top-0 flex max-h-screen w-2 shrink-0 cursor-col-resize flex-col items-center justify-center"
 			role="separator"
 			aria-orientation="vertical"
 			aria-label="Resize discussion panel"
 			use:resizable={{ target: () => discussion, direction: "after", min: 336 }}
-		>
-			<div
-				class="h-16 w-1 rounded-full bg-border-strong transition-all group-hover:h-24 group-hover:bg-foreground-subtle group-[.resizing]:h-24"
-			></div>
-		</div>
+		></div>
 		<!-- discussion sidebar -->
 		<div
 			bind:this={discussion}
@@ -595,10 +590,8 @@
 				class="flex h-full min-h-screen flex-col items-stretch rounded-tl-sm border-t border-l border-border-default bg-background-default text-foreground-default"
 			>
 				<div class="sticky top-0 flex h-screen flex-col">
-					<header class="h-17 px-4">
-						<div
-							class="flex h-full items-center justify-between border-b border-border-default"
-						>
+					<header class="h-11 border-b border-border-default">
+						<div class="flex h-full items-center justify-between px-2">
 							<h2 class="flex items-center gap-2 px-3 typography-paragraph-regular">
 								<MessagesSquare class="size-4 shrink-0" aria-hidden="true" />
 								Comments
@@ -630,7 +623,7 @@
 			<div
 				bind:clientHeight={formHeight}
 				style={discussionWidth ? `width: ${discussionWidth}px` : ""}
-				class="fixed right-0 bottom-0 w-[max(20vw,21rem)] space-y-2 border-l border-border-default bg-background-default p-4"
+				class="fixed right-0 bottom-0 w-[max(20vw,21rem)] space-y-2 border-l border-border-default bg-background-default p-2"
 			>
 				<PullReviewCommentForm
 					{currentCommit}
-- 
2.51.2