npm - @conversionpros/aiva - Versions diffs - 1.0.0 - Mend

@conversionpros/aiva 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (152) hide show

package/README.md +148 -0
package/auto-deploy.js +190 -0
package/bin/aiva.js +81 -0
package/cli-sync.js +126 -0
package/d2a-prompt-template.txt +106 -0
package/diagnostics-api.js +304 -0
package/docs/ara-dedup-fix-scope.md +112 -0
package/docs/ara-fix-round2-scope.md +61 -0
package/docs/ara-greeting-fix-scope.md +70 -0
package/docs/calendar-date-fix-scope.md +28 -0
package/docs/getting-started.md +115 -0
package/docs/network-architecture-rollout-scope.md +43 -0
package/docs/scope-google-oauth-integration.md +351 -0
package/docs/settings-page-scope.md +50 -0
package/docs/xai-imagine-scope.md +116 -0
package/docs/xai-voice-integration-scope.md +115 -0
package/docs/xai-voice-tools-scope.md +165 -0
package/email-router.js +512 -0
package/follow-up-handler.js +606 -0
package/gateway-monitor.js +158 -0
package/google-email.js +379 -0
package/google-oauth.js +310 -0
package/grok-imagine.js +97 -0
package/health-reporter.js +287 -0
package/invisible-prefix-base.txt +206 -0
package/invisible-prefix-owner.txt +26 -0
package/invisible-prefix-slim.txt +10 -0
package/invisible-prefix.txt +43 -0
package/knowledge-base.js +472 -0
package/lib/cli.js +19 -0
package/lib/config.js +124 -0
package/lib/health.js +57 -0
package/lib/process.js +207 -0
package/lib/server.js +42 -0
package/lib/setup.js +472 -0
package/meta-capi.js +206 -0
package/meta-leads.js +411 -0
package/notion-oauth.js +323 -0
package/package.json +61 -0
package/public/agent-config.html +241 -0
package/public/aiva-avatar-anime.png +0 -0
package/public/css/docs.css.bak +688 -0
package/public/css/onboarding.css +543 -0
package/public/diagrams/claude-subscription-pool.html +329 -0
package/public/diagrams/claude-subscription-pool.png +0 -0
package/public/docs-icon.png +0 -0
package/public/escalation.html +237 -0
package/public/group-config.html +300 -0
package/public/icon-192.png +0 -0
package/public/icon-512.png +0 -0
package/public/icons/agents.svg +1 -0
package/public/icons/attach.svg +1 -0
package/public/icons/characters.svg +1 -0
package/public/icons/chat.svg +1 -0
package/public/icons/docs.svg +1 -0
package/public/icons/heartbeat.svg +1 -0
package/public/icons/messages.svg +1 -0
package/public/icons/mic.svg +1 -0
package/public/icons/notes.svg +1 -0
package/public/icons/settings.svg +1 -0
package/public/icons/tasks.svg +1 -0
package/public/images/onboarding/p0-communication-layer.png +0 -0
package/public/images/onboarding/p0-infinite-surface.png +0 -0
package/public/images/onboarding/p0-learning-model.png +0 -0
package/public/images/onboarding/p0-meet-aiva.png +0 -0
package/public/images/onboarding/p4-contact-intelligence.png +0 -0
package/public/images/onboarding/p4-context-compounds.png +0 -0
package/public/images/onboarding/p4-message-router.png +0 -0
package/public/images/onboarding/p4-per-contact-rules.png +0 -0
package/public/images/onboarding/p4-send-messages.png +0 -0
package/public/images/onboarding/p6-be-precise.png +0 -0
package/public/images/onboarding/p6-review-escalations.png +0 -0
package/public/images/onboarding/p6-voice-input.png +0 -0
package/public/images/onboarding/p7-completion.png +0 -0
package/public/index.html +11594 -0
package/public/js/onboarding.js +699 -0
package/public/manifest.json +24 -0
package/public/messages-v2.html +2824 -0
package/public/permission-approve.html.bak +107 -0
package/public/permissions.html +150 -0
package/public/styles/design-system.css +68 -0
package/router-db.js +604 -0
package/router-utils.js +28 -0
package/router-v2/adapters/imessage.js +191 -0
package/router-v2/adapters/quo.js +82 -0
package/router-v2/adapters/whatsapp.js +192 -0
package/router-v2/contact-manager.js +234 -0
package/router-v2/conversation-engine.js +498 -0
package/router-v2/data/knowledge-base.json +176 -0
package/router-v2/data/router-v2.db +0 -0
package/router-v2/data/router-v2.db-shm +0 -0
package/router-v2/data/router-v2.db-wal +0 -0
package/router-v2/data/router.db +0 -0
package/router-v2/db.js +457 -0
package/router-v2/escalation-bridge.js +540 -0
package/router-v2/follow-up-engine.js +347 -0
package/router-v2/index.js +441 -0
package/router-v2/ingestion.js +213 -0
package/router-v2/knowledge-base.js +231 -0
package/router-v2/lead-qualifier.js +152 -0
package/router-v2/learning-loop.js +202 -0
package/router-v2/outbound-sender.js +160 -0
package/router-v2/package.json +13 -0
package/router-v2/permission-gate.js +86 -0
package/router-v2/playbook.js +177 -0
package/router-v2/prompts/base.js +52 -0
package/router-v2/prompts/first-contact.js +38 -0
package/router-v2/prompts/lead-qualification.js +37 -0
package/router-v2/prompts/scheduling.js +72 -0
package/router-v2/prompts/style-overrides.js +22 -0
package/router-v2/scheduler.js +301 -0
package/router-v2/scripts/migrate-v1-to-v2.js +215 -0
package/router-v2/scripts/seed-faq.js +67 -0
package/router-v2/seed-knowledge-base.js +39 -0
package/router-v2/utils/ai.js +129 -0
package/router-v2/utils/phone.js +52 -0
package/router-v2/utils/response-validator.js +98 -0
package/router-v2/utils/sanitize.js +222 -0
package/router.js +5005 -0
package/routes/google-calendar.js +186 -0
package/scripts/deploy.sh +62 -0
package/scripts/macos-calendar.sh +232 -0
package/scripts/onboard-device.sh +466 -0
package/server.js +5131 -0
package/start.sh +24 -0
package/templates/AGENTS.md +548 -0
package/templates/IDENTITY.md +15 -0
package/templates/docs-agents.html +132 -0
package/templates/docs-app.html +130 -0
package/templates/docs-home.html +83 -0
package/templates/docs-imessage.html +121 -0
package/templates/docs-tasks.html +123 -0
package/templates/docs-tips.html +175 -0
package/templates/getting-started.html +809 -0
package/templates/invisible-prefix-base.txt +171 -0
package/templates/invisible-prefix-owner.txt +282 -0
package/templates/invisible-prefix.txt +338 -0
package/templates/manifest.json +61 -0
package/templates/memory-org/clients.md +7 -0
package/templates/memory-org/credentials.md +9 -0
package/templates/memory-org/devices.md +7 -0
package/templates/updates.html +464 -0
package/templates/workspace/AGENTS.md.tmpl +161 -0
package/templates/workspace/HEARTBEAT.md.tmpl +17 -0
package/templates/workspace/IDENTITY.md.tmpl +15 -0
package/templates/workspace/MEMORY.md.tmpl +16 -0
package/templates/workspace/SOUL.md.tmpl +51 -0
package/templates/workspace/USER.md.tmpl +25 -0
package/tts-proxy.js +96 -0
package/voice-call-local.js +731 -0
package/voice-call.js +732 -0
package/wa-listener.js +354 -0

package/public/messages-v2.html ADDED Viewed

@@ -0,0 +1,2824 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>AIVA - Messages</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>
+/* ============================================
+   AIVA Messages v2 - Premium Contact Manager
+   ============================================ */
+:root {
+  --red: #FF3333;
+  --red-dim: rgba(255, 51, 51, 0.15);
+  --red-glow: rgba(255, 51, 51, 0.3);
+  --void: #050505;
+  --bg: #0a0a0a;
+  --surface: #111111;
+  --surface-2: #181818;
+  --surface-3: #1f1f1f;
+  --border: #252525;
+  --border-light: #333333;
+  --text: #e8e8e8;
+  --text-secondary: #999999;
+  --text-muted: #666666;
+  --white: #ffffff;
+  /* Pipeline colors */
+  --stage-cold: #6b7280;
+  --stage-warm: #eab308;
+  --stage-hot: #f97316;
+  --stage-qualified: #22c55e;
+  --stage-client: #3b82f6;
+  --stage-none: #444444;
+  /* Category colors */
+  --cat-lead: #eab308;
+  --cat-client: #3b82f6;
+  --cat-family: #a855f7;
+  --cat-friend: #22c55e;
+  --cat-team: #06b6d4;
+  --cat-unknown: #6b7280;
+  --cat-blocked: #ef4444;
+  --radius: 8px;
+  --radius-lg: 12px;
+  --transition: 150ms ease;
+}
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body {
+  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  height: 100vh;
+  overflow: hidden;
+  -webkit-font-smoothing: antialiased;
+}
+/* ---- Layout ---- */
+.app {
+  display: flex;
+  height: 100vh;
+}
+/* ---- Left Sidebar Navigation ---- */
+.sidebar-nav {
+  width: 56px;
+  background: var(--void);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px 0;
+  gap: 4px;
+  flex-shrink: 0;
+}
+.sidebar-nav .nav-btn {
+  width: 40px;
+  height: 40px;
+  border: none;
+  background: transparent;
+  border-radius: var(--radius);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+  transition: all var(--transition);
+  position: relative;
+}
+.sidebar-nav .nav-btn:hover { background: var(--surface-2); color: var(--text-secondary); }
+.sidebar-nav .nav-btn.active { background: var(--red-dim); color: var(--red); }
+.sidebar-nav .nav-btn.active::before {
+  content: '';
+  position: absolute;
+  left: -8px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 20px;
+  background: var(--red);
+  border-radius: 0 3px 3px 0;
+}
+.sidebar-nav .nav-spacer { flex: 1; }
+.sidebar-nav svg { width: 20px; height: 20px; }
+/* ---- Contact List Panel ---- */
+.contact-panel {
+  width: 340px;
+  background: var(--surface);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+.contact-panel-header {
+  padding: 20px 16px 12px;
+  border-bottom: 1px solid var(--border);
+}
+.contact-panel-header h2 {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 12px;
+  letter-spacing: -0.3px;
+}
+.search-bar {
+  position: relative;
+  margin-bottom: 10px;
+}
+.search-bar input {
+  width: 100%;
+  padding: 8px 12px 8px 34px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text);
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+  transition: border-color var(--transition);
+}
+.search-bar input:focus { border-color: var(--red); }
+.search-bar input::placeholder { color: var(--text-muted); }
+.search-bar .search-icon {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-muted);
+  width: 16px;
+  height: 16px;
+}
+.filter-row {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+.filter-select {
+  padding: 5px 8px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-family: inherit;
+  cursor: pointer;
+  outline: none;
+  flex: 1;
+  min-width: 0;
+}
+.filter-select:focus { border-color: var(--red); }
+/* Contact List */
+.contact-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+.contact-list::-webkit-scrollbar { width: 4px; }
+.contact-list::-webkit-scrollbar-track { background: transparent; }
+.contact-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
+.contact-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 12px 16px;
+  cursor: pointer;
+  transition: background var(--transition);
+  border-left: 3px solid transparent;
+  position: relative;
+}
+.contact-item:hover { background: var(--surface-2); }
+.contact-item.active { background: var(--surface-2); border-left-color: var(--red); }
+.contact-avatar {
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  background: var(--surface-3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  flex-shrink: 0;
+  position: relative;
+}
+.contact-avatar .mode-dot {
+  position: absolute;
+  bottom: -1px;
+  right: -1px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 2px solid var(--surface);
+}
+.mode-dot.auto { background: var(--stage-qualified); }
+.mode-dot.escalate { background: var(--stage-warm); }
+.mode-dot.monitor { background: var(--stage-cold); }
+.mode-dot.block { background: var(--cat-blocked); }
+.contact-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.contact-name-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.contact-name {
+  font-size: 13.5px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.pipeline-badge {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  flex-shrink: 0;
+}
+.pipeline-badge.cold { background: rgba(107,114,128,0.2); color: var(--stage-cold); }
+.pipeline-badge.warm { background: rgba(234,179,8,0.15); color: var(--stage-warm); }
+.pipeline-badge.hot { background: rgba(249,115,22,0.15); color: var(--stage-hot); }
+.pipeline-badge.qualified { background: rgba(34,197,94,0.15); color: var(--stage-qualified); }
+.pipeline-badge.client { background: rgba(59,130,246,0.15); color: var(--stage-client); }
+.pipeline-badge.none { display: none; }
+.contact-preview {
+  font-size: 12px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.contact-meta {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+  flex-shrink: 0;
+}
+.contact-time {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+.contact-score {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-muted);
+  background: var(--surface-3);
+  padding: 1px 5px;
+  border-radius: 8px;
+}
+.category-tag {
+  font-size: 10px;
+  color: var(--text-muted);
+  margin-top: 1px;
+  text-transform: capitalize;
+}
+.category-tag.cat-lead, .category-tag.cat-qualified-lead { color: var(--cat-lead); }
+.category-tag.cat-client { color: var(--cat-client); }
+.category-tag.cat-family { color: var(--cat-family); }
+.category-tag.cat-friend { color: var(--cat-friend); }
+.category-tag.cat-team { color: var(--cat-team); }
+.category-tag.cat-blocked { color: var(--cat-blocked); }
+/* ---- Detail Panel ---- */
+.detail-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--bg);
+}
+/* Empty state */
+.empty-state {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  color: var(--text-muted);
+}
+.empty-state svg { width: 48px; height: 48px; opacity: 0.3; }
+.empty-state p { font-size: 14px; }
+/* Detail Header */
+.detail-header {
+  padding: 16px 24px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  background: var(--surface);
+}
+.detail-avatar {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: var(--surface-3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  flex-shrink: 0;
+}
+.detail-info { flex: 1; }
+.detail-info .name { font-size: 15px; font-weight: 600; }
+.detail-info .phone { font-size: 12px; color: var(--text-muted); margin-top: 1px; font-family: 'JetBrains Mono', monospace; }
+.detail-badges {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.detail-category {
+  font-size: 11px;
+  font-weight: 500;
+  padding: 3px 10px;
+  border-radius: 12px;
+  text-transform: capitalize;
+}
+.detail-category.lead { background: rgba(234,179,8,0.15); color: var(--cat-lead); }
+.detail-category.client { background: rgba(59,130,246,0.15); color: var(--cat-client); }
+.detail-category.family { background: rgba(168,85,247,0.15); color: var(--cat-family); }
+.detail-category.friend { background: rgba(34,197,94,0.15); color: var(--cat-friend); }
+.detail-category.team { background: rgba(6,182,212,0.15); color: var(--cat-team); }
+.detail-category.unknown { background: rgba(107,114,128,0.15); color: var(--cat-unknown); }
+.detail-category.blocked { background: rgba(239,68,68,0.15); color: var(--cat-blocked); }
+.detail-category.qualifiedlead { background: rgba(234,179,8,0.15); color: var(--cat-lead); }
+.score-mini {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+.score-mini .score-ring {
+  width: 28px;
+  height: 28px;
+}
+/* Tabs */
+.tabs-bar {
+  display: flex;
+  border-bottom: 1px solid var(--border);
+  background: var(--surface);
+  padding: 0 24px;
+  gap: 0;
+}
+.tab-btn {
+  padding: 10px 16px;
+  font-size: 12.5px;
+  font-weight: 500;
+  color: var(--text-muted);
+  background: none;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  font-family: inherit;
+  transition: color var(--transition);
+}
+.tab-btn:hover { color: var(--text-secondary); }
+.tab-btn.active {
+  color: var(--text);
+}
+.tab-btn.active::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 16px;
+  right: 16px;
+  height: 2px;
+  background: var(--red);
+  border-radius: 2px 2px 0 0;
+}
+/* Tab Content */
+.tab-content {
+  flex: 1;
+  overflow-y: auto;
+  display: none;
+}
+.tab-content.active { display: flex; flex-direction: column; }
+.tab-content::-webkit-scrollbar { width: 5px; }
+.tab-content::-webkit-scrollbar-track { background: transparent; }
+.tab-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
+/* ---- Conversation Tab ---- */
+.messages-container {
+  flex: 1;
+  padding: 20px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow-y: auto;
+}
+.message-bubble {
+  max-width: 70%;
+  padding: 10px 14px;
+  border-radius: 14px;
+  font-size: 13.5px;
+  line-height: 1.5;
+  position: relative;
+  animation: fadeIn 200ms ease;
+}
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.message-bubble.inbound {
+  align-self: flex-start;
+  background: var(--surface-2);
+  border-bottom-left-radius: 4px;
+}
+.message-bubble.outbound {
+  align-self: flex-end;
+  background: var(--red);
+  color: var(--white);
+  border-bottom-right-radius: 4px;
+}
+.message-bubble .msg-time {
+  font-size: 10px;
+  opacity: 0.5;
+  margin-top: 4px;
+}
+.message-bubble.outbound .msg-time { text-align: right; }
+.message-input-bar {
+  padding: 12px 24px;
+  border-top: 1px solid var(--border);
+  display: flex;
+  gap: 10px;
+  background: var(--surface);
+}
+.message-input-bar input {
+  flex: 1;
+  padding: 10px 14px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text);
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+  transition: border-color var(--transition);
+}
+.message-input-bar input:focus { border-color: var(--red); }
+.message-input-bar input::placeholder { color: var(--text-muted); }
+.btn-send {
+  padding: 8px 18px;
+  background: var(--red);
+  border: none;
+  border-radius: var(--radius);
+  color: var(--white);
+  font-size: 13px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  transition: opacity var(--transition);
+}
+.btn-send:hover { opacity: 0.9; }
+/* ---- Settings Tab ---- */
+.settings-form {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.form-group label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+.form-group select,
+.form-group input[type="text"],
+.form-group input[type="number"],
+.form-group input[type="time"],
+.form-group textarea {
+  padding: 9px 12px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text);
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+  transition: border-color var(--transition);
+  resize: vertical;
+}
+.form-group select:focus,
+.form-group input:focus,
+.form-group textarea:focus { border-color: var(--red); }
+.form-group textarea { min-height: 80px; }
+.form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+.btn-save {
+  padding: 10px 20px;
+  background: var(--red);
+  border: none;
+  border-radius: var(--radius);
+  color: var(--white);
+  font-size: 13px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  align-self: flex-start;
+  transition: opacity var(--transition);
+}
+.btn-save:hover { opacity: 0.9; }
+/* ---- Permissions Tab ---- */
+.permissions-grid {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.perm-actions {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+.btn-outline {
+  padding: 7px 14px;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text-secondary);
+  font-size: 12px;
+  font-family: inherit;
+  cursor: pointer;
+  transition: all var(--transition);
+}
+.btn-outline:hover { border-color: var(--text-secondary); color: var(--text); }
+.perm-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  background: var(--surface-2);
+  border-radius: var(--radius);
+  transition: background var(--transition);
+}
+.perm-item:hover { background: var(--surface-3); }
+.perm-label .scope-name {
+  font-size: 13px;
+  font-weight: 500;
+}
+.perm-label .scope-desc {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-top: 1px;
+}
+/* Toggle Switch */
+.toggle {
+  position: relative;
+  width: 40px;
+  height: 22px;
+  flex-shrink: 0;
+}
+.toggle input { display: none; }
+.toggle-slider {
+  position: absolute;
+  inset: 0;
+  background: var(--border);
+  border-radius: 11px;
+  cursor: pointer;
+  transition: background 200ms ease;
+}
+.toggle-slider::after {
+  content: '';
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--white);
+  top: 3px;
+  left: 3px;
+  transition: transform 200ms ease;
+}
+.toggle input:checked + .toggle-slider {
+  background: var(--red);
+}
+.toggle input:checked + .toggle-slider::after {
+  transform: translateX(18px);
+}
+/* ---- Qualification Tab ---- */
+.qual-content {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+.score-gauge {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+.gauge-svg { width: 160px; height: 100px; }
+.gauge-label {
+  font-size: 28px;
+  font-weight: 700;
+  letter-spacing: -1px;
+}
+.gauge-sub {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+/* Pipeline Visualization */
+.pipeline-vis {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  padding: 16px 0;
+}
+.pipeline-stage {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  position: relative;
+}
+.pipeline-stage::before {
+  content: '';
+  position: absolute;
+  top: 10px;
+  left: -50%;
+  right: 50%;
+  height: 2px;
+  background: var(--border);
+}
+.pipeline-stage:first-child::before { display: none; }
+.pipeline-dot {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: var(--surface-3);
+  border: 2px solid var(--border);
+  position: relative;
+  z-index: 1;
+  transition: all 300ms ease;
+}
+.pipeline-dot.reached {
+  border-color: transparent;
+}
+.pipeline-dot.current {
+  box-shadow: 0 0 0 4px var(--red-dim);
+  transform: scale(1.15);
+}
+.pipeline-stage-label {
+  font-size: 10px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+.pipeline-stage-label.current { color: var(--text); font-weight: 600; }
+/* Signals list */
+.signals-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.signal-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  background: var(--surface-2);
+  border-radius: var(--radius);
+  font-size: 13px;
+}
+.signal-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--stage-qualified);
+  flex-shrink: 0;
+}
+.signal-points {
+  margin-left: auto;
+  font-size: 12px;
+  color: var(--text-muted);
+  font-weight: 500;
+}
+/* ---- Context Tab ---- */
+.context-content {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.context-card {
+  background: var(--surface-2);
+  border-radius: var(--radius);
+  padding: 14px 16px;
+}
+.context-card h4 {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 8px;
+}
+.context-card p {
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--text-secondary);
+}
+.context-card .items-list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.context-card .items-list li {
+  font-size: 13px;
+  color: var(--text-secondary);
+  padding-left: 12px;
+  position: relative;
+}
+.context-card .items-list li::before {
+  content: '';
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: var(--text-muted);
+  position: absolute;
+  left: 0;
+  top: 8px;
+}
+/* ---- Top-level Pages (FAQ, Playbook, Settings) ---- */
+.page-panel {
+  flex: 1;
+  overflow-y: auto;
+  display: none;
+  flex-direction: column;
+}
+.page-panel.active { display: flex; }
+.page-header {
+  padding: 24px 32px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--surface);
+}
+.page-header h2 {
+  font-size: 20px;
+  font-weight: 600;
+  letter-spacing: -0.3px;
+}
+.page-header p {
+  font-size: 13px;
+  color: var(--text-muted);
+  margin-top: 4px;
+}
+.page-body {
+  padding: 24px 32px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  flex: 1;
+}
+/* FAQ Items */
+.faq-toolbar {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+.faq-toolbar input {
+  flex: 1;
+  padding: 8px 12px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text);
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+}
+.faq-toolbar input:focus { border-color: var(--red); }
+.btn-primary {
+  padding: 8px 16px;
+  background: var(--red);
+  border: none;
+  border-radius: var(--radius);
+  color: var(--white);
+  font-size: 13px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  transition: opacity var(--transition);
+  white-space: nowrap;
+}
+.btn-primary:hover { opacity: 0.9; }
+.faq-item {
+  background: var(--surface-2);
+  border-radius: var(--radius);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  transition: background var(--transition);
+}
+.faq-item:hover { background: var(--surface-3); }
+.faq-item .faq-q {
+  font-size: 14px;
+  font-weight: 500;
+}
+.faq-item .faq-a {
+  font-size: 13px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+}
+.faq-item .faq-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.faq-item .faq-cat {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 8px;
+  background: var(--surface);
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+.faq-item .faq-actions {
+  margin-left: auto;
+  display: flex;
+  gap: 6px;
+}
+.btn-icon {
+  width: 28px;
+  height: 28px;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text-muted);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition);
+}
+.btn-icon:hover { border-color: var(--text-secondary); color: var(--text); }
+.btn-icon.danger:hover { border-color: var(--cat-blocked); color: var(--cat-blocked); }
+.btn-icon svg { width: 14px; height: 14px; }
+/* Playbook */
+.playbook-section {
+  background: var(--surface-2);
+  border-radius: var(--radius);
+  padding: 20px;
+}
+.playbook-section h3 {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.playbook-section textarea {
+  width: 100%;
+  min-height: 120px;
+  padding: 12px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text);
+  font-size: 13px;
+  font-family: inherit;
+  line-height: 1.6;
+  resize: vertical;
+  outline: none;
+}
+.playbook-section textarea:focus { border-color: var(--red); }
+/* Global Settings */
+.settings-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+}
+@media (max-width: 900px) {
+  .settings-grid { grid-template-columns: 1fr; }
+}
+.settings-card {
+  background: var(--surface-2);
+  border-radius: var(--radius);
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.settings-card h3 {
+  font-size: 14px;
+  font-weight: 600;
+}
+/* Modal */
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.6);
+  backdrop-filter: blur(4px);
+  z-index: 1000;
+  display: none;
+  align-items: center;
+  justify-content: center;
+}
+.modal-backdrop.open { display: flex; }
+.modal {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  width: 480px;
+  max-width: 90vw;
+  max-height: 80vh;
+  overflow-y: auto;
+  padding: 24px;
+  animation: modalIn 200ms ease;
+}
+@keyframes modalIn {
+  from { opacity: 0; transform: scale(0.97) translateY(8px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+.modal h3 {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 16px;
+}
+.modal-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  margin-top: 20px;
+}
+.btn-ghost {
+  padding: 8px 16px;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-family: inherit;
+  cursor: pointer;
+  transition: all var(--transition);
+}
+.btn-ghost:hover { border-color: var(--text-secondary); color: var(--text); }
+/* Loading / Toast */
+.loading-spinner {
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--border);
+  border-top-color: var(--red);
+  border-radius: 50%;
+  animation: spin 600ms linear infinite;
+  margin: 40px auto;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+.toast {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  padding: 12px 20px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  font-size: 13px;
+  color: var(--text);
+  z-index: 2000;
+  animation: toastIn 300ms ease;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+}
+@keyframes toastIn {
+  from { opacity: 0; transform: translateY(12px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.toast.error { border-color: var(--cat-blocked); }
+/* Stats bar at top of contact panel */
+.stats-bar {
+  display: flex;
+  gap: 12px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+}
+.stat-chip {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  color: var(--text-muted);
+}
+.stat-chip .stat-num {
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+/* ---- Escalation Queue ---- */
+.escalation-list {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  flex: 1;
+  overflow-y: auto;
+}
+.escalation-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  color: var(--text-muted);
+  padding: 60px 0;
+}
+.escalation-empty svg { width: 40px; height: 40px; opacity: 0.3; }
+.escalation-card {
+  background: var(--surface-2);
+  border-radius: var(--radius);
+  padding: 16px;
+  border-left: 3px solid var(--text-muted);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  transition: background var(--transition);
+}
+.escalation-card:hover { background: var(--surface-3); }
+.escalation-card.urgency-low { border-left-color: var(--stage-qualified); }
+.escalation-card.urgency-medium { border-left-color: var(--stage-warm); }
+.escalation-card.urgency-high { border-left-color: var(--stage-hot); }
+.escalation-card.urgency-critical { border-left-color: var(--cat-blocked); }
+.esc-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.esc-name {
+  font-size: 14px;
+  font-weight: 600;
+  flex: 1;
+}
+.esc-category {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 8px;
+  background: var(--surface);
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+.esc-timer {
+  font-size: 11px;
+  font-weight: 600;
+  font-family: 'JetBrains Mono', monospace;
+}
+.esc-timer.urgency-low { color: var(--stage-qualified); }
+.esc-timer.urgency-medium { color: var(--stage-warm); }
+.esc-timer.urgency-high { color: var(--stage-hot); }
+.esc-timer.urgency-critical { color: var(--cat-blocked); }
+.esc-message {
+  font-size: 13px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+  background: var(--surface);
+  padding: 8px 12px;
+  border-radius: 6px;
+}
+.esc-actions {
+  display: flex;
+  gap: 8px;
+  align-items: flex-end;
+}
+.esc-reply-input {
+  flex: 1;
+  padding: 8px 12px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text);
+  font-size: 13px;
+  font-family: inherit;
+  outline: none;
+  transition: border-color var(--transition);
+}
+.esc-reply-input:focus { border-color: var(--red); }
+.esc-reply-input::placeholder { color: var(--text-muted); }
+.btn-approve {
+  padding: 7px 14px;
+  background: rgba(34,197,94,0.15);
+  border: 1px solid rgba(34,197,94,0.3);
+  border-radius: var(--radius);
+  color: var(--stage-qualified);
+  font-size: 12px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  transition: all var(--transition);
+  white-space: nowrap;
+}
+.btn-approve:hover { background: rgba(34,197,94,0.25); }
+.btn-deny {
+  padding: 7px 14px;
+  background: rgba(239,68,68,0.1);
+  border: 1px solid rgba(239,68,68,0.25);
+  border-radius: var(--radius);
+  color: var(--cat-blocked);
+  font-size: 12px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  transition: all var(--transition);
+  white-space: nowrap;
+}
+.btn-deny:hover { background: rgba(239,68,68,0.2); }
+.esc-note-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.esc-note-input {
+  flex: 1;
+  padding: 6px 10px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text);
+  font-size: 12px;
+  font-family: inherit;
+  outline: none;
+}
+.esc-note-input::placeholder { color: var(--text-muted); }
+.esc-note-input:focus { border-color: var(--red); }
+.sidebar-nav .nav-btn .badge {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  background: var(--red);
+  color: var(--white);
+  font-size: 9px;
+  font-weight: 700;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+/* ---- Mobile Back Button ---- */
+.mobile-back-btn {
+  display: none;
+  width: 36px;
+  height: 36px;
+  border: none;
+  background: var(--surface-2);
+  border-radius: var(--radius);
+  color: var(--text-secondary);
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: all var(--transition);
+}
+.mobile-back-btn:hover { background: var(--surface-3); color: var(--text); }
+.mobile-back-btn svg { width: 18px; height: 18px; }
+@media (max-width: 768px) {
+  .mobile-back-btn { display: flex; }
+}
+/* Responsive */
+@media (max-width: 768px) {
+  .contact-panel { width: 100%; }
+  .detail-panel { display: none; }
+  .detail-panel.mobile-show { display: flex; position: fixed; inset: 0; z-index: 100; }
+}
+/* Embedded mode - hide sidebar when inside iframe */
+.embedded .sidebar-nav { display: none; }
+.embedded .contact-panel { width: 100%; }
+.embedded .detail-panel { display: none; }
+.embedded .detail-panel.mobile-show { display: flex; position: fixed; inset: 0; z-index: 100; }
+.embedded .page-content { display: none; }
+.embedded .page-content.active { display: flex; flex-direction: column; flex: 1; overflow: auto; }
+.embedded .faq-page,
+.embedded .playbook-page,
+.embedded .settings-page,
+.embedded .escalations-page { padding: 16px; }
+</style>
+</head>
+<body>
+<div class="app">
+  <!-- Sidebar Navigation -->
+  <nav class="sidebar-nav">
+    <button class="nav-btn active" onclick="showPage('contacts')" title="Contacts">
+      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
+    </button>
+    <button class="nav-btn" onclick="showPage('escalations')" title="Escalations" id="navEscalations">
+      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
+      <span class="badge" id="escBadge" style="display:none;">0</span>
+    </button>
+    <button class="nav-btn" onclick="showPage('faq')" title="FAQ">
+      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+    </button>
+    <button class="nav-btn" onclick="showPage('playbook')" title="Playbook">
+      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
+    </button>
+    <button class="nav-btn" onclick="showPage('settings')" title="Settings">
+      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><circle cx="12" cy="12" r="3"/></svg>
+    </button>
+    <div class="nav-spacer"></div>
+  </nav>
+  <!-- Contact List Panel -->
+  <div class="contact-panel" id="contactPanel">
+    <div class="contact-panel-header">
+      <h2>Messages</h2>
+      <div class="search-bar">
+        <svg class="search-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+        <input type="text" id="searchInput" placeholder="Search contacts..." oninput="filterContacts()">
+      </div>
+      <div class="filter-row">
+        <select class="filter-select" id="filterCategory" onchange="filterContacts()">
+          <option value="">All Categories</option>
+          <option value="lead">Lead</option>
+          <option value="qualified-lead">Qualified Lead</option>
+          <option value="client">Client</option>
+          <option value="family">Family</option>
+          <option value="friend">Friend</option>
+          <option value="team">Team</option>
+          <option value="unknown">Unknown</option>
+          <option value="blocked">Blocked</option>
+        </select>
+        <select class="filter-select" id="filterPipeline" onchange="filterContacts()">
+          <option value="">All Stages</option>
+          <option value="cold">Cold</option>
+          <option value="warm">Warm</option>
+          <option value="hot">Hot</option>
+          <option value="qualified">Qualified</option>
+          <option value="client">Client</option>
+        </select>
+        <select class="filter-select" id="sortBy" onchange="filterContacts()">
+          <option value="lastInteraction">Recent</option>
+          <option value="score">Score</option>
+          <option value="name">Name</option>
+        </select>
+      </div>
+    </div>
+    <div class="stats-bar" id="statsBar">
+      <div class="stat-chip"><span class="stat-num" id="statTotal">0</span> contacts</div>
+      <div class="stat-chip"><span class="stat-num" id="statLeads">0</span> leads</div>
+      <div class="stat-chip"><span class="stat-num" id="statClients">0</span> clients</div>
+    </div>
+    <div class="contact-list" id="contactList">
+      <div class="loading-spinner"></div>
+    </div>
+  </div>
+  <!-- Detail / Page Panel -->
+  <div class="detail-panel" id="detailPanel">
+    <!-- Empty State -->
+    <div class="empty-state" id="emptyState">
+      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
+      <p>Select a contact to view conversation</p>
+    </div>
+    <!-- Contact Detail View -->
+    <div id="contactDetail" style="display:none;flex-direction:column;flex:1;overflow:hidden;">
+      <div class="detail-header" id="detailHeader"></div>
+      <div class="tabs-bar" id="tabsBar"></div>
+      <!-- Conversation Tab -->
+      <div class="tab-content active" id="tabConversation">
+        <div class="messages-container" id="messagesContainer"></div>
+        <div class="message-input-bar">
+          <input type="text" id="messageInput" placeholder="Type a message..." onkeydown="if(event.key==='Enter')sendMessage()">
+          <button class="btn-send" onclick="sendMessage()">Send</button>
+        </div>
+      </div>
+      <!-- Settings Tab -->
+      <div class="tab-content" id="tabSettings">
+        <div class="settings-form" id="settingsForm"></div>
+      </div>
+      <!-- Permissions Tab -->
+      <div class="tab-content" id="tabPermissions">
+        <div class="permissions-grid" id="permissionsGrid"></div>
+      </div>
+      <!-- Qualification Tab -->
+      <div class="tab-content" id="tabQualification">
+        <div class="qual-content" id="qualContent"></div>
+      </div>
+      <!-- Context Tab -->
+      <div class="tab-content" id="tabContext">
+        <div class="context-content" id="contextContent"></div>
+      </div>
+    </div>
+    <!-- Escalation Queue Page -->
+    <div class="page-panel" id="pageEscalations">
+      <div class="page-header">
+        <h2>Escalation Queue</h2>
+        <p>Pending escalations that need your attention</p>
+      </div>
+      <div class="escalation-list" id="escalationList">
+        <div class="loading-spinner"></div>
+      </div>
+    </div>
+    <!-- FAQ Page -->
+    <div class="page-panel" id="pageFaq">
+      <div class="page-header">
+        <h2>Knowledge Base</h2>
+        <p>Manage FAQ entries that the router uses to answer common questions</p>
+      </div>
+      <div class="page-body">
+        <div class="faq-toolbar">
+          <input type="text" id="faqSearch" placeholder="Search FAQ..." oninput="filterFAQ()">
+          <select class="filter-select" id="faqCategoryFilter" onchange="filterFAQ()" style="flex:0 0 auto;width:130px;">
+            <option value="">All Categories</option>
+            <option value="pricing">Pricing</option>
+            <option value="hours">Hours</option>
+            <option value="services">Services</option>
+            <option value="general">General</option>
+          </select>
+          <button class="btn-primary" onclick="openFaqModal()">+ Add Entry</button>
+        </div>
+        <div id="faqList"></div>
+      </div>
+    </div>
+    <!-- Playbook Page -->
+    <div class="page-panel" id="pagePlaybook">
+      <div class="page-header">
+        <h2>Business Playbook</h2>
+        <p>Train the router on your brand voice, services, and conversation strategy</p>
+      </div>
+      <div class="page-body" id="playbookBody"></div>
+    </div>
+    <!-- Settings Page -->
+    <div class="page-panel" id="pageSettings">
+      <div class="page-header">
+        <h2>Global Settings</h2>
+        <p>Configure router behavior, follow-ups, and response defaults</p>
+      </div>
+      <div class="page-body">
+        <div class="settings-grid" id="globalSettingsGrid"></div>
+        <button class="btn-save" onclick="saveGlobalSettings()" style="margin-top:8px;">Save Settings</button>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- FAQ Modal -->
+<div class="modal-backdrop" id="faqModal">
+  <div class="modal">
+    <h3 id="faqModalTitle">Add FAQ Entry</h3>
+    <div class="form-group">
+      <label>Question</label>
+      <input type="text" id="faqQ" placeholder="e.g., What are your business hours?">
+    </div>
+    <div class="form-group" style="margin-top:12px;">
+      <label>Answer</label>
+      <textarea id="faqA" placeholder="The answer that the router will provide..."></textarea>
+    </div>
+    <div class="form-group" style="margin-top:12px;">
+      <label>Category</label>
+      <select id="faqCat">
+        <option value="general">General</option>
+        <option value="pricing">Pricing</option>
+        <option value="hours">Hours</option>
+        <option value="services">Services</option>
+      </select>
+    </div>
+    <div class="modal-actions">
+      <button class="btn-ghost" onclick="closeFaqModal()">Cancel</button>
+      <button class="btn-primary" onclick="saveFaqEntry()">Save</button>
+    </div>
+  </div>
+</div>
+<script>
+/* =============================================
+   AIVA Messages v2 - Application Logic
+   ============================================= */
+// ---- State ----
+let contacts = [];
+let selectedPhone = null;
+let currentPage = 'contacts';
+let editingFaqId = null;
+// ---- Placeholder Data ----
+const PLACEHOLDER_CONTACTS = [
+  {
+    phone: '+15091234567',
+    name: 'Sarah Mitchell',
+    category: 'lead',
+    responseMode: 'auto',
+    style: 'professional',
+    instructions: '',
+    source: 'imessage',
+    qualificationScore: 72,
+    pipelineStage: 'hot',
+    lastMessage: 'I was looking at your website and wanted to learn more about your SEO services.',
+    lastInteraction: new Date(Date.now() - 1800000).toISOString(),
+    context: {
+      relationship: 'Inbound lead from website. Owns a dental practice in Spokane.',
+      lastTopic: 'SEO services inquiry',
+      pendingItems: ['Send case study', 'Schedule discovery call'],
+      conversationSummary: 'Sarah reached out about SEO for her dental practice. Interested in local search optimization. Has budget concerns but seems serious.',
+      preferences: { preferredContact: 'text', timezone: 'PST' }
+    },
+    scopes: ['calendar.view', 'calendar.book', 'info.business', 'messages.auto-reply'],
+    messages: [
+      { direction: 'inbound', text: 'Hi, I found your company online. Do you do SEO for dental practices?', timestamp: new Date(Date.now() - 7200000).toISOString() },
+      { direction: 'outbound', text: 'Hey Sarah! Yes, we specialize in local SEO for healthcare and dental practices. We have several dental clients in the Spokane area. What are you looking to improve?', timestamp: new Date(Date.now() - 6800000).toISOString() },
+      { direction: 'inbound', text: 'Mostly Google Maps rankings. We are on page 2 for most searches.', timestamp: new Date(Date.now() - 3600000).toISOString() },
+      { direction: 'outbound', text: 'Page 2 is fixable. We typically see dental practices move to the top 3 within 90 days with our local SEO package. Would you be open to a quick 15-minute call to look at your current setup?', timestamp: new Date(Date.now() - 3200000).toISOString() },
+      { direction: 'inbound', text: 'I was looking at your website and wanted to learn more about your SEO services.', timestamp: new Date(Date.now() - 1800000).toISOString() },
+    ],
+    qualification: {
+      score: 72,
+      signals: [
+        { signal: 'Expressed specific need (local SEO)', points: 20 },
+        { signal: 'Has existing business (dental practice)', points: 15 },
+        { signal: 'Mentioned competitor awareness', points: 10 },
+        { signal: 'Engaged in multi-turn conversation', points: 12 },
+        { signal: 'Asked about pricing/services', points: 15 },
+      ]
+    }
+  },
+  {
+    phone: '+15099876543',
+    name: 'Jake Torres',
+    category: 'client',
+    responseMode: 'auto',
+    style: 'casual',
+    instructions: 'Jake prefers brief, casual messages. He is on the monthly retainer plan.',
+    source: 'imessage',
+    qualificationScore: 95,
+    pipelineStage: 'client',
+    lastMessage: 'Can you check on the Google Ads performance from last week?',
+    lastInteraction: new Date(Date.now() - 3600000).toISOString(),
+    context: {
+      relationship: 'Active client since Nov 2025. Runs a roofing company.',
+      lastTopic: 'Google Ads performance review',
+      pendingItems: ['Pull weekly ads report'],
+      conversationSummary: 'Long-term client. Monthly retainer for SEO + Google Ads. Generally happy with results.',
+      preferences: { preferredContact: 'text', billing: 'monthly' }
+    },
+    scopes: ['calendar.view', 'calendar.book', 'calendar.modify', 'messages.send', 'messages.auto-reply', 'tasks.create', 'info.business', 'info.personal', 'reminders.create', 'files.send', 'support.technical'],
+    messages: [
+      { direction: 'inbound', text: 'Can you check on the Google Ads performance from last week?', timestamp: new Date(Date.now() - 3600000).toISOString() },
+    ],
+    qualification: { score: 95, signals: [] }
+  },
+  {
+    phone: '+15095551234',
+    name: 'Mom',
+    category: 'family',
+    responseMode: 'auto',
+    style: 'casual',
+    instructions: '',
+    source: 'imessage',
+    qualificationScore: 0,
+    pipelineStage: 'none',
+    lastMessage: 'Are you coming to dinner Sunday?',
+    lastInteraction: new Date(Date.now() - 86400000).toISOString(),
+    context: {
+      relationship: 'Brandon\'s mother.',
+      lastTopic: 'Sunday dinner plans',
+      pendingItems: [],
+      conversationSummary: 'Regular family check-ins. Usually about weekend plans.',
+      preferences: {}
+    },
+    scopes: ['calendar.view', 'messages.send', 'messages.auto-reply'],
+    messages: [
+      { direction: 'inbound', text: 'Are you coming to dinner Sunday?', timestamp: new Date(Date.now() - 86400000).toISOString() },
+    ],
+    qualification: { score: 0, signals: [] }
+  },
+  {
+    phone: '+15093217654',
+    name: 'Unknown Caller',
+    category: 'unknown',
+    responseMode: 'escalate',
+    style: 'professional',
+    instructions: '',
+    source: 'whatsapp',
+    qualificationScore: 15,
+    pipelineStage: 'cold',
+    lastMessage: 'Hey is this the marketing company?',
+    lastInteraction: new Date(Date.now() - 172800000).toISOString(),
+    context: {
+      relationship: 'Unknown. First contact via WhatsApp.',
+      lastTopic: 'Initial inquiry',
+      pendingItems: [],
+      conversationSummary: 'Single message asking if this is a marketing company. No follow-up yet.',
+      preferences: {}
+    },
+    scopes: ['info.business', 'messages.auto-reply'],
+    messages: [
+      { direction: 'inbound', text: 'Hey is this the marketing company?', timestamp: new Date(Date.now() - 172800000).toISOString() },
+    ],
+    qualification: {
+      score: 15,
+      signals: [
+        { signal: 'Initial inquiry received', points: 10 },
+        { signal: 'Asked about services', points: 5 },
+      ]
+    }
+  },
+  {
+    phone: '+15098887777',
+    name: 'Nate Yoder',
+    category: 'team',
+    responseMode: 'monitor',
+    style: 'casual',
+    instructions: 'Business partner. Full access.',
+    source: 'imessage',
+    qualificationScore: 0,
+    pipelineStage: 'none',
+    lastMessage: 'Pushed the new deploy. Check staging when you get a chance.',
+    lastInteraction: new Date(Date.now() - 7200000).toISOString(),
+    context: {
+      relationship: 'Business partner at CMP and YDR Capital.',
+      lastTopic: 'Deployment update',
+      pendingItems: ['Review staging'],
+      conversationSummary: 'Ongoing technical collaboration. Regular deployment and project updates.',
+      preferences: {}
+    },
+    scopes: ['calendar.view', 'calendar.book', 'calendar.modify', 'messages.send', 'messages.auto-reply', 'tasks.create', 'info.business', 'info.personal', 'reminders.create', 'files.send', 'support.technical'],
+    messages: [
+      { direction: 'inbound', text: 'Pushed the new deploy. Check staging when you get a chance.', timestamp: new Date(Date.now() - 7200000).toISOString() },
+    ],
+    qualification: { score: 0, signals: [] }
+  },
+  {
+    phone: '+15556667777',
+    name: 'Rachel Kim',
+    category: 'qualified-lead',
+    responseMode: 'auto',
+    style: 'professional',
+    instructions: 'High-value prospect. Restaurant chain owner, 4 locations.',
+    source: 'imessage',
+    qualificationScore: 85,
+    pipelineStage: 'qualified',
+    lastMessage: 'Let me talk to my partner and I will get back to you by Friday.',
+    lastInteraction: new Date(Date.now() - 43200000).toISOString(),
+    context: {
+      relationship: 'Qualified lead. Owns 4-location restaurant chain. Met through referral.',
+      lastTopic: 'Proposal review and partner discussion',
+      pendingItems: ['Follow up Friday if no response', 'Send proposal PDF'],
+      conversationSummary: 'Strong prospect. Had discovery call. Sent proposal. Waiting on partner approval. Budget confirmed at $3k/mo.',
+      preferences: { budget: '$3,000/mo', referredBy: 'Jake Torres' }
+    },
+    scopes: ['calendar.view', 'calendar.book', 'info.business', 'messages.auto-reply', 'files.send'],
+    messages: [
+      { direction: 'outbound', text: 'Hi Rachel, following up on the proposal I sent over. Any questions I can answer?', timestamp: new Date(Date.now() - 50000000).toISOString() },
+      { direction: 'inbound', text: 'Let me talk to my partner and I will get back to you by Friday.', timestamp: new Date(Date.now() - 43200000).toISOString() },
+    ],
+    qualification: {
+      score: 85,
+      signals: [
+        { signal: 'Budget confirmed ($3k/mo)', points: 25 },
+        { signal: 'Discovery call completed', points: 20 },
+        { signal: 'Multiple locations (scale potential)', points: 15 },
+        { signal: 'Referral from existing client', points: 15 },
+        { signal: 'Requested proposal', points: 10 },
+      ]
+    }
+  },
+];
+const PLACEHOLDER_FAQ = [
+  { id: 1, question: 'What are your business hours?', answer: 'We are available Monday through Friday, 9 AM to 5 PM Pacific Time. We often respond to messages outside these hours as well.', category: 'hours' },
+  { id: 2, question: 'How much does SEO cost?', answer: 'Our SEO packages start at $1,500/month for local SEO and go up to $5,000/month for comprehensive national campaigns. We will put together a custom quote after a discovery call.', category: 'pricing' },
+  { id: 3, question: 'What services do you offer?', answer: 'We offer SEO (local and national), Google Ads management, Meta Ads, website design, and conversion rate optimization.', category: 'services' },
+  { id: 4, question: 'Do you offer contracts?', answer: 'We work on month-to-month agreements. No long-term contracts required, though we recommend a minimum 3-month commitment for SEO to see meaningful results.', category: 'general' },
+];
+const PLACEHOLDER_PLAYBOOK = {
+  brandVoice: 'Professional but approachable. We speak like a trusted advisor, not a salesman. Use clear, jargon-free language. Be direct about what we can and cannot do. Never make promises we cannot keep.',
+  services: 'Core services: Local SEO, National SEO, Google Ads Management, Meta Ads, Website Design, CRO. We specialize in service-based businesses: dental, legal, HVAC, roofing, restaurants. Average client ROI is 3-5x within 6 months.',
+  qualifyingStrategies: 'Ask about their current marketing spend. Understand their timeline and urgency. Identify decision-makers early. Look for budget signals ($1,500+ monthly is our minimum). Prioritize businesses with existing revenue over startups. Referrals from current clients get priority treatment.',
+  guardrails: 'Never discuss competitor pricing or badmouth competitors. Never guarantee specific rankings or timelines. Do not discuss internal processes or tools. Do not share other client data. Always offer to schedule a call for complex pricing discussions rather than quoting over text.',
+};
+const PLACEHOLDER_SETTINGS = {
+  awayMessage: '',
+  followUpEnabled: true,
+  followUpHoursStart: '09:00',
+  followUpHoursEnd: '17:00',
+  maxDailyAutoResponses: 50,
+  maxDailyFollowUps: 20,
+  debounceDelay: 3,
+  defaultResponseMode: 'auto',
+};
+const ALL_SCOPES = [
+  { key: 'calendar.view', name: 'View Calendar', desc: 'See availability and scheduled events' },
+  { key: 'calendar.book', name: 'Book Appointments', desc: 'Schedule new calendar events' },
+  { key: 'calendar.modify', name: 'Modify Calendar', desc: 'Reschedule or cancel events' },
+  { key: 'messages.send', name: 'Send Messages', desc: 'Send messages on your behalf' },
+  { key: 'messages.auto-reply', name: 'Auto-Reply', desc: 'Automatically respond to messages' },
+  { key: 'tasks.create', name: 'Create Tasks', desc: 'Add tasks to your task manager' },
+  { key: 'info.business', name: 'Business Info', desc: 'Share business information (hours, services)' },
+  { key: 'info.personal', name: 'Personal Info', desc: 'Share personal details when relevant' },
+  { key: 'reminders.create', name: 'Create Reminders', desc: 'Set reminders for follow-ups' },
+  { key: 'files.send', name: 'Send Files', desc: 'Share documents and files' },
+  { key: 'support.technical', name: 'Technical Support', desc: 'Provide technical assistance' },
+];
+// ---- API Layer ----
+const API_BASE = '/api/v2';
+async function apiGet(path) {
+  try {
+    const res = await fetch(API_BASE + path);
+    if (!res.ok) throw new Error(`${res.status}`);
+    return await res.json();
+  } catch (e) {
+    console.warn('API unavailable, using placeholder data:', path);
+    return null;
+  }
+}
+async function apiPut(path, body) {
+  try {
+    const res = await fetch(API_BASE + path, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+    if (!res.ok) throw new Error(`${res.status}`);
+    return await res.json();
+  } catch (e) {
+    console.warn('API unavailable:', path);
+    showToast('Saved locally (API unavailable)', false);
+    return null;
+  }
+}
+async function apiPost(path, body) {
+  try {
+    const res = await fetch(API_BASE + path, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+    if (!res.ok) throw new Error(`${res.status}`);
+    return await res.json();
+  } catch (e) {
+    console.warn('API unavailable:', path);
+    return null;
+  }
+}
+async function apiDelete(path) {
+  try {
+    const res = await fetch(API_BASE + path, { method: 'DELETE' });
+    if (!res.ok) throw new Error(`${res.status}`);
+    return await res.json();
+  } catch (e) {
+    console.warn('API unavailable:', path);
+    return null;
+  }
+}
+// ---- Init ----
+async function init() {
+  const data = await apiGet('/contacts');
+  contacts = data || PLACEHOLDER_CONTACTS;
+  renderContactList();
+  updateStats();
+}
+// ---- Navigation ----
+function showPage(page) {
+  currentPage = page;
+  document.querySelectorAll('.sidebar-nav .nav-btn').forEach((btn, i) => {
+    btn.classList.toggle('active', ['contacts', 'escalations', 'faq', 'playbook', 'settings'][i] === page);
+  });
+  const detail = document.getElementById('contactDetail');
+  const empty = document.getElementById('emptyState');
+  const contactPanel = document.getElementById('contactPanel');
+  document.querySelectorAll('.page-panel').forEach(p => p.classList.remove('active'));
+  if (page === 'contacts') {
+    contactPanel.style.display = 'flex';
+    if (selectedPhone) {
+      detail.style.display = 'flex';
+      empty.style.display = 'none';
+    } else {
+      detail.style.display = 'none';
+      empty.style.display = 'flex';
+    }
+  } else {
+    contactPanel.style.display = 'none';
+    detail.style.display = 'none';
+    empty.style.display = 'none';
+    const pageId = page === 'escalations' ? 'pageEscalations' : 'page' + page.charAt(0).toUpperCase() + page.slice(1);
+    const pageEl = document.getElementById(pageId);
+    if (pageEl) {
+      pageEl.classList.add('active');
+      if (page === 'faq') loadFAQ();
+      if (page === 'playbook') loadPlaybook();
+      if (page === 'settings') loadGlobalSettings();
+      if (page === 'escalations') loadEscalations();
+    }
+  }
+}
+// ---- Contact List ----
+function renderContactList() {
+  const list = document.getElementById('contactList');
+  const search = document.getElementById('searchInput').value.toLowerCase();
+  const catFilter = document.getElementById('filterCategory').value;
+  const pipeFilter = document.getElementById('filterPipeline').value;
+  const sortBy = document.getElementById('sortBy').value;
+  let filtered = contacts.filter(c => {
+    if (search && !c.name.toLowerCase().includes(search) && !c.phone.includes(search)) return false;
+    if (catFilter && c.category !== catFilter) return false;
+    if (pipeFilter && c.pipelineStage !== pipeFilter) return false;
+    return true;
+  });
+  filtered.sort((a, b) => {
+    if (sortBy === 'name') return a.name.localeCompare(b.name);
+    if (sortBy === 'score') return (b.qualificationScore || 0) - (a.qualificationScore || 0);
+    return new Date(b.lastInteraction) - new Date(a.lastInteraction);
+  });
+  if (filtered.length === 0) {
+    list.innerHTML = '<div class="empty-state" style="padding:40px 0;"><p>No contacts found</p></div>';
+    return;
+  }
+  list.innerHTML = filtered.map(c => {
+    const initials = c.name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();
+    const time = formatTime(c.lastInteraction);
+    const isActive = c.phone === selectedPhone;
+    const stageClass = c.pipelineStage || 'none';
+    return `<div class="contact-item ${isActive ? 'active' : ''}" onclick="selectContact('${c.phone}')">
+      <div class="contact-avatar">
+        ${initials}
+        <div class="mode-dot ${c.responseMode}"></div>
+      </div>
+      <div class="contact-info">
+        <div class="contact-name-row">
+          <span class="contact-name">${esc(c.name)}</span>
+          <span class="pipeline-badge ${stageClass}">${stageClass !== 'none' ? stageClass : ''}</span>
+        </div>
+        <span class="contact-preview">${esc(c.lastMessage || '')}</span>
+        <span class="category-tag cat-${c.category}">${c.category.replace('-', ' ')}</span>
+      </div>
+      <div class="contact-meta">
+        <span class="contact-time">${time}</span>
+        ${c.qualificationScore > 0 ? `<span class="contact-score">${c.qualificationScore}</span>` : ''}
+      </div>
+    </div>`;
+  }).join('');
+}
+function filterContacts() {
+  renderContactList();
+}
+function updateStats() {
+  document.getElementById('statTotal').textContent = contacts.length;
+  document.getElementById('statLeads').textContent = contacts.filter(c => c.category === 'lead' || c.category === 'qualified-lead').length;
+  document.getElementById('statClients').textContent = contacts.filter(c => c.category === 'client').length;
+}
+// ---- Select Contact ----
+async function selectContact(phone) {
+  selectedPhone = phone;
+  const contact = contacts.find(c => c.phone === phone);
+  if (!contact) return;
+  document.getElementById('emptyState').style.display = 'none';
+  const detail = document.getElementById('contactDetail');
+  detail.style.display = 'flex';
+  // Mobile: show detail panel as overlay
+  const detailPanel = document.getElementById('detailPanel');
+  if (window.innerWidth <= 768) {
+    detailPanel.classList.add('mobile-show');
+  }
+  renderDetailHeader(contact);
+  renderTabs(contact);
+  switchTab('Conversation');
+  renderConversation(contact);
+  renderContactList(); // update active state
+}
+function renderDetailHeader(c) {
+  const initials = c.name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();
+  const catClass = c.category.replace('-', '');
+  const catDisplay = c.category === 'qualified-lead' ? 'qualified lead' : c.category;
+  document.getElementById('detailHeader').innerHTML = `
+    <button class="mobile-back-btn" onclick="mobileBack()" title="Back">
+      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
+    </button>
+    <div class="detail-avatar">${initials}</div>
+    <div class="detail-info">
+      <div class="name">${esc(c.name)}</div>
+      <div class="phone">${c.phone} · ${c.source}</div>
+    </div>
+    <div class="detail-badges">
+      <span class="detail-category ${catClass}">${catDisplay}</span>
+      ${c.qualificationScore > 0 ? `
+      <div class="score-mini">
+        <svg class="score-ring" viewBox="0 0 36 36">
+          <path d="M18 2.0845a15.9155 15.9155 0 010 31.831 15.9155 15.9155 0 010-31.831" fill="none" stroke="${getScoreColor(c.qualificationScore)}" stroke-width="2.5" stroke-dasharray="${c.qualificationScore}, 100" stroke-linecap="round"/>
+          <text x="18" y="21" text-anchor="middle" fill="${getScoreColor(c.qualificationScore)}" font-size="10" font-weight="600">${c.qualificationScore}</text>
+        </svg>
+      </div>` : ''}
+    </div>`;
+}
+function renderTabs(c) {
+  const tabs = ['Conversation', 'Settings', 'Permissions'];
+  if (c.category === 'lead' || c.category === 'qualified-lead') tabs.push('Qualification');
+  tabs.push('Context');
+  document.getElementById('tabsBar').innerHTML = tabs.map((t, i) =>
+    `<button class="tab-btn ${i === 0 ? 'active' : ''}" onclick="switchTab('${t}')">${t}</button>`
+  ).join('');
+}
+function switchTab(name) {
+  document.querySelectorAll('.tab-btn').forEach(b => b.classList.toggle('active', b.textContent === name));
+  document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
+  const tabEl = document.getElementById('tab' + name);
+  if (tabEl) tabEl.classList.add('active');
+  const contact = contacts.find(c => c.phone === selectedPhone);
+  if (!contact) return;
+  if (name === 'Conversation') renderConversation(contact);
+  else if (name === 'Settings') renderSettings(contact);
+  else if (name === 'Permissions') renderPermissions(contact);
+  else if (name === 'Qualification') renderQualification(contact);
+  else if (name === 'Context') renderContext(contact);
+}
+// ---- Conversation ----
+function renderConversation(c) {
+  const msgs = c.messages || [];
+  const container = document.getElementById('messagesContainer');
+  if (msgs.length === 0) {
+    container.innerHTML = '<div class="empty-state" style="flex:1;"><p>No messages yet</p></div>';
+    return;
+  }
+  container.innerHTML = msgs.map(m => `
+    <div class="message-bubble ${m.direction === 'inbound' ? 'inbound' : 'outbound'}">
+      ${esc(m.text)}
+      <div class="msg-time">${formatDateTime(m.timestamp)}</div>
+    </div>
+  `).join('');
+  container.scrollTop = container.scrollHeight;
+}
+async function sendMessage() {
+  const input = document.getElementById('messageInput');
+  const text = input.value.trim();
+  if (!text || !selectedPhone) return;
+  const contact = contacts.find(c => c.phone === selectedPhone);
+  if (!contact) return;
+  if (!contact.messages) contact.messages = [];
+  const msg = { direction: 'outbound', text, timestamp: new Date().toISOString() };
+  const prevLastMessage = contact.lastMessage;
+  const prevLastInteraction = contact.lastInteraction;
+  contact.messages.push(msg);
+  contact.lastMessage = text;
+  contact.lastInteraction = new Date().toISOString();
+  input.value = '';
+  renderConversation(contact);
+  renderContactList();
+  // Fire API call with rollback on failure
+  const result = await apiPost(`/send`, { phone: selectedPhone, text });
+  if (result === null) {
+    // Rollback optimistic update
+    const idx = contact.messages.indexOf(msg);
+    if (idx !== -1) contact.messages.splice(idx, 1);
+    contact.lastMessage = prevLastMessage;
+    contact.lastInteraction = prevLastInteraction;
+    renderConversation(contact);
+    renderContactList();
+    showToast('Failed to send message', true);
+  }
+}
+// ---- Settings ----
+function renderSettings(c) {
+  document.getElementById('settingsForm').innerHTML = `
+    <div class="form-row">
+      <div class="form-group">
+        <label>Category</label>
+        <select id="setCategory" value="${c.category}">
+          ${['unknown','lead','qualified-lead','client','family','friend','team','blocked'].map(v =>
+            `<option value="${v}" ${c.category === v ? 'selected' : ''}>${v}</option>`).join('')}
+        </select>
+      </div>
+      <div class="form-group">
+        <label>Response Mode</label>
+        <select id="setMode">
+          ${['auto','escalate','monitor','block'].map(v =>
+            `<option value="${v}" ${c.responseMode === v ? 'selected' : ''}>${v}</option>`).join('')}
+        </select>
+      </div>
+    </div>
+    <div class="form-row">
+      <div class="form-group">
+        <label>Conversation Style</label>
+        <select id="setStyle">
+          ${['casual','professional','friendly'].map(v =>
+            `<option value="${v}" ${c.style === v ? 'selected' : ''}>${v}</option>`).join('')}
+        </select>
+      </div>
+      <div class="form-group">
+        <label>Source</label>
+        <select disabled>
+          <option>${c.source}</option>
+        </select>
+      </div>
+    </div>
+    <div class="form-group">
+      <label>Custom Instructions</label>
+      <textarea id="setInstructions" placeholder="Special instructions for how the router should handle this contact...">${esc(c.instructions || '')}</textarea>
+    </div>
+    <button class="btn-save" onclick="saveContactSettings()">Save Changes</button>
+  `;
+}
+async function saveContactSettings() {
+  const contact = contacts.find(c => c.phone === selectedPhone);
+  if (!contact) return;
+  contact.category = document.getElementById('setCategory').value;
+  contact.responseMode = document.getElementById('setMode').value;
+  contact.style = document.getElementById('setStyle').value;
+  contact.instructions = document.getElementById('setInstructions').value;
+  await apiPut(`/contacts/${encodeURIComponent(selectedPhone)}`, {
+    category: contact.category,
+    responseMode: contact.responseMode,
+    style: contact.style,
+    instructions: contact.instructions,
+  });
+  renderDetailHeader(contact);
+  renderTabs(contact);
+  renderContactList();
+  showToast('Contact settings saved');
+}
+// ---- Permissions ----
+function renderPermissions(c) {
+  const scopes = c.scopes || [];
+  document.getElementById('permissionsGrid').innerHTML = `
+    <div class="perm-actions">
+      <button class="btn-outline" onclick="permAction('defaults')">Reset to Defaults</button>
+      <button class="btn-outline" onclick="permAction('all')">Grant All</button>
+      <button class="btn-outline" onclick="permAction('none')">Revoke All</button>
+    </div>
+    ${ALL_SCOPES.map(s => `
+      <div class="perm-item">
+        <div class="perm-label">
+          <div class="scope-name">${s.name}</div>
+          <div class="scope-desc">${s.desc}</div>
+        </div>
+        <label class="toggle">
+          <input type="checkbox" data-scope="${s.key}" ${scopes.includes(s.key) ? 'checked' : ''} onchange="toggleScope('${s.key}', this.checked)">
+          <span class="toggle-slider"></span>
+        </label>
+      </div>
+    `).join('')}
+  `;
+}
+async function toggleScope(scope, granted) {
+  const contact = contacts.find(c => c.phone === selectedPhone);
+  if (!contact) return;
+  if (!contact.scopes) contact.scopes = [];
+  if (granted && !contact.scopes.includes(scope)) contact.scopes.push(scope);
+  else if (!granted) contact.scopes = contact.scopes.filter(s => s !== scope);
+  await apiPut(`/contacts/${encodeURIComponent(selectedPhone)}/scopes`, { scopes: contact.scopes });
+}
+function permAction(action) {
+  const contact = contacts.find(c => c.phone === selectedPhone);
+  if (!contact) return;
+  if (action === 'all') {
+    contact.scopes = ALL_SCOPES.map(s => s.key);
+  } else if (action === 'none') {
+    contact.scopes = [];
+  } else if (action === 'defaults') {
+    const defaults = {
+      unknown: ['info.business', 'messages.auto-reply'],
+      lead: ['calendar.view', 'calendar.book', 'info.business', 'messages.auto-reply'],
+      'qualified-lead': ['calendar.view', 'calendar.book', 'info.business', 'messages.auto-reply', 'files.send'],
+      client: ['calendar.view', 'calendar.book', 'calendar.modify', 'messages.send', 'messages.auto-reply', 'tasks.create', 'info.business', 'reminders.create', 'files.send', 'support.technical'],
+      family: ['calendar.view', 'messages.send', 'messages.auto-reply', 'info.personal'],
+      friend: ['calendar.view', 'messages.send', 'messages.auto-reply'],
+      team: ALL_SCOPES.map(s => s.key),
+      blocked: [],
+    };
+    contact.scopes = defaults[contact.category] || ['messages.auto-reply'];
+  }
+  renderPermissions(contact);
+  apiPut(`/contacts/${encodeURIComponent(selectedPhone)}/scopes`, { scopes: contact.scopes });
+  showToast('Permissions updated');
+}
+// ---- Qualification ----
+function renderQualification(c) {
+  const score = c.qualificationScore || 0;
+  const stage = c.pipelineStage || 'cold';
+  const qual = c.qualification || { signals: [] };
+  const stages = ['cold', 'warm', 'hot', 'qualified', 'client'];
+  const stageIdx = stages.indexOf(stage);
+  const stageColors = { cold: '#6b7280', warm: '#eab308', hot: '#f97316', qualified: '#22c55e', client: '#3b82f6' };
+  const gaugeColor = getScoreColor(score);
+  const angle = (score / 100) * 180;
+  document.getElementById('qualContent').innerHTML = `
+    <div class="score-gauge">
+      <svg class="gauge-svg" viewBox="0 0 200 110">
+        <path d="M20 100 A80 80 0 0 1 180 100" fill="none" stroke="#252525" stroke-width="12" stroke-linecap="round"/>
+        <path d="M20 100 A80 80 0 0 1 180 100" fill="none" stroke="${gaugeColor}" stroke-width="12" stroke-linecap="round"
+          stroke-dasharray="${(score / 100) * 251.2} 251.2"/>
+      </svg>
+      <div class="gauge-label" style="color:${gaugeColor}">${score}</div>
+      <div class="gauge-sub">Qualification Score</div>
+    </div>
+    <div>
+      <h4 style="font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:12px;">Pipeline Stage</h4>
+      <div class="pipeline-vis">
+        ${stages.map((s, i) => `
+          <div class="pipeline-stage">
+            ${i > 0 ? '' : ''}
+            <div class="pipeline-dot ${i <= stageIdx ? 'reached' : ''} ${i === stageIdx ? 'current' : ''}"
+                 style="${i <= stageIdx ? `background:${stageColors[s]};border-color:${stageColors[s]};` : ''}"></div>
+            <span class="pipeline-stage-label ${i === stageIdx ? 'current' : ''}">${s}</span>
+          </div>
+        `).join('')}
+      </div>
+    </div>
+    ${qual.signals.length > 0 ? `
+    <div>
+      <h4 style="font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:12px;">Qualification Signals</h4>
+      <div class="signals-list">
+        ${qual.signals.map(s => `
+          <div class="signal-item">
+            <span class="signal-dot"></span>
+            ${esc(s.signal)}
+            <span class="signal-points">+${s.points}</span>
+          </div>
+        `).join('')}
+      </div>
+    </div>` : ''}
+    <div class="form-group" style="margin-top:8px;">
+      <label>Manual Score Override</label>
+      <div style="display:flex;gap:10px;align-items:center;">
+        <input type="number" id="scoreOverride" min="0" max="100" value="${score}" style="width:80px;">
+        <button class="btn-outline" onclick="overrideScore()">Update</button>
+      </div>
+    </div>
+  `;
+}
+async function overrideScore() {
+  const contact = contacts.find(c => c.phone === selectedPhone);
+  if (!contact) return;
+  const val = parseInt(document.getElementById('scoreOverride').value) || 0;
+  contact.qualificationScore = Math.max(0, Math.min(100, val));
+  if (contact.qualification) contact.qualification.score = contact.qualificationScore;
+  renderQualification(contact);
+  await apiPut(`/contacts/${encodeURIComponent(selectedPhone)}`, { qualificationScore: contact.qualificationScore });
+  renderContactList();
+  showToast('Score updated');
+}
+// ---- Context ----
+function renderContext(c) {
+  const ctx = c.context || {};
+  const prefs = ctx.preferences || {};
+  document.getElementById('contextContent').innerHTML = `
+    <div class="context-card">
+      <h4>Relationship</h4>
+      <p>${esc(ctx.relationship || 'No relationship summary yet.')}</p>
+    </div>
+    <div class="context-card">
+      <h4>Last Topic</h4>
+      <p>${esc(ctx.lastTopic || 'None')}</p>
+    </div>
+    <div class="context-card">
+      <h4>Pending Items</h4>
+      ${(ctx.pendingItems && ctx.pendingItems.length > 0)
+        ? `<ul class="items-list">${ctx.pendingItems.map(i => `<li>${esc(i)}</li>`).join('')}</ul>`
+        : '<p>No pending items</p>'}
+    </div>
+    <div class="context-card">
+      <h4>Conversation Summary</h4>
+      <p>${esc(ctx.conversationSummary || 'No summary available.')}</p>
+    </div>
+    ${Object.keys(prefs).length > 0 ? `
+    <div class="context-card">
+      <h4>Learned Preferences</h4>
+      <ul class="items-list">
+        ${Object.entries(prefs).map(([k, v]) => `<li><strong>${esc(k)}:</strong> ${esc(String(v))}</li>`).join('')}
+      </ul>
+    </div>` : ''}
+  `;
+}
+// ---- FAQ ----
+let faqData = [];
+async function loadFAQ() {
+  const data = await apiGet('/faq');
+  faqData = data || PLACEHOLDER_FAQ;
+  renderFAQ();
+}
+function renderFAQ() {
+  const search = (document.getElementById('faqSearch')?.value || '').toLowerCase();
+  const catFilter = document.getElementById('faqCategoryFilter')?.value || '';
+  let filtered = faqData.filter(f => {
+    if (search && !f.question.toLowerCase().includes(search) && !f.answer.toLowerCase().includes(search)) return false;
+    if (catFilter && f.category !== catFilter) return false;
+    return true;
+  });
+  const list = document.getElementById('faqList');
+  if (filtered.length === 0) {
+    list.innerHTML = '<div class="empty-state" style="padding:40px 0;"><p>No FAQ entries found</p></div>';
+    return;
+  }
+  list.innerHTML = filtered.map(f => `
+    <div class="faq-item">
+      <div class="faq-q">${esc(f.question)}</div>
+      <div class="faq-a">${esc(f.answer)}</div>
+      <div class="faq-meta">
+        <span class="faq-cat">${f.category}</span>
+        <div class="faq-actions">
+          <button class="btn-icon" onclick="editFaq(${f.id})" title="Edit">
+            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
+          </button>
+          <button class="btn-icon danger" onclick="deleteFaq(${f.id})" title="Delete">
+            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  `).join('');
+}
+function filterFAQ() { renderFAQ(); }
+function openFaqModal(id) {
+  editingFaqId = id || null;
+  const modal = document.getElementById('faqModal');
+  document.getElementById('faqModalTitle').textContent = id ? 'Edit FAQ Entry' : 'Add FAQ Entry';
+  if (id) {
+    const f = faqData.find(x => x.id === id);
+    if (f) {
+      document.getElementById('faqQ').value = f.question;
+      document.getElementById('faqA').value = f.answer;
+      document.getElementById('faqCat').value = f.category;
+    }
+  } else {
+    document.getElementById('faqQ').value = '';
+    document.getElementById('faqA').value = '';
+    document.getElementById('faqCat').value = 'general';
+  }
+  modal.classList.add('open');
+}
+function closeFaqModal() {
+  document.getElementById('faqModal').classList.remove('open');
+  editingFaqId = null;
+}
+async function saveFaqEntry() {
+  const q = document.getElementById('faqQ').value.trim();
+  const a = document.getElementById('faqA').value.trim();
+  const cat = document.getElementById('faqCat').value;
+  if (!q || !a) return;
+  if (editingFaqId) {
+    const entry = faqData.find(f => f.id === editingFaqId);
+    if (entry) { entry.question = q; entry.answer = a; entry.category = cat; }
+    await apiPut(`/faq/${editingFaqId}`, { question: q, answer: a, category: cat });
+  } else {
+    const newId = Math.max(0, ...faqData.map(f => f.id)) + 1;
+    faqData.push({ id: newId, question: q, answer: a, category: cat });
+    await apiPost('/faq', { question: q, answer: a, category: cat });
+  }
+  closeFaqModal();
+  renderFAQ();
+  showToast(editingFaqId ? 'FAQ entry updated' : 'FAQ entry created');
+}
+function editFaq(id) { openFaqModal(id); }
+async function deleteFaq(id) {
+  if (!confirm('Delete this FAQ entry?')) return;
+  faqData = faqData.filter(f => f.id !== id);
+  await apiDelete(`/faq/${id}`);
+  renderFAQ();
+  showToast('FAQ entry deleted');
+}
+// ---- Playbook ----
+async function loadPlaybook() {
+  const data = await apiGet('/playbook');
+  const pb = data || PLACEHOLDER_PLAYBOOK;
+  document.getElementById('playbookBody').innerHTML = `
+    <div class="playbook-section">
+      <h3>Brand Voice</h3>
+      <textarea id="pbVoice">${esc(pb.brandVoice || '')}</textarea>
+    </div>
+    <div class="playbook-section">
+      <h3>Services</h3>
+      <textarea id="pbServices">${esc(pb.services || '')}</textarea>
+    </div>
+    <div class="playbook-section">
+      <h3>Qualifying Strategies</h3>
+      <textarea id="pbQualify">${esc(pb.qualifyingStrategies || '')}</textarea>
+    </div>
+    <div class="playbook-section">
+      <h3>Guardrails</h3>
+      <textarea id="pbGuardrails">${esc(pb.guardrails || '')}</textarea>
+    </div>
+    <button class="btn-save" onclick="savePlaybook()">Save Playbook</button>
+  `;
+}
+async function savePlaybook() {
+  const playbook = {
+    brandVoice: document.getElementById('pbVoice').value,
+    services: document.getElementById('pbServices').value,
+    qualifyingStrategies: document.getElementById('pbQualify').value,
+    guardrails: document.getElementById('pbGuardrails').value,
+  };
+  await apiPut('/playbook', playbook);
+  showToast('Playbook saved');
+}
+// ---- Global Settings ----
+async function loadGlobalSettings() {
+  const data = await apiGet('/settings');
+  const s = data || PLACEHOLDER_SETTINGS;
+  document.getElementById('globalSettingsGrid').innerHTML = `
+    <div class="settings-card">
+      <h3>Away Message</h3>
+      <div class="form-group">
+        <label>Message Text</label>
+        <textarea id="gsAway" placeholder="Leave empty to disable">${esc(s.awayMessage || '')}</textarea>
+      </div>
+    </div>
+    <div class="settings-card">
+      <h3>Follow-Ups</h3>
+      <div class="form-group">
+        <label>Enabled</label>
+        <label class="toggle">
+          <input type="checkbox" id="gsFollowUp" ${s.followUpEnabled ? 'checked' : ''}>
+          <span class="toggle-slider"></span>
+        </label>
+      </div>
+      <div class="form-row">
+        <div class="form-group">
+          <label>Start Hour</label>
+          <input type="time" id="gsStart" value="${s.followUpHoursStart || '09:00'}">
+        </div>
+        <div class="form-group">
+          <label>End Hour</label>
+          <input type="time" id="gsEnd" value="${s.followUpHoursEnd || '17:00'}">
+        </div>
+      </div>
+    </div>
+    <div class="settings-card">
+      <h3>Rate Limits</h3>
+      <div class="form-group">
+        <label>Max Daily Auto-Responses</label>
+        <input type="number" id="gsMaxAuto" value="${s.maxDailyAutoResponses || 50}">
+      </div>
+      <div class="form-group">
+        <label>Max Daily Follow-Ups</label>
+        <input type="number" id="gsMaxFollow" value="${s.maxDailyFollowUps || 20}">
+      </div>
+    </div>
+    <div class="settings-card">
+      <h3>Defaults</h3>
+      <div class="form-group">
+        <label>Debounce Delay (seconds)</label>
+        <input type="number" id="gsDebounce" value="${s.debounceDelay || 3}">
+      </div>
+      <div class="form-group">
+        <label>Default Response Mode</label>
+        <select id="gsDefaultMode">
+          ${['auto','escalate','monitor','block'].map(v =>
+            `<option value="${v}" ${s.defaultResponseMode === v ? 'selected' : ''}>${v}</option>`).join('')}
+        </select>
+      </div>
+    </div>
+  `;
+}
+async function saveGlobalSettings() {
+  const settings = {
+    awayMessage: document.getElementById('gsAway').value,
+    followUpEnabled: document.getElementById('gsFollowUp').checked,
+    followUpHoursStart: document.getElementById('gsStart').value,
+    followUpHoursEnd: document.getElementById('gsEnd').value,
+    maxDailyAutoResponses: parseInt(document.getElementById('gsMaxAuto').value) || 50,
+    maxDailyFollowUps: parseInt(document.getElementById('gsMaxFollow').value) || 20,
+    debounceDelay: parseInt(document.getElementById('gsDebounce').value) || 3,
+    defaultResponseMode: document.getElementById('gsDefaultMode').value,
+  };
+  await apiPut('/settings', settings);
+  showToast('Settings saved');
+}
+// ---- Utilities ----
+function esc(s) {
+  const d = document.createElement('div');
+  d.textContent = s;
+  return d.innerHTML;
+}
+function formatTime(iso) {
+  if (!iso) return '';
+  const d = new Date(iso);
+  const now = new Date();
+  const diff = now - d;
+  if (diff < 60000) return 'now';
+  if (diff < 3600000) return Math.floor(diff / 60000) + 'm';
+  if (diff < 86400000) return Math.floor(diff / 3600000) + 'h';
+  if (diff < 604800000) return Math.floor(diff / 86400000) + 'd';
+  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+}
+function formatDateTime(iso) {
+  if (!iso) return '';
+  return new Date(iso).toLocaleString('en-US', { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' });
+}
+function getScoreColor(score) {
+  if (score >= 80) return '#22c55e';
+  if (score >= 60) return '#eab308';
+  if (score >= 40) return '#f97316';
+  return '#6b7280';
+}
+function showToast(msg, isError = false) {
+  const existing = document.querySelector('.toast');
+  if (existing) existing.remove();
+  const toast = document.createElement('div');
+  toast.className = 'toast' + (isError ? ' error' : '');
+  toast.textContent = msg;
+  document.body.appendChild(toast);
+  setTimeout(() => toast.remove(), 3000);
+}
+// ---- Mobile Back ----
+function mobileBack() {
+  const detail = document.getElementById('detailPanel');
+  detail.classList.remove('mobile-show');
+  selectedPhone = null;
+  renderContactList();
+}
+// ---- Escalation Queue ----
+let escalations = [];
+let escPollTimer = null;
+async function loadEscalations() {
+  try {
+    const res = await fetch('/api/v2/escalations?limit=50');
+    if (!res.ok) throw new Error(`${res.status}`);
+    const data = await res.json();
+    escalations = (data || []).filter(e => e.status === 'pending');
+  } catch (e) {
+    console.warn('Escalation API unavailable:', e.message);
+    escalations = [];
+  }
+  renderEscalations();
+  updateEscBadge();
+}
+function getEscUrgency(timeoutAt) {
+  if (!timeoutAt) return 'low';
+  const remaining = new Date(timeoutAt.replace(' ', 'T') + 'Z') - Date.now();
+  if (remaining <= 0) return 'critical';
+  if (remaining < 2 * 60000) return 'critical';
+  if (remaining < 5 * 60000) return 'high';
+  if (remaining < 10 * 60000) return 'medium';
+  return 'low';
+}
+function formatRemaining(timeoutAt) {
+  if (!timeoutAt) return '';
+  const remaining = new Date(timeoutAt.replace(' ', 'T') + 'Z') - Date.now();
+  if (remaining <= 0) return 'EXPIRED';
+  const mins = Math.floor(remaining / 60000);
+  const secs = Math.floor((remaining % 60000) / 1000);
+  if (mins > 0) return `${mins}m ${secs}s`;
+  return `${secs}s`;
+}
+function renderEscalations() {
+  const list = document.getElementById('escalationList');
+  if (!list) return;
+  if (escalations.length === 0) {
+    list.innerHTML = `<div class="escalation-empty">
+      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+      <p>No pending escalations</p>
+    </div>`;
+    return;
+  }
+  list.innerHTML = escalations.map(e => {
+    const ctx = JSON.parse(e.context_sent || '{}');
+    const urgency = getEscUrgency(e.timeout_at);
+    const remaining = formatRemaining(e.timeout_at);
+    const name = ctx.contactName || e.phone;
+    const category = ctx.category || 'unknown';
+    const trigger = e.trigger_message || ctx.triggerMessage || '';
+    return `<div class="escalation-card urgency-${urgency}" data-esc-id="${esc(e.escalation_id || e.id)}">
+      <div class="esc-header">
+        <span class="esc-name">${esc(name)}</span>
+        <span class="esc-category">${esc(category)}</span>
+        <span class="esc-timer urgency-${urgency}" data-timeout="${esc(e.timeout_at || '')}">${remaining}</span>
+      </div>
+      <div class="esc-message">${esc(trigger)}</div>
+      <div class="esc-actions">
+        <input class="esc-reply-input" placeholder="Type a response..." id="escReply-${esc(e.escalation_id || e.id)}" onkeydown="if(event.key==='Enter')respondEscalation('${esc(e.escalation_id || e.id)}')">
+        <button class="btn-primary" onclick="respondEscalation('${esc(e.escalation_id || e.id)}')" style="padding:7px 14px;font-size:12px;">Reply</button>
+        <button class="btn-deny" onclick="denyEscalation('${esc(e.escalation_id || e.id)}')">Deny</button>
+      </div>
+    </div>`;
+  }).join('');
+}
+function updateEscBadge() {
+  const badge = document.getElementById('escBadge');
+  if (!badge) return;
+  const count = escalations.length;
+  if (count > 0) {
+    badge.textContent = count;
+    badge.style.display = 'flex';
+  } else {
+    badge.style.display = 'none';
+  }
+}
+// Update timers every second when on escalation page
+function startEscTimers() {
+  if (escPollTimer) clearInterval(escPollTimer);
+  escPollTimer = setInterval(() => {
+    document.querySelectorAll('.esc-timer[data-timeout]').forEach(el => {
+      const timeout = el.getAttribute('data-timeout');
+      if (timeout) {
+        const urgency = getEscUrgency(timeout);
+        el.textContent = formatRemaining(timeout);
+        el.className = `esc-timer urgency-${urgency}`;
+      }
+    });
+  }, 1000);
+}
+async function respondEscalation(escalationId) {
+  const input = document.getElementById('escReply-' + escalationId);
+  const text = input?.value?.trim();
+  if (!text) return;
+  try {
+    const res = await fetch('/api/router/escalation-reply', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ escalationId, response: text }),
+    });
+    if (!res.ok) throw new Error(`${res.status}`);
+    const result = await res.json();
+    if (result.success === false) throw new Error(result.error || 'Failed');
+    escalations = escalations.filter(e => (e.escalation_id || e.id) !== escalationId);
+    renderEscalations();
+    updateEscBadge();
+    showToast('Response sent');
+  } catch (e) {
+    showToast('Failed to send response: ' + e.message, true);
+  }
+}
+async function denyEscalation(escalationId) {
+  if (!confirm('Deny this escalation? The contact will receive a timeout/fallback message.')) return;
+  try {
+    const res = await fetch('/api/router/escalation-reply', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ escalationId, response: '__DENY__' }),
+    });
+    if (!res.ok) throw new Error(`${res.status}`);
+    escalations = escalations.filter(e => (e.escalation_id || e.id) !== escalationId);
+    renderEscalations();
+    updateEscBadge();
+    showToast('Escalation denied');
+  } catch (e) {
+    showToast('Failed to deny escalation: ' + e.message, true);
+  }
+}
+// Poll for escalation badge count every 30s
+setInterval(async () => {
+  try {
+    const res = await fetch('/api/v2/escalations?limit=50');
+    if (res.ok) {
+      const data = await res.json();
+      escalations = (data || []).filter(e => e.status === 'pending');
+      updateEscBadge();
+      if (currentPage === 'escalations') renderEscalations();
+    }
+  } catch (e) { /* silent */ }
+}, 30000);
+// ---- Boot ----
+init();
+startEscTimers();
+// Initial escalation badge load
+loadEscalations();
+// Embedded mode detection - if inside an iframe, switch to embedded layout
+if (window.self !== window.top) {
+  document.querySelector('.app').classList.add('embedded');
+  // Create a bottom tab bar to replace the hidden sidebar
+  const tabBar = document.createElement('div');
+  tabBar.id = 'embeddedTabBar';
+  tabBar.style.cssText = 'display:flex;background:var(--void);border-top:1px solid var(--border);padding:6px 0 env(safe-area-inset-bottom, 6px);position:fixed;bottom:0;left:0;right:0;z-index:200;';
+  const tabs = [
+    { page: 'contacts', label: 'Contacts', icon: '<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>' },
+    { page: 'escalations', label: 'Alerts', icon: '<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>' },
+    { page: 'faq', label: 'FAQ', icon: '<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3m.08 4h.01"/></svg>' },
+    { page: 'playbook', label: 'Playbook', icon: '<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>' },
+    { page: 'settings', label: 'Settings', icon: '<svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><circle cx="12" cy="12" r="3"/></svg>' }
+  ];
+  tabs.forEach(t => {
+    const btn = document.createElement('button');
+    btn.style.cssText = 'flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:none;color:' + (t.page === 'contacts' ? 'var(--red)' : 'var(--text-muted)') + ';font-size:10px;font-family:inherit;cursor:pointer;padding:4px 0;';
+    btn.innerHTML = t.icon + '<span>' + t.label + '</span>';
+    btn.onclick = () => {
+      showPage(t.page);
+      tabBar.querySelectorAll('button').forEach(b => b.style.color = 'var(--text-muted)');
+      btn.style.color = 'var(--red)';
+    };
+    tabBar.appendChild(btn);
+  });
+  document.body.appendChild(tabBar);
+  // Add bottom padding so content isn't hidden behind tab bar
+  document.querySelector('.app').style.paddingBottom = '60px';
+}
+</script>
+</body>
+</html>