feat: show crisis summary + category in timeline cards, add cost tracking to footer, viz loading state

Author: jddunn

src/cli/dashboard/src/App.tsx

@@ -251,7 +251,7 @@ function AppContent() {
 
             {/* About tab redirects to the landing page */}
           </main>
-          <Footer />
+          <Footer cost={gameState.cost} />
           {tourActive && (
             <GuidedTour
               onTabChange={(tab) => setActiveTab(tab)}

src/cli/dashboard/src/components/layout/Footer.tsx

@@ -1,4 +1,8 @@
-export function Footer() {
+interface FooterProps {
+  cost?: { totalTokens: number; totalCostUSD: number; llmCalls: number };
+}
+
+export function Footer({ cost }: FooterProps) {
   return (
     <footer
       className="shrink-0"
@@ -23,6 +27,21 @@ export function Footer() {
         <a href="/docs" style={{ color: 'var(--rust)', fontWeight: 600 }}>docs</a>
         <a href="https://agentos.sh/blog" target="_blank" rel="noopener" style={{ color: 'var(--rust)', fontWeight: 600 }}>blog</a>
       </nav>
+
+      {cost && cost.llmCalls > 0 && (
+        <span style={{ display: 'flex', alignItems: 'baseline', gap: '4px', fontFamily: 'var(--mono)', fontSize: '10px' }}>
+          <span style={{ color: 'var(--green)', fontWeight: 800 }}>
+            ${cost.totalCostUSD < 0.01 ? cost.totalCostUSD.toFixed(4) : cost.totalCostUSD.toFixed(2)}
+          </span>
+          <span style={{ color: 'var(--text-3)' }}>
+            {(cost.totalTokens / 1000).toFixed(0)}k tok
+          </span>
+          <span style={{ color: 'var(--text-3)' }}>
+            {cost.llmCalls} calls
+          </span>
+        </span>
+      )}
+
       <span>
         <span style={{ fontFamily: 'var(--mono)', fontWeight: 700, letterSpacing: '.08em', fontSize: '10px' }}>PARA<span style={{ color: 'var(--amber)' }}>COSM</span></span>
         {' '}&middot; Apache-2.0 &middot; <a href="https://manic.agency" target="_blank" rel="noopener" style={{ color: 'var(--text-3)' }}>Manic Agency</a> / <a href="https://frame.dev" target="_blank" rel="noopener" style={{ color: 'var(--text-3)' }}>Frame.dev</a>

src/cli/dashboard/src/components/sim/Timeline.tsx

@@ -123,8 +123,21 @@ function SideTimeline({ turns, side }: { turns: TurnEntry[]; side: Side }) {
               <span style={{ flex: 1, color: 'var(--text-1)', fontWeight: 700, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', minWidth: 0 }}>
                 {t.title}
               </span>
+              {t.category && (
+                <span style={{ fontSize: '9px', padding: '0 4px', borderRadius: '2px', background: 'var(--bg-deep)', color: 'var(--text-3)', fontFamily: 'var(--mono)', flexShrink: 0 }}>
+                  {t.category}
+                </span>
+              )}
+              {t.emergent && (
+                <span style={{ fontSize: '8px', fontWeight: 800, color: 'var(--rust)', fontFamily: 'var(--mono)', flexShrink: 0 }}>EMERGENT</span>
+              )}
               {outcomeBadge(t.outcome)}
             </div>
+            {t.summary && (
+              <div style={{ fontSize: '10px', color: 'var(--text-3)', marginTop: '2px', lineHeight: 1.4, overflow: 'hidden', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' as const, fontStyle: 'italic' }}>
+                {t.summary}
+              </div>
+            )}
             {t.decision && (
               <div style={{ fontSize: '10px', color: 'var(--text-2)', marginTop: '2px', lineHeight: 1.4, overflow: 'hidden', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' as const }}>
                 {t.decision}
@@ -146,7 +159,7 @@ export function Timeline({ state }: TimelineProps) {
   return (
     <div className="timeline-row" role="region" aria-label="Turn timeline" style={{
       borderTop: '1px solid var(--border)', background: 'var(--bg-panel)',
-      display: 'flex', gap: '4px', height: '160px', overflow: 'hidden', flexShrink: 0,
+      display: 'flex', gap: '4px', height: '200px', overflow: 'hidden', flexShrink: 0,
       padding: '4px 8px', minWidth: 0, maxWidth: '100%',
     }}>
       <SideTimeline turns={turnsA} side="a" />

src/cli/dashboard/src/components/viz/ColonyViz.tsx

@@ -71,12 +71,24 @@ export function ColonyViz({ state }: ColonyVizProps) {
   const leaderB = state.b.leader;
 
   if (maxTurn === 0) {
+    const isRunning = state.isRunning && !state.isComplete;
     return (
       <div style={{
-        display: 'flex', alignItems: 'center', justifyContent: 'center',
-        flex: 1, color: 'var(--text-3)', fontSize: 13,
+        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
+        flex: 1, color: 'var(--text-3)', fontSize: 13, gap: 8,
       }}>
-        Run a simulation to see the colony visualization.
+        {isRunning ? (
+          <>
+            <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--rust)', letterSpacing: '.08em', textTransform: 'uppercase' }}>
+              Simulation Running
+            </div>
+            <div>Waiting for first turn to complete...</div>
+            <div style={{ width: 24, height: 24, border: '2px solid var(--border)', borderTop: '2px solid var(--rust)', borderRadius: '50%', animation: 'spin 1s linear infinite' }} />
+            <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
+          </>
+        ) : (
+          'Run a simulation to see the colony visualization.'
+        )}
       </div>
     );
   }