From f5dbf0587091065ebf13255afff7f34f4e6b6f2b Mon Sep 17 00:00:00 2001
From: John Lightner <jlightner@a.xpltd.co>
Date: Wed, 1 Apr 2026 00:39:57 -0500
Subject: [PATCH] MAESTRO: Add WebSocket connection status indicator to Sidebar

Show a colored dot (green=connected, grey=disconnected) at the bottom
of the sidebar with a text label that hides when the sidebar is collapsed.
Uses the existing useDownloadProgressConnection hook.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../WEBSOCKET-PROGRESS-01.md                  |  3 +-
 src/frontend/src/components/Sidebar.tsx       | 37 +++++++++++++++++++
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/Auto Run Docs/Initiation/2026-03-31-WebSocket-Progress-And-Polish/WEBSOCKET-PROGRESS-01.md b/Auto Run Docs/Initiation/2026-03-31-WebSocket-Progress-And-Polish/WEBSOCKET-PROGRESS-01.md
index 0d24b51..7cf14aa 100644
--- a/Auto Run Docs/Initiation/2026-03-31-WebSocket-Progress-And-Polish/WEBSOCKET-PROGRESS-01.md	
+++ b/Auto Run Docs/Initiation/2026-03-31-WebSocket-Progress-And-Polish/WEBSOCKET-PROGRESS-01.md	
@@ -25,11 +25,12 @@ The backend event bus, WebSocket route, progress parser, and frontend context/ho
   - Use the same `useDownloadProgress` hook pattern established in the Queue page
   - **Note:** Already wired in commit 0541a5f. `ContentStatusCell` component (lines 38-46) uses `useDownloadProgress(item.id)` and renders `<DownloadProgressBar>` for active downloads, falling back to `<StatusBadge>`. Used in status column at line 560.
 
-- [ ] Add a WebSocket connection status indicator to the Sidebar or app header:
+- [x] Add a WebSocket connection status indicator to the Sidebar or app header:
   - Read `src/frontend/src/components/Sidebar.tsx`
   - Import `useDownloadProgressConnection` from the DownloadProgressContext
   - Add a small visual indicator (e.g., a colored dot) near the bottom of the sidebar that shows green when WebSocket is connected and grey/red when disconnected
   - Use existing CSS variables (`--success` for connected, `--text-muted` for disconnected)
+  - **Done:** Added connection status indicator at bottom of sidebar with green/grey dot and "Connected"/"Disconnected" label. Collapses to just the dot when sidebar is collapsed. Uses `useDownloadProgressConnection` hook.
 
 - [ ] Verify the backend emits progress events during streaming downloads:
   - Read `src/services/download.ts` to confirm the `spawnDownload` method emits `download:progress` events via the event bus
diff --git a/src/frontend/src/components/Sidebar.tsx b/src/frontend/src/components/Sidebar.tsx
index 532dc0c..65458ea 100644
--- a/src/frontend/src/components/Sidebar.tsx
+++ b/src/frontend/src/components/Sidebar.tsx
@@ -11,6 +11,7 @@ import {
 } from 'lucide-react';
 import { useState, useEffect } from 'react';
 import { TubearrLogo } from './TubearrLogo';
+import { useDownloadProgressConnection } from '../contexts/DownloadProgressContext';
 
 const NAV_ITEMS = [
   { to: '/', icon: Radio, label: 'Channels' },
@@ -22,6 +23,7 @@ const NAV_ITEMS = [
 ] as const;
 
 export function Sidebar() {
+  const wsConnected = useDownloadProgressConnection();
   const [collapsed, setCollapsed] = useState(() => {
     try {
       return localStorage.getItem('tubearr-sidebar-collapsed') === 'true';
@@ -141,6 +143,41 @@ export function Sidebar() {
           </NavLink>
         ))}
       </div>
+
+      {/* WebSocket connection status */}
+      <div
+        style={{
+          padding: collapsed ? 'var(--space-3)' : 'var(--space-3) var(--space-4)',
+          borderTop: '1px solid var(--border)',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 'var(--space-2)',
+          justifyContent: collapsed ? 'center' : 'flex-start',
+        }}
+        title={wsConnected ? 'WebSocket connected' : 'WebSocket disconnected'}
+      >
+        <span
+          style={{
+            width: 8,
+            height: 8,
+            borderRadius: '50%',
+            backgroundColor: wsConnected ? 'var(--success)' : 'var(--text-muted)',
+            flexShrink: 0,
+            transition: 'background-color var(--transition-fast)',
+          }}
+        />
+        {!collapsed && (
+          <span
+            style={{
+              fontSize: 'var(--font-size-sm)',
+              color: 'var(--text-muted)',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {wsConnected ? 'Connected' : 'Disconnected'}
+          </span>
+        )}
+      </div>
     </nav>
   );
 }