fraim 2.0.166 → 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 (42) 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/config/ai-manager-hiring.js +121 -0
  4. package/dist/src/config/compat.js +16 -0
  5. package/dist/src/config/feature-flags.js +25 -0
  6. package/dist/src/config/persona-capability-bundles.js +273 -0
  7. package/dist/src/config/persona-hiring.js +270 -0
  8. package/dist/src/config/portfolio-slug-overrides.js +17 -0
  9. package/dist/src/config/pricing.js +37 -0
  10. package/dist/src/config/stripe.js +43 -0
  11. package/dist/src/core/config-loader.js +9 -5
  12. package/dist/src/core/fraim-config-schema.generated.js +0 -21
  13. package/dist/src/core/utils/local-registry-resolver.js +8 -1
  14. package/package.json +5 -1
  15. package/public/ai-hub/index.html +81 -0
  16. package/public/ai-hub/review.css +13 -0
  17. package/public/ai-hub/script.js +414 -4
  18. package/public/ai-hub/styles.css +56 -0
  19. package/public/portfolio/ashley.html +523 -0
  20. package/public/portfolio/auditya.html +83 -0
  21. package/public/portfolio/banke.html +83 -0
  22. package/public/portfolio/beza.html +659 -0
  23. package/public/portfolio/careena.html +632 -0
  24. package/public/portfolio/casey.html +568 -0
  25. package/public/portfolio/celia.html +490 -0
  26. package/public/portfolio/deidre.html +642 -0
  27. package/public/portfolio/gautam.html +597 -0
  28. package/public/portfolio/hari.html +469 -0
  29. package/public/portfolio/huxley.html +1354 -0
  30. package/public/portfolio/index.html +741 -0
  31. package/public/portfolio/maestro.html +518 -0
  32. package/public/portfolio/mandy.html +590 -0
  33. package/public/portfolio/mona.html +597 -0
  34. package/public/portfolio/pam.html +887 -0
  35. package/public/portfolio/procella.html +107 -0
  36. package/public/portfolio/qasm.html +569 -0
  37. package/public/portfolio/ricardo.html +489 -0
  38. package/public/portfolio/sade.html +560 -0
  39. package/public/portfolio/sam.html +654 -0
  40. package/public/portfolio/sechar.html +580 -0
  41. package/public/portfolio/sreya.html +599 -0
  42. package/public/portfolio/swen.html +601 -0
package/public/portfolio/procella.html ADDED
@@ -0,0 +1,107 @@
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>PROCella · AI Procurement 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 { --accent:#0f766e; --accent-2:#7c3aed; --accent-light:#ccfbf1; --text:#102a43; --text-2:#334155; --muted:#64748b; --bg:#f8fafc; --surface:#fff; --surface-2:#f1f5f9; --border:#dbe4ee; --shadow:0 4px 24px rgba(15,118,110,.08); --shadow-lg:0 12px 40px rgba(15,118,110,.16); --radius:18px; --radius-sm:10px; }
12
+ [data-theme="dark"] { --text:#e2e8f0; --text-2:#cbd5e1; --muted:#94a3b8; --bg:#071318; --surface:#0f2530; --surface-2:#12323d; --border:#1f4b57; --shadow:0 4px 24px rgba(0,0,0,.35); --shadow-lg:0 12px 40px rgba(0,0,0,.5); --accent-light:#134e4a; }
13
+ * { box-sizing:border-box; margin:0; padding:0; }
14
+ body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; transition:background .3s,color .3s; }
15
+ code,.mono { font-family:'JetBrains Mono',monospace; }
16
+ .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); }
17
+ .brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
18
+ .brand-logo { width:32px; height:32px; border-radius:8px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; color:#fff; }
19
+ .brand-name { font-weight:700; font-size:15px; color:var(--text); }
20
+ .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; }
21
+ .hero { max-width:900px; margin:56px auto 0; padding:0 24px; text-align:center; }
22
+ .avatar-ring { display:inline-flex; align-items:center; justify-content:center; width:96px; height:96px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); margin-bottom:24px; box-shadow:0 0 0 6px var(--accent-light); overflow:hidden; }
23
+ .role-chip { display:inline-block; background:var(--accent-light); color:var(--accent); border-radius:999px; padding:4px 14px; font-size:12px; font-weight:700; letter-spacing:.04em; margin-bottom:16px; }
24
+ .hero h1 { font-size:clamp(32px,5vw,52px); font-weight:800; letter-spacing:-1.5px; line-height:1.1; margin-bottom:16px; }
25
+ .hero h1 span { color:var(--accent); }
26
+ .hero p { font-size:17px; color:var(--muted); max-width:620px; margin:0 auto 32px; line-height:1.7; }
27
+ .section-label { max-width:900px; margin:64px auto 0; padding:0 24px; display:flex; align-items:center; gap:12px; }
28
+ .section-label h2 { font-size:13px; font-weight:700; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
29
+ .section-divider { flex:1; height:1px; background:var(--border); }
30
+ .cards-grid { max-width:900px; margin:24px auto 0; padding:0 24px 80px; display:flex; flex-direction:column; gap:20px; }
31
+ .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; transition:box-shadow .2s; }
32
+ .card:hover { box-shadow:var(--shadow-lg); }
33
+ .card-header { display:flex; align-items:flex-start; gap:16px; padding:24px; cursor:pointer; user-select:none; }
34
+ .card-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; background:var(--accent-light); color:var(--accent); font-weight:800; }
35
+ .card-meta { flex:1; min-width:0; }
36
+ .card-tag { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; color:var(--accent); }
37
+ .card-title { font-size:18px; font-weight:700; line-height:1.25; margin-bottom:6px; }
38
+ .card-subtitle { font-size:13px; color:var(--muted); }
39
+ .card-toggle { font-size:22px; color:var(--muted); transition:transform .3s; flex-shrink:0; align-self:center; }
40
+ .card.open .card-toggle { transform:rotate(90deg); }
41
+ .card-body { display:none; border-top:1px solid var(--border); padding:28px; }
42
+ .card.open .card-body { display:block; }
43
+ .narrative { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px; }
44
+ .narrative-step { background:var(--surface-2); border-radius:var(--radius-sm); padding:16px; }
45
+ .step-label { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
46
+ .step-text { font-size:13px; color:var(--text-2); line-height:1.6; }
47
+ .artifact { border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--surface-2); }
48
+ .artifact-header { display:flex; justify-content:space-between; gap:12px; padding:12px 16px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; }
49
+ .artifact-title { font-weight:800; font-size:13px; }
50
+ .artifact-note { font-size:11px; opacity:.82; }
51
+ .row { display:grid; grid-template-columns:1.1fr 1fr 1fr 1fr; border-top:1px solid var(--border); }
52
+ .row:first-child { border-top:none; background:var(--surface); }
53
+ .cell { padding:10px 12px; font-size:12px; color:var(--text-2); border-left:1px solid var(--border); }
54
+ .cell:first-child { border-left:none; font-weight:700; color:var(--text); }
55
+ .score { display:inline-block; min-width:42px; text-align:center; border-radius:999px; padding:2px 8px; font-weight:800; color:#fff; background:var(--accent); }
56
+ .timeline { padding:16px; display:grid; gap:12px; }
57
+ .timeline-item { display:grid; grid-template-columns:86px 1fr; gap:14px; align-items:start; }
58
+ .time { font-size:11px; font-weight:800; color:var(--accent); text-transform:uppercase; letter-spacing:.06em; }
59
+ .time-copy { font-size:13px; color:var(--text-2); line-height:1.55; }
60
+ .footer-cta { max-width:900px; margin:0 auto 80px; padding:0 24px; text-align:center; }
61
+ .hire-btn { display:inline-block; background:var(--accent); color:#fff; text-decoration:none; font-weight:800; border-radius:10px; padding:12px 22px; }
62
+ @media (max-width:700px) { .site-header { padding:12px 16px; } .narrative,.row { grid-template-columns:1fr; } .cell { border-left:none; border-top:1px solid var(--border); } .timeline-item { grid-template-columns:1fr; } }
63
+ </style>
64
+ </head>
65
+ <body>
66
+ <header class="site-header">
67
+ <a class="brand" href="/portfolio/"><div class="brand-logo">F</div><span class="brand-name">FRAIM</span></a>
68
+ <button class="theme-btn" onclick="toggleTheme()" title="Toggle dark mode">☾</button>
69
+ </header>
70
+ <section class="hero">
71
+ <div class="avatar-ring"><img src="https://api.dicebear.com/9.x/notionists/svg?seed=PROCELLA-procurement&backgroundColor=ccfbf1&radius=50" width="96" height="96" alt="PROCella procurement manager avatar"></div>
72
+ <div class="role-chip">AI Procurement Manager</div>
73
+ <h1>PROCella makes supplier decisions <span>defensible</span>.</h1>
74
+ <p>PROCella frames procurement strategy, builds qualified supplier options, turns RFx packages into comparable responses, and protects the buyer's leverage through approval and acceptance gates.</p>
75
+ </section>
76
+ <div class="section-label"><h2>Procurement work artifacts</h2><div class="section-divider"></div></div>
77
+ <div class="cards-grid">
78
+ <article class="card open">
79
+ <div class="card-header" onclick="toggleCard(this)"><div class="card-icon">1</div><div class="card-meta"><div class="card-tag">Strategy · Intake</div><div class="card-title">Capital equipment acquisition strategy</div><div class="card-subtitle">Decision framing before supplier outreach.</div></div><div class="card-toggle">›</div></div>
80
+ <div class="card-body">
81
+ <div class="narrative"><div class="narrative-step"><div class="step-label">Problem</div><div class="step-text">A hardware team needed a CADR test chamber but did not yet know whether buying new equipment was the right answer.</div></div><div class="narrative-step"><div class="step-label">Work</div><div class="step-text">PROCella compared buy, refurbish, lease, outsource, modify existing, and defer paths before any vendor search.</div></div><div class="narrative-step"><div class="step-label">Outcome</div><div class="step-text">The team entered supplier conversations with requirements, constraints, budget guardrails, and acceptance criteria already defined.</div></div></div>
82
+ <div class="artifact"><div class="artifact-header"><span class="artifact-title">Acquisition path comparison</span><span class="artifact-note">BUSINESS CONFIDENTIAL - PROCUREMENT</span></div><div class="row"><div class="cell">Path</div><div class="cell">Fit</div><div class="cell">Risk</div><div class="cell">Recommendation</div></div><div class="row"><div class="cell">Buy new</div><div class="cell">Best capability fit</div><div class="cell">Highest cash timing risk</div><div class="cell"><span class="score">2</span> Keep in shortlist</div></div><div class="row"><div class="cell">Refurbished</div><div class="cell">Good if calibrated</div><div class="cell">Warranty and service gaps</div><div class="cell"><span class="score">1</span> Compare aggressively</div></div><div class="row"><div class="cell">Outsource testing</div><div class="cell">Fastest validation</div><div class="cell">Lower process control</div><div class="cell"><span class="score">3</span> Use as benchmark</div></div></div>
83
+ </div>
84
+ </article>
85
+ <article class="card">
86
+ <div class="card-header" onclick="toggleCard(this)"><div class="card-icon">2</div><div class="card-meta"><div class="card-tag">RFx · Supplier Comparison</div><div class="card-title">Comparable supplier response package</div><div class="card-subtitle">RFQ structure that prevents apples-to-oranges quotes.</div></div><div class="card-toggle">›</div></div>
87
+ <div class="card-body">
88
+ <div class="narrative"><div class="narrative-step"><div class="step-label">Problem</div><div class="step-text">Suppliers quoted different freight terms, warranty scopes, training, spare parts, and acceptance assumptions.</div></div><div class="narrative-step"><div class="step-label">Work</div><div class="step-text">PROCella authored a response template with itemized pricing, Incoterms, service rates, lead time, and acceptance criteria.</div></div><div class="narrative-step"><div class="step-label">Outcome</div><div class="step-text">Supplier responses could be normalized into one evaluation matrix before negotiation began.</div></div></div>
89
+ <div class="artifact"><div class="artifact-header"><span class="artifact-title">RFQ response template excerpt</span><span class="artifact-note">approval required before send</span></div><div class="row"><div class="cell">Required field</div><div class="cell">Supplier A</div><div class="cell">Supplier B</div><div class="cell">Missing / risk</div></div><div class="row"><div class="cell">Delivered equipment price</div><div class="cell">$84k</div><div class="cell">$68k refurb</div><div class="cell">B excludes calibration</div></div><div class="row"><div class="cell">Training and install</div><div class="cell">Included onsite</div><div class="cell">Remote only</div><div class="cell">B needs added labor</div></div><div class="row"><div class="cell">Acceptance test</div><div class="cell">Pass before final 20%</div><div class="cell">Delivery-only</div><div class="cell">B weakens leverage</div></div></div>
90
+ </div>
91
+ </article>
92
+ <article class="card">
93
+ <div class="card-header" onclick="toggleCard(this)"><div class="card-icon">3</div><div class="card-meta"><div class="card-tag">Evaluation · Acceptance</div><div class="card-title">TCO and acceptance-gated purchase package</div><div class="card-subtitle">Decision memo plus retention release criteria.</div></div><div class="card-toggle">›</div></div>
94
+ <div class="card-body">
95
+ <div class="narrative"><div class="narrative-step"><div class="step-label">Problem</div><div class="step-text">The cheapest quote looked attractive until service, calibration, downtime, and payment timing were modeled.</div></div><div class="narrative-step"><div class="step-label">Work</div><div class="step-text">PROCella produced 5-year TCO, sensitivity on the largest drivers, and PO guidance with retention tied to acceptance evidence.</div></div><div class="narrative-step"><div class="step-label">Outcome</div><div class="step-text">Finance, legal, engineering, and operations could approve or challenge the recommendation from one dossier.</div></div></div>
96
+ <div class="artifact"><div class="artifact-header"><span class="artifact-title">Acceptance timeline excerpt</span><span class="artifact-note">retention release gate</span></div><div class="timeline"><div class="timeline-item"><div class="time">Receive</div><div class="time-copy">Inspect crate, serial numbers, accessories, damage, calibration documents, and site-readiness checklist.</div></div><div class="timeline-item"><div class="time">Install</div><div class="time-copy">Verify utilities, environmental conditions, training completion, and vendor sign-off before production use.</div></div><div class="timeline-item"><div class="time">Accept</div><div class="time-copy">Run agreed test protocol. Release final retention only after pass evidence is attached to the purchase package.</div></div></div></div>
97
+ </div>
98
+ </article>
99
+ </div>
100
+ <div class="footer-cta"><a class="hire-btn" href="/auth/sign-in.html">Hire PROCella</a></div>
101
+ <script>
102
+ function toggleTheme(){const html=document.documentElement;const isDark=html.getAttribute('data-theme')==='dark';html.setAttribute('data-theme',isDark?'light':'dark');document.querySelector('.theme-btn').textContent=isDark?'☾':'☀';}
103
+ if(window.matchMedia('(prefers-color-scheme: dark)').matches){document.documentElement.setAttribute('data-theme','dark');document.querySelector('.theme-btn').textContent='☀';}
104
+ function toggleCard(header){header.closest('.card').classList.toggle('open');}
105
+ </script>
106
+ </body>
107
+ </html>