@conversionpros/aiva 1.0.0

package/public/js/onboarding.js

@@ -0,0 +1,699 @@
+/**
+ * AIVA Onboarding Tutorial — v2 Revamp
+ * Premium copy, inline SVGs, deep messaging guide.
+ */
+(function() {
+  'use strict';
+
+  // ── SVG Icon Library ──────────────────────────────────────────────────
+  const SVG = {
+    brain: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a5 5 0 0 1 4.9 4 4.5 4.5 0 0 1 2.1 4 4 4 0 0 1-1.5 7.5A4 4 0 0 1 12 22a4 4 0 0 1-5.5-4.5A4 4 0 0 1 5 10a4.5 4.5 0 0 1 2.1-4A5 5 0 0 1 12 2z"/><path d="M12 2v20"/><path d="M8 6c2 1 4 1 6 0"/><path d="M7 10.5c2.5 1 5.5 1 8 0"/><path d="M7.5 15c2.5 1 5 1 7.5 0"/></svg>`,
+    nodes: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="6" r="2"/><circle cx="19" cy="6" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="5" cy="18" r="2"/><circle cx="19" cy="18" r="2"/><line x1="7" y1="6" x2="10" y2="12"/><line x1="14" y1="12" x2="17" y2="6"/><line x1="7" y1="18" x2="10" y2="12"/><line x1="14" y1="12" x2="17" y2="18"/></svg>`,
+    speechWaves: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M16 8v0"/><path d="M18 6v4"/><path d="M20 7v2"/></svg>`,
+    calendarClock: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><circle cx="14" cy="16" r="3"/><path d="M14 14.5V16l1 1"/></svg>`,
+    gearLightning: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/><path d="M13 9l-2 3h3l-2 3"/></svg>`,
+    checkBubble: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><polyline points="9 11 11 13 15 9"/></svg>`,
+    envelopeNeural: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><polyline points="22 4 12 13 2 4"/><circle cx="9" cy="12" r="1"/><circle cx="15" cy="12" r="1"/><line x1="10" y1="12" x2="14" y2="12"/></svg>`,
+    brainArrows: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="10" r="5"/><path d="M12 5V3"/><path d="M8 7L5 4"/><path d="M16 7l3-3"/><path d="M6 19l3-4"/><path d="M18 19l-3-4"/><path d="M12 15v6"/></svg>`,
+    shieldRoute: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12h6m-3-3v6"/></svg>`,
+    dialSlider: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="8" x2="20" y2="8"/><line x1="4" y1="16" x2="20" y2="16"/><circle cx="10" cy="8" r="2"/><circle cx="16" cy="16" r="2"/></svg>`,
+    graphNeural: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 17 8 12 12 15 17 8 21 5"/><circle cx="21" cy="5" r="2"/><path d="M17 8c1 3 2 5 1 8"/></svg>`,
+    crosshair: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8"/><line x1="12" y1="2" x2="12" y2="6"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="2" y1="12" x2="6" y2="12"/><line x1="18" y1="12" x2="22" y2="12"/><polyline points="10 12 11 13 14 10"/></svg>`,
+    waveform: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="8" x2="4" y2="16"/><line x1="8" y1="5" x2="8" y2="19"/><line x1="12" y1="3" x2="12" y2="21"/><line x1="16" y1="6" x2="16" y2="18"/><line x1="20" y1="9" x2="20" y2="15"/></svg>`,
+    bell: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/><circle cx="18" cy="4" r="2" fill="none" stroke="currentColor" stroke-width="1"/><circle cx="18" cy="4" r="4" fill="none" stroke="currentColor" stroke-width="0.5" opacity="0.4"/></svg>`,
+    xCircle: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>`,
+    checkCircle: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="9 12 11 14 16 9"/></svg>`,
+    terminal: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>`,
+    kanban: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="5" height="18" rx="1"/><rect x="10" y="3" width="5" height="12" rx="1"/><rect x="17" y="3" width="5" height="8" rx="1"/></svg>`,
+    envelope: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><polyline points="22 4 12 13 2 4"/><path d="M15 13l4 4M9 13l-4 4"/></svg>`,
+    gear: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>`,
+    checkAnimated: `<svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" stroke-dasharray="63" stroke-dashoffset="63" style="animation:svgDraw 0.6s ease forwards"/><polyline points="8 12 11 15 16 9" stroke-dasharray="20" stroke-dashoffset="20" style="animation:svgDraw 0.4s ease 0.6s forwards"/></svg>`,
+    mic: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="1" width="6" height="12" rx="3"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>`,
+    paperclip: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>`,
+    filter: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>`,
+    inbox: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>`,
+    settings: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.32 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>`,
+    key: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.78 7.78 5.5 5.5 0 0 1 7.78-7.78zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>`,
+    record: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3" fill="currentColor"/></svg>`,
+    // Messaging guide specific
+    router: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="8" width="20" height="8" rx="2"/><line x1="6" y1="12" x2="6" y2="12.01"/><line x1="10" y1="12" x2="10" y2="12.01"/><path d="M6 8V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v3"/><path d="M6 16v3M18 16v3"/></svg>`,
+    userRules: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/><path d="M18 8l2 2 4-4"/></svg>`,
+    contextBuild: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/><line x1="8" y1="7" x2="16" y2="7"/><line x1="8" y1="11" x2="14" y2="11"/><line x1="8" y1="15" x2="12" y2="15"/></svg>`,
+    sendMsg: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>`,
+    userIntel: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M20 21v-2a4 4 0 0 0-3-3.87"/><path d="M4 21v-2a4 4 0 0 1 3-3.87"/><path d="M12 14c-3 0-5.5 1.5-6.5 4"/><circle cx="17" cy="17" r="3"/><path d="M17 15.5v1.5l1 1"/></svg>`,
+    notepad: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="13" y2="17"/></svg>`,
+  };
+
+  // Helper: wrap SVG in icon container
+  function svgIcon(key, size) {
+    return `<span class="ob-svg-icon" style="display:inline-flex;align-items:center;justify-content:center;width:${size||20}px;height:${size||20}px;">${SVG[key] || SVG.brain}</span>`;
+  }
+
+  // Large icon for screens
+  function svgIconLarge(key) {
+    const raw = SVG[key] || SVG.brain;
+    return raw.replace(/width="20"/g, 'width="48"').replace(/height="20"/g, 'height="48"');
+  }
+
+  // ── Step Image Map ──────────────────────────────────────────────────
+  const STEP_IMAGES = {
+    '0-0': '/images/onboarding/p0-meet-aiva.png',
+    '0-1': '/images/onboarding/p0-infinite-surface.png',
+    '0-2': '/images/onboarding/p0-communication-layer.png',
+    '0-3': '/images/onboarding/p0-learning-model.png',
+    '4-0': '/images/onboarding/p4-message-router.png',
+    '4-1': '/images/onboarding/p4-per-contact-rules.png',
+    '4-2': '/images/onboarding/p4-context-compounds.png',
+    '4-3': '/images/onboarding/p4-send-messages.png',
+    '4-4': '/images/onboarding/p4-contact-intelligence.png',
+    '6-0': '/images/onboarding/p6-be-precise.png',
+    '6-1': '/images/onboarding/p6-voice-input.png',
+    '6-2': '/images/onboarding/p6-review-escalations.png',
+    '7-0': '/images/onboarding/p7-completion.png',
+  };
+
+  function animContainer(phaseIdx, stepIdx) {
+    const key = `${phaseIdx}-${stepIdx}`;
+    const src = STEP_IMAGES[key];
+    if (!src) return '';
+    return `<div class="onboarding-anim-container ob-anim-float"><img src="${src}" alt="" class="onboarding-step-image" style="width:200px;height:200px;object-fit:cover;border-radius:20px;box-shadow:0 8px 40px rgba(129,140,248,0.3);"/></div>`;
+  }
+
+  // Allow reset via URL parameter
+  if (new URLSearchParams(window.location.search).get('reset_tour') === '1' ||
+      new URLSearchParams(window.location.search).has('tour')) {
+    localStorage.removeItem('aiva_onboarding_completed');
+    const url = new URL(window.location);
+    url.searchParams.delete('reset_tour');
+    url.searchParams.delete('tour');
+    window.history.replaceState({}, '', url);
+  }
+
+  const STORAGE_KEY = 'aiva_onboarding_completed';
+
+  const PHASES = [
+    // ═══ Phase 0: Welcome (screens) ═══
+    {
+      name: 'Welcome',
+      type: 'screens',
+      steps: [
+        {
+          svgKey: 'brain', iconClass: 'purple',
+          title: 'Meet AIVA',
+          subtitle: 'You just got access to something most people don\'t have yet.',
+          detail: 'AIVA isn\'t a chatbot. She\'s an autonomous intelligence that takes real action — messaging contacts, managing your calendar, running your pipeline, designing assets, drafting contracts, and working while you sleep.'
+        },
+        {
+          svgKey: 'nodes', iconClass: 'pink',
+          title: 'One Brain. Infinite Surface Area.',
+          subtitle: 'AIVA connects to your tools, your contacts, your workflows — and acts on all of them.',
+          features: [
+            { svgKey: 'speechWaves', text: '<strong>Communicate</strong> — Send messages across iMessage, WhatsApp, and Quo with full context of who you\'re talking to and why' },
+            { svgKey: 'calendarClock', text: '<strong>Orchestrate</strong> — Schedule meetings, block focus time, and manage your calendar without lifting a finger' },
+            { svgKey: 'gearLightning', text: '<strong>Execute</strong> — Run integrations, trigger workflows, and operate your business tools autonomously' },
+            { svgKey: 'checkBubble', text: '<strong>Capture</strong> — Extract tasks, commitments, and follow-ups from every conversation automatically' }
+          ]
+        },
+        {
+          svgKey: 'envelopeNeural', iconClass: 'blue',
+          title: 'Your Communication Layer',
+          subtitle: 'Every conversation AIVA handles gets smarter. Per-contact intelligence means she remembers context, adapts tone, and takes autonomous action — so the right message reaches the right person at the right time.',
+          features: [
+            { svgKey: 'brainArrows', text: '<strong>Contextual Memory</strong> — AIVA recalls every prior exchange, relationship detail, and preference for each contact. No conversation starts from zero.' },
+            { svgKey: 'shieldRoute', text: '<strong>Autonomous Action</strong> — She replies on your behalf with your voice, escalates what matters, and stays silent when that\'s the smarter move' },
+            { svgKey: 'dialSlider', text: '<strong>Per-Contact Control</strong> — Set the behavior individually. Full autonomy for some contacts, human-in-the-loop for others. You decide the boundaries.' }
+          ]
+        },
+        {
+          svgKey: 'graphNeural', iconClass: 'green',
+          title: 'The More You Use Her, The More She Knows',
+          subtitle: 'AIVA builds a living model of your world — your contacts, your preferences, your patterns, your voice.',
+          detail: 'This isn\'t keyword matching. It\'s accumulated intelligence. Every interaction refines her understanding of how you work, who matters to you, and what you\'d want done next.'
+        }
+      ]
+    },
+    // ═══ Phase 1: Chat Tour (tooltips) ═══
+    {
+      name: 'Chat Tour',
+      type: 'tooltips',
+      steps: [
+        {
+          selector: '#chatInput',
+          title: 'Command Center',
+          text: 'This is where everything starts. Tell AIVA what you need — send a message, research a competitor, draft a contract, plan your week. She doesn\'t just answer questions. She executes.'
+        },
+        {
+          selector: '#micBtn',
+          title: 'Think Out Loud',
+          text: 'Hold to record. Speak naturally — complex instructions, stream-of-consciousness ideas, detailed briefs. AIVA processes your voice with full comprehension, not just transcription.'
+        },
+        {
+          selector: '.chat-btn.attach',
+          title: 'Drop Anything In',
+          text: 'Screenshots, documents, images, PDFs. AIVA reads, analyzes, and acts on whatever you share. Hand her a competitor\'s sales sheet and ask for a better one.'
+        }
+      ]
+    },
+    // ═══ Phase 2: Tasks Tour (tooltips) ═══
+    {
+      name: 'Tasks Tour',
+      type: 'tooltips',
+      steps: [
+        {
+          selector: '.nav-item[onclick*="kanban"]',
+          title: 'Your Task Board',
+          text: 'AIVA doesn\'t just track what you tell her — she extracts commitments, deadlines, and action items from every conversation. They surface here automatically.',
+          position: 'top',
+          navigate: 'kanban'
+        },
+        {
+          selector: '.kanban-board',
+          title: 'Pipeline at a Glance',
+          text: 'Tasks are organized by status. Add tasks and AIVA executes them — moving cards through the pipeline as work progresses. From backlog to done, she handles the workflow.',
+          navigate: 'kanban'
+        },
+        // Multi-user dropdown step removed — single tenancy
+      ]
+    },
+    // ═══ Phase 3: Notes Tour (tooltips) ═══
+    {
+      name: 'Notes Tour',
+      type: 'tooltips',
+      steps: [
+        {
+          selector: '.nav-item[onclick*="notes"]',
+          title: 'Voice-First Notes',
+          text: 'Capture ideas, meeting takeaways, and raw thinking by voice. AIVA transcribes, summarizes, and organizes — so your thoughts become searchable assets.',
+          position: 'top',
+          navigate: 'notes'
+        },
+        {
+          selector: '#notesRecordBtn',
+          title: 'Start Recording',
+          text: 'One tap. Speak freely. AIVA handles transcription, tagging, and summarization. Your words become structured, retrievable intelligence.',
+          navigate: 'notes'
+        },
+        {
+          selector: '#notesFilter',
+          title: 'Find Anything Fast',
+          text: 'Filter by type — voice memos, meeting notes, or everything. As your library grows, this keeps signal above noise.',
+          navigate: 'notes'
+        }
+      ]
+    },
+    // ═══ Phase 4: Messages Tour (interactive guide) ═══
+    {
+      name: 'Messages Tour',
+      type: 'interactive-guide',
+      steps: [
+        {
+          svgKey: 'router', iconClass: 'blue',
+          title: 'The Message Router',
+          subtitle: 'This is where AIVA becomes your communication layer. Every inbound message flows through an intelligent router that decides: respond, escalate, or hold.',
+          detail: 'Think of it as a chief of staff for your inbox. AIVA reads every message, understands the context, and takes the right action — instantly.',
+          guideStep: 1, guideTotal: 5
+        },
+        {
+          svgKey: 'userRules', iconClass: 'purple',
+          title: 'Per-Contact Rules',
+          subtitle: 'Every contact gets their own behavior profile. You decide how AIVA handles each person.',
+          features: [
+            { svgKey: 'shieldRoute', text: '<strong>Auto-Respond</strong> — AIVA replies using your voice and tone. The contact never knows.' },
+            { svgKey: 'bell', text: '<strong>Escalate</strong> — AIVA flags the message for your personal attention with full context.' },
+            { svgKey: 'dialSlider', text: '<strong>Monitor</strong> — AIVA watches silently. Tracks the conversation. Only intervenes if something triggers a rule.' }
+          ],
+          detail: 'Set it once, adjust anytime. You\'re always in control of the boundaries.',
+          guideStep: 2, guideTotal: 5
+        },
+        {
+          svgKey: 'contextBuild', iconClass: 'green',
+          title: 'Context That Compounds',
+          subtitle: 'Every conversation makes AIVA sharper. She builds a living profile for each contact.',
+          features: [
+            { svgKey: 'brainArrows', text: '<strong>Relationship history</strong> — who they are, what they care about, how they communicate' },
+            { svgKey: 'calendarClock', text: '<strong>Timing patterns</strong> — when they reach out, response expectations, follow-up cadence' },
+            { svgKey: 'checkBubble', text: '<strong>Commitments tracking</strong> — promises made, tasks referenced, deadlines mentioned' }
+          ],
+          detail: 'After 10 conversations, AIVA knows that contact better than most CRMs ever will.',
+          guideStep: 3, guideTotal: 5
+        },
+        {
+          svgKey: 'sendMsg', iconClass: 'pink',
+          title: 'Send Messages Through AIVA',
+          subtitle: 'You don\'t have to leave the app. Tell AIVA who to message, what to say, and which channel — she handles delivery.',
+          features: [
+            { svgKey: 'speechWaves', text: '<strong>Multi-channel</strong> — iMessage, WhatsApp, Quo. One command, any platform.' },
+            { svgKey: 'crosshair', text: '<strong>Tone matching</strong> — AIVA adapts the message to match how you\'d actually say it' }
+          ],
+          detail: 'Try: "Send Marcus a follow-up about the proposal. Keep it warm but direct. Use WhatsApp."',
+          guideStep: 4, guideTotal: 5
+        },
+        {
+          svgKey: 'userIntel', iconClass: 'blue',
+          title: 'Per-Contact Intelligence',
+          subtitle: 'Tap any contact to see what AIVA knows — conversation summaries, sentiment trends, pending action items, and recommended next steps.',
+          detail: 'This is your relationship intelligence layer. Every contact becomes a strategic profile, updated in real-time as conversations happen.',
+          guideStep: 5, guideTotal: 5
+        }
+      ]
+    },
+    // ═══ Phase 5: Settings Tour (tooltips) ═══
+    {
+      name: 'Settings Tour',
+      type: 'tooltips',
+      steps: [
+        {
+          selector: '.nav-item[onclick*="settings"]',
+          title: 'Configuration',
+          text: 'Connect services, manage API tokens, and fine-tune how AIVA operates. This is the control plane behind the intelligence.',
+          position: 'top',
+          navigate: 'settings'
+        },
+        {
+          selector: '.settings-tab[onclick*="aiva-tokens"]',
+          title: 'Optional Superpowers',
+          text: 'AIVA is powerful out of the box. API keys unlock extra capabilities — image generation, voice synthesis, advanced AI models. Not required. Not scary. Just more power when you want it.',
+          navigate: 'settings'
+        }
+      ]
+    },
+    // ═══ Phase 6: Best Practices (screens) ═══
+    {
+      name: 'Best Practices',
+      type: 'screens',
+      steps: [
+        {
+          svgKey: 'crosshair', iconClass: 'purple',
+          title: 'Be Precise. Get Precision.',
+          subtitle: 'AIVA operates on intent. The sharper your input, the sharper her output.',
+          features: [
+            { svgKey: 'xCircle', text: '<strong>Vague:</strong> "send a message"' },
+            { svgKey: 'checkCircle', text: '<strong>Precise:</strong> "Send John a reminder about our meeting tomorrow at 3pm via iMessage. Keep it casual."' }
+          ],
+          detail: 'Names, dates, channels, tone — include everything. AIVA doesn\'t guess when she can know.'
+        },
+        {
+          svgKey: 'waveform', iconClass: 'pink',
+          title: 'Your Voice Is an Input Device',
+          subtitle: 'Complex requests, multi-step instructions, creative briefs — just talk. AIVA processes natural speech with full contextual understanding.',
+          detail: 'Voice is faster than typing for anything beyond a sentence. Use it for brainstorms, detailed task delegation, and anything where nuance matters.'
+        },
+        {
+          svgKey: 'bell', iconClass: 'blue',
+          title: 'Review What She Flags',
+          subtitle: 'When AIVA encounters something that requires your judgment, she escalates. Your response teaches her where the boundaries are.',
+          detail: 'The feedback loop is the learning loop. Every escalation you resolve makes her more autonomous next time.'
+        }
+      ]
+    },
+    // ═══ Phase 7: Completion ═══
+    {
+      name: "You're Live",
+      type: 'completion',
+      steps: [{ title: 'completion' }]
+    }
+  ];
+
+  let currentPhase = 0;
+  let currentStep = 0;
+  let isReplay = false;
+  let overlay = null;
+
+  function totalSteps() {
+    return PHASES.reduce((sum, p) => sum + p.steps.length, 0);
+  }
+
+  function globalStepIndex() {
+    let idx = 0;
+    for (let i = 0; i < currentPhase; i++) idx += PHASES[i].steps.length;
+    return idx + currentStep;
+  }
+
+  function progressPercent() {
+    return ((globalStepIndex() + 1) / totalSteps()) * 100;
+  }
+
+  function init() {
+    if (window.location.pathname !== '/' && !window.location.pathname.endsWith('index.html')) return;
+    const origShowApp = window.showApp;
+    if (typeof origShowApp === 'function') {
+      window.showApp = async function() {
+        await origShowApp.apply(this, arguments);
+        checkAndStart();
+      };
+    } else {
+      const poll = setInterval(() => {
+        if (document.getElementById('appContainer')?.style.display === 'flex') {
+          clearInterval(poll);
+          checkAndStart();
+        }
+      }, 500);
+    }
+  }
+
+  function checkAndStart() {
+    if (localStorage.getItem(STORAGE_KEY)) return;
+    setTimeout(() => start(false), 600);
+  }
+
+  function start(replay) {
+    isReplay = replay;
+    currentPhase = 0;
+    currentStep = 0;
+    if (typeof showView === 'function') showView('chat');
+    createOverlay();
+    render();
+  }
+
+  function createOverlay() {
+    if (overlay) overlay.remove();
+    overlay = document.createElement('div');
+    overlay.className = 'onboarding-overlay';
+    overlay.id = 'aivaOnboarding';
+    document.body.appendChild(overlay);
+    requestAnimationFrame(() => overlay.classList.add('visible'));
+  }
+
+  function cleanupHighlighted() {
+    document.querySelectorAll('.onboarding-highlighted').forEach(el => {
+      el.classList.remove('onboarding-highlighted');
+    });
+    const svgOverlay = document.getElementById('onboarding-svg-overlay');
+    if (svgOverlay) svgOverlay.remove();
+    const oldHighlight = document.getElementById('onboarding-highlight-el');
+    if (oldHighlight) oldHighlight.remove();
+    const oldTooltip = document.getElementById('onboarding-tooltip-el');
+    if (oldTooltip) oldTooltip.remove();
+  }
+
+  function createSvgMaskOverlay(rect, padding) {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.id = 'onboarding-svg-overlay';
+    svg.setAttribute('style', 'position:fixed;inset:0;z-index:999991;width:100%;height:100%;pointer-events:auto;');
+    svg.innerHTML = `
+      <defs>
+        <mask id="onboarding-mask">
+          <rect width="100%" height="100%" fill="white"/>
+          <rect x="${rect.left - padding}" y="${rect.top - padding}" 
+                width="${rect.width + padding * 2}" height="${rect.height + padding * 2}" 
+                rx="12" fill="black"/>
+        </mask>
+      </defs>
+      <rect width="100%" height="100%" fill="rgba(5,5,20,0.92)" mask="url(#onboarding-mask)"/>`;
+    document.body.appendChild(svg);
+  }
+
+  function navigateToPhase(phase) {
+    if (typeof showView !== 'function') return;
+    const viewMap = {
+      'Chat Tour': 'chat',
+      'Tasks Tour': 'kanban',
+      'Notes Tour': 'notes',
+      'Messages Tour': 'messages',
+      'Settings Tour': 'settings'
+    };
+    if (viewMap[phase.name]) showView(viewMap[phase.name]);
+  }
+
+  function render() {
+    cleanupHighlighted();
+    const phase = PHASES[currentPhase];
+    if (!phase) return finish();
+
+    navigateToPhase(phase);
+
+    if (phase.type === 'screens') renderScreen();
+    else if (phase.type === 'tooltips') renderTooltip();
+    else if (phase.type === 'interactive-guide') renderInteractiveGuide();
+    else if (phase.type === 'completion') renderCompletion();
+  }
+
+  function renderScreen() {
+    const phase = PHASES[currentPhase];
+    const step = phase.steps[currentStep];
+
+    overlay.style.background = 'rgba(5, 5, 20, 0.93)';
+    overlay.innerHTML = `
+      ${progressHTML()}
+      ${isReplay ? skipHTML() : ''}
+      <div class="onboarding-screen active">
+        ${animContainer(currentPhase, currentStep)}
+        ${STEP_IMAGES[`${currentPhase}-${currentStep}`] ? '' : `<div class="onboarding-icon ${step.iconClass || 'purple'}">${svgIconLarge(step.svgKey)}</div>`}
+        <div class="onboarding-title">${step.title}</div>
+        <div class="onboarding-subtitle">${step.subtitle}</div>
+        ${step.features ? `<div class="onboarding-features">${step.features.map(f =>
+          `<div class="onboarding-feature">
+            <div class="onboarding-feature-icon">${svgIcon(f.svgKey)}</div>
+            <div class="onboarding-feature-text">${f.text}</div>
+          </div>`
+        ).join('')}</div>` : ''}
+        ${step.detail ? `<div class="onboarding-detail">${step.detail}</div>` : ''}
+      </div>
+      ${navHTML()}
+    `;
+    bindNav();
+  }
+
+  function renderInteractiveGuide() {
+    const phase = PHASES[currentPhase];
+    const step = phase.steps[currentStep];
+
+    // Navigate to messages view on first step
+    if (typeof showView === 'function') showView('messages');
+
+    overlay.style.background = 'rgba(5, 5, 20, 0.93)';
+    overlay.innerHTML = `
+      ${progressHTML()}
+      ${isReplay ? skipHTML() : ''}
+      <div class="onboarding-screen active">
+        ${animContainer(currentPhase, currentStep)}
+        <div class="onboarding-guide-step-indicator">
+          ${Array.from({length: step.guideTotal}, (_, i) =>
+            `<div class="guide-dot ${i + 1 === step.guideStep ? 'active' : i + 1 < step.guideStep ? 'completed' : ''}"></div>`
+          ).join('<div class="guide-dot-line"></div>')}
+        </div>
+        ${STEP_IMAGES[`${currentPhase}-${currentStep}`] ? '' : `<div class="onboarding-icon ${step.iconClass || 'blue'}">${svgIconLarge(step.svgKey)}</div>`}
+        <div class="onboarding-title">${step.title}</div>
+        <div class="onboarding-subtitle">${step.subtitle}</div>
+        ${step.features ? `<div class="onboarding-features">${step.features.map(f =>
+          `<div class="onboarding-feature">
+            <div class="onboarding-feature-icon">${svgIcon(f.svgKey)}</div>
+            <div class="onboarding-feature-text">${f.text}</div>
+          </div>`
+        ).join('')}</div>` : ''}
+        ${step.detail ? `<div class="onboarding-detail">${step.detail}</div>` : ''}
+      </div>
+      ${navHTML()}
+    `;
+    bindNav();
+  }
+
+  function renderTooltip() {
+    const phase = PHASES[currentPhase];
+    const step = phase.steps[currentStep];
+
+    if (step.navigate && typeof showView === 'function') {
+      showView(step.navigate);
+    }
+
+    if (step.preAction) step.preAction();
+
+    overlay.innerHTML = `${progressHTML()}${isReplay ? skipHTML() : ''}`;
+    overlay.style.background = 'transparent';
+
+    setTimeout(() => {
+      const el = document.querySelector(step.selector);
+      if (!el) { next(); return; }
+
+      el.classList.add('onboarding-highlighted');
+      const rect = el.getBoundingClientRect();
+      const pad = 6;
+
+      createSvgMaskOverlay(rect, pad);
+
+      const highlight = document.createElement('div');
+      highlight.className = 'onboarding-highlight';
+      highlight.id = 'onboarding-highlight-el';
+      highlight.style.left = (rect.left - pad) + 'px';
+      highlight.style.top = (rect.top - pad) + 'px';
+      highlight.style.width = (rect.width + pad * 2) + 'px';
+      highlight.style.height = (rect.height + pad * 2) + 'px';
+      document.body.appendChild(highlight);
+
+      const tooltip = document.createElement('div');
+      tooltip.className = 'onboarding-tooltip';
+      tooltip.id = 'onboarding-tooltip-el';
+      tooltip.style.visibility = 'hidden';
+      tooltip.style.top = '0';
+      tooltip.style.left = '0';
+
+      tooltip.innerHTML = `
+        <div class="onboarding-tooltip-title">${step.title}</div>
+        <div class="onboarding-tooltip-text">${step.text}</div>
+        <div class="onboarding-tooltip-nav">
+          ${canGoBack() ? '<button class="onboarding-btn onboarding-btn-back" id="obBack">Back</button>' : ''}
+          <button class="onboarding-btn onboarding-btn-next" id="obNext">${isLastStep() ? 'Next Phase' : 'Next'} ${svgIcon('terminal', 14)}</button>
+        </div>
+      `;
+      document.body.appendChild(tooltip);
+
+      const GAP = 12, MARGIN = 8;
+      const vw = window.innerWidth, vh = window.innerHeight;
+      const tRect = tooltip.getBoundingClientRect();
+      const tw = tRect.width, th = tRect.height;
+      const hRect = {
+        top: rect.top - pad, bottom: rect.bottom + pad,
+        left: rect.left - pad, right: rect.right + pad,
+        width: rect.width + pad * 2, height: rect.height + pad * 2
+      };
+
+      const spaceBelow = vh - hRect.bottom - GAP;
+      const spaceAbove = hRect.top - GAP;
+      let top, left;
+      const preferAbove = step.position === 'top';
+
+      if (!preferAbove && spaceBelow >= th) {
+        top = hRect.bottom + GAP;
+        left = hRect.left + hRect.width / 2 - tw / 2;
+      } else if (spaceAbove >= th) {
+        top = hRect.top - GAP - th;
+        left = hRect.left + hRect.width / 2 - tw / 2;
+      } else if (!preferAbove && spaceBelow >= spaceAbove) {
+        top = hRect.bottom + GAP;
+        left = hRect.left + hRect.width / 2 - tw / 2;
+      } else {
+        top = hRect.top - GAP - th;
+        left = hRect.left + hRect.width / 2 - tw / 2;
+      }
+
+      left = Math.max(MARGIN, Math.min(left, vw - tw - MARGIN));
+      top = Math.max(MARGIN, Math.min(top, vh - th - MARGIN));
+
+      const tTop = top, tBottom = top + th, tLeft = left, tRight = left + tw;
+      const overlaps = !(tRight <= hRect.left || tLeft >= hRect.right || tBottom <= hRect.top || tTop >= hRect.bottom);
+      if (overlaps) {
+        top = top > hRect.top ? hRect.top - GAP - th : hRect.bottom + GAP;
+        top = Math.max(MARGIN, Math.min(top, vh - th - MARGIN));
+      }
+
+      tooltip.style.top = top + 'px';
+      tooltip.style.left = left + 'px';
+      tooltip.style.visibility = 'visible';
+
+      bindNav();
+    }, 200);
+  }
+
+  function renderCompletion() {
+    overlay.style.background = 'rgba(5, 5, 20, 0.93)';
+    overlay.innerHTML = `
+      ${progressHTML()}
+      <div class="onboarding-screen active">
+        ${animContainer(currentPhase, currentStep)}
+        <div class="onboarding-complete-check">${SVG.checkAnimated}</div>
+        <div class="onboarding-title">You're Live.</div>
+        <div class="onboarding-subtitle">Have AIVA join Facebook groups and start conversations. Manage your CRM pipeline. Build a weekly meal plan with a grocery list every Saturday. Design your next sales sheet. Draft contracts. Research competitors. Plan your workouts. Reply to leads at 2 AM while you sleep.</div>
+        <div class="onboarding-summary">
+          <div class="onboarding-summary-item">${svgIcon('terminal')} Command Center</div>
+          <div class="onboarding-summary-item">${svgIcon('kanban')} Task Pipeline</div>
+          <div class="onboarding-summary-item">${svgIcon('waveform')} Voice Notes</div>
+          <div class="onboarding-summary-item">${svgIcon('envelope')} Communication Layer</div>
+          <div class="onboarding-summary-item">${svgIcon('gear')} Configuration</div>
+        </div>
+        <div class="onboarding-pullquote">The real question isn't what AIVA can do. It's what you'll try first.</div>
+      </div>
+      <div class="onboarding-nav">
+        <button class="onboarding-btn onboarding-btn-next" id="obFinish" style="max-width:none;">Start Working with AIVA</button>
+      </div>
+    `;
+
+    document.getElementById('obFinish')?.addEventListener('click', finish);
+  }
+
+  function progressHTML() {
+    const phase = PHASES[currentPhase];
+    return `<div class="onboarding-progress">
+      <div class="onboarding-progress-label">
+        <span class="onboarding-progress-phase">Phase ${currentPhase + 1} of ${PHASES.length}: ${phase?.name || ''}</span>
+        <span class="onboarding-progress-step">Step ${currentStep + 1} of ${phase?.steps.length || 1}</span>
+      </div>
+      <div class="onboarding-progress-bar">
+        <div class="onboarding-progress-fill" style="width:${progressPercent()}%"></div>
+      </div>
+    </div>`;
+  }
+
+  function skipHTML() {
+    return '<button class="onboarding-skip" id="obSkip">Skip Tutorial</button>';
+  }
+
+  function navHTML() {
+    return `<div class="onboarding-nav">
+      ${canGoBack() ? '<button class="onboarding-btn onboarding-btn-back" id="obBack">Back</button>' : ''}
+      <button class="onboarding-btn onboarding-btn-next" id="obNext">Next</button>
+    </div>`;
+  }
+
+  function canGoBack() {
+    return currentPhase > 0 || currentStep > 0;
+  }
+
+  function isLastStep() {
+    const phase = PHASES[currentPhase];
+    return currentStep >= phase.steps.length - 1;
+  }
+
+  function bindNav() {
+    document.getElementById('obNext')?.addEventListener('click', next);
+    document.getElementById('obBack')?.addEventListener('click', back);
+    document.getElementById('obSkip')?.addEventListener('click', finish);
+  }
+
+  function next() {
+    const phase = PHASES[currentPhase];
+    if (currentStep < phase.steps.length - 1) {
+      currentStep++;
+    } else if (currentPhase < PHASES.length - 1) {
+      currentPhase++;
+      currentStep = 0;
+      if (PHASES[currentPhase]?.type !== 'tooltips' && typeof showView === 'function') {
+        showView('chat');
+      }
+    } else {
+      finish();
+      return;
+    }
+    render();
+  }
+
+  function back() {
+    if (currentStep > 0) {
+      currentStep--;
+    } else if (currentPhase > 0) {
+      currentPhase--;
+      currentStep = PHASES[currentPhase].steps.length - 1;
+    }
+    render();
+  }
+
+  function finish() {
+    cleanupHighlighted();
+    localStorage.setItem(STORAGE_KEY, Date.now().toString());
+    if (overlay) {
+      overlay.classList.remove('visible');
+      setTimeout(() => { overlay.remove(); overlay = null; }, 400);
+    }
+    if (typeof showView === 'function') showView('chat');
+  }
+
+  window.aivaOnboarding = {
+    start: function() { start(true); },
+    isCompleted: function() { return !!localStorage.getItem(STORAGE_KEY); }
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();