thatcher 1.0.7 → 1.0.34

package/src/ui/page-handler.js

@@ -1,8 +1,7 @@
 import { getUser, setCurrentRequest } from '@/engine.server.js';
 import { hasGoogleAuth } from '@/config/env.js';
 import { getSpec } from '@/config/spec-helpers.js';
-import { list, get } from '@/lib/query-engine.js';
-import { getDatabase } from '@/lib/database-core.js';
+import { list, get } from '@/lib/busybase-store.js';
 import { renderLogin, renderDashboard, renderEntityList, renderEntityDetail, renderEntityForm, renderAccessDenied, renderPasswordReset, renderPasswordResetConfirm, REDIRECT } from '@/ui/renderer.js';
 import { renderClientDashboard, renderClientList } from '@/ui/client-renderer.js';
 import { canList, canView, canCreate, canEdit, isPartner, isClerk, isClientUser, canClientAccessEntity } from '@/ui/permissions-ui.js';
@@ -25,25 +24,32 @@ function reqUrl(req) {
 
 async function handleEngagementDetail(user, engId) {
   if (!canView(user, 'engagement')) return renderAccessDenied(user, 'engagement', 'view');
-  const db = getDatabase();
-  const engagement = get('engagement', engId) || db.prepare('SELECT * FROM engagement WHERE id=?').get(engId);
+  const engagement = await get('engagement', engId);
   if (!engagement) return null;
-  let client = null; try { client = engagement.client_id ? get('client', engagement.client_id) : null; } catch {}
-  let rfis = []; try { rfis = db.prepare('SELECT * FROM rfis WHERE engagement_id=?').all(engId); } catch { try { rfis = list('rfi', {}).filter(r => r.engagement_id === engId); } catch {} }
-  let sections = []; try { sections = db.prepare('SELECT * FROM rfi_section WHERE engagement_id=? ORDER BY sort_order ASC').all(engId); } catch {}
-  let team = null; try { team = engagement.team_id ? get('team', engagement.team_id) : null; } catch {}
+  let client = null; try { client = engagement.client_id ? await get('client', engagement.client_id) : null; } catch {}
+  let rfis = []; try { rfis = await list('rfi', { engagement_id: engId }); } catch {}
+  let sections = [];
+  try {
+    sections = await list('rfi_section', { engagement_id: engId }, { sort: { field: 'sort_order', dir: 'ASC' } });
+  } catch {}
+  let team = null; try { team = engagement.team_id ? await get('team', engagement.team_id) : null; } catch {}
   let assignedUsers = [];
-  try { const ids = JSON.parse(engagement.users || '[]'); const um = Object.fromEntries(db.prepare('SELECT id, name, email FROM users').all().map(u => [u.id, u.name || u.email])); assignedUsers = ids.map(id => ({ id, name: um[id] || null })).filter(u => u.name); } catch {}
+  try {
+    const ids = JSON.parse(engagement.users || '[]');
+    const users = await list('user', {});
+    const um = Object.fromEntries(users.map(u => [u.id, u.name || u.email]));
+    assignedUsers = ids.map(id => ({ id, name: um[id] || null })).filter(u => u.name);
+  } catch {}
   const { renderEngagementDetail } = await lazyRenderer('engagement-detail-renderer.js');
   return renderEngagementDetail(user, { ...engagement, team_name: team?.name || engagement.team_name, client_name: client?.name || engagement.client_name, assigned_users_resolved: assignedUsers }, client, rfis, sections);
 }
 async function handleEngagementList(user, req) {
   if (!canList(user, 'engagement')) return renderAccessDenied(user, 'engagement', 'list');
-  let engagements = list('engagement', {});
-  const clientMap = Object.fromEntries(list('client', {}).map(c => [c.id, c.name]));
+  let engagements = await list('engagement', {});
+  const clientMap = Object.fromEntries((await list('client', {})).map(c => [c.id, c.name]));
   engagements = engagements.map(e => ({ ...e, client_name: clientMap[e.client_id] || e.client_name || '-' }));
   const spec = getSpec('engagement'); if (spec) engagements = resolveRefFields(engagements, spec);
-  let teams = []; try { teams = list('team', {}); } catch {}
+  let teams = []; try { teams = await list('team', {}); } catch {}
   const teamMap = Object.fromEntries(teams.map(t => [t.id, t.name]));
   engagements = engagements.map(e => ({ ...e, team_name: teamMap[e.team_id] || e.team_name || '-' }));
   const years = [...new Set(engagements.map(e => { if (!e.year) return null; const m = String(e.year).match(/\b(20\d{2}|19\d{2})\b/); return m ? m[1] : null; }).filter(Boolean))].sort().reverse();
@@ -53,10 +59,10 @@ async function handleEngagementList(user, req) {
 async function handleSearch(user, req) {
   const url = reqUrl(req);
   const q = url.searchParams.get('q') || '', entityFilter = url.searchParams.get('entity') || '', statusFilter = url.searchParams.get('status') || '';
-  let teams = []; try { teams = list('team', {}); } catch {}
+  let teams = []; try { teams = await list('team', {}); } catch {}
   const results = {};
   for (const eName of (entityFilter ? [entityFilter] : ['engagement', 'client', 'rfi', 'review'])) {
-    try { let items = list(eName, {}); if (q) items = items.filter(i => JSON.stringify(i).toLowerCase().includes(q.toLowerCase())); if (statusFilter) items = items.filter(i => i.status === statusFilter); const spec = getSpec(eName); if (spec) items = resolveRefFields(items, spec); results[eName] = items.slice(0, 50); } catch {}
+    try { let items = await list(eName, {}); if (q) items = items.filter(i => JSON.stringify(i).toLowerCase().includes(q.toLowerCase())); if (statusFilter) items = items.filter(i => i.status === statusFilter); const spec = getSpec(eName); if (spec) items = resolveRefFields(items, spec); results[eName] = items.slice(0, 50); } catch {}
   }
   return renderAdvancedSearch(user, results, { teams, stages: ['info_gathering', 'commencement', 'team_execution', 'partner_review', 'finalization', 'closeout'] });
 }
@@ -67,10 +73,10 @@ async function handleGenericEntityView(user, entityName, id) {
     if (!canCreate(user, entityName)) return renderAccessDenied(user, entityName, 'create');
     const resolvedSpec = resolveEnumOptions(spec);
     const { renderEntityForm: lazyEntityForm } = await lazyRenderer('entity-renderer.js');
-    return lazyEntityForm(entityName, null, resolvedSpec, user, true, getRefOptions(resolvedSpec));
+    return lazyEntityForm(entityName, null, resolvedSpec, user, true, await getRefOptions(resolvedSpec));
   }
   if (!canView(user, entityName)) return renderAccessDenied(user, entityName, 'view');
-  const item = get(entityName, id); if (!item) return null;
+  const item = await get(entityName, id); if (!item) return null;
   if (item.team_id && user.team_id && item.team_id !== user.team_id && !isPartner(user)) return renderAccessDenied(user, entityName, 'view');
   if (isClientUser(user) && user.client_id && item.client_id && item.client_id !== user.client_id) return renderAccessDenied(user, entityName, 'view');
   const [resolvedItem] = resolveRefFields([item], spec);
@@ -79,14 +85,14 @@ async function handleGenericEntityView(user, entityName, id) {
 }
 async function handleClientSubRoute(user, clientId, subRoute) {
   if (!canView(user, 'client')) return renderAccessDenied(user, 'client', 'view');
-  const client = get('client', clientId); if (!client) return null;
+  const client = await get('client', clientId); if (!client) return null;
   if (isClientUser(user) && user.client_id && user.client_id !== clientId) return renderAccessDenied(user, 'client', 'view');
-  if (subRoute === 'dashboard' || subRoute === 'users') return renderClientDashboard(user, client, getClientDashboardStats(clientId));
+  if (subRoute === 'dashboard' || subRoute === 'users') return renderClientDashboard(user, client, await getClientDashboardStats(clientId));
   if (subRoute === 'progress') {
-    let engagements = []; try { engagements = list('engagement', {}).filter(e => e.client_id === clientId); } catch {}
+    let engagements = []; try { engagements = (await list('engagement', {})).filter(e => e.client_id === clientId); } catch {}
     const spec = getSpec('engagement'); if (spec) engagements = resolveRefFields(engagements, spec);
     let rfiStats = { total: 0, responded: 0, overdue: 0 };
-    try { const allRfis = list('rfi', {}).filter(r => engagements.some(e => e.id === r.engagement_id)); const now = Math.floor(Date.now() / 1000); rfiStats = { total: allRfis.length, responded: allRfis.filter(r => r.status === 'responded' || r.status === 'completed').length, overdue: allRfis.filter(r => r.due_date && r.due_date < now && r.status !== 'closed').length }; } catch {}
+    try { const allRfis = (await list('rfi', {})).filter(r => engagements.some(e => e.id === r.engagement_id)); const now = Math.floor(Date.now() / 1000); rfiStats = { total: allRfis.length, responded: allRfis.filter(r => r.status === 'responded' || r.status === 'completed').length, overdue: allRfis.filter(r => r.due_date && r.due_date < now && r.status !== 'closed').length }; } catch {}
     return renderClientProgress(user, client, engagements, rfiStats);
   }
   return null;
@@ -94,11 +100,11 @@ async function handleClientSubRoute(user, clientId, subRoute) {
 async function handleGenericEntityEdit(user, entityName, id) {
   const spec = getSpec(entityName); if (!spec) return null;
   if (!canEdit(user, entityName)) return renderAccessDenied(user, entityName, 'edit');
-  const item = get(entityName, id); if (!item) return null;
+  const item = await get(entityName, id); if (!item) return null;
   if (item.team_id && user.team_id && item.team_id !== user.team_id && !isPartner(user)) return renderAccessDenied(user, entityName, 'edit');
   const resolvedSpec = resolveEnumOptions(spec);
   const { renderEntityForm: lazyEntityForm } = await lazyRenderer('entity-renderer.js');
-  return lazyEntityForm(entityName, item, resolvedSpec, user, false, getRefOptions(resolvedSpec));
+  return lazyEntityForm(entityName, item, resolvedSpec, user, false, await getRefOptions(resolvedSpec));
 }
 export async function handlePage(pathname, req, res) {
   setCurrentRequest(req);
@@ -119,18 +125,31 @@ export async function handlePage(pathname, req, res) {
   const user = await getUser();
   if (!user) { res.writeHead(302, { Location: '/login' }); res.end(); return REDIRECT; }
   if (normalized === '/unauthorized') return renderAccessDenied(user, 'system', 'access');
-  if (normalized === '/notifications') { let notifs=[]; try{notifs=getDatabase().prepare('SELECT * FROM notification WHERE user_id=? ORDER BY created_at DESC LIMIT 100').all(user.id)}catch{} const{renderNotificationsPage}=await lazyRenderer('notifications-renderer.js'); return renderNotificationsPage(user,notifs); }
+  if (normalized === '/notifications') { let notifs=[]; try{notifs=await list('notification',{user_id:user.id},{sort:{field:'created_at',dir:'DESC'},limit:100})}catch{} const{renderNotificationsPage}=await lazyRenderer('notifications-renderer.js'); return renderNotificationsPage(user,notifs); }
   if (normalized === '/' || normalized === '/dashboard') return renderDashboard(user, await getDashboardStats(user));
   if (normalized.startsWith('/admin/') || normalized === '/admin/jobs') return handleAdminPage(normalized, segments, user);
   if (segments[0] === 'client' && segments.length === 3 && ['dashboard', 'users', 'progress'].includes(segments[2])) return handleClientSubRoute(user, segments[1], segments[2]);
   if (isClerk(user) && segments.length >= 1 && ['user', 'team'].includes(segments[0])) return renderAccessDenied(user, segments[0], 'list');
   if (normalized === '/mwr' || normalized === '/mwr/home') {
     if (!canList(user, 'review')) return renderAccessDenied(user, 'review', 'list');
-    const db = getDatabase();
     let myReviews = [], sharedReviews = [], recentActivity = [];
-    try { myReviews = db.prepare('SELECT * FROM review WHERE created_by=? OR assigned_to=? ORDER BY updated_at DESC LIMIT 100').all(user.id, user.id); } catch { try { myReviews = list('review', {}).filter(r => r.created_by === user.id || r.assigned_to === user.id); } catch {} }
-    try { sharedReviews = db.prepare('SELECT r.* FROM review r JOIN collaborator c ON c.review_id=r.id WHERE c.user_id=? ORDER BY r.updated_at DESC LIMIT 100').all(user.id); } catch {}
-    try { recentActivity = db.prepare("SELECT * FROM audit_logs WHERE entity_type='review' ORDER BY timestamp DESC LIMIT 50").all(); } catch {}
+    // OR across two columns: busybase eq() is single-column, so fetch + filter in JS.
+    try {
+      const reviews = await list('review', {}, { sort: { field: 'updated_at', dir: 'DESC' } });
+      myReviews = reviews.filter(r => r.created_by === user.id || r.assigned_to === user.id).slice(0, 100);
+    } catch {}
+    // Old JOIN collaborator -> two-step: collaborator rows for this user, then their reviews.
+    try {
+      const collabs = await list('collaborator', { user_id: user.id });
+      const ids = new Set(collabs.map(c => c.review_id));
+      if (ids.size) {
+        const reviews = await list('review', {}, { sort: { field: 'updated_at', dir: 'DESC' } });
+        sharedReviews = reviews.filter(r => ids.has(r.id)).slice(0, 100);
+      }
+    } catch {}
+    try {
+      recentActivity = (await list('audit_logs', { entity_type: 'review' }, { sort: { field: 'created_at', dir: 'DESC' } })).slice(0, 50);
+    } catch {}
     const all = [...myReviews, ...sharedReviews];
     const stats = { myReviews, sharedReviews, recentActivity, totalReviews: all.length, activeReviews: all.filter(r => (r.status||'open') !== 'archived' && (r.status||'open') !== 'completed' && (r.status||'open') !== 'closed').length, flaggedReviews: all.filter(r => r.flagged).length, overdueReviews: 0 };
     const { renderMwrHome } = await lazyRenderer('review-mwr-renderer.js');
@@ -151,18 +170,16 @@ export async function handlePage(pathname, req, res) {
     return renderFlexUpView(user);
   }
   if (normalized === '/ml-console') {
-    const db = getDatabase();
     let candidates = []; let reviewMap = {};
     try {
-      candidates = db.prepare(`SELECT * FROM highlight
-        WHERE (comment IS NOT NULL AND comment != '')
-        AND (comment LIKE '%?' OR length(comment) > 40)
-        ORDER BY created_at DESC LIMIT 50`).all();
+      // Old: highlights with a non-trivial comment (LIKE '%?' OR length>40), newest 50.
+      const all = await list('highlight', {}, { sort: { field: 'created_at', dir: 'DESC' } });
+      candidates = all.filter(c => c.comment && (c.comment.includes('?') || c.comment.length > 40)).slice(0, 50);
       const revIds = [...new Set(candidates.map((c) => c.review_id))];
       if (revIds.length) {
-        const ph = revIds.map(() => '?').join(',');
-        const rows = db.prepare(`SELECT id, name FROM review WHERE id IN (${ph})`).all(...revIds);
-        reviewMap = Object.fromEntries(rows.map((r) => [r.id, r.name || '-']));
+        const reviews = await list('review', {});
+        const byId = new Map(reviews.map(r => [r.id, r.name || '-']));
+        reviewMap = Object.fromEntries(revIds.map(id => [id, byId.get(id) || '-']));
       }
     } catch {}
     const { renderMlConsole } = await lazyRenderer('ml-console-renderer.js');
@@ -171,19 +188,19 @@ export async function handlePage(pathname, req, res) {
   if (segments.length === 2 && (segments[0] === 'engagements' || segments[0] === 'engagement') && segments[1] !== 'new') return handleEngagementDetail(user, segments[1]);
   if (segments[0] === 'engagement' && segments.length === 3 && segments[2] === 'letter') {
     if (!canView(user, 'engagement')) return renderAccessDenied(user, 'engagement', 'view');
-    const engagement = get('engagement', segments[1]); if (!engagement) return null;
+    const engagement = await get('engagement', segments[1]); if (!engagement) return null;
     return renderLetterWorkflow(user, engagement);
   }
   if (segments[0] === 'engagement' && segments.length === 3 && segments[2] === 'report') {
     if (!canView(user, 'engagement')) return renderAccessDenied(user, 'engagement', 'view');
-    const engId = segments[1]; const engagement = get('engagement', engId); if (!engagement) return null;
-    const db = getDatabase(); let client=null,team=null,rfis=[],reviews=[],highlights=[],activity=[];
-    try{client=engagement.client_id?get('client',engagement.client_id):null}catch{}
-    try{team=engagement.team_id?get('team',engagement.team_id):null}catch{}
-    try{rfis=db.prepare('SELECT * FROM rfi WHERE engagement_id=? ORDER BY created_at DESC').all(engId)}catch{}
-    try{reviews=db.prepare('SELECT * FROM review WHERE engagement_id=? ORDER BY created_at DESC').all(engId)}catch{}
-    try{const rids=reviews.map(r=>r.id);if(rids.length){const ph=rids.map(()=>'?').join(',');highlights=db.prepare(`SELECT * FROM highlight WHERE review_id IN (${ph})`).all(...rids)}}catch{}
-    try{activity=db.prepare("SELECT * FROM audit_logs WHERE entity_type='engagement' AND entity_id=? ORDER BY timestamp DESC LIMIT 20").all(engId)}catch{}
+    const engId = segments[1]; const engagement = await get('engagement', engId); if (!engagement) return null;
+    let client=null,team=null,rfis=[],reviews=[],highlights=[],activity=[];
+    try{client=engagement.client_id?await get('client',engagement.client_id):null}catch{}
+    try{team=engagement.team_id?await get('team',engagement.team_id):null}catch{}
+    try{rfis=await list('rfi',{engagement_id:engId},{sort:{field:'created_at',dir:'DESC'}})}catch{}
+    try{reviews=await list('review',{engagement_id:engId},{sort:{field:'created_at',dir:'DESC'}})}catch{}
+    try{const rids=new Set(reviews.map(r=>r.id));if(rids.size){const allHl=await list('highlight',{});highlights=allHl.filter(h=>rids.has(h.review_id))}}catch{}
+    try{activity=(await list('audit_logs',{entity_type:'engagement',entity_id:engId},{sort:{field:'created_at',dir:'DESC'}})).slice(0,20)}catch{}
     const{renderFlexupReport}=await lazyRenderer('flexup-report-renderer.js');
     return renderFlexupReport(user,engagement,client,rfis,reviews,highlights,activity,team);
   }
@@ -192,7 +209,7 @@ export async function handlePage(pathname, req, res) {
   if (segments.length === 1 && segments[0] === 'rfi') return handleRfiList(user);
   if (segments.length === 1 && segments[0] === 'client') {
     if (!canList(user, 'client')) return renderAccessDenied(user, 'client', 'list');
-    let clients = list('client', {});
+    let clients = await list('client', {});
     if (isClientUser(user) && user.client_id) clients = clients.filter(c => c.id === user.client_id);
     return renderClientList(user, clients);
   }
@@ -201,7 +218,7 @@ export async function handlePage(pathname, req, res) {
     const spec = getSpec(entityName); if (!spec) return null;
     if (isClientUser(user) && !canClientAccessEntity(user, entityName)) return renderAccessDenied(user, entityName, 'list');
     if (!canList(user, entityName)) return renderAccessDenied(user, entityName, 'list');
-    let items = list(entityName, {});
+    let items = await list(entityName, {});
     if (isClientUser(user) && user.client_id) items = items.filter(item => { if (item.client_id) return item.client_id === user.client_id; if (item.assigned_to) return item.assigned_to === user.id; return true; });
     const { renderEntityList: lazyEntityList } = await lazyRenderer('entity-renderer.js');
     return lazyEntityList(entityName, resolveRefFields(items, spec), spec, user);
@@ -209,8 +226,8 @@ export async function handlePage(pathname, req, res) {
   if (segments.length === 2 && segments[0] === 'client' && segments[1] !== 'new') {
     if (!canView(user, 'client')) return renderAccessDenied(user, 'client', 'view');
     if (isClientUser(user) && user.client_id && user.client_id !== segments[1]) return renderAccessDenied(user, 'client', 'view');
-    const client = get('client', segments[1]); if (!client) return null;
-    return renderClientDashboard(user, client, getClientDashboardStats(segments[1]));
+    const client = await get('client', segments[1]); if (!client) return null;
+    return renderClientDashboard(user, client, await getClientDashboardStats(segments[1]));
   }
   if (segments.length === 2) return handleGenericEntityView(user, segments[0], segments[1]);
   if (segments.length === 3 && segments[2] === 'edit') return handleGenericEntityEdit(user, segments[0], segments[1]);

package/src/ui/picker-dialogs.js

@@ -3,22 +3,27 @@ import { STAGE_COLORS, TOAST_SCRIPT } from '@/ui/render-helpers.js'
 
 const DIALOG_COLORS = ['#B0B0B0','#44BBA4','#FF4141','#7F7EFF','#3b82f6','#f59e0b','#ec4899','#8b5cf6','#ef4444','#22c55e','#06b6d4','#f97316','#84cc16','#e11d48','#14b8a6','#6366f1']
 
+// Inline client-side HTML-escape for innerHTML sinks (user name/email/team name are user-sourced).
+const PD_ESC = `function pdEsc(s){return String(s==null?'':s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;')}`;
+
 export function colorPickerDialog(id = 'cpd', selected = '#B0B0B0', onSelect = '') {
   const swatches = DIALOG_COLORS.map(c =>
-    `<div class="cpd-swatch${c === selected ? ' cpd-selected' : ''}" style="background:${c}" data-color="${c}" role="option" tabindex="0" aria-label="Color ${c}" aria-selected="${c === selected}" data-action="cpdSelect" data-args='["${id}","${c}",${onSelect ? "true" : "false"}]' onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();cpdSelect('${id}','${c}',${onSelect ? 'true' : 'false'})}"></div>`
+    `<div class="cpd-swatch${c === selected ? ' cpd-selected' : ''}" style="background:${c}" data-color="${c}" role="option" tabindex="0" aria-label="Color ${c}" aria-selected="${c === selected}"${c === selected ? ' aria-current="true"' : ''} data-action="cpdSelect" data-args='["${id}","${c}",${onSelect ? "true" : "false"}]'></div>`
   ).join('')
-  return `<div id="${id}-dialog" class="dialog-overlay" style="display:none" data-dialog-close-overlay="true" onkeydown="if(event.key==='Escape')this.style.display='none'" role="dialog" aria-modal="true" aria-labelledby="${id}-dialog-title" aria-hidden="true">
-    <div class="dialog-panel" style="max-width:360px">
+  return `<div id="${id}-dialog" class="dialog-overlay" style="display:none" data-dialog-close="${id}-dialog" role="dialog" aria-modal="true" aria-labelledby="${id}-dialog-title" aria-hidden="true">
+    <div class="dialog-panel" style="max-width:min(360px,90vw)">
       <div class="dialog-header"><span class="dialog-title" id="${id}-dialog-title">Choose Color</span><button class="dialog-close" data-dialog-close="${id}-dialog" aria-label="Close dialog">&times;</button></div>
       <div class="dialog-body"><div class="color-picker-grid" role="listbox" aria-label="Color options">${swatches}</div>
-        <div style="margin-top:0.75rem;display:flex;align-items:center;gap:0.75rem"><label class="text-sm text-gray-500" for="${id}-custom">Custom:</label><input type="color" id="${id}-custom" value="${selected}" onchange="cpdSelect('${id}',this.value,true)" aria-label="Custom color picker" style="width:40px;height:32px;border:none;cursor:pointer"/><span id="${id}-val" class="text-sm font-medium" aria-live="polite">${selected}</span></div>
+        <div style="margin-top:0.75rem;display:flex;align-items:center;gap:0.75rem"><label class="text-sm text-gray-500" for="${id}-custom">Custom:</label><input type="color" id="${id}-custom" value="${selected}" onchange="cpdSelect('${id}',this.value,true)" aria-label="Custom color picker" class="focus-visible-ring" style="width:44px;height:44px;min-width:44px;min-height:44px;border:none;cursor:pointer"/><span id="${id}-val" class="text-sm font-medium" aria-live="polite">${selected}</span></div>
       </div>
       <div class="dialog-footer"><button class="btn btn-ghost btn-sm" data-dialog-close="${id}-dialog">Cancel</button><button class="btn btn-primary btn-sm" data-action="cpdConfirm" data-args='["${id}"]'>Select</button></div>
     </div></div>
   <script>window._cpd=window._cpd||{};window._cpd['${id}']='${selected}';
-  window.cpdSelect=function(id,c){window._cpd[id]=c;document.getElementById(id+'-val').textContent=c;document.getElementById(id+'-custom').value=c;document.querySelectorAll('#'+id+'-dialog .cpd-swatch').forEach(function(el){el.classList.toggle('cpd-selected',el.dataset.color===c)})};
+  window.cpdSelect=function(id,c){window._cpd[id]=c;document.getElementById(id+'-val').textContent=c;document.getElementById(id+'-custom').value=c;document.querySelectorAll('#'+id+'-dialog .cpd-swatch').forEach(function(el){var sel=el.dataset.color===c;el.classList.toggle('cpd-selected',sel);el.setAttribute('aria-selected',sel?'true':'false');if(sel)el.setAttribute('aria-current','true');else el.removeAttribute('aria-current')})};
   window.cpdConfirm=function(id){var c=window._cpd[id];document.getElementById(id+'-dialog').style.display='none';if(window._cpdCallback)window._cpdCallback(c)};
-  window.showColorPicker=function(id,current,cb){window._cpdCallback=cb;if(current)cpdSelect(id,current);document.getElementById(id+'-dialog').style.display='flex'};</script>`
+  window.showColorPicker=function(id,current,cb){window._cpdCallback=cb;if(current)cpdSelect(id,current);document.getElementById(id+'-dialog').style.display='flex'};
+  window.cpdKeydown=function(id,e){var sw=Array.prototype.slice.call(document.querySelectorAll('#'+id+'-dialog .cpd-swatch'));if(!sw.length)return;var cur=sw.indexOf(document.activeElement);if(cur<0)cur=0;var next=cur;var k=e.key;if(k==='ArrowRight'||k==='ArrowDown')next=Math.min(sw.length-1,cur+1);else if(k==='ArrowLeft'||k==='ArrowUp')next=Math.max(0,cur-1);else if(k==='Home')next=0;else if(k==='End')next=sw.length-1;else return;e.preventDefault();sw[next].focus()};
+  document.querySelectorAll('#'+'${id}'+'-dialog .cpd-swatch').forEach(function(el){el.addEventListener('keydown',function(e){window.cpdKeydown('${id}',e)})});</script>`
 }
 
 export function dateChoiceDialog(id = 'dcd') {
@@ -28,8 +33,8 @@ export function dateChoiceDialog(id = 'dcd') {
     { label: '+3 Months', days: 90 }, { label: 'End of Month', days: 'eom' }, { label: 'End of Quarter', days: 'eoq' },
   ]
   const presetBtns = presets.map(p => `<button class="date-preset-btn" data-action="dcdPreset" data-args='["${id}",${typeof p.days === 'number' ? p.days : '"' + p.days + '"'}]'>${p.label}</button>`).join('')
-  return `<div id="${id}-dialog" class="dialog-overlay" style="display:none" data-dialog-close-overlay="true" onkeydown="if(event.key==='Escape')this.style.display='none'" role="dialog" aria-modal="true" aria-labelledby="${id}-dialog-title" aria-hidden="true">
-    <div class="dialog-panel" style="max-width:380px">
+  return `<div id="${id}-dialog" class="dialog-overlay" style="display:none" data-dialog-close="${id}-dialog" role="dialog" aria-modal="true" aria-labelledby="${id}-dialog-title" aria-hidden="true">
+    <div class="dialog-panel" style="max-width:min(380px,90vw)">
       <div class="dialog-header"><span class="dialog-title" id="${id}-dialog-title">Choose Date</span><button class="dialog-close" data-dialog-close="${id}-dialog" aria-label="Close dialog">&times;</button></div>
       <div class="dialog-body">
         <div class="modal-form-group"><label for="${id}-input">Date</label><input type="date"  id="${id}-input" class="input input-bordered w-full"/></div>
@@ -45,7 +50,7 @@ export function dateChoiceDialog(id = 'dcd') {
 
 export function stageTransitionDialog(stages = null) {
   const stageKeys = stages || Object.keys(STAGE_COLORS)
-  return `<div id="stage-trans-dialog" class="dialog-overlay" style="display:none" data-dialog-close-overlay="true" onkeydown="if(event.key==='Escape')this.style.display='none'" role="dialog" aria-modal="true" aria-labelledby="stage-trans-dialog-title" aria-hidden="true">
+  return `<div id="stage-trans-dialog" class="dialog-overlay" style="display:none" data-dialog-close="stage-trans-dialog" role="dialog" aria-modal="true" aria-labelledby="stage-trans-dialog-title" aria-hidden="true">
     <div class="dialog-panel">
       <div class="dialog-header"><span class="dialog-title" id="stage-trans-dialog-title">Transition Stage</span><button class="dialog-close" data-dialog-close="stage-trans-dialog" aria-label="Close dialog">&times;</button></div>
       <div class="dialog-body">
@@ -63,19 +68,20 @@ export function stageTransitionDialog(stages = null) {
 }
 
 export function teamAssignmentDialog(id = 'tad') {
-  return `<div id="${id}-dialog" class="dialog-overlay" style="display:none" data-dialog-close-overlay="true" onkeydown="if(event.key==='Escape')this.style.display='none'" role="dialog" aria-modal="true" aria-labelledby="${id}-dialog-title" aria-hidden="true">
+  return `<div id="${id}-dialog" class="dialog-overlay" style="display:none" data-dialog-close="${id}-dialog" role="dialog" aria-modal="true" aria-labelledby="${id}-dialog-title" aria-hidden="true">
     <div class="dialog-panel">
       <div class="dialog-header"><span class="dialog-title" id="${id}-dialog-title">Assign Team Members</span><button class="dialog-close" data-dialog-close="${id}-dialog" aria-label="Close dialog">&times;</button></div>
       <div class="dialog-body">
         <input type="text" id="${id}-search" class="tad-search" placeholder="Search by name or email..." aria-label="Search team members" oninput="tadFilter('${id}')"/>
-        <div id="${id}-list" class="tad-list"></div>
+        <div id="${id}-list" class="tad-list" role="region" aria-live="polite" aria-label="Team member results"></div>
       </div>
       <div class="dialog-footer"><button class="btn btn-ghost btn-sm" data-dialog-close="${id}-dialog">Cancel</button><button class="btn btn-primary btn-sm" data-action="tadConfirm" data-args='["${id}"]'>Assign</button></div>
     </div></div>
   <script>${TOAST_SCRIPT}
+  ${PD_ESC}
   window._tad=window._tad||{};
   window.showTeamAssignment=function(id,users,selected,cb){window._tad[id]={users:users,selected:new Set(selected||[]),cb:cb};document.getElementById(id+'-dialog').style.display='flex';tadRender(id)};
-  function tadRender(id){var d=window._tad[id];var c=document.getElementById(id+'-list');c.innerHTML='';d.users.forEach(function(u){var row=document.createElement('div');row.className='tad-row';row.dataset.name=(u.name||'').toLowerCase();row.dataset.email=(u.email||'').toLowerCase();var checked=d.selected.has(u.id)?'checked':'';row.innerHTML='<input type="checkbox" '+checked+' onchange="tadToggle(\\''+id+'\\',\\''+u.id+'\\') " aria-label="Select '+(u.name||'Unknown').replace(/"/g,'&quot;')+'">'+'<div><div class="tad-name">'+(u.name||'Unknown')+'</div><div class="tad-email">'+(u.email||'')+'</div></div>';c.appendChild(row)})}
+  function tadRender(id){var d=window._tad[id];var c=document.getElementById(id+'-list');c.innerHTML='';d.users.forEach(function(u){var row=document.createElement('div');row.className='tad-row';row.dataset.name=(u.name||'').toLowerCase();row.dataset.email=(u.email||'').toLowerCase();var checked=d.selected.has(u.id)?'checked':'';row.innerHTML='<input type="checkbox" '+checked+' onchange="tadToggle(\\''+id+'\\',\\''+u.id+'\\') " aria-label="Select '+(u.name||'Unknown').replace(/"/g,'&quot;')+'">'+'<div><div class="tad-name">'+pdEsc(u.name||'Unknown')+'</div><div class="tad-email">'+pdEsc(u.email||'')+'</div></div>';c.appendChild(row)})}
   window.tadFilter=function(id){var q=document.getElementById(id+'-search').value.toLowerCase();document.querySelectorAll('#'+id+'-list .tad-row').forEach(function(r){r.style.display=(r.dataset.name.includes(q)||r.dataset.email.includes(q))?'':'none'})};
   window.tadToggle=function(id,uid){var d=window._tad[id];if(d.selected.has(uid))d.selected.delete(uid);else d.selected.add(uid)};
   window.tadConfirm=function(id){var d=window._tad[id];document.getElementById(id+'-dialog').style.display='none';if(d.cb)d.cb(Array.from(d.selected))};</script>`
@@ -83,18 +89,19 @@ export function teamAssignmentDialog(id = 'tad') {
 
 export function teamSelector(id = 'ts', teams = []) {
   const items = teams.map(t =>
-    `<div class="tad-row" data-name="${(t.name || '').toLowerCase()}" data-action="tsSelect" data-args='["${id}","${t.id}","${(t.name || '').replace(/"/g, '&quot;')}"]'><div class="tad-name">${t.name || 'Unknown'}</div><div class="tad-email">${t.member_count || 0} members</div></div>`
+    `<div class="tad-row" role="option" aria-selected="false" tabindex="-1" data-name="${(t.name || '').toLowerCase()}" data-action="tsSelect" data-args='["${id}","${t.id}","${(t.name || '').replace(/"/g, '&quot;')}"]'><div class="tad-name">${t.name || 'Unknown'}</div><div class="tad-email">${t.member_count || 0} members</div></div>`
   ).join('')
   return `<div class="ts-wrap" id="${id}-wrap">
     <div id="${id}-badges" class="ts-badges"></div>
-    <input type="text" id="${id}-search" class="tad-search" placeholder="Search teams..." aria-label="Search teams" oninput="tsFilter('${id}')" onfocus="document.getElementById('${id}-dropdown').classList.add('ts-open')" />
-    <div id="${id}-dropdown" class="ts-dropdown">${items}</div>
+    <input type="text" id="${id}-search" class="tad-search" placeholder="Search teams..." aria-label="Search teams" role="combobox" aria-expanded="false" aria-controls="${id}-dropdown" aria-autocomplete="list" oninput="tsFilter('${id}')" onfocus="document.getElementById('${id}-dropdown').classList.add('ts-open');this.setAttribute('aria-expanded','true')" />
+    <div id="${id}-dropdown" class="ts-dropdown" role="listbox" aria-label="Teams">${items}</div>
     <input type="hidden" id="${id}-value" name="team_id" value=""/>
   </div>
-  <script>window._ts=window._ts||{};window._ts['${id}']=[];
+  <script>${PD_ESC}
+  window._ts=window._ts||{};window._ts['${id}']=[];
   window.tsFilter=function(id){var q=document.getElementById(id+'-search').value.toLowerCase();document.querySelectorAll('#'+id+'-dropdown .tad-row').forEach(function(r){r.style.display=r.dataset.name.includes(q)?'':'none'})};
-  window.tsSelect=function(id,tid,name){window._ts[id].push({id:tid,name:name});tsRender(id);document.getElementById(id+'-dropdown').classList.remove('ts-open');document.getElementById(id+'-search').value=''};
-  function tsRender(id){var b=document.getElementById(id+'-badges');b.innerHTML='';window._ts[id].forEach(function(t,i){b.innerHTML+='<span class="ts-badge">'+t.name+' <span class="ts-badge-x" data-action="tsRemove" data-args=\\'["'+id+'",'+i+']\\' >&times;</span></span>'});document.getElementById(id+'-value').value=window._ts[id].map(function(t){return t.id}).join(',')}
+  window.tsSelect=function(id,tid,name){window._ts[id].push({id:tid,name:name});tsRender(id);document.getElementById(id+'-dropdown').classList.remove('ts-open');document.getElementById(id+'-search').setAttribute('aria-expanded','false');document.getElementById(id+'-search').value=''};
+  function tsRender(id){var b=document.getElementById(id+'-badges');b.innerHTML='';window._ts[id].forEach(function(t,i){b.innerHTML+='<span class="ts-badge">'+pdEsc(t.name)+' <span class="ts-badge-x" data-action="tsRemove" data-args=\\'["'+id+'",'+i+']\\' >&times;</span></span>'});document.getElementById(id+'-value').value=window._ts[id].map(function(t){return t.id}).join(',')}
   window.tsRemove=function(id,idx){window._ts[id].splice(idx,1);tsRender(id)};
-  document.addEventListener('click',function(e){if(!document.getElementById('${id}-wrap').contains(e.target))document.getElementById('${id}-dropdown').classList.remove('ts-open')});</script>`
+  document.addEventListener('click',function(e){if(!document.getElementById('${id}-wrap').contains(e.target)){document.getElementById('${id}-dropdown').classList.remove('ts-open');document.getElementById('${id}-search').setAttribute('aria-expanded','false')}});</script>`
 }

package/src/ui/render-helpers.js

@@ -1,36 +1,37 @@
 import { h } from '@/ui/webjsx.js'
+import { SPACING } from './spacing-system.js'
 
 export const STAGE_COLORS = {
-  info_gathering: { bg: '#dbeafe', text: '#1e40af', label: 'Info Gathering', bgDark: '#1e3a8a', textDark: '#60a5fa' },
-  commencement: { bg: '#dbeafe', text: '#1e40af', label: 'Commencement', bgDark: '#1e3a8a', textDark: '#60a5fa' },
-  team_execution: { bg: '#fef3c7', text: '#92400e', label: 'Team Execution', bgDark: '#78350f', textDark: '#fbbf24' },
-  partner_review: { bg: '#fef3c7', text: '#92400e', label: 'Partner Review', bgDark: '#78350f', textDark: '#fbbf24' },
-  finalization: { bg: '#d1fae5', text: '#065f46', label: 'Finalization', bgDark: '#064e3b', textDark: '#34d399' },
-  closeout: { bg: '#d1fae5', text: '#065f46', label: 'Close Out', bgDark: '#064e3b', textDark: '#34d399' },
+  info_gathering: { label: 'Info Gathering' },
+  commencement: { label: 'Commencement' },
+  team_execution: { label: 'Team Execution' },
+  partner_review: { label: 'Partner Review' },
+  finalization: { label: 'Finalization' },
+  closeout: { label: 'Close Out' },
 }
 
 export const STATUS_COLORS = {
-  pending: { bg: '#fef3c7', text: '#92400e' },
-  active: { bg: '#dbeafe', text: '#1e40af' },
-  completed: { bg: '#d1fae5', text: '#065f46' },
-  archived: { bg: '#f3f4f6', text: '#4b5563' },
-  open: { bg: '#fef3c7', text: '#92400e' },
-  closed: { bg: '#d1fae5', text: '#065f46' },
-  draft: { bg: '#f3f4f6', text: '#6b7280' },
-  in_progress: { bg: '#dbeafe', text: '#1e40af' },
-  review: { bg: '#ede9fe', text: '#5b21b6' },
-  approved: { bg: '#d1fae5', text: '#065f46' },
-  rejected: { bg: '#fee2e2', text: '#991b1b' },
-  overdue: { bg: '#fee2e2', text: '#991b1b' },
-  cancelled: { bg: '#f3f4f6', text: '#6b7280' },
-  on_hold: { bg: '#fef3c7', text: '#92400e' },
-  resolved: { bg: '#d1fae5', text: '#065f46' },
-  unresolved: { bg: '#fee2e2', text: '#991b1b' },
-  flagged: { bg: '#fce7f3', text: '#9d174d' },
-  responded: { bg: '#dbeafe', text: '#1e40af' },
-  expired: { bg: '#f3f4f6', text: '#6b7280' },
-  private: { bg: '#ede9fe', text: '#5b21b6' },
-  public: { bg: '#dbeafe', text: '#1e40af' },
+  pending: {},
+  active: {},
+  completed: {},
+  archived: {},
+  open: {},
+  closed: {},
+  draft: {},
+  in_progress: {},
+  review: {},
+  approved: {},
+  rejected: {},
+  overdue: {},
+  cancelled: {},
+  on_hold: {},
+  resolved: {},
+  unresolved: {},
+  flagged: {},
+  responded: {},
+  expired: {},
+  private: {},
+  public: {},
 }
 
 export const STAGE_CONFIG = [
@@ -47,7 +48,7 @@ export const AVATAR_SIZES = { sm: 24, md: 32, lg: 40, xl: 48 }
 
 export const TOAST_SCRIPT = `window.showToast=(m,t='info')=>{let c=document.getElementById('toast-container');if(!c){c=document.createElement('div');c.id='toast-container';c.className='toast-container';c.setAttribute('role','status');c.setAttribute('aria-live','polite');c.setAttribute('aria-atomic','true');document.body.appendChild(c)}const d=document.createElement('div');d.className='toast toast-'+t;d.textContent=m;c.appendChild(d);setTimeout(()=>{d.style.opacity='0';setTimeout(()=>d.remove(),300)},3000)};`
 
-export const TABLE_SCRIPT = `(function(){let sortCol=null,sortDir=1;function filterTable(){const search=(document.getElementById('search-input')?.value||'').toLowerCase();const filters={};document.querySelectorAll('[data-filter]').forEach(el=>{if(el.value)filters[el.dataset.filter]=el.value.toLowerCase()});let shown=0,total=0;document.querySelectorAll('tbody tr[data-row]').forEach(row=>{total++;const text=row.textContent.toLowerCase();const matchSearch=!search||text.includes(search);const matchFilters=Object.entries(filters).every(([key,val])=>{const cell=row.querySelector('[data-col="'+key+'"]');return !cell||cell.textContent.toLowerCase().includes(val)});const visible=matchSearch&&matchFilters;row.style.display=visible?'':'none';if(visible)shown++});const counter=document.getElementById('row-count');if(counter)counter.textContent=shown===total?total+' items':shown+' of '+total+' items'}function sortTable(col){if(sortCol===col)sortDir*=-1;else{sortCol=col;sortDir=1;}document.querySelectorAll('th[data-sort]').forEach(th=>{th.classList.remove('sort-asc','sort-desc');if(th.dataset.sort===col){th.classList.add(sortDir===1?'sort-asc':'sort-desc');th.setAttribute('aria-sort',sortDir===1?'ascending':'descending')}else{th.removeAttribute('aria-sort')}});const tbody=document.querySelector('tbody');if(!tbody)return;const rows=Array.from(tbody.querySelectorAll('tr[data-row]'));rows.sort((a,b)=>{const av=a.querySelector('[data-col="'+col+'"]')?.textContent?.trim()||'';const bv=b.querySelector('[data-col="'+col+'"]')?.textContent?.trim()||'';return av.localeCompare(bv,undefined,{numeric:true})*sortDir});rows.forEach(r=>tbody.appendChild(r))}window.filterTable=filterTable;window.sortTable=sortTable;document.addEventListener('DOMContentLoaded',()=>{document.getElementById('search-input')?.addEventListener('input',filterTable);document.querySelectorAll('[data-filter]').forEach(el=>el.addEventListener('change',filterTable));document.querySelectorAll('th[data-sort]').forEach(th=>{th.setAttribute('tabindex','0');th.setAttribute('role','button');if(!th.getAttribute('aria-label'))th.setAttribute('aria-label','Sort by '+(th.textContent||th.dataset.sort).trim());th.addEventListener('click',()=>sortTable(th.dataset.sort));th.addEventListener('keydown',e=>{if(e.key==='Enter'||e.key===' '||e.key==='Spacebar'){e.preventDefault();sortTable(th.dataset.sort)}})})})})();`
+export const TABLE_SCRIPT = `(function(){let sortCol=null,sortDir=1;function filterTable(){const search=(document.getElementById('search-input')?.value||'').toLowerCase();const filters={};document.querySelectorAll('[data-filter]').forEach(el=>{if(el.value)filters[el.dataset.filter]=el.value.toLowerCase()});let shown=0,total=0;document.querySelectorAll('tbody tr[data-row]').forEach(row=>{total++;const text=row.textContent.toLowerCase();const matchSearch=!search||text.includes(search);const matchFilters=Object.entries(filters).every(([key,val])=>{const cell=row.querySelector('[data-col="'+key+'"]');return !cell||cell.textContent.toLowerCase().includes(val)});const visible=matchSearch&&matchFilters;row.style.display=visible?'':'none';if(visible)shown++});const counter=document.getElementById('row-count');if(counter)counter.textContent=shown===total?total+' items':shown+' of '+total+' items'}function sortTable(col){if(sortCol===col)sortDir*=-1;else{sortCol=col;sortDir=1;}document.querySelectorAll('th[data-sort]').forEach(th=>{th.classList.remove('sort-asc','sort-desc');if(th.dataset.sort===col){th.classList.add(sortDir===1?'sort-asc':'sort-desc');th.setAttribute('aria-sort',sortDir===1?'ascending':'descending');th.setAttribute('aria-label','Sort by '+(th.textContent||th.dataset.sort).trim()+', '+(sortDir===1?'ascending':'descending'))}else{th.removeAttribute('aria-sort')}});const tbody=document.querySelector('tbody');if(!tbody)return;const rows=Array.from(tbody.querySelectorAll('tr[data-row]'));rows.sort((a,b)=>{const av=a.querySelector('[data-col="'+col+'"]')?.textContent?.trim()||'';const bv=b.querySelector('[data-col="'+col+'"]')?.textContent?.trim()||'';return av.localeCompare(bv,undefined,{numeric:true})*sortDir});rows.forEach(r=>tbody.appendChild(r))}window.filterTable=filterTable;window.sortTable=sortTable;const style=document.createElement('style');style.textContent='th[data-sort]:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}';document.head.appendChild(style);document.addEventListener('DOMContentLoaded',()=>{document.getElementById('search-input')?.addEventListener('input',filterTable);document.querySelectorAll('[data-filter]').forEach(el=>el.addEventListener('change',filterTable));document.querySelectorAll('th[data-sort]').forEach(th=>{th.setAttribute('tabindex','0');th.setAttribute('role','button');if(!th.getAttribute('aria-label'))th.setAttribute('aria-label','Sort by '+(th.textContent||th.dataset.sort).trim());th.addEventListener('click',e=>{e.preventDefault();sortTable(th.dataset.sort)});th.addEventListener('keydown',e=>{if(e.key==='Enter'||e.key===' '||e.key==='Spacebar'){e.preventDefault();sortTable(th.dataset.sort)}});th.addEventListener('keypress',e=>{if(e.key==='Enter'){e.preventDefault();sortTable(th.dataset.sort)}})})})})();`
 
 export function esc(s) {
   return String(s ?? '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;')
@@ -62,11 +63,8 @@ export function emptyRow(colspan, message = 'No items found') {
 export function stagePill(stage) {
   const cfg = STAGE_CONFIG.find(s => s.key === stage)
   const lbl = cfg ? cfg.label : (stage || '-')
-  const stageColor = STAGE_COLORS[stage]
-  if (stageColor) {
-    return `<span class="stage-pill stage-${esc(stage||'')}" data-stage="${stage}" style="background:${stageColor.bg};color:${stageColor.text}">${lbl}</span>`
-  }
-  return `<span class="stage-pill stage-${esc(stage||'')}">${lbl}</span>`
+  // Use CSS classes (stage-pill stage-${stage}) for dark-mode support via styles2.css
+  return `<span class="stage-pill stage-${esc(stage||'')}" data-stage="${stage}">${lbl}</span>`
 }
 
 export function statusPill(status) {
@@ -84,7 +82,8 @@ export function statusBadge(status) {
 export function progressBar(pct) {
   if (typeof pct !== 'number') return '-'
   const p = Math.min(100, Math.max(0, Math.round(pct)))
-  return `<div style="display:flex;align-items:center;gap:8px;min-width:100px"><div style="flex:1;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden"><div style="height:100%;width:${p}%;background:var(--color-primary);border-radius:3px"></div></div><span style="font-size:12px;color:var(--color-text-muted);min-width:28px">${p}%</span></div>`
+  // Use CSS variable for border color (defined in both light and dark mode), responsive min-width, 44px tap-target height, contrast-compliant text color
+  return `<div style="display:flex;align-items:center;gap:${SPACING.sm};min-width:min(60px,50vw);max-width:100%;min-height:44px"><div style="flex:1;height:6px;background:var(--color-border);border-radius:3px;overflow:hidden"><div style="height:100%;width:${p}%;background:var(--color-primary);border-radius:3px"></div></div><span style="font-size:13px;font-weight:600;color:var(--color-text);min-width:28px;line-height:1.4">${p}%</span></div>`
 }
 
 export function fmtVal(value, fieldKey, item = {}) {
@@ -95,23 +94,32 @@ export function fmtVal(value, fieldKey, item = {}) {
   }
   if (fieldKey === 'year') { const n = Number(value); if (!isNaN(n)) return String(Math.floor(n)) }
   if (fieldKey === 'stage' && STAGE_COLORS[value]) {
-    const s = STAGE_COLORS[value]
-    return h('span', { className: 'badge-stage', style: `background:${s.bg};color:${s.text}` }, s.label)
+    const lbl = STAGE_COLORS[value].label || value.charAt(0).toUpperCase() + value.slice(1)
+    // Use CSS classes (stage-${value}) for dark-mode support via styles2.css
+    return h('span', { className: `badge-stage stage-${esc(value)}` }, lbl)
   }
   if (fieldKey === 'status' && STATUS_COLORS[value]) {
-    const s = STATUS_COLORS[value]
-    return h('span', { className: 'badge-status', style: `background:${s.bg};color:${s.text}` }, value.charAt(0).toUpperCase() + value.slice(1))
+    // Map status to pill class following the pattern in statusBadge
+    const statusClassMap = { active:'pill pill-success', inactive:'pill pill-danger', pending:'pill pill-warning', open:'pill pill-info', in_progress:'pill pill-info', completed:'pill pill-success', closed:'pill pill-neutral', archived:'pill pill-neutral', responded:'pill pill-info', overdue:'pill pill-danger', rejected:'pill pill-danger', unresolved:'pill pill-danger', approved:'pill pill-success', review:'pill pill-primary', flagged:'pill pill-danger', expired:'pill pill-neutral', private:'pill pill-primary', public:'pill pill-info' }
+    const cls = statusClassMap[value] || 'pill pill-neutral'
+    return h('span', { className: cls }, value.charAt(0).toUpperCase() + value.slice(1))
   }
-  if (item[`${fieldKey}_display`]) return item[`${fieldKey}_display`]
-  return String(value)
+  // *_display is the resolved label of a referenced record (set in
+  // page-handler-helpers from refCaches), i.e. DB-sourced plain text — escape it.
+  if (item[`${fieldKey}_display`]) return esc(String(item[`${fieldKey}_display`]))
+  // Default path returns raw DB/user data into table cells and detail values —
+  // escape it so a stored value cannot inject markup.
+  return esc(String(value))
 }
 
 export function statusLabel(status) {
   if (!status) return ''
   const key = status.toLowerCase().replace(/\s+/g, '_')
-  const s = STATUS_COLORS[key] || { bg: '#f3f4f6', text: '#6b7280' }
+  // Map to pill class following the pattern in statusBadge for consistent dark-mode styling
+  const statusClassMap = { active:'pill pill-success', inactive:'pill pill-danger', pending:'pill pill-warning', open:'pill pill-info', in_progress:'pill pill-info', completed:'pill pill-success', closed:'pill pill-neutral', archived:'pill pill-neutral', responded:'pill pill-info', overdue:'pill pill-danger', rejected:'pill pill-danger', unresolved:'pill pill-danger', approved:'pill pill-success', review:'pill pill-primary', flagged:'pill pill-danger', expired:'pill pill-neutral', private:'pill pill-primary', public:'pill pill-info' }
+  const cls = statusClassMap[key] || 'pill pill-neutral'
   const label = status.charAt(0).toUpperCase() + status.slice(1).replace(/_/g, ' ')
-  return h('span', { className: 'status-label', style: `background:${s.bg};color:${s.text}` }, label)
+  return h('span', { className: `status-label ${cls}` }, label)
 }
 
 export function nameHash(name) {
@@ -123,9 +131,39 @@ export function nameHash(name) {
 export { getInitials } from '@/lib/utils.js'
 export { icon } from '@/ui/format-helpers.js'
 
-export function fmtDate(ts) {
-  if (!ts) return '-';
+// Canonical date helpers — fixed en-ZA locale + format so the same data renders
+// identically for every user (browser-locale toLocaleDateString gives MM/DD to a
+// US user and DD/MM to a ZA user for the same timestamp; that is the unpredictability
+// these replace). Scale-detect seconds vs milliseconds vs ISO string internally.
+const DATE_LOCALE = 'en-ZA';
+function toDate(ts) {
+  if (ts == null || ts === '') return null;
+  if (ts instanceof Date) return isNaN(ts) ? null : ts;
   const n = Number(ts);
-  if (!isNaN(n) && n > 1e9 && n < 3e9) return new Date(n * 1000).toLocaleDateString();
-  return String(ts);
+  // 10-digit (or smaller) numeric => unix seconds; 13-digit => ms; non-numeric => ISO/parseable
+  const d = !isNaN(n) && String(ts).trim() !== '' && /^\d+$/.test(String(ts).trim())
+    ? new Date(n < 1e12 ? n * 1000 : n)
+    : new Date(ts);
+  return isNaN(d) ? null : d;
+}
+export function fmtDate(ts) {
+  const d = toDate(ts);
+  return d ? d.toLocaleDateString(DATE_LOCALE, { day: '2-digit', month: 'short', year: 'numeric' }) : '-';
+}
+export function fmtDateTime(ts) {
+  const d = toDate(ts);
+  return d ? d.toLocaleDateString(DATE_LOCALE, { day: '2-digit', month: 'short', year: 'numeric' })
+    + ', ' + d.toLocaleTimeString(DATE_LOCALE, { hour: '2-digit', minute: '2-digit' }) : '-';
+}
+// YYYY-MM-DD for <input type=date> values
+export function fmtDateInput(ts) {
+  const d = toDate(ts);
+  if (!d) return '';
+  const p = n => String(n).padStart(2, '0');
+  return d.getFullYear() + '-' + p(d.getMonth() + 1) + '-' + p(d.getDate());
+}
+// parse any date-ish value to unix seconds (the storage scale)
+export function dateToUnixTimestamp(v) {
+  const d = toDate(v);
+  return d ? Math.floor(d.getTime() / 1000) : null;
 }