diff --git a/AGENTS.md b/AGENTS.md
index 6f0c436..ce5578d 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -32,7 +32,8 @@ Do not start by reading every file. Start from the area you are changing.
 - `src/pages/repo/pulls.tsx`: pull list, new pull, pull detail, and patch/diff rendering calls.
 - `src/pages/repo/pulls-helpers.ts`: pull-specific pure helpers such as state filter parsing.
 - `src/components/common.tsx`: generic UI primitives such as `Avatar`, `LoadingState`, `StateBadge`, and form/button/card style helpers.
-- `src/components/repo.tsx`: repo presentation components such as tabs, file rows, README/comment cards, `CodeView`, `DiffView`, branch pills, and repo skeletons.
+- `src/components/repo.tsx`: repo presentation components such as tabs, file rows, README/comment cards, branch pills, and repo skeletons.
+- `src/components/code-view.tsx`: code and diff presentation components, highlighting helper functions, `CodeView`, `DiffView`, and `PullDiffView`.
 - `src/lib/api.ts`: compatibility facade that re-exports domain APIs. Do not add implementation here.
 - `src/lib/api/constants.ts`: public service URLs and OAuth scope exports.
 - `src/lib/api/appview.ts`: appview JSON transport, fallback, and appview response types.
@@ -108,7 +109,7 @@ changing local components:
 
 - Start from the matching upstream template in `../tangled-upstream/appview/pages/templates/...`, then check nearby Go/router files when behavior or icon names are data-driven.
 - For repo chrome, `templates/layouts/repobase.html` is the main reference. Confirm header grouping, action buttons, tab icons, label spacing, font sizes, and vertical padding against that file before patching `src/pages/repo/shared.tsx`.
-- For code/blob views, compare `templates/repo/index.html` and `templates/repo/blob.html` before changing `src/pages/repo/code.tsx`, `src/components/repo.tsx`, or file-view CSS.
+- For code/blob views, compare `templates/repo/index.html` and `templates/repo/blob.html` before changing `src/pages/repo/code.tsx`, `src/components/code-view.tsx`, or file-view CSS.
 - Treat screenshots as prompts to inspect upstream source, not as the only source of truth.
 - Small differences such as `gap-*`, `py-*`, icon choice, and short-rev styling matter.
 - Remove or hide upstream controls that are not implemented locally instead of shipping fake UI.
@@ -132,7 +133,7 @@ If a class is not present in `public/static/tw.css`, add an explicit
 - Preserve the `.untangled-shell` wrapper in `RootShell`; widening pages changes the app layout.
 - Do not add a footer unless explicitly requested.
 - File/tree ordering should be folders first, then files alphabetically. This is implemented in `sortedTreeEntries` in `src/lib/repo-utils.ts`.
-- File/blob rendering uses `CodeView` in `src/components/repo.tsx`.
+- File/blob rendering uses `CodeView` in `src/components/code-view.tsx`.
 - PR diffs use `DiffView`, which parses unified patches into collapsible per-file panels and reuses `CodeView`.
 - Repo overview and blob pages should resolve `HEAD` to the default branch for user-facing links when possible.
 - Keep unimplemented upstream features visually inert rather than adding fake behavior.
@@ -153,7 +154,7 @@ If a class is not present in `public/static/tw.css`, add an explicit
 - Keep repo-route behavior in `src/pages/repo/*.tsx`.
 - Keep repo-route pure helpers in nearby `src/pages/repo/*-helpers.ts` files.
 - Keep generic display components in `src/components/common.tsx`.
-- Keep repo-specific display components in `src/components/repo.tsx`.
+- Keep repo-specific display components in `src/components/repo.tsx` and `src/components/code-view.tsx`.
 - Keep shared pure repo helpers in `src/lib/repo-utils.ts`.
 - Do not add large page logic back into `src/App.tsx`.
 - Do not remove existing behavior while restructuring.
diff --git a/src/components/code-view.tsx b/src/components/code-view.tsx
new file mode 100644
index 0000000..5170088
--- /dev/null
+++ b/src/components/code-view.tsx
@@ -0,0 +1,850 @@
+import clsx from 'clsx';
+import hljs from 'highlight.js';
+import { For, Show, createSignal, createMemo, createEffect, onCleanup, onMount, type Component, type JSX } from 'solid-js';
+import {
+	ChevronRight,
+	Circle,
+	CircleCheck,
+	Columns2,
+	FileText,
+	FoldVertical,
+	Folder,
+	PanelLeftClose,
+	PanelLeftOpen,
+	PanelRightClose,
+	PanelRightOpen,
+	UnfoldVertical,
+} from 'lucide-solid';
+
+const splitCodeLines = (value: string): string[] => {
+	const normalized = value.endsWith('\n') ? value.slice(0, -1) : value;
+	return normalized.length === 0 ? [''] : normalized.split('\n');
+};
+
+const escapeHtml = (value: string) =>
+	value
+		.replace(/&/g, '&')
+		.replace(/</g, '&lt;')
+		.replace(/>/g, '&gt;')
+		.replace(/"/g, '&quot;')
+		.replace(/'/g, '&#39;');
+
+const customExtensionLanguages: Record<string, string> = {
+	cjs: 'javascript',
+	mjs: 'javascript',
+	cts: 'typescript',
+	mts: 'typescript',
+	conf: 'ini',
+	env: 'ini',
+};
+
+const filenameLanguages: Record<string, string> = {
+	dockerfile: 'bash',
+	gemfile: 'ruby',
+	makefile: 'makefile',
+	rakefile: 'ruby',
+};
+
+const languageFromPath = (path?: string) => {
+	if (!path) return undefined;
+
+	const filename = path.split('/').pop()?.toLowerCase() ?? '';
+	if (filenameLanguages[filename]) return filenameLanguages[filename];
+
+	const extension = filename.includes('.') ? filename.split('.').pop() : filename;
+	if (!extension) return undefined;
+
+	// Check if highlight.js registers this extension directly or as a built-in alias
+	if (hljs.getLanguage(extension)) {
+		return extension;
+	}
+
+	return customExtensionLanguages[extension] ?? extension;
+};
+
+const resolveHighlightLanguage = (language?: string, path?: string) => {
+	const candidate = (language ?? languageFromPath(path))?.toLowerCase();
+	if (!candidate || candidate === 'plaintext' || candidate === 'text') return undefined;
+	return hljs.getLanguage(candidate) ? candidate : undefined;
+};
+
+const closeOpenSpans = (count: number) => '</span>'.repeat(count);
+
+const splitHighlightedHtmlLines = (html: string): string[] => {
+	const lineParts = html.split('\n');
+	const activeTags: string[] = [];
+
+	return lineParts.map((linePart) => {
+		const prefix = activeTags.join('');
+
+		for (const tag of linePart.match(/<\/?span\b[^>]*>/g) ?? []) {
+			if (tag.startsWith('</')) {
+				activeTags.pop();
+			} else {
+				activeTags.push(tag);
+			}
+		}
+
+		return `${prefix}${linePart}${closeOpenSpans(activeTags.length)}`;
+	});
+};
+
+const highlightCodeLines = (text: string, language?: string): string[] => {
+	const normalized = text.endsWith('\n') ? text.slice(0, -1) : text;
+	const fallback = () => splitCodeLines(normalized).map(escapeHtml);
+
+	if (!language) return fallback();
+
+	try {
+		const highlighted = hljs.highlight(normalized, { language, ignoreIllegals: true }).value;
+		return splitHighlightedHtmlLines(highlighted);
+	} catch {
+		return fallback();
+	}
+};
+
+const diffMetadataLine = (line: string) =>
+	line.startsWith('diff --git ') ||
+	line.startsWith('index ') ||
+	line.startsWith('---') ||
+	line.startsWith('+++') ||
+	line.startsWith('@@') ||
+	line.startsWith('Binary files ') ||
+	line.startsWith('new file mode ') ||
+	line.startsWith('deleted file mode ') ||
+	line.startsWith('old mode ') ||
+	line.startsWith('new mode ') ||
+	line.startsWith('similarity index ') ||
+	line.startsWith('dissimilarity index ') ||
+	line.startsWith('rename from ') ||
+	line.startsWith('rename to ');
+
+const highlightDiffLine = (line: string, language?: string) => {
+	if (diffMetadataLine(line)) return escapeHtml(line);
+
+	const marker = line[0];
+	const isChangedLine = marker === '+' || marker === '-' || marker === ' ';
+	if (!isChangedLine) return escapeHtml(line);
+
+	const content = line.slice(1);
+	const highlighted = highlightCodeLines(content, language)[0] ?? escapeHtml(content);
+	return `<span class="untangled-code-diff-op">${escapeHtml(marker)}</span>${highlighted}`;
+};
+
+/** Parse a URL hash like #L5 or #L3-L8 into {start, end} (1-based, inclusive). */
+const parseLineHash = (hash: string): { start: number; end: number } | null => {
+	const m = /^#L(\d+)(?:-L?(\d+))?$/.exec(hash);
+	if (!m) return null;
+	const start = parseInt(m[1], 10);
+	const end = m[2] ? parseInt(m[2], 10) : start;
+	if (isNaN(start) || isNaN(end)) return null;
+	return { start: Math.min(start, end), end: Math.max(start, end) };
+};
+
+export const CodeView: Component<{
+	text: string;
+	id?: string;
+	wrap?: boolean;
+	maxHeight?: string;
+	diff?: boolean;
+	path?: string;
+	language?: string;
+}> = (props) => {
+	const lines = createMemo(() => splitCodeLines(props.text));
+	const highlightedLines = createMemo(() => {
+		const language = resolveHighlightLanguage(props.language, props.path);
+		if (props.diff) return lines().map((line) => highlightDiffLine(line, language));
+		return highlightCodeLines(props.text, language);
+	});
+	const lineClass = (line: string) =>
+		props.diff
+			? clsx(
+					line.startsWith('+') && !line.startsWith('+++') && 'untangled-code-line-add',
+					line.startsWith('-') && !line.startsWith('---') && 'untangled-code-line-del',
+					line.startsWith('@@') && 'untangled-code-line-hunk',
+				)
+			: undefined;
+
+	// Line selection state (only used in non-diff mode)
+	const [selection, setSelection] = createSignal<{ start: number; end: number } | null>(null);
+	// The line number of the last plain click (anchor for shift-click ranges)
+	let anchorLine: number | null = null;
+
+	const applyHashSelection = (scroll = false) => {
+		const parsed = parseLineHash(window.location.hash);
+		setSelection(parsed);
+		if (scroll && parsed) {
+			requestAnimationFrame(() => {
+				const target = document.getElementById(`L${parsed.start}`);
+				target?.scrollIntoView({ behavior: 'instant', block: 'center' });
+			});
+		}
+	};
+
+	const handleLineNumberClick = (lineNum: number, event: MouseEvent) => {
+		event.preventDefault();
+		let hash: string;
+		if (event.shiftKey && anchorLine !== null) {
+			const lo = Math.min(anchorLine, lineNum);
+			const hi = Math.max(anchorLine, lineNum);
+			hash = `#L${lo}-L${hi}`;
+		} else {
+			anchorLine = lineNum;
+			hash = `#L${lineNum}`;
+		}
+		history.pushState(null, '', hash);
+		setSelection(parseLineHash(hash));
+	};
+
+	onMount(() => {
+		if (props.diff) return;
+
+		applyHashSelection(true);
+
+		const onHashChange = () => applyHashSelection(false);
+		window.addEventListener('hashchange', onHashChange);
+		window.addEventListener('popstate', onHashChange);
+		onCleanup(() => {
+			window.removeEventListener('hashchange', onHashChange);
+			window.removeEventListener('popstate', onHashChange);
+		});
+	});
+
+	const isLineHighlighted = (lineNum: number) => {
+		const s = selection();
+		if (!s) return false;
+		return lineNum >= s.start && lineNum <= s.end;
+	};
+
+	return (
+		<div class="untangled-code-scroll" style={{ 'max-height': props.maxHeight }}>
+			<div
+				id={props.id}
+				class={clsx('untangled-code-view', props.wrap && 'untangled-code-view-wrap')}
+			>
+				<For each={lines()}>
+					{(line, index) => {
+						const lineNum = index() + 1;
+						return (
+							<div class={clsx('untangled-code-line', lineClass(line), !props.diff && isLineHighlighted(lineNum) && 'untangled-code-line--hl')}>
+								<a
+									id={`L${lineNum}`}
+									href={`#L${lineNum}`}
+									class="untangled-code-line-number"
+									onClick={props.diff ? undefined : (e) => handleLineNumberClick(lineNum, e)}
+								>
+									{lineNum}
+								</a>
+								<span class="untangled-code-line-content" innerHTML={highlightedLines()[index()] || ' '} />
+							</div>
+						);
+					}}
+				</For>
+			</div>
+		</div>
+	);
+};
+
+interface DiffFile {
+	path: string;
+	text: string;
+	additions: number;
+	deletions: number;
+}
+
+const parseDiffFiles = (patch: string): DiffFile[] => {
+	const files: DiffFile[] = [];
+	let current: { path: string; lines: string[]; additions: number; deletions: number } | null = null;
+
+	const pushCurrent = () => {
+		if (!current) return;
+		const hasRenderableDiff = current.lines.some(
+			(line) =>
+				line.startsWith('@@') ||
+				line.startsWith('Binary files ') ||
+				line.startsWith('new file mode ') ||
+				line.startsWith('deleted file mode ') ||
+				line.startsWith('old mode ') ||
+				line.startsWith('similarity index ') ||
+				line.startsWith('rename from '),
+		);
+		if (!hasRenderableDiff && current.additions === 0 && current.deletions === 0) {
+			current = null;
+			return;
+		}
+		files.push({
+			path: current.path,
+			text: current.lines.join('\n'),
+			additions: current.additions,
+			deletions: current.deletions,
+		});
+	};
+
+	for (const line of splitCodeLines(patch)) {
+		if (line.startsWith('diff --git ')) {
+			pushCurrent();
+			const match = /^diff --git a\/(.*?) b\/(.*)$/.exec(line);
+			current = {
+				path: match?.[2] ?? line.replace('diff --git ', ''),
+				lines: [line],
+				additions: 0,
+				deletions: 0,
+			};
+			continue;
+		}
+
+		if (!current) {
+			current = { path: 'patch', lines: [], additions: 0, deletions: 0 };
+		}
+
+		if (line.startsWith('+') && !line.startsWith('+++')) current.additions += 1;
+		if (line.startsWith('-') && !line.startsWith('---')) current.deletions += 1;
+		current.lines.push(line);
+	}
+
+	pushCurrent();
+	return files;
+};
+
+const changedFilesLabel = (count: number) => `${count} changed file${count === 1 ? '' : 's'}`;
+
+const DiffToolbarStats: Component<{ additions: number; deletions: number; fileCount: number; class?: string }> = (props) => (
+	<>
+		<DiffStatPill additions={props.additions} deletions={props.deletions} />
+		<span class={props.class ?? 'text-xs text-gray-600 dark:text-gray-300'}>{changedFilesLabel(props.fileCount)}</span>
+	</>
+);
+
+const DiffCollapseButton: Component<{ expanded: boolean; onToggle: () => void }> = (props) => (
+	<button type="button" class="untangled-diff-tool-button" onClick={props.onToggle}>
+		<Show when={props.expanded} fallback={<UnfoldVertical class="size-4" />}>
+			<FoldVertical class="size-4" />
+		</Show>
+		<span>{props.expanded ? 'collapse all' : 'expand all'}</span>
+	</button>
+);
+
+const totalDiffStats = (files: DiffFile[]) =>
+	files.reduce(
+		(acc, file) => ({
+			additions: acc.additions + file.additions,
+			deletions: acc.deletions + file.deletions,
+		}),
+		{ additions: 0, deletions: 0 },
+	);
+
+type DiffFileTreeNode = {
+	name: string;
+	path: string;
+	file?: DiffFile;
+	children?: DiffFileTreeNode[];
+};
+
+const sortDiffFileTree = (nodes: DiffFileTreeNode[]): DiffFileTreeNode[] =>
+	nodes
+		.sort((a, b) => a.name.localeCompare(b.name))
+		.map((node) => ({
+			...node,
+			children: node.children ? sortDiffFileTree(node.children) : undefined,
+		}));
+
+const diffFileTree = (files: DiffFile[]) => {
+	const roots: DiffFileTreeNode[] = [];
+
+	for (const file of files) {
+		const parts = file.path.split('/').filter(Boolean);
+		const pathParts = parts.length > 0 ? parts : [file.path || 'patch'];
+		let siblings = roots;
+		let path = '';
+
+		for (const [index, part] of pathParts.entries()) {
+			path = path ? `${path}/${part}` : part;
+			const isFile = index === pathParts.length - 1;
+
+			if (isFile) {
+				siblings.push({ name: part, path: file.path, file });
+				continue;
+			}
+
+			let node = siblings.find((child) => !child.file && child.name === part);
+			if (!node) {
+				node = { name: part, path, children: [] };
+				siblings.push(node);
+			}
+
+			siblings = node.children!;
+		}
+	}
+
+	return sortDiffFileTree(roots);
+};
+
+const diffFileElementId = (path: string) =>
+	`diff-${Array.from(path, (char) => char.codePointAt(0)!.toString(16).padStart(4, '0')).join('-')}`;
+
+const scrollToDiffFile = (path: string, event: MouseEvent) => {
+	if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+
+	const target = document.getElementById(diffFileElementId(path));
+	if (!target) return;
+
+	event.preventDefault();
+	target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+
+	const hash = `#${target.id}`;
+	if (window.location.hash !== hash) {
+		window.history.pushState(null, '', `${window.location.pathname}${window.location.search}${hash}`);
+	}
+};
+
+const DiffFileTreeNodes: Component<{
+	nodes: DiffFileTreeNode[];
+	reviewedFiles?: () => Set<string>;
+}> = (props) => (
+	<div class="untangled-pr-file-tree-list">
+		<For each={props.nodes}>
+			{(node) => <DiffFileTreeNodeView node={node} reviewedFiles={props.reviewedFiles} />}
+		</For>
+	</div>
+);
+
+const DiffFileTreeNodeView: Component<{
+	node: DiffFileTreeNode;
+	reviewedFiles?: () => Set<string>;
+}> = (props) => (
+	<div class="untangled-pr-file-tree-node">
+		<Show
+			when={props.node.file}
+			fallback={
+				<>
+					<div class="untangled-pr-file-tree-entry" title={props.node.path}>
+						<Folder class="size-4 shrink-0" />
+						<span class="truncate">{props.node.name}</span>
+					</div>
+					<Show when={props.node.children?.length}>
+						<div class="untangled-pr-file-tree-children">
+							<DiffFileTreeNodes nodes={props.node.children!} reviewedFiles={props.reviewedFiles} />
+						</div>
+					</Show>
+				</>
+			}
+		>
+			{(file) => {
+				const isReviewed = () => props.reviewedFiles?.().has(file().path) ?? false;
+				return (
+					<a
+						href={`#${diffFileElementId(file().path)}`}
+						class="untangled-pr-file-tree-entry untangled-pr-file-tree-link"
+						title={file().path}
+						onClick={(event) => scrollToDiffFile(file().path, event)}
+					>
+						<FileText class="size-4 shrink-0" />
+						<span class="truncate">{props.node.name}</span>
+						<Show when={isReviewed()}>
+							<span class="review-indicator text-green-600 dark:text-green-400 flex-shrink-0 ml-1">
+								✓
+							</span>
+						</Show>
+					</a>
+				);
+			}}
+		</Show>
+	</div>
+);
+
+const DiffStatPill: Component<{ additions: number; deletions: number }> = (props) => (
+	<div class="untangled-diff-stat-pill">
+		<Show when={props.additions > 0}>
+			<span class="untangled-diff-stat-add">+{props.additions}</span>
+		</Show>
+		<Show when={props.deletions > 0}>
+			<span class="untangled-diff-stat-del">-{props.deletions}</span>
+		</Show>
+	</div>
+);
+
+const SidebarToggleButton: Component<{
+	visible: boolean;
+	onToggle: () => void;
+	class?: string;
+	ariaLabelCollapse: string;
+	ariaLabelExpand: string;
+	panel?: 'left' | 'right';
+}> = (props) => (
+	<button
+		type="button"
+		class={props.class}
+		aria-label={props.visible ? props.ariaLabelCollapse : props.ariaLabelExpand}
+		aria-pressed={props.visible}
+		onClick={props.onToggle}
+	>
+		<Show when={props.visible} fallback={
+			props.panel === 'right' ? <PanelRightOpen class="size-4" /> : <PanelLeftOpen class="size-4" />
+		}>
+			{props.panel === 'right' ? <PanelRightClose class="size-4" /> : <PanelLeftClose class="size-4" />}
+		</Show>
+	</button>
+);
+
+const DiffFileEntry: Component<{
+	file: DiffFile;
+	open: boolean;
+	onToggle?: (open: boolean) => void;
+	isReviewed?: boolean;
+	onToggleReview?: () => void;
+	wrap?: boolean;
+	maxHeight?: string;
+	className?: string;
+	headerClassName?: string;
+	chevronClassName?: string;
+	pathClassName?: string;
+	showEllipsis?: boolean;
+}> = (props) => (
+	<details
+		id={diffFileElementId(props.file.path)}
+		class={clsx(props.className, props.isReviewed && 'opacity-60')}
+		open={props.open}
+		onToggle={props.onToggle ? (e) => props.onToggle?.(e.currentTarget.open) : undefined}
+	>
+		<summary class={props.headerClassName}>
+			<div class="flex min-w-0 items-center gap-2">
+				<ChevronRight class={props.chevronClassName} />
+				<DiffStatPill additions={props.file.additions} deletions={props.file.deletions} />
+				<span class={clsx('truncate', props.pathClassName)}>{props.file.path}</span>
+			</div>
+			<Show when={props.onToggleReview}>
+				<label
+					class="flex shrink-0 items-center gap-1 text-xs text-gray-400 dark:text-gray-500 hover:text-green-600 dark:hover:text-green-400 transition-colors cursor-pointer"
+					title={props.isReviewed ? 'Mark as unreviewed' : 'Mark as reviewed'}
+					onClick={(e) => {
+						e.stopPropagation();
+					}}
+				>
+					<input
+						type="checkbox"
+						class="sr-only"
+						checked={props.isReviewed}
+						onChange={props.onToggleReview}
+					/>
+					<Show
+						when={props.isReviewed}
+						fallback={<Circle class="size-4" />}
+					>
+						<CircleCheck class="size-4 text-green-600 dark:text-green-400" />
+					</Show>
+					<span class="hidden md:inline">reviewed</span>
+				</label>
+			</Show>
+		</summary>
+		<Show when={props.showEllipsis}>
+			<div class="untangled-pr-diff-ellipsis">...</div>
+		</Show>
+		<CodeView text={props.file.text} wrap={props.wrap} maxHeight={props.maxHeight} diff path={props.file.path} />
+	</details>
+);
+
+export const DiffView: Component<{
+	patch: string;
+	maxHeight?: string;
+	wrap?: boolean;
+	defaultExpanded?: boolean;
+	showFileTree?: boolean;
+	variant?: 'default' | 'commit';
+}> = (props) => {
+	const files = createMemo(() => parseDiffFiles(props.patch));
+	const stats = createMemo(() => totalDiffStats(files()));
+	const [expanded, setExpanded] = createSignal(props.defaultExpanded ?? false);
+	const [filesVisible, setFilesVisible] = createSignal(true);
+	const previewLimit = 5;
+	const showFileTree = createMemo(() => Boolean(props.showFileTree && files().length > 0));
+	const tree = createMemo(() => diffFileTree(files()));
+	const visibleFiles = createMemo(() => (showFileTree() ? files() : files().slice(0, previewLimit)));
+	const hiddenFiles = createMemo(() => (showFileTree() ? [] : files().slice(previewLimit)));
+
+	return (
+		<div class={clsx('untangled-diff-view', props.variant === 'commit' && 'untangled-diff-view-commit')}>
+			<div class="untangled-diff-panel">
+				<div class="untangled-diff-toolbar">
+					<div class="flex min-w-0 items-center gap-2">
+						<Show when={showFileTree()}>
+							<SidebarToggleButton
+								visible={filesVisible()}
+								onToggle={() => setFilesVisible(!filesVisible())}
+								class="untangled-diff-sidebar-toggle"
+								ariaLabelCollapse="collapse changed files sidebar"
+								ariaLabelExpand="expand changed files sidebar"
+							/>
+						</Show>
+						<DiffToolbarStats additions={stats().additions} deletions={stats().deletions} fileCount={files().length} />
+					</div>
+					<div class="flex items-center gap-2">
+						<DiffCollapseButton expanded={expanded()} onToggle={() => setExpanded(!expanded())} />
+						<div class="untangled-diff-mode-group">
+							<button type="button" class="untangled-diff-mode-button untangled-diff-mode-button-active">
+								<FileText class="w-4 h-4" />
+								unified
+							</button>
+							<button type="button" class="untangled-diff-mode-button" disabled title="Split diff is not available yet">
+								<Columns2 class="w-4 h-4" />
+								split
+							</button>
+						</div>
+					</div>
+				</div>
+				<div class={clsx('untangled-diff-panel-body', showFileTree() && filesVisible() && 'untangled-diff-panel-body-with-tree')}>
+					<Show when={showFileTree() && filesVisible()}>
+						<aside class="untangled-pr-file-tree" aria-label="changed files">
+							<DiffFileTreeNodes nodes={tree()} />
+						</aside>
+					</Show>
+
+					<div class={showFileTree() ? 'untangled-pr-diff-files' : 'untangled-diff-files'}>
+						<For each={visibleFiles()}>
+							{(file) => (
+								<DiffFileEntry
+									file={file}
+									open={expanded()}
+									wrap={props.wrap}
+									maxHeight={props.maxHeight}
+									className="untangled-diff-file"
+									headerClassName="untangled-diff-file-header"
+									chevronClassName="untangled-diff-chevron size-4 shrink-0"
+									pathClassName="font-mono text-sm text-gray-900 dark:text-gray-100"
+								/>
+							)}
+						</For>
+						<Show when={hiddenFiles().length > 0}>
+							<details class="untangled-diff-show-more">
+								<summary class="untangled-diff-show-more-summary">
+									<span class="untangled-diff-show-more-closed">
+										<ChevronRight class="untangled-diff-chevron size-4 shrink-0" />
+										Show {hiddenFiles().length} more file{hiddenFiles().length === 1 ? '' : 's'}
+									</span>
+									<span class="untangled-diff-show-more-open">
+										<ChevronRight class="untangled-diff-chevron size-4 shrink-0" />
+										Hide {hiddenFiles().length} file{hiddenFiles().length === 1 ? '' : 's'}
+									</span>
+								</summary>
+								<div class="untangled-diff-show-more-files">
+									<For each={hiddenFiles()}>
+										{(file) => (
+											<DiffFileEntry
+												file={file}
+												open={expanded()}
+												wrap={props.wrap}
+												maxHeight={props.maxHeight}
+												className="untangled-diff-file"
+												headerClassName="untangled-diff-file-header"
+												chevronClassName="untangled-diff-chevron size-4 shrink-0"
+												pathClassName="font-mono text-sm text-gray-900 dark:text-gray-100"
+											/>
+										)}
+									</For>
+								</div>
+							</details>
+						</Show>
+						<Show when={files().length === 0}>
+							<div class="px-4 py-8 text-center text-sm text-gray-400">No differences found.</div>
+						</Show>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export const PullDiffView: Component<{
+	patch: string;
+	roundLabel: string;
+	storageKey: string;
+	history: JSX.Element;
+}> = (props) => {
+	const files = createMemo(() => parseDiffFiles(props.patch));
+	const stats = createMemo(() => totalDiffStats(files()));
+	const tree = createMemo(() => diffFileTree(files()));
+	const [expanded, setExpanded] = createSignal(true);
+	const [filesVisible, setFilesVisible] = createSignal(true);
+	const [historyVisible, setHistoryVisible] = createSignal(true);
+
+	const loadReviewed = (): Set<string> => {
+		try {
+			const data = localStorage.getItem(props.storageKey);
+			if (!data) return new Set();
+			const entry = JSON.parse(data);
+			return new Set(Array.isArray(entry) ? entry : (entry.files || []));
+		} catch {
+			return new Set();
+		}
+	};
+
+	const [reviewed, setReviewed] = createSignal<Set<string>>(new Set());
+
+	createEffect(() => {
+		setReviewed(loadReviewed());
+	});
+
+	const saveReviewed = (newSet: Set<string>) => {
+		const currentFilePaths = new Set(files().map((f) => f.path));
+		const filesToSave = Array.from(newSet).filter((path) => currentFilePaths.has(path));
+		try {
+			localStorage.setItem(
+				props.storageKey,
+				JSON.stringify({
+					files: filesToSave,
+					ts: Date.now(),
+				}),
+			);
+		} catch (e) {
+			console.error('Failed to save reviewed files:', e);
+		}
+	};
+
+	const pruneStale = () => {
+		const now = Date.now();
+		const REVIEWED_PREFIX = 'reviewed:';
+		const MAX_AGE_MS = 30 * 24 * 60 * 60 * 1000;
+		for (let i = 0; i < localStorage.length; i++) {
+			const key = localStorage.key(i);
+			if (key && key.startsWith(REVIEWED_PREFIX) && key !== props.storageKey) {
+				try {
+					const entry = JSON.parse(localStorage.getItem(key) || '{}');
+					if (!entry.ts || now - entry.ts > MAX_AGE_MS) {
+						localStorage.removeItem(key);
+					}
+				} catch {
+					localStorage.removeItem(key);
+				}
+			}
+		}
+	};
+
+	createEffect(() => {
+		if (Math.random() < 0.1) {
+			pruneStale();
+		}
+	});
+
+	const [localOpen, setLocalOpen] = createSignal<Record<string, boolean>>({});
+	const [hasSetInitial, setHasSetInitial] = createSignal(false);
+
+	createEffect(() => {
+		if (files().length > 0) {
+			const isExpanded = expanded();
+			const next: Record<string, boolean> = {};
+			for (const f of files()) {
+				if (!hasSetInitial() && reviewed().has(f.path)) {
+					next[f.path] = false;
+				} else {
+					next[f.path] = isExpanded;
+				}
+			}
+			setLocalOpen(next);
+			setHasSetInitial(true);
+		}
+	});
+
+	const toggleReview = (path: string) => {
+		const nextReviewed = new Set(reviewed());
+		if (nextReviewed.has(path)) {
+			nextReviewed.delete(path);
+		} else {
+			nextReviewed.add(path);
+			setLocalOpen((prev) => ({ ...prev, [path]: false }));
+		}
+		setReviewed(nextReviewed);
+		saveReviewed(nextReviewed);
+	};
+
+	return (
+		<section class="untangled-pr-diff-breakout">
+			<div
+				class={clsx(
+					'untangled-pr-diff-toolbar',
+					!filesVisible() && 'untangled-pr-diff-toolbar-sidebar-collapsed',
+					!historyVisible() && 'untangled-pr-diff-toolbar-history-collapsed',
+				)}
+			>
+				<div class="untangled-pr-diff-toolbar-main">
+					<SidebarToggleButton
+						visible={filesVisible()}
+						onToggle={() => setFilesVisible(!filesVisible())}
+						class="untangled-pr-sidebar-toggle"
+						ariaLabelCollapse="collapse changed files sidebar"
+						ariaLabelExpand="expand changed files sidebar"
+					/>
+					<DiffStatPill additions={stats().additions} deletions={stats().deletions} />
+					<span
+						class={clsx(
+							'text-xs font-medium transition-colors duration-150',
+							reviewed().size === files().length && files().length > 0
+								? 'text-green-600 dark:text-green-400'
+								: 'text-gray-600 dark:text-gray-400'
+						)}
+					>
+						{reviewed().size > 0
+							? `${reviewed().size}/${files().length} file${files().length === 1 ? '' : 's'} reviewed`
+							: `${files().length} changed file${files().length === 1 ? '' : 's'}`
+						}
+					</span>
+					<span class="hidden h-5 w-px bg-gray-300 dark:bg-gray-700 sm:inline-block" />
+					<span class="uppercase tracking-wide">diff</span>
+					<span class="rounded border border-gray-300 px-2 py-0.5 font-mono text-xs text-gray-700 dark:border-gray-600 dark:text-gray-200">
+						{props.roundLabel}
+					</span>
+				</div>
+				<div class="untangled-pr-diff-toolbar-actions">
+					<DiffCollapseButton expanded={expanded()} onToggle={() => setExpanded(!expanded())} />
+				</div>
+				<div class="untangled-pr-diff-toolbar-history">
+					<SidebarToggleButton
+						visible={historyVisible()}
+						onToggle={() => setHistoryVisible(!historyVisible())}
+						class="untangled-pr-sidebar-toggle"
+						ariaLabelCollapse="collapse history panel"
+						ariaLabelExpand="expand history panel"
+						panel="right"
+					/>
+				</div>
+			</div>
+
+			<div
+				class={clsx(
+					'untangled-pr-diff-grid',
+					!filesVisible() && 'untangled-pr-diff-grid-sidebar-collapsed',
+					!historyVisible() && 'untangled-pr-diff-grid-history-collapsed',
+				)}
+			>
+				<Show when={filesVisible()}>
+					<aside class="untangled-pr-file-tree" aria-label="changed files">
+						<DiffFileTreeNodes nodes={tree()} reviewedFiles={reviewed} />
+					</aside>
+				</Show>
+
+				<div class="untangled-pr-diff-files">
+					<For each={files()}>
+						{(file) => (
+							<DiffFileEntry
+								file={file}
+								open={Boolean(localOpen()[file.path])}
+								onToggle={(open) => {
+									setLocalOpen((prev) => ({ ...prev, [file.path]: open }));
+								}}
+								isReviewed={reviewed().has(file.path)}
+								onToggleReview={() => toggleReview(file.path)}
+								className="untangled-pr-diff-file"
+								headerClassName="untangled-pr-diff-file-header"
+								chevronClassName="untangled-pr-diff-chevron size-4 shrink-0"
+								pathClassName="text-base text-gray-100"
+								showEllipsis
+							/>
+						)}
+					</For>
+				</div>
+
+				<Show when={historyVisible()}>
+					<aside class="untangled-pr-history">{props.history}</aside>
+				</Show>
+			</div>
+		</section>
+	);
+};
diff --git a/src/components/repo.tsx b/src/components/repo.tsx
index 83b418a..e31c30f 100644
--- a/src/components/repo.tsx
+++ b/src/components/repo.tsx
@@ -3,23 +3,13 @@ import DOMPurify from 'dompurify';
 import hljs from 'highlight.js/lib/common';
 import {
 	Check,
-	ChevronRight,
-	Circle,
-	CircleCheck,
-	Columns2,
 	Copy,
 	Download,
 	ExternalLink,
 	FileText,
-	FoldVertical,
-	Folder,
-	PanelLeftClose,
-	PanelLeftOpen,
-	PanelRightClose,
-	PanelRightOpen,
+	File,
 	Square,
 	SquareCheckBig,
-	UnfoldVertical,
 	BookMarked,
 	GitFork,
 	Star,
@@ -28,7 +18,7 @@ import {
 } from 'lucide-solid';
 import { marked } from 'marked';
 import { A, useNavigate } from '@solidjs/router';
-import { For, Show, createEffect, createMemo, createSignal, onCleanup, onMount, type Component, type JSX } from 'solid-js';
+import { For, Show, createMemo, createSignal, onCleanup, onMount, type Component, type JSX } from 'solid-js';
 import type { RepoContext, TreeEntry } from '../lib/api/repos';
 import type { Did } from '@atcute/lexicons/syntax';
 import { createQuery } from '@tanstack/solid-query';
@@ -36,9 +26,9 @@ import { getRepo, getRepoLanguages, getRepoForkCount, getRepoByDid } from '../li
 import { getRepoStarCount } from '../lib/api/stars';
 import { getRepoIssueCount } from '../lib/api/issues';
 import { getRepoPullCount } from '../lib/api/pulls';
-import { formatRelativeTime, languageColor, encodePath } from '../lib/repo-utils';
+import { formatRelativeTime, languageColor, encodePath, formatLanguagePercent, blobHref, treeHref } from '../lib/repo-utils';
 import { getTangledAppviewService } from '../lib/settings';
-import { Avatar, SkeletonBlock, buttonStyles, cardStyles } from './common';
+import { Avatar, SkeletonBlock, StateBadge, PlaceholderAvatar, buttonStyles, cardStyles } from './common';
 
 marked.setOptions({
 	gfm: true,
@@ -1020,818 +1010,7 @@ export const MarkdownBlock: Component<{
 	return <div class={classes()} innerHTML={html()} onClick={onMarkdownClick} />;
 };
 
-const splitCodeLines = (value: string): string[] => {
-	const normalized = value.endsWith('\n') ? value.slice(0, -1) : value;
-	return normalized.length === 0 ? [''] : normalized.split('\n');
-};
-
-const escapeHtml = (value: string) =>
-	value
-		.replace(/&/g, '&amp;')
-		.replace(/</g, '&lt;')
-		.replace(/>/g, '&gt;')
-		.replace(/"/g, '&quot;')
-		.replace(/'/g, '&#39;');
-
-const languageAliases: Record<string, string> = {
-	cjs: 'javascript',
-	conf: 'ini',
-	cts: 'typescript',
-	cxx: 'cpp',
-	dockerfile: 'bash',
-	env: 'ini',
-	h: 'c',
-	hpp: 'cpp',
-	htm: 'xml',
-	html: 'xml',
-	js: 'javascript',
-	jsonc: 'json',
-	jsx: 'javascript',
-	ksh: 'bash',
-	m: 'objectivec',
-	markdown: 'markdown',
-	md: 'markdown',
-	mjs: 'javascript',
-	mm: 'objectivec',
-	mts: 'typescript',
-	patch: 'diff',
-	pl: 'perl',
-	pm: 'perl',
-	pyw: 'python',
-	rake: 'ruby',
-	rs: 'rust',
-	sh: 'bash',
-	svg: 'xml',
-	toml: 'ini',
-	ts: 'typescript',
-	tsx: 'typescript',
-	txt: 'plaintext',
-	yml: 'yaml',
-	zsh: 'bash',
-};
-
-const filenameLanguages: Record<string, string> = {
-	dockerfile: 'bash',
-	gemfile: 'ruby',
-	makefile: 'makefile',
-	rakefile: 'ruby',
-};
-
-const languageFromPath = (path?: string) => {
-	if (!path) return undefined;
-
-	const filename = path.split('/').pop()?.toLowerCase() ?? '';
-	if (filenameLanguages[filename]) return filenameLanguages[filename];
-
-	const extension = filename.includes('.') ? filename.split('.').pop() : filename;
-	if (!extension) return undefined;
-
-	return languageAliases[extension] ?? extension;
-};
-
-const resolveHighlightLanguage = (language?: string, path?: string) => {
-	const candidate = (language ?? languageFromPath(path))?.toLowerCase();
-	if (!candidate || candidate === 'plaintext' || candidate === 'text') return undefined;
-	return hljs.getLanguage(candidate) ? candidate : undefined;
-};
-
-const closeOpenSpans = (count: number) => '</span>'.repeat(count);
-
-const splitHighlightedHtmlLines = (html: string): string[] => {
-	const lineParts = html.split('\n');
-	const activeTags: string[] = [];
-
-	return lineParts.map((linePart) => {
-		const prefix = activeTags.join('');
-
-		for (const tag of linePart.match(/<\/?span\b[^>]*>/g) ?? []) {
-			if (tag.startsWith('</')) {
-				activeTags.pop();
-			} else {
-				activeTags.push(tag);
-			}
-		}
-
-		return `${prefix}${linePart}${closeOpenSpans(activeTags.length)}`;
-	});
-};
-
-const highlightCodeLines = (text: string, language?: string): string[] => {
-	const normalized = text.endsWith('\n') ? text.slice(0, -1) : text;
-	const fallback = () => splitCodeLines(normalized).map(escapeHtml);
-
-	if (!language) return fallback();
-
-	try {
-		const highlighted = hljs.highlight(normalized, { language, ignoreIllegals: true }).value;
-		return splitHighlightedHtmlLines(highlighted);
-	} catch {
-		return fallback();
-	}
-};
-
-const diffMetadataLine = (line: string) =>
-	line.startsWith('diff --git ') ||
-	line.startsWith('index ') ||
-	line.startsWith('---') ||
-	line.startsWith('+++') ||
-	line.startsWith('@@') ||
-	line.startsWith('Binary files ') ||
-	line.startsWith('new file mode ') ||
-	line.startsWith('deleted file mode ') ||
-	line.startsWith('old mode ') ||
-	line.startsWith('new mode ') ||
-	line.startsWith('similarity index ') ||
-	line.startsWith('dissimilarity index ') ||
-	line.startsWith('rename from ') ||
-	line.startsWith('rename to ');
-
-const highlightDiffLine = (line: string, language?: string) => {
-	if (diffMetadataLine(line)) return escapeHtml(line);
-
-	const marker = line[0];
-	const isChangedLine = marker === '+' || marker === '-' || marker === ' ';
-	if (!isChangedLine) return escapeHtml(line);
-
-	const content = line.slice(1);
-	const highlighted = highlightCodeLines(content, language)[0] ?? escapeHtml(content);
-	return `<span class="untangled-code-diff-op">${escapeHtml(marker)}</span>${highlighted}`;
-};
-
-/** Parse a URL hash like #L5 or #L3-L8 into {start, end} (1-based, inclusive). */
-const parseLineHash = (hash: string): { start: number; end: number } | null => {
-	const m = /^#L(\d+)(?:-L?(\d+))?$/.exec(hash);
-	if (!m) return null;
-	const start = parseInt(m[1], 10);
-	const end = m[2] ? parseInt(m[2], 10) : start;
-	if (isNaN(start) || isNaN(end)) return null;
-	return { start: Math.min(start, end), end: Math.max(start, end) };
-};
-
-export const CodeView: Component<{
-	text: string;
-	id?: string;
-	wrap?: boolean;
-	maxHeight?: string;
-	diff?: boolean;
-	path?: string;
-	language?: string;
-}> = (props) => {
-	const lines = createMemo(() => splitCodeLines(props.text));
-	const highlightedLines = createMemo(() => {
-		const language = resolveHighlightLanguage(props.language, props.path);
-		if (props.diff) return lines().map((line) => highlightDiffLine(line, language));
-		return highlightCodeLines(props.text, language);
-	});
-	const lineClass = (line: string) =>
-		props.diff
-			? clsx(
-					line.startsWith('+') && !line.startsWith('+++') && 'untangled-code-line-add',
-					line.startsWith('-') && !line.startsWith('---') && 'untangled-code-line-del',
-					line.startsWith('@@') && 'untangled-code-line-hunk',
-				)
-			: undefined;
-
-	// Line selection state (only used in non-diff mode)
-	const [selection, setSelection] = createSignal<{ start: number; end: number } | null>(null);
-	// The line number of the last plain click (anchor for shift-click ranges)
-	let anchorLine: number | null = null;
-
-	const applyHashSelection = (scroll = false) => {
-		const parsed = parseLineHash(window.location.hash);
-		setSelection(parsed);
-		if (scroll && parsed) {
-			requestAnimationFrame(() => {
-				const target = document.getElementById(`L${parsed.start}`);
-				target?.scrollIntoView({ behavior: 'instant', block: 'center' });
-			});
-		}
-	};
-
-	const handleLineNumberClick = (lineNum: number, event: MouseEvent) => {
-		event.preventDefault();
-		let hash: string;
-		if (event.shiftKey && anchorLine !== null) {
-			const lo = Math.min(anchorLine, lineNum);
-			const hi = Math.max(anchorLine, lineNum);
-			hash = `#L${lo}-L${hi}`;
-		} else {
-			anchorLine = lineNum;
-			hash = `#L${lineNum}`;
-		}
-		history.pushState(null, '', hash);
-		setSelection(parseLineHash(hash));
-	};
-
-	onMount(() => {
-		if (props.diff) return;
-
-		applyHashSelection(true);
-
-		const onHashChange = () => applyHashSelection(false);
-		window.addEventListener('hashchange', onHashChange);
-		window.addEventListener('popstate', onHashChange);
-		onCleanup(() => {
-			window.removeEventListener('hashchange', onHashChange);
-			window.removeEventListener('popstate', onHashChange);
-		});
-	});
-
-	const isLineHighlighted = (lineNum: number) => {
-		const s = selection();
-		if (!s) return false;
-		return lineNum >= s.start && lineNum <= s.end;
-	};
-
-	return (
-		<div class="untangled-code-scroll" style={{ 'max-height': props.maxHeight }}>
-			<div
-				id={props.id}
-				class={clsx('untangled-code-view', props.wrap && 'untangled-code-view-wrap')}
-			>
-				<For each={lines()}>
-					{(line, index) => {
-						const lineNum = index() + 1;
-						return (
-							<div class={clsx('untangled-code-line', lineClass(line), !props.diff && isLineHighlighted(lineNum) && 'untangled-code-line--hl')}>
-								<a
-									id={`L${lineNum}`}
-									href={`#L${lineNum}`}
-									class="untangled-code-line-number"
-									onClick={props.diff ? undefined : (e) => handleLineNumberClick(lineNum, e)}
-								>
-									{lineNum}
-								</a>
-								<span class="untangled-code-line-content" innerHTML={highlightedLines()[index()] || ' '} />
-							</div>
-						);
-					}}
-				</For>
-			</div>
-		</div>
-	);
-};
-
-interface DiffFile {
-	path: string;
-	text: string;
-	additions: number;
-	deletions: number;
-}
-
-const parseDiffFiles = (patch: string): DiffFile[] => {
-	const files: DiffFile[] = [];
-	let current: { path: string; lines: string[]; additions: number; deletions: number } | null = null;
-
-	const pushCurrent = () => {
-		if (!current) return;
-		const hasRenderableDiff = current.lines.some(
-			(line) =>
-				line.startsWith('@@') ||
-				line.startsWith('Binary files ') ||
-				line.startsWith('new file mode ') ||
-				line.startsWith('deleted file mode ') ||
-				line.startsWith('old mode ') ||
-				line.startsWith('similarity index ') ||
-				line.startsWith('rename from '),
-		);
-		if (!hasRenderableDiff && current.additions === 0 && current.deletions === 0) {
-			current = null;
-			return;
-		}
-		files.push({
-			path: current.path,
-			text: current.lines.join('\n'),
-			additions: current.additions,
-			deletions: current.deletions,
-		});
-	};
-
-	for (const line of splitCodeLines(patch)) {
-		if (line.startsWith('diff --git ')) {
-			pushCurrent();
-			const match = /^diff --git a\/(.*?) b\/(.*)$/.exec(line);
-			current = {
-				path: match?.[2] ?? line.replace('diff --git ', ''),
-				lines: [line],
-				additions: 0,
-				deletions: 0,
-			};
-			continue;
-		}
-
-		if (!current) {
-			current = { path: 'patch', lines: [], additions: 0, deletions: 0 };
-		}
-
-		if (line.startsWith('+') && !line.startsWith('+++')) current.additions += 1;
-		if (line.startsWith('-') && !line.startsWith('---')) current.deletions += 1;
-		current.lines.push(line);
-	}
-
-	pushCurrent();
-	return files;
-};
-
-const changedFilesLabel = (count: number) => `${count} changed file${count === 1 ? '' : 's'}`;
-
-const DiffToolbarStats: Component<{ additions: number; deletions: number; fileCount: number; class?: string }> = (props) => (
-	<>
-		<DiffStatPill additions={props.additions} deletions={props.deletions} />
-		<span class={props.class ?? 'text-xs text-gray-600 dark:text-gray-300'}>{changedFilesLabel(props.fileCount)}</span>
-	</>
-);
-
-const DiffCollapseButton: Component<{ expanded: boolean; onToggle: () => void }> = (props) => (
-	<button type="button" class="untangled-diff-tool-button" onClick={props.onToggle}>
-		<Show when={props.expanded} fallback={<UnfoldVertical class="size-4" />}>
-			<FoldVertical class="size-4" />
-		</Show>
-		<span>{props.expanded ? 'collapse all' : 'expand all'}</span>
-	</button>
-);
-
-export const DiffView: Component<{
-	patch: string;
-	maxHeight?: string;
-	wrap?: boolean;
-	defaultExpanded?: boolean;
-	showFileTree?: boolean;
-	variant?: 'default' | 'commit';
-}> = (props) => {
-	const files = createMemo(() => parseDiffFiles(props.patch));
-	const stats = createMemo(() => totalDiffStats(files()));
-	const [expanded, setExpanded] = createSignal(props.defaultExpanded ?? false);
-	const [filesVisible, setFilesVisible] = createSignal(true);
-	const previewLimit = 5;
-	const showFileTree = createMemo(() => Boolean(props.showFileTree && files().length > 0));
-	const tree = createMemo(() => diffFileTree(files()));
-	const visibleFiles = createMemo(() => (showFileTree() ? files() : files().slice(0, previewLimit)));
-	const hiddenFiles = createMemo(() => (showFileTree() ? [] : files().slice(previewLimit)));
-
-	return (
-		<div class={clsx('untangled-diff-view', props.variant === 'commit' && 'untangled-diff-view-commit')}>
-			<div class="untangled-diff-panel">
-				<div class="untangled-diff-toolbar">
-					<div class="flex min-w-0 items-center gap-2">
-						<Show when={showFileTree()}>
-							<button
-								type="button"
-								class="untangled-diff-sidebar-toggle"
-								aria-label={filesVisible() ? 'collapse changed files sidebar' : 'expand changed files sidebar'}
-								aria-pressed={filesVisible()}
-								onClick={() => setFilesVisible(!filesVisible())}
-							>
-								<Show when={filesVisible()} fallback={<PanelLeftOpen class="size-4" />}>
-									<PanelLeftClose class="size-4" />
-								</Show>
-							</button>
-						</Show>
-						<DiffToolbarStats additions={stats().additions} deletions={stats().deletions} fileCount={files().length} />
-					</div>
-					<div class="flex items-center gap-2">
-						<DiffCollapseButton expanded={expanded()} onToggle={() => setExpanded(!expanded())} />
-						<div class="untangled-diff-mode-group">
-							<button type="button" class="untangled-diff-mode-button untangled-diff-mode-button-active">
-								<FileText class="w-4 h-4" />
-								unified
-							</button>
-							<button type="button" class="untangled-diff-mode-button" disabled title="Split diff is not available yet">
-								<Columns2 class="w-4 h-4" />
-								split
-							</button>
-						</div>
-					</div>
-				</div>
-				<div class={clsx('untangled-diff-panel-body', showFileTree() && filesVisible() && 'untangled-diff-panel-body-with-tree')}>
-					<Show when={showFileTree() && filesVisible()}>
-						<aside class="untangled-pr-file-tree" aria-label="changed files">
-							<DiffFileTreeNodes nodes={tree()} />
-						</aside>
-					</Show>
-
-					<div class={showFileTree() ? 'untangled-pr-diff-files' : 'untangled-diff-files'}>
-						<For each={visibleFiles()}>
-							{(file) => (
-								<details id={diffFileElementId(file.path)} class="untangled-diff-file" open={expanded()}>
-									<summary class="untangled-diff-file-header">
-										<div class="flex min-w-0 items-center gap-2">
-											<ChevronRight class="untangled-diff-chevron size-4 shrink-0" />
-											<DiffStatPill additions={file.additions} deletions={file.deletions} />
-											<span class="truncate font-mono text-sm text-gray-900 dark:text-gray-100">{file.path}</span>
-										</div>
-									</summary>
-									<CodeView text={file.text} wrap={props.wrap} maxHeight={props.maxHeight} diff path={file.path} />
-								</details>
-							)}
-						</For>
-						<Show when={hiddenFiles().length > 0}>
-							<details class="untangled-diff-show-more">
-								<summary class="untangled-diff-show-more-summary">
-									<span class="untangled-diff-show-more-closed">
-										<ChevronRight class="untangled-diff-chevron size-4 shrink-0" />
-										Show {hiddenFiles().length} more file{hiddenFiles().length === 1 ? '' : 's'}
-									</span>
-									<span class="untangled-diff-show-more-open">
-										<ChevronRight class="untangled-diff-chevron size-4 shrink-0" />
-										Hide {hiddenFiles().length} file{hiddenFiles().length === 1 ? '' : 's'}
-									</span>
-								</summary>
-								<div class="untangled-diff-show-more-files">
-									<For each={hiddenFiles()}>
-										{(file) => (
-											<details id={diffFileElementId(file.path)} class="untangled-diff-file" open={expanded()}>
-												<summary class="untangled-diff-file-header">
-													<div class="flex min-w-0 items-center gap-2">
-														<ChevronRight class="untangled-diff-chevron size-4 shrink-0" />
-														<DiffStatPill additions={file.additions} deletions={file.deletions} />
-														<span class="truncate font-mono text-sm text-gray-900 dark:text-gray-100">{file.path}</span>
-													</div>
-												</summary>
-												<CodeView text={file.text} wrap={props.wrap} maxHeight={props.maxHeight} diff path={file.path} />
-											</details>
-										)}
-									</For>
-								</div>
-							</details>
-						</Show>
-						<Show when={files().length === 0}>
-							<div class="px-4 py-8 text-center text-sm text-gray-400">No differences found.</div>
-						</Show>
-					</div>
-				</div>
-			</div>
-		</div>
-	);
-};
-
-const totalDiffStats = (files: DiffFile[]) =>
-	files.reduce(
-		(acc, file) => ({
-			additions: acc.additions + file.additions,
-			deletions: acc.deletions + file.deletions,
-		}),
-		{ additions: 0, deletions: 0 },
-	);
-
-type DiffFileTreeNode = {
-	name: string;
-	path: string;
-	file?: DiffFile;
-	children?: DiffFileTreeNode[];
-};
-
-const sortDiffFileTree = (nodes: DiffFileTreeNode[]): DiffFileTreeNode[] =>
-	nodes
-		.sort((a, b) => a.name.localeCompare(b.name))
-		.map((node) => ({
-			...node,
-			children: node.children ? sortDiffFileTree(node.children) : undefined,
-		}));
-
-const diffFileTree = (files: DiffFile[]) => {
-	const roots: DiffFileTreeNode[] = [];
-
-	for (const file of files) {
-		const parts = file.path.split('/').filter(Boolean);
-		const pathParts = parts.length > 0 ? parts : [file.path || 'patch'];
-		let siblings = roots;
-		let path = '';
-
-		for (const [index, part] of pathParts.entries()) {
-			path = path ? `${path}/${part}` : part;
-			const isFile = index === pathParts.length - 1;
-
-			if (isFile) {
-				siblings.push({ name: part, path: file.path, file });
-				continue;
-			}
-
-			let node = siblings.find((child) => !child.file && child.name === part);
-			if (!node) {
-				node = { name: part, path, children: [] };
-				siblings.push(node);
-			}
-
-			siblings = node.children!;
-		}
-	}
-
-	return sortDiffFileTree(roots);
-};
-
-const diffFileElementId = (path: string) =>
-	`diff-${Array.from(path, (char) => char.codePointAt(0)!.toString(16).padStart(4, '0')).join('-')}`;
-
-const scrollToDiffFile = (path: string, event: MouseEvent) => {
-	if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
-
-	const target = document.getElementById(diffFileElementId(path));
-	if (!target) return;
-
-	event.preventDefault();
-	target.scrollIntoView({ behavior: 'smooth', block: 'start' });
-
-	const hash = `#${target.id}`;
-	if (window.location.hash !== hash) {
-		window.history.pushState(null, '', `${window.location.pathname}${window.location.search}${hash}`);
-	}
-};
-
-const DiffFileTreeNodes: Component<{
-	nodes: DiffFileTreeNode[];
-	reviewedFiles?: () => Set<string>;
-}> = (props) => (
-	<div class="untangled-pr-file-tree-list">
-		<For each={props.nodes}>
-			{(node) => <DiffFileTreeNodeView node={node} reviewedFiles={props.reviewedFiles} />}
-		</For>
-	</div>
-);
-
-const DiffFileTreeNodeView: Component<{
-	node: DiffFileTreeNode;
-	reviewedFiles?: () => Set<string>;
-}> = (props) => (
-	<div class="untangled-pr-file-tree-node">
-		<Show
-			when={props.node.file}
-			fallback={
-				<>
-					<div class="untangled-pr-file-tree-entry" title={props.node.path}>
-						<Folder class="size-4 shrink-0" />
-						<span class="truncate">{props.node.name}</span>
-					</div>
-					<Show when={props.node.children?.length}>
-						<div class="untangled-pr-file-tree-children">
-							<DiffFileTreeNodes nodes={props.node.children!} reviewedFiles={props.reviewedFiles} />
-						</div>
-					</Show>
-				</>
-			}
-		>
-			{(file) => {
-				const isReviewed = () => props.reviewedFiles?.().has(file().path) ?? false;
-				return (
-					<a
-						href={`#${diffFileElementId(file().path)}`}
-						class="untangled-pr-file-tree-entry untangled-pr-file-tree-link"
-						title={file().path}
-						onClick={(event) => scrollToDiffFile(file().path, event)}
-					>
-						<FileText class="size-4 shrink-0" />
-						<span class="truncate">{props.node.name}</span>
-						<Show when={isReviewed()}>
-							<span class="review-indicator text-green-600 dark:text-green-400 flex-shrink-0 ml-1">
-								✓
-							</span>
-						</Show>
-					</a>
-				);
-			}}
-		</Show>
-	</div>
-);
-
-const DiffStatPill: Component<{ additions: number; deletions: number }> = (props) => (
-	<div class="untangled-diff-stat-pill">
-		<Show when={props.additions > 0}>
-			<span class="untangled-diff-stat-add">+{props.additions}</span>
-		</Show>
-		<Show when={props.deletions > 0}>
-			<span class="untangled-diff-stat-del">-{props.deletions}</span>
-		</Show>
-	</div>
-);
-
-export const PullDiffView: Component<{
-	patch: string;
-	roundLabel: string;
-	storageKey: string;
-	history: JSX.Element;
-}> = (props) => {
-	const files = createMemo(() => parseDiffFiles(props.patch));
-	const stats = createMemo(() => totalDiffStats(files()));
-	const tree = createMemo(() => diffFileTree(files()));
-	const [expanded, setExpanded] = createSignal(true);
-	const [filesVisible, setFilesVisible] = createSignal(true);
-	const [historyVisible, setHistoryVisible] = createSignal(true);
-
-	const loadReviewed = (): Set<string> => {
-		try {
-			const data = localStorage.getItem(props.storageKey);
-			if (!data) return new Set();
-			const entry = JSON.parse(data);
-			return new Set(Array.isArray(entry) ? entry : (entry.files || []));
-		} catch {
-			return new Set();
-		}
-	};
-
-	const [reviewed, setReviewed] = createSignal<Set<string>>(new Set());
-
-	createEffect(() => {
-		setReviewed(loadReviewed());
-	});
-
-	const saveReviewed = (newSet: Set<string>) => {
-		const currentFilePaths = new Set(files().map((f) => f.path));
-		const filesToSave = Array.from(newSet).filter((path) => currentFilePaths.has(path));
-		try {
-			localStorage.setItem(
-				props.storageKey,
-				JSON.stringify({
-					files: filesToSave,
-					ts: Date.now(),
-				}),
-			);
-		} catch (e) {
-			console.error('Failed to save reviewed files:', e);
-		}
-	};
-
-	const pruneStale = () => {
-		const now = Date.now();
-		const REVIEWED_PREFIX = 'reviewed:';
-		const MAX_AGE_MS = 30 * 24 * 60 * 60 * 1000;
-		for (let i = 0; i < localStorage.length; i++) {
-			const key = localStorage.key(i);
-			if (key && key.startsWith(REVIEWED_PREFIX) && key !== props.storageKey) {
-				try {
-					const entry = JSON.parse(localStorage.getItem(key) || '{}');
-					if (!entry.ts || now - entry.ts > MAX_AGE_MS) {
-						localStorage.removeItem(key);
-					}
-				} catch {
-					localStorage.removeItem(key);
-				}
-			}
-		}
-	};
-
-	createEffect(() => {
-		if (Math.random() < 0.1) {
-			pruneStale();
-		}
-	});
-
-	const [localOpen, setLocalOpen] = createSignal<Record<string, boolean>>({});
-	const [hasSetInitial, setHasSetInitial] = createSignal(false);
-
-	createEffect(() => {
-		if (files().length > 0) {
-			const isExpanded = expanded();
-			const next: Record<string, boolean> = {};
-			for (const f of files()) {
-				if (!hasSetInitial() && reviewed().has(f.path)) {
-					next[f.path] = false;
-				} else {
-					next[f.path] = isExpanded;
-				}
-			}
-			setLocalOpen(next);
-			setHasSetInitial(true);
-		}
-	});
-
-	const toggleReview = (path: string) => {
-		const nextReviewed = new Set(reviewed());
-		if (nextReviewed.has(path)) {
-			nextReviewed.delete(path);
-		} else {
-			nextReviewed.add(path);
-			setLocalOpen((prev) => ({ ...prev, [path]: false }));
-		}
-		setReviewed(nextReviewed);
-		saveReviewed(nextReviewed);
-	};
-
-	return (
-		<section class="untangled-pr-diff-breakout">
-			<div
-				class={clsx(
-					'untangled-pr-diff-toolbar',
-					!filesVisible() && 'untangled-pr-diff-toolbar-sidebar-collapsed',
-					!historyVisible() && 'untangled-pr-diff-toolbar-history-collapsed',
-				)}
-			>
-				<div class="untangled-pr-diff-toolbar-main">
-					<button
-						type="button"
-						class="untangled-pr-sidebar-toggle"
-						aria-label={filesVisible() ? 'collapse changed files sidebar' : 'expand changed files sidebar'}
-						aria-pressed={filesVisible()}
-						onClick={() => setFilesVisible(!filesVisible())}
-					>
-						<Show when={filesVisible()} fallback={<PanelLeftOpen class="size-4" />}>
-							<PanelLeftClose class="size-4" />
-						</Show>
-					</button>
-					<DiffStatPill additions={stats().additions} deletions={stats().deletions} />
-					<span
-						class={clsx(
-							'text-xs font-medium transition-colors duration-150',
-							reviewed().size === files().length && files().length > 0
-								? 'text-green-600 dark:text-green-400'
-								: 'text-gray-600 dark:text-gray-400'
-						)}
-					>
-						{reviewed().size > 0
-							? `${reviewed().size}/${files().length} file${files().length === 1 ? '' : 's'} reviewed`
-							: `${files().length} changed file${files().length === 1 ? '' : 's'}`
-						}
-					</span>
-					<span class="hidden h-5 w-px bg-gray-300 dark:bg-gray-700 sm:inline-block" />
-					<span class="uppercase tracking-wide">diff</span>
-					<span class="rounded border border-gray-300 px-2 py-0.5 font-mono text-xs text-gray-700 dark:border-gray-600 dark:text-gray-200">
-						{props.roundLabel}
-					</span>
-				</div>
-				<div class="untangled-pr-diff-toolbar-actions">
-					<DiffCollapseButton expanded={expanded()} onToggle={() => setExpanded(!expanded())} />
-				</div>
-				<div class="untangled-pr-diff-toolbar-history">
-					<button
-						type="button"
-						class="untangled-pr-sidebar-toggle"
-						aria-label={historyVisible() ? 'collapse history panel' : 'expand history panel'}
-						aria-pressed={historyVisible()}
-						onClick={() => setHistoryVisible(!historyVisible())}
-					>
-						<Show when={historyVisible()} fallback={<PanelRightOpen class="size-4" />}>
-							<PanelRightClose class="size-4" />
-						</Show>
-					</button>
-				</div>
-			</div>
 
-			<div
-				class={clsx(
-					'untangled-pr-diff-grid',
-					!filesVisible() && 'untangled-pr-diff-grid-sidebar-collapsed',
-					!historyVisible() && 'untangled-pr-diff-grid-history-collapsed',
-				)}
-			>
-				<Show when={filesVisible()}>
-					<aside class="untangled-pr-file-tree" aria-label="changed files">
-						<DiffFileTreeNodes nodes={tree()} reviewedFiles={reviewed} />
-					</aside>
-				</Show>
-
-				<div class="untangled-pr-diff-files">
-					<For each={files()}>
-						{(file) => (
-							<details
-								id={diffFileElementId(file.path)}
-								class={clsx('untangled-pr-diff-file', reviewed().has(file.path) && 'opacity-60')}
-								open={Boolean(localOpen()[file.path])}
-								onToggle={(e) => {
-									const target = e.currentTarget;
-									setLocalOpen((prev) => ({ ...prev, [file.path]: target.open }));
-								}}
-							>
-								<summary class="untangled-pr-diff-file-header">
-									<div class="flex min-w-0 items-center gap-2">
-										<ChevronRight class="untangled-pr-diff-chevron size-4 shrink-0" />
-										<DiffStatPill additions={file.additions} deletions={file.deletions} />
-										<span class="truncate text-base text-gray-100">{file.path}</span>
-									</div>
-									<label
-										class="flex shrink-0 items-center gap-1 text-xs text-gray-400 dark:text-gray-500 hover:text-green-600 dark:hover:text-green-400 transition-colors cursor-pointer"
-										title={reviewed().has(file.path) ? 'Mark as unreviewed' : 'Mark as reviewed'}
-										onClick={(e) => {
-											e.stopPropagation();
-										}}
-									>
-										<input
-											type="checkbox"
-											class="sr-only"
-											checked={reviewed().has(file.path)}
-											onChange={() => toggleReview(file.path)}
-										/>
-										<Show
-											when={reviewed().has(file.path)}
-											fallback={<Circle class="size-4" />}
-										>
-											<CircleCheck class="size-4 text-green-600 dark:text-green-400" />
-										</Show>
-										<span class="hidden md:inline">reviewed</span>
-									</label>
-								</summary>
-								<div class="untangled-pr-diff-ellipsis">...</div>
-								<CodeView text={file.text} diff path={file.path} />
-							</details>
-						)}
-					</For>
-				</div>
-
-				<Show when={historyVisible()}>
-					<aside class="untangled-pr-history">{props.history}</aside>
-				</Show>
-			</div>
-		</section>
-	);
-};
 
 export const AsideCard: Component<{ title: string; children: JSX.Element }> = (props) => (
 	<div class={cardStyles('p-4')}>
@@ -2121,4 +1300,251 @@ export const RepoCardSkeleton: Component<{ compact?: boolean; noBorder?: boolean
 	);
 };
 
+export const IssueOrPullRow: Component<{
+	title: string;
+	number: number | string;
+	state: 'open' | 'closed' | 'merged';
+	kind: 'issue' | 'pull';
+	author: { did: string; handle: string };
+	createdAt: string;
+	href: string;
+	meta?: JSX.Element;
+	children?: JSX.Element;
+}> = (props) => {
+	return (
+		<A
+			href={props.href}
+			class="untangled-list-row"
+		>
+			<div class="min-w-0">
+				<div class="text-base text-gray-900 dark:text-gray-100">
+					{props.title}{' '}
+					<span class="text-gray-500 dark:text-gray-400 font-normal">#{props.number}</span>
+				</div>
+				<div class="mt-3 flex flex-wrap items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+					<StateBadge state={props.state} kind={props.kind} />
+					<Avatar did={props.author.did} size="size-5" />
+					<span>{props.author.handle}</span>
+					<span>·</span>
+					<span>{formatRelativeTime(props.createdAt)}</span>
+					{props.meta}
+				</div>
+				{props.children}
+			</div>
+		</A>
+	);
+};
+
+export const ThreadCommentView: Component<{
+	id?: string;
+	author: { did: string; handle: string };
+	createdAt: string;
+	markdown: string;
+	isAuthor?: boolean;
+	isReply?: boolean;
+	class?: string;
+}> = (props) => (
+	<div
+		id={props.id}
+		class={clsx(
+			'flex gap-2 w-full mx-auto text-sm text-gray-900 dark:text-gray-100',
+			props.isReply && 'pr-4',
+			props.class || 'py-4'
+		)}
+	>
+		<div class="shrink-0 h-fit relative z-10">
+			<Avatar did={props.author.did} size="size-8 mr-1" />
+		</div>
+		<div class="min-w-0 flex-1">
+			<div class="flex flex-wrap items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400 mb-0.5">
+				<A
+					class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white font-medium hover:underline"
+					href={`/${props.author.did}`}
+				>
+					{props.author.handle}
+				</A>
+				<Show when={props.isAuthor}>
+					<span class="text-xs text-gray-400 dark:text-gray-500">(author)</span>
+				</Show>
+				<span class="select-none">·</span>
+				<Show when={props.id} fallback={<span>{formatRelativeTime(props.createdAt)}</span>}>
+					<a href={`#${props.id}`} class="hover:underline">
+						{formatRelativeTime(props.createdAt)}
+					</a>
+				</Show>
+			</div>
+			<div class="min-w-0 break-words text-gray-800 dark:text-gray-200">
+				<MarkdownBlock markdown={props.markdown} />
+			</div>
+		</div>
+	</div>
+);
+
+const commitSummary = (message: string) => message.trim().split('\n')[0] || 'no commit message';
+
+export const PathBreadcrumbs: Component<{
+	repo: Parameters<typeof treeHref>[0];
+	refName: string;
+	path: string;
+	withDivider?: boolean;
+}> = (props) => {
+	const segments = createMemo(() => props.path.split('/').filter(Boolean));
+
+	return (
+		<div class={clsx('text-base', props.withDivider && 'pb-2 mb-3 border-b border-gray-200 dark:border-gray-700')}>
+			<div class="overflow-x-auto whitespace-nowrap text-gray-400 dark:text-gray-500">
+				<A href={treeHref(props.repo, props.refName)} class="text-gray-500 dark:text-gray-400 hover:underline">
+					{props.repo.slug}
+				</A>
+				<For each={segments()}>
+					{(segment, index) => (
+						<>
+							<span class="px-1">/</span>
+							<Show
+								when={index() < segments().length - 1}
+								fallback={<span class="text-gray-900 dark:text-gray-100">{segment}</span>}
+							>
+								<A
+									href={treeHref(props.repo, props.refName, segments().slice(0, index() + 1).join('/'))}
+									class="text-gray-500 dark:text-gray-400 hover:underline"
+								>
+									{segment}
+								</A>
+							</Show>
+						</>
+					)}
+				</For>
+			</div>
+		</div>
+	);
+};
+
+export const TreeLatestCommitPanel: Component<{
+	repo: Parameters<typeof treeHref>[0];
+	commit: {
+		hash: string;
+		message: string;
+		when: string;
+		author?: {
+			email: string;
+			name: string;
+		};
+	};
+}> = (props) => (
+	<div class="pb-2 mb-3 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between flex-wrap text-sm gap-2">
+		<div class="flex min-w-0 flex-wrap items-center gap-1">
+			<Show
+				when={props.commit.author?.email?.startsWith('did:') ? props.commit.author.email : undefined}
+				fallback={<PlaceholderAvatar size="size-6" iconSize="size-4" />}
+			>
+				{(did) => <Avatar did={did()} size="size-6" />}
+			</Show>
+			<span class="font-medium text-gray-700 dark:text-gray-200">{props.commit.author?.name || 'unknown author'}</span>
+			<span class="select-none text-gray-400 dark:text-gray-500">·</span>
+			<A
+				href={`/${props.repo.owner.handle}/${props.repo.slug}/commit/${props.commit.hash}`}
+				class="min-w-0 truncate no-underline hover:underline text-gray-900 dark:text-white"
+			>
+				{commitSummary(props.commit.message)}
+			</A>
+			<span class="select-none text-gray-400 dark:text-gray-500">·</span>
+			<span class="text-gray-500 dark:text-gray-400">{formatRelativeTime(props.commit.when)}</span>
+		</div>
+		<A
+			href={`/${props.repo.owner.handle}/${props.repo.slug}/commit/${props.commit.hash}`}
+			class="inline-flex w-fit items-center rounded bg-gray-100 px-2 py-1 font-mono text-xs text-gray-700 no-underline hover:underline dark:bg-gray-900 dark:text-gray-300"
+		>
+			{props.commit.hash.slice(0, 8)}
+		</A>
+	</div>
+);
+
+export const RepoLanguageBar: Component<{
+	languages: Array<{ name: string; percentage: number; color?: string }>;
+	loading?: boolean;
+}> = (props) => (
+	<Show when={props.languages.length > 0} fallback={<Show when={props.loading}><RepoLanguageBarSkeleton /></Show>}>
+		<details class="group -my-4 -m-6 mb-4">
+			<summary class="untangled-language-bar">
+				<For each={props.languages}>
+					{(language) => {
+						const name = language.name || 'Other';
+						const color = language.color || languageColor(name);
+						return (
+							<div
+								class="untangled-language-segment"
+								title={`${name} ${formatLanguagePercent(language.percentage)}`}
+								style={{
+									width: `${language.percentage}%`,
+									'background-color': color,
+								}}
+							/>
+						);
+					}}
+				</For>
+			</summary>
+			<div class="px-4 py-2 border-b border-gray-200 dark:border-gray-600 flex items-center gap-4 flex-wrap">
+				<For each={props.languages}>
+					{(language) => {
+						const name = language.name || 'Other';
+						const color = language.color || languageColor(name);
+						return (
+							<div class="flex flex-grow items-center justify-center gap-2 text-xs">
+								<div
+									class="size-2 rounded-full"
+									style={{
+										background: `radial-gradient(circle at 35% 35%, color-mix(in srgb, ${color} 70%, white), ${color} 30%, color-mix(in srgb, ${color} 85%, black))`,
+									}}
+								/>
+								<div>
+									{name}{' '}
+									<span class="text-gray-500 dark:text-gray-400">
+										{formatLanguagePercent(language.percentage)}
+									</span>
+								</div>
+							</div>
+						);
+					}}
+				</For>
+			</div>
+		</details>
+	</Show>
+);
+
+export const LoadingFilePath: Component<{
+	repo: Parameters<typeof treeHref>[0];
+	refName: string;
+	path: string;
+}> = (props) => {
+	const segments = createMemo(() => props.path.split('/').filter(Boolean));
+	const filename = createMemo(() => segments().at(-1) ?? props.path);
+
+	return (
+		<div class="untangled-blob-card">
+			<div class="untangled-blob-header pb-2 mb-3 text-base border-b border-gray-200 dark:border-gray-700">
+				<div class="flex flex-col md:flex-row md:justify-between gap-2">
+					<PathBreadcrumbs repo={props.repo} refName={props.refName} path={props.path} />
+					<div class="untangled-blob-file-info text-gray-500 md:text-sm flex flex-wrap md:gap-0 items-center">
+						<span>
+							at <A href={treeHref(props.repo, props.refName)}>{props.refName}</A>
+						</span>
+					</div>
+				</div>
+			</div>
+			<div class="space-y-3">
+				<OverviewFileRow
+					name={filename()}
+					href={blobHref(props.repo, props.refName, props.path)}
+					icon={<File class="size-4 flex-shrink-0" />}
+					class="untangled-file-row-loading"
+				/>
+			</div>
+		</div>
+	);
+};
+
+export { CodeView, DiffView, PullDiffView } from './code-view';
+
+
+
 
diff --git a/src/index.css b/src/index.css
index e0d2b8d..6935a7a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1934,6 +1934,7 @@ details[open] > .untangled-language-bar {
 
 .untangled-safe-header {
 	padding-top: env(safe-area-inset-top);
+	z-index: 20;
 }
 
 .untangled-unread-badge {
@@ -2004,6 +2005,133 @@ details[open] > .untangled-language-bar {
 	}
 }
 
+.untangled-toggle-group {
+	display: flex;
+	align-items: stretch;
+	border-radius: 0.25rem;
+	border: 1px solid rgb(209 213 219);
+	overflow: hidden;
+}
+@media (prefers-color-scheme: dark) {
+	.untangled-toggle-group {
+		border-color: rgb(55 65 81);
+	}
+}
+
+.untangled-list-row {
+	display: block;
+	border-radius: 0.25rem;
+	background-color: rgb(255 255 255);
+	padding: 1rem 1.5rem;
+	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+	text-decoration-line: none;
+}
+.untangled-list-row:hover {
+	text-decoration-line: underline;
+}
+@media (prefers-color-scheme: dark) {
+	.untangled-list-row {
+		background-color: rgb(31 41 55);
+		border: 1px solid rgb(55 65 81);
+	}
+}
+
+.untangled-thread-group {
+	overflow: hidden;
+	border-radius: 0.25rem;
+	border: 1px solid rgb(229 231 235);
+	background-color: rgb(249 250 251);
+	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+@media (prefers-color-scheme: dark) {
+	.untangled-thread-group {
+		border-color: rgb(55 65 81);
+		background-color: rgb(31 41 55 / 0.5);
+	}
+}
+
+.untangled-thread-comment {
+	display: flex;
+	gap: 0.5rem;
+	border-radius: 0.25rem;
+	background-color: rgb(255 255 255);
+	padding: 1rem 1.5rem;
+}
+@media (prefers-color-scheme: dark) {
+	.untangled-thread-comment {
+		background-color: rgb(31 41 55);
+	}
+}
+
+.untangled-thread-replies-list {
+	position: relative;
+	margin-left: 2.5rem;
+	border-left: 1px solid rgb(229 231 235);
+}
+@media (prefers-color-scheme: dark) {
+	.untangled-thread-replies-list {
+		border-left-color: rgb(55 65 81);
+	}
+}
+
+.untangled-thread-reply {
+	margin-left: -1rem;
+	display: flex;
+	gap: 0.5rem;
+	padding: 1rem 1rem 1rem 0;
+}
+
+.untangled-thread-reply-trigger {
+	display: flex;
+	width: 100%;
+	align-items: center;
+	gap: 0.5rem;
+	border-top: 1px solid rgb(209 213 219);
+	background: transparent;
+	padding: 0.5rem 1.5rem;
+	text-align: left;
+	font-size: 0.875rem;
+	color: rgb(107 114 128);
+}
+@media (prefers-color-scheme: dark) {
+	.untangled-thread-reply-trigger {
+		border-top-color: rgb(55 65 81);
+		color: rgb(156 163 175);
+	}
+}
+
+.untangled-thread-reply-form {
+	display: flex;
+	width: 100%;
+	flex-direction: column;
+	gap: 0.5rem;
+	border-top: 1px solid rgb(229 231 235);
+	padding: 0.5rem;
+}
+@media (prefers-color-scheme: dark) {
+	.untangled-thread-reply-form {
+		border-top-color: rgb(55 65 81);
+	}
+}
+
+.untangled-comment-composer {
+	position: relative;
+	display: flex;
+	min-width: 0;
+	width: 100%;
+	flex-direction: column;
+	gap: 0.75rem;
+	border-radius: 0.25rem;
+	background-color: rgb(255 255 255);
+	padding: 1rem;
+	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+@media (prefers-color-scheme: dark) {
+	.untangled-comment-composer {
+		background-color: rgb(31 41 55);
+	}
+}
+
 .untangled-button {
 	min-height: 30px;
 }
diff --git a/src/layout.tsx b/src/layout.tsx
index ef4acd9..4c94506 100644
--- a/src/layout.tsx
+++ b/src/layout.tsx
@@ -395,7 +395,7 @@ const Topbar: Component = () => {
 
 export const RootShell: Component<{ children?: JSX.Element }> = (props) => (
 	<div class="min-h-screen flex flex-col gap-4 bg-slate-100 dark:bg-gray-900 dark:text-white">
-		<header class="untangled-safe-header w-full shadow-sm dark:text-white bg-white dark:bg-gray-800" style="z-index: 20;">
+		<header class="untangled-safe-header w-full shadow-sm dark:text-white bg-white dark:bg-gray-800">
 			<Topbar />
 		</header>
 
diff --git a/src/pages/repo/code.tsx b/src/pages/repo/code.tsx
index d913f30..916ca55 100644
--- a/src/pages/repo/code.tsx
+++ b/src/pages/repo/code.tsx
@@ -5,50 +5,11 @@ import { createQuery, keepPreviousData, useQueryClient } from '@tanstack/solid-q
 import { For, Match, Show, Switch, createEffect, createMemo, createSignal, onCleanup, type Accessor, type Component } from 'solid-js';
 import { buildBlobDataUrl, decodeBlobBytes, decodeBlobText, getRepoBlob, getRepoBranches, getRepoDefaultBranch, getRepoLanguages, getRepoLog, getRepoTags, getRepoTree, type CommitHeadline } from '../../lib/api/repos';
 import { Avatar, ErrorState, PlaceholderAvatar, buttonStyles, cardStyles } from '../../components/common';
-import { CloneDropdown, CodeView, FileRow, MarkdownBlock, OverviewFileRow, ReadmeCard, RepoBlobSkeleton, RepoLanguageBarSkeleton, RepoTreeSkeleton } from '../../components/repo';
+import { CloneDropdown, CodeView, FileRow, MarkdownBlock, OverviewFileRow, ReadmeCard, RepoBlobSkeleton, RepoTreeSkeleton, PathBreadcrumbs, TreeLatestCommitPanel, RepoLanguageBar, LoadingFilePath } from '../../components/repo';
 import { RepoFrame, useRepoQuery } from './shared';
-import { blobHref, commitHref, commitsHref, countLines, decodeRoutePath, formatBytes, formatLanguagePercent, formatRelativeTime, getErrorMessage, getParentPath, imageLike, isDirectory, joinPath, languageColor, markdownLike, safeDecode, sortedTreeEntries, svgLike, treeHref, updateRecentRepoLanguage, videoLike } from '../../lib/repo-utils';
+import { blobHref, commitHref, commitsHref, countLines, decodeRoutePath, formatBytes, formatRelativeTime, getErrorMessage, getParentPath, imageLike, isDirectory, joinPath, markdownLike, safeDecode, sortedTreeEntries, svgLike, treeHref, updateRecentRepoLanguage, videoLike } from '../../lib/repo-utils';
 import { LOADING_DELAY_MS, hasNamedRef, normalizeLanguages, resolveDefaultBranchName, resolveRouteRefAndPath, shouldAnimateNavigation, useDelayedLoading } from './code-helpers';
 
-const PathBreadcrumbs: Component<{
-	repo: Parameters<typeof treeHref>[0];
-	refName: string;
-	path: string;
-	withDivider?: boolean;
-}> = (props) => {
-	const segments = createMemo(() => props.path.split('/').filter(Boolean));
-
-	return (
-		<div class={clsx('text-base', props.withDivider && 'pb-2 mb-3 border-b border-gray-200 dark:border-gray-700')}>
-			<div class="overflow-x-auto whitespace-nowrap text-gray-400 dark:text-gray-500">
-				<A href={treeHref(props.repo, props.refName)} class="text-gray-500 dark:text-gray-400 hover:underline">
-					{props.repo.slug}
-				</A>
-				<For each={segments()}>
-					{(segment, index) => (
-						<>
-							<span class="px-1">/</span>
-							<Show
-								when={index() < segments().length - 1}
-								fallback={<span class="text-gray-900 dark:text-gray-100">{segment}</span>}
-							>
-								<A
-									href={treeHref(props.repo, props.refName, segments().slice(0, index() + 1).join('/'))}
-									class="text-gray-500 dark:text-gray-400 hover:underline"
-								>
-									{segment}
-								</A>
-							</Show>
-						</>
-					)}
-				</For>
-			</div>
-		</div>
-	);
-};
-
-const commitSummary = (message: string) => message.trim().split('\n')[0] || 'no commit message';
-
 const readmeIsAvailable = (
 	readme: { filename: string; contents: string } | undefined,
 	entries: Array<{ name: string; mode: string }>,
@@ -60,145 +21,6 @@ const readmeIsAvailable = (
 	return filename.length > 0 && entries.some((entry) => !entry.mode.startsWith('004') && entry.name.toLowerCase() === filename);
 };
 
-const TreeLatestCommitPanel: Component<{
-	repo: Parameters<typeof treeHref>[0];
-	commit: {
-		hash: string;
-		message: string;
-		when: string;
-		author?: {
-			email: string;
-			name: string;
-		};
-	};
-}> = (props) => (
-	<div class="pb-2 mb-3 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between flex-wrap text-sm gap-2">
-		<div class="flex min-w-0 flex-wrap items-center gap-1">
-			<Show
-				when={props.commit.author?.email?.startsWith('did:') ? props.commit.author.email : undefined}
-				fallback={<PlaceholderAvatar size="size-6" iconSize="size-4" />}
-			>
-				{(did) => <Avatar did={did()} size="size-6" />}
-			</Show>
-			<span class="font-medium text-gray-700 dark:text-gray-200">{props.commit.author?.name || 'unknown author'}</span>
-			<span class="select-none text-gray-400 dark:text-gray-500">·</span>
-			<A
-				href={`/${props.repo.owner.handle}/${props.repo.slug}/commit/${props.commit.hash}`}
-				class="min-w-0 truncate no-underline hover:underline text-gray-900 dark:text-white"
-			>
-				{commitSummary(props.commit.message)}
-			</A>
-			<span class="select-none text-gray-400 dark:text-gray-500">·</span>
-			<span class="text-gray-500 dark:text-gray-400">{formatRelativeTime(props.commit.when)}</span>
-		</div>
-		<A
-			href={`/${props.repo.owner.handle}/${props.repo.slug}/commit/${props.commit.hash}`}
-			class="inline-flex w-fit items-center rounded bg-gray-100 px-2 py-1 font-mono text-xs text-gray-700 no-underline hover:underline dark:bg-gray-900 dark:text-gray-300"
-		>
-			{props.commit.hash.slice(0, 8)}
-		</A>
-	</div>
-);
-
-// const FallbackLanguageBar: Component = () => (
-// 	<details class="group -my-4 -m-6 mb-4">
-// 		<summary class="untangled-language-bar">
-// 			<div
-// 				class="untangled-language-segment"
-// 				title="Other 100%"
-// 				style={{
-// 					width: "100%",
-// 					'background-color': languageColor("Other"),
-// 				}}
-// 			/>
-// 		</summary>
-// 	</details>
-// );
-
-const RepoLanguageBar: Component<{
-	languages: Array<{ name: string; percentage: number; color?: string }>;
-	loading?: boolean;
-}> = (props) => (
-	<Show when={props.languages.length > 0} fallback={<Show when={props.loading}><RepoLanguageBarSkeleton /></Show>}>
-		<details class="group -my-4 -m-6 mb-4">
-			<summary class="untangled-language-bar">
-				<For each={props.languages}>
-					{(language) => {
-						const name = language.name || 'Other';
-						const color = language.color || languageColor(name);
-						return (
-							<div
-								class="untangled-language-segment"
-								title={`${name} ${formatLanguagePercent(language.percentage)}`}
-								style={{
-									width: `${language.percentage}%`,
-									'background-color': color,
-								}}
-							/>
-						);
-					}}
-				</For>
-			</summary>
-			<div class="px-4 py-2 border-b border-gray-200 dark:border-gray-600 flex items-center gap-4 flex-wrap">
-				<For each={props.languages}>
-					{(language) => {
-						const name = language.name || 'Other';
-						const color = language.color || languageColor(name);
-						return (
-							<div class="flex flex-grow items-center justify-center gap-2 text-xs">
-								<div
-									class="size-2 rounded-full"
-									style={{
-										background: `radial-gradient(circle at 35% 35%, color-mix(in srgb, ${color} 70%, white), ${color} 30%, color-mix(in srgb, ${color} 85%, black))`,
-									}}
-								/>
-								<div>
-									{name}{' '}
-									<span class="text-gray-500 dark:text-gray-400">
-										{formatLanguagePercent(language.percentage)}
-									</span>
-								</div>
-							</div>
-						);
-					}}
-				</For>
-			</div>
-		</details>
-	</Show>
-);
-
-const LoadingFilePath: Component<{
-	repo: Parameters<typeof treeHref>[0];
-	refName: string;
-	path: string;
-}> = (props) => {
-	const segments = createMemo(() => props.path.split('/').filter(Boolean));
-	const filename = createMemo(() => segments().at(-1) ?? props.path);
-
-	return (
-		<div class="untangled-blob-card">
-			<div class="untangled-blob-header pb-2 mb-3 text-base border-b border-gray-200 dark:border-gray-700">
-				<div class="flex flex-col md:flex-row md:justify-between gap-2">
-					<PathBreadcrumbs repo={props.repo} refName={props.refName} path={props.path} />
-					<div class="untangled-blob-file-info text-gray-500 md:text-sm flex flex-wrap md:gap-0 items-center">
-						<span>
-							at <A href={treeHref(props.repo, props.refName)}>{props.refName}</A>
-						</span>
-					</div>
-				</div>
-			</div>
-			<div class="space-y-3">
-				<OverviewFileRow
-					name={filename()}
-					href={blobHref(props.repo, props.refName, props.path)}
-					icon={<File class="size-4 flex-shrink-0" />}
-					class="untangled-file-row-loading"
-				/>
-			</div>
-		</div>
-	);
-};
-
 const RepoCodePageLegacy: Component = () => {
 	const params = useParams();
 	const navigate = useNavigate();
diff --git a/src/pages/repo/issues.tsx b/src/pages/repo/issues.tsx
index 62e0168..469c692 100644
--- a/src/pages/repo/issues.tsx
+++ b/src/pages/repo/issues.tsx
@@ -10,7 +10,7 @@ import { parseAtUri } from '../../lib/api/records';
 import type { RepoContext } from '../../lib/api/repos';
 import { useAuth } from '../../lib/auth';
 import { Avatar, ErrorState, PaginationControls, StateBadge, ToggleButton, buttonStyles, cardStyles, inputStyles, textareaStyles } from '../../components/common';
-import { AtUriPanel, MarkdownBlock, RepoFormSkeleton, RepoListPageSkeleton, RepoListSkeleton, RepoThreadSkeleton } from '../../components/repo';
+import { AtUriPanel, MarkdownBlock, RepoFormSkeleton, RepoListPageSkeleton, RepoListSkeleton, RepoThreadSkeleton, IssueOrPullRow, ThreadCommentView } from '../../components/repo';
 import { RepoFrame, issueQueryKey, issuesQueryKey, useRepoQuery } from './shared';
 import { REPO_LIST_PAGE_LIMIT, formatRelativeTime, getErrorMessage, issueHref, parseIntegerSearchParam, uniqueCommenters, saveRecentIssueOrPull } from '../../lib/repo-utils';
 import { buildIssueCommentThreads, buildIssueFilterQuery, parseIssueFilter } from './issues-helpers';
@@ -86,7 +86,7 @@ export const IssuesPage: Component = () => {
 		<RepoFrame active="issues" loadingFallback={<RepoListPageSkeleton kind="issues" showCreate={Boolean(auth.agent())} />}>
 			<div class="rounded bg-white p-4 dark:bg-gray-800">
 				<div class="untangled-filter-grid">
-					<div class="flex items-stretch rounded border border-gray-300 dark:border-gray-700">
+					<div class="untangled-toggle-group">
 						<ToggleButton
 							active={stateFilter() === 'open'}
 							onClick={() => setStateFilter('open')}
@@ -159,26 +159,17 @@ export const IssuesPage: Component = () => {
 									<div class="contents">
 										<For each={paginated()}>
 											{(issue) => (
-												<A
+												<IssueOrPullRow
+													title={issue.value.title}
+													number={issue.number || issue.rkey}
+													state={issue.state}
+													kind="issue"
+													author={{ did: issue.author.did, handle: issue.author.handle }}
+													createdAt={issue.value.createdAt}
 													href={issueHref(repoQuery.data!, issue.uri)}
-													class="block rounded shadow-sm bg-white px-6 py-4 dark:bg-gray-800 dark:border-gray-700 no-underline hover:underline"
-												>
-												<div class="min-w-0">
-													<div class="text-base text-gray-900 dark:text-gray-100">
-														{issue.value.title}{' '}
-														<span class="text-gray-500 dark:text-gray-400">#{issue.number || issue.rkey}</span>
-													</div>
-													<div class="mt-3 flex flex-wrap items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
-														<StateBadge state={issue.state} kind="issue" />
-														<Avatar did={issue.author.did} size="size-5" />
-														<span>{issue.author.handle}</span>
-														<span>·</span>
-														<span>{formatRelativeTime(issue.value.createdAt)}</span>
-													</div>
-												</div>
-											</A>
-										)}
-									</For>
+												/>
+											)}
+										</For>
 								</div>
 							</div>
 							<Show when={repoQuery.data}>
@@ -530,48 +521,31 @@ export const IssuePage: Component = () => {
 									</div>
 								</section>
 
-								<div class="flex min-w-0 flex-col gap-4">
-									<div class="mt-4 flex flex-col gap-4">
+								<div class="flex min-w-0 flex-col gap-4">									<div class="mt-4 flex flex-col gap-4">
 										<For each={commentThreads()}>
 											{(thread) => (
-												<div class="overflow-hidden rounded border border-gray-200 bg-gray-50 shadow-sm dark:border-gray-700 dark:bg-gray-800/50">
-													<div id={`comment-${thread.item.rkey}`} class="flex gap-2 rounded bg-white px-6 py-4 dark:bg-gray-800">
-														<div class="shrink-0">
-															<Avatar did={thread.item.author.did} size="size-8 mr-1" />
-														</div>
-														<div class="min-w-0 flex-1">
-															<div class="flex flex-wrap items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
-																<a href={`/${thread.item.author.did}`} class="text-gray-700 dark:text-gray-200">{thread.item.author.handle}</a>
-																<Show when={thread.item.author.did === detail().issue.author.did}>
-																	<span>(author)</span>
-																</Show>
-																<span class="select-none">·</span>
-																<a href={`#comment-${thread.item.rkey}`} class="hover:underline">{formatRelativeTime(thread.item.value.createdAt)}</a>
-															</div>
-															<MarkdownBlock markdown={thread.item.value.body} />
-														</div>
-													</div>
+												<div class="untangled-thread-group">
+													<ThreadCommentView
+														id={`comment-${thread.item.rkey}`}
+														author={{ did: thread.item.author.did, handle: thread.item.author.handle }}
+														createdAt={thread.item.value.createdAt}
+														markdown={thread.item.value.body}
+														isAuthor={thread.item.author.did === detail().issue.author.did}
+														class="untangled-thread-comment"
+													/>
 
 													<Show when={thread.replies.length > 0}>
-														<div class="relative ml-10 border-l border-gray-200 dark:border-gray-700">
+														<div class="untangled-thread-replies-list">
 															<For each={thread.replies}>
 																{(reply) => (
-																	<div id={`comment-${reply.rkey}`} class="-ml-4 flex gap-2 py-4 pr-4">
-																		<div class="shrink-0 relative z-10">
-																			<Avatar did={reply.author.did} size="size-8 mr-1" />
-																		</div>
-																		<div class="min-w-0 flex-1">
-																			<div class="flex flex-wrap items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
-																				<a href={`/${reply.author.did}`} class="text-gray-700 dark:text-gray-200">{reply.author.handle}</a>
-																				<Show when={reply.author.did === detail().issue.author.did}>
-																					<span>(author)</span>
-																				</Show>
-																				<span class="select-none">·</span>
-																				<a href={`#comment-${reply.rkey}`} class="hover:underline">{formatRelativeTime(reply.value.createdAt)}</a>
-																			</div>
-																			<MarkdownBlock markdown={reply.value.body} />
-																		</div>
-																	</div>
+																	<ThreadCommentView
+																		id={`comment-${reply.rkey}`}
+																		author={{ did: reply.author.did, handle: reply.author.handle }}
+																		createdAt={reply.value.createdAt}
+																		markdown={reply.value.body}
+																		isAuthor={reply.author.did === detail().issue.author.did}
+																		class="untangled-thread-reply"
+																	/>
 																)}
 															</For>
 														</div>
@@ -583,7 +557,7 @@ export const IssuePage: Component = () => {
 															fallback={
 																<button
 																	type="button"
-																	class="flex w-full items-center gap-2 border-t border-gray-300 px-6 py-2 text-left text-sm text-gray-500 dark:border-gray-700 dark:text-gray-400"
+																	class="untangled-thread-reply-trigger"
 																	onClick={() => {
 																		setReplyingTo(thread.item);
 																		setReplyBody('');
@@ -598,13 +572,13 @@ export const IssuePage: Component = () => {
 														>
 														<form
 															onSubmit={(event) => void submitReply(event, thread.item)}
-															class="flex w-full flex-col gap-2 border-t border-gray-200 p-2 dark:border-gray-700"
+															class="untangled-thread-reply-form"
 														>
 															<Show when={currentDid()}>
 																{(did) => (
 																	<div class="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
 																		<Avatar did={did()} size="size-6" />
-																					<span>{currentHandle()}</span>
+																		<span>{currentHandle()}</span>
 																	</div>
 																)}
 															</Show>
@@ -635,8 +609,8 @@ export const IssuePage: Component = () => {
 										</For>
 
 										<Show when={auth.agent()}>
-												<form onSubmit={addComment} class="flex min-w-0 flex-col gap-2">
-													<div class="relative flex min-w-0 w-full flex-col gap-3 rounded bg-white px-4 py-4 shadow-sm dark:bg-gray-800">
+											<form onSubmit={addComment} class="flex min-w-0 flex-col gap-2">
+												<div class="untangled-comment-composer">
 													<Show when={currentDid()}>
 														{(did) => (
 															<div class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-200">
@@ -657,7 +631,7 @@ export const IssuePage: Component = () => {
 													</Show>
 												</div>
 												<div class="flex flex-wrap items-center gap-2">
-															<button type="submit" class={clsx(buttonStyles('primary'), 'justify-center')} disabled={working() || !comment().trim()}>
+													<button type="submit" class={clsx(buttonStyles('primary'), 'justify-center')} disabled={working() || !comment().trim()}>
 														<Show when={workingAction() === 'comment'} fallback={<MessageSquarePlus class="size-4" />}>
 															<LoaderCircle class="size-4 animate-spin" />
 														</Show>
diff --git a/src/pages/repo/pulls.tsx b/src/pages/repo/pulls.tsx
index 910c354..6bb43c0 100644
--- a/src/pages/repo/pulls.tsx
+++ b/src/pages/repo/pulls.tsx
@@ -28,7 +28,7 @@ import { parseAtUri } from '../../lib/api/records';
 import { compareBranches, getRepoBranches, type RepoContext, compareFork, listRepoRecords } from '../../lib/api/repos';
 import { useAuth } from '../../lib/auth';
 import { Avatar, ErrorState, LoadingState, PaginationControls, StateBadge, ToggleButton, buttonStyles, cardStyles, textareaStyles } from '../../components/common';
-import { AtUriPanel, BranchPill, DiffView, MarkdownBlock, PullComposeSkeleton, PullDiffSkeleton, PullDiffView, RepoListPageSkeleton, RepoListSkeleton, RepoThreadSkeleton } from '../../components/repo';
+import { AtUriPanel, BranchPill, DiffView, MarkdownBlock, PullComposeSkeleton, PullDiffSkeleton, PullDiffView, RepoListPageSkeleton, RepoListSkeleton, RepoThreadSkeleton, IssueOrPullRow, ThreadCommentView } from '../../components/repo';
 import { RepoFrame, pullQueryKey, pullsQueryKey, useRepoQuery } from './shared';
 import { REPO_LIST_PAGE_LIMIT, formatRelativeTime, getErrorMessage, parseIntegerSearchParam, pullHref, uniqueCommenters, saveRecentIssueOrPull } from '../../lib/repo-utils';
 import { buildPullFilterQuery, parsePastedPatchPrefill, parsePullFilter, type PullSourceMode, getRoundIndexForComment, buildPRCommentThreads } from './pulls-helpers';
@@ -104,7 +104,7 @@ export const PullsPage: Component = () => {
 		<RepoFrame active="pulls" loadingFallback={<RepoListPageSkeleton kind="pulls" showCreate={Boolean(auth.agent())} />}>
 			<div class="rounded bg-white p-4 dark:bg-gray-800">
 				<div class="untangled-filter-grid">
-					<div class="flex items-stretch rounded border border-gray-300 dark:border-gray-700">
+					<div class="untangled-toggle-group">
 						<ToggleButton
 							active={stateFilter() === 'open'}
 							onClick={() => setStateFilter('open')}
@@ -183,34 +183,30 @@ export const PullsPage: Component = () => {
 									<div class="contents">
 										<For each={paginated()}>
 											{(pull) => (
-												<A
+												<IssueOrPullRow
+													title={pull.value.title}
+													number={pull.number || pull.rkey}
+													state={pull.state}
+													kind="pull"
+													author={{ did: pull.author.did, handle: pull.author.handle }}
+													createdAt={pull.value.createdAt}
 													href={pullHref(repoQuery.data!, pull.uri)}
-													class="block rounded shadow-sm bg-white px-6 py-4 dark:bg-gray-800 dark:border-gray-700 no-underline hover:underline"
+													meta={
+														<>
+															<span>·</span>
+															<span>{pull.value.rounds.length} round{pull.value.rounds.length === 1 ? '' : 's'}</span>
+														</>
+													}
 												>
-												<div class="min-w-0">
-													<div class="text-base text-gray-900 dark:text-gray-100">
-														{pull.value.title}{' '}
-														<span class="text-gray-500 dark:text-gray-400">#{pull.number || pull.rkey}</span>
-													</div>
-													<div class="mt-3 flex flex-wrap items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
-														<StateBadge state={pull.state} kind="pull" />
-														<Avatar did={pull.author.did} size="size-5" />
-														<span>{pull.author.handle}</span>
-														<span>·</span>
-														<span>{formatRelativeTime(pull.value.createdAt)}</span>
-														<span>·</span>
-														<span>{pull.value.rounds.length} round{pull.value.rounds.length === 1 ? '' : 's'}</span>
-													</div>
 													<div class="mt-3 flex flex-wrap items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
 														<span>targeting</span>
 														<BranchPill name={pull.value.target.branch} />
 														<span>from</span>
 														<BranchPill name={pull.value.source?.branch ?? pull.value.target.branch} />
 													</div>
-												</div>
-											</A>
-										)}
-									</For>
+												</IssueOrPullRow>
+											)}
+										</For>
 								</div>
 							</div>
 							<Show when={repoQuery.data}>
@@ -1008,38 +1004,7 @@ const updatePullStatusData = (
 	return data;
 };
 
-const PRCommentView: Component<{
-	author: string;
-	did: string;
-	createdAt: string;
-	markdown: string;
-	isReply?: boolean;
-	id?: string;
-}> = (props) => (
-	<div
-		id={props.id}
-		class={clsx(
-			'flex gap-2 w-full mx-auto text-sm text-gray-900 dark:text-gray-100 py-4',
-			props.isReply && 'pr-4'
-		)}
-	>
-		<div class="shrink-0 h-fit relative z-10">
-			<Avatar did={props.did} size="size-8 mr-1" />
-		</div>
-		<div class="min-w-0 flex-1">
-			<div class="flex flex-wrap items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400 mb-0.5">
-				<a class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 font-medium hover:underline" href={`/${props.did}`}>{props.author}</a>
-				<span class="select-none">·</span>
-				<Show when={props.id} fallback={<span>{formatRelativeTime(props.createdAt)}</span>}>
-					<a href={`#${props.id}`} class="hover:underline">{formatRelativeTime(props.createdAt)}</a>
-				</Show>
-			</div>
-			<div class="min-w-0 break-words text-gray-800 dark:text-gray-200">
-				<MarkdownBlock markdown={props.markdown} />
-			</div>
-		</div>
-	</div>
-);
+
 
 export const PullPage: Component = () => {
 	const auth = useAuth();
@@ -1541,24 +1506,24 @@ export const PullPage: Component = () => {
 																			<For each={roundThreads()}>
 																				{(thread) => (
 																					<div class="flex flex-col -ml-4">
-																						<PRCommentView
+																						<ThreadCommentView
 																							id={`comment-${thread.item.rkey}`}
-																							author={thread.item.author.handle}
-																							did={thread.item.author.did}
+																							author={{ handle: thread.item.author.handle, did: thread.item.author.did }}
 																							createdAt={thread.item.value.createdAt}
 																							markdown={thread.item.value.body}
+																							isAuthor={thread.item.author.did === detail().pull.author.did}
 																						/>
 																						<Show when={thread.replies.length > 0}>
 																							<div class="relative ml-10 border-l border-gray-200 dark:border-gray-700">
 																								<For each={thread.replies}>
 																									{(reply) => (
 																										<div class="-ml-4">
-																											<PRCommentView
+																											<ThreadCommentView
 																												id={`comment-${reply.rkey}`}
-																												author={reply.author.handle}
-																												did={reply.author.did}
+																												author={{ handle: reply.author.handle, did: reply.author.did }}
 																												createdAt={reply.value.createdAt}
 																												markdown={reply.value.body}
+																												isAuthor={reply.author.did === detail().pull.author.did}
 																												isReply={true}
 																											/>
 																										</div>