demo: console — three new chapters reflecting recent shipments

J: "it's outdated." Console walkthrough was stuck on the original 6
chapters (legacy-bridge / permits / catalog / ranking demo / playbook
memory / try-it-yourself). Three weeks of new work weren't visible.

Three new chapters added between the existing playbook-memory chapter
and the input box; all pull live data from the running system:

  Chapter 6 — Three coordinators, three views of the same corpus
    Renders Maria/Devon/Aisha cards from /staffers with their
    territories. Frames the per-staffer hot-swap as the relevance
    gradient that compounds independently per coordinator. Same query
    "forklift operators" returns 89 IN / 16 WI / 167 IL workers
    depending on who's acting.

  Chapter 7 — The hidden signal — public issuers in your contractor graph
    Pulls /intelligence/profiler_index, builds the basket, shows
    issuer count + attributed build value + contractor count as the
    three top metrics. Lists top 8 issuers with attribution counts
    and direct-link to the profiler. This is the BAI / Signal Engine
    pitch in walkthrough form: every contractor name is also a forward
    indicator on a public equity. Cross-metro replication explicit
    in the closing paragraph.

  Chapter 8 — When something breaks — triage in one shot
    Live triage demo against /intelligence/chat with body
    {message:"Marcus running late site 4422"}. Renders the worker
    card + draft SMS + 5 backfills + duration_ms. The 250ms-vs-20min
    moment, made concrete with real Quincy IL workers.

Chapter 9 (was 6) — Try it yourself
  Updated input examples to demonstrate each new route:
    "8 production workers near 60607" → headcount + zip parser
    "Marcus running late site 4422"  → triage handler
    "Marcus"                          → bare-name lookup
    "what came in last night"         → temporal route
    "reliable forklift operators with OSHA certs" → hybrid SQL+vector
  Each is a click-to-run link beneath the input.

Two new accent classes: .accent-g (green for issuer-count) and
.accent-r (red for triage event).

Verified end-to-end on devop.live/lakehouse/console: 9 chapters
render, ch6 shows 3 staffer personas, ch7 shows 11 issuers / $347M /
200 contractors, ch8 shows Marcus V. Campbell + draft SMS + 5
backfills.
This commit is contained in:
root 2026-04-27 23:04:37 -05:00
parent 6366487b45
commit 4c46cf6a21

View File

@ -51,6 +51,8 @@ details .body{padding-top:10px;font-size:12px;color:#8b949e}
.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}
.worker .av{width:28px;height:28px;border-radius:6px;background:#1a2744;display:flex;align-items:center;justify-content:center;font-weight:600;color:#e6edf3;font-size:10px;flex-shrink:0}
@ -148,11 +150,40 @@ details .body{padding-top:10px;font-size:12px;color:#8b949e}
<div class="chapter">
<div class="num">Chapter 6</div>
<h2>Try it yourself</h2>
<div class="lede">Type any staffing question. The system picks the right search path (smart-parse, semantic discovery, analytics), shows what it understood, and returns ranked results with memory signal.</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. reliable forklift operators in Chicago with OSHA certs" onkeydown="if(event.key==='Enter')runTry()">
<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>
@ -192,6 +223,9 @@ window.addEventListener('load',function(){
loadChapter3();
loadChapter4();
loadChapter5();
loadChapter6();
loadChapter7();
loadChapter8();
});
// ─── Chapter 1 ────────────────────────────────────────────
@ -432,7 +466,186 @@ function loadChapter5(){
});
}
// ─── Chapter 6 ────────────────────────────────────────────
// ─── 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 row=el('div','row');
var left=document.createElement('div');left.style.flex='1';left.style.minWidth='0';
left.appendChild(el('div','title',c.name));
left.appendChild(el('div','meta',(c.role||'?')+' · '+(c.city||'')+', '+(c.state||'')+' · rel '+Math.round((c.rel||0)*100)+'% · resp '+Math.round((c.resp||0)*100)+'%'));
row.appendChild(left);
host.appendChild(row);
});
}
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');