- The console on the left is the live punch clock — current time, the active shift, and
- four dials for what that shift looks like right now: open permits, workers needed,
- bench available, and coverage. The panel beside it adds combined bill demand for those
- permits, deadline pressure on the open queue, the top roles in demand, and a shift
- comparison strip. Click any shift in the comparison to filter every
- dial and the bill rate to that shift's slice of the internal calendar — past, active,
- or upcoming. Click the same shift again to return to the all-shifts total. This is the
- real world the rest of the page is reacting to.
+ Live from the City of Chicago Open Data permit feed (Building Permits
+ ≥ $250K), cross-referenced against our 500K-worker bench. The console on the left is
+ the punch clock — current time, today's active shift, and four dials watching
+ open permits, workers needed,
+ bench depth, and projected coverage. The panel on
+ the right reads the same feed financially: combined bill demand if every permit fills,
+ deadline pressure across overdue / urgent / soon / scheduled, the four roles
+ being asked for most, and a shift-mix bar. Click any shift bar to
+ re-slice the dials and the dollar counter to that shift's calendar slice; click again
+ to clear. The same permit feed drives the staffing forecast, the staffer's console,
+ and worker matches further down — this row is its heartbeat.
@@ -2355,8 +2499,12 @@ function loadLiveContracts(){
var p=c.permit||{}, prop=c.proposed||{}, tl=c.timeline||{};
var urg=tl.urgency||'scheduled';
var borderColor={overdue:'#f85149',urgent:'#d29922',soon:'#388bfd',scheduled:'#2ea043'}[urg]||'#388bfd';
- var card=document.createElement('div');card.className='insight info';
+ var card=document.createElement('div');card.className='insight info contract-card';
card.style.cssText='background:#0d1117;border:1px solid #171d27;border-radius:10px;padding:16px;margin-bottom:10px;border-left:3px solid '+borderColor;
+ // Foldable details container — fpRow / ecRow / Project Index /
+ // description / candidate rows all live here. Hidden until the
+ // card gets .expanded; CSS animates the grid-template-rows.
+ var detailsInner=document.createElement('div');detailsInner.className='card-details-inner';
// Header — permit
var hdr=document.createElement('div');hdr.style.cssText='display:flex;justify-content:space-between;margin-bottom:8px;gap:12px';
var left=document.createElement('div');
@@ -2416,6 +2564,48 @@ function loadLiveContracts(){
}
if(pillRow.childNodes.length) card.appendChild(pillRow);
+ // Compact summary strip — at-a-glance numbers so scanners get
+ // the headline without expanding. Mirrors the colors used in
+ // the full economics grid below: revenue green, margin tiered.
+ var strip=document.createElement('div');strip.className='card-strip';
+ function stripCell(label,value,color){
+ var s=document.createElement('span');
+ var b=document.createElement('strong');b.style.color=color||'#e6edf3';b.textContent=value;
+ s.appendChild(b);s.appendChild(document.createTextNode(label));
+ return s;
+ }
+ if(c.economics){
+ strip.appendChild(stripCell(' rev','$'+Math.round(c.economics.gross_revenue/1000)+'K','#3fb950'));
+ var stripMarginColor=c.economics.margin_pct>=25?'#3fb950':c.economics.margin_pct>=10?'#d29922':'#f85149';
+ strip.appendChild(stripCell(' margin',c.economics.margin_pct+'%',stripMarginColor));
+ }
+ if(c.fill_probability&&c.fill_probability.curve&&c.fill_probability.curve.length){
+ var bucket7=c.fill_probability.curve.find(function(pt){return pt.day===7});
+ var fillBucket=bucket7||c.fill_probability.curve[0];
+ var spanLabel=bucket7?' fill by 1wk':' fill by day '+fillBucket.day;
+ strip.appendChild(stripCell(spanLabel,fillBucket.cumulative_pct+'%','#58a6ff'));
+ }
+ var topCand=(prop.candidates||[])[0];
+ if(topCand&&topCand.name){
+ // Abbreviate "Maria Sanchez" → "Maria S." so the strip stays one line.
+ var nameParts=topCand.name.trim().split(/\s+/);
+ var topShort=nameParts.length>1?nameParts[0]+' '+(nameParts[nameParts.length-1][0]||'')+'.':nameParts[0];
+ strip.appendChild(stripCell(' top match',topShort,'#e6edf3'));
+ }
+ if(strip.childNodes.length) card.appendChild(strip);
+
+ // Pattern (meta-index) chip — kept visible on the compact card
+ // because it's a glance-worthy "we have playbooks for this kind
+ // of contract" signal that doesn't take much vertical space.
+ if(c.discovered_pattern){
+ var pat=document.createElement('div');pat.style.cssText='background:#0d2818;border:1px solid #2ea04360;border-radius:6px;padding:8px 12px;margin-bottom:10px;font-size:11px;color:#86efac;line-height:1.5';
+ var plabel=document.createElement('span');plabel.style.cssText='color:#3fb950;font-weight:600;margin-right:6px';
+ plabel.textContent='MEMORY ('+c.pattern_matched+' playbooks):';
+ pat.appendChild(plabel);
+ pat.appendChild(document.createTextNode(' '+c.discovered_pattern));
+ card.appendChild(pat);
+ }
+
// Fill-probability curve — shows "likelihood of filling by day N"
// as a horizontal bar of cumulative percentages. Drill down that
// J asked for: "percentage likelihood of filling them on a certain time."
@@ -2429,9 +2619,27 @@ function loadLiveContracts(){
var fpBase=document.createElement('span');fpBase.textContent='base '+fp.base_pct+'% · pool × urgency';
fpLabel.appendChild(fpTitle);fpLabel.appendChild(fpBase);
fpRow.appendChild(fpLabel);
- // Horizontal stacked bar — each bucket as a segment
+ // Horizontal stacked bar — each bucket as a segment.
+ // .fp-bar starts hidden (clip-path); IntersectionObserver adds
+ // .lit when the bar enters viewport, which fires the paint +
+ // shimmer animations defined in the