gloomberb 0.10.0 → 0.10.2

package/src/components/command-bar/workflow/tickers.ts

@@ -1,6 +1,6 @@
 import type { Dispatch } from "react";
 import type { AppAction, AppState } from "../../../state/app/context";
-import type { TickerRepository } from "../../../data/ticker-repository";
+import type { AppTickerRepositoryPort } from "../../../core/app-service-ports";
 import type { PluginRegistry } from "../../../plugins/registry";
 import { isManualPortfolio } from "../../../plugins/builtin/portfolio-list/mutations";
 import type { DataProvider } from "../../../types/data-provider";
@@ -10,7 +10,7 @@ import { parseTickerListInput } from "../../../tickers/list";
 
 export interface SharedWorkflowDeps {
   dataProvider: DataProvider;
-  tickerRepository: TickerRepository;
+  tickerRepository: AppTickerRepositoryPort;
   pluginRegistry: PluginRegistry;
   dispatch: Dispatch<AppAction>;
   getState: () => AppState;

package/src/components/feed-data-table/stack-view.test.tsx

@@ -3,52 +3,44 @@ import { act } from "react";
 import { testRender } from "../../renderers/opentui/test-utils";
 import { AppContext, PaneInstanceProvider, createInitialState } from "../../state/app/context";
 import { createDefaultConfig } from "../../types/config";
-import { Box, Text } from "../../ui";
 import { FeedDataTableStackView } from "./stack-view";
+import { setLanguage } from "../../i18n";
 
 let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
 
 afterEach(async () => {
   await act(async () => testSetup?.renderer.destroy());
   testSetup = undefined;
+  setLanguage("en");
 });
 
-test("delegates root key handling", async () => {
-  let keyHits = 0;
-  const state = createInitialState(createDefaultConfig("/tmp/gloomberb-feed-table-test"));
-  await act(async () => {
-    testSetup = await testRender(
-      <AppContext value={{ state, dispatch: () => {} }}>
-        <PaneInstanceProvider paneId="portfolio-list:main">
-          <FeedDataTableStackView
-            width={80}
-            height={12}
-            focused
-            items={[]}
-            selectedIdx={0}
-            onSelect={() => {}}
-            rootBefore={<Box height={1}><Text>Feed controls</Text></Box>}
-            onRootKeyDown={(event) => {
-              if (event.name !== "f") return false;
-              keyHits += 1;
-              return true;
-            }}
-          />
-        </PaneInstanceProvider>
-      </AppContext>,
-      { width: 80, height: 12 },
-    );
-    await testSetup.renderOnce();
-  });
+test("rebuilds translated columns when the app language changes", async () => {
+  const state = createInitialState(createDefaultConfig("/tmp/gloomberb-feed-table-language"));
+  const items = [{ id: "story", eyebrow: "Wire", title: "Story", timestamp: "2026-01-01" }];
+  testSetup = await testRender(
+    <AppContext value={{ state, dispatch: () => {} }}>
+      <PaneInstanceProvider paneId="news:test">
+        <FeedDataTableStackView
+          width={80}
+          height={8}
+          focused
+          items={items}
+          selectedIdx={0}
+          onSelect={() => {}}
+          sourceLabel="Source"
+          titleLabel="Headline"
+        />
+      </PaneInstanceProvider>
+    </AppContext>,
+    { width: 80, height: 8 },
+  );
+  await act(async () => testSetup?.renderOnce());
+  expect(testSetup.captureCharFrame()).toContain("Source");
 
   await act(async () => {
-    (testSetup!.renderer.keyInput as any).emit("keypress", {
-      name: "f", sequence: "f", eventType: "press",
-      ctrl: false, meta: false, option: false, shift: false, repeated: false,
-      preventDefault() {}, stopPropagation() {},
-    });
-    await testSetup!.renderOnce();
+    setLanguage("zh-CN");
+    await testSetup?.renderOnce();
+    await testSetup?.renderOnce();
   });
-
-  expect(keyHits).toBe(1);
+  expect(testSetup.captureCharFrame()).toContain("来源");
 });

package/src/components/feed-data-table/stack-view.tsx

@@ -2,6 +2,7 @@ import { Box, ScrollBox, Text } from "../../ui";
 import { TextAttributes, type ScrollBoxRenderable } from "../../ui";
 import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import { t } from "../../i18n";
+import { useAppLanguage } from "../../i18n/react";
 import { displayWidth, formatTimeAgo } from "../../utils/format";
 import { colors } from "../../theme/colors";
 import { isPlainKey } from "../../utils/keyboard";
@@ -148,6 +149,7 @@ export function FeedDataTableStackView({
   onOpenItem,
   onOpenItemIdChange,
 }: FeedDataTableStackViewProps) {
+  const language = useAppLanguage();
   const [sortPreference, setSortPreference] = useState<SortPreference>({
     columnId: "time",
     direction: "desc",
@@ -157,7 +159,7 @@ export function FeedDataTableStackView({
   const detailTextWidth = Math.max(width - 2, 12);
   const columns = useMemo(
     () => buildColumns(width, t(sourceLabel), t(titleLabel), items),
-    [items, sourceLabel, titleLabel, width],
+    [items, language, sourceLabel, titleLabel, width],
   );
   const sortedRows = useMemo(() => {
     return sortIndexedStackRows(items, sortPreference, compareRows);

package/src/components/layout/detached-pane-shell.tsx

@@ -6,7 +6,7 @@ import { useAppDispatch, useAppSelector } from "../../state/app/context";
 import type { DesktopWindowBridge } from "../../types/desktop-window";
 import { findPaneInstance } from "../../types/config";
 import type { PluginRegistry } from "../../plugins/registry";
-import { colors, floatingPaneBg, floatingPaneTitleBg, paneTitleText } from "../../theme/colors";
+import { floatingPaneBg, floatingPaneTitleBg, paneTitleText } from "../../theme/colors";
 import { useThemeColors } from "../../theme/theme-context";
 import { hasPaneFooterContent, PaneFooterBar, PaneFooterProvider } from "./pane/footer";
 import { PaneBodyFrame, getPaneWindowAttributes } from "./pane/frame";
@@ -32,7 +32,7 @@ function stopMouse(event?: { stopPropagation?: () => void; preventDefault?: () =
 }
 
 export function DetachedPaneShell({ pluginRegistry, desktopWindowBridge }: DetachedPaneShellProps) {
-  useThemeColors();
+  const colors = useThemeColors();
   const dispatch = useAppDispatch();
   const rendererHost = useRendererHost();
   const config = useAppSelector((state) => state.config);
@@ -134,8 +134,8 @@ export function DetachedPaneShell({ pluginRegistry, desktopWindowBridge }: Detac
         const reserveFooter = shouldReservePaneFooter(nativePaneChrome, showFooter);
         const renderFooter = reserveFooter || showFooter;
         const headerHeightRows = titleBarOverlay ? TITLEBAR_OVERLAY_HEIGHT_PX / cellHeightPx : 1;
-        const background = floatingPaneBg(focused);
-        const titleBackground = floatingPaneTitleBg(focused);
+        const background = floatingPaneBg(focused, colors);
+        const titleBackground = floatingPaneTitleBg(focused, colors);
         const bodyFrame = resolvePaneBodyFrame({
           width,
           height,
@@ -184,11 +184,11 @@ export function DetachedPaneShell({ pluginRegistry, desktopWindowBridge }: Detac
                 style={{ position: "relative" }}
               >
                 <Box flexGrow={1} minWidth={0} overflow="hidden">
-                  <Text fg={paneTitleText(focused, true)} selectable={false} data-gloom-role="pane-title">{title}</Text>
+                  <Text fg={paneTitleText(focused, true, colors)} selectable={false} data-gloom-role="pane-title">{title}</Text>
                 </Box>
                 {hasPaneSettings && (
                   <Text
-                    fg={paneTitleText(focused, true)}
+                    fg={paneTitleText(focused, true, colors)}
                     selectable={false}
                     className="electrobun-webkit-app-region-no-drag"
                     data-gloom-role="pane-action"

package/src/components/layout/header.tsx

@@ -1,6 +1,6 @@
 import { Box, SpinnerMark, Text, TextAttributes, useRendererHost, useUiCapabilities } from "../../ui";
 import { useCallback, useEffect, type ReactNode } from "react";
-import { blendHex, colors, priceColor } from "../../theme/colors";
+import { blendHex, priceColor } from "../../theme/colors";
 import { useThemeColors } from "../../theme/theme-context";
 import { useAppActive } from "../../state/app/activity";
 import { useAppDispatch, useAppSelector } from "../../state/app/context";
@@ -26,21 +26,24 @@ const UPDATE_NOTICE_DURATION_MS = 5_000;
 
 function DesktopHeaderPill({
   children,
-  backgroundColor = blendHex(colors.header, colors.bg, 0.28),
-  borderColor = blendHex(colors.border, colors.headerText, 0.22),
+  backgroundColor,
+  borderColor,
 }: {
   children: ReactNode;
   backgroundColor?: string;
   borderColor?: string;
 }) {
+  const colors = useThemeColors();
+  const resolvedBackgroundColor = backgroundColor ?? blendHex(colors.header, colors.bg, 0.28);
+  const resolvedBorderColor = borderColor ?? blendHex(colors.border, colors.headerText, 0.22);
   return (
     <Box
       height={1}
       flexDirection="row"
       alignItems="center"
-      backgroundColor={backgroundColor}
+      backgroundColor={resolvedBackgroundColor}
       style={{
-        border: `1px solid ${borderColor}`,
+        border: `1px solid ${resolvedBorderColor}`,
         borderRadius: 5,
         paddingInline: 6,
       }}
@@ -51,6 +54,7 @@ function DesktopHeaderPill({
 }
 
 function UpdateStatus() {
+  const colors = useThemeColors();
   const dispatch = useAppDispatch();
   const updateAvailable = useAppSelector(selectUpdateAvailable);
   const updateProgress = useAppSelector(selectUpdateProgress);
@@ -91,7 +95,7 @@ function UpdateStatus() {
       return <Text fg={colors.headerText}>{t(updateProgress.message ?? "Update installed, restart to apply")}</Text>;
     }
     if (updateProgress.phase === "error") {
-      return <Text fg={colors.headerText}>{tf("Update failed: {error}", { error: updateProgress.error })}</Text>;
+      return <Text fg={colors.headerText}>{tf("Update failed: {error}", { error: updateProgress.error ?? "Unknown error" })}</Text>;
     }
   }
 
@@ -130,7 +134,7 @@ function UpdateStatus() {
 }
 
 export function Header() {
-  useThemeColors();
+  const colors = useThemeColors();
   const rendererHost = useRendererHost();
   const baseCurrency = useAppSelector(selectBaseCurrency);
   const appActive = useAppActive();
@@ -153,7 +157,7 @@ export function Header() {
   }, [appActive]);
 
   const activeSpyQuote = getActiveQuoteDisplay(spyQuote);
-  const spyColor = activeSpyQuote ? priceColor(activeSpyQuote.change) : colors.headerText;
+  const spyColor = activeSpyQuote ? priceColor(activeSpyQuote.change, colors) : colors.headerText;
   const spyText = activeSpyQuote
     ? `SPY ${formatMarketPrice(activeSpyQuote.price, { assetCategory: "ETF" })} ${formatPercentRaw(activeSpyQuote.changePercent)}`
     : "SPY —";
@@ -166,7 +170,7 @@ export function Header() {
   // Market status
   const mktState = spyQuote?.marketState;
   const mktLabel = mktState ? t(marketStateLabel(mktState)) : "";
-  const mktColor = mktState ? marketStateColor(mktState) : colors.headerText;
+  const mktColor = mktState ? marketStateColor(mktState, colors) : colors.headerText;
 
   if (titleBarOverlay) {
     return (

package/src/components/layout/pane/content.test.tsx

@@ -2,6 +2,7 @@ import { afterEach, describe, expect, test } from "bun:test";
 import { act, type Dispatch } from "react";
 import { testRender } from "../../../renderers/opentui/test-utils";
 import { AppProvider, useAppDispatch, type AppAction } from "../../../state/app/context";
+import { setLanguage, t } from "../../../i18n";
 import { applyTheme, colors } from "../../../theme/colors";
 import { getTheme } from "../../../theme/themes";
 import { createDefaultConfig } from "../../../types/config";
@@ -19,15 +20,22 @@ function ThemeColorProbe() {
   return <text>{colors.textBright}</text>;
 }
 
+function LanguageProbe() {
+  return <text>{t("Done")}</text>;
+}
+
 describe("PaneContent", () => {
-  afterEach(() => {
-    testSetup?.renderer.destroy();
+  afterEach(async () => {
+    if (testSetup) {
+      await act(async () => testSetup?.renderer.destroy());
+    }
     testSetup = undefined;
     capturedDispatch = null;
     applyTheme("amber");
+    setLanguage("en");
   });
 
-  test("rerenders memoized pane bodies when the theme preview changes", async () => {
+  test("rerenders legacy pane colors when the theme preview changes", async () => {
     const config = {
       ...createDefaultConfig("/tmp/gloomberb-test"),
       theme: "amber",
@@ -61,4 +69,35 @@ describe("PaneContent", () => {
     expect(frame).toContain(getTheme("green").textBright);
     expect(frame).not.toContain(getTheme("amber").textBright);
   });
+
+  test("rerenders pane bodies when the app language changes", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-language-test");
+
+    testSetup = await testRender(
+      <AppProvider config={config}>
+        <PaneContent
+          component={LanguageProbe}
+          paneId="language:test"
+          paneType="test"
+          focused
+          width={24}
+          height={4}
+        />
+      </AppProvider>,
+      { width: 32, height: 6 },
+    );
+
+    await testSetup.renderOnce();
+    expect(testSetup.captureCharFrame()).toContain("Done");
+
+    await act(async () => {
+      setLanguage("zh-CN");
+      await testSetup!.renderOnce();
+    });
+    await testSetup.renderOnce();
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("完成");
+    expect(frame).not.toContain("Done");
+  });
 });

package/src/components/layout/pane/content.tsx

@@ -1,7 +1,8 @@
 import { memo, useCallback } from "react";
+import { useAppLanguage } from "../../../i18n/react";
 import { PaneInstanceProvider } from "../../../state/app/context";
-import { PaneKeyboardScrollController } from "../../../state/pane-scroll-registry";
 import { useThemeColors } from "../../../theme/theme-context";
+import { PaneKeyboardScrollController } from "../../../state/pane-scroll-registry";
 import type { PaneDef } from "../../../types/plugin";
 import { Box } from "../../../ui";
 
@@ -24,6 +25,7 @@ export const PaneContent = memo(function PaneContent({
   height,
   onClose,
 }: PaneContentProps) {
+  useAppLanguage();
   useThemeColors();
   const close = useCallback(() => {
     onClose?.(paneId);

package/src/components/layout/pane/footer/index.test.tsx

@@ -8,14 +8,16 @@ import {
   usePaneFooter,
 } from "./index";
 import { useExternalLinkFooter } from "../../../use-external-link-footer";
+import { setLanguage, t } from "../../../../i18n";
 
 let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
 
-afterEach(() => {
+afterEach(async () => {
   if (testSetup) {
-    testSetup.renderer.destroy();
+    await act(async () => testSetup?.renderer.destroy());
     testSetup = undefined;
   }
+  setLanguage("en");
 });
 
 function Registration({
@@ -54,6 +56,26 @@ function ExternalLinkRegistration() {
   return null;
 }
 
+function TranslatedRegistration() {
+  usePaneFooter("translated", () => ({
+    info: [{ id: "state", parts: [{ text: t("Open"), tone: "value" }] }],
+  }), []);
+  return null;
+}
+
+function TranslatedFooterHarness() {
+  return (
+    <PaneFooterProvider>
+      {(footer) => (
+        <Box width={40} height={1}>
+          <TranslatedRegistration />
+          <PaneFooterBar footer={footer} focused width={40} />
+        </Box>
+      )}
+    </PaneFooterProvider>
+  );
+}
+
 function FooterHarness({
   focused = false,
   onRefresh,
@@ -89,6 +111,27 @@ function ExternalLinkFooterHarness() {
 }
 
 describe("PaneFooterBar", () => {
+  test("rebuilds translated registrations when the app language changes", async () => {
+    testSetup = await testRender(<TranslatedFooterHarness />, { width: 40, height: 1 });
+    await act(async () => {
+      await testSetup?.renderOnce();
+      await testSetup?.renderOnce();
+    });
+    expect(testSetup.captureCharFrame()).toContain("Open");
+
+    await act(async () => {
+      setLanguage("zh-CN");
+      await Promise.resolve();
+    });
+    await act(async () => {
+      await testSetup?.renderOnce();
+      await testSetup?.renderOnce();
+      await Promise.resolve();
+      await testSetup?.renderOnce();
+    });
+    expect(testSetup.captureCharFrame()).toContain("打开");
+  });
+
   test("hides hints on inactive footers but keeps info visible", async () => {
     testSetup = await testRender(<FooterHarness />, { width: 64, height: 1 });
     await act(async () => {

package/src/components/layout/pane/footer/registration.tsx

@@ -17,6 +17,7 @@ import {
   type PaneFooterRegistration,
   type PaneHint,
 } from "./model";
+import { useAppLanguage } from "../../../../i18n/react";
 
 const usePaneFooterRegistrationEffect =
   typeof document === "undefined" ? useEffect : useLayoutEffect;
@@ -86,6 +87,7 @@ export function usePaneFooter(
   factory: () => PaneFooterRegistration | null | undefined,
   deps: DependencyList,
 ) {
+  const language = useAppLanguage();
   const context = useContext(PaneFooterContext);
   const previousRegistrationRef = useRef<PaneFooterRegistration | null>(null);
 
@@ -103,7 +105,7 @@ export function usePaneFooter(
     previousRegistrationRef.current = nextRegistration;
     context.register(registrationId, nextRegistration);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [context, registrationId, ...deps]);
+  }, [context, language, registrationId, ...deps]);
 }
 
 export function usePaneHints(

package/src/components/layout/shell/index.tsx

@@ -28,7 +28,6 @@ import {
   selectLayout,
   selectStatusBarVisible,
 } from "../../../state/selectors-ui";
-import { colors } from "../../../theme/colors";
 import { useThemeColors } from "../../../theme/theme-context";
 import { getPaneDisplayTitle } from "../pane/title";
 import { getShortcutDisplayMode } from "../../../utils/shortcut-labels";
@@ -90,7 +89,7 @@ export function Shell({
   desktopDockPreview,
   commandBarNativeOccluder = null,
 }: ShellProps) {
-  useThemeColors();
+  const colors = useThemeColors();
   const dispatch = useAppDispatch();
   const config = useAppSelector((state) => state.config);
   const paneState = useAppSelector((state) => state.paneState);

package/src/components/layout/shell/native/surfaces.ts

@@ -14,7 +14,7 @@ import {
   resolveNativeDockDividers,
   type DividerPreviewState,
 } from "./window-state";
-import type { WindowEditDockMovePreview } from "../../window-edit/mode";
+import type { WindowEditDockMovePreview } from "../../window-edit/presentation";
 
 interface ShellNativeSurfaceMenuState {
   paneId: string;

package/src/components/layout/shell/native/window-state.ts

@@ -3,7 +3,7 @@ import type { NativeOccluder, NativePaneLayer } from "../../../chart/native/surf
 import { DEFAULT_HEADER_HEIGHT } from "../chrome";
 import type { DragPreview, HoverOverlay } from "../drag";
 import { MENU_Z_INDEX } from "../menu";
-import type { WindowEditDockMovePreview } from "../../window-edit/mode";
+import type { WindowEditDockMovePreview } from "../../window-edit/presentation";
 
 export interface FloatingPreviewRect {
   paneId: string;

package/src/components/layout/status-bar.tsx

@@ -1,6 +1,6 @@
 import { Box, Span, Text, TextAttributes, contextMenuDivider, useContextMenu, useUiCapabilities } from "../../ui";
 import { useCallback, useEffect, useState } from "react";
-import { blendHex, colors, hoverBg } from "../../theme/colors";
+import { blendHex, hoverBg } from "../../theme/colors";
 import { t, tf } from "../../i18n";
 import { useThemeColors } from "../../theme/theme-context";
 import { useAppDispatch, useAppSelector } from "../../state/app/context";
@@ -55,7 +55,6 @@ function truncate(text: string, width: number): string {
 }
 
 export function StatusBar() {
-  useThemeColors();
   const { nativePaneChrome, nativeContextMenu } = useUiCapabilities();
   const { showContextMenu } = useContextMenu();
   const registry = getSharedRegistry();
@@ -255,6 +254,7 @@ function NativeStatusBar({
   showGridlockTip,
   ...props
 }: StatusBarViewProps) {
+  const colors = useThemeColors();
   return (
     <Box
       flexDirection="row"
@@ -271,9 +271,9 @@ function NativeStatusBar({
         paddingInline: 8,
       }}
     >
-      <StatusBarLayoutControl activeLayoutIdx={activeLayoutIdx} nativePaneChrome {...props} />
+      <StatusBarLayoutControl nativePaneChrome {...props} />
       {showGridlockTip && <NativeGridlockTip {...props} />}
-      <StatusBarWidgets {...props} />
+      <StatusBarWidgets />
     </Box>
   );
 }
@@ -284,6 +284,7 @@ function TerminalStatusBar({
   showGridlockTip,
   ...props
 }: StatusBarViewProps) {
+  const colors = useThemeColors();
   return (
     <Box
       flexDirection="row"
@@ -295,9 +296,9 @@ function TerminalStatusBar({
         void openLayoutContextMenu(activeLayoutIdx, event);
       }}
     >
-      <StatusBarLayoutControl activeLayoutIdx={activeLayoutIdx} nativePaneChrome={false} {...props} />
+      <StatusBarLayoutControl nativePaneChrome={false} {...props} />
       {showGridlockTip && <TerminalGridlockTip {...props} />}
-      <StatusBarWidgets {...props} />
+      <StatusBarWidgets />
     </Box>
   );
 }
@@ -360,11 +361,12 @@ function CommandBarHint({
 }: Pick<StatusBarViewProps, "hoveredControl" | "openCommandBar" | "setHoveredControl"> & {
   nativePaneChrome: boolean;
 }) {
+  const colors = useThemeColors();
   const hovered = hoveredControl === "command-bar";
   return (
     <Text
       fg={hovered ? colors.text : colors.textDim}
-      {...(!nativePaneChrome ? { bg: hovered ? hoverBg() : undefined } : {})}
+      {...(!nativePaneChrome ? { bg: hovered ? hoverBg(colors) : undefined } : {})}
       onMouseOver={() => setHoveredControl((current) => (current === "command-bar" ? current : "command-bar"))}
       onMouseDown={openCommandBar}
       {...(nativePaneChrome ? { "data-gloom-interactive": "true" } : {})}
@@ -380,6 +382,7 @@ function NativeGridlockTip({
   hoveredControl,
   setHoveredControl,
 }: Pick<StatusBarViewProps, "dismissGridlockTip" | "handleGridlockTip" | "hoveredControl" | "setHoveredControl">) {
+  const colors = useThemeColors();
   return (
     <Box paddingLeft={2} flexShrink={0} flexDirection="row" alignItems="center" gap={1}>
       <Text fg={colors.textDim}>{t("Snapped a window?")}</Text>
@@ -410,12 +413,13 @@ function TerminalGridlockTip({
   hoveredControl,
   setHoveredControl,
 }: Pick<StatusBarViewProps, "dismissGridlockTip" | "handleGridlockTip" | "hoveredControl" | "setHoveredControl">) {
+  const colors = useThemeColors();
   return (
     <Box paddingLeft={1} flexShrink={0} flexDirection="row">
       <Text fg={colors.textDim}>{t("Snapped a window?")}</Text>
       <Box width={1} />
       <Box
-        backgroundColor={hoveredControl === "gridlock-tip" ? hoverBg() : colors.header}
+        backgroundColor={hoveredControl === "gridlock-tip" ? hoverBg(colors) : colors.header}
         onMouseOver={() => setHoveredControl((current) => (current === "gridlock-tip" ? current : "gridlock-tip"))}
         onMouseDown={handleGridlockTip}
       >

package/src/components/layout/window-controls.tsx

@@ -1,6 +1,7 @@
 import { Box, useRendererHost } from "../../ui";
 import { useCallback } from "react";
 import { t } from "../../i18n";
+import { useAppLanguage } from "../../i18n/react";
 import { TITLEBAR_OVERLAY_HEIGHT_PX } from "./titlebar-overlay";
 
 const WINDOWS_CONTROL_SIZE_PX = TITLEBAR_OVERLAY_HEIGHT_PX;
@@ -10,11 +11,11 @@ type WindowControlAction = "minimize" | "toggle-maximize" | "close";
 
 const WINDOWS_CONTROLS: Array<{
   action: WindowControlAction;
-  label: string;
+  labelKey: string;
 }> = [
-  { action: "minimize", label: t("Minimize") },
-  { action: "toggle-maximize", label: t("Maximize") },
-  { action: "close", label: t("Close") },
+  { action: "minimize", labelKey: "Minimize" },
+  { action: "toggle-maximize", labelKey: "Maximize" },
+  { action: "close", labelKey: "Close" },
 ];
 
 function stopMouse(event: { stopPropagation?: () => void; preventDefault?: () => void }) {
@@ -51,6 +52,7 @@ interface WindowControlsProps {
 }
 
 export function WindowControls({ windowKind = "main" }: WindowControlsProps) {
+  useAppLanguage();
   const rendererHost = useRendererHost();
 
   const controlWindow = useCallback((action: WindowControlAction, event: { stopPropagation?: () => void; preventDefault?: () => void }) => {
@@ -88,8 +90,8 @@ export function WindowControls({ windowKind = "main" }: WindowControlsProps) {
           data-window-control-action={control.action}
           data-gloom-interactive="true"
           role="button"
-          aria-label={control.label}
-          title={control.label}
+          aria-label={t(control.labelKey)}
+          title={t(control.labelKey)}
           onMouseDown={(event: { stopPropagation?: () => void; preventDefault?: () => void }) => controlWindow(control.action, event)}
         >
           <WindowControlIcon action={control.action} />

package/src/components/onboarding/onboarding-wizard.tsx

@@ -3,6 +3,7 @@ import { Box, Text, type InputRenderable } from "../../ui";
 import { useViewport } from "../../react/input";
 import { colors, applyTheme } from "../../theme/colors";
 import { t } from "../../i18n";
+import { useAppLanguage } from "../../i18n/react";
 import { getThemeIds } from "../../theme/themes";
 import type { AppConfig } from "../../types/config";
 import type { PluginRegistry } from "../../plugins/registry";
@@ -32,6 +33,7 @@ interface OnboardingWizardProps {
 }
 
 export function OnboardingWizard({ config, pluginRegistry, onComplete }: OnboardingWizardProps) {
+  const language = useAppLanguage();
   const { width: termWidth, height: termHeight } = useViewport();
   const [step, setStep] = useState<OnboardingStep>("welcome");
   const [themeIdx, setThemeIdx] = useState(0);
@@ -67,7 +69,7 @@ export function OnboardingWizard({ config, pluginRegistry, onComplete }: Onboard
       });
     }
     return choices;
-  }, [brokerOptions]);
+  }, [brokerOptions, language]);
 
   const activeBrokerFields = useMemo((): BrokerConfigField[] => {
     if (!selectedBrokerId) return [];

package/src/components/pane-settings-dialog/desktop.tsx

@@ -1,5 +1,3 @@
-/// <reference lib="dom" />
-
 import { Box, Text } from "../../ui";
 import type { ReactNode } from "react";
 import type { PaneSettingField } from "../../types/plugin";

package/src/components/pane-settings-dialog.tsx

@@ -1,5 +1,3 @@
-/// <reference lib="dom" />
-
 import { useUiHost } from "../ui";
 import { type AlertContext, useDialog, useDialogKeyboard } from "../ui/dialog";
 import { useEffect, useRef, useState } from "react";