refactor: enhance peripheral display to support multiple types and improve readability

client/src/components/ControlPanel.jsx

@@ -234,10 +234,12 @@ function TurtleDetails({ turtle }) {
         <div className="detail-section">
           <h3>Peripherals</h3>
           <div className="status-grid">
-            {Object.entries(turtle.peripherals).map(([side, type]) => (
+            {Object.entries(turtle.peripherals).map(([side, info]) => (
               <div key={side} className="status-item">
                 <span className="label" style={{ textTransform: 'capitalize' }}>{side}:</span>
-                <span className="value" style={{ color: '#ff55ff' }}>{type}</span>
+                <span className="value" style={{ color: '#ff55ff' }}>
+                  {typeof info === 'string' ? info : (info?.types?.join(', ') || 'unknown')}
+                </span>
               </div>
             ))}
           </div>