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

fraim 2.0.166 → 2.0.167

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

Files changed (42) hide show

package/dist/src/ai-hub/catalog.js +20 -27
package/dist/src/ai-hub/server.js +418 -2
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/fraim-config-schema.generated.js +0 -21
package/dist/src/core/utils/local-registry-resolver.js +8 -1
package/package.json +5 -1
package/public/ai-hub/index.html +81 -0
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/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/casey.html ADDED Viewed

@@ -0,0 +1,568 @@
+<!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>CaSey · AI Customer Success + Support · 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: #06b6d4;
+  --accent-2: #0891b2;
+  --accent-light: #cffafe;
+  --text: #0a2240;
+  --text-2: #334155;
+  --muted: #64748b;
+  --bg: #ecfeff;
+  --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;
+  --purple: #8b5cf6;
+  --amber: #f59e0b;
+  --red: #ef4444;
+  --code-bg: #0f172a;
+  --code-border: #1e293b;
+}
+[data-theme="dark"] {
+  --text: #e2e8f0; --text-2: #cbd5e1; --muted: #94a3b8;
+  --bg: #061318; --surface: #0a1f26; --surface-2: #0d2830;
+  --border: #1e3f4f; --shadow: 0 4px 24px rgba(0,0,0,.35);
+  --shadow-lg: 0 12px 40px rgba(0,0,0,.5); --accent-light: #164e63;
+  --code-bg: #020c10; --code-border: #0a1f26;
+}
+* { 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, #06b6d4, #10b981, #6366f1); 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 — Customer Health Dashboard ══ */
+.health-dashboard {
+  background: #0f172a;
+  border-radius: 14px;
+  overflow: hidden;
+  border: 1px solid #1e293b;
+}
+.health-topbar {
+  background: #1e293b;
+  padding: 12px 18px;
+  display: flex; align-items: center; justify-content: space-between;
+  border-bottom: 1px solid #334155;
+}
+.health-topbar-title { font-size: 13px; font-weight: 700; color: #e2e8f0; font-family: 'JetBrains Mono', monospace; }
+.health-stats-row {
+  display: flex; gap: 12px; padding: 14px 18px;
+  border-bottom: 1px solid #1e293b;
+  flex-wrap: wrap;
+}
+.health-badge {
+  display: inline-flex; align-items: center; gap: 6px;
+  border-radius: 999px; padding: 5px 14px;
+  font-size: 12px; font-weight: 700;
+}
+.health-badge.good { background: rgba(16,185,129,.15); color: #34d399; border: 1px solid rgba(16,185,129,.3); }
+.health-badge.warn { background: rgba(245,158,11,.15); color: #fbbf24; border: 1px solid rgba(245,158,11,.3); }
+.health-badge.risk { background: rgba(239,68,68,.15); color: #f87171; border: 1px solid rgba(239,68,68,.3); }
+.health-table { width: 100%; border-collapse: collapse; }
+.health-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;
+}
+.health-table td {
+  padding: 10px 18px; font-size: 12px; color: #94a3b8;
+  border-bottom: 1px solid #0f172a;
+  font-family: 'JetBrains Mono', monospace;
+}
+.health-table tr:last-child td { border-bottom: none; }
+.health-table td:first-child { color: #e2e8f0; font-family: 'Inter', sans-serif; font-weight: 600; }
+.score-badge {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 44px; height: 22px; border-radius: 6px;
+  font-size: 11px; font-weight: 800;
+}
+.score-green { background: rgba(16,185,129,.2); color: #4ade80; border: 1px solid rgba(16,185,129,.3); }
+.score-amber { background: rgba(245,158,11,.2); color: #fbbf24; border: 1px solid rgba(245,158,11,.3); }
+.score-red { background: rgba(239,68,68,.2); color: #f87171; border: 1px solid rgba(239,68,68,.3); }
+/* ══ ARTIFACT 2 — Support Queue Dashboard ══ */
+.queue-panel {
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  overflow: hidden;
+}
+.queue-header {
+  padding: 14px 20px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  display: flex; align-items: center; justify-content: space-between;
+}
+.queue-title { font-size: 13px; font-weight: 700; color: var(--text); }
+.queue-meta { font-size: 11px; color: var(--muted); }
+.ticket-row {
+  display: flex; align-items: center; gap: 12px;
+  padding: 12px 20px;
+  border-bottom: 1px solid var(--border);
+}
+.ticket-row:last-of-type { border-bottom: none; }
+.ticket-priority {
+  font-size: 11px; font-weight: 800; letter-spacing: .04em;
+  width: 28px; flex-shrink: 0;
+}
+.ticket-dot { font-size: 10px; flex-shrink: 0; }
+.ticket-subject { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; }
+.ticket-company { font-size: 11px; color: var(--muted); flex-shrink: 0; white-space: nowrap; }
+.ticket-age { font-size: 11px; color: var(--muted); font-family: 'JetBrains Mono', monospace; flex-shrink: 0; width: 52px; text-align: right; }
+.ticket-status {
+  font-size: 10px; font-weight: 700; letter-spacing: .05em;
+  border-radius: 6px; padding: 3px 8px; flex-shrink: 0; white-space: nowrap;
+}
+.status-escalated { background: rgba(239,68,68,.12); color: #f87171; border: 1px solid rgba(239,68,68,.2); }
+.status-assigned { background: rgba(245,158,11,.12); color: #fbbf24; border: 1px solid rgba(245,158,11,.2); }
+.status-open { background: rgba(100,116,139,.12); color: #94a3b8; border: 1px solid rgba(100,116,139,.2); }
+.status-auto { background: rgba(16,185,129,.12); color: #34d399; border: 1px solid rgba(16,185,129,.2); }
+.sla-bar-section {
+  padding: 12px 20px; background: var(--surface);
+  border-top: 1px solid var(--border);
+  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
+}
+.sla-label { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
+.sla-bar-wrap { flex: 1; min-width: 100px; height: 6px; background: var(--border); border-radius: 999px; overflow: hidden; }
+.sla-bar-fill { height: 100%; background: linear-gradient(90deg, #06b6d4, #10b981); border-radius: 999px; }
+.sla-remaining { font-size: 11px; font-weight: 700; color: #06b6d4; font-family: 'JetBrains Mono', monospace; white-space: nowrap; }
+/* ══ ARTIFACT 3 — Survey Campaign Results ══ */
+.survey-results-card {
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  overflow: hidden;
+}
+.survey-header {
+  padding: 16px 20px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  display: flex; align-items: center; justify-content: space-between;
+}
+.survey-title { font-size: 14px; font-weight: 700; color: var(--text); }
+.survey-period { font-size: 11px; color: var(--muted); }
+.survey-body { padding: 20px; }
+.response-rate-block { text-align: center; margin-bottom: 24px; }
+.response-rate-big { font-size: 56px; font-weight: 800; color: #06b6d4; line-height: 1; font-family: 'JetBrains Mono', monospace; }
+.response-rate-label { font-size: 12px; color: var(--muted); margin-top: 4px; }
+.response-rate-avg { font-size: 11px; color: var(--muted); margin-top: 2px; }
+.nps-bars { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
+.nps-bar-row { display: flex; align-items: center; gap: 10px; }
+.nps-bar-label { font-size: 12px; font-weight: 600; color: var(--text-2); width: 120px; flex-shrink: 0; }
+.nps-bar-track { flex: 1; height: 10px; background: var(--border); border-radius: 999px; overflow: hidden; }
+.nps-bar-fill-cyan { height: 100%; background: #06b6d4; border-radius: 999px; }
+.nps-bar-fill-gray { height: 100%; background: #94a3b8; border-radius: 999px; }
+.nps-bar-fill-red { height: 100%; background: #ef4444; border-radius: 999px; }
+.nps-bar-pct { font-size: 12px; font-weight: 700; color: var(--text); width: 36px; text-align: right; flex-shrink: 0; }
+.nps-score-block { text-align: center; padding: 14px; border-top: 1px solid var(--border); }
+.nps-score-num { font-size: 40px; font-weight: 800; color: var(--text); font-family: 'JetBrains Mono', monospace; }
+.nps-score-label { font-size: 11px; color: var(--muted); margin-top: 2px; }
+.nps-footer-note { font-size: 12px; color: #10b981; font-weight: 600; text-align: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
+/* 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; }
+  .health-stats-row { gap: 8px; }
+  .ticket-company { display: none; }
+  .ticket-age { display: none; }
+}
+</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=CASEY-cx&backgroundColor=a5f3fc&radius=50" width="96" height="96" alt="CASEY-cx avatar" style="border-radius:50%;">
+  </div>
+  <div class="role-chip">AI Customer Success + Support</div>
+  <h1>Customers stay.<br><span>Issues close.</span> Health scores rise.</h1>
+  <p>CaSey monitors account health signals, triages support queues, and runs survey campaigns that customers actually respond to — so churn stays low and your team stays focused.</p>
+  </section>
+<div class="section-label">
+  <h2>Selected Work</h2>
+  <div class="section-divider"></div>
+</div>
+<div class="cards-grid">
+  <!-- Card 1: Customer Health Scoring -->
+  <div class="card open" id="card1">
+    <div class="card-header" onclick="toggleCard(1)">
+      <div class="card-icon" style="background:#cffafe;">📊</div>
+      <div class="card-meta">
+        <div class="card-tag" style="color:#06b6d4;">Account Health</div>
+        <div class="card-title">Churn spotted 6 weeks before it would have happened</div>
+        <div class="card-subtitle">CustomerEQ · member-360 · get_member_360 API</div>
+      </div>
+      <div class="card-toggle">›</div>
+    </div>
+    <div class="card-body">
+      <div class="card-context">A B2B SaaS had 340 active accounts and no systematic way to identify which ones were at risk — until renewals came up and it was too late to save them.</div>
+      <div class="narrative">
+        <div class="narrative-step">
+          <div class="step-label">The hidden signals</div>
+          <div class="step-text">Customer health signals are always present. Login frequency drops 3 weeks before a customer disengages. A feature they loved gets abandoned 2 weeks before they tell you the product isn't working for them. A champion leaves the company 4 weeks before the renewal conversation changes tone. None of these signals were visible because they weren't being monitored.</div>
+        </div>
+        <div class="narrative-step">
+          <div class="step-label">What CaSey Did</div>
+          <div class="step-text">CaSey built the health scoring system on top of CustomerEQ's member-360 API: NPS responses (40% weight), product usage frequency (30%), support ticket sentiment — are tickets frustrated or curious? — (20%), and stakeholder engagement — has the main contact gone dark? — (10%). Scores update weekly. Accounts below 40 trigger an automated check-in workflow.</div>
+        </div>
+        <div class="narrative-step">
+          <div class="step-label">The Outcome</div>
+          <div class="step-text">23 at-risk accounts identified in the first scoring run. 18 received proactive outreach within 48 hours. 14 renewed (61% save rate). Without the system, all 23 would have gone through renewal unwarned. $840K ARR retained.</div>
+        </div>
+      </div>
+      <div class="artifact-label">Live Artifact — Customer Health Dashboard</div>
+      <div class="health-dashboard">
+        <div class="health-topbar">
+          <span class="health-topbar-title">Customer Health — May 2026</span>
+          <span style="font-size:11px;color:#475569;">340 accounts · updated weekly</span>
+        </div>
+        <div class="health-stats-row">
+          <span class="health-badge good">● 304 Healthy</span>
+          <span class="health-badge warn">● 13 Monitor</span>
+          <span class="health-badge risk">● 23 At Risk</span>
+        </div>
+        <table class="health-table">
+          <thead>
+            <tr>
+              <th>Company</th>
+              <th>NPS</th>
+              <th>Usage</th>
+              <th>Sentiment</th>
+              <th>Health Score</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Acme Corp</td>
+              <td>9</td>
+              <td>Daily</td>
+              <td>😊</td>
+              <td><span class="score-badge score-green">91</span></td>
+            </tr>
+            <tr>
+              <td>BluePeak</td>
+              <td>6</td>
+              <td>Weekly</td>
+              <td>😐</td>
+              <td><span class="score-badge score-amber">64</span></td>
+            </tr>
+            <tr>
+              <td>TechFlow</td>
+              <td>4</td>
+              <td>Rare</td>
+              <td>😟</td>
+              <td><span class="score-badge score-red">28</span></td>
+            </tr>
+            <tr>
+              <td>Meridian</td>
+              <td>8</td>
+              <td>Daily</td>
+              <td>😊</td>
+              <td><span class="score-badge score-green">88</span></td>
+            </tr>
+            <tr>
+              <td>Apex Co</td>
+              <td>3</td>
+              <td>None</td>
+              <td>😟</td>
+              <td><span class="score-badge score-red">18</span></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="source-ref">
+        📎 Source: <a href="#">CustomerEQ · get_member_360 · CustomerEQ MCP API</a>
+      </div>
+      <div class="card-hire-cta">
+      </div>
+    </div>
+  </div>
+  <!-- Card 2: Support Queue Management -->
+  <div class="card" id="card2">
+    <div class="card-header" onclick="toggleCard(2)">
+      <div class="card-icon" style="background:#cffafe;">🎯</div>
+      <div class="card-meta">
+        <div class="card-tag" style="color:#06b6d4;">Support Velocity</div>
+        <div class="card-title">4-hour resolution. Was 3 days.</div>
+        <div class="card-subtitle">CustomerEQ · support-queue-management · list_support_conversations</div>
+      </div>
+      <div class="card-toggle">›</div>
+    </div>
+    <div class="card-body">
+      <div class="card-context">A 200-customer SaaS had a support queue with 47 open tickets, some 5 days old. The support team of 2 was triaging manually — no priority scoring, no escalation rules.</div>
+      <div class="narrative">
+        <div class="narrative-step">
+          <div class="step-label">The broken queue</div>
+          <div class="step-text">Support queues without triage rules age uniformly. A 5-minute question and a critical production blocker both sit in the same queue, prioritized by who happened to submit first. Customers with critical issues wait 2 days. Customers with simple questions wait 2 days. Nobody is happy, and the simple questions could have been resolved in 4 minutes.</div>
+        </div>
+        <div class="narrative-step">
+          <div class="step-label">What CaSey Did</div>
+          <div class="step-text">CaSey implemented a triage system via CustomerEQ's conversation API: severity detection from ticket content (keywords: "production," "blocking," "can't access" → P0 auto-escalate; "how to," "question," "feature request" → P3 queue), SLA timers with escalation to Slack at 1 hour / 4 hours / 1 day, and an auto-responder for the 40% of tickets matching solved KB articles.</div>
+        </div>
+        <div class="narrative-step">
+          <div class="step-label">The Outcome</div>
+          <div class="step-text">Median first-response time dropped from 18 hours to 47 minutes. P0 resolution time: 4 hours (was 3 days — no escalation existed). 38% of tickets auto-resolved by KB article matching. Support team headcount stayed at 2 despite 60% customer growth.</div>
+        </div>
+      </div>
+      <div class="artifact-label">Live Artifact — Support Queue Dashboard</div>
+      <div class="queue-panel">
+        <div class="queue-header">
+          <span class="queue-title">Support Queue — Live View</span>
+          <span class="queue-meta">47 open tickets · 2 agents</span>
+        </div>
+        <div class="ticket-row">
+          <span class="ticket-priority" style="color:#ef4444;">P0</span>
+          <span class="ticket-dot">🔴</span>
+          <span class="ticket-subject">Production: API returning 500s</span>
+          <span class="ticket-company">Acme Corp</span>
+          <span class="ticket-age">1h 12m</span>
+          <span class="ticket-status status-escalated">ESCALATED</span>
+        </div>
+        <div class="ticket-row">
+          <span class="ticket-priority" style="color:#f97316;">P1</span>
+          <span class="ticket-dot">🟠</span>
+          <span class="ticket-subject">Data sync not working since update</span>
+          <span class="ticket-company">BluePeak</span>
+          <span class="ticket-age">2h 45m</span>
+          <span class="ticket-status status-assigned">ASSIGNED</span>
+        </div>
+        <div class="ticket-row">
+          <span class="ticket-priority" style="color:#eab308;">P2</span>
+          <span class="ticket-dot">🟡</span>
+          <span class="ticket-subject">Report export missing columns</span>
+          <span class="ticket-company">Meridian</span>
+          <span class="ticket-age">4h 10m</span>
+          <span class="ticket-status status-open">OPEN</span>
+        </div>
+        <div class="ticket-row">
+          <span class="ticket-priority" style="color:#10b981;">P3</span>
+          <span class="ticket-dot">🟢</span>
+          <span class="ticket-subject">How to configure webhooks?</span>
+          <span class="ticket-company">TechFlow</span>
+          <span class="ticket-age">12m</span>
+          <span class="ticket-status status-auto">AUTO-RESOLVED (KB match)</span>
+        </div>
+        <div class="ticket-row" style="border-bottom:none;">
+          <span class="ticket-priority" style="color:#10b981;">P3</span>
+          <span class="ticket-dot">🟢</span>
+          <span class="ticket-subject">What's the rate limit?</span>
+          <span class="ticket-company">Apex Co</span>
+          <span class="ticket-age">8m</span>
+          <span class="ticket-status status-auto">AUTO-RESOLVED (KB match)</span>
+        </div>
+        <div class="sla-bar-section">
+          <span class="sla-label">P0 SLA: 4h</span>
+          <div class="sla-bar-wrap"><div class="sla-bar-fill" style="width:70%;"></div></div>
+          <span class="sla-remaining">Remaining: 2h 48m</span>
+        </div>
+      </div>
+      <div class="source-ref">
+        📎 Source: <a href="#">CustomerEQ · support-queue-management · list_support_conversations</a>
+      </div>
+      <div class="card-hire-cta">
+      </div>
+    </div>
+  </div>
+  <!-- Card 3: Survey Campaign Management -->
+  <div class="card" id="card3">
+    <div class="card-header" onclick="toggleCard(3)">
+      <div class="card-icon" style="background:#cffafe;">📣</div>
+      <div class="card-meta">
+        <div class="card-tag" style="color:#06b6d4;">Voice of Customer</div>
+        <div class="card-title">74% response rate. Industry average: 22%.</div>
+        <div class="card-subtitle">CustomerEQ · survey-campaign-management · create_survey API</div>
+      </div>
+      <div class="card-toggle">›</div>
+    </div>
+    <div class="card-body">
+      <div class="card-context">A SaaS company was running quarterly NPS surveys with a 19% response rate — too low to be statistically meaningful for their 340-account base.</div>
+      <div class="narrative">
+        <div class="narrative-step">
+          <div class="step-label">The spiral</div>
+          <div class="step-text">Low survey response rates are a self-fulfilling spiral: low responses → low data quality → vague insights → no action → customers feel unheard → lower responses next time. The standard industry NPS survey is sent via bulk email at 9am Tuesday to everyone at once, with no personalization and no follow-up.</div>
+        </div>
+        <div class="narrative-step">
+          <div class="step-label">What CaSey Did</div>
+          <div class="step-text">CaSey rebuilt the survey campaign: segmented accounts by health score, sent from the assigned CSM's name, personalized the first sentence to reference each account's most-used feature, sent at the time each contact typically opens email (SendTime optimization via engagement history), and triggered a personal follow-up from CaSey for any detractor (score ≤ 6) within 6 hours.</div>
+        </div>
+        <div class="narrative-step">
+          <div class="step-label">The Outcome</div>
+          <div class="step-text">NPS survey response rate rose from 19% to 74%. Detractor follow-up converted 8 of 11 detractors into passives or promoters within 30 days. Net Promoter Score rose from +31 to +58. The VP of Customer Success used the campaign as the model for every subsequent survey.</div>
+        </div>
+      </div>
+      <div class="artifact-label">Live Artifact — NPS Campaign Results</div>
+      <div class="survey-results-card">
+        <div class="survey-header">
+          <span class="survey-title">NPS Campaign — Q2 2026</span>
+          <span class="survey-period">340 accounts · sent May 2026</span>
+        </div>
+        <div class="survey-body">
+          <div class="response-rate-block">
+            <div class="response-rate-big">74%</div>
+            <div class="response-rate-label">Response Rate</div>
+            <div class="response-rate-avg">Industry avg: 22%</div>
+          </div>
+          <div class="nps-bars">
+            <div class="nps-bar-row">
+              <span class="nps-bar-label">Promoters (9–10)</span>
+              <div class="nps-bar-track"><div class="nps-bar-fill-cyan" style="width:58%;"></div></div>
+              <span class="nps-bar-pct">58%</span>
+            </div>
+            <div class="nps-bar-row">
+              <span class="nps-bar-label">Passives (7–8)</span>
+              <div class="nps-bar-track"><div class="nps-bar-fill-gray" style="width:27%;"></div></div>
+              <span class="nps-bar-pct">27%</span>
+            </div>
+            <div class="nps-bar-row">
+              <span class="nps-bar-label">Detractors (0–6)</span>
+              <div class="nps-bar-track"><div class="nps-bar-fill-red" style="width:15%;"></div></div>
+              <span class="nps-bar-pct">15%</span>
+            </div>
+          </div>
+          <div class="nps-score-block">
+            <div class="nps-score-num">+43</div>
+            <div class="nps-score-label">Net Promoter Score</div>
+          </div>
+          <div class="nps-footer-note">8/11 detractors → passives within 30 days ✓</div>
+        </div>
+      </div>
+      <div class="source-ref">
+        📎 Source: <a href="#">CustomerEQ · survey-campaign-management · create_survey</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>