domma-cms 1.6.59 → 1.7.0

package/docs/superpowers/specs/plans/2026-05-06-dashboard-rebuild.md

@@ -0,0 +1,1999 @@
+# Dashboard Rebuild Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Replace the current admin dashboard with a site-aware command centre showing traffic, user journeys, spikes, content state, and combined site/server health.
+
+**Architecture:** Extend the existing analytics plugin to capture session IDs and referrers (cookie-less, sessionStorage-only) so we can derive entry/exit pages and 2-step paths. Add a `health` service that aggregates server + site checks with 30 s in-memory caching. Add `/api/dashboard/summary` that fans out to all sources in one call (with `?lite=1` for the 30 s polling tick). Rebuild the dashboard view as a thin orchestrator that loads seven self-contained widget render functions.
+
+**Tech Stack:** Fastify 5 (ESM) on the backend, Domma SPA on the frontend, `node:test` + `node:assert/strict` for tests, Chart.js (CDN, already used by the analytics plugin) for the trend chart.
+
+**Spec:** `docs/superpowers/specs/2026-05-06-dashboard-rebuild-design.md`
+
+**Project conventions to follow:**
+- Use Domma aliases (`$`, `S`, `H`, `_`, `M`, `D()`, `T`, `E`, `I`) - never vanilla equivalents
+- `.get(0)` not `[0]` to extract native DOM from Domma collections
+- Domma's `.html()` strips `<button>` - set `innerHTML` directly for static templates with buttons, or build buttons via `createElement`
+- Admin SPA imports use hard-coded `?v=N` cache busters - bump them when modifying imported modules
+- Do NOT commit during implementation - the user commits separately
+- Do NOT claim "tested"/"verified" for UI changes from server-side checks alone - only a real browser load + click counts
+- British English in user-facing copy
+- Run tests with `node --test tests/path/to/file.test.js` (no `npm test` script exists)
+
+**Security:** URLs/referrers stored by the analytics plugin come from public POST bodies. They are NOT trusted strings. Every place a widget interpolates a URL, referrer, actor name, or form name into HTML must HTML-escape it. This plan introduces a single shared `escapeHtml` helper and uses it consistently.
+
+---
+
+## File Structure
+
+**Modify:**
+- `plugins/analytics/public/inject-body.html` - beacon adds `sid` and `ref`
+- `plugins/analytics/plugin.js` - accept new fields, write to `journeys.json` (capped), add three new endpoints, decorate `fastify.analytics` with helpers
+- `plugins/analytics/CLAUDE.md` - document new storage and endpoints
+- `server/server.js` - register `dashboardRoutes`
+- `server/services/email.js` - record `lastSendResult` so health can read it
+- `server/services/plugins.js` - record plugin load failures so health can read them
+- `admin/js/api.js` - add `api.dashboard.summary` / `summaryLite` namespace
+- `admin/js/views/dashboard.js` - replace with thin orchestrator
+- `admin/js/templates/dashboard.html` - replace with widget grid skeleton
+- `admin/js/views/index.js` - bump dashboard cache buster
+- `admin/index.html` - link the new `dashboard.css`
+
+**Create:**
+- `server/services/health.js` - health check aggregator with 30 s cache
+- `server/routes/api/dashboard.js` - `/api/dashboard/summary` endpoint
+- `admin/js/views/dashboard/lib/escape.js` - shared `escapeHtml` helper
+- `admin/js/views/dashboard/widgets/kpi-strip.js`
+- `admin/js/views/dashboard/widgets/traffic-chart.js`
+- `admin/js/views/dashboard/widgets/spike-feed.js`
+- `admin/js/views/dashboard/widgets/top-pages.js`
+- `admin/js/views/dashboard/widgets/journeys.js`
+- `admin/js/views/dashboard/widgets/health-detail.js`
+- `admin/js/views/dashboard/widgets/activity-feed.js`
+- `admin/js/templates/dashboard/kpi-strip.html`
+- `admin/js/templates/dashboard/traffic-chart.html`
+- `admin/js/templates/dashboard/spike-feed.html`
+- `admin/js/templates/dashboard/top-pages.html`
+- `admin/js/templates/dashboard/journeys.html`
+- `admin/js/templates/dashboard/health-detail.html`
+- `admin/js/templates/dashboard/activity-feed.html`
+- `admin/css/dashboard.css`
+- `tests/analytics/journeys.test.js`
+- `tests/analytics/spikes.test.js`
+- `tests/services/health.test.js`
+- `tests/routes/dashboard-summary.test.js`
+
+---
+
+## Phase 1 - Analytics extensions
+
+### Task 1.1: Update beacon to send `sid` and `ref`
+
+**Files:**
+- Modify: `plugins/analytics/public/inject-body.html`
+
+- [ ] **Replace the entire file** with the new beacon:
+
+```html
+<!-- analytics: page view tracker (DNT-aware, session-deduped) -->
+<script>
+(function () {
+    if (typeof fetch !== 'function') return;
+
+    var dnt = navigator.doNotTrack === '1'
+        || window.doNotTrack === '1'
+        || navigator.msDoNotTrack === '1';
+    if (dnt) return;
+
+    var url = window.location.pathname;
+
+    // Session-scoped anonymous ID - clears with the tab. Cookie-less.
+    var sid = '';
+    try {
+        sid = sessionStorage.getItem('dm_sid') || '';
+        if (!sid) {
+            sid = (crypto && crypto.randomUUID)
+                ? crypto.randomUUID()
+                : (Date.now().toString(36) + Math.random().toString(36).slice(2, 10));
+            sessionStorage.setItem('dm_sid', sid);
+        }
+    } catch (e) {
+        // sessionStorage unavailable - proceed without sid
+    }
+
+    // Session dedup (one hit per URL per session)
+    try {
+        var key = 'dm_analytics_seen';
+        var seen = sessionStorage.getItem(key);
+        var list = seen ? seen.split('|') : [];
+        if (list.indexOf(url) !== -1) return;
+        list.push(url);
+        sessionStorage.setItem(key, list.join('|'));
+    } catch (e) {
+        // proceed anyway
+    }
+
+    // Strip query/fragment from referrer; only keep same-origin or external origin+path
+    var ref = '';
+    try {
+        if (document.referrer) {
+            var r = new URL(document.referrer);
+            ref = r.origin === window.location.origin ? r.pathname : (r.origin + r.pathname);
+        }
+    } catch (e) { /* ignore */ }
+
+    fetch('/api/plugins/analytics/hit', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        keepalive: true,
+        body: JSON.stringify({ url: url, sid: sid, ref: ref })
+    }).catch(function () { /* silent */ });
+})();
+</script>
+```
+
+- [ ] **Verify:** open the file and confirm the beacon now references `sid` and `ref`.
+
+### Task 1.2: Extend `POST /hit` to record journey events
+
+**Files:**
+- Modify: `plugins/analytics/plugin.js`
+
+- [ ] **Add the journeys file path constant** near the top, after `LEGACY_FILE`:
+
+```js
+const JOURNEYS_FILE = path.join(__dirname, 'journeys.json');
+const JOURNEY_DAILY_CAP = 5000;
+```
+
+- [ ] **Replace the existing `migrateLegacy()`** with one that also seeds `journeys.json` if missing:
+
+```js
+async function migrateLegacy() {
+    let lifetimeExists = false;
+    try {
+        await fs.access(LIFETIME_FILE);
+        lifetimeExists = true;
+    } catch { /* not migrated */ }
+
+    if (!lifetimeExists) {
+        const legacy = await readJson(LEGACY_FILE, null);
+        if (legacy && typeof legacy === 'object') {
+            await writeJson(LIFETIME_FILE, legacy);
+        } else {
+            await writeJson(LIFETIME_FILE, {});
+        }
+        await writeJson(DAILY_FILE, {});
+    }
+
+    try {
+        await fs.access(JOURNEYS_FILE);
+    } catch {
+        await writeJson(JOURNEYS_FILE, {});
+    }
+}
+```
+
+- [ ] **Replace the existing `POST /hit` handler body** with this version that validates `sid`/`ref` and appends a journey event under the daily cap:
+
+```js
+fastify.post('/hit', async (request, reply) => {
+    const { url, dnt, sid, ref } = request.body || {};
+    if (!url || typeof url !== 'string') {
+        return reply.status(400).send({ error: 'url is required' });
+    }
+    if (dnt === true || dnt === '1') {
+        return { ok: true, ignored: 'dnt' };
+    }
+
+    const normalised = url.split('?')[0].split('#')[0].replace(/\/+$/, '') || '/';
+    if (settings.excludeAdmin && normalised.startsWith('/admin')) {
+        return { ok: true, ignored: 'admin' };
+    }
+    if (Array.isArray(settings.excludePaths)) {
+        for (const prefix of settings.excludePaths) {
+            if (typeof prefix === 'string' && prefix && normalised.startsWith(prefix)) {
+                return { ok: true, ignored: 'excluded' };
+            }
+        }
+    }
+
+    const today = todayKey();
+    const [lifetime, daily, journeys] = await Promise.all([
+        readJson(LIFETIME_FILE, {}),
+        readJson(DAILY_FILE, {}),
+        readJson(JOURNEYS_FILE, {})
+    ]);
+
+    lifetime[normalised] = (lifetime[normalised] || 0) + 1;
+    if (!daily[today]) daily[today] = {};
+    daily[today][normalised] = (daily[today][normalised] || 0) + 1;
+
+    // Journey event - only if sid is a string of reasonable shape, and under cap
+    const safeSid = typeof sid === 'string' && sid.length > 0 && sid.length <= 64 ? sid : null;
+    const safeRef = typeof ref === 'string' && ref.length <= 512 ? ref : '';
+    if (safeSid) {
+        if (!journeys[today]) journeys[today] = [];
+        if (journeys[today].length < JOURNEY_DAILY_CAP) {
+            journeys[today].push({ sid: safeSid, t: Date.now(), url: normalised, ref: safeRef });
+        }
+    }
+
+    await Promise.all([
+        writeJson(LIFETIME_FILE, lifetime),
+        writeJson(DAILY_FILE, daily),
+        writeJson(JOURNEYS_FILE, journeys)
+    ]);
+    return { ok: true };
+});
+```
+
+- [ ] **Smoke check** (server is already running on port 4096; do not kill it):
+
+```bash
+curl -s -X POST http://localhost:4096/api/plugins/analytics/hit \
+  -H 'Content-Type: application/json' \
+  -d '{"url":"/about","sid":"test-sid-1","ref":"/"}'
+```
+
+Expected: `{"ok":true}`. Then `cat plugins/analytics/journeys.json` and confirm the event was appended under today's date.
+
+### Task 1.3: Add journey aggregation helpers
+
+**Files:**
+- Modify: `plugins/analytics/plugin.js`
+
+- [ ] **Add aggregation helpers** above `export default async function analyticsPlugin`:
+
+```js
+function eventsInRange(journeys, start, end) {
+    const startMs = start.getTime();
+    const endMs = end.getTime();
+    const out = [];
+    for (const [day, events] of Object.entries(journeys)) {
+        const dayMs = new Date(day + 'T00:00:00Z').getTime();
+        if (dayMs < startMs || dayMs > endMs) continue;
+        for (const ev of events) out.push(ev);
+    }
+    return out;
+}
+
+function groupBySession(events) {
+    const sessions = new Map();
+    for (const ev of events) {
+        if (!sessions.has(ev.sid)) sessions.set(ev.sid, []);
+        sessions.get(ev.sid).push(ev);
+    }
+    for (const arr of sessions.values()) arr.sort((a, b) => a.t - b.t);
+    return sessions;
+}
+
+function aggregateJourneys(events) {
+    const sessions = groupBySession(events);
+    const entry = new Map();
+    const exit = new Map();
+    const paths = new Map();
+    let bouncedSessions = 0;
+
+    for (const arr of sessions.values()) {
+        if (arr.length === 0) continue;
+        entry.set(arr[0].url, (entry.get(arr[0].url) || 0) + 1);
+        exit.set(arr[arr.length - 1].url, (exit.get(arr[arr.length - 1].url) || 0) + 1);
+        if (arr.length === 1) bouncedSessions += 1;
+        for (let i = 0; i < arr.length - 1; i += 1) {
+            const key = arr[i].url + ' → ' + arr[i + 1].url;
+            paths.set(key, (paths.get(key) || 0) + 1);
+        }
+    }
+
+    const toSorted = (m) => Array.from(m.entries())
+        .map(([url, count]) => ({ url, count }))
+        .sort((a, b) => b.count - a.count)
+        .slice(0, 10);
+
+    const pathsSorted = Array.from(paths.entries())
+        .map(([key, count]) => {
+            const [from, to] = key.split(' → ');
+            return { from, to, count };
+        })
+        .sort((a, b) => b.count - a.count)
+        .slice(0, 10);
+
+    const totalSessions = sessions.size;
+    return {
+        entry: toSorted(entry),
+        exit: toSorted(exit),
+        paths: pathsSorted,
+        bounceRate: totalSessions === 0 ? 0 : +(bouncedSessions / totalSessions).toFixed(3),
+        totalSessions
+    };
+}
+```
+
+### Task 1.4: Add `GET /journeys` endpoint
+
+**Files:**
+- Modify: `plugins/analytics/plugin.js`
+
+- [ ] **Add the route** after the existing `/series` handler:
+
+```js
+fastify.get('/journeys', { preHandler: [authenticate, requireAdmin] }, async (request) => {
+    const { range = '7d', from, to } = request.query || {};
+    const dates = rangeToDates(range === 'all' ? '30d' : range, from, to);
+    const journeys = await readJson(JOURNEYS_FILE, {});
+    const events = eventsInRange(journeys, dates.start, dates.end);
+    const agg = aggregateJourneys(events);
+    return {
+        range,
+        from: todayKey(dates.start),
+        to: todayKey(dates.end),
+        ...agg
+    };
+});
+```
+
+### Task 1.5: Add `GET /realtime` endpoint
+
+**Files:**
+- Modify: `plugins/analytics/plugin.js`
+
+- [ ] **Add the route** after `/journeys`:
+
+```js
+fastify.get('/realtime', { preHandler: [authenticate, requireAdmin] }, async () => {
+    const journeys = await readJson(JOURNEYS_FILE, {});
+    const today = todayKey();
+    const events = journeys[today] || [];
+    const cutoff = Date.now() - 5 * 60 * 1000;
+    const sids = new Set();
+    for (const ev of events) {
+        if (ev.t >= cutoff) sids.add(ev.sid);
+    }
+    return { activeSessions: sids.size, windowMinutes: 5 };
+});
+```
+
+### Task 1.6: Add spike detection helper + `GET /spikes`
+
+**Files:**
+- Modify: `plugins/analytics/plugin.js`
+
+- [ ] **Add the spike detector helper** above `export default`:
+
+```js
+function detectSpikes(daily, now = new Date()) {
+    const todayStr = todayKey(now);
+    const currentHour = now.getUTCHours();
+
+    // Approximation: distribute today's hits evenly across elapsed hours.
+    const todayUrls = daily[todayStr] || {};
+    const elapsedHours = Math.max(1, currentHour + 1);
+
+    const flagged = [];
+    for (const [url, totalToday] of Object.entries(todayUrls)) {
+        const currentHits = totalToday / elapsedHours;
+
+        // Baseline: previous 7 days' same-hour share (assume 24-hour spread)
+        const samples = [];
+        for (let i = 1; i <= 7; i += 1) {
+            const prev = new Date(now);
+            prev.setUTCDate(prev.getUTCDate() - i);
+            const key = todayKey(prev);
+            const sample = (daily[key] && daily[key][url]) ? daily[key][url] / 24 : 0;
+            samples.push(sample);
+        }
+        const mean = samples.reduce((a, b) => a + b, 0) / samples.length;
+        const variance = samples.reduce((acc, x) => acc + (x - mean) * (x - mean), 0) / samples.length;
+        const stddev = Math.sqrt(variance);
+
+        if (currentHits >= 5 && currentHits > mean + 2 * stddev && mean > 0) {
+            flagged.push({
+                url,
+                hits: Math.round(currentHits),
+                baseline: Math.round(mean),
+                ratio: +(currentHits / Math.max(mean, 0.5)).toFixed(2)
+            });
+        }
+    }
+
+    return flagged.sort((a, b) => b.ratio - a.ratio).slice(0, 5);
+}
+```
+
+- [ ] **Add the route** after `/realtime`:
+
+```js
+fastify.get('/spikes', { preHandler: [authenticate, requireAdmin] }, async () => {
+    const daily = await readJson(DAILY_FILE, {});
+    return { items: detectSpikes(daily) };
+});
+```
+
+### Task 1.7: Decorate `fastify.analytics` with internal helpers
+
+**Files:**
+- Modify: `plugins/analytics/plugin.js`
+
+- [ ] **At the top of `analyticsPlugin`** (right after `await migrateLegacy()`), decorate the Fastify instance:
+
+```js
+fastify.decorate('analytics', {
+    async getStats({ range = '7d', from, to } = {}) {
+        const dates = rangeToDates(range, from, to);
+        const [lifetime, daily] = await Promise.all([
+            readJson(LIFETIME_FILE, {}),
+            readJson(DAILY_FILE, {})
+        ]);
+        let totals; let total;
+        if (!dates) {
+            totals = lifetime;
+            total = Object.values(lifetime).reduce((a, n) => a + n, 0);
+        } else {
+            const agg = aggregateDaily(daily, dates.start, dates.end);
+            totals = agg.totals;
+            total = agg.total;
+        }
+        const top = Object.entries(totals)
+            .map(([url, hits]) => ({ url, hits }))
+            .sort((a, b) => b.hits - a.hits);
+        return { total, top, lifetimeTotal: Object.values(lifetime).reduce((a, n) => a + n, 0) };
+    },
+    async getDaily() { return readJson(DAILY_FILE, {}); },
+    async getJourneys({ range = '7d', from, to } = {}) {
+        const dates = rangeToDates(range === 'all' ? '30d' : range, from, to);
+        const journeys = await readJson(JOURNEYS_FILE, {});
+        return aggregateJourneys(eventsInRange(journeys, dates.start, dates.end));
+    },
+    async getRealtime() {
+        const journeys = await readJson(JOURNEYS_FILE, {});
+        const today = todayKey();
+        const events = journeys[today] || [];
+        const cutoff = Date.now() - 5 * 60 * 1000;
+        const sids = new Set();
+        for (const ev of events) if (ev.t >= cutoff) sids.add(ev.sid);
+        return { activeSessions: sids.size };
+    },
+    async getSpikes() {
+        const daily = await readJson(DAILY_FILE, {});
+        return { items: detectSpikes(daily) };
+    }
+});
+```
+
+- [ ] **Smoke check** the new endpoints (substitute your admin credentials):
+
+```bash
+TOKEN=$(curl -s -X POST http://localhost:4096/api/auth/login \
+  -H 'Content-Type: application/json' \
+  -d '{"email":"YOUR_EMAIL","password":"YOUR_PW"}' | jq -r .token)
+
+curl -s -H "Authorization: Bearer $TOKEN" 'http://localhost:4096/api/plugins/analytics/journeys?range=7d' | jq .
+curl -s -H "Authorization: Bearer $TOKEN" 'http://localhost:4096/api/plugins/analytics/realtime' | jq .
+curl -s -H "Authorization: Bearer $TOKEN" 'http://localhost:4096/api/plugins/analytics/spikes' | jq .
+```
+
+Expected: each returns 200 JSON with the documented shape.
+
+### Task 1.8: Tests for journey aggregation
+
+**Files:**
+- Modify: `plugins/analytics/plugin.js` (export helpers)
+- Create: `tests/analytics/journeys.test.js`
+
+- [ ] **At the very end of `plugin.js`** (after the default export), add a named export:
+
+```js
+export { aggregateJourneys, detectSpikes };
+```
+
+- [ ] **Write the test file:**
+
+```js
+import {test} from 'node:test';
+import assert from 'node:assert/strict';
+import {aggregateJourneys} from '../../plugins/analytics/plugin.js';
+
+test('aggregateJourneys returns empty result for no events', () => {
+    const r = aggregateJourneys([]);
+    assert.deepEqual(r.entry, []);
+    assert.deepEqual(r.exit, []);
+    assert.deepEqual(r.paths, []);
+    assert.equal(r.bounceRate, 0);
+    assert.equal(r.totalSessions, 0);
+});
+
+test('aggregateJourneys counts entry, exit, paths, bounce', () => {
+    const events = [
+        // session A: / → /about → /pricing
+        { sid: 'A', t: 1, url: '/',        ref: '' },
+        { sid: 'A', t: 2, url: '/about',   ref: '/' },
+        { sid: 'A', t: 3, url: '/pricing', ref: '/about' },
+        // session B: /pricing only (bounce)
+        { sid: 'B', t: 1, url: '/pricing', ref: '' },
+        // session C: / → /about
+        { sid: 'C', t: 1, url: '/',      ref: '' },
+        { sid: 'C', t: 2, url: '/about', ref: '/' }
+    ];
+    const r = aggregateJourneys(events);
+    assert.equal(r.totalSessions, 3);
+    assert.equal(r.bounceRate, 0.333);
+    assert.equal(r.entry.find(e => e.url === '/').count, 2);
+    assert.equal(r.entry.find(e => e.url === '/pricing').count, 1);
+    assert.equal(r.exit.find(e => e.url === '/pricing').count, 1);
+    assert.equal(r.exit.find(e => e.url === '/about').count, 1);
+    assert.equal(r.paths.find(p => p.from === '/' && p.to === '/about').count, 2);
+    assert.equal(r.paths.find(p => p.from === '/about' && p.to === '/pricing').count, 1);
+});
+
+test('aggregateJourneys sorts events within a session by timestamp', () => {
+    const events = [
+        { sid: 'X', t: 3, url: '/c', ref: '' },
+        { sid: 'X', t: 1, url: '/a', ref: '' },
+        { sid: 'X', t: 2, url: '/b', ref: '' }
+    ];
+    const r = aggregateJourneys(events);
+    assert.equal(r.entry[0].url, '/a');
+    assert.equal(r.exit[0].url, '/c');
+});
+```
+
+- [ ] **Run:** `node --test tests/analytics/journeys.test.js` - expect 3 passing.
+
+### Task 1.9: Tests for spike detection
+
+**Files:**
+- Create: `tests/analytics/spikes.test.js`
+
+- [ ] **Write:**
+
+```js
+import {test} from 'node:test';
+import assert from 'node:assert/strict';
+import {detectSpikes} from '../../plugins/analytics/plugin.js';
+
+function dayKey(offsetDays) {
+    const d = new Date();
+    d.setUTCHours(0, 0, 0, 0);
+    d.setUTCDate(d.getUTCDate() - offsetDays);
+    return d.toISOString().slice(0, 10);
+}
+
+test('detectSpikes returns nothing when there is no baseline', () => {
+    const daily = { [dayKey(0)]: { '/foo': 100 } };
+    const now = new Date();
+    now.setUTCHours(12, 0, 0, 0);
+    const r = detectSpikes(daily, now);
+    assert.deepEqual(r, []);
+});
+
+test('detectSpikes flags a URL whose current-hour rate exceeds baseline + 2σ', () => {
+    const daily = {};
+    for (let i = 1; i <= 7; i += 1) daily[dayKey(i)] = { '/pricing': 24 }; // 1/hour baseline
+    daily[dayKey(0)] = { '/pricing': 240 };                                // 20/hour at 12 elapsed
+    const now = new Date();
+    now.setUTCHours(11, 0, 0, 0);
+    const r = detectSpikes(daily, now);
+    assert.equal(r.length, 1);
+    assert.equal(r[0].url, '/pricing');
+    assert.ok(r[0].ratio > 10);
+});
+
+test('detectSpikes ignores low absolute volume even if ratio is high', () => {
+    const daily = {};
+    for (let i = 1; i <= 7; i += 1) daily[dayKey(i)] = { '/quiet': 24 };
+    daily[dayKey(0)] = { '/quiet': 36 }; // 3/hour < noise floor of 5
+    const now = new Date();
+    now.setUTCHours(11, 0, 0, 0);
+    const r = detectSpikes(daily, now);
+    assert.deepEqual(r, []);
+});
+```
+
+- [ ] **Run:** `node --test tests/analytics/spikes.test.js` - expect 3 passing.
+
+### Task 1.10: Update analytics plugin docs
+
+**Files:**
+- Modify: `plugins/analytics/CLAUDE.md`
+
+- [ ] **Append to the Files list:**
+
+```
+- `journeys.json` - `{ "YYYY-MM-DD": [ {sid, t, url, ref} ] }`, daily-capped at 5,000 events
+```
+
+- [ ] **Append to the Routes table:**
+
+```
+| GET    | `/journeys`    | Admin  | `?range=7d` - entry pages, exit pages, top 2-step paths, bounce rate |
+| GET    | `/realtime`    | Admin  | Distinct `sid` count active in the last 5 minutes                    |
+| GET    | `/spikes`      | Admin  | Current-hour hits per URL vs 7-day same-hour baseline; ratio > 2σ    |
+```
+
+- [ ] **Append to Gotchas:**
+
+```
+- **Journey cap:** `journeys.json` accepts at most 5,000 events per day. Hit counts in
+  `daily.json` and `lifetime.json` are unaffected - the cap only bounds journey-derived
+  features (paths, bounce rate). Increase by editing `JOURNEY_DAILY_CAP` in `plugin.js`.
+```
+
+---
+
+## Phase 2 - Health service
+
+### Task 2.1: Add last-send tracking to `email.js`
+
+**Files:**
+- Modify: `server/services/email.js`
+
+- [ ] **Add a module-level result and an exported getter** near the top:
+
+```js
+let lastSendResult = null;
+
+export function getLastSendResult() {
+    return lastSendResult;
+}
+
+function recordSendResult(ok, info) {
+    lastSendResult = {
+        ok,
+        at: new Date().toISOString(),
+        info: info || null
+    };
+}
+```
+
+- [ ] **Wrap the existing `transport.sendMail(...)` call inside `sendEmail`** so success/failure are recorded:
+
+```js
+try {
+    const info = await transport.sendMail({ from: fromHeader, to, subject, html, text });
+    recordSendResult(true, info.messageId);
+    return info;
+} catch (err) {
+    recordSendResult(false, err.message);
+    throw err;
+}
+```
+
+If `sendFormEmail` already delegates to `sendEmail`, it inherits the recording. If it has its own `transport.sendMail` call, wrap that too.
+
+### Task 2.2: Add plugin load failure tracking to `plugins.js`
+
+**Files:**
+- Modify: `server/services/plugins.js`
+
+- [ ] **Add the failure list and exports** near the top of the file:
+
+```js
+const failedLoads = [];
+
+export function recordPluginLoadFailure(name, reason) {
+    failedLoads.push({ name, reason, at: new Date().toISOString() });
+}
+
+export function getPluginLoadFailures() {
+    return failedLoads.slice();
+}
+```
+
+- [ ] **Find every place a plugin manifest validation logs a warning** (search for `[plugins]` warning logs) and call `recordPluginLoadFailure(pluginName, reason)` right next to the existing log.
+
+### Task 2.3: Create `server/services/health.js` skeleton
+
+**Files:**
+- Create: `server/services/health.js`
+
+- [ ] **Write the file:**
+
+```js
+/**
+ * Health Service
+ * Aggregates server + site health checks for the dashboard.
+ * Each check returns { id, level: 'ok'|'warn'|'fail', label, value, detail? }.
+ */
+import fs from 'fs/promises';
+import path from 'path';
+import {fileURLToPath} from 'url';
+import {config} from '../config.js';
+import {getLastSendResult} from './email.js';
+import {listPages} from './content.js';
+import {getPluginLoadFailures} from './plugins.js';
+import {FORMS_DIR} from './forms.js';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const ROOT = path.resolve(__dirname, '..', '..');
+
+const CACHE_TTL_MS = 30 * 1000;
+let cached = { at: 0, value: null };
+
+const LEVELS = { ok: 0, warn: 1, fail: 2 };
+function worstLevel(checks) {
+    let worst = 'ok';
+    for (const c of checks) if (LEVELS[c.level] > LEVELS[worst]) worst = c.level;
+    return worst;
+}
+
+function formatBytes(n) {
+    if (n < 1024) return n + ' B';
+    if (n < 1024 * 1024) return (n / 1024).toFixed(1) + ' KB';
+    if (n < 1024 * 1024 * 1024) return (n / 1024 / 1024).toFixed(1) + ' MB';
+    return (n / 1024 / 1024 / 1024).toFixed(2) + ' GB';
+}
+
+function formatDuration(seconds) {
+    const d = Math.floor(seconds / 86400);
+    const h = Math.floor((seconds % 86400) / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    if (d > 0) return `${d}d ${h}h`;
+    if (h > 0) return `${h}h ${m}m`;
+    return `${m}m`;
+}
+
+async function dirSize(dir) {
+    let total = 0;
+    let entries;
+    try { entries = await fs.readdir(dir, { withFileTypes: true }); }
+    catch { return 0; }
+    for (const e of entries) {
+        const full = path.join(dir, e.name);
+        if (e.isDirectory()) total += await dirSize(full);
+        else if (e.isFile()) {
+            try { total += (await fs.stat(full)).size; } catch { /* ignore */ }
+        }
+    }
+    return total;
+}
+
+// Individual checks - defined in tasks 2.4-2.6 below
+
+export async function getHealth() {
+    if (cached.value && Date.now() - cached.at < CACHE_TTL_MS) return cached.value;
+    const checks = await Promise.all([
+        checkUptime(),
+        checkMemory(),
+        checkContentDisk(),
+        checkStalePages(),
+        checkMissingMeta(),
+        checkLastForm(),
+        checkSmtp(),
+        checkPluginLoad()
+    ]);
+    const value = { status: worstLevel(checks), checks };
+    cached = { at: Date.now(), value };
+    return value;
+}
+
+export function _resetCache() { cached = { at: 0, value: null }; }
+```
+
+(The `getHealth` export references `checkUptime`/`checkMemory`/etc. - they will be added in tasks 2.4-2.6. The file will not run until those are present; add them all before running tests.)
+
+### Task 2.4: Implement uptime, memory, disk checks
+
+**Files:**
+- Modify: `server/services/health.js`
+
+- [ ] **Add the check functions** above the `getHealth` export:
+
+```js
+async function checkUptime() {
+    return {
+        id: 'uptime',
+        level: 'ok',
+        label: 'Uptime',
+        value: formatDuration(Math.floor(process.uptime()))
+    };
+}
+
+async function checkMemory() {
+    const mem = process.memoryUsage();
+    const usedMb = mem.heapUsed / 1024 / 1024;
+    const totalMb = mem.heapTotal / 1024 / 1024;
+    const pct = totalMb === 0 ? 0 : usedMb / totalMb;
+    return {
+        id: 'memory',
+        level: pct > 0.9 ? 'warn' : 'ok',
+        label: 'Heap',
+        value: `${usedMb.toFixed(0)} / ${totalMb.toFixed(0)} MB`
+    };
+}
+
+async function checkContentDisk() {
+    const contentDir = path.isAbsolute(config.content.contentDir)
+        ? config.content.contentDir
+        : path.join(ROOT, config.content.contentDir);
+    const size = await dirSize(contentDir);
+    return {
+        id: 'disk-content',
+        level: 'ok',
+        label: 'Content disk',
+        value: formatBytes(size)
+    };
+}
+```
+
+### Task 2.5: Implement stale-pages and missing-meta checks
+
+**Files:**
+- Modify: `server/services/health.js`
+
+- [ ] **Add both functions:**
+
+```js
+async function checkStalePages() {
+    const pages = await listPages().catch(() => []);
+    const cutoff = Date.now() - 90 * 24 * 60 * 60 * 1000;
+    const stale = pages.filter(p => {
+        const updated = p.updatedAt ? new Date(p.updatedAt).getTime() : 0;
+        return updated > 0 && updated < cutoff;
+    });
+    return {
+        id: 'stale-pages',
+        level: stale.length === 0 ? 'ok' : 'warn',
+        label: 'Stale pages (>90d)',
+        value: stale.length,
+        detail: stale.slice(0, 10).map(p => p.urlPath)
+    };
+}
+
+async function checkMissingMeta() {
+    const pages = await listPages().catch(() => []);
+    const missing = pages.filter(p => !p.description || String(p.description).trim() === '');
+    return {
+        id: 'missing-meta',
+        level: missing.length === 0 ? 'ok' : 'warn',
+        label: 'Pages missing description',
+        value: missing.length,
+        detail: missing.slice(0, 10).map(p => p.urlPath)
+    };
+}
+```
+
+### Task 2.6: Implement last-form, SMTP, plugin-load checks
+
+**Files:**
+- Modify: `server/services/health.js`
+
+- [ ] **Add the three remaining check functions:**
+
+```js
+async function checkLastForm() {
+    let formsExist = false;
+    let newest = 0;
+    try {
+        const formFiles = await fs.readdir(FORMS_DIR);
+        formsExist = formFiles.some(f => f.endsWith('.json'));
+    } catch { /* no forms dir */ }
+
+    // Submissions live as collection entries under content/collections/<formSlug>/
+    const collectionsDir = path.join(ROOT, 'content', 'collections');
+    let dirs = [];
+    try { dirs = await fs.readdir(collectionsDir, { withFileTypes: true }); } catch { /* none */ }
+    for (const d of dirs) {
+        if (!d.isDirectory()) continue;
+        const slugDir = path.join(collectionsDir, d.name);
+        let entries = [];
+        try { entries = await fs.readdir(slugDir); } catch { continue; }
+        for (const f of entries) {
+            if (!f.endsWith('.json')) continue;
+            try {
+                const stat = await fs.stat(path.join(slugDir, f));
+                if (stat.mtimeMs > newest) newest = stat.mtimeMs;
+            } catch { /* ignore */ }
+        }
+    }
+
+    if (!formsExist) {
+        return { id: 'last-form', level: 'ok', label: 'Last form submission', value: 'no forms defined' };
+    }
+    if (newest === 0) {
+        return { id: 'last-form', level: 'warn', label: 'Last form submission', value: 'never' };
+    }
+    const ageDays = (Date.now() - newest) / (24 * 60 * 60 * 1000);
+    return {
+        id: 'last-form',
+        level: ageDays > 30 ? 'warn' : 'ok',
+        label: 'Last form submission',
+        value: new Date(newest).toISOString()
+    };
+}
+
+async function checkSmtp() {
+    const r = getLastSendResult();
+    if (!r) return { id: 'smtp', level: 'ok', label: 'Last email send', value: 'never sent' };
+    return {
+        id: 'smtp',
+        level: r.ok ? 'ok' : 'fail',
+        label: 'Last email send',
+        value: r.at,
+        detail: r.info ? [r.info] : []
+    };
+}
+
+async function checkPluginLoad() {
+    const failures = getPluginLoadFailures();
+    return {
+        id: 'plugin-load',
+        level: failures.length === 0 ? 'ok' : 'fail',
+        label: 'Plugin failures',
+        value: failures.length,
+        detail: failures.slice(0, 10).map(f => `${f.name}: ${f.reason}`)
+    };
+}
+```
+
+### Task 2.7: Health service tests
+
+**Files:**
+- Create: `tests/services/health.test.js`
+
+- [ ] **Write:**
+
+```js
+import {test} from 'node:test';
+import assert from 'node:assert/strict';
+import {getHealth, _resetCache} from '../../server/services/health.js';
+
+test('getHealth returns shape with status and checks array', async () => {
+    _resetCache();
+    const r = await getHealth();
+    assert.ok(['ok', 'warn', 'fail'].includes(r.status));
+    assert.ok(Array.isArray(r.checks));
+    const ids = r.checks.map(c => c.id).sort();
+    assert.deepEqual(ids, [
+        'disk-content', 'last-form', 'memory', 'missing-meta',
+        'plugin-load', 'smtp', 'stale-pages', 'uptime'
+    ]);
+});
+
+test('getHealth caches results within TTL', async () => {
+    _resetCache();
+    const r1 = await getHealth();
+    const r2 = await getHealth();
+    assert.equal(r1, r2); // cache hit returns the exact same object
+});
+```
+
+- [ ] **Run:** `node --test tests/services/health.test.js` - expect 2 passing.
+
+---
+
+## Phase 3 - Dashboard summary endpoint
+
+### Task 3.1: Create `server/routes/api/dashboard.js`
+
+**Files:**
+- Create: `server/routes/api/dashboard.js`
+
+- [ ] **Write:**
+
+```js
+/**
+ * Dashboard API
+ * Aggregates traffic, journeys, spikes, health, and activity for the admin dashboard.
+ *
+ * GET /api/dashboard/summary           full payload
+ * GET /api/dashboard/summary?lite=1    KPI strip + spikes + health.status only
+ */
+import fs from 'fs/promises';
+import path from 'path';
+import {fileURLToPath} from 'url';
+import {authenticate, requireAdmin} from '../../middleware/auth.js';
+import {getHealth} from '../../services/health.js';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const ROOT = path.resolve(__dirname, '..', '..', '..');
+
+function todayKey(d = new Date()) {
+    return d.toISOString().slice(0, 10);
+}
+function isoDaysAgo(n) {
+    const d = new Date();
+    d.setUTCHours(0, 0, 0, 0);
+    d.setUTCDate(d.getUTCDate() - n);
+    return todayKey(d);
+}
+function sumDay(daily, key) {
+    return Object.values(daily[key] || {}).reduce((a, n) => a + n, 0);
+}
+function sumRange(daily, fromKey, toKey) {
+    let total = 0;
+    for (const [day, urls] of Object.entries(daily)) {
+        if (day < fromKey || day > toKey) continue;
+        for (const n of Object.values(urls)) total += n;
+    }
+    return total;
+}
+
+function buildTopPages(daily, days = 7) {
+    const totals = {};
+    const perDay = {};
+    for (let i = days - 1; i >= 0; i -= 1) {
+        const k = isoDaysAgo(i);
+        for (const [url, n] of Object.entries(daily[k] || {})) {
+            totals[url] = (totals[url] || 0) + n;
+            if (!perDay[url]) perDay[url] = new Array(days).fill(0);
+            perDay[url][days - 1 - i] = n;
+        }
+    }
+    const prevTotals = {};
+    for (let i = 2 * days - 1; i >= days; i -= 1) {
+        const k = isoDaysAgo(i);
+        for (const [url, n] of Object.entries(daily[k] || {})) {
+            prevTotals[url] = (prevTotals[url] || 0) + n;
+        }
+    }
+    return Object.entries(totals)
+        .map(([url, hits]) => {
+            const prev = prevTotals[url] || 0;
+            const deltaPct = prev === 0 ? null : +(((hits - prev) / prev) * 100).toFixed(1);
+            return { url, hits, deltaPct, spark: perDay[url] };
+        })
+        .sort((a, b) => b.hits - a.hits)
+        .slice(0, 5);
+}
+
+async function buildActivity() {
+    const items = [];
+
+    // Versions: each page directory has _meta.json with { versions: [{at, kind, actor}, …] }
+    const versionsDir = path.join(ROOT, 'content', 'versions');
+    try {
+        const dirs = await fs.readdir(versionsDir, { withFileTypes: true });
+        for (const d of dirs) {
+            if (!d.isDirectory()) continue;
+            const meta = path.join(versionsDir, d.name, '_meta.json');
+            try {
+                const j = JSON.parse(await fs.readFile(meta, 'utf8'));
+                if (Array.isArray(j.versions)) {
+                    for (const v of j.versions.slice(-3)) {
+                        items.push({
+                            type: v.kind === 'publish' ? 'publish' : 'edit',
+                            at: v.at,
+                            actor: v.actor || 'unknown',
+                            target: '/' + (d.name === '_index' ? '' : d.name)
+                        });
+                    }
+                }
+            } catch { /* skip */ }
+        }
+    } catch { /* none */ }
+
+    // Form submissions: collection entries
+    const collectionsDir = path.join(ROOT, 'content', 'collections');
+    try {
+        const slugs = await fs.readdir(collectionsDir, { withFileTypes: true });
+        for (const slug of slugs) {
+            if (!slug.isDirectory()) continue;
+            const slugDir = path.join(collectionsDir, slug.name);
+            const entries = await fs.readdir(slugDir).catch(() => []);
+            for (const f of entries.slice(-3)) {
+                if (!f.endsWith('.json')) continue;
+                try {
+                    const stat = await fs.stat(path.join(slugDir, f));
+                    items.push({ type: 'form', at: stat.mtime.toISOString(), form: slug.name });
+                } catch { /* skip */ }
+            }
+        }
+    } catch { /* none */ }
+
+    return items
+        .filter(i => i.at)
+        .sort((a, b) => (b.at || '').localeCompare(a.at || ''))
+        .slice(0, 10);
+}
+
+export async function dashboardRoutes(fastify) {
+    const guard = { preHandler: [authenticate, requireAdmin] };
+
+    fastify.get('/dashboard/summary', guard, async (request) => {
+        const lite = request.query.lite === '1' || request.query.lite === 'true';
+        const warnings = [];
+        const safe = async (label, fn) => {
+            try { return await fn(); }
+            catch (e) { warnings.push(`${label}: ${e.message}`); return null; }
+        };
+
+        const analytics = fastify.analytics;
+        const daily = analytics ? (await safe('analytics.daily', () => analytics.getDaily())) || {} : {};
+
+        const today = todayKey();
+        const yesterday = isoDaysAgo(1);
+        const todayHits = sumDay(daily, today);
+        const yesterdayHits = sumDay(daily, yesterday);
+        const deltaPct = yesterdayHits === 0
+            ? null
+            : +(((todayHits - yesterdayHits) / yesterdayHits) * 100).toFixed(1);
+        const traffic = {
+            today: todayHits,
+            yesterday: yesterdayHits,
+            deltaPct,
+            weekToDate: sumRange(daily, isoDaysAgo(6), today),
+            previousWeek: sumRange(daily, isoDaysAgo(13), isoDaysAgo(7))
+        };
+
+        const realtime = analytics
+            ? (await safe('analytics.realtime', () => analytics.getRealtime())) || { activeSessions: 0 }
+            : { activeSessions: 0 };
+        const spikes = analytics
+            ? ((await safe('analytics.spikes', () => analytics.getSpikes())) || { items: [] }).items
+            : [];
+        const health = await safe('health', () => getHealth()) || { status: 'ok', checks: [] };
+
+        if (lite) {
+            return {
+                traffic: { today: traffic.today, yesterday: traffic.yesterday, deltaPct: traffic.deltaPct },
+                realtime,
+                spikes,
+                health: { status: health.status },
+                warnings
+            };
+        }
+
+        const topPages = buildTopPages(daily);
+        const journeys = analytics
+            ? (await safe('analytics.journeys', () => analytics.getJourneys({ range: '7d' }))) || null
+            : null;
+        const activity = (await safe('activity', () => buildActivity())) || [];
+
+        return { traffic, topPages, journeys, spikes, realtime, health, activity, warnings };
+    });
+}
+```
+
+### Task 3.2: Register dashboard route in `server.js`
+
+**Files:**
+- Modify: `server/server.js`
+
+- [ ] **Add the dynamic import** alongside the others (search for `notificationsRoutes`):
+
+```js
+const {dashboardRoutes} = await import('./routes/api/dashboard.js');
+```
+
+- [ ] **Add the registration** after `notificationsRoutes`:
+
+```js
+await app.register(dashboardRoutes, { prefix: '/api' });
+```
+
+- [ ] **Smoke check:**
+
+```bash
+curl -s -H "Authorization: Bearer $TOKEN" http://localhost:4096/api/dashboard/summary | jq '.health.status, .traffic.today, (.topPages | length), (.activity | length)'
+curl -s -H "Authorization: Bearer $TOKEN" 'http://localhost:4096/api/dashboard/summary?lite=1' | jq .
+```
+
+Expected: full call returns the documented shape; `?lite=1` returns only `traffic`, `realtime`, `spikes`, `health.status`, `warnings`.
+
+### Task 3.3: Test graceful degradation when analytics is absent
+
+**Files:**
+- Create: `tests/routes/dashboard-summary.test.js`
+
+- [ ] **Write:**
+
+```js
+import {test} from 'node:test';
+import assert from 'node:assert/strict';
+import Fastify from 'fastify';
+import {dashboardRoutes} from '../../server/routes/api/dashboard.js';
+
+async function buildApp() {
+    const app = Fastify({ logger: false });
+    // The dashboard route guards with [authenticate, requireAdmin] from middleware/auth.js.
+    // We register the route under a child instance whose preHandler short-circuits the guard.
+    await app.register(async (instance) => {
+        instance.addHook('onRequest', async (req) => {
+            req.user = { id: 'test', role: 'admin' };
+            // Bypass JWT verification by setting jwtVerify to a no-op for this scope.
+            req.jwtVerify = async () => {};
+        });
+        await instance.register(dashboardRoutes, { prefix: '/api' });
+    });
+    return app;
+}
+
+test('dashboard summary returns 200 with empty data when analytics decorator is absent', async () => {
+    const app = await buildApp();
+    const res = await app.inject({ method: 'GET', url: '/api/dashboard/summary' });
+    assert.equal(res.statusCode, 200);
+    const body = res.json();
+    assert.equal(body.traffic.today, 0);
+    assert.equal(body.journeys, null);
+    assert.deepEqual(body.spikes, []);
+    await app.close();
+});
+```
+
+- [ ] **Run:** `node --test tests/routes/dashboard-summary.test.js`. If the test fails because the real `authenticate` middleware (imported by `dashboardRoutes`) still calls `request.jwtVerify` on a Fastify instance that was never decorated by `@fastify/jwt`, change the test to mock `jwtVerify` on the Fastify instance itself:
+
+```js
+app.decorateRequest('jwtVerify', async function () { this.user = { id: 'test', role: 'admin' }; });
+```
+
+Or, simpler: **refactor `dashboardRoutes` to accept the auth functions as options** and pass them in from `server.js`. The test then passes its own no-op functions. Recommended.
+
+### Task 3.4: Update `MEMORY.md` index
+
+**Files:**
+- Modify: `/home/darryl/.claude/projects/-home-darryl-src-js-domma-cms/memory/MEMORY.md`
+
+- [ ] **Add a single index entry** under a sensible section (Project) - keep under ~150 chars:
+
+```
+- [project_dashboard.md](project_dashboard.md) - Dashboard aggregates analytics + health via /api/dashboard/summary; widgets in admin/js/views/dashboard/widgets/
+```
+
+- [ ] **Create the topic file** at `/home/darryl/.claude/projects/-home-darryl-src-js-domma-cms/memory/project_dashboard.md`:
+
+```markdown
+---
+name: Dashboard architecture
+description: Where dashboard widgets, summary endpoint, and health checks live
+type: project
+---
+
+Dashboard view is a thin orchestrator that fetches `/api/dashboard/summary` once on mount and polls `?lite=1` every 30 s for KPI strip + spikes + health pill.
+
+**Why:** Originally the dashboard was three count cards; the user wanted a real command centre. Single-fetch design avoids 8 parallel calls on mount.
+
+**How to apply:** When adding a new dashboard tile, create a widget in `admin/js/views/dashboard/widgets/` with a default-exported `(slot, data) => void` function and add an entry to the `WIDGETS` array in `admin/js/views/dashboard.js`. Health checks live in `server/services/health.js`. Cross-plugin data flows through the `fastify.analytics` decorator set in `plugins/analytics/plugin.js`.
+```
+
+---
+
+## Phase 4 - Frontend dashboard
+
+### Task 4.1: Add `api.dashboard` namespace
+
+**Files:**
+- Modify: `admin/js/api.js`
+
+- [ ] **Inside the `api` object** (before the closing `}`, near the existing `system:` namespace), add:
+
+```js
+dashboard: {
+    summary:     ()  => apiRequest('/dashboard/summary',         { method: 'GET' }),
+    summaryLite: ()  => apiRequest('/dashboard/summary?lite=1',  { method: 'GET' })
+},
+```
+
+### Task 4.2: Shared `escapeHtml` helper
+
+**Files:**
+- Create: `admin/js/views/dashboard/lib/escape.js`
+
+- [ ] **Write:**
+
+```js
+/**
+ * Escape a string for safe inclusion in HTML.
+ * Handles <, >, &, ", ' which is enough for both element content and double-quoted attributes.
+ * Use whenever interpolating user-controlled data (URLs, referrers, actor names, form names)
+ * into an innerHTML string. The analytics plugin accepts URLs from public POST bodies, so
+ * those values are NOT trusted.
+ */
+export function escapeHtml(value) {
+    if (value == null) return '';
+    return String(value)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+```
+
+### Task 4.3: New dashboard grid skeleton
+
+**Files:**
+- Modify: `admin/js/templates/dashboard.html`
+
+- [ ] **Replace the entire file:**
+
+```html
+<div class="view-header">
+    <h1><span data-icon="home"></span> Dashboard</h1>
+    <div class="view-header-actions">
+        <span class="dash-updated" id="dash-updated"></span>
+        <a href="#/pages/new" class="btn btn-primary"><span data-icon="plus"></span> New Page</a>
+    </div>
+</div>
+
+<div id="dash-warnings" class="dash-warnings" hidden></div>
+
+<div class="dashboard-grid">
+    <section id="dash-kpi-strip" class="dash-row dash-row-kpi"></section>
+
+    <section class="dash-row dash-row-traffic">
+        <div id="dash-traffic-chart" class="dash-card dash-card-wide"></div>
+        <div id="dash-spike-feed" class="dash-card"></div>
+    </section>
+
+    <section class="dash-row dash-row-content">
+        <div id="dash-top-pages" class="dash-card"></div>
+        <div id="dash-journeys" class="dash-card"></div>
+    </section>
+
+    <section class="dash-row dash-row-health">
+        <div id="dash-health-detail" class="dash-card"></div>
+        <div id="dash-activity-feed" class="dash-card"></div>
+    </section>
+</div>
+```
+
+### Task 4.4: Dashboard CSS
+
+**Files:**
+- Create: `admin/css/dashboard.css`
+- Modify: `admin/index.html`
+
+- [ ] **Write the CSS file:**
+
+```css
+.dashboard-grid {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dm-spacing-4, 16px);
+}
+.dash-row { display: grid; gap: var(--dm-spacing-4, 16px); }
+.dash-row-kpi      { grid-template-columns: repeat(4, 1fr); }
+.dash-row-traffic  { grid-template-columns: 2fr 1fr; }
+.dash-row-content  { grid-template-columns: 1fr 1fr; }
+.dash-row-health   { grid-template-columns: 1fr 1fr; }
+@media (max-width: 960px) {
+    .dash-row-kpi     { grid-template-columns: repeat(2, 1fr); }
+    .dash-row-traffic,
+    .dash-row-content,
+    .dash-row-health  { grid-template-columns: 1fr; }
+}
+
+.dash-card {
+    background: var(--dm-surface, #fff);
+    border: 1px solid var(--dm-border, #e5e7eb);
+    border-radius: var(--dm-radius, 8px);
+    padding: var(--dm-spacing-4, 16px);
+}
+
+.dash-kpi { display: flex; align-items: center; gap: var(--dm-spacing-3, 12px); }
+.dash-kpi-icon  { font-size: 24px; opacity: 0.8; }
+.dash-kpi-value { font-size: 28px; font-weight: 600; line-height: 1; }
+.dash-kpi-label { font-size: 12px; color: var(--dm-muted, #6b7280); text-transform: uppercase; letter-spacing: 0.05em; }
+.dash-kpi-delta { font-size: 12px; margin-top: 4px; }
+.dash-kpi-delta.up   { color: var(--dm-success, #16a34a); }
+.dash-kpi-delta.down { color: var(--dm-danger,  #dc2626); }
+
+.dash-health-pill { display: inline-flex; align-items: center; gap: 6px; }
+.dash-health-pill[data-level="ok"]   { color: var(--dm-success, #16a34a); }
+.dash-health-pill[data-level="warn"] { color: var(--dm-warning, #d97706); }
+.dash-health-pill[data-level="fail"] { color: var(--dm-danger,  #dc2626); }
+
+.dash-spike-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--dm-border, #e5e7eb); }
+.dash-spike-row:last-child { border-bottom: 0; }
+
+.dash-spark { display: inline-block; width: 80px; height: 24px; vertical-align: middle; margin-left: 8px; }
+
+.dash-warnings {
+    background: var(--dm-warning-bg, #fef3c7);
+    border: 1px solid var(--dm-warning, #d97706);
+    color: var(--dm-warning-fg, #78350f);
+    padding: 8px 12px;
+    border-radius: var(--dm-radius, 8px);
+    margin-bottom: 12px;
+}
+
+.dash-updated { font-size: 12px; color: var(--dm-muted, #6b7280); margin-right: 8px; }
+
+.dash-journey-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
+@media (max-width: 720px) { .dash-journey-grid { grid-template-columns: 1fr; } }
+.dash-journey-grid h4 { font-size: 12px; text-transform: uppercase; color: var(--dm-muted, #6b7280); margin: 0 0 6px; }
+.dash-bounce { margin-top: 12px; font-size: 14px; color: var(--dm-muted, #6b7280); }
+.dash-empty  { font-size: 13px; color: var(--dm-muted, #6b7280); margin: 8px 0 0; }
+```
+
+- [ ] **Add the link** to `admin/index.html` alongside the other admin CSS `<link>` tags (search for an existing `/admin/css/` link and add immediately after):
+
+```html
+<link rel="stylesheet" href="/admin/css/dashboard.css?v=1">
+```
+
+### Task 4.5: Widget - KPI strip
+
+**Files:**
+- Create: `admin/js/templates/dashboard/kpi-strip.html`
+- Create: `admin/js/views/dashboard/widgets/kpi-strip.js`
+
+- [ ] **Template:**
+
+```html
+<div class="dash-card dash-kpi">
+    <span class="dash-kpi-icon" data-icon="trending-up"></span>
+    <div>
+        <div class="dash-kpi-value" data-field="hits-today">-</div>
+        <div class="dash-kpi-label">Hits today</div>
+        <div class="dash-kpi-delta" data-field="hits-delta"></div>
+    </div>
+</div>
+<div class="dash-card dash-kpi">
+    <span class="dash-kpi-icon" data-icon="users"></span>
+    <div>
+        <div class="dash-kpi-value" data-field="active-sessions">-</div>
+        <div class="dash-kpi-label">Active sessions (5m)</div>
+    </div>
+</div>
+<div class="dash-card dash-kpi">
+    <span class="dash-kpi-icon" data-icon="inbox"></span>
+    <div>
+        <div class="dash-kpi-value" data-field="submissions-week">-</div>
+        <div class="dash-kpi-label">Submissions this week</div>
+    </div>
+</div>
+<div class="dash-card dash-kpi">
+    <span class="dash-kpi-icon" data-icon="activity"></span>
+    <div>
+        <div class="dash-kpi-value">
+            <span class="dash-health-pill" data-field="health-pill" data-level="ok">
+                <span data-icon="circle"></span>
+                <span data-field="health-label">OK</span>
+            </span>
+        </div>
+        <div class="dash-kpi-label">Site health</div>
+    </div>
+</div>
+```
+
+- [ ] **Render function** - uses `.text()` for all dynamic values (Domma's `.text()` always sets textContent, so no escaping needed for these):
+
+```js
+export default function renderKpiStrip($slot, data) {
+    const today = data?.traffic?.today ?? 0;
+    const delta = data?.traffic?.deltaPct;
+    $slot.find('[data-field="hits-today"]').text(today);
+
+    const $delta = $slot.find('[data-field="hits-delta"]');
+    if (delta == null) {
+        $delta.text('').removeClass('up down');
+    } else if (delta >= 0) {
+        $delta.text('+' + delta + '% vs yesterday').removeClass('down').addClass('up');
+    } else {
+        $delta.text(delta + '% vs yesterday').removeClass('up').addClass('down');
+    }
+
+    $slot.find('[data-field="active-sessions"]').text(data?.realtime?.activeSessions ?? 0);
+    $slot.find('[data-field="submissions-week"]').text(data?._submissionsWeek ?? '-');
+
+    const status = data?.health?.status || 'ok';
+    const labelMap = { ok: 'OK', warn: 'Attention', fail: 'Failing' };
+    $slot.find('[data-field="health-pill"]').attr('data-level', status);
+    $slot.find('[data-field="health-label"]').text(labelMap[status]);
+}
+```
+
+### Task 4.6: Widget - Traffic chart
+
+**Files:**
+- Create: `admin/js/templates/dashboard/traffic-chart.html`
+- Create: `admin/js/views/dashboard/widgets/traffic-chart.js`
+
+- [ ] **Template:**
+
+```html
+<h3>Traffic - last 30 days</h3>
+<canvas id="dash-traffic-canvas" height="120"></canvas>
+<p class="dash-empty" hidden>No traffic recorded yet.</p>
+```
+
+- [ ] **Render** (Chart.js loaded once from CDN, reusing the analytics plugin's pattern):
+
+```js
+const CHART_CDN = 'https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.js';
+let chartReady = null;
+function loadChart() {
+    if (window.Chart) return Promise.resolve(window.Chart);
+    if (chartReady) return chartReady;
+    chartReady = new Promise((resolve, reject) => {
+        const s = document.createElement('script');
+        s.src = CHART_CDN;
+        s.onload = () => resolve(window.Chart);
+        s.onerror = reject;
+        document.head.appendChild(s);
+    });
+    return chartReady;
+}
+
+let instance = null;
+
+export default async function renderTrafficChart($slot, data) {
+    const Chart = await loadChart();
+
+    const days = 30;
+    const series = [];
+    for (let i = days - 1; i >= 0; i -= 1) {
+        const d = new Date();
+        d.setDate(d.getDate() - i);
+        series.push({ label: d.toISOString().slice(5, 10), hits: 0 });
+    }
+    if (Array.isArray(data?.topPages)) {
+        for (const p of data.topPages) {
+            if (!Array.isArray(p.spark)) continue;
+            const offset = days - p.spark.length;
+            p.spark.forEach((n, idx) => { series[offset + idx].hits += n; });
+        }
+    }
+
+    const empty = series.every(s => s.hits === 0);
+    if (empty) $slot.find('.dash-empty').removeAttr('hidden'); else $slot.find('.dash-empty').attr('hidden', 'hidden');
+
+    const canvas = $slot.find('#dash-traffic-canvas').get(0);
+    if (!canvas) return;
+    if (instance) { instance.destroy(); instance = null; }
+    if (empty) return;
+
+    instance = new Chart(canvas, {
+        type: 'line',
+        data: {
+            labels: series.map(s => s.label),
+            datasets: [{
+                data: series.map(s => s.hits),
+                borderColor: 'rgba(37, 99, 235, 1)',
+                backgroundColor: 'rgba(37, 99, 235, 0.15)',
+                fill: true,
+                tension: 0.3,
+                pointRadius: 0
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: { legend: { display: false } },
+            scales: { x: { ticks: { maxTicksLimit: 8 } }, y: { beginAtZero: true } }
+        }
+    });
+}
+```
+
+> Note: the spec calls for an hourly-today overlay. The summary endpoint does not return per-hour data; adding the overlay is straightforward once the analytics plugin tracks per-hour counts. Out of scope for this plan.
+
+### Task 4.7: Widget - Spike feed
+
+**Files:**
+- Create: `admin/js/templates/dashboard/spike-feed.html`
+- Create: `admin/js/views/dashboard/widgets/spike-feed.js`
+
+- [ ] **Template:**
+
+```html
+<h3>Spikes (last hour)</h3>
+<div data-field="spike-list"></div>
+<p class="dash-empty" hidden>No anomalies detected.</p>
+```
+
+- [ ] **Render** (escape every URL - they came from public POST bodies):
+
+```js
+import {escapeHtml} from '../lib/escape.js';
+
+export default function renderSpikeFeed($slot, data) {
+    const items = Array.isArray(data?.spikes) ? data.spikes : [];
+    if (items.length === 0) $slot.find('.dash-empty').removeAttr('hidden');
+    else $slot.find('.dash-empty').attr('hidden', 'hidden');
+
+    const html = items.map(s => `
+        <div class="dash-spike-row">
+            <span><a href="${escapeHtml(s.url)}">${escapeHtml(s.url)}</a></span>
+            <span><strong>${Number(s.hits) | 0}</strong> · ×${Number(s.ratio) || 0}</span>
+        </div>
+    `).join('');
+    $slot.find('[data-field="spike-list"]').get(0).innerHTML = html;
+}
+```
+
+### Task 4.8: Widget - Top pages with sparklines
+
+**Files:**
+- Create: `admin/js/templates/dashboard/top-pages.html`
+- Create: `admin/js/views/dashboard/widgets/top-pages.js`
+
+- [ ] **Template:**
+
+```html
+<h3>Top pages - last 7 days</h3>
+<div data-field="rows"></div>
+<p class="dash-empty" hidden>No traffic recorded yet.</p>
+```
+
+- [ ] **Render** (escape URLs; sparkline uses only numeric values, no escaping needed):
+
+```js
+import {escapeHtml} from '../lib/escape.js';
+
+function spark(values, width = 80, height = 24) {
+    if (!values || values.length === 0) return '';
+    const safe = values.map(v => Number(v) || 0);
+    const max = Math.max(...safe, 1);
+    const stepX = width / Math.max(safe.length - 1, 1);
+    const points = safe.map((v, i) => `${(i * stepX).toFixed(1)},${(height - (v / max) * height).toFixed(1)}`).join(' ');
+    return `<svg class="dash-spark" viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
+        <polyline fill="none" stroke="currentColor" stroke-width="1.5" points="${points}"/>
+    </svg>`;
+}
+
+export default function renderTopPages($slot, data) {
+    const rows = Array.isArray(data?.topPages) ? data.topPages : [];
+    if (rows.length === 0) $slot.find('.dash-empty').removeAttr('hidden');
+    else $slot.find('.dash-empty').attr('hidden', 'hidden');
+
+    const html = rows.map(r => {
+        const delta = r.deltaPct == null
+            ? ''
+            : `<span class="${r.deltaPct >= 0 ? 'up' : 'down'} dash-kpi-delta">${r.deltaPct >= 0 ? '+' : ''}${Number(r.deltaPct) || 0}%</span>`;
+        return `
+            <div class="dash-spike-row">
+                <span><a href="${escapeHtml(r.url)}">${escapeHtml(r.url)}</a> ${spark(r.spark)}</span>
+                <span><strong>${Number(r.hits) | 0}</strong> ${delta}</span>
+            </div>
+        `;
+    }).join('');
+    $slot.find('[data-field="rows"]').get(0).innerHTML = html;
+}
+```
+
+### Task 4.9: Widget - Journeys
+
+**Files:**
+- Create: `admin/js/templates/dashboard/journeys.html`
+- Create: `admin/js/views/dashboard/widgets/journeys.js`
+
+- [ ] **Template:**
+
+```html
+<h3>User journeys - last 7 days</h3>
+<div class="dash-journey-grid">
+    <div>
+        <h4>Top entry pages</h4>
+        <div data-field="entry"></div>
+    </div>
+    <div>
+        <h4>Top exit pages</h4>
+        <div data-field="exit"></div>
+    </div>
+    <div>
+        <h4>Top paths</h4>
+        <div data-field="paths"></div>
+    </div>
+</div>
+<p class="dash-bounce">Bounce rate: <strong data-field="bounce">-</strong></p>
+<p class="dash-empty" hidden>No journey data yet - encourage some traffic and check back.</p>
+```
+
+- [ ] **Render** (escape every URL; counts are numbers):
+
+```js
+import {escapeHtml} from '../lib/escape.js';
+
+function rowsFromList(items, formatter) {
+    return items.map(i => `<div class="dash-spike-row">${formatter(i)}</div>`).join('');
+}
+
+export default function renderJourneys($slot, data) {
+    const j = data?.journeys;
+    const $empty = $slot.find('.dash-empty');
+    const $entry = $slot.find('[data-field="entry"]');
+    const $exit  = $slot.find('[data-field="exit"]');
+    const $paths = $slot.find('[data-field="paths"]');
+    const $bounce = $slot.find('[data-field="bounce"]');
+
+    if (!j || j.totalSessions === 0) {
+        $empty.removeAttr('hidden');
+        $entry.empty(); $exit.empty(); $paths.empty();
+        $bounce.text('-');
+        return;
+    }
+    $empty.attr('hidden', 'hidden');
+
+    $entry.get(0).innerHTML = rowsFromList(j.entry, e =>
+        `<span>${escapeHtml(e.url)}</span><span>${Number(e.count) | 0}</span>`);
+    $exit.get(0).innerHTML  = rowsFromList(j.exit,  e =>
+        `<span>${escapeHtml(e.url)}</span><span>${Number(e.count) | 0}</span>`);
+    $paths.get(0).innerHTML = rowsFromList(j.paths, p =>
+        `<span>${escapeHtml(p.from)} → ${escapeHtml(p.to)}</span><span>${Number(p.count) | 0}</span>`);
+    $bounce.text((Number(j.bounceRate) * 100).toFixed(1) + '%');
+}
+```
+
+### Task 4.10: Widget - Health detail
+
+**Files:**
+- Create: `admin/js/templates/dashboard/health-detail.html`
+- Create: `admin/js/views/dashboard/widgets/health-detail.js`
+
+- [ ] **Template:**
+
+```html
+<h3>Health</h3>
+<div data-field="rows"></div>
+```
+
+- [ ] **Render** (uses pure DOM API - no innerHTML interpolation needed for health text since checks are server-controlled, but still using `textContent` to be safe):
+
+```js
+const ICON = { ok: 'check-circle', warn: 'alert-triangle', fail: 'x-circle' };
+
+export default function renderHealthDetail($slot, data) {
+    const checks = data?.health?.checks || [];
+    const $rows = $slot.find('[data-field="rows"]');
+    $rows.empty();
+    const container = $rows.get(0);
+    if (!container) return;
+
+    for (const c of checks) {
+        const row = document.createElement('div');
+        row.className = 'dash-spike-row dash-health-pill';
+        row.setAttribute('data-level', c.level);
+
+        const left = document.createElement('span');
+        const icon = document.createElement('span');
+        icon.setAttribute('data-icon', ICON[c.level] || 'circle');
+        left.appendChild(icon);
+        left.appendChild(document.createTextNode(' ' + (c.label || c.id)));
+
+        const right = document.createElement('span');
+        right.textContent = String(c.value);
+
+        row.appendChild(left);
+        row.appendChild(right);
+        container.appendChild(row);
+
+        if (Array.isArray(c.detail) && c.detail.length > 0) {
+            const det = document.createElement('div');
+            det.className = 'dash-health-detail';
+            det.style.fontSize = '12px';
+            det.style.opacity = '0.75';
+            det.style.padding = '4px 0 8px';
+            det.textContent = c.detail.slice(0, 5).join(', ');
+            container.appendChild(det);
+        }
+    }
+    if (window.Domma && Domma.icons) Domma.icons.scan();
+}
+```
+
+### Task 4.11: Widget - Activity feed
+
+**Files:**
+- Create: `admin/js/templates/dashboard/activity-feed.html`
+- Create: `admin/js/views/dashboard/widgets/activity-feed.js`
+
+- [ ] **Template:**
+
+```html
+<h3>Recent activity</h3>
+<div data-field="rows"></div>
+<p class="dash-empty" hidden>No recent activity.</p>
+```
+
+- [ ] **Render** (escape actor and target - actor names come from user accounts, page paths come from filesystem, but defence-in-depth):
+
+```js
+import {escapeHtml} from '../lib/escape.js';
+
+const TYPE_LABEL = {
+    edit:    'edited',
+    publish: 'published',
+    form:    'received submission'
+};
+
+export default function renderActivityFeed($slot, data) {
+    const items = Array.isArray(data?.activity) ? data.activity : [];
+    if (items.length === 0) $slot.find('.dash-empty').removeAttr('hidden');
+    else $slot.find('.dash-empty').attr('hidden', 'hidden');
+
+    const html = items.map(i => {
+        const when = i.at ? D(i.at).fromNow() : '';
+        const subject = i.target || i.form || '';
+        const actor = i.actor ? `<strong>${escapeHtml(i.actor)}</strong> ` : '';
+        const label = escapeHtml(TYPE_LABEL[i.type] || i.type || '');
+        return `<div class="dash-spike-row">
+            <span>${actor}${label} <code>${escapeHtml(subject)}</code></span>
+            <span>${escapeHtml(when)}</span>
+        </div>`;
+    }).join('');
+    $slot.find('[data-field="rows"]').get(0).innerHTML = html;
+}
+```
+
+### Task 4.12: Orchestrator (`dashboard.js`)
+
+**Files:**
+- Modify: `admin/js/views/dashboard.js`
+
+- [ ] **Replace the entire file:**
+
+```js
+/**
+ * Dashboard View - orchestrator.
+ * Fetches /api/dashboard/summary, distributes data slices to widget render functions,
+ * and polls a lite summary every 30 s to refresh KPI strip + spike feed + health pill.
+ */
+import {api} from '../api.js';
+import renderKpiStrip      from './dashboard/widgets/kpi-strip.js?v=1';
+import renderTrafficChart  from './dashboard/widgets/traffic-chart.js?v=1';
+import renderSpikeFeed     from './dashboard/widgets/spike-feed.js?v=1';
+import renderTopPages      from './dashboard/widgets/top-pages.js?v=1';
+import renderJourneys      from './dashboard/widgets/journeys.js?v=1';
+import renderHealthDetail  from './dashboard/widgets/health-detail.js?v=1';
+import renderActivityFeed  from './dashboard/widgets/activity-feed.js?v=1';
+
+const WIDGETS = [
+    { slot: '#dash-kpi-strip',      template: '/admin/js/templates/dashboard/kpi-strip.html',     render: renderKpiStrip },
+    { slot: '#dash-traffic-chart',  template: '/admin/js/templates/dashboard/traffic-chart.html', render: renderTrafficChart },
+    { slot: '#dash-spike-feed',     template: '/admin/js/templates/dashboard/spike-feed.html',    render: renderSpikeFeed },
+    { slot: '#dash-top-pages',      template: '/admin/js/templates/dashboard/top-pages.html',     render: renderTopPages },
+    { slot: '#dash-journeys',       template: '/admin/js/templates/dashboard/journeys.html',      render: renderJourneys },
+    { slot: '#dash-health-detail',  template: '/admin/js/templates/dashboard/health-detail.html', render: renderHealthDetail },
+    { slot: '#dash-activity-feed',  template: '/admin/js/templates/dashboard/activity-feed.html', render: renderActivityFeed }
+];
+
+const REFRESH_MS = 30 * 1000;
+
+async function loadTemplate(url) {
+    const res = await fetch(url, { credentials: 'same-origin' });
+    if (!res.ok) throw new Error(`Failed to load ${url}: ${res.status}`);
+    return res.text();
+}
+
+function showWarnings($container, warnings) {
+    const $w = $container.find('#dash-warnings');
+    if (!warnings || warnings.length === 0) {
+        $w.attr('hidden', 'hidden');
+        return;
+    }
+    $w.removeAttr('hidden');
+    // Use textContent to avoid HTML interpretation of error messages.
+    $w.get(0).textContent = 'Some sections could not load: ' + warnings.join(' · ');
+}
+
+function setUpdated($container) {
+    $container.find('#dash-updated').text('Updated ' + D().format('HH:mm:ss'));
+}
+
+function annotateSubmissionsWeek(data) {
+    if (!data || !Array.isArray(data.activity)) return data;
+    const cutoff = Date.now() - 7 * 24 * 60 * 60 * 1000;
+    data._submissionsWeek = data.activity.filter(a =>
+        a.type === 'form' && new Date(a.at).getTime() >= cutoff
+    ).length;
+    return data;
+}
+
+let pollHandle = null;
+
+export const dashboardView = {
+    templateUrl: '/admin/js/templates/dashboard.html',
+
+    async onMount($container) {
+        const loader = E.loader($container.get(0), { type: 'dots' });
+
+        // 1. Load all widget templates in parallel and inject them
+        const tpls = await Promise.all(WIDGETS.map(w => loadTemplate(w.template)));
+        WIDGETS.forEach((w, i) => {
+            const $slot = $container.find(w.slot);
+            // Templates are static, controlled assets - innerHTML is safe here.
+            if ($slot.length) $slot.get(0).innerHTML = tpls[i];
+        });
+
+        // 2. First fetch + render
+        let data;
+        try {
+            data = await api.dashboard.summary();
+            data = annotateSubmissionsWeek(data);
+        } catch (e) {
+            loader.destroy();
+            const $w = $container.find('#dash-warnings');
+            $w.removeAttr('hidden');
+            $w.get(0).textContent = 'Could not load dashboard: ' + e.message;
+            return;
+        }
+
+        for (const w of WIDGETS) {
+            const $slot = $container.find(w.slot);
+            try { await w.render($slot, data); }
+            catch (e) { console.warn('[dashboard]', w.slot, 'render failed:', e); }
+        }
+        showWarnings($container, data.warnings);
+        setUpdated($container);
+        Domma.icons.scan();
+        loader.destroy();
+
+        // 3. Poll lite summary every 30 s for volatile widgets
+        if (pollHandle) clearInterval(pollHandle);
+        pollHandle = setInterval(async () => {
+            // Bail if the user navigated away from the dashboard
+            if (!document.body.contains($container.get(0))) {
+                clearInterval(pollHandle); pollHandle = null;
+                return;
+            }
+            try {
+                const lite = await api.dashboard.summaryLite();
+                const merged = annotateSubmissionsWeek({
+                    ...data,
+                    traffic: { ...data.traffic, ...lite.traffic },
+                    realtime: lite.realtime,
+                    spikes: lite.spikes,
+                    health: { ...data.health, status: lite.health.status }
+                });
+                await renderKpiStrip($container.find('#dash-kpi-strip'), merged);
+                await renderSpikeFeed($container.find('#dash-spike-feed'), merged);
+                setUpdated($container);
+            } catch (e) {
+                console.warn('[dashboard] lite refresh failed:', e);
+            }
+        }, REFRESH_MS);
+    }
+};
+```
+
+### Task 4.13: Bump cache buster on the dashboard view import
+
+**Files:**
+- Modify: `admin/js/views/index.js`
+
+- [ ] **Find the line** `import {dashboardView} from './dashboard.js';` and **replace with:**
+
+```js
+import {dashboardView} from './dashboard.js?v=20260506-1';
+```
+
+(Per the standing rule: admin SPA imports use hard-coded `?v=N` cache busters; bump on every edit to the imported module.)
+
+### Task 4.14: Browser smoke verification
+
+This task is verification only - no code changes.
+
+- [ ] **Open the admin dashboard in a real browser** at `http://192.168.1.4:4096/admin/#/dashboard` (the user is on SSH; browser sessions need that host) and confirm:
+  - All seven widget tiles render
+  - KPI strip shows numbers (or 0) and a Health pill
+  - Traffic chart renders (line) or shows "No traffic recorded yet"
+  - Spike feed renders an empty state when no anomalies (expected on a quiet site)
+  - Top pages, Journeys, Health detail, Activity feed each render or show their empty state
+  - No console errors
+
+- [ ] **Generate a few hits** to confirm live data flows:
+
+```bash
+for u in / /about /pricing; do
+  curl -s -X POST http://localhost:4096/api/plugins/analytics/hit \
+    -H 'Content-Type: application/json' \
+    -d "{\"url\":\"$u\",\"sid\":\"smoke-$RANDOM\",\"ref\":\"\"}"
+done
+```
+
+Wait 30 s; the KPI strip should refresh and "Hits today" should reflect the new traffic.
+
+- [ ] **State explicitly to the user** what was verified in the browser and what was not. Per the standing rule, only browser-confirmed behaviour can be claimed as working. Do not say "tested" or "verified" without naming the specific click/load you performed.
+
+---
+
+## Self-review checklist
+
+After implementing, verify against the spec sections:
+
+- [ ] Beacon sends `sid` and `ref` (Task 1.1) - covers spec § Beacon
+- [ ] `journeys.json` capped at 5,000/day (Task 1.2) - covers spec § Storage
+- [ ] `/journeys`, `/realtime`, `/spikes` endpoints (Tasks 1.4-1.6) - covers spec § New Endpoints
+- [ ] `fastify.analytics` decorator (Task 1.7) - covers spec § Cross-plugin coupling
+- [ ] Health checks: uptime, memory, disk, stale, missing-meta, last-form, smtp, plugin-load (Tasks 2.4-2.6) - covers spec § server/services/health.js
+- [ ] 30 s in-memory cache on health (Task 2.3) - covers spec § Cross-cutting
+- [ ] `/api/dashboard/summary` with `?lite=1` (Task 3.1) - covers spec § GET /api/dashboard/summary
+- [ ] Graceful degradation when analytics absent (Task 3.1) - covers spec § Cross-plugin coupling
+- [ ] Seven widgets, each self-contained module (Tasks 4.5-4.11) - covers spec § Frontend Architecture
+- [ ] Single fetch on mount; 30 s poll for KPI strip + spike feed only (Task 4.12) - covers spec § Refresh
+- [ ] Empty states on every widget (Tasks 4.5-4.11) - covers spec § Empty states
+- [ ] Privacy: `sid` is sessionStorage, no IP/UA collected (Task 1.1) - covers spec § Privacy
+- [ ] XSS-safe interpolation: every widget that builds innerHTML escapes URLs/refs/actor names via `escapeHtml` (Tasks 4.7-4.11) - covers § Security