feat(ui): show user and logout

apps/visualizer/src/App.tsx

@@ -9,6 +9,7 @@ import Tabs from './ui/Tabs';
 import MarketHeader from './features/market/MarketHeader';
 import Button from './ui/Button';
 import TopNav from './layout/TopNav';
+import AuthStatus from './layout/AuthStatus';
 
 function envNumber(name: string, fallback: number): number {
   const v = (import.meta as any).env?.[name];
@@ -155,7 +156,7 @@ export default function App() {
 
   return (
     <AppShell
-      header={<TopNav active="trade" />}
+      header={<TopNav active="trade" rightSlot={<AuthStatus />} />}
       top={<TickerBar items={topItems} />}
       main={
         <div className="tradeMain">

apps/visualizer/src/layout/AuthStatus.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react';
+import Button from '../ui/Button';
+
+type WhoamiResponse = {
+  ok?: boolean;
+  user?: string | null;
+};
+
+export default function AuthStatus() {
+  const [user, setUser] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    fetch('/whoami', { cache: 'no-store' })
+      .then(async (res) => {
+        const json = (await res.json().catch(() => null)) as WhoamiResponse | null;
+        const u = typeof json?.user === 'string' ? json.user.trim() : '';
+        return u || null;
+      })
+      .then((u) => {
+        if (cancelled) return;
+        setUser(u);
+      })
+      .catch(() => {
+        if (cancelled) return;
+        setUser(null);
+      })
+      .finally(() => {
+        if (cancelled) return;
+        setLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const logout = () => {
+    window.location.href = '/logout';
+  };
+
+  return (
+    <div className="authStatus">
+      <Button size="sm" variant="ghost" type="button" onClick={logout}>
+        Wyloguj
+      </Button>
+      <div className="topNav__account">
+        <div className="topNav__accountName">{loading ? '…' : user || 'unknown'}</div>
+        <div className="topNav__accountSub">zalogowany</div>
+      </div>
+    </div>
+  );
+}

apps/visualizer/src/styles.css

@@ -282,6 +282,12 @@ a:hover {
   align-items: center;
 }
 
+.authStatus {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
 .topNav__iconBtn {
   background: rgba(255, 255, 255, 0.02);
   border: 1px solid rgba(255, 255, 255, 0.12);