feat: Enhance control panel with additional command buttons and improved movement controls

client/src/components/ControlPanel.jsx

@@ -124,56 +124,125 @@ function TurtleDetails({ turtle }) {
           <button 
             className="command-btn explore"
             onClick={() => handleCommand('explore')}
+            title="Start autonomous exploration and mining"
           >
             🔍 Explore
           </button>
           <button 
             className="command-btn mine"
             onClick={() => handleCommand('mine')}
+            title="Start mining mode"
           >
             ⛏️ Mine
           </button>
           <button 
             className="command-btn return"
             onClick={() => handleCommand('returnHome')}
+            title="Navigate back to home position"
           >
             🏠 Return Home
           </button>
           <button 
             className="command-btn stop"
             onClick={() => handleCommand('stop')}
+            title="Stop all autonomous actions"
           >
             ⏹️ Stop
           </button>
+          <button 
+            className="command-btn manual"
+            onClick={() => handleCommand('manual')}
+            title="Switch to manual control mode"
+          >
+            🎮 Manual Mode
+          </button>
+          <button 
+            className="command-btn setHome"
+            onClick={() => handleCommand('setHome')}
+            title="Set current position as home"
+          >
+            📍 Set Home
+          </button>
+          <button 
+            className="command-btn refuel"
+            onClick={() => handleCommand('refuel')}
+            title="Consume fuel from inventory"
+          >
+            ⛽ Refuel
+          </button>
+          <button 
+            className="command-btn status"
+            onClick={() => handleCommand('status')}
+            title="Request status update"
+          >
+            📊 Status
+          </button>
         </div>
+      </div>
 
-        <div className="manual-controls">
+      <div className="detail-section">
-          <h4>Manual Control</h4>
+        <h3>Movement</h3>
-          <div className="direction-pad">
+        <div className="movement-controls">
-            <button onClick={() => handleCommand('forward')}>↑</button>
+          <div className="movement-row">
-            <div className="horizontal-controls">
+            <button onClick={() => handleCommand('forward')} title="Move forward">↑</button>
-              <button onClick={() => handleCommand('turnLeft')}>←</button>
-              <button onClick={() => handleCommand('turnRight')}>→</button>
-            </div>
-            <button onClick={() => handleCommand('back')}>↓</button>
           </div>
-          <div className="vertical-controls">
+          <div className="movement-row">
-            <button onClick={() => handleCommand('up')}>⬆ Up</button>
+            <button onClick={() => handleCommand('turnLeft')} title="Turn left">←</button>
-            <button onClick={() => handleCommand('down')}>⬇ Down</button>
+            <button onClick={() => handleCommand('back')} title="Move backward">↓</button>
+            <button onClick={() => handleCommand('turnRight')} title="Turn right">→</button>
           </div>
+          <div className="movement-row vertical">
+            <button onClick={() => handleCommand('up')} title="Move up">⬆ Up</button>
+            <button onClick={() => handleCommand('down')} title="Move down">⬇ Down</button>
+          </div>
+        </div>
+      </div>
+
+      <div className="detail-section">
+        <h3>Actions</h3>
+        <div className="action-grid">
+          <button 
+            className="action-btn dig"
+            onClick={() => handleCommand('dig')}
+            title="Dig block in front"
+          >
+            ⛏️ Dig
+          </button>
+          <button 
+            className="action-btn digup"
+            onClick={() => handleCommand('digUp')}
+            title="Dig block above"
+          >
+            ⬆️ Dig Up
+          </button>
+          <button 
+            className="action-btn digdown"
+            onClick={() => handleCommand('digDown')}
+            title="Dig block below"
+          >
+            ⬇️ Dig Down
+          </button>
+          <button 
+            className="action-btn place"
+            onClick={() => handleCommand('place')}
+            title="Place block from inventory"
+          >
+            🧱 Place
+          </button>
         </div>
       </div>
 
       {turtle.inventory && turtle.inventory.length > 0 && (
         <div className="detail-section">
-          <h3>Inventory</h3>
+          <h3>Inventory ({turtle.inventoryCount || turtle.inventory.length}/16)</h3>
           <div className="inventory-list">
             {turtle.inventory.map((item, index) => (
               <div key={index} className="inventory-item">
+                <span className="item-icon">📦</span>
                 <span className="item-name">
-                  {item.name.replace('minecraft:', '')}
+                  {item.name.replace('minecraft:', '').replace(/_/g, ' ')}
                 </span>
-                <span className="item-count">x{item.count}</span>
+                <span className="item-count">×{item.count}</span>
               </div>
             ))}
           </div>