thatcher 1.0.4

package/src/ui/settings-renderer.js

@@ -0,0 +1,166 @@
+import { page } from '@/ui/layout.js';
+import { TOAST_SCRIPT, TABLE_SCRIPT, statusBadge as _statusBadge } from '@/ui/render-helpers.js';
+import { SPACING, renderCard } from '@/ui/spacing-system.js';
+
+export { TOAST_SCRIPT } from '@/ui/render-helpers.js';
+
+export function settingsPage(user, title, bc, content, scripts = []) {
+  return page(user, title, bc, content, scripts);
+}
+
+export function settingsBack() {
+  return `<a href="/admin/settings" class="btn btn-ghost btn-sm gap-1 mb-4">&#8592; Back to Settings</a>`;
+}
+
+export function inlineTable(headers, rows, emptyMsg) {
+  const ths = headers.map(h => `<th>${h}</th>`).join('');
+  const empty = `<tr><td colspan="${headers.length}" class="text-center py-8 text-base-content/40 text-sm">${emptyMsg}</td></tr>`;
+  return `<div class="table-wrap"><table class="data-table"><thead><tr>${ths}</tr></thead><tbody>${rows || empty}</tbody></table></div>`;
+}
+
+const KNOWN_ROLE_LABELS = { admin:'Admin', partner:'Partner', manager:'Manager', clerk:'Clerk', user:'User', auditor:'Auditor', client_admin:'Client Admin', client_user:'Client User' };
+
+export function roleBadge(role) {
+  const r = (role || '').toLowerCase();
+  const pillMap = { admin:'pill pill-danger', partner:'pill pill-info', manager:'pill pill-success', clerk:'pill pill-warning', user:'pill pill-neutral', auditor:'pill pill-neutral', client_admin:'pill pill-info', client_user:'pill pill-neutral' };
+  const cls = pillMap[r] || 'pill pill-neutral';
+  const label = KNOWN_ROLE_LABELS[r] || (r.length > 20 ? 'Staff' : (r.charAt(0).toUpperCase() + r.slice(1))) || 'Staff';
+  return `<span class="${cls}">${label}</span>`;
+}
+
+function statusBadge(status) { return _statusBadge(status); }
+
+const SETTINGS_CARDS = [
+  { key: 'system', icon: '&#9881;', title: 'System Info', desc: 'Database, server, cache configuration', href: '/admin/settings/system' },
+  { key: 'users', icon: '&#128100;', title: 'Users', desc: 'Manage user accounts and roles', href: '/admin/settings/users', countKey: 'users' },
+  { key: 'teams', icon: '&#128101;', title: 'Teams', desc: 'Manage audit teams', href: '/admin/settings/teams', countKey: 'teams' },
+  { key: 'rfi-sections', icon: '&#128193;', title: 'RFI Sections', desc: 'Manage RFI section categories and colors', href: '/admin/settings/rfi-sections', countKey: 'rfiSections' },
+  { key: 'templates', icon: '&#128196;', title: 'Templates', desc: 'Review templates and sections', href: '/admin/settings/templates', countKey: 'templates' },
+  { key: 'notifications', icon: '&#128276;', title: 'Notifications', desc: 'Configure alerts, reminders, and reports', href: '/admin/settings/notifications' },
+  { key: 'integrations', icon: '&#128279;', title: 'Integrations', desc: 'Google Drive, Gmail, and external services', href: '/admin/settings/integrations' },
+  { key: 'checklists', icon: '&#9745;', title: 'Checklists', desc: 'Manage checklist definitions', href: '/admin/settings/checklists', countKey: 'checklists' },
+  { key: 'rfi-templates', icon: '&#128203;', title: 'RFI Templates', desc: 'Manage RFI template definitions', href: '/admin/settings/rfi-templates', countKey: 'rfiTemplates' },
+  { key: 'recreation', icon: '&#128203;', title: 'Audit Logs', desc: 'Audit trail, recreation history and event log', href: '/admin/settings/recreation' },
+  { key: 'entity-types', icon: '&#127970;', title: 'Entity Types', desc: 'Manage client entity type definitions', href: '/admin/settings/entity-types', countKey: 'entityTypes' },
+  { key: 'engagement-types', icon: '&#128196;', title: 'Engagement Types', desc: 'Manage engagement type definitions', href: '/admin/settings/engagement-types', countKey: 'engagementTypes' },
+  { key: 'permissions', icon: '&#128274;', title: 'Permissions', desc: 'MWR permissions and access control', href: '/admin/settings/permissions' },
+];
+
+export function renderSettingsHome(user, config = {}, counts = {}) {
+  const cards = SETTINGS_CARDS.map(c => {
+    const cnt = c.countKey && counts[c.countKey] !== undefined ? counts[c.countKey] : null;
+    const badge = cnt !== null ? `<span class="badge badge-flat-primary text-xs">${cnt.toLocaleString()} items</span>` : '';
+    return `<a href="${c.href}" class="card-clean" style="text-decoration:none;border:1px solid var(--color-border);transition:box-shadow 0.15s">
+      <div class="card-clean-body" style="padding:${SPACING.md}">
+        <div style="display:flex;align-items:flex-start;gap:${SPACING.md}">
+          <div style="font-size:1.25rem;width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;background:var(--color-base-200);border-radius:8px;flex-shrink:0">${c.icon}</div>
+          <div style="flex:1;min-width:0">
+            <div style="font-weight:600;font-size:0.875rem;color:var(--color-base-content)">${c.title}</div>
+            <div style="font-size:0.75rem;color:var(--color-text-muted);margin-top:${SPACING.xs};line-height:1.4">${c.desc}</div>
+            ${badge ? `<div style="margin-top:${SPACING.sm}">${badge}</div>` : ''}
+          </div>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink:0;color:var(--color-text-muted);margin-top:${SPACING.xs}"><polyline points="9 18 15 12 9 6"/></svg>
+        </div>
+      </div>
+    </a>`;
+  }).join('');
+  const content = `
+    <div class="flex items-center justify-between mb-6">
+      <div><h1 class="text-2xl font-bold text-base-content">Settings</h1><p class="text-sm text-base-content/50 mt-1">System configuration and administration</p></div>
+    </div>
+    <div class="settings-home-grid">${cards}</div>`;
+  return settingsPage(user, 'Settings', [{ href: '/', label: 'Dashboard' }, { label: 'Settings' }], content);
+}
+
+export function renderSettingsSystem(user, config = {}) {
+  const t = config.thresholds || {};
+  const sections = [
+    { icon: '🗄️', title: 'System Information', items: [['Database Type', config.database?.type || 'SQLite'], ['Server Port', config.server?.port || 3004], ['Session TTL', (t.cache?.session_ttl_seconds || 3600) + 's'], ['Page Size (Default)', t.system?.default_page_size || 50], ['Page Size (Max)', t.system?.max_page_size || 500]] },
+    { icon: '📋', title: 'RFI Configuration', items: [['Max Days Outstanding', (t.rfi?.max_days_outstanding || 90) + ' days'], ['Escalation Delay', (t.rfi?.escalation_delay_hours || 24) + ' hours'], ['Notification Days', (t.rfi?.notification_days || [7, 3, 1, 0]).join(', ')]] },
+    { icon: '✉️', title: 'Email Configuration', items: [['Batch Size', t.email?.send_batch_size || 10], ['Max Retries', t.email?.send_max_retries || 3], ['Rate Limit Delay', (t.email?.rate_limit_delay_ms || 6000) + 'ms']] },
+    { icon: '⚙️', title: 'Workflow Configuration', items: [['Stage Transition Lockout', (t.workflow?.stage_transition_lockout_minutes || 5) + ' min'], ['Collaborator Default Expiry', (t.collaborator?.default_expiry_days || 7) + ' days'], ['Collaborator Max Expiry', (t.collaborator?.max_expiry_days || 30) + ' days']] },
+  ];
+  const cards = sections.map(s => `<div class="card-clean">
+    <div class="card-clean-body" style="padding:1rem">
+      <h2 class="font-semibold text-sm flex items-center gap-2 mb-3"><span>${s.icon}</span> ${s.title}</h2>
+      ${s.items.map(([l, v]) => `<div class="flex justify-between items-center py-2 border-b border-base-200 last:border-0">
+        <span class="text-sm text-base-content/60">${l}</span>
+        <span class="text-sm font-semibold font-mono bg-base-200 px-2 py-0.5 rounded">${v}</span>
+      </div>`).join('')}
+    </div>
+  </div>`).join('');
+  const content = `${settingsBack()}
+    <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1.5rem">
+      <h1 class="text-2xl font-bold">System Info</h1>
+      <span class="badge badge-flat-success text-xs">Read-only</span>
+    </div>
+    <div class="settings-info-grid">${cards}</div>`;
+  return settingsPage(user, 'System Info - Settings', [{ href: '/', label: 'Dashboard' }, { href: '/admin/settings', label: 'Settings' }, { label: 'System Info' }], content);
+}
+
+export function renderSettingsUsers(user, users = []) {
+  const active = users.filter(u => (u.status||'active') === 'active').length;
+  const rows = users.map(u => `<tr class="hover cursor-pointer" data-row data-navigate="/user/${u.id}">
+    <td data-col="name">
+      <div class="flex items-center gap-2">
+        <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-xs font-bold text-primary flex-shrink-0">${(u.name||'?').charAt(0).toUpperCase()}</div>
+        <div>
+          <div class="text-sm font-medium">${u.name || '-'}</div>
+          <div class="text-xs text-base-content/50">${u.email || ''}</div>
+        </div>
+      </div>
+    </td>
+    <td data-col="role">${roleBadge(u.role || '-')}</td>
+    <td data-col="status">${statusBadge(u.status)}</td>
+    <td><a href="/user/${u.id}/edit" data-stop-propagation="true" class="btn btn-ghost btn-xs">Edit</a></td>
+  </tr>`).join('');
+
+  const content = `${settingsBack()}
+  <div class="flex justify-between items-center mb-2">
+    <div>
+      <h1 class="text-2xl font-bold">Users</h1>
+      <p class="text-sm text-base-content/50 mt-0.5">${users.length} total &middot; ${active} active</p>
+    </div>
+    <a href="/user/new" class="btn btn-primary btn-sm gap-1">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> Add User
+    </a>
+  </div>
+  <div class="table-toolbar mb-3">
+    <div class="table-search"><input id="search-input" type="text" placeholder="Search users..."></div>
+    <div class="table-filter">
+      <select data-filter="role">
+        <option value="">All roles</option>
+        <option value="admin">Admin</option>
+        <option value="partner">Partner</option>
+        <option value="manager">Manager</option>
+        <option value="clerk">Clerk</option>
+        <option value="auditor">Auditor</option>
+        <option value="user">User</option>
+      </select>
+    </div>
+    <div class="table-filter">
+      <select data-filter="status">
+        <option value="">All statuses</option>
+        <option value="active">Active</option>
+        <option value="inactive">Inactive</option>
+      </select>
+    </div>
+    <span class="table-count" id="row-count">${users.length} items</span>
+  </div>
+  <div class="card-clean">
+    <div class="card-clean-body" style="padding:0rem">
+      <div class="table-wrap"><table class="data-table">
+        <thead><tr>
+          <th data-sort="name">User</th>
+          <th data-sort="role">Role</th>
+          <th data-sort="status">Status</th>
+          <th>Actions</th>
+        </tr></thead>
+        <tbody>${rows || '<tr><td colspan="4" class="text-center py-10 text-base-content/40">No users found</td></tr>'}</tbody>
+      </table></div>
+    </div>
+  </div>`;
+  return settingsPage(user, 'Users - Settings', [{ href: '/', label: 'Dashboard' }, { href: '/admin/settings', label: 'Settings' }, { label: 'Users' }], content, [TABLE_SCRIPT]);
+}
+
+export { renderSettingsTeams, renderSettingsRfiSections } from '@/ui/settings-renderer-teams.js';

package/src/ui/spacing-system.js

@@ -0,0 +1,155 @@
+export const SPACING = {
+  xs: '4px',
+  sm: '8px',
+  md: '16px',
+  lg: '24px',
+  xl: '32px',
+};
+
+export function renderPageWrapper(content, opts = {}) {
+  const padding = opts.padding || 'var(--page-gutter, 1rem)';
+  return `<div style="padding:${padding};max-width:100%">${content}</div>`;
+}
+
+export function renderSection(content, opts = {}) {
+  const marginBottom = opts.marginBottom || SPACING.lg;
+  return `<div style="margin-bottom:${marginBottom}">${content}</div>`;
+}
+
+export function renderCard(content, opts = {}) {
+  const padding = opts.padding !== undefined ? opts.padding : SPACING.md;
+  const marginBottom = opts.marginBottom || SPACING.md;
+  const className = opts.className ? ` ${opts.className}` : '';
+  const id = opts.id ? ` id="${opts.id}"` : '';
+  return `<div class="card-clean${className}"${id} style="margin-bottom:${marginBottom}"><div class="card-clean-body" style="padding:${padding}">${content}</div></div>`;
+}
+
+export function renderCardHeader(content, marginBottom = SPACING.md) {
+  return `<h2 style="font-size:0.875rem;font-weight:600;margin-bottom:${marginBottom}">${content}</h2>`;
+}
+
+export function renderCardGrid(cols, gap = SPACING.md, marginBottom = SPACING.lg) {
+  const colsStr = cols === 2 ? '1fr 1fr' : cols === 3 ? '1fr 1fr 1fr' : '1fr';
+  return {
+    wrap: (content) => `<div style="display:grid;grid-template-columns:${colsStr};gap:${gap};margin-bottom:${marginBottom}">${content}</div>`,
+    col: (content) => `<div>${content}</div>`,
+  };
+}
+
+export function renderTable(cols, rows, marginTop = SPACING.md) {
+  return `<div class="table-wrap" style="margin-top:${marginTop}"><table class="data-table">
+    <thead><tr>${cols.map(c => `<th>${c}</th>`).join('')}</tr></thead>
+    <tbody>${rows || `<tr><td colspan="${cols.length}" style="text-align:center;padding:${SPACING.lg} 0;color:var(--color-text-muted)">No data</td></tr>`}</tbody>
+  </table></div>`;
+}
+
+export function renderFlex(content, opts = {}) {
+  const { gap = SPACING.md, direction = 'row', justify = 'flex-start', align = 'center', marginBottom = SPACING.md, className = '', wrap = 'nowrap' } = opts;
+  const flexDirection = direction === 'col' ? 'column' : 'row';
+  return `<div class="${className}" style="display:flex;flex-direction:${flexDirection};gap:${gap};justify-content:${justify};align-items:${align};margin-bottom:${marginBottom};flex-wrap:${wrap}">${content}</div>`;
+}
+
+export function renderTabBar(tabs, activeDef = null) {
+  return `<nav class="tab-bar" style="margin-bottom:${SPACING.lg};overflow-x:auto;scrollbar-width:none">
+    ${tabs.map(t => `<a href="${t.href}" class="tab-btn${t.key === activeDef ? ' active' : ''}">${t.label}</a>`).join('')}
+  </nav>`;
+}
+
+export function renderInfoGrid(items) {
+  return `<div style="display:grid;grid-template-columns:1fr 1fr;gap:${SPACING.md}">
+    ${items.map(([label, value]) => `<div class="info-card">
+      <div class="info-label">${label}</div>
+      <div class="info-value">${value}</div>
+    </div>`).join('')}
+  </div>`;
+}
+
+export function renderButton(label, opts = {}) {
+  const { onclick, action, args, href, variant = 'ghost', size = 'sm', style = '', disabled = false } = opts;
+  const variantMap = {
+    primary: 'btn-primary-clean',
+    ghost: 'btn-ghost-clean',
+    danger: 'btn-danger-clean',
+    outline: 'btn-ghost-clean',
+    success: 'btn-primary-clean',
+  };
+  const btnClass = variantMap[variant] || 'btn-ghost-clean';
+  const sizeStyle = size === 'sm' ? 'font-size:13px;padding:6px 14px' : '';
+  const extraStyle = [sizeStyle, style].filter(Boolean).join(';');
+
+  if (href) {
+    return `<a href="${href}" class="${btnClass}" style="${extraStyle}">${label}</a>`;
+  }
+
+  if (action) {
+    const argsAttr = args ? ` data-args='${JSON.stringify(args)}'` : '';
+    return `<button data-action="${action}"${argsAttr} class="${btnClass}" ${disabled ? 'disabled' : ''} style="${extraStyle}">${label}</button>`;
+  }
+
+  return `<button onclick="${onclick}" class="${btnClass}" ${disabled ? 'disabled' : ''} style="${extraStyle}">${label}</button>`;
+}
+
+export function renderProgress(value, max = 100, variant = 'success', marginTop = SPACING.md) {
+  const pct = max > 0 ? Math.round((value / max) * 100) : 0;
+  return `<div style="margin-top:${typeof marginTop === 'string' ? marginTop : SPACING.md}">
+    <div style="display:flex;justify-content:space-between;margin-bottom:${SPACING.sm};align-items:center">
+      <span style="font-size:0.8rem;font-weight:600;color:var(--color-text-muted)">Progress</span>
+      <span style="font-size:0.8rem;color:var(--color-text-light)">${pct}%</span>
+    </div>
+    <div class="resolution-bar">
+      <div class="resolution-bar-segment resolution-bar-resolved" style="width:${pct}%"></div>
+    </div>
+  </div>`;
+}
+
+export function renderBadge(text, variant = 'success') {
+  const map = { success: 'pill pill-success', danger: 'pill pill-danger', warning: 'pill pill-warning', info: 'pill pill-info', neutral: 'pill pill-neutral' };
+  const cls = map[variant] || 'pill pill-neutral';
+  return `<span class="${cls}">${text}</span>`;
+}
+
+export function renderEmptyState(message, marginTop = SPACING.lg) {
+  return `<div style="text-align:center;padding:${SPACING.xl} ${SPACING.md};color:var(--color-text-muted);margin-top:${marginTop}">${message}</div>`;
+}
+
+export function renderStatsRow(stats) {
+  return `<div class="stats-row">${stats.map(s => `<div class="stat-card">
+    <div class="stat-card-value" style="${s.color ? `color:${s.color}` : ''}">${s.value}</div>
+    <div class="stat-card-label">${s.label}</div>
+    ${s.sub ? `<div class="stat-card-sub">${s.sub}</div>` : ''}
+  </div>`).join('')}</div>`;
+}
+
+export function renderPageHeader(title, subtitle, actionsHtml = '') {
+  return `<div class="page-header">
+    <div>
+      <h1 class="page-title">${title}</h1>
+      ${subtitle ? `<p class="page-subtitle">${subtitle}</p>` : ''}
+    </div>
+    ${actionsHtml ? `<div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center">${actionsHtml}</div>` : ''}
+  </div>`;
+}
+
+export function renderResolutionBar(resolved, partial, total) {
+  if (total === 0) return `<div style="font-size:13px;color:var(--color-text-light);font-style:italic">No highlights</div>`;
+  const rPct = Math.round((resolved / total) * 100);
+  const pPct = Math.round((partial / total) * 100);
+  const uPct = Math.max(0, 100 - rPct - pPct);
+  return `<div class="resolution-bar">
+    <div class="resolution-bar-segment resolution-bar-resolved" style="width:${rPct}%"></div>
+    <div class="resolution-bar-segment resolution-bar-partial" style="width:${pPct}%"></div>
+    <div class="resolution-bar-segment resolution-bar-open" style="width:${uPct}%"></div>
+  </div>
+  <div class="resolution-legend">
+    <span class="resolution-legend-resolved">${resolved} resolved</span>
+    <span class="resolution-legend-partial">${partial} partial</span>
+    <span class="resolution-legend-open">${total - resolved - partial} open</span>
+  </div>`;
+}
+
+export function renderFilterBar(filters, activeKey = 'all') {
+  return `<div class="review-filter-bar">${filters.map(f => {
+    const actionAttr = f.action ? `data-action="${f.action}"${f.args ? ` data-args='${JSON.stringify(f.args)}'` : ''}` : (f.onclick ? `onclick="${f.onclick}"` : '');
+    return `<button class="pill${f.key === activeKey ? ' pill-primary' : ' pill-neutral'}" data-thread-filter="${f.key}" ${actionAttr}>${f.label}${f.count !== undefined ? ` (${f.count})` : ''}</button>`;
+  }).join('')}</div>`;
+}

package/src/ui/standalone-login.js

@@ -0,0 +1,109 @@
+export function renderStandaloneLogin(showGoogleAuth = false) {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Sign In | Moonlanding</title>
+  <style>
+    *{margin:0;padding:0;box-sizing:border-box}
+    :root{--bg:#f1f5f9;--surface:#fff;--border:#e2e8f0;--text:#0f172a;--text-muted:#64748b;--primary:#04141f;--primary-hover:#0a2535;--accent:#2563eb;--danger:#dc2626;--danger-bg:#fee2e2;--danger-border:#fca5a5;--radius:10px;--shadow:0 4px 24px rgba(0,0,0,0.09)}
+    @media(prefers-color-scheme:dark){:root{--bg:#0f172a;--surface:#1a1a1a;--border:#334155;--text:#f1f5f9;--text-muted:#94a3b8;--primary:#1e3a5f;--primary-hover:#1e293b;--shadow:0 4px 24px rgba(0,0,0,0.4)}}
+    body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;color:var(--text);transition:background 0.2s}
+    .wrap{width:100%;max-width:400px}
+    .logo{text-align:center;margin-bottom:32px}
+    .logo-mark{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;background:var(--primary);border-radius:14px;margin-bottom:14px;box-shadow:0 4px 12px rgba(4,20,31,0.25)}
+    .logo-text{font-size:1.35rem;font-weight:800;color:var(--text);letter-spacing:0.5px;display:block;margin-bottom:4px}
+    .logo-sub{color:var(--text-muted);font-size:0.875rem}
+    .card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px;border:1px solid var(--border)}
+    .google-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-size:0.875rem;font-weight:500;text-decoration:none;margin-bottom:20px;transition:all 0.15s;cursor:pointer;min-height:44px}
+    .google-btn:hover{background:var(--bg);border-color:#94a3b8;box-shadow:0 1px 4px rgba(0,0,0,0.08)}
+    .google-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
+    .divider{display:flex;align-items:center;gap:12px;margin-bottom:20px}
+    .divider-line{flex:1;height:1px;background:var(--border)}
+    .divider-text{font-size:0.75rem;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:0.5px}
+    .field{margin-bottom:18px}
+    label{display:block;font-size:0.8125rem;font-weight:600;color:var(--text);margin-bottom:6px}
+    input[type=email],input[type=password]{width:100%;padding:10px 13px;border:1.5px solid var(--border);border-radius:8px;font-size:0.9rem;outline:none;transition:border-color 0.15s,box-shadow 0.15s;background:var(--surface);color:var(--text);min-height:44px}
+    input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,0.12)}
+    input::placeholder{color:var(--text-muted)}
+    .forgot{text-align:right;margin-bottom:22px}
+    .forgot a{font-size:0.8125rem;color:var(--accent);text-decoration:none;font-weight:500}
+    .forgot a:hover{text-decoration:underline}
+    .submit-btn{width:100%;padding:12px;background:var(--primary);color:#fff;border:none;border-radius:8px;font-size:0.9375rem;font-weight:600;cursor:pointer;transition:all 0.15s;min-height:46px;position:relative}
+    .submit-btn:hover:not(:disabled){background:var(--primary-hover);box-shadow:0 4px 12px rgba(4,20,31,0.2)}
+    .submit-btn:active:not(:disabled){transform:translateY(1px)}
+    .submit-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
+    .submit-btn:disabled{opacity:0.65;cursor:not-allowed}
+    .err{background:var(--danger-bg);border:1px solid var(--danger-border);color:var(--danger);padding:11px 14px;border-radius:8px;margin-bottom:18px;font-size:0.875rem;display:flex;align-items:flex-start;gap:8px;line-height:1.4}
+    @keyframes fade-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
+    .err{animation:fade-in 0.2s ease}
+  </style>
+</head>
+<body>
+  <main id="main-content" aria-label="Sign in">
+  <div class="wrap">
+    <div class="logo">
+      <div class="logo-mark"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.75" aria-hidden="true"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg></div>
+      <span class="logo-text">Moonlanding</span>
+      <div class="logo-sub">Sign in to your account</div>
+    </div>
+    <div class="card">
+      <div id="err-area" role="alert" aria-live="assertive"></div>
+      ${showGoogleAuth ? `<div id="google-area">
+        <a href="/api/auth/google" class="google-btn" aria-label="Sign in with Google">
+          <svg width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><path fill="#4285F4" d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.716v2.259h2.908c1.702-1.567 2.684-3.875 2.684-6.615z"/><path fill="#34A853" d="M9 18c2.43 0 4.467-.806 5.956-2.184l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332C2.438 15.983 5.482 18 9 18z"/><path fill="#FBBC05" d="M3.964 10.706c-.18-.54-.282-1.117-.282-1.706s.102-1.166.282-1.706V4.962H.957C.347 6.175 0 7.55 0 9s.348 2.825.957 4.038l3.007-2.332z"/><path fill="#EA4335" d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0 5.482 0 2.438 2.017.957 4.962L3.964 7.294C4.672 5.167 6.656 3.58 9 3.58z"/></svg>
+          Continue with Google
+        </a>
+        <div class="divider"><div class="divider-line"></div><span class="divider-text">or</span><div class="divider-line"></div></div>
+      </div>` : ''}
+      <form id="loginForm" novalidate>
+        <div class="field">
+          <label for="email">Email address</label>
+          <input type="email" id="email" name="email" placeholder="you@example.com" required autocomplete="email" autofocus>
+        </div>
+        <div class="field">
+          <label for="password">Password</label>
+          <input type="password" id="password" name="password" placeholder="Your password" required autocomplete="current-password">
+        </div>
+        <div class="forgot"><a href="/password-reset">Forgot password?</a></div>
+        <button type="submit" id="submitBtn" class="submit-btn">Sign In</button>
+      </form>
+    </div>
+  </div>
+  </main>
+  <script src="/ui/event-delegation.js"></script>
+  <script>
+    document.getElementById('loginForm').addEventListener('submit', async function(e) {
+      e.preventDefault();
+      var btn = document.getElementById('submitBtn');
+      var errArea = document.getElementById('err-area');
+      btn.textContent = 'Signing in\u2026';
+      btn.disabled = true;
+      errArea.innerHTML = '';
+      try {
+        var res = await fetch('/api/auth/login', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ email: e.target.email.value, password: e.target.password.value })
+        });
+        var data = await res.json().catch(function() { return {}; });
+        if (res.ok) {
+          btn.textContent = 'Redirecting\u2026';
+          window.location.href = data.redirect || '/';
+        } else {
+          errArea.innerHTML = '<div class="err"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink:0;margin-top:1px" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg><span></span></div>';
+          errArea.querySelector('span').textContent = data.error || 'Login failed. Please check your credentials.';
+          btn.textContent = 'Sign In';
+          btn.disabled = false;
+        }
+      } catch(err) {
+        errArea.innerHTML = '<div class="err">Network error. Please try again.</div>';
+        btn.textContent = 'Sign In';
+        btn.disabled = false;
+      }
+    });
+  </script>
+</body>
+</html>`;
+}