feat: Add new turtle commands for scanning, extraction, building, and autocrafting with error and warning displays

client/src/components/ControlPanel.jsx

@@ -19,6 +19,10 @@ function TurtleCard({ turtle, isSelected, onSelect }) {
     dumpInventory: '#a855f7',
     dumping: '#a855f7',
     moving: '#06b6d4',
+    scan: '#8b5cf6',
+    extraction: '#f97316',
+    building: '#14b8a6',
+    autocraft: '#ec4899',
     unknown: '#6b7280'
   };
 
@@ -134,9 +138,36 @@ function TurtleDetails({ turtle }) {
               }
             </span>
           </div>
+          {turtle.error && (
+            <div className="status-item" style={{ color: '#ef4444' }}>
+              <span className="label">Error:</span>
+              <span className="value">{turtle.error}</span>
+            </div>
+          )}
+          {turtle.warning && (
+            <div className="status-item" style={{ color: '#f59e0b' }}>
+              <span className="label">Warning:</span>
+              <span className="value">{turtle.warning}</span>
+            </div>
+          )}
         </div>
       </div>
 
+      {/* Peripherals section */}
+      {turtle.peripherals && Object.keys(turtle.peripherals).length > 0 && (
+        <div className="detail-section">
+          <h3>Peripherals</h3>
+          <div className="status-grid">
+            {Object.entries(turtle.peripherals).map(([side, type]) => (
+              <div key={side} className="status-item">
+                <span className="label" style={{ textTransform: 'capitalize' }}>{side}:</span>
+                <span className="value" style={{ color: '#a78bfa' }}>{type}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
       <div className="detail-section">
         <h3>State Machine</h3>
         <div className="command-grid">
@@ -204,6 +235,70 @@ function TurtleDetails({ turtle }) {
           >
             🧭 Move To
           </button>
+          <button
+            className={`command-btn ${activeState === 'scan' ? 'active' : ''}`}
+            onClick={() => handleStateChange('scan')}
+            title="Scan surroundings with peripheral scanner"
+            style={activeState === 'scan' ? { outline: '2px solid #fff' } : {}}
+          >
+            📡 Scan
+          </button>
+          <button
+            className={`command-btn ${activeState === 'extraction' ? 'active' : ''}`}
+            onClick={() => {
+              const area = prompt('Enter extraction area (startX,startY,startZ,endX,endY,endZ):');
+              if (area) {
+                const [sx,sy,sz,ex,ey,ez] = area.split(',').map(Number);
+                if (!isNaN(sx) && !isNaN(sy) && !isNaN(sz) && !isNaN(ex) && !isNaN(ey) && !isNaN(ez)) {
+                  const points = [];
+                  for (let x = sx; x <= ex; x++) for (let y = sy; y <= ey; y++) for (let z = sz; z <= ez; z++) {
+                    points.push({x, y, z});
+                  }
+                  handleStateChange('extraction', { area: points });
+                }
+              }
+            }}
+            title="Smart ore extraction in an area"
+            style={activeState === 'extraction' ? { outline: '2px solid #fff' } : {}}
+          >
+            💎 Extract
+          </button>
+          <button
+            className={`command-btn ${activeState === 'building' ? 'active' : ''}`}
+            onClick={() => {
+              const input = prompt('Enter blueprint JSON (array of {x,y,z,name} blocks):');
+              if (input) {
+                try {
+                  const blocks = JSON.parse(input);
+                  handleStateChange('building', { blocks });
+                } catch (e) {
+                  alert('Invalid JSON blueprint');
+                }
+              }
+            }}
+            title="Build from blueprint"
+            style={activeState === 'building' ? { outline: '2px solid #fff' } : {}}
+          >
+            🏗️ Build
+          </button>
+          <button
+            className={`command-btn ${activeState === 'autocraft' ? 'active' : ''}`}
+            onClick={() => {
+              const input = prompt('Enter recipe JSON (array of 16 slot items, null for empty):');
+              if (input) {
+                try {
+                  const recipe = JSON.parse(input);
+                  handleStateChange('autocraft', { recipe });
+                } catch (e) {
+                  alert('Invalid JSON recipe');
+                }
+              }
+            }}
+            title="Automated crafting with workbench"
+            style={activeState === 'autocraft' ? { outline: '2px solid #fff' } : {}}
+          >
+            🔨 Autocraft
+          </button>
         </div>
       </div>