Feature: Language Switcher in Settings with Full i18n Support

packages/app/src/app/components/mcp-auth-modal.tsx

@@ -213,7 +213,7 @@ export default function McpAuthModal(props: McpAuthModalProps) {
                     <CheckCircle2 size={24} class="text-green-11" />
                   </div>
                   <div>
-                    <p class="text-sm font-medium text-gray-12">Already Connected</p>
+                    <p class="text-sm font-medium text-gray-12">{translate("mcp.auth.already_connected_title")}</p>
                     <p class="text-xs text-gray-11">
                         {translate("mcp.auth.already_connected_description", { server: serverName() })}
                     </p>
@@ -260,7 +260,7 @@ export default function McpAuthModal(props: McpAuthModalProps) {
                     1
                   </div>
                   <div>
-                    <p class="text-sm font-medium text-gray-12">Opening your browser</p>
+                    <p class="text-sm font-medium text-gray-12">{translate("mcp.auth.step1_title")}</p>
                     <p class="text-xs text-gray-10 mt-1">
                         {translate("mcp.auth.step1_description", { server: serverName() })}
                     </p>
@@ -272,7 +272,7 @@ export default function McpAuthModal(props: McpAuthModalProps) {
                     2
                   </div>
                   <div>
-                    <p class="text-sm font-medium text-gray-12">Authorize OpenWork</p>
+                    <p class="text-sm font-medium text-gray-12">{translate("mcp.auth.step2_title")}</p>
                     <p class="text-xs text-gray-10 mt-1">
                         {translate("mcp.auth.step2_description")}
                     </p>
@@ -284,7 +284,7 @@ export default function McpAuthModal(props: McpAuthModalProps) {
                     3
                   </div>
                   <div>
-                    <p class="text-sm font-medium text-gray-12">Return here when you're done</p>
+                    <p class="text-sm font-medium text-gray-12">{translate("mcp.auth.step3_title")}</p>
                     <p class="text-xs text-gray-10 mt-1">
                         {translate("mcp.auth.step3_description")}
                     </p>

packages/app/src/app/components/onboarding-workspace-selector.tsx

@@ -1,5 +1,6 @@
 import { For, Show, createEffect, createSignal } from "solid-js";
 
+import { t } from "../../i18n";
 import { CheckCircle2, FolderPlus, Loader2 } from "lucide-solid";
 
 import Button from "./button";
@@ -16,13 +17,13 @@ export default function OnboardingWorkspaceSelector(props: {
   const options = () => [
     {
       id: "starter" as const,
-      name: "Starter workspace",
-      desc: "Preconfigured to show you how to use plugins, templates, and skills.",
+      name: t("onboarding.workspace_selector.starter_workspace"),
+      desc: t("onboarding.workspace_selector.starter_workspace_desc"),
     },
     {
       id: "minimal" as const,
-      name: "Empty workspace",
-      desc: "Start with a blank folder and add what you need.",
+      name: t("onboarding.workspace_selector.empty_workspace"),
+      desc: t("onboarding.workspace_selector.empty_workspace_desc"),
     },
   ];
 
@@ -54,7 +55,7 @@ export default function OnboardingWorkspaceSelector(props: {
         <div class="space-y-4">
           <div class="flex items-center gap-3 text-sm font-medium text-gray-12">
             <div class="w-6 h-6 rounded-full bg-gray-4 flex items-center justify-center text-xs">1</div>
-            Select Folder
+            {t("onboarding.workspace_selector.select_folder")}
           </div>
           <div class="ml-9">
             <div
@@ -78,11 +79,11 @@ export default function OnboardingWorkspaceSelector(props: {
                 >
                   <Show
                     when={pickingFolder()}
-                    fallback={<span>Choose</span>}
+                    fallback={<span>{t("onboarding.workspace_selector.choose")}</span>}
                   >
                     <span class="inline-flex items-center gap-2">
                       <Loader2 size={12} class="animate-spin" />
-                      Opening...
+                      {t("onboarding.workspace_selector.opening")}
                     </span>
                   </Show>
                 </button>
@@ -94,7 +95,7 @@ export default function OnboardingWorkspaceSelector(props: {
         <div class="space-y-4">
           <div class="flex items-center gap-3 text-sm font-medium text-gray-12">
             <div class="w-6 h-6 rounded-full bg-gray-4 flex items-center justify-center text-xs">2</div>
-            Choose Preset
+            {t("onboarding.workspace_selector.choose_preset")}
           </div>
           <div class={`ml-9 grid gap-3 ${!canContinue() ? "opacity-50" : ""}`.trim()}>
             <For each={options()}>

packages/app/src/app/components/part-view.tsx

@@ -1,5 +1,6 @@
 import { For, Match, Show, Switch } from "solid-js";
 
+import { t } from "../../i18n";
 import type { Part } from "@opencode-ai/sdk/v2/client";
 
 type Props = {
@@ -169,7 +170,7 @@ export default function PartView(props: Props) {
           }
         >
           <details class={`rounded-lg ${panelBgClass()} p-2`.trim()}>
-            <summary class={`cursor-pointer text-xs ${subtleTextClass()}`.trim()}>Thinking</summary>
+            <summary class={`cursor-pointer text-xs ${subtleTextClass()}`.trim()}>{t("part.thinking")}</summary>
             <pre
               class={`mt-2 whitespace-pre-wrap break-words text-xs ${
                 tone() === "dark" ? "text-gray-1" : "text-gray-12"
@@ -188,7 +189,7 @@ export default function PartView(props: Props) {
               <div
                 class={`text-xs font-medium ${tone() === "dark" ? "text-gray-1" : "text-gray-12"}`.trim()}
               >
-                Tool · {String((p() as any).tool)}
+                {t("part.tool_label")} · {String((p() as any).tool)}
               </div>
               <div
                 class={`rounded-full px-2 py-0.5 text-[11px] font-medium ${
@@ -227,7 +228,7 @@ export default function PartView(props: Props) {
 
             <Show when={showToolOutput() && (p() as any).state?.input != null}>
               <details class={`rounded-lg ${panelBgClass()} p-2`.trim()}>
-                <summary class={`cursor-pointer text-xs ${subtleTextClass()}`.trim()}>Input</summary>
+                <summary class={`cursor-pointer text-xs ${subtleTextClass()}`.trim()}>{t("part.input")}</summary>
                 <pre
                   class={`mt-2 whitespace-pre-wrap break-words text-xs ${
                     tone() === "dark" ? "text-gray-12" : "text-gray-1"

packages/app/src/app/components/thinking-block.tsx

@@ -1,5 +1,6 @@
 import { For, Show, createMemo, createSignal } from "solid-js";
 
+import { t } from "../../i18n";
 import { CheckCircle2, ChevronRight, Circle, RefreshCcw, X, Zap } from "lucide-solid";
 
 export type ThinkingStep = {
@@ -29,7 +30,7 @@ export default function ThinkingBlock(props: {
           <div class="p-1 rounded bg-gray-2 border border-gray-6 text-gray-10">
             <Zap size={12} />
           </div>
-          <span class="truncate">{activeStep()?.text ?? "Working…"}</span>
+          <span class="truncate">{activeStep()?.text ?? t("thinking.default_text")}</span>
           <ChevronRight
             size={12}
             class={`text-gray-7 transition-transform ${expanded() ? "rotate-90" : ""}`}