From f5a802d651db90cc414dd23eab741e2e55d15074 Mon Sep 17 00:00:00 2001
From: Lu Wilson <lu@todepond.com>
Date: Tue, 9 Jun 2026 18:07:55 +0100
Subject: [PATCH 1/5] interest picker

---
 .../InterestsSettingsPage.vue                 | 302 +++++++++++
 .../template-homepage/InterestsToggleChip.vue |  68 +++
 .../template-homepage/SuggestedEditsView.vue  |  62 ++-
 .../suggested-edits/data/interestsFixtures.ts | 187 +++++++
 .../suggested-edits/data/interestsSearch.ts   | 133 +++++
 .../data/useInterestsSettings.ts              | 471 ++++++++++++++++++
 .../suggested-edits/index.vue                 |  20 +-
 7 files changed, 1234 insertions(+), 9 deletions(-)
 create mode 100644 src/prototypes/template-homepage/InterestsSettingsPage.vue
 create mode 100644 src/prototypes/template-homepage/InterestsToggleChip.vue
 create mode 100644 src/prototypes/template-homepage/suggested-edits/data/interestsFixtures.ts
 create mode 100644 src/prototypes/template-homepage/suggested-edits/data/interestsSearch.ts
 create mode 100644 src/prototypes/template-homepage/suggested-edits/data/useInterestsSettings.ts

diff --git a/src/prototypes/template-homepage/InterestsSettingsPage.vue b/src/prototypes/template-homepage/InterestsSettingsPage.vue
new file mode 100644
index 0000000..d3ea020
--- /dev/null
+++ b/src/prototypes/template-homepage/InterestsSettingsPage.vue
@@ -0,0 +1,302 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { CdxButton, CdxIcon, CdxLookup, CdxToggleSwitch, type MenuItemData } from '@wikimedia/codex'
+import { cdxIconClose, cdxIconSearch } from '@wikimedia/codex-icons'
+
+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 settings = useInterestsSettings()
+
+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="settings.personalization.watchlist" align-switch>
+              Show suggestions based on my watchlist
+            </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..a9113ae
--- /dev/null
+++ b/src/prototypes/template-homepage/InterestsToggleChip.vue
@@ -0,0 +1,68 @@
+<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) var(--spacing-100, 16px);
+  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);
+}
+
+/* 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..9e0c95c 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" />
@@ -359,6 +366,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%;
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..72c690c
--- /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
+}
+
+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 ACCOUNT_CREATION_PAGE = 'Wikipedia'
+export const MAX_INTEREST_CHIPS = 8
+
+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:music',
+  'history-and-society:biography-all',
+  'history-and-society:history',
+  'science-technology-math:general-science',
+  'culture:sports',
+] 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, pinned = false): InterestsChipEntry {
+  return { id, label, selected, kind: 'page', pinned }
+}
+
+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('wikipedia', ACCOUNT_CREATION_PAGE, true, true),
+    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,
+  },
+  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/useInterestsSettings.ts b/src/prototypes/template-homepage/suggested-edits/data/useInterestsSettings.ts
new file mode 100644
index 0000000..6fbadaa
--- /dev/null
+++ b/src/prototypes/template-homepage/suggested-edits/data/useInterestsSettings.ts
@@ -0,0 +1,471 @@
+import { ref, watch, type Ref } from 'vue'
+
+import {
+  ACCOUNT_CREATION_PAGE,
+  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 isPersonalization(value: unknown): value is InterestsPersonalization {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    isBoolean((value as InterestsPersonalization).editingHistory) &&
+    isBoolean((value as InterestsPersonalization).watchlist)
+  )
+}
+
+function labelsMatch(a: string, b: string): boolean {
+  return a.localeCompare(b, undefined, { sensitivity: 'accent' }) === 0
+}
+
+function ensurePinnedAccountPage(chips: InterestsChipEntry[]): InterestsChipEntry[] {
+  const pinnedIndex = chips.findIndex((chip) => chip.kind === 'page' && (chip.pinned || chip.id === 'wikipedia'))
+  const pinned: InterestsChipEntry =
+    pinnedIndex >= 0
+      ? {
+          ...chips[pinnedIndex],
+          kind: 'page',
+          pinned: true,
+          label: chips[pinnedIndex].label || ACCOUNT_CREATION_PAGE,
+        }
+      : {
+          id: 'wikipedia',
+          label: ACCOUNT_CREATION_PAGE,
+          selected: true,
+          kind: 'page',
+          pinned: true,
+        }
+
+  const rest = chips.filter((_, index) => index !== pinnedIndex)
+  return [pinned, ...rest]
+}
+
+export function pruneInterestChips(chips: InterestsChipEntry[]): InterestsChipEntry[] {
+  let pruned = ensurePinnedAccountPage(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 insertIndexForNewChip(chips: InterestsChipEntry[]): number {
+  const pinnedIndex = chips.findIndex((chip) => chip.pinned)
+  return pinnedIndex >= 0 ? pinnedIndex + 1 : 0
+}
+
+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)
+  const insertAt = chip.pinned ? 0 : insertIndexForNewChip(chips)
+  chips.splice(insertAt, 0, chip)
+  return chips
+}
+
+function mergeChips(stored: unknown): InterestsChipEntry[] {
+  if (!Array.isArray(stored)) return [...DEFAULT_INTERESTS_SETTINGS.chips]
+
+  const validStored = stored.filter(isChipEntry)
+  if (validStored.length === 0) return [...DEFAULT_INTERESTS_SETTINGS.chips]
+
+  const defaultKeys = new Set(DEFAULT_INTERESTS_SETTINGS.chips.map((chip) => chipKey(chip.kind, chip.id)))
+  const mergedDefaults = DEFAULT_INTERESTS_SETTINGS.chips.map((defaultChip) => {
+    const storedChip = validStored.find(
+      (chip) => chip.kind === defaultChip.kind && chip.id === defaultChip.id,
+    )
+    return storedChip
+      ? {
+          ...defaultChip,
+          ...storedChip,
+          kind: defaultChip.kind,
+          pinned: defaultChip.pinned ?? storedChip.pinned,
+        }
+      : defaultChip
+  })
+
+  const customChips = validStored.filter((chip) => !defaultKeys.has(chipKey(chip.kind, chip.id)))
+  return pruneInterestChips([...mergedDefaults, ...customChips])
+}
+
+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: isPersonalization(candidate.personalization)
+      ? candidate.personalization
+      : { ...defaults.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
+  }
+
+  const insertAt = chip.pinned ? 0 : insertIndexForNewChip(settings.chips)
+  settings.chips.splice(insertAt, 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)
+  }
+}
+
+export function useInterestsSettings(): Ref<InterestsSettings> {
+  const settings = ref<InterestsSettings>(loadInterestsSettings())
+
+  watch(
+    settings,
+    (value) => {
+      saveInterestsSettings(value)
+    },
+    { deep: true },
+  )
+
+  return settings
+}
diff --git a/src/prototypes/template-homepage/suggested-edits/index.vue b/src/prototypes/template-homepage/suggested-edits/index.vue
index 46c828b..3baae4a 100644
--- a/src/prototypes/template-homepage/suggested-edits/index.vue
+++ b/src/prototypes/template-homepage/suggested-edits/index.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 
+import InterestsSettingsPage from '../InterestsSettingsPage.vue'
+
 import TaskFullscreenShell from '../TaskFullscreenShell.vue'
 import SpecialPageWrapper from '@/components/SpecialPageWrapper.vue'
 import MobileWrapper from '@/components/MobileWrapper.vue'
@@ -62,6 +64,7 @@ const placeholders: StructuredTaskPlaceholder[] = [
 ]
 
 const currentIndex = ref(0)
+const showInterests = ref(false)
 const current = computed(() => placeholders[currentIndex.value] ?? placeholders[0])
 
 const viewProps = computed(() => ({
@@ -90,6 +93,14 @@ function onSuggestionNavigate(delta: number): void {
   currentIndex.value = next
 }
 
+function onOpenInterests(): void {
+  showInterests.value = true
+}
+
+function onCloseInterests(): void {
+  showInterests.value = false
+}
+
 definePage({
   meta: {
     title: 'Template: Homepage — Suggested edits',
@@ -112,8 +123,14 @@ definePage({
         </div>
 
         <SpecialPageWrapper :title="null" class="suggested-edits-page">
-          <SuggestedEditsView v-bind="viewProps" @navigate="onSuggestionNavigate" />
+          <SuggestedEditsView
+            v-bind="viewProps"
+            @navigate="onSuggestionNavigate"
+            @open-interests="onOpenInterests"
+          />
         </SpecialPageWrapper>
+
+        <InterestsSettingsPage v-if="showInterests" @close="onCloseInterests" />
       </div>
     </TaskFullscreenShell>
   </MobileWrapper>
@@ -121,6 +138,7 @@ definePage({
 
 <style scoped>
 .suggested-edits-layout {
+  position: relative;
   display: flex;
   flex: 1;
   flex-direction: column;

From c083d70d0c97b2f1ee6897977c2d3c94938a3483 Mon Sep 17 00:00:00 2001
From: Lu Wilson <lu@todepond.com>
Date: Wed, 10 Jun 2026 11:51:43 +0100
Subject: [PATCH 2/5] fix chips

---
 src/prototypes/template-homepage/InterestsToggleChip.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/prototypes/template-homepage/InterestsToggleChip.vue b/src/prototypes/template-homepage/InterestsToggleChip.vue
index a9113ae..2ef6cee 100644
--- a/src/prototypes/template-homepage/InterestsToggleChip.vue
+++ b/src/prototypes/template-homepage/InterestsToggleChip.vue
@@ -28,7 +28,7 @@ const model = defineModel<boolean>({ default: false })
 .interests-toggle-chip {
   min-height: 2.5rem;
   max-width: none;
-  padding: var(--spacing-25, 4px) var(--spacing-100, 16px);
+  padding: var(--spacing-25, 4px) 18px;
   border-radius: 9999px;
   font-weight: var(--font-weight-normal, 400);
   gap: var(--spacing-25, 4px);
@@ -41,6 +41,11 @@ const model = defineModel<boolean>({ default: false })
 .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 */

From 2445f7f5f7b4635246752a0740b08405d321e659 Mon Sep 17 00:00:00 2001
From: Lu Wilson <lu@todepond.com>
Date: Wed, 10 Jun 2026 17:13:12 +0100
Subject: [PATCH 3/5] Improve topic picker

---
 .../suggested-edits/data/interestsFixtures.ts |  8 +-
 .../data/useInterestsSettings.ts              | 79 ++++++++-----------
 2 files changed, 35 insertions(+), 52 deletions(-)

diff --git a/src/prototypes/template-homepage/suggested-edits/data/interestsFixtures.ts b/src/prototypes/template-homepage/suggested-edits/data/interestsFixtures.ts
index 72c690c..6d19ebf 100644
--- a/src/prototypes/template-homepage/suggested-edits/data/interestsFixtures.ts
+++ b/src/prototypes/template-homepage/suggested-edits/data/interestsFixtures.ts
@@ -31,8 +31,7 @@ export interface InterestsCatalogCategory {
   label: string
 }
 
-export const ACCOUNT_CREATION_PAGE = 'Wikipedia'
-export const MAX_INTEREST_CHIPS = 8
+export const MAX_INTEREST_CHIPS = 10
 
 export const TOPIC_CATEGORY_DEFINITIONS: InterestsCatalogCategory[] = [
   { id: 'culture', label: 'Culture' },
@@ -129,8 +128,8 @@ export function buildTopicCatalog(): InterestsCatalogTopic[] {
 
 export const INTERESTS_TOPIC_CATALOG = buildTopicCatalog()
 
-function pageChip(id: string, label: string, selected: boolean, pinned = false): InterestsChipEntry {
-  return { id, label, selected, kind: 'page', pinned }
+function pageChip(id: string, label: string, selected: boolean): InterestsChipEntry {
+  return { id, label, selected, kind: 'page' }
 }
 
 function topicChipFromCatalog(entry: InterestsCatalogTopic, selected = false): InterestsChipEntry {
@@ -156,7 +155,6 @@ function buildDefaultTopicChips(): InterestsChipEntry[] {
 
 function buildDefaultChips(): InterestsChipEntry[] {
   return [
-    pageChip('wikipedia', ACCOUNT_CREATION_PAGE, true, true),
     pageChip('gorillaz', 'Gorillaz', true),
     pageChip('dsei', 'DSEI', true),
     pageChip('wet-leg', 'Wet Leg', false),
diff --git a/src/prototypes/template-homepage/suggested-edits/data/useInterestsSettings.ts b/src/prototypes/template-homepage/suggested-edits/data/useInterestsSettings.ts
index 6fbadaa..ba576d7 100644
--- a/src/prototypes/template-homepage/suggested-edits/data/useInterestsSettings.ts
+++ b/src/prototypes/template-homepage/suggested-edits/data/useInterestsSettings.ts
@@ -1,7 +1,6 @@
 import { ref, watch, type Ref } from 'vue'
 
 import {
-  ACCOUNT_CREATION_PAGE,
   DEFAULT_INTERESTS_SETTINGS,
   MAX_INTEREST_CHIPS,
   chipKey,
@@ -54,30 +53,12 @@ function labelsMatch(a: string, b: string): boolean {
   return a.localeCompare(b, undefined, { sensitivity: 'accent' }) === 0
 }
 
-function ensurePinnedAccountPage(chips: InterestsChipEntry[]): InterestsChipEntry[] {
-  const pinnedIndex = chips.findIndex((chip) => chip.kind === 'page' && (chip.pinned || chip.id === 'wikipedia'))
-  const pinned: InterestsChipEntry =
-    pinnedIndex >= 0
-      ? {
-          ...chips[pinnedIndex],
-          kind: 'page',
-          pinned: true,
-          label: chips[pinnedIndex].label || ACCOUNT_CREATION_PAGE,
-        }
-      : {
-          id: 'wikipedia',
-          label: ACCOUNT_CREATION_PAGE,
-          selected: true,
-          kind: 'page',
-          pinned: true,
-        }
-
-  const rest = chips.filter((_, index) => index !== pinnedIndex)
-  return [pinned, ...rest]
+function withoutLegacyAccountPageChip(chips: InterestsChipEntry[]): InterestsChipEntry[] {
+  return chips.filter((chip) => !(chip.kind === 'page' && chip.id === 'wikipedia'))
 }
 
 export function pruneInterestChips(chips: InterestsChipEntry[]): InterestsChipEntry[] {
-  let pruned = ensurePinnedAccountPage(chips)
+  let pruned = withoutLegacyAccountPageChip(chips)
 
   while (pruned.length > MAX_INTEREST_CHIPS) {
     let removed = false
@@ -95,44 +76,49 @@ export function pruneInterestChips(chips: InterestsChipEntry[]): InterestsChipEn
   return pruned
 }
 
-function insertIndexForNewChip(chips: InterestsChipEntry[]): number {
-  const pinnedIndex = chips.findIndex((chip) => chip.pinned)
-  return pinnedIndex >= 0 ? pinnedIndex + 1 : 0
-}
-
 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)
-  const insertAt = chip.pinned ? 0 : insertIndexForNewChip(chips)
-  chips.splice(insertAt, 0, chip)
+  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 defaultKeys = new Set(DEFAULT_INTERESTS_SETTINGS.chips.map((chip) => chipKey(chip.kind, chip.id)))
-  const mergedDefaults = DEFAULT_INTERESTS_SETTINGS.chips.map((defaultChip) => {
-    const storedChip = validStored.find(
-      (chip) => chip.kind === defaultChip.kind && chip.id === defaultChip.id,
-    )
-    return storedChip
-      ? {
-          ...defaultChip,
-          ...storedChip,
-          kind: defaultChip.kind,
-          pinned: defaultChip.pinned ?? storedChip.pinned,
-        }
-      : defaultChip
-  })
+  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 })
+    }
+  }
 
-  const customChips = validStored.filter((chip) => !defaultKeys.has(chipKey(chip.kind, chip.id)))
-  return pruneInterestChips([...mergedDefaults, ...customChips])
+  return pruneInterestChips(ordered)
 }
 
 function chipsFromLegacyV2(raw: Record<string, unknown>): InterestsChipEntry[] {
@@ -376,8 +362,7 @@ function upsertChip(
     return
   }
 
-  const insertAt = chip.pinned ? 0 : insertIndexForNewChip(settings.chips)
-  settings.chips.splice(insertAt, 0, { ...chip, selected })
+  settings.chips.splice(0, 0, { ...chip, selected })
   settings.chips = pruneInterestChips(settings.chips)
 }
 

From 9b4afe1cf99d639238cff70310051d144356b01a Mon Sep 17 00:00:00 2001
From: Lu Wilson <lu@todepond.com>
Date: Wed, 10 Jun 2026 18:43:14 +0100
Subject: [PATCH 4/5] GO

---
 src/components/PrototypeChromeMenuPanel.vue   | 101 +++++
 src/components/PrototypeChromeMenuPopover.vue |  41 ++
 src/components/chrome/ChromeHeader.vue        |  30 +-
 src/composables/usePrototypeDevSettings.ts    | 130 ++++++
 src/config.ts                                 |   7 +
 src/lib/fetchMicrotaskQuality.ts              |  85 ++++
 src/lib/fetchMorelike.ts                      | 270 ++++++++++++
 src/lib/fetchUserEditedPageTitles.ts          | 147 +++++++
 src/lib/morelikeMlt.ts                        | 158 +++++++
 .../InterestsSettingsPage.vue                 |  38 +-
 .../template-homepage/SuggestedEditsView.vue  |  56 ++-
 src/prototypes/template-homepage/index.vue    |  52 ++-
 .../suggested-edits/data/buildSeedSources.ts  | 140 +++++++
 .../suggested-edits/data/interestsFixtures.ts |  22 +-
 .../suggested-edits/data/microtaskCatalog.ts  | 151 +++++++
 .../data/useInterestsSettings.ts              |  53 ++-
 .../suggested-edits/data/useSuggestedEdits.ts | 387 ++++++++++++++++++
 .../suggested-edits/index.vue                 | 160 ++++----
 18 files changed, 1896 insertions(+), 132 deletions(-)
 create mode 100644 src/components/PrototypeChromeMenuPanel.vue
 create mode 100644 src/components/PrototypeChromeMenuPopover.vue
 create mode 100644 src/composables/usePrototypeDevSettings.ts
 create mode 100644 src/lib/fetchMicrotaskQuality.ts
 create mode 100644 src/lib/fetchMorelike.ts
 create mode 100644 src/lib/fetchUserEditedPageTitles.ts
 create mode 100644 src/lib/morelikeMlt.ts
 create mode 100644 src/prototypes/template-homepage/suggested-edits/data/buildSeedSources.ts
 create mode 100644 src/prototypes/template-homepage/suggested-edits/data/microtaskCatalog.ts
 create mode 100644 src/prototypes/template-homepage/suggested-edits/data/useSuggestedEdits.ts

diff --git a/src/components/PrototypeChromeMenuPanel.vue b/src/components/PrototypeChromeMenuPanel.vue
new file mode 100644
index 0000000..e20e986
--- /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="Minimal (wiki default)"
+      />
+    </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="Random from catalog"
+      />
+    </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/chrome/ChromeHeader.vue b/src/components/chrome/ChromeHeader.vue
index a9d5228..ba5f9d7 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 PrototypeUserSettingsPopover from '../PrototypeUserSettingsPopover.vue'
+import PrototypeChromeMenuPopover from '../PrototypeChromeMenuPopover.vue'
 import SearchBar from '../SearchBar/SearchBar.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">
@@ -226,9 +234,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">
diff --git a/src/composables/usePrototypeDevSettings.ts b/src/composables/usePrototypeDevSettings.ts
new file mode 100644
index 0000000..63fd258
--- /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: 'minimal',
+  microtaskSource: 'random',
+}
+
+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/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..56a059d
--- /dev/null
+++ b/src/lib/fetchMorelike.ts
@@ -0,0 +1,270 @@
+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)
+}
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/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/template-homepage/InterestsSettingsPage.vue b/src/prototypes/template-homepage/InterestsSettingsPage.vue
index d3ea020..7b77826 100644
--- a/src/prototypes/template-homepage/InterestsSettingsPage.vue
+++ b/src/prototypes/template-homepage/InterestsSettingsPage.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+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 {
@@ -15,7 +16,27 @@ 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)
@@ -160,10 +181,23 @@ watch(searchSelected, (value) => {
             </CdxToggleSwitch>
           </div>
           <div class="interests-settings-page__switch-row">
-            <CdxToggleSwitch v-model="settings.personalization.watchlist" align-switch>
+            <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>
diff --git a/src/prototypes/template-homepage/SuggestedEditsView.vue b/src/prototypes/template-homepage/SuggestedEditsView.vue
index 9e0c95c..a085abd 100644
--- a/src/prototypes/template-homepage/SuggestedEditsView.vue
+++ b/src/prototypes/template-homepage/SuggestedEditsView.vue
@@ -174,12 +174,12 @@ function onOpenInterests(): 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">
@@ -189,7 +189,24 @@ function onOpenInterests(): 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>
@@ -211,7 +228,7 @@ function onOpenInterests(): void {
               {{ pageviewsLabel }}
             </p>
           </div>
-        </article>
+        </component>
 
         <section v-if="taskTitle" class="suggested-edits-view__task">
           <p class="suggested-edits-view__task-heading">
@@ -458,6 +475,19 @@ function onOpenInterests(): 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);
@@ -466,8 +496,9 @@ function onOpenInterests(): 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);
 }
 
@@ -486,6 +517,7 @@ function onOpenInterests(): 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;
@@ -496,6 +528,16 @@ function onOpenInterests(): 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/index.vue b/src/prototypes/template-homepage/index.vue
index 140703d..0e5ce8e 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
index 6d19ebf..95ebd24 100644
--- a/src/prototypes/template-homepage/suggested-edits/data/interestsFixtures.ts
+++ b/src/prototypes/template-homepage/suggested-edits/data/interestsFixtures.ts
@@ -12,6 +12,7 @@ export interface InterestsChipEntry {
 export interface InterestsPersonalization {
   editingHistory: boolean
   watchlist: boolean
+  readingList: boolean
 }
 
 export interface InterestsSettings {
@@ -91,11 +92,11 @@ const TOPIC_LABELS_BY_CATEGORY: Record<string, string[]> = {
 
 /** Starter chips shown on first join (all unticked). */
 export const STARTER_TOPIC_CHIP_IDS = [
-  'culture:music',
-  'history-and-society:biography-all',
-  'history-and-society:history',
-  'science-technology-math:general-science',
-  'culture:sports',
+  // 'culture:art',
+  // 'culture:music',
+  // 'history-and-society:history',
+  // 'culture:sports',
+  // 'science-technology-math:technology',
 ] as const
 
 export function slugifyInterestsLabel(label: string): string {
@@ -155,11 +156,11 @@ function buildDefaultTopicChips(): InterestsChipEntry[] {
 
 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),
+    // pageChip('gorillaz', 'Gorillaz', true),
+    // pageChip('dsei', 'DSEI', true),
+    // pageChip('wet-leg', 'Wet Leg', false),
+    // pageChip('dada', 'Dada', false),
+    // pageChip('surrealism', 'Surrealism', false),
     ...buildDefaultTopicChips(),
   ]
 }
@@ -168,6 +169,7 @@ export const DEFAULT_INTERESTS_SETTINGS: InterestsSettings = {
   personalization: {
     editingHistory: true,
     watchlist: true,
+    readingList: true,
   },
   chips: buildDefaultChips(),
 }
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
index ba576d7..742f0bf 100644
--- a/src/prototypes/template-homepage/suggested-edits/data/useInterestsSettings.ts
+++ b/src/prototypes/template-homepage/suggested-edits/data/useInterestsSettings.ts
@@ -40,13 +40,20 @@ function isChipEntry(value: unknown): value is InterestsChipEntry {
   )
 }
 
-function isPersonalization(value: unknown): value is InterestsPersonalization {
-  return (
-    typeof value === 'object' &&
-    value !== null &&
-    isBoolean((value as InterestsPersonalization).editingHistory) &&
-    isBoolean((value as InterestsPersonalization).watchlist)
-  )
+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 {
@@ -167,9 +174,7 @@ export function normalizeInterestsSettings(raw: unknown): InterestsSettings {
     : chipsFromLegacyV2(candidate)
 
   return {
-    personalization: isPersonalization(candidate.personalization)
-      ? candidate.personalization
-      : { ...defaults.personalization },
+    personalization: mergePersonalization(candidate.personalization),
     chips,
   }
 }
@@ -441,16 +446,26 @@ export function applyInterestsSuggestion(
   }
 }
 
+/** 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> {
-  const settings = ref<InterestsSettings>(loadInterestsSettings())
+  if (!sharedInterestsSettings) {
+    sharedInterestsSettings = ref(loadInterestsSettings())
 
-  watch(
-    settings,
-    (value) => {
-      saveInterestsSettings(value)
-    },
-    { deep: true },
-  )
+    watch(
+      sharedInterestsSettings,
+      (value) => {
+        saveInterestsSettings(value)
+      },
+      { deep: true },
+    )
+  }
 
-  return settings
+  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 3baae4a..8e7ab75 100644
--- a/src/prototypes/template-homepage/suggested-edits/index.vue
+++ b/src/prototypes/template-homepage/suggested-edits/index.vue
@@ -1,97 +1,67 @@
 <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 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 showInterests = ref(false)
-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
-}
+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
@@ -101,6 +71,14 @@ function onCloseInterests(): void {
   showInterests.value = false
 }
 
+function onRefreshClick(): void {
+  if (loadPending.value) {
+    onLoad()
+  } else {
+    onRefresh()
+  }
+}
+
 definePage({
   meta: {
     title: 'Template: Homepage — Suggested edits',
@@ -119,13 +97,27 @@ 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"
+            @load="onLoad"
+            @refresh="onRefresh"
+            @navigate="onNavigate"
             @open-interests="onOpenInterests"
           />
         </SpecialPageWrapper>

From 141b0f75723a17dd713d8c5fefdfcaaabab00db5 Mon Sep 17 00:00:00 2001
From: Lu Wilson <lu@todepond.com>
Date: Wed, 10 Jun 2026 18:46:17 +0100
Subject: [PATCH 5/5] defaults

---
 src/components/PrototypeChromeMenuPanel.vue | 4 ++--
 src/composables/usePrototypeDevSettings.ts  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/PrototypeChromeMenuPanel.vue b/src/components/PrototypeChromeMenuPanel.vue
index e20e986..8039f87 100644
--- a/src/components/PrototypeChromeMenuPanel.vue
+++ b/src/components/PrototypeChromeMenuPanel.vue
@@ -31,7 +31,7 @@ function onClearInterests(): void {
       <CdxSelect
         v-model:selected="morelikeStrategy"
         :menu-items="MORELIKE_STRATEGY_MENU_ITEMS"
-        default-label="Minimal (wiki default)"
+        default-label="Serial multi-call"
       />
     </label>
 
@@ -40,7 +40,7 @@ function onClearInterests(): void {
       <CdxSelect
         v-model:selected="microtaskSource"
         :menu-items="MICROTASK_SOURCE_MENU_ITEMS"
-        default-label="Random from catalog"
+        default-label="Microtask Generator API"
       />
     </label>
 
diff --git a/src/composables/usePrototypeDevSettings.ts b/src/composables/usePrototypeDevSettings.ts
index 63fd258..43bd373 100644
--- a/src/composables/usePrototypeDevSettings.ts
+++ b/src/composables/usePrototypeDevSettings.ts
@@ -10,8 +10,8 @@ export interface PrototypeDevSettings {
 }
 
 export const DEFAULT_PROTOTYPE_DEV_SETTINGS: PrototypeDevSettings = {
-  morelikeStrategy: 'minimal',
-  microtaskSource: 'random',
+  morelikeStrategy: 'serial',
+  microtaskSource: 'quality-check',
 }
 
 export const MORELIKE_STRATEGY_MENU_ITEMS: { value: MorelikeStrategy; label: string }[] = [