con/discon

web/src/App.jsx

@@ -4,6 +4,7 @@ import Controls from './components/Controls';
 import TrackList from './components/TrackList';
 import UploadZone from './components/UploadZone';
 import ChannelSelector from './components/ChannelSelector';
+import ConnectionStatus from './components/ConnectionStatus';
 import useWebSocket from './hooks/useWebSocket';
 
 const API_URL = import.meta.env.VITE_API_URL || '/api';
@@ -131,10 +132,13 @@ function App() {
     <div className="min-h-screen bg-gradient-to-br from-slate-900 via-red-900 to-green-900">
       <div className="container mx-auto px-4 py-8 max-w-7xl">
         <header className="mb-8">
-          <h1 className="text-4xl font-bold text-white mb-2">10node christmas bot</h1>
-          <p className="text-slate-300 flex items-center gap-2">
+          <div className="flex items-center justify-between mb-4">
+            <h1 className="text-4xl font-bold text-white">10node christmas bot</h1>
+            <ConnectionStatus />
+          </div>
+          <p className="text-slate-300 text-sm flex items-center gap-2">
             <span className={`inline-block w-2 h-2 rounded-full ${connected ? 'bg-green-400' : 'bg-red-400'}`}></span>
-            {connected ? 'Connected' : 'Disconnected'}
+            WebSocket: {connected ? 'Connected' : 'Disconnected'}
           </p>
         </header>