feat(webui): add i18n support and locale switcher

webui/src/components/thread/ThreadComposer.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { ArrowUp } from "lucide-react";
+import { useTranslation } from "react-i18next";
 
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
@@ -15,13 +16,16 @@ interface ThreadComposerProps {
 export function ThreadComposer({
   onSend,
   disabled,
-  placeholder = "Type your message…",
+  placeholder,
   modelLabel = null,
   variant = "thread",
 }: ThreadComposerProps) {
+  const { t } = useTranslation();
   const [value, setValue] = useState("");
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const isHero = variant === "hero";
+  const resolvedPlaceholder =
+    placeholder ?? t("thread.composer.placeholderThread");
 
   useEffect(() => {
     if (disabled) return;
@@ -83,9 +87,9 @@ export function ThreadComposer({
           onInput={onInput}
           onKeyDown={onKeyDown}
           rows={1}
-          placeholder={placeholder}
+          placeholder={resolvedPlaceholder}
           disabled={disabled}
-          aria-label="Message input"
+          aria-label={t("thread.composer.inputAria")}
           className={cn(
             "w-full resize-none bg-transparent",
             isHero
@@ -120,7 +124,7 @@ export function ThreadComposer({
               </span>
             ) : null}
             <span className="hidden select-none text-[10.5px] text-muted-foreground/60 sm:inline">
-              Enter to send · Shift+Enter for newline
+              {t("thread.composer.sendHint")}
             </span>
           </div>
           <span className="sm:hidden" aria-hidden />
@@ -128,7 +132,7 @@ export function ThreadComposer({
             type="submit"
             size="icon"
             disabled={disabled || !value.trim()}
-            aria-label="Send message"
+            aria-label={t("thread.composer.send")}
             className={cn(
               "rounded-full border border-border/70 bg-secondary/85 text-secondary-foreground shadow-none transition-transform hover:bg-accent",
               isHero ? "h-8.5 w-8.5" : "h-7.5 w-7.5",

webui/src/components/thread/ThreadHeader.tsx

@@ -1,4 +1,5 @@
 import { PanelLeftOpen } from "lucide-react";
+import { useTranslation } from "react-i18next";
 
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
@@ -16,13 +17,14 @@ export function ThreadHeader({
   onGoHome,
   hideSidebarToggleOnDesktop = false,
 }: ThreadHeaderProps) {
+  const { t } = useTranslation();
   return (
     <div className="relative z-10 flex items-center justify-between gap-3 px-3 py-2">
       <div className="relative flex min-w-0 items-center gap-2">
         <Button
           variant="ghost"
           size="icon"
-          aria-label="Toggle sidebar"
+          aria-label={t("thread.header.toggleSidebar")}
           onClick={onToggleSidebar}
           className={cn(
             "h-7 w-7 rounded-md text-muted-foreground hover:bg-accent/35 hover:text-foreground",

webui/src/components/thread/ThreadShell.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 import { ThreadComposer } from "@/components/thread/ThreadComposer";
 import { ThreadHeader } from "@/components/thread/ThreadHeader";
@@ -33,6 +34,7 @@ export function ThreadShell({
   onNewChat,
   hideSidebarToggleOnDesktop = false,
 }: ThreadShellProps) {
+  const { t } = useTranslation();
   const chatId = session?.chatId ?? null;
   const historyKey = session?.key ?? null;
   const { messages: historical, loading } = useSessionHistory(historyKey);
@@ -105,7 +107,7 @@ export function ThreadShell({
 
   const emptyState = loading ? (
     <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
-      Loading conversation…
+      {t("thread.loadingConversation")}
     </div>
   ) : (
     <div className="flex w-full max-w-[40rem] flex-col gap-2 text-left animate-in fade-in-0 slide-in-from-bottom-2 duration-500">
@@ -120,7 +122,7 @@ export function ThreadShell({
         <span className="text-foreground/82">nanobot</span>
       </div>
       <p className="max-w-[28rem] text-[13px] leading-6 text-muted-foreground">
-        Ask questions, continue local work, or start a new thread.
+        {t("thread.empty.description")}
       </p>
     </div>
   );
@@ -142,7 +144,11 @@ export function ThreadShell({
             <ThreadComposer
               onSend={send}
               disabled={!chatId}
-              placeholder={showHeroComposer ? "What's on your mind?" : "Type your message…"}
+              placeholder={
+                showHeroComposer
+                  ? t("thread.composer.placeholderHero")
+                  : t("thread.composer.placeholderThread")
+              }
               modelLabel={toModelBadgeLabel(modelName)}
               variant={showHeroComposer ? "hero" : "thread"}
             />
@@ -150,7 +156,11 @@ export function ThreadShell({
             <ThreadComposer
               onSend={handleWelcomeSend}
               disabled={booting}
-              placeholder={booting ? "Opening a new chat…" : "What's on your mind?"}
+              placeholder={
+                booting
+                  ? t("thread.composer.placeholderOpening")
+                  : t("thread.composer.placeholderHero")
+              }
               modelLabel={toModelBadgeLabel(modelName)}
               variant="hero"
             />

webui/src/components/thread/ThreadViewport.tsx

@@ -1,5 +1,6 @@
 import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
 import { ArrowDown } from "lucide-react";
+import { useTranslation } from "react-i18next";
 
 import { ThreadMessages } from "@/components/thread/ThreadMessages";
 import { Button } from "@/components/ui/button";
@@ -21,6 +22,7 @@ export function ThreadViewport({
   composer,
   emptyState,
 }: ThreadViewportProps) {
+  const { t } = useTranslation();
   const scrollRef = useRef<HTMLDivElement>(null);
   const [atBottom, setAtBottom] = useState(true);
   const hasMessages = messages.length > 0;
@@ -104,7 +106,7 @@ export function ThreadViewport({
             "bg-background/90 backdrop-blur",
             "animate-in fade-in-0 zoom-in-95",
           )}
-          aria-label="Scroll to bottom"
+          aria-label={t("thread.scrollToBottom")}
         >
           <ArrowDown className="h-4 w-4" />
         </Button>