unstable

src/features/dsp408/components/ConnectionSection/ConnectionSection.tsx

@@ -1,4 +1,4 @@
-import { DSP } from '../../../../types';
+import { DSP, isConnected } from '../../../../types';
 import Button from '../../../../components/Button/Button';
 import Card from '../../../../components/Card/Card';
 import Led from '../../../../components/Led/Led';
@@ -15,12 +15,19 @@ function ConnectionPanel({
   onDisconnect: () => void;
 }) {
   const statusLabel =
-    dsp.status === 'connected'
+    isConnected(dsp)
       ? 'Connected'
-      : dsp.status === 'connecting'
+      : dsp.isConnecting
         ? 'Connecting…'
         : 'Disconnected';
 
+      console.log('ConnectionPanel render:', {
+  id: dsp.id,
+  connection: dsp.type === 'DSP408' ? dsp.state.connection : undefined,
+  isConnected: isConnected(dsp),
+  isConnecting: dsp.isConnecting,
+});
+
   return (
     <div className="connection-section">
       <Card className="connection-panel">
@@ -35,10 +42,10 @@ function ConnectionPanel({
 
           <div className="connection-panel__status">
             <span className="connection-panel__led">
-              <Led status={dsp.status} />
+              {/* <Led status={dsp.status} /> */}
             </span>
 
-            <span className={`status-label status-label--${dsp.status}`}>{statusLabel}</span>
+            {/* <span className={`status-label status-label--${dsp.status}`}>{statusLabel}</span> */}
           </div>
         </div>
 
@@ -64,13 +71,13 @@ function ConnectionPanel({
         </dl>
 
         <div className="connection-panel__actions">
-          {dsp.status === 'connected' ? (
+          {isConnected(dsp) ? (
             <Button variant="outline" onClick={onDisconnect}>
               Disconnect
             </Button>
           ) : (
-            <Button variant="primary" onClick={onConnect} disabled={dsp.status === 'connecting'}>
-              {dsp.status === 'connecting' ? 'Connecting…' : 'Connect'}
+            <Button variant="primary" onClick={onConnect} disabled={dsp.isConnecting}>
+              {dsp.isConnecting ? 'Connecting…' : 'Connect'}
             </Button>
           )}
         </div>