thatcher 1.0.7 → 1.0.34

package/src/ui/review-comparison-renderer.js

@@ -1,18 +1,19 @@
 import { statusLabel } from '@/ui/renderer.js';
 import { page } from '@/ui/layout.js';
+import { emptyRow, esc } from './render-helpers.js';
 
 function reviewSummaryPanel(review, highlights, side) {
   const total = highlights.length;
   const resolved = highlights.filter(h => h.status === 'resolved').length;
   const sts = review.status ? statusLabel(review.status) : '';
-  return `<div class="p-4 bg-gray-50 border-b border-gray-200"><div class="flex items-center justify-between mb-2"><span class="font-medium text-sm">${review.name || 'Untitled'}</span>${sts}</div><div class="grid grid-cols-3 gap-2 text-xs"><div class="text-center"><div class="font-bold text-lg">${total}</div><div class="text-gray-500">Highlights</div></div><div class="text-center"><div class="font-bold text-lg text-green-600">${resolved}</div><div class="text-gray-500">Resolved</div></div><div class="text-center"><div class="font-bold text-lg text-red-600">${total - resolved}</div><div class="text-gray-500">Open</div></div></div></div>`;
+  return `<div class="p-4 bg-gray-50 border-b border-gray-200"><div class="flex items-center justify-between mb-2"><span class="font-medium text-sm">${esc(review.name || 'Untitled')}</span>${sts}</div><div class="grid grid-cols-3 gap-2 text-xs"><div class="text-center"><div class="font-bold text-lg">${total}</div><div class="text-gray-500">Highlights</div></div><div class="text-center"><div class="font-bold text-lg text-green-600">${resolved}</div><div class="text-gray-500">Resolved</div></div><div class="text-center"><div class="font-bold text-lg text-red-600">${total - resolved}</div><div class="text-gray-500">Open</div></div></div></div>`;
 }
 
 function highlightDiffRow(leftH, rightH, idx) {
   const renderSide = (h) => {
     if (!h) return '<td class="p-2 bg-gray-50 text-center text-xs text-gray-400">-</td>';
-    const colors = { resolved: '#22c55e', partial_resolved: '#f59e0b' };
-    const color = colors[h.status] || '#ef4444';
+    const colors = { resolved: 'var(--color-success)', partial_resolved: 'var(--color-warning)' };
+    const color = colors[h.status] || 'var(--color-danger)';
     return `<td class="p-2 border-b border-gray-50"><div class="flex items-center gap-1"><span style="width:6px;height:6px;border-radius:50%;background:${color};display:inline-block"></span><span class="text-xs">${h.text || h.content || 'Area'}</span></div><div class="text-xs text-gray-400">p.${h.page_number || '?'}</div></td>`;
   };
   const match = leftH && rightH && leftH.text === rightH?.text ? 'bg-green-50' : leftH && rightH ? 'bg-yellow-50' : 'bg-red-50';
@@ -37,11 +38,11 @@ export function renderReviewComparison(user, leftReview, rightReview, leftHighli
 
   const diffSummary = `<div class="grid grid-cols-3 gap-4 mb-6"><div class="card-clean"><div class="card-clean-body" style=""><div class="text-lg font-bold text-green-600">${stats.common}</div><div class="text-xs text-gray-500">Matching</div></div></div><div class="card-clean"><div class="card-clean-body" style=""><div class="text-lg font-bold text-blue-600">${stats.onlyLeft}</div><div class="text-xs text-gray-500">Only in Left</div></div></div><div class="card-clean"><div class="card-clean-body" style=""><div class="text-lg font-bold text-purple-600">${stats.onlyRight}</div><div class="text-xs text-gray-500">Only in Right</div></div></div></div>`;
 
-  const comparisonTable = `<div class="card-clean" style="overflow-x:auto"><div class="card-clean-body" style="padding:0rem"><div class="grid grid-cols-2 gap-0"><div class="border-r border-gray-200">${reviewSummaryPanel(leftReview, leftHighlights, 'left')}</div><div>${reviewSummaryPanel(rightReview, rightHighlights, 'right')}</div></div><table class="data-table"><thead class="bg-gray-50"><tr><th class="text-center w-12">#</th><th>${leftReview.name || 'Left Review'}</th><th>${rightReview.name || 'Right Review'}</th><th class="text-center w-20">Status</th></tr></thead><tbody>${rows || '<tr><td colspan="4" class="text-center py-8 text-gray-400">No highlights to compare</td></tr>'}</tbody></table></div></div>`;
+  const comparisonTable = `<div class="card-clean" style="overflow-x:auto"><div class="card-clean-body" style="padding:0rem"><div class="grid grid-cols-2 gap-0"><div class="border-r border-gray-200">${reviewSummaryPanel(leftReview, leftHighlights, 'left')}</div><div>${reviewSummaryPanel(rightReview, rightHighlights, 'right')}</div></div><table class="data-table"><thead class="bg-gray-50"><tr><th class="text-center w-12">#</th><th>${esc(leftReview.name || 'Left Review')}</th><th>${esc(rightReview.name || 'Right Review')}</th><th class="text-center w-20">Status</th></tr></thead><tbody>${rows || emptyRow(4, 'No highlights to compare')}</tbody></table></div></div>`;
 
   const content = `<div class="flex justify-between items-center mb-6"><h1 class="text-2xl font-bold">Review Comparison</h1><a href="/reviews" class="btn btn-ghost btn-sm">Back to Reviews</a></div>${diffSummary}${comparisonTable}`;
 
-  return page(user, 'Review Comparison | Moonlanding', [
+  return page(user, 'Review Comparison | Thatcher', [
     { href: '/', label: 'Dashboard' },
     { href: '/reviews', label: 'Reviews' },
     { label: 'Comparison' }
@@ -49,10 +50,10 @@ export function renderReviewComparison(user, leftReview, rightReview, leftHighli
 }
 
 export function renderComparisonPicker(user, reviews) {
-  const reviewOptions = reviews.map(r => `<option value="${r.id}">${r.name || r.title || 'Untitled'} ${r.status ? '(' + r.status + ')' : ''}</option>`).join('');
+  const reviewOptions = reviews.map(r => `<option value="${esc(String(r.id))}">${esc(r.name || r.title || 'Untitled')} ${r.status ? '(' + esc(r.status) + ')' : ''}</option>`).join('');
   const content = `<div class="flex justify-between items-center mb-6"><h1 class="text-2xl font-bold">Compare Reviews</h1><a href="/reviews" class="btn btn-ghost btn-sm">Back to Reviews</a></div><div class="card-clean" style="margin:autorem"><div class="card-clean-body"><p class="text-sm text-gray-500 mb-4">Select two reviews to compare their highlights side by side.</p><div class="form-group mb-4"><label class="text-sm font-medium block mb-1" for="left-review">Left Review</label><select id="left-review" class="select select-bordered w-full">${reviewOptions}</select></div><div class="form-group mb-4"><label class="text-sm font-medium block mb-1" for="right-review">Right Review</label><select id="right-review" class="select select-bordered w-full">${reviewOptions}</select></div><button class="btn btn-primary w-full" data-action="startComparison">Compare</button></div></div>`;
 
   const script = `window.startComparison=function(){const l=document.getElementById('left-review')?.value;const r=document.getElementById('right-review')?.value;if(!l||!r)return showToast('Select both reviews','error');if(l===r)return showToast('Select different reviews','error');window.location='/reviews/compare?left='+l+'&right='+r}`;
 
-  return page(user, 'Compare Reviews | Moonlanding', [{ href: '/', label: 'Dashboard' }, { href: '/reviews', label: 'Reviews' }, { label: 'Compare' }], content, [script]);
+  return page(user, 'Compare Reviews | Thatcher', [{ href: '/', label: 'Dashboard' }, { href: '/reviews', label: 'Reviews' }, { label: 'Compare' }], content, [script]);
 }

package/src/ui/review-detail-panels.js

@@ -1,4 +1,4 @@
-import { esc } from '@/ui/render-helpers.js';
+import { esc, AVATAR_COLORS } from '@/ui/render-helpers.js';
 
 export function highlightRow(h) {
   const resolved = h.resolved || h.status === 'resolved';
@@ -14,13 +14,13 @@ export function highlightRow(h) {
   try { tags = JSON.parse(h.tags || '[]') || []; } catch {}
   const isFlagged = flags.includes('flagged');
 
-  const flagBtn = `<button data-action="toggleFlag" data-args='["${esc(h.id)}","${isFlagged}"]' title="${isFlagged ? 'Unflag' : 'Flag'}" style="background:none;border:none;cursor:pointer;padding:2px 4px;font-size:15px;line-height:1;color:${isFlagged ? '#f59e0b' : 'var(--color-text-muted)'}">${isFlagged ? '⚑' : '⚐'}</button>`;
-  const tagPills = tags.map(t => `<span style="display:inline-flex;align-items:center;gap:3px;background:#eff6ff;color:#1d4ed8;font-size:11px;padding:1px 6px;border-radius:9999px;font-weight:500">${esc(t)}<button data-action="removeTag" data-args='["${esc(h.id)}","${esc(t)}"]' style="background:none;border:none;cursor:pointer;padding:0;margin-left:2px;font-size:11px;color:#6b7280;line-height:1">&times;</button></span>`).join(' ');
+  const flagBtn = `<button data-action="toggleFlag" data-args='["${esc(h.id)}","${isFlagged}"]' title="${isFlagged ? 'Unflag' : 'Flag'}" style="background:none;border:none;cursor:pointer;padding:2px 4px;font-size:15px;line-height:1;color:${isFlagged ? 'var(--color-warning)' : 'var(--color-text-muted)'}">${isFlagged ? '⚑' : '⚐'}</button>`;
+  const tagPills = tags.map(t => `<span style="display:inline-flex;align-items:center;gap:3px;background:var(--color-info-bg,#eff6ff);color:var(--color-info,#1e40af);font-size:11px;padding:2px 8px;border-radius:9999px;font-weight:500">${esc(t)}<button data-action="removeTag" data-args='["${esc(h.id)}","${esc(t)}"]' style="background:none;border:none;cursor:pointer;padding:0;margin-left:2px;font-size:11px;color:var(--color-text-muted);line-height:1">&times;</button></span>`).join(' ');
   const addTagBtn = `<button data-action="openAddTag" data-args='["${esc(h.id)}"]' style="background:none;border:none;cursor:pointer;font-size:11px;color:var(--color-text-muted);padding:1px 5px;border:1px dashed var(--color-border,#e5e7eb);border-radius:9999px">+tag</button>`;
   const tagsCell = `<div style="display:flex;flex-wrap:wrap;gap:3px;align-items:center;min-width:80px">${tagPills}${addTagBtn}</div>`;
 
   return `<tr style="${rowStyle}" data-highlight-id="${esc(h.id)}" data-flagged="${isFlagged}" data-section-id="${esc(h.section_id||'')}">
-    <td style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;${textStyle}">${flagBtn}${esc(h.text||h.content||h.comment||'Highlight')}</td>
+    <td title="${esc(h.text||h.content||h.comment||'Highlight')}" style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;${textStyle}">${flagBtn}${esc(h.text||h.content||h.comment||'Highlight')}</td>
     <td style="font-size:13px;color:var(--color-text-muted);white-space:nowrap">p.${h.page||h.page_number||'-'}</td>
     <td>${badge}</td>
     <td>${tagsCell}</td>
@@ -31,8 +31,7 @@ export function highlightRow(h) {
 
 export function collaboratorRow(c) {
   const initials = (c.user_name || c.email || '?').charAt(0).toUpperCase();
-  const colors = ['#1565c0','#2e7d32','#6a1b9a','#c62828','#e65100','#00695c'];
-  const bg = colors[(c.user_name || c.email || '').charCodeAt(0) % colors.length] || colors[0];
+  const bg = AVATAR_COLORS[(c.user_name || c.email || '').charCodeAt(0) % AVATAR_COLORS.length] || AVATAR_COLORS[0];
   return `<tr>
     <td>
       <div style="display:flex;align-items:center;gap:8px">
@@ -41,15 +40,15 @@ export function collaboratorRow(c) {
       </div>
     </td>
     <td><span class="pill pill-info" style="text-transform:capitalize">${esc(c.role||'viewer')}</span></td>
-    <td style="font-size:13px;color:var(--color-text-muted)">${c.expires_at?new Date(typeof c.expires_at==='number'?c.expires_at*1000:c.expires_at).toLocaleDateString():'-'}</td>
+    <td style="font-size:13px;color:var(--color-text-muted)">${c.expires_at?new Date(typeof c.expires_at==='number'?c.expires_at*1000:c.expires_at).toLocaleDateString('en-ZA',{day:'2-digit',month:'short',year:'numeric'}):'-'}</td>
     <td style="text-align:right"><button data-action="removeCollaborator" data-args='["${esc(c.id)}"]' class="btn-danger-clean" style="font-size:12px;padding:4px 10px;min-height:28px">Remove</button></td>
   </tr>`;
 }
 
 export function addCollaboratorDialog(reviewId) {
-  return `<div id="collab-dialog" class="dialog-overlay" style="display:none" data-dialog-close-overlay="true">
+  return `<div id="collab-dialog" class="dialog-overlay" style="display:none" role="dialog" aria-modal="true" aria-labelledby="collab-dialog-title" data-dialog-close="collab-dialog">
     <div class="dialog-panel" style="max-width:400px;width:100%">
-      <h3 style="font-size:16px;font-weight:600;color:var(--color-text);margin:0 0 16px">Add Collaborator</h3>
+      <h3 id="collab-dialog-title" style="font-size:16px;font-weight:600;color:var(--color-text);margin:0 0 16px">Add Collaborator</h3>
       <div class="form-field" style="margin-bottom:12px">
         <label class="form-label">Email</label>
         <input type="email" id="collab-email" class="form-input" placeholder="collaborator@example.com"/>

package/src/ui/review-detail-renderer.js

@@ -13,8 +13,8 @@ import { SPACING, renderCard, renderTable, renderButton, renderInfoGrid } from '
 function fmtDate(ts) {
   if (!ts) return '-';
   const n = Number(ts);
-  if (!isNaN(n) && n > 1e9 && n < 3e9) return new Date(n * 1000).toLocaleDateString();
-  try { return new Date(ts).toLocaleDateString(); } catch { return String(ts); }
+  if (!isNaN(n) && n > 1e9 && n < 3e9) return new Date(n * 1000).toLocaleDateString('en-ZA',{day:'2-digit',month:'short',year:'numeric'});
+  try { return new Date(ts).toLocaleDateString('en-ZA',{day:'2-digit',month:'short',year:'numeric'}); } catch { return String(ts); }
 }
 
 export function renderReviewDetail(user, review, highlights = [], collaborators = [], checklists = [], sections = [], tenders = []) {
@@ -166,5 +166,5 @@ window.sendCollabNotify=async function(reviewId){var msg=document.getElementById
   const content = `${pageHeader}${reviewZoneNav(r.id, 'overview')}${tabBar}
     <div>${overviewPanel}${highlightsPanel}${collabPanel}${checklistPanel}${sectionsPanel}${tenderPanelHtml(r.id, tenders, canEditReview, tablePanel)}${linksPanelHtml(r.id, parsedLinks, canEditReview, tablePanel)}${historyPanel}${addCollaboratorDialog(r.id)}${checklistPickerDialog}${tenderDialog(r.id)}${linkDialog(r.id)}${compareDialogHtml(r.id)}${notifyDialog}${notifyScript}${retryHighlightDialog(esc(r.id))}${reviewTemplateChoiceDialog()}</div>`;
 
-  return page(user, `${esc(r.name || 'Review')} | Moonlanding`, bc, content, [reviewDetailScript(r.id)]);
+  return page(user, `${esc(r.name || 'Review')} | Thatcher`, bc, content, [reviewDetailScript(r.id)]);
 }

package/src/ui/review-detail-script.js

@@ -5,6 +5,7 @@ import { reviewHighlightActionsScript } from '@/ui/review-highlight-actions-scri
 export function reviewDetailScript(reviewId) {
   const id = esc(reviewId || '');
   return `${TOAST_SCRIPT}
+function __esc(s){return String(s==null?'':s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;');}
 function switchTab(tab){
   document.querySelectorAll('.rv-panel').forEach(function(p){p.style.display='none'});
   var panel=document.getElementById('rvpanel-'+tab);if(panel)panel.style.display='';
@@ -12,20 +13,20 @@ function switchTab(tab){
   var btn=document.getElementById('rvtab-'+tab);if(btn)btn.classList.add('active');
   if(tab==='history')loadHistory('${id}');
 }
-async function resolveHighlight(id){if(!confirm('Mark this highlight as resolved?'))return;try{var r=await fetch('/api/mwr/review/${id}/highlights/'+id,{method:'PATCH',headers:{'Content-Type':'application/json'},body:JSON.stringify({resolved:true,status:'resolved'})});if(r.ok){showToast('Resolved','success');setTimeout(function(){location.reload()},500)}else showToast('Failed','error')}catch(e){showToast('Error','error')}}
-async function bulkResolve(reviewId){if(!confirm('Resolve all highlights?'))return;try{var r=await fetch('/api/mwr/review/'+reviewId+'/highlights/bulk-resolve',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({resolve_all:true})});if(r.ok){showToast('All resolved','success');setTimeout(function(){location.reload()},500)}else showToast('Failed','error')}catch(e){showToast('Error','error')}}
+async function resolveHighlight(id){if(!(await window.gmConfirm({title:'Resolve Highlight',message:'Mark this highlight as resolved?',confirmLabel:'Resolve',danger:true})))return;try{var r=await fetch('/api/mwr/review/${id}/highlights/'+id,{method:'PATCH',headers:{'Content-Type':'application/json'},body:JSON.stringify({resolved:true,status:'resolved'})});if(r.ok){showToast('Resolved','success');setTimeout(function(){location.reload()},500)}else showToast('Failed','error')}catch(e){showToast('Error','error')}}
+async function bulkResolve(reviewId){if(!(await window.gmConfirm({title:'Resolve All',message:'Resolve all highlights? This marks every highlight in this review as resolved.',confirmLabel:'Resolve all',danger:true})))return;try{var r=await fetch('/api/mwr/review/'+reviewId+'/highlights/bulk-resolve',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({resolve_all:true})});if(r.ok){showToast('All resolved','success');setTimeout(function(){location.reload()},500)}else showToast('Failed','error')}catch(e){showToast('Error','error')}}
 async function exportPdf(reviewId){showToast('Generating PDF...','info');try{var r=await fetch('/api/mwr/review/'+reviewId+'/export-pdf',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({})});if(r.ok){var b=await r.blob();var a=document.createElement('a');a.href=URL.createObjectURL(b);a.download='review-'+reviewId+'.pdf';a.click();showToast('PDF downloaded','success')}else showToast('Export failed','error')}catch(e){showToast('Error','error')}}
 async function addCollaborator(reviewId){var email=document.getElementById('collab-email').value.trim();var role=document.getElementById('collab-role').value;if(!email){showToast('Email required','error');return}try{var r=await fetch('/api/mwr/review/'+reviewId+'/collaborators',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({email:email,role:role})});if(r.ok){showToast('Collaborator added','success');document.getElementById('collab-dialog').style.display='none';setTimeout(function(){location.reload()},500)}else showToast('Failed','error')}catch(e){showToast('Error','error')}}
-async function removeCollaborator(collabId){if(!confirm('Remove this collaborator?'))return;try{var r=await fetch('/api/mwr/review/${id}/collaborators/'+collabId,{method:'DELETE'});if(r.ok){showToast('Removed','success');setTimeout(function(){location.reload()},500)}else showToast('Failed','error')}catch(e){showToast('Error','error')}}
+async function removeCollaborator(collabId){if(!(await window.gmConfirm({title:'Remove Collaborator',message:'Remove this collaborator? They will lose access to this review.',confirmLabel:'Remove',danger:true})))return;try{var r=await fetch('/api/mwr/review/${id}/collaborators/'+collabId,{method:'DELETE'});if(r.ok){showToast('Removed','success');setTimeout(function(){location.reload()},500)}else showToast('Failed','error')}catch(e){showToast('Error','error')}}
 async function openChecklistPicker(reviewId){
   var dlg=document.getElementById('checklist-picker-dialog');if(!dlg)return;
   dlg.style.display='flex';
-  var sel=document.getElementById('checklist-picker-template');sel.innerHTML='<option>Loading...</option>';
+  var sel=document.getElementById('checklist-picker-template');sel.setAttribute('aria-busy','true');sel.innerHTML='<option>Loading...</option>';
   try{
     var r=await fetch('/api/mwr/checklist-template',{credentials:'include'});var data=await r.json();
-    if(!data.success||!data.templates||!data.templates.length){sel.innerHTML='<option value="">No templates available</option>';return}
-    sel.innerHTML=data.templates.map(function(t){return '<option value="'+t.id+'">'+t.name.replace(/</g,'&lt;')+' ('+t.item_count+' items)</option>'}).join('');
-  }catch(e){sel.innerHTML='<option value="">Failed to load templates</option>'}
+    if(!data.success||!data.templates||!data.templates.length){sel.removeAttribute('aria-busy');sel.innerHTML='<option value="">No templates available</option>';return}
+    sel.removeAttribute('aria-busy');sel.innerHTML=data.templates.map(function(t){return '<option value="'+__esc(t.id)+'">'+__esc(t.name)+' ('+__esc(t.item_count)+' items)</option>'}).join('');
+  }catch(e){sel.removeAttribute('aria-busy');sel.innerHTML='<option value="">Failed to load templates</option>'}
 }
 async function saveChecklistFromTemplate(reviewId){
   var sel=document.getElementById('checklist-picker-template');var nameInput=document.getElementById('checklist-picker-name');
@@ -75,21 +76,21 @@ async function saveTender(reviewId){
   }catch(e){showToast('Network error','error')}
   finally{if(btn)btn.disabled=false}
 }
-async function deleteTender(tenderId){if(!confirm('Delete this tender?'))return;try{var r=await fetch('/api/mwr/review/${id}/tender/'+tenderId,{method:'DELETE',credentials:'include'});var data=await r.json();if(r.ok&&data.success){showToast('Tender deleted','success');setTimeout(function(){location.reload()},500)}else showToast('Failed: '+(data.error||'unknown'),'error');}catch(e){showToast('Error','error')}}
+async function deleteTender(tenderId){if(!(await window.gmConfirm({title:'Delete Tender',message:'Delete this tender? This cannot be undone.',confirmLabel:'Delete',danger:true})))return;try{var r=await fetch('/api/mwr/review/${id}/tender/'+tenderId,{method:'DELETE',credentials:'include'});var data=await r.json();if(r.ok&&data.success){showToast('Tender deleted','success');setTimeout(function(){location.reload()},500)}else showToast('Failed: '+(data.error||'unknown'),'error');}catch(e){showToast('Error','error')}}
 function openAddLink(){document.getElementById('link-dialog').style.display='flex';document.getElementById('link-label').value='';document.getElementById('link-url').value='';}
 async function saveLink(reviewId){var url=document.getElementById('link-url').value.trim();var label=document.getElementById('link-label').value.trim();if(!url){showToast('URL required','error');return}try{var r=await fetch('/api/mwr/review/'+reviewId+'/links',{method:'POST',headers:{'Content-Type':'application/json'},credentials:'include',body:JSON.stringify({url:url,label:label||url,type:'url'})});var data=await r.json();if(r.ok&&data.success){showToast('Link added','success');document.getElementById('link-dialog').style.display='none';setTimeout(function(){location.reload()},500)}else showToast('Failed: '+(data.error||'unknown'),'error');}catch(e){showToast('Network error','error')}}
-async function removeLink(reviewId,idx){if(!confirm('Remove this link?'))return;try{var r=await fetch('/api/mwr/review/'+reviewId+'/links/'+idx,{method:'DELETE',credentials:'include'});var data=await r.json();if(r.ok&&data.success){showToast('Link removed','success');setTimeout(function(){location.reload()},500)}else showToast('Failed: '+(data.error||'unknown'),'error');}catch(e){showToast('Error','error')}}
+async function removeLink(reviewId,idx){if(!(await window.gmConfirm({title:'Remove Link',message:'Remove this link?',confirmLabel:'Remove',danger:true})))return;try{var r=await fetch('/api/mwr/review/'+reviewId+'/links/'+idx,{method:'DELETE',credentials:'include'});var data=await r.json();if(r.ok&&data.success){showToast('Link removed','success');setTimeout(function(){location.reload()},500)}else showToast('Failed: '+(data.error||'unknown'),'error');}catch(e){showToast('Error','error')}}
 async function loadHistory(reviewId){
   var list=document.getElementById('history-list');
   if(!list)return;
-  list.innerHTML='<div style="font-size:13px;color:var(--color-text-muted);padding:24px 0;text-align:center">Loading...</div>';
+  list.innerHTML='<div aria-busy="true" style="font-size:13px;color:var(--color-text-muted);padding:24px 0;text-align:center">Loading...</div>';
   try{
     var r=await fetch('/api/audit/logs?entity_type=review&entity_id='+reviewId,{credentials:'include'});
     var data=await r.json();
     var logs=(data.logs||data.data||[]);
     if(!logs.length){list.innerHTML='<div style="font-size:13px;color:var(--color-text-muted);padding:24px 0;text-align:center">No history found</div>';return}
-    list.innerHTML=logs.map(function(log){var ts=log.timestamp?new Date(log.timestamp).toLocaleString():'-';var op=log.operation||log.action||'-';var uid=log.user_id?'User '+log.user_id:'System';var details='';if(log.details&&typeof log.details==='object'){var keys=Object.keys(log.details).slice(0,3);details=keys.map(function(k){return k+': '+String(log.details[k]).slice(0,40)}).join(', ');}return '<div style="display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--color-border,#e5e7eb)"><div style="width:8px;height:8px;border-radius:50%;background:var(--color-primary,#2563eb);margin-top:5px;flex-shrink:0"></div><div style="flex:1;min-width:0"><div style="display:flex;justify-content:space-between;gap:8px"><span style="font-size:13px;font-weight:500;color:var(--color-text)">'+op.replace(/_/g,' ')+'</span><span style="font-size:12px;color:var(--color-text-muted);white-space:nowrap">'+ts+'</span></div><div style="font-size:12px;color:var(--color-text-muted);margin-top:2px">'+uid+(details?' &mdash; '+details:'')+'</div></div></div>';}).join('');
-  }catch(e){list.innerHTML='<div style="font-size:13px;color:var(--color-danger,#dc2626);padding:24px 0;text-align:center">Failed to load history</div>'}
+    list.innerHTML=logs.map(function(log){var ts=log.timestamp?window.fmtDateTime(log.timestamp):'-';var op=log.operation||log.action||'-';var uid=log.user_id?'User '+log.user_id:'System';var details='';var detailsFull='';if(log.details&&typeof log.details==='object'){var keys=Object.keys(log.details).slice(0,3);details=keys.map(function(k){return k+': '+String(log.details[k]).slice(0,40)}).join(', ');detailsFull=keys.map(function(k){return k+': '+String(log.details[k])}).join(', ');}return '<div style="display:flex;gap:12px;align-items:flex-start;max-width:100%;padding:10px 0;border-bottom:1px solid var(--color-border,#e5e7eb)"><div style="width:8px;height:8px;border-radius:50%;background:var(--color-primary,#2563eb);margin-top:5px;flex-shrink:0"></div><div style="flex:1;min-width:0;max-width:100%;word-break:break-word"><div style="display:flex;justify-content:space-between;gap:8px"><span style="font-size:13px;font-weight:500;color:var(--color-text)">'+__esc(op.replace(/_/g,' '))+'</span><span style="font-size:12px;color:var(--color-text-muted);white-space:nowrap">'+__esc(ts)+'</span></div><div'+(detailsFull?' title="'+__esc(detailsFull)+'"':'')+' style="font-size:12px;color:var(--color-text-muted);margin-top:2px">'+__esc(uid)+(details?' - '+__esc(details):'')+'</div></div></div>';}).join('');
+  }catch(e){list.innerHTML='<div role="alert" style="font-size:13px;color:var(--color-danger,#dc2626);padding:24px 0;text-align:center">Failed to load history</div>'}
 }
 ${reviewHighlightActionsScript(reviewId)}`;
 }

package/src/ui/review-mwr-renderer.js

@@ -4,13 +4,14 @@ import { SPACING, renderCard, renderButton, renderProgress, renderEmptyState, re
 import { icon, esc } from '@/ui/format-helpers.js';
 import { TOAST_SCRIPT } from '@/ui/render-helpers.js';
 
-// Star icon with fill toggle for priority on/off state.
-const starIcon = (on) => `<svg width="16" height="16" viewBox="0 0 24 24" fill="${on ? 'currentColor' : 'none'}" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>`;
+// Star icon for priority. Filled vs outline state is conveyed by the button's
+// .is-priority class (CSS) and aria-pressed; the glyph itself is the shared icon().
+const starIcon = () => icon('star', 16);
 
 function fmtDate(ts) {
   if (!ts) return '-';
   const n = Number(ts);
-  if (!isNaN(n) && n > 1e9 && n < 3e9) return new Date(n * 1000).toLocaleDateString();
+  if (!isNaN(n) && n > 1e9 && n < 3e9) return new Date(n * 1000).toLocaleDateString('en-ZA',{day:'2-digit',month:'short',year:'numeric'});
   return String(ts);
 }
 
@@ -48,7 +49,7 @@ export function renderMwrHome(user, stats) {
     const archiveLabel = r.status === 'archived' ? 'Unarchive' : 'Archive';
     const archiveAct = r.status === 'archived' ? 'unarchive' : 'archive';
     return `<div class="list-item-row" data-review-id="${r.id}">
-      <button type="button" class="row-action row-action-star${isPri ? ' is-priority' : ''}" data-action="toggleReviewStar" data-args='["${esc(r.id)}"]' aria-label="Toggle priority" aria-pressed="${isPri}" title="Star/Priority">${starIcon(isPri)}</button>
+      <button type="button" class="row-action row-action-star${isPri ? ' is-priority' : ''}" data-action="toggleReviewStar" data-args='["${esc(r.id)}"]' aria-label="Toggle priority" aria-pressed="${isPri}" title="Star/Priority">${starIcon()}</button>
       <span class="list-item-name" data-action="openReview" data-args='["${esc(r.id)}"]' style="cursor:pointer;flex:1">${esc(r.name || 'Untitled')}</span>
       <div class="list-item-meta">${statusBadge(r.status)}<span style="font-size:12px;color:var(--color-text-light)">${fmtDate(r.updated_at || r.created_at)}</span></div>
       <button class="row-action row-action-flag" data-action="toggleReviewFlag" data-args='["${r.id}"]' aria-label="Flag" title="Flag">${icon('flag', 16)}</button>
@@ -68,7 +69,7 @@ export function renderMwrHome(user, stats) {
   const content = `${renderPageHeader('MWR Home', `Welcome back, ${user?.name || 'User'}`)}${statsHtml}${tabBar}${renderCard(panels, { padding: 0 })}`;
   const script = `${TOAST_SCRIPT}window.switchHomeTab=(key)=>{document.querySelectorAll('.tab-btn[data-tab]').forEach(t=>t.classList.toggle('active',t.dataset.tab===key));document.querySelectorAll('[id^="home-panel-"]').forEach(p=>p.style.display='none');const el=document.getElementById('home-panel-'+key);if(el)el.style.display='block'};window.openReview=(id)=>{location.href='/review/'+id};window.toggleReviewStar=async(id)=>{try{const r=await fetch('/api/mwr/review/star',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({review_id:id})});if(r.ok)location.reload();else window.showToast('Star failed','error')}catch(e){window.showToast('Star failed','error')}};window.toggleReviewFlag=async(id)=>{try{const r=await fetch('/api/mwr/review/flag',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({review_id:id})});if(r.ok)location.reload();else window.showToast('Flag failed','error')}catch(e){window.showToast('Flag failed','error')}};window.openReviewTag=async(id)=>{const t=await window.gmPrompt({title:'Tag Review',label:'Tag',placeholder:'Enter a tag',confirmLabel:'Add Tag'});if(t)fetch('/api/mwr/review/tag',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({review_id:id,tag:t})}).then(r=>{if(r.ok)window.showToast('Tagged');else window.showToast('Tag failed','error')})};window.toggleReviewArchive=async(id,act)=>{try{const r=await fetch('/api/mwr/review/archive',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({review_ids:[id],action:act})});if(r.ok)location.reload();else window.showToast('Archive failed','error')}catch(e){window.showToast('Archive failed','error')}};`;
   const bc = [{ href: '/', label: 'Dashboard' }, { label: 'MWR Home' }];
-  return page(user, 'MWR Home | Moonlanding', bc, content, [script]);
+  return page(user, 'MWR Home | Thatcher', bc, content, [script]);
 }
 
 export function renderSectionReport(user, review, sections) {

package/src/ui/review-renderer.js

@@ -1,5 +1,6 @@
 import { canCreate } from '@/ui/permissions-ui.js';
 import { page } from '@/ui/layout.js';
+import { esc } from '@/ui/render-helpers.js';
 import { reviewCreateDialog, reviewTemplateChoiceDialog, reviewContextMenu, reviewFlagsDialog, reviewTagsDialog, reviewValueDialog, reviewDeadlineDialog, reviewNotificationDialog } from '@/ui/review-dialogs.js';
 import { SPACING, renderButton, renderEmptyState, renderStatsRow, renderPageHeader } from '@/ui/spacing-system.js';
 
@@ -19,7 +20,7 @@ const TAB_DEFS = [
 function fmtDate(ts) {
   if (!ts) return '-';
   const n = Number(ts);
-  if (!isNaN(n) && n > 1e9 && n < 3e9) return new Date(n * 1000).toLocaleDateString();
+  if (!isNaN(n) && n > 1e9 && n < 3e9) return new Date(n * 1000).toLocaleDateString('en-ZA',{day:'2-digit',month:'short',year:'numeric'});
   return String(ts);
 }
 
@@ -33,13 +34,13 @@ function statusBadge(status) {
 function reviewRow(r) {
   const isPri = (r.is_priority || r.flagged || (r.flags_count > 0)) ? 1 : 0;
   return `<tr class="review-row" data-status="${r.status || ''}" data-flags="${r.flags_count || 0}" data-highlights="${r.highlights_count || 0}" data-archived="${r.archived || 0}" data-priority="${isPri}" data-stage="${r.stage || r.status || ''}" data-navigate="/review/${r.id}" oncontextmenu="showCtxMenu(event,'${r.id}')" style="cursor:pointer">
-    <td style="width:32px"><button class="review-priority-star${isPri?' is-priority':''}" data-action="togglePriority" data-args='["${r.id}"]' aria-label="Toggle priority" onclick="event.stopPropagation()">${isPri?'★':'☆'}</button></td>
+    <td style="width:32px"><button class="review-priority-star${isPri?' is-priority':''}" data-action="togglePriority" data-args='["${r.id}"]' aria-label="Toggle priority" aria-pressed="${isPri?'true':'false'}" data-stop-propagation><svg width="16" height="16" viewBox="0 0 24 24" fill="${isPri?'currentColor':'none'}" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></button></td>
     <td class="review-row-name">${r.name || r.title || 'Untitled'}</td>
-    <td style="font-size:13px;color:var(--color-text-muted)">${r.engagement_name || r.engagement_id_display || '-'}</td>
+    <td style="font-size:13px;color:var(--color-text)">${r.engagement_name || r.engagement_id_display || '-'}</td>
     <td>${statusBadge(r.status)}</td>
     <td style="text-align:center;font-size:13px">${r.highlights_count !== undefined ? r.highlights_count : '-'}</td>
     <td style="font-size:13px">${fmtDate(r.deadline)}</td>
-    <td style="font-size:13px;color:var(--color-text-light)">${fmtDate(r.created_at)}</td>
+    <td style="font-size:13px;color:var(--color-text-muted)">${fmtDate(r.created_at)}</td>
   </tr>`;
 }
 
@@ -127,7 +128,7 @@ export function renderReviewListTabbed(user, reviews) {
     });
   })()`;
 
-  return page(user, 'Reviews | Moonlanding', bc, content, [TOAST_SCRIPT, tabScript, ctxScript, searchScript, priorityScript]);
+  return page(user, 'Reviews | Thatcher', bc, content, [TOAST_SCRIPT, tabScript, ctxScript, searchScript, priorityScript]);
 }
 
 export function reviewSearchField() {
@@ -149,7 +150,7 @@ export function reviewGroupedList(reviews, groupBy) {
     `<div class="card-clean" style="margin-bottom:${SPACING.md}">
       <div class="card-clean-body" style="padding:${SPACING.md}">
         <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:${SPACING.sm};cursor:pointer" data-action="toggleReviewGroup" data-self>
-          <span style="font-weight:600;font-size:14px">${name}</span>
+          <span style="font-weight:600;font-size:14px">${esc(name)}</span>
           <span class="pill pill-neutral">${items.length}</span>
         </div>
         <div class="review-group-items">

package/src/ui/review-widgets.js

@@ -5,7 +5,7 @@ import { teamAvatarGroup } from '@/ui/widgets.js'
 export function mobileReviewCard(review) {
   const r = review || {}
   const sts = r.status ? statusLabel(r.status) : ''
-  const date = r.created_at ? `<span class="text-xs text-gray-500">${typeof r.created_at === 'number' ? new Date(r.created_at * 1000).toLocaleDateString() : r.created_at}</span>` : ''
+  const date = r.created_at ? `<span class="text-xs text-gray-500">${typeof r.created_at === 'number' ? new Date(r.created_at * 1000).toLocaleDateString('en-ZA',{day:'2-digit',month:'short',year:'numeric'}) : r.created_at}</span>` : ''
   return `<div class="mobile-card mobile-review-card card-clean">
     <div class="card-clean-body">
       <div class="flex justify-between items-center mb-2"><h3 class="font-medium text-sm">${esc(r.name || r.title || 'Untitled Review')}</h3>${sts}</div>
@@ -19,8 +19,8 @@ export function sidebarReviewDetails(review) {
   const r = review || {}
   const sts = r.status ? statusLabel(r.status) : ''
   const meta = [
-    r.created_at ? ['Created', typeof r.created_at === 'number' ? new Date(r.created_at * 1000).toLocaleDateString() : r.created_at] : null,
-    r.updated_at ? ['Updated', typeof r.updated_at === 'number' ? new Date(r.updated_at * 1000).toLocaleDateString() : r.updated_at] : null,
+    r.created_at ? ['Created', typeof r.created_at === 'number' ? new Date(r.created_at * 1000).toLocaleDateString('en-ZA',{day:'2-digit',month:'short',year:'numeric'}) : r.created_at] : null,
+    r.updated_at ? ['Updated', typeof r.updated_at === 'number' ? new Date(r.updated_at * 1000).toLocaleDateString('en-ZA',{day:'2-digit',month:'short',year:'numeric'}) : r.updated_at] : null,
     r.creator_name ? ['Creator', r.creator_name] : null,
     r.manager_name ? ['Manager', r.manager_name] : null,
   ].filter(Boolean).map(([l, v]) => `<div class="sidebar-meta-row"><span class="text-gray-500 text-xs">${l}</span><span class="text-sm font-medium">${v}</span></div>`).join('')

package/src/ui/rfi-detail-renderer.js

@@ -1,13 +1,13 @@
 import { page } from '@/ui/layout.js';
 import { canEdit, isPartner, isManager, isClientUser } from '@/ui/permissions-ui.js';
-import { esc, statusBadge, TOAST_SCRIPT } from '@/ui/render-helpers.js';
+import { esc, statusBadge, TOAST_SCRIPT, emptyRow } from '@/ui/render-helpers.js';
 import { SPACING } from '@/ui/spacing-system.js';
 
 const TOAST = TOAST_SCRIPT;
 
 function questionRow(q, i, sections = [], clientId = '', showRespond = false, showView = false) {
   const section = sections.find(s => s.id === q.section_id || s.id === q.rfi_section_id);
-  const sLabel = section ? `<span class="badge badge-flat-primary text-xs">${esc(section.name)}</span>` : '';
+  const sLabel = section ? `<span class="badge badge-primary text-xs">${esc(section.name)}</span>` : '';
   const hasResp = q.responses > 0 || q.response_count > 0;
   const respBadge = hasResp ? `<span class="badge badge-success badge-flat-success text-xs">Responded</span>` : '';
   const assignedLabel = q.assigned_to ? `<span class="badge badge-flat-secondary text-xs">Assigned</span>` : '';
@@ -16,10 +16,10 @@ function questionRow(q, i, sections = [], clientId = '', showRespond = false, sh
   const viewBtn = showView && hasResp ? `<button data-action="viewResponses" data-args='["${esc(q.id)}","${esc(q.question_text||q.question||q.title||'')}"]' class="btn btn-ghost btn-xs">Responses</button>` : '';
   const editDelBtns = !showRespond ? `<button data-action="openEditQuestion" data-args='["${esc(q.id)}"]' class="btn btn-ghost btn-xs">Edit</button>${assignBtn}<button data-action="deleteQuestion" data-args='["${esc(q.id)}"]' class="btn btn-error btn-xs">Del</button>` : '';
   return `<tr class="hover">
-    <td class="text-center text-sm text-base-content/40 w-8">${i+1}</td>
+    <td class="text-center text-sm text-base-content w-8">${i+1}</td>
     <td class="text-sm max-w-sm">${esc(q.question_text||q.question||q.title||'Question')}</td>
     <td>${sLabel}</td>
-    <td class="text-sm text-base-content/50">${q.deadline?new Date(typeof q.deadline==='number'?q.deadline*1000:q.deadline).toLocaleDateString():'-'}</td>
+    <td class="text-sm text-base-content">${q.deadline?new Date(typeof q.deadline==='number'?q.deadline*1000:q.deadline).toLocaleDateString('en-ZA',{day:'2-digit',month:'short',year:'numeric'}):'-'}</td>
     <td>${respBadge}${assignedLabel}</td>
     <td><div class="flex gap-2">${respondBtn}${viewBtn}${editDelBtns}</div></td>
   </tr>`;
@@ -27,15 +27,15 @@ function questionRow(q, i, sections = [], clientId = '', showRespond = false, sh
 
 function editQuestionDialog(rfiId, sections) {
   const sectionOpts = sections.map(s => `<option value="${esc(s.id)}">${esc(s.name)}</option>`).join('');
-  return `<div id="q-dialog" data-rfi-id="${esc(rfiId)}" class="modal" style="display:none" ><div class="modal-overlay" data-dialog-close="q-dialog"></div><div class="modal-content rounded-box max-w-lg p-6"><h3 class="text-lg font-semibold mb-4" id="q-dialog-title">Edit Question</h3><div class="form-group mb-3"><label class="label"><span class="label-text font-medium">Question Text</span></label><textarea id="q-text" rows="4" class="textarea textarea-solid max-w-full"></textarea></div><div class="form-group mb-3"><label class="label"><span class="label-text font-medium">Section</span></label><select id="q-section" class="select select-solid max-w-full"><option value="">No section</option>${sectionOpts}</select></div><div class="grid grid-cols-2 gap-3 mb-4"><div class="form-group"><label class="label"><span class="label-text font-medium">Deadline</span></label><input type="date" id="q-deadline" class="input input-solid max-w-full"/></div><div class="form-group"><label class="label"><span class="label-text font-medium">Category</span></label><input type="text" id="q-category" placeholder="Category" class="input input-solid max-w-full"/></div></div><input type="hidden" id="q-edit-id"/><div class="modal-action"><button data-action="saveQuestion" data-args='["${esc(rfiId)}"]' class="btn btn-primary">Save</button><button data-dialog-close="q-dialog" class="btn btn-ghost">Cancel</button></div></div></div>`;
+  return `<div id="q-dialog" data-rfi-id="${esc(rfiId)}" class="modal" style="display:none" ><div class="modal-overlay" data-dialog-close="q-dialog"></div><div class="modal-content rounded-box max-w-lg p-6" aria-labelledby="q-dialog-title"><h2 class="text-lg font-semibold mb-4" id="q-dialog-title">Edit Question</h2><div class="form-group mb-3"><label class="label"><span class="label-text font-medium">Question Text</span></label><textarea id="q-text" rows="4" class="textarea textarea-solid max-w-full"></textarea></div><div class="form-group mb-3"><label class="label"><span class="label-text font-medium">Section</span></label><select id="q-section" class="select select-solid max-w-full"><option value="">No section</option>${sectionOpts}</select></div><div class="grid grid-cols-2 gap-3 mb-4"><div class="form-group"><label class="label"><span class="label-text font-medium">Deadline</span></label><input type="date" id="q-deadline" class="input input-solid max-w-full"/></div><div class="form-group"><label class="label"><span class="label-text font-medium">Category</span></label><input type="text" id="q-category" placeholder="Category" class="input input-solid max-w-full"/></div></div><input type="hidden" id="q-edit-id"/><div class="modal-action"><button data-action="saveQuestion" data-args='["${esc(rfiId)}"]' class="btn btn-primary">Save</button><button data-dialog-close="q-dialog" class="btn btn-ghost">Cancel</button></div></div></div>`;
 }
 
 function assignQuestionDialog(rfiId) {
-  return `<div id="assign-q-dialog" data-rfi-id="${esc(rfiId)}" class="modal" style="display:none" ><div class="modal-overlay" data-dialog-close="assign-q-dialog"></div><div class="modal-content rounded-box max-w-sm p-6"><h3 class="text-lg font-semibold mb-4">Assign to Client User</h3><div class="form-group mb-4"><label class="label"><span class="label-text font-medium">Client User</span></label><select id="assign-q-user" class="select select-solid max-w-full"><option value="">Loading...</option></select></div><input type="hidden" id="assign-q-id"/><div class="modal-action"><button data-action="saveAssignQuestion" class="btn btn-primary">Assign</button><button data-dialog-close="assign-q-dialog" class="btn btn-ghost">Cancel</button></div></div></div>`;
+  return `<div id="assign-q-dialog" data-rfi-id="${esc(rfiId)}" class="modal" style="display:none" ><div class="modal-overlay" data-dialog-close="assign-q-dialog"></div><div class="modal-content rounded-box max-w-sm p-6" aria-labelledby="assign-q-dialog-title"><h2 class="text-lg font-semibold mb-4" id="assign-q-dialog-title">Assign to Client User</h2><div class="form-group mb-4"><label class="label"><span class="label-text font-medium">Client User</span></label><select id="assign-q-user" class="select select-solid max-w-full"><option value="">Loading...</option></select></div><input type="hidden" id="assign-q-id"/><div class="modal-action"><button data-action="saveAssignQuestion" class="btn btn-primary">Assign</button><button data-dialog-close="assign-q-dialog" class="btn btn-ghost">Cancel</button></div></div></div>`;
 }
 
 function addSectionDialog(rfiId) {
-  return `<div id="sec-dialog" class="modal" style="display:none" ><div class="modal-overlay" data-dialog-close="sec-dialog"></div><div class="modal-content rounded-box max-w-sm p-6"><h3 class="text-lg font-semibold mb-4">Add Section</h3><div class="form-group mb-4"><label class="label"><span class="label-text font-medium">Section Name</span></label><input type="text" id="sec-name" class="input input-solid max-w-full"/></div><div class="modal-action"><button data-action="saveSection" data-args='["${esc(rfiId)}"]' class="btn btn-primary">Add</button><button data-dialog-close="sec-dialog" class="btn btn-ghost">Cancel</button></div></div></div>`;
+  return `<div id="sec-dialog" class="modal" style="display:none" ><div class="modal-overlay" data-dialog-close="sec-dialog"></div><div class="modal-content rounded-box max-w-sm p-6" aria-labelledby="sec-dialog-title"><h2 class="text-lg font-semibold mb-4" id="sec-dialog-title">Add Section</h2><div class="form-group mb-4"><label class="label"><span class="label-text font-medium">Section Name</span></label><input type="text" id="sec-name" class="input input-solid max-w-full"/></div><div class="modal-action"><button data-action="saveSection" data-args='["${esc(rfiId)}"]' class="btn btn-primary">Add</button><button data-dialog-close="sec-dialog" class="btn btn-ghost">Cancel</button></div></div></div>`;
 }
 
 export function renderRfiDetail(user, rfi = {}, questions = [], sections = [], engagement = null) {
@@ -44,7 +44,11 @@ export function renderRfiDetail(user, rfi = {}, questions = [], sections = [], e
   const canViewResponses = isPartner(user) || isManager(user);
   const clientId = engagement?.client_id || '';
   const qRows = questions.map((q, i) => questionRow(q, i, sections, canEditRfi ? clientId : '', isClient, canViewResponses)).join('') ||
-    `<tr><td colspan="6" class="text-center py-8 text-base-content/40 text-sm">No questions yet. Add one using the button above.</td></tr>`;
+    `<tr><td colspan="6"><div class="empty-state">
+      <svg class="empty-state-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2"/><rect x="9" y="3" width="6" height="4" rx="1"/><line x1="9" y1="12" x2="15" y2="12"/><line x1="9" y1="16" x2="12" y2="16"/></svg>
+      <div class="empty-state-title">No questions yet</div>
+      <div class="empty-state-desc">Add one using the +&nbsp;Question button above.</div>
+    </div></td></tr>`;
 
   const sectionTabs = sections.length ? `<div class="tabs tabs-boxed bg-base-200 flex-wrap gap-1">
     <button data-action="filterBySection" data-args='[""]' id="stab-all" class="tab-btn active">All</button>
@@ -64,16 +68,16 @@ export function renderRfiDetail(user, rfi = {}, questions = [], sections = [], e
     ` : ''}</div>`;
 
   const infoItems = [
-    ['Engagement', engagement?.name ? esc(engagement.name) : '<span class="text-base-content/30">—</span>'],
+    ['Engagement', engagement?.name ? esc(engagement.name) : '<span class="text-base-content">—</span>'],
     ['Status', statusBadge(rfi.status)],
-    ['Deadline', rfi.deadline?new Date(typeof rfi.deadline==='number'?rfi.deadline*1000:rfi.deadline).toLocaleDateString():'-'],
+    ['Deadline', rfi.deadline?new Date(typeof rfi.deadline==='number'?rfi.deadline*1000:rfi.deadline).toLocaleDateString('en-ZA',{day:'2-digit',month:'short',year:'numeric'}):'-'],
     ['Questions', questions.length],
     ['Sections', sections.length],
     ['Mandatory', rfi.mandatory!==false?'Yes':'No'],
   ];
 
   const infoGrid = `<div class="rfi-info-grid">` +
-    infoItems.map(([l,v]) => `<div><div style="font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--color-text-muted);margin-bottom:${SPACING.xs}">${l}</div><div style="font-size:0.875rem;color:var(--color-text)">${v}</div></div>`).join('') +
+    infoItems.map(([l,v]) => `<div><div class="info-label-key">${l}</div><div class="info-label-value">${v}</div></div>`).join('') +
     `</div>`;
 
   const content = `
@@ -91,16 +95,16 @@ export function renderRfiDetail(user, rfi = {}, questions = [], sections = [], e
     <div class="card-clean">
       <div class="card-clean-body">
          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:${SPACING.md};flex-wrap:wrap;gap:${SPACING.sm}">
-           <h2 style="font-size:0.875rem;font-weight:600;color:var(--color-text)">Questions (${questions.length})</h2>
+           <h3 style="font-size:1rem;font-weight:600;color:var(--color-text)">Questions (${questions.length})</h3>
            <div style="display:flex;gap:${SPACING.sm};align-items:center;flex-wrap:wrap">
             ${sectionTabs}
             <input type="text" placeholder="Search..." oninput="filterQuestions(this.value)" class="input input-solid" style="max-width:160px;font-size:0.875rem"/>
           </div>
         </div>
         <div class="table-wrap">
-          <table class="data-table" id="q-table">
-            <thead><tr><th>#</th><th>Question</th><th>Section</th><th>Deadline</th><th>Status</th><th>Actions</th></tr></thead>
-            <tbody id="q-tbody">${qRows}</tbody>
+          <table class="data-table" id="q-table" aria-label="Questions table">
+            <thead><tr><th scope="col">#</th><th scope="col">Question</th><th scope="col">Section</th><th scope="col">Deadline</th><th scope="col">Status</th><th scope="col">Actions</th></tr></thead>
+            <tbody id="q-tbody">${qRows || `<tr><td colspan="6" role="status" aria-live="polite" style="padding:${SPACING.md}"><span class="sr-only">Loading questions…</span><div class="skeleton" style="height:40px"></div></td></tr>`}</tbody>
           </table>
         </div>
       </div>
@@ -108,11 +112,12 @@ export function renderRfiDetail(user, rfi = {}, questions = [], sections = [], e
     ${editQuestionDialog(rfi.id, sections)}
     ${addSectionDialog(rfi.id)}
     ${clientId ? assignQuestionDialog(rfi.id) : ''}
-    ${canViewResponses ? `<div id="view-resp-dialog" class="modal" style="display:none" ><div class="modal-overlay" data-dialog-close="view-resp-dialog"></div><div class="modal-content rounded-box max-w-lg p-6"><h3 class="text-lg font-semibold mb-1">Responses</h3><p id="view-resp-qtext" class="text-sm text-base-content/60 mb-3"></p><div id="view-resp-list" style="max-height:240px;overflow-y:auto"></div><div class="modal-action"><button data-dialog-close="view-resp-dialog" class="btn btn-ghost">Close</button></div></div></div>` : ''}
-    ${isClient ? `<div id="respond-q-dialog" class="modal" style="display:none" ><div class="modal-overlay" data-dialog-close="respond-q-dialog"></div><div class="modal-content rounded-box max-w-lg p-6"><h3 class="text-lg font-semibold mb-1">Respond to Question</h3><p id="respond-q-text" class="text-sm text-base-content/60 mb-4"></p><div class="form-group mb-3"><label class="label"><span class="label-text font-medium">Your Response</span></label><textarea id="respond-q-answer" rows="5" class="textarea textarea-solid max-w-full" placeholder="Enter your response..."></textarea></div><div class="form-group mb-4"><label class="label"><span class="label-text font-medium">Attach File (optional)</span></label><input type="file" id="respond-q-file" class="input input-solid max-w-full"/></div><input type="hidden" id="respond-q-id"/><div class="modal-action"><button data-action="submitResponse" class="btn btn-primary">Submit</button><button data-dialog-close="respond-q-dialog" class="btn btn-ghost">Cancel</button></div></div></div>` : ''}
+    ${canViewResponses ? `<div id="view-resp-dialog" class="modal" style="display:none" ><div class="modal-overlay" data-dialog-close="view-resp-dialog"></div><div class="modal-content rounded-box max-w-lg p-6" aria-labelledby="view-resp-dialog-title"><h2 class="text-lg font-semibold mb-1" id="view-resp-dialog-title">Responses</h2><p id="view-resp-qtext" class="text-sm text-base-content mb-3"></p><div id="view-resp-list" style="max-height:240px;overflow-y:auto"></div><div class="modal-action"><button data-dialog-close="view-resp-dialog" class="btn btn-ghost">Close</button></div></div></div>` : ''}
+    ${isClient ? `<div id="respond-q-dialog" class="modal" style="display:none" ><div class="modal-overlay" data-dialog-close="respond-q-dialog"></div><div class="modal-content rounded-box max-w-lg p-6" aria-labelledby="respond-q-dialog-title"><h2 class="text-lg font-semibold mb-1" id="respond-q-dialog-title">Respond to Question</h2><p id="respond-q-text" class="text-sm text-base-content mb-4"></p><div class="form-group mb-3"><label class="label"><span class="label-text font-medium">Your Response</span></label><textarea id="respond-q-answer" rows="5" class="textarea textarea-solid max-w-full" placeholder="Enter your response..."></textarea></div><div class="form-group mb-4"><label class="label"><span class="label-text font-medium">Attach File (optional)</span></label><input type="file" id="respond-q-file" class="input input-solid max-w-full"/></div><input type="hidden" id="respond-q-id"/><div class="modal-action"><button data-action="submitResponse" class="btn btn-primary">Submit</button><button data-dialog-close="respond-q-dialog" class="btn btn-ghost">Cancel</button></div></div></div>` : ''}
   `;
 
   const script = `${TOAST}
+(function(){if(!document.getElementById('rfi-detail-styles')){var style=document.createElement('style');style.id='rfi-detail-styles';style.textContent='.info-label-key{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--color-text-muted);margin-bottom:${SPACING.xs}} .info-label-value{font-size:0.875rem;color:var(--color-text)} .tab-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}';document.head.appendChild(style)}})();
 var activeSection='';
 function filterBySection(sid){
   activeSection=sid;
@@ -121,6 +126,17 @@ function filterBySection(sid){
 }
 function filterRows(){var q=(document.querySelector('#q-table input')?.value||'').toLowerCase();document.querySelectorAll('#q-tbody tr').forEach(function(r){var text=(r.textContent||'').toLowerCase();var secSpan=r.querySelector('td:nth-child(3) span');var rowSec=secSpan?secSpan.textContent:'';var showSec=!activeSection||rowSec===document.getElementById('stab-'+activeSection)?.textContent;r.style.display=(!q||text.includes(q))&&showSec?'':'none'})}
 function filterQuestions(q){filterRows()}
+(function(){
+  var tabBtns=document.querySelectorAll('[id^="stab-"]');
+  tabBtns.forEach(function(btn,idx){
+    btn.setAttribute('role','tab');
+    btn.setAttribute('tabindex',btn.classList.contains('active')?'0':'-1');
+    btn.setAttribute('aria-selected',btn.classList.contains('active')?'true':'false');
+    btn.addEventListener('click',function(){tabBtns.forEach(b=>b.setAttribute('tabindex','-1'));btn.setAttribute('tabindex','0');btn.focus()});
+  });
+  var searchInput=document.querySelector('#q-table input');
+  if(searchInput){searchInput.setAttribute('tabindex','0')}
+})();
 function openAddQuestion(){document.getElementById('q-dialog').style.display='flex';document.getElementById('q-dialog-title').textContent='Add Question';document.getElementById('q-edit-id').value='';document.getElementById('q-text').value='';document.getElementById('q-section').value='';document.getElementById('q-deadline').value='';document.getElementById('q-category').value=''}
 async function openEditQuestion(id){document.getElementById('q-dialog').style.display='flex';document.getElementById('q-dialog-title').textContent='Edit Question';document.getElementById('q-edit-id').value=id;try{var rfiId=document.getElementById('q-dialog').dataset.rfiId;var r=await fetch('/api/rfi/'+rfiId+'/questions/'+id);var d=await r.json();var q=d.data||d;document.getElementById('q-text').value=q.question_text||q.question||q.title||'';document.getElementById('q-section').value=q.section_id||q.rfi_section_id||'';document.getElementById('q-deadline').value=q.deadline?(new Date(typeof q.deadline==='number'?q.deadline*1000:q.deadline)).toISOString().split('T')[0]:'';document.getElementById('q-category').value=q.category||''}catch(e){showToast('Error loading','error')}}
 async function saveQuestion(rfiId){var id=document.getElementById('q-edit-id').value;var questionText=document.getElementById('q-text').value.trim();if(!questionText){showToast('Question text required','error');return}var data={question:questionText,category:document.getElementById('q-category').value.trim()||null,section_id:document.getElementById('q-section').value||null};var dl=document.getElementById('q-deadline').value;if(dl)data.due_date=Math.floor(new Date(dl).getTime()/1000);var btn=event?.target;if(btn){btn.disabled=true;btn.textContent='Saving...'}try{var url=id?'/api/rfi/'+rfiId+'/questions/'+id:'/api/rfi/'+rfiId+'/questions';var r=await fetch(url,{method:id?'PUT':'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)});var result=await r.json();if(r.ok){showToast(id?'Question updated':'Question added','success');document.getElementById('q-dialog').style.display='none';setTimeout(function(){location.reload()},500)}else{showToast(result.message||result.error||'Failed','error')}}catch(e){showToast('Error: '+e.message,'error')}finally{if(btn){btn.disabled=false;btn.textContent='Save'}}}
@@ -129,6 +145,7 @@ async function saveSection(rfiId){var name=document.getElementById('sec-name').v
 async function sendReminder(rfiId){try{var r=await fetch('/api/friday/rfi/reminder',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({rfi_id:rfiId})});if(r.ok)showToast('Reminder sent','success');else showToast('Failed','error')}catch(e){showToast('Error','error')}}`;
 
   const assignScript = clientId ? `
+function rdEsc(s){return String(s==null?'':s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;')}
 var _assignClientId=${JSON.stringify(clientId)};
 window.openAssignQuestion=async function(qId){
   var dlg=document.getElementById('assign-q-dialog');
@@ -140,7 +157,7 @@ window.openAssignQuestion=async function(qId){
     var r=await fetch('/api/users?client_id='+_assignClientId+'&pageSize=100',{credentials:'include'});
     var d=await r.json();
     var users=(d.data||d||[]).filter(function(u){return !u.deleted_at});
-    sel.innerHTML='<option value="">Select client user...</option>'+users.map(function(u){return'<option value="'+u.id+'">'+(u.name||u.email)+'</option>'}).join('');
+    sel.innerHTML='<option value="">Select client user...</option>'+users.map(function(u){return'<option value="'+rdEsc(u.id)+'">'+rdEsc(u.name||u.email)+'</option>'}).join('');
   }catch(e){sel.innerHTML='<option value="">Error loading users</option>'}
 };
 window.saveAssignQuestion=async function(){
@@ -157,7 +174,7 @@ window.saveAssignQuestion=async function(){
 
   const viewRespScript = canViewResponses ? `
 var _rfiIdForView=${JSON.stringify(rfi.id)};
-window.viewResponses=async function(qId,qText){document.getElementById('view-resp-qtext').textContent=qText||'';document.getElementById('view-resp-list').innerHTML='<div class="text-sm text-base-content/40">Loading...</div>';document.getElementById('view-resp-dialog').style.display='flex';try{var r=await fetch('/api/rfi/'+_rfiIdForView+'/questions/'+qId+'/responses',{credentials:'include'});var d=await r.json();var items=d.data||d||[];document.getElementById('view-resp-list').innerHTML=items.length?items.map(function(resp){return'<div style="border:1px solid var(--color-border);border-radius:6px;padding:8px;margin-bottom:6px"><div class="text-sm">'+resp.response+'</div><div class="text-xs text-base-content/40 mt-1">'+new Date(typeof resp.created_at==="number"?resp.created_at*1000:resp.created_at).toLocaleString()+'</div></div>'}).join(''):'<div class="text-sm text-base-content/40">No responses yet</div>'}catch(e){document.getElementById('view-resp-list').innerHTML='<div class="text-sm text-error">Error loading</div>'}};` : '';
+window.viewResponses=async function(qId,qText){document.getElementById('view-resp-qtext').textContent=qText||'';document.getElementById('view-resp-list').innerHTML='<div class="text-sm text-base-content/40">Loading...</div>';document.getElementById('view-resp-dialog').style.display='flex';try{var r=await fetch('/api/rfi/'+_rfiIdForView+'/questions/'+qId+'/responses',{credentials:'include'});var d=await r.json();var items=d.data||d||[];document.getElementById('view-resp-list').innerHTML=items.length?items.map(function(resp){return'<div style="border:1px solid var(--color-border);border-radius:6px;padding:8px;margin-bottom:6px"><div class="text-sm">'+resp.response+'</div><div class="text-xs text-base-content/40 mt-1">'+window.fmtDateTime(resp.created_at)+'</div></div>'}).join(''):'<div class="text-sm text-base-content/40">No responses yet</div>'}catch(e){document.getElementById('view-resp-list').innerHTML='<div class="text-sm text-error">Error loading</div>'}};` : '';
 
   const respondScript = isClient ? `
 var _respondRfiId=${JSON.stringify(rfi.id)};
@@ -187,5 +204,5 @@ window.submitResponse=async function(){
   finally{if(btn){btn.disabled=false;btn.textContent='Submit'}}
 };` : '';
 
-  return page(user, `${esc(rfi.name||'RFI')} | Moonlanding`, null, content, [script, assignScript, viewRespScript, respondScript]);
+  return page(user, `${esc(rfi.name||'RFI')} | Thatcher`, null, content, [script, assignScript, viewRespScript, respondScript]);
 }