@harshankur/viewcounter 3.1.0 → 3.2.0

package/admin/js/format.js

@@ -47,30 +47,81 @@ export function formatCompact(value) {
     return new Intl.NumberFormat(currentLocale(), { notation: 'compact', maximumFractionDigits: 1 }).format(Number(value) || 0);
 }
 
+/** A headline count: exact below ten thousand (1,029), compact above (12.9K). */
+export function formatHeadline(value) {
+    return Math.abs(Number(value) || 0) < 10000 ? formatNumber(value) : formatCompact(value);
+}
+
 /** A ratio (0..1) as a percentage. */
 export function formatPercent(ratio) {
     return new Intl.NumberFormat(currentLocale(), { style: 'percent', maximumFractionDigits: 1 }).format(Number(ratio) || 0);
 }
 
+/** A number with at most `digits` decimals: 1.75 pages per visit reads 1.8. */
+export function formatDecimal(value, digits = 1) {
+    return new Intl.NumberFormat(currentLocale(), { maximumFractionDigits: digits }).format(Number(value) || 0);
+}
+
+function unit(value, name) {
+    return new Intl.NumberFormat(currentLocale(), { style: 'unit', unit: name, unitDisplay: 'narrow' }).format(value);
+}
+
 /**
- * A trend bucket label. Buckets are named by the date they start on
- * (YYYY-MM-DD, from the server) and read as calendar dates, not instants, so
- * they are formatted in UTC to avoid shifting a day across time zones.
+ * A duration, to the second below an hour: 45s, 3m 20s, 1h 5m. Empty
+ * (never measured) shows the placeholder rather than a misleading 0s.
+ * @param {number|null} ms
+ */
+export function formatDuration(ms) {
+    if (ms === null || ms === undefined || Number.isNaN(Number(ms))) return t('common.none');
+    const seconds = Math.round(Number(ms) / 1000);
+    if (seconds < 60) return unit(seconds, 'second');
+    if (seconds < 3600) {
+        const rest = seconds % 60;
+        return rest ? `${unit(Math.floor(seconds / 60), 'minute')} ${unit(rest, 'second')}` : unit(seconds / 60, 'minute');
+    }
+    const minutes = Math.floor((seconds % 3600) / 60);
+    const hours = Math.floor(seconds / 3600);
+    return minutes ? `${unit(hours, 'hour')} ${unit(minutes, 'minute')}` : unit(hours, 'hour');
+}
+
+/**
+ * When a trend bucket starts. Day, week, and month buckets are named by their
+ * date (YYYY-MM-DD) and read as calendar dates at UTC midnight; hour buckets
+ * ("YYYY-MM-DD HH:00") are instants in the server's clock, which is UTC.
+ * @param {string} period
+ * @param {'hour'|'day'|'week'|'month'} bucket
+ * @returns {Date}
+ */
+export function periodStart(period, bucket) {
+    return bucket === 'hour'
+        ? new Date(`${String(period).replace(' ', 'T')}:00Z`)
+        : new Date(`${period}T00:00:00Z`);
+}
+
+/**
+ * A trend bucket label. Calendar buckets are formatted in UTC so a day never
+ * shifts across time zones; an hour is an instant, shown in local time.
  * @param {string} period
- * @param {'day'|'week'|'month'} bucket
- * @param {{ long?: boolean }} [options] long adds the year, and "week of"
+ * @param {'hour'|'day'|'week'|'month'} bucket
+ * @param {{ long?: boolean }} [options] long adds the date to an hour, the year
+ *   to a day, and "week of" to a week
  */
 export function formatPeriod(period, bucket, { long = false } = {}) {
-    const date = new Date(`${period}T00:00:00Z`);
+    const date = periodStart(period, bucket);
     if (Number.isNaN(date.getTime())) return period;
     const locale = currentLocale();
+    if (bucket === 'hour') {
+        return new Intl.DateTimeFormat(locale, {
+            ...(long ? { day: 'numeric', month: 'short' } : {}), hour: 'numeric', minute: '2-digit',
+        }).format(date);
+    }
     if (bucket === 'month') {
         return new Intl.DateTimeFormat(locale, { month: long ? 'long' : 'short', year: 'numeric', timeZone: 'UTC' }).format(date);
     }
     const day = new Intl.DateTimeFormat(locale, {
         day: 'numeric', month: 'short', ...(long ? { year: 'numeric' } : {}), timeZone: 'UTC',
     }).format(date);
-    return bucket === 'week' && long ? t('insights.weekOf', { date: day }) : day;
+    return bucket === 'week' && long ? t('charts.weekOf', { date: day }) : day;
 }
 
 /** A value for display, with a translated placeholder for empty. */

package/admin/js/icons.js

@@ -0,0 +1,168 @@
+/**
+ * The UI's icons: small line drawings on a 24-unit grid, built as SVG
+ * elements (never parsed from markup), stroked in the text colour around
+ * them. An icon is always decoration: the control it sits in carries the
+ * accessible name.
+ */
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+/**
+ * Each icon is a list of [tag, attributes]. Paths are open line drawings;
+ * `fill: true` marks the few shapes that are solid.
+ */
+const ICONS = {
+    overview: [
+        ['rect', { x: 3, y: 3, width: 7, height: 9, rx: 1.5 }],
+        ['rect', { x: 14, y: 3, width: 7, height: 5, rx: 1.5 }],
+        ['rect', { x: 14, y: 12, width: 7, height: 9, rx: 1.5 }],
+        ['rect', { x: 3, y: 16, width: 7, height: 5, rx: 1.5 }],
+    ],
+    views: [
+        ['rect', { x: 3, y: 4, width: 18, height: 16, rx: 2 }],
+        ['path', { d: 'M3 9.5h18M3 15h18M9 9.5V20' }],
+    ],
+    trash: [
+        ['path', { d: 'M4 7h16M10 11v6M14 11v6M9 7V4.5h6V7M6 7l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12' }],
+    ],
+    trackingLog: [
+        ['path', { d: 'M3 12h4l3-7 4 14 3-7h4' }],
+    ],
+    adminLog: [
+        ['path', { d: 'M12 3l7 3v5c0 4.6-3 8.4-7 10-4-1.6-7-5.4-7-10V6z' }],
+        ['path', { d: 'M9 12l2 2 4-4' }],
+    ],
+    sun: [
+        ['circle', { cx: 12, cy: 12, r: 4 }],
+        ['path', { d: 'M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4' }],
+    ],
+    moon: [
+        ['path', { d: 'M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z' }],
+    ],
+    auto: [
+        ['circle', { cx: 12, cy: 12, r: 8.5 }],
+        ['path', { d: 'M12 3.5a8.5 8.5 0 0 1 0 17z', fill: true }],
+    ],
+    signOut: [
+        ['path', { d: 'M9 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h3M15 16.5l4.5-4.5L15 7.5M19.5 12H9' }],
+    ],
+    external: [
+        ['path', { d: 'M14 4h6v6M20 4l-9 9M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4' }],
+    ],
+    globe: [
+        ['circle', { cx: 12, cy: 12, r: 9 }],
+        ['path', { d: 'M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z' }],
+    ],
+    book: [
+        ['path', { d: 'M5 5.5A2.5 2.5 0 0 1 7.5 3H19v15H7.5A2.5 2.5 0 0 0 5 20.5zM5 20.5A2.5 2.5 0 0 0 7.5 21H19v-3' }],
+    ],
+    code: [
+        ['path', { d: 'M8.5 7L3.5 12l5 5M15.5 7l5 5-5 5' }],
+    ],
+    package: [
+        ['path', { d: 'M12 3l8 4.5v9L12 21l-8-4.5v-9zM4 7.5l8 4.5 8-4.5M12 12v9' }],
+    ],
+    info: [
+        ['circle', { cx: 12, cy: 12, r: 9 }],
+        ['path', { d: 'M12 11v5.5M12 7.6v.1' }],
+    ],
+    edit: [
+        ['path', { d: 'M4 20h4L19 9l-4-4L4 16zM13.5 6.5l4 4' }],
+    ],
+    note: [
+        ['path', { d: 'M5 4h14v10.5L14.5 19H5zM14 19v-4.5h5M8.5 8.5h7M8.5 12h4' }],
+    ],
+    restore: [
+        ['path', { d: 'M3.5 12a8.5 8.5 0 1 0 2.6-6.1M3.5 4v4.5H8' }],
+    ],
+    purge: [
+        ['circle', { cx: 12, cy: 12, r: 9 }],
+        ['path', { d: 'M9 9l6 6M15 9l-6 6' }],
+    ],
+    chevronDown: [
+        ['path', { d: 'M6 9l6 6 6-6' }],
+    ],
+    chevronRight: [
+        ['path', { d: 'M9 6l6 6-6 6' }],
+    ],
+    columns: [
+        ['rect', { x: 3, y: 4, width: 18, height: 16, rx: 2 }],
+        ['path', { d: 'M9 4v16M15 4v16' }],
+    ],
+    arrowUp: [
+        ['path', { d: 'M12 19V5M6 11l6-6 6 6' }],
+    ],
+    arrowDown: [
+        ['path', { d: 'M12 5v14M6 13l6 6 6-6' }],
+    ],
+    sort: [
+        ['path', { d: 'M8 5v14M4.5 8.5L8 5l3.5 3.5M16 19V5M12.5 15.5L16 19l3.5-3.5' }],
+    ],
+    table: [
+        ['rect', { x: 3, y: 4, width: 18, height: 16, rx: 2 }],
+        ['path', { d: 'M3 9.5h18M3 14.8h18M10 9.5V20' }],
+    ],
+    chart: [
+        ['path', { d: 'M4 4v16h16M7.5 15l4-4.5 3 3L20 7' }],
+    ],
+    refresh: [
+        ['path', { d: 'M20 12a8 8 0 1 1-2.4-5.7M20 4v5h-5' }],
+    ],
+    close: [
+        ['path', { d: 'M6 6l12 12M18 6L6 18' }],
+    ],
+    filter: [
+        ['path', { d: 'M4 5h16l-6.2 7.2V18l-3.6 2v-7.8z' }],
+    ],
+    arrowRight: [
+        ['path', { d: 'M5 12h14M13 6l6 6-6 6' }],
+    ],
+    pause: [
+        ['path', { d: 'M9 5.5v13M15 5.5v13' }],
+    ],
+    play: [
+        ['path', { d: 'M7.5 5.5l11 6.5-11 6.5z', fill: true }],
+    ],
+    clock: [
+        ['circle', { cx: 12, cy: 12, r: 9 }],
+        ['path', { d: 'M12 7v5l3 2' }],
+    ],
+};
+
+/** Every icon name, for tests and for callers that pick one by key. */
+export const ICON_NAMES = Object.freeze(Object.keys(ICONS));
+
+/**
+ * Build an icon.
+ * @param {string} name a key of ICONS
+ * @param {{ className?: string }} [options]
+ * @returns {SVGSVGElement}
+ */
+export function icon(name, { className = '' } = {}) {
+    const shapes = ICONS[name];
+    if (!shapes) throw new Error(`Unknown icon: ${name}`);
+    const root = document.createElementNS(SVG_NS, 'svg');
+    const attrs = {
+        class: `icon icon-${name} ${className}`.trim(),
+        viewBox: '0 0 24 24',
+        width: '16',
+        height: '16',
+        fill: 'none',
+        stroke: 'currentColor',
+        'stroke-width': '1.8',
+        'stroke-linecap': 'round',
+        'stroke-linejoin': 'round',
+        'aria-hidden': 'true',
+        focusable: 'false',
+    };
+    for (const [key, value] of Object.entries(attrs)) root.setAttribute(key, value);
+    for (const [tag, shapeAttrs] of shapes) {
+        const shape = document.createElementNS(SVG_NS, tag);
+        for (const [key, value] of Object.entries(shapeAttrs)) {
+            if (key === 'fill') shape.setAttribute('fill', 'currentColor');
+            else shape.setAttribute(key, String(value));
+        }
+        root.append(shape);
+    }
+    return root;
+}

package/admin/js/listbox.js

@@ -10,6 +10,7 @@
  */
 
 import { el, clear, uniqueId } from './dom.js';
+import { icon } from './icons.js';
 import { KEY } from './constants.js';
 
 /**
@@ -28,7 +29,7 @@ export function createListbox({ label, options, value, onChange = () => {}, clas
     const button = el('button', {
         className: 'listbox-button',
         attrs: { type: 'button', 'aria-haspopup': 'listbox', 'aria-expanded': 'false', 'aria-label': label },
-    }, [valueText, el('span', { className: 'listbox-caret', text: '▾', attrs: { 'aria-hidden': 'true' } })]);
+    }, [valueText, icon('chevronDown', { className: 'listbox-caret' })]);
 
     const list = el('ul', {
         className: 'listbox-popup',

package/admin/js/logs.js

@@ -1,18 +1,29 @@
 /**
- * The admin operation log and the view register log. Both are read-only here:
- * the UI has no way to alter a log entry, and neither does the API.
+ * The tracking log and the admin log. Both are read-only here: the UI has no
+ * way to alter a log entry, and neither does the API.
+ *
+ * They answer different questions from Views. Views holds what was recorded,
+ * the rows every statistic is computed from. The tracking log holds what
+ * arrived: every tracking request and what became of it, including the ones
+ * never stored (bots and refusals). The admin log holds what admins did.
  */
 
 import { api } from './api.js';
+import { statTiles } from './charts.js';
 import { clampText } from './clamp.js';
+import { createDataTable } from './dataTable.js';
 import { el, replaceChildren } from './dom.js';
-import { formatNumber, orNone } from './format.js';
+import { formatDate, formatHeadline, formatNumber, formatTime, orNone } from './format.js';
+import { icon } from './icons.js';
 import { t, tOr } from './i18n.js';
 import { createListbox } from './listbox.js';
-import { createPager, headerCell, messageRow, timeCell } from './table.js';
+import { createPager } from './table.js';
+import { TRACKING_LOG_REFRESH_MS } from './constants.js';
 
 /** Sentinel for "no filter" in a filter listbox. */
 const ALL = '';
+/** Badge styling for each tracking outcome. */
+const OUTCOME_BADGE = { recorded: 'badge-success', repeat: 'badge-muted', bot: 'badge-info', rejected: 'badge-danger' };
 
 function filterListbox(label, allLabel, values, labelFor, onChange) {
     return createListbox({
@@ -23,20 +34,38 @@ function filterListbox(label, allLabel, values, labelFor, onChange) {
     });
 }
 
+/** A cell of two lines: what matters, and a detail under it. */
+const two = (primary, secondary) => [
+    clampText(primary, { className: 'cell-primary' }),
+    clampText(secondary, { className: 'cell-secondary' }),
+];
+const one = (text, className = '') => [clampText(text, { className })];
+/** When something happened, to the second: logs order events moments apart. */
+const when = (value) => two(formatDate(value), formatTime(value, { seconds: true }));
+
 /**
- * A paged, filterable, read-only log table, optionally with a notice above it.
- * @param {{ title: string, columns: string[], filters: object[], fetchPage: (query: object) => Promise<object>,
- *   renderRow: (entry: object) => HTMLElement, meta: object, reportError: (error: unknown) => void,
- *   emptyKey: string, notice?: string }} options
+ * A paged, filterable, read-only log table under a title and an explanation.
+ * Its columns can be chosen, ordered, and sized like those of the views table.
+ * @param {{ name: string, title: string, intro: string, columns: object[], rowKey: (entry: object) => string,
+ *   rowAttrs?: (entry: object) => object, filters: object[], fetchPage: (query: object) => Promise<object>,
+ *   meta: object, reportError: (error: unknown) => void, emptyKey: string, notice?: string, above?: Node[],
+ *   controls?: Node[], onLoad?: (query: object) => void, tableClassName?: string }} options
  */
-function createLogPanel({ title, columns, filters, fetchPage, renderRow, meta, reportError, emptyKey, notice }) {
+function createLogPanel({
+    name, title, intro, columns, rowKey, rowAttrs, filters, fetchPage, meta, reportError, emptyKey, notice,
+    above = [], controls = [], onLoad, tableClassName = '',
+}) {
     const state = { page: 1, pageSize: meta.pageSizeDefault, total: 0, entries: [], query: {}, seq: 0 };
 
-    const tbody = el('tbody');
-    const table = el('table', { className: 'data-table log-table' }, [
-        el('thead', {}, [el('tr', {}, columns.map((key) => headerCell({ label: t(`logColumns.${key}`), className: `col-${key}` })))]),
-        tbody,
-    ]);
+    const grid = createDataTable({
+        storageKey: name,
+        className: `log-table ${tableClassName}`.trim(),
+        columns: columns.map((column) => ({ ...column, label: t(`logColumns.${column.id}`) })),
+        rowKey,
+        rowAttrs,
+        empty: () => t(emptyKey),
+    });
+    const { table } = grid;
     const pager = createPager((page) => {
         state.page = page;
         load();
@@ -44,26 +73,31 @@ function createLogPanel({ title, columns, filters, fetchPage, renderRow, meta, r
 
     const toolbar = el('div', { className: 'toolbar' }, [
         el('div', { className: 'toolbar-group' }, filters.map((filter) => filter.listbox.element)),
+        el('div', { className: 'toolbar-group' }, [...controls, grid.chooserButton]),
     ]);
 
     const element = el('section', { className: 'panel', attrs: { 'aria-label': title } }, [
+        el('header', { className: 'panel-header' }, [
+            el('h2', { className: 'panel-title', text: title }),
+            el('p', { className: 'panel-intro', text: intro }),
+        ]),
+        ...above,
         toolbar,
         notice ? el('p', { className: 'notice', text: notice }) : null,
-        el('div', { className: 'table-wrap' }, [table]),
+        grid.element,
         pager.element,
     ]);
 
     async function load() {
         const seq = ++state.seq;
         table.setAttribute('aria-busy', 'true');
+        onLoad?.(state.query);
         try {
             const result = await fetchPage({ ...state.query, page: state.page, pageSize: state.pageSize });
             if (seq !== state.seq) return;
             state.entries = result.entries;
             state.total = result.total;
-            replaceChildren(tbody, state.entries.length
-                ? state.entries.map(renderRow)
-                : [messageRow(columns.length, t(emptyKey))]);
+            grid.setRows(state.entries);
             pager.update(state.page, state.pageSize, state.total);
         } catch (error) {
             if (seq === state.seq) reportError(error);
@@ -80,88 +114,205 @@ function createLogPanel({ title, columns, filters, fetchPage, renderRow, meta, r
         };
     }
 
-    return { element, load };
+    return { element, load, show: load, hide() {} };
 }
 
 /**
  * @param {{ meta: object, appIds: () => string[], reportError: (error: unknown) => void }} deps
  */
 export function createAdminLogPanel({ meta, appIds, reportError }) {
-    const filters = [];
     const actionFilter = { param: 'action' };
     actionFilter.listbox = filterListbox(t('logs.filterAction'), t('logs.allActions'), meta.actions,
         (action) => tOr(`actions.${action}`, action), (value) => actionFilter.onValue(value));
     const appFilter = { param: 'appId' };
     appFilter.listbox = filterListbox(t('logs.filterApp'), t('logs.allApps'), appIds(), (id) => id,
         (value) => appFilter.onValue(value));
-    filters.push(actionFilter, appFilter);
-
-    const renderRow = (entry) => el('tr', {}, [
-        timeCell(entry.createdAt, { seconds: true }),
-        el('td', { className: 'col-action' }, [clampText(tOr(`actions.${entry.action}`, entry.action))]),
-        el('td', { className: 'col-app' }, [clampText(orNone(entry.appId))]),
-        el('td', { className: 'col-rows' }, [clampText(formatNumber(entry.targetCount))]),
-        el('td', { className: 'col-fields' }, [clampText(
-            entry.fields.length ? entry.fields.map((field) => tOr(`fields.${field}`, field)).join(', ') : t('common.none'),
-        )]),
-        el('td', { className: 'col-session' }, [clampText(entry.sessionId ? entry.sessionId.slice(0, 8) : t('logs.system'), {
-            className: 'mono',
-        })]),
-        el('td', { className: 'col-ip' }, [clampText(orNone(entry.maskedIp), { className: 'mono' })]),
-    ]);
 
-    const panel = createLogPanel({
+    const columns = [
+        { id: 'time', width: 140, cell: (entry) => when(entry.createdAt) },
+        { id: 'action', width: 176, cell: (entry) => one(tOr(`actions.${entry.action}`, entry.action)) },
+        { id: 'app', width: 144, cell: (entry) => one(orNone(entry.appId)) },
+        { id: 'rows', width: 84, cell: (entry) => one(formatNumber(entry.targetCount)) },
+        {
+            id: 'fields', width: 240, minWidth: 160, grow: true,
+            cell: (entry) => one(entry.fields.length ? entry.fields.map((field) => tOr(`fields.${field}`, field)).join(', ') : t('common.none')),
+        },
+        { id: 'session', width: 116, cell: (entry) => one(entry.sessionId ? entry.sessionId.slice(0, 8) : t('logs.system'), 'mono') },
+        { id: 'ip', width: 170, cell: (entry) => one(orNone(entry.maskedIp), 'mono') },
+    ];
+
+    return createLogPanel({
+        name: 'admin-log',
         title: t('tabs.adminLog'),
-        columns: ['time', 'action', 'app', 'rows', 'fields', 'session', 'ip'],
-        filters,
+        intro: t('logs.adminIntro'),
+        columns,
+        rowKey: (entry) => entry.id,
+        filters: [actionFilter, appFilter],
         fetchPage: api.adminLog,
-        renderRow,
         meta,
         reportError,
         emptyKey: 'logs.emptyAdmin',
     });
-    return panel;
 }
 
 /**
- * Why old entries leave the view log. Empty when the host did not say (an
+ * Why old entries leave the tracking log. Empty when the host did not say (an
  * embedding app that configures no retention), so the UI never guesses.
  * @param {number|undefined} days
  */
-function viewLogNotice(days) {
+function trackingLogNotice(days) {
     if (typeof days !== 'number') return '';
-    return days > 0 ? t('logs.viewLogRetention', { count: days }) : t('logs.viewLogRetentionOff');
+    return days > 0 ? t('logs.trackingRetention', { count: days }) : t('logs.trackingRetentionOff');
 }
 
 /**
- * @param {{ meta: object, appIds: () => string[], reportError: (error: unknown) => void }} deps
+ * @param {{ meta: object, appIds: () => string[], reportError: (error: unknown) => void,
+ *   openView: (appId: string, viewId: string) => void }} deps
  */
-export function createViewLogPanel({ meta, appIds, reportError }) {
+export function createTrackingLogPanel({ meta, appIds, reportError, openView }) {
     const sourceFilter = { param: 'source' };
     sourceFilter.listbox = filterListbox(t('logs.filterSource'), t('logs.allSources'), meta.sources,
         (source) => tOr(`logSources.${source}`, source), (value) => sourceFilter.onValue(value));
+    const outcomeFilter = { param: 'outcome' };
+    outcomeFilter.listbox = filterListbox(t('logs.filterOutcome'), t('logs.allOutcomes'), meta.outcomes,
+        (outcome) => tOr(`outcomes.${outcome}`, outcome), (value) => outcomeFilter.onValue(value));
     const appFilter = { param: 'appId' };
     appFilter.listbox = filterListbox(t('logs.filterApp'), t('logs.allApps'), appIds(), (id) => id,
         (value) => appFilter.onValue(value));
 
-    const renderRow = (entry) => el('tr', {}, [
-        timeCell(entry.createdAt, { seconds: true }),
-        el('td', { className: 'col-app' }, [clampText(entry.appId)]),
-        el('td', { className: 'col-source' }, [clampText(tOr(`logSources.${entry.source}`, entry.source))]),
-        el('td', { className: 'col-event' }, [clampText(orNone(entry.eventType))]),
-        el('td', { className: 'col-unique' }, [clampText(entry.isUnique ? t('common.yes') : t('common.no'))]),
-        el('td', { className: 'col-view' }, [clampText(entry.viewId, { className: 'mono' })]),
+    // What each outcome means, so nobody has to guess why a row is not a view.
+    const legend = el('dl', { className: 'outcome-legend' }, meta.outcomes.flatMap((outcome) => [
+        el('dt', {}, [el('span', { className: `badge ${OUTCOME_BADGE[outcome] ?? 'badge-muted'}`, text: tOr(`outcomes.${outcome}`, outcome) })]),
+        el('dd', { text: t(`logs.outcomeHelp.${outcome}`) }),
+    ]));
+
+    // The last day at a glance, for the app filter's app or all of them.
+    const summaryTiles = el('div', { className: 'tracking-summary' });
+    const summaryReasons = el('p', { className: 'panel-summary' });
+    let summarySeq = 0;
+    async function loadSummary(query) {
+        const mine = ++summarySeq;
+        try {
+            const summary = await api.trackingSummary({ appId: query.appId });
+            if (mine !== summarySeq) return;
+            replaceChildren(summaryTiles, [statTiles(meta.outcomes.map((outcome) => {
+                const count = summary.outcomes[outcome] ?? 0;
+                return {
+                    key: outcome,
+                    label: tOr(`outcomes.${outcome}`, outcome),
+                    value: formatHeadline(count),
+                    exact: formatNumber(count),
+                    note: t('logs.lastHours', { count: summary.hours }),
+                    spark: [],
+                };
+            }), { label: t('logs.summaryLabel', { count: summary.hours }) })]);
+            // Bots have their own tile; the list is why requests were refused.
+            const reasons = Object.entries(summary.reasons).filter(([reason]) => reason !== 'bot').sort((a, b) => b[1] - a[1]);
+            summaryReasons.textContent = reasons.length
+                ? t('logs.reasons', {
+                    list: reasons.map(([reason, count]) => `${tOr(`rejectionReasons.${reason}`, reason)} ${formatNumber(count)}`).join(' · '),
+                })
+                : t('logs.noReasons');
+        } catch (error) {
+            if (mine === summarySeq) reportError(error);
+        }
+    }
+
+    const outcomeBadge = (entry) => {
+        const counted = entry.requests > 1 ? ` ×${formatNumber(entry.requests)}` : '';
+        return [el('span', {
+            className: `badge ${OUTCOME_BADGE[entry.outcome] ?? 'badge-muted'}`,
+            text: `${tOr(`outcomes.${entry.outcome}`, entry.outcome)}${counted}`,
+        })];
+    };
+
+    const detailText = (entry) => {
+        const reason = entry.reason && entry.reason !== 'bot' ? tOr(`rejectionReasons.${entry.reason}`, entry.reason) : null;
+        return [reason, entry.detail].filter(Boolean).join(': ') || t('common.none');
+    };
+
+    const viewLink = (entry) => [entry.viewId && entry.appId
+        ? el('button', {
+            className: 'link-btn mono',
+            attrs: { type: 'button', title: t('logs.openView'), 'aria-label': t('logs.openViewNamed', { id: entry.viewId }) },
+            on: { click: () => openView(entry.appId, entry.viewId) },
+        }, [el('span', { text: entry.viewId.slice(0, 8) }), icon('arrowRight')])
+        : clampText(t('common.none'))];
+
+    const eventName = (entry) => (entry.eventType ? tOr(`eventTypes.${entry.eventType}`, entry.eventType) : t('common.none'));
+    const columns = [
+        { id: 'time', width: 140, cell: (entry) => when(entry.at) },
+        { id: 'app', width: 160, cell: (entry) => two(orNone(entry.appId), orNone(entry.hostname)) },
+        {
+            // A page view's type goes without saying; an event names its type.
+            id: 'source', width: 144,
+            cell: (entry) => two(tOr(`logSources.${entry.source}`, entry.source), entry.source === 'event' ? eventName(entry) : t('common.none')),
+        },
+        { id: 'outcome', width: 152, cell: outcomeBadge },
+        { id: 'detail', width: 240, minWidth: 160, grow: true, cell: (entry) => one(detailText(entry)) },
+        { id: 'view', width: 112, cell: viewLink },
+        { id: 'site', width: 200, hidden: true, cell: (entry) => one(orNone(entry.hostname)) },
+        { id: 'event', width: 150, hidden: true, cell: (entry) => one(eventName(entry)) },
+        { id: 'requests', width: 104, hidden: true, cell: (entry) => one(formatNumber(entry.requests)) },
+    ];
+
+    // Auto-refresh: for watching a site's views arrive after setting it up.
+    let timer = null;
+    let visible = false;
+    const liveToggle = el('input', {
+        className: 'switch-input',
+        attrs: { type: 'checkbox', role: 'switch' },
+        on: { change: () => schedule() },
+    });
+    const liveSwitch = el('label', { className: 'switch' }, [
+        liveToggle,
+        el('span', { className: 'switch-track', attrs: { 'aria-hidden': 'true' } }),
+        el('span', { className: 'switch-label', text: t('logs.autoRefresh', { seconds: TRACKING_LOG_REFRESH_MS / 1000 }) }),
     ]);
 
-    return createLogPanel({
-        title: t('tabs.viewLog'),
-        columns: ['time', 'app', 'source', 'event', 'unique', 'view'],
-        filters: [sourceFilter, appFilter],
-        fetchPage: api.viewLog,
-        renderRow,
+    const panel = createLogPanel({
+        name: 'tracking-log',
+        title: t('tabs.trackingLog'),
+        intro: t('logs.trackingIntro'),
+        columns,
+        rowKey: (entry) => entry.id,
+        rowAttrs: (entry) => ({ dataset: { outcome: entry.outcome } }),
+        filters: [appFilter, sourceFilter, outcomeFilter],
+        fetchPage: api.trackingLog,
         meta,
         reportError,
-        emptyKey: 'logs.emptyViews',
-        notice: viewLogNotice(meta.viewLogRetentionDays),
+        emptyKey: 'logs.emptyTracking',
+        notice: trackingLogNotice(meta.viewLogRetentionDays),
+        above: [
+            el('details', { className: 'metric-help' }, [el('summary', { text: t('logs.outcomesTitle') }), legend]),
+            summaryTiles,
+            summaryReasons,
+        ],
+        controls: [liveSwitch],
+        onLoad: loadSummary,
+        tableClassName: 'tracking-table',
     });
+
+    function schedule() {
+        clearInterval(timer);
+        timer = null;
+        if (visible && liveToggle.checked) {
+            timer = setInterval(() => {
+                if (document.visibilityState === 'visible') panel.load();
+            }, TRACKING_LOG_REFRESH_MS);
+        }
+    }
+
+    return {
+        ...panel,
+        show() {
+            visible = true;
+            panel.load();
+            schedule();
+        },
+        hide() {
+            visible = false;
+            schedule();
+        },
+    };
 }