thatcher 1.0.7 → 1.0.34

package/src/ui/engagement-grid-renderer.js

@@ -1,6 +1,7 @@
 import { page } from '@/ui/layout.js';
 import { canCreate } from '@/ui/permissions-ui.js';
-import { esc, stagePill, statusPill, progressBar, STAGE_CONFIG, TABLE_SCRIPT } from '@/ui/render-helpers.js';
+import { esc, stagePill, statusPill, progressBar, STAGE_CONFIG, TABLE_SCRIPT, emptyRow } from '@/ui/render-helpers.js';
+import { SPACING } from '@/ui/spacing-system.js';
 
 function engRow(e) {
   const name = esc(e.name || e.client_name || 'Untitled');
@@ -8,7 +9,7 @@ function engRow(e) {
   const type = esc(e.type || e.engagement_type || e.repeat_interval || '-');
   const year = esc(e.year || '-');
   const team = esc(e.team_name || e.team_id_display || e.team_id || '-');
-  const deadline = e.deadline ? new Date(e.deadline).toLocaleDateString() : '-';
+  const deadline = e.deadline ? new Date(e.deadline).toLocaleDateString('en-ZA',{day:'2-digit',month:'short',year:'numeric'}) : '-';
   const stageCfg = STAGE_CONFIG.find(s => s.key === e.stage);
   const stageLbl = stageCfg?.label || (e.stage || '-');
   // 247420 indicator-rail: 3px left edge tinted by stage color (replaces border)
@@ -38,10 +39,10 @@ export function renderEngagementGrid(user, engagements, options = {}) {
   engagements.forEach(e => { if (stageCounts[e.stage] !== undefined) stageCounts[e.stage]++; });
 
   const stageStats = `<div class="stats-row">${STAGE_CONFIG.map(s =>
-    `<div class="stat-card stat-card-clickable" data-action="filterByStage" data-args='["${s.key}"]' id="stage-card-${s.key}">
+    `<button type="button" class="stat-card stat-card-clickable" data-action="filterByStage" data-args='["${s.key}"]' id="stage-card-${s.key}" aria-label="Filter by ${s.label} stage (${stageCounts[s.key]||0} engagements)">
       <div class="stat-card-value">${stageCounts[s.key]||0}</div>
       <div class="stat-card-label">${s.label}</div>
-    </div>`
+    </button>`
   ).join('')}</div>`;
 
   const tabs = [
@@ -63,23 +64,23 @@ export function renderEngagementGrid(user, engagements, options = {}) {
   const yearOpts = years.map(y => `<option value="${esc(y)}">${esc(y)}</option>`).join('');
 
   const rows = engagements.map(e => engRow(e)).join('') ||
-    `<tr><td colspan="11" style="text-align:center;padding:48px;color:var(--color-text-muted)">No engagements found</td></tr>`;
+    emptyRow(11, 'No engagements found');
 
-  const emailReceiveDialog = `<div id="email-receive-dialog" class="dialog-overlay" style="display:none" role="dialog" aria-modal="true">
+  const emailReceiveDialog = `<div id="email-receive-dialog" class="dialog-overlay" style="display:none" role="dialog" aria-modal="true" aria-labelledby="email-receive-dialog-title" data-dialog-close="email-receive-dialog">
     <div class="dialog-panel" style="max-width:540px">
-      <div class="dialog-header"><span class="dialog-title">Receive Email</span><button class="dialog-close" aria-label="Close dialog" data-dialog-close="email-receive-dialog">&times;</button></div>
+      <div class="dialog-header"><span class="dialog-title" id="email-receive-dialog-title">Receive Email</span><button class="dialog-close" aria-label="Close dialog" data-dialog-close="email-receive-dialog">&times;</button></div>
       <div class="dialog-body">
         <div class="modal-form-group"><label>Email Content</label><textarea id="email-receive-content" class="form-input" rows="8" placeholder="Paste raw email content here..."></textarea></div>
         <div id="email-receive-result" style="display:none;margin-top:8px"></div>
       </div>
       <div class="dialog-footer">
-        <button class="btn btn-ghost btn-sm" data-dialog-close="email-receive-dialog">Cancel</button>
-        <button class="btn btn-primary btn-sm" data-action="submitEmailReceive">Process Email</button>
+        <button type="button" class="btn-ghost-clean" data-dialog-close="email-receive-dialog">Cancel</button>
+        <button type="button" class="btn-primary-clean" data-action="submitEmailReceive">Process Email</button>
       </div>
     </div>
   </div>`;
 
-  const emailReceiveScript = `window.submitEmailReceive=async function(){var content=document.getElementById('email-receive-content').value.trim();var res=document.getElementById('email-receive-result');if(!content){res.style.display='block';res.innerHTML='<div style="color:var(--color-danger);font-size:13px">Email content required.</div>';return}res.style.display='block';res.innerHTML='<div style="font-size:13px">Processing...</div>';try{var r=await fetch('/api/email/receive',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({content:content})});var d=await r.json();if(r.ok&&d.success){res.innerHTML='<div style="color:var(--color-success);font-size:13px">Email processed successfully.'+(d.engagement_id?' Matched engagement: '+d.engagement_id:'')+(d.message?' '+d.message:'')+'</div>'}else{res.innerHTML='<div style="color:var(--color-danger);font-size:13px">'+(d.error||d.message||'Failed to process email')+'</div>'}}catch(e){res.innerHTML='<div style="color:var(--color-danger);font-size:13px">Error: '+e.message+'</div>'}};`;
+  const emailReceiveScript = `window.submitEmailReceive=async function(){var content=document.getElementById('email-receive-content').value.trim();var res=document.getElementById('email-receive-result');if(!content){res.style.display='block';res.innerHTML='<div style="color:var(--color-danger);font-size:13px;margin-top:${SPACING.sm}">Email content required.</div>';return}res.style.display='block';res.innerHTML='<div style="font-size:13px;margin-top:${SPACING.sm}">Processing...</div>';try{var r=await fetch('/api/email/receive',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({content:content})});var d=await r.json();if(r.ok&&d.success){res.innerHTML='<div style="color:var(--color-success);font-size:13px;margin-top:${SPACING.sm}">Email processed successfully.'+(d.engagement_id?' Matched engagement: '+d.engagement_id:'')+(d.message?' '+d.message:'')+'</div>'}else{res.innerHTML='<div style="color:var(--color-danger);font-size:13px;margin-top:${SPACING.sm}">'+(d.error||d.message||'Failed to process email')+'</div>'}}catch(e){res.innerHTML='<div style="color:var(--color-danger);font-size:13px;margin-top:${SPACING.sm}">Error: '+e.message+'</div>'}};`;
 
   const content = `<div class="page-header">
         <div><h1 class="page-title">Engagements</h1><p class="page-subtitle">${engagements.length} total engagements</p></div>
@@ -89,18 +90,18 @@ export function renderEngagementGrid(user, engagements, options = {}) {
       <div class="table-wrap eng-table-mobile-scroll">
         <div class="table-toolbar">
           <div class="table-search"><input id="search-input" type="text" placeholder="Search engagements..."></div>
-          ${stageOpts ? `<div class="table-filter"><select data-filter="stage-raw" id="filter-stage"><option value="">All Stages</option>${stageOpts}</select></div>` : ''}
-          ${teamOpts ? `<div class="table-filter"><select data-filter="team" id="filter-team"><option value="">All Teams</option>${teamOpts}</select></div>` : ''}
-          ${yearOpts ? `<div class="table-filter"><select data-filter="year" id="filter-year"><option value="">All Years</option>${yearOpts}</select></div>` : ''}
+          ${stageOpts ? `<div class="table-filter"><select data-filter="stage-raw" id="filter-stage" aria-label="Filter by stage"><option value="">All Stages</option>${stageOpts}</select></div>` : ''}
+          ${teamOpts ? `<div class="table-filter"><select data-filter="team" id="filter-team" aria-label="Filter by team"><option value="">All Teams</option>${teamOpts}</select></div>` : ''}
+          ${yearOpts ? `<div class="table-filter"><select data-filter="year" id="filter-year" aria-label="Filter by year"><option value="">All Years</option>${yearOpts}</select></div>` : ''}
           <button class="btn btn-ghost btn-sm" data-action="openDialog" data-args='["email-receive-dialog"]'>Receive Email</button>
           <span class="table-count" id="row-count">${engagements.length} items</span>
         </div>
-        <table class="data-table">
+        <table class="data-table" role="grid">
           <thead><tr>
-            <th data-sort="name">Name</th><th data-sort="client">Client</th><th data-sort="type" class="eng-col-type">Type</th>
-            <th data-sort="year" class="eng-col-year">Year</th><th data-sort="team" class="eng-col-team">Team</th><th data-sort="stage-raw">Stage</th>
-            <th style="display:none"></th><th data-sort="status">Status</th><th data-sort="deadline">Deadline</th>
-            <th data-sort="rfi" class="eng-col-rfi" style="text-align:center">RFI</th><th class="eng-col-progress">Progress</th>
+            <th data-sort="name" aria-label="Sort by Name">Name</th><th data-sort="client" aria-label="Sort by Client">Client</th><th data-sort="type" class="eng-col-type" aria-label="Sort by Type">Type</th>
+            <th data-sort="year" class="eng-col-year" aria-label="Sort by Year">Year</th><th data-sort="team" class="eng-col-team" aria-label="Sort by Team">Team</th><th data-sort="stage-raw" aria-label="Sort by Stage">Stage</th>
+            <th style="display:none"></th><th data-sort="status" aria-label="Sort by Status">Status</th><th data-sort="deadline" aria-label="Sort by Deadline">Deadline</th>
+            <th data-sort="rfi" class="eng-col-rfi" style="text-align:center" aria-label="Sort by RFI">RFI</th><th class="eng-col-progress" aria-label="Progress">Progress</th>
           </tr></thead>
           <tbody>${rows}</tbody>
         </table>
@@ -108,5 +109,5 @@ export function renderEngagementGrid(user, engagements, options = {}) {
 
   const stageFilterScript = `var _activeStage='';function filterByStage(stage){_activeStage=_activeStage===stage?'':stage;document.querySelectorAll('[id^="stage-card-"]').forEach(c=>{const s=c.id.replace('stage-card-','');c.style.outline=_activeStage===s?'2px solid var(--color-primary)':'none'});window.filterTable();}var _origFilter=window.filterTable||function(){};window.filterTable=function(){_origFilter();if(!_activeStage)return;const stageLabels=${JSON.stringify(Object.fromEntries(STAGE_CONFIG.map(s=>[s.key,s.label])))};document.querySelectorAll('tbody tr[data-row]').forEach(row=>{const stageCell=row.querySelector('[data-col="stage"]');if(stageCell&&!stageCell.textContent.toLowerCase().includes((stageLabels[_activeStage]||_activeStage||'').toLowerCase())){row.style.display='none';}})};function switchTab(tab){document.querySelectorAll('[id^="tab-"]').forEach(b=>b.classList.toggle('active',b.id==='tab-'+tab))}`;
 
-  return page(user, 'Engagements | Moonlanding', null, content, [TABLE_SCRIPT, stageFilterScript, emailReceiveScript]);
+  return page(user, 'Engagements | Thatcher', null, content, [TABLE_SCRIPT, stageFilterScript, emailReceiveScript]);
 }

package/src/ui/entity-renderer.js

@@ -1,6 +1,6 @@
 import { h } from '@/ui/webjsx.js'
 import { page, confirmDialog, dataTable } from '@/ui/layout.js'
-import { fmtVal, TOAST_SCRIPT } from '@/ui/render-helpers.js'
+import { fmtVal, TOAST_SCRIPT, esc } from '@/ui/render-helpers.js'
 import { canCreate, canEdit, canDelete } from '@/ui/permissions-ui.js'
 
 export function renderEntityList(entityName, items, spec, user, options = {}) {
@@ -10,16 +10,20 @@ export function renderEntityList(entityName, items, spec, user, options = {}) {
   let listFields = Object.entries(fields).filter(([k, f]) => f.list).slice(0, 5)
   if (!listFields.length) listFields = Object.entries(fields).filter(([k]) => !['created_by', 'updated_by'].includes(k)).slice(0, 6)
   if (!listFields.length && items.length > 0) listFields = Object.keys(items[0]).filter(k => !['created_by', 'updated_by'].includes(k)).slice(0, 5).map(k => [k, { label: k }])
-  const headers = listFields.map(([k, f]) => `<th>${f?.label || k}</th>`).join('') + '<th>Actions</th>'
+  const headers = listFields.map(([k, f]) => `<th>${esc(f?.label || k)}</th>`).join('') + '<th>Actions</th>'
   const userCanEdit = canEdit(user, entityName)
   const userCanDelete = canDelete(user, entityName)
   const userCanCreate = canCreate(user, entityName)
 
   const buildRow = item => {
+    const id = esc(String(item.id))
+    const idArg = esc(JSON.stringify([String(item.id)]))
     const cells = listFields.map(([k]) => `<td>${fmtVal(item[k], k, item)}</td>`).join('')
-    const editBtn = userCanEdit ? `<a href="/${entityName}/${item.id}/edit" class="btn btn-xs btn-outline">Edit</a>` : `<span class="btn btn-xs btn-outline btn-disabled tooltip" data-tip="No permission">Edit</span>`
-    const delBtn = userCanDelete ? `<button data-stop-propagation="true" data-action="confirmDelete" data-args='["${item.id}"]' class="btn btn-xs btn-error btn-outline">Delete</button>` : `<span class="btn btn-xs btn-error btn-outline btn-disabled tooltip" data-tip="No permission">Delete</span>`
-    return `<tr class="hover cursor-pointer" data-searchable tabindex="0" role="link" data-navigate="/${entityName}/${item.id}" onkeydown="if(event.key==='Enter'){window.location='/${entityName}/${item.id}'}">${cells}<td class="flex gap-1"><a href="/${entityName}/${item.id}" class="btn btn-xs btn-ghost">View</a>${editBtn}${delBtn}</td></tr>`
+    const editBtn = userCanEdit ? `<a href="/${entityName}/${id}/edit" class="btn btn-xs btn-outline">Edit</a>` : `<span class="btn btn-xs btn-outline btn-disabled tooltip" data-tip="No permission">Edit</span>`
+    const delBtn = userCanDelete ? `<button data-stop-propagation="true" data-action="confirmDelete" data-args='${idArg}' class="btn btn-xs btn-error btn-outline">Delete</button>` : `<span class="btn btn-xs btn-error btn-outline btn-disabled tooltip" data-tip="No permission">Delete</span>`
+    // Keyboard activation is handled centrally by event-delegation's data-navigate
+    // handler (Enter/Space on role=link); no inline onkeydown to avoid a competing path.
+    return `<tr class="hover cursor-pointer" data-searchable tabindex="0" role="link" data-navigate="/${entityName}/${id}">${cells}<td class="flex gap-1"><a href="/${entityName}/${id}" class="btn btn-xs btn-ghost">View</a>${editBtn}${delBtn}</td></tr>`
   }
 
   let tableContent
@@ -27,25 +31,29 @@ export function renderEntityList(entityName, items, spec, user, options = {}) {
     const groups = {}
     items.forEach(item => { const key = String(item[groupBy] || '(No ' + groupBy + ')'); if (!groups[key]) groups[key] = []; groups[key].push(item) })
     const sortedKeys = Object.keys(groups).sort()
-    const groupRows = sortedKeys.map(gkey => {
+    const groupRows = sortedKeys.map((gkey, gi) => {
       const groupItems = groups[gkey]
-      const groupId = `group-${gkey.replace(/\s+/g, '-').toLowerCase()}`
-      const togglerId = `toggle-${gkey.replace(/\s+/g, '-').toLowerCase()}`
+      // Index-based ids: slugs collide when two group values differ only by
+      // punctuation/case (e.g. 'A/B' vs 'a-b'), which breaks the collapse toggle.
+      const groupId = `group-${gi}`
+      const togglerId = `toggle-${gi}`
       const itemRows = groupItems.map(buildRow).join('')
-      return `<tbody class="group-section" data-group="${gkey}"><tr class="group-header hover cursor-pointer" tabindex="0" data-toggle="${togglerId}"><td colspan="100" style="padding:12px"><div class="flex items-center gap-2"><input type="checkbox" id="${togglerId}" class="group-toggle" style="cursor:pointer" checked/><span class="font-semibold text-base">${gkey}</span><span class="badge badge-sm">${groupItems.length}</span></div></td></tr><tr class="group-content" id="${groupId}" style="display:contents"><td colspan="100"><table class="data-table" style="background:transparent"><tbody>${itemRows}</tbody></table></td></tr></tbody>`
+      const gkeySafe = esc(gkey)
+      return `<tbody class="group-section" data-group="${gkeySafe}"><tr class="group-header hover cursor-pointer" tabindex="0" data-toggle="${togglerId}"><td colspan="100" style="padding:12px"><div class="flex items-center gap-2"><input type="checkbox" id="${togglerId}" class="group-toggle" style="cursor:pointer" checked/><span class="font-semibold text-base">${gkeySafe}</span><span class="badge badge-sm">${groupItems.length}</span></div></td></tr><tr class="group-content" id="${groupId}" style="display:contents"><td colspan="100"><table class="data-table" style="background:transparent"><tbody>${itemRows}</tbody></table></td></tr></tbody>`
     }).join('')
     tableContent = `<div class="card-clean"><div class="table-wrap"><table class="data-table"><thead><tr>${headers}</tr></thead>${groupRows}</table></div></div>`
   } else {
     const rows = items.map(buildRow).join('')
-    tableContent = dataTable(headers, rows, items.length === 0 ? (userCanCreate ? `No items found. <a href="/${entityName}/new" class="text-primary hover:underline">Create your first ${label.toLowerCase()}</a>` : 'No items found.') : '')
+    tableContent = dataTable(headers, rows, items.length === 0 ? (userCanCreate ? `No items found. <a href="/${entityName}/new" class="text-primary hover:underline">Create your first ${esc(label.toLowerCase())}</a>` : 'No items found.') : '')
   }
 
   const createBtn = userCanCreate ? `<a href="/${entityName}/new" class="btn btn-primary btn-sm">Create New</a>` : ''
-  const content = `<div class="flex justify-between items-center mb-6"><h1 class="text-2xl font-bold">${label}</h1><div class="flex gap-2"><label for="search-input" class="sr-only">Search</label><input type="text" id="search-input" placeholder="Search..." class="input input-solid input-sm" style="width:200px" aria-label="Search items"/>${createBtn}</div></div>${tableContent}${userCanDelete ? confirmDialog(entityName) : ''}`
+  const content = `<div class="flex justify-between items-center mb-6"><h1 class="text-2xl font-bold">${esc(label)}</h1><div class="flex gap-2"><label for="search-input" class="sr-only">Search</label><input type="text" id="search-input" placeholder="Search..." class="input input-solid input-sm" style="width:200px" aria-label="Search items"/>${createBtn}</div></div>${tableContent}`
 
-  const deleteScript = `let pendingDeleteId=null;window.confirmDelete=(id)=>{pendingDeleteId=id;document.getElementById('confirm-dialog').style.display='flex'};window.cancelDelete=()=>{pendingDeleteId=null;document.getElementById('confirm-dialog').style.display='none'};window.executeDelete=async()=>{if(!pendingDeleteId)return;const btn=document.getElementById('confirm-delete-btn');btn.classList.add('btn-loading');btn.textContent='Deleting...';try{const res=await fetch('/api/${entityName}/'+pendingDeleteId,{method:'DELETE'});if(res.ok){showToast('Deleted successfully','success');setTimeout(()=>window.location.reload(),500)}else{const d=await res.json().catch(()=>({}));showToast(d.message||d.error||'Delete failed','error');cancelDelete();btn.classList.remove('btn-loading');btn.textContent='Delete'}}catch(err){showToast('Error: '+err.message,'error');cancelDelete();btn.classList.remove('btn-loading');btn.textContent='Delete'}}`
+  // Canonical gmConfirm (session-13): replaces the bespoke confirm-dialog markup + confirmDelete/cancelDelete/executeDelete show-hide.
+  const deleteScript = `window.confirmDelete=async(id)=>{if(!id)return;const ok=await window.gmConfirm({title:'Delete ${entityName}',message:'Delete this ${entityName}? This cannot be undone.',confirmLabel:'Delete',danger:true});if(!ok)return;try{const res=await fetch('/api/${entityName}/'+id,{method:'DELETE'});if(res.ok){showToast('Deleted successfully','success');setTimeout(()=>window.location.reload(),500)}else{const d=await res.json().catch(()=>({}));showToast(d.message||d.error||'Delete failed','error')}}catch(err){showToast('Error: '+err.message,'error')}}`
   const searchScript = `function initSearch(){const si=document.getElementById('search-input');const tb=document.querySelectorAll('[data-searchable]');const groups=document.querySelectorAll('[data-group]');let visibleGroupCount=0;si.addEventListener('input',(e)=>{const query=e.target.value.toLowerCase().trim();const terms=query.length>0?query.split(/\\s+/):[],hasResults=terms.length>0;visibleGroupCount=0;groups.forEach(g=>{const rows=g.querySelectorAll('[data-searchable]');let visibleRows=0;rows.forEach(r=>{const text=r.textContent.toLowerCase();const matches=terms.every(t=>text.includes(t));r.style.display=matches?'':'none';if(matches)visibleRows++});const groupVisible=visibleRows>0;g.style.display=groupVisible?'':'none';if(groupVisible)visibleGroupCount++;const badge=g.querySelector('.badge');if(badge)badge.textContent=visibleRows});tb.forEach(r=>{if(!r.closest('[data-group]')){const text=r.textContent.toLowerCase();const matches=query.length===0||terms.every(t=>text.includes(t));r.style.display=matches?'':'none'}});const totalVisible=document.querySelectorAll('[data-searchable]:not([style*="display: none"])').length,noResults=hasResults&&totalVisible===0;let msg=document.getElementById('search-no-results');if(noResults&&!msg){msg=document.createElement('tr');msg.id='search-no-results';msg.innerHTML='<td colspan="100" class="text-center py-8 text-base-content/50">No results found for "'+query+'"</td>';const tbody=document.getElementById('table-body')||document.querySelector('tbody');if(tbody)tbody.appendChild(msg)}else if(!noResults&&msg)msg.remove()});const toggles=document.querySelectorAll('.group-toggle');toggles.forEach(tog=>{tog.addEventListener('change',(e)=>{e.stopPropagation();const row=tog.closest('tr');const tbody=row.parentElement;const content=tbody.querySelector('.group-content');content.style.display=tog.checked?'contents':'none'})});if(si.value)si.dispatchEvent(new Event('input'))}document.addEventListener('DOMContentLoaded',initSearch)`
-  return page(user, `${label} | Moonlanding`, [{ href: '/', label: 'Dashboard' }, { href: `/${entityName}`, label }], content, [TOAST_SCRIPT, deleteScript, searchScript])
+  return page(user, `${label} | Thatcher`, [{ href: '/', label: 'Dashboard' }, { href: `/${entityName}`, label }], content, [TOAST_SCRIPT, deleteScript, searchScript])
 }
 
 const HIDDEN_FIELDS = new Set(['password_hash', 'password', 'session_token', 'photo_url'])
@@ -60,10 +68,10 @@ function formatFieldValue(k, v, entityName) {
   if (entityName === 'user' && k === 'role') return `<span class="pill pill-neutral">${roleLabel(v)}</span>`
   if (entityName === 'user' && k === 'status') {
     const cls = v === 'active' ? 'pill-success' : v === 'deleted' ? 'pill-danger' : 'pill-neutral'
-    return `<span class="pill ${cls}">${v ? v.charAt(0).toUpperCase() + v.slice(1) : '-'}</span>`
+    return `<span class="pill ${cls}">${v ? esc(v.charAt(0).toUpperCase() + v.slice(1)) : '-'}</span>`
   }
-  if (entityName === 'user' && k === 'email' && v) return `<a href="mailto:${v}" class="text-primary hover:underline">${v}</a>`
-  if (k === 'photo_url' && v && v.startsWith('http')) return `<img src="${v}" style="width:2.5rem;height:2.5rem;border-radius:50%;object-fit:cover" alt="avatar" onerror="this.style.display='none'"/>`
+  if (entityName === 'user' && k === 'email' && v) { const e = esc(v); return `<a href="mailto:${e}" class="text-primary hover:underline">${e}</a>` }
+  if (k === 'photo_url' && v && v.startsWith('http')) return `<img src="${esc(v)}" style="width:2.5rem;height:2.5rem;border-radius:50%;object-fit:cover" alt="avatar" onerror="this.style.display='none'"/>`
   return fmtVal(v, k)
 }
 
@@ -77,30 +85,31 @@ export function renderEntityDetail(entityName, item, spec, user) {
 
   const fieldRows = visibleFields.map(([k, f]) =>
     `<div class="detail-row">
-      <span class="detail-row-label">${f.label || k}</span>
+      <span class="detail-row-label">${esc(f.label || k)}</span>
       <span class="detail-row-value">${formatFieldValue(k, item[k], entityName)}</span>
     </div>`
   ).join('')
 
   const displayName = item.name || item.title || label
-  const initials = (displayName || '?').charAt(0).toUpperCase()
+  const displayNameSafe = esc(displayName)
+  const initials = esc((displayName || '?').charAt(0).toUpperCase())
   const statusCls = item.status === 'active' ? 'pill-success' : item.status === 'deleted' ? 'pill-danger' : 'pill-neutral'
   const statusLabel2 = item.status ? item.status.charAt(0).toUpperCase() + item.status.slice(1) : '-'
 
   const headerExtra = entityName === 'user' ? `
     <div style="display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem">
-      <div style="width:3.5rem;height:3.5rem;border-radius:50%;background:#e0f2fe;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700;color:#0369a1;flex-shrink:0">
-        ${item.photo_url ? `<img src="${item.photo_url}" style="width:3.5rem;height:3.5rem;border-radius:50%;object-fit:cover" alt="${displayName}" onerror="this.style.display='none'"/>` : initials}
+      <div style="width:3.5rem;height:3.5rem;border-radius:50%;background:var(--color-avatar-bg,#e0f2fe);display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700;color:var(--color-avatar-fg,#0369a1);flex-shrink:0">
+        ${item.photo_url ? `<img src="${esc(item.photo_url)}" style="width:3.5rem;height:3.5rem;border-radius:50%;object-fit:cover" alt="${displayNameSafe}" onerror="this.style.display='none'"/>` : initials}
       </div>
       <div>
-        <h1 style="font-size:1.5rem;font-weight:700;margin:0">${displayName}</h1>
+        <h1 style="font-size:1.5rem;font-weight:700;margin:0">${displayNameSafe}</h1>
         <div style="display:flex;align-items:center;gap:0.5rem;margin-top:0.375rem">
-          <span class="pill pill-neutral">${roleLabel(item.role)}</span>
-          <span class="pill ${statusCls}">${statusLabel2}</span>
-          ${item.user_type ? `<span style="font-size:0.75rem;color:var(--color-text-muted)">${item.user_type}</span>` : ''}
+          <span class="pill pill-neutral">${esc(roleLabel(item.role))}</span>
+          <span class="pill ${statusCls}">${esc(statusLabel2)}</span>
+          ${item.user_type ? `<span style="font-size:0.75rem;color:var(--color-text-muted)">${esc(item.user_type)}</span>` : ''}
         </div>
       </div>
-    </div>` : `<div style="margin-bottom:1.5rem"><h1 style="font-size:1.5rem;font-weight:700">${displayName}</h1></div>`
+    </div>` : `<div style="margin-bottom:1.5rem"><h1 style="font-size:1.5rem;font-weight:700">${displayNameSafe}</h1></div>`
 
   const editBtn = userCanEdit ? `<a href="/${entityName}/${item.id}/edit" class="btn btn-outline btn-sm">Edit</a>` : ''
   const delBtn = userCanDelete ? `<button data-action="showDeleteConfirm" class="btn btn-error btn-outline btn-sm">Delete</button>` : ''
@@ -113,9 +122,10 @@ export function renderEntityDetail(entityName, item, spec, user) {
     <div class="card-clean">
       <div class="card-clean-body"><div class="detail-grid">${fieldRows || '<p style="color:var(--color-text-muted);font-size:0.875rem;grid-column:1/-1">No details available</p>'}</div></div>
     </div>
-    ${userCanDelete ? confirmDialog(entityName) : ''}`
+    `
 
-  const script = `${TOAST_SCRIPT}window.showDeleteConfirm=()=>{document.getElementById('confirm-dialog').style.display='flex'};window.hideDeleteConfirm=()=>{document.getElementById('confirm-dialog').style.display='none'};window.executeDelete=async()=>{const btn=document.getElementById('confirm-delete-btn');btn.classList.add('btn-loading');btn.textContent='Deleting...';try{const res=await fetch('/api/${entityName}/${item.id}',{method:'DELETE'});if(res.ok){showToast('Deleted successfully','success');setTimeout(()=>{window.location='/${entityName}'},500)}else{const d=await res.json().catch(()=>({}));showToast(d.message||d.error||'Delete failed','error');hideDeleteConfirm();btn.classList.remove('btn-loading');btn.textContent='Delete'}}catch(err){showToast('Error: '+err.message,'error');hideDeleteConfirm();btn.classList.remove('btn-loading');btn.textContent='Delete'}}`
+  // Canonical gmConfirm (session-13): showDeleteConfirm runs the styled confirm then DELETEs; no bespoke dialog markup/show-hide.
+  const script = `${TOAST_SCRIPT}window.showDeleteConfirm=async()=>{const ok=await window.gmConfirm({title:'Delete ${entityName}',message:'Delete this ${entityName}? This cannot be undone.',confirmLabel:'Delete',danger:true});if(!ok)return;try{const res=await fetch('/api/${entityName}/${item.id}',{method:'DELETE'});if(res.ok){showToast('Deleted successfully','success');setTimeout(()=>{window.location='/${entityName}'},500)}else{const d=await res.json().catch(()=>({}));showToast(d.message||d.error||'Delete failed','error')}}catch(err){showToast('Error: '+err.message,'error')}}`
   const bc = [{ href: '/', label: 'Dashboard' }, { href: `/${entityName}`, label: spec?.labelPlural || label }, { label: item.name || item.title || `#${item.id}` }]
   return page(user, `${label} Detail`, bc, content, [script])
 }
@@ -123,14 +133,14 @@ export function renderEntityDetail(entityName, item, spec, user) {
 export function renderEntityForm(entityName, item, spec, user, isNew = false, refOptions = {}) {
   const label = spec?.label || entityName
   const fields = spec?.fields || {}
-  const lbl = (k, f, req) => `<label class="form-label" for="field-${k}">${f.label||k}${req ? '<span class="req">*</span>' : ''}</label>`
+  const lbl = (k, f, req) => `<label class="form-label" for="field-${k}">${esc(f.label||k)}${req ? '<span class="req">*</span>' : ''}</label>`
   const formFields = Object.entries(fields).filter(([k, f]) => k !== 'id' && !f.auto && !f.readOnly && !f.auto_generate && k !== 'password_hash').map(([k, f]) => {
     let val = item?.[k] ?? f.default ?? ''
     const req = f.required ? 'required' : ''
     const type = f.type === 'number' || f.type === 'int' || f.type === 'decimal' ? 'number' : f.type === 'email' ? 'email' : f.type === 'timestamp' || f.type === 'date' ? 'date' : f.type === 'bool' ? 'checkbox' : 'text'
     // <input type=date> only populates from a strict YYYY-MM-DD; coerce a stored timestamp/ISO value so the existing date pre-fills (else it renders blank and saves empty).
     if (type === 'date' && val) { const d = new Date(val); if (!isNaN(d)) val = d.toISOString().slice(0, 10) }
-    const placeholder = `placeholder="Enter ${(f.label||k).toLowerCase()}"`
+    const placeholder = `placeholder="Enter ${esc((f.label||k).toLowerCase())}"`
     if (entityName === 'user' && k === 'role') {
       const opts = ['partner','manager','clerk','client_admin','client_user'].map(o => `<option value="${o}" ${val===o?'selected':''}>${o.charAt(0).toUpperCase()+o.slice(1).replace('_',' ')}</option>`).join('')
       return `<div class="form-field">${lbl(k,{label:'Role'},true)}<select id="field-role" name="role" class="form-input" required>${opts}</select></div>`
@@ -140,24 +150,24 @@ export function renderEntityForm(entityName, item, spec, user, isNew = false, re
       return `<div class="form-field">${lbl(k,{label:'Status'},false)}<select id="field-status" name="status" class="form-input">${opts}</select></div>`
     }
     if (f.type === 'ref' && refOptions[k]) {
-      const opts = refOptions[k].map(o => `<option value="${o.value}" ${val===o.value?'selected':''}>${o.label}</option>`).join('')
-      return `<div class="form-field">${lbl(k,f,f.required)}<select id="field-${k}" name="${k}" class="form-input" ${req}><option value="">Select ${f.label||k}...</option>${opts}</select></div>`
+      const opts = refOptions[k].map(o => `<option value="${esc(o.value)}" ${val===o.value?'selected':''}>${esc(o.label)}</option>`).join('')
+      return `<div class="form-field">${lbl(k,f,f.required)}<select id="field-${k}" name="${k}" class="form-input" ${req}><option value="">Select ${esc(f.label||k)}...</option>${opts}</select></div>`
     }
-    if (f.type === 'textarea') return `<div class="form-field full">${lbl(k,f,f.required)}<textarea id="field-${k}" name="${k}" class="form-input" style="min-height:100px;resize:vertical" ${req} placeholder="Enter ${(f.label||k).toLowerCase()}">${val}</textarea></div>`
-    if (f.type === 'bool') return `<div class="form-field"><label style="display:flex;align-items:center;gap:8px;cursor:pointer"><input type="checkbox" id="field-${k}" name="${k}" class="checkbox checkbox-primary" ${val?'checked':''}/><span class="form-label" style="margin:0">${f.label||k}</span></label></div>`
+    if (f.type === 'textarea') return `<div class="form-field full">${lbl(k,f,f.required)}<textarea id="field-${k}" name="${k}" class="form-input" style="min-height:100px;resize:vertical" ${req} placeholder="Enter ${esc((f.label||k).toLowerCase())}">${esc(val)}</textarea></div>`
+    if (f.type === 'bool') return `<div class="form-field"><label style="display:flex;align-items:center;gap:8px;cursor:pointer"><input type="checkbox" id="field-${k}" name="${k}" class="checkbox checkbox-primary" ${val?'checked':''}/><span class="form-label" style="margin:0">${esc(f.label||k)}</span></label></div>`
     if (f.type === 'enum' && f.options) {
-      const opts = (Array.isArray(f.options) ? f.options : []).map(o => { const ov = typeof o === 'string' ? o : o.value; const ol = typeof o === 'string' ? o : o.label; return `<option value="${ov}" ${val===ov?'selected':''}>${ol}</option>` }).join('')
-      return `<div class="form-field">${lbl(k,f,f.required)}<select id="field-${k}" name="${k}" class="form-input" ${req}><option value="">Select ${f.label||k}...</option>${opts}</select></div>`
+      const opts = (Array.isArray(f.options) ? f.options : []).map(o => { const ov = typeof o === 'string' ? o : o.value; const ol = typeof o === 'string' ? o : o.label; return `<option value="${esc(ov)}" ${val===ov?'selected':''}>${esc(ol)}</option>` }).join('')
+      return `<div class="form-field">${lbl(k,f,f.required)}<select id="field-${k}" name="${k}" class="form-input" ${req}><option value="">Select ${esc(f.label||k)}...</option>${opts}</select></div>`
     }
-    return `<div class="form-field">${lbl(k,f,f.required)}<input type="${type}" id="field-${k}" name="${k}" value="${val}" class="form-input" ${req} ${placeholder}/></div>`
+    return `<div class="form-field">${lbl(k,f,f.required)}<input type="${type}" id="field-${k}" name="${k}" value="${esc(val)}" class="form-input" ${req} ${placeholder}/></div>`
   }).join('\n')
 
   const pwField = entityName === 'user' ? `<div class="form-field"><label class="form-label" for="field-new-password">New Password <small style="font-weight:400;color:var(--color-text-muted)">(leave blank to keep unchanged)</small></label><input type="password" id="field-new-password" name="new_password" class="form-input" placeholder="Enter new password" autocomplete="new-password"/></div>` : ''
   const bc = isNew
     ? [{ href: '/', label: 'Dashboard' }, { href: `/${entityName}`, label: spec?.labelPlural || label }, { label: 'Create' }]
     : [{ href: '/', label: 'Dashboard' }, { href: `/${entityName}`, label: spec?.labelPlural || label }, { href: `/${entityName}/${item?.id}`, label: item?.name || item?.title || `#${item?.id}` }, { label: 'Edit' }]
-  const content = `<div class="form-shell"><div style="margin-bottom:24px"><h1 style="font-size:24px;font-weight:700">${isNew ? 'Create' : 'Edit'} ${label}</h1></div>
-    <div class="form-section"><form id="entity-form" class="form-grid" aria-label="${isNew ? 'Create' : 'Edit'} ${label}">${formFields}${pwField}
+  const content = `<div class="form-shell"><div style="margin-bottom:24px"><h1 style="font-size:24px;font-weight:700">${isNew ? 'Create' : 'Edit'} ${esc(label)}</h1></div>
+    <div class="form-section"><form id="entity-form" class="form-grid" aria-label="${isNew ? 'Create' : 'Edit'} ${esc(label)}">${formFields}${pwField}
     <div class="form-actions" style="grid-column:1/-1"><button type="submit" id="submit-btn" class="btn-primary-clean"><span class="btn-text">Save</span><span class="btn-loading-text" style="display:none">Saving...</span></button>
     <a href="/${entityName}${isNew ? '' : '/' + item?.id}" class="btn-ghost-clean">Cancel</a></div></form></div></div>`
   const script = `${TOAST_SCRIPT}const form=document.getElementById('entity-form');const sb=document.getElementById('submit-btn');form.addEventListener('submit',async(e)=>{e.preventDefault();sb.classList.add('btn-loading');sb.querySelector('.btn-text').style.display='none';sb.querySelector('.btn-loading-text').style.display='inline';sb.disabled=true;const fd=new FormData(form);const data={};for(const[k,v]of fd.entries())data[k]=v;form.querySelectorAll('input[type=checkbox]').forEach(cb=>{data[cb.name]=cb.checked});form.querySelectorAll('input[type=number]').forEach(inp=>{if(inp.name&&data[inp.name]!==undefined&&data[inp.name]!=='')data[inp.name]=Number(data[inp.name])});const url=${isNew}?'/api/${entityName}':'/api/${entityName}/${item?.id}';const method=${isNew}?'POST':'PUT';try{const res=await fetch(url,{method,headers:{'Content-Type':'application/json'},body:JSON.stringify(data)});const result=await res.json();if(res.ok){showToast('${isNew?'Created':'Updated'} successfully!','success');const ed=result.data||result;setTimeout(()=>{window.location='/${entityName}/'+(ed.id||'${item?.id}')},500)}else{showToast(result.message||result.error||'Save failed','error');sb.classList.remove('btn-loading');sb.querySelector('.btn-text').style.display='inline';sb.querySelector('.btn-loading-text').style.display='none';sb.disabled=false}}catch(err){showToast('Error: '+err.message,'error');sb.classList.remove('btn-loading');sb.querySelector('.btn-text').style.display='inline';sb.querySelector('.btn-loading-text').style.display='none';sb.disabled=false}})`
@@ -167,12 +177,16 @@ export function renderEntityForm(entityName, item, spec, user, isNew = false, re
 export function renderSettings(user, config = {}) {
   const t = config.thresholds || {}
   const sections = [
-    { title: 'System Information', items: [['Database Type', config.database?.type || 'SQLite'], ['Server Port', config.server?.port || 3004], ['Session TTL', (t.cache?.session_ttl_seconds || 3600) + 's'], ['Page Size (Default)', t.system?.default_page_size || 50], ['Page Size (Max)', t.system?.max_page_size || 500]] },
+    { title: 'System Information', items: [['Database Type', config.database?.type || 'SQLite'], ['Server Port', config.server?.port || 3000], ['Session TTL', (t.cache?.session_ttl_seconds || 3600) + 's'], ['Page Size (Default)', t.system?.default_page_size || 50], ['Page Size (Max)', t.system?.max_page_size || 500]] },
     { title: 'RFI Configuration', items: [['Max Days Outstanding', (t.rfi?.max_days_outstanding || 90) + ' days'], ['Escalation Delay', (t.rfi?.escalation_delay_hours || 24) + ' hours'], ['Notification Days', (t.rfi?.notification_days || [7,3,1,0]).join(', ')]] },
     { title: 'Email Configuration', items: [['Batch Size', t.email?.send_batch_size || 10], ['Max Retries', t.email?.send_max_retries || 3], ['Rate Limit Delay', (t.email?.rate_limit_delay_ms || 6000) + 'ms']] },
     { title: 'Workflow Configuration', items: [['Stage Transition Lockout', (t.workflow?.stage_transition_lockout_minutes || 5) + ' minutes'], ['Collaborator Default Expiry', (t.collaborator?.default_expiry_days || 7) + ' days'], ['Collaborator Max Expiry', (t.collaborator?.max_expiry_days || 30) + ' days']] },
   ]
-  const cards = sections.map(s => `<div class="card-clean"><div class="card-clean-body"><h2 style="font-size:1rem;font-weight:600">${s.title}</h2><div class="space-y-4 mt-4">${s.items.map(([l, v]) => `<div class="flex justify-between py-2 border-b border-base-200"><span class="text-base-content/50 text-sm">${l}</span><span class="font-medium text-sm">${v}</span></div>`).join('')}</div></div></div>`).join('')
-  return page(user, 'System Settings | Moonlanding', [{ href: '/', label: 'Dashboard' }, { href: '/admin/settings', label: 'Settings' }],
-    `<h1 class="text-2xl font-bold mb-6">System Settings</h1><div class="grid grid-cols-1 lg:grid-cols-2 gap-6">${cards}</div>`)
+  const cards = sections.map(s => `<div class="card-clean"><div class="card-clean-body"><h2 style="font-size:1rem;font-weight:600">${esc(s.title)}</h2><div class="space-y-4 mt-4">${s.items.map(([l, v]) => `<div class="flex justify-between py-2 border-b border-base-200"><span class="text-base-content/50 text-sm">${esc(l)}</span><span class="font-medium text-sm">${esc(v)}</span></div>`).join('')}</div></div></div>`).join('')
+  // These values are config-driven (read-only here). State the source so an admin
+  // who lands expecting to edit knows where to change them, rather than hitting a
+  // silent dead-end page with no affordance.
+  const notice = `<div class="card-clean" style="margin-bottom:1.5rem"><div class="card-clean-body" style="display:flex;gap:0.75rem;align-items:flex-start"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--color-text-muted,#64748b)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="flex-shrink:0;margin-top:1px"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg><p style="margin:0;font-size:0.875rem;color:var(--color-text-muted,#64748b)">These settings are read-only. They are defined in <code>thatcher.config.yml</code> and applied on server start; edit that file and restart to change them.</p></div></div>`
+  return page(user, 'System Settings | Thatcher', [{ href: '/', label: 'Dashboard' }, { href: '/admin/settings', label: 'Settings' }],
+    `<h1 class="text-2xl font-bold mb-6">System Settings</h1>${notice}<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">${cards}</div>`)
 }

package/src/ui/file-dialogs.js

@@ -1,26 +1,31 @@
 import { statusLabel } from '@/ui/renderer.js';
 
+// Inline HTML-escape for client-script innerHTML sinks (file names are DB-sourced).
+const FD_ESC = `function fdEsc(s){return String(s==null?'':s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;')}`;
+
 export function zipFileCreationDialog(engagementId) {
-  return `<div id="zip-create-dialog" class="dialog-overlay" style="display:none" data-dialog-close="zip-create-dialog" role="dialog" aria-modal="true" aria-labelledby="zip-create-dialog-title" aria-hidden="true">
+  return `<div id="zip-create-dialog" class="dialog-overlay" style="display:none" data-dialog-close="zip-create-dialog" role="dialog" aria-modal="true" aria-labelledby="zip-create-dialog-title">
     <div class="dialog-panel"><div class="dialog-header"><span class="dialog-title" id="zip-create-dialog-title">Create Zip Archive</span><button class="dialog-close" data-dialog-close="zip-create-dialog" aria-label="Close dialog">&times;</button></div>
       <div class="dialog-body"><div id="zcd-files" class="flex flex-col gap-2" style="max-height:300px;overflow:auto"></div><div class="flex items-center gap-2 mt-3"><label class="flex items-center gap-2 text-sm"><input type="checkbox" id="zcd-all" class="checkbox checkbox-sm" checked/><span>Select All</span></label></div></div>
       <div class="dialog-footer"><button class="btn btn-ghost btn-sm" data-dialog-close="zip-create-dialog">Cancel</button><button class="btn btn-primary btn-sm" data-action="zcdCreate">Create Zip</button></div>
     </div></div>
   <script>
-  window.openZipCreation=function(){document.getElementById('zip-create-dialog').style.display='flex';fetch('/api/file?engagement_id=${engagementId}').then(function(r){return r.json()}).then(function(d){var files=d.data||d||[];var el=document.getElementById('zcd-files');el.innerHTML=files.map(function(f){return'<label class="flex items-center gap-2"><input type="checkbox" class="checkbox checkbox-sm zcd-cb" value="'+f.id+'" checked/><span class="text-sm">'+(f.name||f.id)+'</span><span class="text-xs text-gray-400">'+(f.size?Math.round(f.size/1024)+'KB':'')+'</span></label>'}).join('')||'<div class="text-gray-500 text-sm">No files available</div>'}).catch(function(){})};
+  ${FD_ESC}
+  window.openZipCreation=function(){document.getElementById('zip-create-dialog').style.display='flex';fetch('/api/file?engagement_id=${engagementId}').then(function(r){return r.json()}).then(function(d){var files=d.data||d||[];var el=document.getElementById('zcd-files');el.innerHTML=files.map(function(f){return'<label class="flex items-center gap-2"><input type="checkbox" class="checkbox checkbox-sm zcd-cb" value="'+fdEsc(f.id)+'" checked/><span class="text-sm">'+fdEsc(f.name||f.id)+'</span><span class="text-xs text-gray-400">'+(f.size?Math.round(f.size/1024)+'KB':'')+'</span></label>'}).join('')||'<div class="text-gray-500 text-sm">No files available</div>'}).catch(function(err){if(window.showToast)showToast(err.message||'Request failed','error');console.error(err)})};
   document.getElementById('zcd-all').addEventListener('change',function(){document.querySelectorAll('.zcd-cb').forEach(function(c){c.checked=this.checked}.bind(this))});
   window.zcdCreate=async function(){var ids=[].slice.call(document.querySelectorAll('.zcd-cb:checked')).map(function(c){return c.value});if(!ids.length){showToast('Select files','error');return}showToast('Creating zip...','info');try{var r=await fetch('/api/file/zip',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({file_ids:ids,engagement_id:'${engagementId}'})});if(r.ok){var blob=await r.blob();var a=document.createElement('a');a.href=URL.createObjectURL(blob);a.download='files.zip';a.click();showToast('Zip downloaded','success')}else showToast('Failed','error')}catch(e){showToast('Error','error')}document.getElementById('zip-create-dialog').style.display='none'};
   </script>`;
 }
 export function crossEngagementFilePicker(currentEngId) {
-  return `<div id="cross-file-picker" class="dialog-overlay" style="display:none" data-dialog-close="cross-file-picker" role="dialog" aria-modal="true" aria-labelledby="cross-file-picker-title" aria-hidden="true">
+  return `<div id="cross-file-picker" class="dialog-overlay" style="display:none" data-dialog-close="cross-file-picker" role="dialog" aria-modal="true" aria-labelledby="cross-file-picker-title">
     <div class="dialog-panel" style="max-width:640px"><div class="dialog-header"><span class="dialog-title" id="cross-file-picker-title">Pick File from Another Engagement</span><button class="dialog-close" data-dialog-close="cross-file-picker" aria-label="Close dialog">&times;</button></div>
       <div class="dialog-body"><div class="modal-form-group"><label for="cfp-eng">Engagement</label><select id="cfp-eng" class="select select-bordered w-full" onchange="cfpLoadFiles()"></select></div><div id="cfp-files" class="flex flex-col gap-2 mt-3" style="max-height:300px;overflow:auto"></div></div>
       <div class="dialog-footer"><button class="btn btn-ghost btn-sm" data-dialog-close="cross-file-picker">Close</button></div>
     </div></div>
   <script>
-  window.openCrossFilePicker=function(){document.getElementById('cross-file-picker').style.display='flex';fetch('/api/engagement').then(function(r){return r.json()}).then(function(d){var engs=d.data||d||[];var sel=document.getElementById('cfp-eng');while(sel.options.length>0)sel.remove(0);engs.filter(function(e){return e.id!=='${currentEngId}'}).forEach(function(e){var o=document.createElement('option');o.value=e.id;o.textContent=e.name||e.id;sel.appendChild(o)});if(sel.options.length)cfpLoadFiles()}).catch(function(){})};
-  window.cfpLoadFiles=function(){var eid=document.getElementById('cfp-eng').value;if(!eid)return;fetch('/api/file?engagement_id='+eid).then(function(r){return r.json()}).then(function(d){var files=d.data||d||[];document.getElementById('cfp-files').innerHTML=files.map(function(f){return'<div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded"><span class="text-sm">'+(f.name||f.id)+'</span><button class="btn btn-xs btn-primary" data-action="cfpLink" data-args='["'+f.id+'"]'>Link</button></div>'}).join('')||'<div class="text-gray-500 text-sm">No files</div>'}).catch(function(){})};
+  ${FD_ESC}
+  window.openCrossFilePicker=function(){document.getElementById('cross-file-picker').style.display='flex';fetch('/api/engagement').then(function(r){return r.json()}).then(function(d){var engs=d.data||d||[];var sel=document.getElementById('cfp-eng');while(sel.options.length>0)sel.remove(0);engs.filter(function(e){return e.id!=='${currentEngId}'}).forEach(function(e){var o=document.createElement('option');o.value=e.id;o.textContent=e.name||e.id;sel.appendChild(o)});if(sel.options.length)cfpLoadFiles()}).catch(function(err){if(window.showToast)showToast(err.message||'Request failed','error');console.error(err)})};
+  window.cfpLoadFiles=function(){var eid=document.getElementById('cfp-eng').value;if(!eid)return;fetch('/api/file?engagement_id='+eid).then(function(r){return r.json()}).then(function(d){var files=d.data||d||[];document.getElementById('cfp-files').innerHTML=files.map(function(f){return'<div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded"><span class="text-sm">'+fdEsc(f.name||f.id)+'</span><button class="btn btn-xs btn-primary" data-action="cfpLink" data-args='["'+fdEsc(f.id)+'"]'>Link</button></div>'}).join('')||'<div class="text-gray-500 text-sm">No files</div>'}).catch(function(err){if(window.showToast)showToast(err.message||'Request failed','error');console.error(err)})};
   window.cfpLink=async function(fid){try{var r=await fetch('/api/file/link',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({file_id:fid,engagement_id:'${currentEngId}'})});if(r.ok){showToast('File linked','success');document.getElementById('cross-file-picker').style.display='none'}else showToast('Failed','error')}catch(e){showToast('Error','error')}};
   </script>`;
 }
@@ -37,7 +42,7 @@ export function userCvUpload(userId) {
   </script>`;
 }
 export function quickViewAttachment() {
-  return `<div id="quick-view" class="dialog-overlay" style="display:none" data-dialog-close="quick-view" role="dialog" aria-modal="true" aria-labelledby="quick-view-title" aria-hidden="true">
+  return `<div id="quick-view" class="dialog-overlay" style="display:none" data-dialog-close="quick-view" role="dialog" aria-modal="true" aria-labelledby="quick-view-title">
     <div class="dialog-panel" style="max-width:900px;max-height:90vh"><div class="dialog-header"><span class="dialog-title" id="quick-view-title">Preview</span><button class="dialog-close" data-dialog-close="quick-view" aria-label="Close dialog">&times;</button></div>
       <div class="dialog-body" style="overflow:auto;max-height:75vh"><div id="qv-content" class="text-center"><div class="text-gray-500">Loading...</div></div></div>
       <div class="dialog-footer"><a id="qv-download" href="#" download class="btn btn-primary btn-sm">Download</a><button class="btn btn-ghost btn-sm" data-dialog-close="quick-view">Close</button></div>
@@ -48,7 +53,18 @@ export function quickViewAttachment() {
 }
 export function fetchCachedPdf(fileId) {
   return `<script>
-  window.fetchCachedPdf=function(id){var cacheKey='pdf_cache_'+id;var cached=sessionStorage.getItem(cacheKey);if(cached){return Promise.resolve(cached)}return fetch('/api/file/'+(id||'${fileId}')+'/download').then(function(r){return r.blob()}).then(function(b){var url=URL.createObjectURL(b);sessionStorage.setItem(cacheKey,url);return url})};
+  window.fetchCachedPdf = function(id) {
+    var cacheKey = 'pdf_cache_' + id;
+    var cached = sessionStorage.getItem(cacheKey);
+    if (cached) { return Promise.resolve(cached); }
+    return fetch('/api/file/' + (id || '${fileId}') + '/download')
+      .then(function(r) { return r.blob(); })
+      .then(function(b) {
+        var url = URL.createObjectURL(b);
+        sessionStorage.setItem(cacheKey, url);
+        return url;
+      });
+  };
   </script>`;
 }
 export function fileAttachmentBar(files = []) {
@@ -62,14 +78,14 @@ export function fileLinksBar(links = []) {
   return `<div class="flex flex-wrap gap-1 mt-2">${items}</div>`;
 }
 export function reviewAttachmentChoiceDialog(reviewId) {
-  return `<div id="rev-attach-choice" class="dialog-overlay" style="display:none" data-dialog-close="rev-attach-choice" role="dialog" aria-modal="true" aria-labelledby="rev-attach-choice-title" aria-hidden="true">
+  return `<div id="rev-attach-choice" class="dialog-overlay" style="display:none" data-dialog-close="rev-attach-choice" role="dialog" aria-modal="true" aria-labelledby="rev-attach-choice-title">
     <div class="dialog-panel"><div class="dialog-header"><span class="dialog-title" id="rev-attach-choice-title">Add Attachment</span><button class="dialog-close" data-dialog-close="rev-attach-choice" aria-label="Close dialog">&times;</button></div>
       <div class="dialog-body"><div class="flex flex-col gap-3"><button class="btn btn-outline w-full text-left" data-dialog-close="rev-attach-choice" data-action="triggerUpload"><span style="display:inline-flex;vertical-align:middle;margin-right:6px"><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"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg></span>Upload New File</button><button class="btn btn-outline w-full text-left" data-dialog-close="rev-attach-choice" data-action="openCrossFilePicker"><span style="display:inline-flex;vertical-align:middle;margin-right:6px"><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"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></span>Link Existing File</button><button class="btn btn-outline w-full text-left" data-dialog-close="rev-attach-choice" data-action="racUrl"><span style="display:inline-flex;vertical-align:middle;margin-right:6px"><svg width="16" height="16" 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="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg></span>Add URL</button></div><input type="file" id="rac-upload" style="display:none" onchange="racUploadFile()"/></div>
       <div class="dialog-footer"><button class="btn btn-ghost btn-sm" data-dialog-close="rev-attach-choice">Cancel</button></div>
     </div></div>
   <script>
   window.openRevAttachChoice=function(){document.getElementById('rev-attach-choice').style.display='flex'};
-  window.racUploadFile=async function(){var file=document.getElementById('rac-upload').files[0];if(!file)return;var fd=new FormData();fd.append('file',file);fd.append('review_id','${reviewId}');try{var r=await fetch('/api/file/upload',{method:'POST',body:fd});if(r.ok)showToast('Attached','success');else showToast('Failed','error')}catch(e){showToast('Error','error')}};
+  window.racUploadFile=async function(){if(window.__racUploading)return;var inp=document.getElementById('rac-upload');var file=inp.files[0];if(!file)return;window.__racUploading=true;inp.disabled=true;showToast('Uploading...','info');var fd=new FormData();fd.append('file',file);fd.append('review_id','${reviewId}');try{var r=await fetch('/api/file/upload',{method:'POST',body:fd,credentials:'include'});if(r.ok){showToast('Attached','success');setTimeout(function(){location.reload()},500)}else showToast('Upload failed','error')}catch(e){showToast('Upload error','error')}finally{window.__racUploading=false;inp.disabled=false;inp.value=''}};
   window.racUrl=async function(){var url=await window.gmPrompt({title:'Add Link','label':'Enter URL','placeholder':'https://...','type':'url',confirmLabel:'Add Link',validate:function(v){return /^https?:\\/\\//i.test(v)?null:'Enter a valid http(s) URL.'}});if(!url)return;fetch('/api/file',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({review_id:'${reviewId}',url:url,name:url,type:'link'})}).then(function(r){if(r.ok)showToast('Link added','success');else showToast('Failed','error')}).catch(function(){showToast('Error','error')})};
   </script>`;
 }

package/src/ui/flexup-report-renderer.js

@@ -31,7 +31,7 @@ function progressRing(value, label, color) {
                 stroke-dasharray="${circ}" stroke-dashoffset="${offset}" stroke-linecap="round"/>
         </svg>
         <div style="font-size:20px;font-weight:700;color:#111;margin-top:-54px;position:relative;height:24px">${value}%</div>
-        <div style="font-size:12px;font-weight:500;color:#64748b;margin-top:4px">${esc(label)}</div>
+        <div style="font-size:12px;font-weight:500;color:#475569;margin-top:4px">${esc(label)}</div>
     </div>`;
 }
 
@@ -63,27 +63,27 @@ export function renderFlexupReport(user, engagement, client, rfis, reviews, high
         const overdue = r.due_date && Number(r.due_date) < Math.floor(Date.now() / 1000) && (r.status || 'open') !== 'closed';
         return `<tr>
             <td style="padding:6px 10px;border-bottom:1px solid #e5e7eb;font-size:13px">${esc(r.title || r.name || '-')}</td>
-            <td style="padding:6px 10px;border-bottom:1px solid #e5e7eb;font-size:13px;color:#64748b">${esc(r.status || 'open')}</td>
-            <td style="padding:6px 10px;border-bottom:1px solid #e5e7eb;font-size:13px;color:${overdue ? '#dc2626' : '#64748b'}">${r.due_date ? fmtDate(r.due_date) : '-'}</td>
+            <td style="padding:6px 10px;border-bottom:1px solid #e5e7eb;font-size:13px;color:#475569">${esc(r.status || 'open')}</td>
+            <td style="padding:6px 10px;border-bottom:1px solid #e5e7eb;font-size:13px;color:${overdue ? '#dc2626' : '#475569'}">${r.due_date ? fmtDate(r.due_date) : '-'}</td>
         </tr>`;
-    }).join('') : `<tr><td colspan="3" style="padding:20px;text-align:center;color:#9ca3af;font-size:13px">No RFIs</td></tr>`;
+    }).join('') : `<tr><td colspan="3" style="padding:20px;text-align:center;color:#6b7280;font-size:13px">No RFIs</td></tr>`;
 
     const reviewRows = reviews.length ? reviews.map((r) => `<tr>
         <td style="padding:6px 10px;border-bottom:1px solid #e5e7eb;font-size:13px">${esc(r.name || '-')}</td>
-        <td style="padding:6px 10px;border-bottom:1px solid #e5e7eb;font-size:13px;color:#64748b">${esc(r.status || '-')}</td>
-        <td style="padding:6px 10px;border-bottom:1px solid #e5e7eb;font-size:13px;color:#64748b">${r.total_highlights || 0}</td>
-        <td style="padding:6px 10px;border-bottom:1px solid #e5e7eb;font-size:13px;color:#64748b">${r.resolved_highlights || 0}</td>
-    </tr>`).join('') : `<tr><td colspan="4" style="padding:20px;text-align:center;color:#9ca3af;font-size:13px">No reviews linked</td></tr>`;
+        <td style="padding:6px 10px;border-bottom:1px solid #e5e7eb;font-size:13px;color:#475569">${esc(r.status || '-')}</td>
+        <td style="padding:6px 10px;border-bottom:1px solid #e5e7eb;font-size:13px;color:#475569">${r.total_highlights || 0}</td>
+        <td style="padding:6px 10px;border-bottom:1px solid #e5e7eb;font-size:13px;color:#475569">${r.resolved_highlights || 0}</td>
+    </tr>`).join('') : `<tr><td colspan="4" style="padding:20px;text-align:center;color:#6b7280;font-size:13px">No reviews linked</td></tr>`;
 
     const activityRows = activity.slice(0, 10).map((a) => {
         const ts = a.timestamp || a.created_at;
         const when = ts ? (typeof ts === 'number' && ts > 1e9 ? new Date(ts * 1000).toLocaleString() : new Date(ts).toLocaleString()) : '-';
         return `<tr>
-            <td style="padding:4px 10px;border-bottom:1px solid #f3f4f6;font-size:12px;color:#64748b">${when}</td>
+            <td style="padding:4px 10px;border-bottom:1px solid #f3f4f6;font-size:12px;color:#475569">${when}</td>
             <td style="padding:4px 10px;border-bottom:1px solid #f3f4f6;font-size:13px">${esc(a.action || a.operation || a.type || '-')}</td>
-            <td style="padding:4px 10px;border-bottom:1px solid #f3f4f6;font-size:12px;color:#64748b">${esc(a.user_id || 'System')}</td>
+            <td style="padding:4px 10px;border-bottom:1px solid #f3f4f6;font-size:12px;color:#475569">${esc(a.user_id || 'System')}</td>
         </tr>`;
-    }).join('') || `<tr><td colspan="3" style="padding:12px;text-align:center;color:#9ca3af;font-size:12px">No recent activity</td></tr>`;
+    }).join('') || `<tr><td colspan="3" style="padding:12px;text-align:center;color:#6b7280;font-size:12px">No recent activity</td></tr>`;
 
     const html = `<!DOCTYPE html>
 <html lang="en"><head>
@@ -94,20 +94,23 @@ export function renderFlexupReport(user, engagement, client, rfis, reviews, high
   .wrap { max-width: 960px; margin: 0 auto; padding: 32px 24px; }
   .accent { height: 6px; background: ${esc(themeColor)}; border-radius: 3px; margin-bottom: 24px; }
   .h1 { font-size: 24px; font-weight: 700; margin: 0 0 4px 0; }
-  .muted { color: #64748b; font-size: 13px; }
+  .muted { color: #475569; font-size: 13px; }
   .card { background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
   .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; font-size: 14px; }
-  .grid .k { color: #64748b; }
+  .grid .k { color: #475569; }
   .rings { display: flex; gap: 24px; justify-content: center; padding: 12px 0; }
   .kstat { display: flex; flex-direction: column; align-items: center; }
   .kstat .val { font-size: 28px; font-weight: 700; color: #111; }
-  .kstat .lbl { font-size: 12px; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; }
+  .kstat .lbl { font-size: 12px; color: #475569; text-transform: uppercase; letter-spacing: 0.5px; }
   .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; text-align: center; }
   table { width: 100%; border-collapse: collapse; }
   th { background: #f3f4f6; color: #374151; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 10px; text-align: left; }
   .no-print { display: block; }
-  .foot { text-align: center; font-size: 11px; color: #9ca3af; margin-top: 32px; padding-top: 16px; border-top: 1px solid #e5e7eb; }
+  .foot { text-align: center; font-size: 11px; color: #6b7280; margin-top: 32px; padding-top: 16px; border-top: 1px solid #e5e7eb; }
   .pbtn { background: ${esc(themeColor)}; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; }
+  @media (max-width: 640px) {
+    .grid { grid-template-columns: 1fr; }
+  }
   @media print {
     body { background: white; }
     .no-print { display: none !important; }
@@ -118,13 +121,13 @@ export function renderFlexupReport(user, engagement, client, rfis, reviews, high
 </head><body>
 <div class="wrap">
   <div class="no-print" style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px">
-    <a href="/engagement/${esc(e.id)}" style="color:#64748b;text-decoration:none;font-size:13px">← Back</a>
+    <a href="/engagement/${esc(e.id)}" style="color:#475569;text-decoration:none;font-size:13px">&lt;- Back</a>
     <button class="pbtn" onclick="window.print()">Print / Save as PDF</button>
   </div>
   <div class="accent"></div>
   <div class="card">
     <h1 class="h1">${esc(e.name || e.title || 'Engagement')}</h1>
-    <div class="muted">${esc(client?.name || e.client_name || '-')} &middot; ${esc(cfg?.label || e.stage || '-')} &middot; FY ${esc(e.year || '-')}</div>
+    <div class="muted">${esc(client?.name || e.client_name || '-')} - ${esc(cfg?.label || e.stage || '-')} - FY ${esc(e.year || '-')}</div>
   </div>
   <div class="card">
     <h2 style="font-size:14px;margin:0 0 16px 0;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:#374151">Progress</h2>
@@ -165,7 +168,7 @@ export function renderFlexupReport(user, engagement, client, rfis, reviews, high
     <table><thead><tr><th>When</th><th>Action</th><th>By</th></tr></thead><tbody>${activityRows}</tbody></table>
   </div>
   <div class="foot">
-    Generated ${new Date().toLocaleString('en-ZA')} by ${esc(user?.email || user?.name || 'system')} &middot; Moonlanding
+    Generated ${new Date().toLocaleString('en-ZA')} by ${esc(user?.email || user?.name || 'system')} - Thatcher
   </div>
 </div>
 </body></html>`;