thatcher 1.0.4

package/src/ui/idle-logout.js

@@ -0,0 +1,156 @@
+export function getIdleLogoutScript(config = {}) {
+  const idleTimeoutMs = config.idle_timeout_ms || 1800000;
+  const idleWarningMs = config.idle_warning_ms || 1500000;
+  const warningConfig = config.idle_warning_dialog_config || {};
+
+  return `
+(function() {
+  let idleTimer = null;
+  let warningTimer = null;
+  let isWarningShown = false;
+
+  const CONFIG = {
+    idleTimeoutMs: ${idleTimeoutMs},
+    idleWarningMs: ${idleWarningMs},
+    warningTitle: '${warningConfig.title || 'Session Expiring'}',
+    warningMessage: '${warningConfig.message || 'Your session will expire due to inactivity'}',
+    stayButtonLabel: '${warningConfig.buttons?.[0]?.label || 'Stay Logged In'}',
+    logoutButtonLabel: '${warningConfig.buttons?.[1]?.label || 'Logout'}'
+  };
+
+  function resetIdleTimer() {
+    clearTimeout(idleTimer);
+    clearTimeout(warningTimer);
+    isWarningShown = false;
+    removeWarningDialog();
+
+    warningTimer = setTimeout(() => {
+      showWarningDialog();
+    }, CONFIG.idleWarningMs);
+
+    idleTimer = setTimeout(() => {
+      logout();
+    }, CONFIG.idleTimeoutMs);
+  }
+
+  function showWarningDialog() {
+    if (isWarningShown) return;
+    isWarningShown = true;
+
+    const dialog = document.createElement('div');
+    dialog.id = 'idle-warning-dialog';
+    dialog.style.cssText = \`
+      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: 10000;
+    \`;
+
+    const content = document.createElement('div');
+    content.style.cssText = \`
+      background: var(--color-surface, #fff);
+      padding: 2rem;
+      border-radius: 8px;
+      box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+      max-width: 400px;
+      text-align: center;
+      color: var(--color-text, #111);
+    \`;
+
+    const title = document.createElement('h3');
+    title.textContent = CONFIG.warningTitle;
+    title.style.marginBottom = '1rem';
+    title.style.color = 'var(--color-text, #333)';
+
+    const message = document.createElement('p');
+    message.textContent = CONFIG.warningMessage;
+    message.style.marginBottom = '1.5rem';
+    message.style.color = 'var(--color-text-muted, #666)';
+
+    const buttonContainer = document.createElement('div');
+    buttonContainer.style.cssText = 'display: flex; gap: 1rem;';
+
+    const stayBtn = document.createElement('button');
+    stayBtn.textContent = CONFIG.stayButtonLabel;
+    stayBtn.style.cssText = \`
+      flex: 1;
+      padding: 0.75rem;
+      background: #007bff;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-weight: 600;
+    \`;
+    stayBtn.onclick = () => {
+      removeWarningDialog();
+      resetIdleTimer();
+    };
+
+    const logoutBtn = document.createElement('button');
+    logoutBtn.textContent = CONFIG.logoutButtonLabel;
+    logoutBtn.style.cssText = \`
+      flex: 1;
+      padding: 0.75rem;
+      background: #6c757d;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-weight: 600;
+    \`;
+    logoutBtn.onclick = logout;
+
+    buttonContainer.appendChild(stayBtn);
+    buttonContainer.appendChild(logoutBtn);
+
+    content.appendChild(title);
+    content.appendChild(message);
+    content.appendChild(buttonContainer);
+    dialog.appendChild(content);
+    document.body.appendChild(dialog);
+  }
+
+  function removeWarningDialog() {
+    const dialog = document.getElementById('idle-warning-dialog');
+    if (dialog) dialog.remove();
+  }
+
+  function logout() {
+    fetch('/api/auth/logout', { method: 'POST' })
+      .then(() => {
+        window.location.href = '/login';
+      })
+      .catch(() => {
+        window.location.href = '/login';
+      });
+  }
+
+  const events = ['mousedown', 'keydown', 'scroll', 'touchstart', 'click'];
+
+  events.forEach(event => {
+    document.addEventListener(event, resetIdleTimer, true);
+  });
+
+  resetIdleTimer();
+
+  window.idleLogout = { resetIdleTimer, logout };
+})();
+`;
+}
+
+export function injectIdleLogoutScript(html, config = {}) {
+  const script = getIdleLogoutScript(config);
+  const tag = `<script>${script}</script>`;
+
+  if (html.includes('</body>')) {
+    return html.replace('</body>', `${tag}</body>`);
+  }
+  return html + tag;
+}

package/src/ui/job-management-renderer.js

@@ -0,0 +1,61 @@
+import { statusLabel } from '@/ui/renderer.js';
+import { page } from '@/ui/layout.js';
+import { isPartner } from '@/ui/permissions-ui.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);
+}
+
+function jobStatusBadge(status) {
+  const colors = {
+    running: { bg: '#dbeafe', text: '#1e40af', icon: '&#9654;' },
+    success: { bg: '#d1fae5', text: '#065f46', icon: '&#10003;' },
+    failed: { bg: '#fee2e2', text: '#991b1b', icon: '&#10007;' },
+    scheduled: { bg: '#fef3c7', text: '#92400e', icon: '&#9200;' },
+    disabled: { bg: '#f3f4f6', text: '#6b7280', icon: '&#9679;' },
+  };
+  const c = colors[status] || colors.scheduled;
+  return `<span style="background:${c.bg};color:${c.text};padding:2px 10px;border-radius:9999px;font-size:0.75rem;font-weight:500">${c.icon} ${(status || 'unknown').replace(/_/g, ' ')}</span>`;
+}
+
+function jobRow(job, canManage) {
+  const lastRun = fmtDate(job.last_run_at);
+  const nextRun = fmtDate(job.next_run_at);
+  const duration = job.last_duration ? (job.last_duration < 1000 ? job.last_duration + 'ms' : Math.round(job.last_duration / 1000) + 's') : '-';
+  const triggerBtn = canManage ? `<button class="btn btn-xs btn-primary" data-action="triggerJob" data-args='["${job.name}"]'>Run Now</button>` : '';
+  const toggleBtn = canManage ? `<button class="btn btn-xs ${job.enabled !== false ? 'btn-warning' : 'btn-success'}" data-action="toggleJob" data-args='["${job.name}",${!job.enabled}]'>${job.enabled !== false ? 'Disable' : 'Enable'}</button>` : '';
+  return `<tr><td class="font-medium">${job.label || job.name}</td><td>${job.schedule || job.cron || '-'}</td><td>${jobStatusBadge(job.status || (job.enabled === false ? 'disabled' : 'scheduled'))}</td><td class="text-sm">${lastRun}</td><td class="text-sm">${nextRun}</td><td class="text-sm">${duration}</td><td class="text-sm">${job.last_result || '-'}</td><td class="flex gap-1">${triggerBtn}${toggleBtn}</td></tr>`;
+}
+
+export function renderJobManagement(user, jobs, recentLogs = []) {
+  const canManage = isPartner(user);
+  const runningJobs = jobs.filter(j => j.status === 'running').length;
+  const failedJobs = jobs.filter(j => j.status === 'failed').length;
+  const totalJobs = jobs.length;
+
+  const statCards = `<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">${[
+    { label: 'Total Jobs', value: totalJobs },
+    { label: 'Running', value: runningJobs, color: runningJobs > 0 ? 'blue' : '' },
+    { label: 'Failed', value: failedJobs, color: failedJobs > 0 ? 'red' : '' },
+    { label: 'Healthy', value: totalJobs - failedJobs, color: 'green' },
+  ].map(s => `<div class="card-clean"><div class="card-clean-body" style="padding:0.75rem 0"><h3 class="text-gray-500 text-sm">${s.label}</h3><p class="text-xl font-bold${s.color ? ` text-${s.color}-600` : ''}">${s.value}</p></div></div>`).join('')}</div>`;
+
+  const headers = '<th>Job</th><th>Schedule</th><th>Status</th><th>Last Run</th><th>Next Run</th><th>Duration</th><th>Result</th><th>Actions</th>';
+  const rows = jobs.map(j => jobRow(j, canManage)).join('');
+  const table = `<div class="card-clean" style="margin-bottom:1.5rem" style="overflow-x:auto"><div class="card-clean-body"><h3 class="font-semibold mb-3">Scheduled Jobs</h3><table class="data-table"><thead><tr>${headers}</tr></thead><tbody>${rows || '<tr><td colspan="8" class="text-center py-8 text-gray-500">No jobs configured</td></tr>'}</tbody></table></div></div>`;
+
+  const logRows = recentLogs.slice(0, 20).map(l => {
+    const sts = l.success ? '<span class="text-green-600">OK</span>' : '<span class="text-red-600">FAIL</span>';
+    return `<tr><td class="text-sm">${l.job_name || '-'}</td><td>${sts}</td><td class="text-xs text-gray-500">${fmtDate(l.started_at)}</td><td class="text-xs">${l.duration ? l.duration + 'ms' : '-'}</td><td class="text-xs text-gray-500 max-w-xs truncate">${l.message || '-'}</td></tr>`;
+  }).join('');
+  const logTable = `<div class="card-clean"><div class="card-clean-body"><h3 class="font-semibold mb-3">Recent Execution Logs</h3><table class="data-table"><thead><tr><th>Job</th><th>Result</th><th>Time</th><th>Duration</th><th>Message</th></tr></thead><tbody>${logRows || '<tr><td colspan="5" class="text-center py-4 text-gray-400">No recent logs</td></tr>'}</tbody></table></div></div>`;
+
+  const content = `<div class="flex justify-between items-center mb-6"><h1 class="text-2xl font-bold">Scheduled Jobs</h1>${canManage ? '<button class="btn btn-primary btn-sm" data-action="triggerAll">Run All Now</button>' : ''}</div>${statCards}${table}${logTable}`;
+
+  const jobScript = `window.triggerJob=async function(name){try{const r=await fetch('/api/admin/jobs/'+name+'/trigger',{method:'POST'});if(r.ok){location.reload()}else{alert('Trigger failed: '+(await r.text()))}}catch(e){alert(e.message)}};window.toggleJob=async function(name,enabled){try{const r=await fetch('/api/admin/jobs/'+name,{method:'PATCH',headers:{'Content-Type':'application/json'},body:JSON.stringify({enabled})});if(r.ok)location.reload();else alert('Toggle failed')}catch(e){alert(e.message)}};window.triggerAll=async function(){if(!confirm('Run all jobs now?'))return;try{const r=await fetch('/api/admin/jobs/trigger-all',{method:'POST'});if(r.ok)location.reload();else alert('Failed')}catch(e){alert(e.message)}}`;
+
+  return page(user, 'Scheduled Jobs | Moonlanding', [{ href: '/', label: 'Dashboard' }, { href: '/admin/settings', label: 'Settings' }, { label: 'Jobs' }], content, [jobScript]);
+}

package/src/ui/layout.js

@@ -0,0 +1,219 @@
+import { h } from '@/ui/webjsx.js'
+import { getNavItems, getAdminItems, isPartner, isClerk } from '@/ui/permissions-ui.js'
+import { TOAST_SCRIPT } from '@/ui/render-helpers.js'
+import { FETCH_JSON_SCRIPT } from '@/ui/fetch-json.js'
+import { aria, role, skipLink, liveRegion } from '@/lib/accessibility'
+
+export function generateHtml(title, bodyContent, scripts = [], pathname = '/') {
+  const scriptTags = scripts.map(s =>
+    typeof s === 'string' ? `<script>${s.replace(/<\/script/gi, '<\\/script').replace(/<!--/g, '<\\!--')}</script>` : `<script type="module" src="${s.src}"></script>`
+  ).join('\n')
+
+  const swRegistration = `
+  if ('serviceWorker' in navigator) {
+    window.addEventListener('load', () => {
+      navigator.serviceWorker.register('/service-worker.js').catch(() => {});
+    });
+  }`
+
+  return `<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+  <meta charset="UTF-8">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
+  <link href="/ui/rippleui.css" rel="stylesheet"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
+  <meta name="theme-color" content="#04141f">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <title>${title}</title>
+  <link rel="preload" href="/ui/client.js" as="script" crossorigin>
+  <link rel="preload" href="/ui/styles2.css" as="style">
+  <link href="/ui/styles2.css" rel="stylesheet"/>
+  <style>
+    .skip-link{position:absolute;left:-9999px;z-index:999;padding:0.5rem 1rem;background:#000;color:#fff;text-decoration:none}
+    .skip-link:focus{left:0;top:0}
+    *:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:2px}
+    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
+  </style>
+</head>
+<body>
+  ${skipLink('#main-content', 'Skip to main content')}
+  ${skipLink('#main-nav', 'Skip to navigation')}
+  ${liveRegion('announcements', 'polite')}
+  ${liveRegion('alerts', 'assertive')}
+  <div id="app">${bodyContent}</div>
+  <div id="ds-online-status" role="status" aria-live="polite">Offline</div>
+  <button id="flexup-fab" type="button" aria-label="Open FlexUp chat" data-action="toggleFlexup" style="display:none">FX</button>
+  <div id="flexup-dock" role="dialog" aria-label="FlexUp chat">
+    <div class="fx-header">FlexUp Assistant</div>
+    <div class="fx-body" id="flexup-body"><div class="fx-msg bot">Ask anything about this review.</div></div>
+    <div class="fx-input-row"><input class="fx-input" id="flexup-input" placeholder="Ask a question..." aria-label="Question"/><button class="fx-send" data-action="sendFlexup">Send</button></div>
+  </div>
+  <script>
+    (function(){var el=document.getElementById('ds-online-status');var prev=navigator.onLine;function up(){if(!el)return;var on=navigator.onLine;el.classList.toggle('offline',!on);el.textContent=on?'Online':'Offline';el.style.display=on?'none':'inline-block';if(on!==prev){if(window.showToast)window.showToast(on?'Back online':'You are offline',on?'success':'warning');prev=on}}window.addEventListener('online',up);window.addEventListener('offline',up);up();
+    if(/^\\/review\\//.test(location.pathname)){var fab=document.getElementById('flexup-fab');if(fab)fab.style.display='inline-block'}
+    window.toggleFlexup=function(){var d=document.getElementById('flexup-dock');if(d)d.classList.toggle('open')};
+    window.sendFlexup=async function(){var i=document.getElementById('flexup-input'),b=document.getElementById('flexup-body');if(!i||!b||!i.value.trim())return;var q=i.value.trim();var u=document.createElement('div');u.className='fx-msg user';u.textContent=q;b.appendChild(u);i.value='';var pid=location.pathname.match(/\\/review\\/([^/]+)/);try{var res=await fetch('/api/mwr/ml-ask?review_id='+(pid&&pid[1]||'')+'&q='+encodeURIComponent(q));var data=await res.json();var bot=document.createElement('div');bot.className='fx-msg bot';bot.textContent=(data&&(data.answer||data.message||data.error))||'(no response)';b.appendChild(bot);b.scrollTop=b.scrollHeight}catch(e){var er=document.createElement('div');er.className='fx-msg bot';er.textContent='Error: '+e.message;b.appendChild(er)}};
+    })();
+  </script>
+  <script type="importmap">
+  { "imports": { "webjsx": "/lib/webjsx/index.js", "webjsx/jsx-runtime": "/lib/webjsx/jsx-runtime.js" } }
+  </script>
+  <script>${FETCH_JSON_SCRIPT}</script>
+  <script src="/ui/event-delegation.js"></script>
+  <script type="module" src="/ui/client.js"></script>
+  ${scriptTags}
+  <script>${swRegistration}</script>
+</body>
+</html>`
+}
+
+export function breadcrumb(items) {
+  if (!items?.length) return ''
+  return `<nav ${aria.label('Breadcrumb')} class="breadcrumb-clean">${items.map((item, i) =>
+    i === items.length - 1
+      ? `<span ${aria.current('page')}>${item.label}</span>`
+      : `<a href="${item.href}">${item.label}</a><span class="breadcrumb-sep" aria-hidden="true">/</span>`
+  ).join('')}</nav>`
+}
+
+export function nav(user, pathname = '') {
+  const logoSvg = `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>`
+  const hamburgerSvg = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>`
+
+  const isActive = (href) => pathname && (pathname === href || (href !== '/' && pathname.startsWith(href)))
+  const linkClass = (href) => isActive(href) ? 'nav-link-active' : 'nav-link'
+
+  const engLink = !isClerk(user) ? `<a href="/engagements" class="${linkClass('/engagements')}">Engagements</a>` : ''
+  const clientLink = !isClerk(user) ? `<a href="/client" class="${linkClass('/client')}">Clients</a>` : ''
+  const settingsLink = isPartner(user) ? `<a href="/admin/settings" class="${linkClass('/admin/settings')}">Settings</a>` : ''
+  const reviewLink = `<a href="/review" class="${linkClass('/review')}">My Review</a>`
+
+  const avatarInitial = user?.name?.charAt(0)?.toUpperCase() || 'U'
+  const avatarColors = ['#1565c0','#2e7d32','#6a1b9a','#c62828','#e65100','#00695c']
+  const avatarBg = avatarColors[(user?.name?.charCodeAt(0) || 0) % avatarColors.length]
+
+  return `<nav id="main-nav" class="main-nav" ${role.navigation} ${aria.label('Main navigation')}>
+  <div class="main-nav-brand">
+    <a href="/" class="main-nav-brand-link" ${aria.label('Home')}>
+      ${logoSvg}
+      <span class="main-nav-brand-text">Moonlanding</span>
+    </a>
+  </div>
+  <div class="nav-links-desktop" style="align-items:center;gap:1.25rem;flex-shrink:0">
+    ${engLink}${clientLink}${settingsLink}${reviewLink}
+  </div>
+  <div class="main-nav-actions">
+    <button id="theme-toggle" type="button" data-action="toggleTheme" aria-label="Toggle dark mode" title="Toggle theme" style="background:none;border:none;color:#ced4da;cursor:pointer;padding:6px;border-radius:4px;display:flex;align-items:center;min-width:32px;min-height:32px">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+    </button>
+    <a href="/notifications" id="notif-bell" aria-label="Notifications" title="Notifications" style="position:relative;color:#ced4da;display:flex;align-items:center;padding:6px;border-radius:4px;text-decoration:none">
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
+      <span id="notif-count" style="display:none;position:absolute;top:2px;right:2px;background:#ef4444;color:#fff;border-radius:9999px;font-size:10px;font-weight:700;min-width:16px;height:16px;line-height:16px;text-align:center;padding:0 3px"></span>
+    </a>
+    <div class="nav-avatar" style="background:${avatarBg}" id="user-avatar" data-action="toggleUserMenu" data-pass-event title="${user?.name || 'User'}" aria-label="User menu" role="button" tabindex="0">
+      ${avatarInitial}
+    </div>
+    <button class="nav-hamburger" data-action="toggleMobileNav" aria-label="Toggle navigation menu" aria-expanded="false" aria-controls="mobile-nav-drawer" style="background:none;border:none;color:#ced4da;cursor:pointer;padding:8px;border-radius:4px;align-items:center;justify-content:center;min-width:44px;min-height:44px">
+      ${hamburgerSvg}
+    </button>
+  </div>
+  <div id="user-dropdown" class="user-dropdown" ${role.menu}>
+    <div class="user-dropdown-header">
+      <div class="user-dropdown-name">${user?.name || ''}</div>
+      <div class="user-dropdown-email">${user?.email || ''}</div>
+      <div class="user-dropdown-role" style="text-transform:capitalize">${user?.role || ''}</div>
+    </div>
+    <a href="/api/auth/logout" class="user-dropdown-item">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
+      Sign out
+    </a>
+  </div>
+</nav>
+<div id="mobile-nav-drawer" style="display:none;position:fixed;inset:0;z-index:200;pointer-events:none" aria-hidden="true">
+  <div data-action="closeMobileNav" style="position:absolute;inset:0;background:rgba(0,0,0,0.5);pointer-events:auto"></div>
+  <div style="position:absolute;left:0;top:0;bottom:0;width:280px;max-width:80vw;background:#04141f;padding:0;display:flex;flex-direction:column;transform:translateX(-100%);transition:transform 0.25s ease" id="mobile-nav-panel">
+    <div class="mobile-nav-header-bar">
+      <span class="mobile-nav-header-title">Moonlanding</span>
+      <button data-action="closeMobileNav" class="mobile-nav-close-btn" aria-label="Close menu">&times;</button>
+    </div>
+    <nav style="flex:1;padding:0.5rem 0;overflow-y:auto">
+      <a href="/" class="mobile-nav-link">Dashboard</a>
+      ${!isClerk(user) ? `<a href="/engagements" class="mobile-nav-link">Engagements</a>` : ''}
+      ${!isClerk(user) ? `<a href="/client" class="mobile-nav-link">Clients</a>` : ''}
+      <a href="/review" class="mobile-nav-link">My Review</a>
+      ${isPartner(user) ? `<a href="/admin/settings" class="mobile-nav-link">Settings</a>` : ''}
+    </nav>
+    <div class="mobile-nav-footer">
+      <div class="mobile-nav-user-name">${user?.name || ''}</div>
+      <div class="mobile-nav-user-email">${user?.email || ''}</div>
+      <a href="/api/auth/logout" class="mobile-nav-logout">Sign out</a>
+    </div>
+  </div>
+</div>
+<div id="idle-warning-dialog" class="confirm-overlay" style="display:none" ${role.alertdialog} ${aria.labelledBy('idle-dialog-title')} ${aria.describedBy('idle-dialog-msg')} ${aria.hidden('true')}>
+  <div class="confirm-dialog">
+    <h2 id="idle-dialog-title" class="confirm-title">Session Expiring</h2>
+    <div id="idle-dialog-msg" class="confirm-message">Your session will expire due to inactivity. You will be logged out in <span id="idle-countdown" ${aria.live('polite')}>5:00</span>.</div>
+    <div class="confirm-actions"><button type="button" data-action="stayLoggedIn" class="btn btn-primary" ${aria.label('Stay logged in and reset timeout')}>Stay Logged In</button></div>
+  </div>
+</div>
+<script>
+window.loadingBtn=function(btn,loading,label){if(!btn)return;btn.disabled=loading;btn.style.opacity=loading?'0.7':'1';if(loading){btn._orig=btn.innerHTML;btn.innerHTML='<span class="btn-spinner"></span>'+(label||'Loading...');}else{btn.innerHTML=btn._orig||label||btn.innerHTML;btn.disabled=false}}
+window.showToast=window.showToast||function(m,t){var c=document.getElementById('toast-container');if(!c){c=document.createElement('div');c.id='toast-container';c.className='toast-container';document.body.appendChild(c)}var d=document.createElement('div');d.className='toast toast-'+(t||'info');d.textContent=m;c.appendChild(d);setTimeout(function(){d.style.opacity='0';setTimeout(function(){d.remove()},300)},3000)}
+window.toggleTheme=function(){var cur=document.documentElement.getAttribute('data-theme')||'light';var next=cur==='dark'?'light':'dark';document.documentElement.setAttribute('data-theme',next);try{localStorage.setItem('moonlanding-theme',next)}catch(_){}}
+;(function(){try{var saved=localStorage.getItem('moonlanding-theme');if(saved){document.documentElement.setAttribute('data-theme',saved)}else if(window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches){document.documentElement.setAttribute('data-theme','dark')}}catch(_){}})();
+function toggleUserMenu(e){e.stopPropagation();var d=document.getElementById('user-dropdown');var visible=d.style.display==='block';d.style.display=visible?'none':'block'}
+document.addEventListener('click',function(e){var d=document.getElementById('user-dropdown');if(d&&!d.contains(e.target)&&e.target.id!=='user-avatar'){d.style.display='none'}})
+function toggleMobileNav(){var btn=document.querySelector('.nav-hamburger');var open=btn.getAttribute('aria-expanded')==='true';btn.setAttribute('aria-expanded',String(!open));var drawer=document.getElementById('mobile-nav-drawer');var panel=document.getElementById('mobile-nav-panel');drawer.style.display=open?'none':'block';drawer.setAttribute('aria-hidden',String(open));panel.style.transform=open?'translateX(-100%)':'translateX(0)'}
+function closeMobileNav(){var btn=document.querySelector('.nav-hamburger');if(btn)btn.setAttribute('aria-expanded','false');var drawer=document.getElementById('mobile-nav-drawer');var panel=document.getElementById('mobile-nav-panel');if(drawer){drawer.style.display='none';drawer.setAttribute('aria-hidden','true');if(panel)panel.style.transform='translateX(-100%)'}}
+document.addEventListener('keydown',function(e){if(e.key==='Escape')closeMobileNav()})
+;(function(){var WARN_MS=25*60*1000,LOGOUT_MS=30*60*1000,last=Date.now(),warnTimer=null,logoutTimer=null,countdownId=null;
+function reset(){last=Date.now();hideWarning();clearTimers();schedule()}
+function schedule(){warnTimer=setTimeout(showWarning,WARN_MS);logoutTimer=setTimeout(doLogout,LOGOUT_MS)}
+function clearTimers(){if(warnTimer){clearTimeout(warnTimer);warnTimer=null}if(logoutTimer){clearTimeout(logoutTimer);logoutTimer=null}if(countdownId){clearInterval(countdownId);countdownId=null}}
+function showWarning(){var dlg=document.getElementById('idle-warning-dialog');if(dlg)dlg.style.display='flex';var remaining=LOGOUT_MS-(Date.now()-last);countdownId=setInterval(function(){remaining-=1000;if(remaining<=0){clearInterval(countdownId);doLogout();return}var m=Math.floor(remaining/60000),s=Math.floor((remaining%60000)/1000);var el=document.getElementById('idle-countdown');if(el)el.textContent=m+':'+(s<10?'0':'')+s},1000)}
+function hideWarning(){var dlg=document.getElementById('idle-warning-dialog');if(dlg)dlg.style.display='none'}
+function doLogout(){clearTimers();window.location.href='/api/auth/logout'}
+window.stayLoggedIn=function(){fetch('/api/auth/me',{credentials:'same-origin'}).catch(function(){});reset()};
+['mousemove','keypress','click','scroll','touchstart'].forEach(function(evt){document.addEventListener(evt,function(){var now=Date.now();if(now-last>60000){last=now;clearTimers();schedule()}else{last=now}},true)});
+schedule()})();
+</script>`
+}
+
+const NOTIF_SCRIPT = `(function(){function loadNotifCount(){fetch('/api/notifications?unread=1',{credentials:'same-origin'}).then(function(r){return r.json()}).then(function(d){var n=(d.data||[]).length;var el=document.getElementById('notif-count');if(!el)return;if(n>0){el.textContent=n>99?'99+':n;el.style.display='block'}else{el.style.display='none'}}).catch(function(){})}loadNotifCount();setInterval(loadNotifCount,60000)})();`;
+
+export function page(user, title, bc, content, scripts = []) {
+  const authData = user ? JSON.stringify({ id: user.id, name: user.name, email: user.email, role: user.role }) : 'null'
+  const authScript = `window.__AUTH__=${authData};`
+  const body = `<div class="min-h-screen">${nav(user)}<main id="main-content" ${role.main} class="page-shell">${breadcrumb(bc)}${content}</main></div>`
+  return generateHtml(title, body, [authScript, NOTIF_SCRIPT, ...scripts])
+}
+
+export function fullPage(user, title, content, scripts = []) {
+  const authData = user ? JSON.stringify({ id: user.id, name: user.name, email: user.email, role: user.role }) : 'null'
+  const authScript = `window.__AUTH__=${authData};`
+  const body = `<div class="min-h-screen flex flex-col">${nav(user)}<main id="main-content" ${role.main} class="page-shell-flush flex-1 flex flex-col">${content}</main></div>`
+  return generateHtml(title, body, [authScript, ...scripts])
+}
+
+export function statCards(cards) {
+  return `<div class="stats shadow w-full mb-6 flex-wrap">` +
+    cards.map(c => `<div class="stat"><div class="stat-title">${c.label}</div><div class="stat-value text-2xl${c.textClass || ''}">${c.value}</div>${c.sub ? `<div class="stat-desc">${c.sub}</div>` : ''}</div>`).join('') +
+    `</div>`
+}
+
+export function confirmDialog(entityName) {
+  return `<div id="confirm-dialog" class="confirm-overlay" style="display:none" ${role.alertdialog} ${aria.labelledBy('confirm-title')} ${aria.describedBy('confirm-msg')} ${aria.hidden('true')}>
+    <div class="confirm-dialog"><h2 id="confirm-title" class="confirm-title">Confirm Delete</h2>
+    <div id="confirm-msg" class="confirm-message">Are you sure you want to delete this item? This action cannot be undone.</div>
+    <div class="confirm-actions"><button type="button" data-action="cancelDelete" class="btn btn-ghost" ${aria.label('Cancel deletion')}>Cancel</button>
+    <button type="button" id="confirm-delete-btn" data-action="executeDelete" class="btn btn-error" ${aria.label('Confirm deletion')}>Delete</button></div></div></div>`
+}
+
+export function dataTable(headers, rows, emptyMsg) {
+  return `<div class="card-clean"><div class="table-wrap" ${role.region} ${aria.label('Data table')}><table class="data-table"><thead><tr>${headers}</tr></thead><tbody id="table-body">${rows || `<tr><td colspan="100" class="text-center py-8 text-base-content/50">${emptyMsg}</td></tr>`}</tbody></table></div></div>`
+}

package/src/ui/letter-dialogs.js

@@ -0,0 +1,37 @@
+export function engagementLetterDialog(engagementId) {
+  return `<div id="eng-letter-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="eng-letter-dialog-title" aria-hidden="true">
+    <div class="dialog-panel" style="max-width:640px">
+      <div class="dialog-header"><span class="dialog-title" id="eng-letter-dialog-title">Engagement Letter</span><button class="dialog-close" data-dialog-close="eng-letter-dialog" aria-label="Close dialog">&times;</button></div>
+      <div class="dialog-body">
+        <div class="modal-form-group"><label for="eld-template">Template</label><select id="eld-template" class="select select-bordered w-full" onchange="eldLoadTemplate()"><option value="">Select template...</option></select></div>
+        <div class="modal-form-group"><label for="eld-date">Letter Date</label><input type="date"  id="eld-date" class="input input-bordered w-full"/></div>
+        <div class="modal-form-group"><label for="eld-recipient">Recipient Name</label><input id="eld-recipient" class="input input-bordered w-full" placeholder="Client contact name"/></div>
+        <div class="modal-form-group"><label for="eld-content">Content</label><textarea id="eld-content" class="textarea textarea-bordered w-full" rows="8" placeholder="Letter content..."></textarea></div>
+      </div>
+      <div class="dialog-footer"><button class="btn btn-ghost btn-sm" data-dialog-close="eng-letter-dialog">Cancel</button><button class="btn btn-outline btn-sm" data-action="eldPreview">Preview</button><button class="btn btn-primary btn-sm" data-action="eldSave">Save Letter</button></div>
+    </div></div>
+  <script>
+  (function(){fetch('/api/letter_template').then(function(r){return r.json()}).then(function(d){var sel=document.getElementById('eld-template');(d.data||d||[]).forEach(function(t){var o=document.createElement('option');o.value=t.id;o.textContent=t.name||t.id;sel.appendChild(o)})}).catch(function(){})})();
+  window.openEngLetter=function(){document.getElementById('eng-letter-dialog').style.display='flex'};
+  window.eldLoadTemplate=function(){var id=document.getElementById('eld-template').value;if(!id)return;fetch('/api/letter_template/'+id).then(function(r){return r.json()}).then(function(d){var t=d.data||d;document.getElementById('eld-content').value=t.content||t.body||''}).catch(function(){})};
+  window.eldPreview=function(){var content=document.getElementById('eld-content').value;var w=window.open('','_blank','width=800,height=600');w.document.write('<html><body style="padding:2rem;font-family:serif;max-width:700px;margin:auto"><h2>Engagement Letter</h2><p>Date: '+(document.getElementById('eld-date').value||'-')+'</p><p>To: '+(document.getElementById('eld-recipient').value||'-')+'</p><hr/><div style="white-space:pre-wrap">'+content+'</div></body></html>');w.document.close()};
+  window.eldSave=async function(){var body={engagement_id:'${engagementId}',template_id:document.getElementById('eld-template').value||null,date:document.getElementById('eld-date').value||null,recipient:document.getElementById('eld-recipient').value||null,content:document.getElementById('eld-content').value};try{var r=await fetch('/api/letter',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});if(r.ok){showToast('Letter saved','success');document.getElementById('eng-letter-dialog').style.display='none';location.reload()}else showToast('Failed','error')}catch(e){showToast('Error','error')}};
+  </script>`;
+}
+
+export function engagementLetterTemplateUpload() {
+  return `<div id="letter-tpl-upload" 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="letter-tpl-upload-title" aria-hidden="true">
+    <div class="dialog-panel">
+      <div class="dialog-header"><span class="dialog-title" id="letter-tpl-upload-title">Upload Letter Template</span><button class="dialog-close" data-dialog-close="letter-tpl-upload" aria-label="Close dialog">&times;</button></div>
+      <div class="dialog-body">
+        <div class="modal-form-group"><label for="ltu-name">Template Name</label><input id="ltu-name" class="input input-bordered w-full" placeholder="Template name"/></div>
+        <div class="modal-form-group"><label for="ltu-file">Template File</label><input type="file"  id="ltu-file" class="file-input file-input-bordered w-full" accept=".docx,.doc,.html,.txt"/></div>
+        <div class="modal-form-group"><label for="ltu-content">Or paste content</label><textarea id="ltu-content" class="textarea textarea-bordered w-full" rows="5" placeholder="Template content..."></textarea></div>
+      </div>
+      <div class="dialog-footer"><button class="btn btn-ghost btn-sm" data-dialog-close="letter-tpl-upload">Cancel</button><button class="btn btn-primary btn-sm" data-action="ltuSave">Save Template</button></div>
+    </div></div>
+  <script>
+  window.openLetterTemplateUpload=function(){document.getElementById('letter-tpl-upload').style.display='flex'};
+  window.ltuSave=async function(){var name=document.getElementById('ltu-name').value.trim();if(!name){showToast('Name required','error');return}var file=document.getElementById('ltu-file').files[0];var content=document.getElementById('ltu-content').value;if(file){var fd=new FormData();fd.append('file',file);fd.append('name',name);try{var r=await fetch('/api/letter_template/upload',{method:'POST',body:fd});if(r.ok){showToast('Template uploaded','success');document.getElementById('letter-tpl-upload').style.display='none';location.reload()}else showToast('Upload failed','error')}catch(e){showToast('Error','error')}}else if(content){try{var r=await fetch('/api/letter_template',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name:name,content:content})});if(r.ok){showToast('Template saved','success');document.getElementById('letter-tpl-upload').style.display='none';location.reload()}else showToast('Failed','error')}catch(e){showToast('Error','error')}}else{showToast('Provide file or content','error')}};
+  </script>`;
+}

package/src/ui/ml-console-renderer.js

@@ -0,0 +1,108 @@
+// ML / AI query console — lists highlight comments flagged as ML-candidate queries.
+// MVP: read-only list of highlights with comment text + link back to the source review.
+// Full AI integration (model invocation, response streaming) is out of scope — stub.
+
+import { page } from '@/ui/layout.js';
+import { esc } from '@/ui/render-helpers.js';
+import { SPACING } from '@/ui/spacing-system.js';
+
+function fmtDate(ts) {
+    if (!ts) return '-';
+    const n = typeof ts === 'number' ? (ts > 1e10 ? ts : ts * 1000) : Date.parse(ts);
+    if (!n || isNaN(n)) return '-';
+    return new Date(n).toLocaleDateString('en-ZA', { day: '2-digit', month: 'short', year: 'numeric' });
+}
+
+export function renderMlConsole(user, candidates, reviewMap) {
+    const rows = candidates.map((h) => {
+        const reviewName = reviewMap[h.review_id] || '-';
+        const comment = h.comment || h.text || '';
+        const truncated = comment.length > 240 ? comment.slice(0, 240) + '…' : comment;
+        return `<tr>
+            <td style="padding:8px 10px;border-bottom:1px solid var(--color-border);font-size:13px">
+                <div style="font-weight:500">${esc(reviewName)}</div>
+                <div style="font-size:11px;color:var(--color-text-muted);margin-top:2px">p.${h.page_number || '?'}</div>
+            </td>
+            <td style="padding:8px 10px;border-bottom:1px solid var(--color-border);font-size:13px;max-width:560px">${esc(truncated)}</td>
+            <td style="padding:8px 10px;border-bottom:1px solid var(--color-border);font-size:12px;color:var(--color-text-muted);white-space:nowrap">${fmtDate(h.created_at)}</td>
+            <td style="padding:8px 10px;border-bottom:1px solid var(--color-border);text-align:right">
+                <a href="/review/${esc(h.review_id)}/pdf#h-${esc(h.id)}" class="btn-ghost-clean" style="padding:4px 10px;font-size:12px">Open</a>
+                <button data-action="runMlQuery" data-args='["${esc(h.id)}"]' class="btn-primary-clean" style="padding:4px 10px;font-size:12px;margin-left:4px">Ask AI</button>
+            </td>
+        </tr>`;
+    }).join('') || `<tr><td colspan="4" style="padding:48px;text-align:center;color:var(--color-text-muted);font-size:13px">
+        No highlights have been flagged as ML-query candidates yet.<br>
+        <span style="font-size:12px">Mark a highlight with the ML flag to see it here.</span>
+    </td></tr>`;
+
+    const content = `<div style="margin:0 auto;max-width:1100px;padding:${SPACING.lg}">
+        <div class="page-header">
+            <div>
+                <h1 class="page-title">AI / ML Query Console</h1>
+                <div style="font-size:13px;color:var(--color-text-muted);margin-top:4px">
+                    ${candidates.length} flagged highlight${candidates.length === 1 ? '' : 's'} pending AI assistance.
+                </div>
+            </div>
+        </div>
+        <div style="background:var(--color-surface,white);border:1px solid var(--color-border);border-radius:8px;overflow:hidden;margin-top:${SPACING.md}">
+            <table style="width:100%;border-collapse:collapse">
+                <thead>
+                    <tr style="background:var(--color-surface-muted,#f8fafc)">
+                        <th style="padding:10px;text-align:left;font-size:12px;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.5px">Review</th>
+                        <th style="padding:10px;text-align:left;font-size:12px;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.5px">Comment</th>
+                        <th style="padding:10px;text-align:left;font-size:12px;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.5px">Created</th>
+                        <th style="padding:10px;text-align:right;font-size:12px;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:0.5px">Actions</th>
+                    </tr>
+                </thead>
+                <tbody>${rows}</tbody>
+            </table>
+        </div>
+        <div style="margin-top:${SPACING.md};padding:${SPACING.md};background:var(--color-surface-muted,#f8fafc);border-radius:8px;font-size:13px;color:var(--color-text-muted)">
+            <strong>Note:</strong> Full AI integration requires an external model service.
+            Clicking "Ask AI" currently records an intent; plumbing to a model endpoint is
+            the next implementation step.
+        </div>
+    </div>
+    <div id="ml-ask-dialog" class="modal" style="display:none" data-dialog-close-overlay="true">
+      <div class="modal-overlay" data-dialog-close="ml-ask-dialog"></div>
+      <div class="modal-content rounded-box max-w-lg p-6">
+        <h3 style="font-size:16px;font-weight:600;margin:0 0 12px 0">AI Suggestion</h3>
+        <div id="ml-ask-query" style="font-size:13px;color:var(--color-text-muted);margin-bottom:12px;padding:8px 10px;background:var(--color-surface-muted,#f8fafc);border-radius:6px"></div>
+        <div id="ml-ask-result" style="font-size:14px;white-space:pre-wrap;min-height:60px;padding:10px;background:white;border:1px solid var(--color-border);border-radius:6px">
+          <div style="color:var(--color-text-muted);font-style:italic">Generating suggestion…</div>
+        </div>
+        <div id="ml-ask-meta" style="font-size:11px;color:var(--color-text-muted);margin-top:8px"></div>
+        <div class="modal-action" style="margin-top:16px">
+          <button data-dialog-close="ml-ask-dialog" class="btn btn-ghost">Close</button>
+        </div>
+      </div>
+    </div>
+    <script>
+    (function(){
+      window.runMlQuery = async function(highlightId){
+        var row = document.querySelector('[data-args=\\'["'+highlightId+'"]\\']').closest('tr');
+        var qText = row ? row.querySelector('td:nth-child(2)').textContent.trim() : '';
+        var dlg = document.getElementById('ml-ask-dialog');
+        document.getElementById('ml-ask-query').textContent = qText;
+        document.getElementById('ml-ask-result').innerHTML = '<div style="color:#64748b;font-style:italic">Generating suggestion…</div>';
+        document.getElementById('ml-ask-meta').textContent = '';
+        dlg.style.display = 'flex';
+        try {
+          var r = await fetch('/api/mwr/ml-ask', { method:'POST', headers:{'Content-Type':'application/json'}, credentials:'include', body: JSON.stringify({ highlight_id: highlightId }) });
+          var d = await r.json();
+          if (d.success) {
+            document.getElementById('ml-ask-result').textContent = d.suggestion || '(empty)';
+            document.getElementById('ml-ask-meta').textContent = d.mode === 'live' ? ('Model: ' + (d.model || '?') + (d.usage ? ' · ' + (d.usage.input_tokens||0) + ' in / ' + (d.usage.output_tokens||0) + ' out' : '')) : ('Mode: ' + (d.mode || 'stub'));
+          } else {
+            document.getElementById('ml-ask-result').textContent = 'Error: ' + (d.error || 'unknown');
+          }
+        } catch (e) {
+          document.getElementById('ml-ask-result').textContent = 'Network error: ' + e.message;
+        }
+      };
+    })();
+    </script>`;
+
+    const bc = [{ href: '/', label: 'Home' }, { href: '/review', label: 'Reviews' }, { label: 'ML Console' }];
+    return page(user, 'AI / ML Query Console | Moonlanding', bc, content);
+}