diff --git a/server/permissions.ts b/server/permissions.ts
new file mode 100644
index 0000000..42c30b3
--- /dev/null
+++ b/server/permissions.ts
@@ -0,0 +1,62 @@
+const UA =
+  'Wikinewsie/1.0 (https://wikinewsie.toolforge.org; habs@toolforge.org)';
+const CACHE_TTL = 5 * 60 * 1000;
+
+const cache = new Map<string, { result: boolean; ts: number }>();
+
+async function checkAutoConfirmed(
+  username: string,
+  lang: string,
+): Promise<boolean> {
+  const key = `${username}:${lang}`;
+  const cached = cache.get(key);
+  if (cached && Date.now() - cached.ts < CACHE_TTL) {
+    return cached.result;
+  }
+
+  try {
+    const params = new URLSearchParams({
+      action: 'query',
+      list: 'users',
+      ususers: username,
+      usprop: 'groups',
+      format: 'json',
+    });
+    const res = await fetch(
+      `https://${lang}.wikipedia.org/w/api.php?${params}`,
+      { headers: { 'User-Agent': UA } },
+    );
+    if (!res.ok) return false;
+    const data = (await res.json()) as {
+      query?: {
+        users?: Array<{
+          groups?: string[];
+          missing?: boolean;
+        }>;
+      };
+    };
+    const user = data.query?.users?.[0];
+    if (!user || user.missing) {
+      cache.set(key, { result: false, ts: Date.now() });
+      return false;
+    }
+    const result = user.groups?.includes('autoconfirmed') ?? false;
+    cache.set(key, { result, ts: Date.now() });
+    return result;
+  } catch {
+    return false;
+  }
+}
+
+export async function isAutoConfirmedOnEnwikiOrTarget(
+  username: string,
+  lang: string,
+): Promise<boolean> {
+  const wikis = lang === 'en' ? ['en'] : [lang, 'en'];
+  for (const wiki of wikis) {
+    if (await checkAutoConfirmed(username, wiki)) {
+      return true;
+    }
+  }
+  return false;
+}
diff --git a/server/routes.ts b/server/routes.ts
index 2677e78..fa8206f 100644
--- a/server/routes.ts
+++ b/server/routes.ts
@@ -1,419 +1,440 @@
 import { Router } from 'express';
 import { getPool, getTopEditedArticles, getRecentEdits, getQidForTitle } from './db.js';
 import { enrichItems } from './enrich.js';
 import { getYearlyPageSet, getCategoryForLang } from './petscan.js';
+import { isAutoConfirmedOnEnwikiOrTarget } from './permissions.js';
 import { getLoginUrl, handleCallback, requireAuth, isOAuthConfigured } from './oauth.js';
 import {
   addHeadline,
   editHeadline,
   deleteHeadline,
   getHeadlines,
   getArticleImage,
   getArticleImages,
   setArticleImage,
   deleteArticleImage,
   getArticleEvent,
   setArticleEvent,
   deleteArticleEvent,
 } from './toolsdb.js';
 import { searchCommons, validateCommonsImage } from './commons.js';
 import {
   searchEntities,
   validateEventType,
 } from './wikidata.js';
 
 const router = Router();
 
 const LANG_RE = /^[a-z]{2,10}(?:-[a-z0-9]+)*$/;
 
 // For all irregular names
 const LANG_DBNAME_OVERRIDES: Record<string, string> = {
   'be-tarask': 'be_x_old',
 };
 
 function wikiFromLang(lang: string): string | null {
   if (!LANG_RE.test(lang)) return null;
   return `${LANG_DBNAME_OVERRIDES[lang] ?? lang.replace(/-/g, '_')}wiki`;
 }
 
 function clampInt(raw: unknown, def: number, min: number, max: number): number {
   const n = Number.parseInt(String(raw ?? ''), 10);
   if (Number.isNaN(n)) return def;
   return Math.min(Math.max(n, min), max);
 }
 
 function parseBool(raw: unknown, def: boolean): boolean {
   if (raw === undefined) return def;
   return raw === 'true' || raw === '1';
 }
 
 router.get('/api/:wiki/top-edits', async (req, res) => {
   const lang = req.params.wiki;
   const wiki = wikiFromLang(lang);
   if (!wiki) return res.status(400).json({ error: 'Invalid wiki' });
 
   const hours = clampInt(req.query.hours, 3, 1, 24);
   const namespace = clampInt(req.query.namespace, 0, 0, 5000);
   const limit = clampInt(req.query.limit, 20, 1, 100);
   const timely = parseBool(req.query.timely, true);
   const byEditors = parseBool(req.query.byEditors, true);
   const sortBy = byEditors ? 'editors' : 'edits';
 
   if (!getPool(wiki)) {
     return res
       .status(503)
       .json({ error: 'Replica database not configured on this host' });
   }
 
   try {
     const dbLimit = timely ? Math.max(limit * 5, 100) : limit;
     const rows = await getTopEditedArticles(wiki, hours, namespace, dbLimit, sortBy);
 
     let filtered = rows;
     if (timely) {
       const year = new Date().getUTCFullYear();
       const pageSet = await getYearlyPageSet(year, lang);
       if (pageSet) {
         filtered = rows.filter((r) => pageSet.has(r.title));
       }
       filtered = filtered.slice(0, limit);
     }
 
     const items = await enrichItems(filtered, `${lang}.wikipedia.org`);
 
     const qids = items.map((i) => i.qid).filter(Boolean) as string[];
     if (qids.length > 0) {
       const manualImages = await getArticleImages(qids);
       for (const item of items) {
         if (!item.image && item.qid && manualImages.has(item.qid)) {
           item.image = manualImages.get(item.qid)!.imageUrl;
         }
       }
     }
 
     res.json({
       generatedAt: new Date().toISOString(),
       project: `${lang}.wikipedia.org`,
       wiki: lang,
       hours,
       namespace,
       timely,
       byEditors,
       category: getCategoryForLang(lang),
       count: items.length,
       items,
     });
   } catch (e) {
     console.error('top-edits error:', e);
     res.status(500).json({ error: 'Query failed' });
   }
 });
 
 router.get('/api/:wiki/recent-edits/:title', async (req, res) => {
   const lang = req.params.wiki;
   const wiki = wikiFromLang(lang);
   if (!wiki) return res.status(400).json({ error: 'Invalid wiki' });
 
   const title = decodeURIComponent(req.params.title);
   const hours = clampInt(req.query.hours, 24, 1, 168);
 
   if (!getPool(wiki)) {
     return res
       .status(503)
       .json({ error: 'Replica database not configured on this host' });
   }
 
   try {
     const edits = await getRecentEdits(wiki, title, hours);
     res.json({
       title,
       hours,
       count: edits.length,
       edits,
     });
   } catch (e) {
     console.error('recent-edits error:', e);
     res.status(500).json({ error: 'Query failed' });
   }
 });
 
 /* ----- Auth routes ----- */
 
 router.get('/api/auth/login', (req, res) => {
   if (!isOAuthConfigured()) {
     return res.status(503).json({ error: 'OAuth not configured' });
   }
   const raw = typeof req.query.returnTo === 'string' ? req.query.returnTo : '/';
   req.session.returnTo = raw.startsWith('/') && !raw.startsWith('//') ? raw : '/';
   res.redirect(getLoginUrl(req));
 });
 
 router.get('/callback', async (req, res) => {
   console.log('OAuth callback:', {
     state: req.query.state,
     sessionState: req.session.oauthState,
     sessionId: req.sessionID,
     hasCookie: !!req.headers.cookie,
     secure: req.secure,
     proto: req.headers['x-forwarded-proto'],
   });
   try {
     await handleCallback(req);
     const returnTo = req.session.returnTo || '/';
     delete req.session.returnTo;
     res.redirect(returnTo);
   } catch (e) {
     console.error('OAuth callback error:', e);
     res.status(500).send(`OAuth error: ${(e as Error).message}`);
   }
 });
 
-router.get('/api/auth/user', (req, res) => {
-  res.json({ username: req.session.username ?? null });
+router.get('/api/auth/user', async (req, res) => {
+  const username = req.session.username ?? null;
+  let canSetImage = false;
+  if (username) {
+    const lang = String(req.query.lang ?? 'en');
+    canSetImage = await isAutoConfirmedOnEnwikiOrTarget(username, lang);
+  }
+  res.json({ username, canSetImage });
 });
 
 router.post('/api/auth/logout', (req, res) => {
   req.session.destroy(() => res.json({ ok: true }));
 });
 
 /* ----- QID resolution (title → Wikidata QID) ----- */
 
 const QID_RE = /^Q\d+$/;
 
 router.get('/api/:wiki/qid/:title', async (req, res) => {
   const lang = req.params.wiki;
   const wiki = wikiFromLang(lang);
   if (!wiki) return res.status(400).json({ error: 'Invalid wiki' });
   const title = decodeURIComponent(req.params.title);
   try {
     const qid = await getQidForTitle(wiki, title);
     if (!qid) return res.status(404).json({ error: 'QID not found' });
     res.json({ qid });
   } catch (e) {
     console.error('qid resolve error:', e);
     res.status(500).json({ error: 'Query failed' });
   }
 });
 
 /* ----- Headline routes (keyed by Wikidata QID) ----- */
 
 router.get('/api/:wiki/headlines/:qid', async (req, res) => {
   const lang = req.params.wiki;
   const qid = req.params.qid;
   if (!LANG_RE.test(lang)) return res.status(400).json({ error: 'Invalid wiki' });
   if (!QID_RE.test(qid)) return res.status(400).json({ error: 'Invalid QID' });
   try {
     const headlines = await getHeadlines(lang, qid);
     res.json({ qid, count: headlines.length, headlines });
   } catch (e) {
     console.error('headlines error:', e);
     res.status(500).json({ error: 'Query failed' });
   }
 });
 
 router.post('/api/:wiki/headlines/:qid', requireAuth, async (req, res) => {
   const lang = String(req.params.wiki);
   const qid = String(req.params.qid);
   if (!LANG_RE.test(lang)) return res.status(400).json({ error: 'Invalid wiki' });
   if (!QID_RE.test(qid)) return res.status(400).json({ error: 'Invalid QID' });
   const headline = typeof req.body?.headline === 'string' ? req.body.headline.trim() : '';
   if (!headline || headline.length > 500) {
     return res.status(400).json({ error: 'Headline must be 1-500 characters' });
   }
   try {
     const row = await addHeadline(lang, qid, req.session.username!, headline);
     res.json(row);
   } catch (e) {
     console.error('add headline error:', e);
     res.status(500).json({ error: 'Query failed' });
   }
 });
 
 router.put('/api/:wiki/headlines/:qid/:id', requireAuth, async (req, res) => {
   const lang = String(req.params.wiki);
   const qid = String(req.params.qid);
   if (!LANG_RE.test(lang)) return res.status(400).json({ error: 'Invalid wiki' });
   if (!QID_RE.test(qid)) return res.status(400).json({ error: 'Invalid QID' });
   const headlineId = Number.parseInt(String(req.params.id), 10);
   const headline = typeof req.body?.headline === 'string' ? req.body.headline.trim() : '';
   if (Number.isNaN(headlineId)) {
     return res.status(400).json({ error: 'Invalid headline ID' });
   }
   if (!headline || headline.length > 500) {
     return res.status(400).json({ error: 'Headline must be 1-500 characters' });
   }
   try {
     const row = await editHeadline(headlineId, req.session.username!, headline);
     if (!row) return res.status(404).json({ error: 'Headline not found' });
     res.json(row);
   } catch (e) {
     console.error('edit headline error:', e);
     res.status(500).json({ error: 'Query failed' });
   }
 });
 
 router.delete('/api/:wiki/headlines/:qid/:id', requireAuth, async (req, res) => {
   const lang = String(req.params.wiki);
   if (!LANG_RE.test(lang)) return res.status(400).json({ error: 'Invalid wiki' });
   const headlineId = Number.parseInt(String(req.params.id), 10);
   if (Number.isNaN(headlineId)) {
     return res.status(400).json({ error: 'Invalid headline ID' });
   }
   try {
     const ok = await deleteHeadline(headlineId);
     if (!ok) return res.status(404).json({ error: 'Headline not found' });
     res.json({ ok: true });
   } catch (e) {
     console.error('delete headline error:', e);
     res.status(500).json({ error: 'Query failed' });
   }
 });
 
 /* ----- Commons image search ----- */
 
 router.get('/api/commons-search', async (req, res) => {
   const q = String(req.query.q ?? '').trim();
   if (q.length < 2) return res.json({ results: [] });
   try {
     const results = await searchCommons(q, 10);
     res.json({ results });
   } catch (e) {
     console.error('commons-search error:', e);
     res.status(500).json({ error: 'Search failed' });
   }
 });
 
 /* ----- Article images (manual Commons images keyed by QID) ----- */
 
 router.get('/api/article-image/:qid', async (req, res) => {
   const qid = String(req.params.qid);
   if (!QID_RE.test(qid)) return res.status(400).json({ error: 'Invalid QID' });
   try {
     const row = await getArticleImage(qid);
     if (!row) return res.status(404).json({ error: 'No image set' });
     res.json(row);
   } catch (e) {
     console.error('article-image get error:', e);
     res.status(500).json({ error: 'Query failed' });
   }
 });
 
 router.post('/api/article-image/:qid', requireAuth, async (req, res) => {
   const qid = String(req.params.qid);
   if (!QID_RE.test(qid)) return res.status(400).json({ error: 'Invalid QID' });
+  const lang = String(req.query.lang ?? 'en');
+  if (!(await isAutoConfirmedOnEnwikiOrTarget(req.session.username!, lang))) {
+    const where = lang === 'en' ? 'English Wikipedia' : `${lang} or English Wikipedia`;
+    return res
+      .status(403)
+      .json({ error: `You must be auto-confirmed on ${where} to set images` });
+  }
   const commonsTitle =
     typeof req.body?.commonsTitle === 'string'
       ? req.body.commonsTitle.trim()
       : '';
   if (!commonsTitle) {
     return res.status(400).json({ error: 'Commons title required' });
   }
   try {
     const validated = await validateCommonsImage(commonsTitle);
     if (!validated) {
       return res
         .status(400)
         .json({ error: 'Image not found on Commons or not a valid image' });
     }
     const row = await setArticleImage(
       qid,
       commonsTitle,
       validated.imageUrl,
       req.session.username!,
     );
     res.json(row);
   } catch (e) {
     console.error('article-image set error:', e);
     res.status(500).json({ error: 'Query failed' });
   }
 });
 
 router.delete('/api/article-image/:qid', requireAuth, async (req, res) => {
   const qid = String(req.params.qid);
   if (!QID_RE.test(qid)) return res.status(400).json({ error: 'Invalid QID' });
+  const lang = String(req.query.lang ?? 'en');
+  if (!(await isAutoConfirmedOnEnwikiOrTarget(req.session.username!, lang))) {
+    const where = lang === 'en' ? 'English Wikipedia' : `${lang} or English Wikipedia`;
+    return res
+      .status(403)
+      .json({ error: `You must be auto-confirmed on ${where} to manage images` });
+  }
   try {
     const ok = await deleteArticleImage(qid);
     if (!ok) return res.status(404).json({ error: 'No image set' });
     res.json({ ok: true });
   } catch (e) {
     console.error('article-image delete error:', e);
     res.status(500).json({ error: 'Query failed' });
   }
 });
 
 /* ----- Event type search (Wikidata entity search) ----- */
 
 router.get('/api/event-types', async (req, res) => {
   const q = String(req.query.q ?? '').trim();
   if (q.length < 2) return res.json({ results: [] });
   try {
     const results = await searchEntities(q, 15);
     res.json({ results });
   } catch (e) {
     console.error('event-types error:', e);
     res.status(500).json({ error: 'Search failed' });
   }
 });
 
 /* ----- Article events (event instance of, keyed by QID) ----- */
 
 router.get('/api/article-event/:qid', async (req, res) => {
   const qid = String(req.params.qid);
   if (!QID_RE.test(qid)) return res.status(400).json({ error: 'Invalid QID' });
   try {
     const row = await getArticleEvent(qid);
     if (!row) return res.status(404).json({ error: 'No event set' });
     res.json(row);
   } catch (e) {
     console.error('article-event get error:', e);
     res.status(500).json({ error: 'Query failed' });
   }
 });
 
 router.post('/api/article-event/:qid', requireAuth, async (req, res) => {
   const qid = String(req.params.qid);
   if (!QID_RE.test(qid)) return res.status(400).json({ error: 'Invalid QID' });
 
   const eventQid =
     typeof req.body?.eventQid === 'string' ? req.body.eventQid.trim() : '';
 
   if (!eventQid || !/^Q\d+$/.test(eventQid)) {
     return res.status(400).json({ error: 'Valid event QID required' });
   }
 
   try {
     const validated = await validateEventType(eventQid);
     if (!validated) {
       return res.status(400).json({
         error:
           'This item is not a subclass of event on Wikidata. Please choose a different event type.',
       });
     }
 
     const row = await setArticleEvent(
       qid,
       eventQid,
       validated.label,
       req.session.username!,
     );
     res.json(row);
   } catch (e) {
     console.error('article-event set error:', e);
     res.status(500).json({ error: 'Query failed' });
   }
 });
 
 router.delete('/api/article-event/:qid', requireAuth, async (req, res) => {
   const qid = String(req.params.qid);
   if (!QID_RE.test(qid)) return res.status(400).json({ error: 'Invalid QID' });
   try {
     const ok = await deleteArticleEvent(qid);
     if (!ok) return res.status(404).json({ error: 'No event set' });
     res.json({ ok: true });
   } catch (e) {
     console.error('article-event delete error:', e);
     res.status(500).json({ error: 'Query failed' });
   }
 });
 
 export default router;
diff --git a/src/App.vue b/src/App.vue
index 097c195..ed5c110 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,442 +1,442 @@
 <script setup lang="ts">
 import { computed, onMounted, onBeforeUnmount, ref } from 'vue';
 import {
   CdxButton,
   CdxCheckbox,
   CdxIcon,
   CdxMessage,
   CdxProgressBar,
   CdxTextInput,
 } from '@wikimedia/codex';
 import {
   cdxIconReload,
   cdxIconMoon,
   cdxIconBright,
   cdxIconChart,
   cdxIconEdit,
   cdxIconImage,
 } from '@wikimedia/codex-icons';
 import { useTheme } from './theme';
 import {
   fetchTopEdits,
   articleUrl,
   prettyTitle,
   formatNumber,
   type TopEditItem,
 } from './api';
 import ArticleModal from './ArticleModal.vue';
 
 const { isDark, toggle } = useTheme();
 
 const HOUR_OPTIONS = [1, 3, 6, 12, 24];
 const hours = ref(3);
 const timely = ref(true);
 const byEditors = ref(true);
 
 const LANG_RE = /^[a-z]{2,10}(?:-[a-z0-9]+)*$/;
 
 function getLang(): string {
   const parts = window.location.pathname.split('/').filter(Boolean);
   const code = parts[0];
   if (code && LANG_RE.test(code)) return code;
   return 'en';
 }
 
 const lang = ref(getLang());
 const langInput = ref(lang.value);
 
 function onLangSubmit() {
   const code = langInput.value.trim().toLowerCase();
   if (code && LANG_RE.test(code) && code !== lang.value) {
     window.location.href = `/${code}`;
   } else {
     langInput.value = lang.value;
   }
 }
 
 const items = ref<TopEditItem[]>([]);
 const loading = ref(false);
 const error = ref<string | null>(null);
 const generatedAt = ref<string | null>(null);
 const category = ref<string>(String(new Date().getFullYear()));
 const username = ref<string | null>(null);
 
 const modalOpen = ref(false);
 const modalTitle = ref('');
 const modalQid = ref('');
 const modalImage = ref<string | null>(null);
 
 let controller: AbortController | null = null;
 
 const featured = computed(() => items.value[0] ?? null);
 const secondary = computed(() => items.value.slice(1, 3));
 const compact = computed(() => items.value.slice(3));
 
 async function load() {
   controller?.abort();
   controller = new AbortController();
   loading.value = true;
   error.value = null;
   try {
     const res = await fetchTopEdits(lang.value, hours.value, timely.value, byEditors.value, controller.signal);
     items.value = res.items;
     generatedAt.value = res.generatedAt;
     category.value = res.category;
     if (modalOpen.value && modalTitle.value) {
       const match = res.items.find((i) => i.title === modalTitle.value);
       if (match) modalImage.value = match.image;
     }
   } catch (e) {
     if ((e as Error).name === 'AbortError') return;
     error.value = (e as Error).message;
   } finally {
     loading.value = false;
   }
 }
 
 function setHours(h: number) {
   if (h === hours.value) return;
   hours.value = h;
   load();
 }
 
 function toggleTimely() {
   timely.value = !timely.value;
   load();
 }
 
 function toggleByEditors() {
   byEditors.value = !byEditors.value;
   load();
 }
 
 function mediaStyle(image: string | null): Record<string, string> {
   return image ? { backgroundImage: `url("${image}")` } : {};
 }
 
 async function checkAuth() {
   try {
-    const res = await fetch('/api/auth/user');
+    const res = await fetch(`/api/auth/user?lang=${lang.value}`);
     const data = (await res.json()) as { username: string | null };
     username.value = data.username;
   } catch {
     username.value = null;
   }
 }
 
 async function logout() {
   try {
     await fetch('/api/auth/logout', { method: 'POST' });
     username.value = null;
   } catch {
     // non-critical
   }
 }
 
 /* ----- Modal + URL sync ----- */
 
 function openArticle(title: string, qid: string | null, image: string | null) {
   if (modalTitle.value === title && modalOpen.value) return;
   modalTitle.value = title;
   modalQid.value = qid ?? '';
   modalImage.value = image;
   modalOpen.value = true;
   const url = new URL(window.location.href);
   url.searchParams.set('article', title);
   if (qid) url.searchParams.set('qid', qid);
   window.history.pushState({}, '', url);
 }
 
 function closeModal() {
   modalOpen.value = false;
   const url = new URL(window.location.href);
   if (url.searchParams.get('article')) {
     window.history.back();
   }
 }
 
 function onPopState() {
   const url = new URL(window.location.href);
   const article = url.searchParams.get('article');
   if (article) {
     modalTitle.value = article;
     modalQid.value = url.searchParams.get('qid') ?? '';
     modalImage.value = null;
     modalOpen.value = true;
   } else {
     modalOpen.value = false;
   }
 }
 
 onMounted(() => {
   if (window.location.pathname === '/') {
     const url = new URL(window.location.href);
     url.pathname = '/en';
     window.history.replaceState({}, '', url);
   }
   lang.value = getLang();
   langInput.value = lang.value;
   load();
   checkAuth();
   window.addEventListener('popstate', onPopState);
   const url = new URL(window.location.href);
   const article = url.searchParams.get('article');
   if (article) {
     modalTitle.value = article;
     modalQid.value = url.searchParams.get('qid') ?? '';
     modalOpen.value = true;
   }
 });
 
 onBeforeUnmount(() => {
   controller?.abort();
   window.removeEventListener('popstate', onPopState);
 });
 </script>
 
 <template>
   <div class="app-shell">
     <header class="app-header">
       <div>
         <h1 class="app-header__title">Wikinewsie</h1>
         <p class="app-header__subtitle">
           Most-edited {{ lang }}.wikipedia.org articles
         </p>
       </div>
       <cdx-button
         action="default"
         weight="quiet"
         aria-label="Toggle dark mode"
         @click="toggle"
       >
         <cdx-icon :icon="isDark ? cdxIconBright : cdxIconMoon" />
       </cdx-button>
     </header>
 
     <div class="app-toolbar">
       <div class="wiki-selector">
         <cdx-text-input
           v-model="langInput"
           class="wiki-selector__input"
           @keydown.enter="onLangSubmit"
           @blur="onLangSubmit"
         />
         <span class="wiki-selector__suffix">.wikipedia.org</span>
       </div>
       <span class="app-toolbar__label">Time window:</span>
       <cdx-button
         v-for="h in HOUR_OPTIONS"
         :key="h"
         :action="h === hours ? 'progressive' : 'default'"
         :weight="h === hours ? 'primary' : 'normal'"
         size="small"
         @click="setHours(h)"
       >
         {{ h }}h
       </cdx-button>
       <cdx-button
         action="progressive"
         weight="primary"
         :disabled="loading"
         @click="load"
       >
         <cdx-icon :icon="cdxIconReload" start />
         Refresh
       </cdx-button>
       <cdx-checkbox
         :model-value="timely"
         :inline="true"
         @update:model-value="toggleTimely"
       >
         Only in <a
           :href="`https://${lang}.wikipedia.org/wiki/Category:${category}`"
           target="_blank"
           rel="noopener"
           @click.stop
           >Category:{{ category }}</a
         >
       </cdx-checkbox>
       <cdx-checkbox
         :model-value="byEditors"
         :inline="true"
         @update:model-value="toggleByEditors"
       >
         Sort by editors
       </cdx-checkbox>
     </div>
 
     <cdx-progress-bar v-if="loading" aria-label="Loading articles" />
 
     <cdx-message
       v-if="error"
       type="error"
       :fade-in="true"
       :allow-hide="true"
       @hide="error = null"
     >
       {{ error }}
     </cdx-message>
 
     <p v-if="generatedAt && !loading" class="app-meta">
       {{ items.length }} articles · top by
       {{ byEditors ? 'editors' : 'edits' }} in last
       {{ hours }} hour<template v-if="hours !== 1">s</template> · updated
       {{ new Date(generatedAt).toLocaleTimeString() }}
     </p>
 
     <template v-if="items.length">
       <!-- ==================== A1 — Hero ==================== -->
       <section v-if="featured" class="hero">
         <a
           class="card-link"
           :href="articleUrl(featured.title, lang)"
           target="_blank"
           rel="noopener"
           @click.prevent="openArticle(featured.title, featured.qid, featured.image)"
         >
           <div class="hero__card">
             <div
               class="hero__media card-media"
               :class="{ 'card-media--empty': !featured.image }"
               :style="mediaStyle(featured.image)"
             >
               <span class="rank-badge">1</span>
               <cdx-icon
                 v-if="!featured.image"
                 :icon="cdxIconImage"
                 class="card-media__icon"
               />
             </div>
             <div class="hero__body">
               <span class="hero__rank">Top story</span>
               <h2 class="hero__title article-title">
                 {{ prettyTitle(featured.title) }}
               </h2>
               <p v-if="featured.extract" class="hero__extract">
                 {{ featured.extract }}
               </p>
               <div class="article-stats">
                 <span class="article-stat">
                   <cdx-icon :icon="cdxIconEdit" />
                   {{ featured.edits }} edits
                 </span>
                 <span class="article-stat">
                   {{ featured.editors }} editors
                 </span>
                 <span v-if="featured.pageviews !== null" class="article-stat">
                   <cdx-icon :icon="cdxIconChart" />
                   {{ formatNumber(featured.pageviews) }} views (60d)
                 </span>
               </div>
             </div>
           </div>
         </a>
       </section>
 
       <!-- ==================== Tier 2 — Secondary ==================== -->
       <section v-if="secondary.length" class="secondary-grid">
         <a
           v-for="(item, i) in secondary"
           :key="item.title"
           class="card-link secondary-card"
           :href="articleUrl(item.title, lang)"
           target="_blank"
           rel="noopener"
           @click.prevent="openArticle(item.title, item.qid, item.image)"
         >
           <div
             class="secondary-card__media card-media"
             :class="{ 'card-media--empty': !item.image }"
             :style="mediaStyle(item.image)"
           >
             <span class="rank-badge">{{ i + 2 }}</span>
             <cdx-icon
               v-if="!item.image"
               :icon="cdxIconImage"
               class="card-media__icon"
             />
           </div>
           <h3 class="secondary-card__title article-title">
             {{ prettyTitle(item.title) }}
           </h3>
           <p v-if="item.extract" class="secondary-card__extract">
             {{ item.extract }}
           </p>
           <div class="article-stats">
             <span class="article-stat">
               <cdx-icon :icon="cdxIconEdit" />
               {{ item.edits }} edits
             </span>
             <span class="article-stat">
               {{ item.editors }} editors
             </span>
             <span v-if="item.pageviews !== null" class="article-stat">
               <cdx-icon :icon="cdxIconChart" />
               {{ formatNumber(item.pageviews) }} views (60d)
             </span>
           </div>
         </a>
       </section>
 
       <!-- ==================== Tier 3 — Compact ==================== -->
       <section v-if="compact.length" class="compact-grid">
         <a
           v-for="(item, i) in compact"
           :key="item.title"
           class="card-link compact-card"
           :href="articleUrl(item.title, lang)"
           target="_blank"
           rel="noopener"
           @click.prevent="openArticle(item.title, item.qid, item.image)"
         >
           <div
             class="compact-card__media"
             :class="{ 'compact-card__media--empty': !item.image }"
             :style="mediaStyle(item.image)"
           >
             <cdx-icon
               v-if="!item.image"
               :icon="cdxIconImage"
               class="compact-card__media-icon"
             />
           </div>
           <div class="compact-card__body">
             <h4 class="compact-card__title article-title">
               <span class="compact-card__rank">{{ i + 4 }}.</span>
               {{ prettyTitle(item.title) }}
             </h4>
             <div class="article-stats">
               <span class="article-stat">
                 {{ item.edits }} edits
               </span>
               <span class="article-stat">
                 {{ item.editors }} editors
               </span>
               <span v-if="item.pageviews !== null" class="article-stat">
                 {{ formatNumber(item.pageviews) }} views (60d)
               </span>
             </div>
           </div>
         </a>
       </section>
     </template>
 
     <p v-else-if="!loading && !error" class="app-meta">No edits found.</p>
 
     <!-- ==================== Article Modal ==================== -->
     <ArticleModal
       v-model:open="modalOpen"
       :title="modalTitle"
       :qid="modalQid"
       :image="modalImage"
       :hours="hours"
       :lang="lang"
       @update:open="(v) => { if (!v) closeModal(); }"
     />
 
     <footer v-if="username" class="app-footer">
       <span class="app-footer__user">Logged in as {{ username }}</span>
       <cdx-button weight="quiet" @click="logout">Log out</cdx-button>
     </footer>
   </div>
 </template>
diff --git a/src/ArticleModal.vue b/src/ArticleModal.vue
index 9708ce4..b50cc0d 100644
--- a/src/ArticleModal.vue
+++ b/src/ArticleModal.vue
@@ -1,1217 +1,1223 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 import {
   CdxButton,
   CdxDialog,
   CdxIcon,
   CdxProgressBar,
   CdxTextInput,
 } from '@wikimedia/codex';
 import {
   cdxIconLinkExternal,
   cdxIconEdit,
   cdxIconArticle,
   cdxIconUserAvatar,
   cdxIconTrash,
   cdxIconImage,
   cdxIconCalendar,
   cdxIconInfo,
 } from '@wikimedia/codex-icons';
 import { articleUrl, prettyTitle } from './api';
 
 export interface RecentEdit {
   timestamp: string;
   editor: string;
   comment: string;
   source: string;
   oldLen: number;
   newLen: number;
 }
 
 export interface Headline {
   id: number;
   qid: string;
   authors: string;
   headline: string;
   createdAt: string;
   updatedAt: string | null;
 }
 
 const props = defineProps<{
   open: boolean;
   title: string;
   qid: string;
   image: string | null;
   hours: number;
   lang: string;
 }>();
 
 const emit = defineEmits<{ 'update:open': [boolean] }>();
 
 const edits = ref<RecentEdit[]>([]);
 const loadingEdits = ref(false);
 const editsError = ref<string | null>(null);
 
 const headlines = ref<Headline[]>([]);
 const loadingHeadlines = ref(false);
 const headlineText = ref('');
 const headlineError = ref<string | null>(null);
 const submitting = ref(false);
 
 const editingId = ref<number | null>(null);
 const editText = ref('');
 
 const username = ref<string | null>(null);
+const canSetImage = ref(false);
 
 /* ----- Article image ----- */
 
 interface ArticleImage {
   qid: string;
   commonsTitle: string;
   imageUrl: string;
   setBy: string;
 }
 
 interface CommonsSearchItem {
   title: string;
   thumbUrl: string;
   mime: string;
 }
 
 const articleImage = ref<ArticleImage | null>(null);
 const imageQuery = ref('');
 const imageResults = ref<CommonsSearchItem[]>([]);
 const imageError = ref<string | null>(null);
 const imageSubmitting = ref(false);
 const showImageForm = ref(false);
 let imageSearchTimer: ReturnType<typeof setTimeout> | null = null;
 
 async function loadArticleImage() {
   if (!effectiveQid.value) return;
   try {
     const res = await fetch(`/api/article-image/${effectiveQid.value}`);
     if (res.ok) {
       articleImage.value = (await res.json()) as ArticleImage;
     } else {
       articleImage.value = null;
     }
   } catch {
     articleImage.value = null;
   }
 }
 
 function onImageSearchInput() {
   if (imageSearchTimer) clearTimeout(imageSearchTimer);
   imageSearchTimer = setTimeout(doImageSearch, 300);
 }
 
 async function doImageSearch() {
   const q = imageQuery.value.trim();
   if (q.length < 2) {
     imageResults.value = [];
     return;
   }
   try {
     const res = await fetch(
       `/api/commons-search?q=${encodeURIComponent(q)}`,
     );
     if (!res.ok) return;
     const data = (await res.json()) as { results: CommonsSearchItem[] };
     imageResults.value = data.results;
   } catch {
     // non-critical
   }
 }
 
 async function setImage(commonsTitle: string) {
   if (!effectiveQid.value || !commonsTitle) return;
   imageSubmitting.value = true;
   imageError.value = null;
   try {
     const res = await fetch(
-      `/api/article-image/${effectiveQid.value}`,
+      `/api/article-image/${effectiveQid.value}?lang=${props.lang}`,
       {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ commonsTitle }),
       },
     );
     if (!res.ok) {
       const body = await res.json().catch(() => ({}));
       throw new Error(body.error || `Failed (${res.status})`);
     }
     articleImage.value = (await res.json()) as ArticleImage;
     imageQuery.value = '';
     imageResults.value = [];
     showImageForm.value = false;
   } catch (e) {
     imageError.value = (e as Error).message;
   } finally {
     imageSubmitting.value = false;
   }
 }
 
 async function removeImage() {
   if (!effectiveQid.value || !window.confirm('Remove this image?')) return;
   imageError.value = null;
   try {
     const res = await fetch(
-      `/api/article-image/${effectiveQid.value}`,
+      `/api/article-image/${effectiveQid.value}?lang=${props.lang}`,
       { method: 'DELETE' },
     );
     if (!res.ok) {
       const body = await res.json().catch(() => ({}));
       throw new Error(body.error || `Failed (${res.status})`);
     }
     articleImage.value = null;
     showImageForm.value = false;
   } catch (e) {
     imageError.value = (e as Error).message;
   }
 }
 
 const effectiveQid = ref('');
 const qidLoading = ref(false);
 
 async function ensureQid() {
   if (props.qid) {
     effectiveQid.value = props.qid;
     qidLoading.value = false;
     return;
   }
   effectiveQid.value = '';
   qidLoading.value = true;
   if (!props.title) {
     qidLoading.value = false;
     return;
   }
   try {
     const res = await fetch(
       `/api/${props.lang}/qid/${encodeURIComponent(props.title)}`,
     );
     if (res.ok) {
       const data = (await res.json()) as { qid: string };
       effectiveQid.value = data.qid;
     }
   } catch {
     // QID resolution failed
   } finally {
     qidLoading.value = false;
   }
 }
 
 /* ----- Article event (event instance of) ----- */
 
 interface ArticleEvent {
   qid: string;
   eventQid: string;
   eventLabel: string;
   setBy: string;
   setAt: string;
 }
 
 interface EventTypeSearchItem {
   qid: string;
   label: string;
   description: string;
 }
 
 const articleEvent = ref<ArticleEvent | null>(null);
 const eventQuery = ref('');
 const eventResults = ref<EventTypeSearchItem[]>([]);
 const eventError = ref<string | null>(null);
 const eventSubmitting = ref(false);
 const showEventForm = ref(false);
 let eventSearchTimer: ReturnType<typeof setTimeout> | null = null;
 
 async function loadArticleEvent() {
   if (!effectiveQid.value) return;
   try {
     const res = await fetch(`/api/article-event/${effectiveQid.value}`);
     if (res.ok) {
       articleEvent.value = (await res.json()) as ArticleEvent;
     } else {
       articleEvent.value = null;
     }
   } catch {
     articleEvent.value = null;
   }
 }
 
 function onEventSearchInput() {
   if (eventSearchTimer) clearTimeout(eventSearchTimer);
   eventSearchTimer = setTimeout(doEventSearch, 300);
 }
 
 async function doEventSearch() {
   const q = eventQuery.value.trim();
   if (q.length < 2) {
     eventResults.value = [];
     return;
   }
   try {
     const res = await fetch(
       `/api/event-types?q=${encodeURIComponent(q)}`,
     );
     if (!res.ok) return;
     const data = (await res.json()) as { results: EventTypeSearchItem[] };
     eventResults.value = data.results;
   } catch {
     // non-critical
   }
 }
 
 async function setEvent(qid: string, label?: string) {
   if (!effectiveQid.value || !qid) return;
   eventSubmitting.value = true;
   eventError.value = null;
   try {
     const res = await fetch(
       `/api/article-event/${effectiveQid.value}`,
       {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ eventQid: qid }),
       },
     );
     if (!res.ok) {
       const data = await res.json().catch(() => ({}));
       const prefix = label ? `"${label}" is not a valid event type. ` : '';
       throw new Error(prefix + (data.error || `Failed (${res.status})`));
     }
     articleEvent.value = (await res.json()) as ArticleEvent;
     eventQuery.value = '';
     eventResults.value = [];
     showEventForm.value = false;
   } catch (e) {
     eventError.value = (e as Error).message;
   } finally {
     eventSubmitting.value = false;
   }
 }
 
 async function removeEvent() {
   if (!effectiveQid.value || !window.confirm('Remove event type?')) return;
   eventError.value = null;
   try {
     const res = await fetch(
       `/api/article-event/${effectiveQid.value}`,
       { method: 'DELETE' },
     );
     if (!res.ok) {
       const data = await res.json().catch(() => ({}));
       throw new Error(data.error || `Failed (${res.status})`);
     }
     articleEvent.value = null;
     showEventForm.value = false;
   } catch (e) {
     eventError.value = (e as Error).message;
   }
 }
 
 async function loadEdits() {
   loadingEdits.value = true;
   editsError.value = null;
   edits.value = [];
   try {
     const res = await fetch(
       `/api/${props.lang}/recent-edits/${encodeURIComponent(props.title)}?hours=${props.hours}`,
     );
     if (!res.ok) throw new Error(`Failed (${res.status})`);
     const data = (await res.json()) as { edits: RecentEdit[] };
     edits.value = data.edits;
   } catch (e) {
     editsError.value = (e as Error).message;
   } finally {
     loadingEdits.value = false;
   }
 }
 
 async function loadHeadlines() {
   if (!effectiveQid.value) return;
   loadingHeadlines.value = true;
   try {
     const res = await fetch(
       `/api/${props.lang}/headlines/${effectiveQid.value}`,
     );
     if (!res.ok) return;
     const data = (await res.json()) as { headlines: Headline[] };
     headlines.value = data.headlines;
   } catch {
     // headlines are non-critical
   } finally {
     loadingHeadlines.value = false;
   }
 }
 
 async function checkAuth() {
   try {
-    const res = await fetch('/api/auth/user');
-    const data = (await res.json()) as { username: string | null };
+    const res = await fetch(`/api/auth/user?lang=${props.lang}`);
+    const data = (await res.json()) as { username: string | null; canSetImage: boolean };
     username.value = data.username;
+    canSetImage.value = data.canSetImage;
   } catch {
     username.value = null;
+    canSetImage.value = false;
   }
 }
 
 function login() {
   const returnTo = window.location.pathname + window.location.search;
   window.location.href = `/api/auth/login?returnTo=${encodeURIComponent(returnTo)}`;
 }
 
 async function submitHeadline() {
   const text = headlineText.value.trim();
   if (!text) return;
   submitting.value = true;
   headlineError.value = null;
   try {
     const res = await fetch(
       `/api/${props.lang}/headlines/${effectiveQid.value}`,
       {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ headline: text }),
       },
     );
     if (!res.ok) {
       const body = await res.json().catch(() => ({}));
       throw new Error(body.error || `Failed (${res.status})`);
     }
     const row = (await res.json()) as Headline;
     headlines.value.unshift(row);
     headlineText.value = '';
   } catch (e) {
     headlineError.value = (e as Error).message;
   } finally {
     submitting.value = false;
   }
 }
 
 function startEdit(h: Headline) {
   editingId.value = h.id;
   editText.value = h.headline;
 }
 
 function cancelEdit() {
   editingId.value = null;
   editText.value = '';
 }
 
 async function saveEdit(id: number) {
   const text = editText.value.trim();
   if (!text) return;
   headlineError.value = null;
   try {
     const res = await fetch(
       `/api/${props.lang}/headlines/${effectiveQid.value}/${id}`,
       {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ headline: text }),
       },
     );
     if (!res.ok) {
       const body = await res.json().catch(() => ({}));
       throw new Error(body.error || `Failed (${res.status})`);
     }
     const row = (await res.json()) as Headline;
     const idx = headlines.value.findIndex((h) => h.id === id);
     if (idx >= 0) headlines.value[idx] = row;
     editingId.value = null;
     editText.value = '';
   } catch (e) {
     headlineError.value = (e as Error).message;
   }
 }
 
 async function deleteHeadlineFn(id: number) {
   if (!window.confirm('Delete this headline?')) return;
   headlineError.value = null;
   try {
     const res = await fetch(
       `/api/${props.lang}/headlines/${effectiveQid.value}/${id}`,
       { method: 'DELETE' },
     );
     if (!res.ok) {
       const body = await res.json().catch(() => ({}));
       throw new Error(body.error || `Failed (${res.status})`);
     }
     headlines.value = headlines.value.filter((h) => h.id !== id);
   } catch (e) {
     headlineError.value = (e as Error).message;
   }
 }
 
 function formatTime(ts: string): string {
   const y = ts.slice(0, 4);
   const m = ts.slice(4, 6);
   const d = ts.slice(6, 8);
   const h = ts.slice(8, 10);
   const min = ts.slice(10, 12);
   const dt = new Date(`${y}-${m}-${d}T${h}:${min}:00Z`);
   return dt.toLocaleString('en-US', {
     month: 'short',
     day: 'numeric',
     hour: '2-digit',
     minute: '2-digit',
   });
 }
 
 function formatHeadlineTime(iso: string): string {
   return new Date(iso).toLocaleString('en-US', {
     month: 'short',
     day: 'numeric',
     hour: '2-digit',
     minute: '2-digit',
   });
 }
 
 function sizeDiff(e: RecentEdit): number {
   return e.newLen - e.oldLen;
 }
 
 function sizeClass(e: RecentEdit): string {
   const diff = sizeDiff(e);
   if (diff > 0) return 'edit-diff--add';
   if (diff < 0) return 'edit-diff--del';
   return '';
 }
 
 function formatSize(diff: number): string {
   if (diff > 0) return `+${diff}`;
   return String(diff);
 }
 
 watch(
   () => [props.open, props.title],
   ([isOpen]) => {
     if (isOpen) {
       articleImage.value = null;
       articleEvent.value = null;
       headlines.value = [];
       showImageForm.value = false;
       showEventForm.value = false;
       imageQuery.value = '';
       imageResults.value = [];
       eventQuery.value = '';
       eventResults.value = [];
       imageError.value = null;
       eventError.value = null;
       headlineError.value = null;
       editingId.value = null;
       editText.value = '';
 
       loadEdits();
       ensureQid().then(() => {
         loadHeadlines();
         loadArticleImage();
         loadArticleEvent();
       });
       checkAuth();
     }
   },
 );
 </script>
 
 <template>
   <cdx-dialog
     :open="open"
     :title="prettyTitle(title)"
     subtitle="Recent edits & live coverage"
     :use-close-button="true"
     @update:open="emit('update:open', $event)"
   >
     <div class="modal-content">
       <!-- Article link -->
       <div class="modal-section">
         <a
           class="cdx-button cdx-button--fake-button--enabled cdx-button--action-progressive cdx-button--weight-primary article-link"
           :href="articleUrl(title, lang)"
           target="_blank"
           rel="noopener"
         >
           <cdx-icon :icon="cdxIconLinkExternal" start />
           View article on Wikipedia
         </a>
       </div>
 
       <!-- No Wikidata item -->
       <section v-if="qidLoading" class="modal-section">
         <cdx-progress-bar aria-label="Resolving Wikidata item" />
       </section>
       <section v-else-if="!effectiveQid" class="modal-section no-qid-prompt">
         <div class="no-qid-prompt__row">
           <cdx-icon :icon="cdxIconInfo" class="no-qid-prompt__icon" />
           <p class="no-qid-prompt__text">
             This article doesn't have a Wikidata item yet.
             Headlines, images, and event tagging require a Wikidata QID.
           </p>
         </div>
         <a
           class="cdx-button cdx-button--action-progressive cdx-button--weight-primary"
           href="https://www.wikidata.org/wiki/Special:NewItem"
           target="_blank"
           rel="noopener"
         >
           <cdx-icon :icon="cdxIconLinkExternal" start />
           Create a Wikidata item
         </a>
         <p class="no-qid-prompt__hint">
           After creating and linking the item to this article, refresh this page.
         </p>
       </section>
 
       <!-- Article image -->
       <section v-if="effectiveQid && (!image || articleImage)" class="modal-section">
         <h3 class="modal-section__heading">
           <cdx-icon :icon="cdxIconImage" />
           Article image
         </h3>
 
         <p v-if="imageError" class="modal-error">{{ imageError }}</p>
 
         <template v-if="articleImage && !showImageForm">
           <img
             :src="articleImage.imageUrl"
             class="article-image-preview"
             :alt="articleImage.commonsTitle"
           />
           <p class="article-image-setter">
             Set by <strong>{{ articleImage.setBy }}</strong>
           </p>
-          <div v-if="username" class="article-image-actions">
+          <div v-if="username && canSetImage" class="article-image-actions">
             <cdx-button @click="showImageForm = true">Replace</cdx-button>
             <cdx-button weight="quiet" @click="removeImage">
               <cdx-icon :icon="cdxIconTrash" />
               Remove
             </cdx-button>
           </div>
         </template>
 
-        <template v-else-if="username">
+        <template v-else-if="username && canSetImage">
           <div class="image-form">
             <cdx-text-input
               v-model="imageQuery"
               placeholder="Prefix search Commons"
               @input="onImageSearchInput"
               @keydown.enter="setImage(imageQuery.trim())"
             />
             <cdx-button
               action="progressive"
               weight="primary"
               :disabled="!imageQuery.trim() || imageSubmitting"
               @click="setImage(imageQuery.trim())"
             >
               {{ imageSubmitting ? 'Saving...' : 'Set' }}
             </cdx-button>
             <cdx-button
               v-if="articleImage"
               weight="quiet"
               @click="showImageForm = false; imageQuery = ''; imageResults = []"
             >
               Cancel
             </cdx-button>
           </div>
           <ul v-if="imageResults.length" class="image-search-results">
             <li
               v-for="r in imageResults"
               :key="r.title"
               class="image-search-result"
               @click="setImage(r.title)"
             >
               <img :src="r.thumbUrl" class="image-search-thumb" :alt="r.title" />
               <span class="image-search-title">{{ r.title }}</span>
             </li>
           </ul>
         </template>
 
+        <p v-else-if="username" class="modal-empty">
+          You must be auto-confirmed on {{ lang === 'en' ? 'English Wikipedia' : `${lang} or English Wikipedia` }} to manage images.
+        </p>
         <p v-else class="modal-empty">
           No image set. Log in to add one from Commons.
         </p>
       </section>
 
       <!-- Event instance of -->
       <section v-if="effectiveQid" class="modal-section">
         <h3 class="modal-section__heading">
           <cdx-icon :icon="cdxIconCalendar" />
           What event is causing people to edit this article?
         </h3>
 
         <p v-if="eventError" class="modal-error">{{ eventError }}</p>
 
         <template v-if="articleEvent && !showEventForm">
           <div class="event-current">
             <span class="event-current__label">{{ articleEvent.eventLabel }}</span>
             <a
               :href="`https://www.wikidata.org/wiki/${articleEvent.eventQid}`"
               target="_blank"
               rel="noopener"
               class="event-current__qid"
             >{{ articleEvent.eventQid }}</a>
           </div>
           <p class="event-setter">
             Set by <strong>{{ articleEvent.setBy }}</strong>
           </p>
           <div v-if="username" class="event-actions">
             <cdx-button @click="showEventForm = true">Replace</cdx-button>
             <cdx-button weight="quiet" @click="removeEvent">
               <cdx-icon :icon="cdxIconTrash" />
               Remove
             </cdx-button>
           </div>
         </template>
 
         <template v-else-if="username">
           <div class="event-form">
             <cdx-text-input
               v-model="eventQuery"
               placeholder="Search Wikidata events (e.g. 'death' or 'election')"
               @input="onEventSearchInput"
               @keydown.enter="(/^Q\d+$/.test(eventQuery.trim()) && setEvent(eventQuery.trim()))"
             />
             <cdx-button
               v-if="/^Q\d+$/.test(eventQuery.trim())"
               action="progressive"
               weight="primary"
               :disabled="eventSubmitting"
               @click="setEvent(eventQuery.trim())"
             >
               {{ eventSubmitting ? 'Saving...' : 'Set' }}
             </cdx-button>
             <cdx-button
               v-if="articleEvent"
               weight="quiet"
               @click="showEventForm = false; eventQuery = ''; eventResults = []"
             >
               Cancel
             </cdx-button>
           </div>
           <ul v-if="eventResults.length" class="event-search-results">
             <li
               v-for="r in eventResults"
               :key="r.qid"
               class="event-search-result"
               @click="setEvent(r.qid, r.label)"
             >
               <span class="event-search-label">{{ r.label }}</span>
               <span v-if="r.description" class="event-search-desc">{{ r.description }}</span>
               <span class="event-search-qid">{{ r.qid }}</span>
             </li>
           </ul>
         </template>
 
         <p v-else class="modal-empty">
           No event type set. Log in to add one.
         </p>
       </section>
 
       <!-- Live headlines -->
       <section v-if="effectiveQid" class="modal-section">
         <h3 class="modal-section__heading">
           <cdx-icon :icon="cdxIconArticle" />
           Live headlines
         </h3>
 
         <!-- Post form -->
         <div v-if="username" class="headline-form">
           <cdx-text-input
             v-model="headlineText"
             placeholder="Why is this article being edited right now?"
             @keydown.enter="submitHeadline"
           />
           <cdx-button
             action="progressive"
             weight="primary"
             :disabled="!headlineText.trim() || submitting"
             @click="submitHeadline"
           >
             Post
           </cdx-button>
         </div>
         <div v-else class="headline-login">
           <cdx-button
             action="progressive"
             weight="normal"
             @click="login"
           >
             <cdx-icon :icon="cdxIconUserAvatar" start />
             Log in with Wikimedia to post
           </cdx-button>
         </div>
 
         <p v-if="headlineError" class="modal-error">{{ headlineError }}</p>
 
         <!-- Headlines timeline -->
         <cdx-progress-bar
           v-if="loadingHeadlines"
           aria-label="Loading headlines"
         />
         <ul v-if="headlines.length" class="headline-list">
           <li v-for="h in headlines" :key="h.id" class="headline-item">
             <template v-if="editingId === h.id">
               <div class="headline-edit-form">
                 <cdx-text-input
                   v-model="editText"
                   @keydown.enter="saveEdit(h.id)"
                   @keydown.escape="cancelEdit"
                 />
                 <cdx-button
                   action="progressive"
                   weight="primary"
                   :disabled="!editText.trim()"
                   @click="saveEdit(h.id)"
                 >
                   Save
                 </cdx-button>
                 <cdx-button @click="cancelEdit">Cancel</cdx-button>
               </div>
             </template>
             <template v-else>
               <div class="headline-item__header">
                 <span class="headline-item__author">{{ h.authors }}</span>
                 <span v-if="h.updatedAt" class="headline-item__badge">edited</span>
               </div>
               <span class="headline-item__text">{{ h.headline }}</span>
               <div class="headline-item__footer">
                 <span class="headline-item__time">{{ formatHeadlineTime(h.createdAt) }}</span>
                 <div v-if="username" class="headline-item__actions">
                   <cdx-button
                     weight="quiet"
                     @click="startEdit(h)"
                   >
                     <cdx-icon :icon="cdxIconEdit" />
                     Edit
                   </cdx-button>
                   <cdx-button
                     weight="quiet"
                     @click="deleteHeadlineFn(h.id)"
                   >
                     <cdx-icon :icon="cdxIconTrash" />
                     Delete
                   </cdx-button>
                 </div>
               </div>
             </template>
           </li>
         </ul>
         <p v-else-if="!loadingHeadlines" class="modal-empty">
           No headlines yet. Be the first to post!
         </p>
       </section>
 
       <!-- Recent edits table -->
       <section class="modal-section">
         <h3 class="modal-section__heading">
           <cdx-icon :icon="cdxIconEdit" />
           Recent edits (last {{ hours }}h)
         </h3>
         <cdx-progress-bar
           v-if="loadingEdits"
           aria-label="Loading recent edits"
         />
         <p v-if="editsError" class="modal-error">{{ editsError }}</p>
         <table v-if="edits.length" class="edits-table">
           <thead>
             <tr>
               <th>Time</th>
               <th>Editor</th>
               <th>Comment</th>
               <th class="edits-table__size">Size</th>
             </tr>
           </thead>
           <tbody>
             <tr v-for="e in edits" :key="e.timestamp + e.editor">
               <td class="edits-table__time">{{ formatTime(e.timestamp) }}</td>
               <td class="edits-table__editor">{{ e.editor }}</td>
               <td class="edits-table__comment">{{ e.comment || '(no summary)' }}</td>
               <td class="edits-table__size">
                 <span :class="sizeClass(e)">{{ formatSize(sizeDiff(e)) }}</span>
               </td>
             </tr>
           </tbody>
         </table>
         <p v-else-if="!loadingEdits" class="modal-empty">
           No edits in the last {{ hours }} hours.
         </p>
       </section>
     </div>
   </cdx-dialog>
 </template>
 
 <style scoped>
 .modal-content {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-200);
   padding-bottom: var(--spacing-100);
 }
 
 .modal-section {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-50);
 }
 
 /* --- No QID prompt --- */
 .no-qid-prompt {
   align-items: flex-start;
 }
 
 .no-qid-prompt__row {
   display: flex;
   align-items: flex-start;
   gap: var(--spacing-50);
 }
 
 .no-qid-prompt__icon {
   color: var(--color-progressive);
   font-size: var(--font-size-large);
   flex-shrink: 0;
   margin-top: 2px;
 }
 
 .no-qid-prompt__text {
   margin: 0;
   color: var(--color-base);
 }
 
 .no-qid-prompt__hint {
   margin: 0;
   font-size: var(--font-size-small);
   color: var(--color-subtle);
 }
 
 /* --- Article image --- */
 .article-image-preview {
   width: 100%;
   max-height: 240px;
   object-fit: contain;
   border-radius: var(--app-radius, 2px);
   background-color: var(--background-color-neutral);
 }
 
 .article-image-setter {
   font-size: var(--font-size-small);
   color: var(--color-subtle);
   margin: 0;
 }
 
 .article-image-actions {
   display: flex;
   gap: var(--spacing-50);
 }
 
 /* --- Event type --- */
 .event-current {
   display: flex;
   align-items: baseline;
   gap: var(--spacing-50);
 }
 
 .event-current__label {
   font-size: var(--font-size-medium);
   font-weight: var(--font-weight-bold);
   color: var(--color-emphasized);
 }
 
 .event-current__qid {
   font-size: var(--font-size-small);
   color: var(--color-progressive);
   text-decoration: none;
 }
 
 .event-current__qid:hover {
   text-decoration: underline;
 }
 
 .event-setter {
   font-size: var(--font-size-small);
   color: var(--color-subtle);
   margin: 0;
 }
 
 .event-actions {
   display: flex;
   gap: var(--spacing-50);
 }
 
 .event-form {
   display: flex;
   gap: var(--spacing-50);
   align-items: center;
 }
 
 .event-form .cdx-text-input {
   flex: 1;
 }
 
 .event-search-results {
   list-style: none;
   margin: 0;
   padding: 0;
   max-height: 200px;
   overflow-y: auto;
   border: 1px solid var(--border-color-base);
   border-radius: var(--app-radius, 2px);
 }
 
 .event-search-result {
   display: flex;
   align-items: baseline;
   gap: var(--spacing-50);
   padding: var(--spacing-25) var(--spacing-50);
   cursor: pointer;
   border-bottom: 1px solid var(--border-color-subtle);
 }
 
 .event-search-result:hover {
   background-color: var(--background-color-interactive-subtle);
 }
 
 .event-search-result:last-child {
   border-bottom: none;
 }
 
 .event-search-label {
   font-size: var(--font-size-small);
   color: var(--color-base);
   font-weight: var(--font-weight-bold);
   flex-shrink: 0;
 }
 
 .event-search-desc {
   font-size: var(--font-size-x-small);
   color: var(--color-subtle);
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .event-search-qid {
   font-size: var(--font-size-x-small);
   color: var(--color-subtle);
   font-family: monospace;
   flex-shrink: 0;
 }
 
 .image-form {
   display: flex;
   gap: var(--spacing-50);
   align-items: center;
 }
 
 .image-form .cdx-text-input {
   flex: 1;
 }
 
 .image-search-results {
   list-style: none;
   margin: 0;
   padding: 0;
   max-height: 200px;
   overflow-y: auto;
   border: 1px solid var(--border-color-base);
   border-radius: var(--app-radius, 2px);
 }
 
 .image-search-result {
   display: flex;
   align-items: center;
   gap: var(--spacing-50);
   padding: var(--spacing-25) var(--spacing-50);
   cursor: pointer;
   border-bottom: 1px solid var(--border-color-subtle);
 }
 
 .image-search-result:hover {
   background-color: var(--background-color-interactive-subtle);
 }
 
 .image-search-result:last-child {
   border-bottom: none;
 }
 
 .image-search-thumb {
   width: 40px;
   height: 40px;
   object-fit: contain;
   flex-shrink: 0;
 }
 
 .image-search-title {
   font-size: var(--font-size-small);
   color: var(--color-base);
   word-break: break-all;
 }
 
 .article-link {
   display: flex !important;
   align-items: center;
   justify-content: center;
   width: 100%;
   max-width: none;
   box-sizing: border-box;
 }
 
 .modal-section__heading {
   margin: 0;
   font-size: var(--font-size-medium);
   font-weight: var(--font-weight-bold);
   color: var(--color-emphasized);
   display: flex;
   align-items: center;
   gap: var(--spacing-25);
 }
 
 .modal-error {
   color: var(--color-error, #bf3c2c);
   margin: 0;
 }
 
 .modal-empty {
   color: var(--color-subtle);
   margin: 0;
 }
 
 /* --- Headlines --- */
 .headline-form {
   display: flex;
   gap: var(--spacing-50);
 }
 
 .headline-form .cdx-text-input {
   flex: 1;
 }
 
 .headline-login {
   padding: var(--spacing-50) 0;
 }
 
 .headline-list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-50);
 }
 
 .headline-item {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-25);
   padding: var(--spacing-75) var(--spacing-100);
   background-color: var(--background-color-interactive-subtle);
   border-radius: var(--app-radius, 2px);
   border-inline-start: 3px solid var(--border-color-progressive);
 }
 
 .headline-item__author {
   font-size: var(--font-size-small);
   font-weight: var(--font-weight-bold);
   color: var(--color-progressive);
 }
 
 .headline-item__badge {
   font-size: var(--font-size-x-small);
   color: var(--color-subtle);
   font-style: italic;
 }
 
 .headline-item__text {
   font-size: var(--font-size-medium);
   line-height: 1.4;
   color: var(--color-base);
 }
 
 .headline-item__time {
   font-size: var(--font-size-small);
   color: var(--color-subtle);
 }
 
 .headline-item__header {
   display: flex;
   align-items: baseline;
   gap: var(--spacing-50);
 }
 
 .headline-item__footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--spacing-50);
 }
 
 .headline-item__actions {
   display: flex;
   gap: 0;
 }
 
 .headline-item__actions .cdx-button {
   padding: var(--spacing-25) var(--spacing-50);
   min-height: 0;
   font-size: var(--font-size-x-small);
 }
 
 .headline-edit-form {
   display: flex;
   gap: var(--spacing-50);
   align-items: center;
 }
 
 .headline-edit-form .cdx-text-input {
   flex: 1;
 }
 
 /* --- Edits table --- */
 .edits-table {
   width: 100%;
   border-collapse: collapse;
   font-size: var(--font-size-small);
 }
 
 .edits-table th {
   text-align: left;
   font-weight: var(--font-weight-bold);
   color: var(--color-subtle);
   padding: var(--spacing-25) var(--spacing-50);
   border-bottom: 1px solid var(--border-color-base);
   white-space: nowrap;
 }
 
 .edits-table td {
   padding: var(--spacing-25) var(--spacing-50);
   border-bottom: 1px solid var(--border-color-subtle);
   vertical-align: top;
 }
 
 .edits-table__time {
   white-space: nowrap;
   color: var(--color-subtle);
 }
 
 .edits-table__editor {
   white-space: nowrap;
   color: var(--color-progressive);
 }
 
 .edits-table__comment {
   max-width: 300px;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .edits-table__size {
   text-align: right;
   white-space: nowrap;
 }
 
 .edit-diff--add {
   color: var(--color-success, #099979);
 }
 
 .edit-diff--del {
   color: var(--color-error, #bf3c2c);
 }
 </style>