fix: connection led

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

@@ -14,20 +14,14 @@ function ConnectionPanel({
   onConnect: () => void;
   onDisconnect: () => void;
 }) {
-  const statusLabel =
-    isConnected(dsp)
-      ? 'Connected'
-      : 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,
-});
 
+    const statusLabel =
+      isConnected(dsp)
+        ? 'Connected'
+        : dsp.isConnecting
+          ? 'Connecting…'
+          : 'Disconnected';
+          
   return (
     <div className="connection-section">
       <Card className="connection-panel">
@@ -42,10 +36,10 @@ function ConnectionPanel({
 
           <div className="connection-panel__status">
             <span className="connection-panel__led">
-              {/* <Led status={dsp.status} /> */}
+              <Led status={dsp.isConnecting ? "connecting" : isConnected(dsp) ? "connected" : "disconnected"} />
             </span>
 
-            {/* <span className={`status-label status-label--${dsp.status}`}>{statusLabel}</span> */}
+            <span>{statusLabel}</span>
           </div>
         </div>
 

src/features/dsp408/types.ts

@@ -247,13 +247,13 @@ export type DSPState = {
 };
 
 export enum ConnectionStatus {
-    Connected,
-    Disconnected,
+  Connected = 'Connected',
+  Disconnected = 'Disconnected',
 }
 
 export enum DSPMode {
-    Demo,
-    Normal,
+    Demo = 'Demo',
+    Normal = 'Normal',
 }
 
 export type DSP408Snapshot = {