con/discon

api/src/routes/channels.js

@@ -36,4 +36,23 @@ router.post('/join', async (req, res) => {
   }
 });
 
+// Disconnect from voice channel
+router.post('/disconnect', async (req, res) => {
+  try {
+    const response = await fetch(`${req.app.locals.botUrl}/disconnect`, {
+      method: 'POST'
+    });
+    const result = await response.json();
+
+    if (response.ok) {
+      req.app.locals.broadcast('channelChange', { disconnected: true });
+    }
+
+    res.status(response.status).json(result);
+  } catch (error) {
+    req.app.locals.logger.error(`Error disconnecting: ${error.message}`);
+    res.status(500).json({ error: 'Failed to disconnect' });
+  }
+});
+
 export default router;

bot/src/index.js

@@ -503,6 +503,31 @@ app.post('/join', async (req, res) => {
   }
 });
 
+app.post('/disconnect', async (req, res) => {
+  try {
+    if (connection) {
+      connection.destroy();
+      connection = null;
+
+      // Pause playback when disconnecting
+      if (currentState.state === 'playing') {
+        currentState.state = 'paused';
+        if (player) {
+          player.pause();
+        }
+      }
+
+      logger.info('Disconnected from voice channel');
+      res.json({ success: true, message: 'Disconnected from voice channel' });
+    } else {
+      res.json({ success: true, message: 'Already disconnected' });
+    }
+  } catch (error) {
+    logger.error(`Failed to disconnect: ${error.message}`);
+    res.status(500).json({ error: 'Failed to disconnect' });
+  }
+});
+
 app.listen(INTERNAL_PORT, () => {
   logger.info(`Internal API listening on port ${INTERNAL_PORT}`);
 });

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>
+          <div className="flex items-center justify-between mb-4">
-          <p className="text-slate-300 flex items-center gap-2">
+            <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>