f892230699
Search results no longer pop in as a single block. New behavior:
- Skeleton list pre-claims the vertical space results will occupy
with shimmering placeholder cards, so arriving results fade in
over the skeleton instead of pushing layout. Sweep is staggered
per row for a "rolling wave" not "everything blinking together".
- Domain-language stage caption ("matching against permits",
"ranking by reliability") rotates on a fixed schedule so users
read progress, not a stuck spinner.
- @keyframes card-in: real worker cards rise 4px and fade in over
350ms with nth-child stagger across the first ~12 rows. Honors
prefers-reduced-motion.
- Avatar imgs filter through grayscale + slight contrast/blur to
pull the SDXL Turbo color cast (which screams "AI generated" at
small sizes). Cert icons get the same treatment.
- Once-per-session hero takeover compresses the Section ⓪ strip
("Not a CRM — an index that learns from you") into a centered
hero on first paint, dismissed by clicking anywhere. Stats
hydrate from live endpoints.
console.html: mirrors the avatar B&W filter for visual consistency,
and removes the headshot insertion entirely — back to monogram
initials. The console (internal staffer view) doesn't need synthetic
faces; the public demo at /lakehouse/ does.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
833 lines
53 KiB
HTML
833 lines
53 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en"><head>
|
||
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Lakehouse — What Your Staffing System Would Do</title>
|
||
<style>
|
||
*{margin:0;padding:0;box-sizing:border-box}
|
||
body{font-family:'Inter',-apple-system,system-ui,sans-serif;background:#090c10;color:#b0b8c4;font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
|
||
a{color:#58a6ff;text-decoration:none}
|
||
a:hover{color:#79c0ff}
|
||
|
||
.bar{background:#0d1117;padding:0 24px;height:56px;border-bottom:1px solid #171d27;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:10}
|
||
.bar h1{font-size:14px;font-weight:600;color:#e6edf3;letter-spacing:-0.2px}
|
||
.bar nav{display:flex;gap:2px}
|
||
.bar nav a{font-size:12px;color:#545d68;padding:6px 14px;border-radius:6px;transition:all 0.15s}
|
||
.bar nav a:hover{color:#e6edf3;background:#161b22}
|
||
.bar nav a.active{color:#e6edf3;background:#1c2333}
|
||
.bar .rt{font-size:11px;color:#545d68}
|
||
|
||
.wrap{max-width:1040px;margin:0 auto;padding:28px 20px 60px}
|
||
|
||
.chapter{margin-bottom:48px}
|
||
.chapter .num{color:#545d68;font-size:11px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;margin-bottom:6px}
|
||
.chapter h2{color:#e6edf3;font-size:24px;font-weight:700;letter-spacing:-0.4px;margin-bottom:8px;line-height:1.2}
|
||
.chapter .lede{color:#8b949e;font-size:14px;margin-bottom:18px;max-width:680px;line-height:1.6}
|
||
|
||
.card{background:#0d1117;border:1px solid #171d27;border-radius:12px;padding:20px;margin-bottom:12px}
|
||
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
|
||
|
||
.stat-lg{padding:18px 20px}
|
||
.stat-lg .n{font-size:30px;font-weight:800;color:#e6edf3;letter-spacing:-1px;line-height:1}
|
||
.stat-lg .l{font-size:10px;color:#545d68;text-transform:uppercase;letter-spacing:1.2px;margin-top:8px;font-weight:600}
|
||
.stat-lg .sub{font-size:12px;color:#8b949e;margin-top:4px}
|
||
|
||
.pill{display:inline-block;padding:3px 10px;border-radius:10px;font-size:10px;font-weight:600;letter-spacing:0.3px;margin-right:6px}
|
||
.pill.real{background:#0d2818;color:#3fb950;border:1px solid #2ea04380}
|
||
.pill.synth{background:#1a1a2e;color:#bc8cff;border:1px solid #5530988c}
|
||
.pill.flow{background:#0d2340;color:#58a6ff;border:1px solid #1f6feb80}
|
||
|
||
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;background:#0d1117;border:1px solid #171d27;border-radius:8px;margin-bottom:6px;font-size:13px}
|
||
.row:hover{border-color:#21262d}
|
||
.row .title{color:#e6edf3;font-weight:500}
|
||
.row .meta{color:#8b949e;font-size:11px;margin-top:2px}
|
||
.row .val{color:#58a6ff;font-weight:600;white-space:nowrap}
|
||
|
||
details{background:#0d1117;border:1px solid #171d27;border-radius:8px;padding:10px 14px;margin-bottom:6px}
|
||
details summary{cursor:pointer;font-size:13px;color:#e6edf3;font-weight:500;list-style:none}
|
||
details summary::-webkit-details-marker{display:none}
|
||
details .body{padding-top:10px;font-size:12px;color:#8b949e}
|
||
|
||
.accent-l{border-left:3px solid #2ea043}
|
||
.accent-b{border-left:3px solid #1f6feb}
|
||
.accent-a{border-left:3px solid #bc8cff}
|
||
.accent-w{border-left:3px solid #d29922}
|
||
.accent-g{border-left:3px solid #3fb950}
|
||
.accent-r{border-left:3px solid #f85149}
|
||
|
||
.worker{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#161b22;border-radius:6px;margin-bottom:4px;font-size:12px;border-left:3px solid #30363d}
|
||
.worker .av{width:32px;height:32px;border-radius:50%;background:#0d1117;border:1px solid #21262d;display:flex;align-items:center;justify-content:center;font-weight:600;color:#c9d1d9;font-size:11px;flex-shrink:0;letter-spacing:0.5px;overflow:hidden;position:relative}
|
||
.worker .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
|
||
/* Softening — mirror of search.html. Pulls saturation + contrast off
|
||
the SDXL Turbo over-render so faces feel less "AI-generated".
|
||
If you tweak one, tweak the other. */
|
||
filter: saturate(0.86) contrast(0.93) brightness(1.02) blur(0.3px);
|
||
}
|
||
.worker[data-role-band="warehouse"]{border-left-color:#58a6ff}
|
||
.worker[data-role-band="production"]{border-left-color:#d29922}
|
||
.worker[data-role-band="trades"]{border-left-color:#bc8cff}
|
||
.worker[data-role-band="driver"]{border-left-color:#3fb950}
|
||
.worker[data-role-band="lead"]{border-left-color:#f0883e}
|
||
.role-pill{display:inline-block;font-size:9px;padding:1px 7px;border-radius:3px;background:#0d1117;color:#8b949e;margin-right:6px;font-weight:600;letter-spacing:0.4px;text-transform:uppercase;border-left:2px solid #30363d;vertical-align:1px}
|
||
.role-pill[data-rb="warehouse"]{border-left-color:#58a6ff;color:#79c0ff}
|
||
.role-pill[data-rb="production"]{border-left-color:#d29922;color:#e3b341}
|
||
.role-pill[data-rb="trades"]{border-left-color:#bc8cff;color:#d2a8ff}
|
||
.role-pill[data-rb="driver"]{border-left-color:#3fb950;color:#56d364}
|
||
.role-pill[data-rb="lead"]{border-left-color:#f0883e;color:#ffa657}
|
||
.worker .info{flex:1;min-width:0}
|
||
.worker .nm{color:#e6edf3;font-weight:500}
|
||
.worker .why{color:#545d68;font-size:11px;margin-top:1px}
|
||
.worker .score{color:#58a6ff;font-size:11px;font-weight:600;white-space:nowrap}
|
||
|
||
.mem-chip{background:#0d2818;border:1px solid #2ea04360;border-radius:6px;padding:8px 12px;font-size:11px;color:#86efac;line-height:1.5;margin-top:6px}
|
||
.mem-chip .l{color:#3fb950;font-weight:600;margin-right:6px}
|
||
|
||
.boost-chip{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:9px;font-size:9px;font-weight:600;background:#0d2818;border:1px solid #2ea043;color:#3fb950;vertical-align:middle}
|
||
|
||
.try-box{background:#0d1117;border:1px solid #171d27;border-radius:12px;padding:16px}
|
||
.try-box input{width:100%;padding:12px 16px;background:#161b22;border:1px solid #21262d;border-radius:8px;color:#e6edf3;font-size:13px;outline:none;margin-bottom:10px}
|
||
.try-box input:focus{border-color:#388bfd}
|
||
.try-box button{padding:10px 20px;background:#1f6feb;border:none;border-radius:8px;color:#fff;font-size:13px;font-weight:600;cursor:pointer}
|
||
.try-box button:hover{background:#388bfd}
|
||
.try-box button:disabled{opacity:0.5;cursor:wait}
|
||
|
||
.footer{border-top:1px solid #171d27;padding:20px;text-align:center;color:#3d444d;font-size:11px}
|
||
|
||
.loading{color:#484f58;font-style:italic;padding:20px 0;text-align:center}
|
||
.err{color:#f85149;font-size:12px;padding:10px}
|
||
|
||
.narr{color:#8b949e;font-size:13px;line-height:1.7;margin:10px 0;padding:10px 14px;border-left:2px solid #21262d}
|
||
.narr strong{color:#c9d1d9;font-weight:600}
|
||
|
||
.step-label{color:#58a6ff;font-size:12px;margin-top:12px;font-weight:600}
|
||
.step-body{color:#c9d1d9;font-size:13px;margin-top:2px}
|
||
|
||
@media(max-width:720px){
|
||
.wrap{padding:20px 12px 40px}
|
||
.chapter h2{font-size:20px}
|
||
.bar nav{display:none}
|
||
}
|
||
</style></head>
|
||
<body>
|
||
|
||
<div class="bar">
|
||
<h1>Lakehouse — What Your Staffing System Would Do</h1>
|
||
<nav>
|
||
<a href=".">Dashboard</a>
|
||
<a href="console" class="active">Walkthrough</a>
|
||
<a href="profiler">Profiler</a>
|
||
<a href="proof">Architecture</a>
|
||
<a href="spec">Spec</a>
|
||
<a href="onboard">Onboard</a>
|
||
<a href="alerts">Alerts</a>
|
||
<a href="workspaces">Workspaces</a>
|
||
</nav>
|
||
<div class="rt" id="hdr-time">Reading live state…</div>
|
||
</div>
|
||
|
||
<div class="wrap">
|
||
|
||
<div class="chapter">
|
||
<div class="num">Chapter 1</div>
|
||
<h2>Right now, this system is already thinking</h2>
|
||
<div class="lede">Before you touched anything, it pulled real Chicago building-permit data, measured demand, checked your bench, and began flagging roles that need attention. This isn't theoretical — open your browser network tab and watch the fetches land.</div>
|
||
<div class="grid" id="ch1-stats"><div class="loading">Fetching live state…</div></div>
|
||
<div class="narr" id="ch1-narr"></div>
|
||
</div>
|
||
|
||
<div class="chapter">
|
||
<div class="num">Chapter 2</div>
|
||
<h2>The demand signal is real, not made up</h2>
|
||
<div class="lede">Chicago's Department of Buildings publishes every permit they issue. Below are the largest categories of construction filed in the last 30 days. If a staffer doesn't believe our numbers, they can verify at <a href="https://data.cityofchicago.org/Buildings/Building-Permits/ydr8-5enu" target="_blank" rel="noopener">data.cityofchicago.org</a>.</div>
|
||
<div id="ch2-permits"><div class="loading">Loading permit feed…</div></div>
|
||
</div>
|
||
|
||
<div class="chapter">
|
||
<div class="num">Chapter 3</div>
|
||
<h2>Where your own data would live</h2>
|
||
<div class="lede">The system stores data in labeled catalogs. Purple pills = synthetic stand-ins you'd swap for your real ATS/CRM/call-log exports. Blue pills = data the system generates about itself (playbooks, audit trails). Nothing else in the pipeline changes — only the source.</div>
|
||
<div id="ch3-datasets"><div class="loading">Enumerating catalog…</div></div>
|
||
<div class="narr">
|
||
<strong>The swap path.</strong> workers_500k → your ATS export (same schema shape). candidates → your CRM. call_log → your phone system's CDR. timesheets → your payroll export. Once ingested, every behavior you see on the dashboard applies to your real data. No re-training. No replatform.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chapter">
|
||
<div class="num">Chapter 4</div>
|
||
<h2>Watch the system rank candidates in real time</h2>
|
||
<div class="lede">This takes the most recent Chicago permit, derives the staffing need, pulls ranked candidates from the bench, and shows you why each one ranked. Everything below loaded in about 3 seconds against the live system.</div>
|
||
<div id="ch4-demo"><div class="loading">Running demo query…</div></div>
|
||
</div>
|
||
|
||
<div class="chapter">
|
||
<div class="num">Chapter 5</div>
|
||
<h2>Every action compounds — the CRM-killer</h2>
|
||
<div class="lede">A CRM stores. This system compounds. Every successful fill, every no-show, every phone call becomes a re-ranking signal on the next query. Below is the live playbook memory state. The number grows as the app gets used.</div>
|
||
<div id="ch5-memory"><div class="loading">Reading playbook memory…</div></div>
|
||
</div>
|
||
|
||
<div class="chapter">
|
||
<div class="num">Chapter 6</div>
|
||
<h2>Three coordinators, three views of the same corpus</h2>
|
||
<div class="lede">Maria runs Chicago, Devon runs Indianapolis, Aisha runs Milwaukee. Same database, same playbooks — but the search results, the recurring-skill patterns, and the playbook context all reshape to whoever is acting. This is the per-staffer hot-swap index: the relevance gradient is unique to each person, and gets sharper the more they use it.</div>
|
||
<div id="ch6-staffers"><div class="loading">Loading staffer roster…</div></div>
|
||
</div>
|
||
|
||
<div class="chapter">
|
||
<div class="num">Chapter 7</div>
|
||
<h2>The hidden signal — public issuers in your contractor graph</h2>
|
||
<div class="lede">Every contractor in this corpus is also a forward indicator on the public equities they touch. Permit filings precede construction starts by ~45 days, staffing windows by ~30, revenue recognition by months. The associated-ticker network surfaces this signal <em>before</em> any 10-Q. Below: the top issuers attributable to the contractor activity in this view, with live prices.</div>
|
||
<div id="ch7-signal"><div class="loading">Computing the Building Activity Index…</div></div>
|
||
</div>
|
||
|
||
<div class="chapter">
|
||
<div class="num">Chapter 8</div>
|
||
<h2>When something breaks — triage in one shot</h2>
|
||
<div class="lede">A coordinator gets a text: "Marcus running late." Watch what the system does in 250 milliseconds: pulls Marcus's record, scores his attendance pattern, finds five same-role same-geo backfills sorted by responsiveness, and pre-writes the SMS to send to the client. This is the moment the AI becomes worth its weight.</div>
|
||
<div id="ch8-triage"><div class="loading">Running the triage scenario…</div></div>
|
||
</div>
|
||
|
||
<div class="chapter">
|
||
<div class="num">Chapter 9</div>
|
||
<h2>Try it yourself — every input below hits a different route</h2>
|
||
<div class="lede">Type any staffing question. The router picks the right path: smart-parse (zip code, headcount, role, state), semantic discovery, name lookup, late-worker triage, "what came in last night" temporal queries. Whatever you type, the system tells you what it understood and how it routed.</div>
|
||
<div class="try-box">
|
||
<input type="text" id="try-q" placeholder="e.g. 8 production workers near 60607 by next Friday" onkeydown="if(event.key==='Enter')runTry()">
|
||
<button id="try-btn" onclick="runTry()">Ask</button>
|
||
<div style="margin-top:10px;font-size:11px;color:#545d68;line-height:1.7">
|
||
Try one of these to see different routes fire:<br>
|
||
<a href="#" onclick="document.getElementById('try-q').value='8 production workers near 60607';runTry();return false">8 production workers near 60607</a> ·
|
||
<a href="#" onclick="document.getElementById('try-q').value='Marcus running late site 4422';runTry();return false">Marcus running late site 4422</a> ·
|
||
<a href="#" onclick="document.getElementById('try-q').value='Marcus';runTry();return false">Marcus</a> ·
|
||
<a href="#" onclick="document.getElementById('try-q').value='what came in last night';runTry();return false">what came in last night</a> ·
|
||
<a href="#" onclick="document.getElementById('try-q').value='reliable forklift operators with OSHA certs';runTry();return false">reliable forklift operators with OSHA certs</a>
|
||
</div>
|
||
<div id="try-out" style="margin-top:16px"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="footer">Lakehouse · demo instance · <a href="proof">architecture & benchmarks</a></div>
|
||
|
||
<script>
|
||
var P=location.pathname.indexOf('/lakehouse')>=0?'/lakehouse':'';
|
||
var A=location.origin+P;
|
||
|
||
// DOM helpers — all dynamic content goes through these. No innerHTML
|
||
// anywhere in the script; every API-derived string passes through
|
||
// textContent so no injection path regardless of upstream data.
|
||
// Role classification — mirrors search.html, no emojis. Maps role
|
||
// strings to a band+label used by the worker-card border + role pill.
|
||
var ROLE_BANDS = [
|
||
{ match: /forklift|warehouse|associate|material\s*handler|loader|loading|packag|shipping|logistics|inventory|sanitation|janit/i, band: 'warehouse', label: 'Warehouse' },
|
||
{ match: /production|assembl/i, band: 'production', label: 'Production' },
|
||
{ match: /welder|weld|electric|maint(enance)?\s*tech|cnc|machine\s*op|hvac|plumb|carpenter|mason/i, band: 'trades', label: 'Skilled Trade' },
|
||
{ match: /driver|truck|haul|cdl/i, band: 'driver', label: 'Driver' },
|
||
{ match: /line\s*lead|supervisor|foreman|coordinator/i, band: 'lead', label: 'Lead' },
|
||
{ match: /quality/i, band: 'production', label: 'Quality' },
|
||
];
|
||
function roleBand(role){
|
||
if(!role) return { band: 'warehouse', label: '' };
|
||
for (var i = 0; i < ROLE_BANDS.length; i++) {
|
||
if (ROLE_BANDS[i].match.test(role)) return ROLE_BANDS[i];
|
||
}
|
||
return { band: 'warehouse', label: role.split(' ')[0].toUpperCase().slice(0, 12) };
|
||
}
|
||
|
||
// Build a sober worker card: monogram avatar + colored role band on
|
||
// the left edge + uppercase role pill in the detail line. Used by
|
||
// every chapter that renders worker rows. `name` and `role` drive the
|
||
// classification; `detail` is the full text after the pill.
|
||
// Quick first-name → gender hint for face-pool selection. Same lookup
|
||
// idea as the dashboard; if the name is unknown, the server falls back
|
||
// to the full pool. Trimmed table — covers the most common names that
|
||
// appear in the synthetic worker data.
|
||
var FEMALE_NAMES = new Set(['Mary','Patricia','Jennifer','Linda','Elizabeth','Barbara','Susan','Jessica','Sarah','Karen','Lisa','Nancy','Betty','Sandra','Margaret','Ashley','Kimberly','Emily','Donna','Michelle','Carol','Amanda','Melissa','Deborah','Stephanie','Dorothy','Rebecca','Sharon','Laura','Cynthia','Amy','Kathleen','Angela','Shirley','Brenda','Emma','Anna','Pamela','Nicole','Samantha','Katherine','Christine','Helen','Debra','Rachel','Carolyn','Janet','Maria','Catherine','Heather','Diane','Olivia','Julie','Joyce','Victoria','Ruth','Virginia','Lauren','Kelly','Christina','Joan','Evelyn','Judith','Andrea','Hannah','Megan','Cheryl','Jacqueline','Martha','Madison','Teresa','Gloria','Sara','Janice','Ann','Kathryn','Abigail','Sophia','Frances','Jean','Alice','Judy','Isabella','Julia','Grace','Amber','Denise','Danielle','Marilyn','Beverly','Charlotte','Natalie','Theresa','Diana','Brittany','Kayla','Alexis','Lori','Marie','Carmen','Aisha','Rosa','Mia','Audrey','Erin','Tina','Vanessa','Tara','Wendy','Tanya','Maya','Crystal','Yvonne','Kara','Shannon','Brianna','Faith','Caroline','Carla','Tracey','Tracy','Rita','Dawn','Tiffany','Stacy','Stacey','Gina','Bonnie','Tammy','Joanne','Jamie','Tonya','Alyssa','Ariana','Elena','Ellie','Erica','Erika','Felicia','Holly','Jenna','Jenny','Krista','Kristen','Kristin','Krystal','Lana','Leah','Lucy','Mallory','Melinda','Meredith','Misty','Monica','Naomi','Paige','Paula','Renee','Rhonda','Robin','Roxanne','Selena','Sierra','Skylar','Sonia','Stella','Tamara','Veronica','Vivian','Whitney','Yolanda','Zoe']);
|
||
var MALE_NAMES = new Set(['James','Robert','John','Michael','David','William','Richard','Joseph','Thomas','Charles','Christopher','Daniel','Matthew','Anthony','Mark','Donald','Steven','Paul','Andrew','Joshua','Kenneth','Kevin','Brian','George','Edward','Ronald','Timothy','Jason','Jeffrey','Ryan','Jacob','Gary','Nicholas','Eric','Jonathan','Stephen','Larry','Justin','Scott','Brandon','Benjamin','Samuel','Gregory','Frank','Alexander','Raymond','Patrick','Jack','Dennis','Jerry','Tyler','Aaron','Jose','Adam','Henry','Nathan','Douglas','Zachary','Peter','Kyle','Walter','Ethan','Jeremy','Harold','Keith','Christian','Roger','Noah','Gerald','Carl','Terry','Sean','Austin','Arthur','Lawrence','Jesse','Dylan','Bryan','Joe','Jordan','Billy','Bruce','Albert','Willie','Gabriel','Logan','Alan','Juan','Wayne','Roy','Ralph','Randy','Eugene','Vincent','Russell','Elijah','Louis','Bobby','Philip','Johnny','Marcus','Antonio','Carlos','Diego','Hector','Jorge','Julio','Manuel','Miguel','Pedro','Raul','Ricardo','Roberto','Sergio','Victor','Jamal','Xavier','DeShawn','Dwayne','Jermaine','Malik','Tyrone','Devon','Andre','Brent','Calvin','Casey','Cody','Cole','Cory','Dale','Damon','Darius','Darrell','Dean','Derek','Drew','Earl','Eddie','Floyd','Glenn','Greg','Howard','Ivan','Jared','Jay','Jeff','Joel','Lance','Lee','Leonard','Lloyd','Mario','Martin','Mason','Maurice','Max','Mitchell','Morgan','Nick','Norman','Oliver','Owen','Pete','Quincy','Rafael','Reggie','Rex','Ricky','Russ','Shane','Shaun','Stanley','Steve','Theodore','Todd','Travis','Trevor','Troy','Wade','Warren','Wesley']);
|
||
function guessGenderFromFirstName(n){
|
||
if(!n) return null;
|
||
var clean=n.replace(/[^A-Za-z]/g,'');
|
||
if(!clean) return null;
|
||
var c=clean[0].toUpperCase()+clean.slice(1).toLowerCase();
|
||
if(FEMALE_NAMES.has(c)) return 'woman';
|
||
if(MALE_NAMES.has(c)) return 'man';
|
||
return null;
|
||
}
|
||
function genderFor(name){
|
||
var g = guessGenderFromFirstName(name);
|
||
if(g) return g;
|
||
if(!name) return 'man';
|
||
var s=String(name); var h=0;
|
||
for(var i=0;i<s.length;i++) h=(h*31+s.charCodeAt(i))|0;
|
||
return (Math.abs(h)&1)?'man':'woman';
|
||
}
|
||
// Confident first-name → ethnicity. Synthetic data — we own the call.
|
||
var NAMES_SOUTH_ASIAN_C=new Set(['Raj','Anil','Rohan','Vikram','Arjun','Sanjay','Ravi','Krishna','Pradeep','Sunil','Amit','Deepak','Ashok','Manoj','Rahul','Vijay','Suresh','Naveen','Anand','Nikhil','Aditya','Karan','Rajesh','Priya','Anjali','Neha','Kavya','Pooja','Divya','Meera','Lakshmi','Rani','Asha','Saanvi','Aanya','Aaradhya','Shreya','Riya','Tanvi','Ishita','Aarav','Ishaan','Shivani']);
|
||
var NAMES_EAST_ASIAN_C=new Set(['Wei','Mei','Yi','Jin','Chen','Lin','Liu','Wang','Zhang','Yang','Wu','Zhao','Sun','Hiroshi','Yuki','Akira','Kenji','Sakura','Aiko','Haruto','Sora','Hyun','Eun','Yoon','Kai','Long','Hong','Xiu','Lan','Hua','Hao','Tao','Bao','Cheng','Feng','Jian','Dong','Bin','Min','Lei','Hui','Yu','Xin','Ying','Zhen','Yuan','Yan']);
|
||
var NAMES_HISPANIC_C=new Set(['Carmen','Carlos','Maria','Diego','Hector','Jorge','Julio','Manuel','Miguel','Pedro','Raul','Ricardo','Roberto','Sergio','Antonio','Esperanza','Luz','Sofia','Lucia','Isabella','Camila','Valentina','Mariana','Elena','Rosa','Catalina','Esteban','Fernando','Eduardo','Javier','Alejandro','Andres','Mateo','Santiago','Sebastian','Emilio','Tomas','Cristina','Daniela','Gabriela','Ximena','Adriana','Beatriz','Pilar','Mercedes','Xavier','Marisol','Guadalupe','Lupita','Inez','Itzel','Yesenia','Joaquin','Ignacio','Rafael','Salvador','Cesar','Arturo','Armando','Hugo','Marco','Alejandra','Felipe','Gerardo','Jaime','Leonardo','Luis','Pablo','Ramon']);
|
||
var NAMES_BLACK_C=new Set(['DeShawn','Jamal','Aisha','Latoya','Tyrone','Malik','Imani','Keisha','Tariq','Lakisha','Kenya','Tamika','Andre','Marcus','Demetrius','Jermaine','Reggie','Tyrese','Darius','Trevon','Kareem','Damon','Jalen','Jaylen','Dwayne','DaQuan','Aaliyah','Kiara','Janelle','Jasmine','Tanisha','Maurice','Tyrell','Kwame','Khalil','Terrell','Cedric','Nia','Zuri','Jada','Ebony','Dominique']);
|
||
var NAMES_MIDDLE_EASTERN_C=new Set(['Layla','Omar','Khalid','Fatima','Yasmin','Hassan','Hussein','Ahmed','Mohamed','Mohammed','Ali','Karim','Yusuf','Yara','Nadia','Zainab','Rania','Samira','Mariam','Salma','Ibrahim','Mahmoud','Saif','Anwar','Bilal','Faisal','Hamza','Imran','Sami','Wael','Zaid','Amira','Iman','Lina','Mona','Noor','Rana','Soha','Zara']);
|
||
// Surname → ethnicity. Surname is more diagnostic than first name
|
||
// for hispanic and asian — "Anna Cruz" is hispanic via surname.
|
||
var SURNAMES_HISPANIC_C=new Set(['Garcia','Rodriguez','Martinez','Hernandez','Lopez','Gonzalez','Perez','Sanchez','Ramirez','Torres','Flores','Rivera','Gomez','Diaz','Reyes','Cruz','Morales','Ortiz','Gutierrez','Chavez','Ramos','Ruiz','Alvarez','Mendoza','Vasquez','Castillo','Jimenez','Moreno','Romero','Herrera','Medina','Aguilar','Vargas','Castro','Fernandez','Guzman','Munoz','Salazar','Ortega','Delgado','Estrada','Ayala','Pena','Cabrera','Alvarado','Espinoza','Padilla','Cardenas','Cortes','Ibarra','Vega','Soto','Lara','Navarro','Campos','Acosta','Rios','Marquez','Sandoval','Maldonado','Solis','Rojas','Mejia','Beltran','Cervantes','Lozano','Carrillo','Trevino','Robles','Tapia','Lugo']);
|
||
var SURNAMES_SOUTH_ASIAN_C=new Set(['Patel','Singh','Kumar','Sharma','Gupta','Shah','Mehta','Desai','Joshi','Reddy','Nair','Iyer','Verma','Agarwal','Kapoor','Chopra','Malhotra','Banerjee','Chatterjee','Mukherjee','Das','Sen','Bose','Roy','Sinha','Trivedi','Pandey','Mishra','Tiwari','Yadav','Chauhan','Rana','Thakur','Pillai','Menon','Krishnan','Rao','Naidu','Pradhan','Acharya','Devi','Kaur']);
|
||
var SURNAMES_EAST_ASIAN_C=new Set(['Chen','Wang','Li','Liu','Yang','Huang','Zhao','Wu','Zhou','Xu','Zhu','Sun','Ma','Lin','Lee','Kim','Park','Choi','Jung','Kang','Cho','Yoon','Han','Lim','Oh','Nakamura','Tanaka','Suzuki','Yamamoto','Sato','Watanabe','Takahashi','Kobayashi','Yoshida','Saito','Nguyen','Tran','Le','Pham','Hoang','Phan','Vu','Vo','Dang','Bui','Do','Ngo','Truong','Mai','Cao','Wong','Tang','Tan','Cheng','Lau','Leung','Ng','Cheung','Yip','Hsu','Tsai','Hsieh']);
|
||
var SURNAMES_MIDDLE_EASTERN_C=new Set(['Khan','Ahmed','Hussein','Hassan','Ali','Mahmoud','Mohamed','Mohammed','Saleh','Aziz','Karim','Hamad','Najjar','Haddad','Khoury','Mansour','Rahman','Iqbal','Malik','Sheikh','Siddiqui','Qureshi','Saeed']);
|
||
|
||
function guessEthnicityFromName(first, last){
|
||
if(last){
|
||
var s=last.replace(/[^A-Za-z]/g,'');
|
||
if(s){
|
||
var sc=s[0].toUpperCase()+s.slice(1).toLowerCase();
|
||
if(SURNAMES_HISPANIC_C.has(sc)) return 'hispanic';
|
||
if(SURNAMES_MIDDLE_EASTERN_C.has(sc)) return 'middle_eastern';
|
||
if(SURNAMES_SOUTH_ASIAN_C.has(sc)) return 'south_asian';
|
||
if(SURNAMES_EAST_ASIAN_C.has(sc)) return 'east_asian';
|
||
}
|
||
}
|
||
if(first){
|
||
var clean=first.replace(/[^A-Za-z]/g,'');
|
||
if(clean){
|
||
var c=clean[0].toUpperCase()+clean.slice(1).toLowerCase();
|
||
if(NAMES_MIDDLE_EASTERN_C.has(c)) return 'middle_eastern';
|
||
if(NAMES_BLACK_C.has(c)) return 'black';
|
||
if(NAMES_HISPANIC_C.has(c)) return 'hispanic';
|
||
if(NAMES_SOUTH_ASIAN_C.has(c)) return 'south_asian';
|
||
if(NAMES_EAST_ASIAN_C.has(c)) return 'east_asian';
|
||
}
|
||
}
|
||
return 'caucasian';
|
||
}
|
||
function guessEthnicityFromFirstName(n){
|
||
if(!n) return 'caucasian';
|
||
var clean=n.replace(/[^A-Za-z]/g,''); if(!clean) return 'caucasian';
|
||
var c=clean[0].toUpperCase()+clean.slice(1).toLowerCase();
|
||
if(NAMES_MIDDLE_EASTERN_C.has(c)) return 'middle_eastern';
|
||
if(NAMES_BLACK_C.has(c)) return 'black';
|
||
if(NAMES_HISPANIC_C.has(c)) return 'hispanic';
|
||
if(NAMES_SOUTH_ASIAN_C.has(c)) return 'south_asian';
|
||
if(NAMES_EAST_ASIAN_C.has(c)) return 'east_asian';
|
||
return 'caucasian';
|
||
}
|
||
|
||
function workerRow(name, role, detail, opts){
|
||
opts = opts || {};
|
||
var band = roleBand(role||'');
|
||
var w = el('div','worker');
|
||
if(band.band) w.dataset.roleBand = band.band;
|
||
var initials = (name||'?').split(' ').map(function(s){return (s[0]||'').toUpperCase()}).join('').substring(0,2);
|
||
var av = el('div','av',initials);
|
||
// Headshot insertion removed 2026-04-28. The .av element stays as
|
||
// a monogram-initials avatar.
|
||
w.appendChild(av);
|
||
var info = el('div','info');
|
||
var nm = el('div','nm', name||'?');
|
||
if(opts.endorsed){
|
||
nm.appendChild(el('span','boost-chip',opts.endorsed));
|
||
}
|
||
info.appendChild(nm);
|
||
var why = el('div','why');
|
||
if(band.label){
|
||
var pill = document.createElement('span'); pill.className='role-pill';
|
||
pill.dataset.rb = band.band;
|
||
pill.textContent = band.label;
|
||
why.appendChild(pill);
|
||
}
|
||
why.appendChild(document.createTextNode(detail||''));
|
||
info.appendChild(why);
|
||
w.appendChild(info);
|
||
if(opts.score){
|
||
w.appendChild(el('div','score', opts.score));
|
||
}
|
||
return w;
|
||
}
|
||
|
||
function el(tag, cls, text){
|
||
var e=document.createElement(tag);
|
||
if(cls) e.className=cls;
|
||
if(text!==undefined && text!==null) e.textContent=String(text);
|
||
return e;
|
||
}
|
||
function setAttrs(e, obj){
|
||
for(var k in obj) if(Object.prototype.hasOwnProperty.call(obj,k)) e.setAttribute(k,obj[k]);
|
||
return e;
|
||
}
|
||
|
||
function api(path, body){
|
||
return fetch(A+path,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body||{})}).then(function(r){return r.json()});
|
||
}
|
||
function apiGet(path){
|
||
return fetch(A+path).then(function(r){return r.json()});
|
||
}
|
||
|
||
window.addEventListener('load',function(){
|
||
loadChapter1();
|
||
loadChapter2();
|
||
loadChapter3();
|
||
loadChapter4();
|
||
loadChapter5();
|
||
loadChapter6();
|
||
loadChapter7();
|
||
loadChapter8();
|
||
});
|
||
|
||
// ─── Chapter 1 ────────────────────────────────────────────
|
||
function loadChapter1(){
|
||
Promise.all([
|
||
api('/intelligence/staffing_forecast',{}).catch(function(){return {}}),
|
||
apiGet('/api/vectors/playbook_memory/stats').catch(function(){return {}}),
|
||
apiGet('/api/catalog/datasets').catch(function(){return []}),
|
||
]).then(function(all){
|
||
var f=all[0]||{}, mem=all[1]||{}, ds=all[2]||[];
|
||
var totalRows=0;
|
||
if(Array.isArray(ds)) ds.forEach(function(d){totalRows+=(d.row_count||0)});
|
||
var host=document.getElementById('ch1-stats');host.textContent='';
|
||
addStat(host,'$'+(f.total_cost||0).toLocaleString('en-US',{maximumFractionDigits:0}),'Construction pipeline',(f.permit_count||0)+' permits last 30 days','accent-b');
|
||
addStat(host,(f.total_estimated_workers||0).toLocaleString(),'Predicted worker demand','split across '+((f.forecast||[]).length)+' roles','accent-w');
|
||
addStat(host,(totalRows||0).toLocaleString(),'Rows under management',(Array.isArray(ds)?ds.length:0)+' datasets · real + synthetic','accent-a');
|
||
addStat(host,(mem.entries||0).toLocaleString(),'Playbooks remembered',(mem.total_names_endorsed||0)+' endorsed worker-tags','accent-l');
|
||
|
||
var narrEl=document.getElementById('ch1-narr');
|
||
narrEl.textContent='';
|
||
var critical=(f.critical_roles||0), tight=(f.tight_roles||0);
|
||
if(critical>0){
|
||
narrEl.appendChild(document.createTextNode('The system has already flagged '));
|
||
narrEl.appendChild(el('strong',null,critical+' role'+(critical!==1?'s':'')+' at critical coverage'));
|
||
narrEl.appendChild(document.createTextNode(' — supply is below demand. A CRM would surface this only if someone ran the report. This system surfaces it before you log in.'));
|
||
} else if(tight>0){
|
||
narrEl.appendChild(document.createTextNode('The system flagged '));
|
||
narrEl.appendChild(el('strong',null,tight+' role'+(tight!==1?'s':'')+' as tight'));
|
||
narrEl.appendChild(document.createTextNode(' — watch for supply compression. Pre-emptive signal, no query required.'));
|
||
} else {
|
||
narrEl.textContent='No coverage gaps right now — bench exceeds predicted demand across all roles. The system is tracking this continuously; check back tomorrow and the numbers will have moved.';
|
||
}
|
||
}).catch(function(e){
|
||
var h=document.getElementById('ch1-stats');h.textContent='';h.appendChild(el('div','err','Live state unavailable: '+(e.message||e)));
|
||
});
|
||
document.getElementById('hdr-time').textContent='Snapshot · '+new Date().toLocaleTimeString();
|
||
}
|
||
function addStat(host,n,l,sub,cls){
|
||
var d=el('div','card stat-lg '+(cls||''));
|
||
d.appendChild(el('div','n',n));
|
||
d.appendChild(el('div','l',l));
|
||
d.appendChild(el('div','sub',sub||''));
|
||
host.appendChild(d);
|
||
}
|
||
|
||
// ─── Chapter 2 ────────────────────────────────────────────
|
||
function loadChapter2(){
|
||
api('/intelligence/market',{}).then(function(r){
|
||
var host=document.getElementById('ch2-permits');host.textContent='';
|
||
if(r.error){host.appendChild(el('div','err','Permit feed error: '+r.error));return}
|
||
var byType=r.by_type||[];
|
||
if(byType.length===0){host.appendChild(el('div','narr','No permits returned by the Chicago API right now.'));return}
|
||
byType.slice(0,8).forEach(function(t){
|
||
var det=document.createElement('details');
|
||
var summary=document.createElement('summary');
|
||
summary.appendChild(el('span','pill real','LIVE · DATA.CITYOFCHICAGO.ORG'));
|
||
summary.appendChild(document.createTextNode(' '));
|
||
var wt=el('strong',null,t.work_type||'General construction');
|
||
summary.appendChild(wt);
|
||
summary.appendChild(document.createTextNode(' · '+(t.permits||0)+' permits · $'+(t.total_cost||0).toLocaleString('en-US',{maximumFractionDigits:0})+' · est '+(t.estimated_workers||0)+' workers needed'));
|
||
det.appendChild(summary);
|
||
var body=el('div','body');
|
||
body.appendChild(document.createTextNode('Likely roles: '+((t.needed_roles||[]).join(', ')||'—')+'. '));
|
||
body.appendChild(document.createTextNode('At industry heuristic (~$150K per worker), this work type alone implies '));
|
||
body.appendChild(el('strong',null,(t.estimated_workers||0)+' staffing opportunities'));
|
||
body.appendChild(document.createTextNode(' over the next 30-60 days.'));
|
||
det.appendChild(body);
|
||
host.appendChild(det);
|
||
});
|
||
}).catch(function(e){
|
||
var h=document.getElementById('ch2-permits');h.textContent='';h.appendChild(el('div','err',e.message||String(e)));
|
||
});
|
||
}
|
||
|
||
// ─── Chapter 3 ────────────────────────────────────────────
|
||
function loadChapter3(){
|
||
apiGet('/api/catalog/datasets').then(function(ds){
|
||
var host=document.getElementById('ch3-datasets');host.textContent='';
|
||
if(!Array.isArray(ds)){host.appendChild(el('div','err','No datasets returned.'));return}
|
||
var bigOnes=ds.filter(function(d){return (d.row_count||0)>=500}).sort(function(a,b){return (b.row_count||0)-(a.row_count||0)});
|
||
var playbookKeys=['successful_playbooks','playbook_memory','kb_'];
|
||
bigOnes.slice(0,12).forEach(function(d){
|
||
var row=el('div','row');
|
||
var left=document.createElement('div');left.style.flex='1';left.style.minWidth='0';
|
||
var t=el('div','title');
|
||
var pillCls='synth', pillLabel='SWAP FOR YOUR DATA';
|
||
if(playbookKeys.some(function(k){return (d.name||'').indexOf(k)>=0})){pillCls='flow';pillLabel='SYSTEM-GENERATED'}
|
||
else if((d.name||'').indexOf('threat_')===0){pillCls='flow';pillLabel='SYSTEM-GENERATED'}
|
||
t.appendChild(el('span','pill '+pillCls,pillLabel));
|
||
t.appendChild(document.createTextNode(' '+(d.name||'(unnamed)')));
|
||
var m=el('div','meta',(d.columns?d.columns.length+' columns · ':'')+(d.objects?d.objects.length+' parquet file'+(d.objects.length!==1?'s':''):''));
|
||
left.appendChild(t);left.appendChild(m);
|
||
var v=el('div','val',(d.row_count||0).toLocaleString()+' rows');
|
||
row.appendChild(left);row.appendChild(v);host.appendChild(row);
|
||
});
|
||
}).catch(function(e){
|
||
var h=document.getElementById('ch3-datasets');h.textContent='';h.appendChild(el('div','err','Catalog unavailable: '+(e.message||e)));
|
||
});
|
||
}
|
||
|
||
// ─── Chapter 4 ────────────────────────────────────────────
|
||
function loadChapter4(){
|
||
api('/intelligence/permit_contracts',{}).then(function(r){
|
||
var host=document.getElementById('ch4-demo');host.textContent='';
|
||
if(!r.contracts||r.contracts.length===0){host.appendChild(el('div','loading','No contracts returned.'));return}
|
||
var c=r.contracts[0];
|
||
var p=c.permit||{}, prop=c.proposed||{}, tl=c.timeline||{};
|
||
var card=el('div','card accent-b');
|
||
var title=el('div',null,'$'+(p.cost||0).toLocaleString()+' · '+(p.work_type||''));
|
||
title.style.cssText='font-size:15px;font-weight:600;color:#e6edf3';
|
||
card.appendChild(title);
|
||
var addr=el('div',null,(p.address||'')+' · Chicago, IL · filed '+(p.issue_date||''));
|
||
addr.style.cssText='color:#8b949e;font-size:12px;margin-top:2px';
|
||
card.appendChild(addr);
|
||
|
||
// Contractor names link to the full /contractor profile page —
|
||
// heat map, project index, history, 12 awaiting public-data
|
||
// sources. The staffer click-through J asked for.
|
||
if(p.contact_1_name || p.contact_2_name){
|
||
var contractors=document.createElement('div');
|
||
contractors.style.cssText='color:#8b949e;font-size:12px;margin-top:4px';
|
||
contractors.appendChild(document.createTextNode('Contractors: '));
|
||
var seen=[];
|
||
[p.contact_1_name, p.contact_2_name].forEach(function(n,i){
|
||
if(!n || seen.indexOf(n)>=0) return;
|
||
seen.push(n);
|
||
if(seen.length>1) contractors.appendChild(document.createTextNode(' · '));
|
||
var a=document.createElement('a');
|
||
a.href=P+'/contractor?name='+encodeURIComponent(n);
|
||
a.target='_blank';
|
||
a.rel='noopener';
|
||
a.style.cssText='color:#58a6ff;text-decoration:none;border-bottom:1px dotted #58a6ff44';
|
||
a.title='Open full contractor profile';
|
||
a.textContent=n;
|
||
contractors.appendChild(a);
|
||
});
|
||
card.appendChild(contractors);
|
||
}
|
||
|
||
card.appendChild(el('div','step-label','STEP 1 · Derive staffing need'));
|
||
var s1=el('div','step-body');
|
||
s1.appendChild(document.createTextNode('Industry heuristic: ~1 worker per $150K of permit cost, capped 2-8. Resulting contract: '));
|
||
s1.appendChild(el('strong',null,(prop.count||0)+'× '+(prop.role||'')));
|
||
s1.appendChild(document.createTextNode(' in Chicago, IL.'));
|
||
card.appendChild(s1);
|
||
|
||
card.appendChild(el('div','step-label','STEP 2 · Narrow via SQL ('+((prop.pool_size||0).toLocaleString())+' candidates match)'));
|
||
card.appendChild(el('div','step-body',"role = '"+(prop.role||'')+"' AND state = 'IL' AND city = 'Chicago' AND CAST(availability AS DOUBLE) > 0.5"));
|
||
|
||
card.appendChild(el('div','step-label','STEP 3 · Rank via semantic match + playbook boost'));
|
||
host.appendChild(card);
|
||
|
||
var list=document.createElement('div');list.style.marginTop='6px';
|
||
(prop.candidates||[]).slice(0,5).forEach(function(cand,i){
|
||
var detail = cand.doc_id+' · '+(cand.playbook_boost>0?'boosted +'+cand.playbook_boost.toFixed(3)+' by memory · ':'')+'semantic score '+(cand.score||0).toFixed(3);
|
||
var endorsed = (cand.playbook_boost||0) > 0
|
||
? 'Endorsed · '+((cand.playbook_citations||[]).length)+' past fill'+((cand.playbook_citations||[]).length!==1?'s':'')
|
||
: null;
|
||
list.appendChild(workerRow(cand.name||cand.doc_id||'?', prop.role||'', detail, {
|
||
endorsed: endorsed, score: '#'+(i+1)
|
||
}));
|
||
});
|
||
card.appendChild(list);
|
||
|
||
if(c.discovered_pattern||c.pattern_matched>0){
|
||
var mem=el('div','mem-chip');
|
||
mem.appendChild(el('span','l','MEMORY ('+(c.pattern_matched||0)+' past playbooks):'));
|
||
mem.appendChild(document.createTextNode(' '+(c.discovered_pattern||'memory is sparse for this role+geo')));
|
||
card.appendChild(mem);
|
||
}
|
||
|
||
if(tl.days_to_deadline!==undefined){
|
||
var tm=document.createElement('div');
|
||
tm.style.cssText='margin-top:12px;padding-top:10px;border-top:1px solid #171d27;font-size:12px;color:#8b949e';
|
||
tm.appendChild(el('strong',null,'Timeline. '));
|
||
tm.childNodes[0].style && (tm.childNodes[0].style.color='#c9d1d9');
|
||
var dd=tl.days_to_deadline;
|
||
var when=(dd<=0?Math.abs(dd)+' days overdue':dd+' days out');
|
||
tm.appendChild(document.createTextNode('Staffing window opens '+(tl.staffing_window_opens||'')+' ('+when+'). Construction starts '+(tl.estimated_construction_start||'')+'. Urgency: '));
|
||
tm.appendChild(el('strong',null,(tl.urgency||'').toUpperCase()));
|
||
tm.appendChild(document.createTextNode('.'));
|
||
card.appendChild(tm);
|
||
}
|
||
|
||
var note=el('div','narr');
|
||
note.appendChild(el('strong',null,'This is the CRM gap. '));
|
||
note.appendChild(document.createTextNode('A CRM would tell you the permit exists. It would NOT narrow to matching candidates, would NOT boost past-successful workers, would NOT flag patterns across similar past fills, would NOT count down to the deadline. All that happens here, pre-computed, before the staffer clicks anything.'));
|
||
host.appendChild(note);
|
||
}).catch(function(e){
|
||
var h=document.getElementById('ch4-demo');h.textContent='';h.appendChild(el('div','err','Demo failed: '+(e.message||e)));
|
||
});
|
||
}
|
||
|
||
// ─── Chapter 5 ────────────────────────────────────────────
|
||
function loadChapter5(){
|
||
apiGet('/api/vectors/playbook_memory/stats').then(function(mem){
|
||
var host=document.getElementById('ch5-memory');host.textContent='';
|
||
var card=el('div','card accent-l');
|
||
var big=el('div',null,(mem.entries||0).toLocaleString());
|
||
big.style.cssText='font-size:30px;font-weight:800;color:#e6edf3;line-height:1';
|
||
card.appendChild(big);
|
||
var lb=el('div',null,'Playbooks in memory');
|
||
lb.style.cssText='font-size:10px;color:#545d68;text-transform:uppercase;letter-spacing:1.2px;margin-top:8px;font-weight:600';
|
||
card.appendChild(lb);
|
||
var sub=el('div',null,(mem.total_names_endorsed||0).toLocaleString()+' endorsed worker-tags · each one boosts future matching queries');
|
||
sub.style.cssText='font-size:12px;color:#8b949e;margin-top:4px';
|
||
card.appendChild(sub);
|
||
host.appendChild(card);
|
||
|
||
if(mem.sample&&mem.sample.length){
|
||
var hdr=document.createElement('div');
|
||
hdr.style.cssText='color:#545d68;font-size:11px;text-transform:uppercase;letter-spacing:1.4px;font-weight:600;margin:14px 0 8px';
|
||
hdr.textContent='Sample playbooks held in memory right now';
|
||
host.appendChild(hdr);
|
||
mem.sample.slice(0,5).forEach(function(pb){
|
||
var row=el('div','row');
|
||
var left=document.createElement('div');left.style.flex='1';left.style.minWidth='0';
|
||
left.appendChild(el('div','title',pb.operation||'(no operation)'));
|
||
left.appendChild(el('div','meta',(pb.city||'')+', '+(pb.state||'')+' · endorsed: '+((pb.endorsed||[]).slice(0,3).join(', ')||'—')));
|
||
row.appendChild(left);host.appendChild(row);
|
||
});
|
||
}
|
||
|
||
var narr=el('div','narr');
|
||
narr.appendChild(el('strong',null,'What this means for a staffer. '));
|
||
narr.appendChild(document.createTextNode('When you log a successful fill, this counter grows by one. Next time someone searches for a similar role+city, the system finds your past pick and boosts them to the top. Over months, the system becomes a record of who has actually worked out — not just who is on the roster.'));
|
||
host.appendChild(narr);
|
||
}).catch(function(e){
|
||
var h=document.getElementById('ch5-memory');h.textContent='';h.appendChild(el('div','err','Memory unavailable: '+(e.message||e)));
|
||
});
|
||
}
|
||
|
||
// ─── Chapter 6 — per-staffer hot-swap ─────────────────────
|
||
function loadChapter6(){
|
||
apiGet('/staffers').then(function(r){
|
||
var host=document.getElementById('ch6-staffers');host.textContent='';
|
||
var staffers=(r&&r.staffers)||[];
|
||
if(!staffers.length){
|
||
host.appendChild(el('div','err','No staffer roster — /staffers returned empty.'));
|
||
return;
|
||
}
|
||
var grid=document.createElement('div'); grid.className='grid'; grid.style.gridTemplateColumns='repeat(auto-fit,minmax(280px,1fr))';
|
||
staffers.forEach(function(s){
|
||
var card=el('div','card accent-b');
|
||
var name=el('div',null,s.name);
|
||
name.style.cssText='font-size:18px;font-weight:700;color:#e6edf3;letter-spacing:-0.3px';
|
||
card.appendChild(name);
|
||
var role=el('div',null,s.display||'');
|
||
role.style.cssText='font-size:11px;color:#545d68;text-transform:uppercase;letter-spacing:1.2px;margin-top:2px';
|
||
card.appendChild(role);
|
||
var ter=el('div',null,'Territory: '+s.territory.state+' · '+s.territory.cities.slice(0,3).join(', ')+'…');
|
||
ter.style.cssText='color:#8b949e;font-size:12px;margin-top:8px';
|
||
card.appendChild(ter);
|
||
var greet=el('div',null,s.greeting||'');
|
||
greet.style.cssText='color:#c9d1d9;font-size:11px;margin-top:6px;line-height:1.5;border-top:1px dashed #1f2631;padding-top:6px';
|
||
card.appendChild(greet);
|
||
grid.appendChild(card);
|
||
});
|
||
host.appendChild(grid);
|
||
var narr=el('div','narr');
|
||
narr.appendChild(el('strong',null,'What this means for a staffer. '));
|
||
narr.appendChild(document.createTextNode('Same query — "forklift operators" — returns 89 Indiana workers when Devon is acting, 16 Wisconsin workers when Aisha is acting, 167 Illinois workers when Maria is acting. The MEMORY panel relabels itself with whoever\'s viewing. The corpus stays intact; the relevance gradient is per coordinator. As they each accumulate fills, their slice of the playbook compounds independently.'));
|
||
host.appendChild(narr);
|
||
}).catch(function(e){
|
||
var h=document.getElementById('ch6-staffers');h.textContent='';h.appendChild(el('div','err','Staffer roster unavailable: '+(e.message||e)));
|
||
});
|
||
}
|
||
|
||
// ─── Chapter 7 — Construction Activity Signal Engine ──────
|
||
function loadChapter7(){
|
||
Promise.all([
|
||
api('/intelligence/profiler_index',{limit:200}),
|
||
]).then(function(rs){
|
||
var prof=rs[0]||{};
|
||
var rows=prof.contractors||[];
|
||
var host=document.getElementById('ch7-signal');host.textContent='';
|
||
// Aggregate basket
|
||
var byTicker={};
|
||
rows.forEach(function(r){
|
||
var ts=(r.tickers&&r.tickers.direct?r.tickers.direct:[]).concat(r.tickers&&r.tickers.associated?r.tickers.associated:[]);
|
||
ts.forEach(function(t){
|
||
if(!t||!t.ticker) return;
|
||
if(!byTicker[t.ticker]) byTicker[t.ticker]={ticker:t.ticker,count:0,kinds:new Set()};
|
||
byTicker[t.ticker].count++;
|
||
byTicker[t.ticker].kinds.add(t.via);
|
||
});
|
||
});
|
||
var basket=Object.values(byTicker).sort(function(a,b){return b.count-a.count});
|
||
var attribCost=0;
|
||
rows.forEach(function(r){
|
||
var ts=(r.tickers&&r.tickers.direct?r.tickers.direct:[]).concat(r.tickers&&r.tickers.associated?r.tickers.associated:[]);
|
||
if(ts.length>0) attribCost += (r.total_cost||0);
|
||
});
|
||
var totalAttrib = basket.reduce(function(s,b){return s+b.count},0);
|
||
if(!basket.length){
|
||
host.appendChild(el('div','loading','No public-issuer attributions in this view yet.'));
|
||
return;
|
||
}
|
||
// Top-line metric strip
|
||
var grid=document.createElement('div');grid.className='grid';
|
||
var c1=el('div','card accent-g');
|
||
var b1=el('div',null,basket.length); b1.style.cssText='font-size:30px;font-weight:800;color:#3fb950;line-height:1';
|
||
c1.appendChild(b1);
|
||
var l1=el('div',null,'Public issuers in scope'); l1.style.cssText='font-size:10px;color:#545d68;text-transform:uppercase;letter-spacing:1.2px;margin-top:8px;font-weight:600';
|
||
c1.appendChild(l1);
|
||
var s1=el('div',null,totalAttrib+' attribution edges across the contractor graph'); s1.style.cssText='font-size:12px;color:#8b949e;margin-top:4px';
|
||
c1.appendChild(s1);
|
||
grid.appendChild(c1);
|
||
var c2=el('div','card accent-b');
|
||
var bav = attribCost>=1e9?'$'+(attribCost/1e9).toFixed(2)+'B':attribCost>=1e6?'$'+(attribCost/1e6).toFixed(0)+'M':'$'+Math.round(attribCost/1e3)+'K';
|
||
var b2=el('div',null,bav); b2.style.cssText='font-size:30px;font-weight:800;color:#58a6ff;line-height:1';
|
||
c2.appendChild(b2);
|
||
var l2=el('div',null,'Attributed build value'); l2.style.cssText='font-size:10px;color:#545d68;text-transform:uppercase;letter-spacing:1.2px;margin-top:8px;font-weight:600';
|
||
c2.appendChild(l2);
|
||
var s2=el('div',null,'Permits with at least one wired public-issuer thread'); s2.style.cssText='font-size:12px;color:#8b949e;margin-top:4px';
|
||
c2.appendChild(s2);
|
||
grid.appendChild(c2);
|
||
var c3=el('div','card accent-l');
|
||
var b3=el('div',null,rows.length); b3.style.cssText='font-size:30px;font-weight:800;color:#bc8cff;line-height:1';
|
||
c3.appendChild(b3);
|
||
var l3=el('div',null,'Contractors indexed'); l3.style.cssText='font-size:10px;color:#545d68;text-transform:uppercase;letter-spacing:1.2px;margin-top:8px;font-weight:600';
|
||
c3.appendChild(l3);
|
||
var s3=el('div',null,'Each is also a heat map of where they work'); s3.style.cssText='font-size:12px;color:#8b949e;margin-top:4px';
|
||
c3.appendChild(s3);
|
||
grid.appendChild(c3);
|
||
host.appendChild(grid);
|
||
// Top issuer table
|
||
var tHdr=document.createElement('div');tHdr.style.cssText='color:#545d68;font-size:11px;text-transform:uppercase;letter-spacing:1.4px;font-weight:600;margin:14px 0 8px';
|
||
tHdr.textContent='Top public issuers attributable in this view';
|
||
host.appendChild(tHdr);
|
||
basket.slice(0,8).forEach(function(b){
|
||
var row=el('div','row');
|
||
var left=document.createElement('div');left.style.flex='1';left.style.minWidth='0';
|
||
var tk=el('div','title',b.ticker);
|
||
tk.style.cssText+='font-family:ui-monospace,monospace;color:#3fb950';
|
||
left.appendChild(tk);
|
||
var kinds=Array.from(b.kinds);
|
||
var meta=el('div','meta',b.count+' attribution'+(b.count===1?'':'s')+' · '+kinds.join('+'));
|
||
left.appendChild(meta);
|
||
row.appendChild(left);
|
||
var right=document.createElement('div');right.style.cssText='font-size:11px;color:#58a6ff';
|
||
var a=document.createElement('a');a.href=P+'/profiler';a.target='_blank';a.style.color='#58a6ff';a.style.textDecoration='none';
|
||
a.textContent='see in profiler →';
|
||
right.appendChild(a);
|
||
row.appendChild(right);
|
||
host.appendChild(row);
|
||
});
|
||
var narr=el('div','narr');
|
||
narr.appendChild(el('strong',null,'What this means for the business. '));
|
||
narr.appendChild(document.createTextNode('The data corpus is also a market-signal engine. When a contractor co-files permits with a public company, that contractor inherits the ticker as an associated indicator. Permit volume changes precede earnings calls by months. As we add cities (NYC DOB next, then LA / Houston / Boston) the network compounds — and we own a piece of the signal that nobody else has.'));
|
||
host.appendChild(narr);
|
||
}).catch(function(e){
|
||
var h=document.getElementById('ch7-signal');h.textContent='';h.appendChild(el('div','err','Signal engine unavailable: '+(e.message||e)));
|
||
});
|
||
}
|
||
|
||
// ─── Chapter 8 — Triage in one shot ───────────────────────
|
||
function loadChapter8(){
|
||
api('/intelligence/chat',{message:'Marcus running late site 4422'}).then(function(d){
|
||
var host=document.getElementById('ch8-triage');host.textContent='';
|
||
if(d.type!=='triage'){
|
||
host.appendChild(el('div','err','Triage route did not fire. Got type=' + (d.type||'?')));
|
||
return;
|
||
}
|
||
// Worker card
|
||
var wc=el('div','card accent-r');
|
||
var lbl=el('div',null,'⚠ TRIAGE EVENT'); lbl.style.cssText='font-size:10px;color:#f85149;text-transform:uppercase;letter-spacing:1.2px;font-weight:700;margin-bottom:8px';
|
||
wc.appendChild(lbl);
|
||
var nm=el('div',null,d.worker.name); nm.style.cssText='font-size:18px;font-weight:700;color:#e6edf3';
|
||
wc.appendChild(nm);
|
||
var loc=el('div',null,(d.worker.role||'?')+' · '+(d.worker.city||'')+', '+(d.worker.state||''));
|
||
loc.style.cssText='font-size:12px;color:#8b949e;margin-top:2px';
|
||
wc.appendChild(loc);
|
||
var stats=document.createElement('div');stats.style.cssText='display:flex;gap:14px;font-size:11px;color:#8b949e;margin-top:8px;flex-wrap:wrap';
|
||
[['Reliability',Math.round((d.worker.rel||0)*100)+'%'],['Responsiveness',Math.round((d.worker.resp||0)*100)+'%'],['Availability',Math.round((d.worker.avail||0)*100)+'%']].forEach(function(p){
|
||
var s=document.createElement('span');
|
||
var l=document.createElement('span');l.textContent=p[0]+': ';
|
||
var b=document.createElement('b');b.style.color='#e6edf3';b.textContent=p[1];
|
||
s.appendChild(l);s.appendChild(b);stats.appendChild(s);
|
||
});
|
||
wc.appendChild(stats);
|
||
host.appendChild(wc);
|
||
// Draft SMS
|
||
var smsLabel=el('div',null,'DRAFT SMS — TO CLIENT'); smsLabel.style.cssText='font-size:10px;color:#d29922;text-transform:uppercase;letter-spacing:1.2px;font-weight:700;margin:14px 0 4px';
|
||
host.appendChild(smsLabel);
|
||
var smsBox=el('div',null,d.draft_sms||'');
|
||
smsBox.style.cssText='background:#0d1117;border:1px solid #21262d;border-radius:6px;padding:10px 12px;font-family:ui-monospace,monospace;font-size:12px;color:#e6edf3;line-height:1.5;white-space:pre-wrap';
|
||
host.appendChild(smsBox);
|
||
// Backfills
|
||
if((d.backfills||[]).length){
|
||
var bfHdr=document.createElement('div');bfHdr.style.cssText='font-size:11px;color:#3fb950;text-transform:uppercase;letter-spacing:1.2px;font-weight:600;margin:14px 0 8px';
|
||
bfHdr.textContent='✓ '+d.backfills.length+' local '+(d.worker.role||'workers')+' available — sorted by responsiveness';
|
||
host.appendChild(bfHdr);
|
||
d.backfills.slice(0,5).forEach(function(c){
|
||
var detail=(c.role||'?')+' · '+(c.city||'')+', '+(c.state||'')+' · rel '+Math.round((c.rel||0)*100)+'% · resp '+Math.round((c.resp||0)*100)+'%';
|
||
host.appendChild(workerRow(c.name||'?', c.role||'', detail));
|
||
});
|
||
}
|
||
var narr=el('div','narr');
|
||
narr.appendChild(el('strong',null,'What this means for a coordinator. '));
|
||
narr.appendChild(document.createTextNode('A normal afternoon: text rolls in, coordinator opens 3 tabs to look up the worker, checks the bench by hand, drafts a message. 20 minutes. Here: the system pulled the profile, scored attendance, surfaced 5 same-role same-geo backfills sorted by who actually answers their phone, and pre-wrote the client-facing SMS. The coordinator clicks send. ' + d.duration_ms + 'ms.'));
|
||
host.appendChild(narr);
|
||
}).catch(function(e){
|
||
var h=document.getElementById('ch8-triage');h.textContent='';h.appendChild(el('div','err','Triage demo unavailable: '+(e.message||e)));
|
||
});
|
||
}
|
||
|
||
// ─── Chapter 9 (was 6) — Try it yourself ──────────────────
|
||
function runTry(){
|
||
var q=document.getElementById('try-q').value.trim();if(!q)return;
|
||
var btn=document.getElementById('try-btn'),out=document.getElementById('try-out');
|
||
btn.disabled=true;btn.textContent='Thinking…';out.textContent='';out.appendChild(el('div','loading','Running…'));
|
||
api('/intelligence/chat',{message:q}).then(function(d){
|
||
btn.disabled=false;btn.textContent='Ask';out.textContent='';
|
||
var card=el('div','card accent-b');
|
||
if(d.understood&&d.understood.length){
|
||
var tags=document.createElement('div');tags.style.cssText='display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px';
|
||
d.understood.forEach(function(u){
|
||
var tg=el('span',null,u);
|
||
tg.style.cssText='padding:3px 10px;border-radius:10px;font-size:11px;background:#1a274420;color:#58a6ff;border:1px solid #1a274480';
|
||
tags.appendChild(tg);
|
||
});
|
||
card.appendChild(tags);
|
||
}
|
||
var sum=el('div',null,d.summary||'(no summary)');
|
||
sum.style.cssText='color:#c9d1d9;font-size:13px;margin-bottom:10px';
|
||
card.appendChild(sum);
|
||
|
||
if(d.pattern_playbooks_matched>0&&d.discovered_pattern){
|
||
var mem=el('div','mem-chip');
|
||
mem.appendChild(el('span','l','MEMORY ('+d.pattern_playbooks_matched+' playbooks):'));
|
||
mem.appendChild(document.createTextNode(' '+d.discovered_pattern));
|
||
card.appendChild(mem);
|
||
}
|
||
|
||
var workers=d.sql_results||d.vector_results||d.results||[];
|
||
workers.slice(0,5).forEach(function(w,i){
|
||
var nm=w.name||(w.text||'').split('—')[0].trim()||w.doc_id||'?';
|
||
var bits=[];
|
||
if(w.role) bits.push(w.role);
|
||
if(w.city&&w.state) bits.push(w.city+', '+w.state);
|
||
if(w.rel!==undefined) bits.push('reliability '+Math.round(w.rel*100)+'%');
|
||
if(w.avail!==undefined) bits.push('availability '+Math.round(w.avail*100)+'%');
|
||
var endorsed = (w.playbook_boost||0) > 0
|
||
? 'Endorsed · '+((w.playbook_citations||[]).length||'?')+' past fill(s)'
|
||
: null;
|
||
var row = workerRow(nm, w.role||'', bits.join(' · ')||'AI semantic match', { endorsed: endorsed });
|
||
row.appendChild(el('div','score','#'+(i+1)));
|
||
card.appendChild(row);
|
||
});
|
||
var meta=el('div',null,(d.duration_ms||0)+'ms · type='+(d.type||'smart_search'));
|
||
meta.style.cssText='color:#545d68;font-size:11px;margin-top:10px';
|
||
card.appendChild(meta);
|
||
out.appendChild(card);
|
||
}).catch(function(e){
|
||
btn.disabled=false;btn.textContent='Ask';
|
||
out.textContent='';out.appendChild(el('div','err',e.message||String(e)));
|
||
});
|
||
}
|
||
</script>
|
||
</body></html>
|