npm - fraim-framework - Versions diffs - 2.0.166 → 2.0.168 - Mend

fraim-framework 2.0.166 → 2.0.168

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (60) hide show

package/dist/src/ai-hub/catalog.js +43 -36
package/dist/src/ai-hub/server.js +28 -5
package/dist/src/cli/commands/init-project.js +1 -98
package/dist/src/cli/commands/manager.js +40 -0
package/dist/src/cli/commands/sync.js +17 -21
package/dist/src/cli/fraim.js +2 -0
package/dist/src/cli/utils/github-workflow-sync.js +12 -146
package/dist/src/cli/utils/manager-pack-sync.js +188 -0
package/dist/src/cli/utils/manager-publish.js +76 -0
package/dist/src/cli/utils/user-config.js +20 -0
package/dist/src/core/config-loader.js +9 -5
package/dist/src/core/fraim-config-schema.generated.js +85 -31
package/dist/src/core/manager-pack.js +26 -0
package/dist/src/core/utils/local-registry-resolver.js +8 -1
package/dist/src/first-run/install-state.js +1 -0
package/dist/src/first-run/server.js +9 -0
package/dist/src/first-run/session-service.js +117 -23
package/dist/src/first-run/types.js +2 -5
package/dist/src/local-mcp-server/learning-context-builder.js +45 -8
package/dist/src/local-mcp-server/stdio-server.js +28 -0
package/index.js +1 -1
package/package.json +4 -1
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 +199 -5
package/public/ai-hub/styles.css +28 -0
package/public/first-run/index.html +1 -1
package/public/first-run/script.js +459 -530
package/public/first-run/styles.css +288 -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/dist/src/ai-hub/word-sideload.js +0 -95
package/dist/src/cli/commands/test-mcp.js +0 -171
package/dist/src/cli/setup/first-run.js +0 -242
package/dist/src/core/config-writer.js +0 -75
package/dist/src/core/utils/job-aliases.js +0 -47
package/dist/src/core/utils/workflow-parser.js +0 -174

package/public/portfolio/deidre.html ADDED Viewed

@@ -0,0 +1,642 @@
+<!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>DEIdre · AI Inclusion Leader · 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: #7c3aed;
+  --accent-2: #6d28d9;
+  --accent-light: #ede9fe;
+  --text: #1e1533;
+  --text-2: #334155;
+  --muted: #64748b;
+  --bg: #f5f3ff;
+  --surface: #ffffff;
+  --surface-2: #f8fafc;
+  --border: #e2e8f0;
+  --shadow: 0 4px 24px rgba(30,21,51,.08);
+  --shadow-lg: 0 12px 40px rgba(30,21,51,.14);
+  --radius: 18px;
+  --radius-sm: 10px;
+  --green: #10b981;
+  --purple: #8b5cf6;
+  --amber: #f59e0b;
+  --red: #ef4444;
+  --code-bg: #0f172a;
+  --code-border: #1e293b;
+}
+[data-theme="dark"] {
+  --text: #e2e8f0; --text-2: #cbd5e1; --muted: #94a3b8;
+  --bg: #100c1a; --surface: #1a1228; --surface-2: #20172e;
+  --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: #07040e; --code-border: #1a1228;
+}
+* { 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, #7c3aed, #ec4899, #f97316); 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.65; padding: 14px 16px; background: var(--surface-2); border-radius: var(--radius-sm); border-left: 3px solid var(--accent); }
+.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; }
+.card-hire-cta { margin-top: 20px; display: flex; justify-content: flex-end; }
+/* ══ ARTIFACT 1 — Equity Analysis Dashboard ══ */
+.equity-dashboard {
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  overflow: hidden;
+}
+.equity-header {
+  padding: 14px 20px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  display: flex; align-items: center; justify-content: space-between;
+}
+.equity-title { font-size: 13px; font-weight: 700; color: var(--text); }
+.equity-period { font-size: 11px; color: var(--muted); }
+.equity-body { padding: 20px; }
+.equity-chart { display: flex; flex-direction: column; gap: 18px; margin-bottom: 16px; }
+.equity-level-row { }
+.equity-level-label { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; }
+.equity-level-sub { font-size: 10px; color: var(--muted); font-weight: 400; }
+.equity-bars { display: flex; flex-direction: column; gap: 6px; }
+.equity-bar-row { display: flex; align-items: center; gap: 10px; }
+.equity-bar-legend { font-size: 11px; color: var(--muted); width: 60px; flex-shrink: 0; }
+.equity-bar-track { flex: 1; height: 14px; background: var(--border); border-radius: 999px; overflow: hidden; position: relative; }
+.equity-bar-fill { height: 100%; border-radius: 999px; transition: width .3s; }
+.equity-bar-pct { font-size: 11px; font-weight: 700; color: var(--text); width: 36px; text-align: right; flex-shrink: 0; font-family: 'JetBrains Mono', monospace; }
+.equity-annotation {
+  display: flex; align-items: flex-start; gap: 8px;
+  background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.25);
+  border-radius: 8px; padding: 10px 14px; margin-bottom: 14px;
+}
+.equity-annotation-icon { font-size: 14px; flex-shrink: 0; }
+.equity-annotation-text { font-size: 12px; color: var(--text-2); line-height: 1.5; }
+.equity-annotation-text strong { color: var(--text); }
+.equity-root-cause {
+  padding: 10px 14px;
+  background: rgba(124,58,237,.06); border: 1px solid rgba(124,58,237,.15);
+  border-radius: 8px; font-size: 12px; color: var(--text-2); line-height: 1.5;
+}
+.equity-root-cause strong { color: var(--accent); }
+/* ══ ARTIFACT 2 — DEI Toolkit Card ══ */
+.toolkit-card {
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  overflow: hidden;
+}
+.toolkit-header {
+  padding: 14px 20px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+}
+.toolkit-title { font-size: 13px; font-weight: 700; color: var(--text); }
+.toolkit-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
+.toolkit-section { }
+.toolkit-section-bar {
+  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
+}
+.toolkit-section-stripe {
+  width: 4px; height: 20px; border-radius: 2px; flex-shrink: 0;
+}
+.toolkit-section-name { font-size: 12px; font-weight: 700; color: var(--text); }
+.toolkit-items { display: flex; flex-direction: column; gap: 6px; padding-left: 14px; }
+.toolkit-item { font-size: 12px; color: var(--text-2); display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
+.toolkit-item-dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
+.toolkit-divider { height: 1px; background: var(--border); }
+.belonging-pulse {
+  padding: 14px 16px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+}
+.belonging-label { font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .06em; }
+.belonging-question { font-size: 12px; color: var(--text-2); margin-bottom: 10px; font-style: italic; }
+.belonging-scale { display: flex; gap: 4px; align-items: center; margin-bottom: 8px; }
+.scale-pip {
+  flex: 1; height: 8px; border-radius: 3px;
+}
+.belonging-score { font-size: 13px; font-weight: 700; text-align: center; }
+/* ══ ARTIFACT 3 — Algorithmic Bias Audit ══ */
+.bias-dashboard {
+  background: #0f172a;
+  border: 1px solid #1e293b;
+  border-radius: 14px;
+  overflow: hidden;
+}
+.bias-topbar {
+  background: #1e293b; padding: 12px 18px;
+  display: flex; align-items: center; justify-content: space-between;
+  border-bottom: 1px solid #334155;
+}
+.bias-topbar-title { font-size: 13px; font-weight: 700; color: #e2e8f0; font-family: 'JetBrains Mono', monospace; }
+.bias-table { width: 100%; border-collapse: collapse; }
+.bias-table th {
+  padding: 8px 18px; font-size: 10px; font-weight: 700; letter-spacing: .08em;
+  text-transform: uppercase; color: #475569; text-align: left;
+  border-bottom: 1px solid #1e293b;
+}
+.bias-table td {
+  padding: 11px 18px; font-size: 12px; color: #94a3b8;
+  border-bottom: 1px solid #0d1117;
+  font-family: 'JetBrains Mono', monospace;
+}
+.bias-table tr:last-child td { border-bottom: none; }
+.bias-table td:first-child { color: #e2e8f0; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12px; }
+.bias-status-badge {
+  display: inline-flex; align-items: center; gap: 4px;
+  border-radius: 6px; padding: 3px 8px;
+  font-size: 10px; font-weight: 800; letter-spacing: .04em;
+  font-family: 'Inter', sans-serif;
+}
+.bs-ok { background: rgba(16,185,129,.15); color: #34d399; border: 1px solid rgba(16,185,129,.25); }
+.bs-warn { background: rgba(245,158,11,.15); color: #fbbf24; border: 1px solid rgba(245,158,11,.25); }
+.bs-bad { background: rgba(239,68,68,.15); color: #f87171; border: 1px solid rgba(239,68,68,.25); }
+.bias-threshold-note {
+  padding: 10px 18px; background: rgba(124,58,237,.08);
+  border-top: 1px solid #1e293b;
+  font-size: 11px; color: #a78bfa;
+  font-family: 'JetBrains Mono', monospace;
+  display: flex; align-items: center; gap: 8px;
+}
+.bias-before-after {
+  padding: 12px 18px; background: #1e293b;
+  border-top: 1px solid #334155;
+  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
+}
+.ba-label { font-size: 11px; color: #64748b; }
+.ba-before { font-size: 13px; font-weight: 800; color: #f87171; font-family: 'JetBrains Mono', monospace; }
+.ba-arrow { font-size: 14px; color: #475569; }
+.ba-after { font-size: 13px; font-weight: 800; color: #4ade80; font-family: 'JetBrains Mono', monospace; }
+.ba-desc { font-size: 11px; color: #475569; }
+/* 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; }
+}
+</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=DEIDRE-inclusion-leader&backgroundColor=e9d5ff&radius=50" width="96" height="96" alt="DEIDRE-inclusion-leader avatar" style="border-radius:50%;">
+  </div>
+  <div class="role-chip">AI Inclusion Leader</div>
+  <h1>Data-driven inclusion.<br><span>Policies that work.</span> Teams that stay.</h1>
+  <p>DEIdre finds the process gaps nobody measured, builds onboarding toolkits that cut early attrition, and audits hiring algorithms for disparate impact — before they become an equity and inclusion issue.</p>
+  </section>
+<div class="section-label">
+  <h2>Selected Work</h2>
+  <div class="section-divider"></div>
+</div>
+<div class="cards-grid">
+  <!-- Card 1: Equity Pattern Analysis -->
+  <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:#7c3aed;">Inclusion Analytics</div>
+        <div class="card-title">The promotion gap nobody was measuring</div>
+        <div class="card-subtitle">FRAIM · equity-pattern-analysis · fraim/ai-employee/jobs/</div>
+      </div>
+      <div class="card-toggle">›</div>
+    </div>
+    <div class="card-body">
+      <div class="card-context">A 120-person tech company wanted to make hiring and performance processes more inclusive, but the team had no shared baseline for where language, workflows, and tooling were creating friction.</div>
+      <div class="narrative">
+        <div class="narrative-step">
+          <div class="step-label">Why the gaps stay hidden</div>
+          <div class="step-text">Inclusive-process gaps rarely show up as one dramatic failure. They accumulate across job descriptions, ATS workflows, interview packets, and performance-review templates — each one small enough to miss, but together they create a noticeably different employee experience.</div>
+        </div>
+        <div class="narrative-step">
+          <div class="step-label">What DEIdre Can Build</div>
+          <div class="step-text">DEIdre ran an inclusive-process audit across job descriptions, recruiter intake, interview rubrics, and performance-review language. The audit highlighted where the company lacked inclusive wording standards, where managers were improvising, and where systems did not support the experience the company said it wanted to create.</div>
+        </div>
+        <div class="narrative-step">
+          <div class="step-label">Possible Outcome</div>
+          <div class="step-text">DEIdre can turn that audit into an action plan leadership can actually use: inclusive language standards, ATS workflow fixes, and manager-ready templates. Teams that address these process gaps early typically ship clearer job posts, cleaner interview loops, and performance reviews that feel more consistent and respectful.</div>
+        </div>
+      </div>
+      <div class="artifact-label">Live Artifact — Inclusive Process Review Dashboard</div>
+      <div class="equity-dashboard">
+        <div class="equity-header">
+          <span class="equity-title">Inclusive Process Coverage — 6 Workflow Audit</span>
+          <span class="equity-period">Q2 2026 · 6 workflows reviewed</span>
+        </div>
+        <div class="equity-body">
+          <div class="equity-chart">
+            <!-- Job Descriptions -->
+            <div class="equity-level-row">
+              <div class="equity-level-label">
+                Job descriptions
+                <span class="equity-level-sub">Inclusive language standards missing from the authoring flow</span>
+              </div>
+              <div class="equity-bars">
+                <div class="equity-bar-row">
+                  <span class="equity-bar-legend">Before audit</span>
+                  <div class="equity-bar-track">
+                    <div class="equity-bar-fill" style="width:42%;background:#f59e0b;"></div>
+                  </div>
+                  <span class="equity-bar-pct" style="color:#f59e0b;">42%</span>
+                </div>
+                <div class="equity-bar-row">
+                  <span class="equity-bar-legend">With checklist</span>
+                  <div class="equity-bar-track">
+                    <div class="equity-bar-fill" style="width:91%;background:#10b981;"></div>
+                  </div>
+                  <span class="equity-bar-pct">91%</span>
+                </div>
+              </div>
+            </div>
+            <!-- ATS Pronoun Support -->
+            <div class="equity-level-row">
+              <div class="equity-level-label">
+                ATS pronoun support
+                <span class="equity-level-sub" style="color:#f59e0b;">⚠ Candidate preference fields were inconsistent across forms</span>
+              </div>
+              <div class="equity-bars">
+                <div class="equity-bar-row">
+                  <span class="equity-bar-legend">Current state</span>
+                  <div class="equity-bar-track">
+                    <div class="equity-bar-fill" style="width:14%;background:#f59e0b;"></div>
+                  </div>
+                  <span class="equity-bar-pct" style="color:#f59e0b;">14%</span>
+                </div>
+                <div class="equity-bar-row">
+                  <span class="equity-bar-legend">Recommended state</span>
+                  <div class="equity-bar-track">
+                    <div class="equity-bar-fill" style="width:100%;background:#10b981;"></div>
+                  </div>
+                  <span class="equity-bar-pct">100%</span>
+                </div>
+              </div>
+            </div>
+            <!-- Performance Reviews -->
+            <div class="equity-level-row">
+              <div class="equity-level-label">
+                Performance reviews
+                <span class="equity-level-sub">Manager templates used inconsistent language and examples</span>
+              </div>
+              <div class="equity-bars">
+                <div class="equity-bar-row">
+                  <span class="equity-bar-legend">Current guidance</span>
+                  <div class="equity-bar-track">
+                    <div class="equity-bar-fill" style="width:38%;background:#f59e0b;"></div>
+                  </div>
+                  <span class="equity-bar-pct" style="color:#f59e0b;">38%</span>
+                </div>
+                <div class="equity-bar-row">
+                  <span class="equity-bar-legend">With updated templates</span>
+                  <div class="equity-bar-track">
+                    <div class="equity-bar-fill" style="width:88%;background:#10b981;"></div>
+                  </div>
+                  <span class="equity-bar-pct">88%</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="equity-annotation">
+            <span class="equity-annotation-icon">⚠️</span>
+            <span class="equity-annotation-text"><strong>The largest gaps were process-design gaps, not policy gaps.</strong> The company had good intent, but no shared standard for inclusive job-description language, candidate-preference capture, or manager review wording. That left every team to improvise.</span>
+          </div>
+          <div class="equity-root-cause">
+            <strong>Root cause identified:</strong> No shared inclusive-language standard across hiring, onboarding, and review workflows. Fix: add a review checklist, ATS pronoun guidance, and updated manager templates before the next hiring cycle.
+          </div>
+        </div>
+      </div>
+      <div class="source-ref">
+        📎 Source: <a href="#">FRAIM · equity-pattern-analysis · fraim/ai-employee/jobs/equity-pattern-analysis.md</a>
+      </div>
+      <div class="card-hire-cta">
+      </div>
+    </div>
+  </div>
+  <!-- Card 2: DEI Toolkit Creation -->
+  <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:#7c3aed;">Inclusion Infrastructure</div>
+        <div class="card-title">The onboarding that made new hires feel like they belonged</div>
+        <div class="card-subtitle">FRAIM · dei-toolkit-creation · fraim/ai-employee/jobs/</div>
+      </div>
+      <div class="card-toggle">›</div>
+    </div>
+    <div class="card-body">
+      <div class="card-context">A 60-person startup was onboarding 15 new employees per quarter but saw a higher 6-month attrition rate for employees from underrepresented backgrounds (28% vs. 9% overall).</div>
+      <div class="narrative">
+        <div class="narrative-step">
+          <div class="step-label">The first-90-days friction</div>
+          <div class="step-text">Inclusion failures in the first 90 days are rarely dramatic — they're a series of small frictions that compound. An ERG that's invitation-only and nobody told you about. A team tradition that assumes you can stay late on Fridays. A Slack channel where all the real work discussions happen but you weren't added because you didn't know to ask.</div>
+        </div>
+        <div class="narrative-step">
+          <div class="step-label">What DEIdre Can Build</div>
+          <div class="step-text">DEIdre built an inclusion toolkit for the onboarding process: a structured "inclusion map" showing which communities, channels, and informal networks existed and how to access them; a checklist of inclusion-relevant onboarding steps for managers; and a Day-30 pulse survey specifically asking about belonging signals.</div>
+        </div>
+        <div class="narrative-step">
+          <div class="step-label">Possible Outcome</div>
+          <div class="step-text">Organizations that deploy DEIdre's onboarding toolkit can see 6-month attrition for underrepresented employees fall from the high 20s to around 11% within 2 cohorts. Day-30 belonging scores often average 7.8/10 once a baseline is established — and managers typically adopt the toolkit independently once they see the results.</div>
+        </div>
+      </div>
+      <div class="artifact-label">Live Artifact — Equity and Inclusion Onboarding Toolkit</div>
+      <div class="toolkit-card">
+        <div class="toolkit-header">
+          <span class="toolkit-title">Inclusion Onboarding Toolkit — 90-Day Structure</span>
+        </div>
+        <div class="toolkit-body">
+          <!-- Section 1: Inclusion Map -->
+          <div class="toolkit-section">
+            <div class="toolkit-section-bar">
+              <div class="toolkit-section-stripe" style="background:#7c3aed;"></div>
+              <span class="toolkit-section-name">1 — Inclusion Map</span>
+            </div>
+            <div class="toolkit-items">
+              <div class="toolkit-item">
+                <div class="toolkit-item-dot" style="background:#7c3aed;"></div>
+                <span>Communities ERG: 4 employee resource groups (Women in Tech, LGBTQ+ Allies, Latinx Network, Black@Company)</span>
+              </div>
+              <div class="toolkit-item">
+                <div class="toolkit-item-dot" style="background:#7c3aed;"></div>
+                <span>Channels: #diversity, #underrepresented-voices, #accessibility-accommodations</span>
+              </div>
+              <div class="toolkit-item">
+                <div class="toolkit-item-dot" style="background:#7c3aed;"></div>
+                <span>Informal networks: Monthly coffee roulette (opt-in, cross-functional pairing)</span>
+              </div>
+            </div>
+          </div>
+          <div class="toolkit-divider"></div>
+          <!-- Section 2: Manager Checklist -->
+          <div class="toolkit-section">
+            <div class="toolkit-section-bar">
+              <div class="toolkit-section-stripe" style="background:#10b981;"></div>
+              <span class="toolkit-section-name">2 — Manager Checklist</span>
+            </div>
+            <div class="toolkit-items">
+              <div class="toolkit-item">
+                <span>✅</span>
+                <span>ERG intro within Day 3 — share the inclusion map, make introductions</span>
+              </div>
+              <div class="toolkit-item">
+                <span>✅</span>
+                <span>Accessibility check Day 1 — confirm accommodations, workspace setup, tooling needs</span>
+              </div>
+              <div class="toolkit-item">
+                <span>✅</span>
+                <span>30-day check-in scheduled — structured agenda: what's working, what's friction</span>
+              </div>
+              <div class="toolkit-item">
+                <span>⬜</span>
+                <span style="color:var(--muted);">Day-30 pulse survey sent (pending Day 30)</span>
+              </div>
+            </div>
+          </div>
+          <div class="toolkit-divider"></div>
+          <!-- Section 3: Belonging Pulse -->
+          <div class="belonging-pulse">
+            <div class="belonging-label">3 — Belonging Pulse (Day 30)</div>
+            <div class="belonging-question">"I feel my perspective is included in team discussions."</div>
+            <div class="belonging-scale">
+              <span style="font-size:10px;color:var(--muted);margin-right:4px;">1</span>
+              <div class="scale-pip" style="background:#ef4444;opacity:.5;"></div>
+              <div class="scale-pip" style="background:#f97316;opacity:.5;"></div>
+              <div class="scale-pip" style="background:#eab308;opacity:.5;"></div>
+              <div class="scale-pip" style="background:#84cc16;opacity:.6;"></div>
+              <div class="scale-pip" style="background:#22c55e;opacity:.7;"></div>
+              <div class="scale-pip" style="background:#10b981;opacity:.8;"></div>
+              <div class="scale-pip" style="background:#06b6d4;opacity:.85;"></div>
+              <div class="scale-pip" style="background:#6366f1;opacity:.9;"></div>
+              <div class="scale-pip" style="background:#7c3aed;"></div>
+              <div class="scale-pip" style="background:#7c3aed;"></div>
+              <span style="font-size:10px;color:var(--muted);margin-left:4px;">10</span>
+            </div>
+            <div class="belonging-score" style="color:#7c3aed;">
+              7.8 avg &nbsp;·&nbsp; <span style="font-size:11px;color:var(--muted);font-weight:400;">vs 5.2 before toolkit (no prior baseline)</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="source-ref">
+        📎 Source: <a href="#">FRAIM · dei-toolkit-creation · fraim/ai-employee/jobs/dei-toolkit-creation.md</a>
+      </div>
+      <div class="card-hire-cta">
+      </div>
+    </div>
+  </div>
+  <!-- Card 3: AI Governance for Inclusion -->
+  <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:#7c3aed;">Responsible AI</div>
+        <div class="card-title">The hiring algorithm that had a bias problem it didn't know about</div>
+        <div class="card-subtitle">FRAIM · ai-governance-for-inclusion · fraim/ai-employee/jobs/</div>
+      </div>
+      <div class="card-toggle">›</div>
+    </div>
+    <div class="card-body">
+      <div class="card-context">A company was using an ML-based resume screening tool for engineering roles for 18 months. It was considered a time-saver. Nobody had audited it for disparate impact.</div>
+      <div class="narrative">
+        <div class="narrative-step">
+          <div class="step-label">Invisible by design</div>
+          <div class="step-text">Algorithmic bias in hiring is invisible by design — the algorithm doesn't explain itself, and the outcomes look like individual decisions rather than a systematic pattern. The tool was screening in 84% of applicants who attended specific universities. Those universities had 14% underrepresented enrollment.</div>
+        </div>
+        <div class="narrative-step">
+          <div class="step-label">What DEIdre Can Build</div>
+          <div class="step-text">DEIdre ran an AI governance audit: extracted pass/fail rates from the screening tool across university tier, geographic region, and inferred demographic proxies, calculated disparate impact ratios (under 0.80 = adverse impact under the 4/5ths rule), and identified the specific features driving bias — university name was a top-3 feature, with the list skewed toward elite private schools.</div>
+        </div>
+        <div class="narrative-step">
+          <div class="step-label">Possible Outcome</div>
+          <div class="step-text">When DEIdre's audit identifies bias-introducing features, vendors can often be persuaded to re-weight or replace them. Disparate impact ratios can improve from 0.61 to 0.87 with targeted feature changes — helping organizations avoid EEOC risk while often improving candidate pool diversity by 30%+.</div>
+        </div>
+      </div>
+      <div class="artifact-label">Live Artifact — Algorithmic Bias Audit Results</div>
+      <div class="bias-dashboard">
+        <div class="bias-topbar">
+          <span class="bias-topbar-title">AI Resume Screening — Bias Audit</span>
+          <span style="font-size:11px;color:#475569;">18-month dataset · n = 4,200 applicants</span>
+        </div>
+        <table class="bias-table">
+          <thead>
+            <tr>
+              <th>Group</th>
+              <th>Pass Rate</th>
+              <th>Impact Ratio</th>
+              <th>Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Elite private university</td>
+              <td>84%</td>
+              <td>1.00 (baseline)</td>
+              <td><span class="bias-status-badge bs-ok">✓ OK</span></td>
+            </tr>
+            <tr>
+              <td>State university</td>
+              <td>71%</td>
+              <td>0.85</td>
+              <td><span class="bias-status-badge bs-warn">⚠ Monitor</span></td>
+            </tr>
+            <tr>
+              <td>Community college / online</td>
+              <td>51%</td>
+              <td>0.61</td>
+              <td><span class="bias-status-badge bs-bad">❌ Adverse impact</span></td>
+            </tr>
+          </tbody>
+        </table>
+        <div class="bias-threshold-note">
+          4/5ths rule threshold: 0.80 &nbsp;|&nbsp; Groups below 0.80 trigger adverse impact review under EEOC guidelines
+        </div>
+        <div class="bias-before-after">
+          <span class="ba-label">Before re-weighting:</span>
+          <span class="ba-before">0.61</span>
+          <span class="ba-arrow">→</span>
+          <span class="ba-label">After re-weighting:</span>
+          <span class="ba-after">0.87</span>
+          <span class="ba-desc">&nbsp;· Candidate pool diversity +31% · EEOC exposure resolved</span>
+        </div>
+      </div>
+      <div class="source-ref">
+        📎 Source: <a href="#">FRAIM · ai-governance-for-inclusion · fraim/ai-employee/jobs/ai-governance-for-inclusion.md</a>
+      </div>
+      <div class="card-hire-cta">
+      </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="/">Back to FRAIM</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>