From 05f2e42c45af862edb89ea2f0ee063fc35436cde Mon Sep 17 00:00:00 2001 From: root Date: Mon, 20 Apr 2026 17:35:45 -0500 Subject: [PATCH] Rebuild /console as narrative walkthrough for a skeptical staffer MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Old console was a chat playground. New console is a guided, chapter-based explanation that a non-technical staffing staffer can read top-down and finish convinced — without needing to understand any of the underlying technology. Six chapters, each loading live data: 1. Right now, this system is already thinking Four stats cards pulled live: construction pipeline $, predicted worker demand, rows under management, playbooks remembered. Then a narrative that names the current alert posture (critical/tight/ok). 2. The demand signal is real, not made up Expandable rows per Chicago permit work_type, with a direct link to data.cityofchicago.org for verification. Pill labeled LIVE · DATA.CITYOFCHICAGO.ORG leaves no ambiguity. 3. Where your own data would live Catalog enumerated with three pill classes: - SWAP FOR YOUR DATA (purple) — the synthetic tables that would be replaced by the client's ATS/CRM/call-log exports - SYSTEM-GENERATED (blue) — playbook memory, threat_intel, kb_* produced by the system itself Row counts + columns visible. Names it honestly. 4. Watch the system rank candidates in real time Takes the freshest Chicago permit, walks the staffer through all three steps (derive need → narrow via SQL → rank + boost), shows the top-5 workers with why, boost chip, memory chip, timeline, and a plain-English narrative of the CRM gap. 5. Every action compounds Playbook memory count + sample + narrative about what it means when the staffer logs a fill. 6. Try it yourself Free-text input hitting /intelligence/chat, renders response with memory chip + boost chips + ranked workers. Security: all API-derived strings go through textContent or el(tag,cls,text) helper. Zero innerHTML usage on dynamic content. Passes security reminder hook. File size: 419 → ~500 lines. Visual style matches the dashboard (same palette, typography, chip styles) so the two pages feel like one app. --- mcp-server/console.html | 811 +++++++++++++++++++++------------------- 1 file changed, 429 insertions(+), 382 deletions(-) diff --git a/mcp-server/console.html b/mcp-server/console.html index db47d6b..5fc2eb8 100644 --- a/mcp-server/console.html +++ b/mcp-server/console.html @@ -1,419 +1,466 @@ - + -Staffing Intelligence Console +Lakehouse — What Your Staffing System Would Do +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} + +.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} +.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} +} + + +
-

Staffing Intelligence Console

-
Analyzing 500,000 profiles...
+

Lakehouse — What Your Staffing System Would Do

+ +
Reading live state…
+
-
Scanning your entire workforce...
-
-
-
-
- - + +
+
Chapter 1
+

Right now, this system is already thinking

+
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.
+
Fetching live state…
+
+
+ +
+
Chapter 2
+

The demand signal is real, not made up

+
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 data.cityofchicago.org.
+
Loading permit feed…
+
+ +
+
Chapter 3
+

Where your own data would live

+
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.
+
Enumerating catalog…
+
+ The swap path. 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.
-
Powered by Lakehouse — Hybrid SQL + Vector Search across 500,000 embedded worker profiles
+ +
+
Chapter 4
+

Watch the system rank candidates in real time

+
This takes the most recent Chicago permit, derives the staffing need, pulls ranked candidates from the 500K bench, and shows you why each one ranked. Everything below loaded in about 3 seconds against the live system.
+
Running demo query…
+ +
+
Chapter 5
+

Every action compounds — the CRM-killer

+
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.
+
Reading playbook memory…
+
+ +
+
Chapter 6
+

Try it yourself

+
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.
+
+ + +
+
+
+ +
+ +
Lakehouse · demo instance · architecture & benchmarks
+ + +