@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
  1. package/README.md +148 -0
  2. package/auto-deploy.js +190 -0
  3. package/bin/aiva.js +81 -0
  4. package/cli-sync.js +126 -0
  5. package/d2a-prompt-template.txt +106 -0
  6. package/diagnostics-api.js +304 -0
  7. package/docs/ara-dedup-fix-scope.md +112 -0
  8. package/docs/ara-fix-round2-scope.md +61 -0
  9. package/docs/ara-greeting-fix-scope.md +70 -0
  10. package/docs/calendar-date-fix-scope.md +28 -0
  11. package/docs/getting-started.md +115 -0
  12. package/docs/network-architecture-rollout-scope.md +43 -0
  13. package/docs/scope-google-oauth-integration.md +351 -0
  14. package/docs/settings-page-scope.md +50 -0
  15. package/docs/xai-imagine-scope.md +116 -0
  16. package/docs/xai-voice-integration-scope.md +115 -0
  17. package/docs/xai-voice-tools-scope.md +165 -0
  18. package/email-router.js +512 -0
  19. package/follow-up-handler.js +606 -0
  20. package/gateway-monitor.js +158 -0
  21. package/google-email.js +379 -0
  22. package/google-oauth.js +310 -0
  23. package/grok-imagine.js +97 -0
  24. package/health-reporter.js +287 -0
  25. package/invisible-prefix-base.txt +206 -0
  26. package/invisible-prefix-owner.txt +26 -0
  27. package/invisible-prefix-slim.txt +10 -0
  28. package/invisible-prefix.txt +43 -0
  29. package/knowledge-base.js +472 -0
  30. package/lib/cli.js +19 -0
  31. package/lib/config.js +124 -0
  32. package/lib/health.js +57 -0
  33. package/lib/process.js +207 -0
  34. package/lib/server.js +42 -0
  35. package/lib/setup.js +472 -0
  36. package/meta-capi.js +206 -0
  37. package/meta-leads.js +411 -0
  38. package/notion-oauth.js +323 -0
  39. package/package.json +61 -0
  40. package/public/agent-config.html +241 -0
  41. package/public/aiva-avatar-anime.png +0 -0
  42. package/public/css/docs.css.bak +688 -0
  43. package/public/css/onboarding.css +543 -0
  44. package/public/diagrams/claude-subscription-pool.html +329 -0
  45. package/public/diagrams/claude-subscription-pool.png +0 -0
  46. package/public/docs-icon.png +0 -0
  47. package/public/escalation.html +237 -0
  48. package/public/group-config.html +300 -0
  49. package/public/icon-192.png +0 -0
  50. package/public/icon-512.png +0 -0
  51. package/public/icons/agents.svg +1 -0
  52. package/public/icons/attach.svg +1 -0
  53. package/public/icons/characters.svg +1 -0
  54. package/public/icons/chat.svg +1 -0
  55. package/public/icons/docs.svg +1 -0
  56. package/public/icons/heartbeat.svg +1 -0
  57. package/public/icons/messages.svg +1 -0
  58. package/public/icons/mic.svg +1 -0
  59. package/public/icons/notes.svg +1 -0
  60. package/public/icons/settings.svg +1 -0
  61. package/public/icons/tasks.svg +1 -0
  62. package/public/images/onboarding/p0-communication-layer.png +0 -0
  63. package/public/images/onboarding/p0-infinite-surface.png +0 -0
  64. package/public/images/onboarding/p0-learning-model.png +0 -0
  65. package/public/images/onboarding/p0-meet-aiva.png +0 -0
  66. package/public/images/onboarding/p4-contact-intelligence.png +0 -0
  67. package/public/images/onboarding/p4-context-compounds.png +0 -0
  68. package/public/images/onboarding/p4-message-router.png +0 -0
  69. package/public/images/onboarding/p4-per-contact-rules.png +0 -0
  70. package/public/images/onboarding/p4-send-messages.png +0 -0
  71. package/public/images/onboarding/p6-be-precise.png +0 -0
  72. package/public/images/onboarding/p6-review-escalations.png +0 -0
  73. package/public/images/onboarding/p6-voice-input.png +0 -0
  74. package/public/images/onboarding/p7-completion.png +0 -0
  75. package/public/index.html +11594 -0
  76. package/public/js/onboarding.js +699 -0
  77. package/public/manifest.json +24 -0
  78. package/public/messages-v2.html +2824 -0
  79. package/public/permission-approve.html.bak +107 -0
  80. package/public/permissions.html +150 -0
  81. package/public/styles/design-system.css +68 -0
  82. package/router-db.js +604 -0
  83. package/router-utils.js +28 -0
  84. package/router-v2/adapters/imessage.js +191 -0
  85. package/router-v2/adapters/quo.js +82 -0
  86. package/router-v2/adapters/whatsapp.js +192 -0
  87. package/router-v2/contact-manager.js +234 -0
  88. package/router-v2/conversation-engine.js +498 -0
  89. package/router-v2/data/knowledge-base.json +176 -0
  90. package/router-v2/data/router-v2.db +0 -0
  91. package/router-v2/data/router-v2.db-shm +0 -0
  92. package/router-v2/data/router-v2.db-wal +0 -0
  93. package/router-v2/data/router.db +0 -0
  94. package/router-v2/db.js +457 -0
  95. package/router-v2/escalation-bridge.js +540 -0
  96. package/router-v2/follow-up-engine.js +347 -0
  97. package/router-v2/index.js +441 -0
  98. package/router-v2/ingestion.js +213 -0
  99. package/router-v2/knowledge-base.js +231 -0
  100. package/router-v2/lead-qualifier.js +152 -0
  101. package/router-v2/learning-loop.js +202 -0
  102. package/router-v2/outbound-sender.js +160 -0
  103. package/router-v2/package.json +13 -0
  104. package/router-v2/permission-gate.js +86 -0
  105. package/router-v2/playbook.js +177 -0
  106. package/router-v2/prompts/base.js +52 -0
  107. package/router-v2/prompts/first-contact.js +38 -0
  108. package/router-v2/prompts/lead-qualification.js +37 -0
  109. package/router-v2/prompts/scheduling.js +72 -0
  110. package/router-v2/prompts/style-overrides.js +22 -0
  111. package/router-v2/scheduler.js +301 -0
  112. package/router-v2/scripts/migrate-v1-to-v2.js +215 -0
  113. package/router-v2/scripts/seed-faq.js +67 -0
  114. package/router-v2/seed-knowledge-base.js +39 -0
  115. package/router-v2/utils/ai.js +129 -0
  116. package/router-v2/utils/phone.js +52 -0
  117. package/router-v2/utils/response-validator.js +98 -0
  118. package/router-v2/utils/sanitize.js +222 -0
  119. package/router.js +5005 -0
  120. package/routes/google-calendar.js +186 -0
  121. package/scripts/deploy.sh +62 -0
  122. package/scripts/macos-calendar.sh +232 -0
  123. package/scripts/onboard-device.sh +466 -0
  124. package/server.js +5131 -0
  125. package/start.sh +24 -0
  126. package/templates/AGENTS.md +548 -0
  127. package/templates/IDENTITY.md +15 -0
  128. package/templates/docs-agents.html +132 -0
  129. package/templates/docs-app.html +130 -0
  130. package/templates/docs-home.html +83 -0
  131. package/templates/docs-imessage.html +121 -0
  132. package/templates/docs-tasks.html +123 -0
  133. package/templates/docs-tips.html +175 -0
  134. package/templates/getting-started.html +809 -0
  135. package/templates/invisible-prefix-base.txt +171 -0
  136. package/templates/invisible-prefix-owner.txt +282 -0
  137. package/templates/invisible-prefix.txt +338 -0
  138. package/templates/manifest.json +61 -0
  139. package/templates/memory-org/clients.md +7 -0
  140. package/templates/memory-org/credentials.md +9 -0
  141. package/templates/memory-org/devices.md +7 -0
  142. package/templates/updates.html +464 -0
  143. package/templates/workspace/AGENTS.md.tmpl +161 -0
  144. package/templates/workspace/HEARTBEAT.md.tmpl +17 -0
  145. package/templates/workspace/IDENTITY.md.tmpl +15 -0
  146. package/templates/workspace/MEMORY.md.tmpl +16 -0
  147. package/templates/workspace/SOUL.md.tmpl +51 -0
  148. package/templates/workspace/USER.md.tmpl +25 -0
  149. package/tts-proxy.js +96 -0
  150. package/voice-call-local.js +731 -0
  151. package/voice-call.js +732 -0
  152. package/wa-listener.js +354 -0
@@ -0,0 +1,809 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Getting Started — AIVA</title>
7
+ <style>
8
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
9
+
10
+ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
11
+
12
+ :root {
13
+ --bg: #0a0a0f;
14
+ --bg-elevated: #111118;
15
+ --bg-card: rgba(255,255,255,0.03);
16
+ --border: rgba(255,255,255,0.06);
17
+ --border-hover: rgba(255,255,255,0.12);
18
+ --text: #b0b0b8;
19
+ --text-secondary: #707078;
20
+ --text-heading: #f0f0f5;
21
+ --accent: #7b8cff;
22
+ --accent-soft: rgba(123,140,255,0.08);
23
+ --accent-glow: rgba(123,140,255,0.15);
24
+ --radius: 16px;
25
+ --radius-sm: 10px;
26
+ }
27
+
28
+ body {
29
+ background: var(--bg);
30
+ color: var(--text);
31
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
32
+ line-height: 1.7;
33
+ -webkit-font-smoothing: antialiased;
34
+ -moz-osx-font-smoothing: grayscale;
35
+ overflow-x: hidden;
36
+ }
37
+
38
+ /* ── Animations ── */
39
+ @keyframes fadeUp {
40
+ from { opacity: 0; transform: translateY(24px); }
41
+ to { opacity: 1; transform: translateY(0); }
42
+ }
43
+ @keyframes fadeIn {
44
+ from { opacity: 0; }
45
+ to { opacity: 1; }
46
+ }
47
+
48
+ .fade-section {
49
+ opacity: 0;
50
+ transform: translateY(24px);
51
+ transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
52
+ }
53
+ .fade-section.visible {
54
+ opacity: 1;
55
+ transform: translateY(0);
56
+ }
57
+
58
+ /* ── Layout ── */
59
+ .page-container {
60
+ max-width: 960px;
61
+ margin: 0 auto;
62
+ padding: 0 1.5rem;
63
+ }
64
+
65
+ /* ── Hero ── */
66
+ .hero {
67
+ position: relative;
68
+ padding: 6rem 0 4rem;
69
+ text-align: center;
70
+ overflow: hidden;
71
+ }
72
+ .hero::before {
73
+ content: '';
74
+ position: absolute;
75
+ top: -40%;
76
+ left: 50%;
77
+ transform: translateX(-50%);
78
+ width: 600px;
79
+ height: 600px;
80
+ background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
81
+ border-radius: 50%;
82
+ pointer-events: none;
83
+ z-index: 0;
84
+ }
85
+ .hero-content {
86
+ position: relative;
87
+ z-index: 1;
88
+ animation: fadeUp 0.8s ease-out;
89
+ }
90
+ .hero-badge {
91
+ display: inline-flex;
92
+ align-items: center;
93
+ gap: 6px;
94
+ padding: 6px 14px;
95
+ border-radius: 100px;
96
+ background: var(--accent-soft);
97
+ border: 1px solid rgba(123,140,255,0.15);
98
+ font-size: 0.8rem;
99
+ font-weight: 500;
100
+ color: var(--accent);
101
+ letter-spacing: 0.03em;
102
+ margin-bottom: 1.5rem;
103
+ }
104
+ .hero h1 {
105
+ font-size: clamp(2rem, 5vw, 3.2rem);
106
+ font-weight: 800;
107
+ color: var(--text-heading);
108
+ line-height: 1.15;
109
+ letter-spacing: -0.03em;
110
+ margin-bottom: 1rem;
111
+ }
112
+ .hero .subtitle {
113
+ font-size: clamp(1rem, 2.5vw, 1.2rem);
114
+ color: var(--text-secondary);
115
+ max-width: 540px;
116
+ margin: 0 auto;
117
+ line-height: 1.6;
118
+ font-weight: 400;
119
+ }
120
+
121
+ /* ── Section ── */
122
+ .section {
123
+ padding: 4rem 0;
124
+ }
125
+ .section + .section {
126
+ border-top: 1px solid var(--border);
127
+ }
128
+ .section-label {
129
+ font-size: 0.75rem;
130
+ font-weight: 600;
131
+ text-transform: uppercase;
132
+ letter-spacing: 0.1em;
133
+ color: var(--accent);
134
+ margin-bottom: 0.75rem;
135
+ }
136
+ .section-title {
137
+ font-size: clamp(1.5rem, 3vw, 2rem);
138
+ font-weight: 700;
139
+ color: var(--text-heading);
140
+ letter-spacing: -0.02em;
141
+ margin-bottom: 0.75rem;
142
+ line-height: 1.2;
143
+ }
144
+ .section-desc {
145
+ font-size: 1.05rem;
146
+ color: var(--text-secondary);
147
+ max-width: 620px;
148
+ line-height: 1.7;
149
+ margin-bottom: 2.5rem;
150
+ }
151
+
152
+ /* ── Agent Cards ── */
153
+ .agent-grid {
154
+ display: grid;
155
+ grid-template-columns: repeat(2, 1fr);
156
+ gap: 1.25rem;
157
+ }
158
+ .agent-card {
159
+ background: var(--bg-card);
160
+ border: 1px solid var(--border);
161
+ border-radius: var(--radius);
162
+ padding: 1.75rem;
163
+ transition: border-color 0.3s ease, box-shadow 0.3s ease;
164
+ }
165
+ .agent-card:hover {
166
+ border-color: var(--border-hover);
167
+ box-shadow: 0 0 40px rgba(123,140,255,0.04);
168
+ }
169
+ .agent-card .agent-icon {
170
+ width: 40px;
171
+ height: 40px;
172
+ border-radius: 10px;
173
+ background: var(--accent-soft);
174
+ display: flex;
175
+ align-items: center;
176
+ justify-content: center;
177
+ margin-bottom: 1rem;
178
+ }
179
+ .agent-card .agent-icon svg {
180
+ width: 20px;
181
+ height: 20px;
182
+ stroke: var(--accent);
183
+ fill: none;
184
+ stroke-width: 1.5;
185
+ stroke-linecap: round;
186
+ stroke-linejoin: round;
187
+ }
188
+ .agent-card h3 {
189
+ font-size: 1.05rem;
190
+ font-weight: 600;
191
+ color: var(--text-heading);
192
+ margin-bottom: 0.25rem;
193
+ }
194
+ .agent-card .agent-role {
195
+ font-size: 0.82rem;
196
+ color: var(--accent);
197
+ font-weight: 500;
198
+ margin-bottom: 0.75rem;
199
+ }
200
+ .agent-card p {
201
+ font-size: 0.92rem;
202
+ line-height: 1.65;
203
+ color: var(--text);
204
+ }
205
+ .agent-card ul {
206
+ list-style: none;
207
+ padding: 0;
208
+ margin: 0.75rem 0 0;
209
+ }
210
+ .agent-card ul li {
211
+ font-size: 0.88rem;
212
+ color: var(--text);
213
+ padding: 0.25rem 0;
214
+ padding-left: 1.1rem;
215
+ position: relative;
216
+ }
217
+ .agent-card ul li::before {
218
+ content: '';
219
+ position: absolute;
220
+ left: 0;
221
+ top: 0.65rem;
222
+ width: 5px;
223
+ height: 5px;
224
+ border-radius: 50%;
225
+ background: var(--accent);
226
+ opacity: 0.5;
227
+ }
228
+
229
+ /* Full-width card */
230
+ .agent-card.full-width {
231
+ grid-column: 1 / -1;
232
+ }
233
+
234
+ /* ── Communication Comparison ── */
235
+ .comm-grid {
236
+ display: grid;
237
+ grid-template-columns: repeat(2, 1fr);
238
+ gap: 1.25rem;
239
+ }
240
+ .comm-card {
241
+ background: var(--bg-card);
242
+ border: 1px solid var(--border);
243
+ border-radius: var(--radius);
244
+ padding: 2rem;
245
+ }
246
+ .comm-card h3 {
247
+ font-size: 1.1rem;
248
+ font-weight: 600;
249
+ color: var(--text-heading);
250
+ margin-bottom: 0.5rem;
251
+ }
252
+ .comm-card .comm-subtitle {
253
+ font-size: 0.85rem;
254
+ color: var(--accent);
255
+ font-weight: 500;
256
+ margin-bottom: 1.25rem;
257
+ }
258
+ .comm-card ul {
259
+ list-style: none;
260
+ padding: 0;
261
+ margin: 0;
262
+ }
263
+ .comm-card ul li {
264
+ font-size: 0.92rem;
265
+ color: var(--text);
266
+ padding: 0.4rem 0;
267
+ padding-left: 1.1rem;
268
+ position: relative;
269
+ line-height: 1.55;
270
+ }
271
+ .comm-card ul li::before {
272
+ content: '';
273
+ position: absolute;
274
+ left: 0;
275
+ top: 0.7rem;
276
+ width: 5px;
277
+ height: 5px;
278
+ border-radius: 50%;
279
+ background: var(--accent);
280
+ opacity: 0.4;
281
+ }
282
+ .comm-card .pro-tip {
283
+ margin-top: 1.25rem;
284
+ padding: 0.85rem 1rem;
285
+ background: var(--accent-soft);
286
+ border-radius: var(--radius-sm);
287
+ font-size: 0.88rem;
288
+ color: var(--text);
289
+ line-height: 1.55;
290
+ }
291
+ .comm-card .pro-tip strong {
292
+ color: var(--text-heading);
293
+ }
294
+
295
+ /* ── Workflow Steps ── */
296
+ .workflow {
297
+ margin-top: 2.5rem;
298
+ }
299
+ .workflow-step {
300
+ display: flex;
301
+ gap: 1.25rem;
302
+ padding: 1.25rem 0;
303
+ }
304
+ .workflow-step + .workflow-step {
305
+ border-top: 1px solid var(--border);
306
+ }
307
+ .step-num {
308
+ flex-shrink: 0;
309
+ width: 36px;
310
+ height: 36px;
311
+ border-radius: 10px;
312
+ background: var(--accent-soft);
313
+ display: flex;
314
+ align-items: center;
315
+ justify-content: center;
316
+ font-size: 0.85rem;
317
+ font-weight: 600;
318
+ color: var(--accent);
319
+ }
320
+ .step-content {
321
+ flex: 1;
322
+ }
323
+ .step-content strong {
324
+ display: block;
325
+ color: var(--text-heading);
326
+ font-size: 0.95rem;
327
+ margin-bottom: 0.15rem;
328
+ }
329
+ .step-content span {
330
+ font-size: 0.9rem;
331
+ color: var(--text);
332
+ }
333
+
334
+ /* ── Best Practices ── */
335
+ .practices-grid {
336
+ display: grid;
337
+ grid-template-columns: repeat(2, 1fr);
338
+ gap: 1.25rem;
339
+ }
340
+ .practice-card {
341
+ background: var(--bg-card);
342
+ border: 1px solid var(--border);
343
+ border-radius: var(--radius);
344
+ padding: 2rem;
345
+ }
346
+ .practice-card h3 {
347
+ font-size: 1rem;
348
+ font-weight: 600;
349
+ margin-bottom: 1.25rem;
350
+ display: flex;
351
+ align-items: center;
352
+ gap: 0.5rem;
353
+ }
354
+ .practice-card.do h3 { color: #6fcf97; }
355
+ .practice-card.dont h3 { color: #f2836b; }
356
+ .practice-card ul {
357
+ list-style: none;
358
+ padding: 0;
359
+ margin: 0;
360
+ }
361
+ .practice-card ul li {
362
+ font-size: 0.92rem;
363
+ color: var(--text);
364
+ padding: 0.5rem 0;
365
+ line-height: 1.6;
366
+ border-top: 1px solid var(--border);
367
+ }
368
+ .practice-card ul li:first-child {
369
+ border-top: none;
370
+ padding-top: 0;
371
+ }
372
+ .practice-card ul li strong {
373
+ color: var(--text-heading);
374
+ }
375
+
376
+ /* ── FAQ ── */
377
+ .faq-list {
378
+ display: flex;
379
+ flex-direction: column;
380
+ gap: 0;
381
+ }
382
+ .faq-item {
383
+ border-bottom: 1px solid var(--border);
384
+ }
385
+ .faq-item:first-child {
386
+ border-top: 1px solid var(--border);
387
+ }
388
+ .faq-question {
389
+ width: 100%;
390
+ background: none;
391
+ border: none;
392
+ padding: 1.25rem 0;
393
+ font-size: 1rem;
394
+ font-weight: 500;
395
+ color: var(--text-heading);
396
+ text-align: left;
397
+ cursor: pointer;
398
+ display: flex;
399
+ justify-content: space-between;
400
+ align-items: center;
401
+ font-family: inherit;
402
+ line-height: 1.5;
403
+ }
404
+ .faq-question:hover { color: #fff; }
405
+ .faq-question svg {
406
+ flex-shrink: 0;
407
+ width: 18px;
408
+ height: 18px;
409
+ stroke: var(--text-secondary);
410
+ fill: none;
411
+ stroke-width: 2;
412
+ transition: transform 0.3s ease;
413
+ margin-left: 1rem;
414
+ }
415
+ .faq-item.open .faq-question svg {
416
+ transform: rotate(45deg);
417
+ }
418
+ .faq-answer {
419
+ max-height: 0;
420
+ overflow: hidden;
421
+ transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s ease;
422
+ }
423
+ .faq-item.open .faq-answer {
424
+ max-height: 300px;
425
+ padding-bottom: 1.25rem;
426
+ }
427
+ .faq-answer p {
428
+ font-size: 0.95rem;
429
+ color: var(--text);
430
+ line-height: 1.7;
431
+ }
432
+
433
+ /* ── Footer ── */
434
+ .page-footer {
435
+ padding: 3rem 0;
436
+ border-top: 1px solid var(--border);
437
+ text-align: center;
438
+ margin-top: 2rem;
439
+ }
440
+ .page-footer p {
441
+ font-size: 0.85rem;
442
+ color: var(--text-secondary);
443
+ }
444
+ .page-footer a {
445
+ color: var(--accent);
446
+ text-decoration: none;
447
+ }
448
+ .page-footer a:hover {
449
+ text-decoration: underline;
450
+ }
451
+
452
+ /* ── Responsive ── */
453
+ @media (max-width: 680px) {
454
+ .hero { padding: 4rem 0 3rem; }
455
+ .section { padding: 3rem 0; }
456
+ .agent-grid { grid-template-columns: 1fr; }
457
+ .comm-grid { grid-template-columns: 1fr; }
458
+ .practices-grid { grid-template-columns: 1fr; }
459
+ .page-container { padding: 0 1.25rem; }
460
+ }
461
+ </style>
462
+ </head>
463
+ <body>
464
+
465
+ <!-- ── Hamburger Nav ── -->
466
+ <style>
467
+ .nav-hamburger {
468
+ position: fixed; top: 20px; left: 20px; z-index: 10000;
469
+ width: 44px; height: 44px; border-radius: 12px;
470
+ background: var(--bg-elevated); border: 1px solid var(--border);
471
+ display: flex; align-items: center; justify-content: center;
472
+ cursor: pointer; transition: background 0.2s, border-color 0.2s;
473
+ }
474
+ .nav-hamburger:hover { background: rgba(255,255,255,0.06); border-color: var(--border-hover); }
475
+ .nav-hamburger span { display: block; width: 20px; height: 2px; background: var(--text-heading); position: relative; transition: all 0.3s; }
476
+ .nav-hamburger span::before, .nav-hamburger span::after {
477
+ content: ''; position: absolute; left: 0; width: 20px; height: 2px;
478
+ background: var(--text-heading); transition: all 0.3s;
479
+ }
480
+ .nav-hamburger span::before { top: -6px; }
481
+ .nav-hamburger span::after { top: 6px; }
482
+ .nav-hamburger.open span { background: transparent; }
483
+ .nav-hamburger.open span::before { top: 0; transform: rotate(45deg); }
484
+ .nav-hamburger.open span::after { top: 0; transform: rotate(-45deg); }
485
+
486
+ .nav-overlay {
487
+ position: fixed; inset: 0; z-index: 9998;
488
+ background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none;
489
+ transition: opacity 0.3s;
490
+ }
491
+ .nav-overlay.open { opacity: 1; pointer-events: auto; }
492
+
493
+ .nav-drawer {
494
+ position: fixed; top: 0; left: 0; z-index: 9999;
495
+ width: 280px; height: 100vh; background: var(--bg-elevated);
496
+ border-right: 1px solid var(--border);
497
+ transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
498
+ padding: 80px 24px 24px;
499
+ }
500
+ .nav-drawer.open { transform: translateX(0); }
501
+ .nav-drawer a {
502
+ display: block; padding: 14px 16px; margin-bottom: 4px;
503
+ color: var(--text); text-decoration: none; font-size: 15px;
504
+ font-weight: 500; border-radius: var(--radius-sm);
505
+ transition: background 0.2s, color 0.2s;
506
+ }
507
+ .nav-drawer a:hover, .nav-drawer a.active {
508
+ background: var(--accent-soft); color: var(--accent);
509
+ }
510
+ </style>
511
+
512
+ <div class="nav-overlay" id="navOverlay"></div>
513
+ <div class="nav-drawer" id="navDrawer">
514
+ <a href="/getting-started" id="nav-gs">Getting Started</a>
515
+ <a href="/updates" id="nav-up">Updates</a>
516
+ <a href="/">Back to AIVA App</a>
517
+ </div>
518
+ <button class="nav-hamburger" id="navHamburger" aria-label="Menu"><span></span></button>
519
+
520
+ <script>
521
+ (function(){
522
+ var btn=document.getElementById('navHamburger'),
523
+ drawer=document.getElementById('navDrawer'),
524
+ overlay=document.getElementById('navOverlay');
525
+ function toggle(){
526
+ var open=drawer.classList.toggle('open');
527
+ overlay.classList.toggle('open',open);
528
+ btn.classList.toggle('open',open);
529
+ }
530
+ btn.addEventListener('click',toggle);
531
+ overlay.addEventListener('click',toggle);
532
+ // highlight current
533
+ var path=location.pathname;
534
+ if(path==='/getting-started') document.getElementById('nav-gs').classList.add('active');
535
+ else if(path==='/updates') document.getElementById('nav-up').classList.add('active');
536
+ })();
537
+ </script>
538
+ <!-- ── End Hamburger Nav ── -->
539
+
540
+ <!-- ── Hero ── -->
541
+ <section class="hero">
542
+ <div class="page-container hero-content">
543
+ <div class="hero-badge">
544
+ <svg width="14" height="14" 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"/><path d="M12 6v6l4 2"/></svg>
545
+ Getting Started
546
+ </div>
547
+ <h1>Getting to Know Your<br>AIVA Assistant</h1>
548
+ <p class="subtitle">AIVA is your personal AI-powered assistant designed to help you stay organized, communicate effectively, and get things done. Here's everything you need to know.</p>
549
+ <a href="/updates" style="display:inline-flex;align-items:center;gap:8px;margin-top:1.5rem;padding:0.65rem 1.5rem;background:rgba(123,140,255,0.1);border:1px solid rgba(123,140,255,0.25);border-radius:999px;color:#7b8cff;font-size:0.9rem;font-weight:500;text-decoration:none;transition:all 0.2s ease;" onmouseover="this.style.background='rgba(123,140,255,0.18)';this.style.borderColor='rgba(123,140,255,0.4)'" onmouseout="this.style.background='rgba(123,140,255,0.1)';this.style.borderColor='rgba(123,140,255,0.25)'">
550
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20V10"/><path d="M18 20V4"/><path d="M6 20v-4"/></svg>
551
+ View Updates &amp; Training Feed
552
+ </a>
553
+ </div>
554
+ </section>
555
+
556
+ <div class="page-container">
557
+
558
+ <!-- ── What is AIVA ── -->
559
+ <section class="section fade-section">
560
+ <div class="section-label">Overview</div>
561
+ <h2 class="section-title">What is AIVA?</h2>
562
+ <p class="section-desc">AIVA is more than a chatbot — she's a team of specialized AI agents working together behind the scenes. Think of it like having a personal office staff: each agent has a specific role, and they coordinate to handle your requests efficiently.</p>
563
+ <p class="section-desc" style="margin-top:-1rem;">You don't need to worry about which agent does what — just communicate naturally, and AIVA routes everything to the right place.</p>
564
+ </section>
565
+
566
+ <!-- ── How AIVA is Set Up ── -->
567
+ <section class="section fade-section">
568
+ <div class="section-label">Architecture</div>
569
+ <h2 class="section-title">How AIVA is Set Up</h2>
570
+ <p class="section-desc">AIVA uses a multi-agent system, meaning different agents handle different types of work.</p>
571
+
572
+ <div class="agent-grid">
573
+ <div class="agent-card full-width">
574
+ <div class="agent-icon">
575
+ <svg viewBox="0 0 24 24"><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>
576
+ </div>
577
+ <h3>Main Agent</h3>
578
+ <div class="agent-role">Your Central Brain</div>
579
+ <p>This is the agent you talk to in the AIVA App. It's the coordinator — the one that receives your requests and figures out who should handle them.</p>
580
+ <ul>
581
+ <li>Receives your requests and figures out who should handle them</li>
582
+ <li>Manages your task board</li>
583
+ <li>Distributes knowledge across all other agents</li>
584
+ <li>Handles calendar, email monitoring, and general questions</li>
585
+ <li>Sends you morning and evening briefings</li>
586
+ </ul>
587
+ <p style="margin-top:0.75rem;"><strong>Think of it as your executive assistant</strong> who delegates to specialists.</p>
588
+ </div>
589
+
590
+ <div class="agent-card">
591
+ <div class="agent-icon">
592
+ <svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
593
+ </div>
594
+ <h3>Outreach Agent</h3>
595
+ <div class="agent-role">Your Message Manager</div>
596
+ <p>Handles all iMessage and text communication. When someone texts your AIVA-managed number:</p>
597
+ <ul>
598
+ <li>Reads and responds based on your preferences</li>
599
+ <li>Manages conversations with contacts on your behalf</li>
600
+ <li>Follows up on active conversations automatically</li>
601
+ <li>Surfaces important messages to the main agent</li>
602
+ </ul>
603
+ <p style="margin-top:0.75rem;"><strong>Think of it as your receptionist</strong> — fielding calls and messages so you don't have to.</p>
604
+ </div>
605
+
606
+ <div class="agent-card">
607
+ <div class="agent-icon">
608
+ <svg viewBox="0 0 24 24"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M22 7l-10 7L2 7"/></svg>
609
+ </div>
610
+ <h3>Email Agent</h3>
611
+ <div class="agent-role">Your Inbox Manager</div>
612
+ <p>Monitors your email, triages messages, and alerts you to anything important. Routine stuff gets handled automatically so you only see what matters.</p>
613
+ </div>
614
+
615
+ <div class="agent-card">
616
+ <div class="agent-icon">
617
+ <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
618
+ </div>
619
+ <h3>Research Agent</h3>
620
+ <div class="agent-role">Your Analyst</div>
621
+ <p>When you need information — market research, competitor analysis, or deep dives on a topic — the research agent handles it and reports back with findings.</p>
622
+ </div>
623
+
624
+ <div class="agent-card">
625
+ <div class="agent-icon">
626
+ <svg viewBox="0 0 24 24"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
627
+ </div>
628
+ <h3>Content Agent</h3>
629
+ <div class="agent-role">Your Writer</div>
630
+ <p>Handles content creation tasks — drafts, copy, documentation, social posts, and more.</p>
631
+ </div>
632
+ </div>
633
+ </section>
634
+
635
+ <!-- ── How to Communicate ── -->
636
+ <section class="section fade-section">
637
+ <div class="section-label">Communication</div>
638
+ <h2 class="section-title">How to Communicate with AIVA</h2>
639
+ <p class="section-desc">Two channels, each with a distinct purpose. Use the right one to get the best results.</p>
640
+
641
+ <div class="comm-grid">
642
+ <div class="comm-card">
643
+ <h3>The AIVA App</h3>
644
+ <div class="comm-subtitle">Your Main Channel</div>
645
+ <p style="font-size:0.92rem;color:var(--text);margin-bottom:1rem;">The AIVA app is your central hub. This is where you should:</p>
646
+ <ul>
647
+ <li><strong>Brain dump</strong> — tell AIVA everything on your mind. She'll organize it, create tasks, and distribute knowledge to the right agents.</li>
648
+ <li><strong>Make requests</strong> — "Schedule a meeting with John next week" or "Research the best CRM tools for small businesses"</li>
649
+ <li><strong>Check your task board</strong> — see what's in progress, what's done, and what needs attention</li>
650
+ <li><strong>Review agent activity</strong> — see what your agents are working on</li>
651
+ </ul>
652
+ <div class="pro-tip"><strong>Pro tip:</strong> Voice messages work great in the app. Just talk naturally — AIVA will transcribe and act on it.</div>
653
+ </div>
654
+
655
+ <div class="comm-card">
656
+ <h3>iMessage</h3>
657
+ <div class="comm-subtitle">Your Outreach Channel</div>
658
+ <p style="font-size:0.92rem;color:var(--text);margin-bottom:1rem;">Messages sent to your AIVA phone number go directly to the outreach agent. This is specifically for:</p>
659
+ <ul>
660
+ <li>Managing conversations with contacts</li>
661
+ <li>Scheduling and follow-ups</li>
662
+ <li>Having your outreach agent handle communication on your behalf</li>
663
+ </ul>
664
+ <div class="pro-tip"><strong>Important:</strong> The outreach agent is a separate specialist from your main AIVA. Training it happens through iMessage conversations. The more context you give it about how you want to handle specific contacts, the better it gets.</div>
665
+ </div>
666
+ </div>
667
+
668
+ <!-- Workflow Steps -->
669
+ <div class="workflow">
670
+ <h3 style="font-size:1.05rem;font-weight:600;color:var(--text-heading);margin-bottom:0.5rem;">What Happens When You Submit a Request</h3>
671
+ <div class="workflow-step">
672
+ <div class="step-num">1</div>
673
+ <div class="step-content"><strong>You send a message</strong><span>Via app, voice, or text</span></div>
674
+ </div>
675
+ <div class="workflow-step">
676
+ <div class="step-num">2</div>
677
+ <div class="step-content"><strong>AIVA receives it</strong><span>And creates a task on your board</span></div>
678
+ </div>
679
+ <div class="workflow-step">
680
+ <div class="step-num">3</div>
681
+ <div class="step-content"><strong>The right agent picks it up</strong><span>Based on what needs to be done</span></div>
682
+ </div>
683
+ <div class="workflow-step">
684
+ <div class="step-num">4</div>
685
+ <div class="step-content"><strong>Work happens</strong><span>You can check progress on the task board anytime</span></div>
686
+ </div>
687
+ <div class="workflow-step">
688
+ <div class="step-num">5</div>
689
+ <div class="step-content"><strong>You get notified</strong><span>When it's done, with a summary of what was accomplished</span></div>
690
+ </div>
691
+ </div>
692
+ </section>
693
+
694
+ <!-- ── Best Practices ── -->
695
+ <section class="section fade-section">
696
+ <div class="section-label">Best Practices</div>
697
+ <h2 class="section-title">Getting the Most from AIVA</h2>
698
+ <p class="section-desc">A few guidelines to help you work effectively with your assistant.</p>
699
+
700
+ <div class="practices-grid">
701
+ <div class="practice-card do">
702
+ <h3>
703
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
704
+ Do This
705
+ </h3>
706
+ <ul>
707
+ <li><strong>Be specific</strong> — "Schedule a 30-min call with John on Thursday at 2 PM" works better than "set something up with John"</li>
708
+ <li><strong>Use the app for big-picture stuff</strong> — strategy, planning, brain dumps, complex requests</li>
709
+ <li><strong>Use iMessage for message management</strong> — training your outreach agent on how to handle contacts</li>
710
+ <li><strong>Check your task board</strong> — it's the single source of truth for all work in progress</li>
711
+ <li><strong>Give feedback</strong> — if AIVA does something you don't like, say so. She learns from your preferences.</li>
712
+ </ul>
713
+ </div>
714
+
715
+ <div class="practice-card dont">
716
+ <h3>
717
+ <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
718
+ Avoid This
719
+ </h3>
720
+ <ul>
721
+ <li><strong>Don't repeat yourself</strong> — if you submitted a request, it's on the board. No need to follow up unless it's been too long.</li>
722
+ <li><strong>Don't mix channels unnecessarily</strong> — use the app for requests, iMessage for message management</li>
723
+ <li><strong>Don't assume AIVA knows everything</strong> — she wakes up fresh each session. Important context should be stated clearly.</li>
724
+ </ul>
725
+ </div>
726
+ </div>
727
+ </section>
728
+
729
+ <!-- ── FAQ ── -->
730
+ <section class="section fade-section">
731
+ <div class="section-label">FAQ</div>
732
+ <h2 class="section-title">Frequently Asked Questions</h2>
733
+ <p class="section-desc">Quick answers to the most common questions about AIVA.</p>
734
+
735
+ <div class="faq-list">
736
+ <div class="faq-item">
737
+ <button class="faq-question" onclick="this.parentElement.classList.toggle('open')">
738
+ Does AIVA remember our conversations?
739
+ <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>
740
+ </button>
741
+ <div class="faq-answer">
742
+ <p>AIVA maintains memory through daily notes and long-term memory files. Important decisions, preferences, and context are saved between sessions. However, she starts each session fresh and reads her notes — so the more important something is, the more clearly you should state it.</p>
743
+ </div>
744
+ </div>
745
+
746
+ <div class="faq-item">
747
+ <button class="faq-question" onclick="this.parentElement.classList.toggle('open')">
748
+ Can AIVA text people on my behalf?
749
+ <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>
750
+ </button>
751
+ <div class="faq-answer">
752
+ <p>Yes! The outreach agent can handle iMessage conversations. You set preferences for each contact (respond, ignore, take message only), and AIVA follows them. She'll always check with you before contacting someone new.</p>
753
+ </div>
754
+ </div>
755
+
756
+ <div class="faq-item">
757
+ <button class="faq-question" onclick="this.parentElement.classList.toggle('open')">
758
+ How do I know what AIVA is working on?
759
+ <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>
760
+ </button>
761
+ <div class="faq-answer">
762
+ <p>Check the task board in the app. Every request becomes a task with status tracking (To Do, In Progress, Done).</p>
763
+ </div>
764
+ </div>
765
+
766
+ <div class="faq-item">
767
+ <button class="faq-question" onclick="this.parentElement.classList.toggle('open')">
768
+ What if AIVA makes a mistake?
769
+ <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>
770
+ </button>
771
+ <div class="faq-answer">
772
+ <p>Tell her! Feedback helps AIVA improve. She logs lessons learned and adjusts her approach going forward.</p>
773
+ </div>
774
+ </div>
775
+
776
+ <div class="faq-item">
777
+ <button class="faq-question" onclick="this.parentElement.classList.toggle('open')">
778
+ Is my information private?
779
+ <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>
780
+ </button>
781
+ <div class="faq-answer">
782
+ <p>Yes. AIVA treats your data with strict privacy. She won't share personal information in group settings or with other contacts without your explicit permission.</p>
783
+ </div>
784
+ </div>
785
+ </div>
786
+ </section>
787
+
788
+ <!-- ── Footer ── -->
789
+ <footer class="page-footer">
790
+ <p>Check the <a href="/updates">Updates page</a> for the latest changes and improvements to your AIVA assistant.</p>
791
+ </footer>
792
+
793
+ </div>
794
+
795
+ <script>
796
+ // Scroll-linked fade-in
797
+ const observer = new IntersectionObserver((entries) => {
798
+ entries.forEach(entry => {
799
+ if (entry.isIntersecting) {
800
+ entry.target.classList.add('visible');
801
+ }
802
+ });
803
+ }, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
804
+
805
+ document.querySelectorAll('.fade-section').forEach(el => observer.observe(el));
806
+ </script>
807
+
808
+ </body>
809
+ </html>