npm - fraim - Versions diffs - 2.0.165 → 2.0.167 - Mend

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

package/dist/src/ai-hub/catalog.js +20 -27
package/dist/src/ai-hub/server.js +418 -2
package/dist/src/ai-hub/word-sideload.js +95 -0
package/dist/src/cli/commands/org.js +40 -0
package/dist/src/cli/commands/test-mcp.js +171 -0
package/dist/src/cli/fraim.js +2 -0
package/dist/src/cli/setup/first-run.js +242 -0
package/dist/src/cli/utils/org-publish.js +98 -0
package/dist/src/config/ai-manager-hiring.js +121 -0
package/dist/src/config/compat.js +16 -0
package/dist/src/config/feature-flags.js +25 -0
package/dist/src/config/persona-capability-bundles.js +273 -0
package/dist/src/config/persona-hiring.js +270 -0
package/dist/src/config/portfolio-slug-overrides.js +17 -0
package/dist/src/config/pricing.js +37 -0
package/dist/src/config/stripe.js +43 -0
package/dist/src/core/config-loader.js +9 -5
package/dist/src/core/config-writer.js +75 -0
package/dist/src/core/fraim-config-schema.generated.js +0 -21
package/dist/src/core/utils/job-aliases.js +47 -0
package/dist/src/core/utils/local-registry-resolver.js +8 -1
package/dist/src/core/utils/workflow-parser.js +174 -0
package/index.js +1 -1
package/package.json +5 -1
package/public/ai-hub/index.html +81 -0
package/public/ai-hub/powerpoint-taskpane/index.html +236 -236
package/public/ai-hub/powerpoint-taskpane/manifest.xml +29 -29
package/public/ai-hub/review.css +13 -0
package/public/ai-hub/script.js +414 -4
package/public/ai-hub/styles.css +56 -0
package/public/first-run/styles.css +73 -73
package/public/portfolio/ashley.html +523 -0
package/public/portfolio/auditya.html +83 -0
package/public/portfolio/banke.html +83 -0
package/public/portfolio/beza.html +659 -0
package/public/portfolio/careena.html +632 -0
package/public/portfolio/casey.html +568 -0
package/public/portfolio/celia.html +490 -0
package/public/portfolio/deidre.html +642 -0
package/public/portfolio/gautam.html +597 -0
package/public/portfolio/hari.html +469 -0
package/public/portfolio/huxley.html +1354 -0
package/public/portfolio/index.html +741 -0
package/public/portfolio/maestro.html +518 -0
package/public/portfolio/mandy.html +590 -0
package/public/portfolio/mona.html +597 -0
package/public/portfolio/pam.html +887 -0
package/public/portfolio/procella.html +107 -0
package/public/portfolio/qasm.html +569 -0
package/public/portfolio/ricardo.html +489 -0
package/public/portfolio/sade.html +560 -0
package/public/portfolio/sam.html +654 -0
package/public/portfolio/sechar.html +580 -0
package/public/portfolio/sreya.html +599 -0
package/public/portfolio/swen.html +601 -0

package/public/portfolio/maestro.html ADDED Viewed

@@ -0,0 +1,518 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>MAESTRO · Full-Brained AI Employee · FRAIM Portfolio</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<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">
+<style>
+:root {
+  --accent: #10b981;
+  --accent-2: #059669;
+  --accent-light: #d1fae5;
+  --text: #0a2240;
+  --text-2: #334155;
+  --muted: #64748b;
+  --bg: #f0fdf4;
+  --surface: #ffffff;
+  --surface-2: #f8fafc;
+  --border: #e2e8f0;
+  --shadow: 0 4px 24px rgba(10,34,64,.08);
+  --shadow-lg: 0 12px 40px rgba(10,34,64,.14);
+  --radius: 18px;
+  --radius-sm: 10px;
+  --amber: #f59e0b;
+  --red: #ef4444;
+  --purple: #8b5cf6;
+  --code-bg: #0f172a;
+  --code-border: #1e293b;
+}
+[data-theme="dark"] {
+  --text: #e2e8f0; --text-2: #cbd5e1; --muted: #94a3b8;
+  --bg: #071410; --surface: #0b1f18; --surface-2: #0f2920;
+  --border: #164430; --shadow: 0 4px 24px rgba(0,0,0,.35);
+  --shadow-lg: 0 12px 40px rgba(0,0,0,.5); --accent-light: #064e3b;
+  --code-bg: #03100c; --code-border: #0b1f18;
+}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; transition: background .3s, color .3s; }
+code, pre, .mono { font-family: 'JetBrains Mono', 'Fira Code', monospace; }
+.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); }
+.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
+.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; }
+.brand-name { font-weight: 700; font-size: 15px; color: var(--text); }
+.header-actions { display: flex; align-items: center; gap: 12px; }
+.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; }
+.hero { max-width: 900px; margin: 56px auto 0; padding: 0 24px; text-align: center; }
+.avatar-ring { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(135deg, #10b981, #6366f1, #f59e0b, #ef4444, #0ea5e9); margin-bottom: 24px; box-shadow: 0 0 0 6px var(--accent-light); overflow: hidden; }
+.avatar-initials { font-size: 28px; font-weight: 800; color: #fff; letter-spacing: -1px; font-family: 'JetBrains Mono', monospace; }
+.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; }
+.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; }
+.hero h1 span { color: var(--accent); }
+.hero p { font-size: 17px; color: var(--muted); max-width: 560px; margin: 0 auto 32px; line-height: 1.7; }
+.section-label { max-width: 900px; margin: 64px auto 0; padding: 0 24px; display: flex; align-items: center; gap: 12px; }
+.section-label h2 { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
+.section-divider { flex: 1; height: 1px; background: var(--border); }
+.cards-grid { max-width: 900px; margin: 24px auto 0; padding: 0 24px 80px; display: flex; flex-direction: column; gap: 20px; }
+.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: box-shadow .2s; }
+.card:hover { box-shadow: var(--shadow-lg); }
+.card-header { display: flex; align-items: flex-start; gap: 16px; padding: 24px; cursor: pointer; user-select: none; }
+.card-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
+.card-meta { flex: 1; min-width: 0; }
+.card-tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
+.card-title { font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.25; margin-bottom: 6px; }
+.card-subtitle { font-size: 13px; color: var(--muted); }
+.card-toggle { font-size: 22px; color: var(--muted); transition: transform .3s; flex-shrink: 0; align-self: center; }
+.card.open .card-toggle { transform: rotate(90deg); }
+.card-body { display: none; border-top: 1px solid var(--border); padding: 28px; }
+.card.open .card-body { display: block; }
+.card-context { font-size: 13px; color: var(--muted); font-style: italic; margin-bottom: 20px; line-height: 1.6; border-left: 3px solid var(--accent-light); padding-left: 14px; }
+.narrative { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 28px; }
+@media (max-width: 640px) { .narrative { grid-template-columns: 1fr; } }
+.narrative-step { background: var(--surface-2); border-radius: var(--radius-sm); padding: 16px; }
+.step-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
+.step-text { font-size: 13px; color: var(--text-2); line-height: 1.6; }
+.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; }
+.artifact-label::before { content: ''; display: block; width: 20px; height: 2px; background: var(--accent); border-radius: 2px; }
+.source-ref { margin-top: 16px; font-size: 12px; color: var(--muted); }
+.source-ref a { color: var(--accent); text-decoration: none; }
+.source-ref a:hover { text-decoration: underline; }
+/* ══ ARTIFACT 1 — Capability Wheel ══ */
+.cap-wheel-wrap {
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 24px;
+  text-align: center;
+}
+.cap-wheel-svg { width: 100%; max-width: 480px; height: auto; }
+/* ══ ARTIFACT 2 — Launch Timeline ══ */
+.timeline-wrap {
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 24px;
+}
+.timeline { position: relative; padding-left: 32px; display: flex; flex-direction: column; gap: 0; }
+.timeline::before {
+  content: ''; position: absolute; left: 10px; top: 10px; bottom: 10px;
+  width: 2px; background: var(--border); border-radius: 2px;
+}
+.tl-item { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; position: relative; }
+.tl-dot {
+  width: 20px; height: 20px; border-radius: 50%;
+  position: absolute; left: -32px; top: 14px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 9px; color: #fff; font-weight: 800;
+  flex-shrink: 0; z-index: 1;
+}
+.tl-time { font-size: 11px; font-weight: 700; color: var(--muted); font-family: 'JetBrains Mono', monospace; min-width: 52px; flex-shrink: 0; padding-top: 2px; }
+.tl-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; margin-right: 8px; flex-shrink: 0; }
+.tl-text { font-size: 13px; color: var(--text-2); line-height: 1.5; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+/* ══ ARTIFACT 3 — SOC2 Control Matrix ══ */
+.soc2-wrap {
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  overflow: hidden;
+}
+.soc2-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.soc2-table th {
+  background: var(--surface-2);
+  padding: 10px 14px;
+  text-align: left;
+  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
+  color: var(--muted);
+  border-bottom: 1px solid var(--border);
+}
+.soc2-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text-2); }
+.soc2-table tr:last-child td { border-bottom: none; }
+.soc2-table tr:hover td { background: var(--surface-2); }
+.ctrl-code { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; color: var(--text); }
+.owner-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
+.status-dot-green { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #10b981; margin-right: 4px; vertical-align: middle; }
+.evidence-text { font-size: 12px; color: var(--muted); }
+/* Footer */
+.portfolio-footer { background: var(--surface); border-top: 1px solid var(--border); padding: 40px 24px; text-align: center; }
+.footer-sub { margin-top: 20px; font-size: 12px; color: var(--muted); }
+.footer-sub a { color: var(--accent); text-decoration: none; }
+@media (max-width: 640px) {
+  .site-header { padding: 12px 16px; }
+  .hero { margin-top: 36px; }
+  .cards-grid { padding: 0 16px 60px; }
+  .card-header { padding: 18px; }
+  .card-body { padding: 18px; }
+  .section-label { margin-top: 40px; padding: 0 16px; }
+  .soc2-table th, .soc2-table td { padding: 8px 10px; }
+  .soc2-wrap { overflow-x: auto; }
+}
+</style>
+</head>
+<body>
+<header class="site-header">
+  <a class="brand" href="/">
+    <div class="brand-logo">F</div>
+    <span class="brand-name">FRAIM</span>
+  </a>
+  <div class="header-actions">
+    <button class="theme-btn" onclick="toggleTheme()" title="Toggle dark mode">☾</button>
+    </div>
+</header>
+<section class="hero">
+  <div class="avatar-ring">
+    <img src="https://api.dicebear.com/9.x/notionists/svg?seed=MAESTRO-founder-mode&backgroundColor=fde68a&radius=50" width="96" height="96" alt="MAESTRO-founder-mode avatar" style="border-radius:50%;">
+  </div>
+  <div class="role-chip">Full-Brained AI Employee</div>
+  <h1>Every FRAIM skill.<br>Every FRAIM job. <span>One hire.</span></h1>
+  <p>Every FRAIM skill. Every FRAIM job. One hire.</p>
+  </section>
+<div class="section-label">
+  <h2>Selected Work</h2>
+  <div class="section-divider"></div>
+</div>
+<div class="cards-grid">
+  <!-- Card 1: Full-Stack Product Launch -->
+  <div class="card open" id="card1">
+    <div class="card-header" onclick="toggleCard(1)">
+      <div class="card-icon" style="background:#d1fae5;">🚀</div>
+      <div class="card-meta">
+        <div class="card-tag" style="color:#10b981;">Cross-Functional Delivery</div>
+        <div class="card-title">Spec → design → code → shipped in one session</div>
+        <div class="card-subtitle">FRAIM · feat/455-portfolio-pages · full-stack-execution</div>
+      </div>
+      <div class="card-toggle">›</div>
+    </div>
+    <div class="card-body">
+      <div class="card-context">A bootstrapped founder needed to launch FRAIM's public employee portfolio from zero — requiring product spec, UX design, engineering, QA, and security review.</div>
+      <div class="narrative">
+        <div class="narrative-step">
+          <div class="step-label">Problem</div>
+          <div class="step-text">Hiring specialists for a one-time launch means 5 separate onboarding conversations, 5 context-transfer sessions, and 5 billing relationships. For a bootstrapped company, the coordination cost often exceeds the work cost.</div>
+        </div>
+        <div class="narrative-step">
+          <div class="step-label">What MAESTRO Did</div>
+          <div class="step-text">MAESTRO ran the full lifecycle: PaM wrote the feature spec with 9 requirements and a validated HTML mock, hUXley built three interactive portfolio artifacts, SWEn implemented 4 production HTML pages with auth middleware changes and 7 E2E tests, QAsm validated all pages via Playwright, and SEChar ran the security review. MAESTRO orchestrated sequencing, resolved one spec/design conflict, and merged the PR.</div>
+        </div>
+        <div class="narrative-step">
+          <div class="step-label">The Outcome</div>
+          <div class="step-text">Complete portfolio pages for hUXley, PaM, and SWEn shipped in a single session. Zero regressions. Security: 0 findings. All R1–R9 requirements met.</div>
+        </div>
+      </div>
+      <div class="artifact-label">Live Artifact — MAESTRO Capability Wheel</div>
+      <div class="cap-wheel-wrap">
+        <svg class="cap-wheel-svg" viewBox="0 0 480 340" xmlns="http://www.w3.org/2000/svg">
+          <!-- Connection lines from center to satellites -->
+          <line x1="240" y1="170" x2="120" y2="60" stroke="#6366f1" stroke-width="1.5" opacity="0.5"/>
+          <line x1="240" y1="170" x2="360" y2="60" stroke="#10b981" stroke-width="1.5" opacity="0.5"/>
+          <line x1="240" y1="170" x2="420" y2="170" stroke="#0ea5e9" stroke-width="1.5" opacity="0.5"/>
+          <line x1="240" y1="170" x2="360" y2="280" stroke="#10b981" stroke-width="1.5" opacity="0.5"/>
+          <line x1="240" y1="170" x2="120" y2="280" stroke="#ef4444" stroke-width="1.5" opacity="0.5"/>
+          <line x1="240" y1="170" x2="60" y2="170" stroke="#f59e0b" stroke-width="1.5" opacity="0.5"/>
+          <!-- MAESTRO center circle — rainbow gradient -->
+          <defs>
+            <radialGradient id="maestroGrad" cx="50%" cy="50%" r="50%">
+              <stop offset="0%" stop-color="#10b981"/>
+              <stop offset="33%" stop-color="#6366f1"/>
+              <stop offset="66%" stop-color="#f59e0b"/>
+              <stop offset="100%" stop-color="#ef4444"/>
+            </radialGradient>
+          </defs>
+          <circle cx="240" cy="170" r="56" fill="url(#maestroGrad)" opacity="0.92"/>
+          <text x="240" y="164" font-size="15" fill="#fff" font-family="Inter,sans-serif" font-weight="800" text-anchor="middle">MAESTRO</text>
+          <text x="240" y="181" font-size="9" fill="rgba(255,255,255,.8)" font-family="Inter,sans-serif" text-anchor="middle">18 employees</text>
+          <text x="240" y="193" font-size="9" fill="rgba(255,255,255,.8)" font-family="Inter,sans-serif" text-anchor="middle">200+ jobs</text>
+          <!-- PaM — indigo -->
+          <circle cx="120" cy="60" r="36" fill="#6366f1" opacity="0.9"/>
+          <text x="120" y="56" font-size="13" fill="#fff" font-family="Inter,sans-serif" font-weight="700" text-anchor="middle">PaM</text>
+          <text x="120" y="70" font-size="10" fill="#e0e7ff" font-family="Inter,sans-serif" text-anchor="middle">Spec ✓</text>
+          <!-- hUXley — green -->
+          <circle cx="360" cy="60" r="36" fill="#10b981" opacity="0.9"/>
+          <text x="360" y="56" font-size="11" fill="#fff" font-family="Inter,sans-serif" font-weight="700" text-anchor="middle">hUXley</text>
+          <text x="360" y="70" font-size="10" fill="#d1fae5" font-family="Inter,sans-serif" text-anchor="middle">Design ✓</text>
+          <!-- SWEn — sky -->
+          <circle cx="420" cy="170" r="36" fill="#0ea5e9" opacity="0.9"/>
+          <text x="420" y="166" font-size="13" fill="#fff" font-family="Inter,sans-serif" font-weight="700" text-anchor="middle">SWEn</text>
+          <text x="420" y="180" font-size="10" fill="#e0f2fe" font-family="Inter,sans-serif" text-anchor="middle">Code ✓</text>
+          <!-- QAsm — emerald -->
+          <circle cx="360" cy="280" r="36" fill="#10b981" opacity="0.75"/>
+          <text x="360" y="276" font-size="13" fill="#fff" font-family="Inter,sans-serif" font-weight="700" text-anchor="middle">QAsm</text>
+          <text x="360" y="290" font-size="10" fill="#d1fae5" font-family="Inter,sans-serif" text-anchor="middle">QA ✓</text>
+          <!-- SEChar — red -->
+          <circle cx="120" cy="280" r="36" fill="#ef4444" opacity="0.85"/>
+          <text x="120" y="276" font-size="11" fill="#fff" font-family="Inter,sans-serif" font-weight="700" text-anchor="middle">SEChar</text>
+          <text x="120" y="290" font-size="10" fill="#fee2e2" font-family="Inter,sans-serif" text-anchor="middle">Security ✓</text>
+          <!-- AshLey — amber -->
+          <circle cx="60" cy="170" r="36" fill="#f59e0b" opacity="0.9"/>
+          <text x="60" y="166" font-size="11" fill="#fff" font-family="Inter,sans-serif" font-weight="700" text-anchor="middle">AshLey</text>
+          <text x="60" y="180" font-size="10" fill="#fef3c7" font-family="Inter,sans-serif" text-anchor="middle">Comms ✓</text>
+        </svg>
+      </div>
+      <div class="source-ref">
+        📎 Source: <a href="#">FRAIM · feat/455-portfolio-pages · all employees</a>
+      </div>
+    </div>
+  </div>
+  <!-- Card 2: Business Idea to Revenue in 72 Hours -->
+  <div class="card" id="card2">
+    <div class="card-header" onclick="toggleCard(2)">
+      <div class="card-icon" style="background:#d1fae5;">⚡</div>
+      <div class="card-meta">
+        <div class="card-tag" style="color:#10b981;">Zero-to-One Velocity</div>
+        <div class="card-title">Idea validated, entity formed, product live</div>
+        <div class="card-subtitle">FRAIM · business-launch-workflow · end-to-end</div>
+      </div>
+      <div class="card-toggle">›</div>
+    </div>
+    <div class="card-body">
+      <div class="card-context">A solo founder had a validated problem hypothesis but no company, no product, no legal entity — just conviction and a weekend.</div>
+      <div class="narrative">
+        <div class="narrative-step">
+          <div class="step-label">Problem</div>
+          <div class="step-text">Starting a company from scratch has 30+ discrete tasks across legal, finance, product, marketing, and ops. Most founders get stuck switching contexts between Stripe, Clerky, Figma, GitHub, and their bank — each switch costs hours.</div>
+        </div>
+        <div class="narrative-step">
+          <div class="step-label">What MAESTRO Can Build</div>
+          <div class="step-text">MAESTRO handled every domain in sequence: BeZa validated market sizing and drafted a one-page business plan; CELiA filed the Delaware LLC and EIN; hUXley built the landing page; SWEn deployed it; GauTaM set up the GTM stack; AshLey configured the founder's calendar and meeting templates. Each output fed the next without manual handoff.</div>
+        </div>
+        <div class="narrative-step">
+          <div class="step-label">Possible Outcome</div>
+          <div class="step-text">With MAESTRO orchestrating, a solo founder can expect a live product, a legal entity, a Stripe integration, and paying beta users within 72 hours — at a cost of $249, less than one hour of a law firm's time for just the legal work alone.</div>
+        </div>
+      </div>
+      <div class="artifact-label">Live Artifact — 72-Hour Launch Timeline</div>
+      <div class="timeline-wrap">
+        <div class="timeline">
+          <div class="tl-item">
+            <div class="tl-dot" style="background:#6366f1;">1</div>
+            <div class="tl-time">Hour 0</div>
+            <div class="tl-text">
+              <span class="tl-badge" style="background:#e0e7ff;color:#4338ca;">BeZa</span>
+              Market sizing complete ✓
+            </div>
+          </div>
+          <div class="tl-item">
+            <div class="tl-dot" style="background:#8b5cf6;">2</div>
+            <div class="tl-time">Hour 4</div>
+            <div class="tl-text">
+              <span class="tl-badge" style="background:#ede9fe;color:#6d28d9;">CELiA</span>
+              Delaware LLC filed ✓
+            </div>
+          </div>
+          <div class="tl-item">
+            <div class="tl-dot" style="background:#10b981;">3</div>
+            <div class="tl-time">Hour 12</div>
+            <div class="tl-text">
+              <span class="tl-badge" style="background:#d1fae5;color:#065f46;">hUXley</span>
+              Landing page live ✓
+            </div>
+          </div>
+          <div class="tl-item">
+            <div class="tl-dot" style="background:#0ea5e9;">4</div>
+            <div class="tl-time">Hour 18</div>
+            <div class="tl-text">
+              <span class="tl-badge" style="background:#e0f2fe;color:#0369a1;">SWEn</span>
+              Stripe + deploy ✓
+            </div>
+          </div>
+          <div class="tl-item">
+            <div class="tl-dot" style="background:#f97316;">5</div>
+            <div class="tl-time">Hour 24</div>
+            <div class="tl-text">
+              <span class="tl-badge" style="background:#ffedd5;color:#c2410c;">GauTaM</span>
+              GTM stack ready ✓
+            </div>
+          </div>
+          <div class="tl-item">
+            <div class="tl-dot" style="background:#f59e0b;">6</div>
+            <div class="tl-time">Hour 48</div>
+            <div class="tl-text">
+              <span class="tl-badge" style="background:#fef3c7;color:#92400e;">AshLey</span>
+              Calendar + templates ✓
+            </div>
+          </div>
+          <div class="tl-item">
+            <div class="tl-dot" style="background:#10b981;">7</div>
+            <div class="tl-time">Hour 72</div>
+            <div class="tl-text" style="font-weight:700;color:var(--accent);">
+              🚀 3 paying beta users
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="source-ref">
+        📎 Source: <a href="#">FRAIM · business-launch-workflow · fraim/ai-employee/jobs/</a>
+      </div>
+    </div>
+  </div>
+  <!-- Card 3: Enterprise Compliance Package -->
+  <div class="card" id="card3">
+    <div class="card-header" onclick="toggleCard(3)">
+      <div class="card-icon" style="background:#d1fae5;">🔒</div>
+      <div class="card-meta">
+        <div class="card-tag" style="color:#10b981;">Compliance Velocity</div>
+        <div class="card-title">SOC2 evidence package in 48 hours</div>
+        <div class="card-subtitle">FRAIM · soc2-evidence-management · compliance-sprint</div>
+      </div>
+      <div class="card-toggle">›</div>
+    </div>
+    <div class="card-body">
+      <div class="card-context">A B2B SaaS company needed a SOC2 Type I evidence package for an enterprise deal that required it in 5 business days.</div>
+      <div class="narrative">
+        <div class="narrative-step">
+          <div class="step-label">Problem</div>
+          <div class="step-text">SOC2 evidence collection spans 14 control categories: access control, incident response, change management, vendor management, and more. Manually collecting and formatting evidence from Slack, GitHub, AWS, and internal docs takes weeks.</div>
+        </div>
+        <div class="narrative-step">
+          <div class="step-label">What MAESTRO Can Build</div>
+          <div class="step-text">MAESTRO assigned each control category to the appropriate specialist: SEChar handled technical security controls (access logs, vulnerability scan reports, encryption configs), SWEn pulled code-change evidence from GitHub (PR review rate, deploy cadence, test coverage), MANdy documented the change-management policy and sprint governance, AshLey assembled the vendor inventory from contract records, CELiA drafted the information security policy.</div>
+        </div>
+        <div class="narrative-step">
+          <div class="step-label">Possible Outcome</div>
+          <div class="step-text">MAESTRO can deliver a complete SOC2 evidence package in 48 hours — typically enough to close an enterprise deal within a 5-day window. At $249 for MAESTRO's orchestration versus $15,000–$40,000 for traditional auditor-assisted preparation, the cost difference can be decisive for early-stage companies.</div>
+        </div>
+      </div>
+      <div class="artifact-label">Live Artifact — SOC2 Control Coverage Matrix</div>
+      <div class="soc2-wrap">
+        <table class="soc2-table">
+          <thead>
+            <tr>
+              <th>Control</th>
+              <th>Owner</th>
+              <th>Evidence</th>
+              <th>Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><span class="ctrl-code">CC6.1</span> Access Control</td>
+              <td><span class="owner-badge" style="background:#fee2e2;color:#b91c1c;">SEChar</span></td>
+              <td><span class="evidence-text">Access logs, IAM policy export</span></td>
+              <td><span class="status-dot-green"></span><span style="font-size:12px;font-weight:600;color:#10b981;">DONE</span></td>
+            </tr>
+            <tr>
+              <td><span class="ctrl-code">CC7.2</span> Monitoring</td>
+              <td><span class="owner-badge" style="background:#e0f2fe;color:#0369a1;">SWEn</span></td>
+              <td><span class="evidence-text">Alerting config, uptime report</span></td>
+              <td><span class="status-dot-green"></span><span style="font-size:12px;font-weight:600;color:#10b981;">DONE</span></td>
+            </tr>
+            <tr>
+              <td><span class="ctrl-code">CC8.1</span> Change Mgmt</td>
+              <td><span class="owner-badge" style="background:#ede9fe;color:#6d28d9;">MANdy</span></td>
+              <td><span class="evidence-text">PR review rate, sprint governance</span></td>
+              <td><span class="status-dot-green"></span><span style="font-size:12px;font-weight:600;color:#10b981;">DONE</span></td>
+            </tr>
+            <tr>
+              <td><span class="ctrl-code">CC9.1</span> Risk Assessment</td>
+              <td><span class="owner-badge" style="background:#fee2e2;color:#b91c1c;">SEChar</span></td>
+              <td><span class="evidence-text">Vuln scan, risk register</span></td>
+              <td><span class="status-dot-green"></span><span style="font-size:12px;font-weight:600;color:#10b981;">DONE</span></td>
+            </tr>
+            <tr>
+              <td><span class="ctrl-code">A1.1</span> Availability</td>
+              <td><span class="owner-badge" style="background:#e0f2fe;color:#0369a1;">SWEn</span></td>
+              <td><span class="evidence-text">Deploy cadence, coverage 94%</span></td>
+              <td><span class="status-dot-green"></span><span style="font-size:12px;font-weight:600;color:#10b981;">DONE</span></td>
+            </tr>
+            <tr>
+              <td><span class="ctrl-code">PI1.1</span> Processing Integrity</td>
+              <td><span class="owner-badge" style="background:#d1fae5;color:#065f46;">QAsm</span></td>
+              <td><span class="evidence-text">E2E test results, data validation</span></td>
+              <td><span class="status-dot-green"></span><span style="font-size:12px;font-weight:600;color:#10b981;">DONE</span></td>
+            </tr>
+            <tr>
+              <td><span class="ctrl-code">P1.1</span> Privacy</td>
+              <td><span class="owner-badge" style="background:#ede9fe;color:#5b21b6;">CELiA</span></td>
+              <td><span class="evidence-text">Privacy policy, data map</span></td>
+              <td><span class="status-dot-green"></span><span style="font-size:12px;font-weight:600;color:#10b981;">DONE</span></td>
+            </tr>
+            <tr>
+              <td><span class="ctrl-code">C1.1</span> Confidentiality</td>
+              <td><span class="owner-badge" style="background:#ede9fe;color:#5b21b6;">CELiA</span></td>
+              <td><span class="evidence-text">NDA log, encryption configs</span></td>
+              <td><span class="status-dot-green"></span><span style="font-size:12px;font-weight:600;color:#10b981;">DONE</span></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="source-ref">
+        📎 Source: <a href="#">FRAIM · soc2-evidence-management · fraim/ai-employee/jobs/soc2-evidence-management.md</a>
+      </div>
+    </div>
+  </div>
+</div>
+<footer class="portfolio-footer">
+  <div class="footer-sub">
+    Part of the <a href="/">FRAIM</a> · 18 AI employees available ·
+    <a href="/">View all employees</a>
+  </div>
+</footer>
+<script>
+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 ? '☾' : '☀';
+}
+if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+  document.documentElement.setAttribute('data-theme', 'dark');
+  document.querySelector('.theme-btn').textContent = '☀';
+}
+function toggleCard(num) {
+  const card = document.getElementById('card' + num);
+  const isOpen = card.classList.contains('open');
+  document.querySelectorAll('.card').forEach(c => c.classList.remove('open'));
+  if (!isOpen) { card.classList.add('open'); card.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); }
+}
+</script>
+</body>
+</html>