From 08c487bb17a08fb7b8ef9c7aa8b9ff1677bf490c Mon Sep 17 00:00:00 2001
From: jgrusewski <jgrusewski@localhost>
Date: Sun, 22 Feb 2026 07:53:23 +0100
Subject: [PATCH] feat(web-dashboard): show username in StatusBar, add Sign Out
 button

- Display logged-in username (from JWT sub claim) in status bar
- Add Sign Out button that clears tokens and disconnects WebSocket
- Fix useWebSocket hook with stable empty topics reference

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/components/common/StatusBar.tsx       | 25 ++++++++++++++++---
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/web-dashboard/src/components/common/StatusBar.tsx b/web-dashboard/src/components/common/StatusBar.tsx
index 965a1e949..ef66892e3 100644
--- a/web-dashboard/src/components/common/StatusBar.tsx
+++ b/web-dashboard/src/components/common/StatusBar.tsx
@@ -1,8 +1,13 @@
 import { useWebSocket } from '../../hooks/useWebSocket';
-import { isAuthenticated } from '../../lib/auth';
+import { useAuth } from '../../hooks/useAuth';
+import { getTokenClaims } from '../../lib/auth';
+
+const EMPTY_TOPICS: string[] = [];
 
 export function StatusBar() {
-  const { connected } = useWebSocket([]);
+  const { connected } = useWebSocket(EMPTY_TOPICS);
+  const { authenticated, logout } = useAuth();
+  const claims = authenticated ? getTokenClaims() : null;
 
   return (
     <footer className="flex items-center justify-between px-4 py-1 text-xs bg-[var(--color-bg-secondary)] border-t border-[var(--color-border)] text-[var(--color-text-secondary)]">
@@ -15,9 +20,21 @@ export function StatusBar() {
           />
           WS: {connected ? 'Connected' : 'Disconnected'}
         </span>
-        <span>Auth: {isAuthenticated() ? 'Active' : 'None'}</span>
+        {authenticated && claims && (
+          <span>User: {claims.sub}</span>
+        )}
+      </div>
+      <div className="flex items-center gap-4">
+        <span>Foxhunt Trading System</span>
+        {authenticated && (
+          <button
+            onClick={logout}
+            className="text-[var(--color-text-secondary)] hover:text-[var(--color-red)] transition-colors"
+          >
+            Sign Out
+          </button>
+        )}
       </div>
-      <span>Foxhunt Trading System</span>
     </footer>
   );
 }