feat: Upgrade Eco-HUD to Fully Interactive Command Center

dashboard/app.js

@@ -1,13 +1,12 @@
 const API_BASE = window.location.origin;
 
+// State Management
 async function updateState() {
     try {
         const response = await fetch(`${API_BASE}/state`);
         if (!response.ok) throw new Error('API Unreachable');
-        
         const data = await response.json();
         
-        // Update Status
         const status = document.getElementById('connection-status');
         status.textContent = 'ONLINE';
         status.className = 'status-badge status-online';
@@ -16,17 +15,21 @@ async function updateState() {
         document.getElementById('carbon-value').textContent = data.carbon.toFixed(0);
         document.getElementById('cash-value').textContent = data.cash.toLocaleString();
         
+        // Update Inventory UI
+        const inv = data.inventory;
+        // (Optional: add inventory display logic here)
+
         // Update Shipments
         const container = document.getElementById('shipments-container');
         if (data.orders && data.orders.length > 0) {
             container.innerHTML = data.orders.map(order => `
                 <div class="shipment-item">
-                    <span>Order: ${order.product || 'Standard Set'}</span>
-                    <strong>Quantity: ${order.quantity}</strong>
+                    <span>${order.product} (Required: ${order.quantity})</span>
+                    <small>Deadline: Day ${order.due_date}</small>
                 </div>
             `).join('');
         } else {
-            container.innerHTML = '<p class="placeholder">Supply chain optimized. No pending orders.</p>';
+            container.innerHTML = '<p class="placeholder">All orders fulfilled. Environment reset recommended.</p>';
         }
 
     } catch (error) {
@@ -37,44 +40,86 @@ async function updateState() {
     }
 }
 
-// Actions
-async function manualStep() {
-    try {
-        const btn = document.getElementById('step-btn');
-        btn.disabled = true;
-        btn.textContent = 'Wait...';
+// UI Controls
+const actionSelect = document.getElementById('action-select');
+const orderOptions = document.getElementById('order-options');
+const productionOptions = document.getElementById('production-options');
+
+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');
+});
+
+function log(message, type = 'system') {
+    const box = document.getElementById('activity-log');
+    const entry = document.createElement('p');
+    entry.className = `log-entry ${type}`;
+    entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
+    box.prepend(entry);
+}
+
+async function executeAction() {
+    const type = actionSelect.value;
+    const btn = document.getElementById('step-btn');
+    btn.disabled = true;
+    btn.textContent = 'Processing...';
+
+    let actionObj = { action_type: type };
 
-        // Send a default SKIP action for testing
+    if (type === 'order_parts') {
+        actionObj.part_type = document.getElementById('part-select').value;
+        actionObj.mode = document.getElementById('mode-select').value;
+        actionObj.quantity = 5; // Default for HUD
+    } else if (type === 'produce') {
+        actionObj.product = document.getElementById('product-select').value;
+    } else if (type === 'offset') {
+        actionObj.offset_amount = 100.0;
+    }
+
+    try {
         const response = await fetch(`${API_BASE}/step`, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ action_type: 'skip' })
+            body: JSON.stringify(actionObj)
         });
+        const result = await response.json();
+        
+        if (result.info && result.info.error) {
+            log(`ERROR: ${result.info.error}`, 'error');
+        } else {
+            log(`SUCCESS: Executed ${type}`, 'action');
+        }
         
         await updateState();
+    } catch (e) {
+        log(`CRITICAL: Connection lost`, 'error');
+    } finally {
         btn.disabled = false;
-        btn.textContent = 'Next Day (Step)';
-    } catch (error) {
-        console.error('Step failed:', error);
+        btn.textContent = 'Execute Action';
     }
 }
 
 async function manualReset() {
+    if (!confirm("Are you sure you want to reset the simulation?")) return;
     try {
-        await fetch(`${API_BASE}/reset`, {
+        await fetch(`${API_BASE}/reset`, { 
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ task: 'easy' })
         });
+        log("Environment Reset to Day 0", "system");
         await updateState();
-    } catch (error) {
-        console.error('Reset failed:', error);
+    } catch (e) {
+        log("Reset Failed", "error");
     }
 }
 
-document.getElementById('step-btn').addEventListener('click', manualStep);
+document.getElementById('step-btn').addEventListener('click', executeAction);
 document.getElementById('reset-btn').addEventListener('click', manualReset);
 
-// Poll every 2 seconds
-setInterval(updateState, 2000);
+// Start
 updateState();
+setInterval(updateState, 3000);

dashboard/index.html

@@ -9,19 +9,44 @@
 </head>
 <body>
     <div class="container">
-        <header>
-            <div class="logo">
-                <span class="icon">🌍</span>
-                <h1>NETZERO-NAV</h1>
-            </div>
-            <div class="controls">
-                <button id="reset-btn" class="btn btn-outline">Reset</button>
-                <button id="step-btn" class="btn btn-primary">Next Day (Step)</button>
-                <div id="connection-status" class="status-badge">Connecting...</div>
-            </div>
-        </header>
-
         <main>
+            <section class="control-panel card">
+                <h3>Logistics Control Center</h3>
+                <div class="control-inputs">
+                    <div class="input-group">
+                        <label>Action Type</label>
+                        <select id="action-select">
+                            <option value="skip">Maintain (Skip Day)</option>
+                            <option value="order_parts">Order Parts (Logistics)</option>
+                            <option value="produce">Manufacture (Produce)</option>
+                            <option value="offset">Buy Carbon Offset</option>
+                        </select>
+                    </div>
+                    
+                    <div id="order-options" class="sub-inputs hidden">
+                        <select id="part-select">
+                            <option value="chips">Microchips</option>
+                            <option value="sensors">Sensors</option>
+                        </select>
+                        <select id="mode-select">
+                            <option value="sea">SEA (Ultra-Low CO2, 10 days)</option>
+                            <option value="rail">RAIL (Low CO2, 5 days)</option>
+                            <option value="air">AIR (High CO2, 2 days)</option>
+                        </select>
+                    </div>
+
+                    <div id="production-options" class="sub-inputs hidden">
+                        <select id="product-select">
+                            <option value="EcoPhone">EcoPhone</option>
+                            <option value="GreenTab">GreenTab</option>
+                        </select>
+                    </div>
+
+                    <button id="step-btn" class="btn btn-primary">Execute Action</button>
+                    <button id="reset-btn" class="btn btn-outline">Reset Simulation</button>
+                </div>
+            </section>
+
             <section class="metrics-grid">
                 <div class="card metric-card">
                     <h3>Carbon Footprint</h3>
@@ -49,11 +74,11 @@
                 </div>
             </section>
 
-            <section class="task-info">
-                <div class="card">
-                    <h3>Environment Alerts</h3>
-                    <div id="news-ticker" class="ticker-box">
-                        No active disruptions detected.
+            <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>

dashboard/style.css

@@ -167,6 +167,62 @@ header {
     color: var(--deep-forest);
 }
 
+.control-panel {
+    margin-bottom: 2rem;
+    background: #F9F7F2;
+}
+
+.control-inputs {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    align-items: flex-end;
+}
+
+.input-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--text-muted);
+}
+
+select {
+    padding: 0.8rem;
+    border-radius: 8px;
+    border: 1px solid var(--border-tan);
+    background: white;
+    font-family: inherit;
+    min-width: 200px;
+}
+
+.hidden { display: none !important; }
+
+.sub-inputs {
+    display: flex;
+    gap: 1rem;
+}
+
+.log-box {
+    height: 150px;
+    overflow-y: auto;
+    background: #1A1A1A;
+    color: #00FF41;
+    font-family: 'Courier New', Courier, monospace;
+    padding: 1rem;
+    border-radius: 8px;
+    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; }
+
 footer {
     text-align: center;
     margin-top: 4rem;