feat: add runtime language selector in header (EN/FR toggle)

- Add LanguageSelector component with globe icon + cycle button
- Refactor i18n to support reactive locale switching via useSyncExternalStore
- Locale priority: localStorage > VITE_LOCALE > navigator.language > 'en'
- All components now use useT() hook for reactive re-rendering on locale change
- Persists choice to localStorage (key: pinchchat-locale)
- No page reload needed — instant switch

src/components/Chat.tsx

@@ -4,7 +4,7 @@ import { ChatInput } from './ChatInput';
 import { TypingIndicator } from './TypingIndicator';
 import type { ChatMessage, ConnectionStatus } from '../types';
 import { Bot } from 'lucide-react';
-import { t } from '../lib/i18n';
+import { useT } from '../hooks/useLocale';
 
 interface Props {
   messages: ChatMessage[];
@@ -45,6 +45,7 @@ function hasStreamedText(messages: ChatMessage[]): boolean {
 const SCROLL_THRESHOLD = 150;
 
 export function Chat({ messages, isGenerating, status, onSend, onAbort }: Props) {
+  const t = useT();
   const bottomRef = useRef<HTMLDivElement>(null);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const isNearBottomRef = useRef(true);

src/components/ChatInput.tsx

@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { Send, Square, Paperclip, X, FileText } from 'lucide-react';
-import { t } from '../lib/i18n';
+import { useT } from '../hooks/useLocale';
 
 interface FileAttachment {
   id: string;
@@ -80,6 +80,7 @@ function formatSize(bytes: number): string {
 }
 
 export function ChatInput({ onSend, onAbort, isGenerating, disabled }: Props) {
+  const t = useT();
   const [text, setText] = useState('');
   const [files, setFiles] = useState<FileAttachment[]>([]);
   const [isDragOver, setIsDragOver] = useState(false);

src/components/ChatMessage.tsx

@@ -7,13 +7,16 @@ import { ThinkingBlock } from './ThinkingBlock';
 import { CodeBlock } from './CodeBlock';
 import { ToolCall } from './ToolCall';
 import { Bot, User, Wrench } from 'lucide-react';
-import { t, locale } from '../lib/i18n';
+import { t, getLocale } from '../lib/i18n';
+import { useLocale } from '../hooks/useLocale';
 // ChevronDown, ChevronRight, Wrench still used by InternalOnlyMessage
 
-/** Map i18n locale code to BCP-47 locale for Intl formatting */
-const bcp47Locale = locale === 'fr' ? 'fr-FR' : 'en-US';
+function getBcp47(): string {
+  return getLocale() === 'fr' ? 'fr-FR' : 'en-US';
+}
 
 function formatTimestamp(ts: number): string {
+  const bcp47Locale = getBcp47();
   const date = new Date(ts);
   const now = new Date();
   const time = date.toLocaleTimeString(bcp47Locale, { hour: '2-digit', minute: '2-digit' });
@@ -192,6 +195,7 @@ function InternalOnlyMessage({ message }: { message: ChatMessageType }) {
 }
 
 export function ChatMessageComponent({ message }: { message: ChatMessageType }) {
+  useLocale(); // re-render on locale change
   const isUser = message.role === 'user';
 
   // Assistant message with no text content — only tool calls / thinking

src/components/Header.tsx

@@ -1,6 +1,7 @@
 import { Menu, Bot, Sparkles, LogOut } from 'lucide-react';
 import type { ConnectionStatus, Session } from '../types';
-import { t } from '../lib/i18n';
+import { useT } from '../hooks/useLocale';
+import { LanguageSelector } from './LanguageSelector';
 
 interface Props {
   status: ConnectionStatus;
@@ -11,6 +12,7 @@ interface Props {
 }
 
 export function Header({ status, sessionKey, onToggleSidebar, activeSessionData, onLogout }: Props) {
+  const t = useT();
   const sessionLabel = sessionKey.split(':').pop() || sessionKey;
 
   return (
@@ -32,6 +34,7 @@ export function Header({ status, sessionKey, onToggleSidebar, activeSessionData,
         </div>
       </div>
       <div className="flex items-center gap-2 text-sm">
+        <LanguageSelector />
         {status === 'connected' ? (
           <div className="flex items-center gap-2 rounded-2xl border border-white/8 bg-zinc-800/30 px-3 py-1.5">
             <span className="w-2 h-2 rounded-full bg-cyan-300/80 shadow-[0_0_12px_rgba(34,211,238,0.6)]" />

src/components/LanguageSelector.tsx

@@ -0,0 +1,24 @@
+import { Globe } from 'lucide-react';
+import { setLocale, supportedLocales, localeLabels } from '../lib/i18n';
+import { useLocale } from '../hooks/useLocale';
+
+export function LanguageSelector() {
+  const current = useLocale();
+
+  const cycle = () => {
+    const idx = supportedLocales.indexOf(current);
+    const next = supportedLocales[(idx + 1) % supportedLocales.length];
+    setLocale(next);
+  };
+
+  return (
+    <button
+      onClick={cycle}
+      className="flex items-center gap-1.5 rounded-2xl border border-white/8 bg-zinc-800/30 px-2.5 py-1.5 text-xs text-zinc-400 hover:text-zinc-200 hover:bg-white/5 transition-colors"
+      title="Change language"
+    >
+      <Globe size={14} />
+      <span className="font-medium">{localeLabels[current] || current.toUpperCase()}</span>
+    </button>
+  );
+}

src/components/LoginScreen.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { Bot, Sparkles, Eye, EyeOff, Loader2 } from 'lucide-react';
-import { t } from '../lib/i18n';
+import { useT } from '../hooks/useLocale';
 
 interface Props {
   onConnect: (url: string, token: string) => void;
@@ -29,6 +29,7 @@ export function clearCredentials() {
 }
 
 export function LoginScreen({ onConnect, error, isConnecting }: Props) {
+  const t = useT();
   const defaultUrl = import.meta.env.VITE_GATEWAY_WS_URL || `ws://${window.location.hostname}:18789`;
   const [url, setUrl] = useState(defaultUrl);
   const [token, setToken] = useState('');

src/components/Sidebar.tsx

@@ -1,6 +1,6 @@
 import { MessageSquare, X, Sparkles } from 'lucide-react';
 import type { Session } from '../types';
-import { t } from '../lib/i18n';
+import { useT } from '../hooks/useLocale';
 
 interface Props {
   sessions: Session[];
@@ -11,6 +11,7 @@ interface Props {
 }
 
 export function Sidebar({ sessions, activeSession, onSwitch, open, onClose }: Props) {
+  const t = useT();
   return (
     <>
       {open && <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-40 lg:hidden" onClick={onClose} />}

src/components/ThinkingBlock.tsx

@@ -1,8 +1,9 @@
 import { useState } from 'react';
 import { ChevronRight, ChevronDown, Brain } from 'lucide-react';
-import { t } from '../lib/i18n';
+import { useT } from '../hooks/useLocale';
 
 export function ThinkingBlock({ text }: { text: string }) {
+  const t = useT();
   const [open, setOpen] = useState(false);
 
   return (

src/components/ToolCall.tsx

@@ -1,7 +1,7 @@
 import { useState, useMemo } from 'react';
 import { ChevronRight, ChevronDown, Terminal, Globe, Search, FileText, Wrench, Code, Database, Image, MessageSquare, Brain, Cpu } from 'lucide-react';
 import hljs from 'highlight.js/lib/common';
-import { t } from '../lib/i18n';
+import { useT } from '../hooks/useLocale';
 
 type ToolColor = { border: string; bg: string; text: string; icon: string; glow: string; expandBorder: string; expandBg: string };
 
@@ -149,6 +149,7 @@ function truncate(s: string, max: number): string {
 }
 
 export function ToolCall({ name, input, result }: { name: string; input?: any; result?: string }) {
+  const t = useT();
   const [open, setOpen] = useState(false);
   const c = getColor(name);
 

src/hooks/useLocale.ts

@@ -0,0 +1,16 @@
+import { useSyncExternalStore } from 'react';
+import { getLocale, onLocaleChange, t as rawT, type TranslationKey } from '../lib/i18n';
+
+/** Re-renders component when locale changes. Returns the current locale string. */
+export function useLocale(): string {
+  return useSyncExternalStore(onLocaleChange, getLocale, getLocale);
+}
+
+/**
+ * Reactive translation hook.
+ * Components using this will automatically re-render when locale changes.
+ */
+export function useT(): (key: TranslationKey) => string {
+  useLocale(); // subscribe to changes
+  return rawT;
+}

src/lib/i18n.ts

@@ -1,9 +1,12 @@
 /**
- * Lightweight i18n — no external deps.
- * Locale is set via VITE_LOCALE env var (default: "en").
- * Add new languages by adding a record to `messages`.
+ * Lightweight reactive i18n — no external deps.
+ *
+ * Locale priority: localStorage > VITE_LOCALE > navigator.language > 'en'
+ * Changing locale at runtime triggers subscribed React components to re-render.
  */
 
+const STORAGE_KEY = 'pinchchat-locale';
+
 const en = {
   // Login screen
   'login.title': 'PinchChat',
@@ -23,6 +26,7 @@ const en = {
   'header.disconnected': 'Disconnected',
   'header.logout': 'Logout',
   'header.toggleSidebar': 'Toggle sidebar',
+  'header.changeLanguage': 'Change language',
 
   // Chat
   'chat.welcome': 'PinchChat',
@@ -65,6 +69,7 @@ const fr: Record<keyof typeof en, string> = {
   'header.disconnected': 'Déconnecté',
   'header.logout': 'Déconnexion',
   'header.toggleSidebar': 'Afficher/masquer la barre latérale',
+  'header.changeLanguage': 'Changer de langue',
 
   'chat.welcome': 'PinchChat',
   'chat.welcomeSub': 'Envoyez un message pour commencer',
@@ -85,14 +90,69 @@ const fr: Record<keyof typeof en, string> = {
   'time.yesterday': 'Hier',
 };
 
+export type TranslationKey = keyof typeof en;
+
 const messages: Record<string, Record<string, string>> = { en, fr };
 
-const locale = (import.meta.env.VITE_LOCALE as string) || 'en';
-const dict = messages[locale] || messages.en;
+export const supportedLocales = Object.keys(messages) as string[];
+
+/** Labels shown in the language selector */
+export const localeLabels: Record<string, string> = {
+  en: 'EN',
+  fr: 'FR',
+};
+
+function resolveInitialLocale(): string {
+  // 1. localStorage
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored && messages[stored]) return stored;
+  } catch { /* SSR or blocked storage */ }
+
+  // 2. VITE_LOCALE env var
+  const envLocale = (import.meta.env.VITE_LOCALE as string) || '';
+  if (envLocale && messages[envLocale]) return envLocale;
+
+  // 3. navigator.language
+  if (typeof navigator !== 'undefined') {
+    const navLang = navigator.language?.split('-')[0];
+    if (navLang && messages[navLang]) return navLang;
+  }
+
+  // 4. fallback
+  return 'en';
+}
+
+let currentLocale = resolveInitialLocale();
+let dict = messages[currentLocale] || messages.en;
+
+type Listener = () => void;
+const listeners = new Set<Listener>();
+
+/** Subscribe to locale changes. Returns unsubscribe function. */
+export function onLocaleChange(fn: Listener): () => void {
+  listeners.add(fn);
+  return () => listeners.delete(fn);
+}
+
+/** Get the current locale code */
+export function getLocale(): string {
+  return currentLocale;
+}
+
+/** Switch locale at runtime. Persists to localStorage and notifies subscribers. */
+export function setLocale(loc: string): void {
+  if (!messages[loc] || loc === currentLocale) return;
+  currentLocale = loc;
+  dict = messages[loc];
+  try { localStorage.setItem(STORAGE_KEY, loc); } catch { /* noop */ }
+  listeners.forEach((fn) => fn());
+}
 
 /** Return the translated string for the given key, falling back to English. */
-export function t(key: keyof typeof en): string {
+export function t(key: TranslationKey): string {
   return dict[key] ?? (messages.en as Record<string, string>)[key] ?? key;
 }
 
-export { locale };
+// Keep backward-compat named export
+export { currentLocale as locale };