feat: Enhanced Command History structural cards and metric telemetry

dashboard/app.js

@@ -137,11 +137,18 @@ function spawnFeedback(text, x, y) {
     setTimeout(() => el.remove(), 1000);
 }
 
-function log(message, type = 'system') {
+function log(title, meta = "SYSTEM", subtext = '', type = 'system') {
     const box = document.getElementById('activity-log');
-    const entry = document.createElement('p');
-    entry.className = `log-entry ${type}`;
-    entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
+    const entry = document.createElement('div');
+    entry.className = `history-item ${type}`;
+    
+    let html = `
+        <span class="history-meta">[Day ${currentDay}] ${meta}</span>
+        <span class="history-text">${title}</span>
+    `;
+    if (subtext) html += `<span class="history-sub">${subtext}</span>`;
+    
+    entry.innerHTML = html;
     box.prepend(entry);
 }
 
@@ -179,19 +186,50 @@ window.execute = async function(type, event, shipment_id = null) {
         const result = await response.json();
         
         if (result.info && result.info.error) {
-            log(`ERROR: ${result.info.error}`, 'error');
+            log(result.info.error, "COMMAND REJECTED", "", "alert");
             spawnFeedback(`❌ ${result.info.error}`, event.clientX, event.clientY);
         } else {
-            if (type === 'order_parts') spawnFeedback(`+${actionObj.quantity} ordered`, event.clientX, event.clientY);
-            else if (type === 'produce') spawnFeedback(`Initiated x${actionObj.quantity} run`, event.clientX, event.clientY);
-            else if (type === 'offset') spawnFeedback(`Purchased ${actionObj.offset_amount} offsets`, event.clientX, event.clientY);
-            else if (type === 'cancel') log(`SUCCESS: Canceled Shipment`, 'action');
-            else log(`SUCCESS: ${type === 'skip' ? 'Skipped Day' : 'Executed ' + type}`, 'action');
+            if (type === 'order_parts') {
+                const s = SPECS[actionObj.mode];
+                const cost = 10 * actionObj.quantity * s.cost;
+                log(`Ordered ${actionObj.quantity}x ${actionObj.part_type}`, `LOGISTICS | ${actionObj.mode.toUpperCase()}`, `-$${cost.toFixed(0)}`, 'action');
+                spawnFeedback(`+${actionObj.quantity} ordered`, event.clientX, event.clientY);
+            }
+            else if (type === 'produce') {
+                log(`Started run for ${actionObj.quantity}x ${actionObj.product}`, `MANUFACTURING`, "", 'action');
+                spawnFeedback(`Initiated x${actionObj.quantity} run`, event.clientX, event.clientY);
+            }
+            else if (type === 'offset') {
+                const cost = actionObj.offset_amount * 2;
+                log(`Bought ${actionObj.offset_amount} Carbon Offsets`, `ESG STRATEGY`, `-$${cost.toFixed(0)}`, 'action');
+                spawnFeedback(`Purchased ${actionObj.offset_amount} offsets`, event.clientX, event.clientY);
+            }
+            else if (type === 'cancel') {
+                log(`Canceled Shipment`, `LOGISTICS`, "", 'action');
+            }
+            else if (type === 'skip') {
+                log(`Advanced to next day`, `SIMULATION`, "", 'system');
+            }
+        }
+
+        // Process Arrivals from backend
+        if (result.info && result.info.arrivals) {
+            result.info.arrivals.forEach(arrival => {
+                log(`${arrival} received`, `INVENTORY ARRIVAL`, "+ Raw Materials", 'arrival');
+            });
+        }
+        
+        if (result.info && result.info.news) {
+            const box = document.getElementById('news-alert');
+            document.getElementById('news-text').textContent = result.info.news;
+            box.classList.remove('hidden');
+            setTimeout(() => box.classList.add('hidden'), 5000);
+            log(result.info.news, "GLOBAL NEWS", "", 'alert');
         }
         
         await updateState();
     } catch (e) {
-        log(`CRITICAL: Connection lost`, 'error');
+        log("Connection lost to simulation server", "CRITICAL ERROR", "", "alert");
     } finally {
         setTimeout(() => {
             document.querySelector('main').classList.remove('transitioning');

dashboard/index.html

@@ -122,7 +122,15 @@
                     <div class="card full-width h-100">
                         <h3>Your Orders</h3>
                         <div id="cart-container" class="cart-list">
-                            <p class="placeholder">No active shipments in transit.</p>
+                        </div>
+                    </div>
+                </section>
+                
+                <section class="history-section" style="margin-top: 2rem;">
+                    <div class="card full-width" style="height: auto; max-height: 400px; display: flex; flex-direction: column;">
+                        <h3>Command History</h3>
+                        <div class="history-list" id="activity-log" style="overflow-y: auto; display: flex; flex-direction: column; gap: 0.8rem; padding-right: 0.5rem; flex: 1;">
+                            <!-- items arrive here -->
                         </div>
                     </div>
                 </section>
@@ -169,15 +177,6 @@
                 </div>
             </section>
 
-            <section class="log-section">
-                <div class="card full-width">
-                    <h3>Simulation Activity Log</h3>
-                    <div id="activity-log" class="log-box">
-                        <p class="log-entry system">[SYSTEM] Dashboard initialized. Awaiting user action...</p>
-                    </div>
-                </div>
-            </section>
-
             <section class="guide-section">
                 <div class="card full-width mission-card">
                     <h3>Mission Briefing (Operator's Manual)</h3>

dashboard/style.css

@@ -357,10 +357,57 @@ select:focus, .qty-select:focus {
     font-size: 0.85rem;
 }
 
-.log-entry { margin-bottom: 0.4rem; }
-.log-entry.system { color: #AAAAAA; }
-.log-entry.action { color: #00FF41; }
-.log-entry.error { color: #FF4136; }
+.log-box {
+    margin-top: 1rem;
+    background: transparent;
+    border-radius: 12px;
+}
+
+.history-item {
+    background: white;
+    padding: 0.8rem 1rem;
+    border-radius: 10px;
+    border: 1px solid var(--border-tan);
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
+}
+
+.history-meta {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+}
+
+.history-text {
+    font-size: 0.85rem;
+    color: var(--text-main);
+    font-weight: 500;
+}
+
+.history-sub {
+    font-size: 0.75rem;
+    color: var(--primary-green);
+    font-weight: 600;
+}
+
+.history-item.alert { border-left: 4px solid var(--primary-red); }
+.history-item.action { border-left: 4px solid var(--sage-green); }
+.history-item.system { border-left: 4px solid #DFDBDD; }
+.history-item.arrival { border-left: 4px solid var(--primary-green); }
+
+/* Custom Scrollbar for history */
+.history-list::-webkit-scrollbar {
+    width: 6px;
+}
+.history-list::-webkit-scrollbar-track {
+    background: rgba(0,0,0,0.02);
+    border-radius: 10px;
+}
+.history-list::-webkit-scrollbar-thumb {
+    background: rgba(0,0,0,0.1);
+    border-radius: 10px;
+}
 
 .inventory-grid {
     display: flex;

netzero_nav/env.py

@@ -54,19 +54,26 @@ class AtlasEcoEnv:
         news = None
         info = {}
 
-        # Day Advancement Loop
+        # Day Advancement
         if action.action_type == ActionType.SKIP:
             self.step_count += 1
-            if self.step_count < self.sea_blocked_until:
-                news = "EMERGENCY: Suez Canal blocked! Sea routes offline."
-
-            # 2. Advance Shipments
-            for ship in self.active_shipments:
-                ship.eta -= 1
-                if ship.eta <= 0:
-                    self._receive_shipment(ship)
-            
-            self.active_shipments = [s for s in self.active_shipments if s.eta > 0]
+            if self.sea_blocked_until > 0 and self.step_count > self.sea_blocked_until:
+                info["news"] = "Suez route is clear again."
+                self.sea_blocked_until = 0
+
+            # Process active shipments
+            arrivals = []
+            next_shipments = []
+            for s in self.active_shipments:
+                s.eta -= 1
+                if s.eta <= 0:
+                    arrivals.append(f"{s.quantity}x {s.part.value}")
+                    self._receive_shipment(s)
+                else:
+                    next_shipments.append(s)
+            self.active_shipments = next_shipments
+            if arrivals:
+                info["arrivals"] = arrivals
 
             # 3. Check Order Deadlines
             for order in self.pending_orders: