diff --git a/package-lock.json b/package-lock.json
index 4b9d607..3a6669e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "protowiki",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "protowiki",
-      "version": "0.1.0",
+      "version": "0.2.0",
       "dependencies": {
         "@wikimedia/codex": "^2.6.0",
         "@wikimedia/codex-design-tokens": "^2.6.0",
diff --git a/public/images/no-distractions-welcome-hero.png b/public/images/no-distractions-welcome-hero.png
new file mode 100644
index 0000000..a97024d
Binary files /dev/null and b/public/images/no-distractions-welcome-hero.png differ
diff --git a/src/components/MobileWrapper.vue b/src/components/MobileWrapper.vue
index 7d81eff..16be3cc 100644
--- a/src/components/MobileWrapper.vue
+++ b/src/components/MobileWrapper.vue
@@ -13,12 +13,15 @@ interface Props {
   dir?: 'ltr' | 'rtl'
   /** Max width of the centred column when clamped (wide viewports). */
   maxWidth?: string
+  /** Side borders on the centred column when previewing above 480px. */
+  showFrameBorder?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   lang: undefined,
   dir: undefined,
   maxWidth: '360px',
+  showFrameBorder: true,
 })
 </script>
 
@@ -26,6 +29,7 @@ const props = withDefaults(defineProps<Props>(), {
   <div class="mobile-wrapper">
     <div
       class="mobile-wrapper__column"
+      :class="{ 'mobile-wrapper__column--frameless': !props.showFrameBorder }"
       :lang="props.lang"
       :dir="props.dir"
       :style="{ '--mobile-wrapper-max-width': props.maxWidth }"
@@ -60,5 +64,9 @@ const props = withDefaults(defineProps<Props>(), {
     background-color: var(--background-color-base);
     border-inline: var(--border-width-base) solid var(--border-color-muted);
   }
+
+  .mobile-wrapper__column--frameless {
+    border-inline: none;
+  }
 }
 </style>
diff --git a/src/components/PrototypeChromeMenuPanel.vue b/src/components/PrototypeChromeMenuPanel.vue
new file mode 100644
index 0000000..8039f87
--- /dev/null
+++ b/src/components/PrototypeChromeMenuPanel.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { CdxButton, CdxSelect } from '@wikimedia/codex'
+
+import {
+  MICROTASK_SOURCE_MENU_ITEMS,
+  MORELIKE_STRATEGY_MENU_ITEMS,
+  usePrototypeDevSettings,
+} from '@/composables/usePrototypeDevSettings'
+import {
+  clearAllInterests,
+  useInterestsSettings,
+} from '@/prototypes/template-homepage/suggested-edits/data/useInterestsSettings'
+
+const { morelikeStrategy, microtaskSource } = usePrototypeDevSettings()
+const interestsSettings = useInterestsSettings()
+
+function onClearInterests(): void {
+  clearAllInterests(interestsSettings.value)
+}
+</script>
+
+<template>
+  <div class="prototype-chrome-menu-panel">
+    <p class="prototype-chrome-menu-panel__title">Prototype settings</p>
+    <p class="prototype-chrome-menu-panel__hint">
+      Dev-only controls for suggested-edits morelike search and microtask assignment.
+    </p>
+
+    <label class="prototype-chrome-menu-panel__field">
+      <span class="prototype-chrome-menu-panel__label">Morelike strategy</span>
+      <CdxSelect
+        v-model:selected="morelikeStrategy"
+        :menu-items="MORELIKE_STRATEGY_MENU_ITEMS"
+        default-label="Serial multi-call"
+      />
+    </label>
+
+    <label class="prototype-chrome-menu-panel__field">
+      <span class="prototype-chrome-menu-panel__label">Microtask source</span>
+      <CdxSelect
+        v-model:selected="microtaskSource"
+        :menu-items="MICROTASK_SOURCE_MENU_ITEMS"
+        default-label="Microtask Generator API"
+      />
+    </label>
+
+    <div class="prototype-chrome-menu-panel__section">
+      <CdxButton @click="onClearInterests">Clear interests</CdxButton>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.prototype-chrome-menu-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-100, 16px);
+  min-width: 16rem;
+  max-width: 20rem;
+  padding: var(--spacing-100, 16px);
+}
+
+.prototype-chrome-menu-panel__title {
+  margin: 0;
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-medium);
+  line-height: var(--line-height-medium);
+}
+
+.prototype-chrome-menu-panel__hint {
+  margin: 0;
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-base--subtle, #54595d);
+}
+
+.prototype-chrome-menu-panel__field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-50, 8px);
+}
+
+.prototype-chrome-menu-panel__label {
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-bold);
+}
+
+.prototype-chrome-menu-panel__section {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-50, 8px);
+}
+</style>
+
+<!-- Teleported popover: allow the select menu to extend past the scrollable body. -->
+<style>
+.prototype-chrome-menu-popover__overlay .cdx-popover__body {
+  overflow: visible;
+}
+</style>
diff --git a/src/components/PrototypeChromeMenuPopover.vue b/src/components/PrototypeChromeMenuPopover.vue
new file mode 100644
index 0000000..0ff8f99
--- /dev/null
+++ b/src/components/PrototypeChromeMenuPopover.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { CdxPopover } from '@wikimedia/codex'
+
+import PrototypeChromeMenuPanel from './PrototypeChromeMenuPanel.vue'
+
+const open = ref(false)
+const anchor = ref<HTMLElement | null>(null)
+
+function toggle(): void {
+  open.value = !open.value
+}
+</script>
+
+<template>
+  <div class="prototype-chrome-menu-popover">
+    <span ref="anchor" class="prototype-chrome-menu-popover__trigger">
+      <slot :open="open" :toggle="toggle" />
+    </span>
+    <CdxPopover
+      v-model:open="open"
+      :anchor="anchor"
+      placement="bottom-start"
+      class="prototype-chrome-menu-popover__overlay"
+    >
+      <PrototypeChromeMenuPanel @click.stop />
+    </CdxPopover>
+  </div>
+</template>
+
+<style scoped>
+.prototype-chrome-menu-popover {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.prototype-chrome-menu-popover__trigger {
+  display: inline-flex;
+}
+</style>
diff --git a/src/components/article/ArticleHeader.vue b/src/components/article/ArticleHeader.vue
index 7093d65..e142ec4 100644
--- a/src/components/article/ArticleHeader.vue
+++ b/src/components/article/ArticleHeader.vue
@@ -2,6 +2,7 @@
 import { computed, inject, ref, watch } from 'vue'
 import { CdxButton, CdxIcon, CdxPopover, CdxTextInput } from '@wikimedia/codex'
 import {
+  cdxIconBookmarkOutline,
   cdxIconDownTriangle,
   cdxIconDownload,
   cdxIconEdit,
@@ -38,11 +39,17 @@ interface Props {
    * Drives the structural mobile vs desktop layout (icon toolbar vs text actions).
    */
   skin?: Skin
+  /**
+   * Mobile icon toolbar: watchlist star (default) vs reader bookmark (Minerva
+   * “save for later” affordance in flows like no-distractions).
+   */
+  bookmarkAffordance?: 'watch' | 'bookmark'
 }
 
 const props = withDefaults(defineProps<Props>(), {
   languagesCount: 18,
   skin: undefined,
+  bookmarkAffordance: 'watch',
 })
 
 const inheritedSkin = inject(PROTOWIKI_CHROME_SKIN)
@@ -50,6 +57,16 @@ const effectiveSkin = computed<Skin>(() => props.skin ?? inheritedSkin?.value ??
 const { user } = useConfig()
 const isLoggedOut = computed(() => user.value === 'logged-out')
 
+const bookmarkLabel = computed(() =>
+  props.bookmarkAffordance === 'bookmark' ? 'Bookmark' : 'Watch',
+)
+const bookmarkIcon = computed(() =>
+  props.bookmarkAffordance === 'bookmark' ? cdxIconBookmarkOutline : cdxIconUnStar,
+)
+const bookmarkIconLoggedOut = computed(() =>
+  props.bookmarkAffordance === 'bookmark' ? cdxIconBookmarkOutline : cdxIconStar,
+)
+
 const languagesButtonLabel = computed(() => {
   const n = props.languagesCount ?? 18
   return n === 1 ? '1 language' : `${n} languages`
@@ -148,10 +165,10 @@ function onLanguagePick(row: ArticleLanguageLink) {
         <CdxButton
           class="article-header__icon-btn"
           weight="quiet"
-          aria-label="Watch"
+          :aria-label="bookmarkLabel"
           @click="$emit('bookmarkClick')"
         >
-          <CdxIcon :icon="cdxIconUnStar" />
+          <CdxIcon :icon="bookmarkIcon" />
         </CdxButton>
       </nav>
     </div>
@@ -186,10 +203,10 @@ function onLanguagePick(row: ArticleLanguageLink) {
         <button
           type="button"
           class="article-header__icon-tool"
-          aria-label="Watch"
+          :aria-label="bookmarkLabel"
           @click="$emit('bookmarkClick')"
         >
-          <CdxIcon :icon="cdxIconStar" />
+          <CdxIcon :icon="bookmarkIconLoggedOut" />
         </button>
         <button
           type="button"
@@ -204,10 +221,10 @@ function onLanguagePick(row: ArticleLanguageLink) {
         <button
           type="button"
           class="article-header__icon-tool"
-          aria-label="Watch"
+          :aria-label="bookmarkLabel"
           @click="$emit('bookmarkClick')"
         >
-          <CdxIcon :icon="cdxIconUnStar" />
+          <CdxIcon :icon="bookmarkIcon" />
         </button>
         <button
           type="button"
diff --git a/src/components/chrome/ChromeHeader.vue b/src/components/chrome/ChromeHeader.vue
index f9a385f..aa63ca1 100644
--- a/src/components/chrome/ChromeHeader.vue
+++ b/src/components/chrome/ChromeHeader.vue
@@ -17,6 +17,7 @@ import { DEFAULT_CHROME_NAV_TOOLS, type ChromeNavTool } from './headerNavTools'
 import { globalSkin, globalTheme } from '@/theme'
 import type { Skin, Theme } from '@/theme'
 import UserSettingsPopover from '../settings/UserSettingsPopover.vue'
+import PrototypeChromeMenuPopover from '../PrototypeChromeMenuPopover.vue'
 import Search from '../Search.vue'
 
 const { user } = useConfig()
@@ -97,10 +98,17 @@ function navHas(tool: ChromeNavTool): boolean {
     <nav v-if="isDesktop" class="chrome-header__nav-desktop" aria-label="Site">
       <div class="chrome-header__desktop-start">
         <slot name="menu">
-          <!-- Mock only — not interactive (FakeMediaWiki uses bare chrome / icon affordances). -->
-          <span class="chrome-header__menu-icon" aria-hidden="true">
-            <CdxIcon :icon="cdxIconMenu" />
-          </span>
+          <PrototypeChromeMenuPopover v-slot="{ toggle, open }">
+            <CdxButton
+              class="chrome-header__menu-btn"
+              weight="quiet"
+              aria-label="Main menu"
+              :aria-expanded="open"
+              @click="toggle"
+            >
+              <CdxIcon :icon="cdxIconMenu" />
+            </CdxButton>
+          </PrototypeChromeMenuPopover>
         </slot>
 
         <RouterLink class="chrome-header__brand-link" to="/" aria-label="Visit the main page">
@@ -189,11 +197,7 @@ function navHas(tool: ChromeNavTool): boolean {
           <CdxButton v-if="navHas('appearance')" weight="quiet" aria-label="Appearance">
             <CdxIcon :icon="cdxIconAppearance" />
           </CdxButton>
-          <CdxButton
-            v-if="navHas('notifications')"
-            weight="quiet"
-            aria-label="Notifications"
-          >
+          <CdxButton v-if="navHas('notifications')" weight="quiet" aria-label="Notifications">
             <CdxIcon :icon="cdxIconBell" />
           </CdxButton>
           <CdxButton v-if="navHas('notices')" weight="quiet" aria-label="Notices">
@@ -226,9 +230,17 @@ function navHas(tool: ChromeNavTool): boolean {
     <!-- Minerva-style chrome (mobile skin) -->
     <nav v-else class="chrome-header__nav-mobile" aria-label="Site">
       <slot name="menu">
-        <CdxButton weight="quiet" size="large" aria-label="Main menu">
-          <CdxIcon :icon="cdxIconMenu" />
-        </CdxButton>
+        <PrototypeChromeMenuPopover v-slot="{ toggle, open }">
+          <CdxButton
+            weight="quiet"
+            size="large"
+            aria-label="Main menu"
+            :aria-expanded="open"
+            @click="toggle"
+          >
+            <CdxIcon :icon="cdxIconMenu" />
+          </CdxButton>
+        </PrototypeChromeMenuPopover>
       </slot>
 
       <RouterLink class="chrome-header__mobile-brand" to="/" aria-label="Visit the main page">
@@ -251,11 +263,7 @@ function navHas(tool: ChromeNavTool): boolean {
         >
           <CdxIcon :icon="cdxIconSearch" />
         </CdxButton>
-        <CdxButton
-          weight="quiet"
-          size="large"
-          aria-label="Notifications"
-        >
+        <CdxButton weight="quiet" size="large" aria-label="Notifications">
           <CdxIcon :icon="cdxIconBell" />
         </CdxButton>
         <UserSettingsPopover v-slot="{ toggle, open }">
@@ -489,7 +497,6 @@ function navHas(tool: ChromeNavTool): boolean {
     height: var(--size-icon-large, 40px);
     padding: 0.45rem 0.5rem;
   }
-
 }
 
 @media (max-width: 768px) {
diff --git a/src/composables/usePrototypeDevSettings.ts b/src/composables/usePrototypeDevSettings.ts
new file mode 100644
index 0000000..43bd373
--- /dev/null
+++ b/src/composables/usePrototypeDevSettings.ts
@@ -0,0 +1,130 @@
+import { computed, ref, watch, type ComputedRef, type Ref } from 'vue'
+
+export type MorelikeStrategy = 'minimal' | 'opening_text' | 'serial'
+
+export type MicrotaskSource = 'random' | 'quality-check'
+
+export interface PrototypeDevSettings {
+  morelikeStrategy: MorelikeStrategy
+  microtaskSource: MicrotaskSource
+}
+
+export const DEFAULT_PROTOTYPE_DEV_SETTINGS: PrototypeDevSettings = {
+  morelikeStrategy: 'serial',
+  microtaskSource: 'quality-check',
+}
+
+export const MORELIKE_STRATEGY_MENU_ITEMS: { value: MorelikeStrategy; label: string }[] = [
+  { value: 'minimal', label: 'Minimal (wiki default)' },
+  { value: 'opening_text', label: 'Opening text only' },
+  { value: 'serial', label: 'Serial multi-call' },
+]
+
+export const MICROTASK_SOURCE_MENU_ITEMS: { value: MicrotaskSource; label: string }[] = [
+  { value: 'random', label: 'Random from catalog' },
+  { value: 'quality-check', label: 'Microtask Generator API' },
+]
+
+const STORAGE_KEY = 'protowiki-prototype-dev-settings'
+
+const VALID_STRATEGIES: MorelikeStrategy[] = ['minimal', 'opening_text', 'serial']
+const VALID_MICROTASK_SOURCES: MicrotaskSource[] = ['random', 'quality-check']
+
+function isMorelikeStrategy(value: unknown): value is MorelikeStrategy {
+  return typeof value === 'string' && VALID_STRATEGIES.includes(value as MorelikeStrategy)
+}
+
+function isMicrotaskSource(value: unknown): value is MicrotaskSource {
+  return typeof value === 'string' && VALID_MICROTASK_SOURCES.includes(value as MicrotaskSource)
+}
+
+export function normalizePrototypeDevSettings(input: unknown): PrototypeDevSettings {
+  if (typeof input !== 'object' || input === null) {
+    return { ...DEFAULT_PROTOTYPE_DEV_SETTINGS }
+  }
+
+  const record = input as Record<string, unknown>
+
+  return {
+    morelikeStrategy: isMorelikeStrategy(record.morelikeStrategy)
+      ? record.morelikeStrategy
+      : DEFAULT_PROTOTYPE_DEV_SETTINGS.morelikeStrategy,
+    microtaskSource: isMicrotaskSource(record.microtaskSource)
+      ? record.microtaskSource
+      : DEFAULT_PROTOTYPE_DEV_SETTINGS.microtaskSource,
+  }
+}
+
+export function loadPrototypeDevSettings(): PrototypeDevSettings {
+  if (typeof window === 'undefined') {
+    return { ...DEFAULT_PROTOTYPE_DEV_SETTINGS }
+  }
+
+  try {
+    const stored = window.localStorage.getItem(STORAGE_KEY)
+    if (!stored) return { ...DEFAULT_PROTOTYPE_DEV_SETTINGS }
+
+    const parsed = JSON.parse(stored)
+    return normalizePrototypeDevSettings(parsed)
+  } catch {
+    return { ...DEFAULT_PROTOTYPE_DEV_SETTINGS }
+  }
+}
+
+export function savePrototypeDevSettings(settings: PrototypeDevSettings): void {
+  if (typeof window === 'undefined') return
+
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(settings))
+  } catch {
+    // Quota or private-mode failures — ignore.
+  }
+}
+
+/** Module-level singleton so homepage and drill-down share dev settings. */
+const devSettings = ref<PrototypeDevSettings>(loadPrototypeDevSettings())
+
+let persistenceInitialized = false
+
+function ensurePersistenceWatch(): void {
+  if (persistenceInitialized) return
+  persistenceInitialized = true
+
+  watch(
+    devSettings,
+    (value) => {
+      savePrototypeDevSettings(value)
+    },
+    { deep: true },
+  )
+}
+
+export function usePrototypeDevSettings(): {
+  morelikeStrategy: ComputedRef<MorelikeStrategy>
+  microtaskSource: ComputedRef<MicrotaskSource>
+  settings: Ref<PrototypeDevSettings>
+} {
+  ensurePersistenceWatch()
+
+  const morelikeStrategy = computed({
+    get: () => devSettings.value.morelikeStrategy,
+    set: (value: MorelikeStrategy | null | undefined) => {
+      if (!isMorelikeStrategy(value)) return
+      devSettings.value = { ...devSettings.value, morelikeStrategy: value }
+    },
+  })
+
+  const microtaskSource = computed({
+    get: () => devSettings.value.microtaskSource,
+    set: (value: MicrotaskSource | null | undefined) => {
+      if (!isMicrotaskSource(value)) return
+      devSettings.value = { ...devSettings.value, microtaskSource: value }
+    },
+  })
+
+  return {
+    morelikeStrategy,
+    microtaskSource,
+    settings: devSettings,
+  }
+}
diff --git a/src/config.ts b/src/config.ts
index 22227cf..0dd60af 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -118,6 +118,13 @@ export function wikiBaseUrlFromLang(lang: string): string {
   return `https://${wikiHostFromLang(lang)}/`
 }
 
+/** VisualEditor / wikitext edit URL for an article title. */
+export function wikiEditUrlFromLang(lang: string, title: string): string {
+  const trimmed = title.trim()
+  const pageTitle = trimmed.replace(/ /g, '_')
+  return `https://${wikiHostFromLang(lang)}/w/index.php?title=${encodeURIComponent(pageTitle)}&action=edit`
+}
+
 export function langForUser(
   user: ConfigUser,
   userPageLists: Record<ConfigUser, UserPageLists>,
diff --git a/src/lib/fetchFeaturedFeed.ts b/src/lib/fetchFeaturedFeed.ts
new file mode 100644
index 0000000..f0e97e5
--- /dev/null
+++ b/src/lib/fetchFeaturedFeed.ts
@@ -0,0 +1,251 @@
+import { normalizeLang, wikiHostFromLang, wikimediaApiFetchHeaders } from '@/config'
+
+export interface FeaturedFeedPage {
+  type?: string
+  title: string
+  pageid?: number
+  description?: string
+  thumbnail?: {
+    source: string
+    width?: number
+    height?: number
+  }
+}
+
+export interface FeaturedFeedTfa {
+  type?: string
+  title: string
+  pageid?: number
+  extract?: string
+  thumbnail?: {
+    source: string
+    width?: number
+    height?: number
+  }
+  description?: string
+}
+
+export interface FeaturedFeedDykItem {
+  text: string
+  html?: string
+  pages?: FeaturedFeedPage[]
+}
+
+export interface FeaturedFeedOnThisDayItem {
+  text: string
+  year?: number
+  pages?: FeaturedFeedPage[]
+}
+
+export interface FeaturedFeedMostReadArticle {
+  title: string
+  views: number
+  rank?: number
+  thumbnail?: {
+    source: string
+    width?: number
+    height?: number
+  }
+}
+
+export interface FeaturedFeedMostRead {
+  date?: string
+  articles?: FeaturedFeedMostReadArticle[]
+}
+
+export interface FeaturedFeedResponse {
+  tfa?: FeaturedFeedTfa
+  dyk?: FeaturedFeedDykItem[]
+  onthisday?: FeaturedFeedOnThisDayItem[]
+  mostread?: FeaturedFeedMostRead
+}
+
+export interface FeaturedFeedDateParts {
+  yyyy: string
+  mm: string
+  dd: string
+}
+
+export class FetchFeaturedFeedError extends Error {
+  constructor(
+    message: string,
+    public readonly code: 'aborted' | 'http',
+  ) {
+    super(message)
+    this.name = 'FetchFeaturedFeedError'
+  }
+}
+
+function padTwo(value: number): string {
+  return String(value).padStart(2, '0')
+}
+
+/** Format a date for the Wikifeeds `feed/featured/{yyyy}/{mm}/{dd}` path. */
+export function formatFeaturedFeedDate(date: Date): FeaturedFeedDateParts {
+  return {
+    yyyy: String(date.getFullYear()),
+    mm: padTwo(date.getMonth() + 1),
+    dd: padTwo(date.getDate()),
+  }
+}
+
+export function featuredFeedCacheKey(lang: string, date: Date): string {
+  const { yyyy, mm, dd } = formatFeaturedFeedDate(date)
+  return `featured:${normalizeLang(lang)}:${yyyy}-${mm}-${dd}`
+}
+
+function buildFeaturedFeedUrl(lang: string, date: Date): string {
+  const wikiHost = wikiHostFromLang(lang)
+  const { yyyy, mm, dd } = formatFeaturedFeedDate(date)
+  return `https://${wikiHost}/api/rest_v1/feed/featured/${yyyy}/${mm}/${dd}`
+}
+
+export interface FetchFeaturedFeedOptions {
+  date?: Date
+  lang?: string
+  signal?: AbortSignal
+}
+
+export async function fetchFeaturedFeed(
+  options: FetchFeaturedFeedOptions = {},
+): Promise<FeaturedFeedResponse> {
+  const lang = normalizeLang(options.lang ?? 'en')
+  const date = options.date ?? new Date()
+  const signal = options.signal
+
+  const url = buildFeaturedFeedUrl(lang, date)
+
+  let response: Response
+  try {
+    response = await fetch(url, {
+      headers: wikimediaApiFetchHeaders('featured-feed'),
+      signal,
+    })
+  } catch (fetchError) {
+    if ((fetchError as Error).name === 'AbortError') {
+      throw new FetchFeaturedFeedError('Request aborted.', 'aborted')
+    }
+    throw fetchError
+  }
+
+  if (!response.ok) {
+    throw new FetchFeaturedFeedError(
+      `Featured feed request failed (${response.status}).`,
+      'http',
+    )
+  }
+
+  return (await response.json()) as FeaturedFeedResponse
+}
+
+export interface OnThisDayBirthsResponse {
+  births?: FeaturedFeedOnThisDayItem[]
+}
+
+export interface FetchOnThisDayOptions {
+  date?: Date
+  lang?: string
+  signal?: AbortSignal
+}
+
+export async function fetchOnThisDayBirths(
+  options: FetchOnThisDayOptions = {},
+): Promise<FeaturedFeedOnThisDayItem[]> {
+  const lang = normalizeLang(options.lang ?? 'en')
+  const wikiHost = wikiHostFromLang(lang)
+  const { mm, dd } = formatFeaturedFeedDate(options.date ?? new Date())
+  const url = `https://${wikiHost}/api/rest_v1/feed/onthisday/births/${mm}/${dd}`
+  const signal = options.signal
+
+  let response: Response
+  try {
+    response = await fetch(url, {
+      headers: wikimediaApiFetchHeaders('onthisday-births'),
+      signal,
+    })
+  } catch (fetchError) {
+    if ((fetchError as Error).name === 'AbortError') {
+      throw new FetchFeaturedFeedError('Request aborted.', 'aborted')
+    }
+    throw fetchError
+  }
+
+  if (!response.ok) {
+    throw new FetchFeaturedFeedError(
+      `On this day births request failed (${response.status}).`,
+      'http',
+    )
+  }
+
+  const payload = (await response.json()) as OnThisDayBirthsResponse
+  return payload.births ?? []
+}
+
+export interface PageSummaryResponse {
+  title?: string
+  description?: string
+  extract?: string
+  thumbnail?: {
+    source: string
+    width?: number
+    height?: number
+  }
+}
+
+export async function fetchPageSummary(
+  title: string,
+  options: { lang?: string; signal?: AbortSignal } = {},
+): Promise<PageSummaryResponse> {
+  const lang = normalizeLang(options.lang ?? 'en')
+  const wikiHost = wikiHostFromLang(lang)
+  const slug = encodeURIComponent(title.replace(/ /g, '_'))
+  const url = `https://${wikiHost}/api/rest_v1/page/summary/${slug}`
+
+  let response: Response
+  try {
+    response = await fetch(url, {
+      headers: wikimediaApiFetchHeaders('page-summary'),
+      signal: options.signal,
+    })
+  } catch (fetchError) {
+    if ((fetchError as Error).name === 'AbortError') {
+      throw new FetchFeaturedFeedError('Request aborted.', 'aborted')
+    }
+    throw fetchError
+  }
+
+  if (!response.ok) {
+    throw new FetchFeaturedFeedError(
+      `Page summary request failed (${response.status}).`,
+      'http',
+    )
+  }
+
+  return (await response.json()) as PageSummaryResponse
+}
+
+const WIKI_LINK_TITLE_RE =
+  /<a[^>]*rel="mw:WikiLink"[^>]*title="([^"]+)"[^>]*>/i
+const BOLD_WIKI_LINK_TITLE_RE =
+  /<b[^>]*>\s*<a[^>]*rel="mw:WikiLink"[^>]*title="([^"]+)"[^>]*>/i
+
+function wikiTitleFromDisplayTitle(displayTitle: string): string {
+  return displayTitle.trim().replace(/ /g, '_')
+}
+
+/** Primary linked article for a DYK hook (`pages[0]` or first bold wiki link in `html`). */
+export function primaryDykPageTitle(item: FeaturedFeedDykItem): string | undefined {
+  const fromPages = item.pages?.[0]?.title?.trim()
+  if (fromPages) return fromPages
+
+  const html = item.html?.trim()
+  if (!html) return undefined
+
+  const boldMatch = html.match(BOLD_WIKI_LINK_TITLE_RE)
+  if (boldMatch?.[1]) return wikiTitleFromDisplayTitle(boldMatch[1])
+
+  const linkMatch = html.match(WIKI_LINK_TITLE_RE)
+  if (linkMatch?.[1]) return wikiTitleFromDisplayTitle(linkMatch[1])
+
+  return undefined
+}
diff --git a/src/lib/fetchGrowthTaskSignals.ts b/src/lib/fetchGrowthTaskSignals.ts
new file mode 100644
index 0000000..4e8a17d
--- /dev/null
+++ b/src/lib/fetchGrowthTaskSignals.ts
@@ -0,0 +1,126 @@
+import { normalizeLang, wikiHostFromLang, wikimediaApiFetchHeaders } from '@/config'
+
+import { normalizeTitleKey } from './fetchMorelike'
+
+/**
+ * Per-page signals read from an article's CirrusSearch index document
+ * (`prop=cirrusdoc`). These are the same raw signals the Wikimedia Growth
+ * team's newcomer-task search keys on: maintenance templates, dated maintenance
+ * tracking categories, structured-task `recommendation.*` weighted tags,
+ * section headings, outgoing-link density, and article size.
+ */
+export interface GrowthTaskSignals {
+  templates: string[]
+  categories: string[]
+  weightedTags: string[]
+  headings: string[]
+  outgoingLinkCount: number
+  textBytes: number
+}
+
+export class GrowthTaskSignalsError extends Error {
+  constructor(
+    message: string,
+    public readonly code: 'aborted' | 'http' | 'empty',
+  ) {
+    super(message)
+    this.name = 'GrowthTaskSignalsError'
+  }
+}
+
+interface CirrusDocSource {
+  template?: string[]
+  category?: string[]
+  weighted_tags?: string[]
+  heading?: string[]
+  outgoing_link?: string[]
+  text_bytes?: number
+}
+
+interface CirrusDocPage {
+  title?: string
+  cirrusdoc?: Array<{ source?: CirrusDocSource }>
+}
+
+interface CirrusDocResponse {
+  error?: { code?: string; info?: string }
+  query?: { pages?: CirrusDocPage[] }
+}
+
+function buildSignalsRequestUrl(titles: string[], lang: string): string {
+  const wikiHost = wikiHostFromLang(lang)
+  const params = new URLSearchParams({
+    action: 'query',
+    prop: 'cirrusdoc',
+    titles: titles.join('|'),
+    format: 'json',
+    formatversion: '2',
+    origin: '*',
+  })
+  return `https://${wikiHost}/w/api.php?${params.toString()}`
+}
+
+function mapSource(source: CirrusDocSource | undefined): GrowthTaskSignals {
+  return {
+    templates: source?.template ?? [],
+    categories: source?.category ?? [],
+    weightedTags: source?.weighted_tags ?? [],
+    headings: source?.heading ?? [],
+    outgoingLinkCount: source?.outgoing_link?.length ?? 0,
+    textBytes: typeof source?.text_bytes === 'number' ? source.text_bytes : 0,
+  }
+}
+
+/**
+ * Batch-fetch CirrusSearch signals for up to 50 titles in a single request,
+ * keyed by `normalizeTitleKey`. Pages without a cirrusdoc are simply absent
+ * from the returned map.
+ */
+export async function fetchGrowthTaskSignals(
+  titles: string[],
+  options: { lang?: string; signal?: AbortSignal } = {},
+): Promise<Map<string, GrowthTaskSignals>> {
+  if (options.signal?.aborted) {
+    throw new GrowthTaskSignalsError('Request aborted', 'aborted')
+  }
+
+  const uniqueTitles = [...new Set(titles.map((title) => title.trim()).filter(Boolean))]
+  if (!uniqueTitles.length) {
+    throw new GrowthTaskSignalsError('No titles to check', 'empty')
+  }
+
+  const lang = normalizeLang(options.lang ?? 'en')
+  const requestUrl = buildSignalsRequestUrl(uniqueTitles, lang)
+
+  let response: Response
+  try {
+    response = await fetch(requestUrl, {
+      signal: options.signal,
+      headers: wikimediaApiFetchHeaders('growth-task-signals'),
+    })
+  } catch (error) {
+    if ((error as Error).name === 'AbortError') {
+      throw new GrowthTaskSignalsError('Request aborted', 'aborted')
+    }
+    throw error
+  }
+
+  if (!response.ok) {
+    throw new GrowthTaskSignalsError(`Signals fetch failed (HTTP ${response.status})`, 'http')
+  }
+
+  const data = (await response.json()) as CirrusDocResponse
+  if (data.error) {
+    throw new GrowthTaskSignalsError(data.error.info ?? data.error.code ?? 'Signals fetch failed', 'http')
+  }
+
+  const signalsByTitle = new Map<string, GrowthTaskSignals>()
+  for (const page of data.query?.pages ?? []) {
+    if (!page.title) continue
+    const source = page.cirrusdoc?.[0]?.source
+    if (!source) continue
+    signalsByTitle.set(normalizeTitleKey(page.title), mapSource(source))
+  }
+
+  return signalsByTitle
+}
diff --git a/src/lib/fetchMicrotaskQuality.ts b/src/lib/fetchMicrotaskQuality.ts
new file mode 100644
index 0000000..46b5e93
--- /dev/null
+++ b/src/lib/fetchMicrotaskQuality.ts
@@ -0,0 +1,85 @@
+import { wikimediaApiFetchHeaders } from '@/config'
+
+const QUALITY_CHECK_URL = 'https://microtask-generator.toolforge.org/quality-check'
+
+export interface MicrotaskQualityNeed {
+  need: string
+  score: number
+}
+
+export interface MicrotaskQualityResult {
+  title: string
+  exists: boolean
+  potentialNeeds: MicrotaskQualityNeed[]
+}
+
+export class FetchMicrotaskQualityError extends Error {
+  constructor(
+    message: string,
+    public readonly code: 'aborted' | 'http' | 'empty',
+  ) {
+    super(message)
+    this.name = 'FetchMicrotaskQualityError'
+  }
+}
+
+interface QualityCheckResponse {
+  lang?: string
+  results?: Array<{
+    title?: string
+    exists?: boolean
+    potential_needs?: Array<{ need?: string; score?: number }>
+  }>
+}
+
+export async function fetchMicrotaskQuality(
+  titles: string[],
+  options: { lang?: string; signal?: AbortSignal } = {},
+): Promise<MicrotaskQualityResult[]> {
+  if (options.signal?.aborted) {
+    throw new FetchMicrotaskQualityError('Request aborted', 'aborted')
+  }
+
+  const uniqueTitles = [...new Set(titles.map((title) => title.trim()).filter(Boolean))]
+  if (!uniqueTitles.length) {
+    throw new FetchMicrotaskQualityError('No titles to check', 'empty')
+  }
+
+  const response = await fetch(QUALITY_CHECK_URL, {
+    method: 'POST',
+    signal: options.signal,
+    headers: {
+      ...wikimediaApiFetchHeaders('microtask-quality'),
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      lang: options.lang ?? 'en',
+      titles: uniqueTitles,
+    }),
+  })
+
+  if (!response.ok) {
+    throw new FetchMicrotaskQualityError(`Quality check failed (HTTP ${response.status})`, 'http')
+  }
+
+  const data = (await response.json()) as QualityCheckResponse
+
+  return (data.results ?? []).map((entry) => ({
+    title: entry.title ?? '',
+    exists: entry.exists ?? false,
+    potentialNeeds: (entry.potential_needs ?? [])
+      .filter((item): item is { need: string; score: number } => typeof item.need === 'string')
+      .map((item) => ({
+        need: item.need,
+        score: typeof item.score === 'number' ? item.score : 0,
+      })),
+  }))
+}
+
+/** Pick the lowest-scoring (highest priority) need for a title. */
+export function pickPrimaryNeed(result: MicrotaskQualityResult): string | null {
+  if (!result.potentialNeeds.length) return null
+
+  const sorted = [...result.potentialNeeds].sort((a, b) => a.score - b.score)
+  return sorted[0]?.need ?? null
+}
diff --git a/src/lib/fetchMorelike.ts b/src/lib/fetchMorelike.ts
new file mode 100644
index 0000000..fcca77b
--- /dev/null
+++ b/src/lib/fetchMorelike.ts
@@ -0,0 +1,462 @@
+import { normalizeLang, wikiHostFromLang, wikimediaApiFetchHeaders } from '@/config'
+
+import {
+  resolveMltParams,
+  type MorelikeMltCustomSettings,
+  type MorelikeMltPreset,
+  type MorelikeSortOrder,
+} from './morelikeMlt'
+
+export interface MorelikeSearchHit {
+  title: string
+  description: string
+  timestamp: string
+  pageUrl: string
+  revisionAuthor?: string
+  revisionComment?: string
+  revisionContent?: string
+  thumbnail?: {
+    url: string
+    width: number
+    height: number
+  }
+}
+
+interface GeneratorRevision {
+  timestamp?: string
+  user?: string
+  comment?: string
+  slots?: {
+    main?: {
+      content?: string
+    }
+  }
+}
+
+interface GeneratorPage {
+  title: string
+  index?: number
+  description?: string
+  thumbnail?: {
+    source: string
+    width: number
+    height: number
+  }
+  revisions?: GeneratorRevision[]
+}
+
+interface GeneratorSearchResponse {
+  error?: {
+    code?: string
+    info?: string
+  }
+  query?: {
+    pages?: GeneratorPage[]
+  }
+}
+
+export class MorelikeFetchError extends Error {
+  constructor(
+    message: string,
+    public readonly code: 'aborted' | 'http' | 'empty',
+  ) {
+    super(message)
+    this.name = 'MorelikeFetchError'
+  }
+}
+
+export function normalizeTitleKey(title: string): string {
+  return title.trim().replace(/_/g, ' ').toLowerCase()
+}
+
+/** Split seed input on newlines and commas; trim, dedupe, drop empties. */
+export function parseSeedTitles(raw: string): string[] {
+  const seen = new Set<string>()
+  const titles: string[] = []
+
+  for (const part of raw.split(/[\n,]+/)) {
+    const title = part.trim()
+    if (!title.length || seen.has(title)) continue
+    seen.add(title)
+    titles.push(title)
+  }
+
+  return titles
+}
+
+export function buildSrsearch(seedTitles: string[]): string | null {
+  if (!seedTitles.length) return null
+  return `morelike:${seedTitles.join('|')}`
+}
+
+function articleUrl(wikiHost: string, title: string): string {
+  return `https://${wikiHost}/wiki/${encodeURIComponent(title.replace(/ /g, '_'))}`
+}
+
+function buildMorelikeSearchParams(
+  gsrsearch: string,
+  limit: number,
+  mltParams: Record<string, string>,
+): URLSearchParams {
+  const params = new URLSearchParams({
+    action: 'query',
+    generator: 'search',
+    gsrsearch,
+    gsrnamespace: '0',
+    gsrlimit: String(limit),
+    prop: 'pageimages|description|revisions',
+    piprop: 'thumbnail',
+    pithumbsize: '160',
+    rvprop: 'timestamp|user|comment|content',
+    rvslots: 'main',
+    format: 'json',
+    formatversion: '2',
+    origin: '*',
+  })
+
+  for (const [key, value] of Object.entries(mltParams)) {
+    params.set(key, value)
+  }
+
+  return params
+}
+
+/** Exact URL sent to the Action API (shared by fetch + UI). */
+export function buildMorelikeApiRequestUrl(
+  seedTitles: string[],
+  limit: number,
+  mltPreset: MorelikeMltPreset,
+  mltCustom: MorelikeMltCustomSettings,
+  lang = 'en',
+): string | null {
+  const gsrsearch = buildSrsearch(seedTitles)
+  if (!gsrsearch) return null
+
+  const wikiHost = wikiHostFromLang(lang)
+  const params = buildMorelikeSearchParams(gsrsearch, limit, resolveMltParams(mltPreset, mltCustom))
+  return `https://${wikiHost}/w/api.php?${params.toString()}`
+}
+
+async function fetchMorelikeHits(
+  requestUrl: string,
+  signal?: AbortSignal,
+): Promise<GeneratorPage[]> {
+  const response = await fetch(requestUrl, {
+    signal,
+    headers: wikimediaApiFetchHeaders('morelike-search'),
+  })
+
+  if (!response.ok) {
+    throw new MorelikeFetchError(`Search failed (HTTP ${response.status})`, 'http')
+  }
+
+  const data = (await response.json()) as GeneratorSearchResponse
+
+  if (data.error) {
+    throw new MorelikeFetchError(data.error.info ?? data.error.code ?? 'Search failed', 'http')
+  }
+
+  const pages = data.query?.pages ?? []
+
+  return [...pages].sort((a, b) => (a.index ?? 0) - (b.index ?? 0))
+}
+
+function mapRevisionFields(revision: GeneratorRevision | undefined): {
+  timestamp: string
+  author?: string
+  comment?: string
+  content?: string
+} {
+  return {
+    timestamp: revision?.timestamp ?? '',
+    author: revision?.user,
+    comment: revision?.comment,
+    content: revision?.slots?.main?.content,
+  }
+}
+
+function mapPageToHit(wikiHost: string, page: GeneratorPage): MorelikeSearchHit {
+  const latest = mapRevisionFields(page.revisions?.[0])
+
+  return {
+    title: page.title,
+    description: page.description?.trim() ?? '',
+    timestamp: latest.timestamp,
+    pageUrl: articleUrl(wikiHost, page.title),
+    revisionAuthor: latest.author,
+    revisionComment: latest.comment,
+    revisionContent: latest.content,
+    thumbnail: page.thumbnail
+      ? {
+          url: page.thumbnail.source,
+          width: page.thumbnail.width,
+          height: page.thumbnail.height,
+        }
+      : undefined,
+  }
+}
+
+function sortByNewestEditFirst(hits: MorelikeSearchHit[]): MorelikeSearchHit[] {
+  return [...hits].sort((a, b) => {
+    const aTime = a.timestamp ? Date.parse(a.timestamp) : Number.NaN
+    const bTime = b.timestamp ? Date.parse(b.timestamp) : Number.NaN
+
+    if (Number.isNaN(aTime) && Number.isNaN(bTime)) return 0
+    if (Number.isNaN(aTime)) return 1
+    if (Number.isNaN(bTime)) return -1
+
+    return bTime - aTime
+  })
+}
+
+/** Client-side sort — API results always stay in relevance order. */
+export function sortMorelikeHits(
+  hits: MorelikeSearchHit[],
+  sortOrder: MorelikeSortOrder,
+): MorelikeSearchHit[] {
+  if (sortOrder === 'lastEdit') {
+    return sortByNewestEditFirst(hits)
+  }
+
+  return hits
+}
+
+export interface FetchMorelikeOptions {
+  limit: number
+  mltPreset: MorelikeMltPreset
+  mltCustom: MorelikeMltCustomSettings
+  lang?: string
+  signal?: AbortSignal
+}
+
+export async function fetchMorelikeResults(
+  seedTitles: string[],
+  options: FetchMorelikeOptions,
+): Promise<MorelikeSearchHit[]> {
+  if (options.signal?.aborted) {
+    throw new MorelikeFetchError('Request aborted', 'aborted')
+  }
+
+  const lang = normalizeLang(options.lang ?? 'en')
+  const wikiHost = wikiHostFromLang(lang)
+
+  const requestUrl = buildMorelikeApiRequestUrl(
+    seedTitles,
+    options.limit,
+    options.mltPreset,
+    options.mltCustom,
+    lang,
+  )
+
+  if (!requestUrl) {
+    throw new MorelikeFetchError('Add at least one seed page title', 'empty')
+  }
+
+  const seedKeys = new Set(seedTitles.map(normalizeTitleKey))
+
+  const pages = await fetchMorelikeHits(requestUrl, options.signal)
+
+  return pages
+    .filter((page) => !seedKeys.has(normalizeTitleKey(page.title)))
+    .map((page) => mapPageToHit(wikiHost, page))
+}
+
+/** Fetch morelike results for a single seed title (serial multi-call mode). */
+export async function fetchMorelikeForSingleSeed(
+  seedTitle: string,
+  options: FetchMorelikeOptions,
+): Promise<MorelikeSearchHit[]> {
+  return fetchMorelikeResults([seedTitle], options)
+}
+
+interface MetadataPage {
+  title: string
+  missing?: boolean
+  description?: string
+  thumbnail?: {
+    source: string
+    width: number
+    height: number
+  }
+}
+
+interface MetadataResponse {
+  error?: { code?: string; info?: string }
+  query?: { pages?: MetadataPage[] }
+}
+
+/**
+ * Fetch card metadata (description + thumbnail) for explicit titles, returned
+ * as `MorelikeSearchHit`s in the same order as the input. Used to surface the
+ * interest pages themselves alongside morelike-related results. Missing pages
+ * are skipped.
+ */
+export async function fetchPagesMetadata(
+  titles: string[],
+  options: { lang?: string; signal?: AbortSignal } = {},
+): Promise<MorelikeSearchHit[]> {
+  if (options.signal?.aborted) {
+    throw new MorelikeFetchError('Request aborted', 'aborted')
+  }
+
+  const uniqueTitles = [...new Set(titles.map((title) => title.trim()).filter(Boolean))]
+  if (!uniqueTitles.length) return []
+
+  const lang = normalizeLang(options.lang ?? 'en')
+  const wikiHost = wikiHostFromLang(lang)
+
+  const params = new URLSearchParams({
+    action: 'query',
+    titles: uniqueTitles.join('|'),
+    prop: 'pageimages|description',
+    piprop: 'thumbnail',
+    pithumbsize: '160',
+    format: 'json',
+    formatversion: '2',
+    origin: '*',
+  })
+
+  const response = await fetch(`https://${wikiHost}/w/api.php?${params.toString()}`, {
+    signal: options.signal,
+    headers: wikimediaApiFetchHeaders('pages-metadata'),
+  })
+
+  if (!response.ok) {
+    throw new MorelikeFetchError(`Metadata fetch failed (HTTP ${response.status})`, 'http')
+  }
+
+  const data = (await response.json()) as MetadataResponse
+  if (data.error) {
+    throw new MorelikeFetchError(data.error.info ?? data.error.code ?? 'Metadata fetch failed', 'http')
+  }
+
+  const byKey = new Map<string, MorelikeSearchHit>()
+  for (const page of data.query?.pages ?? []) {
+    if (page.missing || !page.title) continue
+    byKey.set(normalizeTitleKey(page.title), {
+      title: page.title,
+      description: page.description?.trim() ?? '',
+      timestamp: '',
+      pageUrl: articleUrl(wikiHost, page.title),
+      thumbnail: page.thumbnail
+        ? {
+            url: page.thumbnail.source,
+            width: page.thumbnail.width,
+            height: page.thumbnail.height,
+          }
+        : undefined,
+    })
+  }
+
+  return uniqueTitles
+    .map((title) => byKey.get(normalizeTitleKey(title)))
+    .filter((hit): hit is MorelikeSearchHit => hit !== undefined)
+}
+
+const DEFAULT_MAX_MORELIKE_CALLS = 3
+
+/**
+ * Split interest seeds into at most `maxCalls` batches for separate morelike
+ * requests. Preserves input order; e.g. five seeds → [[a,b],[c,d],[e]].
+ */
+export function partitionSeedsForMorelikeCalls(
+  seedTitles: string[],
+  maxCalls = DEFAULT_MAX_MORELIKE_CALLS,
+): string[][] {
+  const titles: string[] = []
+  const seen = new Set<string>()
+
+  for (const raw of seedTitles) {
+    const title = raw.trim()
+    if (!title.length) continue
+    const key = normalizeTitleKey(title)
+    if (seen.has(key)) continue
+    seen.add(key)
+    titles.push(title)
+  }
+
+  if (!titles.length) return []
+
+  const numCalls = Math.min(maxCalls, titles.length)
+  const baseSize = Math.floor(titles.length / numCalls)
+  const remainder = titles.length % numCalls
+  const groups: string[][] = []
+
+  let index = 0
+  for (let call = 0; call < numCalls; call++) {
+    const size = baseSize + (call < remainder ? 1 : 0)
+    groups.push(titles.slice(index, index + size))
+    index += size
+  }
+
+  return groups
+}
+
+/** Round-robin merge from several hit lists, skipping duplicates and seed titles. */
+function interleaveMorelikeHits(
+  groups: MorelikeSearchHit[][],
+  limit: number,
+  excludeKeys: Set<string>,
+): MorelikeSearchHit[] {
+  const merged: MorelikeSearchHit[] = []
+  const seen = new Set<string>()
+  const indices = groups.map(() => 0)
+
+  while (merged.length < limit) {
+    let progress = false
+
+    for (let groupIndex = 0; groupIndex < groups.length; groupIndex++) {
+      const group = groups[groupIndex]
+      while (indices[groupIndex] < group.length) {
+        const hit = group[indices[groupIndex]]
+        indices[groupIndex] += 1
+        const key = normalizeTitleKey(hit.title)
+        if (seen.has(key) || excludeKeys.has(key)) continue
+        seen.add(key)
+        merged.push(hit)
+        progress = true
+        break
+      }
+      if (merged.length >= limit) return merged
+    }
+
+    if (!progress) break
+  }
+
+  return merged
+}
+
+/** Run up to `maxCalls` morelike searches and interleave hits (cap = `limit`). */
+export async function fetchMorelikeResultsBatched(
+  seedTitles: string[],
+  options: FetchMorelikeOptions & { maxCalls?: number },
+): Promise<MorelikeSearchHit[]> {
+  if (options.signal?.aborted) {
+    throw new MorelikeFetchError('Request aborted', 'aborted')
+  }
+
+  const batches = partitionSeedsForMorelikeCalls(seedTitles, options.maxCalls)
+  if (!batches.length) {
+    throw new MorelikeFetchError('Add at least one seed page title', 'empty')
+  }
+
+  const excludeKeys = new Set(
+    seedTitles.map((title) => title.trim()).filter(Boolean).map(normalizeTitleKey),
+  )
+  const limitPerBatch = Math.max(1, Math.ceil(options.limit / batches.length))
+  const batchResults: MorelikeSearchHit[][] = []
+
+  for (const batch of batches) {
+    if (options.signal?.aborted) {
+      throw new MorelikeFetchError('Request aborted', 'aborted')
+    }
+
+    const hits = await fetchMorelikeResults(batch, {
+      ...options,
+      limit: limitPerBatch,
+    })
+    batchResults.push(hits)
+  }
+
+  return interleaveMorelikeHits(batchResults, options.limit, excludeKeys)
+}
diff --git a/src/lib/fetchRecentChanges.ts b/src/lib/fetchRecentChanges.ts
new file mode 100644
index 0000000..1dddadb
--- /dev/null
+++ b/src/lib/fetchRecentChanges.ts
@@ -0,0 +1,200 @@
+import { normalizeWikiUsername, wikiHostFromLang, wikimediaApiFetchHeaders } from '@/config'
+
+import { fetchPagesMetadata } from './fetchMorelike'
+import { fetchUserEditedPageTitles } from './fetchUserEditedPageTitles'
+
+const TITLES_PER_BATCH = 50
+const REAL_USER_EDIT_LIMIT = 3
+
+export class FetchRecentChangesError extends Error {
+  constructor(
+    message: string,
+    public readonly code: 'aborted' | 'http',
+  ) {
+    super(message)
+    this.name = 'FetchRecentChangesError'
+  }
+}
+
+export interface LatestPageRevision {
+  title: string
+  editor: string
+  timestamp: string
+  comment: string
+}
+
+export interface FetchLatestRevisionsOptions {
+  signal?: AbortSignal
+  lang?: string
+}
+
+export interface ResolveRecentChangeTitlesOptions {
+  isRealUser: boolean
+  realUsername: string
+  signal?: AbortSignal
+  lang?: string
+}
+
+function assertNotAborted(signal?: AbortSignal): void {
+  if (signal?.aborted) {
+    throw new FetchRecentChangesError('Request aborted', 'aborted')
+  }
+}
+
+function normalizeTitleKey(title: string): string {
+  return title.trim().replace(/_/g, ' ').toLowerCase()
+}
+
+function dedupeTitles(titles: string[]): string[] {
+  const seen = new Set<string>()
+  const out: string[] = []
+
+  for (const raw of titles) {
+    const title = raw.trim()
+    if (!title.length) continue
+    const key = normalizeTitleKey(title)
+    if (seen.has(key)) continue
+    seen.add(key)
+    out.push(title)
+  }
+
+  return out
+}
+
+interface RevisionPage {
+  title?: string
+  missing?: boolean
+  revisions?: Array<{
+    timestamp?: string
+    user?: string
+    comment?: string
+  }>
+}
+
+interface RevisionsResponse {
+  error?: { code?: string; info?: string }
+  query?: { pages?: RevisionPage[] }
+}
+
+/**
+ * Latest revision per title (any editor). Batches titles to respect API limits.
+ */
+export async function fetchLatestRevisionsForTitles(
+  titles: string[],
+  options: FetchLatestRevisionsOptions = {},
+): Promise<LatestPageRevision[]> {
+  assertNotAborted(options.signal)
+
+  const uniqueTitles = dedupeTitles(titles)
+  if (!uniqueTitles.length) return []
+
+  const lang = options.lang ?? 'en'
+  const wikiHost = wikiHostFromLang(lang)
+  const headers = wikimediaApiFetchHeaders('recent-changes')
+  const results: LatestPageRevision[] = []
+
+  for (let offset = 0; offset < uniqueTitles.length; offset += TITLES_PER_BATCH) {
+    assertNotAborted(options.signal)
+
+    const batch = uniqueTitles.slice(offset, offset + TITLES_PER_BATCH)
+    const params = new URLSearchParams({
+      action: 'query',
+      titles: batch.join('|'),
+      prop: 'revisions',
+      // rvlimit is only valid for single-page queries; multi-title requests
+      // return one revision per page by default.
+      rvprop: 'timestamp|user|comment',
+      format: 'json',
+      formatversion: '2',
+      origin: '*',
+    })
+
+    const response = await fetch(`https://${wikiHost}/w/api.php?${params.toString()}`, {
+      signal: options.signal,
+      headers,
+    })
+
+    if (!response.ok) {
+      throw new FetchRecentChangesError(`HTTP ${response.status}`, 'http')
+    }
+
+    const data = (await response.json()) as RevisionsResponse
+    if (data.error) {
+      throw new FetchRecentChangesError(
+        data.error.info ?? data.error.code ?? 'Revision fetch failed',
+        'http',
+      )
+    }
+
+    for (const page of data.query?.pages ?? []) {
+      if (page.missing || !page.title) continue
+      const revision = page.revisions?.[0]
+      if (!revision?.timestamp) continue
+
+      results.push({
+        title: page.title,
+        editor: revision.user?.trim() || 'Unknown editor',
+        timestamp: revision.timestamp,
+        comment: revision.comment?.trim() || 'No edit summary',
+      })
+    }
+  }
+
+  return results
+}
+
+/**
+ * Interest pages plus (for Real user) up to 3 recently edited article titles.
+ */
+export async function resolveRecentChangePageTitles(
+  interests: string[],
+  options: ResolveRecentChangeTitlesOptions,
+): Promise<string[]> {
+  const titles = dedupeTitles(interests)
+
+  if (!options.isRealUser || !options.realUsername.trim()) {
+    return titles
+  }
+
+  try {
+    const edited = await fetchUserEditedPageTitles(options.realUsername, {
+      limit: REAL_USER_EDIT_LIMIT,
+      lang: options.lang,
+      signal: options.signal,
+    })
+    return dedupeTitles([...titles, ...edited])
+  } catch {
+    return titles
+  }
+}
+
+export interface EnrichedLatestRevision extends LatestPageRevision {
+  description: string
+  thumbnailSrc?: string
+}
+
+/**
+ * Latest revisions enriched with page descriptions and thumbnails.
+ */
+export async function fetchEnrichedLatestRevisions(
+  titles: string[],
+  options: FetchLatestRevisionsOptions = {},
+): Promise<EnrichedLatestRevision[]> {
+  const [revisions, metadata] = await Promise.all([
+    fetchLatestRevisionsForTitles(titles, options),
+    fetchPagesMetadata(titles, options).catch(() => []),
+  ])
+
+  const metadataByKey = new Map(
+    metadata.map((hit) => [normalizeTitleKey(hit.title), hit]),
+  )
+
+  return revisions.map((revision) => {
+    const meta = metadataByKey.get(normalizeTitleKey(revision.title))
+    return {
+      ...revision,
+      description: meta?.description?.trim() || 'No description available.',
+      thumbnailSrc: meta?.thumbnail?.url,
+    }
+  })
+}
diff --git a/src/lib/fetchTopPageviews.ts b/src/lib/fetchTopPageviews.ts
new file mode 100644
index 0000000..a0d00f3
--- /dev/null
+++ b/src/lib/fetchTopPageviews.ts
@@ -0,0 +1,139 @@
+import { normalizeLang } from '@/config'
+
+import { fetchFeaturedFeed } from './fetchFeaturedFeed'
+
+export interface WeeklyTopArticle {
+  title: string
+  views: number
+  thumbnailSrc?: string
+}
+
+export class FetchTopPageviewsError extends Error {
+  constructor(
+    message: string,
+    public readonly code: 'aborted' | 'http' | 'empty',
+  ) {
+    super(message)
+    this.name = 'FetchTopPageviewsError'
+  }
+}
+
+const DEFAULT_DAYS = 7
+const DEFAULT_LIMIT = 10
+
+function padTwo(value: number): string {
+  return String(value).padStart(2, '0')
+}
+
+function formatDayParts(date: Date): { year: string; month: string; day: string } {
+  return {
+    year: String(date.getFullYear()),
+    month: padTwo(date.getMonth() + 1),
+    day: padTwo(date.getDate()),
+  }
+}
+
+/** Past calendar days, starting yesterday (offset 1). */
+export function pastCalendarDays(count: number, startOffset = 1): Date[] {
+  const dates: Date[] = []
+  const anchor = new Date()
+  anchor.setHours(0, 0, 0, 0)
+
+  for (let offset = startOffset; offset < startOffset + count; offset++) {
+    const date = new Date(anchor)
+    date.setDate(date.getDate() - offset)
+    dates.push(date)
+  }
+
+  return dates
+}
+
+export function trendingCacheKey(lang: string, days: Date[]): string {
+  const normalized = normalizeLang(lang)
+  if (!days.length) return `trending:${normalized}:empty`
+  const sorted = [...days].sort((a, b) => a.getTime() - b.getTime())
+  const first = formatDayParts(sorted[0])
+  const last = formatDayParts(sorted[sorted.length - 1])
+  return `trending:${normalized}:${first.year}-${first.month}-${first.day}_${last.year}-${last.month}-${last.day}`
+}
+
+export function isTrendingArticleTitle(title: string): boolean {
+  const trimmed = title.trim()
+  if (!trimmed.length) return false
+  if (trimmed === 'Main_Page' || trimmed === '-') return false
+  // Mainspace only — skip Special:, Wikipedia:, etc.
+  return !trimmed.includes(':')
+}
+
+export interface FetchWeeklyTopPageviewsOptions {
+  lang?: string
+  days?: number
+  limit?: number
+  signal?: AbortSignal
+}
+
+/**
+ * Aggregate most-read articles from Wikifeeds `feed/featured` over the past week.
+ * Uses the same en.wikipedia.org host as the Featured module (browser-friendly).
+ */
+export async function fetchWeeklyTopPageviews(
+  options: FetchWeeklyTopPageviewsOptions = {},
+): Promise<{ articles: WeeklyTopArticle[]; windowDays: Date[] }> {
+  const lang = normalizeLang(options.lang ?? 'en')
+  const dayCount = options.days ?? DEFAULT_DAYS
+  const limit = options.limit ?? DEFAULT_LIMIT
+  const signal = options.signal
+
+  const windowDays = pastCalendarDays(dayCount)
+  const dailyFeeds = await Promise.all(
+    windowDays.map((date) =>
+      fetchFeaturedFeed({ date, lang, signal }).catch((error) => {
+        if ((error as Error).name === 'AbortError') throw error
+        return null
+      }),
+    ),
+  )
+
+  if (signal?.aborted) {
+    throw new FetchTopPageviewsError('Request aborted.', 'aborted')
+  }
+
+  const viewsByTitle = new Map<string, { views: number; thumbnailSrc?: string }>()
+  for (const feed of dailyFeeds) {
+    for (const entry of feed?.mostread?.articles ?? []) {
+      if (!isTrendingArticleTitle(entry.title)) continue
+      const current = viewsByTitle.get(entry.title) ?? { views: 0 }
+      viewsByTitle.set(entry.title, {
+        views: current.views + entry.views,
+        thumbnailSrc: current.thumbnailSrc ?? entry.thumbnail?.source,
+      })
+    }
+  }
+
+  const articles = [...viewsByTitle.entries()]
+    .map(([title, { views, thumbnailSrc }]) => ({ title, views, thumbnailSrc }))
+    .sort((a, b) => b.views - a.views)
+    .slice(0, limit)
+
+  if (!articles.length) {
+    throw new FetchTopPageviewsError('No trending articles available for this week.', 'empty')
+  }
+
+  return { articles, windowDays }
+}
+
+export function formatWeeklyViews(views: number): string {
+  if (views >= 1_000_000) {
+    const millions = views / 1_000_000
+    const rounded = millions >= 10 ? Math.round(millions) : Math.round(millions * 10) / 10
+    return `${rounded}M views this week`
+  }
+  if (views >= 1_000) {
+    return `${Math.round(views / 1_000)}K views this week`
+  }
+  return `${views.toLocaleString('en-US')} views this week`
+}
+
+export function displayArticleTitle(title: string): string {
+  return title.replace(/_/g, ' ').trim()
+}
diff --git a/src/lib/fetchUserEditedPageTitles.ts b/src/lib/fetchUserEditedPageTitles.ts
new file mode 100644
index 0000000..8b80c0d
--- /dev/null
+++ b/src/lib/fetchUserEditedPageTitles.ts
@@ -0,0 +1,147 @@
+import { normalizeWikiUsername, wikiHostFromLang, wikimediaApiFetchHeaders } from '@/config'
+
+const CONTRIBS_PER_PAGE = 500
+const MAX_CONTRIB_PAGES = 5
+export const MAX_SEED_PAGES = 20
+
+export class FetchUserEditedPageTitlesError extends Error {
+  constructor(
+    message: string,
+    public readonly code:
+      | 'missing_username'
+      | 'user_not_found'
+      | 'no_edits'
+      | 'aborted'
+      | 'http',
+  ) {
+    super(message)
+    this.name = 'FetchUserEditedPageTitlesError'
+  }
+}
+
+export interface FetchUserEditedPageTitlesOptions {
+  signal?: AbortSignal
+  /** Wikipedia language code (default `en`). */
+  lang?: string
+  /** Max unique article titles to return (default 20). */
+  limit?: number
+}
+
+function assertNotAborted(signal?: AbortSignal): void {
+  if (signal?.aborted) {
+    throw new FetchUserEditedPageTitlesError('Request aborted', 'aborted')
+  }
+}
+
+function actionUrl(wikiHost: string, params: Record<string, string>): string {
+  const search = new URLSearchParams({
+    ...params,
+    format: 'json',
+    formatversion: '2',
+    origin: '*',
+  })
+  return `https://${wikiHost}/w/api.php?${search.toString()}`
+}
+
+function normalizeTitleKey(title: string): string {
+  return title.trim().replace(/_/g, ' ').toLowerCase()
+}
+
+/**
+ * Unique article titles from a user's namespace-0 edit history (most recent first).
+ */
+export async function fetchUserEditedPageTitles(
+  rawUsername: string,
+  options: FetchUserEditedPageTitlesOptions = {},
+): Promise<string[]> {
+  const username = normalizeWikiUsername(rawUsername)
+  if (!username.length) {
+    throw new FetchUserEditedPageTitlesError('Enter a Wikipedia username', 'missing_username')
+  }
+
+  const wikiHost = wikiHostFromLang(options.lang ?? 'en')
+  const limit = Math.max(1, Math.min(options.limit ?? MAX_SEED_PAGES, MAX_SEED_PAGES))
+  const headers = wikimediaApiFetchHeaders('morelike-search')
+
+  assertNotAborted(options.signal)
+
+  const userResponse = await fetch(
+    actionUrl(wikiHost, {
+      action: 'query',
+      list: 'users',
+      ususers: username,
+    }),
+    {
+      signal: options.signal,
+      headers,
+    },
+  )
+
+  if (!userResponse.ok) {
+    throw new FetchUserEditedPageTitlesError(`HTTP ${userResponse.status}`, 'http')
+  }
+
+  const userData = (await userResponse.json()) as {
+    query?: { users?: Array<{ name?: string; missing?: boolean }> }
+  }
+
+  const userInfo = userData.query?.users?.[0]
+  if (!userInfo || userInfo.missing) {
+    throw new FetchUserEditedPageTitlesError(`User "${username}" not found`, 'user_not_found')
+  }
+
+  const seen = new Set<string>()
+  const titles: string[] = []
+  let uccontinue: string | undefined
+
+  for (let page = 0; page < MAX_CONTRIB_PAGES; page++) {
+    assertNotAborted(options.signal)
+
+    const params: Record<string, string> = {
+      action: 'query',
+      list: 'usercontribs',
+      ucuser: username,
+      ucnamespace: '0',
+      uclimit: String(CONTRIBS_PER_PAGE),
+    }
+    if (uccontinue) params.uccontinue = uccontinue
+
+    const response = await fetch(actionUrl(wikiHost, params), {
+      signal: options.signal,
+      headers,
+    })
+
+    if (!response.ok) {
+      throw new FetchUserEditedPageTitlesError(`HTTP ${response.status}`, 'http')
+    }
+
+    const data = (await response.json()) as {
+      query?: { usercontribs?: Array<{ title?: string }> }
+      continue?: { uccontinue?: string }
+    }
+
+    for (const contrib of data.query?.usercontribs ?? []) {
+      const title = typeof contrib.title === 'string' ? contrib.title.trim() : ''
+      if (!title.length) continue
+
+      const key = normalizeTitleKey(title)
+      if (seen.has(key)) continue
+
+      seen.add(key)
+      titles.push(title)
+
+      if (titles.length >= limit) {
+        return titles
+      }
+    }
+
+    uccontinue = data.continue?.uccontinue
+    if (!uccontinue) break
+  }
+
+  if (!titles.length) {
+    throw new FetchUserEditedPageTitlesError('No article edits found', 'no_edits')
+  }
+
+  return titles
+}
diff --git a/src/lib/formatEditSummary.ts b/src/lib/formatEditSummary.ts
new file mode 100644
index 0000000..def3d59
--- /dev/null
+++ b/src/lib/formatEditSummary.ts
@@ -0,0 +1,42 @@
+const DEFAULT_MAX_LENGTH = 200
+
+/**
+ * Convert MediaWiki edit-summary wikitext into plain readable text.
+ * Links, section markers, and light markup are resolved — never rendered as HTML.
+ */
+export function editSummaryWikitextToPlainText(raw: string): string {
+  let text = raw.trim()
+
+  text = text.replace(/<nowiki>([\s\S]*?)<\/nowiki>/gi, '$1')
+  text = text.replace(/\/\* *(.*?) *\*\//g, '$1')
+  text = text.replace(/\[\[(?:[^\]|#]+\|)?([^\]]+)\]\]/g, (_, part: string) =>
+    part.replace(/_/g, ' ').trim(),
+  )
+  text = text.replace(
+    /\[(https?:\/\/[^\s\]]+)(?:\s+([^\]]+))?\]/g,
+    (_match, _url: string, label?: string) => (label ?? _url).trim(),
+  )
+  text = text.replace(/'''([^']+)'''/g, '$1')
+  text = text.replace(/''([^']+)''/g, '$1')
+
+  return text.replace(/\s+/g, ' ').trim()
+}
+
+export function normalizeEditSummaryWikitext(raw: string): string {
+  return editSummaryWikitextToPlainText(raw)
+}
+
+export function truncateEditSummary(text: string, maxLength = DEFAULT_MAX_LENGTH): string {
+  if (text.length <= maxLength) return text
+  return text.slice(0, maxLength - 1).trimEnd() + '\u2026'
+}
+
+/** Edit summary as plain text for the UI. */
+export function formatEditSummaryForDisplay(
+  raw: string | null | undefined,
+  maxLength = DEFAULT_MAX_LENGTH,
+): string {
+  const plain = normalizeEditSummaryWikitext(raw?.trim() || '')
+  if (!plain.length) return 'No edit summary'
+  return truncateEditSummary(plain, maxLength)
+}
diff --git a/src/lib/mediaWikiTime.ts b/src/lib/mediaWikiTime.ts
new file mode 100644
index 0000000..cfeb3a8
--- /dev/null
+++ b/src/lib/mediaWikiTime.ts
@@ -0,0 +1,29 @@
+/** Parse Action API timestamps (`2026-02-23T09:12:59Z` or `2013-07-31 11:54:03`). */
+export function parseMediaWikiTimestamp(timestamp: string): Date {
+  const trimmed = timestamp.trim()
+  if (!trimmed.length) return new Date(Number.NaN)
+  if (trimmed.includes('T')) {
+    return new Date(trimmed.endsWith('Z') ? trimmed : `${trimmed}Z`)
+  }
+  return new Date(trimmed.replace(' ', 'T') + 'Z')
+}
+
+export function formatRelativeTime(isoTimestamp: string): string {
+  const then = parseMediaWikiTimestamp(isoTimestamp).getTime()
+  if (Number.isNaN(then)) return '—'
+  const diffMs = Date.now() - then
+  if (diffMs < 0) return 'just now'
+
+  const minutes = Math.floor(diffMs / (1000 * 60))
+  const hours = Math.floor(diffMs / (1000 * 60 * 60))
+  const days = Math.floor(diffMs / (1000 * 60 * 60 * 24))
+
+  if (minutes < 1) return 'just now'
+  if (minutes < 60) return minutes === 1 ? '1 minute ago' : `${minutes} minutes ago`
+  if (hours < 24) return hours === 1 ? '1 hour ago' : `${hours} hours ago`
+  if (days === 1) return '1 day ago'
+  if (days < 30) return `${days} days ago`
+  const months = Math.floor(days / 30)
+  if (months === 1) return '1 month ago'
+  return `${months} months ago`
+}
diff --git a/src/lib/morelikeMlt.ts b/src/lib/morelikeMlt.ts
new file mode 100644
index 0000000..e936305
--- /dev/null
+++ b/src/lib/morelikeMlt.ts
@@ -0,0 +1,158 @@
+export type MorelikeMltPreset = 'default' | 'custom'
+
+export type MorelikeSortOrder = 'relevance' | 'lastEdit'
+
+/** CirrusSearch more_like_this URL params (see Help:CirrusSearch#Morelike). */
+export interface MorelikeMltCustomSettings {
+  maxQueryTerms: number
+  minTermFreq: number
+  minDocFreq: number
+  maxDocFreq: number | null
+  minWordLength: number
+  maxWordLength: number | null
+  minimumShouldMatchPercent: number
+  fields: 'text' | 'title' | 'opening_text'
+  useFieldsOnly: boolean
+}
+
+/**
+ * Extension defaults from CirrusSearch $wgCirrusSearchMoreLikeThisConfig
+ * (docs/settings.txt). The “Default” preset omits all cirrusMlt* params so the
+ * wiki uses these server-side — Custom only sends params that differ from this.
+ */
+export const CIRRUS_MLT_EXTENSION_DEFAULTS: MorelikeMltCustomSettings = {
+  maxQueryTerms: 25,
+  minTermFreq: 2,
+  minDocFreq: 2,
+  maxDocFreq: null,
+  minWordLength: 0,
+  maxWordLength: null,
+  minimumShouldMatchPercent: 30,
+  fields: 'text',
+  useFieldsOnly: false,
+}
+
+/** Starting values for the Custom sliders (matches extension defaults). */
+export const DEFAULT_MLT_CUSTOM: MorelikeMltCustomSettings = {
+  ...CIRRUS_MLT_EXTENSION_DEFAULTS,
+}
+
+/** Preset for opening_text-only MLT tuning. */
+export const OPENING_TEXT_MLT_CUSTOM: MorelikeMltCustomSettings = {
+  ...DEFAULT_MLT_CUSTOM,
+  fields: 'opening_text',
+  useFieldsOnly: true,
+}
+
+export const MLT_PRESET_LABELS: Record<MorelikeMltPreset, string> = {
+  default: 'No overrides (wiki default)',
+  custom: 'Custom',
+}
+
+export const SORT_ORDER_LABELS: Record<MorelikeSortOrder, string> = {
+  relevance: 'Most relevant',
+  lastEdit: 'Most recent edit',
+}
+
+function clampInt(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, Math.round(value)))
+}
+
+export function normalizeMltCustom(input: unknown): MorelikeMltCustomSettings {
+  if (typeof input !== 'object' || input === null) {
+    return { ...DEFAULT_MLT_CUSTOM }
+  }
+
+  const record = input as Record<string, unknown>
+  const fields =
+    record.fields === 'title' || record.fields === 'opening_text' || record.fields === 'text'
+      ? record.fields
+      : DEFAULT_MLT_CUSTOM.fields
+
+  return {
+    maxQueryTerms:
+      typeof record.maxQueryTerms === 'number'
+        ? clampInt(record.maxQueryTerms, 1, 100)
+        : DEFAULT_MLT_CUSTOM.maxQueryTerms,
+    minTermFreq:
+      typeof record.minTermFreq === 'number'
+        ? clampInt(record.minTermFreq, 1, 20)
+        : DEFAULT_MLT_CUSTOM.minTermFreq,
+    minDocFreq:
+      typeof record.minDocFreq === 'number'
+        ? clampInt(record.minDocFreq, 1, 20)
+        : DEFAULT_MLT_CUSTOM.minDocFreq,
+    maxDocFreq:
+      typeof record.maxDocFreq === 'number'
+        ? clampInt(record.maxDocFreq, 1, 1_000_000)
+        : null,
+    minWordLength:
+      typeof record.minWordLength === 'number'
+        ? clampInt(record.minWordLength, 0, 20)
+        : DEFAULT_MLT_CUSTOM.minWordLength,
+    maxWordLength:
+      typeof record.maxWordLength === 'number' ? clampInt(record.maxWordLength, 1, 100) : null,
+    minimumShouldMatchPercent:
+      typeof record.minimumShouldMatchPercent === 'number'
+        ? clampInt(record.minimumShouldMatchPercent, 1, 100)
+        : DEFAULT_MLT_CUSTOM.minimumShouldMatchPercent,
+    fields,
+    useFieldsOnly:
+      typeof record.useFieldsOnly === 'boolean'
+        ? record.useFieldsOnly
+        : DEFAULT_MLT_CUSTOM.useFieldsOnly,
+  }
+}
+
+function buildCustomMltParams(custom: MorelikeMltCustomSettings): Record<string, string> {
+  const normalized = normalizeMltCustom(custom)
+  const defaults = CIRRUS_MLT_EXTENSION_DEFAULTS
+  const params: Record<string, string> = {}
+
+  if (normalized.maxQueryTerms !== defaults.maxQueryTerms) {
+    params.cirrusMltMaxQueryTerms = String(normalized.maxQueryTerms)
+  }
+
+  if (normalized.minTermFreq !== defaults.minTermFreq) {
+    params.cirrusMltMinTermFreq = String(normalized.minTermFreq)
+  }
+
+  if (normalized.minDocFreq !== defaults.minDocFreq) {
+    params.cirrusMltMinDocFreq = String(normalized.minDocFreq)
+  }
+
+  if (normalized.minWordLength !== defaults.minWordLength) {
+    params.cirrusMltMinWordLength = String(normalized.minWordLength)
+  }
+
+  if (normalized.minimumShouldMatchPercent !== defaults.minimumShouldMatchPercent) {
+    params.cirrusMltMinimumShouldMatch = `${normalized.minimumShouldMatchPercent}%`
+  }
+
+  if (normalized.maxDocFreq !== null) {
+    params.cirrusMltMaxDocFreq = String(normalized.maxDocFreq)
+  }
+
+  if (normalized.maxWordLength !== null) {
+    params.cirrusMltMaxWordLength = String(normalized.maxWordLength)
+  }
+
+  if (normalized.useFieldsOnly) {
+    params.cirrusMltUseFields = 'true'
+  }
+
+  if (normalized.useFieldsOnly || normalized.fields !== defaults.fields) {
+    params.cirrusMltFields = normalized.fields
+  }
+
+  return params
+}
+
+export function resolveMltParams(
+  preset: MorelikeMltPreset,
+  custom: MorelikeMltCustomSettings,
+): Record<string, string> {
+  if (preset === 'default') return {}
+
+  return buildCustomMltParams(custom)
+}
diff --git a/src/prototypes/no-distractions/assets/icon-subtract-circle.svg b/src/prototypes/no-distractions/assets/icon-subtract-circle.svg
new file mode 100644
index 0000000..ef2cc76
--- /dev/null
+++ b/src/prototypes/no-distractions/assets/icon-subtract-circle.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+  <path d="M14 10H4V8H14V10Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M9 0C13.9706 0 18 4.02944 18 9C18 13.9706 13.9706 18 9 18C4.02944 18 0 13.9706 0 9C0 4.02944 4.02944 0 9 0ZM9 2C5.13401 2 2 5.13401 2 9C2 12.866 5.13401 16 9 16C12.866 16 16 12.866 16 9C16 5.13401 12.866 2 9 2Z" fill="currentColor"/>
+</svg>
diff --git a/src/prototypes/no-distractions/components/AllSuggestionsStickyHead.vue b/src/prototypes/no-distractions/components/AllSuggestionsStickyHead.vue
new file mode 100644
index 0000000..79f94be
--- /dev/null
+++ b/src/prototypes/no-distractions/components/AllSuggestionsStickyHead.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { CdxIcon } from '@wikimedia/codex'
+import { cdxIconConfigure } from '@wikimedia/codex-icons'
+
+import SuggestedEditsModeMenu, { type MenuModule } from './SuggestedEditsModeMenu.vue'
+import type { FlowState } from '../data/useFlowState'
+
+const props = defineProps<{
+  flow: FlowState
+}>()
+
+const emit = defineEmits<{
+  configure: []
+}>()
+
+const activeModule = computed<MenuModule>(() => {
+  if (props.flow.screen.value === 'featured') return 'featured'
+  if (props.flow.screen.value === 'trending') return 'trending'
+  return props.flow.module.value
+})
+</script>
+
+<template>
+  <header class="all-suggestions-sticky-head">
+    <div class="all-suggestions-sticky-head__spacer" aria-hidden="true" />
+    <SuggestedEditsModeMenu
+      :flow="flow"
+      :active-module="activeModule"
+      @configure="emit('configure')"
+    />
+    <button
+      class="all-suggestions-sticky-head__icon-btn"
+      type="button"
+      aria-label="Configure interests"
+      @click="emit('configure')"
+    >
+      <CdxIcon :icon="cdxIconConfigure" />
+    </button>
+  </header>
+</template>
+
+<style scoped>
+.all-suggestions-sticky-head {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  box-sizing: border-box;
+  min-height: 2rem;
+  padding: var(--spacing-100, 16px);
+  background-color: var(--background-color-base);
+}
+
+.all-suggestions-sticky-head__spacer {
+  width: 2rem;
+  height: 2rem;
+}
+
+.all-suggestions-sticky-head__icon-btn {
+  justify-self: end;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: var(--spacing-25, 4px);
+  border: none;
+  border-radius: var(--border-radius-base, 2px);
+  background: transparent;
+  color: var(--color-base);
+  cursor: pointer;
+}
+
+.all-suggestions-sticky-head__icon-btn :deep(.cdx-icon) {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+</style>
diff --git a/src/prototypes/no-distractions/components/FeaturedCard.vue b/src/prototypes/no-distractions/components/FeaturedCard.vue
new file mode 100644
index 0000000..0de1d8b
--- /dev/null
+++ b/src/prototypes/no-distractions/components/FeaturedCard.vue
@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  title?: string
+  body: string
+  description?: string
+  thumbnailSrc?: string
+  /** When set, the card is tappable. */
+  articleTitle?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '',
+  description: undefined,
+  thumbnailSrc: undefined,
+  articleTitle: undefined,
+})
+
+const emit = defineEmits<{
+  open: [title: string]
+}>()
+
+const isInteractive = computed(() => Boolean(props.articleTitle?.trim()))
+
+function onActivate(): void {
+  if (!props.articleTitle?.trim()) return
+  emit('open', props.articleTitle.trim())
+}
+
+function onKeydown(event: KeyboardEvent): void {
+  if (!isInteractive.value) return
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault()
+    onActivate()
+  }
+}
+</script>
+
+<template>
+  <component
+    :is="isInteractive ? 'button' : 'article'"
+    class="featured-card"
+    :class="{ 'featured-card--interactive': isInteractive }"
+    :type="isInteractive ? 'button' : undefined"
+    @click="onActivate"
+    @keydown="onKeydown"
+  >
+    <div class="featured-card__body">
+      <p v-if="title" class="featured-card__title">{{ title }}</p>
+      <p class="featured-card__text">{{ body }}</p>
+      <p v-if="description" class="featured-card__description">{{ description }}</p>
+    </div>
+
+    <span v-if="thumbnailSrc" class="featured-card__thumb">
+      <img :src="thumbnailSrc" alt="" />
+    </span>
+  </component>
+</template>
+
+<style scoped>
+.featured-card {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-75, 12px);
+  width: 100%;
+  padding: 0.8125rem;
+  border: var(--border-width-base, 1px) solid var(--border-color-base, #a2a9b1);
+  border-radius: var(--border-radius-base, 2px);
+  background-color: var(--background-color-base);
+  text-align: start;
+}
+
+.featured-card--interactive {
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+}
+
+.featured-card--interactive:focus-visible {
+  outline: 2px solid var(--color-progressive, #36c);
+  outline-offset: 2px;
+}
+
+.featured-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-25, 4px);
+  flex: 1;
+  min-width: 0;
+}
+
+.featured-card__title {
+  margin: 0;
+  font-size: var(--font-size-medium, 1rem);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-small, 1.375);
+  color: var(--color-base);
+}
+
+.featured-card__text {
+  margin: 0;
+  font-size: var(--font-size-small, 0.875rem);
+  line-height: var(--line-height-small, 1.43);
+  color: var(--color-base);
+}
+
+.featured-card__description {
+  margin: 0;
+  font-size: var(--font-size-small, 0.875rem);
+  line-height: var(--line-height-small, 1.43);
+  color: var(--color-subtle, #54595d);
+}
+
+.featured-card__thumb {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 4rem;
+  height: 4rem;
+  border: var(--border-width-base, 1px) solid var(--border-color-subtle, #c8ccd1);
+  border-radius: var(--border-radius-base, 2px);
+  background-color: var(--background-color-interactive-subtle, #f8f9fa);
+  overflow: hidden;
+  color: var(--color-placeholder, #72777d);
+}
+
+.featured-card__thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+</style>
diff --git a/src/prototypes/no-distractions/components/OnboardingShell.vue b/src/prototypes/no-distractions/components/OnboardingShell.vue
new file mode 100644
index 0000000..27e39c4
--- /dev/null
+++ b/src/prototypes/no-distractions/components/OnboardingShell.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import './onboarding-layout.css'
+
+/**
+ * Full-height onboarding shell for the personalisation steps: a 3-segment
+ * progress indicator at the top and a scrollable content area. When screens
+ * use inline actions (Figma dashpage pattern), they pin CTAs inside `.ob-body`.
+ */
+interface Props {
+  /** Active step (1 = survey, 2 = interests, 3 = email). 0 = welcome — no segment highlighted. */
+  current?: number
+  /** Total number of progress segments. */
+  total?: number
+  /** Hide the progress bar entirely (kept for flexibility). */
+  showProgress?: boolean
+  /** Remove padding from the scrollable content area (full-bleed layouts). */
+  flushContent?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  current: 0,
+  total: 3,
+  showProgress: true,
+  flushContent: false,
+})
+
+/** Figma highlights one segment at a time, not a cumulative fill. */
+const activeSegment = computed(() => (props.current > 0 ? props.current - 1 : -1))
+</script>
+
+<template>
+  <div class="onboarding-shell">
+    <div v-if="props.showProgress" class="onboarding-shell__progress" role="presentation">
+      <span
+        v-for="index in props.total"
+        :key="index"
+        class="onboarding-shell__segment"
+        :class="{ 'onboarding-shell__segment--active': index - 1 === activeSegment }"
+      />
+    </div>
+
+    <div
+      class="onboarding-shell__content"
+      :class="{ 'onboarding-shell__content--flush': props.flushContent }"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.onboarding-shell {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-height: 100vh;
+  background-color: var(--background-color-base);
+}
+
+.onboarding-shell__progress {
+  display: flex;
+  gap: var(--spacing-50, 8px);
+  padding: var(--spacing-100, 16px);
+}
+
+.onboarding-shell__segment {
+  flex: 1;
+  height: 4px;
+  border-radius: var(--border-radius-pill, 9999px);
+  background-color: var(--background-color-neutral, #eaecf0);
+}
+
+.onboarding-shell__segment--active {
+  background-color: var(--background-color-interactive, #c8ccd1);
+}
+
+.onboarding-shell__content {
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: var(--spacing-75, 12px) var(--spacing-100, 16px) var(--spacing-100, 16px);
+}
+
+.onboarding-shell__content--flush {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+}
+</style>
diff --git a/src/prototypes/no-distractions/components/RecentChangeCard.vue b/src/prototypes/no-distractions/components/RecentChangeCard.vue
new file mode 100644
index 0000000..7b2f6f6
--- /dev/null
+++ b/src/prototypes/no-distractions/components/RecentChangeCard.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { CdxIcon } from '@wikimedia/codex'
+import { cdxIconArticle, cdxIconUserAvatar } from '@wikimedia/codex-icons'
+
+interface Props {
+  articleTitle: string
+  articleDescription: string
+  editor: string
+  relativeTime: string
+  editSummary: string
+  thumbnailSrc?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  thumbnailSrc: undefined,
+})
+</script>
+
+<template>
+  <article class="recent-change-card">
+    <div class="recent-change-card__body">
+      <p class="recent-change-card__headline">
+        <strong class="recent-change-card__title">{{ articleTitle }}</strong>
+        <template v-if="articleDescription">
+          <span class="recent-change-card__desc-sep"> &middot; </span>
+          <span class="recent-change-card__desc">{{ articleDescription }}</span>
+        </template>
+      </p>
+      <p class="recent-change-card__meta">
+        <CdxIcon class="recent-change-card__meta-icon" :icon="cdxIconUserAvatar" />
+        <strong class="recent-change-card__editor">{{ editor }}</strong>
+        <span class="recent-change-card__meta-sep"> &middot; </span>
+        <span class="recent-change-card__time">{{ relativeTime }}</span>
+      </p>
+      <p class="recent-change-card__summary">{{ editSummary }}</p>
+    </div>
+
+    <span class="recent-change-card__thumb">
+      <img v-if="thumbnailSrc" :src="thumbnailSrc" alt="" />
+      <CdxIcon v-else :icon="cdxIconArticle" />
+    </span>
+  </article>
+</template>
+
+<style scoped>
+.recent-change-card {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-75, 12px);
+  padding: 0.8125rem;
+  border: var(--border-width-base, 1px) solid var(--border-color-base, #a2a9b1);
+  border-radius: var(--border-radius-base, 2px);
+  background-color: var(--background-color-base);
+}
+
+.recent-change-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-25, 4px);
+  flex: 1;
+  min-width: 0;
+}
+
+.recent-change-card__headline {
+  margin: 0;
+  font-size: var(--font-size-small, 0.875rem);
+  line-height: var(--line-height-small, 1.43);
+  color: var(--color-base);
+}
+
+.recent-change-card__title {
+  font-size: var(--font-size-small, 0.875rem);
+  font-weight: var(--font-weight-bold);
+}
+
+.recent-change-card__desc {
+  font-size: var(--font-size-small, 0.875rem);
+}
+
+.recent-change-card__meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--spacing-25, 4px);
+  margin: 0;
+  font-size: var(--font-size-small, 0.875rem);
+  line-height: var(--line-height-small, 1.43);
+  color: var(--color-base);
+}
+
+.recent-change-card__meta-icon :deep(.cdx-icon) {
+  width: 1rem;
+  height: 1rem;
+}
+
+.recent-change-card__editor {
+  font-weight: var(--font-weight-bold);
+}
+
+.recent-change-card__time {
+  color: var(--color-subtle, #54595d);
+}
+
+.recent-change-card__summary {
+  margin: 0;
+  padding-top: var(--spacing-25, 4px);
+  font-size: var(--font-size-small, 0.875rem);
+  line-height: var(--line-height-small, 1.375);
+  color: var(--color-subtle, #54595d);
+  overflow-wrap: anywhere;
+}
+
+.recent-change-card__thumb {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 4rem;
+  height: 4rem;
+  border: var(--border-width-base, 1px) solid var(--border-color-subtle, #c8ccd1);
+  border-radius: var(--border-radius-base, 2px);
+  background-color: var(--background-color-interactive-subtle, #f8f9fa);
+  overflow: hidden;
+  color: var(--color-placeholder, #72777d);
+}
+
+.recent-change-card__thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+</style>
diff --git a/src/prototypes/no-distractions/components/ReturnToArticle.vue b/src/prototypes/no-distractions/components/ReturnToArticle.vue
new file mode 100644
index 0000000..b4c4370
--- /dev/null
+++ b/src/prototypes/no-distractions/components/ReturnToArticle.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { CdxIcon } from '@wikimedia/codex'
+import { cdxIconUndo } from '@wikimedia/codex-icons'
+
+defineProps<{
+  title: string
+}>()
+
+const emit = defineEmits<{
+  click: []
+}>()
+</script>
+
+<template>
+  <button type="button" class="return-to-article" @click="emit('click')">
+    <CdxIcon class="return-to-article__icon" :icon="cdxIconUndo" />
+    <span class="return-to-article__label">
+      Return to <span class="return-to-article__link">{{ title }}</span>
+    </span>
+  </button>
+</template>
+
+<style scoped>
+.return-to-article {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-50, 8px);
+  width: 100%;
+  padding: 0;
+  border: none;
+  background: transparent;
+  font: inherit;
+  font-size: var(--font-size-medium, 1rem);
+  line-height: var(--line-height-small, 1.375);
+  color: var(--color-base, #202122);
+  cursor: pointer;
+  text-align: start;
+}
+
+.return-to-article__icon :deep(.cdx-icon) {
+  width: 1.125rem;
+  height: 1.125rem;
+  color: var(--color-base, #202122);
+}
+
+.return-to-article__link {
+  color: var(--color-progressive, #36c);
+}
+</style>
diff --git a/src/prototypes/no-distractions/components/SavePagesSheet.vue b/src/prototypes/no-distractions/components/SavePagesSheet.vue
new file mode 100644
index 0000000..4e43706
--- /dev/null
+++ b/src/prototypes/no-distractions/components/SavePagesSheet.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { CdxPopover } from '@wikimedia/codex'
+
+import type { FlowState } from '../data/useFlowState'
+
+const open = defineModel<boolean>('open', { default: false })
+
+const props = defineProps<{ flow: FlowState }>()
+
+const primaryAction = {
+  label: 'Create account',
+  actionType: 'progressive' as const,
+}
+
+const defaultAction = {
+  label: 'Log in',
+}
+
+function onCreateAccount(): void {
+  open.value = false
+  void props.flow.goTo('account')
+}
+
+function onLogIn(): void {
+  open.value = false
+  void props.flow.goTo('home')
+}
+</script>
+
+<template>
+  <CdxPopover
+    v-model:open="open"
+    class="save-pages-sheet"
+    use-bottom-sheet
+    title="Save pages"
+    :use-close-button="true"
+    :primary-action="primaryAction"
+    :default-action="defaultAction"
+    :stacked-actions="true"
+    @primary="onCreateAccount"
+    @default="onLogIn"
+  >
+    Please log in or create an account to get started.
+  </CdxPopover>
+</template>
+
+<!-- Teleported popover: match onboarding dashpage CTA sizing (onboarding-layout.css). -->
+<style>
+.save-pages-sheet .cdx-popover__header__title {
+  font-family: var(--font-family-base, sans-serif);
+  font-size: var(--font-size-x-large, 1.25rem);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-x-large, 1.5);
+}
+
+.save-pages-sheet .cdx-popover__footer__actions .cdx-button {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 3rem;
+  padding-block: var(--spacing-100, 16px);
+  font-size: var(--font-size-medium, 1rem);
+  font-weight: var(--font-weight-bold);
+}
+</style>
diff --git a/src/prototypes/no-distractions/components/SuggestedEditsModeMenu.vue b/src/prototypes/no-distractions/components/SuggestedEditsModeMenu.vue
new file mode 100644
index 0000000..5b1f124
--- /dev/null
+++ b/src/prototypes/no-distractions/components/SuggestedEditsModeMenu.vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import {
+  CdxIcon,
+  CdxMenuButton,
+  type MenuGroupData,
+  type MenuItemData,
+  type MenuItemValue,
+} from '@wikimedia/codex'
+import {
+  cdxIconBook,
+  cdxIconCheckAll,
+  cdxIconDownTriangle,
+  cdxIconEdit,
+  cdxIconSettings,
+} from '@wikimedia/codex-icons'
+
+import type { FlowState, Module } from '../data/useFlowState'
+
+export type MenuModule = Module | 'featured' | 'trending'
+
+const props = defineProps<{
+  flow: FlowState
+  activeModule: MenuModule
+}>()
+
+const emit = defineEmits<{
+  configure: []
+}>()
+
+const selected = ref<MenuItemValue>(props.activeModule)
+
+watch(
+  () => props.activeModule,
+  (module) => {
+    selected.value = module
+  },
+  { immediate: true },
+)
+
+const moduleLabel = computed(() => {
+  switch (props.activeModule) {
+    case 'recent-changes':
+      return 'Recent changes'
+    case 'featured':
+      return 'Featured'
+    case 'trending':
+      return 'Trending'
+    default:
+      return 'Suggested edits'
+  }
+})
+
+const menuItems: MenuGroupData[] = [
+  {
+    label: 'Modes',
+    hideLabel: true,
+    items: [
+      { value: 'all', label: 'All', icon: cdxIconCheckAll },
+      { value: 'read', label: 'Read', icon: cdxIconBook },
+      { value: 'edit', label: 'Edit', icon: cdxIconEdit },
+    ],
+  },
+  {
+    label: 'Home modules',
+    hideLabel: true,
+    items: [
+      { value: 'featured', label: 'Featured' },
+      { value: 'trending', label: 'Trending' },
+    ],
+  },
+  {
+    label: 'Edit modules',
+    hideLabel: true,
+    items: [
+      { value: 'suggested-edits', label: 'Suggested edits' },
+      { value: 'recent-changes', label: 'Recent changes' },
+    ],
+  },
+]
+
+const footer: MenuItemData = {
+  value: 'settings',
+  label: 'Settings',
+  icon: cdxIconSettings,
+}
+
+function onSelect(value: MenuItemValue | MenuItemValue[] | null): void {
+  if (value === 'settings') {
+    emit('configure')
+  } else if (value === 'recent-changes') {
+    void props.flow.goTo('all', { module: 'recent-changes' })
+  } else if (value === 'suggested-edits') {
+    void props.flow.goTo('all', { module: 'suggested-edits' })
+  } else if (value === 'featured') {
+    void props.flow.goTo('featured')
+  } else if (value === 'trending') {
+    void props.flow.goTo('trending')
+  } else if (value === 'all') {
+    void props.flow.goTo('home')
+  } else if (value === 'read') {
+    void props.flow.goTo('read')
+  }
+  selected.value = props.activeModule
+}
+</script>
+
+<template>
+  <CdxMenuButton
+    v-model:selected="selected"
+    class="suggested-edits-mode-menu"
+    weight="quiet"
+    :menu-items="menuItems"
+    :menu-config="{ renderInPlace: true }"
+    :footer="footer"
+    aria-label="Home module"
+    @update:selected="onSelect"
+  >
+    {{ moduleLabel }}
+    <CdxIcon class="suggested-edits-mode-menu__chevron" :icon="cdxIconDownTriangle" />
+  </CdxMenuButton>
+</template>
+
+<style scoped>
+.suggested-edits-mode-menu :deep(.cdx-button) {
+  gap: var(--spacing-25, 4px);
+  font-family:
+    var(--font-family-system-sans, system-ui, sans-serif), var(--font-family-base, sans-serif);
+  font-size: var(--font-size-large, 1.125rem);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-large, 1.56);
+}
+
+.suggested-edits-mode-menu__chevron :deep(.cdx-icon) {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+/* Codex adds a group divider on every group wrapper; drop the redundant top one. */
+.suggested-edits-mode-menu :deep(.cdx-menu__group-wrapper:first-child) {
+  border-top: none;
+}
+</style>
diff --git a/src/prototypes/no-distractions/components/SuggestionCard.vue b/src/prototypes/no-distractions/components/SuggestionCard.vue
new file mode 100644
index 0000000..f0b266d
--- /dev/null
+++ b/src/prototypes/no-distractions/components/SuggestionCard.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { CdxIcon } from '@wikimedia/codex'
+import { cdxIconArticle } from '@wikimedia/codex-icons'
+
+import type { TaskColor } from '../data/microtaskCatalog'
+
+interface Props {
+  taskHeading: string
+  taskColor: TaskColor
+  articleTitle: string
+  articleDescription: string
+  taskDescription: string
+  thumbnailSrc?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  thumbnailSrc: undefined,
+})
+</script>
+
+<template>
+  <article class="suggestion-card">
+    <div class="suggestion-card__body">
+      <p class="suggestion-card__task" :class="`suggestion-card__task--${taskColor}`">
+        {{ taskHeading }}
+      </p>
+      <p class="suggestion-card__headline">
+        <strong class="suggestion-card__title">{{ articleTitle }}</strong>
+        <template v-if="articleDescription">
+          <span class="suggestion-card__desc-sep"> &middot; </span>
+          <span class="suggestion-card__desc">{{ articleDescription }}</span>
+        </template>
+      </p>
+      <p class="suggestion-card__hint">{{ taskDescription }}</p>
+    </div>
+
+    <span class="suggestion-card__thumb">
+      <img v-if="thumbnailSrc" :src="thumbnailSrc" alt="" />
+      <CdxIcon v-else :icon="cdxIconArticle" />
+    </span>
+  </article>
+</template>
+
+<style scoped>
+.suggestion-card {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-75, 12px);
+  padding: 0.8125rem;
+  border: var(--border-width-base, 1px) solid var(--border-color-base, #a2a9b1);
+  border-radius: var(--border-radius-base, 2px);
+  background-color: var(--background-color-base);
+}
+
+.suggestion-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-25, 4px);
+  flex: 1;
+  min-width: 0;
+}
+
+.suggestion-card__task {
+  margin: 0;
+  font-size: var(--font-size-medium, 1rem);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-small, 1.375);
+}
+
+.suggestion-card__task--green {
+  color: var(--color-success, #177860);
+}
+
+.suggestion-card__task--amber {
+  color: var(--color-warning, #886425);
+}
+
+.suggestion-card__headline {
+  margin: 0;
+  font-size: var(--font-size-small, 0.875rem);
+  line-height: var(--line-height-small, 1.43);
+  color: var(--color-base);
+}
+
+.suggestion-card__title {
+  font-size: var(--font-size-small, 0.875rem);
+  font-weight: var(--font-weight-bold);
+}
+
+.suggestion-card__desc {
+  font-size: var(--font-size-small, 0.875rem);
+}
+
+.suggestion-card__hint {
+  margin: 0;
+  padding-top: var(--spacing-25, 4px);
+  font-size: var(--font-size-small, 0.875rem);
+  line-height: var(--line-height-small, 1.375);
+  color: var(--color-subtle, #54595d);
+}
+
+.suggestion-card__thumb {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 4rem;
+  height: 4rem;
+  border: var(--border-width-base, 1px) solid var(--border-color-subtle, #c8ccd1);
+  border-radius: var(--border-radius-base, 2px);
+  background-color: var(--background-color-interactive-subtle, #f8f9fa);
+  overflow: hidden;
+  color: var(--color-placeholder, #72777d);
+}
+
+.suggestion-card__thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+</style>
diff --git a/src/prototypes/no-distractions/components/TitleSearchResults.vue b/src/prototypes/no-distractions/components/TitleSearchResults.vue
new file mode 100644
index 0000000..0876cd7
--- /dev/null
+++ b/src/prototypes/no-distractions/components/TitleSearchResults.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { CdxIcon } from '@wikimedia/codex'
+import { cdxIconArticleSearch } from '@wikimedia/codex-icons'
+
+import type { TitleSearchResult } from '../data/titleSearch'
+
+interface Props {
+  results: TitleSearchResult[]
+  /** Flush beneath an input (`attached`) or standalone dropdown (`detached`). */
+  layout?: 'attached' | 'detached'
+}
+
+withDefaults(defineProps<Props>(), {
+  layout: 'detached',
+})
+
+defineEmits<{
+  select: [title: string]
+}>()
+</script>
+
+<template>
+  <ul
+    class="title-search-results"
+    :class="{ 'title-search-results--attached': layout === 'attached' }"
+  >
+    <li v-for="result in results" :key="result.title">
+      <button type="button" class="title-search-results__item" @click="$emit('select', result.title)">
+        <span class="title-search-results__thumb">
+          <img v-if="result.thumbnailSrc" :src="result.thumbnailSrc" alt="" />
+          <CdxIcon v-else :icon="cdxIconArticleSearch" size="small" />
+        </span>
+        <span class="title-search-results__text">
+          <span class="title-search-results__title">{{ result.title }}</span>
+          <span v-if="result.description" class="title-search-results__desc">{{
+            result.description
+          }}</span>
+        </span>
+      </button>
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+.title-search-results {
+  display: flex;
+  flex-direction: column;
+  margin: var(--spacing-25, 4px) 0 0;
+  padding: 0;
+  list-style: none;
+  border: var(--border-width-base, 1px) solid var(--border-color-subtle, #c8ccd1);
+  border-radius: var(--border-radius-base, 2px);
+  overflow: hidden;
+}
+
+.title-search-results--attached {
+  margin: 0;
+  border-top: none;
+  border-radius: 0 0 var(--border-radius-base, 2px) var(--border-radius-base, 2px);
+}
+
+.title-search-results__item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-75, 12px);
+  width: 100%;
+  margin: 0;
+  padding: var(--spacing-50, 8px) var(--spacing-100, 16px);
+  border: none;
+  background: transparent;
+  font: inherit;
+  line-height: var(--line-height-small, 1.375);
+  text-align: start;
+  cursor: pointer;
+}
+
+.title-search-results__item:hover {
+  background-color: var(--background-color-interactive-subtle, #f8f9fa);
+}
+
+.title-search-results li + li {
+  border-top: var(--border-width-base, 1px) solid var(--border-color-subtle, #c8ccd1);
+}
+
+.title-search-results__thumb {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: var(--border-width-base, 1px) solid var(--border-color-subtle, #c8ccd1);
+  border-radius: var(--border-radius-base, 2px);
+  background-color: var(--background-color-interactive-subtle, #f8f9fa);
+  overflow: hidden;
+  color: var(--color-subtle);
+}
+
+.title-search-results__thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.title-search-results__text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+}
+
+.title-search-results__title {
+  display: block;
+  font-size: var(--font-size-medium, 1rem);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-small, 1.375);
+  color: var(--color-base);
+}
+
+.title-search-results__desc {
+  display: block;
+  font-size: var(--font-size-small, 0.875rem);
+  line-height: var(--line-height-small, 1.375);
+  color: var(--color-subtle);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
diff --git a/src/prototypes/no-distractions/components/onboarding-layout.css b/src/prototypes/no-distractions/components/onboarding-layout.css
new file mode 100644
index 0000000..8b1ccf7
--- /dev/null
+++ b/src/prototypes/no-distractions/components/onboarding-layout.css
@@ -0,0 +1,87 @@
+/**
+ * Shared layout tokens for dashpage onboarding frames (Figma 1742:219xx).
+ * Imported by OnboardingShell; screens compose with these class names.
+ */
+
+.ob-page {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 100%;
+}
+
+.ob-title {
+  margin: 0;
+  padding: var(--spacing-400, 64px) var(--spacing-100, 16px) 0;
+  font-family:
+    var(--font-family-system-sans, system-ui, sans-serif), var(--font-family-base, sans-serif);
+  font-size: var(--font-size-x-large, 1.25rem);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-x-large, 1.5);
+  color: var(--color-base);
+}
+
+.ob-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  gap: var(--spacing-75, 12px);
+  min-height: 0;
+  padding: var(--spacing-100, 16px);
+}
+
+.ob-actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-75, 12px);
+  width: 100%;
+  margin-top: auto;
+  padding-top: var(--spacing-75, 12px);
+}
+
+.ob-actions .cdx-button {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 3rem;
+  padding-block: var(--spacing-100, 16px);
+  font-size: var(--font-size-medium, 1rem);
+  font-weight: var(--font-weight-bold);
+}
+
+.ob-actions .cdx-button--weight-quiet {
+  min-height: 2.75rem;
+  padding-block: var(--spacing-75, 12px);
+}
+
+/* Welcome footer “Not now” on #101418 — Codex quiet hover breaks on dark surfaces. */
+.ob-skip {
+  align-self: center;
+  min-height: 2.75rem;
+  padding: var(--spacing-75, 12px) var(--spacing-100, 16px);
+  border: none;
+  background: transparent;
+  font-family: var(--font-family-base, sans-serif);
+  font-size: var(--font-size-medium, 1rem);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-small, 1.375);
+  color: #404244;
+  cursor: pointer;
+}
+
+/* Light label on dark surfaces (welcome footer). Plain .ob-skip stays for light pages. */
+.ob-skip--inverse {
+  color: #c8ccd1;
+}
+
+.ob-skip--inverse:hover {
+  color: #eaecf0;
+  background-color: rgba(255, 255, 255, 0.08);
+}
+
+.ob-skip--inverse:active {
+  background-color: rgba(255, 255, 255, 0.12);
+}
+
+.ob-field .cdx-text-input__input {
+  min-height: 2rem;
+}
diff --git a/src/prototypes/no-distractions/data/microtaskCatalog.ts b/src/prototypes/no-distractions/data/microtaskCatalog.ts
new file mode 100644
index 0000000..5b006a1
--- /dev/null
+++ b/src/prototypes/no-distractions/data/microtaskCatalog.ts
@@ -0,0 +1,167 @@
+/**
+ * Maps the Wikimedia Growth team's newcomer task types to the suggestion-card
+ * presentation used on the home screen. Each task carries a detector that reads
+ * the same per-page signals Growth's newcomer-task search keys on, surfaced via
+ * `prop=cirrusdoc` (see `@/lib/fetchGrowthTaskSignals`): maintenance templates,
+ * dated maintenance tracking categories, structured-task `recommendation.*`
+ * weighted tags, and section headings.
+ *
+ * Task type catalogue: https://www.mediawiki.org/wiki/Help:Growth/Tools/Newcomer_Tasks
+ *
+ * Colours follow the Figma flow: sourcing/content tasks are amber, link/media/
+ * text-fix tasks are green.
+ */
+
+import type { GrowthTaskSignals } from '@/lib/fetchGrowthTaskSignals'
+
+export type TaskColor = 'green' | 'amber'
+
+export interface TaskDefinition {
+  /** GrowthExperiments task-type id. */
+  id: string
+  /** Short heading shown on the card. */
+  heading: string
+  /** One-line call to action under the article title. */
+  description: string
+  color: TaskColor
+  /** Lower wins when several tasks apply to the same article. */
+  priority: number
+  /** True when this task type applies to a page with the given signals. */
+  matches: (signals: GrowthTaskSignals) => boolean
+}
+
+/** Strip the `Template:` prefix and normalise for comparison. */
+function normalizeTemplate(name: string): string {
+  return name
+    .replace(/^template:/i, '')
+    .trim()
+    .toLowerCase()
+}
+
+function templateMatches(signals: GrowthTaskSignals, pattern: RegExp): boolean {
+  return signals.templates.some((name) => pattern.test(normalizeTemplate(name)))
+}
+
+function categoryMatches(signals: GrowthTaskSignals, pattern: RegExp): boolean {
+  return signals.categories.some((name) => pattern.test(name.toLowerCase()))
+}
+
+function weightedTagMatches(signals: GrowthTaskSignals, pattern: RegExp): boolean {
+  return signals.weightedTags.some((tag) => pattern.test(tag))
+}
+
+/**
+ * Ordered by priority (first match wins). Detection prefers precise dated
+ * maintenance categories and specific maintenance templates; never infer a need
+ * from incidental templates (e.g. citation modules are not a "needs references"
+ * signal).
+ */
+export const TASK_CATALOG: TaskDefinition[] = [
+  {
+    id: 'references',
+    heading: 'Find references',
+    description: 'Add sources to verify Wikipedia articles',
+    color: 'amber',
+    priority: 1,
+    matches: (signals) =>
+      categoryMatches(
+        signals,
+        /unsourced statements|needing additional references|articles lacking sources|all articles with unsourced/,
+      ) ||
+      templateMatches(
+        signals,
+        /^(unreferenced|more citations needed|refimprove|citation needed|unreferenced section|more citations needed section|one source)$/,
+      ),
+  },
+  {
+    id: 'copyedit',
+    heading: 'Copyedit',
+    description: 'Fix spelling, grammar, and tone.',
+    color: 'green',
+    priority: 2,
+    matches: (signals) =>
+      categoryMatches(signals, /needing copy edit|copy edit from/) ||
+      templateMatches(signals, /^(copy edit|copyedit|cleanup|cleanup rewrite|tone)$/),
+  },
+  {
+    id: 'update',
+    heading: 'Update articles',
+    description: 'Bring existing articles up-to-date',
+    color: 'amber',
+    priority: 3,
+    matches: (signals) =>
+      categoryMatches(signals, /in need of updating|potentially dated/) ||
+      templateMatches(signals, /^(update|outdated|update section)$/),
+  },
+  {
+    id: 'revise-tone',
+    heading: 'Revise tone',
+    description: 'Make articles more factual by removing promotional words',
+    color: 'green',
+    priority: 4,
+    matches: (signals) =>
+      categoryMatches(
+        signals,
+        /promotional tone|articles with peacock|articles needing style editing/,
+      ) ||
+      templateMatches(
+        signals,
+        /^(peacock|peacock term|advert|advertisement|promotional|fanpov|puffery)$/,
+      ),
+  },
+  {
+    id: 'expand',
+    heading: 'Expand short articles',
+    description: 'Make articles longer by finding and adding more information',
+    color: 'amber',
+    priority: 5,
+    matches: (signals) =>
+      categoryMatches(signals, /all stub articles|to be expanded|articles to be expanded/) ||
+      templateMatches(signals, /-stub$|^stub$|^expand|^missing information$/),
+  },
+  {
+    id: 'image-recommendation',
+    heading: 'Add an image',
+    description: 'Add an image to an unillustrated article.',
+    color: 'green',
+    priority: 6,
+    matches: (signals) => weightedTagMatches(signals, /^recommendation\.image\/exists/),
+  },
+  {
+    id: 'link-recommendation',
+    heading: 'Add links between articles',
+    description: 'Make words from one article link to another article.',
+    color: 'green',
+    priority: 7,
+    matches: (signals) => weightedTagMatches(signals, /^recommendation\.link\/exists/),
+  },
+  {
+    id: 'links',
+    heading: 'Add links between articles',
+    description: 'Make words from one article link to another article.',
+    color: 'green',
+    priority: 8,
+    matches: (signals) =>
+      categoryMatches(signals, /underlinked|dead-end pages/) ||
+      templateMatches(signals, /^(underlinked|dead end)$/),
+  },
+  {
+    id: 'section-image-recommendation',
+    heading: 'Add an image to an article section',
+    description: 'Add an image to a section of this article.',
+    color: 'green',
+    priority: 9,
+    matches: (signals) =>
+      weightedTagMatches(signals, /^recommendation\.(image_section|section_image|imagesection)/) &&
+      signals.headings.length > 0,
+  },
+]
+
+/**
+ * Pick the highest-priority task type whose detector matches the page's
+ * CirrusSearch signals, or null when none apply.
+ */
+export function resolveTaskForSignals(signals?: GrowthTaskSignals): TaskDefinition | null {
+  if (!signals) return null
+  return TASK_CATALOG.find((task) => task.matches(signals)) ?? null
+}
diff --git a/src/prototypes/no-distractions/data/titleSearch.ts b/src/prototypes/no-distractions/data/titleSearch.ts
new file mode 100644
index 0000000..30462be
--- /dev/null
+++ b/src/prototypes/no-distractions/data/titleSearch.ts
@@ -0,0 +1,48 @@
+import { wikiHostFromLang, wikimediaApiFetchHeaders } from '@/config'
+
+export interface TitleSearchResult {
+  title: string
+  description: string
+  thumbnailSrc?: string
+}
+
+interface TitleSearchOptions {
+  signal?: AbortSignal
+  lang?: string
+  limit?: number
+  clientTag?: string
+}
+
+export async function fetchTitleSearchResults(
+  query: string,
+  options: TitleSearchOptions = {},
+): Promise<TitleSearchResult[]> {
+  const trimmed = query.trim()
+  if (!trimmed.length) return []
+
+  const wikiHost = wikiHostFromLang(options.lang ?? 'en')
+  const params = new URLSearchParams({
+    q: trimmed,
+    limit: String(options.limit ?? 6),
+  })
+
+  const response = await fetch(
+    `https://${wikiHost}/w/rest.php/v1/search/title?${params.toString()}`,
+    {
+      signal: options.signal,
+      headers: wikimediaApiFetchHeaders(options.clientTag ?? 'no-distractions-title-search'),
+    },
+  )
+
+  if (!response.ok) throw new Error(`HTTP ${response.status}`)
+
+  const data = (await response.json()) as {
+    pages?: { title: string; description?: string; thumbnail?: { url?: string } | null }[]
+  }
+
+  return (data.pages ?? []).map((page) => ({
+    title: page.title,
+    description: page.description ?? '',
+    thumbnailSrc: page.thumbnail?.url ? `https:${page.thumbnail.url}` : undefined,
+  }))
+}
diff --git a/src/prototypes/no-distractions/data/useArticleHtml.ts b/src/prototypes/no-distractions/data/useArticleHtml.ts
new file mode 100644
index 0000000..786e734
--- /dev/null
+++ b/src/prototypes/no-distractions/data/useArticleHtml.ts
@@ -0,0 +1,78 @@
+import { ref, watch, type Ref } from 'vue'
+
+import { wikiHostFromLang, wikimediaApiFetchHeaders } from '@/config'
+
+/**
+ * Minimal live-article body fetch for the read screen. Mirrors `ArticleLive`'s
+ * REST call (`GET /api/rest_v1/page/html/{title}`) and parser-body extraction,
+ * but exposes the raw HTML so the screen can compose its own `ArticleHeader`
+ * (which forwards the bookmark click `ArticleLive`/`ArticleWrapper` swallow).
+ */
+
+const bodyCache = new Map<string, string>()
+
+function extractParserOutput(raw: string): string {
+  const bodyMatch = raw.match(/<body[^>]*>([\s\S]*?)<\/body>/i)
+  return bodyMatch ? bodyMatch[1] : raw
+}
+
+export interface UseArticleHtml {
+  html: Ref<string | null>
+  loading: Ref<boolean>
+  error: Ref<string | null>
+}
+
+export function useArticleHtml(title: Ref<string>, lang = 'en'): UseArticleHtml {
+  const html = ref<string | null>(null)
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  let abortController: AbortController | null = null
+
+  async function load(rawTitle: string): Promise<void> {
+    const trimmed = rawTitle.trim()
+    if (!trimmed.length) {
+      html.value = null
+      return
+    }
+
+    const host = wikiHostFromLang(lang)
+    const cacheKey = `${host}\u0000${trimmed.replace(/_/g, ' ')}`
+
+    const cached = bodyCache.get(cacheKey)
+    if (cached) {
+      html.value = cached
+      error.value = null
+      loading.value = false
+      return
+    }
+
+    abortController?.abort()
+    abortController = new AbortController()
+    loading.value = true
+    error.value = null
+    html.value = null
+
+    try {
+      const url = `https://${host}/api/rest_v1/page/html/${encodeURIComponent(trimmed)}`
+      const response = await fetch(url, {
+        signal: abortController.signal,
+        headers: { Accept: 'text/html; charset=utf-8', ...wikimediaApiFetchHeaders('page-html') },
+      })
+      if (!response.ok) throw new Error(`HTTP ${response.status} ${response.statusText}`)
+
+      const body = extractParserOutput(await response.text())
+      bodyCache.set(cacheKey, body)
+      html.value = body
+    } catch (err) {
+      if ((err as Error).name === 'AbortError') return
+      error.value = err instanceof Error ? err.message : String(err)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  watch(title, (value) => void load(value), { immediate: true })
+
+  return { html, loading, error }
+}
diff --git a/src/prototypes/no-distractions/data/useConfigureSettings.ts b/src/prototypes/no-distractions/data/useConfigureSettings.ts
new file mode 100644
index 0000000..7a792a3
--- /dev/null
+++ b/src/prototypes/no-distractions/data/useConfigureSettings.ts
@@ -0,0 +1,67 @@
+import { ref, watch, type Ref } from 'vue'
+
+const STORAGE_KEY = 'protowiki:no-distractions:configure-settings'
+
+export interface ConfigureSettings {
+  editingHistory: boolean
+}
+
+export const DEFAULT_CONFIGURE_SETTINGS: ConfigureSettings = {
+  editingHistory: true,
+}
+
+function normalizeSettings(raw: unknown): ConfigureSettings {
+  if (typeof raw !== 'object' || raw === null) {
+    return { ...DEFAULT_CONFIGURE_SETTINGS }
+  }
+
+  const record = raw as Record<string, unknown>
+  return {
+    editingHistory:
+      typeof record.editingHistory === 'boolean'
+        ? record.editingHistory
+        : DEFAULT_CONFIGURE_SETTINGS.editingHistory,
+  }
+}
+
+export function loadConfigureSettings(): ConfigureSettings {
+  if (typeof window === 'undefined') {
+    return { ...DEFAULT_CONFIGURE_SETTINGS }
+  }
+
+  try {
+    const stored = window.localStorage.getItem(STORAGE_KEY)
+    if (!stored) return { ...DEFAULT_CONFIGURE_SETTINGS }
+    return normalizeSettings(JSON.parse(stored))
+  } catch {
+    return { ...DEFAULT_CONFIGURE_SETTINGS }
+  }
+}
+
+export function saveConfigureSettings(settings: ConfigureSettings): void {
+  if (typeof window === 'undefined') return
+
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(normalizeSettings(settings)))
+  } catch {
+    // Quota or private-mode failures — ignore.
+  }
+}
+
+let sharedConfigureSettings: Ref<ConfigureSettings> | null = null
+
+export function useConfigureSettings(): Ref<ConfigureSettings> {
+  if (!sharedConfigureSettings) {
+    sharedConfigureSettings = ref(loadConfigureSettings())
+
+    watch(
+      sharedConfigureSettings,
+      (value) => {
+        saveConfigureSettings(value)
+      },
+      { deep: true },
+    )
+  }
+
+  return sharedConfigureSettings
+}
diff --git a/src/prototypes/no-distractions/data/useFeaturedFeed.ts b/src/prototypes/no-distractions/data/useFeaturedFeed.ts
new file mode 100644
index 0000000..a494322
--- /dev/null
+++ b/src/prototypes/no-distractions/data/useFeaturedFeed.ts
@@ -0,0 +1,317 @@
+import { computed, ref, watch, type ComputedRef, type Ref } from 'vue'
+
+import {
+  featuredFeedCacheKey,
+  fetchFeaturedFeed,
+  fetchOnThisDayBirths,
+  fetchPageSummary,
+  FetchFeaturedFeedError,
+  primaryDykPageTitle,
+  type FeaturedFeedOnThisDayItem,
+  type FeaturedFeedPage,
+  type FeaturedFeedResponse,
+  type PageSummaryResponse,
+} from '@/lib/fetchFeaturedFeed'
+
+export type FeaturedSectionId = 'tfa' | 'dyk' | 'otd'
+
+export interface FeaturedFeedItem {
+  /** Display title; may be empty for DYK hooks. */
+  title: string
+  body: string
+  /** Underscore wiki title for navigation, when tappable. */
+  articleTitle?: string
+  thumbnailSrc?: string
+  description?: string
+}
+
+export interface FeaturedSection {
+  id: FeaturedSectionId
+  label: string
+  items: FeaturedFeedItem[]
+}
+
+export interface FeaturedFeedState {
+  sections: ComputedRef<FeaturedSection[]>
+  loading: Ref<boolean>
+  error: Ref<string | null>
+}
+
+const SECTION_LABELS: Record<FeaturedSectionId, string> = {
+  tfa: '',
+  dyk: 'Did you know',
+  otd: 'Born on this day',
+}
+
+const LANG = 'en'
+const DYK_LIMIT = 3
+const BIRTHS_LIMIT = 3
+const STORAGE_KEY = 'protowiki:no-distractions:featured-feed:v6'
+
+interface StoredFeaturedCache {
+  cacheKey: string
+  sections: FeaturedSection[]
+  error: string | null
+}
+
+function displayTitle(raw: string): string {
+  return raw.replace(/_/g, ' ').trim()
+}
+
+function sanitizeCachedSections(sections: FeaturedSection[]): FeaturedSection[] {
+  return sections.map((section) =>
+    section.id === 'tfa' ? { ...section, label: '' } : section,
+  )
+}
+
+function readFeaturedCache(cacheKey: string): StoredFeaturedCache | null {
+  if (typeof localStorage === 'undefined' || !cacheKey.length) return null
+
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY)
+    if (!raw) return null
+    const parsed = JSON.parse(raw) as StoredFeaturedCache
+    if (parsed.cacheKey !== cacheKey || !Array.isArray(parsed.sections)) return null
+    return { ...parsed, sections: sanitizeCachedSections(parsed.sections) }
+  } catch {
+    return null
+  }
+}
+
+function writeFeaturedCache(
+  cacheKey: string,
+  cachedSections: FeaturedSection[],
+  cachedError: string | null,
+): void {
+  if (typeof localStorage === 'undefined' || !cacheKey.length) return
+
+  try {
+    const payload: StoredFeaturedCache = { cacheKey, sections: cachedSections, error: cachedError }
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(payload))
+  } catch {
+    // Quota or privacy mode — ignore.
+  }
+}
+
+function pageThumbnailSrc(page?: FeaturedFeedPage): string | undefined {
+  return page?.thumbnail?.source
+}
+
+function mapBirthItem(item: FeaturedFeedOnThisDayItem): FeaturedFeedItem {
+  const primaryPage = item.pages?.[0]
+  const articleTitle = primaryPage?.title
+  const personName = articleTitle ? displayTitle(articleTitle) : ''
+  const body = item.year
+    ? `Born ${item.year}: ${item.text.trim()}`
+    : item.text.trim()
+
+  return {
+    title: personName,
+    body,
+    articleTitle,
+    thumbnailSrc: pageThumbnailSrc(primaryPage),
+    description: primaryPage?.description,
+  }
+}
+
+function buildSections(
+  feed: FeaturedFeedResponse,
+  summariesByTitle: Map<string, PageSummaryResponse>,
+  births: FeaturedFeedOnThisDayItem[],
+): FeaturedSection[] {
+  const sections: FeaturedSection[] = []
+
+  if (feed.tfa?.title) {
+    const tfaSummary = summariesByTitle.get(feed.tfa.title)
+    sections.push({
+      id: 'tfa',
+      label: SECTION_LABELS.tfa,
+      items: [
+        {
+          title: displayTitle(feed.tfa.title),
+          body: feed.tfa.extract?.trim() || '',
+          articleTitle: feed.tfa.title,
+          thumbnailSrc: tfaSummary?.thumbnail?.source ?? feed.tfa.thumbnail?.source,
+          description: tfaSummary?.description ?? feed.tfa.description,
+        },
+      ],
+    })
+  }
+
+  const dykItems = (feed.dyk ?? [])
+    .filter((item) => item.text?.trim())
+    .slice(0, DYK_LIMIT)
+    .map((item) => {
+      const articleTitle = primaryDykPageTitle(item)
+      const summary = articleTitle ? summariesByTitle.get(articleTitle) : undefined
+      return {
+        title: '',
+        body: item.text.trim(),
+        articleTitle,
+        thumbnailSrc: summary?.thumbnail?.source,
+      }
+    })
+
+  if (dykItems.length) {
+    sections.push({
+      id: 'dyk',
+      label: SECTION_LABELS.dyk,
+      items: dykItems,
+    })
+  }
+
+  const birthItems = births
+    .filter((item) => item.text?.trim())
+    .slice(0, BIRTHS_LIMIT)
+    .map((item) => mapBirthItem(item))
+
+  if (birthItems.length) {
+    sections.push({
+      id: 'otd',
+      label: SECTION_LABELS.otd,
+      items: birthItems,
+    })
+  }
+
+  return sections
+}
+
+async function fetchSummariesForTitles(
+  titles: string[],
+  signal: AbortSignal,
+): Promise<Map<string, PageSummaryResponse>> {
+  const unique = [...new Set(titles.map((title) => title.trim()).filter(Boolean))]
+  const summaries = await Promise.all(
+    unique.map(async (title) => {
+      try {
+        const summary = await fetchPageSummary(title, { lang: LANG, signal })
+        return [title, summary] as const
+      } catch {
+        return [title, {}] as const
+      }
+    }),
+  )
+
+  return new Map(summaries)
+}
+
+let shared: FeaturedFeedState | null = null
+let bindInit: (() => void) | null = null
+
+function createState(): FeaturedFeedState {
+  const sections = ref<FeaturedSection[]>([])
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  let loadedCacheKey = ''
+  let abortController: AbortController | null = null
+
+  function currentCacheKey(): string {
+    return featuredFeedCacheKey(LANG, new Date())
+  }
+
+  function hydrateFromStorage(cacheKey: string): boolean {
+    const stored = readFeaturedCache(cacheKey)
+    if (!stored) return false
+
+    sections.value = stored.sections
+    error.value = stored.error
+    loadedCacheKey = cacheKey
+    loading.value = false
+    return true
+  }
+
+  async function runFetch(fetchCacheKey: string): Promise<void> {
+    abortController?.abort()
+    abortController = new AbortController()
+    const signal = abortController.signal
+
+    loading.value = true
+    error.value = null
+
+    try {
+      const [feed, births] = await Promise.all([
+        fetchFeaturedFeed({ lang: LANG, signal }),
+        fetchOnThisDayBirths({ lang: LANG, signal }),
+      ])
+      if (signal.aborted) return
+      if (fetchCacheKey !== currentCacheKey()) return
+
+      const dykTitles = (feed.dyk ?? [])
+        .filter((item) => item.text?.trim())
+        .slice(0, DYK_LIMIT)
+        .flatMap((item) => {
+          const title = primaryDykPageTitle(item)
+          return title ? [title] : []
+        })
+
+      const summaryTitles = [
+        ...new Set([
+          ...(feed.tfa?.title ? [feed.tfa.title] : []),
+          ...dykTitles,
+        ]),
+      ]
+      const summariesByTitle = summaryTitles.length
+        ? await fetchSummariesForTitles(summaryTitles, signal)
+        : new Map<string, PageSummaryResponse>()
+
+      if (signal.aborted) return
+      if (fetchCacheKey !== currentCacheKey()) return
+
+      const built = buildSections(feed, summariesByTitle, births)
+      sections.value = built
+      error.value = null
+      loadedCacheKey = fetchCacheKey
+      writeFeaturedCache(fetchCacheKey, built, null)
+    } catch (fetchError) {
+      if (fetchError instanceof FetchFeaturedFeedError && fetchError.code === 'aborted') return
+      if ((fetchError as Error).name === 'AbortError') return
+      if (fetchCacheKey !== currentCacheKey()) return
+
+      error.value =
+        fetchError instanceof Error ? fetchError.message : 'Could not load featured content.'
+      sections.value = []
+      loadedCacheKey = fetchCacheKey
+      writeFeaturedCache(fetchCacheKey, [], error.value)
+    } finally {
+      if (!signal.aborted && fetchCacheKey === currentCacheKey()) {
+        loading.value = false
+      }
+    }
+  }
+
+  function scheduleFetch(): void {
+    const cacheKey = currentCacheKey()
+    if (cacheKey === loadedCacheKey) return
+    if (cacheKey.length && hydrateFromStorage(cacheKey)) return
+
+    sections.value = []
+    error.value = null
+    loading.value = true
+    void runFetch(cacheKey)
+  }
+
+  watch(
+    () => currentCacheKey(),
+    () => scheduleFetch(),
+    { immediate: true },
+  )
+
+  bindInit = scheduleFetch
+
+  return {
+    sections: computed(() => sections.value),
+    loading,
+    error,
+  }
+}
+
+/**
+ * Today's English Wikipedia curated feed (TFA, DYK, born on this day).
+ * Shared singleton; call once from the route shell to bind the fetch lifecycle.
+ */
+export function useFeaturedFeed(init = false): FeaturedFeedState {
+  if (!shared) shared = createState()
+  if (init) bindInit?.()
+  return shared
+}
diff --git a/src/prototypes/no-distractions/data/useFlowState.ts b/src/prototypes/no-distractions/data/useFlowState.ts
new file mode 100644
index 0000000..33b48bb
--- /dev/null
+++ b/src/prototypes/no-distractions/data/useFlowState.ts
@@ -0,0 +1,202 @@
+import { computed, type ComputedRef, type WritableComputedRef } from 'vue'
+import { useRoute, useRouter, type LocationQuery, type LocationQueryRaw } from 'vue-router'
+
+/**
+ * URL-query state for the no-distractions onboarding flow.
+ *
+ * The route's query string is the single source of truth: every screen reads
+ * from and writes to it, so each step is deep-linkable, shareable, and gets
+ * browser back/forward for free. Screen transitions push a new history entry;
+ * in-place field edits (survey choice, interests) replace the current entry so
+ * they don't flood history. Ephemeral text buffers (typing a title, a username)
+ * live locally in their screens and are committed to the URL on the action.
+ */
+
+export const SCREENS = [
+  'picker',
+  'read',
+  'account',
+  'welcome',
+  'survey',
+  'interests',
+  'email',
+  'home',
+  'all',
+  'featured',
+  'trending',
+] as const
+
+export type Screen = (typeof SCREENS)[number]
+
+export type SurveyChoice = 'read' | 'edit' | 'both'
+
+export const MODULES = ['suggested-edits', 'recent-changes'] as const
+
+export type Module = (typeof MODULES)[number]
+
+const SURVEY_CHOICES: SurveyChoice[] = ['read', 'edit', 'both']
+
+const DEFAULT_MODULE: Module = 'suggested-edits'
+
+const DEFAULT_SCREEN: Screen = 'picker'
+
+function firstString(value: LocationQuery[string]): string {
+  if (Array.isArray(value)) return value[0] ?? ''
+  return typeof value === 'string' ? value : ''
+}
+
+function isScreen(value: string): value is Screen {
+  return (SCREENS as readonly string[]).includes(value)
+}
+
+function isModule(value: string): value is Module {
+  return (MODULES as readonly string[]).includes(value as Module)
+}
+
+export interface FlowPatch {
+  title?: string
+  username?: string
+  survey?: SurveyChoice | ''
+  interests?: string[]
+  email?: string
+  /** Screen to return to after configuring interests (cleared on exit). */
+  returnTo?: Screen | ''
+  /** Active home-module view on the all-suggestions screen. */
+  module?: Module | ''
+}
+
+export interface FlowState {
+  /** Active screen (defaults to `picker`). */
+  screen: ComputedRef<Screen>
+  /** Seed article the reader picked at the start. */
+  title: ComputedRef<string>
+  /** Username captured on the create-account screen. */
+  username: ComputedRef<string>
+  /** Survey answer; writable so the radio binds with `v-model` (replace nav). */
+  survey: WritableComputedRef<SurveyChoice | ''>
+  /** Interest titles; defaults to `[title]` when the param is absent. */
+  interests: WritableComputedRef<string[]>
+  /** Whether `interests` was set explicitly in the URL (vs seeded from `title`). */
+  hasExplicitInterests: ComputedRef<boolean>
+  /** When set, interests is in configure mode and should return here on Done. */
+  returnTo: ComputedRef<Screen | ''>
+  /** Email captured on the email screen. */
+  email: ComputedRef<string>
+  /** Home module on the all-suggestions screen (defaults to suggested-edits). */
+  module: ComputedRef<Module>
+  /** Merge `patch` into the query without changing the screen (history replace). */
+  patch: (patch: FlowPatch) => void
+  /** Navigate to `screen`, optionally merging `patch` (history push). */
+  goTo: (screen: Screen, patch?: FlowPatch) => Promise<void>
+}
+
+function serializePatch(patch: FlowPatch): Record<string, string | undefined> {
+  const out: Record<string, string | undefined> = {}
+  if ('title' in patch) out.title = patch.title?.trim() || undefined
+  if ('username' in patch) out.username = patch.username?.trim() || undefined
+  if ('survey' in patch) out.survey = patch.survey || undefined
+  if ('email' in patch) out.email = patch.email?.trim() || undefined
+  if ('interests' in patch) {
+    const joined = (patch.interests ?? []).map((item) => item.trim()).filter(Boolean).join(',')
+    out.interests = joined.length ? joined : undefined
+  }
+  if ('returnTo' in patch) {
+    const target = patch.returnTo
+    out.returnTo = target && isScreen(target) ? target : undefined
+  }
+  if ('module' in patch) {
+    const target = patch.module
+    out.module =
+      target && isModule(target) && target !== DEFAULT_MODULE ? target : undefined
+  }
+  return out
+}
+
+function mergeQuery(current: LocationQuery, updates: Record<string, string | undefined>): LocationQueryRaw {
+  const next: LocationQueryRaw = { ...current }
+  for (const [key, value] of Object.entries(updates)) {
+    if (value === undefined) {
+      delete next[key]
+    } else {
+      next[key] = value
+    }
+  }
+  return next
+}
+
+export function useFlowState(): FlowState {
+  const route = useRoute()
+  const router = useRouter()
+
+  const screen = computed<Screen>(() => {
+    const raw = firstString(route.query.screen)
+    return isScreen(raw) ? raw : DEFAULT_SCREEN
+  })
+
+  const title = computed(() => firstString(route.query.title).trim())
+  const username = computed(() => firstString(route.query.username).trim())
+  const email = computed(() => firstString(route.query.email).trim())
+
+  function patch(next: FlowPatch): void {
+    void router.replace({ query: mergeQuery(route.query, serializePatch(next)) })
+  }
+
+  function goTo(target: Screen, next?: FlowPatch): Promise<void> {
+    const updates = next ? serializePatch(next) : {}
+    updates.screen = target === DEFAULT_SCREEN ? undefined : target
+    return router.push({ query: mergeQuery(route.query, updates) }).then(() => undefined)
+  }
+
+  const survey = computed<SurveyChoice | ''>({
+    get() {
+      const raw = firstString(route.query.survey)
+      return (SURVEY_CHOICES as string[]).includes(raw) ? (raw as SurveyChoice) : ''
+    },
+    set(value) {
+      patch({ survey: value })
+    },
+  })
+
+  const interests = computed<string[]>({
+    get() {
+      const raw = route.query.interests
+      if (raw === undefined) {
+        // No explicit param: seed from the article the reader picked.
+        return title.value ? [title.value] : []
+      }
+      return firstString(raw)
+        .split(',')
+        .map((item) => item.trim())
+        .filter(Boolean)
+    },
+    set(value) {
+      patch({ interests: value })
+    },
+  })
+
+  const hasExplicitInterests = computed(() => route.query.interests !== undefined)
+
+  const returnTo = computed<Screen | ''>(() => {
+    const raw = firstString(route.query.returnTo)
+    return isScreen(raw) ? raw : ''
+  })
+
+  const module = computed<Module>(() => {
+    const raw = firstString(route.query.module)
+    return isModule(raw) ? raw : DEFAULT_MODULE
+  })
+
+  return {
+    screen,
+    title,
+    username,
+    survey,
+    interests,
+    hasExplicitInterests,
+    returnTo,
+    email,
+    module,
+    patch,
+    goTo,
+  }
+}
diff --git a/src/prototypes/no-distractions/data/useRecentChanges.ts b/src/prototypes/no-distractions/data/useRecentChanges.ts
new file mode 100644
index 0000000..06b9033
--- /dev/null
+++ b/src/prototypes/no-distractions/data/useRecentChanges.ts
@@ -0,0 +1,248 @@
+import { computed, ref, watch, type ComputedRef, type Ref } from 'vue'
+
+import { normalizeWikiUsername } from '@/config'
+import {
+  fetchEnrichedLatestRevisions,
+  FetchRecentChangesError,
+  resolveRecentChangePageTitles,
+} from '@/lib/fetchRecentChanges'
+import { formatEditSummaryForDisplay } from '@/lib/formatEditSummary'
+import { normalizeTitleKey } from '@/lib/fetchMorelike'
+import { formatRelativeTime, parseMediaWikiTimestamp } from '@/lib/mediaWikiTime'
+
+export interface RecentChange {
+  title: string
+  description: string
+  thumbnailSrc?: string
+  editor: string
+  relativeTime: string
+  editSummary: string
+}
+
+export interface RecentChangesState {
+  changes: Ref<RecentChange[]>
+  loading: Ref<boolean>
+  error: Ref<string | null>
+  count: ComputedRef<number>
+}
+
+export interface RecentChangesSeedState {
+  interests: string[]
+  isRealUser: boolean
+  realUsername: string
+  lang: string
+  cacheKey: string
+}
+
+const STORAGE_KEY = 'protowiki:no-distractions:recent-changes:v3'
+
+interface StoredRecentChangesCache {
+  cacheKey: string
+  changes: RecentChange[]
+  error: string | null
+}
+
+function seedsKey(seeds: string[]): string {
+  return seeds
+    .map((seed) => seed.trim())
+    .filter(Boolean)
+    .map(normalizeTitleKey)
+    .sort()
+    .join('\u0000')
+}
+
+export function resolveRecentChangesCacheKey(
+  interests: string[],
+  isRealUser: boolean,
+  realUsername: string,
+): string {
+  const seedKey = seedsKey(interests)
+  if (!seedKey.length && !isRealUser) return ''
+
+  const userKey = isRealUser && realUsername.trim()
+    ? normalizeWikiUsername(realUsername).toLowerCase()
+    : 'off'
+
+  return `interests:${seedKey}|user:${userKey}|real:${isRealUser ? '1' : '0'}`
+}
+
+function readCache(cacheKey: string): StoredRecentChangesCache | null {
+  if (typeof localStorage === 'undefined' || !cacheKey.length) return null
+
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY)
+    if (!raw) return null
+    const parsed = JSON.parse(raw) as StoredRecentChangesCache
+    if (parsed.cacheKey !== cacheKey || !Array.isArray(parsed.changes)) return null
+    return parsed
+  } catch {
+    return null
+  }
+}
+
+function writeCache(
+  cacheKey: string,
+  changes: RecentChange[],
+  cachedError: string | null,
+): void {
+  if (typeof localStorage === 'undefined' || !cacheKey.length) return
+
+  try {
+    localStorage.setItem(
+      STORAGE_KEY,
+      JSON.stringify({ cacheKey, changes, error: cachedError }),
+    )
+  } catch {
+    // Ignore quota / private-mode failures.
+  }
+}
+
+function clearCache(): void {
+  if (typeof localStorage === 'undefined') return
+  try {
+    localStorage.removeItem(STORAGE_KEY)
+  } catch {
+    // Ignore.
+  }
+}
+
+let shared: RecentChangesState | null = null
+let bindSeeds: ((getter: () => RecentChangesSeedState) => void) | null = null
+
+function createState(): RecentChangesState {
+  const changes = ref<RecentChange[]>([])
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+  const count = computed(() => changes.value.length)
+
+  const seedStateGetterRef = ref<() => RecentChangesSeedState>(() => ({
+    interests: [],
+    isRealUser: false,
+    realUsername: '',
+    lang: 'en',
+    cacheKey: '',
+  }))
+  let loadedCacheKey = ''
+  let abortController: AbortController | null = null
+  let debounceTimer: ReturnType<typeof setTimeout> | null = null
+
+  function hydrateFromStorage(cacheKey: string): boolean {
+    const stored = readCache(cacheKey)
+    if (!stored) return false
+
+    changes.value = stored.changes
+    error.value = stored.error
+    loadedCacheKey = cacheKey
+    loading.value = false
+    return true
+  }
+
+  async function runFetch(fetchCacheKey: string): Promise<void> {
+    abortController?.abort()
+
+    const { interests, isRealUser, realUsername, lang } = seedStateGetterRef.value()
+
+    abortController = new AbortController()
+    const signal = abortController.signal
+    loading.value = true
+    error.value = null
+
+    try {
+      const titles = await resolveRecentChangePageTitles(interests, {
+        isRealUser,
+        realUsername,
+        lang,
+        signal,
+      })
+
+      if (signal.aborted) return
+      if (fetchCacheKey !== seedStateGetterRef.value().cacheKey) return
+
+      if (!titles.length) {
+        changes.value = []
+        loadedCacheKey = fetchCacheKey
+        clearCache()
+        return
+      }
+
+      const enriched = await fetchEnrichedLatestRevisions(titles, { lang, signal })
+      if (signal.aborted) return
+      if (fetchCacheKey !== seedStateGetterRef.value().cacheKey) return
+
+      const sorted = [...enriched].sort(
+        (a, b) =>
+          parseMediaWikiTimestamp(b.timestamp).getTime() -
+          parseMediaWikiTimestamp(a.timestamp).getTime(),
+      )
+
+      const mapped = sorted.map((item) => ({
+        title: item.title,
+        description: item.description,
+        thumbnailSrc: item.thumbnailSrc,
+        editor: item.editor,
+        relativeTime: formatRelativeTime(item.timestamp),
+        editSummary: formatEditSummaryForDisplay(item.comment),
+      }))
+
+      changes.value = mapped
+      loadedCacheKey = fetchCacheKey
+      writeCache(fetchCacheKey, mapped, null)
+    } catch (fetchError) {
+      if (fetchError instanceof FetchRecentChangesError && fetchError.code === 'aborted') {
+        return
+      }
+      if ((fetchError as Error).name === 'AbortError') return
+      if (fetchCacheKey !== seedStateGetterRef.value().cacheKey) return
+      error.value =
+        fetchError instanceof Error ? fetchError.message : 'Could not load recent changes.'
+      changes.value = []
+      loadedCacheKey = fetchCacheKey
+    } finally {
+      if (!signal.aborted && fetchCacheKey === seedStateGetterRef.value().cacheKey) {
+        loading.value = false
+      }
+    }
+  }
+
+  function scheduleFetch(cacheKey: string): void {
+    if (cacheKey === loadedCacheKey) return
+    if (cacheKey.length && hydrateFromStorage(cacheKey)) return
+
+    if (debounceTimer) clearTimeout(debounceTimer)
+    changes.value = []
+    error.value = null
+    loading.value = cacheKey.length > 0
+
+    debounceTimer = setTimeout(() => {
+      const { cacheKey: currentKey } = seedStateGetterRef.value()
+      if (currentKey !== cacheKey) return
+      void runFetch(currentKey)
+    }, 400)
+  }
+
+  watch(
+    () => seedStateGetterRef.value().cacheKey,
+    (cacheKey) => scheduleFetch(cacheKey),
+  )
+
+  bindSeeds = (getter: () => RecentChangesSeedState) => {
+    seedStateGetterRef.value = getter
+    const { cacheKey } = getter()
+    if (cacheKey === loadedCacheKey) {
+      loading.value = false
+      return
+    }
+    if (cacheKey.length && hydrateFromStorage(cacheKey)) return
+    scheduleFetch(cacheKey)
+  }
+
+  return { changes, loading, error, count }
+}
+
+export function useRecentChanges(
+  seedState?: () => RecentChangesSeedState,
+): RecentChangesState {
+  if (!shared) shared = createState()
+  if (seedState) bindSeeds?.(seedState)
+  return shared
+}
diff --git a/src/prototypes/no-distractions/data/useSuggestions.ts b/src/prototypes/no-distractions/data/useSuggestions.ts
new file mode 100644
index 0000000..a607f79
--- /dev/null
+++ b/src/prototypes/no-distractions/data/useSuggestions.ts
@@ -0,0 +1,369 @@
+import { computed, ref, watch, type ComputedRef, type Ref } from 'vue'
+
+import {
+  fetchMorelikeResultsBatched,
+  fetchPagesMetadata,
+  MorelikeFetchError,
+  normalizeTitleKey,
+  type MorelikeSearchHit,
+} from '@/lib/fetchMorelike'
+import { fetchGrowthTaskSignals } from '@/lib/fetchGrowthTaskSignals'
+import {
+  fetchUserEditedPageTitles,
+  FetchUserEditedPageTitlesError,
+} from '@/lib/fetchUserEditedPageTitles'
+import { DEFAULT_MLT_CUSTOM } from '@/lib/morelikeMlt'
+
+import { resolveTaskForSignals, type TaskColor } from './microtaskCatalog'
+
+export interface Suggestion {
+  title: string
+  description: string
+  thumbnailSrc?: string
+  taskHeading: string
+  taskDescription: string
+  taskColor: TaskColor
+}
+
+export interface SuggestionsState {
+  suggestions: Ref<Suggestion[]>
+  loading: Ref<boolean>
+  error: Ref<string | null>
+  count: ComputedRef<number>
+}
+
+export interface SuggestionSeedState {
+  seeds: string[]
+  /** Stable identity for cache hits — refetch only when this changes. */
+  cacheKey: string
+  useEditingHistory?: boolean
+  realUsername?: string
+  lang?: string
+}
+
+const RESULT_LIMIT = 20
+const LANG = 'en'
+const HISTORY_SEED_LIMIT = 5
+const STORAGE_KEY = 'protowiki:no-distractions:suggestions'
+
+interface StoredSuggestionsCache {
+  cacheKey: string
+  suggestions: Suggestion[]
+  error: string | null
+}
+
+function readSuggestionsCache(cacheKey: string): StoredSuggestionsCache | null {
+  if (typeof localStorage === 'undefined' || !cacheKey.length) return null
+
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY)
+    if (!raw) return null
+    const parsed = JSON.parse(raw) as StoredSuggestionsCache
+    if (parsed.cacheKey !== cacheKey || !Array.isArray(parsed.suggestions)) return null
+    return parsed
+  } catch {
+    return null
+  }
+}
+
+function writeSuggestionsCache(
+  cacheKey: string,
+  cachedSuggestions: Suggestion[],
+  cachedError: string | null,
+): void {
+  if (typeof localStorage === 'undefined' || !cacheKey.length) return
+
+  try {
+    const payload: StoredSuggestionsCache = {
+      cacheKey,
+      suggestions: cachedSuggestions,
+      error: cachedError,
+    }
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(payload))
+  } catch {
+    // Quota or privacy mode — ignore; in-memory cache still works this session.
+  }
+}
+
+function clearSuggestionsCache(): void {
+  if (typeof localStorage === 'undefined') return
+  try {
+    localStorage.removeItem(STORAGE_KEY)
+  } catch {
+    // Ignore.
+  }
+}
+
+let shared: SuggestionsState | null = null
+let bindSeeds: ((getter: () => SuggestionSeedState) => void) | null = null
+
+/** Stable key for comparing interest seed sets (order-insensitive). */
+function seedsKey(seeds: string[]): string {
+  return seeds
+    .map((seed) => seed.trim())
+    .filter(Boolean)
+    .map(normalizeTitleKey)
+    .sort()
+    .join('\u0000')
+}
+
+/** Dedupe seeds for fetch while preserving picker order. */
+function orderedSeeds(seeds: string[]): string[] {
+  const seen = new Set<string>()
+  const out: string[] = []
+  for (const raw of seeds) {
+    const title = raw.trim()
+    if (!title.length) continue
+    const key = normalizeTitleKey(title)
+    if (seen.has(key)) continue
+    seen.add(key)
+    out.push(title)
+  }
+  return out
+}
+
+/**
+ * Cache identity for suggestion fetches. When interests come from the URL param,
+ * only the interest set matters. When they are implicit (seeded from the picked
+ * article), include the title so a title change invalidates the cache.
+ */
+export function resolveSuggestionSeedState(
+  interests: string[],
+  title: string,
+  hasExplicitInterests: boolean,
+): SuggestionSeedState {
+  const seeds = interests
+  const seedKey = seedsKey(seeds)
+  if (!seedKey.length) {
+    return { seeds: [], cacheKey: '' }
+  }
+  const cacheKey = hasExplicitInterests
+    ? `interests:${seedKey}`
+    : `title:${normalizeTitleKey(title)}:${seedKey}`
+  return { seeds, cacheKey }
+}
+
+function createState(): SuggestionsState {
+  const suggestions = ref<Suggestion[]>([])
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+  const count = computed(() => suggestions.value.length)
+
+  const seedStateGetterRef = ref<() => SuggestionSeedState>(() => ({
+    seeds: [],
+    cacheKey: '',
+    useEditingHistory: false,
+    realUsername: '',
+    lang: LANG,
+  }))
+  let loadedCacheKey = ''
+  let abortController: AbortController | null = null
+  let debounceTimer: ReturnType<typeof setTimeout> | null = null
+
+  function hydrateFromStorage(cacheKey: string): boolean {
+    const stored = readSuggestionsCache(cacheKey)
+    if (!stored) return false
+
+    suggestions.value = stored.suggestions
+    error.value = stored.error
+    loadedCacheKey = cacheKey
+    loading.value = false
+    return true
+  }
+
+  async function assignTasks(
+    hits: MorelikeSearchHit[],
+    lang: string,
+    signal: AbortSignal,
+  ): Promise<Suggestion[]> {
+    const signalsByTitle = await fetchGrowthTaskSignals(
+      hits.map((hit) => hit.title),
+      { lang, signal },
+    )
+
+    return hits.flatMap((hit) => {
+      const task = resolveTaskForSignals(signalsByTitle.get(normalizeTitleKey(hit.title)))
+      if (!task) return []
+
+      return [
+        {
+          title: hit.title,
+          description: hit.description || 'No description available.',
+          thumbnailSrc: hit.thumbnail?.url,
+          taskHeading: task.heading,
+          taskDescription: task.description,
+          taskColor: task.color,
+        },
+      ]
+    })
+  }
+
+  async function resolveSeeds(signal: AbortSignal): Promise<string[] | null> {
+    const { seeds, useEditingHistory, realUsername, lang } = seedStateGetterRef.value()
+    const wikiLang = lang?.trim() || LANG
+
+    if (useEditingHistory && !realUsername?.trim()) {
+      return null
+    }
+
+    let merged = orderedSeeds(seeds)
+
+    if (useEditingHistory && realUsername?.trim()) {
+      try {
+        const historyPages = await fetchUserEditedPageTitles(realUsername, {
+          limit: HISTORY_SEED_LIMIT,
+          lang: wikiLang,
+          signal,
+        })
+        merged = orderedSeeds([...merged, ...historyPages])
+      } catch (fetchError) {
+        if (fetchError instanceof FetchUserEditedPageTitlesError) {
+          if (fetchError.code === 'aborted') throw fetchError
+          if (fetchError.code === 'missing_username') return null
+          if (fetchError.code === 'no_edits') return merged.length ? merged : []
+        } else if ((fetchError as Error).name === 'AbortError') {
+          throw fetchError
+        } else {
+          throw fetchError
+        }
+      }
+    }
+
+    return merged
+  }
+
+  async function runFetch(fetchCacheKey: string): Promise<void> {
+    abortController?.abort()
+
+    const { useEditingHistory, realUsername } = seedStateGetterRef.value()
+
+    if (useEditingHistory && !realUsername?.trim()) {
+      suggestions.value = []
+      error.value = 'Set a username in prototype settings.'
+      loadedCacheKey = fetchCacheKey
+      loading.value = false
+      writeSuggestionsCache(fetchCacheKey, [], error.value)
+      return
+    }
+
+    abortController = new AbortController()
+    const signal = abortController.signal
+    loading.value = true
+    error.value = null
+
+    try {
+      const ordered = await resolveSeeds(signal)
+      if (signal.aborted) return
+      if (fetchCacheKey !== seedStateGetterRef.value().cacheKey) return
+
+      if (!ordered?.length) {
+        suggestions.value = []
+        error.value = null
+        loadedCacheKey = fetchCacheKey
+        clearSuggestionsCache()
+        return
+      }
+
+      const wikiLang = seedStateGetterRef.value().lang?.trim() || LANG
+
+      // Show the interest pages themselves (first), then interleaved morelike hits.
+      const relatedLimit = Math.max(1, RESULT_LIMIT - ordered.length)
+      const [seedHits, relatedHits] = await Promise.all([
+        fetchPagesMetadata(ordered, { lang: wikiLang, signal }).catch(() => [] as MorelikeSearchHit[]),
+        fetchMorelikeResultsBatched(ordered, {
+          limit: relatedLimit,
+          mltPreset: 'default',
+          mltCustom: DEFAULT_MLT_CUSTOM,
+          lang: wikiLang,
+          signal,
+          maxCalls: 3,
+        }),
+      ])
+
+      const merged: MorelikeSearchHit[] = []
+      const seen = new Set<string>()
+      for (const hit of [...seedHits, ...relatedHits]) {
+        const key = normalizeTitleKey(hit.title)
+        if (seen.has(key)) continue
+        seen.add(key)
+        merged.push(hit)
+        if (merged.length >= RESULT_LIMIT) break
+      }
+
+      const assigned = await assignTasks(merged, wikiLang, signal)
+      if (signal.aborted) return
+      // Drop stale responses when interests/title changed mid-flight.
+      if (fetchCacheKey !== seedStateGetterRef.value().cacheKey) return
+      suggestions.value = assigned
+      loadedCacheKey = fetchCacheKey
+      writeSuggestionsCache(fetchCacheKey, assigned, null)
+    } catch (fetchError) {
+      if (fetchError instanceof MorelikeFetchError && fetchError.code === 'aborted') return
+      if (fetchError instanceof FetchUserEditedPageTitlesError && fetchError.code === 'aborted') {
+        return
+      }
+      if ((fetchError as Error).name === 'AbortError') return
+      if (fetchCacheKey !== seedStateGetterRef.value().cacheKey) return
+      error.value =
+        fetchError instanceof Error ? fetchError.message : 'Could not load suggestions.'
+      suggestions.value = []
+      loadedCacheKey = fetchCacheKey
+    } finally {
+      if (!signal.aborted && fetchCacheKey === seedStateGetterRef.value().cacheKey) {
+        loading.value = false
+      }
+    }
+  }
+
+  function scheduleFetch(cacheKey: string): void {
+    if (cacheKey === loadedCacheKey) return
+    if (cacheKey.length && hydrateFromStorage(cacheKey)) return
+
+    if (debounceTimer) clearTimeout(debounceTimer)
+    suggestions.value = []
+    error.value = null
+    loading.value = cacheKey.length > 0
+
+    debounceTimer = setTimeout(() => {
+      const { cacheKey: currentKey } = seedStateGetterRef.value()
+      if (currentKey !== cacheKey) return
+      void runFetch(currentKey)
+    }, 400)
+  }
+
+  watch(
+    () => seedStateGetterRef.value().cacheKey,
+    (cacheKey) => scheduleFetch(cacheKey),
+  )
+
+  bindSeeds = (getter: () => SuggestionSeedState) => {
+    seedStateGetterRef.value = getter
+    const { cacheKey } = getter()
+    if (cacheKey === loadedCacheKey) {
+      loading.value = false
+      return
+    }
+    if (cacheKey.length && hydrateFromStorage(cacheKey)) return
+    scheduleFetch(cacheKey)
+  }
+
+  return { suggestions, loading, error, count }
+}
+
+/**
+ * Suggested edits seeded by morelike (similar articles) + Growth newcomer task
+ * types (via cirrusdoc). Shared singleton so the home and all-suggestions screens
+ * reuse one fetch when the cache key is unchanged. Results persist in
+ * localStorage keyed by interests (or title when interests are implicit) so a
+ * full page reload does not refetch unless that key changes.
+ *
+ * Pass a seed-state getter once from the route shell; child screens call
+ * `useSuggestions()` with no args to read the shared cache.
+ */
+export function useSuggestions(
+  seedState?: () => SuggestionSeedState,
+): SuggestionsState {
+  if (!shared) shared = createState()
+  if (seedState) bindSeeds?.(seedState)
+  return shared
+}
diff --git a/src/prototypes/no-distractions/data/useTrendingPages.ts b/src/prototypes/no-distractions/data/useTrendingPages.ts
new file mode 100644
index 0000000..48cd185
--- /dev/null
+++ b/src/prototypes/no-distractions/data/useTrendingPages.ts
@@ -0,0 +1,166 @@
+import { computed, ref, type ComputedRef, type Ref } from 'vue'
+
+import {
+  displayArticleTitle,
+  fetchWeeklyTopPageviews,
+  FetchTopPageviewsError,
+  formatWeeklyViews,
+  pastCalendarDays,
+  trendingCacheKey,
+} from '@/lib/fetchTopPageviews'
+
+export interface TrendingPage {
+  title: string
+  articleTitle: string
+  viewsLabel: string
+  thumbnailSrc?: string
+}
+
+export interface TrendingPagesState {
+  pages: ComputedRef<TrendingPage[]>
+  loading: Ref<boolean>
+  error: Ref<string | null>
+}
+
+const LANG = 'en'
+const STORAGE_KEY = 'protowiki:no-distractions:trending-pages:v3'
+
+interface StoredTrendingCache {
+  cacheKey: string
+  pages: TrendingPage[]
+  error: string | null
+}
+
+function readTrendingCache(cacheKey: string): StoredTrendingCache | null {
+  if (typeof localStorage === 'undefined' || !cacheKey.length) return null
+
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY)
+    if (!raw) return null
+    const parsed = JSON.parse(raw) as StoredTrendingCache
+    if (parsed.cacheKey !== cacheKey || !Array.isArray(parsed.pages)) return null
+    if (parsed.error) return null
+    return parsed
+  } catch {
+    return null
+  }
+}
+
+function writeTrendingCache(
+  cacheKey: string,
+  cachedPages: TrendingPage[],
+  cachedError: string | null,
+): void {
+  if (typeof localStorage === 'undefined' || !cacheKey.length) return
+  if (cachedError) return
+
+  try {
+    const payload: StoredTrendingCache = { cacheKey, pages: cachedPages, error: cachedError }
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(payload))
+  } catch {
+    // Quota or privacy mode — ignore.
+  }
+}
+
+let shared: TrendingPagesState | null = null
+let scheduleTrendingFetch: (() => void) | null = null
+
+function createState(): TrendingPagesState {
+  const pages = ref<TrendingPage[]>([])
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  let loadedCacheKey = ''
+  let inFlightCacheKey = ''
+  let abortController: AbortController | null = null
+
+  function currentCacheKey(): string {
+    return trendingCacheKey(LANG, pastCalendarDays(7))
+  }
+
+  function hydrateFromStorage(cacheKey: string): boolean {
+    const stored = readTrendingCache(cacheKey)
+    if (!stored) return false
+
+    pages.value = stored.pages
+    error.value = stored.error
+    loadedCacheKey = cacheKey
+    loading.value = false
+    return true
+  }
+
+  async function runFetch(fetchCacheKey: string): Promise<void> {
+    if (inFlightCacheKey === fetchCacheKey) return
+    inFlightCacheKey = fetchCacheKey
+
+    abortController?.abort()
+    abortController = new AbortController()
+    const signal = abortController.signal
+
+    loading.value = true
+    error.value = null
+
+    try {
+      const { articles } = await fetchWeeklyTopPageviews({ lang: LANG, signal })
+      if (signal.aborted) return
+      if (fetchCacheKey !== currentCacheKey()) return
+
+      const built: TrendingPage[] = articles.map((article) => ({
+        title: displayArticleTitle(article.title),
+        articleTitle: article.title,
+        viewsLabel: formatWeeklyViews(article.views),
+        thumbnailSrc: article.thumbnailSrc,
+      }))
+
+      pages.value = built
+      error.value = null
+      loadedCacheKey = fetchCacheKey
+      writeTrendingCache(fetchCacheKey, built, null)
+    } catch (fetchError) {
+      if (fetchError instanceof FetchTopPageviewsError && fetchError.code === 'aborted') return
+      if ((fetchError as Error).name === 'AbortError') return
+      if (fetchCacheKey !== currentCacheKey()) return
+
+      error.value =
+        fetchError instanceof Error ? fetchError.message : 'Could not load trending pages.'
+      pages.value = []
+      loadedCacheKey = fetchCacheKey
+    } finally {
+      if (inFlightCacheKey === fetchCacheKey) {
+        inFlightCacheKey = ''
+      }
+      if (!signal.aborted && fetchCacheKey === currentCacheKey()) {
+        loading.value = false
+      }
+    }
+  }
+
+  function scheduleFetch(): void {
+    const cacheKey = currentCacheKey()
+    if (cacheKey === loadedCacheKey) return
+    if (cacheKey.length && hydrateFromStorage(cacheKey)) return
+
+    pages.value = []
+    error.value = null
+    loading.value = true
+    void runFetch(cacheKey)
+  }
+
+  scheduleTrendingFetch = scheduleFetch
+
+  return {
+    pages: computed(() => pages.value),
+    loading,
+    error,
+  }
+}
+
+/**
+ * Most-viewed English Wikipedia articles over the past week (Wikifeeds most-read, aggregated).
+ * Shared singleton; call once from the route shell to bind the fetch lifecycle.
+ */
+export function useTrendingPages(init = false): TrendingPagesState {
+  if (!shared) shared = createState()
+  if (init) scheduleTrendingFetch?.()
+  return shared
+}
diff --git a/src/prototypes/no-distractions/index.vue b/src/prototypes/no-distractions/index.vue
new file mode 100644
index 0000000..8ac00b4
--- /dev/null
+++ b/src/prototypes/no-distractions/index.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { onBeforeUnmount, watch } from 'vue'
+
+import MobileWrapper from '@/components/MobileWrapper.vue'
+import { useConfig } from '@/composables/useConfig'
+import { normalizeWikiUsername, type ConfigUser } from '@/config'
+
+import { useFlowState, type Screen } from './data/useFlowState'
+import { useConfigureSettings } from './data/useConfigureSettings'
+import {
+  resolveRecentChangesCacheKey,
+  useRecentChanges,
+} from './data/useRecentChanges'
+import { resolveSuggestionSeedState, useSuggestions } from './data/useSuggestions'
+import PagePickerScreen from './screens/PagePickerScreen.vue'
+import ReadScreen from './screens/ReadScreen.vue'
+import CreateAccountScreen from './screens/CreateAccountScreen.vue'
+import WelcomeScreen from './screens/WelcomeScreen.vue'
+import SurveyScreen from './screens/SurveyScreen.vue'
+import InterestsScreen from './screens/InterestsScreen.vue'
+import EmailScreen from './screens/EmailScreen.vue'
+import HomeScreen from './screens/HomeScreen.vue'
+import AllSuggestionsScreen from './screens/AllSuggestionsScreen.vue'
+import FeaturedScreen from './screens/FeaturedScreen.vue'
+import TrendingScreen from './screens/TrendingScreen.vue'
+import { useFeaturedFeed } from './data/useFeaturedFeed'
+import { useTrendingPages } from './data/useTrendingPages'
+
+definePage({
+  meta: {
+    title: 'No distractions',
+    description: 'A streamlined onboarding flow.',
+  },
+})
+
+const flow = useFlowState()
+const { user, realUsername, lang } = useConfig()
+const configureSettings = useConfigureSettings()
+
+// Bind once at the route shell; home/all read the shared cache without rebinding.
+useSuggestions(() => {
+  const base = resolveSuggestionSeedState(
+    flow.interests.value,
+    flow.title.value,
+    flow.hasExplicitInterests.value,
+  )
+  const useEditingHistory = user.value === 'real' && configureSettings.value.editingHistory
+  const historyKey =
+    useEditingHistory && realUsername.value.trim()
+      ? `history:${normalizeWikiUsername(realUsername.value).toLowerCase()}`
+      : 'history:off'
+
+  return {
+    seeds: base.seeds,
+    cacheKey: base.cacheKey ? `${base.cacheKey}|${historyKey}` : '',
+    useEditingHistory,
+    realUsername: realUsername.value,
+    lang: lang.value,
+  }
+})
+
+useRecentChanges(() => ({
+  interests: flow.interests.value,
+  isRealUser: user.value === 'real',
+  realUsername: realUsername.value,
+  lang: lang.value,
+  cacheKey: resolveRecentChangesCacheKey(
+    flow.interests.value,
+    user.value === 'real',
+    realUsername.value,
+  ),
+}))
+
+// Bind once at the route shell; featured screen reads the shared cache.
+useFeaturedFeed(true)
+useTrendingPages(true)
+
+// Logged-out chrome before the account exists; logged-in afterwards. The
+// article header reads the global config user, so we drive it per screen and
+// restore whatever the gallery had when leaving the prototype.
+const LOGGED_OUT_SCREENS: Screen[] = ['picker', 'read', 'account']
+const originalUser = user.value
+
+watch(
+  flow.screen,
+  (screen) => {
+    if (user.value === 'real') return
+    const next: ConfigUser = LOGGED_OUT_SCREENS.includes(screen) ? 'logged-out' : 'new'
+    if (user.value !== next) user.value = next
+  },
+  { immediate: true },
+)
+
+onBeforeUnmount(() => {
+  user.value = originalUser
+})
+</script>
+
+<template>
+  <MobileWrapper max-width="412px" :show-frame-border="false">
+    <PagePickerScreen v-if="flow.screen.value === 'picker'" :flow="flow" />
+    <ReadScreen v-else-if="flow.screen.value === 'read'" :flow="flow" />
+    <CreateAccountScreen v-else-if="flow.screen.value === 'account'" :flow="flow" />
+    <WelcomeScreen v-else-if="flow.screen.value === 'welcome'" :flow="flow" />
+    <SurveyScreen v-else-if="flow.screen.value === 'survey'" :flow="flow" />
+    <InterestsScreen v-else-if="flow.screen.value === 'interests'" :flow="flow" />
+    <EmailScreen v-else-if="flow.screen.value === 'email'" :flow="flow" />
+    <HomeScreen v-else-if="flow.screen.value === 'home'" :flow="flow" />
+    <AllSuggestionsScreen v-else-if="flow.screen.value === 'all'" :flow="flow" />
+    <FeaturedScreen v-else-if="flow.screen.value === 'featured'" :flow="flow" />
+    <TrendingScreen v-else-if="flow.screen.value === 'trending'" :flow="flow" />
+  </MobileWrapper>
+</template>
diff --git a/src/prototypes/no-distractions/screens/AllSuggestionsScreen.vue b/src/prototypes/no-distractions/screens/AllSuggestionsScreen.vue
new file mode 100644
index 0000000..06eafe1
--- /dev/null
+++ b/src/prototypes/no-distractions/screens/AllSuggestionsScreen.vue
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { computed, nextTick } from 'vue'
+import { CdxIcon, CdxMessage, CdxProgressBar } from '@wikimedia/codex'
+import { cdxIconHelp, cdxIconHome } from '@wikimedia/codex-icons'
+
+import ChromeWrapper from '@/components/chrome/ChromeWrapper.vue'
+
+import AllSuggestionsStickyHead from '../components/AllSuggestionsStickyHead.vue'
+import RecentChangeCard from '../components/RecentChangeCard.vue'
+import SuggestionCard from '../components/SuggestionCard.vue'
+import { useRecentChanges } from '../data/useRecentChanges'
+import { useSuggestions } from '../data/useSuggestions'
+import type { FlowState } from '../data/useFlowState'
+
+const props = defineProps<{ flow: FlowState }>()
+
+const isRecentChanges = computed(() => props.flow.module.value === 'recent-changes')
+
+const { suggestions, loading: suggestionsLoading, error: suggestionsError } = useSuggestions()
+const { changes, loading: changesLoading, error: changesError } = useRecentChanges()
+
+const loading = computed(() =>
+  isRecentChanges.value ? changesLoading.value : suggestionsLoading.value,
+)
+const error = computed(() => (isRecentChanges.value ? changesError.value : suggestionsError.value))
+const hasItems = computed(() =>
+  isRecentChanges.value ? changes.value.length > 0 : suggestions.value.length > 0,
+)
+
+async function goHome() {
+  await props.flow.goTo('home')
+  await nextTick()
+  window.scrollTo({ top: 0, left: 0, behavior: 'instant' })
+}
+
+function goToInterests() {
+  void props.flow.goTo('interests', { returnTo: 'all' })
+}
+</script>
+
+<template>
+  <ChromeWrapper skin="mobile" :last-edited-notice="false" :show-footer="false">
+    <div class="all">
+      <AllSuggestionsStickyHead :flow="props.flow" @configure="goToInterests" />
+
+      <div class="all__content">
+        <CdxProgressBar
+          v-if="loading && !hasItems"
+          inline
+          :aria-label="isRecentChanges ? 'Loading recent changes' : 'Loading suggestions'"
+        />
+
+        <CdxMessage v-else-if="error" type="error" :allow-user-dismiss="false">
+          {{ error }}
+        </CdxMessage>
+
+        <p v-else-if="!hasItems" class="all__empty">
+          <template v-if="isRecentChanges">
+            No recent changes yet — add an interest to get started.
+          </template>
+          <template v-else> No suggestions yet — add an interest to get started. </template>
+        </p>
+
+        <div v-else-if="isRecentChanges" class="all__list">
+          <RecentChangeCard
+            v-for="change in changes"
+            :key="change.title"
+            :article-title="change.title"
+            :article-description="change.description"
+            :editor="change.editor"
+            :relative-time="change.relativeTime"
+            :edit-summary="change.editSummary"
+            :thumbnail-src="change.thumbnailSrc"
+          />
+        </div>
+
+        <div v-else class="all__list">
+          <SuggestionCard
+            v-for="suggestion in suggestions"
+            :key="suggestion.title"
+            :task-heading="suggestion.taskHeading"
+            :task-color="suggestion.taskColor"
+            :article-title="suggestion.title"
+            :article-description="suggestion.description"
+            :task-description="suggestion.taskDescription"
+            :thumbnail-src="suggestion.thumbnailSrc"
+          />
+        </div>
+      </div>
+
+      <div class="all__fab">
+        <button class="all__fab-btn" type="button" aria-label="Home" @click="goHome">
+          <CdxIcon :icon="cdxIconHome" />
+        </button>
+        <button class="all__fab-btn" type="button" aria-label="Help">
+          <CdxIcon :icon="cdxIconHelp" />
+        </button>
+      </div>
+    </div>
+  </ChromeWrapper>
+</template>
+
+<style scoped>
+.all {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: calc(var(--spacing-100, 16px) + 3.75rem);
+}
+
+.all__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-100, 16px);
+  padding: 0 var(--spacing-100, 16px) var(--spacing-100, 16px);
+}
+
+.all__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-75, 12px);
+}
+
+.all__empty {
+  margin: 0;
+  color: var(--color-subtle);
+}
+
+.all__fab {
+  position: fixed;
+  right: var(--spacing-50, 8px);
+  bottom: 12px;
+  z-index: 10;
+  display: inline-flex;
+  gap: 0;
+  padding: var(--spacing-25, 4px);
+  border-radius: var(--border-radius-pill, 9999px);
+  background-color: var(--background-color-interactive, #eaecf0);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+}
+
+@media (min-width: 480px) {
+  .all__fab {
+    right: calc((100vw - min(100vw, 412px)) / 2 + var(--spacing-50, 8px));
+  }
+}
+
+.all__fab-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  padding: 0;
+  border: none;
+  border-radius: var(--border-radius-circle, 50%);
+  background: transparent;
+  color: var(--color-base);
+  cursor: pointer;
+}
+
+.all__fab-btn :deep(.cdx-icon) {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+</style>
diff --git a/src/prototypes/no-distractions/screens/CreateAccountScreen.vue b/src/prototypes/no-distractions/screens/CreateAccountScreen.vue
new file mode 100644
index 0000000..9331580
--- /dev/null
+++ b/src/prototypes/no-distractions/screens/CreateAccountScreen.vue
@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CdxButton, CdxField, CdxTextInput } from '@wikimedia/codex'
+
+import ChromeWrapper from '@/components/chrome/ChromeWrapper.vue'
+
+import type { FlowState } from '../data/useFlowState'
+
+const props = defineProps<{ flow: FlowState }>()
+
+const username = ref(props.flow.username.value)
+const password = ref('')
+const confirmPassword = ref('')
+const email = ref(props.flow.email.value)
+
+function createAccount(): void {
+  props.flow.goTo('welcome', {
+    username: username.value || 'NewEditor',
+    email: email.value,
+  })
+}
+</script>
+
+<template>
+  <ChromeWrapper skin="mobile" :last-edited-notice="false">
+    <form class="account" @submit.prevent="createAccount">
+      <h1 class="account__title">Create account</h1>
+
+      <CdxField class="account__field">
+        <template #label>Username</template>
+        <template #description>
+          <span class="account__hint-strong">Choose carefully</span>
+          — it's how the community will know you.
+        </template>
+        <CdxTextInput v-model="username" placeholder="Enter your username" />
+      </CdxField>
+
+      <CdxField class="account__field">
+        <template #label>Password</template>
+        <CdxTextInput v-model="password" input-type="password" placeholder="Enter a password" />
+      </CdxField>
+
+      <CdxField class="account__field">
+        <template #label>Confirm password</template>
+        <CdxTextInput
+          v-model="confirmPassword"
+          input-type="password"
+          placeholder="Enter password again"
+        />
+      </CdxField>
+
+      <CdxField class="account__field">
+        <template #label>Email address</template>
+        <CdxTextInput v-model="email" input-type="email" placeholder="Enter your email address" />
+      </CdxField>
+
+      <CdxButton class="account__submit" action="progressive" weight="primary" type="submit">
+        Create your account
+      </CdxButton>
+
+      <p class="account__legal">
+        This site is protected by hCaptcha and its
+        <a href="#" @click.prevent>Privacy Policy</a> and
+        <a href="#" @click.prevent>Terms of Service</a> apply.
+      </p>
+    </form>
+  </ChromeWrapper>
+</template>
+
+<style scoped>
+.account {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-150, 24px);
+  padding: var(--spacing-100, 16px);
+  padding-bottom: var(--spacing-200, 32px);
+}
+
+.account__title {
+  margin: 0;
+  font-family:
+    var(--font-family-system-sans, system-ui, sans-serif), var(--font-family-base, sans-serif);
+  font-size: var(--font-size-xx-large, 1.5rem);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-xxx-large, 1.375);
+  color: var(--color-base);
+}
+
+.account__field {
+  margin: 0;
+}
+
+.account__field :deep(.cdx-text-input__input) {
+  min-height: 2rem;
+}
+
+.account__hint-strong {
+  font-size: var(--font-size-small, 0.875rem);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-progressive, #36c);
+}
+
+.account__field :deep(.cdx-field__description) {
+  font-size: var(--font-size-medium, 1rem);
+  line-height: var(--line-height-small, 1.375);
+  color: var(--color-subtle, #54595d);
+}
+
+.account__submit {
+  width: 100%;
+  min-height: 2.75rem;
+}
+
+.account__legal {
+  margin: 0;
+  font-size: var(--font-size-small, 0.875rem);
+  line-height: var(--line-height-small, 1.375);
+  color: var(--color-subtle, #54595d);
+}
+
+.account__legal a {
+  font-size: var(--font-size-x-small, 0.75rem);
+  color: var(--color-subtle, #54595d);
+  text-decoration: underline;
+}
+</style>
diff --git a/src/prototypes/no-distractions/screens/EmailScreen.vue b/src/prototypes/no-distractions/screens/EmailScreen.vue
new file mode 100644
index 0000000..8e54b48
--- /dev/null
+++ b/src/prototypes/no-distractions/screens/EmailScreen.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { CdxButton, CdxField, CdxTextInput } from '@wikimedia/codex'
+import { cdxIconMessage } from '@wikimedia/codex-icons'
+
+import OnboardingShell from '../components/OnboardingShell.vue'
+import type { FlowState } from '../data/useFlowState'
+
+const props = defineProps<{ flow: FlowState }>()
+
+const email = ref(props.flow.email.value)
+
+function finish(): void {
+  props.flow.goTo('home', { email: email.value })
+}
+</script>
+
+<template>
+  <OnboardingShell :current="3" flush-content>
+    <div class="ob-page">
+      <h1 class="ob-title">Add your email address</h1>
+
+      <div class="ob-body">
+        <CdxField class="ob-field email__field">
+          <template #label>
+            Email is required to recover your account if you lose your password or log in from a
+            unfamiliar location or new browser.
+          </template>
+          <CdxTextInput
+            v-model="email"
+            input-type="email"
+            :start-icon="cdxIconMessage"
+            placeholder="Enter your email address"
+            aria-label="Email address"
+          />
+        </CdxField>
+
+        <div class="ob-actions">
+          <CdxButton action="progressive" weight="primary" @click="finish">Go to your Home</CdxButton>
+        </div>
+      </div>
+    </div>
+  </OnboardingShell>
+</template>
+
+<style scoped>
+.email__field {
+  margin: 0;
+}
+
+.email__field :deep(.cdx-label) {
+  font-size: var(--font-size-medium, 1rem);
+  font-weight: var(--font-weight-normal);
+  line-height: var(--line-height-small, 1.375);
+  color: var(--color-subtle, #54595d);
+}
+</style>
diff --git a/src/prototypes/no-distractions/screens/FeaturedScreen.vue b/src/prototypes/no-distractions/screens/FeaturedScreen.vue
new file mode 100644
index 0000000..30b1ca9
--- /dev/null
+++ b/src/prototypes/no-distractions/screens/FeaturedScreen.vue
@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { computed, nextTick } from 'vue'
+import { CdxIcon, CdxMessage, CdxProgressBar } from '@wikimedia/codex'
+import { cdxIconHelp, cdxIconHome } from '@wikimedia/codex-icons'
+
+import ChromeWrapper from '@/components/chrome/ChromeWrapper.vue'
+
+import AllSuggestionsStickyHead from '../components/AllSuggestionsStickyHead.vue'
+import FeaturedCard from '../components/FeaturedCard.vue'
+import { useFeaturedFeed } from '../data/useFeaturedFeed'
+import type { FlowState } from '../data/useFlowState'
+
+const props = defineProps<{ flow: FlowState }>()
+
+const { sections, loading, error } = useFeaturedFeed()
+
+const hasContent = computed(() => sections.value.some((section) => section.items.length > 0))
+
+async function goHome() {
+  await props.flow.goTo('home')
+  await nextTick()
+  window.scrollTo({ top: 0, left: 0, behavior: 'instant' })
+}
+
+function goToInterests() {
+  void props.flow.goTo('interests', { returnTo: 'featured' })
+}
+
+function openArticle(title: string) {
+  void props.flow.goTo('read', { title })
+}
+</script>
+
+<template>
+  <ChromeWrapper skin="mobile" :last-edited-notice="false" :show-footer="false">
+    <div class="featured">
+      <AllSuggestionsStickyHead :flow="props.flow" @configure="goToInterests" />
+
+      <div class="featured__content">
+        <CdxProgressBar
+          v-if="loading && !hasContent"
+          inline
+          aria-label="Loading featured content"
+        />
+
+        <CdxMessage v-else-if="error" type="error" :allow-user-dismiss="false">
+          {{ error }}
+        </CdxMessage>
+
+        <p v-else-if="!hasContent" class="featured__empty">
+          No featured content available for today.
+        </p>
+
+        <template v-else>
+          <section
+            v-for="section in sections"
+            :key="section.id"
+            class="featured__section"
+          >
+            <h2 v-if="section.label" class="featured__section-title">{{ section.label }}</h2>
+            <div class="featured__cards">
+              <FeaturedCard
+                v-for="(item, index) in section.items"
+                :key="`${section.id}-${index}`"
+                :title="item.title"
+                :body="item.body"
+                :description="item.description"
+                :thumbnail-src="item.thumbnailSrc"
+                :article-title="item.articleTitle"
+                @open="openArticle"
+              />
+            </div>
+          </section>
+        </template>
+      </div>
+
+      <div class="featured__fab">
+        <button class="featured__fab-btn" type="button" aria-label="Home" @click="goHome">
+          <CdxIcon :icon="cdxIconHome" />
+        </button>
+        <button class="featured__fab-btn" type="button" aria-label="Help">
+          <CdxIcon :icon="cdxIconHelp" />
+        </button>
+      </div>
+    </div>
+  </ChromeWrapper>
+</template>
+
+<style scoped>
+.featured {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: calc(var(--spacing-100, 16px) + 3.75rem);
+}
+
+.featured__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-150, 24px);
+  padding: 0 var(--spacing-100, 16px) var(--spacing-100, 16px);
+}
+
+.featured__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-75, 12px);
+}
+
+.featured__section-title {
+  margin: 0;
+  font-family:
+    var(--font-family-system-sans, system-ui, sans-serif), var(--font-family-base, sans-serif);
+  font-size: var(--font-size-large, 1.125rem);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-large, 1.56);
+  color: var(--color-base);
+}
+
+.featured__cards {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-75, 12px);
+}
+
+.featured__empty {
+  margin: 0;
+  color: var(--color-subtle);
+}
+
+.featured__fab {
+  position: fixed;
+  right: var(--spacing-50, 8px);
+  bottom: 12px;
+  z-index: 10;
+  display: inline-flex;
+  gap: 0;
+  padding: var(--spacing-25, 4px);
+  border-radius: var(--border-radius-pill, 9999px);
+  background-color: var(--background-color-interactive, #eaecf0);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+}
+
+@media (min-width: 480px) {
+  .featured__fab {
+    right: calc((100vw - min(100vw, 412px)) / 2 + var(--spacing-50, 8px));
+  }
+}
+
+.featured__fab-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  padding: 0;
+  border: none;
+  border-radius: var(--border-radius-circle, 50%);
+  background: transparent;
+  color: var(--color-base);
+  cursor: pointer;
+}
+
+.featured__fab-btn :deep(.cdx-icon) {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+</style>
diff --git a/src/prototypes/no-distractions/screens/HomeScreen.vue b/src/prototypes/no-distractions/screens/HomeScreen.vue
new file mode 100644
index 0000000..c1c724e
--- /dev/null
+++ b/src/prototypes/no-distractions/screens/HomeScreen.vue
@@ -0,0 +1,248 @@
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import { CdxIcon, CdxMessage, CdxProgressBar } from '@wikimedia/codex'
+import { cdxIconArrowNext, cdxIconHelp, cdxIconHome } from '@wikimedia/codex-icons'
+
+import ChromeWrapper from '@/components/chrome/ChromeWrapper.vue'
+
+import ReturnToArticle from '../components/ReturnToArticle.vue'
+import SuggestionCard from '../components/SuggestionCard.vue'
+import { useSuggestions } from '../data/useSuggestions'
+import type { FlowState } from '../data/useFlowState'
+
+const props = defineProps<{ flow: FlowState }>()
+
+const { suggestions, loading, error, count } = useSuggestions()
+
+const topSuggestions = computed(() => suggestions.value.slice(0, 3))
+const returnTitle = computed(() => props.flow.title.value || 'reading')
+const viewAllLabel = computed(() =>
+  count.value > 0 ? `View all ${count.value} suggestions` : 'View all suggestions',
+)
+
+const canOpenAll = computed(() => suggestions.value.length > 0)
+
+function openAllSuggestions(): void {
+  if (!canOpenAll.value) return
+  void props.flow.goTo('all')
+}
+
+function scrollToTop() {
+  window.scrollTo({ top: 0, left: 0, behavior: 'instant' })
+}
+
+onMounted(scrollToTop)
+</script>
+
+<template>
+  <ChromeWrapper skin="mobile" :last-edited-notice="false" :show-footer="false">
+    <div class="home">
+      <ReturnToArticle :title="returnTitle" @click="props.flow.goTo('read')" />
+
+      <section
+        class="home__module home__module--suggestions"
+        :class="{ 'home__module--interactive': canOpenAll }"
+        :role="canOpenAll ? 'button' : undefined"
+        :tabindex="canOpenAll ? 0 : undefined"
+        :aria-label="canOpenAll ? viewAllLabel : undefined"
+        @click="openAllSuggestions"
+        @keydown.enter.prevent="openAllSuggestions"
+        @keydown.space.prevent="openAllSuggestions"
+      >
+        <header class="home__module-head">
+          <h2 class="home__module-title">Suggested edits</h2>
+          <span v-if="canOpenAll" class="home__module-chevron" aria-hidden="true">
+            <CdxIcon :icon="cdxIconArrowNext" />
+          </span>
+        </header>
+
+        <CdxProgressBar v-if="loading && !suggestions.length" inline aria-label="Loading suggestions" />
+
+        <CdxMessage v-else-if="error" type="error" :allow-user-dismiss="false">
+          {{ error }}
+        </CdxMessage>
+
+        <p v-else-if="!suggestions.length" class="home__empty">
+          No suggestions yet — add an interest to get started.
+        </p>
+
+        <div v-else class="home__cards">
+          <SuggestionCard
+            v-for="suggestion in topSuggestions"
+            :key="suggestion.title"
+            :task-heading="suggestion.taskHeading"
+            :task-color="suggestion.taskColor"
+            :article-title="suggestion.title"
+            :article-description="suggestion.description"
+            :task-description="suggestion.taskDescription"
+            :thumbnail-src="suggestion.thumbnailSrc"
+          />
+        </div>
+
+        <div v-if="suggestions.length" class="home__view-all" aria-hidden="true">
+          {{ viewAllLabel }}
+        </div>
+      </section>
+
+      <section class="home__module">
+        <header class="home__module-head">
+          <h2 class="home__module-title">Your impact</h2>
+        </header>
+        <p class="home__impact-text">
+          Start with a few
+          <a href="#" class="home__inline-link" @click.prevent="props.flow.goTo('all')">
+            suggested edits</a>, then see how many people are viewing your contributions.
+        </p>
+      </section>
+
+      <div class="home__fab">
+        <button class="home__fab-btn home__fab-btn--active" type="button" aria-label="Home">
+          <CdxIcon :icon="cdxIconHome" />
+        </button>
+        <button class="home__fab-btn" type="button" aria-label="Help">
+          <CdxIcon :icon="cdxIconHelp" />
+        </button>
+      </div>
+    </div>
+  </ChromeWrapper>
+</template>
+
+<style scoped>
+.home {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-100, 16px);
+  padding: var(--spacing-100, 16px);
+  padding-bottom: calc(var(--spacing-100, 16px) + 3.75rem);
+}
+
+.home__module {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-100, 16px);
+  border: var(--border-width-base, 1px) solid var(--border-color-subtle, #c8ccd1);
+  border-radius: var(--border-radius-base, 2px);
+  padding: var(--spacing-100, 16px);
+}
+
+.home__module-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 2rem;
+}
+
+.home__module-title {
+  margin: 0;
+  font-family:
+    var(--font-family-system-sans, system-ui, sans-serif), var(--font-family-base, sans-serif);
+  font-size: var(--font-size-large, 1.125rem);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-large, 1.56);
+  color: var(--color-base);
+}
+
+.home__module--interactive {
+  cursor: pointer;
+}
+
+.home__module--interactive:focus-visible {
+  outline: 2px solid var(--color-progressive, #36c);
+  outline-offset: 2px;
+}
+
+.home__module-chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  color: var(--color-base);
+}
+
+.home__module-chevron :deep(.cdx-icon) {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.home__cards {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-75, 12px);
+}
+
+.home__view-all {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 2.75rem;
+  padding: var(--spacing-75, 12px) var(--spacing-100, 16px);
+  border-radius: var(--border-radius-base, 2px);
+  background-color: var(--background-color-progressive, #36c);
+  font-size: var(--font-size-medium, 1rem);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-small, 1.375);
+  color: var(--color-inverted, #fff);
+  text-align: center;
+}
+
+.home__empty {
+  margin: 0;
+  color: var(--color-subtle);
+}
+
+.home__impact-text {
+  margin: 0;
+  font-size: var(--font-size-medium, 1rem);
+  line-height: var(--line-height-medium, 1.625);
+  color: var(--color-subtle, #54595d);
+}
+
+.home__inline-link {
+  color: var(--color-progressive, #36c);
+}
+
+.home__fab {
+  position: fixed;
+  right: var(--spacing-50, 8px);
+  bottom: 12px;
+  z-index: 10;
+  display: inline-flex;
+  gap: 0;
+  padding: var(--spacing-25, 4px);
+  border-radius: var(--border-radius-pill, 9999px);
+  background-color: var(--background-color-interactive, #eaecf0);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+}
+
+@media (min-width: 480px) {
+  .home__fab {
+    right: calc((100vw - min(100vw, 412px)) / 2 + var(--spacing-50, 8px));
+  }
+}
+
+.home__fab-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  padding: 0;
+  border: none;
+  border-radius: var(--border-radius-circle, 50%);
+  background: transparent;
+  color: var(--color-base);
+  cursor: pointer;
+}
+
+.home__fab-btn--active {
+  background-color: var(--background-color-interactive-subtle, #dadde3);
+}
+
+.home__fab-btn :deep(.cdx-icon) {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+</style>
diff --git a/src/prototypes/no-distractions/screens/InterestsScreen.vue b/src/prototypes/no-distractions/screens/InterestsScreen.vue
new file mode 100644
index 0000000..7596acd
--- /dev/null
+++ b/src/prototypes/no-distractions/screens/InterestsScreen.vue
@@ -0,0 +1,242 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { CdxButton, CdxSearchInput, CdxToggleSwitch } from '@wikimedia/codex'
+
+import { useConfig } from '@/composables/useConfig'
+
+import iconSubtractCircle from '../assets/icon-subtract-circle.svg'
+import OnboardingShell from '../components/OnboardingShell.vue'
+import TitleSearchResults from '../components/TitleSearchResults.vue'
+import { useConfigureSettings } from '../data/useConfigureSettings'
+import { fetchTitleSearchResults, type TitleSearchResult } from '../data/titleSearch'
+import type { FlowState } from '../data/useFlowState'
+
+const props = defineProps<{ flow: FlowState }>()
+
+const { user, realUsername } = useConfig()
+const configureSettings = useConfigureSettings()
+
+const search = ref('')
+const results = ref<TitleSearchResult[]>([])
+
+let abortController: AbortController | null = null
+let debounceTimer: ReturnType<typeof setTimeout> | null = null
+
+const interests = computed(() => props.flow.interests.value)
+const configureMode = computed(() => props.flow.returnTo.value !== '')
+const showEditingHistoryToggle = computed(
+  () => configureMode.value && user.value === 'real',
+)
+
+async function finishInterests(): Promise<void> {
+  const returnTo = props.flow.returnTo.value
+  if (returnTo) {
+    await props.flow.goTo(returnTo, { returnTo: '' })
+  } else {
+    await props.flow.goTo('email')
+  }
+}
+
+async function fetchSuggestions(term: string): Promise<void> {
+  abortController?.abort()
+  const trimmed = term.trim()
+  if (!trimmed.length) {
+    results.value = []
+    return
+  }
+
+  abortController = new AbortController()
+  try {
+    const pages = await fetchTitleSearchResults(trimmed, {
+      signal: abortController.signal,
+      clientTag: 'no-distractions-interests',
+    })
+    const existing = new Set(interests.value.map((item) => item.toLowerCase()))
+    results.value = pages.filter((page) => !existing.has(page.title.toLowerCase()))
+  } catch (error) {
+    if ((error as Error).name !== 'AbortError') results.value = []
+  }
+}
+
+watch(search, (term) => {
+  if (debounceTimer) clearTimeout(debounceTimer)
+  debounceTimer = setTimeout(() => void fetchSuggestions(term), 200)
+})
+
+function addInterest(title: string): void {
+  const trimmed = title.trim()
+  if (!trimmed.length) return
+  if (interests.value.some((item) => item.toLowerCase() === trimmed.toLowerCase())) return
+  props.flow.interests.value = [...interests.value, trimmed]
+  search.value = ''
+  results.value = []
+}
+
+function removeInterest(title: string): void {
+  props.flow.interests.value = interests.value.filter((item) => item !== title)
+}
+
+onBeforeUnmount(() => {
+  abortController?.abort()
+  if (debounceTimer) clearTimeout(debounceTimer)
+})
+</script>
+
+<template>
+  <OnboardingShell :current="2" :show-progress="!configureMode" flush-content>
+    <div class="ob-page">
+      <h1 class="ob-title">What are your main interests?</h1>
+
+      <div class="ob-body">
+        <div class="interests__fields">
+          <div class="interests__search">
+            <CdxSearchInput
+              v-model="search"
+              class="interests__input"
+              :class="{ 'interests__input--with-results': results.length > 0 }"
+              placeholder="Add your interests"
+              aria-label="Add your interests"
+              @submit="addInterest(search)"
+            />
+
+            <TitleSearchResults
+              v-if="results.length"
+              layout="attached"
+              :results="results"
+              @select="addInterest"
+            />
+          </div>
+
+          <ul class="interests__chips">
+            <li v-for="title in interests" :key="title">
+              <span class="interests__chip">
+                <span class="interests__chip-label">{{ title }}</span>
+                <button
+                  type="button"
+                  class="interests__chip-remove"
+                  :aria-label="`Remove ${title}`"
+                  @click="removeInterest(title)"
+                >
+                  <img class="interests__chip-remove-icon" :src="iconSubtractCircle" alt="" />
+                </button>
+              </span>
+            </li>
+          </ul>
+
+          <div v-if="showEditingHistoryToggle" class="interests__switch-list">
+            <div class="interests__switch-row">
+              <CdxToggleSwitch v-model="configureSettings.editingHistory" align-switch>
+                Show suggestions based on editing history
+              </CdxToggleSwitch>
+            </div>
+            <p v-if="!realUsername.trim()" class="interests__switch-hint">
+              Set a username in prototype settings.
+            </p>
+          </div>
+        </div>
+
+        <div class="ob-actions">
+          <template v-if="configureMode">
+            <CdxButton action="progressive" weight="primary" @click="finishInterests">
+              Done
+            </CdxButton>
+          </template>
+          <template v-else>
+            <CdxButton weight="quiet" @click="props.flow.goTo('email')">Skip</CdxButton>
+            <CdxButton action="progressive" weight="primary" @click="props.flow.goTo('email')">
+              Next
+            </CdxButton>
+          </template>
+        </div>
+      </div>
+    </div>
+  </OnboardingShell>
+</template>
+
+<style scoped>
+.interests__fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-75, 12px);
+}
+
+.interests__search {
+  position: relative;
+}
+
+.interests__search :deep(.cdx-text-input__input) {
+  min-height: 2rem;
+}
+
+.interests__input--with-results :deep(.cdx-text-input),
+.interests__input--with-results :deep(.cdx-text-input__input) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.interests__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-50, 8px);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.interests__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-50, 8px);
+  min-height: 2.75rem;
+  padding: var(--spacing-50, 8px) var(--spacing-75, 12px) var(--spacing-50, 8px)
+    var(--spacing-100, 16px);
+  border: var(--border-width-base, 1px) solid var(--border-color-subtle, #c8ccd1);
+  border-radius: var(--border-radius-pill, 9999px);
+  background-color: var(--background-color-interactive-subtle, #f8f9fa);
+}
+
+.interests__chip-label {
+  font-size: var(--font-size-medium, 1rem);
+  line-height: var(--line-height-small, 1.375);
+  color: var(--color-base);
+}
+
+.interests__chip-remove {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--color-base, #404244);
+  cursor: pointer;
+}
+
+.interests__chip-remove-icon {
+  display: block;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.interests__switch-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-50, 8px);
+}
+
+.interests__switch-row {
+  display: flex;
+  align-items: center;
+  min-height: 2.75rem;
+}
+
+.interests__switch-hint {
+  margin: 0;
+  font-size: var(--font-size-small, 0.875rem);
+  line-height: var(--line-height-small, 1.375);
+  color: var(--color-subtle, #54595d);
+}
+</style>
diff --git a/src/prototypes/no-distractions/screens/PagePickerScreen.vue b/src/prototypes/no-distractions/screens/PagePickerScreen.vue
new file mode 100644
index 0000000..fd6a0e1
--- /dev/null
+++ b/src/prototypes/no-distractions/screens/PagePickerScreen.vue
@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { onBeforeUnmount, ref, watch } from 'vue'
+import { CdxButton, CdxIcon, CdxTextInput } from '@wikimedia/codex'
+import { cdxIconArticleSearch, cdxIconSearch } from '@wikimedia/codex-icons'
+
+import TitleSearchResults from '../components/TitleSearchResults.vue'
+import { fetchTitleSearchResults, type TitleSearchResult } from '../data/titleSearch'
+import type { FlowState } from '../data/useFlowState'
+
+const props = defineProps<{ flow: FlowState }>()
+
+const query = ref(props.flow.title.value)
+const results = ref<TitleSearchResult[]>([])
+const loading = ref(false)
+
+let abortController: AbortController | null = null
+let debounceTimer: ReturnType<typeof setTimeout> | null = null
+
+async function fetchSuggestions(term: string): Promise<void> {
+  abortController?.abort()
+  const trimmed = term.trim()
+  if (!trimmed.length) {
+    results.value = []
+    loading.value = false
+    return
+  }
+
+  abortController = new AbortController()
+  loading.value = true
+
+  try {
+    results.value = await fetchTitleSearchResults(trimmed, {
+      signal: abortController.signal,
+      clientTag: 'no-distractions-picker',
+    })
+  } catch (error) {
+    if ((error as Error).name !== 'AbortError') results.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(query, (term) => {
+  if (debounceTimer) clearTimeout(debounceTimer)
+  debounceTimer = setTimeout(() => void fetchSuggestions(term), 200)
+})
+
+function read(title: string): void {
+  const trimmed = title.trim()
+  if (!trimmed.length) return
+  props.flow.goTo('read', { title: trimmed })
+}
+
+onBeforeUnmount(() => {
+  abortController?.abort()
+  if (debounceTimer) clearTimeout(debounceTimer)
+})
+</script>
+
+<template>
+  <div class="picker">
+    <div class="picker__intro">
+      <CdxIcon class="picker__logo" :icon="cdxIconArticleSearch" />
+      <h1 class="picker__title">No distractions onboarding flow</h1>
+    </div>
+
+    <form class="picker__form" @submit.prevent="read(query)">
+      <div class="picker__search">
+        <CdxTextInput
+          v-model="query"
+          class="picker__input"
+          :class="{ 'picker__input--with-results': results.length > 0 }"
+          input-type="search"
+          :start-icon="cdxIconSearch"
+          placeholder="Search for any article"
+          aria-label="Article title"
+          clearable
+        />
+
+        <TitleSearchResults
+          v-if="results.length"
+          layout="attached"
+          :results="results"
+          @select="read"
+        />
+      </div>
+
+      <CdxButton
+        class="picker__submit"
+        action="progressive"
+        weight="primary"
+        type="submit"
+        :disabled="!query.trim().length || loading"
+      >
+        Read article
+      </CdxButton>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.picker {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-height: 100vh;
+  padding: var(--spacing-200, 32px) var(--spacing-100, 16px) var(--spacing-100, 16px);
+  background-color: var(--background-color-base);
+}
+
+.picker__intro {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: var(--spacing-50, 8px);
+  margin-top: var(--spacing-400, 64px);
+}
+
+.picker__logo {
+  color: var(--color-progressive, #36c);
+}
+
+.picker__logo :deep(svg) {
+  width: 3rem;
+  height: 3rem;
+}
+
+.picker__title {
+  margin: var(--spacing-50, 8px) 0 0;
+  font-family: var(--font-family-serif);
+  font-size: var(--font-size-xx-large, 1.75rem);
+  font-weight: var(--font-weight-normal, 400);
+  line-height: var(--line-height-xx-small, 1.25);
+  color: var(--color-base);
+}
+
+.picker__form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-100, 16px);
+  margin-top: var(--spacing-150, 24px);
+}
+
+.picker__search {
+  display: flex;
+  flex-direction: column;
+}
+
+.picker__input--with-results :deep(.cdx-text-input),
+.picker__input--with-results :deep(.cdx-text-input__input) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.picker__submit {
+  width: 100%;
+}
+</style>
diff --git a/src/prototypes/no-distractions/screens/ReadScreen.vue b/src/prototypes/no-distractions/screens/ReadScreen.vue
new file mode 100644
index 0000000..9f2e38d
--- /dev/null
+++ b/src/prototypes/no-distractions/screens/ReadScreen.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { CdxButton, CdxMessage, CdxProgressBar } from '@wikimedia/codex'
+
+import ArticleHeader from '@/components/article/ArticleHeader.vue'
+import ArticleRenderer from '@/components/article/ArticleRenderer.vue'
+import ChromeWrapper from '@/components/chrome/ChromeWrapper.vue'
+
+import SavePagesSheet from '../components/SavePagesSheet.vue'
+import { useArticleHtml } from '../data/useArticleHtml'
+import type { FlowState } from '../data/useFlowState'
+
+const props = defineProps<{ flow: FlowState }>()
+
+const displayTitle = computed(() => props.flow.title.value.replace(/_/g, ' ').trim())
+const saveSheetOpen = ref(false)
+
+const { html, loading, error } = useArticleHtml(computed(() => props.flow.title.value))
+
+function onBookmark(): void {
+  saveSheetOpen.value = true
+}
+</script>
+
+<template>
+  <ChromeWrapper skin="mobile">
+    <div v-if="!displayTitle" class="read-empty">
+      <CdxMessage type="notice" :allow-user-dismiss="false">
+        Pick an article to read first.
+      </CdxMessage>
+      <CdxButton action="progressive" weight="primary" @click="props.flow.goTo('picker')">
+        Choose an article
+      </CdxButton>
+    </div>
+
+    <article v-else class="article nd-article" data-skin="mobile">
+      <ArticleHeader
+        :title="displayTitle"
+        skin="mobile"
+        bookmark-affordance="bookmark"
+        @bookmark-click="onBookmark"
+      />
+
+      <CdxProgressBar v-if="loading" inline aria-label="Loading article" />
+
+      <CdxMessage v-if="error" type="error" :allow-user-dismiss="false">
+        Couldn't load this article: {{ error }}
+      </CdxMessage>
+
+      <ArticleRenderer v-if="html !== null" skin="mobile">
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <div v-html="html" />
+      </ArticleRenderer>
+
+      <SavePagesSheet v-model:open="saveSheetOpen" :flow="props.flow" />
+    </article>
+  </ChromeWrapper>
+</template>
+
+<style scoped>
+.nd-article {
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--spacing-150, 24px) var(--spacing-100, 16px) var(--spacing-100, 16px);
+  background-color: var(--background-color-base);
+  text-align: start;
+}
+
+.read-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-100, 16px);
+  padding: var(--spacing-150, 24px) var(--spacing-100, 16px);
+}
+</style>
diff --git a/src/prototypes/no-distractions/screens/SurveyScreen.vue b/src/prototypes/no-distractions/screens/SurveyScreen.vue
new file mode 100644
index 0000000..7dbae3d
--- /dev/null
+++ b/src/prototypes/no-distractions/screens/SurveyScreen.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { CdxButton, CdxIcon } from '@wikimedia/codex'
+import { cdxIconSuccess } from '@wikimedia/codex-icons'
+
+import OnboardingShell from '../components/OnboardingShell.vue'
+import type { FlowState, SurveyChoice } from '../data/useFlowState'
+
+const props = defineProps<{ flow: FlowState }>()
+
+const OPTIONS: { value: SurveyChoice; label: string }[] = [
+  { value: 'read', label: 'Read and explore' },
+  { value: 'edit', label: 'Edit and contribute' },
+  { value: 'both', label: 'A bit of both' },
+]
+
+const selected = computed(() => props.flow.survey.value)
+
+function choose(value: SurveyChoice): void {
+  props.flow.survey.value = value
+}
+</script>
+
+<template>
+  <OnboardingShell :current="1" flush-content>
+    <div class="ob-page">
+      <h1 class="ob-title">What would you like to do on Wikipedia?</h1>
+
+      <div class="ob-body">
+        <div
+          class="survey__options"
+          role="radiogroup"
+          aria-label="What would you like to do on Wikipedia?"
+        >
+          <button
+            v-for="option in OPTIONS"
+            :key="option.value"
+            type="button"
+            role="radio"
+            :aria-checked="selected === option.value"
+            class="survey__option"
+            :class="{ 'survey__option--selected': selected === option.value }"
+            @click="choose(option.value)"
+          >
+            <span v-if="selected === option.value" class="survey__indicator">
+              <CdxIcon :icon="cdxIconSuccess" />
+            </span>
+            <span v-else class="survey__radio" aria-hidden="true" />
+            <span class="survey__label">{{ option.label }}</span>
+          </button>
+        </div>
+
+        <div class="ob-actions">
+          <CdxButton weight="quiet" @click="props.flow.goTo('interests')">Skip</CdxButton>
+          <CdxButton
+            action="progressive"
+            weight="primary"
+            :disabled="!selected"
+            @click="props.flow.goTo('interests')"
+          >
+            Next
+          </CdxButton>
+        </div>
+      </div>
+    </div>
+  </OnboardingShell>
+</template>
+
+<style scoped>
+.survey__options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-75, 12px);
+}
+
+.survey__option {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-50, 8px);
+  width: 100%;
+  min-height: 2.75rem;
+  padding: var(--spacing-50, 8px) var(--spacing-75, 12px);
+  border: var(--border-width-base, 1px) solid var(--border-color-interactive, #72777d);
+  border-radius: var(--border-radius-pill, 9999px);
+  background-color: var(--background-color-base);
+  text-align: start;
+  cursor: pointer;
+}
+
+.survey__option--selected {
+  border-color: var(--color-progressive, #36c);
+  background-color: var(--background-color-progressive-subtle, #e8eeff);
+}
+
+.survey__radio {
+  flex-shrink: 0;
+  width: 1.125rem;
+  height: 1.125rem;
+  border: var(--border-width-base, 1px) solid var(--border-color-base, #a2a9b1);
+  border-radius: var(--border-radius-circle, 50%);
+  background-color: var(--background-color-base);
+}
+
+.survey__indicator {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--color-success, #177860);
+}
+
+.survey__indicator :deep(.cdx-icon) {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.survey__label {
+  font-size: var(--font-size-medium, 1rem);
+  line-height: var(--line-height-small, 1.375);
+  color: var(--color-base);
+}
+</style>
diff --git a/src/prototypes/no-distractions/screens/TrendingScreen.vue b/src/prototypes/no-distractions/screens/TrendingScreen.vue
new file mode 100644
index 0000000..e2d17ad
--- /dev/null
+++ b/src/prototypes/no-distractions/screens/TrendingScreen.vue
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { computed, nextTick } from 'vue'
+import { CdxIcon, CdxMessage, CdxProgressBar } from '@wikimedia/codex'
+import { cdxIconHelp, cdxIconHome } from '@wikimedia/codex-icons'
+
+import ChromeWrapper from '@/components/chrome/ChromeWrapper.vue'
+
+import AllSuggestionsStickyHead from '../components/AllSuggestionsStickyHead.vue'
+import FeaturedCard from '../components/FeaturedCard.vue'
+import { useTrendingPages } from '../data/useTrendingPages'
+import type { FlowState } from '../data/useFlowState'
+
+const props = defineProps<{ flow: FlowState }>()
+
+const { pages, loading, error } = useTrendingPages()
+
+const hasContent = computed(() => pages.value.length > 0)
+
+async function goHome() {
+  await props.flow.goTo('home')
+  await nextTick()
+  window.scrollTo({ top: 0, left: 0, behavior: 'instant' })
+}
+
+function goToInterests() {
+  void props.flow.goTo('interests', { returnTo: 'trending' })
+}
+
+function openArticle(title: string) {
+  void props.flow.goTo('read', { title })
+}
+</script>
+
+<template>
+  <ChromeWrapper skin="mobile" :last-edited-notice="false" :show-footer="false">
+    <div class="trending">
+      <AllSuggestionsStickyHead :flow="props.flow" @configure="goToInterests" />
+
+      <div class="trending__content">
+        <CdxProgressBar
+          v-if="loading && !hasContent"
+          inline
+          aria-label="Loading trending pages"
+        />
+
+        <CdxMessage v-else-if="error" type="error" :allow-user-dismiss="false">
+          {{ error }}
+        </CdxMessage>
+
+        <p v-else-if="!hasContent" class="trending__empty">
+          No trending pages available right now.
+        </p>
+
+        <div v-else class="trending__list">
+          <FeaturedCard
+            v-for="page in pages"
+            :key="page.articleTitle"
+            :title="page.title"
+            :body="page.viewsLabel"
+            :thumbnail-src="page.thumbnailSrc"
+            :article-title="page.articleTitle"
+            @open="openArticle"
+          />
+        </div>
+      </div>
+
+      <div class="trending__fab">
+        <button class="trending__fab-btn" type="button" aria-label="Home" @click="goHome">
+          <CdxIcon :icon="cdxIconHome" />
+        </button>
+        <button class="trending__fab-btn" type="button" aria-label="Help">
+          <CdxIcon :icon="cdxIconHelp" />
+        </button>
+      </div>
+    </div>
+  </ChromeWrapper>
+</template>
+
+<style scoped>
+.trending {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: calc(var(--spacing-100, 16px) + 3.75rem);
+}
+
+.trending__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-100, 16px);
+  padding: 0 var(--spacing-100, 16px) var(--spacing-100, 16px);
+}
+
+.trending__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-75, 12px);
+}
+
+.trending__empty {
+  margin: 0;
+  color: var(--color-subtle);
+}
+
+.trending__fab {
+  position: fixed;
+  right: var(--spacing-50, 8px);
+  bottom: 12px;
+  z-index: 10;
+  display: inline-flex;
+  gap: 0;
+  padding: var(--spacing-25, 4px);
+  border-radius: var(--border-radius-pill, 9999px);
+  background-color: var(--background-color-interactive, #eaecf0);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+}
+
+@media (min-width: 480px) {
+  .trending__fab {
+    right: calc((100vw - min(100vw, 412px)) / 2 + var(--spacing-50, 8px));
+  }
+}
+
+.trending__fab-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  padding: 0;
+  border: none;
+  border-radius: var(--border-radius-circle, 50%);
+  background: transparent;
+  color: var(--color-base);
+  cursor: pointer;
+}
+
+.trending__fab-btn :deep(.cdx-icon) {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+</style>
diff --git a/src/prototypes/no-distractions/screens/WelcomeScreen.vue b/src/prototypes/no-distractions/screens/WelcomeScreen.vue
new file mode 100644
index 0000000..073259d
--- /dev/null
+++ b/src/prototypes/no-distractions/screens/WelcomeScreen.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { CdxButton } from '@wikimedia/codex'
+
+import OnboardingShell from '../components/OnboardingShell.vue'
+import type { FlowState } from '../data/useFlowState'
+
+const props = defineProps<{ flow: FlowState }>()
+
+const WELCOME_HERO = `${import.meta.env.BASE_URL}images/no-distractions-welcome-hero.png`
+
+const greeting = computed(() => {
+  const name = props.flow.username.value
+  return name ? `Welcome to Wikipedia, ${name}!` : 'Welcome to Wikipedia!'
+})
+</script>
+
+<template>
+  <OnboardingShell :current="0" flush-content>
+    <div class="welcome">
+      <div class="welcome__header">
+        <h1 class="welcome__title">{{ greeting }}</h1>
+      </div>
+
+      <div class="welcome__body">
+        <div class="welcome__hero-wrap">
+          <img class="welcome__hero" :src="WELCOME_HERO" alt="" width="412" height="275" />
+        </div>
+
+        <div class="welcome__footer">
+          <div class="welcome__actions">
+            <CdxButton action="progressive" weight="primary" @click="props.flow.goTo('survey')">
+              Personalize your Home
+            </CdxButton>
+            <button type="button" class="ob-skip ob-skip--inverse" @click="props.flow.goTo('home')">
+              Not now
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </OnboardingShell>
+</template>
+
+<style scoped>
+.welcome {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 100%;
+}
+
+.welcome__header {
+  flex: 1 1 auto;
+  padding: var(--spacing-400, 64px) var(--spacing-100, 16px) var(--spacing-100, 16px);
+}
+
+.welcome__title {
+  margin: 0;
+  font-family: var(--font-family-serif);
+  font-size: var(--font-size-xxx-large, 2rem);
+  font-weight: var(--font-weight-normal, 400);
+  line-height: var(--line-height-xxx-large, 1.375);
+  color: var(--color-base);
+}
+
+.welcome__body {
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  gap: 0;
+  line-height: 0;
+}
+
+.welcome__hero-wrap {
+  overflow: hidden;
+  line-height: 0;
+  background-color: var(--background-color-base, #fff);
+  /* Pull the dark footer up over the hero’s bottom edge (anti-aliasing gap). */
+  margin-bottom: -2px;
+}
+
+.welcome__hero {
+  display: block;
+  width: 100%;
+  max-width: none;
+  height: 17.1875rem;
+  border: none;
+  object-fit: cover;
+  object-position: center bottom;
+  vertical-align: bottom;
+}
+
+.welcome__footer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-100, 16px);
+  position: relative;
+  z-index: 1;
+  margin-top: -2px;
+  padding: var(--spacing-100, 16px);
+  padding-bottom: max(var(--spacing-150, 24px), env(safe-area-inset-bottom));
+  background-color: #101418;
+}
+
+.welcome__actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-75, 12px);
+  padding-top: var(--spacing-100, 16px);
+}
+
+.welcome__actions :deep(.cdx-button),
+.welcome__actions .ob-skip {
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.welcome__actions :deep(.cdx-button) {
+  min-height: 3rem;
+  padding-block: var(--spacing-100, 16px);
+  font-size: var(--font-size-medium, 1rem);
+  font-weight: var(--font-weight-bold);
+}
+</style>
diff --git a/src/prototypes/template-homepage/InterestsSettingsPage.vue b/src/prototypes/template-homepage/InterestsSettingsPage.vue
new file mode 100644
index 0000000..7b77826
--- /dev/null
+++ b/src/prototypes/template-homepage/InterestsSettingsPage.vue
@@ -0,0 +1,336 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { CdxButton, CdxIcon, CdxLookup, CdxToggleSwitch, type MenuItemData } from '@wikimedia/codex'
+import { cdxIconClose, cdxIconSearch } from '@wikimedia/codex-icons'
+
+import { useConfig } from '@/composables/useConfig'
+import InterestsToggleChip from './InterestsToggleChip.vue'
+import { buildInterestsSuggestions } from './suggested-edits/data/interestsSearch'
+import {
+  addInterestsPage,
+  applyInterestsSuggestion,
+  useInterestsSettings,
+} from './suggested-edits/data/useInterestsSettings'
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const { user } = useConfig()
+const settings = useInterestsSettings()
+const isRealUser = computed(() => user.value === 'real')
+
+const watchlistEnabled = computed({
+  get: () => (isRealUser.value ? false : settings.value.personalization.watchlist),
+  set: (value: boolean) => {
+    if (!isRealUser.value) {
+      settings.value.personalization.watchlist = value
+    }
+  },
+})
+
+const readingListEnabled = computed({
+  get: () => (isRealUser.value ? false : settings.value.personalization.readingList),
+  set: (value: boolean) => {
+    if (!isRealUser.value) {
+      settings.value.personalization.readingList = value
+    }
+  },
+})
+
+const searchInput = ref('')
+const searchSelected = ref<string | null>(null)
+const menuItems = ref<MenuItemData[]>([])
+
+let abortController: AbortController | null = null
+let lastQuery = ''
+
+function onClose(): void {
+  emit('close')
+}
+
+function clearSearchInput(): void {
+  searchInput.value = ''
+  searchSelected.value = null
+  menuItems.value = []
+  lastQuery = ''
+}
+
+function onAddFromInput(): void {
+  const query = searchInput.value.trim()
+  if (!query.length) return
+
+  addInterestsPage(settings.value, query)
+  clearSearchInput()
+}
+
+async function onSearchInput(value: string): Promise<void> {
+  const trimmed = (value ?? '').trim()
+  lastQuery = trimmed
+
+  if (!trimmed.length) {
+    menuItems.value = []
+    return
+  }
+
+  abortController?.abort()
+  abortController = new AbortController()
+
+  try {
+    const suggestions = await buildInterestsSuggestions(trimmed, {
+      signal: abortController.signal,
+    })
+    if (lastQuery !== trimmed) return
+    menuItems.value = suggestions
+  } catch {
+    if (lastQuery === trimmed) {
+      menuItems.value = []
+    }
+  }
+}
+
+function onSuggestionSelected(value: string | number | null): void {
+  if (value === null) return
+
+  applyInterestsSuggestion(settings.value, value)
+  clearSearchInput()
+}
+
+watch(searchSelected, (value) => {
+  if (value !== null) {
+    onSuggestionSelected(value)
+  }
+})
+</script>
+
+<template>
+  <div
+    class="interests-settings-page"
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="interests-settings-title"
+  >
+    <header class="interests-settings-page__header">
+      <CdxButton
+        weight="quiet"
+        :icon-only="true"
+        aria-label="Close"
+        class="interests-settings-page__header-action"
+        @click="onClose"
+      >
+        <CdxIcon :icon="cdxIconClose" />
+      </CdxButton>
+
+      <h1 id="interests-settings-title" class="interests-settings-page__title">Interests</h1>
+
+      <CdxButton
+        action="progressive"
+        weight="primary"
+        class="interests-settings-page__done"
+        @click="onClose"
+      >
+        Done
+      </CdxButton>
+    </header>
+
+    <div class="interests-settings-page__body">
+      <div class="interests-settings-page__content">
+        <div class="interests-settings-page__search" @keydown.enter="onAddFromInput">
+          <CdxLookup
+            v-model:selected="searchSelected"
+            v-model:input-value="searchInput"
+            :menu-items="menuItems"
+            input-type="search"
+            :start-icon="cdxIconSearch"
+            placeholder="Add an interest"
+            class="interests-settings-page__lookup"
+            @input="onSearchInput"
+          >
+            <template #menu-item="{ menuItem }">
+              <span class="cdx-menu-item__content">
+                <span class="cdx-menu-item__text">
+                  <span class="cdx-menu-item__text__label"
+                    >{{ menuItem.label }}&nbsp;<span
+                      v-if="menuItem.supportingText"
+                      class="interests-settings-page__type-badge"
+                      >{{ menuItem.supportingText }}</span
+                    ></span
+                  >
+                  <span v-if="menuItem.description" class="cdx-menu-item__text__description">{{
+                    menuItem.description
+                  }}</span>
+                </span>
+              </span>
+            </template>
+          </CdxLookup>
+        </div>
+
+        <div class="interests-settings-page__chip-group" role="group" aria-label="Interests">
+          <InterestsToggleChip
+            v-for="chip in settings.chips"
+            :key="`${chip.kind}-${chip.id}`"
+            v-model="chip.selected"
+            :label="chip.label"
+          />
+        </div>
+
+        <div class="interests-settings-page__switch-list">
+          <div class="interests-settings-page__switch-row">
+            <CdxToggleSwitch v-model="settings.personalization.editingHistory" align-switch>
+              Show suggestions based on my editing history
+            </CdxToggleSwitch>
+          </div>
+          <div class="interests-settings-page__switch-row">
+            <CdxToggleSwitch
+              v-model="watchlistEnabled"
+              align-switch
+              :disabled="isRealUser"
+            >
+              Show suggestions based on my watchlist
+            </CdxToggleSwitch>
+          </div>
+          <div class="interests-settings-page__switch-row">
+            <CdxToggleSwitch
+              v-model="readingListEnabled"
+              align-switch
+              :disabled="isRealUser"
+            >
+              Show suggestions based on my reading list
+            </CdxToggleSwitch>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.interests-settings-page {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background-color: var(--background-color-base, #fff);
+  color: var(--color-base, #202122);
+}
+
+.interests-settings-page__header {
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: var(--spacing-50, 8px);
+  box-sizing: border-box;
+  padding-top: calc(env(safe-area-inset-top, 0px) + var(--spacing-50, 8px));
+  padding-bottom: var(--spacing-50, 8px);
+  padding-left: var(--spacing-50, 8px);
+  padding-right: 0;
+  border-bottom: 1px solid var(--border-color-base, #a2a9b1);
+}
+
+.interests-settings-page__header-action {
+  flex-shrink: 0;
+  width: auto;
+  margin-inline-start: calc(-1 * var(--spacing-25, 4px));
+}
+
+.interests-settings-page__title {
+  position: absolute;
+  left: 50%;
+  flex: none;
+  min-width: 0;
+  max-width: calc(100% - 8rem);
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  font-family: var(--font-family-system-sans, system-ui, sans-serif);
+  font-size: var(--font-size-medium, 1rem);
+  font-weight: var(--font-weight-bold, 700);
+  line-height: var(--line-height-medium, 1.375);
+  color: var(--color-base, #202122);
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  pointer-events: none;
+  transform: translateX(-50%);
+}
+
+.interests-settings-page__done {
+  flex-shrink: 0;
+  align-self: stretch;
+  margin-inline-start: auto;
+  margin-top: calc(-1 * var(--spacing-50, 8px));
+  margin-bottom: calc(-1 * var(--spacing-50, 8px));
+}
+
+.interests-settings-page__done:deep(.cdx-button) {
+  height: 100%;
+  border-radius: 0;
+}
+
+.interests-settings-page__body {
+  flex: 1;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.interests-settings-page__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-100, 16px);
+  padding: var(--spacing-100, 16px);
+}
+
+.interests-settings-page__search {
+  width: 100%;
+}
+
+.interests-settings-page__lookup {
+  width: 100%;
+}
+
+.interests-settings-page__lookup :deep(.cdx-text-input__input) {
+  min-height: 2.5rem;
+}
+
+.interests-settings-page__type-badge {
+  display: inline;
+  padding: 2px 5px;
+  border: 1px solid var(--border-color-base, #a2a9b1);
+  border-radius: 99999px;
+  font-size: var(--font-size-x-small, 0.75rem);
+  color: var(--color-subtle, #54595d);
+  vertical-align: 2px;
+  white-space: nowrap;
+  margin-left: 2px;
+}
+
+.interests-settings-page__chip-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-50, 8px);
+  padding-bottom: var(--spacing-150, 24px);
+}
+
+.interests-settings-page__switch-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-100, 16px);
+  padding-top: var(--spacing-150, 24px);
+  border-top: 1px solid var(--border-color-base, #a2a9b1);
+}
+
+.interests-settings-page__switch-row {
+  display: flex;
+  width: 100%;
+}
+
+.interests-settings-page__switch-row :deep(.cdx-toggle-switch) {
+  flex: 1;
+  margin-bottom: 0;
+}
+</style>
diff --git a/src/prototypes/template-homepage/InterestsToggleChip.vue b/src/prototypes/template-homepage/InterestsToggleChip.vue
new file mode 100644
index 0000000..2ef6cee
--- /dev/null
+++ b/src/prototypes/template-homepage/InterestsToggleChip.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { CdxIcon, CdxToggleButton } from '@wikimedia/codex'
+import { cdxIconCheck } from '@wikimedia/codex-icons'
+
+interface Props {
+  label: string
+}
+
+defineProps<Props>()
+
+const model = defineModel<boolean>({ default: false })
+</script>
+
+<template>
+  <CdxToggleButton v-model="model" class="interests-toggle-chip">
+    <span class="interests-toggle-chip__label">{{ label }}</span>
+    <CdxIcon
+      v-if="model"
+      :icon="cdxIconCheck"
+      size="small"
+      class="interests-toggle-chip__check"
+      aria-hidden="true"
+    />
+  </CdxToggleButton>
+</template>
+
+<style scoped>
+.interests-toggle-chip {
+  min-height: 2.5rem;
+  max-width: none;
+  padding: var(--spacing-25, 4px) 18px;
+  border-radius: 9999px;
+  font-weight: var(--font-weight-normal, 400);
+  gap: var(--spacing-25, 4px);
+}
+
+.interests-toggle-chip__label {
+  white-space: nowrap;
+}
+
+.interests-toggle-chip__check {
+  flex-shrink: 0;
+  color: var(--color-base, #202122);
+  margin-right: -12px;
+}
+
+.interests-toggle-chip.cdx-toggle-button--toggled-on .interests-toggle-chip__label {
+  margin-left: -8px;
+}
+
+/* Unselected — all states */
+.interests-toggle-chip.cdx-toggle-button--toggled-off,
+.interests-toggle-chip.cdx-toggle-button--toggled-off:hover,
+.interests-toggle-chip.cdx-toggle-button--toggled-off:active,
+.interests-toggle-chip.cdx-toggle-button--toggled-off.cdx-toggle-button--is-active {
+  background-color: var(--background-color-base, #fff);
+  border-color: var(--border-color-base, #a2a9b1);
+  color: var(--color-base, #202122);
+  box-shadow: none;
+}
+
+/* Selected — all states */
+.interests-toggle-chip.cdx-toggle-button--toggled-on,
+.interests-toggle-chip.cdx-toggle-button--toggled-on:hover,
+.interests-toggle-chip.cdx-toggle-button--toggled-on:focus,
+.interests-toggle-chip.cdx-toggle-button--toggled-on:active,
+.interests-toggle-chip.cdx-toggle-button--toggled-on.cdx-toggle-button--is-active {
+  background-color: var(--background-color-progressive-subtle, #eaf3ff);
+  border-color: var(--border-color-progressive, #36c);
+  color: var(--color-base, #202122);
+  box-shadow: none;
+}
+</style>
diff --git a/src/prototypes/template-homepage/SuggestedEditsView.vue b/src/prototypes/template-homepage/SuggestedEditsView.vue
index c545b2b..a085abd 100644
--- a/src/prototypes/template-homepage/SuggestedEditsView.vue
+++ b/src/prototypes/template-homepage/SuggestedEditsView.vue
@@ -52,7 +52,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   showFilterBar: false,
-  topicFilter: 'Music',
+  topicFilter: 'Interests',
   difficultyFilter: 'Easy, Medium',
   currentIndex: 0,
   totalCount: 1,
@@ -82,9 +82,9 @@ const emit = defineEmits<{
   load: []
   refresh: []
   navigate: [delta: number]
+  'open-interests': []
 }>()
 
-const topicMenuItems = computed(() => [{ value: 'music', label: props.topicFilter }])
 const difficultyMenuItems = computed(() => [{ value: 'mixed', label: props.difficultyFilter }])
 
 const displayIndex = computed(() => (props.currentIndex ?? 0) + 1)
@@ -122,6 +122,10 @@ function onRefreshClick(): void {
 function onNavigate(delta: number): void {
   emit('navigate', delta)
 }
+
+function onOpenInterests(): void {
+  emit('open-interests')
+}
 </script>
 
 <template>
@@ -134,12 +138,15 @@ function onNavigate(delta: number): void {
       >
         <div class="suggested-edits-view__filter">
           <CdxIcon :icon="cdxIconFunnel" size="small" class="suggested-edits-view__filter-icon" />
-          <CdxSelect
-            :selected="'music'"
-            :menu-items="topicMenuItems"
-            :default-label="topicFilter"
-            disabled
-          />
+          <button
+            type="button"
+            class="suggested-edits-view__filter-trigger"
+            :aria-label="`Topic filter: ${topicFilter}. Open interests settings.`"
+            @click="onOpenInterests"
+          >
+            <span class="suggested-edits-view__filter-trigger-label">{{ topicFilter }}</span>
+            <span class="suggested-edits-view__filter-trigger-indicator" aria-hidden="true" />
+          </button>
         </div>
         <div class="suggested-edits-view__filter">
           <CdxIcon :icon="cdxIconChart" size="small" class="suggested-edits-view__filter-icon" />
@@ -167,12 +174,12 @@ function onNavigate(delta: number): void {
         </CdxButton>
       </div>
 
-      <template v-else-if="emptyMessage">
+      <div v-else-if="emptyMessage" class="suggested-edits-view__empty-state">
         <p class="suggested-edits-view__empty">{{ emptyMessage }}</p>
         <CdxButton v-if="showRefresh" weight="quiet" :disabled="refreshing" @click="onRefreshClick">
-          {{ refreshing ? 'Loading…' : 'Try another page' }}
+          {{ refreshing ? 'Loading…' : 'Refresh' }}
         </CdxButton>
-      </template>
+      </div>
 
       <template v-else-if="hasPreview">
         <p class="suggested-edits-view__counter">
@@ -182,7 +189,24 @@ function onNavigate(delta: number): void {
           suggestions
         </p>
 
-        <article class="suggested-edits-view__card">
+        <component
+          :is="editHref ? 'a' : 'article'"
+          class="suggested-edits-view__card"
+          :class="{ 'suggested-edits-view__card--link': !!editHref }"
+          v-bind="
+            editHref
+              ? {
+                  href: editHref,
+                  target: '_blank',
+                  rel: 'noreferrer noopener',
+                  'aria-label': `Edit ${articleTitle}`,
+                  'aria-disabled': refreshing ? 'true' : undefined,
+                  tabindex: refreshing ? -1 : undefined,
+                }
+              : {}
+          "
+          @click="editHref && refreshing ? $event.preventDefault() : undefined"
+        >
           <div v-if="thumbnailSrc" class="suggested-edits-view__card-image-wrap">
             <img class="suggested-edits-view__card-image" :src="thumbnailSrc" alt="" />
           </div>
@@ -204,7 +228,7 @@ function onNavigate(delta: number): void {
               {{ pageviewsLabel }}
             </p>
           </div>
-        </article>
+        </component>
 
         <section v-if="taskTitle" class="suggested-edits-view__task">
           <p class="suggested-edits-view__task-heading">
@@ -359,6 +383,45 @@ function onNavigate(delta: number): void {
   color: var(--color-subtle, #72777d);
 }
 
+.suggested-edits-view__filter-trigger {
+  position: relative;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  height: 3rem;
+  padding: 0 var(--spacing-150, 24px) 0 0;
+  border: 0;
+  border-radius: 0;
+  background-color: transparent;
+  box-shadow: none;
+  color: var(--color-base--subtle, #54595d);
+  font-family: inherit;
+  font-size: var(--font-size-medium, 1rem);
+  font-weight: var(--font-weight-normal, 400);
+  text-align: start;
+  cursor: pointer;
+}
+
+.suggested-edits-view__filter-trigger-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.suggested-edits-view__filter-trigger-indicator {
+  position: absolute;
+  right: 0;
+  width: 0;
+  height: 0;
+  border-top: 5px solid var(--color-subtle, #72777d);
+  border-right: 5px solid transparent;
+  border-left: 5px solid transparent;
+}
+
 .suggested-edits-view__filter :deep(.cdx-select-vue) {
   flex: 1;
   width: 100%;
@@ -412,6 +475,19 @@ function onNavigate(delta: number): void {
   min-height: 40vh;
 }
 
+.suggested-edits-view__empty-state {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-100, 16px);
+  min-height: 40vh;
+  padding: var(--spacing-200, 32px) var(--spacing-150, 24px);
+  box-sizing: border-box;
+  text-align: center;
+}
+
 .suggested-edits-view__error {
   margin: 0;
   font-size: var(--font-size-small);
@@ -420,8 +496,9 @@ function onNavigate(delta: number): void {
 
 .suggested-edits-view__empty {
   margin: 0;
-  font-size: var(--font-size-small);
-  line-height: var(--line-height-small);
+  max-width: 20rem;
+  font-size: var(--font-size-medium, 1rem);
+  line-height: var(--line-height-medium, 1.375);
   color: var(--color-base--subtle, #54595d);
 }
 
@@ -440,6 +517,7 @@ function onNavigate(delta: number): void {
 
 .suggested-edits-view__card {
   box-sizing: border-box;
+  display: block;
   width: 100%;
   max-width: var(--suggested-edits-card-width, 17.5rem);
   margin-inline: auto;
@@ -450,6 +528,16 @@ function onNavigate(delta: number): void {
   overflow: hidden;
 }
 
+.suggested-edits-view__card--link {
+  color: inherit;
+  text-decoration: none;
+}
+
+.suggested-edits-view__card--link:focus-visible {
+  outline: 2px solid var(--border-color-progressive--focus, #36c);
+  outline-offset: 2px;
+}
+
 .suggested-edits-view__card-image-wrap {
   width: 100%;
   aspect-ratio: 5 / 4;
diff --git a/src/prototypes/template-homepage/impact/data/fetchUserImpact.ts b/src/prototypes/template-homepage/impact/data/fetchUserImpact.ts
index 5b5311c..e1a00c6 100644
--- a/src/prototypes/template-homepage/impact/data/fetchUserImpact.ts
+++ b/src/prototypes/template-homepage/impact/data/fetchUserImpact.ts
@@ -11,6 +11,7 @@
  * - "Most viewed" rows: top 3 articles by those view counts (not merely the 3 most recent edits).
  */
 import { normalizeWikiUsername, wikimediaApiFetchHeaders, wikiHostFromLang } from '@/config'
+import { formatRelativeTime, parseMediaWikiTimestamp } from '@/lib/mediaWikiTime'
 import type { ImpactData, ImpactMostViewedArticle } from './impactTypes'
 
 const METRICS_HOST = 'wikimedia.org'
@@ -67,16 +68,6 @@ function actionUrl(wikiHost: string, params: Record<string, string>): string {
   return `https://${wikiHost}/w/api.php?${search.toString()}`
 }
 
-/** Parse Action API timestamps (`2026-02-23T09:12:59Z` or `2013-07-31 11:54:03`). */
-function parseMediaWikiTimestamp(timestamp: string): Date {
-  const trimmed = timestamp.trim()
-  if (!trimmed.length) return new Date(Number.NaN)
-  if (trimmed.includes('T')) {
-    return new Date(trimmed.endsWith('Z') ? trimmed : `${trimmed}Z`)
-  }
-  return new Date(trimmed.replace(' ', 'T') + 'Z')
-}
-
 function toPageviewDateParam(date: Date): string {
   const y = date.getUTCFullYear()
   const m = String(date.getUTCMonth() + 1).padStart(2, '0')
@@ -95,26 +86,6 @@ function pageviewsArticleSlug(title: string): string {
   return encodeURIComponent(title.replace(/ /g, '_'))
 }
 
-function formatRelativeTime(isoTimestamp: string): string {
-  const then = parseMediaWikiTimestamp(isoTimestamp).getTime()
-  if (Number.isNaN(then)) return '—'
-  const diffMs = Date.now() - then
-  if (diffMs < 0) return 'just now'
-
-  const minutes = Math.floor(diffMs / (1000 * 60))
-  const hours = Math.floor(diffMs / (1000 * 60 * 60))
-  const days = Math.floor(diffMs / (1000 * 60 * 60 * 24))
-
-  if (minutes < 1) return 'just now'
-  if (minutes < 60) return minutes === 1 ? '1 minute ago' : `${minutes} minutes ago`
-  if (hours < 24) return hours === 1 ? '1 hour ago' : `${hours} hours ago`
-  if (days === 1) return '1 day ago'
-  if (days < 30) return `${days} days ago`
-  const months = Math.floor(days / 30)
-  if (months === 1) return '1 month ago'
-  return `${months} months ago`
-}
-
 function formatShortDate(date: Date): string {
   return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
 }
diff --git a/src/prototypes/template-homepage/index.vue b/src/prototypes/template-homepage/index.vue
index d348257..f866abe 100644
--- a/src/prototypes/template-homepage/index.vue
+++ b/src/prototypes/template-homepage/index.vue
@@ -19,15 +19,61 @@ import {
   MENTOR,
   MENTOR_PAGE,
   SUGGESTED_EDITS_PAGE,
-  STRUCTURED_TASKS,
 } from './dashpage-fixtures'
 import { useHomepageImpact } from './useHomepageImpact'
+import { useSuggestedEdits } from './suggested-edits/data/useSuggestedEdits'
 
 const { user, pageTitle } = useConfig()
 const { impactMobileProps, impactDesktopProps, onImpactRefresh } = useHomepageImpact()
 
+const {
+  currentIndex,
+  totalCount,
+  currentSuggestion,
+  loadPending,
+  loading,
+  hasStarted,
+} = useSuggestedEdits()
+
 const showLoggedInModules = computed(() => user.value !== 'logged-out')
 
+const structuredTasksProps = computed(() => {
+  const suggestion = currentSuggestion.value
+  const index = hasStarted.value && suggestion ? currentIndex.value + 1 : 1
+  const count = hasStarted.value && totalCount.value > 0 ? totalCount.value : 0
+
+  if (loadPending.value || loading.value) {
+    return {
+      currentIndex: index,
+      totalCount: count || 1,
+      articleTitle: loading.value ? 'Loading suggestions…' : 'Suggested edits',
+      articleDescription: 'Tap to load article suggestions based on your interests.',
+      thumbnailSrc: undefined,
+      taskTypeLabel: loading.value ? 'Loading…' : 'Get started',
+    }
+  }
+
+  if (!suggestion) {
+    return {
+      currentIndex: 1,
+      totalCount: 1,
+      articleTitle: 'Suggested edits',
+      articleDescription: 'Add interests or enable editing history to see suggestions.',
+      thumbnailSrc: undefined,
+      taskTypeLabel: 'Get started',
+    }
+  }
+
+  return {
+    currentIndex: index,
+    totalCount: count,
+    articleTitle: suggestion.articleTitle,
+    articleDescription: suggestion.articleShortDescription,
+    thumbnailSrc: suggestion.thumbnailSrc,
+    taskTypeLabel: suggestion.taskHeading,
+  }
+})
+
 definePage({
   meta: {
     title: 'Template: Homepage',
@@ -51,7 +97,7 @@ definePage({
             <StructuredTasksModule
               class="dashboard-slot--mobile-primary"
               :to="SUGGESTED_EDITS_PAGE"
-              v-bind="STRUCTURED_TASKS"
+              v-bind="structuredTasksProps"
             />
 
             <ImpactModule
@@ -79,7 +125,7 @@ definePage({
             <StructuredTasksModule
               class="dashboard-slot--desktop-primary"
               :to="APP_HOME"
-              v-bind="STRUCTURED_TASKS"
+              v-bind="structuredTasksProps"
             />
           </template>
 
diff --git a/src/prototypes/template-homepage/suggested-edits/data/buildSeedSources.ts b/src/prototypes/template-homepage/suggested-edits/data/buildSeedSources.ts
new file mode 100644
index 0000000..62e8b03
--- /dev/null
+++ b/src/prototypes/template-homepage/suggested-edits/data/buildSeedSources.ts
@@ -0,0 +1,140 @@
+import type { ConfigUser } from '@/config'
+import type { InterestsSettings } from './interestsFixtures'
+
+export type SeedSourceKind = 'interests' | 'history' | 'watchlist' | 'readingList'
+
+export interface SeedSource {
+  kind: SeedSourceKind
+  titles: string[]
+}
+
+export interface BuildSeedSourcesInput {
+  interestsSettings: InterestsSettings
+  user: ConfigUser
+  editedPages: string[]
+  watchlistPages: string[]
+  readingListPages: string[]
+}
+
+const MAX_SERIAL_SEEDS = 9
+
+function normalizeTitleKey(title: string): string {
+  return title.trim().replace(/_/g, ' ').toLowerCase()
+}
+
+function dedupeTitles(titles: string[]): string[] {
+  const seen = new Set<string>()
+  const result: string[] = []
+
+  for (const title of titles) {
+    const trimmed = title.trim()
+    if (!trimmed.length) continue
+    const key = normalizeTitleKey(trimmed)
+    if (seen.has(key)) continue
+    seen.add(key)
+    result.push(trimmed)
+  }
+
+  return result
+}
+
+/** Selected page chips only — topic chips are ignored for fetching. */
+export function getInterestPageTitles(settings: InterestsSettings): string[] {
+  return dedupeTitles(
+    settings.chips
+      .filter((chip) => chip.kind === 'page' && chip.selected)
+      .map((chip) => chip.label),
+  )
+}
+
+/** Build up to four seed sources from interests + personalization toggles. */
+export function buildSeedSources(input: BuildSeedSourcesInput): SeedSource[] {
+  const { interestsSettings, user, editedPages, watchlistPages, readingListPages } = input
+  const { personalization } = interestsSettings
+  const sources: SeedSource[] = []
+
+  const interestTitles = getInterestPageTitles(interestsSettings)
+  if (interestTitles.length) {
+    sources.push({ kind: 'interests', titles: interestTitles })
+  }
+
+  if (personalization.editingHistory && editedPages.length) {
+    sources.push({ kind: 'history', titles: dedupeTitles(editedPages) })
+  }
+
+  if (personalization.watchlist && user !== 'real' && watchlistPages.length) {
+    sources.push({ kind: 'watchlist', titles: dedupeTitles(watchlistPages) })
+  }
+
+  if (personalization.readingList && user !== 'real' && readingListPages.length) {
+    sources.push({ kind: 'readingList', titles: dedupeTitles(readingListPages) })
+  }
+
+  return sources
+}
+
+/** Flatten all seed titles from sources, deduped globally. */
+export function flattenSeedTitles(sources: SeedSource[]): string[] {
+  return dedupeTitles(sources.flatMap((source) => source.titles))
+}
+
+/** Whether any seed source has at least one title. */
+export function hasSeedTitles(sources: SeedSource[]): boolean {
+  return flattenSeedTitles(sources).length > 0
+}
+
+/**
+ * Sample up to 9 seeds evenly across enabled sources (round-robin).
+ * Used when serial multi-call mode has too many query pages.
+ */
+export function sampleSeedsForSerial(sources: SeedSource[], maxSeeds = MAX_SERIAL_SEEDS): string[] {
+  const nonEmpty = sources.filter((source) => source.titles.length > 0)
+  if (!nonEmpty.length) return []
+
+  const allTitles = flattenSeedTitles(nonEmpty)
+  if (allTitles.length <= maxSeeds) return allTitles
+
+  const picked: string[] = []
+  const pickedKeys = new Set<string>()
+  const indices = nonEmpty.map(() => 0)
+
+  while (picked.length < maxSeeds) {
+    let added = false
+
+    for (let sourceIndex = 0; sourceIndex < nonEmpty.length; sourceIndex += 1) {
+      if (picked.length >= maxSeeds) break
+
+      const source = nonEmpty[sourceIndex]
+      let index = indices[sourceIndex]
+
+      while (index < source.titles.length) {
+        const title = source.titles[index]
+        index += 1
+        indices[sourceIndex] = index
+
+        const key = normalizeTitleKey(title)
+        if (pickedKeys.has(key)) continue
+
+        pickedKeys.add(key)
+        picked.push(title)
+        added = true
+        break
+      }
+    }
+
+    if (!added) break
+  }
+
+  return picked
+}
+
+/** Per-seed result limit for serial mode: 9 seeds → 1 each; 2 seeds → 5 each. */
+export function serialLimitPerSeed(seedCount: number): number {
+  if (seedCount <= 0) return 1
+  return Math.min(5, Math.max(1, Math.ceil(9 / seedCount)))
+}
+
+/** Filter button label — always "Interests" (opens interests settings). */
+export function buildTopicFilterLabel(_settings: InterestsSettings): string {
+  return 'Interests'
+}
diff --git a/src/prototypes/template-homepage/suggested-edits/data/interestsFixtures.ts b/src/prototypes/template-homepage/suggested-edits/data/interestsFixtures.ts
new file mode 100644
index 0000000..95ebd24
--- /dev/null
+++ b/src/prototypes/template-homepage/suggested-edits/data/interestsFixtures.ts
@@ -0,0 +1,187 @@
+export type InterestsChipKind = 'page' | 'topic'
+
+export interface InterestsChipEntry {
+  id: string
+  label: string
+  selected: boolean
+  kind: InterestsChipKind
+  pinned?: boolean
+  categoryId?: string
+}
+
+export interface InterestsPersonalization {
+  editingHistory: boolean
+  watchlist: boolean
+  readingList: boolean
+}
+
+export interface InterestsSettings {
+  personalization: InterestsPersonalization
+  chips: InterestsChipEntry[]
+}
+
+export interface InterestsCatalogTopic {
+  id: string
+  label: string
+  categoryId: string
+  categoryLabel: string
+}
+
+export interface InterestsCatalogCategory {
+  id: string
+  label: string
+}
+
+export const MAX_INTEREST_CHIPS = 10
+
+export const TOPIC_CATEGORY_DEFINITIONS: InterestsCatalogCategory[] = [
+  { id: 'culture', label: 'Culture' },
+  { id: 'history-and-society', label: 'History and Society' },
+  { id: 'science-technology-math', label: 'Science, Technology, and Math' },
+  { id: 'regions', label: 'Regions' },
+]
+
+const TOPIC_LABELS_BY_CATEGORY: Record<string, string[]> = {
+  culture: [
+    'Architecture',
+    'Art',
+    'Fashion',
+    'Entertainment',
+    'Comics & anime',
+    'Literature',
+    'Music',
+    'Sports',
+    'TV/Film',
+    'Video games',
+  ],
+  'history-and-society': [
+    'Biography (all)',
+    'Biography (women)',
+    'Business & economics',
+    'Education',
+    'Food & drink',
+    'Military & warfare',
+    'History',
+    'Philosophy & religion',
+    'Politics & government',
+    'Society',
+    'Transportation',
+  ],
+  'science-technology-math': [
+    'Biology',
+    'Computers & internet',
+    'Chemistry',
+    'Earth & environment',
+    'Engineering',
+    'General science',
+    'Mathematics',
+    'Medicine & health',
+    'Physics',
+    'Technology',
+  ],
+  regions: [
+    'Africa',
+    'Asia',
+    'Central America',
+    'Europe',
+    'North America',
+    'Oceania',
+    'South America',
+  ],
+}
+
+/** Starter chips shown on first join (all unticked). */
+export const STARTER_TOPIC_CHIP_IDS = [
+  // 'culture:art',
+  // 'culture:music',
+  // 'history-and-society:history',
+  // 'culture:sports',
+  // 'science-technology-math:technology',
+] as const
+
+export function slugifyInterestsLabel(label: string): string {
+  return label
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-|-$/g, '')
+}
+
+export function chipKey(kind: InterestsChipKind, id: string): string {
+  return `${kind}:${id}`
+}
+
+export function buildTopicCatalog(): InterestsCatalogTopic[] {
+  const catalog: InterestsCatalogTopic[] = []
+
+  for (const category of TOPIC_CATEGORY_DEFINITIONS) {
+    for (const label of TOPIC_LABELS_BY_CATEGORY[category.id] ?? []) {
+      catalog.push({
+        id: `${category.id}:${slugifyInterestsLabel(label)}`,
+        label,
+        categoryId: category.id,
+        categoryLabel: category.label,
+      })
+    }
+  }
+
+  return catalog
+}
+
+export const INTERESTS_TOPIC_CATALOG = buildTopicCatalog()
+
+function pageChip(id: string, label: string, selected: boolean): InterestsChipEntry {
+  return { id, label, selected, kind: 'page' }
+}
+
+function topicChipFromCatalog(entry: InterestsCatalogTopic, selected = false): InterestsChipEntry {
+  return {
+    id: entry.id,
+    label: entry.label,
+    selected,
+    kind: 'topic',
+    categoryId: entry.categoryId,
+  }
+}
+
+function buildDefaultTopicChips(): InterestsChipEntry[] {
+  const byId = new Map(INTERESTS_TOPIC_CATALOG.map((entry) => [entry.id, entry]))
+  return STARTER_TOPIC_CHIP_IDS.map((id) => {
+    const entry = byId.get(id)
+    if (!entry) {
+      throw new Error(`Missing starter topic: ${id}`)
+    }
+    return topicChipFromCatalog(entry, false)
+  })
+}
+
+function buildDefaultChips(): InterestsChipEntry[] {
+  return [
+    // pageChip('gorillaz', 'Gorillaz', true),
+    // pageChip('dsei', 'DSEI', true),
+    // pageChip('wet-leg', 'Wet Leg', false),
+    // pageChip('dada', 'Dada', false),
+    // pageChip('surrealism', 'Surrealism', false),
+    ...buildDefaultTopicChips(),
+  ]
+}
+
+export const DEFAULT_INTERESTS_SETTINGS: InterestsSettings = {
+  personalization: {
+    editingHistory: true,
+    watchlist: true,
+    readingList: true,
+  },
+  chips: buildDefaultChips(),
+}
+
+export function getCatalogTopicById(topicId: string): InterestsCatalogTopic | undefined {
+  return INTERESTS_TOPIC_CATALOG.find((entry) => entry.id === topicId)
+}
+
+export function getCatalogCategoryById(categoryId: string): InterestsCatalogCategory | undefined {
+  return TOPIC_CATEGORY_DEFINITIONS.find((entry) => entry.id === categoryId)
+}
+
+export function getCatalogTopicsForCategory(categoryId: string): InterestsCatalogTopic[] {
+  return INTERESTS_TOPIC_CATALOG.filter((entry) => entry.categoryId === categoryId)
+}
diff --git a/src/prototypes/template-homepage/suggested-edits/data/interestsSearch.ts b/src/prototypes/template-homepage/suggested-edits/data/interestsSearch.ts
new file mode 100644
index 0000000..acd2cfe
--- /dev/null
+++ b/src/prototypes/template-homepage/suggested-edits/data/interestsSearch.ts
@@ -0,0 +1,133 @@
+import type { MenuItemData } from '@wikimedia/codex'
+
+import { wikimediaApiFetchHeaders, wikiHostFromLang } from '@/config'
+
+import { INTERESTS_TOPIC_CATALOG, type InterestsCatalogTopic } from './interestsFixtures'
+import { encodeInterestsSuggestion } from './useInterestsSettings'
+
+const PAGE_SUGGESTION_LIMIT = 5
+const STATIC_SUGGESTION_LIMIT = 5
+const MERGED_RESULT_LIMIT = 10
+
+class SearchFetchError extends Error {
+  constructor(
+    message: string,
+    public readonly code: 'aborted' | 'http',
+  ) {
+    super(message)
+    this.name = 'SearchFetchError'
+  }
+}
+
+interface PageSuggestion {
+  title: string
+  description: string
+}
+
+async function fetchPageSuggestions(
+  query: string,
+  options: { signal?: AbortSignal; lang?: string; limit?: number },
+): Promise<PageSuggestion[]> {
+  const trimmed = query.trim()
+  if (!trimmed.length) return []
+
+  if (options.signal?.aborted) {
+    throw new SearchFetchError('Request aborted', 'aborted')
+  }
+
+  const wikiHost = wikiHostFromLang(options.lang ?? 'en')
+  const limit = options.limit ?? PAGE_SUGGESTION_LIMIT
+
+  const params = new URLSearchParams({
+    q: trimmed,
+    limit: String(limit),
+  })
+
+  const response = await fetch(
+    `https://${wikiHost}/w/rest.php/v1/search/title?${params.toString()}`,
+    {
+      signal: options.signal,
+      headers: wikimediaApiFetchHeaders('interests-search'),
+    },
+  )
+
+  if (!response.ok) {
+    throw new SearchFetchError(`HTTP ${response.status}`, 'http')
+  }
+
+  const data = (await response.json()) as { pages: { title: string; description?: string }[] }
+  return (data.pages ?? []).map((p) => ({
+    title: p.title,
+    description: p.description ?? '',
+  }))
+}
+
+function filterCatalogTopics(query: string): InterestsCatalogTopic[] {
+  const trimmed = query.trim().toLowerCase()
+  if (!trimmed.length) return []
+
+  return INTERESTS_TOPIC_CATALOG.filter((entry) =>
+    entry.label.toLowerCase().includes(trimmed),
+  ).slice(0, STATIC_SUGGESTION_LIMIT)
+}
+
+function scoreMatch(label: string, query: string): number {
+  const l = label.toLowerCase()
+  const q = query.toLowerCase()
+  if (l === q) return 100
+  if (l.startsWith(q)) return 90 - Math.min(l.length - q.length, 20)
+  if (l.split(/\s+/).some((w) => w.startsWith(q))) return 60
+  if (l.includes(q)) return 30
+  return 0
+}
+
+export async function buildInterestsSuggestions(
+  query: string,
+  options: { signal?: AbortSignal; lang?: string } = {},
+): Promise<MenuItemData[]> {
+  const trimmed = query.trim()
+  if (!trimmed.length) return []
+
+  type ScoredItem = MenuItemData & { _score: number }
+  const scored: ScoredItem[] = []
+
+  const topics = filterCatalogTopics(trimmed)
+  for (const topic of topics) {
+    scored.push({
+      value: encodeInterestsSuggestion('topic', { topicId: topic.id }),
+      label: topic.label,
+      supportingText: 'Topic',
+      description: topic.categoryLabel,
+      _score: scoreMatch(topic.label, trimmed),
+    })
+  }
+
+  try {
+    const pages = await fetchPageSuggestions(trimmed, {
+      signal: options.signal,
+      lang: options.lang,
+      limit: PAGE_SUGGESTION_LIMIT,
+    })
+
+    pages.forEach((page, index) => {
+      scored.push({
+        value: encodeInterestsSuggestion('page', { pageTitle: page.title }),
+        label: page.title,
+        supportingText: 'Page',
+        description: page.description || undefined,
+        _score: scoreMatch(page.title, trimmed) || (PAGE_SUGGESTION_LIMIT - index),
+      })
+    })
+  } catch (err) {
+    if (
+      (err as Error).name === 'AbortError' ||
+      (err instanceof SearchFetchError && err.code === 'aborted')
+    ) {
+      // return whatever static results we have so far
+    }
+  }
+
+  scored.sort((a, b) => b._score - a._score)
+
+  return scored.slice(0, MERGED_RESULT_LIMIT).map(({ _score: _, ...item }) => item)
+}
diff --git a/src/prototypes/template-homepage/suggested-edits/data/microtaskCatalog.ts b/src/prototypes/template-homepage/suggested-edits/data/microtaskCatalog.ts
new file mode 100644
index 0000000..86d716e
--- /dev/null
+++ b/src/prototypes/template-homepage/suggested-edits/data/microtaskCatalog.ts
@@ -0,0 +1,151 @@
+import type { SuggestionDescriptionPart } from './veSuggestions'
+
+export interface MicrotaskDefinition {
+  id: string
+  /** Label from Microtask Generator about page. */
+  need: string
+  /** Shorter heading for the suggestion card UI. */
+  heading: string
+  descriptionParts: SuggestionDescriptionPart[]
+  difficulty: 'easy' | 'medium' | 'hard'
+  timeEstimate: string
+}
+
+/** Task pool from https://microtask-generator.toolforge.org/about.html */
+export const MICROTASK_CATALOG: MicrotaskDefinition[] = [
+  {
+    id: 'references',
+    need: 'Add more references',
+    heading: 'Find references',
+    descriptionParts: [
+      {
+        kind: 'text',
+        text: 'Add a reliable source to support an unsourced claim in this article.',
+      },
+    ],
+    difficulty: 'easy',
+    timeEstimate: '3–5 minutes',
+  },
+  {
+    id: 'wikilinks',
+    need: 'Add more internal wikilinks',
+    heading: 'Add links',
+    descriptionParts: [
+      {
+        kind: 'text',
+        text: 'Link key terms to other Wikipedia articles so readers can explore related topics.',
+      },
+    ],
+    difficulty: 'easy',
+    timeEstimate: '3–5 minutes',
+  },
+  {
+    id: 'headings',
+    need: 'Improve article section headings',
+    heading: 'Improve headings',
+    descriptionParts: [
+      {
+        kind: 'text',
+        text: 'Add or clarify section headings so the article is easier to scan.',
+      },
+    ],
+    difficulty: 'easy',
+    timeEstimate: '5–10 minutes',
+  },
+  {
+    id: 'images',
+    need: 'Add images or other media',
+    heading: 'Add images',
+    descriptionParts: [
+      {
+        kind: 'text',
+        text: 'Find a freely licensed image or other media file to illustrate this article.',
+      },
+    ],
+    difficulty: 'easy',
+    timeEstimate: '5–10 minutes',
+  },
+  {
+    id: 'infobox',
+    need: 'Add an infobox',
+    heading: 'Add an infobox',
+    descriptionParts: [
+      {
+        kind: 'text',
+        text: 'Add an infobox template with key facts about the subject.',
+      },
+    ],
+    difficulty: 'medium',
+    timeEstimate: '10–15 minutes',
+  },
+  {
+    id: 'categories',
+    need: 'Add more relevant categories',
+    heading: 'Add categories',
+    descriptionParts: [
+      {
+        kind: 'text',
+        text: 'Assign Wikipedia categories so this article appears in the right topic areas.',
+      },
+    ],
+    difficulty: 'easy',
+    timeEstimate: '3–5 minutes',
+  },
+  {
+    id: 'expand',
+    need: 'Expand the content',
+    heading: 'Expand article',
+    descriptionParts: [
+      {
+        kind: 'text',
+        text: 'Add well-sourced information to make this article more complete.',
+      },
+    ],
+    difficulty: 'medium',
+    timeEstimate: '15–30 minutes',
+  },
+  {
+    id: 'maintenance',
+    need: 'Check maintenance message',
+    heading: 'Fix maintenance issue',
+    descriptionParts: [
+      {
+        kind: 'text',
+        text: 'Review the maintenance banner on this article and address the flagged issue.',
+      },
+    ],
+    difficulty: 'medium',
+    timeEstimate: '10–20 minutes',
+  },
+]
+
+const NEED_TO_TASK = new Map(MICROTASK_CATALOG.map((task) => [task.need.toLowerCase(), task]))
+
+export function getMicrotaskByNeed(need: string): MicrotaskDefinition | undefined {
+  return NEED_TO_TASK.get(need.trim().toLowerCase())
+}
+
+/** Stable pseudo-random index from article title (consistent across refreshes). */
+function hashTitle(title: string): number {
+  let hash = 0
+  for (let index = 0; index < title.length; index += 1) {
+    hash = (hash * 31 + title.charCodeAt(index)) >>> 0
+  }
+  return hash
+}
+
+export function pickRandomMicrotaskForTitle(title: string): MicrotaskDefinition {
+  const index = hashTitle(title) % MICROTASK_CATALOG.length
+  return MICROTASK_CATALOG[index]
+}
+
+export function pickMicrotaskForTitle(
+  title: string,
+  need?: string | null,
+): MicrotaskDefinition {
+  if (need) {
+    const matched = getMicrotaskByNeed(need)
+    if (matched) return matched
+  }
+  return pickRandomMicrotaskForTitle(title)
+}
diff --git a/src/prototypes/template-homepage/suggested-edits/data/useInterestsSettings.ts b/src/prototypes/template-homepage/suggested-edits/data/useInterestsSettings.ts
new file mode 100644
index 0000000..742f0bf
--- /dev/null
+++ b/src/prototypes/template-homepage/suggested-edits/data/useInterestsSettings.ts
@@ -0,0 +1,471 @@
+import { ref, watch, type Ref } from 'vue'
+
+import {
+  DEFAULT_INTERESTS_SETTINGS,
+  MAX_INTEREST_CHIPS,
+  chipKey,
+  getCatalogTopicById,
+  getCatalogTopicsForCategory,
+  slugifyInterestsLabel,
+  type InterestsChipEntry,
+  type InterestsChipKind,
+  type InterestsPersonalization,
+  type InterestsSettings,
+} from './interestsFixtures'
+
+const STORAGE_KEY_V2 = 'protowiki-template-homepage-interests-v2'
+const STORAGE_KEY_V1 = 'protowiki-template-homepage-interests-v1'
+
+export type InterestsSuggestionKind = 'page' | 'topic' | 'category'
+
+export interface ParsedInterestsSuggestion {
+  kind: InterestsSuggestionKind
+  pageTitle?: string
+  topicId?: string
+  categoryId?: string
+}
+
+function isBoolean(value: unknown): value is boolean {
+  return typeof value === 'boolean'
+}
+
+function isChipEntry(value: unknown): value is InterestsChipEntry {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    typeof (value as InterestsChipEntry).id === 'string' &&
+    typeof (value as InterestsChipEntry).label === 'string' &&
+    isBoolean((value as InterestsChipEntry).selected) &&
+    ((value as InterestsChipEntry).kind === 'page' || (value as InterestsChipEntry).kind === 'topic')
+  )
+}
+
+function mergePersonalization(stored: unknown): InterestsPersonalization {
+  const defaults = DEFAULT_INTERESTS_SETTINGS.personalization
+  if (typeof stored !== 'object' || stored === null) {
+    return { ...defaults }
+  }
+
+  const record = stored as Record<string, unknown>
+  return {
+    editingHistory: isBoolean(record.editingHistory)
+      ? record.editingHistory
+      : defaults.editingHistory,
+    watchlist: isBoolean(record.watchlist) ? record.watchlist : defaults.watchlist,
+    readingList: isBoolean(record.readingList) ? record.readingList : defaults.readingList,
+  }
+}
+
+function labelsMatch(a: string, b: string): boolean {
+  return a.localeCompare(b, undefined, { sensitivity: 'accent' }) === 0
+}
+
+function withoutLegacyAccountPageChip(chips: InterestsChipEntry[]): InterestsChipEntry[] {
+  return chips.filter((chip) => !(chip.kind === 'page' && chip.id === 'wikipedia'))
+}
+
+export function pruneInterestChips(chips: InterestsChipEntry[]): InterestsChipEntry[] {
+  let pruned = withoutLegacyAccountPageChip(chips)
+
+  while (pruned.length > MAX_INTEREST_CHIPS) {
+    let removed = false
+    for (let index = pruned.length - 1; index >= 0; index -= 1) {
+      const chip = pruned[index]
+      if (chip.kind !== 'topic') continue
+      if (chip.selected) continue
+      pruned.splice(index, 1)
+      removed = true
+      break
+    }
+    if (!removed) break
+  }
+
+  return pruned
+}
+
+function moveChipToTop(chips: InterestsChipEntry[], key: string): InterestsChipEntry[] {
+  const index = chips.findIndex((chip) => chipKey(chip.kind, chip.id) === key)
+  if (index < 0) return chips
+
+  const [chip] = chips.splice(index, 1)
+  chips.splice(0, 0, chip)
+  return chips
+}
+
+function mergeChipWithDefaults(storedChip: InterestsChipEntry): InterestsChipEntry {
+  const defaultChip = DEFAULT_INTERESTS_SETTINGS.chips.find(
+    (entry) => entry.kind === storedChip.kind && entry.id === storedChip.id,
+  )
+  if (!defaultChip) return { ...storedChip }
+
+  return {
+    ...defaultChip,
+    ...storedChip,
+    kind: defaultChip.kind,
+  }
+}
+
+/** Preserve stored chip order (most-recent-first); only append missing fixture defaults at the end. */
+function mergeChips(stored: unknown): InterestsChipEntry[] {
+  if (!Array.isArray(stored)) return [...DEFAULT_INTERESTS_SETTINGS.chips]
+
+  // Empty array is intentional (user cleared all interests).
+  if (stored.length === 0) return []
+
+  const validStored = stored.filter(isChipEntry)
+  if (validStored.length === 0) return [...DEFAULT_INTERESTS_SETTINGS.chips]
+
+  const storedKeys = new Set(validStored.map((chip) => chipKey(chip.kind, chip.id)))
+  const ordered = validStored.map(mergeChipWithDefaults)
+
+  for (const defaultChip of DEFAULT_INTERESTS_SETTINGS.chips) {
+    const key = chipKey(defaultChip.kind, defaultChip.id)
+    if (!storedKeys.has(key)) {
+      ordered.push({ ...defaultChip })
+    }
+  }
+
+  return pruneInterestChips(ordered)
+}
+
+function chipsFromLegacyV2(raw: Record<string, unknown>): InterestsChipEntry[] {
+  const chips: InterestsChipEntry[] = []
+
+  const pages = raw.pages
+  if (Array.isArray(pages)) {
+    for (const page of pages) {
+      if (typeof page !== 'object' || page === null) continue
+      const id = (page as { id?: string }).id
+      const label = (page as { label?: string }).label
+      const selected = (page as { selected?: boolean }).selected
+      const pinned = (page as { pinned?: boolean }).pinned
+      if (!id || !label || !isBoolean(selected)) continue
+      chips.push({ id, label, selected, kind: 'page', pinned })
+    }
+  }
+
+  const topicChips = raw.topicChips
+  if (Array.isArray(topicChips)) {
+    for (const topic of topicChips) {
+      if (typeof topic !== 'object' || topic === null) continue
+      const id = (topic as { id?: string }).id
+      const label = (topic as { label?: string }).label
+      const selected = (topic as { selected?: boolean }).selected
+      const categoryId = (topic as { categoryId?: string }).categoryId
+      if (!id || !label || !isBoolean(selected) || !categoryId) continue
+      chips.push({ id, label, selected, kind: 'topic', categoryId })
+    }
+  }
+
+  return chips.length ? mergeChips(chips) : [...DEFAULT_INTERESTS_SETTINGS.chips]
+}
+
+export function normalizeInterestsSettings(raw: unknown): InterestsSettings {
+  const defaults = DEFAULT_INTERESTS_SETTINGS
+
+  if (typeof raw !== 'object' || raw === null) {
+    return structuredClone(defaults)
+  }
+
+  const candidate = raw as Record<string, unknown> & Partial<InterestsSettings>
+
+  const chips = Array.isArray(candidate.chips)
+    ? mergeChips(candidate.chips)
+    : chipsFromLegacyV2(candidate)
+
+  return {
+    personalization: mergePersonalization(candidate.personalization),
+    chips,
+  }
+}
+
+function clearStoredKey(key: string): void {
+  if (typeof window === 'undefined') return
+
+  try {
+    window.localStorage.removeItem(key)
+  } catch {
+    // Private mode or blocked storage — ignore.
+  }
+}
+
+function migrateV1ToV2(): InterestsSettings | null {
+  if (typeof window === 'undefined') return null
+
+  try {
+    const stored = window.localStorage.getItem(STORAGE_KEY_V1)
+    if (!stored) return null
+
+    const parsed = JSON.parse(stored) as Record<string, unknown>
+    const chips = [...DEFAULT_INTERESTS_SETTINGS.chips]
+    const chipsByKey = new Map(chips.map((chip) => [chipKey(chip.kind, chip.id), chip]))
+
+    const pages = parsed.pages
+    if (Array.isArray(pages)) {
+      for (const page of pages) {
+        if (typeof page !== 'object' || page === null) continue
+        const id = (page as { id?: string }).id
+        const label = (page as { label?: string }).label
+        const selected = (page as { selected?: boolean }).selected
+        const pinned = (page as { pinned?: boolean }).pinned
+        if (!id || !label || !isBoolean(selected)) continue
+
+        const key = chipKey('page', id)
+        const existing = chipsByKey.get(key)
+        if (existing) {
+          existing.selected = selected
+          continue
+        }
+
+        const chip: InterestsChipEntry = { id, label, selected, kind: 'page', pinned }
+        chips.push(chip)
+        chipsByKey.set(key, chip)
+      }
+    }
+
+    const topicCategories = parsed.topicCategories
+    if (Array.isArray(topicCategories)) {
+      for (const category of topicCategories) {
+        if (typeof category !== 'object' || category === null) continue
+        const categoryId = (category as { id?: string }).id
+        const topics = (category as { topics?: unknown[] }).topics
+        if (!categoryId || !Array.isArray(topics)) continue
+
+        for (const topic of topics) {
+          if (typeof topic !== 'object' || topic === null) continue
+          const topicId = (topic as { id?: string }).id
+          const label = (topic as { label?: string }).label
+          const selected = (topic as { selected?: boolean }).selected
+          if (!topicId || !label || !selected) continue
+
+          const fullId = `${categoryId}:${topicId}`
+          const key = chipKey('topic', fullId)
+          const existing = chipsByKey.get(key)
+          if (existing) {
+            existing.selected = true
+            continue
+          }
+
+          const catalogEntry = getCatalogTopicById(fullId)
+          const chip: InterestsChipEntry = {
+            id: fullId,
+            label: catalogEntry?.label ?? label,
+            selected: true,
+            kind: 'topic',
+            categoryId,
+          }
+          chips.push(chip)
+          chipsByKey.set(key, chip)
+        }
+      }
+    }
+
+    clearStoredKey(STORAGE_KEY_V1)
+    return normalizeInterestsSettings({
+      personalization: parsed.personalization,
+      chips,
+    })
+  } catch {
+    clearStoredKey(STORAGE_KEY_V1)
+    return null
+  }
+}
+
+export function loadInterestsSettings(): InterestsSettings {
+  if (typeof window === 'undefined') {
+    return structuredClone(DEFAULT_INTERESTS_SETTINGS)
+  }
+
+  try {
+    const migrated = migrateV1ToV2()
+    if (migrated) {
+      saveInterestsSettings(migrated)
+      return migrated
+    }
+
+    const stored = window.localStorage.getItem(STORAGE_KEY_V2)
+    if (!stored) return structuredClone(DEFAULT_INTERESTS_SETTINGS)
+
+    const parsed = JSON.parse(stored)
+    const normalized = normalizeInterestsSettings(parsed)
+
+    if (JSON.stringify(normalized) !== JSON.stringify(parsed)) {
+      saveInterestsSettings(normalized)
+    }
+
+    return normalized
+  } catch {
+    clearStoredKey(STORAGE_KEY_V2)
+    return structuredClone(DEFAULT_INTERESTS_SETTINGS)
+  }
+}
+
+export function saveInterestsSettings(settings: InterestsSettings): void {
+  if (typeof window === 'undefined') return
+
+  const normalized = normalizeInterestsSettings({
+    ...settings,
+    chips: pruneInterestChips(settings.chips),
+  })
+
+  try {
+    window.localStorage.setItem(STORAGE_KEY_V2, JSON.stringify(normalized))
+  } catch {
+    // Quota or private-mode failures — ignore.
+  }
+}
+
+export function encodeInterestsSuggestion(
+  kind: InterestsSuggestionKind,
+  payload: { pageTitle?: string; topicId?: string; categoryId?: string },
+): string {
+  if (kind === 'page' && payload.pageTitle) {
+    return `page:${encodeURIComponent(payload.pageTitle)}`
+  }
+  if (kind === 'topic' && payload.topicId) {
+    return `topic:${payload.topicId}`
+  }
+  if (kind === 'category' && payload.categoryId) {
+    return `category:${payload.categoryId}`
+  }
+  return ''
+}
+
+export function parseInterestsSuggestion(value: string | number | null): ParsedInterestsSuggestion | null {
+  if (value === null || value === undefined) return null
+  const raw = String(value)
+
+  if (raw.startsWith('page:')) {
+    const pageTitle = decodeURIComponent(raw.slice('page:'.length))
+    return pageTitle.length ? { kind: 'page', pageTitle } : null
+  }
+
+  if (raw.startsWith('topic:')) {
+    const topicId = raw.slice('topic:'.length)
+    return topicId.length ? { kind: 'topic', topicId } : null
+  }
+
+  if (raw.startsWith('category:')) {
+    const categoryId = raw.slice('category:'.length)
+    return categoryId.length ? { kind: 'category', categoryId } : null
+  }
+
+  return null
+}
+
+function upsertChip(
+  settings: InterestsSettings,
+  chip: InterestsChipEntry,
+  selected = true,
+): void {
+  const key = chipKey(chip.kind, chip.id)
+  const existing = settings.chips.find((entry) => chipKey(entry.kind, entry.id) === key)
+
+  if (existing) {
+    existing.selected = selected
+    settings.chips = pruneInterestChips(moveChipToTop(settings.chips, key))
+    return
+  }
+
+  settings.chips.splice(0, 0, { ...chip, selected })
+  settings.chips = pruneInterestChips(settings.chips)
+}
+
+export function addInterestsPage(settings: InterestsSettings, label: string): void {
+  const trimmed = label.trim()
+  if (!trimmed.length) return
+
+  const existing = settings.chips.find(
+    (chip) => chip.kind === 'page' && labelsMatch(chip.label, trimmed),
+  )
+  if (existing) {
+    upsertChip(settings, existing, true)
+    return
+  }
+
+  const id = slugifyInterestsLabel(trimmed)
+  if (!id.length) return
+
+  upsertChip(settings, { id, label: trimmed, selected: true, kind: 'page' }, true)
+}
+
+export function addInterestsTopic(settings: InterestsSettings, topicId: string, selected = true): void {
+  const catalogEntry = getCatalogTopicById(topicId)
+  if (!catalogEntry) return
+
+  upsertChip(
+    settings,
+    {
+      id: catalogEntry.id,
+      label: catalogEntry.label,
+      selected,
+      kind: 'topic',
+      categoryId: catalogEntry.categoryId,
+    },
+    selected,
+  )
+}
+
+export function addInterestsCategory(settings: InterestsSettings, categoryId: string): void {
+  const topics = getCatalogTopicsForCategory(categoryId)
+  for (let index = topics.length - 1; index >= 0; index -= 1) {
+    const catalogEntry = topics[index]
+    upsertChip(
+      settings,
+      {
+        id: catalogEntry.id,
+        label: catalogEntry.label,
+        selected: true,
+        kind: 'topic',
+        categoryId: catalogEntry.categoryId,
+      },
+      true,
+    )
+  }
+}
+
+export function applyInterestsSuggestion(
+  settings: InterestsSettings,
+  value: string | number | null,
+): void {
+  const parsed = parseInterestsSuggestion(value)
+  if (!parsed) return
+
+  if (parsed.kind === 'page' && parsed.pageTitle) {
+    addInterestsPage(settings, parsed.pageTitle)
+    return
+  }
+
+  if (parsed.kind === 'topic' && parsed.topicId) {
+    addInterestsTopic(settings, parsed.topicId, true)
+    return
+  }
+
+  if (parsed.kind === 'category' && parsed.categoryId) {
+    addInterestsCategory(settings, parsed.categoryId)
+  }
+}
+
+/** Remove all interest chips; personalization toggles are unchanged. */
+export function clearAllInterests(settings: InterestsSettings): void {
+  settings.chips = []
+}
+
+/** Module-level singleton so homepage, drill-down, and overlay share interests state. */
+let sharedInterestsSettings: Ref<InterestsSettings> | null = null
+
+export function useInterestsSettings(): Ref<InterestsSettings> {
+  if (!sharedInterestsSettings) {
+    sharedInterestsSettings = ref(loadInterestsSettings())
+
+    watch(
+      sharedInterestsSettings,
+      (value) => {
+        saveInterestsSettings(value)
+      },
+      { deep: true },
+    )
+  }
+
+  return sharedInterestsSettings
+}
diff --git a/src/prototypes/template-homepage/suggested-edits/data/useSuggestedEdits.ts b/src/prototypes/template-homepage/suggested-edits/data/useSuggestedEdits.ts
new file mode 100644
index 0000000..cb2565d
--- /dev/null
+++ b/src/prototypes/template-homepage/suggested-edits/data/useSuggestedEdits.ts
@@ -0,0 +1,387 @@
+import { computed, ref, watch, type ComputedRef, type Ref } from 'vue'
+
+import { useConfig } from '@/composables/useConfig'
+import {
+  usePrototypeDevSettings,
+  type MorelikeStrategy,
+} from '@/composables/usePrototypeDevSettings'
+import {
+  fetchMorelikeForSingleSeed,
+  fetchMorelikeResults,
+  MorelikeFetchError,
+  normalizeTitleKey,
+  type MorelikeSearchHit,
+} from '@/lib/fetchMorelike'
+import {
+  fetchMicrotaskQuality,
+  pickPrimaryNeed,
+} from '@/lib/fetchMicrotaskQuality'
+import {
+  fetchUserEditedPageTitles,
+  FetchUserEditedPageTitlesError,
+} from '@/lib/fetchUserEditedPageTitles'
+import {
+  DEFAULT_MLT_CUSTOM,
+  OPENING_TEXT_MLT_CUSTOM,
+  type MorelikeMltPreset,
+} from '@/lib/morelikeMlt'
+
+import {
+  buildSeedSources,
+  buildTopicFilterLabel,
+  flattenSeedTitles,
+  hasSeedTitles,
+  sampleSeedsForSerial,
+  serialLimitPerSeed,
+} from './buildSeedSources'
+import { pickMicrotaskForTitle } from './microtaskCatalog'
+import { useInterestsSettings } from './useInterestsSettings'
+import type { SuggestionDescriptionPart } from './veSuggestions'
+
+export interface StructuredSuggestion {
+  articleTitle: string
+  articleShortDescription: string
+  thumbnailSrc?: string
+  pageviewsLabel?: string
+  taskHeading: string
+  taskDifficulty: 'easy' | 'medium' | 'hard'
+  taskTimeEstimate: string
+  taskDescriptionParts: SuggestionDescriptionPart[]
+}
+
+interface SuggestedEditsState {
+  suggestions: Ref<StructuredSuggestion[]>
+  currentIndex: Ref<number>
+  loading: Ref<boolean>
+  error: Ref<string | null>
+  hasStarted: Ref<boolean>
+  topicFilter: ComputedRef<string>
+  totalCount: ComputedRef<number>
+  loadPending: ComputedRef<boolean>
+  showRefresh: ComputedRef<boolean>
+  emptyMessage: ComputedRef<string | null>
+  currentSuggestion: ComputedRef<StructuredSuggestion | null>
+  onLoad: () => void
+  onRefresh: () => void
+  onNavigate: (delta: number) => void
+}
+
+let sharedState: SuggestedEditsState | null = null
+
+function resolveMltForStrategy(strategy: MorelikeStrategy): {
+  preset: MorelikeMltPreset
+  custom: typeof DEFAULT_MLT_CUSTOM
+} {
+  if (strategy === 'opening_text') {
+    return { preset: 'custom', custom: OPENING_TEXT_MLT_CUSTOM }
+  }
+  return { preset: 'default', custom: DEFAULT_MLT_CUSTOM }
+}
+
+function mapHitToSuggestion(
+  hit: MorelikeSearchHit,
+  need?: string | null,
+): StructuredSuggestion {
+  const task = pickMicrotaskForTitle(hit.title, need)
+
+  return {
+    articleTitle: hit.title,
+    articleShortDescription: hit.description || 'No short description available.',
+    thumbnailSrc: hit.thumbnail?.url,
+    taskHeading: task.heading,
+    taskDifficulty: task.difficulty,
+    taskTimeEstimate: task.timeEstimate,
+    taskDescriptionParts: task.descriptionParts,
+  }
+}
+
+async function resolveEditedPages(
+  user: string,
+  realUsername: string,
+  configuredPages: string[],
+  lang: string,
+  signal?: AbortSignal,
+): Promise<string[]> {
+  if (user !== 'real') return configuredPages
+
+  const username = realUsername.trim()
+  if (!username.length) return []
+
+  if (configuredPages.length) return configuredPages
+
+  try {
+    return await fetchUserEditedPageTitles(realUsername, { lang, signal })
+  } catch (error) {
+    if (error instanceof FetchUserEditedPageTitlesError && error.code === 'no_edits') {
+      return []
+    }
+    throw error
+  }
+}
+
+async function fetchMorelikeHits(
+  strategy: MorelikeStrategy,
+  seedTitles: string[],
+  lang: string,
+  allSeedKeys: Set<string>,
+  signal?: AbortSignal,
+): Promise<MorelikeSearchHit[]> {
+  const { preset, custom } = resolveMltForStrategy(strategy)
+
+  if (strategy === 'serial') {
+    const seeds = seedTitles
+    const limitPerSeed = serialLimitPerSeed(seeds.length)
+    const merged: MorelikeSearchHit[] = []
+    const seen = new Set<string>()
+
+    for (const seed of seeds) {
+      if (signal?.aborted) {
+        throw new MorelikeFetchError('Request aborted', 'aborted')
+      }
+
+      const hits = await fetchMorelikeForSingleSeed(seed, {
+        limit: limitPerSeed,
+        mltPreset: preset,
+        mltCustom: custom,
+        lang,
+        signal,
+      })
+
+      for (const hit of hits) {
+        const key = normalizeTitleKey(hit.title)
+        if (seen.has(key) || allSeedKeys.has(key)) continue
+        seen.add(key)
+        merged.push(hit)
+      }
+    }
+
+    return merged
+  }
+
+  const hits = await fetchMorelikeResults(seedTitles, {
+    limit: 20,
+    mltPreset: preset,
+    mltCustom: custom,
+    lang,
+    signal,
+  })
+
+  return hits.filter((hit) => !allSeedKeys.has(normalizeTitleKey(hit.title)))
+}
+
+async function assignMicrotasks(
+  hits: MorelikeSearchHit[],
+  microtaskSource: 'random' | 'quality-check',
+  lang: string,
+  signal?: AbortSignal,
+): Promise<StructuredSuggestion[]> {
+  if (microtaskSource === 'random' || !hits.length) {
+    return hits.map((hit) => mapHitToSuggestion(hit))
+  }
+
+  try {
+    const qualityResults = await fetchMicrotaskQuality(
+      hits.map((hit) => hit.title),
+      { lang, signal },
+    )
+    const needByTitle = new Map(
+      qualityResults.map((result) => [normalizeTitleKey(result.title), pickPrimaryNeed(result)]),
+    )
+
+    return hits.map((hit) =>
+      mapHitToSuggestion(hit, needByTitle.get(normalizeTitleKey(hit.title)) ?? null),
+    )
+  } catch {
+    return hits.map((hit) => mapHitToSuggestion(hit))
+  }
+}
+
+function createSuggestedEditsState(): SuggestedEditsState {
+  const interestsSettings = useInterestsSettings()
+  const { morelikeStrategy, microtaskSource, settings: devSettings } = usePrototypeDevSettings()
+  const { user, realUsername, lang, currentUserPageLists } = useConfig()
+
+  const suggestions = ref<StructuredSuggestion[]>([])
+  const currentIndex = ref(0)
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+  const hasStarted = ref(false)
+
+  let abortController: AbortController | null = null
+  let debounceTimer: ReturnType<typeof setTimeout> | null = null
+
+  const topicFilter = computed(() => buildTopicFilterLabel(interestsSettings.value))
+  const totalCount = computed(() => suggestions.value.length)
+  const loadPending = computed(() => !hasStarted.value && suggestions.value.length === 0)
+  const showRefresh = computed(() => hasStarted.value)
+  const currentSuggestion = computed(() => suggestions.value[currentIndex.value] ?? null)
+
+  const emptyMessage = computed((): string | null => {
+    if (loading.value) return null
+    if (error.value) return null
+
+    if (user.value === 'real' && !realUsername.value.trim()) {
+      return 'Set a username in prototype settings to use editing history.'
+    }
+
+    if (hasStarted.value && suggestions.value.length === 0) {
+      const sources = buildSeedSources({
+        interestsSettings: interestsSettings.value,
+        user: user.value,
+        editedPages: currentUserPageLists.value.editedPages,
+        watchlistPages: currentUserPageLists.value.watchlist,
+        readingListPages: currentUserPageLists.value.readingList,
+      })
+
+      if (!hasSeedTitles(sources)) {
+        return 'Add page interests or enable editing history to get suggestions.'
+      }
+
+      return 'No similar articles found — try different interests.'
+    }
+
+    return null
+  })
+
+  async function runFetch(): Promise<void> {
+    abortController?.abort()
+    abortController = new AbortController()
+    const signal = abortController.signal
+
+    loading.value = true
+    error.value = null
+
+    try {
+      if (user.value === 'real' && !realUsername.value.trim()) {
+        suggestions.value = []
+        currentIndex.value = 0
+        return
+      }
+
+      const editedPages = await resolveEditedPages(
+        user.value,
+        realUsername.value,
+        currentUserPageLists.value.editedPages,
+        lang.value,
+        signal,
+      )
+
+      const sources = buildSeedSources({
+        interestsSettings: interestsSettings.value,
+        user: user.value,
+        editedPages,
+        watchlistPages: currentUserPageLists.value.watchlist,
+        readingListPages: currentUserPageLists.value.readingList,
+      })
+
+      if (!hasSeedTitles(sources)) {
+        suggestions.value = []
+        currentIndex.value = 0
+        return
+      }
+
+      let seedTitles = flattenSeedTitles(sources)
+      const allSeedKeys = new Set(seedTitles.map(normalizeTitleKey))
+
+      if (devSettings.value.morelikeStrategy === 'serial' && seedTitles.length > 9) {
+        seedTitles = sampleSeedsForSerial(sources)
+      }
+
+      const hits = await fetchMorelikeHits(
+        devSettings.value.morelikeStrategy,
+        seedTitles,
+        lang.value,
+        allSeedKeys,
+        signal,
+      )
+
+      suggestions.value = await assignMicrotasks(
+        hits,
+        devSettings.value.microtaskSource,
+        lang.value,
+        signal,
+      )
+      currentIndex.value = 0
+    } catch (fetchError) {
+      if (fetchError instanceof MorelikeFetchError && fetchError.code === 'aborted') {
+        return
+      }
+      if (fetchError instanceof FetchUserEditedPageTitlesError && fetchError.code === 'aborted') {
+        return
+      }
+
+      const message =
+        fetchError instanceof Error ? fetchError.message : 'Could not load suggestions.'
+      error.value = message
+      suggestions.value = []
+      currentIndex.value = 0
+    } finally {
+      if (!signal.aborted) {
+        loading.value = false
+        hasStarted.value = true
+      }
+    }
+  }
+
+  function scheduleRefetch(): void {
+    if (!hasStarted.value) return
+
+    if (debounceTimer) clearTimeout(debounceTimer)
+    debounceTimer = setTimeout(() => {
+      void runFetch()
+    }, 400)
+  }
+
+  watch(
+    [
+      interestsSettings,
+      () => user.value,
+      () => realUsername.value,
+      () => lang.value,
+      () => currentUserPageLists.value.editedPages.join('\0'),
+      () => currentUserPageLists.value.watchlist.join('\0'),
+      () => currentUserPageLists.value.readingList.join('\0'),
+      () => devSettings.value.morelikeStrategy,
+      () => devSettings.value.microtaskSource,
+    ],
+    scheduleRefetch,
+  )
+
+  function onLoad(): void {
+    void runFetch()
+  }
+
+  function onRefresh(): void {
+    void runFetch()
+  }
+
+  function onNavigate(delta: number): void {
+    const next = currentIndex.value + delta
+    if (next < 0 || next >= suggestions.value.length) return
+    currentIndex.value = next
+  }
+
+  return {
+    suggestions,
+    currentIndex,
+    loading,
+    error,
+    hasStarted,
+    topicFilter,
+    totalCount,
+    loadPending,
+    showRefresh,
+    emptyMessage,
+    currentSuggestion,
+    onLoad,
+    onRefresh,
+    onNavigate,
+  }
+}
+
+export function useSuggestedEdits(): SuggestedEditsState {
+  if (!sharedState) {
+    sharedState = createSuggestedEditsState()
+  }
+  return sharedState
+}
diff --git a/src/prototypes/template-homepage/suggested-edits/index.vue b/src/prototypes/template-homepage/suggested-edits/index.vue
index 46c828b..8e7ab75 100644
--- a/src/prototypes/template-homepage/suggested-edits/index.vue
+++ b/src/prototypes/template-homepage/suggested-edits/index.vue
@@ -1,93 +1,82 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+import { CdxButton, CdxIcon } from '@wikimedia/codex'
+import { cdxIconReload } from '@wikimedia/codex-icons'
 
+import InterestsSettingsPage from '../InterestsSettingsPage.vue'
 import TaskFullscreenShell from '../TaskFullscreenShell.vue'
 import SpecialPageWrapper from '@/components/SpecialPageWrapper.vue'
 import MobileWrapper from '@/components/MobileWrapper.vue'
 import MobileSubpageHeader from '../MobileSubpageHeader.vue'
 import SuggestedEditsView from '../SuggestedEditsView.vue'
-import type { SuggestionDescriptionPart } from './data/veSuggestions'
+import { useConfig } from '@/composables/useConfig'
+import { wikiEditUrlFromLang } from '@/config'
+import { useSuggestedEdits } from './data/useSuggestedEdits'
 import { HOMEPAGE } from '../dashpage-fixtures'
 
-interface StructuredTaskPlaceholder {
-  articleTitle: string
-  articleShortDescription: string
-  thumbnailSrc?: string
-  pageviewsLabel: string
-  taskHeading: string
-  taskDifficulty: 'easy' | 'medium' | 'hard'
-  taskTimeEstimate: string
-  taskDescriptionParts: SuggestionDescriptionPart[]
+const showInterests = ref(false)
+const { lang } = useConfig()
+
+const {
+  currentIndex,
+  totalCount,
+  topicFilter,
+  currentSuggestion,
+  loadPending,
+  showRefresh,
+  loading,
+  error,
+  emptyMessage,
+  onLoad,
+  onRefresh,
+  onNavigate,
+} = useSuggestedEdits()
+
+const viewProps = computed(() => {
+  const suggestion = currentSuggestion.value
+
+  return {
+    showFilterBar: true,
+    topicFilter: topicFilter.value,
+    difficultyFilter: 'Easy, Medium',
+    currentIndex: currentIndex.value,
+    totalCount: totalCount.value || 1,
+    articleTitle: suggestion?.articleTitle,
+    articleShortDescription: suggestion?.articleShortDescription,
+    thumbnailSrc: suggestion?.thumbnailSrc,
+    pageviewsLabel: suggestion?.pageviewsLabel,
+    taskHeading: suggestion?.taskHeading,
+    taskDifficulty: suggestion?.taskDifficulty,
+    taskTimeEstimate: suggestion?.taskTimeEstimate,
+    taskDescriptionParts: suggestion?.taskDescriptionParts,
+    showSnippet: false,
+    editHref: suggestion?.articleTitle
+      ? wikiEditUrlFromLang(lang.value, suggestion.articleTitle)
+      : undefined,
+    loadPending: loadPending.value,
+    showRefresh: showRefresh.value,
+    refreshing: loading.value,
+    refreshError: error.value,
+    emptyMessage: emptyMessage.value,
+    canGoPrev: currentIndex.value > 0,
+    canGoNext: currentIndex.value < totalCount.value - 1,
+  }
+})
+
+function onOpenInterests(): void {
+  showInterests.value = true
 }
 
-const placeholders: StructuredTaskPlaceholder[] = [
-  {
-    articleTitle: 'Full circle ringing',
-    articleShortDescription: 'Method of hanging (church) bells and ringing them in circles.',
-    thumbnailSrc:
-      'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/St_Botolph%27s_Bell_Ringing.webm/120px--St_Botolph%27s_Bell_Ringing.webm.jpg',
-    pageviewsLabel: '258 visits (past 60 days)',
-    taskHeading: 'Find references',
-    taskDifficulty: 'easy',
-    taskTimeEstimate: '3-5 minutes',
-    taskDescriptionParts: [
-      { kind: 'text', text: 'Add a reliable source to support an unsourced claim.' },
-    ],
-  },
-  {
-    articleTitle: 'Tomislav Labudović',
-    articleShortDescription: 'Tomislav Labudović is a Croatian footballer who plays as a central defender.',
-    thumbnailSrc:
-      'https://upload.wikimedia.org/wikipedia/commons/d/d2/Tomislav_Labudovi%C4%87_Persiba_Balikpapan_26.jpg',
-    pageviewsLabel: '88 visits (past 60 days)',
-    taskHeading: 'Revise tone',
-    taskDifficulty: 'easy',
-    taskTimeEstimate: '5-10 minutes',
-    taskDescriptionParts: [
-      { kind: 'text', text: 'Make articles more factual by removing promotional words' },
-    ],
-  },
-  {
-    articleTitle: 'Seguida',
-    articleShortDescription:
-      'Seguida is a Latin Rock Group from New York., who were winners of the 1976 Latin NY Magazine "Best La',
-    pageviewsLabel: '72 visits (past 60 days)',
-    taskHeading: 'Revise tone',
-    taskDifficulty: 'easy',
-    taskTimeEstimate: '5-10 minutes',
-    taskDescriptionParts: [
-      { kind: 'text', text: 'Make articles more factual by removing promotional words' },
-    ],
-  },
-]
-
-const currentIndex = ref(0)
-const current = computed(() => placeholders[currentIndex.value] ?? placeholders[0])
-
-const viewProps = computed(() => ({
-  showFilterBar: true,
-  topicFilter: 'Music',
-  difficultyFilter: 'Easy, Medium',
-  currentIndex: currentIndex.value,
-  totalCount: 401983,
-  articleTitle: current.value.articleTitle,
-  articleShortDescription: current.value.articleShortDescription,
-  thumbnailSrc: current.value.thumbnailSrc,
-  pageviewsLabel: current.value.pageviewsLabel,
-  taskHeading: current.value.taskHeading,
-  taskDifficulty: current.value.taskDifficulty,
-  taskTimeEstimate: current.value.taskTimeEstimate,
-  taskDescriptionParts: current.value.taskDescriptionParts,
-  showSnippet: false,
-  editHref: '#',
-  canGoPrev: currentIndex.value > 0,
-  canGoNext: currentIndex.value < placeholders.length - 1,
-}))
-
-function onSuggestionNavigate(delta: number): void {
-  const next = currentIndex.value + delta
-  if (next < 0 || next >= placeholders.length) return
-  currentIndex.value = next
+function onCloseInterests(): void {
+  showInterests.value = false
+}
+
+function onRefreshClick(): void {
+  if (loadPending.value) {
+    onLoad()
+  } else {
+    onRefresh()
+  }
 }
 
 definePage({
@@ -108,12 +97,32 @@ definePage({
             :back-to="HOMEPAGE"
             back-label="Back to homepage"
             :bleed="false"
-          />
+          >
+            <template #actions>
+              <CdxButton
+                weight="quiet"
+                :icon-only="true"
+                aria-label="Refresh suggestions"
+                :disabled="loading"
+                @click="onRefreshClick"
+              >
+                <CdxIcon :icon="cdxIconReload" />
+              </CdxButton>
+            </template>
+          </MobileSubpageHeader>
         </div>
 
         <SpecialPageWrapper :title="null" class="suggested-edits-page">
-          <SuggestedEditsView v-bind="viewProps" @navigate="onSuggestionNavigate" />
+          <SuggestedEditsView
+            v-bind="viewProps"
+            @load="onLoad"
+            @refresh="onRefresh"
+            @navigate="onNavigate"
+            @open-interests="onOpenInterests"
+          />
         </SpecialPageWrapper>
+
+        <InterestsSettingsPage v-if="showInterests" @close="onCloseInterests" />
       </div>
     </TaskFullscreenShell>
   </MobileWrapper>
@@ -121,6 +130,7 @@ definePage({
 
 <style scoped>
 .suggested-edits-layout {
+  position: relative;
   display: flex;
   flex: 1;
   flex-direction: column;