feat(ui): add favorite models to selector

Adds a language dropdown to the folder picker using the shared selector UI and persists selection to preferences.locale.

.github/workflows/release-ui.yml

@@ -12,8 +12,8 @@ env:
 
 jobs:
   release-ui:
-    # Automated via reusable call (main releases); manual runs allowed on dev.
-    if: ${{ github.event_name == 'workflow_call' || github.ref == 'refs/heads/dev' }}
+    # Automated via reusable call (main releases); manual runs allowed on dev/main.
+    if: ${{ github.event_name == 'workflow_call' || github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/main' }}
     runs-on: ubuntu-24.04
     steps:
       - name: Checkout

.opencode/commands/release-notes.md

@@ -0,0 +1,7 @@
+---
+description: Creates release notes
+agent: build
+---
+
+Check how I do prepare release notes here - https://github.com/NeuralNomadsAI/CodeNomad/releases/tag/v0.7.0
+Use the same format to create release notes from users perspective for new release by looking at changes from last tagged release to tip of branch

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "codenomad-workspace",
-  "version": "0.8.1",
+  "version": "0.9.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "codenomad-workspace",
-      "version": "0.8.1",
+      "version": "0.9.2",
       "dependencies": {
         "7zip-bin": "^5.2.0",
         "google-auth-library": "^10.5.0"
@@ -7384,7 +7384,7 @@
     },
     "packages/electron-app": {
       "name": "@neuralnomads/codenomad-electron-app",
-      "version": "0.8.1",
+      "version": "0.9.2",
       "dependencies": {
         "@codenomad/ui": "file:../ui",
         "@neuralnomads/codenomad": "file:../server"
@@ -7418,7 +7418,7 @@
     },
     "packages/server": {
       "name": "@neuralnomads/codenomad",
-      "version": "0.8.1",
+      "version": "0.9.2",
       "dependencies": {
         "@fastify/cors": "^8.5.0",
         "@fastify/reply-from": "^9.8.0",
@@ -7455,14 +7455,14 @@
     },
     "packages/tauri-app": {
       "name": "@codenomad/tauri-app",
-      "version": "0.8.1",
+      "version": "0.9.2",
       "devDependencies": {
         "@tauri-apps/cli": "^2.9.4"
       }
     },
     "packages/ui": {
       "name": "@codenomad/ui",
-      "version": "0.8.1",
+      "version": "0.9.2",
       "dependencies": {
         "@git-diff-view/solid": "^0.0.8",
         "@kobalte/core": "0.13.11",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codenomad-workspace",
-  "version": "0.8.1",
+  "version": "0.9.2",
   "private": true,
   "description": "CodeNomad monorepo workspace",
   "workspaces": {

packages/cloudflare/release-config.json

@@ -1,4 +1,4 @@
 {
-  "minServerVersion": "0.8.1",
+  "minServerVersion": "0.9.2",
   "latestServerUrl": "https://github.com/NeuralNomadsAI/CodeNomad/releases/latest"
 }

packages/electron-app/electron/main/process-manager.ts

@@ -177,8 +177,11 @@ export class CliProcessManager extends EventEmitter {
 
     return new Promise((resolve) => {
       const killTimeout = setTimeout(() => {
+        console.warn(
+          `[cli] stop timed out after 30000ms; sending SIGKILL (pid=${child.pid ?? "unknown"})`,
+        )
         child.kill("SIGKILL")
-      }, 4000)
+      }, 30000)
 
       child.on("exit", () => {
         clearTimeout(killTimeout)
@@ -376,4 +379,3 @@ export class CliProcessManager extends EventEmitter {
     throw new Error("Unable to locate CodeNomad CLI build (dist/bin.js). Run npm run build --workspace @neuralnomads/codenomad.")
   }
 }
-

packages/electron-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neuralnomads/codenomad-electron-app",
-  "version": "0.8.1",
+  "version": "0.9.2",
   "description": "CodeNomad - AI coding assistant",
   "author": {
     "name": "Neural Nomads",

packages/opencode-config/package.json

@@ -3,6 +3,6 @@
   "version": "0.5.0",
   "private": true,
   "dependencies": {
-    "@opencode-ai/plugin": "1.1.30"
+    "@opencode-ai/plugin": "1.1.36"
   }
 }

packages/server/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@neuralnomads/codenomad",
-  "version": "0.8.1",
+  "version": "0.9.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@neuralnomads/codenomad",
-      "version": "0.8.1",
+      "version": "0.9.2",
       "dependencies": {
         "@fastify/cors": "^8.5.0",
         "@fastify/reply-from": "^9.8.0",

packages/server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neuralnomads/codenomad",
-  "version": "0.8.1",
+  "version": "0.9.2",
   "description": "CodeNomad Server",
   "author": {
     "name": "Neural Nomads",

packages/server/src/api-types.ts

@@ -95,6 +95,26 @@ export interface FileSystemListResponse {
   metadata: FileSystemListingMetadata
 }
 
+export interface FileSystemCreateFolderRequest {
+  /**
+   * Path identifier for the currently browsed directory.
+   * Matches the `path` parameter used for `/api/filesystem`.
+   */
+  parentPath?: string
+  /** Single folder name (no separators). */
+  name: string
+}
+
+export interface FileSystemCreateFolderResponse {
+  /**
+   * Path identifier that can be passed back to `/api/filesystem` to browse the new folder.
+   * Relative for restricted listings, absolute for unrestricted.
+   */
+  path: string
+  /** Absolute folder path on the server host. */
+  absolutePath: string
+}
+
 export const WINDOWS_DRIVES_ROOT = "__drives__"
 
 export interface WorkspaceFileResponse {

packages/server/src/config/schema.ts

@@ -13,8 +13,11 @@ const PreferencesSchema = z.object({
   thinkingBlocksExpansion: z.enum(["expanded", "collapsed"]).default("expanded"),
   showTimelineTools: z.boolean().default(true),
   lastUsedBinary: z.string().optional(),
+  locale: z.string().optional(),
   environmentVariables: z.record(z.string()).default({}),
   modelRecents: z.array(ModelPreferenceSchema).default([]),
+  modelFavorites: z.array(ModelPreferenceSchema).default([]),
+  modelThinkingSelections: z.record(z.string(), z.string()).default({}),
   diffViewMode: z.enum(["split", "unified"]).default("split"),
   toolOutputExpansion: z.enum(["expanded", "collapsed"]).default("expanded"),
   diagnosticsExpansion: z.enum(["expanded", "collapsed"]).default("expanded"),

packages/server/src/filesystem/browser.ts

@@ -2,6 +2,7 @@ import fs from "fs"
 import os from "os"
 import path from "path"
 import {
+  FileSystemCreateFolderResponse,
   FileSystemEntry,
   FileSystemListResponse,
   FileSystemListingMetadata,
@@ -56,6 +57,30 @@ export class FileSystemBrowser {
     return this.listRestrictedWithMetadata(targetPath, includeFiles)
   }
 
+  createFolder(parentPath: string | undefined, folderName: string): FileSystemCreateFolderResponse {
+    const name = this.normalizeFolderName(folderName)
+
+    if (this.unrestricted) {
+      const resolvedParent = this.resolveUnrestrictedPath(parentPath)
+      if (this.isWindows && resolvedParent === WINDOWS_DRIVES_ROOT) {
+        throw new Error("Cannot create folders at drive root")
+      }
+      this.assertDirectoryExists(resolvedParent)
+      const absolutePath = this.resolveAbsoluteChild(resolvedParent, name)
+      fs.mkdirSync(absolutePath)
+      return { path: absolutePath, absolutePath }
+    }
+
+    const normalizedParent = this.normalizeRelativePath(parentPath)
+    const parentAbsolute = this.toRestrictedAbsolute(normalizedParent)
+    this.assertDirectoryExists(parentAbsolute)
+
+    const relativePath = this.buildRelativePath(normalizedParent, name)
+    const absolutePath = this.toRestrictedAbsolute(relativePath)
+    fs.mkdirSync(absolutePath)
+    return { path: relativePath, absolutePath }
+  }
+
   readFile(relativePath: string): string {
     if (this.unrestricted) {
       throw new Error("readFile is not available in unrestricted mode")
@@ -157,6 +182,41 @@ export class FileSystemBrowser {
     return { entries, metadata }
   }
 
+  private normalizeFolderName(input: string): string {
+    const name = input.trim()
+    if (!name) {
+      throw new Error("Folder name is required")
+    }
+
+    if (name === "." || name === "..") {
+      throw new Error("Invalid folder name")
+    }
+
+    if (name.startsWith("~")) {
+      throw new Error("Invalid folder name")
+    }
+
+    if (name.includes("/") || name.includes("\\")) {
+      throw new Error("Folder name must not include path separators")
+    }
+
+    if (name.includes("\u0000")) {
+      throw new Error("Invalid folder name")
+    }
+
+    return name
+  }
+
+  private assertDirectoryExists(directory: string) {
+    if (!fs.existsSync(directory)) {
+      throw new Error(`Directory does not exist: ${directory}`)
+    }
+    const stats = fs.statSync(directory)
+    if (!stats.isDirectory()) {
+      throw new Error(`Path is not a directory: ${directory}`)
+    }
+  }
+
   private readDirectoryEntries(directory: string, options: DirectoryReadOptions): FileSystemEntry[] {
     const dirents = fs.readdirSync(directory, { withFileTypes: true })
     const results: FileSystemEntry[] = []

packages/server/src/index.ts

@@ -286,21 +286,33 @@ async function main() {
       return
     }
     shuttingDown = true
-    logger.info("Received shutdown signal, closing server")
-    try {
-      await server.stop()
-      logger.info("HTTP server stopped")
-    } catch (error) {
-      logger.error({ err: error }, "Failed to stop HTTP server")
-    }
+    logger.info("Received shutdown signal, stopping workspaces and server")
 
-    try {
-      instanceEventBridge.shutdown()
-      await workspaceManager.shutdown()
-      logger.info("Workspace manager shutdown complete")
-    } catch (error) {
-      logger.error({ err: error }, "Workspace manager shutdown failed")
-    }
+    const shutdownWorkspaces = (async () => {
+      try {
+        instanceEventBridge.shutdown()
+      } catch (error) {
+        logger.warn({ err: error }, "Instance event bridge shutdown failed")
+      }
+
+      try {
+        await workspaceManager.shutdown()
+        logger.info("Workspace manager shutdown complete")
+      } catch (error) {
+        logger.error({ err: error }, "Workspace manager shutdown failed")
+      }
+    })()
+
+    const shutdownHttp = (async () => {
+      try {
+        await server.stop()
+        logger.info("HTTP server stopped")
+      } catch (error) {
+        logger.error({ err: error }, "Failed to stop HTTP server")
+      }
+    })()
+
+    await Promise.allSettled([shutdownWorkspaces, shutdownHttp])
 
     // no-op: remote UI manifest replaces GitHub release monitor
 

packages/server/src/server/routes/filesystem.ts

@@ -11,6 +11,11 @@ const FilesystemQuerySchema = z.object({
   includeFiles: z.coerce.boolean().optional(),
 })
 
+const FilesystemCreateFolderSchema = z.object({
+  parentPath: z.string().optional(),
+  name: z.string(),
+})
+
 export function registerFilesystemRoutes(app: FastifyInstance, deps: RouteDeps) {
   app.get("/api/filesystem", async (request, reply) => {
     const query = FilesystemQuerySchema.parse(request.query ?? {})
@@ -24,4 +29,26 @@ export function registerFilesystemRoutes(app: FastifyInstance, deps: RouteDeps)
       return { error: (error as Error).message }
     }
   })
+
+  app.post("/api/filesystem/folders", async (request, reply) => {
+    const body = FilesystemCreateFolderSchema.parse(request.body ?? {})
+
+    try {
+      const created = deps.fileSystemBrowser.createFolder(body.parentPath, body.name)
+      reply.code(201)
+      return created
+    } catch (error) {
+      const err = error as NodeJS.ErrnoException
+      if (err?.code === "EEXIST") {
+        reply.code(409).type("text/plain").send("Folder already exists")
+        return
+      }
+      if (err?.code === "EACCES" || err?.code === "EPERM") {
+        reply.code(403).type("text/plain").send("Permission denied")
+        return
+      }
+
+      reply.code(400).type("text/plain").send((error as Error).message)
+    }
+  })
 }

packages/server/src/workspaces/manager.ts

@@ -187,16 +187,27 @@ export class WorkspaceManager {
 
   async shutdown() {
     this.options.logger.info("Shutting down all workspaces")
+
+    const stopTasks: Array<Promise<void>> = []
+
     for (const [id, workspace] of this.workspaces) {
-      if (workspace.pid) {
-        this.options.logger.info({ workspaceId: id }, "Stopping workspace during shutdown")
-        await this.runtime.stop(id).catch((error) => {
-          this.options.logger.error({ workspaceId: id, err: error }, "Failed to stop workspace during shutdown")
-        })
-      } else {
+      if (!workspace.pid) {
         this.options.logger.debug({ workspaceId: id }, "Workspace already stopped")
+        continue
       }
+
+      this.options.logger.info({ workspaceId: id }, "Stopping workspace during shutdown")
+      stopTasks.push(
+        this.runtime.stop(id).catch((error) => {
+          this.options.logger.error({ workspaceId: id, err: error }, "Failed to stop workspace during shutdown")
+        }),
+      )
     }
+
+    if (stopTasks.length > 0) {
+      await Promise.allSettled(stopTasks)
+    }
+
     this.workspaces.clear()
     this.opencodeAuth.clear()
     this.options.logger.info("All workspaces cleared")

packages/server/src/workspaces/runtime.ts

@@ -1,4 +1,4 @@
-import { ChildProcess, spawn } from "child_process"
+import { ChildProcess, spawn, spawnSync } from "child_process"
 import { existsSync, statSync } from "fs"
 import path from "path"
 import { EventBus } from "../events/bus"
@@ -122,10 +122,12 @@ export class WorkspaceRuntime {
         },
         "Launching OpenCode process",
       )
+      const detached = process.platform !== "win32"
       const child = spawn(spec.command, spec.args, {
         cwd: options.folder,
         env,
         stdio: ["ignore", "pipe", "pipe"],
+        detached,
         ...spec.options,
       })
 
@@ -259,10 +261,96 @@ export class WorkspaceRuntime {
     const child = managed.child
     this.logger.info({ workspaceId }, "Stopping OpenCode process")
 
+    const pid = child.pid
+    if (!pid) {
+      this.logger.warn({ workspaceId }, "Workspace process missing PID; cannot stop")
+      return
+    }
+
+    const isAlreadyExited = () => child.exitCode !== null || child.signalCode !== null
+
+    const tryKillPosixGroup = (signal: NodeJS.Signals) => {
+      try {
+        // Negative PID targets the process group (POSIX).
+        process.kill(-pid, signal)
+        return true
+      } catch (error) {
+        const err = error as NodeJS.ErrnoException
+        if (err?.code === "ESRCH") {
+          return true
+        }
+        this.logger.debug({ workspaceId, pid, err }, "Failed to signal POSIX process group")
+        return false
+      }
+    }
+
+    const tryKillSinglePid = (signal: NodeJS.Signals) => {
+      try {
+        process.kill(pid, signal)
+        return true
+      } catch (error) {
+        const err = error as NodeJS.ErrnoException
+        if (err?.code === "ESRCH") {
+          return true
+        }
+        this.logger.debug({ workspaceId, pid, err }, "Failed to signal workspace PID")
+        return false
+      }
+    }
+
+    const tryTaskkill = (force: boolean) => {
+      const args = ["/PID", String(pid), "/T"]
+      if (force) {
+        args.push("/F")
+      }
+
+      try {
+        const result = spawnSync("taskkill", args, { encoding: "utf8" })
+        const exitCode = result.status
+        if (exitCode === 0) {
+          return true
+        }
+        // If the PID is already gone, treat it as success.
+        const stderr = (result.stderr ?? "").toString().toLowerCase()
+        const stdout = (result.stdout ?? "").toString().toLowerCase()
+        const combined = `${stdout}\n${stderr}`
+        if (combined.includes("not found") || combined.includes("no running instance") || combined.includes("process") && combined.includes("not")) {
+          return true
+        }
+        this.logger.debug({ workspaceId, pid, exitCode, stderr: result.stderr, stdout: result.stdout }, "taskkill failed")
+        return false
+      } catch (error) {
+        this.logger.debug({ workspaceId, pid, err: error }, "taskkill failed to execute")
+        return false
+      }
+    }
+
+    const sendStopSignal = (signal: NodeJS.Signals) => {
+      if (process.platform === "win32") {
+        // Best-effort: terminate the whole process tree rooted at pid.
+        // Use /F only for escalation.
+        tryTaskkill(signal === "SIGKILL")
+        return
+      }
+
+      // Prefer process-group signaling so wrapper launchers (bun/node) don't orphan the real server.
+      const groupOk = tryKillPosixGroup(signal)
+      if (!groupOk) {
+        // Fallback to direct PID kill.
+        tryKillSinglePid(signal)
+      }
+    }
+
     await new Promise<void>((resolve, reject) => {
+      let escalationTimer: NodeJS.Timeout | null = null
+
       const cleanup = () => {
         child.removeListener("exit", onExit)
         child.removeListener("error", onError)
+        if (escalationTimer) {
+          clearTimeout(escalationTimer)
+          escalationTimer = null
+        }
       }
 
       const onExit = () => {
@@ -274,32 +362,30 @@ export class WorkspaceRuntime {
         reject(error)
       }
 
-      const resolveIfAlreadyExited = () => {
-        if (child.exitCode !== null || child.signalCode !== null) {
-          this.logger.debug({ workspaceId, exitCode: child.exitCode, signal: child.signalCode }, "Process already exited")
-          cleanup()
-          resolve()
-          return true
-        }
-        return false
+      if (isAlreadyExited()) {
+        this.logger.debug({ workspaceId, exitCode: child.exitCode, signal: child.signalCode }, "Process already exited")
+        cleanup()
+        resolve()
+        return
       }
 
       child.once("exit", onExit)
       child.once("error", onError)
 
-      if (resolveIfAlreadyExited()) {
-        return
-      }
+      this.logger.debug(
+        { workspaceId, pid, detached: process.platform !== "win32" },
+        "Sending SIGTERM to workspace process (tree/group)",
+      )
+      sendStopSignal("SIGTERM")
 
-      this.logger.debug({ workspaceId }, "Sending SIGTERM to workspace process")
-      child.kill("SIGTERM")
-      setTimeout(() => {
-        if (!child.killed) {
-          this.logger.warn({ workspaceId }, "Process did not stop after SIGTERM, force killing")
-          child.kill("SIGKILL")
-        } else {
-          this.logger.debug({ workspaceId }, "Workspace process stopped gracefully before SIGKILL timeout")
+      escalationTimer = setTimeout(() => {
+        escalationTimer = null
+        if (isAlreadyExited()) {
+          this.logger.debug({ workspaceId, pid }, "Workspace exited before SIGKILL escalation")
+          return
         }
+        this.logger.warn({ workspaceId, pid }, "Process did not stop after SIGTERM, escalating")
+        sendStopSignal("SIGKILL")
       }, 2000)
     })
   }

packages/tauri-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codenomad/tauri-app",
-  "version": "0.8.1",
+  "version": "0.9.2",
   "private": true,
   "scripts": {
     "dev": "tauri dev",

packages/tauri-app/src-tauri/src/cli_manager.rs

@@ -34,6 +34,8 @@ fn workspace_root() -> Option<PathBuf> {
 
 const SESSION_COOKIE_NAME: &str = "codenomad_session";
 
+const CLI_STOP_GRACE_SECS: u64 = 30;
+
 fn navigate_main(app: &AppHandle, url: &str) {
     if let Some(win) = app.webview_windows().get("main") {
         let mut display = url.to_string();
@@ -276,6 +278,7 @@ impl CliProcessManager {
     pub fn stop(&self) -> anyhow::Result<()> {
         let mut child_opt = self.child.lock();
         if let Some(mut child) = child_opt.take() {
+            log_line(&format!("stopping CLI pid={}", child.id()));
             #[cfg(unix)]
             unsafe {
                 libc::kill(child.id() as i32, libc::SIGTERM);
@@ -290,7 +293,12 @@ impl CliProcessManager {
                 match child.try_wait() {
                     Ok(Some(_)) => break,
                     Ok(None) => {
-                        if start.elapsed() > Duration::from_secs(4) {
+                        if start.elapsed() > Duration::from_secs(CLI_STOP_GRACE_SECS) {
+                            log_line(&format!(
+                                "stop timed out after {}s; sending SIGKILL pid={}",
+                                CLI_STOP_GRACE_SECS,
+                                child.id()
+                            ));
                             #[cfg(unix)]
                             unsafe {
                                 libc::kill(child.id() as i32, libc::SIGKILL);

packages/tauri-app/src-tauri/src/main.rs

@@ -163,7 +163,8 @@ fn main() {
         .build(tauri::generate_context!())
         .expect("error while building tauri application")
         .run(|app_handle, event| match event {
-            tauri::RunEvent::ExitRequested { .. } => {
+            tauri::RunEvent::ExitRequested { api, .. } => {
+                api.prevent_exit();
                 let app = app_handle.clone();
                 std::thread::spawn(move || {
                     if let Some(state) = app.try_state::<AppState>() {
@@ -173,18 +174,18 @@ fn main() {
                 });
             }
             tauri::RunEvent::WindowEvent {
-                event: tauri::WindowEvent::Destroyed,
+                event: tauri::WindowEvent::CloseRequested { api, .. },
                 ..
             } => {
-                if app_handle.webview_windows().len() <= 1 {
-                    let app = app_handle.clone();
-                    std::thread::spawn(move || {
-                        if let Some(state) = app.try_state::<AppState>() {
-                            let _ = state.manager.stop();
-                        }
-                        app.exit(0);
-                    });
-                }
+                // Ensure we have time to stop the CLI process before the app exits.
+                api.prevent_close();
+                let app = app_handle.clone();
+                std::thread::spawn(move || {
+                    if let Some(state) = app.try_state::<AppState>() {
+                        let _ = state.manager.stop();
+                    }
+                    app.exit(0);
+                });
             }
             _ => {}
         });

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codenomad/ui",
-  "version": "0.8.1",
+  "version": "0.9.2",
   "private": true,
   "type": "module",
   "scripts": {

packages/ui/src/App.tsx

@@ -10,6 +10,7 @@ import InstanceShell from "./components/instance/instance-shell2"
 import { RemoteAccessOverlay } from "./components/remote-access-overlay"
 import { InstanceMetadataProvider } from "./lib/contexts/instance-metadata-context"
 import { initMarkdown } from "./lib/markdown"
+import { initGithubStars } from "./stores/github-stars"
 
 import { useTheme } from "./lib/theme"
 import { useCommands } from "./lib/hooks/use-commands"
@@ -17,6 +18,7 @@ import { useAppLifecycle } from "./lib/hooks/use-app-lifecycle"
 import { getLogger } from "./lib/logger"
 import { initReleaseNotifications } from "./stores/releases"
 import { runtimeEnv } from "./lib/runtime-env"
+import { useI18n } from "./lib/i18n"
 import {
   hasInstances,
   isSelectingFolder,
@@ -50,6 +52,7 @@ const log = getLogger("actions")
 
 const App: Component = () => {
   const { isDark } = useTheme()
+  const { t } = useI18n()
   const {
     preferences,
     recordWorkspaceLaunch,
@@ -94,6 +97,7 @@ const App: Component = () => {
   })
 
   onMount(() => {
+    void initGithubStars()
     updateInstanceTabBarHeight()
     const handleResize = () => updateInstanceTabBarHeight()
     window.addEventListener("resize", handleResize)
@@ -117,7 +121,7 @@ const App: Component = () => {
 
   const formatLaunchErrorMessage = (error: unknown): string => {
     if (!error) {
-      return "Failed to launch workspace"
+      return t("app.launchError.fallbackMessage")
     }
     const raw = typeof error === "string" ? error : error instanceof Error ? error.message : String(error)
     try {
@@ -200,12 +204,12 @@ const App: Component = () => {
 
   async function handleCloseInstance(instanceId: string) {
     const confirmed = await showConfirmDialog(
-      "Stop OpenCode instance? This will stop the server.",
+      t("app.stopInstance.confirmMessage"),
       {
-        title: "Stop instance",
+        title: t("app.stopInstance.title"),
         variant: "warning",
-        confirmLabel: "Stop",
-        cancelLabel: "Keep running",
+        confirmLabel: t("app.stopInstance.confirmLabel"),
+        cancelLabel: t("app.stopInstance.cancelLabel"),
       },
     )
 
@@ -328,21 +332,20 @@ const App: Component = () => {
           <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
             <Dialog.Content class="modal-surface w-full max-w-md p-6 flex flex-col gap-6">
               <div>
-                <Dialog.Title class="text-xl font-semibold text-primary">Unable to launch OpenCode</Dialog.Title>
+                <Dialog.Title class="text-xl font-semibold text-primary">{t("app.launchError.title")}</Dialog.Title>
                 <Dialog.Description class="text-sm text-secondary mt-2 break-words">
-                  We couldn't start the selected OpenCode binary. Review the error output below or choose a different
-                  binary from Advanced Settings.
+                  {t("app.launchError.description")}
                 </Dialog.Description>
               </div>
 
               <div class="rounded-lg border border-base bg-surface-secondary p-4">
-                <p class="text-xs font-medium text-muted uppercase tracking-wide mb-1">Binary path</p>
+                <p class="text-xs font-medium text-muted uppercase tracking-wide mb-1">{t("app.launchError.binaryPathLabel")}</p>
                 <p class="text-sm font-mono text-primary break-all">{launchErrorPath()}</p>
               </div>
 
               <Show when={launchErrorMessage()}>
                 <div class="rounded-lg border border-base bg-surface-secondary p-4">
-                  <p class="text-xs font-medium text-muted uppercase tracking-wide mb-1">Error output</p>
+                  <p class="text-xs font-medium text-muted uppercase tracking-wide mb-1">{t("app.launchError.errorOutputLabel")}</p>
                   <pre class="text-sm font-mono text-primary whitespace-pre-wrap break-words max-h-48 overflow-y-auto">{launchErrorMessage()}</pre>
                 </div>
               </Show>
@@ -354,11 +357,11 @@ const App: Component = () => {
                     class="selector-button selector-button-secondary"
                     onClick={handleLaunchErrorAdvanced}
                   >
-                    Open Advanced Settings
+                    {t("app.launchError.openAdvancedSettings")}
                   </button>
                 </Show>
                 <button type="button" class="selector-button selector-button-primary" onClick={handleLaunchErrorClose}>
-                  Close
+                  {t("app.launchError.close")}
                 </button>
               </div>
             </Dialog.Content>
@@ -428,7 +431,7 @@ const App: Component = () => {
                   clearLaunchError()
                 }}
                 class="absolute top-4 right-4 z-10 p-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
-                title="Close (Esc)"
+                title={t("app.launchError.closeTitle")}
               >
                 <svg class="w-5 h-5 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />

packages/ui/src/components/advanced-settings-modal.tsx

@@ -2,6 +2,7 @@ import { Component } from "solid-js"
 import { Dialog } from "@kobalte/core/dialog"
 import OpenCodeBinarySelector from "./opencode-binary-selector"
 import EnvironmentVariablesEditor from "./environment-variables-editor"
+import { useI18n } from "../lib/i18n"
 
 interface AdvancedSettingsModalProps {
   open: boolean
@@ -12,6 +13,8 @@ interface AdvancedSettingsModalProps {
 }
 
 const AdvancedSettingsModal: Component<AdvancedSettingsModalProps> = (props) => {
+  const { t } = useI18n()
+
   return (
     <Dialog open={props.open} onOpenChange={(open) => !open && props.onClose()}>
       <Dialog.Portal>
@@ -19,7 +22,7 @@ const AdvancedSettingsModal: Component<AdvancedSettingsModalProps> = (props) =>
         <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
           <Dialog.Content class="modal-surface w-full max-w-5xl max-h-[90vh] flex flex-col overflow-hidden">
             <header class="px-6 py-4 border-b" style={{ "border-color": "var(--border-base)" }}>
-              <Dialog.Title class="text-xl font-semibold text-primary">Advanced Settings</Dialog.Title>
+              <Dialog.Title class="text-xl font-semibold text-primary">{t("advancedSettings.title")}</Dialog.Title>
             </header>
 
             <div class="flex-1 overflow-y-auto p-6 space-y-6">
@@ -32,8 +35,8 @@ const AdvancedSettingsModal: Component<AdvancedSettingsModalProps> = (props) =>
 
               <div class="panel">
                 <div class="panel-header">
-                  <h3 class="panel-title">Environment Variables</h3>
-                  <p class="panel-subtitle">Applied whenever a new OpenCode instance starts</p>
+                  <h3 class="panel-title">{t("advancedSettings.environmentVariables.title")}</h3>
+                  <p class="panel-subtitle">{t("advancedSettings.environmentVariables.subtitle")}</p>
                 </div>
                 <div class="panel-body">
                   <EnvironmentVariablesEditor disabled={Boolean(props.isLoading)} />
@@ -47,7 +50,7 @@ const AdvancedSettingsModal: Component<AdvancedSettingsModalProps> = (props) =>
                 class="selector-button selector-button-secondary"
                 onClick={props.onClose}
               >
-                Close
+                {t("advancedSettings.actions.close")}
               </button>
             </div>
           </Dialog.Content>

packages/ui/src/components/agent-selector.tsx

@@ -3,7 +3,9 @@ import { For, Show, createEffect, createMemo } from "solid-js"
 import { agents, fetchAgents, sessions } from "../stores/sessions"
 import { ChevronDown } from "lucide-solid"
 import type { Agent } from "../types/session"
+import { useI18n } from "../lib/i18n"
 import { getLogger } from "../lib/logger"
+import Kbd from "./kbd"
 const log = getLogger("session")
 
 
@@ -15,6 +17,7 @@ interface AgentSelectorProps {
 }
 
 export default function AgentSelector(props: AgentSelectorProps) {
+  const { t } = useI18n()
   const instanceAgents = () => agents().get(props.instanceId) || []
 
   const session = createMemo(() => {
@@ -71,7 +74,7 @@ export default function AgentSelector(props: AgentSelectorProps) {
         options={availableAgents()}
         optionValue="name"
         optionTextValue="name"
-        placeholder="Select agent..."
+        placeholder={t("agentSelector.placeholder")}
         itemComponent={(itemProps) => (
           <Select.Item
             item={itemProps.item}
@@ -81,7 +84,7 @@ export default function AgentSelector(props: AgentSelectorProps) {
               <Select.ItemLabel class="selector-option-label flex items-center gap-2">
                 <span>{itemProps.item.rawValue.name}</span>
                 <Show when={itemProps.item.rawValue.mode === "subagent"}>
-                  <span class="neutral-badge">subagent</span>
+                  <span class="neutral-badge">{t("agentSelector.badge.subagent")}</span>
                 </Show>
               </Select.ItemLabel>
               <Show when={itemProps.item.rawValue.description}>
@@ -99,15 +102,20 @@ export default function AgentSelector(props: AgentSelectorProps) {
           data-agent-selector
           class="selector-trigger"
         >
-          <Select.Value<Agent>>
-            {(state) => (
-              <div class="selector-trigger-label">
-                <span class="selector-trigger-primary">
-                  Agent: {state.selectedOption()?.name ?? "None"}
-                </span>
-              </div>
-            )}
-          </Select.Value>
+          <div class="flex-1 min-w-0">
+            <Select.Value<Agent>>
+              {(state) => (
+                <div class="selector-trigger-label selector-trigger-label--stacked">
+                  <span class="selector-trigger-primary selector-trigger-primary--align-left">
+                    {t("agentSelector.trigger.primary", { agent: state.selectedOption()?.name ?? t("agentSelector.none") })}
+                  </span>
+                </div>
+              )}
+            </Select.Value>
+          </div>
+          <span class="selector-trigger-hint selector-trigger-hint--top" aria-hidden="true">
+            <Kbd shortcut="cmd+shift+a" />
+          </span>
           <Select.Icon class="selector-trigger-icon">
             <ChevronDown class="w-3 h-3" />
           </Select.Icon>

packages/ui/src/components/alert-dialog.tsx

@@ -2,28 +2,26 @@ import { Dialog } from "@kobalte/core/dialog"
 import { Component, Show, createEffect, createSignal } from "solid-js"
 import { alertDialogState, dismissAlertDialog } from "../stores/alerts"
 import type { AlertVariant, AlertDialogState } from "../stores/alerts"
+import { useI18n } from "../lib/i18n"
 
-const variantAccent: Record<AlertVariant, { badgeBg: string; badgeBorder: string; badgeText: string; symbol: string; fallbackTitle: string }> = {
+const variantAccent: Record<AlertVariant, { badgeBg: string; badgeBorder: string; badgeText: string; symbol: string }> = {
   info: {
     badgeBg: "var(--badge-neutral-bg)",
     badgeBorder: "var(--border-base)",
     badgeText: "var(--accent-primary)",
     symbol: "i",
-    fallbackTitle: "Heads up",
   },
   warning: {
     badgeBg: "rgba(255, 152, 0, 0.14)",
     badgeBorder: "var(--status-warning)",
     badgeText: "var(--status-warning)",
     symbol: "!",
-    fallbackTitle: "Please review",
   },
   error: {
     badgeBg: "var(--danger-soft-bg)",
     badgeBorder: "var(--status-error)",
     badgeText: "var(--status-error)",
     symbol: "!",
-    fallbackTitle: "Something went wrong",
   },
 }
 
@@ -60,14 +58,22 @@ function dismiss(confirmed: boolean, payload?: AlertDialogState | null, promptVa
 }
 
 const AlertDialog: Component = () => {
+  const { t } = useI18n()
   let primaryButtonRef: HTMLButtonElement | undefined
+  let promptInputRef: HTMLInputElement | undefined
 
   createEffect(() => {
-    if (alertDialogState()) {
-      queueMicrotask(() => {
-        primaryButtonRef?.focus()
-      })
-    }
+    const state = alertDialogState()
+    if (!state) return
+
+    queueMicrotask(() => {
+      if (state.type === "prompt") {
+        promptInputRef?.focus()
+        promptInputRef?.select()
+        return
+      }
+      primaryButtonRef?.focus()
+    })
   })
 
   return (
@@ -75,11 +81,25 @@ const AlertDialog: Component = () => {
       {(payload) => {
         const variant = payload.variant ?? "info"
         const accent = variantAccent[variant]
-        const title = payload.title || accent.fallbackTitle
+
+        const fallbackTitle =
+          variant === "warning"
+            ? t("alertDialog.fallbackTitle.warning")
+            : variant === "error"
+              ? t("alertDialog.fallbackTitle.error")
+              : t("alertDialog.fallbackTitle.info")
+
+        const title = payload.title || fallbackTitle
         const isConfirm = payload.type === "confirm"
         const isPrompt = payload.type === "prompt"
-        const confirmLabel = payload.confirmLabel || (isConfirm ? "Confirm" : isPrompt ? "Run" : "OK")
-        const cancelLabel = payload.cancelLabel || "Cancel"
+        const confirmLabel =
+          payload.confirmLabel ||
+          (isConfirm
+            ? t("alertDialog.actions.confirm")
+            : isPrompt
+              ? t("alertDialog.actions.run")
+              : t("alertDialog.actions.ok"))
+        const cancelLabel = payload.cancelLabel || t("alertDialog.actions.cancel")
 
         const [inputValue, setInputValue] = createSignal(payload.inputDefaultValue ?? "")
 
@@ -118,25 +138,31 @@ const AlertDialog: Component = () => {
                     </div>
                   </div>
 
-                   <Show when={isPrompt}>
-                     <div class="mt-4">
-                       <label class="text-xs font-medium text-muted uppercase tracking-wide">
-                         {payload.inputLabel || "Arguments"}
-                       </label>
-                       <input
-                         class="modal-search-input mt-2"
-                         value={inputValue()}
-                         placeholder={payload.inputPlaceholder || ""}
-                         onInput={(e) => setInputValue(e.currentTarget.value)}
-                         onKeyDown={(e) => {
-                           if (e.key === "Enter") {
-                             e.preventDefault()
-                             dismiss(true, payload, inputValue())
-                           }
-                         }}
-                       />
-                     </div>
-                   </Show>
+                    <Show when={isPrompt}>
+                      <div class="mt-4">
+                        <label class="text-sm font-medium text-secondary">
+                          {payload.inputLabel || t("alertDialog.prompt.inputLabel")}
+                        </label>
+                        <input
+                          ref={(el) => {
+                            promptInputRef = el
+                          }}
+                          class="form-input mt-2"
+                          value={inputValue()}
+                          placeholder={payload.inputPlaceholder || ""}
+                          autocapitalize="off"
+                          autocorrect="off"
+                          spellcheck={false}
+                          onInput={(e) => setInputValue(e.currentTarget.value)}
+                          onKeyDown={(e) => {
+                            if (e.key === "Enter") {
+                              e.preventDefault()
+                              dismiss(true, payload, inputValue())
+                            }
+                          }}
+                        />
+                      </div>
+                    </Show>
 
                    <div class="mt-6 flex justify-end gap-3">
                      {(isConfirm || isPrompt) && (

packages/ui/src/components/attachment-chip.tsx

@@ -1,5 +1,6 @@
 import { Component } from "solid-js"
 import type { Attachment } from "../types/attachment"
+import { useI18n } from "../lib/i18n"
 
 interface AttachmentChipProps {
   attachment: Attachment
@@ -7,6 +8,7 @@ interface AttachmentChipProps {
 }
 
 const AttachmentChip: Component<AttachmentChipProps> = (props) => {
+  const { t } = useI18n()
   return (
     <div
       class="attachment-chip"
@@ -16,7 +18,7 @@ const AttachmentChip: Component<AttachmentChipProps> = (props) => {
       <button
         onClick={props.onRemove}
         class="attachment-remove"
-        aria-label="Remove attachment"
+        aria-label={t("attachmentChip.removeAriaLabel")}
       >
         ×
       </button>

packages/ui/src/components/background-process-output-dialog.tsx

@@ -3,6 +3,7 @@ import { Show, createEffect, createSignal, onCleanup } from "solid-js"
 import type { BackgroundProcess } from "../../../server/src/api-types"
 import { buildBackgroundProcessStreamUrl, serverApi } from "../lib/api-client"
 import { createAnsiStreamRenderer, hasAnsi } from "../lib/ansi"
+import { useI18n } from "../lib/i18n"
 
 interface BackgroundProcessOutputDialogProps {
   open: boolean
@@ -12,6 +13,7 @@ interface BackgroundProcessOutputDialogProps {
 }
 
 export function BackgroundProcessOutputDialog(props: BackgroundProcessOutputDialogProps) {
+  const { t } = useI18n()
   const [output, setOutput] = createSignal("")
   const [outputHtml, setOutputHtml] = createSignal("")
   const [ansiEnabled, setAnsiEnabled] = createSignal(false)
@@ -67,7 +69,7 @@ export function BackgroundProcessOutputDialog(props: BackgroundProcessOutputDial
       })
       .catch(() => {
         if (!active) return
-        setRawOutput("Failed to load output.")
+        setRawOutput(t("backgroundProcessOutputDialog.loadErrorFallback"))
         setAnsiEnabled(false)
         setOutputHtml("")
       })
@@ -121,7 +123,7 @@ export function BackgroundProcessOutputDialog(props: BackgroundProcessOutputDial
           <Dialog.Content class="modal-surface w-full max-w-5xl max-h-[90vh] flex flex-col overflow-hidden">
             <div class="flex items-start justify-between px-6 py-4 border-b border-base gap-4">
               <div class="flex-1 min-w-0">
-                <Dialog.Title class="text-lg font-semibold text-primary">Background Output</Dialog.Title>
+                <Dialog.Title class="text-lg font-semibold text-primary">{t("backgroundProcessOutputDialog.title")}</Dialog.Title>
                 <Show when={props.process}>
                   <span class="text-xs text-secondary block">
                     {props.process?.title} · {props.process?.id}
@@ -133,16 +135,16 @@ export function BackgroundProcessOutputDialog(props: BackgroundProcessOutputDial
               </div>
 
               <button type="button" class="button-tertiary flex-shrink-0" onClick={props.onClose}>
-                Close
+                {t("backgroundProcessOutputDialog.actions.close")}
               </button>
             </div>
             <div class="flex-1 overflow-auto p-6">
               <Show when={loading()}>
-                <p class="text-xs text-secondary">Loading output...</p>
+                <p class="text-xs text-secondary">{t("backgroundProcessOutputDialog.loading")}</p>
               </Show>
               <Show when={!loading()}>
                 <Show when={truncated()}>
-                  <p class="text-xs text-secondary mb-2">Output truncated for display.</p>
+                  <p class="text-xs text-secondary mb-2">{t("backgroundProcessOutputDialog.truncatedNotice")}</p>
                 </Show>
                 <Show
                   when={ansiEnabled()}

packages/ui/src/components/brand-icons.tsx

@@ -0,0 +1,38 @@
+import type { Component } from "solid-js"
+
+type BrandIconProps = {
+  class?: string
+  title?: string
+}
+
+export const GitHubMarkIcon: Component<BrandIconProps> = (props) => (
+  <svg
+    viewBox="0 0 98 96"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden={props.title ? undefined : "true"}
+    role={props.title ? "img" : "presentation"}
+    class={props.class}
+  >
+    {props.title ? <title>{props.title}</title> : null}
+    <path
+      fill="currentColor"
+      d="M41.4395 69.3848C28.8066 67.8535 19.9062 58.7617 19.9062 46.9902C19.9062 42.2051 21.6289 37.0371 24.5 33.5918C23.2559 30.4336 23.4473 23.7344 24.8828 20.959C28.7109 20.4805 33.8789 22.4902 36.9414 25.2656C40.5781 24.1172 44.4062 23.543 49.0957 23.543C53.7852 23.543 57.6133 24.1172 61.0586 25.1699C64.0254 22.4902 69.2891 20.4805 73.1172 20.959C74.457 23.543 74.6484 30.2422 73.4043 33.4961C76.4668 37.1328 78.0937 42.0137 78.0937 46.9902C78.0937 58.7617 69.1934 67.6621 56.3691 69.2891C59.623 71.3945 61.8242 75.9883 61.8242 81.252L61.8242 91.2051C61.8242 94.0762 64.2168 95.7031 67.0879 94.5547C84.4102 87.9512 98 70.6289 98 49.1914C98 22.1074 75.9883 0 48.9043 0C21.8203 0 0 22.1074 0 49.1914C0 70.4375 13.4941 88.0469 31.6777 94.6504C34.2617 95.6074 36.75 93.8848 36.75 91.3008L36.75 83.6445C35.4102 84.2188 33.6875 84.6016 32.1562 84.6016C25.8398 84.6016 22.1074 81.1563 19.4277 74.7441C18.375 72.1602 17.2266 70.6289 15.0254 70.3418C13.877 70.2461 13.4941 69.7676 13.4941 69.1934C13.4941 68.0449 15.4082 67.1836 17.3223 67.1836C20.0977 67.1836 22.4902 68.9063 24.9785 72.4473C26.8926 75.2227 28.9023 76.4668 31.2949 76.4668C33.6875 76.4668 35.2187 75.6055 37.4199 73.4043C39.0469 71.7773 40.291 70.3418 41.4395 69.3848Z"
+    />
+  </svg>
+)
+
+export const DiscordSymbolIcon: Component<BrandIconProps> = (props) => (
+  <svg
+    viewBox="0 0 64 48"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden={props.title ? undefined : "true"}
+    role={props.title ? "img" : "presentation"}
+    class={props.class}
+  >
+    {props.title ? <title>{props.title}</title> : null}
+    <path
+      fill="currentColor"
+      d="M40.575 0C39.9562 1.09866 39.4006 2.2352 38.8954 3.397C34.0967 2.67719 29.2096 2.67719 24.3982 3.397C23.9057 2.2352 23.3374 1.09866 22.7186 0C18.2104 0.770324 13.8157 2.12155 9.64839 4.02841C1.38951 16.2652 -0.845688 28.1863 0.265599 39.9432C5.10222 43.517 10.5197 46.2447 16.2909 47.9874C17.5916 46.2447 18.7407 44.3883 19.7257 42.4562C17.8568 41.7616 16.0509 40.8903 14.3208 39.88C14.7755 39.5517 15.2175 39.2107 15.6468 38.8824C25.7873 43.6559 37.5316 43.6559 47.6847 38.8824C48.1141 39.236 48.5561 39.577 49.0107 39.88C47.2806 40.9029 45.4748 41.7616 43.5931 42.4688C44.5781 44.4009 45.7273 46.2573 47.028 48C52.7991 46.2573 58.2167 43.5422 63.0533 39.9684C64.3666 26.3299 60.8055 14.5099 53.6452 4.04104C49.4905 2.13418 45.0959 0.782952 40.5876 0.0252565L40.575 0ZM21.1401 32.7072C18.0209 32.7072 15.4321 29.8785 15.4321 26.3804C15.4321 22.8824 17.9199 20.041 21.1275 20.041C24.3351 20.041 26.886 22.895 26.8354 26.3804C26.7849 29.8658 24.3224 32.7072 21.1401 32.7072ZM42.1788 32.7072C39.047 32.7072 36.4834 29.8785 36.4834 26.3804C36.4834 22.8824 38.9712 20.041 42.1788 20.041C45.3864 20.041 47.9246 22.895 47.8741 26.3804C47.8236 29.8658 45.3611 32.7072 42.1788 32.7072Z"
+    />
+  </svg>
+)

packages/ui/src/components/code-block-inline.tsx

@@ -3,6 +3,7 @@ import type { Highlighter } from "shiki/bundle/full"
 import { useTheme } from "../lib/theme"
 import { getSharedHighlighter, escapeHtml } from "../lib/markdown"
 import { copyToClipboard } from "../lib/clipboard"
+import { useI18n } from "../lib/i18n"
 
 const inlineLoadedLanguages = new Set<string>()
 
@@ -15,6 +16,7 @@ interface CodeBlockInlineProps {
 }
 
 export function CodeBlockInline(props: CodeBlockInlineProps) {
+  const { t } = useI18n()
   const { isDark } = useTheme()
   const [html, setHtml] = createSignal("")
   const [copied, setCopied] = createSignal(false)
@@ -97,8 +99,8 @@ export function CodeBlockInline(props: CodeBlockInlineProps) {
               <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
             </svg>
             <span class="copy-text">
-              <Show when={copied()} fallback="Copy">
-                Copied!
+              <Show when={copied()} fallback={t("codeBlockInline.actions.copy")}>
+                {t("codeBlockInline.actions.copied")}
               </Show>
             </span>
           </button>

packages/ui/src/components/command-palette.tsx

@@ -1,7 +1,8 @@
 import { Component, createSignal, For, Show, createEffect, createMemo } from "solid-js"
 import { Dialog } from "@kobalte/core/dialog"
-import type { Command } from "../lib/commands"
+import { resolveResolvable, type Command } from "../lib/commands"
 import Kbd from "./kbd"
+import { useI18n } from "../lib/i18n"
 
 interface CommandPaletteProps {
   open: boolean
@@ -24,6 +25,7 @@ function buildShortcutString(shortcut: Command["shortcut"]): string {
 }
 
 const CommandPalette: Component<CommandPaletteProps> = (props) => {
+  const { t } = useI18n()
   const [query, setQuery] = createSignal("")
   const [selectedCommandId, setSelectedCommandId] = createSignal<string | null>(null)
   const [isPointerSelecting, setIsPointerSelecting] = createSignal(false)
@@ -32,6 +34,27 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
 
   const categoryOrder = ["Custom Commands", "Instance", "Session", "Agent & Model", "Input & Focus", "System", "Other"] as const
 
+  const categoryLabel = (category: string) => {
+    switch (category) {
+      case "Custom Commands":
+        return t("commandPalette.category.customCommands")
+      case "Instance":
+        return t("commandPalette.category.instance")
+      case "Session":
+        return t("commandPalette.category.session")
+      case "Agent & Model":
+        return t("commandPalette.category.agentModel")
+      case "Input & Focus":
+        return t("commandPalette.category.inputFocus")
+      case "System":
+        return t("commandPalette.category.system")
+      case "Other":
+        return t("commandPalette.category.other")
+      default:
+        return category
+    }
+  }
+
   type CommandGroup = { category: string; commands: Command[]; startIndex: number }
   type ProcessedCommands = { groups: CommandGroup[]; ordered: Command[] }
 
@@ -41,18 +64,21 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
 
     const filtered = q
       ? source.filter((cmd) => {
-          const label = typeof cmd.label === "function" ? cmd.label() : cmd.label
+          const label = resolveResolvable(cmd.label)
+          const description = resolveResolvable(cmd.description)
+          const keywords = cmd.keywords ? resolveResolvable(cmd.keywords) : undefined
+          const category = cmd.category ? resolveResolvable(cmd.category) : undefined
           const labelMatch = label.toLowerCase().includes(q)
-          const descMatch = cmd.description.toLowerCase().includes(q)
-          const keywordMatch = cmd.keywords?.some((k) => k.toLowerCase().includes(q))
-          const categoryMatch = cmd.category?.toLowerCase().includes(q)
+          const descMatch = description.toLowerCase().includes(q)
+          const keywordMatch = keywords?.some((k) => k.toLowerCase().includes(q))
+          const categoryMatch = category?.toLowerCase().includes(q)
           return labelMatch || descMatch || keywordMatch || categoryMatch
         })
       : source
 
     const groupsMap = new Map<string, Command[]>()
     for (const cmd of filtered) {
-      const category = cmd.category || "Other"
+      const category = (cmd.category ? resolveResolvable(cmd.category) : undefined) || "Other"
       const list = groupsMap.get(category)
       if (list) {
         list.push(cmd)
@@ -189,12 +215,12 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
       <Dialog.Portal>
         <Dialog.Overlay class="modal-overlay" />
         <div class="fixed inset-0 z-50 flex items-start justify-center pt-[20vh]">
-          <Dialog.Content
-            class="modal-surface w-full max-w-2xl max-h-[60vh]"
-            onKeyDown={handleKeyDown}
-          >
-            <Dialog.Title class="sr-only">Command Palette</Dialog.Title>
-            <Dialog.Description class="sr-only">Search and execute commands</Dialog.Description>
+            <Dialog.Content
+              class="modal-surface w-full max-w-2xl max-h-[60vh]"
+              onKeyDown={handleKeyDown}
+            >
+              <Dialog.Title class="sr-only">{t("commandPalette.title")}</Dialog.Title>
+              <Dialog.Description class="sr-only">{t("commandPalette.description")}</Dialog.Description>
 
             <div class="modal-search-container">
               <div class="flex items-center gap-3">
@@ -214,7 +240,7 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
                     setQuery(e.currentTarget.value)
                     setSelectedCommandId(null)
                   }}
-                  placeholder="Type a command or search..."
+                  placeholder={t("commandPalette.searchPlaceholder")}
                   class="modal-search-input"
                 />
               </div>
@@ -228,13 +254,13 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
             >
               <Show
                 when={orderedCommands().length > 0}
-                fallback={<div class="modal-empty-state">No commands found for "{query()}"</div>}
+                fallback={<div class="modal-empty-state">{t("commandPalette.empty", { query: query() })}</div>}
               >
                 <For each={groupedCommandList()}>
                   {(group) => (
                     <div class="py-2">
                       <div class="modal-section-header">
-                        {group.category}
+                        {categoryLabel(group.category)}
                       </div>
                       <For each={group.commands}>
                         {(command, localIndex) => {
@@ -257,10 +283,10 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
                             >
                               <div class="flex-1 min-w-0">
                                 <div class="modal-item-label">
-                                  {typeof command.label === "function" ? command.label() : command.label}
+                                  {resolveResolvable(command.label)}
                                 </div>
                                 <div class="modal-item-description">
-                                  {command.description}
+                                  {resolveResolvable(command.description)}
                                 </div>
                               </div>
                               <Show when={command.shortcut}>

packages/ui/src/components/directory-browser-dialog.tsx

@@ -1,8 +1,10 @@
 import { Component, Show, For, createSignal, createMemo, createEffect, onCleanup } from "solid-js"
-import { ArrowUpLeft, Folder as FolderIcon, Loader2, X } from "lucide-solid"
+import { ArrowUpLeft, Folder as FolderIcon, FolderPlus, Loader2, X } from "lucide-solid"
 import type { FileSystemEntry, FileSystemListingMetadata } from "../../../server/src/api-types"
 import { WINDOWS_DRIVES_ROOT } from "../../../server/src/api-types"
 import { serverApi } from "../lib/api-client"
+import { showAlertDialog, showPromptDialog } from "../stores/alerts"
+import { useI18n } from "../lib/i18n"
 
 function normalizePathKey(input?: string | null) {
   if (!input || input === "." || input === "./") {
@@ -61,9 +63,11 @@ type FolderRow =
   | { type: "folder"; entry: FileSystemEntry }
 
 const DirectoryBrowserDialog: Component<DirectoryBrowserDialogProps> = (props) => {
+  const { t } = useI18n()
   const [rootPath, setRootPath] = createSignal("")
   const [loading, setLoading] = createSignal(false)
   const [error, setError] = createSignal<string | null>(null)
+  const [creatingFolder, setCreatingFolder] = createSignal(false)
   const [directoryChildren, setDirectoryChildren] = createSignal<Map<string, FileSystemEntry[]>>(new Map())
   const [loadingPaths, setLoadingPaths] = createSignal<Set<string>>(new Set())
   const [currentPathKey, setCurrentPathKey] = createSignal<string | null>(null)
@@ -108,7 +112,7 @@ const DirectoryBrowserDialog: Component<DirectoryBrowserDialogProps> = (props) =
       const metadata = await loadDirectory()
       applyMetadata(metadata)
     } catch (err) {
-      const message = err instanceof Error ? err.message : "Unable to load filesystem"
+      const message = err instanceof Error ? err.message : t("directoryBrowser.load.errorFallback")
       setError(message)
     } finally {
       setLoading(false)
@@ -198,7 +202,7 @@ const DirectoryBrowserDialog: Component<DirectoryBrowserDialogProps> = (props) =
       const metadata = await loadDirectory(path)
       applyMetadata(metadata)
     } catch (err) {
-      const message = err instanceof Error ? err.message : "Unable to load filesystem"
+      const message = err instanceof Error ? err.message : t("directoryBrowser.load.errorFallback")
       setError(message)
     }
   }
@@ -256,6 +260,52 @@ const DirectoryBrowserDialog: Component<DirectoryBrowserDialogProps> = (props) =
     props.onSelect(absolutePath)
   }
 
+  async function handleCreateFolder() {
+    if (creatingFolder()) return
+    const metadata = currentMetadata()
+    if (!metadata || metadata.pathKind === "drives") {
+      return
+    }
+
+    const name =
+      (await showPromptDialog(t("directoryBrowser.createFolder.promptMessage"), {
+        title: t("directoryBrowser.createFolder.title"),
+        inputLabel: t("directoryBrowser.createFolder.inputLabel"),
+        inputPlaceholder: t("directoryBrowser.createFolder.inputPlaceholder"),
+        confirmLabel: t("directoryBrowser.createFolder.confirmLabel"),
+        cancelLabel: t("directoryBrowser.createFolder.cancelLabel"),
+      }))?.trim() ?? ""
+    if (!name) return
+
+    if (name === "." || name === ".." || name.startsWith("~") || name.includes("/") || name.includes("\\")) {
+      showAlertDialog(t("directoryBrowser.createFolder.invalidNameMessage"), {
+        variant: "warning",
+        detail: t("directoryBrowser.createFolder.invalidNameDetail"),
+      })
+      return
+    }
+
+    setCreatingFolder(true)
+    try {
+      const parentKey = normalizePathKey(metadata.currentPath)
+      metadataCache.delete(parentKey)
+      inFlightRequests.delete(parentKey)
+      setDirectoryChildren((prev) => {
+        const next = new Map(prev)
+        next.delete(parentKey)
+        return next
+      })
+
+      const created = await serverApi.createFileSystemFolder(metadata.currentPath, name)
+      await navigateTo(created.path)
+    } catch (err) {
+      const message = err instanceof Error ? err.message : t("directoryBrowser.createFolder.errorFallback")
+      showAlertDialog(message, { variant: "error", title: t("directoryBrowser.createFolder.errorFallback") })
+    } finally {
+      setCreatingFolder(false)
+    }
+  }
+
   function isPathLoading(path: string) {
     return loadingPaths().has(normalizePathKey(path))
   }
@@ -275,10 +325,10 @@ const DirectoryBrowserDialog: Component<DirectoryBrowserDialogProps> = (props) =
               <div class="directory-browser-heading">
                 <h3 class="directory-browser-title">{props.title}</h3>
                 <p class="directory-browser-description">
-                  {props.description || "Browse folders under the configured workspace root."}
+                  {props.description || t("directoryBrowser.defaultDescription")}
                 </p>
               </div>
-              <button type="button" class="directory-browser-close" aria-label="Close" onClick={props.onClose}>
+              <button type="button" class="directory-browser-close" aria-label={t("directoryBrowser.close")} onClick={props.onClose}>
                 <X class="w-5 h-5" />
               </button>
             </div>
@@ -287,22 +337,35 @@ const DirectoryBrowserDialog: Component<DirectoryBrowserDialogProps> = (props) =
               <Show when={rootPath()}>
                 <div class="directory-browser-current">
                   <div class="directory-browser-current-meta">
-                    <span class="directory-browser-current-label">Current folder</span>
+                    <span class="directory-browser-current-label">{t("directoryBrowser.currentFolder")}</span>
                     <span class="directory-browser-current-path">{currentAbsolutePath()}</span>
                   </div>
-                  <button
-                    type="button"
-                    class="selector-button selector-button-secondary directory-browser-select directory-browser-current-select"
-                    disabled={!canSelectCurrent()}
-                    onClick={() => {
-                      const absolute = currentAbsolutePath()
-                      if (absolute) {
-                        props.onSelect(absolute)
-                      }
-                    }}
-                  >
-                    Select Current
-                  </button>
+                  <div class="directory-browser-current-actions">
+                    <button
+                      type="button"
+                      class="selector-button selector-button-secondary directory-browser-select directory-browser-current-select"
+                      disabled={!canSelectCurrent() || creatingFolder()}
+                      onClick={() => {
+                        const absolute = currentAbsolutePath()
+                        if (absolute) {
+                          props.onSelect(absolute)
+                        }
+                      }}
+                    >
+                      {t("directoryBrowser.selectCurrent")}
+                    </button>
+                    <button
+                      type="button"
+                      class="selector-button selector-button-secondary directory-browser-select"
+                      disabled={!canSelectCurrent() || creatingFolder()}
+                      onClick={() => void handleCreateFolder()}
+                    >
+                      <span class="inline-flex items-center gap-2">
+                        <FolderPlus class="w-4 h-4" />
+                        {creatingFolder() ? t("directoryBrowser.creating") : t("directoryBrowser.newFolder")}
+                      </span>
+                    </button>
+                  </div>
                 </div>
               </Show>
               <Show
@@ -312,7 +375,7 @@ const DirectoryBrowserDialog: Component<DirectoryBrowserDialogProps> = (props) =
                     <Show when={loading()} fallback={<span class="text-red-500">{error()}</span>}>
                       <div class="directory-browser-loading">
                         <Loader2 class="w-5 h-5 animate-spin" />
-                        <span>Loading folders…</span>
+                        <span>{t("directoryBrowser.loadingFolders")}</span>
                       </div>
                     </Show>
                   </div>
@@ -320,13 +383,13 @@ const DirectoryBrowserDialog: Component<DirectoryBrowserDialogProps> = (props) =
               >
                 <Show
                   when={folderRows().length > 0}
-                  fallback={<div class="panel-empty-state flex-1">No folders available.</div>}
+                  fallback={<div class="panel-empty-state flex-1">{t("directoryBrowser.noFolders")}</div>}
                 >
                   <div class="panel-list panel-list--fill flex-1 min-h-0 overflow-auto directory-browser-list" role="listbox">
                     <For each={folderRows()}>
                       {(item) => {
                         const isFolder = item.type === "folder"
-                        const label = isFolder ? item.entry.name || item.entry.path : "Up one level"
+                        const label = isFolder ? item.entry.name || item.entry.path : t("directoryBrowser.upOneLevel")
                         const navigate = () => (isFolder ? handleNavigateTo(item.entry.path) : handleNavigateUp())
                         return (
                           <div class="panel-list-item" role="option">
@@ -353,7 +416,7 @@ const DirectoryBrowserDialog: Component<DirectoryBrowserDialogProps> = (props) =
                                     handleEntrySelect(item.entry)
                                   }}
                                 >
-                                  Select
+                                  {t("directoryBrowser.select")}
                                 </button>
                               ) : null}
                             </div>

packages/ui/src/components/empty-state.tsx

@@ -1,5 +1,6 @@
 import { Component } from "solid-js"
 import { Loader2 } from "lucide-solid"
+import { useI18n } from "../lib/i18n"
 
 const codeNomadIcon = new URL("../images/CodeNomad-Icon.png", import.meta.url).href
 
@@ -9,15 +10,19 @@ interface EmptyStateProps {
 }
 
 const EmptyState: Component<EmptyStateProps> = (props) => {
+  const { t } = useI18n()
+  const modifier = typeof navigator !== "undefined" && navigator.platform.includes("Mac") ? "Cmd" : "Ctrl"
+  const shortcut = `${modifier}+N`
+
   return (
     <div class="flex h-full w-full items-center justify-center bg-surface-secondary">
       <div class="max-w-[500px] px-8 py-12 text-center">
         <div class="mb-8 flex justify-center">
-          <img src={codeNomadIcon} alt="CodeNomad logo" class="h-24 w-auto" loading="lazy" />
+          <img src={codeNomadIcon} alt={t("emptyState.logoAlt")} class="h-24 w-auto" loading="lazy" />
         </div>
 
-        <h1 class="mb-3 text-3xl font-semibold text-primary">CodeNomad</h1>
-        <p class="mb-8 text-base text-secondary">Select a folder to start coding with AI</p>
+        <h1 class="mb-3 text-3xl font-semibold text-primary">{t("emptyState.brandTitle")}</h1>
+        <p class="mb-8 text-base text-secondary">{t("emptyState.tagline")}</p>
 
 
         <button
@@ -28,20 +33,20 @@ const EmptyState: Component<EmptyStateProps> = (props) => {
           {props.isLoading ? (
             <>
               <Loader2 class="h-4 w-4 animate-spin" />
-              Selecting...
+              {t("emptyState.actions.selecting")}
             </>
           ) : (
-            "Select Folder"
+            t("emptyState.actions.selectFolder")
           )}
         </button>
 
         <p class="text-sm text-muted">
-          Keyboard shortcut: {navigator.platform.includes("Mac") ? "Cmd" : "Ctrl"}+N
+          {t("emptyState.keyboardShortcut", { shortcut })}
         </p>
 
         <div class="mt-6 space-y-1 text-sm text-muted">
-          <p>Examples: ~/projects/my-app</p>
-          <p>You can have multiple instances of the same folder</p>
+          <p>{t("emptyState.examples", { example: "~/projects/my-app" })}</p>
+          <p>{t("emptyState.multipleInstances")}</p>
         </div>
       </div>
     </div>

packages/ui/src/components/environment-variables-editor.tsx

@@ -1,12 +1,14 @@
 import { Component, createSignal, For, Show } from "solid-js"
 import { Plus, Trash2, Key, Globe } from "lucide-solid"
 import { useConfig } from "../stores/preferences"
+import { useI18n } from "../lib/i18n"
 
 interface EnvironmentVariablesEditorProps {
   disabled?: boolean
 }
 
 const EnvironmentVariablesEditor: Component<EnvironmentVariablesEditorProps> = (props) => {
+  const { t } = useI18n()
   const {
     preferences,
     addEnvironmentVariable,
@@ -54,9 +56,11 @@ const EnvironmentVariablesEditor: Component<EnvironmentVariablesEditorProps> = (
     <div class="space-y-3">
       <div class="flex items-center gap-2 mb-3">
         <Globe class="w-4 h-4 icon-muted" />
-        <span class="text-sm font-medium text-secondary">Environment Variables</span>
+        <span class="text-sm font-medium text-secondary">{t("envEditor.title")}</span>
         <span class="text-xs text-muted">
-          ({entries().length} variable{entries().length !== 1 ? "s" : ""})
+          {entries().length === 1
+            ? t("envEditor.count.one", { count: entries().length })
+            : t("envEditor.count.other", { count: entries().length })}
         </span>
       </div>
 
@@ -73,8 +77,8 @@ const EnvironmentVariablesEditor: Component<EnvironmentVariablesEditorProps> = (
                     value={key}
                     disabled={props.disabled}
                     class="flex-1 px-2.5 py-1.5 text-sm bg-surface-secondary border border-base rounded text-muted cursor-not-allowed"
-                    placeholder="Variable name"
-                    title="Variable name (read-only)"
+                    placeholder={t("envEditor.fields.name.placeholder")}
+                    title={t("envEditor.fields.name.readOnlyTitle")}
                   />
                   <input
                     type="text"
@@ -82,14 +86,14 @@ const EnvironmentVariablesEditor: Component<EnvironmentVariablesEditorProps> = (
                     disabled={props.disabled}
                     onInput={(e) => handleUpdateVariable(key, e.currentTarget.value)}
                     class="flex-1 px-2.5 py-1.5 text-sm bg-surface-base border border-base rounded text-primary focus-ring-accent disabled:opacity-50 disabled:cursor-not-allowed"
-                    placeholder="Variable value"
+                    placeholder={t("envEditor.fields.value.placeholder")}
                   />
                 </div>
                 <button
                   onClick={() => handleRemoveVariable(key)}
                   disabled={props.disabled}
                   class="p-1.5 icon-muted icon-danger-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                  title="Remove variable"
+                  title={t("envEditor.actions.remove.title")}
                 >
                   <Trash2 class="w-3.5 h-3.5" />
                 </button>
@@ -110,7 +114,7 @@ const EnvironmentVariablesEditor: Component<EnvironmentVariablesEditorProps> = (
             onKeyPress={handleKeyPress}
             disabled={props.disabled}
             class="flex-1 px-2.5 py-1.5 text-sm bg-surface-base border border-base rounded text-primary focus-ring-accent disabled:opacity-50 disabled:cursor-not-allowed"
-            placeholder="Variable name"
+            placeholder={t("envEditor.fields.name.placeholder")}
           />
           <input
             type="text"
@@ -119,14 +123,14 @@ const EnvironmentVariablesEditor: Component<EnvironmentVariablesEditorProps> = (
             onKeyPress={handleKeyPress}
             disabled={props.disabled}
             class="flex-1 px-2.5 py-1.5 text-sm bg-surface-base border border-base rounded text-primary focus-ring-accent disabled:opacity-50 disabled:cursor-not-allowed"
-            placeholder="Variable value"
+            placeholder={t("envEditor.fields.value.placeholder")}
           />
         </div>
         <button
           onClick={handleAddVariable}
           disabled={props.disabled || !newKey().trim()}
           class="p-1.5 icon-muted icon-accent-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-          title="Add variable"
+          title={t("envEditor.actions.add.title")}
         >
           <Plus class="w-3.5 h-3.5" />
         </button>
@@ -134,12 +138,12 @@ const EnvironmentVariablesEditor: Component<EnvironmentVariablesEditorProps> = (
 
       <Show when={entries().length === 0}>
         <div class="text-xs text-muted text-center py-2">
-          No environment variables configured. Add variables above to customize the OpenCode environment.
+          {t("envEditor.empty")}
         </div>
       </Show>
 
       <div class="text-xs text-muted mt-2">
-        These variables will be available in the OpenCode environment when starting instances.
+        {t("envEditor.help")}
       </div>
     </div>
   )

packages/ui/src/components/expand-button.tsx

@@ -1,5 +1,6 @@
 import { Show } from "solid-js"
 import { Maximize2, Minimize2 } from "lucide-solid"
+import { useI18n } from "../lib/i18n"
 
 interface ExpandButtonProps {
   expandState: () => "normal" | "expanded"
@@ -7,6 +8,8 @@ interface ExpandButtonProps {
 }
 
 export default function ExpandButton(props: ExpandButtonProps) {
+  const { t } = useI18n()
+
   function handleClick() {
     const current = props.expandState()
     props.onToggleExpand(current === "normal" ? "expanded" : "normal")
@@ -17,7 +20,7 @@ export default function ExpandButton(props: ExpandButtonProps) {
       type="button"
       class="prompt-expand-button"
       onClick={handleClick}
-      aria-label="Toggle chat input height"
+      aria-label={t("expandButton.toggleAriaLabel")}
     >
       <Show
         when={props.expandState() === "normal"}

packages/ui/src/components/filesystem-browser-dialog.tsx

@@ -3,6 +3,7 @@ import { Folder as FolderIcon, File as FileIcon, Loader2, Search, X, ArrowUpLeft
 import type { FileSystemEntry, FileSystemListingMetadata } from "../../../server/src/api-types"
 import { serverApi } from "../lib/api-client"
 import { getLogger } from "../lib/logger"
+import { useI18n } from "../lib/i18n"
 const log = getLogger("actions")
 
 
@@ -49,6 +50,7 @@ interface FileSystemBrowserDialogProps {
 type FolderRow = { type: "up"; path: string } | { type: "entry"; entry: FileSystemEntry }
 
 const FileSystemBrowserDialog: Component<FileSystemBrowserDialogProps> = (props) => {
+  const { t } = useI18n()
   const [rootPath, setRootPath] = createSignal("")
   const [entries, setEntries] = createSignal<FileSystemEntry[]>([])
   const [currentMetadata, setCurrentMetadata] = createSignal<FileSystemListingMetadata | null>(null)
@@ -135,7 +137,7 @@ const FileSystemBrowserDialog: Component<FileSystemBrowserDialogProps> = (props)
       setRootPath(metadata.rootPath)
       setEntries(directoryCache.get(normalizeEntryPath(metadata.currentPath)) ?? [])
     } catch (err) {
-      const message = err instanceof Error ? err.message : "Unable to load filesystem"
+      const message = err instanceof Error ? err.message : t("filesystemBrowser.errors.loadFilesystemFallback")
       setError(message)
     }
   }
@@ -143,10 +145,10 @@ const FileSystemBrowserDialog: Component<FileSystemBrowserDialogProps> = (props)
   function describeLoadingPath() {
     const path = loadingPath()
     if (!path) {
-      return "filesystem"
+      return t("filesystemBrowser.loading.filesystem")
     }
     if (path === ".") {
-      return rootPath() || "workspace root"
+      return rootPath() || t("filesystemBrowser.loading.workspaceRoot")
     }
     return resolveAbsolutePath(rootPath(), path)
   }
@@ -176,7 +178,7 @@ const FileSystemBrowserDialog: Component<FileSystemBrowserDialogProps> = (props)
   function handleNavigateTo(path: string) {
     void fetchDirectory(path, true).catch((err) => {
       log.error("Failed to open directory", err)
-      setError(err instanceof Error ? err.message : "Unable to open directory")
+      setError(err instanceof Error ? err.message : t("filesystemBrowser.errors.openDirectoryFallback"))
     })
   }
 
@@ -277,19 +279,21 @@ const FileSystemBrowserDialog: Component<FileSystemBrowserDialogProps> = (props)
             <div class="panel-header flex items-start justify-between gap-4">
               <div>
                 <h3 class="panel-title">{props.title}</h3>
-                <p class="panel-subtitle">{props.description || "Search for a path under the configured workspace root."}</p>
+                <p class="panel-subtitle">{props.description || t("filesystemBrowser.descriptionFallback")}</p>
                 <Show when={rootPath()}>
-                  <p class="text-xs text-muted mt-1 font-mono break-all">Root: {rootPath()}</p>
+                  <p class="text-xs text-muted mt-1 font-mono break-all">
+                    {t("filesystemBrowser.rootLabel", { root: rootPath() })}
+                  </p>
                 </Show>
               </div>
               <button type="button" class="selector-button selector-button-secondary" onClick={props.onClose}>
                 <X class="w-4 h-4" />
-                Close
+                {t("filesystemBrowser.actions.close")}
               </button>
             </div>
 
             <div class="panel-body">
-              <label class="w-full text-sm text-secondary mb-2 block">Filter</label>
+              <label class="w-full text-sm text-secondary mb-2 block">{t("filesystemBrowser.filterLabel")}</label>
               <div class="selector-input-group">
                 <div class="flex items-center gap-2 px-3 text-muted">
                   <Search class="w-4 h-4" />
@@ -301,7 +305,11 @@ const FileSystemBrowserDialog: Component<FileSystemBrowserDialogProps> = (props)
                   type="text"
                   value={searchQuery()}
                   onInput={(event) => setSearchQuery(event.currentTarget.value)}
-                  placeholder={props.mode === "directories" ? "Search for folders" : "Search for files"}
+                  placeholder={
+                    props.mode === "directories"
+                      ? t("filesystemBrowser.search.placeholder.directories")
+                      : t("filesystemBrowser.search.placeholder.files")
+                  }
                   class="selector-input"
                 />
               </div>
@@ -311,7 +319,7 @@ const FileSystemBrowserDialog: Component<FileSystemBrowserDialogProps> = (props)
               <div class="px-4 pb-2">
                 <div class="flex items-center justify-between gap-3 rounded-md border border-border-subtle px-4 py-3">
                   <div>
-                    <p class="text-xs text-secondary uppercase tracking-wide">Current folder</p>
+                    <p class="text-xs text-secondary uppercase tracking-wide">{t("filesystemBrowser.currentFolder.label")}</p>
                     <p class="text-sm font-mono text-primary break-all">{currentAbsolutePath()}</p>
                   </div>
                   <button
@@ -319,7 +327,7 @@ const FileSystemBrowserDialog: Component<FileSystemBrowserDialogProps> = (props)
                     class="selector-button selector-button-secondary whitespace-nowrap"
                     onClick={() => props.onSelect(currentAbsolutePath())}
                   >
-                    Select Current
+                    {t("filesystemBrowser.currentFolder.selectCurrent")}
                   </button>
                 </div>
               </div>
@@ -336,7 +344,7 @@ const FileSystemBrowserDialog: Component<FileSystemBrowserDialogProps> = (props)
                     >
                       <div class="flex items-center gap-2">
                         <Loader2 class="w-4 h-4 animate-spin" />
-                        <span>Loading {describeLoadingPath()}…</span>
+                        <span>{t("filesystemBrowser.loading.loadingWithPath", { path: describeLoadingPath() })}</span>
                       </div>
                     </Show>
                   </div>
@@ -345,16 +353,16 @@ const FileSystemBrowserDialog: Component<FileSystemBrowserDialogProps> = (props)
                 <Show when={loadingPath()}>
                   <div class="flex items-center gap-2 px-4 py-2 text-xs text-secondary">
                     <Loader2 class="w-3.5 h-3.5 animate-spin" />
-                    <span>Loading {describeLoadingPath()}…</span>
+                    <span>{t("filesystemBrowser.loading.loadingWithPath", { path: describeLoadingPath() })}</span>
                   </div>
                 </Show>
                 <Show
                   when={folderRows().length > 0}
                   fallback={
                     <div class="flex flex-col items-center justify-center gap-2 py-10 text-sm text-secondary">
-                      <p>No entries found.</p>
+                      <p>{t("filesystemBrowser.empty.noEntries")}</p>
                       <button type="button" class="selector-button selector-button-secondary" onClick={refreshEntries}>
-                        Retry
+                        {t("filesystemBrowser.actions.retry")}
                       </button>
                     </div>
                   }
@@ -370,7 +378,7 @@ const FileSystemBrowserDialog: Component<FileSystemBrowserDialogProps> = (props)
                                   <ArrowUpLeft class="w-4 h-4" />
                                 </div>
                                 <div class="directory-browser-row-text">
-                                  <span class="directory-browser-row-name">Up one level</span>
+                                  <span class="directory-browser-row-name">{t("filesystemBrowser.navigation.upOneLevel")}</span>
                                 </div>
                               </button>
                             </div>
@@ -412,7 +420,7 @@ const FileSystemBrowserDialog: Component<FileSystemBrowserDialogProps> = (props)
                                 selectEntry()
                               }}
                             >
-                              Select
+                              {t("filesystemBrowser.actions.select")}
                             </button>
                           </div>
                         </div>
@@ -428,15 +436,15 @@ const FileSystemBrowserDialog: Component<FileSystemBrowserDialogProps> = (props)
                 <div class="flex items-center gap-1.5">
                   <kbd class="kbd">↑</kbd>
                   <kbd class="kbd">↓</kbd>
-                  <span>Navigate</span>
+                  <span>{t("filesystemBrowser.hints.navigate")}</span>
                 </div>
                 <div class="flex items-center gap-1.5">
                   <kbd class="kbd">Enter</kbd>
-                  <span>Select</span>
+                  <span>{t("filesystemBrowser.hints.select")}</span>
                 </div>
                 <div class="flex items-center gap-1.5">
                   <kbd class="kbd">Esc</kbd>
-                  <span>Close</span>
+                  <span>{t("filesystemBrowser.hints.close")}</span>
                 </div>
               </div>
             </div>
@@ -448,4 +456,3 @@ const FileSystemBrowserDialog: Component<FileSystemBrowserDialogProps> = (props)
 }
 
 export default FileSystemBrowserDialog
-

packages/ui/src/components/folder-selection-view.tsx

@@ -1,11 +1,16 @@
+import { Select } from "@kobalte/core/select"
 import { Component, createSignal, Show, For, onMount, onCleanup, createEffect } from "solid-js"
-import { Folder, Clock, Trash2, FolderPlus, Settings, ChevronRight, MonitorUp } from "lucide-solid"
+import { Folder, Clock, Trash2, FolderPlus, Settings, ChevronRight, MonitorUp, Star, Languages, ChevronDown } from "lucide-solid"
 import { useConfig } from "../stores/preferences"
 import AdvancedSettingsModal from "./advanced-settings-modal"
 import DirectoryBrowserDialog from "./directory-browser-dialog"
 import Kbd from "./kbd"
 import { openNativeFolderDialog, supportsNativeDialogs } from "../lib/native/native-functions"
 import VersionPill from "./version-pill"
+import { DiscordSymbolIcon, GitHubMarkIcon } from "./brand-icons"
+import { githubStars } from "../stores/github-stars"
+import { formatCompactCount } from "../lib/formatters"
+import { useI18n, type Locale } from "../lib/i18n"
 
 const codeNomadLogo = new URL("../images/CodeNomad-Icon.png", import.meta.url).href
 
@@ -20,13 +25,27 @@ interface FolderSelectionViewProps {
 }
 
 const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
-  const { recentFolders, removeRecentFolder, preferences } = useConfig()
+  const { recentFolders, removeRecentFolder, preferences, updatePreferences } = useConfig()
+  const { t, locale } = useI18n()
   const [selectedIndex, setSelectedIndex] = createSignal(0)
   const [focusMode, setFocusMode] = createSignal<"recent" | "new" | null>("recent")
   const [selectedBinary, setSelectedBinary] = createSignal(preferences().lastUsedBinary || "opencode")
   const [isFolderBrowserOpen, setIsFolderBrowserOpen] = createSignal(false)
   const nativeDialogsAvailable = supportsNativeDialogs()
   let recentListRef: HTMLDivElement | undefined
+
+  type LanguageOption = { value: Locale; label: string }
+
+  const languageOptions: LanguageOption[] = [
+    { value: "en", label: "English" },
+    { value: "es", label: "Español" },
+    { value: "fr", label: "Français" },
+    { value: "ru", label: "Русский" },
+    { value: "ja", label: "日本語" },
+    { value: "zh-Hans", label: "简体中文" },
+  ]
+
+  const selectedLanguageOption = () => languageOptions.find((opt) => opt.value === locale()) ?? languageOptions[0]
  
   const folders = () => recentFolders()
   const isLoading = () => Boolean(props.isLoading)
@@ -57,6 +76,19 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
 
 
   function handleKeyDown(e: KeyboardEvent) {
+    let activeElement: HTMLElement | null = null
+    if (typeof document !== "undefined") {
+      activeElement = document.activeElement as HTMLElement | null
+    }
+    const insideModal = activeElement?.closest(".modal-surface") || activeElement?.closest("[role='dialog']")
+    const isEditingField =
+      activeElement &&
+      (["INPUT", "TEXTAREA", "SELECT"].includes(activeElement.tagName) || activeElement.isContentEditable || Boolean(insideModal))
+
+    if (isEditingField) {
+      return
+    }
+
     const normalizedKey = e.key.toLowerCase()
     const isBrowseShortcut = (e.metaKey || e.ctrlKey) && !e.shiftKey && normalizedKey === "n"
     const blockedKeys = [
@@ -165,16 +197,21 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
     const hours = Math.floor(minutes / 60)
     const days = Math.floor(hours / 24)
 
-    if (days > 0) return `${days}d ago`
-    if (hours > 0) return `${hours}h ago`
-    if (minutes > 0) return `${minutes}m ago`
-    return "just now"
+    if (days > 0) return t("time.relative.daysAgoShort", { count: days })
+    if (hours > 0) return t("time.relative.hoursAgoShort", { count: hours })
+    if (minutes > 0) return t("time.relative.minutesAgoShort", { count: minutes })
+    return t("time.relative.justNow")
   }
 
   function handleFolderSelect(path: string) {
     if (isLoading()) return
     props.onSelectFolder(path, selectedBinary())
   }
+
+  const openExternalLink = (url: string) => {
+    if (typeof window === "undefined") return
+    window.open(url, "_blank", "noopener,noreferrer")
+  }
  
   async function handleBrowse() {
     if (isLoading()) return
@@ -182,7 +219,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
     if (nativeDialogsAvailable) {
       const fallbackPath = folders()[0]?.path
       const selected = await openNativeFolderDialog({
-        title: "Select Workspace",
+        title: t("folderSelection.dialog.title"),
         defaultPath: fallbackPath,
       })
       if (selected) {
@@ -229,170 +266,281 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
         style="background-color: var(--surface-secondary)"
       >
         <div
-          class="w-full max-w-3xl h-full px-4 sm:px-8 pb-2 flex flex-col overflow-hidden"
+          class="w-full max-w-5xl h-full px-4 sm:px-8 pb-2 flex flex-col overflow-hidden"
           aria-busy={isLoading() ? "true" : "false"}
         >
+          <div class="absolute top-4 left-6">
+            <Select<LanguageOption>
+              value={selectedLanguageOption()}
+              onChange={(value) => {
+                if (!value) return
+                if (value.value === locale()) return
+                updatePreferences({ locale: value.value })
+              }}
+              options={languageOptions}
+              optionValue="value"
+              optionTextValue="label"
+              itemComponent={(itemProps) => (
+                <Select.Item item={itemProps.item} class="selector-option">
+                  <Select.ItemLabel class="selector-option-label">{itemProps.item.rawValue.label}</Select.ItemLabel>
+                </Select.Item>
+              )}
+            >
+              <Select.Trigger
+                class="selector-trigger"
+                aria-label={t("folderSelection.language.ariaLabel")}
+                title={t("folderSelection.language.ariaLabel")}
+              >
+                <Languages class="w-4 h-4 icon-muted" aria-hidden="true" />
+                <div class="flex-1 min-w-0">
+                  <Select.Value<LanguageOption>>
+                    {(state) => (
+                      <span class="selector-trigger-primary selector-trigger-primary--align-left">
+                        {state.selectedOption()?.label}
+                      </span>
+                    )}
+                  </Select.Value>
+                </div>
+                <Select.Icon class="selector-trigger-icon">
+                  <ChevronDown class="w-3 h-3" />
+                </Select.Icon>
+              </Select.Trigger>
+
+              <Select.Portal>
+                <Select.Content class="selector-popover min-w-[180px]">
+                  <Select.Listbox class="selector-listbox" />
+                </Select.Content>
+              </Select.Portal>
+            </Select>
+          </div>
           <Show when={props.onOpenRemoteAccess}>
             <div class="absolute top-4 right-6">
               <button
                 type="button"
-                class="selector-button selector-button-secondary inline-flex items-center justify-center"
+                class="selector-button selector-button-secondary w-auto p-2 inline-flex items-center justify-center"
                 onClick={() => props.onOpenRemoteAccess?.()}
               >
                 <MonitorUp class="w-4 h-4" />
               </button>
             </div>
           </Show>
-        <div class="mb-6 text-center shrink-0">
-          <div class="mb-3 flex justify-center">
-            <img src={codeNomadLogo} alt="CodeNomad logo" class="h-32 w-auto sm:h-48" loading="lazy" />
-          </div>
-          <h1 class="mb-2 text-3xl font-semibold text-primary">CodeNomad</h1>
-          <p class="text-base text-secondary">Select a folder to start coding with AI</p>
-          <div class="mt-2 flex justify-center">
-            <VersionPill />
-          </div>
-        </div>
-
- 
-          <div class="space-y-4 flex-1 min-h-0 overflow-hidden flex flex-col">
-
-            <Show
-
-
-              when={folders().length > 0}
-              fallback={
-                <div class="panel panel-empty-state flex-1">
-                  <div class="panel-empty-state-icon">
-                    <Clock class="w-12 h-12 mx-auto" />
-                  </div>
-                  <p class="panel-empty-state-title">No Recent Folders</p>
-                  <p class="panel-empty-state-description">Browse for a folder to get started</p>
-                </div>
-              }
-            >
-              <div class="panel flex flex-col flex-1 min-h-0">
-                <div class="panel-header">
-                  <h2 class="panel-title">Recent Folders</h2>
-                  <p class="panel-subtitle">
-                    {folders().length} {folders().length === 1 ? "folder" : "folders"} available
-                  </p>
-                </div>
-                <div class="panel-list panel-list--fill flex-1 min-h-0 overflow-auto" ref={(el) => (recentListRef = el)}>
-                  <For each={folders()}>
-                    {(folder, index) => (
-                      <div
-                        class="panel-list-item"
-                        classList={{
-                          "panel-list-item-highlight": focusMode() === "recent" && selectedIndex() === index(),
-                          "panel-list-item-disabled": isLoading(),
-                        }}
-                      >
-                        <div class="flex items-center gap-2 w-full px-1">
-                          <button
-                            data-folder-index={index()}
-                            class="panel-list-item-content flex-1"
-                            disabled={isLoading()}
-                            onClick={() => handleFolderSelect(folder.path)}
-                            onMouseEnter={() => {
-                              if (isLoading()) return
-                              setFocusMode("recent")
-                              setSelectedIndex(index())
-                            }}
-                          >
-                            <div class="flex items-center justify-between gap-3 w-full">
-                              <div class="flex-1 min-w-0">
-                                <div class="flex items-center gap-2 mb-1">
-                                  <Folder class="w-4 h-4 flex-shrink-0 icon-muted" />
-                                  <span class="text-sm font-medium truncate text-primary">
-                                    {folder.path.split("/").pop()}
-                                  </span>
-                                </div>
-                                <div class="text-xs font-mono truncate pl-6 text-muted">
-                                  {getDisplayPath(folder.path)}
-                                </div>
-                                <div class="text-xs mt-1 pl-6 text-muted">
-                                  {formatRelativeTime(folder.lastAccessed)}
-                                </div>
-                              </div>
-                              <Show when={focusMode() === "recent" && selectedIndex() === index()}>
-                                <kbd class="kbd">↵</kbd>
-                              </Show>
-                            </div>
-                          </button>
-                          <button
-                            onClick={(e) => handleRemove(folder.path, e)}
-                            disabled={isLoading()}
-                            class="p-2 transition-all hover:bg-red-100 dark:hover:bg-red-900/30 opacity-70 hover:opacity-100 rounded"
-                            title="Remove from recent"
-                          >
-                            <Trash2 class="w-3.5 h-3.5 transition-colors icon-muted hover:text-red-600 dark:hover:text-red-400" />
-                          </button>
-                        </div>
-                      </div>
-                    )}
-                  </For>
-                </div>
-              </div>
-            </Show>
-
-            <div class="panel shrink-0">
-              <div class="panel-header hidden sm:block">
-                <h2 class="panel-title">Browse for Folder</h2>
-                <p class="panel-subtitle">Select any folder on your computer</p>
-              </div>
-
-              <div class="panel-body">
-                <button
-                  onClick={() => void handleBrowse()}
-                  disabled={props.isLoading}
-                  class="button-primary w-full flex items-center justify-center text-sm disabled:cursor-not-allowed"
-                  onMouseEnter={() => setFocusMode("new")}
-                >
-                  <div class="flex items-center gap-2">
-                    <FolderPlus class="w-4 h-4" />
-                    <span>{props.isLoading ? "Opening..." : "Browse Folders"}</span>
-                  </div>
-                  <Kbd shortcut="cmd+n" class="ml-2" />
-                </button>
-              </div>
-
-              {/* Advanced settings section */}
-              <div class="panel-section w-full">
-                <button
-                  onClick={() => props.onAdvancedSettingsOpen?.()}
-                  class="panel-section-header w-full justify-between"
-                >
-                  <div class="flex items-center gap-2">
-                    <Settings class="w-4 h-4 icon-muted" />
-                    <span class="text-sm font-medium text-secondary">Advanced Settings</span>
-                  </div>
-                  <ChevronRight class="w-4 h-4 icon-muted" />
-                </button>
-              </div>
+          <div class="mb-6 text-center shrink-0">
+            <div class="mb-3 flex justify-center">
+              <img src={codeNomadLogo} alt={t("folderSelection.logoAlt")} class="h-32 w-auto sm:h-48" loading="lazy" />
             </div>
+            <h1 class="mb-2 text-3xl font-semibold text-primary">CodeNomad</h1>
+            <div class="mt-3 flex justify-center gap-2">
+              <a
+                href="https://github.com/NeuralNomadsAI/CodeNomad"
+                target="_blank"
+                rel="noreferrer"
+                class="selector-button selector-button-secondary w-auto p-2 inline-flex items-center justify-center"
+                aria-label={t("folderSelection.links.github")}
+                title={t("folderSelection.links.github")}
+                onClick={(event) => {
+                  event.preventDefault()
+                  openExternalLink("https://github.com/NeuralNomadsAI/CodeNomad")
+                }}
+              >
+                <GitHubMarkIcon class="w-4 h-4" />
+              </a>
+              <a
+                href="https://github.com/NeuralNomadsAI/CodeNomad"
+                target="_blank"
+                rel="noreferrer"
+                class="selector-button selector-button-secondary w-auto px-3 py-1.5 inline-flex items-center justify-center gap-1.5"
+                aria-label={t("folderSelection.links.githubStars")}
+                title={t("folderSelection.links.githubStars")}
+                onClick={(event) => {
+                  event.preventDefault()
+                  openExternalLink("https://github.com/NeuralNomadsAI/CodeNomad")
+                }}
+              >
+                <Star class="w-4 h-4" />
+                <Show when={githubStars() !== null}>
+                  <span class="text-xs font-medium">{formatCompactCount(githubStars()!)}</span>
+                </Show>
+              </a>
+              <a
+                href="https://discord.com/channels/1391832426048651334/1458412028325793887/1464701235683917945"
+                target="_blank"
+                rel="noreferrer"
+                class="selector-button selector-button-secondary w-auto p-2 inline-flex items-center justify-center"
+                aria-label={t("folderSelection.links.discord")}
+                title={t("folderSelection.links.discord")}
+                onClick={(event) => {
+                  event.preventDefault()
+                  openExternalLink(
+                    "https://discord.com/channels/1391832426048651334/1458412028325793887/1464701235683917945",
+                  )
+                }}
+              >
+                <DiscordSymbolIcon class="w-4 h-4" />
+              </a>
+            </div>
+            <p class="mt-3 text-base text-secondary">{t("folderSelection.tagline")}</p>
           </div>
 
-          <div class="mt-1 panel panel-footer shrink-0 hidden sm:block">
-            <div class="panel-footer-hints">
-              <Show when={folders().length > 0}>
-                <div class="flex items-center gap-1.5">
-                  <kbd class="kbd">↑</kbd>
-                  <kbd class="kbd">↓</kbd>
-                  <span>Navigate</span>
-                </div>
-                <div class="flex items-center gap-1.5">
-                  <kbd class="kbd">Enter</kbd>
-                  <span>Select</span>
-                </div>
-                <div class="flex items-center gap-1.5">
-                  <kbd class="kbd">Del</kbd>
-                  <span>Remove</span>
+          <div class="flex-1 min-h-0 overflow-hidden flex flex-col gap-4">
+            <div class="flex-1 min-h-0 overflow-hidden flex flex-col lg:flex-row gap-4">
+              {/* Right column: recent folders */}
+              <div class="order-1 lg:order-2 flex flex-col gap-4 flex-1 min-h-0 overflow-hidden">
+              <Show
+                when={folders().length > 0}
+                fallback={
+                  <div class="panel panel-empty-state flex-1">
+                    <div class="panel-empty-state-icon">
+                      <Clock class="w-12 h-12 mx-auto" />
+                    </div>
+                    <p class="panel-empty-state-title">{t("folderSelection.empty.title")}</p>
+                    <p class="panel-empty-state-description">{t("folderSelection.empty.description")}</p>
+                  </div>
+                }
+              >
+                <div class="panel flex flex-col flex-1 min-h-0">
+                  <div class="panel-header">
+                    <h2 class="panel-title">{t("folderSelection.recent.title")}</h2>
+                    <p class="panel-subtitle">
+                      {t(
+                        folders().length === 1
+                          ? "folderSelection.recent.subtitle.one"
+                          : "folderSelection.recent.subtitle.other",
+                        { count: folders().length },
+                      )}
+                    </p>
+                  </div>
+                  <div
+                    class="panel-list panel-list--fill flex-1 min-h-0 overflow-auto"
+                    ref={(el) => (recentListRef = el)}
+                  >
+                    <For each={folders()}>
+                      {(folder, index) => (
+                        <div
+                          class="panel-list-item"
+                          classList={{
+                            "panel-list-item-highlight": focusMode() === "recent" && selectedIndex() === index(),
+                            "panel-list-item-disabled": isLoading(),
+                          }}
+                        >
+                          <div class="flex items-center gap-2 w-full px-1">
+                            <button
+                              data-folder-index={index()}
+                              class="panel-list-item-content flex-1"
+                              disabled={isLoading()}
+                              onClick={() => handleFolderSelect(folder.path)}
+                              onMouseEnter={() => {
+                                if (isLoading()) return
+                                setFocusMode("recent")
+                                setSelectedIndex(index())
+                              }}
+                            >
+                              <div class="flex items-center justify-between gap-3 w-full">
+                                <div class="flex-1 min-w-0">
+                                  <div class="flex items-center gap-2 mb-1">
+                                    <Folder class="w-4 h-4 flex-shrink-0 icon-muted" />
+                                    <span class="text-sm font-medium truncate text-primary">
+                                      {folder.path.split("/").pop()}
+                                    </span>
+                                  </div>
+                                  <div class="text-xs font-mono truncate pl-6 text-muted">
+                                    {getDisplayPath(folder.path)}
+                                  </div>
+                                  <div class="text-xs mt-1 pl-6 text-muted">
+                                    {formatRelativeTime(folder.lastAccessed)}
+                                  </div>
+                                </div>
+                                <Show when={focusMode() === "recent" && selectedIndex() === index()}>
+                                  <kbd class="kbd">↵</kbd>
+                                </Show>
+                              </div>
+                            </button>
+                            <button
+                              onClick={(e) => handleRemove(folder.path, e)}
+                              disabled={isLoading()}
+                              class="p-2 transition-all hover:bg-red-100 dark:hover:bg-red-900/30 opacity-70 hover:opacity-100 rounded"
+                              title={t("folderSelection.recent.remove")}
+                            >
+                              <Trash2 class="w-3.5 h-3.5 transition-colors icon-muted hover:text-red-600 dark:hover:text-red-400" />
+                            </button>
+                          </div>
+                        </div>
+                      )}
+                    </For>
+                  </div>
                 </div>
               </Show>
-              <div class="flex items-center gap-1.5">
-                <Kbd shortcut="cmd+n" />
-                <span>Browse</span>
+
+              </div>
+
+              {/* Left column: version + browse + advanced settings */}
+              <div class="order-2 lg:order-1 flex flex-col gap-4 flex-1 min-h-0">
+              <div class="panel shrink-0">
+                <div class="panel-header hidden sm:block">
+                  <h2 class="panel-title">{t("folderSelection.browse.title")}</h2>
+                  <p class="panel-subtitle">{t("folderSelection.browse.subtitle")}</p>
+                </div>
+
+                <div class="panel-body">
+                  <button
+                    onClick={() => void handleBrowse()}
+                    disabled={props.isLoading}
+                    class="button-primary w-full flex items-center justify-center text-sm disabled:cursor-not-allowed"
+                    onMouseEnter={() => setFocusMode("new")}
+                  >
+                    <div class="flex items-center gap-2">
+                      <FolderPlus class="w-4 h-4" />
+                      <span>
+                        {props.isLoading
+                          ? t("folderSelection.browse.buttonOpening")
+                          : t("folderSelection.browse.button")}
+                      </span>
+                    </div>
+                    <Kbd shortcut="cmd+n" class="ml-2" />
+                  </button>
+                </div>
+
+                {/* Advanced settings section */}
+                <div class="panel-section w-full">
+                  <button onClick={() => props.onAdvancedSettingsOpen?.()} class="panel-section-header w-full justify-between">
+                    <div class="flex items-center gap-2">
+                      <Settings class="w-4 h-4 icon-muted" />
+                      <span class="text-sm font-medium text-secondary">{t("folderSelection.advancedSettings")}</span>
+                    </div>
+                    <ChevronRight class="w-4 h-4 icon-muted" />
+                  </button>
+                </div>
+              </div>
+
+              <div class="panel shrink-0">
+                <div class="panel-body flex items-center justify-center">
+                  <VersionPill />
+                </div>
+              </div>
+            </div>
+
+            </div>
+
+            <div class="panel panel-footer shrink-0 hidden sm:block">
+              <div class="panel-footer-hints">
+                <Show when={folders().length > 0}>
+                  <div class="flex items-center gap-1.5">
+                    <kbd class="kbd">↑</kbd>
+                    <kbd class="kbd">↓</kbd>
+                    <span>{t("folderSelection.hints.navigate")}</span>
+                  </div>
+                  <div class="flex items-center gap-1.5">
+                    <kbd class="kbd">Enter</kbd>
+                    <span>{t("folderSelection.hints.select")}</span>
+                  </div>
+                  <div class="flex items-center gap-1.5">
+                    <kbd class="kbd">Del</kbd>
+                    <span>{t("folderSelection.hints.remove")}</span>
+                  </div>
+                </Show>
+                <div class="flex items-center gap-1.5">
+                  <Kbd shortcut="cmd+n" />
+                  <span>{t("folderSelection.hints.browse")}</span>
+                </div>
               </div>
             </div>
           </div>
@@ -401,8 +549,8 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
           <div class="folder-loading-overlay">
             <div class="folder-loading-indicator">
               <div class="spinner" />
-              <p class="folder-loading-text">Starting instance…</p>
-              <p class="folder-loading-subtext">Hang tight while we prepare your workspace.</p>
+              <p class="folder-loading-text">{t("folderSelection.loading.title")}</p>
+              <p class="folder-loading-subtext">{t("folderSelection.loading.subtitle")}</p>
             </div>
           </div>
         </Show>
@@ -418,8 +566,8 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
 
       <DirectoryBrowserDialog
         open={isFolderBrowserOpen()}
-        title="Select Workspace"
-        description="Select workspace to start coding."
+        title={t("folderSelection.dialog.title")}
+        description={t("folderSelection.dialog.description")}
         onClose={() => setIsFolderBrowserOpen(false)}
         onSelect={handleBrowserSelect}
       />

packages/ui/src/components/info-view.tsx

@@ -2,6 +2,7 @@ import { Component, For, createSignal, createEffect, Show, onMount, onCleanup, c
 import { instances, getInstanceLogs, isInstanceLogStreaming, setInstanceLogStreaming } from "../stores/instances"
 import { ChevronDown } from "lucide-solid"
 import InstanceInfo from "./instance-info"
+import { useI18n } from "../lib/i18n"
 
 interface InfoViewProps {
   instanceId: string
@@ -10,6 +11,7 @@ interface InfoViewProps {
 const logsScrollState = new Map<string, { scrollTop: number; autoScroll: boolean }>()
 
 const InfoView: Component<InfoViewProps> = (props) => {
+  const { t } = useI18n()
   let scrollRef: HTMLDivElement | undefined
   const savedState = logsScrollState.get(props.instanceId)
   const [autoScroll, setAutoScroll] = createSignal(savedState?.autoScroll ?? false)
@@ -90,18 +92,18 @@ const InfoView: Component<InfoViewProps> = (props) => {
 
         <div class="panel flex-1 flex flex-col min-h-0 overflow-hidden">
           <div class="log-header">
-            <h2 class="panel-title">Server Logs</h2>
+            <h2 class="panel-title">{t("infoView.logs.title")}</h2>
             <div class="flex items-center gap-2">
               <Show
                 when={streamingEnabled()}
                 fallback={
                   <button type="button" class="button-tertiary" onClick={handleEnableLogs}>
-                    Show server logs
+                    {t("infoView.logs.actions.show")}
                   </button>
                 }
               >
                 <button type="button" class="button-tertiary" onClick={handleDisableLogs}>
-                  Hide server logs
+                  {t("infoView.logs.actions.hide")}
                 </button>
               </Show>
             </div>
@@ -116,17 +118,17 @@ const InfoView: Component<InfoViewProps> = (props) => {
               when={streamingEnabled()}
               fallback={
                 <div class="log-paused-state">
-                  <p class="log-paused-title">Server logs are paused</p>
-                  <p class="log-paused-description">Enable streaming to watch your OpenCode server activity.</p>
+                  <p class="log-paused-title">{t("infoView.logs.paused.title")}</p>
+                  <p class="log-paused-description">{t("infoView.logs.paused.description")}</p>
                   <button type="button" class="button-primary" onClick={handleEnableLogs}>
-                    Show server logs
+                    {t("infoView.logs.actions.show")}
                   </button>
                 </div>
               }
             >
               <Show
                 when={logs().length > 0}
-                fallback={<div class="log-empty-state">Waiting for server output...</div>}
+                fallback={<div class="log-empty-state">{t("infoView.logs.empty.waiting")}</div>}
               >
                 <For each={logs()}>
                   {(entry) => (
@@ -148,7 +150,7 @@ const InfoView: Component<InfoViewProps> = (props) => {
               class="scroll-to-bottom"
             >
               <ChevronDown class="w-4 h-4" />
-              Scroll to bottom
+              {t("infoView.logs.scrollToBottom")}
             </button>
           </Show>
         </div>

packages/ui/src/components/instance-disconnected-modal.tsx

@@ -1,4 +1,5 @@
 import { Dialog } from "@kobalte/core/dialog"
+import { useI18n } from "../lib/i18n"
 
 interface InstanceDisconnectedModalProps {
   open: boolean
@@ -8,8 +9,10 @@ interface InstanceDisconnectedModalProps {
 }
 
 export default function InstanceDisconnectedModal(props: InstanceDisconnectedModalProps) {
-  const folderLabel = props.folder || "this workspace"
-  const reasonLabel = props.reason || "The server stopped responding"
+  const { t } = useI18n()
+
+  const folderLabel = () => props.folder || t("instanceDisconnected.folderFallback")
+  const reasonLabel = () => props.reason || t("instanceDisconnected.reasonFallback")
 
   return (
     <Dialog open={props.open} modal>
@@ -18,25 +21,25 @@ export default function InstanceDisconnectedModal(props: InstanceDisconnectedMod
         <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
           <Dialog.Content class="modal-surface w-full max-w-md p-6 flex flex-col gap-6">
             <div>
-              <Dialog.Title class="text-xl font-semibold text-primary">Instance Disconnected</Dialog.Title>
+              <Dialog.Title class="text-xl font-semibold text-primary">{t("instanceDisconnected.title")}</Dialog.Title>
               <Dialog.Description class="text-sm text-secondary mt-2 break-words">
-                {folderLabel} can no longer be reached. Close the tab to continue working.
+                {t("instanceDisconnected.description", { folder: folderLabel() })}
               </Dialog.Description>
             </div>
 
             <div class="rounded-lg border border-base bg-surface-secondary p-4 text-sm text-secondary">
-              <p class="font-medium text-primary">Details</p>
-              <p class="mt-2 text-secondary">{reasonLabel}</p>
+              <p class="font-medium text-primary">{t("instanceDisconnected.details.title")}</p>
+              <p class="mt-2 text-secondary">{reasonLabel()}</p>
               {props.folder && (
                 <p class="mt-2 text-secondary">
-                  Folder: <span class="font-mono text-primary break-all">{props.folder}</span>
+                  {t("instanceDisconnected.details.folderLabel")} <span class="font-mono text-primary break-all">{props.folder}</span>
                 </p>
               )}
             </div>
 
             <div class="flex justify-end">
               <button type="button" class="selector-button selector-button-primary" onClick={props.onClose}>
-                Close Instance
+                {t("instanceDisconnected.actions.closeInstance")}
               </button>
             </div>
           </Dialog.Content>

packages/ui/src/components/instance-info.tsx

@@ -2,6 +2,7 @@ import { Component, For, Show, createMemo } from "solid-js"
 import type { Instance } from "../types/instance"
 import { useOptionalInstanceMetadataContext } from "../lib/contexts/instance-metadata-context"
 import InstanceServiceStatus from "./instance-service-status"
+import { useI18n } from "../lib/i18n"
 
 interface InstanceInfoProps {
   instance: Instance
@@ -9,6 +10,7 @@ interface InstanceInfoProps {
 }
 
 const InstanceInfo: Component<InstanceInfoProps> = (props) => {
+  const { t } = useI18n()
   const metadataContext = useOptionalInstanceMetadataContext()
   const isLoadingMetadata = metadataContext?.isLoading ?? (() => false)
   const instanceAccessor = metadataContext?.instance ?? (() => props.instance)
@@ -26,11 +28,11 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
   return (
     <div class="panel">
       <div class="panel-header">
-        <h2 class="panel-title">Instance Information</h2>
+        <h2 class="panel-title">{t("instanceInfo.title")}</h2>
       </div>
       <div class="panel-body space-y-3">
         <div>
-          <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1">Folder</div>
+          <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1">{t("instanceInfo.labels.folder")}</div>
           <div class="text-xs text-primary font-mono break-all px-2 py-1.5 rounded border bg-surface-secondary border-base">
             {currentInstance().folder}
           </div>
@@ -41,7 +43,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
             <>
               <div>
                 <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1">
-                  Project
+                  {t("instanceInfo.labels.project")}
                 </div>
                 <div class="text-xs font-mono px-2 py-1.5 rounded border truncate bg-surface-secondary border-base text-primary">
                   {project().id}
@@ -51,7 +53,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
               <Show when={project().vcs}>
                 <div>
                   <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1">
-                    Version Control
+                    {t("instanceInfo.labels.versionControl")}
                   </div>
                   <div class="flex items-center gap-2 text-xs text-primary">
                     <svg
@@ -73,7 +75,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
         <Show when={binaryVersion()}>
           <div>
             <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1">
-              OpenCode Version
+              {t("instanceInfo.labels.opencodeVersion")}
             </div>
             <div class="text-xs px-2 py-1.5 rounded border bg-surface-secondary border-base text-primary">
               v{binaryVersion()}
@@ -84,7 +86,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
         <Show when={currentInstance().binaryPath}>
           <div>
             <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1">
-              Binary Path
+              {t("instanceInfo.labels.binaryPath")}
             </div>
             <div class="text-xs font-mono break-all px-2 py-1.5 rounded border bg-surface-secondary border-base text-primary">
               {currentInstance().binaryPath}
@@ -95,7 +97,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
         <Show when={environmentEntries().length > 0}>
           <div>
             <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1.5">
-              Environment Variables ({environmentEntries().length})
+              {t("instanceInfo.labels.environmentVariables", { count: environmentEntries().length })}
             </div>
             <div class="space-y-1">
               <For each={environmentEntries()}>
@@ -127,24 +129,24 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
                   d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                 />
               </svg>
-              Loading...
+              {t("instanceInfo.loading")}
             </div>
           </div>
         </Show>
 
         <div>
-          <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1.5">Server</div>
+          <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1.5">{t("instanceInfo.server.title")}</div>
           <div class="space-y-1 text-xs">
             <div class="flex justify-between items-center">
-              <span class="text-secondary">Port:</span>
+              <span class="text-secondary">{t("instanceInfo.server.port")}</span>
               <span class="text-primary font-mono">{currentInstance().port}</span>
             </div>
             <div class="flex justify-between items-center">
-              <span class="text-secondary">PID:</span>
+              <span class="text-secondary">{t("instanceInfo.server.pid")}</span>
               <span class="text-primary font-mono">{currentInstance().pid}</span>
             </div>
             <div class="flex justify-between items-center">
-              <span class="text-secondary">Status:</span>
+              <span class="text-secondary">{t("instanceInfo.server.status")}</span>
               <span class={`status-badge ${currentInstance().status}`}>
                 <div
                   class={`status-dot ${currentInstance().status === "ready" ? "ready" : currentInstance().status === "starting" ? "starting" : currentInstance().status === "error" ? "error" : "stopped"} ${currentInstance().status === "ready" || currentInstance().status === "starting" ? "animate-pulse" : ""}`}

packages/ui/src/components/instance-service-status.tsx

@@ -2,6 +2,7 @@ import { For, Show, createMemo, createSignal, type Component } from "solid-js"
 import Switch from "@suid/material/Switch"
 import type { Instance, RawMcpStatus } from "../types/instance"
 import { useOptionalInstanceMetadataContext } from "../lib/contexts/instance-metadata-context"
+import { useI18n } from "../lib/i18n"
 import { getLogger } from "../lib/logger"
 
 const log = getLogger("session")
@@ -42,6 +43,7 @@ function parseMcpStatus(status?: RawMcpStatus): ParsedMcpStatus[] {
 }
 
 const InstanceServiceStatus: Component<InstanceServiceStatusProps> = (props) => {
+  const { t } = useI18n()
   const metadataContext = useOptionalInstanceMetadataContext()
   const instance = metadataContext?.instance ?? (() => {
     if (props.initialInstance) {
@@ -112,12 +114,12 @@ const InstanceServiceStatus: Component<InstanceServiceStatusProps> = (props) =>
     <section class="space-y-1.5">
       <Show when={showHeadings()}>
         <div class="text-xs font-medium text-muted uppercase tracking-wide">
-          LSP Servers
+          {t("instanceServiceStatus.sections.lsp")}
         </div>
       </Show>
       <Show
         when={!isLspLoading() && lspServers().length > 0}
-        fallback={renderEmptyState(isLspLoading() ? "Loading LSP servers..." : "No LSP servers detected.")}
+        fallback={renderEmptyState(isLspLoading() ? t("instanceServiceStatus.lsp.loading") : t("instanceServiceStatus.lsp.empty"))}
       >
         <div class="space-y-1.5">
           <For each={lspServers()}>
@@ -132,7 +134,11 @@ const InstanceServiceStatus: Component<InstanceServiceStatusProps> = (props) =>
                   </div>
                   <div class="flex items-center gap-1.5 flex-shrink-0 text-xs text-secondary">
                     <div class={`status-dot ${server.status === "connected" ? "ready animate-pulse" : "error"}`} />
-                    <span>{server.status === "connected" ? "Connected" : "Error"}</span>
+                    <span>
+                      {server.status === "connected"
+                        ? t("instanceServiceStatus.lsp.status.connected")
+                        : t("instanceServiceStatus.lsp.status.error")}
+                    </span>
                   </div>
                 </div>
               </div>
@@ -147,12 +153,12 @@ const InstanceServiceStatus: Component<InstanceServiceStatusProps> = (props) =>
     <section class="space-y-1.5">
       <Show when={showHeadings()}>
         <div class="text-xs font-medium text-muted uppercase tracking-wide">
-          MCP Servers
+          {t("instanceServiceStatus.sections.mcp")}
         </div>
       </Show>
       <Show
         when={!isMcpLoading() && mcpServers().length > 0}
-        fallback={renderEmptyState(isMcpLoading() ? "Loading MCP servers..." : "No MCP servers detected.")}
+        fallback={renderEmptyState(isMcpLoading() ? t("instanceServiceStatus.mcp.loading") : t("instanceServiceStatus.mcp.empty"))}
       >
         <div class="space-y-1.5">
           <For each={mcpServers()}>
@@ -192,7 +198,7 @@ const InstanceServiceStatus: Component<InstanceServiceStatusProps> = (props) =>
                             disabled={switchDisabled()}
                             color="success"
                             size="small"
-                            inputProps={{ "aria-label": `Toggle ${server.name} MCP server` }}
+                            inputProps={{ "aria-label": t("instanceServiceStatus.mcp.toggleAriaLabel", { name: server.name }) }}
                             onChange={(_, checked) => {
                               if (switchDisabled()) return
                               void toggleMcpServer(server.name, Boolean(checked))
@@ -222,12 +228,12 @@ const InstanceServiceStatus: Component<InstanceServiceStatusProps> = (props) =>
     <section class="space-y-1.5">
       <Show when={showHeadings()}>
         <div class="text-xs font-medium text-muted uppercase tracking-wide">
-          Plugins
+          {t("instanceServiceStatus.sections.plugins")}
         </div>
       </Show>
       <Show
         when={!isPluginsLoading() && plugins().length > 0}
-        fallback={renderEmptyState(isPluginsLoading() ? "Loading plugins..." : "No plugins configured.")}
+        fallback={renderEmptyState(isPluginsLoading() ? t("instanceServiceStatus.plugins.loading") : t("instanceServiceStatus.plugins.empty"))}
       >
         <div class="space-y-1.5">
           <For each={plugins()}>

packages/ui/src/components/instance-tab.tsx

@@ -2,6 +2,7 @@ import { Component, createMemo } from "solid-js"
 import type { Instance } from "../types/instance"
 import { getInstanceSessionIndicatorStatus } from "../stores/session-status"
 import { FolderOpen, ShieldAlert, X } from "lucide-solid"
+import { useI18n } from "../lib/i18n"
 
 interface InstanceTabProps {
   instance: Instance
@@ -27,6 +28,7 @@ function formatFolderName(path: string, instances: Instance[], currentInstance:
 }
 
 const InstanceTab: Component<InstanceTabProps> = (props) => {
+  const { t } = useI18n()
   const aggregatedStatus = createMemo(() => getInstanceSessionIndicatorStatus(props.instance.id))
   const statusClassName = createMemo(() => {
     const status = aggregatedStatus()
@@ -35,13 +37,13 @@ const InstanceTab: Component<InstanceTabProps> = (props) => {
   const statusTitle = createMemo(() => {
     switch (aggregatedStatus()) {
       case "permission":
-        return "Waiting on permission"
+        return t("instanceTab.status.permission")
       case "compacting":
-        return "Compacting"
+        return t("instanceTab.status.compacting")
       case "working":
-        return "Working"
+        return t("instanceTab.status.working")
       default:
-        return "Idle"
+        return t("instanceTab.status.idle")
     }
   })
 
@@ -61,7 +63,7 @@ const InstanceTab: Component<InstanceTabProps> = (props) => {
         <span
           class={`status-indicator session-status ml-auto ${statusClassName()}`}
           title={statusTitle()}
-          aria-label={`Instance status: ${statusTitle()}`}
+          aria-label={t("instanceTab.status.ariaLabel", { status: statusTitle() })}
         >
           {aggregatedStatus() === "permission" ? (
             <ShieldAlert class="w-3.5 h-3.5" aria-hidden="true" />
@@ -77,7 +79,7 @@ const InstanceTab: Component<InstanceTabProps> = (props) => {
           }}
           role="button"
           tabIndex={0}
-          aria-label="Close instance"
+          aria-label={t("instanceTab.actions.close.ariaLabel")}
         >
           <X class="w-3 h-3" />
         </span>

packages/ui/src/components/instance-tabs.tsx

@@ -4,6 +4,7 @@ import InstanceTab from "./instance-tab"
 import KeyboardHint from "./keyboard-hint"
 import { Plus, MonitorUp } from "lucide-solid"
 import { keyboardRegistry } from "../lib/keyboard-registry"
+import { useI18n } from "../lib/i18n"
 
 interface InstanceTabsProps {
   instances: Map<string, Instance>
@@ -15,6 +16,7 @@ interface InstanceTabsProps {
 }
 
 const InstanceTabs: Component<InstanceTabsProps> = (props) => {
+  const { t } = useI18n()
   return (
     <div class="tab-bar tab-bar-instance">
       <div class="tab-container" role="tablist">
@@ -34,8 +36,8 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
               <button
                 class="new-tab-button"
                 onClick={props.onNew}
-                title="New instance (Cmd/Ctrl+N)"
-                aria-label="New instance"
+                title={t("instanceTabs.new.title")}
+                aria-label={t("instanceTabs.new.ariaLabel")}
               >
                 <Plus class="w-4 h-4" />
               </button>
@@ -54,8 +56,8 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
               <button
                 class="new-tab-button tab-remote-button"
                 onClick={() => props.onOpenRemoteAccess?.()}
-                title="Remote connect"
-                aria-label="Remote connect"
+                title={t("instanceTabs.remote.title")}
+                aria-label={t("instanceTabs.remote.ariaLabel")}
               >
                 <MonitorUp class="w-4 h-4" />
               </button>

packages/ui/src/components/instance-welcome-view.tsx

@@ -9,6 +9,7 @@ import SessionRenameDialog from "./session-rename-dialog"
 import { keyboardRegistry, type KeyboardShortcut } from "../lib/keyboard-registry"
 import { isMac } from "../lib/keyboard-utils"
 import { showToastNotification } from "../lib/notifications"
+import { useI18n } from "../lib/i18n"
 import { getLogger } from "../lib/logger"
 const log = getLogger("actions")
 
@@ -19,6 +20,7 @@ interface InstanceWelcomeViewProps {
 }
 
 const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
+  const { t } = useI18n()
   const [isCreating, setIsCreating] = createSignal(false)
   const [selectedIndex, setSelectedIndex] = createSignal(0)
   const [focusMode, setFocusMode] = createSignal<"sessions" | "new-session" | null>("sessions")
@@ -47,7 +49,7 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
         ctrl: !isMac(),
       },
       handler: () => {},
-      description: "New Session",
+      description: t("instanceWelcome.shortcuts.newSession"),
       context: "global",
     }
   })
@@ -248,10 +250,10 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
     const hours = Math.floor(minutes / 60)
     const days = Math.floor(hours / 24)
 
-    if (days > 0) return `${days}d ago`
-    if (hours > 0) return `${hours}h ago`
-    if (minutes > 0) return `${minutes}m ago`
-    return "just now"
+    if (days > 0) return t("time.relative.daysAgoShort", { count: days })
+    if (hours > 0) return t("time.relative.hoursAgoShort", { count: hours })
+    if (minutes > 0) return t("time.relative.minutesAgoShort", { count: minutes })
+    return t("time.relative.justNow")
   }
 
   function formatTimestamp(timestamp: number): string {
@@ -291,7 +293,7 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
       setRenameTarget(null)
     } catch (error) {
       log.error("Failed to rename session:", error)
-      showToastNotification({ message: "Unable to rename session", variant: "error" })
+      showToastNotification({ message: t("instanceWelcome.toasts.renameError"), variant: "error" })
     } finally {
       setIsRenaming(false)
     }
@@ -333,11 +335,11 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
                         />
                       </svg>
                     </div>
-                    <p class="panel-empty-state-title">No Previous Sessions</p>
-                    <p class="panel-empty-state-description">Create a new session below to get started</p>
+                    <p class="panel-empty-state-title">{t("instanceWelcome.empty.title")}</p>
+                    <p class="panel-empty-state-description">{t("instanceWelcome.empty.description")}</p>
                     <Show when={!isDesktopLayout() && !showInstanceInfoOverlay()}>
                       <button type="button" class="button-tertiary mt-4 lg:hidden" onClick={openInstanceInfoOverlay}>
-                        View Instance Info
+                        {t("instanceWelcome.actions.viewInstanceInfo")}
                       </button>
                     </Show>
                   </div>
@@ -347,8 +349,8 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
                   <div class="panel-empty-state-icon">
                     <Loader2 class="w-12 h-12 mx-auto animate-spin text-muted" />
                   </div>
-                  <p class="panel-empty-state-title">Loading Sessions</p>
-                  <p class="panel-empty-state-description">Fetching your previous sessions...</p>
+                  <p class="panel-empty-state-title">{t("instanceWelcome.loading.title")}</p>
+                  <p class="panel-empty-state-description">{t("instanceWelcome.loading.description")}</p>
                 </div>
               </Show>
             }
@@ -357,9 +359,11 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
               <div class="panel-header">
                 <div class="flex flex-row flex-wrap items-center gap-2 justify-between">
                   <div>
-                    <h2 class="panel-title">Resume Session</h2>
+                    <h2 class="panel-title">{t("instanceWelcome.resume.title")}</h2>
                     <p class="panel-subtitle">
-                      {parentSessions().length} {parentSessions().length === 1 ? "session" : "sessions"} available
+                      {parentSessions().length === 1
+                        ? t("instanceWelcome.resume.subtitle.one", { count: parentSessions().length })
+                        : t("instanceWelcome.resume.subtitle.other", { count: parentSessions().length })}
                     </p>
                   </div>
                   <Show when={!isDesktopLayout() && !showInstanceInfoOverlay()}>
@@ -368,7 +372,7 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
                       class="button-tertiary lg:hidden flex-shrink-0"
                       onClick={openInstanceInfoOverlay}
                     >
-                      View Instance Info
+                      {t("instanceWelcome.actions.viewInstanceInfo")}
                     </button>
                   </Show>
                 </div>
@@ -404,7 +408,7 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
                                       "text-accent": isFocused(),
                                     }}
                                   >
-                                    {session.title || "Untitled Session"}
+                                    {session.title || t("instanceWelcome.session.untitled")}
                                   </span>
                                 </div>
                                 <div class="flex items-center gap-3 text-xs text-muted mt-0.5">
@@ -421,7 +425,7 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
                               <button
                                 type="button"
                                 class="p-1.5 rounded transition-colors text-muted hover:text-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
-                                title="Rename session"
+                                title={t("instanceWelcome.actions.renameTitle")}
                                 onClick={(event) => {
                                   event.preventDefault()
                                   event.stopPropagation()
@@ -433,7 +437,7 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
                               <button
                                 type="button"
                                 class="p-1.5 rounded transition-colors text-muted hover:text-red-500 dark:hover:text-red-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
-                                title="Delete session"
+                                title={t("instanceWelcome.actions.deleteTitle")}
                                 disabled={isSessionDeleting(session.id)}
                                 onClick={(event) => {
                                   event.preventDefault()
@@ -470,8 +474,8 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
 
           <div class="panel flex-shrink-0">
             <div class="panel-header">
-              <h2 class="panel-title">Start New Session</h2>
-              <p class="panel-subtitle">We’ll reuse your last agent/model automatically</p>
+              <h2 class="panel-title">{t("instanceWelcome.new.title")}</h2>
+              <p class="panel-subtitle">{t("instanceWelcome.new.subtitle")}</p>
             </div>
             <div class="panel-body">
               <div class="space-y-3">
@@ -496,7 +500,7 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                       </svg>
                     )}
-                    <span>Create Session</span>
+                    <span>{t("instanceWelcome.new.createButton")}</span>
                   </div>
                   <Kbd shortcut={newSessionShortcutString()} class="ml-2" />
                 </button>
@@ -524,7 +528,7 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
             >
               <div class="flex justify-end">
                 <button type="button" class="button-tertiary" onClick={closeInstanceInfoOverlay}>
-                  Close
+                  {t("instanceWelcome.overlay.close")}
                 </button>
               </div>
               <div class="max-h-[85vh] overflow-y-auto pr-1">
@@ -541,25 +545,25 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
           <div class="flex items-center gap-1.5">
             <kbd class="kbd">↑</kbd>
             <kbd class="kbd">↓</kbd>
-            <span>Navigate</span>
+            <span>{t("instanceWelcome.hints.navigate")}</span>
           </div>
           <div class="flex items-center gap-1.5">
             <kbd class="kbd">PgUp</kbd>
             <kbd class="kbd">PgDn</kbd>
-            <span>Jump</span>
+            <span>{t("instanceWelcome.hints.jump")}</span>
           </div>
           <div class="flex items-center gap-1.5">
             <kbd class="kbd">Home</kbd>
             <kbd class="kbd">End</kbd>
-            <span>First/Last</span>
+            <span>{t("instanceWelcome.hints.firstLast")}</span>
           </div>
           <div class="flex items-center gap-1.5">
             <kbd class="kbd">Enter</kbd>
-            <span>Resume</span>
+            <span>{t("instanceWelcome.hints.resume")}</span>
           </div>
           <div class="flex items-center gap-1.5">
             <kbd class="kbd">Del</kbd>
-            <span>Delete</span>
+            <span>{t("instanceWelcome.hints.delete")}</span>
           </div>
         </div>
       </div>

packages/ui/src/components/instance/instance-shell2.tsx

@@ -48,15 +48,16 @@ import { clearSessionRenderCache } from "../message-block"
 import { isOpen as isCommandPaletteOpen, hideCommandPalette, showCommandPalette } from "../../stores/command-palette"
 import SessionList from "../session-list"
 import KeyboardHint from "../keyboard-hint"
+import Kbd from "../kbd"
 import InstanceWelcomeView from "../instance-welcome-view"
 import InfoView from "../info-view"
 import InstanceServiceStatus from "../instance-service-status"
 import AgentSelector from "../agent-selector"
 import ModelSelector from "../model-selector"
+import ThinkingSelector from "../thinking-selector"
 import CommandPalette from "../command-palette"
 import PermissionNotificationBanner from "../permission-notification-banner"
 import PermissionApprovalModal from "../permission-approval-modal"
-import Kbd from "../kbd"
 import { TodoListView } from "../tool-call/renderers/todo"
 import ContextUsagePanel from "../session/context-usage-panel"
 import SessionView from "../session/session-view"
@@ -66,6 +67,7 @@ import { getLogger } from "../../lib/logger"
 import { serverApi } from "../../lib/api-client"
 import { getBackgroundProcesses, loadBackgroundProcesses } from "../../stores/background-processes"
 import { BackgroundProcessOutputDialog } from "../background-process-output-dialog"
+import { useI18n } from "../../lib/i18n"
 import {
   SESSION_SIDEBAR_EVENT,
   type SessionSidebarRequestAction,
@@ -120,6 +122,8 @@ function persistPinState(side: "left" | "right", value: boolean) {
 }
 
 const InstanceShell2: Component<InstanceShellProps> = (props) => {
+  const { t } = useI18n()
+
   const [sessionSidebarWidth, setSessionSidebarWidth] = createSignal(DEFAULT_SESSION_SIDEBAR_WIDTH)
   const [rightDrawerWidth, setRightDrawerWidth] = createSignal(RIGHT_DRAWER_WIDTH)
   const [leftPinned, setLeftPinned] = createSignal(true)
@@ -356,6 +360,14 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     return "disconnected"
   }
 
+  const connectionStatusLabel = () => {
+    const status = connectionStatus()
+    if (status === "connected") return t("instanceShell.connection.connected")
+    if (status === "connecting") return t("instanceShell.connection.connecting")
+    if (status === "error" || status === "disconnected") return t("instanceShell.connection.disconnected")
+    return t("instanceShell.connection.unknown")
+  }
+
   const handleCommandPaletteClick = () => {
     showCommandPalette(props.instance.id)
   }
@@ -432,6 +444,14 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     return true
   }
 
+  const focusVariantSelectorControl = () => {
+    const input = leftDrawerContentEl()?.querySelector<HTMLInputElement>("[data-thinking-selector]")
+    if (!input) return false
+    input.focus()
+    setTimeout(() => triggerKeyboardEvent(input, { key: "ArrowDown", code: "ArrowDown", keyCode: 40 }), 10)
+    return true
+  }
+
   createEffect(() => {
     const pending = pendingSidebarAction()
     if (!pending) return
@@ -444,7 +464,12 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
       setPendingSidebarAction(null)
       return
     }
-    const handled = action === "focus-agent-selector" ? focusAgentSelectorControl() : focusModelSelectorControl()
+    const handled =
+      action === "focus-agent-selector"
+        ? focusAgentSelectorControl()
+        : action === "focus-model-selector"
+          ? focusModelSelectorControl()
+          : focusVariantSelectorControl()
     if (handled) {
       setPendingSidebarAction(null)
     }
@@ -702,16 +727,16 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
 
   const leftAppBarButtonLabel = () => {
     const state = leftDrawerState()
-    if (state === "pinned") return "Left drawer pinned"
-    if (state === "floating-closed") return "Open left drawer"
-    return "Close left drawer"
+    if (state === "pinned") return t("instanceShell.leftDrawer.toggle.pinned")
+    if (state === "floating-closed") return t("instanceShell.leftDrawer.toggle.open")
+    return t("instanceShell.leftDrawer.toggle.close")
   }
 
   const rightAppBarButtonLabel = () => {
     const state = rightDrawerState()
-    if (state === "pinned") return "Right drawer pinned"
-    if (state === "floating-closed") return "Open right drawer"
-    return "Close right drawer"
+    if (state === "pinned") return t("instanceShell.rightDrawer.toggle.pinned")
+    if (state === "floating-closed") return t("instanceShell.rightDrawer.toggle.open")
+    return t("instanceShell.rightDrawer.toggle.close")
   }
 
   const leftAppBarButtonIcon = () => {
@@ -841,7 +866,9 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     <div class="flex flex-col h-full min-h-0" ref={setLeftDrawerContentEl}>
       <div class="flex items-start justify-between gap-2 px-4 py-3 border-b border-base">
         <div class="flex flex-col gap-1">
-          <span class="session-sidebar-title text-sm font-semibold uppercase text-primary">Sessions</span>
+          <span class="session-sidebar-title text-sm font-semibold uppercase text-primary">
+            {t("instanceShell.leftPanel.sessionsTitle")}
+          </span>
           <div class="session-sidebar-shortcuts">
             <Show when={keyboardShortcuts().length}>
               <KeyboardHint shortcuts={keyboardShortcuts()} separator=" " showDescription={false} />
@@ -852,8 +879,8 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
           <IconButton
             size="small"
             color="inherit"
-            aria-label="Instance Info"
-            title="Instance Info"
+            aria-label={t("instanceShell.leftPanel.instanceInfo")}
+            title={t("instanceShell.leftPanel.instanceInfo")}
             onClick={() => handleSessionSelect("info")}
           >
             <InfoOutlinedIcon fontSize="small" />
@@ -862,7 +889,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
             <IconButton
               size="small"
               color="inherit"
-              aria-label={leftPinned() ? "Unpin left drawer" : "Pin left drawer"}
+              aria-label={leftPinned() ? t("instanceShell.leftDrawer.unpin") : t("instanceShell.leftDrawer.pin")}
               onClick={() => (leftPinned() ? unpinLeftDrawer() : pinLeftDrawer())}
             >
               {leftPinned() ? <PushPinIcon fontSize="small" /> : <PushPinOutlinedIcon fontSize="small" />}
@@ -901,21 +928,14 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                   onAgentChange={(agent) => props.handleSidebarAgentChange(activeSession().id, agent)}
                 />
 
-                <div class="sidebar-selector-hints" aria-hidden="true">
-                  <span class="hint sidebar-selector-hint sidebar-selector-hint--left">
-                    <Kbd shortcut="cmd+shift+a" />
-                  </span>
-                  <span class="hint sidebar-selector-hint sidebar-selector-hint--right">
-                    <Kbd shortcut="cmd+shift+m" />
-                  </span>
-                </div>
-
                 <ModelSelector
                   instanceId={props.instance.id}
                   sessionId={activeSession().id}
                   currentModel={activeSession().model}
                   onModelChange={(model) => props.handleSidebarModelChange(activeSession().id, model)}
                 />
+
+                <ThinkingSelector instanceId={props.instance.id} currentModel={activeSession().model} />
               </div>
             </>
           )}
@@ -928,19 +948,19 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     const renderPlanSectionContent = () => {
       const sessionId = activeSessionIdForInstance()
       if (!sessionId || sessionId === "info") {
-        return <p class="text-xs text-secondary">Select a session to view plan.</p>
+        return <p class="text-xs text-secondary">{t("instanceShell.plan.noSessionSelected")}</p>
       }
       const todoState = latestTodoState()
       if (!todoState) {
-        return <p class="text-xs text-secondary">Nothing planned yet.</p>
+        return <p class="text-xs text-secondary">{t("instanceShell.plan.empty")}</p>
       }
-      return <TodoListView state={todoState} emptyLabel="Nothing planned yet." showStatusLabel={false} />
+      return <TodoListView state={todoState} emptyLabel={t("instanceShell.plan.empty")} showStatusLabel={false} />
     }
 
     const renderBackgroundProcesses = () => {
       const processes = backgroundProcessList()
       if (processes.length === 0) {
-        return <p class="text-xs text-secondary">No background processes.</p>
+        return <p class="text-xs text-secondary">{t("instanceShell.backgroundProcesses.empty")}</p>
       }
 
       return (
@@ -951,9 +971,13 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                 <div class="flex flex-col gap-1">
                   <span class="text-xs font-semibold text-primary">{process.title}</span>
                   <div class="flex flex-wrap gap-2 text-[11px] text-secondary">
-                    <span>Status: {process.status}</span>
+                    <span>{t("instanceShell.backgroundProcesses.status", { status: process.status })}</span>
                     <Show when={typeof process.outputSizeBytes === "number"}>
-                      <span>Output: {Math.round((process.outputSizeBytes ?? 0) / 1024)}KB</span>
+                      <span>
+                        {t("instanceShell.backgroundProcesses.output", {
+                          sizeKb: Math.round((process.outputSizeBytes ?? 0) / 1024),
+                        })}
+                      </span>
                     </Show>
                   </div>
                 </div>
@@ -962,8 +986,8 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                     type="button"
                     class="button-tertiary w-full p-1 inline-flex items-center justify-center"
                     onClick={() => openBackgroundOutput(process)}
-                    aria-label="Output"
-                    title="Output"
+                    aria-label={t("instanceShell.backgroundProcesses.actions.output")}
+                    title={t("instanceShell.backgroundProcesses.actions.output")}
                   >
                     <TerminalSquare class="h-4 w-4" />
                   </button>
@@ -972,8 +996,8 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                     class="button-tertiary w-full p-1 inline-flex items-center justify-center"
                     disabled={process.status !== "running"}
                     onClick={() => stopBackgroundProcess(process.id)}
-                    aria-label="Stop"
-                    title="Stop"
+                    aria-label={t("instanceShell.backgroundProcesses.actions.stop")}
+                    title={t("instanceShell.backgroundProcesses.actions.stop")}
                   >
                     <XOctagon class="h-4 w-4" />
                   </button>
@@ -981,8 +1005,8 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                     type="button"
                     class="button-tertiary w-full p-1 inline-flex items-center justify-center"
                     onClick={() => terminateBackgroundProcess(process.id)}
-                    aria-label="Terminate"
-                    title="Terminate"
+                    aria-label={t("instanceShell.backgroundProcesses.actions.terminate")}
+                    title={t("instanceShell.backgroundProcesses.actions.terminate")}
                   >
                     <Trash2 class="h-4 w-4" />
                   </button>
@@ -997,17 +1021,17 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     const sections = [
       {
         id: "plan",
-        label: "Plan",
+        labelKey: "instanceShell.rightPanel.sections.plan",
         render: renderPlanSectionContent,
       },
       {
         id: "background-processes",
-        label: "Background Shells",
+        labelKey: "instanceShell.rightPanel.sections.backgroundProcesses",
         render: renderBackgroundProcesses,
       },
       {
         id: "mcp",
-        label: "MCP Servers",
+        labelKey: "instanceShell.rightPanel.sections.mcp",
         render: () => (
           <InstanceServiceStatus
             initialInstance={props.instance}
@@ -1019,7 +1043,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
       },
       {
         id: "lsp",
-        label: "LSP Servers",
+        labelKey: "instanceShell.rightPanel.sections.lsp",
         render: () => (
           <InstanceServiceStatus
             initialInstance={props.instance}
@@ -1031,7 +1055,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
       },
       {
         id: "plugins",
-        label: "Plugins",
+        labelKey: "instanceShell.rightPanel.sections.plugins",
         render: () => (
           <InstanceServiceStatus
             initialInstance={props.instance}
@@ -1059,14 +1083,14 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
       <div class="flex flex-col h-full" ref={setRightDrawerContentEl}>
         <div class="flex items-center justify-between px-4 py-2 border-b border-base">
           <Typography variant="subtitle2" class="uppercase tracking-wide text-xs font-semibold">
-            Status Panel
+            {t("instanceShell.rightPanel.title")}
           </Typography>
           <div class="flex items-center gap-2">
             <Show when={!isPhoneLayout()}>
               <IconButton
                 size="small"
                 color="inherit"
-                aria-label={rightPinned() ? "Unpin right drawer" : "Pin right drawer"}
+                aria-label={rightPinned() ? t("instanceShell.rightDrawer.unpin") : t("instanceShell.rightDrawer.pin")}
                 onClick={() => (rightPinned() ? unpinRightDrawer() : pinRightDrawer())}
               >
                 {rightPinned() ? <PushPinIcon fontSize="small" /> : <PushPinOutlinedIcon fontSize="small" />}
@@ -1090,7 +1114,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                 >
                   <Accordion.Header>
                     <Accordion.Trigger class="w-full flex items-center justify-between gap-3 px-3 py-2 text-[11px] font-semibold uppercase tracking-wide">
-                      <span>{section.label}</span>
+                      <span>{t(section.labelKey)}</span>
                       <ChevronDown
                         class={`h-4 w-4 transition-transform duration-150 ${isSectionExpanded(section.id) ? "rotate-180" : ""}`}
                       />
@@ -1267,17 +1291,17 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                       type="button"
                       class="connection-status-button px-2 py-0.5 text-xs"
                       onClick={handleCommandPaletteClick}
-                      aria-label="Open command palette"
+                      aria-label={t("instanceShell.commandPalette.openAriaLabel")}
                       style={{ flex: "0 0 auto", width: "auto" }}
                     >
-                      Command Palette
+                      {t("instanceShell.commandPalette.button")}
                     </button>
                     <span class="connection-status-shortcut-hint">
                       <Kbd shortcut="cmd+shift+p" />
                     </span>
                     <span
                       class={`status-indicator ${connectionStatusClass()}`}
-                      aria-label={`Connection ${connectionStatus()}`}
+                      aria-label={t("instanceShell.connection.ariaLabel", { status: connectionStatusLabel() })}
                     >
                       <span class="status-dot" />
                     </span>
@@ -1300,11 +1324,15 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
 
                 <div class="flex flex-wrap items-center justify-center gap-2 pb-1">
                   <div class="inline-flex items-center gap-1 rounded-full border border-base px-2 py-0.5 text-xs text-primary">
-                    <span class="uppercase text-[10px] tracking-wide text-primary/70">Used</span>
+                    <span class="uppercase text-[10px] tracking-wide text-primary/70">
+                      {t("instanceShell.metrics.usedLabel")}
+                    </span>
                     <span class="font-semibold text-primary">{formattedUsedTokens()}</span>
                   </div>
                   <div class="inline-flex items-center gap-1 rounded-full border border-base px-2 py-0.5 text-xs text-primary">
-                    <span class="uppercase text-[10px] tracking-wide text-primary/70">Avail</span>
+                    <span class="uppercase text-[10px] tracking-wide text-primary/70">
+                      {t("instanceShell.metrics.availableLabel")}
+                    </span>
                     <span class="font-semibold text-primary">{formattedAvailableTokens()}</span>
                   </div>
                 </div>
@@ -1326,11 +1354,15 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
 
               <Show when={!showingInfoView()}>
                 <div class="inline-flex items-center gap-1 rounded-full border border-base px-2 py-0.5 text-xs text-primary">
-                  <span class="uppercase text-[10px] tracking-wide text-primary/70">Used</span>
+                  <span class="uppercase text-[10px] tracking-wide text-primary/70">
+                    {t("instanceShell.metrics.usedLabel")}
+                  </span>
                   <span class="font-semibold text-primary">{formattedUsedTokens()}</span>
                 </div>
                 <div class="inline-flex items-center gap-1 rounded-full border border-base px-2 py-0.5 text-xs text-primary">
-                  <span class="uppercase text-[10px] tracking-wide text-primary/70">Avail</span>
+                  <span class="uppercase text-[10px] tracking-wide text-primary/70">
+                    {t("instanceShell.metrics.availableLabel")}
+                  </span>
                   <span class="font-semibold text-primary">{formattedAvailableTokens()}</span>
                 </div>
               </Show>
@@ -1346,10 +1378,10 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                 type="button"
                 class="connection-status-button px-2 py-0.5 text-xs"
                 onClick={handleCommandPaletteClick}
-                aria-label="Open command palette"
+                aria-label={t("instanceShell.commandPalette.openAriaLabel")}
                 style={{ flex: "0 0 auto", width: "auto" }}
               >
-                Command Palette
+                {t("instanceShell.commandPalette.button")}
               </button>
               <span class="connection-status-shortcut-hint">
                 <Kbd shortcut="cmd+shift+p" />
@@ -1364,19 +1396,19 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                 <Show when={connectionStatus() === "connected"}>
                   <span class="status-indicator connected">
                     <span class="status-dot" />
-                    <span class="status-text">Connected</span>
+                    <span class="status-text">{t("instanceShell.connection.connected")}</span>
                   </span>
                 </Show>
                 <Show when={connectionStatus() === "connecting"}>
                   <span class="status-indicator connecting">
                     <span class="status-dot" />
-                    <span class="status-text">Connecting...</span>
+                    <span class="status-text">{t("instanceShell.connection.connecting")}</span>
                   </span>
                 </Show>
                 <Show when={connectionStatus() === "error" || connectionStatus() === "disconnected"}>
                   <span class="status-indicator disconnected">
                     <span class="status-dot" />
-                    <span class="status-text">Disconnected</span>
+                    <span class="status-text">{t("instanceShell.connection.disconnected")}</span>
                   </span>
                 </Show>
               </div>
@@ -1412,8 +1444,8 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                 fallback={
                   <div class="flex items-center justify-center h-full">
                     <div class="text-center text-gray-500 dark:text-gray-400">
-                      <p class="mb-2">No session selected</p>
-                      <p class="text-sm">Select a session to view messages</p>
+                      <p class="mb-2">{t("instanceShell.empty.title")}</p>
+                      <p class="text-sm">{t("instanceShell.empty.description")}</p>
                     </div>
                   </div>
                 }

packages/ui/src/components/logs-view.tsx

@@ -1,6 +1,7 @@
 import { Component, For, createSignal, createEffect, Show, onMount, onCleanup, createMemo } from "solid-js"
 import { instances, getInstanceLogs, isInstanceLogStreaming, setInstanceLogStreaming } from "../stores/instances"
 import { ChevronDown } from "lucide-solid"
+import { useI18n } from "../lib/i18n"
 
 interface LogsViewProps {
   instanceId: string
@@ -9,6 +10,7 @@ interface LogsViewProps {
 const logsScrollState = new Map<string, { scrollTop: number; autoScroll: boolean }>()
 
 const LogsView: Component<LogsViewProps> = (props) => {
+  const { t } = useI18n()
   let scrollRef: HTMLDivElement | undefined
   const savedState = logsScrollState.get(props.instanceId)
   const [autoScroll, setAutoScroll] = createSignal(savedState?.autoScroll ?? false)
@@ -83,18 +85,18 @@ const LogsView: Component<LogsViewProps> = (props) => {
   return (
     <div class="log-container">
       <div class="log-header">
-        <h3 class="text-sm font-medium" style="color: var(--text-secondary)">Server Logs</h3>
+        <h3 class="text-sm font-medium" style="color: var(--text-secondary)">{t("logsView.title")}</h3>
         <div class="flex items-center gap-2">
           <Show
             when={streamingEnabled()}
             fallback={
               <button type="button" class="button-tertiary" onClick={handleEnableLogs}>
-                Show server logs
+                {t("logsView.actions.show")}
               </button>
             }
           >
             <button type="button" class="button-tertiary" onClick={handleDisableLogs}>
-              Hide server logs
+              {t("logsView.actions.hide")}
             </button>
           </Show>
         </div>
@@ -103,7 +105,7 @@ const LogsView: Component<LogsViewProps> = (props) => {
       <Show when={instance()?.environmentVariables && Object.keys(instance()?.environmentVariables!).length > 0}>
         <div class="env-vars-container">
           <div class="env-vars-title">
-            Environment Variables ({Object.keys(instance()?.environmentVariables!).length})
+            {t("logsView.envVars.title", { count: Object.keys(instance()?.environmentVariables!).length })}
           </div>
           <div class="space-y-1">
             <For each={Object.entries(instance()?.environmentVariables!)}>
@@ -130,17 +132,17 @@ const LogsView: Component<LogsViewProps> = (props) => {
           when={streamingEnabled()}
           fallback={
             <div class="log-paused-state">
-              <p class="log-paused-title">Server logs are paused</p>
-              <p class="log-paused-description">Enable streaming to watch your OpenCode server activity.</p>
+              <p class="log-paused-title">{t("logsView.paused.title")}</p>
+              <p class="log-paused-description">{t("logsView.paused.description")}</p>
               <button type="button" class="button-primary" onClick={handleEnableLogs}>
-                Show server logs
+                {t("logsView.actions.show")}
               </button>
             </div>
           }
         >
           <Show
             when={logs().length > 0}
-            fallback={<div class="log-empty-state">Waiting for server output...</div>}
+            fallback={<div class="log-empty-state">{t("logsView.empty.waiting")}</div>}
           >
             <For each={logs()}>
               {(entry) => (
@@ -160,7 +162,7 @@ const LogsView: Component<LogsViewProps> = (props) => {
           class="scroll-to-bottom"
         >
           <ChevronDown class="w-4 h-4" />
-          Scroll to bottom
+          {t("logsView.scrollToBottom")}
         </button>
       </Show>
     </div>

packages/ui/src/components/markdown.tsx

@@ -4,6 +4,7 @@ import { useGlobalCache } from "../lib/hooks/use-global-cache"
 import type { TextPart, RenderCache } from "../types/message"
 import { getLogger } from "../lib/logger"
 import { copyToClipboard } from "../lib/clipboard"
+import { useI18n } from "../lib/i18n"
 
 const log = getLogger("session")
 
@@ -34,6 +35,7 @@ interface MarkdownProps {
 }
 
 export function Markdown(props: MarkdownProps) {
+  const { t } = useI18n()
   const [html, setHtml] = createSignal("")
   let containerRef: HTMLDivElement | undefined
   let latestRequestedText = ""
@@ -145,14 +147,14 @@ export function Markdown(props: MarkdownProps) {
           const copyText = copyButton.querySelector(".copy-text")
           if (copyText) {
             if (success) {
-              copyText.textContent = "Copied!"
+              copyText.textContent = t("markdown.codeBlock.copy.copied")
               setTimeout(() => {
-                copyText.textContent = "Copy"
+                copyText.textContent = t("markdown.codeBlock.copy.label")
               }, 2000)
             } else {
-              copyText.textContent = "Failed"
+              copyText.textContent = t("markdown.codeBlock.copy.failed")
               setTimeout(() => {
-                copyText.textContent = "Copy"
+                copyText.textContent = t("markdown.codeBlock.copy.label")
               }, 2000)
             }
           }

packages/ui/src/components/message-block.tsx

@@ -11,6 +11,7 @@ import { messageStoreBus } from "../stores/message-v2/bus"
 import { formatTokenTotal } from "../lib/formatters"
 import { sessions, setActiveParentSession, setActiveSession } from "../stores/sessions"
 import { setActiveInstanceId } from "../stores/instances"
+import { useI18n } from "../lib/i18n"
 
 const TOOL_ICON = "🔧"
 const USER_BORDER_COLOR = "var(--message-user-border)"
@@ -236,6 +237,7 @@ interface MessageBlockProps {
 }
 
 export default function MessageBlock(props: MessageBlockProps) {
+  const { t } = useI18n()
   const record = createMemo(() => props.store().getMessage(props.messageId))
   const messageInfo = createMemo(() => props.store().getMessageInfo(props.messageId))
   const sessionCache = getSessionRenderCache(props.instanceId, props.sessionId)
@@ -465,8 +467,8 @@ export default function MessageBlock(props: MessageBlockProps) {
                         <div class="tool-call-header-label">
                           <div class="tool-call-header-meta">
                             <span class="tool-call-icon">{TOOL_ICON}</span>
-                            <span>Tool Call</span>
-                            <span class="tool-name">{toolItem.toolPart.tool || "unknown"}</span>
+                            <span>{t("messageBlock.tool.header")}</span>
+                            <span class="tool-name">{toolItem.toolPart.tool || t("messageBlock.tool.unknown")}</span>
                           </div>
                           <Show when={taskSessionId}>
                             <button
@@ -474,9 +476,9 @@ export default function MessageBlock(props: MessageBlockProps) {
                               type="button"
                               disabled={!taskLocation}
                               onClick={handleGoToTaskSession}
-                              title={!taskLocation ? "Session not available yet" : "Go to session"}
+                              title={!taskLocation ? t("messageBlock.tool.goToSession.unavailableTitle") : t("messageBlock.tool.goToSession.title")}
                             >
-                              Go to Session
+                              {t("messageBlock.tool.goToSession.label")}
                             </button>
                           </Show>
                         </div>
@@ -538,8 +540,9 @@ interface StepCardProps {
 }
 
 function CompactionCard(props: { part: ClientPart; messageInfo?: MessageInfo; borderColor?: string }) {
+  const { t } = useI18n()
   const isAuto = () => Boolean((props.part as any)?.auto)
-  const label = () => (isAuto() ? "Session auto-compacted" : "Session compacted by you")
+  const label = () => (isAuto() ? t("messageBlock.compaction.autoLabel") : t("messageBlock.compaction.manualLabel"))
   const borderColor = () => props.borderColor ?? (isAuto() ? "var(--session-status-compacting-fg)" : USER_BORDER_COLOR)
 
   const containerClass = () =>
@@ -550,7 +553,7 @@ function CompactionCard(props: { part: ClientPart; messageInfo?: MessageInfo; bo
       class={containerClass()}
       style={{ "border-left": `4px solid ${borderColor()}` }}
       role="status"
-      aria-label="Session compaction"
+      aria-label={t("messageBlock.compaction.ariaLabel")}
     >
       <div class="message-compaction-row">
         <FoldVertical class="message-compaction-icon w-4 h-4" aria-hidden="true" />
@@ -561,6 +564,7 @@ function CompactionCard(props: { part: ClientPart; messageInfo?: MessageInfo; bo
 }
 
 function StepCard(props: StepCardProps) {
+  const { t } = useI18n()
   const timestamp = () => {
     const value = props.messageInfo?.time?.created ?? (props.part as any)?.time?.start ?? Date.now()
     const date = new Date(value)
@@ -607,12 +611,12 @@ function StepCard(props: StepCardProps) {
 
   const renderUsageChips = (usage: NonNullable<ReturnType<typeof usageStats>>) => {
     const entries = [
-      { label: "Input", value: usage.input, formatter: formatTokenTotal },
-      { label: "Output", value: usage.output, formatter: formatTokenTotal },
-      { label: "Reasoning", value: usage.reasoning, formatter: formatTokenTotal },
-      { label: "Cache Read", value: usage.cacheRead, formatter: formatTokenTotal },
-      { label: "Cache Write", value: usage.cacheWrite, formatter: formatTokenTotal },
-      { label: "Cost", value: usage.cost, formatter: formatCostValue },
+      { label: t("messageBlock.usage.input"), value: usage.input, formatter: formatTokenTotal },
+      { label: t("messageBlock.usage.output"), value: usage.output, formatter: formatTokenTotal },
+      { label: t("messageBlock.usage.reasoning"), value: usage.reasoning, formatter: formatTokenTotal },
+      { label: t("messageBlock.usage.cacheRead"), value: usage.cacheRead, formatter: formatTokenTotal },
+      { label: t("messageBlock.usage.cacheWrite"), value: usage.cacheWrite, formatter: formatTokenTotal },
+      { label: t("messageBlock.usage.cost"), value: usage.cost, formatter: formatCostValue },
     ]
 
     return (
@@ -647,8 +651,8 @@ function StepCard(props: StepCardProps) {
           <div class="message-step-title-left">
             <Show when={props.showAgentMeta && (agentIdentifier() || modelIdentifier())}>
               <span class="message-step-meta-inline">
-                <Show when={agentIdentifier()}>{(value) => <span>Agent: {value()}</span>}</Show>
-                <Show when={modelIdentifier()}>{(value) => <span>Model: {value()}</span>}</Show>
+                <Show when={agentIdentifier()}>{(value) => <span>{t("messageBlock.step.agentLabel", { agent: value() })}</span>}</Show>
+                <Show when={modelIdentifier()}>{(value) => <span>{t("messageBlock.step.modelLabel", { model: value() })}</span>}</Show>
               </span>
             </Show>
           </div>
@@ -675,6 +679,7 @@ interface ReasoningCardProps {
 }
 
 function ReasoningCard(props: ReasoningCardProps) {
+  const { t } = useI18n()
   const [expanded, setExpanded] = createSignal(Boolean(props.defaultExpanded))
 
   createEffect(() => {
@@ -746,19 +751,29 @@ function ReasoningCard(props: ReasoningCardProps) {
         class="message-reasoning-toggle"
         onClick={toggle}
         aria-expanded={expanded()}
-        aria-label={expanded() ? "Collapse thinking" : "Expand thinking"}
+        aria-label={expanded() ? t("messageBlock.reasoning.collapseAriaLabel") : t("messageBlock.reasoning.expandAriaLabel")}
       >
         <span class="message-reasoning-label flex flex-wrap items-center gap-2">
-          <span>Thinking</span>
+          <span>{t("messageBlock.reasoning.thinkingLabel")}</span>
           <Show when={props.showAgentMeta && (agentIdentifier() || modelIdentifier())}>
             <span class="message-step-meta-inline">
-              <Show when={agentIdentifier()}>{(value) => <span class="font-medium text-[var(--message-assistant-border)]">Agent: {value()}</span>}</Show>
-              <Show when={modelIdentifier()}>{(value) => <span class="font-medium text-[var(--message-assistant-border)]">Model: {value()}</span>}</Show>
+              <Show when={agentIdentifier()}>
+                {(value) => (
+                  <span class="font-medium text-[var(--message-assistant-border)]">{t("messageBlock.step.agentLabel", { agent: value() })}</span>
+                )}
+              </Show>
+              <Show when={modelIdentifier()}>
+                {(value) => (
+                  <span class="font-medium text-[var(--message-assistant-border)]">{t("messageBlock.step.modelLabel", { model: value() })}</span>
+                )}
+              </Show>
             </span>
           </Show>
         </span>
         <span class="message-reasoning-meta">
-          <span class="message-reasoning-indicator">{expanded() ? "Hide" : "View"}</span>
+          <span class="message-reasoning-indicator">
+            {expanded() ? t("messageBlock.reasoning.indicator.hide") : t("messageBlock.reasoning.indicator.view")}
+          </span>
           <span class="message-reasoning-time">{timestamp()}</span>
         </span>
       </button>
@@ -766,7 +781,7 @@ function ReasoningCard(props: ReasoningCardProps) {
       <Show when={expanded()}>
         <div class="message-reasoning-expanded">
           <div class="message-reasoning-body">
-            <div class="message-reasoning-output" role="region" aria-label="Reasoning details">
+            <div class="message-reasoning-output" role="region" aria-label={t("messageBlock.reasoning.detailsAriaLabel")}>
               <pre class="message-reasoning-text">{reasoningText() || ""}</pre>
             </div>
           </div>

packages/ui/src/components/message-item.tsx

@@ -4,6 +4,7 @@ import { partHasRenderableText } from "../types/message"
 import type { MessageRecord } from "../stores/message-v2/types"
 import MessagePart from "./message-part"
 import { copyToClipboard } from "../lib/clipboard"
+import { useI18n } from "../lib/i18n"
 
 interface MessageItemProps {
   record: MessageRecord
@@ -19,6 +20,7 @@ interface MessageItemProps {
 }
 
 export default function MessageItem(props: MessageItemProps) {
+  const { t } = useI18n()
   const [copied, setCopied] = createSignal(false)
 
   const isUser = () => props.record.role === "user"
@@ -49,15 +51,15 @@ export default function MessageItem(props: MessageItemProps) {
     }
     const url = part.url || ""
     if (url.startsWith("data:")) {
-      return "attachment"
+      return t("messageItem.attachment.defaultName")
     }
     try {
       const parsed = new URL(url)
       const segments = parsed.pathname.split("/")
-      return segments.pop() || "attachment"
+      return segments.pop() || t("messageItem.attachment.defaultName")
     } catch (error) {
       const fallback = url.split("/").pop()
-      return fallback && fallback.length > 0 ? fallback : "attachment"
+      return fallback && fallback.length > 0 ? fallback : t("messageItem.attachment.defaultName")
     }
   }
 
@@ -112,16 +114,16 @@ export default function MessageItem(props: MessageItemProps) {
 
     const error = info.error
     if (error.name === "ProviderAuthError") {
-      return error.data?.message || "Authentication error"
+      return error.data?.message || t("messageItem.errors.authenticationFallback")
     }
     if (error.name === "MessageOutputLengthError") {
-      return "Message output length exceeded"
+      return t("messageItem.errors.outputLengthExceeded")
     }
     if (error.name === "MessageAbortedError") {
-      return "Request was aborted"
+      return t("messageItem.errors.requestAborted")
     }
     if (error.name === "UnknownError") {
-      return error.data?.message || "Unknown error occurred"
+      return error.data?.message || t("messageItem.errors.unknownFallback")
     }
     return null
   }
@@ -170,7 +172,7 @@ export default function MessageItem(props: MessageItemProps) {
       ? "message-item-base bg-[var(--message-user-bg)] border-l-4 border-[var(--message-user-border)]"
       : "message-item-base assistant-message bg-[var(--message-assistant-bg)] border-l-4 border-[var(--message-assistant-border)]"
 
-  const speakerLabel = () => (isUser() ? "You" : "Assistant")
+  const speakerLabel = () => (isUser() ? t("messageItem.speaker.you") : t("messageItem.speaker.assistant"))
 
   const agentIdentifier = () => {
     if (isUser()) return ""
@@ -195,10 +197,10 @@ export default function MessageItem(props: MessageItemProps) {
     const agent = agentIdentifier()
     const model = modelIdentifier()
     if (agent) {
-      segments.push(`Agent: ${agent}`)
+      segments.push(t("messageItem.agentMeta.agentLabel", { agent }))
     }
     if (model) {
-      segments.push(`Model: ${model}`)
+      segments.push(t("messageItem.agentMeta.modelLabel", { model }))
     }
     return segments.join(" • ")
   }
@@ -220,30 +222,30 @@ export default function MessageItem(props: MessageItemProps) {
                 <button
                   class="message-action-button"
                   onClick={handleRevert}
-                  title="Revert to this message"
-                  aria-label="Revert to this message"
+                  title={t("messageItem.actions.revertTitle")}
+                  aria-label={t("messageItem.actions.revertTitle")}
                 >
-                  Revert
+                  {t("messageItem.actions.revert")}
                 </button>
               </Show>
               <Show when={props.onFork}>
                 <button
                   class="message-action-button"
                   onClick={() => props.onFork?.(props.record.id)}
-                  title="Fork from this message"
-                  aria-label="Fork from this message"
+                  title={t("messageItem.actions.forkTitle")}
+                  aria-label={t("messageItem.actions.forkTitle")}
                 >
-                  Fork
+                  {t("messageItem.actions.fork")}
                 </button>
               </Show>
               <button
                 class="message-action-button"
                 onClick={handleCopy}
-                title="Copy message"
-                aria-label="Copy message"
+                title={t("messageItem.actions.copyTitle")}
+                aria-label={t("messageItem.actions.copyTitle")}
               >
-                <Show when={copied()} fallback="Copy">
-                  Copied!
+                <Show when={copied()} fallback={t("messageItem.actions.copy")}>
+                  {t("messageItem.actions.copied")}
                 </Show>
               </button>
             </div>
@@ -252,11 +254,11 @@ export default function MessageItem(props: MessageItemProps) {
             <button
               class="message-action-button"
               onClick={handleCopy}
-              title="Copy message"
-              aria-label="Copy message"
+              title={t("messageItem.actions.copyTitle")}
+              aria-label={t("messageItem.actions.copyTitle")}
             >
-              <Show when={copied()} fallback="Copy">
-                Copied!
+              <Show when={copied()} fallback={t("messageItem.actions.copy")}>
+                {t("messageItem.actions.copied")}
               </Show>
             </button>
           </Show>
@@ -269,7 +271,7 @@ export default function MessageItem(props: MessageItemProps) {
 
 
         <Show when={props.isQueued && isUser()}>
-          <div class="message-queued-badge">QUEUED</div>
+          <div class="message-queued-badge">{t("messageItem.status.queued")}</div>
         </Show>
 
         <Show when={errorMessage()}>
@@ -278,7 +280,7 @@ export default function MessageItem(props: MessageItemProps) {
 
         <Show when={isGenerating()}>
           <div class="message-generating">
-            <span class="generating-spinner">⏳</span> Generating...
+            <span class="generating-spinner">⏳</span> {t("messageItem.status.generating")}
           </div>
         </Show>
 
@@ -319,7 +321,7 @@ export default function MessageItem(props: MessageItemProps) {
                       type="button"
                       onClick={() => void handleAttachmentDownload(attachment)}
                       class="attachment-download"
-                      aria-label={`Download ${name}`}
+                      aria-label={t("messageItem.attachment.downloadAriaLabel", { name })}
                     >
                       <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2" />
@@ -340,12 +342,12 @@ export default function MessageItem(props: MessageItemProps) {
 
         <Show when={props.record.status === "sending"}>
           <div class="message-sending">
-            <span class="generating-spinner">●</span> Sending...
+            <span class="generating-spinner">●</span> {t("messageItem.status.sending")}
           </div>
         </Show>
 
         <Show when={props.record.status === "error"}>
-          <div class="message-error">⚠ Message failed to send</div>
+          <div class="message-error">⚠ {t("messageItem.status.failedToSend")}</div>
         </Show>
       </div>
     </div>

packages/ui/src/components/message-list-header.tsx

@@ -1,5 +1,6 @@
 import { Show } from "solid-js"
 import Kbd from "./kbd"
+import { useI18n } from "../lib/i18n"
 
 const METRIC_CHIP_CLASS = "inline-flex items-center gap-1 rounded-full border border-base px-2 py-0.5 text-xs text-primary"
 const METRIC_LABEL_CLASS = "uppercase text-[10px] tracking-wide text-primary/70"
@@ -17,6 +18,7 @@ interface MessageListHeaderProps {
 }
 
 export default function MessageListHeader(props: MessageListHeaderProps) {
+  const { t } = useI18n()
 
   const hasAvailableTokens = () => typeof props.availableTokens === "number"
   const availableDisplay = () => (hasAvailableTokens() ? props.formatTokens(props.availableTokens as number) : "--")
@@ -29,7 +31,7 @@ export default function MessageListHeader(props: MessageListHeaderProps) {
             type="button"
             class="session-sidebar-menu-button"
             onClick={() => props.onSidebarToggle?.()}
-            aria-label="Open session list"
+            aria-label={t("messageListHeader.sidebar.openSessionListAriaLabel")}
           >
             <span aria-hidden="true" class="session-sidebar-menu-icon">☰</span>
           </button>
@@ -39,11 +41,11 @@ export default function MessageListHeader(props: MessageListHeaderProps) {
       <div class="connection-status-text connection-status-info">
         <div class="connection-status-usage">
           <div class={METRIC_CHIP_CLASS}>
-            <span class={METRIC_LABEL_CLASS}>Used</span>
+            <span class={METRIC_LABEL_CLASS}>{t("messageListHeader.metrics.usedLabel")}</span>
             <span class="font-semibold text-primary">{props.formatTokens(props.usedTokens)}</span>
           </div>
           <div class={METRIC_CHIP_CLASS}>
-            <span class={METRIC_LABEL_CLASS}>Avail</span>
+            <span class={METRIC_LABEL_CLASS}>{t("messageListHeader.metrics.availableLabel")}</span>
             <span class="font-semibold text-primary">{hasAvailableTokens() ? availableDisplay() : "--"}</span>
           </div>
         </div>
@@ -51,8 +53,13 @@ export default function MessageListHeader(props: MessageListHeaderProps) {
 
       <div class="connection-status-text connection-status-shortcut">
         <div class="connection-status-shortcut-action">
-          <button type="button" class="connection-status-button" onClick={props.onCommandPalette} aria-label="Open command palette">
-            Command Palette
+          <button
+            type="button"
+            class="connection-status-button"
+            onClick={props.onCommandPalette}
+            aria-label={t("messageListHeader.commandPalette.ariaLabel")}
+          >
+            {t("messageListHeader.commandPalette.button")}
           </button>
           <span class="connection-status-shortcut-hint">
             <Kbd shortcut="cmd+shift+p" />
@@ -64,19 +71,19 @@ export default function MessageListHeader(props: MessageListHeaderProps) {
         <Show when={props.connectionStatus === "connected"}>
           <span class="status-indicator connected">
             <span class="status-dot" />
-            <span class="status-text">Connected</span>
+            <span class="status-text">{t("messageListHeader.connection.connected")}</span>
           </span>
         </Show>
         <Show when={props.connectionStatus === "connecting"}>
           <span class="status-indicator connecting">
             <span class="status-dot" />
-            <span class="status-text">Connecting...</span>
+            <span class="status-text">{t("messageListHeader.connection.connecting")}</span>
           </span>
         </Show>
         <Show when={props.connectionStatus === "error" || props.connectionStatus === "disconnected"}>
           <span class="status-indicator disconnected">
             <span class="status-dot" />
-            <span class="status-text">Disconnected</span>
+            <span class="status-text">{t("messageListHeader.connection.disconnected")}</span>
           </span>
         </Show>
       </div>

packages/ui/src/components/message-section.tsx

@@ -6,6 +6,7 @@ import { useConfig } from "../stores/preferences"
 import { getSessionInfo } from "../stores/sessions"
 import { messageStoreBus } from "../stores/message-v2/bus"
 import { useScrollCache } from "../lib/hooks/use-scroll-cache"
+import { useI18n } from "../lib/i18n"
 import type { InstanceMessageStore } from "../stores/message-v2/instance-store"
 
 const SCROLL_SCOPE = "session"
@@ -31,6 +32,7 @@ export interface MessageSectionProps {
 
 export default function MessageSection(props: MessageSectionProps) {
   const { preferences } = useConfig()
+  const { t } = useI18n()
   const showUsagePreference = () => preferences().showUsageMetrics ?? true
   const showTimelineToolsPreference = () => preferences().showTimelineTools ?? true
   const store = createMemo<InstanceMessageStore>(() => messageStoreBus.getOrCreate(props.instanceId))
@@ -107,7 +109,7 @@ export default function MessageSection(props: MessageSectionProps) {
       const record = resolvedStore.getMessage(messageId)
       if (!record) return
       seenTimelineMessageIds.add(messageId)
-      const built = buildTimelineSegments(props.instanceId, record)
+      const built = buildTimelineSegments(props.instanceId, record, t)
       built.forEach((segment) => {
         const key = makeTimelineKey(segment)
         if (seenTimelineSegmentKeys.has(key)) return
@@ -121,7 +123,7 @@ export default function MessageSection(props: MessageSectionProps) {
   function appendTimelineForMessage(messageId: string) {
     const record = untrack(() => store().getMessage(messageId))
     if (!record) return
-    const built = buildTimelineSegments(props.instanceId, record)
+    const built = buildTimelineSegments(props.instanceId, record, t)
     if (built.length === 0) return
     const newSegments: TimelineSegment[] = []
     built.forEach((segment) => {
@@ -558,7 +560,7 @@ export default function MessageSection(props: MessageSectionProps) {
     }
     previousLastTimelineMessageId = lastId
     previousLastTimelinePartCount = partCount
-    const built = buildTimelineSegments(props.instanceId, record)
+    const built = buildTimelineSegments(props.instanceId, record, t)
     const newSegments: TimelineSegment[] = []
     built.forEach((segment) => {
       const key = makeTimelineKey(segment)
@@ -753,19 +755,19 @@ export default function MessageSection(props: MessageSectionProps) {
               <div class="empty-state">
                 <div class="empty-state-content">
                   <div class="flex flex-col items-center gap-3 mb-6">
-                    <img src={codeNomadLogo} alt="CodeNomad logo" class="h-48 w-auto" loading="lazy" />
-                    <h1 class="text-3xl font-semibold text-primary">CodeNomad</h1>
+                    <img src={codeNomadLogo} alt={t("messageSection.empty.logoAlt")} class="h-48 w-auto" loading="lazy" />
+                    <h1 class="text-3xl font-semibold text-primary">{t("messageSection.empty.brandTitle")}</h1>
                   </div>
-                  <h3>Start a conversation</h3>
-                  <p>Type a message below or open the Command Palette:</p>
+                  <h3>{t("messageSection.empty.title")}</h3>
+                  <p>{t("messageSection.empty.description")}</p>
                   <ul>
                     <li>
-                      <span>Command Palette</span>
+                      <span>{t("messageSection.empty.tips.commandPalette")}</span>
                       <Kbd shortcut="cmd+shift+p" class="ml-2" />
                     </li>
-                    <li>Ask about your codebase</li>
+                    <li>{t("messageSection.empty.tips.askAboutCodebase")}</li>
                     <li>
-                      Attach files with <code>@</code>
+                      {t("messageSection.empty.tips.attachFilesPrefix")} <code>@</code>
                     </li>
                   </ul>
                 </div>
@@ -775,7 +777,7 @@ export default function MessageSection(props: MessageSectionProps) {
             <Show when={props.loading}>
               <div class="loading-state">
                 <div class="spinner" />
-                <p>Loading messages...</p>
+                <p>{t("messageSection.loading.messages")}</p>
               </div>
             </Show>
  
@@ -803,7 +805,7 @@ export default function MessageSection(props: MessageSectionProps) {
           <Show when={showScrollTopButton() || showScrollBottomButton()}>
             <div class="message-scroll-button-wrapper">
               <Show when={showScrollTopButton()}>
-                <button type="button" class="message-scroll-button" onClick={() => scrollToTop()} aria-label="Scroll to first message">
+                <button type="button" class="message-scroll-button" onClick={() => scrollToTop()} aria-label={t("messageSection.scroll.toFirstAriaLabel")}>
                   <span class="message-scroll-icon" aria-hidden="true">↑</span>
                 </button>
               </Show>
@@ -812,7 +814,7 @@ export default function MessageSection(props: MessageSectionProps) {
                   type="button"
                   class="message-scroll-button"
                   onClick={() => scrollToBottom(false, { suppressAutoAnchor: false })}
-                  aria-label="Scroll to latest message"
+                  aria-label={t("messageSection.scroll.toLatestAriaLabel")}
                 >
                   <span class="message-scroll-icon" aria-hidden="true">↓</span>
                 </button>
@@ -828,10 +830,10 @@ export default function MessageSection(props: MessageSectionProps) {
               >
                 <div class="message-quote-button-group">
                   <button type="button" class="message-quote-button" onClick={() => handleQuoteSelectionRequest("quote")}>
-                    Add as quote
+                    {t("messageSection.quote.addAsQuote")}
                   </button>
                   <button type="button" class="message-quote-button" onClick={() => handleQuoteSelectionRequest("code")}>
-                    Add as code
+                    {t("messageSection.quote.addAsCode")}
                   </button>
                 </div>
               </div>

packages/ui/src/components/message-timeline.tsx

@@ -6,6 +6,7 @@ import type { MessageRecord } from "../stores/message-v2/types"
 import { buildRecordDisplayData } from "../stores/message-v2/record-display-cache"
 import { getToolIcon } from "./tool-call/utils"
 import { User as UserIcon, Bot as BotIcon, FoldVertical, ShieldAlert } from "lucide-solid"
+import { useI18n } from "../lib/i18n"
 
 export type TimelineSegmentType = "user" | "assistant" | "tool" | "compaction"
 
@@ -29,14 +30,6 @@ interface MessageTimelineProps {
   showToolSegments?: boolean
 }
 
-const SEGMENT_LABELS: Record<TimelineSegmentType, string> = {
-  user: "You",
-  assistant: "Asst",
-  tool: "Tool",
-  compaction: "Compaction",
-}
-
-const TOOL_FALLBACK_LABEL = "Tool Call"
 const MAX_TOOLTIP_LENGTH = 220
 
 type ToolCallPart = Extract<ClientPart, { type: "tool" }>
@@ -90,7 +83,7 @@ function collectReasoningText(part: ClientPart): string {
   return ""
 }
 
-function collectTextFromPart(part: ClientPart): string {
+function collectTextFromPart(part: ClientPart, t: (key: string, params?: Record<string, unknown>) => string): string {
   if (!part) return ""
   if (typeof (part as any).text === "string") {
     return (part as any).text as string
@@ -106,26 +99,28 @@ function collectTextFromPart(part: ClientPart): string {
   }
   if (part.type === "file") {
     const filename = (part as any)?.filename
-    return typeof filename === "string" && filename.length > 0 ? `[File] ${filename}` : "Attachment"
+    return typeof filename === "string" && filename.length > 0
+      ? t("messageTimeline.text.filePrefix", { filename })
+      : t("messageTimeline.text.attachment")
   }
   return ""
 }
 
-function getToolTitle(part: ToolCallPart): string {
+function getToolTitle(part: ToolCallPart, t: (key: string, params?: Record<string, unknown>) => string): string {
   const metadata = (((part as unknown as { state?: { metadata?: unknown } })?.state?.metadata) || {}) as { title?: unknown }
   const title = typeof metadata.title === "string" && metadata.title.length > 0 ? metadata.title : undefined
   if (title) return title
   if (typeof part.tool === "string" && part.tool.length > 0) {
     return part.tool
   }
-  return TOOL_FALLBACK_LABEL
+  return t("messageTimeline.tool.fallbackLabel")
 }
 
-function getToolTypeLabel(part: ToolCallPart): string {
+function getToolTypeLabel(part: ToolCallPart, t: (key: string, params?: Record<string, unknown>) => string): string {
   if (typeof part.tool === "string" && part.tool.trim().length > 0) {
     return part.tool.trim().slice(0, 4)
   }
-  return TOOL_FALLBACK_LABEL.slice(0, 4)
+  return t("messageTimeline.tool.fallbackLabel").slice(0, 4)
 }
 
 function formatTextsTooltip(texts: string[], fallback: string): string {
@@ -139,20 +134,34 @@ function formatTextsTooltip(texts: string[], fallback: string): string {
   return fallback
 }
 
-function formatToolTooltip(titles: string[]): string {
+function formatToolTooltip(
+  titles: string[],
+  t: (key: string, params?: Record<string, unknown>) => string,
+): string {
   if (titles.length === 0) {
-    return TOOL_FALLBACK_LABEL
+    return t("messageTimeline.tool.fallbackLabel")
   }
-  return truncateText(`${TOOL_FALLBACK_LABEL}: ${titles.join(", ")}`)
+  return truncateText(`${t("messageTimeline.tool.fallbackLabel")}: ${titles.join(", ")}`)
 }
 
-export function buildTimelineSegments(instanceId: string, record: MessageRecord): TimelineSegment[] {
+export function buildTimelineSegments(
+  instanceId: string,
+  record: MessageRecord,
+  t: (key: string, params?: Record<string, unknown>) => string,
+): TimelineSegment[] {
   if (!record) return []
   const { orderedParts } = buildRecordDisplayData(instanceId, record)
   if (!orderedParts || orderedParts.length === 0) {
     return []
   }
 
+  const segmentLabel = (type: TimelineSegmentType) => {
+    if (type === "user") return t("messageTimeline.segment.user.label")
+    if (type === "assistant") return t("messageTimeline.segment.assistant.label")
+    if (type === "compaction") return t("messageTimeline.segment.compaction.label")
+    return t("messageTimeline.tool.fallbackLabel").slice(0, 4)
+  }
+
   const result: TimelineSegment[] = []
   let segmentIndex = 0
   let pending: PendingSegment | null = null
@@ -164,14 +173,14 @@ export function buildTimelineSegments(instanceId: string, record: MessageRecord)
     }
     const isToolSegment = pending.type === "tool"
     const label = isToolSegment
-      ? pending.toolTypeLabels[0] || TOOL_FALLBACK_LABEL.slice(0, 4)
-      : SEGMENT_LABELS[pending.type]
+      ? pending.toolTypeLabels[0] || segmentLabel("tool")
+      : segmentLabel(pending.type)
     const shortLabel = isToolSegment ? pending.toolIcons[0] || getToolIcon("tool") : undefined
     const tooltip = isToolSegment
-      ? formatToolTooltip(pending.toolTitles)
+      ? formatToolTooltip(pending.toolTitles, t)
       : formatTextsTooltip(
           [...pending.texts, ...pending.reasoningTexts],
-          pending.type === "user" ? "User message" : "Assistant response",
+          pending.type === "user" ? t("messageTimeline.tooltip.userFallback") : t("messageTimeline.tooltip.assistantFallback"),
         )
  
     result.push({
@@ -204,8 +213,8 @@ export function buildTimelineSegments(instanceId: string, record: MessageRecord)
     if (part.type === "tool") {
       const target = ensureSegment("tool")
       const toolPart = part as ToolCallPart
-      target.toolTitles.push(getToolTitle(toolPart))
-      target.toolTypeLabels.push(getToolTypeLabel(toolPart))
+      target.toolTitles.push(getToolTitle(toolPart, t))
+      target.toolTypeLabels.push(getToolTypeLabel(toolPart, t))
       target.toolIcons.push(getToolIcon(typeof toolPart.tool === "string" ? toolPart.tool : "tool"))
       if (typeof toolPart.id === "string" && toolPart.id.length > 0) {
         target.toolPartIds.push(toolPart.id)
@@ -230,8 +239,8 @@ export function buildTimelineSegments(instanceId: string, record: MessageRecord)
         id: `${record.id}:${segmentIndex}`,
         messageId: record.id,
         type: "compaction",
-        label: SEGMENT_LABELS.compaction,
-        tooltip: isAuto ? "Auto Compaction" : "User Compaction",
+        label: segmentLabel("compaction"),
+        tooltip: isAuto ? t("messageTimeline.tooltip.compaction.auto") : t("messageTimeline.tooltip.compaction.manual"),
         variant: isAuto ? "auto" : "manual",
       })
       segmentIndex += 1
@@ -242,7 +251,7 @@ export function buildTimelineSegments(instanceId: string, record: MessageRecord)
       continue
     }
  
-    const text = collectTextFromPart(part)
+    const text = collectTextFromPart(part, t)
     if (text.trim().length === 0) continue
     const target = ensureSegment(defaultContentType)
     if (target) {
@@ -258,6 +267,7 @@ export function buildTimelineSegments(instanceId: string, record: MessageRecord)
 }
 
 const MessageTimeline: Component<MessageTimelineProps> = (props) => {
+  const { t } = useI18n()
   const buttonRefs = new Map<string, HTMLButtonElement>()
   const store = () => messageStoreBus.getOrCreate(props.instanceId)
   const [hoveredSegment, setHoveredSegment] = createSignal<TimelineSegment | null>(null)
@@ -360,7 +370,7 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
   })
  
   return (
-    <div class="message-timeline" role="navigation" aria-label="Message timeline">
+    <div class="message-timeline" role="navigation" aria-label={t("messageTimeline.ariaLabel")}>
       <For each={props.segments}>
         {(segment) => {
           onCleanup(() => buttonRefs.delete(segment.id))
@@ -438,4 +448,3 @@ const MessageTimeline: Component<MessageTimelineProps> = (props) => {
 }
  
 export default MessageTimeline
-

packages/ui/src/components/model-selector.tsx

@@ -1,9 +1,12 @@
 import { Combobox } from "@kobalte/core/combobox"
 import { createEffect, createMemo, createSignal } from "solid-js"
 import { providers, fetchProviders } from "../stores/sessions"
-import { ChevronDown } from "lucide-solid"
+import { ChevronDown, Star } from "lucide-solid"
 import type { Model } from "../types/session"
+import { useI18n } from "../lib/i18n"
 import { getLogger } from "../lib/logger"
+import { preferences, toggleFavoriteModelPreference } from "../stores/preferences"
+import Kbd from "./kbd"
 const log = getLogger("session")
 
 
@@ -21,10 +24,22 @@ interface FlatModel extends Model {
 }
 
 export default function ModelSelector(props: ModelSelectorProps) {
+  const { t } = useI18n()
   const instanceProviders = () => providers().get(props.instanceId) || []
   const [isOpen, setIsOpen] = createSignal(false)
+  const [manualAll, setManualAll] = createSignal(false)
+  const [explicitFavorites, setExplicitFavorites] = createSignal(false)
+  const [autoFavoritesEligibleAtOpen, setAutoFavoritesEligibleAtOpen] = createSignal(false)
+  const [searchDirty, setSearchDirty] = createSignal(false)
+  const [initialQuery, setInitialQuery] = createSignal("")
+  const [initialQueryReady, setInitialQueryReady] = createSignal(false)
+  const [inputValue, setInputValue] = createSignal("")
   let triggerRef!: HTMLButtonElement
   let searchInputRef!: HTMLInputElement
+  let listboxRef!: HTMLUListElement
+  let suppressNextClose = false
+  let wasFavoritesOnlyEnabled = false
+  let wasCurrentModelFavorite = false
 
   createEffect(() => {
     if (instanceProviders().length === 0) {
@@ -43,61 +58,232 @@ export default function ModelSelector(props: ModelSelectorProps) {
     ),
   )
 
+  const favoriteKeySet = createMemo(() => {
+    const result = new Set<string>()
+    for (const item of preferences().modelFavorites ?? []) {
+      if (item.providerId && item.modelId) {
+        result.add(`${item.providerId}/${item.modelId}`)
+      }
+    }
+    return result
+  })
+
+  const favoriteModels = createMemo<FlatModel[]>(() => {
+    const keys = favoriteKeySet()
+    if (keys.size === 0) return []
+    return allModels().filter((m) => keys.has(m.key))
+  })
+
+  const hasFavorites = createMemo(() => favoriteModels().length > 0)
+
   const currentModelValue = createMemo(() =>
     allModels().find((m) => m.providerId === props.currentModel.providerId && m.id === props.currentModel.modelId),
   )
 
+  const currentModelIsFavorite = createMemo(() => {
+    const current = props.currentModel
+    return favoriteKeySet().has(`${current.providerId}/${current.modelId}`)
+  })
+
+  const currentModelKey = createMemo(() => {
+    const current = props.currentModel
+    return `${current.providerId}/${current.modelId}`
+  })
+
+  const searchActive = createMemo(() => {
+    if (!searchDirty()) return false
+    const next = inputValue().trim()
+    return next.length > 0
+  })
+
+  const favoritesOnlyEnabled = createMemo(() => {
+    if (searchActive()) return false
+    if (manualAll()) return false
+    if (!hasFavorites()) return false
+    return explicitFavorites() || autoFavoritesEligibleAtOpen()
+  })
+
+  const visibleOptions = createMemo<FlatModel[]>(() => {
+    if (!favoritesOnlyEnabled()) {
+      return allModels()
+    }
+    return favoriteModels()
+  })
+
   const handleChange = async (value: FlatModel | null) => {
     if (!value) return
     await props.onModelChange({ providerId: value.providerId, modelId: value.id })
   }
 
-  const customFilter = (option: FlatModel, inputValue: string) => {
-    return option.searchText.toLowerCase().includes(inputValue.toLowerCase())
+  const customFilter = (option: FlatModel, rawInput: string) => {
+    if (!searchDirty()) return true
+    return option.searchText.toLowerCase().includes(rawInput.toLowerCase())
   }
 
   createEffect(() => {
     if (isOpen()) {
+      setManualAll(false)
+      setExplicitFavorites(false)
+      setAutoFavoritesEligibleAtOpen(hasFavorites() && currentModelIsFavorite())
+      setSearchDirty(false)
+      setInitialQuery("")
+      setInputValue("")
+      setInitialQueryReady(false)
       setTimeout(() => {
+        const seeded = searchInputRef?.value ?? ""
+        setInitialQuery(seeded)
+        setInputValue(seeded)
+        setInitialQueryReady(true)
         searchInputRef?.focus()
+        searchInputRef?.select()
       }, 100)
+    } else {
+      setInitialQueryReady(false)
+      setSearchDirty(false)
+      setAutoFavoritesEligibleAtOpen(false)
     }
   })
 
+  createEffect(() => {
+    if (!isOpen()) {
+      wasFavoritesOnlyEnabled = favoritesOnlyEnabled()
+      wasCurrentModelFavorite = currentModelIsFavorite()
+      return
+    }
+
+    const nowFavoritesOnlyEnabled = favoritesOnlyEnabled()
+    const nowCurrentModelFavorite = currentModelIsFavorite()
+
+    if (wasFavoritesOnlyEnabled && !nowFavoritesOnlyEnabled && wasCurrentModelFavorite && !nowCurrentModelFavorite) {
+      setTimeout(() => {
+        const key = currentModelKey()
+        const target = listboxRef?.querySelector(`[data-key="${key}"]`) as HTMLElement | null
+        target?.scrollIntoView({ block: "nearest" })
+      }, 0)
+    }
+
+    wasFavoritesOnlyEnabled = nowFavoritesOnlyEnabled
+    wasCurrentModelFavorite = nowCurrentModelFavorite
+  })
+
+  const handleSearchInput = (event: InputEvent & { currentTarget: HTMLInputElement }) => {
+    const next = event.currentTarget.value
+    setInputValue(next)
+    if (!initialQueryReady()) return
+    if (searchDirty()) return
+    if (next !== initialQuery()) {
+      setSearchDirty(true)
+    }
+  }
+
+  const preventListboxPress = (event: PointerEvent | MouseEvent) => {
+    event.preventDefault()
+    event.stopImmediatePropagation?.()
+    event.stopPropagation()
+    suppressNextClose = true
+    setTimeout(() => {
+      suppressNextClose = false
+    }, 0)
+  }
+
+  const toggleFavoritesOnly = () => {
+    if (!hasFavorites()) return
+    if (searchActive()) return
+
+    if (favoritesOnlyEnabled()) {
+      setManualAll(true)
+      setExplicitFavorites(false)
+      setAutoFavoritesEligibleAtOpen(false)
+      return
+    }
+
+    setExplicitFavorites(true)
+    setManualAll(false)
+  }
+
+  const showAllModels = () => {
+    setManualAll(true)
+    setExplicitFavorites(false)
+    setAutoFavoritesEligibleAtOpen(false)
+    setTimeout(() => searchInputRef?.focus(), 0)
+  }
+
   return (
     <div class="sidebar-selector">
       <Combobox<FlatModel>
+        open={isOpen()}
         value={currentModelValue()}
         onChange={handleChange}
-        onOpenChange={setIsOpen}
-        options={allModels()}
+        onOpenChange={(next) => {
+          if (!next && suppressNextClose) return
+          setIsOpen(next)
+        }}
+        options={visibleOptions()}
         optionValue="key"
         optionTextValue="searchText"
         optionLabel="name"
-        placeholder="Search models..."
+        placeholder={t("modelSelector.placeholder.search")}
         defaultFilter={customFilter}
         allowsEmptyCollection
-        itemComponent={(itemProps) => (
-          <Combobox.Item
-            item={itemProps.item}
-            class="selector-option"
-          >
-            <div class="selector-option-content">
-              <Combobox.ItemLabel class="selector-option-label">
-                {itemProps.item.rawValue.name}
-              </Combobox.ItemLabel>
-              <Combobox.ItemDescription class="selector-option-description">
-                {itemProps.item.rawValue.providerName} • {itemProps.item.rawValue.providerId}/
-                {itemProps.item.rawValue.id}
-              </Combobox.ItemDescription>
-            </div>
-            <Combobox.ItemIndicator class="selector-option-indicator">
-              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-              </svg>
-            </Combobox.ItemIndicator>
-          </Combobox.Item>
-        )}
+        itemComponent={(itemProps) => {
+          const isFavorite = () => favoriteKeySet().has(itemProps.item.rawValue.key)
+          return (
+            <Combobox.Item
+              item={itemProps.item}
+              class="selector-option"
+            >
+              <>
+                <div class="selector-option-content">
+                  <Combobox.ItemLabel class="selector-option-label">{itemProps.item.rawValue.name}</Combobox.ItemLabel>
+                  <Combobox.ItemDescription class="selector-option-description">
+                    {itemProps.item.rawValue.providerName} • {itemProps.item.rawValue.providerId}/{itemProps.item.rawValue.id}
+                  </Combobox.ItemDescription>
+                </div>
+                <Combobox.ItemIndicator class="selector-option-indicator">
+                  <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                  </svg>
+                </Combobox.ItemIndicator>
+                <button
+                  type="button"
+                  class="selector-option-star"
+                  data-active={isFavorite()}
+                  aria-label={
+                    isFavorite()
+                      ? t("modelSelector.favorite.remove")
+                      : t("modelSelector.favorite.add")
+                  }
+                  onPointerDown={preventListboxPress}
+                  onPointerUp={preventListboxPress}
+                  onMouseDown={preventListboxPress}
+                  onMouseUp={preventListboxPress}
+                  onKeyDown={(event) => {
+                    if (event.key !== "Enter" && event.key !== " ") return
+                    event.preventDefault()
+                    event.stopPropagation()
+                    suppressNextClose = true
+                    setTimeout(() => {
+                      suppressNextClose = false
+                    }, 0)
+                  }}
+                  onClick={(event) => {
+                    event.preventDefault()
+                    event.stopPropagation()
+                    toggleFavoriteModelPreference({
+                      providerId: itemProps.item.rawValue.providerId,
+                      modelId: itemProps.item.rawValue.id,
+                    })
+                  }}
+                >
+                  <Star
+                    class="w-4 h-4"
+                    fill={isFavorite() ? "currentColor" : "none"}
+                  />
+                </button>
+              </>
+            </Combobox.Item>
+          )
+        }}
       >
         <Combobox.Control class="relative w-full" data-model-selector-control>
           <Combobox.Input class="sr-only" data-model-selector />
@@ -105,9 +291,9 @@ export default function ModelSelector(props: ModelSelectorProps) {
             ref={triggerRef}
             class="selector-trigger"
           >
-            <div class="selector-trigger-label selector-trigger-label--stacked">
+            <div class="selector-trigger-label selector-trigger-label--stacked flex-1 min-w-0">
               <span class="selector-trigger-primary selector-trigger-primary--align-left">
-                Model: {currentModelValue()?.name ?? "None"}
+                {t("modelSelector.trigger.primary", { model: currentModelValue()?.name ?? t("modelSelector.none") })}
               </span>
               {currentModelValue() && (
                 <span class="selector-trigger-secondary">
@@ -115,6 +301,9 @@ export default function ModelSelector(props: ModelSelectorProps) {
                 </span>
               )}
             </div>
+            <span class="selector-trigger-hint selector-trigger-hint--top" aria-hidden="true">
+              <Kbd shortcut="cmd+shift+m" />
+            </span>
             <Combobox.Icon class="selector-trigger-icon">
               <ChevronDown class="w-3 h-3" />
             </Combobox.Icon>
@@ -124,13 +313,53 @@ export default function ModelSelector(props: ModelSelectorProps) {
         <Combobox.Portal>
           <Combobox.Content class="selector-popover">
             <div class="selector-search-container">
-              <Combobox.Input
-                ref={searchInputRef}
-                class="selector-search-input"
-                placeholder="Search models..."
-              />
+              <div class="selector-input-group">
+                <Combobox.Input
+                  ref={searchInputRef}
+                  class="selector-search-input flex-1 min-w-0"
+                  placeholder={t("modelSelector.placeholder.search")}
+                  onInput={handleSearchInput}
+                />
+                <button
+                  type="button"
+                  class="selector-favorites-toggle"
+                  aria-label={t("modelSelector.favoritesOnly.toggle.ariaLabel")}
+                  aria-pressed={favoritesOnlyEnabled()}
+                  disabled={!hasFavorites() || searchActive()}
+                  data-active={favoritesOnlyEnabled()}
+                  onClick={(event) => {
+                    event.preventDefault()
+                    event.stopPropagation()
+                    toggleFavoritesOnly()
+                  }}
+                >
+                  <Star class="w-4 h-4" fill={favoritesOnlyEnabled() ? "currentColor" : "none"} />
+                </button>
+              </div>
+            </div>
+            <Combobox.Listbox ref={listboxRef} class="selector-listbox" />
+            <div class="selector-footer">
+              <button
+                type="button"
+                class="selector-option selector-option-action w-full"
+                style={{ display: favoritesOnlyEnabled() && !searchActive() ? "flex" : "none" }}
+                onMouseDown={(event) => {
+                  event.preventDefault()
+                  event.stopPropagation()
+                }}
+                onPointerDown={(event) => {
+                  event.preventDefault()
+                  event.stopPropagation()
+                }}
+                onClick={(event) => {
+                  event.preventDefault()
+                  event.stopPropagation()
+                  showAllModels()
+                }}
+              >
+                <span class="selector-option-label">{t("modelSelector.favoritesOnly.showAll")}</span>
+              </button>
             </div>
-            <Combobox.Listbox class="selector-listbox" />
           </Combobox.Content>
         </Combobox.Portal>
       </Combobox>

packages/ui/src/components/opencode-binary-selector.tsx

@@ -4,6 +4,7 @@ import { useConfig } from "../stores/preferences"
 import { serverApi } from "../lib/api-client"
 import FileSystemBrowserDialog from "./filesystem-browser-dialog"
 import { openNativeFileDialog, supportsNativeDialogs } from "../lib/native/native-functions"
+import { useI18n } from "../lib/i18n"
 import { getLogger } from "../lib/logger"
 const log = getLogger("actions")
 
@@ -23,6 +24,7 @@ interface OpenCodeBinarySelectorProps {
 }
 
 const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) => {
+  const { t } = useI18n()
   const {
     opencodeBinaries,
     addOpenCodeBinary,
@@ -103,7 +105,7 @@ const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) =
     }
 
     if (validatingPaths().has(path)) {
-      return { valid: false, error: "Already validating" }
+      return { valid: false, error: t("opencodeBinarySelector.validation.alreadyValidating") }
     }
 
     try {
@@ -139,7 +141,7 @@ const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) =
     setValidationError(null)
     if (nativeDialogsAvailable) {
       const selected = await openNativeFileDialog({
-        title: "Select OpenCode Binary",
+        title: t("opencodeBinarySelector.dialog.title"),
       })
       if (selected) {
         setCustomPath(selected)
@@ -160,7 +162,7 @@ const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) =
       setCustomPath("")
       setValidationError(null)
     } else {
-      setValidationError(validation.error || "Invalid OpenCode binary")
+      setValidationError(validation.error || t("opencodeBinarySelector.validation.invalidBinary"))
     }
   }
  
@@ -202,14 +204,14 @@ const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) =
     const hours = Math.floor(minutes / 60)
     const days = Math.floor(hours / 24)
 
-    if (days > 0) return `${days}d ago`
-    if (hours > 0) return `${hours}h ago`
-    if (minutes > 0) return `${minutes}m ago`
-    return "just now"
+    if (days > 0) return t("time.relative.daysAgoShort", { count: days })
+    if (hours > 0) return t("time.relative.hoursAgoShort", { count: hours })
+    if (minutes > 0) return t("time.relative.minutesAgoShort", { count: minutes })
+    return t("time.relative.justNow")
   }
 
   function getDisplayName(path: string): string {
-    if (path === "opencode") return "opencode (system PATH)"
+    if (path === "opencode") return t("opencodeBinarySelector.display.systemPath", { name: "opencode" })
     const parts = path.split(/[/\\]/)
     return parts[parts.length - 1] ?? path
   }
@@ -221,13 +223,13 @@ const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) =
       <div class="panel">
         <div class="panel-header flex items-center justify-between gap-3">
           <div>
-            <h3 class="panel-title">OpenCode Binary</h3>
-            <p class="panel-subtitle">Choose which executable OpenCode should run</p>
+            <h3 class="panel-title">{t("opencodeBinarySelector.title")}</h3>
+            <p class="panel-subtitle">{t("opencodeBinarySelector.subtitle")}</p>
           </div>
           <Show when={validating()}>
             <div class="selector-loading text-xs">
               <Loader2 class="selector-loading-spinner" />
-              <span>Checking versions…</span>
+              <span>{t("opencodeBinarySelector.status.checkingVersions")}</span>
             </div>
           </Show>
         </div>
@@ -245,7 +247,7 @@ const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) =
                 }
               }}
               disabled={props.disabled}
-              placeholder="Enter path to opencode binary…"
+              placeholder={t("opencodeBinarySelector.customPath.placeholder")}
               class="selector-input"
             />
             <button
@@ -255,7 +257,7 @@ const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) =
               class="selector-button selector-button-primary"
             >
               <Plus class="w-4 h-4" />
-              Add
+              {t("opencodeBinarySelector.actions.add")}
             </button>
           </div>
 
@@ -266,7 +268,7 @@ const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) =
             class="selector-button selector-button-secondary w-full flex items-center justify-center gap-2"
           >
             <FolderOpen class="w-4 h-4" />
-            Browse for Binary…
+            {t("opencodeBinarySelector.actions.browse")}
           </button>
 
           <Show when={validationError()}>
@@ -308,16 +310,16 @@ const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) =
                       </Show>
                       <div class="flex items-center gap-2 text-xs text-muted pl-6 flex-wrap">
                         <Show when={versionLabel()}>
-                          <span class="selector-badge-version">v{versionLabel()}</span>
+                          <span class="selector-badge-version">{t("opencodeBinarySelector.versionLabel", { version: versionLabel() })}</span>
                         </Show>
                         <Show when={isPathValidating(binary.path)}>
-                          <span class="selector-badge-time">Checking…</span>
+                          <span class="selector-badge-time">{t("opencodeBinarySelector.status.checking")}</span>
                         </Show>
                         <Show when={!isDefault && binary.lastUsed}>
                           <span class="selector-badge-time">{formatRelativeTime(binary.lastUsed)}</span>
                         </Show>
                         <Show when={isDefault}>
-                          <span class="selector-badge-time">Use binary from system PATH</span>
+                          <span class="selector-badge-time">{t("opencodeBinarySelector.badge.systemPath")}</span>
                         </Show>
                       </div>
                     </div>
@@ -328,7 +330,7 @@ const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) =
                       class="p-2 text-muted hover:text-primary"
                       onClick={(event) => handleRemoveBinary(binary.path, event)}
                       disabled={props.disabled}
-                      title="Remove binary"
+                      title={t("opencodeBinarySelector.actions.removeTitle")}
                     >
                       <Trash2 class="w-3.5 h-3.5" />
                     </button>
@@ -343,8 +345,8 @@ const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) =
       <FileSystemBrowserDialog
         open={isBinaryBrowserOpen()}
         mode="files"
-        title="Select OpenCode Binary"
-        description="Browse files exposed by the CLI server."
+        title={t("opencodeBinarySelector.dialog.title")}
+        description={t("opencodeBinarySelector.dialog.description")}
         onClose={() => setIsBinaryBrowserOpen(false)}
         onSelect={handleBinaryBrowserSelect}
       />
@@ -353,4 +355,3 @@ const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) =
 }
  
 export default OpenCodeBinarySelector
-

packages/ui/src/components/permission-approval-modal.tsx

@@ -2,6 +2,7 @@ import { For, Show, createMemo, createSignal, createEffect, onCleanup, type Comp
 import type { PermissionRequestLike } from "../types/permission"
 import { getPermissionCallId, getPermissionDisplayTitle, getPermissionKind, getPermissionMessageId, getPermissionSessionId } from "../types/permission"
 import { getQuestionCallId, getQuestionMessageId, getQuestionSessionId, type QuestionRequest } from "../types/question"
+import { useI18n } from "../lib/i18n"
 import {
   activeInterruption,
   getPermissionQueue,
@@ -130,6 +131,7 @@ function resolveToolCallFromQuestion(instanceId: string, request: QuestionReques
 }
 
 const PermissionApprovalModal: Component<PermissionApprovalModalProps> = (props) => {
+  const { t } = useI18n()
   const [loadingSession, setLoadingSession] = createSignal<string | null>(null)
   const [permissionSubmitting, setPermissionSubmitting] = createSignal<Set<string>>(new Set())
   const [permissionError, setPermissionError] = createSignal<Map<string, string>>(new Map())
@@ -165,7 +167,10 @@ const PermissionApprovalModal: Component<PermissionApprovalModalProps> = (props)
       const sessionId = getPermissionSessionId(permission) || ""
       await sendPermissionResponse(props.instanceId, sessionId, permissionId, response)
     } catch (error) {
-      setPermissionItemError(permissionId, error instanceof Error ? error.message : "Unable to update permission")
+      setPermissionItemError(
+        permissionId,
+        error instanceof Error ? error.message : t("permissionApproval.errors.unableToUpdatePermission"),
+      )
     } finally {
       setPermissionBusy(permissionId, false)
     }
@@ -257,19 +262,24 @@ const PermissionApprovalModal: Component<PermissionApprovalModalProps> = (props)
           <div class="permission-center-modal-header">
             <div class="permission-center-modal-title-row">
               <h2 id="permission-center-title" class="permission-center-modal-title">
-                Requests
+                {t("permissionApproval.title")}
               </h2>
               <Show when={orderedQueue().length > 0}>
                 <span class="permission-center-modal-count">{orderedQueue().length}</span>
               </Show>
             </div>
-            <button type="button" class="permission-center-modal-close" onClick={props.onClose} aria-label="Close">
+            <button
+              type="button"
+              class="permission-center-modal-close"
+              onClick={props.onClose}
+              aria-label={t("permissionApproval.actions.closeAriaLabel")}
+            >
               ✕
             </button>
           </div>
 
           <div class="permission-center-modal-body">
-            <Show when={hasRequests()} fallback={<div class="permission-center-empty">No pending requests.</div>}>
+            <Show when={hasRequests()} fallback={<div class="permission-center-empty">{t("permissionApproval.empty")}</div>}>
               <div class="permission-center-list" role="list">
                 <For each={orderedQueue()}>
                   {(item) => {
@@ -285,14 +295,17 @@ const PermissionApprovalModal: Component<PermissionApprovalModalProps> = (props)
 
                     const showFallback = () => !resolved()
 
-                    const kindLabel = () => (item.kind === "permission" ? "Permission" : "Question")
+                    const kindLabel = () =>
+                      item.kind === "permission"
+                        ? t("permissionApproval.kind.permission")
+                        : t("permissionApproval.kind.question")
 
                     const primaryTitle = () => {
                       if (item.kind === "permission") {
                         return getPermissionDisplayTitle(item.payload)
                       }
                       const first = item.payload.questions?.[0]?.question
-                      return typeof first === "string" && first.trim().length > 0 ? first : "Question"
+                      return typeof first === "string" && first.trim().length > 0 ? first : t("permissionApproval.kind.question")
                     }
 
                     const secondaryTitle = () => {
@@ -300,7 +313,9 @@ const PermissionApprovalModal: Component<PermissionApprovalModalProps> = (props)
                         return getPermissionKind(item.payload)
                       }
                       const count = item.payload.questions?.length ?? 0
-                      return count === 1 ? "1 question" : `${count} questions`
+                      return count === 1
+                        ? t("permissionApproval.questionCount.one", { count })
+                        : t("permissionApproval.questionCount.other", { count })
                     }
 
                     return (
@@ -313,7 +328,7 @@ const PermissionApprovalModal: Component<PermissionApprovalModalProps> = (props)
                             <span class={`permission-center-item-chip permission-center-item-chip-${item.kind}`}>{kindLabel()}</span>
                             <span class="permission-center-item-kind">{secondaryTitle()}</span>
                             <Show when={isActive()}>
-                              <span class="permission-center-item-chip">Active</span>
+                              <span class="permission-center-item-chip">{t("permissionApproval.status.active")}</span>
                             </Show>
                           </div>
 
@@ -326,7 +341,7 @@ const PermissionApprovalModal: Component<PermissionApprovalModalProps> = (props)
                                 handleGoToSession(sessionId())
                               }}
                             >
-                              Go to Session
+                              {t("permissionApproval.actions.goToSession")}
                             </button>
                             <Show when={showFallback()}>
                               <button
@@ -338,7 +353,9 @@ const PermissionApprovalModal: Component<PermissionApprovalModalProps> = (props)
                                   handleLoadSession(sessionId())
                                 }}
                               >
-                                {loadingSession() === sessionId() ? "Loading…" : "Load Session"}
+                                {loadingSession() === sessionId()
+                                  ? t("permissionApproval.actions.loadingSession")
+                                  : t("permissionApproval.actions.loadSession")}
                               </button>
                             </Show>
                           </div>
@@ -360,7 +377,7 @@ const PermissionApprovalModal: Component<PermissionApprovalModalProps> = (props)
                                         disabled={permissionSubmitting().has(item.id)}
                                         onClick={() => void handlePermissionDecision(item.payload as PermissionRequestLike, "once")}
                                       >
-                                        Allow Once
+                                        {t("permissionApproval.actions.allowOnce")}
                                       </button>
                                       <button
                                         type="button"
@@ -368,7 +385,7 @@ const PermissionApprovalModal: Component<PermissionApprovalModalProps> = (props)
                                         disabled={permissionSubmitting().has(item.id)}
                                         onClick={() => void handlePermissionDecision(item.payload as PermissionRequestLike, "always")}
                                       >
-                                        Always Allow
+                                        {t("permissionApproval.actions.alwaysAllow")}
                                       </button>
                                       <button
                                         type="button"
@@ -376,7 +393,7 @@ const PermissionApprovalModal: Component<PermissionApprovalModalProps> = (props)
                                         disabled={permissionSubmitting().has(item.id)}
                                         onClick={() => void handlePermissionDecision(item.payload as PermissionRequestLike, "reject")}
                                       >
-                                        Deny
+                                        {t("permissionApproval.actions.deny")}
                                       </button>
                                     </div>
                                   </div>
@@ -385,7 +402,7 @@ const PermissionApprovalModal: Component<PermissionApprovalModalProps> = (props)
                                   </Show>
                                 </Show>
                                 <Show when={item.kind !== "permission"}>
-                                  <div class="permission-center-fallback-hint">Load session for more information.</div>
+                                  <div class="permission-center-fallback-hint">{t("permissionApproval.fallbackHint")}</div>
                                 </Show>
                               </div>
                             }

packages/ui/src/components/permission-notification-banner.tsx

@@ -1,5 +1,6 @@
 import { Show, createMemo, type Component } from "solid-js"
 import { ShieldAlert } from "lucide-solid"
+import { useI18n } from "../lib/i18n"
 import { getPermissionQueueLength, getQuestionQueueLength } from "../stores/instances"
 
 interface PermissionNotificationBannerProps {
@@ -8,17 +9,38 @@ interface PermissionNotificationBannerProps {
 }
 
 const PermissionNotificationBanner: Component<PermissionNotificationBannerProps> = (props) => {
+  const { t } = useI18n()
   const permissionCount = createMemo(() => getPermissionQueueLength(props.instanceId))
   const questionCount = createMemo(() => getQuestionQueueLength(props.instanceId))
   const queueLength = createMemo(() => permissionCount() + questionCount())
   const hasRequests = createMemo(() => queueLength() > 0)
   const label = createMemo(() => {
     const total = queueLength()
+
+    const pendingLabel = total === 1
+      ? t("permissionBanner.pendingRequests.one", { count: total })
+      : t("permissionBanner.pendingRequests.other", { count: total })
+
     const parts: string[] = []
-    if (permissionCount() > 0) parts.push(`${permissionCount()} permission${permissionCount() === 1 ? "" : "s"}`)
-    if (questionCount() > 0) parts.push(`${questionCount()} question${questionCount() === 1 ? "" : "s"}`)
-    const detail = parts.length ? ` (${parts.join(", ")})` : ""
-    return `${total} pending request${total === 1 ? "" : "s"}${detail}`
+
+    if (permissionCount() > 0) {
+      parts.push(
+        permissionCount() === 1
+          ? t("permissionBanner.detail.permission.one", { count: permissionCount() })
+          : t("permissionBanner.detail.permission.other", { count: permissionCount() }),
+      )
+    }
+
+    if (questionCount() > 0) {
+      parts.push(
+        questionCount() === 1
+          ? t("permissionBanner.detail.question.one", { count: questionCount() })
+          : t("permissionBanner.detail.question.other", { count: questionCount() }),
+      )
+    }
+
+    const detail = parts.length ? t("permissionBanner.detail.wrapper", { detail: parts.join(", ") }) : ""
+    return `${pendingLabel}${detail}`
   })
 
   return (

packages/ui/src/components/prompt-input.tsx

@@ -14,6 +14,7 @@ import { getActiveInstance } from "../stores/instances"
 import { agents, getSessionDraftPrompt, setSessionDraftPrompt, clearSessionDraftPrompt, executeCustomCommand } from "../stores/sessions"
 import { getCommands } from "../stores/commands"
 import { showAlertDialog } from "../stores/alerts"
+import { useI18n } from "../lib/i18n"
 import { getLogger } from "../lib/logger"
 const log = getLogger("actions")
 
@@ -32,6 +33,7 @@ interface PromptInputProps {
 }
 
 export default function PromptInput(props: PromptInputProps) {
+  const { t } = useI18n()
   const [prompt, setPromptInternal] = createSignal("")
   const [history, setHistory] = createSignal<string[]>([])
   const HISTORY_LIMIT = 100
@@ -53,9 +55,9 @@ export default function PromptInput(props: PromptInputProps) {
 
   const getPlaceholder = () => {
     if (mode() === "shell") {
-      return "Run a shell command (Esc to exit)..."
+      return t("promptInput.placeholder.shell")
     }
-    return "Type your message, @file, @agent, or paste images and text..."
+    return t("promptInput.placeholder.default")
   }
 
 
@@ -642,8 +644,8 @@ export default function PromptInput(props: PromptInputProps) {
       }
     } catch (error) {
       log.error("Failed to send message:", error)
-      showAlertDialog("Failed to send message", {
-        title: "Send failed",
+      showAlertDialog(t("promptInput.send.errorFallback"), {
+        title: t("promptInput.send.errorTitle"),
         detail: error instanceof Error ? error.message : String(error),
         variant: "error",
       })
@@ -1048,8 +1050,11 @@ export default function PromptInput(props: PromptInputProps) {
     return hasText || attachments().length > 0
   }
 
-  const shellHint = () => (mode() === "shell" ? { key: "Esc", text: "to exit shell mode" } : { key: "!", text: "Shell mode" })
-  const commandHint = () => ({ key: "/", text: "Commands" })
+  const shellHint = () =>
+    mode() === "shell"
+      ? { key: "Esc", text: t("promptInput.hints.shell.exit") }
+      : { key: "!", text: t("promptInput.hints.shell.enable") }
+  const commandHint = () => ({ key: "/", text: t("promptInput.hints.commands") })
 
   const shouldShowOverlay = () => prompt().length === 0
 
@@ -1115,7 +1120,7 @@ export default function PromptInput(props: PromptInputProps) {
                     class="prompt-history-button"
                     onClick={() => selectPreviousHistory(true)}
                     disabled={!canHistoryGoPrevious()}
-                    aria-label="Previous prompt"
+                    aria-label={t("promptInput.history.previousAriaLabel")}
                   >
                     <ArrowBigUp class="h-5 w-5" aria-hidden="true" />
                   </button>
@@ -1124,7 +1129,7 @@ export default function PromptInput(props: PromptInputProps) {
                     class="prompt-history-button"
                     onClick={() => selectNextHistory(true)}
                     disabled={!canHistoryGoNext()}
-                    aria-label="Next prompt"
+                    aria-label={t("promptInput.history.nextAriaLabel")}
                   >
                     <ArrowBigDown class="h-5 w-5" aria-hidden="true" />
                   </button>
@@ -1137,10 +1142,10 @@ export default function PromptInput(props: PromptInputProps) {
                     fallback={
                       <>
                         <span class="prompt-overlay-text">
-                          <Kbd>Enter</Kbd> New line • <Kbd shortcut="cmd+enter" /> Send • <Kbd>@</Kbd> Files/agents • <Kbd>↑↓</Kbd> History
+                          <Kbd>Enter</Kbd> {t("promptInput.overlay.newLine")} • <Kbd shortcut="cmd+enter" /> {t("promptInput.overlay.send")} • <Kbd>@</Kbd> {t("promptInput.overlay.filesAgents")} • <Kbd>↑↓</Kbd> {t("promptInput.overlay.history")}
                         </span>
                         <Show when={attachments().length > 0}>
-                          <span class="prompt-overlay-text prompt-overlay-muted">• {attachments().length} file(s) attached</span>
+                          <span class="prompt-overlay-text prompt-overlay-muted">{t("promptInput.overlay.attachments", { count: attachments().length })}</span>
                         </Show>
                         <span class="prompt-overlay-text">
                           • <Kbd>{shellHint().key}</Kbd> {shellHint().text}
@@ -1151,17 +1156,17 @@ export default function PromptInput(props: PromptInputProps) {
                           </span>
                         </Show>
                         <Show when={mode() === "shell"}>
-                          <span class="prompt-overlay-shell-active">Shell mode active</span>
+                          <span class="prompt-overlay-shell-active">{t("promptInput.overlay.shellModeActive")}</span>
                         </Show>
                       </>
                     }
                   >
                     <>
                       <span class="prompt-overlay-text prompt-overlay-warning">
-                        Press <Kbd>Esc</Kbd> again to abort session
+                        {t("promptInput.overlay.press")} <Kbd>Esc</Kbd> {t("promptInput.overlay.againToAbort")}
                       </span>
                       <Show when={mode() === "shell"}>
-                        <span class="prompt-overlay-shell-active">Shell mode active</span>
+                        <span class="prompt-overlay-shell-active">{t("promptInput.overlay.shellModeActive")}</span>
                       </Show>
                     </>
                   </Show>
@@ -1177,8 +1182,8 @@ export default function PromptInput(props: PromptInputProps) {
             class="stop-button"
             onClick={handleAbort}
             disabled={!canStop()}
-            aria-label="Stop session"
-            title="Stop session"
+            aria-label={t("promptInput.stopSession.ariaLabel")}
+            title={t("promptInput.stopSession.title")}
           >
             <svg class="stop-icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
               <rect x="4" y="4" width="12" height="12" rx="2" />
@@ -1189,7 +1194,7 @@ export default function PromptInput(props: PromptInputProps) {
             class={`send-button ${mode() === "shell" ? "shell-mode" : ""}`}
             onClick={handleSend}
             disabled={!canSend()}
-            aria-label="Send message"
+            aria-label={t("promptInput.send.ariaLabel")}
           >
             <Show
               when={mode() === "shell"}

packages/ui/src/components/remote-access-overlay.tsx

@@ -9,6 +9,7 @@ import { restartCli } from "../lib/native/cli"
 import { preferences, setListeningMode } from "../stores/preferences"
 import { showConfirmDialog } from "../stores/alerts"
 import { getLogger } from "../lib/logger"
+import { useI18n } from "../lib/i18n"
 const log = getLogger("actions")
 
 
@@ -18,6 +19,7 @@ interface RemoteAccessOverlayProps {
 }
 
 export function RemoteAccessOverlay(props: RemoteAccessOverlayProps) {
+  const { t } = useI18n()
   const [meta, setMeta] = createSignal<ServerMeta | null>(null)
   const [authStatus, setAuthStatus] = createSignal<{ authenticated: boolean; username?: string; passwordUserProvided?: boolean } | null>(null)
   const [loading, setLoading] = createSignal(false)
@@ -85,11 +87,11 @@ export function RemoteAccessOverlay(props: RemoteAccessOverlayProps) {
       return
     }
 
-    const confirmed = await showConfirmDialog("Restart to apply listening mode? This will stop all running instances.", {
-      title: allow ? "Open to other devices" : "Limit to this device",
+    const confirmed = await showConfirmDialog(t("remoteAccess.listeningMode.restartConfirm.message"), {
+      title: allow ? t("remoteAccess.listeningMode.restartConfirm.title.all") : t("remoteAccess.listeningMode.restartConfirm.title.local"),
       variant: "warning",
-      confirmLabel: "Restart now",
-      cancelLabel: "Cancel",
+      confirmLabel: t("remoteAccess.listeningMode.restartConfirm.confirmLabel"),
+      cancelLabel: t("remoteAccess.listeningMode.restartConfirm.cancelLabel"),
     })
 
     if (!confirmed) {
@@ -100,7 +102,7 @@ export function RemoteAccessOverlay(props: RemoteAccessOverlayProps) {
     setListeningMode(targetMode)
     const restarted = await restartCli()
     if (!restarted) {
-      setError("Unable to restart automatically. Please restart the app to apply the change.")
+      setError(t("remoteAccess.restart.errorManual"))
     } else {
       setMeta((prev) => (prev ? { ...prev, listeningMode: targetMode } : prev))
     }
@@ -123,12 +125,12 @@ export function RemoteAccessOverlay(props: RemoteAccessOverlayProps) {
     const confirm = passwordConfirm()
 
     if (next.trim().length < 8) {
-      setPasswordError("Password must be at least 8 characters.")
+      setPasswordError(t("remoteAccess.password.error.tooShort"))
       return
     }
 
     if (next !== confirm) {
-      setPasswordError("Passwords do not match.")
+      setPasswordError(t("remoteAccess.password.error.mismatch"))
       return
     }
 
@@ -162,11 +164,11 @@ export function RemoteAccessOverlay(props: RemoteAccessOverlayProps) {
           <Dialog.Content class="modal-surface remote-panel" tabIndex={-1}>
             <header class="remote-header">
               <div>
-                <p class="remote-eyebrow">Remote handover</p>
-                <h2 class="remote-title">Connect to CodeNomad remotely</h2>
-                <p class="remote-subtitle">Use the addresses below to open CodeNomad from another device.</p>
+                <p class="remote-eyebrow">{t("remoteAccess.eyebrow")}</p>
+                <h2 class="remote-title">{t("remoteAccess.title")}</h2>
+                <p class="remote-subtitle">{t("remoteAccess.subtitle")}</p>
               </div>
-              <button type="button" class="remote-close" onClick={props.onClose} aria-label="Close remote access">
+              <button type="button" class="remote-close" onClick={props.onClose} aria-label={t("remoteAccess.close")}>
                 ×
               </button>
             </header>
@@ -177,13 +179,13 @@ export function RemoteAccessOverlay(props: RemoteAccessOverlayProps) {
                   <div class="remote-section-title">
                     <Shield class="remote-icon" />
                     <div>
-                      <p class="remote-label">Listening mode</p>
-                      <p class="remote-help">Allow or limit remote handovers by binding to all interfaces or just localhost.</p>
+                      <p class="remote-label">{t("remoteAccess.sections.listeningMode.label")}</p>
+                      <p class="remote-help">{t("remoteAccess.sections.listeningMode.help")}</p>
                     </div>
                   </div>
                   <button class="remote-refresh" type="button" onClick={() => void refreshMeta()} disabled={loading()}>
                     <RefreshCw class={`remote-icon ${loading() ? "remote-spin" : ""}`} />
-                    <span class="remote-refresh-label">Refresh</span>
+                    <span class="remote-refresh-label">{t("remoteAccess.refresh")}</span>
                   </button>
                 </div>
 
@@ -196,19 +198,18 @@ export function RemoteAccessOverlay(props: RemoteAccessOverlayProps) {
                 >
                   <Switch.Input />
                   <Switch.Control class="remote-toggle-switch" data-checked={allowExternalConnections()}>
-                    <span class="remote-toggle-state">{allowExternalConnections() ? "On" : "Off"}</span>
+                    <span class="remote-toggle-state">{allowExternalConnections() ? t("remoteAccess.toggle.on") : t("remoteAccess.toggle.off")}</span>
                     <Switch.Thumb class="remote-toggle-thumb" />
                   </Switch.Control>
                   <div class="remote-toggle-copy">
-                    <span class="remote-toggle-title">Allow connections from other IPs</span>
+                    <span class="remote-toggle-title">{t("remoteAccess.toggle.title")}</span>
                     <span class="remote-toggle-caption">
-                      {allowExternalConnections() ? "Binding to 0.0.0.0" : "Binding to 127.0.0.1"}
+                      {allowExternalConnections() ? t("remoteAccess.toggle.caption.all") : t("remoteAccess.toggle.caption.local")}
                     </span>
                   </div>
                 </Switch>
                 <p class="remote-toggle-note">
-                  Changing this requires a restart and temporarily stops all active instances. Share the addresses below once the
-                  server restarts.
+                  {t("remoteAccess.toggle.note")}
                 </p>
               </section>
 
@@ -217,22 +218,24 @@ export function RemoteAccessOverlay(props: RemoteAccessOverlayProps) {
                   <div class="remote-section-title">
                     <Shield class="remote-icon" />
                     <div>
-                      <p class="remote-label">Server password</p>
-                      <p class="remote-help">Remote handovers require a password. Set a memorable one to enable logins from other devices.</p>
+                      <p class="remote-label">{t("remoteAccess.sections.serverPassword.label")}</p>
+                      <p class="remote-help">{t("remoteAccess.sections.serverPassword.help")}</p>
                     </div>
                   </div>
                 </div>
 
                 <Show
                   when={authStatus() && authStatus()!.authenticated}
-                  fallback={<div class="remote-card">Authentication status unavailable.</div>}
+                  fallback={<div class="remote-card">{t("remoteAccess.authStatus.unavailable")}</div>}
                 >
                   <div class="remote-card">
-                    <p class="remote-help">Username: {authStatus()!.username ?? "codenomad"}</p>
+                    <p class="remote-help">
+                      {t("remoteAccess.username", { username: authStatus()!.username ?? "codenomad" })}
+                    </p>
                     <p class="remote-help">
                       {authStatus()!.passwordUserProvided
-                        ? "A password is set for remote access."
-                        : "No memorable password is set yet. Set one to allow remote handover logins."}
+                        ? t("remoteAccess.password.status.set")
+                        : t("remoteAccess.password.status.unset")}
                     </p>
 
                     <div class="remote-actions" style={{ "justify-content": "flex-start", "margin-top": "12px" }}>
@@ -245,26 +248,26 @@ export function RemoteAccessOverlay(props: RemoteAccessOverlayProps) {
                         }}
                       >
                         {passwordFormOpen()
-                          ? "Cancel"
+                          ? t("remoteAccess.password.actions.cancel")
                           : authStatus()!.passwordUserProvided
-                            ? "Change password"
-                            : "Set password"}
+                            ? t("remoteAccess.password.actions.change")
+                            : t("remoteAccess.password.actions.set")}
                       </button>
                     </div>
 
                     <Show when={passwordFormOpen()}>
                       <div class="selector-input-group" style={{ "margin-top": "12px" }}>
-                        <label class="text-sm font-medium text-secondary">New password</label>
+                        <label class="text-sm font-medium text-secondary">{t("remoteAccess.password.form.newPassword")}</label>
                         <input
                           class="selector-input w-full"
                           type="password"
                           value={passwordValue()}
                           onInput={(event) => setPasswordValue(event.currentTarget.value)}
-                          placeholder="At least 8 characters"
+                          placeholder={t("remoteAccess.password.form.placeholder")}
                         />
                       </div>
                       <div class="selector-input-group" style={{ "margin-top": "10px" }}>
-                        <label class="text-sm font-medium text-secondary">Confirm password</label>
+                        <label class="text-sm font-medium text-secondary">{t("remoteAccess.password.form.confirmPassword")}</label>
                         <input
                           class="selector-input w-full"
                           type="password"
@@ -284,7 +287,7 @@ export function RemoteAccessOverlay(props: RemoteAccessOverlayProps) {
                           disabled={savingPassword()}
                           onClick={() => void handleSubmitPassword()}
                         >
-                          {savingPassword() ? "Saving…" : "Save password"}
+                          {savingPassword() ? t("remoteAccess.password.save.saving") : t("remoteAccess.password.save.label")}
                         </button>
                       </div>
                     </Show>
@@ -298,33 +301,39 @@ export function RemoteAccessOverlay(props: RemoteAccessOverlayProps) {
                   <div class="remote-section-title">
                     <Wifi class="remote-icon" />
                     <div>
-                      <p class="remote-label">Reachable addresses</p>
-                      <p class="remote-help">Launch or scan from another machine to hand over control.</p>
+                      <p class="remote-label">{t("remoteAccess.sections.addresses.label")}</p>
+                      <p class="remote-help">{t("remoteAccess.sections.addresses.help")}</p>
                     </div>
                   </div>
                 </div>
 
-                <Show when={!loading()} fallback={<div class="remote-card">Loading addresses…</div>}>
+                <Show when={!loading()} fallback={<div class="remote-card">{t("remoteAccess.addresses.loading")}</div>}>
                   <Show when={!error()} fallback={<div class="remote-error">{error()}</div>}>
-                    <Show when={displayAddresses().length > 0} fallback={<div class="remote-card">No addresses available yet.</div>}>
+                    <Show when={displayAddresses().length > 0} fallback={<div class="remote-card">{t("remoteAccess.addresses.none")}</div>}>
                       <div class="remote-address-list">
                         <For each={displayAddresses()}>
                           {(address) => {
                             const expandedState = () => expandedUrl() === address.url
                             const qr = () => qrCodes()[address.url]
+                            const scopeLabel = () =>
+                              address.scope === "external"
+                                ? t("remoteAccess.address.scope.network")
+                                : address.scope === "loopback"
+                                  ? t("remoteAccess.address.scope.loopback")
+                                  : t("remoteAccess.address.scope.internal")
                             return (
                               <div class="remote-address">
                                 <div class="remote-address-main">
                                   <div>
                                     <p class="remote-address-url">{address.url}</p>
                                     <p class="remote-address-meta">
-                                      {address.family.toUpperCase()} • {address.scope === "external" ? "Network" : address.scope === "loopback" ? "Loopback" : "Internal"} • {address.ip}
+                                      {address.family.toUpperCase()} • {scopeLabel()} • {address.ip}
                                     </p>
                                   </div>
                                   <div class="remote-actions">
                                     <button class="remote-pill" type="button" onClick={() => handleOpenUrl(address.url)}>
                                       <ExternalLink class="remote-icon" />
-                                      Open
+                                      {t("remoteAccess.address.open")}
                                     </button>
                                     <button
                                       class="remote-pill"
@@ -333,14 +342,20 @@ export function RemoteAccessOverlay(props: RemoteAccessOverlayProps) {
                                       aria-expanded={expandedState()}
                                     >
                                       <Link2 class="remote-icon" />
-                                      {expandedState() ? "Hide QR" : "Show QR"}
+                                      {expandedState() ? t("remoteAccess.address.hideQr") : t("remoteAccess.address.showQr")}
                                     </button>
                                   </div>
                                 </div>
                                 <Show when={expandedState()}>
                                   <div class="remote-qr">
                                     <Show when={qr()} fallback={<Loader2 class="remote-icon remote-spin" aria-hidden="true" />}>
-                                      {(dataUrl) => <img src={dataUrl()} alt={`QR for ${address.url}`} class="remote-qr-img" />}
+                                      {(dataUrl) => (
+                                        <img
+                                          src={dataUrl()}
+                                          alt={t("remoteAccess.address.qrAlt", { url: address.url })}
+                                          class="remote-qr-img"
+                                        />
+                                      )}
                                     </Show>
                                   </div>
                                 </Show>

packages/ui/src/components/session-list.tsx

@@ -7,6 +7,7 @@ import KeyboardHint from "./keyboard-hint"
 import SessionRenameDialog from "./session-rename-dialog"
 import { keyboardRegistry } from "../lib/keyboard-registry"
 import { showToastNotification } from "../lib/notifications"
+import { useI18n } from "../lib/i18n"
 import {
   deleteSession,
   ensureSessionParentExpanded,
@@ -37,17 +38,11 @@ interface SessionListProps {
 }
 
 function formatSessionStatus(status: SessionStatus): string {
-  switch (status) {
-    case "working":
-      return "Working"
-    case "compacting":
-      return "Compacting"
-    default:
-      return "Idle"
-  }
+  return status
 }
 
 const SessionList: Component<SessionListProps> = (props) => {
+  const { t } = useI18n()
   const [renameTarget, setRenameTarget] = createSignal<{ id: string; title: string; label: string } | null>(null)
   const [isRenaming, setIsRenaming] = createSignal(false)
 
@@ -73,13 +68,13 @@ const SessionList: Component<SessionListProps> = (props) => {
     try {
       const success = await copyToClipboard(sessionId)
       if (success) {
-        showToastNotification({ message: "Session ID copied", variant: "success" })
+        showToastNotification({ message: t("sessionList.copyId.success"), variant: "success" })
       } else {
-        showToastNotification({ message: "Unable to copy session ID", variant: "error" })
+        showToastNotification({ message: t("sessionList.copyId.error"), variant: "error" })
       }
     } catch (error) {
       log.error(`Failed to copy session ID ${sessionId}:`, error)
-      showToastNotification({ message: "Unable to copy session ID", variant: "error" })
+      showToastNotification({ message: t("sessionList.copyId.error"), variant: "error" })
     }
   }
  
@@ -127,7 +122,7 @@ const SessionList: Component<SessionListProps> = (props) => {
       }
     } catch (error) {
       log.error(`Failed to delete session ${sessionId}:`, error)
-      showToastNotification({ message: "Unable to delete session", variant: "error" })
+      showToastNotification({ message: t("sessionList.delete.error"), variant: "error" })
     }
   }
 
@@ -152,7 +147,7 @@ const SessionList: Component<SessionListProps> = (props) => {
       setRenameTarget(null)
     } catch (error) {
       log.error(`Failed to rename session ${target.id}:`, error)
-      showToastNotification({ message: "Unable to rename session", variant: "error" })
+      showToastNotification({ message: t("sessionList.rename.error"), variant: "error" })
     } finally {
       setIsRenaming(false)
     }
@@ -172,14 +167,28 @@ const SessionList: Component<SessionListProps> = (props) => {
       return <></>
     }
     const isActive = () => props.activeSessionId === rowProps.sessionId
-    const title = () => session()?.title || "Untitled"
+    const title = () => session()?.title || t("sessionList.session.untitled")
     const status = () => getSessionStatus(props.instanceId, rowProps.sessionId)
-    const statusLabel = () => formatSessionStatus(status())
+    const statusLabel = () => {
+      switch (formatSessionStatus(status())) {
+        case "working":
+          return t("sessionList.status.working")
+        case "compacting":
+          return t("sessionList.status.compacting")
+        default:
+          return t("sessionList.status.idle")
+      }
+    }
     const needsPermission = () => Boolean(session()?.pendingPermission)
     const needsQuestion = () => Boolean((session() as any)?.pendingQuestion)
     const needsInput = () => needsPermission() || needsQuestion()
     const statusClassName = () => (needsInput() ? "session-permission" : `session-${status()}`)
-    const statusText = () => (needsPermission() ? "Needs Permission" : needsQuestion() ? "Needs Input" : statusLabel())
+    const statusText = () =>
+      needsPermission()
+        ? t("sessionList.status.needsPermission")
+        : needsQuestion()
+          ? t("sessionList.status.needsInput")
+          : statusLabel()
  
     return (
        <div class="session-list-item group">
@@ -219,8 +228,8 @@ const SessionList: Component<SessionListProps> = (props) => {
                   }}
                   role="button"
                   tabIndex={0}
-                  aria-label={rowProps.expanded ? "Collapse session" : "Expand session"}
-                  title={rowProps.expanded ? "Collapse" : "Expand"}
+                  aria-label={rowProps.expanded ? t("sessionList.expand.collapseAriaLabel") : t("sessionList.expand.expandAriaLabel")}
+                  title={rowProps.expanded ? t("sessionList.expand.collapseTitle") : t("sessionList.expand.expandTitle")}
                 >
                   <ChevronDown class={`w-3.5 h-3.5 transition-transform ${rowProps.expanded ? "" : "-rotate-90"}`} />
                 </span>
@@ -240,8 +249,8 @@ const SessionList: Component<SessionListProps> = (props) => {
                 onClick={(event) => copySessionId(event, rowProps.sessionId)}
                 role="button"
                 tabIndex={0}
-                aria-label="Copy session ID"
-                title="Copy session ID"
+                aria-label={t("sessionList.actions.copyId.ariaLabel")}
+                title={t("sessionList.actions.copyId.title")}
               >
                 <Copy class="w-3 h-3" />
               </span>
@@ -253,8 +262,8 @@ const SessionList: Component<SessionListProps> = (props) => {
                 }}
                 role="button"
                 tabIndex={0}
-                aria-label="Rename session"
-                title="Rename session"
+                aria-label={t("sessionList.actions.rename.ariaLabel")}
+                title={t("sessionList.actions.rename.title")}
               >
                 <Pencil class="w-3 h-3" />
               </span>
@@ -263,8 +272,8 @@ const SessionList: Component<SessionListProps> = (props) => {
                 onClick={(event) => handleDeleteSession(event, rowProps.sessionId)}
                 role="button"
                 tabIndex={0}
-                aria-label="Delete session"
-                title="Delete session"
+                aria-label={t("sessionList.actions.delete.ariaLabel")}
+                title={t("sessionList.actions.delete.title")}
               >
                 <Show
                   when={!isSessionDeleting(rowProps.sessionId)}
@@ -360,7 +369,7 @@ const SessionList: Component<SessionListProps> = (props) => {
         <div class="session-list-header p-3 border-b border-base">
           {props.headerContent ?? (
             <div class="flex items-center justify-between gap-3">
-              <h3 class="text-sm font-semibold text-primary">Sessions</h3>
+              <h3 class="text-sm font-semibold text-primary">{t("sessionList.header.title")}</h3>
               <KeyboardHint
                 shortcuts={[keyboardRegistry.get("session-prev")!, keyboardRegistry.get("session-next")!].filter(Boolean)}
               />
@@ -420,4 +429,3 @@ const SessionList: Component<SessionListProps> = (props) => {
 }
 
 export default SessionList
-

packages/ui/src/components/session-picker.tsx

@@ -5,6 +5,7 @@ import { getParentSessions, createSession, setActiveParentSession } from "../sto
 import { instances, stopInstance } from "../stores/instances"
 import { agents } from "../stores/sessions"
 import { getLogger } from "../lib/logger"
+import { useI18n } from "../lib/i18n"
 const log = getLogger("session")
 
 
@@ -15,6 +16,7 @@ interface SessionPickerProps {
 }
 
 const SessionPicker: Component<SessionPickerProps> = (props) => {
+  const { t } = useI18n()
   const [selectedAgent, setSelectedAgent] = createSignal<string>("")
   const [isCreating, setIsCreating] = createSignal(false)
 
@@ -40,10 +42,10 @@ const SessionPicker: Component<SessionPickerProps> = (props) => {
     const hours = Math.floor(minutes / 60)
     const days = Math.floor(hours / 24)
 
-    if (days > 0) return `${days}d ago`
-    if (hours > 0) return `${hours}h ago`
-    if (minutes > 0) return `${minutes}m ago`
-    return "just now"
+    if (days > 0) return t("time.relative.daysAgoShort", { count: days })
+    if (hours > 0) return t("time.relative.hoursAgoShort", { count: hours })
+    if (minutes > 0) return t("time.relative.minutesAgoShort", { count: minutes })
+    return t("time.relative.justNow")
   }
 
   async function handleSessionSelect(sessionId: string) {
@@ -74,19 +76,19 @@ const SessionPicker: Component<SessionPickerProps> = (props) => {
       <Dialog.Portal>
         <Dialog.Overlay class="modal-overlay" />
         <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
-          <Dialog.Content class="modal-surface w-full max-w-lg p-6">
-            <Dialog.Title class="text-xl font-semibold text-primary mb-4">
-              OpenCode • {instance()?.folder.split("/").pop()}
-            </Dialog.Title>
+            <Dialog.Content class="modal-surface w-full max-w-lg p-6">
+              <Dialog.Title class="text-xl font-semibold text-primary mb-4">
+              {t("sessionPicker.title", { folder: instance()?.folder.split("/").pop() })}
+              </Dialog.Title>
 
             <div class="space-y-6">
               <Show
                 when={parentSessions().length > 0}
-                fallback={<div class="text-center py-4 text-sm text-muted">No previous sessions</div>}
+                fallback={<div class="text-center py-4 text-sm text-muted">{t("sessionPicker.empty.noPrevious")}</div>}
               >
                 <div>
                   <h3 class="text-sm font-medium text-secondary mb-2">
-                    Resume a session ({parentSessions().length}):
+                    {t("sessionPicker.resume.title", { count: parentSessions().length })}
                   </h3>
                   <div class="space-y-1 max-h-[400px] overflow-y-auto">
                     <For each={parentSessions()}>
@@ -98,7 +100,7 @@ const SessionPicker: Component<SessionPickerProps> = (props) => {
                         >
                           <div class="selector-option-content w-full">
                             <span class="selector-option-label truncate">
-                              {session.title || "Untitled"}
+                              {session.title || t("sessionPicker.session.untitled")}
                             </span>
                           </div>
                           <span class="selector-badge-time flex-shrink-0">
@@ -116,16 +118,16 @@ const SessionPicker: Component<SessionPickerProps> = (props) => {
                   <div class="w-full border-t border-base" />
                 </div>
                 <div class="relative flex justify-center text-sm">
-                  <span class="px-2 bg-surface-base text-muted">or</span>
+                  <span class="px-2 bg-surface-base text-muted">{t("sessionPicker.divider.or")}</span>
                 </div>
               </div>
 
               <div>
-                <h3 class="text-sm font-medium text-secondary mb-2">Start new session:</h3>
+                <h3 class="text-sm font-medium text-secondary mb-2">{t("sessionPicker.new.title")}</h3>
                 <div class="space-y-3">
                   <Show
                     when={agentList().length > 0}
-                    fallback={<div class="text-sm text-muted">Loading agents...</div>}
+                    fallback={<div class="text-sm text-muted">{t("sessionPicker.agents.loading")}</div>}
                   >
                     <select
                       class="selector-input w-full"
@@ -161,9 +163,13 @@ const SessionPicker: Component<SessionPickerProps> = (props) => {
                       </Show>
                       <Show
                         when={!isCreating()}
-                        fallback={<span>Creating...</span>}
+                        fallback={<span>{t("sessionPicker.actions.creating")}</span>}
                       >
-                        <span>{agentList().length === 0 ? "Loading agents..." : "Create Session"}</span>
+                        <span>
+                          {agentList().length === 0
+                            ? t("sessionPicker.agents.loading")
+                            : t("sessionPicker.actions.createSession")}
+                        </span>
                       </Show>
                     </div>
                     <kbd class="kbd ml-2">
@@ -180,7 +186,7 @@ const SessionPicker: Component<SessionPickerProps> = (props) => {
                 class="selector-button selector-button-secondary"
                 onClick={handleCancel}
               >
-                Cancel
+                {t("sessionPicker.actions.cancel")}
               </button>
             </div>
           </Dialog.Content>

packages/ui/src/components/session-rename-dialog.tsx

@@ -1,5 +1,6 @@
 import { Dialog } from "@kobalte/core/dialog"
 import { Component, Show, createEffect, createSignal } from "solid-js"
+import { useI18n } from "../lib/i18n"
 
 interface SessionRenameDialogProps {
   open: boolean
@@ -11,6 +12,7 @@ interface SessionRenameDialogProps {
 }
 
 const SessionRenameDialog: Component<SessionRenameDialogProps> = (props) => {
+  const { t } = useI18n()
   const [title, setTitle] = createSignal("")
   const inputId = `session-rename-${Math.random().toString(36).slice(2)}`
   let inputRef: HTMLInputElement | undefined
@@ -40,9 +42,9 @@ const SessionRenameDialog: Component<SessionRenameDialogProps> = (props) => {
 
   const description = () => {
     if (props.sessionLabel && props.sessionLabel.trim()) {
-      return `Update the title for "${props.sessionLabel}".`
+      return t("sessionRenameDialog.description.withLabel", { label: props.sessionLabel })
     }
-    return "Set a new title for this session."
+    return t("sessionRenameDialog.description.default")
   }
 
   return (
@@ -58,7 +60,7 @@ const SessionRenameDialog: Component<SessionRenameDialogProps> = (props) => {
         <Dialog.Overlay class="modal-overlay" />
         <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
           <Dialog.Content class="modal-surface w-full max-w-sm p-6" tabIndex={-1}>
-            <Dialog.Title class="text-lg font-semibold text-primary">Rename Session</Dialog.Title>
+            <Dialog.Title class="text-lg font-semibold text-primary">{t("sessionRenameDialog.title")}</Dialog.Title>
             <Dialog.Description class="text-sm text-secondary mt-1">
               {description()}
             </Dialog.Description>
@@ -66,7 +68,7 @@ const SessionRenameDialog: Component<SessionRenameDialogProps> = (props) => {
             <form class="mt-4 space-y-4" onSubmit={handleRename}>
               <div class="space-y-2">
                 <label class="text-sm font-medium text-secondary" for={inputId}>
-                  Session name
+                  {t("sessionRenameDialog.input.label")}
                 </label>
                 <input
                   id={inputId}
@@ -76,7 +78,7 @@ const SessionRenameDialog: Component<SessionRenameDialogProps> = (props) => {
                   type="text"
                   value={title()}
                   onInput={(event) => setTitle(event.currentTarget.value)}
-                  placeholder="Enter a session name"
+                  placeholder={t("sessionRenameDialog.input.placeholder")}
                   class="w-full px-3 py-2 text-sm bg-surface-base border border-base rounded text-primary focus-ring-accent"
                 />
               </div>
@@ -92,7 +94,7 @@ const SessionRenameDialog: Component<SessionRenameDialogProps> = (props) => {
                   }}
                   disabled={isSubmitting()}
                 >
-                  Cancel
+                  {t("sessionRenameDialog.actions.cancel")}
                 </button>
                 <button
                   type="submit"
@@ -111,11 +113,11 @@ const SessionRenameDialog: Component<SessionRenameDialogProps> = (props) => {
                             d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                           />
                         </svg>
-                        <span>Renaming…</span>
+                        <span>{t("sessionRenameDialog.actions.renaming")}</span>
                       </>
                     }
                   >
-                    Rename
+                    {t("sessionRenameDialog.actions.rename")}
                   </Show>
                 </button>
               </div>

packages/ui/src/components/session/context-usage-panel.tsx

@@ -1,6 +1,7 @@
 import { createMemo, type Component } from "solid-js"
 import { getSessionInfo } from "../../stores/sessions"
 import { formatTokenTotal } from "../../lib/formatters"
+import { useI18n } from "../../lib/i18n"
 
 interface ContextUsagePanelProps {
   instanceId: string
@@ -12,6 +13,7 @@ const chipLabelClass = "uppercase text-[10px] tracking-wide text-primary/70"
 const headingClass = "text-xs font-semibold text-primary/70 uppercase tracking-wide"
 
 const ContextUsagePanel: Component<ContextUsagePanelProps> = (props) => {
+  const { t } = useI18n()
   const info = createMemo(
     () =>
       getSessionInfo(props.instanceId, props.sessionId) ?? {
@@ -39,7 +41,7 @@ const ContextUsagePanel: Component<ContextUsagePanelProps> = (props) => {
 
 
   const formatTokenValue = (value: number | null | undefined) => {
-    if (value === null || value === undefined) return "--"
+    if (value === null || value === undefined) return t("contextUsagePanel.unavailable")
     return formatTokenTotal(value)
   }
 
@@ -48,29 +50,29 @@ const ContextUsagePanel: Component<ContextUsagePanelProps> = (props) => {
   return (
     <div class="session-context-panel border-r border-base border-b px-3 py-3 space-y-3">
       <div class="flex flex-wrap items-center gap-2 text-xs text-primary/90">
-        <div class={headingClass}>Tokens</div>
+        <div class={headingClass}>{t("contextUsagePanel.headings.tokens")}</div>
         <div class={chipClass}>
-          <span class={chipLabelClass}>Input</span>
+          <span class={chipLabelClass}>{t("contextUsagePanel.labels.input")}</span>
           <span class="font-semibold text-primary">{formatTokenTotal(inputTokens())}</span>
         </div>
         <div class={chipClass}>
-          <span class={chipLabelClass}>Output</span>
+          <span class={chipLabelClass}>{t("contextUsagePanel.labels.output")}</span>
           <span class="font-semibold text-primary">{formatTokenTotal(outputTokens())}</span>
         </div>
         <div class={chipClass}>
-          <span class={chipLabelClass}>Cost</span>
+          <span class={chipLabelClass}>{t("contextUsagePanel.labels.cost")}</span>
           <span class="font-semibold text-primary">{costDisplay()}</span>
         </div>
       </div>
 
       <div class="flex flex-wrap items-center gap-2 text-xs text-primary/90">
-        <div class={headingClass}>Context</div>
+        <div class={headingClass}>{t("contextUsagePanel.headings.context")}</div>
         <div class={chipClass}>
-          <span class={chipLabelClass}>Used</span>
+          <span class={chipLabelClass}>{t("contextUsagePanel.labels.used")}</span>
           <span class="font-semibold text-primary">{formatTokenTotal(actualUsageTokens())}</span>
         </div>
         <div class={chipClass}>
-          <span class={chipLabelClass}>Avail</span>
+          <span class={chipLabelClass}>{t("contextUsagePanel.labels.available")}</span>
           <span class="font-semibold text-primary">{formatTokenValue(availableTokens())}</span>
         </div>
       </div>

packages/ui/src/components/session/session-view.tsx

@@ -14,6 +14,7 @@ import { isSessionBusy as getSessionBusyStatus } from "../../stores/session-stat
 import { showAlertDialog } from "../../stores/alerts"
 import { getLogger } from "../../lib/logger"
 import { requestData } from "../../lib/opencode-api"
+import { useI18n } from "../../lib/i18n"
 
 const log = getLogger("session")
 
@@ -34,6 +35,7 @@ interface SessionViewProps {
 }
 
 export const SessionView: Component<SessionViewProps> = (props) => {
+  const { t } = useI18n()
   const session = () => props.activeSessions.get(props.sessionId)
   const messagesLoading = createMemo(() => isSessionMessagesLoading(props.instanceId, props.sessionId))
   const messageStore = createMemo(() => messageStoreBus.getOrCreate(props.instanceId))
@@ -152,8 +154,8 @@ export const SessionView: Component<SessionViewProps> = (props) => {
       log.info("Abort requested", { instanceId: props.instanceId, sessionId: currentSession.id })
     } catch (error) {
       log.error("Failed to abort session", error)
-      showAlertDialog("Failed to stop session", {
-        title: "Stop failed",
+      showAlertDialog(t("sessionView.alerts.abortFailed.message"), {
+        title: t("sessionView.alerts.abortFailed.title"),
         detail: error instanceof Error ? error.message : String(error),
         variant: "error",
       })
@@ -201,8 +203,8 @@ export const SessionView: Component<SessionViewProps> = (props) => {
       }
     } catch (error) {
       log.error("Failed to revert message", error)
-      showAlertDialog("Failed to revert to message", {
-        title: "Revert failed",
+      showAlertDialog(t("sessionView.alerts.revertFailed.message"), {
+        title: t("sessionView.alerts.revertFailed.title"),
         variant: "error",
       })
     }
@@ -237,8 +239,8 @@ export const SessionView: Component<SessionViewProps> = (props) => {
       }
     } catch (error) {
       log.error("Failed to fork session", error)
-      showAlertDialog("Failed to fork session", {
-        title: "Fork failed",
+      showAlertDialog(t("sessionView.alerts.forkFailed.message"), {
+        title: t("sessionView.alerts.forkFailed.title"),
         variant: "error",
       })
     }
@@ -250,7 +252,7 @@ export const SessionView: Component<SessionViewProps> = (props) => {
       when={session()}
       fallback={
         <div class="flex items-center justify-center h-full">
-          <div class="text-center text-gray-500">Session not found</div>
+          <div class="text-center text-gray-500">{t("sessionView.fallback.sessionNotFound")}</div>
         </div>
       }
     >
@@ -296,8 +298,8 @@ export const SessionView: Component<SessionViewProps> = (props) => {
                               type="button"
                               class="attachment-expand"
                               onClick={() => handleExpandTextAttachment(attachment)}
-                              aria-label="Expand pasted text"
-                              title="Insert pasted text"
+                              aria-label={t("sessionView.attachments.expandPastedTextAriaLabel")}
+                              title={t("sessionView.attachments.insertPastedTextTitle")}
                             >
                               <Expand class="h-3 w-3" aria-hidden="true" />
                             </button>
@@ -306,7 +308,7 @@ export const SessionView: Component<SessionViewProps> = (props) => {
                             type="button"
                             class="attachment-remove"
                             onClick={() => removeAttachment(props.instanceId, props.sessionId, attachment.id)}
-                            aria-label="Remove attachment"
+                            aria-label={t("sessionView.attachments.removeAriaLabel")}
                           >
                             ×
                           </button>

packages/ui/src/components/thinking-selector.tsx

@@ -0,0 +1,113 @@
+import { Combobox } from "@kobalte/core/combobox"
+import { createEffect, createMemo } from "solid-js"
+import { providers, fetchProviders } from "../stores/sessions"
+import { ChevronDown } from "lucide-solid"
+import { getLogger } from "../lib/logger"
+import { getModelThinkingSelection, setModelThinkingSelection } from "../stores/preferences"
+import { useI18n } from "../lib/i18n"
+import Kbd from "./kbd"
+
+const log = getLogger("session")
+
+interface ThinkingSelectorProps {
+  instanceId: string
+  currentModel: { providerId: string; modelId: string }
+}
+
+type ThinkingOption = {
+  key: string
+  label: string
+  value: string | undefined
+}
+
+export default function ThinkingSelector(props: ThinkingSelectorProps) {
+  const { t } = useI18n()
+  const instanceProviders = () => providers().get(props.instanceId) || []
+
+  createEffect(() => {
+    if (instanceProviders().length === 0) {
+      fetchProviders(props.instanceId).catch((error) => log.error("Failed to fetch providers", error))
+    }
+  })
+
+  const variantKeys = createMemo(() => {
+    const { providerId, modelId } = props.currentModel
+    const provider = instanceProviders().find((p) => p.id === providerId)
+    const model = provider?.models.find((m) => m.id === modelId)
+    return model?.variantKeys ?? []
+  })
+
+  const options = createMemo<ThinkingOption[]>(() => {
+    const keys = variantKeys()
+    return [
+      { key: "__default__", label: t("thinkingSelector.variant.default"), value: undefined },
+      ...keys.map((k) => ({ key: k, label: k, value: k })),
+    ]
+  })
+
+  const currentValue = createMemo(() => {
+    const selected = getModelThinkingSelection(props.currentModel)
+    const keys = variantKeys()
+    if (selected && keys.includes(selected)) {
+      return options().find((opt) => opt.value === selected)
+    }
+    return options()[0]
+  })
+
+  const handleChange = (value: ThinkingOption | null) => {
+    if (!value) return
+    setModelThinkingSelection(props.currentModel, value.value)
+  }
+
+  const triggerPrimary = createMemo(() => {
+    const selected = currentValue()?.value
+    const variant = selected ?? t("thinkingSelector.variant.default")
+    return t("thinkingSelector.label", { variant })
+  })
+
+  return (
+    <div class="sidebar-selector">
+      <Combobox<ThinkingOption>
+        value={currentValue()}
+        onChange={handleChange}
+        options={options()}
+        optionValue="key"
+        optionLabel="label"
+        placeholder={t("thinkingSelector.label", { variant: t("thinkingSelector.variant.default") })}
+        itemComponent={(itemProps) => (
+          <Combobox.Item item={itemProps.item} class="selector-option">
+            <div class="selector-option-content">
+              <Combobox.ItemLabel class="selector-option-label">{itemProps.item.rawValue.label}</Combobox.ItemLabel>
+            </div>
+            <Combobox.ItemIndicator class="selector-option-indicator">
+              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+              </svg>
+            </Combobox.ItemIndicator>
+          </Combobox.Item>
+        )}
+      >
+        <Combobox.Control class="relative w-full" data-thinking-selector-control>
+          <Combobox.Input class="sr-only" data-thinking-selector />
+          <Combobox.Trigger class="selector-trigger">
+            <div class="selector-trigger-label selector-trigger-label--stacked flex-1 min-w-0">
+              <span class="selector-trigger-primary selector-trigger-primary--align-left">{triggerPrimary()}</span>
+            </div>
+            <span class="selector-trigger-hint" aria-hidden="true">
+              <Kbd shortcut="cmd+shift+t" />
+            </span>
+            <Combobox.Icon class="selector-trigger-icon">
+              <ChevronDown class="w-3 h-3" />
+            </Combobox.Icon>
+          </Combobox.Trigger>
+        </Combobox.Control>
+
+        <Combobox.Portal>
+          <Combobox.Content class="selector-popover">
+            <Combobox.Listbox class="selector-listbox" />
+          </Combobox.Content>
+        </Combobox.Portal>
+      </Combobox>
+    </div>
+  )
+}

packages/ui/src/components/tool-call.tsx

@@ -7,6 +7,7 @@ import { activeInterruption, sendPermissionResponse, sendQuestionReject, sendQue
 import type { PermissionRequestLike } from "../types/permission"
 import { getPermissionSessionId } from "../types/permission"
 import type { QuestionRequest } from "@opencode-ai/sdk/v2"
+import { useI18n } from "../lib/i18n"
 import { resolveToolRenderer } from "./tool-call/renderers"
 import { QuestionToolBlock } from "./tool-call/question-block"
 import { PermissionToolBlock } from "./tool-call/permission-block"
@@ -67,6 +68,7 @@ interface ToolCallProps {
 export default function ToolCall(props: ToolCallProps) {
   const { preferences, setDiffViewMode } = useConfig()
   const { isDark } = useTheme()
+  const { t } = useI18n()
   const toolCallMemo = createMemo(() => props.toolCall)
   const toolName = createMemo(() => toolCallMemo()?.tool || "")
   const toolCallIdentifier = createMemo(() => {
@@ -442,7 +444,7 @@ export default function ToolCall(props: ToolCallProps) {
       return row.map((value) => value.trim()).filter((value) => value.length > 0)
     })
     if (normalized.some((item) => (item?.length ?? 0) === 0)) {
-      setQuestionError("Please answer all questions before submitting.")
+      setQuestionError(t("toolCall.question.validation.answerAll"))
       return
     }
 
@@ -453,7 +455,7 @@ export default function ToolCall(props: ToolCallProps) {
       await sendQuestionReply(props.instanceId, sessionId, request.id, normalized)
     } catch (error) {
       log.error("Failed to send question reply", error)
-      setQuestionError(error instanceof Error ? error.message : "Unable to reply")
+      setQuestionError(error instanceof Error ? error.message : t("toolCall.question.errors.unableToReply"))
     } finally {
       setQuestionSubmitting(false)
     }
@@ -471,7 +473,7 @@ export default function ToolCall(props: ToolCallProps) {
       await sendQuestionReject(props.instanceId, sessionId, request.id)
     } catch (error) {
       log.error("Failed to reject question", error)
-      setQuestionError(error instanceof Error ? error.message : "Unable to dismiss")
+      setQuestionError(error instanceof Error ? error.message : t("toolCall.question.errors.unableToDismiss"))
     } finally {
       setQuestionSubmitting(false)
     }
@@ -545,6 +547,7 @@ export default function ToolCall(props: ToolCallProps) {
     preferences,
     setDiffViewMode,
     isDark,
+    t,
     diffCache,
     permissionDiffCache,
     scrollHelpers,
@@ -568,6 +571,7 @@ export default function ToolCall(props: ToolCallProps) {
     toolCall: toolCallMemo,
     toolState,
     toolName,
+    t,
     messageVersion: messageVersionAccessor,
     partVersion: partVersionAccessor,
     renderMarkdown: renderMarkdownContent,
@@ -639,7 +643,7 @@ export default function ToolCall(props: ToolCallProps) {
       await sendPermissionResponse(props.instanceId, sessionId, permission.id, response)
     } catch (error) {
       log.error("Failed to send permission response", error)
-      setPermissionError(error instanceof Error ? error.message : "Unable to update permission")
+      setPermissionError(error instanceof Error ? error.message : t("toolCall.permission.errors.unableToUpdate"))
     } finally {
       setPermissionSubmitting(false)
     }
@@ -651,7 +655,7 @@ export default function ToolCall(props: ToolCallProps) {
     if (state.status === "error" && state.error) {
       return (
         <div class="tool-call-error-content">
-          <strong>Error:</strong> {state.error}
+          <strong>{t("toolCall.error.label")}</strong> {state.error}
         </div>
       )
     }
@@ -752,7 +756,7 @@ export default function ToolCall(props: ToolCallProps) {
           <Show when={status() === "pending" && !pendingPermission()}>
             <div class="tool-call-pending-message">
               <span class="spinner-small"></span>
-              <span>Waiting to run...</span>
+              <span>{t("toolCall.pending.waitingToRun")}</span>
             </div>
           </Show>
         </div>
@@ -761,6 +765,7 @@ export default function ToolCall(props: ToolCallProps) {
       <Show when={diagnosticsEntries().length}>
 
         {renderDiagnosticsSection(
+          t,
           diagnosticsEntries(),
           diagnosticsExpanded(),
           () => setDiagnosticsOverride((prev) => {

packages/ui/src/components/tool-call/diagnostics-section.tsx

@@ -2,6 +2,7 @@ import { For, Show } from "solid-js"
 import type { DiagnosticEntry } from "./diagnostics"
 
 export function renderDiagnosticsSection(
+  t: (key: string, params?: Record<string, unknown>) => string,
   entries: DiagnosticEntry[],
   expanded: boolean,
   toggle: () => void,
@@ -22,13 +23,13 @@ export function renderDiagnosticsSection(
         <span class="tool-call-emoji" aria-hidden="true">
           🛠
         </span>
-        <span class="tool-call-summary">Diagnostics</span>
+        <span class="tool-call-summary">{t("toolCall.diagnostics.title")}</span>
         <span class="tool-call-diagnostics-file" title={fileLabel}>
           {fileLabel}
         </span>
       </button>
       <Show when={expanded}>
-        <div class="tool-call-diagnostics" role="region" aria-label="Diagnostics">
+        <div class="tool-call-diagnostics" role="region" aria-label={t("toolCall.diagnostics.ariaLabel")}>
           <div class="tool-call-diagnostics-body" role="list">
             <For each={entries}>
               {(entry) => (

packages/ui/src/components/tool-call/diagnostics.ts

@@ -1,5 +1,6 @@
 import type { ToolState } from "@opencode-ai/sdk"
 import { getRelativePath, isToolStateCompleted, isToolStateError, isToolStateRunning } from "./utils"
+import { tGlobal } from "../../lib/i18n"
 
 interface LspRangePosition {
   line?: number
@@ -40,9 +41,9 @@ function determineSeverityTone(severity?: number): DiagnosticEntry["tone"] {
 }
 
 function getSeverityMeta(tone: DiagnosticEntry["tone"]) {
-  if (tone === "error") return { label: "ERR", icon: "!", rank: 0 }
-  if (tone === "warning") return { label: "WARN", icon: "!", rank: 1 }
-  return { label: "INFO", icon: "i", rank: 2 }
+  if (tone === "error") return { label: tGlobal("toolCall.diagnostics.severity.error.short"), icon: "!", rank: 0 }
+  if (tone === "warning") return { label: tGlobal("toolCall.diagnostics.severity.warning.short"), icon: "!", rank: 1 }
+  return { label: tGlobal("toolCall.diagnostics.severity.info.short"), icon: "i", rank: 2 }
 }
 
 export function extractDiagnostics(state: ToolState | undefined): DiagnosticEntry[] {

packages/ui/src/components/tool-call/diff-render.tsx

@@ -19,6 +19,7 @@ export function createDiffContentRenderer(params: {
   preferences: Accessor<DiffPrefs>
   setDiffViewMode: (mode: DiffViewMode) => void
   isDark: Accessor<boolean>
+  t: (key: string, params?: Record<string, unknown>) => string
   diffCache: CacheHandle
   permissionDiffCache: CacheHandle
   scrollHelpers: ToolScrollHelpers
@@ -27,7 +28,9 @@ export function createDiffContentRenderer(params: {
 }) {
   function renderDiffContent(payload: DiffPayload, options?: DiffRenderOptions): JSXElement | null {
     const relativePath = payload.filePath ? getRelativePath(payload.filePath) : ""
-    const toolbarLabel = options?.label || (relativePath ? `Diff · ${relativePath}` : "Diff")
+    const toolbarLabel = options?.label || (relativePath
+      ? params.t("toolCall.diff.label.withPath", { path: relativePath })
+      : params.t("toolCall.diff.label"))
     const selectedVariant = options?.variant === "permission-diff" ? "permission-diff" : "diff"
     const cacheHandle = selectedVariant === "permission-diff" ? params.permissionDiffCache : params.diffCache
     const diffMode = () => (params.preferences().diffViewMode || "split") as DiffViewMode
@@ -67,7 +70,7 @@ export function createDiffContentRenderer(params: {
         ref={(element) => params.scrollHelpers.registerContainer(element, { disableTracking: options?.disableScrollTracking })}
         onScroll={options?.disableScrollTracking ? undefined : params.scrollHelpers.handleScroll}
       >
-        <div class="tool-call-diff-toolbar" role="group" aria-label="Diff view mode">
+        <div class="tool-call-diff-toolbar" role="group" aria-label={params.t("toolCall.diff.viewMode.ariaLabel")}>
           <span class="tool-call-diff-toolbar-label">{toolbarLabel}</span>
           <div class="tool-call-diff-toggle">
             <button
@@ -76,7 +79,7 @@ export function createDiffContentRenderer(params: {
               aria-pressed={diffMode() === "split"}
               onClick={() => handleModeChange("split")}
             >
-              Split
+              {params.t("toolCall.diff.viewMode.split")}
             </button>
             <button
               type="button"
@@ -84,7 +87,7 @@ export function createDiffContentRenderer(params: {
               aria-pressed={diffMode() === "unified"}
               onClick={() => handleModeChange("unified")}
             >
-              Unified
+              {params.t("toolCall.diff.viewMode.unified")}
             </button>
           </div>
         </div>

packages/ui/src/components/tool-call/markdown-render.tsx

@@ -23,20 +23,26 @@ export function createMarkdownContentRenderer(params: {
     const size = options.size || "default"
     const disableHighlight = options.disableHighlight || false
     const messageClass = `message-text tool-call-markdown${size === "large" ? " tool-call-markdown-large" : ""}`
+    const disableScrollTracking = options.disableScrollTracking || false
 
     const state = params.toolState()
     const shouldDeferMarkdown = Boolean(state && (state.status === "running" || state.status === "pending") && disableHighlight)
     if (shouldDeferMarkdown) {
       return (
-        <div class={messageClass} ref={(element) => params.scrollHelpers.registerContainer(element)} onScroll={params.scrollHelpers.handleScroll}>
+        <div
+          class={messageClass}
+          ref={(element) => params.scrollHelpers.registerContainer(element, { disableTracking: disableScrollTracking })}
+          onScroll={disableScrollTracking ? undefined : params.scrollHelpers.handleScroll}
+        >
           <pre class="whitespace-pre-wrap break-words text-sm font-mono">{options.content}</pre>
-          {params.scrollHelpers.renderSentinel()}
+          {params.scrollHelpers.renderSentinel({ disableTracking: disableScrollTracking })}
         </div>
       )
     }
 
+    const cacheKey = typeof options.cacheKey === "string" && options.cacheKey.length > 0 ? options.cacheKey : undefined
     const markdownPart: TextPart = {
-      id: params.partId(),
+      id: cacheKey ? `${params.partId()}:${cacheKey}` : params.partId(),
       type: "text",
       text: options.content,
       version: params.partVersion?.(),
@@ -48,7 +54,11 @@ export function createMarkdownContentRenderer(params: {
     }
 
     return (
-      <div class={messageClass} ref={(element) => params.scrollHelpers.registerContainer(element)} onScroll={params.scrollHelpers.handleScroll}>
+      <div
+        class={messageClass}
+        ref={(element) => params.scrollHelpers.registerContainer(element, { disableTracking: disableScrollTracking })}
+        onScroll={disableScrollTracking ? undefined : params.scrollHelpers.handleScroll}
+      >
         <Markdown
           part={markdownPart}
           instanceId={params.instanceId}
@@ -57,7 +67,7 @@ export function createMarkdownContentRenderer(params: {
           disableHighlight={disableHighlight}
           onRendered={handleMarkdownRendered}
         />
-        {params.scrollHelpers.renderSentinel()}
+        {params.scrollHelpers.renderSentinel({ disableTracking: disableScrollTracking })}
       </div>
     )
   }

packages/ui/src/components/tool-call/permission-block.tsx

@@ -2,6 +2,7 @@ import { Show, type Accessor, type JSXElement } from "solid-js"
 import type { PermissionRequestLike } from "../../types/permission"
 import { getPermissionDisplayTitle, getPermissionKind } from "../../types/permission"
 import { getPermissionSessionId } from "../../types/permission"
+import { useI18n } from "../../lib/i18n"
 import type { DiffPayload, DiffRenderOptions } from "./types"
 import { getRelativePath } from "./utils"
 
@@ -18,6 +19,8 @@ export type PermissionToolBlockProps = {
 }
 
 export function PermissionToolBlock(props: PermissionToolBlockProps) {
+  const { t } = useI18n()
+
   const diffPayload = () => {
     const permission = props.permission()
     if (!permission) return null
@@ -48,7 +51,9 @@ export function PermissionToolBlock(props: PermissionToolBlockProps) {
       {(permission) => (
         <div class={`tool-call-permission ${props.active() ? "tool-call-permission-active" : "tool-call-permission-queued"}`}>
           <div class="tool-call-permission-header">
-            <span class="tool-call-permission-label">{props.active() ? "Permission Required" : "Permission Queued"}</span>
+            <span class="tool-call-permission-label">
+              {props.active() ? t("toolCall.permission.status.required") : t("toolCall.permission.status.queued")}
+            </span>
             <span class="tool-call-permission-type">{getPermissionKind(permission())}</span>
           </div>
           <div class="tool-call-permission-body">
@@ -62,14 +67,14 @@ export function PermissionToolBlock(props: PermissionToolBlockProps) {
                     variant: "permission-diff",
                     disableScrollTracking: true,
                     label: payload().filePath
-                      ? `Requested diff · ${getRelativePath(payload().filePath || "")}`
-                      : "Requested diff",
+                      ? t("toolCall.permission.requestedDiff.withPath", { path: getRelativePath(payload().filePath || "") })
+                      : t("toolCall.permission.requestedDiff.label"),
                   })}
                 </div>
               )}
             </Show>
             <Show when={!props.active()}>
-              <p class="tool-call-permission-queued-text">Waiting for earlier permission responses.</p>
+              <p class="tool-call-permission-queued-text">{t("toolCall.permission.queuedText")}</p>
             </Show>
             <div class="tool-call-permission-actions">
               <div class="tool-call-permission-buttons">
@@ -79,7 +84,7 @@ export function PermissionToolBlock(props: PermissionToolBlockProps) {
                   disabled={props.submitting()}
                   onClick={() => respond("once")}
                 >
-                  Allow Once
+                  {t("toolCall.permission.actions.allowOnce")}
                 </button>
                 <button
                   type="button"
@@ -87,7 +92,7 @@ export function PermissionToolBlock(props: PermissionToolBlockProps) {
                   disabled={props.submitting()}
                   onClick={() => respond("always")}
                 >
-                  Always Allow
+                  {t("toolCall.permission.actions.alwaysAllow")}
                 </button>
                 <button
                   type="button"
@@ -95,17 +100,17 @@ export function PermissionToolBlock(props: PermissionToolBlockProps) {
                   disabled={props.submitting()}
                   onClick={() => respond("reject")}
                 >
-                  Deny
+                  {t("toolCall.permission.actions.deny")}
                 </button>
               </div>
               <Show when={props.active()}>
                 <div class="tool-call-permission-shortcuts">
                   <kbd class="kbd">Enter</kbd>
-                  <span>Allow once</span>
+                  <span>{t("toolCall.permission.shortcuts.allowOnce")}</span>
                   <kbd class="kbd">A</kbd>
-                  <span>Always allow</span>
+                  <span>{t("toolCall.permission.shortcuts.alwaysAllow")}</span>
                   <kbd class="kbd">D</kbd>
-                  <span>Deny</span>
+                  <span>{t("toolCall.permission.shortcuts.deny")}</span>
                 </div>
               </Show>
             </div>

packages/ui/src/components/tool-call/question-block.tsx

@@ -1,6 +1,7 @@
 import { createMemo, Show, For, type Accessor } from "solid-js"
 import type { ToolState } from "@opencode-ai/sdk"
 import type { QuestionRequest } from "@opencode-ai/sdk/v2"
+import { useI18n } from "../../lib/i18n"
 
 type QuestionOption = { label: string; description: string }
 
@@ -26,6 +27,8 @@ export type QuestionToolBlockProps = {
 }
 
 export function QuestionToolBlock(props: QuestionToolBlockProps) {
+  const { t } = useI18n()
+
   const requestId = createMemo(() => {
     const state = props.toolState()
     const request = props.request()
@@ -163,9 +166,15 @@ export function QuestionToolBlock(props: QuestionToolBlockProps) {
       <div class={`tool-call-permission ${props.active() ? "tool-call-permission-active" : "tool-call-permission-queued"}`}>
         <div class="tool-call-permission-header">
           <span class="tool-call-permission-label">
-            {props.active() ? "Question Required" : props.request() ? "Question Queued" : "Questions"}
+            {props.active()
+              ? t("toolCall.question.status.required")
+              : props.request()
+                ? t("toolCall.question.status.queued")
+                : t("toolCall.question.status.questions")}
+          </span>
+          <span class="tool-call-permission-type">
+            {questions().length === 1 ? t("toolCall.question.type.one") : t("toolCall.question.type.other")}
           </span>
-          <span class="tool-call-permission-type">{questions().length === 1 ? "Question" : "Questions"}</span>
         </div>
 
         <div class="tool-call-permission-body">
@@ -186,10 +195,10 @@ export function QuestionToolBlock(props: QuestionToolBlockProps) {
                   <div class="rounded-md border border-base/60 bg-surface/30 p-3">
                     <div class="flex items-baseline justify-between gap-2">
                       <div class="text-xs">
-                        Q{i() + 1}: <span class="font-semibold">{q?.header}</span>
+                        {t("toolCall.question.number", { number: i() + 1 })} <span class="font-semibold">{q?.header}</span>
                       </div>
                       <Show when={multi()}>
-                        <div class="text-xs text-muted">Multiple</div>
+                        <div class="text-xs text-muted">{t("toolCall.question.multiple")}</div>
                       </Show>
                     </div>
 
@@ -222,7 +231,7 @@ export function QuestionToolBlock(props: QuestionToolBlockProps) {
 
                       <label
                         class={`mt-2 flex items-start gap-2 py-1 ${props.active() ? "cursor-pointer" : props.request() ? "opacity-80" : ""}`}
-                        title="Type a custom answer"
+                        title={t("toolCall.question.custom.title")}
                       >
                         <input
                           type={inputType()}
@@ -244,11 +253,11 @@ export function QuestionToolBlock(props: QuestionToolBlockProps) {
                           }}
                         />
                         <div class="flex flex-1 flex-col gap-2">
-                          <div class="text-sm leading-tight">Custom answer</div>
+                          <div class="text-sm leading-tight">{t("toolCall.question.custom.label")}</div>
                           <input
                             class="w-full rounded-md border border-base/50 bg-surface px-2 py-1 text-sm"
                             type="text"
-                            placeholder="Type your own answer"
+                            placeholder={t("toolCall.question.custom.placeholder")}
                             disabled={!props.active() || props.submitting()}
                             value={customValue()}
                             onFocus={(e) => {
@@ -275,7 +284,7 @@ export function QuestionToolBlock(props: QuestionToolBlockProps) {
                     disabled={submitDisabled()}
                     onClick={() => props.onSubmit()}
                   >
-                    Submit
+                    {t("toolCall.question.actions.submit")}
                   </button>
                   <button
                     type="button"
@@ -283,15 +292,15 @@ export function QuestionToolBlock(props: QuestionToolBlockProps) {
                     disabled={props.submitting()}
                     onClick={() => props.onDismiss()}
                   >
-                    Dismiss
+                    {t("toolCall.question.actions.dismiss")}
                   </button>
                 </div>
 
                 <div class="tool-call-permission-shortcuts">
                   <kbd class="kbd">Enter</kbd>
-                  <span>Submit</span>
+                  <span>{t("toolCall.question.shortcuts.submit")}</span>
                   <kbd class="kbd">Esc</kbd>
-                  <span>Dismiss</span>
+                  <span>{t("toolCall.question.shortcuts.dismiss")}</span>
                 </div>
 
                 <Show when={props.error()}>
@@ -301,7 +310,7 @@ export function QuestionToolBlock(props: QuestionToolBlockProps) {
             </Show>
 
             <Show when={!props.active() && props.request()}>
-              <p class="tool-call-permission-queued-text">Waiting for earlier responses.</p>
+              <p class="tool-call-permission-queued-text">{t("toolCall.question.queuedText")}</p>
             </Show>
           </div>
         </div>

packages/ui/src/components/tool-call/renderers/apply-patch.tsx

@@ -35,10 +35,10 @@ function determineSeverityTone(severity?: number): DiagnosticEntry["tone"] {
   return "info"
 }
 
-function getSeverityMeta(tone: DiagnosticEntry["tone"]) {
-  if (tone === "error") return { label: "ERR", icon: "!", rank: 0 }
-  if (tone === "warning") return { label: "WARN", icon: "!", rank: 1 }
-  return { label: "INFO", icon: "i", rank: 2 }
+function getSeverityMeta(tone: DiagnosticEntry["tone"], t: (key: string, params?: Record<string, unknown>) => string) {
+  if (tone === "error") return { label: t("toolCall.diagnostics.severity.error.short"), icon: "!", rank: 0 }
+  if (tone === "warning") return { label: t("toolCall.diagnostics.severity.warning.short"), icon: "!", rank: 1 }
+  return { label: t("toolCall.diagnostics.severity.info.short"), icon: "i", rank: 2 }
 }
 
 function resolveDiagnosticsKey(
@@ -69,6 +69,7 @@ function resolveDiagnosticsKey(
 function buildDiagnostics(
   diagnostics: Record<string, LspDiagnostic[] | undefined>,
   file: ApplyPatchFile,
+  t: (key: string, params?: Record<string, unknown>) => string,
 ): DiagnosticEntry[] {
   const key = resolveDiagnosticsKey(diagnostics, file)
   if (!key) return []
@@ -82,7 +83,7 @@ function buildDiagnostics(
     if (!diagnostic || typeof diagnostic.message !== "string") continue
 
     const tone = determineSeverityTone(typeof diagnostic.severity === "number" ? diagnostic.severity : undefined)
-    const severityMeta = getSeverityMeta(tone)
+    const severityMeta = getSeverityMeta(tone, t)
     const line = typeof diagnostic.range?.start?.line === "number" ? diagnostic.range.start.line + 1 : 0
     const column = typeof diagnostic.range?.start?.character === "number" ? diagnostic.range.start.character + 1 : 0
 
@@ -103,11 +104,14 @@ function buildDiagnostics(
   return entries.sort((a, b) => a.severity - b.severity)
 }
 
-function DiagnosticsInline(props: { entries: DiagnosticEntry[]; label: string }) {
+function DiagnosticsInline(props: { entries: DiagnosticEntry[]; label: string; t: (key: string, params?: Record<string, unknown>) => string }) {
   return (
     <Show when={props.entries.length > 0}>
       <div class="tool-call-diagnostics-wrapper">
-        <div class="tool-call-diagnostics" role="region" aria-label={`Diagnostics ${props.label}`}
+        <div
+          class="tool-call-diagnostics"
+          role="region"
+          aria-label={props.t("toolCall.diagnostics.ariaLabel.withLabel", { label: props.label })}
         >
           <div class="tool-call-diagnostics-body" role="list">
             <For each={props.entries}>
@@ -134,19 +138,22 @@ function DiagnosticsInline(props: { entries: DiagnosticEntry[]; label: string })
 
 export const applyPatchRenderer: ToolRenderer = {
   tools: ["apply_patch"],
-  getAction: () => "Preparing apply_patch...",
-  getTitle({ toolState }) {
+  getAction: ({ t }) => t("toolCall.applyPatch.action.preparing"),
+  getTitle({ toolState, t }) {
     const state = toolState()
     if (!state) return undefined
     if (state.status === "pending") return getToolName("apply_patch")
     const { metadata } = readToolStatePayload(state)
     const files = Array.isArray((metadata as any).files) ? ((metadata as any).files as ApplyPatchFile[]) : []
     if (files.length > 0) {
-      return `${getToolName("apply_patch")} (${files.length} file${files.length === 1 ? "" : "s"})`
+      const tool = getToolName("apply_patch")
+      return files.length === 1
+        ? t("toolCall.applyPatch.title.withFileCount.one", { tool, count: files.length })
+        : t("toolCall.applyPatch.title.withFileCount.other", { tool, count: files.length })
     }
     return getToolName("apply_patch")
   },
-  renderBody({ toolState, renderDiff, renderMarkdown }) {
+  renderBody({ toolState, renderDiff, renderMarkdown, t }) {
     const state = toolState()
     if (!state || state.status === "pending") return null
 
@@ -170,10 +177,10 @@ export const applyPatchRenderer: ToolRenderer = {
       <div class="tool-call-apply-patch">
         <For each={files()}>
           {(file, index) => {
-            const labelBase = file.relativePath || file.filePath || `File ${index() + 1}`
+            const labelBase = file.relativePath || file.filePath || t("toolCall.applyPatch.fileFallback", { number: index() + 1 })
             const diffText = typeof file.diff === "string" ? file.diff : ""
             const filePath = typeof file.filePath === "string" ? file.filePath : file.relativePath
-            const entries = createMemo(() => buildDiagnostics(diagnosticsMap(), file))
+            const entries = createMemo(() => buildDiagnostics(diagnosticsMap(), file, t))
 
             return (
               <div class="tool-call-apply-patch-file">
@@ -181,12 +188,12 @@ export const applyPatchRenderer: ToolRenderer = {
                   {renderDiff(
                     { diffText, filePath },
                     {
-                      label: `Diff · ${getRelativePath(labelBase)}`,
+                      label: t("toolCall.diff.label.withPath", { path: getRelativePath(labelBase) }),
                       cacheKey: `apply_patch:${labelBase}:${index()}`,
                     },
                   )}
                 </Show>
-                <DiagnosticsInline entries={entries()} label={labelBase} />
+                <DiagnosticsInline entries={entries()} label={labelBase} t={t} />
               </div>
             )
           }}

packages/ui/src/components/tool-call/renderers/bash.tsx

@@ -1,9 +1,10 @@
 import type { ToolRenderer } from "../types"
 import { ensureMarkdownContent, formatUnknown, getToolName, isToolStateCompleted, isToolStateError, isToolStateRunning, readToolStatePayload } from "../utils"
+import { tGlobal } from "../../../lib/i18n"
 
 export const bashRenderer: ToolRenderer = {
   tools: ["bash"],
-  getAction: () => "Writing command...",
+  getAction: () => tGlobal("toolCall.renderer.action.writingCommand"),
   getTitle({ toolState }) {
     const state = toolState()
     if (!state) return undefined
@@ -18,7 +19,7 @@ export const bashRenderer: ToolRenderer = {
     }
 
     const timeoutLabel = `${timeout}ms`
-    return `${baseTitle} · Timeout: ${timeoutLabel}`
+    return `${baseTitle} · ${tGlobal("toolCall.renderer.bash.title.timeout", { timeout: timeoutLabel })}`
   },
   renderBody({ toolState, renderMarkdown, renderAnsi }) {
     const state = toolState()

packages/ui/src/components/tool-call/renderers/edit.tsx

@@ -1,9 +1,10 @@
 import type { ToolRenderer } from "../types"
 import { ensureMarkdownContent, extractDiffPayload, getRelativePath, getToolName, isToolStateCompleted, readToolStatePayload } from "../utils"
+import { tGlobal } from "../../../lib/i18n"
 
 export const editRenderer: ToolRenderer = {
   tools: ["edit"],
-  getAction: () => "Preparing edit...",
+  getAction: () => tGlobal("toolCall.renderer.action.preparingEdit"),
   getTitle({ toolState }) {
     const state = toolState()
     if (!state) return undefined

packages/ui/src/components/tool-call/renderers/patch.tsx

@@ -1,9 +1,10 @@
 import type { ToolRenderer } from "../types"
 import { ensureMarkdownContent, extractDiffPayload, getRelativePath, getToolName, isToolStateCompleted, readToolStatePayload } from "../utils"
+import { tGlobal } from "../../../lib/i18n"
 
 export const patchRenderer: ToolRenderer = {
   tools: ["patch"],
-  getAction: () => "Preparing patch...",
+  getAction: () => tGlobal("toolCall.renderer.action.preparingPatch"),
   getTitle({ toolState }) {
     const state = toolState()
     if (!state) return undefined

packages/ui/src/components/tool-call/renderers/question.tsx

@@ -2,12 +2,12 @@ import type { ToolRenderer } from "../types"
 
 export const questionRenderer: ToolRenderer = {
   tools: ["question"],
-  getAction: () => "Awaiting answers...",
-  getTitle({ toolState }) {
+  getAction: ({ t }) => t("toolCall.question.action.awaitingAnswers"),
+  getTitle({ toolState, t }) {
     const state = toolState()
-    if (!state) return "Questions"
-    if (state.status === "completed") return "Questions"
-    return "Asking questions"
+    if (!state) return t("toolCall.question.title.questions")
+    if (state.status === "completed") return t("toolCall.question.title.questions")
+    return t("toolCall.question.title.askingQuestions")
   },
   renderBody() {
     // The question tool UI is rendered by ToolCall itself so

packages/ui/src/components/tool-call/renderers/read.tsx

@@ -1,9 +1,10 @@
 import type { ToolRenderer } from "../types"
 import { ensureMarkdownContent, getRelativePath, getToolName, inferLanguageFromPath, readToolStatePayload } from "../utils"
+import { tGlobal } from "../../../lib/i18n"
 
 export const readRenderer: ToolRenderer = {
   tools: ["read"],
-  getAction: () => "Reading file...",
+  getAction: () => tGlobal("toolCall.renderer.action.readingFile"),
   getTitle({ toolState }) {
     const state = toolState()
     if (!state) return undefined
@@ -15,11 +16,11 @@ export const readRenderer: ToolRenderer = {
     const detailParts: string[] = []
 
     if (typeof offset === "number") {
-      detailParts.push(`Offset: ${offset}`)
+      detailParts.push(tGlobal("toolCall.renderer.read.detail.offset", { offset }))
     }
 
     if (typeof limit === "number") {
-      detailParts.push(`Limit: ${limit}`)
+      detailParts.push(tGlobal("toolCall.renderer.read.detail.limit", { limit }))
     }
 
     const baseTitle = relativePath ? `${getToolName("read")} ${relativePath}` : getToolName("read")

packages/ui/src/components/tool-call/renderers/task.tsx

@@ -1,8 +1,7 @@
 import { For, Show, createMemo } from "solid-js"
 import type { ToolState } from "@opencode-ai/sdk"
 import type { ToolRenderer } from "../types"
-import { getDefaultToolAction, getToolIcon, getToolName, readToolStatePayload } from "../utils"
-import { getTodoTitle } from "./todo"
+import { ensureMarkdownContent, getDefaultToolAction, getToolIcon, getToolName, readToolStatePayload } from "../utils"
 import { resolveTitleForTool } from "../tool-title"
 
 interface TaskSummaryItem {
@@ -38,18 +37,7 @@ function summarizeStatusIcon(status?: ToolState["status"]) {
 }
 
 function summarizeStatusLabel(status?: ToolState["status"]) {
-  switch (status) {
-    case "pending":
-      return "Pending"
-    case "running":
-      return "Running"
-    case "completed":
-      return "Completed"
-    case "error":
-      return "Error"
-    default:
-      return "Unknown"
-  }
+  return status
 }
 
 function describeTaskTitle(input: Record<string, any>) {
@@ -83,14 +71,58 @@ function describeToolTitle(item: TaskSummaryItem): string {
 
 export const taskRenderer: ToolRenderer = {
   tools: ["task"],
-  getAction: () => "Delegating...",
+  getAction: ({ t }) => t("toolCall.task.action.delegating"),
   getTitle({ toolState }) {
     const state = toolState()
     if (!state) return undefined
     const { input } = readToolStatePayload(state)
     return describeTaskTitle(input)
   },
-  renderBody({ toolState, messageVersion, partVersion, scrollHelpers }) {
+  renderBody({ toolState, messageVersion, partVersion, scrollHelpers, renderMarkdown, t }) {
+    const promptContent = createMemo(() => {
+      const state = toolState()
+      if (!state) return null
+      const { input } = readToolStatePayload(state)
+      const prompt = typeof input.prompt === "string" ? input.prompt : null
+      return ensureMarkdownContent(prompt, undefined, false)
+    })
+
+    const outputContent = createMemo(() => {
+      const state = toolState()
+      if (!state) return null
+      const output = typeof (state as { output?: unknown }).output === "string" ? ((state as { output?: string }).output as string) : null
+      return ensureMarkdownContent(output, undefined, false)
+    })
+
+    const agentLabel = createMemo(() => {
+      const state = toolState()
+      if (!state) return null
+      const { input } = readToolStatePayload(state)
+      return typeof input.subagent_type === "string" ? input.subagent_type : null
+    })
+
+    const modelLabel = createMemo(() => {
+      const state = toolState()
+      if (!state) return null
+      const { metadata } = readToolStatePayload(state)
+      const model = (metadata as any).model
+      if (!model || typeof model !== "object") return null
+      const providerId = typeof model.providerID === "string" ? model.providerID : null
+      const modelId = typeof model.modelID === "string" ? model.modelID : null
+      if (!providerId && !modelId) return null
+      if (providerId && modelId) return `${providerId}/${modelId}`
+      return providerId ?? modelId
+    })
+
+    const headerMeta = createMemo(() => {
+      const agent = agentLabel()
+      const model = modelLabel()
+      if (agent && model) return t("toolCall.task.meta.agentModel", { agent, model })
+      if (agent) return t("toolCall.task.meta.agent", { agent })
+      if (model) return t("toolCall.task.meta.model", { model })
+      return null
+    })
+
     const items = createMemo(() => {
       // Track the reactive change points so we only recompute when the part/message changes
       messageVersion?.()
@@ -114,41 +146,93 @@ export const taskRenderer: ToolRenderer = {
       })
     })
 
-    if (items().length === 0) return null
-
     return (
-      <div
-        class="message-text tool-call-markdown tool-call-task-container"
-        ref={(element) => scrollHelpers?.registerContainer(element)}
-        onScroll={scrollHelpers ? (event) => scrollHelpers.handleScroll(event as Event & { currentTarget: HTMLDivElement }) : undefined}
-      >
-        <div class="tool-call-task-summary">
-          <For each={items()}>
-            {(item) => {
-              const icon = getToolIcon(item.tool)
-              const description = describeToolTitle(item)
-              const toolLabel = getToolName(item.tool)
-              const status = normalizeStatus(item.status ?? item.state?.status)
-              const statusIcon = summarizeStatusIcon(status)
-              const statusLabel = summarizeStatusLabel(status)
-              const statusAttr = status ?? "pending"
-              return (
-                <div class="tool-call-task-item" data-task-id={item.id} data-task-status={statusAttr}>
-                  <span class="tool-call-task-icon">{icon}</span>
-                  <span class="tool-call-task-label">{toolLabel}</span>
-                  <span class="tool-call-task-separator" aria-hidden="true">—</span>
-                  <span class="tool-call-task-text">{description}</span>
-                  <Show when={statusIcon}>
-                    <span class="tool-call-task-status" aria-label={statusLabel} title={statusLabel}>
-                      {statusIcon}
-                    </span>
-                  </Show>
+      <div class="tool-call-task-sections">
+        <Show when={promptContent()}>
+          <section class="tool-call-task-section">
+            <header class="tool-call-task-section-header">
+              <span class="tool-call-task-section-title">{t("toolCall.task.sections.prompt")}</span>
+              <Show when={headerMeta()}>
+                <span class="tool-call-task-section-meta">{headerMeta()}</span>
+              </Show>
+            </header>
+            <div class="tool-call-task-section-body">
+              {renderMarkdown({
+                content: promptContent()!,
+                cacheKey: "task:prompt",
+                disableScrollTracking: true,
+                disableHighlight: true,
+              })}
+            </div>
+          </section>
+        </Show>
+
+        <Show when={items().length > 0}>
+          <section class="tool-call-task-section">
+            <header class="tool-call-task-section-header">
+              <span class="tool-call-task-section-title">{t("toolCall.task.sections.steps")}</span>
+              <span class="tool-call-task-section-meta">{t("toolCall.task.steps.count", { count: items().length })}</span>
+            </header>
+            <div class="tool-call-task-section-body">
+              <div
+                class="message-text tool-call-markdown tool-call-task-container"
+                ref={(element) => scrollHelpers?.registerContainer(element)}
+                onScroll={
+                  scrollHelpers ? (event) => scrollHelpers.handleScroll(event as Event & { currentTarget: HTMLDivElement }) : undefined
+                }
+              >
+                <div class="tool-call-task-summary">
+                  <For each={items()}>
+                    {(item) => {
+                      const icon = getToolIcon(item.tool)
+                      const description = describeToolTitle(item)
+                      const toolLabel = getToolName(item.tool)
+                      const status = normalizeStatus(item.status ?? item.state?.status)
+                      const statusIcon = summarizeStatusIcon(status)
+                      const statusKey = summarizeStatusLabel(status)
+                      const statusLabel = statusKey
+                        ? t(`toolCall.status.${statusKey}`)
+                        : t("toolCall.status.unknown")
+                      const statusAttr = status ?? "pending"
+                      return (
+                        <div class="tool-call-task-item" data-task-id={item.id} data-task-status={statusAttr}>
+                          <span class="tool-call-task-icon">{icon}</span>
+                          <span class="tool-call-task-label">{toolLabel}</span>
+                          <span class="tool-call-task-separator" aria-hidden="true">—</span>
+                          <span class="tool-call-task-text">{description}</span>
+                          <Show when={statusIcon}>
+                            <span class="tool-call-task-status" aria-label={statusLabel} title={statusLabel}>
+                              {statusIcon}
+                            </span>
+                          </Show>
+                        </div>
+                      )
+                    }}
+                  </For>
                 </div>
-              )
-            }}
-          </For>
-        </div>
-        {scrollHelpers?.renderSentinel?.()}
+                {scrollHelpers?.renderSentinel?.()}
+              </div>
+            </div>
+          </section>
+        </Show>
+
+        <Show when={outputContent()}>
+          <section class="tool-call-task-section">
+            <header class="tool-call-task-section-header">
+              <span class="tool-call-task-section-title">{t("toolCall.task.sections.output")}</span>
+              <Show when={headerMeta()}>
+                <span class="tool-call-task-section-meta">{headerMeta()}</span>
+              </Show>
+            </header>
+            <div class="tool-call-task-section-body">
+              {renderMarkdown({
+                content: outputContent()!,
+                cacheKey: "task:output",
+                disableScrollTracking: true,
+              })}
+            </div>
+          </section>
+        </Show>
       </div>
     )
   },

packages/ui/src/components/tool-call/renderers/todo.tsx

@@ -2,6 +2,7 @@ import { For, Show } from "solid-js"
 import type { ToolState } from "@opencode-ai/sdk"
 import type { ToolRenderer } from "../types"
 import { readToolStatePayload } from "../utils"
+import { useI18n, tGlobal } from "../../../lib/i18n"
 
 export type TodoViewStatus = "pending" | "in_progress" | "completed" | "cancelled"
 
@@ -45,16 +46,16 @@ function summarizeTodos(todos: TodoViewItem[]) {
   )
 }
 
-function getTodoStatusLabel(status: TodoViewStatus): string {
+function getTodoStatusLabel(t: (key: string) => string, status: TodoViewStatus): string {
   switch (status) {
     case "completed":
-      return "Completed"
+      return t("toolCall.renderer.todo.status.completed")
     case "in_progress":
-      return "In progress"
+      return t("toolCall.renderer.todo.status.inProgress")
     case "cancelled":
-      return "Cancelled"
+      return t("toolCall.renderer.todo.status.cancelled")
     default:
-      return "Pending"
+      return t("toolCall.renderer.todo.status.pending")
   }
 }
 
@@ -65,11 +66,12 @@ interface TodoListViewProps {
 }
 
 export function TodoListView(props: TodoListViewProps) {
+  const { t } = useI18n()
   const todos = extractTodosFromState(props.state)
   const counts = summarizeTodos(todos)
 
   if (counts.total === 0) {
-    return <div class="tool-call-todo-empty">{props.emptyLabel ?? "No plan items yet."}</div>
+    return <div class="tool-call-todo-empty">{props.emptyLabel ?? t("toolCall.renderer.todo.empty")}</div>
   }
 
   return (
@@ -77,7 +79,7 @@ export function TodoListView(props: TodoListViewProps) {
       <div class="tool-call-todos" role="list">
         <For each={todos}>
           {(todo) => {
-            const label = getTodoStatusLabel(todo.status)
+            const label = getTodoStatusLabel(t, todo.status)
             return (
               <div
                 class="tool-call-todo-item"
@@ -108,20 +110,20 @@ export function TodoListView(props: TodoListViewProps) {
 }
 
 export function getTodoTitle(state?: ToolState): string {
-  if (!state) return "Plan"
+  if (!state) return tGlobal("toolCall.renderer.todo.title.plan")
 
   const todos = extractTodosFromState(state)
-  if (state.status !== "completed" || todos.length === 0) return "Plan"
+  if (state.status !== "completed" || todos.length === 0) return tGlobal("toolCall.renderer.todo.title.plan")
 
   const counts = summarizeTodos(todos)
-  if (counts.pending === counts.total) return "Creating plan"
-  if (counts.completed === counts.total) return "Completing plan"
-  return "Updating plan"
+  if (counts.pending === counts.total) return tGlobal("toolCall.renderer.todo.title.creating")
+  if (counts.completed === counts.total) return tGlobal("toolCall.renderer.todo.title.completing")
+  return tGlobal("toolCall.renderer.todo.title.updating")
 }
 
 export const todoRenderer: ToolRenderer = {
   tools: ["todowrite", "todoread"],
-  getAction: () => "Planning...",
+  getAction: () => tGlobal("toolCall.renderer.action.planning"),
   getTitle({ toolState }) {
     return getTodoTitle(toolState())
   },

packages/ui/src/components/tool-call/renderers/webfetch.tsx

@@ -1,9 +1,10 @@
 import type { ToolRenderer } from "../types"
 import { ensureMarkdownContent, formatUnknown, getToolName, readToolStatePayload } from "../utils"
+import { tGlobal } from "../../../lib/i18n"
 
 export const webfetchRenderer: ToolRenderer = {
   tools: ["webfetch"],
-  getAction: () => "Fetching from the web...",
+  getAction: () => tGlobal("toolCall.renderer.action.fetchingFromWeb"),
   getTitle({ toolState }) {
     const state = toolState()
     if (!state) return undefined

packages/ui/src/components/tool-call/renderers/write.tsx

@@ -1,9 +1,10 @@
 import type { ToolRenderer } from "../types"
 import { ensureMarkdownContent, getRelativePath, getToolName, inferLanguageFromPath, readToolStatePayload } from "../utils"
+import { tGlobal } from "../../../lib/i18n"
 
 export const writeRenderer: ToolRenderer = {
   tools: ["write"],
-  getAction: () => "Preparing write...",
+  getAction: () => tGlobal("toolCall.renderer.action.preparingWrite"),
   getTitle({ toolState }) {
     const state = toolState()
     if (!state) return undefined

packages/ui/src/components/tool-call/tool-title.ts

@@ -1,6 +1,7 @@
 import type { ToolState } from "@opencode-ai/sdk"
 import type { ToolRendererContext, ToolRenderer, ToolCallPart } from "./types"
 import { getDefaultToolAction, getToolName, isToolStateCompleted, isToolStateRunning } from "./utils"
+import { enMessages } from "../../lib/i18n/messages/en"
 import { defaultRenderer } from "./renderers/default"
 import { bashRenderer } from "./renderers/bash"
 import { readRenderer } from "./renderers/read"
@@ -43,12 +44,28 @@ function createStaticToolPart(snapshot: TitleSnapshot): ToolCallPart {
   } as ToolCallPart
 }
 
+function interpolate(template: string, params?: Record<string, unknown>): string {
+  if (!params) return template
+  return template.replace(/\{(\w+)\}/g, (_match, key: string) => {
+    const value = params[key]
+    return value === undefined || value === null ? "" : String(value)
+  })
+}
+
+function createStaticT(): ToolRendererContext["t"] {
+  return (key, params) => {
+    const template = (enMessages as Record<string, string>)[key] ?? key
+    return interpolate(template, params)
+  }
+}
+
 function createStaticContext(snapshot: TitleSnapshot): ToolRendererContext {
   const toolStateAccessor = () => snapshot.state
   const toolNameAccessor = () => snapshot.toolName
   const toolCallAccessor = () => createStaticToolPart(snapshot)
   const messageVersionAccessor = () => undefined
   const partVersionAccessor = () => undefined
+  const t = createStaticT()
   const renderMarkdown: ToolRendererContext["renderMarkdown"] = () => null
   const renderAnsi: ToolRendererContext["renderAnsi"] = () => null
   const renderDiff: ToolRendererContext["renderDiff"] = () => null
@@ -57,6 +74,7 @@ function createStaticContext(snapshot: TitleSnapshot): ToolRendererContext {
     toolCall: toolCallAccessor,
     toolState: toolStateAccessor,
     toolName: toolNameAccessor,
+    t,
     messageVersion: messageVersionAccessor,
     partVersion: partVersionAccessor,
     renderMarkdown,

packages/ui/src/components/tool-call/types.ts

@@ -13,6 +13,16 @@ export interface MarkdownRenderOptions {
   content: string
   size?: "default" | "large"
   disableHighlight?: boolean
+  /**
+   * Optional suffix to avoid render-cache collisions when a tool call renders
+   * multiple markdown regions (e.g. task prompt vs task output).
+   */
+  cacheKey?: string
+  /**
+   * When true, do not register this markdown region with tool-call scroll
+   * tracking (avoids nested scroll + autoscroll interactions).
+   */
+  disableScrollTracking?: boolean
 }
 
 export interface AnsiRenderOptions {
@@ -43,6 +53,7 @@ export interface ToolRendererContext {
   toolCall: Accessor<ToolCallPart>
   toolState: Accessor<ToolState | undefined>
   toolName: Accessor<string>
+  t: (key: string, params?: Record<string, unknown>) => string
   messageVersion?: Accessor<number | undefined>
   partVersion?: Accessor<number | undefined>
   renderMarkdown(options: MarkdownRenderOptions): JSXElement | null

packages/ui/src/components/tool-call/utils.ts

@@ -3,6 +3,7 @@ import { getLanguageFromPath } from "../../lib/markdown"
 import type { ToolState } from "@opencode-ai/sdk"
 import type { DiffPayload } from "./types"
 import { getLogger } from "../../lib/logger"
+import { tGlobal } from "../../lib/i18n"
 const log = getLogger("session")
 
 
@@ -61,16 +62,16 @@ export function getToolIcon(tool: string): string {
 export function getToolName(tool: string): string {
   switch (tool) {
     case "bash":
-      return "Shell"
+      return tGlobal("toolCall.renderer.toolName.shell")
     case "webfetch":
-      return "Fetch"
+      return tGlobal("toolCall.renderer.toolName.fetch")
     case "invalid":
-      return "Invalid"
+      return tGlobal("toolCall.renderer.toolName.invalid")
     case "todowrite":
     case "todoread":
-      return "Plan"
+      return tGlobal("toolCall.renderer.toolName.plan")
     case "apply_patch":
-      return "Apply patch"
+      return tGlobal("toolCall.renderer.toolName.applyPatch")
     default: {
       const normalized = tool.replace(/^opencode_/, "")
       return normalized.charAt(0).toUpperCase() + normalized.slice(1)
@@ -202,31 +203,31 @@ export function readToolStatePayload(state?: ToolState): {
 export function getDefaultToolAction(toolName: string) {
   switch (toolName) {
     case "task":
-      return "Delegating..."
+      return tGlobal("toolCall.task.action.delegating")
     case "bash":
-      return "Writing command..."
+      return tGlobal("toolCall.renderer.action.writingCommand")
     case "edit":
-      return "Preparing edit..."
+      return tGlobal("toolCall.renderer.action.preparingEdit")
     case "webfetch":
-      return "Fetching from the web..."
+      return tGlobal("toolCall.renderer.action.fetchingFromWeb")
     case "glob":
-      return "Finding files..."
+      return tGlobal("toolCall.renderer.action.findingFiles")
     case "grep":
-      return "Searching content..."
+      return tGlobal("toolCall.renderer.action.searchingContent")
     case "list":
-      return "Listing directory..."
+      return tGlobal("toolCall.renderer.action.listingDirectory")
     case "read":
-      return "Reading file..."
+      return tGlobal("toolCall.renderer.action.readingFile")
     case "write":
-      return "Preparing write..."
+      return tGlobal("toolCall.renderer.action.preparingWrite")
     case "todowrite":
     case "todoread":
-      return "Planning..."
+      return tGlobal("toolCall.renderer.action.planning")
     case "patch":
-      return "Preparing patch..."
+      return tGlobal("toolCall.renderer.action.preparingPatch")
     case "apply_patch":
-      return "Preparing apply_patch..."
+      return tGlobal("toolCall.applyPatch.action.preparing")
     default:
-      return "Working..."
+      return tGlobal("toolCall.renderer.action.working")
   }
 }

packages/ui/src/components/unified-picker.tsx

@@ -3,6 +3,7 @@ import type { Agent } from "../types/session"
 import type { Command as SDKCommand } from "@opencode-ai/sdk/v2"
 import type { OpencodeClient } from "@opencode-ai/sdk/v2/client"
 import { serverApi } from "../lib/api-client"
+import { useI18n } from "../lib/i18n"
 import { getLogger } from "../lib/logger"
 const log = getLogger("actions")
 
@@ -87,6 +88,7 @@ interface UnifiedPickerProps {
 }
 
 const UnifiedPicker: Component<UnifiedPickerProps> = (props) => {
+  const { t } = useI18n()
   const mode = () => props.mode ?? "mention"
 
   const [files, setFiles] = createSignal<FileItem[]>([])
@@ -366,10 +368,10 @@ const UnifiedPicker: Component<UnifiedPickerProps> = (props) => {
   const isLoading = () => mode() === "mention" && loadingState() !== "idle"
   const loadingMessage = () => {
     if (loadingState() === "search") {
-      return "Searching..."
+      return t("unifiedPicker.loading.searching")
     }
     if (loadingState() === "listing") {
-      return "Loading workspace..."
+      return t("unifiedPicker.loading.loadingWorkspace")
     }
     return ""
   }
@@ -383,8 +385,8 @@ const UnifiedPicker: Component<UnifiedPickerProps> = (props) => {
       >
         <div class="dropdown-header">
           <div class="dropdown-header-title">
-            <Show when={mode() === "command"} fallback={"Select Agent or File"}>
-              Select Command
+            <Show when={mode() === "command"} fallback={t("unifiedPicker.title.mention")}>
+              {t("unifiedPicker.title.command")}
             </Show>
             <Show when={isLoading()}>
               <span class="ml-2">{loadingMessage()}</span>
@@ -394,11 +396,11 @@ const UnifiedPicker: Component<UnifiedPickerProps> = (props) => {
 
         <div ref={scrollContainerRef} class="dropdown-content max-h-60">
           <Show when={(mode() === "command" ? commandCount() === 0 : agentCount() === 0 && fileCount() === 0)}>
-            <div class="dropdown-empty">No results found</div>
+            <div class="dropdown-empty">{t("unifiedPicker.empty")}</div>
           </Show>
 
           <Show when={mode() === "command" && commandCount() > 0}>
-            <div class="dropdown-section-header">COMMANDS</div>
+            <div class="dropdown-section-header">{t("unifiedPicker.sections.commands")}</div>
             <For each={filteredCommands()}>
               {(command) => {
                 const itemIndex = allItems().findIndex((item) => item.type === "command" && item.command.name === command.name)
@@ -429,7 +431,7 @@ const UnifiedPicker: Component<UnifiedPickerProps> = (props) => {
 
           <Show when={mode() === "mention" && agentCount() > 0}>
             <div class="dropdown-section-header">
-              AGENTS
+              {t("unifiedPicker.sections.agents")}
             </div>
             <For each={filteredAgents()}>
               {(agent) => {
@@ -463,7 +465,7 @@ const UnifiedPicker: Component<UnifiedPickerProps> = (props) => {
                           <span class="text-sm font-medium">{agent.name}</span>
                           <Show when={agent.mode === "subagent"}>
                             <span class="dropdown-badge">
-                              subagent
+                              {t("unifiedPicker.badge.subagent")}
                             </span>
                           </Show>
                         </div>
@@ -484,7 +486,7 @@ const UnifiedPicker: Component<UnifiedPickerProps> = (props) => {
 
           <Show when={mode() === "mention" && fileCount() > 0}>
             <div class="dropdown-section-header">
-              FILES
+              {t("unifiedPicker.sections.files")}
             </div>
             <For each={files()}>
               {(file) => {
@@ -534,8 +536,8 @@ const UnifiedPicker: Component<UnifiedPickerProps> = (props) => {
 
         <div class="dropdown-footer">
           <div>
-            <span class="font-medium">↑↓</span> navigate • <span class="font-medium">Tab/Enter</span> select •{" "}
-            <span class="font-medium">Esc</span> close
+            <span class="font-medium">↑↓</span> {t("unifiedPicker.footer.navigate")} • <span class="font-medium">Tab/Enter</span> {t("unifiedPicker.footer.select")} •{" "}
+            <span class="font-medium">Esc</span> {t("unifiedPicker.footer.close")}
           </div>
         </div>
       </div>

packages/ui/src/components/version-pill.tsx

@@ -1,8 +1,10 @@
 import { Show, createEffect, createSignal } from "solid-js"
 import type { ServerMeta } from "../../../server/src/api-types"
 import { getServerMeta } from "../lib/server-meta"
+import { useI18n } from "../lib/i18n"
 
 export default function VersionPill() {
+  const { t } = useI18n()
   const [meta, setMeta] = createSignal<ServerMeta | null>(null)
 
   createEffect(() => {
@@ -15,11 +17,13 @@ export default function VersionPill() {
   const uiVersion = () => meta()?.ui?.version
   const uiSource = () => meta()?.ui?.source
 
+  const uiLabel = () => (uiVersion() ? t("versionPill.uiWithVersion", { version: uiVersion() }) : t("versionPill.ui"))
+
   return (
     <Show when={serverVersion() || uiVersion() || uiSource()}>
       <div class="text-[11px] text-muted whitespace-nowrap">
         <Show when={serverVersion()}>
-          {(v) => <span>App {v()}</span>}
+          {(v) => <span>{t("versionPill.appWithVersion", { version: v() })}</span>}
         </Show>
         <Show when={uiVersion() || uiSource()}>
           <>
@@ -27,8 +31,8 @@ export default function VersionPill() {
               <span class="mx-2">·</span>
             </Show>
             <span>
-              UI{uiVersion() ? ` ${uiVersion()}` : ""}
-              <Show when={uiSource()}>{(s) => <span class="opacity-70"> ({s()})</span>}</Show>
+              {uiLabel()}
+              <Show when={uiSource()}>{(s) => <span class="opacity-70">{t("versionPill.source", { source: s() })}</span>}</Show>
             </span>
           </>
         </Show>

packages/ui/src/lib/api-client.ts

@@ -8,6 +8,7 @@ import type {
   BinaryUpdateRequest,
   BinaryValidationResult,
   FileSystemEntry,
+  FileSystemCreateFolderResponse,
   FileSystemListResponse,
   InstanceData,
   ServerMeta,
@@ -224,6 +225,13 @@ export const serverApi = {
     const query = params.toString()
     return request<FileSystemListResponse>(query ? `/api/filesystem?${query}` : "/api/filesystem")
   },
+
+  createFileSystemFolder(parentPath: string | undefined, name: string): Promise<FileSystemCreateFolderResponse> {
+    return request<FileSystemCreateFolderResponse>("/api/filesystem/folders", {
+      method: "POST",
+      body: JSON.stringify({ parentPath, name }),
+    })
+  },
   readInstanceData(id: string): Promise<InstanceData> {
     return request<InstanceData>(`/api/storage/instances/${encodeURIComponent(id)}`)
   },

packages/ui/src/lib/command-utils.ts

@@ -3,6 +3,7 @@ import type { Command as SDKCommand } from "@opencode-ai/sdk"
 import { showAlertDialog, showPromptDialog } from "../stores/alerts"
 import { activeSessionId, executeCustomCommand } from "../stores/sessions"
 import { getLogger } from "./logger"
+import { tGlobal } from "./i18n"
 
 const log = getLogger("actions")
 
@@ -17,19 +18,19 @@ export async function promptForCommandArguments(command: SDKCommand): Promise<st
   }
 
   try {
-    return await showPromptDialog(`Arguments for /${command.name}`, {
-      title: "Custom command",
+    return await showPromptDialog(tGlobal("commands.custom.argumentsPrompt.message", { name: command.name }), {
+      title: tGlobal("commands.custom.argumentsPrompt.title"),
       variant: "info",
-      inputLabel: "Arguments",
-      inputPlaceholder: "e.g. foo bar",
+      inputLabel: tGlobal("commands.custom.argumentsPrompt.inputLabel"),
+      inputPlaceholder: tGlobal("commands.custom.argumentsPrompt.inputPlaceholder"),
       inputDefaultValue: "",
-      confirmLabel: "Run",
-      cancelLabel: "Cancel",
+      confirmLabel: tGlobal("commands.custom.argumentsPrompt.confirmLabel"),
+      cancelLabel: tGlobal("commands.custom.argumentsPrompt.cancelLabel"),
     })
   } catch (error) {
     log.error("Failed to prompt for command arguments", error)
-    showAlertDialog("Failed to open arguments prompt.", {
-      title: "Command arguments",
+    showAlertDialog(tGlobal("commands.custom.argumentsPrompt.openFailed.message"), {
+      title: tGlobal("commands.custom.argumentsPrompt.openFailed.title"),
       variant: "error",
     })
     return null
@@ -45,14 +46,14 @@ export function buildCustomCommandEntries(instanceId: string, commands: SDKComma
   return commands.map((cmd) => ({
     id: `custom:${instanceId}:${cmd.name}`,
     label: formatCommandLabel(cmd.name),
-    description: cmd.description ?? "Custom command",
+    description: () => cmd.description ?? tGlobal("commands.custom.entries.descriptionFallback"),
     category: "Custom Commands",
     keywords: [cmd.name, ...(cmd.description ? cmd.description.split(/\s+/).filter(Boolean) : [])],
     action: async () => {
       const sessionId = activeSessionId().get(instanceId)
       if (!sessionId || sessionId === "info") {
-        showAlertDialog("Select a session before running a custom command.", {
-          title: "Session required",
+        showAlertDialog(tGlobal("commands.custom.sessionRequired.message"), {
+          title: tGlobal("commands.custom.sessionRequired.title"),
           variant: "warning",
         })
         return
@@ -65,8 +66,8 @@ export function buildCustomCommandEntries(instanceId: string, commands: SDKComma
         await executeCustomCommand(instanceId, sessionId, cmd.name, args)
       } catch (error) {
         log.error("Failed to run custom command", error)
-        showAlertDialog("Failed to run custom command. Check the console for details.", {
-          title: "Command failed",
+        showAlertDialog(tGlobal("commands.custom.runFailed.message"), {
+          title: tGlobal("commands.custom.runFailed.title"),
           variant: "error",
         })
       }

packages/ui/src/lib/commands.ts

@@ -6,14 +6,20 @@ export interface KeyboardShortcut {
   alt?: boolean
 }
 
+export type Resolvable<T> = T | (() => T)
+
+export function resolveResolvable<T>(value: Resolvable<T>): T {
+  return typeof value === "function" ? (value as () => T)() : value
+}
+
 export interface Command {
   id: string
-  label: string | (() => string)
-  description: string
-  keywords?: string[]
+  label: Resolvable<string>
+  description: Resolvable<string>
+  keywords?: Resolvable<string[]>
   shortcut?: KeyboardShortcut
   action: () => void | Promise<void>
-  category?: string
+  category?: Resolvable<string>
 }
 
 export function createCommandRegistry() {
@@ -47,11 +53,15 @@ export function createCommandRegistry() {
 
     const lowerQuery = query.toLowerCase()
     return getAll().filter((cmd) => {
-      const label = typeof cmd.label === "function" ? cmd.label() : cmd.label
+      const label = resolveResolvable(cmd.label)
+      const description = resolveResolvable(cmd.description)
+      const keywords = cmd.keywords ? resolveResolvable(cmd.keywords) : undefined
+      const category = cmd.category ? resolveResolvable(cmd.category) : undefined
       const labelMatch = label.toLowerCase().includes(lowerQuery)
-      const descMatch = cmd.description.toLowerCase().includes(lowerQuery)
-      const keywordMatch = cmd.keywords?.some((k) => k.toLowerCase().includes(lowerQuery))
-      return labelMatch || descMatch || keywordMatch
+      const descMatch = description.toLowerCase().includes(lowerQuery)
+      const keywordMatch = keywords?.some((k) => k.toLowerCase().includes(lowerQuery))
+      const categoryMatch = category?.toLowerCase().includes(lowerQuery)
+      return labelMatch || descMatch || keywordMatch || categoryMatch
     })
   }
 

packages/ui/src/lib/formatters.ts

@@ -10,3 +10,20 @@ export function formatTokenTotal(value: number): string {
   }
   return value.toLocaleString()
 }
+
+export function formatCompactCount(value: number): string {
+  if (value >= 1_000_000_000) {
+    return `${(value / 1_000_000_000).toFixed(1)}B`
+  }
+  if (value >= 1_000_000) {
+    return `${(value / 1_000_000).toFixed(1)}M`
+  }
+  if (value >= 10_000) {
+    return `${Math.round(value / 1_000)}K`
+  }
+  if (value >= 1_000) {
+    const label = `${(value / 1_000).toFixed(1)}K`
+    return label.replace(/\.0K$/, "K")
+  }
+  return value.toLocaleString()
+}

packages/ui/src/lib/hooks/use-app-lifecycle.ts

@@ -69,6 +69,11 @@ export function useAppLifecycle(options: UseAppLifecycleOptions) {
         if (!instance) return
         emitSessionSidebarRequest({ instanceId: instance.id, action: "focus-agent-selector" })
       },
+      () => {
+        const instance = options.getActiveInstance()
+        if (!instance) return
+        emitSessionSidebarRequest({ instanceId: instance.id, action: "focus-variant-selector" })
+      },
     )
 
     registerEscapeShortcut(

packages/ui/src/lib/hooks/use-commands.ts

@@ -13,9 +13,17 @@ import { cleanupBlankSessions } from "../../stores/session-state"
 import { getLogger } from "../logger"
 import { requestData } from "../opencode-api"
 import { emitSessionSidebarRequest } from "../session-sidebar-events"
+import { tGlobal } from "../i18n"
 
 const log = getLogger("actions")
 
+function splitKeywords(key: string): string[] {
+  return tGlobal(key)
+    .split(",")
+    .map((value) => value.trim())
+    .filter(Boolean)
+}
+
 
 export interface UseCommandsOptions {
   preferences: Accessor<Preferences>
@@ -61,20 +69,20 @@ export function useCommands(options: UseCommandsOptions) {
 
     commandRegistry.register({
       id: "new-instance",
-      label: "New Instance",
-      description: "Open folder picker to create new instance",
+      label: () => tGlobal("commands.newInstance.label"),
+      description: () => tGlobal("commands.newInstance.description"),
       category: "Instance",
-      keywords: ["folder", "project", "workspace"],
+      keywords: () => splitKeywords("commands.newInstance.keywords"),
       shortcut: { key: "N", meta: true },
       action: options.handleNewInstanceRequest,
     })
 
     commandRegistry.register({
       id: "close-instance",
-      label: "Close Instance",
-      description: "Stop current instance's server",
+      label: () => tGlobal("commands.closeInstance.label"),
+      description: () => tGlobal("commands.closeInstance.description"),
       category: "Instance",
-      keywords: ["stop", "quit", "close"],
+      keywords: () => splitKeywords("commands.closeInstance.keywords"),
       shortcut: { key: "W", meta: true },
       action: async () => {
         const instance = activeInstance()
@@ -85,10 +93,10 @@ export function useCommands(options: UseCommandsOptions) {
 
     commandRegistry.register({
       id: "instance-next",
-      label: "Next Instance",
-      description: "Cycle to next instance tab",
+      label: () => tGlobal("commands.nextInstance.label"),
+      description: () => tGlobal("commands.nextInstance.description"),
       category: "Instance",
-      keywords: ["switch", "navigate"],
+      keywords: () => splitKeywords("commands.nextInstance.keywords"),
       shortcut: { key: "]", meta: true },
       action: () => {
         const ids = Array.from(instances().keys())
@@ -101,10 +109,10 @@ export function useCommands(options: UseCommandsOptions) {
 
     commandRegistry.register({
       id: "instance-prev",
-      label: "Previous Instance",
-      description: "Cycle to previous instance tab",
+      label: () => tGlobal("commands.previousInstance.label"),
+      description: () => tGlobal("commands.previousInstance.description"),
       category: "Instance",
-      keywords: ["switch", "navigate"],
+      keywords: () => splitKeywords("commands.previousInstance.keywords"),
       shortcut: { key: "[", meta: true },
       action: () => {
         const ids = Array.from(instances().keys())
@@ -117,10 +125,10 @@ export function useCommands(options: UseCommandsOptions) {
 
     commandRegistry.register({
       id: "new-session",
-      label: "New Session",
-      description: "Create a new parent session",
+      label: () => tGlobal("commands.newSession.label"),
+      description: () => tGlobal("commands.newSession.description"),
       category: "Session",
-      keywords: ["create", "start"],
+      keywords: () => splitKeywords("commands.newSession.keywords"),
       shortcut: { key: "N", meta: true, shift: true },
       action: async () => {
         const instance = activeInstance()
@@ -131,10 +139,10 @@ export function useCommands(options: UseCommandsOptions) {
 
     commandRegistry.register({
       id: "close-session",
-      label: "Close Session",
-      description: "Close current parent session",
+      label: () => tGlobal("commands.closeSession.label"),
+      description: () => tGlobal("commands.closeSession.description"),
       category: "Session",
-      keywords: ["close", "stop"],
+      keywords: () => splitKeywords("commands.closeSession.keywords"),
       shortcut: { key: "W", meta: true, shift: true },
       action: async () => {
         const instance = activeInstance()
@@ -146,10 +154,10 @@ export function useCommands(options: UseCommandsOptions) {
 
     commandRegistry.register({
       id: "cleanup-blank-sessions",
-      label: "Scrub Sessions",
-      description: "Remove empty sessions, subagent sessions that have completed their primary task, and extraneous forked sessions.",
+      label: () => tGlobal("commands.scrubSessions.label"),
+      description: () => tGlobal("commands.scrubSessions.description"),
       category: "Session",
-      keywords: ["cleanup", "blank", "empty", "sessions", "remove", "delete",  "scrub"],
+      keywords: () => splitKeywords("commands.scrubSessions.keywords"),
       action: async () => {
         const instance = activeInstance()
         if (!instance) return
@@ -159,10 +167,10 @@ export function useCommands(options: UseCommandsOptions) {
 
     commandRegistry.register({
       id: "switch-to-info",
-      label: "Instance Info",
-      description: "Open the instance overview for logs and status",
+      label: () => tGlobal("commands.instanceInfo.label"),
+      description: () => tGlobal("commands.instanceInfo.description"),
       category: "Instance",
-      keywords: ["info", "logs", "console", "output"],
+      keywords: () => splitKeywords("commands.instanceInfo.keywords"),
       shortcut: { key: "L", meta: true, shift: true },
       action: () => {
         const instance = activeInstance()
@@ -172,10 +180,10 @@ export function useCommands(options: UseCommandsOptions) {
 
     commandRegistry.register({
       id: "session-next",
-      label: "Next Session",
-      description: "Cycle to next session tab",
+      label: () => tGlobal("commands.nextSession.label"),
+      description: () => tGlobal("commands.nextSession.description"),
       category: "Session",
-      keywords: ["switch", "navigate"],
+      keywords: () => splitKeywords("commands.nextSession.keywords"),
       shortcut: { key: "]", meta: true, shift: true },
       action: () => {
         const instanceId = activeInstanceId()
@@ -197,10 +205,10 @@ export function useCommands(options: UseCommandsOptions) {
 
     commandRegistry.register({
       id: "session-prev",
-      label: "Previous Session",
-      description: "Cycle to previous session tab",
+      label: () => tGlobal("commands.previousSession.label"),
+      description: () => tGlobal("commands.previousSession.description"),
       category: "Session",
-      keywords: ["switch", "navigate"],
+      keywords: () => splitKeywords("commands.previousSession.keywords"),
       shortcut: { key: "[", meta: true, shift: true },
       action: () => {
         const instanceId = activeInstanceId()
@@ -223,10 +231,10 @@ export function useCommands(options: UseCommandsOptions) {
 
     commandRegistry.register({
       id: "compact",
-      label: "Compact Session",
-      description: "Summarize and compact the current session",
+      label: () => tGlobal("commands.compactSession.label"),
+      description: () => tGlobal("commands.compactSession.description"),
       category: "Session",
-      keywords: ["/compact", "summarize", "compress"],
+      keywords: () => ["/compact", ...splitKeywords("commands.compactSession.keywords")],
       action: async () => {
         const instance = activeInstance()
         const sessionId = activeSessionIdForInstance()
@@ -247,9 +255,9 @@ export function useCommands(options: UseCommandsOptions) {
           )
         } catch (error) {
           log.error("Failed to compact session", error)
-          const message = error instanceof Error ? error.message : "Failed to compact session"
-          showAlertDialog(`Compact failed: ${message}`, {
-            title: "Compact failed",
+          const message = error instanceof Error ? error.message : tGlobal("commands.compactSession.errorFallback")
+          showAlertDialog(tGlobal("commands.compactSession.alert.message", { message }), {
+            title: tGlobal("commands.compactSession.alert.title"),
             variant: "error",
           })
         }
@@ -275,10 +283,10 @@ export function useCommands(options: UseCommandsOptions) {
 
     commandRegistry.register({
       id: "undo",
-      label: "Undo Last Message",
-      description: "Revert the last message",
+      label: () => tGlobal("commands.undoLastMessage.label"),
+      description: () => tGlobal("commands.undoLastMessage.description"),
       category: "Session",
-      keywords: ["/undo", "revert", "undo"],
+      keywords: () => ["/undo", ...splitKeywords("commands.undoLastMessage.keywords")],
       action: async () => {
         const instance = activeInstance()
         const sessionId = activeSessionIdForInstance()
@@ -320,8 +328,8 @@ export function useCommands(options: UseCommandsOptions) {
         }
 
         if (!messageID) {
-          showAlertDialog("Nothing to undo", {
-            title: "No actions to undo",
+          showAlertDialog(tGlobal("commands.undoLastMessage.none.message"), {
+            title: tGlobal("commands.undoLastMessage.none.title"),
             variant: "info",
           })
           return
@@ -351,8 +359,8 @@ export function useCommands(options: UseCommandsOptions) {
           }
         } catch (error) {
           log.error("Failed to revert message", error)
-          showAlertDialog("Failed to revert message", {
-            title: "Undo failed",
+          showAlertDialog(tGlobal("commands.undoLastMessage.failed.message"), {
+            title: tGlobal("commands.undoLastMessage.failed.title"),
             variant: "error",
           })
         }
@@ -362,10 +370,10 @@ export function useCommands(options: UseCommandsOptions) {
 
     commandRegistry.register({
       id: "open-model-selector",
-      label: "Open Model Selector",
-      description: "Choose a different model",
+      label: () => tGlobal("commands.openModelSelector.label"),
+      description: () => tGlobal("commands.openModelSelector.description"),
       category: "Agent & Model",
-      keywords: ["model", "llm", "ai"],
+      keywords: () => splitKeywords("commands.openModelSelector.keywords"),
       shortcut: { key: "M", meta: true, shift: true },
       action: () => {
         const instance = activeInstance()
@@ -375,11 +383,25 @@ export function useCommands(options: UseCommandsOptions) {
     })
 
     commandRegistry.register({
-      id: "open-agent-selector",
-      label: "Open Agent Selector",
-      description: "Choose a different agent",
+      id: "open-variant-selector",
+      label: () => tGlobal("commands.selectModelVariant.label"),
+      description: () => tGlobal("commands.selectModelVariant.description"),
       category: "Agent & Model",
-      keywords: ["agent", "mode"],
+      keywords: () => splitKeywords("commands.selectModelVariant.keywords"),
+      shortcut: { key: "T", meta: true, shift: true },
+      action: () => {
+        const instance = activeInstance()
+        if (!instance) return
+        emitSessionSidebarRequest({ instanceId: instance.id, action: "focus-variant-selector" })
+      },
+    })
+
+    commandRegistry.register({
+      id: "open-agent-selector",
+      label: () => tGlobal("commands.openAgentSelector.label"),
+      description: () => tGlobal("commands.openAgentSelector.description"),
+      category: "Agent & Model",
+      keywords: () => splitKeywords("commands.openAgentSelector.keywords"),
       shortcut: { key: "A", meta: true, shift: true },
       action: () => {
         const instance = activeInstance()
@@ -390,10 +412,10 @@ export function useCommands(options: UseCommandsOptions) {
 
     commandRegistry.register({
       id: "clear-input",
-      label: "Clear Input",
-      description: "Clear the prompt textarea",
+      label: () => tGlobal("commands.clearInput.label"),
+      description: () => tGlobal("commands.clearInput.description"),
       category: "Input & Focus",
-      keywords: ["clear", "reset"],
+      keywords: () => splitKeywords("commands.clearInput.keywords"),
       shortcut: { key: "K", meta: true },
       action: () => {
         const textarea = findVisiblePromptTextarea()
@@ -403,19 +425,19 @@ export function useCommands(options: UseCommandsOptions) {
 
     commandRegistry.register({
       id: "thinking",
-      label: () => `${options.preferences().showThinkingBlocks ? "Hide" : "Show"} Thinking Blocks`,
-      description: "Show/hide AI thinking process",
+      label: () => tGlobal(options.preferences().showThinkingBlocks ? "commands.thinkingBlocks.label.hide" : "commands.thinkingBlocks.label.show"),
+      description: () => tGlobal("commands.thinkingBlocks.description"),
       category: "System",
-      keywords: ["/thinking", "thinking", "reasoning", "toggle", "show", "hide"],
+      keywords: () => ["/thinking", ...splitKeywords("commands.thinkingBlocks.keywords")],
       action: options.toggleShowThinkingBlocks,
     })
 
     commandRegistry.register({
       id: "timeline-tools",
-      label: () => `${options.preferences().showTimelineTools ? "Hide" : "Show"} Timeline Tool Calls`,
-      description: "Toggle tool call entries in the message timeline",
+      label: () => tGlobal(options.preferences().showTimelineTools ? "commands.timelineToolCalls.label.hide" : "commands.timelineToolCalls.label.show"),
+      description: () => tGlobal("commands.timelineToolCalls.description"),
       category: "System",
-      keywords: ["timeline", "tool", "toggle"],
+      keywords: () => splitKeywords("commands.timelineToolCalls.keywords"),
       action: options.toggleShowTimelineTools,
     })
 
@@ -423,11 +445,12 @@ export function useCommands(options: UseCommandsOptions) {
       id: "thinking-default-visibility",
       label: () => {
         const mode = options.preferences().thinkingBlocksExpansion ?? "expanded"
-        return `Thinking Blocks Default · ${mode === "expanded" ? "Expanded" : "Collapsed"}`
+        const state = mode === "expanded" ? tGlobal("commands.common.expanded") : tGlobal("commands.common.collapsed")
+        return tGlobal("commands.thinkingBlocksDefault.label", { state })
       },
-      description: "Toggle whether thinking blocks start expanded",
+      description: () => tGlobal("commands.thinkingBlocksDefault.description"),
       category: "System",
-      keywords: ["/thinking", "thinking", "reasoning", "expand", "collapse", "default"],
+      keywords: () => ["/thinking", ...splitKeywords("commands.thinkingBlocksDefault.keywords")],
       action: () => {
         const mode = options.preferences().thinkingBlocksExpansion ?? "expanded"
         const next: ExpansionPreference = mode === "expanded" ? "collapsed" : "expanded"
@@ -437,19 +460,25 @@ export function useCommands(options: UseCommandsOptions) {
 
     commandRegistry.register({
       id: "diff-view-split",
-      label: () => `${(options.preferences().diffViewMode || "split") === "split" ? "✓ " : ""}Use Split Diff View`,
-      description: "Display tool-call diffs side-by-side",
+      label: () => {
+        const prefix = (options.preferences().diffViewMode || "split") === "split" ? "✓ " : ""
+        return `${prefix}${tGlobal("commands.diffViewSplit.label")}`
+      },
+      description: () => tGlobal("commands.diffViewSplit.description"),
       category: "System",
-      keywords: ["diff", "split", "view"],
+      keywords: () => splitKeywords("commands.diffViewSplit.keywords"),
       action: () => options.setDiffViewMode("split"),
     })
 
     commandRegistry.register({
       id: "diff-view-unified",
-      label: () => `${(options.preferences().diffViewMode || "split") === "unified" ? "✓ " : ""}Use Unified Diff View`,
-      description: "Display tool-call diffs inline",
+      label: () => {
+        const prefix = (options.preferences().diffViewMode || "split") === "unified" ? "✓ " : ""
+        return `${prefix}${tGlobal("commands.diffViewUnified.label")}`
+      },
+      description: () => tGlobal("commands.diffViewUnified.description"),
       category: "System",
-      keywords: ["diff", "unified", "view"],
+      keywords: () => splitKeywords("commands.diffViewUnified.keywords"),
       action: () => options.setDiffViewMode("unified"),
     })
 
@@ -457,11 +486,12 @@ export function useCommands(options: UseCommandsOptions) {
       id: "tool-output-default-visibility",
       label: () => {
         const mode = options.preferences().toolOutputExpansion || "expanded"
-        return `Tool Outputs Default · ${mode === "expanded" ? "Expanded" : "Collapsed"}`
+        const state = mode === "expanded" ? tGlobal("commands.common.expanded") : tGlobal("commands.common.collapsed")
+        return tGlobal("commands.toolOutputsDefault.label", { state })
       },
-      description: "Toggle default expansion for tool outputs",
+      description: () => tGlobal("commands.toolOutputsDefault.description"),
       category: "System",
-      keywords: ["tool", "output", "expand", "collapse"],
+      keywords: () => splitKeywords("commands.toolOutputsDefault.keywords"),
       action: () => {
         const mode = options.preferences().toolOutputExpansion || "expanded"
         const next: ExpansionPreference = mode === "expanded" ? "collapsed" : "expanded"
@@ -473,11 +503,12 @@ export function useCommands(options: UseCommandsOptions) {
       id: "diagnostics-default-visibility",
       label: () => {
         const mode = options.preferences().diagnosticsExpansion || "expanded"
-        return `Diagnostics Default · ${mode === "expanded" ? "Expanded" : "Collapsed"}`
+        const state = mode === "expanded" ? tGlobal("commands.common.expanded") : tGlobal("commands.common.collapsed")
+        return tGlobal("commands.diagnosticsDefault.label", { state })
       },
-      description: "Toggle default expansion for diagnostics output",
+      description: () => tGlobal("commands.diagnosticsDefault.description"),
       category: "System",
-      keywords: ["diagnostics", "expand", "collapse"],
+      keywords: () => splitKeywords("commands.diagnosticsDefault.keywords"),
       action: () => {
         const mode = options.preferences().diagnosticsExpansion || "expanded"
         const next: ExpansionPreference = mode === "expanded" ? "collapsed" : "expanded"
@@ -489,11 +520,12 @@ export function useCommands(options: UseCommandsOptions) {
       id: "token-usage-visibility",
       label: () => {
         const visible = options.preferences().showUsageMetrics ?? true
-        return `Token Usage Display · ${visible ? "Visible" : "Hidden"}`
+        const state = visible ? tGlobal("commands.common.visible") : tGlobal("commands.common.hidden")
+        return tGlobal("commands.tokenUsageDisplay.label", { state })
       },
-      description: "Show or hide token and cost stats for assistant messages",
+      description: () => tGlobal("commands.tokenUsageDisplay.description"),
       category: "System",
-      keywords: ["token", "usage", "cost", "stats"],
+      keywords: () => splitKeywords("commands.tokenUsageDisplay.keywords"),
       action: options.toggleUsageMetrics,
     })
 
@@ -501,21 +533,21 @@ export function useCommands(options: UseCommandsOptions) {
       id: "auto-cleanup-blank-sessions",
       label: () => {
         const enabled = options.preferences().autoCleanupBlankSessions
-        return `Auto-Cleanup Blank Sessions · ${enabled ? "Enabled" : "Disabled"}`
+        const state = enabled ? tGlobal("commands.common.enabled") : tGlobal("commands.common.disabled")
+        return tGlobal("commands.autoCleanupBlankSessions.label", { state })
       },
-      description: "Automatically clean up blank sessions when creating new ones",
+      description: () => tGlobal("commands.autoCleanupBlankSessions.description"),
       category: "System",
-      keywords: ["auto", "cleanup", "blank", "sessions", "toggle"],
+      keywords: () => splitKeywords("commands.autoCleanupBlankSessions.keywords"),
       action: options.toggleAutoCleanupBlankSessions,
     })
  
     commandRegistry.register({
       id: "help",
-      label: "Show Help",
-
-      description: "Display keyboard shortcuts and help",
+      label: () => tGlobal("commands.showHelp.label"),
+      description: () => tGlobal("commands.showHelp.description"),
       category: "System",
-      keywords: ["/help", "shortcuts", "help"],
+      keywords: () => ["/help", ...splitKeywords("commands.showHelp.keywords")],
       action: () => {
         log.info("Show help modal (not implemented)")
       },

packages/ui/src/lib/i18n/index.tsx

@@ -0,0 +1,148 @@
+import { createContext, createEffect, createMemo, createSignal, onCleanup, onMount, useContext } from "solid-js"
+import type { ParentComponent } from "solid-js"
+import { useConfig } from "../../stores/preferences"
+import { enMessages } from "./messages/en"
+import { esMessages } from "./messages/es"
+import { frMessages } from "./messages/fr"
+import { ruMessages } from "./messages/ru"
+import { jaMessages } from "./messages/ja"
+import { zhHansMessages } from "./messages/zh-Hans"
+
+type Messages = Record<string, string>
+
+export type TranslateParams = Record<string, unknown>
+
+export type Locale = "en" | "es" | "fr" | "ru" | "ja" | "zh-Hans"
+
+const SUPPORTED_LOCALES: readonly Locale[] = ["en", "es", "fr", "ru", "ja", "zh-Hans"] as const
+
+const messagesByLocale: Record<Locale, Messages> = {
+  en: enMessages,
+  es: esMessages,
+  fr: frMessages,
+  ru: ruMessages,
+  ja: jaMessages,
+  "zh-Hans": zhHansMessages,
+}
+
+function normalizeLocaleTag(value: string): string {
+  return value.trim().replace(/_/g, "-")
+}
+
+function matchSupportedLocale(value: string | undefined): Locale | null {
+  if (!value) return null
+
+  const normalized = normalizeLocaleTag(value)
+  const lower = normalized.toLowerCase()
+  const supportedLower = new Map(SUPPORTED_LOCALES.map((locale) => [locale.toLowerCase(), locale]))
+  const exact = supportedLower.get(lower)
+  if (exact) return exact
+
+  const parts = lower.split("-")
+  const base = parts[0]
+  if (!base) return null
+
+  if (base === "zh") {
+    const zhHans = supportedLower.get("zh-hans")
+    return zhHans ?? null
+  }
+
+  const baseMatch = supportedLower.get(base)
+  return baseMatch ?? null
+}
+
+function detectNavigatorLocale(): Locale | null {
+  if (typeof navigator === "undefined") return null
+
+  const candidates = Array.isArray(navigator.languages) && navigator.languages.length > 0
+    ? navigator.languages
+    : navigator.language
+      ? [navigator.language]
+      : []
+
+  for (const candidate of candidates) {
+    const match = matchSupportedLocale(candidate)
+    if (match) return match
+  }
+
+  return null
+}
+
+function interpolate(template: string, params?: Record<string, unknown>): string {
+  if (!params) return template
+  return template.replace(/\{(\w+)\}/g, (_match, key: string) => {
+    const value = params[key]
+    return value === undefined || value === null ? "" : String(value)
+  })
+}
+
+function translateFrom(messages: Messages, key: string, params?: TranslateParams): string {
+  const current = messages[key]
+  const fallback = enMessages[key as keyof typeof enMessages]
+  const template = current ?? fallback ?? key
+  return interpolate(template, params)
+}
+
+const [globalRevision, setGlobalRevision] = createSignal(0)
+const initialGlobalLocale: Locale = detectNavigatorLocale() ?? "en"
+let globalMessages: Messages = messagesByLocale[initialGlobalLocale]
+
+export function tGlobal(key: string, params?: TranslateParams): string {
+  globalRevision()
+  return translateFrom(globalMessages, key, params)
+}
+
+export interface I18nContextValue {
+  locale: () => Locale
+  t: (key: string, params?: TranslateParams) => string
+}
+
+const I18nContext = createContext<I18nContextValue>()
+
+export const I18nProvider: ParentComponent = (props) => {
+  const { preferences } = useConfig()
+  const [detectedLocale, setDetectedLocale] = createSignal<Locale>("en")
+
+  const previousMessages = globalMessages
+
+  onMount(() => {
+    const detected = detectNavigatorLocale()
+    if (detected) setDetectedLocale(detected)
+  })
+
+  const locale = createMemo<Locale>(() => {
+    const configured = matchSupportedLocale(preferences().locale)
+    return configured ?? detectedLocale() ?? "en"
+  })
+
+  const messages = createMemo<Messages>(() => messagesByLocale[locale()])
+
+  function t(key: string, params?: TranslateParams): string {
+    return translateFrom(messages(), key, params)
+  }
+
+  createEffect(() => {
+    globalMessages = messages()
+    setGlobalRevision((value) => value + 1)
+  })
+
+  onCleanup(() => {
+    globalMessages = previousMessages
+    setGlobalRevision((value) => value + 1)
+  })
+
+  const value: I18nContextValue = {
+    locale,
+    t,
+  }
+
+  return <I18nContext.Provider value={value}>{props.children}</I18nContext.Provider>
+}
+
+export function useI18n(): I18nContextValue {
+  const context = useContext(I18nContext)
+  if (!context) {
+    throw new Error("useI18n must be used within I18nProvider")
+  }
+  return context
+}

packages/ui/src/lib/i18n/messages/en/advancedSettings.ts

@@ -0,0 +1,6 @@
+export const advancedSettingsMessages = {
+  "advancedSettings.title": "Advanced Settings",
+  "advancedSettings.environmentVariables.title": "Environment Variables",
+  "advancedSettings.environmentVariables.subtitle": "Applied whenever a new OpenCode instance starts",
+  "advancedSettings.actions.close": "Close",
+} as const

packages/ui/src/lib/i18n/messages/en/app.ts

@@ -0,0 +1,32 @@
+export const appMessages = {
+  "app.launchError.title": "Unable to launch OpenCode",
+  "app.launchError.description": "We couldn't start the selected OpenCode binary. Review the error output below or choose a different binary from Advanced Settings.",
+  "app.launchError.binaryPathLabel": "Binary path",
+  "app.launchError.errorOutputLabel": "Error output",
+  "app.launchError.openAdvancedSettings": "Open Advanced Settings",
+  "app.launchError.close": "Close",
+  "app.launchError.closeTitle": "Close (Esc)",
+  "app.launchError.fallbackMessage": "Failed to launch workspace",
+
+  "app.stopInstance.confirmMessage": "Stop OpenCode instance? This will stop the server.",
+  "app.stopInstance.title": "Stop instance",
+  "app.stopInstance.confirmLabel": "Stop",
+  "app.stopInstance.cancelLabel": "Keep running",
+
+  "emptyState.logoAlt": "CodeNomad logo",
+  "emptyState.brandTitle": "CodeNomad",
+  "emptyState.tagline": "Select a folder to start coding with AI",
+  "emptyState.actions.selectFolder": "Select Folder",
+  "emptyState.actions.selecting": "Selecting...",
+  "emptyState.keyboardShortcut": "Keyboard shortcut: {shortcut}",
+  "emptyState.examples": "Examples: {example}",
+  "emptyState.multipleInstances": "You can have multiple instances of the same folder",
+
+  "releases.upgradeRequired.title": "Upgrade required",
+  "releases.upgradeRequired.message.withVersion": "Update to CodeNomad {version} to use the latest UI.",
+  "releases.upgradeRequired.message.noVersion": "Update CodeNomad to use the latest UI.",
+  "releases.upgradeRequired.action.getUpdate": "Get update",
+
+  "releases.uiUpdated.title": "UI updated",
+  "releases.uiUpdated.message": "UI is now updated to {version}.",
+} as const

packages/ui/src/lib/i18n/messages/en/commands.ts

@@ -0,0 +1,160 @@
+export const commandMessages = {
+  "commandPalette.title": "Command Palette",
+  "commandPalette.description": "Search and execute commands",
+  "commandPalette.searchPlaceholder": "Type a command or search...",
+  "commandPalette.empty": "No commands found for \"{query}\"",
+  "commandPalette.category.customCommands": "Custom Commands",
+  "commandPalette.category.instance": "Instance",
+  "commandPalette.category.session": "Session",
+  "commandPalette.category.agentModel": "Agent & Model",
+  "commandPalette.category.inputFocus": "Input & Focus",
+  "commandPalette.category.system": "System",
+  "commandPalette.category.other": "Other",
+
+  "commands.newInstance.label": "New Instance",
+  "commands.newInstance.description": "Open folder picker to create new instance",
+  "commands.newInstance.keywords": "folder, project, workspace",
+
+  "commands.closeInstance.label": "Close Instance",
+  "commands.closeInstance.description": "Stop current instance's server",
+  "commands.closeInstance.keywords": "stop, quit, close",
+
+  "commands.nextInstance.label": "Next Instance",
+  "commands.nextInstance.description": "Cycle to next instance tab",
+  "commands.nextInstance.keywords": "switch, navigate",
+
+  "commands.previousInstance.label": "Previous Instance",
+  "commands.previousInstance.description": "Cycle to previous instance tab",
+  "commands.previousInstance.keywords": "switch, navigate",
+
+  "commands.newSession.label": "New Session",
+  "commands.newSession.description": "Create a new parent session",
+  "commands.newSession.keywords": "create, start",
+
+  "commands.closeSession.label": "Close Session",
+  "commands.closeSession.description": "Close current parent session",
+  "commands.closeSession.keywords": "close, stop",
+
+  "commands.scrubSessions.label": "Scrub Sessions",
+  "commands.scrubSessions.description": "Remove empty sessions, subagent sessions that have completed their primary task, and extraneous forked sessions.",
+  "commands.scrubSessions.keywords": "cleanup, blank, empty, sessions, remove, delete, scrub",
+
+  "commands.instanceInfo.label": "Instance Info",
+  "commands.instanceInfo.description": "Open the instance overview for logs and status",
+  "commands.instanceInfo.keywords": "info, logs, console, output",
+
+  "commands.nextSession.label": "Next Session",
+  "commands.nextSession.description": "Cycle to next session tab",
+  "commands.nextSession.keywords": "switch, navigate",
+
+  "commands.previousSession.label": "Previous Session",
+  "commands.previousSession.description": "Cycle to previous session tab",
+  "commands.previousSession.keywords": "switch, navigate",
+
+  "commands.compactSession.label": "Compact Session",
+  "commands.compactSession.description": "Summarize and compact the current session",
+  "commands.compactSession.keywords": "summarize, compress",
+  "commands.compactSession.errorFallback": "Failed to compact session",
+  "commands.compactSession.alert.title": "Compact failed",
+  "commands.compactSession.alert.message": "Compact failed: {message}",
+
+  "commands.undoLastMessage.label": "Undo Last Message",
+  "commands.undoLastMessage.description": "Revert the last message",
+  "commands.undoLastMessage.keywords": "revert, undo",
+  "commands.undoLastMessage.none.title": "No actions to undo",
+  "commands.undoLastMessage.none.message": "Nothing to undo",
+  "commands.undoLastMessage.failed.title": "Undo failed",
+  "commands.undoLastMessage.failed.message": "Failed to revert message",
+
+  "commands.openModelSelector.label": "Open Model Selector",
+  "commands.openModelSelector.description": "Choose a different model",
+  "commands.openModelSelector.keywords": "model, llm, ai",
+
+  "commands.selectModelVariant.label": "Select Model Variant",
+  "commands.selectModelVariant.description": "Choose a thinking effort for the current model",
+  "commands.selectModelVariant.keywords": "variant, thinking, reasoning, effort",
+
+  "commands.openAgentSelector.label": "Open Agent Selector",
+  "commands.openAgentSelector.description": "Choose a different agent",
+  "commands.openAgentSelector.keywords": "agent, mode",
+
+  "commands.clearInput.label": "Clear Input",
+  "commands.clearInput.description": "Clear the prompt textarea",
+  "commands.clearInput.keywords": "clear, reset",
+
+  "commands.thinkingBlocks.label.show": "Show Thinking Blocks",
+  "commands.thinkingBlocks.label.hide": "Hide Thinking Blocks",
+  "commands.thinkingBlocks.description": "Show/hide AI thinking process",
+  "commands.thinkingBlocks.keywords": "thinking, reasoning, toggle, show, hide",
+
+  "commands.timelineToolCalls.label.show": "Show Timeline Tool Calls",
+  "commands.timelineToolCalls.label.hide": "Hide Timeline Tool Calls",
+  "commands.timelineToolCalls.description": "Toggle tool call entries in the message timeline",
+  "commands.timelineToolCalls.keywords": "timeline, tool, toggle",
+
+  "commands.common.expanded": "Expanded",
+  "commands.common.collapsed": "Collapsed",
+  "commands.common.visible": "Visible",
+  "commands.common.hidden": "Hidden",
+  "commands.common.enabled": "Enabled",
+  "commands.common.disabled": "Disabled",
+
+  "commands.thinkingBlocksDefault.label": "Thinking Blocks Default · {state}",
+  "commands.thinkingBlocksDefault.description": "Toggle whether thinking blocks start expanded",
+  "commands.thinkingBlocksDefault.keywords": "thinking, reasoning, expand, collapse, default",
+
+  "commands.diffViewSplit.label": "Use Split Diff View",
+  "commands.diffViewSplit.description": "Display tool-call diffs side-by-side",
+  "commands.diffViewSplit.keywords": "diff, split, view",
+
+  "commands.diffViewUnified.label": "Use Unified Diff View",
+  "commands.diffViewUnified.description": "Display tool-call diffs inline",
+  "commands.diffViewUnified.keywords": "diff, unified, view",
+
+  "commands.toolOutputsDefault.label": "Tool Outputs Default · {state}",
+  "commands.toolOutputsDefault.description": "Toggle default expansion for tool outputs",
+  "commands.toolOutputsDefault.keywords": "tool, output, expand, collapse",
+
+  "commands.diagnosticsDefault.label": "Diagnostics Default · {state}",
+  "commands.diagnosticsDefault.description": "Toggle default expansion for diagnostics output",
+  "commands.diagnosticsDefault.keywords": "diagnostics, expand, collapse",
+
+  "commands.tokenUsageDisplay.label": "Token Usage Display · {state}",
+  "commands.tokenUsageDisplay.description": "Show or hide token and cost stats for assistant messages",
+  "commands.tokenUsageDisplay.keywords": "token, usage, cost, stats",
+
+  "commands.autoCleanupBlankSessions.label": "Auto-Cleanup Blank Sessions · {state}",
+  "commands.autoCleanupBlankSessions.description": "Automatically clean up blank sessions when creating new ones",
+  "commands.autoCleanupBlankSessions.keywords": "auto, cleanup, blank, sessions, toggle",
+
+  "commands.showHelp.label": "Show Help",
+  "commands.showHelp.description": "Display keyboard shortcuts and help",
+  "commands.showHelp.keywords": "shortcuts, help",
+
+  "commands.custom.argumentsPrompt.message": "Arguments for /{name}",
+  "commands.custom.argumentsPrompt.title": "Custom command",
+  "commands.custom.argumentsPrompt.inputLabel": "Arguments",
+  "commands.custom.argumentsPrompt.inputPlaceholder": "e.g. foo bar",
+  "commands.custom.argumentsPrompt.confirmLabel": "Run",
+  "commands.custom.argumentsPrompt.cancelLabel": "Cancel",
+  "commands.custom.argumentsPrompt.openFailed.message": "Failed to open arguments prompt.",
+  "commands.custom.argumentsPrompt.openFailed.title": "Command arguments",
+  "commands.custom.entries.descriptionFallback": "Custom command",
+  "commands.custom.sessionRequired.message": "Select a session before running a custom command.",
+  "commands.custom.sessionRequired.title": "Session required",
+  "commands.custom.runFailed.message": "Failed to run custom command. Check the console for details.",
+  "commands.custom.runFailed.title": "Command failed",
+
+  "unifiedPicker.loading.searching": "Searching...",
+  "unifiedPicker.loading.loadingWorkspace": "Loading workspace...",
+  "unifiedPicker.title.command": "Select Command",
+  "unifiedPicker.title.mention": "Select Agent or File",
+  "unifiedPicker.empty": "No results found",
+  "unifiedPicker.sections.commands": "COMMANDS",
+  "unifiedPicker.sections.agents": "AGENTS",
+  "unifiedPicker.sections.files": "FILES",
+  "unifiedPicker.badge.subagent": "subagent",
+  "unifiedPicker.footer.navigate": "navigate",
+  "unifiedPicker.footer.select": "select",
+  "unifiedPicker.footer.close": "close",
+} as const

packages/ui/src/lib/i18n/messages/en/dialogs.ts

@@ -0,0 +1,16 @@
+export const dialogMessages = {
+  "alertDialog.fallbackTitle.info": "Heads up",
+  "alertDialog.fallbackTitle.warning": "Please review",
+  "alertDialog.fallbackTitle.error": "Something went wrong",
+  "alertDialog.actions.confirm": "Confirm",
+  "alertDialog.actions.run": "Run",
+  "alertDialog.actions.ok": "OK",
+  "alertDialog.actions.cancel": "Cancel",
+  "alertDialog.prompt.inputLabel": "Input",
+
+  "backgroundProcessOutputDialog.title": "Background Output",
+  "backgroundProcessOutputDialog.actions.close": "Close",
+  "backgroundProcessOutputDialog.loading": "Loading output...",
+  "backgroundProcessOutputDialog.truncatedNotice": "Output truncated for display.",
+  "backgroundProcessOutputDialog.loadErrorFallback": "Failed to load output.",
+} as const

packages/ui/src/lib/i18n/messages/en/filesystem.ts

@@ -0,0 +1,43 @@
+export const filesystemMessages = {
+  "directoryBrowser.defaultDescription": "Browse folders under the configured workspace root.",
+  "directoryBrowser.close": "Close",
+  "directoryBrowser.currentFolder": "Current folder",
+  "directoryBrowser.selectCurrent": "Select Current",
+  "directoryBrowser.newFolder": "New Folder",
+  "directoryBrowser.creating": "Creating…",
+  "directoryBrowser.loadingFolders": "Loading folders…",
+  "directoryBrowser.noFolders": "No folders available.",
+  "directoryBrowser.upOneLevel": "Up one level",
+  "directoryBrowser.select": "Select",
+  "directoryBrowser.load.errorFallback": "Unable to load filesystem",
+  "directoryBrowser.createFolder.promptMessage": "Create a new folder in the current directory.",
+  "directoryBrowser.createFolder.title": "New Folder",
+  "directoryBrowser.createFolder.inputLabel": "Folder name",
+  "directoryBrowser.createFolder.inputPlaceholder": "e.g. my-new-project",
+  "directoryBrowser.createFolder.confirmLabel": "Create",
+  "directoryBrowser.createFolder.cancelLabel": "Cancel",
+  "directoryBrowser.createFolder.invalidNameMessage": "Please enter a single folder name.",
+  "directoryBrowser.createFolder.invalidNameDetail": "Folder names cannot include slashes, '..', or '~'.",
+  "directoryBrowser.createFolder.errorFallback": "Unable to create folder",
+
+  "filesystemBrowser.descriptionFallback": "Search for a path under the configured workspace root.",
+  "filesystemBrowser.rootLabel": "Root: {root}",
+  "filesystemBrowser.actions.close": "Close",
+  "filesystemBrowser.actions.retry": "Retry",
+  "filesystemBrowser.actions.select": "Select",
+  "filesystemBrowser.filterLabel": "Filter",
+  "filesystemBrowser.search.placeholder.directories": "Search for folders",
+  "filesystemBrowser.search.placeholder.files": "Search for files",
+  "filesystemBrowser.currentFolder.label": "Current folder",
+  "filesystemBrowser.currentFolder.selectCurrent": "Select Current",
+  "filesystemBrowser.loading.filesystem": "filesystem",
+  "filesystemBrowser.loading.workspaceRoot": "workspace root",
+  "filesystemBrowser.loading.loadingWithPath": "Loading {path}…",
+  "filesystemBrowser.empty.noEntries": "No entries found.",
+  "filesystemBrowser.navigation.upOneLevel": "Up one level",
+  "filesystemBrowser.hints.navigate": "Navigate",
+  "filesystemBrowser.hints.select": "Select",
+  "filesystemBrowser.hints.close": "Close",
+  "filesystemBrowser.errors.loadFilesystemFallback": "Unable to load filesystem",
+  "filesystemBrowser.errors.openDirectoryFallback": "Unable to open directory",
+} as const

packages/ui/src/lib/i18n/messages/en/folderSelection.ts

@@ -0,0 +1,36 @@
+export const folderSelectionMessages = {
+  "folderSelection.language.ariaLabel": "Language",
+
+  "folderSelection.logoAlt": "CodeNomad logo",
+  "folderSelection.tagline": "Select a folder to start coding with AI",
+
+  "folderSelection.links.github": "CodeNomad GitHub",
+  "folderSelection.links.githubStars": "CodeNomad GitHub Stars",
+  "folderSelection.links.discord": "CodeNomad Discord",
+
+  "folderSelection.empty.title": "No Recent Folders",
+  "folderSelection.empty.description": "Browse for a folder to get started",
+
+  "folderSelection.recent.title": "Recent Folders",
+  "folderSelection.recent.subtitle.one": "{count} folder available",
+  "folderSelection.recent.subtitle.other": "{count} folders available",
+  "folderSelection.recent.remove": "Remove from recent",
+
+  "folderSelection.browse.title": "Browse for Folder",
+  "folderSelection.browse.subtitle": "Select any folder on your computer",
+  "folderSelection.browse.button": "Browse Folders",
+  "folderSelection.browse.buttonOpening": "Opening...",
+
+  "folderSelection.advancedSettings": "Advanced Settings",
+
+  "folderSelection.hints.navigate": "Navigate",
+  "folderSelection.hints.select": "Select",
+  "folderSelection.hints.remove": "Remove",
+  "folderSelection.hints.browse": "Browse",
+
+  "folderSelection.loading.title": "Starting instance...",
+  "folderSelection.loading.subtitle": "Hang tight while we prepare your workspace.",
+
+  "folderSelection.dialog.title": "Select Workspace",
+  "folderSelection.dialog.description": "Select workspace to start coding.",
+} as const

packages/ui/src/lib/i18n/messages/en/index.ts

@@ -0,0 +1,36 @@
+import { advancedSettingsMessages } from "./advancedSettings"
+import { appMessages } from "./app"
+import { commandMessages } from "./commands"
+import { dialogMessages } from "./dialogs"
+import { filesystemMessages } from "./filesystem"
+import { folderSelectionMessages } from "./folderSelection"
+import { instanceMessages } from "./instance"
+import { loadingScreenMessages } from "./loadingScreen"
+import { logMessages } from "./logs"
+import { markdownMessages } from "./markdown"
+import { messagingMessages } from "./messaging"
+import { remoteAccessMessages } from "./remoteAccess"
+import { sessionMessages } from "./session"
+import { settingsMessages } from "./settings"
+import { timeMessages } from "./time"
+import { toolCallMessages } from "./toolCall"
+import { mergeMessageParts } from "../merge"
+
+export const enMessages = mergeMessageParts(
+  folderSelectionMessages,
+  advancedSettingsMessages,
+  loadingScreenMessages,
+  timeMessages,
+  appMessages,
+  dialogMessages,
+  filesystemMessages,
+  instanceMessages,
+  logMessages,
+  sessionMessages,
+  messagingMessages,
+  toolCallMessages,
+  markdownMessages,
+  settingsMessages,
+  remoteAccessMessages,
+  commandMessages,
+)

packages/ui/src/lib/i18n/messages/en/instance.ts

@@ -0,0 +1,125 @@
+export const instanceMessages = {
+  "instanceTabs.new.title": "New instance (Cmd/Ctrl+N)",
+  "instanceTabs.new.ariaLabel": "New instance",
+  "instanceTabs.remote.title": "Remote connect",
+  "instanceTabs.remote.ariaLabel": "Remote connect",
+
+  "instanceInfo.title": "Instance Information",
+  "instanceInfo.labels.folder": "Folder",
+  "instanceInfo.labels.project": "Project",
+  "instanceInfo.labels.versionControl": "Version Control",
+  "instanceInfo.labels.opencodeVersion": "OpenCode Version",
+  "instanceInfo.labels.binaryPath": "Binary Path",
+  "instanceInfo.labels.environmentVariables": "Environment Variables ({count})",
+  "instanceInfo.loading": "Loading...",
+  "instanceInfo.server.title": "Server",
+  "instanceInfo.server.port": "Port:",
+  "instanceInfo.server.pid": "PID:",
+  "instanceInfo.server.status": "Status:",
+
+  "instanceTab.status.permission": "Waiting on permission",
+  "instanceTab.status.compacting": "Compacting",
+  "instanceTab.status.working": "Working",
+  "instanceTab.status.idle": "Idle",
+  "instanceTab.status.ariaLabel": "Instance status: {status}",
+  "instanceTab.actions.close.ariaLabel": "Close instance",
+
+  "instanceShell.leftPanel.sessionsTitle": "Sessions",
+  "instanceShell.leftPanel.instanceInfo": "Instance Info",
+
+  "instanceShell.leftDrawer.pin": "Pin left drawer",
+  "instanceShell.leftDrawer.unpin": "Unpin left drawer",
+  "instanceShell.leftDrawer.toggle.pinned": "Left drawer pinned",
+  "instanceShell.leftDrawer.toggle.open": "Open left drawer",
+  "instanceShell.leftDrawer.toggle.close": "Close left drawer",
+
+  "instanceShell.rightDrawer.pin": "Pin right drawer",
+  "instanceShell.rightDrawer.unpin": "Unpin right drawer",
+  "instanceShell.rightDrawer.toggle.pinned": "Right drawer pinned",
+  "instanceShell.rightDrawer.toggle.open": "Open right drawer",
+  "instanceShell.rightDrawer.toggle.close": "Close right drawer",
+
+  "instanceShell.metrics.usedLabel": "Used",
+  "instanceShell.metrics.availableLabel": "Avail",
+
+  "instanceShell.commandPalette.openAriaLabel": "Open command palette",
+  "instanceShell.commandPalette.button": "Command Palette",
+
+  "instanceShell.connection.ariaLabel": "Connection {status}",
+  "instanceShell.connection.connected": "Connected",
+  "instanceShell.connection.connecting": "Connecting...",
+  "instanceShell.connection.disconnected": "Disconnected",
+  "instanceShell.connection.unknown": "Unknown",
+
+  "instanceWelcome.shortcuts.newSession": "New Session",
+  "instanceWelcome.empty.title": "No Previous Sessions",
+  "instanceWelcome.empty.description": "Create a new session below to get started",
+  "instanceWelcome.loading.title": "Loading Sessions",
+  "instanceWelcome.loading.description": "Fetching your previous sessions...",
+  "instanceWelcome.resume.title": "Resume Session",
+  "instanceWelcome.resume.subtitle.one": "{count} session available",
+  "instanceWelcome.resume.subtitle.other": "{count} sessions available",
+  "instanceWelcome.session.untitled": "Untitled Session",
+  "instanceWelcome.new.title": "Start New Session",
+  "instanceWelcome.new.subtitle": "We’ll reuse your last agent/model automatically",
+  "instanceWelcome.new.createButton": "Create Session",
+  "instanceWelcome.overlay.close": "Close",
+  "instanceWelcome.actions.viewInstanceInfo": "View Instance Info",
+  "instanceWelcome.actions.renameTitle": "Rename session",
+  "instanceWelcome.actions.deleteTitle": "Delete session",
+  "instanceWelcome.hints.navigate": "Navigate",
+  "instanceWelcome.hints.jump": "Jump",
+  "instanceWelcome.hints.firstLast": "First/Last",
+  "instanceWelcome.hints.resume": "Resume",
+  "instanceWelcome.hints.delete": "Delete",
+  "instanceWelcome.toasts.renameError": "Unable to rename session",
+
+  "instanceDisconnected.title": "Instance Disconnected",
+  "instanceDisconnected.folderFallback": "this workspace",
+  "instanceDisconnected.reasonFallback": "The server stopped responding",
+  "instanceDisconnected.description": "{folder} can no longer be reached. Close the tab to continue working.",
+  "instanceDisconnected.details.title": "Details",
+  "instanceDisconnected.details.folderLabel": "Folder:",
+  "instanceDisconnected.actions.closeInstance": "Close Instance",
+
+  "instanceShell.empty.title": "No session selected",
+  "instanceShell.empty.description": "Select a session to view messages",
+
+  "instanceShell.rightPanel.title": "Status Panel",
+  "instanceShell.rightPanel.sections.plan": "Plan",
+  "instanceShell.rightPanel.sections.backgroundProcesses": "Background Shells",
+  "instanceShell.rightPanel.sections.mcp": "MCP Servers",
+  "instanceShell.rightPanel.sections.lsp": "LSP Servers",
+  "instanceShell.rightPanel.sections.plugins": "Plugins",
+
+  "instanceShell.plan.noSessionSelected": "Select a session to view plan.",
+  "instanceShell.plan.empty": "Nothing planned yet.",
+
+  "instanceShell.backgroundProcesses.empty": "No background processes.",
+  "instanceShell.backgroundProcesses.status": "Status: {status}",
+  "instanceShell.backgroundProcesses.output": "Output: {sizeKb}KB",
+  "instanceShell.backgroundProcesses.actions.output": "Output",
+  "instanceShell.backgroundProcesses.actions.stop": "Stop",
+  "instanceShell.backgroundProcesses.actions.terminate": "Terminate",
+
+  "versionPill.appWithVersion": "App {version}",
+  "versionPill.ui": "UI",
+  "versionPill.uiWithVersion": "UI {version}",
+  "versionPill.source": " ({source})",
+
+  "opencodeBinarySelector.title": "OpenCode Binary",
+  "opencodeBinarySelector.subtitle": "Choose which executable OpenCode should run",
+  "opencodeBinarySelector.customPath.placeholder": "Enter path to opencode binary…",
+  "opencodeBinarySelector.actions.add": "Add",
+  "opencodeBinarySelector.actions.browse": "Browse for Binary…",
+  "opencodeBinarySelector.actions.removeTitle": "Remove binary",
+  "opencodeBinarySelector.badge.systemPath": "Use binary from system PATH",
+  "opencodeBinarySelector.status.checkingVersions": "Checking versions…",
+  "opencodeBinarySelector.status.checking": "Checking…",
+  "opencodeBinarySelector.dialog.title": "Select OpenCode Binary",
+  "opencodeBinarySelector.dialog.description": "Browse files exposed by the CLI server.",
+  "opencodeBinarySelector.validation.invalidBinary": "Invalid OpenCode binary",
+  "opencodeBinarySelector.validation.alreadyValidating": "Already validating",
+  "opencodeBinarySelector.display.systemPath": "{name} (system PATH)",
+  "opencodeBinarySelector.versionLabel": "v{version}",
+} as const