fix(showcase): command-center throughput bars render — native div grid + width:100% (ADR-0065) (#2497)

Browser verification of the command-center html page on a real objectstack serve
console showed the Weekly Throughput bars rendering empty. Two html-tier nuances:
- <grid columns={7}> emits responsive classes (grid-cols-1 sm:grid-cols-2
  md:grid-cols-7) that collapse to 1 column inside the narrow card → use a native
  <div style={{display:'grid', gridTemplateColumns:'repeat(7,1fr)'}}> for a fixed
  7-track grid;
- the bar <flex> items (display:flex, no children) collapsed to width:0 and the
  grid container (a flex-column child) didn't stretch → native block <div> bars +
  width:100% on the container.

Verified in a live console: header typography, KPI cards, the primary-bg card,
the 7 throughput bars (now visible), and the activity dots all render correctly.

Co-authored-by: Jack Zhuang <277994282+os-zhuang@users.noreply.github.com>
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: os-zhuang

examples/app-showcase/src/pages/command-center-jsx.page.ts

@@ -54,15 +54,15 @@ export const CommandCenterJsxPage = definePage({
   <grid columns={3} gap={5}>
     <flex direction="col" gap={6} style={{"gridColumn":"span 2","background":"hsl(var(--card))","border":"1px solid hsl(var(--border))","borderRadius":"var(--radius)","padding":"24px"}}>
       <div style={{"fontSize":"16px","fontWeight":"600","color":"hsl(var(--foreground))"}}>Weekly Throughput</div>
-      <grid columns={7} gap={4} style={{"height":"140px","alignItems":"end"}}>
-        <flex style={{"height":"48px","borderRadius":"8px","background":"hsl(var(--primary) / 0.55)"}} />
-        <flex style={{"height":"86px","borderRadius":"8px","background":"hsl(var(--primary) / 0.7)"}} />
-        <flex style={{"height":"64px","borderRadius":"8px","background":"hsl(var(--primary) / 0.55)"}} />
-        <flex style={{"height":"120px","borderRadius":"8px","background":"hsl(var(--primary))"}} />
-        <flex style={{"height":"58px","borderRadius":"8px","background":"hsl(var(--primary) / 0.55)"}} />
-        <flex style={{"height":"100px","borderRadius":"8px","background":"hsl(var(--primary) / 0.7)"}} />
-        <flex style={{"height":"40px","borderRadius":"8px","background":"hsl(var(--primary) / 0.4)"}} />
-      </grid>
+      <div style={{"display":"grid","gridTemplateColumns":"repeat(7, 1fr)","gap":"16px","height":"140px","width":"100%","alignItems":"end"}}>
+        <div style={{"height":"48px","borderRadius":"8px","background":"hsl(var(--primary) / 0.55)"}} />
+        <div style={{"height":"86px","borderRadius":"8px","background":"hsl(var(--primary) / 0.7)"}} />
+        <div style={{"height":"64px","borderRadius":"8px","background":"hsl(var(--primary) / 0.55)"}} />
+        <div style={{"height":"120px","borderRadius":"8px","background":"hsl(var(--primary))"}} />
+        <div style={{"height":"58px","borderRadius":"8px","background":"hsl(var(--primary) / 0.55)"}} />
+        <div style={{"height":"100px","borderRadius":"8px","background":"hsl(var(--primary) / 0.7)"}} />
+        <div style={{"height":"40px","borderRadius":"8px","background":"hsl(var(--primary) / 0.4)"}} />
+      </div>
     </flex>
     <flex direction="col" gap={4} style={{"background":"hsl(var(--card))","border":"1px solid hsl(var(--border))","borderRadius":"var(--radius)","padding":"24px"}}>
       <div style={{"fontSize":"16px","fontWeight":"600","color":"hsl(var(--foreground))"}}>Recent Activity</div>