diff --git a/.gitignore b/.gitignore
index 3b56f93..ecbec39 100644
--- a/.gitignore
+++ b/.gitignore
@@ -47,3 +47,4 @@ dmypy.json
 
 # Browser network captures (may contain session cookies / PII)
 *.har
+.tokensave
diff --git a/src/kudosy/app.py b/src/kudosy/app.py
index 3c2ccdc..f0e66d1 100644
--- a/src/kudosy/app.py
+++ b/src/kudosy/app.py
@@ -24,6 +24,7 @@
 from kudosy.settings import get_settings
 from kudosy.sport_types import ALL_SPORT_TYPES, fetch_sport_types, merge_sport_types
 from kudosy.store import (
+    append_run_history,
     bootstrap,
     log_path,
     mark_kudoed,
@@ -128,6 +129,19 @@ async def _run_job(dry_run: bool | None = None) -> Any:
                             act["has_kudoed"] = True
                 write_activity_cache(acts, result.started_at.isoformat())
                 log.debug("Activity cache updated (%d entries)", len(acts))
+            # Persist a compact history entry for every completed run
+            if result:
+                append_run_history(
+                    {
+                        "started_at": result.started_at.isoformat(),
+                        "finished_at": result.finished_at.isoformat(),
+                        "dry_run": result.dry_run,
+                        "total": result.total,
+                        "would_give": result.would_give,
+                        "given": result.given,
+                        "success": result.success,
+                    }
+                )
             return result
         finally:
             await client.aclose()
diff --git a/src/kudosy/routes.py b/src/kudosy/routes.py
index 78bab62..c630253 100644
--- a/src/kudosy/routes.py
+++ b/src/kudosy/routes.py
@@ -29,6 +29,7 @@
     read_athlete_avatars,
     read_athlete_labels,
     read_log,
+    read_run_history,
     read_settings,
     read_user_config,
     write_activity_cache,
@@ -51,13 +52,31 @@
 async def serve_index() -> HTMLResponse:
     """Serve index.html with versioned asset URLs for cache busting."""
     v = __version__
-    importmap = json.dumps({"imports": {"./i18n.js": f"./i18n.js?v={v}"}})
+    # All local ES modules are mapped to their cache-busted ?v= variant so that
+    # a new release immediately invalidates every module in every browser.
+    _MODULES = [
+        "./i18n.js",
+        "./state.js",
+        "./dom.js",
+        "./api.js",
+        "./format.js",
+        "./schedule-matrix.js",
+        "./athletes.js",
+        "./config.js",
+        "./settings.js",
+        "./feed.js",
+        "./status.js",
+        "./stats.js",
+        "./tabs.js",
+        "./main.js",
+    ]
+    importmap = json.dumps({"imports": {m: f"{m}?v={v}" for m in _MODULES}})
     content = (_STATIC_DIR / "index.html").read_text()
     content = content.replace('href="styles.css"', f'href="styles.css?v={v}"')
     content = content.replace(
-        '<script src="app.js" type="module"></script>',
+        '<script src="main.js" type="module"></script>',
         f'<script type="importmap">{importmap}</script>\n  '
-        f'<script src="app.js?v={v}" type="module"></script>',
+        f'<script src="main.js?v={v}" type="module"></script>',
     )
     return HTMLResponse(content=content, headers={"Cache-Control": "no-store"})
 
@@ -420,6 +439,19 @@ async def post_single_kudos(activity_id: str) -> dict[str, Any]:
         await client.aclose()
 
 
+# ── History ───────────────────────────────────────────────────────────────────
+
+
+@router.get("/api/history")
+async def get_history(limit: int = 100) -> list[dict[str, Any]]:
+    """Return the *limit* most-recent run-history entries (newest first).
+
+    Each entry is a compact dict with: started_at, finished_at, dry_run,
+    total, would_give, given, success.
+    """
+    return read_run_history(limit=max(1, min(limit, 500)))
+
+
 # ── Log ───────────────────────────────────────────────────────────────────────
 
 
diff --git a/src/kudosy/static/api.js b/src/kudosy/static/api.js
new file mode 100644
index 0000000..e44abab
--- /dev/null
+++ b/src/kudosy/static/api.js
@@ -0,0 +1,31 @@
+// ── Kudosy UI — api.js ───────────────────────────────────────────────────────
+// Thin fetch wrappers: structured-error handling + JSON serialisation.
+
+import { t } from './i18n.js';
+
+export async function fetchJson(url, opts = {}) {
+  const res = await fetch(url, opts);
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}));
+    // detail may be a structured {code, message} object or a plain string
+    const detail = body.detail;
+    if (detail && typeof detail === 'object' && detail.code) {
+      const key = `error.${detail.code}`;
+      const translated = t(key);
+      // if key not found, fall back to the message field
+      throw new Error(translated !== key ? translated : (detail.message || `HTTP ${res.status}`));
+    }
+    throw new Error(
+      (typeof detail === 'string' ? detail : null) || body.error || `HTTP ${res.status}`
+    );
+  }
+  return res.json();
+}
+
+export async function putJson(url, data) {
+  return fetchJson(url, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data),
+  });
+}
diff --git a/src/kudosy/static/app.js b/src/kudosy/static/app.js
deleted file mode 100644
index 278e38b..0000000
--- a/src/kudosy/static/app.js
+++ /dev/null
@@ -1,1448 +0,0 @@
-// ──────────────────────────────────────────────────────────────────────────────
-// Kudosy UI — app.js
-// ──────────────────────────────────────────────────────────────────────────────
-
-import {
-  SUPPORTED,
-  LANG_LABELS,
-  t,
-  getLang,
-  currentLang,
-  localeFor,
-  setLang,
-  applyStaticTranslations,
-} from './i18n.js';
-
-// ── Helpers ───────────────────────────────────────────────────────────────────
-
-const $ = id => document.getElementById(id);
-
-function toast(msg, type = 'success') {
-  const el = document.createElement('div');
-  el.className = `toast toast-${type}`;
-  const icon = type === 'success' ? '✓' : type === 'error' ? '✕' : 'ℹ';
-  el.innerHTML = `<span>${icon}</span><span>${msg}</span>`;
-  $('toast-container').appendChild(el);
-  setTimeout(() => {
-    el.classList.add('fade-out');
-    setTimeout(() => el.remove(), 300);
-  }, 3500);
-}
-
-async function fetchJson(url, opts = {}) {
-  const res = await fetch(url, opts);
-  if (!res.ok) {
-    const body = await res.json().catch(() => ({}));
-    // detail may be a structured {code, message} object or a plain string
-    const detail = body.detail;
-    if (detail && typeof detail === 'object' && detail.code) {
-      const key = `error.${detail.code}`;
-      const translated = t(key);
-      // if key not found, fall back to the message field
-      throw new Error(translated !== key ? translated : (detail.message || `HTTP ${res.status}`));
-    }
-    throw new Error(
-      (typeof detail === 'string' ? detail : null) || body.error || `HTTP ${res.status}`
-    );
-  }
-  return res.json();
-}
-
-async function putJson(url, data) {
-  return fetchJson(url, {
-    method: 'PUT',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify(data),
-  });
-}
-
-function setButtonLoading(btn, loading) {
-  if (!btn) return;
-  if (loading) {
-    btn._savedHTML = btn.innerHTML;
-    btn.innerHTML = '<span class="spinner" aria-hidden="true"></span>';
-    btn.disabled = true;
-    btn.classList.add('is-loading');
-  } else {
-    if (btn._savedHTML !== undefined) btn.innerHTML = btn._savedHTML;
-    btn.disabled = false;
-    btn.classList.remove('is-loading');
-    delete btn._savedHTML;
-  }
-}
-
-function formatRelative(isoString) {
-  if (!isoString) return '—';
-  const d = new Date(isoString);
-  const diff = Date.now() - d.getTime();
-  const timeStr = d.toLocaleTimeString(localeFor(currentLang()), { hour: '2-digit', minute: '2-digit' });
-  if (diff < 0) {
-    const s = Math.round(-diff / 1000);
-    if (s < 60) return `${t('time.inSeconds', { n: s })} (${timeStr})`;
-    const m = Math.round(s / 60);
-    if (m < 60) return `${t('time.inMinutes', { n: m })} (${timeStr})`;
-    return `${t('time.inHours', { n: Math.round(m / 60) })} (${timeStr})`;
-  }
-  const s = Math.round(diff / 1000);
-  if (s < 60) return `${t('time.agoSeconds', { n: s })} (${timeStr})`;
-  const m = Math.round(s / 60);
-  if (m < 60) return `${t('time.agoMinutes', { n: m })} (${timeStr})`;
-  const h = Math.round(m / 60);
-  if (h < 24) return `${t('time.agoHours', { n: h })} (${timeStr})`;
-  return d.toLocaleString(localeFor(currentLang()), { dateStyle: 'short', timeStyle: 'short' });
-}
-
-function formatTime(isoString) {
-  if (!isoString) return '—';
-  return new Date(isoString).toLocaleTimeString(localeFor(currentLang()), {
-    hour: '2-digit',
-    minute: '2-digit',
-  });
-}
-
-// "MountainBikeRide" → "Mountain Bike Ride"
-function formatSportLabel(type) {
-  return type.replace(/([A-Z])/g, ' $1').trim();
-}
-
-// ── State ─────────────────────────────────────────────────────────────────────
-
-let sportTypes      = [];
-let sportCategories = {};   // { FootSports: [...], CycleSports: [...], … }
-// The five canonical category names — used to distinguish a category-keyed row from
-// a sport-keyed row when reading the rules tables back.
-const CATEGORY_NAME_SET = new Set([
-  'FootSports', 'CycleSports', 'WaterSports', 'WinterSports', 'OtherSports',
-]);
-let athleteLabels = {};
-let athleteAvatars = {};
-let pollTimer     = null;
-let feedActivities = [];
-let feedFetchedAt  = null;
-let feedLoaded     = false;   // true after the first successful feed fetch
-let feedFilter     = { status: 'all', text: '', sport: '' };
-
-// ── Run-button spinner state ───────────────────────────────────────────────────
-// The button whose spinner is currently active (null when idle).
-let runningButton      = null;
-// The lastRun.finished_at that was current when the user clicked Run/DryRun.
-// pollStatus() clears the spinner once a *newer* finished_at appears.
-let runStartStamp      = null;
-// Updated by pollStatus() every tick so startRun() can snapshot it.
-let currentLastRunStamp = null;
-
-// ── Language selector ─────────────────────────────────────────────────────────
-
-function initLangSelect() {
-  const sel = $('lang-select');
-  if (!sel) return;
-  for (const lang of SUPPORTED) {
-    const opt = document.createElement('option');
-    opt.value = lang;
-    opt.textContent = LANG_LABELS[lang];
-    if (lang === getLang()) opt.selected = true;
-    sel.appendChild(opt);
-  }
-  sel.addEventListener('change', () => {
-    setLang(sel.value, () => {
-      // Re-render dynamic areas after language change
-      pollStatus();
-      const activeFeedPane = document.querySelector('#tab-feed.active');
-      if (activeFeedPane) {
-        // Update sport dropdown "all sports" label if already populated
-        const sportSel = $('feed-filter-sport');
-        if (sportSel && sportSel.options.length > 0) {
-          sportSel.options[0].textContent = t('feed.filter.allSports');
-        }
-        if (feedActivities.length) renderFeed();
-        else loadFeed();
-      }
-    });
-    // Keep select in sync (applyStaticTranslations won't touch it)
-    sel.value = sel.value;
-  });
-}
-
-// ── Auto-save ────────────────────────────────────────────────────────────────
-// Disabled during init so that loadConfig/loadSettings DOM mutations don't
-// trigger premature API calls. Enabled by init() after both loads complete.
-
-let _autoSaveEnabled    = false;
-let _saveConfigTimer    = null;
-let _saveSettingsTimer  = null;
-
-function debouncedSaveConfig() {
-  if (!_autoSaveEnabled) return;
-  clearTimeout(_saveConfigTimer);
-  _saveConfigTimer = setTimeout(saveConfig, 800);
-}
-
-function debouncedSaveSettings() {
-  if (!_autoSaveEnabled) return;
-  clearTimeout(_saveSettingsTimer);
-  _saveSettingsTimer = setTimeout(saveSettings, 800);
-}
-
-// ── Tabs ──────────────────────────────────────────────────────────────────────
-
-function activateTab(tabName) {
-  const btn = document.querySelector(`.tab[data-tab="${tabName}"]`);
-  if (!btn) return;
-  document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
-  document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('active'));
-  btn.classList.add('active');
-  const pane = $(`tab-${tabName}`);
-  if (pane) pane.classList.add('active');
-  location.hash = tabName;
-  if (tabName === 'log') startPolling();
-  else if (tabName === 'feed') {
-    stopPolling(); pollStatus();
-    // Only fetch from Strava on first visit; use cached data on tab switches.
-    // The Refresh button is the explicit way to reload.
-    if (feedLoaded) renderFeed(); else loadFeed();
-  }
-  else { stopPolling(); pollStatus(); }
-}
-
-function initTabs() {
-  document.querySelectorAll('.tab').forEach(btn => {
-    btn.addEventListener('click', () => activateTab(btn.dataset.tab));
-  });
-
-  // Restore the last active tab from the URL hash, fall back to 'feed'.
-  const validTabs = new Set(['feed', 'config', 'log']);
-  const hashTab = location.hash.slice(1);
-  activateTab(validTabs.has(hashTab) ? hashTab : 'feed');
-}
-
-// ── Sport type <select> ───────────────────────────────────────────────────────
-
-function buildSportTypeSelect(selectedType = '') {
-  const sel = document.createElement('select');
-  sel.className = 'sport-type-select';
-
-  // Blank placeholder (always first, outside any optgroup)
-  const blank = document.createElement('option');
-  blank.value = '';
-  blank.textContent = t('table.sportType.placeholder');
-  if (!selectedType) blank.selected = true;
-  sel.appendChild(blank);
-
-  let found = !selectedType;
-
-  // Prefer the grouped format when category data is available
-  const hasCats = Object.keys(sportCategories).length > 0;
-  const cats = hasCats ? sportCategories : { '': sportTypes };
-
-  for (const [cat, sports] of Object.entries(cats)) {
-    if (!sports.length) continue;
-
-    let container;
-    if (hasCats) {
-      container = document.createElement('optgroup');
-      const catLabel = t(`category.${cat}`);
-      container.label = (catLabel !== `category.${cat}`) ? catLabel : cat;
-
-      // Selectable category option — selecting it applies the rule to all members
-      const catOpt = document.createElement('option');
-      catOpt.value = cat;
-      catOpt.className = 'opt-category';
-      const allLabel = t('table.category.all');
-      catOpt.textContent = allLabel !== 'table.category.all'
-        ? allLabel.replace('{cat}', container.label)
-        : `★ ${container.label}`;
-      if (cat === selectedType) { catOpt.selected = true; found = true; }
-      container.appendChild(catOpt);
-    } else {
-      container = sel;
-    }
-
-    for (const type of sports) {
-      const opt = document.createElement('option');
-      opt.value = type;
-      opt.textContent = formatSportLabel(type);
-      if (type === selectedType) { opt.selected = true; found = true; }
-      container.appendChild(opt);
-    }
-
-    if (hasCats) sel.appendChild(container);
-  }
-
-  // Fallback: a saved value that is no longer in the active lists
-  if (!found && selectedType) {
-    const opt = document.createElement('option');
-    opt.value = selectedType;
-    opt.textContent = `${formatSportLabel(selectedType)} ↑`;
-    opt.selected = true;
-    // Insert right after the blank option; children[1] may be an <optgroup>
-    // when categories are loaded, but insertBefore still works correctly.
-    sel.insertBefore(opt, sel.children[1] || null);
-  }
-
-  return sel;
-}
-
-// ── Rules table helpers ───────────────────────────────────────────────────────
-
-function makeRemoveBtn(onClick) {
-  const btn = document.createElement('button');
-  btn.type = 'button';
-  btn.className = 'btn-remove';
-  btn.title = t('table.removeBtn.title');
-  btn.textContent = '×';
-  btn.addEventListener('click', onClick);
-  return btn;
-}
-
-function addRuleRow(tbody, sportType = '', value = '') {
-  const tr = document.createElement('tr');
-
-  const tdType = document.createElement('td');
-  tdType.appendChild(buildSportTypeSelect(sportType));
-
-  const tdVal = document.createElement('td');
-  const numInput = document.createElement('input');
-  numInput.type = 'number';
-  numInput.value = value !== '' ? value : '';
-  numInput.min = '0';
-  numInput.step = '0.1';
-  numInput.placeholder = '—';
-  numInput.style.maxWidth = '90px';
-  tdVal.appendChild(numInput);
-
-  const tdRemove = document.createElement('td');
-  tdRemove.appendChild(makeRemoveBtn(() => tr.remove()));
-
-  tr.appendChild(tdType);
-  tr.appendChild(tdVal);
-  tr.appendChild(tdRemove);
-  tbody.appendChild(tr);
-}
-
-/**
- * Read all rows from a rules table.
- * Returns { sport: {Run: 5, …}, category: {FootSports: 8, …} }
- * A row is "category" when its select value is one of the five CATEGORY_NAME_SET names.
- */
-function getRulesFromTable(tbody) {
-  const sport    = {};
-  const category = {};
-  tbody.querySelectorAll('tr').forEach(tr => {
-    const sel   = tr.querySelector('select');
-    const numIn = tr.querySelector('input[type="number"]');
-    if (!sel || !numIn) return;
-    const key = sel.value.trim();
-    const raw = numIn.value.trim();
-    if (key && raw !== '') {
-      const val = parseFloat(raw);
-      if (!isNaN(val)) {
-        if (CATEGORY_NAME_SET.has(key)) category[key] = val;
-        else sport[key] = val;
-      }
-    }
-  });
-  return { sport, category };
-}
-
-/**
- * Populate a rules table from two dicts: per-sport rules and per-category rules.
- * Both are loaded into the same table; the select in each row distinguishes them.
- */
-function populateRulesTable(tbody, sportRules, categoryRules) {
-  tbody.innerHTML = '';
-  for (const [type, val] of Object.entries(sportRules || {})) {
-    addRuleRow(tbody, type, val);
-  }
-  for (const [cat, val] of Object.entries(categoryRules || {})) {
-    addRuleRow(tbody, cat, val);
-  }
-}
-
-// ── Athlete management list helpers ──────────────────────────────────────────
-// Each athlete row has: name/id display, Allow/Deny switch, remove button.
-// The switch state determines which list (allowAthletes / ignoreAthletes) the ID goes into.
-
-/**
- * Add an athlete to the unified management list.
- * @param {HTMLElement} listEl - the <ul> element
- * @param {string} id         - athlete ID
- * @param {string} name       - display name (from cache or search)
- * @param {string} mode       - 'allow' | 'deny' (default 'deny')
- */
-function addAthleteManagedRow(listEl, id = '', name = '', mode = 'deny', avatarUrl = '') {
-  const li = document.createElement('li');
-  li.className = 'athlete-manage-row';
-  li.dataset.athleteId = id;
-
-  const displayName = name || (id ? (athleteLabels[id] || id) : '');
-  const resolvedAvatar = avatarUrl || (id ? (athleteAvatars[id] || '') : '');
-
-  const avatar = document.createElement('span');
-  avatar.className = 'athlete-avatar';
-  if (resolvedAvatar) {
-    const img = document.createElement('img');
-    img.src = resolvedAvatar;
-    img.alt = displayName;
-    img.loading = 'lazy';
-    img.onerror = () => {
-      img.remove();
-      avatar.textContent = displayName ? displayName[0].toUpperCase() : '?';
-    };
-    avatar.appendChild(img);
-  } else {
-    avatar.textContent = displayName ? displayName[0].toUpperCase() : '?';
-  }
-
-  const info = document.createElement('span');
-  info.className = 'athlete-info';
-  const nameSpan = document.createElement('strong');
-  nameSpan.className = 'athlete-info-name';
-  nameSpan.textContent = displayName || id;
-  const idSpan = document.createElement('small');
-  idSpan.className = 'athlete-info-id';
-  idSpan.textContent = `ID: ${id}`;
-  info.appendChild(nameSpan);
-  info.appendChild(idSpan);
-
-  // Allow / Deny switch
-  const switchLabel = document.createElement('label');
-  switchLabel.className = 'athlete-switch';
-
-  const allowBtn = document.createElement('button');
-  allowBtn.type = 'button';
-  allowBtn.className = 'athlete-switch-btn athlete-switch-allow' + (mode === 'allow' ? ' active' : '');
-  allowBtn.textContent = t('config.athletes.allow');
-
-  const denyBtn = document.createElement('button');
-  denyBtn.type = 'button';
-  denyBtn.className = 'athlete-switch-btn athlete-switch-deny' + (mode === 'deny' ? ' active' : '');
-  denyBtn.textContent = t('config.athletes.deny');
-
-  allowBtn.addEventListener('click', () => {
-    allowBtn.classList.add('active');
-    denyBtn.classList.remove('active');
-    li.dataset.mode = 'allow';
-  });
-  denyBtn.addEventListener('click', () => {
-    denyBtn.classList.add('active');
-    allowBtn.classList.remove('active');
-    li.dataset.mode = 'deny';
-  });
-
-  li.dataset.mode = mode;
-  switchLabel.appendChild(allowBtn);
-  switchLabel.appendChild(denyBtn);
-
-  li.appendChild(avatar);
-  li.appendChild(info);
-  li.appendChild(switchLabel);
-  li.appendChild(makeRemoveBtn(() => li.remove()));
-  listEl.appendChild(li);
-  return li;
-}
-
-/**
- * Get the allow/deny lists from the athlete management list.
- * Returns { allowAthletes: string[], ignoreAthletes: string[] }
- */
-function getAthleteLists(listEl) {
-  const allowAthletes = [];
-  const ignoreAthletes = [];
-  listEl.querySelectorAll('.athlete-manage-row').forEach(li => {
-    const id = li.dataset.athleteId;
-    if (!id) return;
-    if (li.dataset.mode === 'allow') {
-      allowAthletes.push(id);
-    } else {
-      ignoreAthletes.push(id);
-    }
-  });
-  return { allowAthletes, ignoreAthletes };
-}
-
-async function autoLookupMissingNames(listEl) {
-  // No-op for the new managed list (names come from search); kept for compatibility
-  // with btn-load-all-names which re-fetches all labels from Strava.
-}
-
-// ── Athlete search modal ──────────────────────────────────────────────────────
-
-let _athleteSearchDebounceTimer = null;
-
-function openAthleteSearchModal() {
-  const modal = $('athlete-search-modal');
-  if (!modal) return;
-  modal.hidden = false;
-  const input = $('athlete-search-input');
-  if (input) { input.value = ''; input.focus(); }
-  const results = $('athlete-search-results');
-  if (results) results.innerHTML = `<p class="hint">${t('config.athletes.search.hint')}</p>`;
-}
-
-function closeAthleteSearchModal() {
-  const modal = $('athlete-search-modal');
-  if (modal) modal.hidden = true;
-  clearTimeout(_athleteSearchDebounceTimer);
-}
-
-async function performAthleteSearch(query) {
-  const results = $('athlete-search-results');
-  if (!results) return;
-  if (!query || query.length < 2) {
-    results.innerHTML = `<p class="hint">${t('config.athletes.search.hint')}</p>`;
-    return;
-  }
-  results.innerHTML = `<p class="hint">${t('config.athletes.search.searching')}</p>`;
-  try {
-    const athletes = await fetchJson(`/api/athletes/search?q=${encodeURIComponent(query)}`);
-    if (!athletes.length) {
-      results.innerHTML = `<p class="hint">${t('config.athletes.search.noResults')}</p>`;
-      return;
-    }
-    results.innerHTML = '';
-    athletes.forEach(athlete => {
-      const item = document.createElement('div');
-      item.className = 'athlete-search-item';
-
-      const avatar = document.createElement('span');
-      avatar.className = 'athlete-avatar';
-      if (athlete.avatarUrl) {
-        const img = document.createElement('img');
-        img.src = athlete.avatarUrl;
-        img.alt = athlete.name;
-        img.onerror = () => { avatar.textContent = athlete.name[0]?.toUpperCase() || '?'; };
-        avatar.appendChild(img);
-      } else {
-        avatar.textContent = athlete.name[0]?.toUpperCase() || '?';
-      }
-
-      const info = document.createElement('span');
-      info.className = 'athlete-search-item-info';
-      const nameEl = document.createElement('strong');
-      nameEl.textContent = athlete.name;
-      const idEl = document.createElement('small');
-      idEl.textContent = `ID: ${athlete.id}`;
-      info.appendChild(nameEl);
-      info.appendChild(idEl);
-
-      item.appendChild(avatar);
-      item.appendChild(info);
-      item.addEventListener('click', () => {
-        athleteLabels[athlete.id] = athlete.name;
-        if (athlete.avatarUrl) athleteAvatars[athlete.id] = athlete.avatarUrl;
-        addAthleteManagedRow($('athlete-manage-list'), athlete.id, athlete.name, 'deny', athlete.avatarUrl || '');
-        closeAthleteSearchModal();
-      });
-      results.appendChild(item);
-    });
-  } catch {
-    results.innerHTML = `<p class="hint feed-error">${t('config.athletes.search.error')}</p>`;
-  }
-}
-
-function initAthleteSearchModal() {
-  const closeBtn = $('btn-close-athlete-modal');
-  if (closeBtn) closeBtn.addEventListener('click', closeAthleteSearchModal);
-
-  const overlay = $('athlete-search-modal');
-  if (overlay) {
-    overlay.addEventListener('click', e => {
-      if (e.target === overlay) closeAthleteSearchModal();
-    });
-  }
-
-  const input = $('athlete-search-input');
-  if (input) {
-    input.addEventListener('input', e => {
-      clearTimeout(_athleteSearchDebounceTimer);
-      const q = e.target.value.trim();
-      _athleteSearchDebounceTimer = setTimeout(() => performAthleteSearch(q), 350);
-    });
-  }
-
-  document.addEventListener('keydown', e => {
-    if (e.key === 'Escape') closeAthleteSearchModal();
-  });
-}
-
-// ── Activity names list helpers ───────────────────────────────────────────────
-
-function addListItem(listEl, value = '', placeholder = '') {
-  const li = document.createElement('li');
-  const input = document.createElement('input');
-  input.type = 'text';
-  input.value = value;
-  input.placeholder = placeholder;
-  li.appendChild(input);
-  li.appendChild(makeRemoveBtn(() => li.remove()));
-  listEl.appendChild(li);
-  if (!value) input.focus();
-}
-
-function getListValues(listEl) {
-  return Array.from(listEl.querySelectorAll('input'))
-    .map(i => i.value.trim())
-    .filter(Boolean);
-}
-
-// ── Config tab ────────────────────────────────────────────────────────────────
-
-async function loadConfig() {
-  const [cfg, labels, avatars] = await Promise.all([
-    fetchJson('/api/config'),
-    fetchJson('/api/athlete-labels').catch(() => ({})),
-    fetchJson('/api/athlete-avatars').catch(() => ({})),
-  ]);
-  athleteLabels = labels;
-  athleteAvatars = avatars;
-
-  $('cookieInput').value    = cfg.stravaSessionCookie || '';
-  $('athleteIdInput').value = cfg.athleteId || '';
-
-  // Catch-all thresholds
-  $('catchAllDist').value = cfg.catchAll?.minDistance ?? 0;
-  $('catchAllTime').value = cfg.catchAll?.minTime ?? 0;
-
-  // Unified athlete management list: merge ignoreAthletes + allowAthletes
-  const manageList = $('athlete-manage-list');
-  manageList.innerHTML = '';
-  for (const id of (cfg.ignoreAthletes || [])) {
-    addAthleteManagedRow(manageList, id, athleteLabels[id] || '', 'deny', athleteAvatars[id] || '');
-  }
-  for (const id of (cfg.allowAthletes || [])) {
-    addAthleteManagedRow(manageList, id, athleteLabels[id] || '', 'allow', athleteAvatars[id] || '');
-  }
-
-  populateRulesTable($('tbody-distance'), cfg.kudoRules?.minDistance, cfg.kudoRules?.categoryMinDistance);
-  populateRulesTable($('tbody-time'),     cfg.kudoRules?.minTime,     cfg.kudoRules?.categoryMinTime);
-
-  const namesList = $('activity-names-list');
-  namesList.innerHTML = '';
-  for (const n of (cfg.kudoRules?.activityNames || [])) {
-    addListItem(namesList, n, t('config.activityNames.placeholder'));
-  }
-}
-
-async function saveConfig() {
-  try {
-    const { allowAthletes, ignoreAthletes } = getAthleteLists($('athlete-manage-list'));
-    const cfg = {
-      stravaSessionCookie: $('cookieInput').value.trim(),
-      athleteId:           $('athleteIdInput').value.trim(),
-      ignoreAthletes,
-      allowAthletes,
-      catchAll: {
-        minDistance: parseFloat($('catchAllDist').value) || 0,
-        minTime:     parseFloat($('catchAllTime').value) || 0,
-      },
-      kudoRules: (() => {
-        const dist = getRulesFromTable($('tbody-distance'));
-        const time = getRulesFromTable($('tbody-time'));
-        return {
-          minDistance:         dist.sport,
-          minTime:             time.sport,
-          categoryMinDistance: dist.category,
-          categoryMinTime:     time.category,
-          activityNames:       getListValues($('activity-names-list')),
-        };
-      })(),
-    };
-    if (!cfg.kudoRules.activityNames.length) delete cfg.kudoRules.activityNames;
-    await putJson('/api/config', cfg);
-  } catch (err) {
-    toast(err.message, 'error');
-  }
-}
-
-function initConfigTab() {
-  // Prevent accidental submit via Enter key (no submit button present).
-  $('form-config').addEventListener('submit', e => e.preventDefault());
-
-  $('btn-add-athlete').addEventListener('click', openAthleteSearchModal);
-  $('btn-add-distance').addEventListener('click', () => { addRuleRow($('tbody-distance')); debouncedSaveConfig(); });
-  $('btn-add-time').addEventListener('click', () => { addRuleRow($('tbody-time')); debouncedSaveConfig(); });
-  $('btn-add-name').addEventListener('click', () => {
-    addListItem($('activity-names-list'), '', t('config.activityNames.placeholder'));
-    debouncedSaveConfig();
-  });
-
-  // "Load all names" — unchanged, only refreshes UI labels, no config data
-  $('btn-load-all-names')?.addEventListener('click', async () => {
-    try {
-      const labels = await fetchJson('/api/athlete-labels');
-      athleteLabels = { ...athleteLabels, ...labels };
-      $('athlete-manage-list').querySelectorAll('.athlete-manage-row').forEach(li => {
-        const id = li.dataset.athleteId;
-        if (id && labels[id]) {
-          const nameEl = li.querySelector('.athlete-info-name');
-          if (nameEl) nameEl.textContent = labels[id];
-        }
-      });
-    } catch {
-      toast(t('toast.config.loadError', { msg: '' }), 'error');
-    }
-  });
-
-  // Auto-save: native form inputs (text, number) and selects
-  $('form-config').addEventListener('input',  debouncedSaveConfig);
-  $('form-config').addEventListener('change', debouncedSaveConfig);
-
-  // Auto-save: Allow/Deny toggle buttons (custom elements, not form inputs)
-  $('athlete-manage-list').addEventListener('click', e => {
-    if (e.target.matches('.athlete-switch-btn')) debouncedSaveConfig();
-  });
-
-  // Auto-save: dynamic list mutations (row add / remove via remove buttons)
-  const observeList = el =>
-    new MutationObserver(debouncedSaveConfig).observe(el, { childList: true });
-  observeList($('athlete-manage-list'));
-  observeList($('tbody-distance'));
-  observeList($('tbody-time'));
-  observeList($('activity-names-list'));
-}
-
-// ── Settings tab ──────────────────────────────────────────────────────────────
-
-// ── Schedule matrix helpers ───────────────────────────────────────────────────
-
-/** Render the 7×24 schedule matrix into #schedule-matrix with drag-to-paint support.
- *  On narrow screens (≤768px) the matrix is transposed: 7 days as columns, 24 hours
- *  as rows — no horizontal scrolling, natural vertical scroll. All data-row/data-col
- *  attributes remain unchanged (day=row, hour=col), so the paint engine and serialiser
- *  work identically in both orientations. */
-function renderScheduleMatrix(matrix) {
-  const container = $('schedule-matrix');
-  if (!container) return;
-  container.innerHTML = '';
-
-  const days = t('settings.schedule.days') || ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'];
-  // Display order: 1, 2, …, 23, 0  (midnight at the end of the day, not the beginning)
-  const hours = Array.from({ length: 24 }, (_, i) => (i + 1) % 24);
-
-  // Switch to portrait/transposed only when there isn't enough room for the horizontal
-  // layout. Measure the actual container width instead of using a fixed breakpoint so
-  // wider devices (e.g. iPad Mini at 768 px) stay in landscape.
-  // Minimum width: corner 36px + 24 slots×24px + 24 gaps×2px = 660px.
-  const LANDSCAPE_MIN_WIDTH = 36 + 24 * 24 + 24 * 2; // 660px
-  const wrap = $('schedule-matrix-wrap');
-  // offsetWidth is 0 when the tab is hidden — fall back to viewport minus card padding.
-  const availableWidth = (wrap && wrap.offsetWidth > 0) ? wrap.offsetWidth : window.innerWidth - 88;
-  const portrait = availableWidth < LANDSCAPE_MIN_WIDTH;
-  container.classList.toggle('transposed', portrait);
-
-  // ── Shared cell factories (data attributes are orientation-independent) ────
-  function makeCorner() {
-    const el = document.createElement('div');
-    el.className = 'schedule-cell schedule-corner';
-    return el;
-  }
-
-  function makeHourLabel(h) {
-    const el = document.createElement('div');
-    el.className = 'schedule-cell schedule-hour-label';
-    // Portrait: zero-padded "01"…"23"/"00"; landscape: plain number
-    el.textContent = portrait ? String(h).padStart(2, '0') : h;
-    el.dataset.col = h;
-    el.title = `Toggle hour ${h} (all days)`;
-    el.addEventListener('click', () => toggleScheduleColumn(h));
-    return el;
-  }
-
-  function makeDayLabel(d) {
-    const el = document.createElement('div');
-    el.className = 'schedule-cell schedule-day-label';
-    el.textContent = days[d] ?? d;
-    el.dataset.row = d;
-    el.title = `Toggle ${days[d] ?? d} (all hours)`;
-    el.addEventListener('click', () => toggleScheduleRow(d));
-    return el;
-  }
-
-  function makeSlot(d, h) {
-    const el = document.createElement('div');
-    const allowed = matrix[d]?.[h] !== false; // undefined → allowed
-    el.className = 'schedule-cell schedule-slot' + (allowed ? ' allowed' : '');
-    el.dataset.row = d;
-    el.dataset.col = h;
-    return el;
-  }
-
-  if (!portrait) {
-    // ── Landscape: hours across top, days down the left ──────────────────────
-    const headerRow = document.createElement('div');
-    headerRow.className = 'schedule-row schedule-header';
-    headerRow.appendChild(makeCorner());
-    for (const h of hours) headerRow.appendChild(makeHourLabel(h));
-    container.appendChild(headerRow);
-
-    for (let d = 0; d < 7; d++) {
-      const row = document.createElement('div');
-      row.className = 'schedule-row';
-      row.appendChild(makeDayLabel(d));
-      for (const h of hours) row.appendChild(makeSlot(d, h));
-      container.appendChild(row);
-    }
-  } else {
-    // ── Portrait: days across top, hours down the left ────────────────────────
-    // The paint engine reads data-row (day) and data-col (hour) — unchanged.
-    const headerRow = document.createElement('div');
-    headerRow.className = 'schedule-row schedule-header';
-    headerRow.appendChild(makeCorner());
-    for (let d = 0; d < 7; d++) headerRow.appendChild(makeDayLabel(d));
-    container.appendChild(headerRow);
-
-    for (const h of hours) {
-      const row = document.createElement('div');
-      row.className = 'schedule-row';
-      row.appendChild(makeHourLabel(h));
-      for (let d = 0; d < 7; d++) row.appendChild(makeSlot(d, h));
-      container.appendChild(row);
-    }
-  }
-
-  // ── Rectangle-select drag (mouse + touch) ────────────────────────────────
-  // State is local to this render call; replaced on every re-render.
-  let painting       = false;
-  let paintValue     = false;   // the value we're painting (true = allow, false = block)
-  let paintStart     = null;    // { row, col } of the cell where the drag started
-  let dragSnapshot   = null;    // bool[7][24] — matrix state at the moment drag began
-
-  // O(1) cell lookup built during the render above
-  const cellMap = {};
-  container.querySelectorAll('.schedule-slot').forEach(c => {
-    cellMap[`${c.dataset.row},${c.dataset.col}`] = c;
-  });
-
-  function slotFromTarget(el) {
-    return el && el.classList && el.classList.contains('schedule-slot') ? el : null;
-  }
-
-  function snapshotNow() {
-    const snap = [];
-    for (let d = 0; d < 7; d++) {
-      const row = [];
-      for (let h = 0; h < 24; h++) {
-        row.push(cellMap[`${d},${h}`].classList.contains('allowed'));
-      }
-      snap.push(row);
-    }
-    return snap;
-  }
-
-  // Restore from snapshot, then paint all cells in the rectangle start→(endRow,endCol).
-  function applyRect(endRow, endCol) {
-    const r0 = Math.min(paintStart.row, endRow);
-    const r1 = Math.max(paintStart.row, endRow);
-    const c0 = Math.min(paintStart.col, endCol);
-    const c1 = Math.max(paintStart.col, endCol);
-    for (let d = 0; d < 7; d++) {
-      for (let h = 0; h < 24; h++) {
-        const inRect = d >= r0 && d <= r1 && h >= c0 && h <= c1;
-        cellMap[`${d},${h}`].classList.toggle('allowed', inRect ? paintValue : dragSnapshot[d][h]);
-      }
-    }
-  }
-
-  function startDrag(slot) {
-    const row = parseInt(slot.dataset.row, 10);
-    const col = parseInt(slot.dataset.col, 10);
-    dragSnapshot = snapshotNow();
-    paintValue   = !slot.classList.contains('allowed');
-    paintStart   = { row, col };
-    painting     = true;
-    container.classList.add('painting');
-    applyRect(row, col);
-  }
-
-  function moveDrag(slot) {
-    if (!painting || !slot) return;
-    applyRect(parseInt(slot.dataset.row, 10), parseInt(slot.dataset.col, 10));
-  }
-
-  function stopDrag() {
-    painting     = false;
-    paintStart   = null;
-    dragSnapshot = null;
-    container.classList.remove('painting');
-  }
-
-  // Mouse
-  container.addEventListener('mousedown', e => {
-    const slot = slotFromTarget(e.target);
-    if (!slot) return;
-    e.preventDefault();
-    startDrag(slot);
-  });
-  container.addEventListener('mouseover', e => moveDrag(slotFromTarget(e.target)));
-  document.addEventListener('mouseup', stopDrag);
-
-  // Touch
-  container.addEventListener('touchstart', e => {
-    const slot = slotFromTarget(e.target);
-    if (!slot) return;
-    e.preventDefault();
-    startDrag(slot);
-  }, { passive: false });
-  container.addEventListener('touchmove', e => {
-    if (!painting) return;
-    e.preventDefault();
-    const t = e.touches[0];
-    moveDrag(slotFromTarget(document.elementFromPoint(t.clientX, t.clientY)));
-  }, { passive: false });
-  container.addEventListener('touchend', stopDrag);
-  container.addEventListener('touchcancel', stopDrag);
-}
-
-function toggleScheduleRow(rowIdx) {
-  const slots = document.querySelectorAll(`#schedule-matrix .schedule-slot[data-row="${rowIdx}"]`);
-  const anyOff = Array.from(slots).some(c => !c.classList.contains('allowed'));
-  slots.forEach(c => c.classList.toggle('allowed', anyOff));
-}
-
-function toggleScheduleColumn(colIdx) {
-  const slots = document.querySelectorAll(`#schedule-matrix .schedule-slot[data-col="${colIdx}"]`);
-  const anyOff = Array.from(slots).some(c => !c.classList.contains('allowed'));
-  slots.forEach(c => c.classList.toggle('allowed', anyOff));
-}
-
-function getScheduleMatrix() {
-  const matrix = [];
-  for (let d = 0; d < 7; d++) {
-    const row = [];
-    for (let h = 0; h < 24; h++) {
-      const cell = document.querySelector(`#schedule-matrix .schedule-slot[data-row="${d}"][data-col="${h}"]`);
-      row.push(cell ? cell.classList.contains('allowed') : true);
-    }
-    matrix.push(row);
-  }
-  return matrix;
-}
-
-function toggleScheduleMatrixEnabled(enabled) {
-  const wrap = $('schedule-matrix-wrap');
-  const tzGroup = $('timezone-group');
-  if (wrap) wrap.style.opacity = enabled ? '1' : '0.4';
-  if (wrap) wrap.style.pointerEvents = enabled ? '' : 'none';
-  if (tzGroup) tzGroup.style.opacity = enabled ? '1' : '0.4';
-}
-
-// ── Settings tab ──────────────────────────────────────────────────────────────
-
-async function loadSettings() {
-  const s = await fetchJson('/api/settings');
-  $('schedulerEnabled').checked     = s.schedulerEnabled;
-  $('intervalMinutes').value         = s.intervalMinutes ?? 60;
-  $('jitterMinutes').value           = s.jitterMinutes   ?? 15;
-  $('globalDryRun').checked          = s.dryRun;
-  $('minKudosDelaySeconds').value    = s.minKudosDelaySeconds ?? 3;
-  $('maxKudosDelaySeconds').value    = s.maxKudosDelaySeconds ?? 25;
-  $('shuffleOrder').checked          = s.shuffleOrder ?? true;
-  $('kudosScheduleEnabled').checked  = s.kudosScheduleEnabled ?? false;
-  $('timezone').value                = s.timezone ?? 'Europe/Berlin';
-  toggleIntervalVisibility(s.schedulerEnabled);
-  toggleScheduleMatrixEnabled(s.kudosScheduleEnabled ?? false);
-
-  // Render the schedule matrix (all-true by default)
-  const matrix = s.kudosScheduleMatrix || Array.from({ length: 7 }, () => Array(24).fill(true));
-  renderScheduleMatrix(matrix);
-}
-
-function toggleIntervalVisibility(enabled) {
-  const opacity = enabled ? '1' : '0.4';
-  $('interval-group').style.opacity = opacity;
-  $('jitter-group').style.opacity   = opacity;
-  $('intervalMinutes').disabled     = !enabled;
-  $('jitterMinutes').disabled       = !enabled;
-}
-
-async function saveSettings() {
-  try {
-    const data = {
-      schedulerEnabled:      $('schedulerEnabled').checked,
-      intervalMinutes:       Math.max(5, parseInt($('intervalMinutes').value) || 60),
-      jitterMinutes:         Math.max(0, parseFloat($('jitterMinutes').value) || 0),
-      dryRun:                $('globalDryRun').checked,
-      minKudosDelaySeconds:  Math.max(0, parseFloat($('minKudosDelaySeconds').value) || 0),
-      maxKudosDelaySeconds:  Math.max(0, parseFloat($('maxKudosDelaySeconds').value) || 0),
-      shuffleOrder:          $('shuffleOrder').checked,
-      kudosScheduleEnabled:  $('kudosScheduleEnabled').checked,
-      timezone:              $('timezone').value.trim() || 'Europe/Berlin',
-      kudosScheduleMatrix:   getScheduleMatrix(),
-    };
-    await putJson('/api/settings', data);
-    pollStatus();
-  } catch (err) {
-    toast(err.message, 'error');
-  }
-}
-
-function initSettingsTab() {
-  // Prevent accidental submit via Enter key (no submit button present).
-  $('form-settings').addEventListener('submit', e => e.preventDefault());
-
-  // UI side-effects for toggle changes (interval visibility, matrix dim)
-  $('schedulerEnabled').addEventListener('change', e =>
-    toggleIntervalVisibility(e.target.checked));
-  $('kudosScheduleEnabled').addEventListener('change', e =>
-    toggleScheduleMatrixEnabled(e.target.checked));
-
-  // Auto-save: native form inputs and checkboxes
-  $('form-settings').addEventListener('input',  debouncedSaveSettings);
-  $('form-settings').addEventListener('change', debouncedSaveSettings);
-
-  const wrap = $('schedule-matrix-wrap');
-  if (wrap) {
-    // Auto-save: schedule matrix drag-paint and click-toggles (div cells, not form inputs)
-    wrap.addEventListener('mouseup',  debouncedSaveSettings);
-    wrap.addEventListener('touchend', debouncedSaveSettings);
-
-    // Re-render matrix whenever the wrap changes size (viewport resize or tab becoming visible).
-    // getScheduleMatrix() captures current DOM state so unsaved edits are preserved.
-    new ResizeObserver(() => {
-      const mx = $('schedule-matrix');
-      if (mx && mx.children.length) renderScheduleMatrix(getScheduleMatrix());
-    }).observe(wrap);
-  }
-}
-
-// ── Status & log polling ──────────────────────────────────────────────────────
-
-async function pollStatus() {
-  try {
-    const s = await fetchJson('/api/status');
-    const badge = $('status-badge');
-    if (s.running) {
-      badge.className = 'badge badge-running';
-      badge.textContent = t('status.running');
-    } else if (s.lastRun?.success === false) {
-      badge.className = 'badge badge-error';
-      badge.textContent = t('status.error');
-    } else if (s.lastRun?.success === true) {
-      badge.className = 'badge badge-ok';
-      badge.textContent = s.lastRun.dry_run ? t('status.dryRunOk') : t('status.ok');
-    } else {
-      badge.className = 'badge badge-idle';
-      badge.textContent = t('status.ready');
-    }
-
-    // Keep the spinner visible until the run we triggered actually finishes.
-    // We compare finished_at rather than relying on s.running alone so that
-    // even very short runs (where the poller may miss the running:true window)
-    // are handled correctly.
-    const finishedStamp = s.lastRun?.finished_at ?? null;
-    if (runningButton) {
-      const completed = !s.running && finishedStamp && finishedStamp !== runStartStamp;
-      if (completed) {
-        setButtonLoading(runningButton, false);
-        runningButton = null;
-        runStartStamp = null;
-        $('btn-run').disabled = false;
-      } else {
-        // Run still in progress — keep spinner, keep button disabled.
-        $('btn-run').disabled = true;
-      }
-    } else {
-      // No locally-started run — mirror server state (e.g. a scheduled run).
-      $('btn-run').disabled = s.running;
-    }
-    currentLastRunStamp = finishedStamp;
-
-    if (s.lastRun) {
-      const lr = s.lastRun;
-      const successLabel = lr.success
-        ? (lr.dry_run ? t('run.dryRun') : t('run.success'))
-        : t('run.error');
-      $('val-last-run').textContent = `${successLabel}  ${formatRelative(lr.finished_at)}`;
-      $('val-last-run').style.color = lr.success ? '' : 'var(--error)';
-      const kudosCount = lr.dry_run ? lr.would_give : lr.given;
-      $('val-kudos').textContent = lr.dry_run
-        ? t('status.kudosSimulated', { n: kudosCount })
-        : t('status.kudosSent', { n: kudosCount });
-    } else {
-      $('val-last-run').textContent = t('status.noRun');
-      $('val-kudos').textContent    = '—';
-    }
-
-    if (s.schedulerEnabled && s.nextRunAt) {
-      $('val-next-run').textContent = formatRelative(s.nextRunAt);
-      $('val-interval').textContent = t('status.interval', {
-        m: s.intervalMinutes,
-        t: formatTime(s.nextRunAt),
-      });
-    } else {
-      $('val-next-run').textContent = t('status.disabled');
-      $('val-interval').textContent = t('status.schedulerOff');
-    }
-
-    // Update footer version
-    const versionEl = $('footer-version');
-    if (versionEl && s.version) versionEl.textContent = `Kudosy v${s.version}`;
-  } catch { /* ignore polling errors */ }
-}
-
-async function pollLog() {
-  try {
-    const text = await fetch('/api/log').then(r => r.text());
-    const el   = $('log-output');
-    const atBottom = el.scrollHeight - el.clientHeight <= el.scrollTop + 10;
-    el.textContent = text;
-    if (atBottom) el.scrollTop = el.scrollHeight;
-  } catch { /* ignore */ }
-  await pollStatus();
-}
-
-function startPolling() {
-  stopPolling();
-  pollLog();
-  pollTimer = setInterval(() => {
-    if ($('auto-refresh').checked) pollLog();
-    else pollStatus();
-  }, 3000);
-}
-
-function stopPolling() {
-  if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
-}
-
-// ── Feed tab ──────────────────────────────────────────────────────────────────
-
-/** Derive a single canonical state from a feed activity. */
-function activityState(act) {
-  if (act.has_kudoed) return 'kudoed';
-  if (act.give_kudos) return 'eligible';
-  return 'skipped';
-}
-
-/** Return true if act passes the current feedFilter. */
-function matchesFilter(act) {
-  const { status, text, sport } = feedFilter;
-  if (status !== 'all' && activityState(act) !== status) return false;
-  if (sport && act.sport_type !== sport) return false;
-  if (text) {
-    const q       = text.toLowerCase();
-    const name    = (act.activity_name || '').toLowerCase();
-    const athlete = (act.athlete_name  || '').toLowerCase();
-    if (!name.includes(q) && !athlete.includes(q)) return false;
-  }
-  return true;
-}
-
-async function loadFeed(refresh = false) {
-  const container   = $('feed-list');
-  const filters     = $('feed-filters');
-  const refreshBtn  = $('btn-refresh-feed');
-  if (!container) return;
-
-  // Show spinner while loading
-  container.innerHTML = `
-    <div class="feed-loading">
-      <span class="spinner spinner-lg"></span>
-      <span>${t('feed.loading')}</span>
-    </div>`;
-  if (filters) filters.hidden = true;
-
-  setButtonLoading(refreshBtn, true);
-
-  try {
-    const feedUrl = refresh ? '/api/feed?refresh=true' : '/api/feed';
-    const feedData = await fetchJson(feedUrl);
-    feedActivities = feedData.activities;
-    feedFetchedAt  = feedData.fetched_at ?? null;
-    feedLoaded = true;
-
-    // Populate sport-type dropdown with types present in this feed
-    const sportSel = $('feed-filter-sport');
-    if (sportSel) {
-      const sports = [...new Set(feedActivities.map(a => a.sport_type).filter(Boolean))].sort();
-      sportSel.innerHTML = `<option value="">${t('feed.filter.allSports')}</option>`;
-      sports.forEach(s => {
-        const opt = document.createElement('option');
-        opt.value = s;
-        opt.textContent = formatSportLabel(s);
-        if (s === feedFilter.sport) opt.selected = true;
-        sportSel.appendChild(opt);
-      });
-    }
-
-    if (filters) filters.hidden = false;
-    renderFeed();
-  } catch (err) {
-    feedLoaded = false;
-    const is401 = err.message && (
-      err.message.includes('AUTH_') ||
-      err.message.includes('401') ||
-      err.message.toLowerCase().includes('cookie')
-    );
-    container.innerHTML = is401
-      ? `<p class="hint feed-error">${t('feed.auth.error')}</p>`
-      : `<p class="hint feed-error">${t('feed.load.error', { msg: err.message })}</p>`;
-  } finally {
-    setButtonLoading(refreshBtn, false);
-  }
-}
-
-function updateFeedTimestamp() {
-  const el = $('feed-fetched-at');
-  if (!el) return;
-  el.textContent = feedFetchedAt ? t('feed.fetchedAt', { time: formatRelative(feedFetchedAt) }) : '';
-}
-
-function renderFeed() {
-  const container = $('feed-list');
-  if (!container) return;
-
-  updateFeedTimestamp();
-
-  const total    = feedActivities.length;
-  const filtered = feedActivities.filter(matchesFilter);
-
-  // Update count display
-  const countEl = $('feed-filter-count');
-  if (countEl) {
-    countEl.textContent = t('feed.filter.count', { n: filtered.length, total });
-  }
-
-  if (total === 0) {
-    container.innerHTML = `<p class="hint feed-empty">${t('feed.empty')}</p>`;
-    return;
-  }
-  if (filtered.length === 0) {
-    container.innerHTML = `<p class="hint feed-empty">${t('feed.filter.none')}</p>`;
-    return;
-  }
-
-  container.innerHTML = '';
-  filtered.forEach(act => {
-    const state = activityState(act);
-    const card  = document.createElement('div');
-    card.className = `feed-card feed-state-${state}`;
-    card.title = t('feed.kudo.openActivity');
-
-    const reasonKey   = `reason.${act.reason}`;
-    const reasonLabel = t(reasonKey) !== reasonKey ? t(reasonKey) : act.reason;
-    const decisionClass = act.give_kudos ? 'feed-decision-give' : 'feed-decision-skip';
-    const decisionText  = act.give_kudos
-      ? t('feed.decision.give')
-      : t('feed.decision.skip', { reason: reasonLabel });
-
-    const kudosBadge = act.has_kudoed
-      ? `<span class="feed-kudo-badge feed-kudo-done">${t('feed.kudo.done')}</span>`
-      : `<span class="feed-kudo-badge feed-kudo-pending">${t('feed.kudo.pending')}</span>`;
-
-    const displayStats = (act.stats && act.stats.display) ? act.stats.display : [];
-    const statsParts = displayStats
-      .map(s => {
-        const labelKey = `stat.${s.key}`;
-        const label = t(labelKey) !== labelKey ? t(labelKey) : s.label;
-        return `<span class="feed-stat"><strong>${label}:</strong> ${s.raw}</span>`;
-      })
-      .join('');
-    const statsHtml  = statsParts ? `<div class="feed-stats">${statsParts}</div>` : '';
-    const sportLabel = act.sport_type ? formatSportLabel(act.sport_type) : '—';
-
-    // Kudos button — only shown when kudos haven't been given yet
-    const kudosBtnHtml = !act.has_kudoed
-      ? `<button class="feed-kudo-btn" data-activity-id="${act.activity_id}">${t('feed.kudo.give')}</button>`
-      : '';
-
-    card.innerHTML = `
-      <div class="feed-card-header">
-        <span class="feed-sport">${sportLabel}</span>
-        ${kudosBadge}
-      </div>
-      <div class="feed-card-body">
-        <div class="feed-activity-name">${act.activity_name || t('feed.noName')}</div>
-        <div class="feed-athlete-name">${act.athlete_name}</div>
-        ${statsHtml}
-      </div>
-      <div class="feed-card-footer">
-        <span class="feed-decision ${decisionClass}">${decisionText}</span>
-        ${kudosBtnHtml}
-      </div>
-    `;
-
-    // Open activity on Strava when clicking anywhere on the card
-    const activityUrl = `https://www.strava.com/activities/${act.activity_id}`;
-    card.addEventListener('click', (e) => {
-      // Don't navigate when the kudos button was clicked
-      if (e.target.closest('.feed-kudo-btn')) return;
-      window.open(activityUrl, '_blank', 'noopener,noreferrer');
-    });
-
-    // Kudos button handler
-    const kudosBtn = card.querySelector('.feed-kudo-btn');
-    if (kudosBtn) {
-      kudosBtn.addEventListener('click', async (e) => {
-        e.stopPropagation();
-        kudosBtn.disabled = true;
-        kudosBtn.textContent = t('feed.kudo.giving');
-        try {
-          const res = await fetchJson(`/api/kudos/${act.activity_id}`, { method: 'POST' });
-          if (res.ok) {
-            // Keep in-memory activity in sync for future re-renders
-            act.has_kudoed = true;
-            act.give_kudos = false;
-            act.reason = 'already';
-
-            // Update card state class immediately
-            card.className = 'feed-card feed-state-kudoed';
-
-            // Update badge to "done" and remove button
-            const badge = card.querySelector('.feed-kudo-badge');
-            if (badge) {
-              badge.className = 'feed-kudo-badge feed-kudo-done';
-              badge.textContent = t('feed.kudo.done');
-            }
-
-            // Update decision label
-            const decisionEl = card.querySelector('.feed-decision');
-            if (decisionEl) {
-              decisionEl.className = 'feed-decision feed-decision-skip';
-              decisionEl.textContent = t('feed.decision.skip', { reason: t('reason.already') });
-            }
-
-            kudosBtn.remove();
-          } else {
-            kudosBtn.disabled = false;
-            kudosBtn.textContent = t('feed.kudo.give');
-          }
-        } catch {
-          kudosBtn.disabled = false;
-          kudosBtn.textContent = t('feed.kudo.give');
-        }
-      });
-    }
-
-    container.appendChild(card);
-  });
-}
-
-function initFeedTab() {
-  const btn = $('btn-refresh-feed');
-  if (btn) btn.addEventListener('click', () => loadFeed(true));
-
-  // Status filter buttons
-  const statusGroup = document.getElementById('feed-filter-status');
-  if (statusGroup) {
-    statusGroup.addEventListener('click', (e) => {
-      const target = e.target.closest('.feed-filter-btn');
-      if (!target) return;
-      statusGroup.querySelectorAll('.feed-filter-btn').forEach(b => b.classList.remove('active'));
-      target.classList.add('active');
-      feedFilter.status = target.dataset.status;
-      renderFeed();
-    });
-  }
-
-  // Live text search
-  const textInput = $('feed-filter-text');
-  if (textInput) {
-    textInput.addEventListener('input', () => {
-      feedFilter.text = textInput.value;
-      renderFeed();
-    });
-  }
-
-  // Sport type filter
-  const sportSel = $('feed-filter-sport');
-  if (sportSel) {
-    sportSel.addEventListener('change', () => {
-      feedFilter.sport = sportSel.value;
-      renderFeed();
-    });
-  }
-}
-
-// ── Run buttons ───────────────────────────────────────────────────────────────
-
-/**
- * Fire a run request and hand off spinner ownership to pollStatus().
- *
- * The spinner is shown immediately and is NOT cleared in the finally-block —
- * pollStatus() clears it once a new lastRun.finished_at appears (i.e. when
- * the background run actually completes).  On error (e.g. 409 already running)
- * the spinner is cleared right away since there is nothing to wait for.
- */
-async function startRun(btn, url) {
-  if (runningButton) return;          // double-click guard
-  if ($('globalDryRun')?.checked) toast(t('toast.dryRunHint'), 'info');
-  runningButton  = btn;
-  runStartStamp  = currentLastRunStamp;
-  setButtonLoading(btn, true);
-  $('btn-run').disabled = true;
-  try {
-    await fetchJson(url, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: '{}',
-    });
-    // Switch to the Log tab — this starts the 3-second poller which will
-    // eventually detect the new finished_at and clear the spinner.
-    document.querySelector('.tab[data-tab="log"]').click();
-  } catch (err) {
-    toast(err.message, 'error');
-    // No run was started — restore the button immediately.
-    setButtonLoading(btn, false);
-    runningButton = null;
-    $('btn-run').disabled = false;
-  }
-}
-
-function initRunButtons() {
-  const btnRun = $('btn-run');
-  btnRun.addEventListener('click', () => {
-    const url = $('globalDryRun')?.checked ? '/api/run?dryRun=1' : '/api/run';
-    startRun(btnRun, url);
-  });
-}
-
-// ── Password reveal ───────────────────────────────────────────────────────────
-
-function initRevealButtons() {
-  document.querySelectorAll('[data-reveal]').forEach(btn => {
-    btn.addEventListener('click', () => {
-      const input = $(btn.dataset.reveal);
-      if (!input) return;
-      const hidden = input.type === 'password';
-      input.type = hidden ? 'text' : 'password';
-      btn.textContent = hidden ? '🙈' : '👁';
-    });
-  });
-}
-
-// ── Init ──────────────────────────────────────────────────────────────────────
-
-async function init() {
-  try {
-    [sportTypes, sportCategories] = await Promise.all([
-      fetchJson('/api/sport-types'),
-      fetchJson('/api/sport-categories'),
-    ]);
-  } catch {
-    sportTypes      = [];
-    sportCategories = {};
-  }
-
-  // Apply static translations for the initial language
-  applyStaticTranslations();
-
-  initLangSelect();
-  initTabs();
-  initConfigTab();
-  initSettingsTab();
-  initFeedTab();
-  initRunButtons();
-  initRevealButtons();
-  initAthleteSearchModal();
-
-  await Promise.allSettled([
-    loadConfig().catch(err => toast(t('toast.config.loadError', { msg: err.message }), 'error')),
-    loadSettings().catch(err => toast(t('toast.settings.loadError', { msg: err.message }), 'error')),
-  ]);
-  _autoSaveEnabled = true; // Enable auto-save only after initial data is fully loaded
-
-  await pollStatus();
-  setInterval(pollStatus, 10000);
-}
-
-init().catch(err => console.error('[init]', err));
diff --git a/src/kudosy/static/athletes.js b/src/kudosy/static/athletes.js
new file mode 100644
index 0000000..a54aa52
--- /dev/null
+++ b/src/kudosy/static/athletes.js
@@ -0,0 +1,215 @@
+// ── Kudosy UI — athletes.js ──────────────────────────────────────────────────
+// Athlete managed-list rows and the athlete-search modal.
+
+import { $, toast, makeRemoveBtn } from './dom.js';
+import { fetchJson } from './api.js';
+import { t } from './i18n.js';
+import { state } from './state.js';
+
+// ── Athlete managed-list helpers ─────────────────────────────────────────────
+// Each athlete row has: avatar, name/id display, Allow/Deny switch, remove btn.
+// The switch state determines which list (allowAthletes / ignoreAthletes) the ID
+// goes into when the config is saved.
+
+/**
+ * Add an athlete to the unified management list.
+ * @param {HTMLElement} listEl  - the <ul> element
+ * @param {string}      id      - athlete ID
+ * @param {string}      name    - display name (from cache or search)
+ * @param {string}      mode    - 'allow' | 'deny' (default 'deny')
+ * @param {string}      avatarUrl
+ */
+export function addAthleteManagedRow(listEl, id = '', name = '', mode = 'deny', avatarUrl = '') {
+  const li = document.createElement('li');
+  li.className = 'athlete-manage-row';
+  li.dataset.athleteId = id;
+
+  const displayName    = name || (id ? (state.athleteLabels[id] || id) : '');
+  const resolvedAvatar = avatarUrl || (id ? (state.athleteAvatars[id] || '') : '');
+
+  const avatar = document.createElement('span');
+  avatar.className = 'athlete-avatar';
+  if (resolvedAvatar) {
+    const img = document.createElement('img');
+    img.src     = resolvedAvatar;
+    img.alt     = displayName;
+    img.loading = 'lazy';
+    img.onerror = () => {
+      img.remove();
+      avatar.textContent = displayName ? displayName[0].toUpperCase() : '?';
+    };
+    avatar.appendChild(img);
+  } else {
+    avatar.textContent = displayName ? displayName[0].toUpperCase() : '?';
+  }
+
+  const info     = document.createElement('span');
+  info.className = 'athlete-info';
+  const nameSpan = document.createElement('strong');
+  nameSpan.className   = 'athlete-info-name';
+  nameSpan.textContent = displayName || id;
+  const idSpan   = document.createElement('small');
+  idSpan.className   = 'athlete-info-id';
+  idSpan.textContent = `ID: ${id}`;
+  info.appendChild(nameSpan);
+  info.appendChild(idSpan);
+
+  // Allow / Deny switch
+  const switchLabel = document.createElement('label');
+  switchLabel.className = 'athlete-switch';
+
+  const allowBtn = document.createElement('button');
+  allowBtn.type      = 'button';
+  allowBtn.className = 'athlete-switch-btn athlete-switch-allow' + (mode === 'allow' ? ' active' : '');
+  allowBtn.textContent = t('config.athletes.allow');
+
+  const denyBtn = document.createElement('button');
+  denyBtn.type      = 'button';
+  denyBtn.className = 'athlete-switch-btn athlete-switch-deny' + (mode === 'deny' ? ' active' : '');
+  denyBtn.textContent = t('config.athletes.deny');
+
+  allowBtn.addEventListener('click', () => {
+    allowBtn.classList.add('active');
+    denyBtn.classList.remove('active');
+    li.dataset.mode = 'allow';
+  });
+  denyBtn.addEventListener('click', () => {
+    denyBtn.classList.add('active');
+    allowBtn.classList.remove('active');
+    li.dataset.mode = 'deny';
+  });
+
+  li.dataset.mode = mode;
+  switchLabel.appendChild(allowBtn);
+  switchLabel.appendChild(denyBtn);
+
+  li.appendChild(avatar);
+  li.appendChild(info);
+  li.appendChild(switchLabel);
+  li.appendChild(makeRemoveBtn(() => li.remove()));
+  listEl.appendChild(li);
+  return li;
+}
+
+/**
+ * Read the allow/deny lists from the athlete management list element.
+ * @returns {{ allowAthletes: string[], ignoreAthletes: string[] }}
+ */
+export function getAthleteLists(listEl) {
+  const allowAthletes   = [];
+  const ignoreAthletes  = [];
+  listEl.querySelectorAll('.athlete-manage-row').forEach(li => {
+    const id = li.dataset.athleteId;
+    if (!id) return;
+    if (li.dataset.mode === 'allow') allowAthletes.push(id);
+    else ignoreAthletes.push(id);
+  });
+  return { allowAthletes, ignoreAthletes };
+}
+
+// ── Athlete search modal ──────────────────────────────────────────────────────
+
+let _athleteSearchDebounceTimer = null;
+
+export function openAthleteSearchModal() {
+  const modal = $('athlete-search-modal');
+  if (!modal) return;
+  modal.hidden = false;
+  const input = $('athlete-search-input');
+  if (input) { input.value = ''; input.focus(); }
+  const results = $('athlete-search-results');
+  if (results) results.innerHTML = `<p class="hint">${t('config.athletes.search.hint')}</p>`;
+}
+
+export function closeAthleteSearchModal() {
+  const modal = $('athlete-search-modal');
+  if (modal) modal.hidden = true;
+  clearTimeout(_athleteSearchDebounceTimer);
+}
+
+async function performAthleteSearch(query) {
+  const results = $('athlete-search-results');
+  if (!results) return;
+  if (!query || query.length < 2) {
+    results.innerHTML = `<p class="hint">${t('config.athletes.search.hint')}</p>`;
+    return;
+  }
+  results.innerHTML = `<p class="hint">${t('config.athletes.search.searching')}</p>`;
+  try {
+    const athletes = await fetchJson(`/api/athletes/search?q=${encodeURIComponent(query)}`);
+    if (!athletes.length) {
+      results.innerHTML = `<p class="hint">${t('config.athletes.search.noResults')}</p>`;
+      return;
+    }
+    results.innerHTML = '';
+    athletes.forEach(athlete => {
+      const item = document.createElement('div');
+      item.className = 'athlete-search-item';
+
+      const avatar = document.createElement('span');
+      avatar.className = 'athlete-avatar';
+      if (athlete.avatarUrl) {
+        const img = document.createElement('img');
+        img.src     = athlete.avatarUrl;
+        img.alt     = athlete.name;
+        img.onerror = () => { avatar.textContent = athlete.name[0]?.toUpperCase() || '?'; };
+        avatar.appendChild(img);
+      } else {
+        avatar.textContent = athlete.name[0]?.toUpperCase() || '?';
+      }
+
+      const info   = document.createElement('span');
+      info.className = 'athlete-search-item-info';
+      const nameEl = document.createElement('strong');
+      nameEl.textContent = athlete.name;
+      const idEl   = document.createElement('small');
+      idEl.textContent = `ID: ${athlete.id}`;
+      info.appendChild(nameEl);
+      info.appendChild(idEl);
+
+      item.appendChild(avatar);
+      item.appendChild(info);
+      item.addEventListener('click', () => {
+        // Cache locally for this session
+        state.athleteLabels[athlete.id]  = athlete.name;
+        if (athlete.avatarUrl) state.athleteAvatars[athlete.id] = athlete.avatarUrl;
+        addAthleteManagedRow(
+          $('athlete-manage-list'),
+          athlete.id,
+          athlete.name,
+          'deny',
+          athlete.avatarUrl || '',
+        );
+        closeAthleteSearchModal();
+      });
+      results.appendChild(item);
+    });
+  } catch {
+    results.innerHTML = `<p class="hint feed-error">${t('config.athletes.search.error')}</p>`;
+  }
+}
+
+export function initAthleteSearchModal() {
+  const closeBtn = $('btn-close-athlete-modal');
+  if (closeBtn) closeBtn.addEventListener('click', closeAthleteSearchModal);
+
+  const overlay = $('athlete-search-modal');
+  if (overlay) {
+    overlay.addEventListener('click', e => {
+      if (e.target === overlay) closeAthleteSearchModal();
+    });
+  }
+
+  const input = $('athlete-search-input');
+  if (input) {
+    input.addEventListener('input', e => {
+      clearTimeout(_athleteSearchDebounceTimer);
+      const q = e.target.value.trim();
+      _athleteSearchDebounceTimer = setTimeout(() => performAthleteSearch(q), 350);
+    });
+  }
+
+  document.addEventListener('keydown', e => {
+    if (e.key === 'Escape') closeAthleteSearchModal();
+  });
+}
diff --git a/src/kudosy/static/config.js b/src/kudosy/static/config.js
new file mode 100644
index 0000000..4843985
--- /dev/null
+++ b/src/kudosy/static/config.js
@@ -0,0 +1,292 @@
+// ── Kudosy UI — config.js ────────────────────────────────────────────────────
+// Configuration tab: credentials, athlete rules, kudo rules, auto-save.
+
+import { $, toast, makeRemoveBtn } from './dom.js';
+import { fetchJson, putJson } from './api.js';
+import { formatSportLabel } from './format.js';
+import { t } from './i18n.js';
+import { state } from './state.js';
+import { addAthleteManagedRow, getAthleteLists, openAthleteSearchModal } from './athletes.js';
+
+// The five canonical category names — used to distinguish a category-keyed
+// row from a sport-keyed row when reading the rules tables back.
+const CATEGORY_NAME_SET = new Set([
+  'FootSports', 'CycleSports', 'WaterSports', 'WinterSports', 'OtherSports',
+]);
+
+// ── Auto-save debounce ────────────────────────────────────────────────────────
+// The guard is stored in state.autoSaveEnabled so main.js can enable it after
+// the initial data load.
+
+let _saveConfigTimer = null;
+
+export function debouncedSaveConfig() {
+  if (!state.autoSaveEnabled) return;
+  clearTimeout(_saveConfigTimer);
+  _saveConfigTimer = setTimeout(saveConfig, 800);
+}
+
+// ── Sport type <select> ───────────────────────────────────────────────────────
+
+export function buildSportTypeSelect(selectedType = '') {
+  const sel = document.createElement('select');
+  sel.className = 'sport-type-select';
+
+  // Blank placeholder (always first, outside any optgroup)
+  const blank = document.createElement('option');
+  blank.value       = '';
+  blank.textContent = t('table.sportType.placeholder');
+  if (!selectedType) blank.selected = true;
+  sel.appendChild(blank);
+
+  let found = !selectedType;
+
+  // Prefer the grouped format when category data is available
+  const hasCats = Object.keys(state.sportCategories).length > 0;
+  const cats    = hasCats ? state.sportCategories : { '': state.sportTypes };
+
+  for (const [cat, sports] of Object.entries(cats)) {
+    if (!sports.length) continue;
+
+    let container;
+    if (hasCats) {
+      container       = document.createElement('optgroup');
+      const catLabel  = t(`category.${cat}`);
+      container.label = (catLabel !== `category.${cat}`) ? catLabel : cat;
+
+      // Selectable category option — selecting it applies the rule to all members
+      const catOpt       = document.createElement('option');
+      catOpt.value       = cat;
+      catOpt.className   = 'opt-category';
+      const allLabel     = t('table.category.all');
+      catOpt.textContent = allLabel !== 'table.category.all'
+        ? allLabel.replace('{cat}', container.label)
+        : `★ ${container.label}`;
+      if (cat === selectedType) { catOpt.selected = true; found = true; }
+      container.appendChild(catOpt);
+    } else {
+      container = sel;
+    }
+
+    for (const type of sports) {
+      const opt       = document.createElement('option');
+      opt.value       = type;
+      opt.textContent = formatSportLabel(type);
+      if (type === selectedType) { opt.selected = true; found = true; }
+      container.appendChild(opt);
+    }
+
+    if (hasCats) sel.appendChild(container);
+  }
+
+  // Fallback: a saved value that is no longer in the active lists
+  if (!found && selectedType) {
+    const opt       = document.createElement('option');
+    opt.value       = selectedType;
+    opt.textContent = `${formatSportLabel(selectedType)} ↑`;
+    opt.selected    = true;
+    sel.insertBefore(opt, sel.children[1] || null);
+  }
+
+  return sel;
+}
+
+// ── Rules table helpers ───────────────────────────────────────────────────────
+
+export function addRuleRow(tbody, sportType = '', value = '') {
+  const tr = document.createElement('tr');
+
+  const tdType = document.createElement('td');
+  tdType.appendChild(buildSportTypeSelect(sportType));
+
+  const tdVal    = document.createElement('td');
+  const numInput = document.createElement('input');
+  numInput.type        = 'number';
+  numInput.value       = value !== '' ? value : '';
+  numInput.min         = '0';
+  numInput.step        = '0.1';
+  numInput.placeholder = '—';
+  numInput.style.maxWidth = '90px';
+  tdVal.appendChild(numInput);
+
+  const tdRemove = document.createElement('td');
+  tdRemove.appendChild(makeRemoveBtn(() => tr.remove()));
+
+  tr.appendChild(tdType);
+  tr.appendChild(tdVal);
+  tr.appendChild(tdRemove);
+  tbody.appendChild(tr);
+}
+
+/**
+ * Read all rows from a rules table.
+ * @returns {{ sport: Object, category: Object }}
+ * A row is "category" when its select value is one of the five CATEGORY_NAME_SET names.
+ */
+export function getRulesFromTable(tbody) {
+  const sport    = {};
+  const category = {};
+  tbody.querySelectorAll('tr').forEach(tr => {
+    const sel   = tr.querySelector('select');
+    const numIn = tr.querySelector('input[type="number"]');
+    if (!sel || !numIn) return;
+    const key = sel.value.trim();
+    const raw = numIn.value.trim();
+    if (key && raw !== '') {
+      const val = parseFloat(raw);
+      if (!isNaN(val)) {
+        if (CATEGORY_NAME_SET.has(key)) category[key] = val;
+        else sport[key] = val;
+      }
+    }
+  });
+  return { sport, category };
+}
+
+/**
+ * Populate a rules table from per-sport and per-category dicts.
+ * Both are loaded into the same table; the <select> in each row distinguishes them.
+ */
+export function populateRulesTable(tbody, sportRules, categoryRules) {
+  tbody.innerHTML = '';
+  for (const [type, val] of Object.entries(sportRules || {})) addRuleRow(tbody, type, val);
+  for (const [cat, val]  of Object.entries(categoryRules || {})) addRuleRow(tbody, cat, val);
+}
+
+// ── Activity names list helpers ───────────────────────────────────────────────
+
+export function addListItem(listEl, value = '', placeholder = '') {
+  const li    = document.createElement('li');
+  const input = document.createElement('input');
+  input.type        = 'text';
+  input.value       = value;
+  input.placeholder = placeholder;
+  li.appendChild(input);
+  li.appendChild(makeRemoveBtn(() => li.remove()));
+  listEl.appendChild(li);
+  if (!value) input.focus();
+}
+
+export function getListValues(listEl) {
+  return Array.from(listEl.querySelectorAll('input'))
+    .map(i => i.value.trim())
+    .filter(Boolean);
+}
+
+// ── Config tab I/O ────────────────────────────────────────────────────────────
+
+export async function loadConfig() {
+  const [cfg, labels, avatars] = await Promise.all([
+    fetchJson('/api/config'),
+    fetchJson('/api/athlete-labels').catch(() => ({})),
+    fetchJson('/api/athlete-avatars').catch(() => ({})),
+  ]);
+  state.athleteLabels  = labels;
+  state.athleteAvatars = avatars;
+
+  $('cookieInput').value    = cfg.stravaSessionCookie || '';
+  $('athleteIdInput').value = cfg.athleteId || '';
+
+  // Catch-all thresholds
+  $('catchAllDist').value = cfg.catchAll?.minDistance ?? 0;
+  $('catchAllTime').value = cfg.catchAll?.minTime ?? 0;
+
+  // Unified athlete management list: merge ignoreAthletes + allowAthletes
+  const manageList = $('athlete-manage-list');
+  manageList.innerHTML = '';
+  for (const id of (cfg.ignoreAthletes || [])) {
+    addAthleteManagedRow(manageList, id, labels[id] || '', 'deny', avatars[id] || '');
+  }
+  for (const id of (cfg.allowAthletes || [])) {
+    addAthleteManagedRow(manageList, id, labels[id] || '', 'allow', avatars[id] || '');
+  }
+
+  populateRulesTable($('tbody-distance'), cfg.kudoRules?.minDistance,         cfg.kudoRules?.categoryMinDistance);
+  populateRulesTable($('tbody-time'),     cfg.kudoRules?.minTime,             cfg.kudoRules?.categoryMinTime);
+
+  const namesList = $('activity-names-list');
+  namesList.innerHTML = '';
+  for (const n of (cfg.kudoRules?.activityNames || [])) {
+    addListItem(namesList, n, t('config.activityNames.placeholder'));
+  }
+}
+
+export async function saveConfig() {
+  try {
+    const { allowAthletes, ignoreAthletes } = getAthleteLists($('athlete-manage-list'));
+    const cfg = {
+      stravaSessionCookie: $('cookieInput').value.trim(),
+      athleteId:           $('athleteIdInput').value.trim(),
+      ignoreAthletes,
+      allowAthletes,
+      catchAll: {
+        minDistance: parseFloat($('catchAllDist').value) || 0,
+        minTime:     parseFloat($('catchAllTime').value) || 0,
+      },
+      kudoRules: (() => {
+        const dist = getRulesFromTable($('tbody-distance'));
+        const time = getRulesFromTable($('tbody-time'));
+        return {
+          minDistance:         dist.sport,
+          minTime:             time.sport,
+          categoryMinDistance: dist.category,
+          categoryMinTime:     time.category,
+          activityNames:       getListValues($('activity-names-list')),
+        };
+      })(),
+    };
+    if (!cfg.kudoRules.activityNames.length) delete cfg.kudoRules.activityNames;
+    await putJson('/api/config', cfg);
+  } catch (err) {
+    toast(err.message, 'error');
+  }
+}
+
+// ── Config tab wiring ─────────────────────────────────────────────────────────
+
+export function initConfigTab() {
+  // Prevent accidental submit via Enter key (no submit button present).
+  $('form-config').addEventListener('submit', e => e.preventDefault());
+
+  $('btn-add-athlete').addEventListener('click', openAthleteSearchModal);
+  $('btn-add-distance').addEventListener('click', () => { addRuleRow($('tbody-distance')); debouncedSaveConfig(); });
+  $('btn-add-time').addEventListener('click',     () => { addRuleRow($('tbody-time'));     debouncedSaveConfig(); });
+  $('btn-add-name').addEventListener('click',     () => {
+    addListItem($('activity-names-list'), '', t('config.activityNames.placeholder'));
+    debouncedSaveConfig();
+  });
+
+  // "Load all names" — refreshes UI labels without changing config data
+  $('btn-load-all-names')?.addEventListener('click', async () => {
+    try {
+      const labels = await fetchJson('/api/athlete-labels');
+      state.athleteLabels = { ...state.athleteLabels, ...labels };
+      $('athlete-manage-list').querySelectorAll('.athlete-manage-row').forEach(li => {
+        const id = li.dataset.athleteId;
+        if (id && labels[id]) {
+          const nameEl = li.querySelector('.athlete-info-name');
+          if (nameEl) nameEl.textContent = labels[id];
+        }
+      });
+    } catch {
+      toast(t('toast.config.loadError', { msg: '' }), 'error');
+    }
+  });
+
+  // Auto-save: native form inputs (text, number) and selects
+  $('form-config').addEventListener('input',  debouncedSaveConfig);
+  $('form-config').addEventListener('change', debouncedSaveConfig);
+
+  // Auto-save: Allow/Deny toggle buttons (custom elements, not form inputs)
+  $('athlete-manage-list').addEventListener('click', e => {
+    if (e.target.matches('.athlete-switch-btn')) debouncedSaveConfig();
+  });
+
+  // Auto-save: dynamic list mutations (row add / remove via remove buttons)
+  const observeList = el =>
+    new MutationObserver(debouncedSaveConfig).observe(el, { childList: true });
+  observeList($('athlete-manage-list'));
+  observeList($('tbody-distance'));
+  observeList($('tbody-time'));
+  observeList($('activity-names-list'));
+}
diff --git a/src/kudosy/static/dom.js b/src/kudosy/static/dom.js
new file mode 100644
index 0000000..d30129d
--- /dev/null
+++ b/src/kudosy/static/dom.js
@@ -0,0 +1,58 @@
+// ── Kudosy UI — dom.js ───────────────────────────────────────────────────────
+// Low-level DOM helpers shared across all tab modules.
+
+import { t } from './i18n.js';
+
+// Shorthand for document.getElementById
+export const $ = id => document.getElementById(id);
+
+export function toast(msg, type = 'success') {
+  const el = document.createElement('div');
+  el.className = `toast toast-${type}`;
+  const icon = type === 'success' ? '✓' : type === 'error' ? '✕' : 'ℹ';
+  el.innerHTML = `<span>${icon}</span><span>${msg}</span>`;
+  $('toast-container').appendChild(el);
+  setTimeout(() => {
+    el.classList.add('fade-out');
+    setTimeout(() => el.remove(), 300);
+  }, 3500);
+}
+
+export function setButtonLoading(btn, loading) {
+  if (!btn) return;
+  if (loading) {
+    btn._savedHTML = btn.innerHTML;
+    btn.innerHTML = '<span class="spinner" aria-hidden="true"></span>';
+    btn.disabled = true;
+    btn.classList.add('is-loading');
+  } else {
+    if (btn._savedHTML !== undefined) btn.innerHTML = btn._savedHTML;
+    btn.disabled = false;
+    btn.classList.remove('is-loading');
+    delete btn._savedHTML;
+  }
+}
+
+/** Create a × remove button that calls onClick when clicked. */
+export function makeRemoveBtn(onClick) {
+  const btn = document.createElement('button');
+  btn.type = 'button';
+  btn.className = 'btn-remove';
+  btn.title = t('table.removeBtn.title');
+  btn.textContent = '×';
+  btn.addEventListener('click', onClick);
+  return btn;
+}
+
+/** Wire up all [data-reveal] buttons (show/hide password fields). */
+export function initRevealButtons() {
+  document.querySelectorAll('[data-reveal]').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const input = $(btn.dataset.reveal);
+      if (!input) return;
+      const hidden = input.type === 'password';
+      input.type = hidden ? 'text' : 'password';
+      btn.textContent = hidden ? '🙈' : '👁';
+    });
+  });
+}
diff --git a/src/kudosy/static/feed.js b/src/kudosy/static/feed.js
new file mode 100644
index 0000000..d6d87f9
--- /dev/null
+++ b/src/kudosy/static/feed.js
@@ -0,0 +1,260 @@
+// ── Kudosy UI — feed.js ──────────────────────────────────────────────────────
+// Feed tab: load, render, filter and per-card kudos button.
+
+import { $, toast, setButtonLoading } from './dom.js';
+import { fetchJson } from './api.js';
+import { formatSportLabel, formatRelative } from './format.js';
+import { t } from './i18n.js';
+import { state } from './state.js';
+
+// ── State helpers ─────────────────────────────────────────────────────────────
+
+/** Derive a single canonical state from a feed activity. */
+export function activityState(act) {
+  if (act.has_kudoed) return 'kudoed';
+  if (act.give_kudos) return 'eligible';
+  return 'skipped';
+}
+
+/** Return true if act passes the current feedFilter. */
+export function matchesFilter(act) {
+  const { status, text, sport } = state.feedFilter;
+  if (status !== 'all' && activityState(act) !== status) return false;
+  if (sport && act.sport_type !== sport) return false;
+  if (text) {
+    const q       = text.toLowerCase();
+    const name    = (act.activity_name || '').toLowerCase();
+    const athlete = (act.athlete_name  || '').toLowerCase();
+    if (!name.includes(q) && !athlete.includes(q)) return false;
+  }
+  return true;
+}
+
+// ── Feed I/O ──────────────────────────────────────────────────────────────────
+
+export async function loadFeed(refresh = false) {
+  const container  = $('feed-list');
+  const filters    = $('feed-filters');
+  const refreshBtn = $('btn-refresh-feed');
+  if (!container) return;
+
+  // Show spinner while loading
+  container.innerHTML = `
+    <div class="feed-loading">
+      <span class="spinner spinner-lg"></span>
+      <span>${t('feed.loading')}</span>
+    </div>`;
+  if (filters) filters.hidden = true;
+
+  setButtonLoading(refreshBtn, true);
+
+  try {
+    const feedUrl  = refresh ? '/api/feed?refresh=true' : '/api/feed';
+    const feedData = await fetchJson(feedUrl);
+    state.feedActivities = feedData.activities;
+    state.feedFetchedAt  = feedData.fetched_at ?? null;
+    state.feedLoaded     = true;
+
+    // Populate sport-type dropdown with types present in this feed
+    const sportSel = $('feed-filter-sport');
+    if (sportSel) {
+      const sports = [...new Set(state.feedActivities.map(a => a.sport_type).filter(Boolean))].sort();
+      sportSel.innerHTML = `<option value="">${t('feed.filter.allSports')}</option>`;
+      sports.forEach(s => {
+        const opt       = document.createElement('option');
+        opt.value       = s;
+        opt.textContent = formatSportLabel(s);
+        if (s === state.feedFilter.sport) opt.selected = true;
+        sportSel.appendChild(opt);
+      });
+    }
+
+    if (filters) filters.hidden = false;
+    renderFeed();
+  } catch (err) {
+    state.feedLoaded = false;
+    const is401 = err.message && (
+      err.message.includes('AUTH_') ||
+      err.message.includes('401') ||
+      err.message.toLowerCase().includes('cookie')
+    );
+    container.innerHTML = is401
+      ? `<p class="hint feed-error">${t('feed.auth.error')}</p>`
+      : `<p class="hint feed-error">${t('feed.load.error', { msg: err.message })}</p>`;
+  } finally {
+    setButtonLoading(refreshBtn, false);
+  }
+}
+
+// ── Feed rendering ────────────────────────────────────────────────────────────
+
+export function updateFeedTimestamp() {
+  const el = $('feed-fetched-at');
+  if (!el) return;
+  el.textContent = state.feedFetchedAt
+    ? t('feed.fetchedAt', { time: formatRelative(state.feedFetchedAt) })
+    : '';
+}
+
+export function renderFeed() {
+  const container = $('feed-list');
+  if (!container) return;
+
+  updateFeedTimestamp();
+
+  const total    = state.feedActivities.length;
+  const filtered = state.feedActivities.filter(matchesFilter);
+
+  // Update count display
+  const countEl = $('feed-filter-count');
+  if (countEl) countEl.textContent = t('feed.filter.count', { n: filtered.length, total });
+
+  if (total === 0) {
+    container.innerHTML = `<p class="hint feed-empty">${t('feed.empty')}</p>`;
+    return;
+  }
+  if (filtered.length === 0) {
+    container.innerHTML = `<p class="hint feed-empty">${t('feed.filter.none')}</p>`;
+    return;
+  }
+
+  container.innerHTML = '';
+  filtered.forEach(act => {
+    const state_   = activityState(act);
+    const card     = document.createElement('div');
+    card.className = `feed-card feed-state-${state_}`;
+    card.title     = t('feed.kudo.openActivity');
+
+    const reasonKey   = `reason.${act.reason}`;
+    const reasonLabel = t(reasonKey) !== reasonKey ? t(reasonKey) : act.reason;
+    const decisionClass = act.give_kudos ? 'feed-decision-give' : 'feed-decision-skip';
+    const decisionText  = act.give_kudos
+      ? t('feed.decision.give')
+      : t('feed.decision.skip', { reason: reasonLabel });
+
+    const kudosBadge = act.has_kudoed
+      ? `<span class="feed-kudo-badge feed-kudo-done">${t('feed.kudo.done')}</span>`
+      : `<span class="feed-kudo-badge feed-kudo-pending">${t('feed.kudo.pending')}</span>`;
+
+    const displayStats = (act.stats && act.stats.display) ? act.stats.display : [];
+    const statsParts   = displayStats
+      .map(s => {
+        const labelKey = `stat.${s.key}`;
+        const label    = t(labelKey) !== labelKey ? t(labelKey) : s.label;
+        return `<span class="feed-stat"><strong>${label}:</strong> ${s.raw}</span>`;
+      })
+      .join('');
+    const statsHtml  = statsParts ? `<div class="feed-stats">${statsParts}</div>` : '';
+    const sportLabel = act.sport_type ? formatSportLabel(act.sport_type) : '—';
+
+    // Kudos button — only shown when kudos haven't been given yet
+    const kudosBtnHtml = !act.has_kudoed
+      ? `<button class="feed-kudo-btn" data-activity-id="${act.activity_id}">${t('feed.kudo.give')}</button>`
+      : '';
+
+    card.innerHTML = `
+      <div class="feed-card-header">
+        <span class="feed-sport">${sportLabel}</span>
+        ${kudosBadge}
+      </div>
+      <div class="feed-card-body">
+        <div class="feed-activity-name">${act.activity_name || t('feed.noName')}</div>
+        <div class="feed-athlete-name">${act.athlete_name}</div>
+        ${statsHtml}
+      </div>
+      <div class="feed-card-footer">
+        <span class="feed-decision ${decisionClass}">${decisionText}</span>
+        ${kudosBtnHtml}
+      </div>
+    `;
+
+    // Open activity on Strava when clicking anywhere on the card
+    const activityUrl = `https://www.strava.com/activities/${act.activity_id}`;
+    card.addEventListener('click', e => {
+      if (e.target.closest('.feed-kudo-btn')) return;
+      window.open(activityUrl, '_blank', 'noopener,noreferrer');
+    });
+
+    // Kudos button handler
+    const kudosBtn = card.querySelector('.feed-kudo-btn');
+    if (kudosBtn) {
+      kudosBtn.addEventListener('click', async e => {
+        e.stopPropagation();
+        kudosBtn.disabled    = true;
+        kudosBtn.textContent = t('feed.kudo.giving');
+        try {
+          const res = await fetchJson(`/api/kudos/${act.activity_id}`, { method: 'POST' });
+          if (res.ok) {
+            // Keep in-memory activity in sync for future re-renders
+            act.has_kudoed = true;
+            act.give_kudos = false;
+            act.reason     = 'already';
+
+            // Update card state class immediately
+            card.className = 'feed-card feed-state-kudoed';
+
+            const badge = card.querySelector('.feed-kudo-badge');
+            if (badge) {
+              badge.className  = 'feed-kudo-badge feed-kudo-done';
+              badge.textContent = t('feed.kudo.done');
+            }
+
+            const decisionEl = card.querySelector('.feed-decision');
+            if (decisionEl) {
+              decisionEl.className  = 'feed-decision feed-decision-skip';
+              decisionEl.textContent = t('feed.decision.skip', { reason: t('reason.already') });
+            }
+
+            kudosBtn.remove();
+          } else {
+            kudosBtn.disabled    = false;
+            kudosBtn.textContent = t('feed.kudo.give');
+          }
+        } catch {
+          kudosBtn.disabled    = false;
+          kudosBtn.textContent = t('feed.kudo.give');
+        }
+      });
+    }
+
+    container.appendChild(card);
+  });
+}
+
+// ── Feed tab wiring ───────────────────────────────────────────────────────────
+
+export function initFeedTab() {
+  const btn = $('btn-refresh-feed');
+  if (btn) btn.addEventListener('click', () => loadFeed(true));
+
+  // Status filter buttons
+  const statusGroup = document.getElementById('feed-filter-status');
+  if (statusGroup) {
+    statusGroup.addEventListener('click', e => {
+      const target = e.target.closest('.feed-filter-btn');
+      if (!target) return;
+      statusGroup.querySelectorAll('.feed-filter-btn').forEach(b => b.classList.remove('active'));
+      target.classList.add('active');
+      state.feedFilter.status = target.dataset.status;
+      renderFeed();
+    });
+  }
+
+  // Live text search
+  const textInput = $('feed-filter-text');
+  if (textInput) {
+    textInput.addEventListener('input', () => {
+      state.feedFilter.text = textInput.value;
+      renderFeed();
+    });
+  }
+
+  // Sport type filter
+  const sportSel = $('feed-filter-sport');
+  if (sportSel) {
+    sportSel.addEventListener('change', () => {
+      state.feedFilter.sport = sportSel.value;
+      renderFeed();
+    });
+  }
+}
diff --git a/src/kudosy/static/format.js b/src/kudosy/static/format.js
new file mode 100644
index 0000000..41c2b18
--- /dev/null
+++ b/src/kudosy/static/format.js
@@ -0,0 +1,40 @@
+// ── Kudosy UI — format.js ────────────────────────────────────────────────────
+// Pure display-formatting helpers (dates, times, sport labels).
+
+import { t, currentLang, localeFor } from './i18n.js';
+
+/** Format an ISO timestamp relative to now, e.g. "vor 3 min (14:22)". */
+export function formatRelative(isoString) {
+  if (!isoString) return '—';
+  const d = new Date(isoString);
+  const diff = Date.now() - d.getTime();
+  const timeStr = d.toLocaleTimeString(localeFor(currentLang()), { hour: '2-digit', minute: '2-digit' });
+  if (diff < 0) {
+    const s = Math.round(-diff / 1000);
+    if (s < 60) return `${t('time.inSeconds', { n: s })} (${timeStr})`;
+    const m = Math.round(s / 60);
+    if (m < 60) return `${t('time.inMinutes', { n: m })} (${timeStr})`;
+    return `${t('time.inHours', { n: Math.round(m / 60) })} (${timeStr})`;
+  }
+  const s = Math.round(diff / 1000);
+  if (s < 60) return `${t('time.agoSeconds', { n: s })} (${timeStr})`;
+  const m = Math.round(s / 60);
+  if (m < 60) return `${t('time.agoMinutes', { n: m })} (${timeStr})`;
+  const h = Math.round(m / 60);
+  if (h < 24) return `${t('time.agoHours', { n: h })} (${timeStr})`;
+  return d.toLocaleString(localeFor(currentLang()), { dateStyle: 'short', timeStyle: 'short' });
+}
+
+/** Format an ISO timestamp as HH:MM. */
+export function formatTime(isoString) {
+  if (!isoString) return '—';
+  return new Date(isoString).toLocaleTimeString(localeFor(currentLang()), {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+/** "MountainBikeRide" → "Mountain Bike Ride" */
+export function formatSportLabel(type) {
+  return type.replace(/([A-Z])/g, ' $1').trim();
+}
diff --git a/src/kudosy/static/i18n.js b/src/kudosy/static/i18n.js
index fcd7cd0..3391d72 100644
--- a/src/kudosy/static/i18n.js
+++ b/src/kudosy/static/i18n.js
@@ -170,6 +170,21 @@ const MESSAGES = {
     'error.ENGINE_NOT_READY': 'Engine noch nicht bereit.',
     'error.AUTH_INVALID_COOKIE': 'Strava-Session-Cookie ist ungültig oder abgelaufen. Bitte neuen Cookie in der Konfiguration eintragen.',
     'error.AUTH_FAILED': 'Authentifizierung fehlgeschlagen.',
+    'tab.stats': 'Statistik',
+    'stats.title': 'Lauf-Statistik',
+    'stats.refresh': '🔄 Aktualisieren',
+    'stats.totalRuns.label': 'Läufe gesamt',
+    'stats.totalKudos.label': 'Kudos vergeben',
+    'stats.dryRuns.label': 'Dry-Runs',
+    'stats.chart.daily.title': 'Kudos pro Tag (letzte 14 Tage)',
+    'stats.history.title': 'Letzte 20 Läufe',
+    'stats.history.col.date': 'Datum',
+    'stats.history.col.status': 'Status',
+    'stats.history.col.scanned': 'Geprüft',
+    'stats.history.col.kudos': 'Kudos',
+    'stats.noData': 'Noch keine Lauf-Daten vorhanden. Starte einen Lauf, um die Statistik zu befüllen.',
+    'stats.loadError': 'Fehler beim Laden der Statistik: {msg}',
+    'stats.simulated': 'simuliert',
   },
 
   en: {
@@ -336,6 +351,21 @@ const MESSAGES = {
     'error.ENGINE_NOT_READY': 'Engine not ready yet.',
     'error.AUTH_INVALID_COOKIE': 'Strava session cookie is invalid or expired. Please enter a new cookie in the configuration.',
     'error.AUTH_FAILED': 'Authentication failed.',
+    'tab.stats': 'Statistics',
+    'stats.title': 'Run Statistics',
+    'stats.refresh': '🔄 Refresh',
+    'stats.totalRuns.label': 'Total runs',
+    'stats.totalKudos.label': 'Kudos given',
+    'stats.dryRuns.label': 'Dry runs',
+    'stats.chart.daily.title': 'Kudos per day (last 14 days)',
+    'stats.history.title': 'Last 20 runs',
+    'stats.history.col.date': 'Date',
+    'stats.history.col.status': 'Status',
+    'stats.history.col.scanned': 'Scanned',
+    'stats.history.col.kudos': 'Kudos',
+    'stats.noData': 'No run data yet. Start a run to populate the statistics.',
+    'stats.loadError': 'Error loading statistics: {msg}',
+    'stats.simulated': 'simulated',
   },
 
   fr: {
diff --git a/src/kudosy/static/index.html b/src/kudosy/static/index.html
index a8b6163..81fcb81 100644
--- a/src/kudosy/static/index.html
+++ b/src/kudosy/static/index.html
@@ -34,6 +34,7 @@
       <button class="tab" data-tab="feed" data-i18n="tab.feed">Feed</button>
       <button class="tab" data-tab="config" data-i18n="tab.config">Konfiguration</button>
       <button class="tab" data-tab="log" data-i18n="tab.log">Status &amp; Log</button>
+      <button class="tab" data-tab="stats" data-i18n="tab.stats">Statistik</button>
     </nav>
   </div>
 
@@ -303,6 +304,59 @@ <h2 data-i18n="log.output.title">Log-Ausgabe</h2>
 
     </section>
 
+    <!-- ── STATS ─────────────────────────────────────────────────────────── -->
+    <section id="tab-stats" class="tab-pane">
+
+      <div class="card">
+        <div class="card-header-row">
+          <h2 data-i18n="stats.title">Lauf-Statistik</h2>
+          <button type="button" class="btn btn-outline btn-sm" id="btn-refresh-stats" data-i18n="stats.refresh">🔄 Aktualisieren</button>
+        </div>
+
+        <p id="stats-error" class="hint feed-error" hidden></p>
+        <p id="stats-loading" class="hint" hidden data-i18n="log.output.loading">Lade…</p>
+
+        <!-- Summary cards -->
+        <div class="status-grid" style="margin-bottom:16px">
+          <div class="card status-card">
+            <div class="status-label" data-i18n="stats.totalRuns.label">Läufe gesamt</div>
+            <div class="status-value" id="stat-total-runs">—</div>
+          </div>
+          <div class="card status-card">
+            <div class="status-label" data-i18n="stats.totalKudos.label">Kudos vergeben</div>
+            <div class="status-value" id="stat-total-kudos">—</div>
+          </div>
+          <div class="card status-card">
+            <div class="status-label" data-i18n="stats.dryRuns.label">Dry-Runs</div>
+            <div class="status-value" id="stat-dry-runs">—</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Daily chart -->
+      <div class="card">
+        <h2 data-i18n="stats.chart.daily.title">Kudos pro Tag (letzte 14 Tage)</h2>
+        <canvas id="chart-kudos-daily" style="width:100%;height:140px;display:block;"></canvas>
+      </div>
+
+      <!-- History table -->
+      <div class="card">
+        <h2 data-i18n="stats.history.title">Letzte 20 Läufe</h2>
+        <div class="table-wrap">
+          <table class="rules-table">
+            <thead><tr>
+              <th data-i18n="stats.history.col.date">Datum</th>
+              <th data-i18n="stats.history.col.status">Status</th>
+              <th data-i18n="stats.history.col.scanned">Geprüft</th>
+              <th data-i18n="stats.history.col.kudos">Kudos</th>
+            </tr></thead>
+            <tbody id="history-tbody"></tbody>
+          </table>
+        </div>
+      </div>
+
+    </section>
+
   </main>
 
   <footer class="app-footer">
@@ -331,6 +385,6 @@ <h3 id="athlete-modal-title" data-i18n="config.athletes.search.title">Athlet hin
     </div>
   </div>
 
-  <script src="app.js" type="module"></script>
+  <script src="main.js" type="module"></script>
 </body>
 </html>
diff --git a/src/kudosy/static/main.js b/src/kudosy/static/main.js
new file mode 100644
index 0000000..bc6ade8
--- /dev/null
+++ b/src/kudosy/static/main.js
@@ -0,0 +1,54 @@
+// ── Kudosy UI — main.js ──────────────────────────────────────────────────────
+// Application entry point: bootstrap, init order, global polling.
+
+import { fetchJson } from './api.js';
+import { applyStaticTranslations } from './i18n.js';
+import { state } from './state.js';
+import { toast, initRevealButtons } from './dom.js';
+import { t } from './i18n.js';
+import { initTabs, initLangSelect } from './tabs.js';
+import { loadConfig, initConfigTab } from './config.js';
+import { loadSettings, initSettingsTab } from './settings.js';
+import { initFeedTab } from './feed.js';
+import { pollStatus, initRunButtons } from './status.js';
+import { initAthleteSearchModal } from './athletes.js';
+import { initStatsTab } from './stats.js';
+
+async function init() {
+  // Fetch sport-type lists before wiring the config tab (rules selects need them)
+  try {
+    [state.sportTypes, state.sportCategories] = await Promise.all([
+      fetchJson('/api/sport-types'),
+      fetchJson('/api/sport-categories'),
+    ]);
+  } catch {
+    state.sportTypes      = [];
+    state.sportCategories = {};
+  }
+
+  // Apply static translations for the initial language before any tab renders
+  applyStaticTranslations();
+
+  initLangSelect();
+  initTabs();
+  initConfigTab();
+  initSettingsTab();
+  initFeedTab();
+  initStatsTab();
+  initRunButtons();
+  initRevealButtons();
+  initAthleteSearchModal();
+
+  // Load config and settings in parallel, disable auto-save until both are done
+  // so that DOM mutations during population don't trigger premature API calls.
+  await Promise.allSettled([
+    loadConfig().catch(err  => toast(t('toast.config.loadError',   { msg: err.message }), 'error')),
+    loadSettings().catch(err => toast(t('toast.settings.loadError', { msg: err.message }), 'error')),
+  ]);
+  state.autoSaveEnabled = true;
+
+  await pollStatus();
+  setInterval(pollStatus, 10000);
+}
+
+init().catch(err => console.error('[init]', err));
diff --git a/src/kudosy/static/schedule-matrix.js b/src/kudosy/static/schedule-matrix.js
new file mode 100644
index 0000000..6579919
--- /dev/null
+++ b/src/kudosy/static/schedule-matrix.js
@@ -0,0 +1,229 @@
+// ── Kudosy UI — schedule-matrix.js ───────────────────────────────────────────
+// 7×24 schedule matrix: render, toggle rows/columns, read state, dim/enable.
+
+import { $ } from './dom.js';
+import { t } from './i18n.js';
+
+/** Render the 7×24 schedule matrix into #schedule-matrix with drag-to-paint
+ *  support.  On narrow screens (≤768px) the matrix is transposed: 7 days as
+ *  columns, 24 hours as rows — no horizontal scrolling, natural vertical
+ *  scroll.  All data-row/data-col attributes remain unchanged (day=row,
+ *  hour=col), so the paint engine and serialiser work identically in both
+ *  orientations. */
+export function renderScheduleMatrix(matrix) {
+  const container = $('schedule-matrix');
+  if (!container) return;
+  container.innerHTML = '';
+
+  const days = t('settings.schedule.days') || ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'];
+  // Display order: 1, 2, …, 23, 0  (midnight at the end of the day, not the beginning)
+  const hours = Array.from({ length: 24 }, (_, i) => (i + 1) % 24);
+
+  // Switch to portrait/transposed only when there isn't enough room for the
+  // horizontal layout.  Measure the actual container width instead of using a
+  // fixed breakpoint so wider devices (e.g. iPad Mini at 768 px) stay in
+  // landscape.  Minimum width: corner 36px + 24 slots×24px + 24 gaps×2px = 660px.
+  const LANDSCAPE_MIN_WIDTH = 36 + 24 * 24 + 24 * 2; // 660px
+  const wrap = $('schedule-matrix-wrap');
+  // offsetWidth is 0 when the tab is hidden — fall back to viewport minus card padding.
+  const availableWidth = (wrap && wrap.offsetWidth > 0) ? wrap.offsetWidth : window.innerWidth - 88;
+  const portrait = availableWidth < LANDSCAPE_MIN_WIDTH;
+  container.classList.toggle('transposed', portrait);
+
+  // ── Shared cell factories (data attributes are orientation-independent) ────
+  function makeCorner() {
+    const el = document.createElement('div');
+    el.className = 'schedule-cell schedule-corner';
+    return el;
+  }
+
+  function makeHourLabel(h) {
+    const el = document.createElement('div');
+    el.className = 'schedule-cell schedule-hour-label';
+    // Portrait: zero-padded "01"…"23"/"00"; landscape: plain number
+    el.textContent = portrait ? String(h).padStart(2, '0') : h;
+    el.dataset.col = h;
+    el.title = `Toggle hour ${h} (all days)`;
+    el.addEventListener('click', () => toggleScheduleColumn(h));
+    return el;
+  }
+
+  function makeDayLabel(d) {
+    const el = document.createElement('div');
+    el.className = 'schedule-cell schedule-day-label';
+    el.textContent = days[d] ?? d;
+    el.dataset.row = d;
+    el.title = `Toggle ${days[d] ?? d} (all hours)`;
+    el.addEventListener('click', () => toggleScheduleRow(d));
+    return el;
+  }
+
+  function makeSlot(d, h) {
+    const el = document.createElement('div');
+    const allowed = matrix[d]?.[h] !== false; // undefined → allowed
+    el.className = 'schedule-cell schedule-slot' + (allowed ? ' allowed' : '');
+    el.dataset.row = d;
+    el.dataset.col = h;
+    return el;
+  }
+
+  if (!portrait) {
+    // ── Landscape: hours across top, days down the left ──────────────────────
+    const headerRow = document.createElement('div');
+    headerRow.className = 'schedule-row schedule-header';
+    headerRow.appendChild(makeCorner());
+    for (const h of hours) headerRow.appendChild(makeHourLabel(h));
+    container.appendChild(headerRow);
+
+    for (let d = 0; d < 7; d++) {
+      const row = document.createElement('div');
+      row.className = 'schedule-row';
+      row.appendChild(makeDayLabel(d));
+      for (const h of hours) row.appendChild(makeSlot(d, h));
+      container.appendChild(row);
+    }
+  } else {
+    // ── Portrait: days across top, hours down the left ────────────────────────
+    // The paint engine reads data-row (day) and data-col (hour) — unchanged.
+    const headerRow = document.createElement('div');
+    headerRow.className = 'schedule-row schedule-header';
+    headerRow.appendChild(makeCorner());
+    for (let d = 0; d < 7; d++) headerRow.appendChild(makeDayLabel(d));
+    container.appendChild(headerRow);
+
+    for (const h of hours) {
+      const row = document.createElement('div');
+      row.className = 'schedule-row';
+      row.appendChild(makeHourLabel(h));
+      for (let d = 0; d < 7; d++) row.appendChild(makeSlot(d, h));
+      container.appendChild(row);
+    }
+  }
+
+  // ── Rectangle-select drag (mouse + touch) ────────────────────────────────
+  // State is local to this render call; replaced on every re-render.
+  let painting       = false;
+  let paintValue     = false;   // the value we're painting (true = allow, false = block)
+  let paintStart     = null;    // { row, col } of the cell where the drag started
+  let dragSnapshot   = null;    // bool[7][24] — matrix state at the moment drag began
+
+  // O(1) cell lookup built during the render above
+  const cellMap = {};
+  container.querySelectorAll('.schedule-slot').forEach(c => {
+    cellMap[`${c.dataset.row},${c.dataset.col}`] = c;
+  });
+
+  function slotFromTarget(el) {
+    return el && el.classList && el.classList.contains('schedule-slot') ? el : null;
+  }
+
+  function snapshotNow() {
+    const snap = [];
+    for (let d = 0; d < 7; d++) {
+      const row = [];
+      for (let h = 0; h < 24; h++) {
+        row.push(cellMap[`${d},${h}`].classList.contains('allowed'));
+      }
+      snap.push(row);
+    }
+    return snap;
+  }
+
+  // Restore from snapshot, then paint all cells in the rectangle start→(endRow,endCol).
+  function applyRect(endRow, endCol) {
+    const r0 = Math.min(paintStart.row, endRow);
+    const r1 = Math.max(paintStart.row, endRow);
+    const c0 = Math.min(paintStart.col, endCol);
+    const c1 = Math.max(paintStart.col, endCol);
+    for (let d = 0; d < 7; d++) {
+      for (let h = 0; h < 24; h++) {
+        const inRect = d >= r0 && d <= r1 && h >= c0 && h <= c1;
+        cellMap[`${d},${h}`].classList.toggle('allowed', inRect ? paintValue : dragSnapshot[d][h]);
+      }
+    }
+  }
+
+  function startDrag(slot) {
+    const row = parseInt(slot.dataset.row, 10);
+    const col = parseInt(slot.dataset.col, 10);
+    dragSnapshot = snapshotNow();
+    paintValue   = !slot.classList.contains('allowed');
+    paintStart   = { row, col };
+    painting     = true;
+    container.classList.add('painting');
+    applyRect(row, col);
+  }
+
+  function moveDrag(slot) {
+    if (!painting || !slot) return;
+    applyRect(parseInt(slot.dataset.row, 10), parseInt(slot.dataset.col, 10));
+  }
+
+  function stopDrag() {
+    painting     = false;
+    paintStart   = null;
+    dragSnapshot = null;
+    container.classList.remove('painting');
+  }
+
+  // Mouse
+  container.addEventListener('mousedown', e => {
+    const slot = slotFromTarget(e.target);
+    if (!slot) return;
+    e.preventDefault();
+    startDrag(slot);
+  });
+  container.addEventListener('mouseover', e => moveDrag(slotFromTarget(e.target)));
+  document.addEventListener('mouseup', stopDrag);
+
+  // Touch
+  container.addEventListener('touchstart', e => {
+    const slot = slotFromTarget(e.target);
+    if (!slot) return;
+    e.preventDefault();
+    startDrag(slot);
+  }, { passive: false });
+  container.addEventListener('touchmove', e => {
+    if (!painting) return;
+    e.preventDefault();
+    const touch = e.touches[0];
+    moveDrag(slotFromTarget(document.elementFromPoint(touch.clientX, touch.clientY)));
+  }, { passive: false });
+  container.addEventListener('touchend', stopDrag);
+  container.addEventListener('touchcancel', stopDrag);
+}
+
+export function toggleScheduleRow(rowIdx) {
+  const slots = document.querySelectorAll(`#schedule-matrix .schedule-slot[data-row="${rowIdx}"]`);
+  const anyOff = Array.from(slots).some(c => !c.classList.contains('allowed'));
+  slots.forEach(c => c.classList.toggle('allowed', anyOff));
+}
+
+export function toggleScheduleColumn(colIdx) {
+  const slots = document.querySelectorAll(`#schedule-matrix .schedule-slot[data-col="${colIdx}"]`);
+  const anyOff = Array.from(slots).some(c => !c.classList.contains('allowed'));
+  slots.forEach(c => c.classList.toggle('allowed', anyOff));
+}
+
+export function getScheduleMatrix() {
+  const matrix = [];
+  for (let d = 0; d < 7; d++) {
+    const row = [];
+    for (let h = 0; h < 24; h++) {
+      const cell = document.querySelector(
+        `#schedule-matrix .schedule-slot[data-row="${d}"][data-col="${h}"]`
+      );
+      row.push(cell ? cell.classList.contains('allowed') : true);
+    }
+    matrix.push(row);
+  }
+  return matrix;
+}
+
+/** Dim / enable the schedule matrix wrap + timezone group based on enabled. */
+export function toggleScheduleMatrixEnabled(enabled) {
+  const wrap    = $('schedule-matrix-wrap');
+  const tzGroup = $('timezone-group');
+  if (wrap)    { wrap.style.opacity = enabled ? '1' : '0.4'; wrap.style.pointerEvents = enabled ? '' : 'none'; }
+  if (tzGroup) { tzGroup.style.opacity = enabled ? '1' : '0.4'; }
+}
diff --git a/src/kudosy/static/settings.js b/src/kudosy/static/settings.js
new file mode 100644
index 0000000..517498b
--- /dev/null
+++ b/src/kudosy/static/settings.js
@@ -0,0 +1,102 @@
+// ── Kudosy UI — settings.js ──────────────────────────────────────────────────
+// Settings (Automation) tab: scheduler, delays, quiet-hours matrix.
+
+import { $, toast } from './dom.js';
+import { fetchJson, putJson } from './api.js';
+import { t } from './i18n.js';
+import { state } from './state.js';
+import {
+  renderScheduleMatrix,
+  getScheduleMatrix,
+  toggleScheduleMatrixEnabled,
+} from './schedule-matrix.js';
+import { pollStatus } from './status.js';
+
+// ── Auto-save debounce ────────────────────────────────────────────────────────
+
+let _saveSettingsTimer = null;
+
+export function debouncedSaveSettings() {
+  if (!state.autoSaveEnabled) return;
+  clearTimeout(_saveSettingsTimer);
+  _saveSettingsTimer = setTimeout(saveSettings, 800);
+}
+
+// ── Settings tab I/O ──────────────────────────────────────────────────────────
+
+export async function loadSettings() {
+  const s = await fetchJson('/api/settings');
+  $('schedulerEnabled').checked     = s.schedulerEnabled;
+  $('intervalMinutes').value         = s.intervalMinutes ?? 60;
+  $('jitterMinutes').value           = s.jitterMinutes   ?? 15;
+  $('globalDryRun').checked          = s.dryRun;
+  $('minKudosDelaySeconds').value    = s.minKudosDelaySeconds ?? 3;
+  $('maxKudosDelaySeconds').value    = s.maxKudosDelaySeconds ?? 25;
+  $('shuffleOrder').checked          = s.shuffleOrder ?? true;
+  $('kudosScheduleEnabled').checked  = s.kudosScheduleEnabled ?? false;
+  $('timezone').value                = s.timezone ?? 'Europe/Berlin';
+  toggleIntervalVisibility(s.schedulerEnabled);
+  toggleScheduleMatrixEnabled(s.kudosScheduleEnabled ?? false);
+
+  // Render the schedule matrix (all-true by default)
+  const matrix = s.kudosScheduleMatrix || Array.from({ length: 7 }, () => Array(24).fill(true));
+  renderScheduleMatrix(matrix);
+}
+
+export function toggleIntervalVisibility(enabled) {
+  const opacity = enabled ? '1' : '0.4';
+  $('interval-group').style.opacity = opacity;
+  $('jitter-group').style.opacity   = opacity;
+  $('intervalMinutes').disabled     = !enabled;
+  $('jitterMinutes').disabled       = !enabled;
+}
+
+export async function saveSettings() {
+  try {
+    const data = {
+      schedulerEnabled:      $('schedulerEnabled').checked,
+      intervalMinutes:       Math.max(5, parseInt($('intervalMinutes').value) || 60),
+      jitterMinutes:         Math.max(0, parseFloat($('jitterMinutes').value) || 0),
+      dryRun:                $('globalDryRun').checked,
+      minKudosDelaySeconds:  Math.max(0, parseFloat($('minKudosDelaySeconds').value) || 0),
+      maxKudosDelaySeconds:  Math.max(0, parseFloat($('maxKudosDelaySeconds').value) || 0),
+      shuffleOrder:          $('shuffleOrder').checked,
+      kudosScheduleEnabled:  $('kudosScheduleEnabled').checked,
+      timezone:              $('timezone').value.trim() || 'Europe/Berlin',
+      kudosScheduleMatrix:   getScheduleMatrix(),
+    };
+    await putJson('/api/settings', data);
+    pollStatus();
+  } catch (err) {
+    toast(err.message, 'error');
+  }
+}
+
+// ── Settings tab wiring ───────────────────────────────────────────────────────
+
+export function initSettingsTab() {
+  // Prevent accidental submit via Enter key (no submit button present).
+  $('form-settings').addEventListener('submit', e => e.preventDefault());
+
+  // UI side-effects for toggle changes (interval visibility, matrix dim)
+  $('schedulerEnabled').addEventListener('change',       e => toggleIntervalVisibility(e.target.checked));
+  $('kudosScheduleEnabled').addEventListener('change',   e => toggleScheduleMatrixEnabled(e.target.checked));
+
+  // Auto-save: native form inputs and checkboxes
+  $('form-settings').addEventListener('input',  debouncedSaveSettings);
+  $('form-settings').addEventListener('change', debouncedSaveSettings);
+
+  const wrap = $('schedule-matrix-wrap');
+  if (wrap) {
+    // Auto-save: schedule matrix drag-paint and click-toggles (div cells, not form inputs)
+    wrap.addEventListener('mouseup',  debouncedSaveSettings);
+    wrap.addEventListener('touchend', debouncedSaveSettings);
+
+    // Re-render matrix whenever the wrap changes size (viewport resize or tab becoming visible).
+    // getScheduleMatrix() captures current DOM state so unsaved edits are preserved.
+    new ResizeObserver(() => {
+      const mx = $('schedule-matrix');
+      if (mx && mx.children.length) renderScheduleMatrix(getScheduleMatrix());
+    }).observe(wrap);
+  }
+}
diff --git a/src/kudosy/static/state.js b/src/kudosy/static/state.js
new file mode 100644
index 0000000..7e1a5af
--- /dev/null
+++ b/src/kudosy/static/state.js
@@ -0,0 +1,38 @@
+// ── Kudosy UI — state.js ─────────────────────────────────────────────────────
+// Shared mutable state — exported as a single object so all modules can
+// mutate it in-place.  ES module named exports of primitive let-bindings
+// are live but cannot be reassigned by importers; an object sidesteps that.
+
+export const state = {
+  // Sport data (loaded once at startup by main.js)
+  sportTypes: [],
+  sportCategories: {},   // { FootSports: [...], CycleSports: [...], … }
+
+  // Athlete cache (populated by loadConfig and athlete search)
+  athleteLabels: {},
+  athleteAvatars: {},
+
+  // Feed data
+  feedActivities: [],
+  feedFetchedAt: null,
+  feedLoaded: false,   // true after the first successful feed fetch
+  statsLoaded: false,  // true after the first stats tab visit
+  feedFilter: { status: 'all', text: '', sport: '' },
+
+  // Log-tab polling timer
+  pollTimer: null,
+
+  // Run-button spinner state
+  // The button whose spinner is currently active (null when idle).
+  runningButton: null,
+  // finished_at that was current when the user clicked Run — cleared by
+  // pollStatus() once a *newer* finished_at appears.
+  runStartStamp: null,
+  // Updated every pollStatus() tick so startRun() can snapshot it.
+  currentLastRunStamp: null,
+
+  // Auto-save guard — kept false during init so that loadConfig /
+  // loadSettings DOM mutations don't trigger premature API calls.
+  // main.js sets this to true after both loads complete.
+  autoSaveEnabled: false,
+};
diff --git a/src/kudosy/static/stats.js b/src/kudosy/static/stats.js
new file mode 100644
index 0000000..bfad284
--- /dev/null
+++ b/src/kudosy/static/stats.js
@@ -0,0 +1,162 @@
+// ── Kudosy UI — stats.js ─────────────────────────────────────────────────────
+// Statistics tab: run history chart and aggregations.
+
+import { $ } from './dom.js';
+import { fetchJson } from './api.js';
+import { formatSportLabel } from './format.js';
+import { t } from './i18n.js';
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+/** Format seconds as "1h 03min" or "45min". */
+function formatDuration(seconds) {
+  if (!seconds) return '—';
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  return h > 0 ? `${h}h ${String(m).padStart(2, '0')}min` : `${m}min`;
+}
+
+/** Group ISO timestamp into YYYY-MM-DD. */
+function toDay(isoString) {
+  return isoString ? isoString.slice(0, 10) : null;
+}
+
+// ── Canvas bar chart ──────────────────────────────────────────────────────────
+
+/**
+ * Draw a minimal bar chart on a <canvas> element.
+ * @param {HTMLCanvasElement} canvas
+ * @param {{ label: string, value: number }[]} data  - bars, in display order
+ * @param {{ barColor?: string, labelColor?: string, maxBars?: number }} opts
+ */
+function drawBarChart(canvas, data, opts = {}) {
+  const { barColor = '#6366f1', labelColor = '#64748b', maxBars = 14 } = opts;
+  const slice = data.slice(-maxBars);
+  if (!slice.length) return;
+
+  const dpr = window.devicePixelRatio || 1;
+  const W   = canvas.clientWidth;
+  const H   = canvas.clientHeight;
+  canvas.width  = W * dpr;
+  canvas.height = H * dpr;
+  const ctx = canvas.getContext('2d');
+  ctx.scale(dpr, dpr);
+
+  const pad    = { top: 8, right: 8, bottom: 28, left: 8 };
+  const maxVal = Math.max(...slice.map(d => d.value), 1);
+  const chartW = W - pad.left - pad.right;
+  const chartH = H - pad.top - pad.bottom;
+  const barW   = Math.max(4, Math.floor(chartW / slice.length) - 4);
+
+  ctx.clearRect(0, 0, W, H);
+
+  slice.forEach((d, i) => {
+    const x      = pad.left + i * (chartW / slice.length) + (chartW / slice.length - barW) / 2;
+    const barH   = Math.round((d.value / maxVal) * chartH);
+    const y      = pad.top + chartH - barH;
+
+    // Bar
+    ctx.fillStyle = barColor;
+    ctx.beginPath();
+    ctx.roundRect(x, y, barW, barH, 3);
+    ctx.fill();
+
+    // Value label (above bar)
+    if (d.value > 0) {
+      ctx.fillStyle   = barColor;
+      ctx.font        = `bold ${Math.max(9, barW > 16 ? 11 : 9)}px system-ui`;
+      ctx.textAlign   = 'center';
+      ctx.fillText(d.value, x + barW / 2, y - 2);
+    }
+
+    // X-axis label (date or sport name, below chart area)
+    ctx.fillStyle   = labelColor;
+    ctx.font        = `${Math.max(8, barW > 16 ? 10 : 8)}px system-ui`;
+    ctx.textAlign   = 'center';
+    const label     = d.label.length > 6 ? d.label.slice(5) : d.label; // "MM-DD" from "YYYY-MM-DD"
+    ctx.fillText(label, x + barW / 2, pad.top + chartH + 16);
+  });
+}
+
+// ── Stats aggregation & render ────────────────────────────────────────────────
+
+export async function loadStats() {
+  const container = $('stats-loading');
+  if (container) container.hidden = false;
+
+  try {
+    const history = await fetchJson('/api/history?limit=500');
+
+    // ── Summary cards ──────────────────────────────────────────────────────
+    const real = history.filter(e => !e.dry_run && e.success);
+    const totalRuns  = history.length;
+    const totalKudos = real.reduce((s, e) => s + (e.given || 0), 0);
+    const dryRuns    = history.filter(e => e.dry_run).length;
+
+    const elTotalRuns  = $('stat-total-runs');
+    const elTotalKudos = $('stat-total-kudos');
+    const elDryRuns    = $('stat-dry-runs');
+    if (elTotalRuns)  elTotalRuns.textContent  = totalRuns;
+    if (elTotalKudos) elTotalKudos.textContent = totalKudos;
+    if (elDryRuns)    elDryRuns.textContent    = dryRuns;
+
+    // ── Daily kudos chart (last 14 days) ──────────────────────────────────
+    const byDay = {};
+    real.forEach(e => {
+      const day = toDay(e.started_at);
+      if (day) byDay[day] = (byDay[day] || 0) + (e.given || 0);
+    });
+    // Build a continuous 14-day window
+    const today     = new Date();
+    const dailyData = [];
+    for (let i = 13; i >= 0; i--) {
+      const d   = new Date(today);
+      d.setDate(d.getDate() - i);
+      const key = d.toISOString().slice(0, 10);
+      dailyData.push({ label: key, value: byDay[key] || 0 });
+    }
+    const canvasDaily = $('chart-kudos-daily');
+    if (canvasDaily) drawBarChart(canvasDaily, dailyData);
+
+    // ── Last 20 runs detail table ──────────────────────────────────────────
+    const tbody = $('history-tbody');
+    if (tbody) {
+      tbody.innerHTML = '';
+      history.slice(0, 20).forEach(e => {
+        const tr = document.createElement('tr');
+        const date = e.started_at ? e.started_at.slice(0, 16).replace('T', ' ') : '—';
+        const kudos = e.dry_run
+          ? `(${e.would_give ?? 0} ${t('stats.simulated')})`
+          : String(e.given ?? 0);
+        const icon = !e.success ? '❌' : e.dry_run ? '🔍' : '✅';
+        tr.innerHTML = `
+          <td>${date}</td>
+          <td>${icon}</td>
+          <td>${e.total ?? 0}</td>
+          <td>${kudos}</td>
+        `;
+        tbody.appendChild(tr);
+      });
+      if (!history.length) {
+        const tr = document.createElement('tr');
+        tr.innerHTML = `<td colspan="4" class="hint" style="text-align:center">${t('stats.noData')}</td>`;
+        tbody.appendChild(tr);
+      }
+    }
+
+  } catch (err) {
+    const errEl = $('stats-error');
+    if (errEl) {
+      errEl.textContent = t('stats.loadError', { msg: err.message });
+      errEl.hidden = false;
+    }
+  } finally {
+    const container2 = $('stats-loading');
+    if (container2) container2.hidden = true;
+  }
+}
+
+export function initStatsTab() {
+  const btn = $('btn-refresh-stats');
+  if (btn) btn.addEventListener('click', loadStats);
+}
diff --git a/src/kudosy/static/status.js b/src/kudosy/static/status.js
new file mode 100644
index 0000000..b1cc07f
--- /dev/null
+++ b/src/kudosy/static/status.js
@@ -0,0 +1,152 @@
+// ── Kudosy UI — status.js ────────────────────────────────────────────────────
+// Status badge, log polling, run-button spinner management.
+
+import { $, toast, setButtonLoading } from './dom.js';
+import { fetchJson } from './api.js';
+import { formatRelative, formatTime } from './format.js';
+import { t } from './i18n.js';
+import { state } from './state.js';
+
+// ── Status polling ────────────────────────────────────────────────────────────
+
+export async function pollStatus() {
+  try {
+    const s     = await fetchJson('/api/status');
+    const badge = $('status-badge');
+    if (s.running) {
+      badge.className  = 'badge badge-running';
+      badge.textContent = t('status.running');
+    } else if (s.lastRun?.success === false) {
+      badge.className  = 'badge badge-error';
+      badge.textContent = t('status.error');
+    } else if (s.lastRun?.success === true) {
+      badge.className  = 'badge badge-ok';
+      badge.textContent = s.lastRun.dry_run ? t('status.dryRunOk') : t('status.ok');
+    } else {
+      badge.className  = 'badge badge-idle';
+      badge.textContent = t('status.ready');
+    }
+
+    // Keep the spinner visible until the run we triggered actually finishes.
+    // We compare finished_at rather than relying on s.running alone so that
+    // even very short runs (where the poller may miss the running:true window)
+    // are handled correctly.
+    const finishedStamp = s.lastRun?.finished_at ?? null;
+    if (state.runningButton) {
+      const completed = !s.running && finishedStamp && finishedStamp !== state.runStartStamp;
+      if (completed) {
+        setButtonLoading(state.runningButton, false);
+        state.runningButton = null;
+        state.runStartStamp = null;
+        $('btn-run').disabled = false;
+      } else {
+        // Run still in progress — keep spinner, keep button disabled.
+        $('btn-run').disabled = true;
+      }
+    } else {
+      // No locally-started run — mirror server state (e.g. a scheduled run).
+      $('btn-run').disabled = s.running;
+    }
+    state.currentLastRunStamp = finishedStamp;
+
+    if (s.lastRun) {
+      const lr           = s.lastRun;
+      const successLabel = lr.success
+        ? (lr.dry_run ? t('run.dryRun') : t('run.success'))
+        : t('run.error');
+      $('val-last-run').textContent = `${successLabel}  ${formatRelative(lr.finished_at)}`;
+      $('val-last-run').style.color = lr.success ? '' : 'var(--error)';
+      const kudosCount = lr.dry_run ? lr.would_give : lr.given;
+      $('val-kudos').textContent = lr.dry_run
+        ? t('status.kudosSimulated', { n: kudosCount })
+        : t('status.kudosSent',      { n: kudosCount });
+    } else {
+      $('val-last-run').textContent = t('status.noRun');
+      $('val-kudos').textContent    = '—';
+    }
+
+    if (s.schedulerEnabled && s.nextRunAt) {
+      $('val-next-run').textContent  = formatRelative(s.nextRunAt);
+      $('val-interval').textContent  = t('status.interval', {
+        m: s.intervalMinutes,
+        t: formatTime(s.nextRunAt),
+      });
+    } else {
+      $('val-next-run').textContent  = t('status.disabled');
+      $('val-interval').textContent  = t('status.schedulerOff');
+    }
+
+    // Update footer version
+    const versionEl = $('footer-version');
+    if (versionEl && s.version) versionEl.textContent = `Kudosy v${s.version}`;
+  } catch { /* ignore polling errors */ }
+}
+
+// ── Log polling ───────────────────────────────────────────────────────────────
+
+export async function pollLog() {
+  try {
+    const text    = await fetch('/api/log').then(r => r.text());
+    const el      = $('log-output');
+    const atBottom = el.scrollHeight - el.clientHeight <= el.scrollTop + 10;
+    el.textContent = text;
+    if (atBottom) el.scrollTop = el.scrollHeight;
+  } catch { /* ignore */ }
+  await pollStatus();
+}
+
+export function startPolling() {
+  stopPolling();
+  pollLog();
+  state.pollTimer = setInterval(() => {
+    if ($('auto-refresh').checked) pollLog();
+    else pollStatus();
+  }, 3000);
+}
+
+export function stopPolling() {
+  if (state.pollTimer) { clearInterval(state.pollTimer); state.pollTimer = null; }
+}
+
+// ── Run buttons ───────────────────────────────────────────────────────────────
+
+/**
+ * Fire a run request and hand off spinner ownership to pollStatus().
+ *
+ * The spinner is shown immediately and is NOT cleared in the finally-block —
+ * pollStatus() clears it once a new lastRun.finished_at appears (i.e. when
+ * the background run actually completes).  On error (e.g. 409 already running)
+ * the spinner is cleared right away since there is nothing to wait for.
+ */
+export async function startRun(btn, url) {
+  if (state.runningButton) return;          // double-click guard
+  if ($('globalDryRun')?.checked) toast(t('toast.dryRunHint'), 'info');
+  state.runningButton  = btn;
+  state.runStartStamp  = state.currentLastRunStamp;
+  setButtonLoading(btn, true);
+  $('btn-run').disabled = true;
+  try {
+    await fetchJson(url, {
+      method:  'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body:    '{}',
+    });
+    // Switch to the Log tab — this starts the 3-second poller which will
+    // eventually detect the new finished_at and clear the spinner.
+    document.querySelector('.tab[data-tab="log"]').click();
+  } catch (err) {
+    toast(err.message, 'error');
+    // No run was started — restore the button immediately.
+    setButtonLoading(btn, false);
+    state.runningButton = null;
+    $('btn-run').disabled = false;
+  }
+}
+
+export function initRunButtons() {
+  const btnRun = $('btn-run');
+  btnRun.addEventListener('click', () => {
+    const url = $('globalDryRun')?.checked ? '/api/run?dryRun=1' : '/api/run';
+    startRun(btnRun, url);
+  });
+}
diff --git a/src/kudosy/static/tabs.js b/src/kudosy/static/tabs.js
new file mode 100644
index 0000000..f078ab9
--- /dev/null
+++ b/src/kudosy/static/tabs.js
@@ -0,0 +1,85 @@
+// ── Kudosy UI — tabs.js ──────────────────────────────────────────────────────
+// Tab switching (with URL-hash persistence) and language selector.
+
+import { $ } from './dom.js';
+import { SUPPORTED, LANG_LABELS, t, getLang, setLang } from './i18n.js';
+import { state } from './state.js';
+import { pollStatus, startPolling, stopPolling } from './status.js';
+import { loadFeed, renderFeed } from './feed.js';
+import { loadStats } from './stats.js';
+
+// ── Tab switching ─────────────────────────────────────────────────────────────
+
+export function activateTab(tabName) {
+  const btn = document.querySelector(`.tab[data-tab="${tabName}"]`);
+  if (!btn) return;
+  document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+  document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('active'));
+  btn.classList.add('active');
+  const pane = $(`tab-${tabName}`);
+  if (pane) pane.classList.add('active');
+  location.hash = tabName;
+
+  if (tabName === 'log') {
+    startPolling();
+  } else if (tabName === 'feed') {
+    stopPolling();
+    pollStatus();
+    // Only fetch from Strava on first visit; use cached data on tab switches.
+    // The Refresh button is the explicit way to reload from Strava.
+    if (state.feedLoaded) renderFeed(); else loadFeed();
+  } else if (tabName === 'stats') {
+    stopPolling();
+    pollStatus();
+    // Load stats on first visit; the Refresh button handles explicit reloads.
+    if (!state.statsLoaded) {
+      state.statsLoaded = true;
+      loadStats();
+    }
+  } else {
+    stopPolling();
+    pollStatus();
+  }
+}
+
+export function initTabs() {
+  document.querySelectorAll('.tab').forEach(btn => {
+    btn.addEventListener('click', () => activateTab(btn.dataset.tab));
+  });
+
+  // Restore the last active tab from the URL hash, fall back to 'feed'.
+  const validTabs = new Set(['feed', 'config', 'log', 'stats']);
+  const hashTab   = location.hash.slice(1);
+  activateTab(validTabs.has(hashTab) ? hashTab : 'feed');
+}
+
+// ── Language selector ─────────────────────────────────────────────────────────
+
+export function initLangSelect() {
+  const sel = $('lang-select');
+  if (!sel) return;
+  for (const lang of SUPPORTED) {
+    const opt       = document.createElement('option');
+    opt.value       = lang;
+    opt.textContent = LANG_LABELS[lang];
+    if (lang === getLang()) opt.selected = true;
+    sel.appendChild(opt);
+  }
+  sel.addEventListener('change', () => {
+    setLang(sel.value, () => {
+      // Re-render dynamic areas after language change
+      pollStatus();
+      const activeFeedPane = document.querySelector('#tab-feed.active');
+      if (activeFeedPane) {
+        // Update sport dropdown "all sports" label if already populated
+        const sportSel = $('feed-filter-sport');
+        if (sportSel && sportSel.options.length > 0) {
+          sportSel.options[0].textContent = t('feed.filter.allSports');
+        }
+        if (state.feedActivities.length) renderFeed(); else loadFeed();
+      }
+    });
+    // Keep select in sync (applyStaticTranslations won't touch it)
+    sel.value = sel.value;
+  });
+}
diff --git a/src/kudosy/store.py b/src/kudosy/store.py
index 86392f3..3083492 100644
--- a/src/kudosy/store.py
+++ b/src/kudosy/store.py
@@ -95,8 +95,12 @@ def _write_json_atomic(path: Path, data: Any) -> None:
 _AVATARS_FILE = "athlete-avatars.json"
 _KUDOED_FILE = "kudoed-activities.json"
 _ACTIVITY_CACHE_FILE = "activity-cache.json"
+_HISTORY_FILE = "run-history.json"
 _LOG_FILE = "last-run.log"
 
+# Maximum number of history entries kept on disk — oldest are pruned.
+_MAX_HISTORY = 500
+
 _DEFAULT_SETTINGS = AppSettings()
 _DEFAULT_CONFIG = UserConfig()
 
@@ -244,6 +248,34 @@ def mark_activity_kudoed_in_cache(activity_id: str) -> None:
             return
 
 
+# ── Run history ───────────────────────────────────────────────────────────────
+
+
+def read_run_history(limit: int = 100) -> list[dict[str, Any]]:
+    """Return the *limit* most-recent run-history entries (newest first).
+
+    Returns an empty list when the file does not exist or is corrupt.
+    """
+    raw = _read_json(_path(_HISTORY_FILE))
+    if not isinstance(raw, list):
+        return []
+    return raw[:limit]
+
+
+def append_run_history(entry: dict[str, Any]) -> None:
+    """Prepend *entry* to run-history.json and cap the list at _MAX_HISTORY.
+
+    The entry should be a compact dict derived from a RunResult.  Existing
+    entries are preserved; the list is written atomically.
+    """
+    raw = _read_json(_path(_HISTORY_FILE))
+    history: list[dict[str, Any]] = raw if isinstance(raw, list) else []
+    history.insert(0, entry)
+    if len(history) > _MAX_HISTORY:
+        history = history[:_MAX_HISTORY]
+    _write_json_atomic(_path(_HISTORY_FILE), history)
+
+
 def log_path() -> Path:
     return _path(_LOG_FILE)
 
diff --git a/tests/api/test_routes.py b/tests/api/test_routes.py
index b0d877d..a95c6d1 100644
--- a/tests/api/test_routes.py
+++ b/tests/api/test_routes.py
@@ -90,7 +90,7 @@ def test_serve_index_injects_version(app_client: TestClient, data_dir: Path) ->
     resp = app_client.get("/")
     assert resp.status_code == 200
     body = resp.text
-    assert f"app.js?v={__version__}" in body
+    assert f"main.js?v={__version__}" in body
     assert f"styles.css?v={__version__}" in body
     assert f'"./i18n.js?v={__version__}"' in body
     assert resp.headers["cache-control"] == "no-store"
@@ -100,7 +100,7 @@ def test_versioned_asset_gets_immutable_cache_header(
     app_client: TestClient, data_dir: Path
 ) -> None:
     """Static assets requested with ?v=... get a long immutable cache header."""
-    resp = app_client.get("/app.js?v=test")
+    resp = app_client.get("/main.js?v=test")
     assert resp.status_code == 200
     assert resp.headers["cache-control"] == "max-age=31536000, immutable"
 
diff --git a/tests/unit/test_run_history.py b/tests/unit/test_run_history.py
new file mode 100644
index 0000000..5cac893
--- /dev/null
+++ b/tests/unit/test_run_history.py
@@ -0,0 +1,135 @@
+"""Unit tests for run-history store functions (append_run_history / read_run_history)."""
+
+from __future__ import annotations
+
+from pathlib import Path
+from typing import Any
+
+# ── helpers ───────────────────────────────────────────────────────────────────
+
+
+def _make_entry(**overrides: Any) -> dict[str, Any]:
+    """Return a minimal but valid RunHistoryEntry dict."""
+    base: dict[str, Any] = {
+        "started_at": "2026-01-01T10:00:00+00:00",
+        "finished_at": "2026-01-01T10:01:00+00:00",
+        "dry_run": False,
+        "total": 5,
+        "would_give": 3,
+        "given": 3,
+        "success": True,
+    }
+    base.update(overrides)
+    return base
+
+
+# ── read_run_history ──────────────────────────────────────────────────────────
+
+
+def test_read_run_history_missing_file_returns_empty_list(data_dir: Path) -> None:
+    """read_run_history() returns [] when run-history.json does not exist."""
+    from kudosy.store import read_run_history
+
+    result = read_run_history()
+    assert result == []
+
+
+def test_read_run_history_default_limit(data_dir: Path) -> None:
+    """read_run_history() with no argument returns up to 100 entries."""
+    from kudosy.store import append_run_history, read_run_history
+
+    for i in range(5):
+        append_run_history(_make_entry(total=i))
+
+    result = read_run_history()
+    assert len(result) == 5
+
+
+def test_read_run_history_limit(data_dir: Path) -> None:
+    """read_run_history(limit=2) returns only the 2 most recent entries."""
+    from kudosy.store import append_run_history, read_run_history
+
+    for i in range(5):
+        append_run_history(_make_entry(total=i))
+
+    result = read_run_history(limit=2)
+    assert len(result) == 2
+    # Most recent first: total=4, then total=3
+    assert result[0]["total"] == 4
+    assert result[1]["total"] == 3
+
+
+# ── append_run_history ────────────────────────────────────────────────────────
+
+
+def test_append_run_history_creates_file(data_dir: Path) -> None:
+    """append_run_history() creates run-history.json when it does not exist."""
+    from kudosy.store import append_run_history, read_run_history
+
+    history_file = data_dir / "run-history.json"
+    assert not history_file.exists()
+
+    append_run_history(_make_entry())
+
+    assert history_file.exists()
+    result = read_run_history()
+    assert len(result) == 1
+
+
+def test_append_run_history_accumulates_entries(data_dir: Path) -> None:
+    """Multiple append calls accumulate entries in reverse-chronological order."""
+    from kudosy.store import append_run_history, read_run_history
+
+    append_run_history(_make_entry(total=1))
+    append_run_history(_make_entry(total=2))
+    append_run_history(_make_entry(total=3))
+
+    result = read_run_history()
+    assert len(result) == 3
+    # Most recent (total=3) must be first
+    assert result[0]["total"] == 3
+    assert result[1]["total"] == 2
+    assert result[2]["total"] == 1
+
+
+def test_append_run_history_rolling_window(data_dir: Path) -> None:
+    """The history file is capped at _MAX_HISTORY entries; oldest are pruned."""
+    from kudosy import store
+    from kudosy.store import append_run_history, read_run_history
+
+    cap = store._MAX_HISTORY
+    # Write cap + 10 entries
+    for i in range(cap + 10):
+        append_run_history(_make_entry(total=i))
+
+    result = read_run_history(limit=cap + 100)
+    assert len(result) == cap
+    # Most recent entry should have total = cap + 9
+    assert result[0]["total"] == cap + 9
+
+
+def test_append_run_history_entry_fields(data_dir: Path) -> None:
+    """Appended entries contain the expected subset of RunResult fields."""
+    from kudosy.store import append_run_history, read_run_history
+
+    entry = _make_entry(
+        started_at="2026-06-01T08:00:00+00:00",
+        finished_at="2026-06-01T08:01:30+00:00",
+        dry_run=True,
+        total=10,
+        would_give=7,
+        given=0,
+        success=True,
+    )
+    append_run_history(entry)
+
+    result = read_run_history()
+    assert len(result) == 1
+    saved = result[0]
+    assert saved["started_at"] == "2026-06-01T08:00:00+00:00"
+    assert saved["finished_at"] == "2026-06-01T08:01:30+00:00"
+    assert saved["dry_run"] is True
+    assert saved["total"] == 10
+    assert saved["would_give"] == 7
+    assert saved["given"] == 0
+    assert saved["success"] is True