From 42f04480c8f11dd05f7c75844ccaaa0304b8e9a1 Mon Sep 17 00:00:00 2001
From: Lu Wilson <lu@todepond.com>
Date: Thu, 21 May 2026 10:39:52 +0100
Subject: [PATCH 01/21] dashpage stub

---
 src/prototypes/dashpage/HelpModule.vue        | 148 ++++
 src/prototypes/dashpage/ImpactModule.vue      | 699 ++++++++++++++++++
 src/prototypes/dashpage/MentorModule.vue      | 249 +++++++
 .../dashpage/MobileSubpageHeader.vue          | 105 +++
 .../dashpage/StructuredTasksModule.vue        | 164 ++++
 src/prototypes/dashpage/dashpage-fixtures.ts  | 114 +++
 src/prototypes/dashpage/help/index.vue        |  37 +
 src/prototypes/dashpage/impact/index.vue      |  42 ++
 src/prototypes/dashpage/index.vue             | 131 ++++
 src/prototypes/dashpage/mentor/index.vue      |  55 ++
 10 files changed, 1744 insertions(+)
 create mode 100644 src/prototypes/dashpage/HelpModule.vue
 create mode 100644 src/prototypes/dashpage/ImpactModule.vue
 create mode 100644 src/prototypes/dashpage/MentorModule.vue
 create mode 100644 src/prototypes/dashpage/MobileSubpageHeader.vue
 create mode 100644 src/prototypes/dashpage/StructuredTasksModule.vue
 create mode 100644 src/prototypes/dashpage/dashpage-fixtures.ts
 create mode 100644 src/prototypes/dashpage/help/index.vue
 create mode 100644 src/prototypes/dashpage/impact/index.vue
 create mode 100644 src/prototypes/dashpage/index.vue
 create mode 100644 src/prototypes/dashpage/mentor/index.vue

diff --git a/src/prototypes/dashpage/HelpModule.vue b/src/prototypes/dashpage/HelpModule.vue
new file mode 100644
index 0000000..fc7864b
--- /dev/null
+++ b/src/prototypes/dashpage/HelpModule.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import type { RouteLocationRaw } from 'vue-router'
+import { CdxIcon } from '@wikimedia/codex'
+import { cdxIconHelp } from '@wikimedia/codex-icons'
+
+import DashboardModule from '@/components/DashboardModule.vue'
+
+export interface HelpLink {
+  label: string
+  href: string
+}
+
+interface Props {
+  /** Full-page drill-down — body only, no `DashboardModule` card chrome. */
+  standalone?: boolean
+  compact?: boolean
+  to?: RouteLocationRaw
+  /** Mobile preview card title. */
+  title?: string
+  /** Mobile preview card body copy. */
+  summary?: string
+  helpLinks?: HelpLink[]
+  viewMoreHref?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  standalone: false,
+  compact: false,
+  to: undefined,
+  title: 'Get help with editing',
+  summary: 'Ask the help desk or read help pages.',
+  helpLinks: () => [],
+  viewMoreHref: undefined,
+})
+</script>
+
+<template>
+  <!-- Standalone full page (mobile drill-down) -->
+  <div v-if="standalone" class="help-module help-module--standalone">
+    <template v-if="helpLinks.length > 0">
+      <p class="help-module__section-label">Top help pages about editing</p>
+      <ul class="help-module__list">
+        <li v-for="link in helpLinks" :key="link.href" class="help-module__list-item">
+          <a :href="link.href" class="help-module__link">{{ link.label }}</a>
+        </li>
+      </ul>
+    </template>
+    <a v-if="viewMoreHref" :href="viewMoreHref" class="help-module__link help-module__view-more">
+      View more help articles
+    </a>
+  </div>
+
+  <!-- Mobile: compact link card when `to` is set -->
+  <DashboardModule v-else-if="compact" :title="title" :to="to" :cta="null">
+    <p class="help-module__summary">{{ summary }}</p>
+  </DashboardModule>
+
+  <!-- Desktop: full static card with icon, link list, footer -->
+  <DashboardModule v-else>
+    <div class="help-module__full">
+      <CdxIcon :icon="cdxIconHelp" size="medium" class="help-module__icon" />
+      <div class="sidebar-card__title">{{ title }}</div>
+      <template v-if="helpLinks.length > 0">
+        <p class="help-module__section-label">Top help pages about editing</p>
+        <ul class="help-module__list">
+          <li v-for="link in helpLinks" :key="link.href" class="help-module__list-item">
+            <a :href="link.href" class="help-module__link">{{ link.label }}</a>
+          </li>
+        </ul>
+      </template>
+      <a v-if="viewMoreHref" :href="viewMoreHref" class="help-module__link help-module__view-more">
+        View more help articles
+      </a>
+    </div>
+  </DashboardModule>
+</template>
+
+<style scoped>
+.help-module--standalone {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+}
+
+.help-module__summary {
+  margin: 0;
+  font-size: var(--font-size-medium);
+  line-height: var(--line-height-medium);
+  color: var(--color-base--subtle, #54595d);
+}
+
+.help-module__icon {
+  color: var(--color-base, #202122);
+  width: var(--size-150);
+}
+
+.help-module__section-label {
+  margin: 0 0 var(--spacing-75, 12px);
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-bold, 700);
+  line-height: var(--line-height-small);
+  color: var(--color-base--subtle, #54595d);
+}
+
+.help-module__list {
+  margin: 0 0 var(--spacing-100, 16px);
+  padding: 0;
+  list-style: none;
+}
+
+.help-module__list-item {
+  position: relative;
+  margin: 0 0 var(--spacing-75, 12px);
+  padding-left: var(--spacing-125, 20px);
+  font-size: var(--font-size-medium);
+  line-height: var(--line-height-medium);
+}
+
+.help-module__list-item::before {
+  position: absolute;
+  left: 0;
+  top: 0.55em;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--color-progressive, #36c);
+  content: '';
+}
+
+.help-module__list-item:last-child {
+  margin-bottom: 0;
+}
+
+.help-module__link {
+  color: var(--color-progressive, #36c);
+  text-decoration: none;
+}
+
+.help-module__link:hover {
+  text-decoration: underline;
+}
+
+.help-module__view-more {
+  display: inline-block;
+  font-size: var(--font-size-medium);
+  line-height: var(--line-height-medium);
+}
+</style>
diff --git a/src/prototypes/dashpage/ImpactModule.vue b/src/prototypes/dashpage/ImpactModule.vue
new file mode 100644
index 0000000..9c860f8
--- /dev/null
+++ b/src/prototypes/dashpage/ImpactModule.vue
@@ -0,0 +1,699 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+import { CdxIcon } from '@wikimedia/codex'
+import {
+  cdxIconChart,
+  cdxIconClock,
+  cdxIconEdit,
+  cdxIconInfo,
+  cdxIconUserTalk,
+} from '@wikimedia/codex-icons'
+
+import DashboardModule from '@/components/DashboardModule.vue'
+
+export interface MostViewedArticle {
+  title: string
+  views: number
+  thumbnailSrc?: string
+  href?: string
+  sparklineData?: number[]
+}
+
+interface Props {
+  /** Full-page drill-down — desktop layout without `DashboardModule` card chrome. */
+  standalone?: boolean
+  to?: RouteLocationRaw
+  /** When set: filled state. Also used as the views count label. */
+  viewCount?: string
+  viewLabel?: string
+  sparklineData?: number[]
+  // Mobile filled
+  lastEdited?: string
+  longestStreak?: string
+  // Desktop (empty + filled)
+  thanksReceived?: number
+  // Desktop filled only
+  totalEdits?: number
+  recentActivityData?: number[]
+  activityStartDate?: string
+  activityEndDate?: string
+  mostViewed?: MostViewedArticle[]
+  viewAllEditsHref?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  standalone: false,
+  to: undefined,
+  viewCount: undefined,
+  viewLabel: 'Views on articles you\'ve edited',
+  sparklineData: () => [],
+  lastEdited: undefined,
+  longestStreak: undefined,
+  thanksReceived: 0,
+  totalEdits: undefined,
+  recentActivityData: () => [],
+  activityStartDate: undefined,
+  activityEndDate: undefined,
+  mostViewed: () => [],
+  viewAllEditsHref: undefined,
+})
+
+const hasContent = computed(() => !!props.viewCount)
+const isMobilePreview = computed(() => !props.standalone && props.to != null)
+
+// ── Sparkline helpers ────────────────────────────────
+const W = 300
+const H = 48
+
+function toPoints(data: number[], w = W, h = H): [number, number][] {
+  const min = Math.min(...data)
+  const max = Math.max(...data)
+  const range = max - min || 1
+  return data.map((v, i) => [
+    (i / (data.length - 1)) * w,
+    h - ((v - min) / range) * (h * 0.8) - h * 0.1,
+  ])
+}
+
+function makeLine(data: number[], w = W, h = H): string {
+  if (data.length < 2) return ''
+  return toPoints(data, w, h)
+    .map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`)
+    .join(' ')
+}
+
+function makeArea(data: number[], w = W, h = H): string {
+  const line = makeLine(data, w, h)
+  return line ? `${line} L${w},${h} L0,${h} Z` : ''
+}
+
+const linePath = computed(() => makeLine(props.sparklineData))
+const areaPath = computed(() => makeArea(props.sparklineData))
+
+// ── Activity bar chart ───────────────────────────────
+const BAR_W = 300
+const BAR_H = 32
+
+const activityBars = computed(() => {
+  const data = props.recentActivityData
+  if (!data.length) return []
+  const max = Math.max(...data, 1)
+  const barWidth = BAR_W / data.length
+  const gap = 1
+  return data.map((v, i) => ({
+    x: i * barWidth + gap / 2,
+    y: v === 0 ? BAR_H - 2 : BAR_H - (v / max) * BAR_H,
+    width: Math.max(barWidth - gap, 1),
+    height: v === 0 ? 2 : (v / max) * BAR_H,
+    active: v > 0,
+  }))
+})
+
+const recentEditCount = computed(() =>
+  props.recentActivityData.reduce((s, v) => s + v, 0)
+)
+</script>
+
+<template>
+  <component
+    :is="standalone ? 'div' : DashboardModule"
+    :class="standalone ? 'impact-module impact-module--standalone' : undefined"
+    v-bind="
+      standalone
+        ? {}
+        : { title: 'Your impact', to, cta: null }
+    "
+  >
+
+    <!-- ① Mobile filled ─────────────────────────────── -->
+    <template v-if="hasContent && isMobilePreview">
+      <div class="impact-module__stat-row">
+        <span class="impact-module__count">{{ viewCount }}</span>
+        <span class="impact-module__count-label">{{ viewLabel }}</span>
+      </div>
+      <svg
+        v-if="sparklineData.length >= 2"
+        class="impact-module__sparkline"
+        :viewBox="`0 0 ${W} ${H}`"
+        preserveAspectRatio="none"
+        aria-hidden="true"
+      >
+        <path :d="areaPath" class="impact-module__area" />
+        <path :d="linePath" class="impact-module__line" />
+      </svg>
+      <div v-if="lastEdited || longestStreak" class="impact-module__metrics">
+        <div v-if="lastEdited" class="impact-module__metric">
+          <span class="impact-module__metric-label">Last edited</span>
+          <span class="impact-module__metric-value">{{ lastEdited }}</span>
+        </div>
+        <div v-if="longestStreak" class="impact-module__metric">
+          <span class="impact-module__metric-label">Longest streak</span>
+          <span class="impact-module__metric-value">{{ longestStreak }}</span>
+        </div>
+      </div>
+    </template>
+
+    <!-- ② Desktop filled ────────────────────────────── -->
+    <template v-else-if="hasContent">
+      <!-- 2×2 stats grid -->
+      <div class="impact-module__desktop-stats impact-module__desktop-stats--grid">
+        <div class="impact-module__desktop-stat">
+          <div class="impact-module__desktop-stat-value-row">
+            <CdxIcon :icon="cdxIconEdit" size="small" class="impact-module__desktop-stat-icon" />
+            <span class="impact-module__desktop-stat-value impact-module__desktop-stat-value--progressive">{{ totalEdits ?? 0 }}</span>
+          </div>
+          <span class="impact-module__desktop-stat-label">Total edits</span>
+        </div>
+        <div class="impact-module__desktop-stat impact-module__desktop-stat--border-left">
+          <div class="impact-module__desktop-stat-value-row">
+            <CdxIcon :icon="cdxIconUserTalk" size="small" class="impact-module__desktop-stat-icon" />
+            <span class="impact-module__desktop-stat-value">{{ thanksReceived }}</span>
+          </div>
+          <div class="impact-module__desktop-stat-label-row">
+            <span class="impact-module__desktop-stat-label">Thanks received</span>
+            <CdxIcon :icon="cdxIconInfo" size="small" class="impact-module__desktop-info-icon" />
+          </div>
+        </div>
+        <div class="impact-module__desktop-stat impact-module__desktop-stat--border-top">
+          <div class="impact-module__desktop-stat-value-row">
+            <CdxIcon :icon="cdxIconClock" size="small" class="impact-module__desktop-stat-icon" />
+            <span class="impact-module__desktop-stat-value">{{ lastEdited }}</span>
+          </div>
+          <span class="impact-module__desktop-stat-label">Last edited</span>
+        </div>
+        <div class="impact-module__desktop-stat impact-module__desktop-stat--border-top impact-module__desktop-stat--border-left">
+          <div class="impact-module__desktop-stat-value-row">
+            <CdxIcon :icon="cdxIconChart" size="small" class="impact-module__desktop-stat-icon" />
+            <span class="impact-module__desktop-stat-value">{{ longestStreak }}</span>
+          </div>
+          <div class="impact-module__desktop-stat-label-row">
+            <span class="impact-module__desktop-stat-label">Longest streak</span>
+            <CdxIcon :icon="cdxIconInfo" size="small" class="impact-module__desktop-info-icon" />
+          </div>
+        </div>
+      </div>
+
+      <!-- Recent activity bar chart -->
+      <div class="impact-module__activity">
+        <p class="impact-module__activity-title">Your recent activity (last 60 days)</p>
+        <div class="impact-module__activity-body">
+          <div class="impact-module__activity-left">
+            <span class="impact-module__activity-count-value">{{ recentEditCount }}</span>
+            <span class="impact-module__activity-count-label">Edits</span>
+          </div>
+          <div class="impact-module__activity-right">
+            <svg
+              class="impact-module__activity-chart"
+              :viewBox="`0 0 ${BAR_W} ${BAR_H}`"
+              preserveAspectRatio="none"
+              aria-hidden="true"
+            >
+              <rect
+                v-for="(bar, i) in activityBars"
+                :key="i"
+                :x="bar.x"
+                :y="bar.y"
+                :width="bar.width"
+                :height="bar.height"
+                class="impact-module__activity-bar"
+                :class="{ 'impact-module__activity-bar--active': bar.active }"
+              />
+            </svg>
+            <div v-if="activityStartDate || activityEndDate" class="impact-module__activity-dates">
+              <span>{{ activityStartDate }}</span>
+              <span>{{ activityEndDate }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Views sparkline -->
+      <div class="impact-module__stat-row">
+        <span class="impact-module__count">{{ viewCount }}</span>
+        <span class="impact-module__count-label">{{ viewLabel }}</span>
+      </div>
+      <svg
+        v-if="sparklineData.length >= 2"
+        class="impact-module__sparkline"
+        :viewBox="`0 0 ${W} ${H}`"
+        preserveAspectRatio="none"
+        aria-hidden="true"
+      >
+        <path :d="areaPath" class="impact-module__area" />
+        <path :d="linePath" class="impact-module__line" />
+      </svg>
+
+      <!-- Most viewed articles -->
+      <template v-if="mostViewed.length > 0">
+        <p class="impact-module__most-viewed-title">Most viewed (since your edit)</p>
+        <div class="impact-module__most-viewed-list">
+          <div
+            v-for="article in mostViewed"
+            :key="article.title"
+            class="impact-module__most-viewed-item"
+          >
+            <div class="impact-module__most-viewed-thumb">
+              <img v-if="article.thumbnailSrc" :src="article.thumbnailSrc" :alt="article.title" />
+            </div>
+            <a :href="article.href ?? '#'" class="impact-module__most-viewed-title-link">{{ article.title }}</a>
+            <div class="impact-module__most-viewed-views-col">
+              <span class="impact-module__most-viewed-count">{{ article.views.toLocaleString() }}</span>
+              <svg
+                v-if="article.sparklineData && article.sparklineData.length >= 2"
+                class="impact-module__mini-sparkline"
+                viewBox="0 0 60 24"
+                preserveAspectRatio="none"
+                aria-hidden="true"
+              >
+                <path :d="makeLine(article.sparklineData, 60, 24)" class="impact-module__line" />
+              </svg>
+            </div>
+          </div>
+        </div>
+        <a v-if="viewAllEditsHref" :href="viewAllEditsHref" class="impact-module__view-all">View all edits</a>
+      </template>
+    </template>
+
+    <!-- ③ Mobile empty ──────────────────────────────── -->
+    <template v-else-if="isMobilePreview">
+      <div class="impact-module__empty-hero">
+        <img
+          src="https://en.wikipedia.org/w/extensions/GrowthExperiments/images/intro-heart-article.png?269e6"
+          alt=""
+          class="impact-module__empty-image"
+        />
+        <div class="impact-module__empty-text">
+          <p class="impact-module__empty-heading">0 edits to articles so far</p>
+          <p class="impact-module__empty-body">Help extend free knowledge to the world by editing topics that matter most to you.</p>
+        </div>
+      </div>
+      <p class="impact-module__empty-footer">
+        Start with a few <strong>suggested edits</strong>, then see how many people are viewing your contributions here.
+      </p>
+    </template>
+
+    <!-- ④ Desktop empty ─────────────────────────────── -->
+    <template v-else>
+      <div class="impact-module__desktop-stats">
+        <div class="impact-module__desktop-stat">
+          <div class="impact-module__desktop-stat-value-row">
+            <CdxIcon :icon="cdxIconUserTalk" size="small" class="impact-module__desktop-stat-icon" />
+            <span class="impact-module__desktop-stat-value">{{ thanksReceived }}</span>
+          </div>
+          <div class="impact-module__desktop-stat-label-row">
+            <span class="impact-module__desktop-stat-label">Thanks received</span>
+            <CdxIcon :icon="cdxIconInfo" size="small" class="impact-module__desktop-info-icon" />
+          </div>
+        </div>
+        <div class="impact-module__desktop-stat-divider" />
+        <div class="impact-module__desktop-stat">
+          <div class="impact-module__desktop-stat-value-row">
+            <CdxIcon :icon="cdxIconChart" size="small" class="impact-module__desktop-stat-icon" />
+            <span class="impact-module__desktop-stat-value">–</span>
+          </div>
+          <div class="impact-module__desktop-stat-label-row">
+            <span class="impact-module__desktop-stat-label">Longest streak</span>
+            <CdxIcon :icon="cdxIconInfo" size="small" class="impact-module__desktop-info-icon" />
+          </div>
+        </div>
+      </div>
+      <div class="impact-module__desktop-empty-body">
+        <img
+          src="https://en.wikipedia.org/w/extensions/GrowthExperiments/images/intro-heart-article.png?269e6"
+          alt=""
+          class="impact-module__desktop-empty-image"
+        />
+        <p class="impact-module__desktop-empty-heading">0 edits to articles so far</p>
+        <p class="impact-module__desktop-empty-subheading">Help extend free knowledge to the world by editing topics that matter most to you.</p>
+      </div>
+      <p class="impact-module__empty-footer">
+        Start with a few <strong>suggested edits</strong>, then see how many people are viewing your contributions here.
+      </p>
+    </template>
+
+  </component>
+</template>
+
+<style scoped>
+.impact-module--standalone {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+}
+
+/* ── Shared: sparkline ────────────────────────────── */
+.impact-module__sparkline {
+  display: block;
+  width: 100%;
+  height: var(--size-100);
+  overflow: visible;
+  margin-bottom: var(--spacing-50, 8px);
+}
+
+.impact-module__area {
+  fill: var(--background-color-progressive-subtle);
+  stroke: none;
+}
+
+.impact-module__line {
+  fill: none;
+  stroke: var(--border-color-progressive);
+  stroke-width: 1.5;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+/* ── Shared: desktop stats grid cell ──────────────── */
+.impact-module__desktop-stats {
+  display: flex;
+  align-items: stretch;
+  background-color: var(--background-color-interactive-subtle, #eaf3ff);
+  margin-bottom: var(--spacing-100, 16px);
+  overflow: hidden;
+}
+
+.impact-module__desktop-stats--grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  background-color: var(--background-color-progressive-subtle);
+}
+
+.impact-module__desktop-stat {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-25, 4px);
+  padding: var(--spacing-75, 12px);
+  flex-grow: 1;
+}
+
+.impact-module__desktop-stat--border-left {
+  border-left: 1px solid var(--border-color-subtle, #a2a9b1);
+}
+
+.impact-module__desktop-stat--border-top {
+  border-top: 1px solid var(--border-color-subtle, #a2a9b1);
+}
+
+.impact-module__desktop-stat-divider {
+  width: 1px;
+  background-color: var(--border-color-subtle, #a2a9b1);
+  flex-shrink: 0;
+}
+
+.impact-module__desktop-stat-value-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-50, 8px);
+}
+
+.impact-module__desktop-stat-icon {
+  color: var(--color-subtle);
+  flex-shrink: 0;
+}
+
+.impact-module__desktop-stat-value {
+  font-weight: var(--font-weight-bold, 700);
+  line-height: 1;
+  color: var(--color-base, #202122);
+}
+
+.impact-module__desktop-stat-value--progressive {
+  color: var(--color-progressive, #36c);
+}
+
+.impact-module__desktop-stat-label-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-50, 8px);
+}
+
+.impact-module__desktop-stat-label {
+  font-size: var(--font-size-small);
+  color: var(--color-subtle);
+  flex-grow: 1;
+}
+
+.impact-module__desktop-info-icon {
+  color: var(--color-base--subtle, #54595d);
+  flex-shrink: 0;
+}
+
+/* ── Mobile filled ────────────────────────────────── */
+.impact-module__stat-row {
+  display: flex;
+  align-items: baseline;
+  gap: var(--spacing-50, 8px);
+  flex-wrap: nowrap;
+  margin-bottom: var(--spacing-25, 4px);
+}
+
+.impact-module__count {
+  font-size: var(--font-size-xx-large, 2rem);
+  font-weight: var(--font-weight-bold, 700);
+  line-height: 1;
+}
+
+.impact-module__count-label {
+  font-size: var(--font-size-medium);
+  line-height: var(--line-height-medium);
+}
+
+.impact-module__metrics {
+  display: flex;
+  gap: var(--spacing-100, 16px);
+  font-size: var(--font-size-medium);
+  line-height: var(--line-height-medium);
+}
+
+.impact-module__metric {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.impact-module__metric-value {
+  font-weight: var(--font-weight-bold, 700);
+}
+
+/* ── Desktop filled: activity chart ──────────────── */
+.impact-module__activity {
+  margin-bottom: var(--spacing-75, 12px);
+}
+
+.impact-module__activity-title {
+  margin: 0 0 var(--spacing-50, 8px);
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--color-base, #202122);
+}
+
+.impact-module__activity-body {
+  display: flex;
+  align-items: end;
+  gap: var(--spacing-100, 16px);
+}
+
+.impact-module__activity-left {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+
+.impact-module__activity-count-value {
+  font-size: var(--font-size-xx-large);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--color-base, #202122);
+  line-height: 1;
+}
+
+.impact-module__activity-count-label {
+  font-size: var(--font-size-small);
+  color: var(--color-base--subtle, #54595d);
+}
+
+.impact-module__activity-right {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+
+.impact-module__activity-chart {
+  display: block;
+  width: 100%;
+  height: 32px;
+  flex: 1;
+}
+
+.impact-module__activity-bar {
+  fill: var(--background-color-interactive, #eaecf0);
+}
+
+.impact-module__activity-bar--active {
+  fill: var(--border-color-progressive, #36c);
+}
+
+.impact-module__activity-dates {
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--font-size-small);
+  color: var(--color-subtle, #54595d);
+}
+
+/* ── Desktop filled: most viewed ─────────────────── */
+.impact-module__most-viewed-title {
+  margin: var(--spacing-100, 16px) 0;
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--color-base, #202122);
+}
+
+.impact-module__most-viewed-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.impact-module__most-viewed-item:nth-child(even) {
+  background-color: var(--background-color-interactive-subtle, #eaf3ff);
+}
+
+.impact-module__most-viewed-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-50, 8px);
+  padding: var(--spacing-25, 4px);
+}
+
+.impact-module__most-viewed-thumb {
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  overflow: hidden;
+  background-color: var(--background-color-neutral);
+  border: 1px solid var(--border-color-subtle);
+  border-radius: 2px;
+}
+
+.impact-module__most-viewed-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.impact-module__most-viewed-title-link {
+  flex: 1;
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--color-progressive, #36c);
+  text-decoration: none;
+  min-width: 0;
+}
+
+.impact-module__most-viewed-title-link:hover {
+  text-decoration: underline;
+}
+
+.impact-module__most-viewed-views-col {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-25, 4px);
+}
+
+.impact-module__most-viewed-count {
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--color-progressive, #36c);
+}
+
+.impact-module__mini-sparkline {
+  display: block;
+  width: 20px;
+  height: 10px;
+}
+
+.impact-module__mini-sparkline > path {
+  stroke-width: 3px;
+}
+
+.impact-module__view-all {
+  display: block;
+  margin-top: var(--spacing-75, 12px);
+  font-weight: var(--font-weight-bold);
+}
+
+.impact-module__view-all:hover {
+  text-decoration: underline;
+}
+
+/* ── Mobile empty ─────────────────────────────────── */
+.impact-module__empty-hero {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-100, 16px);
+  margin-bottom: var(--spacing-100, 16px);
+}
+
+.impact-module__empty-image {
+  flex-shrink: 0;
+  width: 72px;
+  height: auto;
+}
+
+.impact-module__empty-text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-25, 4px);
+  min-width: 0;
+}
+
+.impact-module__empty-heading {
+  margin: 0;
+  font-size: var(--font-size-medium);
+  font-weight: var(--font-weight-bold, 700);
+  line-height: var(--line-height-small);
+}
+
+.impact-module__empty-body {
+  margin: 0;
+  font-size: var(--font-size-medium);
+  line-height: var(--line-height-medium);
+}
+
+.impact-module__empty-footer {
+  margin: 0;
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-base--subtle, #54595d);
+}
+
+/* ── Desktop empty ────────────────────────────────── */
+.impact-module__desktop-empty-body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: var(--spacing-50, 8px);
+  margin-bottom: var(--spacing-75, 12px);
+}
+
+.impact-module__desktop-empty-image {
+  width: 140px;
+  height: auto;
+}
+
+.impact-module__desktop-empty-heading {
+  margin: 0;
+  font-size: var(--font-size-xx-large);
+  font-weight: var(--font-weight-bold, 700);
+  line-height: var(--line-height-small);
+}
+
+.impact-module__desktop-empty-subheading {
+  margin: 0;
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-bold, 700);
+  line-height: var(--line-height-small);
+}
+</style>
diff --git a/src/prototypes/dashpage/MentorModule.vue b/src/prototypes/dashpage/MentorModule.vue
new file mode 100644
index 0000000..5f25310
--- /dev/null
+++ b/src/prototypes/dashpage/MentorModule.vue
@@ -0,0 +1,249 @@
+<script setup lang="ts">
+import type { RouteLocationRaw } from 'vue-router'
+import { CdxButton, CdxIcon } from '@wikimedia/codex'
+import { cdxIconUserAvatar } from '@wikimedia/codex-icons'
+
+import DashboardModule from '@/components/DashboardModule.vue'
+
+interface Props {
+  /** Full-page drill-down — body only, no `DashboardModule` card chrome. */
+  standalone?: boolean
+  /** Mobile preview link card. */
+  compact?: boolean
+  mentorName: string
+  lastActiveDaysAgo: number
+  editCount?: number
+  mentorNote?: string
+  to?: RouteLocationRaw
+  learnMoreHref?: string
+  conversationsHref?: string
+  /** Profile link for the mentor username (standalone / desktop). */
+  mentorProfileHref?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  standalone: false,
+  compact: false,
+  editCount: undefined,
+  mentorNote: undefined,
+  to: undefined,
+  learnMoreHref: undefined,
+  conversationsHref: undefined,
+  mentorProfileHref: '#',
+})
+</script>
+
+<template>
+  <!-- Standalone full page (mobile drill-down) -->
+  <div v-if="standalone" class="mentor-module mentor-module--standalone">
+    <p class="mentor-module__intro">
+      We've assigned you an experienced editor to answer your questions about editing.
+      <a
+        v-if="learnMoreHref"
+        :href="learnMoreHref"
+        class="mentor-module__link"
+      >Learn more about mentors.</a>
+    </p>
+
+    <div class="mentor-module__user">
+      <CdxIcon :icon="cdxIconUserAvatar" size="medium" class="mentor-module__avatar" />
+      <div class="mentor-module__user-info">
+        <a
+          :href="mentorProfileHref"
+          class="mentor-module__name mentor-module__name--link"
+        >{{ mentorName }}</a>
+        <p class="mentor-module__meta">
+          <span v-if="editCount != null">{{ editCount.toLocaleString() }} edits · </span>Active {{ lastActiveDaysAgo }} days ago
+        </p>
+      </div>
+    </div>
+
+    <blockquote v-if="mentorNote" class="mentor-module__note mentor-module__note--quote">
+      {{ mentorNote }}
+    </blockquote>
+
+    <CdxButton class="mentor-module__ask-btn mentor-module__ask-btn--standalone" weight="normal">
+      Ask your mentor a question about editing
+    </CdxButton>
+
+    <p v-if="conversationsHref" class="mentor-module__conversations mentor-module__conversations--centered">
+      <a :href="conversationsHref" class="mentor-module__link">View your mentor's other conversations</a>
+    </p>
+  </div>
+
+  <!-- Mobile: compact preview link card -->
+  <DashboardModule v-else-if="compact" title="Your mentor" :to="to" :cta="null">
+    <p class="mentor-module__intro">
+      We've assigned you an experienced editor to answer your questions about editing.
+    </p>
+    <div class="mentor-module__user">
+      <CdxIcon :icon="cdxIconUserAvatar" size="medium" class="mentor-module__avatar" />
+      <div class="mentor-module__user-info">
+        <span class="mentor-module__name">{{ mentorName }}</span>
+      </div>
+    </div>
+    <span class="mentor-module__meta">Active {{ lastActiveDaysAgo }} days ago</span>
+  </DashboardModule>
+
+  <!-- Desktop: full detail inside static sidebar card -->
+  <DashboardModule v-else>
+    <p class="mentor-module__intro">
+      We've assigned you an experienced editor to answer your questions about editing.
+      <a
+        v-if="learnMoreHref"
+        :href="learnMoreHref"
+        class="mentor-module__link"
+      >Learn more about mentors.</a>
+    </p>
+    <div class="mentor-module__user">
+      <CdxIcon :icon="cdxIconUserAvatar" size="medium" class="mentor-module__avatar" />
+      <div class="mentor-module__user-info">
+        <a
+          :href="mentorProfileHref"
+          class="mentor-module__name mentor-module__name--progressive"
+        >{{ mentorName }}</a>
+      </div>
+    </div>
+    <p class="mentor-module__meta">
+      <span v-if="editCount != null">{{ editCount.toLocaleString() }} edits · </span>Active {{ lastActiveDaysAgo }} days ago
+    </p>
+    <blockquote v-if="mentorNote" class="mentor-module__note">
+      {{ mentorNote }}
+    </blockquote>
+    <CdxButton class="mentor-module__ask-btn" weight="normal">Ask your mentor a question about editing</CdxButton>
+    <p v-if="conversationsHref" class="mentor-module__conversations">
+      <a :href="conversationsHref" class="mentor-module__link">View your mentor's other conversations</a>
+    </p>
+  </DashboardModule>
+</template>
+
+<style scoped>
+.mentor-module--standalone {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  padding: var(--spacing-100, 16px);
+  background-color: var(--background-color-base, #fff);
+}
+
+.mentor-module__intro {
+  margin: 0 0 var(--spacing-100, 16px);
+  font-size: var(--font-size-medium);
+  line-height: var(--line-height-medium);
+  color: var(--color-base, #202122);
+}
+
+.mentor-module__link {
+  color: var(--color-progressive, #36c);
+  text-decoration: none;
+}
+
+.mentor-module__link:hover {
+  text-decoration: underline;
+}
+
+.mentor-module__user {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-100, 16px);
+  margin-bottom: var(--spacing-100, 16px);
+}
+
+.mentor-module__avatar {
+  flex-shrink: 0;
+  color: var(--color-base--subtle, #54595d);
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.mentor-module__user-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-25, 4px);
+  min-width: 0;
+}
+
+.mentor-module__name {
+  font-size: var(--font-size-large);
+  font-weight: var(--font-weight-bold, 700);
+  line-height: var(--line-height-small);
+}
+
+.mentor-module__name--progressive,
+.mentor-module__name--link {
+  color: var(--color-progressive, #36c);
+  text-decoration: none;
+}
+
+.mentor-module__name--link:hover {
+  text-decoration: underline;
+}
+
+.mentor-module__meta {
+  margin: 0;
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-base--subtle, #54595d);
+}
+
+.mentor-module__note {
+  margin: 0 0 var(--spacing-100, 16px);
+  padding: 0 var(--spacing-75, 12px);
+  border-left: 4px solid var(--border-color-subtle, #a2a9b1);
+  font-family: var(--font-family-system-sans);
+  font-size: var(--font-size-medium);
+  line-height: var(--line-height-medium);
+}
+
+.mentor-module__note--quote {
+  font-family: var(--font-family-serif, 'Linux Libertine', Georgia, Times, serif);
+  font-style: italic;
+}
+
+.mentor-module__ask-btn {
+  margin: 0 0 var(--spacing-100, 16px);
+  white-space: normal;
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+}
+
+.mentor-module__ask-btn--standalone {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  padding: var(--spacing-75, 12px) var(--spacing-100, 16px);
+  font-size: var(--font-size-medium);
+  font-weight: var(--font-weight-bold, 700);
+  line-height: var(--line-height-medium);
+  background-color: var(--background-color-neutral-subtle, #f8f9fa);
+  border: 1px solid var(--border-color-subtle, #a2a9b1);
+}
+
+.mentor-module__conversations {
+  margin: 0;
+  line-height: var(--line-height-medium);
+}
+
+.mentor-module__conversations--centered {
+  text-align: center;
+}
+
+@media (min-width: 641px) {
+  .mentor-module__intro {
+    line-height: var(--line-height-small);
+  }
+
+  .mentor-module__meta {
+    font-size: var(--font-size-x-small);
+  }
+
+  .mentor-module__note {
+    font-size: var(--font-size-small);
+    line-height: var(--line-height-small);
+  }
+
+  .mentor-module__conversations {
+    line-height: var(--line-height-small);
+  }
+}
+</style>
diff --git a/src/prototypes/dashpage/MobileSubpageHeader.vue b/src/prototypes/dashpage/MobileSubpageHeader.vue
new file mode 100644
index 0000000..17f83d4
--- /dev/null
+++ b/src/prototypes/dashpage/MobileSubpageHeader.vue
@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import type { RouteLocationRaw } from 'vue-router'
+import { RouterLink } from 'vue-router'
+import { CdxButton, CdxIcon } from '@wikimedia/codex'
+import { cdxIconArrowNext } from '@wikimedia/codex-icons'
+
+interface Props {
+  /** Centered toolbar title (Minerva subpage pattern). */
+  title: string
+  /** Vue Router target for the back control. */
+  backTo: RouteLocationRaw
+  /** Accessible name for the back link. */
+  backLabel?: string
+  /**
+   * Pull the bar into `SpecialPageWrapper` mobile padding so it hugs the top and sides.
+   * Matches `--spacing-100` on the wrapper’s inline / top inset.
+   */
+  bleed?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  backLabel: 'Back',
+  bleed: true,
+})
+</script>
+
+<template>
+  <header class="mobile-subpage-header" :class="{ 'mobile-subpage-header--bleed': bleed }">
+    <RouterLink
+      :to="backTo"
+      class="mobile-subpage-header__back"
+      :aria-label="backLabel"
+    >
+      <CdxButton weight="quiet" :icon-only="true" tabindex="-1">
+        <CdxIcon :icon="cdxIconArrowNext" dir="rtl" />
+      </CdxButton>
+    </RouterLink>
+    <h1 class="mobile-subpage-header__title">{{ title }}</h1>
+    <div class="mobile-subpage-header__actions">
+      <slot name="actions">
+        <span class="mobile-subpage-header__spacer" aria-hidden="true" />
+      </slot>
+    </div>
+  </header>
+</template>
+
+<style scoped>
+.mobile-subpage-header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-50, 8px);
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 2.75rem;
+  margin: 0 0 var(--spacing-100, 16px);
+  padding-bottom: var(--spacing-50, 8px);
+  border-bottom: 1px solid var(--border-color-base, #a2a9b1);
+}
+
+.mobile-subpage-header--bleed {
+  --mobile-subpage-bleed: var(--spacing-100, 16px);
+  width: calc(100% + 2 * var(--mobile-subpage-bleed));
+  margin-top: calc(-1 * var(--mobile-subpage-bleed));
+  margin-inline: calc(-1 * var(--mobile-subpage-bleed));
+  padding-inline: var(--mobile-subpage-bleed);
+}
+
+.mobile-subpage-header__back {
+  flex-shrink: 0;
+  width: 2.75rem;
+  color: inherit;
+  text-decoration: none;
+}
+
+.mobile-subpage-header__title {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  font-family:
+    var(--font-family-system-sans, system-ui, sans-serif), var(--font-family-base, 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;
+}
+
+.mobile-subpage-header__actions {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: flex-end;
+  width: 2.75rem;
+}
+
+/* Balance the back button so the title stays visually centered. */
+.mobile-subpage-header__spacer {
+  flex-shrink: 0;
+  width: 2.75rem;
+}
+</style>
diff --git a/src/prototypes/dashpage/StructuredTasksModule.vue b/src/prototypes/dashpage/StructuredTasksModule.vue
new file mode 100644
index 0000000..8ba97a5
--- /dev/null
+++ b/src/prototypes/dashpage/StructuredTasksModule.vue
@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import type { RouteLocationRaw } from 'vue-router'
+import { CdxIcon } from '@wikimedia/codex'
+import { cdxIconChart } from '@wikimedia/codex-icons'
+
+import DashboardModule from '@/components/DashboardModule.vue'
+
+interface Props {
+  to?: RouteLocationRaw
+  currentIndex?: number
+  totalCount?: number
+  articleTitle?: string
+  articleDescription?: string
+  thumbnailSrc?: string
+  taskTypeLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  to: undefined,
+  currentIndex: 1,
+  totalCount: 173745,
+  articleTitle: 'Full circle ringing',
+  articleDescription: 'Method of hanging (church) bells and …',
+  thumbnailSrc: undefined,
+  taskTypeLabel: 'Find references',
+})
+</script>
+
+<template>
+  <div class="structured-tasks-module">
+    <DashboardModule
+      class="structured-tasks-module__variant structured-tasks-module__variant--mobile"
+      title="Suggested edits"
+      :to="props.to"
+      cta="See all suggestions"
+      subtle
+    >
+      <p class="structured-tasks-module__counter">
+        {{ props.currentIndex }} of {{ props.totalCount.toLocaleString() }} suggestions
+      </p>
+      <div class="structured-tasks-module__preview">
+        <img
+          v-if="props.thumbnailSrc"
+          class="structured-tasks-module__thumb"
+          :src="props.thumbnailSrc"
+          alt=""
+          width="48"
+          height="48"
+        />
+        <div class="structured-tasks-module__preview-text">
+          <p class="structured-tasks-module__article-title">{{ props.articleTitle }}</p>
+          <p class="structured-tasks-module__article-description">
+            {{ props.articleDescription }}
+          </p>
+          <span class="structured-tasks-module__task-type">
+            <CdxIcon :icon="cdxIconChart" size="small" class="structured-tasks-module__task-type-icon" />
+            {{ props.taskTypeLabel }}
+          </span>
+        </div>
+      </div>
+    </DashboardModule>
+
+    <DashboardModule
+      class="structured-tasks-module__variant structured-tasks-module__variant--desktop"
+      title="Suggested edits"
+    >
+      <p class="structured-tasks-module__desktop-stub">desktop component not supported</p>
+    </DashboardModule>
+  </div>
+</template>
+
+<style scoped>
+/* Follow ancestor data-skin — parity with Dashboard.vue and src/lib/theming.ts */
+.structured-tasks-module__variant--mobile {
+  display: none;
+}
+
+.structured-tasks-module__variant--desktop {
+  display: block;
+}
+
+[data-skin='mobile'] .structured-tasks-module__variant--mobile {
+  display: flex;
+}
+
+[data-skin='mobile'] .structured-tasks-module__variant--desktop {
+  display: none;
+}
+
+.structured-tasks-module__counter {
+  margin: 0 0 var(--spacing-75, 12px);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-base--subtle, #54595d);
+}
+
+.structured-tasks-module__preview {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-75, 12px);
+  padding: var(--spacing-75, 12px);
+  background-color: var(--background-color-base, #fff);
+  border: 1px solid var(--border-color-subtle, #a2a9b1);
+  border-radius: 2px;
+}
+
+.structured-tasks-module__thumb {
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+  object-fit: cover;
+  border-radius: 2px;
+}
+
+.structured-tasks-module__preview-text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-25, 4px);
+}
+
+.structured-tasks-module__article-title {
+  margin: 0;
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-medium);
+  line-height: var(--line-height-medium);
+  color: var(--color-base, #202122);
+}
+
+.structured-tasks-module__article-description {
+  margin: 0;
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-base--subtle, #54595d);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+.structured-tasks-module__task-type {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-25, 4px);
+  align-self: flex-end;
+  margin-top: var(--spacing-25, 4px);
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-bold);
+  color: #996600;
+}
+
+.structured-tasks-module__task-type-icon {
+  flex-shrink: 0;
+  color: inherit;
+}
+
+.structured-tasks-module__desktop-stub {
+  margin: 0;
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-base--subtle, #54595d);
+}
+</style>
diff --git a/src/prototypes/dashpage/dashpage-fixtures.ts b/src/prototypes/dashpage/dashpage-fixtures.ts
new file mode 100644
index 0000000..f10390f
--- /dev/null
+++ b/src/prototypes/dashpage/dashpage-fixtures.ts
@@ -0,0 +1,114 @@
+import type { MostViewedArticle } from './ImpactModule.vue'
+
+/** App gallery home — placeholder target for other mobile link cards. */
+export const APP_HOME = '/'
+
+/** Dashpage prototype route. */
+export const HOMEPAGE = '/dashpage'
+
+/** Full-page mobile drill-down for the Your impact module. */
+export const IMPACT_PAGE = '/dashpage/impact'
+
+/** Full-page mobile drill-down for the Get help with editing module. */
+export const HELP_PAGE = '/dashpage/help'
+
+/** Full-page mobile drill-down for the Your mentor module. */
+export const MENTOR_PAGE = '/dashpage/mentor'
+
+/** Mobile link-card preview copy (title is also the full-page header). */
+export const HELP_MODULE = {
+  title: 'Get help with editing',
+  summary: 'Ask the help desk or read help pages.',
+} as const
+
+export const HELP_LINKS = [
+  { label: 'How to edit a page', href: '#' },
+  { label: 'How to add an image', href: '#' },
+  { label: 'How to edit a citation', href: '#' },
+  { label: 'Simplified Manual of Style', href: '#' },
+  { label: 'How to write a good article', href: '#' },
+  { label: 'How to create a new article', href: '#' },
+]
+
+export const MENTOR = {
+  name: 'Samwalton9',
+  editCount: 12596,
+  lastActiveDaysAgo: 451,
+  note: 'Welcome to Wikipedia! Let me know if you have any questions',
+  learnMoreHref: '#',
+  conversationsHref: '#',
+} as const
+
+export const IMPACT = {
+  viewCount: '10.8K',
+  sparklineData: [
+    420, 390, 410, 430, 400, 380, 415, 440, 425, 405, 390, 420, 435, 410, 395, 430, 450, 420, 400,
+    415, 440, 425, 410, 395, 380, 400, 420, 410, 390, 405, 430, 415, 395, 380, 400, 420, 440, 410,
+    390, 380, 350, 360,
+  ],
+  lastEdited: '5 months ago',
+  longestStreak: '1 day',
+} as const
+
+export const IMPACT_DESKTOP: {
+  totalEdits: number
+  thanksReceived: number
+  lastEdited: string
+  longestStreak: string
+  viewCount: string
+  sparklineData: number[]
+  recentActivityData: number[]
+  activityStartDate: string
+  activityEndDate: string
+  mostViewed: MostViewedArticle[]
+  viewAllEditsHref: string
+} = {
+  totalEdits: 52,
+  thanksReceived: 0,
+  lastEdited: '5 months ago',
+  longestStreak: '1 day',
+  viewCount: '10,754',
+  sparklineData: [
+    420, 390, 410, 430, 400, 380, 415, 440, 425, 405, 390, 420, 435, 410, 395, 430, 450, 420, 400,
+    415, 440, 425, 410, 395, 380, 400, 420, 410, 390, 405, 430, 415, 395, 380, 400, 420, 440, 410,
+    390, 380, 350, 360,
+  ],
+  recentActivityData: [
+    0, 0, 2, 0, 1, 0, 0, 3, 0, 0, 1, 0, 0, 0, 2, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2, 0, 0, 0, 1, 0, 0, 0,
+    0, 2, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 2, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0,
+  ],
+  activityStartDate: 'Mar 17',
+  activityEndDate: 'May 15',
+  mostViewed: [
+    {
+      title: 'Bora Bora',
+      views: 4821,
+      sparklineData: [300, 320, 280, 350, 310, 290, 340, 360, 330, 300],
+      href: '#',
+    },
+    {
+      title: 'Wikipedia',
+      views: 3104,
+      sparklineData: [200, 210, 195, 220, 205, 215, 200, 210, 205, 195],
+      href: '#',
+    },
+    {
+      title: 'Atlantic Ocean',
+      views: 2187,
+      sparklineData: [150, 160, 145, 170, 155, 140, 160, 155, 145, 150],
+      href: '#',
+    },
+  ],
+  viewAllEditsHref: '#',
+}
+
+export const STRUCTURED_TASKS = {
+  currentIndex: 1,
+  totalCount: 173745,
+  articleTitle: 'Full circle ringing',
+  articleDescription: 'Method of hanging (church) bells and …',
+  /** Action API `pageimages` + `pithumbsize=96` for [[Full circle ringing]] */
+  thumbnailSrc:
+    'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/St_Botolph%27s_Bell_Ringing.webm/120px--St_Botolph%27s_Bell_Ringing.webm.jpg',
+  taskTypeLabel: 'Find references',
+} as const
diff --git a/src/prototypes/dashpage/help/index.vue b/src/prototypes/dashpage/help/index.vue
new file mode 100644
index 0000000..17cba55
--- /dev/null
+++ b/src/prototypes/dashpage/help/index.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import ChromeWrapper from '@/components/ChromeWrapper.vue'
+import MobileWrapper from '@/components/MobileWrapper.vue'
+import SpecialPageWrapper from '@/components/SpecialPageWrapper.vue'
+import HelpModule from '../HelpModule.vue'
+import MobileSubpageHeader from '../MobileSubpageHeader.vue'
+import { HELP_LINKS, HELP_MODULE, HOMEPAGE } from '../dashpage-fixtures'
+
+definePage({
+  meta: {
+    title: 'Dashpage — Help',
+    description: 'Full-page mobile drill-down for the Get help with editing homepage module.',
+  },
+})
+</script>
+
+<template>
+  <MobileWrapper>
+    <ChromeWrapper skin="mobile" :last-edited-notice="false">
+    <SpecialPageWrapper :title="null" class="help-page">
+      <MobileSubpageHeader
+        :title="HELP_MODULE.title"
+        :back-to="HOMEPAGE"
+        back-label="Back to dashpage"
+      />
+      <HelpModule standalone :help-links="HELP_LINKS" view-more-href="#" />
+    </SpecialPageWrapper>
+    </ChromeWrapper>
+  </MobileWrapper>
+</template>
+
+<style scoped>
+/* Match bleed inset — header negative margins cancel this top/inline padding. */
+.help-page :deep(.special-page-wrapper[data-skin='mobile']) {
+  padding-top: var(--spacing-100, 16px);
+}
+</style>
diff --git a/src/prototypes/dashpage/impact/index.vue b/src/prototypes/dashpage/impact/index.vue
new file mode 100644
index 0000000..774aa24
--- /dev/null
+++ b/src/prototypes/dashpage/impact/index.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import ChromeWrapper from '@/components/ChromeWrapper.vue'
+import MobileWrapper from '@/components/MobileWrapper.vue'
+import SpecialPageWrapper from '@/components/SpecialPageWrapper.vue'
+import { useConfig } from '@/composables/useConfig'
+import ImpactModule from '../ImpactModule.vue'
+import MobileSubpageHeader from '../MobileSubpageHeader.vue'
+import { HOMEPAGE, IMPACT_DESKTOP } from '../dashpage-fixtures'
+
+const { user } = useConfig()
+
+const impactProps = computed(() =>
+  user.value === 'experienced' ? IMPACT_DESKTOP : { thanksReceived: 0 },
+)
+
+definePage({
+  meta: {
+    title: 'Dashpage — Impact',
+    description: 'Full-page mobile drill-down for the Your impact homepage module.',
+  },
+})
+</script>
+
+<template>
+  <MobileWrapper>
+    <ChromeWrapper skin="mobile" :last-edited-notice="false">
+    <SpecialPageWrapper :title="null" class="impact-page">
+      <MobileSubpageHeader title="Your impact" :back-to="HOMEPAGE" back-label="Back to dashpage" />
+      <ImpactModule standalone v-bind="impactProps" />
+    </SpecialPageWrapper>
+    </ChromeWrapper>
+  </MobileWrapper>
+</template>
+
+<style scoped>
+/* Match bleed inset — header negative margins cancel this top/inline padding. */
+.impact-page :deep(.special-page-wrapper[data-skin='mobile']) {
+  padding-top: var(--spacing-100, 16px);
+}
+</style>
diff --git a/src/prototypes/dashpage/index.vue b/src/prototypes/dashpage/index.vue
new file mode 100644
index 0000000..9e22e74
--- /dev/null
+++ b/src/prototypes/dashpage/index.vue
@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { RouterLink } from 'vue-router'
+
+import ChromeWrapper from '@/components/ChromeWrapper.vue'
+import MobileWrapper from '@/components/MobileWrapper.vue'
+import Dashboard from '@/components/Dashboard.vue'
+import DashboardModule from '@/components/DashboardModule.vue'
+import SpecialPageWrapper from '@/components/SpecialPageWrapper.vue'
+import { useConfig } from '@/composables/useConfig'
+import { configUserPageTitle } from '@/lib/config'
+import HelpModule from './HelpModule.vue'
+import ImpactModule from './ImpactModule.vue'
+import MentorModule from './MentorModule.vue'
+import StructuredTasksModule from './StructuredTasksModule.vue'
+import {
+  APP_HOME,
+  HELP_LINKS,
+  HELP_MODULE,
+  HELP_PAGE,
+  IMPACT,
+  IMPACT_DESKTOP,
+  IMPACT_PAGE,
+  MENTOR,
+  MENTOR_PAGE,
+  STRUCTURED_TASKS,
+} from './dashpage-fixtures'
+
+const { user } = useConfig()
+
+const showLoggedInModules = computed(() => user.value !== 'logged-out')
+
+const impactMobileProps = computed(() =>
+  user.value === 'experienced' ? { to: IMPACT_PAGE, ...IMPACT } : { to: IMPACT_PAGE },
+)
+
+const impactDesktopProps = computed(() =>
+  user.value === 'experienced' ? IMPACT_DESKTOP : {},
+)
+
+const pageTitle = computed(() => configUserPageTitle(user.value))
+
+definePage({
+  meta: {
+    title: 'Dashpage',
+    description: 'Explorations for a homepage + dashboard hybrid',
+  },
+})
+</script>
+
+<template>
+  <MobileWrapper>
+    <ChromeWrapper skin="mobile" :last-edited-notice="false">
+    <SpecialPageWrapper :title="pageTitle" help>
+      <div class="prototype-dashpage-shell">
+        <Dashboard>
+          <template #banner>
+            <RouterLink :to="APP_HOME" class="dashboard-mobile-banner__feedback">
+              Share feedback
+            </RouterLink>
+          </template>
+
+          <template #mobile>
+            <StructuredTasksModule
+              class="dashboard-slot--mobile-primary"
+              :to="APP_HOME"
+              v-bind="STRUCTURED_TASKS"
+            />
+
+            <ImpactModule v-if="showLoggedInModules" v-bind="impactMobileProps" />
+
+            <MentorModule
+              v-if="showLoggedInModules"
+              compact
+              :to="MENTOR_PAGE"
+              :mentor-name="MENTOR.name"
+              :edit-count="MENTOR.editCount"
+              :last-active-days-ago="MENTOR.lastActiveDaysAgo"
+              :mentor-note="MENTOR.note"
+              :learn-more-href="MENTOR.learnMoreHref"
+              :conversations-href="MENTOR.conversationsHref"
+            />
+
+            <HelpModule compact :to="HELP_PAGE" v-bind="HELP_MODULE" />
+          </template>
+
+          <template #primary>
+            <StructuredTasksModule
+              class="dashboard-slot--desktop-primary"
+              :to="APP_HOME"
+              v-bind="STRUCTURED_TASKS"
+            />
+          </template>
+
+          <template #sidebar>
+            <ImpactModule v-if="showLoggedInModules" v-bind="impactDesktopProps" />
+
+            <MentorModule
+              v-if="showLoggedInModules"
+              :mentor-name="MENTOR.name"
+              :edit-count="MENTOR.editCount"
+              :last-active-days-ago="MENTOR.lastActiveDaysAgo"
+              :mentor-note="MENTOR.note"
+              :learn-more-href="MENTOR.learnMoreHref"
+              :conversations-href="MENTOR.conversationsHref"
+            />
+
+            <HelpModule :help-links="HELP_LINKS" view-more-href="#" />
+          </template>
+        </Dashboard>
+      </div>
+    </SpecialPageWrapper>
+    </ChromeWrapper>
+  </MobileWrapper>
+</template>
+
+<style scoped>
+.prototype-dashpage-shell {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+}
+
+:deep(.dashboard-slot--mobile-primary .dashboard-module__body) {
+  min-height: 3rem;
+}
+
+:deep(.dashboard-slot--desktop-primary .dashboard-module) {
+  min-height: 8rem;
+}
+</style>
diff --git a/src/prototypes/dashpage/mentor/index.vue b/src/prototypes/dashpage/mentor/index.vue
new file mode 100644
index 0000000..d6b5d05
--- /dev/null
+++ b/src/prototypes/dashpage/mentor/index.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { CdxButton, CdxIcon } from '@wikimedia/codex'
+import { cdxIconEllipsis } from '@wikimedia/codex-icons'
+
+import ChromeWrapper from '@/components/ChromeWrapper.vue'
+import MobileWrapper from '@/components/MobileWrapper.vue'
+import SpecialPageWrapper from '@/components/SpecialPageWrapper.vue'
+import MentorModule from '../MentorModule.vue'
+import MobileSubpageHeader from '../MobileSubpageHeader.vue'
+import { HOMEPAGE, MENTOR } from '../dashpage-fixtures'
+
+definePage({
+  meta: {
+    title: 'Dashpage — Mentor',
+    description: 'Full-page mobile drill-down for the Your mentor homepage module.',
+  },
+})
+</script>
+
+<template>
+  <MobileWrapper>
+    <ChromeWrapper skin="mobile" :last-edited-notice="false">
+    <SpecialPageWrapper :title="null" class="mentor-page">
+      <MobileSubpageHeader title="Your mentor" :back-to="HOMEPAGE" back-label="Back to dashpage">
+        <template #actions>
+          <CdxButton weight="quiet" :icon-only="true" aria-label="More options">
+            <CdxIcon :icon="cdxIconEllipsis" />
+          </CdxButton>
+        </template>
+      </MobileSubpageHeader>
+
+      <MentorModule
+        standalone
+        :mentor-name="MENTOR.name"
+        :edit-count="MENTOR.editCount"
+        :last-active-days-ago="MENTOR.lastActiveDaysAgo"
+        :mentor-note="MENTOR.note"
+        :learn-more-href="MENTOR.learnMoreHref"
+        :conversations-href="MENTOR.conversationsHref"
+      />
+    </SpecialPageWrapper>
+    </ChromeWrapper>
+  </MobileWrapper>
+</template>
+
+<style scoped>
+.mentor-page :deep(.special-page-wrapper[data-skin='mobile']) {
+  padding-top: var(--spacing-100, 16px);
+  background-color: var(--background-color-neutral-subtle, #f8f9fa);
+}
+
+.mentor-page :deep(.special-page-wrapper[data-skin='mobile'] .special-page-wrapper__body) {
+  padding-inline: 0;
+}
+</style>

From ddd34b5b8d9f974b144f39525ee27ea83afbedc6 Mon Sep 17 00:00:00 2001
From: Lu Wilson <lu@todepond.com>
Date: Thu, 21 May 2026 12:03:05 +0100
Subject: [PATCH 02/21] clean up

---
 .../references/dashboard.md                   |   4 +-
 .../skills/protowiki-getting-started/SKILL.md |   2 +-
 src/prototypes/dashpage/HelpModule.vue        | 148 ----
 src/prototypes/dashpage/ImpactModule.vue      | 699 ------------------
 src/prototypes/dashpage/MentorModule.vue      | 249 -------
 .../dashpage/MobileSubpageHeader.vue          | 105 ---
 .../dashpage/StructuredTasksModule.vue        | 164 ----
 src/prototypes/dashpage/dashpage-fixtures.ts  | 114 ---
 src/prototypes/dashpage/help/index.vue        |  37 -
 src/prototypes/dashpage/impact/index.vue      |  42 --
 src/prototypes/dashpage/index.vue             | 131 ----
 src/prototypes/dashpage/mentor/index.vue      |  55 --
 .../template-homepage/dashpage-fixtures.ts    |   2 +-
 .../template-homepage/help/index.vue          |   4 +-
 .../template-homepage/impact/index.vue        |   4 +-
 src/prototypes/template-homepage/index.vue    |   4 +-
 .../template-homepage/mentor/index.vue        |   4 +-
 17 files changed, 12 insertions(+), 1756 deletions(-)
 delete mode 100644 src/prototypes/dashpage/HelpModule.vue
 delete mode 100644 src/prototypes/dashpage/ImpactModule.vue
 delete mode 100644 src/prototypes/dashpage/MentorModule.vue
 delete mode 100644 src/prototypes/dashpage/MobileSubpageHeader.vue
 delete mode 100644 src/prototypes/dashpage/StructuredTasksModule.vue
 delete mode 100644 src/prototypes/dashpage/dashpage-fixtures.ts
 delete mode 100644 src/prototypes/dashpage/help/index.vue
 delete mode 100644 src/prototypes/dashpage/impact/index.vue
 delete mode 100644 src/prototypes/dashpage/index.vue
 delete mode 100644 src/prototypes/dashpage/mentor/index.vue

diff --git a/.agents/skills/protowiki-components/references/dashboard.md b/.agents/skills/protowiki-components/references/dashboard.md
index 469a3f9..d49c300 100644
--- a/.agents/skills/protowiki-components/references/dashboard.md
+++ b/.agents/skills/protowiki-components/references/dashboard.md
@@ -14,7 +14,7 @@ Reference prototypes:
 Do not confuse:
 
 - **`SpecialPageWrapper` `help`** — desktop title-row **Help** link (Codex docs URL)
-- **`dashpage/HelpModule.vue`** — prototype-local **"Get help with editing"** sidebar/mobile card (wraps **`DashboardModule`**)
+- **`template-homepage/HelpModule.vue`** — prototype-local **"Get help with editing"** sidebar/mobile card (wraps **`DashboardModule`**)
 
 ## `Dashboard`
 
@@ -35,7 +35,7 @@ With **`data-skin="desktop"`**, the two-column grid (`primary` ~66% + `sidebar`
 Utility classes from the component stylesheet:
 
 - **`dashboard-slot`** — min-height baseline on module roots
-- **`dashboard-slot--desktop-primary`**, **`dashboard-slot--mobile-primary`**, etc. — prototype hooks for per-slot sizing (see **`template-dashboard`** / **`dashpage`**)
+- **`dashboard-slot--desktop-primary`**, **`dashboard-slot--mobile-primary`**, etc. — prototype hooks for per-slot sizing (see **`template-dashboard`** / **`template-homepage`**)
 
 ### Props
 
diff --git a/.agents/skills/protowiki-getting-started/SKILL.md b/.agents/skills/protowiki-getting-started/SKILL.md
index bdac5a7..ff9256b 100644
--- a/.agents/skills/protowiki-getting-started/SKILL.md
+++ b/.agents/skills/protowiki-getting-started/SKILL.md
@@ -51,7 +51,7 @@ protowiki/
 │   │   ├── index.vue       ← home / gallery (auto-lists prototypes)
 │   │   ├── template-chrome/index.vue
 │   │   ├── template-dashboard/index.vue
-│   │   └── dashpage/index.vue
+│   │   └── template-homepage/index.vue
 │   ├── components/         ← shipped components (wrappers, primitives, article, dashboard)
 │   ├── composables/        ← useSkin / useTheme (read-only hooks)
 │   ├── lib/                ← theming logic, helpers
diff --git a/src/prototypes/dashpage/HelpModule.vue b/src/prototypes/dashpage/HelpModule.vue
deleted file mode 100644
index fc7864b..0000000
--- a/src/prototypes/dashpage/HelpModule.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<script setup lang="ts">
-import type { RouteLocationRaw } from 'vue-router'
-import { CdxIcon } from '@wikimedia/codex'
-import { cdxIconHelp } from '@wikimedia/codex-icons'
-
-import DashboardModule from '@/components/DashboardModule.vue'
-
-export interface HelpLink {
-  label: string
-  href: string
-}
-
-interface Props {
-  /** Full-page drill-down — body only, no `DashboardModule` card chrome. */
-  standalone?: boolean
-  compact?: boolean
-  to?: RouteLocationRaw
-  /** Mobile preview card title. */
-  title?: string
-  /** Mobile preview card body copy. */
-  summary?: string
-  helpLinks?: HelpLink[]
-  viewMoreHref?: string
-}
-
-withDefaults(defineProps<Props>(), {
-  standalone: false,
-  compact: false,
-  to: undefined,
-  title: 'Get help with editing',
-  summary: 'Ask the help desk or read help pages.',
-  helpLinks: () => [],
-  viewMoreHref: undefined,
-})
-</script>
-
-<template>
-  <!-- Standalone full page (mobile drill-down) -->
-  <div v-if="standalone" class="help-module help-module--standalone">
-    <template v-if="helpLinks.length > 0">
-      <p class="help-module__section-label">Top help pages about editing</p>
-      <ul class="help-module__list">
-        <li v-for="link in helpLinks" :key="link.href" class="help-module__list-item">
-          <a :href="link.href" class="help-module__link">{{ link.label }}</a>
-        </li>
-      </ul>
-    </template>
-    <a v-if="viewMoreHref" :href="viewMoreHref" class="help-module__link help-module__view-more">
-      View more help articles
-    </a>
-  </div>
-
-  <!-- Mobile: compact link card when `to` is set -->
-  <DashboardModule v-else-if="compact" :title="title" :to="to" :cta="null">
-    <p class="help-module__summary">{{ summary }}</p>
-  </DashboardModule>
-
-  <!-- Desktop: full static card with icon, link list, footer -->
-  <DashboardModule v-else>
-    <div class="help-module__full">
-      <CdxIcon :icon="cdxIconHelp" size="medium" class="help-module__icon" />
-      <div class="sidebar-card__title">{{ title }}</div>
-      <template v-if="helpLinks.length > 0">
-        <p class="help-module__section-label">Top help pages about editing</p>
-        <ul class="help-module__list">
-          <li v-for="link in helpLinks" :key="link.href" class="help-module__list-item">
-            <a :href="link.href" class="help-module__link">{{ link.label }}</a>
-          </li>
-        </ul>
-      </template>
-      <a v-if="viewMoreHref" :href="viewMoreHref" class="help-module__link help-module__view-more">
-        View more help articles
-      </a>
-    </div>
-  </DashboardModule>
-</template>
-
-<style scoped>
-.help-module--standalone {
-  box-sizing: border-box;
-  width: 100%;
-  min-width: 0;
-}
-
-.help-module__summary {
-  margin: 0;
-  font-size: var(--font-size-medium);
-  line-height: var(--line-height-medium);
-  color: var(--color-base--subtle, #54595d);
-}
-
-.help-module__icon {
-  color: var(--color-base, #202122);
-  width: var(--size-150);
-}
-
-.help-module__section-label {
-  margin: 0 0 var(--spacing-75, 12px);
-  font-size: var(--font-size-small);
-  font-weight: var(--font-weight-bold, 700);
-  line-height: var(--line-height-small);
-  color: var(--color-base--subtle, #54595d);
-}
-
-.help-module__list {
-  margin: 0 0 var(--spacing-100, 16px);
-  padding: 0;
-  list-style: none;
-}
-
-.help-module__list-item {
-  position: relative;
-  margin: 0 0 var(--spacing-75, 12px);
-  padding-left: var(--spacing-125, 20px);
-  font-size: var(--font-size-medium);
-  line-height: var(--line-height-medium);
-}
-
-.help-module__list-item::before {
-  position: absolute;
-  left: 0;
-  top: 0.55em;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background-color: var(--color-progressive, #36c);
-  content: '';
-}
-
-.help-module__list-item:last-child {
-  margin-bottom: 0;
-}
-
-.help-module__link {
-  color: var(--color-progressive, #36c);
-  text-decoration: none;
-}
-
-.help-module__link:hover {
-  text-decoration: underline;
-}
-
-.help-module__view-more {
-  display: inline-block;
-  font-size: var(--font-size-medium);
-  line-height: var(--line-height-medium);
-}
-</style>
diff --git a/src/prototypes/dashpage/ImpactModule.vue b/src/prototypes/dashpage/ImpactModule.vue
deleted file mode 100644
index 9c860f8..0000000
--- a/src/prototypes/dashpage/ImpactModule.vue
+++ /dev/null
@@ -1,699 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { RouteLocationRaw } from 'vue-router'
-import { CdxIcon } from '@wikimedia/codex'
-import {
-  cdxIconChart,
-  cdxIconClock,
-  cdxIconEdit,
-  cdxIconInfo,
-  cdxIconUserTalk,
-} from '@wikimedia/codex-icons'
-
-import DashboardModule from '@/components/DashboardModule.vue'
-
-export interface MostViewedArticle {
-  title: string
-  views: number
-  thumbnailSrc?: string
-  href?: string
-  sparklineData?: number[]
-}
-
-interface Props {
-  /** Full-page drill-down — desktop layout without `DashboardModule` card chrome. */
-  standalone?: boolean
-  to?: RouteLocationRaw
-  /** When set: filled state. Also used as the views count label. */
-  viewCount?: string
-  viewLabel?: string
-  sparklineData?: number[]
-  // Mobile filled
-  lastEdited?: string
-  longestStreak?: string
-  // Desktop (empty + filled)
-  thanksReceived?: number
-  // Desktop filled only
-  totalEdits?: number
-  recentActivityData?: number[]
-  activityStartDate?: string
-  activityEndDate?: string
-  mostViewed?: MostViewedArticle[]
-  viewAllEditsHref?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  standalone: false,
-  to: undefined,
-  viewCount: undefined,
-  viewLabel: 'Views on articles you\'ve edited',
-  sparklineData: () => [],
-  lastEdited: undefined,
-  longestStreak: undefined,
-  thanksReceived: 0,
-  totalEdits: undefined,
-  recentActivityData: () => [],
-  activityStartDate: undefined,
-  activityEndDate: undefined,
-  mostViewed: () => [],
-  viewAllEditsHref: undefined,
-})
-
-const hasContent = computed(() => !!props.viewCount)
-const isMobilePreview = computed(() => !props.standalone && props.to != null)
-
-// ── Sparkline helpers ────────────────────────────────
-const W = 300
-const H = 48
-
-function toPoints(data: number[], w = W, h = H): [number, number][] {
-  const min = Math.min(...data)
-  const max = Math.max(...data)
-  const range = max - min || 1
-  return data.map((v, i) => [
-    (i / (data.length - 1)) * w,
-    h - ((v - min) / range) * (h * 0.8) - h * 0.1,
-  ])
-}
-
-function makeLine(data: number[], w = W, h = H): string {
-  if (data.length < 2) return ''
-  return toPoints(data, w, h)
-    .map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`)
-    .join(' ')
-}
-
-function makeArea(data: number[], w = W, h = H): string {
-  const line = makeLine(data, w, h)
-  return line ? `${line} L${w},${h} L0,${h} Z` : ''
-}
-
-const linePath = computed(() => makeLine(props.sparklineData))
-const areaPath = computed(() => makeArea(props.sparklineData))
-
-// ── Activity bar chart ───────────────────────────────
-const BAR_W = 300
-const BAR_H = 32
-
-const activityBars = computed(() => {
-  const data = props.recentActivityData
-  if (!data.length) return []
-  const max = Math.max(...data, 1)
-  const barWidth = BAR_W / data.length
-  const gap = 1
-  return data.map((v, i) => ({
-    x: i * barWidth + gap / 2,
-    y: v === 0 ? BAR_H - 2 : BAR_H - (v / max) * BAR_H,
-    width: Math.max(barWidth - gap, 1),
-    height: v === 0 ? 2 : (v / max) * BAR_H,
-    active: v > 0,
-  }))
-})
-
-const recentEditCount = computed(() =>
-  props.recentActivityData.reduce((s, v) => s + v, 0)
-)
-</script>
-
-<template>
-  <component
-    :is="standalone ? 'div' : DashboardModule"
-    :class="standalone ? 'impact-module impact-module--standalone' : undefined"
-    v-bind="
-      standalone
-        ? {}
-        : { title: 'Your impact', to, cta: null }
-    "
-  >
-
-    <!-- ① Mobile filled ─────────────────────────────── -->
-    <template v-if="hasContent && isMobilePreview">
-      <div class="impact-module__stat-row">
-        <span class="impact-module__count">{{ viewCount }}</span>
-        <span class="impact-module__count-label">{{ viewLabel }}</span>
-      </div>
-      <svg
-        v-if="sparklineData.length >= 2"
-        class="impact-module__sparkline"
-        :viewBox="`0 0 ${W} ${H}`"
-        preserveAspectRatio="none"
-        aria-hidden="true"
-      >
-        <path :d="areaPath" class="impact-module__area" />
-        <path :d="linePath" class="impact-module__line" />
-      </svg>
-      <div v-if="lastEdited || longestStreak" class="impact-module__metrics">
-        <div v-if="lastEdited" class="impact-module__metric">
-          <span class="impact-module__metric-label">Last edited</span>
-          <span class="impact-module__metric-value">{{ lastEdited }}</span>
-        </div>
-        <div v-if="longestStreak" class="impact-module__metric">
-          <span class="impact-module__metric-label">Longest streak</span>
-          <span class="impact-module__metric-value">{{ longestStreak }}</span>
-        </div>
-      </div>
-    </template>
-
-    <!-- ② Desktop filled ────────────────────────────── -->
-    <template v-else-if="hasContent">
-      <!-- 2×2 stats grid -->
-      <div class="impact-module__desktop-stats impact-module__desktop-stats--grid">
-        <div class="impact-module__desktop-stat">
-          <div class="impact-module__desktop-stat-value-row">
-            <CdxIcon :icon="cdxIconEdit" size="small" class="impact-module__desktop-stat-icon" />
-            <span class="impact-module__desktop-stat-value impact-module__desktop-stat-value--progressive">{{ totalEdits ?? 0 }}</span>
-          </div>
-          <span class="impact-module__desktop-stat-label">Total edits</span>
-        </div>
-        <div class="impact-module__desktop-stat impact-module__desktop-stat--border-left">
-          <div class="impact-module__desktop-stat-value-row">
-            <CdxIcon :icon="cdxIconUserTalk" size="small" class="impact-module__desktop-stat-icon" />
-            <span class="impact-module__desktop-stat-value">{{ thanksReceived }}</span>
-          </div>
-          <div class="impact-module__desktop-stat-label-row">
-            <span class="impact-module__desktop-stat-label">Thanks received</span>
-            <CdxIcon :icon="cdxIconInfo" size="small" class="impact-module__desktop-info-icon" />
-          </div>
-        </div>
-        <div class="impact-module__desktop-stat impact-module__desktop-stat--border-top">
-          <div class="impact-module__desktop-stat-value-row">
-            <CdxIcon :icon="cdxIconClock" size="small" class="impact-module__desktop-stat-icon" />
-            <span class="impact-module__desktop-stat-value">{{ lastEdited }}</span>
-          </div>
-          <span class="impact-module__desktop-stat-label">Last edited</span>
-        </div>
-        <div class="impact-module__desktop-stat impact-module__desktop-stat--border-top impact-module__desktop-stat--border-left">
-          <div class="impact-module__desktop-stat-value-row">
-            <CdxIcon :icon="cdxIconChart" size="small" class="impact-module__desktop-stat-icon" />
-            <span class="impact-module__desktop-stat-value">{{ longestStreak }}</span>
-          </div>
-          <div class="impact-module__desktop-stat-label-row">
-            <span class="impact-module__desktop-stat-label">Longest streak</span>
-            <CdxIcon :icon="cdxIconInfo" size="small" class="impact-module__desktop-info-icon" />
-          </div>
-        </div>
-      </div>
-
-      <!-- Recent activity bar chart -->
-      <div class="impact-module__activity">
-        <p class="impact-module__activity-title">Your recent activity (last 60 days)</p>
-        <div class="impact-module__activity-body">
-          <div class="impact-module__activity-left">
-            <span class="impact-module__activity-count-value">{{ recentEditCount }}</span>
-            <span class="impact-module__activity-count-label">Edits</span>
-          </div>
-          <div class="impact-module__activity-right">
-            <svg
-              class="impact-module__activity-chart"
-              :viewBox="`0 0 ${BAR_W} ${BAR_H}`"
-              preserveAspectRatio="none"
-              aria-hidden="true"
-            >
-              <rect
-                v-for="(bar, i) in activityBars"
-                :key="i"
-                :x="bar.x"
-                :y="bar.y"
-                :width="bar.width"
-                :height="bar.height"
-                class="impact-module__activity-bar"
-                :class="{ 'impact-module__activity-bar--active': bar.active }"
-              />
-            </svg>
-            <div v-if="activityStartDate || activityEndDate" class="impact-module__activity-dates">
-              <span>{{ activityStartDate }}</span>
-              <span>{{ activityEndDate }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Views sparkline -->
-      <div class="impact-module__stat-row">
-        <span class="impact-module__count">{{ viewCount }}</span>
-        <span class="impact-module__count-label">{{ viewLabel }}</span>
-      </div>
-      <svg
-        v-if="sparklineData.length >= 2"
-        class="impact-module__sparkline"
-        :viewBox="`0 0 ${W} ${H}`"
-        preserveAspectRatio="none"
-        aria-hidden="true"
-      >
-        <path :d="areaPath" class="impact-module__area" />
-        <path :d="linePath" class="impact-module__line" />
-      </svg>
-
-      <!-- Most viewed articles -->
-      <template v-if="mostViewed.length > 0">
-        <p class="impact-module__most-viewed-title">Most viewed (since your edit)</p>
-        <div class="impact-module__most-viewed-list">
-          <div
-            v-for="article in mostViewed"
-            :key="article.title"
-            class="impact-module__most-viewed-item"
-          >
-            <div class="impact-module__most-viewed-thumb">
-              <img v-if="article.thumbnailSrc" :src="article.thumbnailSrc" :alt="article.title" />
-            </div>
-            <a :href="article.href ?? '#'" class="impact-module__most-viewed-title-link">{{ article.title }}</a>
-            <div class="impact-module__most-viewed-views-col">
-              <span class="impact-module__most-viewed-count">{{ article.views.toLocaleString() }}</span>
-              <svg
-                v-if="article.sparklineData && article.sparklineData.length >= 2"
-                class="impact-module__mini-sparkline"
-                viewBox="0 0 60 24"
-                preserveAspectRatio="none"
-                aria-hidden="true"
-              >
-                <path :d="makeLine(article.sparklineData, 60, 24)" class="impact-module__line" />
-              </svg>
-            </div>
-          </div>
-        </div>
-        <a v-if="viewAllEditsHref" :href="viewAllEditsHref" class="impact-module__view-all">View all edits</a>
-      </template>
-    </template>
-
-    <!-- ③ Mobile empty ──────────────────────────────── -->
-    <template v-else-if="isMobilePreview">
-      <div class="impact-module__empty-hero">
-        <img
-          src="https://en.wikipedia.org/w/extensions/GrowthExperiments/images/intro-heart-article.png?269e6"
-          alt=""
-          class="impact-module__empty-image"
-        />
-        <div class="impact-module__empty-text">
-          <p class="impact-module__empty-heading">0 edits to articles so far</p>
-          <p class="impact-module__empty-body">Help extend free knowledge to the world by editing topics that matter most to you.</p>
-        </div>
-      </div>
-      <p class="impact-module__empty-footer">
-        Start with a few <strong>suggested edits</strong>, then see how many people are viewing your contributions here.
-      </p>
-    </template>
-
-    <!-- ④ Desktop empty ─────────────────────────────── -->
-    <template v-else>
-      <div class="impact-module__desktop-stats">
-        <div class="impact-module__desktop-stat">
-          <div class="impact-module__desktop-stat-value-row">
-            <CdxIcon :icon="cdxIconUserTalk" size="small" class="impact-module__desktop-stat-icon" />
-            <span class="impact-module__desktop-stat-value">{{ thanksReceived }}</span>
-          </div>
-          <div class="impact-module__desktop-stat-label-row">
-            <span class="impact-module__desktop-stat-label">Thanks received</span>
-            <CdxIcon :icon="cdxIconInfo" size="small" class="impact-module__desktop-info-icon" />
-          </div>
-        </div>
-        <div class="impact-module__desktop-stat-divider" />
-        <div class="impact-module__desktop-stat">
-          <div class="impact-module__desktop-stat-value-row">
-            <CdxIcon :icon="cdxIconChart" size="small" class="impact-module__desktop-stat-icon" />
-            <span class="impact-module__desktop-stat-value">–</span>
-          </div>
-          <div class="impact-module__desktop-stat-label-row">
-            <span class="impact-module__desktop-stat-label">Longest streak</span>
-            <CdxIcon :icon="cdxIconInfo" size="small" class="impact-module__desktop-info-icon" />
-          </div>
-        </div>
-      </div>
-      <div class="impact-module__desktop-empty-body">
-        <img
-          src="https://en.wikipedia.org/w/extensions/GrowthExperiments/images/intro-heart-article.png?269e6"
-          alt=""
-          class="impact-module__desktop-empty-image"
-        />
-        <p class="impact-module__desktop-empty-heading">0 edits to articles so far</p>
-        <p class="impact-module__desktop-empty-subheading">Help extend free knowledge to the world by editing topics that matter most to you.</p>
-      </div>
-      <p class="impact-module__empty-footer">
-        Start with a few <strong>suggested edits</strong>, then see how many people are viewing your contributions here.
-      </p>
-    </template>
-
-  </component>
-</template>
-
-<style scoped>
-.impact-module--standalone {
-  box-sizing: border-box;
-  width: 100%;
-  min-width: 0;
-}
-
-/* ── Shared: sparkline ────────────────────────────── */
-.impact-module__sparkline {
-  display: block;
-  width: 100%;
-  height: var(--size-100);
-  overflow: visible;
-  margin-bottom: var(--spacing-50, 8px);
-}
-
-.impact-module__area {
-  fill: var(--background-color-progressive-subtle);
-  stroke: none;
-}
-
-.impact-module__line {
-  fill: none;
-  stroke: var(--border-color-progressive);
-  stroke-width: 1.5;
-  stroke-linejoin: round;
-  stroke-linecap: round;
-}
-
-/* ── Shared: desktop stats grid cell ──────────────── */
-.impact-module__desktop-stats {
-  display: flex;
-  align-items: stretch;
-  background-color: var(--background-color-interactive-subtle, #eaf3ff);
-  margin-bottom: var(--spacing-100, 16px);
-  overflow: hidden;
-}
-
-.impact-module__desktop-stats--grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  background-color: var(--background-color-progressive-subtle);
-}
-
-.impact-module__desktop-stat {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-25, 4px);
-  padding: var(--spacing-75, 12px);
-  flex-grow: 1;
-}
-
-.impact-module__desktop-stat--border-left {
-  border-left: 1px solid var(--border-color-subtle, #a2a9b1);
-}
-
-.impact-module__desktop-stat--border-top {
-  border-top: 1px solid var(--border-color-subtle, #a2a9b1);
-}
-
-.impact-module__desktop-stat-divider {
-  width: 1px;
-  background-color: var(--border-color-subtle, #a2a9b1);
-  flex-shrink: 0;
-}
-
-.impact-module__desktop-stat-value-row {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-50, 8px);
-}
-
-.impact-module__desktop-stat-icon {
-  color: var(--color-subtle);
-  flex-shrink: 0;
-}
-
-.impact-module__desktop-stat-value {
-  font-weight: var(--font-weight-bold, 700);
-  line-height: 1;
-  color: var(--color-base, #202122);
-}
-
-.impact-module__desktop-stat-value--progressive {
-  color: var(--color-progressive, #36c);
-}
-
-.impact-module__desktop-stat-label-row {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-50, 8px);
-}
-
-.impact-module__desktop-stat-label {
-  font-size: var(--font-size-small);
-  color: var(--color-subtle);
-  flex-grow: 1;
-}
-
-.impact-module__desktop-info-icon {
-  color: var(--color-base--subtle, #54595d);
-  flex-shrink: 0;
-}
-
-/* ── Mobile filled ────────────────────────────────── */
-.impact-module__stat-row {
-  display: flex;
-  align-items: baseline;
-  gap: var(--spacing-50, 8px);
-  flex-wrap: nowrap;
-  margin-bottom: var(--spacing-25, 4px);
-}
-
-.impact-module__count {
-  font-size: var(--font-size-xx-large, 2rem);
-  font-weight: var(--font-weight-bold, 700);
-  line-height: 1;
-}
-
-.impact-module__count-label {
-  font-size: var(--font-size-medium);
-  line-height: var(--line-height-medium);
-}
-
-.impact-module__metrics {
-  display: flex;
-  gap: var(--spacing-100, 16px);
-  font-size: var(--font-size-medium);
-  line-height: var(--line-height-medium);
-}
-
-.impact-module__metric {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-}
-
-.impact-module__metric-value {
-  font-weight: var(--font-weight-bold, 700);
-}
-
-/* ── Desktop filled: activity chart ──────────────── */
-.impact-module__activity {
-  margin-bottom: var(--spacing-75, 12px);
-}
-
-.impact-module__activity-title {
-  margin: 0 0 var(--spacing-50, 8px);
-  font-size: var(--font-size-small);
-  font-weight: var(--font-weight-bold, 700);
-  color: var(--color-base, #202122);
-}
-
-.impact-module__activity-body {
-  display: flex;
-  align-items: end;
-  gap: var(--spacing-100, 16px);
-}
-
-.impact-module__activity-left {
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-}
-
-.impact-module__activity-count-value {
-  font-size: var(--font-size-xx-large);
-  font-weight: var(--font-weight-bold, 700);
-  color: var(--color-base, #202122);
-  line-height: 1;
-}
-
-.impact-module__activity-count-label {
-  font-size: var(--font-size-small);
-  color: var(--color-base--subtle, #54595d);
-}
-
-.impact-module__activity-right {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-width: 0;
-}
-
-.impact-module__activity-chart {
-  display: block;
-  width: 100%;
-  height: 32px;
-  flex: 1;
-}
-
-.impact-module__activity-bar {
-  fill: var(--background-color-interactive, #eaecf0);
-}
-
-.impact-module__activity-bar--active {
-  fill: var(--border-color-progressive, #36c);
-}
-
-.impact-module__activity-dates {
-  display: flex;
-  justify-content: space-between;
-  font-size: var(--font-size-small);
-  color: var(--color-subtle, #54595d);
-}
-
-/* ── Desktop filled: most viewed ─────────────────── */
-.impact-module__most-viewed-title {
-  margin: var(--spacing-100, 16px) 0;
-  font-weight: var(--font-weight-bold, 700);
-  color: var(--color-base, #202122);
-}
-
-.impact-module__most-viewed-list {
-  display: flex;
-  flex-direction: column;
-}
-
-.impact-module__most-viewed-item:nth-child(even) {
-  background-color: var(--background-color-interactive-subtle, #eaf3ff);
-}
-
-.impact-module__most-viewed-item {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-50, 8px);
-  padding: var(--spacing-25, 4px);
-}
-
-.impact-module__most-viewed-thumb {
-  flex-shrink: 0;
-  width: 40px;
-  height: 40px;
-  overflow: hidden;
-  background-color: var(--background-color-neutral);
-  border: 1px solid var(--border-color-subtle);
-  border-radius: 2px;
-}
-
-.impact-module__most-viewed-thumb img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.impact-module__most-viewed-title-link {
-  flex: 1;
-  font-size: var(--font-size-small);
-  font-weight: var(--font-weight-bold, 700);
-  color: var(--color-progressive, #36c);
-  text-decoration: none;
-  min-width: 0;
-}
-
-.impact-module__most-viewed-title-link:hover {
-  text-decoration: underline;
-}
-
-.impact-module__most-viewed-views-col {
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--spacing-25, 4px);
-}
-
-.impact-module__most-viewed-count {
-  font-size: var(--font-size-small);
-  font-weight: var(--font-weight-bold, 700);
-  color: var(--color-progressive, #36c);
-}
-
-.impact-module__mini-sparkline {
-  display: block;
-  width: 20px;
-  height: 10px;
-}
-
-.impact-module__mini-sparkline > path {
-  stroke-width: 3px;
-}
-
-.impact-module__view-all {
-  display: block;
-  margin-top: var(--spacing-75, 12px);
-  font-weight: var(--font-weight-bold);
-}
-
-.impact-module__view-all:hover {
-  text-decoration: underline;
-}
-
-/* ── Mobile empty ─────────────────────────────────── */
-.impact-module__empty-hero {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-100, 16px);
-  margin-bottom: var(--spacing-100, 16px);
-}
-
-.impact-module__empty-image {
-  flex-shrink: 0;
-  width: 72px;
-  height: auto;
-}
-
-.impact-module__empty-text {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-25, 4px);
-  min-width: 0;
-}
-
-.impact-module__empty-heading {
-  margin: 0;
-  font-size: var(--font-size-medium);
-  font-weight: var(--font-weight-bold, 700);
-  line-height: var(--line-height-small);
-}
-
-.impact-module__empty-body {
-  margin: 0;
-  font-size: var(--font-size-medium);
-  line-height: var(--line-height-medium);
-}
-
-.impact-module__empty-footer {
-  margin: 0;
-  font-size: var(--font-size-small);
-  line-height: var(--line-height-small);
-  color: var(--color-base--subtle, #54595d);
-}
-
-/* ── Desktop empty ────────────────────────────────── */
-.impact-module__desktop-empty-body {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  gap: var(--spacing-50, 8px);
-  margin-bottom: var(--spacing-75, 12px);
-}
-
-.impact-module__desktop-empty-image {
-  width: 140px;
-  height: auto;
-}
-
-.impact-module__desktop-empty-heading {
-  margin: 0;
-  font-size: var(--font-size-xx-large);
-  font-weight: var(--font-weight-bold, 700);
-  line-height: var(--line-height-small);
-}
-
-.impact-module__desktop-empty-subheading {
-  margin: 0;
-  font-size: var(--font-size-small);
-  font-weight: var(--font-weight-bold, 700);
-  line-height: var(--line-height-small);
-}
-</style>
diff --git a/src/prototypes/dashpage/MentorModule.vue b/src/prototypes/dashpage/MentorModule.vue
deleted file mode 100644
index 5f25310..0000000
--- a/src/prototypes/dashpage/MentorModule.vue
+++ /dev/null
@@ -1,249 +0,0 @@
-<script setup lang="ts">
-import type { RouteLocationRaw } from 'vue-router'
-import { CdxButton, CdxIcon } from '@wikimedia/codex'
-import { cdxIconUserAvatar } from '@wikimedia/codex-icons'
-
-import DashboardModule from '@/components/DashboardModule.vue'
-
-interface Props {
-  /** Full-page drill-down — body only, no `DashboardModule` card chrome. */
-  standalone?: boolean
-  /** Mobile preview link card. */
-  compact?: boolean
-  mentorName: string
-  lastActiveDaysAgo: number
-  editCount?: number
-  mentorNote?: string
-  to?: RouteLocationRaw
-  learnMoreHref?: string
-  conversationsHref?: string
-  /** Profile link for the mentor username (standalone / desktop). */
-  mentorProfileHref?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  standalone: false,
-  compact: false,
-  editCount: undefined,
-  mentorNote: undefined,
-  to: undefined,
-  learnMoreHref: undefined,
-  conversationsHref: undefined,
-  mentorProfileHref: '#',
-})
-</script>
-
-<template>
-  <!-- Standalone full page (mobile drill-down) -->
-  <div v-if="standalone" class="mentor-module mentor-module--standalone">
-    <p class="mentor-module__intro">
-      We've assigned you an experienced editor to answer your questions about editing.
-      <a
-        v-if="learnMoreHref"
-        :href="learnMoreHref"
-        class="mentor-module__link"
-      >Learn more about mentors.</a>
-    </p>
-
-    <div class="mentor-module__user">
-      <CdxIcon :icon="cdxIconUserAvatar" size="medium" class="mentor-module__avatar" />
-      <div class="mentor-module__user-info">
-        <a
-          :href="mentorProfileHref"
-          class="mentor-module__name mentor-module__name--link"
-        >{{ mentorName }}</a>
-        <p class="mentor-module__meta">
-          <span v-if="editCount != null">{{ editCount.toLocaleString() }} edits · </span>Active {{ lastActiveDaysAgo }} days ago
-        </p>
-      </div>
-    </div>
-
-    <blockquote v-if="mentorNote" class="mentor-module__note mentor-module__note--quote">
-      {{ mentorNote }}
-    </blockquote>
-
-    <CdxButton class="mentor-module__ask-btn mentor-module__ask-btn--standalone" weight="normal">
-      Ask your mentor a question about editing
-    </CdxButton>
-
-    <p v-if="conversationsHref" class="mentor-module__conversations mentor-module__conversations--centered">
-      <a :href="conversationsHref" class="mentor-module__link">View your mentor's other conversations</a>
-    </p>
-  </div>
-
-  <!-- Mobile: compact preview link card -->
-  <DashboardModule v-else-if="compact" title="Your mentor" :to="to" :cta="null">
-    <p class="mentor-module__intro">
-      We've assigned you an experienced editor to answer your questions about editing.
-    </p>
-    <div class="mentor-module__user">
-      <CdxIcon :icon="cdxIconUserAvatar" size="medium" class="mentor-module__avatar" />
-      <div class="mentor-module__user-info">
-        <span class="mentor-module__name">{{ mentorName }}</span>
-      </div>
-    </div>
-    <span class="mentor-module__meta">Active {{ lastActiveDaysAgo }} days ago</span>
-  </DashboardModule>
-
-  <!-- Desktop: full detail inside static sidebar card -->
-  <DashboardModule v-else>
-    <p class="mentor-module__intro">
-      We've assigned you an experienced editor to answer your questions about editing.
-      <a
-        v-if="learnMoreHref"
-        :href="learnMoreHref"
-        class="mentor-module__link"
-      >Learn more about mentors.</a>
-    </p>
-    <div class="mentor-module__user">
-      <CdxIcon :icon="cdxIconUserAvatar" size="medium" class="mentor-module__avatar" />
-      <div class="mentor-module__user-info">
-        <a
-          :href="mentorProfileHref"
-          class="mentor-module__name mentor-module__name--progressive"
-        >{{ mentorName }}</a>
-      </div>
-    </div>
-    <p class="mentor-module__meta">
-      <span v-if="editCount != null">{{ editCount.toLocaleString() }} edits · </span>Active {{ lastActiveDaysAgo }} days ago
-    </p>
-    <blockquote v-if="mentorNote" class="mentor-module__note">
-      {{ mentorNote }}
-    </blockquote>
-    <CdxButton class="mentor-module__ask-btn" weight="normal">Ask your mentor a question about editing</CdxButton>
-    <p v-if="conversationsHref" class="mentor-module__conversations">
-      <a :href="conversationsHref" class="mentor-module__link">View your mentor's other conversations</a>
-    </p>
-  </DashboardModule>
-</template>
-
-<style scoped>
-.mentor-module--standalone {
-  box-sizing: border-box;
-  width: 100%;
-  min-width: 0;
-  padding: var(--spacing-100, 16px);
-  background-color: var(--background-color-base, #fff);
-}
-
-.mentor-module__intro {
-  margin: 0 0 var(--spacing-100, 16px);
-  font-size: var(--font-size-medium);
-  line-height: var(--line-height-medium);
-  color: var(--color-base, #202122);
-}
-
-.mentor-module__link {
-  color: var(--color-progressive, #36c);
-  text-decoration: none;
-}
-
-.mentor-module__link:hover {
-  text-decoration: underline;
-}
-
-.mentor-module__user {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-100, 16px);
-  margin-bottom: var(--spacing-100, 16px);
-}
-
-.mentor-module__avatar {
-  flex-shrink: 0;
-  color: var(--color-base--subtle, #54595d);
-  width: 2.5rem;
-  height: 2.5rem;
-}
-
-.mentor-module__user-info {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-25, 4px);
-  min-width: 0;
-}
-
-.mentor-module__name {
-  font-size: var(--font-size-large);
-  font-weight: var(--font-weight-bold, 700);
-  line-height: var(--line-height-small);
-}
-
-.mentor-module__name--progressive,
-.mentor-module__name--link {
-  color: var(--color-progressive, #36c);
-  text-decoration: none;
-}
-
-.mentor-module__name--link:hover {
-  text-decoration: underline;
-}
-
-.mentor-module__meta {
-  margin: 0;
-  font-size: var(--font-size-small);
-  line-height: var(--line-height-small);
-  color: var(--color-base--subtle, #54595d);
-}
-
-.mentor-module__note {
-  margin: 0 0 var(--spacing-100, 16px);
-  padding: 0 var(--spacing-75, 12px);
-  border-left: 4px solid var(--border-color-subtle, #a2a9b1);
-  font-family: var(--font-family-system-sans);
-  font-size: var(--font-size-medium);
-  line-height: var(--line-height-medium);
-}
-
-.mentor-module__note--quote {
-  font-family: var(--font-family-serif, 'Linux Libertine', Georgia, Times, serif);
-  font-style: italic;
-}
-
-.mentor-module__ask-btn {
-  margin: 0 0 var(--spacing-100, 16px);
-  white-space: normal;
-  font-size: var(--font-size-small);
-  line-height: var(--line-height-small);
-}
-
-.mentor-module__ask-btn--standalone {
-  display: flex;
-  width: 100%;
-  justify-content: center;
-  padding: var(--spacing-75, 12px) var(--spacing-100, 16px);
-  font-size: var(--font-size-medium);
-  font-weight: var(--font-weight-bold, 700);
-  line-height: var(--line-height-medium);
-  background-color: var(--background-color-neutral-subtle, #f8f9fa);
-  border: 1px solid var(--border-color-subtle, #a2a9b1);
-}
-
-.mentor-module__conversations {
-  margin: 0;
-  line-height: var(--line-height-medium);
-}
-
-.mentor-module__conversations--centered {
-  text-align: center;
-}
-
-@media (min-width: 641px) {
-  .mentor-module__intro {
-    line-height: var(--line-height-small);
-  }
-
-  .mentor-module__meta {
-    font-size: var(--font-size-x-small);
-  }
-
-  .mentor-module__note {
-    font-size: var(--font-size-small);
-    line-height: var(--line-height-small);
-  }
-
-  .mentor-module__conversations {
-    line-height: var(--line-height-small);
-  }
-}
-</style>
diff --git a/src/prototypes/dashpage/MobileSubpageHeader.vue b/src/prototypes/dashpage/MobileSubpageHeader.vue
deleted file mode 100644
index 17f83d4..0000000
--- a/src/prototypes/dashpage/MobileSubpageHeader.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<script setup lang="ts">
-import type { RouteLocationRaw } from 'vue-router'
-import { RouterLink } from 'vue-router'
-import { CdxButton, CdxIcon } from '@wikimedia/codex'
-import { cdxIconArrowNext } from '@wikimedia/codex-icons'
-
-interface Props {
-  /** Centered toolbar title (Minerva subpage pattern). */
-  title: string
-  /** Vue Router target for the back control. */
-  backTo: RouteLocationRaw
-  /** Accessible name for the back link. */
-  backLabel?: string
-  /**
-   * Pull the bar into `SpecialPageWrapper` mobile padding so it hugs the top and sides.
-   * Matches `--spacing-100` on the wrapper’s inline / top inset.
-   */
-  bleed?: boolean
-}
-
-withDefaults(defineProps<Props>(), {
-  backLabel: 'Back',
-  bleed: true,
-})
-</script>
-
-<template>
-  <header class="mobile-subpage-header" :class="{ 'mobile-subpage-header--bleed': bleed }">
-    <RouterLink
-      :to="backTo"
-      class="mobile-subpage-header__back"
-      :aria-label="backLabel"
-    >
-      <CdxButton weight="quiet" :icon-only="true" tabindex="-1">
-        <CdxIcon :icon="cdxIconArrowNext" dir="rtl" />
-      </CdxButton>
-    </RouterLink>
-    <h1 class="mobile-subpage-header__title">{{ title }}</h1>
-    <div class="mobile-subpage-header__actions">
-      <slot name="actions">
-        <span class="mobile-subpage-header__spacer" aria-hidden="true" />
-      </slot>
-    </div>
-  </header>
-</template>
-
-<style scoped>
-.mobile-subpage-header {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-50, 8px);
-  box-sizing: border-box;
-  width: 100%;
-  min-height: 2.75rem;
-  margin: 0 0 var(--spacing-100, 16px);
-  padding-bottom: var(--spacing-50, 8px);
-  border-bottom: 1px solid var(--border-color-base, #a2a9b1);
-}
-
-.mobile-subpage-header--bleed {
-  --mobile-subpage-bleed: var(--spacing-100, 16px);
-  width: calc(100% + 2 * var(--mobile-subpage-bleed));
-  margin-top: calc(-1 * var(--mobile-subpage-bleed));
-  margin-inline: calc(-1 * var(--mobile-subpage-bleed));
-  padding-inline: var(--mobile-subpage-bleed);
-}
-
-.mobile-subpage-header__back {
-  flex-shrink: 0;
-  width: 2.75rem;
-  color: inherit;
-  text-decoration: none;
-}
-
-.mobile-subpage-header__title {
-  flex: 1;
-  min-width: 0;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  font-family:
-    var(--font-family-system-sans, system-ui, sans-serif), var(--font-family-base, 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;
-}
-
-.mobile-subpage-header__actions {
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: flex-end;
-  width: 2.75rem;
-}
-
-/* Balance the back button so the title stays visually centered. */
-.mobile-subpage-header__spacer {
-  flex-shrink: 0;
-  width: 2.75rem;
-}
-</style>
diff --git a/src/prototypes/dashpage/StructuredTasksModule.vue b/src/prototypes/dashpage/StructuredTasksModule.vue
deleted file mode 100644
index 8ba97a5..0000000
--- a/src/prototypes/dashpage/StructuredTasksModule.vue
+++ /dev/null
@@ -1,164 +0,0 @@
-<script setup lang="ts">
-import type { RouteLocationRaw } from 'vue-router'
-import { CdxIcon } from '@wikimedia/codex'
-import { cdxIconChart } from '@wikimedia/codex-icons'
-
-import DashboardModule from '@/components/DashboardModule.vue'
-
-interface Props {
-  to?: RouteLocationRaw
-  currentIndex?: number
-  totalCount?: number
-  articleTitle?: string
-  articleDescription?: string
-  thumbnailSrc?: string
-  taskTypeLabel?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  to: undefined,
-  currentIndex: 1,
-  totalCount: 173745,
-  articleTitle: 'Full circle ringing',
-  articleDescription: 'Method of hanging (church) bells and …',
-  thumbnailSrc: undefined,
-  taskTypeLabel: 'Find references',
-})
-</script>
-
-<template>
-  <div class="structured-tasks-module">
-    <DashboardModule
-      class="structured-tasks-module__variant structured-tasks-module__variant--mobile"
-      title="Suggested edits"
-      :to="props.to"
-      cta="See all suggestions"
-      subtle
-    >
-      <p class="structured-tasks-module__counter">
-        {{ props.currentIndex }} of {{ props.totalCount.toLocaleString() }} suggestions
-      </p>
-      <div class="structured-tasks-module__preview">
-        <img
-          v-if="props.thumbnailSrc"
-          class="structured-tasks-module__thumb"
-          :src="props.thumbnailSrc"
-          alt=""
-          width="48"
-          height="48"
-        />
-        <div class="structured-tasks-module__preview-text">
-          <p class="structured-tasks-module__article-title">{{ props.articleTitle }}</p>
-          <p class="structured-tasks-module__article-description">
-            {{ props.articleDescription }}
-          </p>
-          <span class="structured-tasks-module__task-type">
-            <CdxIcon :icon="cdxIconChart" size="small" class="structured-tasks-module__task-type-icon" />
-            {{ props.taskTypeLabel }}
-          </span>
-        </div>
-      </div>
-    </DashboardModule>
-
-    <DashboardModule
-      class="structured-tasks-module__variant structured-tasks-module__variant--desktop"
-      title="Suggested edits"
-    >
-      <p class="structured-tasks-module__desktop-stub">desktop component not supported</p>
-    </DashboardModule>
-  </div>
-</template>
-
-<style scoped>
-/* Follow ancestor data-skin — parity with Dashboard.vue and src/lib/theming.ts */
-.structured-tasks-module__variant--mobile {
-  display: none;
-}
-
-.structured-tasks-module__variant--desktop {
-  display: block;
-}
-
-[data-skin='mobile'] .structured-tasks-module__variant--mobile {
-  display: flex;
-}
-
-[data-skin='mobile'] .structured-tasks-module__variant--desktop {
-  display: none;
-}
-
-.structured-tasks-module__counter {
-  margin: 0 0 var(--spacing-75, 12px);
-  font-size: var(--font-size-small);
-  line-height: var(--line-height-small);
-  color: var(--color-base--subtle, #54595d);
-}
-
-.structured-tasks-module__preview {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--spacing-75, 12px);
-  padding: var(--spacing-75, 12px);
-  background-color: var(--background-color-base, #fff);
-  border: 1px solid var(--border-color-subtle, #a2a9b1);
-  border-radius: 2px;
-}
-
-.structured-tasks-module__thumb {
-  flex-shrink: 0;
-  width: 48px;
-  height: 48px;
-  object-fit: cover;
-  border-radius: 2px;
-}
-
-.structured-tasks-module__preview-text {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-25, 4px);
-}
-
-.structured-tasks-module__article-title {
-  margin: 0;
-  font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-medium);
-  line-height: var(--line-height-medium);
-  color: var(--color-base, #202122);
-}
-
-.structured-tasks-module__article-description {
-  margin: 0;
-  font-size: var(--font-size-small);
-  line-height: var(--line-height-small);
-  color: var(--color-base--subtle, #54595d);
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-}
-
-.structured-tasks-module__task-type {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-25, 4px);
-  align-self: flex-end;
-  margin-top: var(--spacing-25, 4px);
-  font-size: var(--font-size-small);
-  font-weight: var(--font-weight-bold);
-  color: #996600;
-}
-
-.structured-tasks-module__task-type-icon {
-  flex-shrink: 0;
-  color: inherit;
-}
-
-.structured-tasks-module__desktop-stub {
-  margin: 0;
-  font-size: var(--font-size-small);
-  line-height: var(--line-height-small);
-  color: var(--color-base--subtle, #54595d);
-}
-</style>
diff --git a/src/prototypes/dashpage/dashpage-fixtures.ts b/src/prototypes/dashpage/dashpage-fixtures.ts
deleted file mode 100644
index f10390f..0000000
--- a/src/prototypes/dashpage/dashpage-fixtures.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-import type { MostViewedArticle } from './ImpactModule.vue'
-
-/** App gallery home — placeholder target for other mobile link cards. */
-export const APP_HOME = '/'
-
-/** Dashpage prototype route. */
-export const HOMEPAGE = '/dashpage'
-
-/** Full-page mobile drill-down for the Your impact module. */
-export const IMPACT_PAGE = '/dashpage/impact'
-
-/** Full-page mobile drill-down for the Get help with editing module. */
-export const HELP_PAGE = '/dashpage/help'
-
-/** Full-page mobile drill-down for the Your mentor module. */
-export const MENTOR_PAGE = '/dashpage/mentor'
-
-/** Mobile link-card preview copy (title is also the full-page header). */
-export const HELP_MODULE = {
-  title: 'Get help with editing',
-  summary: 'Ask the help desk or read help pages.',
-} as const
-
-export const HELP_LINKS = [
-  { label: 'How to edit a page', href: '#' },
-  { label: 'How to add an image', href: '#' },
-  { label: 'How to edit a citation', href: '#' },
-  { label: 'Simplified Manual of Style', href: '#' },
-  { label: 'How to write a good article', href: '#' },
-  { label: 'How to create a new article', href: '#' },
-]
-
-export const MENTOR = {
-  name: 'Samwalton9',
-  editCount: 12596,
-  lastActiveDaysAgo: 451,
-  note: 'Welcome to Wikipedia! Let me know if you have any questions',
-  learnMoreHref: '#',
-  conversationsHref: '#',
-} as const
-
-export const IMPACT = {
-  viewCount: '10.8K',
-  sparklineData: [
-    420, 390, 410, 430, 400, 380, 415, 440, 425, 405, 390, 420, 435, 410, 395, 430, 450, 420, 400,
-    415, 440, 425, 410, 395, 380, 400, 420, 410, 390, 405, 430, 415, 395, 380, 400, 420, 440, 410,
-    390, 380, 350, 360,
-  ],
-  lastEdited: '5 months ago',
-  longestStreak: '1 day',
-} as const
-
-export const IMPACT_DESKTOP: {
-  totalEdits: number
-  thanksReceived: number
-  lastEdited: string
-  longestStreak: string
-  viewCount: string
-  sparklineData: number[]
-  recentActivityData: number[]
-  activityStartDate: string
-  activityEndDate: string
-  mostViewed: MostViewedArticle[]
-  viewAllEditsHref: string
-} = {
-  totalEdits: 52,
-  thanksReceived: 0,
-  lastEdited: '5 months ago',
-  longestStreak: '1 day',
-  viewCount: '10,754',
-  sparklineData: [
-    420, 390, 410, 430, 400, 380, 415, 440, 425, 405, 390, 420, 435, 410, 395, 430, 450, 420, 400,
-    415, 440, 425, 410, 395, 380, 400, 420, 410, 390, 405, 430, 415, 395, 380, 400, 420, 440, 410,
-    390, 380, 350, 360,
-  ],
-  recentActivityData: [
-    0, 0, 2, 0, 1, 0, 0, 3, 0, 0, 1, 0, 0, 0, 2, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2, 0, 0, 0, 1, 0, 0, 0,
-    0, 2, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 2, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0,
-  ],
-  activityStartDate: 'Mar 17',
-  activityEndDate: 'May 15',
-  mostViewed: [
-    {
-      title: 'Bora Bora',
-      views: 4821,
-      sparklineData: [300, 320, 280, 350, 310, 290, 340, 360, 330, 300],
-      href: '#',
-    },
-    {
-      title: 'Wikipedia',
-      views: 3104,
-      sparklineData: [200, 210, 195, 220, 205, 215, 200, 210, 205, 195],
-      href: '#',
-    },
-    {
-      title: 'Atlantic Ocean',
-      views: 2187,
-      sparklineData: [150, 160, 145, 170, 155, 140, 160, 155, 145, 150],
-      href: '#',
-    },
-  ],
-  viewAllEditsHref: '#',
-}
-
-export const STRUCTURED_TASKS = {
-  currentIndex: 1,
-  totalCount: 173745,
-  articleTitle: 'Full circle ringing',
-  articleDescription: 'Method of hanging (church) bells and …',
-  /** Action API `pageimages` + `pithumbsize=96` for [[Full circle ringing]] */
-  thumbnailSrc:
-    'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/St_Botolph%27s_Bell_Ringing.webm/120px--St_Botolph%27s_Bell_Ringing.webm.jpg',
-  taskTypeLabel: 'Find references',
-} as const
diff --git a/src/prototypes/dashpage/help/index.vue b/src/prototypes/dashpage/help/index.vue
deleted file mode 100644
index 17cba55..0000000
--- a/src/prototypes/dashpage/help/index.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import ChromeWrapper from '@/components/ChromeWrapper.vue'
-import MobileWrapper from '@/components/MobileWrapper.vue'
-import SpecialPageWrapper from '@/components/SpecialPageWrapper.vue'
-import HelpModule from '../HelpModule.vue'
-import MobileSubpageHeader from '../MobileSubpageHeader.vue'
-import { HELP_LINKS, HELP_MODULE, HOMEPAGE } from '../dashpage-fixtures'
-
-definePage({
-  meta: {
-    title: 'Dashpage — Help',
-    description: 'Full-page mobile drill-down for the Get help with editing homepage module.',
-  },
-})
-</script>
-
-<template>
-  <MobileWrapper>
-    <ChromeWrapper skin="mobile" :last-edited-notice="false">
-    <SpecialPageWrapper :title="null" class="help-page">
-      <MobileSubpageHeader
-        :title="HELP_MODULE.title"
-        :back-to="HOMEPAGE"
-        back-label="Back to dashpage"
-      />
-      <HelpModule standalone :help-links="HELP_LINKS" view-more-href="#" />
-    </SpecialPageWrapper>
-    </ChromeWrapper>
-  </MobileWrapper>
-</template>
-
-<style scoped>
-/* Match bleed inset — header negative margins cancel this top/inline padding. */
-.help-page :deep(.special-page-wrapper[data-skin='mobile']) {
-  padding-top: var(--spacing-100, 16px);
-}
-</style>
diff --git a/src/prototypes/dashpage/impact/index.vue b/src/prototypes/dashpage/impact/index.vue
deleted file mode 100644
index 774aa24..0000000
--- a/src/prototypes/dashpage/impact/index.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-import ChromeWrapper from '@/components/ChromeWrapper.vue'
-import MobileWrapper from '@/components/MobileWrapper.vue'
-import SpecialPageWrapper from '@/components/SpecialPageWrapper.vue'
-import { useConfig } from '@/composables/useConfig'
-import ImpactModule from '../ImpactModule.vue'
-import MobileSubpageHeader from '../MobileSubpageHeader.vue'
-import { HOMEPAGE, IMPACT_DESKTOP } from '../dashpage-fixtures'
-
-const { user } = useConfig()
-
-const impactProps = computed(() =>
-  user.value === 'experienced' ? IMPACT_DESKTOP : { thanksReceived: 0 },
-)
-
-definePage({
-  meta: {
-    title: 'Dashpage — Impact',
-    description: 'Full-page mobile drill-down for the Your impact homepage module.',
-  },
-})
-</script>
-
-<template>
-  <MobileWrapper>
-    <ChromeWrapper skin="mobile" :last-edited-notice="false">
-    <SpecialPageWrapper :title="null" class="impact-page">
-      <MobileSubpageHeader title="Your impact" :back-to="HOMEPAGE" back-label="Back to dashpage" />
-      <ImpactModule standalone v-bind="impactProps" />
-    </SpecialPageWrapper>
-    </ChromeWrapper>
-  </MobileWrapper>
-</template>
-
-<style scoped>
-/* Match bleed inset — header negative margins cancel this top/inline padding. */
-.impact-page :deep(.special-page-wrapper[data-skin='mobile']) {
-  padding-top: var(--spacing-100, 16px);
-}
-</style>
diff --git a/src/prototypes/dashpage/index.vue b/src/prototypes/dashpage/index.vue
deleted file mode 100644
index 9e22e74..0000000
--- a/src/prototypes/dashpage/index.vue
+++ /dev/null
@@ -1,131 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { RouterLink } from 'vue-router'
-
-import ChromeWrapper from '@/components/ChromeWrapper.vue'
-import MobileWrapper from '@/components/MobileWrapper.vue'
-import Dashboard from '@/components/Dashboard.vue'
-import DashboardModule from '@/components/DashboardModule.vue'
-import SpecialPageWrapper from '@/components/SpecialPageWrapper.vue'
-import { useConfig } from '@/composables/useConfig'
-import { configUserPageTitle } from '@/lib/config'
-import HelpModule from './HelpModule.vue'
-import ImpactModule from './ImpactModule.vue'
-import MentorModule from './MentorModule.vue'
-import StructuredTasksModule from './StructuredTasksModule.vue'
-import {
-  APP_HOME,
-  HELP_LINKS,
-  HELP_MODULE,
-  HELP_PAGE,
-  IMPACT,
-  IMPACT_DESKTOP,
-  IMPACT_PAGE,
-  MENTOR,
-  MENTOR_PAGE,
-  STRUCTURED_TASKS,
-} from './dashpage-fixtures'
-
-const { user } = useConfig()
-
-const showLoggedInModules = computed(() => user.value !== 'logged-out')
-
-const impactMobileProps = computed(() =>
-  user.value === 'experienced' ? { to: IMPACT_PAGE, ...IMPACT } : { to: IMPACT_PAGE },
-)
-
-const impactDesktopProps = computed(() =>
-  user.value === 'experienced' ? IMPACT_DESKTOP : {},
-)
-
-const pageTitle = computed(() => configUserPageTitle(user.value))
-
-definePage({
-  meta: {
-    title: 'Dashpage',
-    description: 'Explorations for a homepage + dashboard hybrid',
-  },
-})
-</script>
-
-<template>
-  <MobileWrapper>
-    <ChromeWrapper skin="mobile" :last-edited-notice="false">
-    <SpecialPageWrapper :title="pageTitle" help>
-      <div class="prototype-dashpage-shell">
-        <Dashboard>
-          <template #banner>
-            <RouterLink :to="APP_HOME" class="dashboard-mobile-banner__feedback">
-              Share feedback
-            </RouterLink>
-          </template>
-
-          <template #mobile>
-            <StructuredTasksModule
-              class="dashboard-slot--mobile-primary"
-              :to="APP_HOME"
-              v-bind="STRUCTURED_TASKS"
-            />
-
-            <ImpactModule v-if="showLoggedInModules" v-bind="impactMobileProps" />
-
-            <MentorModule
-              v-if="showLoggedInModules"
-              compact
-              :to="MENTOR_PAGE"
-              :mentor-name="MENTOR.name"
-              :edit-count="MENTOR.editCount"
-              :last-active-days-ago="MENTOR.lastActiveDaysAgo"
-              :mentor-note="MENTOR.note"
-              :learn-more-href="MENTOR.learnMoreHref"
-              :conversations-href="MENTOR.conversationsHref"
-            />
-
-            <HelpModule compact :to="HELP_PAGE" v-bind="HELP_MODULE" />
-          </template>
-
-          <template #primary>
-            <StructuredTasksModule
-              class="dashboard-slot--desktop-primary"
-              :to="APP_HOME"
-              v-bind="STRUCTURED_TASKS"
-            />
-          </template>
-
-          <template #sidebar>
-            <ImpactModule v-if="showLoggedInModules" v-bind="impactDesktopProps" />
-
-            <MentorModule
-              v-if="showLoggedInModules"
-              :mentor-name="MENTOR.name"
-              :edit-count="MENTOR.editCount"
-              :last-active-days-ago="MENTOR.lastActiveDaysAgo"
-              :mentor-note="MENTOR.note"
-              :learn-more-href="MENTOR.learnMoreHref"
-              :conversations-href="MENTOR.conversationsHref"
-            />
-
-            <HelpModule :help-links="HELP_LINKS" view-more-href="#" />
-          </template>
-        </Dashboard>
-      </div>
-    </SpecialPageWrapper>
-    </ChromeWrapper>
-  </MobileWrapper>
-</template>
-
-<style scoped>
-.prototype-dashpage-shell {
-  box-sizing: border-box;
-  width: 100%;
-  min-width: 0;
-}
-
-:deep(.dashboard-slot--mobile-primary .dashboard-module__body) {
-  min-height: 3rem;
-}
-
-:deep(.dashboard-slot--desktop-primary .dashboard-module) {
-  min-height: 8rem;
-}
-</style>
diff --git a/src/prototypes/dashpage/mentor/index.vue b/src/prototypes/dashpage/mentor/index.vue
deleted file mode 100644
index d6b5d05..0000000
--- a/src/prototypes/dashpage/mentor/index.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<script setup lang="ts">
-import { CdxButton, CdxIcon } from '@wikimedia/codex'
-import { cdxIconEllipsis } from '@wikimedia/codex-icons'
-
-import ChromeWrapper from '@/components/ChromeWrapper.vue'
-import MobileWrapper from '@/components/MobileWrapper.vue'
-import SpecialPageWrapper from '@/components/SpecialPageWrapper.vue'
-import MentorModule from '../MentorModule.vue'
-import MobileSubpageHeader from '../MobileSubpageHeader.vue'
-import { HOMEPAGE, MENTOR } from '../dashpage-fixtures'
-
-definePage({
-  meta: {
-    title: 'Dashpage — Mentor',
-    description: 'Full-page mobile drill-down for the Your mentor homepage module.',
-  },
-})
-</script>
-
-<template>
-  <MobileWrapper>
-    <ChromeWrapper skin="mobile" :last-edited-notice="false">
-    <SpecialPageWrapper :title="null" class="mentor-page">
-      <MobileSubpageHeader title="Your mentor" :back-to="HOMEPAGE" back-label="Back to dashpage">
-        <template #actions>
-          <CdxButton weight="quiet" :icon-only="true" aria-label="More options">
-            <CdxIcon :icon="cdxIconEllipsis" />
-          </CdxButton>
-        </template>
-      </MobileSubpageHeader>
-
-      <MentorModule
-        standalone
-        :mentor-name="MENTOR.name"
-        :edit-count="MENTOR.editCount"
-        :last-active-days-ago="MENTOR.lastActiveDaysAgo"
-        :mentor-note="MENTOR.note"
-        :learn-more-href="MENTOR.learnMoreHref"
-        :conversations-href="MENTOR.conversationsHref"
-      />
-    </SpecialPageWrapper>
-    </ChromeWrapper>
-  </MobileWrapper>
-</template>
-
-<style scoped>
-.mentor-page :deep(.special-page-wrapper[data-skin='mobile']) {
-  padding-top: var(--spacing-100, 16px);
-  background-color: var(--background-color-neutral-subtle, #f8f9fa);
-}
-
-.mentor-page :deep(.special-page-wrapper[data-skin='mobile'] .special-page-wrapper__body) {
-  padding-inline: 0;
-}
-</style>
diff --git a/src/prototypes/template-homepage/dashpage-fixtures.ts b/src/prototypes/template-homepage/dashpage-fixtures.ts
index d539e51..49b2482 100644
--- a/src/prototypes/template-homepage/dashpage-fixtures.ts
+++ b/src/prototypes/template-homepage/dashpage-fixtures.ts
@@ -3,7 +3,7 @@ import type { MostViewedArticle } from './ImpactModule.vue'
 /** App gallery home — placeholder target for other mobile link cards. */
 export const APP_HOME = '/'
 
-/** Newcomer homepage prototype route. */
+/** Dashpage prototype route (template-homepage). */
 export const HOMEPAGE = '/template-homepage'
 
 /** Full-page mobile drill-down for the Your impact module. */
diff --git a/src/prototypes/template-homepage/help/index.vue b/src/prototypes/template-homepage/help/index.vue
index ec9fb3b..fb55d01 100644
--- a/src/prototypes/template-homepage/help/index.vue
+++ b/src/prototypes/template-homepage/help/index.vue
@@ -7,7 +7,7 @@ import { HELP_LINKS, HELP_MODULE, HOMEPAGE } from '../dashpage-fixtures'
 
 definePage({
   meta: {
-    title: 'Template: Homepage — Help',
+    title: 'Dashpage — Help',
     description: 'Full-page mobile drill-down for the Get help with editing homepage module.',
   },
 })
@@ -19,7 +19,7 @@ definePage({
       <MobileSubpageHeader
         :title="HELP_MODULE.title"
         :back-to="HOMEPAGE"
-        back-label="Back to homepage"
+        back-label="Back to dashpage"
       />
       <HelpModule standalone :help-links="HELP_LINKS" view-more-href="#" />
     </SpecialPageWrapper>
diff --git a/src/prototypes/template-homepage/impact/index.vue b/src/prototypes/template-homepage/impact/index.vue
index b0a5738..b64c121 100644
--- a/src/prototypes/template-homepage/impact/index.vue
+++ b/src/prototypes/template-homepage/impact/index.vue
@@ -16,7 +16,7 @@ const impactProps = computed(() =>
 
 definePage({
   meta: {
-    title: 'Template: Homepage — Impact',
+    title: 'Dashpage — Impact',
     description: 'Full-page mobile drill-down for the Your impact homepage module.',
   },
 })
@@ -25,7 +25,7 @@ definePage({
 <template>
   <ChromeWrapper :last-edited-notice="false">
     <SpecialPageWrapper :title="null" class="impact-page">
-      <MobileSubpageHeader title="Your impact" :back-to="HOMEPAGE" back-label="Back to homepage" />
+      <MobileSubpageHeader title="Your impact" :back-to="HOMEPAGE" back-label="Back to dashpage" />
       <ImpactModule standalone v-bind="impactProps" />
     </SpecialPageWrapper>
   </ChromeWrapper>
diff --git a/src/prototypes/template-homepage/index.vue b/src/prototypes/template-homepage/index.vue
index ac8c486..049842e 100644
--- a/src/prototypes/template-homepage/index.vue
+++ b/src/prototypes/template-homepage/index.vue
@@ -41,8 +41,8 @@ const pageTitle = computed(() => configUserPageTitle(user.value))
 
 definePage({
   meta: {
-    title: 'Template: Homepage',
-    description: 'Template for prototyping the newcomer homepage.',
+    title: 'Dashpage',
+    description: 'Explorations for a homepage + dashboard hybrid.',
   },
 })
 </script>
diff --git a/src/prototypes/template-homepage/mentor/index.vue b/src/prototypes/template-homepage/mentor/index.vue
index 33bbc1e..f423384 100644
--- a/src/prototypes/template-homepage/mentor/index.vue
+++ b/src/prototypes/template-homepage/mentor/index.vue
@@ -10,7 +10,7 @@ import { HOMEPAGE, MENTOR } from '../dashpage-fixtures'
 
 definePage({
   meta: {
-    title: 'Template: Homepage — Mentor',
+    title: 'Dashpage — Mentor',
     description: 'Full-page mobile drill-down for the Your mentor homepage module.',
   },
 })
@@ -19,7 +19,7 @@ definePage({
 <template>
   <ChromeWrapper :last-edited-notice="false">
     <SpecialPageWrapper :title="null" class="mentor-page">
-      <MobileSubpageHeader title="Your mentor" :back-to="HOMEPAGE" back-label="Back to homepage">
+      <MobileSubpageHeader title="Your mentor" :back-to="HOMEPAGE" back-label="Back to dashpage">
         <template #actions>
           <CdxButton weight="quiet" :icon-only="true" aria-label="More options">
             <CdxIcon :icon="cdxIconEllipsis" />

From cc604a9409f91e8333b3c9a508530d57c9707968 Mon Sep 17 00:00:00 2001
From: Lu Wilson <lu@todepond.com>
Date: Thu, 21 May 2026 12:09:18 +0100
Subject: [PATCH 03/21] Burger Dropdown

---
 .../references/chrome-primitives.md           |  3 +-
 src/components/ChromeHeader.vue               | 33 ++++++--
 src/components/ChromeWrapper.vue              |  6 +-
 src/components/PrototypeChromeMenuPopover.vue | 48 +++++++++++
 .../DashpageChromeWrapper.vue                 | 80 +++++++++++++++++++
 .../DashpageMainMenuPanel.vue                 | 44 ++++++++++
 .../template-homepage/help/index.vue          |  6 +-
 .../template-homepage/impact/index.vue        |  6 +-
 src/prototypes/template-homepage/index.vue    |  6 +-
 .../template-homepage/mentor/index.vue        |  6 +-
 .../template-homepage/useDashpageSettings.ts  | 51 ++++++++++++
 11 files changed, 267 insertions(+), 22 deletions(-)
 create mode 100644 src/components/PrototypeChromeMenuPopover.vue
 create mode 100644 src/prototypes/template-homepage/DashpageChromeWrapper.vue
 create mode 100644 src/prototypes/template-homepage/DashpageMainMenuPanel.vue
 create mode 100644 src/prototypes/template-homepage/useDashpageSettings.ts

diff --git a/.agents/skills/protowiki-components/references/chrome-primitives.md b/.agents/skills/protowiki-components/references/chrome-primitives.md
index 4b5f10b..1ee7d4a 100644
--- a/.agents/skills/protowiki-components/references/chrome-primitives.md
+++ b/.agents/skills/protowiki-components/references/chrome-primitives.md
@@ -12,7 +12,7 @@ chrome-without-the-wrapper (e.g., a custom layout that doesn't use
 
 | Skin | Chrome feel | Notes |
 | --- | --- | --- |
-| `desktop` | **Vector 2022–style** | Wordmark/tagline (**`wordmarkSrc`**, **`taglineSrc`**, **`#logo` override**), **`SearchBar`** + **Search** button, username link (**`username`** + **`#username`**), user-tool cluster ( **`navTools`** preset vs **`#nav`** override ). **Main-menu glyph is icon-only** (mock). Global skin stays **desktop** until the viewport is **≤640px**; **below 1120px**, inline search collapses to a search icon; **below 768px**, watchlist hides (`nav-button-desktop` parity). |
+| `desktop` | **Vector 2022–style** | Wordmark/tagline (**`wordmarkSrc`**, **`taglineSrc`**, **`#logo` override**), **`SearchBar`** + **Search** button, username link (**`username`** + **`#username`**), user-tool cluster ( **`navTools`** preset vs **`#nav`** override ). **Main-menu glyph is icon-only mock by default** — override via **`#menu`**. Global skin stays **desktop** until the viewport is **≤640px**; **below 1120px**, inline search collapses to a search icon; **below 768px**, watchlist hides (`nav-button-desktop` parity). |
 | `mobile` | **Minerva-style** | Grey elevated bar: menu, Wikipedia wordmark (**`mobileWordmarkSrc`** / **`wordmarkSrc`**, **`#logo`**), search icon + notifications — **`navTools` is ignored**. |
 
 **`ChromeFooter`** matches the skin:
@@ -52,6 +52,7 @@ Desktop **inline search** is always **`<SearchBar />`** inside the header (not a
 | Slot | Default | Use for |
 | --- | --- | --- |
 | `#logo` | EN Wikipedia wordmark (+ tagline on desktop) via `<img>` | Replace with another project's wordmark / lockup |
+| `#menu` | Mock burger icon (**desktop**: non-interactive glyph; **mobile**: quiet button) | Replace with an interactive main-menu trigger + popover (**`ChromeWrapper`** forwards **`#menu`**) |
 | `#username` | Anchor from **`username`** (hidden when empty after trim) | Replace with custom markup before tool icons (**desktop**) |
 | `#nav` | Vector-style tool icons on **desktop** only | Replace the default user-tool cluster (**`navTools` ignored**) |
 
diff --git a/src/components/ChromeHeader.vue b/src/components/ChromeHeader.vue
index c87617f..48fe46f 100644
--- a/src/components/ChromeHeader.vue
+++ b/src/components/ChromeHeader.vue
@@ -96,10 +96,12 @@ function navHas(tool: ChromeNavTool): boolean {
     <!-- Vector 2022–style chrome (desktop skin) -->
     <nav v-if="isDesktop" class="chrome-header__nav-desktop" aria-label="Site">
       <div class="chrome-header__desktop-start">
-        <!-- Mock only — not interactive (FakeMediaWiki uses bare chrome / icon affordances). -->
-        <span class="chrome-header__menu-icon" aria-hidden="true">
-          <CdxIcon :icon="cdxIconMenu" />
-        </span>
+        <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>
+        </slot>
 
         <RouterLink class="chrome-header__brand-link" to="/" aria-label="Visit the main page">
           <slot name="logo">
@@ -223,9 +225,11 @@ function navHas(tool: ChromeNavTool): boolean {
 
     <!-- Minerva-style chrome (mobile skin) -->
     <nav v-else class="chrome-header__nav-mobile" aria-label="Site">
-      <CdxButton weight="quiet" size="large" aria-label="Main menu">
-        <CdxIcon :icon="cdxIconMenu" />
-      </CdxButton>
+      <slot name="menu">
+        <CdxButton weight="quiet" size="large" aria-label="Main menu">
+          <CdxIcon :icon="cdxIconMenu" />
+        </CdxButton>
+      </slot>
 
       <RouterLink class="chrome-header__mobile-brand" to="/" aria-label="Visit the main page">
         <slot name="logo">
@@ -333,6 +337,15 @@ function navHas(tool: ChromeNavTool): boolean {
   pointer-events: none;
 }
 
+.chrome-header[data-skin='desktop'] :slotted(.chrome-header__menu-btn) {
+  flex-shrink: 0;
+  min-width: var(--size-icon-medium, 32px);
+  height: var(--size-icon-medium, 32px);
+  margin: 0;
+  padding: var(--spacing-25, 4px);
+  padding-inline-start: var(--spacing-50, 8px);
+}
+
 .chrome-header[data-skin='desktop'] .chrome-header__menu-icon :deep(svg) {
   display: block;
 }
@@ -497,7 +510,11 @@ function navHas(tool: ChromeNavTool): boolean {
   box-shadow: inset 0 -1px 3px 0 rgba(0, 0, 0, 0.08);
 }
 
-.chrome-header[data-skin='mobile'] .chrome-header__nav-mobile > .cdx-button:first-of-type {
+.chrome-header[data-skin='mobile'] .chrome-header__nav-mobile > :first-child {
+  flex-shrink: 0;
+}
+
+.chrome-header[data-skin='mobile'] .prototype-chrome-menu-popover {
   flex-shrink: 0;
 }
 
diff --git a/src/components/ChromeWrapper.vue b/src/components/ChromeWrapper.vue
index 41937c7..71ded33 100644
--- a/src/components/ChromeWrapper.vue
+++ b/src/components/ChromeWrapper.vue
@@ -89,7 +89,11 @@ provide(PROTOWIKI_CHROME_THEME, effectiveTheme)
         :tagline-src="props.taglineSrc"
         :mobile-wordmark-src="props.mobileWordmarkSrc"
         :nav-tools="props.navTools"
-      />
+      >
+        <template v-if="$slots.menu" #menu>
+          <slot name="menu" />
+        </template>
+      </ChromeHeader>
     </slot>
 
     <main class="chrome-wrapper__content">
diff --git a/src/components/PrototypeChromeMenuPopover.vue b/src/components/PrototypeChromeMenuPopover.vue
new file mode 100644
index 0000000..756664e
--- /dev/null
+++ b/src/components/PrototypeChromeMenuPopover.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { CdxPopover } from '@wikimedia/codex'
+
+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"
+    >
+      <div @click.stop>
+        <slot name="panel" />
+      </div>
+    </CdxPopover>
+  </div>
+</template>
+
+<style scoped>
+.prototype-chrome-menu-popover {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.prototype-chrome-menu-popover__trigger {
+  display: inline-flex;
+}
+</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/prototypes/template-homepage/DashpageChromeWrapper.vue b/src/prototypes/template-homepage/DashpageChromeWrapper.vue
new file mode 100644
index 0000000..ef2af1a
--- /dev/null
+++ b/src/prototypes/template-homepage/DashpageChromeWrapper.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { CdxButton, CdxIcon } from '@wikimedia/codex'
+import { cdxIconMenu } from '@wikimedia/codex-icons'
+
+import ChromeWrapper from '@/components/ChromeWrapper.vue'
+import PrototypeChromeMenuPopover from '@/components/PrototypeChromeMenuPopover.vue'
+import type { ChromeNavTool } from '@/lib/chromeHeader'
+import { globalSkin } from '@/lib/theming'
+import type { Skin, Theme } from '@/lib/theming'
+
+import DashpageMainMenuPanel from './DashpageMainMenuPanel.vue'
+
+interface Props {
+  lang?: string
+  dir?: 'ltr' | 'rtl'
+  skin?: Skin
+  theme?: Theme
+  lastEditedNotice?: boolean
+  username?: string
+  wordmarkSrc?: string
+  taglineSrc?: string
+  mobileWordmarkSrc?: string
+  navTools?: ChromeNavTool[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  lang: undefined,
+  dir: undefined,
+  skin: undefined,
+  theme: undefined,
+  lastEditedNotice: true,
+  username: undefined,
+  wordmarkSrc: undefined,
+  taglineSrc: undefined,
+  mobileWordmarkSrc: undefined,
+  navTools: undefined,
+})
+
+const effectiveSkin = computed<Skin>(() => props.skin ?? globalSkin.value)
+const isMobile = computed(() => effectiveSkin.value === 'mobile')
+</script>
+
+<template>
+  <ChromeWrapper
+    :lang="props.lang"
+    :dir="props.dir"
+    :skin="props.skin"
+    :theme="props.theme"
+    :last-edited-notice="props.lastEditedNotice"
+    :username="props.username"
+    :wordmark-src="props.wordmarkSrc"
+    :tagline-src="props.taglineSrc"
+    :mobile-wordmark-src="props.mobileWordmarkSrc"
+    :nav-tools="props.navTools"
+  >
+    <template #menu>
+      <PrototypeChromeMenuPopover>
+        <template #default="{ toggle, open }">
+          <CdxButton
+            :class="{ 'chrome-header__menu-btn': !isMobile }"
+            weight="quiet"
+            :size="isMobile ? 'large' : undefined"
+            aria-label="Main menu"
+            :aria-expanded="open"
+            @click="toggle"
+          >
+            <CdxIcon :icon="cdxIconMenu" :size="isMobile ? 'large' : undefined" />
+          </CdxButton>
+        </template>
+        <template #panel>
+          <DashpageMainMenuPanel />
+        </template>
+      </PrototypeChromeMenuPopover>
+    </template>
+
+    <slot />
+  </ChromeWrapper>
+</template>
diff --git a/src/prototypes/template-homepage/DashpageMainMenuPanel.vue b/src/prototypes/template-homepage/DashpageMainMenuPanel.vue
new file mode 100644
index 0000000..208e33c
--- /dev/null
+++ b/src/prototypes/template-homepage/DashpageMainMenuPanel.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { CdxSelect } from '@wikimedia/codex'
+
+import {
+  EDIT_SUGGESTION_SOURCE_MENU_ITEMS,
+  useDashpageSettings,
+} from './useDashpageSettings'
+
+const { editSuggestionSource } = useDashpageSettings()
+</script>
+
+<template>
+  <div class="dashpage-main-menu-panel">
+    <label class="dashpage-main-menu-panel__field">
+      <span class="dashpage-main-menu-panel__label">Edit suggestion source</span>
+      <CdxSelect
+        v-model:selected="editSuggestionSource"
+        :menu-items="EDIT_SUGGESTION_SOURCE_MENU_ITEMS"
+        default-label="Structured tasks"
+      />
+    </label>
+  </div>
+</template>
+
+<style scoped>
+.dashpage-main-menu-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-100);
+  min-width: 22rem;
+}
+
+.dashpage-main-menu-panel__field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-25);
+}
+
+.dashpage-main-menu-panel__label {
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-subtle);
+}
+</style>
diff --git a/src/prototypes/template-homepage/help/index.vue b/src/prototypes/template-homepage/help/index.vue
index fb55d01..5aea2f0 100644
--- a/src/prototypes/template-homepage/help/index.vue
+++ b/src/prototypes/template-homepage/help/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import ChromeWrapper from '@/components/ChromeWrapper.vue'
+import DashpageChromeWrapper from '../DashpageChromeWrapper.vue'
 import SpecialPageWrapper from '@/components/SpecialPageWrapper.vue'
 import HelpModule from '../HelpModule.vue'
 import MobileSubpageHeader from '../MobileSubpageHeader.vue'
@@ -14,7 +14,7 @@ definePage({
 </script>
 
 <template>
-  <ChromeWrapper :last-edited-notice="false">
+  <DashpageChromeWrapper :last-edited-notice="false">
     <SpecialPageWrapper :title="null" class="help-page">
       <MobileSubpageHeader
         :title="HELP_MODULE.title"
@@ -23,7 +23,7 @@ definePage({
       />
       <HelpModule standalone :help-links="HELP_LINKS" view-more-href="#" />
     </SpecialPageWrapper>
-  </ChromeWrapper>
+  </DashpageChromeWrapper>
 </template>
 
 <style scoped>
diff --git a/src/prototypes/template-homepage/impact/index.vue b/src/prototypes/template-homepage/impact/index.vue
index 35569c8..13e254c 100644
--- a/src/prototypes/template-homepage/impact/index.vue
+++ b/src/prototypes/template-homepage/impact/index.vue
@@ -3,7 +3,7 @@ import { computed, watch } from 'vue'
 import { CdxButton, CdxIcon } from '@wikimedia/codex'
 import { cdxIconReload } from '@wikimedia/codex-icons'
 
-import ChromeWrapper from '@/components/ChromeWrapper.vue'
+import DashpageChromeWrapper from '../DashpageChromeWrapper.vue'
 import SpecialPageWrapper from '@/components/SpecialPageWrapper.vue'
 import { useConfig } from '@/composables/useConfig'
 import { useRealUserImpact } from '@/composables/useRealUserImpact'
@@ -61,7 +61,7 @@ definePage({
 </script>
 
 <template>
-  <ChromeWrapper :last-edited-notice="false">
+  <DashpageChromeWrapper :last-edited-notice="false">
     <SpecialPageWrapper :title="null" class="impact-page">
       <MobileSubpageHeader title="Your impact" :back-to="HOMEPAGE" back-label="Back to homepage">
         <template v-if="showRealRefresh" #actions>
@@ -78,7 +78,7 @@ definePage({
       </MobileSubpageHeader>
       <ImpactModule standalone v-bind="impactProps" @refresh="onRefreshClick" />
     </SpecialPageWrapper>
-  </ChromeWrapper>
+  </DashpageChromeWrapper>
 </template>
 
 <style scoped>
diff --git a/src/prototypes/template-homepage/index.vue b/src/prototypes/template-homepage/index.vue
index a011305..eddbb38 100644
--- a/src/prototypes/template-homepage/index.vue
+++ b/src/prototypes/template-homepage/index.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import { RouterLink } from 'vue-router'
 
-import ChromeWrapper from '@/components/ChromeWrapper.vue'
+import DashpageChromeWrapper from './DashpageChromeWrapper.vue'
 import Dashboard from '@/components/Dashboard.vue'
 import DashboardModule from '@/components/DashboardModule.vue'
 import SpecialPageWrapper from '@/components/SpecialPageWrapper.vue'
@@ -36,7 +36,7 @@ definePage({
 </script>
 
 <template>
-  <ChromeWrapper :last-edited-notice="false">
+  <DashpageChromeWrapper :last-edited-notice="false">
     <SpecialPageWrapper :title="pageTitle" help>
       <div class="prototype-dashpage-shell">
         <Dashboard>
@@ -104,7 +104,7 @@ definePage({
         </Dashboard>
       </div>
     </SpecialPageWrapper>
-  </ChromeWrapper>
+  </DashpageChromeWrapper>
 </template>
 
 <style scoped>
diff --git a/src/prototypes/template-homepage/mentor/index.vue b/src/prototypes/template-homepage/mentor/index.vue
index f423384..d5d7169 100644
--- a/src/prototypes/template-homepage/mentor/index.vue
+++ b/src/prototypes/template-homepage/mentor/index.vue
@@ -2,7 +2,7 @@
 import { CdxButton, CdxIcon } from '@wikimedia/codex'
 import { cdxIconEllipsis } from '@wikimedia/codex-icons'
 
-import ChromeWrapper from '@/components/ChromeWrapper.vue'
+import DashpageChromeWrapper from '../DashpageChromeWrapper.vue'
 import SpecialPageWrapper from '@/components/SpecialPageWrapper.vue'
 import MentorModule from '../MentorModule.vue'
 import MobileSubpageHeader from '../MobileSubpageHeader.vue'
@@ -17,7 +17,7 @@ definePage({
 </script>
 
 <template>
-  <ChromeWrapper :last-edited-notice="false">
+  <DashpageChromeWrapper :last-edited-notice="false">
     <SpecialPageWrapper :title="null" class="mentor-page">
       <MobileSubpageHeader title="Your mentor" :back-to="HOMEPAGE" back-label="Back to dashpage">
         <template #actions>
@@ -37,7 +37,7 @@ definePage({
         :conversations-href="MENTOR.conversationsHref"
       />
     </SpecialPageWrapper>
-  </ChromeWrapper>
+  </DashpageChromeWrapper>
 </template>
 
 <style scoped>
diff --git a/src/prototypes/template-homepage/useDashpageSettings.ts b/src/prototypes/template-homepage/useDashpageSettings.ts
new file mode 100644
index 0000000..75bd134
--- /dev/null
+++ b/src/prototypes/template-homepage/useDashpageSettings.ts
@@ -0,0 +1,51 @@
+import { ref, watch, type Ref } from 'vue'
+
+export type EditSuggestionSource = 'structured-tasks' | 'suggestion-mode'
+
+export const EDIT_SUGGESTION_SOURCE_MENU_ITEMS: {
+  value: EditSuggestionSource
+  label: string
+}[] = [
+  { value: 'structured-tasks', label: 'Structured tasks' },
+  { value: 'suggestion-mode', label: 'Suggestion mode' },
+]
+
+const STORAGE_KEY = 'protowiki-dashpage-edit-suggestion-source'
+const VALID_SOURCES: EditSuggestionSource[] = ['structured-tasks', 'suggestion-mode']
+
+function isEditSuggestionSource(value: unknown): value is EditSuggestionSource {
+  return typeof value === 'string' && VALID_SOURCES.includes(value as EditSuggestionSource)
+}
+
+function loadEditSuggestionSource(): EditSuggestionSource {
+  if (typeof window === 'undefined') return 'structured-tasks'
+
+  try {
+    const stored = window.localStorage.getItem(STORAGE_KEY)
+    return isEditSuggestionSource(stored) ? stored : 'structured-tasks'
+  } catch {
+    return 'structured-tasks'
+  }
+}
+
+function saveEditSuggestionSource(source: EditSuggestionSource): void {
+  if (typeof window === 'undefined') return
+
+  try {
+    window.localStorage.setItem(STORAGE_KEY, source)
+  } catch {
+    // Quota or private-mode failures — ignore.
+  }
+}
+
+const editSuggestionSource = ref<EditSuggestionSource>(loadEditSuggestionSource())
+
+watch(editSuggestionSource, (value) => {
+  saveEditSuggestionSource(value)
+})
+
+export function useDashpageSettings(): {
+  editSuggestionSource: Ref<EditSuggestionSource>
+} {
+  return { editSuggestionSource }
+}

From 81d228a532e672d66b403727a884437e9a18432c Mon Sep 17 00:00:00 2001
From: Lu Wilson <lu@todepond.com>
Date: Thu, 21 May 2026 13:10:31 +0100
Subject: [PATCH 04/21] edit suggestions

---
 package-lock.json                             |  12 +
 package.json                                  |   1 +
 .../SuggestionCard.vue                        | 166 +++++
 .../index.vue                                 | 130 ++++
 .../useVeSuggestionsPlayground.ts             | 296 +++++++++
 .../veDisplayHeadings.ts                      |  30 +
 .../veMethods.ts                              |  74 +++
 .../veSuggestionCards.ts                      | 571 ++++++++++++++++++
 .../veSuggestionsCache.ts                     | 122 ++++
 vite.config.ts                                |   3 +
 10 files changed, 1405 insertions(+)
 create mode 100644 src/prototypes/example-ve-suggestions-playground/SuggestionCard.vue
 create mode 100644 src/prototypes/example-ve-suggestions-playground/index.vue
 create mode 100644 src/prototypes/example-ve-suggestions-playground/useVeSuggestionsPlayground.ts
 create mode 100644 src/prototypes/example-ve-suggestions-playground/veDisplayHeadings.ts
 create mode 100644 src/prototypes/example-ve-suggestions-playground/veMethods.ts
 create mode 100644 src/prototypes/example-ve-suggestions-playground/veSuggestionCards.ts
 create mode 100644 src/prototypes/example-ve-suggestions-playground/veSuggestionsCache.ts

diff --git a/package-lock.json b/package-lock.json
index 2ed7fda..72c5f42 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@wikimedia/codex": "^2.5.1",
         "@wikimedia/codex-design-tokens": "^2.5.1",
         "@wikimedia/codex-icons": "^2.5.1",
+        "fakewiki": "0.0.13",
         "vue": "^3.5.13",
         "vue-router": "^4.5.0"
       },
@@ -1906,6 +1907,7 @@
       "resolved": "https://registry.npmjs.org/@wikimedia/codex-icons/-/codex-icons-2.5.1.tgz",
       "integrity": "sha512-ZbAXQD0dLuqj8uoMrpswusPymAZ07Pt0Y5wp1mNS3YyHuc1aAvsOGWdsV88YYoJN1l2jvYUE98/KoAKn7Cw5YA==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=20.20.2",
         "npm": ">=10.8.2"
@@ -2580,6 +2582,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fakewiki": {
+      "version": "0.0.13",
+      "resolved": "https://registry.npmjs.org/fakewiki/-/fakewiki-0.0.13.tgz",
+      "integrity": "sha512-bPIK55+eHRfA5tn7fGHBg/bpTSTP6r4S/HWEskcD5h2XZT3NFB+lxVVgNByvZCOSWI34cv3X8DFCFMzE6R8r+A==",
+      "license": "GPL-2.0-only",
+      "peerDependencies": {
+        "@wikimedia/codex-icons": "^2.0.0",
+        "vue": "^3.5.0"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
diff --git a/package.json b/package.json
index 5fa316b..952f2a7 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@wikimedia/codex": "^2.5.1",
     "@wikimedia/codex-design-tokens": "^2.5.1",
     "@wikimedia/codex-icons": "^2.5.1",
+    "fakewiki": "0.0.13",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },
diff --git a/src/prototypes/example-ve-suggestions-playground/SuggestionCard.vue b/src/prototypes/example-ve-suggestions-playground/SuggestionCard.vue
new file mode 100644
index 0000000..c0053e9
--- /dev/null
+++ b/src/prototypes/example-ve-suggestions-playground/SuggestionCard.vue
@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { CdxAccordion } from '@wikimedia/codex'
+
+import { shouldShowSnippet, type SuggestionCardData } from './veSuggestionCards'
+
+const props = defineProps<{
+  card: SuggestionCardData
+}>()
+
+const showSnippet = computed(() => shouldShowSnippet(props.card))
+
+const debugPayload = computed(() => {
+  if (props.card.groupedSuggestions?.length) {
+    return {
+      methodName: props.card.methodName,
+      suggestionType: props.card.suggestionType,
+      suggestions: props.card.groupedSuggestions,
+      diagnostics: props.card.diagnostics,
+      responseMeta: props.card.responseMeta,
+    }
+  }
+
+  return {
+    methodName: props.card.methodName,
+    suggestionType: props.card.suggestionType,
+    rawSnippetWikitext: props.card.rawSnippetWikitext,
+    suggestion: props.card.raw,
+    diagnostics: props.card.diagnostics,
+    responseMeta: props.card.responseMeta,
+  }
+})
+
+function formatJson(value: unknown): string {
+  return JSON.stringify(value, null, 2)
+}
+</script>
+
+<template>
+  <article class="suggestion-card">
+    <div class="suggestion-card__header">
+      <p class="suggestion-card__title">{{ card.heading }}</p>
+      <p class="suggestion-card__description" v-html="card.descriptionHtml" />
+    </div>
+    <div
+      v-if="showSnippet"
+      class="suggestion-card__snippet mw-parser-output"
+      v-html="card.renderedSnippetHtml"
+    />
+    <CdxAccordion
+      class="suggestion-card__debug"
+      separation="minimal"
+      heading-level="h6"
+    >
+      <template #title>Debug data</template>
+      <pre>{{ formatJson(debugPayload) }}</pre>
+    </CdxAccordion>
+  </article>
+</template>
+
+<style scoped>
+.suggestion-card {
+  background-color: var(--background-color-base, #fff);
+  padding: var(--spacing-75, 12px) 0 var(--spacing-100, 16px);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-50, 8px);
+  border-top: 1px solid var(--border-color-subtle, #c8ccd1);
+}
+
+.suggestion-card__title {
+  margin: 0;
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-content, 1.57);
+}
+
+.suggestion-card__description {
+  margin: 0;
+  font-size: var(--font-size-medium, 1rem);
+  line-height: var(--line-height-base, 1.6);
+  color: var(--color-base, #202122);
+}
+
+.suggestion-card__description :deep(.suggestion-card__more-links) {
+  color: var(--color-subtle, #54595d);
+}
+
+.suggestion-card__header {
+  width: 100%;
+}
+
+.suggestion-card__snippet {
+  width: 100%;
+  font-size: var(--font-size-small, 0.875rem);
+  line-height: var(--line-height-content, 1.57);
+  color: var(--color-subtle, #54595d);
+  padding: var(--spacing-50, 8px);
+  border: 1px solid var(--border-color-subtle, #c8ccd1);
+  border-radius: var(--border-radius-base, 2px);
+}
+
+.suggestion-card__snippet :deep(> *:first-child) {
+  margin-top: 0;
+}
+
+.suggestion-card__snippet :deep(> *:last-child) {
+  margin-bottom: 0;
+}
+
+.suggestion-card__snippet :deep(p),
+.suggestion-card__snippet :deep(ul),
+.suggestion-card__snippet :deep(ol) {
+  margin: 0;
+}
+
+.suggestion-card__snippet :deep(ul),
+.suggestion-card__snippet :deep(ol) {
+  padding-inline-start: 1.25em;
+}
+
+.suggestion-card__snippet :deep(p + p),
+.suggestion-card__snippet :deep(p + ul),
+.suggestion-card__snippet :deep(p + ol),
+.suggestion-card__snippet :deep(ul + p),
+.suggestion-card__snippet :deep(ol + p),
+.suggestion-card__snippet :deep(ul + ul),
+.suggestion-card__snippet :deep(ol + ol) {
+  margin-top: var(--spacing-50, 8px);
+}
+
+.suggestion-card__debug {
+  width: 100%;
+  margin-top: var(--spacing-25, 4px);
+}
+
+.suggestion-card__debug :deep(.cdx-accordion__header) {
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-normal);
+  color: var(--color-subtle);
+}
+
+.suggestion-card__debug :deep(summary:before) {
+  background-color: var(--color-subtle);
+}
+
+.suggestion-card__debug :deep(summary:hover),
+.suggestion-card__debug :deep(summary:active) {
+  background-color: transparent;
+  color: var(--color-subtle);
+}
+
+.suggestion-card__debug :deep(summary:hover:before),
+.suggestion-card__debug :deep(summary:active:before) {
+  background-color: var(--color-subtle);
+}
+
+.suggestion-card__debug pre {
+  margin: var(--spacing-50, 8px) 0 0;
+  padding: var(--spacing-75, 12px);
+  overflow: auto;
+  font-size: var(--font-size-small);
+  background: var(--background-color-neutral-subtle, #f8f9fa);
+  border-radius: var(--border-radius-base, 2px);
+}
+</style>
diff --git a/src/prototypes/example-ve-suggestions-playground/index.vue b/src/prototypes/example-ve-suggestions-playground/index.vue
new file mode 100644
index 0000000..e1b85b6
--- /dev/null
+++ b/src/prototypes/example-ve-suggestions-playground/index.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import {
+  CdxButton,
+  CdxField,
+  CdxMessage,
+  CdxProgressIndicator,
+  CdxTextInput,
+} from '@wikimedia/codex'
+
+import PlainWrapper from '@/components/PlainWrapper.vue'
+
+import SuggestionCard from './SuggestionCard.vue'
+import { useVeSuggestionsPlayground } from './useVeSuggestionsPlayground'
+
+definePage({
+  meta: {
+    title: 'Edit suggestions',
+    description: 'Get edit suggestions for any page',
+  },
+})
+
+const {
+  pageTitle,
+  cards,
+  methodErrors,
+  progress,
+  loading,
+  error,
+  hasRun,
+  primaryButtonLabel,
+  onPrimaryAction,
+} = useVeSuggestionsPlayground()
+</script>
+
+<template>
+  <PlainWrapper heading="Edit suggestions">
+    <div class="edit-suggestions">
+      <form class="edit-suggestions__controls" @submit.prevent="onPrimaryAction">
+        <CdxField label="Page title">
+          <CdxTextInput
+            v-model="pageTitle"
+            placeholder="Enter a page title"
+            autocomplete="off"
+            :disabled="loading"
+          />
+        </CdxField>
+        <div class="edit-suggestions__actions">
+          <CdxButton type="submit" :disabled="loading">
+            {{ primaryButtonLabel }}
+          </CdxButton>
+          <CdxProgressIndicator v-if="loading" aria-label="Loading suggestions" />
+          <span v-if="loading" class="edit-suggestions__progress">
+            Method {{ progress.completed }} / {{ progress.total }}
+          </span>
+        </div>
+      </form>
+
+      <CdxMessage v-if="error" type="error">
+        {{ error }}
+      </CdxMessage>
+
+      <section v-if="methodErrors.length > 0" class="edit-suggestions__method-errors">
+        <h2 class="edit-suggestions__section-heading">Method errors</h2>
+        <ul>
+          <li v-for="item in methodErrors" :key="item.methodName">
+            <strong>{{ item.methodName }}:</strong> {{ item.message }}
+          </li>
+        </ul>
+      </section>
+
+      <section v-if="cards.length > 0" class="edit-suggestions__cards">
+        <SuggestionCard v-for="card in cards" :key="card.cardId" :card="card" />
+      </section>
+
+      <p v-else-if="hasRun && !loading" class="edit-suggestions__empty">
+        No suggestions found for this page.
+      </p>
+
+      <p v-else-if="!hasRun && !loading" class="edit-suggestions__empty">
+        Enter a page title and press Load.
+      </p>
+    </div>
+  </PlainWrapper>
+</template>
+
+<style scoped>
+.edit-suggestions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-150, 24px);
+}
+
+.edit-suggestions__controls {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-100, 16px);
+}
+
+.edit-suggestions__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-75, 12px);
+}
+
+.edit-suggestions__progress {
+  font-size: var(--font-size-small);
+  color: var(--color-subtle);
+}
+
+.edit-suggestions__empty {
+  margin: 0;
+}
+
+.edit-suggestions__section-heading {
+  margin: 0 0 var(--spacing-50, 8px);
+  font-size: var(--font-size-medium);
+}
+
+.edit-suggestions__method-errors ul {
+  margin: 0;
+  padding-inline-start: var(--spacing-150, 24px);
+}
+
+.edit-suggestions__cards {
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid var(--border-color-subtle, #c8ccd1);
+}
+</style>
diff --git a/src/prototypes/example-ve-suggestions-playground/useVeSuggestionsPlayground.ts b/src/prototypes/example-ve-suggestions-playground/useVeSuggestionsPlayground.ts
new file mode 100644
index 0000000..8e4cc2d
--- /dev/null
+++ b/src/prototypes/example-ve-suggestions-playground/useVeSuggestionsPlayground.ts
@@ -0,0 +1,296 @@
+import { computed, onMounted, ref } from 'vue'
+
+import { FakeWiki, FakeWikiHttpError } from 'fakewiki'
+
+import {
+  buildFallbackCard,
+  buildSectionRanges,
+  buildSectionTitleMap,
+  buildSuggestionCard,
+  hydrateCardsFromSnippetCache,
+  sortCards,
+  type SuggestionCardData,
+} from './veSuggestionCards'
+import { VE_METHOD_COUNT, VE_METHODS } from './veMethods'
+import {
+  getCachedRun,
+  loadUiState,
+  normalizePageTitle,
+  saveUiState,
+  setCachedRun,
+  type CachedMethodResult,
+  type CachedVeSuggestionsRun,
+} from './veSuggestionsCache'
+
+export interface VeSuggestionsCacheMeta {
+  fromCache: boolean
+  fetchedAt?: number
+}
+
+const wiki = new FakeWiki(undefined, {
+  apiUserAgent:
+    'ProtoWiki/0.1 (https://github.com/wikimedia-research/protowiki) ve-suggestions-playground',
+})
+
+function wrapGetPageSource(prefetchedByTitle: Map<string, string>): () => void {
+  const original = wiki.getPageSource.bind(wiki)
+
+  wiki.getPageSource = async (pageName: string): Promise<string> => {
+    const key = normalizePageTitle(pageName)
+    const cached = prefetchedByTitle.get(key)
+    if (cached !== undefined) return cached
+    const source = await original(pageName)
+    prefetchedByTitle.set(key, source)
+    return source
+  }
+
+  return () => {
+    wiki.getPageSource = original
+  }
+}
+
+function cardsFromMethodResults(
+  pageTitle: string,
+  methodResults: Record<string, CachedMethodResult>,
+  snippetHtmlByKey: Record<string, string>,
+): SuggestionCardData[] {
+  const cards: SuggestionCardData[] = []
+
+  for (const method of VE_METHODS) {
+    const result = methodResults[method.methodName]
+    if (!result || result.ok === false) continue
+    const response = result.response
+    for (let index = 0; index < response.suggestions.length; index++) {
+      const suggestion = response.suggestions[index]
+      if (!suggestion) continue
+      cards.push(
+        buildFallbackCard(wiki, method.methodName, pageTitle, response, suggestion, index, snippetHtmlByKey),
+      )
+    }
+  }
+
+  return sortCards(cards)
+}
+
+function methodErrorsFromResults(
+  methodResults: Record<string, CachedMethodResult>,
+): Array<{ methodName: string; message: string }> {
+  const methodErrors: Array<{ methodName: string; message: string }> = []
+  for (const method of VE_METHODS) {
+    const result = methodResults[method.methodName]
+    if (result?.ok === false) {
+      methodErrors.push({ methodName: method.methodName, message: result.error })
+    }
+  }
+  return methodErrors
+}
+
+export function useVeSuggestionsPlayground(): {
+  pageTitle: ReturnType<typeof ref<string>>
+  cards: ReturnType<typeof ref<SuggestionCardData[]>>
+  methodErrors: ReturnType<typeof ref<Array<{ methodName: string; message: string }>>>
+  progress: ReturnType<typeof ref<{ completed: number; total: number }>>
+  loading: ReturnType<typeof ref<boolean>>
+  error: ReturnType<typeof ref<string | null>>
+  cacheMeta: ReturnType<typeof ref<VeSuggestionsCacheMeta>>
+  hasRun: ReturnType<typeof ref<boolean>>
+  primaryButtonLabel: ReturnType<typeof computed<string>>
+  onPrimaryAction: () => Promise<void>
+} {
+  const pageTitle = ref('Wet Leg')
+  const cards = ref<SuggestionCardData[]>([])
+  const methodErrors = ref<Array<{ methodName: string; message: string }>>([])
+  const progress = ref({ completed: 0, total: VE_METHOD_COUNT })
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+  const cacheMeta = ref<VeSuggestionsCacheMeta>({ fromCache: false })
+  const hasRun = ref(false)
+  const loadedPageTitle = ref<string | null>(null)
+
+  const trimmedInputTitle = computed(() => normalizePageTitle(pageTitle.value))
+
+  const showsResultsForInput = computed(
+    () =>
+      hasRun.value &&
+      loadedPageTitle.value !== null &&
+      trimmedInputTitle.value.length > 0 &&
+      trimmedInputTitle.value === loadedPageTitle.value,
+  )
+
+  const primaryButtonLabel = computed(() =>
+    showsResultsForInput.value ? 'Refresh' : 'Load',
+  )
+
+  function applyCachedRun(run: CachedVeSuggestionsRun): void {
+    const snippetHtmlByKey = run.snippetHtmlByKey ?? {}
+    cards.value =
+      run.cards?.length ?
+        sortCards(hydrateCardsFromSnippetCache(run.cards, run.pageTitle, snippetHtmlByKey))
+      : cardsFromMethodResults(run.pageTitle, run.methodResults, snippetHtmlByKey)
+    methodErrors.value = methodErrorsFromResults(run.methodResults)
+    progress.value = {
+      completed: Object.keys(run.methodResults).length,
+      total: VE_METHOD_COUNT,
+    }
+    hasRun.value = true
+    loadedPageTitle.value = normalizePageTitle(run.pageTitle)
+    cacheMeta.value = { fromCache: true, fetchedAt: run.fetchedAt }
+  }
+
+  onMounted(() => {
+    const ui = loadUiState()
+    pageTitle.value = ui.pageTitle
+
+    const cached = getCachedRun(ui.pageTitle)
+    if (cached) {
+      applyCachedRun(cached)
+    }
+  })
+
+  async function runNetworkPipeline(forceRefresh: boolean): Promise<void> {
+    const trimmed = normalizePageTitle(pageTitle.value)
+    if (!trimmed.length) {
+      error.value = 'Please enter a page title.'
+      return
+    }
+
+    saveUiState({ pageTitle: trimmed, lastViewedAt: Date.now() })
+
+    if (!forceRefresh) {
+      const cached = getCachedRun(trimmed)
+      if (cached) {
+        applyCachedRun(cached)
+        error.value = null
+        return
+      }
+    }
+
+    loading.value = true
+    error.value = null
+    hasRun.value = false
+    loadedPageTitle.value = null
+    cards.value = []
+    methodErrors.value = []
+    progress.value = { completed: 0, total: VE_METHOD_COUNT }
+    cacheMeta.value = { fromCache: false }
+
+    const existingCache = getCachedRun(trimmed)
+    const run: CachedVeSuggestionsRun = {
+      fetchedAt: Date.now(),
+      pageTitle: trimmed,
+      pageSource: existingCache?.pageSource,
+      methodResults: forceRefresh ? {} : { ...(existingCache?.methodResults ?? {}) },
+      cards: [],
+      snippetHtmlByKey: forceRefresh ? {} : { ...(existingCache?.snippetHtmlByKey ?? {}) },
+    }
+
+    const pageSourceCache = new Map<string, string>()
+    if (run.pageSource) {
+      pageSourceCache.set(trimmed, run.pageSource)
+    }
+
+    let restoreGetPageSource = wrapGetPageSource(pageSourceCache)
+
+    try {
+      if (!run.pageSource) {
+        try {
+          run.pageSource = await wiki.getPageSource(trimmed)
+          pageSourceCache.set(trimmed, run.pageSource)
+          setCachedRun(trimmed, { ...run })
+        } catch (caught) {
+          const message = caught instanceof Error ? caught.message : String(caught)
+          error.value = `Could not load page source: ${message}`
+          return
+        }
+      }
+
+      const sectionTitleMap = buildSectionTitleMap(run.pageSource)
+      const sectionRanges = buildSectionRanges(run.pageSource)
+      const snippetHtmlCache = run.snippetHtmlByKey ?? {}
+
+      let completed = 0
+      let abortedForRateLimit = false
+
+      for (const method of VE_METHODS) {
+        if (abortedForRateLimit) break
+
+        try {
+          const response = await method.run(wiki, trimmed)
+          run.methodResults[method.methodName] = { ok: true, response }
+
+          for (let index = 0; index < response.suggestions.length; index++) {
+            const suggestion = response.suggestions[index]
+            if (!suggestion) continue
+            const card = await buildSuggestionCard(
+              wiki,
+              method.methodName,
+              trimmed,
+              response,
+              suggestion,
+              index,
+              sectionTitleMap,
+              sectionRanges,
+              run.pageSource ?? '',
+              snippetHtmlCache,
+            )
+            run.cards = [...(run.cards ?? []), card]
+          }
+        } catch (caught) {
+          const message = caught instanceof Error ? caught.message : String(caught)
+          run.methodResults[method.methodName] = { ok: false, error: message }
+
+          if (caught instanceof FakeWikiHttpError && caught.status === 429) {
+            error.value = message
+            abortedForRateLimit = true
+          }
+        }
+
+        completed += 1
+        progress.value = { completed, total: VE_METHOD_COUNT }
+
+        run.fetchedAt = Date.now()
+        run.snippetHtmlByKey = snippetHtmlCache
+        run.cards = sortCards(run.cards ?? [])
+        setCachedRun(trimmed, {
+          ...run,
+          methodResults: { ...run.methodResults },
+          cards: [...(run.cards ?? [])],
+          snippetHtmlByKey: { ...snippetHtmlCache },
+        })
+
+        cards.value = sortCards(
+          hydrateCardsFromSnippetCache(run.cards ?? [], trimmed, snippetHtmlCache),
+        )
+        methodErrors.value = methodErrorsFromResults(run.methodResults)
+      }
+
+      hasRun.value = true
+      loadedPageTitle.value = trimmed
+      cacheMeta.value = { fromCache: false, fetchedAt: run.fetchedAt }
+    } finally {
+      restoreGetPageSource()
+      loading.value = false
+    }
+  }
+
+  async function onPrimaryAction(): Promise<void> {
+    if (showsResultsForInput.value) {
+      await runNetworkPipeline(true)
+    } else {
+      await runNetworkPipeline(false)
+    }
+  }
+
+  return {
+    pageTitle,
+    cards,
+    methodErrors,
+    progress,
+    loading,
+    error,
+    cacheMeta,
+    hasRun,
+    primaryButtonLabel,
+    onPrimaryAction,
+  }
+}
diff --git a/src/prototypes/example-ve-suggestions-playground/veDisplayHeadings.ts b/src/prototypes/example-ve-suggestions-playground/veDisplayHeadings.ts
new file mode 100644
index 0000000..4cb92d8
--- /dev/null
+++ b/src/prototypes/example-ve-suggestions-playground/veDisplayHeadings.ts
@@ -0,0 +1,30 @@
+export const DISPLAY_HEADING_BY_TYPE: Record<string, string> = {
+  addReference: 'Add reference',
+  citationNeeded: 'Add citation needed',
+  convertReference: 'Convert reference',
+  disambiguation: 'Fix disambiguation link',
+  doubleBold: 'Remove bold formatting',
+  duplicateLink: 'Remove duplicate link',
+  externalLink: 'Remove external link',
+  fakeHeading: 'Convert fake heading',
+  imageCaption: 'Improve image caption',
+  redirect: 'Replace redirect link',
+  requiredTemplateParam: 'Add missing information',
+  suggestedLink: 'Add link',
+  textMatch: 'Rewrite flagged text',
+  tone: 'Adjust tone',
+  yearLink: 'Fix year link',
+}
+
+export function formatSuggestionType(suggestionType: string): string {
+  const withSpaces = suggestionType
+    .replace(/([a-z])([A-Z])/g, '$1 $2')
+    .replace(/[_-]+/g, ' ')
+    .trim()
+  if (!withSpaces) return 'Suggestion'
+  return withSpaces.charAt(0).toUpperCase() + withSpaces.slice(1)
+}
+
+export function headingForSuggestionType(suggestionType: string): string {
+  return DISPLAY_HEADING_BY_TYPE[suggestionType] ?? formatSuggestionType(suggestionType)
+}
diff --git a/src/prototypes/example-ve-suggestions-playground/veMethods.ts b/src/prototypes/example-ve-suggestions-playground/veMethods.ts
new file mode 100644
index 0000000..d417bc2
--- /dev/null
+++ b/src/prototypes/example-ve-suggestions-playground/veMethods.ts
@@ -0,0 +1,74 @@
+import type { FakeWiki } from 'fakewiki'
+import type { FWVeSuggestionResponse } from 'fakewiki/types'
+
+export interface VeMethodDescriptor {
+  methodName: string
+  run: (wiki: FakeWiki, pageTitle: string) => Promise<FWVeSuggestionResponse>
+}
+
+export const VE_METHODS: VeMethodDescriptor[] = [
+  {
+    methodName: 'getVeToneSuggestions',
+    run: (client, title) =>
+      client.getVeToneSuggestions(title, { threshold: 0.8, maxCandidates: 20 }),
+  },
+  {
+    methodName: 'getVeTextMatchSuggestions',
+    run: (client, title) => client.getVeTextMatchSuggestions(title),
+  },
+  {
+    methodName: 'getVeExternalLinkSuggestions',
+    run: (client, title) => client.getVeExternalLinkSuggestions(title),
+  },
+  {
+    methodName: 'getVeDuplicateLinkSuggestions',
+    run: (client, title) => client.getVeDuplicateLinkSuggestions(title, { scope: 'paragraph' }),
+  },
+  {
+    methodName: 'getVeDisambiguationSuggestions',
+    run: (client, title) => client.getVeDisambiguationSuggestions(title),
+  },
+  {
+    methodName: 'getVeAddReferenceSuggestions',
+    run: (client, title) => client.getVeAddReferenceSuggestions(title),
+  },
+  {
+    methodName: 'getVeImageCaptionSuggestions',
+    run: (client, title) => client.getVeImageCaptionSuggestions(title),
+  },
+  {
+    methodName: 'getVeYearLinkSuggestions',
+    run: (client, title) => client.getVeYearLinkSuggestions(title),
+  },
+  {
+    methodName: 'getVeConvertReferenceSuggestions',
+    run: (client, title) =>
+      client.getVeConvertReferenceSuggestions(title, { strict: 'url-only' }),
+  },
+  {
+    methodName: 'getVeCitationNeededSuggestions',
+    run: (client, title) => client.getVeCitationNeededSuggestions(title),
+  },
+  {
+    methodName: 'getVeDoubleBoldSuggestions',
+    run: (client, title) => client.getVeDoubleBoldSuggestions(title),
+  },
+  {
+    methodName: 'getVeRequiredTemplateParamSuggestions',
+    run: (client, title) => client.getVeRequiredTemplateParamSuggestions(title),
+  },
+  {
+    methodName: 'getVeRedirectSuggestions',
+    run: (client, title) => client.getVeRedirectSuggestions(title),
+  },
+  {
+    methodName: 'getVeSuggestedLinkSuggestions',
+    run: (client, title) => client.getVeSuggestedLinkSuggestions(title, { threshold: 0.8 }),
+  },
+  {
+    methodName: 'getVeFakeHeadingSuggestions',
+    run: (client, title) => client.getVeFakeHeadingSuggestions(title),
+  },
+]
+
+export const VE_METHOD_COUNT = VE_METHODS.length
diff --git a/src/prototypes/example-ve-suggestions-playground/veSuggestionCards.ts b/src/prototypes/example-ve-suggestions-playground/veSuggestionCards.ts
new file mode 100644
index 0000000..9cc4a86
--- /dev/null
+++ b/src/prototypes/example-ve-suggestions-playground/veSuggestionCards.ts
@@ -0,0 +1,571 @@
+import type { FakeWiki } from 'fakewiki'
+import type { FWVeSuggestionItem, FWVeSuggestionResponse } from 'fakewiki/types'
+
+import { formatSuggestionType, headingForSuggestionType } from './veDisplayHeadings'
+import { normalizePageTitle } from './veSuggestionsCache'
+
+export interface SuggestionCardData {
+  cardId: string
+  methodName: string
+  suggestionType: string
+  heading: string
+  descriptionHtml: string
+  rawSnippetWikitext: string
+  renderedSnippetHtml: string
+  cardLinkUrl: string
+  raw: FWVeSuggestionItem
+  groupedSuggestions?: FWVeSuggestionItem[]
+  diagnostics?: FWVeSuggestionResponse['diagnostics']
+  responseMeta: Pick<FWVeSuggestionResponse, 'pageTitle' | 'pageId' | 'candidates'>
+}
+
+export interface SectionRange {
+  title: string
+  startOffset: number
+  endOffset: number
+}
+
+type DescriptionContext = {
+  suggestion: FWVeSuggestionItem
+  selectedCandidate: {
+    id: string
+    text?: string
+    context?: string
+    data?: Record<string, unknown>
+  } | null
+}
+
+type SuggestionDisplayConfig = {
+  heading: string
+  description: (context: DescriptionContext, wiki: FakeWiki) => string
+}
+
+const DISPLAY_BY_TYPE: Record<string, SuggestionDisplayConfig> = {
+  addReference: {
+    heading: 'Add reference',
+    description: () => 'Help explain where this information is coming from.',
+  },
+  citationNeeded: {
+    heading: 'Add citation needed',
+    description: () => 'Flag this statement as needing a source.',
+  },
+  convertReference: {
+    heading: 'Convert reference',
+    description: () => 'Replace this with a formatted reference.',
+  },
+  disambiguation: {
+    heading: 'Fix disambiguation link',
+    description: (context, wiki) => createTargetDescription('Link to', context, wiki),
+  },
+  doubleBold: {
+    heading: 'Remove bold formatting',
+    description: () => 'Avoid extra emphasis in this part of the article.',
+  },
+  duplicateLink: {
+    heading: 'Remove duplicate link',
+    description: (context, wiki) => createTargetDescription('Link to', context, wiki),
+  },
+  externalLink: {
+    heading: 'Remove external link',
+    description: () => 'Keep external links out of body text where possible.',
+  },
+  fakeHeading: {
+    heading: 'Convert fake heading',
+    description: () => 'Use a real section heading format instead.',
+  },
+  imageCaption: {
+    heading: 'Improve image caption',
+    description: () => 'Make the caption more descriptive for readers.',
+  },
+  redirect: {
+    heading: 'Replace redirect link',
+    description: (context, wiki) => createRedirectDescription(context, wiki),
+  },
+  requiredTemplateParam: {
+    heading: 'Add missing information',
+    description: (context, wiki) => createRequiredTemplateParamDescription(context, wiki),
+  },
+  suggestedLink: {
+    heading: 'Add link',
+    description: (context, wiki) => createTargetDescription('Consider linking to', context, wiki),
+  },
+  textMatch: {
+    heading: 'Rewrite flagged text',
+    description: () => 'Replace language that may need improvement.',
+  },
+  tone: {
+    heading: 'Adjust tone',
+    description: () => 'Make this wording more neutral and encyclopedic.',
+  },
+  yearLink: {
+    heading: 'Fix year link',
+    description: () => 'Match the linked year to the intended text.',
+  },
+}
+
+const SNIPPETLESS_SUGGESTION_TYPES = new Set(['redirect'])
+const REDIRECT_GROUP_MAX_VISIBLE = 3
+const REDIRECT_GROUP_HEADING = 'Replace redirect links'
+
+function escapeHtml(value: string): string {
+  return value
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;')
+}
+
+function toSectionHash(sectionTitle: string): string {
+  const normalized = sectionTitle.trim().replaceAll(' ', '_')
+  if (!normalized) return ''
+  return encodeURIComponent(normalized)
+}
+
+function getTargetLabel(context: DescriptionContext): string | null {
+  const suggestionData = context.suggestion.data as Record<string, unknown> | undefined
+  const candidateData = context.selectedCandidate?.data as Record<string, unknown> | undefined
+  const target =
+    (typeof suggestionData?.target === 'string' && suggestionData.target) ||
+    (typeof candidateData?.target === 'string' && candidateData.target) ||
+    null
+  return target?.trim() || null
+}
+
+function createTargetDescription(prefix: string, context: DescriptionContext, wiki: FakeWiki): string {
+  const targetLabel = getTargetLabel(context)
+  if (!targetLabel) return `${prefix} related article.`
+  const href = escapeHtml(wiki.getPageUrl(targetLabel))
+  const text = escapeHtml(targetLabel)
+  return `${prefix} <a href="${href}" target="_blank" rel="noreferrer noopener">${text}</a>.`
+}
+
+function createRedirectDescription(context: DescriptionContext, wiki: FakeWiki): string {
+  const suggestionData = context.suggestion.data as Record<string, unknown> | undefined
+  const candidateData = context.selectedCandidate?.data as Record<string, unknown> | undefined
+  const fromTarget =
+    (typeof suggestionData?.target === 'string' && suggestionData.target.trim()) ||
+    (typeof candidateData?.target === 'string' && candidateData.target.trim()) ||
+    'this link'
+  const toTarget =
+    (typeof suggestionData?.finalTarget === 'string' && suggestionData.finalTarget.trim()) || ''
+  const fromHref = escapeHtml(wiki.getPageUrl(fromTarget))
+  const fromText = escapeHtml(fromTarget)
+  if (!toTarget) {
+    return `Change link from <a href="${fromHref}" target="_blank" rel="noreferrer noopener">${fromText}</a>.`
+  }
+  const toHref = escapeHtml(wiki.getPageUrl(toTarget))
+  const toText = escapeHtml(toTarget)
+  return `Change link from <a href="${fromHref}" target="_blank" rel="noreferrer noopener">${fromText}</a> to <a href="${toHref}" target="_blank" rel="noreferrer noopener">${toText}</a>.`
+}
+
+function createRequiredTemplateParamDescription(
+  context: DescriptionContext,
+  wiki: FakeWiki,
+): string {
+  const suggestionData = context.suggestion.data as Record<string, unknown> | undefined
+  const templateRaw = typeof suggestionData?.template === 'string' ? suggestionData.template.trim() : ''
+  const templateCore = templateRaw.replace(/^Template:/i, '').trim()
+  const templatePageTitle = templateCore ? `Template:${templateCore}` : ''
+  const templateHref = templatePageTitle ? escapeHtml(wiki.getPageUrl(templatePageTitle)) : ''
+  const templateLabel = escapeHtml(templateCore || templateRaw || 'this template')
+  const emptyNamedParams =
+    Array.isArray(suggestionData?.emptyNamedParams) ?
+      suggestionData.emptyNamedParams
+        .filter((value): value is string => typeof value === 'string')
+        .map((value) => value.trim())
+        .filter(Boolean)
+    : []
+  const allowedFieldNames = new Set(['website'])
+  const allowedMissingFields = emptyNamedParams.filter((field) =>
+    allowedFieldNames.has(field.toLowerCase()),
+  )
+  const fieldSummary =
+    allowedMissingFields.length === 1 ?
+      `the missing ${escapeHtml(allowedMissingFields[0] ?? '')} field`
+    : emptyNamedParams.length === 0 ? 'a missing field'
+    : emptyNamedParams.length === 1 ? 'a missing field'
+    : 'missing fields'
+  if (!templateHref) {
+    return `Complete the ${templateLabel} template by adding ${fieldSummary}.`
+  }
+  return `Complete the <a href="${templateHref}" target="_blank" rel="noreferrer noopener">${templateLabel}</a> template by adding ${fieldSummary}.`
+}
+
+function getTemplateTitleSnippet(context: DescriptionContext): string | null {
+  const candidateData = context.selectedCandidate?.data as Record<string, unknown> | undefined
+  const invocation = typeof candidateData?.invocation === 'string' ? candidateData.invocation : ''
+  if (!invocation) return null
+  const match = invocation.match(/\|\s*title\s*=\s*([^|}]+)/i)
+  const title = (match?.[1] ?? '').trim()
+  return title || null
+}
+
+function readContextField(
+  suggestionData: Record<string, unknown> | undefined,
+  candidateData: Record<string, unknown> | undefined,
+  field: 'context_before' | 'context_after',
+): string {
+  const fromSuggestion = suggestionData?.[field]
+  if (typeof fromSuggestion === 'string') return fromSuggestion
+  const fromCandidate = candidateData?.[field]
+  if (typeof fromCandidate === 'string') return fromCandidate
+  return ''
+}
+
+function normalizeSnippetWikitext(snippet: string): string {
+  return snippet.trim()
+}
+
+function getSnippetWikitext(context: DescriptionContext, suggestionType: string): string {
+  if (SNIPPETLESS_SUGGESTION_TYPES.has(suggestionType)) {
+    return ''
+  }
+
+  if (suggestionType === 'requiredTemplateParam') {
+    return normalizeSnippetWikitext(getTemplateTitleSnippet(context) ?? '')
+  }
+
+  const suggestionData = context.suggestion.data as Record<string, unknown> | undefined
+  const candidateData = context.selectedCandidate?.data as Record<string, unknown> | undefined
+  const coreText =
+    context.selectedCandidate?.text?.trim() ||
+    (typeof suggestionData?.link_text === 'string' ? suggestionData.link_text.trim() : '') ||
+    ''
+  const contextBefore = readContextField(suggestionData, candidateData, 'context_before')
+  const contextAfter = readContextField(suggestionData, candidateData, 'context_after')
+
+  if (coreText && (contextBefore || contextAfter)) {
+    const snippet = normalizeSnippetWikitext(`${contextBefore}${coreText}${contextAfter}`)
+    if (snippet) return snippet
+  }
+
+  const candidateContext = context.selectedCandidate?.context?.trim()
+  if (candidateContext) return normalizeSnippetWikitext(candidateContext)
+
+  const fallback = coreText || context.suggestion.message?.trim() || 'Snippet unavailable.'
+  return normalizeSnippetWikitext(fallback)
+}
+
+export function buildSectionTitleMap(source: string): Map<string, string> {
+  const out = new Map<string, string>()
+  const headingRegex = /^==+\s*(.*?)\s*==+\s*$/gm
+  let match: RegExpExecArray | null
+  while ((match = headingRegex.exec(source)) !== null) {
+    const exactTitle = (match[1] ?? '').trim()
+    if (!exactTitle) continue
+    out.set(exactTitle.toLowerCase(), exactTitle)
+  }
+  return out
+}
+
+export function buildSectionRanges(source: string): SectionRange[] {
+  const headings: Array<{ title: string; offset: number }> = []
+  const headingRegex = /^==+\s*(.*?)\s*==+\s*$/gm
+  let match: RegExpExecArray | null
+  while ((match = headingRegex.exec(source)) !== null) {
+    const title = (match[1] ?? '').trim()
+    if (!title) continue
+    headings.push({ title, offset: match.index })
+  }
+  if (headings.length === 0) return []
+  const out: SectionRange[] = [
+    {
+      title: '',
+      startOffset: 0,
+      endOffset: headings[0]?.offset ?? source.length,
+    },
+  ]
+  for (let i = 0; i < headings.length; i++) {
+    const current = headings[i]
+    if (!current) continue
+    const next = headings[i + 1]
+    out.push({
+      title: current.title,
+      startOffset: current.offset,
+      endOffset: next?.offset ?? source.length,
+    })
+  }
+  return out
+}
+
+function resolveBestEffortCardLink(
+  wiki: FakeWiki,
+  pageTitle: string,
+  context: DescriptionContext,
+  sectionTitleMap: Map<string, string>,
+  sectionRanges: SectionRange[],
+  pageSource: string,
+  rawSnippet: string,
+): string {
+  const baseUrl = wiki.getPageUrl(pageTitle)
+  const suggestionData = context.suggestion.data as Record<string, unknown> | undefined
+  const candidateData = context.selectedCandidate?.data as Record<string, unknown> | undefined
+  const sectionHintRaw =
+    (typeof suggestionData?.section === 'string' && suggestionData.section) ||
+    (typeof candidateData?.section === 'string' && candidateData.section) ||
+    (typeof suggestionData?.sectionTitle === 'string' && suggestionData.sectionTitle) ||
+    (typeof candidateData?.sectionTitle === 'string' && candidateData.sectionTitle) ||
+    ''
+  const sectionHint = sectionHintRaw.trim()
+  if (sectionHint && sectionHint.toLowerCase() !== 'lead') {
+    const exactSectionTitle = sectionTitleMap.get(sectionHint.toLowerCase()) ?? sectionHint
+    const hash = toSectionHash(exactSectionTitle)
+    return hash ? `${baseUrl}#${hash}` : baseUrl
+  }
+  if (rawSnippet && pageSource && sectionRanges.length > 0) {
+    const exactOffset = pageSource.indexOf(rawSnippet)
+    if (exactOffset >= 0) {
+      const section = sectionRanges.find(
+        (range) => exactOffset >= range.startOffset && exactOffset < range.endOffset,
+      )
+      if (section?.title) {
+        const hash = toSectionHash(section.title)
+        if (hash) return `${baseUrl}#${hash}`
+      }
+    }
+  }
+  if (rawSnippet && pageSource && sectionRanges.length > 0) {
+    const compactSnippet = rawSnippet.replace(/\s+/g, ' ').trim()
+    if (compactSnippet) {
+      const compactSource = pageSource.replace(/\s+/g, ' ')
+      const compactOffset = compactSource.indexOf(compactSnippet)
+      if (compactOffset >= 0 && compactSource.length > 0) {
+        const approxOffset = Math.floor((compactOffset / compactSource.length) * pageSource.length)
+        const section = sectionRanges.find(
+          (range) => approxOffset >= range.startOffset && approxOffset < range.endOffset,
+        )
+        if (section?.title) {
+          const hash = toSectionHash(section.title)
+          if (hash) return `${baseUrl}#${hash}`
+        }
+      }
+    }
+  }
+  return baseUrl
+}
+
+function snippetCacheKey(pageTitle: string, snippet: string): string {
+  return `${normalizePageTitle(pageTitle)}\0${snippet}`
+}
+
+export function isTransformedSnippetHtml(card: SuggestionCardData): boolean {
+  const html = card.renderedSnippetHtml.trim()
+  if (!html.length) return false
+  if (html === card.rawSnippetWikitext.trim()) return false
+  return html.includes('<')
+}
+
+export function shouldShowSnippet(card: SuggestionCardData): boolean {
+  if (SNIPPETLESS_SUGGESTION_TYPES.has(card.suggestionType)) return false
+  return isTransformedSnippetHtml(card)
+}
+
+export function applySnippetHtmlFromCache(
+  card: SuggestionCardData,
+  pageTitle: string,
+  snippetHtmlByKey: Record<string, string>,
+): SuggestionCardData {
+  if (!card.rawSnippetWikitext) return card
+  const cachedHtml = snippetHtmlByKey[snippetCacheKey(pageTitle, card.rawSnippetWikitext)]
+  if (cachedHtml && cachedHtml !== card.rawSnippetWikitext) {
+    return { ...card, renderedSnippetHtml: cachedHtml }
+  }
+  if (isTransformedSnippetHtml(card)) return card
+  return { ...card, renderedSnippetHtml: '' }
+}
+
+export function hydrateCardsFromSnippetCache(
+  cards: SuggestionCardData[],
+  pageTitle: string,
+  snippetHtmlByKey: Record<string, string>,
+): SuggestionCardData[] {
+  return cards.map((card) => applySnippetHtmlFromCache(card, pageTitle, snippetHtmlByKey))
+}
+
+async function renderSnippetHtml(
+  wiki: FakeWiki,
+  pageTitle: string,
+  snippet: string,
+  snippetHtmlCache: Record<string, string>,
+): Promise<string> {
+  const normalizedSnippet = normalizeSnippetWikitext(snippet)
+  if (!normalizedSnippet) return ''
+  const key = snippetCacheKey(pageTitle, normalizedSnippet)
+  const cached = snippetHtmlCache[key]
+  if (cached !== undefined) return cached
+  try {
+    const html = await wiki.transformWikitextToHtml(normalizedSnippet, pageTitle)
+    snippetHtmlCache[key] = html
+    return html
+  } catch {
+    return normalizedSnippet
+  }
+}
+
+export async function buildSuggestionCard(
+  wiki: FakeWiki,
+  methodName: string,
+  pageTitle: string,
+  response: FWVeSuggestionResponse,
+  suggestion: FWVeSuggestionItem,
+  index: number,
+  sectionTitleMap: Map<string, string>,
+  sectionRanges: SectionRange[],
+  pageSource: string,
+  snippetHtmlCache: Record<string, string>,
+): Promise<SuggestionCardData> {
+  const selectedCandidate =
+    response.candidates.find((candidate) => candidate.id === suggestion.id) ??
+    response.candidates[0] ??
+    null
+  const display = DISPLAY_BY_TYPE[response.suggestionType] ?? {
+    heading: headingForSuggestionType(response.suggestionType),
+    description: () => 'Help explain where this information is coming from.',
+  }
+  const context = { suggestion, selectedCandidate }
+  const rawSnippet = getSnippetWikitext(context, response.suggestionType)
+  const renderedSnippetHtml = await renderSnippetHtml(
+    wiki,
+    pageTitle,
+    rawSnippet,
+    snippetHtmlCache,
+  )
+
+  return {
+    cardId: `${methodName}-${suggestion.id}-${index}`,
+    methodName,
+    suggestionType: response.suggestionType,
+    heading: display.heading,
+    descriptionHtml: display.description(context, wiki),
+    rawSnippetWikitext: rawSnippet,
+    renderedSnippetHtml,
+    cardLinkUrl: resolveBestEffortCardLink(
+      wiki,
+      pageTitle,
+      context,
+      sectionTitleMap,
+      sectionRanges,
+      pageSource,
+      rawSnippet,
+    ),
+    raw: suggestion,
+    diagnostics: response.diagnostics,
+    responseMeta: {
+      pageTitle: response.pageTitle,
+      pageId: response.pageId,
+      candidates: response.candidates,
+    },
+  }
+}
+
+export function buildFallbackCard(
+  wiki: FakeWiki,
+  methodName: string,
+  pageTitle: string,
+  response: FWVeSuggestionResponse,
+  suggestion: FWVeSuggestionItem,
+  index: number,
+  snippetHtmlByKey: Record<string, string> = {},
+): SuggestionCardData {
+  const selectedCandidate =
+    response.candidates.find((candidate) => candidate.id === suggestion.id) ??
+    response.candidates[0] ??
+    null
+  const display = DISPLAY_BY_TYPE[response.suggestionType] ?? {
+    heading: formatSuggestionType(response.suggestionType),
+    description: () => 'Help explain where this information is coming from.',
+  }
+  const context = { suggestion, selectedCandidate }
+  const rawSnippet = getSnippetWikitext(context, response.suggestionType)
+  const cachedHtml = rawSnippet ?
+    snippetHtmlByKey[snippetCacheKey(pageTitle, rawSnippet)]
+  : undefined
+  const renderedSnippetHtml =
+    cachedHtml && cachedHtml !== rawSnippet ? cachedHtml : ''
+
+  return {
+    cardId: `${methodName}-${suggestion.id}-${index}`,
+    methodName,
+    suggestionType: response.suggestionType,
+    heading: display.heading,
+    descriptionHtml: display.description(context, wiki),
+    rawSnippetWikitext: rawSnippet,
+    renderedSnippetHtml,
+    cardLinkUrl: wiki.getPageUrl(response.pageTitle),
+    raw: suggestion,
+    diagnostics: response.diagnostics,
+    responseMeta: {
+      pageTitle: response.pageTitle,
+      pageId: response.pageId,
+      candidates: response.candidates,
+    },
+  }
+}
+
+export function sortCards(cards: SuggestionCardData[]): SuggestionCardData[] {
+  return groupRedirectCards([...cards])
+}
+
+function groupRedirectCards(cards: SuggestionCardData[]): SuggestionCardData[] {
+  const grouped: SuggestionCardData[] = []
+  let redirectCards: SuggestionCardData[] = []
+
+  function flushRedirectCards(): void {
+    if (redirectCards.length === 0) return
+    if (redirectCards.length === 1) {
+      grouped.push(redirectCards[0]!)
+    } else {
+      grouped.push(buildGroupedRedirectCard(redirectCards))
+    }
+    redirectCards = []
+  }
+
+  for (const card of cards) {
+    if (card.suggestionType === 'redirect') {
+      redirectCards.push(card)
+      continue
+    }
+    flushRedirectCards()
+    grouped.push(card)
+  }
+
+  flushRedirectCards()
+  return grouped
+}
+
+function formatMoreLinksLabel(count: number): string {
+  return count === 1 ? '1 more link' : `${count} more links`
+}
+
+function buildGroupedRedirectDescriptionHtml(cards: SuggestionCardData[]): string {
+  const visibleCards = cards.slice(0, REDIRECT_GROUP_MAX_VISIBLE)
+  const lines = visibleCards.map((card) => card.descriptionHtml)
+  const remainingCount = cards.length - visibleCards.length
+
+  if (remainingCount > 0) {
+    lines.push(
+      `<span class="suggestion-card__more-links">${escapeHtml(formatMoreLinksLabel(remainingCount))}</span>`,
+    )
+  }
+
+  return lines.join('<br>')
+}
+
+function buildGroupedRedirectCard(cards: SuggestionCardData[]): SuggestionCardData {
+  const first = cards[0]!
+  return {
+    cardId: `${first.methodName}-redirect-group`,
+    methodName: first.methodName,
+    suggestionType: first.suggestionType,
+    heading: REDIRECT_GROUP_HEADING,
+    descriptionHtml: buildGroupedRedirectDescriptionHtml(cards),
+    rawSnippetWikitext: '',
+    renderedSnippetHtml: '',
+    cardLinkUrl: first.cardLinkUrl,
+    raw: first.raw,
+    groupedSuggestions: cards.map((card) => card.raw),
+    diagnostics: first.diagnostics,
+    responseMeta: first.responseMeta,
+  }
+}
diff --git a/src/prototypes/example-ve-suggestions-playground/veSuggestionsCache.ts b/src/prototypes/example-ve-suggestions-playground/veSuggestionsCache.ts
new file mode 100644
index 0000000..3aff2c8
--- /dev/null
+++ b/src/prototypes/example-ve-suggestions-playground/veSuggestionsCache.ts
@@ -0,0 +1,122 @@
+import type { FWVeSuggestionResponse } from 'fakewiki/types'
+
+import type { SuggestionCardData } from './veSuggestionCards'
+
+const CACHE_STORAGE_KEY = 'protowiki-ve-suggestions-cache-v1'
+const UI_STORAGE_KEY = 'protowiki-ve-suggestions-ui-v1'
+
+export type CachedMethodResult =
+  | { ok: true; response: FWVeSuggestionResponse }
+  | { ok: false; error: string }
+
+export interface CachedVeSuggestionsRun {
+  fetchedAt: number
+  pageTitle: string
+  pageSource?: string
+  methodResults: Record<string, CachedMethodResult>
+  cards?: SuggestionCardData[]
+  snippetHtmlByKey?: Record<string, string>
+}
+
+export interface VeSuggestionsUiState {
+  pageTitle: string
+  lastViewedAt?: number
+}
+
+type CacheStore = Record<string, CachedVeSuggestionsRun>
+
+function readCacheStore(): CacheStore {
+  if (typeof window === 'undefined') return {}
+
+  try {
+    const raw = window.localStorage.getItem(CACHE_STORAGE_KEY)
+    if (!raw) return {}
+    const parsed: unknown = JSON.parse(raw)
+    if (typeof parsed !== 'object' || parsed === null) return {}
+    return parsed as CacheStore
+  } catch {
+    return {}
+  }
+}
+
+function writeCacheStore(store: CacheStore): void {
+  if (typeof window === 'undefined') return
+
+  try {
+    window.localStorage.setItem(CACHE_STORAGE_KEY, JSON.stringify(store))
+  } catch {
+    // Quota or private-mode failures — ignore.
+  }
+}
+
+export function normalizePageTitle(title: string): string {
+  return title.trim().replace(/_/g, ' ')
+}
+
+export function getCachedRun(title: string): CachedVeSuggestionsRun | null {
+  const key = normalizePageTitle(title)
+  if (!key.length) return null
+
+  const entry = readCacheStore()[key]
+  if (!entry || typeof entry.fetchedAt !== 'number' || typeof entry.pageTitle !== 'string') {
+    return null
+  }
+  if (typeof entry.methodResults !== 'object' || entry.methodResults === null) {
+    return null
+  }
+  return entry
+}
+
+export function setCachedRun(title: string, run: CachedVeSuggestionsRun): void {
+  const key = normalizePageTitle(title)
+  if (!key.length) return
+
+  const store = readCacheStore()
+  store[key] = run
+  writeCacheStore(store)
+}
+
+export function clearCachedRun(title: string): void {
+  const key = normalizePageTitle(title)
+  if (!key.length) return
+
+  const store = readCacheStore()
+  delete store[key]
+  writeCacheStore(store)
+}
+
+export function loadUiState(): VeSuggestionsUiState {
+  if (typeof window === 'undefined') {
+    return { pageTitle: 'Wet Leg' }
+  }
+
+  try {
+    const raw = window.localStorage.getItem(UI_STORAGE_KEY)
+    if (!raw) return { pageTitle: 'Wet Leg' }
+    const parsed: unknown = JSON.parse(raw)
+    if (typeof parsed !== 'object' || parsed === null) {
+      return { pageTitle: 'Wet Leg' }
+    }
+    const record = parsed as Partial<VeSuggestionsUiState>
+    return {
+      pageTitle:
+        typeof record.pageTitle === 'string' && record.pageTitle.trim().length > 0
+          ? record.pageTitle
+          : 'Wet Leg',
+      lastViewedAt:
+        typeof record.lastViewedAt === 'number' ? record.lastViewedAt : undefined,
+    }
+  } catch {
+    return { pageTitle: 'Wet Leg' }
+  }
+}
+
+export function saveUiState(state: VeSuggestionsUiState): void {
+  if (typeof window === 'undefined') return
+
+  try {
+    window.localStorage.setItem(UI_STORAGE_KEY, JSON.stringify(state))
+  } catch {
+    // Quota or private-mode failures — ignore.
+  }
+}
diff --git a/vite.config.ts b/vite.config.ts
index bb0cbcc..d62c897 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -83,6 +83,9 @@ export default defineConfig(({ command }) => ({
       '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
   },
+  optimizeDeps: {
+    exclude: ['fakewiki'],
+  },
   server: {
     port: 5173,
     strictPort: false,

From f27e7e48f72c023614e48238ee76e4d3236d7e26 Mon Sep 17 00:00:00 2001
From: Lu Wilson <lu@todepond.com>
Date: Thu, 21 May 2026 13:11:04 +0100
Subject: [PATCH 05/21] remove placeholder

---
 src/components/PrototypeUserSettingsPanel.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/PrototypeUserSettingsPanel.vue b/src/components/PrototypeUserSettingsPanel.vue
index cb224e8..84c9c30 100644
--- a/src/components/PrototypeUserSettingsPanel.vue
+++ b/src/components/PrototypeUserSettingsPanel.vue
@@ -42,11 +42,7 @@ const editedPagesText = computed({
     </label>
     <label v-if="user === 'real'" class="prototype-user-settings-panel__field">
       <span class="prototype-user-settings-panel__label">Username</span>
-      <CdxTextInput
-        v-model="realUsername"
-        class="prototype-user-settings-panel__input"
-        placeholder="e.g. Jimbo Wales"
-      />
+      <CdxTextInput v-model="realUsername" class="prototype-user-settings-panel__input" />
     </label>
     <template v-if="user !== 'real'">
       <label class="prototype-user-settings-panel__field">

From 4b9beeef0cbe8c0d5aad47c1a9a53e6a3536f33e Mon Sep 17 00:00:00 2001
From: Lu Wilson <lu@todepond.com>
Date: Thu, 21 May 2026 13:48:00 +0100
Subject: [PATCH 06/21] LETS GO SUGGESTION MODE

---
 src/components/DashboardModule.vue            |  42 +-
 src/lib/dashpagePortfolioCache.ts             |  59 +++
 src/lib/dashpageSuggestionCache.ts            | 120 +++++
 src/lib/fetchUserEditedPageTitles.ts          | 133 ++++++
 .../ve-suggestions/assets/difficulty-easy.svg |   3 +
 .../ve-suggestions/assets/difficulty-hard.svg |   3 +
 .../assets/difficulty-medium.svg              |   3 +
 src/lib/ve-suggestions/index.ts               |  49 ++
 .../ve-suggestions/pickRandomSuggestion.ts    |  17 +
 .../runVeSuggestionsPipeline.ts               | 254 ++++++++++
 src/lib/ve-suggestions/snippetLinkStrip.ts    |  45 ++
 .../ve-suggestions}/veDisplayHeadings.ts      |   0
 .../ve-suggestions}/veMethods.ts              |   0
 .../ve-suggestions}/veSuggestionCards.ts      |  43 +-
 .../ve-suggestions/veSuggestionDifficulty.ts  |  30 ++
 .../ve-suggestions}/veSuggestionsCache.ts     |   0
 .../SuggestionCard.vue                        |   2 +-
 .../useVeSuggestionsPlayground.ts             | 200 ++------
 .../SuggestionModeModule.vue                  | 451 ++++++++++++++++++
 src/prototypes/template-homepage/index.vue    |  40 +-
 .../useDashpageSuggestionModule.ts            | 260 ++++++++++
 21 files changed, 1574 insertions(+), 180 deletions(-)
 create mode 100644 src/lib/dashpagePortfolioCache.ts
 create mode 100644 src/lib/dashpageSuggestionCache.ts
 create mode 100644 src/lib/fetchUserEditedPageTitles.ts
 create mode 100644 src/lib/ve-suggestions/assets/difficulty-easy.svg
 create mode 100644 src/lib/ve-suggestions/assets/difficulty-hard.svg
 create mode 100644 src/lib/ve-suggestions/assets/difficulty-medium.svg
 create mode 100644 src/lib/ve-suggestions/index.ts
 create mode 100644 src/lib/ve-suggestions/pickRandomSuggestion.ts
 create mode 100644 src/lib/ve-suggestions/runVeSuggestionsPipeline.ts
 create mode 100644 src/lib/ve-suggestions/snippetLinkStrip.ts
 rename src/{prototypes/example-ve-suggestions-playground => lib/ve-suggestions}/veDisplayHeadings.ts (100%)
 rename src/{prototypes/example-ve-suggestions-playground => lib/ve-suggestions}/veMethods.ts (100%)
 rename src/{prototypes/example-ve-suggestions-playground => lib/ve-suggestions}/veSuggestionCards.ts (93%)
 create mode 100644 src/lib/ve-suggestions/veSuggestionDifficulty.ts
 rename src/{prototypes/example-ve-suggestions-playground => lib/ve-suggestions}/veSuggestionsCache.ts (100%)
 create mode 100644 src/prototypes/template-homepage/SuggestionModeModule.vue
 create mode 100644 src/prototypes/template-homepage/useDashpageSuggestionModule.ts

diff --git a/src/components/DashboardModule.vue b/src/components/DashboardModule.vue
index f504caa..7d0ebe0 100644
--- a/src/components/DashboardModule.vue
+++ b/src/components/DashboardModule.vue
@@ -21,6 +21,11 @@ interface Props {
   cta?: string | null
   /** Light blue informational tint (**`--background-color-progressive-subtle`**). */
   subtle?: boolean
+  /**
+   * Static mobile card (no **`RouterLink`**) — stacked title + body like a link card,
+   * but tappable controls in the body/header stay interactive.
+   */
+  mobileCard?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -28,6 +33,7 @@ const props = withDefaults(defineProps<Props>(), {
   to: undefined,
   cta: '',
   subtle: false,
+  mobileCard: false,
 })
 
 /** Resolves **`to`** for **`RouterLink`**; plain **string** targets are trimmed (whitespace-only → no link card). */
@@ -73,6 +79,22 @@ function trimmedTitle(): string {
     </slot>
   </RouterLink>
 
+  <section
+    v-else-if="props.mobileCard"
+    class="mobile-card dashboard-module dashboard-slot"
+    :class="{ 'dashboard-module--subtle': props.subtle }"
+  >
+    <div v-if="trimmedTitle()" class="mobile-card__header">
+      <span class="mobile-card__title">{{ trimmedTitle() }}</span>
+      <div v-if="$slots['header-actions']" class="mobile-card__header-actions">
+        <slot name="header-actions" />
+      </div>
+    </div>
+    <div class="mobile-card__content mobile-card__content--preview dashboard-module__body">
+      <slot />
+    </div>
+  </section>
+
   <section
     v-else
     class="sidebar-card dashboard-module dashboard-slot"
@@ -98,10 +120,14 @@ function trimmedTitle(): string {
   padding: 1rem;
 }
 
-.mobile-card--link {
+.mobile-card--link,
+.mobile-card:not(.mobile-card--link) {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
+}
+
+.mobile-card--link {
   text-decoration: none;
   color: inherit;
 }
@@ -137,6 +163,20 @@ function trimmedTitle(): string {
   gap: 0.5rem;
 }
 
+.mobile-card__header-actions {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+}
+
+.mobile-card__header-actions .cdx-button.cdx-button--icon-only {
+  min-width: var(--min-size-interactive-pointer, 32px);
+  min-height: var(--min-size-interactive-pointer, 32px);
+  width: var(--min-size-interactive-pointer, 32px);
+  height: var(--min-size-interactive-pointer, 32px);
+  padding: 0;
+}
+
 .mobile-card__title {
   font-weight: bold;
   font-size: var(--font-size-medium);
diff --git a/src/lib/dashpagePortfolioCache.ts b/src/lib/dashpagePortfolioCache.ts
new file mode 100644
index 0000000..5655377
--- /dev/null
+++ b/src/lib/dashpagePortfolioCache.ts
@@ -0,0 +1,59 @@
+import { normalizeWikiUsername } from '@/lib/config'
+
+const STORAGE_KEY = 'protowiki-dashpage-portfolio-v1'
+
+export interface DashpagePortfolioCacheEntry {
+  fetchedAt: number
+  titles: string[]
+}
+
+type PortfolioStore = Record<string, DashpagePortfolioCacheEntry>
+
+function readStore(): PortfolioStore {
+  if (typeof window === 'undefined') return {}
+
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY)
+    if (!raw) return {}
+    const parsed: unknown = JSON.parse(raw)
+    if (typeof parsed !== 'object' || parsed === null) return {}
+    return parsed as PortfolioStore
+  } catch {
+    return {}
+  }
+}
+
+function writeStore(store: PortfolioStore): void {
+  if (typeof window === 'undefined') return
+
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(store))
+  } catch {
+    // Quota or private-mode failures — ignore.
+  }
+}
+
+export function getPortfolioCache(username: string): DashpagePortfolioCacheEntry | null {
+  const key = normalizeWikiUsername(username)
+  if (!key.length) return null
+
+  const entry = readStore()[key]
+  if (!entry || typeof entry.fetchedAt !== 'number' || !Array.isArray(entry.titles)) {
+    return null
+  }
+  return entry
+}
+
+export function setPortfolioCache(username: string, titles: string[]): DashpagePortfolioCacheEntry {
+  const key = normalizeWikiUsername(username)
+  const entry: DashpagePortfolioCacheEntry = {
+    fetchedAt: Date.now(),
+    titles: [...titles],
+  }
+  if (!key.length) return entry
+
+  const store = readStore()
+  store[key] = entry
+  writeStore(store)
+  return entry
+}
diff --git a/src/lib/dashpageSuggestionCache.ts b/src/lib/dashpageSuggestionCache.ts
new file mode 100644
index 0000000..41d67a5
--- /dev/null
+++ b/src/lib/dashpageSuggestionCache.ts
@@ -0,0 +1,120 @@
+import type { ConfigUser, UserPageLists } from '@/lib/config'
+import { normalizeWikiUsername } from '@/lib/config'
+
+const STORAGE_KEY = 'protowiki-dashpage-suggestion-module-v2'
+export const DASHPAGE_SUGGESTION_FALLBACK_PAGE = 'Wet Leg'
+
+export interface DashpageSuggestionModuleCache {
+  fetchedAt: number
+  selectedPageTitle: string
+  thumbnailSrc?: string
+  shortDescription?: string
+}
+
+type ModuleStore = Record<string, DashpageSuggestionModuleCache>
+
+export function dashpageSuggestionUserKey(user: ConfigUser, realUsername: string): string {
+  if (user === 'real') {
+    const normalized = normalizeWikiUsername(realUsername)
+    return normalized.length ? `real:${normalized}` : 'real'
+  }
+  return user
+}
+
+function readStore(): ModuleStore {
+  if (typeof window === 'undefined') return {}
+
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY)
+    if (!raw) return {}
+    const parsed: unknown = JSON.parse(raw)
+    if (typeof parsed !== 'object' || parsed === null) return {}
+    return parsed as ModuleStore
+  } catch {
+    return {}
+  }
+}
+
+function writeStore(store: ModuleStore): void {
+  if (typeof window === 'undefined') return
+
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(store))
+  } catch {
+    // Quota or private-mode failures — ignore.
+  }
+}
+
+export function getDashpageSuggestionModuleCache(
+  userKey: string,
+): DashpageSuggestionModuleCache | null {
+  if (!userKey.length) return null
+
+  const entry = readStore()[userKey]
+  if (!entry || typeof entry.fetchedAt !== 'number' || typeof entry.selectedPageTitle !== 'string') {
+    return null
+  }
+  return entry
+}
+
+export function setDashpageSuggestionModuleCache(
+  userKey: string,
+  cache: DashpageSuggestionModuleCache,
+): void {
+  if (!userKey.length) return
+
+  const store = readStore()
+  store[userKey] = cache
+  writeStore(store)
+}
+
+export function getPortfolioPagesForUser(
+  user: ConfigUser,
+  pageLists: UserPageLists,
+  cachedRealTitles: string[],
+): string[] {
+  if (user === 'real') {
+    return cachedRealTitles.length ? [...cachedRealTitles] : []
+  }
+
+  const seen = new Set<string>()
+  const titles: string[] = []
+
+  for (const list of [pageLists.watchlist, pageLists.readingList, pageLists.editedPages]) {
+    for (const title of list) {
+      const trimmed = title.trim()
+      if (!trimmed.length || seen.has(trimmed)) continue
+      seen.add(trimmed)
+      titles.push(trimmed)
+    }
+  }
+
+  return titles
+}
+
+export function pickRandomPage(titles: string[], exclude?: string): string {
+  const pool =
+    exclude && titles.length > 1 ?
+      titles.filter((title) => title !== exclude)
+    : titles
+
+  if (!pool.length) {
+    return DASHPAGE_SUGGESTION_FALLBACK_PAGE
+  }
+
+  const index = Math.floor(Math.random() * pool.length)
+  return pool[index] ?? DASHPAGE_SUGGESTION_FALLBACK_PAGE
+}
+
+export function resolvePortfolioPage(
+  user: ConfigUser,
+  pageLists: UserPageLists,
+  cachedRealTitles: string[],
+  exclude?: string,
+): string {
+  const portfolio = getPortfolioPagesForUser(user, pageLists, cachedRealTitles)
+  if (!portfolio.length) {
+    return DASHPAGE_SUGGESTION_FALLBACK_PAGE
+  }
+  return pickRandomPage(portfolio, exclude)
+}
diff --git a/src/lib/fetchUserEditedPageTitles.ts b/src/lib/fetchUserEditedPageTitles.ts
new file mode 100644
index 0000000..36ea53c
--- /dev/null
+++ b/src/lib/fetchUserEditedPageTitles.ts
@@ -0,0 +1,133 @@
+import { normalizeWikiUsername } from '@/lib/config'
+
+const WIKI_HOST = 'en.wikipedia.org'
+const API_USER_AGENT =
+  'ProtoWiki/0.1 (https://github.com/wikimedia-research/protowiki) dashpage-suggestion-mode'
+
+export class FetchUserEditedPageTitlesError extends Error {
+  constructor(
+    message: string,
+    public readonly code: 'missing_username' | 'user_not_found' | 'aborted' | 'http',
+  ) {
+    super(message)
+    this.name = 'FetchUserEditedPageTitlesError'
+  }
+}
+
+export interface FetchUserEditedPageTitlesOptions {
+  signal?: AbortSignal
+}
+
+function assertNotAborted(signal?: AbortSignal): void {
+  if (signal?.aborted) {
+    throw new FetchUserEditedPageTitlesError('Request aborted', 'aborted')
+  }
+}
+
+function actionUrl(params: Record<string, string>): string {
+  const search = new URLSearchParams({
+    ...params,
+    format: 'json',
+    origin: '*',
+  })
+  return `https://${WIKI_HOST}/w/api.php?${search.toString()}`
+}
+
+async function fetchJson(url: string, signal?: AbortSignal): Promise<unknown> {
+  assertNotAborted(signal)
+  const response = await fetch(url, {
+    signal,
+    headers: { 'Api-User-Agent': API_USER_AGENT },
+  })
+  if (!response.ok) {
+    throw new FetchUserEditedPageTitlesError(`HTTP ${response.status}`, 'http')
+  }
+  return response.json()
+}
+
+export async function fetchUserEditedPageTitles(
+  username: string,
+  options: FetchUserEditedPageTitlesOptions = {},
+): Promise<string[]> {
+  const normalized = normalizeWikiUsername(username)
+  if (!normalized.length) {
+    throw new FetchUserEditedPageTitlesError('Enter a Wikipedia username in the user menu', 'missing_username')
+  }
+
+  const data = (await fetchJson(
+    actionUrl({
+      action: 'query',
+      list: 'usercontribs',
+      ucuser: normalized,
+      ucnamespace: '0',
+      uclimit: '500',
+    }),
+    options.signal,
+  )) as {
+    query?: {
+      usercontribs?: Array<{ title?: string }>
+    }
+    error?: { code?: string; info?: string }
+  }
+
+  if (data.error?.code === 'missingtitle' || data.error?.code === 'nosuchuser') {
+    throw new FetchUserEditedPageTitlesError('User not found', 'user_not_found')
+  }
+
+  const seen = new Set<string>()
+  const titles: string[] = []
+
+  for (const contrib of data.query?.usercontribs ?? []) {
+    const title = typeof contrib.title === 'string' ? contrib.title.trim() : ''
+    if (!title.length || seen.has(title)) continue
+    seen.add(title)
+    titles.push(title)
+  }
+
+  return titles
+}
+
+export async function fetchPageThumbnail(
+  pageTitle: string,
+  options: FetchUserEditedPageTitlesOptions = {},
+): Promise<string | undefined> {
+  const metadata = await fetchPagePreviewMetadata(pageTitle, options)
+  return metadata.thumbnailSrc
+}
+
+export interface PagePreviewMetadata {
+  thumbnailSrc?: string
+  shortDescription?: string
+}
+
+export async function fetchPagePreviewMetadata(
+  pageTitle: string,
+  options: FetchUserEditedPageTitlesOptions = {},
+): Promise<PagePreviewMetadata> {
+  const trimmed = pageTitle.trim()
+  if (!trimmed.length) return {}
+
+  const slug = encodeURIComponent(trimmed.replace(/ /g, '_'))
+
+  try {
+    assertNotAborted(options.signal)
+    const response = await fetch(`https://${WIKI_HOST}/api/rest_v1/page/summary/${slug}`, {
+      signal: options.signal,
+      headers: { 'Api-User-Agent': API_USER_AGENT },
+    })
+    if (!response.ok) return {}
+    const json = (await response.json()) as {
+      description?: string
+      thumbnail?: { source?: string }
+    }
+    return {
+      thumbnailSrc: json.thumbnail?.source,
+      shortDescription:
+        typeof json.description === 'string' && json.description.trim().length
+          ? json.description.trim()
+          : undefined,
+    }
+  } catch {
+    return {}
+  }
+}
diff --git a/src/lib/ve-suggestions/assets/difficulty-easy.svg b/src/lib/ve-suggestions/assets/difficulty-easy.svg
new file mode 100644
index 0000000..5714615
--- /dev/null
+++ b/src/lib/ve-suggestions/assets/difficulty-easy.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
+	<path fill="#14866d" d="M19 1v18h-5V1zm-6 6v12H8V7zm-6 6v6H1v-6zM18 2h-3v16h3zm-6 6H9v10h3z"/>
+</svg>
diff --git a/src/lib/ve-suggestions/assets/difficulty-hard.svg b/src/lib/ve-suggestions/assets/difficulty-hard.svg
new file mode 100644
index 0000000..538e477
--- /dev/null
+++ b/src/lib/ve-suggestions/assets/difficulty-hard.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
+	<path fill="#b32424" d="M19 1v18h-5V1zm-6 6v12H8V7zm-6 6v6H1v-6z"/>
+</svg>
diff --git a/src/lib/ve-suggestions/assets/difficulty-medium.svg b/src/lib/ve-suggestions/assets/difficulty-medium.svg
new file mode 100644
index 0000000..f357991
--- /dev/null
+++ b/src/lib/ve-suggestions/assets/difficulty-medium.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
+	<path fill="#ac6600" d="M19 1v18h-5V1zm-6 6v12H8V7zm-6 6v6H1v-6zM18 2h-3v16h3z"/>
+</svg>
diff --git a/src/lib/ve-suggestions/index.ts b/src/lib/ve-suggestions/index.ts
new file mode 100644
index 0000000..820791b
--- /dev/null
+++ b/src/lib/ve-suggestions/index.ts
@@ -0,0 +1,49 @@
+export { VE_METHOD_COUNT, VE_METHODS, type VeMethodDescriptor } from './veMethods'
+export {
+  DISPLAY_HEADING_BY_TYPE,
+  formatSuggestionType,
+  headingForSuggestionType,
+} from './veDisplayHeadings'
+export {
+  applySnippetHtmlFromCache,
+  buildFallbackCard,
+  buildSectionRanges,
+  buildSectionTitleMap,
+  buildSuggestionCard,
+  hydrateCardsFromSnippetCache,
+  isTransformedSnippetHtml,
+  shouldShowSnippet,
+  sortCards,
+  editUrlForSuggestionCard,
+  type SectionRange,
+  type SuggestionCardData,
+} from './veSuggestionCards'
+export {
+  clearCachedRun,
+  getCachedRun,
+  loadUiState,
+  normalizePageTitle,
+  saveUiState,
+  setCachedRun,
+  type CachedMethodResult,
+  type CachedVeSuggestionsRun,
+  type VeSuggestionsUiState,
+} from './veSuggestionsCache'
+export { pickRandomSuggestion } from './pickRandomSuggestion'
+export {
+  CHANGE_SIZE_BY_SUGGESTION_TYPE,
+  CHANGE_SIZE_COLORS,
+  changeSizeForSuggestionType,
+  type SuggestionChangeSize,
+} from './veSuggestionDifficulty'
+export { stripLinksFromSnippetHtml, stripLinksFromWikitext } from './snippetLinkStrip'
+export {
+  cardsFromCachedRun,
+  cardsFromMethodResults,
+  createVeSuggestionsWiki,
+  methodErrorsFromResults,
+  runVeSuggestionsPipeline,
+  type RunVeSuggestionsPipelineOptions,
+  type VeSuggestionsPipelineProgress,
+  type VeSuggestionsPipelineResult,
+} from './runVeSuggestionsPipeline'
diff --git a/src/lib/ve-suggestions/pickRandomSuggestion.ts b/src/lib/ve-suggestions/pickRandomSuggestion.ts
new file mode 100644
index 0000000..2d5d49c
--- /dev/null
+++ b/src/lib/ve-suggestions/pickRandomSuggestion.ts
@@ -0,0 +1,17 @@
+import type { SuggestionCardData } from './veSuggestionCards'
+
+function pickRandomItem<T>(items: T[]): T | null {
+  if (!items.length) return null
+  return items[Math.floor(Math.random() * items.length)] ?? null
+}
+
+export function pickRandomSuggestion(cards: SuggestionCardData[]): SuggestionCardData | null {
+  if (!cards.length) return null
+
+  const types = [...new Set(cards.map((card) => card.suggestionType))]
+  const randomType = pickRandomItem(types)
+  if (!randomType) return null
+
+  const cardsOfType = cards.filter((card) => card.suggestionType === randomType)
+  return pickRandomItem(cardsOfType)
+}
diff --git a/src/lib/ve-suggestions/runVeSuggestionsPipeline.ts b/src/lib/ve-suggestions/runVeSuggestionsPipeline.ts
new file mode 100644
index 0000000..2aaea27
--- /dev/null
+++ b/src/lib/ve-suggestions/runVeSuggestionsPipeline.ts
@@ -0,0 +1,254 @@
+import { FakeWiki, FakeWikiHttpError } from 'fakewiki'
+
+import {
+  buildFallbackCard,
+  buildSectionRanges,
+  buildSectionTitleMap,
+  buildSuggestionCard,
+  hydrateCardsFromSnippetCache,
+  sortCards,
+  type SuggestionCardData,
+} from './veSuggestionCards'
+import { VE_METHOD_COUNT, VE_METHODS } from './veMethods'
+import {
+  getCachedRun,
+  normalizePageTitle,
+  setCachedRun,
+  type CachedMethodResult,
+  type CachedVeSuggestionsRun,
+} from './veSuggestionsCache'
+
+export interface VeSuggestionsPipelineProgress {
+  completed: number
+  total: number
+}
+
+export interface VeSuggestionsPipelineResult {
+  pageTitle: string
+  cards: SuggestionCardData[]
+  methodErrors: Array<{ methodName: string; message: string }>
+  fromCache: boolean
+  fetchedAt?: number
+  error: string | null
+}
+
+export interface RunVeSuggestionsPipelineOptions {
+  forceRefresh?: boolean
+  onProgress?: (progress: VeSuggestionsPipelineProgress) => void
+}
+
+const DEFAULT_API_USER_AGENT =
+  'ProtoWiki/0.1 (https://github.com/wikimedia-research/protowiki) ve-suggestions'
+
+export function createVeSuggestionsWiki(apiUserAgentSuffix?: string): FakeWiki {
+  const suffix = apiUserAgentSuffix?.trim()
+  return new FakeWiki(undefined, {
+    apiUserAgent: suffix ? `${DEFAULT_API_USER_AGENT} ${suffix}` : DEFAULT_API_USER_AGENT,
+  })
+}
+
+function wrapGetPageSource(
+  wiki: FakeWiki,
+  prefetchedByTitle: Map<string, string>,
+): () => void {
+  const original = wiki.getPageSource.bind(wiki)
+
+  wiki.getPageSource = async (pageName: string): Promise<string> => {
+    const key = normalizePageTitle(pageName)
+    const cached = prefetchedByTitle.get(key)
+    if (cached !== undefined) return cached
+    const source = await original(pageName)
+    prefetchedByTitle.set(key, source)
+    return source
+  }
+
+  return () => {
+    wiki.getPageSource = original
+  }
+}
+
+export function cardsFromMethodResults(
+  wiki: FakeWiki,
+  pageTitle: string,
+  methodResults: Record<string, CachedMethodResult>,
+  snippetHtmlByKey: Record<string, string>,
+): SuggestionCardData[] {
+  const cards: SuggestionCardData[] = []
+
+  for (const method of VE_METHODS) {
+    const result = methodResults[method.methodName]
+    if (!result || result.ok === false) continue
+    const response = result.response
+    for (let index = 0; index < response.suggestions.length; index++) {
+      const suggestion = response.suggestions[index]
+      if (!suggestion) continue
+      cards.push(
+        buildFallbackCard(wiki, method.methodName, pageTitle, response, suggestion, index, snippetHtmlByKey),
+      )
+    }
+  }
+
+  return sortCards(cards)
+}
+
+export function methodErrorsFromResults(
+  methodResults: Record<string, CachedMethodResult>,
+): Array<{ methodName: string; message: string }> {
+  const methodErrors: Array<{ methodName: string; message: string }> = []
+  for (const method of VE_METHODS) {
+    const result = methodResults[method.methodName]
+    if (result?.ok === false) {
+      methodErrors.push({ methodName: method.methodName, message: result.error })
+    }
+  }
+  return methodErrors
+}
+
+export function cardsFromCachedRun(
+  wiki: FakeWiki,
+  run: CachedVeSuggestionsRun,
+): SuggestionCardData[] {
+  const snippetHtmlByKey = run.snippetHtmlByKey ?? {}
+  if (run.cards?.length) {
+    return sortCards(hydrateCardsFromSnippetCache(run.cards, run.pageTitle, snippetHtmlByKey))
+  }
+  return cardsFromMethodResults(wiki, run.pageTitle, run.methodResults, snippetHtmlByKey)
+}
+
+export async function runVeSuggestionsPipeline(
+  wiki: FakeWiki,
+  pageTitle: string,
+  options: RunVeSuggestionsPipelineOptions = {},
+): Promise<VeSuggestionsPipelineResult> {
+  const trimmed = normalizePageTitle(pageTitle)
+  if (!trimmed.length) {
+    return {
+      pageTitle: trimmed,
+      cards: [],
+      methodErrors: [],
+      fromCache: false,
+      error: 'Please enter a page title.',
+    }
+  }
+
+  const forceRefresh = options.forceRefresh ?? false
+
+  if (!forceRefresh) {
+    const cached = getCachedRun(trimmed)
+    if (cached) {
+      return {
+        pageTitle: trimmed,
+        cards: cardsFromCachedRun(wiki, cached),
+        methodErrors: methodErrorsFromResults(cached.methodResults),
+        fromCache: true,
+        fetchedAt: cached.fetchedAt,
+        error: null,
+      }
+    }
+  }
+
+  const existingCache = getCachedRun(trimmed)
+  const run: CachedVeSuggestionsRun = {
+    fetchedAt: Date.now(),
+    pageTitle: trimmed,
+    pageSource: existingCache?.pageSource,
+    methodResults: forceRefresh ? {} : { ...(existingCache?.methodResults ?? {}) },
+    cards: [],
+    snippetHtmlByKey: forceRefresh ? {} : { ...(existingCache?.snippetHtmlByKey ?? {}) },
+  }
+
+  const pageSourceCache = new Map<string, string>()
+  if (run.pageSource) {
+    pageSourceCache.set(trimmed, run.pageSource)
+  }
+
+  const restoreGetPageSource = wrapGetPageSource(wiki, pageSourceCache)
+  let error: string | null = null
+
+  try {
+    if (!run.pageSource) {
+      try {
+        run.pageSource = await wiki.getPageSource(trimmed)
+        pageSourceCache.set(trimmed, run.pageSource)
+        setCachedRun(trimmed, { ...run })
+      } catch (caught) {
+        const message = caught instanceof Error ? caught.message : String(caught)
+        return {
+          pageTitle: trimmed,
+          cards: [],
+          methodErrors: [],
+          fromCache: false,
+          error: `Could not load page source: ${message}`,
+        }
+      }
+    }
+
+    const sectionTitleMap = buildSectionTitleMap(run.pageSource)
+    const sectionRanges = buildSectionRanges(run.pageSource)
+    const snippetHtmlCache = run.snippetHtmlByKey ?? {}
+
+    let completed = 0
+    let abortedForRateLimit = false
+
+    for (const method of VE_METHODS) {
+      if (abortedForRateLimit) break
+
+      try {
+        const response = await method.run(wiki, trimmed)
+        run.methodResults[method.methodName] = { ok: true, response }
+
+        for (let index = 0; index < response.suggestions.length; index++) {
+          const suggestion = response.suggestions[index]
+          if (!suggestion) continue
+          const card = await buildSuggestionCard(
+            wiki,
+            method.methodName,
+            trimmed,
+            response,
+            suggestion,
+            index,
+            sectionTitleMap,
+            sectionRanges,
+            run.pageSource ?? '',
+            snippetHtmlCache,
+          )
+          run.cards = [...(run.cards ?? []), card]
+        }
+      } catch (caught) {
+        const message = caught instanceof Error ? caught.message : String(caught)
+        run.methodResults[method.methodName] = { ok: false, error: message }
+
+        if (caught instanceof FakeWikiHttpError && caught.status === 429) {
+          error = message
+          abortedForRateLimit = true
+        }
+      }
+
+      completed += 1
+      options.onProgress?.({ completed, total: VE_METHOD_COUNT })
+
+      run.fetchedAt = Date.now()
+      run.snippetHtmlByKey = snippetHtmlCache
+      run.cards = sortCards(run.cards ?? [])
+      setCachedRun(trimmed, {
+        ...run,
+        methodResults: { ...run.methodResults },
+        cards: [...(run.cards ?? [])],
+        snippetHtmlByKey: { ...snippetHtmlCache },
+      })
+    }
+
+    const cards = sortCards(hydrateCardsFromSnippetCache(run.cards ?? [], trimmed, snippetHtmlCache))
+
+    return {
+      pageTitle: trimmed,
+      cards,
+      methodErrors: methodErrorsFromResults(run.methodResults),
+      fromCache: false,
+      fetchedAt: run.fetchedAt,
+      error,
+    }
+  } finally {
+    restoreGetPageSource()
+  }
+}
diff --git a/src/lib/ve-suggestions/snippetLinkStrip.ts b/src/lib/ve-suggestions/snippetLinkStrip.ts
new file mode 100644
index 0000000..c82629c
--- /dev/null
+++ b/src/lib/ve-suggestions/snippetLinkStrip.ts
@@ -0,0 +1,45 @@
+/**
+ * Snippet previews are non-navigable — strip link markup from wikitext before
+ * Parsoid transform, then unwrap any `<a>` elements left in the HTML.
+ */
+
+export function stripLinksFromWikitext(wikitext: string): string {
+  let text = wikitext
+
+  text = text.replace(/\[\[(?:[^\]|]*\|)?([^\]]+)\]\]/g, (_match, display: string) => display.trim())
+
+  text = text.replace(/\[([^\]\n]+)\]/g, (_match, inner: string) => {
+    const trimmed = inner.trim()
+    const spaceIndex = trimmed.search(/\s/)
+    if (spaceIndex === -1) {
+      if (/^(?:https?:\/\/|\/\/|mailto:)/i.test(trimmed)) return trimmed
+      return _match
+    }
+
+    const target = trimmed.slice(0, spaceIndex)
+    const label = trimmed.slice(spaceIndex + 1).trim()
+    if (/^(?:https?:\/\/|\/\/|mailto:)/i.test(target)) {
+      return label || target
+    }
+
+    return _match
+  })
+
+  return text
+}
+
+export function stripLinksFromSnippetHtml(html: string): string {
+  const trimmed = html.trim()
+  if (!trimmed.length) return html
+  if (!/<a\b/i.test(trimmed)) return html
+
+  if (typeof DOMParser !== 'undefined') {
+    const doc = new DOMParser().parseFromString(trimmed, 'text/html')
+    for (const anchor of doc.querySelectorAll('a')) {
+      anchor.replaceWith(doc.createTextNode(anchor.textContent ?? ''))
+    }
+    return doc.body.innerHTML
+  }
+
+  return trimmed.replace(/<a\b[^>]*>([\s\S]*?)<\/a>/gi, '$1')
+}
diff --git a/src/prototypes/example-ve-suggestions-playground/veDisplayHeadings.ts b/src/lib/ve-suggestions/veDisplayHeadings.ts
similarity index 100%
rename from src/prototypes/example-ve-suggestions-playground/veDisplayHeadings.ts
rename to src/lib/ve-suggestions/veDisplayHeadings.ts
diff --git a/src/prototypes/example-ve-suggestions-playground/veMethods.ts b/src/lib/ve-suggestions/veMethods.ts
similarity index 100%
rename from src/prototypes/example-ve-suggestions-playground/veMethods.ts
rename to src/lib/ve-suggestions/veMethods.ts
diff --git a/src/prototypes/example-ve-suggestions-playground/veSuggestionCards.ts b/src/lib/ve-suggestions/veSuggestionCards.ts
similarity index 93%
rename from src/prototypes/example-ve-suggestions-playground/veSuggestionCards.ts
rename to src/lib/ve-suggestions/veSuggestionCards.ts
index 9cc4a86..9edd27b 100644
--- a/src/prototypes/example-ve-suggestions-playground/veSuggestionCards.ts
+++ b/src/lib/ve-suggestions/veSuggestionCards.ts
@@ -2,6 +2,7 @@ import type { FakeWiki } from 'fakewiki'
 import type { FWVeSuggestionItem, FWVeSuggestionResponse } from 'fakewiki/types'
 
 import { formatSuggestionType, headingForSuggestionType } from './veDisplayHeadings'
+import { stripLinksFromSnippetHtml, stripLinksFromWikitext } from './snippetLinkStrip'
 import { normalizePageTitle } from './veSuggestionsCache'
 
 export interface SuggestionCardData {
@@ -217,6 +218,16 @@ function normalizeSnippetWikitext(snippet: string): string {
   return snippet.trim()
 }
 
+function formatContextualSnippetWikitext(
+  contextBefore: string,
+  coreText: string,
+  contextAfter: string,
+): string {
+  const boldCore =
+    coreText.startsWith("'''") && coreText.endsWith("'''") ? coreText : `'''${coreText}'''`
+  return normalizeSnippetWikitext(`…${contextBefore}${boldCore}${contextAfter}…`)
+}
+
 function getSnippetWikitext(context: DescriptionContext, suggestionType: string): string {
   if (SNIPPETLESS_SUGGESTION_TYPES.has(suggestionType)) {
     return ''
@@ -236,7 +247,7 @@ function getSnippetWikitext(context: DescriptionContext, suggestionType: string)
   const contextAfter = readContextField(suggestionData, candidateData, 'context_after')
 
   if (coreText && (contextBefore || contextAfter)) {
-    const snippet = normalizeSnippetWikitext(`${contextBefore}${coreText}${contextAfter}`)
+    const snippet = formatContextualSnippetWikitext(contextBefore, coreText, contextAfter)
     if (snippet) return snippet
   }
 
@@ -345,6 +356,20 @@ function resolveBestEffortCardLink(
   return baseUrl
 }
 
+export function editUrlForSuggestionCard(
+  wiki: FakeWiki,
+  pageTitle: string,
+  card: SuggestionCardData,
+): string {
+  const hashIndex = card.cardLinkUrl.indexOf('#')
+  if (hashIndex >= 0) {
+    const fragment = decodeURIComponent(card.cardLinkUrl.slice(hashIndex + 1))
+    const sectionTitle = fragment.replace(/_/g, ' ')
+    return wiki.getEditUrl(pageTitle, sectionTitle)
+  }
+  return wiki.getEditUrl(pageTitle)
+}
+
 function snippetCacheKey(pageTitle: string, snippet: string): string {
   return `${normalizePageTitle(pageTitle)}\0${snippet}`
 }
@@ -369,7 +394,7 @@ export function applySnippetHtmlFromCache(
   if (!card.rawSnippetWikitext) return card
   const cachedHtml = snippetHtmlByKey[snippetCacheKey(pageTitle, card.rawSnippetWikitext)]
   if (cachedHtml && cachedHtml !== card.rawSnippetWikitext) {
-    return { ...card, renderedSnippetHtml: cachedHtml }
+    return { ...card, renderedSnippetHtml: stripLinksFromSnippetHtml(cachedHtml) }
   }
   if (isTransformedSnippetHtml(card)) return card
   return { ...card, renderedSnippetHtml: '' }
@@ -393,11 +418,13 @@ async function renderSnippetHtml(
   if (!normalizedSnippet) return ''
   const key = snippetCacheKey(pageTitle, normalizedSnippet)
   const cached = snippetHtmlCache[key]
-  if (cached !== undefined) return cached
+  if (cached !== undefined) return stripLinksFromSnippetHtml(cached)
   try {
-    const html = await wiki.transformWikitextToHtml(normalizedSnippet, pageTitle)
-    snippetHtmlCache[key] = html
-    return html
+    const strippedSnippet = stripLinksFromWikitext(normalizedSnippet)
+    const html = await wiki.transformWikitextToHtml(strippedSnippet, pageTitle)
+    const strippedHtml = stripLinksFromSnippetHtml(html)
+    snippetHtmlCache[key] = strippedHtml
+    return strippedHtml
   } catch {
     return normalizedSnippet
   }
@@ -482,7 +509,9 @@ export function buildFallbackCard(
     snippetHtmlByKey[snippetCacheKey(pageTitle, rawSnippet)]
   : undefined
   const renderedSnippetHtml =
-    cachedHtml && cachedHtml !== rawSnippet ? cachedHtml : ''
+    cachedHtml && cachedHtml !== rawSnippet ?
+      stripLinksFromSnippetHtml(cachedHtml)
+    : ''
 
   return {
     cardId: `${methodName}-${suggestion.id}-${index}`,
diff --git a/src/lib/ve-suggestions/veSuggestionDifficulty.ts b/src/lib/ve-suggestions/veSuggestionDifficulty.ts
new file mode 100644
index 0000000..e1e2b8c
--- /dev/null
+++ b/src/lib/ve-suggestions/veSuggestionDifficulty.ts
@@ -0,0 +1,30 @@
+/** FakeMediaWiki VeSuggestions change-size judgements (by suggestion type). */
+export type SuggestionChangeSize = 'easy' | 'medium' | 'hard'
+
+export const CHANGE_SIZE_BY_SUGGESTION_TYPE: Record<string, SuggestionChangeSize> = {
+  addReference: 'medium',
+  citationNeeded: 'medium',
+  convertReference: 'easy',
+  disambiguation: 'easy',
+  doubleBold: 'easy',
+  duplicateLink: 'easy',
+  externalLink: 'easy',
+  fakeHeading: 'easy',
+  imageCaption: 'medium',
+  redirect: 'easy',
+  requiredTemplateParam: 'medium',
+  suggestedLink: 'easy',
+  textMatch: 'hard',
+  tone: 'hard',
+  yearLink: 'easy',
+}
+
+export const CHANGE_SIZE_COLORS: Record<SuggestionChangeSize, string> = {
+  easy: '#14866d',
+  medium: '#ac6600',
+  hard: '#b32424',
+}
+
+export function changeSizeForSuggestionType(suggestionType: string): SuggestionChangeSize {
+  return CHANGE_SIZE_BY_SUGGESTION_TYPE[suggestionType] ?? 'medium'
+}
diff --git a/src/prototypes/example-ve-suggestions-playground/veSuggestionsCache.ts b/src/lib/ve-suggestions/veSuggestionsCache.ts
similarity index 100%
rename from src/prototypes/example-ve-suggestions-playground/veSuggestionsCache.ts
rename to src/lib/ve-suggestions/veSuggestionsCache.ts
diff --git a/src/prototypes/example-ve-suggestions-playground/SuggestionCard.vue b/src/prototypes/example-ve-suggestions-playground/SuggestionCard.vue
index c0053e9..057b094 100644
--- a/src/prototypes/example-ve-suggestions-playground/SuggestionCard.vue
+++ b/src/prototypes/example-ve-suggestions-playground/SuggestionCard.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue'
 
 import { CdxAccordion } from '@wikimedia/codex'
 
-import { shouldShowSnippet, type SuggestionCardData } from './veSuggestionCards'
+import { shouldShowSnippet, type SuggestionCardData } from '@/lib/ve-suggestions'
 
 const props = defineProps<{
   card: SuggestionCardData
diff --git a/src/prototypes/example-ve-suggestions-playground/useVeSuggestionsPlayground.ts b/src/prototypes/example-ve-suggestions-playground/useVeSuggestionsPlayground.ts
index 8e4cc2d..69d92b5 100644
--- a/src/prototypes/example-ve-suggestions-playground/useVeSuggestionsPlayground.ts
+++ b/src/prototypes/example-ve-suggestions-playground/useVeSuggestionsPlayground.ts
@@ -1,89 +1,27 @@
 import { computed, onMounted, ref } from 'vue'
 
-import { FakeWiki, FakeWikiHttpError } from 'fakewiki'
-
-import {
-  buildFallbackCard,
-  buildSectionRanges,
-  buildSectionTitleMap,
-  buildSuggestionCard,
-  hydrateCardsFromSnippetCache,
-  sortCards,
-  type SuggestionCardData,
-} from './veSuggestionCards'
-import { VE_METHOD_COUNT, VE_METHODS } from './veMethods'
 import {
+  createVeSuggestionsWiki,
   getCachedRun,
   loadUiState,
   normalizePageTitle,
+  runVeSuggestionsPipeline,
   saveUiState,
-  setCachedRun,
-  type CachedMethodResult,
+  VE_METHOD_COUNT,
   type CachedVeSuggestionsRun,
-} from './veSuggestionsCache'
+  type SuggestionCardData,
+} from '@/lib/ve-suggestions'
+import {
+  cardsFromCachedRun,
+  methodErrorsFromResults,
+} from '@/lib/ve-suggestions/runVeSuggestionsPipeline'
 
 export interface VeSuggestionsCacheMeta {
   fromCache: boolean
   fetchedAt?: number
 }
 
-const wiki = new FakeWiki(undefined, {
-  apiUserAgent:
-    'ProtoWiki/0.1 (https://github.com/wikimedia-research/protowiki) ve-suggestions-playground',
-})
-
-function wrapGetPageSource(prefetchedByTitle: Map<string, string>): () => void {
-  const original = wiki.getPageSource.bind(wiki)
-
-  wiki.getPageSource = async (pageName: string): Promise<string> => {
-    const key = normalizePageTitle(pageName)
-    const cached = prefetchedByTitle.get(key)
-    if (cached !== undefined) return cached
-    const source = await original(pageName)
-    prefetchedByTitle.set(key, source)
-    return source
-  }
-
-  return () => {
-    wiki.getPageSource = original
-  }
-}
-
-function cardsFromMethodResults(
-  pageTitle: string,
-  methodResults: Record<string, CachedMethodResult>,
-  snippetHtmlByKey: Record<string, string>,
-): SuggestionCardData[] {
-  const cards: SuggestionCardData[] = []
-
-  for (const method of VE_METHODS) {
-    const result = methodResults[method.methodName]
-    if (!result || result.ok === false) continue
-    const response = result.response
-    for (let index = 0; index < response.suggestions.length; index++) {
-      const suggestion = response.suggestions[index]
-      if (!suggestion) continue
-      cards.push(
-        buildFallbackCard(wiki, method.methodName, pageTitle, response, suggestion, index, snippetHtmlByKey),
-      )
-    }
-  }
-
-  return sortCards(cards)
-}
-
-function methodErrorsFromResults(
-  methodResults: Record<string, CachedMethodResult>,
-): Array<{ methodName: string; message: string }> {
-  const methodErrors: Array<{ methodName: string; message: string }> = []
-  for (const method of VE_METHODS) {
-    const result = methodResults[method.methodName]
-    if (result?.ok === false) {
-      methodErrors.push({ methodName: method.methodName, message: result.error })
-    }
-  }
-  return methodErrors
-}
+const wiki = createVeSuggestionsWiki('ve-suggestions-playground')
 
 export function useVeSuggestionsPlayground(): {
   pageTitle: ReturnType<typeof ref<string>>
@@ -122,11 +60,7 @@ export function useVeSuggestionsPlayground(): {
   )
 
   function applyCachedRun(run: CachedVeSuggestionsRun): void {
-    const snippetHtmlByKey = run.snippetHtmlByKey ?? {}
-    cards.value =
-      run.cards?.length ?
-        sortCards(hydrateCardsFromSnippetCache(run.cards, run.pageTitle, snippetHtmlByKey))
-      : cardsFromMethodResults(run.pageTitle, run.methodResults, snippetHtmlByKey)
+    cards.value = cardsFromCachedRun(wiki, run)
     methodErrors.value = methodErrorsFromResults(run.methodResults)
     progress.value = {
       completed: Object.keys(run.methodResults).length,
@@ -174,101 +108,33 @@ export function useVeSuggestionsPlayground(): {
     progress.value = { completed: 0, total: VE_METHOD_COUNT }
     cacheMeta.value = { fromCache: false }
 
-    const existingCache = getCachedRun(trimmed)
-    const run: CachedVeSuggestionsRun = {
-      fetchedAt: Date.now(),
-      pageTitle: trimmed,
-      pageSource: existingCache?.pageSource,
-      methodResults: forceRefresh ? {} : { ...(existingCache?.methodResults ?? {}) },
-      cards: [],
-      snippetHtmlByKey: forceRefresh ? {} : { ...(existingCache?.snippetHtmlByKey ?? {}) },
-    }
-
-    const pageSourceCache = new Map<string, string>()
-    if (run.pageSource) {
-      pageSourceCache.set(trimmed, run.pageSource)
-    }
-
-    let restoreGetPageSource = wrapGetPageSource(pageSourceCache)
-
     try {
-      if (!run.pageSource) {
-        try {
-          run.pageSource = await wiki.getPageSource(trimmed)
-          pageSourceCache.set(trimmed, run.pageSource)
-          setCachedRun(trimmed, { ...run })
-        } catch (caught) {
-          const message = caught instanceof Error ? caught.message : String(caught)
-          error.value = `Could not load page source: ${message}`
-          return
-        }
-      }
-
-      const sectionTitleMap = buildSectionTitleMap(run.pageSource)
-      const sectionRanges = buildSectionRanges(run.pageSource)
-      const snippetHtmlCache = run.snippetHtmlByKey ?? {}
-
-      let completed = 0
-      let abortedForRateLimit = false
-
-      for (const method of VE_METHODS) {
-        if (abortedForRateLimit) break
-
-        try {
-          const response = await method.run(wiki, trimmed)
-          run.methodResults[method.methodName] = { ok: true, response }
-
-          for (let index = 0; index < response.suggestions.length; index++) {
-            const suggestion = response.suggestions[index]
-            if (!suggestion) continue
-            const card = await buildSuggestionCard(
-              wiki,
-              method.methodName,
-              trimmed,
-              response,
-              suggestion,
-              index,
-              sectionTitleMap,
-              sectionRanges,
-              run.pageSource ?? '',
-              snippetHtmlCache,
-            )
-            run.cards = [...(run.cards ?? []), card]
-          }
-        } catch (caught) {
-          const message = caught instanceof Error ? caught.message : String(caught)
-          run.methodResults[method.methodName] = { ok: false, error: message }
-
-          if (caught instanceof FakeWikiHttpError && caught.status === 429) {
-            error.value = message
-            abortedForRateLimit = true
-          }
-        }
-
-        completed += 1
-        progress.value = { completed, total: VE_METHOD_COUNT }
-
-        run.fetchedAt = Date.now()
-        run.snippetHtmlByKey = snippetHtmlCache
-        run.cards = sortCards(run.cards ?? [])
-        setCachedRun(trimmed, {
-          ...run,
-          methodResults: { ...run.methodResults },
-          cards: [...(run.cards ?? [])],
-          snippetHtmlByKey: { ...snippetHtmlCache },
-        })
-
-        cards.value = sortCards(
-          hydrateCardsFromSnippetCache(run.cards ?? [], trimmed, snippetHtmlCache),
-        )
-        methodErrors.value = methodErrorsFromResults(run.methodResults)
+      const result = await runVeSuggestionsPipeline(wiki, trimmed, {
+        forceRefresh,
+        onProgress: (value) => {
+          progress.value = value
+        },
+      })
+
+      cards.value = result.cards
+      methodErrors.value = result.methodErrors
+      error.value = result.error
+
+      if (result.error && !result.cards.length) {
+        return
       }
 
       hasRun.value = true
-      loadedPageTitle.value = trimmed
-      cacheMeta.value = { fromCache: false, fetchedAt: run.fetchedAt }
+      loadedPageTitle.value = result.pageTitle
+      cacheMeta.value = {
+        fromCache: result.fromCache,
+        fetchedAt: result.fetchedAt,
+      }
+      progress.value = {
+        completed: VE_METHOD_COUNT,
+        total: VE_METHOD_COUNT,
+      }
     } finally {
-      restoreGetPageSource()
       loading.value = false
     }
   }
diff --git a/src/prototypes/template-homepage/SuggestionModeModule.vue b/src/prototypes/template-homepage/SuggestionModeModule.vue
new file mode 100644
index 0000000..9dbae86
--- /dev/null
+++ b/src/prototypes/template-homepage/SuggestionModeModule.vue
@@ -0,0 +1,451 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { CdxButton, CdxIcon } from '@wikimedia/codex'
+import { cdxIconImage, cdxIconReload, cdxIconRobot } from '@wikimedia/codex-icons'
+
+import DashboardModule from '@/components/DashboardModule.vue'
+import difficultyEasyIcon from '@/lib/ve-suggestions/assets/difficulty-easy.svg'
+import difficultyHardIcon from '@/lib/ve-suggestions/assets/difficulty-hard.svg'
+import difficultyMediumIcon from '@/lib/ve-suggestions/assets/difficulty-medium.svg'
+import { CHANGE_SIZE_COLORS } from '@/lib/ve-suggestions'
+
+interface Props {
+  articleTitle?: string
+  articleShortDescription?: string
+  thumbnailSrc?: string
+  taskTypeLabel?: string
+  snippetHtml?: string
+  loadPending?: boolean
+  showRefresh?: boolean
+  refreshing?: boolean
+  refreshError?: string | null
+  emptyMessage?: string | null
+  totalSuggestionCount?: number
+  taskDifficulty?: 'easy' | 'medium' | 'hard'
+  editHref?: string
+}
+
+const difficultyIcons = {
+  easy: difficultyEasyIcon,
+  medium: difficultyMediumIcon,
+  hard: difficultyHardIcon,
+} as const
+
+const props = withDefaults(defineProps<Props>(), {
+  articleTitle: undefined,
+  articleShortDescription: undefined,
+  thumbnailSrc: undefined,
+  taskTypeLabel: undefined,
+  snippetHtml: undefined,
+  loadPending: false,
+  showRefresh: false,
+  refreshing: false,
+  refreshError: undefined,
+  emptyMessage: undefined,
+  totalSuggestionCount: undefined,
+  taskDifficulty: undefined,
+  editHref: undefined,
+})
+
+const emit = defineEmits<{
+  load: []
+  refresh: []
+}>()
+
+const hasPreview = computed(
+  () =>
+    !props.loadPending &&
+    !!props.articleTitle &&
+    (!!props.taskTypeLabel || !!props.emptyMessage),
+)
+
+const showRefreshInTitle = computed(() => props.showRefresh && !props.loadPending)
+
+const showSuggestionCounter = computed(
+  () =>
+    hasPreview.value &&
+    props.totalSuggestionCount != null &&
+    props.totalSuggestionCount > 1,
+)
+
+const taskTypeColor = computed(() =>
+  props.taskDifficulty ? CHANGE_SIZE_COLORS[props.taskDifficulty] : '#14866d',
+)
+
+function onRefreshClick(event: Event): void {
+  event.preventDefault()
+  event.stopPropagation()
+  emit('refresh')
+}
+
+function onLoadClick(): void {
+  emit('load')
+}
+</script>
+
+<template>
+  <div class="suggestion-mode-module">
+    <DashboardModule
+      class="suggestion-mode-module__variant suggestion-mode-module__variant--mobile"
+      title="Suggested edits"
+      mobile-card
+      subtle
+    >
+      <template v-if="showRefreshInTitle" #header-actions>
+        <CdxButton
+          weight="quiet"
+          :icon-only="true"
+          aria-label="Refresh suggestions"
+          :disabled="refreshing"
+          @click="onRefreshClick"
+        >
+          <CdxIcon :icon="cdxIconReload" />
+        </CdxButton>
+      </template>
+
+      <p v-if="refreshError" class="suggestion-mode-module__error" role="alert">
+        {{ refreshError }}
+      </p>
+
+      <div v-if="loadPending" class="suggestion-mode-module__load-prompt">
+        <CdxButton
+          action="progressive"
+          weight="primary"
+          :disabled="refreshing"
+          @click="onLoadClick"
+        >
+          {{ refreshing ? 'Loading…' : 'Load' }}
+        </CdxButton>
+      </div>
+
+      <template v-else-if="emptyMessage">
+        <p class="suggestion-mode-module__empty">{{ emptyMessage }}</p>
+        <CdxButton
+          v-if="showRefresh"
+          weight="quiet"
+          :disabled="refreshing"
+          @click="onRefreshClick"
+        >
+          {{ refreshing ? 'Loading…' : 'Try another page' }}
+        </CdxButton>
+      </template>
+
+      <template v-else-if="hasPreview">
+        <p v-if="showSuggestionCounter" class="suggestion-mode-module__counter">
+          1 of {{ props.totalSuggestionCount }}
+        </p>
+
+        <component
+          :is="props.editHref ? 'a' : 'div'"
+          class="suggestion-mode-module__preview"
+          :class="{ 'suggestion-mode-module__preview--link': !!props.editHref }"
+          :href="props.editHref"
+          :target="props.editHref ? '_blank' : undefined"
+          :rel="props.editHref ? 'noreferrer noopener' : undefined"
+          :aria-label="props.editHref ? `Edit ${props.articleTitle}` : undefined"
+        >
+          <div class="suggestion-mode-module__preview-body">
+            <div
+              v-if="props.thumbnailSrc"
+              class="suggestion-mode-module__thumb-wrap"
+            >
+              <img
+                class="suggestion-mode-module__thumb"
+                :src="props.thumbnailSrc"
+                alt=""
+                width="72"
+                height="72"
+              />
+            </div>
+            <div
+              v-else
+              class="suggestion-mode-module__thumb-wrap suggestion-mode-module__thumb-wrap--placeholder"
+              aria-hidden="true"
+            >
+              <CdxIcon :icon="cdxIconImage" size="medium" />
+            </div>
+
+            <div class="suggestion-mode-module__preview-text">
+              <p class="suggestion-mode-module__article-title">{{ props.articleTitle }}</p>
+              <p
+                v-if="props.articleShortDescription"
+                class="suggestion-mode-module__article-description"
+              >
+                {{ props.articleShortDescription }}
+              </p>
+
+              <div
+                v-if="props.taskTypeLabel"
+                class="suggestion-mode-module__task-footer"
+                :style="{ color: taskTypeColor }"
+              >
+                <CdxIcon
+                  :icon="cdxIconRobot"
+                  size="small"
+                  class="suggestion-mode-module__task-footer-icon"
+                />
+                <img
+                  v-if="props.taskDifficulty"
+                  class="suggestion-mode-module__task-footer-icon suggestion-mode-module__task-footer-icon--difficulty"
+                  :src="difficultyIcons[props.taskDifficulty]"
+                  :alt="`${props.taskDifficulty} difficulty`"
+                  width="18"
+                  height="18"
+                />
+                <span class="suggestion-mode-module__task-type">{{ props.taskTypeLabel }}</span>
+              </div>
+            </div>
+          </div>
+
+          <div
+            v-if="props.snippetHtml"
+            class="suggestion-mode-module__snippet mw-parser-output"
+            v-html="props.snippetHtml"
+          />
+        </component>
+      </template>
+    </DashboardModule>
+
+    <DashboardModule
+      class="suggestion-mode-module__variant suggestion-mode-module__variant--desktop"
+      title="Suggested edits"
+    >
+      <p class="suggestion-mode-module__desktop-stub">desktop component not supported</p>
+    </DashboardModule>
+  </div>
+</template>
+
+<style scoped>
+.suggestion-mode-module__variant--mobile {
+  display: none;
+}
+
+.suggestion-mode-module__variant--desktop {
+  display: block;
+}
+
+[data-skin='mobile'] .suggestion-mode-module__variant--mobile {
+  display: block;
+}
+
+[data-skin='mobile'] .suggestion-mode-module__variant--desktop {
+  display: none;
+}
+
+.suggestion-mode-module__load-prompt {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 8rem;
+  padding: var(--spacing-100, 16px) 0;
+}
+
+.suggestion-mode-module__counter {
+  margin: 0 0 var(--spacing-75, 12px);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-base--subtle, #54595d);
+}
+
+.suggestion-mode-module__error {
+  margin: 0 0 var(--spacing-50, 8px);
+  font-size: var(--font-size-small);
+  color: var(--color-error, #bf3c2c);
+}
+
+.suggestion-mode-module__empty {
+  margin: 0 0 var(--spacing-75, 12px);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-base--subtle, #54595d);
+}
+
+.suggestion-mode-module__preview {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-50, 8px);
+  padding: var(--spacing-75, 12px);
+  background-color: var(--background-color-base, #fff);
+  border: 1px solid var(--border-color-subtle, #a2a9b1);
+  border-radius: 2px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+}
+
+.suggestion-mode-module__preview-body {
+  --suggestion-preview-thumb-size: 72px;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-75, 12px);
+  min-width: 0;
+  max-width: 100%;
+}
+
+.suggestion-mode-module__preview--link {
+  text-decoration: none;
+  color: inherit;
+  cursor: pointer;
+}
+
+.suggestion-mode-module__preview--link:hover,
+.suggestion-mode-module__preview--link:focus {
+  background-color: var(--background-color-interactive, #eaecf0);
+  outline: none;
+}
+
+.suggestion-mode-module__preview--link:focus-visible {
+  outline: 2px solid var(--color-progressive, #36c);
+  outline-offset: 2px;
+}
+
+.suggestion-mode-module__thumb-wrap {
+  flex-shrink: 0;
+  width: var(--suggestion-preview-thumb-size, 72px);
+  height: var(--suggestion-preview-thumb-size, 72px);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.suggestion-mode-module__thumb-wrap--placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--background-color-neutral-subtle, #f8f1e1);
+  color: var(--color-base--subtle, #72777d);
+}
+
+.suggestion-mode-module__thumb {
+  display: block;
+  width: var(--suggestion-preview-thumb-size, 72px);
+  height: var(--suggestion-preview-thumb-size, 72px);
+  object-fit: cover;
+}
+
+.suggestion-mode-module__preview-text {
+  flex: 1;
+  min-width: 0;
+  height: var(--suggestion-preview-thumb-size, 72px);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
+}
+
+.suggestion-mode-module__article-title {
+  margin: 0;
+  flex-shrink: 0;
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-medium);
+  line-height: 1.125;
+  color: var(--color-base, #202122);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.suggestion-mode-module__article-description {
+  margin: 0;
+  flex-shrink: 1;
+  min-height: 0;
+  font-size: var(--font-size-x-small);
+  line-height: 1.2;
+  color: var(--color-base--subtle, #54595d);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+}
+
+.suggestion-mode-module__task-footer {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-25, 4px);
+  align-self: flex-end;
+  flex-shrink: 0;
+  max-width: 100%;
+  font-size: var(--font-size-x-small);
+  line-height: 1;
+}
+
+.suggestion-mode-module__task-footer-icon {
+  flex-shrink: 0;
+  color: inherit;
+}
+
+.suggestion-mode-module__task-footer-icon--difficulty {
+  width: 18px;
+  height: 18px;
+}
+
+.suggestion-mode-module__task-type {
+  min-width: 0;
+  font-weight: var(--font-weight-normal);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.suggestion-mode-module__snippet {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  font-size: var(--font-size-small, 0.875rem);
+  line-height: var(--line-height-content, 1.57);
+  color: var(--color-subtle, #54595d);
+  padding: var(--spacing-50, 8px);
+  border: 1px solid var(--border-color-subtle, #c8ccd1);
+  border-radius: var(--border-radius-base, 2px);
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.suggestion-mode-module__snippet :deep(> *:first-child) {
+  margin-top: 0;
+}
+
+.suggestion-mode-module__snippet :deep(> *:last-child) {
+  margin-bottom: 0;
+}
+
+.suggestion-mode-module__snippet :deep(p),
+.suggestion-mode-module__snippet :deep(ul),
+.suggestion-mode-module__snippet :deep(ol) {
+  margin: 0;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.suggestion-mode-module__snippet :deep(b),
+.suggestion-mode-module__snippet :deep(strong) {
+  font-weight: var(--font-weight-bold);
+}
+
+.suggestion-mode-module__snippet.mw-parser-output :deep(ul),
+.suggestion-mode-module__snippet.mw-parser-output :deep(ol) {
+  padding-inline-start: 1.25em;
+}
+
+.suggestion-mode-module__snippet :deep(p + p),
+.suggestion-mode-module__snippet :deep(p + ul),
+.suggestion-mode-module__snippet :deep(p + ol),
+.suggestion-mode-module__snippet :deep(ul + p),
+.suggestion-mode-module__snippet :deep(ol + p),
+.suggestion-mode-module__snippet :deep(ul + ul),
+.suggestion-mode-module__snippet :deep(ol + ol) {
+  margin-top: var(--spacing-50, 8px);
+}
+
+.suggestion-mode-module__desktop-stub {
+  margin: 0;
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-base--subtle, #54595d);
+}
+</style>
diff --git a/src/prototypes/template-homepage/index.vue b/src/prototypes/template-homepage/index.vue
index eddbb38..45f5301 100644
--- a/src/prototypes/template-homepage/index.vue
+++ b/src/prototypes/template-homepage/index.vue
@@ -5,12 +5,14 @@ import { RouterLink } from 'vue-router'
 import DashpageChromeWrapper from './DashpageChromeWrapper.vue'
 import Dashboard from '@/components/Dashboard.vue'
 import DashboardModule from '@/components/DashboardModule.vue'
+import MobileWrapper from '@/components/MobileWrapper.vue'
 import SpecialPageWrapper from '@/components/SpecialPageWrapper.vue'
 import { useConfig } from '@/composables/useConfig'
 import HelpModule from './HelpModule.vue'
 import ImpactModule from './ImpactModule.vue'
 import MentorModule from './MentorModule.vue'
 import StructuredTasksModule from './StructuredTasksModule.vue'
+import SuggestionModeModule from './SuggestionModeModule.vue'
 import {
   APP_HOME,
   HELP_LINKS,
@@ -20,10 +22,21 @@ import {
   MENTOR_PAGE,
   STRUCTURED_TASKS,
 } from './dashpage-fixtures'
+import { useDashpageSettings } from './useDashpageSettings'
+import { useDashpageSuggestionModule } from './useDashpageSuggestionModule'
 import { useHomepageImpact } from './useHomepageImpact'
 
 const { user, pageTitle } = useConfig()
+const { editSuggestionSource } = useDashpageSettings()
 const { impactMobileProps, impactDesktopProps, onImpactRefresh } = useHomepageImpact()
+const {
+  moduleProps: suggestionModuleProps,
+  onSuggestionLoad,
+  onSuggestionRefresh,
+} = useDashpageSuggestionModule()
+
+const showStructuredTasks = computed(() => editSuggestionSource.value === 'structured-tasks')
+const showSuggestionMode = computed(() => editSuggestionSource.value === 'suggestion-mode')
 
 const showLoggedInModules = computed(() => user.value !== 'logged-out')
 
@@ -36,8 +49,9 @@ definePage({
 </script>
 
 <template>
-  <DashpageChromeWrapper :last-edited-notice="false">
-    <SpecialPageWrapper :title="pageTitle" help>
+  <MobileWrapper>
+    <DashpageChromeWrapper skin="mobile" :last-edited-notice="false">
+      <SpecialPageWrapper :title="pageTitle" help>
       <div class="prototype-dashpage-shell">
         <Dashboard>
           <template #banner>
@@ -48,10 +62,18 @@ definePage({
 
           <template #mobile>
             <StructuredTasksModule
+              v-if="showStructuredTasks"
               class="dashboard-slot--mobile-primary"
               :to="APP_HOME"
               v-bind="STRUCTURED_TASKS"
             />
+            <SuggestionModeModule
+              v-else-if="showSuggestionMode"
+              class="dashboard-slot--mobile-primary"
+              v-bind="suggestionModuleProps"
+              @load="onSuggestionLoad"
+              @refresh="onSuggestionRefresh"
+            />
 
             <ImpactModule
               v-if="showLoggedInModules"
@@ -76,10 +98,18 @@ definePage({
 
           <template #primary>
             <StructuredTasksModule
+              v-if="showStructuredTasks"
               class="dashboard-slot--desktop-primary"
               :to="APP_HOME"
               v-bind="STRUCTURED_TASKS"
             />
+            <SuggestionModeModule
+              v-else-if="showSuggestionMode"
+              class="dashboard-slot--desktop-primary"
+              v-bind="suggestionModuleProps"
+              @load="onSuggestionLoad"
+              @refresh="onSuggestionRefresh"
+            />
           </template>
 
           <template #sidebar>
@@ -103,8 +133,9 @@ definePage({
           </template>
         </Dashboard>
       </div>
-    </SpecialPageWrapper>
-  </DashpageChromeWrapper>
+      </SpecialPageWrapper>
+    </DashpageChromeWrapper>
+  </MobileWrapper>
 </template>
 
 <style scoped>
@@ -116,6 +147,7 @@ definePage({
 
 :deep(.dashboard-slot--mobile-primary .dashboard-module__body) {
   min-height: 3rem;
+  min-width: 0;
 }
 
 :deep(.dashboard-slot--desktop-primary .dashboard-module) {
diff --git a/src/prototypes/template-homepage/useDashpageSuggestionModule.ts b/src/prototypes/template-homepage/useDashpageSuggestionModule.ts
new file mode 100644
index 0000000..90ff1bd
--- /dev/null
+++ b/src/prototypes/template-homepage/useDashpageSuggestionModule.ts
@@ -0,0 +1,260 @@
+import { computed, ref, watch, type ComputedRef } from 'vue'
+
+import { useConfig } from '@/composables/useConfig'
+import {
+  dashpageSuggestionUserKey,
+  getDashpageSuggestionModuleCache,
+  resolvePortfolioPage,
+  setDashpageSuggestionModuleCache,
+} from '@/lib/dashpageSuggestionCache'
+import { getPortfolioCache, setPortfolioCache } from '@/lib/dashpagePortfolioCache'
+import {
+  FetchUserEditedPageTitlesError,
+  fetchPagePreviewMetadata,
+  fetchUserEditedPageTitles,
+} from '@/lib/fetchUserEditedPageTitles'
+import {
+  cardsFromCachedRun,
+  createVeSuggestionsWiki,
+  changeSizeForSuggestionType,
+  editUrlForSuggestionCard,
+  getCachedRun,
+  pickRandomSuggestion,
+  runVeSuggestionsPipeline,
+  shouldShowSnippet,
+  type SuggestionCardData,
+} from '@/lib/ve-suggestions'
+
+const wiki = createVeSuggestionsWiki('dashpage-suggestion-mode')
+
+const DASHPAGE_EXCLUDED_SUGGESTION_TYPES = new Set(['redirect'])
+
+function filterDashpageSuggestions(cards: SuggestionCardData[]): SuggestionCardData[] {
+  return cards.filter((card) => !DASHPAGE_EXCLUDED_SUGGESTION_TYPES.has(card.suggestionType))
+}
+
+export interface SuggestionModeModuleBind {
+  articleTitle?: string
+  articleShortDescription?: string
+  thumbnailSrc?: string
+  taskTypeLabel?: string
+  snippetHtml?: string
+  loadPending?: boolean
+  showRefresh?: boolean
+  refreshing?: boolean
+  refreshError?: string | null
+  emptyMessage?: string | null
+  totalSuggestionCount?: number
+  taskDifficulty?: 'easy' | 'medium' | 'hard'
+  editHref?: string
+}
+
+function previewFromCards(
+  pageTitle: string,
+  cards: SuggestionCardData[],
+  pagePreview: { thumbnailSrc?: string; shortDescription?: string } = {},
+): SuggestionModeModuleBind {
+  const eligibleCards = filterDashpageSuggestions(cards)
+  const totalSuggestionCount = eligibleCards.length
+  const selectedCard = pickRandomSuggestion(eligibleCards)
+
+  if (!selectedCard) {
+    return {
+      articleTitle: pageTitle,
+      emptyMessage: `No suggestions for ${pageTitle}.`,
+      showRefresh: true,
+    }
+  }
+
+  return {
+    articleTitle: pageTitle,
+    articleShortDescription: pagePreview.shortDescription,
+    thumbnailSrc: pagePreview.thumbnailSrc,
+    taskTypeLabel: selectedCard.heading,
+    taskDifficulty: changeSizeForSuggestionType(selectedCard.suggestionType),
+    snippetHtml: shouldShowSnippet(selectedCard) ? selectedCard.renderedSnippetHtml : undefined,
+    editHref: editUrlForSuggestionCard(wiki, pageTitle, selectedCard),
+    showRefresh: true,
+    totalSuggestionCount,
+  }
+}
+
+function previewForCachedPage(
+  pageTitle: string,
+  pagePreview: { thumbnailSrc?: string; shortDescription?: string } = {},
+): SuggestionModeModuleBind {
+  const veRun = getCachedRun(pageTitle)
+  if (!veRun) {
+    return {
+      articleTitle: pageTitle,
+      emptyMessage: `No suggestions for ${pageTitle}.`,
+      showRefresh: true,
+    }
+  }
+
+  return previewFromCards(pageTitle, cardsFromCachedRun(wiki, veRun), pagePreview)
+}
+
+export function useDashpageSuggestionModule(): {
+  moduleProps: ComputedRef<SuggestionModeModuleBind>
+  onSuggestionLoad: () => void
+  onSuggestionRefresh: () => void
+} {
+  const { user, realUsername, currentUserPageLists } = useConfig()
+
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+  const hasCache = ref(false)
+  const lastFetchedAt = ref<number | null>(null)
+  const selectedPageTitle = ref<string | null>(null)
+  const preview = ref<SuggestionModeModuleBind>({})
+  const cachedRealTitles = ref<string[]>([])
+
+  let abortController: AbortController | null = null
+
+  function loadFromModuleCache(userKey: string): void {
+    const cached = getDashpageSuggestionModuleCache(userKey)
+    if (!cached) {
+      hasCache.value = false
+      lastFetchedAt.value = null
+      selectedPageTitle.value = null
+      preview.value = {}
+      return
+    }
+
+    hasCache.value = true
+    lastFetchedAt.value = cached.fetchedAt
+    selectedPageTitle.value = cached.selectedPageTitle
+    preview.value = previewForCachedPage(cached.selectedPageTitle, {
+      thumbnailSrc: cached.thumbnailSrc,
+      shortDescription: cached.shortDescription,
+    })
+    error.value = null
+  }
+
+  function loadRealPortfolioFromCache(): void {
+    if (user.value !== 'real') {
+      cachedRealTitles.value = []
+      return
+    }
+
+    const portfolio = getPortfolioCache(realUsername.value)
+    cachedRealTitles.value = portfolio?.titles ?? []
+  }
+
+  watch(
+    [user, realUsername],
+    ([activeUser, username]) => {
+      error.value = null
+      loadRealPortfolioFromCache()
+      loadFromModuleCache(dashpageSuggestionUserKey(activeUser, username))
+    },
+    { immediate: true },
+  )
+
+  async function runPipeline(forceRefresh: boolean): Promise<void> {
+    abortController?.abort()
+    abortController = new AbortController()
+    const { signal } = abortController
+
+    loading.value = true
+    error.value = null
+
+    const userKey = dashpageSuggestionUserKey(user.value, realUsername.value)
+
+    try {
+      if (user.value === 'real') {
+        let portfolio = getPortfolioCache(realUsername.value)
+        if (!portfolio) {
+          const titles = await fetchUserEditedPageTitles(realUsername.value, { signal })
+          portfolio = setPortfolioCache(realUsername.value, titles)
+        }
+        cachedRealTitles.value = portfolio.titles
+      }
+
+      const exclude = forceRefresh ? selectedPageTitle.value ?? undefined : undefined
+      const pageTitle = resolvePortfolioPage(
+        user.value,
+        currentUserPageLists.value,
+        cachedRealTitles.value,
+        exclude,
+      )
+
+      const pipelineResult = await runVeSuggestionsPipeline(wiki, pageTitle, {
+        forceRefresh,
+      })
+
+      if (pipelineResult.error && !pipelineResult.cards.length) {
+        error.value = pipelineResult.error
+        return
+      }
+
+      if (pipelineResult.error) {
+        error.value = pipelineResult.error
+      }
+
+      let pagePreview: { thumbnailSrc?: string; shortDescription?: string } = {}
+      if (filterDashpageSuggestions(pipelineResult.cards).length) {
+        pagePreview = await fetchPagePreviewMetadata(pageTitle, { signal })
+      }
+
+      const moduleCache = {
+        fetchedAt: Date.now(),
+        selectedPageTitle: pageTitle,
+        thumbnailSrc: pagePreview.thumbnailSrc,
+        shortDescription: pagePreview.shortDescription,
+      }
+
+      setDashpageSuggestionModuleCache(userKey, moduleCache)
+
+      hasCache.value = true
+      lastFetchedAt.value = moduleCache.fetchedAt
+      selectedPageTitle.value = pageTitle
+      preview.value = previewFromCards(pageTitle, pipelineResult.cards, pagePreview)
+    } catch (caught) {
+      if (caught instanceof FetchUserEditedPageTitlesError && caught.code === 'aborted') {
+        return
+      }
+      const message =
+        caught instanceof FetchUserEditedPageTitlesError
+          ? caught.message
+          : caught instanceof Error
+            ? caught.message
+            : String(caught)
+      error.value = message
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const moduleProps = computed((): SuggestionModeModuleBind => {
+    if (!hasCache.value) {
+      return {
+        loadPending: true,
+        refreshing: loading.value,
+        refreshError: error.value,
+      }
+    }
+
+    return {
+      ...preview.value,
+      showRefresh: true,
+      refreshing: loading.value,
+      refreshError: error.value,
+    }
+  })
+
+  function onSuggestionLoad(): void {
+    void runPipeline(false)
+  }
+
+  function onSuggestionRefresh(): void {
+    void runPipeline(true)
+  }
+
+  return {
+    moduleProps,
+    onSuggestionLoad,
+    onSuggestionRefresh,
+  }
+}

From cc01ff629e308e11501420610e4d536fca31850e Mon Sep 17 00:00:00 2001
From: Lu Wilson <lu@todepond.com>
Date: Thu, 21 May 2026 17:32:18 +0100
Subject: [PATCH 07/21] go

---
 src/components/DashboardModule.vue            |   2 +-
 src/lib/dashpageSuggestionCache.ts            |  76 ++-
 src/lib/fetchMorelikePageTitles.ts            | 100 ++++
 src/lib/fetchUserEditedPageTitles.ts          | 131 ++++-
 .../runVeSuggestionsPipeline.ts               |  24 +-
 src/lib/ve-suggestions/veSuggestionCards.ts   | 165 +++++-
 .../template-homepage/MobileSubpageHeader.vue |   4 +-
 .../template-homepage/SuggestedEditsView.vue  | 508 ++++++++++++++++++
 .../SuggestionModeModule.vue                  |  41 +-
 .../template-homepage/TaskFullscreenShell.vue |  67 +++
 .../template-homepage/dashpage-fixtures.ts    |  23 +
 src/prototypes/template-homepage/index.vue    |   7 +-
 .../suggested-edits/index.vue                 | 162 ++++++
 .../useDashpageSuggestionModule.ts            | 355 +++++++++---
 .../useHomepageSuggestedEdits.ts              |  12 +
 15 files changed, 1555 insertions(+), 122 deletions(-)
 create mode 100644 src/lib/fetchMorelikePageTitles.ts
 create mode 100644 src/prototypes/template-homepage/SuggestedEditsView.vue
 create mode 100644 src/prototypes/template-homepage/TaskFullscreenShell.vue
 create mode 100644 src/prototypes/template-homepage/suggested-edits/index.vue
 create mode 100644 src/prototypes/template-homepage/useHomepageSuggestedEdits.ts

diff --git a/src/components/DashboardModule.vue b/src/components/DashboardModule.vue
index 7d0ebe0..e639847 100644
--- a/src/components/DashboardModule.vue
+++ b/src/components/DashboardModule.vue
@@ -250,7 +250,7 @@ function trimmedTitle(): string {
   display: block;
   align-self: stretch;
   width: 100%;
-  margin-top: 0.25rem;
+  margin-top: var(--spacing-75, 12px);
   padding: 0.25rem 1rem;
   background-color: var(--background-color-progressive, #36c);
   color: var(--color-inverted, #fff);
diff --git a/src/lib/dashpageSuggestionCache.ts b/src/lib/dashpageSuggestionCache.ts
index 41d67a5..fcc2674 100644
--- a/src/lib/dashpageSuggestionCache.ts
+++ b/src/lib/dashpageSuggestionCache.ts
@@ -1,14 +1,25 @@
 import type { ConfigUser, UserPageLists } from '@/lib/config'
 import { normalizeWikiUsername } from '@/lib/config'
 
-const STORAGE_KEY = 'protowiki-dashpage-suggestion-module-v2'
+const STORAGE_KEY = 'protowiki-dashpage-suggestion-module-v4'
 export const DASHPAGE_SUGGESTION_FALLBACK_PAGE = 'Wet Leg'
+export const DASHPAGE_SUGGESTION_POOL_MAX = 6
+export const DASHPAGE_SUGGESTION_MORELIKE_MAX = 6
+/** Max combined suggestion queue length (pool + morelike successes). */
+export const DASHPAGE_SUGGESTION_MAX_PAGES =
+  DASHPAGE_SUGGESTION_POOL_MAX + DASHPAGE_SUGGESTION_MORELIKE_MAX
+export const DASHPAGE_MORELIKE_SEED_COUNT = 5
+
+export interface PagePreviewCache {
+  thumbnailSrc?: string
+  shortDescription?: string
+}
 
 export interface DashpageSuggestionModuleCache {
   fetchedAt: number
-  selectedPageTitle: string
-  thumbnailSrc?: string
-  shortDescription?: string
+  selectedPageTitles: string[]
+  pagePreviews: Record<string, PagePreviewCache>
+  currentIndex: number
 }
 
 type ModuleStore = Record<string, DashpageSuggestionModuleCache>
@@ -51,10 +62,20 @@ export function getDashpageSuggestionModuleCache(
   if (!userKey.length) return null
 
   const entry = readStore()[userKey]
-  if (!entry || typeof entry.fetchedAt !== 'number' || typeof entry.selectedPageTitle !== 'string') {
+  if (
+    !entry ||
+    typeof entry.fetchedAt !== 'number' ||
+    !Array.isArray(entry.selectedPageTitles) ||
+    typeof entry.currentIndex !== 'number'
+  ) {
     return null
   }
-  return entry
+  return {
+    fetchedAt: entry.fetchedAt,
+    selectedPageTitles: entry.selectedPageTitles,
+    pagePreviews: entry.pagePreviews ?? {},
+    currentIndex: entry.currentIndex,
+  }
 }
 
 export function setDashpageSuggestionModuleCache(
@@ -106,15 +127,48 @@ export function pickRandomPage(titles: string[], exclude?: string): string {
   return pool[index] ?? DASHPAGE_SUGGESTION_FALLBACK_PAGE
 }
 
-export function resolvePortfolioPage(
+/** Sample up to `max` distinct titles without replacement. */
+export function pickUpToRandomPages(
+  titles: string[],
+  max = DASHPAGE_SUGGESTION_POOL_MAX,
+  excludeTitles: string[] = [],
+): string[] {
+  const exclude = new Set(excludeTitles.filter(Boolean))
+  let pool = titles.filter((title) => !exclude.has(title))
+
+  if (!pool.length) {
+    pool = titles.length ? [...titles] : [DASHPAGE_SUGGESTION_FALLBACK_PAGE]
+  }
+
+  const count = Math.min(max, pool.length)
+  const shuffled = [...pool]
+  for (let i = shuffled.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1))
+    ;[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]
+  }
+
+  return shuffled.slice(0, count)
+}
+
+export function resolvePortfolioPages(
   user: ConfigUser,
   pageLists: UserPageLists,
   cachedRealTitles: string[],
-  exclude?: string,
-): string {
+  excludeTitles: string[] = [],
+): string[] {
   const portfolio = getPortfolioPagesForUser(user, pageLists, cachedRealTitles)
   if (!portfolio.length) {
-    return DASHPAGE_SUGGESTION_FALLBACK_PAGE
+    return [DASHPAGE_SUGGESTION_FALLBACK_PAGE]
   }
-  return pickRandomPage(portfolio, exclude)
+  return pickUpToRandomPages(portfolio, DASHPAGE_SUGGESTION_POOL_MAX, excludeTitles)
+}
+
+export function resolvePortfolioPage(
+  user: ConfigUser,
+  pageLists: UserPageLists,
+  cachedRealTitles: string[],
+  exclude?: string,
+): string {
+  const pages = resolvePortfolioPages(user, pageLists, cachedRealTitles, exclude ? [exclude] : [])
+  return pages[0] ?? DASHPAGE_SUGGESTION_FALLBACK_PAGE
 }
diff --git a/src/lib/fetchMorelikePageTitles.ts b/src/lib/fetchMorelikePageTitles.ts
new file mode 100644
index 0000000..8f7826a
--- /dev/null
+++ b/src/lib/fetchMorelikePageTitles.ts
@@ -0,0 +1,100 @@
+const WIKI_HOST = 'en.wikipedia.org'
+const API_USER_AGENT =
+  'ProtoWiki/0.1 (https://github.com/wikimedia-research/protowiki) dashpage-suggestion-mode'
+
+export class FetchMorelikePageTitlesError extends Error {
+  constructor(
+    message: string,
+    public readonly code: 'no_seeds' | 'aborted' | 'http',
+  ) {
+    super(message)
+    this.name = 'FetchMorelikePageTitlesError'
+  }
+}
+
+export interface FetchMorelikePageTitlesOptions {
+  limit?: number
+  excludeTitles?: string[]
+  signal?: AbortSignal
+}
+
+function normalizeTitleKey(title: string): string {
+  return title.trim().replace(/_/g, ' ').toLowerCase()
+}
+
+function assertNotAborted(signal?: AbortSignal): void {
+  if (signal?.aborted) {
+    throw new FetchMorelikePageTitlesError('Request aborted', 'aborted')
+  }
+}
+
+function actionUrl(params: Record<string, string>): string {
+  const search = new URLSearchParams({
+    ...params,
+    format: 'json',
+    origin: '*',
+  })
+  return `https://${WIKI_HOST}/w/api.php?${search.toString()}`
+}
+
+async function fetchJson(url: string, signal?: AbortSignal): Promise<unknown> {
+  assertNotAborted(signal)
+  const response = await fetch(url, {
+    signal,
+    headers: { 'Api-User-Agent': API_USER_AGENT },
+  })
+  if (!response.ok) {
+    throw new FetchMorelikePageTitlesError(`HTTP ${response.status}`, 'http')
+  }
+  return response.json()
+}
+
+/**
+ * Cirrus "more like this" via Action API `list=search` and `srsearch=morelike:…`.
+ */
+export async function fetchMorelikePageTitles(
+  seedTitles: string[],
+  options: FetchMorelikePageTitlesOptions = {},
+): Promise<string[]> {
+  const seeds = [...new Set(seedTitles.map((title) => title.trim()).filter(Boolean))]
+  if (!seeds.length) {
+    return []
+  }
+
+  const limit = Math.max(1, Math.min(options.limit ?? 6, 50))
+  const exclude = new Set((options.excludeTitles ?? []).map(normalizeTitleKey))
+  for (const seed of seeds) {
+    exclude.add(normalizeTitleKey(seed))
+  }
+
+  const data = (await fetchJson(
+    actionUrl({
+      action: 'query',
+      list: 'search',
+      srsearch: `morelike:${seeds.join('|')}`,
+      srwhat: 'text',
+      srnamespace: '0',
+      srlimit: String(limit),
+    }),
+    options.signal,
+  )) as {
+    query?: {
+      search?: Array<{ title?: string; ns?: number }>
+    }
+  }
+
+  const seen = new Set<string>()
+  const titles: string[] = []
+
+  for (const hit of data.query?.search ?? []) {
+    if (hit.ns !== undefined && hit.ns !== 0) continue
+    const title = typeof hit.title === 'string' ? hit.title.trim() : ''
+    if (!title.length) continue
+    const key = normalizeTitleKey(title)
+    if (seen.has(key) || exclude.has(key)) continue
+    seen.add(key)
+    titles.push(title)
+  }
+
+  return titles
+}
diff --git a/src/lib/fetchUserEditedPageTitles.ts b/src/lib/fetchUserEditedPageTitles.ts
index 36ea53c..a6d3bbf 100644
--- a/src/lib/fetchUserEditedPageTitles.ts
+++ b/src/lib/fetchUserEditedPageTitles.ts
@@ -100,12 +100,38 @@ export interface PagePreviewMetadata {
   shortDescription?: string
 }
 
-export async function fetchPagePreviewMetadata(
+function normalizePreviewLookupTitle(title: string): string {
+  return title.trim().replace(/_/g, ' ')
+}
+
+function previewFromQueryPage(page: {
+  title?: string
+  missing?: string
+  description?: string
+  thumbnail?: { source?: string }
+}): PagePreviewMetadata | null {
+  if (page.missing) return null
+  const title = typeof page.title === 'string' ? page.title.trim() : ''
+  if (!title.length) return null
+  return {
+    thumbnailSrc: page.thumbnail?.source,
+    shortDescription:
+      typeof page.description === 'string' && page.description.trim().length
+        ? page.description.trim()
+        : undefined,
+  }
+}
+
+/**
+ * Lead-image thumbnail from REST summary. Used when Action API `pageimages` has none
+ * (e.g. Gorillaz — infobox image exists but no page-level image is set).
+ */
+async function fetchRestSummaryThumbnail(
   pageTitle: string,
   options: FetchUserEditedPageTitlesOptions = {},
-): Promise<PagePreviewMetadata> {
+): Promise<string | undefined> {
   const trimmed = pageTitle.trim()
-  if (!trimmed.length) return {}
+  if (!trimmed.length) return undefined
 
   const slug = encodeURIComponent(trimmed.replace(/ /g, '_'))
 
@@ -115,19 +141,92 @@ export async function fetchPagePreviewMetadata(
       signal: options.signal,
       headers: { 'Api-User-Agent': API_USER_AGENT },
     })
-    if (!response.ok) return {}
-    const json = (await response.json()) as {
-      description?: string
-      thumbnail?: { source?: string }
-    }
-    return {
-      thumbnailSrc: json.thumbnail?.source,
-      shortDescription:
-        typeof json.description === 'string' && json.description.trim().length
-          ? json.description.trim()
-          : undefined,
-    }
+    if (!response.ok) return undefined
+    const json = (await response.json()) as { thumbnail?: { source?: string } }
+    return json.thumbnail?.source
   } catch {
-    return {}
+    return undefined
+  }
+}
+
+/** One Action API query for up to 50 titles (thumbnail + short description). */
+export async function fetchPagePreviewMetadataBatch(
+  pageTitles: string[],
+  options: FetchUserEditedPageTitlesOptions = {},
+): Promise<Record<string, PagePreviewMetadata>> {
+  const titles = [...new Set(pageTitles.map((title) => title.trim()).filter(Boolean))]
+  const out: Record<string, PagePreviewMetadata> = {}
+  if (!titles.length) return out
+
+  for (let offset = 0; offset < titles.length; offset += 50) {
+    const chunk = titles.slice(offset, offset + 50)
+    const requestedByNormalized = new Map(
+      chunk.map((title) => [normalizePreviewLookupTitle(title).toLowerCase(), title]),
+    )
+
+    try {
+      assertNotAborted(options.signal)
+      const data = (await fetchJson(
+        actionUrl({
+          action: 'query',
+          prop: 'pageimages|description',
+          piprop: 'thumbnail',
+          pithumbsize: '320',
+          titles: chunk.join('|'),
+        }),
+        options.signal,
+      )) as {
+        query?: {
+          pages?: Record<
+            string,
+            {
+              title?: string
+              missing?: string
+              description?: string
+              thumbnail?: { source?: string }
+            }
+          >
+        }
+      }
+
+      for (const page of Object.values(data.query?.pages ?? {})) {
+        const preview = previewFromQueryPage(page)
+        if (!preview || !page.title) continue
+
+        out[page.title] = preview
+
+        const requested =
+          requestedByNormalized.get(normalizePreviewLookupTitle(page.title).toLowerCase())
+        if (requested) {
+          out[requested] = preview
+        }
+      }
+    } catch {
+      // Best-effort batch; callers fall back to empty previews per title.
+    }
+  }
+
+  const needsThumbnail = titles.filter((title) => !(out[title]?.thumbnailSrc?.length))
+  if (needsThumbnail.length) {
+    await Promise.all(
+      needsThumbnail.map(async (title) => {
+        const thumbnailSrc = await fetchRestSummaryThumbnail(title, options)
+        if (!thumbnailSrc) return
+        out[title] = { ...out[title], thumbnailSrc }
+      }),
+    )
   }
+
+  return out
+}
+
+export async function fetchPagePreviewMetadata(
+  pageTitle: string,
+  options: FetchUserEditedPageTitlesOptions = {},
+): Promise<PagePreviewMetadata> {
+  const trimmed = pageTitle.trim()
+  if (!trimmed.length) return {}
+
+  const batch = await fetchPagePreviewMetadataBatch([trimmed], options)
+  return batch[trimmed] ?? Object.values(batch)[0] ?? {}
 }
diff --git a/src/lib/ve-suggestions/runVeSuggestionsPipeline.ts b/src/lib/ve-suggestions/runVeSuggestionsPipeline.ts
index 2aaea27..a4c0960 100644
--- a/src/lib/ve-suggestions/runVeSuggestionsPipeline.ts
+++ b/src/lib/ve-suggestions/runVeSuggestionsPipeline.ts
@@ -35,6 +35,10 @@ export interface VeSuggestionsPipelineResult {
 export interface RunVeSuggestionsPipelineOptions {
   forceRefresh?: boolean
   onProgress?: (progress: VeSuggestionsPipelineProgress) => void
+  /** Stop after collecting this many suggestions (skips remaining VE methods). */
+  maxSuggestions?: number
+  /** Suggestion types to ignore when counting toward `maxSuggestions`. */
+  excludeSuggestionTypes?: string[]
 }
 
 const DEFAULT_API_USER_AGENT =
@@ -186,18 +190,28 @@ export async function runVeSuggestionsPipeline(
     const sectionTitleMap = buildSectionTitleMap(run.pageSource)
     const sectionRanges = buildSectionRanges(run.pageSource)
     const snippetHtmlCache = run.snippetHtmlByKey ?? {}
+    const maxSuggestions = options.maxSuggestions
+    const excludedTypes = new Set(options.excludeSuggestionTypes ?? [])
+    const methods =
+      maxSuggestions != null && maxSuggestions > 0 ?
+        [...VE_METHODS].sort(() => Math.random() - 0.5)
+      : VE_METHODS
 
     let completed = 0
     let abortedForRateLimit = false
+    let eligibleSuggestionCount = 0
 
-    for (const method of VE_METHODS) {
+    for (const method of methods) {
       if (abortedForRateLimit) break
+      if (maxSuggestions != null && eligibleSuggestionCount >= maxSuggestions) break
 
       try {
         const response = await method.run(wiki, trimmed)
         run.methodResults[method.methodName] = { ok: true, response }
 
         for (let index = 0; index < response.suggestions.length; index++) {
+          if (maxSuggestions != null && eligibleSuggestionCount >= maxSuggestions) break
+
           const suggestion = response.suggestions[index]
           if (!suggestion) continue
           const card = await buildSuggestionCard(
@@ -212,7 +226,15 @@ export async function runVeSuggestionsPipeline(
             run.pageSource ?? '',
             snippetHtmlCache,
           )
+
+          if (excludedTypes.has(card.suggestionType)) continue
+
           run.cards = [...(run.cards ?? []), card]
+          eligibleSuggestionCount += 1
+
+          if (maxSuggestions != null && eligibleSuggestionCount >= maxSuggestions) {
+            break
+          }
         }
       } catch (caught) {
         const message = caught instanceof Error ? caught.message : String(caught)
diff --git a/src/lib/ve-suggestions/veSuggestionCards.ts b/src/lib/ve-suggestions/veSuggestionCards.ts
index 9edd27b..b0271c5 100644
--- a/src/lib/ve-suggestions/veSuggestionCards.ts
+++ b/src/lib/ve-suggestions/veSuggestionCards.ts
@@ -218,14 +218,143 @@ function normalizeSnippetWikitext(snippet: string): string {
   return snippet.trim()
 }
 
+const CITATION_MARKER_PATTERN =
+  /\{\{\s*citation\s+needed(?:\s*\|[^}]*)?\s*\}\}|\[citation needed\]/gi
+
+function stripSnippetDecorators(snippet: string): string {
+  return snippet
+    .replace(/^…+/g, '')
+    .replace(/…+$/g, '')
+    .replace(/'''/g, '')
+    .trim()
+}
+
+/** True when the snippet includes readable prose, not only a citation-needed marker. */
+function hasSubstantiveSnippetContent(snippet: string): boolean {
+  const trimmed = stripSnippetDecorators(normalizeSnippetWikitext(snippet))
+  if (!trimmed.length) return false
+  const withoutMarkers = trimmed.replace(CITATION_MARKER_PATTERN, '').trim()
+  if (!withoutMarkers.length) return false
+  return /[A-Za-z]{4,}/.test(withoutMarkers)
+}
+
+function getRequiredTemplateParamSnippetWikitext(context: DescriptionContext): string {
+  const suggestionData = context.suggestion.data as Record<string, unknown> | undefined
+  const candidateData = context.selectedCandidate?.data as Record<string, unknown> | undefined
+  const invocation =
+    typeof candidateData?.invocation === 'string' ? candidateData.invocation.trim() : ''
+  const coreText = context.selectedCandidate?.text?.trim() || invocation
+  const contextBefore = readContextField(suggestionData, candidateData, 'context_before')
+  const contextAfter = readContextField(suggestionData, candidateData, 'context_after')
+
+  if (coreText && (contextBefore.trim() || contextAfter.trim())) {
+    const snippet = formatContextualSnippetWikitext(contextBefore, coreText, contextAfter)
+    if (hasSubstantiveSnippetContent(snippet)) return snippet
+  }
+
+  const candidateContext = context.selectedCandidate?.context?.trim()
+  if (candidateContext && hasSubstantiveSnippetContent(candidateContext)) {
+    const templateTitle = getTemplateTitleSnippet(context)
+    if (templateTitle && stripSnippetDecorators(candidateContext) === templateTitle) {
+      return ''
+    }
+    return normalizeSnippetWikitext(candidateContext)
+  }
+
+  return ''
+}
+
+function isRequiredTemplateParamTitleOnlySnippet(rawSnippetWikitext: string): boolean {
+  const trimmed = stripSnippetDecorators(normalizeSnippetWikitext(rawSnippetWikitext))
+  if (!trimmed.length) return true
+  if (trimmed.includes('{{') || trimmed.startsWith('…')) return false
+  return true
+}
+
+function getCitationNeededSnippetWikitext(context: DescriptionContext): string {
+  const suggestionData = context.suggestion.data as Record<string, unknown> | undefined
+  const candidateData = context.selectedCandidate?.data as Record<string, unknown> | undefined
+  const coreText =
+    context.selectedCandidate?.text?.trim() ||
+    (typeof suggestionData?.link_text === 'string' ? suggestionData.link_text.trim() : '') ||
+    ''
+  const contextBefore = readContextField(suggestionData, candidateData, 'context_before')
+  const contextAfter = readContextField(suggestionData, candidateData, 'context_after')
+
+  if (coreText && (contextBefore.trim() || contextAfter.trim())) {
+    const snippet = formatContextualSnippetWikitext(contextBefore, coreText, contextAfter)
+    if (hasSubstantiveSnippetContent(snippet)) return snippet
+  }
+
+  const candidateContext = context.selectedCandidate?.context?.trim()
+  if (candidateContext && hasSubstantiveSnippetContent(candidateContext)) {
+    return normalizeSnippetWikitext(candidateContext)
+  }
+
+  return ''
+}
+
+function boldWikitext(text: string): string {
+  const core = text.trim()
+  if (!core) return ''
+  return core.startsWith("'''") && core.endsWith("'''") ? core : `'''${core}'''`
+}
+
 function formatContextualSnippetWikitext(
   contextBefore: string,
   coreText: string,
   contextAfter: string,
 ): string {
-  const boldCore =
-    coreText.startsWith("'''") && coreText.endsWith("'''") ? coreText : `'''${coreText}'''`
-  return normalizeSnippetWikitext(`…${contextBefore}${boldCore}${contextAfter}…`)
+  return normalizeSnippetWikitext(`…${contextBefore}${boldWikitext(coreText)}${contextAfter}…`)
+}
+
+function extractWikilinkDisplayLabel(raw: string): string {
+  const trimmed = raw.trim()
+  const match = trimmed.match(/^\[\[(?:[^\]|]*\|)?([^\]]+)\]\]$/)
+  if (match?.[1]) return match[1].trim()
+  return trimmed
+}
+
+function resolveDuplicateLinkCandidate(
+  candidates: FWVeSuggestionResponse['candidates'],
+  suggestion: FWVeSuggestionItem,
+): DescriptionContext['selectedCandidate'] {
+  const parsed = suggestion.id.match(/^duplicate-(\d+)-(.+)-(\d+)$/)
+  if (!parsed) return null
+
+  const unitIndex = Number(parsed[1])
+  const key = parsed[2]
+  const duplicateIndex = Number(parsed[3])
+  if (!Number.isFinite(unitIndex) || !Number.isFinite(duplicateIndex) || duplicateIndex < 1) {
+    return null
+  }
+
+  const matching = candidates
+    .filter((candidate) => {
+      const data = candidate.data as Record<string, unknown> | undefined
+      return data?.unitIndex === unitIndex && data?.key === key
+    })
+    .sort((a, b) => {
+      const positionA = Number((a.data as Record<string, unknown> | undefined)?.position ?? 0)
+      const positionB = Number((b.data as Record<string, unknown> | undefined)?.position ?? 0)
+      return positionA - positionB
+    })
+
+  return matching[duplicateIndex] ?? null
+}
+
+function resolveSelectedCandidate(
+  response: FWVeSuggestionResponse,
+  suggestion: FWVeSuggestionItem,
+): DescriptionContext['selectedCandidate'] {
+  const directMatch = response.candidates.find((candidate) => candidate.id === suggestion.id)
+  if (directMatch) return directMatch
+
+  if (response.suggestionType === 'duplicateLink') {
+    return resolveDuplicateLinkCandidate(response.candidates, suggestion)
+  }
+
+  return response.candidates[0] ?? null
 }
 
 function getSnippetWikitext(context: DescriptionContext, suggestionType: string): string {
@@ -234,7 +363,11 @@ function getSnippetWikitext(context: DescriptionContext, suggestionType: string)
   }
 
   if (suggestionType === 'requiredTemplateParam') {
-    return normalizeSnippetWikitext(getTemplateTitleSnippet(context) ?? '')
+    return getRequiredTemplateParamSnippetWikitext(context)
+  }
+
+  if (suggestionType === 'citationNeeded') {
+    return getCitationNeededSnippetWikitext(context)
   }
 
   const suggestionData = context.suggestion.data as Record<string, unknown> | undefined
@@ -251,6 +384,13 @@ function getSnippetWikitext(context: DescriptionContext, suggestionType: string)
     if (snippet) return snippet
   }
 
+  if (suggestionType === 'duplicateLink') {
+    const displayLabel =
+      (coreText ? extractWikilinkDisplayLabel(coreText) : '') ||
+      (typeof suggestionData?.target === 'string' ? suggestionData.target.trim() : '')
+    if (displayLabel) return normalizeSnippetWikitext(boldWikitext(displayLabel))
+  }
+
   const candidateContext = context.selectedCandidate?.context?.trim()
   if (candidateContext) return normalizeSnippetWikitext(candidateContext)
 
@@ -383,6 +523,13 @@ export function isTransformedSnippetHtml(card: SuggestionCardData): boolean {
 
 export function shouldShowSnippet(card: SuggestionCardData): boolean {
   if (SNIPPETLESS_SUGGESTION_TYPES.has(card.suggestionType)) return false
+  if (
+    card.suggestionType === 'requiredTemplateParam' &&
+    isRequiredTemplateParamTitleOnlySnippet(card.rawSnippetWikitext)
+  ) {
+    return false
+  }
+  if (!hasSubstantiveSnippetContent(card.rawSnippetWikitext)) return false
   return isTransformedSnippetHtml(card)
 }
 
@@ -442,10 +589,7 @@ export async function buildSuggestionCard(
   pageSource: string,
   snippetHtmlCache: Record<string, string>,
 ): Promise<SuggestionCardData> {
-  const selectedCandidate =
-    response.candidates.find((candidate) => candidate.id === suggestion.id) ??
-    response.candidates[0] ??
-    null
+  const selectedCandidate = resolveSelectedCandidate(response, suggestion)
   const display = DISPLAY_BY_TYPE[response.suggestionType] ?? {
     heading: headingForSuggestionType(response.suggestionType),
     description: () => 'Help explain where this information is coming from.',
@@ -495,10 +639,7 @@ export function buildFallbackCard(
   index: number,
   snippetHtmlByKey: Record<string, string> = {},
 ): SuggestionCardData {
-  const selectedCandidate =
-    response.candidates.find((candidate) => candidate.id === suggestion.id) ??
-    response.candidates[0] ??
-    null
+  const selectedCandidate = resolveSelectedCandidate(response, suggestion)
   const display = DISPLAY_BY_TYPE[response.suggestionType] ?? {
     heading: formatSuggestionType(response.suggestionType),
     description: () => 'Help explain where this information is coming from.',
diff --git a/src/prototypes/template-homepage/MobileSubpageHeader.vue b/src/prototypes/template-homepage/MobileSubpageHeader.vue
index 17f83d4..dc370a1 100644
--- a/src/prototypes/template-homepage/MobileSubpageHeader.vue
+++ b/src/prototypes/template-homepage/MobileSubpageHeader.vue
@@ -76,10 +76,10 @@ withDefaults(defineProps<Props>(), {
   flex: 1;
   min-width: 0;
   margin: 0;
+  margin-block: 0;
   padding: 0;
   overflow: hidden;
-  font-family:
-    var(--font-family-system-sans, system-ui, sans-serif), var(--font-family-base, sans-serif);
+  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);
diff --git a/src/prototypes/template-homepage/SuggestedEditsView.vue b/src/prototypes/template-homepage/SuggestedEditsView.vue
new file mode 100644
index 0000000..dfe1f7d
--- /dev/null
+++ b/src/prototypes/template-homepage/SuggestedEditsView.vue
@@ -0,0 +1,508 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { CdxButton, CdxIcon, CdxSelect } from '@wikimedia/codex'
+import {
+  cdxIconArrowNext,
+  cdxIconChart,
+  cdxIconEdit,
+  cdxIconImage,
+  cdxIconInfo,
+  cdxIconLayout,
+  cdxIconRobot,
+} from '@wikimedia/codex-icons'
+
+import difficultyEasyIcon from '@/lib/ve-suggestions/assets/difficulty-easy.svg'
+import difficultyHardIcon from '@/lib/ve-suggestions/assets/difficulty-hard.svg'
+import difficultyMediumIcon from '@/lib/ve-suggestions/assets/difficulty-medium.svg'
+import { CHANGE_SIZE_COLORS } from '@/lib/ve-suggestions'
+
+const difficultyIcons = {
+  easy: difficultyEasyIcon,
+  medium: difficultyMediumIcon,
+  hard: difficultyHardIcon,
+} as const
+
+interface Props {
+  showFilterBar?: boolean
+  topicFilter?: string
+  difficultyFilter?: string
+  currentIndex?: number
+  totalCount?: number
+  articleTitle?: string
+  articleShortDescription?: string
+  thumbnailSrc?: string
+  pageviewsLabel?: string
+  taskHeading?: string
+  taskTypeLabel?: string
+  taskTimeEstimate?: string
+  taskDescription?: string
+  showSnippet?: boolean
+  snippetHtml?: string
+  loadPending?: boolean
+  showRefresh?: boolean
+  refreshing?: boolean
+  refreshError?: string | null
+  emptyMessage?: string | null
+  canGoPrev?: boolean
+  canGoNext?: boolean
+  taskDifficulty?: 'easy' | 'medium' | 'hard'
+  editHref?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showFilterBar: false,
+  topicFilter: 'Music',
+  difficultyFilter: 'Easy, Medium, …',
+  currentIndex: 0,
+  totalCount: 1,
+  articleTitle: undefined,
+  articleShortDescription: undefined,
+  thumbnailSrc: undefined,
+  pageviewsLabel: undefined,
+  taskHeading: undefined,
+  taskTypeLabel: undefined,
+  taskTimeEstimate: undefined,
+  taskDescription: undefined,
+  showSnippet: false,
+  snippetHtml: undefined,
+  loadPending: false,
+  showRefresh: false,
+  refreshing: false,
+  refreshError: undefined,
+  emptyMessage: undefined,
+  canGoPrev: false,
+  canGoNext: false,
+  taskDifficulty: undefined,
+  editHref: undefined,
+})
+
+const emit = defineEmits<{
+  load: []
+  refresh: []
+  navigate: [delta: number]
+}>()
+
+const topicMenuItems = computed(() => [{ value: 'music', label: props.topicFilter }])
+const difficultyMenuItems = computed(() => [{ value: 'mixed', label: props.difficultyFilter }])
+
+const displayIndex = computed(() => (props.currentIndex ?? 0) + 1)
+
+const counterLabel = computed(() => {
+  const total = props.totalCount ?? 1
+  return `${displayIndex.value} of ${total.toLocaleString()} suggestions`
+})
+
+const taskTitle = computed(() => props.taskHeading ?? props.taskTypeLabel)
+
+const hasPreview = computed(
+  () => !props.loadPending && !!props.articleTitle && (!!taskTitle.value || !!props.emptyMessage),
+)
+
+const taskTypeColor = computed(() =>
+  props.taskDifficulty ? CHANGE_SIZE_COLORS[props.taskDifficulty] : '#14866d',
+)
+
+function onLoadClick(): void {
+  emit('load')
+}
+
+function onRefreshClick(): void {
+  emit('refresh')
+}
+
+function onNavigate(delta: number): void {
+  emit('navigate', delta)
+}
+</script>
+
+<template>
+  <div class="suggested-edits-view">
+    <div class="suggested-edits-view__scroll">
+      <div
+        v-if="showFilterBar"
+        class="suggested-edits-view__filters"
+        aria-label="Suggestion filters"
+      >
+        <div class="suggested-edits-view__filter">
+          <CdxIcon :icon="cdxIconLayout" size="small" class="suggested-edits-view__filter-icon" />
+          <CdxSelect
+            :selected="'music'"
+            :menu-items="topicMenuItems"
+            :default-label="topicFilter"
+            disabled
+          />
+        </div>
+        <div class="suggested-edits-view__filter">
+          <CdxIcon :icon="cdxIconChart" size="small" class="suggested-edits-view__filter-icon" />
+          <CdxSelect
+            :selected="'mixed'"
+            :menu-items="difficultyMenuItems"
+            :default-label="difficultyFilter"
+            disabled
+          />
+        </div>
+      </div>
+
+      <p v-if="refreshError" class="suggested-edits-view__error" role="alert">
+        {{ refreshError }}
+      </p>
+
+      <div v-if="loadPending" class="suggested-edits-view__load-prompt">
+        <CdxButton
+          action="progressive"
+          weight="primary"
+          :disabled="refreshing"
+          @click="onLoadClick"
+        >
+          {{ refreshing ? 'Loading…' : 'Load' }}
+        </CdxButton>
+      </div>
+
+      <template v-else-if="emptyMessage">
+        <p class="suggested-edits-view__empty">{{ emptyMessage }}</p>
+        <CdxButton v-if="showRefresh" weight="quiet" :disabled="refreshing" @click="onRefreshClick">
+          {{ refreshing ? 'Loading…' : 'Try another page' }}
+        </CdxButton>
+      </template>
+
+      <template v-else-if="hasPreview">
+        <p class="suggested-edits-view__counter">{{ counterLabel }}</p>
+
+        <article class="suggested-edits-view__card">
+          <div v-if="thumbnailSrc" class="suggested-edits-view__card-image-wrap">
+            <img class="suggested-edits-view__card-image" :src="thumbnailSrc" alt="" />
+          </div>
+          <div
+            v-else
+            class="suggested-edits-view__card-image-wrap suggested-edits-view__card-image-wrap--placeholder"
+            aria-hidden="true"
+          >
+            <CdxIcon :icon="cdxIconImage" size="medium" />
+          </div>
+
+          <div class="suggested-edits-view__card-body">
+            <p class="suggested-edits-view__article-title">{{ articleTitle }}</p>
+            <p v-if="articleShortDescription" class="suggested-edits-view__article-description">
+              {{ articleShortDescription }}
+            </p>
+            <p v-if="pageviewsLabel" class="suggested-edits-view__pageviews">
+              <CdxIcon :icon="cdxIconChart" size="small" />
+              {{ pageviewsLabel }}
+            </p>
+          </div>
+        </article>
+
+        <section v-if="taskTitle" class="suggested-edits-view__task">
+          <p class="suggested-edits-view__task-heading">
+            {{ taskTitle }}
+            <CdxIcon :icon="cdxIconInfo" size="small" class="suggested-edits-view__task-info" />
+          </p>
+
+          <div class="suggested-edits-view__task-meta" :style="{ color: taskTypeColor }">
+            <CdxIcon
+              :icon="cdxIconRobot"
+              size="small"
+              class="suggested-edits-view__task-meta-icon"
+            />
+            <img
+              v-if="taskDifficulty"
+              class="suggested-edits-view__task-meta-icon suggested-edits-view__task-meta-icon--difficulty"
+              :src="difficultyIcons[taskDifficulty]"
+              :alt="`${taskDifficulty} difficulty`"
+              width="18"
+              height="18"
+            />
+            <span v-if="taskTimeEstimate" class="suggested-edits-view__task-time">
+              {{ taskTimeEstimate }}
+            </span>
+          </div>
+
+          <p v-if="taskDescription" class="suggested-edits-view__task-description">
+            {{ taskDescription }}
+          </p>
+
+          <div
+            v-if="showSnippet && snippetHtml"
+            class="suggested-edits-view__snippet mw-parser-output"
+            v-html="snippetHtml"
+          />
+        </section>
+      </template>
+    </div>
+
+    <footer v-if="hasPreview && editHref" class="suggested-edits-view__footer">
+      <CdxButton
+        weight="quiet"
+        :icon-only="true"
+        aria-label="Previous suggestion"
+        :disabled="!canGoPrev || refreshing"
+        @click="onNavigate(-1)"
+      >
+        <CdxIcon :icon="cdxIconArrowNext" dir="rtl" />
+      </CdxButton>
+
+      <a
+        v-if="editHref"
+        class="suggested-edits-view__edit-link"
+        :href="editHref"
+        target="_blank"
+        rel="noreferrer noopener"
+        :aria-disabled="refreshing ? 'true' : undefined"
+        :tabindex="refreshing ? -1 : undefined"
+        @click="refreshing ? $event.preventDefault() : undefined"
+      >
+        <CdxButton
+          action="progressive"
+          weight="primary"
+          class="suggested-edits-view__edit-button"
+          :disabled="refreshing"
+          tabindex="-1"
+        >
+          <CdxIcon :icon="cdxIconEdit" />
+          Edit
+        </CdxButton>
+      </a>
+
+      <CdxButton
+        weight="quiet"
+        :icon-only="true"
+        aria-label="Next suggestion"
+        :disabled="!canGoNext || refreshing"
+        @click="onNavigate(1)"
+      >
+        <CdxIcon :icon="cdxIconArrowNext" />
+      </CdxButton>
+    </footer>
+  </div>
+</template>
+
+<style scoped>
+.suggested-edits-view {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.suggested-edits-view__scroll {
+  --suggested-edits-card-width: 17.5rem;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--spacing-100, 16px);
+  min-height: 0;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.suggested-edits-view__filters {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--spacing-50, 8px);
+  padding-bottom: var(--spacing-75, 12px);
+}
+
+.suggested-edits-view__filter {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-25, 4px);
+  min-width: 0;
+}
+
+.suggested-edits-view__filter-icon {
+  flex-shrink: 0;
+  color: var(--color-base--subtle, #54595d);
+}
+
+.suggested-edits-view__filter :deep(.cdx-select) {
+  flex: 1;
+  min-width: 0;
+}
+
+.suggested-edits-view__load-prompt {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  min-height: 40vh;
+}
+
+.suggested-edits-view__error {
+  margin: 0;
+  font-size: var(--font-size-small);
+  color: var(--color-error, #bf3c2c);
+}
+
+.suggested-edits-view__empty {
+  margin: 0;
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-base--subtle, #54595d);
+}
+
+.suggested-edits-view__counter {
+  margin: 0;
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-base--subtle, #54595d);
+  text-align: center;
+}
+
+.suggested-edits-view__card {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: var(--suggested-edits-card-width, 17.5rem);
+  margin-inline: auto;
+  background-color: var(--background-color-base, #fff);
+  border: 1px solid var(--border-color-subtle, #a2a9b1);
+  border-radius: var(--border-radius-base, 2px);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+}
+
+.suggested-edits-view__card-image-wrap {
+  width: 100%;
+  aspect-ratio: 5 / 4;
+  overflow: hidden;
+  background-color: var(--background-color-neutral-subtle, #f8f9fa);
+}
+
+.suggested-edits-view__card-image-wrap--placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-base--subtle, #72777d);
+}
+
+.suggested-edits-view__card-image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.suggested-edits-view__card-body {
+  padding: var(--spacing-75, 12px);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-25, 4px);
+}
+
+.suggested-edits-view__article-title {
+  margin: 0;
+  font-family: var(--font-family-system-sans, system-ui, sans-serif);
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-small);
+  color: var(--color-base, #202122);
+}
+
+.suggested-edits-view__article-description {
+  margin: 0;
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-base--subtle, #54595d);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
+
+.suggested-edits-view__pageviews {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-25, 4px);
+  margin: 0;
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-base--subtle, #54595d);
+}
+
+.suggested-edits-view__task {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: var(--suggested-edits-card-width, 17.5rem);
+  margin-inline: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-50, 8px);
+}
+
+.suggested-edits-view__task-heading {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-25, 4px);
+  margin: 0;
+  font-family: var(--font-family-system-sans, system-ui, sans-serif);
+  font-size: var(--font-size-medium);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-medium);
+  color: var(--color-base, #202122);
+}
+
+.suggested-edits-view__task-info {
+  color: var(--color-base--subtle, #54595d);
+}
+
+.suggested-edits-view__task-meta {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-25, 4px);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+}
+
+.suggested-edits-view__task-meta-icon {
+  flex-shrink: 0;
+  color: inherit;
+}
+
+.suggested-edits-view__task-meta-icon--difficulty {
+  width: 18px;
+  height: 18px;
+}
+
+.suggested-edits-view__task-time {
+  font-weight: var(--font-weight-normal);
+}
+
+.suggested-edits-view__task-description {
+  margin: 0;
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-base, #202122);
+}
+
+.suggested-edits-view__snippet {
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-content);
+  color: var(--color-subtle, #54595d);
+  padding: 0 var(--spacing-50, 8px);
+  border: 1px solid var(--border-color-subtle, #c8ccd1);
+  border-radius: var(--border-radius-base, 2px);
+}
+
+.suggested-edits-view__footer {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-100, 16px);
+  padding: var(--spacing-75, 12px) 0;
+  padding-bottom: max(var(--spacing-75, 12px), env(safe-area-inset-bottom, 0px));
+  background-color: var(--background-color-base, #fff);
+  border-top: 1px solid var(--border-color-base, #a2a9b1);
+}
+
+.suggested-edits-view__edit-link {
+  flex: 1;
+  max-width: 12rem;
+  margin-inline: auto;
+  text-decoration: none;
+}
+
+.suggested-edits-view__edit-button {
+  width: 100%;
+}
+</style>
diff --git a/src/prototypes/template-homepage/SuggestionModeModule.vue b/src/prototypes/template-homepage/SuggestionModeModule.vue
index 9dbae86..a4e694e 100644
--- a/src/prototypes/template-homepage/SuggestionModeModule.vue
+++ b/src/prototypes/template-homepage/SuggestionModeModule.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { RouterLink } from 'vue-router'
+import type { RouteLocationRaw } from 'vue-router'
 import { CdxButton, CdxIcon } from '@wikimedia/codex'
 import { cdxIconImage, cdxIconReload, cdxIconRobot } from '@wikimedia/codex-icons'
 
@@ -10,6 +12,7 @@ import difficultyMediumIcon from '@/lib/ve-suggestions/assets/difficulty-medium.
 import { CHANGE_SIZE_COLORS } from '@/lib/ve-suggestions'
 
 interface Props {
+  to?: RouteLocationRaw
   articleTitle?: string
   articleShortDescription?: string
   thumbnailSrc?: string
@@ -32,6 +35,7 @@ const difficultyIcons = {
 } as const
 
 const props = withDefaults(defineProps<Props>(), {
+  to: undefined,
   articleTitle: undefined,
   articleShortDescription: undefined,
   thumbnailSrc: undefined,
@@ -59,7 +63,14 @@ const hasPreview = computed(
     (!!props.taskTypeLabel || !!props.emptyMessage),
 )
 
-const showRefreshInTitle = computed(() => props.showRefresh && !props.loadPending)
+const isLinkCard = computed(() => props.to != null)
+
+/** Link card only when preview is shown — load/empty states need interactive controls. */
+const useLinkCard = computed(() => isLinkCard.value && hasPreview.value)
+
+const showRefreshInTitle = computed(
+  () => props.showRefresh && !props.loadPending && !useLinkCard.value,
+)
 
 const showSuggestionCounter = computed(
   () =>
@@ -88,7 +99,9 @@ function onLoadClick(): void {
     <DashboardModule
       class="suggestion-mode-module__variant suggestion-mode-module__variant--mobile"
       title="Suggested edits"
-      mobile-card
+      :to="useLinkCard ? to : undefined"
+      :cta="useLinkCard ? 'See all suggestions' : null"
+      :mobile-card="!useLinkCard"
       subtle
     >
       <template v-if="showRefreshInTitle" #header-actions>
@@ -112,10 +125,18 @@ function onLoadClick(): void {
           action="progressive"
           weight="primary"
           :disabled="refreshing"
-          @click="onLoadClick"
+          @click.stop="onLoadClick"
         >
           {{ refreshing ? 'Loading…' : 'Load' }}
         </CdxButton>
+        <RouterLink
+          v-if="isLinkCard"
+          :to="to!"
+          class="suggestion-mode-module__see-all"
+          @click.stop
+        >
+          See all suggestions
+        </RouterLink>
       </div>
 
       <template v-else-if="emptyMessage">
@@ -124,7 +145,7 @@ function onLoadClick(): void {
           v-if="showRefresh"
           weight="quiet"
           :disabled="refreshing"
-          @click="onRefreshClick"
+          @click.stop="onRefreshClick"
         >
           {{ refreshing ? 'Loading…' : 'Try another page' }}
         </CdxButton>
@@ -237,10 +258,22 @@ function onLoadClick(): void {
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  gap: var(--spacing-75, 12px);
   min-height: 8rem;
   padding: var(--spacing-100, 16px) 0;
 }
 
+.suggestion-mode-module__see-all {
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-progressive, #36c);
+  text-decoration: none;
+}
+
+.suggestion-mode-module__see-all:hover {
+  text-decoration: underline;
+}
+
 .suggestion-mode-module__counter {
   margin: 0 0 var(--spacing-75, 12px);
   font-size: var(--font-size-small);
diff --git a/src/prototypes/template-homepage/TaskFullscreenShell.vue b/src/prototypes/template-homepage/TaskFullscreenShell.vue
new file mode 100644
index 0000000..6299ba0
--- /dev/null
+++ b/src/prototypes/template-homepage/TaskFullscreenShell.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+
+import {
+  globalSkin,
+  globalTheme,
+  PROTOWIKI_CHROME_SKIN,
+  PROTOWIKI_CHROME_THEME,
+} from '@/lib/theming'
+import type { Skin, Theme } from '@/lib/theming'
+
+interface Props {
+  lang?: string
+  dir?: 'ltr' | 'rtl'
+  skin?: Skin
+  theme?: Theme
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  lang: undefined,
+  dir: undefined,
+  skin: undefined,
+  theme: undefined,
+})
+
+const effectiveSkin = computed<Skin>(() => props.skin ?? globalSkin.value)
+const effectiveTheme = computed<Theme>(() => props.theme ?? globalTheme.value)
+
+provide(PROTOWIKI_CHROME_SKIN, effectiveSkin)
+provide(PROTOWIKI_CHROME_THEME, effectiveTheme)
+</script>
+
+<template>
+  <div
+    class="task-fullscreen-shell"
+    :data-skin="effectiveSkin"
+    :data-theme="effectiveTheme"
+    :lang="props.lang"
+    :dir="props.dir"
+  >
+    <div class="task-fullscreen-shell__inner">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.task-fullscreen-shell {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100dvh;
+  max-height: 100dvh;
+  overflow: hidden;
+  background-color: var(--background-color-base, #fff);
+  color: var(--color-base, #202122);
+}
+
+.task-fullscreen-shell__inner {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+</style>
diff --git a/src/prototypes/template-homepage/dashpage-fixtures.ts b/src/prototypes/template-homepage/dashpage-fixtures.ts
index 49b2482..9dcbcc8 100644
--- a/src/prototypes/template-homepage/dashpage-fixtures.ts
+++ b/src/prototypes/template-homepage/dashpage-fixtures.ts
@@ -15,6 +15,9 @@ export const HELP_PAGE = '/template-homepage/help'
 /** Full-page mobile drill-down for the Your mentor module. */
 export const MENTOR_PAGE = '/template-homepage/mentor'
 
+/** Full-page mobile drill-down for the Suggested edits module. */
+export const SUGGESTED_EDITS_PAGE = '/template-homepage/suggested-edits'
+
 /** Mobile link-card preview copy (title is also the full-page header). */
 export const HELP_MODULE = {
   title: 'Get help with editing',
@@ -102,6 +105,7 @@ export const IMPACT_DESKTOP: {
   viewAllEditsHref: '#',
 }
 
+/** Homepage link-card preview (compact). */
 export const STRUCTURED_TASKS = {
   currentIndex: 1,
   totalCount: 173745,
@@ -112,3 +116,22 @@ export const STRUCTURED_TASKS = {
     'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/St_Botolph%27s_Bell_Ringing.webm/120px--St_Botolph%27s_Bell_Ringing.webm.jpg',
   taskTypeLabel: 'Find references',
 } as const
+
+/** Fullscreen suggested-edits subpage (static structured-tasks mock). */
+export const STRUCTURED_TASKS_FULL = {
+  currentIndex: 1,
+  totalCount: 173450,
+  topicFilter: 'Music',
+  difficultyFilter: 'Easy, Medium, …',
+  articleTitle: 'Okta Logue',
+  articleDescription:
+    'Okta Logue are a four-piece rock band based in Griesheim, Hessen Germany. The members consist o',
+  thumbnailSrc:
+    'https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Okta_Logue_Moltow_HH_2019.jpg/640px-Okta_Logue_Moltow_HH_2019.jpg',
+  pageviewsLabel: '258 visits (past 60 days)',
+  taskHeading: 'Add links between articles',
+  taskDifficulty: 'easy' as const,
+  taskTimeEstimate: '3–5 minutes',
+  taskDescription: 'Make words from one article link to another article.',
+  editHref: '#',
+} as const
diff --git a/src/prototypes/template-homepage/index.vue b/src/prototypes/template-homepage/index.vue
index 45f5301..1152bb5 100644
--- a/src/prototypes/template-homepage/index.vue
+++ b/src/prototypes/template-homepage/index.vue
@@ -14,7 +14,6 @@ import MentorModule from './MentorModule.vue'
 import StructuredTasksModule from './StructuredTasksModule.vue'
 import SuggestionModeModule from './SuggestionModeModule.vue'
 import {
-  APP_HOME,
   HELP_LINKS,
   HELP_MODULE,
   HELP_PAGE,
@@ -25,10 +24,12 @@ import {
 import { useDashpageSettings } from './useDashpageSettings'
 import { useDashpageSuggestionModule } from './useDashpageSuggestionModule'
 import { useHomepageImpact } from './useHomepageImpact'
+import { useHomepageSuggestedEdits } from './useHomepageSuggestedEdits'
 
 const { user, pageTitle } = useConfig()
 const { editSuggestionSource } = useDashpageSettings()
 const { impactMobileProps, impactDesktopProps, onImpactRefresh } = useHomepageImpact()
+const { suggestedEditsLinkTo } = useHomepageSuggestedEdits()
 const {
   moduleProps: suggestionModuleProps,
   onSuggestionLoad,
@@ -64,12 +65,13 @@ definePage({
             <StructuredTasksModule
               v-if="showStructuredTasks"
               class="dashboard-slot--mobile-primary"
-              :to="APP_HOME"
+              :to="suggestedEditsLinkTo"
               v-bind="STRUCTURED_TASKS"
             />
             <SuggestionModeModule
               v-else-if="showSuggestionMode"
               class="dashboard-slot--mobile-primary"
+              :to="suggestedEditsLinkTo"
               v-bind="suggestionModuleProps"
               @load="onSuggestionLoad"
               @refresh="onSuggestionRefresh"
@@ -100,7 +102,6 @@ definePage({
             <StructuredTasksModule
               v-if="showStructuredTasks"
               class="dashboard-slot--desktop-primary"
-              :to="APP_HOME"
               v-bind="STRUCTURED_TASKS"
             />
             <SuggestionModeModule
diff --git a/src/prototypes/template-homepage/suggested-edits/index.vue b/src/prototypes/template-homepage/suggested-edits/index.vue
new file mode 100644
index 0000000..dc438f3
--- /dev/null
+++ b/src/prototypes/template-homepage/suggested-edits/index.vue
@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { CdxButton, CdxIcon } from '@wikimedia/codex'
+import { cdxIconReload } from '@wikimedia/codex-icons'
+
+import TaskFullscreenShell from '../TaskFullscreenShell.vue'
+import SpecialPageWrapper from '@/components/SpecialPageWrapper.vue'
+import MobileSubpageHeader from '../MobileSubpageHeader.vue'
+import SuggestedEditsView from '../SuggestedEditsView.vue'
+import { HOMEPAGE, STRUCTURED_TASKS_FULL } from '../dashpage-fixtures'
+import { useDashpageSettings } from '../useDashpageSettings'
+import { useDashpageSuggestionModule } from '../useDashpageSuggestionModule'
+
+const { editSuggestionSource } = useDashpageSettings()
+const { fullscreenProps, onSuggestionLoad, onSuggestionRefresh, onSuggestionNavigate } =
+  useDashpageSuggestionModule()
+
+const showStructuredTasks = computed(() => editSuggestionSource.value === 'structured-tasks')
+
+const structuredProps = computed(() => ({
+  showFilterBar: true,
+  topicFilter: STRUCTURED_TASKS_FULL.topicFilter,
+  difficultyFilter: STRUCTURED_TASKS_FULL.difficultyFilter,
+  currentIndex: STRUCTURED_TASKS_FULL.currentIndex - 1,
+  totalCount: STRUCTURED_TASKS_FULL.totalCount,
+  articleTitle: STRUCTURED_TASKS_FULL.articleTitle,
+  articleShortDescription: STRUCTURED_TASKS_FULL.articleDescription,
+  thumbnailSrc: STRUCTURED_TASKS_FULL.thumbnailSrc,
+  pageviewsLabel: STRUCTURED_TASKS_FULL.pageviewsLabel,
+  taskHeading: STRUCTURED_TASKS_FULL.taskHeading,
+  taskDifficulty: STRUCTURED_TASKS_FULL.taskDifficulty,
+  taskTimeEstimate: STRUCTURED_TASKS_FULL.taskTimeEstimate,
+  taskDescription: STRUCTURED_TASKS_FULL.taskDescription,
+  showSnippet: false,
+  editHref: STRUCTURED_TASKS_FULL.editHref,
+  canGoPrev: false,
+  canGoNext: false,
+}))
+
+const suggestionProps = computed(() => ({
+  showFilterBar: false,
+  ...fullscreenProps.value,
+  currentIndex: fullscreenProps.value.currentIndex ?? 0,
+  totalCount: fullscreenProps.value.queueLength ?? fullscreenProps.value.totalSuggestionCount ?? 1,
+  taskHeading: fullscreenProps.value.taskHeading ?? fullscreenProps.value.taskTypeLabel,
+  showSnippet: fullscreenProps.value.showSnippet,
+}))
+
+const viewProps = computed(() =>
+  showStructuredTasks.value ? structuredProps.value : suggestionProps.value,
+)
+
+const showHeaderRefresh = computed(
+  () => !showStructuredTasks.value && viewProps.value.showRefresh && !viewProps.value.loadPending,
+)
+
+definePage({
+  meta: {
+    title: 'Dashpage — Suggested edits',
+    description: 'Full-page mobile drill-down for the Suggested edits homepage module.',
+  },
+})
+</script>
+
+<template>
+  <TaskFullscreenShell skin="mobile">
+    <div class="suggested-edits-layout">
+      <div class="suggested-edits-layout__header">
+        <MobileSubpageHeader
+          title="Suggested edits"
+          :back-to="HOMEPAGE"
+          back-label="Back to homepage"
+          :bleed="false"
+        >
+          <template v-if="showHeaderRefresh" #actions>
+            <CdxButton
+              weight="quiet"
+              :icon-only="true"
+              aria-label="Refresh suggestions"
+              :disabled="viewProps.refreshing"
+              @click="onSuggestionRefresh"
+            >
+              <CdxIcon :icon="cdxIconReload" />
+            </CdxButton>
+          </template>
+        </MobileSubpageHeader>
+      </div>
+
+      <SpecialPageWrapper :title="null" class="suggested-edits-page">
+        <SuggestedEditsView
+          v-bind="viewProps"
+          @load="onSuggestionLoad"
+          @refresh="onSuggestionRefresh"
+          @navigate="onSuggestionNavigate"
+        />
+      </SpecialPageWrapper>
+    </div>
+  </TaskFullscreenShell>
+</template>
+
+<style scoped>
+.suggested-edits-layout {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.suggested-edits-layout__header {
+  flex-shrink: 0;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0 4px;
+  /* padding: var(--spacing-100, 16px) var(--spacing-100, 16px) var(--spacing-50, 8px); */
+  background-color: var(--background-color-base, #fff);
+  border-bottom: 1px solid var(--border-color-base, #a2a9b1);
+}
+
+.suggested-edits-layout__header :deep(.mobile-subpage-header) {
+  margin: 0;
+  padding: 0;
+  border-bottom: none;
+}
+
+.suggested-edits-layout__header :deep(.mobile-subpage-header__title) {
+  margin-block: 0;
+  font-family: var(--font-family-system-sans, system-ui, sans-serif);
+  border: none !important;
+}
+
+.suggested-edits-page {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: 100%;
+  min-height: 0;
+  overflow: hidden;
+  background-color: var(--background-color-neutral-subtle, #f8f9fa);
+}
+
+.suggested-edits-page :deep(.special-page-wrapper) {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  max-width: none;
+  margin: 0;
+  background-color: transparent;
+}
+
+.suggested-edits-page :deep(.special-page-wrapper[data-skin='mobile']) {
+  padding: 0 var(--spacing-100, 16px);
+}
+
+.suggested-edits-page :deep(.special-page-wrapper__body) {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+}
+</style>
diff --git a/src/prototypes/template-homepage/useDashpageSuggestionModule.ts b/src/prototypes/template-homepage/useDashpageSuggestionModule.ts
index 90ff1bd..0f0846a 100644
--- a/src/prototypes/template-homepage/useDashpageSuggestionModule.ts
+++ b/src/prototypes/template-homepage/useDashpageSuggestionModule.ts
@@ -2,15 +2,25 @@ import { computed, ref, watch, type ComputedRef } from 'vue'
 
 import { useConfig } from '@/composables/useConfig'
 import {
+  DASHPAGE_MORELIKE_SEED_COUNT,
+  DASHPAGE_SUGGESTION_FALLBACK_PAGE,
+  DASHPAGE_SUGGESTION_MORELIKE_MAX,
+  DASHPAGE_SUGGESTION_POOL_MAX,
   dashpageSuggestionUserKey,
   getDashpageSuggestionModuleCache,
-  resolvePortfolioPage,
+  getPortfolioPagesForUser,
+  pickUpToRandomPages,
   setDashpageSuggestionModuleCache,
+  type PagePreviewCache,
 } from '@/lib/dashpageSuggestionCache'
 import { getPortfolioCache, setPortfolioCache } from '@/lib/dashpagePortfolioCache'
+import {
+  FetchMorelikePageTitlesError,
+  fetchMorelikePageTitles,
+} from '@/lib/fetchMorelikePageTitles'
 import {
   FetchUserEditedPageTitlesError,
-  fetchPagePreviewMetadata,
+  fetchPagePreviewMetadataBatch,
   fetchUserEditedPageTitles,
 } from '@/lib/fetchUserEditedPageTitles'
 import {
@@ -29,15 +39,69 @@ const wiki = createVeSuggestionsWiki('dashpage-suggestion-mode')
 
 const DASHPAGE_EXCLUDED_SUGGESTION_TYPES = new Set(['redirect'])
 
+export interface SuggestionQueueItem {
+  pageTitle: string
+  card: SuggestionCardData
+  pagePreview: PagePreviewCache
+  editHref: string
+}
+
 function filterDashpageSuggestions(cards: SuggestionCardData[]): SuggestionCardData[] {
   return cards.filter((card) => !DASHPAGE_EXCLUDED_SUGGESTION_TYPES.has(card.suggestionType))
 }
 
+function pageNeedsVeRefresh(pageTitle: string, forceRefresh: boolean): boolean {
+  if (forceRefresh) return true
+
+  const cached = getCachedRun(pageTitle)
+  if (!cached) return false
+
+  return filterDashpageSuggestions(cardsFromCachedRun(wiki, cached)).length === 0
+}
+
+function timeEstimateForDifficulty(difficulty: 'easy' | 'medium' | 'hard'): string {
+  if (difficulty === 'easy') return '3–5 minutes'
+  if (difficulty === 'medium') return '10–15 minutes'
+  return '20+ minutes'
+}
+
+function shuffleQueue<T>(items: T[]): T[] {
+  const copy = [...items]
+  for (let i = copy.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1))
+    ;[copy[i], copy[j]] = [copy[j], copy[i]]
+  }
+  return copy
+}
+
+function queueItemToBind(item: SuggestionQueueItem): SuggestionModeModuleBind {
+  const taskDifficulty = changeSizeForSuggestionType(item.card.suggestionType)
+  const showSnippet = shouldShowSnippet(item.card)
+
+  return {
+    articleTitle: item.pageTitle,
+    articleShortDescription: item.pagePreview.shortDescription,
+    thumbnailSrc: item.pagePreview.thumbnailSrc,
+    taskTypeLabel: item.card.heading,
+    taskHeading: item.card.heading,
+    taskDifficulty,
+    taskTimeEstimate: timeEstimateForDifficulty(taskDifficulty),
+    showSnippet,
+    snippetHtml: showSnippet ? item.card.renderedSnippetHtml : undefined,
+    editHref: item.editHref,
+    showRefresh: true,
+  }
+}
+
 export interface SuggestionModeModuleBind {
   articleTitle?: string
   articleShortDescription?: string
   thumbnailSrc?: string
   taskTypeLabel?: string
+  taskHeading?: string
+  taskTimeEstimate?: string
+  taskDescription?: string
+  showSnippet?: boolean
   snippetHtml?: string
   loadPending?: boolean
   showRefresh?: boolean
@@ -45,60 +109,111 @@ export interface SuggestionModeModuleBind {
   refreshError?: string | null
   emptyMessage?: string | null
   totalSuggestionCount?: number
+  currentIndex?: number
+  queueLength?: number
+  canGoPrev?: boolean
+  canGoNext?: boolean
   taskDifficulty?: 'easy' | 'medium' | 'hard'
   editHref?: string
 }
 
-function previewFromCards(
-  pageTitle: string,
-  cards: SuggestionCardData[],
-  pagePreview: { thumbnailSrc?: string; shortDescription?: string } = {},
-): SuggestionModeModuleBind {
-  const eligibleCards = filterDashpageSuggestions(cards)
-  const totalSuggestionCount = eligibleCards.length
-  const selectedCard = pickRandomSuggestion(eligibleCards)
+function buildQueueFromPages(
+  pageTitles: string[],
+  pagePreviews: Record<string, PagePreviewCache>,
+): SuggestionQueueItem[] {
+  const items: SuggestionQueueItem[] = []
+
+  for (const pageTitle of pageTitles) {
+    const veRun = getCachedRun(pageTitle)
+    if (!veRun) continue
+
+    const cards = filterDashpageSuggestions(cardsFromCachedRun(wiki, veRun))
+    const card = pickRandomSuggestion(cards)
+    if (!card) continue
+
+    const pagePreview = pagePreviews[pageTitle] ?? {}
+    items.push({
+      pageTitle,
+      card,
+      pagePreview,
+      editHref: editUrlForSuggestionCard(wiki, pageTitle, card),
+    })
+  }
 
-  if (!selectedCard) {
-    return {
-      articleTitle: pageTitle,
-      emptyMessage: `No suggestions for ${pageTitle}.`,
-      showRefresh: true,
+  return shuffleQueue(items)
+}
+
+async function collectSuggestionsForPages(
+  pageTitles: string[],
+  forceRefresh: boolean,
+  signal: AbortSignal,
+  recordPipelineError: (message: string) => void,
+): Promise<SuggestionQueueItem[]> {
+  const items: SuggestionQueueItem[] = []
+
+  for (const pageTitle of pageTitles) {
+    if (signal.aborted) return items
+
+    const pipelineResult = await runVeSuggestionsPipeline(wiki, pageTitle, {
+      forceRefresh: pageNeedsVeRefresh(pageTitle, forceRefresh),
+      maxSuggestions: 1,
+      excludeSuggestionTypes: [...DASHPAGE_EXCLUDED_SUGGESTION_TYPES],
+    })
+
+    if (pipelineResult.error && !pipelineResult.cards.length) {
+      recordPipelineError(pipelineResult.error)
+      continue
     }
-  }
 
-  return {
-    articleTitle: pageTitle,
-    articleShortDescription: pagePreview.shortDescription,
-    thumbnailSrc: pagePreview.thumbnailSrc,
-    taskTypeLabel: selectedCard.heading,
-    taskDifficulty: changeSizeForSuggestionType(selectedCard.suggestionType),
-    snippetHtml: shouldShowSnippet(selectedCard) ? selectedCard.renderedSnippetHtml : undefined,
-    editHref: editUrlForSuggestionCard(wiki, pageTitle, selectedCard),
-    showRefresh: true,
-    totalSuggestionCount,
+    if (pipelineResult.error) {
+      recordPipelineError(pipelineResult.error)
+    }
+
+    const eligibleCards = filterDashpageSuggestions(pipelineResult.cards)
+    const card = eligibleCards[0] ?? null
+    if (!card) continue
+
+    items.push({
+      pageTitle,
+      card,
+      pagePreview: {},
+      editHref: editUrlForSuggestionCard(wiki, pageTitle, card),
+    })
   }
+
+  return items
 }
 
-function previewForCachedPage(
-  pageTitle: string,
-  pagePreview: { thumbnailSrc?: string; shortDescription?: string } = {},
+function previewFromQueue(
+  queue: SuggestionQueueItem[],
+  index: number,
 ): SuggestionModeModuleBind {
-  const veRun = getCachedRun(pageTitle)
-  if (!veRun) {
+  if (!queue.length) {
     return {
-      articleTitle: pageTitle,
-      emptyMessage: `No suggestions for ${pageTitle}.`,
+      emptyMessage: 'No suggestions found. Try refresh.',
       showRefresh: true,
     }
   }
 
-  return previewFromCards(pageTitle, cardsFromCachedRun(wiki, veRun), pagePreview)
+  const safeIndex = Math.max(0, Math.min(index, queue.length - 1))
+  const item = queue[safeIndex]
+
+  return {
+    ...queueItemToBind(item),
+    totalSuggestionCount: queue.length,
+    currentIndex: safeIndex,
+    queueLength: queue.length,
+    canGoPrev: safeIndex > 0,
+    canGoNext: safeIndex < queue.length - 1,
+  }
 }
 
 export function useDashpageSuggestionModule(): {
   moduleProps: ComputedRef<SuggestionModeModuleBind>
+  fullscreenProps: ComputedRef<SuggestionModeModuleBind>
   onSuggestionLoad: () => void
   onSuggestionRefresh: () => void
+  onSuggestionNavigate: (delta: number) => void
 } {
   const { user, realUsername, currentUserPageLists } = useConfig()
 
@@ -106,29 +221,45 @@ export function useDashpageSuggestionModule(): {
   const error = ref<string | null>(null)
   const hasCache = ref(false)
   const lastFetchedAt = ref<number | null>(null)
-  const selectedPageTitle = ref<string | null>(null)
-  const preview = ref<SuggestionModeModuleBind>({})
+  const selectedPageTitles = ref<string[]>([])
+  const pagePreviews = ref<Record<string, PagePreviewCache>>({})
+  const queue = ref<SuggestionQueueItem[]>([])
+  const currentIndex = ref(0)
   const cachedRealTitles = ref<string[]>([])
 
   let abortController: AbortController | null = null
 
+  function persistCache(userKey: string): void {
+    setDashpageSuggestionModuleCache(userKey, {
+      fetchedAt: Date.now(),
+      selectedPageTitles: selectedPageTitles.value,
+      pagePreviews: pagePreviews.value,
+      currentIndex: currentIndex.value,
+    })
+  }
+
+  function applyQueue(nextQueue: SuggestionQueueItem[], index = 0): void {
+    queue.value = nextQueue
+    currentIndex.value = nextQueue.length ? Math.max(0, Math.min(index, nextQueue.length - 1)) : 0
+  }
+
   function loadFromModuleCache(userKey: string): void {
     const cached = getDashpageSuggestionModuleCache(userKey)
     if (!cached) {
       hasCache.value = false
       lastFetchedAt.value = null
-      selectedPageTitle.value = null
-      preview.value = {}
+      selectedPageTitles.value = []
+      pagePreviews.value = {}
+      queue.value = []
+      currentIndex.value = 0
       return
     }
 
     hasCache.value = true
     lastFetchedAt.value = cached.fetchedAt
-    selectedPageTitle.value = cached.selectedPageTitle
-    preview.value = previewForCachedPage(cached.selectedPageTitle, {
-      thumbnailSrc: cached.thumbnailSrc,
-      shortDescription: cached.shortDescription,
-    })
+    selectedPageTitles.value = cached.selectedPageTitles
+    pagePreviews.value = cached.pagePreviews ?? {}
+    applyQueue(buildQueueFromPages(cached.selectedPageTitles, pagePreviews.value), cached.currentIndex)
     error.value = null
   }
 
@@ -172,51 +303,97 @@ export function useDashpageSuggestionModule(): {
         cachedRealTitles.value = portfolio.titles
       }
 
-      const exclude = forceRefresh ? selectedPageTitle.value ?? undefined : undefined
-      const pageTitle = resolvePortfolioPage(
+      const portfolio = getPortfolioPagesForUser(
         user.value,
         currentUserPageLists.value,
         cachedRealTitles.value,
-        exclude,
       )
+      const portfolioPool =
+        portfolio.length ? portfolio : [DASHPAGE_SUGGESTION_FALLBACK_PAGE]
 
-      const pipelineResult = await runVeSuggestionsPipeline(wiki, pageTitle, {
-        forceRefresh,
-      })
+      const excludeTitles = forceRefresh ? selectedPageTitles.value : []
 
-      if (pipelineResult.error && !pipelineResult.cards.length) {
-        error.value = pipelineResult.error
-        return
+      const recordPipelineError = (message: string): void => {
+        if (!error.value) error.value = message
       }
 
-      if (pipelineResult.error) {
-        error.value = pipelineResult.error
-      }
+      const poolPagePicks = pickUpToRandomPages(
+        portfolioPool,
+        DASHPAGE_SUGGESTION_POOL_MAX,
+        excludeTitles,
+      )
 
-      let pagePreview: { thumbnailSrc?: string; shortDescription?: string } = {}
-      if (filterDashpageSuggestions(pipelineResult.cards).length) {
-        pagePreview = await fetchPagePreviewMetadata(pageTitle, { signal })
-      }
+      const poolItems = await collectSuggestionsForPages(
+        poolPagePicks,
+        forceRefresh,
+        signal,
+        recordPipelineError,
+      )
+
+      if (signal.aborted) return
 
-      const moduleCache = {
-        fetchedAt: Date.now(),
-        selectedPageTitle: pageTitle,
-        thumbnailSrc: pagePreview.thumbnailSrc,
-        shortDescription: pagePreview.shortDescription,
+      const seedTitles = pickUpToRandomPages(
+        portfolioPool,
+        DASHPAGE_MORELIKE_SEED_COUNT,
+      )
+
+      let morelikePagePicks: string[] = []
+      try {
+        morelikePagePicks = await fetchMorelikePageTitles(seedTitles, {
+          limit: DASHPAGE_SUGGESTION_MORELIKE_MAX,
+          excludeTitles: [...excludeTitles, ...poolPagePicks, ...seedTitles],
+          signal,
+        })
+      } catch (caught) {
+        if (caught instanceof FetchMorelikePageTitlesError && caught.code === 'aborted') {
+          return
+        }
+        const message =
+          caught instanceof FetchMorelikePageTitlesError
+            ? caught.message
+            : caught instanceof Error
+              ? caught.message
+              : String(caught)
+        recordPipelineError(message)
       }
 
-      setDashpageSuggestionModuleCache(userKey, moduleCache)
+      const morelikeItems = await collectSuggestionsForPages(
+        morelikePagePicks,
+        forceRefresh,
+        signal,
+        recordPipelineError,
+      )
+
+      if (signal.aborted) return
+
+      const nextQueue = shuffleQueue([...poolItems, ...morelikeItems])
+      const queuePageTitles = nextQueue.map((item) => item.pageTitle)
 
+      if (queuePageTitles.length) {
+        const previews = await fetchPagePreviewMetadataBatch(queuePageTitles, { signal })
+        for (const item of nextQueue) {
+          item.pagePreview = previews[item.pageTitle] ?? {}
+        }
+        pagePreviews.value = previews
+      } else {
+        pagePreviews.value = {}
+      }
+
+      selectedPageTitles.value = queuePageTitles
+      applyQueue(nextQueue, 0)
       hasCache.value = true
-      lastFetchedAt.value = moduleCache.fetchedAt
-      selectedPageTitle.value = pageTitle
-      preview.value = previewFromCards(pageTitle, pipelineResult.cards, pagePreview)
+      lastFetchedAt.value = Date.now()
+      persistCache(userKey)
     } catch (caught) {
-      if (caught instanceof FetchUserEditedPageTitlesError && caught.code === 'aborted') {
+      if (
+        (caught instanceof FetchUserEditedPageTitlesError && caught.code === 'aborted') ||
+        (caught instanceof FetchMorelikePageTitlesError && caught.code === 'aborted')
+      ) {
         return
       }
       const message =
-        caught instanceof FetchUserEditedPageTitlesError
+        caught instanceof FetchUserEditedPageTitlesError ||
+        caught instanceof FetchMorelikePageTitlesError
           ? caught.message
           : caught instanceof Error
             ? caught.message
@@ -227,7 +404,7 @@ export function useDashpageSuggestionModule(): {
     }
   }
 
-  const moduleProps = computed((): SuggestionModeModuleBind => {
+  function baseProps(): SuggestionModeModuleBind {
     if (!hasCache.value) {
       return {
         loadPending: true,
@@ -236,14 +413,36 @@ export function useDashpageSuggestionModule(): {
       }
     }
 
+    const preview = previewFromQueue(queue.value, currentIndex.value)
+    return {
+      ...preview,
+      showRefresh: true,
+      refreshing: loading.value,
+      refreshError: error.value,
+    }
+  }
+
+  const moduleProps = computed((): SuggestionModeModuleBind => {
+    const props = baseProps()
+    if (props.loadPending || props.emptyMessage) {
+      return props
+    }
+
+    // Homepage card: show first item only, counter uses full queue length.
+    const first = queue.value[0]
+    if (!first) return props
+
     return {
-      ...preview.value,
+      ...queueItemToBind(first),
       showRefresh: true,
       refreshing: loading.value,
       refreshError: error.value,
+      totalSuggestionCount: queue.value.length > 1 ? queue.value.length : undefined,
     }
   })
 
+  const fullscreenProps = computed((): SuggestionModeModuleBind => baseProps())
+
   function onSuggestionLoad(): void {
     void runPipeline(false)
   }
@@ -252,9 +451,21 @@ export function useDashpageSuggestionModule(): {
     void runPipeline(true)
   }
 
+  function onSuggestionNavigate(delta: number): void {
+    if (!queue.value.length) return
+
+    const nextIndex = currentIndex.value + delta
+    if (nextIndex < 0 || nextIndex >= queue.value.length) return
+
+    currentIndex.value = nextIndex
+    persistCache(dashpageSuggestionUserKey(user.value, realUsername.value))
+  }
+
   return {
     moduleProps,
+    fullscreenProps,
     onSuggestionLoad,
     onSuggestionRefresh,
+    onSuggestionNavigate,
   }
 }
diff --git a/src/prototypes/template-homepage/useHomepageSuggestedEdits.ts b/src/prototypes/template-homepage/useHomepageSuggestedEdits.ts
new file mode 100644
index 0000000..f923d56
--- /dev/null
+++ b/src/prototypes/template-homepage/useHomepageSuggestedEdits.ts
@@ -0,0 +1,12 @@
+import type { ComputedRef } from 'vue'
+import { computed } from 'vue'
+
+import { SUGGESTED_EDITS_PAGE } from './dashpage-fixtures'
+
+export function useHomepageSuggestedEdits(): {
+  suggestedEditsLinkTo: ComputedRef<typeof SUGGESTED_EDITS_PAGE>
+} {
+  const suggestedEditsLinkTo = computed(() => SUGGESTED_EDITS_PAGE)
+
+  return { suggestedEditsLinkTo }
+}

From 55e75eb23c06c04015163cf5f620386409e803e8 Mon Sep 17 00:00:00 2001
From: Lu Wilson <lu@todepond.com>
Date: Mon, 25 May 2026 22:41:10 +0200
Subject: [PATCH 08/21] GO

---
 src/lib/dashpageSuggestionCache.ts            |  12 +-
 src/lib/fetchMorelikePageTitles.ts            | 126 +++-
 src/lib/ve-suggestions/index.ts               |   4 +
 .../runVeSuggestionsPipeline.ts               |  25 +-
 src/lib/ve-suggestions/veDisplayHeadings.ts   |   2 +-
 src/lib/ve-suggestions/veSuggestionCards.ts   | 559 +++++++++++++++---
 .../template-homepage/ImpactModule.vue        |   1 +
 .../StructuredTasksModule.vue                 |   1 +
 .../template-homepage/SuggestedEditsView.vue  |  43 +-
 .../SuggestionModeModule.vue                  |   1 +
 .../suggested-edits/index.vue                 |  14 +-
 .../useDashpageSuggestionModule.ts            | 107 +++-
 12 files changed, 750 insertions(+), 145 deletions(-)

diff --git a/src/lib/dashpageSuggestionCache.ts b/src/lib/dashpageSuggestionCache.ts
index fcc2674..a1a4ecf 100644
--- a/src/lib/dashpageSuggestionCache.ts
+++ b/src/lib/dashpageSuggestionCache.ts
@@ -5,9 +5,15 @@ const STORAGE_KEY = 'protowiki-dashpage-suggestion-module-v4'
 export const DASHPAGE_SUGGESTION_FALLBACK_PAGE = 'Wet Leg'
 export const DASHPAGE_SUGGESTION_POOL_MAX = 6
 export const DASHPAGE_SUGGESTION_MORELIKE_MAX = 6
-/** Max combined suggestion queue length (pool + morelike successes). */
-export const DASHPAGE_SUGGESTION_MAX_PAGES =
-  DASHPAGE_SUGGESTION_POOL_MAX + DASHPAGE_SUGGESTION_MORELIKE_MAX
+/** Extra morelike batch when the first pass yields a very small queue. */
+export const DASHPAGE_SUGGESTION_MORELIKE_SUPPLEMENT_MAX = 6
+/** Max page titles to run through the VE pipeline in one refresh. */
+export const DASHPAGE_SUGGESTION_MAX_TRIED_PAGES =
+  DASHPAGE_SUGGESTION_POOL_MAX +
+  DASHPAGE_SUGGESTION_MORELIKE_MAX +
+  DASHPAGE_SUGGESTION_MORELIKE_SUPPLEMENT_MAX
+/** Target queue length before skipping the supplemental morelike pass. */
+export const DASHPAGE_SUGGESTION_MIN_QUEUE = 2
 export const DASHPAGE_MORELIKE_SEED_COUNT = 5
 
 export interface PagePreviewCache {
diff --git a/src/lib/fetchMorelikePageTitles.ts b/src/lib/fetchMorelikePageTitles.ts
index 8f7826a..0b9a486 100644
--- a/src/lib/fetchMorelikePageTitles.ts
+++ b/src/lib/fetchMorelikePageTitles.ts
@@ -2,6 +2,9 @@ const WIKI_HOST = 'en.wikipedia.org'
 const API_USER_AGENT =
   'ProtoWiki/0.1 (https://github.com/wikimedia-research/protowiki) dashpage-suggestion-mode'
 
+/** Max Action API search pages to walk when filling a morelike batch. */
+const MAX_SEARCH_PAGES = 5
+
 export class FetchMorelikePageTitlesError extends Error {
   constructor(
     message: string,
@@ -18,6 +21,14 @@ export interface FetchMorelikePageTitlesOptions {
   signal?: AbortSignal
 }
 
+type SearchResponse = {
+  batchcomplete?: string
+  continue?: { sroffset?: string; continue?: string }
+  query?: {
+    search?: Array<{ title?: string; ns?: number }>
+  }
+}
+
 function normalizeTitleKey(title: string): string {
   return title.trim().replace(/_/g, ' ').toLowerCase()
 }
@@ -49,8 +60,76 @@ async function fetchJson(url: string, signal?: AbortSignal): Promise<unknown> {
   return response.json()
 }
 
+function appendSearchHits(
+  hits: Array<{ title?: string; ns?: number }>,
+  titles: string[],
+  seen: Set<string>,
+  exclude: Set<string>,
+  limit: number,
+): void {
+  for (const hit of hits) {
+    if (titles.length >= limit) return
+    if (hit.ns !== undefined && hit.ns !== 0) continue
+    const title = typeof hit.title === 'string' ? hit.title.trim() : ''
+    if (!title.length) continue
+    const key = normalizeTitleKey(title)
+    if (seen.has(key) || exclude.has(key)) continue
+    seen.add(key)
+    titles.push(title)
+  }
+}
+
+/**
+ * Paginate Cirrus search until `limit` distinct titles are collected or results
+ * are exhausted. Excluded titles are skipped rather than returned.
+ */
+async function collectMorelikeTitles(
+  srsearch: string,
+  limit: number,
+  exclude: Set<string>,
+  seen: Set<string>,
+  signal?: AbortSignal,
+): Promise<string[]> {
+  const titles: string[] = []
+  let offset = 0
+  let searchPages = 0
+
+  while (titles.length < limit && searchPages < MAX_SEARCH_PAGES) {
+    assertNotAborted(signal)
+
+    const batchSize = Math.min(50, Math.max(limit * 2, limit))
+    const data = (await fetchJson(
+      actionUrl({
+        action: 'query',
+        list: 'search',
+        srsearch,
+        srwhat: 'text',
+        srnamespace: '0',
+        srlimit: String(batchSize),
+        sroffset: String(offset),
+      }),
+      signal,
+    )) as SearchResponse
+
+    const hits = data.query?.search ?? []
+    appendSearchHits(hits, titles, seen, exclude, limit)
+    searchPages += 1
+
+    if (titles.length >= limit || !hits.length) break
+
+    const nextOffset = data.continue?.sroffset
+    if (nextOffset == null || nextOffset === '') break
+    offset = Number.parseInt(nextOffset, 10)
+    if (Number.isNaN(offset)) break
+  }
+
+  return titles
+}
+
 /**
  * Cirrus "more like this" via Action API `list=search` and `srsearch=morelike:…`.
+ * Paginates past excluded hits; falls back to per-seed queries when a combined
+ * search yields nothing usable.
  */
 export async function fetchMorelikePageTitles(
   seedTitles: string[],
@@ -67,33 +146,34 @@ export async function fetchMorelikePageTitles(
     exclude.add(normalizeTitleKey(seed))
   }
 
-  const data = (await fetchJson(
-    actionUrl({
-      action: 'query',
-      list: 'search',
-      srsearch: `morelike:${seeds.join('|')}`,
-      srwhat: 'text',
-      srnamespace: '0',
-      srlimit: String(limit),
-    }),
+  const seen = new Set<string>()
+  let titles = await collectMorelikeTitles(
+    `morelike:${seeds.join('|')}`,
+    limit,
+    exclude,
+    seen,
     options.signal,
-  )) as {
-    query?: {
-      search?: Array<{ title?: string; ns?: number }>
-    }
+  )
+
+  if (titles.length >= limit) {
+    return titles
   }
 
-  const seen = new Set<string>()
-  const titles: string[] = []
+  for (const seed of seeds) {
+    if (titles.length >= limit) break
 
-  for (const hit of data.query?.search ?? []) {
-    if (hit.ns !== undefined && hit.ns !== 0) continue
-    const title = typeof hit.title === 'string' ? hit.title.trim() : ''
-    if (!title.length) continue
-    const key = normalizeTitleKey(title)
-    if (seen.has(key) || exclude.has(key)) continue
-    seen.add(key)
-    titles.push(title)
+    const seedTitlesFromSearch = await collectMorelikeTitles(
+      `morelike:${seed}`,
+      limit,
+      exclude,
+      seen,
+      options.signal,
+    )
+
+    for (const title of seedTitlesFromSearch) {
+      if (titles.length >= limit) break
+      titles.push(title)
+    }
   }
 
   return titles
diff --git a/src/lib/ve-suggestions/index.ts b/src/lib/ve-suggestions/index.ts
index 820791b..7a890d8 100644
--- a/src/lib/ve-suggestions/index.ts
+++ b/src/lib/ve-suggestions/index.ts
@@ -11,12 +11,16 @@ export {
   buildSectionTitleMap,
   buildSuggestionCard,
   hydrateCardsFromSnippetCache,
+  isEligibleSuggestion,
+  isEligibleSuggestionCard,
   isTransformedSnippetHtml,
   shouldShowSnippet,
   sortCards,
   editUrlForSuggestionCard,
+  hydrateCardDescriptionParts,
   type SectionRange,
   type SuggestionCardData,
+  type SuggestionDescriptionPart,
 } from './veSuggestionCards'
 export {
   clearCachedRun,
diff --git a/src/lib/ve-suggestions/runVeSuggestionsPipeline.ts b/src/lib/ve-suggestions/runVeSuggestionsPipeline.ts
index a4c0960..0972ddf 100644
--- a/src/lib/ve-suggestions/runVeSuggestionsPipeline.ts
+++ b/src/lib/ve-suggestions/runVeSuggestionsPipeline.ts
@@ -6,6 +6,9 @@ import {
   buildSectionTitleMap,
   buildSuggestionCard,
   hydrateCardsFromSnippetCache,
+  hydrateCardDescriptionParts,
+  isEligibleSuggestion,
+  isEligibleSuggestionCard,
   sortCards,
   type SuggestionCardData,
 } from './veSuggestionCards'
@@ -76,6 +79,7 @@ export function cardsFromMethodResults(
   pageTitle: string,
   methodResults: Record<string, CachedMethodResult>,
   snippetHtmlByKey: Record<string, string>,
+  pageSource?: string,
 ): SuggestionCardData[] {
   const cards: SuggestionCardData[] = []
 
@@ -86,8 +90,18 @@ export function cardsFromMethodResults(
     for (let index = 0; index < response.suggestions.length; index++) {
       const suggestion = response.suggestions[index]
       if (!suggestion) continue
+      if (!isEligibleSuggestion(response, suggestion)) continue
       cards.push(
-        buildFallbackCard(wiki, method.methodName, pageTitle, response, suggestion, index, snippetHtmlByKey),
+        buildFallbackCard(
+          wiki,
+          method.methodName,
+          pageTitle,
+          response,
+          suggestion,
+          index,
+          snippetHtmlByKey,
+          pageSource,
+        ),
       )
     }
   }
@@ -114,9 +128,13 @@ export function cardsFromCachedRun(
 ): SuggestionCardData[] {
   const snippetHtmlByKey = run.snippetHtmlByKey ?? {}
   if (run.cards?.length) {
-    return sortCards(hydrateCardsFromSnippetCache(run.cards, run.pageTitle, snippetHtmlByKey))
+    return sortCards(
+      hydrateCardsFromSnippetCache(run.cards, run.pageTitle, snippetHtmlByKey)
+        .map((card) => hydrateCardDescriptionParts(card, wiki))
+        .filter(isEligibleSuggestionCard),
+    )
   }
-  return cardsFromMethodResults(wiki, run.pageTitle, run.methodResults, snippetHtmlByKey)
+  return cardsFromMethodResults(wiki, run.pageTitle, run.methodResults, snippetHtmlByKey, run.pageSource)
 }
 
 export async function runVeSuggestionsPipeline(
@@ -214,6 +232,7 @@ export async function runVeSuggestionsPipeline(
 
           const suggestion = response.suggestions[index]
           if (!suggestion) continue
+          if (!isEligibleSuggestion(response, suggestion)) continue
           const card = await buildSuggestionCard(
             wiki,
             method.methodName,
diff --git a/src/lib/ve-suggestions/veDisplayHeadings.ts b/src/lib/ve-suggestions/veDisplayHeadings.ts
index 4cb92d8..6a3dbf4 100644
--- a/src/lib/ve-suggestions/veDisplayHeadings.ts
+++ b/src/lib/ve-suggestions/veDisplayHeadings.ts
@@ -9,7 +9,7 @@ export const DISPLAY_HEADING_BY_TYPE: Record<string, string> = {
   fakeHeading: 'Convert fake heading',
   imageCaption: 'Improve image caption',
   redirect: 'Replace redirect link',
-  requiredTemplateParam: 'Add missing information',
+  requiredTemplateParam: 'Complete the citation',
   suggestedLink: 'Add link',
   textMatch: 'Rewrite flagged text',
   tone: 'Adjust tone',
diff --git a/src/lib/ve-suggestions/veSuggestionCards.ts b/src/lib/ve-suggestions/veSuggestionCards.ts
index b0271c5..bd87f6e 100644
--- a/src/lib/ve-suggestions/veSuggestionCards.ts
+++ b/src/lib/ve-suggestions/veSuggestionCards.ts
@@ -5,12 +5,17 @@ import { formatSuggestionType, headingForSuggestionType } from './veDisplayHeadi
 import { stripLinksFromSnippetHtml, stripLinksFromWikitext } from './snippetLinkStrip'
 import { normalizePageTitle } from './veSuggestionsCache'
 
+export type SuggestionDescriptionPart =
+  | { kind: 'text'; text: string }
+  | { kind: 'link'; label: string; href: string }
+
 export interface SuggestionCardData {
   cardId: string
   methodName: string
   suggestionType: string
   heading: string
   descriptionHtml: string
+  descriptionParts: SuggestionDescriptionPart[]
   rawSnippetWikitext: string
   renderedSnippetHtml: string
   cardLinkUrl: string
@@ -64,7 +69,7 @@ const DISPLAY_BY_TYPE: Record<string, SuggestionDisplayConfig> = {
   },
   duplicateLink: {
     heading: 'Remove duplicate link',
-    description: (context, wiki) => createTargetDescription('Link to', context, wiki),
+    description: (context, wiki) => createTargetDescription('Remove link to', context, wiki),
   },
   externalLink: {
     heading: 'Remove external link',
@@ -83,8 +88,8 @@ const DISPLAY_BY_TYPE: Record<string, SuggestionDisplayConfig> = {
     description: (context, wiki) => createRedirectDescription(context, wiki),
   },
   requiredTemplateParam: {
-    heading: 'Add missing information',
-    description: (context, wiki) => createRequiredTemplateParamDescription(context, wiki),
+    heading: 'Complete the citation',
+    description: (context) => createRequiredTemplateParamDescription(context),
   },
   suggestedLink: {
     heading: 'Add link',
@@ -92,7 +97,7 @@ const DISPLAY_BY_TYPE: Record<string, SuggestionDisplayConfig> = {
   },
   textMatch: {
     heading: 'Rewrite flagged text',
-    description: () => 'Replace language that may need improvement.',
+    description: () => 'Replace AI-generated text.',
   },
   tone: {
     heading: 'Adjust tone',
@@ -105,9 +110,97 @@ const DISPLAY_BY_TYPE: Record<string, SuggestionDisplayConfig> = {
 }
 
 const SNIPPETLESS_SUGGESTION_TYPES = new Set(['redirect'])
+/** Link suggestions where a lone bold label adds nothing beyond the description. */
+const LABEL_ONLY_SNIPPETLESS_LINK_TYPES = new Set([
+  'duplicateLink',
+  'disambiguation',
+  'suggestedLink',
+])
 const REDIRECT_GROUP_MAX_VISIBLE = 3
 const REDIRECT_GROUP_HEADING = 'Replace redirect links'
 
+type KnownRequiredTemplateConfig = {
+  /** Normalized template names (lowercase, no Template: prefix). */
+  names: ReadonlySet<string>
+  /** When set, only these empty params qualify; otherwise any empty param qualifies. */
+  allowedMissingFields?: ReadonlySet<string>
+  heading: string
+  description: (missingFields: string[]) => string
+}
+
+const CITE_WEB_FIELD_LABELS: Record<string, string> = {
+  website: 'website',
+  last: 'author last name',
+  first: 'author first name',
+  author: 'author',
+  date: 'date',
+  'access-date': 'access date',
+  url: 'URL',
+  title: 'title',
+  publisher: 'publisher',
+  work: 'work',
+}
+
+function humanizeMissingFieldName(field: string): string {
+  return CITE_WEB_FIELD_LABELS[field.toLowerCase()] ?? field.replace(/-/g, ' ')
+}
+
+/** Hardcoded display + eligibility rules for required-template-param suggestions. */
+const KNOWN_REQUIRED_TEMPLATE_CONFIGS: KnownRequiredTemplateConfig[] = [
+  {
+    names: new Set(['cite web']),
+    heading: 'Complete the citation',
+    description: (missingFields) => {
+      if (missingFields.length === 1) {
+        return `Add the missing ${humanizeMissingFieldName(missingFields[0] ?? '')}.`
+      }
+      return 'Add the missing information.'
+    },
+  },
+]
+
+function normalizeTemplateName(raw: string): string {
+  return raw
+    .replace(/^Template:/i, '')
+    .trim()
+    .replace(/\s+/g, ' ')
+    .toLowerCase()
+}
+
+function getKnownRequiredTemplateConfig(
+  context: DescriptionContext,
+): KnownRequiredTemplateConfig | null {
+  const suggestionData = context.suggestion.data as Record<string, unknown> | undefined
+  const templateRaw =
+    typeof suggestionData?.template === 'string' ? suggestionData.template.trim() : ''
+  if (!templateRaw) return null
+  const normalized = normalizeTemplateName(templateRaw)
+  return KNOWN_REQUIRED_TEMPLATE_CONFIGS.find((config) => config.names.has(normalized)) ?? null
+}
+
+function getAllowedMissingFields(
+  context: DescriptionContext,
+  config: KnownRequiredTemplateConfig,
+): string[] {
+  const suggestionData = context.suggestion.data as Record<string, unknown> | undefined
+  const emptyNamedParams = Array.isArray(suggestionData?.emptyNamedParams)
+    ? suggestionData.emptyNamedParams
+        .filter((value): value is string => typeof value === 'string')
+        .map((value) => value.trim())
+        .filter(Boolean)
+    : []
+  return emptyNamedParams.filter((field) => {
+    if (!config.allowedMissingFields) return true
+    return config.allowedMissingFields.has(field.toLowerCase())
+  })
+}
+
+export function isEligibleRequiredTemplateParam(context: DescriptionContext): boolean {
+  const config = getKnownRequiredTemplateConfig(context)
+  if (!config) return false
+  return getAllowedMissingFields(context, config).length > 0
+}
+
 function escapeHtml(value: string): string {
   return value
     .replaceAll('&', '&amp;')
@@ -133,15 +226,40 @@ function getTargetLabel(context: DescriptionContext): string | null {
   return target?.trim() || null
 }
 
-function createTargetDescription(prefix: string, context: DescriptionContext, wiki: FakeWiki): string {
+function textDescriptionPart(text: string): SuggestionDescriptionPart {
+  return { kind: 'text', text }
+}
+
+function linkDescriptionPart(label: string, href: string): SuggestionDescriptionPart {
+  return { kind: 'link', label, href }
+}
+
+function createTargetDescriptionParts(
+  prefix: string,
+  context: DescriptionContext,
+  wiki: FakeWiki,
+): SuggestionDescriptionPart[] {
   const targetLabel = getTargetLabel(context)
-  if (!targetLabel) return `${prefix} related article.`
-  const href = escapeHtml(wiki.getPageUrl(targetLabel))
-  const text = escapeHtml(targetLabel)
-  return `${prefix} <a href="${href}" target="_blank" rel="noreferrer noopener">${text}</a>.`
+  if (!targetLabel) return [textDescriptionPart(`${prefix} related article.`)]
+  return [
+    textDescriptionPart(`${prefix} `),
+    linkDescriptionPart(targetLabel, wiki.getPageUrl(targetLabel)),
+    textDescriptionPart('.'),
+  ]
 }
 
-function createRedirectDescription(context: DescriptionContext, wiki: FakeWiki): string {
+function createTargetDescription(
+  prefix: string,
+  context: DescriptionContext,
+  wiki: FakeWiki,
+): string {
+  return descriptionPartsToHtml(createTargetDescriptionParts(prefix, context, wiki))
+}
+
+function createRedirectDescriptionParts(
+  context: DescriptionContext,
+  wiki: FakeWiki,
+): SuggestionDescriptionPart[] {
   const suggestionData = context.suggestion.data as Record<string, unknown> | undefined
   const candidateData = context.selectedCandidate?.data as Record<string, unknown> | undefined
   const fromTarget =
@@ -150,56 +268,161 @@ function createRedirectDescription(context: DescriptionContext, wiki: FakeWiki):
     'this link'
   const toTarget =
     (typeof suggestionData?.finalTarget === 'string' && suggestionData.finalTarget.trim()) || ''
-  const fromHref = escapeHtml(wiki.getPageUrl(fromTarget))
-  const fromText = escapeHtml(fromTarget)
+
   if (!toTarget) {
-    return `Change link from <a href="${fromHref}" target="_blank" rel="noreferrer noopener">${fromText}</a>.`
+    return [
+      textDescriptionPart('Change link from '),
+      linkDescriptionPart(fromTarget, wiki.getPageUrl(fromTarget)),
+      textDescriptionPart('.'),
+    ]
   }
-  const toHref = escapeHtml(wiki.getPageUrl(toTarget))
-  const toText = escapeHtml(toTarget)
-  return `Change link from <a href="${fromHref}" target="_blank" rel="noreferrer noopener">${fromText}</a> to <a href="${toHref}" target="_blank" rel="noreferrer noopener">${toText}</a>.`
+
+  return [
+    textDescriptionPart('Change link from '),
+    linkDescriptionPart(fromTarget, wiki.getPageUrl(fromTarget)),
+    textDescriptionPart(' to '),
+    linkDescriptionPart(toTarget, wiki.getPageUrl(toTarget)),
+    textDescriptionPart('.'),
+  ]
 }
 
-function createRequiredTemplateParamDescription(
+function descriptionPartsToHtml(parts: SuggestionDescriptionPart[]): string {
+  return parts
+    .map((part) => {
+      if (part.kind === 'text') return escapeHtml(part.text)
+      const href = escapeHtml(part.href)
+      const label = escapeHtml(part.label)
+      return `<a href="${href}" target="_blank" rel="noreferrer noopener">${label}</a>`
+    })
+    .join('')
+}
+
+function createRedirectDescription(context: DescriptionContext, wiki: FakeWiki): string {
+  return descriptionPartsToHtml(createRedirectDescriptionParts(context, wiki))
+}
+
+function buildDescriptionParts(
   context: DescriptionContext,
+  suggestionType: string,
   wiki: FakeWiki,
-): string {
-  const suggestionData = context.suggestion.data as Record<string, unknown> | undefined
-  const templateRaw = typeof suggestionData?.template === 'string' ? suggestionData.template.trim() : ''
-  const templateCore = templateRaw.replace(/^Template:/i, '').trim()
-  const templatePageTitle = templateCore ? `Template:${templateCore}` : ''
-  const templateHref = templatePageTitle ? escapeHtml(wiki.getPageUrl(templatePageTitle)) : ''
-  const templateLabel = escapeHtml(templateCore || templateRaw || 'this template')
-  const emptyNamedParams =
-    Array.isArray(suggestionData?.emptyNamedParams) ?
-      suggestionData.emptyNamedParams
-        .filter((value): value is string => typeof value === 'string')
-        .map((value) => value.trim())
-        .filter(Boolean)
-    : []
-  const allowedFieldNames = new Set(['website'])
-  const allowedMissingFields = emptyNamedParams.filter((field) =>
-    allowedFieldNames.has(field.toLowerCase()),
+  plainDescription: string,
+): SuggestionDescriptionPart[] {
+  if (suggestionType === 'disambiguation') {
+    return createTargetDescriptionParts('Link to', context, wiki)
+  }
+  if (suggestionType === 'duplicateLink') {
+    return createTargetDescriptionParts('Remove link to', context, wiki)
+  }
+  if (suggestionType === 'suggestedLink') {
+    return createTargetDescriptionParts('Consider linking to', context, wiki)
+  }
+  if (suggestionType === 'redirect') {
+    return createRedirectDescriptionParts(context, wiki)
+  }
+  return plainDescription ? [textDescriptionPart(plainDescription)] : []
+}
+
+export function hydrateCardDescriptionParts(
+  card: SuggestionCardData,
+  wiki: FakeWiki,
+): SuggestionCardData {
+  if (card.descriptionParts?.length) return card
+
+  const context: DescriptionContext = {
+    suggestion: card.raw,
+    selectedCandidate:
+      card.responseMeta.candidates.find((candidate) => candidate.id === card.raw.id) ??
+      card.responseMeta.candidates[0] ??
+      null,
+  }
+  const display = DISPLAY_BY_TYPE[card.suggestionType]
+  const plainDescription =
+    display?.description(context, wiki) ?? card.descriptionHtml.replace(/<[^>]+>/g, '').trim()
+  const descriptionParts = buildDescriptionParts(
+    context,
+    card.suggestionType,
+    wiki,
+    plainDescription,
   )
-  const fieldSummary =
-    allowedMissingFields.length === 1 ?
-      `the missing ${escapeHtml(allowedMissingFields[0] ?? '')} field`
-    : emptyNamedParams.length === 0 ? 'a missing field'
-    : emptyNamedParams.length === 1 ? 'a missing field'
-    : 'missing fields'
-  if (!templateHref) {
-    return `Complete the ${templateLabel} template by adding ${fieldSummary}.`
+
+  return {
+    ...card,
+    descriptionParts,
+    descriptionHtml: descriptionPartsToHtml(descriptionParts),
   }
-  return `Complete the <a href="${templateHref}" target="_blank" rel="noreferrer noopener">${templateLabel}</a> template by adding ${fieldSummary}.`
 }
 
-function getTemplateTitleSnippet(context: DescriptionContext): string | null {
+function createRequiredTemplateParamDescription(context: DescriptionContext): string {
+  const config = getKnownRequiredTemplateConfig(context)
+  if (!config) return ''
+  return config.description(getAllowedMissingFields(context, config))
+}
+
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+/** Turn MediaWiki template escapes (e.g. {{!}}) into readable text for snippets. */
+function decodeTemplateParamValue(raw: string): string {
+  return raw
+    .trim()
+    .replace(/\{\{!\}\}/gi, '|')
+    .replace(/\{\{=\}\}/gi, '=')
+}
+
+const TEMPLATE_PARAM_MAGICS = ['{{!}}', '{{=}}'] as const
+
+function tryConsumeTemplateParamMagic(
+  invocation: string,
+  index: number,
+): { consumed: string; length: number } | null {
+  const tail = invocation.slice(index).toLowerCase()
+  for (const magic of TEMPLATE_PARAM_MAGICS) {
+    if (tail.startsWith(magic)) {
+      return { consumed: invocation.slice(index, index + magic.length), length: magic.length }
+    }
+  }
+  return null
+}
+
+/**
+ * Read a named parameter from template invocation wikitext.
+ * Pipes inside values are escaped as {{!}} — a naive [^|}]+ capture stops at the first `}`.
+ */
+function readTemplateParamRawValue(invocation: string, fieldName: string): string | null {
+  const fieldPattern = new RegExp(`\\|\\s*${escapeRegExp(fieldName)}\\s*=`, 'i')
+  const match = fieldPattern.exec(invocation)
+  if (!match) return null
+
+  let value = ''
+  for (let i = match.index + match[0].length; i < invocation.length; i += 1) {
+    const magic = tryConsumeTemplateParamMagic(invocation, i)
+    if (magic) {
+      value += magic.consumed
+      i += magic.length - 1
+      continue
+    }
+    const ch = invocation[i]
+    if (ch === '|') break
+    if (ch === '}' && invocation[i + 1] === '}') break
+    value += ch
+  }
+
+  const trimmed = value.trim()
+  return trimmed.length ? trimmed : null
+}
+
+function getTemplateInvocationField(context: DescriptionContext, fieldName: string): string | null {
   const candidateData = context.selectedCandidate?.data as Record<string, unknown> | undefined
   const invocation = typeof candidateData?.invocation === 'string' ? candidateData.invocation : ''
   if (!invocation) return null
-  const match = invocation.match(/\|\s*title\s*=\s*([^|}]+)/i)
-  const title = (match?.[1] ?? '').trim()
-  return title || null
+  const raw = readTemplateParamRawValue(invocation, fieldName)
+  if (!raw) return null
+  return decodeTemplateParamValue(raw) || null
+}
+
+function getTemplateTitleSnippet(context: DescriptionContext): string | null {
+  return getTemplateInvocationField(context, 'title')
 }
 
 function readContextField(
@@ -222,11 +445,7 @@ const CITATION_MARKER_PATTERN =
   /\{\{\s*citation\s+needed(?:\s*\|[^}]*)?\s*\}\}|\[citation needed\]/gi
 
 function stripSnippetDecorators(snippet: string): string {
-  return snippet
-    .replace(/^…+/g, '')
-    .replace(/…+$/g, '')
-    .replace(/'''/g, '')
-    .trim()
+  return snippet.replace(/^…+/g, '').replace(/…+$/g, '').replace(/'''/g, '').trim()
 }
 
 /** True when the snippet includes readable prose, not only a citation-needed marker. */
@@ -239,6 +458,21 @@ function hasSubstantiveSnippetContent(snippet: string): boolean {
 }
 
 function getRequiredTemplateParamSnippetWikitext(context: DescriptionContext): string {
+  const config = getKnownRequiredTemplateConfig(context)
+  if (!config) return ''
+
+  // For Cite web, show the source title so editors know which reference to fix.
+  if (config.names.has('cite web')) {
+    const title = getTemplateTitleSnippet(context)
+    if (title && hasSubstantiveSnippetContent(title)) {
+      return normalizeSnippetWikitext(boldWikitext(title))
+    }
+    const url = getTemplateInvocationField(context, 'url')
+    if (url && hasSubstantiveSnippetContent(url)) {
+      return normalizeSnippetWikitext(boldWikitext(url))
+    }
+  }
+
   const suggestionData = context.suggestion.data as Record<string, unknown> | undefined
   const candidateData = context.selectedCandidate?.data as Record<string, unknown> | undefined
   const invocation =
@@ -254,24 +488,88 @@ function getRequiredTemplateParamSnippetWikitext(context: DescriptionContext): s
 
   const candidateContext = context.selectedCandidate?.context?.trim()
   if (candidateContext && hasSubstantiveSnippetContent(candidateContext)) {
-    const templateTitle = getTemplateTitleSnippet(context)
-    if (templateTitle && stripSnippetDecorators(candidateContext) === templateTitle) {
-      return ''
-    }
     return normalizeSnippetWikitext(candidateContext)
   }
 
   return ''
 }
 
-function isRequiredTemplateParamTitleOnlySnippet(rawSnippetWikitext: string): boolean {
-  const trimmed = stripSnippetDecorators(normalizeSnippetWikitext(rawSnippetWikitext))
-  if (!trimmed.length) return true
-  if (trimmed.includes('{{') || trimmed.startsWith('…')) return false
-  return true
+function stripInlineWikiNoise(text: string): string {
+  return text
+    .replace(/<ref[^>]*(?:\/>|>[\s\S]*?<\/ref>)/gi, '')
+    .replace(/\{\{[^{}|]*\}\}/g, '')
+    .replace(/\[\[(?:[^\]|]*\|)?([^\]]+)\]\]/g, '$1')
+    .replace(/'{2,5}/g, '')
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+const CITATION_NEEDED_INLINE_PATTERN = /\{\{\s*(?:citation needed|cn)\b[^}]*\}\}/i
+
+function readCitationNeededTemplateIndex(context: DescriptionContext): number | null {
+  const suggestionData = context.suggestion.data as Record<string, unknown> | undefined
+  const candidateData = context.selectedCandidate?.data as Record<string, unknown> | undefined
+  const index =
+    typeof candidateData?.index === 'number'
+      ? candidateData.index
+      : typeof suggestionData?.index === 'number'
+        ? suggestionData.index
+        : null
+  return index != null && Number.isFinite(index) && index >= 0 ? index : null
+}
+
+function extractClaimBeforeCitationNeeded(rawBefore: string): string {
+  const afterLastRef = rawBefore.split(/<\/ref>/i).pop() ?? rawBefore
+  const cleaned = stripInlineWikiNoise(afterLastRef)
+  if (!cleaned) return ''
+
+  const sentences = cleaned
+    .match(/[^.!?]+[.!?]?/g)
+    ?.map((part) => part.trim())
+    .filter(Boolean)
+  const lastSentence = sentences?.[sentences.length - 1]
+  if (lastSentence && hasSubstantiveSnippetContent(lastSentence)) return lastSentence
+
+  return cleaned.slice(-120).trim()
+}
+
+function extractCitationNeededSnippetFromSource(
+  pageSource: string,
+  templateIndex: number,
+  templateText?: string,
+): string {
+  const lineStart = pageSource.lastIndexOf('\n', templateIndex) + 1
+  const lineEndIdx = pageSource.indexOf('\n', templateIndex)
+  const line = pageSource.slice(lineStart, lineEndIdx === -1 ? undefined : lineEndIdx)
+  const relIndex = templateIndex - lineStart
+
+  let templateLength = templateText?.trim().length ?? 0
+  if (!templateLength) {
+    const match = line.slice(relIndex).match(CITATION_NEEDED_INLINE_PATTERN)
+    templateLength = match?.[0]?.length ?? 0
+  }
+  if (!templateLength) return ''
+
+  const rawBefore = line.slice(0, relIndex)
+  const rawAfter = line.slice(relIndex + templateLength)
+  const coreText = extractClaimBeforeCitationNeeded(rawBefore)
+  if (!coreText) return ''
+
+  const beforeClean = stripInlineWikiNoise(rawBefore.split(/<\/ref>/i).pop() ?? rawBefore)
+  const coreStart = beforeClean.lastIndexOf(coreText)
+  const contextBefore =
+    coreStart > 0 ? beforeClean.slice(Math.max(0, coreStart - 60), coreStart).trim() : ''
+  const contextAfterBody = stripInlineWikiNoise(rawAfter).slice(0, 60).trim()
+  const contextAfter = contextAfterBody ? ` ${contextAfterBody}` : ''
+
+  const snippet = formatContextualSnippetWikitext(contextBefore, coreText, contextAfter)
+  return hasSubstantiveSnippetContent(snippet) ? snippet : ''
 }
 
-function getCitationNeededSnippetWikitext(context: DescriptionContext): string {
+function getCitationNeededSnippetWikitext(
+  context: DescriptionContext,
+  pageSource?: string,
+): string {
   const suggestionData = context.suggestion.data as Record<string, unknown> | undefined
   const candidateData = context.selectedCandidate?.data as Record<string, unknown> | undefined
   const coreText =
@@ -286,6 +584,13 @@ function getCitationNeededSnippetWikitext(context: DescriptionContext): string {
     if (hasSubstantiveSnippetContent(snippet)) return snippet
   }
 
+  const templateIndex = readCitationNeededTemplateIndex(context)
+  if (pageSource && templateIndex != null) {
+    const templateText = context.selectedCandidate?.text?.trim()
+    const snippet = extractCitationNeededSnippetFromSource(pageSource, templateIndex, templateText)
+    if (snippet) return snippet
+  }
+
   const candidateContext = context.selectedCandidate?.context?.trim()
   if (candidateContext && hasSubstantiveSnippetContent(candidateContext)) {
     return normalizeSnippetWikitext(candidateContext)
@@ -357,7 +662,51 @@ function resolveSelectedCandidate(
   return response.candidates[0] ?? null
 }
 
-function getSnippetWikitext(context: DescriptionContext, suggestionType: string): string {
+export function isEligibleSuggestion(
+  response: Pick<FWVeSuggestionResponse, 'suggestionType' | 'candidates'>,
+  suggestion: FWVeSuggestionItem,
+): boolean {
+  if (response.suggestionType !== 'requiredTemplateParam') return true
+  const context: DescriptionContext = {
+    suggestion,
+    selectedCandidate: resolveSelectedCandidate(response as FWVeSuggestionResponse, suggestion),
+  }
+  return isEligibleRequiredTemplateParam(context)
+}
+
+export function isEligibleSuggestionCard(card: SuggestionCardData): boolean {
+  if (card.suggestionType !== 'requiredTemplateParam') return true
+  const context: DescriptionContext = {
+    suggestion: card.raw,
+    selectedCandidate:
+      card.responseMeta.candidates.find((candidate) => candidate.id === card.raw.id) ??
+      card.responseMeta.candidates[0] ??
+      null,
+  }
+  return isEligibleRequiredTemplateParam(context)
+}
+
+function resolveSuggestionHeading(
+  response: FWVeSuggestionResponse,
+  context: DescriptionContext,
+): string {
+  if (response.suggestionType === 'requiredTemplateParam') {
+    return (
+      getKnownRequiredTemplateConfig(context)?.heading ??
+      headingForSuggestionType(response.suggestionType)
+    )
+  }
+  return (
+    DISPLAY_BY_TYPE[response.suggestionType]?.heading ??
+    headingForSuggestionType(response.suggestionType)
+  )
+}
+
+function getSnippetWikitext(
+  context: DescriptionContext,
+  suggestionType: string,
+  pageSource?: string,
+): string {
   if (SNIPPETLESS_SUGGESTION_TYPES.has(suggestionType)) {
     return ''
   }
@@ -367,7 +716,7 @@ function getSnippetWikitext(context: DescriptionContext, suggestionType: string)
   }
 
   if (suggestionType === 'citationNeeded') {
-    return getCitationNeededSnippetWikitext(context)
+    return getCitationNeededSnippetWikitext(context, pageSource)
   }
 
   const suggestionData = context.suggestion.data as Record<string, unknown> | undefined
@@ -521,15 +870,46 @@ export function isTransformedSnippetHtml(card: SuggestionCardData): boolean {
   return html.includes('<')
 }
 
+function normalizeComparableText(value: string): string {
+  return value.replace(/\s+/g, ' ').trim().toLowerCase()
+}
+
+function snippetPlainText(rawSnippetWikitext: string): string {
+  return normalizeComparableText(
+    stripSnippetDecorators(normalizeSnippetWikitext(rawSnippetWikitext)),
+  )
+}
+
+function isLabelOnlySnippet(rawSnippetWikitext: string): boolean {
+  const trimmed = normalizeSnippetWikitext(rawSnippetWikitext)
+  if (!trimmed.length) return true
+  if (trimmed.includes('{{')) return false
+  if (trimmed.startsWith('…') || trimmed.endsWith('…')) return false
+  return true
+}
+
+function snippetRepeatsDescription(card: SuggestionCardData): boolean {
+  const snippetText = snippetPlainText(card.rawSnippetWikitext)
+  if (!snippetText) return true
+
+  for (const part of card.descriptionParts ?? []) {
+    if (part.kind !== 'link') continue
+    if (normalizeComparableText(part.label) === snippetText) return true
+  }
+
+  return false
+}
+
 export function shouldShowSnippet(card: SuggestionCardData): boolean {
   if (SNIPPETLESS_SUGGESTION_TYPES.has(card.suggestionType)) return false
+  if (!hasSubstantiveSnippetContent(card.rawSnippetWikitext)) return false
+  if (snippetRepeatsDescription(card)) return false
   if (
-    card.suggestionType === 'requiredTemplateParam' &&
-    isRequiredTemplateParamTitleOnlySnippet(card.rawSnippetWikitext)
+    LABEL_ONLY_SNIPPETLESS_LINK_TYPES.has(card.suggestionType) &&
+    isLabelOnlySnippet(card.rawSnippetWikitext)
   ) {
     return false
   }
-  if (!hasSubstantiveSnippetContent(card.rawSnippetWikitext)) return false
   return isTransformedSnippetHtml(card)
 }
 
@@ -590,25 +970,27 @@ export async function buildSuggestionCard(
   snippetHtmlCache: Record<string, string>,
 ): Promise<SuggestionCardData> {
   const selectedCandidate = resolveSelectedCandidate(response, suggestion)
+  const context = { suggestion, selectedCandidate }
   const display = DISPLAY_BY_TYPE[response.suggestionType] ?? {
     heading: headingForSuggestionType(response.suggestionType),
     description: () => 'Help explain where this information is coming from.',
   }
-  const context = { suggestion, selectedCandidate }
-  const rawSnippet = getSnippetWikitext(context, response.suggestionType)
-  const renderedSnippetHtml = await renderSnippetHtml(
+  const rawSnippet = getSnippetWikitext(context, response.suggestionType, pageSource)
+  const descriptionParts = buildDescriptionParts(
+    context,
+    response.suggestionType,
     wiki,
-    pageTitle,
-    rawSnippet,
-    snippetHtmlCache,
+    display.description(context, wiki),
   )
+  const renderedSnippetHtml = await renderSnippetHtml(wiki, pageTitle, rawSnippet, snippetHtmlCache)
 
   return {
     cardId: `${methodName}-${suggestion.id}-${index}`,
     methodName,
     suggestionType: response.suggestionType,
-    heading: display.heading,
-    descriptionHtml: display.description(context, wiki),
+    heading: resolveSuggestionHeading(response, context),
+    descriptionHtml: descriptionPartsToHtml(descriptionParts),
+    descriptionParts,
     rawSnippetWikitext: rawSnippet,
     renderedSnippetHtml,
     cardLinkUrl: resolveBestEffortCardLink(
@@ -638,28 +1020,34 @@ export function buildFallbackCard(
   suggestion: FWVeSuggestionItem,
   index: number,
   snippetHtmlByKey: Record<string, string> = {},
+  pageSource?: string,
 ): SuggestionCardData {
   const selectedCandidate = resolveSelectedCandidate(response, suggestion)
+  const context = { suggestion, selectedCandidate }
   const display = DISPLAY_BY_TYPE[response.suggestionType] ?? {
     heading: formatSuggestionType(response.suggestionType),
     description: () => 'Help explain where this information is coming from.',
   }
-  const context = { suggestion, selectedCandidate }
-  const rawSnippet = getSnippetWikitext(context, response.suggestionType)
-  const cachedHtml = rawSnippet ?
-    snippetHtmlByKey[snippetCacheKey(pageTitle, rawSnippet)]
-  : undefined
+  const rawSnippet = getSnippetWikitext(context, response.suggestionType, pageSource)
+  const descriptionParts = buildDescriptionParts(
+    context,
+    response.suggestionType,
+    wiki,
+    display.description(context, wiki),
+  )
+  const cachedHtml = rawSnippet
+    ? snippetHtmlByKey[snippetCacheKey(pageTitle, rawSnippet)]
+    : undefined
   const renderedSnippetHtml =
-    cachedHtml && cachedHtml !== rawSnippet ?
-      stripLinksFromSnippetHtml(cachedHtml)
-    : ''
+    cachedHtml && cachedHtml !== rawSnippet ? stripLinksFromSnippetHtml(cachedHtml) : ''
 
   return {
     cardId: `${methodName}-${suggestion.id}-${index}`,
     methodName,
     suggestionType: response.suggestionType,
-    heading: display.heading,
-    descriptionHtml: display.description(context, wiki),
+    heading: resolveSuggestionHeading(response, context),
+    descriptionHtml: descriptionPartsToHtml(descriptionParts),
+    descriptionParts,
     rawSnippetWikitext: rawSnippet,
     renderedSnippetHtml,
     cardLinkUrl: wiki.getPageUrl(response.pageTitle),
@@ -730,6 +1118,7 @@ function buildGroupedRedirectCard(cards: SuggestionCardData[]): SuggestionCardDa
     suggestionType: first.suggestionType,
     heading: REDIRECT_GROUP_HEADING,
     descriptionHtml: buildGroupedRedirectDescriptionHtml(cards),
+    descriptionParts: [],
     rawSnippetWikitext: '',
     renderedSnippetHtml: '',
     cardLinkUrl: first.cardLinkUrl,
diff --git a/src/prototypes/template-homepage/ImpactModule.vue b/src/prototypes/template-homepage/ImpactModule.vue
index ff8046d..a5e1360 100644
--- a/src/prototypes/template-homepage/ImpactModule.vue
+++ b/src/prototypes/template-homepage/ImpactModule.vue
@@ -646,6 +646,7 @@ const recentEditCount = computed(() =>
   width: 100%;
   height: 100%;
   object-fit: cover;
+  object-position: top;
 }
 
 .impact-module__most-viewed-title-link {
diff --git a/src/prototypes/template-homepage/StructuredTasksModule.vue b/src/prototypes/template-homepage/StructuredTasksModule.vue
index 8ba97a5..e61ff45 100644
--- a/src/prototypes/template-homepage/StructuredTasksModule.vue
+++ b/src/prototypes/template-homepage/StructuredTasksModule.vue
@@ -109,6 +109,7 @@ const props = withDefaults(defineProps<Props>(), {
   width: 48px;
   height: 48px;
   object-fit: cover;
+  object-position: top;
   border-radius: 2px;
 }
 
diff --git a/src/prototypes/template-homepage/SuggestedEditsView.vue b/src/prototypes/template-homepage/SuggestedEditsView.vue
index dfe1f7d..b87a464 100644
--- a/src/prototypes/template-homepage/SuggestedEditsView.vue
+++ b/src/prototypes/template-homepage/SuggestedEditsView.vue
@@ -14,7 +14,7 @@ import {
 import difficultyEasyIcon from '@/lib/ve-suggestions/assets/difficulty-easy.svg'
 import difficultyHardIcon from '@/lib/ve-suggestions/assets/difficulty-hard.svg'
 import difficultyMediumIcon from '@/lib/ve-suggestions/assets/difficulty-medium.svg'
-import { CHANGE_SIZE_COLORS } from '@/lib/ve-suggestions'
+import { CHANGE_SIZE_COLORS, type SuggestionDescriptionPart } from '@/lib/ve-suggestions'
 
 const difficultyIcons = {
   easy: difficultyEasyIcon,
@@ -36,6 +36,7 @@ interface Props {
   taskTypeLabel?: string
   taskTimeEstimate?: string
   taskDescription?: string
+  taskDescriptionParts?: SuggestionDescriptionPart[]
   showSnippet?: boolean
   snippetHtml?: string
   loadPending?: boolean
@@ -63,6 +64,7 @@ const props = withDefaults(defineProps<Props>(), {
   taskTypeLabel: undefined,
   taskTimeEstimate: undefined,
   taskDescription: undefined,
+  taskDescriptionParts: undefined,
   showSnippet: false,
   snippetHtml: undefined,
   loadPending: false,
@@ -102,6 +104,12 @@ const taskTypeColor = computed(() =>
   props.taskDifficulty ? CHANGE_SIZE_COLORS[props.taskDifficulty] : '#14866d',
 )
 
+const hasTaskDescription = computed(
+  () =>
+    (props.taskDescriptionParts?.length ?? 0) > 0 ||
+    !!props.taskDescription?.trim(),
+)
+
 function onLoadClick(): void {
   emit('load')
 }
@@ -217,8 +225,23 @@ function onNavigate(delta: number): void {
             </span>
           </div>
 
-          <p v-if="taskDescription" class="suggested-edits-view__task-description">
-            {{ taskDescription }}
+          <p
+            v-if="hasTaskDescription"
+            class="suggested-edits-view__task-description"
+          >
+            <template v-if="taskDescriptionParts?.length">
+              <template v-for="(part, index) in taskDescriptionParts" :key="index">
+                <a
+                  v-if="part.kind === 'link'"
+                  class="suggested-edits-view__task-description-link"
+                  :href="part.href"
+                  target="_blank"
+                  rel="noreferrer noopener"
+                >{{ part.label }}</a>
+                <template v-else>{{ part.text }}</template>
+              </template>
+            </template>
+            <template v-else>{{ taskDescription }}</template>
           </p>
 
           <div
@@ -282,7 +305,6 @@ function onNavigate(delta: number): void {
   flex: 1;
   flex-direction: column;
   min-height: 0;
-  overflow: hidden;
 }
 
 .suggested-edits-view__scroll {
@@ -380,6 +402,7 @@ function onNavigate(delta: number): void {
   width: 100%;
   height: 100%;
   object-fit: cover;
+  object-position: top;
 }
 
 .suggested-edits-view__card-body {
@@ -474,6 +497,10 @@ function onNavigate(delta: number): void {
   color: var(--color-base, #202122);
 }
 
+.suggested-edits-view__task-description-link {
+  color: var(--color-progressive, #36c);
+}
+
 .suggested-edits-view__snippet {
   font-size: var(--font-size-small);
   line-height: var(--line-height-content);
@@ -484,12 +511,18 @@ function onNavigate(delta: number): void {
 }
 
 .suggested-edits-view__footer {
+  --suggested-edits-footer-bleed-inline: var(--spacing-100, 16px);
+  --suggested-edits-footer-bleed-bottom: var(--spacing-150, 24px);
   display: flex;
   flex-shrink: 0;
   align-items: center;
   justify-content: space-between;
   gap: var(--spacing-100, 16px);
-  padding: var(--spacing-75, 12px) 0;
+  box-sizing: border-box;
+  width: calc(100% + 2 * var(--suggested-edits-footer-bleed-inline));
+  margin-inline: calc(-1 * var(--suggested-edits-footer-bleed-inline));
+  margin-bottom: calc(-1 * var(--suggested-edits-footer-bleed-bottom));
+  padding: var(--spacing-75, 12px) var(--suggested-edits-footer-bleed-inline);
   padding-bottom: max(var(--spacing-75, 12px), env(safe-area-inset-bottom, 0px));
   background-color: var(--background-color-base, #fff);
   border-top: 1px solid var(--border-color-base, #a2a9b1);
diff --git a/src/prototypes/template-homepage/SuggestionModeModule.vue b/src/prototypes/template-homepage/SuggestionModeModule.vue
index a4e694e..8fd98a8 100644
--- a/src/prototypes/template-homepage/SuggestionModeModule.vue
+++ b/src/prototypes/template-homepage/SuggestionModeModule.vue
@@ -357,6 +357,7 @@ function onLoadClick(): void {
   width: var(--suggestion-preview-thumb-size, 72px);
   height: var(--suggestion-preview-thumb-size, 72px);
   object-fit: cover;
+  object-position: top;
 }
 
 .suggestion-mode-module__preview-text {
diff --git a/src/prototypes/template-homepage/suggested-edits/index.vue b/src/prototypes/template-homepage/suggested-edits/index.vue
index dc438f3..87bb822 100644
--- a/src/prototypes/template-homepage/suggested-edits/index.vue
+++ b/src/prototypes/template-homepage/suggested-edits/index.vue
@@ -31,6 +31,7 @@ const structuredProps = computed(() => ({
   taskDifficulty: STRUCTURED_TASKS_FULL.taskDifficulty,
   taskTimeEstimate: STRUCTURED_TASKS_FULL.taskTimeEstimate,
   taskDescription: STRUCTURED_TASKS_FULL.taskDescription,
+  taskDescriptionParts: [{ kind: 'text', text: STRUCTURED_TASKS_FULL.taskDescription }],
   showSnippet: false,
   editHref: STRUCTURED_TASKS_FULL.editHref,
   canGoPrev: false,
@@ -137,20 +138,9 @@ definePage({
   width: 100%;
   min-height: 0;
   overflow: hidden;
-  background-color: var(--background-color-neutral-subtle, #f8f9fa);
-}
-
-.suggested-edits-page :deep(.special-page-wrapper) {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
   max-width: none;
   margin: 0;
-  background-color: transparent;
-}
-
-.suggested-edits-page :deep(.special-page-wrapper[data-skin='mobile']) {
-  padding: 0 var(--spacing-100, 16px);
+  background-color: var(--background-color-neutral-subtle, #f8f9fa);
 }
 
 .suggested-edits-page :deep(.special-page-wrapper__body) {
diff --git a/src/prototypes/template-homepage/useDashpageSuggestionModule.ts b/src/prototypes/template-homepage/useDashpageSuggestionModule.ts
index 0f0846a..e1557ac 100644
--- a/src/prototypes/template-homepage/useDashpageSuggestionModule.ts
+++ b/src/prototypes/template-homepage/useDashpageSuggestionModule.ts
@@ -4,7 +4,10 @@ import { useConfig } from '@/composables/useConfig'
 import {
   DASHPAGE_MORELIKE_SEED_COUNT,
   DASHPAGE_SUGGESTION_FALLBACK_PAGE,
+  DASHPAGE_SUGGESTION_MAX_TRIED_PAGES,
+  DASHPAGE_SUGGESTION_MIN_QUEUE,
   DASHPAGE_SUGGESTION_MORELIKE_MAX,
+  DASHPAGE_SUGGESTION_MORELIKE_SUPPLEMENT_MAX,
   DASHPAGE_SUGGESTION_POOL_MAX,
   dashpageSuggestionUserKey,
   getDashpageSuggestionModuleCache,
@@ -29,10 +32,12 @@ import {
   changeSizeForSuggestionType,
   editUrlForSuggestionCard,
   getCachedRun,
+  isEligibleSuggestionCard,
   pickRandomSuggestion,
   runVeSuggestionsPipeline,
   shouldShowSnippet,
   type SuggestionCardData,
+  type SuggestionDescriptionPart,
 } from '@/lib/ve-suggestions'
 
 const wiki = createVeSuggestionsWiki('dashpage-suggestion-mode')
@@ -47,7 +52,11 @@ export interface SuggestionQueueItem {
 }
 
 function filterDashpageSuggestions(cards: SuggestionCardData[]): SuggestionCardData[] {
-  return cards.filter((card) => !DASHPAGE_EXCLUDED_SUGGESTION_TYPES.has(card.suggestionType))
+  return cards.filter(
+    (card) =>
+      !DASHPAGE_EXCLUDED_SUGGESTION_TYPES.has(card.suggestionType) &&
+      isEligibleSuggestionCard(card),
+  )
 }
 
 function pageNeedsVeRefresh(pageTitle: string, forceRefresh: boolean): boolean {
@@ -84,6 +93,7 @@ function queueItemToBind(item: SuggestionQueueItem): SuggestionModeModuleBind {
     thumbnailSrc: item.pagePreview.thumbnailSrc,
     taskTypeLabel: item.card.heading,
     taskHeading: item.card.heading,
+    taskDescriptionParts: item.card.descriptionParts,
     taskDifficulty,
     taskTimeEstimate: timeEstimateForDifficulty(taskDifficulty),
     showSnippet,
@@ -101,6 +111,7 @@ export interface SuggestionModeModuleBind {
   taskHeading?: string
   taskTimeEstimate?: string
   taskDescription?: string
+  taskDescriptionParts?: SuggestionDescriptionPart[]
   showSnippet?: boolean
   snippetHtml?: string
   loadPending?: boolean
@@ -184,6 +195,34 @@ async function collectSuggestionsForPages(
   return items
 }
 
+async function fetchMorelikePicks(
+  seedTitles: string[],
+  excludeTitles: string[],
+  limit: number,
+  signal: AbortSignal,
+  recordPipelineError: (message: string) => void,
+): Promise<string[]> {
+  try {
+    return await fetchMorelikePageTitles(seedTitles, {
+      limit,
+      excludeTitles,
+      signal,
+    })
+  } catch (caught) {
+    if (caught instanceof FetchMorelikePageTitlesError && caught.code === 'aborted') {
+      throw caught
+    }
+    const message =
+      caught instanceof FetchMorelikePageTitlesError
+        ? caught.message
+        : caught instanceof Error
+          ? caught.message
+          : String(caught)
+    recordPipelineError(message)
+    return []
+  }
+}
+
 function previewFromQueue(
   queue: SuggestionQueueItem[],
   index: number,
@@ -332,6 +371,8 @@ export function useDashpageSuggestionModule(): {
 
       if (signal.aborted) return
 
+      const triedPageTitles = [...poolPagePicks]
+
       const seedTitles = pickUpToRandomPages(
         portfolioPool,
         DASHPAGE_MORELIKE_SEED_COUNT,
@@ -339,25 +380,23 @@ export function useDashpageSuggestionModule(): {
 
       let morelikePagePicks: string[] = []
       try {
-        morelikePagePicks = await fetchMorelikePageTitles(seedTitles, {
-          limit: DASHPAGE_SUGGESTION_MORELIKE_MAX,
-          excludeTitles: [...excludeTitles, ...poolPagePicks, ...seedTitles],
+        morelikePagePicks = await fetchMorelikePicks(
+          seedTitles,
+          [...excludeTitles, ...triedPageTitles, ...seedTitles],
+          DASHPAGE_SUGGESTION_MORELIKE_MAX,
           signal,
-        })
+          recordPipelineError,
+        )
       } catch (caught) {
         if (caught instanceof FetchMorelikePageTitlesError && caught.code === 'aborted') {
           return
         }
-        const message =
-          caught instanceof FetchMorelikePageTitlesError
-            ? caught.message
-            : caught instanceof Error
-              ? caught.message
-              : String(caught)
-        recordPipelineError(message)
+        throw caught
       }
 
-      const morelikeItems = await collectSuggestionsForPages(
+      triedPageTitles.push(...morelikePagePicks)
+
+      let morelikeItems = await collectSuggestionsForPages(
         morelikePagePicks,
         forceRefresh,
         signal,
@@ -366,6 +405,48 @@ export function useDashpageSuggestionModule(): {
 
       if (signal.aborted) return
 
+      const queueCount = poolItems.length + morelikeItems.length
+      if (
+        queueCount < DASHPAGE_SUGGESTION_MIN_QUEUE &&
+        triedPageTitles.length < DASHPAGE_SUGGESTION_MAX_TRIED_PAGES
+      ) {
+        const supplementSeeds = pickUpToRandomPages(
+          portfolioPool,
+          DASHPAGE_MORELIKE_SEED_COUNT,
+          triedPageTitles,
+        )
+
+        let supplementPagePicks: string[] = []
+        try {
+          supplementPagePicks = await fetchMorelikePicks(
+            supplementSeeds,
+            [...excludeTitles, ...triedPageTitles, ...supplementSeeds],
+            DASHPAGE_SUGGESTION_MORELIKE_SUPPLEMENT_MAX,
+            signal,
+            recordPipelineError,
+          )
+        } catch (caught) {
+          if (caught instanceof FetchMorelikePageTitlesError && caught.code === 'aborted') {
+            return
+          }
+          throw caught
+        }
+
+        if (supplementPagePicks.length) {
+          morelikeItems = [
+            ...morelikeItems,
+            ...(await collectSuggestionsForPages(
+              supplementPagePicks,
+              forceRefresh,
+              signal,
+              recordPipelineError,
+            )),
+          ]
+        }
+      }
+
+      if (signal.aborted) return
+
       const nextQueue = shuffleQueue([...poolItems, ...morelikeItems])
       const queuePageTitles = nextQueue.map((item) => item.pageTitle)
 

From 45b61c1a1a146604e7d2ca415da8e8eb6f22d3c2 Mon Sep 17 00:00:00 2001
From: Lu Wilson <lu@todepond.com>
Date: Mon, 25 May 2026 22:46:23 +0200
Subject: [PATCH 09/21] go

---
 src/lib/ve-suggestions/veSuggestionCards.ts   | 156 +++++++++++++-----
 .../useDashpageSuggestionModule.ts            |  14 +-
 2 files changed, 131 insertions(+), 39 deletions(-)

diff --git a/src/lib/ve-suggestions/veSuggestionCards.ts b/src/lib/ve-suggestions/veSuggestionCards.ts
index bd87f6e..7ed62a2 100644
--- a/src/lib/ve-suggestions/veSuggestionCards.ts
+++ b/src/lib/ve-suggestions/veSuggestionCards.ts
@@ -19,6 +19,8 @@ export interface SuggestionCardData {
   rawSnippetWikitext: string
   renderedSnippetHtml: string
   cardLinkUrl: string
+  /** MediaWiki section index (0 = lead) for VisualEditor edit links. */
+  editSectionIndex?: number
   raw: FWVeSuggestionItem
   groupedSuggestions?: FWVeSuggestionItem[]
   diagnostics?: FWVeSuggestionResponse['diagnostics']
@@ -789,16 +791,20 @@ export function buildSectionRanges(source: string): SectionRange[] {
   return out
 }
 
-function resolveBestEffortCardLink(
-  wiki: FakeWiki,
-  pageTitle: string,
+function sectionIndexForOffset(sectionRanges: SectionRange[], offset: number): number | undefined {
+  const sectionIndex = sectionRanges.findIndex(
+    (range) => offset >= range.startOffset && offset < range.endOffset,
+  )
+  return sectionIndex >= 0 ? sectionIndex : undefined
+}
+
+function resolveSuggestionSection(
   context: DescriptionContext,
   sectionTitleMap: Map<string, string>,
   sectionRanges: SectionRange[],
   pageSource: string,
   rawSnippet: string,
-): string {
-  const baseUrl = wiki.getPageUrl(pageTitle)
+): { sectionTitle?: string; editSectionIndex?: number } {
   const suggestionData = context.suggestion.data as Record<string, unknown> | undefined
   const candidateData = context.selectedCandidate?.data as Record<string, unknown> | undefined
   const sectionHintRaw =
@@ -808,20 +814,28 @@ function resolveBestEffortCardLink(
     (typeof candidateData?.sectionTitle === 'string' && candidateData.sectionTitle) ||
     ''
   const sectionHint = sectionHintRaw.trim()
-  if (sectionHint && sectionHint.toLowerCase() !== 'lead') {
+  if (sectionHint) {
+    if (sectionHint.toLowerCase() === 'lead') {
+      return { editSectionIndex: 0 }
+    }
     const exactSectionTitle = sectionTitleMap.get(sectionHint.toLowerCase()) ?? sectionHint
-    const hash = toSectionHash(exactSectionTitle)
-    return hash ? `${baseUrl}#${hash}` : baseUrl
+    const sectionIndex = sectionRanges.findIndex(
+      (range) => range.title.toLowerCase() === exactSectionTitle.toLowerCase(),
+    )
+    if (sectionIndex >= 0) {
+      return { sectionTitle: exactSectionTitle, editSectionIndex: sectionIndex }
+    }
+    return { sectionTitle: exactSectionTitle }
   }
   if (rawSnippet && pageSource && sectionRanges.length > 0) {
     const exactOffset = pageSource.indexOf(rawSnippet)
     if (exactOffset >= 0) {
-      const section = sectionRanges.find(
-        (range) => exactOffset >= range.startOffset && exactOffset < range.endOffset,
-      )
-      if (section?.title) {
-        const hash = toSectionHash(section.title)
-        if (hash) return `${baseUrl}#${hash}`
+      const editSectionIndex = sectionIndexForOffset(sectionRanges, exactOffset)
+      if (editSectionIndex != null) {
+        const sectionTitle = sectionRanges[editSectionIndex]?.title
+        return sectionTitle ?
+            { sectionTitle, editSectionIndex }
+          : { editSectionIndex }
       }
     }
   }
@@ -832,31 +846,82 @@ function resolveBestEffortCardLink(
       const compactOffset = compactSource.indexOf(compactSnippet)
       if (compactOffset >= 0 && compactSource.length > 0) {
         const approxOffset = Math.floor((compactOffset / compactSource.length) * pageSource.length)
-        const section = sectionRanges.find(
-          (range) => approxOffset >= range.startOffset && approxOffset < range.endOffset,
-        )
-        if (section?.title) {
-          const hash = toSectionHash(section.title)
-          if (hash) return `${baseUrl}#${hash}`
+        const editSectionIndex = sectionIndexForOffset(sectionRanges, approxOffset)
+        if (editSectionIndex != null) {
+          const sectionTitle = sectionRanges[editSectionIndex]?.title
+          return sectionTitle ?
+              { sectionTitle, editSectionIndex }
+            : { editSectionIndex }
         }
       }
     }
   }
-  return baseUrl
+  return {}
+}
+
+function resolveBestEffortCardLink(
+  wiki: FakeWiki,
+  pageTitle: string,
+  context: DescriptionContext,
+  sectionTitleMap: Map<string, string>,
+  sectionRanges: SectionRange[],
+  pageSource: string,
+  rawSnippet: string,
+): { cardLinkUrl: string; editSectionIndex?: number } {
+  const baseUrl = wiki.getPageUrl(pageTitle)
+  const resolved = resolveSuggestionSection(
+    context,
+    sectionTitleMap,
+    sectionRanges,
+    pageSource,
+    rawSnippet,
+  )
+  if (resolved.sectionTitle) {
+    const hash = toSectionHash(resolved.sectionTitle)
+    return {
+      cardLinkUrl: hash ? `${baseUrl}#${hash}` : baseUrl,
+      editSectionIndex: resolved.editSectionIndex,
+    }
+  }
+  if (resolved.editSectionIndex != null) {
+    return { cardLinkUrl: baseUrl, editSectionIndex: resolved.editSectionIndex }
+  }
+  return { cardLinkUrl: baseUrl }
+}
+
+function sectionIndexFromCardLinkUrl(
+  cardLinkUrl: string,
+  pageSource: string,
+): number | undefined {
+  const hashIndex = cardLinkUrl.indexOf('#')
+  if (hashIndex < 0) return undefined
+
+  const fragment = decodeURIComponent(cardLinkUrl.slice(hashIndex + 1)).replace(/_/g, ' ')
+  if (!fragment.trim()) return undefined
+
+  const sectionRanges = buildSectionRanges(pageSource)
+  const sectionIndex = sectionRanges.findIndex(
+    (range) => range.title.toLowerCase() === fragment.trim().toLowerCase(),
+  )
+  return sectionIndex >= 0 ? sectionIndex : undefined
 }
 
 export function editUrlForSuggestionCard(
   wiki: FakeWiki,
   pageTitle: string,
   card: SuggestionCardData,
+  pageSource?: string,
 ): string {
-  const hashIndex = card.cardLinkUrl.indexOf('#')
-  if (hashIndex >= 0) {
-    const fragment = decodeURIComponent(card.cardLinkUrl.slice(hashIndex + 1))
-    const sectionTitle = fragment.replace(/_/g, ' ')
-    return wiki.getEditUrl(pageTitle, sectionTitle)
+  let sectionIndex = card.editSectionIndex
+  if (sectionIndex == null && pageSource) {
+    sectionIndex = sectionIndexFromCardLinkUrl(card.cardLinkUrl, pageSource)
+  }
+
+  const params = `title=${wiki.encodeForUrl(pageTitle)}&action=edit&veaction=edit`
+  if (sectionIndex != null && sectionIndex >= 0) {
+    return `${wiki.base}w/index.php?${params}&section=${sectionIndex}`
   }
-  return wiki.getEditUrl(pageTitle)
+  return `${wiki.base}w/index.php?${params}`
 }
 
 function snippetCacheKey(pageTitle: string, snippet: string): string {
@@ -983,6 +1048,15 @@ export async function buildSuggestionCard(
     display.description(context, wiki),
   )
   const renderedSnippetHtml = await renderSnippetHtml(wiki, pageTitle, rawSnippet, snippetHtmlCache)
+  const { cardLinkUrl, editSectionIndex } = resolveBestEffortCardLink(
+    wiki,
+    pageTitle,
+    context,
+    sectionTitleMap,
+    sectionRanges,
+    pageSource,
+    rawSnippet,
+  )
 
   return {
     cardId: `${methodName}-${suggestion.id}-${index}`,
@@ -993,15 +1067,8 @@ export async function buildSuggestionCard(
     descriptionParts,
     rawSnippetWikitext: rawSnippet,
     renderedSnippetHtml,
-    cardLinkUrl: resolveBestEffortCardLink(
-      wiki,
-      pageTitle,
-      context,
-      sectionTitleMap,
-      sectionRanges,
-      pageSource,
-      rawSnippet,
-    ),
+    cardLinkUrl,
+    editSectionIndex,
     raw: suggestion,
     diagnostics: response.diagnostics,
     responseMeta: {
@@ -1040,6 +1107,20 @@ export function buildFallbackCard(
     : undefined
   const renderedSnippetHtml =
     cachedHtml && cachedHtml !== rawSnippet ? stripLinksFromSnippetHtml(cachedHtml) : ''
+  const sectionTitleMap = pageSource ? buildSectionTitleMap(pageSource) : new Map<string, string>()
+  const sectionRanges = pageSource ? buildSectionRanges(pageSource) : []
+  const { cardLinkUrl, editSectionIndex } =
+    pageSource ?
+      resolveBestEffortCardLink(
+        wiki,
+        pageTitle,
+        context,
+        sectionTitleMap,
+        sectionRanges,
+        pageSource,
+        rawSnippet,
+      )
+    : { cardLinkUrl: wiki.getPageUrl(response.pageTitle) }
 
   return {
     cardId: `${methodName}-${suggestion.id}-${index}`,
@@ -1050,7 +1131,8 @@ export function buildFallbackCard(
     descriptionParts,
     rawSnippetWikitext: rawSnippet,
     renderedSnippetHtml,
-    cardLinkUrl: wiki.getPageUrl(response.pageTitle),
+    cardLinkUrl,
+    editSectionIndex,
     raw: suggestion,
     diagnostics: response.diagnostics,
     responseMeta: {
diff --git a/src/prototypes/template-homepage/useDashpageSuggestionModule.ts b/src/prototypes/template-homepage/useDashpageSuggestionModule.ts
index e1557ac..611a1bc 100644
--- a/src/prototypes/template-homepage/useDashpageSuggestionModule.ts
+++ b/src/prototypes/template-homepage/useDashpageSuggestionModule.ts
@@ -147,7 +147,12 @@ function buildQueueFromPages(
       pageTitle,
       card,
       pagePreview,
-      editHref: editUrlForSuggestionCard(wiki, pageTitle, card),
+      editHref: editUrlForSuggestionCard(
+        wiki,
+        pageTitle,
+        card,
+        veRun?.pageSource,
+      ),
     })
   }
 
@@ -188,7 +193,12 @@ async function collectSuggestionsForPages(
       pageTitle,
       card,
       pagePreview: {},
-      editHref: editUrlForSuggestionCard(wiki, pageTitle, card),
+      editHref: editUrlForSuggestionCard(
+        wiki,
+        pageTitle,
+        card,
+        getCachedRun(pageTitle)?.pageSource,
+      ),
     })
   }
 

From 7009d3323a582d76782d487956c709b4941affac Mon Sep 17 00:00:00 2001
From: Lu Wilson <lu@todepond.com>
Date: Mon, 25 May 2026 22:52:49 +0200
Subject: [PATCH 10/21] theme overrides

---
 src/components/PrototypeUserSettingsPanel.vue | 11 ++-
 src/composables/useConfig.ts                  |  8 ++
 src/lib/config.ts                             |  8 +-
 src/lib/theming.ts                            | 83 ++++++++++++++-----
 src/main.ts                                   |  2 +
 5 files changed, 91 insertions(+), 21 deletions(-)

diff --git a/src/components/PrototypeUserSettingsPanel.vue b/src/components/PrototypeUserSettingsPanel.vue
index 84c9c30..d07b540 100644
--- a/src/components/PrototypeUserSettingsPanel.vue
+++ b/src/components/PrototypeUserSettingsPanel.vue
@@ -4,9 +4,10 @@ import { computed } from 'vue'
 import { CdxButton, CdxSelect, CdxTextInput } from '@wikimedia/codex'
 
 import { useConfig } from '@/composables/useConfig'
-import { CONFIG_USER_MENU_ITEMS, formatPageList, parsePageList } from '@/lib/config'
+import { CONFIG_THEME_MENU_ITEMS, CONFIG_USER_MENU_ITEMS, formatPageList, parsePageList } from '@/lib/config'
 
 const {
+  theme,
   user,
   realUsername,
   currentUserPageLists,
@@ -32,6 +33,14 @@ const editedPagesText = computed({
 
 <template>
   <div class="prototype-user-settings-panel">
+    <label class="prototype-user-settings-panel__field">
+      <span class="prototype-user-settings-panel__label">Theme</span>
+      <CdxSelect
+        v-model:selected="theme"
+        :menu-items="CONFIG_THEME_MENU_ITEMS"
+        default-label="Light"
+      />
+    </label>
     <label class="prototype-user-settings-panel__field">
       <span class="prototype-user-settings-panel__label">User</span>
       <CdxSelect
diff --git a/src/composables/useConfig.ts b/src/composables/useConfig.ts
index 71f788b..5784562 100644
--- a/src/composables/useConfig.ts
+++ b/src/composables/useConfig.ts
@@ -12,6 +12,7 @@ import {
   type PageListKey,
   type UserPageLists,
 } from '@/lib/config'
+import { applyThemePreference } from '@/lib/theming'
 
 const config = ref<Config>(loadConfig())
 
@@ -23,6 +24,13 @@ watch(
   { deep: true },
 )
 
+watch(
+  () => config.value.theme,
+  (preference) => {
+    applyThemePreference(preference)
+  },
+)
+
 export function useConfig(): {
   config: DeepReadonly<Ref<Config>>
   theme: Ref<ConfigTheme>
diff --git a/src/lib/config.ts b/src/lib/config.ts
index fc747b9..b12c9e1 100644
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -57,7 +57,7 @@ export const DEFAULT_USER_PAGE_LISTS: Record<ConfigUser, UserPageLists> = {
 }
 
 export const DEFAULT_CONFIG: Config = {
-  theme: 'system',
+  theme: 'light',
   user: 'new',
   realUsername: '',
   userPageLists: cloneUserPageListsMap(DEFAULT_USER_PAGE_LISTS),
@@ -76,6 +76,12 @@ export const CONFIG_USER_MENU_ITEMS: { value: ConfigUser; label: string }[] = [
   { value: 'real', label: 'Real user' },
 ]
 
+export const CONFIG_THEME_MENU_ITEMS: { value: ConfigTheme; label: string }[] = [
+  { value: 'light', label: 'Light' },
+  { value: 'dark', label: 'Dark' },
+  { value: 'system', label: 'System' },
+]
+
 /** Normalize a Wikipedia username for API calls and cache keys. */
 export function normalizeWikiUsername(raw: string): string {
   const trimmed = raw.trim()
diff --git a/src/lib/theming.ts b/src/lib/theming.ts
index 1f4d86b..b662ad6 100644
--- a/src/lib/theming.ts
+++ b/src/lib/theming.ts
@@ -3,6 +3,8 @@ import { ref, type ComputedRef, type InjectionKey, type Ref } from 'vue'
 import lightTokensRaw from '@wikimedia/codex-design-tokens/theme-wikimedia-ui.css?raw'
 import darkTokensRaw from '@wikimedia/codex-design-tokens/theme-wikimedia-ui-mode-dark.css?raw'
 
+import { loadConfig, type ConfigTheme } from '@/lib/config'
+
 export type Skin = 'desktop' | 'mobile'
 export type Theme = 'light' | 'dark'
 
@@ -68,6 +70,11 @@ function injectThemedTokens(): void {
 export const globalSkin: Ref<Skin> = ref<Skin>('desktop')
 export const globalTheme: Ref<Theme> = ref<Theme>('light')
 
+let themeUrlPinned = false
+let themePreference: ConfigTheme = 'light'
+let colorSchemeMql: MediaQueryList | null = null
+let onColorSchemeChange: ((event: MediaQueryListEvent) => void) | null = null
+
 function readUrlParam(name: string): string | null {
   if (typeof window === 'undefined') return null
   const params = new URLSearchParams(window.location.search)
@@ -114,6 +121,59 @@ function syncWikiSkinNightClass(theme: Theme): void {
   document.documentElement.classList.toggle(WIKI_SKIN_NIGHT_CLASS, theme === 'dark')
 }
 
+function resolveEffectiveTheme(preference: ConfigTheme): Theme {
+  const themeParam = readUrlParam('theme')
+  if (isTheme(themeParam)) return themeParam
+  if (preference === 'light') return 'light'
+  if (preference === 'dark') return 'dark'
+  return resolveThemeFromMedia()
+}
+
+function applyGlobalTheme(theme: Theme): void {
+  globalTheme.value = theme
+  setHtmlAttribute('data-theme', theme)
+  syncWikiSkinNightClass(theme)
+}
+
+function teardownColorSchemeListener(): void {
+  if (colorSchemeMql && onColorSchemeChange) {
+    colorSchemeMql.removeEventListener('change', onColorSchemeChange)
+  }
+  colorSchemeMql = null
+  onColorSchemeChange = null
+}
+
+function setupColorSchemeListener(): void {
+  if (typeof window === 'undefined' || !window.matchMedia) return
+
+  teardownColorSchemeListener()
+
+  colorSchemeMql = window.matchMedia('(prefers-color-scheme: dark)')
+  onColorSchemeChange = (event: MediaQueryListEvent) => {
+    if (themeUrlPinned || themePreference !== 'system') return
+    const next: Theme = event.matches ? 'dark' : 'light'
+    if (next !== globalTheme.value) {
+      applyGlobalTheme(next)
+    }
+  }
+  colorSchemeMql.addEventListener('change', onColorSchemeChange)
+}
+
+/**
+ * Apply a stored theme preference (light / dark / system) to the global
+ * document theme. URL `?theme=` still wins when present.
+ */
+export function applyThemePreference(preference: ConfigTheme): void {
+  themePreference = preference
+  applyGlobalTheme(resolveEffectiveTheme(preference))
+
+  if (!themeUrlPinned && preference === 'system') {
+    setupColorSchemeListener()
+  } else {
+    teardownColorSchemeListener()
+  }
+}
+
 /**
  * Resolve and apply the initial skin / theme on <html>, then subscribe to
  * viewport and prefers-color-scheme changes so the global state stays
@@ -121,7 +181,7 @@ function syncWikiSkinNightClass(theme: Theme): void {
  *
  * Order of precedence:
  *   skin  : ?skin=  URL param  >  viewport (>= 640px desktop, else mobile)
- *   theme : ?theme= URL param  >  prefers-color-scheme
+ *   theme : ?theme= URL param  >  config preference  >  prefers-color-scheme
  *
  * Call this once, before mounting the app.
  */
@@ -134,14 +194,12 @@ export function initTheming(): void {
   const themeParam = readUrlParam('theme')
 
   const skinPinned = isSkin(skinParam)
-  const themePinned = isTheme(themeParam)
+  themeUrlPinned = isTheme(themeParam)
 
   globalSkin.value = skinPinned ? (skinParam as Skin) : resolveSkinFromViewport()
-  globalTheme.value = themePinned ? (themeParam as Theme) : resolveThemeFromMedia()
-
   setHtmlAttribute('data-skin', globalSkin.value)
-  setHtmlAttribute('data-theme', globalTheme.value)
-  syncWikiSkinNightClass(globalTheme.value)
+
+  applyThemePreference(loadConfig().theme)
 
   if (!skinPinned) {
     const breakpoint = window.matchMedia(`(min-width: ${DESKTOP_MIN_WIDTH}px)`)
@@ -154,17 +212,4 @@ export function initTheming(): void {
     }
     breakpoint.addEventListener('change', onBreakpointChange)
   }
-
-  if (!themePinned) {
-    const colorScheme = window.matchMedia('(prefers-color-scheme: dark)')
-    const onColorSchemeChange = (event: MediaQueryListEvent | MediaQueryList) => {
-      const next: Theme = event.matches ? 'dark' : 'light'
-      if (next !== globalTheme.value) {
-        globalTheme.value = next
-        setHtmlAttribute('data-theme', next)
-        syncWikiSkinNightClass(next)
-      }
-    }
-    colorScheme.addEventListener('change', onColorSchemeChange)
-  }
 }
diff --git a/src/main.ts b/src/main.ts
index a46d838..4e2e8f1 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -14,6 +14,8 @@ import './styles/dark.css'
 import { syncGithubPagesPreviewRoute } from './lib/githubPagesPreviewRoute'
 import { initTheming } from './lib/theming'
 
+import '@/composables/useConfig'
+
 initTheming()
 
 const router = createRouter({

From 91922d823fc3fee48a2c4755ef7c884dd7d8d042 Mon Sep 17 00:00:00 2001
From: Lu Wilson <lu@todepond.com>
Date: Tue, 26 May 2026 00:50:15 +0200
Subject: [PATCH 11/21] GO

---
 package-lock.json                             |   2 +-
 package.json                                  |   2 +-
 .../probe-dashpage-recent-changes-signals.ts  |  62 ++
 src/composables/useRealUserImpact.ts          |  36 +-
 src/lib/dashpageLoadState.ts                  |   8 +
 src/lib/dashpageRecentChangesCache.ts         |  75 +++
 src/lib/dashpageRecentChangesConstants.ts     |  30 +
 src/lib/dashpageRecentChangesProgress.ts      |  29 +
 src/lib/dashpageRecentChangesSignals.ts       | 512 +++++++++++++++
 src/lib/dashpageRecentChangesTypes.ts         |  43 ++
 src/lib/fetchArticleQualityScore.ts           |  44 ++
 src/lib/fetchDashpageRecentChanges.ts         | 592 ++++++++++++++++++
 src/lib/fetchUserImpact.ts                    |  74 ++-
 src/lib/formatDashpageEditSummaryHtml.ts      |  54 ++
 src/lib/formatDashpageEditSummaryPlain.ts     |  43 ++
 .../stripEmptyLeadingDashpageAutocomment.ts   |   8 +
 src/lib/ve-suggestions/veSuggestionCards.ts   |  20 +-
 .../template-homepage/ImpactModule.vue        |  15 +-
 .../RecentChangesFeedItem.vue                 | 232 +++++++
 .../template-homepage/RecentChangesModule.vue | 229 +++++++
 .../template-homepage/RecentChangesView.vue   |  82 +++
 .../template-homepage/SuggestedEditsView.vue  |  11 +-
 .../SuggestionModeModule.vue                  |  18 +-
 .../template-homepage/dashpage-fixtures.ts    |   6 +-
 .../template-homepage/impact/index.vue        |  18 +-
 src/prototypes/template-homepage/index.vue    |  40 +-
 .../template-homepage/recent-changes-feed.css | 432 +++++++++++++
 .../recent-changes/index.vue                  | 115 ++++
 .../suggested-edits/index.vue                 |   2 +-
 .../useDashpageRecentChangesModule.ts         | 248 ++++++++
 .../template-homepage/useDashpageSettings.ts  |   7 +-
 .../useDashpageSuggestionModule.ts            | 157 ++++-
 .../template-homepage/useHomepageImpact.ts    |  59 +-
 33 files changed, 3180 insertions(+), 125 deletions(-)
 create mode 100644 scripts/probe-dashpage-recent-changes-signals.ts
 create mode 100644 src/lib/dashpageLoadState.ts
 create mode 100644 src/lib/dashpageRecentChangesCache.ts
 create mode 100644 src/lib/dashpageRecentChangesConstants.ts
 create mode 100644 src/lib/dashpageRecentChangesProgress.ts
 create mode 100644 src/lib/dashpageRecentChangesSignals.ts
 create mode 100644 src/lib/dashpageRecentChangesTypes.ts
 create mode 100644 src/lib/fetchArticleQualityScore.ts
 create mode 100644 src/lib/fetchDashpageRecentChanges.ts
 create mode 100644 src/lib/formatDashpageEditSummaryHtml.ts
 create mode 100644 src/lib/formatDashpageEditSummaryPlain.ts
 create mode 100644 src/lib/stripEmptyLeadingDashpageAutocomment.ts
 create mode 100644 src/prototypes/template-homepage/RecentChangesFeedItem.vue
 create mode 100644 src/prototypes/template-homepage/RecentChangesModule.vue
 create mode 100644 src/prototypes/template-homepage/RecentChangesView.vue
 create mode 100644 src/prototypes/template-homepage/recent-changes-feed.css
 create mode 100644 src/prototypes/template-homepage/recent-changes/index.vue
 create mode 100644 src/prototypes/template-homepage/useDashpageRecentChangesModule.ts

diff --git a/package-lock.json b/package-lock.json
index 72c5f42..982ded4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
         "@wikimedia/codex": "^2.5.1",
         "@wikimedia/codex-design-tokens": "^2.5.1",
         "@wikimedia/codex-icons": "^2.5.1",
-        "fakewiki": "0.0.13",
+        "fakewiki": "^0.0.13",
         "vue": "^3.5.13",
         "vue-router": "^4.5.0"
       },
diff --git a/package.json b/package.json
index 952f2a7..d16dd22 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     "@wikimedia/codex": "^2.5.1",
     "@wikimedia/codex-design-tokens": "^2.5.1",
     "@wikimedia/codex-icons": "^2.5.1",
-    "fakewiki": "0.0.13",
+    "fakewiki": "^0.0.13",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },
diff --git a/scripts/probe-dashpage-recent-changes-signals.ts b/scripts/probe-dashpage-recent-changes-signals.ts
new file mode 100644
index 0000000..66a7488
--- /dev/null
+++ b/scripts/probe-dashpage-recent-changes-signals.ts
@@ -0,0 +1,62 @@
+#!/usr/bin/env npx tsx
+/**
+ * Probe language-agnostic articlequality score deltas for recent edits.
+ * Run: npx tsx scripts/probe-dashpage-recent-changes-signals.ts
+ */
+
+import { createDashpageRecentChangesWiki } from '../src/lib/fetchDashpageRecentChanges'
+import { fetchArticleQualityScore } from '../src/lib/fetchArticleQualityScore'
+import { DASHPAGE_RC_API_USER_AGENT } from '../src/lib/dashpageRecentChangesConstants'
+
+async function sleep(ms: number): Promise<void> {
+  await new Promise((resolve) => setTimeout(resolve, ms))
+}
+
+async function main(): Promise<void> {
+  const wiki = createDashpageRecentChangesWiki()
+  const deltas: number[] = []
+
+  console.log('Fetching recent changes (needs review)…')
+  const rc = await wiki.getRecentChanges({ limit: 12, onlyNeedsReview: true })
+
+  for (const rev of rc.revisions) {
+    if (!rev.id || !rev.pageName || rev.pageName.includes(':')) continue
+
+    const parentId = await wiki.getParentRevisionId(rev.pageName, rev.id)
+    if (parentId == null || parentId <= 0) continue
+
+    const before = await fetchArticleQualityScore(parentId, 'en', DASHPAGE_RC_API_USER_AGENT)
+    await sleep(300)
+    const after = await fetchArticleQualityScore(rev.id, 'en', DASHPAGE_RC_API_USER_AGENT)
+    await sleep(300)
+
+    if (before && after) {
+      const delta = after.score - before.score
+      deltas.push(delta)
+      console.log(
+        `rev ${rev.id} (${rev.pageName}): before=${before.score.toFixed(4)} after=${after.score.toFixed(4)} delta=${delta.toFixed(4)}`,
+      )
+    }
+  }
+
+  if (!deltas.length) {
+    console.log('No deltas collected — keeping default threshold 0.03')
+    return
+  }
+
+  const absDeltas = deltas.map(Math.abs).sort((a, b) => a - b)
+  const median = absDeltas[Math.floor(absDeltas.length / 2)] ?? 0
+  const p75 = absDeltas[Math.floor(absDeltas.length * 0.75)] ?? median
+  const suggested = Math.max(0.02, Math.min(0.05, Math.round(p75 * 100) / 100))
+
+  console.log('\nSummary:')
+  console.log(`  samples: ${deltas.length}`)
+  console.log(`  |delta| median: ${median.toFixed(4)}`)
+  console.log(`  |delta| p75: ${p75.toFixed(4)}`)
+  console.log(`  suggested display threshold (sprinthackular uses ${1e-6}): any delta > 0`)
+}
+
+main().catch((error) => {
+  console.error(error)
+  process.exit(1)
+})
diff --git a/src/composables/useRealUserImpact.ts b/src/composables/useRealUserImpact.ts
index 83d8b87..0b1e8f5 100644
--- a/src/composables/useRealUserImpact.ts
+++ b/src/composables/useRealUserImpact.ts
@@ -5,34 +5,58 @@ import { getCachedImpact, setCachedImpact } from '@/lib/impactCache'
 import { FetchUserImpactError, fetchUserImpact } from '@/lib/fetchUserImpact'
 import { EMPTY_IMPACT_DATA, type ImpactData } from '@/lib/impactTypes'
 
+function impactHasRenderableData(data: ImpactData): boolean {
+  return (
+    (data.totalEdits ?? 0) > 0 ||
+    !!data.lastEdited ||
+    !!data.viewCount ||
+    (data.recentActivityData ?? []).some((value) => value > 0)
+  )
+}
+
 export function useRealUserImpact(usernameSource: Ref<string> | ComputedRef<string>): {
   impactProps: ComputedRef<ImpactData>
   loading: Ref<boolean>
   error: Ref<string | null>
   refresh: () => Promise<void>
   hasCache: ComputedRef<boolean>
+  hasStarted: ComputedRef<boolean>
+  hasRenderableData: ComputedRef<boolean>
   lastFetchedAt: Ref<number | null>
   editedPageTitles: Ref<string[]>
 } {
   const impactData = ref<ImpactData>({ ...EMPTY_IMPACT_DATA })
   const loading = ref(false)
   const error = ref<string | null>(null)
+  const hasStarted = ref(false)
   const lastFetchedAt = ref<number | null>(null)
   const editedPageTitles = ref<string[]>([])
 
   let abortController: AbortController | null = null
 
+  function mergeImpactPatch(patch: Partial<ImpactData>): void {
+    impactData.value = { ...impactData.value, ...patch }
+    if (patch.editedPageTitles) {
+      editedPageTitles.value = patch.editedPageTitles
+    }
+    if (!lastFetchedAt.value) {
+      lastFetchedAt.value = Date.now()
+    }
+  }
+
   function loadFromCache(raw: string): void {
     const cached = getCachedImpact(raw)
     if (cached) {
       impactData.value = { ...EMPTY_IMPACT_DATA, ...cached.data }
       lastFetchedAt.value = cached.fetchedAt
       editedPageTitles.value = cached.data.editedPageTitles ?? []
+      hasStarted.value = true
       return
     }
     impactData.value = { ...EMPTY_IMPACT_DATA }
     lastFetchedAt.value = null
     editedPageTitles.value = []
+    hasStarted.value = false
   }
 
   watch(
@@ -48,6 +72,8 @@ export function useRealUserImpact(usernameSource: Ref<string> | ComputedRef<stri
 
   const hasCache = computed(() => lastFetchedAt.value != null)
 
+  const hasRenderableData = computed(() => impactHasRenderableData(impactData.value))
+
   const impactProps = computed(() => impactData.value)
 
   async function refresh(): Promise<void> {
@@ -61,11 +87,17 @@ export function useRealUserImpact(usernameSource: Ref<string> | ComputedRef<stri
     abortController = new AbortController()
     const { signal } = abortController
 
+    hasStarted.value = true
     loading.value = true
     error.value = null
 
     try {
-      const data = await fetchUserImpact(name, { signal })
+      const data = await fetchUserImpact(name, {
+        signal,
+        onProgress: (patch) => {
+          mergeImpactPatch(patch)
+        },
+      })
       const entry = setCachedImpact(name, data)
       impactData.value = { ...EMPTY_IMPACT_DATA, ...data }
       lastFetchedAt.value = entry.fetchedAt
@@ -92,6 +124,8 @@ export function useRealUserImpact(usernameSource: Ref<string> | ComputedRef<stri
     error,
     refresh,
     hasCache,
+    hasStarted: computed(() => hasStarted.value),
+    hasRenderableData,
     lastFetchedAt,
     editedPageTitles,
   }
diff --git a/src/lib/dashpageLoadState.ts b/src/lib/dashpageLoadState.ts
new file mode 100644
index 0000000..473161b
--- /dev/null
+++ b/src/lib/dashpageLoadState.ts
@@ -0,0 +1,8 @@
+/** Shared load-state helper for dashpage live-fetch modules. */
+
+export function shouldShowDashpageLoadPrompt(
+  hasStarted: boolean,
+  hasRenderableData: boolean,
+): boolean {
+  return !hasStarted && !hasRenderableData
+}
diff --git a/src/lib/dashpageRecentChangesCache.ts b/src/lib/dashpageRecentChangesCache.ts
new file mode 100644
index 0000000..dd26233
--- /dev/null
+++ b/src/lib/dashpageRecentChangesCache.ts
@@ -0,0 +1,75 @@
+import { dashpageSuggestionUserKey } from '@/lib/dashpageSuggestionCache'
+import { DASHPAGE_RC_STORAGE_KEY } from '@/lib/dashpageRecentChangesConstants'
+import type { RecentChangeFeedItem } from '@/lib/dashpageRecentChangesTypes'
+
+export { dashpageSuggestionUserKey as dashpageRecentChangesUserKey }
+
+export interface DashpageRecentChangesCache {
+  fetchedAt: number
+  items: RecentChangeFeedItem[]
+}
+
+type ModuleStore = Record<string, DashpageRecentChangesCache>
+
+function readStore(): ModuleStore {
+  if (typeof window === 'undefined') return {}
+
+  try {
+    const raw = window.localStorage.getItem(DASHPAGE_RC_STORAGE_KEY)
+    if (!raw) return {}
+    const parsed: unknown = JSON.parse(raw)
+    if (typeof parsed !== 'object' || parsed === null) return {}
+    return parsed as ModuleStore
+  } catch {
+    return {}
+  }
+}
+
+function writeStore(store: ModuleStore): void {
+  if (typeof window === 'undefined') return
+
+  try {
+    window.localStorage.setItem(DASHPAGE_RC_STORAGE_KEY, JSON.stringify(store))
+  } catch {
+    // Quota or private-mode failures — ignore.
+  }
+}
+
+function isValidFeedItem(item: unknown): item is RecentChangeFeedItem {
+  if (typeof item !== 'object' || item === null) return false
+  const row = item as Record<string, unknown>
+  return (
+    typeof row.revId === 'number' &&
+    typeof row.pageTitle === 'string' &&
+    typeof row.userName === 'string' &&
+    typeof row.timestamp === 'string' &&
+    typeof row.diffUrl === 'string'
+  )
+}
+
+export function getDashpageRecentChangesCache(
+  userKey: string,
+): DashpageRecentChangesCache | null {
+  if (!userKey.length) return null
+
+  const entry = readStore()[userKey]
+  if (!entry || typeof entry.fetchedAt !== 'number' || !Array.isArray(entry.items)) {
+    return null
+  }
+
+  const items = entry.items.filter(isValidFeedItem)
+  if (!items.length) return null
+
+  return { fetchedAt: entry.fetchedAt, items }
+}
+
+export function setDashpageRecentChangesCache(
+  userKey: string,
+  cache: DashpageRecentChangesCache,
+): void {
+  if (!userKey.length) return
+
+  const store = readStore()
+  store[userKey] = cache
+  writeStore(store)
+}
diff --git a/src/lib/dashpageRecentChangesConstants.ts b/src/lib/dashpageRecentChangesConstants.ts
new file mode 100644
index 0000000..bd27d36
--- /dev/null
+++ b/src/lib/dashpageRecentChangesConstants.ts
@@ -0,0 +1,30 @@
+export const DASHPAGE_RC_STORAGE_KEY = 'protowiki-dashpage-recent-changes-v1'
+
+/** Homepage module preview row count. */
+export const DASHPAGE_RC_PREVIEW_MAX = 3
+/** Fullscreen feed cap (known + morelike + wildcard). */
+export const DASHPAGE_RC_FULLSCREEN_MAX = 10
+
+/** Portfolio pages probed for the user's known list. */
+export const DASHPAGE_RC_KNOWN_PAGES_MAX = 4
+/** Max feed items sourced from known portfolio pages. */
+export const DASHPAGE_RC_KNOWN_ITEMS_MAX = 4
+
+/** Morelike pages probed from known-page seeds. */
+export const DASHPAGE_RC_MORELIKE_PAGES_MAX = 4
+/** Max feed items sourced from morelike pages. */
+export const DASHPAGE_RC_MORELIKE_ITEMS_MAX = 4
+
+/** Risky edits from global recent changes (unknown pages). */
+export const DASHPAGE_RC_WILDCARD_MAX = 2
+
+/** RC API page size when a time-window wildcard query needs a fallback scan. */
+export const DASHPAGE_RC_WILDCARD_FALLBACK_LIMIT = 20
+
+/** Minimum half-width of a wildcard time window (ms). */
+export const DASHPAGE_RC_WILDCARD_MIN_WINDOW_MS = 60 * 60 * 1000
+
+export const DASHPAGE_RC_FALLBACK_PAGE = 'Wet Leg'
+
+export const DASHPAGE_RC_API_USER_AGENT =
+  'ProtoWiki/0.1 (https://github.com/wikimedia-research/protowiki) dashpage-recent-changes'
diff --git a/src/lib/dashpageRecentChangesProgress.ts b/src/lib/dashpageRecentChangesProgress.ts
new file mode 100644
index 0000000..01ec46e
--- /dev/null
+++ b/src/lib/dashpageRecentChangesProgress.ts
@@ -0,0 +1,29 @@
+import { ref } from 'vue'
+
+const viewedRevisionIds = ref<Set<number>>(new Set())
+
+function createDashpageRecentChangesProgress() {
+  function isRevisionViewed(revId: number): boolean {
+    return viewedRevisionIds.value.has(revId)
+  }
+
+  function markRevisionAsViewed(revId: number): void {
+    if (viewedRevisionIds.value.has(revId)) return
+    viewedRevisionIds.value = new Set([...viewedRevisionIds.value, revId])
+  }
+
+  return {
+    viewedRevisionIds,
+    isRevisionViewed,
+    markRevisionAsViewed,
+  }
+}
+
+let progressInstance: ReturnType<typeof createDashpageRecentChangesProgress> | null = null
+
+export function useDashpageRecentChangesProgress() {
+  if (!progressInstance) {
+    progressInstance = createDashpageRecentChangesProgress()
+  }
+  return progressInstance
+}
diff --git a/src/lib/dashpageRecentChangesSignals.ts b/src/lib/dashpageRecentChangesSignals.ts
new file mode 100644
index 0000000..0478a70
--- /dev/null
+++ b/src/lib/dashpageRecentChangesSignals.ts
@@ -0,0 +1,512 @@
+import type { FakeWiki } from 'fakewiki'
+import type { FWLiftWingPrediction, FWDiffLine } from 'fakewiki/types'
+
+import { fetchArticleQualityScore } from '@/lib/fetchArticleQualityScore'
+import { DASHPAGE_RC_API_USER_AGENT } from '@/lib/dashpageRecentChangesConstants'
+import type { RecentChangeFeedItem } from '@/lib/dashpageRecentChangesTypes'
+
+export const REVERT_RISK_THRESHOLDS = {
+  /** Yellow “elevated revert risk” band (sprinthackular ReviewChangesPlusFeed). */
+  upperLoose: 0.9,
+  /** Red “high revert risk” band — same bar as sprinthackular upperTight. */
+  upperTight: 0.9,
+} as const
+
+export const REFERENCE_NEED_DELTA_THRESHOLD = 0.01
+export const TONE_CHECK_THRESHOLD = 0.55
+/** Any score movement counts (sprinthackular THANKS_PATROL_ARTICLE_QUALITY_EPSILON). */
+export const ARTICLE_QUALITY_EPSILON = 1e-6
+
+export type RecentChangeFlagKind =
+  | 'revert-high'
+  | 'reference-high'
+  | 'reference-low'
+  | 'tone-issue'
+  | 'tone-improved'
+  | 'quality-up'
+  | 'quality-down'
+
+export type RecentChangePrimaryFlagTier =
+  | 'toneReference'
+  | 'revertHigh'
+  | 'revertWarn'
+  | 'qualityUp'
+  | 'qualityDown'
+  | null
+
+export type RecentChangeFlagChipVariant = 'progressive' | 'success' | 'warning' | 'destructive'
+
+export type RecentChangeFlagChipIcon =
+  | 'error'
+  | 'reference'
+  | 'check'
+  | 'alert'
+  | 'arrowUp'
+  | 'arrowDown'
+
+export interface RecentChangeFlagChip {
+  label: string
+  variant: RecentChangeFlagChipVariant
+  icon: RecentChangeFlagChipIcon
+}
+
+export interface RecentChangeStructuredDeltaSegment {
+  text: string
+  deltaClass: string
+}
+
+export interface RecentChangeFlag {
+  kind: RecentChangeFlagKind
+  label: string
+  description: string
+}
+
+export interface RevisionCandidate {
+  revId: number
+  parentRevId: number | null
+  pageTitle: string
+  userName: string
+  timestamp: string
+  comment: string
+  delta: number
+  source: 'portfolio' | 'wildcard'
+}
+
+export interface AnalyzedRevisionSignals {
+  revertRisk: number | null
+  referenceNeedBefore: number | null
+  referenceNeedAfter: number | null
+  referenceNeedDelta: number | null
+  tonePrediction: boolean | null
+  toneProbability: number | null
+  /** Standalone tone check on removed/changed-before snippets (Lift Wing with empty original_text). */
+  toneOriginalHadIssue: boolean | null
+  toneOriginalProbability: number | null
+  articleQualityBefore: number | null
+  articleQualityAfter: number | null
+  articleQualityDelta: number | null
+  flags: RecentChangeFlag[]
+  primaryFlag: RecentChangeFlag | null
+  primaryFlagTier: RecentChangePrimaryFlagTier
+}
+
+function revertRiskFromPrediction(pred: FWLiftWingPrediction | undefined): number | null {
+  const p = pred?.probability?.true
+  return typeof p === 'number' ? p : null
+}
+
+function extractChangedSnippetsFromDiff(
+  wiki: FakeWiki,
+  diff: FWDiffLine[],
+): { originalText: string; modifiedText: string } {
+  const originalParts: string[] = []
+  const modifiedParts: string[] = []
+
+  for (const line of diff ?? []) {
+    const text = line.text ?? ''
+    switch (line.type) {
+      case 1:
+        modifiedParts.push(text)
+        break
+      case 2:
+        originalParts.push(text)
+        break
+      case 3:
+      case 4:
+      case 5: {
+        const segments = wiki.getDiffLineSegments(line)
+        const oldParts: string[] = []
+        const newParts: string[] = []
+        for (const seg of segments) {
+          if (seg.type === 'remove') oldParts.push(seg.text)
+          else if (seg.type === 'add') newParts.push(seg.text)
+        }
+        const oldStr = oldParts.join('')
+        const newStr = newParts.join('')
+        if (oldStr || newStr) {
+          originalParts.push(oldStr)
+          modifiedParts.push(newStr)
+        } else if (text) {
+          modifiedParts.push(text)
+          originalParts.push('')
+        }
+        break
+      }
+      default:
+        break
+    }
+  }
+
+  return {
+    originalText: originalParts.join('\n'),
+    modifiedText: modifiedParts.join('\n'),
+  }
+}
+
+async function fetchToneSignals(
+  wiki: FakeWiki,
+  pageTitle: string,
+  revId: number,
+): Promise<
+  Pick<
+    AnalyzedRevisionSignals,
+    'tonePrediction' | 'toneProbability' | 'toneOriginalHadIssue' | 'toneOriginalProbability'
+  >
+> {
+  const empty = {
+    tonePrediction: null,
+    toneProbability: null,
+    toneOriginalHadIssue: null,
+    toneOriginalProbability: null,
+  }
+
+  const compare = await wiki.getDiffSource(pageTitle, revId)
+  const { originalText, modifiedText } = extractChangedSnippetsFromDiff(wiki, compare.diff ?? [])
+  if (!originalText && !modifiedText) return empty
+
+  const tone = await wiki.getToneCheckPrediction(originalText, modifiedText, { pageTitle })
+  if (!tone) return empty
+
+  const result = {
+    tonePrediction: tone.prediction === true,
+    toneProbability: typeof tone.probability === 'number' ? tone.probability : null,
+    toneOriginalHadIssue: null as boolean | null,
+    toneOriginalProbability: null as number | null,
+  }
+
+  // "Tone improved" requires removed text to have been flagged — not merely a clean edit.
+  if (
+    tone.prediction === false &&
+    (tone.probability ?? 0) >= TONE_CHECK_THRESHOLD &&
+    originalText.trim()
+  ) {
+    const beforeTone = await wiki.getToneCheckPrediction('', originalText, { pageTitle })
+    if (beforeTone && typeof beforeTone.probability === 'number') {
+      result.toneOriginalHadIssue = beforeTone.prediction === true
+      result.toneOriginalProbability = beforeTone.probability
+    }
+  }
+
+  return result
+}
+
+function buildFlags(signals: Omit<AnalyzedRevisionSignals, 'flags' | 'primaryFlag' | 'primaryFlagTier'>): RecentChangeFlag[] {
+  const flags: RecentChangeFlag[] = []
+
+  if (
+    signals.revertRisk != null &&
+    signals.revertRisk > REVERT_RISK_THRESHOLDS.upperLoose
+  ) {
+    flags.push({
+      kind: 'revert-high',
+      label: 'High revert risk.',
+      description: 'This edit has a high chance of getting undone.',
+    })
+  }
+
+  if (signals.referenceNeedDelta != null) {
+    if (signals.referenceNeedDelta >= REFERENCE_NEED_DELTA_THRESHOLD) {
+      flags.push({
+        kind: 'reference-high',
+        label: 'Reference issue.',
+        description: 'Citations might be needed.',
+      })
+    } else if (signals.referenceNeedDelta <= -REFERENCE_NEED_DELTA_THRESHOLD) {
+      flags.push({
+        kind: 'reference-low',
+        label: 'Reference improvement.',
+        description: 'Citations may have been improved.',
+      })
+    }
+  }
+
+  if (signals.tonePrediction === true && (signals.toneProbability ?? 0) >= TONE_CHECK_THRESHOLD) {
+    flags.push({
+      kind: 'tone-issue',
+      label: 'Tone issue.',
+      description: 'Might need revising to a more neutral tone.',
+    })
+  } else if (
+    signals.tonePrediction === false &&
+    (signals.toneProbability ?? 0) >= TONE_CHECK_THRESHOLD &&
+    signals.toneOriginalHadIssue === true &&
+    (signals.toneOriginalProbability ?? 0) >= TONE_CHECK_THRESHOLD
+  ) {
+    flags.push({
+      kind: 'tone-improved',
+      label: 'Tone improved.',
+      description: 'The edit may have improved neutral tone.',
+    })
+  }
+
+  if (signals.articleQualityDelta != null) {
+    if (signals.articleQualityDelta > ARTICLE_QUALITY_EPSILON) {
+      flags.push({
+        kind: 'quality-up',
+        label: 'Article quality ↑',
+        description: 'Language-agnostic quality score increased after this edit.',
+      })
+    } else if (signals.articleQualityDelta < -ARTICLE_QUALITY_EPSILON) {
+      flags.push({
+        kind: 'quality-down',
+        label: 'Article quality ↓',
+        description: 'Language-agnostic quality score decreased after this edit.',
+      })
+    }
+  }
+
+  return flags
+}
+
+function primaryFlagFromFlags(flags: RecentChangeFlag[]): RecentChangeFlag | null {
+  const priority: RecentChangeFlagKind[] = [
+    'revert-high',
+    'reference-high',
+    'tone-issue',
+    'tone-improved',
+    'reference-low',
+    'quality-down',
+    'quality-up',
+  ]
+  for (const kind of priority) {
+    const match = flags.find((f) => f.kind === kind)
+    if (match) return match
+  }
+  return null
+}
+
+export function primaryFlagTierFromKind(
+  kind: RecentChangeFlagKind | null,
+  revertRisk: number | null = null,
+): RecentChangePrimaryFlagTier {
+  if (!kind) return null
+  if (kind === 'revert-high') {
+    if (revertRisk != null && revertRisk > REVERT_RISK_THRESHOLDS.upperTight) {
+      return 'revertHigh'
+    }
+    if (revertRisk != null && revertRisk > REVERT_RISK_THRESHOLDS.upperLoose) {
+      return 'revertWarn'
+    }
+    return 'revertHigh'
+  }
+  if (kind === 'reference-high' || kind === 'tone-issue') {
+    return 'toneReference'
+  }
+  if (kind === 'quality-up') return 'qualityUp'
+  if (kind === 'quality-down') return 'qualityDown'
+  return null
+}
+
+const PRIMARY_FLAG_CHIP_BY_KIND: Record<RecentChangeFlagKind, RecentChangeFlagChip> = {
+  'revert-high': { label: 'High revert risk', variant: 'destructive', icon: 'error' },
+  'reference-high': { label: 'Reference issue', variant: 'warning', icon: 'reference' },
+  'reference-low': { label: 'Reference improved', variant: 'success', icon: 'check' },
+  'tone-issue': { label: 'Tone issue', variant: 'warning', icon: 'alert' },
+  'tone-improved': { label: 'Tone improved', variant: 'progressive', icon: 'arrowUp' },
+  'quality-up': { label: 'Article quality', variant: 'progressive', icon: 'arrowUp' },
+  'quality-down': { label: 'Article quality', variant: 'warning', icon: 'arrowDown' },
+}
+
+export function primaryFlagChipFromKind(
+  kind: RecentChangeFlagKind | null | undefined,
+): RecentChangeFlagChip | null {
+  if (!kind) return null
+  return PRIMARY_FLAG_CHIP_BY_KIND[kind] ?? null
+}
+
+export function analyzedSignalsToFeedPatch(
+  analyzed: AnalyzedRevisionSignals,
+): Partial<RecentChangeFeedItem> {
+  return {
+    revertRisk: analyzed.revertRisk,
+    referenceNeedDelta: analyzed.referenceNeedDelta,
+    toneProbability: analyzed.toneProbability,
+    articleQualityDelta: analyzed.articleQualityDelta,
+    flags: analyzed.flags,
+    primaryFlagKind: analyzed.primaryFlag?.kind ?? null,
+    primaryFlagLabel: analyzed.primaryFlag?.label ?? null,
+    primaryFlagDescription: analyzed.primaryFlag?.description ?? null,
+    primaryFlagTier: analyzed.primaryFlagTier,
+  }
+}
+
+export async function enrichRevisionIncremental(
+  wiki: FakeWiki,
+  candidate: RevisionCandidate,
+  onPatch: (patch: Partial<RecentChangeFeedItem>) => void,
+): Promise<void> {
+  const base: AnalyzedRevisionSignals = {
+    revertRisk: null,
+    referenceNeedBefore: null,
+    referenceNeedAfter: null,
+    referenceNeedDelta: null,
+    tonePrediction: null,
+    toneProbability: null,
+    toneOriginalHadIssue: null,
+    toneOriginalProbability: null,
+    articleQualityBefore: null,
+    articleQualityAfter: null,
+    articleQualityDelta: null,
+    flags: [],
+    primaryFlag: null,
+    primaryFlagTier: null,
+  }
+
+  const predictions = await wiki.getRevisionPredictions([candidate.revId], ['revertrisk'])
+  base.revertRisk = revertRiskFromPrediction(predictions[candidate.revId]?.revertrisk)
+  base.flags = buildFlags(base)
+  base.primaryFlag = primaryFlagFromFlags(base.flags)
+  base.primaryFlagTier = primaryFlagTierFromKind(
+    base.primaryFlag?.kind ?? null,
+    base.revertRisk,
+  )
+  onPatch(analyzedSignalsToFeedPatch(base))
+
+  if (base.revertRisk != null && base.revertRisk > REVERT_RISK_THRESHOLDS.upperLoose) {
+    return
+  }
+
+  let parentId = candidate.parentRevId
+  if ((parentId == null || parentId <= 0) && candidate.pageTitle) {
+    try {
+      parentId = await wiki.getParentRevisionId(candidate.pageTitle, candidate.revId)
+    } catch {
+      parentId = null
+    }
+  }
+
+  if (parentId != null && parentId > 0) {
+    const beforePred = await wiki.getReferenceNeedPrediction(parentId)
+    const afterPred = await wiki.getReferenceNeedPrediction(candidate.revId)
+    base.referenceNeedBefore = beforePred?.rn_score ?? null
+    base.referenceNeedAfter = afterPred?.rn_score ?? null
+    if (base.referenceNeedAfter != null) {
+      base.referenceNeedDelta = base.referenceNeedAfter - (base.referenceNeedBefore ?? 0)
+    }
+    base.flags = buildFlags(base)
+    base.primaryFlag = primaryFlagFromFlags(base.flags)
+    base.primaryFlagTier = primaryFlagTierFromKind(
+      base.primaryFlag?.kind ?? null,
+      base.revertRisk,
+    )
+    onPatch(analyzedSignalsToFeedPatch(base))
+  }
+
+  const tone = await fetchToneSignals(wiki, candidate.pageTitle, candidate.revId)
+  Object.assign(base, tone)
+  base.flags = buildFlags(base)
+  base.primaryFlag = primaryFlagFromFlags(base.flags)
+  base.primaryFlagTier = primaryFlagTierFromKind(
+    base.primaryFlag?.kind ?? null,
+    base.revertRisk,
+  )
+  onPatch(analyzedSignalsToFeedPatch(base))
+
+  if (parentId != null && parentId > 0) {
+    const beforeQuality = await fetchArticleQualityScore(
+      parentId,
+      'en',
+      DASHPAGE_RC_API_USER_AGENT,
+    )
+    const afterQuality = await fetchArticleQualityScore(
+      candidate.revId,
+      'en',
+      DASHPAGE_RC_API_USER_AGENT,
+    )
+    base.articleQualityBefore = beforeQuality?.score ?? null
+    base.articleQualityAfter = afterQuality?.score ?? null
+    if (base.articleQualityAfter != null && base.articleQualityBefore != null) {
+      base.articleQualityDelta = base.articleQualityAfter - base.articleQualityBefore
+    }
+    base.flags = buildFlags(base)
+    base.primaryFlag = primaryFlagFromFlags(base.flags)
+    base.primaryFlagTier = primaryFlagTierFromKind(
+      base.primaryFlag?.kind ?? null,
+      base.revertRisk,
+    )
+    onPatch(analyzedSignalsToFeedPatch(base))
+  }
+}
+
+export async function analyzeRevisionSerial(
+  wiki: FakeWiki,
+  candidate: RevisionCandidate,
+): Promise<AnalyzedRevisionSignals> {
+  const base: AnalyzedRevisionSignals = {
+    revertRisk: null,
+    referenceNeedBefore: null,
+    referenceNeedAfter: null,
+    referenceNeedDelta: null,
+    tonePrediction: null,
+    toneProbability: null,
+    toneOriginalHadIssue: null,
+    toneOriginalProbability: null,
+    articleQualityBefore: null,
+    articleQualityAfter: null,
+    articleQualityDelta: null,
+    flags: [],
+    primaryFlag: null,
+    primaryFlagTier: null,
+  }
+
+  const predictions = await wiki.getRevisionPredictions([candidate.revId], ['revertrisk'])
+  base.revertRisk = revertRiskFromPrediction(predictions[candidate.revId]?.revertrisk)
+
+  if (base.revertRisk != null && base.revertRisk > REVERT_RISK_THRESHOLDS.upperLoose) {
+    base.flags = buildFlags(base)
+    base.primaryFlag = primaryFlagFromFlags(base.flags)
+    base.primaryFlagTier = primaryFlagTierFromKind(
+      base.primaryFlag?.kind ?? null,
+      base.revertRisk,
+    )
+    return base
+  }
+
+  let parentId = candidate.parentRevId
+  if ((parentId == null || parentId <= 0) && candidate.pageTitle) {
+    try {
+      parentId = await wiki.getParentRevisionId(candidate.pageTitle, candidate.revId)
+    } catch {
+      parentId = null
+    }
+  }
+
+  if (parentId != null && parentId > 0) {
+    const beforePred = await wiki.getReferenceNeedPrediction(parentId)
+    const afterPred = await wiki.getReferenceNeedPrediction(candidate.revId)
+    base.referenceNeedBefore = beforePred?.rn_score ?? null
+    base.referenceNeedAfter = afterPred?.rn_score ?? null
+    if (base.referenceNeedAfter != null) {
+      base.referenceNeedDelta = base.referenceNeedAfter - (base.referenceNeedBefore ?? 0)
+    }
+  }
+
+  const tone = await fetchToneSignals(wiki, candidate.pageTitle, candidate.revId)
+  Object.assign(base, tone)
+
+  if (parentId != null && parentId > 0) {
+    const beforeQuality = await fetchArticleQualityScore(
+      parentId,
+      'en',
+      DASHPAGE_RC_API_USER_AGENT,
+    )
+    const afterQuality = await fetchArticleQualityScore(
+      candidate.revId,
+      'en',
+      DASHPAGE_RC_API_USER_AGENT,
+    )
+    base.articleQualityBefore = beforeQuality?.score ?? null
+    base.articleQualityAfter = afterQuality?.score ?? null
+    if (base.articleQualityAfter != null && base.articleQualityBefore != null) {
+      base.articleQualityDelta = base.articleQualityAfter - base.articleQualityBefore
+    }
+  }
+
+  base.flags = buildFlags(base)
+  base.primaryFlag = primaryFlagFromFlags(base.flags)
+  base.primaryFlagTier = primaryFlagTierFromKind(
+    base.primaryFlag?.kind ?? null,
+    base.revertRisk,
+  )
+  return base
+}
diff --git a/src/lib/dashpageRecentChangesTypes.ts b/src/lib/dashpageRecentChangesTypes.ts
new file mode 100644
index 0000000..ec6a98b
--- /dev/null
+++ b/src/lib/dashpageRecentChangesTypes.ts
@@ -0,0 +1,43 @@
+import type {
+  RecentChangeFlag,
+  RecentChangeFlagKind,
+  RecentChangePrimaryFlagTier,
+  RecentChangeStructuredDeltaSegment,
+} from '@/lib/dashpageRecentChangesSignals'
+
+export type {
+  RecentChangeFlag,
+  RecentChangeFlagKind,
+  RecentChangePrimaryFlagTier,
+  RecentChangeStructuredDeltaSegment,
+}
+
+export interface RecentChangeFeedItem {
+  revId: number
+  parentRevId: number | null
+  pageTitle: string
+  userName: string
+  timestamp: string
+  comment: string
+  commentHtml?: string
+  delta: number
+  source: 'portfolio' | 'wildcard'
+  diffUrl: string
+  shortDescription?: string
+  revertRisk?: number | null
+  referenceNeedDelta?: number | null
+  toneProbability?: number | null
+  articleQualityDelta?: number | null
+  flags?: RecentChangeFlag[]
+  primaryFlagKind?: RecentChangeFlagKind | null
+  primaryFlagLabel?: string | null
+  primaryFlagDescription?: string | null
+  primaryFlagTier?: RecentChangePrimaryFlagTier
+  structuredDeltaSegments?: RecentChangeStructuredDeltaSegment[] | null
+}
+
+export function sortRecentChangeFeedItems(
+  feedItems: RecentChangeFeedItem[],
+): RecentChangeFeedItem[] {
+  return [...feedItems].sort((a, b) => b.timestamp.localeCompare(a.timestamp))
+}
diff --git a/src/lib/fetchArticleQualityScore.ts b/src/lib/fetchArticleQualityScore.ts
new file mode 100644
index 0000000..5b0bc3c
--- /dev/null
+++ b/src/lib/fetchArticleQualityScore.ts
@@ -0,0 +1,44 @@
+const LIFT_WING_ARTICLE_QUALITY_URL =
+  'https://api.wikimedia.org/service/lw/inference/v1/models/articlequality:predict'
+
+const DEFAULT_API_USER_AGENT =
+  'ProtoWiki/0.1 (https://github.com/wikimedia-research/protowiki) dashpage-recent-changes'
+
+export interface ArticleQualityScoreResult {
+  score: number
+  revisionId: number
+}
+
+export async function fetchArticleQualityScore(
+  revId: number,
+  lang = 'en',
+  apiUserAgent = DEFAULT_API_USER_AGENT,
+): Promise<ArticleQualityScoreResult | null> {
+  if (revId <= 0) return null
+
+  try {
+    const response = await fetch(LIFT_WING_ARTICLE_QUALITY_URL, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Api-User-Agent': apiUserAgent,
+      },
+      body: JSON.stringify({ rev_id: revId, lang }),
+    })
+
+    if (!response.ok) {
+      if (response.status === 422) return null
+      return null
+    }
+
+    const data = (await response.json()) as { score?: number; revision_id?: number }
+    if (typeof data.score !== 'number') return null
+
+    return {
+      score: data.score,
+      revisionId: data.revision_id ?? revId,
+    }
+  } catch {
+    return null
+  }
+}
diff --git a/src/lib/fetchDashpageRecentChanges.ts b/src/lib/fetchDashpageRecentChanges.ts
new file mode 100644
index 0000000..e3ba4b2
--- /dev/null
+++ b/src/lib/fetchDashpageRecentChanges.ts
@@ -0,0 +1,592 @@
+import { FakeWiki } from 'fakewiki'
+import type { FWCachedRevision } from 'fakewiki/types'
+
+import type { ConfigUser, UserPageLists } from '@/lib/config'
+import {
+  DASHPAGE_RC_API_USER_AGENT,
+  DASHPAGE_RC_FALLBACK_PAGE,
+  DASHPAGE_RC_KNOWN_ITEMS_MAX,
+  DASHPAGE_RC_KNOWN_PAGES_MAX,
+  DASHPAGE_RC_MORELIKE_ITEMS_MAX,
+  DASHPAGE_RC_MORELIKE_PAGES_MAX,
+  DASHPAGE_RC_WILDCARD_FALLBACK_LIMIT,
+  DASHPAGE_RC_WILDCARD_MAX,
+  DASHPAGE_RC_WILDCARD_MIN_WINDOW_MS,
+} from '@/lib/dashpageRecentChangesConstants'
+import type { RecentChangeFeedItem } from '@/lib/dashpageRecentChangesTypes'
+import {
+  enrichRevisionIncremental,
+  type RecentChangeStructuredDeltaSegment,
+  type RevisionCandidate,
+} from '@/lib/dashpageRecentChangesSignals'
+import {
+  DASHPAGE_SUGGESTION_FALLBACK_PAGE,
+  getPortfolioPagesForUser,
+  pickUpToRandomPages,
+} from '@/lib/dashpageSuggestionCache'
+import {
+  FetchMorelikePageTitlesError,
+  fetchMorelikePageTitles,
+} from '@/lib/fetchMorelikePageTitles'
+import { fetchPagePreviewMetadataBatch } from '@/lib/fetchUserEditedPageTitles'
+import { formatDashpageEditSummaryHtml } from '@/lib/formatDashpageEditSummaryHtml'
+
+export function createDashpageRecentChangesWiki(): FakeWiki {
+  return new FakeWiki(undefined, {
+    apiUserAgent: DASHPAGE_RC_API_USER_AGENT,
+    historyFetchConcurrency: 1,
+    liftWingRevisionConcurrency: 1,
+  })
+}
+
+function assertNotAborted(signal?: AbortSignal): void {
+  if (signal?.aborted) {
+    throw new DOMException('Aborted', 'AbortError')
+  }
+}
+
+function isMainNamespaceArticleTitle(title: string | undefined): boolean {
+  if (!title?.trim()) return false
+  return !title.includes(':')
+}
+
+/** Portfolio history depth — enough to skip a run of bot edits at the page top. */
+const DASHPAGE_RC_PORTFOLIO_HISTORY_LIMIT = 10
+
+function isBotEditByHeuristic(revision: {
+  user?: { name?: string }
+  tags?: string[]
+  comment?: string
+}): boolean {
+  const userName = revision.user?.name?.trim().toLowerCase() ?? ''
+  if (userName.includes('bot')) return true
+  if (revision.tags?.includes('bot')) return true
+
+  const comment = revision.comment ?? ''
+  if (/#IABot\b/i.test(comment)) return true
+  if (/Use this bot\]\]/i.test(comment)) return true
+  if (/\[\[User:[^\]|]*Bot/i.test(comment)) return true
+
+  return false
+}
+
+function isBotUserInfo(userInfo: { groups?: string[]; implicitgroups?: string[] } | null): boolean {
+  if (!userInfo) return false
+  return (
+    userInfo.groups?.includes('bot') === true ||
+    userInfo.implicitgroups?.includes('bot') === true
+  )
+}
+
+function isCandidateHeuristicBot(candidate: RevisionCandidate): boolean {
+  return isBotEditByHeuristic({
+    user: { name: candidate.userName },
+    comment: candidate.comment,
+  })
+}
+
+function pickFirstNonBotHistoryRevision(
+  revisions: FWCachedRevision[],
+  excludeRevIds: ReadonlySet<number> = new Set(),
+): { latest: FWCachedRevision; parent: FWCachedRevision | null } | null {
+  for (let index = 0; index < revisions.length; index += 1) {
+    const latest = revisions[index]
+    if (!latest?.id || isBotEditByHeuristic(latest)) continue
+    if (excludeRevIds.has(latest.id)) continue
+    return {
+      latest,
+      parent: revisions[index + 1] ?? null,
+    }
+  }
+  return null
+}
+
+function revisionFromHistory(
+  rev: FWCachedRevision,
+  pageTitle: string,
+  parentRevId: number | null,
+  source: RevisionCandidate['source'],
+): RevisionCandidate {
+  return {
+    revId: rev.id,
+    parentRevId,
+    pageTitle,
+    userName: rev.user?.name ?? '',
+    timestamp: rev.timestamp ?? '',
+    comment: rev.comment ?? '',
+    delta: rev.delta ?? 0,
+    source,
+  }
+}
+
+interface PortfolioStreamResult {
+  enrichedCount: number
+  timestamps: string[]
+  pageTitles: Set<string>
+}
+
+function parseMediaWikiTimestampMs(timestamp: string): number {
+  const trimmed = timestamp.trim()
+  if (!trimmed.length) return Number.NaN
+  if (trimmed.includes('T')) {
+    return new Date(trimmed.endsWith('Z') ? trimmed : `${trimmed}Z`).getTime()
+  }
+  return new Date(trimmed.replace(' ', 'T') + 'Z').getTime()
+}
+
+function formatMediaWikiRcTimestamp(date: Date): string {
+  return date.toISOString().replace(/\.\d{3}Z$/, 'Z')
+}
+
+function pickWildcardTimeWindows(
+  portfolioTimestamps: string[],
+  queryCount: number,
+): Array<{ rcstart: string; rcend: string }> {
+  const timesMs = portfolioTimestamps
+    .map(parseMediaWikiTimestampMs)
+    .filter((value) => !Number.isNaN(value))
+
+  if (!timesMs.length || queryCount <= 0) return []
+
+  const minMs = Math.min(...timesMs)
+  const maxMs = Math.max(...timesMs)
+  const spanMs = Math.max(maxMs - minMs, 1)
+  const halfWindowMs = Math.max(
+    DASHPAGE_RC_WILDCARD_MIN_WINDOW_MS,
+    Math.floor(spanMs / 10),
+  )
+
+  const windows: Array<{ rcstart: string; rcend: string }> = []
+
+  for (let index = 0; index < queryCount; index += 1) {
+    const anchorMs = minMs + Math.random() * spanMs
+    let rcstartMs = Math.min(maxMs, anchorMs + halfWindowMs)
+    let rcendMs = Math.max(minMs, anchorMs - halfWindowMs)
+
+    if (rcstartMs <= rcendMs) {
+      rcstartMs = Math.min(maxMs, rcendMs + 1000)
+    }
+
+    windows.push({
+      rcstart: formatMediaWikiRcTimestamp(new Date(rcstartMs)),
+      rcend: formatMediaWikiRcTimestamp(new Date(rcendMs)),
+    })
+  }
+
+  return windows
+}
+
+function isEligibleWildcardRevision(
+  rev: FWCachedRevision,
+  excludeRevIds: ReadonlySet<number>,
+  excludePageTitles: ReadonlySet<string>,
+): boolean {
+  if (!rev.id || excludeRevIds.has(rev.id)) return false
+  if (!isMainNamespaceArticleTitle(rev.pageName)) return false
+  if (rev.pageName && excludePageTitles.has(rev.pageName)) return false
+  if (isBotEditByHeuristic(rev)) return false
+  return true
+}
+
+function pickWildcardCandidateFromResult(
+  result: { revisions: FWCachedRevision[] },
+  excludeRevIds: Set<number>,
+  excludePageTitles: Set<string>,
+): RevisionCandidate | null {
+  for (const rev of result.revisions) {
+    if (!isEligibleWildcardRevision(rev, excludeRevIds, excludePageTitles)) continue
+
+    const pageTitle = rev.pageName ?? DASHPAGE_RC_FALLBACK_PAGE
+    return revisionFromHistory(rev, pageTitle, null, 'wildcard')
+  }
+  return null
+}
+
+async function fetchWildcardCandidateAtWindow(
+  wiki: FakeWiki,
+  window: { rcstart: string; rcend: string },
+  excludeRevIds: Set<number>,
+  excludePageTitles: Set<string>,
+  signal: AbortSignal,
+): Promise<RevisionCandidate | null> {
+  assertNotAborted(signal)
+
+  let result = await wiki.getRecentChanges({
+    limit: 1,
+    onlyNeedsReview: true,
+    rcstart: window.rcstart,
+    rcend: window.rcend,
+  })
+
+  let candidate = pickWildcardCandidateFromResult(result, excludeRevIds, excludePageTitles)
+  if (candidate) return candidate
+
+  const startMs = parseMediaWikiTimestampMs(window.rcstart)
+  const endMs = parseMediaWikiTimestampMs(window.rcend)
+  if (!Number.isNaN(startMs) && !Number.isNaN(endMs) && startMs > endMs) {
+    const midMs = endMs + Math.floor((startMs - endMs) / 2)
+    const expandedHalfWindow = Math.max(DASHPAGE_RC_WILDCARD_MIN_WINDOW_MS, startMs - endMs)
+    const expandedWindow = {
+      rcstart: formatMediaWikiRcTimestamp(new Date(Math.min(startMs + expandedHalfWindow, startMs))),
+      rcend: formatMediaWikiRcTimestamp(new Date(Math.max(endMs, midMs - expandedHalfWindow))),
+    }
+
+    assertNotAborted(signal)
+    result = await wiki.getRecentChanges({
+      limit: 1,
+      onlyNeedsReview: true,
+      rcstart: expandedWindow.rcstart,
+      rcend: expandedWindow.rcend,
+    })
+
+    candidate = pickWildcardCandidateFromResult(result, excludeRevIds, excludePageTitles)
+  }
+
+  return candidate
+}
+
+async function fetchFallbackWildcardCandidate(
+  wiki: FakeWiki,
+  excludeRevIds: Set<number>,
+  excludePageTitles: Set<string>,
+  signal: AbortSignal,
+): Promise<RevisionCandidate | null> {
+  assertNotAborted(signal)
+
+  let rccontinue: string | undefined
+
+  while (true) {
+    assertNotAborted(signal)
+
+    const result = await wiki.getRecentChanges({
+      limit: DASHPAGE_RC_WILDCARD_FALLBACK_LIMIT,
+      onlyNeedsReview: true,
+      rccontinue,
+    })
+
+    const candidate = pickWildcardCandidateFromResult(result, excludeRevIds, excludePageTitles)
+    if (candidate) return candidate
+
+    if (!result.rccontinue) break
+    rccontinue = result.rccontinue
+  }
+
+  return null
+}
+
+async function streamPortfolioRevisions(
+  wiki: FakeWiki,
+  user: ConfigUser,
+  pageLists: UserPageLists,
+  cachedRealTitles: string[],
+  excludeRevIds: Set<number>,
+  signal: AbortSignal,
+  onCandidate: (candidate: RevisionCandidate) => Promise<boolean>,
+): Promise<PortfolioStreamResult> {
+  const portfolio = getPortfolioPagesForUser(user, pageLists, cachedRealTitles)
+  const portfolioPool =
+    portfolio.length ? portfolio : [DASHPAGE_SUGGESTION_FALLBACK_PAGE]
+
+  const portfolioPicks = pickUpToRandomPages(portfolioPool, DASHPAGE_RC_KNOWN_PAGES_MAX)
+
+  assertNotAborted(signal)
+
+  let enrichedCount = 0
+  const timestamps: string[] = []
+  const pageTitles = new Set<string>(portfolioPicks)
+
+  async function tryPageTitle(pageTitle: string): Promise<boolean> {
+    assertNotAborted(signal)
+
+    const history = await wiki.getPageHistory(pageTitle, {
+      limit: DASHPAGE_RC_PORTFOLIO_HISTORY_LIMIT,
+    })
+    const revisions = history.revisions ?? []
+    if (!revisions.length) return false
+
+    const picked = pickFirstNonBotHistoryRevision(revisions, excludeRevIds)
+    if (!picked?.latest.id) return false
+
+    const candidate = revisionFromHistory(
+      picked.latest,
+      pageTitle,
+      picked.parent?.id ?? null,
+      'portfolio',
+    )
+
+    if (excludeRevIds.has(candidate.revId)) return false
+
+    const added = await onCandidate(candidate)
+    if (!added) return false
+
+    excludeRevIds.add(candidate.revId)
+    pageTitles.add(pageTitle)
+    if (candidate.timestamp) {
+      timestamps.push(candidate.timestamp)
+    }
+    enrichedCount += 1
+    return true
+  }
+
+  let knownCount = 0
+  for (const pageTitle of portfolioPicks) {
+    if (knownCount >= DASHPAGE_RC_KNOWN_ITEMS_MAX) break
+    if (await tryPageTitle(pageTitle)) {
+      knownCount += 1
+    }
+  }
+
+  let morelikePicks: string[] = []
+  if (knownCount < DASHPAGE_RC_KNOWN_ITEMS_MAX || DASHPAGE_RC_MORELIKE_ITEMS_MAX > 0) {
+    try {
+      morelikePicks = await fetchMorelikePageTitles(portfolioPicks, {
+        limit: DASHPAGE_RC_MORELIKE_PAGES_MAX,
+        excludeTitles: portfolioPicks,
+        signal,
+      })
+    } catch (caught) {
+      if (caught instanceof FetchMorelikePageTitlesError && caught.code === 'aborted') {
+        throw caught
+      }
+    }
+  }
+
+  for (const pageTitle of morelikePicks) {
+    pageTitles.add(pageTitle)
+  }
+
+  let morelikeCount = 0
+  for (const pageTitle of morelikePicks) {
+    if (morelikeCount >= DASHPAGE_RC_MORELIKE_ITEMS_MAX) break
+    if (await tryPageTitle(pageTitle)) {
+      morelikeCount += 1
+    }
+  }
+
+  return { enrichedCount, timestamps, pageTitles }
+}
+
+async function streamWildcardRevisions(
+  wiki: FakeWiki,
+  excludeRevIds: Set<number>,
+  excludePageTitles: Set<string>,
+  portfolioTimestamps: string[],
+  signal: AbortSignal,
+  onCandidate: (candidate: RevisionCandidate) => Promise<boolean>,
+): Promise<number> {
+  if (DASHPAGE_RC_WILDCARD_MAX <= 0) return 0
+
+  assertNotAborted(signal)
+
+  const timeWindows = pickWildcardTimeWindows(portfolioTimestamps, DASHPAGE_RC_WILDCARD_MAX)
+  let enrichedCount = 0
+
+  for (let index = 0; index < DASHPAGE_RC_WILDCARD_MAX; index += 1) {
+    if (enrichedCount >= DASHPAGE_RC_WILDCARD_MAX) break
+
+    assertNotAborted(signal)
+
+    let candidate: RevisionCandidate | null = null
+
+    const window = timeWindows[index]
+    if (window) {
+      candidate = await fetchWildcardCandidateAtWindow(
+        wiki,
+        window,
+        excludeRevIds,
+        excludePageTitles,
+        signal,
+      )
+    }
+
+    if (!candidate) {
+      candidate = await fetchFallbackWildcardCandidate(
+        wiki,
+        excludeRevIds,
+        excludePageTitles,
+        signal,
+      )
+    }
+
+    if (!candidate) continue
+
+    const added = await onCandidate(candidate)
+    if (!added) continue
+
+    excludeRevIds.add(candidate.revId)
+    enrichedCount += 1
+  }
+
+  return enrichedCount
+}
+
+function createSkeletonFromCandidate(
+  wiki: FakeWiki,
+  candidate: RevisionCandidate,
+): RecentChangeFeedItem {
+  return {
+    revId: candidate.revId,
+    parentRevId: candidate.parentRevId,
+    pageTitle: candidate.pageTitle,
+    userName: candidate.userName,
+    timestamp: candidate.timestamp,
+    comment: candidate.comment,
+    delta: candidate.delta,
+    source: candidate.source,
+    diffUrl: wiki.getRevisionUrl(candidate.revId, candidate.pageTitle),
+  }
+}
+
+async function isBotUser(wiki: FakeWiki, userName: string): Promise<boolean> {
+  if (!userName.trim()) return false
+  const usersInfo = await wiki.getUsersInfo([userName])
+  return isBotUserInfo(usersInfo[userName] ?? null)
+}
+
+async function fetchStructuredDeltaSegments(
+  wiki: FakeWiki,
+  revId: number,
+): Promise<RecentChangeStructuredDeltaSegment[] | null> {
+  try {
+    const result = await wiki.getStructuredDeltasFromRevision(revId, { lang: 'en' })
+    if (!result?.segments?.length) return null
+    return result.segments.map((segment) => ({
+      text: segment.text,
+      deltaClass: segment.deltaClass,
+    }))
+  } catch {
+    return null
+  }
+}
+
+async function enrichCandidateItem(
+  wiki: FakeWiki,
+  candidate: RevisionCandidate,
+  handlers: DashpageRecentChangesHandlers,
+  signal?: AbortSignal,
+): Promise<boolean> {
+  if (isCandidateHeuristicBot(candidate)) return false
+
+  assertNotAborted(signal)
+
+  handlers.onSkeleton(createSkeletonFromCandidate(wiki, candidate))
+
+  if (await isBotUser(wiki, candidate.userName)) {
+    handlers.onRemove(candidate.revId)
+    return false
+  }
+
+  await enrichRevisionIncremental(wiki, candidate, (patch) => {
+    handlers.onPatch(candidate.revId, patch)
+  })
+
+  assertNotAborted(signal)
+  const structuredDeltaSegments = await fetchStructuredDeltaSegments(wiki, candidate.revId)
+  handlers.onPatch(candidate.revId, { structuredDeltaSegments })
+
+  if (candidate.comment.trim()) {
+    const commentHtml = await formatDashpageEditSummaryHtml(
+      wiki,
+      candidate.comment,
+      candidate.pageTitle,
+    )
+    if (commentHtml) {
+      handlers.onPatch(candidate.revId, { commentHtml })
+    }
+  }
+
+  assertNotAborted(signal)
+  const previews = await fetchPagePreviewMetadataBatch([candidate.pageTitle], { signal })
+  const shortDescription = previews[candidate.pageTitle]?.shortDescription
+  if (shortDescription) {
+    handlers.onPatch(candidate.revId, { shortDescription })
+  }
+
+  return true
+}
+
+export interface DashpageRecentChangesHandlers {
+  onSkeleton: (item: RecentChangeFeedItem) => void
+  onPatch: (revId: number, patch: Partial<RecentChangeFeedItem>) => void
+  onRemove: (revId: number) => void
+}
+
+export interface FetchDashpageRecentChangesOptions {
+  user: ConfigUser
+  pageLists: UserPageLists
+  cachedRealTitles: string[]
+  excludeRevIds?: number[]
+  /** Total feed items to return (portfolio + wildcards). Defaults to fullscreen max. */
+  targetCount?: number
+  signal?: AbortSignal
+  wiki?: FakeWiki
+  handlers?: DashpageRecentChangesHandlers
+}
+
+export async function runDashpageRecentChangesPipeline(
+  options: FetchDashpageRecentChangesOptions,
+): Promise<void> {
+  const wiki = options.wiki ?? createDashpageRecentChangesWiki()
+  const signal = options.signal
+  const handlers = options.handlers
+  if (!handlers) return
+
+  const excludeRevIds = new Set(options.excludeRevIds ?? [])
+
+  const activeSignal = signal ?? new AbortController().signal
+
+  const enrichCandidate = async (candidate: RevisionCandidate): Promise<boolean> => {
+    if (excludeRevIds.has(candidate.revId)) return false
+    return enrichCandidateItem(wiki, candidate, handlers, activeSignal)
+  }
+
+  const portfolioResult = await streamPortfolioRevisions(
+    wiki,
+    options.user,
+    options.pageLists,
+    options.cachedRealTitles,
+    excludeRevIds,
+    activeSignal,
+    enrichCandidate,
+  )
+
+  await streamWildcardRevisions(
+    wiki,
+    excludeRevIds,
+    portfolioResult.pageTitles,
+    portfolioResult.timestamps,
+    activeSignal,
+    enrichCandidate,
+  )
+}
+
+export async function fetchDashpageRecentChanges(
+  options: FetchDashpageRecentChangesOptions,
+): Promise<RecentChangeFeedItem[]> {
+  const items: RecentChangeFeedItem[] = []
+  const byRevId = new Map<number, RecentChangeFeedItem>()
+
+  await runDashpageRecentChangesPipeline({
+    ...options,
+    handlers: {
+      onSkeleton: (item) => {
+        items.push(item)
+        byRevId.set(item.revId, item)
+        options.handlers?.onSkeleton(item)
+      },
+      onPatch: (revId, patch) => {
+        const item = byRevId.get(revId)
+        if (item) Object.assign(item, patch)
+        options.handlers?.onPatch(revId, patch)
+      },
+      onRemove: (revId) => {
+        const index = items.findIndex((item) => item.revId === revId)
+        if (index >= 0) items.splice(index, 1)
+        byRevId.delete(revId)
+        options.handlers?.onRemove(revId)
+      },
+    },
+  })
+
+  return items
+}
diff --git a/src/lib/fetchUserImpact.ts b/src/lib/fetchUserImpact.ts
index 273e59c..5513254 100644
--- a/src/lib/fetchUserImpact.ts
+++ b/src/lib/fetchUserImpact.ts
@@ -34,7 +34,7 @@ export class FetchUserImpactError extends Error {
 
 export interface FetchUserImpactOptions {
   signal?: AbortSignal
-  onProgress?: (step: string) => void
+  onProgress?: (patch: Partial<ImpactData>) => void
 }
 
 interface UserContrib {
@@ -166,6 +166,43 @@ function buildActivityHistogram(contribs: UserContrib[]): {
   }
 }
 
+function buildViewProgressPatch(
+  totalEdits: number,
+  viewRows: { title: string; total: number; daily: number[] }[],
+  mostViewed?: ImpactMostViewedArticle[],
+): Partial<ImpactData> {
+  const sortedRows = [...viewRows].sort((a, b) => b.total - a.total)
+  const aggregateViews = sortedRows.reduce((sum, row) => sum + row.total, 0)
+  const topByViews = sortedRows.slice(0, TOP_MOST_VIEWED)
+
+  const viewCount =
+    aggregateViews > 0 ? formatViewCount(aggregateViews) : totalEdits > 0 ? '—' : undefined
+
+  const sparklineSource = topByViews[0]?.daily ?? []
+  const sparklineData =
+    sparklineSource.length >= 2
+      ? sparklineSource
+      : totalEdits > 0 && sortedRows.length > 0
+        ? new Array(40).fill(0)
+        : []
+
+  const nextMostViewed =
+    mostViewed ??
+    topByViews.map((row) => ({
+      title: row.title,
+      views: row.total,
+      sparklineData: row.daily.length >= 2 ? row.daily.slice(-10) : undefined,
+      href: `https://${WIKI_HOST}/wiki/${encodeURIComponent(row.title.replace(/ /g, '_'))}`,
+    }))
+
+  return {
+    viewCount,
+    viewLabel: "Views on articles you've edited",
+    sparklineData,
+    mostViewed: nextMostViewed,
+  }
+}
+
 function formatViewCount(total: number): string {
   if (total >= 1_000_000) return `${(total / 1_000_000).toFixed(1)}M`
   if (total >= 1000) return `${(total / 1000).toFixed(1)}K`
@@ -260,7 +297,6 @@ export async function fetchUserImpact(
   }
 
   assertNotAborted(signal)
-  onProgress?.('user')
 
   const usersJson = (await fetchJson(
     actionUrl({
@@ -280,9 +316,9 @@ export async function fetchUserImpact(
   }
 
   const totalEdits = userInfo.editcount ?? 0
+  onProgress?.({ totalEdits })
 
   assertNotAborted(signal)
-  onProgress?.('contributions')
 
   const allContribs: UserContrib[] = []
   let uccontinue: string | undefined
@@ -329,27 +365,34 @@ export async function fetchUserImpact(
 
   const editedPageTitles = [...titleToLatestEdit.keys()]
 
+  onProgress?.({
+    lastEdited,
+    longestStreak,
+    recentActivityData,
+    activityStartDate,
+    activityEndDate,
+    editedPageTitles,
+  })
+
   const titlesForPageviews = editedPageTitles.slice(0, MAX_PAGEVIEW_ARTICLES)
   const viewRows: { title: string; total: number; daily: number[] }[] = []
 
   for (const title of titlesForPageviews) {
     assertNotAborted(signal)
-    onProgress?.(`pageviews:${title}`)
 
     const since = titleToLatestEdit.get(title) ?? ''
     const { total, daily } = await fetchPageviewsSince(title, since, signal)
     viewRows.push({ title, total, daily })
+    onProgress?.(buildViewProgressPatch(totalEdits, viewRows))
   }
 
   viewRows.sort((a, b) => b.total - a.total)
 
-  const aggregateViews = viewRows.reduce((sum, row) => sum + row.total, 0)
   const topByViews = viewRows.slice(0, TOP_MOST_VIEWED)
   const mostViewed: ImpactMostViewedArticle[] = []
 
   for (const row of topByViews) {
     assertNotAborted(signal)
-    onProgress?.(`thumbnail:${row.title}`)
 
     const thumbnailSrc = await fetchThumbnail(row.title, signal)
 
@@ -360,18 +403,11 @@ export async function fetchUserImpact(
       thumbnailSrc,
       href: `https://${WIKI_HOST}/wiki/${encodeURIComponent(row.title.replace(/ /g, '_'))}`,
     })
-  }
 
-  const viewCount =
-    aggregateViews > 0 ? formatViewCount(aggregateViews) : totalEdits > 0 ? '—' : undefined
+    onProgress?.(buildViewProgressPatch(totalEdits, viewRows, mostViewed))
+  }
 
-  const sparklineSource = topByViews[0]?.daily ?? []
-  const sparklineData =
-    sparklineSource.length >= 2
-      ? sparklineSource
-      : totalEdits > 0
-        ? new Array(40).fill(0)
-        : []
+  const viewPatch = buildViewProgressPatch(totalEdits, viewRows, mostViewed)
 
   return {
     totalEdits,
@@ -381,9 +417,9 @@ export async function fetchUserImpact(
     recentActivityData,
     activityStartDate,
     activityEndDate,
-    viewCount,
-    viewLabel: "Views on articles you've edited",
-    sparklineData,
+    viewCount: viewPatch.viewCount,
+    viewLabel: viewPatch.viewLabel,
+    sparklineData: viewPatch.sparklineData ?? [],
     mostViewed,
     viewAllEditsHref: `https://${WIKI_HOST}/wiki/Special:Contributions/${encodeURIComponent(username)}`,
     editedPageTitles,
diff --git a/src/lib/formatDashpageEditSummaryHtml.ts b/src/lib/formatDashpageEditSummaryHtml.ts
new file mode 100644
index 0000000..90330a8
--- /dev/null
+++ b/src/lib/formatDashpageEditSummaryHtml.ts
@@ -0,0 +1,54 @@
+import type { FakeWiki } from 'fakewiki'
+
+import { stripEmptyLeadingDashpageAutocomment } from '@/lib/stripEmptyLeadingDashpageAutocomment'
+
+/** Match FMW ReviewChangesPlusFeed — keep formatting, drop navigable links inside card `<a>`. */
+export function stripLinksFromHtml(html: string): string {
+  if (typeof document === 'undefined') return html
+
+  const div = document.createElement('div')
+  div.innerHTML = html
+  div.querySelectorAll('base').forEach((el) => el.remove())
+  div.querySelectorAll('a').forEach((anchor) => {
+    const span = document.createElement('span')
+    span.innerHTML = anchor.innerHTML
+    anchor.parentNode?.replaceChild(span, anchor)
+  })
+  return div.innerHTML
+}
+
+/**
+ * Preprocess + wikitext-transform an edit summary for feed display.
+ * Mirrors FakeMediaWiki ReviewChangesPlusFeed `processRevisions`.
+ */
+export async function formatDashpageEditSummaryHtml(
+  wiki: FakeWiki,
+  comment: string,
+  pageTitle: string,
+): Promise<string> {
+  const raw = comment.trim()
+  if (!raw) return ''
+
+  const preprocessed = wiki.preprocessEditSummary(
+    stripEmptyLeadingDashpageAutocomment(raw),
+    pageTitle,
+  )
+  const toolbar = wiki.parseToolbarEditSummary(preprocessed)
+  const summary = toolbar ?? {
+    comment: preprocessed,
+    suggestedBy: null,
+  }
+
+  let commentText = summary.comment ?? ''
+  if (commentText && summary.suggestedBy) {
+    commentText += ` Suggested by [[User:${summary.suggestedBy}|${summary.suggestedBy}]]`
+  }
+
+  if (!commentText.trim()) return ''
+
+  let html = await wiki.transformWikitextToHtml(commentText, pageTitle)
+  if (html) {
+    html = stripLinksFromHtml(html)
+  }
+  return html
+}
diff --git a/src/lib/formatDashpageEditSummaryPlain.ts b/src/lib/formatDashpageEditSummaryPlain.ts
new file mode 100644
index 0000000..5b89459
--- /dev/null
+++ b/src/lib/formatDashpageEditSummaryPlain.ts
@@ -0,0 +1,43 @@
+import type { FakeWiki } from 'fakewiki'
+
+import { createDashpageRecentChangesWiki } from '@/lib/fetchDashpageRecentChanges'
+import { stripEmptyLeadingDashpageAutocomment } from '@/lib/stripEmptyLeadingDashpageAutocomment'
+
+/**
+ * Cheap client-side edit-summary display while wikitext transform is pending.
+ * Uses FakeWiki preprocess only — no network.
+ */
+export function formatDashpageEditSummaryPlain(
+  comment: string,
+  pageTitle: string,
+  wiki: FakeWiki = createDashpageRecentChangesWiki(),
+): string {
+  const raw = comment.trim()
+  if (!raw) return ''
+
+  let text = wiki.preprocessEditSummary(
+    stripEmptyLeadingDashpageAutocomment(raw),
+    pageTitle,
+  )
+
+  const toolbar = wiki.parseToolbarEditSummary(text)
+  if (toolbar?.comment) {
+    text = toolbar.comment
+    if (toolbar.suggestedBy) {
+      text += ` Suggested by ${toolbar.suggestedBy}`
+    }
+  }
+
+  text = text.replace(/\[\[:Category:[^\]]+\]\]/gi, '')
+  text = text.replace(/\[\[Category:[^\]]+\]\]/gi, '')
+  text = text.replace(/\[\[User:([^|\]]+)(?:\|([^\]]+))?\]\]/gi, (_match, user, label) =>
+    (label ?? user).trim(),
+  )
+  text = text.replace(/\[\[([^\]|]+)\|([^\]]+)\]\]/g, '$2')
+  text = text.replace(/\[\[([^\]]+)\]\]/g, '$1')
+  text = text.replace(/'''+/g, '')
+  text = text.replace(/''/g, '')
+  text = text.replace(/\s+/g, ' ').trim()
+
+  return text
+}
diff --git a/src/lib/stripEmptyLeadingDashpageAutocomment.ts b/src/lib/stripEmptyLeadingDashpageAutocomment.ts
new file mode 100644
index 0000000..614350f
--- /dev/null
+++ b/src/lib/stripEmptyLeadingDashpageAutocomment.ts
@@ -0,0 +1,8 @@
+/**
+ * Remove a leading empty section autocomment (e.g. slash-star-star-slash with no title).
+ * FakeWiki preprocessEditSummary only matches section markers with a space before the
+ * closing delimiter, so an empty marker is left verbatim in the feed.
+ */
+export function stripEmptyLeadingDashpageAutocomment(summary: string): string {
+  return summary.replace(/^\s*\/\*\s*\*\/\s*/, '')
+}
diff --git a/src/lib/ve-suggestions/veSuggestionCards.ts b/src/lib/ve-suggestions/veSuggestionCards.ts
index 7ed62a2..b8b3cb3 100644
--- a/src/lib/ve-suggestions/veSuggestionCards.ts
+++ b/src/lib/ve-suggestions/veSuggestionCards.ts
@@ -99,7 +99,7 @@ const DISPLAY_BY_TYPE: Record<string, SuggestionDisplayConfig> = {
   },
   textMatch: {
     heading: 'Rewrite flagged text',
-    description: () => 'Replace AI-generated text.',
+    description: () => 'Replace or remove AI-generated text.',
   },
   tone: {
     heading: 'Adjust tone',
@@ -833,9 +833,7 @@ function resolveSuggestionSection(
       const editSectionIndex = sectionIndexForOffset(sectionRanges, exactOffset)
       if (editSectionIndex != null) {
         const sectionTitle = sectionRanges[editSectionIndex]?.title
-        return sectionTitle ?
-            { sectionTitle, editSectionIndex }
-          : { editSectionIndex }
+        return sectionTitle ? { sectionTitle, editSectionIndex } : { editSectionIndex }
       }
     }
   }
@@ -849,9 +847,7 @@ function resolveSuggestionSection(
         const editSectionIndex = sectionIndexForOffset(sectionRanges, approxOffset)
         if (editSectionIndex != null) {
           const sectionTitle = sectionRanges[editSectionIndex]?.title
-          return sectionTitle ?
-              { sectionTitle, editSectionIndex }
-            : { editSectionIndex }
+          return sectionTitle ? { sectionTitle, editSectionIndex } : { editSectionIndex }
         }
       }
     }
@@ -889,10 +885,7 @@ function resolveBestEffortCardLink(
   return { cardLinkUrl: baseUrl }
 }
 
-function sectionIndexFromCardLinkUrl(
-  cardLinkUrl: string,
-  pageSource: string,
-): number | undefined {
+function sectionIndexFromCardLinkUrl(cardLinkUrl: string, pageSource: string): number | undefined {
   const hashIndex = cardLinkUrl.indexOf('#')
   if (hashIndex < 0) return undefined
 
@@ -1109,9 +1102,8 @@ export function buildFallbackCard(
     cachedHtml && cachedHtml !== rawSnippet ? stripLinksFromSnippetHtml(cachedHtml) : ''
   const sectionTitleMap = pageSource ? buildSectionTitleMap(pageSource) : new Map<string, string>()
   const sectionRanges = pageSource ? buildSectionRanges(pageSource) : []
-  const { cardLinkUrl, editSectionIndex } =
-    pageSource ?
-      resolveBestEffortCardLink(
+  const { cardLinkUrl, editSectionIndex } = pageSource
+    ? resolveBestEffortCardLink(
         wiki,
         pageTitle,
         context,
diff --git a/src/prototypes/template-homepage/ImpactModule.vue b/src/prototypes/template-homepage/ImpactModule.vue
index a5e1360..16fa5f0 100644
--- a/src/prototypes/template-homepage/ImpactModule.vue
+++ b/src/prototypes/template-homepage/ImpactModule.vue
@@ -78,14 +78,17 @@ const hasContent = computed(
   () =>
     !!props.viewCount ||
     (props.totalEdits ?? 0) > 0 ||
-    props.recentActivityData.some((v) => v > 0),
+    props.recentActivityData.some((v) => v > 0) ||
+    !!props.lastEdited ||
+    !!props.longestStreak,
 )
+const showLoadPrompt = computed(() => props.loadPending && !hasContent.value)
 const isMobilePreview = computed(() => !props.standalone && props.to != null)
 /** Desktop sidebar only — title row via DashboardModule `#header-actions`. */
 const showRefreshInTitle = computed(
   () =>
     props.showRefresh &&
-    !props.loadPending &&
+    !showLoadPrompt.value &&
     !props.standalone &&
     !isMobilePreview.value,
 )
@@ -176,7 +179,7 @@ const recentEditCount = computed(() =>
 
     <!-- ① Mobile filled ─────────────────────────────── -->
     <template v-if="hasContent && isMobilePreview">
-      <div class="impact-module__stat-row">
+      <div v-if="viewCount" class="impact-module__stat-row">
         <span class="impact-module__count">{{ viewCount }}</span>
         <span class="impact-module__count-label">{{ viewLabel }}</span>
       </div>
@@ -243,7 +246,7 @@ const recentEditCount = computed(() =>
       </div>
 
       <!-- Recent activity bar chart -->
-      <div class="impact-module__activity">
+      <div v-if="recentActivityData.length" class="impact-module__activity">
         <p class="impact-module__activity-title">Your recent activity (last 60 days)</p>
         <div class="impact-module__activity-body">
           <div class="impact-module__activity-left">
@@ -277,7 +280,7 @@ const recentEditCount = computed(() =>
       </div>
 
       <!-- Views sparkline -->
-      <div class="impact-module__stat-row">
+      <div v-if="viewCount" class="impact-module__stat-row">
         <span class="impact-module__count">{{ viewCount }}</span>
         <span class="impact-module__count-label">{{ viewLabel }}</span>
       </div>
@@ -324,7 +327,7 @@ const recentEditCount = computed(() =>
     </template>
 
     <!-- ③ Load pending (real user, no cache) ────────── -->
-    <template v-else-if="loadPending">
+    <template v-else-if="showLoadPrompt">
       <div class="impact-module__load-prompt">
         <CdxButton
           action="progressive"
diff --git a/src/prototypes/template-homepage/RecentChangesFeedItem.vue b/src/prototypes/template-homepage/RecentChangesFeedItem.vue
new file mode 100644
index 0000000..9b8f2c2
--- /dev/null
+++ b/src/prototypes/template-homepage/RecentChangesFeedItem.vue
@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { CdxIcon } from '@wikimedia/codex'
+import {
+  cdxIconAlert,
+  cdxIconArrowDown,
+  cdxIconArrowUp,
+  cdxIconCheck,
+  cdxIconError,
+  cdxIconReference,
+  cdxIconUserAvatar,
+  cdxIconUserTemporary,
+} from '@wikimedia/codex-icons'
+import type { Icon } from '@wikimedia/codex-icons'
+
+import type { RecentChangeFeedItem } from '@/lib/dashpageRecentChangesTypes'
+import {
+  primaryFlagChipFromKind,
+  type RecentChangeFlagChipIcon,
+} from '@/lib/dashpageRecentChangesSignals'
+import { createDashpageRecentChangesWiki } from '@/lib/fetchDashpageRecentChanges'
+import { formatDashpageEditSummaryPlain } from '@/lib/formatDashpageEditSummaryPlain'
+import { useDashpageRecentChangesProgress } from '@/lib/dashpageRecentChangesProgress'
+
+const props = defineProps<{
+  item: RecentChangeFeedItem
+}>()
+
+const wiki = createDashpageRecentChangesWiki()
+const { isRevisionViewed, markRevisionAsViewed } = useDashpageRecentChangesProgress()
+
+const isViewed = computed(() => isRevisionViewed(props.item.revId))
+
+const primaryFlagChip = computed(() => primaryFlagChipFromKind(props.item.primaryFlagKind))
+
+const hasPrimaryFlag = computed(() => primaryFlagChip.value != null)
+
+const linkBorderClass = computed(() => {
+  if (isViewed.value) return null
+  const tier = props.item.primaryFlagTier
+  if (tier === 'toneReference' || tier === 'qualityDown') {
+    return 'review-changes__item-link--primary-unviewed-tone'
+  }
+  if (tier === 'revertHigh') return 'review-changes__item-link--primary-unviewed-revert'
+  if (tier === 'revertWarn') return 'review-changes__item-link--primary-unviewed-revert-warn'
+  if (tier === 'qualityUp') return 'review-changes__item-link--primary-unviewed-quality-up'
+  return null
+})
+
+function onCardClick(): void {
+  markRevisionAsViewed(props.item.revId)
+}
+
+const CHIP_ICONS: Record<RecentChangeFlagChipIcon, Icon> = {
+  error: cdxIconError,
+  reference: cdxIconReference,
+  check: cdxIconCheck,
+  alert: cdxIconAlert,
+  arrowUp: cdxIconArrowUp,
+  arrowDown: cdxIconArrowDown,
+}
+
+const primaryFlagChipIcon = computed(() => {
+  const chip = primaryFlagChip.value
+  return chip ? CHIP_ICONS[chip.icon] : null
+})
+
+const primaryFlagAriaLabel = computed(() => {
+  const chip = primaryFlagChip.value
+  if (!chip) return undefined
+  const description = props.item.primaryFlagDescription?.trim()
+  return description ? `${chip.label}. ${description}` : chip.label
+})
+
+const structuredDeltaOpenParenClass = computed(() => {
+  const segments = props.item.structuredDeltaSegments
+  return segments?.[0]?.deltaClass ?? ''
+})
+
+const structuredDeltaCloseParenClass = computed(() => {
+  const segments = props.item.structuredDeltaSegments
+  if (!segments?.length) return ''
+  return segments[segments.length - 1]?.deltaClass ?? ''
+})
+
+function formatRelativeTime(timestamp: string): string {
+  if (!timestamp) return ''
+  return wiki.formatNiceRelativeTimestamp(timestamp)
+}
+
+function formatDelta(delta: number): string {
+  return wiki.formatDelta(delta)
+}
+
+function deltaFallbackClass(delta: number): string {
+  return wiki.getDeltaClass(delta, false)
+}
+
+function userIcon(userName: string) {
+  return wiki.isTemporaryAccount(userName) ? cdxIconUserTemporary : cdxIconUserAvatar
+}
+
+function userUrl(userName: string): string {
+  return wiki.getUserUrl(userName)
+}
+
+const displayComment = computed(() => {
+  if (props.item.commentHtml) return null
+  if (!props.item.comment?.trim()) return ''
+  return formatDashpageEditSummaryPlain(props.item.comment, props.item.pageTitle, wiki)
+})
+</script>
+
+<template>
+  <li class="review-changes__item">
+    <a
+      class="review-changes__item-link"
+      :class="[
+        linkBorderClass,
+        {
+          'review-changes__item-link--revision-viewed': isViewed,
+          'review-changes__item-link--unviewed': !isViewed,
+        },
+      ]"
+      :href="item.diffUrl"
+      target="_blank"
+      rel="noopener noreferrer"
+      :aria-label="`Open diff for ${item.pageTitle}`"
+      @click="onCardClick"
+    >
+      <div
+        class="review-changes__item-header"
+        :class="{ 'review-changes__item-header--has-primary-flag': hasPrimaryFlag }"
+      >
+        <span
+          v-if="primaryFlagChip && primaryFlagChipIcon"
+          class="review-changes__primary-flag-chip"
+          :class="`review-changes__primary-flag-chip--${primaryFlagChip.variant}`"
+          :aria-label="primaryFlagAriaLabel"
+        >
+          <CdxIcon
+            :icon="primaryFlagChipIcon"
+            size="small"
+            class="review-changes__primary-flag-chip-icon"
+            aria-hidden="true"
+          />
+          <span class="review-changes__primary-flag-chip-text">{{ primaryFlagChip.label }}</span>
+        </span>
+        <span class="review-changes__page-cell">
+          <span
+            class="review-changes__page-cell-heading review-changes__page-cell-heading--separate"
+          >
+            <span class="review-changes__page">{{ item.pageTitle }}</span>
+            <span
+              v-if="item.shortDescription"
+              class="review-changes__short-desc review-changes__short-desc--no-separator"
+            >
+              {{ item.shortDescription }}
+            </span>
+          </span>
+          <span class="review-changes__user-time-group">
+            <span class="review-changes__user-row">
+              <span
+                class="review-changes__user-icon-btn"
+                :aria-label="`User: ${item.userName}`"
+              >
+                <CdxIcon
+                  class="review-changes__user-icon"
+                  :icon="userIcon(item.userName)"
+                  size="x-small"
+                  aria-hidden="true"
+                />
+              </span>
+              <a
+                target="_blank"
+                rel="noopener noreferrer"
+                :href="userUrl(item.userName)"
+                class="review-changes__user"
+                @click.stop
+              >
+                {{ item.userName }}
+              </a>
+            </span>
+            <span class="review-changes__time-sep" aria-hidden="true">·</span>
+            <time :datetime="item.timestamp" class="review-changes__time">
+              {{ formatRelativeTime(item.timestamp) }}
+            </time>
+          </span>
+          <div
+            class="review-changes__structured-delta-row"
+            :class="{ 'review-changes__structured-delta-row--viewed': isViewed }"
+          >
+            <template v-if="item.structuredDeltaSegments?.length">
+              <span :class="structuredDeltaOpenParenClass">(</span>
+              <template
+                v-for="(seg, index) in item.structuredDeltaSegments"
+                :key="`${item.revId}-delta-${index}`"
+              >
+                <span :class="seg.deltaClass">{{ seg.text }}</span>
+                <span
+                  v-if="index < item.structuredDeltaSegments.length - 1"
+                  :class="seg.deltaClass"
+                >
+                  ,
+                </span>
+              </template>
+              <span :class="structuredDeltaCloseParenClass">)</span>
+            </template>
+            <template v-else>
+              <span :class="deltaFallbackClass(item.delta)">{{ formatDelta(item.delta) }}</span>
+            </template>
+          </div>
+          <div v-if="item.commentHtml || displayComment" class="review-changes__summary">
+            <span
+              v-if="item.commentHtml"
+              class="review-changes__comment review-changes__comment--no-cutout"
+              v-html="item.commentHtml"
+            />
+            <span
+              v-else
+              class="review-changes__comment review-changes__comment--no-cutout"
+            >
+              {{ displayComment }}
+            </span>
+          </div>
+        </span>
+      </div>
+    </a>
+  </li>
+</template>
+
+<style src="./recent-changes-feed.css"></style>
diff --git a/src/prototypes/template-homepage/RecentChangesModule.vue b/src/prototypes/template-homepage/RecentChangesModule.vue
new file mode 100644
index 0000000..515a417
--- /dev/null
+++ b/src/prototypes/template-homepage/RecentChangesModule.vue
@@ -0,0 +1,229 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { CdxButton, CdxIcon } from '@wikimedia/codex'
+import { cdxIconEdit, cdxIconReload } from '@wikimedia/codex-icons'
+
+import DashboardModule from '@/components/DashboardModule.vue'
+import type { RouteLocationRaw } from 'vue-router'
+import type { RecentChangeFeedItem } from '@/lib/dashpageRecentChangesTypes'
+import { DASHPAGE_RC_PREVIEW_MAX } from '@/lib/dashpageRecentChangesConstants'
+
+interface Props {
+  to?: RouteLocationRaw
+  items?: RecentChangeFeedItem[]
+  loadPending?: boolean
+  showRefresh?: boolean
+  refreshing?: boolean
+  refreshError?: string | null
+  emptyMessage?: string | null
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  to: undefined,
+  items: undefined,
+  loadPending: false,
+  showRefresh: false,
+  refreshing: false,
+  refreshError: undefined,
+  emptyMessage: undefined,
+})
+
+const emit = defineEmits<{
+  load: []
+  refresh: []
+}>()
+
+const previewItems = computed(() => (props.items ?? []).slice(0, DASHPAGE_RC_PREVIEW_MAX))
+
+const hasPreview = computed(() => previewItems.value.length > 0)
+
+const showLoadPrompt = computed(() => props.loadPending && !hasPreview.value)
+
+const isLinkCard = computed(() => props.to != null)
+
+const useLinkCard = computed(() => isLinkCard.value && hasPreview.value)
+
+const showRefreshInTitle = computed(
+  () => props.showRefresh && !showLoadPrompt.value && !useLinkCard.value,
+)
+
+function onRefreshClick(event: Event): void {
+  event.preventDefault()
+  event.stopPropagation()
+  emit('refresh')
+}
+
+function onLoadClick(): void {
+  emit('load')
+}
+</script>
+
+<template>
+  <div class="recent-changes-module">
+    <DashboardModule
+      class="recent-changes-module__variant recent-changes-module__variant--mobile"
+      title="Recent changes"
+      :to="useLinkCard ? to : undefined"
+      :cta="null"
+      :mobile-card="!useLinkCard"
+    >
+      <template v-if="showRefreshInTitle" #header-actions>
+        <CdxButton
+          weight="quiet"
+          :icon-only="true"
+          aria-label="Refresh recent changes"
+          :disabled="refreshing"
+          @click="onRefreshClick"
+        >
+          <CdxIcon :icon="cdxIconReload" />
+        </CdxButton>
+      </template>
+
+      <p v-if="refreshError" class="recent-changes-module__error" role="alert">
+        {{ refreshError }}
+      </p>
+
+      <div v-if="showLoadPrompt" class="recent-changes-module__load-prompt">
+        <CdxButton
+          action="progressive"
+          weight="primary"
+          :disabled="refreshing"
+          @click.stop="onLoadClick"
+        >
+          {{ refreshing ? 'Loading…' : 'Load' }}
+        </CdxButton>
+      </div>
+
+      <template v-else-if="emptyMessage">
+        <p class="recent-changes-module__empty">{{ emptyMessage }}</p>
+        <CdxButton
+          v-if="showRefresh"
+          weight="quiet"
+          :disabled="refreshing"
+          @click.stop="onRefreshClick"
+        >
+          {{ refreshing ? 'Loading…' : 'Try again' }}
+        </CdxButton>
+      </template>
+
+      <template v-else-if="hasPreview">
+        <div
+          v-for="item in previewItems"
+          :key="`${item.pageTitle}-${item.revId}`"
+          class="recent-changes-module__preview-item"
+        >
+          <CdxIcon :icon="cdxIconEdit" size="small" class="recent-changes-module__preview-icon" />
+          <div class="recent-changes-module__preview-text">
+            <span>
+              <span class="recent-changes-module__username">{{ item.userName }}</span>
+              edited
+              <template v-if="item.pageTitle">
+                the
+                <strong class="recent-changes-module__page">{{ item.pageTitle }}</strong>
+                article.
+              </template>
+              <template v-else>an article.</template>
+            </span>
+          </div>
+        </div>
+      </template>
+    </DashboardModule>
+
+    <DashboardModule
+      class="recent-changes-module__variant recent-changes-module__variant--desktop"
+      title="Recent changes"
+    >
+      <p class="recent-changes-module__desktop-stub">Available on mobile.</p>
+    </DashboardModule>
+  </div>
+</template>
+
+<style scoped>
+.recent-changes-module__variant--mobile {
+  display: none;
+}
+
+.recent-changes-module__variant--desktop {
+  display: block;
+}
+
+[data-skin='mobile'] .recent-changes-module__variant--mobile {
+  display: block;
+}
+
+[data-skin='mobile'] .recent-changes-module__variant--desktop {
+  display: none;
+}
+
+.recent-changes-module__variant--mobile :deep(.dashboard-module__body) {
+  padding-top: var(--spacing-100, 16px);
+}
+
+.recent-changes-module__load-prompt {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-75, 12px);
+  min-height: 6rem;
+  padding: var(--spacing-100, 16px) 0;
+}
+
+.recent-changes-module__error {
+  margin: 0 0 var(--spacing-50, 8px);
+  font-size: var(--font-size-small);
+  color: var(--color-error, #bf3c2c);
+}
+
+.recent-changes-module__empty {
+  margin: 0 0 var(--spacing-75, 12px);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-base--subtle, #54595d);
+}
+
+.recent-changes-module__preview-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-50, 8px);
+  margin-bottom: var(--spacing-50, 8px);
+}
+
+.recent-changes-module__preview-item:last-child {
+  margin-bottom: 0;
+}
+
+.recent-changes-module__preview-icon {
+  flex-shrink: 0;
+  margin-top: 2px;
+  color: var(--color-base--subtle, #54595d);
+}
+
+.recent-changes-module__preview-text {
+  min-width: 0;
+  overflow: hidden;
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-base, #202122);
+}
+
+.recent-changes-module__username {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: bottom;
+}
+
+.recent-changes-module__page {
+  font-weight: var(--font-weight-bold, bold);
+}
+
+.recent-changes-module__desktop-stub {
+  margin: 0;
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-base--subtle, #54595d);
+}
+</style>
diff --git a/src/prototypes/template-homepage/RecentChangesView.vue b/src/prototypes/template-homepage/RecentChangesView.vue
new file mode 100644
index 0000000..50f675d
--- /dev/null
+++ b/src/prototypes/template-homepage/RecentChangesView.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { CdxButton } from '@wikimedia/codex'
+
+import type { RecentChangeFeedItem } from '@/lib/dashpageRecentChangesTypes'
+import RecentChangesFeedItem from './RecentChangesFeedItem.vue'
+
+interface Props {
+  items?: RecentChangeFeedItem[]
+  loadPending?: boolean
+  showRefresh?: boolean
+  refreshing?: boolean
+  refreshError?: string | null
+  emptyMessage?: string | null
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: undefined,
+  loadPending: false,
+  showRefresh: false,
+  refreshing: false,
+  refreshError: undefined,
+  emptyMessage: undefined,
+})
+
+const emit = defineEmits<{
+  load: []
+  refresh: []
+}>()
+
+const feedItems = computed(() => props.items ?? [])
+
+const showLoadPrompt = computed(() =>
+  props.loadPending && !feedItems.value.length,
+)
+
+function onLoadClick(): void {
+  emit('load')
+}
+
+function onRefreshClick(): void {
+  emit('refresh')
+}
+</script>
+
+<template>
+  <div class="review-changes-view">
+    <p v-if="refreshError" class="review-changes-view__error" role="alert">
+      {{ refreshError }}
+    </p>
+
+    <div v-if="showLoadPrompt" class="review-changes-view__load-prompt">
+      <CdxButton
+        action="progressive"
+        weight="primary"
+        :disabled="refreshing"
+        @click="onLoadClick"
+      >
+        {{ refreshing ? 'Loading…' : 'Load' }}
+      </CdxButton>
+    </div>
+
+    <ul v-if="feedItems.length" class="review-changes__feed">
+      <RecentChangesFeedItem
+        v-for="item in feedItems"
+        :key="item.revId"
+        :item="item"
+      />
+    </ul>
+
+    <template v-else-if="emptyMessage && !showLoadPrompt">
+      <p class="review-changes-view__empty">{{ emptyMessage }}</p>
+      <div v-if="showRefresh" class="review-changes-view__empty-actions">
+        <CdxButton weight="quiet" :disabled="refreshing" @click="onRefreshClick">
+          {{ refreshing ? 'Loading…' : 'Try again' }}
+        </CdxButton>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style src="./recent-changes-feed.css"></style>
diff --git a/src/prototypes/template-homepage/SuggestedEditsView.vue b/src/prototypes/template-homepage/SuggestedEditsView.vue
index b87a464..562e0bf 100644
--- a/src/prototypes/template-homepage/SuggestedEditsView.vue
+++ b/src/prototypes/template-homepage/SuggestedEditsView.vue
@@ -91,13 +91,18 @@ const displayIndex = computed(() => (props.currentIndex ?? 0) + 1)
 
 const counterLabel = computed(() => {
   const total = props.totalCount ?? 1
-  return `${displayIndex.value} of ${total.toLocaleString()} suggestions`
+  const suffix = props.refreshing ? '+' : ''
+  return `${displayIndex.value} of ${total.toLocaleString()}${suffix} suggestions`
 })
 
 const taskTitle = computed(() => props.taskHeading ?? props.taskTypeLabel)
 
 const hasPreview = computed(
-  () => !props.loadPending && !!props.articleTitle && (!!taskTitle.value || !!props.emptyMessage),
+  () => !!props.articleTitle && (!!taskTitle.value || !!props.emptyMessage),
+)
+
+const showLoadPrompt = computed(
+  () => props.loadPending && !hasPreview.value,
 )
 
 const taskTypeColor = computed(() =>
@@ -155,7 +160,7 @@ function onNavigate(delta: number): void {
         {{ refreshError }}
       </p>
 
-      <div v-if="loadPending" class="suggested-edits-view__load-prompt">
+      <div v-if="showLoadPrompt" class="suggested-edits-view__load-prompt">
         <CdxButton
           action="progressive"
           weight="primary"
diff --git a/src/prototypes/template-homepage/SuggestionModeModule.vue b/src/prototypes/template-homepage/SuggestionModeModule.vue
index 8fd98a8..6915ab2 100644
--- a/src/prototypes/template-homepage/SuggestionModeModule.vue
+++ b/src/prototypes/template-homepage/SuggestionModeModule.vue
@@ -54,22 +54,26 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<{
   load: []
   refresh: []
+  'open-fullscreen': []
 }>()
 
 const hasPreview = computed(
   () =>
-    !props.loadPending &&
     !!props.articleTitle &&
     (!!props.taskTypeLabel || !!props.emptyMessage),
 )
 
+const showLoadPrompt = computed(
+  () => props.loadPending && !hasPreview.value,
+)
+
 const isLinkCard = computed(() => props.to != null)
 
 /** Link card only when preview is shown — load/empty states need interactive controls. */
 const useLinkCard = computed(() => isLinkCard.value && hasPreview.value)
 
 const showRefreshInTitle = computed(
-  () => props.showRefresh && !props.loadPending && !useLinkCard.value,
+  () => props.showRefresh && !showLoadPrompt.value && !useLinkCard.value,
 )
 
 const showSuggestionCounter = computed(
@@ -92,6 +96,11 @@ function onRefreshClick(event: Event): void {
 function onLoadClick(): void {
   emit('load')
 }
+
+function onOpenFullscreen(): void {
+  if (!useLinkCard.value) return
+  emit('open-fullscreen')
+}
 </script>
 
 <template>
@@ -103,6 +112,7 @@ function onLoadClick(): void {
       :cta="useLinkCard ? 'See all suggestions' : null"
       :mobile-card="!useLinkCard"
       subtle
+      @click="onOpenFullscreen"
     >
       <template v-if="showRefreshInTitle" #header-actions>
         <CdxButton
@@ -120,7 +130,7 @@ function onLoadClick(): void {
         {{ refreshError }}
       </p>
 
-      <div v-if="loadPending" class="suggestion-mode-module__load-prompt">
+      <div v-if="showLoadPrompt" class="suggestion-mode-module__load-prompt">
         <CdxButton
           action="progressive"
           weight="primary"
@@ -133,7 +143,7 @@ function onLoadClick(): void {
           v-if="isLinkCard"
           :to="to!"
           class="suggestion-mode-module__see-all"
-          @click.stop
+          @click.stop="onOpenFullscreen"
         >
           See all suggestions
         </RouterLink>
diff --git a/src/prototypes/template-homepage/dashpage-fixtures.ts b/src/prototypes/template-homepage/dashpage-fixtures.ts
index 9dcbcc8..4ba7ae5 100644
--- a/src/prototypes/template-homepage/dashpage-fixtures.ts
+++ b/src/prototypes/template-homepage/dashpage-fixtures.ts
@@ -18,6 +18,9 @@ export const MENTOR_PAGE = '/template-homepage/mentor'
 /** Full-page mobile drill-down for the Suggested edits module. */
 export const SUGGESTED_EDITS_PAGE = '/template-homepage/suggested-edits'
 
+/** Full-page mobile drill-down for the Recent changes module. */
+export const RECENT_CHANGES_PAGE = '/template-homepage/recent-changes'
+
 /** Mobile link-card preview copy (title is also the full-page header). */
 export const HELP_MODULE = {
   title: 'Get help with editing',
@@ -126,8 +129,9 @@ export const STRUCTURED_TASKS_FULL = {
   articleTitle: 'Okta Logue',
   articleDescription:
     'Okta Logue are a four-piece rock band based in Griesheim, Hessen Germany. The members consist o',
+  /** Action API `pageimages` + `pithumbsize=640` for [[Okta Logue]] (Commons serves 960px rendition) */
   thumbnailSrc:
-    'https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Okta_Logue_Moltow_HH_2019.jpg/640px-Okta_Logue_Moltow_HH_2019.jpg',
+    'https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Okta_Logue_Moltow_HH_2019.jpg/960px-Okta_Logue_Moltow_HH_2019.jpg',
   pageviewsLabel: '258 visits (past 60 days)',
   taskHeading: 'Add links between articles',
   taskDifficulty: 'easy' as const,
diff --git a/src/prototypes/template-homepage/impact/index.vue b/src/prototypes/template-homepage/impact/index.vue
index 13e254c..7fbb814 100644
--- a/src/prototypes/template-homepage/impact/index.vue
+++ b/src/prototypes/template-homepage/impact/index.vue
@@ -7,6 +7,7 @@ import DashpageChromeWrapper from '../DashpageChromeWrapper.vue'
 import SpecialPageWrapper from '@/components/SpecialPageWrapper.vue'
 import { useConfig } from '@/composables/useConfig'
 import { useRealUserImpact } from '@/composables/useRealUserImpact'
+import { shouldShowDashpageLoadPrompt } from '@/lib/dashpageLoadState'
 import ImpactModule from '../ImpactModule.vue'
 import MobileSubpageHeader from '../MobileSubpageHeader.vue'
 import { HOMEPAGE, IMPACT_DESKTOP } from '../dashpage-fixtures'
@@ -29,7 +30,12 @@ const impactProps = computed(() => {
     return { ...IMPACT_DESKTOP }
   }
   if (user.value === 'real') {
-    if (!realImpact.hasCache.value) {
+    if (
+      shouldShowDashpageLoadPrompt(
+        realImpact.hasStarted.value,
+        realImpact.hasRenderableData.value,
+      )
+    ) {
       return {
         loadPending: true,
         refreshing: realImpact.loading.value,
@@ -46,7 +52,15 @@ const impactProps = computed(() => {
   return { thanksReceived: 0 }
 })
 
-const showRealRefresh = computed(() => user.value === 'real' && realImpact.hasCache.value)
+const showRealRefresh = computed(
+  () =>
+    user.value === 'real' &&
+    realImpact.hasRenderableData.value &&
+    !shouldShowDashpageLoadPrompt(
+      realImpact.hasStarted.value,
+      realImpact.hasRenderableData.value,
+    ),
+)
 
 function onRefreshClick(): void {
   void realImpact.refresh()
diff --git a/src/prototypes/template-homepage/index.vue b/src/prototypes/template-homepage/index.vue
index 1152bb5..e963da0 100644
--- a/src/prototypes/template-homepage/index.vue
+++ b/src/prototypes/template-homepage/index.vue
@@ -13,20 +13,24 @@ import ImpactModule from './ImpactModule.vue'
 import MentorModule from './MentorModule.vue'
 import StructuredTasksModule from './StructuredTasksModule.vue'
 import SuggestionModeModule from './SuggestionModeModule.vue'
+import RecentChangesModule from './RecentChangesModule.vue'
 import {
+  APP_HOME,
   HELP_LINKS,
   HELP_MODULE,
   HELP_PAGE,
   MENTOR,
   MENTOR_PAGE,
+  RECENT_CHANGES_PAGE,
   STRUCTURED_TASKS,
 } from './dashpage-fixtures'
 import { useDashpageSettings } from './useDashpageSettings'
 import { useDashpageSuggestionModule } from './useDashpageSuggestionModule'
+import { useDashpageRecentChangesModule } from './useDashpageRecentChangesModule'
 import { useHomepageImpact } from './useHomepageImpact'
 import { useHomepageSuggestedEdits } from './useHomepageSuggestedEdits'
 
-const { user, pageTitle } = useConfig()
+const { user, pageTitle, realUsername, currentUserPageLists } = useConfig()
 const { editSuggestionSource } = useDashpageSettings()
 const { impactMobileProps, impactDesktopProps, onImpactRefresh } = useHomepageImpact()
 const { suggestedEditsLinkTo } = useHomepageSuggestedEdits()
@@ -34,13 +38,32 @@ const {
   moduleProps: suggestionModuleProps,
   onSuggestionLoad,
   onSuggestionRefresh,
+  onSuggestionOpenFullscreen,
 } = useDashpageSuggestionModule()
+const {
+  moduleProps: recentChangesModuleProps,
+  onRecentChangesLoad,
+  onRecentChangesRefresh,
+} = useDashpageRecentChangesModule()
 
 const showStructuredTasks = computed(() => editSuggestionSource.value === 'structured-tasks')
 const showSuggestionMode = computed(() => editSuggestionSource.value === 'suggestion-mode')
 
 const showLoggedInModules = computed(() => user.value !== 'logged-out')
 
+const showRecentChangesModule = computed(() => {
+  if (user.value === 'logged-out' || user.value === 'new') return false
+
+  if (user.value === 'real') {
+    if (!realUsername.value.trim()) return false
+    const { totalEdits } = impactMobileProps.value
+    if (totalEdits != null) return totalEdits > 0
+    return currentUserPageLists.value.editedPages.length > 0
+  }
+
+  return currentUserPageLists.value.editedPages.length > 0
+})
+
 definePage({
   meta: {
     title: 'Dashpage',
@@ -75,6 +98,16 @@ definePage({
               v-bind="suggestionModuleProps"
               @load="onSuggestionLoad"
               @refresh="onSuggestionRefresh"
+              @open-fullscreen="onSuggestionOpenFullscreen"
+            />
+
+            <RecentChangesModule
+              v-if="showRecentChangesModule"
+              class="dashboard-slot--mobile-primary"
+              :to="RECENT_CHANGES_PAGE"
+              v-bind="recentChangesModuleProps"
+              @load="onRecentChangesLoad"
+              @refresh="onRecentChangesRefresh"
             />
 
             <ImpactModule
@@ -111,6 +144,11 @@ definePage({
               @load="onSuggestionLoad"
               @refresh="onSuggestionRefresh"
             />
+
+            <RecentChangesModule
+              v-if="showRecentChangesModule"
+              class="dashboard-slot--desktop-primary"
+            />
           </template>
 
           <template #sidebar>
diff --git a/src/prototypes/template-homepage/recent-changes-feed.css b/src/prototypes/template-homepage/recent-changes-feed.css
new file mode 100644
index 0000000..3f639b3
--- /dev/null
+++ b/src/prototypes/template-homepage/recent-changes-feed.css
@@ -0,0 +1,432 @@
+/* Ported subset of FakeMediaWiki ReviewChangesPlusFeed/style.css */
+
+.review-changes__feed {
+  list-style: none;
+  margin: 0;
+  --review-changes-gap: 2px;
+  --review-changes-card-gap: 0;
+  padding: 0 var(--review-changes-gap) var(--review-changes-gap);
+  flex: 1;
+  min-height: 0;
+  background-color: var(--background-color-neutral);
+  gap: var(--review-changes-card-gap);
+  display: flex;
+  flex-direction: column;
+  border-top: none;
+}
+
+.review-changes__item {
+  box-sizing: border-box;
+  margin-bottom: 0;
+  border-radius: 2px;
+}
+
+.review-changes__item-link {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  min-width: 0;
+  padding: 16px;
+  box-sizing: border-box;
+  text-decoration: none;
+  background-color: var(--background-color-base);
+  color: inherit;
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  cursor: pointer;
+  border: 1px solid var(--background-color-base);
+  border-radius: 2px;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.review-changes__item-link:hover,
+.review-changes__item-link:active,
+.review-changes__item-link:focus,
+.review-changes__item-link:focus-visible,
+.review-changes__item-link:visited {
+  text-decoration: none;
+  color: inherit;
+}
+
+.review-changes__item-link:hover *,
+.review-changes__item-link:active *,
+.review-changes__item-link:focus * {
+  text-decoration: none;
+}
+
+@media (pointer: fine) {
+  .review-changes__item-link:hover {
+    border-color: var(--border-color-subtle);
+  }
+
+  .review-changes__item-link--primary-unviewed-tone:hover,
+  .review-changes__item-link--primary-unviewed-revert-warn:hover {
+    border-width: 2px;
+    margin: -1px;
+    border-radius: 2px;
+    border-color: var(--border-color-warning);
+  }
+
+  .review-changes__item-link--primary-unviewed-quality-up:hover {
+    border-width: 2px;
+    margin: -1px;
+    border-radius: 2px;
+    border-color: var(--border-color-progressive, #3056a9);
+  }
+
+  .review-changes__item-link--primary-unviewed-revert:hover {
+    border-width: 2px;
+    margin: -1px;
+    border-radius: 2px;
+    border-color: var(--border-color-error);
+  }
+}
+
+.review-changes__item-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  width: 100%;
+  row-gap: 0;
+  flex-wrap: wrap;
+}
+
+.review-changes__item-header--has-primary-flag {
+  padding-right: 9.5rem;
+}
+
+.review-changes__primary-flag-chip {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  box-sizing: border-box;
+  padding: 2px 8px;
+  border-radius: 2px;
+  font-size: var(--font-size-x-small, 0.8125rem);
+  line-height: var(--line-height-x-small, 1.25);
+  font-weight: var(--font-weight-normal, 400);
+  pointer-events: none;
+}
+
+.review-changes__primary-flag-chip-icon {
+  flex-shrink: 0;
+  color: inherit;
+}
+
+.review-changes__primary-flag-chip-text {
+  white-space: nowrap;
+}
+
+.review-changes__primary-flag-chip--progressive {
+  color: #3c64b1;
+  background-color: #eaf2ff;
+}
+
+.review-changes__primary-flag-chip--success {
+  color: var(--color-success, #0e9f6e);
+  background-color: var(--background-color-success-subtle, #dff2eb);
+}
+
+.review-changes__primary-flag-chip--warning {
+  color: var(--color-warning, #886425);
+  background-color: var(--background-color-warning-subtle, #fdf2d5);
+}
+
+.review-changes__primary-flag-chip--destructive {
+  color: var(--color-destructive, #b32424);
+  background-color: var(--background-color-error-subtle, #ffe9e5);
+}
+
+.review-changes__item-link--primary-unviewed-tone {
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--border-color-warning, #ab7f2a);
+}
+
+.review-changes__item-link--primary-unviewed-quality-up {
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--border-color-progressive, #3056a9);
+}
+
+.review-changes__item-link--primary-unviewed-revert {
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--border-color-destructive, #b32424);
+}
+
+.review-changes__item-link--primary-unviewed-revert-warn {
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--border-color-warning, #ab7f2a);
+}
+
+.review-changes__page-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  flex-grow: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.review-changes__page-cell > * {
+  box-sizing: border-box;
+}
+
+.review-changes__page-cell-heading--separate {
+  display: inline;
+  align-items: center;
+  min-width: 0;
+  flex-grow: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.review-changes__page {
+  font-weight: 700;
+  color: var(--color-base--subtle);
+  flex-shrink: 1;
+}
+
+.review-changes__short-desc {
+  color: var(--color-base--subtle, #54595d);
+  font-weight: normal;
+  margin-left: 6px;
+}
+
+.review-changes__short-desc--no-separator {
+  margin-left: 8px;
+}
+
+.review-changes__user-time-group {
+  display: inline-flex;
+  align-items: center;
+  align-self: flex-start;
+  gap: 0.25rem;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.review-changes__user-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.review-changes__user-icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--color-base--subtle, #54595d);
+  padding: 0;
+  border-width: 0;
+}
+
+.review-changes__user-icon {
+  flex-shrink: 0;
+  height: 16px;
+  width: 16px;
+}
+
+.review-changes__user-row .review-changes__user-icon {
+  color: inherit;
+}
+
+.review-changes__user {
+  display: inline-block;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-base--subtle, #54595d);
+  font-weight: normal;
+  text-decoration: none;
+}
+
+.review-changes__user:active {
+  text-decoration: none;
+}
+
+@media (pointer: fine) {
+  .review-changes__user:hover {
+    color: var(--color-progressive--hover, #3056a9);
+    text-decoration: underline;
+  }
+}
+
+.review-changes__time-sep {
+  color: var(--color-base--subtle, #54595d);
+}
+
+.review-changes__time {
+  color: var(--color-base--subtle, #54595d);
+  flex-shrink: 0;
+}
+
+.review-changes__item-link--unviewed {
+  background-color: var(--background-color-base);
+}
+
+.review-changes__item-link--revision-viewed {
+  background-color: var(--background-color-neutral-subtle);
+  border-color: var(--background-color-neutral-subtle);
+}
+
+.review-changes__item-link--revision-viewed .review-changes__primary-flag-chip {
+  color: var(--color-subtle, #54595d);
+  background-color: var(--background-color-neutral, #eaecf0);
+}
+
+.review-changes__item-link--revision-viewed .review-changes__primary-flag-chip-icon {
+  color: inherit;
+}
+
+.review-changes__item-link--unviewed .review-changes__page {
+  color: var(--color-emphasized, #202122);
+}
+
+.review-changes__item-link--unviewed .review-changes__short-desc {
+  color: var(--color-emphasized, #202122);
+}
+
+.review-changes__item-link--unviewed .review-changes__time {
+  color: var(--color-emphasized, #202122);
+}
+
+.review-changes__item-link--unviewed .review-changes__time-sep {
+  color: var(--color-emphasized, #202122);
+}
+
+.review-changes__item-link--unviewed .review-changes__user {
+  color: var(--color-emphasized, #202122);
+  font-weight: var(--font-weight-bold, bold);
+}
+
+.review-changes__item-link--unviewed .review-changes__user-row .review-changes__user-icon,
+.review-changes__item-link--unviewed .review-changes__user-icon-btn {
+  color: var(--color-emphasized, #202122);
+}
+
+.review-changes__item-link--unviewed .review-changes__summary {
+  color: var(--color-emphasized, #202122);
+}
+
+.review-changes__structured-delta-row {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+
+.review-changes__summary {
+  color: var(--color-base--subtle);
+  display: block;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  margin-bottom: 0;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+
+.review-changes__comment--no-cutout {
+  background-color: transparent;
+  border: none;
+  box-shadow: none;
+  padding: 0;
+  display: block;
+  line-height: inherit;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+
+/* Parsoid transform HTML — flatten block wrappers (must not use :deep; sheet is global). */
+.review-changes__comment--no-cutout p,
+.review-changes__comment--no-cutout section,
+.review-changes__comment--no-cutout div,
+.review-changes__comment--no-cutout span,
+.review-changes__comment--no-cutout table {
+  display: inline;
+  line-height: inherit;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  text-decoration: none;
+  color: inherit;
+}
+
+.change-types-delta-add {
+  color: var(--color-content-added);
+}
+
+.change-types-delta-remove {
+  color: var(--color-content-removed);
+}
+
+.change-types-delta-change {
+  color: var(--color-progressive, #36c);
+}
+
+.review-changes__structured-delta-row--viewed {
+  color: var(--color-base--subtle, #54595d);
+}
+
+.review-changes__structured-delta-row--viewed .change-types-delta-add,
+.review-changes__structured-delta-row--viewed .change-types-delta-remove,
+.review-changes__structured-delta-row--viewed .change-types-delta-change {
+  color: var(--color-base--subtle, #54595d);
+}
+
+.review-changes-view {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  overflow: auto;
+  width: 100%;
+  background-color: var(--background-color-neutral);
+  /*
+   * Cancel SpecialPageWrapper mobile inline padding so feed edge inset
+   * matches the gap between cards (FMW: .special-view--review-changes).
+   */
+  --review-changes-bleed-inline: var(--spacing-100, 16px);
+  width: calc(100% + 2 * var(--review-changes-bleed-inline));
+  margin-inline: calc(-1 * var(--review-changes-bleed-inline));
+}
+
+.review-changes-view__error {
+  margin: var(--spacing-100, 16px);
+  font-size: var(--font-size-small);
+  color: var(--color-error, #bf3c2c);
+}
+
+.review-changes-view__load-prompt {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-200, 32px);
+}
+
+.review-changes-view__empty {
+  margin: var(--spacing-100, 16px);
+  font-size: var(--font-size-small);
+  color: var(--color-base--subtle, #54595d);
+}
+
+.review-changes-view__empty-actions {
+  margin: 0 var(--spacing-100, 16px);
+}
diff --git a/src/prototypes/template-homepage/recent-changes/index.vue b/src/prototypes/template-homepage/recent-changes/index.vue
new file mode 100644
index 0000000..a858915
--- /dev/null
+++ b/src/prototypes/template-homepage/recent-changes/index.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { CdxButton, CdxIcon } from '@wikimedia/codex'
+import { cdxIconReload } from '@wikimedia/codex-icons'
+
+import TaskFullscreenShell from '../TaskFullscreenShell.vue'
+import SpecialPageWrapper from '@/components/SpecialPageWrapper.vue'
+import MobileWrapper from '@/components/MobileWrapper.vue'
+import MobileSubpageHeader from '../MobileSubpageHeader.vue'
+import RecentChangesView from '../RecentChangesView.vue'
+import { HOMEPAGE } from '../dashpage-fixtures'
+import { useDashpageRecentChangesModule } from '../useDashpageRecentChangesModule'
+
+const { fullscreenProps, onRecentChangesLoad, onRecentChangesRefresh } =
+  useDashpageRecentChangesModule()
+
+const showHeaderRefresh = computed(() => fullscreenProps.value.showRefresh === true)
+
+definePage({
+  meta: {
+    title: 'Dashpage — Recent changes',
+    description: 'Full-page mobile drill-down for the Recent changes homepage module.',
+  },
+})
+</script>
+
+<template>
+  <MobileWrapper>
+    <TaskFullscreenShell skin="mobile">
+      <div class="recent-changes-layout">
+        <div class="recent-changes-layout__header">
+          <MobileSubpageHeader
+            title="Recent changes"
+            :back-to="HOMEPAGE"
+            back-label="Back to homepage"
+            :bleed="false"
+          >
+            <template v-if="showHeaderRefresh" #actions>
+              <CdxButton
+                weight="quiet"
+                :icon-only="true"
+                aria-label="Refresh recent changes"
+                :disabled="fullscreenProps.refreshing"
+                @click="onRecentChangesRefresh"
+              >
+                <CdxIcon :icon="cdxIconReload" />
+              </CdxButton>
+            </template>
+          </MobileSubpageHeader>
+        </div>
+
+        <SpecialPageWrapper :title="null" skin="mobile" class="recent-changes-page">
+          <RecentChangesView
+            v-bind="fullscreenProps"
+            @load="onRecentChangesLoad"
+            @refresh="onRecentChangesRefresh"
+          />
+        </SpecialPageWrapper>
+      </div>
+    </TaskFullscreenShell>
+  </MobileWrapper>
+</template>
+
+<style scoped>
+.recent-changes-layout {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.recent-changes-layout__header {
+  flex-shrink: 0;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0 4px;
+  background-color: var(--background-color-base, #fff);
+  border-bottom: 1px solid var(--border-color-base, #a2a9b1);
+}
+
+.recent-changes-layout__header :deep(.mobile-subpage-header) {
+  margin: 0;
+  padding: 0;
+  border-bottom: none;
+}
+
+.recent-changes-page {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: 100%;
+  min-height: 0;
+  overflow: hidden;
+  max-width: none;
+  margin: 0;
+  padding-block: 0;
+  padding-inline: var(--spacing-100, 16px);
+  background-color: var(--background-color-neutral, #eaecf0);
+}
+
+.recent-changes-page[data-skin='mobile'] {
+  padding-block: 0;
+  padding-inline: var(--spacing-100, 16px);
+}
+
+.recent-changes-page :deep(.special-page-wrapper__body) {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+}
+</style>
diff --git a/src/prototypes/template-homepage/suggested-edits/index.vue b/src/prototypes/template-homepage/suggested-edits/index.vue
index 87bb822..2f4f6d6 100644
--- a/src/prototypes/template-homepage/suggested-edits/index.vue
+++ b/src/prototypes/template-homepage/suggested-edits/index.vue
@@ -52,7 +52,7 @@ const viewProps = computed(() =>
 )
 
 const showHeaderRefresh = computed(
-  () => !showStructuredTasks.value && viewProps.value.showRefresh && !viewProps.value.loadPending,
+  () => !showStructuredTasks.value && viewProps.value.showRefresh === true,
 )
 
 definePage({
diff --git a/src/prototypes/template-homepage/useDashpageRecentChangesModule.ts b/src/prototypes/template-homepage/useDashpageRecentChangesModule.ts
new file mode 100644
index 0000000..41c41d8
--- /dev/null
+++ b/src/prototypes/template-homepage/useDashpageRecentChangesModule.ts
@@ -0,0 +1,248 @@
+import { computed, ref, watch } from 'vue'
+
+import { useConfig } from '@/composables/useConfig'
+import {
+  dashpageRecentChangesUserKey,
+  getDashpageRecentChangesCache,
+  setDashpageRecentChangesCache,
+} from '@/lib/dashpageRecentChangesCache'
+import { shouldShowDashpageLoadPrompt } from '@/lib/dashpageLoadState'
+import type { RecentChangeFeedItem } from '@/lib/dashpageRecentChangesTypes'
+import { sortRecentChangeFeedItems } from '@/lib/dashpageRecentChangesTypes'
+import { runDashpageRecentChangesPipeline } from '@/lib/fetchDashpageRecentChanges'
+import { DASHPAGE_RC_FULLSCREEN_MAX } from '@/lib/dashpageRecentChangesConstants'
+import { getPortfolioCache, setPortfolioCache } from '@/lib/dashpagePortfolioCache'
+import { fetchUserEditedPageTitles, FetchUserEditedPageTitlesError } from '@/lib/fetchUserEditedPageTitles'
+import { FetchMorelikePageTitlesError } from '@/lib/fetchMorelikePageTitles'
+
+export interface RecentChangesModuleBind {
+  items?: RecentChangeFeedItem[]
+  loadPending?: boolean
+  showRefresh?: boolean
+  refreshing?: boolean
+  refreshError?: string | null
+  emptyMessage?: string | null
+}
+
+const items = ref<RecentChangeFeedItem[]>([])
+const hasStarted = ref(false)
+const loading = ref(false)
+const error = ref<string | null>(null)
+const cachedRealTitles = ref<string[]>([])
+const lastFetchedAt = ref<number | null>(null)
+
+let abortController: AbortController | null = null
+let persistTimer: ReturnType<typeof setTimeout> | null = null
+
+function hasRenderableData(): boolean {
+  return items.value.length > 0
+}
+
+function schedulePersistCache(userKey: string): void {
+  if (persistTimer) clearTimeout(persistTimer)
+  persistTimer = setTimeout(() => {
+    persistTimer = null
+    if (!items.value.length) return
+    setDashpageRecentChangesCache(userKey, {
+      fetchedAt: Date.now(),
+      items: items.value,
+    })
+    lastFetchedAt.value = Date.now()
+  }, 300)
+}
+
+function applyItemsOrder(): void {
+  items.value = sortRecentChangeFeedItems(items.value)
+}
+
+function upsertItem(nextItem: RecentChangeFeedItem): void {
+  const index = items.value.findIndex((item) => item.revId === nextItem.revId)
+  if (index >= 0) {
+    items.value[index] = { ...items.value[index], ...nextItem }
+  } else {
+    items.value = [...items.value, nextItem]
+  }
+  applyItemsOrder()
+}
+
+function patchItem(revId: number, patch: Partial<RecentChangeFeedItem>): void {
+  const index = items.value.findIndex((item) => item.revId === revId)
+  if (index < 0) return
+  items.value[index] = { ...items.value[index], ...patch }
+  items.value = [...items.value]
+}
+
+function removeItem(revId: number): void {
+  items.value = items.value.filter((item) => item.revId !== revId)
+}
+
+function trimItemsToFeedCap(): void {
+  applyItemsOrder()
+  if (items.value.length > DASHPAGE_RC_FULLSCREEN_MAX) {
+    items.value = items.value.slice(0, DASHPAGE_RC_FULLSCREEN_MAX)
+  }
+}
+
+function loadFromModuleCache(userKey: string): void {
+  const cached = getDashpageRecentChangesCache(userKey)
+  if (!cached) {
+    hasStarted.value = false
+    lastFetchedAt.value = null
+    items.value = []
+    return
+  }
+
+  hasStarted.value = true
+  lastFetchedAt.value = cached.fetchedAt
+  items.value = sortRecentChangeFeedItems(cached.items).slice(0, DASHPAGE_RC_FULLSCREEN_MAX)
+  error.value = null
+}
+
+function loadRealPortfolioFromCache(username: string): void {
+  const portfolio = getPortfolioCache(username)
+  cachedRealTitles.value = portfolio?.titles ?? []
+}
+
+export function useDashpageRecentChangesModule() {
+  const { user, realUsername, currentUserPageLists } = useConfig()
+
+  watch(
+    [user, realUsername],
+    ([activeUser, username]) => {
+      error.value = null
+      if (activeUser === 'real') {
+        loadRealPortfolioFromCache(username)
+      } else {
+        cachedRealTitles.value = []
+      }
+      loadFromModuleCache(dashpageRecentChangesUserKey(activeUser, username))
+    },
+    { immediate: true },
+  )
+
+  async function runPipeline(forceRefresh: boolean): Promise<void> {
+    abortController?.abort()
+    abortController = new AbortController()
+    const { signal } = abortController
+
+    hasStarted.value = true
+    loading.value = true
+    error.value = null
+
+    const userKey = dashpageRecentChangesUserKey(user.value, realUsername.value)
+    const excludeRevIds = items.value.map((item) => item.revId)
+    let replaceOnFirstSkeleton = items.value.length > 0
+
+    try {
+      if (user.value === 'real') {
+        let portfolio = getPortfolioCache(realUsername.value)
+        if (!portfolio) {
+          const titles = await fetchUserEditedPageTitles(realUsername.value, { signal })
+          portfolio = setPortfolioCache(realUsername.value, titles)
+        }
+        cachedRealTitles.value = portfolio.titles
+      }
+
+      await runDashpageRecentChangesPipeline({
+        user: user.value,
+        pageLists: currentUserPageLists.value,
+        cachedRealTitles: cachedRealTitles.value,
+        excludeRevIds,
+        signal,
+        handlers: {
+          onSkeleton: (item) => {
+            if (replaceOnFirstSkeleton) {
+              items.value = []
+              replaceOnFirstSkeleton = false
+            }
+            upsertItem(item)
+            schedulePersistCache(userKey)
+          },
+          onPatch: (revId, patch) => {
+            patchItem(revId, patch)
+            schedulePersistCache(userKey)
+          },
+          onRemove: (revId) => {
+            removeItem(revId)
+            schedulePersistCache(userKey)
+          },
+        },
+      })
+
+      if (signal.aborted) return
+
+      trimItemsToFeedCap()
+
+      if (items.value.length) {
+        setDashpageRecentChangesCache(userKey, {
+          fetchedAt: Date.now(),
+          items: items.value,
+        })
+        lastFetchedAt.value = Date.now()
+      }
+    } catch (caught) {
+      if (
+        (caught instanceof FetchUserEditedPageTitlesError && caught.code === 'aborted') ||
+        (caught instanceof FetchMorelikePageTitlesError && caught.code === 'aborted') ||
+        (caught instanceof DOMException && caught.name === 'AbortError')
+      ) {
+        return
+      }
+
+      const message =
+        caught instanceof FetchUserEditedPageTitlesError ||
+        caught instanceof FetchMorelikePageTitlesError
+          ? caught.message
+          : caught instanceof Error
+            ? caught.message
+            : String(caught)
+      error.value = message
+    } finally {
+      loading.value = false
+    }
+  }
+
+  function baseProps(): RecentChangesModuleBind {
+    if (shouldShowDashpageLoadPrompt(hasStarted.value, hasRenderableData())) {
+      return {
+        loadPending: true,
+        refreshing: loading.value,
+        refreshError: error.value,
+      }
+    }
+
+    if (!loading.value && hasStarted.value && !items.value.length) {
+      return {
+        emptyMessage: 'No recent changes found.',
+        showRefresh: true,
+        refreshing: loading.value,
+        refreshError: error.value,
+      }
+    }
+
+    return {
+      items: items.value,
+      showRefresh: true,
+      refreshing: loading.value,
+      refreshError: error.value,
+    }
+  }
+
+  const moduleProps = computed((): RecentChangesModuleBind => baseProps())
+  const fullscreenProps = computed((): RecentChangesModuleBind => baseProps())
+
+  function onRecentChangesLoad(): void {
+    void runPipeline(false)
+  }
+
+  function onRecentChangesRefresh(): void {
+    void runPipeline(true)
+  }
+
+  return {
+    moduleProps,
+    fullscreenProps,
+    onRecentChangesLoad,
+    onRecentChangesRefresh,
+  }
+}
diff --git a/src/prototypes/template-homepage/useDashpageSettings.ts b/src/prototypes/template-homepage/useDashpageSettings.ts
index 75bd134..b9f16c0 100644
--- a/src/prototypes/template-homepage/useDashpageSettings.ts
+++ b/src/prototypes/template-homepage/useDashpageSettings.ts
@@ -11,6 +11,7 @@ export const EDIT_SUGGESTION_SOURCE_MENU_ITEMS: {
 ]
 
 const STORAGE_KEY = 'protowiki-dashpage-edit-suggestion-source'
+const DEFAULT_EDIT_SUGGESTION_SOURCE: EditSuggestionSource = 'suggestion-mode'
 const VALID_SOURCES: EditSuggestionSource[] = ['structured-tasks', 'suggestion-mode']
 
 function isEditSuggestionSource(value: unknown): value is EditSuggestionSource {
@@ -18,13 +19,13 @@ function isEditSuggestionSource(value: unknown): value is EditSuggestionSource {
 }
 
 function loadEditSuggestionSource(): EditSuggestionSource {
-  if (typeof window === 'undefined') return 'structured-tasks'
+  if (typeof window === 'undefined') return DEFAULT_EDIT_SUGGESTION_SOURCE
 
   try {
     const stored = window.localStorage.getItem(STORAGE_KEY)
-    return isEditSuggestionSource(stored) ? stored : 'structured-tasks'
+    return isEditSuggestionSource(stored) ? stored : DEFAULT_EDIT_SUGGESTION_SOURCE
   } catch {
-    return 'structured-tasks'
+    return DEFAULT_EDIT_SUGGESTION_SOURCE
   }
 }
 
diff --git a/src/prototypes/template-homepage/useDashpageSuggestionModule.ts b/src/prototypes/template-homepage/useDashpageSuggestionModule.ts
index 611a1bc..33203d1 100644
--- a/src/prototypes/template-homepage/useDashpageSuggestionModule.ts
+++ b/src/prototypes/template-homepage/useDashpageSuggestionModule.ts
@@ -1,6 +1,7 @@
 import { computed, ref, watch, type ComputedRef } from 'vue'
 
 import { useConfig } from '@/composables/useConfig'
+import { shouldShowDashpageLoadPrompt } from '@/lib/dashpageLoadState'
 import {
   DASHPAGE_MORELIKE_SEED_COUNT,
   DASHPAGE_SUGGESTION_FALLBACK_PAGE,
@@ -164,6 +165,7 @@ async function collectSuggestionsForPages(
   forceRefresh: boolean,
   signal: AbortSignal,
   recordPipelineError: (message: string) => void,
+  onItem?: (item: SuggestionQueueItem) => void | Promise<void>,
 ): Promise<SuggestionQueueItem[]> {
   const items: SuggestionQueueItem[] = []
 
@@ -189,7 +191,7 @@ async function collectSuggestionsForPages(
     const card = eligibleCards[0] ?? null
     if (!card) continue
 
-    items.push({
+    const item: SuggestionQueueItem = {
       pageTitle,
       card,
       pagePreview: {},
@@ -199,7 +201,12 @@ async function collectSuggestionsForPages(
         card,
         getCachedRun(pageTitle)?.pageSource,
       ),
-    })
+    }
+
+    items.push(item)
+    if (onItem) {
+      await onItem(item)
+    }
   }
 
   return items
@@ -257,26 +264,56 @@ function previewFromQueue(
   }
 }
 
+const loading = ref(false)
+const error = ref<string | null>(null)
+const hasStarted = ref(false)
+const lastFetchedAt = ref<number | null>(null)
+const selectedPageTitles = ref<string[]>([])
+const pagePreviews = ref<Record<string, PagePreviewCache>>({})
+const queue = ref<SuggestionQueueItem[]>([])
+const currentIndex = ref(0)
+const cachedRealTitles = ref<string[]>([])
+
+let abortController: AbortController | null = null
+let loadedUserKey: string | null = null
+let watchRegistered = false
+
 export function useDashpageSuggestionModule(): {
   moduleProps: ComputedRef<SuggestionModeModuleBind>
   fullscreenProps: ComputedRef<SuggestionModeModuleBind>
   onSuggestionLoad: () => void
   onSuggestionRefresh: () => void
   onSuggestionNavigate: (delta: number) => void
+  onSuggestionOpenFullscreen: () => void
 } {
   const { user, realUsername, currentUserPageLists } = useConfig()
 
-  const loading = ref(false)
-  const error = ref<string | null>(null)
-  const hasCache = ref(false)
-  const lastFetchedAt = ref<number | null>(null)
-  const selectedPageTitles = ref<string[]>([])
-  const pagePreviews = ref<Record<string, PagePreviewCache>>({})
-  const queue = ref<SuggestionQueueItem[]>([])
-  const currentIndex = ref(0)
-  const cachedRealTitles = ref<string[]>([])
+  function hasRenderableData(): boolean {
+    return queue.value.length > 0
+  }
+
+  async function enrichQueueItemPreview(
+    item: SuggestionQueueItem,
+    signal: AbortSignal,
+  ): Promise<void> {
+    try {
+      const previews = await fetchPagePreviewMetadataBatch([item.pageTitle], { signal })
+      if (signal.aborted) return
+
+      const preview = previews[item.pageTitle] ?? {}
+      pagePreviews.value = { ...pagePreviews.value, [item.pageTitle]: preview }
 
-  let abortController: AbortController | null = null
+      const index = queue.value.findIndex((entry) => entry.pageTitle === item.pageTitle)
+      if (index >= 0) {
+        queue.value[index] = { ...queue.value[index], pagePreview: preview }
+        queue.value = [...queue.value]
+      }
+    } catch (caught) {
+      if (caught instanceof FetchUserEditedPageTitlesError && caught.code === 'aborted') {
+        return
+      }
+    }
+  }
 
   function persistCache(userKey: string): void {
     setDashpageSuggestionModuleCache(userKey, {
@@ -293,9 +330,14 @@ export function useDashpageSuggestionModule(): {
   }
 
   function loadFromModuleCache(userKey: string): void {
+    if (loadedUserKey === userKey && queue.value.length > 0) {
+      return
+    }
+
     const cached = getDashpageSuggestionModuleCache(userKey)
     if (!cached) {
-      hasCache.value = false
+      loadedUserKey = userKey
+      hasStarted.value = false
       lastFetchedAt.value = null
       selectedPageTitles.value = []
       pagePreviews.value = {}
@@ -304,7 +346,8 @@ export function useDashpageSuggestionModule(): {
       return
     }
 
-    hasCache.value = true
+    loadedUserKey = userKey
+    hasStarted.value = true
     lastFetchedAt.value = cached.fetchedAt
     selectedPageTitles.value = cached.selectedPageTitles
     pagePreviews.value = cached.pagePreviews ?? {}
@@ -322,25 +365,49 @@ export function useDashpageSuggestionModule(): {
     cachedRealTitles.value = portfolio?.titles ?? []
   }
 
-  watch(
-    [user, realUsername],
-    ([activeUser, username]) => {
-      error.value = null
-      loadRealPortfolioFromCache()
-      loadFromModuleCache(dashpageSuggestionUserKey(activeUser, username))
-    },
-    { immediate: true },
-  )
+  if (!watchRegistered) {
+    watchRegistered = true
+    watch(
+      [user, realUsername],
+      ([activeUser, username]) => {
+        error.value = null
+        loadRealPortfolioFromCache()
+        loadFromModuleCache(dashpageSuggestionUserKey(activeUser, username))
+      },
+      { immediate: true },
+    )
+  }
 
   async function runPipeline(forceRefresh: boolean): Promise<void> {
     abortController?.abort()
     abortController = new AbortController()
     const { signal } = abortController
 
+    hasStarted.value = true
     loading.value = true
     error.value = null
 
     const userKey = dashpageSuggestionUserKey(user.value, realUsername.value)
+    const accumulated: SuggestionQueueItem[] = []
+
+    if (forceRefresh) {
+      queue.value = []
+      currentIndex.value = 0
+      pagePreviews.value = {}
+      selectedPageTitles.value = []
+    }
+
+    const onItem = async (item: SuggestionQueueItem): Promise<void> => {
+      accumulated.push(item)
+      queue.value = [...accumulated]
+      selectedPageTitles.value = accumulated.map((entry) => entry.pageTitle)
+      lastFetchedAt.value = Date.now()
+      persistCache(userKey)
+      await enrichQueueItemPreview(item, signal)
+      if (!signal.aborted) {
+        persistCache(userKey)
+      }
+    }
 
     try {
       if (user.value === 'real') {
@@ -377,6 +444,7 @@ export function useDashpageSuggestionModule(): {
         forceRefresh,
         signal,
         recordPipelineError,
+        onItem,
       )
 
       if (signal.aborted) return
@@ -411,6 +479,7 @@ export function useDashpageSuggestionModule(): {
         forceRefresh,
         signal,
         recordPipelineError,
+        onItem,
       )
 
       if (signal.aborted) return
@@ -450,6 +519,7 @@ export function useDashpageSuggestionModule(): {
               forceRefresh,
               signal,
               recordPipelineError,
+              onItem,
             )),
           ]
         }
@@ -460,19 +530,12 @@ export function useDashpageSuggestionModule(): {
       const nextQueue = shuffleQueue([...poolItems, ...morelikeItems])
       const queuePageTitles = nextQueue.map((item) => item.pageTitle)
 
-      if (queuePageTitles.length) {
-        const previews = await fetchPagePreviewMetadataBatch(queuePageTitles, { signal })
-        for (const item of nextQueue) {
-          item.pagePreview = previews[item.pageTitle] ?? {}
-        }
-        pagePreviews.value = previews
-      } else {
-        pagePreviews.value = {}
+      for (const item of nextQueue) {
+        item.pagePreview = pagePreviews.value[item.pageTitle] ?? item.pagePreview
       }
 
       selectedPageTitles.value = queuePageTitles
-      applyQueue(nextQueue, 0)
-      hasCache.value = true
+      applyQueue(nextQueue, forceRefresh ? 0 : Math.min(currentIndex.value, nextQueue.length - 1))
       lastFetchedAt.value = Date.now()
       persistCache(userKey)
     } catch (caught) {
@@ -496,7 +559,7 @@ export function useDashpageSuggestionModule(): {
   }
 
   function baseProps(): SuggestionModeModuleBind {
-    if (!hasCache.value) {
+    if (shouldShowDashpageLoadPrompt(hasStarted.value, hasRenderableData())) {
       return {
         loadPending: true,
         refreshing: loading.value,
@@ -504,6 +567,23 @@ export function useDashpageSuggestionModule(): {
       }
     }
 
+    if (!loading.value && hasStarted.value && !queue.value.length) {
+      return {
+        emptyMessage: 'No suggestions found. Try refresh.',
+        showRefresh: true,
+        refreshing: loading.value,
+        refreshError: error.value,
+      }
+    }
+
+    if (loading.value && !queue.value.length) {
+      return {
+        showRefresh: true,
+        refreshing: loading.value,
+        refreshError: error.value,
+      }
+    }
+
     const preview = previewFromQueue(queue.value, currentIndex.value)
     return {
       ...preview,
@@ -552,11 +632,20 @@ export function useDashpageSuggestionModule(): {
     persistCache(dashpageSuggestionUserKey(user.value, realUsername.value))
   }
 
+  /** Homepage preview always shows queue[0]; align fullscreen before navigating. */
+  function onSuggestionOpenFullscreen(): void {
+    if (!queue.value.length || currentIndex.value === 0) return
+
+    currentIndex.value = 0
+    persistCache(dashpageSuggestionUserKey(user.value, realUsername.value))
+  }
+
   return {
     moduleProps,
     fullscreenProps,
     onSuggestionLoad,
     onSuggestionRefresh,
     onSuggestionNavigate,
+    onSuggestionOpenFullscreen,
   }
 }
diff --git a/src/prototypes/template-homepage/useHomepageImpact.ts b/src/prototypes/template-homepage/useHomepageImpact.ts
index 587c194..d4a074d 100644
--- a/src/prototypes/template-homepage/useHomepageImpact.ts
+++ b/src/prototypes/template-homepage/useHomepageImpact.ts
@@ -2,6 +2,7 @@ import { computed, watch, type ComputedRef } from 'vue'
 
 import { useConfig } from '@/composables/useConfig'
 import { useRealUserImpact } from '@/composables/useRealUserImpact'
+import { shouldShowDashpageLoadPrompt } from '@/lib/dashpageLoadState'
 import type { ImpactData } from '@/lib/impactTypes'
 import { IMPACT, IMPACT_DESKTOP, IMPACT_PAGE } from './dashpage-fixtures'
 
@@ -13,14 +14,6 @@ type ImpactModuleBind = ImpactData & {
   loadPending?: boolean
 }
 
-function realImpactHasPreview(data: ImpactData): boolean {
-  return (
-    !!data.viewCount ||
-    (data.totalEdits ?? 0) > 0 ||
-    (data.recentActivityData ?? []).some((v) => v > 0)
-  )
-}
-
 export function useHomepageImpact(): {
   impactMobileProps: ComputedRef<ImpactModuleBind>
   impactDesktopProps: ComputedRef<ImpactModuleBind>
@@ -39,24 +32,34 @@ export function useHomepageImpact(): {
     { immediate: true },
   )
 
+  function realUserBind(): ImpactModuleBind {
+    if (
+      shouldShowDashpageLoadPrompt(
+        realImpact.hasStarted.value,
+        realImpact.hasRenderableData.value,
+      )
+    ) {
+      return {
+        loadPending: true,
+        refreshing: realImpact.loading.value,
+        refreshError: realImpact.error.value,
+      }
+    }
+
+    return {
+      ...realImpact.impactProps.value,
+      showRefresh: true,
+      refreshing: realImpact.loading.value,
+      refreshError: realImpact.error.value,
+    }
+  }
+
   const impactMobileProps = computed((): ImpactModuleBind => {
     if (user.value === 'experienced') {
       return { to: IMPACT_PAGE, ...IMPACT }
     }
     if (user.value === 'real') {
-      if (!realImpact.hasCache.value) {
-        return {
-          to: IMPACT_PAGE,
-          loadPending: true,
-          refreshing: realImpact.loading.value,
-          refreshError: realImpact.error.value,
-        }
-      }
-      const data = realImpact.impactProps.value
-      if (realImpactHasPreview(data)) {
-        return { to: IMPACT_PAGE, ...data }
-      }
-      return { to: IMPACT_PAGE }
+      return { to: IMPACT_PAGE, ...realUserBind() }
     }
     return { to: IMPACT_PAGE }
   })
@@ -66,19 +69,7 @@ export function useHomepageImpact(): {
       return { ...IMPACT_DESKTOP }
     }
     if (user.value === 'real') {
-      if (!realImpact.hasCache.value) {
-        return {
-          loadPending: true,
-          refreshing: realImpact.loading.value,
-          refreshError: realImpact.error.value,
-        }
-      }
-      return {
-        ...realImpact.impactProps.value,
-        showRefresh: true,
-        refreshing: realImpact.loading.value,
-        refreshError: realImpact.error.value,
-      }
+      return realUserBind()
     }
     return {}
   })

From cedbfe55759f0482c193cc15dbf560ddefa7ba85 Mon Sep 17 00:00:00 2001
From: Lu Wilson <lu@todepond.com>
Date: Tue, 26 May 2026 01:06:25 +0200
Subject: [PATCH 12/21] go

---
 .../template-homepage/SuggestedEditsView.vue  | 21 +++++-
 .../template-homepage/dashpage-fixtures.ts    | 14 +---
 src/prototypes/template-homepage/index.vue    |  7 +-
 .../suggested-edits/index.vue                 | 28 ++------
 .../useDashpageStructuredTasksModule.ts       | 72 +++++++++++++++++++
 5 files changed, 101 insertions(+), 41 deletions(-)
 create mode 100644 src/prototypes/template-homepage/useDashpageStructuredTasksModule.ts

diff --git a/src/prototypes/template-homepage/SuggestedEditsView.vue b/src/prototypes/template-homepage/SuggestedEditsView.vue
index 562e0bf..53753cb 100644
--- a/src/prototypes/template-homepage/SuggestedEditsView.vue
+++ b/src/prototypes/template-homepage/SuggestedEditsView.vue
@@ -309,6 +309,9 @@ function onNavigate(delta: number): void {
   display: flex;
   flex: 1;
   flex-direction: column;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
   min-height: 0;
 }
 
@@ -318,15 +321,21 @@ function onNavigate(delta: number): void {
   flex: 1;
   flex-direction: column;
   gap: var(--spacing-100, 16px);
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
   min-height: 0;
+  overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 }
 
 .suggested-edits-view__filters {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: var(--spacing-50, 8px);
+  width: 100%;
+  min-width: 0;
   padding-bottom: var(--spacing-75, 12px);
 }
 
@@ -342,9 +351,17 @@ function onNavigate(delta: number): void {
   color: var(--color-base--subtle, #54595d);
 }
 
-.suggested-edits-view__filter :deep(.cdx-select) {
+.suggested-edits-view__filter :deep(.cdx-select-vue) {
   flex: 1;
+  width: 100%;
+  min-width: 0;
+}
+
+.suggested-edits-view__filter :deep(.cdx-select-vue__handle) {
   min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .suggested-edits-view__load-prompt {
diff --git a/src/prototypes/template-homepage/dashpage-fixtures.ts b/src/prototypes/template-homepage/dashpage-fixtures.ts
index 4ba7ae5..d4f76ee 100644
--- a/src/prototypes/template-homepage/dashpage-fixtures.ts
+++ b/src/prototypes/template-homepage/dashpage-fixtures.ts
@@ -108,20 +108,8 @@ export const IMPACT_DESKTOP: {
   viewAllEditsHref: '#',
 }
 
-/** Homepage link-card preview (compact). */
+/** Static structured-tasks mock — shared by homepage module and fullscreen subpage. */
 export const STRUCTURED_TASKS = {
-  currentIndex: 1,
-  totalCount: 173745,
-  articleTitle: 'Full circle ringing',
-  articleDescription: 'Method of hanging (church) bells and …',
-  /** Action API `pageimages` + `pithumbsize=96` for [[Full circle ringing]] */
-  thumbnailSrc:
-    'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/St_Botolph%27s_Bell_Ringing.webm/120px--St_Botolph%27s_Bell_Ringing.webm.jpg',
-  taskTypeLabel: 'Find references',
-} as const
-
-/** Fullscreen suggested-edits subpage (static structured-tasks mock). */
-export const STRUCTURED_TASKS_FULL = {
   currentIndex: 1,
   totalCount: 173450,
   topicFilter: 'Music',
diff --git a/src/prototypes/template-homepage/index.vue b/src/prototypes/template-homepage/index.vue
index e963da0..608c352 100644
--- a/src/prototypes/template-homepage/index.vue
+++ b/src/prototypes/template-homepage/index.vue
@@ -22,9 +22,9 @@ import {
   MENTOR,
   MENTOR_PAGE,
   RECENT_CHANGES_PAGE,
-  STRUCTURED_TASKS,
 } from './dashpage-fixtures'
 import { useDashpageSettings } from './useDashpageSettings'
+import { useDashpageStructuredTasksModule } from './useDashpageStructuredTasksModule'
 import { useDashpageSuggestionModule } from './useDashpageSuggestionModule'
 import { useDashpageRecentChangesModule } from './useDashpageRecentChangesModule'
 import { useHomepageImpact } from './useHomepageImpact'
@@ -32,6 +32,7 @@ import { useHomepageSuggestedEdits } from './useHomepageSuggestedEdits'
 
 const { user, pageTitle, realUsername, currentUserPageLists } = useConfig()
 const { editSuggestionSource } = useDashpageSettings()
+const { moduleProps: structuredModuleProps } = useDashpageStructuredTasksModule()
 const { impactMobileProps, impactDesktopProps, onImpactRefresh } = useHomepageImpact()
 const { suggestedEditsLinkTo } = useHomepageSuggestedEdits()
 const {
@@ -89,7 +90,7 @@ definePage({
               v-if="showStructuredTasks"
               class="dashboard-slot--mobile-primary"
               :to="suggestedEditsLinkTo"
-              v-bind="STRUCTURED_TASKS"
+              v-bind="structuredModuleProps"
             />
             <SuggestionModeModule
               v-else-if="showSuggestionMode"
@@ -135,7 +136,7 @@ definePage({
             <StructuredTasksModule
               v-if="showStructuredTasks"
               class="dashboard-slot--desktop-primary"
-              v-bind="STRUCTURED_TASKS"
+              v-bind="structuredModuleProps"
             />
             <SuggestionModeModule
               v-else-if="showSuggestionMode"
diff --git a/src/prototypes/template-homepage/suggested-edits/index.vue b/src/prototypes/template-homepage/suggested-edits/index.vue
index 2f4f6d6..16fd8d3 100644
--- a/src/prototypes/template-homepage/suggested-edits/index.vue
+++ b/src/prototypes/template-homepage/suggested-edits/index.vue
@@ -7,37 +7,18 @@ import TaskFullscreenShell from '../TaskFullscreenShell.vue'
 import SpecialPageWrapper from '@/components/SpecialPageWrapper.vue'
 import MobileSubpageHeader from '../MobileSubpageHeader.vue'
 import SuggestedEditsView from '../SuggestedEditsView.vue'
-import { HOMEPAGE, STRUCTURED_TASKS_FULL } from '../dashpage-fixtures'
+import { HOMEPAGE } from '../dashpage-fixtures'
 import { useDashpageSettings } from '../useDashpageSettings'
+import { useDashpageStructuredTasksModule } from '../useDashpageStructuredTasksModule'
 import { useDashpageSuggestionModule } from '../useDashpageSuggestionModule'
 
 const { editSuggestionSource } = useDashpageSettings()
+const { fullscreenProps: structuredFullscreenProps } = useDashpageStructuredTasksModule()
 const { fullscreenProps, onSuggestionLoad, onSuggestionRefresh, onSuggestionNavigate } =
   useDashpageSuggestionModule()
 
 const showStructuredTasks = computed(() => editSuggestionSource.value === 'structured-tasks')
 
-const structuredProps = computed(() => ({
-  showFilterBar: true,
-  topicFilter: STRUCTURED_TASKS_FULL.topicFilter,
-  difficultyFilter: STRUCTURED_TASKS_FULL.difficultyFilter,
-  currentIndex: STRUCTURED_TASKS_FULL.currentIndex - 1,
-  totalCount: STRUCTURED_TASKS_FULL.totalCount,
-  articleTitle: STRUCTURED_TASKS_FULL.articleTitle,
-  articleShortDescription: STRUCTURED_TASKS_FULL.articleDescription,
-  thumbnailSrc: STRUCTURED_TASKS_FULL.thumbnailSrc,
-  pageviewsLabel: STRUCTURED_TASKS_FULL.pageviewsLabel,
-  taskHeading: STRUCTURED_TASKS_FULL.taskHeading,
-  taskDifficulty: STRUCTURED_TASKS_FULL.taskDifficulty,
-  taskTimeEstimate: STRUCTURED_TASKS_FULL.taskTimeEstimate,
-  taskDescription: STRUCTURED_TASKS_FULL.taskDescription,
-  taskDescriptionParts: [{ kind: 'text', text: STRUCTURED_TASKS_FULL.taskDescription }],
-  showSnippet: false,
-  editHref: STRUCTURED_TASKS_FULL.editHref,
-  canGoPrev: false,
-  canGoNext: false,
-}))
-
 const suggestionProps = computed(() => ({
   showFilterBar: false,
   ...fullscreenProps.value,
@@ -48,7 +29,7 @@ const suggestionProps = computed(() => ({
 }))
 
 const viewProps = computed(() =>
-  showStructuredTasks.value ? structuredProps.value : suggestionProps.value,
+  showStructuredTasks.value ? structuredFullscreenProps.value : suggestionProps.value,
 )
 
 const showHeaderRefresh = computed(
@@ -147,6 +128,7 @@ definePage({
   display: flex;
   flex: 1;
   flex-direction: column;
+  min-width: 0;
   min-height: 0;
 }
 </style>
diff --git a/src/prototypes/template-homepage/useDashpageStructuredTasksModule.ts b/src/prototypes/template-homepage/useDashpageStructuredTasksModule.ts
new file mode 100644
index 0000000..7b1dbb1
--- /dev/null
+++ b/src/prototypes/template-homepage/useDashpageStructuredTasksModule.ts
@@ -0,0 +1,72 @@
+import { computed, type ComputedRef } from 'vue'
+
+import type { SuggestionDescriptionPart } from '@/lib/ve-suggestions'
+
+import { STRUCTURED_TASKS } from './dashpage-fixtures'
+
+export interface StructuredTasksModuleBind {
+  currentIndex?: number
+  totalCount?: number
+  articleTitle?: string
+  articleDescription?: string
+  thumbnailSrc?: string
+  taskTypeLabel?: string
+}
+
+export interface StructuredTasksViewBind {
+  showFilterBar?: boolean
+  topicFilter?: string
+  difficultyFilter?: string
+  currentIndex?: number
+  totalCount?: number
+  articleTitle?: string
+  articleShortDescription?: string
+  thumbnailSrc?: string
+  pageviewsLabel?: string
+  taskHeading?: string
+  taskTimeEstimate?: string
+  taskDescription?: string
+  taskDescriptionParts?: SuggestionDescriptionPart[]
+  showSnippet?: boolean
+  taskDifficulty?: 'easy' | 'medium' | 'hard'
+  editHref?: string
+  canGoPrev?: boolean
+  canGoNext?: boolean
+}
+
+export function useDashpageStructuredTasksModule(): {
+  moduleProps: ComputedRef<StructuredTasksModuleBind>
+  fullscreenProps: ComputedRef<StructuredTasksViewBind>
+} {
+  const moduleProps = computed((): StructuredTasksModuleBind => ({
+    currentIndex: STRUCTURED_TASKS.currentIndex,
+    totalCount: STRUCTURED_TASKS.totalCount,
+    articleTitle: STRUCTURED_TASKS.articleTitle,
+    articleDescription: STRUCTURED_TASKS.articleDescription,
+    thumbnailSrc: STRUCTURED_TASKS.thumbnailSrc,
+    taskTypeLabel: STRUCTURED_TASKS.taskHeading,
+  }))
+
+  const fullscreenProps = computed((): StructuredTasksViewBind => ({
+    showFilterBar: true,
+    topicFilter: STRUCTURED_TASKS.topicFilter,
+    difficultyFilter: STRUCTURED_TASKS.difficultyFilter,
+    currentIndex: STRUCTURED_TASKS.currentIndex - 1,
+    totalCount: STRUCTURED_TASKS.totalCount,
+    articleTitle: STRUCTURED_TASKS.articleTitle,
+    articleShortDescription: STRUCTURED_TASKS.articleDescription,
+    thumbnailSrc: STRUCTURED_TASKS.thumbnailSrc,
+    pageviewsLabel: STRUCTURED_TASKS.pageviewsLabel,
+    taskHeading: STRUCTURED_TASKS.taskHeading,
+    taskDifficulty: STRUCTURED_TASKS.taskDifficulty,
+    taskTimeEstimate: STRUCTURED_TASKS.taskTimeEstimate,
+    taskDescription: STRUCTURED_TASKS.taskDescription,
+    taskDescriptionParts: [{ kind: 'text', text: STRUCTURED_TASKS.taskDescription }],
+    showSnippet: false,
+    editHref: STRUCTURED_TASKS.editHref,
+    canGoPrev: false,
+    canGoNext: false,
+  }))
+
+  return { moduleProps, fullscreenProps }
+}

From f90ade2f4ed97b493af95ff4af3c9646eddcee07 Mon Sep 17 00:00:00 2001
From: Lu Wilson <lu@todepond.com>
Date: Tue, 26 May 2026 02:01:43 +0200
Subject: [PATCH 13/21] suggestions

---
 src/components/DashboardModule.vue            |  21 +-
 src/lib/dashpageSuggestionFeedConstants.ts    |   1 +
 .../ve-suggestions/veSuggestionDifficulty.ts  |   2 +-
 .../template-homepage/SuggestedEditsView.vue  |   3 +-
 .../template-homepage/SuggestionFeedItem.vue  | 211 ++++++++++++++++++
 .../SuggestionFeedModule.vue                  | 198 ++++++++++++++++
 .../template-homepage/SuggestionFeedView.vue  |  80 +++++++
 .../SuggestionModeModule.vue                  |  11 +-
 src/prototypes/template-homepage/index.vue    |  18 ++
 .../template-homepage/recent-changes-feed.css |  18 +-
 .../recent-changes/index.vue                  |   4 +-
 .../suggested-edits/index.vue                 |  69 ++++--
 .../template-homepage/suggestion-feed.css     |  91 ++++++++
 .../template-homepage/useDashpageSettings.ts  |   9 +-
 .../useDashpageSuggestionModule.ts            | 154 +++++++++++--
 15 files changed, 843 insertions(+), 47 deletions(-)
 create mode 100644 src/lib/dashpageSuggestionFeedConstants.ts
 create mode 100644 src/prototypes/template-homepage/SuggestionFeedItem.vue
 create mode 100644 src/prototypes/template-homepage/SuggestionFeedModule.vue
 create mode 100644 src/prototypes/template-homepage/SuggestionFeedView.vue
 create mode 100644 src/prototypes/template-homepage/suggestion-feed.css

diff --git a/src/components/DashboardModule.vue b/src/components/DashboardModule.vue
index e639847..28d6c8e 100644
--- a/src/components/DashboardModule.vue
+++ b/src/components/DashboardModule.vue
@@ -130,6 +130,7 @@ function trimmedTitle(): string {
 .mobile-card--link {
   text-decoration: none;
   color: inherit;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .mobile-card--link:visited,
@@ -139,21 +140,31 @@ function trimmedTitle(): string {
 }
 
 .mobile-card--link:hover,
-.mobile-card--link:focus {
+.mobile-card--link:focus,
+.mobile-card--link:active {
   outline: none;
-  background-color: var(--background-color-interactive, #eaecf0);
   text-decoration: none;
   color: inherit;
 }
 
+.mobile-card--link:focus-visible {
+  outline: 2px solid var(--color-progressive, #36c);
+  outline-offset: 2px;
+}
+
 .dashboard-module--subtle.mobile-card,
 .dashboard-module--subtle.sidebar-card {
   background-color: var(--background-color-progressive-subtle, #e8eeff);
 }
 
-.dashboard-module--subtle.mobile-card--link:hover,
-.dashboard-module--subtle.mobile-card--link:focus {
-  background-color: var(--background-color-progressive-subtle--hover, #d9e2ff);
+@media (hover: hover) and (pointer: fine) {
+  .mobile-card--link:hover {
+    background-color: var(--background-color-interactive, #eaecf0);
+  }
+
+  .dashboard-module--subtle.mobile-card--link:hover {
+    background-color: var(--background-color-progressive-subtle--hover, #d9e2ff);
+  }
 }
 
 .mobile-card__header {
diff --git a/src/lib/dashpageSuggestionFeedConstants.ts b/src/lib/dashpageSuggestionFeedConstants.ts
new file mode 100644
index 0000000..5f32f39
--- /dev/null
+++ b/src/lib/dashpageSuggestionFeedConstants.ts
@@ -0,0 +1 @@
+export const DASHPAGE_SUGGESTION_FEED_PREVIEW_MAX = 3
diff --git a/src/lib/ve-suggestions/veSuggestionDifficulty.ts b/src/lib/ve-suggestions/veSuggestionDifficulty.ts
index e1e2b8c..13a3b74 100644
--- a/src/lib/ve-suggestions/veSuggestionDifficulty.ts
+++ b/src/lib/ve-suggestions/veSuggestionDifficulty.ts
@@ -12,7 +12,7 @@ export const CHANGE_SIZE_BY_SUGGESTION_TYPE: Record<string, SuggestionChangeSize
   fakeHeading: 'easy',
   imageCaption: 'medium',
   redirect: 'easy',
-  requiredTemplateParam: 'medium',
+  requiredTemplateParam: 'easy',
   suggestedLink: 'easy',
   textMatch: 'hard',
   tone: 'hard',
diff --git a/src/prototypes/template-homepage/SuggestedEditsView.vue b/src/prototypes/template-homepage/SuggestedEditsView.vue
index 53753cb..aeba1ad 100644
--- a/src/prototypes/template-homepage/SuggestedEditsView.vue
+++ b/src/prototypes/template-homepage/SuggestedEditsView.vue
@@ -206,7 +206,7 @@ function onNavigate(delta: number): void {
         </article>
 
         <section v-if="taskTitle" class="suggested-edits-view__task">
-          <p class="suggested-edits-view__task-heading">
+          <p class="suggested-edits-view__task-heading" :style="{ color: taskTypeColor }">
             {{ taskTitle }}
             <CdxIcon :icon="cdxIconInfo" size="small" class="suggested-edits-view__task-info" />
           </p>
@@ -483,7 +483,6 @@ function onNavigate(delta: number): void {
   font-size: var(--font-size-medium);
   font-weight: var(--font-weight-bold);
   line-height: var(--line-height-medium);
-  color: var(--color-base, #202122);
 }
 
 .suggested-edits-view__task-info {
diff --git a/src/prototypes/template-homepage/SuggestionFeedItem.vue b/src/prototypes/template-homepage/SuggestionFeedItem.vue
new file mode 100644
index 0000000..96f5c7c
--- /dev/null
+++ b/src/prototypes/template-homepage/SuggestionFeedItem.vue
@@ -0,0 +1,211 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { CHANGE_SIZE_COLORS } from '@/lib/ve-suggestions'
+
+import type { SuggestionFeedItem } from './useDashpageSuggestionModule'
+
+const props = defineProps<{
+  item: SuggestionFeedItem
+  preview?: boolean
+}>()
+
+const taskTypeColor = computed(() => CHANGE_SIZE_COLORS[props.item.taskDifficulty])
+
+const showSnippet = computed(
+  () => !props.preview && props.item.showSnippet && !!props.item.snippetHtml,
+)
+
+const hasInstruction = computed(
+  () => (props.item.taskDescriptionParts?.length ?? 0) > 0 || !!props.item.taskDescription?.trim(),
+)
+
+const showInstruction = computed(() => {
+  if (!hasInstruction.value) return false
+  if (props.preview) return !showSnippet.value
+  return true
+})
+
+function onPreviewActivate(event: Event): void {
+  if (!props.preview) return
+  event.preventDefault()
+  event.stopPropagation()
+  window.open(props.item.editHref, '_blank', 'noopener,noreferrer')
+}
+</script>
+
+<template>
+  <li class="review-changes__item">
+    <component
+      :is="preview ? 'div' : 'a'"
+      class="review-changes__item-link review-changes__item-link--unviewed"
+      :href="preview ? undefined : item.editHref"
+      :target="preview ? undefined : '_blank'"
+      :rel="preview ? undefined : 'noopener noreferrer'"
+      :role="preview ? 'link' : undefined"
+      :tabindex="preview ? 0 : undefined"
+      :aria-label="`Edit ${item.pageTitle}: ${item.taskHeading}`"
+      @click="onPreviewActivate"
+      @keydown.enter="onPreviewActivate"
+      @keydown.space.prevent="onPreviewActivate"
+    >
+      <div class="review-changes__item-header">
+        <span class="review-changes__page-cell">
+          <div v-if="item.thumbnailSrc" class="suggestion-feed__thumb-row">
+            <div class="suggestion-feed__page-thumb">
+              <img
+                class="suggestion-feed__page-thumb-image"
+                :src="item.thumbnailSrc"
+                alt=""
+                width="70"
+                height="70"
+                loading="lazy"
+              />
+            </div>
+            <div class="suggestion-feed__thumb-row-content">
+              <p
+                v-if="item.taskHeading"
+                class="suggestion-feed__task-heading"
+                :style="{ color: taskTypeColor }"
+              >
+                {{ item.taskHeading }}
+              </p>
+
+              <span
+                class="review-changes__page-cell-heading review-changes__page-cell-heading--separate suggestion-feed__page-heading"
+              >
+                <span class="review-changes__page suggestion-feed__page">{{ item.pageTitle }}</span>
+                <span
+                  v-if="item.articleShortDescription"
+                  class="review-changes__short-desc review-changes__short-desc--no-separator"
+                >
+                  {{ item.articleShortDescription }}
+                </span>
+              </span>
+
+              <p v-if="showInstruction" class="suggestion-feed__instruction">
+                <template v-if="item.taskDescriptionParts?.length">
+                  <template v-for="(part, index) in item.taskDescriptionParts" :key="index">
+                    <strong v-if="part.kind === 'link'">{{ part.label }}</strong>
+                    <template v-else>{{ part.text }}</template>
+                  </template>
+                </template>
+                <template v-else>{{ item.taskDescription }}</template>
+              </p>
+            </div>
+          </div>
+
+          <template v-else>
+            <p
+              v-if="item.taskHeading"
+              class="suggestion-feed__task-heading"
+              :style="{ color: taskTypeColor }"
+            >
+              {{ item.taskHeading }}
+            </p>
+
+            <span
+              class="review-changes__page-cell-heading review-changes__page-cell-heading--separate suggestion-feed__page-heading"
+            >
+              <span class="review-changes__page suggestion-feed__page">{{ item.pageTitle }}</span>
+              <span
+                v-if="item.articleShortDescription"
+                class="review-changes__short-desc review-changes__short-desc--no-separator"
+              >
+                {{ item.articleShortDescription }}
+              </span>
+            </span>
+
+            <p v-if="showInstruction" class="suggestion-feed__instruction">
+              <template v-if="item.taskDescriptionParts?.length">
+                <template v-for="(part, index) in item.taskDescriptionParts" :key="index">
+                  <strong v-if="part.kind === 'link'">{{ part.label }}</strong>
+                  <template v-else>{{ part.text }}</template>
+                </template>
+              </template>
+              <template v-else>{{ item.taskDescription }}</template>
+            </p>
+          </template>
+
+          <div v-if="showSnippet" class="suggestion-feed__snippet" v-html="item.snippetHtml" />
+        </span>
+      </div>
+    </component>
+  </li>
+</template>
+
+<style src="./recent-changes-feed.css"></style>
+<style src="./suggestion-feed.css"></style>
+
+<style scoped>
+.suggestion-feed__snippet {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  margin-top: var(--spacing-50, 8px);
+  padding: 8px 8px;
+  font-size: var(--font-size-small, 0.875rem);
+  line-height: var(--line-height-small);
+  color: var(--color-subtle, #54595d);
+  border: 1px solid var(--border-color-subtle, #c8ccd1);
+  border-radius: var(--border-radius-base, 2px);
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.suggestion-feed__snippet :deep(> *:first-child) {
+  margin-top: 0;
+}
+
+.suggestion-feed__snippet :deep(> *:last-child) {
+  margin-bottom: 0;
+}
+
+.suggestion-feed__snippet :deep(p),
+.suggestion-feed__snippet :deep(ul),
+.suggestion-feed__snippet :deep(ol),
+.suggestion-feed__snippet :deep(li),
+.suggestion-feed__snippet :deep(div),
+.suggestion-feed__snippet :deep(section) {
+  margin: 0;
+  padding: 0;
+  font-size: inherit;
+  line-height: inherit;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.suggestion-feed__snippet :deep(b),
+.suggestion-feed__snippet :deep(strong) {
+  font-weight: var(--font-weight-bold);
+}
+
+.suggestion-feed__snippet :deep(ul),
+.suggestion-feed__snippet :deep(ol) {
+  padding-inline-start: 1.25em;
+  list-style-position: outside;
+}
+
+.suggestion-feed__snippet :deep(ul) {
+  list-style-type: disc;
+}
+
+.suggestion-feed__snippet :deep(ol) {
+  list-style-type: decimal;
+}
+
+.suggestion-feed__snippet :deep(li) {
+  display: list-item;
+}
+
+.suggestion-feed__snippet :deep(p + p),
+.suggestion-feed__snippet :deep(p + ul),
+.suggestion-feed__snippet :deep(p + ol),
+.suggestion-feed__snippet :deep(ul + p),
+.suggestion-feed__snippet :deep(ol + p),
+.suggestion-feed__snippet :deep(ul + ul),
+.suggestion-feed__snippet :deep(ol + ol) {
+  margin-top: var(--spacing-25, 4px);
+}
+</style>
diff --git a/src/prototypes/template-homepage/SuggestionFeedModule.vue b/src/prototypes/template-homepage/SuggestionFeedModule.vue
new file mode 100644
index 0000000..f3a920b
--- /dev/null
+++ b/src/prototypes/template-homepage/SuggestionFeedModule.vue
@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { RouterLink } from 'vue-router'
+import type { RouteLocationRaw } from 'vue-router'
+import { CdxButton, CdxIcon } from '@wikimedia/codex'
+import { cdxIconReload } from '@wikimedia/codex-icons'
+
+import DashboardModule from '@/components/DashboardModule.vue'
+
+import SuggestionFeedItem from './SuggestionFeedItem.vue'
+import type { SuggestionFeedItem as SuggestionFeedItemType } from './useDashpageSuggestionModule'
+
+interface Props {
+  to?: RouteLocationRaw
+  items?: SuggestionFeedItemType[]
+  loadPending?: boolean
+  showRefresh?: boolean
+  refreshing?: boolean
+  refreshError?: string | null
+  emptyMessage?: string | null
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  to: undefined,
+  items: undefined,
+  loadPending: false,
+  showRefresh: false,
+  refreshing: false,
+  refreshError: undefined,
+  emptyMessage: undefined,
+})
+
+const emit = defineEmits<{
+  load: []
+  refresh: []
+}>()
+
+const previewItems = computed(() => props.items ?? [])
+
+const hasPreview = computed(() => previewItems.value.length > 0)
+
+const showLoadPrompt = computed(() => props.loadPending && !hasPreview.value)
+
+const isLinkCard = computed(() => props.to != null)
+
+const useLinkCard = computed(() => isLinkCard.value && hasPreview.value)
+
+const showRefreshInTitle = computed(
+  () => props.showRefresh && !showLoadPrompt.value && !useLinkCard.value,
+)
+
+function onRefreshClick(event: Event): void {
+  event.preventDefault()
+  event.stopPropagation()
+  emit('refresh')
+}
+
+function onLoadClick(): void {
+  emit('load')
+}
+</script>
+
+<template>
+  <div class="suggestion-feed-module">
+    <DashboardModule
+      class="suggestion-feed-module__variant suggestion-feed-module__variant--mobile"
+      title="Suggested edits"
+      :to="useLinkCard ? to : undefined"
+      :cta="useLinkCard ? 'See all suggestions' : null"
+      :mobile-card="!useLinkCard"
+    >
+      <template v-if="showRefreshInTitle" #header-actions>
+        <CdxButton
+          weight="quiet"
+          :icon-only="true"
+          aria-label="Refresh suggestions"
+          :disabled="refreshing"
+          @click="onRefreshClick"
+        >
+          <CdxIcon :icon="cdxIconReload" />
+        </CdxButton>
+      </template>
+
+      <p v-if="refreshError" class="suggestion-feed-module__error" role="alert">
+        {{ refreshError }}
+      </p>
+
+      <div v-if="showLoadPrompt" class="suggestion-feed-module__load-prompt">
+        <CdxButton
+          action="progressive"
+          weight="primary"
+          :disabled="refreshing"
+          @click.stop="onLoadClick"
+        >
+          {{ refreshing ? 'Loading…' : 'Load' }}
+        </CdxButton>
+        <RouterLink
+          v-if="isLinkCard"
+          :to="to!"
+          class="suggestion-feed-module__see-all"
+        >
+          See all suggestions
+        </RouterLink>
+      </div>
+
+      <template v-else-if="emptyMessage">
+        <p class="suggestion-feed-module__empty">{{ emptyMessage }}</p>
+        <CdxButton
+          v-if="showRefresh"
+          weight="quiet"
+          :disabled="refreshing"
+          @click.stop="onRefreshClick"
+        >
+          {{ refreshing ? 'Loading…' : 'Try another page' }}
+        </CdxButton>
+      </template>
+
+      <template v-else-if="hasPreview">
+        <ul class="suggestion-feed-module__feed">
+          <SuggestionFeedItem
+            v-for="item in previewItems"
+            :key="item.id"
+            :item="item"
+            preview
+          />
+        </ul>
+      </template>
+    </DashboardModule>
+
+    <DashboardModule
+      class="suggestion-feed-module__variant suggestion-feed-module__variant--desktop"
+      title="Suggested edits"
+    >
+      <p class="suggestion-feed-module__desktop-stub">desktop component not supported</p>
+    </DashboardModule>
+  </div>
+</template>
+
+<style scoped>
+.suggestion-feed-module__variant--mobile {
+  display: none;
+}
+
+.suggestion-feed-module__variant--desktop {
+  display: block;
+}
+
+[data-skin='mobile'] .suggestion-feed-module__variant--mobile {
+  display: block;
+}
+
+[data-skin='mobile'] .suggestion-feed-module__variant--desktop {
+  display: none;
+}
+
+.suggestion-feed-module__load-prompt {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-75, 12px);
+  min-height: 8rem;
+  padding: var(--spacing-100, 16px) 0;
+}
+
+.suggestion-feed-module__see-all {
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-progressive, #36c);
+  text-decoration: none;
+}
+
+.suggestion-feed-module__see-all:hover {
+  text-decoration: underline;
+}
+
+.suggestion-feed-module__error {
+  margin: 0 0 var(--spacing-50, 8px);
+  font-size: var(--font-size-small);
+  color: var(--color-error, #bf3c2c);
+}
+
+.suggestion-feed-module__empty {
+  margin: 0 0 var(--spacing-75, 12px);
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-base--subtle, #54595d);
+}
+
+.suggestion-feed-module__desktop-stub {
+  margin: 0;
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-base--subtle, #54595d);
+}
+</style>
+
+<style src="./suggestion-feed.css"></style>
diff --git a/src/prototypes/template-homepage/SuggestionFeedView.vue b/src/prototypes/template-homepage/SuggestionFeedView.vue
new file mode 100644
index 0000000..cb9f121
--- /dev/null
+++ b/src/prototypes/template-homepage/SuggestionFeedView.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { CdxButton } from '@wikimedia/codex'
+
+import SuggestionFeedItem from './SuggestionFeedItem.vue'
+import type { SuggestionFeedItem as SuggestionFeedItemType } from './useDashpageSuggestionModule'
+
+interface Props {
+  items?: SuggestionFeedItemType[]
+  loadPending?: boolean
+  showRefresh?: boolean
+  refreshing?: boolean
+  refreshError?: string | null
+  emptyMessage?: string | null
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  items: undefined,
+  loadPending: false,
+  showRefresh: false,
+  refreshing: false,
+  refreshError: undefined,
+  emptyMessage: undefined,
+})
+
+const emit = defineEmits<{
+  load: []
+  refresh: []
+}>()
+
+const feedItems = computed(() => props.items ?? [])
+
+const showLoadPrompt = computed(() => props.loadPending && !feedItems.value.length)
+
+function onLoadClick(): void {
+  emit('load')
+}
+
+function onRefreshClick(): void {
+  emit('refresh')
+}
+</script>
+
+<template>
+  <div class="review-changes-view">
+    <p v-if="refreshError" class="review-changes-view__error" role="alert">
+      {{ refreshError }}
+    </p>
+
+    <div v-if="showLoadPrompt" class="review-changes-view__load-prompt">
+      <CdxButton
+        action="progressive"
+        weight="primary"
+        :disabled="refreshing"
+        @click="onLoadClick"
+      >
+        {{ refreshing ? 'Loading…' : 'Load' }}
+      </CdxButton>
+    </div>
+
+    <ul v-if="feedItems.length" class="review-changes__feed">
+      <SuggestionFeedItem
+        v-for="item in feedItems"
+        :key="item.id"
+        :item="item"
+      />
+    </ul>
+
+    <template v-else-if="emptyMessage && !showLoadPrompt">
+      <p class="review-changes-view__empty">{{ emptyMessage }}</p>
+      <div v-if="showRefresh" class="review-changes-view__empty-actions">
+        <CdxButton weight="quiet" :disabled="refreshing" @click="onRefreshClick">
+          {{ refreshing ? 'Loading…' : 'Try again' }}
+        </CdxButton>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style src="./recent-changes-feed.css"></style>
diff --git a/src/prototypes/template-homepage/SuggestionModeModule.vue b/src/prototypes/template-homepage/SuggestionModeModule.vue
index 6915ab2..49306bf 100644
--- a/src/prototypes/template-homepage/SuggestionModeModule.vue
+++ b/src/prototypes/template-homepage/SuggestionModeModule.vue
@@ -333,14 +333,21 @@ function onOpenFullscreen(): void {
   text-decoration: none;
   color: inherit;
   cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .suggestion-mode-module__preview--link:hover,
-.suggestion-mode-module__preview--link:focus {
-  background-color: var(--background-color-interactive, #eaecf0);
+.suggestion-mode-module__preview--link:focus,
+.suggestion-mode-module__preview--link:active {
   outline: none;
 }
 
+@media (hover: hover) and (pointer: fine) {
+  .suggestion-mode-module__preview--link:hover {
+    background-color: var(--background-color-interactive, #eaecf0);
+  }
+}
+
 .suggestion-mode-module__preview--link:focus-visible {
   outline: 2px solid var(--color-progressive, #36c);
   outline-offset: 2px;
diff --git a/src/prototypes/template-homepage/index.vue b/src/prototypes/template-homepage/index.vue
index 608c352..d48da4c 100644
--- a/src/prototypes/template-homepage/index.vue
+++ b/src/prototypes/template-homepage/index.vue
@@ -13,6 +13,7 @@ import ImpactModule from './ImpactModule.vue'
 import MentorModule from './MentorModule.vue'
 import StructuredTasksModule from './StructuredTasksModule.vue'
 import SuggestionModeModule from './SuggestionModeModule.vue'
+import SuggestionFeedModule from './SuggestionFeedModule.vue'
 import RecentChangesModule from './RecentChangesModule.vue'
 import {
   APP_HOME,
@@ -37,6 +38,7 @@ const { impactMobileProps, impactDesktopProps, onImpactRefresh } = useHomepageIm
 const { suggestedEditsLinkTo } = useHomepageSuggestedEdits()
 const {
   moduleProps: suggestionModuleProps,
+  feedModuleProps,
   onSuggestionLoad,
   onSuggestionRefresh,
   onSuggestionOpenFullscreen,
@@ -49,6 +51,7 @@ const {
 
 const showStructuredTasks = computed(() => editSuggestionSource.value === 'structured-tasks')
 const showSuggestionMode = computed(() => editSuggestionSource.value === 'suggestion-mode')
+const showSuggestionFeed = computed(() => editSuggestionSource.value === 'suggestion-feed')
 
 const showLoggedInModules = computed(() => user.value !== 'logged-out')
 
@@ -101,6 +104,14 @@ definePage({
               @refresh="onSuggestionRefresh"
               @open-fullscreen="onSuggestionOpenFullscreen"
             />
+            <SuggestionFeedModule
+              v-else-if="showSuggestionFeed"
+              class="dashboard-slot--mobile-primary"
+              :to="suggestedEditsLinkTo"
+              v-bind="feedModuleProps"
+              @load="onSuggestionLoad"
+              @refresh="onSuggestionRefresh"
+            />
 
             <RecentChangesModule
               v-if="showRecentChangesModule"
@@ -145,6 +156,13 @@ definePage({
               @load="onSuggestionLoad"
               @refresh="onSuggestionRefresh"
             />
+            <SuggestionFeedModule
+              v-else-if="showSuggestionFeed"
+              class="dashboard-slot--desktop-primary"
+              v-bind="feedModuleProps"
+              @load="onSuggestionLoad"
+              @refresh="onSuggestionRefresh"
+            />
 
             <RecentChangesModule
               v-if="showRecentChangesModule"
diff --git a/src/prototypes/template-homepage/recent-changes-feed.css b/src/prototypes/template-homepage/recent-changes-feed.css
index 3f639b3..8f29559 100644
--- a/src/prototypes/template-homepage/recent-changes-feed.css
+++ b/src/prototypes/template-homepage/recent-changes-feed.css
@@ -3,7 +3,7 @@
 .review-changes__feed {
   list-style: none;
   margin: 0;
-  --review-changes-gap: 2px;
+  --review-changes-gap: 4px;
   --review-changes-card-gap: 0;
   padding: 0 var(--review-changes-gap) var(--review-changes-gap);
   flex: 1;
@@ -399,16 +399,20 @@
   width: 100%;
   background-color: var(--background-color-neutral);
   /*
-   * Cancel SpecialPageWrapper mobile inline padding so feed edge inset
-   * matches the gap between cards (FMW: .special-view--review-changes).
+   * Cancel page inline padding so the grey feed background bleeds out; the
+   * visible card inset is --review-changes-gap on .review-changes__feed below.
    */
-  --review-changes-bleed-inline: var(--spacing-100, 16px);
+  --review-changes-bleed-inline: var(--spacing-25, 4px);
   width: calc(100% + 2 * var(--review-changes-bleed-inline));
   margin-inline: calc(-1 * var(--review-changes-bleed-inline));
 }
 
+.review-changes-view .review-changes__feed {
+  --review-changes-gap: var(--spacing-25, 4px);
+}
+
 .review-changes-view__error {
-  margin: var(--spacing-100, 16px);
+  margin: var(--spacing-100, 16px) var(--spacing-25, 4px);
   font-size: var(--font-size-small);
   color: var(--color-error, #bf3c2c);
 }
@@ -422,11 +426,11 @@
 }
 
 .review-changes-view__empty {
-  margin: var(--spacing-100, 16px);
+  margin: var(--spacing-100, 16px) var(--spacing-25, 4px);
   font-size: var(--font-size-small);
   color: var(--color-base--subtle, #54595d);
 }
 
 .review-changes-view__empty-actions {
-  margin: 0 var(--spacing-100, 16px);
+  margin: 0 var(--spacing-25, 4px);
 }
diff --git a/src/prototypes/template-homepage/recent-changes/index.vue b/src/prototypes/template-homepage/recent-changes/index.vue
index a858915..76124cc 100644
--- a/src/prototypes/template-homepage/recent-changes/index.vue
+++ b/src/prototypes/template-homepage/recent-changes/index.vue
@@ -96,13 +96,13 @@ definePage({
   max-width: none;
   margin: 0;
   padding-block: 0;
-  padding-inline: var(--spacing-100, 16px);
+  padding-inline: var(--spacing-25, 4px);
   background-color: var(--background-color-neutral, #eaecf0);
 }
 
 .recent-changes-page[data-skin='mobile'] {
   padding-block: 0;
-  padding-inline: var(--spacing-100, 16px);
+  padding-inline: var(--spacing-25, 4px);
 }
 
 .recent-changes-page :deep(.special-page-wrapper__body) {
diff --git a/src/prototypes/template-homepage/suggested-edits/index.vue b/src/prototypes/template-homepage/suggested-edits/index.vue
index 16fd8d3..2fd76f0 100644
--- a/src/prototypes/template-homepage/suggested-edits/index.vue
+++ b/src/prototypes/template-homepage/suggested-edits/index.vue
@@ -5,8 +5,10 @@ import { cdxIconReload } from '@wikimedia/codex-icons'
 
 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 SuggestionFeedView from '../SuggestionFeedView.vue'
 import { HOMEPAGE } from '../dashpage-fixtures'
 import { useDashpageSettings } from '../useDashpageSettings'
 import { useDashpageStructuredTasksModule } from '../useDashpageStructuredTasksModule'
@@ -14,10 +16,16 @@ import { useDashpageSuggestionModule } from '../useDashpageSuggestionModule'
 
 const { editSuggestionSource } = useDashpageSettings()
 const { fullscreenProps: structuredFullscreenProps } = useDashpageStructuredTasksModule()
-const { fullscreenProps, onSuggestionLoad, onSuggestionRefresh, onSuggestionNavigate } =
-  useDashpageSuggestionModule()
+const {
+  fullscreenProps,
+  feedFullscreenProps,
+  onSuggestionLoad,
+  onSuggestionRefresh,
+  onSuggestionNavigate,
+} = useDashpageSuggestionModule()
 
 const showStructuredTasks = computed(() => editSuggestionSource.value === 'structured-tasks')
+const showSuggestionFeed = computed(() => editSuggestionSource.value === 'suggestion-feed')
 
 const suggestionProps = computed(() => ({
   showFilterBar: false,
@@ -28,13 +36,20 @@ const suggestionProps = computed(() => ({
   showSnippet: fullscreenProps.value.showSnippet,
 }))
 
-const viewProps = computed(() =>
+const carouselViewProps = computed(() =>
   showStructuredTasks.value ? structuredFullscreenProps.value : suggestionProps.value,
 )
 
-const showHeaderRefresh = computed(
-  () => !showStructuredTasks.value && viewProps.value.showRefresh === true,
-)
+const showHeaderRefresh = computed(() => {
+  if (showStructuredTasks.value) return false
+  if (showSuggestionFeed.value) return feedFullscreenProps.value.showRefresh === true
+  return suggestionProps.value.showRefresh === true
+})
+
+const headerRefreshDisabled = computed(() => {
+  if (showSuggestionFeed.value) return feedFullscreenProps.value.refreshing === true
+  return suggestionProps.value.refreshing === true
+})
 
 definePage({
   meta: {
@@ -45,8 +60,12 @@ definePage({
 </script>
 
 <template>
-  <TaskFullscreenShell skin="mobile">
-    <div class="suggested-edits-layout">
+  <MobileWrapper>
+    <TaskFullscreenShell skin="mobile">
+    <div
+      class="suggested-edits-layout"
+      :class="{ 'suggested-edits-layout--feed': showSuggestionFeed }"
+    >
       <div class="suggested-edits-layout__header">
         <MobileSubpageHeader
           title="Suggested edits"
@@ -59,7 +78,7 @@ definePage({
               weight="quiet"
               :icon-only="true"
               aria-label="Refresh suggestions"
-              :disabled="viewProps.refreshing"
+              :disabled="headerRefreshDisabled"
               @click="onSuggestionRefresh"
             >
               <CdxIcon :icon="cdxIconReload" />
@@ -68,16 +87,29 @@ definePage({
         </MobileSubpageHeader>
       </div>
 
-      <SpecialPageWrapper :title="null" class="suggested-edits-page">
+      <SpecialPageWrapper
+        :title="null"
+        :skin="showSuggestionFeed ? 'mobile' : undefined"
+        class="suggested-edits-page"
+        :class="{ 'suggested-edits-page--feed': showSuggestionFeed }"
+      >
+        <SuggestionFeedView
+          v-if="showSuggestionFeed"
+          v-bind="feedFullscreenProps"
+          @load="onSuggestionLoad"
+          @refresh="onSuggestionRefresh"
+        />
         <SuggestedEditsView
-          v-bind="viewProps"
+          v-else
+          v-bind="carouselViewProps"
           @load="onSuggestionLoad"
           @refresh="onSuggestionRefresh"
           @navigate="onSuggestionNavigate"
         />
       </SpecialPageWrapper>
     </div>
-  </TaskFullscreenShell>
+    </TaskFullscreenShell>
+  </MobileWrapper>
 </template>
 
 <style scoped>
@@ -95,7 +127,6 @@ definePage({
   box-sizing: border-box;
   width: 100%;
   padding: 0 4px;
-  /* padding: var(--spacing-100, 16px) var(--spacing-100, 16px) var(--spacing-50, 8px); */
   background-color: var(--background-color-base, #fff);
   border-bottom: 1px solid var(--border-color-base, #a2a9b1);
 }
@@ -121,9 +152,21 @@ definePage({
   overflow: hidden;
   max-width: none;
   margin: 0;
+  padding-block: 0;
+  padding-inline: var(--spacing-25, 4px);
   background-color: var(--background-color-neutral-subtle, #f8f9fa);
 }
 
+.suggested-edits-page--feed {
+  background-color: var(--background-color-neutral, #eaecf0);
+}
+
+.suggested-edits-page[data-skin='mobile'],
+.suggested-edits-page--feed[data-skin='mobile'] {
+  padding-block: 0;
+  padding-inline: var(--spacing-25, 4px);
+}
+
 .suggested-edits-page :deep(.special-page-wrapper__body) {
   display: flex;
   flex: 1;
diff --git a/src/prototypes/template-homepage/suggestion-feed.css b/src/prototypes/template-homepage/suggestion-feed.css
new file mode 100644
index 0000000..e3557b7
--- /dev/null
+++ b/src/prototypes/template-homepage/suggestion-feed.css
@@ -0,0 +1,91 @@
+.suggestion-feed__page {
+  font-size: var(--font-size-small, 0.875rem);
+  line-height: var(--line-height-small);
+  font-weight: var(--font-weight-bold);
+  color: var(--color-base, #202122);
+}
+
+.suggestion-feed__task-heading {
+  margin: 0;
+  font-family: var(--font-family-system-sans, system-ui, sans-serif);
+  font-size: var(--font-size-small, 0.875rem);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-small);
+}
+
+.suggestion-feed__page-heading {
+  display: block;
+  margin: 0;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.suggestion-feed__page-heading .review-changes__short-desc--no-separator {
+  margin-left: 6px;
+}
+
+.suggestion-feed__instruction {
+  margin: 0;
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+  color: var(--color-base, #202122);
+}
+
+.suggestion-feed__instruction strong {
+  font-weight: var(--font-weight-bold);
+}
+
+.suggestion-feed__thumb-row {
+  --suggestion-feed-thumb-size: 70px;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-75, 12px);
+  width: 100%;
+  min-width: 0;
+}
+
+.suggestion-feed__thumb-row-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.suggestion-feed__page-thumb {
+  flex-shrink: 0;
+  width: var(--suggestion-feed-thumb-size);
+  height: var(--suggestion-feed-thumb-size);
+  border-radius: 2px;
+  overflow: hidden;
+  background-color: var(--background-color-neutral-subtle, #f8f9fa);
+}
+
+.suggestion-feed__page-thumb-image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: top;
+}
+
+.suggestion-feed-module__feed {
+  list-style: none;
+  margin: var(--spacing-100, 16px) -1rem 0;
+  padding: 0 var(--review-changes-gap, 4px) 4px;
+  background-color: var(--background-color-neutral, #eaecf0);
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.suggestion-feed-module__feed .review-changes__item {
+  margin-bottom: 0;
+}
+
+.suggestion-feed-module__feed .review-changes__item-link {
+  border-color: var(--background-color-base);
+}
diff --git a/src/prototypes/template-homepage/useDashpageSettings.ts b/src/prototypes/template-homepage/useDashpageSettings.ts
index b9f16c0..3647d02 100644
--- a/src/prototypes/template-homepage/useDashpageSettings.ts
+++ b/src/prototypes/template-homepage/useDashpageSettings.ts
@@ -1,6 +1,6 @@
 import { ref, watch, type Ref } from 'vue'
 
-export type EditSuggestionSource = 'structured-tasks' | 'suggestion-mode'
+export type EditSuggestionSource = 'structured-tasks' | 'suggestion-mode' | 'suggestion-feed'
 
 export const EDIT_SUGGESTION_SOURCE_MENU_ITEMS: {
   value: EditSuggestionSource
@@ -8,11 +8,16 @@ export const EDIT_SUGGESTION_SOURCE_MENU_ITEMS: {
 }[] = [
   { value: 'structured-tasks', label: 'Structured tasks' },
   { value: 'suggestion-mode', label: 'Suggestion mode' },
+  { value: 'suggestion-feed', label: 'Suggestion feed' },
 ]
 
 const STORAGE_KEY = 'protowiki-dashpage-edit-suggestion-source'
 const DEFAULT_EDIT_SUGGESTION_SOURCE: EditSuggestionSource = 'suggestion-mode'
-const VALID_SOURCES: EditSuggestionSource[] = ['structured-tasks', 'suggestion-mode']
+const VALID_SOURCES: EditSuggestionSource[] = [
+  'structured-tasks',
+  'suggestion-mode',
+  'suggestion-feed',
+]
 
 function isEditSuggestionSource(value: unknown): value is EditSuggestionSource {
   return typeof value === 'string' && VALID_SOURCES.includes(value as EditSuggestionSource)
diff --git a/src/prototypes/template-homepage/useDashpageSuggestionModule.ts b/src/prototypes/template-homepage/useDashpageSuggestionModule.ts
index 33203d1..ae10571 100644
--- a/src/prototypes/template-homepage/useDashpageSuggestionModule.ts
+++ b/src/prototypes/template-homepage/useDashpageSuggestionModule.ts
@@ -2,6 +2,7 @@ import { computed, ref, watch, type ComputedRef } from 'vue'
 
 import { useConfig } from '@/composables/useConfig'
 import { shouldShowDashpageLoadPrompt } from '@/lib/dashpageLoadState'
+import { DASHPAGE_SUGGESTION_FEED_PREVIEW_MAX } from '@/lib/dashpageSuggestionFeedConstants'
 import {
   DASHPAGE_MORELIKE_SEED_COUNT,
   DASHPAGE_SUGGESTION_FALLBACK_PAGE,
@@ -129,6 +130,54 @@ export interface SuggestionModeModuleBind {
   editHref?: string
 }
 
+export interface SuggestionFeedItem {
+  id: string
+  pageTitle: string
+  articleShortDescription?: string
+  thumbnailSrc?: string
+  taskHeading: string
+  taskDifficulty: 'easy' | 'medium' | 'hard'
+  taskTimeEstimate: string
+  taskDescription?: string
+  taskDescriptionParts?: SuggestionDescriptionPart[]
+  showSnippet: boolean
+  snippetHtml?: string
+  editHref: string
+}
+
+export interface SuggestionFeedModuleBind {
+  items?: SuggestionFeedItem[]
+  loadPending?: boolean
+  showRefresh?: boolean
+  refreshing?: boolean
+  refreshError?: string | null
+  emptyMessage?: string | null
+}
+
+function queueItemToFeedItem(item: SuggestionQueueItem): SuggestionFeedItem {
+  const bind = queueItemToBind(item)
+  const taskDifficulty = bind.taskDifficulty ?? 'easy'
+
+  return {
+    id: `${item.pageTitle}:${item.card.cardId}`,
+    pageTitle: item.pageTitle,
+    articleShortDescription: bind.articleShortDescription,
+    thumbnailSrc: bind.thumbnailSrc,
+    taskHeading: bind.taskHeading ?? bind.taskTypeLabel ?? '',
+    taskDifficulty,
+    taskTimeEstimate: bind.taskTimeEstimate ?? timeEstimateForDifficulty(taskDifficulty),
+    taskDescription: bind.taskDescription,
+    taskDescriptionParts: bind.taskDescriptionParts,
+    showSnippet: bind.showSnippet ?? false,
+    snippetHtml: bind.snippetHtml,
+    editHref: bind.editHref ?? item.editHref,
+  }
+}
+
+function queueToFeedItems(queue: SuggestionQueueItem[]): SuggestionFeedItem[] {
+  return queue.map(queueItemToFeedItem)
+}
+
 function buildQueueFromPages(
   pageTitles: string[],
   pagePreviews: Record<string, PagePreviewCache>,
@@ -166,6 +215,7 @@ async function collectSuggestionsForPages(
   signal: AbortSignal,
   recordPipelineError: (message: string) => void,
   onItem?: (item: SuggestionQueueItem) => void | Promise<void>,
+  getPagePreview?: (pageTitle: string) => PagePreviewCache,
 ): Promise<SuggestionQueueItem[]> {
   const items: SuggestionQueueItem[] = []
 
@@ -194,7 +244,7 @@ async function collectSuggestionsForPages(
     const item: SuggestionQueueItem = {
       pageTitle,
       card,
-      pagePreview: {},
+      pagePreview: getPagePreview?.(pageTitle) ?? {},
       editHref: editUrlForSuggestionCard(
         wiki,
         pageTitle,
@@ -281,6 +331,8 @@ let watchRegistered = false
 export function useDashpageSuggestionModule(): {
   moduleProps: ComputedRef<SuggestionModeModuleBind>
   fullscreenProps: ComputedRef<SuggestionModeModuleBind>
+  feedModuleProps: ComputedRef<SuggestionFeedModuleBind>
+  feedFullscreenProps: ComputedRef<SuggestionFeedModuleBind>
   onSuggestionLoad: () => void
   onSuggestionRefresh: () => void
   onSuggestionNavigate: (delta: number) => void
@@ -292,22 +344,30 @@ export function useDashpageSuggestionModule(): {
     return queue.value.length > 0
   }
 
-  async function enrichQueueItemPreview(
-    item: SuggestionQueueItem,
+  async function enrichQueuePreviewsBatch(
+    pageTitles: string[],
     signal: AbortSignal,
   ): Promise<void> {
+    const titlesToFetch = [...new Set(pageTitles)].filter((title) => {
+      const preview = pagePreviews.value[title]
+      return !preview?.shortDescription?.trim() || !preview?.thumbnailSrc?.trim()
+    })
+    if (!titlesToFetch.length) return
+
     try {
-      const previews = await fetchPagePreviewMetadataBatch([item.pageTitle], { signal })
+      const previews = await fetchPagePreviewMetadataBatch(titlesToFetch, { signal })
       if (signal.aborted) return
 
-      const preview = previews[item.pageTitle] ?? {}
-      pagePreviews.value = { ...pagePreviews.value, [item.pageTitle]: preview }
+      pagePreviews.value = { ...pagePreviews.value, ...previews }
 
-      const index = queue.value.findIndex((entry) => entry.pageTitle === item.pageTitle)
-      if (index >= 0) {
-        queue.value[index] = { ...queue.value[index], pagePreview: preview }
-        queue.value = [...queue.value]
-      }
+      queue.value = queue.value.map((entry) => {
+        const preview = previews[entry.pageTitle] ?? pagePreviews.value[entry.pageTitle]
+        if (!preview) return entry
+        return {
+          ...entry,
+          pagePreview: { ...entry.pagePreview, ...preview },
+        }
+      })
     } catch (caught) {
       if (caught instanceof FetchUserEditedPageTitlesError && caught.code === 'aborted') {
         return
@@ -315,6 +375,17 @@ export function useDashpageSuggestionModule(): {
     }
   }
 
+  function getPagePreview(pageTitle: string): PagePreviewCache {
+    return pagePreviews.value[pageTitle] ?? {}
+  }
+
+  function mergeQueueItemPreview(item: SuggestionQueueItem): SuggestionQueueItem {
+    return {
+      ...item,
+      pagePreview: { ...getPagePreview(item.pageTitle), ...item.pagePreview },
+    }
+  }
+
   function persistCache(userKey: string): void {
     setDashpageSuggestionModuleCache(userKey, {
       fetchedAt: Date.now(),
@@ -398,12 +469,16 @@ export function useDashpageSuggestionModule(): {
     }
 
     const onItem = async (item: SuggestionQueueItem): Promise<void> => {
-      accumulated.push(item)
+      const itemWithPreview = mergeQueueItemPreview(item)
+      accumulated.push(itemWithPreview)
       queue.value = [...accumulated]
       selectedPageTitles.value = accumulated.map((entry) => entry.pageTitle)
       lastFetchedAt.value = Date.now()
       persistCache(userKey)
-      await enrichQueueItemPreview(item, signal)
+      await enrichQueuePreviewsBatch(
+        accumulated.map((entry) => entry.pageTitle),
+        signal,
+      )
       if (!signal.aborted) {
         persistCache(userKey)
       }
@@ -445,6 +520,7 @@ export function useDashpageSuggestionModule(): {
         signal,
         recordPipelineError,
         onItem,
+        getPagePreview,
       )
 
       if (signal.aborted) return
@@ -480,6 +556,7 @@ export function useDashpageSuggestionModule(): {
         signal,
         recordPipelineError,
         onItem,
+        getPagePreview,
       )
 
       if (signal.aborted) return
@@ -520,6 +597,7 @@ export function useDashpageSuggestionModule(): {
               signal,
               recordPipelineError,
               onItem,
+              getPagePreview,
             )),
           ]
         }
@@ -614,6 +692,54 @@ export function useDashpageSuggestionModule(): {
 
   const fullscreenProps = computed((): SuggestionModeModuleBind => baseProps())
 
+  function feedBaseProps(): SuggestionFeedModuleBind {
+    if (shouldShowDashpageLoadPrompt(hasStarted.value, hasRenderableData())) {
+      return {
+        loadPending: true,
+        refreshing: loading.value,
+        refreshError: error.value,
+      }
+    }
+
+    if (!loading.value && hasStarted.value && !queue.value.length) {
+      return {
+        emptyMessage: 'No suggestions found. Try refresh.',
+        showRefresh: true,
+        refreshing: loading.value,
+        refreshError: error.value,
+      }
+    }
+
+    if (loading.value && !queue.value.length) {
+      return {
+        showRefresh: true,
+        refreshing: loading.value,
+        refreshError: error.value,
+      }
+    }
+
+    return {
+      items: queueToFeedItems(queue.value),
+      showRefresh: true,
+      refreshing: loading.value,
+      refreshError: error.value,
+    }
+  }
+
+  const feedModuleProps = computed((): SuggestionFeedModuleBind => {
+    const props = feedBaseProps()
+    if (props.loadPending || props.emptyMessage || !props.items?.length) {
+      return props
+    }
+
+    return {
+      ...props,
+      items: props.items.slice(0, DASHPAGE_SUGGESTION_FEED_PREVIEW_MAX),
+    }
+  })
+
+  const feedFullscreenProps = computed((): SuggestionFeedModuleBind => feedBaseProps())
+
   function onSuggestionLoad(): void {
     void runPipeline(false)
   }
@@ -643,6 +769,8 @@ export function useDashpageSuggestionModule(): {
   return {
     moduleProps,
     fullscreenProps,
+    feedModuleProps,
+    feedFullscreenProps,
     onSuggestionLoad,
     onSuggestionRefresh,
     onSuggestionNavigate,

From c23bc9d8818acd4563f22d111782b52b562599bd Mon Sep 17 00:00:00 2001
From: Lu Wilson <lu@todepond.com>
Date: Tue, 26 May 2026 02:09:11 +0200
Subject: [PATCH 14/21] storage

---
 src/components/ArticleLive.vue                         |  2 ++
 src/lib/config.ts                                      |  3 +++
 src/lib/dashpagePortfolioCache.ts                      |  2 ++
 src/lib/dashpageRecentChangesCache.ts                  |  2 ++
 src/lib/dashpageSuggestionCache.ts                     |  2 ++
 src/lib/impactCache.ts                                 |  2 ++
 src/lib/ve-suggestions/veSuggestionsCache.ts           |  4 ++++
 src/lib/wipeLocalStorage.ts                            | 10 ++++++++++
 .../template-homepage/useDashpageSettings.ts           |  3 +++
 9 files changed, 30 insertions(+)
 create mode 100644 src/lib/wipeLocalStorage.ts

diff --git a/src/components/ArticleLive.vue b/src/components/ArticleLive.vue
index 02ffd2d..44ccb5b 100644
--- a/src/components/ArticleLive.vue
+++ b/src/components/ArticleLive.vue
@@ -5,6 +5,7 @@ import { CdxMessage, CdxProgressBar } from '@wikimedia/codex'
 import ArticleRenderer from '@/components/ArticleRenderer.vue'
 import ArticleWrapper from '@/components/ArticleWrapper.vue'
 import type { Skin, Theme } from '@/lib/theming'
+import { wipeLocalStorage } from '@/lib/wipeLocalStorage'
 
 /** Cache of successfully fetched live article HTML (key: host + title). */
 type CachedArticleBody = { html: string; liveTitle: string }
@@ -29,6 +30,7 @@ function loadFromStorage(key: string): CachedArticleBody | null {
     if (!raw) return null
     return JSON.parse(raw) as CachedArticleBody
   } catch {
+    wipeLocalStorage()
     return null
   }
 }
diff --git a/src/lib/config.ts b/src/lib/config.ts
index b12c9e1..ec33d78 100644
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -1,3 +1,5 @@
+import { wipeLocalStorage } from './wipeLocalStorage'
+
 export type ConfigTheme = 'light' | 'dark' | 'system'
 export type ConfigUser = 'logged-out' | 'new' | 'experienced' | 'real'
 
@@ -221,6 +223,7 @@ export function loadConfig(): Config {
       userPageLists: mergeUserPageListsMap(record.userPageLists),
     }
   } catch {
+    wipeLocalStorage()
     return cloneConfig(DEFAULT_CONFIG)
   }
 }
diff --git a/src/lib/dashpagePortfolioCache.ts b/src/lib/dashpagePortfolioCache.ts
index 5655377..373f0ee 100644
--- a/src/lib/dashpagePortfolioCache.ts
+++ b/src/lib/dashpagePortfolioCache.ts
@@ -1,4 +1,5 @@
 import { normalizeWikiUsername } from '@/lib/config'
+import { wipeLocalStorage } from '@/lib/wipeLocalStorage'
 
 const STORAGE_KEY = 'protowiki-dashpage-portfolio-v1'
 
@@ -19,6 +20,7 @@ function readStore(): PortfolioStore {
     if (typeof parsed !== 'object' || parsed === null) return {}
     return parsed as PortfolioStore
   } catch {
+    wipeLocalStorage()
     return {}
   }
 }
diff --git a/src/lib/dashpageRecentChangesCache.ts b/src/lib/dashpageRecentChangesCache.ts
index dd26233..789b7ae 100644
--- a/src/lib/dashpageRecentChangesCache.ts
+++ b/src/lib/dashpageRecentChangesCache.ts
@@ -1,3 +1,4 @@
+import { wipeLocalStorage } from '@/lib/wipeLocalStorage'
 import { dashpageSuggestionUserKey } from '@/lib/dashpageSuggestionCache'
 import { DASHPAGE_RC_STORAGE_KEY } from '@/lib/dashpageRecentChangesConstants'
 import type { RecentChangeFeedItem } from '@/lib/dashpageRecentChangesTypes'
@@ -21,6 +22,7 @@ function readStore(): ModuleStore {
     if (typeof parsed !== 'object' || parsed === null) return {}
     return parsed as ModuleStore
   } catch {
+    wipeLocalStorage()
     return {}
   }
 }
diff --git a/src/lib/dashpageSuggestionCache.ts b/src/lib/dashpageSuggestionCache.ts
index a1a4ecf..794693f 100644
--- a/src/lib/dashpageSuggestionCache.ts
+++ b/src/lib/dashpageSuggestionCache.ts
@@ -1,3 +1,4 @@
+import { wipeLocalStorage } from '@/lib/wipeLocalStorage'
 import type { ConfigUser, UserPageLists } from '@/lib/config'
 import { normalizeWikiUsername } from '@/lib/config'
 
@@ -48,6 +49,7 @@ function readStore(): ModuleStore {
     if (typeof parsed !== 'object' || parsed === null) return {}
     return parsed as ModuleStore
   } catch {
+    wipeLocalStorage()
     return {}
   }
 }
diff --git a/src/lib/impactCache.ts b/src/lib/impactCache.ts
index 656907c..c942079 100644
--- a/src/lib/impactCache.ts
+++ b/src/lib/impactCache.ts
@@ -1,5 +1,6 @@
 import { normalizeWikiUsername } from '@/lib/config'
 import type { ImpactData } from '@/lib/impactTypes'
+import { wipeLocalStorage } from '@/lib/wipeLocalStorage'
 
 const STORAGE_KEY = 'protowiki-impact-cache-v1'
 
@@ -20,6 +21,7 @@ function readStore(): ImpactCacheStore {
     if (typeof parsed !== 'object' || parsed === null) return {}
     return parsed as ImpactCacheStore
   } catch {
+    wipeLocalStorage()
     return {}
   }
 }
diff --git a/src/lib/ve-suggestions/veSuggestionsCache.ts b/src/lib/ve-suggestions/veSuggestionsCache.ts
index 3aff2c8..2ffb199 100644
--- a/src/lib/ve-suggestions/veSuggestionsCache.ts
+++ b/src/lib/ve-suggestions/veSuggestionsCache.ts
@@ -1,5 +1,7 @@
 import type { FWVeSuggestionResponse } from 'fakewiki/types'
 
+import { wipeLocalStorage } from '@/lib/wipeLocalStorage'
+
 import type { SuggestionCardData } from './veSuggestionCards'
 
 const CACHE_STORAGE_KEY = 'protowiki-ve-suggestions-cache-v1'
@@ -35,6 +37,7 @@ function readCacheStore(): CacheStore {
     if (typeof parsed !== 'object' || parsed === null) return {}
     return parsed as CacheStore
   } catch {
+    wipeLocalStorage()
     return {}
   }
 }
@@ -107,6 +110,7 @@ export function loadUiState(): VeSuggestionsUiState {
         typeof record.lastViewedAt === 'number' ? record.lastViewedAt : undefined,
     }
   } catch {
+    wipeLocalStorage()
     return { pageTitle: 'Wet Leg' }
   }
 }
diff --git a/src/lib/wipeLocalStorage.ts b/src/lib/wipeLocalStorage.ts
new file mode 100644
index 0000000..40063e7
--- /dev/null
+++ b/src/lib/wipeLocalStorage.ts
@@ -0,0 +1,10 @@
+/** Clear persisted browser state after unrecoverable load/parse failures. */
+export function wipeLocalStorage(): void {
+  if (typeof window === 'undefined') return
+
+  try {
+    window.localStorage.clear()
+  } catch {
+    // Private mode or blocked storage — ignore.
+  }
+}
diff --git a/src/prototypes/template-homepage/useDashpageSettings.ts b/src/prototypes/template-homepage/useDashpageSettings.ts
index 3647d02..bb4424d 100644
--- a/src/prototypes/template-homepage/useDashpageSettings.ts
+++ b/src/prototypes/template-homepage/useDashpageSettings.ts
@@ -1,5 +1,7 @@
 import { ref, watch, type Ref } from 'vue'
 
+import { wipeLocalStorage } from '@/lib/wipeLocalStorage'
+
 export type EditSuggestionSource = 'structured-tasks' | 'suggestion-mode' | 'suggestion-feed'
 
 export const EDIT_SUGGESTION_SOURCE_MENU_ITEMS: {
@@ -30,6 +32,7 @@ function loadEditSuggestionSource(): EditSuggestionSource {
     const stored = window.localStorage.getItem(STORAGE_KEY)
     return isEditSuggestionSource(stored) ? stored : DEFAULT_EDIT_SUGGESTION_SOURCE
   } catch {
+    wipeLocalStorage()
     return DEFAULT_EDIT_SUGGESTION_SOURCE
   }
 }

From 9a9ccaa865f5463c0c0fbce90ea012a09a183167 Mon Sep 17 00:00:00 2001
From: Lu Wilson <lu@todepond.com>
Date: Tue, 26 May 2026 02:10:53 +0200
Subject: [PATCH 15/21] GO

---
 src/prototypes/template-homepage/SuggestionFeedItem.vue    | 3 ---
 src/prototypes/template-homepage/SuggestionFeedModule.vue  | 5 +++--
 src/prototypes/template-homepage/SuggestionFeedView.vue    | 5 +++--
 src/prototypes/template-homepage/suggested-edits/index.vue | 3 +++
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/prototypes/template-homepage/SuggestionFeedItem.vue b/src/prototypes/template-homepage/SuggestionFeedItem.vue
index 96f5c7c..08b2ba6 100644
--- a/src/prototypes/template-homepage/SuggestionFeedItem.vue
+++ b/src/prototypes/template-homepage/SuggestionFeedItem.vue
@@ -134,9 +134,6 @@ function onPreviewActivate(event: Event): void {
   </li>
 </template>
 
-<style src="./recent-changes-feed.css"></style>
-<style src="./suggestion-feed.css"></style>
-
 <style scoped>
 .suggestion-feed__snippet {
   box-sizing: border-box;
diff --git a/src/prototypes/template-homepage/SuggestionFeedModule.vue b/src/prototypes/template-homepage/SuggestionFeedModule.vue
index f3a920b..1b17cb5 100644
--- a/src/prototypes/template-homepage/SuggestionFeedModule.vue
+++ b/src/prototypes/template-homepage/SuggestionFeedModule.vue
@@ -10,6 +10,9 @@ import DashboardModule from '@/components/DashboardModule.vue'
 import SuggestionFeedItem from './SuggestionFeedItem.vue'
 import type { SuggestionFeedItem as SuggestionFeedItemType } from './useDashpageSuggestionModule'
 
+import './recent-changes-feed.css'
+import './suggestion-feed.css'
+
 interface Props {
   to?: RouteLocationRaw
   items?: SuggestionFeedItemType[]
@@ -194,5 +197,3 @@ function onLoadClick(): void {
   color: var(--color-base--subtle, #54595d);
 }
 </style>
-
-<style src="./suggestion-feed.css"></style>
diff --git a/src/prototypes/template-homepage/SuggestionFeedView.vue b/src/prototypes/template-homepage/SuggestionFeedView.vue
index cb9f121..f1cd744 100644
--- a/src/prototypes/template-homepage/SuggestionFeedView.vue
+++ b/src/prototypes/template-homepage/SuggestionFeedView.vue
@@ -5,6 +5,9 @@ import { CdxButton } from '@wikimedia/codex'
 import SuggestionFeedItem from './SuggestionFeedItem.vue'
 import type { SuggestionFeedItem as SuggestionFeedItemType } from './useDashpageSuggestionModule'
 
+import './recent-changes-feed.css'
+import './suggestion-feed.css'
+
 interface Props {
   items?: SuggestionFeedItemType[]
   loadPending?: boolean
@@ -76,5 +79,3 @@ function onRefreshClick(): void {
     </template>
   </div>
 </template>
-
-<style src="./recent-changes-feed.css"></style>
diff --git a/src/prototypes/template-homepage/suggested-edits/index.vue b/src/prototypes/template-homepage/suggested-edits/index.vue
index 2fd76f0..673cfd2 100644
--- a/src/prototypes/template-homepage/suggested-edits/index.vue
+++ b/src/prototypes/template-homepage/suggested-edits/index.vue
@@ -14,6 +14,9 @@ import { useDashpageSettings } from '../useDashpageSettings'
 import { useDashpageStructuredTasksModule } from '../useDashpageStructuredTasksModule'
 import { useDashpageSuggestionModule } from '../useDashpageSuggestionModule'
 
+import '../recent-changes-feed.css'
+import '../suggestion-feed.css'
+
 const { editSuggestionSource } = useDashpageSettings()
 const { fullscreenProps: structuredFullscreenProps } = useDashpageStructuredTasksModule()
 const {

From 3bf3283ff6bbbe7f3b0fa06565928ef746ee2f5d Mon Sep 17 00:00:00 2001
From: Lu Wilson <lu@todepond.com>
Date: Tue, 26 May 2026 02:12:53 +0200
Subject: [PATCH 16/21] goo

---
 src/prototypes/template-homepage/SuggestedEditsView.vue    | 5 ++---
 src/prototypes/template-homepage/recent-changes-feed.css   | 1 +
 src/prototypes/template-homepage/suggested-edits/index.vue | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/prototypes/template-homepage/SuggestedEditsView.vue b/src/prototypes/template-homepage/SuggestedEditsView.vue
index aeba1ad..625f094 100644
--- a/src/prototypes/template-homepage/SuggestedEditsView.vue
+++ b/src/prototypes/template-homepage/SuggestedEditsView.vue
@@ -325,6 +325,7 @@ function onNavigate(delta: number): void {
   width: 100%;
   min-width: 0;
   min-height: 0;
+  padding: var(--spacing-100, 16px) 0;
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
@@ -533,7 +534,6 @@ function onNavigate(delta: number): void {
 
 .suggested-edits-view__footer {
   --suggested-edits-footer-bleed-inline: var(--spacing-100, 16px);
-  --suggested-edits-footer-bleed-bottom: var(--spacing-150, 24px);
   display: flex;
   flex-shrink: 0;
   align-items: center;
@@ -542,9 +542,8 @@ function onNavigate(delta: number): void {
   box-sizing: border-box;
   width: calc(100% + 2 * var(--suggested-edits-footer-bleed-inline));
   margin-inline: calc(-1 * var(--suggested-edits-footer-bleed-inline));
-  margin-bottom: calc(-1 * var(--suggested-edits-footer-bleed-bottom));
   padding: var(--spacing-75, 12px) var(--suggested-edits-footer-bleed-inline);
-  padding-bottom: max(var(--spacing-75, 12px), env(safe-area-inset-bottom, 0px));
+  padding-bottom: calc(var(--spacing-75, 12px) + env(safe-area-inset-bottom, 0px));
   background-color: var(--background-color-base, #fff);
   border-top: 1px solid var(--border-color-base, #a2a9b1);
 }
diff --git a/src/prototypes/template-homepage/recent-changes-feed.css b/src/prototypes/template-homepage/recent-changes-feed.css
index 8f29559..b9811b9 100644
--- a/src/prototypes/template-homepage/recent-changes-feed.css
+++ b/src/prototypes/template-homepage/recent-changes-feed.css
@@ -409,6 +409,7 @@
 
 .review-changes-view .review-changes__feed {
   --review-changes-gap: var(--spacing-25, 4px);
+  padding-top: var(--review-changes-gap);
 }
 
 .review-changes-view__error {
diff --git a/src/prototypes/template-homepage/suggested-edits/index.vue b/src/prototypes/template-homepage/suggested-edits/index.vue
index 673cfd2..91785a4 100644
--- a/src/prototypes/template-homepage/suggested-edits/index.vue
+++ b/src/prototypes/template-homepage/suggested-edits/index.vue
@@ -129,7 +129,7 @@ definePage({
   flex-shrink: 0;
   box-sizing: border-box;
   width: 100%;
-  padding: 0 4px;
+  padding: env(safe-area-inset-top, 0px) 4px 0;
   background-color: var(--background-color-base, #fff);
   border-bottom: 1px solid var(--border-color-base, #a2a9b1);
 }

From d46001d25ee53d91990d041ef8a44c0c110db161 Mon Sep 17 00:00:00 2001
From: Lu Wilson <lu@todepond.com>
Date: Tue, 26 May 2026 02:16:08 +0200
Subject: [PATCH 17/21] go

---
 .../template-homepage/recent-changes-feed.css     |  1 -
 .../template-homepage/recent-changes/index.vue    | 12 +++---------
 .../template-homepage/suggested-edits/index.vue   | 15 ++++-----------
 3 files changed, 7 insertions(+), 21 deletions(-)

diff --git a/src/prototypes/template-homepage/recent-changes-feed.css b/src/prototypes/template-homepage/recent-changes-feed.css
index b9811b9..8f29559 100644
--- a/src/prototypes/template-homepage/recent-changes-feed.css
+++ b/src/prototypes/template-homepage/recent-changes-feed.css
@@ -409,7 +409,6 @@
 
 .review-changes-view .review-changes__feed {
   --review-changes-gap: var(--spacing-25, 4px);
-  padding-top: var(--review-changes-gap);
 }
 
 .review-changes-view__error {
diff --git a/src/prototypes/template-homepage/recent-changes/index.vue b/src/prototypes/template-homepage/recent-changes/index.vue
index 76124cc..927a026 100644
--- a/src/prototypes/template-homepage/recent-changes/index.vue
+++ b/src/prototypes/template-homepage/recent-changes/index.vue
@@ -86,7 +86,7 @@ definePage({
   border-bottom: none;
 }
 
-.recent-changes-page {
+.recent-changes-layout :deep(.recent-changes-page) {
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -95,17 +95,11 @@ definePage({
   overflow: hidden;
   max-width: none;
   margin: 0;
-  padding-block: 0;
-  padding-inline: var(--spacing-25, 4px);
+  padding: 0 var(--spacing-25, 4px);
   background-color: var(--background-color-neutral, #eaecf0);
 }
 
-.recent-changes-page[data-skin='mobile'] {
-  padding-block: 0;
-  padding-inline: var(--spacing-25, 4px);
-}
-
-.recent-changes-page :deep(.special-page-wrapper__body) {
+.recent-changes-layout :deep(.recent-changes-page .special-page-wrapper__body) {
   display: flex;
   flex: 1;
   flex-direction: column;
diff --git a/src/prototypes/template-homepage/suggested-edits/index.vue b/src/prototypes/template-homepage/suggested-edits/index.vue
index 91785a4..8fbca7a 100644
--- a/src/prototypes/template-homepage/suggested-edits/index.vue
+++ b/src/prototypes/template-homepage/suggested-edits/index.vue
@@ -146,7 +146,7 @@ definePage({
   border: none !important;
 }
 
-.suggested-edits-page {
+.suggested-edits-layout :deep(.suggested-edits-page) {
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -155,22 +155,15 @@ definePage({
   overflow: hidden;
   max-width: none;
   margin: 0;
-  padding-block: 0;
-  padding-inline: var(--spacing-25, 4px);
+  padding: 0 var(--spacing-25, 4px);
   background-color: var(--background-color-neutral-subtle, #f8f9fa);
 }
 
-.suggested-edits-page--feed {
+.suggested-edits-layout :deep(.suggested-edits-page--feed) {
   background-color: var(--background-color-neutral, #eaecf0);
 }
 
-.suggested-edits-page[data-skin='mobile'],
-.suggested-edits-page--feed[data-skin='mobile'] {
-  padding-block: 0;
-  padding-inline: var(--spacing-25, 4px);
-}
-
-.suggested-edits-page :deep(.special-page-wrapper__body) {
+.suggested-edits-layout :deep(.suggested-edits-page .special-page-wrapper__body) {
   display: flex;
   flex: 1;
   flex-direction: column;

From 5800aec735797616007b47c1fe0bfbaf07548d94 Mon Sep 17 00:00:00 2001
From: Lu Wilson <lu@todepond.com>
Date: Tue, 26 May 2026 14:23:56 +0200
Subject: [PATCH 18/21] add lang support

---
 src/components/PrototypeUserSettingsPanel.vue |  5 ++
 src/composables/useConfig.ts                  |  9 +++
 src/composables/useRealUserImpact.ts          | 22 +++---
 src/lib/config.ts                             | 30 ++++++++
 src/lib/dashpagePortfolioCache.ts             | 23 ++++--
 src/lib/dashpageRecentChangesSignals.ts       | 10 +--
 src/lib/dashpageSuggestionCache.ts            | 11 ++-
 src/lib/fetchDashpageRecentChanges.ts         | 25 ++++---
 src/lib/fetchMorelikePageTitles.ts            | 15 ++--
 src/lib/fetchUserEditedPageTitles.ts          | 22 ++++--
 src/lib/fetchUserImpact.ts                    | 48 +++++++------
 src/lib/impactCache.ts                        | 24 +++++--
 .../runVeSuggestionsPipeline.ts               |  6 +-
 .../useVeSuggestionsPlayground.ts             |  2 +-
 .../template-homepage/impact/index.vue        |  4 +-
 .../useDashpageRecentChangesModule.ts         | 37 ++++++----
 .../useDashpageSuggestionModule.ts            | 72 ++++++++++++++-----
 .../template-homepage/useHomepageImpact.ts    |  4 +-
 18 files changed, 267 insertions(+), 102 deletions(-)

diff --git a/src/components/PrototypeUserSettingsPanel.vue b/src/components/PrototypeUserSettingsPanel.vue
index d07b540..93b7b7b 100644
--- a/src/components/PrototypeUserSettingsPanel.vue
+++ b/src/components/PrototypeUserSettingsPanel.vue
@@ -10,6 +10,7 @@ const {
   theme,
   user,
   realUsername,
+  realWiki,
   currentUserPageLists,
   setCurrentUserPageList,
   resetCurrentUserPageListField,
@@ -53,6 +54,10 @@ const editedPagesText = computed({
       <span class="prototype-user-settings-panel__label">Username</span>
       <CdxTextInput v-model="realUsername" class="prototype-user-settings-panel__input" />
     </label>
+    <label v-if="user === 'real'" class="prototype-user-settings-panel__field">
+      <span class="prototype-user-settings-panel__label">Wiki</span>
+      <CdxTextInput v-model="realWiki" class="prototype-user-settings-panel__input" />
+    </label>
     <template v-if="user !== 'real'">
       <label class="prototype-user-settings-panel__field">
         <span class="prototype-user-settings-panel__label">Watchlist</span>
diff --git a/src/composables/useConfig.ts b/src/composables/useConfig.ts
index 5784562..31d63bc 100644
--- a/src/composables/useConfig.ts
+++ b/src/composables/useConfig.ts
@@ -36,6 +36,7 @@ export function useConfig(): {
   theme: Ref<ConfigTheme>
   user: Ref<ConfigUser>
   realUsername: Ref<string>
+  realWiki: Ref<string>
   displayName: ComputedRef<string>
   pageTitle: ComputedRef<string>
   currentUserPageLists: ComputedRef<UserPageLists>
@@ -63,6 +64,13 @@ export function useConfig(): {
     },
   })
 
+  const realWiki = computed({
+    get: () => config.value.realWiki,
+    set: (value: string) => {
+      config.value = { ...config.value, realWiki: value }
+    },
+  })
+
   const displayName = computed(() =>
     configUserDisplayName(config.value.user, config.value.realUsername),
   )
@@ -107,6 +115,7 @@ export function useConfig(): {
     theme,
     user,
     realUsername,
+    realWiki,
     displayName,
     pageTitle,
     currentUserPageLists,
diff --git a/src/composables/useRealUserImpact.ts b/src/composables/useRealUserImpact.ts
index 0b1e8f5..5bc3735 100644
--- a/src/composables/useRealUserImpact.ts
+++ b/src/composables/useRealUserImpact.ts
@@ -1,6 +1,6 @@
 import { computed, ref, watch, type ComputedRef, type Ref } from 'vue'
 
-import { normalizeWikiUsername } from '@/lib/config'
+import { normalizeRealWiki, normalizeWikiUsername } from '@/lib/config'
 import { getCachedImpact, setCachedImpact } from '@/lib/impactCache'
 import { FetchUserImpactError, fetchUserImpact } from '@/lib/fetchUserImpact'
 import { EMPTY_IMPACT_DATA, type ImpactData } from '@/lib/impactTypes'
@@ -14,7 +14,10 @@ function impactHasRenderableData(data: ImpactData): boolean {
   )
 }
 
-export function useRealUserImpact(usernameSource: Ref<string> | ComputedRef<string>): {
+export function useRealUserImpact(
+  usernameSource: Ref<string> | ComputedRef<string>,
+  wikiSource: Ref<string> | ComputedRef<string>,
+): {
   impactProps: ComputedRef<ImpactData>
   loading: Ref<boolean>
   error: Ref<string | null>
@@ -44,8 +47,8 @@ export function useRealUserImpact(usernameSource: Ref<string> | ComputedRef<stri
     }
   }
 
-  function loadFromCache(raw: string): void {
-    const cached = getCachedImpact(raw)
+  function loadFromCache(raw: string, wiki: string): void {
+    const cached = getCachedImpact(raw, wiki)
     if (cached) {
       impactData.value = { ...EMPTY_IMPACT_DATA, ...cached.data }
       lastFetchedAt.value = cached.fetchedAt
@@ -60,15 +63,16 @@ export function useRealUserImpact(usernameSource: Ref<string> | ComputedRef<stri
   }
 
   watch(
-    usernameSource,
-    (name) => {
+    [usernameSource, wikiSource],
+    ([name, wiki]) => {
       error.value = null
-      loadFromCache(name)
+      loadFromCache(name, normalizeRealWiki(wiki))
     },
     { immediate: true },
   )
 
   const normalizedUsername = computed(() => normalizeWikiUsername(usernameSource.value))
+  const normalizedWiki = computed(() => normalizeRealWiki(wikiSource.value))
 
   const hasCache = computed(() => lastFetchedAt.value != null)
 
@@ -78,6 +82,7 @@ export function useRealUserImpact(usernameSource: Ref<string> | ComputedRef<stri
 
   async function refresh(): Promise<void> {
     const name = normalizedUsername.value
+    const wiki = normalizedWiki.value
     if (!name.length) {
       error.value = 'Enter a Wikipedia username in the user menu'
       return
@@ -94,11 +99,12 @@ export function useRealUserImpact(usernameSource: Ref<string> | ComputedRef<stri
     try {
       const data = await fetchUserImpact(name, {
         signal,
+        lang: wiki,
         onProgress: (patch) => {
           mergeImpactPatch(patch)
         },
       })
-      const entry = setCachedImpact(name, data)
+      const entry = setCachedImpact(name, data, wiki)
       impactData.value = { ...EMPTY_IMPACT_DATA, ...data }
       lastFetchedAt.value = entry.fetchedAt
       editedPageTitles.value = data.editedPageTitles ?? []
diff --git a/src/lib/config.ts b/src/lib/config.ts
index ec33d78..8d3619b 100644
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -16,6 +16,8 @@ export interface Config {
   user: ConfigUser
   /** Wikipedia username when `user` is `'real'`. */
   realUsername: string
+  /** Wikipedia language code when `user` is `'real'` (e.g. `en`, `fr`). */
+  realWiki: string
   userPageLists: Record<ConfigUser, UserPageLists>
 }
 
@@ -62,6 +64,7 @@ export const DEFAULT_CONFIG: Config = {
   theme: 'light',
   user: 'new',
   realUsername: '',
+  realWiki: 'en',
   userPageLists: cloneUserPageListsMap(DEFAULT_USER_PAGE_LISTS),
 }
 
@@ -91,6 +94,27 @@ export function normalizeWikiUsername(raw: string): string {
   return trimmed.charAt(0).toUpperCase() + trimmed.slice(1)
 }
 
+/** Normalize a Wikipedia language code for API calls and cache keys. */
+export function normalizeRealWiki(raw: string): string {
+  const trimmed = raw.trim().toLowerCase()
+  return trimmed.length ? trimmed : 'en'
+}
+
+/** Wiki hostname from a language code (e.g. `fr` → `fr.wikipedia.org`). */
+export function wikiHostFromLang(lang: string): string {
+  return `${normalizeRealWiki(lang)}.wikipedia.org`
+}
+
+/** FakeWiki / REST client base URL (trailing slash). */
+export function wikiBaseUrlFromLang(lang: string): string {
+  return `https://${wikiHostFromLang(lang)}/`
+}
+
+/** Wiki lang for live API calls: real-user setting, otherwise English fixtures. */
+export function wikiLangForConfigUser(user: ConfigUser, realWiki: string): string {
+  return user === 'real' ? normalizeRealWiki(realWiki) : 'en'
+}
+
 export function configUserDisplayName(user: ConfigUser, realUsername = ''): string {
   if (user === 'real') {
     const name = normalizeWikiUsername(realUsername)
@@ -215,11 +239,16 @@ export function loadConfig(): Config {
     const record = parsed as Record<string, unknown>
     const realUsername =
       typeof record.realUsername === 'string' ? record.realUsername : DEFAULT_CONFIG.realUsername
+    const realWiki =
+      typeof record.realWiki === 'string'
+        ? normalizeRealWiki(record.realWiki)
+        : DEFAULT_CONFIG.realWiki
 
     return {
       theme: isConfigTheme(record.theme) ? record.theme : DEFAULT_CONFIG.theme,
       user: isConfigUser(record.user) ? record.user : DEFAULT_CONFIG.user,
       realUsername,
+      realWiki,
       userPageLists: mergeUserPageListsMap(record.userPageLists),
     }
   } catch {
@@ -233,6 +262,7 @@ function cloneConfig(config: Config): Config {
     theme: config.theme,
     user: config.user,
     realUsername: config.realUsername,
+    realWiki: config.realWiki,
     userPageLists: cloneUserPageListsMap(config.userPageLists),
   }
 }
diff --git a/src/lib/dashpagePortfolioCache.ts b/src/lib/dashpagePortfolioCache.ts
index 373f0ee..cc2c876 100644
--- a/src/lib/dashpagePortfolioCache.ts
+++ b/src/lib/dashpagePortfolioCache.ts
@@ -1,4 +1,4 @@
-import { normalizeWikiUsername } from '@/lib/config'
+import { normalizeRealWiki, normalizeWikiUsername } from '@/lib/config'
 import { wipeLocalStorage } from '@/lib/wipeLocalStorage'
 
 const STORAGE_KEY = 'protowiki-dashpage-portfolio-v1'
@@ -10,6 +10,12 @@ export interface DashpagePortfolioCacheEntry {
 
 type PortfolioStore = Record<string, DashpagePortfolioCacheEntry>
 
+function realUserPortfolioCacheKey(username: string, wiki: string): string {
+  const normalizedUsername = normalizeWikiUsername(username)
+  if (!normalizedUsername.length) return ''
+  return `${normalizeRealWiki(wiki)}:${normalizedUsername}`
+}
+
 function readStore(): PortfolioStore {
   if (typeof window === 'undefined') return {}
 
@@ -35,8 +41,11 @@ function writeStore(store: PortfolioStore): void {
   }
 }
 
-export function getPortfolioCache(username: string): DashpagePortfolioCacheEntry | null {
-  const key = normalizeWikiUsername(username)
+export function getPortfolioCache(
+  username: string,
+  wiki = 'en',
+): DashpagePortfolioCacheEntry | null {
+  const key = realUserPortfolioCacheKey(username, wiki)
   if (!key.length) return null
 
   const entry = readStore()[key]
@@ -46,8 +55,12 @@ export function getPortfolioCache(username: string): DashpagePortfolioCacheEntry
   return entry
 }
 
-export function setPortfolioCache(username: string, titles: string[]): DashpagePortfolioCacheEntry {
-  const key = normalizeWikiUsername(username)
+export function setPortfolioCache(
+  username: string,
+  titles: string[],
+  wiki = 'en',
+): DashpagePortfolioCacheEntry {
+  const key = realUserPortfolioCacheKey(username, wiki)
   const entry: DashpagePortfolioCacheEntry = {
     fetchedAt: Date.now(),
     titles: [...titles],
diff --git a/src/lib/dashpageRecentChangesSignals.ts b/src/lib/dashpageRecentChangesSignals.ts
index 0478a70..b10f313 100644
--- a/src/lib/dashpageRecentChangesSignals.ts
+++ b/src/lib/dashpageRecentChangesSignals.ts
@@ -334,6 +334,7 @@ export async function enrichRevisionIncremental(
   wiki: FakeWiki,
   candidate: RevisionCandidate,
   onPatch: (patch: Partial<RecentChangeFeedItem>) => void,
+  lang = 'en',
 ): Promise<void> {
   const base: AnalyzedRevisionSignals = {
     revertRisk: null,
@@ -405,12 +406,12 @@ export async function enrichRevisionIncremental(
   if (parentId != null && parentId > 0) {
     const beforeQuality = await fetchArticleQualityScore(
       parentId,
-      'en',
+      lang,
       DASHPAGE_RC_API_USER_AGENT,
     )
     const afterQuality = await fetchArticleQualityScore(
       candidate.revId,
-      'en',
+      lang,
       DASHPAGE_RC_API_USER_AGENT,
     )
     base.articleQualityBefore = beforeQuality?.score ?? null
@@ -431,6 +432,7 @@ export async function enrichRevisionIncremental(
 export async function analyzeRevisionSerial(
   wiki: FakeWiki,
   candidate: RevisionCandidate,
+  lang = 'en',
 ): Promise<AnalyzedRevisionSignals> {
   const base: AnalyzedRevisionSignals = {
     revertRisk: null,
@@ -487,12 +489,12 @@ export async function analyzeRevisionSerial(
   if (parentId != null && parentId > 0) {
     const beforeQuality = await fetchArticleQualityScore(
       parentId,
-      'en',
+      lang,
       DASHPAGE_RC_API_USER_AGENT,
     )
     const afterQuality = await fetchArticleQualityScore(
       candidate.revId,
-      'en',
+      lang,
       DASHPAGE_RC_API_USER_AGENT,
     )
     base.articleQualityBefore = beforeQuality?.score ?? null
diff --git a/src/lib/dashpageSuggestionCache.ts b/src/lib/dashpageSuggestionCache.ts
index 794693f..7e18c85 100644
--- a/src/lib/dashpageSuggestionCache.ts
+++ b/src/lib/dashpageSuggestionCache.ts
@@ -1,6 +1,6 @@
 import { wipeLocalStorage } from '@/lib/wipeLocalStorage'
 import type { ConfigUser, UserPageLists } from '@/lib/config'
-import { normalizeWikiUsername } from '@/lib/config'
+import { normalizeRealWiki, normalizeWikiUsername } from '@/lib/config'
 
 const STORAGE_KEY = 'protowiki-dashpage-suggestion-module-v4'
 export const DASHPAGE_SUGGESTION_FALLBACK_PAGE = 'Wet Leg'
@@ -31,10 +31,15 @@ export interface DashpageSuggestionModuleCache {
 
 type ModuleStore = Record<string, DashpageSuggestionModuleCache>
 
-export function dashpageSuggestionUserKey(user: ConfigUser, realUsername: string): string {
+export function dashpageSuggestionUserKey(
+  user: ConfigUser,
+  realUsername: string,
+  realWiki = 'en',
+): string {
   if (user === 'real') {
     const normalized = normalizeWikiUsername(realUsername)
-    return normalized.length ? `real:${normalized}` : 'real'
+    const wiki = normalizeRealWiki(realWiki)
+    return normalized.length ? `real:${wiki}:${normalized}` : 'real'
   }
   return user
 }
diff --git a/src/lib/fetchDashpageRecentChanges.ts b/src/lib/fetchDashpageRecentChanges.ts
index e3ba4b2..b1169f7 100644
--- a/src/lib/fetchDashpageRecentChanges.ts
+++ b/src/lib/fetchDashpageRecentChanges.ts
@@ -2,6 +2,7 @@ import { FakeWiki } from 'fakewiki'
 import type { FWCachedRevision } from 'fakewiki/types'
 
 import type { ConfigUser, UserPageLists } from '@/lib/config'
+import { normalizeRealWiki, wikiBaseUrlFromLang } from '@/lib/config'
 import {
   DASHPAGE_RC_API_USER_AGENT,
   DASHPAGE_RC_FALLBACK_PAGE,
@@ -31,8 +32,8 @@ import {
 import { fetchPagePreviewMetadataBatch } from '@/lib/fetchUserEditedPageTitles'
 import { formatDashpageEditSummaryHtml } from '@/lib/formatDashpageEditSummaryHtml'
 
-export function createDashpageRecentChangesWiki(): FakeWiki {
-  return new FakeWiki(undefined, {
+export function createDashpageRecentChangesWiki(lang = 'en'): FakeWiki {
+  return new FakeWiki(wikiBaseUrlFromLang(lang), {
     apiUserAgent: DASHPAGE_RC_API_USER_AGENT,
     historyFetchConcurrency: 1,
     liftWingRevisionConcurrency: 1,
@@ -282,6 +283,7 @@ async function streamPortfolioRevisions(
   excludeRevIds: Set<number>,
   signal: AbortSignal,
   onCandidate: (candidate: RevisionCandidate) => Promise<boolean>,
+  lang = 'en',
 ): Promise<PortfolioStreamResult> {
   const portfolio = getPortfolioPagesForUser(user, pageLists, cachedRealTitles)
   const portfolioPool =
@@ -343,6 +345,7 @@ async function streamPortfolioRevisions(
         limit: DASHPAGE_RC_MORELIKE_PAGES_MAX,
         excludeTitles: portfolioPicks,
         signal,
+        lang,
       })
     } catch (caught) {
       if (caught instanceof FetchMorelikePageTitlesError && caught.code === 'aborted') {
@@ -446,9 +449,10 @@ async function isBotUser(wiki: FakeWiki, userName: string): Promise<boolean> {
 async function fetchStructuredDeltaSegments(
   wiki: FakeWiki,
   revId: number,
+  lang: string,
 ): Promise<RecentChangeStructuredDeltaSegment[] | null> {
   try {
-    const result = await wiki.getStructuredDeltasFromRevision(revId, { lang: 'en' })
+    const result = await wiki.getStructuredDeltasFromRevision(revId, { lang: normalizeRealWiki(lang) })
     if (!result?.segments?.length) return null
     return result.segments.map((segment) => ({
       text: segment.text,
@@ -463,6 +467,7 @@ async function enrichCandidateItem(
   wiki: FakeWiki,
   candidate: RevisionCandidate,
   handlers: DashpageRecentChangesHandlers,
+  lang: string,
   signal?: AbortSignal,
 ): Promise<boolean> {
   if (isCandidateHeuristicBot(candidate)) return false
@@ -478,10 +483,10 @@ async function enrichCandidateItem(
 
   await enrichRevisionIncremental(wiki, candidate, (patch) => {
     handlers.onPatch(candidate.revId, patch)
-  })
+  }, lang)
 
   assertNotAborted(signal)
-  const structuredDeltaSegments = await fetchStructuredDeltaSegments(wiki, candidate.revId)
+  const structuredDeltaSegments = await fetchStructuredDeltaSegments(wiki, candidate.revId, lang)
   handlers.onPatch(candidate.revId, { structuredDeltaSegments })
 
   if (candidate.comment.trim()) {
@@ -496,7 +501,7 @@ async function enrichCandidateItem(
   }
 
   assertNotAborted(signal)
-  const previews = await fetchPagePreviewMetadataBatch([candidate.pageTitle], { signal })
+  const previews = await fetchPagePreviewMetadataBatch([candidate.pageTitle], { signal, lang })
   const shortDescription = previews[candidate.pageTitle]?.shortDescription
   if (shortDescription) {
     handlers.onPatch(candidate.revId, { shortDescription })
@@ -520,13 +525,16 @@ export interface FetchDashpageRecentChangesOptions {
   targetCount?: number
   signal?: AbortSignal
   wiki?: FakeWiki
+  /** Wikipedia language code (default `en`). */
+  lang?: string
   handlers?: DashpageRecentChangesHandlers
 }
 
 export async function runDashpageRecentChangesPipeline(
   options: FetchDashpageRecentChangesOptions,
 ): Promise<void> {
-  const wiki = options.wiki ?? createDashpageRecentChangesWiki()
+  const lang = options.lang ?? 'en'
+  const wiki = options.wiki ?? createDashpageRecentChangesWiki(lang)
   const signal = options.signal
   const handlers = options.handlers
   if (!handlers) return
@@ -537,7 +545,7 @@ export async function runDashpageRecentChangesPipeline(
 
   const enrichCandidate = async (candidate: RevisionCandidate): Promise<boolean> => {
     if (excludeRevIds.has(candidate.revId)) return false
-    return enrichCandidateItem(wiki, candidate, handlers, activeSignal)
+    return enrichCandidateItem(wiki, candidate, handlers, lang, activeSignal)
   }
 
   const portfolioResult = await streamPortfolioRevisions(
@@ -548,6 +556,7 @@ export async function runDashpageRecentChangesPipeline(
     excludeRevIds,
     activeSignal,
     enrichCandidate,
+    lang,
   )
 
   await streamWildcardRevisions(
diff --git a/src/lib/fetchMorelikePageTitles.ts b/src/lib/fetchMorelikePageTitles.ts
index 0b9a486..ce1059a 100644
--- a/src/lib/fetchMorelikePageTitles.ts
+++ b/src/lib/fetchMorelikePageTitles.ts
@@ -1,4 +1,5 @@
-const WIKI_HOST = 'en.wikipedia.org'
+import { wikiHostFromLang } from '@/lib/config'
+
 const API_USER_AGENT =
   'ProtoWiki/0.1 (https://github.com/wikimedia-research/protowiki) dashpage-suggestion-mode'
 
@@ -19,6 +20,8 @@ export interface FetchMorelikePageTitlesOptions {
   limit?: number
   excludeTitles?: string[]
   signal?: AbortSignal
+  /** Wikipedia language code (default `en`). */
+  lang?: string
 }
 
 type SearchResponse = {
@@ -39,13 +42,13 @@ function assertNotAborted(signal?: AbortSignal): void {
   }
 }
 
-function actionUrl(params: Record<string, string>): string {
+function actionUrl(wikiHost: string, params: Record<string, string>): string {
   const search = new URLSearchParams({
     ...params,
     format: 'json',
     origin: '*',
   })
-  return `https://${WIKI_HOST}/w/api.php?${search.toString()}`
+  return `https://${wikiHost}/w/api.php?${search.toString()}`
 }
 
 async function fetchJson(url: string, signal?: AbortSignal): Promise<unknown> {
@@ -84,6 +87,7 @@ function appendSearchHits(
  * are exhausted. Excluded titles are skipped rather than returned.
  */
 async function collectMorelikeTitles(
+  wikiHost: string,
   srsearch: string,
   limit: number,
   exclude: Set<string>,
@@ -99,7 +103,7 @@ async function collectMorelikeTitles(
 
     const batchSize = Math.min(50, Math.max(limit * 2, limit))
     const data = (await fetchJson(
-      actionUrl({
+      actionUrl(wikiHost, {
         action: 'query',
         list: 'search',
         srsearch,
@@ -146,8 +150,10 @@ export async function fetchMorelikePageTitles(
     exclude.add(normalizeTitleKey(seed))
   }
 
+  const wikiHost = wikiHostFromLang(options.lang ?? 'en')
   const seen = new Set<string>()
   let titles = await collectMorelikeTitles(
+    wikiHost,
     `morelike:${seeds.join('|')}`,
     limit,
     exclude,
@@ -163,6 +169,7 @@ export async function fetchMorelikePageTitles(
     if (titles.length >= limit) break
 
     const seedTitlesFromSearch = await collectMorelikeTitles(
+      wikiHost,
       `morelike:${seed}`,
       limit,
       exclude,
diff --git a/src/lib/fetchUserEditedPageTitles.ts b/src/lib/fetchUserEditedPageTitles.ts
index a6d3bbf..c2bcb4f 100644
--- a/src/lib/fetchUserEditedPageTitles.ts
+++ b/src/lib/fetchUserEditedPageTitles.ts
@@ -1,6 +1,5 @@
-import { normalizeWikiUsername } from '@/lib/config'
+import { normalizeWikiUsername, wikiHostFromLang } from '@/lib/config'
 
-const WIKI_HOST = 'en.wikipedia.org'
 const API_USER_AGENT =
   'ProtoWiki/0.1 (https://github.com/wikimedia-research/protowiki) dashpage-suggestion-mode'
 
@@ -16,6 +15,8 @@ export class FetchUserEditedPageTitlesError extends Error {
 
 export interface FetchUserEditedPageTitlesOptions {
   signal?: AbortSignal
+  /** Wikipedia language code (default `en`). */
+  lang?: string
 }
 
 function assertNotAborted(signal?: AbortSignal): void {
@@ -24,13 +25,17 @@ function assertNotAborted(signal?: AbortSignal): void {
   }
 }
 
-function actionUrl(params: Record<string, string>): string {
+function actionUrl(wikiHost: string, params: Record<string, string>): string {
   const search = new URLSearchParams({
     ...params,
     format: 'json',
     origin: '*',
   })
-  return `https://${WIKI_HOST}/w/api.php?${search.toString()}`
+  return `https://${wikiHost}/w/api.php?${search.toString()}`
+}
+
+function wikiHostFromOptions(options: FetchUserEditedPageTitlesOptions): string {
+  return wikiHostFromLang(options.lang ?? 'en')
 }
 
 async function fetchJson(url: string, signal?: AbortSignal): Promise<unknown> {
@@ -55,7 +60,7 @@ export async function fetchUserEditedPageTitles(
   }
 
   const data = (await fetchJson(
-    actionUrl({
+    actionUrl(wikiHostFromOptions(options), {
       action: 'query',
       list: 'usercontribs',
       ucuser: normalized,
@@ -134,10 +139,11 @@ async function fetchRestSummaryThumbnail(
   if (!trimmed.length) return undefined
 
   const slug = encodeURIComponent(trimmed.replace(/ /g, '_'))
+  const wikiHost = wikiHostFromOptions(options)
 
   try {
     assertNotAborted(options.signal)
-    const response = await fetch(`https://${WIKI_HOST}/api/rest_v1/page/summary/${slug}`, {
+    const response = await fetch(`https://${wikiHost}/api/rest_v1/page/summary/${slug}`, {
       signal: options.signal,
       headers: { 'Api-User-Agent': API_USER_AGENT },
     })
@@ -158,6 +164,8 @@ export async function fetchPagePreviewMetadataBatch(
   const out: Record<string, PagePreviewMetadata> = {}
   if (!titles.length) return out
 
+  const wikiHost = wikiHostFromOptions(options)
+
   for (let offset = 0; offset < titles.length; offset += 50) {
     const chunk = titles.slice(offset, offset + 50)
     const requestedByNormalized = new Map(
@@ -167,7 +175,7 @@ export async function fetchPagePreviewMetadataBatch(
     try {
       assertNotAborted(options.signal)
       const data = (await fetchJson(
-        actionUrl({
+        actionUrl(wikiHost, {
           action: 'query',
           prop: 'pageimages|description',
           piprop: 'thumbnail',
diff --git a/src/lib/fetchUserImpact.ts b/src/lib/fetchUserImpact.ts
index 5513254..9f44f5d 100644
--- a/src/lib/fetchUserImpact.ts
+++ b/src/lib/fetchUserImpact.ts
@@ -1,7 +1,7 @@
 /**
  * Live Impact stats for the "Real user" prototype mode.
  *
- * Data sources (all en.wikipedia.org unless noted):
+ * Data sources (project wiki unless noted):
  * - Total edits: Action API `list=users` → `editcount` (all namespaces, lifetime).
  * - Last edited / activity chart / longest streak: Action API `list=usercontribs` (article ns 0 only).
  * - Thanks received: not fetched (no simple public count); UI shows "?".
@@ -10,10 +10,9 @@
  * - Thumbnails: Action API `pageimages`, then REST `/page/summary/{title}` as fallback.
  * - "Most viewed" rows: top 3 articles by those view counts (not merely the 3 most recent edits).
  */
-import { normalizeWikiUsername } from '@/lib/config'
+import { normalizeWikiUsername, wikiHostFromLang } from '@/lib/config'
 import type { ImpactData, ImpactMostViewedArticle } from '@/lib/impactTypes'
 
-const WIKI_HOST = 'en.wikipedia.org'
 const METRICS_HOST = 'wikimedia.org'
 const TOP_MOST_VIEWED = 3
 /** Max unique edited articles to query for pageviews (serial); then keep top 3 by views. */
@@ -35,6 +34,8 @@ export class FetchUserImpactError extends Error {
 export interface FetchUserImpactOptions {
   signal?: AbortSignal
   onProgress?: (patch: Partial<ImpactData>) => void
+  /** Wikipedia language code (default `en`). */
+  lang?: string
 }
 
 interface UserContrib {
@@ -57,13 +58,13 @@ async function fetchJson(url: string, signal?: AbortSignal): Promise<unknown> {
   return response.json()
 }
 
-function actionUrl(params: Record<string, string>): string {
+function actionUrl(wikiHost: string, params: Record<string, string>): string {
   const search = new URLSearchParams({
     ...params,
     format: 'json',
     origin: '*',
   })
-  return `https://${WIKI_HOST}/w/api.php?${search.toString()}`
+  return `https://${wikiHost}/w/api.php?${search.toString()}`
 }
 
 /** Parse Action API timestamps (`2026-02-23T09:12:59Z` or `2013-07-31 11:54:03`). */
@@ -167,6 +168,7 @@ function buildActivityHistogram(contribs: UserContrib[]): {
 }
 
 function buildViewProgressPatch(
+  wikiHost: string,
   totalEdits: number,
   viewRows: { title: string; total: number; daily: number[] }[],
   mostViewed?: ImpactMostViewedArticle[],
@@ -192,7 +194,7 @@ function buildViewProgressPatch(
       title: row.title,
       views: row.total,
       sparklineData: row.daily.length >= 2 ? row.daily.slice(-10) : undefined,
-      href: `https://${WIKI_HOST}/wiki/${encodeURIComponent(row.title.replace(/ /g, '_'))}`,
+      href: `https://${wikiHost}/wiki/${encodeURIComponent(row.title.replace(/ /g, '_'))}`,
     }))
 
   return {
@@ -210,6 +212,7 @@ function formatViewCount(total: number): string {
 }
 
 async function fetchPageviewsSince(
+  wikiHost: string,
   title: string,
   sinceIso: string,
   signal?: AbortSignal,
@@ -232,7 +235,7 @@ async function fetchPageviewsSince(
   }
 
   const url =
-    `https://${METRICS_HOST}/api/rest_v1/metrics/pageviews/per-article/en.wikipedia.org/all-access/all-agents/${article}/daily/${start}/${end}`
+    `https://${METRICS_HOST}/api/rest_v1/metrics/pageviews/per-article/${wikiHost}/all-access/all-agents/${article}/daily/${start}/${end}`
 
   try {
     assertNotAborted(signal)
@@ -252,8 +255,12 @@ async function fetchPageviewsSince(
   }
 }
 
-async function fetchThumbnail(title: string, signal?: AbortSignal): Promise<string | undefined> {
-  const url = actionUrl({
+async function fetchThumbnail(
+  wikiHost: string,
+  title: string,
+  signal?: AbortSignal,
+): Promise<string | undefined> {
+  const url = actionUrl(wikiHost, {
     action: 'query',
     titles: title,
     prop: 'pageimages',
@@ -275,7 +282,7 @@ async function fetchThumbnail(title: string, signal?: AbortSignal): Promise<stri
   try {
     assertNotAborted(signal)
     const slug = encodeURIComponent(title.replace(/ /g, '_'))
-    const response = await fetch(`https://${WIKI_HOST}/api/rest_v1/page/summary/${slug}`, {
+    const response = await fetch(`https://${wikiHost}/api/rest_v1/page/summary/${slug}`, {
       signal,
     })
     if (!response.ok) return undefined
@@ -290,7 +297,8 @@ export async function fetchUserImpact(
   rawUsername: string,
   options: FetchUserImpactOptions = {},
 ): Promise<ImpactData> {
-  const { signal, onProgress } = options
+  const { signal, onProgress, lang = 'en' } = options
+  const wikiHost = wikiHostFromLang(lang)
   const username = normalizeWikiUsername(rawUsername)
   if (!username.length) {
     throw new FetchUserImpactError('Enter a Wikipedia username', 'missing_username')
@@ -299,7 +307,7 @@ export async function fetchUserImpact(
   assertNotAborted(signal)
 
   const usersJson = (await fetchJson(
-    actionUrl({
+    actionUrl(wikiHost, {
       action: 'query',
       list: 'users',
       ususers: username,
@@ -334,7 +342,7 @@ export async function fetchUserImpact(
     }
     if (uccontinue) params.uccontinue = uccontinue
 
-    const json = (await fetchJson(actionUrl(params), signal)) as {
+    const json = (await fetchJson(actionUrl(wikiHost, params), signal)) as {
       query?: { usercontribs?: UserContrib[] }
       continue?: { uccontinue?: string }
     }
@@ -381,9 +389,9 @@ export async function fetchUserImpact(
     assertNotAborted(signal)
 
     const since = titleToLatestEdit.get(title) ?? ''
-    const { total, daily } = await fetchPageviewsSince(title, since, signal)
+    const { total, daily } = await fetchPageviewsSince(wikiHost, title, since, signal)
     viewRows.push({ title, total, daily })
-    onProgress?.(buildViewProgressPatch(totalEdits, viewRows))
+    onProgress?.(buildViewProgressPatch(wikiHost, totalEdits, viewRows))
   }
 
   viewRows.sort((a, b) => b.total - a.total)
@@ -394,20 +402,20 @@ export async function fetchUserImpact(
   for (const row of topByViews) {
     assertNotAborted(signal)
 
-    const thumbnailSrc = await fetchThumbnail(row.title, signal)
+    const thumbnailSrc = await fetchThumbnail(wikiHost, row.title, signal)
 
     mostViewed.push({
       title: row.title,
       views: row.total,
       sparklineData: row.daily.length >= 2 ? row.daily.slice(-10) : undefined,
       thumbnailSrc,
-      href: `https://${WIKI_HOST}/wiki/${encodeURIComponent(row.title.replace(/ /g, '_'))}`,
+      href: `https://${wikiHost}/wiki/${encodeURIComponent(row.title.replace(/ /g, '_'))}`,
     })
 
-    onProgress?.(buildViewProgressPatch(totalEdits, viewRows, mostViewed))
+    onProgress?.(buildViewProgressPatch(wikiHost, totalEdits, viewRows, mostViewed))
   }
 
-  const viewPatch = buildViewProgressPatch(totalEdits, viewRows, mostViewed)
+  const viewPatch = buildViewProgressPatch(wikiHost, totalEdits, viewRows, mostViewed)
 
   return {
     totalEdits,
@@ -421,7 +429,7 @@ export async function fetchUserImpact(
     viewLabel: viewPatch.viewLabel,
     sparklineData: viewPatch.sparklineData ?? [],
     mostViewed,
-    viewAllEditsHref: `https://${WIKI_HOST}/wiki/Special:Contributions/${encodeURIComponent(username)}`,
+    viewAllEditsHref: `https://${wikiHost}/wiki/Special:Contributions/${encodeURIComponent(username)}`,
     editedPageTitles,
   }
 }
diff --git a/src/lib/impactCache.ts b/src/lib/impactCache.ts
index c942079..b6e04ee 100644
--- a/src/lib/impactCache.ts
+++ b/src/lib/impactCache.ts
@@ -1,4 +1,4 @@
-import { normalizeWikiUsername } from '@/lib/config'
+import { normalizeRealWiki, normalizeWikiUsername } from '@/lib/config'
 import type { ImpactData } from '@/lib/impactTypes'
 import { wipeLocalStorage } from '@/lib/wipeLocalStorage'
 
@@ -11,6 +11,12 @@ export interface CachedImpactEntry {
 
 type ImpactCacheStore = Record<string, CachedImpactEntry>
 
+function realUserImpactCacheKey(username: string, wiki: string): string {
+  const normalizedUsername = normalizeWikiUsername(username)
+  if (!normalizedUsername.length) return ''
+  return `${normalizeRealWiki(wiki)}:${normalizedUsername}`
+}
+
 function readStore(): ImpactCacheStore {
   if (typeof window === 'undefined') return {}
 
@@ -36,8 +42,8 @@ function writeStore(store: ImpactCacheStore): void {
   }
 }
 
-export function getCachedImpact(username: string): CachedImpactEntry | null {
-  const key = normalizeWikiUsername(username)
+export function getCachedImpact(username: string, wiki = 'en'): CachedImpactEntry | null {
+  const key = realUserImpactCacheKey(username, wiki)
   if (!key.length) return null
   const entry = readStore()[key]
   if (!entry || typeof entry.fetchedAt !== 'number' || typeof entry.data !== 'object') {
@@ -46,8 +52,12 @@ export function getCachedImpact(username: string): CachedImpactEntry | null {
   return entry
 }
 
-export function setCachedImpact(username: string, data: ImpactData): CachedImpactEntry {
-  const key = normalizeWikiUsername(username)
+export function setCachedImpact(
+  username: string,
+  data: ImpactData,
+  wiki = 'en',
+): CachedImpactEntry {
+  const key = realUserImpactCacheKey(username, wiki)
   const entry: CachedImpactEntry = { fetchedAt: Date.now(), data }
   if (!key.length) return entry
 
@@ -57,8 +67,8 @@ export function setCachedImpact(username: string, data: ImpactData): CachedImpac
   return entry
 }
 
-export function clearCachedImpact(username: string): void {
-  const key = normalizeWikiUsername(username)
+export function clearCachedImpact(username: string, wiki = 'en'): void {
+  const key = realUserImpactCacheKey(username, wiki)
   if (!key.length) return
 
   const store = readStore()
diff --git a/src/lib/ve-suggestions/runVeSuggestionsPipeline.ts b/src/lib/ve-suggestions/runVeSuggestionsPipeline.ts
index 0972ddf..69b2427 100644
--- a/src/lib/ve-suggestions/runVeSuggestionsPipeline.ts
+++ b/src/lib/ve-suggestions/runVeSuggestionsPipeline.ts
@@ -44,12 +44,14 @@ export interface RunVeSuggestionsPipelineOptions {
   excludeSuggestionTypes?: string[]
 }
 
+import { wikiBaseUrlFromLang } from '@/lib/config'
+
 const DEFAULT_API_USER_AGENT =
   'ProtoWiki/0.1 (https://github.com/wikimedia-research/protowiki) ve-suggestions'
 
-export function createVeSuggestionsWiki(apiUserAgentSuffix?: string): FakeWiki {
+export function createVeSuggestionsWiki(lang = 'en', apiUserAgentSuffix?: string): FakeWiki {
   const suffix = apiUserAgentSuffix?.trim()
-  return new FakeWiki(undefined, {
+  return new FakeWiki(wikiBaseUrlFromLang(lang), {
     apiUserAgent: suffix ? `${DEFAULT_API_USER_AGENT} ${suffix}` : DEFAULT_API_USER_AGENT,
   })
 }
diff --git a/src/prototypes/example-ve-suggestions-playground/useVeSuggestionsPlayground.ts b/src/prototypes/example-ve-suggestions-playground/useVeSuggestionsPlayground.ts
index 69d92b5..bccff13 100644
--- a/src/prototypes/example-ve-suggestions-playground/useVeSuggestionsPlayground.ts
+++ b/src/prototypes/example-ve-suggestions-playground/useVeSuggestionsPlayground.ts
@@ -21,7 +21,7 @@ export interface VeSuggestionsCacheMeta {
   fetchedAt?: number
 }
 
-const wiki = createVeSuggestionsWiki('ve-suggestions-playground')
+const wiki = createVeSuggestionsWiki('en', 've-suggestions-playground')
 
 export function useVeSuggestionsPlayground(): {
   pageTitle: ReturnType<typeof ref<string>>
diff --git a/src/prototypes/template-homepage/impact/index.vue b/src/prototypes/template-homepage/impact/index.vue
index 7fbb814..c70b4ae 100644
--- a/src/prototypes/template-homepage/impact/index.vue
+++ b/src/prototypes/template-homepage/impact/index.vue
@@ -12,8 +12,8 @@ import ImpactModule from '../ImpactModule.vue'
 import MobileSubpageHeader from '../MobileSubpageHeader.vue'
 import { HOMEPAGE, IMPACT_DESKTOP } from '../dashpage-fixtures'
 
-const { user, realUsername, setCurrentUserPageList } = useConfig()
-const realImpact = useRealUserImpact(realUsername)
+const { user, realUsername, realWiki, setCurrentUserPageList } = useConfig()
+const realImpact = useRealUserImpact(realUsername, realWiki)
 
 watch(
   [() => user.value, realImpact.editedPageTitles],
diff --git a/src/prototypes/template-homepage/useDashpageRecentChangesModule.ts b/src/prototypes/template-homepage/useDashpageRecentChangesModule.ts
index 41c41d8..a30c747 100644
--- a/src/prototypes/template-homepage/useDashpageRecentChangesModule.ts
+++ b/src/prototypes/template-homepage/useDashpageRecentChangesModule.ts
@@ -1,6 +1,7 @@
 import { computed, ref, watch } from 'vue'
 
 import { useConfig } from '@/composables/useConfig'
+import { normalizeRealWiki, wikiLangForConfigUser } from '@/lib/config'
 import {
   dashpageRecentChangesUserKey,
   getDashpageRecentChangesCache,
@@ -9,7 +10,7 @@ import {
 import { shouldShowDashpageLoadPrompt } from '@/lib/dashpageLoadState'
 import type { RecentChangeFeedItem } from '@/lib/dashpageRecentChangesTypes'
 import { sortRecentChangeFeedItems } from '@/lib/dashpageRecentChangesTypes'
-import { runDashpageRecentChangesPipeline } from '@/lib/fetchDashpageRecentChanges'
+import { runDashpageRecentChangesPipeline, createDashpageRecentChangesWiki } from '@/lib/fetchDashpageRecentChanges'
 import { DASHPAGE_RC_FULLSCREEN_MAX } from '@/lib/dashpageRecentChangesConstants'
 import { getPortfolioCache, setPortfolioCache } from '@/lib/dashpagePortfolioCache'
 import { fetchUserEditedPageTitles, FetchUserEditedPageTitlesError } from '@/lib/fetchUserEditedPageTitles'
@@ -98,24 +99,30 @@ function loadFromModuleCache(userKey: string): void {
   error.value = null
 }
 
-function loadRealPortfolioFromCache(username: string): void {
-  const portfolio = getPortfolioCache(username)
+function loadRealPortfolioFromCache(username: string, wiki: string): void {
+  const portfolio = getPortfolioCache(username, wiki)
   cachedRealTitles.value = portfolio?.titles ?? []
 }
 
 export function useDashpageRecentChangesModule() {
-  const { user, realUsername, currentUserPageLists } = useConfig()
+  const { user, realUsername, realWiki, currentUserPageLists } = useConfig()
 
   watch(
-    [user, realUsername],
-    ([activeUser, username]) => {
+    [user, realUsername, realWiki],
+    ([activeUser, username, wiki]) => {
       error.value = null
       if (activeUser === 'real') {
-        loadRealPortfolioFromCache(username)
+        loadRealPortfolioFromCache(username, normalizeRealWiki(wiki))
       } else {
         cachedRealTitles.value = []
       }
-      loadFromModuleCache(dashpageRecentChangesUserKey(activeUser, username))
+      loadFromModuleCache(
+        dashpageRecentChangesUserKey(
+          activeUser,
+          username,
+          wikiLangForConfigUser(activeUser, wiki),
+        ),
+      )
     },
     { immediate: true },
   )
@@ -129,16 +136,20 @@ export function useDashpageRecentChangesModule() {
     loading.value = true
     error.value = null
 
-    const userKey = dashpageRecentChangesUserKey(user.value, realUsername.value)
+    const wikiLang = wikiLangForConfigUser(user.value, realWiki.value)
+    const userKey = dashpageRecentChangesUserKey(user.value, realUsername.value, wikiLang)
     const excludeRevIds = items.value.map((item) => item.revId)
     let replaceOnFirstSkeleton = items.value.length > 0
 
     try {
       if (user.value === 'real') {
-        let portfolio = getPortfolioCache(realUsername.value)
+        let portfolio = getPortfolioCache(realUsername.value, wikiLang)
         if (!portfolio) {
-          const titles = await fetchUserEditedPageTitles(realUsername.value, { signal })
-          portfolio = setPortfolioCache(realUsername.value, titles)
+          const titles = await fetchUserEditedPageTitles(realUsername.value, {
+            signal,
+            lang: wikiLang,
+          })
+          portfolio = setPortfolioCache(realUsername.value, titles, wikiLang)
         }
         cachedRealTitles.value = portfolio.titles
       }
@@ -149,6 +160,8 @@ export function useDashpageRecentChangesModule() {
         cachedRealTitles: cachedRealTitles.value,
         excludeRevIds,
         signal,
+        lang: wikiLang,
+        wiki: createDashpageRecentChangesWiki(wikiLang),
         handlers: {
           onSkeleton: (item) => {
             if (replaceOnFirstSkeleton) {
diff --git a/src/prototypes/template-homepage/useDashpageSuggestionModule.ts b/src/prototypes/template-homepage/useDashpageSuggestionModule.ts
index ae10571..8f91ca0 100644
--- a/src/prototypes/template-homepage/useDashpageSuggestionModule.ts
+++ b/src/prototypes/template-homepage/useDashpageSuggestionModule.ts
@@ -1,6 +1,8 @@
 import { computed, ref, watch, type ComputedRef } from 'vue'
+import type { FakeWiki } from 'fakewiki'
 
 import { useConfig } from '@/composables/useConfig'
+import { normalizeRealWiki, wikiLangForConfigUser } from '@/lib/config'
 import { shouldShowDashpageLoadPrompt } from '@/lib/dashpageLoadState'
 import { DASHPAGE_SUGGESTION_FEED_PREVIEW_MAX } from '@/lib/dashpageSuggestionFeedConstants'
 import {
@@ -42,10 +44,12 @@ import {
   type SuggestionDescriptionPart,
 } from '@/lib/ve-suggestions'
 
-const wiki = createVeSuggestionsWiki('dashpage-suggestion-mode')
-
 const DASHPAGE_EXCLUDED_SUGGESTION_TYPES = new Set(['redirect'])
 
+function createSuggestionWiki(lang: string): FakeWiki {
+  return createVeSuggestionsWiki(normalizeRealWiki(lang), 'dashpage-suggestion-mode')
+}
+
 export interface SuggestionQueueItem {
   pageTitle: string
   card: SuggestionCardData
@@ -61,7 +65,11 @@ function filterDashpageSuggestions(cards: SuggestionCardData[]): SuggestionCardD
   )
 }
 
-function pageNeedsVeRefresh(pageTitle: string, forceRefresh: boolean): boolean {
+function pageNeedsVeRefresh(
+  wiki: FakeWiki,
+  pageTitle: string,
+  forceRefresh: boolean,
+): boolean {
   if (forceRefresh) return true
 
   const cached = getCachedRun(pageTitle)
@@ -179,6 +187,7 @@ function queueToFeedItems(queue: SuggestionQueueItem[]): SuggestionFeedItem[] {
 }
 
 function buildQueueFromPages(
+  wiki: FakeWiki,
   pageTitles: string[],
   pagePreviews: Record<string, PagePreviewCache>,
 ): SuggestionQueueItem[] {
@@ -210,6 +219,7 @@ function buildQueueFromPages(
 }
 
 async function collectSuggestionsForPages(
+  wiki: FakeWiki,
   pageTitles: string[],
   forceRefresh: boolean,
   signal: AbortSignal,
@@ -223,7 +233,7 @@ async function collectSuggestionsForPages(
     if (signal.aborted) return items
 
     const pipelineResult = await runVeSuggestionsPipeline(wiki, pageTitle, {
-      forceRefresh: pageNeedsVeRefresh(pageTitle, forceRefresh),
+      forceRefresh: pageNeedsVeRefresh(wiki, pageTitle, forceRefresh),
       maxSuggestions: 1,
       excludeSuggestionTypes: [...DASHPAGE_EXCLUDED_SUGGESTION_TYPES],
     })
@@ -268,12 +278,14 @@ async function fetchMorelikePicks(
   limit: number,
   signal: AbortSignal,
   recordPipelineError: (message: string) => void,
+  lang: string,
 ): Promise<string[]> {
   try {
     return await fetchMorelikePageTitles(seedTitles, {
       limit,
       excludeTitles,
       signal,
+      lang,
     })
   } catch (caught) {
     if (caught instanceof FetchMorelikePageTitlesError && caught.code === 'aborted') {
@@ -338,7 +350,11 @@ export function useDashpageSuggestionModule(): {
   onSuggestionNavigate: (delta: number) => void
   onSuggestionOpenFullscreen: () => void
 } {
-  const { user, realUsername, currentUserPageLists } = useConfig()
+  const { user, realUsername, realWiki, currentUserPageLists } = useConfig()
+
+  function activeWikiLang(): string {
+    return wikiLangForConfigUser(user.value, realWiki.value)
+  }
 
   function hasRenderableData(): boolean {
     return queue.value.length > 0
@@ -355,7 +371,10 @@ export function useDashpageSuggestionModule(): {
     if (!titlesToFetch.length) return
 
     try {
-      const previews = await fetchPagePreviewMetadataBatch(titlesToFetch, { signal })
+      const previews = await fetchPagePreviewMetadataBatch(titlesToFetch, {
+        signal,
+        lang: activeWikiLang(),
+      })
       if (signal.aborted) return
 
       pagePreviews.value = { ...pagePreviews.value, ...previews }
@@ -422,7 +441,14 @@ export function useDashpageSuggestionModule(): {
     lastFetchedAt.value = cached.fetchedAt
     selectedPageTitles.value = cached.selectedPageTitles
     pagePreviews.value = cached.pagePreviews ?? {}
-    applyQueue(buildQueueFromPages(cached.selectedPageTitles, pagePreviews.value), cached.currentIndex)
+    applyQueue(
+      buildQueueFromPages(
+        createSuggestionWiki(activeWikiLang()),
+        cached.selectedPageTitles,
+        pagePreviews.value,
+      ),
+      cached.currentIndex,
+    )
     error.value = null
   }
 
@@ -432,18 +458,20 @@ export function useDashpageSuggestionModule(): {
       return
     }
 
-    const portfolio = getPortfolioCache(realUsername.value)
+    const portfolio = getPortfolioCache(realUsername.value, activeWikiLang())
     cachedRealTitles.value = portfolio?.titles ?? []
   }
 
   if (!watchRegistered) {
     watchRegistered = true
     watch(
-      [user, realUsername],
-      ([activeUser, username]) => {
+      [user, realUsername, realWiki],
+      ([activeUser, username, wiki]) => {
         error.value = null
         loadRealPortfolioFromCache()
-        loadFromModuleCache(dashpageSuggestionUserKey(activeUser, username))
+        loadFromModuleCache(
+          dashpageSuggestionUserKey(activeUser, username, wikiLangForConfigUser(activeUser, wiki)),
+        )
       },
       { immediate: true },
     )
@@ -458,7 +486,9 @@ export function useDashpageSuggestionModule(): {
     loading.value = true
     error.value = null
 
-    const userKey = dashpageSuggestionUserKey(user.value, realUsername.value)
+    const wikiLang = activeWikiLang()
+    const wiki = createSuggestionWiki(wikiLang)
+    const userKey = dashpageSuggestionUserKey(user.value, realUsername.value, wikiLang)
     const accumulated: SuggestionQueueItem[] = []
 
     if (forceRefresh) {
@@ -486,10 +516,13 @@ export function useDashpageSuggestionModule(): {
 
     try {
       if (user.value === 'real') {
-        let portfolio = getPortfolioCache(realUsername.value)
+        let portfolio = getPortfolioCache(realUsername.value, wikiLang)
         if (!portfolio) {
-          const titles = await fetchUserEditedPageTitles(realUsername.value, { signal })
-          portfolio = setPortfolioCache(realUsername.value, titles)
+          const titles = await fetchUserEditedPageTitles(realUsername.value, {
+            signal,
+            lang: wikiLang,
+          })
+          portfolio = setPortfolioCache(realUsername.value, titles, wikiLang)
         }
         cachedRealTitles.value = portfolio.titles
       }
@@ -515,6 +548,7 @@ export function useDashpageSuggestionModule(): {
       )
 
       const poolItems = await collectSuggestionsForPages(
+        wiki,
         poolPagePicks,
         forceRefresh,
         signal,
@@ -540,6 +574,7 @@ export function useDashpageSuggestionModule(): {
           DASHPAGE_SUGGESTION_MORELIKE_MAX,
           signal,
           recordPipelineError,
+          wikiLang,
         )
       } catch (caught) {
         if (caught instanceof FetchMorelikePageTitlesError && caught.code === 'aborted') {
@@ -551,6 +586,7 @@ export function useDashpageSuggestionModule(): {
       triedPageTitles.push(...morelikePagePicks)
 
       let morelikeItems = await collectSuggestionsForPages(
+        wiki,
         morelikePagePicks,
         forceRefresh,
         signal,
@@ -580,6 +616,7 @@ export function useDashpageSuggestionModule(): {
             DASHPAGE_SUGGESTION_MORELIKE_SUPPLEMENT_MAX,
             signal,
             recordPipelineError,
+            wikiLang,
           )
         } catch (caught) {
           if (caught instanceof FetchMorelikePageTitlesError && caught.code === 'aborted') {
@@ -592,6 +629,7 @@ export function useDashpageSuggestionModule(): {
           morelikeItems = [
             ...morelikeItems,
             ...(await collectSuggestionsForPages(
+              wiki,
               supplementPagePicks,
               forceRefresh,
               signal,
@@ -755,7 +793,7 @@ export function useDashpageSuggestionModule(): {
     if (nextIndex < 0 || nextIndex >= queue.value.length) return
 
     currentIndex.value = nextIndex
-    persistCache(dashpageSuggestionUserKey(user.value, realUsername.value))
+    persistCache(dashpageSuggestionUserKey(user.value, realUsername.value, activeWikiLang()))
   }
 
   /** Homepage preview always shows queue[0]; align fullscreen before navigating. */
@@ -763,7 +801,7 @@ export function useDashpageSuggestionModule(): {
     if (!queue.value.length || currentIndex.value === 0) return
 
     currentIndex.value = 0
-    persistCache(dashpageSuggestionUserKey(user.value, realUsername.value))
+    persistCache(dashpageSuggestionUserKey(user.value, realUsername.value, activeWikiLang()))
   }
 
   return {
diff --git a/src/prototypes/template-homepage/useHomepageImpact.ts b/src/prototypes/template-homepage/useHomepageImpact.ts
index d4a074d..e20aeef 100644
--- a/src/prototypes/template-homepage/useHomepageImpact.ts
+++ b/src/prototypes/template-homepage/useHomepageImpact.ts
@@ -19,8 +19,8 @@ export function useHomepageImpact(): {
   impactDesktopProps: ComputedRef<ImpactModuleBind>
   onImpactRefresh: () => void
 } {
-  const { user, realUsername, setCurrentUserPageList } = useConfig()
-  const realImpact = useRealUserImpact(realUsername)
+  const { user, realUsername, realWiki, setCurrentUserPageList } = useConfig()
+  const realImpact = useRealUserImpact(realUsername, realWiki)
 
   watch(
     [() => user.value, realImpact.editedPageTitles],

From 476f235edb3239fde6c3db5653e9f058593475a7 Mon Sep 17 00:00:00 2001
From: Lu Wilson <lu@todepond.com>
Date: Tue, 26 May 2026 14:29:06 +0200
Subject: [PATCH 19/21] no wet leg

---
 src/lib/dashpageSuggestionCache.ts            | 13 +++++++++---
 src/lib/fetchDashpageRecentChanges.ts         |  5 ++---
 .../template-homepage/RecentChangesView.vue   |  4 ++--
 .../template-homepage/SuggestedEditsView.vue  | 16 +++++----------
 .../SuggestionFeedModule.vue                  | 15 +++-----------
 .../template-homepage/SuggestionFeedView.vue  |  4 ++--
 .../SuggestionModeModule.vue                  | 20 +++++--------------
 .../template-homepage/recent-changes-feed.css | 15 ++++++++++++--
 .../useDashpageSuggestionModule.ts            | 14 ++++++++++---
 9 files changed, 53 insertions(+), 53 deletions(-)

diff --git a/src/lib/dashpageSuggestionCache.ts b/src/lib/dashpageSuggestionCache.ts
index 7e18c85..a446363 100644
--- a/src/lib/dashpageSuggestionCache.ts
+++ b/src/lib/dashpageSuggestionCache.ts
@@ -126,6 +126,13 @@ export function getPortfolioPagesForUser(
   return titles
 }
 
+/** Pages to seed suggestion / recent-changes pipelines. Real users with no edits get none. */
+export function portfolioPoolForDashpage(user: ConfigUser, portfolio: string[]): string[] {
+  if (portfolio.length) return portfolio
+  if (user === 'real') return []
+  return [DASHPAGE_SUGGESTION_FALLBACK_PAGE]
+}
+
 export function pickRandomPage(titles: string[], exclude?: string): string {
   const pool =
     exclude && titles.length > 1 ?
@@ -150,7 +157,7 @@ export function pickUpToRandomPages(
   let pool = titles.filter((title) => !exclude.has(title))
 
   if (!pool.length) {
-    pool = titles.length ? [...titles] : [DASHPAGE_SUGGESTION_FALLBACK_PAGE]
+    pool = titles.length ? [...titles] : []
   }
 
   const count = Math.min(max, pool.length)
@@ -171,7 +178,7 @@ export function resolvePortfolioPages(
 ): string[] {
   const portfolio = getPortfolioPagesForUser(user, pageLists, cachedRealTitles)
   if (!portfolio.length) {
-    return [DASHPAGE_SUGGESTION_FALLBACK_PAGE]
+    return user === 'real' ? [] : pickUpToRandomPages([DASHPAGE_SUGGESTION_FALLBACK_PAGE], DASHPAGE_SUGGESTION_POOL_MAX, excludeTitles)
   }
   return pickUpToRandomPages(portfolio, DASHPAGE_SUGGESTION_POOL_MAX, excludeTitles)
 }
@@ -183,5 +190,5 @@ export function resolvePortfolioPage(
   exclude?: string,
 ): string {
   const pages = resolvePortfolioPages(user, pageLists, cachedRealTitles, exclude ? [exclude] : [])
-  return pages[0] ?? DASHPAGE_SUGGESTION_FALLBACK_PAGE
+  return pages[0] ?? (user === 'real' ? '' : DASHPAGE_SUGGESTION_FALLBACK_PAGE)
 }
diff --git a/src/lib/fetchDashpageRecentChanges.ts b/src/lib/fetchDashpageRecentChanges.ts
index b1169f7..a05490d 100644
--- a/src/lib/fetchDashpageRecentChanges.ts
+++ b/src/lib/fetchDashpageRecentChanges.ts
@@ -21,9 +21,9 @@ import {
   type RevisionCandidate,
 } from '@/lib/dashpageRecentChangesSignals'
 import {
-  DASHPAGE_SUGGESTION_FALLBACK_PAGE,
   getPortfolioPagesForUser,
   pickUpToRandomPages,
+  portfolioPoolForDashpage,
 } from '@/lib/dashpageSuggestionCache'
 import {
   FetchMorelikePageTitlesError,
@@ -286,8 +286,7 @@ async function streamPortfolioRevisions(
   lang = 'en',
 ): Promise<PortfolioStreamResult> {
   const portfolio = getPortfolioPagesForUser(user, pageLists, cachedRealTitles)
-  const portfolioPool =
-    portfolio.length ? portfolio : [DASHPAGE_SUGGESTION_FALLBACK_PAGE]
+  const portfolioPool = portfolioPoolForDashpage(user, portfolio)
 
   const portfolioPicks = pickUpToRandomPages(portfolioPool, DASHPAGE_RC_KNOWN_PAGES_MAX)
 
diff --git a/src/prototypes/template-homepage/RecentChangesView.vue b/src/prototypes/template-homepage/RecentChangesView.vue
index 50f675d..3c24193 100644
--- a/src/prototypes/template-homepage/RecentChangesView.vue
+++ b/src/prototypes/template-homepage/RecentChangesView.vue
@@ -68,14 +68,14 @@ function onRefreshClick(): void {
       />
     </ul>
 
-    <template v-else-if="emptyMessage && !showLoadPrompt">
+    <div v-else-if="emptyMessage && !showLoadPrompt" class="review-changes-view__empty-state">
       <p class="review-changes-view__empty">{{ emptyMessage }}</p>
       <div v-if="showRefresh" class="review-changes-view__empty-actions">
         <CdxButton weight="quiet" :disabled="refreshing" @click="onRefreshClick">
           {{ refreshing ? 'Loading…' : 'Try again' }}
         </CdxButton>
       </div>
-    </template>
+    </div>
   </div>
 </template>
 
diff --git a/src/prototypes/template-homepage/SuggestedEditsView.vue b/src/prototypes/template-homepage/SuggestedEditsView.vue
index 625f094..f6470e5 100644
--- a/src/prototypes/template-homepage/SuggestedEditsView.vue
+++ b/src/prototypes/template-homepage/SuggestedEditsView.vue
@@ -101,18 +101,14 @@ const hasPreview = computed(
   () => !!props.articleTitle && (!!taskTitle.value || !!props.emptyMessage),
 )
 
-const showLoadPrompt = computed(
-  () => props.loadPending && !hasPreview.value,
-)
+const showLoadPrompt = computed(() => props.loadPending && !hasPreview.value)
 
 const taskTypeColor = computed(() =>
   props.taskDifficulty ? CHANGE_SIZE_COLORS[props.taskDifficulty] : '#14866d',
 )
 
 const hasTaskDescription = computed(
-  () =>
-    (props.taskDescriptionParts?.length ?? 0) > 0 ||
-    !!props.taskDescription?.trim(),
+  () => (props.taskDescriptionParts?.length ?? 0) > 0 || !!props.taskDescription?.trim(),
 )
 
 function onLoadClick(): void {
@@ -230,10 +226,7 @@ function onNavigate(delta: number): void {
             </span>
           </div>
 
-          <p
-            v-if="hasTaskDescription"
-            class="suggested-edits-view__task-description"
-          >
+          <p v-if="hasTaskDescription" class="suggested-edits-view__task-description">
             <template v-if="taskDescriptionParts?.length">
               <template v-for="(part, index) in taskDescriptionParts" :key="index">
                 <a
@@ -242,7 +235,8 @@ function onNavigate(delta: number): void {
                   :href="part.href"
                   target="_blank"
                   rel="noreferrer noopener"
-                >{{ part.label }}</a>
+                  >{{ part.label }}</a
+                >
                 <template v-else>{{ part.text }}</template>
               </template>
             </template>
diff --git a/src/prototypes/template-homepage/SuggestionFeedModule.vue b/src/prototypes/template-homepage/SuggestionFeedModule.vue
index 1b17cb5..1054223 100644
--- a/src/prototypes/template-homepage/SuggestionFeedModule.vue
+++ b/src/prototypes/template-homepage/SuggestionFeedModule.vue
@@ -97,11 +97,7 @@ function onLoadClick(): void {
         >
           {{ refreshing ? 'Loading…' : 'Load' }}
         </CdxButton>
-        <RouterLink
-          v-if="isLinkCard"
-          :to="to!"
-          class="suggestion-feed-module__see-all"
-        >
+        <RouterLink v-if="isLinkCard" :to="to!" class="suggestion-feed-module__see-all">
           See all suggestions
         </RouterLink>
       </div>
@@ -114,18 +110,13 @@ function onLoadClick(): void {
           :disabled="refreshing"
           @click.stop="onRefreshClick"
         >
-          {{ refreshing ? 'Loading…' : 'Try another page' }}
+          {{ refreshing ? 'Loading…' : '' }}
         </CdxButton>
       </template>
 
       <template v-else-if="hasPreview">
         <ul class="suggestion-feed-module__feed">
-          <SuggestionFeedItem
-            v-for="item in previewItems"
-            :key="item.id"
-            :item="item"
-            preview
-          />
+          <SuggestionFeedItem v-for="item in previewItems" :key="item.id" :item="item" preview />
         </ul>
       </template>
     </DashboardModule>
diff --git a/src/prototypes/template-homepage/SuggestionFeedView.vue b/src/prototypes/template-homepage/SuggestionFeedView.vue
index f1cd744..84a0b4c 100644
--- a/src/prototypes/template-homepage/SuggestionFeedView.vue
+++ b/src/prototypes/template-homepage/SuggestionFeedView.vue
@@ -69,13 +69,13 @@ function onRefreshClick(): void {
       />
     </ul>
 
-    <template v-else-if="emptyMessage && !showLoadPrompt">
+    <div v-else-if="emptyMessage && !showLoadPrompt" class="review-changes-view__empty-state">
       <p class="review-changes-view__empty">{{ emptyMessage }}</p>
       <div v-if="showRefresh" class="review-changes-view__empty-actions">
         <CdxButton weight="quiet" :disabled="refreshing" @click="onRefreshClick">
           {{ refreshing ? 'Loading…' : 'Try again' }}
         </CdxButton>
       </div>
-    </template>
+    </div>
   </div>
 </template>
diff --git a/src/prototypes/template-homepage/SuggestionModeModule.vue b/src/prototypes/template-homepage/SuggestionModeModule.vue
index 49306bf..e28f7e1 100644
--- a/src/prototypes/template-homepage/SuggestionModeModule.vue
+++ b/src/prototypes/template-homepage/SuggestionModeModule.vue
@@ -58,14 +58,10 @@ const emit = defineEmits<{
 }>()
 
 const hasPreview = computed(
-  () =>
-    !!props.articleTitle &&
-    (!!props.taskTypeLabel || !!props.emptyMessage),
+  () => !!props.articleTitle && (!!props.taskTypeLabel || !!props.emptyMessage),
 )
 
-const showLoadPrompt = computed(
-  () => props.loadPending && !hasPreview.value,
-)
+const showLoadPrompt = computed(() => props.loadPending && !hasPreview.value)
 
 const isLinkCard = computed(() => props.to != null)
 
@@ -77,10 +73,7 @@ const showRefreshInTitle = computed(
 )
 
 const showSuggestionCounter = computed(
-  () =>
-    hasPreview.value &&
-    props.totalSuggestionCount != null &&
-    props.totalSuggestionCount > 1,
+  () => hasPreview.value && props.totalSuggestionCount != null && props.totalSuggestionCount > 1,
 )
 
 const taskTypeColor = computed(() =>
@@ -157,7 +150,7 @@ function onOpenFullscreen(): void {
           :disabled="refreshing"
           @click.stop="onRefreshClick"
         >
-          {{ refreshing ? 'Loading…' : 'Try another page' }}
+          {{ refreshing ? 'Loading…' : '' }}
         </CdxButton>
       </template>
 
@@ -176,10 +169,7 @@ function onOpenFullscreen(): void {
           :aria-label="props.editHref ? `Edit ${props.articleTitle}` : undefined"
         >
           <div class="suggestion-mode-module__preview-body">
-            <div
-              v-if="props.thumbnailSrc"
-              class="suggestion-mode-module__thumb-wrap"
-            >
+            <div v-if="props.thumbnailSrc" class="suggestion-mode-module__thumb-wrap">
               <img
                 class="suggestion-mode-module__thumb"
                 :src="props.thumbnailSrc"
diff --git a/src/prototypes/template-homepage/recent-changes-feed.css b/src/prototypes/template-homepage/recent-changes-feed.css
index 8f29559..4b8af51 100644
--- a/src/prototypes/template-homepage/recent-changes-feed.css
+++ b/src/prototypes/template-homepage/recent-changes-feed.css
@@ -425,12 +425,23 @@
   padding: var(--spacing-200, 32px);
 }
 
+.review-changes-view__empty-state {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-50, 8px);
+  padding: var(--spacing-200, 32px);
+  text-align: center;
+}
+
 .review-changes-view__empty {
-  margin: var(--spacing-100, 16px) var(--spacing-25, 4px);
+  margin: 0;
   font-size: var(--font-size-small);
   color: var(--color-base--subtle, #54595d);
 }
 
 .review-changes-view__empty-actions {
-  margin: 0 var(--spacing-25, 4px);
+  margin: 0;
 }
diff --git a/src/prototypes/template-homepage/useDashpageSuggestionModule.ts b/src/prototypes/template-homepage/useDashpageSuggestionModule.ts
index 8f91ca0..83d9cb4 100644
--- a/src/prototypes/template-homepage/useDashpageSuggestionModule.ts
+++ b/src/prototypes/template-homepage/useDashpageSuggestionModule.ts
@@ -7,7 +7,6 @@ import { shouldShowDashpageLoadPrompt } from '@/lib/dashpageLoadState'
 import { DASHPAGE_SUGGESTION_FEED_PREVIEW_MAX } from '@/lib/dashpageSuggestionFeedConstants'
 import {
   DASHPAGE_MORELIKE_SEED_COUNT,
-  DASHPAGE_SUGGESTION_FALLBACK_PAGE,
   DASHPAGE_SUGGESTION_MAX_TRIED_PAGES,
   DASHPAGE_SUGGESTION_MIN_QUEUE,
   DASHPAGE_SUGGESTION_MORELIKE_MAX,
@@ -17,6 +16,7 @@ import {
   getDashpageSuggestionModuleCache,
   getPortfolioPagesForUser,
   pickUpToRandomPages,
+  portfolioPoolForDashpage,
   setDashpageSuggestionModuleCache,
   type PagePreviewCache,
 } from '@/lib/dashpageSuggestionCache'
@@ -532,8 +532,16 @@ export function useDashpageSuggestionModule(): {
         currentUserPageLists.value,
         cachedRealTitles.value,
       )
-      const portfolioPool =
-        portfolio.length ? portfolio : [DASHPAGE_SUGGESTION_FALLBACK_PAGE]
+      const portfolioPool = portfolioPoolForDashpage(user.value, portfolio)
+
+      if (user.value === 'real' && !portfolioPool.length) {
+        applyQueue([], 0)
+        selectedPageTitles.value = []
+        pagePreviews.value = {}
+        lastFetchedAt.value = Date.now()
+        persistCache(userKey)
+        return
+      }
 
       const excludeTitles = forceRefresh ? selectedPageTitles.value : []
 

From e8ea9fbb84ffabdd531ec618c63fe76d4aa1b050 Mon Sep 17 00:00:00 2001
From: Lu Wilson <lu@todepond.com>
Date: Tue, 26 May 2026 15:02:09 +0200
Subject: [PATCH 20/21] all langs

---
 src/components/PrototypeUserSettingsPanel.vue | 10 ++---
 src/composables/useConfig.ts                  | 25 ++++++++---
 src/composables/useRealUserImpact.ts          |  6 +--
 src/lib/config.ts                             | 42 ++++++++++++-------
 src/lib/dashpagePortfolioCache.ts             |  4 +-
 src/lib/dashpageSuggestionCache.ts            | 10 ++---
 src/lib/fetchDashpageRecentChanges.ts         |  4 +-
 src/lib/impactCache.ts                        |  4 +-
 .../template-homepage/impact/index.vue        |  4 +-
 .../useDashpageRecentChangesModule.ts         | 21 ++++------
 .../useDashpageSuggestionModule.ts            | 14 +++----
 .../template-homepage/useHomepageImpact.ts    |  4 +-
 12 files changed, 85 insertions(+), 63 deletions(-)

diff --git a/src/components/PrototypeUserSettingsPanel.vue b/src/components/PrototypeUserSettingsPanel.vue
index 93b7b7b..d87a1f3 100644
--- a/src/components/PrototypeUserSettingsPanel.vue
+++ b/src/components/PrototypeUserSettingsPanel.vue
@@ -10,7 +10,7 @@ const {
   theme,
   user,
   realUsername,
-  realWiki,
+  lang,
   currentUserPageLists,
   setCurrentUserPageList,
   resetCurrentUserPageListField,
@@ -50,14 +50,14 @@ const editedPagesText = computed({
         default-label="New editor"
       />
     </label>
+    <label class="prototype-user-settings-panel__field">
+      <span class="prototype-user-settings-panel__label">Lang</span>
+      <CdxTextInput v-model="lang" class="prototype-user-settings-panel__input" />
+    </label>
     <label v-if="user === 'real'" class="prototype-user-settings-panel__field">
       <span class="prototype-user-settings-panel__label">Username</span>
       <CdxTextInput v-model="realUsername" class="prototype-user-settings-panel__input" />
     </label>
-    <label v-if="user === 'real'" class="prototype-user-settings-panel__field">
-      <span class="prototype-user-settings-panel__label">Wiki</span>
-      <CdxTextInput v-model="realWiki" class="prototype-user-settings-panel__input" />
-    </label>
     <template v-if="user !== 'real'">
       <label class="prototype-user-settings-panel__field">
         <span class="prototype-user-settings-panel__label">Watchlist</span>
diff --git a/src/composables/useConfig.ts b/src/composables/useConfig.ts
index 31d63bc..7c3a968 100644
--- a/src/composables/useConfig.ts
+++ b/src/composables/useConfig.ts
@@ -3,6 +3,7 @@ import { computed, readonly, ref, watch, type ComputedRef, type DeepReadonly, ty
 import {
   configUserDisplayName,
   configUserPageTitle,
+  langForUser,
   loadConfig,
   resetUserPageListField,
   saveConfig,
@@ -36,7 +37,8 @@ export function useConfig(): {
   theme: Ref<ConfigTheme>
   user: Ref<ConfigUser>
   realUsername: Ref<string>
-  realWiki: Ref<string>
+  lang: Ref<string>
+  realLang: ComputedRef<string>
   displayName: ComputedRef<string>
   pageTitle: ComputedRef<string>
   currentUserPageLists: ComputedRef<UserPageLists>
@@ -64,13 +66,25 @@ export function useConfig(): {
     },
   })
 
-  const realWiki = computed({
-    get: () => config.value.realWiki,
+  const lang = computed({
+    get: () => config.value.userPageLists[user.value].lang,
     set: (value: string) => {
-      config.value = { ...config.value, realWiki: value }
+      const activeUser = user.value
+      config.value = {
+        ...config.value,
+        userPageLists: {
+          ...config.value.userPageLists,
+          [activeUser]: {
+            ...config.value.userPageLists[activeUser],
+            lang: value,
+          },
+        },
+      }
     },
   })
 
+  const realLang = computed(() => langForUser('real', config.value.userPageLists))
+
   const displayName = computed(() =>
     configUserDisplayName(config.value.user, config.value.realUsername),
   )
@@ -115,7 +129,8 @@ export function useConfig(): {
     theme,
     user,
     realUsername,
-    realWiki,
+    lang,
+    realLang,
     displayName,
     pageTitle,
     currentUserPageLists,
diff --git a/src/composables/useRealUserImpact.ts b/src/composables/useRealUserImpact.ts
index 5bc3735..db4a10c 100644
--- a/src/composables/useRealUserImpact.ts
+++ b/src/composables/useRealUserImpact.ts
@@ -1,6 +1,6 @@
 import { computed, ref, watch, type ComputedRef, type Ref } from 'vue'
 
-import { normalizeRealWiki, normalizeWikiUsername } from '@/lib/config'
+import { normalizeLang, normalizeWikiUsername } from '@/lib/config'
 import { getCachedImpact, setCachedImpact } from '@/lib/impactCache'
 import { FetchUserImpactError, fetchUserImpact } from '@/lib/fetchUserImpact'
 import { EMPTY_IMPACT_DATA, type ImpactData } from '@/lib/impactTypes'
@@ -66,13 +66,13 @@ export function useRealUserImpact(
     [usernameSource, wikiSource],
     ([name, wiki]) => {
       error.value = null
-      loadFromCache(name, normalizeRealWiki(wiki))
+      loadFromCache(name, normalizeLang(wiki))
     },
     { immediate: true },
   )
 
   const normalizedUsername = computed(() => normalizeWikiUsername(usernameSource.value))
-  const normalizedWiki = computed(() => normalizeRealWiki(wikiSource.value))
+  const normalizedWiki = computed(() => normalizeLang(wikiSource.value))
 
   const hasCache = computed(() => lastFetchedAt.value != null)
 
diff --git a/src/lib/config.ts b/src/lib/config.ts
index 8d3619b..c9761c1 100644
--- a/src/lib/config.ts
+++ b/src/lib/config.ts
@@ -6,6 +6,8 @@ export type ConfigUser = 'logged-out' | 'new' | 'experienced' | 'real'
 export type PageListKey = 'watchlist' | 'readingList' | 'editedPages'
 
 export interface UserPageLists {
+  /** Wikipedia language code (e.g. `en`, `fr`). */
+  lang: string
   watchlist: string[]
   readingList: string[]
   editedPages: string[]
@@ -16,23 +18,24 @@ export interface Config {
   user: ConfigUser
   /** Wikipedia username when `user` is `'real'`. */
   realUsername: string
-  /** Wikipedia language code when `user` is `'real'` (e.g. `en`, `fr`). */
-  realWiki: string
   userPageLists: Record<ConfigUser, UserPageLists>
 }
 
 export const DEFAULT_USER_PAGE_LISTS: Record<ConfigUser, UserPageLists> = {
   'logged-out': {
+    lang: 'en',
     watchlist: [],
     readingList: [],
     editedPages: [],
   },
   new: {
+    lang: 'en',
     watchlist: [],
     readingList: ['Wet Leg', 'Jade Thirlwall'],
     editedPages: [],
   },
   experienced: {
+    lang: 'en',
     watchlist: [
       'Wet Leg',
       'Jade Thirlwall',
@@ -54,6 +57,7 @@ export const DEFAULT_USER_PAGE_LISTS: Record<ConfigUser, UserPageLists> = {
     editedPages: ['Wet Leg', 'Jade Thirlwall', 'Confidence Man (band)', 'Gorillaz'],
   },
   real: {
+    lang: 'en',
     watchlist: [],
     readingList: [],
     editedPages: [],
@@ -64,7 +68,6 @@ export const DEFAULT_CONFIG: Config = {
   theme: 'light',
   user: 'new',
   realUsername: '',
-  realWiki: 'en',
   userPageLists: cloneUserPageListsMap(DEFAULT_USER_PAGE_LISTS),
 }
 
@@ -95,14 +98,14 @@ export function normalizeWikiUsername(raw: string): string {
 }
 
 /** Normalize a Wikipedia language code for API calls and cache keys. */
-export function normalizeRealWiki(raw: string): string {
+export function normalizeLang(raw: string): string {
   const trimmed = raw.trim().toLowerCase()
   return trimmed.length ? trimmed : 'en'
 }
 
 /** Wiki hostname from a language code (e.g. `fr` → `fr.wikipedia.org`). */
 export function wikiHostFromLang(lang: string): string {
-  return `${normalizeRealWiki(lang)}.wikipedia.org`
+  return `${normalizeLang(lang)}.wikipedia.org`
 }
 
 /** FakeWiki / REST client base URL (trailing slash). */
@@ -110,9 +113,11 @@ export function wikiBaseUrlFromLang(lang: string): string {
   return `https://${wikiHostFromLang(lang)}/`
 }
 
-/** Wiki lang for live API calls: real-user setting, otherwise English fixtures. */
-export function wikiLangForConfigUser(user: ConfigUser, realWiki: string): string {
-  return user === 'real' ? normalizeRealWiki(realWiki) : 'en'
+export function langForUser(
+  user: ConfigUser,
+  userPageLists: Record<ConfigUser, UserPageLists>,
+): string {
+  return normalizeLang(userPageLists[user]?.lang)
 }
 
 export function configUserDisplayName(user: ConfigUser, realUsername = ''): string {
@@ -167,6 +172,7 @@ function isConfigUser(value: unknown): value is ConfigUser {
 
 function cloneUserPageLists(lists: UserPageLists): UserPageLists {
   return {
+    lang: lists.lang,
     watchlist: [...lists.watchlist],
     readingList: [...lists.readingList],
     editedPages: [...lists.editedPages],
@@ -198,6 +204,10 @@ function mergeUserPageLists(user: ConfigUser, stored: unknown): UserPageLists {
   const record = stored as Record<string, unknown>
   const merged = { ...cloneUserPageLists(defaults) }
 
+  if (typeof record.lang === 'string') {
+    merged.lang = normalizeLang(record.lang)
+  }
+
   for (const key of PAGE_LIST_KEYS) {
     const parsed = parseStringArray(record[key])
     if (parsed !== null) {
@@ -239,17 +249,20 @@ export function loadConfig(): Config {
     const record = parsed as Record<string, unknown>
     const realUsername =
       typeof record.realUsername === 'string' ? record.realUsername : DEFAULT_CONFIG.realUsername
-    const realWiki =
-      typeof record.realWiki === 'string'
-        ? normalizeRealWiki(record.realWiki)
-        : DEFAULT_CONFIG.realWiki
+    const userPageLists = mergeUserPageListsMap(record.userPageLists)
+
+    if (typeof record.realWiki === 'string') {
+      userPageLists.real = {
+        ...userPageLists.real,
+        lang: normalizeLang(record.realWiki),
+      }
+    }
 
     return {
       theme: isConfigTheme(record.theme) ? record.theme : DEFAULT_CONFIG.theme,
       user: isConfigUser(record.user) ? record.user : DEFAULT_CONFIG.user,
       realUsername,
-      realWiki,
-      userPageLists: mergeUserPageListsMap(record.userPageLists),
+      userPageLists,
     }
   } catch {
     wipeLocalStorage()
@@ -262,7 +275,6 @@ function cloneConfig(config: Config): Config {
     theme: config.theme,
     user: config.user,
     realUsername: config.realUsername,
-    realWiki: config.realWiki,
     userPageLists: cloneUserPageListsMap(config.userPageLists),
   }
 }
diff --git a/src/lib/dashpagePortfolioCache.ts b/src/lib/dashpagePortfolioCache.ts
index cc2c876..72052bf 100644
--- a/src/lib/dashpagePortfolioCache.ts
+++ b/src/lib/dashpagePortfolioCache.ts
@@ -1,4 +1,4 @@
-import { normalizeRealWiki, normalizeWikiUsername } from '@/lib/config'
+import { normalizeLang, normalizeWikiUsername } from '@/lib/config'
 import { wipeLocalStorage } from '@/lib/wipeLocalStorage'
 
 const STORAGE_KEY = 'protowiki-dashpage-portfolio-v1'
@@ -13,7 +13,7 @@ type PortfolioStore = Record<string, DashpagePortfolioCacheEntry>
 function realUserPortfolioCacheKey(username: string, wiki: string): string {
   const normalizedUsername = normalizeWikiUsername(username)
   if (!normalizedUsername.length) return ''
-  return `${normalizeRealWiki(wiki)}:${normalizedUsername}`
+  return `${normalizeLang(wiki)}:${normalizedUsername}`
 }
 
 function readStore(): PortfolioStore {
diff --git a/src/lib/dashpageSuggestionCache.ts b/src/lib/dashpageSuggestionCache.ts
index a446363..ee1895c 100644
--- a/src/lib/dashpageSuggestionCache.ts
+++ b/src/lib/dashpageSuggestionCache.ts
@@ -1,6 +1,6 @@
 import { wipeLocalStorage } from '@/lib/wipeLocalStorage'
 import type { ConfigUser, UserPageLists } from '@/lib/config'
-import { normalizeRealWiki, normalizeWikiUsername } from '@/lib/config'
+import { normalizeLang, normalizeWikiUsername } from '@/lib/config'
 
 const STORAGE_KEY = 'protowiki-dashpage-suggestion-module-v4'
 export const DASHPAGE_SUGGESTION_FALLBACK_PAGE = 'Wet Leg'
@@ -34,14 +34,14 @@ type ModuleStore = Record<string, DashpageSuggestionModuleCache>
 export function dashpageSuggestionUserKey(
   user: ConfigUser,
   realUsername: string,
-  realWiki = 'en',
+  lang = 'en',
 ): string {
+  const wiki = normalizeLang(lang)
   if (user === 'real') {
     const normalized = normalizeWikiUsername(realUsername)
-    const wiki = normalizeRealWiki(realWiki)
-    return normalized.length ? `real:${wiki}:${normalized}` : 'real'
+    return normalized.length ? `real:${wiki}:${normalized}` : `real:${wiki}`
   }
-  return user
+  return `${user}:${wiki}`
 }
 
 function readStore(): ModuleStore {
diff --git a/src/lib/fetchDashpageRecentChanges.ts b/src/lib/fetchDashpageRecentChanges.ts
index a05490d..0e26a19 100644
--- a/src/lib/fetchDashpageRecentChanges.ts
+++ b/src/lib/fetchDashpageRecentChanges.ts
@@ -2,7 +2,7 @@ import { FakeWiki } from 'fakewiki'
 import type { FWCachedRevision } from 'fakewiki/types'
 
 import type { ConfigUser, UserPageLists } from '@/lib/config'
-import { normalizeRealWiki, wikiBaseUrlFromLang } from '@/lib/config'
+import { normalizeLang, wikiBaseUrlFromLang } from '@/lib/config'
 import {
   DASHPAGE_RC_API_USER_AGENT,
   DASHPAGE_RC_FALLBACK_PAGE,
@@ -451,7 +451,7 @@ async function fetchStructuredDeltaSegments(
   lang: string,
 ): Promise<RecentChangeStructuredDeltaSegment[] | null> {
   try {
-    const result = await wiki.getStructuredDeltasFromRevision(revId, { lang: normalizeRealWiki(lang) })
+    const result = await wiki.getStructuredDeltasFromRevision(revId, { lang: normalizeLang(lang) })
     if (!result?.segments?.length) return null
     return result.segments.map((segment) => ({
       text: segment.text,
diff --git a/src/lib/impactCache.ts b/src/lib/impactCache.ts
index b6e04ee..eba0a3f 100644
--- a/src/lib/impactCache.ts
+++ b/src/lib/impactCache.ts
@@ -1,4 +1,4 @@
-import { normalizeRealWiki, normalizeWikiUsername } from '@/lib/config'
+import { normalizeLang, normalizeWikiUsername } from '@/lib/config'
 import type { ImpactData } from '@/lib/impactTypes'
 import { wipeLocalStorage } from '@/lib/wipeLocalStorage'
 
@@ -14,7 +14,7 @@ type ImpactCacheStore = Record<string, CachedImpactEntry>
 function realUserImpactCacheKey(username: string, wiki: string): string {
   const normalizedUsername = normalizeWikiUsername(username)
   if (!normalizedUsername.length) return ''
-  return `${normalizeRealWiki(wiki)}:${normalizedUsername}`
+  return `${normalizeLang(wiki)}:${normalizedUsername}`
 }
 
 function readStore(): ImpactCacheStore {
diff --git a/src/prototypes/template-homepage/impact/index.vue b/src/prototypes/template-homepage/impact/index.vue
index c70b4ae..f256576 100644
--- a/src/prototypes/template-homepage/impact/index.vue
+++ b/src/prototypes/template-homepage/impact/index.vue
@@ -12,8 +12,8 @@ import ImpactModule from '../ImpactModule.vue'
 import MobileSubpageHeader from '../MobileSubpageHeader.vue'
 import { HOMEPAGE, IMPACT_DESKTOP } from '../dashpage-fixtures'
 
-const { user, realUsername, realWiki, setCurrentUserPageList } = useConfig()
-const realImpact = useRealUserImpact(realUsername, realWiki)
+const { user, realUsername, realLang, setCurrentUserPageList } = useConfig()
+const realImpact = useRealUserImpact(realUsername, realLang)
 
 watch(
   [() => user.value, realImpact.editedPageTitles],
diff --git a/src/prototypes/template-homepage/useDashpageRecentChangesModule.ts b/src/prototypes/template-homepage/useDashpageRecentChangesModule.ts
index a30c747..e55e50e 100644
--- a/src/prototypes/template-homepage/useDashpageRecentChangesModule.ts
+++ b/src/prototypes/template-homepage/useDashpageRecentChangesModule.ts
@@ -1,7 +1,7 @@
 import { computed, ref, watch } from 'vue'
 
 import { useConfig } from '@/composables/useConfig'
-import { normalizeRealWiki, wikiLangForConfigUser } from '@/lib/config'
+import { normalizeLang } from '@/lib/config'
 import {
   dashpageRecentChangesUserKey,
   getDashpageRecentChangesCache,
@@ -105,24 +105,19 @@ function loadRealPortfolioFromCache(username: string, wiki: string): void {
 }
 
 export function useDashpageRecentChangesModule() {
-  const { user, realUsername, realWiki, currentUserPageLists } = useConfig()
+  const { user, realUsername, lang, currentUserPageLists } = useConfig()
 
   watch(
-    [user, realUsername, realWiki],
-    ([activeUser, username, wiki]) => {
+    [user, realUsername, lang],
+    ([activeUser, username, activeLang]) => {
       error.value = null
+      const wikiLang = normalizeLang(activeLang)
       if (activeUser === 'real') {
-        loadRealPortfolioFromCache(username, normalizeRealWiki(wiki))
+        loadRealPortfolioFromCache(username, wikiLang)
       } else {
         cachedRealTitles.value = []
       }
-      loadFromModuleCache(
-        dashpageRecentChangesUserKey(
-          activeUser,
-          username,
-          wikiLangForConfigUser(activeUser, wiki),
-        ),
-      )
+      loadFromModuleCache(dashpageRecentChangesUserKey(activeUser, username, wikiLang))
     },
     { immediate: true },
   )
@@ -136,7 +131,7 @@ export function useDashpageRecentChangesModule() {
     loading.value = true
     error.value = null
 
-    const wikiLang = wikiLangForConfigUser(user.value, realWiki.value)
+    const wikiLang = normalizeLang(lang.value)
     const userKey = dashpageRecentChangesUserKey(user.value, realUsername.value, wikiLang)
     const excludeRevIds = items.value.map((item) => item.revId)
     let replaceOnFirstSkeleton = items.value.length > 0
diff --git a/src/prototypes/template-homepage/useDashpageSuggestionModule.ts b/src/prototypes/template-homepage/useDashpageSuggestionModule.ts
index 83d9cb4..e00b147 100644
--- a/src/prototypes/template-homepage/useDashpageSuggestionModule.ts
+++ b/src/prototypes/template-homepage/useDashpageSuggestionModule.ts
@@ -2,7 +2,7 @@ import { computed, ref, watch, type ComputedRef } from 'vue'
 import type { FakeWiki } from 'fakewiki'
 
 import { useConfig } from '@/composables/useConfig'
-import { normalizeRealWiki, wikiLangForConfigUser } from '@/lib/config'
+import { normalizeLang } from '@/lib/config'
 import { shouldShowDashpageLoadPrompt } from '@/lib/dashpageLoadState'
 import { DASHPAGE_SUGGESTION_FEED_PREVIEW_MAX } from '@/lib/dashpageSuggestionFeedConstants'
 import {
@@ -47,7 +47,7 @@ import {
 const DASHPAGE_EXCLUDED_SUGGESTION_TYPES = new Set(['redirect'])
 
 function createSuggestionWiki(lang: string): FakeWiki {
-  return createVeSuggestionsWiki(normalizeRealWiki(lang), 'dashpage-suggestion-mode')
+  return createVeSuggestionsWiki(normalizeLang(lang), 'dashpage-suggestion-mode')
 }
 
 export interface SuggestionQueueItem {
@@ -350,10 +350,10 @@ export function useDashpageSuggestionModule(): {
   onSuggestionNavigate: (delta: number) => void
   onSuggestionOpenFullscreen: () => void
 } {
-  const { user, realUsername, realWiki, currentUserPageLists } = useConfig()
+  const { user, realUsername, lang, currentUserPageLists } = useConfig()
 
   function activeWikiLang(): string {
-    return wikiLangForConfigUser(user.value, realWiki.value)
+    return normalizeLang(lang.value)
   }
 
   function hasRenderableData(): boolean {
@@ -465,12 +465,12 @@ export function useDashpageSuggestionModule(): {
   if (!watchRegistered) {
     watchRegistered = true
     watch(
-      [user, realUsername, realWiki],
-      ([activeUser, username, wiki]) => {
+      [user, realUsername, lang],
+      ([activeUser, username, activeLang]) => {
         error.value = null
         loadRealPortfolioFromCache()
         loadFromModuleCache(
-          dashpageSuggestionUserKey(activeUser, username, wikiLangForConfigUser(activeUser, wiki)),
+          dashpageSuggestionUserKey(activeUser, username, normalizeLang(activeLang)),
         )
       },
       { immediate: true },
diff --git a/src/prototypes/template-homepage/useHomepageImpact.ts b/src/prototypes/template-homepage/useHomepageImpact.ts
index e20aeef..5349661 100644
--- a/src/prototypes/template-homepage/useHomepageImpact.ts
+++ b/src/prototypes/template-homepage/useHomepageImpact.ts
@@ -19,8 +19,8 @@ export function useHomepageImpact(): {
   impactDesktopProps: ComputedRef<ImpactModuleBind>
   onImpactRefresh: () => void
 } {
-  const { user, realUsername, realWiki, setCurrentUserPageList } = useConfig()
-  const realImpact = useRealUserImpact(realUsername, realWiki)
+  const { user, realUsername, realLang, setCurrentUserPageList } = useConfig()
+  const realImpact = useRealUserImpact(realUsername, realLang)
 
   watch(
     [() => user.value, realImpact.editedPageTitles],

From d007ebeaaf52638bfe3dcefb2e96f13b24300818 Mon Sep 17 00:00:00 2001
From: Lu Wilson <lu@todepond.com>
Date: Tue, 26 May 2026 16:32:18 +0200
Subject: [PATCH 21/21] categories

---
 src/lib/fetchArticleCategories.ts             |  98 +++++
 src/lib/fetchCategoryMemberTitles.ts          | 114 ++++++
 src/lib/fetchMicrotaskCategorySuggestions.ts  |  62 ++++
 src/lib/fetchMicrotaskRelatedArticles.ts      |  70 ++++
 src/prototypes/article-categories/index.vue   | 208 +++++++++++
 .../useArticleCategories.ts                   | 350 ++++++++++++++++++
 .../index.vue                                 |   1 +
 src/prototypes/index.vue                      |   2 +
 src/prototypes/template-homepage/index.vue    |   1 +
 .../topic-picker/TopicArticleCard.vue         |  81 ++++
 src/prototypes/topic-picker/index.vue         | 208 +++++++++++
 src/prototypes/topic-picker/useTopicPicker.ts | 337 +++++++++++++++++
 12 files changed, 1532 insertions(+)
 create mode 100644 src/lib/fetchArticleCategories.ts
 create mode 100644 src/lib/fetchCategoryMemberTitles.ts
 create mode 100644 src/lib/fetchMicrotaskCategorySuggestions.ts
 create mode 100644 src/lib/fetchMicrotaskRelatedArticles.ts
 create mode 100644 src/prototypes/article-categories/index.vue
 create mode 100644 src/prototypes/article-categories/useArticleCategories.ts
 create mode 100644 src/prototypes/topic-picker/TopicArticleCard.vue
 create mode 100644 src/prototypes/topic-picker/index.vue
 create mode 100644 src/prototypes/topic-picker/useTopicPicker.ts

diff --git a/src/lib/fetchArticleCategories.ts b/src/lib/fetchArticleCategories.ts
new file mode 100644
index 0000000..6c4093e
--- /dev/null
+++ b/src/lib/fetchArticleCategories.ts
@@ -0,0 +1,98 @@
+import { wikiHostFromLang } from '@/lib/config'
+
+const API_USER_AGENT =
+  'ProtoWiki/0.1 (https://github.com/wikimedia-research/protowiki) article-categories'
+
+export class FetchArticleCategoriesError extends Error {
+  constructor(
+    message: string,
+    public readonly code: 'empty_title' | 'page_not_found' | 'aborted' | 'http',
+  ) {
+    super(message)
+    this.name = 'FetchArticleCategoriesError'
+  }
+}
+
+export interface FetchArticleCategoriesOptions {
+  signal?: AbortSignal
+  /** Wikipedia language code (default `en`). */
+  lang?: string
+}
+
+function assertNotAborted(signal?: AbortSignal): void {
+  if (signal?.aborted) {
+    throw new FetchArticleCategoriesError('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 stripCategoryPrefix(title: string): string {
+  return title.replace(/^Category:/i, '').trim()
+}
+
+/**
+ * Categories assigned to a Wikipedia article (hidden categories excluded).
+ */
+export async function fetchArticleCategories(
+  pageTitle: string,
+  options: FetchArticleCategoriesOptions = {},
+): Promise<string[]> {
+  const trimmed = pageTitle.trim()
+  if (!trimmed.length) {
+    throw new FetchArticleCategoriesError('Enter an article title', 'empty_title')
+  }
+
+  const wikiHost = wikiHostFromLang(options.lang ?? 'en')
+
+  assertNotAborted(options.signal)
+  const response = await fetch(
+    actionUrl(wikiHost, {
+      action: 'query',
+      prop: 'categories',
+      titles: trimmed,
+      cllimit: 'max',
+      clshow: '!hidden',
+    }),
+    {
+      signal: options.signal,
+      headers: { 'Api-User-Agent': API_USER_AGENT },
+    },
+  )
+
+  if (!response.ok) {
+    throw new FetchArticleCategoriesError(`HTTP ${response.status}`, 'http')
+  }
+
+  const data = (await response.json()) as {
+    query?: {
+      pages?: Array<{
+        title?: string
+        missing?: boolean
+        categories?: Array<{ title?: string }>
+      }>
+    }
+    error?: { code?: string; info?: string }
+  }
+
+  const page = data.query?.pages?.[0]
+  if (!page || page.missing) {
+    throw new FetchArticleCategoriesError('Article not found', 'page_not_found')
+  }
+
+  const categories = (page.categories ?? [])
+    .map((category) =>
+      typeof category.title === 'string' ? stripCategoryPrefix(category.title) : '',
+    )
+    .filter(Boolean)
+
+  return [...new Set(categories)].sort((a, b) => a.localeCompare(b))
+}
diff --git a/src/lib/fetchCategoryMemberTitles.ts b/src/lib/fetchCategoryMemberTitles.ts
new file mode 100644
index 0000000..b5dc06d
--- /dev/null
+++ b/src/lib/fetchCategoryMemberTitles.ts
@@ -0,0 +1,114 @@
+import { wikiHostFromLang } from '@/lib/config'
+
+const API_USER_AGENT =
+  'ProtoWiki/0.1 (https://github.com/wikimedia-research/protowiki) article-categories'
+
+const DEFAULT_LIMIT = 10
+
+export class FetchCategoryMemberTitlesError extends Error {
+  constructor(
+    message: string,
+    public readonly code: 'empty_category' | 'aborted' | 'http',
+  ) {
+    super(message)
+    this.name = 'FetchCategoryMemberTitlesError'
+  }
+}
+
+export interface FetchCategoryMemberTitlesOptions {
+  signal?: AbortSignal
+  /** Wikipedia language code (default `en`). */
+  lang?: string
+  /** Max article titles to return (default 10, max 50). */
+  limit?: number
+  /** Exclude this article title from results (case-insensitive). */
+  excludeTitle?: string
+}
+
+function assertNotAborted(signal?: AbortSignal): void {
+  if (signal?.aborted) {
+    throw new FetchCategoryMemberTitlesError('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()
+}
+
+function categoryTitle(category: string): string {
+  const trimmed = category.trim()
+  if (!trimmed.length) return ''
+  return trimmed.startsWith('Category:') ? trimmed : `Category:${trimmed.replace(/ /g, '_')}`
+}
+
+/**
+ * Article titles in a Wikipedia category (namespace 0 only).
+ */
+export async function fetchCategoryMemberTitles(
+  category: string,
+  options: FetchCategoryMemberTitlesOptions = {},
+): Promise<string[]> {
+  const cmtitle = categoryTitle(category)
+  if (!cmtitle.length) {
+    throw new FetchCategoryMemberTitlesError('Category is required', 'empty_category')
+  }
+
+  const wikiHost = wikiHostFromLang(options.lang ?? 'en')
+  const limit = Math.max(1, Math.min(options.limit ?? DEFAULT_LIMIT, 50))
+  const excludeKey = options.excludeTitle?.trim()
+    ? normalizeTitleKey(options.excludeTitle)
+    : null
+
+  assertNotAborted(options.signal)
+  const response = await fetch(
+    actionUrl(wikiHost, {
+      action: 'query',
+      list: 'categorymembers',
+      cmtitle,
+      cmnamespace: '0',
+      cmlimit: String(limit),
+    }),
+    {
+      signal: options.signal,
+      headers: { 'Api-User-Agent': API_USER_AGENT },
+    },
+  )
+
+  if (!response.ok) {
+    throw new FetchCategoryMemberTitlesError(`HTTP ${response.status}`, 'http')
+  }
+
+  const data = (await response.json()) as {
+    query?: {
+      categorymembers?: Array<{ ns?: number; title?: string }>
+    }
+  }
+
+  const titles: string[] = []
+  const seen = new Set<string>()
+
+  for (const member of data.query?.categorymembers ?? []) {
+    if (member.ns !== 0) continue
+    const title = typeof member.title === 'string' ? member.title.trim() : ''
+    if (!title.length) continue
+
+    const key = normalizeTitleKey(title)
+    if (excludeKey && key === excludeKey) continue
+    if (seen.has(key)) continue
+
+    seen.add(key)
+    titles.push(title)
+  }
+
+  return titles
+}
diff --git a/src/lib/fetchMicrotaskCategorySuggestions.ts b/src/lib/fetchMicrotaskCategorySuggestions.ts
new file mode 100644
index 0000000..e1b70e0
--- /dev/null
+++ b/src/lib/fetchMicrotaskCategorySuggestions.ts
@@ -0,0 +1,62 @@
+import { normalizeLang } from '@/lib/config'
+
+const MICROTASK_BASE = 'https://microtask-generator.toolforge.org'
+const USER_AGENT =
+  'ProtoWiki/0.1 (https://github.com/wikimedia-research/protowiki) topic-picker'
+
+export class FetchMicrotaskCategorySuggestionsError extends Error {
+  constructor(
+    message: string,
+    public readonly code: 'empty_query' | 'aborted' | 'http',
+  ) {
+    super(message)
+    this.name = 'FetchMicrotaskCategorySuggestionsError'
+  }
+}
+
+export interface FetchMicrotaskCategorySuggestionsOptions {
+  signal?: AbortSignal
+  /** Wikipedia language code (default `en`). */
+  lang?: string
+}
+
+function assertNotAborted(signal?: AbortSignal): void {
+  if (signal?.aborted) {
+    throw new FetchMicrotaskCategorySuggestionsError('Request aborted', 'aborted')
+  }
+}
+
+type CategorySuggestionsResponse = {
+  results?: string[]
+}
+
+/**
+ * Prefix-match category names from Microtask Generator.
+ * @see wiki-signals/references/inference.md §26
+ */
+export async function fetchMicrotaskCategorySuggestions(
+  query: string,
+  options: FetchMicrotaskCategorySuggestionsOptions = {},
+): Promise<string[]> {
+  const trimmed = query.trim()
+  if (!trimmed.length) {
+    throw new FetchMicrotaskCategorySuggestionsError('Enter a topic', 'empty_query')
+  }
+
+  const lang = normalizeLang(options.lang ?? 'en')
+  const params = new URLSearchParams({ lang, q: trimmed })
+  const url = `${MICROTASK_BASE}/category-suggestions?${params.toString()}`
+
+  assertNotAborted(options.signal)
+  const response = await fetch(url, {
+    signal: options.signal,
+    headers: { 'User-Agent': USER_AGENT },
+  })
+
+  if (!response.ok) {
+    throw new FetchMicrotaskCategorySuggestionsError(`HTTP ${response.status}`, 'http')
+  }
+
+  const data = (await response.json()) as CategorySuggestionsResponse
+  return (data.results ?? []).filter((item): item is string => typeof item === 'string')
+}
diff --git a/src/lib/fetchMicrotaskRelatedArticles.ts b/src/lib/fetchMicrotaskRelatedArticles.ts
new file mode 100644
index 0000000..fc0268c
--- /dev/null
+++ b/src/lib/fetchMicrotaskRelatedArticles.ts
@@ -0,0 +1,70 @@
+import { normalizeLang } from '@/lib/config'
+
+const MICROTASK_BASE = 'https://microtask-generator.toolforge.org'
+const USER_AGENT =
+  'ProtoWiki/0.1 (https://github.com/wikimedia-research/protowiki) topic-picker'
+
+const DEFAULT_LIMIT = 10
+
+export class FetchMicrotaskRelatedArticlesError extends Error {
+  constructor(
+    message: string,
+    public readonly code: 'empty_category' | 'aborted' | 'http',
+  ) {
+    super(message)
+    this.name = 'FetchMicrotaskRelatedArticlesError'
+  }
+}
+
+export interface FetchMicrotaskRelatedArticlesOptions {
+  signal?: AbortSignal
+  /** Wikipedia language code (default `en`). */
+  lang?: string
+  /** Max titles per category (default 10). */
+  limit?: number
+}
+
+function assertNotAborted(signal?: AbortSignal): void {
+  if (signal?.aborted) {
+    throw new FetchMicrotaskRelatedArticlesError('Request aborted', 'aborted')
+  }
+}
+
+type RelatedArticlesResponse = {
+  results?: string[]
+}
+
+/**
+ * Article titles related to a category from Microtask Generator.
+ * @see wiki-signals/references/inference.md §25
+ */
+export async function fetchMicrotaskRelatedArticles(
+  category: string,
+  options: FetchMicrotaskRelatedArticlesOptions = {},
+): Promise<string[]> {
+  const trimmed = category.trim()
+  if (!trimmed.length) {
+    throw new FetchMicrotaskRelatedArticlesError('Category is required', 'empty_category')
+  }
+
+  const lang = normalizeLang(options.lang ?? 'en')
+  const limit = Math.max(1, Math.min(options.limit ?? DEFAULT_LIMIT, 50))
+
+  assertNotAborted(options.signal)
+  const response = await fetch(`${MICROTASK_BASE}/related-articles`, {
+    method: 'POST',
+    signal: options.signal,
+    headers: {
+      'Content-Type': 'application/json',
+      'User-Agent': USER_AGENT,
+    },
+    body: JSON.stringify({ lang, category: trimmed, limit }),
+  })
+
+  if (!response.ok) {
+    throw new FetchMicrotaskRelatedArticlesError(`HTTP ${response.status}`, 'http')
+  }
+
+  const data = (await response.json()) as RelatedArticlesResponse
+  return (data.results ?? []).filter((item): item is string => typeof item === 'string')
+}
diff --git a/src/prototypes/article-categories/index.vue b/src/prototypes/article-categories/index.vue
new file mode 100644
index 0000000..dbfb3f4
--- /dev/null
+++ b/src/prototypes/article-categories/index.vue
@@ -0,0 +1,208 @@
+<script setup lang="ts">
+import {
+  CdxButton,
+  CdxCheckbox,
+  CdxField,
+  CdxMessage,
+  CdxProgressIndicator,
+  CdxTextInput,
+} from '@wikimedia/codex'
+
+import TopicArticleCard from '../topic-picker/TopicArticleCard.vue'
+import { useArticleCategories } from './useArticleCategories'
+
+definePage({
+  meta: {
+    title: 'Article categories',
+    description:
+      'Enter an article to see its Wikipedia categories, then browse other pages in those categories.',
+  },
+})
+
+const {
+  article,
+  categories,
+  selectedCategories,
+  previewsByTitle,
+  loadingCategories,
+  loadingArticles,
+  loadingMore,
+  categoryError,
+  articlesError,
+  hasCategoryResults,
+  hasLoadedArticles,
+  rankedArticleTitles,
+  articlesEmpty,
+  canLoadCategories,
+  canShowArticles,
+  canShowMore,
+  articleUrl,
+  onLoadCategories,
+  onShowArticles,
+  onShowMore,
+  selectAllCategories,
+  clearCategories,
+} = useArticleCategories()
+</script>
+
+<template>
+  <main class="article-categories-page">
+    <h1 class="mw-first-heading">Article categories</h1>
+
+    <div class="article-categories">
+      <section class="article-categories__section">
+        <form class="article-categories__article-form" @submit.prevent="onLoadCategories">
+          <CdxField label="Article">
+            <CdxTextInput
+              v-model="article"
+              autocomplete="off"
+              :disabled="loadingCategories || loadingArticles"
+            />
+          </CdxField>
+          <div class="article-categories__actions">
+            <CdxButton type="submit" action="progressive" :disabled="!canLoadCategories">
+              {{ loadingCategories ? 'Loading categories…' : 'Load categories' }}
+            </CdxButton>
+            <CdxProgressIndicator
+              v-if="loadingCategories"
+              aria-label="Loading categories"
+            />
+          </div>
+        </form>
+        <CdxMessage v-if="categoryError" type="error">
+          {{ categoryError }}
+        </CdxMessage>
+      </section>
+
+      <section v-if="hasCategoryResults" class="article-categories__section">
+        <CdxField>
+          <template #label>Categories ({{ categories.length }})</template>
+          <template #description>Pick the categories you want to explore.</template>
+          <ul class="article-categories__checkbox-list">
+            <li v-for="category in categories" :key="category">
+              <CdxCheckbox v-model="selectedCategories" :input-value="category">
+                {{ category }}
+              </CdxCheckbox>
+            </li>
+          </ul>
+        </CdxField>
+
+        <div class="article-categories__actions">
+          <CdxButton weight="quiet" :disabled="loadingArticles" @click="selectAllCategories">
+            Select all
+          </CdxButton>
+          <CdxButton weight="quiet" :disabled="loadingArticles" @click="clearCategories">
+            Clear
+          </CdxButton>
+          <CdxButton
+            action="progressive"
+            :disabled="!canShowArticles"
+            @click="onShowArticles"
+          >
+            {{ loadingArticles ? 'Loading articles…' : 'Show articles' }}
+          </CdxButton>
+          <CdxProgressIndicator v-if="loadingArticles" aria-label="Loading articles" />
+        </div>
+        <CdxMessage v-if="articlesError" type="error">
+          {{ articlesError }}
+        </CdxMessage>
+      </section>
+
+      <section
+        v-if="hasLoadedArticles"
+        class="article-categories__section"
+        aria-labelledby="article-categories-articles-heading"
+      >
+        <h2 id="article-categories-articles-heading">
+          Other articles
+          <span v-if="rankedArticleTitles.length"> ({{ rankedArticleTitles.length }})</span>
+        </h2>
+
+        <CdxMessage v-if="articlesEmpty" type="notice">
+          No other articles were found in the selected categories.
+        </CdxMessage>
+
+        <ul v-else class="article-categories__card-list">
+          <li v-for="title in rankedArticleTitles" :key="title">
+            <TopicArticleCard
+              :title="title"
+              :href="articleUrl(title)"
+              :thumbnail-src="previewsByTitle[title]?.thumbnailSrc"
+              :short-description="previewsByTitle[title]?.shortDescription"
+            />
+          </li>
+        </ul>
+
+        <div v-if="canShowMore || loadingMore" class="article-categories__show-more">
+          <CdxButton :disabled="loadingMore" @click="onShowMore">
+            {{ loadingMore ? 'Loading more…' : 'Show more' }}
+          </CdxButton>
+          <CdxProgressIndicator v-if="loadingMore" aria-label="Loading more articles" />
+        </div>
+      </section>
+    </div>
+  </main>
+</template>
+
+<style scoped>
+.article-categories-page {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  padding: var(--spacing-250) var(--spacing-150);
+  background-color: var(--background-color-base);
+}
+
+.article-categories {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-200, 32px);
+}
+
+.article-categories__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-100, 16px);
+}
+
+.article-categories__article-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-100, 16px);
+  max-width: 32rem;
+}
+
+.article-categories__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-75, 12px);
+}
+
+.article-categories__checkbox-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-50, 8px);
+}
+
+.article-categories__card-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  gap: var(--spacing-75, 12px);
+  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+}
+
+.article-categories__show-more {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-75, 12px);
+  padding-top: var(--spacing-100, 16px);
+}
+</style>
diff --git a/src/prototypes/article-categories/useArticleCategories.ts b/src/prototypes/article-categories/useArticleCategories.ts
new file mode 100644
index 0000000..6135dfa
--- /dev/null
+++ b/src/prototypes/article-categories/useArticleCategories.ts
@@ -0,0 +1,350 @@
+import { computed, onMounted, ref, watch, type ComputedRef, type Ref } from 'vue'
+
+import { wikiHostFromLang } from '@/lib/config'
+import {
+  FetchArticleCategoriesError,
+  fetchArticleCategories,
+} from '@/lib/fetchArticleCategories'
+import {
+  FetchCategoryMemberTitlesError,
+  fetchCategoryMemberTitles,
+} from '@/lib/fetchCategoryMemberTitles'
+import {
+  fetchPagePreviewMetadataBatch,
+  type PagePreviewMetadata,
+} from '@/lib/fetchUserEditedPageTitles'
+
+const LANG = 'en'
+const INITIAL_LIMIT_PER_CATEGORY = 10
+const LIMIT_INCREMENT = 10
+const MAX_LIMIT_PER_CATEGORY = 50
+
+function wikiArticleUrl(title: string, lang = LANG): string {
+  const slug = encodeURIComponent(title.trim().replace(/ /g, '_'))
+  return `https://${wikiHostFromLang(lang)}/wiki/${slug}`
+}
+
+function normalizeTitleKey(title: string): string {
+  return title.trim().replace(/_/g, ' ').toLowerCase()
+}
+
+/** Dedupe and rank by how many selected categories include each article. */
+function rankArticleTitlesByCategoryMembership(
+  categories: string[],
+  byCategory: Record<string, string[]>,
+): string[] {
+  const membershipCount = new Map<string, number>()
+  const canonicalTitle = new Map<string, string>()
+
+  for (const category of categories) {
+    for (const title of byCategory[category] ?? []) {
+      const key = normalizeTitleKey(title)
+      membershipCount.set(key, (membershipCount.get(key) ?? 0) + 1)
+      if (!canonicalTitle.has(key)) {
+        canonicalTitle.set(key, title)
+      }
+    }
+  }
+
+  return [...membershipCount.entries()]
+    .sort((a, b) => {
+      const countDiff = b[1] - a[1]
+      if (countDiff !== 0) return countDiff
+      const titleA = canonicalTitle.get(a[0]) ?? a[0]
+      const titleB = canonicalTitle.get(b[0]) ?? b[0]
+      return titleA.localeCompare(titleB)
+    })
+    .map(([key]) => canonicalTitle.get(key) ?? key)
+}
+
+function errorMessage(error: unknown): string {
+  if (error instanceof FetchArticleCategoriesError) {
+    if (error.code === 'aborted') return ''
+    return error.message
+  }
+  if (error instanceof FetchCategoryMemberTitlesError) {
+    if (error.code === 'aborted') return ''
+    return error.message
+  }
+  if (error instanceof Error && error.message) return error.message
+  return 'Something went wrong. Try again.'
+}
+
+export function useArticleCategories(): {
+  article: Ref<string>
+  categories: Ref<string[]>
+  selectedCategories: Ref<string[]>
+  previewsByTitle: Ref<Record<string, PagePreviewMetadata>>
+  loadingCategories: Ref<boolean>
+  loadingArticles: Ref<boolean>
+  loadingMore: Ref<boolean>
+  categoryError: Ref<string | null>
+  articlesError: Ref<string | null>
+  hasCategoryResults: ComputedRef<boolean>
+  hasLoadedArticles: Ref<boolean>
+  rankedArticleTitles: ComputedRef<string[]>
+  articlesEmpty: ComputedRef<boolean>
+  canLoadCategories: ComputedRef<boolean>
+  canShowArticles: ComputedRef<boolean>
+  canShowMore: ComputedRef<boolean>
+  articleUrl: (title: string) => string
+  onLoadCategories: () => Promise<void>
+  onShowArticles: () => Promise<void>
+  onShowMore: () => Promise<void>
+  selectAllCategories: () => void
+  clearCategories: () => void
+} {
+  const article = ref('Wet Leg')
+  const categories = ref<string[]>([])
+  const selectedCategories = ref<string[]>([])
+  const articlesByCategory = ref<Record<string, string[]>>({})
+  const previewsByTitle = ref<Record<string, PagePreviewMetadata>>({})
+  const limitPerCategory = ref(INITIAL_LIMIT_PER_CATEGORY)
+  const loadingCategories = ref(false)
+  const loadingArticles = ref(false)
+  const loadingMore = ref(false)
+  const categoryError = ref<string | null>(null)
+  const articlesError = ref<string | null>(null)
+  const hasLoadedArticles = ref(false)
+
+  let categoryAbort: AbortController | null = null
+  let articlesAbort: AbortController | null = null
+
+  const hasCategoryResults = computed(() => categories.value.length > 0)
+
+  const rankedArticleTitles = computed(() =>
+    rankArticleTitlesByCategoryMembership(
+      selectedCategories.value,
+      articlesByCategory.value,
+    ),
+  )
+
+  const articlesEmpty = computed(
+    () => hasLoadedArticles.value && rankedArticleTitles.value.length === 0,
+  )
+
+  const canLoadCategories = computed(
+    () =>
+      article.value.trim().length > 0 &&
+      !loadingCategories.value &&
+      !loadingArticles.value,
+  )
+
+  const canShowArticles = computed(
+    () =>
+      selectedCategories.value.length > 0 &&
+      !loadingCategories.value &&
+      !loadingArticles.value &&
+      !loadingMore.value,
+  )
+
+  const canShowMore = computed(() => {
+    if (!hasLoadedArticles.value || articlesEmpty.value) return false
+    if (loadingArticles.value || loadingMore.value) return false
+    if (limitPerCategory.value >= MAX_LIMIT_PER_CATEGORY) return false
+
+    return selectedCategories.value.some((category) => {
+      const titles = articlesByCategory.value[category] ?? []
+      return titles.length >= limitPerCategory.value
+    })
+  })
+
+  function resetArticleResults(): void {
+    articlesByCategory.value = {}
+    previewsByTitle.value = {}
+    limitPerCategory.value = INITIAL_LIMIT_PER_CATEGORY
+    hasLoadedArticles.value = false
+    articlesError.value = null
+  }
+
+  function resetCategoryResults(): void {
+    categories.value = []
+    selectedCategories.value = []
+    resetArticleResults()
+    categoryError.value = null
+  }
+
+  watch(article, () => {
+    resetCategoryResults()
+  })
+
+  async function fetchArticlesForCategories(
+    categoryList: string[],
+    limit: number,
+    signal: AbortSignal,
+    resetPreviews: boolean,
+  ): Promise<void> {
+    const sourceTitle = article.value.trim()
+
+    const pairs = await Promise.all(
+      categoryList.map(async (category) => {
+        const titles = await fetchCategoryMemberTitles(category, {
+          lang: LANG,
+          limit,
+          excludeTitle: sourceTitle,
+          signal,
+        })
+        return [category, titles] as const
+      }),
+    )
+
+    const byCategory: Record<string, string[]> = {}
+    const uniqueTitles = new Set<string>()
+
+    for (const [category, titles] of pairs) {
+      byCategory[category] = titles
+      for (const title of titles) {
+        uniqueTitles.add(title)
+      }
+    }
+
+    articlesByCategory.value = byCategory
+
+    const titlesToPreview = resetPreviews
+      ? [...uniqueTitles]
+      : [...uniqueTitles].filter((title) => !previewsByTitle.value[title])
+
+    if (titlesToPreview.length) {
+      const batch = await fetchPagePreviewMetadataBatch(titlesToPreview, {
+        lang: LANG,
+        signal,
+      })
+      previewsByTitle.value = resetPreviews ? batch : { ...previewsByTitle.value, ...batch }
+    } else if (resetPreviews) {
+      previewsByTitle.value = {}
+    }
+
+    hasLoadedArticles.value = true
+  }
+
+  async function onLoadCategories(): Promise<void> {
+    const title = article.value.trim()
+    if (!title.length || loadingCategories.value) return
+
+    categoryAbort?.abort()
+    articlesAbort?.abort()
+
+    const controller = new AbortController()
+    categoryAbort = controller
+
+    loadingCategories.value = true
+    categoryError.value = null
+    resetCategoryResults()
+
+    try {
+      const results = await fetchArticleCategories(title, {
+        lang: LANG,
+        signal: controller.signal,
+      })
+      categories.value = results
+      selectedCategories.value = [...results]
+    } catch (error) {
+      if (controller.signal.aborted) return
+      categoryError.value = errorMessage(error) || 'Could not load categories.'
+    } finally {
+      if (categoryAbort === controller) {
+        loadingCategories.value = false
+      }
+    }
+  }
+
+  async function onShowArticles(): Promise<void> {
+    const categoryList = [...selectedCategories.value]
+    if (!categoryList.length || loadingArticles.value || loadingMore.value) return
+
+    articlesAbort?.abort()
+    const controller = new AbortController()
+    articlesAbort = controller
+
+    loadingArticles.value = true
+    articlesError.value = null
+    limitPerCategory.value = INITIAL_LIMIT_PER_CATEGORY
+
+    try {
+      await fetchArticlesForCategories(
+        categoryList,
+        limitPerCategory.value,
+        controller.signal,
+        true,
+      )
+    } catch (error) {
+      if (controller.signal.aborted) return
+      articlesError.value = errorMessage(error) || 'Could not load articles.'
+      hasLoadedArticles.value = false
+    } finally {
+      if (articlesAbort === controller) {
+        loadingArticles.value = false
+      }
+    }
+  }
+
+  async function onShowMore(): Promise<void> {
+    const categoryList = [...selectedCategories.value]
+    if (!categoryList.length || !canShowMore.value) return
+
+    articlesAbort?.abort()
+    const controller = new AbortController()
+    articlesAbort = controller
+
+    const previousCount = rankedArticleTitles.value.length
+    const previousLimit = limitPerCategory.value
+    const nextLimit = Math.min(previousLimit + LIMIT_INCREMENT, MAX_LIMIT_PER_CATEGORY)
+
+    loadingMore.value = true
+    articlesError.value = null
+    limitPerCategory.value = nextLimit
+
+    try {
+      await fetchArticlesForCategories(categoryList, nextLimit, controller.signal, false)
+      if (rankedArticleTitles.value.length === previousCount) {
+        limitPerCategory.value = MAX_LIMIT_PER_CATEGORY
+      }
+    } catch (error) {
+      if (controller.signal.aborted) return
+      articlesError.value = errorMessage(error) || 'Could not load more articles.'
+      limitPerCategory.value = previousLimit
+    } finally {
+      if (articlesAbort === controller) {
+        loadingMore.value = false
+      }
+    }
+  }
+
+  function selectAllCategories(): void {
+    selectedCategories.value = [...categories.value]
+  }
+
+  function clearCategories(): void {
+    selectedCategories.value = []
+    resetArticleResults()
+  }
+
+  onMounted(() => {
+    void onLoadCategories()
+  })
+
+  return {
+    article,
+    categories,
+    selectedCategories,
+    previewsByTitle,
+    loadingCategories,
+    loadingArticles,
+    loadingMore,
+    categoryError,
+    articlesError,
+    hasCategoryResults,
+    hasLoadedArticles,
+    rankedArticleTitles,
+    articlesEmpty,
+    canLoadCategories,
+    canShowArticles,
+    canShowMore,
+    articleUrl: wikiArticleUrl,
+    onLoadCategories,
+    onShowArticles,
+    onShowMore,
+    selectAllCategories,
+    clearCategories,
+  }
+}
diff --git a/src/prototypes/example-ve-suggestions-playground/index.vue b/src/prototypes/example-ve-suggestions-playground/index.vue
index e1b85b6..33aea28 100644
--- a/src/prototypes/example-ve-suggestions-playground/index.vue
+++ b/src/prototypes/example-ve-suggestions-playground/index.vue
@@ -16,6 +16,7 @@ definePage({
   meta: {
     title: 'Edit suggestions',
     description: 'Get edit suggestions for any page',
+    hideFromGallery: true,
   },
 })
 
diff --git a/src/prototypes/index.vue b/src/prototypes/index.vue
index 5826e16..338d63a 100644
--- a/src/prototypes/index.vue
+++ b/src/prototypes/index.vue
@@ -20,6 +20,7 @@ const router = useRouter()
 interface PrototypeMeta {
   title?: string
   description?: string
+  hideFromGallery?: boolean
 }
 
 interface PrototypeEntry {
@@ -62,6 +63,7 @@ const prototypes = computed<PrototypeEntry[]>(() => {
     .getRoutes()
     .filter((route) => route.path !== '/' && route.path !== '/:catchAll(.*)')
     .filter((route) => isTopLevelPrototypePath(route.path))
+    .filter((route) => !(route.meta as PrototypeMeta).hideFromGallery)
     .map((route) => {
       const meta = (route.meta ?? {}) as PrototypeMeta
       const description =
diff --git a/src/prototypes/template-homepage/index.vue b/src/prototypes/template-homepage/index.vue
index d48da4c..db588c2 100644
--- a/src/prototypes/template-homepage/index.vue
+++ b/src/prototypes/template-homepage/index.vue
@@ -72,6 +72,7 @@ definePage({
   meta: {
     title: 'Dashpage',
     description: 'Explorations for a homepage + dashboard hybrid.',
+    hideFromGallery: true,
   },
 })
 </script>
diff --git a/src/prototypes/topic-picker/TopicArticleCard.vue b/src/prototypes/topic-picker/TopicArticleCard.vue
new file mode 100644
index 0000000..1cb2fda
--- /dev/null
+++ b/src/prototypes/topic-picker/TopicArticleCard.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+const props = defineProps<{
+  title: string
+  href: string
+  thumbnailSrc?: string
+  shortDescription?: string
+}>()
+</script>
+
+<template>
+  <a
+    class="topic-article-card"
+    :href="props.href"
+    target="_blank"
+    rel="noopener noreferrer"
+    :aria-label="`Open ${props.title} on Wikipedia`"
+  >
+    <div v-if="props.thumbnailSrc" class="topic-article-card__thumb">
+      <img
+        class="topic-article-card__thumb-image"
+        :src="props.thumbnailSrc"
+        alt=""
+        width="70"
+        height="70"
+        loading="lazy"
+      />
+    </div>
+    <div class="topic-article-card__content">
+      <h4 class="topic-article-card__title">{{ props.title }}</h4>
+      <p v-if="props.shortDescription" class="topic-article-card__description">
+        {{ props.shortDescription }}
+      </p>
+    </div>
+  </a>
+</template>
+
+<style scoped>
+.topic-article-card {
+  display: flex;
+  gap: var(--spacing-75, 12px);
+  padding: var(--spacing-75, 12px);
+  border: var(--border-width-base, 1px) solid var(--border-color-subtle, #c8ccd1);
+  border-radius: var(--border-radius-base, 2px);
+  background-color: var(--background-color-base, #fff);
+  color: inherit;
+  text-decoration: none;
+}
+
+.topic-article-card:hover {
+  background-color: var(--background-color-interactive-subtle, #f8f9fa);
+}
+
+.topic-article-card__thumb {
+  flex-shrink: 0;
+  width: 70px;
+  height: 70px;
+  overflow: hidden;
+  border-radius: var(--border-radius-base, 2px);
+  background-color: var(--background-color-neutral-subtle, #eaecf0);
+}
+
+.topic-article-card__thumb-image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.topic-article-card__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-25, 4px);
+  min-width: 0;
+}
+
+.topic-article-card__title,
+.topic-article-card__description {
+  margin: 0;
+}
+
+</style>
diff --git a/src/prototypes/topic-picker/index.vue b/src/prototypes/topic-picker/index.vue
new file mode 100644
index 0000000..3eac73d
--- /dev/null
+++ b/src/prototypes/topic-picker/index.vue
@@ -0,0 +1,208 @@
+<script setup lang="ts">
+import {
+  CdxButton,
+  CdxCheckbox,
+  CdxField,
+  CdxMessage,
+  CdxProgressIndicator,
+  CdxTextInput,
+} from '@wikimedia/codex'
+
+import TopicArticleCard from './TopicArticleCard.vue'
+import { useTopicPicker } from './useTopicPicker'
+
+definePage({
+  meta: {
+    title: 'Topic picker',
+    description:
+      'Type a topic, pick subtopics from Microtask Generator, browse related articles.',
+  },
+})
+
+const {
+  topic,
+  categorySuggestions,
+  selectedCategories,
+  previewsByTitle,
+  loadingCategories,
+  loadingArticles,
+  loadingMore,
+  categoryError,
+  articlesError,
+  hasCategoryResults,
+  hasLoadedArticles,
+  mixedArticleTitles,
+  articlesEmpty,
+  canFindSubtopics,
+  canShowArticles,
+  canShowMore,
+  articleUrl,
+  onFindSubtopics,
+  onShowArticles,
+  onShowMore,
+  selectAllCategories,
+  clearCategories,
+} = useTopicPicker()
+</script>
+
+<template>
+  <main class="topic-picker-page">
+    <h1 class="mw-first-heading">Topic picker</h1>
+
+    <div class="topic-picker">
+      <section class="topic-picker__section">
+        <form class="topic-picker__topic-form" @submit.prevent="onFindSubtopics">
+          <CdxField label="Topic">
+            <CdxTextInput
+              v-model="topic"
+              autocomplete="off"
+              :disabled="loadingCategories || loadingArticles"
+            />
+          </CdxField>
+          <div class="topic-picker__actions">
+            <CdxButton type="submit" action="progressive" :disabled="!canFindSubtopics">
+              {{ loadingCategories ? 'Finding subtopics…' : 'Find subtopics' }}
+            </CdxButton>
+            <CdxProgressIndicator
+              v-if="loadingCategories"
+              aria-label="Loading subtopic suggestions"
+            />
+          </div>
+        </form>
+        <CdxMessage v-if="categoryError" type="error">
+          {{ categoryError }}
+        </CdxMessage>
+      </section>
+
+      <section v-if="hasCategoryResults" class="topic-picker__section">
+        <CdxField>
+          <template #label>Subtopics ({{ categorySuggestions.length }})</template>
+          <template #description>Pick the subtopics you want.</template>
+          <ul class="topic-picker__checkbox-list">
+            <li v-for="category in categorySuggestions" :key="category">
+              <CdxCheckbox v-model="selectedCategories" :input-value="category">
+                {{ category }}
+              </CdxCheckbox>
+            </li>
+          </ul>
+        </CdxField>
+
+        <div class="topic-picker__actions">
+          <CdxButton weight="quiet" :disabled="loadingArticles" @click="selectAllCategories">
+            Select all
+          </CdxButton>
+          <CdxButton weight="quiet" :disabled="loadingArticles" @click="clearCategories">
+            Clear
+          </CdxButton>
+          <CdxButton
+            action="progressive"
+            :disabled="!canShowArticles"
+            @click="onShowArticles"
+          >
+            {{ loadingArticles ? 'Loading articles…' : 'Show articles' }}
+          </CdxButton>
+          <CdxProgressIndicator v-if="loadingArticles" aria-label="Loading articles" />
+        </div>
+        <CdxMessage v-if="articlesError" type="error">
+          {{ articlesError }}
+        </CdxMessage>
+      </section>
+
+      <section
+        v-if="hasLoadedArticles"
+        class="topic-picker__section"
+        aria-labelledby="topic-picker-articles-heading"
+      >
+        <h2 id="topic-picker-articles-heading">
+          Articles
+          <span v-if="mixedArticleTitles.length"> ({{ mixedArticleTitles.length }})</span>
+        </h2>
+
+        <CdxMessage v-if="articlesEmpty" type="notice">
+          No articles were found for the selected subtopics.
+        </CdxMessage>
+
+        <ul v-else class="topic-picker__card-list">
+          <li v-for="title in mixedArticleTitles" :key="title">
+            <TopicArticleCard
+              :title="title"
+              :href="articleUrl(title)"
+              :thumbnail-src="previewsByTitle[title]?.thumbnailSrc"
+              :short-description="previewsByTitle[title]?.shortDescription"
+            />
+          </li>
+        </ul>
+
+        <div v-if="canShowMore || loadingMore" class="topic-picker__show-more">
+          <CdxButton :disabled="loadingMore" @click="onShowMore">
+            {{ loadingMore ? 'Loading more…' : 'Show more' }}
+          </CdxButton>
+          <CdxProgressIndicator v-if="loadingMore" aria-label="Loading more articles" />
+        </div>
+      </section>
+    </div>
+  </main>
+</template>
+
+<style scoped>
+.topic-picker-page {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  padding: var(--spacing-250) var(--spacing-150);
+  background-color: var(--background-color-base);
+}
+
+.topic-picker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-200, 32px);
+}
+
+.topic-picker__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-100, 16px);
+}
+
+.topic-picker__topic-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-100, 16px);
+  max-width: 32rem;
+}
+
+.topic-picker__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-75, 12px);
+}
+
+.topic-picker__checkbox-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-50, 8px);
+}
+
+.topic-picker__card-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  gap: var(--spacing-75, 12px);
+  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+}
+
+.topic-picker__show-more {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-75, 12px);
+  padding-top: var(--spacing-100, 16px);
+}
+</style>
diff --git a/src/prototypes/topic-picker/useTopicPicker.ts b/src/prototypes/topic-picker/useTopicPicker.ts
new file mode 100644
index 0000000..f7e588a
--- /dev/null
+++ b/src/prototypes/topic-picker/useTopicPicker.ts
@@ -0,0 +1,337 @@
+import { computed, ref, watch, type ComputedRef, type Ref } from 'vue'
+
+import { wikiHostFromLang } from '@/lib/config'
+import {
+  fetchPagePreviewMetadataBatch,
+  type PagePreviewMetadata,
+} from '@/lib/fetchUserEditedPageTitles'
+import {
+  FetchMicrotaskCategorySuggestionsError,
+  fetchMicrotaskCategorySuggestions,
+} from '@/lib/fetchMicrotaskCategorySuggestions'
+import {
+  FetchMicrotaskRelatedArticlesError,
+  fetchMicrotaskRelatedArticles,
+} from '@/lib/fetchMicrotaskRelatedArticles'
+
+const LANG = 'en'
+const INITIAL_LIMIT_PER_CATEGORY = 10
+const LIMIT_INCREMENT = 10
+const MAX_LIMIT_PER_CATEGORY = 50
+
+function wikiArticleUrl(title: string, lang = LANG): string {
+  const slug = encodeURIComponent(title.trim().replace(/ /g, '_'))
+  return `https://${wikiHostFromLang(lang)}/wiki/${slug}`
+}
+
+function normalizeTitleKey(title: string): string {
+  return title.trim().replace(/_/g, ' ').toLowerCase()
+}
+
+/** Round-robin merge of category lists with deduplication. */
+function mixArticleTitles(
+  categories: string[],
+  byCategory: Record<string, string[]>,
+): string[] {
+  const lists = categories.map((category) => byCategory[category] ?? [])
+  const mixed: string[] = []
+  const seen = new Set<string>()
+  let index = 0
+  let hasMore = true
+
+  while (hasMore) {
+    hasMore = false
+    for (const list of lists) {
+      if (index >= list.length) continue
+      hasMore = true
+      const title = list[index]
+      const key = normalizeTitleKey(title)
+      if (!seen.has(key)) {
+        seen.add(key)
+        mixed.push(title)
+      }
+    }
+    index += 1
+  }
+
+  return mixed
+}
+
+function errorMessage(error: unknown): string {
+  if (error instanceof FetchMicrotaskCategorySuggestionsError) {
+    if (error.code === 'aborted') return ''
+    return error.message
+  }
+  if (error instanceof FetchMicrotaskRelatedArticlesError) {
+    if (error.code === 'aborted') return ''
+    return error.message
+  }
+  if (error instanceof Error && error.message) return error.message
+  return 'Something went wrong. Try again.'
+}
+
+export function useTopicPicker(): {
+  topic: Ref<string>
+  categorySuggestions: Ref<string[]>
+  selectedCategories: Ref<string[]>
+  previewsByTitle: Ref<Record<string, PagePreviewMetadata>>
+  loadingCategories: Ref<boolean>
+  loadingArticles: Ref<boolean>
+  loadingMore: Ref<boolean>
+  categoryError: Ref<string | null>
+  articlesError: Ref<string | null>
+  hasCategoryResults: ComputedRef<boolean>
+  hasLoadedArticles: Ref<boolean>
+  mixedArticleTitles: ComputedRef<string[]>
+  articlesEmpty: ComputedRef<boolean>
+  canFindSubtopics: ComputedRef<boolean>
+  canShowArticles: ComputedRef<boolean>
+  canShowMore: ComputedRef<boolean>
+  articleUrl: (title: string) => string
+  onFindSubtopics: () => Promise<void>
+  onShowArticles: () => Promise<void>
+  onShowMore: () => Promise<void>
+  selectAllCategories: () => void
+  clearCategories: () => void
+} {
+  const topic = ref('cats')
+  const categorySuggestions = ref<string[]>([])
+  const selectedCategories = ref<string[]>([])
+  const articlesByCategory = ref<Record<string, string[]>>({})
+  const previewsByTitle = ref<Record<string, PagePreviewMetadata>>({})
+  const limitPerCategory = ref(INITIAL_LIMIT_PER_CATEGORY)
+  const loadingCategories = ref(false)
+  const loadingArticles = ref(false)
+  const loadingMore = ref(false)
+  const categoryError = ref<string | null>(null)
+  const articlesError = ref<string | null>(null)
+  const hasLoadedArticles = ref(false)
+
+  let categoryAbort: AbortController | null = null
+  let articlesAbort: AbortController | null = null
+
+  const hasCategoryResults = computed(() => categorySuggestions.value.length > 0)
+
+  const mixedArticleTitles = computed(() =>
+    mixArticleTitles(selectedCategories.value, articlesByCategory.value),
+  )
+
+  const articlesEmpty = computed(
+    () => hasLoadedArticles.value && mixedArticleTitles.value.length === 0,
+  )
+
+  const canFindSubtopics = computed(
+    () => topic.value.trim().length > 0 && !loadingCategories.value && !loadingArticles.value,
+  )
+
+  const canShowArticles = computed(
+    () =>
+      selectedCategories.value.length > 0 &&
+      !loadingCategories.value &&
+      !loadingArticles.value &&
+      !loadingMore.value,
+  )
+
+  const canShowMore = computed(() => {
+    if (!hasLoadedArticles.value || articlesEmpty.value) return false
+    if (loadingArticles.value || loadingMore.value) return false
+    if (limitPerCategory.value >= MAX_LIMIT_PER_CATEGORY) return false
+
+    return selectedCategories.value.some((category) => {
+      const titles = articlesByCategory.value[category] ?? []
+      return titles.length >= limitPerCategory.value
+    })
+  })
+
+  function resetArticleResults(): void {
+    articlesByCategory.value = {}
+    previewsByTitle.value = {}
+    limitPerCategory.value = INITIAL_LIMIT_PER_CATEGORY
+    hasLoadedArticles.value = false
+    articlesError.value = null
+  }
+
+  function resetSubtopicResults(): void {
+    categorySuggestions.value = []
+    selectedCategories.value = []
+    resetArticleResults()
+    categoryError.value = null
+  }
+
+  watch(topic, () => {
+    resetSubtopicResults()
+  })
+
+  async function fetchArticlesForCategories(
+    categories: string[],
+    limit: number,
+    signal: AbortSignal,
+    resetPreviews: boolean,
+  ): Promise<void> {
+    const pairs = await Promise.all(
+      categories.map(async (category) => {
+        const titles = await fetchMicrotaskRelatedArticles(category, {
+          lang: LANG,
+          limit,
+          signal,
+        })
+        return [category, titles] as const
+      }),
+    )
+
+    const byCategory: Record<string, string[]> = {}
+    const uniqueTitles = new Set<string>()
+
+    for (const [category, titles] of pairs) {
+      byCategory[category] = titles
+      for (const title of titles) {
+        uniqueTitles.add(title)
+      }
+    }
+
+    articlesByCategory.value = byCategory
+
+    const titlesToPreview = resetPreviews
+      ? [...uniqueTitles]
+      : [...uniqueTitles].filter((title) => !previewsByTitle.value[title])
+
+    if (titlesToPreview.length) {
+      const batch = await fetchPagePreviewMetadataBatch(titlesToPreview, {
+        lang: LANG,
+        signal,
+      })
+      previewsByTitle.value = resetPreviews ? batch : { ...previewsByTitle.value, ...batch }
+    } else if (resetPreviews) {
+      previewsByTitle.value = {}
+    }
+
+    hasLoadedArticles.value = true
+  }
+
+  async function onFindSubtopics(): Promise<void> {
+    const query = topic.value.trim()
+    if (!query.length || loadingCategories.value) return
+
+    categoryAbort?.abort()
+    articlesAbort?.abort()
+
+    const controller = new AbortController()
+    categoryAbort = controller
+
+    loadingCategories.value = true
+    categoryError.value = null
+    resetSubtopicResults()
+
+    try {
+      const results = await fetchMicrotaskCategorySuggestions(query, {
+        lang: LANG,
+        signal: controller.signal,
+      })
+      categorySuggestions.value = results
+      selectedCategories.value = results.length ? [results[0]] : []
+    } catch (error) {
+      if (controller.signal.aborted) return
+      categoryError.value = errorMessage(error) || 'Could not load subtopics.'
+    } finally {
+      if (categoryAbort === controller) {
+        loadingCategories.value = false
+      }
+    }
+  }
+
+  async function onShowArticles(): Promise<void> {
+    const categories = [...selectedCategories.value]
+    if (!categories.length || loadingArticles.value || loadingMore.value) return
+
+    articlesAbort?.abort()
+    const controller = new AbortController()
+    articlesAbort = controller
+
+    loadingArticles.value = true
+    articlesError.value = null
+    limitPerCategory.value = INITIAL_LIMIT_PER_CATEGORY
+
+    try {
+      await fetchArticlesForCategories(
+        categories,
+        limitPerCategory.value,
+        controller.signal,
+        true,
+      )
+    } catch (error) {
+      if (controller.signal.aborted) return
+      articlesError.value = errorMessage(error) || 'Could not load articles.'
+      hasLoadedArticles.value = false
+    } finally {
+      if (articlesAbort === controller) {
+        loadingArticles.value = false
+      }
+    }
+  }
+
+  async function onShowMore(): Promise<void> {
+    const categories = [...selectedCategories.value]
+    if (!categories.length || !canShowMore.value) return
+
+    articlesAbort?.abort()
+    const controller = new AbortController()
+    articlesAbort = controller
+
+    const previousCount = mixedArticleTitles.value.length
+    const previousLimit = limitPerCategory.value
+    const nextLimit = Math.min(previousLimit + LIMIT_INCREMENT, MAX_LIMIT_PER_CATEGORY)
+
+    loadingMore.value = true
+    articlesError.value = null
+    limitPerCategory.value = nextLimit
+
+    try {
+      await fetchArticlesForCategories(categories, nextLimit, controller.signal, false)
+      if (mixedArticleTitles.value.length === previousCount) {
+        limitPerCategory.value = MAX_LIMIT_PER_CATEGORY
+      }
+    } catch (error) {
+      if (controller.signal.aborted) return
+      articlesError.value = errorMessage(error) || 'Could not load more articles.'
+      limitPerCategory.value = previousLimit
+    } finally {
+      if (articlesAbort === controller) {
+        loadingMore.value = false
+      }
+    }
+  }
+
+  function selectAllCategories(): void {
+    selectedCategories.value = [...categorySuggestions.value]
+  }
+
+  function clearCategories(): void {
+    selectedCategories.value = []
+    resetArticleResults()
+  }
+
+  return {
+    topic,
+    categorySuggestions,
+    selectedCategories,
+    previewsByTitle,
+    loadingCategories,
+    loadingArticles,
+    loadingMore,
+    categoryError,
+    articlesError,
+    hasCategoryResults,
+    hasLoadedArticles,
+    mixedArticleTitles,
+    articlesEmpty,
+    canFindSubtopics,
+    canShowArticles,
+    canShowMore,
+    articleUrl: wikiArticleUrl,
+    onFindSubtopics,
+    onShowArticles,
+    onShowMore,
+    selectAllCategories,
+    clearCategories,
+  }
+}