// Template detail page — CONTROL ROOM (dark operator console) const CR_DET = { bg: '#0a0c0d', bg2: '#11141a', bg3: '#181c24', line: '#232830', line2: '#2e353f', fg: '#d7dde6', fgDim: '#8b95a3', fgFaint:'#3a424e', phos: 'oklch(0.82 0.20 145)', amber: 'oklch(0.82 0.17 75)', tomato: 'oklch(0.68 0.20 30)', cyan: 'oklch(0.80 0.13 200)', mono: 'IBM Plex Mono, ui-monospace, monospace', sans: 'IBM Plex Sans, system-ui, sans-serif', }; const C = CR_DET; const led = (color, glow = true) => ({ width: 7, height: 7, borderRadius: '50%', background: color, display: 'inline-block', boxShadow: glow ? `0 0 6px ${color}` : 'none' }); // ── component previews ───────────────────────────────────── function CRC01_Shell() { return (
● LIVE 18:37 packet generated · 18:21 waiver expired · 18:14 released
// DRAWREQUEST · LENDER CONSOLE
CORNERSTONE CAPITAL
ONLINE ⇧A
{['ADMIN','LOAN','GC','SUB','INSP','OWNER','FIN','AUD'].map((r, i) => (
{r}
0{[5,3,2,1,4,2,1,0][i]}
))}
// TICKER · TITLE · ACTOR STRIP · STATUS PILLS
); } function CRC02_Signin() { return (
// SECURE ACCESS · TLS 1.3
DRAWREQUEST.OS
$ identify --magic-link
marcus@cornerstone.cap
REQUEST KEY →
); } function CRC03_Actors() { return (
// OPERATORS · 8 · ACTIVE: ADMIN
{TPL_SAMPLE.actors.map((a, i) => { const isActive = i === 0; const q = [5,3,2,1,4,2,1,0][i]; return (
2 ? C.amber : (q > 0 ? C.phos : C.fgFaint)), isActive)} /> {a[0]}
{a[2].toUpperCase().slice(0,7)}
0 ? C.phos : C.fgFaint, marginTop: 1 }}>{String(q).padStart(2, '0')}
); })}
); } function CRC04_Home() { return (
// PORTFOLIO · EXPOSURE
$62.6M
{[['RELEASED','$127.8K'],['HELD','$255.6K'],['FLAGS','01']].map(([l,v], i) => (
{l}
{v}
))}
); } function CRC05_List() { return (
// DRAWS · 08 IN FLIGHT
{['DRAW','PROJECT','AMT','ST'].map(h => ())} {TPL_SAMPLE.draws.map((d, i) => ( ))}
{h}
{d[0]} {d[1]} {d[2]} {d[3].slice(0,5)}
); } function CRC06_Detail() { return (
// OBJECT · DRAW-2031
RIVERLINE PLAZA
$142,000
{[['CONTRACT','$2,377K'],['EARNED','$1,585K'],['NET','$127,800'],['WAIVERS','5/5']].map(([l,v], i) => (
{l}
{v}
))}
); } function CRC07_Form() { return (
// SUBMIT · STAGE 03/05 · SCHEDULE OF VALUES
{['PROJ','GC','SOV','WVR','SUB'].map((s, i) => ( {i < 3 ? '✓ ' : `0${i+1} `}{s} ))}
{[['03','CONCRETE','410,000'],['04','MASONRY','165,000'],['05','STEEL','540,000']].map((r, i) => (
{r[0]}{r[1]}{r[2]}
))}
NEXT →
); } function CRC08_Workflow() { return (
// HANDOFF CHAIN · DRAW-2031
{['GC','INSP','LOAN','OWN','FIN'].map((s, i) => ( {s} {i < 4 && →} ))}
STATE: INSPECTING · NEXT: LOAN
SLA: 04:22:18 · STEP 03 / 05
); } function CRC09_Audit() { const log = [ ['2026-05-15 18:37','packet_generated ','m.sterling'], ['2026-05-14 18:21','waiver_expired ','northwind ← 65d'], ['2026-05-14 18:14','draw_released ','p.alvarez'], ['2026-05-14 18:14','payment_released ','$127,800 net'], ['2026-05-13 18:37','approval_granted ','s.kim (owner)'], ['2026-05-13 11:08','approval_granted ','a.patel (loan)'], ['2026-05-12 16:32','inspection_done ','h.mendez'], ]; return (
// tail -f audit.log
{log.map((l, i) => (
{l[0]}{' '} {l[1]}{' '} {l[2]}
))}
); } function CRC10_Output() { return (
// G702 PACKET · GENERATED · 142ms
G702 · APP 07 · RIVERLINE
$142,000
{[100, 92, 78, 85, 64, 55].map((p, i) => (
0{i+1}
{p}%
))}
); } function CRC11_Settings() { const roles = ['ADMIN','LOAN','GC','SUB','INSP','OWNER']; return (
// PERMISSIONS · APPROVAL MATRIX
ROLEREADSUBMITAPPROVERELEASE
{roles.map((r, i) => (
{r} {[0,1,2,3].map(j => { const g = (i === 0) || (j === 0) || (i < 3 && j < 3) || (i === 5 && j === 3); return ; }).map((el, j) => {el})}
))}
); } function CRC12_Empty() { return (
$ ls draws/
0 results
NO SIGNAL
$ invite --role=gc --email=…
+ INVITE GC
); } // === detail page === function TemplateDetailControlroom() { return (
{/* HERO */}
// 03 of 06 · template credibility play

Control Room.

Operator console for businesses that ship things.

Control Room turns every uStack app into a real-time operator console: deep ink background, phosphor-green accents, 48px tabular numbers, LED status lights, scrolling event ticker, scanline overlays on marquee surfaces. Reads as "Bloomberg gravitas" the instant it loads — exactly what 24/7 dispatchers, lenders, and finance operators want to feel. Built on a single dark palette + per-vertical accent (phosphor green · hi-vis amber · tomato red · cyan · magenta).

● LIVE 18:37 packet generated · m. sterling · 18:21 waiver expired · northwind · 18:14 draw released · p. alvarez
// DRAWREQUEST · LENDER CONSOLE
CORNERSTONE CAPITAL
// PORTFOLIO · EXPOSURE
$62.6M
12 ACTIVE · ▲ $4.1M MTD
{[['RELEASED','$127.8K'],['HELD','$255.6K'],['OPEN','08'],['FLAGS','01', true]].map(([l,v,w], i) => (
{l}
{v}
))}
{['ADMIN','LOAN','GC','SUB','INSP','OWNER','FIN','AUD'].map((r, i) => (
{r}
{String([5,3,2,1,4,2,1,0][i]).padStart(2, '0')}
))}
// NORTH STAR HVAC · DISPATCH
TECH
{['08','10','12','14','16'].map(t =>
{t}
)} {['LOU','MAE','ROB','JEN'].map((tech, i) => (
{tech}
{[0,1,2,3,4].map(j => { const accent = (i === 2 && j === 1) ? C.tomato : (i === 0 || j === 2) ? C.amber : ((i + j) % 3 === 0 ? C.amber : null); return
{accent &&
{(i === 2 && j === 1) ? 'BURST' : 'JOB'}
}
; })} ))}
5 techs · 24 jobs · 1 SLA risk
) }, { name: 'DrawRequest', industry: 'Construction draws · alt', url: 'drawrequest.ustack.ai', actors: 8, signature: 'Number wall · waiver LEDs · ACH release as command', accent: C.bg, preview: (
// LENDER · PORTFOLIO
$62.6M
{[['REL','$127K'],['FLG','01'],['OPN','08']].map(([l,v], i) => (
{l}
{v}
))}
{[true,true,false,true,false,true,true,false].map((on, i) => )}
) }, { name: 'JobShop OS', industry: 'Manufacturing · alt', url: 'jobshop.ustack.ai', actors: 8, signature: 'Machine state · WIP queue · scrap LEDs · cycle times', accent: C.bg, preview: (
// SHOP · MACHINE STATE
{['MILL-1','LATHE-2','WELD-3','QA-4'].map((m, i) => (
{m}
{[82,64,100,38][i]}%
))}
WO-208 · 12 / 17 lines
) }, ]} />
); } window.TemplateDetailControlroom = TemplateDetailControlroom;