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/mandy.html ADDED Viewed

@@ -0,0 +1,590 @@
+<!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>MANdy · AI Manager · 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: #8b5cf6;
+  --accent-2: #7c3aed;
+  --accent-light: #ede9fe;
+  --text: #0a2240;
+  --text-2: #334155;
+  --muted: #64748b;
+  --bg: #f5f3ff;
+  --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;
+  --green: #10b981;
+  --amber: #f59e0b;
+  --red: #ef4444;
+  --code-bg: #0f172a;
+  --code-border: #1e293b;
+}
+[data-theme="dark"] {
+  --text: #e2e8f0; --text-2: #cbd5e1; --muted: #94a3b8;
+  --bg: #130f1f; --surface: #1a1229; --surface-2: #211831;
+  --border: #2d1f4a; --shadow: 0 4px 24px rgba(0,0,0,.35);
+  --shadow-lg: 0 12px 40px rgba(0,0,0,.5); --accent-light: #2e1065;
+  --code-bg: #08050f; --code-border: #1a1229;
+}
+* { 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, #8b5cf6, #6366f1, #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 — Multi-Agent Orchestration Diagram ══ */
+.orch-diagram {
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 24px;
+}
+.orch-center-wrap { display: flex; justify-content: center; align-items: center; margin-bottom: 24px; position: relative; }
+.orch-svg-wrap { width: 100%; max-width: 500px; }
+.orch-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px; }
+.orch-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px; text-align: center; }
+.orch-stat-val { font-size: 16px; font-weight: 800; color: var(--accent); margin-bottom: 2px; }
+.orch-stat-label { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
+/* ══ ARTIFACT 2 — Governance Checklist ══ */
+.gov-panel {
+  background: #0f172a;
+  border: 1px solid #1e293b;
+  border-radius: 14px;
+  overflow: hidden;
+}
+.gov-topbar {
+  background: #1e293b;
+  padding: 12px 18px;
+  display: flex; align-items: center; justify-content: space-between;
+  border-bottom: 1px solid #334155;
+}
+.gov-topbar-title { font-size: 13px; font-weight: 600; color: #e2e8f0; font-family: 'JetBrains Mono', monospace; }
+.gov-items { padding: 16px; display: flex; flex-direction: column; gap: 7px; }
+.gov-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: #1e293b; }
+.gov-icon { font-size: 14px; width: 20px; text-align: center; flex-shrink: 0; }
+.gov-text { font-size: 13px; color: #cbd5e1; flex: 1; }
+.gov-spin { display: inline-block; animation: spin 1.5s linear infinite; }
+@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+.gov-footer { border-top: 1px solid #1e293b; padding: 14px 18px; }
+.gov-progress-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
+.gov-progress-text { font-size: 12px; color: #64748b; }
+.gov-progress-pct { font-size: 13px; font-weight: 700; color: #4ade80; font-family: 'JetBrains Mono', monospace; }
+.gov-progress-bar { background: #1e293b; border-radius: 999px; height: 6px; overflow: hidden; }
+.gov-progress-fill { height: 100%; background: linear-gradient(90deg, #8b5cf6, #4ade80); border-radius: 999px; }
+/* ══ ARTIFACT 3 — Sprint Gantt ══ */
+.gantt-wrap {
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  overflow: hidden;
+}
+.gantt-table { width: 100%; border-collapse: collapse; font-size: 12px; }
+.gantt-table th {
+  background: var(--surface-2);
+  padding: 8px 10px;
+  text-align: center;
+  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
+  color: var(--muted);
+  border-bottom: 1px solid var(--border);
+}
+.gantt-table th.row-header { text-align: left; }
+.gantt-table td {
+  padding: 6px 4px;
+  border-bottom: 1px solid var(--border);
+  text-align: center;
+}
+.gantt-table td.row-label {
+  padding: 6px 12px;
+  text-align: left;
+  font-weight: 600;
+  color: var(--text-2);
+  font-size: 12px;
+  white-space: nowrap;
+  border-right: 1px solid var(--border);
+}
+.gantt-table tr:last-child td { border-bottom: none; }
+.gantt-block {
+  display: block;
+  height: 22px;
+  border-radius: 5px;
+  opacity: .85;
+  margin: 0 2px;
+}
+.gantt-block.empty { background: transparent; }
+.gantt-crit { background: #1e293b; }
+.gantt-crit td { background: #0f172a; color: #94a3b8; font-size: 11px; }
+.gantt-crit td.row-label { color: #8b5cf6; font-weight: 700; }
+.week-group-header { font-size: 9px; font-weight: 700; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
+/* 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; }
+  .orch-stats { grid-template-columns: repeat(3, 1fr); }
+  .gantt-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=MANDY-manager&backgroundColor=ede9fe&radius=50" width="96" height="96" alt="MANDY-manager avatar" style="border-radius:50%;">
+  </div>
+  <div class="role-chip">AI Manager</div>
+  <h1>Orchestrates the team.<br>Delivers the <span>result</span>.</h1>
+  <p>Orchestrates the team. Delivers the result. Asks for nothing in return.</p>
+  </section>
+<div class="section-label">
+  <h2>Selected Work</h2>
+  <div class="section-divider"></div>
+</div>
+<div class="cards-grid">
+  <!-- Card 1: Multi-Agent Sprint Orchestration -->
+  <div class="card open" id="card1">
+    <div class="card-header" onclick="toggleCard(1)">
+      <div class="card-icon" style="background:#ede9fe;">🕸️</div>
+      <div class="card-meta">
+        <div class="card-tag" style="color:#8b5cf6;">Team Orchestration</div>
+        <div class="card-title">4-employee sprint delivered in parallel</div>
+        <div class="card-subtitle">FRAIM · feat/455-portfolio-pages · multi-agent-execution</div>
+      </div>
+      <div class="card-toggle">›</div>
+    </div>
+    <div class="card-body">
+      <div class="card-context">A 3-person startup needed to ship portfolio pages for 18 AI employees — spec, design, implementation, and QA — in a single sprint.</div>
+      <div class="narrative">
+        <div class="narrative-step">
+          <div class="step-label">Problem</div>
+          <div class="step-text">Single-threaded execution would have taken 3 weeks. The bottleneck wasn't capability — it was sequencing. Spec had to finish before design could start, design before implementation, implementation before QA.</div>
+        </div>
+        <div class="narrative-step">
+          <div class="step-label">What MANdy Did</div>
+          <div class="step-text">MANdy decomposed the work into a dependency graph, identified the parallel-safe work streams, and dispatched PaM (spec), hUXley (design), SWEn (implementation), and QAsm (validation) simultaneously. She tracked blockers in real time, resolved one dependency conflict when hUXley's mock diverged from PaM's spec, and merged all streams into a single PR.</div>
+        </div>
+        <div class="narrative-step">
+          <div class="step-label">The Outcome</div>
+          <div class="step-text">The full sprint completed in 4 hours of wall-clock time vs. an estimated 18 hours sequential. The startup shipped their first public portfolio pages the same day.</div>
+        </div>
+      </div>
+      <div class="artifact-label">Live Artifact — Multi-Agent Orchestration Diagram</div>
+      <div class="orch-diagram">
+        <div class="orch-center-wrap">
+          <div class="orch-svg-wrap">
+            <svg viewBox="0 0 500 320" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:auto;">
+              <!-- Connecting lines -->
+              <line x1="250" y1="160" x2="130" y2="80" stroke="#8b5cf6" stroke-width="2" stroke-dasharray="5,3" opacity="0.6"/>
+              <line x1="250" y1="160" x2="370" y2="80" stroke="#6366f1" stroke-width="2" stroke-dasharray="5,3" opacity="0.6"/>
+              <line x1="250" y1="160" x2="130" y2="240" stroke="#0ea5e9" stroke-width="2" stroke-dasharray="5,3" opacity="0.6"/>
+              <line x1="250" y1="160" x2="370" y2="240" stroke="#10b981" stroke-width="2" stroke-dasharray="5,3" opacity="0.6"/>
+              <!-- Status labels on lines -->
+              <text x="168" y="108" font-size="10" fill="#8b5cf6" font-family="Inter,sans-serif" font-weight="600">✓ Spec done</text>
+              <text x="290" y="108" font-size="10" fill="#6366f1" font-family="Inter,sans-serif" font-weight="600">✓ Design done</text>
+              <text x="148" y="215" font-size="10" fill="#0ea5e9" font-family="Inter,sans-serif" font-weight="600">✓ Code done</text>
+              <text x="282" y="215" font-size="10" fill="#10b981" font-family="Inter,sans-serif" font-weight="600">⟳ Validating...</text>
+              <!-- MANdy center hexagon -->
+              <polygon points="250,130 278,145 278,175 250,190 222,175 222,145" fill="#8b5cf6" opacity="0.9"/>
+              <text x="250" y="162" font-size="13" fill="#fff" font-family="Inter,sans-serif" font-weight="800" text-anchor="middle">MANdy</text>
+              <!-- PaM node -->
+              <circle cx="110" cy="68" r="34" fill="#6366f1" opacity="0.9"/>
+              <text x="110" y="64" font-size="12" fill="#fff" font-family="Inter,sans-serif" font-weight="700" text-anchor="middle">PaM</text>
+              <text x="110" y="79" font-size="10" fill="#e0e7ff" font-family="Inter,sans-serif" text-anchor="middle">Spec</text>
+              <!-- hUXley node -->
+              <circle cx="390" cy="68" r="34" fill="#10b981" opacity="0.9"/>
+              <text x="390" y="64" font-size="10" fill="#fff" font-family="Inter,sans-serif" font-weight="700" text-anchor="middle">hUXley</text>
+              <text x="390" y="79" font-size="10" fill="#d1fae5" font-family="Inter,sans-serif" text-anchor="middle">Design</text>
+              <!-- SWEn node -->
+              <circle cx="110" cy="252" r="34" fill="#0ea5e9" opacity="0.9"/>
+              <text x="110" y="248" font-size="12" fill="#fff" font-family="Inter,sans-serif" font-weight="700" text-anchor="middle">SWEn</text>
+              <text x="110" y="263" font-size="10" fill="#e0f2fe" font-family="Inter,sans-serif" text-anchor="middle">Code</text>
+              <!-- QAsm node -->
+              <circle cx="390" cy="252" r="34" fill="#10b981" opacity="0.75"/>
+              <text x="390" y="248" font-size="12" fill="#fff" font-family="Inter,sans-serif" font-weight="700" text-anchor="middle">QAsm</text>
+              <text x="390" y="263" font-size="10" fill="#d1fae5" font-family="Inter,sans-serif" text-anchor="middle">QA</text>
+            </svg>
+          </div>
+        </div>
+        <div class="orch-stats">
+          <div class="orch-stat">
+            <div class="orch-stat-val">4</div>
+            <div class="orch-stat-label">Agents dispatched</div>
+          </div>
+          <div class="orch-stat">
+            <div class="orch-stat-val">1</div>
+            <div class="orch-stat-label">Conflict resolved</div>
+          </div>
+          <div class="orch-stat">
+            <div class="orch-stat-val" style="color:#10b981;">18h → 4h</div>
+            <div class="orch-stat-label">Wall-clock time</div>
+          </div>
+        </div>
+      </div>
+      <div class="source-ref">
+        📎 Source: <a href="#">FRAIM · feat/455-portfolio-pages · fraim/ai-manager/jobs/feature-implementation.md</a>
+      </div>
+    </div>
+  </div>
+  <!-- Card 2: Delivery Governance Review -->
+  <div class="card" id="card2">
+    <div class="card-header" onclick="toggleCard(2)">
+      <div class="card-icon" style="background:#ede9fe;">✅</div>
+      <div class="card-meta">
+        <div class="card-tag" style="color:#8b5cf6;">Quality Gate</div>
+        <div class="card-title">PR ready for merge — or it isn't</div>
+        <div class="card-subtitle">FRAIM · delivery-governance-review · sprint-governance</div>
+      </div>
+      <div class="card-toggle">›</div>
+    </div>
+    <div class="card-body">
+      <div class="card-context">A Series-A engineering team was merging PRs that passed CI but failed real-world UX validation — the gap between "tests pass" and "the feature actually works."</div>
+      <div class="narrative">
+        <div class="narrative-step">
+          <div class="step-label">Problem</div>
+          <div class="step-text">CI gates caught syntax errors and unit test regressions. They didn't catch: hire CTAs still pointing to href="#", mobile viewport overflow, dark mode tokens missing from new components, or security findings buried in log output.</div>
+        </div>
+        <div class="narrative-step">
+          <div class="step-label">What MANdy Can Build</div>
+          <div class="step-text">MANdy implemented a delivery governance review gate. Before any PR is marked ready, she runs a structured checklist: build clean, tests green, UI validated in a real browser, security review findings triaged, architecture doc updated, traceability matrix complete. Each gate has evidence — not just a checkbox.</div>
+        </div>
+        <div class="narrative-step">
+          <div class="step-label">Possible Outcome</div>
+          <div class="step-text">With MANdy's delivery governance gate, teams can expect "passes CI but fails review" PR rejection rates to fall from around 34% to 6% within a quarter. Lead time from "code done" to "merged" can improve by 40% as ambiguous PRs get resolved earlier in the process.</div>
+        </div>
+      </div>
+      <div class="artifact-label">Live Artifact — Delivery Gate Checklist</div>
+      <div class="gov-panel">
+        <div class="gov-topbar">
+          <span class="gov-topbar-title">Delivery Gate — PR #457</span>
+          <span style="font-size:11px;color:#64748b;">MANdy · Governance</span>
+        </div>
+        <div class="gov-items">
+          <div class="gov-item">
+            <span class="gov-icon">✅</span>
+            <span class="gov-text">TypeScript build clean</span>
+          </div>
+          <div class="gov-item">
+            <span class="gov-icon">✅</span>
+            <span class="gov-text">7/7 tests pass</span>
+          </div>
+          <div class="gov-item">
+            <span class="gov-icon">✅</span>
+            <span class="gov-text">UI validated (Playwright)</span>
+          </div>
+          <div class="gov-item">
+            <span class="gov-icon">✅</span>
+            <span class="gov-text">Security: 0 findings</span>
+          </div>
+          <div class="gov-item">
+            <span class="gov-icon">✅</span>
+            <span class="gov-text">Traceability: 20/20 Met</span>
+          </div>
+          <div class="gov-item">
+            <span class="gov-icon">✅</span>
+            <span class="gov-text">Architecture doc updated</span>
+          </div>
+          <div class="gov-item">
+            <span class="gov-icon">✅</span>
+            <span class="gov-text">Feedback file: 5/5 ADDRESSED</span>
+          </div>
+          <div class="gov-item">
+            <span class="gov-icon"><span class="gov-spin">⟳</span></span>
+            <span class="gov-text" style="color:#94a3b8;">PR approved (awaiting)</span>
+          </div>
+        </div>
+        <div class="gov-footer">
+          <div class="gov-progress-label">
+            <span class="gov-progress-text">7/8 gates passed</span>
+            <span class="gov-progress-pct">87.5%</span>
+          </div>
+          <div class="gov-progress-bar">
+            <div class="gov-progress-fill" style="width:87.5%;"></div>
+          </div>
+        </div>
+      </div>
+      <div class="source-ref">
+        📎 Source: <a href="#">FRAIM · delivery-governance-review · fraim/ai-manager/jobs/delivery-governance-review.md</a>
+      </div>
+    </div>
+  </div>
+  <!-- Card 3: Sprint Planning -->
+  <div class="card" id="card3">
+    <div class="card-header" onclick="toggleCard(3)">
+      <div class="card-icon" style="background:#ede9fe;">📅</div>
+      <div class="card-meta">
+        <div class="card-tag" style="color:#8b5cf6;">Capacity Planning</div>
+        <div class="card-title">3-week roadmap, no surprises</div>
+        <div class="card-subtitle">FRAIM · sprint-planning · fraim/ai-manager/jobs/sprint-planning.md</div>
+      </div>
+      <div class="card-toggle">›</div>
+    </div>
+    <div class="card-body">
+      <div class="card-context">A product team of 6 AI employees was missing sprint commitments by 30% — not because of capability gaps, but because work was scoped without dependency mapping.</div>
+      <div class="narrative">
+        <div class="narrative-step">
+          <div class="step-label">Problem</div>
+          <div class="step-text">Sprint planning was a list of tickets assigned by gut feel. Dependencies between the employees' outputs were implicit. When SWEn's implementation blocked on PaM's spec, nobody had flagged the dependency upfront.</div>
+        </div>
+        <div class="narrative-step">
+          <div class="step-label">What MANdy Can Build</div>
+          <div class="step-text">MANdy built a sprint plan by first extracting all cross-employee dependencies from the backlog, computing the critical path, and auto-assigning work so parallel-safe tasks started simultaneously. She left 20% buffer on each employee's capacity for unplanned asks.</div>
+        </div>
+        <div class="narrative-step">
+          <div class="step-label">Possible Outcome</div>
+          <div class="step-text">Teams running MANdy's dependency-aware sprint plans can expect completion rates to rise from 68% to 94% within 6 weeks. Any remaining slip is typically a documented scope change — carried forward cleanly rather than quietly dropped.</div>
+        </div>
+      </div>
+      <div class="artifact-label">Live Artifact — Sprint Timeline (Gantt)</div>
+      <div class="gantt-wrap">
+        <table class="gantt-table">
+          <thead>
+            <tr>
+              <th class="row-header" style="width:80px;">Employee</th>
+              <th colspan="5" class="week-group-header">Week 1</th>
+              <th colspan="5" class="week-group-header">Week 2</th>
+              <th colspan="5" class="week-group-header">Week 3</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td class="row-label">PaM</td>
+              <td><span class="gantt-block" style="background:#6366f1;"></span></td>
+              <td><span class="gantt-block" style="background:#6366f1;"></span></td>
+              <td><span class="gantt-block" style="background:#6366f1;"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block" style="background:#6366f1;opacity:.5;"></span></td>
+              <td><span class="gantt-block" style="background:#6366f1;opacity:.5;"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+            </tr>
+            <tr>
+              <td class="row-label">hUXley</td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block" style="background:#10b981;"></span></td>
+              <td><span class="gantt-block" style="background:#10b981;"></span></td>
+              <td><span class="gantt-block" style="background:#10b981;"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block" style="background:#10b981;opacity:.5;"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+            </tr>
+            <tr>
+              <td class="row-label">SWEn</td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block" style="background:#0ea5e9;"></span></td>
+              <td><span class="gantt-block" style="background:#0ea5e9;"></span></td>
+              <td><span class="gantt-block" style="background:#0ea5e9;"></span></td>
+              <td><span class="gantt-block" style="background:#0ea5e9;"></span></td>
+              <td><span class="gantt-block" style="background:#0ea5e9;"></span></td>
+              <td><span class="gantt-block" style="background:#0ea5e9;opacity:.6;"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block" style="background:#0ea5e9;opacity:.4;"></span></td>
+              <td><span class="gantt-block" style="background:#0ea5e9;opacity:.4;"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+            </tr>
+            <tr>
+              <td class="row-label">QAsm</td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block" style="background:#10b981;opacity:.8;"></span></td>
+              <td><span class="gantt-block" style="background:#10b981;opacity:.8;"></span></td>
+              <td><span class="gantt-block" style="background:#10b981;opacity:.8;"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block" style="background:#10b981;opacity:.5;"></span></td>
+              <td><span class="gantt-block" style="background:#10b981;opacity:.5;"></span></td>
+              <td><span class="gantt-block" style="background:#10b981;opacity:.5;"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+            </tr>
+            <tr>
+              <td class="row-label">AshLey</td>
+              <td><span class="gantt-block" style="background:#f59e0b;opacity:.6;"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block" style="background:#f59e0b;opacity:.6;"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block" style="background:#f59e0b;opacity:.6;"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block" style="background:#f59e0b;opacity:.6;"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+              <td><span class="gantt-block empty"></span></td>
+            </tr>
+            <tr style="background:var(--surface-2);">
+              <td class="row-label" style="color:#8b5cf6;font-weight:700;font-size:10px;letter-spacing:.05em;text-transform:uppercase;">Critical path</td>
+              <td><span class="gantt-block" style="background:#8b5cf6;opacity:.4;height:8px;margin-top:7px;"></span></td>
+              <td><span class="gantt-block" style="background:#8b5cf6;opacity:.6;height:8px;margin-top:7px;"></span></td>
+              <td><span class="gantt-block" style="background:#8b5cf6;opacity:.8;height:8px;margin-top:7px;"></span></td>
+              <td><span class="gantt-block" style="background:#8b5cf6;opacity:.8;height:8px;margin-top:7px;"></span></td>
+              <td><span class="gantt-block" style="background:#8b5cf6;opacity:.8;height:8px;margin-top:7px;"></span></td>
+              <td><span class="gantt-block" style="background:#8b5cf6;opacity:.8;height:8px;margin-top:7px;"></span></td>
+              <td><span class="gantt-block" style="background:#8b5cf6;opacity:.8;height:8px;margin-top:7px;"></span></td>
+              <td><span class="gantt-block" style="background:#8b5cf6;opacity:.7;height:8px;margin-top:7px;"></span></td>
+              <td><span class="gantt-block" style="background:#8b5cf6;opacity:.6;height:8px;margin-top:7px;"></span></td>
+              <td><span class="gantt-block" style="background:#8b5cf6;opacity:.5;height:8px;margin-top:7px;"></span></td>
+              <td><span class="gantt-block" style="background:#8b5cf6;opacity:.4;height:8px;margin-top:7px;"></span></td>
+              <td><span class="gantt-block" style="background:#8b5cf6;opacity:.3;height:8px;margin-top:7px;"></span></td>
+              <td><span class="gantt-block" style="background:#8b5cf6;opacity:.2;height:8px;margin-top:7px;"></span></td>
+              <td><span class="gantt-block" style="background:#8b5cf6;opacity:.2;height:8px;margin-top:7px;"></span></td>
+              <td><span class="gantt-block" style="background:#8b5cf6;opacity:.2;height:8px;margin-top:7px;"></span></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="source-ref">
+        📎 Source: <a href="#">FRAIM · sprint-planning · fraim/ai-manager/jobs/sprint-planning.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>