From ef51900468b28a17f8668af4e632be6014c9392c Mon Sep 17 00:00:00 2001
From: Owais Jamil <desertthunder.dev@gmail.com>
Date: Tue, 24 Mar 2026 23:51:25 -0500
Subject: [PATCH] chore: prettier

---
 .gitignore                                    |   1 +
 apps/twisted/src/App.vue                      |   2 +-
 .../src/components/common/ActivityCard.vue    | 210 +++---
 .../src/components/common/EmptyState.vue      |  90 +--
 .../src/components/common/ErrorBoundary.vue   | 106 ++--
 .../src/components/common/RepoCard.vue        | 290 ++++-----
 .../src/components/common/SkeletonLoader.vue  | 244 +++----
 .../src/components/common/UserCard.vue        | 232 +++----
 .../src/components/repo/CommentThread.vue     | 132 ++--
 .../src/components/repo/FileTreeItem.vue      | 126 ++--
 apps/twisted/src/core/config/project.ts       |   2 +-
 apps/twisted/src/core/query/client.ts         |   6 +-
 .../src/features/profile/UserProfilePage.vue  | 599 +++++++++---------
 .../src/features/profile/UserStrings.vue      | 184 +++---
 .../src/features/repo/IssueDetailPage.vue     | 368 ++++++-----
 .../features/repo/PullRequestDetailPage.vue   | 432 +++++++------
 .../src/features/repo/RepoDetailPage.vue      | 283 ++++-----
 apps/twisted/src/features/repo/RepoFiles.vue  | 423 ++++++-------
 apps/twisted/src/features/repo/RepoIssues.vue | 286 ++++-----
 apps/twisted/src/lib/html.ts                  |   5 +-
 .../src/services/project-api/queries.ts       |  22 +-
 apps/twisted/src/views/HomePage.vue           |  44 +-
 apps/twisted/src/vite-env.d.ts                |   6 +-
 23 files changed, 2023 insertions(+), 2070 deletions(-)

diff --git a/.gitignore b/.gitignore
index f4fdc28..d877474 100644
--- a/.gitignore
+++ b/.gitignore
@@ -33,3 +33,4 @@ plugins
 www
 
 *.db
+.env
diff --git a/apps/twisted/src/App.vue b/apps/twisted/src/App.vue
index c9462b9..703563b 100644
--- a/apps/twisted/src/App.vue
+++ b/apps/twisted/src/App.vue
@@ -5,5 +5,5 @@
 </template>
 
 <script setup lang="ts">
-import { IonApp, IonRouterOutlet } from "@ionic/vue";
+  import { IonApp, IonRouterOutlet } from "@ionic/vue";
 </script>
diff --git a/apps/twisted/src/components/common/ActivityCard.vue b/apps/twisted/src/components/common/ActivityCard.vue
index 8c9d398..d6f425b 100644
--- a/apps/twisted/src/components/common/ActivityCard.vue
+++ b/apps/twisted/src/components/common/ActivityCard.vue
@@ -16,124 +16,124 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
-import { IonItem, IonLabel, IonIcon } from "@ionic/vue";
-import {
-  addCircleOutline,
-  starOutline,
-  personAddOutline,
-  gitMergeOutline,
-  checkmarkCircleOutline,
-  alertCircleOutline,
-  closeCircleOutline,
-} from "ionicons/icons";
-import type { ActivityItem } from "@/domain/models/activity.js";
+  import { computed } from "vue";
+  import { IonItem, IonLabel, IonIcon } from "@ionic/vue";
+  import {
+    addCircleOutline,
+    starOutline,
+    personAddOutline,
+    gitMergeOutline,
+    checkmarkCircleOutline,
+    alertCircleOutline,
+    closeCircleOutline,
+  } from "ionicons/icons";
+  import type { ActivityItem } from "@/domain/models/activity.js";
 
-const props = defineProps<{ item: ActivityItem }>();
-const emit = defineEmits<{ click: []; actorClick: [] }>();
+  const props = defineProps<{ item: ActivityItem }>();
+  const emit = defineEmits<{ click: []; actorClick: [] }>();
 
-type KindConfig = { icon: string; color: string; dimColor: string; verb: string };
+  type KindConfig = { icon: string; color: string; dimColor: string; verb: string };
 
-const KIND_MAP: Record<ActivityItem["kind"], KindConfig> = {
-  repo_created: { icon: addCircleOutline, color: "#22d3ee", dimColor: "rgba(34,211,238,0.1)", verb: "created" },
-  repo_starred: { icon: starOutline, color: "#fbbf24", dimColor: "rgba(251,191,36,0.1)", verb: "starred" },
-  user_followed: { icon: personAddOutline, color: "#a78bfa", dimColor: "rgba(167,139,250,0.1)", verb: "followed" },
-  pr_opened: { icon: gitMergeOutline, color: "#22d3ee", dimColor: "rgba(34,211,238,0.1)", verb: "opened a PR on" },
-  pr_merged: {
-    icon: checkmarkCircleOutline,
-    color: "#34d399",
-    dimColor: "rgba(52,211,153,0.1)",
-    verb: "merged a PR in",
-  },
-  issue_opened: {
-    icon: alertCircleOutline,
-    color: "#fb923c",
-    dimColor: "rgba(251,146,60,0.1)",
-    verb: "opened an issue on",
-  },
-  issue_closed: {
-    icon: closeCircleOutline,
-    color: "#6b7280",
-    dimColor: "rgba(107,114,128,0.1)",
-    verb: "closed an issue on",
-  },
-};
+  const KIND_MAP: Record<ActivityItem["kind"], KindConfig> = {
+    repo_created: { icon: addCircleOutline, color: "#22d3ee", dimColor: "rgba(34,211,238,0.1)", verb: "created" },
+    repo_starred: { icon: starOutline, color: "#fbbf24", dimColor: "rgba(251,191,36,0.1)", verb: "starred" },
+    user_followed: { icon: personAddOutline, color: "#a78bfa", dimColor: "rgba(167,139,250,0.1)", verb: "followed" },
+    pr_opened: { icon: gitMergeOutline, color: "#22d3ee", dimColor: "rgba(34,211,238,0.1)", verb: "opened a PR on" },
+    pr_merged: {
+      icon: checkmarkCircleOutline,
+      color: "#34d399",
+      dimColor: "rgba(52,211,153,0.1)",
+      verb: "merged a PR in",
+    },
+    issue_opened: {
+      icon: alertCircleOutline,
+      color: "#fb923c",
+      dimColor: "rgba(251,146,60,0.1)",
+      verb: "opened an issue on",
+    },
+    issue_closed: {
+      icon: closeCircleOutline,
+      color: "#6b7280",
+      dimColor: "rgba(107,114,128,0.1)",
+      verb: "closed an issue on",
+    },
+  };
 
-const config = computed(() => KIND_MAP[props.item.kind]);
+  const config = computed(() => KIND_MAP[props.item.kind]);
 
-function relativeTime(iso: string): string {
-  const diff = Date.now() - new Date(iso).getTime();
-  const m = Math.floor(diff / 60000);
-  const h = Math.floor(m / 60);
-  const d = Math.floor(h / 24);
-  if (d > 0) return `${d}d ago`;
-  if (h > 0) return `${h}h ago`;
-  if (m > 0) return `${m}m ago`;
-  return "just now";
-}
+  function relativeTime(iso: string): string {
+    const diff = Date.now() - new Date(iso).getTime();
+    const m = Math.floor(diff / 60000);
+    const h = Math.floor(m / 60);
+    const d = Math.floor(h / 24);
+    if (d > 0) return `${d}d ago`;
+    if (h > 0) return `${h}h ago`;
+    if (m > 0) return `${m}m ago`;
+    return "just now";
+  }
 </script>
 
 <style scoped>
-.activity-item {
-  --background: transparent;
-  --padding-start: 16px;
-  --padding-end: 16px;
-  --inner-padding-end: 0;
-  --min-height: 56px;
-}
+  .activity-item {
+    --background: transparent;
+    --padding-start: 16px;
+    --padding-end: 16px;
+    --inner-padding-end: 0;
+    --min-height: 56px;
+  }
 
-.kind-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 34px;
-  height: 34px;
-  border-radius: 50%;
-  font-size: 17px;
-  margin-right: 12px;
-  flex-shrink: 0;
-}
+  .kind-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    height: 34px;
+    border-radius: 50%;
+    font-size: 17px;
+    margin-right: 12px;
+    flex-shrink: 0;
+  }
 
-.activity-label {
-  padding: 10px 0;
-  white-space: normal;
-}
+  .activity-label {
+    padding: 10px 0;
+    white-space: normal;
+  }
 
-.activity-text {
-  font-size: 13px;
-  line-height: 1.45;
-  color: var(--t-text-secondary);
-  display: inline-flex;
-  gap: 4px;
-}
+  .activity-text {
+    font-size: 13px;
+    line-height: 1.45;
+    color: var(--t-text-secondary);
+    display: inline-flex;
+    gap: 4px;
+  }
 
-.actor {
-  appearance: none;
-  background: transparent;
-  border: 0;
-  padding: 0;
-  margin: 0;
-  cursor: pointer;
-  font-family: var(--t-mono);
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--t-accent);
-}
+  .actor {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    font-family: var(--t-mono);
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--t-accent);
+  }
 
-.verb {
-  color: var(--t-text-secondary);
-}
+  .verb {
+    color: var(--t-text-secondary);
+  }
 
-.target {
-  font-family: var(--t-mono);
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--t-text-primary);
-}
+  .target {
+    font-family: var(--t-mono);
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--t-text-primary);
+  }
 
-.activity-time {
-  font-size: 11px;
-  color: var(--t-text-muted);
-  margin-top: 2px;
-}
+  .activity-time {
+    font-size: 11px;
+    color: var(--t-text-muted);
+    margin-top: 2px;
+  }
 </style>
diff --git a/apps/twisted/src/components/common/EmptyState.vue b/apps/twisted/src/components/common/EmptyState.vue
index 15b2812..f0f79b6 100644
--- a/apps/twisted/src/components/common/EmptyState.vue
+++ b/apps/twisted/src/components/common/EmptyState.vue
@@ -12,59 +12,59 @@
 </template>
 
 <script setup lang="ts">
-import { IonIcon, IonButton } from "@ionic/vue";
+  import { IonIcon, IonButton } from "@ionic/vue";
 
-defineProps<{ icon: string; title: string; message?: string; actionLabel?: string }>();
+  defineProps<{ icon: string; title: string; message?: string; actionLabel?: string }>();
 
-const emit = defineEmits<{ action: [] }>();
+  const emit = defineEmits<{ action: [] }>();
 </script>
 
 <style scoped>
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 48px 32px;
-  text-align: center;
-  gap: 10px;
-}
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 48px 32px;
+    text-align: center;
+    gap: 10px;
+  }
 
-.icon-wrap {
-  width: 64px;
-  height: 64px;
-  border-radius: 50%;
-  background: var(--t-accent-dim);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 4px;
-}
+  .icon-wrap {
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    background: var(--t-accent-dim);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 4px;
+  }
 
-.empty-icon {
-  font-size: 28px;
-  color: var(--t-accent);
-}
+  .empty-icon {
+    font-size: 28px;
+    color: var(--t-accent);
+  }
 
-.empty-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--t-text-primary);
-  margin: 0;
-  line-height: 1.3;
-}
+  .empty-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--t-text-primary);
+    margin: 0;
+    line-height: 1.3;
+  }
 
-.empty-message {
-  font-size: 13px;
-  color: var(--t-text-secondary);
-  margin: 0;
-  line-height: 1.5;
-  max-width: 260px;
-}
+  .empty-message {
+    font-size: 13px;
+    color: var(--t-text-secondary);
+    margin: 0;
+    line-height: 1.5;
+    max-width: 260px;
+  }
 
-.empty-action {
-  --color: var(--t-accent);
-  --border-color: var(--t-accent);
-  margin-top: 6px;
-}
+  .empty-action {
+    --color: var(--t-accent);
+    --border-color: var(--t-accent);
+    margin-top: 6px;
+  }
 </style>
diff --git a/apps/twisted/src/components/common/ErrorBoundary.vue b/apps/twisted/src/components/common/ErrorBoundary.vue
index a684281..1471856 100644
--- a/apps/twisted/src/components/common/ErrorBoundary.vue
+++ b/apps/twisted/src/components/common/ErrorBoundary.vue
@@ -18,68 +18,68 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onErrorCaptured } from "vue";
-import { IonIcon, IonButton } from "@ionic/vue";
-import { alertCircleOutline, refreshOutline } from "ionicons/icons";
+  import { ref, onErrorCaptured } from "vue";
+  import { IonIcon, IonButton } from "@ionic/vue";
+  import { alertCircleOutline, refreshOutline } from "ionicons/icons";
 
-const error = ref<Error | null>(null);
+  const error = ref<Error | null>(null);
 
-onErrorCaptured((err) => {
-  error.value = err instanceof Error ? err : new Error(String(err));
-  return false;
-});
+  onErrorCaptured((err) => {
+    error.value = err instanceof Error ? err : new Error(String(err));
+    return false;
+  });
 
-function retry() {
-  error.value = null;
-}
+  function retry() {
+    error.value = null;
+  }
 </script>
 
 <style scoped>
-.error-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 48px 32px;
-  text-align: center;
-  gap: 10px;
-}
+  .error-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 48px 32px;
+    text-align: center;
+    gap: 10px;
+  }
 
-.error-icon-wrap {
-  width: 64px;
-  height: 64px;
-  border-radius: 50%;
-  background: var(--t-red-dim);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 4px;
-}
+  .error-icon-wrap {
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    background: var(--t-red-dim);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 4px;
+  }
 
-.error-icon {
-  font-size: 28px;
-  color: var(--t-red);
-}
+  .error-icon {
+    font-size: 28px;
+    color: var(--t-red);
+  }
 
-.error-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--t-text-primary);
-  margin: 0;
-}
+  .error-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--t-text-primary);
+    margin: 0;
+  }
 
-.error-message {
-  font-size: 13px;
-  color: var(--t-text-secondary);
-  margin: 0;
-  line-height: 1.5;
-  max-width: 260px;
-  font-family: var(--t-mono);
-}
+  .error-message {
+    font-size: 13px;
+    color: var(--t-text-secondary);
+    margin: 0;
+    line-height: 1.5;
+    max-width: 260px;
+    font-family: var(--t-mono);
+  }
 
-.retry-btn {
-  --color: var(--t-red);
-  --border-color: var(--t-red);
-  margin-top: 6px;
-}
+  .retry-btn {
+    --color: var(--t-red);
+    --border-color: var(--t-red);
+    margin-top: 6px;
+  }
 </style>
diff --git a/apps/twisted/src/components/common/RepoCard.vue b/apps/twisted/src/components/common/RepoCard.vue
index 48f49d2..d013efb 100644
--- a/apps/twisted/src/components/common/RepoCard.vue
+++ b/apps/twisted/src/components/common/RepoCard.vue
@@ -25,152 +25,152 @@
 </template>
 
 <script setup lang="ts">
-import { IonCard, IonCardContent, IonIcon } from "@ionic/vue";
-import { starOutline } from "ionicons/icons";
-import type { RepoSummary } from "@/domain/models/repo";
-
-defineProps<{ repo: RepoSummary }>();
-const emit = defineEmits<{ click: []; ownerClick: [] }>();
-
-const LANG_COLORS: Record<string, string> = {
-  TypeScript: "#3178c6",
-  JavaScript: "#f7df1e",
-  Go: "#00add8",
-  Python: "#3572A5",
-  Rust: "#dea584",
-  Nix: "#7ebae4",
-  Ruby: "#cc342d",
-  CSS: "#563d7c",
-  HTML: "#e34c26",
-  Shell: "#89e051",
-  Swift: "#F05138",
-  Kotlin: "#A97BFF",
-  Dart: "#00B4AB",
-};
-
-function langColor(lang: string): string {
-  return LANG_COLORS[lang] ?? "var(--t-text-muted)";
-}
-
-function formatCount(n: number): string {
-  return n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n);
-}
-
-function relativeTime(iso: string): string {
-  const diff = Date.now() - new Date(iso).getTime();
-  const m = Math.floor(diff / 60000);
-  const h = Math.floor(m / 60);
-  const d = Math.floor(h / 24);
-  if (d > 0) return `${d}d ago`;
-  if (h > 0) return `${h}h ago`;
-  if (m > 0) return `${m}m ago`;
-  return "just now";
-}
+  import { IonCard, IonCardContent, IonIcon } from "@ionic/vue";
+  import { starOutline } from "ionicons/icons";
+  import type { RepoSummary } from "@/domain/models/repo";
+
+  defineProps<{ repo: RepoSummary }>();
+  const emit = defineEmits<{ click: []; ownerClick: [] }>();
+
+  const LANG_COLORS: Record<string, string> = {
+    TypeScript: "#3178c6",
+    JavaScript: "#f7df1e",
+    Go: "#00add8",
+    Python: "#3572A5",
+    Rust: "#dea584",
+    Nix: "#7ebae4",
+    Ruby: "#cc342d",
+    CSS: "#563d7c",
+    HTML: "#e34c26",
+    Shell: "#89e051",
+    Swift: "#F05138",
+    Kotlin: "#A97BFF",
+    Dart: "#00B4AB",
+  };
+
+  function langColor(lang: string): string {
+    return LANG_COLORS[lang] ?? "var(--t-text-muted)";
+  }
+
+  function formatCount(n: number): string {
+    return n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n);
+  }
+
+  function relativeTime(iso: string): string {
+    const diff = Date.now() - new Date(iso).getTime();
+    const m = Math.floor(diff / 60000);
+    const h = Math.floor(m / 60);
+    const d = Math.floor(h / 24);
+    if (d > 0) return `${d}d ago`;
+    if (h > 0) return `${h}h ago`;
+    if (m > 0) return `${m}m ago`;
+    return "just now";
+  }
 </script>
 
 <style scoped>
-.repo-card {
-  --background: var(--t-surface);
-  margin: 6px 16px;
-  border-radius: var(--t-radius-md);
-  border: 1px solid var(--t-border);
-  box-shadow: none;
-}
-
-.card-body {
-  padding: 14px 16px;
-}
-
-.repo-header {
-  display: flex;
-  align-items: center;
-  gap: 0;
-  margin-bottom: 6px;
-}
-
-.repo-owner {
-  appearance: none;
-  background: transparent;
-  border: 0;
-  padding: 0;
-  margin: 0;
-  cursor: pointer;
-  font-family: var(--t-mono);
-  font-size: 13px;
-  color: var(--t-text-secondary);
-  line-height: 1.4;
-}
-
-.repo-name {
-  font-family: var(--t-mono);
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--t-accent);
-  line-height: 1.4;
-  flex: 1;
-}
-
-.stars {
-  display: flex;
-  align-items: center;
-  gap: 3px;
-  margin-left: auto;
-  padding-left: 8px;
-  flex-shrink: 0;
-}
-
-.star-icon {
-  font-size: 12px;
-  color: var(--t-amber);
-}
-
-.star-count {
-  font-family: var(--t-mono);
-  font-size: 12px;
-  color: var(--t-text-secondary);
-}
-
-.repo-description {
-  font-size: 13px;
-  color: var(--t-text-secondary);
-  margin: 0 0 10px;
-  line-height: 1.5;
-  display: -webkit-box;
-  line-clamp: 2;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.repo-meta {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.lang-badge {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  font-size: 12px;
-  color: var(--t-text-secondary);
-}
-
-.lang-dot {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.meta-dot {
-  color: var(--t-text-muted);
-  font-size: 12px;
-}
-
-.updated-at {
-  font-size: 12px;
-  color: var(--t-text-muted);
-}
+  .repo-card {
+    --background: var(--t-surface);
+    margin: 6px 16px;
+    border-radius: var(--t-radius-md);
+    border: 1px solid var(--t-border);
+    box-shadow: none;
+  }
+
+  .card-body {
+    padding: 14px 16px;
+  }
+
+  .repo-header {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    margin-bottom: 6px;
+  }
+
+  .repo-owner {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    font-family: var(--t-mono);
+    font-size: 13px;
+    color: var(--t-text-secondary);
+    line-height: 1.4;
+  }
+
+  .repo-name {
+    font-family: var(--t-mono);
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--t-accent);
+    line-height: 1.4;
+    flex: 1;
+  }
+
+  .stars {
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    margin-left: auto;
+    padding-left: 8px;
+    flex-shrink: 0;
+  }
+
+  .star-icon {
+    font-size: 12px;
+    color: var(--t-amber);
+  }
+
+  .star-count {
+    font-family: var(--t-mono);
+    font-size: 12px;
+    color: var(--t-text-secondary);
+  }
+
+  .repo-description {
+    font-size: 13px;
+    color: var(--t-text-secondary);
+    margin: 0 0 10px;
+    line-height: 1.5;
+    display: -webkit-box;
+    line-clamp: 2;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .repo-meta {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .lang-badge {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 12px;
+    color: var(--t-text-secondary);
+  }
+
+  .lang-dot {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .meta-dot {
+    color: var(--t-text-muted);
+    font-size: 12px;
+  }
+
+  .updated-at {
+    font-size: 12px;
+    color: var(--t-text-muted);
+  }
 </style>
diff --git a/apps/twisted/src/components/common/SkeletonLoader.vue b/apps/twisted/src/components/common/SkeletonLoader.vue
index e4c1a2d..776b5d1 100644
--- a/apps/twisted/src/components/common/SkeletonLoader.vue
+++ b/apps/twisted/src/components/common/SkeletonLoader.vue
@@ -37,130 +37,130 @@
 </template>
 
 <script setup lang="ts">
-import { IonCard, IonCardContent, IonItem, IonLabel, IonSkeletonText } from "@ionic/vue";
+  import { IonCard, IonCardContent, IonItem, IonLabel, IonSkeletonText } from "@ionic/vue";
 
-defineProps<{ variant: "card" | "list-item" | "profile" }>();
+  defineProps<{ variant: "card" | "list-item" | "profile" }>();
 </script>
 
 <style scoped>
-/* shared */
-.skel {
-  border-radius: 4px;
-  line-height: 1;
-}
-
-/* card */
-.skeleton-card {
-  --background: var(--t-surface);
-  margin: 6px 16px;
-  border-radius: var(--t-radius-md);
-  border: 1px solid var(--t-border);
-  box-shadow: none;
-}
-
-.card-body {
-  padding: 14px 16px;
-}
-
-.row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.space-between {
-  justify-content: space-between;
-  margin-bottom: 10px;
-}
-
-.skel-title {
-  height: 13px;
-  width: 55%;
-}
-.skel-stars {
-  height: 12px;
-  width: 40px;
-  flex-shrink: 0;
-}
-.skel-desc {
-  height: 12px;
-  width: 90%;
-  margin-bottom: 5px;
-}
-.skel-desc-short {
-  height: 12px;
-  width: 60%;
-  margin-bottom: 12px;
-}
-.skel-badge {
-  height: 10px;
-  width: 80px;
-}
-.skel-time {
-  height: 10px;
-  width: 50px;
-}
-
-/* list-item */
-.skeleton-item {
-  --background: transparent;
-  --padding-start: 16px;
-  --inner-padding-end: 16px;
-}
-
-.skel-avatar {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  flex-shrink: 0;
-  margin-right: 12px;
-}
-.skel-item-title {
-  height: 13px;
-  width: 50%;
-  margin-bottom: 7px;
-}
-.skel-item-sub {
-  height: 11px;
-  width: 35%;
-}
-
-/* profile */
-.skeleton-profile {
-  display: flex;
-  gap: 14px;
-  padding: 16px;
-}
-
-.skel-profile-avatar {
-  width: 56px;
-  height: 56px;
-  border-radius: var(--t-radius-sm);
-  flex-shrink: 0;
-}
-
-.profile-lines {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 7px;
-  padding-top: 4px;
-}
-
-.skel-profile-handle {
-  height: 12px;
-  width: 55%;
-}
-.skel-profile-name {
-  height: 13px;
-  width: 45%;
-}
-.skel-profile-bio {
-  height: 11px;
-  width: 90%;
-}
-.skel-profile-bio-short {
-  height: 11px;
-  width: 70%;
-}
+  /* shared */
+  .skel {
+    border-radius: 4px;
+    line-height: 1;
+  }
+
+  /* card */
+  .skeleton-card {
+    --background: var(--t-surface);
+    margin: 6px 16px;
+    border-radius: var(--t-radius-md);
+    border: 1px solid var(--t-border);
+    box-shadow: none;
+  }
+
+  .card-body {
+    padding: 14px 16px;
+  }
+
+  .row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .space-between {
+    justify-content: space-between;
+    margin-bottom: 10px;
+  }
+
+  .skel-title {
+    height: 13px;
+    width: 55%;
+  }
+  .skel-stars {
+    height: 12px;
+    width: 40px;
+    flex-shrink: 0;
+  }
+  .skel-desc {
+    height: 12px;
+    width: 90%;
+    margin-bottom: 5px;
+  }
+  .skel-desc-short {
+    height: 12px;
+    width: 60%;
+    margin-bottom: 12px;
+  }
+  .skel-badge {
+    height: 10px;
+    width: 80px;
+  }
+  .skel-time {
+    height: 10px;
+    width: 50px;
+  }
+
+  /* list-item */
+  .skeleton-item {
+    --background: transparent;
+    --padding-start: 16px;
+    --inner-padding-end: 16px;
+  }
+
+  .skel-avatar {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    flex-shrink: 0;
+    margin-right: 12px;
+  }
+  .skel-item-title {
+    height: 13px;
+    width: 50%;
+    margin-bottom: 7px;
+  }
+  .skel-item-sub {
+    height: 11px;
+    width: 35%;
+  }
+
+  /* profile */
+  .skeleton-profile {
+    display: flex;
+    gap: 14px;
+    padding: 16px;
+  }
+
+  .skel-profile-avatar {
+    width: 56px;
+    height: 56px;
+    border-radius: var(--t-radius-sm);
+    flex-shrink: 0;
+  }
+
+  .profile-lines {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 7px;
+    padding-top: 4px;
+  }
+
+  .skel-profile-handle {
+    height: 12px;
+    width: 55%;
+  }
+  .skel-profile-name {
+    height: 13px;
+    width: 45%;
+  }
+  .skel-profile-bio {
+    height: 11px;
+    width: 90%;
+  }
+  .skel-profile-bio-short {
+    height: 11px;
+    width: 70%;
+  }
 </style>
diff --git a/apps/twisted/src/components/common/UserCard.vue b/apps/twisted/src/components/common/UserCard.vue
index 86b7491..597966c 100644
--- a/apps/twisted/src/components/common/UserCard.vue
+++ b/apps/twisted/src/components/common/UserCard.vue
@@ -29,128 +29,128 @@
 </template>
 
 <script setup lang="ts">
-import { IonCard, IonCardContent, IonAvatar } from "@ionic/vue";
-import type { UserSummary } from "@/domain/models/user";
+  import { IonCard, IonCardContent, IonAvatar } from "@ionic/vue";
+  import type { UserSummary } from "@/domain/models/user";
 
-defineProps<{ user: UserSummary }>();
-const emit = defineEmits<{ click: [] }>();
+  defineProps<{ user: UserSummary }>();
+  const emit = defineEmits<{ click: [] }>();
 
-const PALETTE = ["#22d3ee", "#a78bfa", "#34d399", "#fbbf24", "#f87171", "#fb923c", "#60a5fa"];
+  const PALETTE = ["#22d3ee", "#a78bfa", "#34d399", "#fbbf24", "#f87171", "#fb923c", "#60a5fa"];
 
-function avatarColor(handle: string): string {
-  let hash = 0;
-  for (const ch of handle) hash = (hash * 31 + ch.charCodeAt(0)) & 0xffffffff;
-  return PALETTE[Math.abs(hash) % PALETTE.length];
-}
+  function avatarColor(handle: string): string {
+    let hash = 0;
+    for (const ch of handle) hash = (hash * 31 + ch.charCodeAt(0)) & 0xffffffff;
+    return PALETTE[Math.abs(hash) % PALETTE.length];
+  }
 
-function initials(handle: string): string {
-  const base = handle.split(".")[0];
-  return base.slice(0, 2).toUpperCase();
-}
+  function initials(handle: string): string {
+    const base = handle.split(".")[0];
+    return base.slice(0, 2).toUpperCase();
+  }
 
-function formatCount(n: number): string {
-  return n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n);
-}
+  function formatCount(n: number): string {
+    return n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n);
+  }
 </script>
 
 <style scoped>
-.user-card {
-  --background: var(--t-surface);
-  margin: 6px 16px;
-  border-radius: var(--t-radius-md);
-  border: 1px solid var(--t-border);
-  box-shadow: none;
-}
-
-.card-body {
-  padding: 14px 16px;
-}
-
-.user-row {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-}
-
-.avatar {
-  width: 44px;
-  height: 44px;
-  flex-shrink: 0;
-  border-radius: var(--t-radius-sm);
-  overflow: hidden;
-}
-
-.avatar-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-.avatar-fallback {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-family: var(--t-mono);
-  font-size: 13px;
-  font-weight: 700;
-  color: #0d1117;
-  border-radius: var(--t-radius-sm);
-}
-
-.user-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.user-handle {
-  font-family: var(--t-mono);
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--t-accent);
-  line-height: 1.3;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.user-display-name {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--t-text-primary);
-  margin-top: 1px;
-  line-height: 1.3;
-}
-
-.user-bio {
-  font-size: 12px;
-  color: var(--t-text-secondary);
-  margin: 4px 0 0;
-  line-height: 1.4;
-  display: -webkit-box;
-  line-clamp: 2;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.user-stats {
-  display: flex;
-  gap: 14px;
-  margin-top: 10px;
-  padding-top: 10px;
-  border-top: 1px solid var(--t-border);
-}
-
-.stat {
-  font-size: 12px;
-  color: var(--t-text-muted);
-}
-
-.stat strong {
-  font-weight: 600;
-  color: var(--t-text-secondary);
-}
+  .user-card {
+    --background: var(--t-surface);
+    margin: 6px 16px;
+    border-radius: var(--t-radius-md);
+    border: 1px solid var(--t-border);
+    box-shadow: none;
+  }
+
+  .card-body {
+    padding: 14px 16px;
+  }
+
+  .user-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+  }
+
+  .avatar {
+    width: 44px;
+    height: 44px;
+    flex-shrink: 0;
+    border-radius: var(--t-radius-sm);
+    overflow: hidden;
+  }
+
+  .avatar-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  .avatar-fallback {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--t-mono);
+    font-size: 13px;
+    font-weight: 700;
+    color: #0d1117;
+    border-radius: var(--t-radius-sm);
+  }
+
+  .user-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .user-handle {
+    font-family: var(--t-mono);
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--t-accent);
+    line-height: 1.3;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .user-display-name {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--t-text-primary);
+    margin-top: 1px;
+    line-height: 1.3;
+  }
+
+  .user-bio {
+    font-size: 12px;
+    color: var(--t-text-secondary);
+    margin: 4px 0 0;
+    line-height: 1.4;
+    display: -webkit-box;
+    line-clamp: 2;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .user-stats {
+    display: flex;
+    gap: 14px;
+    margin-top: 10px;
+    padding-top: 10px;
+    border-top: 1px solid var(--t-border);
+  }
+
+  .stat {
+    font-size: 12px;
+    color: var(--t-text-muted);
+  }
+
+  .stat strong {
+    font-weight: 600;
+    color: var(--t-text-secondary);
+  }
 </style>
diff --git a/apps/twisted/src/components/repo/CommentThread.vue b/apps/twisted/src/components/repo/CommentThread.vue
index 9b41b5b..366bf63 100644
--- a/apps/twisted/src/components/repo/CommentThread.vue
+++ b/apps/twisted/src/components/repo/CommentThread.vue
@@ -14,85 +14,85 @@
 </template>
 
 <script setup lang="ts">
-import type { IssueComment, PullRequestComment } from "@/domain/models/comment.js";
+  import type { IssueComment, PullRequestComment } from "@/domain/models/comment.js";
 
-defineProps<{ comments: Array<IssueComment | PullRequestComment> }>();
+  defineProps<{ comments: Array<IssueComment | PullRequestComment> }>();
 
-function relativeTime(iso: string): string {
-  const timestamp = Date.parse(iso);
-  if (Number.isNaN(timestamp)) return iso;
+  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);
+    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";
-}
+    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` };
-}
+  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-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-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);
-}
+  .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;
-}
+  .author {
+    color: var(--t-accent);
+    font-size: 11px;
+  }
 
-.mono {
-  font-family: var(--t-mono);
-}
+  .mono {
+    font-family: var(--t-mono);
+  }
 
-.dot {
-  color: var(--t-border-strong);
-}
+  .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;
-}
+  .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);
-}
+  .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/apps/twisted/src/components/repo/FileTreeItem.vue b/apps/twisted/src/components/repo/FileTreeItem.vue
index 730c2e3..cdf0690 100644
--- a/apps/twisted/src/components/repo/FileTreeItem.vue
+++ b/apps/twisted/src/components/repo/FileTreeItem.vue
@@ -12,81 +12,81 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
-import { IonItem, IonLabel, IonIcon } from "@ionic/vue";
-import { folderOpenOutline, documentTextOutline, gitBranchOutline, chevronForwardOutline } from "ionicons/icons";
-import type { RepoFile } from "@/domain/models/repo.js";
+  import { computed } from "vue";
+  import { IonItem, IonLabel, IonIcon } from "@ionic/vue";
+  import { folderOpenOutline, documentTextOutline, gitBranchOutline, chevronForwardOutline } from "ionicons/icons";
+  import type { RepoFile } from "@/domain/models/repo.js";
 
-const props = defineProps<{ file: RepoFile; lines?: "full" | "inset" | "none" }>();
+  const props = defineProps<{ file: RepoFile; lines?: "full" | "inset" | "none" }>();
 
-const emit = defineEmits<{ click: [] }>();
+  const emit = defineEmits<{ click: [] }>();
 
-const fileIcon = computed(() => {
-  if (props.file.type === "dir") return folderOpenOutline;
-  if (props.file.type === "submodule") return gitBranchOutline;
-  return documentTextOutline;
-});
+  const fileIcon = computed(() => {
+    if (props.file.type === "dir") return folderOpenOutline;
+    if (props.file.type === "submodule") return gitBranchOutline;
+    return documentTextOutline;
+  });
 </script>
 
 <style scoped>
-.file-item {
-  --background: transparent;
-  --padding-start: 16px;
-  --inner-padding-end: 12px;
-  --min-height: 46px;
-}
+  .file-item {
+    --background: transparent;
+    --padding-start: 16px;
+    --inner-padding-end: 12px;
+    --min-height: 46px;
+  }
 
-.file-icon {
-  font-size: 17px;
-  margin-right: 10px;
-  flex-shrink: 0;
-}
+  .file-icon {
+    font-size: 17px;
+    margin-right: 10px;
+    flex-shrink: 0;
+  }
 
-.file-icon.dir {
-  color: var(--t-amber);
-}
+  .file-icon.dir {
+    color: var(--t-amber);
+  }
 
-.file-icon.file {
-  color: var(--t-text-muted);
-}
+  .file-icon.file {
+    color: var(--t-text-muted);
+  }
 
-.file-icon.submodule {
-  color: var(--t-purple);
-}
+  .file-icon.submodule {
+    color: var(--t-purple);
+  }
 
-.file-label {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 0;
-  min-width: 0;
-}
+  .file-label {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0;
+    min-width: 0;
+  }
 
-.file-name {
-  font-family: var(--t-mono);
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--t-text-primary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex-shrink: 0;
-  max-width: 45%;
-}
+  .file-name {
+    font-family: var(--t-mono);
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--t-text-primary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex-shrink: 0;
+    max-width: 45%;
+  }
 
-.commit-msg {
-  font-size: 12px;
-  color: var(--t-text-muted);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex: 1;
-  margin-left: 12px;
-}
+  .commit-msg {
+    font-size: 12px;
+    color: var(--t-text-muted);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+    margin-left: 12px;
+  }
 
-.chevron {
-  font-size: 14px;
-  color: var(--t-text-muted);
-  flex-shrink: 0;
-}
+  .chevron {
+    font-size: 14px;
+    color: var(--t-text-muted);
+    flex-shrink: 0;
+  }
 </style>
diff --git a/apps/twisted/src/core/config/project.ts b/apps/twisted/src/core/config/project.ts
index aaf34d5..7946709 100644
--- a/apps/twisted/src/core/config/project.ts
+++ b/apps/twisted/src/core/config/project.ts
@@ -1,4 +1,4 @@
-const rawTwisterApiBaseUrl = import.meta.env.VITE_TWISTER_API_BASE_URL?.trim() ?? "http://localhost:8080/";
+const rawTwisterApiBaseUrl = import.meta.env.VITE_TWISTER_API_BASE_URL?.trim() ?? "http://127.0.0.1:8080";
 
 export const twisterApiBaseUrl = rawTwisterApiBaseUrl.replace(/\/+$/, "");
 export const hasTwisterApi = twisterApiBaseUrl.length > 0;
diff --git a/apps/twisted/src/core/query/client.ts b/apps/twisted/src/core/query/client.ts
index a398b2e..10762a2 100644
--- a/apps/twisted/src/core/query/client.ts
+++ b/apps/twisted/src/core/query/client.ts
@@ -4,10 +4,6 @@ const isDev = import.meta.env.DEV;
 
 export const queryClient = new QueryClient({
   defaultOptions: {
-    queries: {
-      staleTime: isDev ? 0 : 5 * 60 * 1000,
-      gcTime: isDev ? 0 : 10 * 60 * 1000,
-      retry: isDev ? 0 : 2,
-    },
+    queries: { staleTime: isDev ? 0 : 5 * 60 * 1000, gcTime: isDev ? 0 : 10 * 60 * 1000, retry: isDev ? 0 : 2 },
   },
 });
diff --git a/apps/twisted/src/features/profile/UserProfilePage.vue b/apps/twisted/src/features/profile/UserProfilePage.vue
index 8d1a9dd..d33752b 100644
--- a/apps/twisted/src/features/profile/UserProfilePage.vue
+++ b/apps/twisted/src/features/profile/UserProfilePage.vue
@@ -144,309 +144,308 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import {
-  IonPage,
-  IonHeader,
-  IonToolbar,
-  IonTitle,
-  IonContent,
-  IonButtons,
-  IonBackButton,
-  IonAvatar,
-  IonIcon,
-  IonSegment,
-  IonSegmentButton,
-} from "@ionic/vue";
-import {
-  alertCircleOutline,
-  locationOutline,
-  personOutline,
-  linkOutline,
-  codeSlashOutline,
-  peopleOutline,
-} from "ionicons/icons";
-import SkeletonLoader from "@/components/common/SkeletonLoader.vue";
-import EmptyState from "@/components/common/EmptyState.vue";
-import RepoCard from "@/components/common/RepoCard.vue";
-import UserCard from "@/components/common/UserCard.vue";
-import RepoIssues from "@/features/repo/RepoIssues.vue";
-import RepoPRs from "@/features/repo/RepoPRs.vue";
-import UserStrings from "@/features/profile/UserStrings.vue";
-import {
-  useIdentity,
-  useActorProfile,
-  useUserRepos,
-  useUserStrings,
-  useUserIssues,
-  useUserPullRequests,
-  useUserFollowing,
-} from "@/services/tangled/queries.js";
-import { useIndexedProfileSummary } from "@/services/project-api/queries.js";
-import type { IssueSummary } from "@/domain/models/issue.js";
-import type { PullRequestSummary } from "@/domain/models/pull-request.js";
-import type { RepoSummary } from "@/domain/models/repo.js";
-
-const route = useRoute();
-const router = useRouter();
-const handle = computed(() => String(route.params.handle ?? ""));
-const section = ref<"repos" | "strings" | "issues" | "prs" | "following">("repos");
-
-const identity = useIdentity(handle);
-const did = computed(() => identity.data.value?.did ?? "");
-const hasIdentity = computed(() => !!identity.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 profileQuery = useActorProfile(handle, undefined, { enabled: hasIdentity });
-const reposQuery = useUserRepos(handle, { enabled: hasIdentity });
-const stringsQuery = useUserStrings(handle, { enabled: hasIdentity });
-const issuesQuery = useUserIssues(handle, { enabled: hasIdentity });
-const pullRequestsQuery = useUserPullRequests(handle, { enabled: hasIdentity });
-const followingQuery = useUserFollowing(handle, { enabled: hasIdentity });
-const indexedProfileSummaryQuery = useIndexedProfileSummary(did, { enabled: hasIdentity });
-
-const profile = computed(() => profileQuery.data.value);
-const repos = computed(() => reposQuery.data.value ?? []);
-const strings = computed(() => stringsQuery.data.value ?? []);
-const issues = computed(() => issuesQuery.data.value ?? []);
-const pullRequests = computed(() => pullRequestsQuery.data.value ?? []);
-const following = computed(() => followingQuery.data.value ?? []);
-const indexedProfileSummary = computed(() => indexedProfileSummaryQuery.data.value);
-
-const pinnedUris = computed(() => (profile.value as { pinnedRepos?: string[] } | undefined)?.pinnedRepos ?? []);
-const pinnedRepos = computed(() => repos.value.filter((r) => pinnedUris.value.includes(r.atUri)));
-const otherRepos = computed(() => repos.value.filter((repo) => !pinnedUris.value.includes(repo.atUri)));
-const stats = computed(() => {
-  const values = [
-    { label: "repos", value: repos.value.length },
-    { label: "strings", value: strings.value.length },
-    { label: "issues", value: issues.value.length },
-    { label: "prs", value: pullRequests.value.length },
-  ];
-
-  if (indexedProfileSummary.value?.followerCount != null) {
-    values.splice(1, 0, { label: "followers", value: indexedProfileSummary.value.followerCount });
+  import { ref, computed, watch } from "vue";
+  import { useRoute, useRouter } from "vue-router";
+  import {
+    IonPage,
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonButtons,
+    IonBackButton,
+    IonAvatar,
+    IonIcon,
+    IonSegment,
+    IonSegmentButton,
+  } from "@ionic/vue";
+  import {
+    alertCircleOutline,
+    locationOutline,
+    personOutline,
+    linkOutline,
+    codeSlashOutline,
+    peopleOutline,
+  } from "ionicons/icons";
+  import SkeletonLoader from "@/components/common/SkeletonLoader.vue";
+  import EmptyState from "@/components/common/EmptyState.vue";
+  import RepoCard from "@/components/common/RepoCard.vue";
+  import UserCard from "@/components/common/UserCard.vue";
+  import RepoIssues from "@/features/repo/RepoIssues.vue";
+  import RepoPRs from "@/features/repo/RepoPRs.vue";
+  import UserStrings from "@/features/profile/UserStrings.vue";
+  import {
+    useIdentity,
+    useActorProfile,
+    useUserRepos,
+    useUserStrings,
+    useUserIssues,
+    useUserPullRequests,
+    useUserFollowing,
+  } from "@/services/tangled/queries.js";
+  import { useIndexedProfileSummary } from "@/services/project-api/queries.js";
+  import type { IssueSummary } from "@/domain/models/issue.js";
+  import type { PullRequestSummary } from "@/domain/models/pull-request.js";
+  import type { RepoSummary } from "@/domain/models/repo.js";
+
+  const route = useRoute();
+  const router = useRouter();
+  const handle = computed(() => String(route.params.handle ?? ""));
+  const section = ref<"repos" | "strings" | "issues" | "prs" | "following">("repos");
+
+  const identity = useIdentity(handle);
+  const did = computed(() => identity.data.value?.did ?? "");
+  const hasIdentity = computed(() => !!identity.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 profileQuery = useActorProfile(handle, undefined, { enabled: hasIdentity });
+  const reposQuery = useUserRepos(handle, { enabled: hasIdentity });
+  const stringsQuery = useUserStrings(handle, { enabled: hasIdentity });
+  const issuesQuery = useUserIssues(handle, { enabled: hasIdentity });
+  const pullRequestsQuery = useUserPullRequests(handle, { enabled: hasIdentity });
+  const followingQuery = useUserFollowing(handle, { enabled: hasIdentity });
+  const indexedProfileSummaryQuery = useIndexedProfileSummary(did, { enabled: hasIdentity });
+
+  const profile = computed(() => profileQuery.data.value);
+  const repos = computed(() => reposQuery.data.value ?? []);
+  const strings = computed(() => stringsQuery.data.value ?? []);
+  const issues = computed(() => issuesQuery.data.value ?? []);
+  const pullRequests = computed(() => pullRequestsQuery.data.value ?? []);
+  const following = computed(() => followingQuery.data.value ?? []);
+  const indexedProfileSummary = computed(() => indexedProfileSummaryQuery.data.value);
+
+  const pinnedUris = computed(() => (profile.value as { pinnedRepos?: string[] } | undefined)?.pinnedRepos ?? []);
+  const pinnedRepos = computed(() => repos.value.filter((r) => pinnedUris.value.includes(r.atUri)));
+  const otherRepos = computed(() => repos.value.filter((repo) => !pinnedUris.value.includes(repo.atUri)));
+  const stats = computed(() => {
+    const values = [
+      { label: "repos", value: repos.value.length },
+      { label: "strings", value: strings.value.length },
+      { label: "issues", value: issues.value.length },
+      { label: "prs", value: pullRequests.value.length },
+    ];
+
+    if (indexedProfileSummary.value?.followerCount != null) {
+      values.splice(1, 0, { label: "followers", value: indexedProfileSummary.value.followerCount });
+    }
+
+    values.splice(indexedProfileSummary.value?.followerCount != null ? 2 : 1, 0, {
+      label: "following",
+      value: indexedProfileSummary.value?.followingCount ?? following.value.length,
+    });
+
+    return values;
+  });
+
+  const isLoading = computed(() => identity.isPending.value || profileQuery.isPending.value);
+  const isError = computed(() => identity.isError.value || profileQuery.isError.value);
+  const errorMessage = computed(() => {
+    const err = identity.error.value ?? profileQuery.error.value;
+    return err instanceof Error ? err.message : "An unexpected error occurred.";
+  });
+
+  watch(handle, () => {
+    section.value = "repos";
+  });
+
+  function navigateToRepo(repo: RepoSummary) {
+    router.push(`${tabPrefix.value}/repo/${repo.ownerHandle}/${repo.name}`);
   }
 
-  values.splice(
-    indexedProfileSummary.value?.followerCount != null ? 2 : 1,
-    0,
-    { label: "following", value: indexedProfileSummary.value?.followingCount ?? following.value.length },
-  );
-
-  return values;
-});
-
-const isLoading = computed(() => identity.isPending.value || profileQuery.isPending.value);
-const isError = computed(() => identity.isError.value || profileQuery.isError.value);
-const errorMessage = computed(() => {
-  const err = identity.error.value ?? profileQuery.error.value;
-  return err instanceof Error ? err.message : "An unexpected error occurred.";
-});
-
-watch(handle, () => {
-  section.value = "repos";
-});
-
-function navigateToRepo(repo: RepoSummary) {
-  router.push(`${tabPrefix.value}/repo/${repo.ownerHandle}/${repo.name}`);
-}
-
-function navigateToUser(profileHandle: string) {
-  router.push(`${tabPrefix.value}/user/${profileHandle}`);
-}
-
-function navigateToIssue(issue: IssueSummary) {
-  const repoName = repos.value.find((repo) => repo.atUri === issue.repoAtUri)?.name;
-  if (!repoName) return;
-  router.push(`${tabPrefix.value}/repo/${handle.value}/${repoName}/issues/${issue.rkey}`);
-}
-
-function navigateToPullRequest(pullRequest: PullRequestSummary) {
-  const repoName = repos.value.find((repo) => repo.atUri === pullRequest.targetRepoAtUri)?.name;
-  if (!repoName) return;
-  router.push(`${tabPrefix.value}/repo/${handle.value}/${repoName}/pulls/${pullRequest.rkey}`);
-}
-
-function displayLink(url: string): string {
-  return url.trim().replace(/^[a-z]+:\/\//i, "");
-}
-
-const PALETTE = ["#22d3ee", "#a78bfa", "#34d399", "#fbbf24", "#f87171", "#fb923c", "#60a5fa"];
-
-function avatarColor(h: string): string {
-  let hash = 0;
-  for (const ch of h) hash = (hash * 31 + ch.charCodeAt(0)) & 0xffffffff;
-  return PALETTE[Math.abs(hash) % PALETTE.length];
-}
-
-function initials(h: string): string {
-  return h.split(".")[0].slice(0, 2).toUpperCase();
-}
+  function navigateToUser(profileHandle: string) {
+    router.push(`${tabPrefix.value}/user/${profileHandle}`);
+  }
+
+  function navigateToIssue(issue: IssueSummary) {
+    const repoName = repos.value.find((repo) => repo.atUri === issue.repoAtUri)?.name;
+    if (!repoName) return;
+    router.push(`${tabPrefix.value}/repo/${handle.value}/${repoName}/issues/${issue.rkey}`);
+  }
+
+  function navigateToPullRequest(pullRequest: PullRequestSummary) {
+    const repoName = repos.value.find((repo) => repo.atUri === pullRequest.targetRepoAtUri)?.name;
+    if (!repoName) return;
+    router.push(`${tabPrefix.value}/repo/${handle.value}/${repoName}/pulls/${pullRequest.rkey}`);
+  }
+
+  function displayLink(url: string): string {
+    return url.trim().replace(/^[a-z]+:\/\//i, "");
+  }
+
+  const PALETTE = ["#22d3ee", "#a78bfa", "#34d399", "#fbbf24", "#f87171", "#fb923c", "#60a5fa"];
+
+  function avatarColor(h: string): string {
+    let hash = 0;
+    for (const ch of h) hash = (hash * 31 + ch.charCodeAt(0)) & 0xffffffff;
+    return PALETTE[Math.abs(hash) % PALETTE.length];
+  }
+
+  function initials(h: string): string {
+    return h.split(".")[0].slice(0, 2).toUpperCase();
+  }
 </script>
 
 <style scoped>
-.profile-title {
-  font-family: var(--t-mono);
-  font-size: 14px;
-}
-
-.mono {
-  font-family: var(--t-mono);
-}
-
-.profile-header {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 20px 16px 12px;
-}
-
-.avatar {
-  width: 64px;
-  height: 64px;
-  flex-shrink: 0;
-  border-radius: var(--t-radius-md);
-  overflow: hidden;
-}
-
-.avatar-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  display: block;
-}
-
-.avatar-fallback {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-family: var(--t-mono);
-  font-size: 18px;
-  font-weight: 700;
-  color: #0d1117;
-}
-
-.profile-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.profile-handle {
-  font-family: var(--t-mono);
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--t-accent);
-  line-height: 1.3;
-}
-
-.profile-name {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--t-text-primary);
-  margin-top: 2px;
-}
-
-.profile-bio {
-  font-size: 14px;
-  color: var(--t-text-secondary);
-  line-height: 1.55;
-  padding: 0 16px 12px;
-}
-
-.profile-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  padding: 0 16px 12px;
-}
-
-.meta-item {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  font-size: 13px;
-  color: var(--t-text-muted);
-}
-
-.meta-icon {
-  font-size: 14px;
-}
-
-.profile-links {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 0 16px 14px;
-}
-
-.profile-link {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 13px;
-  color: var(--t-accent);
-  text-decoration: none;
-}
-
-.link-icon {
-  font-size: 14px;
-  flex-shrink: 0;
-}
-
-.section-label {
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.07em;
-  color: var(--t-text-muted);
-  margin: 16px 16px 8px;
-}
-
-.stats-row {
-  display: flex;
-  gap: 8px;
-  padding: 0 16px 16px;
-  overflow-x: auto;
-  scrollbar-width: none;
-}
-
-.stats-row::-webkit-scrollbar {
-  display: none;
-}
-
-.stat-pill {
-  display: inline-flex;
-  align-items: baseline;
-  gap: 6px;
-  padding: 10px 12px;
-  border-radius: 999px;
-  border: 1px solid var(--t-border);
-  background: var(--t-surface-raised);
-  flex-shrink: 0;
-}
-
-.stat-value {
-  font-family: var(--t-mono);
-  font-size: 12px;
-  font-weight: 700;
-  color: var(--t-text-primary);
-}
-
-.stat-label {
-  font-size: 12px;
-  color: var(--t-text-muted);
-  text-transform: lowercase;
-}
-
-.profile-segment {
-  padding: 0 12px 8px;
-}
+  .profile-title {
+    font-family: var(--t-mono);
+    font-size: 14px;
+  }
+
+  .mono {
+    font-family: var(--t-mono);
+  }
+
+  .profile-header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 20px 16px 12px;
+  }
+
+  .avatar {
+    width: 64px;
+    height: 64px;
+    flex-shrink: 0;
+    border-radius: var(--t-radius-md);
+    overflow: hidden;
+  }
+
+  .avatar-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  .avatar-fallback {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--t-mono);
+    font-size: 18px;
+    font-weight: 700;
+    color: #0d1117;
+  }
+
+  .profile-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .profile-handle {
+    font-family: var(--t-mono);
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--t-accent);
+    line-height: 1.3;
+  }
+
+  .profile-name {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--t-text-primary);
+    margin-top: 2px;
+  }
+
+  .profile-bio {
+    font-size: 14px;
+    color: var(--t-text-secondary);
+    line-height: 1.55;
+    padding: 0 16px 12px;
+  }
+
+  .profile-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    padding: 0 16px 12px;
+  }
+
+  .meta-item {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 13px;
+    color: var(--t-text-muted);
+  }
+
+  .meta-icon {
+    font-size: 14px;
+  }
+
+  .profile-links {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding: 0 16px 14px;
+  }
+
+  .profile-link {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+    color: var(--t-accent);
+    text-decoration: none;
+  }
+
+  .link-icon {
+    font-size: 14px;
+    flex-shrink: 0;
+  }
+
+  .section-label {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.07em;
+    color: var(--t-text-muted);
+    margin: 16px 16px 8px;
+  }
+
+  .stats-row {
+    display: flex;
+    gap: 8px;
+    padding: 0 16px 16px;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .stats-row::-webkit-scrollbar {
+    display: none;
+  }
+
+  .stat-pill {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 6px;
+    padding: 10px 12px;
+    border-radius: 999px;
+    border: 1px solid var(--t-border);
+    background: var(--t-surface-raised);
+    flex-shrink: 0;
+  }
+
+  .stat-value {
+    font-family: var(--t-mono);
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--t-text-primary);
+  }
+
+  .stat-label {
+    font-size: 12px;
+    color: var(--t-text-muted);
+    text-transform: lowercase;
+  }
+
+  .profile-segment {
+    padding: 0 12px 8px;
+  }
 </style>
diff --git a/apps/twisted/src/features/profile/UserStrings.vue b/apps/twisted/src/features/profile/UserStrings.vue
index 0d05c79..8792506 100644
--- a/apps/twisted/src/features/profile/UserStrings.vue
+++ b/apps/twisted/src/features/profile/UserStrings.vue
@@ -28,99 +28,99 @@
 </template>
 
 <script setup lang="ts">
-import { IonItem, IonLabel, IonList, IonSpinner } from "@ionic/vue";
-import { documentTextOutline } from "ionicons/icons";
-import EmptyState from "@/components/common/EmptyState.vue";
-import type { StringSummary } from "@/domain/models/string.js";
-
-defineProps<{ strings: StringSummary[]; isLoading?: boolean }>();
-
-function preview(contents: string): string {
-  return contents.length > 280 ? `${contents.slice(0, 280)}...` : contents;
-}
-
-function relativeTime(iso: string): string {
-  const diff = Date.now() - new Date(iso).getTime();
-  const minutes = Math.floor(diff / 60000);
-  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";
-}
+  import { IonItem, IonLabel, IonList, IonSpinner } from "@ionic/vue";
+  import { documentTextOutline } from "ionicons/icons";
+  import EmptyState from "@/components/common/EmptyState.vue";
+  import type { StringSummary } from "@/domain/models/string.js";
+
+  defineProps<{ strings: StringSummary[]; isLoading?: boolean }>();
+
+  function preview(contents: string): string {
+    return contents.length > 280 ? `${contents.slice(0, 280)}...` : contents;
+  }
+
+  function relativeTime(iso: string): string {
+    const diff = Date.now() - new Date(iso).getTime();
+    const minutes = Math.floor(diff / 60000);
+    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>
-.strings-view {
-  padding-bottom: 32px;
-}
-
-.loading-center {
-  display: flex;
-  justify-content: center;
-  padding: 48px 0;
-}
-
-.string-list {
-  background: transparent;
-  padding: 0;
-}
-
-.string-item {
-  --background: transparent;
-  --padding-start: 16px;
-  --padding-end: 16px;
-  --inner-padding-end: 0;
-}
-
-.string-label {
-  white-space: normal;
-  padding: 10px 0 14px;
-}
-
-.string-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.string-file {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--t-accent);
-}
-
-.mono {
-  font-family: var(--t-mono);
-}
-
-.string-time {
-  font-size: 11px;
-  color: var(--t-text-muted);
-  flex-shrink: 0;
-}
-
-.string-description {
-  margin: 6px 0 8px;
-  font-size: 13px;
-  line-height: 1.45;
-  color: var(--t-text-secondary);
-}
-
-.string-preview {
-  margin: 0;
-  padding: 12px;
-  border-radius: var(--t-radius-sm);
-  border: 1px solid var(--t-border);
-  background: var(--t-surface-raised);
-  color: var(--t-text-primary);
-  font-family: var(--t-mono);
-  font-size: 12px;
-  line-height: 1.45;
-  overflow-x: auto;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
+  .strings-view {
+    padding-bottom: 32px;
+  }
+
+  .loading-center {
+    display: flex;
+    justify-content: center;
+    padding: 48px 0;
+  }
+
+  .string-list {
+    background: transparent;
+    padding: 0;
+  }
+
+  .string-item {
+    --background: transparent;
+    --padding-start: 16px;
+    --padding-end: 16px;
+    --inner-padding-end: 0;
+  }
+
+  .string-label {
+    white-space: normal;
+    padding: 10px 0 14px;
+  }
+
+  .string-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  .string-file {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--t-accent);
+  }
+
+  .mono {
+    font-family: var(--t-mono);
+  }
+
+  .string-time {
+    font-size: 11px;
+    color: var(--t-text-muted);
+    flex-shrink: 0;
+  }
+
+  .string-description {
+    margin: 6px 0 8px;
+    font-size: 13px;
+    line-height: 1.45;
+    color: var(--t-text-secondary);
+  }
+
+  .string-preview {
+    margin: 0;
+    padding: 12px;
+    border-radius: var(--t-radius-sm);
+    border: 1px solid var(--t-border);
+    background: var(--t-surface-raised);
+    color: var(--t-text-primary);
+    font-family: var(--t-mono);
+    font-size: 12px;
+    line-height: 1.45;
+    overflow-x: auto;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
 </style>
diff --git a/apps/twisted/src/features/repo/IssueDetailPage.vue b/apps/twisted/src/features/repo/IssueDetailPage.vue
index 3077631..9c7f09e 100644
--- a/apps/twisted/src/features/repo/IssueDetailPage.vue
+++ b/apps/twisted/src/features/repo/IssueDetailPage.vue
@@ -74,195 +74,187 @@
 </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 { useRepoRecord, useIssueDetail, useIssueComments, useDefaultBranch } from "@/services/tangled/queries.js";
-import type { RepoAssetContext } from "@/services/tangled/repo-assets.js";
-
-const route = useRoute();
-const owner = computed(() => String(route.params.owner ?? ""));
-const repoName = computed(() => String(route.params.repo ?? ""));
-const issueId = computed(() => String(route.params.issueId ?? ""));
-
-const repoQuery = useRepoRecord(owner, repoName, { enabled: computed(() => !!owner.value && !!repoName.value) });
-const branchQuery = useDefaultBranch(owner, repoName, {
-  enabled: computed(() => !!owner.value && !!repoName.value),
-});
-const repoAtUri = computed(() => repoQuery.data.value?.atUri ?? "");
-const markdownContext = computed<RepoAssetContext | undefined>(() => {
-  if (!owner.value || !repoName.value || !branchQuery.data.value?.name) return undefined;
-
-  return {
-    owner: owner.value,
-    repo: repoName.value,
-    branch: branchQuery.data.value.name,
-  };
-});
-
-const issueQuery = useIssueDetail(owner, issueId, { enabled: computed(() => !!owner.value && !!issueId.value) });
-const commentsQuery = useIssueComments(owner, issueId, { enabled: computed(() => !!owner.value && !!issueId.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(
-  () => repoQuery.isPending.value || issueQuery.isPending.value || commentsQuery.isPending.value,
-);
-const isError = computed(
-  () => repoQuery.isError.value || issueQuery.isError.value || commentsQuery.isError.value,
-);
-const errorMessage = computed(() => {
-  const error = 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.value}/${repoName.value}?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";
-}
+  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 { useRepoRecord, useIssueDetail, useIssueComments, useDefaultBranch } from "@/services/tangled/queries.js";
+  import type { RepoAssetContext } from "@/services/tangled/repo-assets.js";
+
+  const route = useRoute();
+  const owner = computed(() => String(route.params.owner ?? ""));
+  const repoName = computed(() => String(route.params.repo ?? ""));
+  const issueId = computed(() => String(route.params.issueId ?? ""));
+
+  const repoQuery = useRepoRecord(owner, repoName, { enabled: computed(() => !!owner.value && !!repoName.value) });
+  const branchQuery = useDefaultBranch(owner, repoName, { enabled: computed(() => !!owner.value && !!repoName.value) });
+  const repoAtUri = computed(() => repoQuery.data.value?.atUri ?? "");
+  const markdownContext = computed<RepoAssetContext | undefined>(() => {
+    if (!owner.value || !repoName.value || !branchQuery.data.value?.name) return undefined;
+
+    return { owner: owner.value, repo: repoName.value, branch: branchQuery.data.value.name };
+  });
+
+  const issueQuery = useIssueDetail(owner, issueId, { enabled: computed(() => !!owner.value && !!issueId.value) });
+  const commentsQuery = useIssueComments(owner, issueId, { enabled: computed(() => !!owner.value && !!issueId.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(
+    () => repoQuery.isPending.value || issueQuery.isPending.value || commentsQuery.isPending.value,
+  );
+  const isError = computed(() => repoQuery.isError.value || issueQuery.isError.value || commentsQuery.isError.value);
+  const errorMessage = computed(() => {
+    const error = 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.value}/${repoName.value}?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);
-}
+  .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/apps/twisted/src/features/repo/PullRequestDetailPage.vue b/apps/twisted/src/features/repo/PullRequestDetailPage.vue
index 1be7900..a21eeb5 100644
--- a/apps/twisted/src/features/repo/PullRequestDetailPage.vue
+++ b/apps/twisted/src/features/repo/PullRequestDetailPage.vue
@@ -83,227 +83,219 @@
 </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 {
-  useRepoRecord,
-  useDefaultBranch,
-  usePullRequestDetail,
-  usePullRequestComments,
-} from "@/services/tangled/queries.js";
-import type { RepoAssetContext } from "@/services/tangled/repo-assets.js";
-
-const route = useRoute();
-const owner = computed(() => String(route.params.owner ?? ""));
-const repoName = computed(() => String(route.params.repo ?? ""));
-const pullId = computed(() => String(route.params.pullId ?? ""));
-
-const repoQuery = useRepoRecord(owner, repoName, { enabled: computed(() => !!owner.value && !!repoName.value) });
-const branchQuery = useDefaultBranch(owner, repoName, {
-  enabled: computed(() => !!owner.value && !!repoName.value),
-});
-const repoAtUri = computed(() => repoQuery.data.value?.atUri ?? "");
-const markdownContext = computed<RepoAssetContext | undefined>(() => {
-  if (!owner.value || !repoName.value || !branchQuery.data.value?.name) return undefined;
-
-  return {
-    owner: owner.value,
-    repo: repoName.value,
-    branch: branchQuery.data.value.name,
-  };
-});
-
-const pullQuery = usePullRequestDetail(owner, pullId, { enabled: computed(() => !!owner.value && !!pullId.value) });
-const commentsQuery = usePullRequestComments(owner, pullId, {
-  enabled: computed(() => !!owner.value && !!pullId.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(
-  () => repoQuery.isPending.value || pullQuery.isPending.value || commentsQuery.isPending.value,
-);
-const isError = computed(
-  () => repoQuery.isError.value || pullQuery.isError.value || commentsQuery.isError.value,
-);
-const errorMessage = computed(() => {
-  const error = 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.value}/${repoName.value}?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";
-}
+  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 {
+    useRepoRecord,
+    useDefaultBranch,
+    usePullRequestDetail,
+    usePullRequestComments,
+  } from "@/services/tangled/queries.js";
+  import type { RepoAssetContext } from "@/services/tangled/repo-assets.js";
+
+  const route = useRoute();
+  const owner = computed(() => String(route.params.owner ?? ""));
+  const repoName = computed(() => String(route.params.repo ?? ""));
+  const pullId = computed(() => String(route.params.pullId ?? ""));
+
+  const repoQuery = useRepoRecord(owner, repoName, { enabled: computed(() => !!owner.value && !!repoName.value) });
+  const branchQuery = useDefaultBranch(owner, repoName, { enabled: computed(() => !!owner.value && !!repoName.value) });
+  const repoAtUri = computed(() => repoQuery.data.value?.atUri ?? "");
+  const markdownContext = computed<RepoAssetContext | undefined>(() => {
+    if (!owner.value || !repoName.value || !branchQuery.data.value?.name) return undefined;
+
+    return { owner: owner.value, repo: repoName.value, branch: branchQuery.data.value.name };
+  });
+
+  const pullQuery = usePullRequestDetail(owner, pullId, { enabled: computed(() => !!owner.value && !!pullId.value) });
+  const commentsQuery = usePullRequestComments(owner, pullId, {
+    enabled: computed(() => !!owner.value && !!pullId.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(
+    () => repoQuery.isPending.value || pullQuery.isPending.value || commentsQuery.isPending.value,
+  );
+  const isError = computed(() => repoQuery.isError.value || pullQuery.isError.value || commentsQuery.isError.value);
+  const errorMessage = computed(() => {
+    const error = 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.value}/${repoName.value}?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);
-}
+  .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/apps/twisted/src/features/repo/RepoDetailPage.vue b/apps/twisted/src/features/repo/RepoDetailPage.vue
index af3795d..23e9370 100644
--- a/apps/twisted/src/features/repo/RepoDetailPage.vue
+++ b/apps/twisted/src/features/repo/RepoDetailPage.vue
@@ -43,11 +43,7 @@
           :repo="repo"
           :commits="commits"
           :markdown-context="markdownContext" />
-        <RepoFiles
-          v-else-if="segment === 'files'"
-          :owner="owner"
-          :repo="repoName"
-          :branch="defaultBranch" />
+        <RepoFiles v-else-if="segment === 'files'" :owner="owner" :repo="repoName" :branch="defaultBranch" />
         <RepoIssues
           v-else-if="segment === 'issues'"
           :issues="issues"
@@ -64,149 +60,144 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import {
-  IonPage,
-  IonHeader,
-  IonToolbar,
-  IonTitle,
-  IonContent,
-  IonButtons,
-  IonBackButton,
-  IonSegment,
-  IonSegmentButton,
-} from "@ionic/vue";
-import { alertCircleOutline } from "ionicons/icons";
-import SkeletonLoader from "@/components/common/SkeletonLoader.vue";
-import EmptyState from "@/components/common/EmptyState.vue";
-import RepoOverview from "./RepoOverview.vue";
-import RepoFiles from "./RepoFiles.vue";
-import RepoIssues from "./RepoIssues.vue";
-import RepoPRs from "./RepoPRs.vue";
-import {
-  useRepoRecord,
-  useDefaultBranch,
-  useRepoBlob,
-  useRepoLanguages,
-  useRepoLog,
-  useRepoIssues,
-  useRepoPRs,
-} from "@/services/tangled/queries.js";
-import { useRepoStarCount } from "@/services/constellation/queries.js";
-import type { RepoDetail } from "@/domain/models/repo.js";
-import type { RepoAssetContext } from "@/services/tangled/repo-assets.js";
-
-const route = useRoute();
-const router = useRouter();
-const owner = computed(() => String(route.params.owner ?? ""));
-const repoName = computed(() => String(route.params.repo ?? ""));
-
-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;
+  import { ref, computed, watch } from "vue";
+  import { useRoute, useRouter } from "vue-router";
+  import {
+    IonPage,
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonButtons,
+    IonBackButton,
+    IonSegment,
+    IonSegmentButton,
+  } from "@ionic/vue";
+  import { alertCircleOutline } from "ionicons/icons";
+  import SkeletonLoader from "@/components/common/SkeletonLoader.vue";
+  import EmptyState from "@/components/common/EmptyState.vue";
+  import RepoOverview from "./RepoOverview.vue";
+  import RepoFiles from "./RepoFiles.vue";
+  import RepoIssues from "./RepoIssues.vue";
+  import RepoPRs from "./RepoPRs.vue";
+  import {
+    useRepoRecord,
+    useDefaultBranch,
+    useRepoBlob,
+    useRepoLanguages,
+    useRepoLog,
+    useRepoIssues,
+    useRepoPRs,
+  } from "@/services/tangled/queries.js";
+  import { useRepoStarCount } from "@/services/constellation/queries.js";
+  import type { RepoDetail } from "@/domain/models/repo.js";
+  import type { RepoAssetContext } from "@/services/tangled/repo-assets.js";
+
+  const route = useRoute();
+  const router = useRouter();
+  const owner = computed(() => String(route.params.owner ?? ""));
+  const repoName = computed(() => String(route.params.repo ?? ""));
+
+  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 recordQuery = useRepoRecord(owner, repoName, { enabled: computed(() => !!owner.value && !!repoName.value) });
+  const hasRecord = computed(() => !!recordQuery.data.value);
+
+  const branchQuery = useDefaultBranch(owner, repoName, { enabled: hasRecord });
+  const defaultBranch = computed(() => branchQuery.data.value?.name ?? "");
+  const hasBranch = computed(() => !!branchQuery.data.value?.name);
+  const markdownContext = computed<RepoAssetContext | undefined>(() => {
+    if (!owner.value || !repoName.value || !defaultBranch.value) return undefined;
+
+    return { owner: owner.value, repo: repoName.value, branch: defaultBranch.value, sourcePath: "README.md" };
+  });
+
+  const languagesQuery = useRepoLanguages(owner, repoName, undefined, { enabled: hasBranch });
+  const readmeQuery = useRepoBlob(owner, repoName, defaultBranch, "README.md", { readme: true, enabled: hasBranch });
+  const logQuery = useRepoLog(owner, repoName, defaultBranch, { limit: 20, enabled: hasBranch });
+
+  const repo = computed((): RepoDetail | undefined => {
+    const rec = recordQuery.data.value;
+    if (!rec) return undefined;
+    return {
+      ...rec,
+      stars: starCountQuery.data.value ?? rec.stars,
+      defaultBranch: defaultBranch.value || undefined,
+      languages: languagesQuery.data.value,
+      readme: readmeQuery.data.value?.isBinary ? undefined : readmeQuery.data.value?.content,
+    };
+  });
+
+  const repoAtUri = computed(() => recordQuery.data.value?.atUri ?? "");
+  const hasAtUri = computed(() => !!repoAtUri.value);
+
+  const starCountQuery = useRepoStarCount(repoAtUri, { enabled: hasAtUri });
+
+  const issuesQuery = useRepoIssues(owner, repoName, { enabled: hasAtUri });
+  const prsQuery = useRepoPRs(owner, repoName, { enabled: hasAtUri });
+
+  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(() => recordQuery.isPending.value);
+  const isError = computed(() => recordQuery.isError.value);
+  const errorMessage = computed(() => {
+    const err = recordQuery.error.value;
+    return err instanceof Error ? err.message : "An unexpected error occurred.";
+  });
+
+  function openIssue(issue: { rkey: string }) {
+    router.push(`${tabPrefix.value}/repo/${owner.value}/${repoName.value}/issues/${issue.rkey}?tab=issues`);
+  }
+
+  function openPullRequest(pr: { rkey: string }) {
+    router.push(`${tabPrefix.value}/repo/${owner.value}/${repoName.value}/pulls/${pr.rkey}?tab=prs`);
   }
-  router.replace({ path: route.path, query: nextQuery });
-});
-
-const recordQuery = useRepoRecord(owner, repoName, { enabled: computed(() => !!owner.value && !!repoName.value) });
-const hasRecord = computed(() => !!recordQuery.data.value);
-
-const branchQuery = useDefaultBranch(owner, repoName, { enabled: hasRecord });
-const defaultBranch = computed(() => branchQuery.data.value?.name ?? "");
-const hasBranch = computed(() => !!branchQuery.data.value?.name);
-const markdownContext = computed<RepoAssetContext | undefined>(() => {
-  if (!owner.value || !repoName.value || !defaultBranch.value) return undefined;
-
-  return {
-    owner: owner.value,
-    repo: repoName.value,
-    branch: defaultBranch.value,
-    sourcePath: "README.md",
-  };
-});
-
-const languagesQuery = useRepoLanguages(owner, repoName, undefined, { enabled: hasBranch });
-const readmeQuery = useRepoBlob(owner, repoName, defaultBranch, "README.md", { readme: true, enabled: hasBranch });
-const logQuery = useRepoLog(owner, repoName, defaultBranch, { limit: 20, enabled: hasBranch });
-
-const repo = computed((): RepoDetail | undefined => {
-  const rec = recordQuery.data.value;
-  if (!rec) return undefined;
-  return {
-    ...rec,
-    stars: starCountQuery.data.value ?? rec.stars,
-    defaultBranch: defaultBranch.value || undefined,
-    languages: languagesQuery.data.value,
-    readme: readmeQuery.data.value?.isBinary ? undefined : readmeQuery.data.value?.content,
-  };
-});
-
-const repoAtUri = computed(() => recordQuery.data.value?.atUri ?? "");
-const hasAtUri = computed(() => !!repoAtUri.value);
-
-const starCountQuery = useRepoStarCount(repoAtUri, { enabled: hasAtUri });
-
-const issuesQuery = useRepoIssues(owner, repoName, { enabled: hasAtUri });
-const prsQuery = useRepoPRs(owner, repoName, { enabled: hasAtUri });
-
-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(() => recordQuery.isPending.value);
-const isError = computed(() => recordQuery.isError.value);
-const errorMessage = computed(() => {
-  const err = recordQuery.error.value;
-  return err instanceof Error ? err.message : "An unexpected error occurred.";
-});
-
-function openIssue(issue: { rkey: string }) {
-  router.push(`${tabPrefix.value}/repo/${owner.value}/${repoName.value}/issues/${issue.rkey}?tab=issues`);
-}
-
-function openPullRequest(pr: { rkey: string }) {
-  router.push(`${tabPrefix.value}/repo/${owner.value}/${repoName.value}/pulls/${pr.rkey}?tab=prs`);
-}
 </script>
 
 <style scoped>
-.repo-title {
-  font-family: var(--t-mono);
-  font-size: 14px;
-}
-
-.owner {
-  color: var(--t-text-muted);
-  font-weight: 400;
-}
-
-.detail-segment {
-  padding: 0 12px 6px;
-}
+  .repo-title {
+    font-family: var(--t-mono);
+    font-size: 14px;
+  }
+
+  .owner {
+    color: var(--t-text-muted);
+    font-weight: 400;
+  }
+
+  .detail-segment {
+    padding: 0 12px 6px;
+  }
 </style>
diff --git a/apps/twisted/src/features/repo/RepoFiles.vue b/apps/twisted/src/features/repo/RepoFiles.vue
index 9ded590..1af6f5c 100644
--- a/apps/twisted/src/features/repo/RepoFiles.vue
+++ b/apps/twisted/src/features/repo/RepoFiles.vue
@@ -36,10 +36,7 @@
               {{ formatSize(blobQuery.data.value.size) }}
             </span>
           </div>
-          <div
-            v-if="highlightedHtml"
-            class="file-content shiki-wrap"
-            v-html="highlightedHtml" />
+          <div v-if="highlightedHtml" class="file-content shiki-wrap" v-html="highlightedHtml" />
           <pre v-else class="file-content"><code>{{ blobQuery.data.value.content }}</code></pre>
         </div>
       </template>
@@ -67,229 +64,229 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, onBeforeUnmount } from "vue";
-import { IonList, IonButton, IonIcon } from "@ionic/vue";
-import { folderOpenOutline, alertCircleOutline, arrowBackOutline, documentOutline } from "ionicons/icons";
-import FileTreeItem from "@/components/repo/FileTreeItem.vue";
-import EmptyState from "@/components/common/EmptyState.vue";
-import SkeletonLoader from "@/components/common/SkeletonLoader.vue";
-import { useRepoBlob, useRepoTree } from "@/services/tangled/queries.js";
-import type { RepoFile } from "@/domain/models/repo.js";
-import { highlightCode } from "@/lib/syntax.js";
-import { createObjectUrlFromBlobContent } from "@/services/tangled/repo-assets.js";
-
-const props = defineProps<{ owner: string; repo: string; branch: string }>();
-
-const selectedFile = ref<RepoFile | null>(null);
-const currentPath = ref("");
-
-const treeQuery = useRepoTree(
-  computed(() => props.owner),
-  computed(() => props.repo),
-  computed(() => props.branch),
-  currentPath,
-  { enabled: computed(() => !!props.owner && !!props.repo && !!props.branch) },
-);
-
-const sortedFiles = computed(() => {
-  const files = treeQuery.data.value ?? [];
-  return [...files].sort((a, b) => {
-    if (a.type === b.type) return a.name.localeCompare(b.name);
-    if (a.type === "dir") return -1;
-    if (b.type === "dir") return 1;
-    if (a.type === "submodule") return -1;
-    if (b.type === "submodule") return 1;
-    return 0;
+  import { ref, computed, watch, onBeforeUnmount } from "vue";
+  import { IonList, IonButton, IonIcon } from "@ionic/vue";
+  import { folderOpenOutline, alertCircleOutline, arrowBackOutline, documentOutline } from "ionicons/icons";
+  import FileTreeItem from "@/components/repo/FileTreeItem.vue";
+  import EmptyState from "@/components/common/EmptyState.vue";
+  import SkeletonLoader from "@/components/common/SkeletonLoader.vue";
+  import { useRepoBlob, useRepoTree } from "@/services/tangled/queries.js";
+  import type { RepoFile } from "@/domain/models/repo.js";
+  import { highlightCode } from "@/lib/syntax.js";
+  import { createObjectUrlFromBlobContent } from "@/services/tangled/repo-assets.js";
+
+  const props = defineProps<{ owner: string; repo: string; branch: string }>();
+
+  const selectedFile = ref<RepoFile | null>(null);
+  const currentPath = ref("");
+
+  const treeQuery = useRepoTree(
+    computed(() => props.owner),
+    computed(() => props.repo),
+    computed(() => props.branch),
+    currentPath,
+    { enabled: computed(() => !!props.owner && !!props.repo && !!props.branch) },
+  );
+
+  const sortedFiles = computed(() => {
+    const files = treeQuery.data.value ?? [];
+    return [...files].sort((a, b) => {
+      if (a.type === b.type) return a.name.localeCompare(b.name);
+      if (a.type === "dir") return -1;
+      if (b.type === "dir") return 1;
+      if (a.type === "submodule") return -1;
+      if (b.type === "submodule") return 1;
+      return 0;
+    });
   });
-});
-
-const filePath = computed(() => selectedFile.value?.path ?? "");
-const isFileSelected = computed(() => !!selectedFile.value && selectedFile.value.type === "file");
-
-const blobQuery = useRepoBlob(
-  computed(() => props.owner),
-  computed(() => props.repo),
-  computed(() => props.branch),
-  filePath,
-  { enabled: isFileSelected },
-);
-
-function handleFileClick(file: RepoFile) {
-  if (file.type === "dir") {
-    currentPath.value = file.path;
-    selectedFile.value = null;
-    return;
-  }
 
-  if (file.type === "submodule") return;
+  const filePath = computed(() => selectedFile.value?.path ?? "");
+  const isFileSelected = computed(() => !!selectedFile.value && selectedFile.value.type === "file");
+
+  const blobQuery = useRepoBlob(
+    computed(() => props.owner),
+    computed(() => props.repo),
+    computed(() => props.branch),
+    filePath,
+    { enabled: isFileSelected },
+  );
+
+  function handleFileClick(file: RepoFile) {
+    if (file.type === "dir") {
+      currentPath.value = file.path;
+      selectedFile.value = null;
+      return;
+    }
+
+    if (file.type === "submodule") return;
 
-  selectedFile.value = file;
-}
+    selectedFile.value = file;
+  }
+
+  function goBack() {
+    if (selectedFile.value) {
+      selectedFile.value = null;
+      return;
+    }
 
-function goBack() {
-  if (selectedFile.value) {
-    selectedFile.value = null;
-    return;
+    if (!currentPath.value) return;
+    const segments = currentPath.value.split("/").filter(Boolean);
+    segments.pop();
+    currentPath.value = segments.join("/");
   }
 
-  if (!currentPath.value) return;
-  const segments = currentPath.value.split("/").filter(Boolean);
-  segments.pop();
-  currentPath.value = segments.join("/");
-}
-
-const highlightedHtml = ref<string | null>(null);
-const binaryPreviewUrl = ref<string | null>(null);
-
-watch(
-  () => [blobQuery.data.value?.content, selectedFile.value?.name] as const,
-  async ([content, name]) => {
-    highlightedHtml.value = null;
-    if (!content || !name) return;
-    highlightedHtml.value = await highlightCode(content, name);
-  },
-  { immediate: true },
-);
-
-watch(
-  () => blobQuery.data.value,
-  (blob) => {
+  const highlightedHtml = ref<string | null>(null);
+  const binaryPreviewUrl = ref<string | null>(null);
+
+  watch(
+    () => [blobQuery.data.value?.content, selectedFile.value?.name] as const,
+    async ([content, name]) => {
+      highlightedHtml.value = null;
+      if (!content || !name) return;
+      highlightedHtml.value = await highlightCode(content, name);
+    },
+    { immediate: true },
+  );
+
+  watch(
+    () => blobQuery.data.value,
+    (blob) => {
+      if (binaryPreviewUrl.value) {
+        URL.revokeObjectURL(binaryPreviewUrl.value);
+        binaryPreviewUrl.value = null;
+      }
+
+      if (!blob) return;
+      binaryPreviewUrl.value = createObjectUrlFromBlobContent(blob);
+    },
+    { immediate: true },
+  );
+
+  onBeforeUnmount(() => {
     if (binaryPreviewUrl.value) {
       URL.revokeObjectURL(binaryPreviewUrl.value);
-      binaryPreviewUrl.value = null;
     }
+  });
 
-    if (!blob) return;
-    binaryPreviewUrl.value = createObjectUrlFromBlobContent(blob);
-  },
-  { immediate: true },
-);
-
-onBeforeUnmount(() => {
-  if (binaryPreviewUrl.value) {
-    URL.revokeObjectURL(binaryPreviewUrl.value);
+  function formatSize(bytes: number): string {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
   }
-});
-
-function formatSize(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
 </script>
 
 <style scoped>
-.files-view {
-  padding-bottom: 32px;
-}
-
-.file-list {
-  background: transparent;
-  padding: 8px 0;
-}
-
-.viewer-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 8px 4px;
-  border-bottom: 1px solid var(--t-border);
-}
-
-.back-btn {
-  --color: var(--t-accent);
-  flex-shrink: 0;
-}
-
-.file-path {
-  font-family: var(--t-mono);
-  font-size: 12px;
-  color: var(--t-text-secondary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.file-content-wrap {
-  overflow: auto;
-}
-
-.image-preview-wrap {
-  display: flex;
-  flex-direction: column;
-}
-
-.image-preview {
-  display: block;
-  width: 100%;
-  height: auto;
-  object-fit: contain;
-  background: var(--t-surface-raised);
-}
-
-.file-meta {
-  padding: 6px 16px;
-  border-bottom: 1px solid var(--t-border);
-  display: flex;
-  justify-content: flex-end;
-}
-
-.file-size {
-  font-size: 11px;
-  color: var(--t-text-muted);
-  font-family: var(--t-mono);
-}
-
-.file-content {
-  margin: 0;
-  padding: 16px;
-  font-family: var(--t-mono);
-  font-size: 12px;
-  line-height: 1.6;
-  color: var(--t-text-secondary);
-  white-space: pre;
-  overflow-x: auto;
-  tab-size: 2;
-}
-
-.binary-notice {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 24px 16px;
-  font-size: 14px;
-  color: var(--t-text-muted);
-}
-
-.binary-icon {
-  font-size: 20px;
-}
-
-.shiki-wrap :deep(.shiki) {
-  margin: 0;
-  padding: 16px;
-  font-family: var(--t-mono);
-  font-size: 12px;
-  line-height: 1.6;
-  tab-size: 2;
-  overflow-x: auto;
-  background: transparent !important;
-}
-
-.shiki-wrap :deep(.shiki code) {
-  font-family: inherit;
-  font-size: inherit;
-  background: transparent !important;
-}
-
-/* Dual-theme: light tokens visible by default, dark tokens on dark scheme */
-.shiki-wrap :deep(.shiki span) {
-  color: var(--shiki-light);
-}
-
-@media (prefers-color-scheme: dark) {
+  .files-view {
+    padding-bottom: 32px;
+  }
+
+  .file-list {
+    background: transparent;
+    padding: 8px 0;
+  }
+
+  .viewer-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 8px 4px;
+    border-bottom: 1px solid var(--t-border);
+  }
+
+  .back-btn {
+    --color: var(--t-accent);
+    flex-shrink: 0;
+  }
+
+  .file-path {
+    font-family: var(--t-mono);
+    font-size: 12px;
+    color: var(--t-text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .file-content-wrap {
+    overflow: auto;
+  }
+
+  .image-preview-wrap {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .image-preview {
+    display: block;
+    width: 100%;
+    height: auto;
+    object-fit: contain;
+    background: var(--t-surface-raised);
+  }
+
+  .file-meta {
+    padding: 6px 16px;
+    border-bottom: 1px solid var(--t-border);
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .file-size {
+    font-size: 11px;
+    color: var(--t-text-muted);
+    font-family: var(--t-mono);
+  }
+
+  .file-content {
+    margin: 0;
+    padding: 16px;
+    font-family: var(--t-mono);
+    font-size: 12px;
+    line-height: 1.6;
+    color: var(--t-text-secondary);
+    white-space: pre;
+    overflow-x: auto;
+    tab-size: 2;
+  }
+
+  .binary-notice {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 24px 16px;
+    font-size: 14px;
+    color: var(--t-text-muted);
+  }
+
+  .binary-icon {
+    font-size: 20px;
+  }
+
+  .shiki-wrap :deep(.shiki) {
+    margin: 0;
+    padding: 16px;
+    font-family: var(--t-mono);
+    font-size: 12px;
+    line-height: 1.6;
+    tab-size: 2;
+    overflow-x: auto;
+    background: transparent !important;
+  }
+
+  .shiki-wrap :deep(.shiki code) {
+    font-family: inherit;
+    font-size: inherit;
+    background: transparent !important;
+  }
+
+  /* Dual-theme: light tokens visible by default, dark tokens on dark scheme */
   .shiki-wrap :deep(.shiki span) {
-    color: var(--shiki-dark);
+    color: var(--shiki-light);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .shiki-wrap :deep(.shiki span) {
+      color: var(--shiki-dark);
+    }
   }
-}
 </style>
diff --git a/apps/twisted/src/features/repo/RepoIssues.vue b/apps/twisted/src/features/repo/RepoIssues.vue
index 6c5f61a..2cf9c07 100644
--- a/apps/twisted/src/features/repo/RepoIssues.vue
+++ b/apps/twisted/src/features/repo/RepoIssues.vue
@@ -55,150 +55,150 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue";
-import { IonList, IonItem, IonLabel, IonBadge, IonIcon, IonChip, IonSpinner } from "@ionic/vue";
-import { chatbubbleOutline, alertCircleOutline } from "ionicons/icons";
-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");
-
-const FILTERS = [
-  { value: "open", label: "Open" },
-  { value: "closed", label: "Closed" },
-  { value: "all", label: "All" },
-] as const;
-
-const filtered = computed(() => {
-  if (filter.value === "all") return props.issues;
-  return props.issues.filter((i) => i.state === filter.value);
-});
-
-function relativeTime(iso: string): string {
-  const diff = Date.now() - new Date(iso).getTime();
-  const m = Math.floor(diff / 60000);
-  const h = Math.floor(m / 60);
-  const d = Math.floor(h / 24);
-  if (d > 0) return `${d}d ago`;
-  if (h > 0) return `${h}h ago`;
-  if (m > 0) return `${m}m ago`;
-  return "just now";
-}
+  import { ref, computed } from "vue";
+  import { IonList, IonItem, IonLabel, IonBadge, IonIcon, IonChip, IonSpinner } from "@ionic/vue";
+  import { chatbubbleOutline, alertCircleOutline } from "ionicons/icons";
+  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");
+
+  const FILTERS = [
+    { value: "open", label: "Open" },
+    { value: "closed", label: "Closed" },
+    { value: "all", label: "All" },
+  ] as const;
+
+  const filtered = computed(() => {
+    if (filter.value === "all") return props.issues;
+    return props.issues.filter((i) => i.state === filter.value);
+  });
+
+  function relativeTime(iso: string): string {
+    const diff = Date.now() - new Date(iso).getTime();
+    const m = Math.floor(diff / 60000);
+    const h = Math.floor(m / 60);
+    const d = Math.floor(h / 24);
+    if (d > 0) return `${d}d ago`;
+    if (h > 0) return `${h}h ago`;
+    if (m > 0) return `${m}m ago`;
+    return "just now";
+  }
 </script>
 
 <style scoped>
-.issues-view {
-  padding-bottom: 32px;
-}
-
-.loading-center {
-  display: flex;
-  justify-content: center;
-  padding: 48px 0;
-}
-
-.filters-row {
-  display: flex;
-  gap: 6px;
-  padding: 12px 16px 8px;
-}
-
-.filter-chip {
-  --background: var(--t-surface-raised);
-  --color: var(--t-text-secondary);
-  border: 1px solid var(--t-border);
-  font-size: 13px;
-  margin: 0;
-  cursor: pointer;
-}
-
-.filter-chip.active {
-  --background: var(--t-accent-dim);
-  --color: var(--t-accent);
-  border-color: var(--t-accent);
-}
-
-.issue-list {
-  background: transparent;
-  padding: 0;
-}
-
-.issue-item {
-  --background: transparent;
-  --padding-start: 16px;
-  --inner-padding-end: 12px;
-}
-
-.state-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  flex-shrink: 0;
-  margin-right: 12px;
-}
-
-.state-dot.open {
-  background: var(--t-green);
-}
-.state-dot.closed {
-  background: var(--t-text-muted);
-}
-
-.issue-label {
-  white-space: normal;
-  padding: 10px 0;
-}
-
-.issue-title {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--t-text-primary);
-  display: block;
-  margin-bottom: 4px;
-  line-height: 1.4;
-}
-
-.issue-meta {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 12px;
-  color: var(--t-text-muted);
-  flex-wrap: wrap;
-}
-
-.mono {
-  font-family: var(--t-mono);
-  font-size: 11px;
-  color: var(--t-accent);
-}
-
-.sep {
-  color: var(--t-border-strong);
-}
-
-.meta-icon {
-  font-size: 11px;
-}
-
-.state-badge {
-  font-size: 11px;
-  font-weight: 500;
-  border-radius: 99px;
-  padding: 2px 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);
-}
+  .issues-view {
+    padding-bottom: 32px;
+  }
+
+  .loading-center {
+    display: flex;
+    justify-content: center;
+    padding: 48px 0;
+  }
+
+  .filters-row {
+    display: flex;
+    gap: 6px;
+    padding: 12px 16px 8px;
+  }
+
+  .filter-chip {
+    --background: var(--t-surface-raised);
+    --color: var(--t-text-secondary);
+    border: 1px solid var(--t-border);
+    font-size: 13px;
+    margin: 0;
+    cursor: pointer;
+  }
+
+  .filter-chip.active {
+    --background: var(--t-accent-dim);
+    --color: var(--t-accent);
+    border-color: var(--t-accent);
+  }
+
+  .issue-list {
+    background: transparent;
+    padding: 0;
+  }
+
+  .issue-item {
+    --background: transparent;
+    --padding-start: 16px;
+    --inner-padding-end: 12px;
+  }
+
+  .state-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+    margin-right: 12px;
+  }
+
+  .state-dot.open {
+    background: var(--t-green);
+  }
+  .state-dot.closed {
+    background: var(--t-text-muted);
+  }
+
+  .issue-label {
+    white-space: normal;
+    padding: 10px 0;
+  }
+
+  .issue-title {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--t-text-primary);
+    display: block;
+    margin-bottom: 4px;
+    line-height: 1.4;
+  }
+
+  .issue-meta {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 12px;
+    color: var(--t-text-muted);
+    flex-wrap: wrap;
+  }
+
+  .mono {
+    font-family: var(--t-mono);
+    font-size: 11px;
+    color: var(--t-accent);
+  }
+
+  .sep {
+    color: var(--t-border-strong);
+  }
+
+  .meta-icon {
+    font-size: 11px;
+  }
+
+  .state-badge {
+    font-size: 11px;
+    font-weight: 500;
+    border-radius: 99px;
+    padding: 2px 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/apps/twisted/src/lib/html.ts b/apps/twisted/src/lib/html.ts
index 2e2e2ac..0588565 100644
--- a/apps/twisted/src/lib/html.ts
+++ b/apps/twisted/src/lib/html.ts
@@ -1,9 +1,6 @@
 import DOMPurify from "dompurify";
 
-const SANITIZE_CONFIG = {
-  USE_PROFILES: { html: true },
-  ADD_ATTR: ["class", "style"],
-};
+const SANITIZE_CONFIG = { USE_PROFILES: { html: true }, ADD_ATTR: ["class", "style"] };
 
 export function sanitizeRichHtml(html: string): string {
   return stripHtmlComments(DOMPurify.sanitize(html, SANITIZE_CONFIG));
diff --git a/apps/twisted/src/services/project-api/queries.ts b/apps/twisted/src/services/project-api/queries.ts
index 3298044..382850f 100644
--- a/apps/twisted/src/services/project-api/queries.ts
+++ b/apps/twisted/src/services/project-api/queries.ts
@@ -68,7 +68,10 @@ export type ProjectSearchResults = {
 function stripHighlight(html?: string): string | undefined {
   if (!html) return undefined;
 
-  const text = html.replace(/<[^>]+>/g, " ").replace(/\s+/g, " ").trim();
+  const text = html
+    .replace(/<[^>]+>/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
   return text || undefined;
 }
 
@@ -157,13 +160,7 @@ export function useProjectSearch(
       const repos = response.results.filter((result) => result.record_type === "repo").map(toRepoSummary);
       const profiles = response.results.filter((result) => result.record_type === "profile").map(toUserSummary);
 
-      return {
-        query: response.query,
-        mode: response.mode,
-        total: response.total,
-        repos,
-        profiles,
-      };
+      return { query: response.query, mode: response.mode, total: response.total, repos, profiles };
     },
     enabled,
     staleTime: 2 * MIN,
@@ -171,16 +168,11 @@ export function useProjectSearch(
   });
 }
 
-export function useIndexedProfileSummary(
-  did: MaybeRef<string>,
-  options: { enabled?: MaybeRef<boolean> } = {},
-) {
+export function useIndexedProfileSummary(did: MaybeRef<string>, options: { enabled?: MaybeRef<boolean> } = {}) {
   const normalizedDid = computed(() => toValue(did).trim());
   const enabled = computed(
     () =>
-      hasTwisterApi &&
-      normalizedDid.value.length > 0 &&
-      (options.enabled === undefined || !!toValue(options.enabled)),
+      hasTwisterApi && normalizedDid.value.length > 0 && (options.enabled === undefined || !!toValue(options.enabled)),
   );
 
   return useQuery({
diff --git a/apps/twisted/src/views/HomePage.vue b/apps/twisted/src/views/HomePage.vue
index 5589a2f..10b526d 100644
--- a/apps/twisted/src/views/HomePage.vue
+++ b/apps/twisted/src/views/HomePage.vue
@@ -27,35 +27,35 @@
 </template>
 
 <script setup lang="ts">
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from "@ionic/vue";
+  import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from "@ionic/vue";
 </script>
 
 <style scoped>
-#container {
-  text-align: center;
+  #container {
+    text-align: center;
 
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-}
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
 
-#container strong {
-  font-size: 20px;
-  line-height: 26px;
-}
+  #container strong {
+    font-size: 20px;
+    line-height: 26px;
+  }
 
-#container p {
-  font-size: 16px;
-  line-height: 22px;
+  #container p {
+    font-size: 16px;
+    line-height: 22px;
 
-  color: #8c8c8c;
+    color: #8c8c8c;
 
-  margin: 0;
-}
+    margin: 0;
+  }
 
-#container a {
-  text-decoration: none;
-}
+  #container a {
+    text-decoration: none;
+  }
 </style>
diff --git a/apps/twisted/src/vite-env.d.ts b/apps/twisted/src/vite-env.d.ts
index ed63eda..e0b3aa5 100644
--- a/apps/twisted/src/vite-env.d.ts
+++ b/apps/twisted/src/vite-env.d.ts
@@ -16,11 +16,7 @@ declare module "markdown-it" {
     use(plugin: (...args: any[]) => unknown, ...params: any[]): MarkdownIt;
   };
 
-  type MarkdownItOptions = {
-    html?: boolean;
-    linkify?: boolean;
-    typographer?: boolean;
-  };
+  type MarkdownItOptions = { html?: boolean; linkify?: boolean; typographer?: boolean };
 
   const markdownit: (options?: MarkdownItOptions) => MarkdownIt;
   export default markdownit;
-- 
2.51.2