From 84a956481b86c61f835bfdec56757d71109ab5e1 Mon Sep 17 00:00:00 2001
From: Owais Jamil <desertthunder.dev@gmail.com>
Date: Sun, 22 Mar 2026 18:26:12 -0500
Subject: [PATCH] feat: update repo detail page with issue and PR selection

* add issue and pull request comment

* URI parsing utilities

* add unit tests for normalizers and URI helpers
---
 docs/tasks/phase-2.md                       |   8 +-
 src/app/router/index.ts                     |  24 ++
 src/components/repo/CommentThread.vue       |  98 +++++++
 src/domain/models/comment.ts                |  15 +
 src/domain/models/issue.ts                  |   4 +
 src/domain/models/pull-request.ts           |  11 +
 src/features/repo/IssueDetailPage.vue       | 265 +++++++++++++++++
 src/features/repo/PullRequestDetailPage.vue | 303 ++++++++++++++++++++
 src/features/repo/RepoDetailPage.vue        |  57 +++-
 src/features/repo/RepoIssues.vue            |   9 +-
 src/features/repo/RepoPRs.vue               |   9 +-
 src/mocks/issues.ts                         | 152 ++++++----
 src/mocks/pull-requests.ts                  | 143 +++++----
 src/services/tangled/endpoints.ts           |  38 +++
 src/services/tangled/normalizers.ts         | 144 +++++++++-
 src/services/tangled/queries.ts             | 125 ++++++++
 src/services/tangled/uris.ts                |  17 ++
 tests/unit/tangled-normalizers.spec.ts      |  67 +++++
 18 files changed, 1352 insertions(+), 137 deletions(-)
 create mode 100644 src/components/repo/CommentThread.vue
 create mode 100644 src/domain/models/comment.ts
 create mode 100644 src/features/repo/IssueDetailPage.vue
 create mode 100644 src/features/repo/PullRequestDetailPage.vue
 create mode 100644 src/services/tangled/uris.ts
 create mode 100644 tests/unit/tangled-normalizers.spec.ts

diff --git a/docs/tasks/phase-2.md b/docs/tasks/phase-2.md
index 167b700..50d00f3 100644
--- a/docs/tasks/phase-2.md
+++ b/docs/tasks/phase-2.md
@@ -43,15 +43,15 @@
 
 - [x] Fetch issues for a repo from PDS records (`listIssueRecords` + `listIssueStateRecords` from owner's PDS)
 - [x] Display issue list with state filter (open/closed)
-- [ ] Issue detail view: title, body, author, state
-- [ ] Issue comments: fetch `sh.tangled.repo.issue.comment` records, render threaded
+- [x] Issue detail view: title, body, author, state
+- [x] Issue comments: fetch `sh.tangled.repo.issue.comment` records, render threaded
 
 ## Pull Requests (read-only)
 
 - [x] Fetch PRs for a repo from PDS records (`listPullRecords` + `listPullStatusRecords` from owner's PDS)
 - [x] Display PR list with status filter (open/closed/merged)
-- [ ] PR detail view: title, body, author, source/target branches
-- [ ] PR comments: fetch `sh.tangled.repo.pull.comment` records
+- [x] PR detail view: title, body, author, source/target branches
+- [x] PR comments: fetch `sh.tangled.repo.pull.comment` records
 
 ## Caching
 
diff --git a/src/app/router/index.ts b/src/app/router/index.ts
index cef10a9..97e966a 100644
--- a/src/app/router/index.ts
+++ b/src/app/router/index.ts
@@ -12,12 +12,36 @@ const routes: RouteRecordRaw[] = [
       { path: "", redirect: "/tabs/home" },
       { path: "home", component: () => import("@/features/home/HomePage.vue") },
       { path: "home/repo/:owner/:repo", component: () => import("@/features/repo/RepoDetailPage.vue") },
+      {
+        path: "home/repo/:owner/:repo/issues/:issueId",
+        component: () => import("@/features/repo/IssueDetailPage.vue"),
+      },
+      {
+        path: "home/repo/:owner/:repo/pulls/:pullId",
+        component: () => import("@/features/repo/PullRequestDetailPage.vue"),
+      },
       { path: "home/user/:handle", component: () => import("@/features/profile/UserProfilePage.vue") },
       { path: "explore", component: () => import("@/features/explore/ExplorePage.vue") },
       { path: "explore/repo/:owner/:repo", component: () => import("@/features/repo/RepoDetailPage.vue") },
+      {
+        path: "explore/repo/:owner/:repo/issues/:issueId",
+        component: () => import("@/features/repo/IssueDetailPage.vue"),
+      },
+      {
+        path: "explore/repo/:owner/:repo/pulls/:pullId",
+        component: () => import("@/features/repo/PullRequestDetailPage.vue"),
+      },
       { path: "explore/user/:handle", component: () => import("@/features/profile/UserProfilePage.vue") },
       { path: "activity", component: () => import("@/features/activity/ActivityPage.vue") },
       { path: "activity/repo/:owner/:repo", component: () => import("@/features/repo/RepoDetailPage.vue") },
+      {
+        path: "activity/repo/:owner/:repo/issues/:issueId",
+        component: () => import("@/features/repo/IssueDetailPage.vue"),
+      },
+      {
+        path: "activity/repo/:owner/:repo/pulls/:pullId",
+        component: () => import("@/features/repo/PullRequestDetailPage.vue"),
+      },
       { path: "activity/user/:handle", component: () => import("@/features/profile/UserProfilePage.vue") },
       { path: "profile", component: () => import("@/features/profile/ProfilePage.vue") },
     ],
diff --git a/src/components/repo/CommentThread.vue b/src/components/repo/CommentThread.vue
new file mode 100644
index 0000000..9b41b5b
--- /dev/null
+++ b/src/components/repo/CommentThread.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="comment-thread">
+    <article v-for="comment in comments" :key="comment.atUri" class="comment-card" :style="commentStyle(comment.depth)">
+      <div class="comment-head">
+        <span class="author mono">{{ comment.authorHandle }}</span>
+        <span class="dot">·</span>
+        <span class="time">{{ relativeTime(comment.createdAt) }}</span>
+        <span v-if="comment.depth > 0" class="reply-pill">Reply</span>
+      </div>
+
+      <pre class="comment-body">{{ comment.body }}</pre>
+    </article>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IssueComment, PullRequestComment } from "@/domain/models/comment.js";
+
+defineProps<{ comments: Array<IssueComment | PullRequestComment> }>();
+
+function relativeTime(iso: string): string {
+  const timestamp = Date.parse(iso);
+  if (Number.isNaN(timestamp)) return iso;
+
+  const diff = Date.now() - timestamp;
+  const minutes = Math.floor(diff / 60_000);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  if (days > 0) return `${days}d ago`;
+  if (hours > 0) return `${hours}h ago`;
+  if (minutes > 0) return `${minutes}m ago`;
+  return "just now";
+}
+
+function commentStyle(depth: number) {
+  return { marginLeft: `${Math.min(depth, 4) * 16}px` };
+}
+</script>
+
+<style scoped>
+.comment-thread {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.comment-card {
+  background: var(--t-surface-raised);
+  border: 1px solid var(--t-border);
+  border-radius: var(--t-radius-md);
+  padding: 12px 14px;
+}
+
+.comment-head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-bottom: 8px;
+  font-size: 12px;
+  color: var(--t-text-muted);
+}
+
+.author {
+  color: var(--t-accent);
+  font-size: 11px;
+}
+
+.mono {
+  font-family: var(--t-mono);
+}
+
+.dot {
+  color: var(--t-border-strong);
+}
+
+.reply-pill {
+  padding: 1px 6px;
+  border-radius: 999px;
+  background: var(--t-accent-dim);
+  color: var(--t-accent);
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.comment-body {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--t-text-secondary);
+}
+</style>
diff --git a/src/domain/models/comment.ts b/src/domain/models/comment.ts
new file mode 100644
index 0000000..3dd9a9a
--- /dev/null
+++ b/src/domain/models/comment.ts
@@ -0,0 +1,15 @@
+export type DiscussionComment = {
+  atUri: string;
+  rkey: string;
+  body: string;
+  authorDid: string;
+  authorHandle: string;
+  createdAt: string;
+  mentions?: string[];
+  references?: string[];
+  depth: number;
+};
+
+export type IssueComment = DiscussionComment & { issueAtUri: string; replyTo?: string };
+
+export type PullRequestComment = DiscussionComment & { pullAtUri: string };
diff --git a/src/domain/models/issue.ts b/src/domain/models/issue.ts
index a65ea8e..345997b 100644
--- a/src/domain/models/issue.ts
+++ b/src/domain/models/issue.ts
@@ -2,6 +2,8 @@ type IssueState = "open" | "closed";
 
 export type IssueSummary = {
   atUri: string;
+  rkey: string;
+  repoAtUri: string;
   title: string;
   authorDid: string;
   authorHandle: string;
@@ -9,3 +11,5 @@ export type IssueSummary = {
   createdAt: string;
   commentCount?: number;
 };
+
+export type IssueDetail = IssueSummary & { body?: string; mentions?: string[]; references?: string[] };
diff --git a/src/domain/models/pull-request.ts b/src/domain/models/pull-request.ts
index af92e19..685bad6 100644
--- a/src/domain/models/pull-request.ts
+++ b/src/domain/models/pull-request.ts
@@ -2,6 +2,7 @@ type PRStatus = "open" | "merged" | "closed";
 
 export type PullRequestSummary = {
   atUri: string;
+  rkey: string;
   title: string;
   authorDid: string;
   authorHandle: string;
@@ -9,6 +10,16 @@ export type PullRequestSummary = {
   createdAt: string;
   updatedAt?: string;
   sourceBranch: string;
+  sourceRepoAtUri?: string;
+  sourceSha?: string;
   targetBranch: string;
+  targetRepoAtUri: string;
   roundCount?: number;
 };
+
+export type PullRequestDetail = PullRequestSummary & {
+  body?: string;
+  mentions?: string[];
+  references?: string[];
+  patch?: string;
+};
diff --git a/src/features/repo/IssueDetailPage.vue b/src/features/repo/IssueDetailPage.vue
new file mode 100644
index 0000000..b129216
--- /dev/null
+++ b/src/features/repo/IssueDetailPage.vue
@@ -0,0 +1,265 @@
+<template>
+  <ion-page>
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button :default-href="backHref" />
+        </ion-buttons>
+        <ion-title class="detail-title">Issue #{{ issueId }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content :fullscreen="true">
+      <template v-if="isLoading">
+        <SkeletonLoader variant="profile" />
+        <SkeletonLoader v-for="n in 2" :key="n" variant="card" />
+      </template>
+
+      <EmptyState v-else-if="isError" :icon="alertCircleOutline" title="Could not load issue" :message="errorMessage" />
+
+      <EmptyState
+        v-else-if="!issue"
+        :icon="alertCircleOutline"
+        title="Issue not found"
+        message="This issue doesn't exist for the selected repository." />
+
+      <template v-else>
+        <div class="detail-shell">
+          <section class="hero">
+            <div class="hero-top">
+              <ion-badge class="state-badge" :class="issue.state">{{ issue.state }}</ion-badge>
+              <span class="mono issue-key">{{ owner }}/{{ repoName }}#{{ issue.rkey }}</span>
+            </div>
+            <h1 class="hero-title">{{ issue.title }}</h1>
+            <div class="hero-meta">
+              <span class="mono meta-accent">{{ issue.authorHandle }}</span>
+              <span class="sep">·</span>
+              <span>{{ relativeTime(issue.createdAt) }}</span>
+              <template v-if="issue.commentCount !== undefined">
+                <span class="sep">·</span>
+                <ion-icon :icon="chatbubbleOutline" class="meta-icon" />
+                <span>{{ issue.commentCount }}</span>
+              </template>
+            </div>
+          </section>
+
+          <section class="section">
+            <div class="section-head">
+              <h2>Body</h2>
+            </div>
+            <MarkdownRenderer v-if="issue.body" :content="issue.body" />
+            <EmptyState
+              v-else
+              :icon="documentTextOutline"
+              title="No description"
+              message="This issue was opened without any body text." />
+          </section>
+
+          <section class="section">
+            <div class="section-head">
+              <h2>Comments</h2>
+              <span class="section-count">{{ comments.length }}</span>
+            </div>
+            <CommentThread v-if="comments.length" :comments="comments" />
+            <EmptyState
+              v-else
+              :icon="chatbubbleOutline"
+              title="No comments"
+              message="No discussion has been recorded for this issue yet." />
+          </section>
+        </div>
+      </template>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+import {
+  IonPage,
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonContent,
+  IonButtons,
+  IonBackButton,
+  IonBadge,
+  IonIcon,
+} from "@ionic/vue";
+import { alertCircleOutline, chatbubbleOutline, documentTextOutline } from "ionicons/icons";
+import SkeletonLoader from "@/components/common/SkeletonLoader.vue";
+import EmptyState from "@/components/common/EmptyState.vue";
+import MarkdownRenderer from "@/components/repo/MarkdownRenderer.vue";
+import CommentThread from "@/components/repo/CommentThread.vue";
+import { useIdentity, useRepoRecord, useIssueDetail, useIssueComments } from "@/services/tangled/queries.js";
+
+const route = useRoute();
+const owner = route.params.owner as string;
+const repoName = route.params.repo as string;
+const issueId = route.params.issueId as string;
+
+const identity = useIdentity(owner);
+const did = computed(() => identity.data.value?.did ?? "");
+const pds = computed(() => identity.data.value?.pds ?? "");
+const hasIdentity = computed(() => !!identity.data.value);
+
+const repoQuery = useRepoRecord(pds, did, repoName, owner, { enabled: hasIdentity });
+const repoAtUri = computed(() => repoQuery.data.value?.atUri ?? "");
+
+const issueQuery = useIssueDetail(pds, did, owner, issueId, { enabled: hasIdentity });
+const issueAtUri = computed(() => issueQuery.data.value?.atUri ?? "");
+const commentsQuery = useIssueComments(pds, did, owner, issueAtUri, { enabled: computed(() => !!issueAtUri.value) });
+
+const issue = computed(() => {
+  const value = issueQuery.data.value;
+  if (!value) return undefined;
+  if (repoAtUri.value && value.repoAtUri !== repoAtUri.value) return undefined;
+  return value;
+});
+
+const comments = computed(() => commentsQuery.data.value ?? []);
+const isLoading = computed(
+  () =>
+    identity.isPending.value ||
+    repoQuery.isPending.value ||
+    issueQuery.isPending.value ||
+    commentsQuery.isPending.value,
+);
+const isError = computed(
+  () => identity.isError.value || repoQuery.isError.value || issueQuery.isError.value || commentsQuery.isError.value,
+);
+const errorMessage = computed(() => {
+  const error = identity.error.value ?? repoQuery.error.value ?? issueQuery.error.value ?? commentsQuery.error.value;
+  return error instanceof Error ? error.message : "An unexpected error occurred.";
+});
+
+const tabPrefix = computed(() => {
+  if (route.path.startsWith("/tabs/explore")) return "/tabs/explore";
+  if (route.path.startsWith("/tabs/activity")) return "/tabs/activity";
+  return "/tabs/home";
+});
+
+const backHref = computed(() => `${tabPrefix.value}/repo/${owner}/${repoName}?tab=issues`);
+
+function relativeTime(iso: string): string {
+  const timestamp = Date.parse(iso);
+  if (Number.isNaN(timestamp)) return iso;
+
+  const diff = Date.now() - timestamp;
+  const minutes = Math.floor(diff / 60_000);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  if (days > 0) return `${days}d ago`;
+  if (hours > 0) return `${hours}h ago`;
+  if (minutes > 0) return `${minutes}m ago`;
+  return "just now";
+}
+</script>
+
+<style scoped>
+.detail-title {
+  font-family: var(--t-mono);
+  font-size: 14px;
+}
+
+.detail-shell {
+  padding: 18px 16px 32px;
+}
+
+.hero {
+  margin-bottom: 24px;
+}
+
+.hero-top {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+}
+
+.issue-key,
+.mono {
+  font-family: var(--t-mono);
+}
+
+.issue-key {
+  font-size: 11px;
+  color: var(--t-text-muted);
+}
+
+.hero-title {
+  margin: 0 0 8px;
+  font-size: 22px;
+  line-height: 1.2;
+  color: var(--t-text-primary);
+}
+
+.hero-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  font-size: 13px;
+  color: var(--t-text-muted);
+}
+
+.meta-accent {
+  color: var(--t-accent);
+  font-size: 12px;
+}
+
+.sep {
+  color: var(--t-border-strong);
+}
+
+.meta-icon {
+  font-size: 12px;
+}
+
+.section {
+  margin-top: 20px;
+}
+
+.section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.section-head h2 {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--t-text-muted);
+  margin: 0;
+}
+
+.section-count {
+  font-size: 12px;
+  color: var(--t-text-muted);
+}
+
+.state-badge {
+  font-size: 11px;
+  font-weight: 600;
+  border-radius: 999px;
+  padding: 3px 8px;
+  text-transform: capitalize;
+}
+
+.state-badge.open {
+  --background: var(--t-green-dim);
+  --color: var(--t-green);
+}
+
+.state-badge.closed {
+  --background: transparent;
+  --color: var(--t-text-muted);
+  border: 1px solid var(--t-border-strong);
+}
+</style>
diff --git a/src/features/repo/PullRequestDetailPage.vue b/src/features/repo/PullRequestDetailPage.vue
new file mode 100644
index 0000000..3a43fce
--- /dev/null
+++ b/src/features/repo/PullRequestDetailPage.vue
@@ -0,0 +1,303 @@
+<template>
+  <ion-page>
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button :default-href="backHref" />
+        </ion-buttons>
+        <ion-title class="detail-title">PR #{{ pullId }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content :fullscreen="true">
+      <template v-if="isLoading">
+        <SkeletonLoader variant="profile" />
+        <SkeletonLoader v-for="n in 2" :key="n" variant="card" />
+      </template>
+
+      <EmptyState
+        v-else-if="isError"
+        :icon="alertCircleOutline"
+        title="Could not load pull request"
+        :message="errorMessage" />
+
+      <EmptyState
+        v-else-if="!pullRequest"
+        :icon="alertCircleOutline"
+        title="Pull request not found"
+        message="This pull request doesn't exist for the selected repository." />
+
+      <template v-else>
+        <div class="detail-shell">
+          <section class="hero">
+            <div class="hero-top">
+              <ion-badge class="status-badge" :class="pullRequest.status">{{ pullRequest.status }}</ion-badge>
+              <span class="mono pr-key">{{ owner }}/{{ repoName }}#{{ pullRequest.rkey }}</span>
+            </div>
+            <h1 class="hero-title">{{ pullRequest.title }}</h1>
+            <div class="hero-meta">
+              <span class="mono meta-accent">{{ pullRequest.authorHandle }}</span>
+              <span class="sep">·</span>
+              <span>{{ relativeTime(pullRequest.createdAt) }}</span>
+              <template v-if="pullRequest.roundCount !== undefined">
+                <span class="sep">·</span>
+                <ion-icon :icon="chatbubbleOutline" class="meta-icon" />
+                <span>{{ pullRequest.roundCount }}</span>
+              </template>
+            </div>
+            <div class="branch-row">
+              <span class="branch mono">{{ pullRequest.sourceBranch || "unknown" }}</span>
+              <span class="branch-arrow">→</span>
+              <span class="branch mono">{{ pullRequest.targetBranch }}</span>
+            </div>
+          </section>
+
+          <section class="section">
+            <div class="section-head">
+              <h2>Body</h2>
+            </div>
+            <MarkdownRenderer v-if="pullRequest.body" :content="pullRequest.body" />
+            <EmptyState
+              v-else
+              :icon="documentTextOutline"
+              title="No description"
+              message="This pull request was opened without any body text." />
+          </section>
+
+          <section class="section">
+            <div class="section-head">
+              <h2>Comments</h2>
+              <span class="section-count">{{ comments.length }}</span>
+            </div>
+            <CommentThread v-if="comments.length" :comments="comments" />
+            <EmptyState
+              v-else
+              :icon="chatbubbleOutline"
+              title="No comments"
+              message="No discussion has been recorded for this pull request yet." />
+          </section>
+        </div>
+      </template>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+import {
+  IonPage,
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonContent,
+  IonButtons,
+  IonBackButton,
+  IonBadge,
+  IonIcon,
+} from "@ionic/vue";
+import { alertCircleOutline, chatbubbleOutline, documentTextOutline } from "ionicons/icons";
+import SkeletonLoader from "@/components/common/SkeletonLoader.vue";
+import EmptyState from "@/components/common/EmptyState.vue";
+import MarkdownRenderer from "@/components/repo/MarkdownRenderer.vue";
+import CommentThread from "@/components/repo/CommentThread.vue";
+import {
+  useIdentity,
+  useRepoRecord,
+  usePullRequestDetail,
+  usePullRequestComments,
+} from "@/services/tangled/queries.js";
+
+const route = useRoute();
+const owner = route.params.owner as string;
+const repoName = route.params.repo as string;
+const pullId = route.params.pullId as string;
+
+const identity = useIdentity(owner);
+const did = computed(() => identity.data.value?.did ?? "");
+const pds = computed(() => identity.data.value?.pds ?? "");
+const hasIdentity = computed(() => !!identity.data.value);
+
+const repoQuery = useRepoRecord(pds, did, repoName, owner, { enabled: hasIdentity });
+const repoAtUri = computed(() => repoQuery.data.value?.atUri ?? "");
+
+const pullQuery = usePullRequestDetail(pds, did, owner, pullId, { enabled: hasIdentity });
+const pullAtUri = computed(() => pullQuery.data.value?.atUri ?? "");
+const commentsQuery = usePullRequestComments(pds, did, owner, pullAtUri, {
+  enabled: computed(() => !!pullAtUri.value),
+});
+
+const pullRequest = computed(() => {
+  const value = pullQuery.data.value;
+  if (!value) return undefined;
+  if (repoAtUri.value && value.targetRepoAtUri !== repoAtUri.value) return undefined;
+  return value;
+});
+
+const comments = computed(() => commentsQuery.data.value ?? []);
+const isLoading = computed(
+  () =>
+    identity.isPending.value || repoQuery.isPending.value || pullQuery.isPending.value || commentsQuery.isPending.value,
+);
+const isError = computed(
+  () => identity.isError.value || repoQuery.isError.value || pullQuery.isError.value || commentsQuery.isError.value,
+);
+const errorMessage = computed(() => {
+  const error = identity.error.value ?? repoQuery.error.value ?? pullQuery.error.value ?? commentsQuery.error.value;
+  return error instanceof Error ? error.message : "An unexpected error occurred.";
+});
+
+const tabPrefix = computed(() => {
+  if (route.path.startsWith("/tabs/explore")) return "/tabs/explore";
+  if (route.path.startsWith("/tabs/activity")) return "/tabs/activity";
+  return "/tabs/home";
+});
+
+const backHref = computed(() => `${tabPrefix.value}/repo/${owner}/${repoName}?tab=prs`);
+
+function relativeTime(iso: string): string {
+  const timestamp = Date.parse(iso);
+  if (Number.isNaN(timestamp)) return iso;
+
+  const diff = Date.now() - timestamp;
+  const minutes = Math.floor(diff / 60_000);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  if (days > 0) return `${days}d ago`;
+  if (hours > 0) return `${hours}h ago`;
+  if (minutes > 0) return `${minutes}m ago`;
+  return "just now";
+}
+</script>
+
+<style scoped>
+.detail-title {
+  font-family: var(--t-mono);
+  font-size: 14px;
+}
+
+.detail-shell {
+  padding: 18px 16px 32px;
+}
+
+.hero {
+  margin-bottom: 24px;
+}
+
+.hero-top {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+}
+
+.pr-key,
+.mono {
+  font-family: var(--t-mono);
+}
+
+.pr-key {
+  font-size: 11px;
+  color: var(--t-text-muted);
+}
+
+.hero-title {
+  margin: 0 0 8px;
+  font-size: 22px;
+  line-height: 1.2;
+  color: var(--t-text-primary);
+}
+
+.hero-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  font-size: 13px;
+  color: var(--t-text-muted);
+  margin-bottom: 10px;
+}
+
+.meta-accent {
+  color: var(--t-accent);
+  font-size: 12px;
+}
+
+.sep {
+  color: var(--t-border-strong);
+}
+
+.meta-icon {
+  font-size: 12px;
+}
+
+.branch-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: var(--t-surface-raised);
+  border: 1px solid var(--t-border);
+}
+
+.branch {
+  font-size: 11px;
+  color: var(--t-text-secondary);
+}
+
+.branch-arrow {
+  color: var(--t-border-strong);
+}
+
+.section {
+  margin-top: 20px;
+}
+
+.section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.section-head h2 {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--t-text-muted);
+  margin: 0;
+}
+
+.section-count {
+  font-size: 12px;
+  color: var(--t-text-muted);
+}
+
+.status-badge {
+  font-size: 11px;
+  font-weight: 600;
+  border-radius: 999px;
+  padding: 3px 8px;
+  text-transform: capitalize;
+}
+
+.status-badge.open {
+  --background: var(--t-accent-dim);
+  --color: var(--t-accent);
+}
+
+.status-badge.merged {
+  --background: rgba(167, 139, 250, 0.1);
+  --color: var(--t-purple);
+}
+
+.status-badge.closed {
+  --background: transparent;
+  --color: var(--t-text-muted);
+  border: 1px solid var(--t-border-strong);
+}
+</style>
diff --git a/src/features/repo/RepoDetailPage.vue b/src/features/repo/RepoDetailPage.vue
index 1b9a91a..d03a928 100644
--- a/src/features/repo/RepoDetailPage.vue
+++ b/src/features/repo/RepoDetailPage.vue
@@ -45,16 +45,24 @@
           :knot-host="knotHost"
           :knot-repo="knotRepo"
           :branch="defaultBranch" />
-        <RepoIssues v-else-if="segment === 'issues'" :issues="issues" :is-loading="issuesQuery.isPending.value" />
-        <RepoPRs v-else-if="segment === 'prs'" :prs="prs" :is-loading="prsQuery.isPending.value" />
+        <RepoIssues
+          v-else-if="segment === 'issues'"
+          :issues="issues"
+          :is-loading="issuesQuery.isPending.value"
+          @select="openIssue" />
+        <RepoPRs
+          v-else-if="segment === 'prs'"
+          :prs="prs"
+          :is-loading="prsQuery.isPending.value"
+          @select="openPullRequest" />
       </template>
     </ion-content>
   </ion-page>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue";
-import { useRoute } from "vue-router";
+import { ref, computed, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import {
   IonPage,
   IonHeader,
@@ -87,10 +95,35 @@ import {
 import type { RepoDetail } from "@/domain/models/repo.js";
 
 const route = useRoute();
+const router = useRouter();
 const owner = route.params.owner as string;
 const repoName = route.params.repo as string;
 
-const segment = ref<"overview" | "files" | "issues" | "prs">("overview");
+type Segment = "overview" | "files" | "issues" | "prs";
+
+function segmentFromQuery(value: unknown): Segment {
+  return value === "files" || value === "issues" || value === "prs" ? value : "overview";
+}
+
+const segment = ref<Segment>("overview");
+
+watch(
+  () => route.query.tab,
+  (value) => {
+    segment.value = segmentFromQuery(value);
+  },
+  { immediate: true },
+);
+
+watch(segment, (value) => {
+  const nextQuery = { ...route.query };
+  if (value === "overview") {
+    delete nextQuery.tab;
+  } else {
+    nextQuery.tab = value;
+  }
+  router.replace({ path: route.path, query: nextQuery });
+});
 
 const identity = useIdentity(owner);
 const did = computed(() => identity.data.value?.did ?? "");
@@ -133,12 +166,26 @@ const commits = computed(() => logQuery.data.value ?? []);
 const issues = computed(() => issuesQuery.data.value ?? []);
 const prs = computed(() => prsQuery.data.value ?? []);
 
+const tabPrefix = computed(() => {
+  if (route.path.startsWith("/tabs/explore")) return "/tabs/explore";
+  if (route.path.startsWith("/tabs/activity")) return "/tabs/activity";
+  return "/tabs/home";
+});
+
 const isLoading = computed(() => identity.isPending.value || recordQuery.isPending.value);
 const isError = computed(() => identity.isError.value || recordQuery.isError.value);
 const errorMessage = computed(() => {
   const err = identity.error.value ?? recordQuery.error.value;
   return err instanceof Error ? err.message : "An unexpected error occurred.";
 });
+
+function openIssue(issue: { rkey: string }) {
+  router.push(`${tabPrefix.value}/repo/${owner}/${repoName}/issues/${issue.rkey}?tab=issues`);
+}
+
+function openPullRequest(pr: { rkey: string }) {
+  router.push(`${tabPrefix.value}/repo/${owner}/${repoName}/pulls/${pr.rkey}?tab=prs`);
+}
 </script>
 
 <style scoped>
diff --git a/src/features/repo/RepoIssues.vue b/src/features/repo/RepoIssues.vue
index a9411d7..6c5f61a 100644
--- a/src/features/repo/RepoIssues.vue
+++ b/src/features/repo/RepoIssues.vue
@@ -18,7 +18,13 @@
       </div>
 
       <ion-list lines="inset" class="issue-list">
-        <ion-item v-for="issue in filtered" :key="issue.atUri" class="issue-item" button lines="inset">
+        <ion-item
+          v-for="issue in filtered"
+          :key="issue.atUri"
+          class="issue-item"
+          button
+          lines="inset"
+          @click="emit('select', issue)">
           <div slot="start" class="state-dot" :class="issue.state" />
           <ion-label class="issue-label">
             <span class="issue-title">{{ issue.title }}</span>
@@ -56,6 +62,7 @@ import EmptyState from "@/components/common/EmptyState.vue";
 import type { IssueSummary } from "@/domain/models/issue.js";
 
 const props = defineProps<{ issues: IssueSummary[]; isLoading?: boolean }>();
+const emit = defineEmits<{ select: [issue: IssueSummary] }>();
 
 const filter = ref<"all" | "open" | "closed">("open");
 
diff --git a/src/features/repo/RepoPRs.vue b/src/features/repo/RepoPRs.vue
index b099d2a..c8dc87d 100644
--- a/src/features/repo/RepoPRs.vue
+++ b/src/features/repo/RepoPRs.vue
@@ -18,7 +18,13 @@
       </div>
 
       <ion-list lines="inset" class="pr-list">
-        <ion-item v-for="pr in filtered" :key="pr.atUri" class="pr-item" button lines="inset">
+        <ion-item
+          v-for="pr in filtered"
+          :key="pr.atUri"
+          class="pr-item"
+          button
+          lines="inset"
+          @click="emit('select', pr)">
           <div slot="start" class="status-icon" :class="pr.status">
             <ion-icon :icon="gitMergeOutline" />
           </div>
@@ -57,6 +63,7 @@ import EmptyState from "@/components/common/EmptyState.vue";
 import type { PullRequestSummary } from "@/domain/models/pull-request.js";
 
 const props = defineProps<{ prs: PullRequestSummary[]; isLoading?: boolean }>();
+const emit = defineEmits<{ select: [pr: PullRequestSummary] }>();
 
 const filter = ref<"all" | "open" | "merged" | "closed">("open");
 
diff --git a/src/mocks/issues.ts b/src/mocks/issues.ts
index 694089f..d84e805 100644
--- a/src/mocks/issues.ts
+++ b/src/mocks/issues.ts
@@ -1,69 +1,95 @@
 import type { IssueSummary } from "@/domain/models/issue.js";
+import { getAtUriRkey } from "@/services/tangled/uris.js";
+
+function issue(issue: Omit<IssueSummary, "rkey" | "repoAtUri">, repoAtUri: string): IssueSummary {
+  return { ...issue, rkey: getAtUriRkey(issue.atUri), repoAtUri };
+}
 
 const MOCK_ISSUES: IssueSummary[] = [
-  {
-    atUri: "at://did:plc:a1b2c3d4e5f6g7h8i9j0k1l2/sh.tangled.issue/8",
-    title: "Support streaming responses from XRPC subscriptions",
-    authorDid: "did:plc:p2cp5gopk7mgjegy9waligxd",
-    authorHandle: "desertthunder.dev",
-    state: "open",
-    createdAt: "2026-03-21T12:00:00Z",
-    commentCount: 4,
-  },
-  {
-    atUri: "at://did:plc:a1b2c3d4e5f6g7h8i9j0k1l2/sh.tangled.issue/7",
-    title: "Keyboard navigation broken in record browser",
-    authorDid: "did:plc:c3d4e5f6g7h8i9j0k1l2m3n4",
-    authorHandle: "clara.bsky.social",
-    state: "open",
-    createdAt: "2026-03-19T17:30:00Z",
-    commentCount: 2,
-  },
-  {
-    atUri: "at://did:plc:a1b2c3d4e5f6g7h8i9j0k1l2/sh.tangled.issue/6",
-    title: "Add pagination to lexicon list endpoint",
-    authorDid: "did:plc:b2c3d4e5f6g7h8i9j0k1l2m3",
-    authorHandle: "bob.tngl.sh",
-    state: "open",
-    createdAt: "2026-03-17T09:15:00Z",
-    commentCount: 7,
-  },
-  {
-    atUri: "at://did:plc:a1b2c3d4e5f6g7h8i9j0k1l2/sh.tangled.issue/5",
-    title: "DID resolution fails when PLC directory is unreachable",
-    authorDid: "did:plc:e5f6g7h8i9j0k1l2m3n4o5p6",
-    authorHandle: "riku.tngl.sh",
-    state: "closed",
-    createdAt: "2026-03-10T11:00:00Z",
-    commentCount: 5,
-  },
-  {
-    atUri: "at://did:plc:a1b2c3d4e5f6g7h8i9j0k1l2/sh.tangled.issue/4",
-    title: "Export TypeScript types for all lexicon schemas",
-    authorDid: "did:plc:a1b2c3d4e5f6g7h8i9j0k1l2",
-    authorHandle: "alice.tngl.sh",
-    state: "closed",
-    createdAt: "2026-03-06T14:20:00Z",
-    commentCount: 3,
-  },
-  {
-    atUri: "at://did:plc:p2cp5gopk7mgjegy9waligxd/sh.tangled.issue/12",
-    title: "Offline mode: cache last-viewed repos to IndexedDB",
-    authorDid: "did:plc:p2cp5gopk7mgjegy9waligxd",
-    authorHandle: "desertthunder.dev",
-    state: "open",
-    createdAt: "2026-03-22T08:40:00Z",
-    commentCount: 0,
-  },
-  {
-    atUri: "at://did:plc:p2cp5gopk7mgjegy9waligxd/sh.tangled.issue/11",
-    title: "Skeleton loaders flicker on fast connections",
-    authorDid: "did:plc:c3d4e5f6g7h8i9j0k1l2m3n4",
-    authorHandle: "clara.bsky.social",
-    state: "open",
-    createdAt: "2026-03-18T16:05:00Z",
-    commentCount: 1,
-  },
+  issue(
+    {
+      atUri: "at://did:plc:a1b2c3d4e5f6g7h8i9j0k1l2/sh.tangled.issue/8",
+      title: "Support streaming responses from XRPC subscriptions",
+      authorDid: "did:plc:p2cp5gopk7mgjegy9waligxd",
+      authorHandle: "desertthunder.dev",
+      state: "open",
+      createdAt: "2026-03-21T12:00:00Z",
+      commentCount: 4,
+    },
+    "at://did:plc:a1b2c3d4e5f6g7h8i9j0k1l2/sh.tangled.repo/atproto-explorer",
+  ),
+  issue(
+    {
+      atUri: "at://did:plc:a1b2c3d4e5f6g7h8i9j0k1l2/sh.tangled.issue/7",
+      title: "Keyboard navigation broken in record browser",
+      authorDid: "did:plc:c3d4e5f6g7h8i9j0k1l2m3n4",
+      authorHandle: "clara.bsky.social",
+      state: "open",
+      createdAt: "2026-03-19T17:30:00Z",
+      commentCount: 2,
+    },
+    "at://did:plc:a1b2c3d4e5f6g7h8i9j0k1l2/sh.tangled.repo/atproto-explorer",
+  ),
+  issue(
+    {
+      atUri: "at://did:plc:a1b2c3d4e5f6g7h8i9j0k1l2/sh.tangled.issue/6",
+      title: "Add pagination to lexicon list endpoint",
+      authorDid: "did:plc:b2c3d4e5f6g7h8i9j0k1l2m3",
+      authorHandle: "bob.tngl.sh",
+      state: "open",
+      createdAt: "2026-03-17T09:15:00Z",
+      commentCount: 7,
+    },
+    "at://did:plc:a1b2c3d4e5f6g7h8i9j0k1l2/sh.tangled.repo/atproto-explorer",
+  ),
+  issue(
+    {
+      atUri: "at://did:plc:a1b2c3d4e5f6g7h8i9j0k1l2/sh.tangled.issue/5",
+      title: "DID resolution fails when PLC directory is unreachable",
+      authorDid: "did:plc:e5f6g7h8i9j0k1l2m3n4o5p6",
+      authorHandle: "riku.tngl.sh",
+      state: "closed",
+      createdAt: "2026-03-10T11:00:00Z",
+      commentCount: 5,
+    },
+    "at://did:plc:a1b2c3d4e5f6g7h8i9j0k1l2/sh.tangled.repo/atproto-explorer",
+  ),
+  issue(
+    {
+      atUri: "at://did:plc:a1b2c3d4e5f6g7h8i9j0k1l2/sh.tangled.issue/4",
+      title: "Export TypeScript types for all lexicon schemas",
+      authorDid: "did:plc:a1b2c3d4e5f6g7h8i9j0k1l2",
+      authorHandle: "alice.tngl.sh",
+      state: "closed",
+      createdAt: "2026-03-06T14:20:00Z",
+      commentCount: 3,
+    },
+    "at://did:plc:a1b2c3d4e5f6g7h8i9j0k1l2/sh.tangled.repo/atproto-explorer",
+  ),
+  issue(
+    {
+      atUri: "at://did:plc:p2cp5gopk7mgjegy9waligxd/sh.tangled.issue/12",
+      title: "Offline mode: cache last-viewed repos to IndexedDB",
+      authorDid: "did:plc:p2cp5gopk7mgjegy9waligxd",
+      authorHandle: "desertthunder.dev",
+      state: "open",
+      createdAt: "2026-03-22T08:40:00Z",
+      commentCount: 0,
+    },
+    "at://did:plc:p2cp5gopk7mgjegy9waligxd/sh.tangled.repo/twisted",
+  ),
+  issue(
+    {
+      atUri: "at://did:plc:p2cp5gopk7mgjegy9waligxd/sh.tangled.issue/11",
+      title: "Skeleton loaders flicker on fast connections",
+      authorDid: "did:plc:c3d4e5f6g7h8i9j0k1l2m3n4",
+      authorHandle: "clara.bsky.social",
+      state: "open",
+      createdAt: "2026-03-18T16:05:00Z",
+      commentCount: 1,
+    },
+    "at://did:plc:p2cp5gopk7mgjegy9waligxd/sh.tangled.repo/twisted",
+  ),
 ];
 
 export function getMockIssues(): IssueSummary[] {
diff --git a/src/mocks/pull-requests.ts b/src/mocks/pull-requests.ts
index 5331f9c..a81d649 100644
--- a/src/mocks/pull-requests.ts
+++ b/src/mocks/pull-requests.ts
@@ -1,70 +1,93 @@
 import type { PullRequestSummary } from "@/domain/models/pull-request.js";
+import { getAtUriRkey } from "@/services/tangled/uris.js";
+
+function pullRequest(
+  pullRequest: Omit<PullRequestSummary, "rkey" | "targetRepoAtUri">,
+  targetRepoAtUri: string,
+): PullRequestSummary {
+  return { ...pullRequest, rkey: getAtUriRkey(pullRequest.atUri), targetRepoAtUri };
+}
 
 const MOCK_PRS: PullRequestSummary[] = [
-  {
-    atUri: "at://did:plc:a1b2c3d4e5f6g7h8i9j0k1l2/sh.tangled.pr/3",
-    title: "feat: add dark mode support to token system",
-    authorDid: "did:plc:c3d4e5f6g7h8i9j0k1l2m3n4",
-    authorHandle: "clara.bsky.social",
-    status: "open",
-    createdAt: "2026-03-20T10:12:00Z",
-    updatedAt: "2026-03-21T15:44:00Z",
-    sourceBranch: "feat/dark-mode-tokens",
-    targetBranch: "main",
-    roundCount: 2,
-  },
-  {
-    atUri: "at://did:plc:a1b2c3d4e5f6g7h8i9j0k1l2/sh.tangled.pr/2",
-    title: "fix: resolve CORS issue with lexicon fetch",
-    authorDid: "did:plc:b2c3d4e5f6g7h8i9j0k1l2m3",
-    authorHandle: "bob.tngl.sh",
-    status: "merged",
-    createdAt: "2026-03-15T08:30:00Z",
-    updatedAt: "2026-03-16T11:00:00Z",
-    sourceBranch: "fix/cors-lexicon",
-    targetBranch: "main",
-    roundCount: 1,
-  },
-  {
-    atUri: "at://did:plc:a1b2c3d4e5f6g7h8i9j0k1l2/sh.tangled.pr/1",
-    title: "chore: upgrade @atcute/client to v4",
-    authorDid: "did:plc:a1b2c3d4e5f6g7h8i9j0k1l2",
-    authorHandle: "alice.tngl.sh",
-    status: "merged",
-    createdAt: "2026-03-08T14:00:00Z",
-    updatedAt: "2026-03-09T09:20:00Z",
-    sourceBranch: "chore/atcute-v4",
-    targetBranch: "main",
-    roundCount: 1,
-  },
-  {
-    atUri: "at://did:plc:p2cp5gopk7mgjegy9waligxd/sh.tangled.pr/5",
-    title: "feat: tab routing with per-tab navigation stacks",
-    authorDid: "did:plc:p2cp5gopk7mgjegy9waligxd",
-    authorHandle: "desertthunder.dev",
-    status: "open",
-    createdAt: "2026-03-21T18:05:00Z",
-    sourceBranch: "feat/tab-routing",
-    targetBranch: "main",
-    roundCount: 0,
-  },
-  {
-    atUri: "at://did:plc:b2c3d4e5f6g7h8i9j0k1l2m3/sh.tangled.pr/7",
-    title: "refactor: replace manual flag parsing with cobra",
-    authorDid: "did:plc:e5f6g7h8i9j0k1l2m3n4o5p6",
-    authorHandle: "riku.tngl.sh",
-    status: "closed",
-    createdAt: "2026-03-12T09:45:00Z",
-    updatedAt: "2026-03-13T12:30:00Z",
-    sourceBranch: "refactor/cobra-cli",
-    targetBranch: "main",
-    roundCount: 3,
-  },
+  pullRequest(
+    {
+      atUri: "at://did:plc:a1b2c3d4e5f6g7h8i9j0k1l2/sh.tangled.pr/3",
+      title: "feat: add dark mode support to token system",
+      authorDid: "did:plc:c3d4e5f6g7h8i9j0k1l2m3n4",
+      authorHandle: "clara.bsky.social",
+      status: "open",
+      createdAt: "2026-03-20T10:12:00Z",
+      updatedAt: "2026-03-21T15:44:00Z",
+      sourceBranch: "feat/dark-mode-tokens",
+      targetBranch: "main",
+      roundCount: 2,
+    },
+    "at://did:plc:a1b2c3d4e5f6g7h8i9j0k1l2/sh.tangled.repo/atproto-explorer",
+  ),
+  pullRequest(
+    {
+      atUri: "at://did:plc:a1b2c3d4e5f6g7h8i9j0k1l2/sh.tangled.pr/2",
+      title: "fix: resolve CORS issue with lexicon fetch",
+      authorDid: "did:plc:b2c3d4e5f6g7h8i9j0k1l2m3",
+      authorHandle: "bob.tngl.sh",
+      status: "merged",
+      createdAt: "2026-03-15T08:30:00Z",
+      updatedAt: "2026-03-16T11:00:00Z",
+      sourceBranch: "fix/cors-lexicon",
+      targetBranch: "main",
+      roundCount: 1,
+    },
+    "at://did:plc:a1b2c3d4e5f6g7h8i9j0k1l2/sh.tangled.repo/atproto-explorer",
+  ),
+  pullRequest(
+    {
+      atUri: "at://did:plc:a1b2c3d4e5f6g7h8i9j0k1l2/sh.tangled.pr/1",
+      title: "chore: upgrade @atcute/client to v4",
+      authorDid: "did:plc:a1b2c3d4e5f6g7h8i9j0k1l2",
+      authorHandle: "alice.tngl.sh",
+      status: "merged",
+      createdAt: "2026-03-08T14:00:00Z",
+      updatedAt: "2026-03-09T09:20:00Z",
+      sourceBranch: "chore/atcute-v4",
+      targetBranch: "main",
+      roundCount: 1,
+    },
+    "at://did:plc:a1b2c3d4e5f6g7h8i9j0k1l2/sh.tangled.repo/atproto-explorer",
+  ),
+  pullRequest(
+    {
+      atUri: "at://did:plc:p2cp5gopk7mgjegy9waligxd/sh.tangled.pr/5",
+      title: "feat: tab routing with per-tab navigation stacks",
+      authorDid: "did:plc:p2cp5gopk7mgjegy9waligxd",
+      authorHandle: "desertthunder.dev",
+      status: "open",
+      createdAt: "2026-03-21T18:05:00Z",
+      sourceBranch: "feat/tab-routing",
+      targetBranch: "main",
+      roundCount: 0,
+    },
+    "at://did:plc:p2cp5gopk7mgjegy9waligxd/sh.tangled.repo/twisted",
+  ),
+  pullRequest(
+    {
+      atUri: "at://did:plc:b2c3d4e5f6g7h8i9j0k1l2m3/sh.tangled.pr/7",
+      title: "refactor: replace manual flag parsing with cobra",
+      authorDid: "did:plc:e5f6g7h8i9j0k1l2m3n4o5p6",
+      authorHandle: "riku.tngl.sh",
+      status: "closed",
+      createdAt: "2026-03-12T09:45:00Z",
+      updatedAt: "2026-03-13T12:30:00Z",
+      sourceBranch: "refactor/cobra-cli",
+      targetBranch: "main",
+      roundCount: 3,
+    },
+    "at://did:plc:b2c3d4e5f6g7h8i9j0k1l2m3/sh.tangled.repo/git-log-pretty",
+  ),
 ];
 
 export function getMockPullRequests(repoAtUri?: string): PullRequestSummary[] {
   if (repoAtUri) {
-    return MOCK_PRS.filter((pr) => pr.atUri.startsWith(repoAtUri.replace("/sh.tangled.repo/", "/sh.tangled.pr/")));
+    return MOCK_PRS.filter((pr) => pr.targetRepoAtUri === repoAtUri);
   }
   return MOCK_PRS;
 }
diff --git a/src/services/tangled/endpoints.ts b/src/services/tangled/endpoints.ts
index 15f3000..45f83fa 100644
--- a/src/services/tangled/endpoints.ts
+++ b/src/services/tangled/endpoints.ts
@@ -29,8 +29,10 @@ import type {
   ShTangledRepo,
   ShTangledActorProfile,
   ShTangledRepoIssue,
+  ShTangledRepoIssueComment,
   ShTangledRepoIssueState,
   ShTangledRepoPull,
+  ShTangledRepoPullComment,
   ShTangledRepoPullStatus,
 } from "@atcute/tangled";
 import { throwOnXrpcError } from "@/services/atproto/client.js";
@@ -161,6 +163,22 @@ export async function fetchRepoRecord(
   return getRecord<ShTangledRepo.Main>(pds, did, "sh.tangled.repo", repoName);
 }
 
+export async function fetchIssueRecord(
+  pds: string,
+  did: string,
+  rkey: string,
+): Promise<GetRecordResponse<ShTangledRepoIssue.Main>> {
+  return getRecord<ShTangledRepoIssue.Main>(pds, did, "sh.tangled.repo.issue", rkey);
+}
+
+export async function fetchPullRecord(
+  pds: string,
+  did: string,
+  rkey: string,
+): Promise<GetRecordResponse<ShTangledRepoPull.Main>> {
+  return getRecord<ShTangledRepoPull.Main>(pds, did, "sh.tangled.repo.pull", rkey);
+}
+
 /**
  * Resolve an AT Protocol handle to a DID via bsky.social.
  * Returns the DID string (e.g. "did:plc:xxx").
@@ -245,6 +263,16 @@ export async function listIssueStateRecords(
   return listRecords<ShTangledRepoIssueState.Main>(pds, did, "sh.tangled.repo.issue.state", limit, cursor);
 }
 
+/** List sh.tangled.repo.issue.comment records from a user's PDS. */
+export async function listIssueCommentRecords(
+  pds: string,
+  did: string,
+  limit = 100,
+  cursor?: string,
+): Promise<ListRecordsResponse<ShTangledRepoIssueComment.Main>> {
+  return listRecords<ShTangledRepoIssueComment.Main>(pds, did, "sh.tangled.repo.issue.comment", limit, cursor);
+}
+
 /** List sh.tangled.repo.pull records from a user's PDS. */
 export async function listPullRecords(
   pds: string,
@@ -265,6 +293,16 @@ export async function listPullStatusRecords(
   return listRecords<ShTangledRepoPullStatus.Main>(pds, did, "sh.tangled.repo.pull.status", limit, cursor);
 }
 
+/** List sh.tangled.repo.pull.comment records from a user's PDS. */
+export async function listPullCommentRecords(
+  pds: string,
+  did: string,
+  limit = 100,
+  cursor?: string,
+): Promise<ListRecordsResponse<ShTangledRepoPullComment.Main>> {
+  return listRecords<ShTangledRepoPullComment.Main>(pds, did, "sh.tangled.repo.pull.comment", limit, cursor);
+}
+
 /**
  * List all sh.tangled.repo records from a user's PDS.
  * Uses com.atproto.repo.listRecords since it's not in the installed lexicons.
diff --git a/src/services/tangled/normalizers.ts b/src/services/tangled/normalizers.ts
index e4972c9..9e7eb9e 100644
--- a/src/services/tangled/normalizers.ts
+++ b/src/services/tangled/normalizers.ts
@@ -11,12 +11,16 @@ import type {
   ShTangledRepo,
   ShTangledActorProfile,
   ShTangledRepoIssue,
+  ShTangledRepoIssueComment,
   ShTangledRepoPull,
+  ShTangledRepoPullComment,
 } from "@atcute/tangled";
 import type { RepoFile, RepoSummary, RepoDetail } from "@/domain/models/repo.js";
 import type { UserSummary } from "@/domain/models/user.js";
-import type { IssueSummary } from "@/domain/models/issue.js";
-import type { PullRequestSummary } from "@/domain/models/pull-request.js";
+import type { IssueSummary, IssueDetail } from "@/domain/models/issue.js";
+import type { PullRequestSummary, PullRequestDetail } from "@/domain/models/pull-request.js";
+import type { IssueComment, PullRequestComment } from "@/domain/models/comment.js";
+import { getAtUriRkey } from "./uris.js";
 
 function modeToFileKind(mode: string): RepoFile["type"] {
   if (mode.startsWith("04")) return "dir";
@@ -188,7 +192,33 @@ export function normalizeIssueRecord(
   authorHandle: string,
   state: "open" | "closed" = "open",
 ): IssueSummary {
-  return { atUri, title: record.title, authorDid, authorHandle, state, createdAt: record.createdAt };
+  return {
+    atUri,
+    rkey: getAtUriRkey(atUri),
+    repoAtUri: record.repo,
+    title: record.title,
+    authorDid,
+    authorHandle,
+    state,
+    createdAt: record.createdAt,
+  };
+}
+
+export function normalizeIssueDetail(
+  record: ShTangledRepoIssue.Main,
+  atUri: string,
+  authorDid: string,
+  authorHandle: string,
+  state: "open" | "closed" = "open",
+  commentCount = 0,
+): IssueDetail {
+  return {
+    ...normalizeIssueRecord(record, atUri, authorDid, authorHandle, state),
+    body: record.body,
+    mentions: record.mentions,
+    references: record.references,
+    commentCount,
+  };
 }
 
 export function normalizePullRecord(
@@ -200,14 +230,122 @@ export function normalizePullRecord(
 ): PullRequestSummary {
   return {
     atUri,
+    rkey: getAtUriRkey(atUri),
     title: record.title,
     authorDid,
     authorHandle,
     status,
     createdAt: record.createdAt,
     sourceBranch: record.source?.branch ?? "",
+    sourceRepoAtUri: record.source?.repo,
+    sourceSha: record.source?.sha,
     targetBranch: record.target.branch,
+    targetRepoAtUri: record.target.repo,
+  };
+}
+
+export function normalizePullDetail(
+  record: ShTangledRepoPull.Main,
+  atUri: string,
+  authorDid: string,
+  authorHandle: string,
+  status: "open" | "merged" | "closed" = "open",
+  roundCount = 0,
+): PullRequestDetail {
+  return {
+    ...normalizePullRecord(record, atUri, authorDid, authorHandle, status),
+    body: record.body,
+    mentions: record.mentions,
+    references: record.references,
+    patch: record.patch,
+    roundCount,
+  };
+}
+
+export function normalizeIssueComment(
+  record: ShTangledRepoIssueComment.Main,
+  atUri: string,
+  authorDid: string,
+  authorHandle: string,
+): IssueComment {
+  return {
+    atUri,
+    rkey: getAtUriRkey(atUri),
+    issueAtUri: record.issue,
+    replyTo: record.replyTo,
+    body: record.body,
+    authorDid,
+    authorHandle,
+    createdAt: record.createdAt,
+    mentions: record.mentions,
+    references: record.references,
+    depth: 0,
+  };
+}
+
+export function normalizePullComment(
+  record: ShTangledRepoPullComment.Main,
+  atUri: string,
+  authorDid: string,
+  authorHandle: string,
+): PullRequestComment {
+  return {
+    atUri,
+    rkey: getAtUriRkey(atUri),
+    pullAtUri: record.pull,
+    body: record.body,
+    authorDid,
+    authorHandle,
+    createdAt: record.createdAt,
+    mentions: record.mentions,
+    references: record.references,
+    depth: 0,
+  };
+}
+
+function compareByCreatedAt<T extends { createdAt: string; atUri: string }>(left: T, right: T): number {
+  const leftTime = Date.parse(left.createdAt);
+  const rightTime = Date.parse(right.createdAt);
+
+  if (Number.isNaN(leftTime) || Number.isNaN(rightTime) || leftTime === rightTime) {
+    return left.atUri.localeCompare(right.atUri);
+  }
+
+  return leftTime - rightTime;
+}
+
+export function buildIssueCommentThread(comments: IssueComment[]): IssueComment[] {
+  const sorted = [...comments].sort(compareByCreatedAt);
+  const knownUris = new Set(sorted.map((comment) => comment.atUri));
+  const byParent = new Map<string | undefined, IssueComment[]>();
+
+  for (const comment of sorted) {
+    const parent = comment.replyTo && knownUris.has(comment.replyTo) ? comment.replyTo : undefined;
+    const siblings = byParent.get(parent) ?? [];
+    siblings.push(comment);
+    byParent.set(parent, siblings);
+  }
+
+  const ordered: IssueComment[] = [];
+  const seen = new Set<string>();
+
+  const visit = (parent: string | undefined, depth: number) => {
+    const children = byParent.get(parent) ?? [];
+    for (const comment of children) {
+      if (seen.has(comment.atUri)) continue;
+      seen.add(comment.atUri);
+      ordered.push({ ...comment, depth });
+      visit(comment.atUri, depth + 1);
+    }
   };
+
+  visit(undefined, 0);
+
+  for (const comment of sorted) {
+    if (!seen.has(comment.atUri)) ordered.push(comment);
+  }
+
+  return ordered;
 }
 
 export function normalizeActorProfile(
diff --git a/src/services/tangled/queries.ts b/src/services/tangled/queries.ts
index 546493b..349150e 100644
--- a/src/services/tangled/queries.ts
+++ b/src/services/tangled/queries.ts
@@ -29,10 +29,14 @@ import {
   fetchRepoCompare,
   fetchActorProfile,
   fetchRepoRecord,
+  fetchIssueRecord,
+  fetchPullRecord,
   listRepoRecords,
   listIssueRecords,
+  listIssueCommentRecords,
   listIssueStateRecords,
   listPullRecords,
+  listPullCommentRecords,
   listPullStatusRecords,
   resolveHandle,
   resolvePds,
@@ -48,7 +52,12 @@ import {
   normalizeActorProfile,
   normalizeRepoRecord,
   normalizeIssueRecord,
+  normalizeIssueDetail,
+  normalizeIssueComment,
+  buildIssueCommentThread,
   normalizePullRecord,
+  normalizePullDetail,
+  normalizePullComment,
 } from "./normalizers.js";
 
 export type { CommitEntry, BranchEntry, BlobContent, DefaultBranchInfo } from "./normalizers.js";
@@ -407,6 +416,122 @@ export function useRepoPRs(
   });
 }
 
+export function useIssueDetail(
+  pds: MaybeRef<string>,
+  did: MaybeRef<string>,
+  handle: MaybeRef<string>,
+  issueRkey: MaybeRef<string>,
+  options: { enabled?: MaybeRef<boolean> } = {},
+) {
+  return useQuery({
+    queryKey: computed(() => ["issueDetail", toValue(pds), toValue(did), toValue(issueRkey)]),
+    queryFn: async () => {
+      const [issueRes, statesRes, commentsRes] = await Promise.all([
+        fetchIssueRecord(toValue(pds), toValue(did), toValue(issueRkey)),
+        listIssueStateRecords(toValue(pds), toValue(did)),
+        listIssueCommentRecords(toValue(pds), toValue(did)),
+      ]);
+
+      const currentState = statesRes.records.reduce<"open" | "closed">((state, record) => {
+        if (record.value.issue !== issueRes.uri) return state;
+        return record.value.state === "sh.tangled.repo.issue.state.closed" ? "closed" : "open";
+      }, "open");
+
+      const commentCount = commentsRes.records.filter((record) => record.value.issue === issueRes.uri).length;
+
+      return normalizeIssueDetail(
+        issueRes.value,
+        issueRes.uri,
+        toValue(did),
+        toValue(handle),
+        currentState,
+        commentCount,
+      );
+    },
+    enabled: options.enabled,
+    staleTime: 2 * MIN,
+    gcTime: 10 * MIN,
+  });
+}
+
+export function useIssueComments(
+  pds: MaybeRef<string>,
+  did: MaybeRef<string>,
+  handle: MaybeRef<string>,
+  issueAtUri: MaybeRef<string>,
+  options: { enabled?: MaybeRef<boolean> } = {},
+) {
+  return useQuery({
+    queryKey: computed(() => ["issueComments", toValue(pds), toValue(did), toValue(issueAtUri)]),
+    queryFn: async () => {
+      const response = await listIssueCommentRecords(toValue(pds), toValue(did));
+      const comments = response.records
+        .filter((record) => record.value.issue === toValue(issueAtUri))
+        .map((record) => normalizeIssueComment(record.value, record.uri, toValue(did), toValue(handle)));
+
+      return buildIssueCommentThread(comments);
+    },
+    enabled: options.enabled,
+    staleTime: 2 * MIN,
+    gcTime: 10 * MIN,
+  });
+}
+
+export function usePullRequestDetail(
+  pds: MaybeRef<string>,
+  did: MaybeRef<string>,
+  handle: MaybeRef<string>,
+  pullRkey: MaybeRef<string>,
+  options: { enabled?: MaybeRef<boolean> } = {},
+) {
+  return useQuery({
+    queryKey: computed(() => ["pullDetail", toValue(pds), toValue(did), toValue(pullRkey)]),
+    queryFn: async () => {
+      const [pullRes, statusesRes, commentsRes] = await Promise.all([
+        fetchPullRecord(toValue(pds), toValue(did), toValue(pullRkey)),
+        listPullStatusRecords(toValue(pds), toValue(did)),
+        listPullCommentRecords(toValue(pds), toValue(did)),
+      ]);
+
+      const currentStatus = statusesRes.records.reduce<"open" | "merged" | "closed">((status, record) => {
+        if (record.value.pull !== pullRes.uri) return status;
+        if (record.value.status === "sh.tangled.repo.pull.status.merged") return "merged";
+        if (record.value.status === "sh.tangled.repo.pull.status.closed") return "closed";
+        return "open";
+      }, "open");
+
+      const roundCount = commentsRes.records.filter((record) => record.value.pull === pullRes.uri).length;
+
+      return normalizePullDetail(pullRes.value, pullRes.uri, toValue(did), toValue(handle), currentStatus, roundCount);
+    },
+    enabled: options.enabled,
+    staleTime: 2 * MIN,
+    gcTime: 10 * MIN,
+  });
+}
+
+export function usePullRequestComments(
+  pds: MaybeRef<string>,
+  did: MaybeRef<string>,
+  handle: MaybeRef<string>,
+  pullAtUri: MaybeRef<string>,
+  options: { enabled?: MaybeRef<boolean> } = {},
+) {
+  return useQuery({
+    queryKey: computed(() => ["pullComments", toValue(pds), toValue(did), toValue(pullAtUri)]),
+    queryFn: async () => {
+      const response = await listPullCommentRecords(toValue(pds), toValue(did));
+      return response.records
+        .filter((record) => record.value.pull === toValue(pullAtUri))
+        .map((record) => normalizePullComment(record.value, record.uri, toValue(did), toValue(handle)))
+        .sort((left, right) => Date.parse(left.createdAt) - Date.parse(right.createdAt));
+    },
+    enabled: options.enabled,
+    staleTime: 2 * MIN,
+    gcTime: 10 * MIN,
+  });
+}
+
 /**
  * Composite hook: fetch repo PDS record + default branch + languages in
  * parallel, returning a merged RepoDetail.
diff --git a/src/services/tangled/uris.ts b/src/services/tangled/uris.ts
new file mode 100644
index 0000000..c3a18bd
--- /dev/null
+++ b/src/services/tangled/uris.ts
@@ -0,0 +1,17 @@
+export type AtUriParts = { did: string; collection: string; rkey: string };
+
+export function parseAtUri(atUri: string): AtUriParts | undefined {
+  if (!atUri.startsWith("at://")) return undefined;
+
+  const parts = atUri.slice("at://".length).split("/");
+  const [did, collection, ...rkeyParts] = parts;
+  const rkey = rkeyParts.join("/");
+
+  if (!did || !collection || !rkey) return undefined;
+
+  return { did, collection, rkey };
+}
+
+export function getAtUriRkey(atUri: string): string {
+  return parseAtUri(atUri)?.rkey ?? atUri;
+}
diff --git a/tests/unit/tangled-normalizers.spec.ts b/tests/unit/tangled-normalizers.spec.ts
new file mode 100644
index 0000000..b655edf
--- /dev/null
+++ b/tests/unit/tangled-normalizers.spec.ts
@@ -0,0 +1,67 @@
+import { describe, expect, it } from "vitest";
+import { buildIssueCommentThread } from "@/services/tangled/normalizers.js";
+import { getAtUriRkey, parseAtUri } from "@/services/tangled/uris.js";
+import type { IssueComment } from "@/domain/models/comment.js";
+
+function makeComment(overrides: Partial<IssueComment> = {}): IssueComment {
+  return {
+    atUri: "at://did:plc:test/sh.tangled.repo.issue.comment/root",
+    rkey: "root",
+    issueAtUri: "at://did:plc:test/sh.tangled.repo.issue/123",
+    body: "root",
+    authorDid: "did:plc:test",
+    authorHandle: "alice.test",
+    createdAt: "2026-03-22T10:00:00Z",
+    depth: 0,
+    ...overrides,
+  };
+}
+
+describe("AT URI helpers", () => {
+  it("extracts URI parts and rkey", () => {
+    const uri = "at://did:plc:abc123/sh.tangled.repo.issue/42";
+
+    expect(parseAtUri(uri)).toEqual({ did: "did:plc:abc123", collection: "sh.tangled.repo.issue", rkey: "42" });
+    expect(getAtUriRkey(uri)).toBe("42");
+  });
+});
+
+describe("buildIssueCommentThread", () => {
+  it("orders comments by parent-child relationship and assigns depth", () => {
+    const root = makeComment();
+    const reply = makeComment({
+      atUri: "at://did:plc:test/sh.tangled.repo.issue.comment/reply",
+      rkey: "reply",
+      body: "reply",
+      createdAt: "2026-03-22T10:01:00Z",
+      replyTo: root.atUri,
+    });
+    const secondRoot = makeComment({
+      atUri: "at://did:plc:test/sh.tangled.repo.issue.comment/second",
+      rkey: "second",
+      body: "second root",
+      createdAt: "2026-03-22T10:02:00Z",
+    });
+
+    const ordered = buildIssueCommentThread([secondRoot, reply, root]);
+
+    expect(ordered.map((comment) => [comment.rkey, comment.depth])).toEqual([
+      ["root", 0],
+      ["reply", 1],
+      ["second", 0],
+    ]);
+  });
+
+  it("treats orphaned replies as top-level comments", () => {
+    const orphan = makeComment({
+      atUri: "at://did:plc:test/sh.tangled.repo.issue.comment/orphan",
+      rkey: "orphan",
+      replyTo: "at://did:plc:test/sh.tangled.repo.issue.comment/missing",
+    });
+
+    const ordered = buildIssueCommentThread([orphan]);
+
+    expect(ordered).toHaveLength(1);
+    expect(ordered[0]?.depth).toBe(0);
+  });
+});
-- 
2.51.2