Move the SteamGifts connected status into the header

frontend/src/components/layout/Header.test.tsx

@@ -1,13 +1,30 @@
-import { describe, it, expect, beforeEach } from 'vitest';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { render, screen, fireEvent } from '@/test/utils';
 import { Header } from './Header';
 import { useThemeStore } from '@/stores/themeStore';
+import { api } from '@/services/api';
+
+vi.mock('@/services/api', () => ({
+  api: {
+    get: vi.fn().mockResolvedValue({ success: false, error: 'not mocked', data: undefined }),
+  },
+}));
+
+const mockApi = vi.mocked(api);
+
+function mockSession(session: object) {
+  mockApi.get.mockResolvedValue({
+    success: true,
+    data: { session },
+  });
+}
 
 describe('Header', () => {
   beforeEach(() => {
     // Reset theme store
     useThemeStore.setState({ isDark: false });
     document.documentElement.classList.remove('dark');
+    mockApi.get.mockResolvedValue({ success: false, error: 'not mocked', data: undefined });
   });
 
   it('should render the app title', () => {
@@ -61,4 +78,36 @@ describe('Header', () => {
       expect(button).toBeInTheDocument();
     });
   });
+
+  describe('SteamGifts session indicator', () => {
+    it('shows connected icon with username tooltip when session is valid', async () => {
+      mockSession({ configured: true, valid: true, username: 'TestUser', error: null });
+      render(<Header />);
+
+      const icon = await screen.findByLabelText('Connected to SteamGifts as TestUser');
+      expect(icon).toBeInTheDocument();
+    });
+
+    it('shows invalid-session icon when session expired', async () => {
+      mockSession({ configured: true, valid: false, username: null, error: 'expired' });
+      render(<Header />);
+
+      const icon = await screen.findByLabelText(/session invalid or expired/i);
+      expect(icon).toBeInTheDocument();
+    });
+
+    it('shows not-configured icon when no session is set', async () => {
+      mockSession({ configured: false, valid: false, username: null, error: null });
+      render(<Header />);
+
+      const icon = await screen.findByLabelText(/session not configured/i);
+      expect(icon).toBeInTheDocument();
+    });
+
+    it('renders no indicator while session status is unknown', () => {
+      render(<Header />);
+
+      expect(screen.queryByLabelText(/steamgifts/i)).not.toBeInTheDocument();
+    });
+  });
 });

frontend/src/components/layout/Header.tsx

@@ -1,6 +1,6 @@
-import { Sun, Moon, Activity, Wifi, WifiOff } from 'lucide-react';
+import { Sun, Moon, Activity, Wifi, WifiOff, UserCheck, UserX } from 'lucide-react';
 import { useThemeStore } from '@/stores/themeStore';
-import { useWebSocketStatus } from '@/hooks';
+import { useSessionStatus, useWebSocketStatus } from '@/hooks';
 
 interface HeaderProps {
   schedulerRunning?: boolean;
@@ -13,6 +13,16 @@ interface HeaderProps {
 export function Header({ schedulerRunning = false, schedulerPaused = false }: HeaderProps) {
   const { isDark, toggle } = useThemeStore();
   const { isConnected } = useWebSocketStatus();
+  const { data: session } = useSessionStatus();
+
+  let sessionTitle = 'SteamGifts session not configured';
+  if (session?.configured && session.valid) {
+    sessionTitle = session.username
+      ? `Connected to SteamGifts as ${session.username}`
+      : 'Connected to SteamGifts';
+  } else if (session?.configured) {
+    sessionTitle = 'SteamGifts session invalid or expired — update it in Settings';
+  }
 
   // Determine status color and text
   let statusColor = 'text-gray-400';
@@ -37,6 +47,21 @@ export function Header({ schedulerRunning = false, schedulerPaused = false }: He
         </h1>
 
         <div className="flex items-center gap-4">
+          {/* SteamGifts Session Indicator */}
+          {session && (
+            <div className="flex items-center gap-1" title={sessionTitle}>
+              {session.configured && session.valid ? (
+                <UserCheck className="text-green-500" size={16} aria-label={sessionTitle} />
+              ) : (
+                <UserX
+                  className={session.configured ? 'text-red-500' : 'text-gray-400'}
+                  size={16}
+                  aria-label={sessionTitle}
+                />
+              )}
+            </div>
+          )}
+
           {/* WebSocket Connection Indicator */}
           <div
             className="flex items-center gap-1"

frontend/src/hooks/index.ts

@@ -49,6 +49,7 @@ export {
 // Analytics hooks
 export {
   useDashboard,
+  useSessionStatus,
   useEntryStats,
   useGiveawayStats,
   useGameStats,

frontend/src/hooks/useAnalytics.ts

@@ -22,24 +22,43 @@ export interface TimeRangeFilter {
   to_date?: string;
 }
 
+async function fetchDashboard(): Promise<DashboardData | undefined> {
+  const response = await api.get<DashboardData>('/api/v1/analytics/dashboard');
+  if (!response.success) {
+    throw new Error(response.error || 'Failed to fetch dashboard data');
+  }
+  return response.data;
+}
+
 /**
  * Fetch dashboard overview data
  */
 export function useDashboard() {
   return useQuery({
     queryKey: analyticsKeys.dashboard,
-    queryFn: async () => {
-      const response = await api.get<DashboardData>('/api/v1/analytics/dashboard');
-      if (!response.success) {
-        throw new Error(response.error || 'Failed to fetch dashboard data');
-      }
-      return response.data;
-    },
+    queryFn: fetchDashboard,
     // Dashboard refreshes every 30 seconds
     refetchInterval: 30_000,
   });
 }
 
+/**
+ * SteamGifts session status for the header indicator.
+ *
+ * Shares the dashboard query cache but deliberately does NOT poll: the
+ * dashboard endpoint live-tests the session against SteamGifts, and the
+ * header is mounted on every page. On the Dashboard page the shared cache
+ * is refreshed by useDashboard's interval anyway.
+ */
+export function useSessionStatus() {
+  return useQuery({
+    queryKey: analyticsKeys.dashboard,
+    queryFn: fetchDashboard,
+    staleTime: 60_000,
+    select: (data) => data?.session,
+  });
+}
+
 /** Backend response for entries/summary */
 interface EntrySummaryResponse {
   total_entries: number;

frontend/src/pages/Dashboard.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Play, Pause, Square, RefreshCw, Zap, Gift, Clock, ExternalLink, X, Trophy, RotateCw, AlertTriangle, Settings, CheckCircle, Shield, ShieldAlert, ShieldQuestion } from 'lucide-react';
+import { Play, Pause, Square, RefreshCw, Zap, Gift, Clock, ExternalLink, X, Trophy, RotateCw, AlertTriangle, Settings, Shield, ShieldAlert, ShieldQuestion } from 'lucide-react';
 import { SiSteam } from 'react-icons/si';
 import { Card, Button, Badge, Loading, CardSkeleton } from '@/components/common';
 import { useDashboard, useSchedulerStatus, useSchedulerControl, useGiveaways, useRemoveEntry } from '@/hooks';
@@ -648,18 +648,6 @@ function SessionStatusBanner({ session }: SessionStatusBannerProps) {
     );
   }
 
-  // Session valid - show connected status (compact)
-  return (
-    <div className="rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 p-3">
-      <div className="flex items-center gap-2">
-        <CheckCircle className="text-green-500 shrink-0" size={18} />
-        <span className="text-sm text-green-700 dark:text-green-300">
-          Connected to SteamGifts
-          {session.username && (
-            <span className="font-medium"> as {session.username}</span>
-          )}
-        </span>
-      </div>
-    </div>
-  );
+  // Session valid: no banner — the header shows the connected indicator.
+  return null;
 }