feat: components and pages (placeholders)

README.md

···
+# Twisted
+
+A mobile client for [Tangled](https://tangled.org).

docs/tasks/phase-1.md

···
 
 ## Design System Components
 
-- [ ] `components/common/RepoCard.vue` — compact repo summary (name, owner, description, language, stars)
-- [ ] `components/common/UserCard.vue` — avatar + handle + bio snippet
-- [ ] `components/common/ActivityCard.vue` — icon + actor + verb + target + relative timestamp
-- [ ] `components/common/EmptyState.vue` — icon + message + optional action button
-- [ ] `components/common/ErrorBoundary.vue` — catch errors, show retry UI
-- [ ] `components/common/SkeletonLoader.vue` — shimmer placeholders (variants: card, list-item, profile)
-- [ ] `components/repo/FileTreeItem.vue` — file/dir icon + name
-- [ ] `components/repo/MarkdownRenderer.vue` — render markdown to HTML (stub with basic styling)
+- [x] `components/common/RepoCard.vue` — compact repo summary (name, owner, description, language, stars)
+- [x] `components/common/UserCard.vue` — avatar + handle + bio snippet
+- [x] `components/common/ActivityCard.vue` — icon + actor + verb + target + relative timestamp
+- [x] `components/common/EmptyState.vue` — icon + message + optional action button
+- [x] `components/common/ErrorBoundary.vue` — catch errors, show retry UI
+- [x] `components/common/SkeletonLoader.vue` — shimmer placeholders (variants: card, list-item, profile)
+- [x] `components/repo/FileTreeItem.vue` — file/dir icon + name
+- [x] `components/repo/MarkdownRenderer.vue` — render markdown to HTML (stub with basic styling)
 
 ## Feature Pages (placeholder with mock data)
 
-- [ ] `features/home/HomePage.vue` — trending repos list, recent activity list
-- [ ] `features/explore/ExplorePage.vue` — search bar (non-functional), repo/user tabs, repo list
-- [ ] `features/repo/RepoDetailPage.vue` — segmented layout: Overview, Files, Issues, PRs
-- [ ] `features/repo/RepoOverview.vue` — header, description, README placeholder, stats
-- [ ] `features/repo/RepoFiles.vue` — file tree list from mock data
-- [ ] `features/repo/RepoIssues.vue` — issue list from mock data
-- [ ] `features/repo/RepoPRs.vue` — PR list from mock data
-- [ ] `features/activity/ActivityPage.vue` — filter chips + activity card list
-- [ ] `features/profile/ProfilePage.vue` — sign-in prompt (unauthenticated state)
+- [x] `features/home/HomePage.vue` — trending repos list, recent activity list
+- [x] `features/explore/ExplorePage.vue` — search bar (non-functional), repo/user tabs, repo list
+- [x] `features/repo/RepoDetailPage.vue` — segmented layout: Overview, Files, Issues, PRs
+- [x] `features/repo/RepoOverview.vue` — header, description, README placeholder, stats
+- [x] `features/repo/RepoFiles.vue` — file tree list from mock data
+- [x] `features/repo/RepoIssues.vue` — issue list from mock data
+- [x] `features/repo/RepoPRs.vue` — PR list from mock data
+- [x] `features/activity/ActivityPage.vue` — filter chips + activity card list
+- [x] `features/profile/ProfilePage.vue` — sign-in prompt (unauthenticated state)
 
 ## Quality
 

src/app/router/index.ts

···
-import { createRouter, createWebHistory } from '@ionic/vue-router';
-import type { RouteRecordRaw } from 'vue-router';
+import { createRouter, createWebHistory } from "@ionic/vue-router";
+import type { RouteRecordRaw } from "vue-router";
 
-import TabsPage from '@/views/TabsPage.vue';
+import TabsPage from "@/views/TabsPage.vue";
 
 const routes: RouteRecordRaw[] = [
-  {
-    path: '/',
-    redirect: '/tabs/home',
-  },
+  { path: "/", redirect: "/tabs/home" },
   {
-    path: '/tabs/',
+    path: "/tabs/",
     component: TabsPage,
     children: [
-      {
-        path: '',
-        redirect: '/tabs/home',
-      },
-      {
-        path: 'home',
-        children: [
-          {
-            path: '',
-            component: () => import('@/features/home/HomePage.vue'),
-          },
-          {
-            path: 'repo/:owner/:repo',
-            component: () => import('@/features/repo/RepoDetailPage.vue'),
-          },
-        ],
-      },
-      {
-        path: 'explore',
-        children: [
-          {
-            path: '',
-            component: () => import('@/features/explore/ExplorePage.vue'),
-          },
-          {
-            path: 'repo/:owner/:repo',
-            component: () => import('@/features/repo/RepoDetailPage.vue'),
-          },
-        ],
-      },
-      {
-        path: 'activity',
-        children: [
-          {
-            path: '',
-            component: () => import('@/features/activity/ActivityPage.vue'),
-          },
-          {
-            path: 'repo/:owner/:repo',
-            component: () => import('@/features/repo/RepoDetailPage.vue'),
-          },
-        ],
-      },
-      {
-        path: 'profile',
-        children: [
-          {
-            path: '',
-            component: () => import('@/features/profile/ProfilePage.vue'),
-          },
-        ],
-      },
+      { path: "", redirect: "/tabs/home" },
+      { path: "home", component: () => import("@/features/home/HomePage.vue") },
+      { path: "home/repo/:owner/:repo", component: () => import("@/features/repo/RepoDetailPage.vue") },
+      { path: "explore", component: () => import("@/features/explore/ExplorePage.vue") },
+      { path: "explore/repo/:owner/:repo", component: () => import("@/features/repo/RepoDetailPage.vue") },
+      { path: "activity", component: () => import("@/features/activity/ActivityPage.vue") },
+      { path: "activity/repo/:owner/:repo", component: () => import("@/features/repo/RepoDetailPage.vue") },
+      { path: "profile", component: () => import("@/features/profile/ProfilePage.vue") },
     ],
   },
 ];
 
-const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes,
-});
+const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes });
 
 export default router;

src/components/common/ActivityCard.vue

···
+<template>
+  <ion-item class="activity-item" lines="none" button @click="emit('click')">
+    <div slot="start" class="kind-icon" :style="{ color: config.color, background: config.dimColor }">
+      <ion-icon :icon="config.icon" />
+    </div>
+
+    <ion-label class="activity-label">
+      <div class="activity-text">
+        <span class="actor">{{ item.actorHandle }}</span>
+        <span class="verb"> {{ config.verb }} </span>
+        <span v-if="item.targetName" class="target">{{ item.targetName }}</span>
+      </div>
+      <div class="activity-time">{{ relativeTime(item.createdAt) }}</div>
+    </ion-label>
+  </ion-item>
+</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";
+
+const props = defineProps<{ item: ActivityItem }>();
+const emit = defineEmits<{ click: [] }>();
+
+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 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";
+}
+</script>
+
+<style scoped>
+.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;
+}
+
+.activity-label {
+  padding: 10px 0;
+  white-space: normal;
+}
+
+.activity-text {
+  font-size: 13px;
+  line-height: 1.45;
+  color: var(--t-text-secondary);
+}
+
+.actor {
+  font-family: var(--t-mono);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--t-accent);
+}
+
+.verb {
+  color: var(--t-text-secondary);
+}
+
+.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;
+}
+</style>

src/components/common/EmptyState.vue

···
+<template>
+  <div class="empty-state">
+    <div class="icon-wrap">
+      <ion-icon :icon="icon" class="empty-icon" />
+    </div>
+    <h3 class="empty-title">{{ title }}</h3>
+    <p v-if="message" class="empty-message">{{ message }}</p>
+    <ion-button v-if="actionLabel" class="empty-action" fill="outline" size="small" @click="emit('action')">
+      {{ actionLabel }}
+    </ion-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { IonIcon, IonButton } from "@ionic/vue";
+
+defineProps<{ icon: string; title: string; message?: string; actionLabel?: string }>();
+
+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;
+}
+
+.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-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-action {
+  --color: var(--t-accent);
+  --border-color: var(--t-accent);
+  margin-top: 6px;
+}
+</style>

src/components/common/ErrorBoundary.vue

···
+<template>
+  <template v-if="error">
+    <div class="error-state">
+      <div class="error-icon-wrap">
+        <ion-icon :icon="alertCircleOutline" class="error-icon" />
+      </div>
+      <h3 class="error-title">Something went wrong</h3>
+      <p class="error-message">{{ error.message }}</p>
+      <ion-button class="retry-btn" fill="outline" size="small" @click="retry">
+        <ion-icon slot="start" :icon="refreshOutline" />
+        Try again
+      </ion-button>
+    </div>
+  </template>
+  <template v-else>
+    <slot />
+  </template>
+</template>
+
+<script setup lang="ts">
+import { ref, onErrorCaptured } from "vue";
+import { IonIcon, IonButton } from "@ionic/vue";
+import { alertCircleOutline, refreshOutline } from "ionicons/icons";
+
+const error = ref<Error | null>(null);
+
+onErrorCaptured((err) => {
+  error.value = err instanceof Error ? err : new Error(String(err));
+  return false;
+});
+
+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-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-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);
+}
+
+.retry-btn {
+  --color: var(--t-red);
+  --border-color: var(--t-red);
+  margin-top: 6px;
+}
+</style>

src/components/common/RepoCard.vue

···
+<template>
+  <ion-card class="repo-card" button @click="emit('click')">
+    <ion-card-content class="card-body">
+      <div class="repo-header">
+        <span class="repo-owner">{{ repo.ownerHandle }}/</span><span class="repo-name">{{ repo.name }}</span>
+        <div v-if="repo.stars != null" class="stars">
+          <ion-icon :icon="starOutline" class="star-icon" />
+          <span class="star-count">{{ formatCount(repo.stars) }}</span>
+        </div>
+      </div>
+
+      <p v-if="repo.description" class="repo-description">{{ repo.description }}</p>
+
+      <div class="repo-meta">
+        <span v-if="repo.primaryLanguage" class="lang-badge">
+          <span class="lang-dot" :style="{ background: langColor(repo.primaryLanguage) }" />
+          {{ repo.primaryLanguage }}
+        </span>
+        <span v-if="repo.updatedAt" class="meta-dot">·</span>
+        <span v-if="repo.updatedAt" class="updated-at">{{ relativeTime(repo.updatedAt) }}</span>
+      </div>
+    </ion-card-content>
+  </ion-card>
+</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: [] }>();
+
+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 {
+  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>

src/components/common/SkeletonLoader.vue

···
+<template>
+  <!-- card variant -->
+  <ion-card v-if="variant === 'card'" class="skeleton-card">
+    <ion-card-content class="card-body">
+      <div class="row space-between">
+        <ion-skeleton-text animated class="skel skel-title" />
+        <ion-skeleton-text animated class="skel skel-stars" />
+      </div>
+      <ion-skeleton-text animated class="skel skel-desc" />
+      <ion-skeleton-text animated class="skel skel-desc-short" />
+      <div class="row">
+        <ion-skeleton-text animated class="skel skel-badge" />
+        <ion-skeleton-text animated class="skel skel-time" />
+      </div>
+    </ion-card-content>
+  </ion-card>
+
+  <!-- list-item variant -->
+  <ion-item v-else-if="variant === 'list-item'" class="skeleton-item" lines="none">
+    <ion-skeleton-text animated slot="start" class="skel skel-avatar" />
+    <ion-label>
+      <ion-skeleton-text animated class="skel skel-item-title" />
+      <ion-skeleton-text animated class="skel skel-item-sub" />
+    </ion-label>
+  </ion-item>
+
+  <!-- profile variant -->
+  <div v-else-if="variant === 'profile'" class="skeleton-profile">
+    <ion-skeleton-text animated class="skel skel-profile-avatar" />
+    <div class="profile-lines">
+      <ion-skeleton-text animated class="skel skel-profile-handle" />
+      <ion-skeleton-text animated class="skel skel-profile-name" />
+      <ion-skeleton-text animated class="skel skel-profile-bio" />
+      <ion-skeleton-text animated class="skel skel-profile-bio-short" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { IonCard, IonCardContent, IonItem, IonLabel, IonSkeletonText } from "@ionic/vue";
+
+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%;
+}
+</style>

src/components/common/UserCard.vue

···
+<template>
+  <ion-card class="user-card" button @click="emit('click')">
+    <ion-card-content class="card-body">
+      <div class="user-row">
+        <ion-avatar class="avatar">
+          <img v-if="user.avatar" :src="user.avatar" :alt="user.displayName ?? user.handle" />
+          <div v-else class="avatar-fallback" :style="{ background: avatarColor(user.handle) }">
+            {{ initials(user.handle) }}
+          </div>
+        </ion-avatar>
+
+        <div class="user-info">
+          <div class="user-handle">{{ user.handle }}</div>
+          <div v-if="user.displayName" class="user-display-name">{{ user.displayName }}</div>
+          <p v-if="user.bio" class="user-bio">{{ user.bio }}</p>
+        </div>
+      </div>
+
+      <div v-if="user.followerCount != null || user.followingCount != null" class="user-stats">
+        <span v-if="user.followerCount != null" class="stat">
+          <strong>{{ formatCount(user.followerCount) }}</strong> followers
+        </span>
+        <span v-if="user.followingCount != null" class="stat">
+          <strong>{{ formatCount(user.followingCount) }}</strong> following
+        </span>
+      </div>
+    </ion-card-content>
+  </ion-card>
+</template>
+
+<script setup lang="ts">
+import { IonCard, IonCardContent, IonAvatar } from "@ionic/vue";
+import type { UserSummary } from "@/domain/models/user";
+
+defineProps<{ user: UserSummary }>();
+const emit = defineEmits<{ click: [] }>();
+
+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 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);
+}
+</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-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>

src/components/repo/FileTreeItem.vue

···
+<template>
+  <ion-item class="file-item" :lines="lines" button @click="emit('click')">
+    <ion-icon
+      slot="start"
+      :icon="file.type === 'dir' ? folderOutline : documentOutline"
+      class="file-icon"
+      :class="file.type" />
+    <ion-label class="file-label">
+      <span class="file-name">{{ file.name }}</span>
+      <span v-if="file.lastCommitMessage" class="commit-msg">{{ file.lastCommitMessage }}</span>
+    </ion-label>
+    <span v-if="file.type === 'dir'" class="chevron">
+      <ion-icon :icon="chevronForwardOutline" />
+    </span>
+  </ion-item>
+</template>
+
+<script setup lang="ts">
+import { IonItem, IonLabel, IonIcon } from "@ionic/vue";
+import { folderOutline, documentOutline, chevronForwardOutline } from "ionicons/icons";
+import type { RepoFile } from "@/domain/models/repo";
+
+defineProps<{ file: RepoFile; lines?: "full" | "inset" | "none" }>();
+
+const emit = defineEmits<{ click: [] }>();
+</script>
+
+<style scoped>
+.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.dir {
+  color: var(--t-amber);
+}
+
+.file-icon.file {
+  color: var(--t-text-muted);
+}
+
+.file-icon.submodule {
+  color: var(--t-purple);
+}
+
+.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%;
+}
+
+.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;
+}
+</style>

src/components/repo/MarkdownRenderer.vue

···
+<!-- TODO: markdown → HTML pipeline (e.g. marked + DOMPurify). -->
+<template>
+  <div class="markdown-body">
+    <pre class="markdown-raw">{{ content }}</pre>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{ content: string }>();
+</script>
+
+<style scoped>
+.markdown-body {
+  padding: 0 16px 24px;
+}
+
+.markdown-raw {
+  font-family: var(--t-mono);
+  font-size: 12px;
+  color: var(--t-text-secondary);
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+  margin: 0;
+  background: var(--t-surface-raised);
+  border: 1px solid var(--t-border);
+  border-radius: var(--t-radius-md);
+  padding: 14px 16px;
+  overflow-x: auto;
+}
+</style>

src/features/activity/ActivityPage.vue

···
         <ion-title>Activity</ion-title>
       </ion-toolbar>
     </ion-header>
+
     <ion-content :fullscreen="true">
       <ion-header collapse="condense">
         <ion-toolbar>
           <ion-title size="large">Activity</ion-title>
         </ion-toolbar>
       </ion-header>
+
+      <!-- Filter chips -->
+      <div class="filters-wrap">
+        <ion-chip
+          v-for="f in FILTERS"
+          :key="f.value"
+          class="filter-chip"
+          :class="{ active: activeFilter === f.value }"
+          @click="activeFilter = f.value">
+          {{ f.label }}
+        </ion-chip>
+      </div>
+
+      <!-- Activity list -->
+      <ion-list lines="inset">
+        <template v-if="loading">
+          <SkeletonLoader v-for="n in 6" :key="n" variant="list-item" />
+        </template>
+        <template v-else-if="filteredActivity.length">
+          <ActivityCard v-for="item in filteredActivity" :key="item.id" :item="item" />
+        </template>
+        <template v-else>
+          <EmptyState :icon="pulseOutline" title="No activity" message="Nothing here yet for this filter." />
+        </template>
+      </ion-list>
     </ion-content>
   </ion-page>
 </template>
 
 <script setup lang="ts">
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { ref, computed, onMounted } from "vue";
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonChip } from "@ionic/vue";
+import { pulseOutline } from "ionicons/icons";
+import ActivityCard from "@/components/common/ActivityCard.vue";
+import SkeletonLoader from "@/components/common/SkeletonLoader.vue";
+import EmptyState from "@/components/common/EmptyState.vue";
+import { getMockActivity } from "@/mocks/activity";
+import type { ActivityItem } from "@/domain/models/activity";
+
+const loading = ref(true);
+const allActivity = getMockActivity();
+const activeFilter = ref<"all" | "repos" | "prs" | "issues" | "people">("all");
+
+const FILTERS = [
+  { value: "all", label: "All" },
+  { value: "repos", label: "Repos" },
+  { value: "prs", label: "PRs" },
+  { value: "issues", label: "Issues" },
+  { value: "people", label: "People" },
+] as const;
+
+const KIND_GROUPS: Record<string, ActivityItem["kind"][]> = {
+  repos: ["repo_created", "repo_starred"],
+  prs: ["pr_opened", "pr_merged"],
+  issues: ["issue_opened", "issue_closed"],
+  people: ["user_followed"],
+};
+
+const filteredActivity = computed(() => {
+  if (activeFilter.value === "all") return allActivity;
+  const kinds = KIND_GROUPS[activeFilter.value] ?? [];
+  return allActivity.filter((a) => kinds.includes(a.kind));
+});
+
+onMounted(() => {
+  setTimeout(() => {
+    loading.value = false;
+  }, 400);
+});
 </script>
+
+<style scoped>
+.filters-wrap {
+  display: flex;
+  gap: 6px;
+  padding: 12px 16px 4px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.filters-wrap::-webkit-scrollbar {
+  display: none;
+}
+
+.filter-chip {
+  --background: var(--t-surface-raised);
+  --color: var(--t-text-secondary);
+  border: 1px solid var(--t-border);
+  flex-shrink: 0;
+  font-size: 13px;
+  margin: 0;
+  cursor: pointer;
+}
+
+.filter-chip.active {
+  --background: var(--t-accent-dim);
+  --color: var(--t-accent);
+  border-color: var(--t-accent);
+}
+
+ion-list {
+  background: transparent;
+  padding: 0;
+}
+</style>

src/features/explore/ExplorePage.vue

···
       <ion-toolbar>
         <ion-title>Explore</ion-title>
       </ion-toolbar>
+      <ion-toolbar>
+        <ion-searchbar placeholder="Search repos and users…" :disabled="true" class="search-bar" />
+      </ion-toolbar>
+      <ion-toolbar>
+        <ion-segment v-model="tab" class="explore-segment">
+          <ion-segment-button value="repos">Repos</ion-segment-button>
+          <ion-segment-button value="users">Users</ion-segment-button>
+        </ion-segment>
+      </ion-toolbar>
     </ion-header>
+
     <ion-content :fullscreen="true">
-      <ion-header collapse="condense">
-        <ion-toolbar>
-          <ion-title size="large">Explore</ion-title>
-        </ion-toolbar>
-      </ion-header>
+      <template v-if="loading">
+        <SkeletonLoader v-for="n in 4" :key="n" :variant="tab === 'repos' ? 'card' : 'list-item'" />
+      </template>
+
+      <template v-else-if="tab === 'repos'">
+        <RepoCard v-for="repo in repos" :key="repo.atUri" :repo="repo" @click="navigateToRepo(repo)" />
+      </template>
+
+      <template v-else>
+        <UserCard v-for="user in users" :key="user.did" :user="user" />
+      </template>
     </ion-content>
   </ion-page>
 </template>
 
 <script setup lang="ts">
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import {
+  IonPage,
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonContent,
+  IonSearchbar,
+  IonSegment,
+  IonSegmentButton,
+} from "@ionic/vue";
+import RepoCard from "@/components/common/RepoCard.vue";
+import UserCard from "@/components/common/UserCard.vue";
+import SkeletonLoader from "@/components/common/SkeletonLoader.vue";
+import { getMockRepos } from "@/mocks/repos";
+import { getMockUsers } from "@/mocks/users";
+import type { RepoSummary } from "@/domain/models/repo";
+
+const router = useRouter();
+const tab = ref<"repos" | "users">("repos");
+const loading = ref(true);
+const repos = getMockRepos();
+const users = getMockUsers();
+
+onMounted(() => {
+  setTimeout(() => {
+    loading.value = false;
+  }, 400);
+});
+
+function navigateToRepo(repo: RepoSummary) {
+  router.push(`/tabs/explore/repo/${repo.ownerHandle}/${repo.name}`);
+}
 </script>
+
+<style scoped>
+.search-bar {
+  --background: var(--t-surface-raised);
+}
+
+.explore-segment {
+  padding: 0 12px 6px;
+}
+</style>

src/features/home/HomePage.vue

···
         <ion-title>Home</ion-title>
       </ion-toolbar>
     </ion-header>
+
     <ion-content :fullscreen="true">
       <ion-header collapse="condense">
         <ion-toolbar>
           <ion-title size="large">Home</ion-title>
         </ion-toolbar>
       </ion-header>
+
+      <!-- Trending Repos -->
+      <div class="section">
+        <h2 class="section-title">Trending</h2>
+        <template v-if="loading">
+          <SkeletonLoader v-for="n in 3" :key="n" variant="card" />
+        </template>
+        <template v-else>
+          <RepoCard v-for="repo in trendingRepos" :key="repo.atUri" :repo="repo" @click="navigateToRepo(repo)" />
+        </template>
+      </div>
+
+      <!-- Recent Activity -->
+      <div class="section">
+        <h2 class="section-title">Recent Activity</h2>
+        <ion-list lines="inset">
+          <template v-if="loading">
+            <SkeletonLoader v-for="n in 5" :key="n" variant="list-item" />
+          </template>
+          <template v-else>
+            <ActivityCard v-for="item in activity" :key="item.id" :item="item" />
+          </template>
+        </ion-list>
+      </div>
     </ion-content>
   </ion-page>
 </template>
 
 <script setup lang="ts">
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonList } from "@ionic/vue";
+import RepoCard from "@/components/common/RepoCard.vue";
+import ActivityCard from "@/components/common/ActivityCard.vue";
+import SkeletonLoader from "@/components/common/SkeletonLoader.vue";
+import { getTrendingRepos } from "@/mocks/repos";
+import { getMockActivity } from "@/mocks/activity";
+import type { RepoSummary } from "@/domain/models/repo";
+
+const router = useRouter();
+const loading = ref(true);
+const trendingRepos = ref(getTrendingRepos());
+const activity = ref(getMockActivity().slice(0, 8));
+
+onMounted(() => {
+  setTimeout(() => {
+    loading.value = false;
+  }, 400);
+});
+
+function navigateToRepo(repo: RepoSummary) {
+  router.push(`/tabs/home/repo/${repo.ownerHandle}/${repo.name}`);
+}
 </script>
+
+<style scoped>
+.section {
+  margin-top: 8px;
+}
+
+.section-title {
+  font-size: 13px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--t-text-muted);
+  margin: 16px 16px 6px;
+}
+
+ion-list {
+  background: transparent;
+  padding: 0;
+}
+</style>

src/features/profile/ProfilePage.vue

···
         <ion-title>Profile</ion-title>
       </ion-toolbar>
     </ion-header>
+
     <ion-content :fullscreen="true">
       <ion-header collapse="condense">
         <ion-toolbar>
           <ion-title size="large">Profile</ion-title>
         </ion-toolbar>
       </ion-header>
+
+      <div class="signin-container">
+        <div class="brand-icon">
+          <ion-icon :icon="codeSlashOutline" />
+        </div>
+
+        <h2 class="signin-title">Sign in to Tangled</h2>
+        <p class="signin-subtitle">
+          Use your AT Protocol handle to sign in and access your starred repos, follow developers, and get a
+          personalized activity feed.
+        </p>
+
+        <ion-button class="signin-btn" expand="block" @click="handleSignIn">
+          <ion-icon slot="start" :icon="logInOutline" />
+          Sign in with AT Protocol
+        </ion-button>
+
+        <p class="signin-hint">
+          Don't have a handle?
+          <span class="signin-link">Get one at bsky.app</span>
+        </p>
+      </div>
     </ion-content>
   </ion-page>
 </template>
 
 <script setup lang="ts">
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonIcon } from "@ionic/vue";
+import { codeSlashOutline, logInOutline } from "ionicons/icons";
+
+function handleSignIn() {
+  // TODO: AT Protocol OAuth flow
+}
 </script>
+
+<style scoped>
+.signin-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 70vh;
+  padding: 32px 28px;
+  text-align: center;
+  gap: 14px;
+}
+
+.brand-icon {
+  width: 72px;
+  height: 72px;
+  border-radius: var(--t-radius-lg);
+  background: var(--t-accent-dim);
+  border: 1px solid var(--t-border-strong);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 30px;
+  color: var(--t-accent);
+  margin-bottom: 4px;
+}
+
+.signin-title {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--t-text-primary);
+  margin: 0;
+  line-height: 1.2;
+}
+
+.signin-subtitle {
+  font-size: 14px;
+  color: var(--t-text-secondary);
+  margin: 0;
+  line-height: 1.55;
+  max-width: 280px;
+}
+
+.signin-btn {
+  --background: var(--t-accent);
+  --background-activated: var(--t-accent);
+  --color: #0d1117;
+  --border-radius: var(--t-radius-md);
+  width: 100%;
+  max-width: 320px;
+  font-weight: 600;
+  font-size: 15px;
+  margin-top: 6px;
+}
+
+.signin-hint {
+  font-size: 13px;
+  color: var(--t-text-muted);
+  margin: 4px 0 0;
+}
+
+.signin-link {
+  color: var(--t-accent);
+  cursor: pointer;
+}
+</style>

src/features/repo/RepoDetailPage.vue

···
         <ion-buttons slot="start">
           <ion-back-button default-href="/tabs/home" />
         </ion-buttons>
-        <ion-title>{{ owner }}/{{ repo }}</ion-title>
+        <ion-title class="repo-title">
+          <span class="owner">{{ owner }}/</span>{{ repoName }}
+        </ion-title>
+      </ion-toolbar>
+      <ion-toolbar>
+        <ion-segment v-model="segment" class="detail-segment">
+          <ion-segment-button value="overview">Overview</ion-segment-button>
+          <ion-segment-button value="files">Files</ion-segment-button>
+          <ion-segment-button value="issues">Issues</ion-segment-button>
+          <ion-segment-button value="prs">PRs</ion-segment-button>
+        </ion-segment>
       </ion-toolbar>
     </ion-header>
+
     <ion-content :fullscreen="true">
+      <!-- Loading skeleton -->
+      <template v-if="loading">
+        <SkeletonLoader variant="profile" />
+        <SkeletonLoader v-for="n in 3" :key="n" variant="card" />
+      </template>
+
+      <!-- Not found -->
+      <EmptyState
+        v-else-if="!repo"
+        :icon="alertCircleOutline"
+        title="Repo not found"
+        message="This repository doesn't exist or hasn't been loaded yet."
+      />
+
+      <!-- Content -->
+      <template v-else>
+        <RepoOverview  v-if="segment === 'overview'" :repo="repo" />
+        <RepoFiles     v-else-if="segment === 'files'"   :files="files" />
+        <RepoIssues    v-else-if="segment === 'issues'"  :issues="issues" />
+        <RepoPRs       v-else-if="segment === 'prs'"     :prs="prs" />
+      </template>
     </ion-content>
   </ion-page>
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
 import {
-  IonPage,
-  IonHeader,
-  IonToolbar,
-  IonTitle,
-  IonContent,
-  IonButtons,
-  IonBackButton,
+  IonPage, IonHeader, IonToolbar, IonTitle, IonContent,
+  IonButtons, IonBackButton, IonSegment, IonSegmentButton,
 } from '@ionic/vue';
-import { useRoute } from 'vue-router';
+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 { getMockRepoDetail, getMockRepoFiles } from '@/mocks/repos';
+import { getMockIssues } from '@/mocks/issues';
+import { getMockPullRequests } from '@/mocks/pull-requests';
+import type { RepoDetail, RepoFile } from '@/domain/models/repo';
+import type { IssueSummary } from '@/domain/models/issue';
+import type { PullRequestSummary } from '@/domain/models/pull-request';
 
 const route = useRoute();
 const owner = route.params.owner as string;
-const repo = route.params.repo as string;
+const repoName = route.params.repo as string;
+
+const segment = ref<'overview' | 'files' | 'issues' | 'prs'>('overview');
+const loading = ref(true);
+const repo = ref<RepoDetail | null>(null);
+const files = ref<RepoFile[]>([]);
+const issues = ref<IssueSummary[]>([]);
+const prs = ref<PullRequestSummary[]>([]);
+
+onMounted(() => {
+  setTimeout(() => {
+    repo.value = getMockRepoDetail(owner, repoName) ?? null;
+    files.value = getMockRepoFiles();
+    issues.value = getMockIssues();
+    prs.value = getMockPullRequests();
+    loading.value = false;
+  }, 400);
+});
 </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;
+}
+</style>

src/features/repo/RepoFiles.vue

···
+<template>
+  <div class="files-view">
+    <ion-list lines="inset" class="file-list">
+      <FileTreeItem
+        v-for="file in sortedFiles"
+        :key="file.name"
+        :file="file"
+        lines="inset"
+        @click="handleFileClick(file)" />
+    </ion-list>
+
+    <EmptyState
+      v-if="!files.length"
+      :icon="folderOpenOutline"
+      title="No files"
+      message="This repository appears to be empty." />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { IonList } from "@ionic/vue";
+import { folderOpenOutline } from "ionicons/icons";
+import FileTreeItem from "@/components/repo/FileTreeItem.vue";
+import EmptyState from "@/components/common/EmptyState.vue";
+import type { RepoFile } from "@/domain/models/repo";
+
+const props = defineProps<{ files: RepoFile[] }>();
+
+/* Sort dirs first, then files, alphabetically within each group */
+const sortedFiles = computed(() => {
+  return [...props.files].sort((a, b) => {
+    if (a.type === b.type) return a.name.localeCompare(b.name);
+    return a.type === "dir" ? -1 : 1;
+  });
+});
+
+function handleFileClick(file: RepoFile) {
+  // TODO: navigate into dir or open file viewer
+  console.log("file clicked:", file.path, file.name);
+}
+</script>
+
+<style scoped>
+.files-view {
+  padding-bottom: 32px;
+}
+
+.file-list {
+  background: transparent;
+  padding: 8px 0;
+}
+</style>

src/features/repo/RepoIssues.vue

···
+<template>
+  <div class="issues-view">
+    <!-- Filter -->
+    <div class="filters-row">
+      <ion-chip
+        v-for="f in FILTERS"
+        :key="f.value"
+        class="filter-chip"
+        :class="{ active: filter === f.value }"
+        @click="filter = f.value">
+        {{ f.label }}
+      </ion-chip>
+    </div>
+
+    <ion-list lines="inset" class="issue-list">
+      <ion-item v-for="issue in filtered" :key="issue.atUri" class="issue-item" button lines="inset">
+        <div slot="start" class="state-dot" :class="issue.state" />
+        <ion-label class="issue-label">
+          <span class="issue-title">{{ issue.title }}</span>
+          <div class="issue-meta">
+            <span class="mono">{{ issue.authorHandle }}</span>
+            <span class="sep">·</span>
+            <span>{{ relativeTime(issue.createdAt) }}</span>
+            <template v-if="issue.commentCount">
+              <span class="sep">·</span>
+              <ion-icon :icon="chatbubbleOutline" class="meta-icon" />
+              <span>{{ issue.commentCount }}</span>
+            </template>
+          </div>
+        </ion-label>
+        <ion-badge slot="end" class="state-badge" :class="issue.state">
+          {{ issue.state }}
+        </ion-badge>
+      </ion-item>
+    </ion-list>
+
+    <EmptyState
+      v-if="!filtered.length"
+      :icon="alertCircleOutline"
+      title="No issues"
+      :message="filter === 'all' ? 'No issues filed yet.' : `No ${filter} issues.`" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { IonList, IonItem, IonLabel, IonBadge, IonIcon, IonChip } from "@ionic/vue";
+import { chatbubbleOutline, alertCircleOutline } from "ionicons/icons";
+import EmptyState from "@/components/common/EmptyState.vue";
+import type { IssueSummary } from "@/domain/models/issue";
+
+const props = defineProps<{ issues: 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;
+}
+
+.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>

src/features/repo/RepoOverview.vue

···
+<template>
+  <div class="overview">
+    <!-- Header stats -->
+    <div class="stats-row">
+      <div class="stat-item">
+        <ion-icon :icon="starOutline" class="stat-icon amber" />
+        <span class="stat-value">{{ repo.stars ?? 0 }}</span>
+        <span class="stat-label">stars</span>
+      </div>
+      <div class="stat-item">
+        <ion-icon :icon="gitBranchOutline" class="stat-icon accent" />
+        <span class="stat-value">{{ repo.forks ?? 0 }}</span>
+        <span class="stat-label">forks</span>
+      </div>
+      <div v-if="repo.defaultBranch" class="stat-item">
+        <ion-icon :icon="codeOutline" class="stat-icon muted" />
+        <span class="stat-value mono">{{ repo.defaultBranch }}</span>
+      </div>
+    </div>
+
+    <!-- Description -->
+    <p v-if="repo.description" class="repo-description">{{ repo.description }}</p>
+
+    <!-- Topics -->
+    <div v-if="repo.topics?.length" class="topics-row">
+      <ion-chip v-for="topic in repo.topics" :key="topic" class="topic-chip">
+        {{ topic }}
+      </ion-chip>
+    </div>
+
+    <!-- Language breakdown -->
+    <div v-if="repo.languages && Object.keys(repo.languages).length" class="section">
+      <h3 class="section-label">Languages</h3>
+      <div class="lang-list">
+        <div v-for="[lang, pct] in langEntries" :key="lang" class="lang-row">
+          <span class="lang-dot" :style="{ background: langColor(lang) }" />
+          <span class="lang-name">{{ lang }}</span>
+          <span class="lang-pct">{{ pct }}%</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- README -->
+    <div class="section">
+      <h3 class="section-label">README</h3>
+      <MarkdownRenderer v-if="repo.readme" :content="repo.readme" />
+      <EmptyState v-else :icon="documentOutline" title="No README" message="This repo doesn't have a README yet." />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { IonIcon, IonChip } from "@ionic/vue";
+import { starOutline, gitBranchOutline, codeOutline, documentOutline } from "ionicons/icons";
+import MarkdownRenderer from "@/components/repo/MarkdownRenderer.vue";
+import EmptyState from "@/components/common/EmptyState.vue";
+import type { RepoDetail } from "@/domain/models/repo";
+
+const props = defineProps<{ repo: RepoDetail }>();
+
+const LANG_COLORS: Record<string, string> = {
+  TypeScript: "#3178c6",
+  JavaScript: "#f7df1e",
+  Go: "#00add8",
+  Python: "#3572A5",
+  Rust: "#dea584",
+  Nix: "#7ebae4",
+  Ruby: "#cc342d",
+  CSS: "#563d7c",
+  HTML: "#e34c26",
+};
+
+function langColor(lang: string): string {
+  return LANG_COLORS[lang] ?? "var(--t-text-muted)";
+}
+
+const langEntries = computed(() => Object.entries(props.repo.languages ?? {}).sort(([, a], [, b]) => b - a));
+</script>
+
+<style scoped>
+.overview {
+  padding-bottom: 32px;
+}
+
+.stats-row {
+  display: flex;
+  gap: 20px;
+  padding: 16px 16px 12px;
+  border-bottom: 1px solid var(--t-border);
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.stat-icon {
+  font-size: 14px;
+}
+
+.stat-icon.amber {
+  color: var(--t-amber);
+}
+.stat-icon.accent {
+  color: var(--t-accent);
+}
+.stat-icon.muted {
+  color: var(--t-text-muted);
+}
+
+.stat-value {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--t-text-primary);
+}
+
+.stat-value.mono {
+  font-family: var(--t-mono);
+  font-size: 12px;
+}
+
+.stat-label {
+  font-size: 12px;
+  color: var(--t-text-muted);
+}
+
+.repo-description {
+  font-size: 14px;
+  color: var(--t-text-secondary);
+  margin: 14px 16px 0;
+  line-height: 1.55;
+}
+
+.topics-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 12px 16px 0;
+}
+
+.topic-chip {
+  --background: var(--t-accent-dim);
+  --color: var(--t-accent);
+  border: 1px solid var(--t-border-strong);
+  font-size: 12px;
+  height: 26px;
+  margin: 0;
+}
+
+.section {
+  margin-top: 20px;
+}
+
+.section-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--t-text-muted);
+  margin: 0 16px 10px;
+}
+
+.lang-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 0 16px;
+}
+
+.lang-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.lang-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.lang-name {
+  font-size: 13px;
+  color: var(--t-text-secondary);
+  flex: 1;
+}
+
+.lang-pct {
+  font-family: var(--t-mono);
+  font-size: 12px;
+  color: var(--t-text-muted);
+}
+</style>

src/features/repo/RepoPRs.vue

···
+<template>
+  <div class="prs-view">
+    <!-- Filter -->
+    <div class="filters-row">
+      <ion-chip
+        v-for="f in FILTERS"
+        :key="f.value"
+        class="filter-chip"
+        :class="{ active: filter === f.value }"
+        @click="filter = f.value">
+        {{ f.label }}
+      </ion-chip>
+    </div>
+
+    <ion-list lines="inset" class="pr-list">
+      <ion-item v-for="pr in filtered" :key="pr.atUri" class="pr-item" button lines="inset">
+        <div slot="start" class="status-icon" :class="pr.status">
+          <ion-icon :icon="gitMergeOutline" />
+        </div>
+        <ion-label class="pr-label">
+          <span class="pr-title">{{ pr.title }}</span>
+          <div class="pr-meta">
+            <span class="mono">{{ pr.authorHandle }}</span>
+            <span class="sep">·</span>
+            <span class="branch mono">{{ pr.sourceBranch }}</span>
+            <span class="sep">→</span>
+            <span class="branch mono">{{ pr.targetBranch }}</span>
+            <span class="sep">·</span>
+            <span>{{ relativeTime(pr.createdAt) }}</span>
+          </div>
+        </ion-label>
+        <ion-badge slot="end" class="status-badge" :class="pr.status">
+          {{ pr.status }}
+        </ion-badge>
+      </ion-item>
+    </ion-list>
+
+    <EmptyState
+      v-if="!filtered.length"
+      :icon="gitMergeOutline"
+      title="No pull requests"
+      :message="filter === 'all' ? 'No PRs yet.' : `No ${filter} PRs.`" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { IonList, IonItem, IonLabel, IonBadge, IonIcon, IonChip } from "@ionic/vue";
+import { gitMergeOutline } from "ionicons/icons";
+import EmptyState from "@/components/common/EmptyState.vue";
+import type { PullRequestSummary } from "@/domain/models/pull-request";
+
+const props = defineProps<{ prs: PullRequestSummary[] }>();
+
+const filter = ref<"all" | "open" | "merged" | "closed">("open");
+
+const FILTERS = [
+  { value: "open", label: "Open" },
+  { value: "merged", label: "Merged" },
+  { value: "closed", label: "Closed" },
+  { value: "all", label: "All" },
+] as const;
+
+const filtered = computed(() => {
+  if (filter.value === "all") return props.prs;
+  return props.prs.filter((pr) => pr.status === 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>
+.prs-view {
+  padding-bottom: 32px;
+}
+
+.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);
+}
+
+.pr-list {
+  background: transparent;
+  padding: 0;
+}
+
+.pr-item {
+  --background: transparent;
+  --padding-start: 16px;
+  --inner-padding-end: 12px;
+}
+
+.status-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  font-size: 14px;
+  margin-right: 10px;
+  flex-shrink: 0;
+}
+
+.status-icon.open {
+  color: var(--t-accent);
+  background: var(--t-accent-dim);
+}
+.status-icon.merged {
+  color: var(--t-purple);
+  background: rgba(167, 139, 250, 0.1);
+}
+.status-icon.closed {
+  color: var(--t-text-muted);
+  background: var(--t-surface-raised);
+}
+
+.pr-label {
+  white-space: normal;
+  padding: 10px 0;
+}
+
+.pr-title {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--t-text-primary);
+  display: block;
+  margin-bottom: 4px;
+  line-height: 1.4;
+}
+
+.pr-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;
+}
+
+.mono:first-child {
+  color: var(--t-accent);
+}
+
+.branch {
+  color: var(--t-text-secondary);
+}
+
+.sep {
+  color: var(--t-border-strong);
+}
+
+.status-badge {
+  font-size: 11px;
+  font-weight: 500;
+  border-radius: 99px;
+  padding: 2px 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>

src/mocks/repos.ts

···
-import type { RepoSummary, RepoDetail, RepoFile } from '@/domain/models/repo';
+import type { RepoSummary, RepoDetail, RepoFile } from "@/domain/models/repo";
 
-// Timestamps within the last 30 days (relative to 2026-03-22)
 const MOCK_REPOS: RepoSummary[] = [
-    {
-        atUri: 'at://did:plc:a1b2c3d4e5f6g7h8i9j0k1l2/sh.tangled.repo/atproto-explorer',
-        ownerDid: 'did:plc:a1b2c3d4e5f6g7h8i9j0k1l2',
-        ownerHandle: 'alice.tngl.sh',
-        name: 'atproto-explorer',
-        description: 'Interactive explorer for AT Protocol lexicons and records.',
-        primaryLanguage: 'TypeScript',
-        stars: 312,
-        forks: 28,
-        updatedAt: '2026-03-21T14:32:00Z',
-        knot: 'tangled.sh',
-    },
-    {
-        atUri: 'at://did:plc:p2cp5gopk7mgjegy9waligxd/sh.tangled.repo/twisted',
-        ownerDid: 'did:plc:p2cp5gopk7mgjegy9waligxd',
-        ownerHandle: 'desertthunder.dev',
-        name: 'twisted',
-        description: 'A mobile companion reader for Tangled, built with Ionic Vue.',
-        primaryLanguage: 'TypeScript',
-        stars: 47,
-        forks: 3,
-        updatedAt: '2026-03-22T09:15:00Z',
-        knot: 'tangled.sh',
-    },
-    {
-        atUri: 'at://did:plc:b2c3d4e5f6g7h8i9j0k1l2m3/sh.tangled.repo/git-log-pretty',
-        ownerDid: 'did:plc:b2c3d4e5f6g7h8i9j0k1l2m3',
-        ownerHandle: 'bob.tngl.sh',
-        name: 'git-log-pretty',
-        description: 'Opinionated git log formatter with colour themes and TUI.',
-        primaryLanguage: 'Go',
-        stars: 189,
-        forks: 14,
-        updatedAt: '2026-03-19T22:08:00Z',
-        knot: 'tangled.sh',
-    },
-    {
-        atUri: 'at://did:plc:c3d4e5f6g7h8i9j0k1l2m3n4/sh.tangled.repo/iris-ui',
-        ownerDid: 'did:plc:c3d4e5f6g7h8i9j0k1l2m3n4',
-        ownerHandle: 'clara.bsky.social',
-        name: 'iris-ui',
-        description: 'Accessible component library for AT Protocol apps.',
-        primaryLanguage: 'TypeScript',
-        stars: 631,
-        forks: 72,
-        updatedAt: '2026-03-20T11:45:00Z',
-        knot: 'tangled.sh',
-    },
-    {
-        atUri: 'at://did:plc:e5f6g7h8i9j0k1l2m3n4o5p6/sh.tangled.repo/nix-atproto',
-        ownerDid: 'did:plc:e5f6g7h8i9j0k1l2m3n4o5p6',
-        ownerHandle: 'riku.tngl.sh',
-        name: 'nix-atproto',
-        description: 'Nix flakes and modules for self-hosting AT Protocol services.',
-        primaryLanguage: 'Nix',
-        stars: 94,
-        forks: 11,
-        updatedAt: '2026-03-17T08:30:00Z',
-        knot: 'tangled.sh',
-    },
-    {
-        atUri: 'at://did:plc:d4e5f6g7h8i9j0k1l2m3n4o5/sh.tangled.repo/tangled-cli',
-        ownerDid: 'did:plc:d4e5f6g7h8i9j0k1l2m3n4o5',
-        ownerHandle: 'dev.tangled.sh',
-        name: 'tangled-cli',
-        description: 'Official command-line tool for interacting with the Tangled platform.',
-        primaryLanguage: 'Go',
-        stars: 1842,
-        forks: 203,
-        updatedAt: '2026-03-22T07:00:00Z',
-        knot: 'tangled.sh',
-    },
-    {
-        atUri: 'at://did:plc:a1b2c3d4e5f6g7h8i9j0k1l2/sh.tangled.repo/lexicon-validator',
-        ownerDid: 'did:plc:a1b2c3d4e5f6g7h8i9j0k1l2',
-        ownerHandle: 'alice.tngl.sh',
-        name: 'lexicon-validator',
-        description: 'Runtime validation for AT Protocol lexicon schemas.',
-        primaryLanguage: 'TypeScript',
-        stars: 77,
-        forks: 9,
-        updatedAt: '2026-03-14T16:20:00Z',
-        knot: 'tangled.sh',
-    },
-    {
-        atUri: 'at://did:plc:p2cp5gopk7mgjegy9waligxd/sh.tangled.repo/bsky-feeds',
-        ownerDid: 'did:plc:p2cp5gopk7mgjegy9waligxd',
-        ownerHandle: 'desertthunder.dev',
-        name: 'bsky-feeds',
-        description: 'Custom Bluesky feed generators with a simple declarative API.',
-        primaryLanguage: 'Python',
-        stars: 203,
-        forks: 31,
-        updatedAt: '2026-03-10T19:55:00Z',
-        knot: 'tangled.sh',
-    },
+  {
+    atUri: "at://did:plc:a1b2c3d4e5f6g7h8i9j0k1l2/sh.tangled.repo/atproto-explorer",
+    ownerDid: "did:plc:a1b2c3d4e5f6g7h8i9j0k1l2",
+    ownerHandle: "alice.tngl.sh",
+    name: "atproto-explorer",
+    description: "Interactive explorer for AT Protocol lexicons and records.",
+    primaryLanguage: "TypeScript",
+    stars: 312,
+    forks: 28,
+    updatedAt: "2026-03-21T14:32:00Z",
+    knot: "tangled.sh",
+  },
+  {
+    atUri: "at://did:plc:p2cp5gopk7mgjegy9waligxd/sh.tangled.repo/twisted",
+    ownerDid: "did:plc:p2cp5gopk7mgjegy9waligxd",
+    ownerHandle: "desertthunder.dev",
+    name: "twisted",
+    description: "A mobile companion reader for Tangled, built with Ionic Vue.",
+    primaryLanguage: "TypeScript",
+    stars: 47,
+    forks: 3,
+    updatedAt: "2026-03-22T09:15:00Z",
+    knot: "tangled.sh",
+  },
+  {
+    atUri: "at://did:plc:b2c3d4e5f6g7h8i9j0k1l2m3/sh.tangled.repo/git-log-pretty",
+    ownerDid: "did:plc:b2c3d4e5f6g7h8i9j0k1l2m3",
+    ownerHandle: "bob.tngl.sh",
+    name: "git-log-pretty",
+    description: "Opinionated git log formatter with colour themes and TUI.",
+    primaryLanguage: "Go",
+    stars: 189,
+    forks: 14,
+    updatedAt: "2026-03-19T22:08:00Z",
+    knot: "tangled.sh",
+  },
+  {
+    atUri: "at://did:plc:c3d4e5f6g7h8i9j0k1l2m3n4/sh.tangled.repo/iris-ui",
+    ownerDid: "did:plc:c3d4e5f6g7h8i9j0k1l2m3n4",
+    ownerHandle: "clara.bsky.social",
+    name: "iris-ui",
+    description: "Accessible component library for AT Protocol apps.",
+    primaryLanguage: "TypeScript",
+    stars: 631,
+    forks: 72,
+    updatedAt: "2026-03-20T11:45:00Z",
+    knot: "tangled.sh",
+  },
+  {
+    atUri: "at://did:plc:e5f6g7h8i9j0k1l2m3n4o5p6/sh.tangled.repo/nix-atproto",
+    ownerDid: "did:plc:e5f6g7h8i9j0k1l2m3n4o5p6",
+    ownerHandle: "riku.tngl.sh",
+    name: "nix-atproto",
+    description: "Nix flakes and modules for self-hosting AT Protocol services.",
+    primaryLanguage: "Nix",
+    stars: 94,
+    forks: 11,
+    updatedAt: "2026-03-17T08:30:00Z",
+    knot: "tangled.sh",
+  },
+  {
+    atUri: "at://did:plc:d4e5f6g7h8i9j0k1l2m3n4o5/sh.tangled.repo/tangled-cli",
+    ownerDid: "did:plc:d4e5f6g7h8i9j0k1l2m3n4o5",
+    ownerHandle: "dev.tangled.sh",
+    name: "tangled-cli",
+    description: "Official command-line tool for interacting with the Tangled platform.",
+    primaryLanguage: "Go",
+    stars: 1842,
+    forks: 203,
+    updatedAt: "2026-03-22T07:00:00Z",
+    knot: "tangled.sh",
+  },
+  {
+    atUri: "at://did:plc:a1b2c3d4e5f6g7h8i9j0k1l2/sh.tangled.repo/lexicon-validator",
+    ownerDid: "did:plc:a1b2c3d4e5f6g7h8i9j0k1l2",
+    ownerHandle: "alice.tngl.sh",
+    name: "lexicon-validator",
+    description: "Runtime validation for AT Protocol lexicon schemas.",
+    primaryLanguage: "TypeScript",
+    stars: 77,
+    forks: 9,
+    updatedAt: "2026-03-14T16:20:00Z",
+    knot: "tangled.sh",
+  },
+  {
+    atUri: "at://did:plc:p2cp5gopk7mgjegy9waligxd/sh.tangled.repo/bsky-feeds",
+    ownerDid: "did:plc:p2cp5gopk7mgjegy9waligxd",
+    ownerHandle: "desertthunder.dev",
+    name: "bsky-feeds",
+    description: "Custom Bluesky feed generators with a simple declarative API.",
+    primaryLanguage: "Python",
+    stars: 203,
+    forks: 31,
+    updatedAt: "2026-03-10T19:55:00Z",
+    knot: "tangled.sh",
+  },
 ];
 
 const MOCK_REPO_FILES: RepoFile[] = [
-    { path: '', name: 'src', type: 'dir', lastCommitMessage: 'feat: add skeleton loaders' },
-    { path: '', name: 'docs', type: 'dir', lastCommitMessage: 'docs: update phase-1 spec' },
-    { path: '', name: 'public', type: 'dir', lastCommitMessage: 'chore: add favicon' },
-    { path: '', name: '.gitignore', type: 'file', size: 412, lastCommitMessage: 'chore: initial scaffold' },
-    { path: '', name: 'package.json', type: 'file', size: 1840, lastCommitMessage: 'chore: add tanstack query' },
-    { path: '', name: 'README.md', type: 'file', size: 2310, lastCommitMessage: 'docs: update readme' },
-    { path: '', name: 'tsconfig.json', type: 'file', size: 688, lastCommitMessage: 'chore: initial scaffold' },
-    { path: '', name: 'vite.config.ts', type: 'file', size: 520, lastCommitMessage: 'chore: path aliases' },
+  { path: "", name: "src", type: "dir", lastCommitMessage: "feat: add skeleton loaders" },
+  { path: "", name: "docs", type: "dir", lastCommitMessage: "docs: update phase-1 spec" },
+  { path: "", name: "public", type: "dir", lastCommitMessage: "chore: add favicon" },
+  { path: "", name: ".gitignore", type: "file", size: 412, lastCommitMessage: "chore: initial scaffold" },
+  { path: "", name: "package.json", type: "file", size: 1840, lastCommitMessage: "chore: add tanstack query" },
+  { path: "", name: "README.md", type: "file", size: 2310, lastCommitMessage: "docs: update readme" },
+  { path: "", name: "tsconfig.json", type: "file", size: 688, lastCommitMessage: "chore: initial scaffold" },
+  { path: "", name: "vite.config.ts", type: "file", size: 520, lastCommitMessage: "chore: path aliases" },
 ];
 
 const README_CONTENT = `# twisted
···
 `;
 
 export function getMockRepos(): RepoSummary[] {
-    return MOCK_REPOS;
+  return MOCK_REPOS;
 }
 
 export function getMockRepoDetail(ownerHandle: string, name: string): RepoDetail | undefined {
-    const summary = MOCK_REPOS.find((r) => r.ownerHandle === ownerHandle && r.name === name);
-    if (!summary) return undefined;
+  const summary = MOCK_REPOS.find((r) => r.ownerHandle === ownerHandle && r.name === name);
+  if (!summary) return undefined;
 
-    return {
-        ...summary,
-        readme: README_CONTENT,
-        defaultBranch: 'main',
-        languages: summary.primaryLanguage
-            ? { [summary.primaryLanguage]: 85, Other: 15 }
-            : {},
-        topics: ['atproto', 'tangled', 'open-source'],
-    };
+  return {
+    ...summary,
+    readme: README_CONTENT,
+    defaultBranch: "main",
+    languages: summary.primaryLanguage ? { [summary.primaryLanguage]: 85, Other: 15 } : {},
+    topics: ["atproto", "tangled", "open-source"],
+  };
 }
 
 export function getMockRepoFiles(): RepoFile[] {
-    return MOCK_REPO_FILES;
+  return MOCK_REPO_FILES;
 }
 
 export function getTrendingRepos(): RepoSummary[] {
-    return [...MOCK_REPOS].sort((a, b) => (b.stars ?? 0) - (a.stars ?? 0)).slice(0, 5);
+  return [...MOCK_REPOS].sort((a, b) => (b.stars ?? 0) - (a.stars ?? 0)).slice(0, 5);
 }

src/router/index.ts

···
-import { createRouter, createWebHistory } from '@ionic/vue-router';
-import { RouteRecordRaw } from 'vue-router';
-import HomePage from '../views/HomePage.vue'
-
-const routes: Array<RouteRecordRaw> = [
-  {
-    path: '/',
-    redirect: '/home'
-  },
-  {
-    path: '/home',
-    name: 'Home',
-    component: HomePage
-  }
-]
-
-const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes
-})
-
-export default router

src/theme/variables.css

···
 /* For information on how to create your own theme, please refer to:
 http://ionicframework.com/docs/theming/ */
+
+/* Twisted design tokens — light */
+:root {
+  --t-accent: #0ea5e9;
+  --t-accent-dim: rgba(14, 165, 233, 0.1);
+  --t-amber: #d97706;
+  --t-amber-dim: rgba(217, 119, 6, 0.12);
+  --t-green: #059669;
+  --t-green-dim: rgba(5, 150, 105, 0.1);
+  --t-red: #dc2626;
+  --t-red-dim: rgba(220, 38, 38, 0.1);
+  --t-purple: #7c3aed;
+
+  --t-surface: #ffffff;
+  --t-surface-raised: #f6f8fa;
+  --t-border: rgba(0, 0, 0, 0.08);
+  --t-border-strong: rgba(0, 0, 0, 0.14);
+
+  --t-text-primary: #0d1117;
+  --t-text-secondary: #57606a;
+  --t-text-muted: #8c959f;
+
+  --t-mono: "JetBrains Mono", "Cascadia Code", "Fira Code", ui-monospace, "Courier New", monospace;
+
+  --t-radius-sm: 6px;
+  --t-radius-md: 10px;
+  --t-radius-lg: 14px;
+}
+
+/* Twisted design tokens — dark */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --t-accent: #22d3ee;
+    --t-accent-dim: rgba(34, 211, 238, 0.08);
+    --t-amber: #fbbf24;
+    --t-amber-dim: rgba(251, 191, 36, 0.1);
+    --t-green: #34d399;
+    --t-green-dim: rgba(52, 211, 153, 0.1);
+    --t-red: #f87171;
+    --t-red-dim: rgba(248, 113, 113, 0.1);
+    --t-purple: #a78bfa;
+
+    --t-surface: #161b22;
+    --t-surface-raised: #1c2128;
+    --t-border: rgba(255, 255, 255, 0.07);
+    --t-border-strong: rgba(255, 255, 255, 0.12);
+
+    --t-text-primary: #e6edf3;
+    --t-text-secondary: #8b949e;
+    --t-text-muted: #484f58;
+  }
+}