thatcher 1.0.4

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

@@ -0,0 +1,173 @@
+// FlexUp-style summary report for an engagement — print-friendly HTML.
+// Aggregates: engagement details, RFI status counts, review progress, highlight resolution,
+// activity timeline. Users hit "Print" to save as PDF in-browser (no server-side puppeteer
+// dependency needed for this report).
+
+import { esc, STAGE_CONFIG } from '@/ui/render-helpers.js';
+
+function fmtDate(v) {
+    if (!v) return '-';
+    const n = typeof v === 'number' ? (v > 1e10 ? v : v * 1000) : Date.parse(v);
+    if (!n || isNaN(n)) return '-';
+    return new Date(n).toLocaleDateString('en-ZA', { day: '2-digit', month: 'short', year: 'numeric' });
+}
+function fmtCurrency(v) {
+    if (v == null || v === '') return '-';
+    return 'R ' + Number(v).toLocaleString('en-ZA', { minimumFractionDigits: 0, maximumFractionDigits: 0 });
+}
+
+function pct(part, total) {
+    if (!total || total === 0) return 0;
+    return Math.round((Number(part) / Number(total)) * 100);
+}
+
+function progressRing(value, label, color) {
+    const radius = 32, circ = 2 * Math.PI * radius;
+    const offset = circ - (value / 100) * circ;
+    return `<div style="display:flex;flex-direction:column;align-items:center;gap:4px">
+        <svg width="80" height="80" viewBox="0 0 80 80" style="transform:rotate(-90deg)">
+            <circle cx="40" cy="40" r="${radius}" fill="none" stroke="#e5e7eb" stroke-width="6"/>
+            <circle cx="40" cy="40" r="${radius}" fill="none" stroke="${color}" stroke-width="6"
+                stroke-dasharray="${circ}" stroke-dashoffset="${offset}" stroke-linecap="round"/>
+        </svg>
+        <div style="font-size:20px;font-weight:700;color:#111;margin-top:-54px;position:relative;height:24px">${value}%</div>
+        <div style="font-size:12px;font-weight:500;color:#64748b;margin-top:4px">${esc(label)}</div>
+    </div>`;
+}
+
+export function renderFlexupReport(user, engagement, client, rfis, reviews, highlights, activity, team) {
+    const e = engagement;
+    const cfg = STAGE_CONFIG.find((s) => s.key === e.stage);
+    const themeColor = e.color || cfg?.color || '#3b82f6';
+
+    const rfiStats = {
+        total: rfis.length,
+        open: rfis.filter((r) => (r.status || 'open') === 'open').length,
+        closed: rfis.filter((r) => ['closed', 'completed', 'resolved'].includes((r.status || '').toLowerCase())).length,
+        overdue: rfis.filter((r) => r.due_date && Number(r.due_date) < Math.floor(Date.now() / 1000) && (r.status || 'open') !== 'closed').length,
+    };
+    const hlStats = {
+        total: highlights.length,
+        resolved: highlights.filter((h) => h.status === 'resolved').length,
+        partial: highlights.filter((h) => h.status === 'partial_resolved' || h.partial_resolved).length,
+        partner: highlights.filter((h) => h.partner_resolved).length,
+        manager: highlights.filter((h) => h.manager_resolved).length,
+    };
+
+    const resolvedPct = pct(hlStats.resolved, hlStats.total);
+    const partnerPct = pct(hlStats.partner, hlStats.total);
+    const managerPct = pct(hlStats.manager, hlStats.total);
+    const engProgress = Number(e.progress) || 0;
+
+    const rfiRows = rfis.length ? rfis.map((r) => {
+        const overdue = r.due_date && Number(r.due_date) < Math.floor(Date.now() / 1000) && (r.status || 'open') !== 'closed';
+        return `<tr>
+            <td style="padding:6px 10px;border-bottom:1px solid #e5e7eb;font-size:13px">${esc(r.title || r.name || '-')}</td>
+            <td style="padding:6px 10px;border-bottom:1px solid #e5e7eb;font-size:13px;color:#64748b">${esc(r.status || 'open')}</td>
+            <td style="padding:6px 10px;border-bottom:1px solid #e5e7eb;font-size:13px;color:${overdue ? '#dc2626' : '#64748b'}">${r.due_date ? fmtDate(r.due_date) : '-'}</td>
+        </tr>`;
+    }).join('') : `<tr><td colspan="3" style="padding:20px;text-align:center;color:#9ca3af;font-size:13px">No RFIs</td></tr>`;
+
+    const reviewRows = reviews.length ? reviews.map((r) => `<tr>
+        <td style="padding:6px 10px;border-bottom:1px solid #e5e7eb;font-size:13px">${esc(r.name || '-')}</td>
+        <td style="padding:6px 10px;border-bottom:1px solid #e5e7eb;font-size:13px;color:#64748b">${esc(r.status || '-')}</td>
+        <td style="padding:6px 10px;border-bottom:1px solid #e5e7eb;font-size:13px;color:#64748b">${r.total_highlights || 0}</td>
+        <td style="padding:6px 10px;border-bottom:1px solid #e5e7eb;font-size:13px;color:#64748b">${r.resolved_highlights || 0}</td>
+    </tr>`).join('') : `<tr><td colspan="4" style="padding:20px;text-align:center;color:#9ca3af;font-size:13px">No reviews linked</td></tr>`;
+
+    const activityRows = activity.slice(0, 10).map((a) => {
+        const ts = a.timestamp || a.created_at;
+        const when = ts ? (typeof ts === 'number' && ts > 1e9 ? new Date(ts * 1000).toLocaleString() : new Date(ts).toLocaleString()) : '-';
+        return `<tr>
+            <td style="padding:4px 10px;border-bottom:1px solid #f3f4f6;font-size:12px;color:#64748b">${when}</td>
+            <td style="padding:4px 10px;border-bottom:1px solid #f3f4f6;font-size:13px">${esc(a.action || a.operation || a.type || '-')}</td>
+            <td style="padding:4px 10px;border-bottom:1px solid #f3f4f6;font-size:12px;color:#64748b">${esc(a.user_id || 'System')}</td>
+        </tr>`;
+    }).join('') || `<tr><td colspan="3" style="padding:12px;text-align:center;color:#9ca3af;font-size:12px">No recent activity</td></tr>`;
+
+    const html = `<!DOCTYPE html>
+<html lang="en"><head>
+<meta charset="utf-8"/>
+<title>Engagement Report — ${esc(e.name || 'Engagement')}</title>
+<style>
+  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 0; color: #111; background: #f9fafb; }
+  .wrap { max-width: 960px; margin: 0 auto; padding: 32px 24px; }
+  .accent { height: 6px; background: ${esc(themeColor)}; border-radius: 3px; margin-bottom: 24px; }
+  .h1 { font-size: 24px; font-weight: 700; margin: 0 0 4px 0; }
+  .muted { color: #64748b; font-size: 13px; }
+  .card { background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
+  .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; font-size: 14px; }
+  .grid .k { color: #64748b; }
+  .rings { display: flex; gap: 24px; justify-content: center; padding: 12px 0; }
+  .kstat { display: flex; flex-direction: column; align-items: center; }
+  .kstat .val { font-size: 28px; font-weight: 700; color: #111; }
+  .kstat .lbl { font-size: 12px; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; }
+  .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; text-align: center; }
+  table { width: 100%; border-collapse: collapse; }
+  th { background: #f3f4f6; color: #374151; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 10px; text-align: left; }
+  .no-print { display: block; }
+  .foot { text-align: center; font-size: 11px; color: #9ca3af; margin-top: 32px; padding-top: 16px; border-top: 1px solid #e5e7eb; }
+  .pbtn { background: ${esc(themeColor)}; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; }
+  @media print {
+    body { background: white; }
+    .no-print { display: none !important; }
+    .card { box-shadow: none; page-break-inside: avoid; }
+    .wrap { padding: 0; max-width: 100%; }
+  }
+</style>
+</head><body>
+<div class="wrap">
+  <div class="no-print" style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px">
+    <a href="/engagement/${esc(e.id)}" style="color:#64748b;text-decoration:none;font-size:13px">← Back</a>
+    <button class="pbtn" onclick="window.print()">Print / Save as PDF</button>
+  </div>
+  <div class="accent"></div>
+  <div class="card">
+    <h1 class="h1">${esc(e.name || e.title || 'Engagement')}</h1>
+    <div class="muted">${esc(client?.name || e.client_name || '-')} &middot; ${esc(cfg?.label || e.stage || '-')} &middot; FY ${esc(e.year || '-')}</div>
+  </div>
+  <div class="card">
+    <h2 style="font-size:14px;margin:0 0 16px 0;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:#374151">Progress</h2>
+    <div class="rings">
+      ${progressRing(engProgress, 'Engagement', '#3b82f6')}
+      ${progressRing(resolvedPct, 'Resolved', '#10b981')}
+      ${progressRing(partnerPct, 'Partner', '#8b5cf6')}
+      ${progressRing(managerPct, 'Manager', '#f59e0b')}
+    </div>
+  </div>
+  <div class="card">
+    <h2 style="font-size:14px;margin:0 0 16px 0;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:#374151">Engagement Details</h2>
+    <div class="grid">
+      <div><div class="k">Team</div><div>${esc(team?.name || e.team_name || '-')}</div></div>
+      <div><div class="k">Status</div><div>${esc(e.status || '-')}</div></div>
+      <div><div class="k">Type</div><div>${esc(e.type || e.engagement_type || e.repeat_interval || '-')}</div></div>
+      <div><div class="k">Fee</div><div>${fmtCurrency(e.fee)}</div></div>
+      <div><div class="k">Commenced</div><div>${fmtDate(e.commencement_date)}</div></div>
+      <div><div class="k">Deadline</div><div>${fmtDate(e.deadline_date || e.deadline)}</div></div>
+    </div>
+  </div>
+  <div class="card">
+    <h2 style="font-size:14px;margin:0 0 16px 0;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:#374151">RFIs</h2>
+    <div class="stats" style="margin-bottom:16px">
+      <div class="kstat"><div class="val">${rfiStats.total}</div><div class="lbl">Total</div></div>
+      <div class="kstat"><div class="val" style="color:#3b82f6">${rfiStats.open}</div><div class="lbl">Open</div></div>
+      <div class="kstat"><div class="val" style="color:#10b981">${rfiStats.closed}</div><div class="lbl">Closed</div></div>
+      <div class="kstat"><div class="val" style="color:#dc2626">${rfiStats.overdue}</div><div class="lbl">Overdue</div></div>
+    </div>
+    <table><thead><tr><th>Title</th><th>Status</th><th>Due</th></tr></thead><tbody>${rfiRows}</tbody></table>
+  </div>
+  <div class="card">
+    <h2 style="font-size:14px;margin:0 0 16px 0;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:#374151">Reviews (${reviews.length})</h2>
+    <table><thead><tr><th>Name</th><th>Status</th><th>Highlights</th><th>Resolved</th></tr></thead><tbody>${reviewRows}</tbody></table>
+  </div>
+  <div class="card">
+    <h2 style="font-size:14px;margin:0 0 16px 0;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:#374151">Recent Activity</h2>
+    <table><thead><tr><th>When</th><th>Action</th><th>By</th></tr></thead><tbody>${activityRows}</tbody></table>
+  </div>
+  <div class="foot">
+    Generated ${new Date().toLocaleString('en-ZA')} by ${esc(user?.email || user?.name || 'system')} &middot; Moonlanding
+  </div>
+</div>
+</body></html>`;
+    return html;
+}

package/src/ui/format-helpers.js

@@ -0,0 +1,102 @@
+export function formatDate(ts, opts) {
+  if (!ts) return '—';
+  const d = typeof ts === 'number' ? new Date(ts < 1e10 ? ts * 1000 : ts) : new Date(ts);
+  if (isNaN(d)) return '—';
+  return d.toLocaleDateString('en-ZA', opts || { day: '2-digit', month: 'short', year: 'numeric' });
+}
+
+export function timeAgo(ts) {
+  if (!ts) return '—';
+  const d = typeof ts === 'number' ? new Date(ts < 1e10 ? ts * 1000 : ts) : new Date(ts);
+  const diff = Date.now() - d;
+  if (diff < 60000) return 'just now';
+  if (diff < 3600000) return Math.floor(diff / 60000) + 'm ago';
+  if (diff < 86400000) return Math.floor(diff / 3600000) + 'h ago';
+  if (diff < 604800000) return Math.floor(diff / 86400000) + 'd ago';
+  return formatDate(ts);
+}
+
+export function formatCurrency(amount, currency) {
+  if (amount == null || amount === '') return '—';
+  const n = Number(amount);
+  if (isNaN(n)) return String(amount);
+  const sym = currency === 'USD' ? '$' : currency === 'EUR' ? '€' : 'R';
+  return sym + ' ' + n.toLocaleString('en-ZA', { minimumFractionDigits: 0, maximumFractionDigits: 2 });
+}
+
+export function formatPercent(val) {
+  if (val == null || val === '') return '—';
+  const n = Number(val);
+  if (isNaN(n)) return val;
+  return (n > 1 ? n : Math.round(n * 100)) + '%';
+}
+
+export function stagePill(stage, stageConfig) {
+  const STAGES = stageConfig || {
+    info_gathering:  { label: 'Info Gathering',  color: '#e53935', bg: '#ffebee' },
+    commencement:    { label: 'Commencement',    color: '#e65100', bg: '#fff3e0' },
+    team_execution:  { label: 'Team Execution',  color: '#1565c0', bg: '#e3f2fd' },
+    partner_review:  { label: 'Partner Review',  color: '#283593', bg: '#e8eaf6' },
+    finalization:    { label: 'Finalization',    color: '#2e7d32', bg: '#e8f5e9' },
+    closeout:        { label: 'Close Out',       color: '#33691e', bg: '#f1f8e9' },
+  };
+  const cfg = STAGES[stage];
+  if (!cfg) return stage ? `<span style="background:var(--color-bg,#f5f5f5);color:var(--color-text-muted,#555);padding:2px 8px;border-radius:10px;font-size:0.7rem;font-weight:700">${stage}</span>` : '—';
+  return `<span style="background:${cfg.bg};color:${cfg.color};padding:2px 8px;border-radius:10px;font-size:0.7rem;font-weight:700;white-space:nowrap;border:1px solid ${cfg.color}44">${cfg.label}</span>`;
+}
+
+const STATUS_MAP = {
+  active:    ['#2e7d32', '#e8f5e9'],
+  inactive:  ['#555',    '#f5f5f5'],
+  pending:   ['#e65100', '#fff3e0'],
+  draft:     ['#888',    '#f5f5f5'],
+  sent:      ['#e65100', '#fff3e0'],
+  responded: ['#2e7d32', '#e8f5e9'],
+  closed:    ['#555',    '#eeeeee'],
+  overdue:   ['#c62828', '#ffebee'],
+  deleted:   ['#c62828', '#fdecea'],
+  admin:     ['#6a1b9a', '#f3e5f5'],
+  partner:   ['#1565c0', '#e3f2fd'],
+  manager:   ['#2e7d32', '#e8f5e9'],
+  clerk:     ['#e65100', '#fff3e0'],
+  user:      ['#555',    '#f5f5f5'],
+  auditor:   ['#283593', '#e8eaf6'],
+};
+
+export function statusBadge(status, labelOverride) {
+  const s = (status || '').toLowerCase();
+  const [color, bg] = STATUS_MAP[s] || ['#888', '#f5f5f5'];
+  const label = labelOverride || (s ? s.charAt(0).toUpperCase() + s.slice(1) : '—');
+  return `<span style="background:${bg};color:${color};padding:2px 9px;border-radius:10px;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;white-space:nowrap">${label}</span>`;
+}
+
+export function roleBadge(role) {
+  const known = ['admin','partner','manager','clerk','user','auditor'];
+  if (!role) return statusBadge('', '—');
+  if (!known.includes(role.toLowerCase())) return statusBadge('', 'Unknown');
+  return statusBadge(role);
+}
+
+export function formatName(user) {
+  if (!user) return '—';
+  return user.name || user.display_name || user.email || '—';
+}
+
+export function truncate(str, n) {
+  const max = n || 50;
+  if (!str) return '—';
+  const s = String(str);
+  return s.length > max ? s.slice(0, max) + '…' : s;
+}
+
+export function emptyState(message, icon) {
+  const ico = icon || '📭';
+  return `<div style="text-align:center;padding:48px 24px;color:var(--color-text-muted,#aaa)">
+    <div style="font-size:2rem;margin-bottom:12px">${ico}</div>
+    <div style="font-size:0.88rem;font-weight:500">${message || 'No items found'}</div>
+  </div>`;
+}
+
+export function esc(s) {
+  return String(s ?? '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+}

package/src/ui/global-tags.js

@@ -0,0 +1,144 @@
+let tagsStore = {};
+
+async function apiCall(endpoint, options = {}) {
+  try {
+    const res = await fetch(`/api/tag${endpoint}`, { headers: { 'Content-Type': 'application/json' }, ...options });
+    if (!res.ok) throw new Error('API error');
+    return await res.json();
+  } catch (e) {
+    throw e;
+  }
+}
+
+async function createTag(name, color = '#808080') {
+  const data = await apiCall('', { method: 'POST', body: JSON.stringify({ name: name.trim(), color }) });
+  tagsStore[data.id] = { id: data.id, name: data.name, color: data.color, usage: 0 };
+  showToast('Tag created', 'success');
+  return data;
+}
+
+async function updateTag(id, name, color) {
+  const data = await apiCall(`/${id}`, { method: 'PUT', body: JSON.stringify({ name: name.trim(), color }) });
+  tagsStore[id] = { ...tagsStore[id], name: data.name, color: data.color };
+  showToast('Tag updated', 'success');
+  return data;
+}
+
+async function deleteTag(id) {
+  await apiCall(`/${id}`, { method: 'DELETE' });
+  delete tagsStore[id];
+  showToast('Tag deleted', 'success');
+}
+
+async function listTags() {
+  try {
+    const data = await apiCall('');
+    const tags = Array.isArray(data) ? data : data.data || [];
+    tagsStore = tags.reduce((acc, tag) => { acc[tag.id] = tag; return acc; }, {});
+    return tags;
+  } catch (e) {
+    console.error('Error loading tags:', e);
+    return [];
+  }
+}
+
+function esc(text) {
+  const m = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' };
+  return text.replace(/[&<>"']/g, c => m[c]);
+}
+
+function renderTagsList() {
+  const tags = Object.values(tagsStore).sort((a, b) => (b.usage || 0) - (a.usage || 0));
+  return `<div class="tags-list">${tags.map(t => `
+    <div class="tag-item" data-tag-id="${t.id}">
+      <div class="tag-dot" style="background-color: ${t.color}"></div>
+      <div class="tag-info"><span class="tag-name">${esc(t.name)}</span><span class="tag-usage">${t.usage || 0} items</span></div>
+      <div class="tag-actions">
+        <button class="btn btn-xs btn-ghost" data-action="gtsEditTag" data-args='["${t.id}"]'>Edit</button>
+        <button class="btn btn-xs btn-ghost text-error" data-action="gtsDeleteTag" data-args='["${t.id}"]'>Delete</button>
+      </div>
+    </div>
+  `).join('') || '<p class="text-xs text-gray-500">No tags created</p>'}</div>`;
+}
+
+function showDialog(mode = 'create', tagId = null) {
+  const tag = mode === 'edit' ? tagsStore[tagId] : null;
+  const html = `
+    <div class="dialog-overlay" id="tag-dialog-overlay" data-action="gtsCloseDialog" onkeydown="if(event.key==='Escape')gtsCloseDialog()" role="dialog" aria-modal="true" aria-labelledby="tag-dialog-heading" aria-hidden="true">
+      <div class="dialog-content" data-stop-propagation="true">
+        <div class="dialog-header"><h2 id="tag-dialog-heading">${mode === 'create' ? 'Create New Tag' : 'Edit Tag'}</h2><button class="btn btn-sm btn-ghost" data-action="gtsCloseDialog" aria-label="Close dialog">&times;</button></div>
+        <div class="dialog-body">
+          <div class="form-group"><label class="label" for="tag-name-input">Tag Name</label><input type="text" class="input input-bordered w-full" id="tag-name-input" placeholder="e.g., Priority" value="${tag ? esc(tag.name) : ''}" maxlength="50" /></div>
+          <div class="form-group"><label class="label" for="tag-color-input">Color</label><div class="flex gap-2"><input type="color" id="tag-color-input" value="${tag ? tag.color : '#808080'}" aria-label="Tag color" /><span id="color-preview" class="w-8 h-8 rounded border" style="background-color: ${tag ? tag.color : '#808080'}" aria-hidden="true"></span></div></div>
+        </div>
+        <div class="dialog-footer"><button class="btn btn-ghost" data-action="gtsCloseDialog">Cancel</button><button class="btn btn-primary" data-action="gtsSaveTag" data-args='["${mode}","${tagId || ''}"]'>${mode === 'create' ? 'Create' : 'Update'}</button></div>
+      </div>
+    </div>`;
+  const container = document.getElementById('tag-dialog-container') || (c => (document.body.appendChild(c), c))(Object.assign(document.createElement('div'), { id: 'tag-dialog-container' }));
+  container.innerHTML = html;
+  document.getElementById('tag-color-input').addEventListener('input', (e) => {
+    document.getElementById('color-preview').style.backgroundColor = e.target.value;
+  });
+}
+
+function showToast(msg, type = 'info') {
+  let c = document.getElementById('toast-container');
+  if (!c) {
+    c = document.createElement('div');
+    c.id = 'toast-container';
+    c.className = 'fixed bottom-4 right-4 z-50 flex flex-col gap-2';
+    document.body.appendChild(c);
+  }
+  const t = document.createElement('div');
+  t.className = `alert alert-${type === 'error' ? 'error' : type === 'success' ? 'success' : 'info'} shadow-lg max-w-sm`;
+  t.textContent = msg;
+  c.appendChild(t);
+  setTimeout(() => t.remove(), 3000);
+}
+
+window.gtsOpenDialog = (mode = 'create', tagId = null) => showDialog(mode, tagId);
+window.gtsEditTag = (tagId) => gtsOpenDialog('edit', tagId);
+window.gtsDeleteTag = async (tagId) => {
+  if (confirm(`Delete "${esc(tagsStore[tagId].name)}"?`)) {
+    await deleteTag(tagId);
+    refreshTagsList();
+  }
+};
+window.gtsSaveTag = async (mode, tagId) => {
+  const name = document.getElementById('tag-name-input').value.trim();
+  const color = document.getElementById('tag-color-input').value;
+  if (!name) { showToast('Tag name required', 'error'); return; }
+  try {
+    mode === 'create' ? await createTag(name, color) : await updateTag(tagId, name, color);
+    gtsCloseDialog();
+    refreshTagsList();
+  } catch (e) {
+    showToast('Error: ' + e.message, 'error');
+  }
+};
+window.gtsCloseDialog = () => {
+  const c = document.getElementById('tag-dialog-container');
+  if (c) c.innerHTML = '';
+};
+
+async function refreshTagsList() {
+  await listTags();
+  const c = document.getElementById('tags-list-container');
+  if (c) c.innerHTML = renderTagsList();
+}
+
+export async function initGlobalTags() {
+  await listTags();
+  return { createTag, updateTag, deleteTag, listTags, renderTagsList, refreshTagsList };
+}
+
+export function renderTagsUI() {
+  return `
+    <div class="card-clean"><div class="card-clean-body">
+      <div class="flex justify-between items-center mb-4"><h2 class="card-title text-lg">Global Tags</h2><button class="btn btn-primary btn-sm" data-action="gtsOpenDialog" data-args='["create"]'>New Tag</button></div>
+      <div id="tags-list-container">${renderTagsList()}</div>
+    </div></div>
+    <div id="tag-dialog-container"></div>
+    <style>.tags-list{display:flex;flex-direction:column;gap:0.75rem}.tag-item{display:flex;align-items:center;gap:1rem;padding:0.75rem;border:1px solid var(--color-border,#e5e7eb);border-radius:0.5rem}.tag-dot{width:20px;height:20px;border-radius:50%;flex-shrink:0}.tag-info{flex:1}.tag-name{font-weight:500;display:block}.tag-usage{font-size:0.75rem;color:var(--color-text-muted,#6b7280);display:block}.tag-actions{display:flex;gap:0.5rem}.dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:1000}.dialog-content{background:var(--color-surface,white);border-radius:0.5rem;box-shadow:0 10px 25px rgba(0,0,0,0.2);max-width:500px;width:90%;color:var(--color-text,#111)}.dialog-header{padding:1.5rem;border-bottom:1px solid var(--color-border,#e5e7eb);display:flex;justify-content:space-between;align-items:center}.dialog-body{padding:1.5rem}.dialog-footer{padding:1rem 1.5rem;border-top:1px solid var(--color-border,#e5e7eb);display:flex;justify-content:flex-end;gap:0.75rem}.form-group{margin-bottom:1rem}.label{display:block;margin-bottom:0.5rem;font-weight:500}</style>
+  `;
+}

package/src/ui/highlight-threading-renderer.js

@@ -0,0 +1,176 @@
+import { page } from '@/ui/layout.js';
+import { canEdit } from '@/ui/permissions-ui.js';
+import { reviewZoneNav } from '@/ui/review-zone-nav.js';
+import { esc } from '@/ui/render-helpers.js';
+import { SPACING, renderStatsRow, renderPageHeader, renderButton, renderEmptyState } from '@/ui/spacing-system.js';
+
+function fmtDate(ts) {
+  if (!ts) return '';
+  const n = Number(ts);
+  if (!isNaN(n) && n > 1e9 && n < 3e9) return new Date(n * 1000).toLocaleString();
+  return String(ts);
+}
+
+const RESOLUTION_STATES = {
+  unresolved: { label: 'Unresolved', color: '#ef4444', pill: 'pill pill-danger' },
+  partial_resolved: { label: 'Partial', color: '#f59e0b', pill: 'pill pill-warning' },
+  manager_resolved: { label: 'Manager', color: '#3b82f6', pill: 'pill pill-info' },
+  partner_resolved: { label: 'Partner', color: '#8b5cf6', pill: 'pill pill-primary' },
+  resolved: { label: 'Resolved', color: '#22c55e', pill: 'pill pill-success' },
+};
+
+function resolutionBadge(status) {
+  const s = RESOLUTION_STATES[status] || RESOLUTION_STATES.unresolved;
+  return `<span class="${s.pill}">${s.label}</span>`;
+}
+
+function responseItem(response) {
+  const name = response.user?.name || response.user_name || 'Unknown';
+  const initial = name.charAt(0).toUpperCase();
+  const date = fmtDate(response.created_at);
+  return `<div class="response-item">
+    <div class="response-avatar">${initial}</div>
+    <div class="response-content">
+      <div class="response-meta">
+        <span class="response-name">${esc(name)}</span>
+        <span class="response-date">${date}</span>
+      </div>
+      <div class="response-text">${esc(response.text || response.content || '')}</div>
+      ${response.attachment ? `<div class="response-attachment">
+        <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/></svg>
+        <a href="${response.attachment.url || '#'}" target="_blank" rel="noopener">${esc(response.attachment.name || 'Attachment')}</a>
+      </div>` : ''}
+    </div>
+  </div>`;
+}
+
+function highlightThread(highlight, responses, canResolve, idx) {
+  const status = highlight.status || 'unresolved';
+  const badge = resolutionBadge(status);
+  const color = RESOLUTION_STATES[status]?.color || '#ef4444';
+
+  const threadItems = responses.map(r => responseItem(r)).join('');
+  const sectionTag = highlight.section_name ? `<span class="review-meta-tag">${esc(highlight.section_name)}</span>` : '';
+
+  const resolveSelect = canResolve ? `<div class="thread-card-actions">
+    <label style="font-size:12px;color:var(--color-text-muted)">Mark as:</label>
+    <select id="resolve-status-${highlight.id}" class="form-input" style="width:auto;padding:4px 8px;font-size:13px;min-height:auto" aria-label="Resolution status" onchange="updateResolution('${highlight.id}')">
+      <option value="unresolved" ${status === 'unresolved' ? 'selected' : ''}>Unresolved</option>
+      <option value="partial_resolved" ${status === 'partial_resolved' ? 'selected' : ''}>Partial</option>
+      <option value="manager_resolved" ${status === 'manager_resolved' ? 'selected' : ''}>Manager</option>
+      <option value="partner_resolved" ${status === 'partner_resolved' ? 'selected' : ''}>Partner</option>
+      <option value="resolved" ${status === 'resolved' ? 'selected' : ''}>Resolved</option>
+    </select>
+  </div>` : '';
+
+  const replyForm = `<div class="thread-reply">
+    <textarea id="reply-${highlight.id}" class="form-input" style="resize:vertical;min-height:60px" rows="2" placeholder="Add a response..."></textarea>
+    <button class="btn-primary-clean" style="align-self:flex-start;padding:8px 16px" data-action="submitResponse" data-args='["${highlight.id}"]'>Reply</button>
+  </div>`;
+
+  return `<div class="thread-card" id="thread-${highlight.id}" data-thread-status="${status}">
+    <div class="thread-card-header">
+      <div class="thread-card-meta">
+        <span class="thread-card-idx" style="background:${color}">${idx + 1}</span>
+        <span class="thread-card-text">${esc(highlight.text || highlight.content || 'Area highlight')}</span>
+        ${sectionTag}
+      </div>
+      ${badge}
+    </div>
+    <div class="thread-card-page">Page ${highlight.page_number || '?'}</div>
+    <div class="thread-card-body">
+      ${threadItems || `<div class="thread-card-empty">No responses yet. Be the first to reply.</div>`}
+    </div>
+    ${resolveSelect}
+    ${replyForm}
+  </div>`;
+}
+
+export function renderHighlightThreading(user, review, highlights, responseMap) {
+  const canResolve = canEdit(user, 'review');
+  const indexed = highlights.map((h, i) => ({ ...h, _index: i }));
+
+  const stats = {
+    total: highlights.length,
+    resolved: highlights.filter(h => h.status === 'resolved').length,
+    partial: highlights.filter(h => h.status === 'partial_resolved').length,
+    open: highlights.filter(h => !h.status || h.status === 'unresolved').length,
+  };
+
+  const statsHtml = renderStatsRow([
+    { value: stats.total, label: 'Total' },
+    { value: stats.open, label: 'Open', color: 'var(--color-danger)' },
+    { value: stats.partial, label: 'Partial', color: 'var(--color-warning)' },
+    { value: stats.resolved, label: 'Resolved', color: 'var(--color-success)' },
+  ]);
+
+  const filterBar = `<div class="review-filter-bar">
+    <button class="pill pill-primary" data-thread-filter="all" data-action="filterThreads" data-args='["all"]'>All (${stats.total})</button>
+    <button class="pill pill-neutral" data-thread-filter="open" data-action="filterThreads" data-args='["open"]'>Open (${stats.open})</button>
+    <button class="pill pill-neutral" data-thread-filter="resolved" data-action="filterThreads" data-args='["resolved"]'>Resolved (${stats.resolved})</button>
+  </div>`;
+
+  const threads = indexed.map(h => {
+    const responses = responseMap?.[h.id] || [];
+    return highlightThread(h, responses, canResolve, h._index);
+  }).join('');
+
+  const pageHeader = renderPageHeader(
+    'Highlight Discussions',
+    `${review.name || 'Review'}`,
+    `${renderButton('Back to Review', { variant: 'ghost', size: 'sm', href: `/review/${review.id}` })}
+     ${canResolve ? renderButton('Resolve All', { variant: 'primary', size: 'sm', action: "bulkResolve" }) : ''}`
+  );
+
+  const content = `
+    ${pageHeader}
+    ${statsHtml}
+    ${filterBar}
+    <div id="threads-container">
+      ${threads || renderEmptyState('No highlights to discuss. Add highlights from the PDF viewer.')}
+    </div>`;
+
+  const threadScript = `
+    window.showToast=window.showToast||function(m,t){alert(m)};
+    window.filterThreads=function(f){
+      document.querySelectorAll('[data-thread-filter]').forEach(b=>{
+        b.className=b.dataset.threadFilter===f?'pill pill-primary':'pill pill-neutral';
+      });
+      document.querySelectorAll('#threads-container>.thread-card').forEach(c=>{
+        const status=c.dataset.threadStatus;
+        const isResolved=status==='resolved';
+        if(f==='all')c.style.display='';
+        else if(f==='resolved')c.style.display=isResolved?'':'none';
+        else c.style.display=isResolved?'none':'';
+      });
+    };
+    window.submitResponse=async function(hid){
+      const ta=document.getElementById('reply-'+hid);
+      if(!ta||!ta.value.trim()){alert('Please enter a response');return}
+      try{
+        const res=await fetch('/api/mwr/review/highlight/'+hid+'/responses',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({text:ta.value.trim()})});
+        if(res.ok){ta.value='';showToast('Response submitted','success');setTimeout(()=>location.reload(),500)}
+        else{const err=await res.json().then(d=>d.error||d.message||'Failed').catch(()=>'Failed');alert('Error: '+err)}
+      }catch(e){alert('Error: '+e.message)}
+    };
+    window.updateResolution=async function(hid){
+      const sel=document.getElementById('resolve-status-'+hid);
+      if(!sel)return;
+      try{
+        const res=await fetch('/api/mwr/review/highlight/'+hid,{method:'PATCH',headers:{'Content-Type':'application/json'},body:JSON.stringify({status:sel.value})});
+        if(res.ok){showToast('Status updated','success');setTimeout(()=>location.reload(),500)}
+        else{alert('Failed to update')}
+      }catch(e){alert('Error: '+e.message)}
+    };
+    window.bulkResolve=async function(){
+      if(!confirm('Resolve all highlights in this review?'))return;
+      try{
+        const res=await fetch('/api/mwr/review/${review.id}?action=resolve-all',{method:'POST'});
+        if(res.ok){showToast('All highlights resolved','success');setTimeout(()=>location.reload(),500)}
+        else{alert('Failed to resolve all')}
+      }catch(e){alert('Error: '+e.message)}
+    };`;
+
+  const bc = [{ href: '/', label: 'Home' }, { href: '/review', label: 'Reviews' }, { href: `/review/${review.id}`, label: review.name || 'Review' }, { label: 'Highlights' }];
+  return page(user, `${review.name || 'Review'} | Highlights`, bc, reviewZoneNav(review.id, 'highlights') + content, [threadScript]);
+}