diff --git a/dashboard/src/__tests__/touch-targets.test.ts b/dashboard/src/__tests__/touch-targets.test.ts
index feccead9b..3e04db473 100644
--- a/dashboard/src/__tests__/touch-targets.test.ts
+++ b/dashboard/src/__tests__/touch-targets.test.ts
@@ -21,7 +21,7 @@ describe('Mobile touch targets (issue #2350)', () => {
     const lines = src.split('\n');
     let found = false;
     for (let i = 0; i < lines.length; i++) {
-      if (lines[i].includes('aria-label="New Session')) {
+      if (lines[i].includes("aria.newSession") || lines[i].includes('aria-label="New Session')) {
         // Search within 5 lines in both directions for className with min-h
         for (let j = Math.max(0, i - 5); j <= Math.min(lines.length - 1, i + 5); j++) {
           if (lines[j].includes('className="') && lines[j].includes('min-h-[44px]')) {
diff --git a/dashboard/src/components/CreatePipelineModal.tsx b/dashboard/src/components/CreatePipelineModal.tsx
index 6307d8565..c596a5763 100644
--- a/dashboard/src/components/CreatePipelineModal.tsx
+++ b/dashboard/src/components/CreatePipelineModal.tsx
@@ -2,7 +2,8 @@
  * components/CreatePipelineModal.tsx — Modal dialog for creating new pipelines.
  */
 
-import { useState, useEffect, useRef, useCallback } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react'
+import { useT } from '../i18n/context';
 import { useFocusTrap } from '../hooks/useFocusTrap';
 import { useNavigate } from 'react-router-dom';
 import { X, Loader2, Plus, Trash2 } from 'lucide-react';
@@ -26,6 +27,7 @@ function makeStep(): StepRow {
 }
 
 export default function CreatePipelineModal({ open, onClose }: CreatePipelineModalProps) {
+  const t = useT();
   const navigate = useNavigate();
   const nameRef = useRef<HTMLInputElement>(null);
   const trapRef = useFocusTrap(open);
@@ -118,11 +120,11 @@ export default function CreatePipelineModal({ open, onClose }: CreatePipelineMod
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={handleClose} />
 
-      <div ref={trapRef} role="dialog" aria-modal="true" aria-label="Create new pipeline" className="relative w-full max-w-2xl mx-4 bg-[var(--color-surface)] border border-[var(--color-void-lighter)] rounded-lg shadow-2xl max-h-[90vh] overflow-y-auto">
+      <div ref={trapRef} role="dialog" aria-modal="true" aria-label={t('aria.createNewPipeline')} className="relative w-full max-w-2xl mx-4 bg-[var(--color-surface)] border border-[var(--color-void-lighter)] rounded-lg shadow-2xl max-h-[90vh] overflow-y-auto">
         {/* Header */}
         <div className="flex items-center justify-between px-4 sm:px-5 py-4 border-b border-[var(--color-void-lighter)]">
           <h2 className="text-sm font-semibold text-[var(--color-text-primary)]">New Pipeline</h2>
-          <button aria-label="Close"
+          <button aria-label={t('aria.close')}
             onClick={handleClose}
             className="min-h-[44px] min-w-[44px] flex items-center justify-center text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors"
           >
@@ -142,7 +144,7 @@ export default function CreatePipelineModal({ open, onClose }: CreatePipelineMod
               value={pipelineName}
               onChange={(e) => setPipelineName(e.target.value)}
               placeholder="my-pipeline"
-              aria-label="Pipeline Name"
+              aria-label={t('aria.pipelineName')}
               className="w-full min-h-[44px] px-3 py-2.5 text-sm bg-[var(--color-void)] border border-[var(--color-void-lighter)] rounded text-[var(--color-text-primary)] placeholder-[var(--color-text-muted)] focus:outline-none focus:border-[var(--color-accent)]"
             />
           </div>
diff --git a/dashboard/src/components/CreateSessionModal.tsx b/dashboard/src/components/CreateSessionModal.tsx
index a0946d86f..54cba4d61 100644
--- a/dashboard/src/components/CreateSessionModal.tsx
+++ b/dashboard/src/components/CreateSessionModal.tsx
@@ -2,7 +2,8 @@
  * components/CreateSessionModal.tsx — Modal dialog for creating new sessions.
  */
 
-import { useState, useEffect, useRef, useCallback } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react'
+import { useT } from '../i18n/context';
 import { useFocusTrap } from '../hooks/useFocusTrap';
 import { useNavigate } from 'react-router-dom';
 import { X, Loader2, Plus, Trash2 } from 'lucide-react';
@@ -21,6 +22,7 @@ function makeRow(): BatchRow {
 }
 
 export default function CreateSessionModal({ open, onClose }: CreateSessionModalProps) {
+  const t = useT();
   const navigate = useNavigate();
   const workDirRef = useRef<HTMLInputElement>(null);
   const abortRef = useRef<AbortController | null>(null);
@@ -192,7 +194,7 @@ export default function CreateSessionModal({ open, onClose }: CreateSessionModal
       />
 
       {/* Modal */}
-      <div ref={trapRef} role="dialog" aria-modal="true" aria-label="Create new session" className={`relative w-full ${mode === 'batch' ? 'max-w-2xl' : 'max-w-md'} mx-4 bg-[var(--color-surface)] border border-[var(--color-void-lighter)] rounded-lg shadow-2xl max-h-[90vh] overflow-y-auto`}>
+      <div ref={trapRef} role="dialog" aria-modal="true" aria-label={t('aria.createNewSession')} className={`relative w-full ${mode === 'batch' ? 'max-w-2xl' : 'max-w-md'} mx-4 bg-[var(--color-surface)] border border-[var(--color-void-lighter)] rounded-lg shadow-2xl max-h-[90vh] overflow-y-auto`}>
         {/* Header */}
         <div className="flex items-center justify-between px-4 sm:px-5 py-4 border-b border-[var(--color-void-lighter)]">
           <div className="flex items-center gap-4">
@@ -235,7 +237,7 @@ export default function CreateSessionModal({ open, onClose }: CreateSessionModal
               )}
             </div>
           </div>
-          <button aria-label="Close"
+          <button aria-label={t('aria.close')}
             onClick={handleClose}
             className="min-h-[44px] min-w-[44px] flex items-center justify-center text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors"
           >
@@ -388,7 +390,7 @@ export default function CreateSessionModal({ open, onClose }: CreateSessionModal
                 <button
                   type="button"
                   onClick={() => removeBatchRow(i)}
-                  aria-label="Remove row"
+                  aria-label={t('aria.removeRow')}
                   disabled={batchRows.length <= 1}
                   className="min-h-[44px] min-w-[44px] flex items-center justify-center text-[var(--color-text-muted)] hover:text-[var(--color-error)] transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
                 >
diff --git a/dashboard/src/components/KeyboardShortcutsHelp/index.tsx b/dashboard/src/components/KeyboardShortcutsHelp/index.tsx
index e56023abe..e540acba5 100644
--- a/dashboard/src/components/KeyboardShortcutsHelp/index.tsx
+++ b/dashboard/src/components/KeyboardShortcutsHelp/index.tsx
@@ -1,4 +1,5 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react'
+import { useT } from '../../i18n/context';
 import { X, Keyboard } from 'lucide-react';
 import { SHORTCUTS } from '../../hooks/useKeyboardShortcuts';
 
@@ -9,13 +10,14 @@ export function KeyboardShortcutsHelp({
   open: boolean;
   onClose: () => void;
 }) {
+  const translate = useT();
   const [visible, setVisible] = useState(false);
 
   useEffect(() => {
     if (open) setVisible(true);
     else {
-      const t = setTimeout(() => setVisible(false), 200);
-      return () => clearTimeout(t);
+      const timer = setTimeout(() => setVisible(false), 200);
+      return () => clearTimeout(timer);
     }
   }, [open]);
 
@@ -29,7 +31,7 @@ export function KeyboardShortcutsHelp({
       onClick={onClose}
       role="dialog"
       aria-modal="true"
-      aria-label="Keyboard shortcuts"
+      aria-label={translate('aria.keyboardShortcuts')}
     >
       <div
         className="w-full max-w-md rounded-xl border border-[var(--color-void-lighter)]/60 bg-[var(--color-surface)] p-6 shadow-2xl"
@@ -43,7 +45,7 @@ export function KeyboardShortcutsHelp({
           <button
             onClick={onClose}
             className="rounded p-1 text-[var(--color-text-muted)] hover:bg-[var(--color-void-lighter)]/50 hover:text-[var(--color-text-primary)] transition-colors"
-            aria-label="Close"
+            aria-label={translate('aria.close')}
           >
             <X className="h-4 w-4" />
           </button>
diff --git a/dashboard/src/components/Layout.tsx b/dashboard/src/components/Layout.tsx
index 6d9fda73b..d3174761a 100644
--- a/dashboard/src/components/Layout.tsx
+++ b/dashboard/src/components/Layout.tsx
@@ -4,7 +4,8 @@ import { logger } from '../utils/logger';
  */
 
 import { NavLink, Outlet } from 'react-router-dom';
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react'
+import { useT } from '../i18n/context';
 import Breadcrumb from './shared/Breadcrumb';
 import { ErrorBoundary } from './shared/ErrorBoundary';
 import { useTheme } from '../hooks/useTheme';
@@ -105,6 +106,7 @@ function isMobileSidebarViewport(): boolean {
 }
 
 export default function Layout() {
+  const t = useT();
   const sseConnected = useStore((s) => s.sseConnected);
   const setSseConnected = useStore((s) => s.setSseConnected);
   const sseError = useStore((s) => s.sseError);
@@ -406,7 +408,7 @@ export default function Layout() {
 
       {/* ── Sidebar ─────────────────────────────────────────── */}
       <aside
-        aria-label="Primary sidebar"
+        aria-label={t('aria.primarySidebar')}
         className={`
           fixed inset-y-0 left-0 z-40 flex flex-col border-r border-white/5 bg-transparent backdrop-blur-xl
           transition-all duration-300 ease-in-out
@@ -428,7 +430,7 @@ export default function Layout() {
               tabIndex={hiddenMobileSidebarControlTabIndex}
               disabled={isMobileSidebarHidden}
               className="md:hidden inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-lg text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900 dark:text-[var(--color-text-muted)] dark:hover:bg-void-lighter dark:hover:text-[var(--color-text-primary)]"
-              aria-label="Close menu"
+              aria-label={t('aria.closeMenu')}
               aria-hidden={isMobileSidebarHidden ? 'true' : undefined}
             >
               <X className="h-5 w-5" />
@@ -436,7 +438,7 @@ export default function Layout() {
         </div>
 
         {/* Nav links */}
-        <nav className="flex flex-col gap-4 px-3 py-6 flex-1 overflow-y-auto overflow-x-hidden" aria-label="Main navigation">
+        <nav className="flex flex-col gap-4 px-3 py-6 flex-1 overflow-y-auto overflow-x-hidden" aria-label={t('aria.mainNavigation')}>
           {NAV_GROUPS.map((group) => (
             <div key={group.label} className="flex flex-col gap-1">
               {!isCollapsed && (
@@ -471,7 +473,7 @@ export default function Layout() {
         {/* Bottom section: Settings + toggle + logout */}
         <div className="border-t border-white/5 px-3 py-4 flex flex-col gap-2">
           {identityLabel && identityDetailLabel && !isCollapsed && (
-            <div className="px-3 py-2" aria-label="Signed in user">
+            <div className="px-3 py-2" aria-label={t('aria.signedInUser')}>
               <p className="truncate text-xs font-medium text-slate-700 dark:text-[var(--color-text-primary)]">{identityLabel}</p>
               <p className="truncate text-[11px] text-slate-500 dark:text-[var(--color-text-muted)]">
                 {identityDetailLabel}
@@ -519,7 +521,7 @@ export default function Layout() {
             onClick={handleLogout}
             tabIndex={hiddenMobileSidebarControlTabIndex}
             className={`flex items-center gap-2.5 rounded-lg px-3 py-3 min-h-[44px] text-sm font-medium text-slate-600 hover:bg-slate-100 hover:text-slate-900 dark:text-[var(--color-text-muted)] dark:hover:bg-void-lighter dark:hover:text-[var(--color-text-primary)] transition-colors w-full ${isCollapsed ? 'justify-center' : ''}`}
-            aria-label="Sign out"
+            aria-label={t('aria.signOut')}
           >
             <LogOut className="h-4 w-4 shrink-0" />
             {!isCollapsed && <span className="truncate">Sign out</span>}
@@ -540,7 +542,7 @@ export default function Layout() {
                 tabIndex={isMobileDrawerOpen ? -1 : undefined}
                 aria-hidden={isMobileDrawerOpen ? 'true' : undefined}
                 className="md:hidden inline-flex h-11 w-11 items-center justify-center rounded-lg text-slate-600 hover:bg-slate-100 hover:text-slate-900 dark:text-[var(--color-text-muted)] dark:hover:bg-void-lighter dark:hover:text-[var(--color-text-primary)] transition-colors"
-                aria-label="Open menu"
+                aria-label={t('aria.openMenu')}
               >
                 <Menu className="h-5 w-5" />
               </button>
@@ -559,7 +561,7 @@ export default function Layout() {
               <button
                 type="button"
                 onClick={openNewSession}
-                aria-label="New Session (⌘N)"
+                aria-label={t('aria.newSessionCmd')}
                 title="New Session (⌘N)"
                 className="inline-flex h-11 w-11 items-center justify-center rounded-lg p-2.5 min-h-[44px] min-w-[44px] text-slate-600 hover:bg-slate-100 hover:text-slate-900 dark:text-[var(--color-text-muted)] dark:hover:bg-void-lighter dark:hover:text-[var(--color-text-primary)] transition-colors"
               >
diff --git a/dashboard/src/components/NewSessionDrawer.tsx b/dashboard/src/components/NewSessionDrawer.tsx
index b5900e193..f29328bbe 100644
--- a/dashboard/src/components/NewSessionDrawer.tsx
+++ b/dashboard/src/components/NewSessionDrawer.tsx
@@ -4,7 +4,8 @@
  * Width: 480px desktop, full-width mobile.
  */
 
-import { useState, useCallback, useEffect, useRef } from 'react';
+import { useState, useCallback, useEffect, useRef } from 'react'
+import { useT } from '../i18n/context';
 import { useFocusTrap } from '../hooks/useFocusTrap';
 import { useNavigate } from 'react-router-dom';
 import { Loader2, Plus, X } from 'lucide-react';
@@ -22,6 +23,7 @@ const PERMISSION_MODES = [
 ];
 
 export function NewSessionDrawer() {
+  const t = useT();
   const navigate = useNavigate();
   const addToast = useToastStore((t) => t.addToast);
   const { newSessionOpen, closeNewSession } = useDrawerStore();
@@ -126,7 +128,7 @@ export function NewSessionDrawer() {
             key="drawer-panel"
             role="dialog"
             aria-modal="true"
-            aria-label="New Session"
+            aria-label={t('aria.newSession')}
             ref={trapRef as React.Ref<HTMLDivElement>}
             initial={{ x: '100%' }}
             animate={{ x: 0 }}
@@ -143,7 +145,7 @@ export function NewSessionDrawer() {
               <button
                 type="button"
                 onClick={closeNewSession}
-                aria-label="Close drawer"
+                aria-label={t('aria.closeDrawer')}
                 className="rounded-lg p-2 text-[var(--color-text-muted)] hover:bg-white/5 hover:text-[var(--color-text-primary)] transition-colors"
               >
                 <X className="h-4 w-4" />
diff --git a/dashboard/src/components/SaveTemplateModal.tsx b/dashboard/src/components/SaveTemplateModal.tsx
index 8e68f4b6c..17f4653e5 100644
--- a/dashboard/src/components/SaveTemplateModal.tsx
+++ b/dashboard/src/components/SaveTemplateModal.tsx
@@ -2,7 +2,8 @@
  * components/SaveTemplateModal.tsx — Modal dialog for saving a session as a template.
  */
 
-import { useState, useEffect, useRef, useCallback } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react'
+import { useT } from '../i18n/context';
 import { useFocusTrap } from '../hooks/useFocusTrap';
 import { X, Loader2 } from 'lucide-react';
 import { createTemplate } from '../api/client';
@@ -15,6 +16,7 @@ interface SaveTemplateModalProps {
 }
 
 export default function SaveTemplateModal({ open, onClose, sessionId }: SaveTemplateModalProps) {
+  const t = useT();
   const abortRef = useRef<AbortController | null>(null);
   const trapRef = useFocusTrap(open);
 
@@ -95,13 +97,13 @@ export default function SaveTemplateModal({ open, onClose, sessionId }: SaveTemp
         ref={trapRef}
         role="dialog"
         aria-modal="true"
-        aria-label="Save session as template"
+        aria-label={t('aria.saveAsTemplate')}
         className="relative w-full max-w-md mx-4 bg-[var(--color-surface)] border border-[var(--color-void-lighter)] rounded-lg shadow-2xl max-h-[90vh] overflow-y-auto"
       >
         {/* Header */}
         <div className="flex items-center justify-between px-4 sm:px-5 py-4 border-b border-[var(--color-void-lighter)]">
           <h2 className="text-sm font-semibold text-[var(--color-text-primary)]">Save as Template</h2>
-          <button aria-label="Close"
+          <button aria-label={t('aria.close')}
             onClick={handleClose}
             className="min-h-[44px] min-w-[44px] flex items-center justify-center text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors"
           >
diff --git a/dashboard/src/components/TemplateModal.tsx b/dashboard/src/components/TemplateModal.tsx
index 8734d8483..530a447b2 100644
--- a/dashboard/src/components/TemplateModal.tsx
+++ b/dashboard/src/components/TemplateModal.tsx
@@ -2,7 +2,8 @@
  * components/TemplateModal.tsx — Modal dialog for creating and editing session templates.
  */
 
-import { useState, useEffect, useRef, useCallback } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react'
+import { useT } from '../i18n/context';
 import { useFocusTrap } from '../hooks/useFocusTrap';
 import { X, Loader2 } from 'lucide-react';
 import { createTemplate, updateTemplate } from '../api/client';
@@ -28,6 +29,7 @@ interface TemplateModalProps {
 }
 
 export default function TemplateModal({ open, onClose, template, onSaved }: TemplateModalProps) {
+  const t = useT();
   const abortRef = useRef<AbortController | null>(null);
   const nameInputRef = useRef<HTMLInputElement>(null);
   const trapRef = useFocusTrap(open);
@@ -164,7 +166,7 @@ export default function TemplateModal({ open, onClose, template, onSaved }: Temp
           <h2 className="text-sm font-semibold text-[var(--color-text-primary)]">
             {isEditing ? 'Edit Template' : 'Create Template'}
           </h2>
-          <button aria-label="Close"
+          <button aria-label={t('aria.close')}
             onClick={handleClose}
             className="min-h-[44px] min-w-[44px] flex items-center justify-center text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors"
           >
diff --git a/dashboard/src/components/ToastContainer.tsx b/dashboard/src/components/ToastContainer.tsx
index 0be8a8ee3..384e408c2 100644
--- a/dashboard/src/components/ToastContainer.tsx
+++ b/dashboard/src/components/ToastContainer.tsx
@@ -7,7 +7,8 @@
  * - Colors via CSS vars: success=emerald, warning=amber, error=red, info=slate
  */
 
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useT } from '../i18n/context';
 import { X, CheckCircle, AlertTriangle, Info, AlertCircle, Trash2, Undo } from 'lucide-react';
 import { useToastStore } from '../store/useToastStore';
 import type { ToastType } from '../store/useToastStore';
@@ -43,6 +44,7 @@ function ToastItem({
   description?: string;
   undoAction?: () => void;
 }) {
+  const t = useT();
   const removeToast = useToastStore((s) => s.removeToast);
   const [progress, setProgress] = useState(100);
   const Icon = TYPE_ICONS[type];
@@ -131,7 +133,7 @@ function ToastItem({
         <button
           onClick={handleUndo}
           className="shrink-0 flex items-center gap-1 rounded px-2 py-1 text-xs font-medium opacity-80 hover:opacity-100 transition-opacity bg-current/10"
-          aria-label="Undo"
+          aria-label={t('aria.undo')}
         >
           <Undo className="h-3 w-3" />
           Undo
@@ -140,7 +142,7 @@ function ToastItem({
       <button
         onClick={() => removeToast(id)}
         className="shrink-0 rounded p-0.5 opacity-60 hover:opacity-100 transition-opacity"
-        aria-label="Dismiss"
+        aria-label={t('aria.dismiss')}
       >
         <X className="h-3.5 w-3.5" />
       </button>
@@ -150,6 +152,7 @@ function ToastItem({
 
 export default function ToastContainer() {
   const toasts = useToastStore((s) => s.toasts);
+  const t = useT();
   const removeToast = useToastStore((s) => s.removeToast);
 
   if (toasts.length === 0) return null;
@@ -157,7 +160,7 @@ export default function ToastContainer() {
   return (
     <div
       aria-live="polite"
-      aria-label="Notifications"
+      aria-label={t('aria.notifications')}
       className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 max-w-sm w-full pointer-events-none"
     >
       {toasts.length > 1 && (
@@ -165,7 +168,7 @@ export default function ToastContainer() {
           <button
             onClick={() => toasts.forEach((t) => removeToast(t.id))}
             className="flex items-center gap-1 rounded px-2 py-1 text-xs text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors"
-            aria-label="Dismiss all notifications"
+            aria-label={t('aria.dismissAll')}
           >
             <Trash2 className="h-3 w-3" />
             Clear all
diff --git a/dashboard/src/components/mobile/MobilePermissionPrompt.tsx b/dashboard/src/components/mobile/MobilePermissionPrompt.tsx
index 614a4315c..045994396 100644
--- a/dashboard/src/components/mobile/MobilePermissionPrompt.tsx
+++ b/dashboard/src/components/mobile/MobilePermissionPrompt.tsx
@@ -3,7 +3,8 @@
  * Mobile-optimized permission prompt with swipe gestures, haptics, and long-press.
  */
 
-import { useState, useEffect, useMemo, useRef } from 'react';
+import { useState, useEffect, useMemo, useRef } from 'react'
+import { useT } from '../../i18n/context';
 import { motion, AnimatePresence } from 'framer-motion';
 import type { PendingPermissionInfo } from '../../types';
 import { useSwipeGesture } from '../../hooks/useSwipeGesture';
@@ -43,6 +44,7 @@ export function MobilePermissionPrompt({
   onViewDetails,
   onJumpToTranscript,
 }: MobilePermissionPromptProps) {
+  const t = useT();
   const [showContextMenu, setShowContextMenu] = useState(false);
   const [rippleOrigin, setRippleOrigin] = useState<{ x: number; y: number } | null>(null);
   const longPressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -112,7 +114,7 @@ export function MobilePermissionPrompt({
       ref={containerRef}
       role="dialog"
       aria-modal="true"
-      aria-label="Permission prompt"
+      aria-label={t('aria.permissionPrompt')}
       className="relative overflow-hidden rounded-t-2xl border border-[var(--color-warning)]/35 bg-[var(--color-surface)] p-4 shadow-2xl"
       onTouchStart={handleTouchStart}
       onTouchEnd={handleTouchEnd}
diff --git a/dashboard/src/components/shared/Breadcrumb.tsx b/dashboard/src/components/shared/Breadcrumb.tsx
index 2f3fca89f..9a951ac52 100644
--- a/dashboard/src/components/shared/Breadcrumb.tsx
+++ b/dashboard/src/components/shared/Breadcrumb.tsx
@@ -3,6 +3,7 @@
  */
 
 import { Link, useLocation } from 'react-router-dom';
+import { useT } from '../../i18n/context';
 import { ChevronRight, Home } from 'lucide-react';
 
 interface Crumb {
@@ -49,6 +50,7 @@ function buildCrumbs(pathname: string): Crumb[] {
 }
 
 export default function Breadcrumb() {
+  const t = useT();
   const location = useLocation();
 
   if (location.pathname === '/' || location.pathname === '') return null;
@@ -56,7 +58,7 @@ export default function Breadcrumb() {
   const crumbs = buildCrumbs(location.pathname);
 
   return (
-    <nav aria-label="Breadcrumb" className="flex min-w-0 items-center gap-1 overflow-hidden text-sm text-[var(--color-text-muted)]">
+    <nav aria-label={t('aria.breadcrumb')} className="flex min-w-0 items-center gap-1 overflow-hidden text-sm text-[var(--color-text-muted)]">
       {crumbs.map((crumb, i) => (
         <span key={i} className="flex min-w-0 items-center gap-1">
           {i > 0 && <ChevronRight className="h-3 w-3 text-[var(--color-text-muted)]" />}
diff --git a/dashboard/src/components/shared/BudgetAlertBanner.tsx b/dashboard/src/components/shared/BudgetAlertBanner.tsx
index 3e84a02cb..a6a8cccdb 100644
--- a/dashboard/src/components/shared/BudgetAlertBanner.tsx
+++ b/dashboard/src/components/shared/BudgetAlertBanner.tsx
@@ -7,7 +7,8 @@
  * Part of issue #3125: Budget Alerts & Cost Forecasts.
  */
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback } from 'react'
+import { useT } from '../../i18n/context';
 import { AlertTriangle, X } from 'lucide-react';
 import { formatCurrency } from '../../utils/formatNumber';
 import { getBudgetSettings } from '../../utils/budgetSettings';
@@ -21,6 +22,7 @@ interface AlertState {
 const DISMISS_KEY = 'aegis:budget-alert-dismissed';
 
 export function BudgetAlertBanner() {
+  const t = useT();
   const [alert, setAlert] = useState<AlertState | null>(null);
   const [dismissedAt, setDismissedAt] = useState<number | null>(null);
 
@@ -120,7 +122,7 @@ export function BudgetAlertBanner() {
             setAlert(null);
           }}
           className="flex-shrink-0 rounded p-1 hover:opacity-70 transition-opacity"
-          aria-label="Dismiss budget alert"
+          aria-label={t('aria.dismissBudgetAlert')}
         >
           <X className="h-4 w-4" />
         </button>
diff --git a/dashboard/src/components/shared/CodeBlock.tsx b/dashboard/src/components/shared/CodeBlock.tsx
index 0447554e1..2d72ca143 100644
--- a/dashboard/src/components/shared/CodeBlock.tsx
+++ b/dashboard/src/components/shared/CodeBlock.tsx
@@ -2,7 +2,8 @@
  * components/shared/CodeBlock.tsx — Syntax-highlighted code block renderer.
  */
 
-import { useState } from 'react';
+import { useState } from 'react'
+import { useT } from '../../i18n/context';
 import { Copy, Check } from 'lucide-react';
 
 // Lightweight syntax highlighting via regex — zero dependencies
@@ -49,6 +50,7 @@ interface CodeBlockProps {
 }
 
 export function CodeBlock({ code, language }: CodeBlockProps) {
+  const t = useT();
   const [copied, setCopied] = useState(false);
 
   const handleCopy = () => {
@@ -65,7 +67,7 @@ export function CodeBlock({ code, language }: CodeBlockProps) {
         <button
           onClick={handleCopy}
           className="text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors"
-          aria-label="Copy code"
+          aria-label={t('aria.copyCode')}
         >
           {copied ? <Check className="h-3.5 w-3.5 text-[var(--color-success)]" /> : <Copy className="h-3.5 w-3.5" />}
         </button>
diff --git a/dashboard/src/components/shared/CommandPalette.tsx b/dashboard/src/components/shared/CommandPalette.tsx
index 38b027aa6..f218ff0a1 100644
--- a/dashboard/src/components/shared/CommandPalette.tsx
+++ b/dashboard/src/components/shared/CommandPalette.tsx
@@ -5,7 +5,8 @@
  * gradient backdrop, glow border on active.
  */
 
-import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import { useState, useEffect, useRef, useMemo, useCallback } from 'react'
+import { useT } from '../../i18n/context';
 import { useFocusTrap } from '../../hooks/useFocusTrap';
 import { motion, AnimatePresence } from 'framer-motion';
 import {
@@ -82,6 +83,7 @@ interface CommandPaletteProps {
 }
 
 export default function CommandPalette({ open, onClose }: CommandPaletteProps) {
+  const t = useT();
   const [query, setQuery] = useState('');
   const [activeIndex, setActiveIndex] = useState(0);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -200,7 +202,7 @@ export default function CommandPalette({ open, onClose }: CommandPaletteProps) {
             transition={{ duration: 0.2, ease: [0.2, 0.8, 0.2, 1] }}
             role="dialog"
             aria-modal="true"
-            aria-label="Command palette"
+            aria-label={t('aria.commandPalette')}
             ref={trapRef as React.Ref<HTMLDivElement>}
             className="fixed left-1/2 top-[20vh] z-[201] w-full max-w-xl -translate-x-1/2"
           >
diff --git a/dashboard/src/components/shared/HoldButton.tsx b/dashboard/src/components/shared/HoldButton.tsx
index f764c374f..d67dfa32e 100644
--- a/dashboard/src/components/shared/HoldButton.tsx
+++ b/dashboard/src/components/shared/HoldButton.tsx
@@ -6,13 +6,13 @@
  * cancels. A radial progress ring shows hold progress.
  *
  * Usage:
- *   <HoldButton onConfirm={handleKill} aria-label="Hold to kill session">
+ *   <HoldButton onConfirm={handleKill} aria-label={t('aria.holdToKill')}>
  *     Kill
  *   </HoldButton>
  */
 
 import { useRef, useState, useCallback, useEffect } from 'react';
-import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import type { ButtonHTMLAttributes, ReactNode } from 'react'
 
 export interface HoldButtonProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onMouseDown' | 'onMouseUp' | 'onTouchStart' | 'onTouchEnd'> {
diff --git a/dashboard/src/components/shared/KeyboardShortcutsBar.tsx b/dashboard/src/components/shared/KeyboardShortcutsBar.tsx
index 3c46bac17..6cbe5056e 100644
--- a/dashboard/src/components/shared/KeyboardShortcutsBar.tsx
+++ b/dashboard/src/components/shared/KeyboardShortcutsBar.tsx
@@ -5,6 +5,7 @@
  * Only visible on desktop (hidden on mobile).
  * Uses CSS vars for all colors (light + dark mode).
  */
+import { useT } from '../../i18n/context';
 
 export interface ShortcutDef {
   keys: string[];
@@ -27,11 +28,12 @@ export function KeyboardShortcutsBar({
   shortcuts = DEFAULT_SHORTCUTS,
   className = '',
 }: KeyboardShortcutsBarProps) {
+  const t = useT();
   return (
     <div
       className={`hidden md:flex items-center justify-center gap-6 border-t border-[var(--color-border)] bg-[var(--color-surface)] px-6 py-2 text-[10px] text-[var(--color-text-muted)] ${className}`}
       role="contentinfo"
-      aria-label="Keyboard shortcuts"
+      aria-label={t('aria.keyboardShortcuts')}
     >
       {shortcuts.map((shortcut, i) => (
         <span key={shortcut.label} className="flex items-center gap-1.5">
diff --git a/dashboard/src/components/shared/LanguageSwitcher.tsx b/dashboard/src/components/shared/LanguageSwitcher.tsx
index e5dcd8415..c6168beba 100644
--- a/dashboard/src/components/shared/LanguageSwitcher.tsx
+++ b/dashboard/src/components/shared/LanguageSwitcher.tsx
@@ -3,7 +3,7 @@
  * Uses the I18n context to read/write locale preference.
  */
 
-import { useLocale } from '../../i18n/context';
+import { useLocale, useT } from '../../i18n/context';
 
 const LANGUAGES = [
   { value: 'en-US', label: 'English' },
@@ -11,13 +11,14 @@ const LANGUAGES = [
 ] as const;
 
 export default function LanguageSwitcher() {
+  const t = useT();
   const { locale, setLocale } = useLocale();
 
   return (
     <select
       value={locale === 'en' ? 'en-US' : locale}
       onChange={(e) => setLocale(e.target.value)}
-      aria-label="Language"
+      aria-label={t('aria.language')}
       className="rounded border border-[var(--color-border-strong)] bg-[var(--color-surface)] px-3 py-1.5 text-sm text-[var(--color-text-primary)]"
     >
       {LANGUAGES.map(({ value, label }) => (
diff --git a/dashboard/src/components/shared/LiveAuditStream.tsx b/dashboard/src/components/shared/LiveAuditStream.tsx
index 7013e5d53..2e2169771 100644
--- a/dashboard/src/components/shared/LiveAuditStream.tsx
+++ b/dashboard/src/components/shared/LiveAuditStream.tsx
@@ -3,7 +3,8 @@
  * Sticky 280px side rail showing live audit events on xl+ viewports (issue 2014).
  */
 
-import { useMemo } from 'react';
+import { useMemo } from 'react'
+import { useT } from '../../i18n/context';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Link } from 'react-router-dom';
 import { Activity, AlertTriangle, CheckCircle, Zap, XCircle } from 'lucide-react';
@@ -62,13 +63,14 @@ function EventIcon({ event }: { event: GlobalSSEEventType }) {
 }
 
 export default function LiveAuditStream() {
+  const t = useT();
   const activities = useStore((s) => s.activities);
   const sseConnected = useStore((s) => s.sseConnected);
 
   const events = useMemo(() => activities.slice(0, maxEvents), [activities]);
 
   return (
-    <aside aria-label="Live audit stream" className="hidden xl:flex w-[var(--side-rail-width)] shrink-0 flex-col border-l border-white/5 bg-transparent backdrop-blur-md overflow-hidden">
+    <aside aria-label={t('aria.liveAuditStream')} className="hidden xl:flex w-[var(--side-rail-width)] shrink-0 flex-col border-l border-white/5 bg-transparent backdrop-blur-md overflow-hidden">
       {/* Header */}
       <div className="shrink-0 border-b border-white/5 px-4 py-3 flex items-center gap-2">
         <Activity className="h-4 w-4 text-[var(--color-accent-cyan)]" />
diff --git a/dashboard/src/components/shared/NLFilterBar.tsx b/dashboard/src/components/shared/NLFilterBar.tsx
index 524ba72e0..25776ceba 100644
--- a/dashboard/src/components/shared/NLFilterBar.tsx
+++ b/dashboard/src/components/shared/NLFilterBar.tsx
@@ -1,4 +1,5 @@
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react'
+import { useT } from '../../i18n/context';
 import { Icon } from '../Icon';
 
 export interface FilterToken {
@@ -165,6 +166,7 @@ interface NLFilterBarProps {
 }
 
 export function NLFilterBar({ onFilter, placeholder = 'Filter: "active sessions today", "by admin last week"…', className }: NLFilterBarProps) {
+  const t = useT();
   const [inputValue, setInputValue] = useState('');
   const [chips, setChips] = useState<FilterToken[]>([]);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -228,13 +230,13 @@ export function NLFilterBar({ onFilter, placeholder = 'Filter: "active sessions
         onBlur={() => { if (inputValue.trim()) commitInput(); }}
         placeholder={chips.length === 0 ? placeholder : 'Add filter…'}
         className="min-h-8 min-w-[200px] flex-1 bg-transparent text-sm text-[var(--color-text-primary)] placeholder-[var(--color-text-muted)] focus:outline-none"
-        aria-label="Natural language filter"
+        aria-label={t('aria.naturalLanguageFilter')}
       />
       {(chips.length > 0 || inputValue) && (
         <button
           type="button"
           onClick={clearAll}
-          aria-label="Clear all filters"
+          aria-label={t('aria.clearAllFilters')}
           className="ml-1 inline-flex h-8 w-8 items-center justify-center rounded text-[var(--color-text-muted)] transition-colors hover:text-[var(--color-text-primary)]"
         >
           <Icon name="X" size={16} />
diff --git a/dashboard/src/components/shared/SessionHealthBanner.tsx b/dashboard/src/components/shared/SessionHealthBanner.tsx
index ba7817cfc..1720ad118 100644
--- a/dashboard/src/components/shared/SessionHealthBanner.tsx
+++ b/dashboard/src/components/shared/SessionHealthBanner.tsx
@@ -13,7 +13,8 @@
  * increases by 5+ percentage points.
  */
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react'
+import { useT } from '../../i18n/context';
 import { AlertTriangle, X, AlertCircle } from 'lucide-react';
 import type { AnalyticsErrorRates } from '../../../../src/api-contracts';
 
@@ -35,6 +36,7 @@ function getHealthLevel(errorRates: AnalyticsErrorRates | undefined): HealthLeve
 const STORAGE_KEY = 'aegis-session-health-dismissed-rate';
 
 export function SessionHealthBanner({ errorRates, loading }: SessionHealthBannerProps) {
+  const t = useT();
   const [dismissedRate, setDismissedRate] = useState<number | null>(null);
 
   // Load dismissed rate from sessionStorage
@@ -102,7 +104,7 @@ export function SessionHealthBanner({ errorRates, loading }: SessionHealthBanner
       <button
         onClick={handleDismiss}
         className="shrink-0 p-1 rounded hover:bg-white/10 transition-colors"
-        aria-label="Dismiss health alert"
+        aria-label={t('aria.dismissHealthAlert')}
       >
         <X className="h-4 w-4 text-[var(--color-text-muted)]" />
       </button>
diff --git a/dashboard/src/components/tour/FirstRunTour.tsx b/dashboard/src/components/tour/FirstRunTour.tsx
index ae5171774..f53c3f046 100644
--- a/dashboard/src/components/tour/FirstRunTour.tsx
+++ b/dashboard/src/components/tour/FirstRunTour.tsx
@@ -3,7 +3,8 @@
  * Creates a real session in a sandbox dir, walks through permission prompt, approval, kill.
  */
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react'
+import { useT } from '../../i18n/context';
 import { AnimatePresence, motion } from 'framer-motion';
 import { X, PlayCircle, CheckCircle2, Shield, Trash2, Lightbulb } from 'lucide-react';
 import { createSession, approve, killSession, getSessions } from '../../api/client';
@@ -20,6 +21,7 @@ interface FirstRunTourProps {
 }
 
 export function FirstRunTour({ onComplete }: FirstRunTourProps) {
+  const t = useT();
   const [step, setStep] = useState<TourStep>('welcome');
   const [sessionId, setSessionId] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
@@ -240,7 +242,7 @@ export function FirstRunTour({ onComplete }: FirstRunTourProps) {
               type="button"
               onClick={handleSkip}
               className="absolute top-4 right-4 p-2 rounded-lg text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-void-dark)] transition-colors"
-              aria-label="Skip tour"
+              aria-label={t('aria.skipTour')}
               title="Press Esc to skip"
             >
               <X className="h-5 w-5" />
diff --git a/dashboard/src/i18n/context.tsx b/dashboard/src/i18n/context.tsx
index b2c59e512..bd4281af6 100644
--- a/dashboard/src/i18n/context.tsx
+++ b/dashboard/src/i18n/context.tsx
@@ -109,7 +109,20 @@ export function I18nProvider({ children }: { children: ReactNode }) {
 export function useT() {
   const context = useContext(I18nContext);
   if (!context) {
-    throw new Error('useT must be used within I18nProvider');
+    // Fallback: resolve key from English catalog (for tests without I18nProvider)
+    const resolve = (key: string): string => {
+      const parts = key.split('.');
+      let result: unknown = en;
+      for (const part of parts) {
+        if (result && typeof result === 'object' && part in result) {
+          result = (result as Record<string, unknown>)[part];
+        } else {
+          return key; // key not found, return as-is
+        }
+      }
+      return typeof result === 'string' ? result : key;
+    };
+    return resolve;
   }
   return context.t;
 }