diff --git a/web/src/lib/components/repo/issues/IssueBody.stories.svelte b/web/src/lib/components/repo/issues/IssueBody.stories.svelte
new file mode 100644
index 00000000..87d7b9f9
--- /dev/null
+++ b/web/src/lib/components/repo/issues/IssueBody.stories.svelte
@@ -0,0 +1,35 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import IssueBody from "./IssueBody.svelte";
+
+	// normally produced by $lib/markup (sanitised); inlined here for the story
+	const sampleHtml = `<p>I'd like a <code>/trending</code> view that shows more than the five repositories currently listed in the timeline sidebar.</p>
+<ul><li>discover active projects</li><li>understand what's happening</li></ul>
+<pre><code>curl https://tangled.org/trending</code></pre>`;
+
+	const { Story } = defineMeta({
+		title: "Repo/Issues/IssueBody",
+		component: IssueBody,
+		tags: ["autodocs"],
+		argTypes: {
+			body: { control: "text" },
+			bodyHtml: { control: "text" }
+		},
+		args: {
+			body: "I'd like a `/trending` view.",
+			bodyHtml: sampleHtml
+		}
+	});
+</script>
+
+<!-- rendered markdown (bodyHtml present) -->
+<Story name="Rendered" />
+
+<!-- fallback to raw source when rendering was skipped (body too large / null html) -->
+<Story
+	name="Plain fallback"
+	args={{ body: "raw markdown that was not rendered\n\n- item one\n- item two", bodyHtml: null }}
+/>
+
+<!-- empty body renders nothing -->
+<Story name="Empty" args={{ body: "", bodyHtml: null }} />
diff --git a/web/src/lib/components/repo/issues/IssueBody.svelte b/web/src/lib/components/repo/issues/IssueBody.svelte
new file mode 100644
index 00000000..5fd52ee1
--- /dev/null
+++ b/web/src/lib/components/repo/issues/IssueBody.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	interface Props {
+		// raw markdown source, used as a fallback when rendering was skipped
+		body: string;
+		// sanitised html from $lib/markup, or null if the body was empty/too large
+		bodyHtml: string | null;
+	}
+
+	let { body, bodyHtml }: Props = $props();
+</script>
+
+{#if bodyHtml}
+	<!-- eslint-disable-next-line svelte/no-at-html-tags -- sanitised in $lib/markup -->
+	<article class="markup mt-4">{@html bodyHtml}</article>
+{:else if body}
+	<article class="mt-4 whitespace-pre-wrap text-foreground-default">{body}</article>
+{/if}
diff --git a/web/src/lib/components/repo/issues/IssueHeader.stories.svelte b/web/src/lib/components/repo/issues/IssueHeader.stories.svelte
new file mode 100644
index 00000000..6b7fdae5
--- /dev/null
+++ b/web/src/lib/components/repo/issues/IssueHeader.stories.svelte
@@ -0,0 +1,27 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import IssueHeader from "./IssueHeader.svelte";
+
+	const { Story } = defineMeta({
+		title: "Repo/Issues/IssueHeader",
+		component: IssueHeader,
+		tags: ["autodocs"],
+		argTypes: {
+			title: { control: "text" },
+			rkey: { control: "text" }
+		},
+		args: {
+			title: "Add a full trending repositories view",
+			rkey: "3mrkgcxb4m422"
+		}
+	});
+</script>
+
+<Story name="Default" />
+<Story
+	name="Long title"
+	args={{
+		title:
+			"Investigate intermittent failures when pushing large packfiles over the git smart protocol"
+	}}
+/>
diff --git a/web/src/lib/components/repo/issues/IssueHeader.svelte b/web/src/lib/components/repo/issues/IssueHeader.svelte
new file mode 100644
index 00000000..5a176365
--- /dev/null
+++ b/web/src/lib/components/repo/issues/IssueHeader.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	interface Props {
+		title: string;
+		// short identifier shown after the title, i.e. the issue record's rkey
+		rkey: string;
+	}
+
+	let { title, rkey }: Props = $props();
+</script>
+
+<header class="pb-2">
+	<h1 class="text-2xl">
+		{title}
+		<span class="text-foreground-subtle">#{rkey}</span>
+	</h1>
+</header>
diff --git a/web/src/lib/components/repo/issues/IssueInfoBar.stories.svelte b/web/src/lib/components/repo/issues/IssueInfoBar.stories.svelte
new file mode 100644
index 00000000..dd66c199
--- /dev/null
+++ b/web/src/lib/components/repo/issues/IssueInfoBar.stories.svelte
@@ -0,0 +1,28 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import IssueInfoBar from "./IssueInfoBar.svelte";
+
+	const { Story } = defineMeta({
+		title: "Repo/Issues/IssueInfoBar",
+		component: IssueInfoBar,
+		tags: ["autodocs"],
+		argTypes: {
+			state: {
+				control: { type: "inline-radio" },
+				options: ["open", "closed"]
+			},
+			authorHandle: { control: "text" },
+			authorDid: { control: "text" },
+			createdAt: { control: "text" }
+		},
+		args: {
+			state: "open",
+			authorHandle: "joshka.net",
+			authorDid: "did:plc:3p7ejjxnufohsygt5vbyxb2i",
+			createdAt: "2025-06-01T10:30:00Z"
+		}
+	});
+</script>
+
+<Story name="Open" />
+<Story name="Closed" args={{ state: "closed" }} />
diff --git a/web/src/lib/components/repo/issues/IssueInfoBar.svelte b/web/src/lib/components/repo/issues/IssueInfoBar.svelte
new file mode 100644
index 00000000..5316c496
--- /dev/null
+++ b/web/src/lib/components/repo/issues/IssueInfoBar.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import IssueStatePill from "./IssueStatePill.svelte";
+	import User from "$lib/components/ui/User.svelte";
+	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
+
+	interface Props {
+		state: "open" | "closed";
+		authorHandle: string;
+		authorDid: string;
+		createdAt: string;
+		actions?: Snippet;
+	}
+
+	let { state, authorHandle, authorDid, createdAt, actions }: Props = $props();
+</script>
+
+<div class="flex flex-wrap items-center gap-x-1 gap-y-1.5 text-sm text-foreground-subtle">
+	<IssueStatePill {state} />
+
+	<span class="ml-1 flex items-center gap-1">
+		opened by
+		<User handle={authorHandle} did={authorDid} />
+	</span>
+
+	<span class="before:mr-1 before:content-['·']">
+		<TimeAgo value={createdAt} />
+	</span>
+
+	{#if actions}
+		<div class="ml-auto flex items-center gap-2">
+			{@render actions()}
+		</div>
+	{/if}
+</div>
diff --git a/web/src/lib/components/repo/issues/IssueLabelPanel.stories.svelte b/web/src/lib/components/repo/issues/IssueLabelPanel.stories.svelte
new file mode 100644
index 00000000..3b035df3
--- /dev/null
+++ b/web/src/lib/components/repo/issues/IssueLabelPanel.stories.svelte
@@ -0,0 +1,13 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import IssueLabelPanel from "./IssueLabelPanel.svelte";
+
+	const { Story } = defineMeta({
+		title: "Repo/Issues/IssueLabelPanel",
+		component: IssueLabelPanel,
+		tags: ["autodocs"]
+	});
+</script>
+
+<!-- stub component; renders placeholder text until labels/area/assignee are wired up -->
+<Story name="Default" />
diff --git a/web/src/lib/components/repo/issues/IssueLabelPanel.svelte b/web/src/lib/components/repo/issues/IssueLabelPanel.svelte
new file mode 100644
index 00000000..59a20321
--- /dev/null
+++ b/web/src/lib/components/repo/issues/IssueLabelPanel.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+</script>
+
+<aside class="flex flex-col gap-6 text-sm text-foreground-subtle">
+	<div>TODO: label panel</div>
+</aside>
diff --git a/web/src/lib/components/repo/issues/IssueList.stories.svelte b/web/src/lib/components/repo/issues/IssueList.stories.svelte
new file mode 100644
index 00000000..e807c130
--- /dev/null
+++ b/web/src/lib/components/repo/issues/IssueList.stories.svelte
@@ -0,0 +1,41 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import IssueList from "./IssueList.svelte";
+	import type { IssueSummary } from "$lib/components/repo/types";
+
+	const make = (
+		rkey: string,
+		title: string,
+		state: IssueSummary["state"],
+		commentCount: number
+	): IssueSummary => ({
+		uri: `at://did:plc:3p7ejjxnufohsygt5vbyxb2i/sh.tangled.repo.issue/${rkey}`,
+		rkey,
+		title,
+		state,
+		authorHandle: "joshka.net",
+		authorDid: "did:plc:3p7ejjxnufohsygt5vbyxb2i",
+		createdAt: "2025-06-01T10:30:00Z",
+		commentCount
+	});
+
+	const issues: IssueSummary[] = [
+		make("3mrkgcxb4m422", "Add a full trending repositories view", "open", 3),
+		make("3mrkgcxb4m423", "Packfile push times out over the smart protocol", "open", 0),
+		make("3mrkgcxb4m424", "Dark mode contrast on the issue label panel", "closed", 7)
+	];
+
+	const { Story } = defineMeta({
+		title: "Repo/Issues/IssueList",
+		component: IssueList,
+		tags: ["autodocs"],
+		args: {
+			ownerHandle: "tangled.org",
+			repoName: "core",
+			issues
+		}
+	});
+</script>
+
+<Story name="Default" />
+<Story name="Empty" args={{ issues: [] }} />
diff --git a/web/src/lib/components/repo/issues/IssueList.svelte b/web/src/lib/components/repo/issues/IssueList.svelte
new file mode 100644
index 00000000..5a17a998
--- /dev/null
+++ b/web/src/lib/components/repo/issues/IssueList.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import EmptyState from "$lib/components/ui/EmptyState.svelte";
+	import IssueCard from "./IssueCard.svelte";
+	import type { IssueSummary } from "$lib/components/repo/types";
+
+	interface Props {
+		ownerHandle: string;
+		repoName: string;
+		issues: IssueSummary[];
+	}
+
+	let { ownerHandle, repoName, issues }: Props = $props();
+</script>
+
+{#if issues.length === 0}
+	<EmptyState message="No issues yet." />
+{:else}
+	<div class="flex flex-col gap-2">
+		{#each issues as issue (issue.rkey)}
+			<IssueCard {ownerHandle} {repoName} {issue} />
+		{/each}
+	</div>
+{/if}
diff --git a/web/src/lib/components/repo/issues/IssueSearch.stories.svelte b/web/src/lib/components/repo/issues/IssueSearch.stories.svelte
new file mode 100644
index 00000000..14c31f9a
--- /dev/null
+++ b/web/src/lib/components/repo/issues/IssueSearch.stories.svelte
@@ -0,0 +1,17 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import IssueSearch from "./IssueSearch.svelte";
+
+	const { Story } = defineMeta({
+		title: "Repo/Issues/IssueSearch",
+		component: IssueSearch,
+		tags: ["autodocs"]
+	});
+</script>
+
+<!-- seeds its value from the url ?q= param; the clear button appears once typed into -->
+<Story name="Default">
+	<div class="max-w-sm">
+		<IssueSearch />
+	</div>
+</Story>
diff --git a/web/src/lib/components/repo/issues/IssueSearch.svelte b/web/src/lib/components/repo/issues/IssueSearch.svelte
new file mode 100644
index 00000000..9b7bbfdc
--- /dev/null
+++ b/web/src/lib/components/repo/issues/IssueSearch.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { page } from "$app/state";
+	import Search from "$icon/search";
+	import X from "$icon/x";
+
+	let form: HTMLFormElement;
+	// seed from the url so the query (and the clear button) survive a submit
+	let value = $state(page.url.searchParams.get("q") ?? "");
+
+	const clear = () => {
+		value = "";
+		form.requestSubmit();
+	};
+</script>
+
+<form bind:this={form} class="flex" method="GET">
+	<!-- TODO: wire up search query submission -->
+	<div class="relative flex w-full items-center">
+		<Search
+			class="pointer-events-none absolute left-2 size-4 text-foreground-placeholder"
+			aria-hidden="true"
+		/>
+		<input
+			bind:value
+			class="h-full w-full rounded border border-border-default bg-background-default py-1.5 pr-8 pl-8 text-sm outline-none focus:border-border-strong"
+			type="text"
+			name="q"
+			placeholder="Search issues..."
+			aria-label="Search issues"
+		/>
+		{#if value}
+			<button
+				type="button"
+				onclick={clear}
+				class="absolute right-2 flex items-center text-foreground-placeholder transition-colors hover:text-foreground-default"
+				aria-label="Clear search"
+			>
+				<X class="size-4" aria-hidden="true" />
+			</button>
+		{/if}
+	</div>
+</form>
diff --git a/web/src/lib/components/repo/issues/IssueStatePill.stories.svelte b/web/src/lib/components/repo/issues/IssueStatePill.stories.svelte
new file mode 100644
index 00000000..c3360fb4
--- /dev/null
+++ b/web/src/lib/components/repo/issues/IssueStatePill.stories.svelte
@@ -0,0 +1,22 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import IssueStatePill from "./IssueStatePill.svelte";
+
+	const { Story } = defineMeta({
+		title: "Repo/Issues/IssueStatePill",
+		component: IssueStatePill,
+		tags: ["autodocs"],
+		argTypes: {
+			state: {
+				control: { type: "inline-radio" },
+				options: ["open", "closed"]
+			}
+		},
+		args: {
+			state: "open"
+		}
+	});
+</script>
+
+<Story name="Open" />
+<Story name="Closed" args={{ state: "closed" }} />
diff --git a/web/src/lib/components/repo/issues/IssueStatePill.svelte b/web/src/lib/components/repo/issues/IssueStatePill.svelte
new file mode 100644
index 00000000..adce3822
--- /dev/null
+++ b/web/src/lib/components/repo/issues/IssueStatePill.svelte
@@ -0,0 +1,38 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const issueStatePill = tv({
+		base: "inline-flex items-center gap-1.5 rounded px-2 py-1 text-sm text-foreground-on-emphasis select-none",
+		variants: {
+			state: {
+				open: "bg-background-success-emphasis",
+				closed: "bg-background-neutral-emphasis"
+			}
+		},
+		defaultVariants: {
+			state: "open"
+		}
+	});
+
+	export type IssueStatePillVariants = VariantProps<typeof issueStatePill>;
+</script>
+
+<script lang="ts">
+	import CircleDot from "$icon/circle-dot";
+	import Ban from "$icon/ban";
+
+	interface Props {
+		state: IssueStatePillVariants["state"];
+		class?: string;
+	}
+
+	let { state = "open", class: className }: Props = $props();
+
+	const Icon = $derived(state === "closed" ? Ban : CircleDot);
+	const label = $derived(state === "closed" ? "Closed" : "Open");
+</script>
+
+<span class={issueStatePill({ state, class: className })}>
+	<Icon class="size-3 shrink-0" aria-hidden="true" />
+	{label}
+</span>
diff --git a/web/src/lib/components/repo/issues/IssueToolbar.stories.svelte b/web/src/lib/components/repo/issues/IssueToolbar.stories.svelte
new file mode 100644
index 00000000..f3402379
--- /dev/null
+++ b/web/src/lib/components/repo/issues/IssueToolbar.stories.svelte
@@ -0,0 +1,28 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import IssueToolbar from "./IssueToolbar.svelte";
+
+	const { Story } = defineMeta({
+		title: "Repo/Issues/IssueToolbar",
+		component: IssueToolbar,
+		tags: ["autodocs"],
+		argTypes: {
+			state: {
+				control: { type: "inline-radio" },
+				options: ["open", "closed"]
+			},
+			openCount: { control: "number" },
+			closedCount: { control: "number" }
+		},
+		args: {
+			ownerHandle: "tangled.org",
+			repoName: "core",
+			state: "open",
+			openCount: 285,
+			closedCount: 128
+		}
+	});
+</script>
+
+<Story name="Open" />
+<Story name="Closed" args={{ state: "closed" }} />
diff --git a/web/src/lib/components/repo/issues/IssueToolbar.svelte b/web/src/lib/components/repo/issues/IssueToolbar.svelte
new file mode 100644
index 00000000..24c527a8
--- /dev/null
+++ b/web/src/lib/components/repo/issues/IssueToolbar.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { resolve } from "$app/paths";
+	import CircleDot from "$icon/circle-dot";
+	import CircleX from "$icon/circle-x";
+	import Plus from "$icon/plus";
+	import Button from "$lib/components/ui/Button.svelte";
+	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
+	import IssueSearch from "./IssueSearch.svelte";
+
+	interface Props {
+		ownerHandle: string;
+		repoName: string;
+		state: "open" | "closed";
+		openCount: number;
+		closedCount: number;
+	}
+
+	let { ownerHandle, repoName, state, openCount, closedCount }: Props = $props();
+
+	const base = $derived(`/${ownerHandle}/${repoName}/issues`);
+</script>
+
+<!--
+	grid mirrors the appview: [group | search | new]. on mobile the search spans the
+	full width on its own row while the group and new button share the row below it.
+-->
+<div class="grid grid-cols-[auto_1fr_auto] gap-2">
+	<div class="col-span-3 sm:col-span-1 sm:col-start-2">
+		<IssueSearch />
+	</div>
+
+	<ButtonGroup class="sm:row-start-1">
+		<!-- TODO: wire up state filter navigation -->
+		<Button
+			href={resolve(`${base}?state=open` as "/")}
+			variant={state === "open" ? "default" : "ghost"}
+			size="sm"
+			icon={CircleDot}
+		>
+			<span class="hidden sm:inline">{openCount}</span>
+			Open
+		</Button>
+		<Button
+			href={resolve(`${base}?state=closed` as "/")}
+			variant={state === "closed" ? "default" : "ghost"}
+			size="sm"
+			icon={CircleX}
+		>
+			<span class="hidden sm:inline">{closedCount}</span>
+			Closed
+		</Button>
+	</ButtonGroup>
+
+	<!-- TODO: point at the new issue route once it exists -->
+	<Button
+		href={resolve(`${base}/new` as "/")}
+		variant="primary"
+		size="sm"
+		icon={Plus}
+		class="col-start-3 row-start-2 sm:row-start-1"
+	>
+		New
+	</Button>
+</div>
diff --git a/web/src/routes/[handle]/[repo]/issues/[aturi]/+page.svelte b/web/src/routes/[handle]/[repo]/issues/[aturi]/+page.svelte
new file mode 100644
index 00000000..97a09a31
--- /dev/null
+++ b/web/src/routes/[handle]/[repo]/issues/[aturi]/+page.svelte
@@ -0,0 +1,177 @@
+<script lang="ts">
+	import IssueHeader from "$lib/components/repo/issues/IssueHeader.svelte";
+	import IssueInfoBar from "$lib/components/repo/issues/IssueInfoBar.svelte";
+	import IssueBody from "$lib/components/repo/issues/IssueBody.svelte";
+	import IssueLabelPanel from "$lib/components/repo/issues/IssueLabelPanel.svelte";
+	import CommentList from "$lib/components/comment/CommentList.svelte";
+	import CommentBox from "$lib/components/comment/CommentBox.svelte";
+	import SignupPrompt from "$lib/components/ui/SignupPrompt.svelte";
+	import IssueForm from "$lib/components/repo/issues/IssueForm.svelte";
+	import ErrorAlert from "$lib/components/ui/Error.svelte";
+	import Pencil from "$icon/pencil";
+	import Trash2 from "$icon/trash-2";
+	import { goto } from "$app/navigation";
+	import { resolve } from "$app/paths";
+	import { renderMarkup } from "$lib/markup";
+	import { deleteIssue } from "$lib/api/issue";
+	import type { IssueRecord, RecordView } from "$lib/api/records";
+	import type { ThreadInput } from "$lib/components/comment/comments";
+	import { getAuth } from "$lib/auth.svelte";
+
+	let { data } = $props();
+
+	const auth = getAuth();
+
+	let issue = $derived(data.issue);
+
+	const isAuthor = $derived(auth.currentUser?.did === issue.authorDid);
+	const issuesBase = $derived(`/${data.repo.ownerHandle}/${data.repo.name}/issues`);
+
+	let editing = $state(false);
+	let deleting = $state(false);
+	let deleteError = $state<string | null>(null);
+
+	let comments = $derived(data.comments);
+
+	// optimistic update
+	const insertComment = ({ comment, replyTo }: ThreadInput) => {
+		if (replyTo === null) {
+			comments = [...comments, { self: comment, replies: [] }];
+		} else {
+			comments = comments.map((thread) =>
+				thread.self.uri === replyTo ? { ...thread, replies: [...thread.replies, comment] } : thread
+			);
+		}
+	};
+
+	const updateComment = ({ comment }: ThreadInput) => {
+		comments = comments.map((thread) => ({
+			self: thread.self.uri === comment.uri ? comment : thread.self,
+			replies: thread.replies.map((reply) => (reply.uri === comment.uri ? comment : reply))
+		}));
+	};
+
+	const removeComment = (uri: string) => {
+		comments = comments
+			.filter((thread) => thread.self.uri !== uri)
+			.map((thread) => ({
+				...thread,
+				replies: thread.replies.filter((reply) => reply.uri !== uri)
+			}));
+	};
+
+	const handleSaved = async (saved: RecordView<IssueRecord>) => {
+		const { title, body = "" } = saved.value;
+		const bodyHtml = body ? await renderMarkup(body, data.markup).catch(() => null) : null;
+		issue = { ...issue, title, body, bodyHtml };
+		editing = false;
+	};
+
+	const handleDelete = async () => {
+		const agent = auth.agent;
+		if (!agent || deleting) return;
+		if (!confirm("Delete this issue? This cannot be undone.")) return;
+		deleting = true;
+		deleteError = null;
+		try {
+			await deleteIssue(agent, issue.rkey);
+			await goto(resolve(issuesBase as "/"));
+		} catch (err) {
+			deleteError = err instanceof Error ? err.message : "Failed to delete issue";
+			deleting = false;
+		}
+	};
+</script>
+
+<svelte:head>
+	<title
+		>{issue.title} &middot; Issue #{issue.rkey} &middot; {data.repo.ownerHandle}/{data.repo.name}
+		&middot; Tangled</title
+	>
+</svelte:head>
+
+{#snippet issueActions()}
+	<button
+		type="button"
+		aria-label="Edit issue"
+		class="cursor-pointer text-foreground-subtle hover:text-foreground-default"
+		onclick={() => (editing = true)}
+	>
+		<Pencil class="size-3" />
+	</button>
+	<button
+		type="button"
+		aria-label="Delete issue"
+		disabled={deleting}
+		class="cursor-pointer text-foreground-danger hover:text-foreground-danger-strong disabled:opacity-50"
+		onclick={handleDelete}
+	>
+		<Trash2 class="size-3" />
+	</button>
+{/snippet}
+
+<div class="mt-2 grid grid-cols-1 gap-4 lg:grid-cols-10">
+	<!-- conversation -->
+	<div class="lg:col-span-8">
+		<section class="rounded bg-background-default px-6 py-4 text-foreground-default shadow-sm">
+			{#if editing}
+				<IssueForm
+					mode="edit"
+					repoDid={data.repo.repoDid ?? ""}
+					markup={data.markup}
+					rkey={issue.rkey}
+					createdAt={issue.createdAt}
+					title={issue.title}
+					body={issue.body}
+					onsaved={handleSaved}
+					oncancel={() => (editing = false)}
+				/>
+			{:else}
+				<IssueHeader title={issue.title} rkey={issue.rkey} />
+				<IssueInfoBar
+					state={issue.state}
+					authorHandle={issue.authorHandle}
+					authorDid={issue.authorDid}
+					createdAt={issue.createdAt}
+					actions={isAuthor ? issueActions : undefined}
+				/>
+				<IssueBody body={issue.body} bodyHtml={issue.bodyHtml} />
+				{#if deleteError}
+					<div class="mt-3">
+						<ErrorAlert label={deleteError} />
+					</div>
+				{/if}
+			{/if}
+		</section>
+
+		<div class="mt-4 flex flex-col gap-4">
+			<CommentList
+				threads={comments}
+				subjectUri={issue.uri}
+				subjectCid={issue.cid}
+				markup={data.markup}
+				onsubmitted={insertComment}
+				onedited={updateComment}
+				ondeleted={removeComment}
+			/>
+
+			{#if auth.currentUser}
+				<CommentBox
+					subjectUri={issue.uri}
+					subjectCid={issue.cid}
+					authorDid={auth.currentUser.did}
+					authorHandle={auth.currentUser.handle}
+					markup={data.markup}
+					onsubmitted={insertComment}
+				/>
+			{:else}
+				<SignupPrompt />
+			{/if}
+		</div>
+	</div>
+
+	<!-- label panel -->
+	<div class="lg:col-span-2">
+		<IssueLabelPanel />
+	</div>
+</div>
diff --git a/web/src/routes/[handle]/[repo]/issues/[aturi]/+page.ts b/web/src/routes/[handle]/[repo]/issues/[aturi]/+page.ts
new file mode 100644
index 00000000..83ccd604
--- /dev/null
+++ b/web/src/routes/[handle]/[repo]/issues/[aturi]/+page.ts
@@ -0,0 +1,82 @@
+import { error } from "@sveltejs/kit";
+import { createBobbinClient } from "$lib/api/client";
+import { IdentityCache } from "$lib/api/identity";
+import { getIssue, listComments, listIssueStates } from "$lib/api/records";
+import { didFromUri, rkeyFromUri } from "$lib/api/uri";
+import { renderMarkup } from "$lib/markup";
+import { buildCommentThreads, type ThreadInput } from "$lib/components/comment/comments";
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = async (event) => {
+	const parent = await event.parent();
+	const uri = decodeURIComponent(event.params.aturi);
+
+	if (!uri.startsWith("at://")) error(404, "Issue not found");
+
+	const ctx = createBobbinClient({ serviceUrl: parent.publicConfig.bobbinUrl, fetch: event.fetch });
+
+	const record = await getIssue(ctx, uri).catch(() => null);
+	if (!record) error(404, "Issue not found");
+
+	const authorDid = didFromUri(record.uri);
+	const identities = new IdentityCache(ctx);
+	const markupOpts = {
+		repo: `${parent.repo.ownerHandle}/${parent.repo.name}`,
+		ref: parent.repo.defaultBranch,
+		host: event.url.host
+	};
+
+	const [author, states, comments] = await Promise.all([
+		identities.resolve(authorDid).catch(() => null),
+		listIssueStates(ctx, record.uri, { limit: 1, order: "desc" }).catch(() => null),
+		listComments(ctx, record.uri, { order: "asc", limit: 100 }).catch(() => null)
+	]);
+
+	const latest = states?.items[0]?.value.state;
+	const state = latest?.endsWith(".closed") ? ("closed" as const) : ("open" as const);
+
+	const body = record.value.body ?? "";
+	const bodyHtml = body ? await renderMarkup(body, markupOpts) : null;
+
+	const commentItems = comments?.items ?? [];
+	const threadInputs: ThreadInput[] = await Promise.all(
+		commentItems.map(async (item): Promise<ThreadInput> => {
+			const commentDid = didFromUri(item.uri);
+			const commentBody = item.value.body?.text ?? "";
+			const [doc, commentBodyHtml] = await Promise.all([
+				identities.resolve(commentDid).catch(() => null),
+				commentBody ? renderMarkup(commentBody, markupOpts) : Promise.resolve(null)
+			]);
+			return {
+				comment: {
+					uri: item.uri,
+					cid: item.cid,
+					rkey: rkeyFromUri(item.uri),
+					authorDid: commentDid,
+					authorHandle: doc?.handle ?? commentDid,
+					createdAt: item.value.createdAt,
+					body: commentBody,
+					bodyHtml: commentBodyHtml
+				},
+				replyTo: item.value.replyTo?.uri ?? null
+			};
+		})
+	);
+
+	return {
+		issue: {
+			uri: record.uri,
+			cid: record.cid,
+			rkey: rkeyFromUri(record.uri),
+			title: record.value.title,
+			body,
+			bodyHtml,
+			state,
+			authorDid,
+			authorHandle: author?.handle ?? authorDid,
+			createdAt: record.value.createdAt
+		},
+		comments: buildCommentThreads(threadInputs),
+		markup: markupOpts
+	};
+};