fraim 2.0.165 → 2.0.167

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 (55) hide show
  1. package/dist/src/ai-hub/catalog.js +20 -27
  2. package/dist/src/ai-hub/server.js +418 -2
  3. package/dist/src/ai-hub/word-sideload.js +95 -0
  4. package/dist/src/cli/commands/org.js +40 -0
  5. package/dist/src/cli/commands/test-mcp.js +171 -0
  6. package/dist/src/cli/fraim.js +2 -0
  7. package/dist/src/cli/setup/first-run.js +242 -0
  8. package/dist/src/cli/utils/org-publish.js +98 -0
  9. package/dist/src/config/ai-manager-hiring.js +121 -0
  10. package/dist/src/config/compat.js +16 -0
  11. package/dist/src/config/feature-flags.js +25 -0
  12. package/dist/src/config/persona-capability-bundles.js +273 -0
  13. package/dist/src/config/persona-hiring.js +270 -0
  14. package/dist/src/config/portfolio-slug-overrides.js +17 -0
  15. package/dist/src/config/pricing.js +37 -0
  16. package/dist/src/config/stripe.js +43 -0
  17. package/dist/src/core/config-loader.js +9 -5
  18. package/dist/src/core/config-writer.js +75 -0
  19. package/dist/src/core/fraim-config-schema.generated.js +0 -21
  20. package/dist/src/core/utils/job-aliases.js +47 -0
  21. package/dist/src/core/utils/local-registry-resolver.js +8 -1
  22. package/dist/src/core/utils/workflow-parser.js +174 -0
  23. package/index.js +1 -1
  24. package/package.json +5 -1
  25. package/public/ai-hub/index.html +81 -0
  26. package/public/ai-hub/powerpoint-taskpane/index.html +236 -236
  27. package/public/ai-hub/powerpoint-taskpane/manifest.xml +29 -29
  28. package/public/ai-hub/review.css +13 -0
  29. package/public/ai-hub/script.js +414 -4
  30. package/public/ai-hub/styles.css +56 -0
  31. package/public/first-run/styles.css +73 -73
  32. package/public/portfolio/ashley.html +523 -0
  33. package/public/portfolio/auditya.html +83 -0
  34. package/public/portfolio/banke.html +83 -0
  35. package/public/portfolio/beza.html +659 -0
  36. package/public/portfolio/careena.html +632 -0
  37. package/public/portfolio/casey.html +568 -0
  38. package/public/portfolio/celia.html +490 -0
  39. package/public/portfolio/deidre.html +642 -0
  40. package/public/portfolio/gautam.html +597 -0
  41. package/public/portfolio/hari.html +469 -0
  42. package/public/portfolio/huxley.html +1354 -0
  43. package/public/portfolio/index.html +741 -0
  44. package/public/portfolio/maestro.html +518 -0
  45. package/public/portfolio/mandy.html +590 -0
  46. package/public/portfolio/mona.html +597 -0
  47. package/public/portfolio/pam.html +887 -0
  48. package/public/portfolio/procella.html +107 -0
  49. package/public/portfolio/qasm.html +569 -0
  50. package/public/portfolio/ricardo.html +489 -0
  51. package/public/portfolio/sade.html +560 -0
  52. package/public/portfolio/sam.html +654 -0
  53. package/public/portfolio/sechar.html +580 -0
  54. package/public/portfolio/sreya.html +599 -0
  55. package/public/portfolio/swen.html +601 -0
package/public/portfolio/hari.html ADDED
@@ -0,0 +1,469 @@
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>HaRi · AI HR 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: #22c55e;
13
+ --accent-2: #16a34a;
14
+ --accent-light: #dcfce7;
15
+ --text: #0a1f10;
16
+ --text-2: #334155;
17
+ --muted: #64748b;
18
+ --bg: #f0fdf4;
19
+ --surface: #ffffff;
20
+ --surface-2: #f8fafc;
21
+ --border: #e2e8f0;
22
+ --shadow: 0 4px 24px rgba(10,31,16,.08);
23
+ --shadow-lg: 0 12px 40px rgba(10,31,16,.14);
24
+ --radius: 18px;
25
+ --radius-sm: 10px;
26
+ --green: #10b981;
27
+ --purple: #8b5cf6;
28
+ --amber: #f59e0b;
29
+ --red: #ef4444;
30
+ --code-bg: #0f172a;
31
+ --code-border: #1e293b;
32
+ }
33
+ [data-theme="dark"] {
34
+ --text: #e2e8f0; --text-2: #cbd5e1; --muted: #94a3b8;
35
+ --bg: #061209; --surface: #0d2412; --surface-2: #112b18;
36
+ --border: #1e3d26; --shadow: 0 4px 24px rgba(0,0,0,.35);
37
+ --shadow-lg: 0 12px 40px rgba(0,0,0,.5); --accent-light: #14532d;
38
+ --code-bg: #020c04; --code-border: #0d2412;
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, #22c55e, #14b8a6); 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: var(--accent-2); 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
+ .card-context { font-style: italic; color: var(--muted); font-size: 14px; line-height: 1.7; margin-bottom: 24px; padding: 14px 18px; background: var(--surface-2); border-radius: var(--radius-sm); border-left: 3px solid var(--accent); }
78
+
79
+ .narrative { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 28px; }
80
+ @media (max-width: 640px) { .narrative { grid-template-columns: 1fr; } }
81
+ .narrative-step { background: var(--surface-2); border-radius: var(--radius-sm); padding: 16px; }
82
+ .step-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
83
+ .step-text { font-size: 13px; color: var(--text-2); line-height: 1.6; }
84
+
85
+ .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; }
86
+ .artifact-label::before { content: ''; display: block; width: 20px; height: 2px; background: var(--accent); border-radius: 2px; }
87
+ .source-ref { margin-top: 16px; font-size: 12px; color: var(--muted); }
88
+ .source-ref a { color: var(--accent); text-decoration: none; }
89
+ .source-ref a:hover { text-decoration: underline; }
90
+
91
+ /* ── ARTIFACT 1: Onboarding Checklist Dashboard ── */
92
+ .onboarding-dashboard {
93
+ background: var(--surface-2);
94
+ border: 1px solid var(--border);
95
+ border-radius: 14px;
96
+ overflow: hidden;
97
+ }
98
+ .onboard-header { padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--surface); }
99
+ .onboard-header-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
100
+ .onboard-header-date { font-size: 12px; color: var(--muted); }
101
+ .onboard-progress { padding: 14px 18px; border-bottom: 1px solid var(--border); }
102
+ .progress-label { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; }
103
+ .progress-pct { color: var(--accent-2); font-weight: 800; }
104
+ .progress-track { height: 8px; background: var(--border); border-radius: 999px; overflow: hidden; }
105
+ .progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #22c55e, #16a34a); }
106
+ .onboard-group { padding: 14px 18px; border-bottom: 1px solid var(--border); }
107
+ .onboard-group:last-child { border-bottom: none; }
108
+ .onboard-group-title { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
109
+ .onboard-items { display: flex; flex-direction: column; gap: 6px; }
110
+ .onboard-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); }
111
+ .check-done { color: #22c55e; font-size: 15px; flex-shrink: 0; }
112
+ .check-pending { color: #f59e0b; font-size: 15px; flex-shrink: 0; }
113
+ .check-empty { color: var(--border); font-size: 15px; flex-shrink: 0; }
114
+ .onboard-item-text { flex: 1; }
115
+ .onboard-item-badge { font-size: 10px; font-weight: 700; border-radius: 999px; padding: 2px 8px; }
116
+ .badge-done { background: #d1fae5; color: #065f46; }
117
+ .badge-soon { background: #fef3c7; color: #92400e; }
118
+ [data-theme="dark"] .badge-done { background: #064e3b; color: #6ee7b7; }
119
+ [data-theme="dark"] .badge-soon { background: #451a03; color: #fcd34d; }
120
+
121
+ /* ── ARTIFACT 2: Performance Review Card ── */
122
+ .review-card {
123
+ background: var(--surface-2);
124
+ border: 1px solid var(--border);
125
+ border-radius: 14px;
126
+ overflow: hidden;
127
+ }
128
+ .review-card-header { padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--surface); display: flex; align-items: center; justify-content: space-between; }
129
+ .review-card-title { font-size: 14px; font-weight: 700; color: var(--text); }
130
+ .review-card-cycle { font-size: 11px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; font-weight: 600; }
131
+ .review-section { padding: 16px 18px; border-bottom: 1px solid var(--border); }
132
+ .review-section:last-child { border-bottom: none; }
133
+ .review-section-label { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
134
+ .theme-badges { display: flex; flex-wrap: wrap; gap: 8px; }
135
+ .theme-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; border-radius: 10px; padding: 8px 14px; }
136
+ .theme-up { background: #d1fae5; color: #065f46; }
137
+ .theme-warn { background: #fef3c7; color: #92400e; }
138
+ [data-theme="dark"] .theme-up { background: #064e3b; color: #6ee7b7; }
139
+ [data-theme="dark"] .theme-warn { background: #451a03; color: #fcd34d; }
140
+ .review-goal-text { font-size: 13px; color: var(--text-2); line-height: 1.7; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
141
+
142
+ /* ── ARTIFACT 3: Benefits Comparison Table ── */
143
+ .benefits-table-wrap {
144
+ background: var(--surface-2);
145
+ border: 1px solid var(--border);
146
+ border-radius: 14px;
147
+ overflow: hidden;
148
+ overflow-x: auto;
149
+ }
150
+ .benefits-table { width: 100%; border-collapse: collapse; min-width: 480px; }
151
+ .benefits-table th { font-size: 11px; font-weight: 800; padding: 12px 14px; text-align: center; border-bottom: 1px solid var(--border); background: var(--surface); }
152
+ .benefits-table th:first-child { text-align: left; }
153
+ .benefits-table td { font-size: 13px; color: var(--text-2); padding: 10px 14px; border-bottom: 1px solid var(--border); text-align: center; }
154
+ .benefits-table td:first-child { text-align: left; font-weight: 600; color: var(--text); }
155
+ .benefits-table tr:last-child td { border-bottom: none; font-weight: 800; }
156
+ .benefits-table tr:last-child td:first-child { color: var(--text); }
157
+ .col-recommended { background: #f0fdf4; }
158
+ [data-theme="dark"] .col-recommended { background: #0a1f10; }
159
+ .col-recommended td { color: var(--accent-2); }
160
+ .savings-badge { display: inline-block; background: #d1fae5; color: #065f46; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 3px 10px; margin-top: 4px; }
161
+ [data-theme="dark"] .savings-badge { background: #064e3b; color: #6ee7b7; }
162
+ .market-note { padding: 10px 14px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--border); }
163
+ .col-highlight-header { background: #dcfce7; color: #14532d; }
164
+ [data-theme="dark"] .col-highlight-header { background: #14532d; color: #bbf7d0; }
165
+
166
+ /* Footer */
167
+ .portfolio-footer { background: var(--surface); border-top: 1px solid var(--border); padding: 40px 24px; text-align: center; }
168
+ .footer-sub { margin-top: 20px; font-size: 12px; color: var(--muted); }
169
+ .footer-sub a { color: var(--accent); text-decoration: none; }
170
+
171
+ @media (max-width: 640px) {
172
+ .site-header { padding: 12px 16px; }
173
+ .hero { margin-top: 36px; }
174
+ .cards-grid { padding: 0 16px 60px; }
175
+ .card-header { padding: 18px; }
176
+ .card-body { padding: 18px; }
177
+ .section-label { margin-top: 40px; padding: 0 16px; }
178
+ .theme-badges { flex-direction: column; }
179
+ }
180
+ </style>
181
+ </head>
182
+ <body>
183
+
184
+ <header class="site-header">
185
+ <a class="brand" href="/">
186
+ <div class="brand-logo">F</div>
187
+ <span class="brand-name">FRAIM</span>
188
+ </a>
189
+ <div class="header-actions">
190
+ <button class="theme-btn" onclick="toggleTheme()" title="Toggle dark mode">☾</button>
191
+ </div>
192
+ </header>
193
+
194
+ <section class="hero">
195
+ <div class="avatar-ring">
196
+ <img src="https://api.dicebear.com/9.x/notionists/svg?seed=HARI-hr&backgroundColor=ccfbf1&radius=50" width="96" height="96" alt="HARI-hr avatar" style="border-radius:50%;">
197
+ </div>
198
+ <div class="role-chip">AI HR Manager</div>
199
+ <h1>Onboards fast. Reviews fairly.<br>Keeps the <span>team whole</span>.</h1>
200
+ <p>HaRi handles the full HR lifecycle: structured onboarding that actually sticks, performance reviews that develop people, and benefits analysis that saves real money.</p>
201
+ </section>
202
+
203
+ <div class="section-label">
204
+ <h2>Selected Work</h2>
205
+ <div class="section-divider"></div>
206
+ </div>
207
+
208
+ <div class="cards-grid">
209
+
210
+ <!-- Card 1: New Hire Onboarding -->
211
+ <div class="card open" id="card1">
212
+ <div class="card-header" onclick="toggleCard(1)">
213
+ <div class="card-icon" style="background:#dcfce7;">🌱</div>
214
+ <div class="card-meta">
215
+ <div class="card-tag" style="color:#22c55e;">Employee Experience</div>
216
+ <div class="card-title">Day 1 ready. Actually ready.</div>
217
+ <div class="card-subtitle">FRAIM · new-hire-onboarding · fraim/ai-employee/jobs/</div>
218
+ </div>
219
+ <div class="card-toggle">›</div>
220
+ </div>
221
+ <div class="card-body">
222
+ <div class="card-context">An engineering team was losing new hires in weeks 2–3 — not to competing offers, but to frustration. New hires spent 40% of their first 2 weeks waiting for tool access, onboarding calls that weren't scheduled, and documentation that pointed to outdated internal wikis.</div>
223
+ <div class="narrative">
224
+ <div class="narrative-step">
225
+ <div class="step-label">The Problem</div>
226
+ <div class="step-text">The onboarding checklist existed. It was a Google Doc last updated 8 months ago. Items were checked off as "complete" when the request was sent, not when access was granted. New hires arrived on Day 1 with no laptop setup, no Slack access, and a calendar full of back-to-back intro calls that left no time to actually do anything.</div>
227
+ </div>
228
+ <div class="narrative-step">
229
+ <div class="step-label">What HaRi Can Build</div>
230
+ <div class="step-text">Rebuilt the onboarding system: completion-verified checklists (not just sent-confirmation), a personalized 30-60-90-day plan per role, automated welcome messages from the team, pre-scheduled 1:1s with the 5 people they'd work with most in week 1, and a "Day 1 Readiness" dashboard showing IT access status, GitHub invite status, and equipment delivery tracking.</div>
231
+ </div>
232
+ <div class="narrative-step">
233
+ <div class="step-label">Possible Outcome</div>
234
+ <div class="step-text">With HaRi's onboarding system, teams can typically see "Day 1 readiness" scores rise from the 30s to the high 80s. Week-2 retention tends to improve alongside it, and HR coordination time can drop by around 6 hours per hire — freeing the people ops team for higher-leverage work.</div>
235
+ </div>
236
+ </div>
237
+
238
+ <div class="artifact-label">Live Artifact — Onboarding Checklist Dashboard</div>
239
+
240
+ <div class="onboarding-dashboard">
241
+ <div class="onboard-header">
242
+ <div class="onboard-header-title">Onboarding: [New Hire Name]</div>
243
+ <div class="onboard-header-date">Start Date: May 19 · Engineering · Senior Backend</div>
244
+ </div>
245
+ <div class="onboard-progress">
246
+ <div class="progress-label">
247
+ <span>14/18 items complete</span>
248
+ <span class="progress-pct">78%</span>
249
+ </div>
250
+ <div class="progress-track">
251
+ <div class="progress-fill" style="width:78%;"></div>
252
+ </div>
253
+ </div>
254
+ <div class="onboard-group">
255
+ <div class="onboard-group-title">Pre-Day-1</div>
256
+ <div class="onboard-items">
257
+ <div class="onboard-item"><span class="check-done">✅</span><span class="onboard-item-text">Laptop ordered</span><span class="onboard-item-badge badge-done">Done</span></div>
258
+ <div class="onboard-item"><span class="check-done">✅</span><span class="onboard-item-text">Slack invited</span><span class="onboard-item-badge badge-done">Done</span></div>
259
+ <div class="onboard-item"><span class="check-done">✅</span><span class="onboard-item-text">GitHub org invite</span><span class="onboard-item-badge badge-done">Done</span></div>
260
+ <div class="onboard-item"><span class="check-done">✅</span><span class="onboard-item-text">Email provisioned</span><span class="onboard-item-badge badge-done">Done</span></div>
261
+ </div>
262
+ </div>
263
+ <div class="onboard-group">
264
+ <div class="onboard-group-title">Day 1</div>
265
+ <div class="onboard-items">
266
+ <div class="onboard-item"><span class="check-done">✅</span><span class="onboard-item-text">Welcome call scheduled</span><span class="onboard-item-badge badge-done">Done</span></div>
267
+ <div class="onboard-item"><span class="check-done">✅</span><span class="onboard-item-text">Team intro email sent</span><span class="onboard-item-badge badge-done">Done</span></div>
268
+ <div class="onboard-item"><span class="check-pending">⏳</span><span class="onboard-item-text">Manager 1:1</span><span class="onboard-item-badge badge-soon">10am today</span></div>
269
+ <div class="onboard-item"><span class="check-empty">⬜</span><span class="onboard-item-text">Tool walkthroughs</span><span style="font-size:10px;color:var(--muted);">This afternoon</span></div>
270
+ </div>
271
+ </div>
272
+ <div class="onboard-group">
273
+ <div class="onboard-group-title">Week 1</div>
274
+ <div class="onboard-items">
275
+ <div class="onboard-item"><span class="check-empty">⬜</span><span class="onboard-item-text">Engineering onboarding doc</span><span style="font-size:10px;color:var(--muted);">Day 2</span></div>
276
+ <div class="onboard-item"><span class="check-empty">⬜</span><span class="onboard-item-text">First PR merged</span><span style="font-size:10px;color:var(--muted);">Day 3-5</span></div>
277
+ <div class="onboard-item"><span class="check-empty">⬜</span><span class="onboard-item-text">30-day plan agreed</span><span style="font-size:10px;color:var(--muted);">Day 5</span></div>
278
+ </div>
279
+ </div>
280
+ </div>
281
+
282
+ <div class="source-ref">
283
+ Source: <a href="#">FRAIM · new-hire-onboarding · fraim/ai-employee/jobs/new-hire-onboarding.md</a>
284
+ </div>
285
+ </div>
286
+ </div>
287
+
288
+ <!-- Card 2: Performance Review Preparation -->
289
+ <div class="card" id="card2">
290
+ <div class="card-header" onclick="toggleCard(2)">
291
+ <div class="card-icon" style="background:#dcfce7;">📊</div>
292
+ <div class="card-meta">
293
+ <div class="card-tag" style="color:#22c55e;">People Development</div>
294
+ <div class="card-title">Reviews that develop people, not just rate them</div>
295
+ <div class="card-subtitle">FRAIM · performance-review-preparation · fraim/ai-employee/jobs/</div>
296
+ </div>
297
+ <div class="card-toggle">›</div>
298
+ </div>
299
+ <div class="card-body">
300
+ <div class="card-context">A 40-person company's bi-annual review cycle was producing 3-sentence reviews ("Good team player. Delivered on projects. Room to grow in leadership.") that gave engineers no actionable feedback.</div>
301
+ <div class="narrative">
302
+ <div class="narrative-step">
303
+ <div class="step-label">The Problem</div>
304
+ <div class="step-text">Reviews written by managers under time pressure become compliance exercises. The manager knows what they want to say — "she's strong but needs to improve cross-team communication" — but doesn't have time to find the 3 specific examples that would make that feedback credible and actionable.</div>
305
+ </div>
306
+ <div class="narrative-step">
307
+ <div class="step-label">What HaRi Can Build</div>
308
+ <div class="step-text">Structured the review process: collected 360 input from the 5 people who worked most closely with each employee, surfaced the top 3 themes from the input (specific, quoted), drafted a performance narrative grounded in those quotes, and proposed specific development goals with measurable outcomes for the next cycle.</div>
309
+ </div>
310
+ <div class="narrative-step">
311
+ <div class="step-label">Possible Outcome</div>
312
+ <div class="step-text">HaRi's performance review frameworks can grow average review quality from 3 sentences to 4 structured paragraphs. Employee satisfaction with feedback often rises from the low 50s to the low 80s — and when managers start producing genuinely differentiated assessments, it's a sign the process is working rather than producing consensus noise.</div>
313
+ </div>
314
+ </div>
315
+
316
+ <div class="artifact-label">Live Artifact — Performance Review Card</div>
317
+
318
+ <div class="review-card">
319
+ <div class="review-card-header">
320
+ <span class="review-card-title">Performance Review</span>
321
+ <span class="review-card-cycle">Q1/Q2 2026</span>
322
+ </div>
323
+ <div class="review-section">
324
+ <div class="review-section-label">Top Themes from 360° Input</div>
325
+ <div class="theme-badges">
326
+ <div class="theme-badge theme-up">Technical depth ⬆</div>
327
+ <div class="theme-badge theme-warn">Cross-team comms ⚠</div>
328
+ <div class="theme-badge theme-up">Delivery reliability ⬆</div>
329
+ </div>
330
+ </div>
331
+ <div class="review-section">
332
+ <div class="review-section-label">Development Goal — Q3/Q4 2026</div>
333
+ <div class="review-goal-text">
334
+ Lead one cross-team project with ≥2 stakeholders. Own the communication plan, not just the technical deliverable. Success measure: stakeholders rate comms 8/10+ in retrospective.
335
+ </div>
336
+ </div>
337
+ <div class="review-section">
338
+ <div class="review-section-label">Manager Narrative (excerpt)</div>
339
+ <div class="review-goal-text" style="font-style:italic;color:var(--muted);">
340
+ "Over H1 2026, [Employee] shipped 3 features to production on schedule — including the cache refactor which reduced p95 latency by 40%. The 360 feedback is consistent: peers trust her technical judgment, but two stakeholders noted that she tends to surface blockers late. The Q3 goal is specifically designed to build that muscle earlier in the cycle."
341
+ </div>
342
+ </div>
343
+ </div>
344
+
345
+ <div class="source-ref">
346
+ Source: <a href="#">FRAIM · performance-review-preparation · fraim/ai-employee/jobs/performance-review-preparation.md</a>
347
+ </div>
348
+ </div>
349
+ </div>
350
+
351
+ <!-- Card 3: Benefits Analysis & Enrollment -->
352
+ <div class="card" id="card3">
353
+ <div class="card-header" onclick="toggleCard(3)">
354
+ <div class="card-icon" style="background:#dcfce7;">💡</div>
355
+ <div class="card-meta">
356
+ <div class="card-tag" style="color:#22c55e;">Total Compensation</div>
357
+ <div class="card-title">Benefits package optimized. $18K saved per employee per year.</div>
358
+ <div class="card-subtitle">FRAIM · benefits-analysis-and-enrollment · fraim/ai-employee/jobs/</div>
359
+ </div>
360
+ <div class="card-toggle">›</div>
361
+ </div>
362
+ <div class="card-body">
363
+ <div class="card-context">A 25-person startup was renewing its benefits package for the third year running with the same broker quote — a 14% premium increase with no analysis of alternatives.</div>
364
+ <div class="narrative">
365
+ <div class="narrative-step">
366
+ <div class="step-label">The Problem</div>
367
+ <div class="step-text">Benefits renewal is a default-to-status-quo decision because analysis is time-consuming. Most founders don't have the bandwidth to compare HSA vs. PPO plans, evaluate dental/vision add-ons, model COBRA implications, or understand which perks actually affect hiring and retention for their employee profile.</div>
368
+ </div>
369
+ <div class="narrative-step">
370
+ <div class="step-label">What HaRi Can Build</div>
371
+ <div class="step-text">Ran the benefits analysis: modeled the employee population's utilization patterns against 3 plan options, calculated total cost (employer + employee), identified that 60% of employees were in the PPO plan but only 20% used benefits above the HSA deductible threshold — suggesting HSA+HDHP would save significantly — evaluated 4 broker quotes, and recommended a package that maintained coverage quality while reducing employer cost.</div>
372
+ </div>
373
+ <div class="narrative-step">
374
+ <div class="step-label">Possible Outcome</div>
375
+ <div class="step-text">HaRi's benefits audit can typically recommend a package that reduces total cost by around $18,200 per employee per year — often through a hybrid approach like HSA+HDHP for the majority, with PPO retained for employees who need it. Employee satisfaction with benefits typically stays flat through the transition, so coverage quality doesn't have to be traded off against cost savings.</div>
376
+ </div>
377
+ </div>
378
+
379
+ <div class="artifact-label">Live Artifact — Benefits Comparison Table</div>
380
+
381
+ <div class="benefits-table-wrap">
382
+ <table class="benefits-table">
383
+ <thead>
384
+ <tr>
385
+ <th>Plan</th>
386
+ <th>Current PPO</th>
387
+ <th class="col-highlight-header">Recommended HDHP+HSA</th>
388
+ <th>Premium PPO</th>
389
+ </tr>
390
+ </thead>
391
+ <tbody>
392
+ <tr>
393
+ <td>Monthly Premium (Employer)</td>
394
+ <td>$680</td>
395
+ <td class="col-recommended">$290</td>
396
+ <td>$920</td>
397
+ </tr>
398
+ <tr>
399
+ <td>Employee Deductible</td>
400
+ <td>$500</td>
401
+ <td class="col-recommended">$1,500</td>
402
+ <td>$250</td>
403
+ </tr>
404
+ <tr>
405
+ <td>Annual Cost / Employee</td>
406
+ <td>$8,160</td>
407
+ <td class="col-recommended">$6,180</td>
408
+ <td>$11,040</td>
409
+ </tr>
410
+ <tr>
411
+ <td>HSA Contribution (Employer)</td>
412
+ <td>—</td>
413
+ <td class="col-recommended">$800</td>
414
+ <td>—</td>
415
+ </tr>
416
+ <tr>
417
+ <td>Dental / Vision</td>
418
+ <td>Included</td>
419
+ <td class="col-recommended">Included</td>
420
+ <td>Included</td>
421
+ </tr>
422
+ <tr>
423
+ <td><strong>Total Annual Cost</strong></td>
424
+ <td><strong>$8,160</strong></td>
425
+ <td class="col-recommended"><strong>$6,180</strong><br><span class="savings-badge">Saves $1,980/yr</span></td>
426
+ <td><strong>$11,040</strong></td>
427
+ </tr>
428
+ </tbody>
429
+ </table>
430
+ <div class="market-note">Note: Recommended HDHP+HSA package maintained dental/vision coverage and added $800 employer HSA contribution, partially offsetting the higher deductible for the 70% of employees with low utilization.</div>
431
+ </div>
432
+
433
+ <div class="source-ref">
434
+ Source: <a href="#">FRAIM · benefits-analysis-and-enrollment · fraim/ai-employee/jobs/benefits-analysis-and-enrollment.md</a>
435
+ </div>
436
+ </div>
437
+ </div>
438
+
439
+ </div>
440
+
441
+ <footer class="portfolio-footer">
442
+ <div class="footer-sub">
443
+ Part of the <a href="/">FRAIM</a> · 18 AI employees available ·
444
+ <a href="/">View all employees</a> ·
445
+ <a href="/">FRAIM</a>
446
+ </div>
447
+ </footer>
448
+
449
+ <script>
450
+ function toggleTheme() {
451
+ const html = document.documentElement;
452
+ const isDark = html.getAttribute('data-theme') === 'dark';
453
+ html.setAttribute('data-theme', isDark ? 'light' : 'dark');
454
+ document.querySelector('.theme-btn').textContent = isDark ? '☾' : '☀';
455
+ }
456
+ if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
457
+ document.documentElement.setAttribute('data-theme', 'dark');
458
+ document.querySelector('.theme-btn').textContent = '☀';
459
+ }
460
+ function toggleCard(num) {
461
+ const card = document.getElementById('card' + num);
462
+ const isOpen = card.classList.contains('open');
463
+ document.querySelectorAll('.card').forEach(c => c.classList.remove('open'));
464
+ if (!isOpen) { card.classList.add('open'); card.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); }
465
+ }
466
+ </script>
467
+
468
+ </body>
469
+ </html>