diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index db3626f..c5db70d 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,12 +1,13 @@
 // Orchestration Engine - App Router
 //
-// Depends on: hooks/useAuth.tsx, components/AuthGuard.tsx, components/Layout.tsx,
-//             components/ErrorBoundary.tsx
+// Depends on: hooks/useAuth.tsx, components/AuthGuard.tsx, components/RequireRole.tsx,
+//             components/Layout.tsx, components/ErrorBoundary.tsx
 // Used by:    main.tsx
 
 import { BrowserRouter, Routes, Route } from 'react-router-dom'
 import { AuthProvider } from './hooks/useAuth'
 import AuthGuard from './components/AuthGuard'
+import RequireRole from './components/RequireRole'
 import ErrorBoundary from './components/ErrorBoundary'
 import Layout from './components/Layout'
 import Login from './pages/Login'
@@ -41,9 +42,12 @@ export default function App() {
                 <Route path="/project/:id/task/:taskId" element={<TaskDetail />} />
                 <Route path="/usage" element={<Usage />} />
                 <Route path="/services" element={<Services />} />
-                <Route path="/admin" element={<Admin />} />
-                <Route path="/analytics" element={<Analytics />} />
                 <Route path="/rag" element={<RAG />} />
+                {/* Admin-only routes */}
+                <Route element={<RequireRole role="admin" />}>
+                  <Route path="/admin" element={<Admin />} />
+                  <Route path="/analytics" element={<Analytics />} />
+                </Route>
               </Route>
             </Route>
 
diff --git a/frontend/src/api/client.ts b/frontend/src/api/client.ts
index d1d11c8..6fb4831 100644
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -10,7 +10,7 @@ import { getAccessToken, apiRefresh } from './auth'
 
 const BASE = '/api'
 
-async function authFetch(path: string, init?: RequestInit): Promise<Response> {
+export async function authFetch(path: string, init?: RequestInit): Promise<Response> {
   const token = getAccessToken()
   const headers = new Headers(init?.headers)
   if (token) {
diff --git a/frontend/src/api/projects.ts b/frontend/src/api/projects.ts
index 924fd1e..4366b51 100644
--- a/frontend/src/api/projects.ts
+++ b/frontend/src/api/projects.ts
@@ -1,6 +1,6 @@
 // Orchestration Engine - Projects API
 
-import { apiFetch, apiPost, apiPatch, apiDelete } from './client'
+import { apiFetch, apiPost, apiPatch, apiDelete, authFetch } from './client'
 import type { Project, Plan, Task, Checkpoint, CoverageReport, PlanningRigor } from '../types'
 
 export const listProjects = (status?: string) =>
@@ -83,11 +83,7 @@ export const cloneProject = (projectId: string) =>
   apiPost<Project>(`/projects/${projectId}/clone`)
 
 export const exportProject = async (projectId: string) => {
-  const { getAccessToken } = await import('./auth')
-  const token = getAccessToken()
-  const resp = await fetch(`/api/projects/${projectId}/export`, {
-    headers: token ? { Authorization: `Bearer ${token}` } : {},
-  })
+  const resp = await authFetch(`/projects/${projectId}/export`)
   if (!resp.ok) throw new Error('Export failed')
   const blob = await resp.blob()
   const url = URL.createObjectURL(blob)
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index e16ad38..30755b1 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -13,7 +13,7 @@ export default function Layout() {
 
   return (
     <div className="layout">
-      <nav className="sidebar">
+      <nav className="sidebar" aria-label="Main navigation">
         <h1>Orchestration</h1>
         <NavLink to="/" className={({ isActive }) => isActive ? 'active' : ''} end>
           Dashboard
diff --git a/frontend/src/components/Modal.test.tsx b/frontend/src/components/Modal.test.tsx
index ec9ca51..dfcb08a 100644
--- a/frontend/src/components/Modal.test.tsx
+++ b/frontend/src/components/Modal.test.tsx
@@ -37,4 +37,20 @@ describe('Modal', () => {
     fireEvent.click(screen.getByText('Content'))
     expect(onClose).not.toHaveBeenCalled()
   })
+
+  it('has correct ARIA attributes', () => {
+    render(<Modal open={true} onClose={vi.fn()} title="Accessible Modal">Body</Modal>)
+    const dialog = screen.getByRole('dialog')
+    expect(dialog).toHaveAttribute('aria-modal', 'true')
+    expect(dialog).toHaveAttribute('aria-labelledby')
+
+    // Title is connected via aria-labelledby
+    const titleId = dialog.getAttribute('aria-labelledby')!
+    expect(document.getElementById(titleId)?.textContent).toBe('Accessible Modal')
+  })
+
+  it('close button has aria-label', () => {
+    render(<Modal open={true} onClose={vi.fn()} title="Test">Content</Modal>)
+    expect(screen.getByLabelText('Close')).toBeInTheDocument()
+  })
 })
diff --git a/frontend/src/components/Modal.tsx b/frontend/src/components/Modal.tsx
index ceed865..6b09092 100644
--- a/frontend/src/components/Modal.tsx
+++ b/frontend/src/components/Modal.tsx
@@ -1,11 +1,12 @@
 // Orchestration Engine - Modal Component
 //
-// Portal-based modal with backdrop click and Escape key to close.
+// Portal-based modal with backdrop click, Escape key, focus trap,
+// and ARIA attributes for accessibility.
 //
 // Depends on: (none)
 // Used by:    pages/TaskDetail.tsx
 
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useId } from 'react'
 import { createPortal } from 'react-dom'
 
 interface ModalProps {
@@ -17,7 +18,28 @@ interface ModalProps {
 
 export default function Modal({ open, onClose, title, children }: ModalProps) {
   const overlayRef = useRef<HTMLDivElement>(null)
+  const contentRef = useRef<HTMLDivElement>(null)
+  const previousFocusRef = useRef<Element | null>(null)
+  const titleId = useId()
 
+  // Save/restore focus and lock body scroll
+  useEffect(() => {
+    if (!open) return
+    previousFocusRef.current = document.activeElement
+    document.body.style.overflow = 'hidden'
+
+    // Focus the modal content for keyboard users
+    requestAnimationFrame(() => {
+      contentRef.current?.focus()
+    })
+
+    return () => {
+      document.body.style.overflow = '';
+      (previousFocusRef.current as HTMLElement)?.focus?.()
+    }
+  }, [open])
+
+  // Escape key
   useEffect(() => {
     if (!open) return
     const handleEsc = (e: KeyboardEvent) => {
@@ -27,6 +49,29 @@ export default function Modal({ open, onClose, title, children }: ModalProps) {
     return () => window.removeEventListener('keydown', handleEsc)
   }, [open, onClose])
 
+  // Focus trap: Tab cycles within modal
+  useEffect(() => {
+    if (!open) return
+    const handleTab = (e: KeyboardEvent) => {
+      if (e.key !== 'Tab' || !contentRef.current) return
+      const focusable = contentRef.current.querySelectorAll<HTMLElement>(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      )
+      if (focusable.length === 0) return
+      const first = focusable[0]
+      const last = focusable[focusable.length - 1]
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault()
+        last.focus()
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault()
+        first.focus()
+      }
+    }
+    window.addEventListener('keydown', handleTab)
+    return () => window.removeEventListener('keydown', handleTab)
+  }, [open])
+
   if (!open) return null
 
   return createPortal(
@@ -35,12 +80,20 @@ export default function Modal({ open, onClose, title, children }: ModalProps) {
       ref={overlayRef}
       onClick={e => { if (e.target === overlayRef.current) onClose() }}
     >
-      <div className="modal-content">
+      <div
+        className="modal-content"
+        ref={contentRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        tabIndex={-1}
+      >
         <div className="flex-between mb-2">
-          <h3 style={{ margin: 0 }}>{title}</h3>
+          <h3 id={titleId} style={{ margin: 0 }}>{title}</h3>
           <button
             className="btn btn-sm"
             onClick={onClose}
+            aria-label="Close"
             style={{ background: 'transparent', color: 'var(--text-dim)' }}
           >
             &times;
diff --git a/frontend/src/components/RequireRole.test.tsx b/frontend/src/components/RequireRole.test.tsx
new file mode 100644
index 0000000..7f67af4
--- /dev/null
+++ b/frontend/src/components/RequireRole.test.tsx
@@ -0,0 +1,74 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { MemoryRouter, Route, Routes } from 'react-router-dom'
+import RequireRole from './RequireRole'
+
+vi.mock('../hooks/useAuth', () => ({
+  useAuth: vi.fn(),
+}))
+
+import { useAuth } from '../hooks/useAuth'
+
+const mockUseAuth = vi.mocked(useAuth)
+
+function renderWithRouter(role: string, userRole?: string, userPresent = true) {
+  mockUseAuth.mockReturnValue({
+    user: userPresent ? { id: '1', email: 'test@example.com', display_name: 'Test', role: userRole! } : null,
+    loading: false,
+    login: vi.fn(),
+    logout: vi.fn(),
+    loginWithOIDC: vi.fn(),
+    setUserFromOIDC: vi.fn(),
+  })
+
+  return render(
+    <MemoryRouter initialEntries={['/admin']}>
+      <Routes>
+        <Route element={<RequireRole role={role} />}>
+          <Route path="/admin" element={<div>Admin Content</div>} />
+        </Route>
+      </Routes>
+    </MemoryRouter>
+  )
+}
+
+describe('RequireRole', () => {
+  it('renders outlet for correct role', () => {
+    renderWithRouter('admin', 'admin')
+    expect(screen.getByText('Admin Content')).toBeInTheDocument()
+  })
+
+  it('denies access for wrong role', () => {
+    renderWithRouter('admin', 'user')
+    expect(screen.queryByText('Admin Content')).not.toBeInTheDocument()
+    expect(screen.getByText(/Access denied/)).toBeInTheDocument()
+  })
+
+  it('denies access when no user', () => {
+    renderWithRouter('admin', undefined, false)
+    expect(screen.queryByText('Admin Content')).not.toBeInTheDocument()
+    expect(screen.getByText(/Access denied/)).toBeInTheDocument()
+  })
+
+  it('renders custom fallback', () => {
+    mockUseAuth.mockReturnValue({
+      user: { id: '1', email: 'a@b.com', display_name: 'X', role: 'user' },
+      loading: false,
+      login: vi.fn(),
+      logout: vi.fn(),
+      loginWithOIDC: vi.fn(),
+      setUserFromOIDC: vi.fn(),
+    })
+
+    render(
+      <MemoryRouter initialEntries={['/admin']}>
+        <Routes>
+          <Route element={<RequireRole role="admin" fallback={<div>Custom Denied</div>} />}>
+            <Route path="/admin" element={<div>Admin Content</div>} />
+          </Route>
+        </Routes>
+      </MemoryRouter>
+    )
+    expect(screen.getByText('Custom Denied')).toBeInTheDocument()
+  })
+})
diff --git a/frontend/src/components/RequireRole.tsx b/frontend/src/components/RequireRole.tsx
new file mode 100644
index 0000000..2d36137
--- /dev/null
+++ b/frontend/src/components/RequireRole.tsx
@@ -0,0 +1,29 @@
+// Orchestration Engine - Role Guard Component
+//
+// Route-level guard that restricts access by user role.
+// Renders <Outlet /> for authorized users, denial message otherwise.
+//
+// Depends on: hooks/useAuth.tsx
+// Used by:    App.tsx
+
+import { Outlet } from 'react-router-dom'
+import { useAuth } from '../hooks/useAuth'
+
+interface RequireRoleProps {
+  role: string
+  fallback?: React.ReactNode
+}
+
+export default function RequireRole({ role, fallback }: RequireRoleProps) {
+  const { user } = useAuth()
+
+  if (!user || user.role !== role) {
+    return fallback ? <>{fallback}</> : (
+      <p className="text-dim" style={{ padding: '2rem' }}>
+        Access denied. {role} role required.
+      </p>
+    )
+  }
+
+  return <Outlet />
+}
diff --git a/frontend/src/hooks/useFetch.test.ts b/frontend/src/hooks/useFetch.test.ts
index 132475f..1c776ac 100644
--- a/frontend/src/hooks/useFetch.test.ts
+++ b/frontend/src/hooks/useFetch.test.ts
@@ -66,6 +66,27 @@ describe('useFetch', () => {
     expect(result.current.error).toBeNull()
   })
 
+  it('does not setState after unmount (cancellation guard)', async () => {
+    let resolve: (v: string) => void
+    const fetchFn = vi.fn().mockReturnValue(
+      new Promise<string>(r => { resolve = r })
+    )
+
+    const { result, unmount } = renderHook(() => useFetch(fetchFn))
+
+    // Still loading
+    expect(result.current.loading).toBe(true)
+
+    // Unmount before the fetch resolves
+    unmount()
+
+    // Resolve the fetch — should NOT throw or update state
+    resolve!('late-data')
+
+    // No error means the cancellation guard prevented setState after unmount
+    // (React would warn about setState on unmounted component without the guard)
+  })
+
   it('re-fetches when deps change', async () => {
     const fetchFn = vi.fn().mockResolvedValue('data')
     let dep = 'a'
diff --git a/frontend/src/hooks/useFetch.ts b/frontend/src/hooks/useFetch.ts
index c850653..eb6180c 100644
--- a/frontend/src/hooks/useFetch.ts
+++ b/frontend/src/hooks/useFetch.ts
@@ -25,20 +25,24 @@ export function useFetch<T>(
   const fetchRef = useRef(fetchFn)
   fetchRef.current = fetchFn
 
+  const cancelledRef = useRef(false)
+
   const doFetch = useCallback(async () => {
+    cancelledRef.current = false
     setLoading(true)
     setError(null)
     try {
       const result = await fetchRef.current()
-      setData(result)
+      if (!cancelledRef.current) setData(result)
     } catch (e) {
-      setError(String(e))
+      if (!cancelledRef.current) setError(String(e))
     }
-    setLoading(false)
+    if (!cancelledRef.current) setLoading(false)
   }, [])
 
   useEffect(() => {
     doFetch()
+    return () => { cancelledRef.current = true }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, deps)
 
diff --git a/frontend/src/hooks/useSSE.test.ts b/frontend/src/hooks/useSSE.test.ts
index 2db1854..c14569d 100644
--- a/frontend/src/hooks/useSSE.test.ts
+++ b/frontend/src/hooks/useSSE.test.ts
@@ -118,7 +118,7 @@ describe('useSSE', () => {
     expect(result.current.events[0].type).toBe('task_start')
   })
 
-  it('onerror sets connected to false', async () => {
+  it('onerror closes source and sets disconnected', async () => {
     mockApiPost.mockResolvedValue({ token: 'tok' })
 
     const { result } = renderHook(() => useSSE('proj_001'))
@@ -132,10 +132,64 @@ describe('useSSE', () => {
     })
     expect(result.current.connected).toBe(true)
 
+    // Trigger error — should close source immediately (not leave open for
+    // auto-reconnect, which would fail with an expired SSE token)
     act(() => {
       MockEventSource.instances[0]._fireError()
     })
     expect(result.current.connected).toBe(false)
+    expect(MockEventSource.instances[0].closed).toBe(true)
+  })
+
+  it('reconnects with fresh token after error', async () => {
+    mockApiPost
+      .mockResolvedValueOnce({ token: 'tok1' })
+      .mockResolvedValueOnce({ token: 'tok2' })
+
+    renderHook(() => useSSE('proj_001'))
+
+    await waitFor(() => {
+      expect(MockEventSource.instances).toHaveLength(1)
+    })
+
+    // Trigger error to start reconnect
+    act(() => {
+      MockEventSource.instances[0]._fireError()
+    })
+
+    // Wait for the backoff timer + reconnect to create a new EventSource
+    await waitFor(() => {
+      expect(MockEventSource.instances).toHaveLength(2)
+    }, { timeout: 3000 })
+
+    // Second connection should use a fresh token
+    expect(mockApiPost).toHaveBeenCalledTimes(2)
+    expect(MockEventSource.instances[1].url).toContain('tok2')
+  })
+
+  it('onopen resets retry count', async () => {
+    mockApiPost.mockResolvedValue({ token: 'tok' })
+
+    const { result } = renderHook(() => useSSE('proj_001'))
+
+    await waitFor(() => {
+      expect(MockEventSource.instances).toHaveLength(1)
+    })
+
+    // Error then reconnect
+    act(() => {
+      MockEventSource.instances[0]._fireError()
+    })
+
+    await waitFor(() => {
+      expect(MockEventSource.instances).toHaveLength(2)
+    }, { timeout: 3000 })
+
+    // Successful open should reset retry count
+    act(() => {
+      MockEventSource.instances[1]._fireOpen()
+    })
+    expect(result.current.connected).toBe(true)
   })
 
   it('cleanup on unmount closes source', async () => {
@@ -151,7 +205,7 @@ describe('useSSE', () => {
     expect(MockEventSource.instances[0].closed).toBe(true)
   })
 
-  it('token fetch failure → connected false', async () => {
+  it('token fetch failure → connected false, retries later', async () => {
     mockApiPost.mockRejectedValue(new Error('Auth failed'))
 
     const { result } = renderHook(() => useSSE('proj_001'))
@@ -162,5 +216,7 @@ describe('useSSE', () => {
 
     expect(result.current.connected).toBe(false)
     expect(MockEventSource.instances).toHaveLength(0)
+    // Will retry with backoff — first attempt already counted
+    expect(mockApiPost).toHaveBeenCalledTimes(1)
   })
 })
diff --git a/frontend/src/hooks/useSSE.ts b/frontend/src/hooks/useSSE.ts
index b54aa03..91b1415 100644
--- a/frontend/src/hooks/useSSE.ts
+++ b/frontend/src/hooks/useSSE.ts
@@ -4,6 +4,9 @@
 // Fetches a short-lived SSE token before connecting (never exposes
 // the full access token in a URL).
 //
+// Reconnects with exponential backoff and fresh tokens on failure.
+// Stops after MAX_RETRIES consecutive failures to avoid infinite loops.
+//
 // Depends on: types/index.ts, api/auth.ts, api/client.ts
 // Used by:    pages/ProjectDetail.tsx
 
@@ -12,6 +15,9 @@ import type { SSEEvent } from '../types'
 import { apiPost } from '../api/client'
 
 const MAX_EVENTS = 200
+const MAX_RETRIES = 5
+const BASE_BACKOFF_MS = 1000
+const MAX_BACKOFF_MS = 30000
 
 interface SSEState {
   events: SSEEvent[]
@@ -34,15 +40,20 @@ export function useSSE(projectId: string | null, options?: UseSSEOptions): SSESt
   const sourceRef = useRef<EventSource | null>(null)
   const onEventRef = useRef(options?.onEvent)
   onEventRef.current = options?.onEvent
+  const retryCountRef = useRef(0)
+  const reconnectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   useEffect(() => {
     if (!projectId) return
 
+    retryCountRef.current = 0
     let cancelled = false
 
     async function connect() {
+      if (cancelled) return
+
       try {
-        // Fetch a short-lived SSE token scoped to this project
+        // Fetch a fresh short-lived SSE token scoped to this project
         const { token } = await apiPost<{ token: string }>(
           `/events/${projectId}/token`
         )
@@ -53,6 +64,7 @@ export function useSSE(projectId: string | null, options?: UseSSEOptions): SSESt
         sourceRef.current = source
 
         source.onopen = () => {
+          retryCountRef.current = 0
           setState(prev => ({ ...prev, connected: true }))
         }
 
@@ -72,11 +84,39 @@ export function useSSE(projectId: string | null, options?: UseSSEOptions): SSESt
         }
 
         source.onerror = () => {
+          // Close immediately — built-in auto-reconnect won't work because
+          // the SSE token is short-lived and will be expired on retry
+          source.close()
+          sourceRef.current = null
           setState(prev => ({ ...prev, connected: false }))
-          // Don't close — let EventSource auto-reconnect
+
+          if (cancelled) return
+
+          retryCountRef.current++
+          if (retryCountRef.current > MAX_RETRIES) {
+            return // Stop after too many consecutive failures
+          }
+
+          // Reconnect with exponential backoff and a fresh token
+          const delay = Math.min(
+            BASE_BACKOFF_MS * Math.pow(2, retryCountRef.current - 1),
+            MAX_BACKOFF_MS,
+          )
+          reconnectTimerRef.current = setTimeout(connect, delay)
         }
       } catch {
         setState(prev => ({ ...prev, connected: false }))
+
+        if (cancelled) return
+
+        retryCountRef.current++
+        if (retryCountRef.current > MAX_RETRIES) return
+
+        const delay = Math.min(
+          BASE_BACKOFF_MS * Math.pow(2, retryCountRef.current - 1),
+          MAX_BACKOFF_MS,
+        )
+        reconnectTimerRef.current = setTimeout(connect, delay)
       }
     }
 
@@ -84,6 +124,10 @@ export function useSSE(projectId: string | null, options?: UseSSEOptions): SSESt
 
     return () => {
       cancelled = true
+      if (reconnectTimerRef.current) {
+        clearTimeout(reconnectTimerRef.current)
+        reconnectTimerRef.current = null
+      }
       if (sourceRef.current) {
         sourceRef.current.close()
         sourceRef.current = null
diff --git a/frontend/src/pages/Admin.tsx b/frontend/src/pages/Admin.tsx
index 43ad785..230b3e8 100644
--- a/frontend/src/pages/Admin.tsx
+++ b/frontend/src/pages/Admin.tsx
@@ -19,14 +19,16 @@ export default function Admin() {
   const { data: users, loading: usersLoading, error: usersError, refetch: refetchUsers } = useFetch<AdminUser[]>(listUsers)
   const { data: stats, loading: statsLoading, error: statsError } = useFetch<AdminStats>(getStats)
   const [updating, setUpdating] = useState<string | null>(null)
+  const [actionError, setActionError] = useState<string | null>(null)
 
   const handleToggleActive = useCallback(async (user: AdminUser) => {
     setUpdating(user.id)
+    setActionError(null)
     try {
       await updateUser(user.id, { is_active: !user.is_active })
       refetchUsers()
     } catch (err) {
-      alert(err instanceof Error ? err.message : 'Update failed')
+      setActionError(err instanceof Error ? err.message : 'Update failed')
     } finally {
       setUpdating(null)
     }
@@ -34,11 +36,12 @@ export default function Admin() {
 
   const handleChangeRole = useCallback(async (user: AdminUser, role: 'admin' | 'user') => {
     setUpdating(user.id)
+    setActionError(null)
     try {
       await updateUser(user.id, { role })
       refetchUsers()
     } catch (err) {
-      alert(err instanceof Error ? err.message : 'Update failed')
+      setActionError(err instanceof Error ? err.message : 'Update failed')
     } finally {
       setUpdating(null)
     }
@@ -109,6 +112,7 @@ export default function Admin() {
       {/* Users */}
       <div className="card">
         <h2>Users</h2>
+        {actionError && <div className="auth-error mb-1">{actionError}</div>}
         {usersLoading && <p className="text-dim">Loading users...</p>}
         {usersError && <p className="text-dim">Failed to load users: {usersError}</p>}
         {users && (
diff --git a/frontend/src/pages/Analytics.test.tsx b/frontend/src/pages/Analytics.test.tsx
index 5ba6564..5aaf9a2 100644
--- a/frontend/src/pages/Analytics.test.tsx
+++ b/frontend/src/pages/Analytics.test.tsx
@@ -3,23 +3,16 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import { render, screen, waitFor } from '@testing-library/react'
 
-vi.mock('../hooks/useAuth', () => ({
-  useAuth: vi.fn(),
-}))
-
 vi.mock('../api/analytics', () => ({
   getCostBreakdown: vi.fn(),
   getTaskOutcomes: vi.fn(),
   getEfficiency: vi.fn(),
 }))
 
-import { useAuth } from '../hooks/useAuth'
 import { getCostBreakdown, getTaskOutcomes, getEfficiency } from '../api/analytics'
 import type { CostBreakdown, TaskOutcomes, Efficiency } from '../api/analytics'
 import Analytics from './Analytics'
 
-const mockUseAuth = vi.mocked(useAuth)
-
 const mockGetCostBreakdown = vi.mocked(getCostBreakdown)
 const mockGetTaskOutcomes = vi.mocked(getTaskOutcomes)
 const mockGetEfficiency = vi.mocked(getEfficiency)
@@ -71,14 +64,6 @@ function setupMocks() {
 
 beforeEach(() => {
   vi.resetAllMocks()
-  mockUseAuth.mockReturnValue({
-    user: { id: 'u1', email: 'admin@test.com', display_name: 'Admin', role: 'admin' },
-    loading: false,
-    login: vi.fn(),
-    loginWithOIDC: vi.fn(),
-    setUserFromOIDC: vi.fn(),
-    logout: vi.fn(),
-  })
 })
 
 describe('Analytics', () => {
@@ -201,18 +186,6 @@ describe('Analytics', () => {
     expect(screen.getByText('Project Alpha')).toBeInTheDocument()
   })
 
-  it('shows access denied for non-admin users', () => {
-    mockUseAuth.mockReturnValue({
-      user: { id: 'u2', email: 'user@test.com', display_name: 'User', role: 'user' },
-      loading: false,
-      login: vi.fn(),
-      loginWithOIDC: vi.fn(),
-      setUserFromOIDC: vi.fn(),
-      logout: vi.fn(),
-    })
-
-    render(<Analytics />)
-    expect(screen.getByText(/Access denied/)).toBeInTheDocument()
-    expect(mockGetCostBreakdown).not.toHaveBeenCalled()
-  })
+  // Note: admin role enforcement moved to RequireRole route guard (App.tsx).
+  // Analytics component itself always fetches data — access control is at the router level.
 })
diff --git a/frontend/src/pages/Analytics.tsx b/frontend/src/pages/Analytics.tsx
index 5430b29..a52977e 100644
--- a/frontend/src/pages/Analytics.tsx
+++ b/frontend/src/pages/Analytics.tsx
@@ -6,14 +6,15 @@
 // Used by:    App.tsx
 
 import { useEffect, useState } from 'react'
-import { useAuth } from '../hooks/useAuth'
 import {
   getCostBreakdown, getTaskOutcomes, getEfficiency,
   type CostBreakdown, type TaskOutcomes, type Efficiency,
 } from '../api/analytics'
 
 const pctBar = (value: number, className = 'ok') => (
-  <div className="progress-bar" style={{ width: '100px', display: 'inline-block', verticalAlign: 'middle' }}>
+  <div className="progress-bar" role="progressbar"
+    aria-valuenow={Math.round(value * 100)} aria-valuemin={0} aria-valuemax={100}
+    style={{ width: '100px', display: 'inline-block', verticalAlign: 'middle' }}>
     <div className={`progress-fill ${className}`} style={{ width: `${Math.min(value * 100, 100)}%` }} />
   </div>
 )
@@ -21,7 +22,6 @@ const pctBar = (value: number, className = 'ok') => (
 const pctClass = (rate: number) => rate >= 0.8 ? 'ok' : rate >= 0.5 ? 'warn' : 'danger'
 
 export default function Analytics() {
-  const { user } = useAuth()
   const [cost, setCost] = useState<CostBreakdown | null>(null)
   const [outcomes, setOutcomes] = useState<TaskOutcomes | null>(null)
   const [efficiency, setEfficiency] = useState<Efficiency | null>(null)
@@ -29,7 +29,6 @@ export default function Analytics() {
   const [loading, setLoading] = useState(true)
 
   useEffect(() => {
-    if (user?.role !== 'admin') { setLoading(false); return }
     const errors: string[] = []
     Promise.allSettled([
       getCostBreakdown().then(setCost),
@@ -42,9 +41,8 @@ export default function Analytics() {
       if (errors.length) setError(errors.join('; '))
       setLoading(false)
     })
-  }, [user])
+  }, [])
 
-  if (user?.role !== 'admin') return <p className="text-dim">Access denied. Admin role required.</p>
   if (loading) return <p className="text-dim">Loading analytics...</p>
 
   return (
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index 9ae691d..567851e 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -42,9 +42,10 @@ export default function Login() {
         <h2>Sign In</h2>
         {error && <div className="auth-error">{error}</div>}
         <form onSubmit={handleSubmit}>
-          <label>
+          <label htmlFor="login-email">
             Email
             <input
+              id="login-email"
               type="email"
               value={email}
               onChange={e => setEmail(e.target.value)}
@@ -52,9 +53,10 @@ export default function Login() {
               autoFocus
             />
           </label>
-          <label>
+          <label htmlFor="login-password">
             Password
             <input
+              id="login-password"
               type="password"
               value={password}
               onChange={e => setPassword(e.target.value)}
diff --git a/frontend/src/pages/OIDCCallback.tsx b/frontend/src/pages/OIDCCallback.tsx
index fbd7716..ee27d59 100644
--- a/frontend/src/pages/OIDCCallback.tsx
+++ b/frontend/src/pages/OIDCCallback.tsx
@@ -6,7 +6,7 @@
 // Depends on: api/auth.ts, hooks/useAuth.tsx
 // Used by:    App.tsx
 
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useRef } from 'react'
 import { useNavigate, useSearchParams, Link } from 'react-router-dom'
 import { completeOIDCLogin } from '../api/auth'
 import { useAuth } from '../hooks/useAuth'
@@ -16,8 +16,12 @@ export default function OIDCCallback() {
   const navigate = useNavigate()
   const { setUserFromOIDC } = useAuth()
   const [error, setError] = useState('')
+  const processedRef = useRef(false)
 
   useEffect(() => {
+    if (processedRef.current) return
+    processedRef.current = true
+
     const code = searchParams.get('code')
     const state = searchParams.get('state')
     const errorParam = searchParams.get('error')
diff --git a/frontend/src/pages/Register.tsx b/frontend/src/pages/Register.tsx
index ef07069..3e9468e 100644
--- a/frontend/src/pages/Register.tsx
+++ b/frontend/src/pages/Register.tsx
@@ -44,27 +44,30 @@ export default function Register() {
         <h2>Create Account</h2>
         {error && <div className="auth-error">{error}</div>}
         <form onSubmit={handleSubmit}>
-          <label>
+          <label htmlFor="register-name">
             Display Name
             <input
+              id="register-name"
               type="text"
               value={displayName}
               onChange={e => setDisplayName(e.target.value)}
               placeholder="Optional"
             />
           </label>
-          <label>
+          <label htmlFor="register-email">
             Email
             <input
+              id="register-email"
               type="email"
               value={email}
               onChange={e => setEmail(e.target.value)}
               required
             />
           </label>
-          <label>
+          <label htmlFor="register-password">
             Password
             <input
+              id="register-password"
               type="password"
               value={password}
               onChange={e => setPassword(e.target.value)}
diff --git a/frontend/src/pages/Usage.tsx b/frontend/src/pages/Usage.tsx
index b0a61c3..cd1d149 100644
--- a/frontend/src/pages/Usage.tsx
+++ b/frontend/src/pages/Usage.tsx
@@ -36,7 +36,9 @@ export default function Usage() {
               <span className="cost" style={{ fontSize: '1.5rem' }}>${budget.daily_spent_usd.toFixed(2)}</span>
               <span className="text-dim">/ ${budget.daily_limit_usd.toFixed(2)} ({budget.daily_pct.toFixed(0)}%)</span>
             </div>
-            <div className="progress-bar">
+            <div className="progress-bar" role="progressbar"
+              aria-valuenow={Math.round(budget.daily_pct)} aria-valuemin={0} aria-valuemax={100}
+              aria-label="Daily budget usage">
               <div className={`progress-fill ${pctClass(budget.daily_pct)}`}
                 style={{ width: `${Math.min(budget.daily_pct, 100)}%` }} />
             </div>
@@ -47,7 +49,9 @@ export default function Usage() {
               <span className="cost" style={{ fontSize: '1.5rem' }}>${budget.monthly_spent_usd.toFixed(2)}</span>
               <span className="text-dim">/ ${budget.monthly_limit_usd.toFixed(2)} ({budget.monthly_pct.toFixed(0)}%)</span>
             </div>
-            <div className="progress-bar">
+            <div className="progress-bar" role="progressbar"
+              aria-valuenow={Math.round(budget.monthly_pct)} aria-valuemin={0} aria-valuemax={100}
+              aria-label="Monthly budget usage">
               <div className={`progress-fill ${pctClass(budget.monthly_pct)}`}
                 style={{ width: `${Math.min(budget.monthly_pct, 100)}%` }} />
             </div>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 9013ef6..e9c958b 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -194,7 +194,7 @@ pre { background: var(--bg); padding: 0.75rem; border-radius: var(--radius); ove
   background: var(--surface); color: var(--text); cursor: pointer;
   font-size: 0.875rem; transition: background 0.15s;
 }
-.oauth-btn:hover { background: var(--hover); }
+.oauth-btn:hover { background: var(--border); }
 .oauth-btn:disabled { opacity: 0.5; cursor: not-allowed; }
 
 /* Sidebar user section */
@@ -322,3 +322,30 @@ pre { background: var(--bg); padding: 0.75rem; border-radius: var(--radius); ove
 [data-theme="light"] pre { background: #f0f1f5; }
 [data-theme="light"] .verification-card { background: #fafafa; }
 [data-theme="light"] tr:hover { background: rgba(0,0,0,0.02); }
+
+/* Responsive — tablet */
+@media (max-width: 1023px) {
+  .grid-4 { grid-template-columns: 1fr 1fr; }
+  .grid-3 { grid-template-columns: 1fr 1fr; }
+}
+
+/* Responsive — mobile */
+@media (max-width: 767px) {
+  .layout { flex-direction: column; }
+  .sidebar {
+    width: 100%; flex-direction: row; flex-wrap: wrap;
+    border-right: none; border-bottom: 1px solid var(--border);
+    padding: 0.75rem; gap: 0.25rem; align-items: center;
+  }
+  .sidebar h1 { margin-bottom: 0; margin-right: auto; }
+  .sidebar a { padding: 0.375rem 0.5rem; font-size: 0.8rem; }
+  .sidebar-user {
+    flex-direction: row; align-items: center; margin-top: 0;
+    padding-top: 0; border-top: none; width: 100%;
+  }
+  .main { padding: 1rem; }
+  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
+  .modal-content { width: 95%; max-width: none; }
+  table { font-size: 0.75rem; }
+  th, td { padding: 0.375rem; }
+}