feat: Final layout overhaul with left-pinned console and inventory forecasting

dashboard/app.js

@@ -7,7 +7,15 @@ const SPECS = {
     rail: { cost: 2.5, carbon: 0.5 }
 };
 
-// Tutorial Content
+const RECIPES = {
+    "EcoPhone": { chips: 1, sensors: 2 },
+    "GreenTab": { chips: 2, sensors: 1 }
+};
+
+// Global State for UI calculation
+let latestInventory = { chips: 0, sensors: 0 };
+let currentTutStep = 0;
+
 const TUTORIAL_STEPS = [
     {
         title: "Welcome to NetZero-Nav",
@@ -36,16 +44,6 @@ const TUTORIAL_STEPS = [
     }
 ];
 
-let currentTutStep = 0;
-
-// Global State for UI calculation
-let latestInventory = { chips: 0, sensors: 0 };
-
-const RECIPES = {
-    "EcoPhone": { chips: 1, sensors: 2 },
-    "GreenTab": { chips: 2, sensors: 1 }
-};
-
 // State Management
 async function updateState() {
     try {
@@ -53,11 +51,43 @@ async function updateState() {
         if (!response.ok) throw new Error('API Unreachable');
         const data = await response.json();
         latestInventory = data.inventory;
-...
+        
+        const status = document.getElementById('connection-status');
+        status.textContent = 'ONLINE';
+        status.className = 'status-badge status-online';
+
+        document.getElementById('carbon-value').textContent = data.carbon.toFixed(0);
+        document.getElementById('cash-value').textContent = data.cash.toLocaleString();
         document.getElementById('chips-count').textContent = data.inventory.chips;
         document.getElementById('sensors-count').textContent = data.inventory.sensors;
+
         updateProducePreview();
-...
+
+        const newsAlert = document.getElementById('news-alert');
+        if (data.news) {
+            document.getElementById('news-text').textContent = data.news;
+            newsAlert.classList.remove('hidden');
+        } else {
+            newsAlert.classList.add('hidden');
+        }
+
+        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.product} (Required: ${order.quantity})</span>
+                    <small>Deadline: Day ${order.due_date}</small>
+                </div>
+            `).join('');
+        } else {
+            container.innerHTML = '<p class="placeholder">All orders fulfilled. Environment reset recommended.</p>';
+        }
+
+    } catch (error) {
+        console.error('Update failed:', error);
+        const status = document.getElementById('connection-status');
+        status.textContent = 'RECONNECTING...';
+        status.className = 'status-badge';
     }
 }
 
@@ -65,6 +95,7 @@ function updateProducePreview() {
     const product = document.getElementById('product-select').value;
     const req = RECIPES[product];
     const preview = document.getElementById('req-preview');
+    if (!preview) return;
     
     const chipClass = latestInventory.chips >= req.chips ? "sufficient" : "shortage";
     const sensorClass = latestInventory.sensors >= req.sensors ? "sufficient" : "shortage";
@@ -81,8 +112,6 @@ function updateProducePreview() {
     `;
 }
 
-document.getElementById('product-select').addEventListener('change', updateProducePreview);
-
 // UI Controls
 const modeSelect = document.getElementById('mode-select');
 
@@ -106,8 +135,18 @@ function log(message, type = 'system') {
     box.prepend(entry);
 }
 
-// Global Execute Function (exposed to onclick in HTML)
+// Global Execute Function
 window.execute = async function(type) {
+    // Inventory Guard for Production
+    if (type === 'produce') {
+        const product = document.getElementById('product-select').value;
+        const req = RECIPES[product];
+        if (latestInventory.chips < req.chips || latestInventory.sensors < req.sensors) {
+            log(`ERROR: Incomplete Inventory! Cannot produce ${product}.`, 'error');
+            return;
+        }
+    }
+
     document.querySelector('main').classList.add('transitioning');
     
     let actionObj = { action_type: type };
@@ -156,7 +195,6 @@ function showStep(step) {
     document.getElementById('tut-prev').classList.toggle('hidden', step === 0);
     document.getElementById('tut-next').textContent = step === TUTORIAL_STEPS.length - 1 ? "Start Simulation" : "Next";
 
-    // Static Centered Position
     document.getElementById('tutorial-modal').style.alignItems = 'center';
     document.getElementById('tutorial-modal').style.paddingTop = '0';
 }
@@ -216,6 +254,7 @@ async function triggerSuezJam() {
 document.getElementById('skip-btn').addEventListener('click', () => window.execute('skip'));
 document.getElementById('trigger-btn').addEventListener('click', triggerSuezJam);
 document.getElementById('reset-btn').addEventListener('click', manualReset);
+document.getElementById('product-select').addEventListener('change', updateProducePreview);
 
 // Start
 updateState();

dashboard/index.html

@@ -33,43 +33,10 @@
         </div>
 
         <main>
-            <section class="metrics-grid">
-                <div class="card metric-card">
-                    <h3>Carbon Footprint</h3>
-                    <div class="gauge-container">
-                        <div id="carbon-gauge" class="gauge">
-                            <span id="carbon-value">0</span><small>kg</small>
-                        </div>
-                    </div>
-                    <p class="limit">Limit: <span id="carbon-limit">1000</span>kg</p>
-                </div>
-
-                <div class="card metric-card">
-                    <h3>Capital Balance</h3>
-                    <div class="value-large">$<span id="cash-value">0</span></div>
-                    <div class="trend" id="cash-trend">Fulfillment: <span id="orders-done">0</span></div>
-                </div>
-
-                <div class="card metric-card">
-                    <h3>Raw Inventory</h3>
-                    <div class="inventory-grid">
-                        <div class="inv-item">
-                            <span class="label">Chips</span>
-                            <span id="chips-count" class="count">0</span>
-                        </div>
-                        <div class="inv-item">
-                            <span class="label">Sensors</span>
-                            <span id="sensors-count" class="count">0</span>
-                        </div>
-                    </div>
-                </div>
-            </section>
-
-            <section class="control-panel card">
+            <section id="command-console" class="control-panel card">
                 <h3><span class="i-icon">ℹ️</span> Command Console</h3>
                 
                 <div class="operation-sections">
-                    <!-- Section 1: Logistics -->
                     <div id="section-order" class="op-section">
                         <h4>📦 Supply Logistics</h4>
                         <div class="op-row">
@@ -78,9 +45,9 @@
                                 <option value="sensors">Order Sensors</option>
                             </select>
                             <select id="mode-select">
-                                <option value="sea">SEA ($50, 10d, 0.5kg)</option>
-                                <option value="rail">RAIL ($125, 5d, 2.5kg)</option>
-                                <option value="air">AIR ($250, 2d, 10kg)</option>
+                                <option value="sea">SEA ($50, 0.5kg)</option>
+                                <option value="rail">RAIL ($125, 2.5kg)</option>
+                                <option value="air">AIR ($250, 10kg)</option>
                             </select>
                             <button onclick="execute('order_parts')" class="btn btn-primary small">Order</button>
                         </div>
@@ -88,7 +55,6 @@
 
                     <hr class="divider">
 
-                    <!-- Section 2: Manufacturing -->
                     <div id="section-produce" class="op-section">
                         <h4>🏭 Manufacturing</h4>
                         <div class="op-row">
@@ -98,11 +64,11 @@
                             </select>
                             <button onclick="execute('produce')" class="btn btn-primary small">Start Run</button>
                         </div>
+                        <div id="req-preview" class="req-preview"></div>
                     </div>
 
                     <hr class="divider">
 
-                    <!-- Section 3: ESG / Offsetting -->
                     <div id="section-offset" class="op-section">
                         <h4>🌳 ESG Strategy</h4>
                         <div class="op-row">
@@ -113,7 +79,7 @@
                 </div>
 
                 <div id="impact-preview" class="impact-preview">
-                    <span class="preview-label">Live Estimate:</span>
+                    <span class="preview-label">Estimated Impact:</span>
                     <span id="preview-cost" class="val">$0</span>
                     <span class="sep">|</span>
                     <span id="preview-carbon" class="val">0kg CO2</span>
@@ -131,23 +97,57 @@
                 </div>
             </section>
 
-            <section class="details-section">
-                <div class="card full-width">
-                    <h3>Active Logistics Stream</h3>
-                    <div id="shipments-container" class="shipment-list">
-                        <p class="placeholder">Awaiting shipment data...</p>
+            <div class="metrics-column">
+                <section class="metrics-grid">
+                    <div class="card metric-card">
+                        <h3>Carbon Footprint</h3>
+                        <div class="gauge-container">
+                            <div id="carbon-gauge" class="gauge">
+                                <span id="carbon-value">0</span><small>kg</small>
+                            </div>
+                        </div>
+                        <p class="limit">Limit: <span id="carbon-limit">1000</span>kg</p>
                     </div>
-                </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 class="card metric-card">
+                        <h3>Capital Balance</h3>
+                        <div class="value-large">$<span id="cash-value">0</span></div>
+                        <div class="trend" id="cash-trend">Fulfillment Active</div>
                     </div>
-                </div>
-            </section>
+
+                    <div class="card metric-card">
+                        <h3>Raw Inventory</h3>
+                        <div class="inventory-grid">
+                            <div class="inv-item">
+                                <span class="label">Chips</span>
+                                <span id="chips-count" class="count">0</span>
+                            </div>
+                            <div class="inv-item">
+                                <span class="label">Sensors</span>
+                                <span id="sensors-count" class="count">0</span>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <section class="details-section">
+                    <div class="card full-width">
+                        <h3>Active Logistics Stream</h3>
+                        <div id="shipments-container" class="shipment-list">
+                            <p class="placeholder">Awaiting shipment data...</p>
+                        </div>
+                    </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>
+            </div>
 
             <section class="guide-section">
                 <div class="card full-width mission-card">
@@ -156,20 +156,16 @@
                         <div class="guide-grid">
                             <div class="guide-item">
                                 <h4>🎯 Objective</h4>
-                                <p>Fulfill "EcoPhone" and "GreenTab" orders by managing a global supply chain. You must keep <strong>Carbon Footprint</strong> below the quota while maximizing <strong>Capital Balance</strong>.</p>
+                                <p>Fulfill "EcoPhone" and "GreenTab" orders by managing a global supply chain. Keep <strong>Carbon Footprint</strong> below limits while maximizing <strong>Capital Balance</strong>.</p>
                             </div>
                             <div class="guide-item">
                                 <h4>🚢 Logistics Trade-offs</h4>
                                 <ul class="guide-list">
-                                    <li><strong>SEA:</strong> Cheapest ($50), cleanest (0.5kg CO2), but very slow (10 days).</li>
-                                    <li><strong>RAIL:</strong> Balanced cost ($125), low CO2 (2.5kg), medium speed (5 days).</li>
-                                    <li><strong>AIR:</strong> Expensive ($250), high CO2 (10kg), but ultra-fast (2 days).</li>
+                                    <li><strong>SEA:</strong> Cheapest ($50), cleanest (0.5kg CO2).</li>
+                                    <li><strong>RAIL:</strong> Balanced ($125), low CO2 (2.5kg).</li>
+                                    <li><strong>AIR:</strong> Expensive ($250), high CO2 (10kg).</li>
                                 </ul>
                             </div>
-                            <div class="guide-item">
-                                <h4>☢️ Crisis Handling</h4>
-                                <p>Clicking <strong>Trigger Suez Jam</strong> simulates a real-world blockade. Sea routes become unavailable for 7 days, forcing you to pivot to expensive Rail/Air routes to meet your deadlines.</p>
-                            </div>
                         </div>
                     </div>
                 </div>