Add language switcher and stabilize tool versions

BunsDev · BunsDev · commit a1599fb32c0e · 2026-04-12T21:52:01.000-05:00
- Add locale selection to settings and translate key UI strings
- Make sidebar cookie writes tolerant of missing cookieStore
- Pin package typecheck, fmt, and lint commands to Bunx wrappers
diff --git a/apps/desktop/package.json b/apps/desktop/package.json
@@ -9,7 +9,7 @@
     "dev:electron": "bun run scripts/dev-electron.mjs",
     "build": "tsdown",
     "start": "bun run scripts/start-electron.mjs",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "bunx tsc@5.7.3 --noEmit",
     "test": "vitest run --passWithNoTests",
     "smoke-test": "node scripts/smoke-test.mjs",
     "release-smoke": "node ../../scripts/release-smoke.ts"
diff --git a/apps/marketing/package.json b/apps/marketing/package.json
@@ -10,7 +10,7 @@
     "preview": "next start",
     "start": "next start",
     "lint": "eslint .",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "bunx tsc@5.7.3 --noEmit"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.10.0",
diff --git a/apps/mobile/package.json b/apps/mobile/package.json
@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "build": "bun run scripts/build-mobile-shell.mjs",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "bunx tsc@5.7.3 --noEmit",
     "test": "vitest run --passWithNoTests",
     "sync": "cap sync",
     "open:ios": "cap open ios",
diff --git a/apps/server/package.json b/apps/server/package.json
@@ -19,7 +19,7 @@
     "build": "node scripts/cli.ts build",
     "start": "node dist/index.mjs",
     "prepare": "node -e \"process.exit(process.env.CI ? 0 : 1)\" || (node ../../scripts/patch-effect-language-service.ts && node ../../scripts/patch-effect-smol-peer-installs.mjs)",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "bunx tsc@5.7.3 --noEmit",
     "test": "vitest run"
   },
   "dependencies": {
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -8,7 +8,7 @@
     "build": "vite build",
     "prepare": "node -e \"process.exit(process.env.CI ? 0 : 1)\" || node ../../scripts/patch-effect-language-service.ts",
     "preview": "vite preview",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "bunx tsc@5.7.3 --noEmit",
     "test": "vitest run --passWithNoTests",
     "test:browser": "node ../../scripts/run-browser-tests.mjs vitest.browser.config.ts",
     "test:browser:install": "playwright install --with-deps chromium"
diff --git a/apps/web/src/components/settings/SettingsRouteContext.tsx b/apps/web/src/components/settings/SettingsRouteContext.tsx
@@ -106,6 +106,7 @@ export function SettingsRouteContextProvider({ children }: { children: ReactNode
           ? ["PR request changes button"]
           : []),
         ...(settings.timestampFormat !== defaults.timestampFormat ? ["Time format"] : []),
+        ...(settings.locale !== defaults.locale ? ["Language"] : []),
         ...(settings.showStitchBorder !== defaults.showStitchBorder ? ["Stitch border"] : []),
         ...(settings.enableAssistantStreaming !== defaults.enableAssistantStreaming
           ? ["Assistant output"]
diff --git a/apps/web/src/components/settings/SettingsShell.tsx b/apps/web/src/components/settings/SettingsShell.tsx
@@ -17,6 +17,7 @@ import { Button } from "../ui/button";
 import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "../ui/select";
 import { SidebarInset, SidebarTrigger } from "../ui/sidebar";
 import { cn } from "../../lib/utils";
+import { useT } from "../../i18n/useI18n";
 
 export type SettingsSectionId =
   | "general"
@@ -104,6 +105,7 @@ export function SettingsShell({
   children: ReactNode;
 }) {
   const navigate = useNavigate();
+  const { t } = useT();
   const activeItemLabel = useMemo(
     () => SETTINGS_NAV_ITEMS.find((item) => item.id === activeItem)?.label ?? "Settings",
     [activeItem],
@@ -142,7 +144,7 @@ export function SettingsShell({
                   disabled={changedSettingLabels.length === 0}
                   onClick={() => void onRestoreDefaults()}
                 >
-                  Restore defaults
+                  {t("common.actions.restoreDefaults")}
                 </Button>
               </div>
             </div>
@@ -163,7 +165,7 @@ export function SettingsShell({
                 disabled={changedSettingLabels.length === 0}
                 onClick={() => void onRestoreDefaults()}
               >
-                Restore defaults
+                {t("common.actions.restoreDefaults")}
               </Button>
             </div>
           </div>
diff --git a/apps/web/src/components/ui/sidebar.tsx b/apps/web/src/components/ui/sidebar.tsx
@@ -38,6 +38,10 @@ type SidebarContextProps = {
   toggleSidebar: () => void;
 };
 
+type CookieStoreLike = {
+  set(options: { expires: number; name: string; path: string; value: string }): Promise<void>;
+};
+
 type SidebarResizableOptions = {
   maxWidth?: number;
   minWidth?: number;
@@ -147,7 +151,9 @@ function SidebarProvider({
       }
 
       // This sets the cookie to keep the sidebar state.
-      await cookieStore.set({
+      const cookieStore = (globalThis as typeof globalThis & { cookieStore?: CookieStoreLike })
+        .cookieStore;
+      await cookieStore?.set({
         expires: Date.now() + SIDEBAR_COOKIE_MAX_AGE * 1000,
         name: SIDEBAR_COOKIE_NAME,
         path: "/",
diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx
@@ -33,6 +33,7 @@ import { MobileConnectionBanner } from "../components/mobile/MobileConnectionBan
 import { MobilePairingScreen } from "../components/mobile/MobilePairingScreen";
 import { useMobilePairingState } from "../hooks/useMobilePairingState";
 import { I18nProvider } from "../i18n/I18nProvider";
+import { useT } from "../i18n/useI18n";
 import { VoodooStitches } from "../components/VoodooStitches";
 
 export const Route = createRootRouteWithContext<{
@@ -57,13 +58,16 @@ function RootRouteView() {
 }
 
 function RootRouteContent() {
+  const { t } = useT();
   const { isMobileShell, isLoading, pairingState } = useMobilePairingState();
 
   if (isMobileShell && isLoading) {
     return (
       <div className="flex h-screen flex-col bg-background text-foreground">
         <div className="flex flex-1 items-center justify-center">
-          <p className="text-sm text-muted-foreground">Restoring mobile pairing...</p>
+          <p className="text-sm text-muted-foreground">
+            {t("root.loading.restoringMobilePairing")}
+          </p>
         </div>
       </div>
     );
@@ -78,7 +82,7 @@ function RootRouteContent() {
       <div className="flex h-screen flex-col bg-background text-foreground">
         <div className="flex flex-1 items-center justify-center">
           <p className="text-sm text-muted-foreground">
-            Connecting to {APP_DISPLAY_NAME} server...
+            {t("root.loading.connectingServer", { appName: APP_DISPLAY_NAME })}
           </p>
         </div>
       </div>
@@ -107,6 +111,7 @@ function RootRouteErrorView({ error, reset }: ErrorComponentProps) {
 }
 
 function RootRouteErrorContent({ error, reset }: ErrorComponentProps) {
+  const { t } = useT();
   const message = errorMessage(error);
   const details = errorDetails(error);
 
@@ -122,23 +127,23 @@ function RootRouteErrorContent({ error, reset }: ErrorComponentProps) {
           {APP_DISPLAY_NAME}
         </p>
         <h1 className="mt-3 text-2xl font-semibold tracking-tight sm:text-3xl">
-          Something went wrong.
+          {t("root.error.title")}
         </h1>
         <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{message}</p>
 
         <div className="mt-5 flex flex-wrap gap-2">
           <Button size="sm" onClick={() => reset()}>
-            Try again
+            {t("common.actions.tryAgain")}
           </Button>
           <Button size="sm" variant="outline" onClick={() => window.location.reload()}>
-            Reload app
+            {t("common.actions.reloadApp")}
           </Button>
         </div>
 
         <details className="group mt-5 overflow-hidden rounded-lg border border-border/70 bg-background/55">
           <summary className="cursor-pointer list-none px-3 py-2 text-xs font-medium text-muted-foreground">
-            <span className="group-open:hidden">Show error details</span>
-            <span className="hidden group-open:inline">Hide error details</span>
+            <span className="group-open:hidden">{t("root.error.showDetails")}</span>
+            <span className="hidden group-open:inline">{t("root.error.hideDetails")}</span>
           </summary>
           <pre className="max-h-56 overflow-auto border-t border-border/70 bg-background/80 px-3 py-2 text-xs text-foreground/85">
             {details}
diff --git a/apps/web/src/routes/_chat.settings.index.tsx b/apps/web/src/routes/_chat.settings.index.tsx
@@ -77,12 +77,19 @@ import {
   getProviderStatusDescription,
   getProviderStatusHeading,
 } from "../components/chat/providerStatusPresentation";
+import { APP_LOCALE_PREFERENCES } from "../i18n/types";
+import { useT } from "../i18n/useI18n";
 
-const TIMESTAMP_FORMAT_LABELS = {
-  locale: "System default",
-  "12-hour": "12-hour",
-  "24-hour": "24-hour",
-} as const;
+const TIMESTAMP_FORMAT_OPTIONS = [
+  { value: "locale", labelKey: "settings.general.timeFormat.option.locale" },
+  { value: "12-hour", labelKey: "settings.general.timeFormat.option.12Hour" },
+  { value: "24-hour", labelKey: "settings.general.timeFormat.option.24Hour" },
+] as const;
+
+const LANGUAGE_OPTIONS = APP_LOCALE_PREFERENCES.map((value) => ({
+  value,
+  labelKey: `settings.general.language.option.${value}` as const,
+}));
 
 const PR_REVIEW_REQUEST_CHANGES_TONE_OPTIONS: ReadonlyArray<{
   value: PrReviewRequestChangesTone;
@@ -435,6 +442,7 @@ function BuildInfoBlock({ label, buildInfo }: { label: string; buildInfo: BuildM
 }
 
 function SettingsRouteView() {
+  const { t } = useT();
   const navigate = useNavigate();
   const {
     settingsState: { settings, defaults, updateSettings },
@@ -709,6 +717,15 @@ function SettingsRouteView() {
     [settings, updateSettings],
   );
 
+  const languageOptionLabel = (value: (typeof APP_LOCALE_PREFERENCES)[number]) =>
+    t(`settings.general.language.option.${value}`);
+
+  const timestampFormatOptionLabel = (value: (typeof TIMESTAMP_FORMAT_OPTIONS)[number]["value"]) =>
+    t(
+      TIMESTAMP_FORMAT_OPTIONS.find((option) => option.value === value)?.labelKey ??
+        "settings.general.timeFormat.option.locale",
+    );
+
   return (
     <SettingsShell
       activeItem={activeSection}
@@ -736,6 +753,50 @@ function SettingsRouteView() {
               }
             />
 
+            <SettingsRow
+              title={t("settings.general.language.title")}
+              description={t("settings.general.language.description")}
+              resetAction={
+                settings.locale !== defaults.locale ? (
+                  <SettingResetButton
+                    label="language"
+                    onClick={() =>
+                      updateSettings({
+                        locale: defaults.locale,
+                      })
+                    }
+                  />
+                ) : null
+              }
+              control={
+                <Select
+                  value={settings.locale}
+                  onValueChange={(value) => {
+                    if (!LANGUAGE_OPTIONS.some((option) => option.value === value)) {
+                      return;
+                    }
+                    updateSettings({
+                      locale: value as (typeof APP_LOCALE_PREFERENCES)[number],
+                    });
+                  }}
+                >
+                  <SelectTrigger
+                    className="w-full sm:w-40"
+                    aria-label={t("settings.general.language.aria")}
+                  >
+                    <SelectValue>{languageOptionLabel(settings.locale)}</SelectValue>
+                  </SelectTrigger>
+                  <SelectPopup align="end" alignItemWithTrigger={false}>
+                    {LANGUAGE_OPTIONS.map((option) => (
+                      <SelectItem hideIndicator key={option.value} value={option.value}>
+                        {languageOptionLabel(option.value)}
+                      </SelectItem>
+                    ))}
+                  </SelectPopup>
+                </Select>
+              }
+            />
+
             <SettingsRow
               title="PR request changes button"
               description="Choose how prominent the Request changes action looks in pull request review."
@@ -800,27 +861,25 @@ function SettingsRouteView() {
                 <Select
                   value={settings.timestampFormat}
                   onValueChange={(value) => {
-                    if (value !== "locale" && value !== "12-hour" && value !== "24-hour") {
+                    if (!TIMESTAMP_FORMAT_OPTIONS.some((option) => option.value === value)) {
                       return;
                     }
                     updateSettings({
-                      timestampFormat: value,
+                      timestampFormat: value as (typeof TIMESTAMP_FORMAT_OPTIONS)[number]["value"],
                     });
                   }}
                 >
                   <SelectTrigger className="w-full sm:w-40" aria-label="Timestamp format">
-                    <SelectValue>{TIMESTAMP_FORMAT_LABELS[settings.timestampFormat]}</SelectValue>
+                    <SelectValue>
+                      {timestampFormatOptionLabel(settings.timestampFormat)}
+                    </SelectValue>
                   </SelectTrigger>
                   <SelectPopup align="end" alignItemWithTrigger={false}>
-                    <SelectItem hideIndicator value="locale">
-                      {TIMESTAMP_FORMAT_LABELS.locale}
-                    </SelectItem>
-                    <SelectItem hideIndicator value="12-hour">
-                      {TIMESTAMP_FORMAT_LABELS["12-hour"]}
-                    </SelectItem>
-                    <SelectItem hideIndicator value="24-hour">
-                      {TIMESTAMP_FORMAT_LABELS["24-hour"]}
-                    </SelectItem>
+                    {TIMESTAMP_FORMAT_OPTIONS.map((option) => (
+                      <SelectItem hideIndicator key={option.value} value={option.value}>
+                        {timestampFormatOptionLabel(option.value)}
+                      </SelectItem>
+                    ))}
                   </SelectPopup>
                 </Select>
               }
diff --git a/package.json b/package.json
@@ -35,13 +35,13 @@
     "build": "turbo run build",
     "build:marketing": "turbo run build --filter=@okcode/marketing",
     "build:desktop": "turbo run build --filter=@okcode/desktop --filter=okcodes",
-    "typecheck": "turbo run typecheck",
-    "lint": "oxlint --report-unused-disable-directives",
+    "typecheck": "bunx turbo run typecheck",
+    "lint": "bunx oxlint --report-unused-disable-directives",
     "test": "turbo run test",
     "test:desktop-smoke": "turbo run smoke-test --filter=@okcode/desktop",
     "test:desktop-release-smoke": "turbo run release-smoke --filter=@okcode/desktop",
-    "fmt": "oxfmt",
-    "fmt:check": "oxfmt --check",
+    "fmt": "bunx oxfmt",
+    "fmt:check": "bunx oxfmt --check",
     "build:contracts": "turbo run build --filter=@okcode/contracts",
     "dist:desktop:artifact": "node scripts/build-desktop-artifact.ts",
     "dist:desktop:dmg": "node scripts/build-desktop-artifact.ts --platform mac --target dmg",
diff --git a/packages/contracts/package.json b/packages/contracts/package.json
@@ -20,7 +20,7 @@
     "dev": "tsdown src/index.ts --format esm,cjs --dts --watch --clean",
     "build": "tsdown src/index.ts --format esm,cjs --dts --clean",
     "prepare": "node -e \"process.exit(process.env.CI ? 0 : 1)\" || node ../../scripts/patch-effect-language-service.ts",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "bunx tsc@5.7.3 --noEmit",
     "test": "vitest run"
   },
   "dependencies": {
diff --git a/packages/contracts/src/orchestration.ts b/packages/contracts/src/orchestration.ts
@@ -746,7 +746,7 @@ export type ProjectDeletedReason = typeof ProjectDeletedReason.Type;
 export const ProjectDeletedPayload = Schema.Struct({
   projectId: ProjectId,
   deletedAt: IsoDateTime,
-  reason: ProjectDeletedReason.pipe(Schema.withDecodingDefault(() => "manual")),
+  reason: ProjectDeletedReason.pipe(Schema.withDecodingDefault(() => "manual" as const)),
 });
 
 export const ThreadCreatedPayload = Schema.Struct({
@@ -771,7 +771,7 @@ export type ThreadDeletedReason = typeof ThreadDeletedReason.Type;
 export const ThreadDeletedPayload = Schema.Struct({
   threadId: ThreadId,
   deletedAt: IsoDateTime,
-  reason: ThreadDeletedReason.pipe(Schema.withDecodingDefault(() => "manual")),
+  reason: ThreadDeletedReason.pipe(Schema.withDecodingDefault(() => "manual" as const)),
 });
 
 export const ThreadMetaUpdatedPayload = Schema.Struct({
diff --git a/packages/shared/package.json b/packages/shared/package.json
@@ -63,7 +63,7 @@
   },
   "scripts": {
     "prepare": "node -e \"process.exit(process.env.CI ? 0 : 1)\" || node ../../scripts/patch-effect-language-service.ts",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "bunx tsc@5.7.3 --noEmit",
     "test": "vitest run"
   },
   "dependencies": {
