thatcher 1.0.7 → 1.0.34

package/src/ui/format-helpers.js

@@ -1,12 +1,14 @@
+import { STAGE_COLORS, STATUS_COLORS } from './render-helpers.js';
+
 export function formatDate(ts, opts) {
-  if (!ts) return '—';
+  if (!ts) return '-';
   const d = typeof ts === 'number' ? new Date(ts < 1e10 ? ts * 1000 : ts) : new Date(ts);
-  if (isNaN(d)) return '—';
+  if (isNaN(d)) return '-';
   return d.toLocaleDateString('en-ZA', opts || { day: '2-digit', month: 'short', year: 'numeric' });
 }
 
 export function timeAgo(ts) {
-  if (!ts) return '—';
+  if (!ts) return '-';
   const d = typeof ts === 'number' ? new Date(ts < 1e10 ? ts * 1000 : ts) : new Date(ts);
   const diff = Date.now() - d;
   if (diff < 60000) return 'just now';
@@ -17,7 +19,7 @@ export function timeAgo(ts) {
 }
 
 export function formatCurrency(amount, currency) {
-  if (amount == null || amount === '') return '—';
+  if (amount == null || amount === '') return '-';
   const n = Number(amount);
   if (isNaN(n)) return String(amount);
   const sym = currency === 'USD' ? '$' : currency === 'EUR' ? '€' : 'R';
@@ -25,35 +27,28 @@ export function formatCurrency(amount, currency) {
 }
 
 export function formatPercent(val) {
-  if (val == null || val === '') return '—';
+  if (val == null || val === '') return '-';
   const n = Number(val);
   if (isNaN(n)) return val;
   return (n > 1 ? n : Math.round(n * 100)) + '%';
 }
 
 export function stagePill(stage, stageConfig) {
-  const STAGES = stageConfig || {
-    info_gathering:  { label: 'Info Gathering',  color: '#e53935', bg: '#ffebee' },
-    commencement:    { label: 'Commencement',    color: '#e65100', bg: '#fff3e0' },
-    team_execution:  { label: 'Team Execution',  color: '#1565c0', bg: '#e3f2fd' },
-    partner_review:  { label: 'Partner Review',  color: '#283593', bg: '#e8eaf6' },
-    finalization:    { label: 'Finalization',    color: '#2e7d32', bg: '#e8f5e9' },
-    closeout:        { label: 'Close Out',       color: '#33691e', bg: '#f1f8e9' },
-  };
-  const cfg = STAGES[stage];
-  if (!cfg) return stage ? `<span style="background:var(--color-bg,#f5f5f5);color:var(--color-text-muted,#555);padding:2px 8px;border-radius:10px;font-size:0.7rem;font-weight:700">${stage}</span>` : '—';
+  const STAGES = stageConfig || STAGE_COLORS;
+  const raw = STAGES[stage];
+  // Normalize both the local {color,bg,label} shape and the shared
+  // STAGE_COLORS {text,bg,label} shape into {color,bg,label}.
+  const cfg = raw ? { label: raw.label, bg: raw.bg, color: raw.color || raw.text } : null;
+  if (!cfg) return stage ? `<span style="background:var(--color-bg,#f5f5f5);color:var(--color-text-muted,#555);padding:2px 8px;border-radius:10px;font-size:0.7rem;font-weight:700">${stage}</span>` : '-';
   return `<span style="background:${cfg.bg};color:${cfg.color};padding:2px 8px;border-radius:10px;font-size:0.7rem;font-weight:700;white-space:nowrap;border:1px solid ${cfg.color}44">${cfg.label}</span>`;
 }
 
-const STATUS_MAP = {
-  active:    ['#2e7d32', '#e8f5e9'],
+// Role/extra status keys not present in the shared STATUS_COLORS table.
+// Shared statuses (active, pending, draft, closed, overdue, responded, …)
+// are sourced from STATUS_COLORS so the token set stays single-source.
+const EXTRA_STATUS_MAP = {
   inactive:  ['#555',    '#f5f5f5'],
-  pending:   ['#e65100', '#fff3e0'],
-  draft:     ['#888',    '#f5f5f5'],
   sent:      ['#e65100', '#fff3e0'],
-  responded: ['#2e7d32', '#e8f5e9'],
-  closed:    ['#555',    '#eeeeee'],
-  overdue:   ['#c62828', '#ffebee'],
   deleted:   ['#c62828', '#fdecea'],
   admin:     ['#6a1b9a', '#f3e5f5'],
   partner:   ['#1565c0', '#e3f2fd'],
@@ -65,26 +60,29 @@ const STATUS_MAP = {
 
 export function statusBadge(status, labelOverride) {
   const s = (status || '').toLowerCase();
-  const [color, bg] = STATUS_MAP[s] || ['#888', '#f5f5f5'];
-  const label = labelOverride || (s ? s.charAt(0).toUpperCase() + s.slice(1) : '—');
+  const shared = STATUS_COLORS[s];
+  const [color, bg] = shared
+    ? [shared.text, shared.bg]
+    : (EXTRA_STATUS_MAP[s] || ['#888', '#f5f5f5']);
+  const label = labelOverride || (s ? s.charAt(0).toUpperCase() + s.slice(1) : '-');
   return `<span style="background:${bg};color:${color};padding:2px 9px;border-radius:10px;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;white-space:nowrap">${label}</span>`;
 }
 
 export function roleBadge(role) {
   const known = ['admin','partner','manager','clerk','user','auditor'];
-  if (!role) return statusBadge('', '—');
+  if (!role) return statusBadge('', '-');
   if (!known.includes(role.toLowerCase())) return statusBadge('', 'Unknown');
   return statusBadge(role);
 }
 
 export function formatName(user) {
-  if (!user) return '—';
-  return user.name || user.display_name || user.email || '—';
+  if (!user) return '-';
+  return user.name || user.display_name || user.email || '-';
 }
 
 export function truncate(str, n) {
   const max = n || 50;
-  if (!str) return '—';
+  if (!str) return '-';
   const s = String(str);
   return s.length > max ? s.slice(0, max) + '…' : s;
 }
@@ -115,6 +113,7 @@ const ICON_PATHS = {
   lock: '<rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
   undo: '<path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/>',
   external: '<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/>',
+  close: '<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>',
 };
 
 export function icon(name, size = 18) {

package/src/ui/highlight-threading-renderer.js

@@ -7,16 +7,16 @@ import { SPACING, renderStatsRow, renderPageHeader, renderButton, renderEmptySta
 function fmtDate(ts) {
   if (!ts) return '';
   const n = Number(ts);
-  if (!isNaN(n) && n > 1e9 && n < 3e9) return new Date(n * 1000).toLocaleString();
+  if (!isNaN(n) && n > 1e9 && n < 3e9) return new Date(n * 1000).toLocaleString('en-ZA');
   return String(ts);
 }
 
 const RESOLUTION_STATES = {
-  unresolved: { label: 'Unresolved', color: '#ef4444', pill: 'pill pill-danger' },
-  partial_resolved: { label: 'Partial', color: '#f59e0b', pill: 'pill pill-warning' },
-  manager_resolved: { label: 'Manager', color: '#3b82f6', pill: 'pill pill-info' },
-  partner_resolved: { label: 'Partner', color: '#8b5cf6', pill: 'pill pill-primary' },
-  resolved: { label: 'Resolved', color: '#22c55e', pill: 'pill pill-success' },
+  unresolved: { label: 'Unresolved', color: 'var(--color-danger,#ef4444)', pill: 'pill pill-danger' },
+  partial_resolved: { label: 'Partial', color: 'var(--color-warning,#f59e0b)', pill: 'pill pill-warning' },
+  manager_resolved: { label: 'Manager', color: 'var(--color-info,#3b82f6)', pill: 'pill pill-info' },
+  partner_resolved: { label: 'Partner', color: 'var(--color-primary,#8b5cf6)', pill: 'pill pill-primary' },
+  resolved: { label: 'Resolved', color: 'var(--color-success,#22c55e)', pill: 'pill pill-success' },
 };
 
 function resolutionBadge(status) {
@@ -47,14 +47,14 @@ function responseItem(response) {
 function highlightThread(highlight, responses, canResolve, idx) {
   const status = highlight.status || 'unresolved';
   const badge = resolutionBadge(status);
-  const color = RESOLUTION_STATES[status]?.color || '#ef4444';
+  const color = RESOLUTION_STATES[status]?.color || 'var(--color-danger,#ef4444)';
 
   const threadItems = responses.map(r => responseItem(r)).join('');
   const sectionTag = highlight.section_name ? `<span class="review-meta-tag">${esc(highlight.section_name)}</span>` : '';
 
   const resolveSelect = canResolve ? `<div class="thread-card-actions">
     <label style="font-size:12px;color:var(--color-text-muted)">Mark as:</label>
-    <select id="resolve-status-${highlight.id}" class="form-input" style="width:auto;padding:4px 8px;font-size:13px;min-height:auto" aria-label="Resolution status" onchange="updateResolution('${highlight.id}')">
+    <select id="resolve-status-${highlight.id}" class="form-input" style="width:auto;padding:${SPACING.xs} ${SPACING.sm};font-size:13px;min-height:auto" aria-label="Resolution status" onchange="updateResolution('${highlight.id}')">
       <option value="unresolved" ${status === 'unresolved' ? 'selected' : ''}>Unresolved</option>
       <option value="partial_resolved" ${status === 'partial_resolved' ? 'selected' : ''}>Partial</option>
       <option value="manager_resolved" ${status === 'manager_resolved' ? 'selected' : ''}>Manager</option>
@@ -65,7 +65,7 @@ function highlightThread(highlight, responses, canResolve, idx) {
 
   const replyForm = `<div class="thread-reply">
     <textarea id="reply-${highlight.id}" class="form-input" style="resize:vertical;min-height:60px" rows="2" placeholder="Add a response..."></textarea>
-    <button class="btn-primary-clean" style="align-self:flex-start;padding:8px 16px" data-action="submitResponse" data-args='["${highlight.id}"]'>Reply</button>
+    <button class="btn-primary-clean" style="align-self:flex-start;padding:${SPACING.sm} ${SPACING.md}" data-action="submitResponse" data-args='["${highlight.id}"]'>Reply</button>
   </div>`;
 
   return `<div class="thread-card" id="thread-${highlight.id}" data-thread-status="${status}">

package/src/ui/job-management-renderer.js

@@ -1,21 +1,22 @@
 import { statusLabel } from '@/ui/renderer.js';
 import { page } from '@/ui/layout.js';
 import { isPartner } from '@/ui/permissions-ui.js';
+import { STATUS_COLORS, esc } from '@/ui/render-helpers.js';
 
 function fmtDate(ts) {
   if (!ts) return '-';
   const n = Number(ts);
-  if (!isNaN(n) && n > 1e9 && n < 3e9) return new Date(n * 1000).toLocaleString();
+  if (!isNaN(n) && n > 1e9 && n < 3e9) return new Date(n * 1000).toLocaleString('en-ZA');
   return String(ts);
 }
 
 function jobStatusBadge(status) {
   const colors = {
-    running: { bg: '#dbeafe', text: '#1e40af', icon: `<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="5 3 19 12 5 21 5 3"/></svg>` },
-    success: { bg: '#d1fae5', text: '#065f46', icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>' },
-    failed: { bg: '#fee2e2', text: '#991b1b', icon: `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>` },
-    scheduled: { bg: '#fef3c7', text: '#92400e', icon: `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>` },
-    disabled: { bg: '#f3f4f6', text: '#6b7280', icon: `<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true"><circle cx="12" cy="12" r="6"/></svg>` },
+    running: { ...STATUS_COLORS.active, icon: `<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="5 3 19 12 5 21 5 3"/></svg>` },
+    success: { ...STATUS_COLORS.completed, icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>' },
+    failed: { ...STATUS_COLORS.rejected, icon: `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>` },
+    scheduled: { ...STATUS_COLORS.pending, icon: `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>` },
+    disabled: { ...STATUS_COLORS.draft, icon: `<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true"><circle cx="12" cy="12" r="6"/></svg>` },
   };
   const c = colors[status] || colors.scheduled;
   return `<span style="background:${c.bg};color:${c.text};padding:2px 10px;border-radius:9999px;font-size:0.75rem;font-weight:500">${c.icon} ${(status || 'unknown').replace(/_/g, ' ')}</span>`;
@@ -25,9 +26,10 @@ function jobRow(job, canManage) {
   const lastRun = fmtDate(job.last_run_at);
   const nextRun = fmtDate(job.next_run_at);
   const duration = job.last_duration ? (job.last_duration < 1000 ? job.last_duration + 'ms' : Math.round(job.last_duration / 1000) + 's') : '-';
-  const triggerBtn = canManage ? `<button class="btn btn-xs btn-primary" data-action="triggerJob" data-args='["${job.name}"]'>Run Now</button>` : '';
-  const toggleBtn = canManage ? `<button class="btn btn-xs ${job.enabled !== false ? 'btn-warning' : 'btn-success'}" data-action="toggleJob" data-args='["${job.name}",${!job.enabled}]'>${job.enabled !== false ? 'Disable' : 'Enable'}</button>` : '';
-  return `<tr><td class="font-medium">${job.label || job.name}</td><td>${job.schedule || job.cron || '-'}</td><td>${jobStatusBadge(job.status || (job.enabled === false ? 'disabled' : 'scheduled'))}</td><td class="text-sm">${lastRun}</td><td class="text-sm">${nextRun}</td><td class="text-sm">${duration}</td><td class="text-sm">${job.last_result || '-'}</td><td class="flex gap-1">${triggerBtn}${toggleBtn}</td></tr>`;
+  const jobNameArg = esc(JSON.stringify(String(job.name)));
+  const triggerBtn = canManage ? `<button class="btn btn-xs btn-primary" data-action="triggerJob" data-args='[${jobNameArg}]'>Run Now</button>` : '';
+  const toggleBtn = canManage ? `<button class="btn btn-xs ${job.enabled !== false ? 'btn-warning' : 'btn-success'}" data-action="toggleJob" data-args='[${jobNameArg},${!job.enabled}]'>${job.enabled !== false ? 'Disable' : 'Enable'}</button>` : '';
+  return `<tr><td class="font-medium">${esc(job.label || job.name)}</td><td>${esc(job.schedule || job.cron || '-')}</td><td>${jobStatusBadge(job.status || (job.enabled === false ? 'disabled' : 'scheduled'))}</td><td class="text-sm">${lastRun}</td><td class="text-sm">${nextRun}</td><td class="text-sm">${duration}</td><td class="text-sm">${esc(job.last_result || '-')}</td><td class="flex gap-1">${triggerBtn}${toggleBtn}</td></tr>`;
 }
 
 export function renderJobManagement(user, jobs, recentLogs = []) {
@@ -41,21 +43,21 @@ export function renderJobManagement(user, jobs, recentLogs = []) {
     { label: 'Running', value: runningJobs, color: runningJobs > 0 ? 'blue' : '' },
     { label: 'Failed', value: failedJobs, color: failedJobs > 0 ? 'red' : '' },
     { label: 'Healthy', value: totalJobs - failedJobs, color: 'green' },
-  ].map(s => `<div class="card-clean"><div class="card-clean-body" style="padding:0.75rem 0"><h3 class="text-gray-500 text-sm">${s.label}</h3><p class="text-xl font-bold${s.color ? ` text-${s.color}-600` : ''}">${s.value}</p></div></div>`).join('')}</div>`;
+  ].map(s => `<div class="card-clean"><div class="card-clean-body" style="padding:0.75rem 0"><h3 class="text-gray-600 dark:text-gray-500 text-sm">${s.label}</h3><p class="text-xl font-bold${s.color ? ` text-${s.color}-600 dark:text-${s.color}-400` : ''}">${s.value}</p></div></div>`).join('')}</div>`;
 
   const headers = '<th>Job</th><th>Schedule</th><th>Status</th><th>Last Run</th><th>Next Run</th><th>Duration</th><th>Result</th><th>Actions</th>';
   const rows = jobs.map(j => jobRow(j, canManage)).join('');
-  const table = `<div class="card-clean" style="margin-bottom:1.5rem" style="overflow-x:auto"><div class="card-clean-body"><h3 class="font-semibold mb-3">Scheduled Jobs</h3><table class="data-table"><thead><tr>${headers}</tr></thead><tbody>${rows || '<tr><td colspan="8" class="text-center py-8 text-gray-500">No jobs configured</td></tr>'}</tbody></table></div></div>`;
+  const table = `<div class="card-clean" style="margin-bottom:1.5rem"><div class="card-clean-body"><h3 class="font-semibold mb-3">Scheduled Jobs</h3><div style="overflow-x:auto"><table class="data-table"><thead><tr>${headers}</tr></thead><tbody>${rows || '<tr><td colspan="8" class="text-center py-8 text-gray-600 dark:text-gray-500">No jobs configured</td></tr>'}</tbody></table></div></div></div>`;
 
   const logRows = recentLogs.slice(0, 20).map(l => {
-    const sts = l.success ? '<span class="text-green-600">OK</span>' : '<span class="text-red-600">FAIL</span>';
-    return `<tr><td class="text-sm">${l.job_name || '-'}</td><td>${sts}</td><td class="text-xs text-gray-500">${fmtDate(l.started_at)}</td><td class="text-xs">${l.duration ? l.duration + 'ms' : '-'}</td><td class="text-xs text-gray-500 max-w-xs truncate">${l.message || '-'}</td></tr>`;
+    const sts = l.success ? '<span class="text-green-600 dark:text-green-400">OK</span>' : '<span class="text-red-600 dark:text-red-400">FAIL</span>';
+    return `<tr><td class="text-sm">${esc(l.job_name || '-')}</td><td>${sts}</td><td class="text-xs text-gray-600 dark:text-gray-500">${fmtDate(l.started_at)}</td><td class="text-xs">${l.duration ? l.duration + 'ms' : '-'}</td><td class="text-xs text-gray-600 dark:text-gray-500 max-w-xs truncate">${esc(l.message || '-')}</td></tr>`;
   }).join('');
-  const logTable = `<div class="card-clean"><div class="card-clean-body"><h3 class="font-semibold mb-3">Recent Execution Logs</h3><table class="data-table"><thead><tr><th>Job</th><th>Result</th><th>Time</th><th>Duration</th><th>Message</th></tr></thead><tbody>${logRows || '<tr><td colspan="5" class="text-center py-4 text-gray-400">No recent logs</td></tr>'}</tbody></table></div></div>`;
+  const logTable = `<div class="card-clean"><div class="card-clean-body"><h3 class="font-semibold mb-3">Recent Execution Logs</h3><div style="overflow-x:auto"><table class="data-table"><thead><tr><th>Job</th><th>Result</th><th>Time</th><th>Duration</th><th>Message</th></tr></thead><tbody>${logRows || '<tr><td colspan="5" class="text-center py-4 text-gray-600 dark:text-gray-500">No recent logs</td></tr>'}</tbody></table></div></div></div>`;
 
-  const content = `<div class="flex justify-between items-center mb-6"><h1 class="text-2xl font-bold">Scheduled Jobs</h1>${canManage ? '<button class="btn btn-primary btn-sm" data-action="triggerAll">Run All Now</button>' : ''}</div>${statCards}${table}${logTable}`;
+  const content = `<main><div class="flex justify-between items-center mb-6"><h1 class="text-2xl font-bold">Scheduled Jobs</h1>${canManage ? '<button class="btn btn-primary btn-sm" data-action="triggerAll">Run All Now</button>' : ''}</div>${statCards}${table}${logTable}</main>`;
 
   const jobScript = `window.triggerJob=async function(name){try{const r=await fetch('/api/admin/jobs/'+name+'/trigger',{method:'POST'});if(r.ok){location.reload()}else{showToast('Trigger failed: '+(await r.text()),'error')}}catch(e){showToast(e.message,'error')}};window.toggleJob=async function(name,enabled){try{const r=await fetch('/api/admin/jobs/'+name,{method:'PATCH',headers:{'Content-Type':'application/json'},body:JSON.stringify({enabled})});if(r.ok)location.reload();else showToast('Toggle failed','error')}catch(e){showToast(e.message,'error')}};window.triggerAll=async function(){if(!(await window.gmConfirm({title:'Please confirm',message:'Run all jobs now?',danger:false,confirmLabel:'OK'})))return;try{const r=await fetch('/api/admin/jobs/trigger-all',{method:'POST'});if(r.ok)location.reload();else showToast('Failed','error')}catch(e){showToast(e.message,'error')}}`;
 
-  return page(user, 'Scheduled Jobs | Moonlanding', [{ href: '/', label: 'Dashboard' }, { href: '/admin/settings', label: 'Settings' }, { label: 'Jobs' }], content, [jobScript]);
+  return page(user, 'Scheduled Jobs | Thatcher', [{ href: '/', label: 'Dashboard' }, { href: '/admin/settings', label: 'Settings' }, { label: 'Jobs' }], content, [jobScript]);
 }

package/src/ui/layout.js

@@ -1,10 +1,23 @@
 import { h } from '@/ui/webjsx.js'
 import { getNavItems, getAdminItems, isPartner, isClerk } from '@/ui/permissions-ui.js'
-import { TOAST_SCRIPT } from '@/ui/render-helpers.js'
+import { TOAST_SCRIPT, AVATAR_COLORS, esc } from '@/ui/render-helpers.js'
 import { FETCH_JSON_SCRIPT } from '@/ui/fetch-json.js'
 import { aria, role, skipLink, liveRegion } from '@/lib/accessibility'
 
+// Normalize a page title so the app-name suffix is config-driven, not hardcoded
+// per call site. A caller may pass either a bare title ("Engagements") or one
+// with a legacy suffix ("Engagements | Thatcher"); both resolve to
+// "Engagements | <APP_NAME>" so a consuming app sets APP_NAME once instead of
+// editing every renderer. APP_NAME is read at call time (not module load) so it
+// reflects the env after the consuming app's loadEnv() runs.
+function withAppName(title) {
+  const appName = process.env.APP_NAME || 'Thatcher App'
+  const base = String(title ?? '').replace(/\s*\|\s*[^|]*$/, '').trim() || appName
+  return base === appName ? base : `${base} | ${appName}`
+}
+
 export function generateHtml(title, bodyContent, scripts = [], pathname = '/') {
+  title = withAppName(title)
   const scriptTags = scripts.map(s =>
     typeof s === 'string' ? `<script>${s.replace(/<\/script/gi, '<\\/script').replace(/<!--/g, '<\\!--')}</script>` : `<script type="module" src="${s.src}"></script>`
   ).join('\n')
@@ -17,9 +30,10 @@ export function generateHtml(title, bodyContent, scripts = [], pathname = '/') {
   }`
 
   return `<!DOCTYPE html>
-<html lang="en" data-theme="light">
+<html lang="en">
 <head>
   <meta charset="UTF-8">
+  <script>(function(){try{var t=localStorage.getItem('thatcher-theme');if(!t){t=(window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches)?'dark':'light'}document.documentElement.setAttribute('data-theme',t)}catch(e){document.documentElement.setAttribute('data-theme','light')}})();</script>
     <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
@@ -75,8 +89,8 @@ export function breadcrumb(items) {
   if (!items?.length) return ''
   return `<nav ${aria.label('Breadcrumb')} class="breadcrumb-clean">${items.map((item, i) =>
     i === items.length - 1
-      ? `<span ${aria.current('page')}>${item.label}</span>`
-      : `<a href="${item.href}">${item.label}</a><span class="breadcrumb-sep" aria-hidden="true">/</span>`
+      ? `<span ${aria.current('page')}>${esc(item.label)}</span>`
+      : `<a href="${esc(item.href)}">${esc(item.label)}</a><span class="breadcrumb-sep" aria-hidden="true">/</span>`
   ).join('')}</nav>`
 }
 
@@ -93,39 +107,38 @@ export function nav(user, pathname = '') {
   const reviewLink = `<a href="/review" class="${linkClass('/review')}">My Review</a>`
 
   const avatarInitial = user?.name?.charAt(0)?.toUpperCase() || 'U'
-  const avatarColors = ['#1565c0','#2e7d32','#6a1b9a','#c62828','#e65100','#00695c']
-  const avatarBg = avatarColors[(user?.name?.charCodeAt(0) || 0) % avatarColors.length]
+  const avatarBg = AVATAR_COLORS[(user?.name?.charCodeAt(0) || 0) % AVATAR_COLORS.length]
 
   return `<nav id="main-nav" class="main-nav" ${role.navigation} ${aria.label('Main navigation')}>
   <div class="main-nav-brand">
     <a href="/" class="main-nav-brand-link" ${aria.label('Home')}>
       ${logoSvg}
-      <span class="main-nav-brand-text">Moonlanding</span>
+      <span class="main-nav-brand-text">Thatcher</span>
     </a>
   </div>
   <div class="nav-links-desktop" style="align-items:center;gap:1.25rem;flex-shrink:0">
     ${engLink}${clientLink}${settingsLink}${reviewLink}
   </div>
   <div class="main-nav-actions">
-    <button id="theme-toggle" type="button" data-action="toggleTheme" aria-label="Toggle dark mode" title="Toggle theme" style="background:none;border:none;color:#ced4da;cursor:pointer;padding:6px;border-radius:4px;display:flex;align-items:center;min-width:32px;min-height:32px">
+    <button id="theme-toggle" type="button" data-action="toggleTheme" aria-label="Toggle dark mode" title="Toggle theme" class="nav-icon-btn">
       <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
     </button>
-    <a href="/notifications" id="notif-bell" aria-label="Notifications" title="Notifications" style="position:relative;color:#ced4da;display:flex;align-items:center;padding:6px;border-radius:4px;text-decoration:none">
+    <a href="/notifications" id="notif-bell" aria-label="Notifications" title="Notifications" class="nav-icon-btn nav-notif-bell">
       <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
-      <span id="notif-count" style="display:none;position:absolute;top:2px;right:2px;background:#ef4444;color:#fff;border-radius:9999px;font-size:10px;font-weight:700;min-width:16px;height:16px;line-height:16px;text-align:center;padding:0 3px"></span>
+      <span id="notif-count" style="display:none;position:absolute;top:2px;right:2px;background:var(--color-danger,#ef4444);color:#fff;border-radius:9999px;font-size:10px;font-weight:700;min-width:16px;height:16px;line-height:16px;text-align:center;padding:0 3px"></span>
     </a>
-    <div class="nav-avatar" style="background:${avatarBg}" id="user-avatar" data-action="toggleUserMenu" data-pass-event title="${user?.name || 'User'}" aria-label="User menu" role="button" tabindex="0">
+    <div class="nav-avatar" style="background:${avatarBg}" id="user-avatar" data-action="toggleUserMenu" data-pass-event title="${esc(user?.name || 'User')}" aria-label="User menu" role="button" tabindex="0">
       ${avatarInitial}
     </div>
-    <button class="nav-hamburger" data-action="toggleMobileNav" aria-label="Toggle navigation menu" aria-expanded="false" aria-controls="mobile-nav-drawer" style="background:none;border:none;color:#ced4da;cursor:pointer;padding:8px;border-radius:4px;align-items:center;justify-content:center;min-width:44px;min-height:44px">
+    <button class="nav-hamburger" data-action="toggleMobileNav" aria-label="Toggle navigation menu" aria-expanded="false" aria-controls="mobile-nav-drawer">
       ${hamburgerSvg}
     </button>
   </div>
   <div id="user-dropdown" class="user-dropdown" ${role.menu}>
     <div class="user-dropdown-header">
-      <div class="user-dropdown-name">${user?.name || ''}</div>
-      <div class="user-dropdown-email">${user?.email || ''}</div>
-      <div class="user-dropdown-role" style="text-transform:capitalize">${user?.role || ''}</div>
+      <div class="user-dropdown-name">${esc(user?.name || '')}</div>
+      <div class="user-dropdown-email">${esc(user?.email || '')}</div>
+      <div class="user-dropdown-role" style="text-transform:capitalize">${esc(user?.role || '')}</div>
     </div>
     <a href="/api/auth/logout" class="user-dropdown-item">
       <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
@@ -135,9 +148,9 @@ export function nav(user, pathname = '') {
 </nav>
 <div id="mobile-nav-drawer" style="display:none;position:fixed;inset:0;z-index:200;pointer-events:none" aria-hidden="true">
   <div data-action="closeMobileNav" style="position:absolute;inset:0;background:rgba(0,0,0,0.5);pointer-events:auto"></div>
-  <div style="position:absolute;left:0;top:0;bottom:0;width:280px;max-width:80vw;background:#04141f;padding:0;display:flex;flex-direction:column;transform:translateX(-100%);transition:transform 0.25s ease" id="mobile-nav-panel">
+  <div style="position:absolute;left:0;top:0;bottom:0;width:min(280px,70vw);max-width:80vw;background:#04141f;padding:0;display:flex;flex-direction:column;transform:translateX(-100%);transition:transform 0.25s ease" id="mobile-nav-panel">
     <div class="mobile-nav-header-bar">
-      <span class="mobile-nav-header-title">Moonlanding</span>
+      <span class="mobile-nav-header-title">Thatcher</span>
       <button data-action="closeMobileNav" class="mobile-nav-close-btn" aria-label="Close menu">&times;</button>
     </div>
     <nav style="flex:1;padding:0.5rem 0;overflow-y:auto">
@@ -148,8 +161,8 @@ export function nav(user, pathname = '') {
       ${isPartner(user) ? `<a href="/admin/settings" class="mobile-nav-link">Settings</a>` : ''}
     </nav>
     <div class="mobile-nav-footer">
-      <div class="mobile-nav-user-name">${user?.name || ''}</div>
-      <div class="mobile-nav-user-email">${user?.email || ''}</div>
+      <div class="mobile-nav-user-name">${esc(user?.name || '')}</div>
+      <div class="mobile-nav-user-email">${esc(user?.email || '')}</div>
       <a href="/api/auth/logout" class="mobile-nav-logout">Sign out</a>
     </div>
   </div>
@@ -162,10 +175,19 @@ export function nav(user, pathname = '') {
   </div>
 </div>
 <script>
-window.loadingBtn=function(btn,loading,label){if(!btn)return;btn.disabled=loading;btn.style.opacity=loading?'0.7':'1';if(loading){btn._orig=btn.innerHTML;btn.innerHTML='<span class="btn-spinner"></span>'+(label||'Loading...');}else{btn.innerHTML=btn._orig||label||btn.innerHTML;btn.disabled=false}}
+window.loadingBtn=function(btn,loading,label){if(!btn)return;btn.disabled=loading;btn.style.opacity=loading?'0.7':'1';if(loading){btn._orig=btn.innerHTML;btn.innerHTML='<span class="btn-spinner"></span>'+(label||'Loading...');}else{btn.innerHTML=btn._orig||label||btn.innerHTML;btn.disabled=false}};
+// Canonical client-side date/currency formatters — mirror render-helpers fmtDate so
+// client-rendered template strings format identically to server-rendered ones (fixed
+// en-ZA locale, sec/ms/ISO scale-detect, '-' fallback). Use window.fmtDate(ts) in any
+// client script string instead of inline new Date(...).toLocaleDateString().
+(function(){function toDate(ts){if(ts==null||ts==='')return null;if(ts instanceof Date)return isNaN(ts)?null:ts;var s=String(ts).trim();var n=Number(ts);var d=(!isNaN(n)&&s!==''&&/^\d+$/.test(s))?new Date(n<1e12?n*1000:n):new Date(ts);return isNaN(d)?null:d}
+window.fmtDate=function(ts){var d=toDate(ts);return d?d.toLocaleDateString('en-ZA',{day:'2-digit',month:'short',year:'numeric'}):'-'};
+window.fmtDateTime=function(ts){var d=toDate(ts);return d?d.toLocaleDateString('en-ZA',{day:'2-digit',month:'short',year:'numeric'})+', '+d.toLocaleTimeString('en-ZA',{hour:'2-digit',minute:'2-digit'}):'-'};
+window.fmtDateInput=function(ts){var d=toDate(ts);if(!d)return '';var p=function(x){return String(x).padStart(2,'0')};return d.getFullYear()+'-'+p(d.getMonth()+1)+'-'+p(d.getDate())};
+window.dateToUnixTimestamp=function(v){var d=toDate(v);return d?Math.floor(d.getTime()/1000):null};
+window.fmtCurrency=function(amount,currency){if(amount==null||amount==='')return '-';var n=Number(amount);if(isNaN(n))return String(amount);var sym=currency==='USD'?'$':currency==='EUR'?'€':'R';return sym+' '+n.toLocaleString('en-ZA',{minimumFractionDigits:0,maximumFractionDigits:2})};})();
 window.showToast=window.showToast||function(m,t){var c=document.getElementById('toast-container');if(!c){c=document.createElement('div');c.id='toast-container';c.className='toast-container';document.body.appendChild(c)}var d=document.createElement('div');d.className='toast toast-'+(t||'info');d.textContent=m;c.appendChild(d);setTimeout(function(){d.style.opacity='0';setTimeout(function(){d.remove()},300)},3000)}
-window.toggleTheme=function(){var cur=document.documentElement.getAttribute('data-theme')||'light';var next=cur==='dark'?'light':'dark';document.documentElement.setAttribute('data-theme',next);try{localStorage.setItem('moonlanding-theme',next)}catch(_){}}
-;(function(){try{var saved=localStorage.getItem('moonlanding-theme');if(saved){document.documentElement.setAttribute('data-theme',saved)}else if(window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches){document.documentElement.setAttribute('data-theme','dark')}}catch(_){}})();
+window.toggleTheme=function(){var cur=document.documentElement.getAttribute('data-theme')||'light';var next=cur==='dark'?'light':'dark';document.documentElement.setAttribute('data-theme',next);try{localStorage.setItem('thatcher-theme',next)}catch(_){}}
 function toggleUserMenu(e){e.stopPropagation();var d=document.getElementById('user-dropdown');var visible=d.style.display==='block';d.style.display=visible?'none':'block'}
 document.addEventListener('click',function(e){var d=document.getElementById('user-dropdown');if(d&&!d.contains(e.target)&&e.target.id!=='user-avatar'){d.style.display='none'}})
 function toggleMobileNav(){var btn=document.querySelector('.nav-hamburger');var open=btn.getAttribute('aria-expanded')==='true';btn.setAttribute('aria-expanded',String(!open));var drawer=document.getElementById('mobile-nav-drawer');var panel=document.getElementById('mobile-nav-panel');drawer.style.display=open?'none':'block';drawer.setAttribute('aria-hidden',String(open));panel.style.transform=open?'translateX(-100%)':'translateX(0)'}
@@ -202,18 +224,22 @@ export function fullPage(user, title, content, scripts = []) {
 
 export function statCards(cards) {
   return `<div class="stats shadow w-full mb-6 flex-wrap">` +
-    cards.map(c => `<div class="stat"><div class="stat-title">${c.label}</div><div class="stat-value text-2xl${c.textClass || ''}">${c.value}</div>${c.sub ? `<div class="stat-desc">${c.sub}</div>` : ''}</div>`).join('') +
+    cards.map(c => `<div class="stat"><div class="stat-title">${esc(c.label)}</div><div class="stat-value text-2xl${c.textClass ? ' ' + esc(c.textClass) : ''}">${esc(c.value)}</div>${c.sub ? `<div class="stat-desc">${esc(c.sub)}</div>` : ''}</div>`).join('') +
     `</div>`
 }
 
 export function confirmDialog(entityName) {
+  const noun = entityName ? `this ${esc(String(entityName).replace(/_/g, ' '))}` : 'this item'
   return `<div id="confirm-dialog" class="confirm-overlay" style="display:none" ${role.alertdialog} ${aria.labelledBy('confirm-title')} ${aria.describedBy('confirm-msg')} ${aria.hidden('true')}>
     <div class="confirm-dialog"><h2 id="confirm-title" class="confirm-title">Confirm Delete</h2>
-    <div id="confirm-msg" class="confirm-message">Are you sure you want to delete this item? This action cannot be undone.</div>
+    <div id="confirm-msg" class="confirm-message">Are you sure you want to delete ${noun}? This action cannot be undone.</div>
     <div class="confirm-actions"><button type="button" data-action="cancelDelete" class="btn btn-ghost" ${aria.label('Cancel deletion')}>Cancel</button>
     <button type="button" id="confirm-delete-btn" data-action="executeDelete" class="btn btn-error" ${aria.label('Confirm deletion')}>Delete</button></div></div></div>`
 }
 
+// headers and rows are pre-rendered HTML fragments composed by the caller; emptyMsg
+// may carry a caller-provided HTML link (e.g. "Create your first ..."), so it is
+// trusted-by-contract here. Callers MUST esc() any user/db data they fold into these.
 export function dataTable(headers, rows, emptyMsg) {
-  return `<div class="card-clean"><div class="table-wrap" ${role.region} ${aria.label('Data table')}><table class="data-table"><thead><tr>${headers}</tr></thead><tbody id="table-body">${rows || `<tr><td colspan="100" class="text-center py-8 text-base-content/50">${emptyMsg}</td></tr>`}</tbody></table></div></div>`
+  return `<div class="card-clean"><div class="table-wrap" ${role.region} ${aria.label('Data table')}><table class="data-table"><thead><tr>${headers}</tr></thead><tbody id="table-body">${rows || `<tr><td colspan="100" class="text-center py-8 text-base-content/50">${emptyMsg || 'No items found'}</td></tr>`}</tbody></table></div></div>`
 }

package/src/ui/ml-console-renderer.js

@@ -1,7 +1,3 @@
-// ML / AI query console — lists highlight comments flagged as ML-candidate queries.
-// MVP: read-only list of highlights with comment text + link back to the source review.
-// Full AI integration (model invocation, response streaming) is out of scope — stub.
-
 import { page } from '@/ui/layout.js';
 import { esc } from '@/ui/render-helpers.js';
 import { SPACING } from '@/ui/spacing-system.js';
@@ -17,13 +13,13 @@ export function renderMlConsole(user, candidates, reviewMap) {
     const rows = candidates.map((h) => {
         const reviewName = reviewMap[h.review_id] || '-';
         const comment = h.comment || h.text || '';
-        const truncated = comment.length > 240 ? comment.slice(0, 240) + '…' : comment;
+        const truncated = comment.length > 240 ? comment.slice(0, 240) + '...' : comment;
         return `<tr>
             <td style="padding:8px 10px;border-bottom:1px solid var(--color-border);font-size:13px">
                 <div style="font-weight:500">${esc(reviewName)}</div>
                 <div style="font-size:11px;color:var(--color-text-muted);margin-top:2px">p.${h.page_number || '?'}</div>
             </td>
-            <td style="padding:8px 10px;border-bottom:1px solid var(--color-border);font-size:13px;max-width:560px">${esc(truncated)}</td>
+            <td title="${esc(comment)}" style="padding:8px 10px;border-bottom:1px solid var(--color-border);font-size:13px;max-width:560px">${esc(truncated)}</td>
             <td style="padding:8px 10px;border-bottom:1px solid var(--color-border);font-size:12px;color:var(--color-text-muted);white-space:nowrap">${fmtDate(h.created_at)}</td>
             <td style="padding:8px 10px;border-bottom:1px solid var(--color-border);text-align:right">
                 <a href="/review/${esc(h.review_id)}/pdf#h-${esc(h.id)}" class="btn-ghost-clean" style="padding:4px 10px;font-size:12px">Open</a>
@@ -57,19 +53,14 @@ export function renderMlConsole(user, candidates, reviewMap) {
                 <tbody>${rows}</tbody>
             </table>
         </div>
-        <div style="margin-top:${SPACING.md};padding:${SPACING.md};background:var(--color-surface-muted,#f8fafc);border-radius:8px;font-size:13px;color:var(--color-text-muted)">
-            <strong>Note:</strong> Full AI integration requires an external model service.
-            Clicking "Ask AI" currently records an intent; plumbing to a model endpoint is
-            the next implementation step.
-        </div>
     </div>
-    <div id="ml-ask-dialog" class="modal" style="display:none" data-dialog-close-overlay="true">
+    <div id="ml-ask-dialog" class="modal" style="display:none">
       <div class="modal-overlay" data-dialog-close="ml-ask-dialog"></div>
       <div class="modal-content rounded-box max-w-lg p-6">
         <h3 style="font-size:16px;font-weight:600;margin:0 0 12px 0">AI Suggestion</h3>
         <div id="ml-ask-query" style="font-size:13px;color:var(--color-text-muted);margin-bottom:12px;padding:8px 10px;background:var(--color-surface-muted,#f8fafc);border-radius:6px"></div>
-        <div id="ml-ask-result" style="font-size:14px;white-space:pre-wrap;min-height:60px;padding:10px;background:white;border:1px solid var(--color-border);border-radius:6px">
-          <div style="color:var(--color-text-muted);font-style:italic">Generating suggestion…</div>
+        <div id="ml-ask-result" style="font-size:14px;white-space:pre-wrap;min-height:60px;padding:10px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:6px">
+          <div style="color:var(--color-text-muted);font-style:italic">Generating suggestion...</div>
         </div>
         <div id="ml-ask-meta" style="font-size:11px;color:var(--color-text-muted);margin-top:8px"></div>
         <div class="modal-action" style="margin-top:16px">
@@ -84,7 +75,13 @@ export function renderMlConsole(user, candidates, reviewMap) {
         var qText = row ? row.querySelector('td:nth-child(2)').textContent.trim() : '';
         var dlg = document.getElementById('ml-ask-dialog');
         document.getElementById('ml-ask-query').textContent = qText;
-        document.getElementById('ml-ask-result').innerHTML = '<div style="color:#64748b;font-style:italic">Generating suggestion…</div>';
+        var resultEl = document.getElementById('ml-ask-result');
+        resultEl.textContent = '';
+        var loadingEl = document.createElement('div');
+        loadingEl.style.color = '#64748b';
+        loadingEl.style.fontStyle = 'italic';
+        loadingEl.textContent = 'Generating suggestion...';
+        resultEl.appendChild(loadingEl);
         document.getElementById('ml-ask-meta').textContent = '';
         dlg.style.display = 'flex';
         try {
@@ -98,11 +95,13 @@ export function renderMlConsole(user, candidates, reviewMap) {
           }
         } catch (e) {
           document.getElementById('ml-ask-result').textContent = 'Network error: ' + e.message;
+          if (window.showToast) window.showToast(e.message || 'Request failed', 'error');
+          console.error(e);
         }
       };
     })();
     </script>`;
 
     const bc = [{ href: '/', label: 'Home' }, { href: '/review', label: 'Reviews' }, { label: 'ML Console' }];
-    return page(user, 'AI / ML Query Console | Moonlanding', bc, content);
+    return page(user, 'AI / ML Query Console | Thatcher', bc, content);
 }

package/src/ui/monitoring-dashboard-client.js

@@ -2,6 +2,7 @@ export function monitoringDashboardScript() {
   return `
     <script>
       let currentTab = 'requests'
+      function mdEsc(s){return String(s==null?'':s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;')}
 
       function showTab(name) {
         document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'))
@@ -69,7 +70,7 @@ export function monitoringDashboardScript() {
       function updateRequests(requests) {
         const html = Object.entries(requests).map(([endpoint, stats]) => \`
           <div class="mb-4 p-3 bg-base-100 rounded">
-            <div class="font-bold">\${endpoint}</div>
+            <div class="font-bold">\${mdEsc(endpoint)}</div>
             <div class="grid grid-cols-7 gap-2 text-sm mt-2">
               <div>Count: \${stats.count}</div>
               <div>Min: \${stats.min.toFixed(1)}ms</div>
@@ -86,9 +87,9 @@ export function monitoringDashboardScript() {
 
       function updateAlerts(alerts) {
         const html = alerts.map(alert => \`
-          <div class="p-3 rounded alert-\${alert.severity}">
-            <div class="font-bold">[\${alert.severity.toUpperCase()}] \${alert.type}</div>
-            <div>\${alert.message}</div>
+          <div class="p-3 rounded alert-\${mdEsc(alert.severity)}">
+            <div class="font-bold">[\${mdEsc(String(alert.severity).toUpperCase())}] \${mdEsc(alert.type)}</div>
+            <div>\${mdEsc(alert.message)}</div>
             <div class="text-sm text-gray-600">\${new Date(alert.timestamp).toLocaleString()}</div>
           </div>
         \`).join('')
@@ -104,7 +105,7 @@ export function monitoringDashboardScript() {
             <div class="mt-4 font-bold">Slow Queries:</div>
             \${(db.slowQueries || []).map(q => \`
               <div class="p-2 bg-base-100 rounded text-sm">
-                <div class="font-mono">\${q.sql}</div>
+                <div class="font-mono">\${mdEsc(q.sql)}</div>
                 <div>Duration: \${q.duration.toFixed(2)}ms</div>
               </div>
             \`).join('') || '<p>None</p>'}
@@ -136,9 +137,9 @@ export function monitoringDashboardScript() {
 
       function updateLogs(logs) {
         const html = logs.map(log => \`
-          <div class="log-\${log.level} mb-1">
-            [\${log.iso}] [\${log.level.toUpperCase()}] \${log.message}
-            \${Object.keys(log.metadata).length ? ' ' + JSON.stringify(log.metadata) : ''}
+          <div class="log-\${mdEsc(log.level)} mb-1">
+            [\${mdEsc(log.iso)}] [\${mdEsc(String(log.level).toUpperCase())}] \${mdEsc(log.message)}
+            \${Object.keys(log.metadata).length ? ' ' + mdEsc(JSON.stringify(log.metadata)) : ''}
           </div>
         \`).join('')
         document.getElementById('log-list').innerHTML = html || '<p>No logs</p>'