2424</ head >
2525< body class ="h-full bg-zinc-950 text-zinc-100 antialiased ">
2626
27- <!-- Sticky Chrome: Header + Status Bar -->
27+ <!-- Sticky Chrome: Header + Orchestration Bar -->
2828 < div class ="sticky top-0 z-50 ">
2929 < header class ="border-b border-zinc-800 bg-zinc-900/95 px-6 py-3 backdrop-blur-sm ">
3030 < div class ="mx-auto flex max-w-[1600px] items-center justify-between ">
3131 < div >
3232 < div class ="flex items-center gap-3 ">
33- < span class ="rounded bg-indigo-500/20 px-2 py-0.5 text-xs font-bold text-indigo-400 ring-1 ring-indigo-500/30 " id ="version-badge "> v5.3.0 </ span >
33+ < span class ="rounded bg-indigo-500/20 px-2 py-0.5 text-xs font-bold text-indigo-400 ring-1 ring-indigo-500/30 " id ="version-badge "> v5.3.1 </ span >
3434 < h1 class ="text-lg font-bold text-zinc-100 "> CCEM — Agentic Performance Monitoring</ h1 >
3535 </ div >
3636 < p class ="mt-0.5 text-xs text-zinc-500 ">
@@ -46,26 +46,8 @@ <h1 class="text-lg font-bold text-zinc-100">CCEM — Agentic Performance Monitor
4646 </ div >
4747 </ header >
4848
49- <!-- Status Bar -->
50- < div class ="border-b border-zinc-800/60 bg-zinc-900/80 px-6 py-2 backdrop-blur-sm " id ="status-bar ">
51- < div class ="mx-auto flex max-w-[1600px] items-center justify-between text-[10px] ">
52- < div class ="flex items-center gap-3 " id ="breadcrumb ">
53- < span class ="text-zinc-500 "> CCEM</ span >
54- < span class ="text-zinc-700 "> /</ span >
55- < span class ="text-zinc-400 "> Showcase</ span >
56- < span class ="text-zinc-700 "> /</ span >
57- < span class ="text-zinc-300 " id ="active-narrative "> Investor</ span >
58- </ div >
59- < div class ="flex items-center gap-4 ">
60- < button class ="narrative-tab rounded px-2 py-0.5 text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800/60 transition " data-narrative ="investor "> Investor</ button >
61- < button class ="narrative-tab rounded px-2 py-0.5 text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800/60 transition " data-narrative ="partner "> Partner</ button >
62- < button class ="narrative-tab rounded px-2 py-0.5 text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800/60 transition " data-narrative ="product-demo "> Product</ button >
63- < button class ="narrative-tab rounded px-2 py-0.5 text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800/60 transition " data-narrative ="internal "> Internal</ button >
64- < span class ="text-zinc-700 "> |</ span >
65- < span class ="font-mono text-zinc-600 " id ="apm-status "> APM: checking...</ span >
66- </ div >
67- </ div >
68- </ div >
49+ <!-- Orchestration Status Bar -->
50+ < div class ="border-b border-zinc-800/60 bg-zinc-900/80 px-6 py-2 backdrop-blur-sm " id ="orchestration-bar "> </ div >
6951 </ div >
7052
7153 <!-- 3-Column Layout -->
@@ -76,11 +58,9 @@ <h1 class="text-lg font-bold text-zinc-100">CCEM — Agentic Performance Monitor
7658 < div class ="space-y-4 " id ="features-container "> </ div >
7759 </ aside >
7860
79- <!-- Center: Architecture + Wave Board -->
61+ <!-- Center: Architecture -->
8062 < main class ="min-h-[calc(100vh-98px)] p-5 space-y-6 " id ="center-panel ">
8163 < div id ="architecture-container "> </ div >
82- < div id ="wave-board-container "> </ div >
83- < div id ="narrative-content "> </ div >
8464 </ main >
8565
8666 <!-- Right: Inspector Panel -->
@@ -89,6 +69,12 @@ <h1 class="text-lg font-bold text-zinc-100">CCEM — Agentic Performance Monitor
8969 </ aside >
9070 </ div >
9171
72+ <!-- Roadmap Modal (rendered by JS) -->
73+ < div id ="roadmap-modal "> </ div >
74+
75+ <!-- Bottom Bar (rendered by JS) -->
76+ < div id ="bottom-bar "> </ div >
77+
9278 < script type ="module " src ="showcase.js "> </ script >
9379</ body >
9480</ html >
0 commit comments