feat: Add equipment and inventory action buttons to TurtleCard

client/src/components/ControlPanel.jsx

@@ -487,17 +487,86 @@ function TurtleDetails({ turtle }) {
         </div>
       </div>
 
+      {/* Equipment & Inventory Actions */}
+      <div className="detail-section">
+        <h3>Equipment & Inventory</h3>
+        <div className="action-grid">
+          <button
+            className="action-btn"
+            onClick={() => equipLeft(turtle.turtleID)}
+            title="Equip selected item on left side"
+          >
+            🛡️ Equip L
+          </button>
+          <button
+            className="action-btn"
+            onClick={() => equipRight(turtle.turtleID)}
+            title="Equip selected item on right side"
+          >
+            🗡️ Equip R
+          </button>
+          <button
+            className="action-btn"
+            onClick={() => sortInventory(turtle.turtleID)}
+            title="Sort and compact inventory"
+          >
+            📋 Sort
+          </button>
+          <button
+            className="action-btn"
+            onClick={() => dropItems(turtle.turtleID, 'front')}
+            title="Drop items forward"
+          >
+            📤 Drop
+          </button>
+          <button
+            className="action-btn"
+            onClick={() => dropItems(turtle.turtleID, 'up')}
+            title="Drop items upward"
+          >
+            ⬆️ Drop Up
+          </button>
+          <button
+            className="action-btn"
+            onClick={() => dropItems(turtle.turtleID, 'down')}
+            title="Drop items downward"
+          >
+            ⬇️ Drop Down
+          </button>
+          <button
+            className="action-btn"
+            onClick={() => suckItems(turtle.turtleID, 'front')}
+            title="Suck items from front"
+          >
+            📥 Suck
+          </button>
+          <button
+            className="action-btn"
+            onClick={() => {
+              const side = prompt('Enter peripheral side (front/top/bottom/left/right):');
+              if (side) connectToInventory(turtle.turtleID, side);
+            }}
+            title="Read adjacent inventory peripheral contents"
+          >
+            📦 Read Inv
+          </button>
+        </div>
+      </div>
+
       {turtle.inventory && turtle.inventory.length > 0 && (
         <div className="detail-section">
-          <h3>Inventory ({turtle.inventoryCount || turtle.inventory.length}/16)</h3>
+          <h3>Inventory ({turtle.inventoryCount || turtle.inventory.length}/16) — Slot: {turtle.selectedSlot || 1}</h3>
           <div className="inventory-grid">
             {Array.from({ length: 16 }, (_, slotIndex) => {
               const item = turtle.inventory[slotIndex];
+              const isSelected = (turtle.selectedSlot || 1) === (slotIndex + 1);
               return (
                 <div 
                   key={slotIndex} 
-                  className={`inventory-slot ${item ? 'filled' : 'empty'}`}
+                  className={`inventory-slot ${item ? 'filled' : 'empty'} ${isSelected ? 'selected-slot' : ''}`}
-                  title={item ? `${item.name.replace('minecraft:', '').replace(/_/g, ' ')} (${item.count})` : 'Empty'}
+                  title={item ? `${item.name.replace('minecraft:', '').replace(/_/g, ' ')} (${item.count}) — Click to select` : `Slot ${slotIndex + 1} — Click to select`}
+                  onClick={() => handleSlotClick(slotIndex)}
+                  style={isSelected ? { outline: '2px solid #60a5fa', outlineOffset: '-2px' } : {}}
                 >
                   {item ? (
                     <>