feat: Add Live Impact Preview to HUD Control Center

dashboard/app.js

@@ -1,5 +1,12 @@
 const API_BASE = window.location.origin;
 
+// Simulation Specs (Mirrors env.py)
+const SPECS = {
+    sea:  { cost: 1.0, carbon: 0.1 },
+    air:  { cost: 5.0, carbon: 2.0 },
+    rail: { cost: 2.5, carbon: 0.5 }
+};
+
 // State Management
 async function updateState() {
     try {
@@ -11,15 +18,11 @@ async function updateState() {
         status.textContent = 'ONLINE';
         status.className = 'status-badge status-online';
 
-        // Update Multi-objective Metrics
         document.getElementById('carbon-value').textContent = data.carbon.toFixed(0);
         document.getElementById('cash-value').textContent = data.cash.toLocaleString();
-        
-        // Update Inventory UI
         document.getElementById('chips-count').textContent = data.inventory.chips;
         document.getElementById('sensors-count').textContent = data.inventory.sensors;
 
-        // Update News
         const newsAlert = document.getElementById('news-alert');
         if (data.news) {
             document.getElementById('news-text').textContent = data.news;
@@ -28,7 +31,6 @@ async function updateState() {
             newsAlert.classList.add('hidden');
         }
 
-        // Update Shipments
         const container = document.getElementById('shipments-container');
         if (data.orders && data.orders.length > 0) {
             container.innerHTML = data.orders.map(order => `
@@ -51,17 +53,44 @@ async function updateState() {
 
 // UI Controls
 const actionSelect = document.getElementById('action-select');
+const partSelect = document.getElementById('part-select');
+const modeSelect = document.getElementById('mode-select');
 const orderOptions = document.getElementById('order-options');
 const productionOptions = document.getElementById('production-options');
 
+function updatePreview() {
+    const type = actionSelect.value;
+    let cost = 0;
+    let carbon = 0;
+
+    if (type === 'order_parts') {
+        const mode = modeSelect.value;
+        const s = SPECS[mode];
+        cost = 10 * 5 * s.cost; // Base $10 * 5 qty * mode mult
+        carbon = 5 * s.carbon;   // 5 qty * mode carbon
+    } else if (type === 'produce') {
+        cost = 0; // Production is free but uses parts
+        carbon = 5.0; // Minimal factory footprint
+    } else if (type === 'offset') {
+        cost = 100 * 2.0; // $2 per unit
+        carbon = -100;
+    }
+
+    document.getElementById('preview-cost').textContent = `$${cost.toFixed(0)}`;
+    document.getElementById('preview-carbon').textContent = `${carbon > 0 ? '+' : ''}${carbon.toFixed(1)}kg CO2`;
+}
+
 actionSelect.addEventListener('change', () => {
     orderOptions.classList.add('hidden');
     productionOptions.classList.add('hidden');
     
     if (actionSelect.value === 'order_parts') orderOptions.classList.remove('hidden');
     if (actionSelect.value === 'produce') productionOptions.classList.remove('hidden');
+    updatePreview();
 });
 
+modeSelect.addEventListener('change', updatePreview);
+
 function log(message, type = 'system') {
     const box = document.getElementById('activity-log');
     const entry = document.createElement('p');
@@ -85,8 +114,8 @@ async function executeAction(overrideType = null) {
     let actionObj = { action_type: type };
 
     if (type === 'order_parts') {
-        actionObj.part_type = document.getElementById('part-select').value;
-        actionObj.mode = document.getElementById('mode-select').value;
+        actionObj.part_type = partSelect.value;
+        actionObj.mode = modeSelect.value;
         actionObj.quantity = 5; 
     } else if (type === 'produce') {
         actionObj.product = document.getElementById('product-select').value;
@@ -151,3 +180,4 @@ document.getElementById('reset-btn').addEventListener('click', manualReset);
 // Start
 updateState();
 setInterval(updateState, 3000);
+updatePreview();

dashboard/index.html

@@ -50,6 +50,13 @@
                         </select>
                     </div>
 
+                    <div id="impact-preview" class="impact-preview">
+                        <span class="preview-label">Live Estimate:</span>
+                        <span id="preview-cost" class="val">$0</span>
+                        <span class="sep">|</span>
+                        <span id="preview-carbon" class="val">0kg CO2</span>
+                    </div>
+
                     <div class="action-buttons">
                         <button id="step-btn" class="btn btn-primary">Execute Action</button>
                         <button id="skip-btn" class="btn btn-secondary">Skip Day</button>

dashboard/style.css

@@ -275,6 +275,32 @@ select {
     100% { border-color: #FFC1C1; }
 }
 
+.impact-preview {
+    margin: 1.5rem 0;
+    padding: 1rem;
+    background: #F0F4F0;
+    border-radius: 8px;
+    border-left: 4px solid var(--primary-green);
+    font-size: 0.9rem;
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+}
+
+.impact-preview .preview-label {
+    font-weight: 600;
+    color: var(--text-muted);
+}
+
+.impact-preview .val {
+    font-weight: 600;
+    color: var(--deep-forest);
+}
+
+.impact-preview .sep {
+    color: var(--border-tan);
+}
+
 footer {
     text-align: center;
     margin-top: 4rem;