feat: constellation frontend integration

apps/twisted/src/core/browse-history/index.ts

···
+const REPOS_KEY = "twisted-recent-repos";
+const PROFILES_KEY = "twisted-recent-profiles";
+const MAX_ITEMS = 10;
+
+export type RecentRepo = {
+  ownerHandle: string;
+  name: string;
+  description?: string;
+  primaryLanguage?: string;
+  stars?: number;
+  visitedAt: number;
+};
+
+export type RecentProfile = { handle: string; displayName?: string; bio?: string; visitedAt: number };
+
+function read<T>(key: string): T[] {
+  try {
+    const raw = window.localStorage.getItem(key);
+    if (!raw) return [];
+    return JSON.parse(raw) as T[];
+  } catch {
+    return [];
+  }
+}
+
+function write<T>(key: string, items: T[]): void {
+  try {
+    window.localStorage.setItem(key, JSON.stringify(items));
+  } catch (error) {
+    console.warn("Failed to write browse history to localStorage", { error });
+  }
+}
+
+export function getRecentRepos(): RecentRepo[] {
+  return read<RecentRepo>(REPOS_KEY);
+}
+
+export function trackRepoVisit(repo: Omit<RecentRepo, "visitedAt">): void {
+  const existing = read<RecentRepo>(REPOS_KEY).filter(
+    (r) => !(r.ownerHandle === repo.ownerHandle && r.name === repo.name),
+  );
+  existing.unshift({ ...repo, visitedAt: Date.now() });
+  write(REPOS_KEY, existing.slice(0, MAX_ITEMS));
+}
+
+export function getRecentProfiles(): RecentProfile[] {
+  return read<RecentProfile>(PROFILES_KEY);
+}
+
+export function trackProfileVisit(profile: Omit<RecentProfile, "visitedAt">): void {
+  const existing = read<RecentProfile>(PROFILES_KEY).filter((p) => p.handle !== profile.handle);
+  existing.unshift({ ...profile, visitedAt: Date.now() });
+  write(PROFILES_KEY, existing.slice(0, MAX_ITEMS));
+}
+
+export function clearBrowseHistory(): void {
+  write(REPOS_KEY, []);
+  write(PROFILES_KEY, []);
+}

apps/twisted/src/core/config/project.ts

···
-const rawTwisterApiBaseUrl = import.meta.env.VITE_TWISTER_API_BASE_URL?.trim() ?? "";
+const rawTwisterApiBaseUrl = import.meta.env.VITE_TWISTER_API_BASE_URL?.trim() ?? "http://localhost:8080/";
 
 export const twisterApiBaseUrl = rawTwisterApiBaseUrl.replace(/\/+$/, "");
 export const hasTwisterApi = twisterApiBaseUrl.length > 0;

apps/twisted/src/core/search-history/index.ts

···
+const STORAGE_KEY = "twisted-search-history";
+const MAX_ITEMS = 10;
+
+export type SearchHistoryEntry = { query: string; timestamp: number };
+
+function readHistory(): SearchHistoryEntry[] {
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+    if (!raw) return [];
+    return JSON.parse(raw) as SearchHistoryEntry[];
+  } catch {
+    return [];
+  }
+}
+
+function writeHistory(entries: SearchHistoryEntry[]): void {
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(entries));
+  } catch (error) {
+    console.warn("Failed to write search history to localStorage", { error });
+  }
+}
+
+export function getSearchHistory(): SearchHistoryEntry[] {
+  return readHistory();
+}
+
+export function addToSearchHistory(query: string): void {
+  const trimmed = query.trim();
+  if (!trimmed) return;
+
+  const entries = readHistory().filter((e) => e.query !== trimmed);
+  entries.unshift({ query: trimmed, timestamp: Date.now() });
+  writeHistory(entries.slice(0, MAX_ITEMS));
+}
+
+export function removeFromSearchHistory(query: string): void {
+  writeHistory(readHistory().filter((e) => e.query !== query));
+}
+
+export function clearSearchHistory(): void {
+  writeHistory([]);
+}

apps/twisted/src/domain/models/activity.ts

···
-type ItemKind =
+type ActivityItemKind =
   | "repo_created"
   | "repo_starred"
   | "user_followed"
···
 
 export type ActivityItem = {
   id: string;
-  kind: ItemKind;
+  kind: ActivityItemKind;
   actorDid: string;
   actorHandle: string;
   targetUri?: string;
   targetName?: string;
+  targetOwnerDid?: string;
   createdAt: string;
 };

apps/twisted/src/features/activity/ActivityPage.vue

···
     <ion-header :translucent="true">
       <ion-toolbar>
         <ion-title>Activity</ion-title>
+        <ion-buttons slot="end">
+          <ion-button fill="clear" size="small" @click="clearFeed" :disabled="items.length === 0">
+            <ion-icon slot="icon-only" :icon="trashOutline" />
+          </ion-button>
+        </ion-buttons>
       </ion-toolbar>
     </ion-header>
 
···
         </ion-toolbar>
       </ion-header>
 
+      <!-- Connection status -->
+      <div class="status-bar" :class="statusClass">
+        <ion-icon :icon="statusIcon" class="status-icon" />
+        <span class="status-text">{{ statusText }}</span>
+      </div>
+
+      <!-- Filter segment -->
+      <ion-segment v-model="activeFilter" class="filter-segment">
+        <ion-segment-button value="all">All</ion-segment-button>
+        <ion-segment-button value="repo_starred">Stars</ion-segment-button>
+        <ion-segment-button value="user_followed">Follows</ion-segment-button>
+        <ion-segment-button value="issue_opened">Issues</ion-segment-button>
+        <ion-segment-button value="pr_opened">PRs</ion-segment-button>
+      </ion-segment>
+
+      <!-- Pull to refresh -->
+      <ion-refresher slot="fixed" @ionRefresh="handleRefresh($event)">
+        <ion-refresher-content pulling-text="Pull to refresh feed" refreshing-spinner="crescent" />
+      </ion-refresher>
+
+      <!-- Loading state while waiting for first event -->
+      <template v-if="status === 'connecting' && filteredItems.length === 0">
+        <SkeletonLoader v-for="n in 6" :key="n" variant="list-item" />
+      </template>
+
+      <!-- Empty: disconnected with no items -->
       <EmptyState
+        v-else-if="status === 'disconnected' && filteredItems.length === 0"
         :icon="pulseOutline"
-        title="Activity is in progress"
-        message="The public activity feed is still in progress. This tab stays as a placeholder until the indexed feed work is ready." />
+        title="Disconnected"
+        message="Could not connect to the Jetstream feed. Pull to refresh to try again."
+        action-label="Reconnect"
+        @action="reconnect" />
+
+      <!-- Empty: connected but filter has no matches -->
+      <EmptyState
+        v-else-if="status === 'connected' && filteredItems.length === 0"
+        :icon="pulseOutline"
+        title="Waiting for events…"
+        message="Connected to the network. Events matching this filter will appear here." />
+
+      <!-- Feed -->
+      <div v-else class="feed">
+        <ActivityCard
+          v-for="item in filteredItems"
+          :key="item.id"
+          :item="displayItem(item)"
+          @click="handleItemClick(item)"
+          @actor-click="handleActorClick(item)" />
+      </div>
+
     </ion-content>
   </ion-page>
 </template>
 
 <script setup lang="ts">
-import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from "@ionic/vue";
-import { pulseOutline } from "ionicons/icons";
-import EmptyState from "@/components/common/EmptyState.vue";
+  import { computed, ref, onUnmounted, shallowRef } from "vue";
+  import { useRouter } from "vue-router";
+  import {
+    IonPage,
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonButtons,
+    IonButton,
+    IonIcon,
+    IonSegment,
+    IonSegmentButton,
+    IonRefresher,
+    IonRefresherContent,
+    onIonViewWillEnter,
+    onIonViewWillLeave,
+  } from "@ionic/vue";
+  import { pulseOutline, trashOutline, wifiOutline, cloudOfflineOutline, syncOutline } from "ionicons/icons";
+  import ActivityCard from "@/components/common/ActivityCard.vue";
+  import EmptyState from "@/components/common/EmptyState.vue";
+  import SkeletonLoader from "@/components/common/SkeletonLoader.vue";
+  import { JetstreamClient } from "@/services/jetstream/client.js";
+  import { resolveHandleFromDid } from "@/services/tangled/endpoints.js";
+  import type { ActivityItem } from "@/domain/models/activity.js";
+
+  type ConnectionStatus = "connecting" | "connected" | "disconnected";
+  type FilterKind = "all" | ActivityItem["kind"];
+
+  const MAX_ITEMS = 200;
+
+  const router = useRouter();
+
+  const items = shallowRef<ActivityItem[]>([]);
+  const activeFilter = ref<FilterKind>("all");
+  const status = ref<ConnectionStatus>("connecting");
+  const handleCache = ref<Map<string, string>>(new Map());
+
+  const filteredItems = computed(() => {
+    if (activeFilter.value === "all") return items.value;
+    return items.value.filter((item) => item.kind === activeFilter.value);
+  });
+
+  const statusClass = computed(() => ({
+    "status-connecting": status.value === "connecting",
+    "status-connected": status.value === "connected",
+    "status-disconnected": status.value === "disconnected",
+  }));
+
+  const statusText = computed((): string => {
+    switch (status.value) {
+      case "connected":
+        return `Live · ${items.value.length} event${items.value.length === 1 ? "" : "s"}`;
+      case "disconnected":
+        return "Disconnected · reconnecting…";
+      default:
+        return "Connecting to Jetstream…";
+    }
+  });
+
+  const statusIcon = computed(() => {
+    switch (status.value) {
+      case "connected":
+        return wifiOutline;
+      case "disconnected":
+        return cloudOfflineOutline;
+      default:
+        return syncOutline;
+    }
+  });
+
+  /** Returns a copy of the item with resolved handle if available. */
+  function displayItem(item: ActivityItem): ActivityItem {
+    const resolved = handleCache.value.get(item.actorDid);
+    if (!resolved || resolved === item.actorHandle) return item;
+    return { ...item, actorHandle: resolved };
+  }
+
+  function resolveHandle(did: string): void {
+    if (handleCache.value.has(did)) return;
+    // Optimistically mark as in-progress by setting to DID to avoid re-entrancy
+    handleCache.value.set(did, did);
+
+    resolveHandleFromDid(did)
+      .then((handle) => {
+        const next = new Map(handleCache.value);
+        next.set(did, handle);
+        handleCache.value = next;
+      })
+      .catch(() => {
+        // Leave the placeholder handle from the item
+        handleCache.value.delete(did);
+      });
+  }
+
+  const client = new JetstreamClient({
+    onEvent(item) {
+      const next = [item, ...items.value];
+      if (next.length > MAX_ITEMS) next.length = MAX_ITEMS;
+      items.value = next;
+      resolveHandle(item.actorDid);
+    },
+    onConnected() {
+      status.value = "connected";
+    },
+    onDisconnected() {
+      if (status.value !== "connecting") {
+        status.value = "disconnected";
+      }
+    },
+    onError() {
+      status.value = "disconnected";
+    },
+  });
+
+  onIonViewWillEnter(() => {
+    status.value = "connecting";
+    client.connect();
+  });
+
+  onIonViewWillLeave(() => {
+    client.disconnect();
+    status.value = "connecting"; // Reset so next enter shows "connecting"
+  });
+
+  onUnmounted(() => {
+    client.disconnect();
+  });
+
+  function clearFeed() {
+    items.value = [];
+  }
+
+  function reconnect() {
+    status.value = "connecting";
+    client.resetCursor();
+    client.disconnect();
+    client.connect();
+  }
+
+  async function handleRefresh(event: CustomEvent) {
+    clearFeed();
+    client.resetCursor();
+    client.disconnect();
+    status.value = "connecting";
+    client.connect();
+    // Complete the refresher after a short delay
+    await new Promise<void>((resolve) => setTimeout(resolve, 1000));
+    (event.target as HTMLIonRefresherElement).complete();
+  }
+
+  function handleActorClick(item: ActivityItem) {
+    const handle = handleCache.value.get(item.actorDid);
+    if (handle && handle !== item.actorDid) {
+      router.push(`/tabs/activity/user/${handle}`);
+    } else {
+      // Resolve then navigate
+      resolveHandleFromDid(item.actorDid)
+        .then((h) => {
+          const next = new Map(handleCache.value);
+          next.set(item.actorDid, h);
+          handleCache.value = next;
+          router.push(`/tabs/activity/user/${h}`);
+        })
+        .catch(() => {
+          // Cannot navigate without a handle
+        });
+    }
+  }
+
+  function handleItemClick(item: ActivityItem) {
+    // Navigate to repo if we can determine owner handle and repo name
+    if (item.targetName && item.targetOwnerDid) {
+      const ownerHandle = handleCache.value.get(item.targetOwnerDid);
+      if (ownerHandle && ownerHandle !== item.targetOwnerDid) {
+        router.push(`/tabs/activity/repo/${ownerHandle}/${item.targetName}`);
+      }
+      // If handle not yet resolved, resolve it in background for future clicks
+      else {
+        resolveHandle(item.targetOwnerDid);
+      }
+    }
+  }
 </script>
+
+<style scoped>
+  /* Status bar */
+  .status-bar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    font-size: 12px;
+    font-weight: 500;
+    transition: background 0.2s;
+  }
+
+  .status-connecting {
+    color: var(--t-text-muted);
+    background: transparent;
+  }
+
+  .status-connected {
+    color: #34d399;
+  }
+
+  .status-disconnected {
+    color: #fb923c;
+  }
+
+  .status-icon {
+    font-size: 14px;
+    flex-shrink: 0;
+  }
+
+  /* Filter */
+  .filter-segment {
+    padding: 0 16px 8px;
+  }
+
+  /* Feed */
+  .feed {
+    padding-bottom: 24px;
+  }
+
+  /* New items pill */
+  .new-items-pill {
+    position: sticky;
+    bottom: 80px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: fit-content;
+    background: var(--t-accent);
+    color: #0d1117;
+    font-size: 12px;
+    font-weight: 700;
+    padding: 6px 14px;
+    border-radius: 999px;
+    cursor: pointer;
+    z-index: 10;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    margin: 0 auto 8px;
+    display: block;
+    text-align: center;
+  }
+</style>

apps/twisted/src/features/explore/ExplorePage.vue

···
         </ion-toolbar>
       </ion-header>
 
-      <section class="hero">
-        <p class="eyebrow">Indexed Search</p>
-        <h1 class="hero-title">Search the Tangled network through the project index.</h1>
-        <p class="hero-copy">
-          Explore uses the Twister index for global search. Open any result to continue browsing through Tangled's
-          public repo and profile APIs.
-        </p>
-      </section>
-
       <section class="search-card">
-        <label class="field-label" for="search-input">Search query</label>
         <ion-input
           id="search-input"
           v-model="draftQuery"
···
           autocapitalize="off"
           :spellcheck="false"
           clear-input
-          placeholder="Search repos, profiles, issues, and strings"
+          placeholder="Search repos and people…"
           @keydown.enter="runSearch" />
 
         <ion-segment v-model="resultType" class="search-segment">
···
           <ion-segment-button value="profile">People</ion-segment-button>
         </ion-segment>
 
-        <div class="action-row">
-          <ion-button class="primary-action" expand="block" @click="runSearch" :disabled="!canSearch">
-            Search
-          </ion-button>
-          <ion-button fill="outline" expand="block" @click="clearSearch" :disabled="!hasAnyQuery">Clear</ion-button>
+        <p v-if="!hasTwisterApi" class="hint-copy">
+          Set <code>VITE_TWISTER_API_BASE_URL</code> to enable global search.
+        </p>
+      </section>
+
+      <!-- Recent search history (shown when no active search) -->
+      <section v-if="showHistory" class="history-section">
+        <div class="history-header">
+          <span class="section-label">Recent</span>
+          <button class="clear-btn" type="button" @click="clearHistory">Clear all</button>
+        </div>
+        <div class="history-list">
+          <div v-for="entry in searchHistory" :key="entry.query" class="history-chip">
+            <button class="chip-label" type="button" @click="applyHistoryEntry(entry.query)">
+              <ion-icon :icon="timeOutline" class="chip-icon" />
+              {{ entry.query }}
+            </button>
+            <button class="chip-remove" type="button" @click="removeHistoryEntry(entry.query)" aria-label="Remove">
+              <ion-icon :icon="closeOutline" />
+            </button>
+          </div>
         </div>
-
-        <p v-if="hasTwisterApi" class="hint-copy">
-          Search results and follower counts come from the project index when available.
-        </p>
-        <p v-else class="hint-copy">
-          Set <code>VITE_TWISTER_API_BASE_URL</code> to enable global search and index-backed graph summaries.
-        </p>
       </section>
 
       <section class="results-section">
···
           v-if="!hasTwisterApi"
           :icon="searchOutline"
           title="Index API not configured"
-          message="Explore can search globally once the Twister API base URL is configured for this app." />
+          message="Explore can search globally once the Twister API base URL is configured." />
 
         <EmptyState
           v-else-if="!hasAttemptedSearch"
           :icon="searchOutline"
           title="Search repos and people"
-          message="Run a query against the project index, then open any result to continue browsing with Tangled's public APIs." />
+          message="Start typing to search the project index. Results are filtered by type using the segments above." />
 
         <template v-else-if="isLoading">
           <SkeletonLoader v-for="n in 3" :key="`repo-${n}`" variant="card" />
···
         <template v-else-if="hasResults">
           <div class="results-header">
             <div>
-              <p class="results-label">Indexed results</p>
+              <p class="results-label">Results for</p>
               <h2 class="results-title">{{ submittedQuery }}</h2>
             </div>
             <p class="results-meta">{{ totalLabel }}</p>
···
         <EmptyState
           v-else
           :icon="searchOutline"
-          title="No indexed matches"
-          message="Try a different query, or use Home to jump directly to a known handle." />
+          title="No results"
+          message="Try a different query. Use Home to jump directly to a known handle." />
       </section>
     </ion-content>
   </ion-page>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
-import { useRouter } from "vue-router";
-import {
-  IonPage,
-  IonHeader,
-  IonToolbar,
-  IonTitle,
-  IonContent,
-  IonInput,
-  IonButton,
-  IonSegment,
-  IonSegmentButton,
-} from "@ionic/vue";
-import { alertCircleOutline, searchOutline } from "ionicons/icons";
-import EmptyState from "@/components/common/EmptyState.vue";
-import RepoCard from "@/components/common/RepoCard.vue";
-import SkeletonLoader from "@/components/common/SkeletonLoader.vue";
-import UserCard from "@/components/common/UserCard.vue";
-import { hasTwisterApi } from "@/core/config/project.js";
-import type { RepoSummary } from "@/domain/models/repo.js";
-import { useProjectSearch } from "@/services/project-api/queries.js";
+  import { computed, ref, watch, onUnmounted } from "vue";
+  import { useRouter } from "vue-router";
+  import {
+    IonPage,
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonInput,
+    IonSegment,
+    IonSegmentButton,
+    IonIcon,
+  } from "@ionic/vue";
+  import { alertCircleOutline, searchOutline, timeOutline, closeOutline } from "ionicons/icons";
+  import EmptyState from "@/components/common/EmptyState.vue";
+  import RepoCard from "@/components/common/RepoCard.vue";
+  import SkeletonLoader from "@/components/common/SkeletonLoader.vue";
+  import UserCard from "@/components/common/UserCard.vue";
+  import { hasTwisterApi } from "@/core/config/project.js";
+  import {
+    getSearchHistory,
+    addToSearchHistory,
+    removeFromSearchHistory,
+    clearSearchHistory,
+  } from "@/core/search-history/index.js";
+  import { trackRepoVisit, trackProfileVisit } from "@/core/browse-history/index.js";
+  import type { SearchHistoryEntry } from "@/core/search-history/index.js";
+  import type { RepoSummary } from "@/domain/models/repo.js";
+  import { useProjectSearch } from "@/services/project-api/queries.js";
 
-const router = useRouter();
+  const router = useRouter();
 
-const draftQuery = ref("");
-const submittedQuery = ref("");
-const hasAttemptedSearch = ref(false);
-const resultType = ref<"all" | "repo" | "profile">("all");
+  const draftQuery = ref("");
+  const submittedQuery = ref("");
+  const hasAttemptedSearch = ref(false);
+  const resultType = ref<"all" | "repo" | "profile">("all");
+  const searchHistory = ref<SearchHistoryEntry[]>(getSearchHistory());
 
-const hasAnyQuery = computed(() => draftQuery.value.trim().length > 0 || submittedQuery.value.length > 0);
-const canSearch = computed(() => hasTwisterApi && draftQuery.value.trim().length > 0);
+  const showHistory = computed(
+    () => searchHistory.value.length > 0 && !draftQuery.value.trim() && !hasAttemptedSearch.value,
+  );
+
+  const searchQuery = useProjectSearch(submittedQuery, {
+    type: resultType,
+    enabled: computed(() => hasTwisterApi && hasAttemptedSearch.value && submittedQuery.value.length > 0),
+  });
+
+  const repos = computed(() => searchQuery.data.value?.repos ?? []);
+  const profiles = computed(() => searchQuery.data.value?.profiles ?? []);
+  const hasResults = computed(() => repos.value.length > 0 || profiles.value.length > 0);
+  const isLoading = computed(() => searchQuery.isPending.value);
+  const isError = computed(() => searchQuery.isError.value);
+  const errorMessage = computed(() => {
+    const err = searchQuery.error.value;
+    return err instanceof Error ? err.message : "An unexpected error occurred while searching the project index.";
+  });
+  const totalLabel = computed(() => {
+    const total = searchQuery.data.value?.total ?? repos.value.length + profiles.value.length;
+    return `${total} result${total === 1 ? "" : "s"}`;
+  });
+
+  let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+  watch(draftQuery, (val) => {
+    if (debounceTimer) clearTimeout(debounceTimer);
+
+    const trimmed = val.trim();
+    if (!trimmed) {
+      return;
+    }
+
+    if (!hasTwisterApi) return;
+
+    debounceTimer = setTimeout(() => {
+      submittedQuery.value = trimmed;
+      hasAttemptedSearch.value = true;
+      addToSearchHistory(trimmed);
+      searchHistory.value = getSearchHistory();
+    }, 400);
+  });
+
+  onUnmounted(() => {
+    if (debounceTimer) clearTimeout(debounceTimer);
+  });
 
-const searchQuery = useProjectSearch(submittedQuery, {
-  type: resultType,
-  enabled: computed(() => hasTwisterApi && hasAttemptedSearch.value && submittedQuery.value.length > 0),
-});
+  function runSearch() {
+    if (!hasTwisterApi) return;
+    const trimmed = draftQuery.value.trim();
+    if (!trimmed) return;
+    if (debounceTimer) clearTimeout(debounceTimer);
+    submittedQuery.value = trimmed;
+    hasAttemptedSearch.value = true;
+    addToSearchHistory(trimmed);
+    searchHistory.value = getSearchHistory();
+  }
 
-const repos = computed(() => searchQuery.data.value?.repos ?? []);
-const profiles = computed(() => searchQuery.data.value?.profiles ?? []);
-const hasResults = computed(() => repos.value.length > 0 || profiles.value.length > 0);
-const isLoading = computed(() => searchQuery.isPending.value);
-const isError = computed(() => searchQuery.isError.value);
-const errorMessage = computed(() => {
-  const err = searchQuery.error.value;
-  return err instanceof Error ? err.message : "An unexpected error occurred while searching the project index.";
-});
-const totalLabel = computed(() => {
-  const total = searchQuery.data.value?.total ?? repos.value.length + profiles.value.length;
-  return `${total} indexed result${total === 1 ? "" : "s"}`;
-});
+  function applyHistoryEntry(query: string) {
+    draftQuery.value = query;
+    submittedQuery.value = query;
+    hasAttemptedSearch.value = true;
+  }
 
-function runSearch() {
-  if (!canSearch.value) return;
-  submittedQuery.value = draftQuery.value.trim();
-  hasAttemptedSearch.value = true;
-}
+  function removeHistoryEntry(query: string) {
+    removeFromSearchHistory(query);
+    searchHistory.value = getSearchHistory();
+  }
 
-function clearSearch() {
-  draftQuery.value = "";
-  submittedQuery.value = "";
-  hasAttemptedSearch.value = false;
-}
+  function clearHistory() {
+    clearSearchHistory();
+    searchHistory.value = [];
+  }
 
-function navigateToRepo(repo: RepoSummary) {
-  router.push(`/tabs/explore/repo/${repo.ownerHandle}/${repo.name}`);
-}
+  function navigateToRepo(repo: RepoSummary) {
+    trackRepoVisit({
+      ownerHandle: repo.ownerHandle,
+      name: repo.name,
+      description: repo.description,
+      primaryLanguage: repo.primaryLanguage,
+      stars: repo.stars,
+    });
+    router.push(`/tabs/explore/repo/${repo.ownerHandle}/${repo.name}`);
+  }
 
-function navigateToUser(handle: string) {
-  router.push(`/tabs/explore/user/${handle}`);
-}
+  function navigateToUser(handle: string) {
+    trackProfileVisit({ handle });
+    router.push(`/tabs/explore/user/${handle}`);
+  }
 </script>
 
 <style scoped>
-.hero {
-  padding: 24px 20px 12px;
-}
+  .search-card {
+    margin: 16px 16px 0;
+    padding: 14px 14px 12px;
+    border: 1px solid var(--t-border);
+    border-radius: var(--t-radius-lg);
+    background: linear-gradient(180deg, var(--t-surface-raised), var(--t-surface));
+  }
 
-.eyebrow {
-  margin: 0 0 10px;
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--t-accent);
-}
+  .search-input {
+    --background: rgba(255, 255, 255, 0.04);
+    --border-radius: var(--t-radius-md);
+    --color: var(--t-text-primary);
+    --padding-start: 14px;
+    --padding-end: 14px;
+    margin-bottom: 10px;
+    border: 1px solid var(--t-border);
+    border-radius: var(--t-radius-md);
+    font-family: var(--t-mono);
+  }
 
-.hero-title {
-  margin: 0;
-  font-size: 28px;
-  line-height: 1.15;
-  color: var(--t-text-primary);
-}
+  .search-segment {
+    margin-bottom: 4px;
+  }
 
-.hero-copy {
-  margin: 12px 0 0;
-  font-size: 14px;
-  line-height: 1.6;
-  color: var(--t-text-secondary);
-  max-width: 34rem;
-}
+  .hint-copy {
+    margin: 8px 0 0;
+    font-size: 12px;
+    line-height: 1.5;
+    color: var(--t-text-muted);
+  }
 
-.search-card {
-  margin: 0 16px;
-  padding: 18px 16px 16px;
-  border: 1px solid var(--t-border);
-  border-radius: var(--t-radius-lg);
-  background: linear-gradient(180deg, var(--t-surface-raised), var(--t-surface));
-}
+  .history-section {
+    padding: 14px 16px 4px;
+  }
 
-.field-label {
-  display: block;
-  margin-bottom: 8px;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--t-text-primary);
-}
+  .history-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+  }
 
-.search-input {
-  --background: rgba(255, 255, 255, 0.04);
-  --border-radius: var(--t-radius-md);
-  --color: var(--t-text-primary);
-  --padding-start: 14px;
-  --padding-end: 14px;
-  margin-bottom: 12px;
-  border: 1px solid var(--t-border);
-  border-radius: var(--t-radius-md);
-  font-family: var(--t-mono);
-}
+  .clear-btn {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+    font-size: 12px;
+    color: var(--t-text-muted);
+  }
 
-.search-segment {
-  margin-bottom: 12px;
-}
+  .history-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
 
-.action-row {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px;
-}
+  .history-chip {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    border: 1px solid var(--t-border);
+    border-radius: 999px;
+    background: var(--t-surface);
+    overflow: hidden;
+  }
 
-.primary-action {
-  --background: var(--t-accent);
-  --background-activated: var(--t-accent);
-  --color: #0d1117;
-}
+  .chip-label {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    appearance: none;
+    background: transparent;
+    border: 0;
+    padding: 5px 10px 5px 10px;
+    cursor: pointer;
+    font-size: 13px;
+    color: var(--t-text-primary);
+    font-family: var(--t-mono);
+  }
 
-.hint-copy {
-  margin: 12px 0 0;
-  font-size: 12px;
-  line-height: 1.5;
-  color: var(--t-text-muted);
-}
+  .chip-icon {
+    font-size: 13px;
+    color: var(--t-text-muted);
+    flex-shrink: 0;
+  }
+
+  .chip-remove {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    border-left: 1px solid var(--t-border);
+    padding: 5px 8px;
+    cursor: pointer;
+    font-size: 13px;
+    color: var(--t-text-muted);
+    display: flex;
+    align-items: center;
+  }
 
-.results-section {
-  padding: 18px 0 24px;
-}
+  .results-section {
+    padding: 14px 0 24px;
+  }
 
-.results-header {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 12px;
-  margin: 0 16px 12px;
-}
+  .results-header {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 12px;
+    margin: 0 16px 12px;
+  }
 
-.results-label {
-  margin: 0 0 4px;
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--t-accent);
-}
+  .results-label {
+    margin: 0 0 2px;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--t-accent);
+  }
 
-.results-title {
-  margin: 0;
-  font-size: 20px;
-  line-height: 1.2;
-  color: var(--t-text-primary);
-}
+  .results-title {
+    margin: 0;
+    font-size: 18px;
+    line-height: 1.2;
+    color: var(--t-text-primary);
+  }
 
-.results-meta {
-  margin: 0;
-  font-size: 12px;
-  color: var(--t-text-muted);
-}
+  .results-meta {
+    margin: 0;
+    font-size: 12px;
+    color: var(--t-text-muted);
+    white-space: nowrap;
+  }
 
-.section-label {
-  margin: 0 16px 8px;
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--t-text-muted);
-}
+  .section-label {
+    display: block;
+    margin: 0 16px 8px;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--t-text-muted);
+  }
 </style>

apps/twisted/src/features/home/HomePage.vue

···
         </ion-toolbar>
       </ion-header>
 
-      <section class="hero">
-        <p class="eyebrow">Profile Browser</p>
-        <h1 class="hero-title">Jump straight to a Tangled profile or repo.</h1>
-        <p class="hero-copy">
-          Enter an AT Protocol handle, then open the profile directly or resolve the user's Personal Data Server and
-          browse their public repositories here.
-        </p>
-      </section>
-
       <section class="lookup-card">
         <label class="field-label" for="handle-input">AT Protocol handle</label>
         <ion-input
···
           </ion-button>
         </div>
 
-        <p class="hint-copy">
-          Home is still the fastest way to jump to a known handle directly.
-        </p>
+        <p class="hint-copy">Home is the fastest way to jump to a known handle directly.</p>
+      </section>
+
+      <!-- Recently viewed repos & profiles -->
+      <section v-if="hasRecentItems && !hasAttemptedBrowse" class="recent-section">
+        <div class="recent-header">
+          <span class="section-label">Recently Viewed</span>
+          <button class="clear-btn" type="button" @click="clearRecent">Clear</button>
+        </div>
+
+        <template v-if="recentProfiles.length">
+          <p class="recent-group-label">Profiles</p>
+          <ion-item
+            v-for="profile in recentProfiles"
+            :key="profile.handle"
+            button
+            lines="none"
+            class="recent-item"
+            @click="openRecentProfile(profile.handle)">
+            <div slot="start" class="recent-avatar" :style="{ background: avatarColor(profile.handle) }">
+              {{ initials(profile.handle) }}
+            </div>
+            <ion-label>
+              <div class="recent-handle">{{ profile.handle }}</div>
+              <div v-if="profile.displayName" class="recent-name">{{ profile.displayName }}</div>
+            </ion-label>
+          </ion-item>
+        </template>
+
+        <template v-if="recentRepos.length">
+          <p class="recent-group-label">Repos</p>
+          <ion-item
+            v-for="repo in recentRepos"
+            :key="`${repo.ownerHandle}/${repo.name}`"
+            button
+            lines="none"
+            class="recent-item"
+            @click="openRecentRepo(repo)">
+            <ion-label>
+              <div class="recent-repo-title">
+                <span class="recent-owner">{{ repo.ownerHandle }}</span
+                ><span class="recent-sep">/</span><span class="recent-repo-name">{{ repo.name }}</span>
+              </div>
+              <div v-if="repo.description" class="recent-desc">{{ repo.description }}</div>
+            </ion-label>
+            <div v-if="repo.primaryLanguage" slot="end" class="lang-badge">{{ repo.primaryLanguage }}</div>
+          </ion-item>
+        </template>
       </section>
 
       <section v-if="hasAttemptedBrowse" class="results-section">
···
             v-else
             :icon="folderOpenOutline"
             title="No public repos yet"
-            message="This handle resolved successfully, but there are no public Tangled repositories to browse yet." />
+            message="This handle resolved successfully, but there are no public Tangled repositories yet." />
         </template>
       </section>
 
-      <section v-else class="results-section">
+      <section v-else-if="!hasRecentItems" class="results-section">
         <EmptyState
           :icon="compassOutline"
           title="Browse by handle"
-          message="Browse Tangled repositories by entering a handle above." />
+          message="Enter an AT Protocol handle above to view their profile and repos." />
       </section>
     </ion-content>
   </ion-page>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
-import { useRouter } from "vue-router";
-import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonInput, IonButton } from "@ionic/vue";
-import { alertCircleOutline, compassOutline, folderOpenOutline } from "ionicons/icons";
-import RepoCard from "@/components/common/RepoCard.vue";
-import SkeletonLoader from "@/components/common/SkeletonLoader.vue";
-import EmptyState from "@/components/common/EmptyState.vue";
-import { useIdentity, useUserRepos, useActorProfile } from "@/services/tangled/queries.js";
-import type { RepoSummary } from "@/domain/models/repo.js";
+  import { computed, ref } from "vue";
+  import { useRouter } from "vue-router";
+  import {
+    IonPage,
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonInput,
+    IonButton,
+    IonItem,
+    IonLabel,
+  } from "@ionic/vue";
+  import { alertCircleOutline, compassOutline, folderOpenOutline } from "ionicons/icons";
+  import RepoCard from "@/components/common/RepoCard.vue";
+  import SkeletonLoader from "@/components/common/SkeletonLoader.vue";
+  import EmptyState from "@/components/common/EmptyState.vue";
+  import { useIdentity, useUserRepos, useActorProfile } from "@/services/tangled/queries.js";
+  import {
+    trackRepoVisit,
+    trackProfileVisit,
+    getRecentRepos,
+    getRecentProfiles,
+    clearBrowseHistory,
+  } from "@/core/browse-history/index.js";
+  import type { RepoSummary } from "@/domain/models/repo.js";
+  import type { RecentRepo, RecentProfile } from "@/core/browse-history/index.js";
 
-const router = useRouter();
+  const router = useRouter();
 
-const draftHandle = ref("");
-const activeHandle = ref("");
-const hasAttemptedBrowse = ref(false);
+  const draftHandle = ref("");
+  const activeHandle = ref("");
+  const hasAttemptedBrowse = ref(false);
+  const recentRepos = ref<RecentRepo[]>(getRecentRepos());
+  const recentProfiles = ref<RecentProfile[]>(getRecentProfiles());
 
-const normalizedHandle = computed(() => draftHandle.value.trim().toLowerCase());
-const hasHandle = computed(() => normalizedHandle.value.length > 0);
+  const normalizedHandle = computed(() => draftHandle.value.trim().toLowerCase());
+  const hasHandle = computed(() => normalizedHandle.value.length > 0);
+  const hasRecentItems = computed(() => recentRepos.value.length > 0 || recentProfiles.value.length > 0);
 
-const identity = useIdentity(activeHandle, { enabled: computed(() => !!activeHandle.value) });
-const did = computed(() => identity.data.value?.did ?? "");
-const pds = computed(() => identity.data.value?.pds ?? "");
-const hasResolvedIdentity = computed(() => !!identity.data.value);
+  const identity = useIdentity(activeHandle, { enabled: computed(() => !!activeHandle.value) });
+  const did = computed(() => identity.data.value?.did ?? "");
+  const pds = computed(() => identity.data.value?.pds ?? "");
+  const hasResolvedIdentity = computed(() => !!identity.data.value);
 
-const profileQuery = useActorProfile(pds, did, activeHandle, undefined, { enabled: hasResolvedIdentity });
-const reposQuery = useUserRepos(pds, did, activeHandle, { enabled: hasResolvedIdentity });
+  const profileQuery = useActorProfile(pds, did, activeHandle, undefined, { enabled: hasResolvedIdentity });
+  const reposQuery = useUserRepos(pds, did, activeHandle, { enabled: hasResolvedIdentity });
 
-const repos = computed(() => reposQuery.data.value ?? []);
-const displayName = computed(() => profileQuery.data.value?.displayName ?? "Public Tangled account");
-const repoCountLabel = computed(() => `${repos.value.length} repo${repos.value.length === 1 ? "" : "s"}`);
-const isBrowsing = computed(() => hasAttemptedBrowse.value && activeHandle.value === normalizedHandle.value && isLoading.value);
-const isLoading = computed(
-  () =>
-    hasAttemptedBrowse.value &&
-    activeHandle.value.length > 0 &&
-    (identity.isPending.value || (hasResolvedIdentity.value && reposQuery.isPending.value)),
-);
-const isError = computed(() => hasAttemptedBrowse.value && (identity.isError.value || reposQuery.isError.value));
-const errorMessage = computed(() => {
-  const err = identity.error.value ?? reposQuery.error.value;
-  return err instanceof Error ? err.message : "An unexpected error occurred while resolving this handle.";
-});
+  const repos = computed(() => reposQuery.data.value ?? []);
+  const displayName = computed(() => profileQuery.data.value?.displayName ?? "Public Tangled account");
+  const repoCountLabel = computed(() => `${repos.value.length} repo${repos.value.length === 1 ? "" : "s"}`);
+  const isBrowsing = computed(
+    () => hasAttemptedBrowse.value && activeHandle.value === normalizedHandle.value && isLoading.value,
+  );
+  const isLoading = computed(
+    () =>
+      hasAttemptedBrowse.value &&
+      activeHandle.value.length > 0 &&
+      (identity.isPending.value || (hasResolvedIdentity.value && reposQuery.isPending.value)),
+  );
+  const isError = computed(() => hasAttemptedBrowse.value && (identity.isError.value || reposQuery.isError.value));
+  const errorMessage = computed(() => {
+    const err = identity.error.value ?? reposQuery.error.value;
+    return err instanceof Error ? err.message : "An unexpected error occurred while resolving this handle.";
+  });
+
+  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 openProfile() {
-  if (!hasHandle.value) return;
-  router.push(`/tabs/home/user/${normalizedHandle.value}`);
-}
+  function initials(handle: string): string {
+    const base = handle.split(".")[0];
+    return base.slice(0, 2).toUpperCase();
+  }
 
-function browseRepos() {
-  if (!hasHandle.value) return;
-  hasAttemptedBrowse.value = true;
-  activeHandle.value = normalizedHandle.value;
-}
+  function openProfile() {
+    if (!hasHandle.value) return;
+    trackProfileVisit({ handle: normalizedHandle.value });
+    router.push(`/tabs/home/user/${normalizedHandle.value}`);
+  }
 
-function openResolvedProfile() {
-  if (!activeHandle.value) return;
-  router.push(`/tabs/home/user/${activeHandle.value}`);
-}
+  function browseRepos() {
+    if (!hasHandle.value) return;
+    hasAttemptedBrowse.value = true;
+    activeHandle.value = normalizedHandle.value;
+  }
 
-function navigateToRepo(repo: RepoSummary) {
-  router.push(`/tabs/home/repo/${repo.ownerHandle}/${repo.name}`);
-}
+  function openResolvedProfile() {
+    if (!activeHandle.value) return;
+    trackProfileVisit({
+      handle: activeHandle.value,
+      displayName: profileQuery.data.value?.displayName,
+      bio: profileQuery.data.value?.bio,
+    });
+    router.push(`/tabs/home/user/${activeHandle.value}`);
+  }
+
+  function navigateToRepo(repo: RepoSummary) {
+    trackRepoVisit({
+      ownerHandle: repo.ownerHandle,
+      name: repo.name,
+      description: repo.description,
+      primaryLanguage: repo.primaryLanguage,
+      stars: repo.stars,
+    });
+    router.push(`/tabs/home/repo/${repo.ownerHandle}/${repo.name}`);
+  }
+
+  function openRecentProfile(handle: string) {
+    trackProfileVisit({ handle });
+    router.push(`/tabs/home/user/${handle}`);
+  }
+
+  function openRecentRepo(repo: RecentRepo) {
+    trackRepoVisit(repo);
+    recentRepos.value = getRecentRepos();
+    router.push(`/tabs/home/repo/${repo.ownerHandle}/${repo.name}`);
+  }
+
+  function clearRecent() {
+    clearBrowseHistory();
+    recentRepos.value = [];
+    recentProfiles.value = [];
+  }
 </script>
 
 <style scoped>
-.hero {
-  padding: 24px 20px 12px;
-}
+  .lookup-card {
+    margin: 16px 16px 0;
+    padding: 18px 16px 16px;
+    border: 1px solid var(--t-border);
+    border-radius: var(--t-radius-lg);
+    background: linear-gradient(180deg, var(--t-surface-raised), var(--t-surface));
+  }
+
+  .field-label {
+    display: block;
+    margin-bottom: 8px;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--t-text-primary);
+  }
 
-.eyebrow {
-  margin: 0 0 10px;
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--t-accent);
-}
+  .handle-input {
+    --background: rgba(255, 255, 255, 0.04);
+    --border-radius: var(--t-radius-md);
+    --color: var(--t-text-primary);
+    --padding-start: 14px;
+    --padding-end: 14px;
+    margin-bottom: 12px;
+    border: 1px solid var(--t-border);
+    border-radius: var(--t-radius-md);
+    font-family: var(--t-mono);
+  }
+
+  .action-row {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 10px;
+  }
+
+  .primary-action {
+    --background: var(--t-accent);
+    --background-activated: var(--t-accent);
+    --color: #0d1117;
+  }
 
-.hero-title {
-  margin: 0;
-  font-size: 28px;
-  line-height: 1.15;
-  color: var(--t-text-primary);
-}
+  .hint-copy {
+    margin: 12px 0 0;
+    font-size: 12px;
+    line-height: 1.5;
+    color: var(--t-text-muted);
+  }
 
-.hero-copy {
-  margin: 12px 0 0;
-  font-size: 14px;
-  line-height: 1.6;
-  color: var(--t-text-secondary);
-  max-width: 34rem;
-}
+  .recent-section {
+    padding: 16px 0 8px;
+  }
 
-.lookup-card {
-  margin: 0 16px;
-  padding: 18px 16px 16px;
-  border: 1px solid var(--t-border);
-  border-radius: var(--t-radius-lg);
-  background: linear-gradient(180deg, var(--t-surface-raised), var(--t-surface));
-}
+  .recent-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 16px;
+    margin-bottom: 10px;
+  }
 
-.field-label {
-  display: block;
-  margin-bottom: 8px;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--t-text-primary);
-}
+  .section-label {
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--t-text-muted);
+  }
 
-.handle-input {
-  --background: rgba(255, 255, 255, 0.04);
-  --border-radius: var(--t-radius-md);
-  --color: var(--t-text-primary);
-  --padding-start: 14px;
-  --padding-end: 14px;
-  margin-bottom: 12px;
-  border: 1px solid var(--t-border);
-  border-radius: var(--t-radius-md);
-  font-family: var(--t-mono);
-}
+  .clear-btn {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+    font-size: 12px;
+    color: var(--t-text-muted);
+  }
 
-.action-row {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px;
-}
+  .recent-group-label {
+    margin: 8px 16px 4px;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: var(--t-text-muted);
+  }
 
-.primary-action {
-  --background: var(--t-accent);
-  --background-activated: var(--t-accent);
-  --color: #0d1117;
-}
+  .recent-item {
+    --background: transparent;
+    --padding-start: 16px;
+    --padding-end: 16px;
+    --inner-padding-end: 0;
+    --min-height: 48px;
+  }
 
-.hint-copy {
-  margin: 12px 0 0;
-  font-size: 12px;
-  line-height: 1.5;
-  color: var(--t-text-muted);
-}
+  .recent-avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: var(--t-radius-sm);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--t-mono);
+    font-size: 11px;
+    font-weight: 700;
+    color: #0d1117;
+    margin-right: 12px;
+    flex-shrink: 0;
+  }
 
-.results-section {
-  padding: 18px 0 24px;
-}
+  .recent-handle {
+    font-family: var(--t-mono);
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--t-accent);
+  }
 
-.resolved-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-  margin: 0 16px 10px;
-  padding: 16px;
-  border: 1px solid var(--t-border);
-  border-radius: var(--t-radius-md);
-  background: var(--t-surface);
-}
+  .recent-name {
+    font-size: 12px;
+    color: var(--t-text-secondary);
+    margin-top: 1px;
+  }
 
-.resolved-copy {
-  min-width: 0;
-}
+  .recent-repo-title {
+    font-family: var(--t-mono);
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--t-text-primary);
+    line-height: 1.3;
+  }
 
-.resolved-label {
-  margin: 0 0 6px;
-  font-size: 12px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--t-text-muted);
-}
+  .recent-owner {
+    color: var(--t-text-secondary);
+  }
 
-.resolved-title {
-  margin: 0;
-  font-size: 15px;
-  color: var(--t-text-primary);
-  word-break: break-word;
-}
+  .recent-sep {
+    color: var(--t-text-muted);
+    margin: 0 1px;
+  }
 
-.resolved-meta {
-  margin: 8px 0 0;
-  font-size: 13px;
-  color: var(--t-text-secondary);
-}
+  .recent-repo-name {
+    color: var(--t-accent);
+  }
 
-.meta-separator {
-  margin: 0 6px;
-  color: var(--t-text-muted);
-}
+  .recent-desc {
+    font-size: 12px;
+    color: var(--t-text-muted);
+    margin-top: 2px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
-@media (max-width: 480px) {
-  .hero-title {
-    font-size: 24px;
+  .lang-badge {
+    font-family: var(--t-mono);
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--t-text-muted);
+    padding: 2px 6px;
+    border: 1px solid var(--t-border);
+    border-radius: 999px;
   }
 
-  .action-row {
-    grid-template-columns: 1fr;
+  /* Browse results */
+
+  .results-section {
+    padding: 18px 0 24px;
   }
 
   .resolved-header {
-    flex-direction: column;
-    align-items: stretch;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px;
+    margin: 0 16px 10px;
+    padding: 16px;
+    border: 1px solid var(--t-border);
+    border-radius: var(--t-radius-md);
+    background: var(--t-surface);
   }
-}
+
+  .resolved-copy {
+    min-width: 0;
+  }
+
+  .resolved-label {
+    margin: 0 0 6px;
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--t-text-muted);
+  }
+
+  .resolved-title {
+    margin: 0;
+    font-size: 15px;
+    color: var(--t-text-primary);
+    word-break: break-word;
+  }
+
+  .resolved-meta {
+    margin: 8px 0 0;
+    font-size: 13px;
+    color: var(--t-text-secondary);
+  }
+
+  .meta-separator {
+    margin: 0 6px;
+    color: var(--t-text-muted);
+  }
+
+  .mono {
+    font-family: var(--t-mono);
+  }
+
+  @media (max-width: 480px) {
+    .action-row {
+      grid-template-columns: 1fr;
+    }
+
+    .resolved-header {
+      flex-direction: column;
+      align-items: stretch;
+    }
+  }
 </style>

apps/twisted/src/features/repo/RepoDetailPage.vue

···
   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";
 
···
   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(pds, did, owner, repoAtUri, { enabled: hasAtUri });
 const prsQuery = useRepoPRs(pds, did, owner, repoAtUri, { enabled: hasAtUri });

apps/twisted/src/services/constellation/queries.ts

···
+/**
+ * TanStack Query hooks for the Constellation backlink API.
+ * https://constellation.microcosm.blue
+ *
+ * Constellation is a public AT Protocol backlink index. It answers
+ * "how many records link to this subject?" — star counts, follower
+ * counts, reaction counts — without requiring authentication.
+ *
+ * Calling it directly from the app avoids adding per-resource endpoints
+ * to the Twister API for every social signal we need.
+ */
+import { useQuery } from "@tanstack/vue-query";
+import { computed, toValue } from "vue";
+import type { MaybeRef } from "vue";
+
+const CONSTELLATION_BASE = "https://constellation.microcosm.blue";
+
+// AT Protocol collection + field paths used as Constellation "sources".
+const SOURCE_STAR = "sh.tangled.feed.star:subject.uri";
+const SOURCE_FOLLOW = "sh.tangled.graph.follow:subject";
+
+const MIN = 60_000;
+
+async function fetchBacklinksCount(subject: string, source: string): Promise<number> {
+  const url = new URL(`${CONSTELLATION_BASE}/xrpc/blue.microcosm.links.getBacklinksCount`);
+  url.searchParams.set("subject", subject);
+  url.searchParams.set("source", source);
+
+  const res = await fetch(url.toString(), {
+    headers: { Accept: "application/json" },
+  });
+
+  if (!res.ok) {
+    throw new Error(`Constellation request failed: ${res.status}`);
+  }
+
+  const data = (await res.json()) as { count: number };
+  return data.count;
+}
+
+/**
+ * Fetches the star count for a repo AT URI from Constellation.
+ * atUri should be in the form "at://did:plc:.../sh.tangled.repo/reponame".
+ */
+export function useRepoStarCount(atUri: MaybeRef<string>, options: { enabled?: MaybeRef<boolean> } = {}) {
+  const normalizedUri = computed(() => toValue(atUri).trim());
+  const enabled = computed(
+    () => normalizedUri.value.length > 0 && (options.enabled === undefined || !!toValue(options.enabled)),
+  );
+
+  return useQuery({
+    queryKey: computed(() => ["constellationStars", normalizedUri.value]),
+    queryFn: () => fetchBacklinksCount(normalizedUri.value, SOURCE_STAR),
+    enabled,
+    staleTime: 5 * MIN,
+    gcTime: 30 * MIN,
+  });
+}
+
+/**
+ * Fetches the follower count for a DID from Constellation.
+ */
+export function useFollowerCount(did: MaybeRef<string>, options: { enabled?: MaybeRef<boolean> } = {}) {
+  const normalizedDid = computed(() => toValue(did).trim());
+  const enabled = computed(
+    () => normalizedDid.value.length > 0 && (options.enabled === undefined || !!toValue(options.enabled)),
+  );
+
+  return useQuery({
+    queryKey: computed(() => ["constellationFollowers", normalizedDid.value]),
+    queryFn: () => fetchBacklinksCount(normalizedDid.value, SOURCE_FOLLOW),
+    enabled,
+    staleTime: 5 * MIN,
+    gcTime: 30 * MIN,
+  });
+}

apps/twisted/src/services/jetstream/client.ts

···
+/**
+ * JetstreamClient — subscribes to the AT Protocol Jetstream WebSocket firehose
+ * and filters for sh.tangled.* collection events, emitting ActivityItems.
+ *
+ * Connects on demand, auto-reconnects after disconnection, and tracks the last
+ * event cursor so gap-free resume is possible on reconnect.
+ *
+ * Data source decision: Jetstream is chosen over PDS polling because it provides
+ * a public, real-time stream of all network events without requiring authentication
+ * or prior knowledge of specific user DIDs. PDS polling would require a known list
+ * of accounts to follow, and the Twister API does not yet expose an activity feed.
+ */
+import type { ActivityItem } from "@/domain/models/activity.js";
+
+const JETSTREAM_URL = "wss://jetstream2.us-east.bsky.network/subscribe";
+const MAX_ITEMS = 200;
+const RECONNECT_DELAY_MS = 3_000;
+
+const WANTED_COLLECTIONS = [
+  "sh.tangled.repo",
+  "sh.tangled.feed.star",
+  "sh.tangled.graph.follow",
+  "sh.tangled.repo.issue",
+  "sh.tangled.repo.issue.state",
+  "sh.tangled.repo.pull",
+];
+
+type JetstreamRecord = Record<string, unknown>;
+
+type JetstreamCommit = {
+  rev: string;
+  operation: "create" | "update" | "delete";
+  collection: string;
+  rkey: string;
+  record?: JetstreamRecord;
+  cid?: string;
+};
+
+type JetstreamEventKind = "commit" | "identity" | "account";
+
+type JetstreamEvent = { did: string; time_us: number; kind: JetstreamEventKind; commit?: JetstreamCommit };
+
+export type JetstreamCallbacks = {
+  onEvent: (item: ActivityItem) => void;
+  onConnected?: () => void;
+  onDisconnected?: () => void;
+  onError?: () => void;
+};
+
+function extractAtUri(record: JetstreamRecord, field: string): string {
+  const subject = record[field] as { uri?: string } | string | undefined;
+  if (typeof subject === "string") return subject;
+  return subject?.uri ?? "";
+}
+
+/** Extract the last path segment of an AT URI (the rkey / repo name). */
+function atUriRkey(atUri: string): string | undefined {
+  const seg = atUri.split("/").pop();
+  return seg || undefined;
+}
+
+/** Extract the DID embedded in an AT URI (at://did:plc:.../collection/rkey). */
+function atUriDid(atUri: string): string | undefined {
+  const match = /^at:\/\/(did:[^/]+)/.exec(atUri);
+  return match?.[1];
+}
+
+function toActivityKind(commit: JetstreamCommit): ActivityItem["kind"] | null {
+  if (commit.operation === "delete") return null;
+
+  switch (commit.collection) {
+    case "sh.tangled.repo":
+      return commit.operation === "create" ? "repo_created" : null;
+    case "sh.tangled.feed.star":
+      return commit.operation === "create" ? "repo_starred" : null;
+    case "sh.tangled.graph.follow":
+      return commit.operation === "create" ? "user_followed" : null;
+    case "sh.tangled.repo.issue":
+      return commit.operation === "create" ? "issue_opened" : null;
+    case "sh.tangled.repo.issue.state": {
+      if (commit.operation !== "create" || !commit.record) return null;
+      const status = commit.record["status"] as string | undefined;
+      return status === "closed" ? "issue_closed" : null;
+    }
+    case "sh.tangled.repo.pull":
+      return commit.operation === "create" ? "pr_opened" : null;
+    default:
+      return null;
+  }
+}
+
+function extractTargetInfo(commit: JetstreamCommit): { targetName?: string; targetOwnerDid?: string } {
+  const record = commit.record;
+  if (!record) return {};
+
+  switch (commit.collection) {
+    case "sh.tangled.repo": {
+      return { targetName: record["name"] as string | undefined };
+    }
+    case "sh.tangled.feed.star": {
+      const uri = extractAtUri(record, "subject");
+      return { targetName: atUriRkey(uri), targetOwnerDid: atUriDid(uri) };
+    }
+    case "sh.tangled.graph.follow": {
+      const subject = record["subject"] as string | undefined;
+      return { targetOwnerDid: subject };
+    }
+    case "sh.tangled.repo.issue":
+    case "sh.tangled.repo.issue.state":
+    case "sh.tangled.repo.pull": {
+      const uri = extractAtUri(record, "subject");
+      return { targetName: atUriRkey(uri), targetOwnerDid: atUriDid(uri) };
+    }
+    default:
+      return {};
+  }
+}
+
+/** Returns a short, human-readable identifier from a DID while the handle is being resolved. */
+function placeholderHandle(did: string): string {
+  const parts = did.split(":");
+  const id = parts[2] ?? did;
+  return id.length > 10 ? `${id.slice(0, 10)}…` : id;
+}
+
+export class JetstreamClient {
+  private ws: WebSocket | null = null;
+  private callbacks: JetstreamCallbacks;
+  private reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+  private cursor: number | null = null;
+  private stopped = false;
+  readonly maxItems: number;
+
+  constructor(callbacks: JetstreamCallbacks, maxItems = MAX_ITEMS) {
+    this.callbacks = callbacks;
+    this.maxItems = maxItems;
+  }
+
+  connect(): void {
+    this.stopped = false;
+    this._open();
+  }
+
+  disconnect(): void {
+    this.stopped = true;
+    this._clearTimer();
+    this._close();
+    this.callbacks.onDisconnected?.();
+  }
+
+  resetCursor(): void {
+    this.cursor = null;
+  }
+
+  private _buildUrl(): string {
+    const params = new URLSearchParams();
+    for (const col of WANTED_COLLECTIONS) {
+      params.append("wantedCollections", col);
+    }
+    if (this.cursor !== null) {
+      params.set("cursor", String(this.cursor));
+    }
+    return `${JETSTREAM_URL}?${params.toString()}`;
+  }
+
+  private _open(): void {
+    this._close();
+
+    let ws: WebSocket;
+    try {
+      ws = new WebSocket(this._buildUrl());
+    } catch {
+      if (!this.stopped) this._scheduleReconnect();
+      return;
+    }
+
+    this.ws = ws;
+
+    ws.onopen = () => {
+      this.callbacks.onConnected?.();
+    };
+
+    ws.onmessage = (ev: MessageEvent) => {
+      try {
+        const event = JSON.parse(ev.data as string) as JetstreamEvent;
+        this.cursor = event.time_us;
+
+        if (event.kind !== "commit" || !event.commit) return;
+
+        const kind = toActivityKind(event.commit);
+        if (!kind) return;
+
+        const { targetName, targetOwnerDid } = extractTargetInfo(event.commit);
+
+        const item: ActivityItem = {
+          id: `${event.did}-${event.commit.collection}-${event.commit.rkey}`,
+          kind,
+          actorDid: event.did,
+          actorHandle: placeholderHandle(event.did),
+          targetUri:
+            targetOwnerDid && targetName
+              ? `at://${targetOwnerDid}/${event.commit.collection}/${targetName}`
+              : undefined,
+          targetName,
+          targetOwnerDid,
+          createdAt: new Date(Math.floor(event.time_us / 1_000)).toISOString(),
+        };
+
+        this.callbacks.onEvent(item);
+      } catch (error) {
+        console.warn("Failed to parse Jetstream event", { raw: ev.data, error });
+      }
+    };
+
+    ws.onerror = () => {
+      this.callbacks.onError?.();
+    };
+
+    ws.onclose = () => {
+      this.ws = null;
+      if (!this.stopped) {
+        this._scheduleReconnect();
+      }
+    };
+  }
+
+  private _close(): void {
+    if (this.ws) {
+      this.ws.onclose = null;
+      this.ws.onerror = null;
+      this.ws.onmessage = null;
+      this.ws.onopen = null;
+      this.ws.close();
+      this.ws = null;
+    }
+  }
+
+  private _clearTimer(): void {
+    if (this.reconnectTimer !== null) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+  }
+
+  private _scheduleReconnect(): void {
+    this._clearTimer();
+    this.callbacks.onDisconnected?.();
+    this.reconnectTimer = setTimeout(() => {
+      if (!this.stopped) this._open();
+    }, RECONNECT_DELAY_MS);
+  }
+}

docs/roadmap.md

···
 
 **Depends on:** API: Constellation Integration
 
-- [ ] Search service pointing at Twister API
-- [ ] Constellation service for star/follower counts
-- [ ] Debounced search on Explore tab with segmented results
-- [ ] Recent search history (local)
-- [ ] Graceful fallback when search API unavailable
-- [ ] Activity feed data source investigation (Jetstream vs polling)
-- [ ] Activity tab with filters, infinite scroll, pull-to-refresh
-- [ ] Home tab: surface recently viewed repos/profiles
+- [x] Search service pointing at Twister API
+- [x] Constellation service for star/follower counts
+- [x] Debounced search on Explore tab with segmented results
+- [x] Recent search history (local)
+- [x] Graceful fallback when search API unavailable
+- [x] Activity feed data source investigation (Jetstream vs polling)
+- [x] Activity tab with filters, infinite scroll, pull-to-refresh
+- [x] Home tab: surface recently viewed repos/profiles
 
 ## App: Authentication & Social
 

packages/api/internal/store/db.go

···
 	return "libsql", url + "?authToken=" + token
 }
 
-// Migrate runs all embedded SQL migration files in order.
+// Migrate runs all embedded SQL migration files in order, skipping any that
+// have already been applied. Applied filenames are recorded in the
+// schema_migrations table so re-runs are idempotent.
 func Migrate(db *sql.DB, url string) error {
+	if _, err := db.Exec(`CREATE TABLE IF NOT EXISTS schema_migrations (
+		filename   TEXT PRIMARY KEY,
+		applied_at TEXT NOT NULL
+	)`); err != nil {
+		return fmt.Errorf("create schema_migrations table: %w", err)
+	}
+
+	// For databases that were created before migration tracking was added,
+	// backfill schema_migrations by introspecting which tables/columns exist.
+	if err := backfillMigrationHistory(db); err != nil {
+		return fmt.Errorf("backfill migration history: %w", err)
+	}
+
 	mode := migrationMode{
 		allowTursoExtensionSkip: strings.HasPrefix(url, "file:"),
 		targetDescription:       migrationTargetDescription(url),
···
 		if entry.IsDir() || !strings.HasSuffix(entry.Name(), ".sql") {
 			continue
 		}
+		var already int
+		_ = db.QueryRow(`SELECT COUNT(*) FROM schema_migrations WHERE filename = ?`, entry.Name()).Scan(&already)
+		if already > 0 {
+			slog.Debug("migration already applied, skipping", "file", entry.Name())
+			continue
+		}
 		data, err := migrationsFS.ReadFile("migrations/" + entry.Name())
 		if err != nil {
 			return fmt.Errorf("read migration %s: %w", entry.Name(), err)
···
 		if err := execMigration(db, entry.Name(), string(data), mode); err != nil {
 			return err
 		}
+		if _, err := db.Exec(
+			`INSERT INTO schema_migrations (filename, applied_at) VALUES (?, datetime('now'))`,
+			entry.Name(),
+		); err != nil {
+			return fmt.Errorf("record migration %s: %w", entry.Name(), err)
+		}
 		slog.Info("migration applied", "file", entry.Name())
 	}
 	return nil
+}
+
+// backfillMigrationHistory records already-applied migrations for databases
+// that pre-date the schema_migrations tracking table. It is a no-op if the
+// table already has any entries (i.e. tracking was already in place).
+func backfillMigrationHistory(db *sql.DB) error {
+	var count int
+	if err := db.QueryRow(`SELECT COUNT(*) FROM schema_migrations`).Scan(&count); err != nil || count > 0 {
+		return nil
+	}
+
+	// If the documents table does not exist yet this is a fresh database — nothing to backfill.
+	if !sqliteTableExists(db, "documents") {
+		return nil
+	}
+
+	mark := func(filename string) {
+		_, _ = db.Exec(
+			`INSERT OR IGNORE INTO schema_migrations (filename, applied_at) VALUES (?, datetime('now'))`,
+			filename,
+		)
+	}
+
+	// 001 — documents table is present.
+	mark("001_initial.sql")
+
+	// 002 — identity_handles table.
+	if sqliteTableExists(db, "identity_handles") {
+		mark("002_identity_handles.sql")
+	}
+
+	// 003 — documents_fts virtual table.
+	if sqliteTableExists(db, "documents_fts") {
+		mark("003_documents_fts.sql")
+	}
+
+	// 004 — web_url column on documents.
+	if sqliteColumnExists(db, "documents", "web_url") {
+		mark("004_web_url.sql")
+	}
+
+	return nil
+}
+
+func sqliteTableExists(db *sql.DB, table string) bool {
+	var n int
+	_ = db.QueryRow(
+		`SELECT COUNT(*) FROM sqlite_master WHERE type IN ('table','view') AND name = ?`, table,
+	).Scan(&n)
+	return n > 0
+}
+
+func sqliteColumnExists(db *sql.DB, table, column string) bool {
+	var n int
+	_ = db.QueryRow(
+		`SELECT COUNT(*) FROM pragma_table_info(?) WHERE name = ?`, table, column,
+	).Scan(&n)
+	return n > 0
 }
 
 func execMigration(db *sql.DB, name, content string, mode migrationMode) error {