fraim 2.0.166 → 2.0.168

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 (60) hide show
  1. package/dist/src/ai-hub/catalog.js +43 -36
  2. package/dist/src/ai-hub/server.js +28 -5
  3. package/dist/src/cli/commands/init-project.js +1 -98
  4. package/dist/src/cli/commands/manager.js +40 -0
  5. package/dist/src/cli/commands/sync.js +17 -21
  6. package/dist/src/cli/fraim.js +2 -0
  7. package/dist/src/cli/utils/github-workflow-sync.js +12 -146
  8. package/dist/src/cli/utils/manager-pack-sync.js +188 -0
  9. package/dist/src/cli/utils/manager-publish.js +76 -0
  10. package/dist/src/cli/utils/user-config.js +20 -0
  11. package/dist/src/core/config-loader.js +9 -5
  12. package/dist/src/core/fraim-config-schema.generated.js +85 -31
  13. package/dist/src/core/manager-pack.js +26 -0
  14. package/dist/src/core/utils/local-registry-resolver.js +8 -1
  15. package/dist/src/first-run/install-state.js +1 -0
  16. package/dist/src/first-run/server.js +9 -0
  17. package/dist/src/first-run/session-service.js +117 -23
  18. package/dist/src/first-run/types.js +2 -5
  19. package/dist/src/local-mcp-server/learning-context-builder.js +45 -8
  20. package/dist/src/local-mcp-server/stdio-server.js +28 -0
  21. package/index.js +1 -1
  22. package/package.json +4 -1
  23. package/public/ai-hub/powerpoint-taskpane/index.html +236 -236
  24. package/public/ai-hub/powerpoint-taskpane/manifest.xml +29 -29
  25. package/public/ai-hub/review.css +13 -0
  26. package/public/ai-hub/script.js +199 -5
  27. package/public/ai-hub/styles.css +28 -0
  28. package/public/first-run/index.html +1 -1
  29. package/public/first-run/script.js +459 -530
  30. package/public/first-run/styles.css +288 -73
  31. package/public/portfolio/ashley.html +523 -0
  32. package/public/portfolio/auditya.html +83 -0
  33. package/public/portfolio/banke.html +83 -0
  34. package/public/portfolio/beza.html +659 -0
  35. package/public/portfolio/careena.html +632 -0
  36. package/public/portfolio/casey.html +568 -0
  37. package/public/portfolio/celia.html +490 -0
  38. package/public/portfolio/deidre.html +642 -0
  39. package/public/portfolio/gautam.html +597 -0
  40. package/public/portfolio/hari.html +469 -0
  41. package/public/portfolio/huxley.html +1354 -0
  42. package/public/portfolio/index.html +741 -0
  43. package/public/portfolio/maestro.html +518 -0
  44. package/public/portfolio/mandy.html +590 -0
  45. package/public/portfolio/mona.html +597 -0
  46. package/public/portfolio/pam.html +887 -0
  47. package/public/portfolio/procella.html +107 -0
  48. package/public/portfolio/qasm.html +569 -0
  49. package/public/portfolio/ricardo.html +489 -0
  50. package/public/portfolio/sade.html +560 -0
  51. package/public/portfolio/sam.html +654 -0
  52. package/public/portfolio/sechar.html +580 -0
  53. package/public/portfolio/sreya.html +599 -0
  54. package/public/portfolio/swen.html +601 -0
  55. package/dist/src/ai-hub/word-sideload.js +0 -95
  56. package/dist/src/cli/commands/test-mcp.js +0 -171
  57. package/dist/src/cli/setup/first-run.js +0 -242
  58. package/dist/src/core/config-writer.js +0 -75
  59. package/dist/src/core/utils/job-aliases.js +0 -47
  60. package/dist/src/core/utils/workflow-parser.js +0 -174
package/public/portfolio/mona.html ADDED
@@ -0,0 +1,597 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" data-theme="light">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MONa · AI Finance Manager · FRAIM Portfolio</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root {
12
+ --accent: #059669;
13
+ --accent-2: #047857;
14
+ --accent-light: #d1fae5;
15
+ --text: #052e16;
16
+ --text-2: #14532d;
17
+ --muted: #166534;
18
+ --bg: #f0fdf4;
19
+ --surface: #ffffff;
20
+ --surface-2: #ecfdf5;
21
+ --border: #a7f3d0;
22
+ --shadow: 0 4px 24px rgba(5,150,105,.08);
23
+ --shadow-lg: 0 12px 40px rgba(5,150,105,.15);
24
+ --radius: 18px;
25
+ --radius-sm: 10px;
26
+ --green: #10b981;
27
+ --purple: #8b5cf6;
28
+ --amber: #f59e0b;
29
+ --red: #ef4444;
30
+ --code-bg: #022c22;
31
+ --code-border: #065f46;
32
+ }
33
+ [data-theme="dark"] {
34
+ --text: #a7f3d0; --text-2: #6ee7b7; --muted: #6db891;
35
+ --bg: #022c22; --surface: #064e3b; --surface-2: #065f46;
36
+ --border: #047857; --shadow: 0 4px 24px rgba(0,0,0,.35);
37
+ --shadow-lg: 0 12px 40px rgba(0,0,0,.5); --accent-light: #047857;
38
+ --code-bg: #011a14; --code-border: #065f46;
39
+ }
40
+ * { box-sizing: border-box; margin: 0; padding: 0; }
41
+ body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; transition: background .3s, color .3s; }
42
+ code, pre, .mono { font-family: 'JetBrains Mono', 'Fira Code', monospace; }
43
+
44
+ .site-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 14px 32px; background: var(--surface); border-bottom: 1px solid var(--border); }
45
+ .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
46
+ .brand-logo { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, #10b981, #059669); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: #fff; }
47
+ .brand-name { font-weight: 700; font-size: 15px; color: var(--text); }
48
+ .header-actions { display: flex; align-items: center; gap: 12px; }
49
+ .theme-btn { background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); cursor: pointer; border-radius: 8px; padding: 7px 10px; font-size: 16px; }
50
+
51
+ .hero { max-width: 900px; margin: 56px auto 0; padding: 0 24px; text-align: center; }
52
+ .avatar-ring { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(135deg, #10b981, #059669, #047857); margin-bottom: 24px; box-shadow: 0 0 0 6px var(--accent-light); overflow: hidden; }
53
+ .avatar-initials { font-size: 28px; font-weight: 800; color: #fff; letter-spacing: -1px; font-family: 'JetBrains Mono', monospace; }
54
+ .role-chip { display: inline-block; background: var(--accent-light); color: #059669; border-radius: 999px; padding: 4px 14px; font-size: 12px; font-weight: 600; letter-spacing: .04em; margin-bottom: 16px; }
55
+ .hero h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 800; color: var(--text); letter-spacing: -1.5px; line-height: 1.1; margin-bottom: 16px; }
56
+ .hero h1 span { color: var(--accent); }
57
+ .hero p { font-size: 17px; color: var(--muted); max-width: 560px; margin: 0 auto 32px; line-height: 1.7; }
58
+
59
+ .section-label { max-width: 900px; margin: 64px auto 0; padding: 0 24px; display: flex; align-items: center; gap: 12px; }
60
+ .section-label h2 { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
61
+ .section-divider { flex: 1; height: 1px; background: var(--border); }
62
+
63
+ .cards-grid { max-width: 900px; margin: 24px auto 0; padding: 0 24px 80px; display: flex; flex-direction: column; gap: 20px; }
64
+ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: box-shadow .2s; }
65
+ .card:hover { box-shadow: var(--shadow-lg); }
66
+ .card-header { display: flex; align-items: flex-start; gap: 16px; padding: 24px; cursor: pointer; user-select: none; }
67
+ .card-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
68
+ .card-meta { flex: 1; min-width: 0; }
69
+ .card-tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
70
+ .card-title { font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.25; margin-bottom: 6px; }
71
+ .card-subtitle { font-size: 13px; color: var(--muted); }
72
+ .card-toggle { font-size: 22px; color: var(--muted); transition: transform .3s; flex-shrink: 0; align-self: center; }
73
+ .card.open .card-toggle { transform: rotate(90deg); }
74
+ .card-body { display: none; border-top: 1px solid var(--border); padding: 28px; }
75
+ .card.open .card-body { display: block; }
76
+
77
+ .narrative { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 28px; }
78
+ @media (max-width: 640px) { .narrative { grid-template-columns: 1fr; } }
79
+ .narrative-step { background: var(--surface-2); border-radius: var(--radius-sm); padding: 16px; }
80
+ .step-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
81
+ .step-text { font-size: 13px; color: var(--text-2); line-height: 1.6; }
82
+ .artifact-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
83
+ .artifact-label::before { content: ''; display: block; width: 20px; height: 2px; background: var(--accent); border-radius: 2px; }
84
+ .source-ref { margin-top: 16px; font-size: 12px; color: var(--muted); }
85
+ .source-ref a { color: var(--accent); text-decoration: none; }
86
+ .source-ref a:hover { text-decoration: underline; }
87
+
88
+ /* ══ ARTIFACT 1 — Three-Statement Model Summary ══ */
89
+ .model-dashboard {
90
+ background: var(--surface-2);
91
+ border: 1px solid var(--border);
92
+ border-radius: 14px;
93
+ overflow: hidden;
94
+ }
95
+ .model-header {
96
+ background: var(--accent);
97
+ padding: 12px 18px;
98
+ display: flex;
99
+ align-items: center;
100
+ justify-content: space-between;
101
+ flex-wrap: wrap;
102
+ gap: 8px;
103
+ }
104
+ .model-header-title { font-size: 14px; font-weight: 700; color: #fff; }
105
+ .model-kpis { display: flex; gap: 20px; }
106
+ .model-kpi { text-align: center; }
107
+ .model-kpi-val { font-size: 16px; font-weight: 800; color: #fff; }
108
+ .model-kpi-label { font-size: 10px; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .05em; }
109
+ .model-table-header {
110
+ display: grid;
111
+ grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
112
+ padding: 8px 18px;
113
+ background: var(--surface);
114
+ border-bottom: 1px solid var(--border);
115
+ }
116
+ .model-table-header span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
117
+ .model-row {
118
+ display: grid;
119
+ grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
120
+ padding: 10px 18px;
121
+ border-bottom: 1px solid var(--border);
122
+ align-items: center;
123
+ }
124
+ .model-row:last-child { border-bottom: none; }
125
+ .model-row span { font-size: 12px; color: var(--text-2); }
126
+ .model-row .row-label { font-weight: 700; color: var(--text); }
127
+ .model-row .row-highlight { font-weight: 700; color: var(--accent); }
128
+ .model-row .row-warn { font-weight: 700; color: #ef4444; }
129
+ .model-summary {
130
+ padding: 12px 18px;
131
+ background: var(--surface);
132
+ border-top: 1px solid var(--border);
133
+ font-size: 12px;
134
+ color: var(--muted);
135
+ display: flex;
136
+ gap: 16px;
137
+ flex-wrap: wrap;
138
+ }
139
+ .model-summary strong { color: var(--accent); }
140
+ @media (max-width: 600px) {
141
+ .model-table-header { grid-template-columns: 2fr 1fr 1fr; }
142
+ .model-table-header span:nth-child(n+4) { display: none; }
143
+ .model-row { grid-template-columns: 2fr 1fr 1fr; }
144
+ .model-row span:nth-child(n+4) { display: none; }
145
+ }
146
+
147
+ /* ══ ARTIFACT 2 — FP&A Forecast Dashboard ══ */
148
+ .forecast-dashboard {
149
+ background: var(--surface-2);
150
+ border: 1px solid var(--border);
151
+ border-radius: 14px;
152
+ overflow: hidden;
153
+ }
154
+ .forecast-header {
155
+ background: var(--accent);
156
+ padding: 12px 18px;
157
+ display: flex;
158
+ align-items: center;
159
+ justify-content: space-between;
160
+ }
161
+ .forecast-header-title { font-size: 14px; font-weight: 700; color: #fff; }
162
+ .forecast-header-sub { font-size: 12px; color: rgba(255,255,255,.7); }
163
+ .forecast-scenarios { display: flex; gap: 0; border-bottom: 1px solid var(--border); }
164
+ .forecast-scenario {
165
+ flex: 1;
166
+ padding: 14px 12px;
167
+ border-right: 1px solid var(--border);
168
+ text-align: center;
169
+ }
170
+ .forecast-scenario:last-child { border-right: none; }
171
+ .scenario-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 4px; }
172
+ .scenario-arr { font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 2px; }
173
+ .scenario-growth { font-size: 11px; }
174
+ .forecast-drivers { padding: 12px 18px; border-bottom: 1px solid var(--border); }
175
+ .forecast-drivers-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
176
+ .driver-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
177
+ .driver-name { font-size: 12px; font-weight: 600; color: var(--text); width: 120px; flex-shrink: 0; }
178
+ .driver-bar-track { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
179
+ .driver-bar-fill { height: 100%; border-radius: 3px; background: var(--accent); }
180
+ .driver-val { font-size: 12px; color: var(--muted); width: 60px; text-align: right; flex-shrink: 0; }
181
+ .forecast-summary {
182
+ padding: 12px 18px;
183
+ background: var(--surface);
184
+ border-top: 1px solid var(--border);
185
+ font-size: 12px;
186
+ color: var(--muted);
187
+ }
188
+ .forecast-summary strong { color: var(--accent); }
189
+ @media (max-width: 600px) {
190
+ .forecast-scenarios { flex-wrap: wrap; }
191
+ .forecast-scenario { min-width: 50%; }
192
+ }
193
+
194
+ /* ══ ARTIFACT 3 — Monthly Close Variance Report ══ */
195
+ .close-report {
196
+ background: var(--surface-2);
197
+ border: 1px solid var(--border);
198
+ border-radius: 14px;
199
+ overflow: hidden;
200
+ }
201
+ .close-report-header {
202
+ background: var(--accent);
203
+ padding: 12px 18px;
204
+ display: flex;
205
+ align-items: center;
206
+ justify-content: space-between;
207
+ flex-wrap: wrap;
208
+ gap: 8px;
209
+ }
210
+ .close-report-title { font-size: 14px; font-weight: 700; color: #fff; }
211
+ .close-kpis { display: flex; gap: 20px; }
212
+ .close-kpi { text-align: center; }
213
+ .close-kpi-val { font-size: 16px; font-weight: 800; color: #fff; }
214
+ .close-kpi-label { font-size: 10px; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .05em; }
215
+ .close-table-header {
216
+ display: grid;
217
+ grid-template-columns: 1.6fr 1fr 1fr 1fr 1.4fr;
218
+ padding: 8px 18px;
219
+ background: var(--surface);
220
+ border-bottom: 1px solid var(--border);
221
+ }
222
+ .close-table-header span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
223
+ .close-row {
224
+ display: grid;
225
+ grid-template-columns: 1.6fr 1fr 1fr 1fr 1.4fr;
226
+ padding: 10px 18px;
227
+ border-bottom: 1px solid var(--border);
228
+ align-items: center;
229
+ }
230
+ .close-row:last-child { border-bottom: none; }
231
+ .close-row span { font-size: 12px; color: var(--text-2); }
232
+ .close-row .row-label { font-weight: 700; color: var(--text); }
233
+ .variance-fav { color: #10b981; font-weight: 700; }
234
+ .variance-unfav { color: #ef4444; font-weight: 700; }
235
+ .close-insight {
236
+ padding: 12px 18px;
237
+ background: var(--surface);
238
+ border-top: 1px solid var(--border);
239
+ font-size: 12px;
240
+ color: var(--muted);
241
+ line-height: 1.6;
242
+ }
243
+ .close-insight strong { color: var(--text); }
244
+ @media (max-width: 600px) {
245
+ .close-table-header { grid-template-columns: 1.6fr 1fr 1fr; }
246
+ .close-table-header span:nth-child(n+4) { display: none; }
247
+ .close-row { grid-template-columns: 1.6fr 1fr 1fr; }
248
+ .close-row span:nth-child(n+4) { display: none; }
249
+ }
250
+
251
+ /* Footer */
252
+ .portfolio-footer { background: var(--surface); border-top: 1px solid var(--border); padding: 40px 24px; text-align: center; }
253
+ .footer-sub { margin-top: 20px; font-size: 12px; color: var(--muted); }
254
+ .footer-sub a { color: var(--accent); text-decoration: none; }
255
+
256
+ @media (max-width: 640px) {
257
+ .site-header { padding: 12px 16px; }
258
+ .hero { margin-top: 36px; }
259
+ .cards-grid { padding: 0 16px 60px; }
260
+ .card-header { padding: 18px; }
261
+ .card-body { padding: 18px; }
262
+ .section-label { margin-top: 40px; padding: 0 16px; }
263
+ }
264
+ </style>
265
+ </head>
266
+ <body>
267
+
268
+ <header class="site-header">
269
+ <a class="brand" href="/">
270
+ <div class="brand-logo">F</div>
271
+ <span class="brand-name">FRAIM</span>
272
+ </a>
273
+ <div class="header-actions">
274
+ <button class="theme-btn" onclick="toggleTheme()" title="Toggle dark mode">☾</button>
275
+ </div>
276
+ </header>
277
+
278
+ <section class="hero">
279
+ <div class="avatar-ring">
280
+ <img src="https://api.dicebear.com/9.x/notionists/svg?seed=MONA-finance-manager&backgroundColor=d1fae5&radius=50" width="96" height="96" alt="MONa finance manager avatar" style="border-radius:50%;">
281
+ </div>
282
+ <div class="role-chip">AI Finance Manager</div>
283
+ <h1>Financial clarity. Fast.<br>Models that <span>drive decisions</span>.</h1>
284
+ <p>MONa builds three-statement models without a consultant, runs FP&amp;A forecasts with driver-based scenarios, and delivers monthly close commentary that helps your board understand what actually happened and why.</p>
285
+ </section>
286
+
287
+ <div class="section-label">
288
+ <h2>Selected Work</h2>
289
+ <div class="section-divider"></div>
290
+ </div>
291
+
292
+ <div class="cards-grid">
293
+
294
+ <!-- Card 1: Financial Analysis -->
295
+ <div class="card open" id="card1">
296
+ <div class="card-header" onclick="toggleCard(1)">
297
+ <div class="card-icon" style="background:#d1fae5;">📊</div>
298
+ <div class="card-meta">
299
+ <div class="card-tag" style="color:#059669;">Financial Modeling</div>
300
+ <div class="card-title">Three-statement model built in a day. Burn inflection visible 2 quarters out.</div>
301
+ <div class="card-subtitle">FRAIM · financial-analysis · registry/jobs/ai-employee/finance/</div>
302
+ </div>
303
+ <div class="card-toggle">›</div>
304
+ </div>
305
+ <div class="card-body">
306
+ <div class="narrative">
307
+ <div class="narrative-step">
308
+ <div class="step-label">Problem</div>
309
+ <div class="step-text">A Series A SaaS startup had a CFO from a previous life running financials in a giant spreadsheet — no income statement, balance sheet, and cash flow model that were actually linked. Board prep meant manual reconciliation every quarter. One cell error distorted the entire forecast.</div>
310
+ </div>
311
+ <div class="narrative-step">
312
+ <div class="step-label">What MONa Can Build</div>
313
+ <div class="step-text">MONa built a linked three-statement model from scratch: P&amp;L with ARR drivers, balance sheet with working capital tracking, and cash flow statement that reconciled automatically. Added ratio analysis (gross margin, burn multiple, CAC payback) and a summary dashboard for non-financial stakeholders.</div>
314
+ </div>
315
+ <div class="narrative-step">
316
+ <div class="step-label">Possible Outcome</div>
317
+ <div class="step-text">With a properly linked model, burn inflection points become visible quarters in advance — not weeks before they happen. A startup running MONa's model typically sees 80% faster board prep and catches covenant triggers before investor conversations become reactive instead of strategic.</div>
318
+ </div>
319
+ </div>
320
+
321
+ <div class="artifact-label">Live Artifact — Three-Statement Model Summary</div>
322
+
323
+ <div class="model-dashboard">
324
+ <div class="model-header">
325
+ <span class="model-header-title">Three-Statement Model · Q2 2026 Snapshot</span>
326
+ <div class="model-kpis">
327
+ <div class="model-kpi">
328
+ <div class="model-kpi-val">18 mo</div>
329
+ <div class="model-kpi-label">Runway</div>
330
+ </div>
331
+ <div class="model-kpi">
332
+ <div class="model-kpi-val">-1.4×</div>
333
+ <div class="model-kpi-label">Burn Multiple</div>
334
+ </div>
335
+ </div>
336
+ </div>
337
+ <div class="model-table-header">
338
+ <span>Metric</span>
339
+ <span>Q1 Actual</span>
340
+ <span>Q2 Actual</span>
341
+ <span>Q3 Fcst</span>
342
+ <span>Q4 Fcst</span>
343
+ </div>
344
+ <div class="model-row">
345
+ <span class="row-label">ARR</span>
346
+ <span>$1.8M</span>
347
+ <span>$2.3M</span>
348
+ <span class="row-highlight">$3.1M</span>
349
+ <span class="row-highlight">$4.0M</span>
350
+ </div>
351
+ <div class="model-row">
352
+ <span class="row-label">Gross Margin</span>
353
+ <span>68%</span>
354
+ <span>71%</span>
355
+ <span>73%</span>
356
+ <span>75%</span>
357
+ </div>
358
+ <div class="model-row">
359
+ <span class="row-label">Net Burn / mo</span>
360
+ <span class="row-warn">-$190K</span>
361
+ <span class="row-warn">-$175K</span>
362
+ <span>-$140K</span>
363
+ <span class="row-highlight">-$80K</span>
364
+ </div>
365
+ <div class="model-row">
366
+ <span class="row-label">Cash Balance</span>
367
+ <span>$3.4M</span>
368
+ <span>$3.2M</span>
369
+ <span>$3.1M</span>
370
+ <span class="row-highlight">$3.3M</span>
371
+ </div>
372
+ <div class="model-summary">
373
+ <span><strong>Burn inflection</strong> Q4 2026 — confirmed by all 3 statements</span>
374
+ <span>·</span>
375
+ <span>CAC payback <strong>14 months</strong></span>
376
+ <span>·</span>
377
+ <span>Board-ready export included</span>
378
+ </div>
379
+ </div>
380
+
381
+ <div class="source-ref">
382
+ 📎 Source: <a href="#">FRAIM · financial-analysis · registry/jobs/ai-employee/finance/financial-analysis.md</a>
383
+ </div>
384
+ </div>
385
+ </div>
386
+
387
+ <!-- Card 2: FP&A and Forecasting -->
388
+ <div class="card" id="card2">
389
+ <div class="card-header" onclick="toggleCard(2)">
390
+ <div class="card-icon" style="background:#ecfdf5;">🔮</div>
391
+ <div class="card-meta">
392
+ <div class="card-tag" style="color:#059669;">FP&amp;A</div>
393
+ <div class="card-title">Driver-based forecast with 3 scenarios. AOP locked before board deadline.</div>
394
+ <div class="card-subtitle">FRAIM · fpa-and-forecasting · registry/jobs/ai-employee/finance/</div>
395
+ </div>
396
+ <div class="card-toggle">›</div>
397
+ </div>
398
+ <div class="card-body">
399
+ <div class="narrative">
400
+ <div class="narrative-step">
401
+ <div class="step-label">Problem</div>
402
+ <div class="step-text">A growth-stage company's annual operating plan was a bottoms-up budget built from headcount spreadsheets with no scenario modeling. When macro conditions shifted mid-year, the company had no framework for recalibrating — just a stale spreadsheet and a lot of explaining to do.</div>
403
+ </div>
404
+ <div class="narrative-step">
405
+ <div class="step-label">What MONa Can Build</div>
406
+ <div class="step-text">MONa built a driver-based forecast: identified the 6 key revenue drivers (new logo ACV, net revenue retention, CAC, payback, headcount-to-revenue ratio, support-to-engineering ratio), linked them to the P&amp;L, and built base / bull / bear scenarios. Delivered a living AOP that updates when any driver changes.</div>
407
+ </div>
408
+ <div class="narrative-step">
409
+ <div class="step-label">Possible Outcome</div>
410
+ <div class="step-text">A driver-based AOP changes board conversations: instead of defending a spreadsheet, the CFO presents the assumptions and explains which driver changed and why. Companies running MONa's FP&amp;A model typically close their AOP process 3 weeks faster and arrive at investor updates with a coherent narrative, not a reconciliation exercise.</div>
411
+ </div>
412
+ </div>
413
+
414
+ <div class="artifact-label">Live Artifact — FP&amp;A Scenario Dashboard</div>
415
+
416
+ <div class="forecast-dashboard">
417
+ <div class="forecast-header">
418
+ <span class="forecast-header-title">FY 2027 Forecast · 3 Scenarios</span>
419
+ <span class="forecast-header-sub">6 key drivers modeled</span>
420
+ </div>
421
+ <div class="forecast-scenarios">
422
+ <div class="forecast-scenario">
423
+ <div class="scenario-label">Bear</div>
424
+ <div class="scenario-arr">$5.8M</div>
425
+ <div class="scenario-growth" style="color:#ef4444;">+45% ARR</div>
426
+ </div>
427
+ <div class="forecast-scenario">
428
+ <div class="scenario-label">Base</div>
429
+ <div class="scenario-arr">$7.2M</div>
430
+ <div class="scenario-growth" style="color:#f59e0b;">+80% ARR</div>
431
+ </div>
432
+ <div class="forecast-scenario">
433
+ <div class="scenario-label">Bull</div>
434
+ <div class="scenario-arr">$9.1M</div>
435
+ <div class="scenario-growth" style="color:#10b981;">+128% ARR</div>
436
+ </div>
437
+ </div>
438
+ <div class="forecast-drivers">
439
+ <div class="forecast-drivers-label">Key Revenue Drivers — Base Scenario</div>
440
+ <div class="driver-row">
441
+ <span class="driver-name">New Logo ACV</span>
442
+ <div class="driver-bar-track"><div class="driver-bar-fill" style="width:78%;"></div></div>
443
+ <span class="driver-val">$48K avg</span>
444
+ </div>
445
+ <div class="driver-row">
446
+ <span class="driver-name">Net Rev Retention</span>
447
+ <div class="driver-bar-track"><div class="driver-bar-fill" style="width:112%; max-width:100%;"></div></div>
448
+ <span class="driver-val">112% NRR</span>
449
+ </div>
450
+ <div class="driver-row">
451
+ <span class="driver-name">CAC Payback</span>
452
+ <div class="driver-bar-track"><div class="driver-bar-fill" style="width:60%;"></div></div>
453
+ <span class="driver-val">14 mo</span>
454
+ </div>
455
+ <div class="driver-row">
456
+ <span class="driver-name">Gross Margin</span>
457
+ <div class="driver-bar-track"><div class="driver-bar-fill" style="width:76%;"></div></div>
458
+ <span class="driver-val">76%</span>
459
+ </div>
460
+ </div>
461
+ <div class="forecast-summary">
462
+ <strong>Base scenario</strong> reached if NRR holds above 108% and new logo velocity ≥ 3.2 logos/month · Board-ready deck export included
463
+ </div>
464
+ </div>
465
+
466
+ <div class="source-ref">
467
+ 📎 Source: <a href="#">FRAIM · fpa-and-forecasting · registry/jobs/ai-employee/finance/fpa-and-forecasting.md</a>
468
+ </div>
469
+ </div>
470
+ </div>
471
+
472
+ <!-- Card 3: Monthly Close Review -->
473
+ <div class="card" id="card3">
474
+ <div class="card-header" onclick="toggleCard(3)">
475
+ <div class="card-icon" style="background:#fef9c3;">📋</div>
476
+ <div class="card-meta">
477
+ <div class="card-tag" style="color:#b45309;">Monthly Close</div>
478
+ <div class="card-title">Close commentary written in 2 hours. CFO walked into the board call prepared.</div>
479
+ <div class="card-subtitle">FRAIM · monthly-close-review · registry/jobs/ai-employee/finance/</div>
480
+ </div>
481
+ <div class="card-toggle">›</div>
482
+ </div>
483
+ <div class="card-body">
484
+ <div class="narrative">
485
+ <div class="narrative-step">
486
+ <div class="step-label">Problem</div>
487
+ <div class="step-text">A startup's CFO was spending 4–6 hours per month on close commentary — pulling actuals from QuickBooks, comparing to budget in a spreadsheet, writing a narrative from scratch, and reformatting for the board deck. The numbers were accurate; the narrative was always rushed and inconsistent month-to-month.</div>
488
+ </div>
489
+ <div class="narrative-step">
490
+ <div class="step-label">What MONa Can Build</div>
491
+ <div class="step-text">MONa ran the monthly close cycle: collected actuals from the accounting system, computed actuals vs. budget variances by P&amp;L line, scored each variance as favorable/unfavorable/material, wrote management commentary explaining the top 5 variances, and formatted the package for board distribution. Delivered 2 hours after month-end close.</div>
492
+ </div>
493
+ <div class="narrative-step">
494
+ <div class="step-label">Possible Outcome</div>
495
+ <div class="step-text">A consistent close process changes how the board experiences financial reporting — instead of narrative that looks rushed, they receive the same format every month with clear variance explanations. CFOs running MONa's close process often reclaim 4+ hours per close and improve board confidence in financial controls, which matters when raising Series B.</div>
496
+ </div>
497
+ </div>
498
+
499
+ <div class="artifact-label">Live Artifact — Monthly Close Variance Report · April 2026</div>
500
+
501
+ <div class="close-report">
502
+ <div class="close-report-header">
503
+ <span class="close-report-title">April 2026 Close · Actuals vs Budget</span>
504
+ <div class="close-kpis">
505
+ <div class="close-kpi">
506
+ <div class="close-kpi-val">+$38K</div>
507
+ <div class="close-kpi-label">Rev Fav</div>
508
+ </div>
509
+ <div class="close-kpi">
510
+ <div class="close-kpi-val">-$12K</div>
511
+ <div class="close-kpi-label">OPEX Unfav</div>
512
+ </div>
513
+ </div>
514
+ </div>
515
+ <div class="close-table-header">
516
+ <span>P&amp;L Line</span>
517
+ <span>Budget</span>
518
+ <span>Actual</span>
519
+ <span>Variance</span>
520
+ <span>Commentary</span>
521
+ </div>
522
+ <div class="close-row">
523
+ <span class="row-label">Revenue</span>
524
+ <span>$192K</span>
525
+ <span>$230K</span>
526
+ <span class="variance-fav">+$38K ✓</span>
527
+ <span>2 enterprise deals closed early</span>
528
+ </div>
529
+ <div class="close-row">
530
+ <span class="row-label">COGS</span>
531
+ <span>$61K</span>
532
+ <span>$63K</span>
533
+ <span class="variance-unfav">-$2K ✗</span>
534
+ <span>Cloud infra overage in EU region</span>
535
+ </div>
536
+ <div class="close-row">
537
+ <span class="row-label">Gross Profit</span>
538
+ <span>$131K</span>
539
+ <span>$167K</span>
540
+ <span class="variance-fav">+$36K ✓</span>
541
+ <span>Margin 72.6% vs 68.2% budget</span>
542
+ </div>
543
+ <div class="close-row">
544
+ <span class="row-label">S&amp;M</span>
545
+ <span>$88K</span>
546
+ <span>$101K</span>
547
+ <span class="variance-unfav">-$13K ✗</span>
548
+ <span>Conference sponsorship pulled forward</span>
549
+ </div>
550
+ <div class="close-row">
551
+ <span class="row-label">R&amp;D</span>
552
+ <span>$72K</span>
553
+ <span>$71K</span>
554
+ <span class="variance-fav">+$1K ✓</span>
555
+ <span>On plan</span>
556
+ </div>
557
+ <div class="close-insight">
558
+ <strong>Key insight:</strong> April revenue beat driven by 2 enterprise deals closing ahead of forecast — not structural acceleration. S&amp;M overage is timing (conference fees), not headcount. Net operating loss of $5K vs $29K budget. Cash position extends runway by approximately 3 weeks vs prior forecast.
559
+ </div>
560
+ </div>
561
+
562
+ <div class="source-ref">
563
+ 📎 Source: <a href="#">FRAIM · monthly-close-review · registry/jobs/ai-employee/finance/monthly-close-review.md</a>
564
+ </div>
565
+ </div>
566
+ </div>
567
+
568
+ </div>
569
+
570
+ <footer class="portfolio-footer">
571
+ <div class="footer-sub">
572
+ Part of the <a href="/">FRAIM</a> · 20 AI employees available ·
573
+ <a href="/">Back to FRAIM</a>
574
+ </div>
575
+ </footer>
576
+
577
+ <script>
578
+ function toggleTheme() {
579
+ const html = document.documentElement;
580
+ const isDark = html.getAttribute('data-theme') === 'dark';
581
+ html.setAttribute('data-theme', isDark ? 'light' : 'dark');
582
+ document.querySelector('.theme-btn').textContent = isDark ? '☾' : '☀';
583
+ }
584
+ if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
585
+ document.documentElement.setAttribute('data-theme', 'dark');
586
+ document.querySelector('.theme-btn').textContent = '☀';
587
+ }
588
+ function toggleCard(num) {
589
+ const card = document.getElementById('card' + num);
590
+ const isOpen = card.classList.contains('open');
591
+ document.querySelectorAll('.card').forEach(c => c.classList.remove('open'));
592
+ if (!isOpen) { card.classList.add('open'); card.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); }
593
+ }
594
+ </script>
595
+
596
+ </body>
597
+ </html>