thatcher 1.0.7 → 1.0.34

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) {

package/src/lib/audit-logger.js

@@ -1,193 +0,0 @@
-import { getDatabase, genId, now } from '@/lib/database-core';
-import { Mutex } from '@/lib/hot-reload/mutex';
-
-const db = getDatabase();
-const auditMutex = new Mutex('audit-logger');
-
-export const ACTIVITY_TYPES = {
-  RFI_QUESTION_VIEW: 'rfi_question_view',
-  RFI_QUESTION_RESPOND: 'rfi_question_respond',
-  RFI_QUESTION_COMMENT: 'rfi_question_comment',
-  RFI_QUESTION_CREATE: 'rfi_question_create',
-  RFI_QUESTION_UPDATE: 'rfi_question_update',
-  RFI_QUESTION_DELETE: 'rfi_question_delete',
-  RFI_QUESTION_ASSIGN: 'rfi_question_assign',
-  RFI_QUESTION_DEADLINE: 'rfi_question_deadline',
-  HIGHLIGHT_CREATE: 'highlight_create',
-  HIGHLIGHT_RESOLVE: 'highlight_resolve',
-  HIGHLIGHT_REOPEN: 'highlight_reopen',
-  HIGHLIGHT_DELETE: 'highlight_delete',
-  REVIEW_CREATE: 'review_create',
-  REVIEW_UPDATE: 'review_update',
-  REVIEW_ARCHIVE: 'review_archive',
-  COLLABORATOR_ADD: 'collaborator_add',
-  COLLABORATOR_REMOVE: 'collaborator_remove',
-  PERMISSION_CHANGE: 'permission_change',
-  ROLE_CHANGE: 'role_change',
-};
-
-const parseJson = (val) => val ? JSON.parse(val) : null;
-
-const parseRow = (row) => row ? {
-  ...row,
-  old_permissions: parseJson(row.old_permissions),
-  new_permissions: parseJson(row.new_permissions),
-  metadata: parseJson(row.metadata),
-  before_state: parseJson(row.before_state),
-  after_state: parseJson(row.after_state),
-} : null;
-
-export const logAction = (entityType, entityId, action, userId, beforeState, afterState) => {
-  const id = genId();
-  const timestamp = now();
-  db.prepare(`
-    INSERT INTO audit_logs (id, entity_type, entity_id, action, user_id, before_state, after_state, created_at)
-    VALUES (?, ?, ?, ?, ?, ?, ?, ?)
-  `).run(id, entityType, entityId, action, userId || null,
-    beforeState ? JSON.stringify(beforeState) : null,
-    afterState ? JSON.stringify(afterState) : null,
-    timestamp
-  );
-  return { id, timestamp };
-};
-
-export const getAuditHistory = (filters = {}, page = 1, pageSize = 50) => {
-  const wc = [], params = [];
-  if (filters.entityType) { wc.push('entity_type = ?'); params.push(filters.entityType); }
-  if (filters.entityId) { wc.push('entity_id = ?'); params.push(filters.entityId); }
-  if (filters.userId) { wc.push('user_id = ?'); params.push(filters.userId); }
-  if (filters.action) { wc.push('action = ?'); params.push(filters.action); }
-  if (filters.fromDate) { wc.push('created_at >= ?'); params.push(filters.fromDate); }
-  if (filters.toDate) { wc.push('created_at <= ?'); params.push(filters.toDate); }
-  const where = wc.length ? 'WHERE ' + wc.join(' AND ') : '';
-  const { count: total } = db.prepare(`SELECT COUNT(*) as count FROM audit_logs ${where}`).get(...params);
-  const offset = (page - 1) * pageSize;
-  const items = db.prepare(`SELECT * FROM audit_logs ${where} ORDER BY created_at DESC LIMIT ? OFFSET ?`).all(...params, pageSize, offset);
-  return {
-    items: items.map(i => ({
-      id: i.id, entityType: i.entity_type, entityId: i.entity_id, action: i.action,
-      userId: i.user_id, beforeState: parseJson(i.before_state), afterState: parseJson(i.after_state), createdAt: i.created_at,
-    })),
-    pagination: { page, pageSize, total, totalPages: Math.ceil(total / pageSize) },
-  };
-};
-
-export const getEntityAuditTrail = (entityType, entityId) => {
-  return db.prepare(`SELECT * FROM audit_logs WHERE entity_type = ? AND entity_id = ? ORDER BY created_at DESC`).all(entityType, entityId)
-    .map(i => ({ id: i.id, action: i.action, userId: i.user_id, beforeState: parseJson(i.before_state), afterState: parseJson(i.after_state), createdAt: i.created_at }));
-};
-
-const statsSql = (col) => `SELECT ${col}, COUNT(*) as count FROM audit_logs WHERE created_at >= ? AND created_at <= ? GROUP BY ${col} ORDER BY count DESC`;
-export const getActionStats = (fromDate, toDate) => db.prepare(statsSql('action')).all(fromDate, toDate);
-export const getUserStats = (fromDate, toDate) => db.prepare(statsSql('user_id')).all(fromDate, toDate);
-
-export const logPermissionChange = ({
-  userId, entityType, entityId, action, oldPermissions = null, newPermissions = null,
-  reason = null, reasonCode = 'other', affectedUserId = null, ipAddress = null, sessionId = null, metadata = null,
-}) => {
-  if (!userId || !entityType || !entityId || !action) throw new Error('Missing required audit fields');
-  const auditId = genId();
-  const timestamp = now();
-  db.prepare(`
-    INSERT INTO permission_audit (id, user_id, entity_type, entity_id, action, old_permissions, new_permissions,
-      reason, reason_code, timestamp, ip_address, session_id, affected_user_id, metadata, created_at, updated_at, created_by, updated_by)
-    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
-  `).run(auditId, userId, entityType, entityId, action,
-    oldPermissions ? JSON.stringify(oldPermissions) : null, newPermissions ? JSON.stringify(newPermissions) : null,
-    reason, reasonCode, timestamp, ipAddress, sessionId, affectedUserId,
-    metadata ? JSON.stringify(metadata) : null, timestamp, timestamp, userId, userId
-  );
-  return auditId;
-};
-
-export const auditPermissionChange = async ({ user, entityType, entityId, action, oldPermissions = null,
-  newPermissions = null, affectedUserId = null, reason = null, reasonCode = 'admin_action', metadata = null }) => {
-  return auditMutex.runExclusive(() => {
-    try {
-      logPermissionChange({ userId: user.id, entityType, entityId, action, oldPermissions, newPermissions,
-        reason: reason || `Permission ${action}`, reasonCode, affectedUserId, metadata });
-    } catch (error) {
-      console.error('[Audit] Failed to log permission change:', error);
-    }
-  });
-};
-
-export const auditRoleChange = async ({ user, targetUserId, oldRole, newRole, reason = null, metadata = null }) => {
-  await auditPermissionChange({ user, entityType: 'user', entityId: targetUserId, action: 'role_change',
-    oldPermissions: { role: oldRole }, newPermissions: { role: newRole },
-    affectedUserId: targetUserId, reason: reason || `Role changed from ${oldRole} to ${newRole}`,
-    reasonCode: 'role_change', metadata: { ...metadata, old_role: oldRole, new_role: newRole } });
-};
-
-export const auditCollaboratorAdded = async ({ user, reviewId, collaboratorId, collaboratorUserId, permissions = null, reason = null, metadata = null }) => {
-  await auditPermissionChange({ user, entityType: 'review', entityId: reviewId, action: 'grant',
-    newPermissions: permissions || { access: 'collaborator' }, affectedUserId: collaboratorUserId,
-    reason: reason || 'Collaborator added to review', reasonCode: 'collaborator_added',
-    metadata: { ...metadata, collaborator_id: collaboratorId, review_id: reviewId } });
-};
-
-export const auditCollaboratorRemoved = async ({ user, reviewId, collaboratorId, collaboratorUserId, permissions = null, reason = null, metadata = null }) => {
-  await auditPermissionChange({ user, entityType: 'review', entityId: reviewId, action: 'revoke',
-    oldPermissions: permissions || { access: 'collaborator' }, affectedUserId: collaboratorUserId,
-    reason: reason || 'Collaborator removed from review', reasonCode: 'collaborator_removed',
-    metadata: { ...metadata, collaborator_id: collaboratorId, review_id: reviewId } });
-};
-
-export const auditLifecycleTransition = async ({ user, entityType, entityId, fromStage, toStage, metadata = null }) => {
-  await auditPermissionChange({ user, entityType, entityId, action: 'modify',
-    oldPermissions: { stage: fromStage }, newPermissions: { stage: toStage },
-    reason: `Lifecycle transition: ${fromStage} -> ${toStage}`, reasonCode: 'lifecycle_transition',
-    metadata: { ...metadata, from_stage: fromStage, to_stage: toStage } });
-};
-
-export const auditPermissionModify = async ({ user, entityType, entityId, oldPermissions, newPermissions,
-  affectedUserId = null, reason = null, reasonCode = 'admin_action', metadata = null }) => {
-  await auditPermissionChange({ user, entityType, entityId, action: 'modify',
-    oldPermissions, newPermissions, affectedUserId, reason: reason || 'Permissions modified', reasonCode, metadata });
-};
-
-export const getPermissionAuditTrail = ({ entityType, entityId, userId, affectedUserId, limit = 100, offset = 0 }) => {
-  let sql = 'SELECT * FROM permission_audit WHERE 1=1';
-  const params = [];
-  if (entityType) { sql += ' AND entity_type = ?'; params.push(entityType); }
-  if (entityId) { sql += ' AND entity_id = ?'; params.push(entityId); }
-  if (userId) { sql += ' AND user_id = ?'; params.push(userId); }
-  if (affectedUserId) { sql += ' AND affected_user_id = ?'; params.push(affectedUserId); }
-  sql += ' ORDER BY timestamp DESC LIMIT ? OFFSET ?';
-  return db.prepare(sql).all(...params, limit, offset).map(parseRow);
-};
-
-export const getPermissionAuditById = (auditId) => parseRow(db.prepare('SELECT * FROM permission_audit WHERE id = ?').get(auditId));
-export const getPermissionAuditStats = () => db.prepare(`SELECT COUNT(*) as total_audits, COUNT(DISTINCT user_id) as unique_users, COUNT(DISTINCT entity_type) as entity_types, MIN(timestamp) as earliest_change, MAX(timestamp) as latest_change FROM permission_audit`).get();
-export const getPermissionAuditBreakdown = (field) => db.prepare(`SELECT ${field}, COUNT(*) as count FROM permission_audit GROUP BY ${field} ORDER BY count DESC`).all();
-
-export const searchPermissionAudit = (searchTerm, limit = 100) => {
-  const pattern = `%${searchTerm}%`;
-  return db.prepare(`SELECT * FROM permission_audit WHERE reason LIKE ? OR entity_type LIKE ? OR entity_id LIKE ? ORDER BY timestamp DESC LIMIT ?`)
-    .all(pattern, pattern, pattern, limit).map(parseRow);
-};
-
-export const getPermissionAuditByDateRange = (startDate, endDate, limit = 100) =>
-  db.prepare(`SELECT * FROM permission_audit WHERE timestamp >= ? AND timestamp <= ? ORDER BY timestamp DESC LIMIT ?`).all(startDate, endDate, limit).map(parseRow);
-
-export const exportPermissionAuditCSV = async (filters = {}) => {
-  const trail = getPermissionAuditTrail({ ...filters, limit: 10000 });
-  const h = 'Timestamp,Changed By,Entity Type,Entity ID,Action,Reason Code,Reason,Affected User,IP Address';
-  const rows = trail.map(a => [new Date(a.timestamp * 1000).toISOString(), a.user_id, a.entity_type,
-    a.entity_id, a.action, a.reason_code, a.reason || '', a.affected_user_id || '', a.ip_address || '']
-    .map(c => `"${c}"`).join(','));
-  return [h, ...rows].join('\n');
-};
-
-export const logQuestionActivity = (questionId, action, userId, details = null) => {
-  return logAction('rfi_question', questionId, action, userId, null, details);
-};
-
-export const getPermissionDiff = (oldPerms, newPerms) => {
-  const diff = { added: [], removed: [], unchanged: [] };
-  const oldSet = new Set(Array.isArray(oldPerms) ? oldPerms : []);
-  const newSet = new Set(Array.isArray(newPerms) ? newPerms : []);
-  for (const p of newSet) { if (!oldSet.has(p)) diff.added.push(p); else diff.unchanged.push(p); }
-  for (const p of oldSet) { if (!newSet.has(p)) diff.removed.push(p); }
-  return diff;
-};