thatcher 1.0.6 → 1.0.33

package/src/ui/settings-renderer-advanced2.js

@@ -1,8 +1,8 @@
 import { TOAST_SCRIPT, settingsPage, settingsBack, inlineTable } from '@/ui/settings-renderer.js';
-import { esc } from '@/ui/render-helpers.js';
+import { esc, icon } from '@/ui/render-helpers.js';
 
 const bc = (label) => [{ href: '/', label: 'Dashboard' }, { href: '/admin/settings', label: 'Settings' }, { label }];
-const togRow = tg => `<div class="flex justify-between items-center py-3 border-b border-base-200"><div><div class="text-sm font-semibold">${tg.label}</div><div class="text-xs text-base-content/50">${tg.desc}</div></div><input type="checkbox" name="${tg.id}" ${tg.checked ? 'checked' : ''} class="checkbox checkbox-primary"/></div>`;
+const togRow = tg => `<div class="flex justify-between items-center py-3 border-b border-base-200"><div><div class="text-sm font-semibold">${tg.label}</div><div class="text-xs text-base-content/80">${tg.desc}</div></div><input type="checkbox" name="${tg.id}" ${tg.checked ? 'checked' : ''} class="checkbox checkbox-primary"/></div>`;
 
 export function renderSettingsReviewSettings(user, config = {}) {
   const review = config.review || {};
@@ -39,7 +39,7 @@ export function renderSettingsFileReview(user, config = {}, frSettings = {}) {
     { id: 'mobile_resize', label: 'Mobile Resize', desc: 'Enable mobile-friendly resizable highlights', checked: fr.mobile_resize !== false },
     { id: 'coordinate_snap', label: 'Coordinate Snap', desc: 'Snap highlight coordinates to text boundaries', checked: !!fr.coordinate_snap },
   ];
-  const flagChips = (flags, type) => flags.map(f => `<span class="pill pill-neutral" style="display:inline-flex;align-items:center;gap:4px">${esc(f)}<button type="button" onclick="removeFlag('${type}','${esc(f.replace(/'/g,"\\'"))}')" style="background:none;border:none;cursor:pointer;font-size:1rem;line-height:1;color:inherit">&times;</button></span>`).join('');
+  const flagChips = (flags, type) => flags.map(f => `<span class="pill pill-neutral" style="display:inline-flex;align-items:center;gap:4px">${esc(f)}<button type="button" data-action="removeFlag" data-args='${esc(JSON.stringify([type, f]))}' aria-label="Remove flag" style="background:none;border:none;cursor:pointer;line-height:1;color:inherit;display:inline-flex">${icon('close',16)}</button></span>`).join('');
   const content = `${settingsBack()}<h1 class="text-2xl font-bold mb-6">File Review Settings</h1>
   <div id="fr-review-flags" data-flags='${JSON.stringify(reviewFlags)}'></div>
   <div id="fr-tender-flags" data-flags='${JSON.stringify(tenderFlags)}'></div>
@@ -55,18 +55,19 @@ export function renderSettingsFileReview(user, config = {}, frSettings = {}) {
   <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
     <div class="card-clean"><div class="card-clean-body"><h2 class="card-title text-base mb-3">Review Flags</h2>
       <div id="review-flags-list" class="flex flex-wrap gap-2 mb-3">${flagChips(reviewFlags, 'review')}</div>
-      <div class="flex gap-2"><input type="text" id="new-review-flag" class="input input-solid" placeholder="New flag label..." style="flex:1"/><button type="button" onclick="addFlag('review')" class="btn btn-primary btn-sm">Add</button></div>
+      <div class="flex gap-2"><input type="text" id="new-review-flag" class="input input-solid" placeholder="New flag label..." style="flex:1"/><button type="button" data-action="addFlag" data-args='["review"]' class="btn btn-primary btn-sm">Add</button></div>
     </div></div>
     <div class="card-clean"><div class="card-clean-body"><h2 class="card-title text-base mb-3">Tender Flags</h2>
       <div id="tender-flags-list" class="flex flex-wrap gap-2 mb-3">${flagChips(tenderFlags, 'tender')}</div>
-      <div class="flex gap-2"><input type="text" id="new-tender-flag" class="input input-solid" placeholder="New flag label..." style="flex:1"/><button type="button" onclick="addFlag('tender')" class="btn btn-primary btn-sm">Add</button></div>
+      <div class="flex gap-2"><input type="text" id="new-tender-flag" class="input input-solid" placeholder="New flag label..." style="flex:1"/><button type="button" data-action="addFlag" data-args='["tender"]' class="btn btn-primary btn-sm">Add</button></div>
     </div></div>
   </div>
   <button type="submit" class="btn btn-primary">Save File Review Settings</button></form>`;
   const script = `${TOAST_SCRIPT}
 var _rvFlags=${JSON.stringify(reviewFlags)};
 var _tdFlags=${JSON.stringify(tenderFlags)};
-function renderFlags(type){const list=type==='review'?_rvFlags:_tdFlags;const el=document.getElementById(type+'-flags-list');if(!el)return;el.innerHTML=list.map(f=>'<span class="pill pill-neutral" style="display:inline-flex;align-items:center;gap:4px">'+f+'<button type="button" onclick="removeFlag(\\''+type+'\\',\\''+f.replace(/'/g,"\\'")+'\\')" style="background:none;border:none;cursor:pointer;font-size:1rem;line-height:1;color:inherit">&times;</button></span>').join('')}
+function _escFlag(s){return String(s==null?'':s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;')}
+function renderFlags(type){const list=type==='review'?_rvFlags:_tdFlags;const el=document.getElementById(type+'-flags-list');if(!el)return;el.innerHTML=list.map(f=>'<span class="pill pill-neutral" style="display:inline-flex;align-items:center;gap:4px">'+_escFlag(f)+'<button type="button" data-action="removeFlag" data-args=\\''+_escFlag(JSON.stringify([type,f]))+'\\' aria-label="Remove flag" style="background:none;border:none;cursor:pointer;font-size:1rem;line-height:1;color:inherit">&times;</button></span>').join('')}
 window.addFlag=function(type){const inp=document.getElementById('new-'+type+'-flag');const val=(inp?.value||'').trim();if(!val)return;if(type==='review'){_rvFlags=[..._rvFlags,val]}else{_tdFlags=[..._tdFlags,val]};inp.value='';renderFlags(type)};
 window.removeFlag=function(type,flag){if(type==='review'){_rvFlags=_rvFlags.filter(f=>f!==flag)}else{_tdFlags=_tdFlags.filter(f=>f!==flag)};renderFlags(type)};
 document.getElementById('file-review-settings-form').addEventListener('submit',async(e)=>{e.preventDefault();const fd=new FormData(e.target);const data={};for(const[k,v]of fd.entries())data[k]=v;document.querySelectorAll('#file-review-settings-form input[type=checkbox]').forEach(cb=>{data[cb.name]=cb.checked});document.querySelectorAll('#file-review-settings-form input[type=number]').forEach(n=>{if(data[n.name])data[n.name]=Number(data[n.name])});data.review_flags=_rvFlags;data.tender_flags=_tdFlags;try{const res=await fetch('/api/admin/settings/file-review',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)});if(res.ok){showToast('Settings saved','success')}else{showToast('Save failed','error')}}catch(err){showToast('Error: '+err.message,'error')}})`;
@@ -79,31 +80,31 @@ export function renderSettingsMwrPermissions(user, permissions = []) {
     <td class="text-sm">${esc(p.entity_id||'-')}</td>
     <td class="text-sm">${esc(p.user_id||'-')}</td>
     <td class="text-sm">${esc(p.permission_type||'-')}</td>
-    <td class="text-sm">${p.granted_at ? new Date(p.granted_at * 1000).toLocaleDateString() : '-'}</td>
-    <td><button class="btn btn-error btn-xs btn-outline" onclick="revokePermission('${esc(p.id)}')">Revoke</button></td>
+    <td class="text-sm">${p.granted_at ? new Date(p.granted_at * 1000).toLocaleDateString('en-ZA',{day:'2-digit',month:'short',year:'numeric'}) : '-'}</td>
+    <td><button type="button" class="btn btn-error btn-xs btn-outline" data-action="revokePermission" data-args='${esc(JSON.stringify([p.id]))}'>Revoke</button></td>
   </tr>`).join('');
   const content = `${settingsBack()}<div class="flex justify-between items-center mb-6">
     <h1 class="text-2xl font-bold">MWR Permissions</h1>
-    <button class="btn btn-primary btn-sm" onclick="document.getElementById('grant-perm-dialog').style.display='flex'">+ Grant Permission</button>
+    <button class="btn btn-primary btn-sm" data-action="openDialog" data-args='["grant-perm-dialog"]'>+ Grant Permission</button>
   </div>
   ${inlineTable(['Entity Type','Entity ID','User ID','Permission','Granted','Actions'], rows, 'No permissions configured')}
-  <div id="grant-perm-dialog" class="dialog-overlay" style="display:none" role="dialog" aria-modal="true">
-    <div class="dialog-panel" style="max-width:460px">
-      <div class="dialog-header"><span class="dialog-title">Grant Permission</span><button class="dialog-close" onclick="document.getElementById('grant-perm-dialog').style.display='none'">&times;</button></div>
+  <div id="grant-perm-dialog" class="dialog-overlay" style="display:none" role="dialog" aria-modal="true" aria-labelledby="gp-dialog-title" data-dialog-close="grant-perm-dialog">
+    <div class="dialog-panel" style="max-width:min(460px,90vw)">
+      <div class="dialog-header"><span class="dialog-title" id="gp-dialog-title">Grant Permission</span><button class="dialog-close" data-dialog-close="grant-perm-dialog" aria-label="Close">&times;</button></div>
       <div class="dialog-body">
-        <div class="modal-form-group"><label>Entity Type</label><input id="gp-entity-type" class="form-input" placeholder="review"/></div>
-        <div class="modal-form-group"><label>Entity ID</label><input id="gp-entity-id" class="form-input" placeholder="entity id"/></div>
-        <div class="modal-form-group"><label>User ID</label><input id="gp-user-id" class="form-input" placeholder="user id"/></div>
+        <div class="modal-form-group"><label>Entity Type</label><input id="gp-entity-type" class="form-input" placeholder="e.g. review"/></div>
+        <div class="modal-form-group"><label>Entity ID</label><input id="gp-entity-id" class="form-input" placeholder="e.g. 1a2b3c"/></div>
+        <div class="modal-form-group"><label>User ID</label><input id="gp-user-id" class="form-input" placeholder="e.g. user_42"/></div>
         <div class="modal-form-group"><label>Permission Type</label><select id="gp-perm-type" class="form-input"><option value="view">view</option><option value="edit">edit</option><option value="admin">admin</option></select></div>
         <div id="gp-result" style="display:none;margin-top:8px"></div>
       </div>
       <div class="dialog-footer">
-        <button class="btn btn-ghost btn-sm" onclick="document.getElementById('grant-perm-dialog').style.display='none'">Cancel</button>
-        <button class="btn btn-primary btn-sm" onclick="grantPermission()">Grant</button>
+        <button class="btn btn-ghost btn-sm" data-dialog-close="grant-perm-dialog">Cancel</button>
+        <button class="btn btn-primary btn-sm" data-action="grantPermission">Grant</button>
       </div>
     </div>
   </div>`;
-  const script = `${TOAST_SCRIPT}async function grantPermission(){var body={entity_type:document.getElementById('gp-entity-type').value.trim(),entity_id:document.getElementById('gp-entity-id').value.trim(),user_id:document.getElementById('gp-user-id').value.trim(),permission_type:document.getElementById('gp-perm-type').value};var res=document.getElementById('gp-result');if(!body.entity_type||!body.entity_id||!body.user_id){res.style.display='block';res.innerHTML='<div style="color:var(--color-danger);font-size:13px">All fields required.</div>';return}try{var r=await fetch('/api/mwr/permissions',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});var d=await r.json();if(r.ok&&d.success){showToast('Permission granted','success');document.getElementById('grant-perm-dialog').style.display='none';setTimeout(function(){location.reload()},500)}else{res.style.display='block';res.innerHTML='<div style="color:var(--color-danger);font-size:13px">'+(d.error||'Failed')+'</div>'}}catch(e){showToast('Error: '+e.message,'error')}}async function revokePermission(id){if(!confirm('Revoke this permission?'))return;try{var r=await fetch('/api/permission/'+id,{method:'DELETE'});if(r.ok){showToast('Revoked','success');setTimeout(function(){location.reload()},500)}else{showToast('Failed','error')}}catch(e){showToast('Error: '+e.message,'error')}}`;
+  const script = `${TOAST_SCRIPT}window.grantPermission=async function(){var body={entity_type:document.getElementById('gp-entity-type').value.trim(),entity_id:document.getElementById('gp-entity-id').value.trim(),user_id:document.getElementById('gp-user-id').value.trim(),permission_type:document.getElementById('gp-perm-type').value};var res=document.getElementById('gp-result');if(!body.entity_type||!body.entity_id||!body.user_id){res.style.display='block';res.innerHTML='<div style="color:var(--color-danger);font-size:13px">All fields required.</div>';return}try{var r=await fetch('/api/mwr/permissions',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});var d=await r.json();if(r.ok&&d.success){showToast('Permission granted','success');(window.closeDialog?window.closeDialog('grant-perm-dialog'):document.getElementById('grant-perm-dialog').style.display='none');setTimeout(function(){location.reload()},500)}else{res.style.display='block';res.innerHTML='<div style="color:var(--color-danger);font-size:13px">'+(d.error||'Failed')+'</div>'}}catch(e){showToast('Error: '+e.message,'error')}};window.revokePermission=async function(id){if(!(await window.gmConfirm({title:'Revoke permission',message:'Revoke this permission?',confirmLabel:'Revoke',danger:true})))return;try{var r=await fetch('/api/permission/'+id,{method:'DELETE'});if(r.ok){showToast('Revoked','success');setTimeout(function(){location.reload()},500)}else{showToast('Failed','error')}}catch(e){showToast('Error: '+e.message,'error')}}`;
   return settingsPage(user, 'MWR Permissions', bc('MWR Permissions'), content, [script]);
 }
 
@@ -153,6 +154,6 @@ export function renderSettingsTemplateManage(user, template = {}, sections = [])
   window.editTplSection=function(id,name,color){document.getElementById('tpl-section-form').classList.remove('hidden');document.getElementById('tpl-sec-id').value=id;document.getElementById('tpl-sec-name').value=name;document.getElementById('tpl-sec-color').value=color};
   window.cancelTplSection=function(){document.getElementById('tpl-section-form').classList.add('hidden')};
   window.saveTplSection=async function(){var id=document.getElementById('tpl-sec-id').value;var body={name:document.getElementById('tpl-sec-name').value,color:document.getElementById('tpl-sec-color').value,review_template_id:tplId};if(!body.name){showToast('Name required','error');return}var url=id?'/api/review_template_section/'+id:'/api/review_template_section';var method=id?'PUT':'POST';try{var res=await fetch(url,{method:method,headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});if(res.ok){showToast(id?'Updated':'Created','success');setTimeout(function(){location.reload()},500)}else{showToast('Failed','error')}}catch(e){showToast('Error','error')}};
-  window.deleteTplSection=async function(id){if(!confirm('Delete this section?'))return;try{var res=await fetch('/api/review_template_section/'+id,{method:'DELETE'});if(res.ok){showToast('Deleted','success');setTimeout(function(){location.reload()},500)}else{showToast('Delete failed','error')}}catch(e){showToast('Error','error')}};`;
+  window.deleteTplSection=async function(id){if(!(await window.gmConfirm({title:'Delete Section',message:'Delete this section? This cannot be undone.',confirmLabel:'Delete',danger:true})))return;try{var res=await fetch('/api/review_template_section/'+id,{method:'DELETE'});if(res.ok){showToast('Deleted','success');setTimeout(function(){location.reload()},500)}else{showToast('Delete failed','error')}}catch(e){showToast('Error','error')}};`;
   return settingsPage(user, `Manage Template - ${esc(template.name || 'Template')}`, tplBc, content, [script]);
 }

package/src/ui/settings-renderer-teams.js

@@ -14,8 +14,8 @@ function parseMembers(t) {
 }
 
 export function renderSettingsTeams(user, teams = [], allUsers = []) {
-  const editDialog = `<div id="team-dialog" class="modal" style="display:none" data-overlay-close="true" data-action="closeTeamDialog">
-    <div class="modal-overlay" data-action="closeTeamDialog"></div>
+  const editDialog = `<div id="team-dialog" class="modal" style="display:none" role="dialog" aria-modal="true" aria-labelledby="team-dialog-title">
+    <div class="modal-overlay" data-dialog-close="team-dialog"></div>
     <div class="modal-content rounded-box max-w-md p-6">
       <h3 id="team-dialog-title" class="text-lg font-semibold mb-4">Edit Team</h3>
       <input type="hidden" id="team-edit-id"/>
@@ -59,7 +59,7 @@ document.addEventListener('DOMContentLoaded',function(){document.querySelectorAl
   const content = `${settingsBack()}${editDialog}
     <div class="flex justify-between items-center mb-4">
       <h1 class="text-2xl font-bold">Teams</h1>
-      <button class="btn btn-primary btn-sm gap-1 team-add-btn"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> Add Team</button>
+      <button class="btn btn-primary btn-sm gap-1 team-add-btn"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> Add Team</button>
     </div>
     <div class="card-clean"><div class="card-clean-body" style="padding:0rem">${inlineTable(['Name', 'Members', 'Actions'], rows, 'No teams found')}</div></div>`;
   return settingsPage(user, 'Teams - Settings', [{ href: '/', label: 'Dashboard' }, { href: '/admin/settings', label: 'Settings' }, { label: 'Teams' }], content, [script]);
@@ -101,7 +101,7 @@ export function renderSettingsRfiSections(user, sections = []) {
   const script = `${TOAST_SCRIPT}
 function toggleAddForm(){document.getElementById('section-form').style.display='block';document.getElementById('edit-id').value='';document.getElementById('section-name').value='';selectColor('#B0B0B0')}
 function cancelForm(){document.getElementById('section-form').style.display='none'}
-function selectColor(c){document.getElementById('section-color').value=c;document.querySelectorAll('#color-palette div').forEach(el=>{el.style.borderColor=el.dataset.color===c?'#1a1a1a':'transparent'})}
+function selectColor(c){document.getElementById('section-color').value=c;document.querySelectorAll('#color-palette div').forEach(el=>{el.style.borderColor=el.dataset.color===c?'var(--color-text)':'transparent'})}
 function editSection(id,name,color){document.getElementById('section-form').style.display='block';document.getElementById('edit-id').value=id;document.getElementById('section-name').value=name;selectColor(color)}
 async function saveSection(){const name=document.getElementById('section-name').value.trim();const color=document.getElementById('section-color').value;const id=document.getElementById('edit-id').value;if(!name){showToast('Name is required','error');return}const url=id?'/api/rfi_section/'+id:'/api/rfi_section';const method=id?'PUT':'POST';try{const res=await fetch(url,{method,headers:{'Content-Type':'application/json'},body:JSON.stringify({name,color})});if(res.ok){showToast(id?'Updated':'Created','success');setTimeout(()=>location.reload(),500)}else{showToast('Failed','error')}}catch(e){showToast('Error: '+e.message,'error')}}
 async function deleteSection(id){if(!(await window.gmConfirm({title:'Please confirm',message:'Delete this section?',danger:true,confirmLabel:'OK'})))return;try{const res=await fetch('/api/rfi_section/'+id,{method:'DELETE'});if(res.ok){showToast('Deleted','success');setTimeout(()=>location.reload(),500)}else{showToast('Delete failed','error')}}catch(e){showToast('Error','error')}}

package/src/ui/settings-renderer.js

@@ -50,7 +50,7 @@ const SETTINGS_CARDS = [
 export function renderSettingsHome(user, config = {}, counts = {}) {
   const cards = SETTINGS_CARDS.map(c => {
     const cnt = c.countKey && counts[c.countKey] !== undefined ? counts[c.countKey] : null;
-    const badge = cnt !== null ? `<span class="badge badge-flat-primary text-xs">${cnt.toLocaleString()} items</span>` : '';
+    const badge = cnt !== null ? `<span class="badge badge-flat-primary text-xs">${cnt.toLocaleString('en-ZA')} items</span>` : '';
     return `<a href="${c.href}" class="card-clean" style="text-decoration:none;border:1px solid var(--color-border);transition:box-shadow 0.15s">
       <div class="card-clean-body" style="padding:${SPACING.md}">
         <div style="display:flex;align-items:flex-start;gap:${SPACING.md}">
@@ -60,7 +60,7 @@ export function renderSettingsHome(user, config = {}, counts = {}) {
             <div style="font-size:0.75rem;color:var(--color-text-muted);margin-top:${SPACING.xs};line-height:1.4">${c.desc}</div>
             ${badge ? `<div style="margin-top:${SPACING.sm}">${badge}</div>` : ''}
           </div>
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink:0;color:var(--color-text-muted);margin-top:${SPACING.xs}"><polyline points="9 18 15 12 9 6"/></svg>
+          <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink:0;color:var(--color-text-muted);margin-top:${SPACING.xs}"><polyline points="9 18 15 12 9 6"/></svg>
         </div>
       </div>
     </a>`;
@@ -120,10 +120,10 @@ export function renderSettingsUsers(user, users = []) {
   <div class="flex justify-between items-center mb-2">
     <div>
       <h1 class="text-2xl font-bold">Users</h1>
-      <p class="text-sm text-base-content/50 mt-0.5">${users.length} total &middot; ${active} active</p>
+      <p class="text-sm text-base-content/50 mt-0.5">${users.length} total - ${active} active</p>
     </div>
     <a href="/user/new" class="btn btn-primary btn-sm gap-1">
-      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> Add User
+      <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> Add User
     </a>
   </div>
   <div class="table-toolbar mb-3">

package/src/ui/spacing-system.js

@@ -124,11 +124,14 @@ export function renderStatsRow(stats) {
   </div>`).join('')}</div>`;
 }
 
+// title/subtitle are plain text (escaped here); actionsHtml is a caller-built
+// HTML fragment by contract. esc() inline to keep this module dependency-free.
+function phEsc(s) { return String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;'); }
 export function renderPageHeader(title, subtitle, actionsHtml = '') {
   return `<div class="page-header">
     <div>
-      <h1 class="page-title">${title}</h1>
-      ${subtitle ? `<p class="page-subtitle">${subtitle}</p>` : ''}
+      <h1 class="page-title">${phEsc(title)}</h1>
+      ${subtitle ? `<p class="page-subtitle">${phEsc(subtitle)}</p>` : ''}
     </div>
     ${actionsHtml ? `<div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center">${actionsHtml}</div>` : ''}
   </div>`;

package/src/ui/standalone-login.js

@@ -4,7 +4,7 @@ export function renderStandaloneLogin(showGoogleAuth = false) {
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Sign In | Moonlanding</title>
+  <title>Sign In | Thatcher</title>
   <style>
     *{margin:0;padding:0;box-sizing:border-box}
     :root{--bg:#f1f5f9;--surface:#fff;--border:#e2e8f0;--text:#0f172a;--text-muted:#64748b;--primary:#04141f;--primary-hover:#0a2535;--accent:#2563eb;--danger:#dc2626;--danger-bg:#fee2e2;--danger-border:#fca5a5;--radius:10px;--shadow:0 4px 24px rgba(0,0,0,0.09)}
@@ -45,7 +45,7 @@ export function renderStandaloneLogin(showGoogleAuth = false) {
   <div class="wrap">
     <div class="logo">
       <div class="logo-mark"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.75" aria-hidden="true"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg></div>
-      <span class="logo-text">Moonlanding</span>
+      <span class="logo-text">Thatcher</span>
       <div class="logo-sub">Sign in to your account</div>
     </div>
     <div class="card">

package/src/ui/styles.css

@@ -1184,9 +1184,10 @@ tr:last-child td { border-bottom: none; }
 .dialog-panel { background: white; border-radius: 0.75rem; padding: 1.5rem; max-width: 480px; width: 90%; max-height: 85vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
 .dialog-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
 .dialog-title { font-size: 1.125rem; font-weight: 600; color: #111827; }
-.dialog-close { background: none; border: none; font-size: 1.5rem; color: #9ca3af; cursor: pointer; line-height: 1; padding: 0; }
+.dialog-close { background: none; border: none; font-size: 1.5rem; color: #9ca3af; cursor: pointer; line-height: 1; padding: 0; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
 .dialog-close:hover { color: #374151; }
 @media (prefers-color-scheme: dark) {
+  .dialog-title { color: #f5f5f5; }
   .dialog-close { color: #9ca3af; }
   .dialog-close:hover { color: #f5f5f5; }
 }

package/src/ui/styles2.css

@@ -11,6 +11,7 @@
   --ds-border: #3a3d42;
   --ds-accent: #247420;
   --ds-accent-light: #3A9A34;
+  --ds-on-accent: #fff;
   --ds-mint: rgb(182, 222, 193);
   --ds-pill-radius: 999px;
   --ds-font-body: 'Nunito', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
@@ -23,7 +24,7 @@ body[data-ds-theme="247420"], body { background: var(--ds-bg); color: var(--ds-f
 h1, .page-title, h2 { font-family: var(--ds-font-display); letter-spacing: -0.3px; }
 .pill, .badge, .info-label, .meta, code, kbd, .mono { font-family: var(--ds-font-mono); }
 .btn, button.btn-primary, button.btn-secondary, .btn-ghost, .btn-outline { border-radius: var(--ds-pill-radius); padding: 8px 18px; font-family: var(--ds-font-body); font-weight: 600; }
-.btn-primary { background: var(--ds-accent); color: var(--ds-fg); border: 1px solid var(--ds-accent-light); }
+.btn-primary { background: var(--ds-accent); color: var(--ds-on-accent); border: 1px solid var(--ds-accent-light); }
 .btn-primary:hover { background: var(--ds-accent-light); }
 
 /* Layered surfaces */
@@ -35,7 +36,7 @@ h1, .page-title, h2 { font-family: var(--ds-font-display); letter-spacing: -0.3p
 #ds-online-status.offline { display: inline-block; background: #4a1d1d; border-color: #6b2828; color: #ffd6d6; }
 
 /* FlexUp chat dock */
-#flexup-fab { position: fixed; bottom: 20px; right: 20px; z-index: 9998; width: 52px; height: 52px; border-radius: 999px; background: var(--ds-accent); color: white; border: 1px solid var(--ds-accent-light); cursor: pointer; font-family: var(--ds-font-display); font-size: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
+#flexup-fab { position: fixed; bottom: 20px; right: 20px; z-index: 9998; width: 52px; height: 52px; border-radius: 999px; background: var(--ds-accent); color: var(--ds-on-accent); border: 1px solid var(--ds-accent-light); cursor: pointer; font-family: var(--ds-font-display); font-size: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
 #flexup-dock { position: fixed; bottom: 84px; right: 20px; z-index: 9998; width: 360px; max-height: 480px; background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 12px; display: none; flex-direction: column; box-shadow: 0 12px 32px rgba(0,0,0,0.5); }
 #flexup-dock.open { display: flex; }
 #flexup-dock .fx-header { padding: 12px 14px; border-bottom: 1px solid var(--ds-border); font-family: var(--ds-font-display); font-size: 14px; }
@@ -45,7 +46,7 @@ h1, .page-title, h2 { font-family: var(--ds-font-display); letter-spacing: -0.3p
 #flexup-dock .fx-msg.bot { background: var(--ds-bg); border: 1px solid var(--ds-border); }
 #flexup-dock .fx-input-row { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--ds-border); }
 #flexup-dock input.fx-input { flex: 1; background: var(--ds-bg); color: var(--ds-fg); border: 1px solid var(--ds-border); border-radius: 8px; padding: 8px 10px; font-family: var(--ds-font-body); }
-#flexup-dock button.fx-send { background: var(--ds-accent); color: var(--ds-fg); border: 0; border-radius: 8px; padding: 6px 14px; font-family: var(--ds-font-body); font-weight: 600; cursor: pointer; }
+#flexup-dock button.fx-send { background: var(--ds-accent); color: var(--ds-on-accent); border: 0; border-radius: 8px; padding: 6px 14px; font-family: var(--ds-font-body); font-weight: 600; cursor: pointer; }
 
 /* Priority star */
 .review-priority-star { background: transparent; border: 0; cursor: pointer; color: var(--ds-muted); padding: 2px 6px; font-size: 16px; }
@@ -78,7 +79,7 @@ html, body { overflow-x: hidden; max-width: 100%; }
   --color-bg: #f1f5f9;
   --color-border: #e2e8f0;
   --color-text: #0f172a;
-  --color-text-muted: #64748b;
+  --color-text-muted: #5a6b7f;
   --color-text-light: #94a3b8;
   --color-success: #16a34a;
   --color-warning: #d97706;
@@ -169,13 +170,48 @@ html, body { overflow-x: hidden; max-width: 100%; }
 
 /* Stage pills */
 .stage-pill { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 100px; font-size: 12px; font-weight: 600; letter-spacing: 0.2px; }
-.stage-info_gathering { background: #fee2e2; color: #991b1b; }
+.stage-info_gathering { background: #dbeafe; color: #1e40af; }
 .stage-commencement { background: #fef3c7; color: #92400e; }
 .stage-team_execution { background: #dbeafe; color: #1e40af; }
 .stage-partner_review { background: #ede9fe; color: #5b21b6; }
 .stage-finalization { background: #dcfce7; color: #15803d; }
 .stage-closeout { background: #f1f5f9; color: #475569; }
 
+/* Badge variants for table cells and detail views (inherit stage/status pill colors via classes) */
+.badge-stage { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 100px; font-size: 12px; font-weight: 600; }
+.badge-stage.stage-info_gathering { background: #dbeafe; color: #1e40af; }
+.badge-stage.stage-commencement { background: #fef3c7; color: #92400e; }
+.badge-stage.stage-team_execution { background: #dbeafe; color: #1e40af; }
+.badge-stage.stage-partner_review { background: #ede9fe; color: #5b21b6; }
+.badge-stage.stage-finalization { background: #dcfce7; color: #15803d; }
+.badge-stage.stage-closeout { background: #f1f5f9; color: #475569; }
+
+/* Status label badges (alias to pill classes for consistency) */
+.status-label { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 100px; font-size: 12px; font-weight: 500; }
+
+/* Dark-mode overrides for status pills + stage pills: keep them as dark-tinted
+   islands (not light-on-dark) with legible light text. */
+@media (prefers-color-scheme: dark) {
+  .pill-success { background: #14321f; color: #4ade80; }
+  .pill-danger { background: #3a1717; color: #f87171; }
+  .pill-warning { background: #3a2c12; color: #fbbf24; }
+  .pill-info { background: #16263f; color: #60a5fa; }
+  .pill-neutral { background: #25303d; color: #cbd5e1; }
+  .pill-primary { background: #122b3a; color: #38bdf8; }
+  .stage-info_gathering { background: #1e3a8a; color: #60a5fa; }
+  .stage-commencement { background: #3a2c12; color: #fcd34d; }
+  .stage-team_execution { background: #16263f; color: #93c5fd; }
+  .stage-partner_review { background: #261b3f; color: #c4b5fd; }
+  .stage-finalization { background: #14321f; color: #86efac; }
+  .stage-closeout { background: #25303d; color: #cbd5e1; }
+  .badge-stage.stage-info_gathering { background: #1e3a8a; color: #60a5fa; }
+  .badge-stage.stage-commencement { background: #3a2c12; color: #fcd34d; }
+  .badge-stage.stage-team_execution { background: #16263f; color: #93c5fd; }
+  .badge-stage.stage-partner_review { background: #261b3f; color: #c4b5fd; }
+  .badge-stage.stage-finalization { background: #14321f; color: #86efac; }
+  .badge-stage.stage-closeout { background: #25303d; color: #cbd5e1; }
+}
+
 /* Buttons */
 .btn-primary-clean { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; background: var(--color-primary); color: white; border: none; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; transition: all 0.15s ease; min-height: 40px; }
 .btn-primary-clean:hover { background: var(--color-primary-hover); color: white; transform: translateY(-1px); box-shadow: var(--shadow-md); }
@@ -194,6 +230,11 @@ html, body { overflow-x: hidden; max-width: 100%; }
   .btn-danger-clean:hover { background: #7f1d1d; }
 }
 .btn-danger-clean:active { opacity: 0.8; }
+/* gmConfirm danger:true emits .btn-error, but the runtime-injected `.ds-247420 .btn { background:var(--bg-2) }`
+   (specificity 0,2,0) out-weighed a plain .btn-error and rendered it gray (witnessed rgb(37,37,44)).
+   !important guarantees destructive-confirm buttons read as danger regardless of injected theme order. */
+.btn-error, button.btn-error, .ds-247420 .btn-error { background: var(--color-danger, #dc2626) !important; color: #fff !important; border-color: var(--color-danger, #dc2626) !important; }
+.btn-error:hover, button.btn-error:hover, .ds-247420 .btn-error:hover { background: #b91c1c !important; border-color: #b91c1c !important; }
 .btn-danger-clean:focus-visible { outline: 2px solid var(--color-danger); outline-offset: 2px; }
 .btn-edit-clean { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: transparent; color: var(--color-info); border: 1px solid #bfdbfe; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; transition: all 0.15s ease; min-height: 36px; }
 .btn-edit-clean:hover { background: #eff6ff; }
@@ -768,6 +809,11 @@ button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible
 .main-nav-brand-link { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; flex-shrink: 0; }
 .main-nav-brand-text { color: #f8f9fa; font-size: 0.9rem; font-weight: 700; letter-spacing: 0; margin-left: 0.25rem; }
 .main-nav-actions { display: flex; align-items: center; gap: 0.75rem; margin-left: 1rem; padding-right: 1rem; flex-shrink: 0; }
+/* Shared nav icon-button (theme toggle, notification bell, hamburger): one rule
+   instead of duplicated inline style strings on each element. */
+.nav-icon-btn { background: none; border: none; color: var(--color-text-muted, #ced4da); cursor: pointer; padding: 6px; border-radius: 4px; display: flex; align-items: center; min-width: 32px; min-height: 32px; text-decoration: none; transition: color 0.15s, background 0.15s; }
+.nav-icon-btn:hover { color: var(--color-text, #fff); background: rgba(255,255,255,0.08); }
+.nav-icon-btn.nav-notif-bell { position: relative; }
 .nav-links-desktop { display: flex; align-items: center; gap: 1.25rem; flex-shrink: 0; padding: 0 0.75rem; }
 @media (max-width: 768px) { .nav-links-desktop { display: none; } }
 .nav-link { color: #adb5bd; font-size: 0.875rem; font-weight: 500; letter-spacing: 0; text-decoration: none; transition: color 0.15s; }
@@ -1180,6 +1226,9 @@ button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible
 .opacity-25 { opacity: 0.25; }
 .opacity-50 { opacity: 0.5; }
 .opacity-75 { opacity: 0.75; }
+/* read notification row: distinguish via muted bg instead of low-contrast opacity */
+tr.is-read { background: rgb(var(--base-200, 240 240 244) / 0.4); }
+tr.is-read td { color: rgb(var(--base-content, 30 30 35) / 0.7); }
 .opacity-100 { opacity: 1; }
 
 /* Object fit */
@@ -1357,6 +1406,9 @@ button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible
 .tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; }
 .tab-count { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 100px; font-size: 11px; font-weight: 600; padding: 1px 7px; color: var(--color-text-muted); }
 .tab-btn.active .tab-count { background: var(--color-primary); color: #fff; border-color: transparent; }
+/* Dark-mode --color-primary (#64b5f6) is light; white text on it is 2.2:1 (fails AA).
+   Use dark text on the active-tab count badge in dark theme (witnessed on /review). */
+[data-theme="dark"] .tab-btn.active .tab-count { color: #0b1220; }
 
 /* Form improvements */
 .form-field { margin-bottom: 1rem; }
@@ -1473,6 +1525,24 @@ button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible
   --panel-select: rgba(255,255,255,0.10);
   --panel-accent: #B8FF00;
   --panel-accent-fg: #0B0B09;
+  /* Manual dark toggle must drive the --color-* system too: the @media (prefers-color-scheme: dark)
+     block below only fires on OS preference, so without these the toggle left --color-text* dark
+     on a dark --color-bg (witnessed 1.4:1 date cells / breadcrumb-sep on /review). */
+  --color-primary: #64b5f6;
+  --color-primary-hover: #42a5f5;
+  --color-surface: #1a1a1a;
+  --color-bg: #0f172a;
+  --color-border: #334155;
+  --color-text: #f1f5f9;
+  --color-text-muted: #cbd5e1;
+  --color-text-light: #94a3b8;
+  --color-success: #4ade80;
+  --color-warning: #fbbf24;
+  --color-danger: #f87171;
+  --color-info: #60a5fa;
+  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3);
+  --shadow-md: 0 4px 6px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
+  --shadow-lg: 0 10px 15px rgba(0,0,0,0.6), 0 4px 6px rgba(0,0,0,0.4);
 }
 
 @media (prefers-color-scheme: dark) {

package/src/ui/test-page.js

@@ -4,7 +4,7 @@ export function generateTestPage() {
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>System Test | MOONLANDING</title>
+  <title>System Test | Thatcher</title>
   <style>
     body { font-family: monospace; padding: 2rem; background: #04141f; color: #ced4da; }
     h1 { color: #3b82f6; }
@@ -13,9 +13,9 @@ export function generateTestPage() {
   </style>
 </head>
 <body>
-  <h1>MOONLANDING System Test</h1>
-  <p class="check">✓ Server is running</p>
-  <p class="check">✓ Page handler is operational</p>
+  <h1>Thatcher System Test</h1>
+  <p class="check">[x] Server is running</p>
+  <p class="check">[x] Page handler is operational</p>
   <p class="info">Timestamp: ${new Date().toISOString()}</p>
   <p class="info">Environment: ${process.env.NODE_ENV || 'development'}</p>
 </body>

package/src/ui/widgets.js

@@ -1,5 +1,5 @@
 import { h } from '@/ui/webjsx.js'
-import { STAGE_COLORS, AVATAR_COLORS, AVATAR_SIZES, nameHash, getInitials } from '@/ui/render-helpers.js'
+import { STAGE_COLORS, AVATAR_COLORS, AVATAR_SIZES, nameHash, getInitials, esc } from '@/ui/render-helpers.js'
 
 export function linearProgress(value = 0, max = 100, label = '', variant = 'medium') {
   const pct = max > 0 ? Math.min(100, Math.round((value / max) * 100)) : 0
@@ -19,7 +19,7 @@ export function circularProgress(value = 0, max = 100, label = '') {
   const pct = max > 0 ? Math.min(100, Math.round((value / max) * 100)) : 0
   const color = pct < 30 ? '#ef4444' : pct < 70 ? '#f59e0b' : '#22c55e'
   const r = 40, circ = 2 * Math.PI * r, offset = circ - (pct / 100) * circ
-  const ariaLabel = label || 'Progress'
+  const ariaLabel = esc(label || 'Progress')
   return `<div class="circular-progress" style="width:100px;height:100px" role="progressbar" aria-valuenow="${pct}" aria-valuemin="0" aria-valuemax="100" aria-label="${ariaLabel}">
     <svg width="100" height="100" viewBox="0 0 100 100" aria-hidden="true">
       <circle cx="50" cy="50" r="${r}" fill="none" stroke="#e5e7eb" stroke-width="8"/>
@@ -28,7 +28,7 @@ export function circularProgress(value = 0, max = 100, label = '') {
     </svg>
     <div class="circular-progress-text" aria-hidden="true">
       <span class="circular-progress-pct">${pct}%</span>
-      ${label ? `<span class="circular-progress-label">${label}</span>` : ''}
+      ${label ? `<span class="circular-progress-label">${esc(label)}</span>` : ''}
     </div>
   </div>`
 }
@@ -46,10 +46,12 @@ export function engagementProgress(stage, stages = null) {
 
 export function emptyState(icon = '', title = '', message = '', actionHref = '', actionLabel = '') {
   const btn = actionHref && actionLabel ? h('a', { href: actionHref, className: 'btn btn-primary btn-sm' }, actionLabel) : ''
+  // icon is a trusted inline-SVG/markup fragment from the caller; title/message are
+  // text and must be escaped (webjsx h() does NOT escape string children).
   return h('div', { className: 'empty-state' },
-    h('div', { className: 'empty-state-icon' }, icon),
-    h('div', { className: 'empty-state-title' }, title),
-    h('div', { className: 'empty-state-msg' }, message),
+    h('div', { className: 'empty-state-icon', innerHTML: icon }),
+    h('div', { className: 'empty-state-title' }, esc(title)),
+    h('div', { className: 'empty-state-msg' }, esc(message)),
     btn
   )
 }
@@ -69,7 +71,8 @@ export function userAvatar(user, size = 'md', showStatus = false) {
   const color = AVATAR_COLORS[nameHash(name) % AVATAR_COLORS.length]
   const fontSize = Math.round(px * 0.4)
   const statusDot = showStatus ? `<span class="avatar-status avatar-status-${user?.status === 'active' || user?.online ? 'online' : 'offline'}" style="width:${Math.round(px * 0.3)}px;height:${Math.round(px * 0.3)}px"></span>` : ''
-  return `<span class="user-avatar user-avatar-${size}" style="width:${px}px;height:${px}px;background:${color};font-size:${fontSize}px" title="${name}" aria-label="${name}" role="img"><span aria-hidden="true">${initials}</span>${statusDot}</span>`
+  const safeName = esc(name)
+  return `<span class="user-avatar user-avatar-${size}" style="width:${px}px;height:${px}px;background:${color};font-size:${fontSize}px" title="${safeName}" aria-label="${safeName}" role="img"><span aria-hidden="true">${esc(initials)}</span>${statusDot}</span>`
 }
 
 export function teamAvatarGroup(users = [], maxShow = 3) {
@@ -82,12 +85,12 @@ export function teamAvatarGroup(users = [], maxShow = 3) {
 }
 
 export function infoBubble(text, position = 'top') {
-  return `<span class="info-bubble info-bubble-${position}" data-tooltip="${text.replace(/"/g, '&quot;')}"><svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5"/><text x="8" y="12" text-anchor="middle" fill="currentColor" font-size="10" font-weight="600">i</text></svg></span>`
+  return `<span class="info-bubble info-bubble-${position}" data-tooltip="${esc(text)}"><svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5"/><text x="8" y="12" text-anchor="middle" fill="currentColor" font-size="10" font-weight="600">i</text></svg></span>`
 }
 
 export function sortableList(items = [], containerId = 'sortable') {
   const lis = items.map((item, i) =>
-    `<li class="sortable-item" draggable="true" data-index="${i}"><span class="sortable-handle"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/></svg></span><span>${typeof item === 'string' ? item : item.label || item.name || ''}</span></li>`
+    `<li class="sortable-item" draggable="true" data-index="${i}"><span class="sortable-handle"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/></svg></span><span>${esc(typeof item === 'string' ? item : item.label || item.name || '')}</span></li>`
   ).join('')
   const script = `(function(){const c=document.getElementById('${containerId}');let dragged=null;c.addEventListener('dragstart',e=>{dragged=e.target.closest('.sortable-item');e.dataTransfer.effectAllowed='move'});c.addEventListener('dragover',e=>{e.preventDefault();const t=e.target.closest('.sortable-item');if(t&&t!==dragged)t.classList.add('drag-over')});c.addEventListener('dragleave',e=>{const t=e.target.closest('.sortable-item');if(t)t.classList.remove('drag-over')});c.addEventListener('drop',e=>{e.preventDefault();const t=e.target.closest('.sortable-item');if(t&&t!==dragged){t.classList.remove('drag-over');c.insertBefore(dragged,t.nextSibling);const order=[...c.querySelectorAll('.sortable-item')].map(el=>+el.dataset.index);c.dispatchEvent(new CustomEvent('sortable-reorder',{detail:{order}}))}});})();`
   return `<ul id="${containerId}" class="sortable-list">${lis}</ul><script>${script}</script>`
@@ -99,7 +102,7 @@ export function responseChoiceBox(name, options = [], selected = null, type = 'r
     const val = typeof opt === 'string' ? opt : opt.value || opt
     const lbl = typeof opt === 'string' ? opt : opt.label || opt.value || opt
     const checked = sel.includes(val) ? 'checked' : ''
-    return `<label class="choice-option"><input type="${type}" name="${name}" value="${val}" ${checked}/><span class="choice-label">${lbl}</span></label>`
+    return `<label class="choice-option"><input type="${esc(type)}" name="${esc(name)}" value="${esc(val)}" ${checked}/><span class="choice-label">${esc(lbl)}</span></label>`
   }).join('')
   return `<div class="choice-group">${items}</div>`
 }
@@ -112,8 +115,9 @@ export function responseAttachment(file = {}) {
   const isImg = ['png','jpg','jpeg','gif','webp','svg'].includes(ext)
   const isPdf = ext === 'pdf'
   const icon = isImg ? `<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"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg>` : isPdf ? `<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="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>` : `<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>`
-  const preview = isImg ? `<img src="${href}" alt="${name}" class="attachment-preview"/>` : isPdf ? `<iframe src="${href}" class="attachment-preview" style="width:100%;height:200px;border:none"></iframe>` : ''
-  return `<div class="attachment-card"><span class="attachment-icon">${icon}</span><div class="attachment-info"><div class="attachment-name">${name}</div>${size ? `<div class="attachment-size">${size}</div>` : ''}${preview}</div><a href="${href}" download class="btn btn-ghost btn-xs">Download</a></div>`
+  const safeHref = esc(href), safeName = esc(name), safeSize = esc(size)
+  const preview = isImg ? `<img src="${safeHref}" alt="${safeName}" class="attachment-preview"/>` : isPdf ? `<iframe src="${safeHref}" class="attachment-preview" style="width:100%;height:200px;border:none"></iframe>` : ''
+  return `<div class="attachment-card"><span class="attachment-icon">${icon}</span><div class="attachment-info"><div class="attachment-name">${safeName}</div>${size ? `<div class="attachment-size">${safeSize}</div>` : ''}${preview}</div><a href="${safeHref}" download class="btn btn-ghost btn-xs">Download</a></div>`
 }
 
 export function accordion(items) {
@@ -121,8 +125,9 @@ export function accordion(items) {
   return h('div', { className: 'accordion' },
     items.map(item =>
       h('details', { className: 'accordion-item' },
-        h('summary', { className: 'accordion-summary' }, item.title),
-        h('div', { className: 'accordion-content' }, item.content)
+        h('summary', { className: 'accordion-summary' }, esc(item.title)),
+        // content is a caller-provided HTML fragment by contract.
+        h('div', { className: 'accordion-content', innerHTML: item.content })
       )
     ).join('')
   )
@@ -130,7 +135,7 @@ export function accordion(items) {
 
 export function divider(label) {
   if (!label) return '<hr class="divider"/>'
-  return `<div class="divider-labeled"><hr class="divider-line"/><span class="divider-text">${label}</span><hr class="divider-line"/></div>`
+  return `<div class="divider-labeled"><hr class="divider-line"/><span class="divider-text">${esc(label)}</span><hr class="divider-line"/></div>`
 }
 
 export function responsiveClass(breakpoint) {