/* ════════════════════════════════════════════════════════════════════ AI ROADMAP — product mocks (hero shot + step media), pure CSS/JSX. Built from the DecidrOS visual vocabulary. Exposes on window. ════════════════════════════════════════════════════════════════════ */ /* ── clean panel header (proper section, not a browser tab) ── */ function Panel({ icon, title, badge, children }) { return (
{title} {badge && {badge}}
{children}
); } function GradMark({ s = 26, r = 8 }) { return ; } /* ══ HERO SHOT — DecidrOS workspace showing the roadmap ══ */ function HeroShot() { const nav = [["squares-four","Workspace",0],["map-trifold","Roadmap",1],["robot","Agents",0],["tree-structure","Knowledge",0],["chart-line-up","Metrics",0]]; const phases = [ { p:"Phase 1", t:"Define & migrate", d:"0–90 days", on:true, items:["Agent platform","Reporting GPT","Compliance agent"] }, { p:"Phase 2", t:"Build & automate", d:"90–180 days", on:false, items:["Proposal generator","ICP qualifier","Outreach"] }, { p:"Phase 3", t:"Scale & evolve", d:"180–365 days", on:false, items:["Client health","Competitive watch","Self-tuning"] }, ]; return (
{/* rail */} {/* main */}
AI Roadmap
12 months · 3 phases · sequenced
Phase 1 live in 90 days
{phases.map((ph) => (
{ph.on && }
{ph.p}
{ph.t}
{ph.d}
{ph.items.map((it,i) => (
{it}
))}
))}
{/* compliance strip */}
Workflow compliance agent
Monitoring 7 checkpoints · 0 open deviations
100%
on sequence
2m
alert latency
); } /* ══ STEP 1 — discovery findings (five friction points) ══ */ function MockDiscovery() { const rows = [ ["Workflow compliance","Deviation from defined steps","High"], ["Manual reporting","Reports built by hand","High"], ["Document generation","SoW and ToS drafted manually","Medium"], ["Capacity modelling","Works, but disconnected","Medium"], ["Sentiment tracking","Weekly scores unreliable","Low"], ]; const tone = { High:["var(--orange-400)","var(--orange-50)","var(--orange-700)"], Medium:["var(--yellow-500)","var(--yellow-50)","var(--yellow-800)"], Low:["var(--grey-400)","var(--grey-100)","var(--grey-700)"] }; return (
Five points found · same root cause
{rows.map(([t,d,sev],i) => { const c = tone[sev]; return (
{i+1}
{t}
{d}
{sev}
); })}
); } /* ══ STEP 2 — three themes, twelve months ══ */ function MockThemes() { const themes = [ ["map-pin-line","Operational","Monitor, detect and enforce compliance in near real time"], ["briefcase","Commercial","First-draft reports, SoWs and proposals from your records"], ["chart-donut","Business","Track client health and connect the blocks model to pipeline"], ]; return (
Three themes · one operating system
{themes.map(([ic,t,d],i) => (
{t} intelligence
{d}
))}
); } /* ══ STEP 3 — deterministic, inspectable agent run ══ */ function MockFlow() { const steps = [ ["Read canonical record","Golden Record · client #4192","done"], ["Apply ICP criteria","12 rules · deterministic","done"], ["Draft proposal","From service catalogue","done"], ["Write back decision","Versioned · 14:02 AEST","run"], ]; return (
Proposal generator Deterministic
{steps.map(([t,d,st],i) => (
{i}
{t}
{d}
))}
); } Object.assign(window, { HeroShot, MockDiscovery, MockThemes, MockFlow });