<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sofia Control Panel — The Well & Co</title>
<style>
  :root {
    --navy: #0d1e3a;
    --navy-light: #1a2d4d;
    --navy-mid: #243a5e;
    --gold: #c8a96e;
    --gold-light: #d4bb8a;
    --gold-dim: rgba(200,169,110,0.15);
    --cream: #f5f1ea;
    --bg: #0a1628;
    --card: #111d33;
    --card-border: #1e3050;
    --text: #e8e4dc;
    --text-dim: #8a97a8;
    --green: #34d399;
    --green-dim: rgba(52,211,153,0.15);
    --red: #f87171;
    --red-dim: rgba(248,113,113,0.15);
    --orange: #fbbf24;
    --orange-dim: rgba(251,191,36,0.15);
    --blue: #60a5fa;
    --blue-dim: rgba(96,165,250,0.15);
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
  }

  /* Header */
  .header {
    background: var(--navy);
    border-bottom: 1px solid var(--card-border);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .header-left { display:flex; align-items:center; gap:16px; }
  .header-left h1 {
    font-size: 18px;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 0.5px;
  }
  .header-left .subtitle {
    font-size: 12px;
    color: var(--text-dim);
    letter-spacing: 0.3px;
  }
  .header-right { display:flex; align-items:center; gap:12px; }
  .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .status-pill.active { background: var(--green-dim); color: var(--green); }
  .status-pill.paused { background: var(--orange-dim); color: var(--orange); }
  .status-pill.degraded { background: var(--red-dim); color: var(--red); }
  .status-pill .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: pulse 2s infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }
  .btn {
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid var(--card-border);
    background: var(--navy-light);
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
  }
  .btn:hover { background: var(--navy-mid); border-color: var(--gold); color: var(--gold); }
  .btn.danger { border-color: var(--red); color: var(--red); }
  .btn.danger:hover { background: var(--red-dim); }
  .btn.primary { background: var(--gold); color: var(--navy); border-color: var(--gold); font-weight: 600; }
  .btn.primary:hover { background: var(--gold-light); }
  .btn:disabled { opacity:0.4; cursor:not-allowed; }

  /* Layout */
  .container { max-width: 1400px; margin: 0 auto; padding: 20px 24px; }
  .tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--card-border);
    padding-bottom: 0;
  }
  .tab {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dim);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
    background: none; border-left:none; border-right:none; border-top:none;
  }
  .tab:hover { color: var(--text); }
  .tab.active { color: var(--gold); border-bottom-color: var(--gold); }
  .tab-content { display: none; }
  .tab-content.active { display: block; }

  /* Cards */
  .grid { display: grid; gap: 16px; }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 900px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 600px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  }
  .card {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 16px;
  }
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }
  .card-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-dim);
  }
  .metric {
    font-size: 32px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
  }
  .metric-label {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 4px;
  }
  .metric.gold { color: var(--gold); }

  /* Stat cards */
  .stat-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }

  /* Tables */
  .table-wrap { overflow-x: auto; }
  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }
  th {
    text-align: left;
    padding: 8px 12px;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    border-bottom: 1px solid var(--card-border);
  }
  td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(30,48,80,0.5);
    vertical-align: top;
  }
  tr:hover td { background: rgba(200,169,110,0.03); }
  .badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
  }
  .badge.urgent { background: var(--red-dim); color: var(--red); }
  .badge.action-required { background: var(--orange-dim); color: var(--orange); }
  .badge.fyi { background: var(--blue-dim); color: var(--blue); }
  .badge.spam { background: rgba(100,100,100,0.2); color: #888; }
  .badge.ok { background: var(--green-dim); color: var(--green); }
  .badge.error { background: var(--red-dim); color: var(--red); }
  .badge.warning { background: var(--orange-dim); color: var(--orange); }
  .badge.info { background: var(--blue-dim); color: var(--blue); }
  .badge.pending { background: var(--gold-dim); color: var(--gold); }

  /* Toggle switches */
  .toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(30,48,80,0.4);
  }
  .toggle-row:last-child { border-bottom: none; }
  .toggle-info { flex: 1; }
  .toggle-label { font-size: 13px; font-weight: 500; color: var(--text); }
  .toggle-desc { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
  .toggle {
    position: relative;
    width: 44px; height: 24px;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 12px;
  }
  .toggle input { display: none; }
  .toggle-slider {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #374151;
    border-radius: 12px;
    transition: 0.2s;
  }
  .toggle-slider:before {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    left: 3px; top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.2s;
  }
  .toggle input:checked + .toggle-slider { background: var(--green); }
  .toggle input:checked + .toggle-slider:before { transform: translateX(20px); }

  /* Config inputs */
  .config-input {
    background: var(--navy);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    color: var(--text);
    padding: 6px 10px;
    font-size: 13px;
    width: 80px;
    text-align: right;
  }
  .config-input:focus { outline: none; border-color: var(--gold); }

  /* Event log */
  .event-item {
    padding: 8px 0;
    border-bottom: 1px solid rgba(30,48,80,0.3);
    font-size: 12px;
  }
  .event-item:last-child { border-bottom: none; }
  .event-time { color: var(--text-dim); font-family: monospace; font-size: 11px; }
  .event-type { color: var(--gold); font-weight: 500; margin: 0 8px; }

  /* Loading */
  .loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-dim);
    gap: 8px;
  }
  .spinner {
    width: 16px; height: 16px;
    border: 2px solid var(--card-border);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* Toast */
  .toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    z-index: 200;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s;
  }
  .toast.show { transform: translateY(0); opacity: 1; }
  .toast.success { background: var(--green); color: var(--navy); }
  .toast.error { background: var(--red); color: #fff; }

  /* Section spacing */
  .section { margin-bottom: 24px; }
  .section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--gold);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Health checks */
  .health-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
  .health-item {
    background: var(--navy);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .health-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .health-dot.ok { background: var(--green); }
  .health-dot.error { background: var(--red); }
  .health-dot.warning { background: var(--orange); }
  .health-name { font-size: 13px; font-weight: 500; }
  .health-detail { font-size: 11px; color: var(--text-dim); }

  /* Timestamp */
  .last-updated {
    font-size: 11px;
    color: var(--text-dim);
    text-align: right;
    margin-top: 4px;
  }
  .mono { font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace; font-size: 12px; }

  /* Pipeline flow visualization */
  .pipeline-flow {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 16px 0;
    overflow-x: auto;
  }
  .pipeline-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 90px;
    position: relative;
  }
  .pipeline-stage .stage-count {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
  }
  .pipeline-stage .stage-label {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
    text-align: center;
  }
  .pipeline-stage .stage-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    margin-bottom: 6px;
  }
  .pipeline-arrow {
    color: var(--card-border);
    font-size: 18px;
    padding: 0 4px;
    margin-top: -14px;
  }

  /* Progress bars */
  .progress-bar-wrap {
    background: var(--navy);
    border-radius: 6px;
    height: 8px;
    overflow: hidden;
    width: 100%;
  }
  .progress-bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.4s;
  }

  /* Schedule adherence */
  .schedule-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(30,48,80,0.4);
  }
  .schedule-row:last-child { border-bottom: none; }
  .schedule-info { flex: 1; }
  .schedule-name { font-size: 13px; font-weight: 600; color: var(--text); }
  .schedule-cron { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
  .schedule-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }
  .schedule-age { font-size: 12px; font-weight: 500; }
  .schedule-last { font-size: 10px; color: var(--text-dim); }

  /* Decision log */
  .decision-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(30,48,80,0.3);
    font-size: 12px;
  }
  .decision-item:last-child { border-bottom: none; }
  .decision-icon {
    width: 24px; height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 2px;
  }
  .decision-detail { flex: 1; }
  .decision-time { color: var(--text-dim); font-family: monospace; font-size: 10px; white-space: nowrap; margin-top: 2px; }

  /* Onboarding progress cards */
  .onboard-card {
    background: var(--navy);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 10px;
  }
  .onboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  .onboard-name { font-size: 14px; font-weight: 600; color: var(--text); }
  .onboard-pct { font-size: 13px; font-weight: 700; }
  .onboard-items {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
  }
  .onboard-item-dot {
    width: 20px; height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    cursor: default;
  }

  /* Active thread table */
  .thread-stage {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--navy);
    color: var(--text-dim);
  }
</style>
</head>
<body>

<div class="header">
  <div class="header-left">
    <div>
      <h1>SOFIA CONTROL PANEL</h1>
      <div class="subtitle">The Well & Co — COO Operations System</div>
    </div>
  </div>
  <div class="header-right">
    <div id="sofia-status" class="status-pill active">
      <span class="dot"></span>
      <span id="status-text">ACTIVE</span>
    </div>
    <button id="btn-pause" class="btn danger" onclick="toggleSofia()">Pause Sofia</button>
    <button class="btn" onclick="refreshAll()">Refresh</button>
  </div>
</div>

<div class="container">
  <div class="tabs">
    <button class="tab active" onclick="switchTab('overview')">Overview</button>
    <button class="tab" onclick="switchTab('pipelines')">Pipelines</button>
    <button class="tab" onclick="switchTab('queues')">Queues</button>
    <button class="tab" onclick="switchTab('capabilities')">Capabilities</button>
    <button class="tab" onclick="switchTab('guardrails')">Guardrails</button>
    <button class="tab" onclick="switchTab('health')">Health</button>
    <button class="tab" onclick="switchTab('events')">Event Log</button>
  </div>

  <!-- OVERVIEW TAB -->
  <div id="tab-overview" class="tab-content active">
    <div class="section">
      <div class="grid grid-4">
        <div class="card">
          <div class="card-header"><span class="card-title">Pending Drafts</span><span class="stat-icon" style="background:var(--gold-dim);color:var(--gold)">✉</span></div>
          <div class="metric gold" id="m-pending">—</div>
          <div class="metric-label">Awaiting CEO approval</div>
        </div>
        <div class="card">
          <div class="card-header"><span class="card-title">Active Conversations</span><span class="stat-icon" style="background:var(--blue-dim);color:var(--blue)">💬</span></div>
          <div class="metric" id="m-convos">—</div>
          <div class="metric-label">Open email threads</div>
        </div>
        <div class="card">
          <div class="card-header"><span class="card-title">Emails Sent (7d)</span><span class="stat-icon" style="background:var(--green-dim);color:var(--green)">📤</span></div>
          <div class="metric" id="m-sent">—</div>
          <div class="metric-label">Last 7 days</div>
        </div>
        <div class="card">
          <div class="card-header"><span class="card-title">Emails Blocked (7d)</span><span class="stat-icon" style="background:var(--red-dim);color:var(--red)">🛑</span></div>
          <div class="metric" id="m-blocked">—</div>
          <div class="metric-label">Guardrails triggered</div>
        </div>
      </div>
    </div>

    <div class="section">
      <div class="grid grid-3">
        <div class="card">
          <div class="card-header"><span class="card-title">Inbox (24h)</span></div>
          <div class="metric" id="m-inbox24">—</div>
          <div class="metric-label">Emails processed</div>
          <div id="inbox-categories" style="margin-top:10px;font-size:12px;"></div>
        </div>
        <div class="card">
          <div class="card-header"><span class="card-title">Onboarding</span></div>
          <div style="display:flex;gap:24px;margin-top:4px;">
            <div>
              <div class="metric" id="m-onboard-active">—</div>
              <div class="metric-label">Active</div>
            </div>
            <div>
              <div class="metric" style="color:var(--red)" id="m-onboard-overdue">—</div>
              <div class="metric-label">Overdue items</div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header"><span class="card-title">Phone (24h)</span></div>
          <div style="display:flex;gap:24px;margin-top:4px;">
            <div>
              <div class="metric" id="m-calls">—</div>
              <div class="metric-label">Calls</div>
            </div>
            <div>
              <div class="metric" id="m-sms">—</div>
              <div class="metric-label">SMS</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="section">
      <div class="grid grid-2">
        <div class="card">
          <div class="card-header"><span class="card-title">Escalations</span></div>
          <div style="display:flex;gap:24px;margin-top:4px;">
            <div>
              <div class="metric" style="color:var(--orange)" id="m-escalated">—</div>
              <div class="metric-label">Recipient replied</div>
            </div>
            <div>
              <div class="metric" style="color:var(--red)" id="m-ceo-overrides">—</div>
              <div class="metric-label">CEO overrides</div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header"><span class="card-title">Last Runs</span></div>
          <div style="font-size:12px;display:flex;flex-direction:column;gap:6px;margin-top:4px;">
            <div>Inbox scan: <span class="mono" id="lr-inbox">—</span></div>
            <div>Reply check: <span class="mono" id="lr-reply">—</span></div>
            <div>Daily chase: <span class="mono" id="lr-chase">—</span></div>
          </div>
        </div>
      </div>
    </div>

    <div class="section">
      <div class="card">
        <div class="card-header"><span class="card-title">Recent Errors</span></div>
        <div id="error-list">
          <div class="loading"><div class="spinner"></div> Loading...</div>
        </div>
      </div>
    </div>
  </div>

  <!-- PIPELINES TAB -->
  <div id="tab-pipelines" class="tab-content">

    <!-- Schedule Adherence -->
    <div class="section">
      <div class="section-title">Cron Schedule Adherence</div>
      <div class="card">
        <div id="schedule-adherence">
          <div class="loading"><div class="spinner"></div> Loading schedules...</div>
        </div>
      </div>
    </div>

    <!-- Email Pipeline -->
    <div class="section">
      <div class="section-title">Email Pipeline</div>
      <div class="grid grid-2">
        <div class="card">
          <div class="card-header"><span class="card-title">Conversation Stages</span></div>
          <div id="email-pipeline-flow">
            <div class="loading"><div class="spinner"></div> Loading...</div>
          </div>
        </div>
        <div class="card">
          <div class="card-header"><span class="card-title">Draft Lifecycle (7d)</span></div>
          <div id="draft-pipeline-flow">
            <div class="loading"><div class="spinner"></div> Loading...</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Active Email Threads -->
    <div class="section">
      <div class="card">
        <div class="card-header"><span class="card-title">Active Email Threads</span></div>
        <div class="table-wrap">
          <table>
            <thead>
              <tr>
                <th>Recipient</th>
                <th>Subject</th>
                <th>Stage</th>
                <th>Follow-ups</th>
                <th>Last Sent</th>
              </tr>
            </thead>
            <tbody id="active-threads-table">
              <tr><td colspan="5" class="loading"><div class="spinner"></div> Loading...</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- Inbox Flow (24h) -->
    <div class="section">
      <div class="section-title">Inbox Flow (24h)</div>
      <div class="card">
        <div class="card-header"><span class="card-title">Inbound → Categorize → Draft</span></div>
        <div id="inbox-flow">
          <div class="loading"><div class="spinner"></div> Loading...</div>
        </div>
        <div class="table-wrap" style="margin-top:12px;">
          <table>
            <thead>
              <tr>
                <th>From</th>
                <th>Subject</th>
                <th>Category</th>
                <th>Drafted?</th>
                <th>Time</th>
              </tr>
            </thead>
            <tbody id="inbox-flow-table">
              <tr><td colspan="5" class="loading"><div class="spinner"></div> Loading...</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- Onboarding Pipeline -->
    <div class="section">
      <div class="section-title">Onboarding Pipeline</div>
      <div id="onboarding-pipeline">
        <div class="loading"><div class="spinner"></div> Loading...</div>
      </div>
    </div>

    <!-- Guardrail Decision Log -->
    <div class="section">
      <div class="section-title">Decision Audit Trail (7d)</div>
      <div class="card">
        <div id="guardrail-decisions">
          <div class="loading"><div class="spinner"></div> Loading...</div>
        </div>
      </div>
    </div>

  </div>

  <!-- QUEUES TAB -->
  <div id="tab-queues" class="tab-content">
    <div class="section">
      <div class="section-title">📬 Pending Draft Replies</div>
      <div class="card">
        <div class="table-wrap">
          <table>
            <thead>
              <tr>
                <th>From</th>
                <th>Subject</th>
                <th>Category</th>
                <th>Created</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody id="drafts-table">
              <tr><td colspan="5" class="loading"><div class="spinner"></div> Loading...</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <div class="section">
      <div class="section-title">🚀 Active Onboardings</div>
      <div class="card">
        <div class="table-wrap">
          <table>
            <thead>
              <tr>
                <th>Participant</th>
                <th>Status</th>
                <th>Started</th>
              </tr>
            </thead>
            <tbody id="onboardings-table">
              <tr><td colspan="3" class="loading"><div class="spinner"></div> Loading...</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <!-- CAPABILITIES TAB -->
  <div id="tab-capabilities" class="tab-content">
    <div class="section">
      <div class="grid grid-2">
        <div class="card">
          <div class="card-header"><span class="card-title">Inbox & Email</span></div>
          <div id="cap-inbox"></div>
        </div>
        <div class="card">
          <div class="card-header"><span class="card-title">Onboarding</span></div>
          <div id="cap-onboarding"></div>
        </div>
        <div class="card">
          <div class="card-header"><span class="card-title">Phone</span></div>
          <div id="cap-phone"></div>
        </div>
        <div class="card">
          <div class="card-header"><span class="card-title">Agreements</span></div>
          <div id="cap-agreements"></div>
        </div>
      </div>
    </div>
    <div class="section">
      <div class="card">
        <div class="card-header"><span class="card-title">Notification Preferences</span></div>
        <div id="cap-notify"></div>
      </div>
    </div>
  </div>

  <!-- GUARDRAILS TAB -->
  <div id="tab-guardrails" class="tab-content">
    <div class="section">
      <div class="grid grid-2">
        <div class="card">
          <div class="card-header"><span class="card-title">Email Guardrails</span></div>
          <div id="guardrail-list"></div>
        </div>
        <div class="card">
          <div class="card-header"><span class="card-title">Operational Settings</span></div>
          <div id="ops-list"></div>
        </div>
      </div>
    </div>
    <div class="section">
      <div class="card">
        <div class="card-header"><span class="card-title">Priority Senders</span></div>
        <div id="senders-list" style="font-size:13px;"></div>
      </div>
    </div>
  </div>

  <!-- HEALTH TAB -->
  <div id="tab-health" class="tab-content">
    <div class="section">
      <div class="section-title">🔗 Service Connectivity</div>
      <div id="health-status" class="health-grid">
        <div class="loading"><div class="spinner"></div> Loading health checks...</div>
      </div>
    </div>
  </div>

  <!-- EVENTS TAB -->
  <div id="tab-events" class="tab-content">
    <div class="section">
      <div class="card">
        <div class="card-header"><span class="card-title">Recent Events (last 20)</span></div>
        <div id="events-list">
          <div class="loading"><div class="spinner"></div> Loading...</div>
        </div>
      </div>
    </div>
  </div>

  <div class="last-updated">Last updated: <span id="last-updated-time">—</span></div>
</div>

<div id="toast" class="toast"></div>

<script>
// ═══════════════════════════════════════════════════════════════════
// CONFIG — Update these for your deployment
// ═══════════════════════════════════════════════════════════════════
const SOFIA_CORE_URL = 'https://ldemvsuckwyqpmyzljxa.supabase.co/functions/v1/sofia-core';
const API_KEY = 'sfa_78e8038688c07d3d562d573238f1580fd3953a4f244b2a04';

function getApiKey() {
  if (API_KEY) return API_KEY;
  const params = new URLSearchParams(window.location.search);
  return params.get('key') || '';
}

// ═══════════════════════════════════════════════════════════════════
// API Helper
// ═══════════════════════════════════════════════════════════════════
async function sofiaAction(action, params = {}) {
  const res = await fetch(SOFIA_CORE_URL, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'x-api-key': getApiKey(),
    },
    body: JSON.stringify({ action, params }),
  });
  return res.json();
}

// ═══════════════════════════════════════════════════════════════════
// State
// ═══════════════════════════════════════════════════════════════════
let dashboardData = null;
let healthData = null;
let configData = null;

// ═══════════════════════════════════════════════════════════════════
// Tab switching
// ═══════════════════════════════════════════════════════════════════
function switchTab(name) {
  document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
  document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
  document.querySelector(\`#tab-\${name}\`).classList.add('active');
  event.target.classList.add('active');
}

// ═══════════════════════════════════════════════════════════════════
// Toast
// ═══════════════════════════════════════════════════════════════════
function toast(msg, type = 'success') {
  const el = document.getElementById('toast');
  el.textContent = msg;
  el.className = \`toast \${type} show\`;
  setTimeout(() => el.classList.remove('show'), 3000);
}

// ═══════════════════════════════════════════════════════════════════
// Format helpers
// ═══════════════════════════════════════════════════════════════════
function timeAgo(ts) {
  if (!ts || ts === 'null') return 'Never';
  const d = new Date(ts);
  const now = Date.now();
  const diff = now - d.getTime();
  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';
  return Math.floor(diff / 86400000) + 'd ago';
}

function shortTime(ts) {
  if (!ts || ts === 'null') return '—';
  try {
    const d = new Date(ts);
    return d.toLocaleString('en-AU', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' });
  } catch { return ts; }
}

// ═══════════════════════════════════════════════════════════════════
// Pause / Resume
// ═══════════════════════════════════════════════════════════════════
async function toggleSofia() {
  const statusEl = document.getElementById('sofia-status');
  const isActive = statusEl.classList.contains('active');
  const action = isActive ? 'sofia.pause' : 'sofia.resume';

  if (isActive && !confirm('Pause Sofia? All automated actions will stop immediately.')) return;

  const btn = document.getElementById('btn-pause');
  btn.disabled = true;
  const res = await sofiaAction(action);
  btn.disabled = false;

  if (res.success) {
    updateSofiaStatus(res.status);
    toast(isActive ? 'Sofia paused' : 'Sofia resumed');
  } else {
    toast(res.error || 'Failed', 'error');
  }
}

function updateSofiaStatus(status) {
  const el = document.getElementById('sofia-status');
  const textEl = document.getElementById('status-text');
  const btn = document.getElementById('btn-pause');

  el.className = 'status-pill ' + (status === 'active' ? 'active' : 'paused');
  textEl.textContent = status.toUpperCase();
  btn.textContent = status === 'active' ? 'Pause Sofia' : 'Resume Sofia';
  btn.className = status === 'active' ? 'btn danger' : 'btn primary';
}

// ═══════════════════════════════════════════════════════════════════
// Config toggle handler
// ═══════════════════════════════════════════════════════════════════
async function setConfigValue(key, value) {
  const res = await sofiaAction('config.set', { key, value });
  if (res.success) {
    toast(\`\${key} updated\`);
  } else {
    toast(res.error || 'Failed to update', 'error');
  }
}

// ═══════════════════════════════════════════════════════════════════
// Render: Overview
// ═══════════════════════════════════════════════════════════════════
function renderOverview(data) {
  if (!data || !data.success) return;

  updateSofiaStatus(data.sofia_status || 'active');

  document.getElementById('m-pending').textContent = data.queues?.pending_drafts ?? 0;
  document.getElementById('m-convos').textContent = data.conversations?.active ?? 0;
  document.getElementById('m-sent').textContent = data.email_stats_7d?.sent ?? 0;
  document.getElementById('m-blocked').textContent = data.email_stats_7d?.blocked ?? 0;
  document.getElementById('m-inbox24').textContent = data.inbox_24h?.processed ?? 0;
  document.getElementById('m-escalated').textContent = data.conversations?.escalated ?? 0;
  document.getElementById('m-ceo-overrides').textContent = data.conversations?.ceo_overrides ?? 0;
  document.getElementById('m-onboard-active').textContent = data.onboarding?.active ?? 0;
  document.getElementById('m-onboard-overdue').textContent = data.onboarding?.overdue_items ?? 0;
  document.getElementById('m-calls').textContent = data.phone_24h?.calls ?? 0;
  document.getElementById('m-sms').textContent = data.phone_24h?.sms ?? 0;

  // Inbox categories
  const cats = data.inbox_24h?.categories || {};
  const catHtml = Object.entries(cats).map(([k, v]) =>
    \`<span class="badge \${k}" style="margin-right:6px;">\${k}: \${v}</span>\`
  ).join('') || '<span style="color:var(--text-dim)">No emails processed</span>';
  document.getElementById('inbox-categories').innerHTML = catHtml;

  // Last runs
  document.getElementById('lr-inbox').textContent = timeAgo(data.last_runs?.inbox_scan);
  document.getElementById('lr-reply').textContent = timeAgo(data.last_runs?.reply_check);
  document.getElementById('lr-chase').textContent = timeAgo(data.last_runs?.daily_chase);

  // Errors
  const errors = data.recent_errors || [];
  document.getElementById('error-list').innerHTML = errors.length === 0
    ? '<div style="padding:12px;color:var(--green);font-size:13px;">No recent errors</div>'
    : errors.map(e => \`
        <div class="event-item">
          <span class="event-time">\${shortTime(e.created_at)}</span>
          <span class="event-type">\${e.event_type}</span>
          <span style="color:var(--red);font-size:11px;">\${JSON.stringify(e.payload).substring(0, 120)}</span>
        </div>
      \`).join('');

  // Drafts table
  const drafts = data.queues?.drafts || [];
  document.getElementById('drafts-table').innerHTML = drafts.length === 0
    ? '<tr><td colspan="5" style="text-align:center;color:var(--text-dim);padding:20px;">No pending drafts</td></tr>'
    : drafts.map(d => \`
        <tr>
          <td>\${escHtml(d.from_name || '—')}</td>
          <td>\${escHtml(d.subject || '—')}</td>
          <td><span class="badge \${d.category}">\${d.category}</span></td>
          <td class="mono">\${shortTime(d.created_at)}</td>
          <td>
            <button class="btn" style="font-size:11px;padding:3px 8px;" onclick="approveDraft('\${d.id}')">Approve</button>
            <button class="btn" style="font-size:11px;padding:3px 8px;" onclick="rejectDraft('\${d.id}')">Reject</button>
          </td>
        </tr>
      \`).join('');

  // Onboardings table
  const obs = data.onboarding?.onboardings || [];
  document.getElementById('onboardings-table').innerHTML = obs.length === 0
    ? '<tr><td colspan="3" style="text-align:center;color:var(--text-dim);padding:20px;">No active onboardings</td></tr>'
    : obs.map(o => \`
        <tr>
          <td>\${escHtml(o.participant_name || '—')}</td>
          <td><span class="badge \${o.status}">\${o.status}</span></td>
          <td class="mono">\${shortTime(o.created_at)}</td>
        </tr>
      \`).join('');

  document.getElementById('last-updated-time').textContent = new Date().toLocaleTimeString('en-AU');
}

function escHtml(s) {
  const div = document.createElement('div');
  div.textContent = s;
  return div.innerHTML;
}

// ═══════════════════════════════════════════════════════════════════
// Render: Health
// ═══════════════════════════════════════════════════════════════════
function renderHealth(data) {
  if (!data || !data.success) return;
  const el = document.getElementById('health-status');
  el.innerHTML = Object.entries(data.checks).map(([name, check]) => \`
    <div class="health-item">
      <div class="health-dot \${check.status}"></div>
      <div>
        <div class="health-name">\${name.replace(/_/g, ' ').replace(/\\b\\w/g, c => c.toUpperCase())}</div>
        <div class="health-detail">\${check.detail || check.status}</div>
      </div>
    </div>
  \`).join('');
}

// ═══════════════════════════════════════════════════════════════════
// Render: Config
// ═══════════════════════════════════════════════════════════════════
function renderConfig(data) {
  if (!data || !data.success || !data.config) return;

  const cfg = data.config;
  const capGroups = {
    'cap-inbox': ['capability.inbox_scan', 'capability.inbox_draft_reply', 'capability.email_send', 'capability.reply_checker'],
    'cap-onboarding': ['capability.onboarding', 'capability.onboarding_chase', 'capability.welcome_pack'],
    'cap-phone': ['capability.phone_inbound', 'capability.phone_sms', 'capability.phone_voicemail'],
    'cap-agreements': ['capability.agreement_gen'],
    'cap-notify': ['notify.slack_urgent', 'notify.slack_draft_ready', 'notify.slack_blocked_email', 'notify.slack_onboarding', 'notify.slack_phone', 'notify.dm_ceo_urgent'],
  };

  for (const [elId, keys] of Object.entries(capGroups)) {
    const el = document.getElementById(elId);
    if (!el) continue;
    el.innerHTML = keys.map(key => {
      const c = cfg[key];
      if (!c) return '';
      const isOn = c.value === true || c.value === 'true';
      return \`
        <div class="toggle-row">
          <div class="toggle-info">
            <div class="toggle-label">\${c.label || key}</div>
            <div class="toggle-desc">\${c.description || ''}</div>
          </div>
          <label class="toggle">
            <input type="checkbox" \${isOn ? 'checked' : ''} onchange="setConfigValue('\${key}', this.checked)">
            <span class="toggle-slider"></span>
          </label>
        </div>
      \`;
    }).join('');
  }

  // Guardrails
  const guardrailKeys = Object.keys(cfg).filter(k => k.startsWith('guardrail.'));
  document.getElementById('guardrail-list').innerHTML = guardrailKeys.map(key => {
    const c = cfg[key];
    if (typeof c.value === 'boolean' || c.value === 'true' || c.value === 'false') {
      const isOn = c.value === true || c.value === 'true';
      return \`
        <div class="toggle-row">
          <div class="toggle-info">
            <div class="toggle-label">\${c.label || key}</div>
            <div class="toggle-desc">\${c.description || ''}</div>
          </div>
          <label class="toggle">
            <input type="checkbox" \${isOn ? 'checked' : ''} onchange="setConfigValue('\${key}', this.checked)">
            <span class="toggle-slider"></span>
          </label>
        </div>
      \`;
    }
    return \`
      <div class="toggle-row">
        <div class="toggle-info">
          <div class="toggle-label">\${c.label || key}</div>
          <div class="toggle-desc">\${c.description || ''}</div>
        </div>
        <input class="config-input" type="number" value="\${c.value}" onchange="setConfigValue('\${key}', Number(this.value))">
      </div>
    \`;
  }).join('');

  // Ops settings
  const opsKeys = Object.keys(cfg).filter(k => k.startsWith('ops.'));
  document.getElementById('ops-list').innerHTML = opsKeys.map(key => {
    const c = cfg[key];
    const val = typeof c.value === 'string' ? c.value : JSON.stringify(c.value);
    return \`
      <div class="toggle-row">
        <div class="toggle-info">
          <div class="toggle-label">\${c.label || key}</div>
          <div class="toggle-desc">\${c.description || ''}</div>
        </div>
        <input class="config-input" style="width:160px;text-align:left;" value="\${escHtml(val)}" onchange="setConfigValue('\${key}', this.value)">
      </div>
    \`;
  }).join('');

  // Senders
  const senderKeys = Object.keys(cfg).filter(k => k.startsWith('senders.'));
  document.getElementById('senders-list').innerHTML = senderKeys.map(key => {
    const c = cfg[key];
    let values = [];
    try { values = Array.isArray(c.value) ? c.value : JSON.parse(c.value); } catch {}
    return \`
      <div style="margin-bottom:14px;">
        <div style="font-weight:600;color:var(--gold);margin-bottom:6px;">\${c.label || key}</div>
        <div style="color:var(--text-dim);font-size:11px;margin-bottom:6px;">\${c.description || ''}</div>
        <div style="display:flex;flex-wrap:wrap;gap:4px;">
          \${values.map(v => \`<span class="badge info">\${v}</span>\`).join('')}
        </div>
      </div>
    \`;
  }).join('');
}

// ═══════════════════════════════════════════════════════════════════
// Render: Events
// ═══════════════════════════════════════════════════════════════════
function renderEvents(data) {
  if (!data?.recent_events) return;
  const events = data.recent_events;
  document.getElementById('events-list').innerHTML = events.length === 0
    ? '<div style="padding:12px;color:var(--text-dim);">No recent events</div>'
    : events.map(e => \`
        <div class="event-item">
          <span class="event-time">\${shortTime(e.created_at)}</span>
          <span class="event-type">\${e.event_type}</span>
          <span class="badge \${e.status}">\${e.status}</span>
        </div>
      \`).join('');
}

// ═══════════════════════════════════════════════════════════════════
// Render: Pipelines
// ═══════════════════════════════════════════════════════════════════
let pipelineData = null;

function renderPipelines(data) {
  if (!data || !data.success) return;

  // --- Schedule Adherence ---
  const schedules = data.schedule_adherence || [];
  document.getElementById('schedule-adherence').innerHTML = schedules.map(s => {
    const statusColor = s.status === 'on_schedule' ? 'var(--green)' : s.status === 'overdue' ? 'var(--red)' : 'var(--orange)';
    const statusLabel = s.status === 'on_schedule' ? 'ON SCHEDULE' : s.status === 'overdue' ? 'OVERDUE' : 'NEVER RUN';
    const ageText = s.age_hours !== null ? s.age_hours + 'h ago' : 'Never';
    return \`
      <div class="schedule-row">
        <div style="width:10px;height:10px;border-radius:50%;background:\${statusColor};flex-shrink:0;margin-right:12px;"></div>
        <div class="schedule-info">
          <div class="schedule-name">\${s.name}</div>
          <div class="schedule-cron">\${s.cron}</div>
        </div>
        <div class="schedule-status">
          <span class="schedule-age" style="color:\${statusColor}">\${statusLabel}</span>
          <span class="schedule-last">Last: \${ageText}</span>
        </div>
      </div>
    \`;
  }).join('');

  // --- Email Pipeline Stages ---
  const es = data.email_pipeline?.stages || {};
  const emailStages = [
    { key: 'active', label: 'Active', color: 'var(--blue)' },
    { key: 'awaiting_reply', label: 'Awaiting', color: 'var(--gold)' },
    { key: 'replied', label: 'Replied', color: 'var(--green)' },
    { key: 'escalated', label: 'Escalated', color: 'var(--orange)' },
    { key: 'ceo_override', label: 'CEO Override', color: 'var(--red)' },
    { key: 'max_followups', label: 'Max F/U', color: 'var(--text-dim)' },
    { key: 'completed', label: 'Done', color: 'var(--green)' },
  ];
  document.getElementById('email-pipeline-flow').innerHTML = \`
    <div class="pipeline-flow">
      \${emailStages.map((s, i) => \`
        \${i > 0 ? '<span class="pipeline-arrow">→</span>' : ''}
        <div class="pipeline-stage">
          <div class="stage-dot" style="background:\${s.color}"></div>
          <div class="stage-count" style="color:\${s.color}">\${es[s.key] ?? 0}</div>
          <div class="stage-label">\${s.label}</div>
        </div>
      \`).join('')}
    </div>
    <div style="font-size:11px;color:var(--text-dim);margin-top:4px;">Total tracked: \${data.email_pipeline?.total_conversations ?? 0} conversations</div>
  \`;

  // --- Draft Pipeline ---
  const ds = data.draft_pipeline?.stages || {};
  const draftStages = [
    { key: 'pending_approval', label: 'Pending', color: 'var(--gold)' },
    { key: 'approved', label: 'Approved', color: 'var(--green)' },
    { key: 'sent', label: 'Sent', color: 'var(--blue)' },
    { key: 'rejected', label: 'Rejected', color: 'var(--red)' },
    { key: 'expired', label: 'Expired', color: 'var(--text-dim)' },
  ];
  document.getElementById('draft-pipeline-flow').innerHTML = \`
    <div class="pipeline-flow">
      \${draftStages.map((s, i) => \`
        \${i > 0 ? '<span class="pipeline-arrow">→</span>' : ''}
        <div class="pipeline-stage">
          <div class="stage-dot" style="background:\${s.color}"></div>
          <div class="stage-count" style="color:\${s.color}">\${ds[s.key] ?? 0}</div>
          <div class="stage-label">\${s.label}</div>
        </div>
      \`).join('')}
    </div>
    <div style="font-size:11px;color:var(--text-dim);margin-top:4px;">Total drafts (7d): \${data.draft_pipeline?.total_7d ?? 0}</div>
  \`;

  // --- Active Threads Table ---
  const threads = data.email_pipeline?.active_threads || [];
  document.getElementById('active-threads-table').innerHTML = threads.length === 0
    ? '<tr><td colspan="5" style="text-align:center;color:var(--text-dim);padding:20px;">No active email threads</td></tr>'
    : threads.map(t => \`
        <tr>
          <td>\${escHtml(t.recipient)}</td>
          <td>\${escHtml(t.subject || '—')}</td>
          <td><span class="thread-stage">\${t.stage}</span></td>
          <td style="text-align:center;">\${t.followups}</td>
          <td class="mono">\${timeAgo(t.last_sent)}</td>
        </tr>
      \`).join('');

  // --- Inbox Flow ---
  const inbox = data.inbox_pipeline || {};
  const cats = inbox.categorized || {};
  document.getElementById('inbox-flow').innerHTML = \`
    <div class="pipeline-flow">
      <div class="pipeline-stage">
        <div class="stage-dot" style="background:var(--blue)"></div>
        <div class="stage-count" style="color:var(--blue)">\${inbox.total_24h ?? 0}</div>
        <div class="stage-label">Received</div>
      </div>
      <span class="pipeline-arrow">→</span>
      <div class="pipeline-stage">
        <div class="stage-dot" style="background:var(--red)"></div>
        <div class="stage-count" style="color:var(--red)">\${cats.urgent ?? 0}</div>
        <div class="stage-label">Urgent</div>
      </div>
      <span class="pipeline-arrow"></span>
      <div class="pipeline-stage">
        <div class="stage-dot" style="background:var(--orange)"></div>
        <div class="stage-count" style="color:var(--orange)">\${cats['action-required'] ?? 0}</div>
        <div class="stage-label">Action Req</div>
      </div>
      <span class="pipeline-arrow"></span>
      <div class="pipeline-stage">
        <div class="stage-dot" style="background:var(--text-dim)"></div>
        <div class="stage-count">\${cats.fyi ?? 0}</div>
        <div class="stage-label">FYI</div>
      </div>
      <span class="pipeline-arrow"></span>
      <div class="pipeline-stage">
        <div class="stage-dot" style="background:#555"></div>
        <div class="stage-count" style="color:#888">\${cats.spam ?? 0}</div>
        <div class="stage-label">Spam</div>
      </div>
      <span class="pipeline-arrow">→</span>
      <div class="pipeline-stage">
        <div class="stage-dot" style="background:var(--green)"></div>
        <div class="stage-count" style="color:var(--green)">\${inbox.drafted ?? 0}</div>
        <div class="stage-label">Drafted</div>
      </div>
      <span class="pipeline-arrow"></span>
      <div class="pipeline-stage">
        <div class="stage-dot" style="background:var(--text-dim)"></div>
        <div class="stage-count">\${inbox.no_draft ?? 0}</div>
        <div class="stage-label">No Draft</div>
      </div>
    </div>
  \`;

  // Inbox flow table
  const inboxRecent = inbox.recent || [];
  document.getElementById('inbox-flow-table').innerHTML = inboxRecent.length === 0
    ? '<tr><td colspan="5" style="text-align:center;color:var(--text-dim);padding:20px;">No emails processed in 24h</td></tr>'
    : inboxRecent.map(e => \`
        <tr>
          <td>\${escHtml(e.from || '—')}</td>
          <td>\${escHtml(e.subject || '—')}</td>
          <td><span class="badge \${e.category}">\${e.category}</span></td>
          <td>\${e.drafted ? '<span style="color:var(--green)">Yes</span>' : '<span style="color:var(--text-dim)">No</span>'}</td>
          <td class="mono">\${shortTime(e.time)}</td>
        </tr>
      \`).join('');

  // --- Onboarding Pipeline ---
  const onboardings = data.onboarding_pipeline || [];
  document.getElementById('onboarding-pipeline').innerHTML = onboardings.length === 0
    ? '<div class="card" style="text-align:center;color:var(--text-dim);padding:24px;">No active onboardings</div>'
    : onboardings.map(ob => {
        const pctColor = ob.progress_pct >= 80 ? 'var(--green)' : ob.progress_pct >= 40 ? 'var(--gold)' : 'var(--blue)';
        const overdueColor = ob.overdue_items > 0 ? 'var(--red)' : 'var(--text-dim)';
        return \`
          <div class="onboard-card">
            <div class="onboard-header">
              <div>
                <div class="onboard-name">\${escHtml(ob.participant)}</div>
                <div style="font-size:11px;color:var(--text-dim);">Started \${shortTime(ob.started)} · \${ob.completed_items}/\${ob.total_items} items\${ob.overdue_items > 0 ? \` · <span style="color:var(--red)">\${ob.overdue_items} overdue</span>\` : ''}</div>
              </div>
              <div class="onboard-pct" style="color:\${pctColor}">\${ob.progress_pct}%</div>
            </div>
            <div class="progress-bar-wrap">
              <div class="progress-bar-fill" style="width:\${ob.progress_pct}%;background:\${pctColor}"></div>
            </div>
            <div class="onboard-items">
              \${(ob.items || []).map(item => {
                const bg = item.status === 'completed' ? 'var(--green-dim)' : (item.due && new Date(item.due) < new Date() ? 'var(--red-dim)' : 'var(--navy-mid)');
                const fg = item.status === 'completed' ? 'var(--green)' : (item.due && new Date(item.due) < new Date() ? 'var(--red)' : 'var(--text-dim)');
                const icon = item.status === 'completed' ? '✓' : (item.due && new Date(item.due) < new Date() ? '!' : '○');
                return \`<div class="onboard-item-dot" style="background:\${bg};color:\${fg}" title="\${escHtml(item.name)} — \${item.status}\${item.due ? ' (due ' + item.due + ')' : ''}">\${icon}</div>\`;
              }).join('')}
            </div>
            \${ob.next_due ? \`<div style="font-size:11px;color:var(--text-dim);margin-top:8px;">Next: \${escHtml(ob.next_due)}</div>\` : ''}
          </div>
        \`;
      }).join('');

  // --- Guardrail Decision Log ---
  const decisions = data.guardrail_log || [];
  const eventIcons = {
    'sofia.email.blocked': { icon: '🛑', bg: 'var(--red-dim)', label: 'Email Blocked' },
    'sofia.email.guardrail': { icon: '⚠', bg: 'var(--orange-dim)', label: 'Guardrail Triggered' },
    'sofia.email.sent': { icon: '✉', bg: 'var(--green-dim)', label: 'Email Sent' },
    'sofia.config.updated': { icon: '⚙', bg: 'var(--blue-dim)', label: 'Config Updated' },
    'sofia.reply_checker.run': { icon: '🔍', bg: 'var(--blue-dim)', label: 'Reply Check' },
    'sofia.inbox.scanned': { icon: '📥', bg: 'var(--gold-dim)', label: 'Inbox Scanned' },
    'sofia.onboarding.chase': { icon: '📣', bg: 'var(--orange-dim)', label: 'Chase Sent' },
    'sofia.agreement.generated': { icon: '📄', bg: 'var(--green-dim)', label: 'Agreement Generated' },
  };
  document.getElementById('guardrail-decisions').innerHTML = decisions.length === 0
    ? '<div style="padding:12px;color:var(--text-dim);">No decisions logged this week</div>'
    : decisions.map(d => {
        const ei = eventIcons[d.event] || { icon: '●', bg: 'var(--navy)', label: d.event };
        const detail = d.detail ? summarizePayload(d.detail) : '';
        return \`
          <div class="decision-item">
            <div class="decision-icon" style="background:\${ei.bg}">\${ei.icon}</div>
            <div class="decision-detail">
              <div style="font-weight:500;color:var(--text);">\${ei.label}</div>
              <div style="color:var(--text-dim);margin-top:2px;">\${detail}</div>
            </div>
            <div class="decision-time">\${shortTime(d.time)}</div>
          </div>
        \`;
      }).join('');
}

function summarizePayload(payload) {
  if (!payload || typeof payload !== 'object') return '';
  const parts = [];
  if (payload.recipient) parts.push('to: ' + payload.recipient);
  if (payload.reason) parts.push(payload.reason);
  if (payload.block_reason) parts.push('blocked: ' + payload.block_reason);
  if (payload.key) parts.push(payload.key + ' = ' + JSON.stringify(payload.new_value));
  if (payload.checked !== undefined) parts.push('checked ' + payload.checked + ' conversations');
  if (payload.replies_found) parts.push(payload.replies_found + ' replies found');
  if (payload.processed !== undefined) parts.push(payload.processed + ' emails processed');
  if (payload.participant_name) parts.push(payload.participant_name);
  if (payload.subject) parts.push('"' + String(payload.subject).slice(0, 40) + '"');
  if (parts.length === 0) {
    const keys = Object.keys(payload).slice(0, 3);
    return keys.map(k => k + ': ' + JSON.stringify(payload[k]).slice(0, 30)).join(' · ');
  }
  return parts.join(' · ');
}

// ═══════════════════════════════════════════════════════════════════
// Draft actions
// ═══════════════════════════════════════════════════════════════════
async function approveDraft(id) {
  if (!confirm('Approve and send this reply?')) return;
  const res = await sofiaAction('reply.approve', { draft_id: id });
  if (res.success) { toast('Reply approved and sent'); refreshAll(); }
  else toast(res.error || 'Failed', 'error');
}

async function rejectDraft(id) {
  const res = await sofiaAction('reply.reject', { draft_id: id });
  if (res.success) { toast('Draft rejected'); refreshAll(); }
  else toast(res.error || 'Failed', 'error');
}

// ═══════════════════════════════════════════════════════════════════
// Main data fetch
// ═══════════════════════════════════════════════════════════════════
async function refreshAll() {
  try {
    const [status, health, config, pipelines] = await Promise.all([
      sofiaAction('dashboard.status'),
      sofiaAction('dashboard.health'),
      sofiaAction('config.get'),
      sofiaAction('dashboard.pipelines'),
    ]);

    dashboardData = status;
    healthData = health;
    configData = config;
    pipelineData = pipelines;

    renderOverview(status);
    renderHealth(health);
    renderConfig(config);
    renderEvents(status);
    renderPipelines(pipelines);
  } catch (err) {
    toast('Failed to load data: ' + err.message, 'error');
  }
}

// ═══════════════════════════════════════════════════════════════════
// Init
// ═══════════════════════════════════════════════════════════════════
document.addEventListener('DOMContentLoaded', () => {
  if (!getApiKey()) {
    document.querySelector('.container').innerHTML = \`
      <div style="text-align:center;padding:60px 20px;">
        <h2 style="color:var(--gold);margin-bottom:16px;">API Key Required</h2>
        <p style="color:var(--text-dim);margin-bottom:20px;">Add your PROXY_API_KEY as a query parameter: <code style="color:var(--gold);">?key=YOUR_KEY</code></p>
        <div style="display:flex;gap:8px;justify-content:center;">
          <input id="key-input" class="config-input" style="width:300px;text-align:left;" placeholder="Enter your API key...">
          <button class="btn primary" onclick="window.location.search='?key='+document.getElementById('key-input').value">Connect</button>
        </div>
      </div>
    \`;
    return;
  }
  refreshAll();
  // Auto-refresh every 30s
  setInterval(refreshAll, 30000);
});
</script>
</body>
</html>