gloomberb 0.9.9 → 0.10.0

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

@@ -1,8 +1,9 @@
 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 { displayWidth, formatTimeAgo } from "../../utils/format";
 import { colors } from "../../theme/colors";
-import { formatTimeAgo } from "../../utils/format";
 import { isPlainKey } from "../../utils/keyboard";
 import { toTimestampMillis } from "../../utils/timestamp";
 import { DataTableStackView } from "../data-table/stack-view";
@@ -111,7 +112,7 @@ function buildColumns(
   const timeWidth = 8;
   const sourceWidth = Math.min(
     Math.max(
-      sourceLabel.length,
+      displayWidth(sourceLabel),
       ...items.map((item) => item.eyebrow?.length ?? 0),
       6,
     ),
@@ -123,7 +124,7 @@ function buildColumns(
   );
 
   return [
-    { id: "time", label: "Time", width: timeWidth, align: "left" },
+    { id: "time", label: t("Time"), width: timeWidth, align: "left" },
     { id: "source", label: sourceLabel, width: sourceWidth, align: "left" },
     { id: "title", label: titleLabel, width: titleWidth, align: "left" },
   ];
@@ -155,7 +156,7 @@ export function FeedDataTableStackView({
   const detailScrollRef = useRef<ScrollBoxRenderable>(null);
   const detailTextWidth = Math.max(width - 2, 12);
   const columns = useMemo(
-    () => buildColumns(width, sourceLabel, titleLabel, items),
+    () => buildColumns(width, t(sourceLabel), t(titleLabel), items),
     [items, sourceLabel, titleLabel, width],
   );
   const sortedRows = useMemo(() => {
@@ -356,7 +357,7 @@ export function FeedDataTableStackView({
         )}
       getItemKey={(row) => row.item.id}
       renderCell={renderCell}
-      emptyStateTitle={emptyStateTitle}
+      emptyStateTitle={t(emptyStateTitle)}
       emptyStateHint={emptyStateHint}
       showHorizontalScrollbar={false}
     />

package/src/components/index.ts

@@ -22,7 +22,19 @@ export type { FeedDataTableItem } from "./feed-data-table/stack-view";
 export { activeStackIndex, sortStackItems } from "./feed-stack-controller";
 export type { StackSortPreference } from "./feed-stack-controller";
 export { PaneFooterScope, usePaneFooter } from "./layout/pane/footer";
-export type { PaneFooterSegment, PaneHint } from "./layout/pane/footer";
+export type { PaneFooterPressEvent, PaneFooterSegment, PaneHint } from "./layout/pane/footer";
+export {
+  getPaneSidebarWidth,
+  PaneSidebar,
+  PaneSidebarAction,
+  PaneSidebarRow,
+  shouldShowPaneSidebar,
+} from "./layout/pane/sidebar";
+export type {
+  PaneSidebarActionRenderState,
+  PaneSidebarRenderState,
+  PaneSidebarRowRenderState,
+} from "./layout/pane/sidebar";
 export { useExternalLinkFooter } from "./use-external-link-footer";
 export { Button } from "./ui/button";
 export { Checkbox } from "./ui/checkbox";

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

@@ -1,5 +1,6 @@
 import { Box, Text, useRendererHost, useUiCapabilities } from "../../ui";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { t } from "../../i18n";
 import { useShortcut, useViewport } from "../../react/input";
 import { useAppDispatch, useAppSelector } from "../../state/app/context";
 import type { DesktopWindowBridge } from "../../types/desktop-window";
@@ -121,7 +122,7 @@ export function DetachedPaneShell({ pluginRegistry, desktopWindowBridge }: Detac
   if (!instance || !paneDef) {
     return (
       <Box flexGrow={1} alignItems="center" justifyContent="center" backgroundColor={colors.bg}>
-        <Text fg={colors.textDim}>Pane unavailable.</Text>
+        <Text fg={colors.textDim}>{t("Pane unavailable.")}</Text>
       </Box>
     );
   }

package/src/components/layout/floating-pane.tsx

@@ -18,6 +18,7 @@ interface FloatingPaneWrapperProps {
   windowModeSelected?: boolean;
   showActions?: boolean;
   onMouseDown?: (event: any) => void;
+  onMouseDownCapture?: (event: any) => void;
   onHeaderMouseMove?: (event: any) => void;
   onHeaderMouseDown?: (event: any) => void;
   onHeaderMouseDrag?: (event: any) => void;
@@ -63,6 +64,7 @@ export function FloatingPaneWrapper({
   windowModeSelected = false,
   showActions = false,
   onMouseDown,
+  onMouseDownCapture,
   onHeaderMouseMove,
   onHeaderMouseDown,
   onHeaderMouseDrag,
@@ -104,6 +106,7 @@ export function FloatingPaneWrapper({
         showBorderColor: true,
       })}
       onMouseDown={onMouseDown}
+      onMouseDownCapture={onMouseDownCapture}
     >
       <PaneHeader
         title={title}

package/src/components/layout/header.tsx

@@ -12,6 +12,7 @@ import {
   selectUpdateProgress,
 } from "../../state/selectors-ui";
 import { getSharedMarketDataCoordinator } from "../../market-data/coordinator";
+import { t, tf } from "../../i18n";
 import { useQuoteEntry, useResolvedEntryValue } from "../../market-data/hooks";
 import { formatPercentRaw } from "../../utils/format";
 import { formatMarketPrice } from "../../market-data/market/format";
@@ -70,7 +71,10 @@ function UpdateStatus() {
         <Box flexDirection="row" gap={1}>
           <SpinnerMark name="dots" color={colors.headerText} />
           <Text fg={colors.headerText}>
-            Downloading v{updateAvailable?.version}: {updateProgress.percent ?? 0}%
+            {tf("Downloading v{version}: {percent}%", {
+              version: updateAvailable?.version ?? "",
+              percent: updateProgress.percent ?? 0,
+            })}
           </Text>
         </Box>
       );
@@ -79,15 +83,15 @@ function UpdateStatus() {
       return (
         <Box flexDirection="row" gap={1}>
           <SpinnerMark name="dots" color={colors.headerText} />
-          <Text fg={colors.headerText}>Installing update...</Text>
+          <Text fg={colors.headerText}>{t("Installing update...")}</Text>
         </Box>
       );
     }
     if (updateProgress.phase === "done") {
-      return <Text fg={colors.headerText}>{updateProgress.message ?? "Update installed, restart to apply"}</Text>;
+      return <Text fg={colors.headerText}>{t(updateProgress.message ?? "Update installed, restart to apply")}</Text>;
     }
     if (updateProgress.phase === "error") {
-      return <Text fg={colors.headerText}>Update failed: {updateProgress.error}</Text>;
+      return <Text fg={colors.headerText}>{tf("Update failed: {error}", { error: updateProgress.error })}</Text>;
     }
   }
 
@@ -95,7 +99,7 @@ function UpdateStatus() {
     return (
       <Box flexDirection="row" gap={1}>
         <SpinnerMark name="dots" color={colors.headerText} />
-        <Text fg={colors.headerText}>Checking for updates...</Text>
+        <Text fg={colors.headerText}>{t("Checking for updates...")}</Text>
       </Box>
     );
   }
@@ -104,13 +108,16 @@ function UpdateStatus() {
     if (updateAvailable.updateAction.kind === "manual") {
       return (
         <Text fg={colors.headerText}>
-          v{updateAvailable.version} available — run {updateAvailable.updateAction.command}
+          {tf("v{version} available — run {command}", {
+            version: updateAvailable.version,
+            command: updateAvailable.updateAction.command,
+          })}
         </Text>
       );
     }
     return (
       <Text fg={colors.headerText}>
-        v{updateAvailable.version} available — starting download...
+        {tf("v{version} available — starting download...", { version: updateAvailable.version })}
       </Text>
     );
   }
@@ -158,7 +165,7 @@ export function Header() {
 
   // Market status
   const mktState = spyQuote?.marketState;
-  const mktLabel = mktState ? marketStateLabel(mktState) : "";
+  const mktLabel = mktState ? t(marketStateLabel(mktState)) : "";
   const mktColor = mktState ? marketStateColor(mktState) : colors.headerText;
 
   if (titleBarOverlay) {

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

@@ -20,8 +20,10 @@ afterEach(() => {
 
 function Registration({
   onRefresh,
+  refreshDisabled = false,
 }: {
   onRefresh?: () => void;
+  refreshDisabled?: boolean;
 }) {
   usePaneFooter("test", () => {
     return {
@@ -35,10 +37,10 @@ function Registration({
         },
       ],
       hints: [
-        { id: "refresh", key: "r", label: "efresh", onPress: onRefresh },
+        { id: "refresh", key: "r", label: "efresh", onPress: onRefresh, disabled: refreshDisabled },
       ],
     };
-  }, [onRefresh]);
+  }, [onRefresh, refreshDisabled]);
   return null;
 }
 
@@ -55,15 +57,17 @@ function ExternalLinkRegistration() {
 function FooterHarness({
   focused = false,
   onRefresh,
+  refreshDisabled = false,
 }: {
   focused?: boolean;
   onRefresh?: () => void;
+  refreshDisabled?: boolean;
 }) {
   return (
     <PaneFooterProvider>
       {(footer) => (
         <Box width={64} height={1}>
-          <Registration onRefresh={onRefresh} />
+          <Registration onRefresh={onRefresh} refreshDisabled={refreshDisabled} />
           <PaneFooterBar footer={footer} focused={focused} width={64} />
         </Box>
       )}
@@ -110,6 +114,21 @@ describe("PaneFooterBar", () => {
     expect(frame).not.toContain("https://example.com");
   });
 
+  test("omits disabled controls instead of rendering muted hints", async () => {
+    testSetup = await testRender(
+      <FooterHarness focused refreshDisabled onRefresh={() => {}} />,
+      { width: 64, height: 1 },
+    );
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Rows 12");
+    expect(frame).not.toContain("[r]efresh");
+  });
+
   test("calls hint onPress from mouse interaction", async () => {
     let refreshCount = 0;
     testSetup = await testRender(<FooterHarness focused onRefresh={() => { refreshCount += 1; }} />, { width: 64, height: 1 });

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

@@ -7,6 +7,7 @@ import {
   EMPTY_FOOTER,
   hasPaneFooterContent,
   type CombinedPaneFooter,
+  type PaneFooterPressEvent,
   type PaneFooterPart,
   type PaneFooterSegment,
   type PaneHint,
@@ -15,6 +16,7 @@ import {
 export {
   hasPaneFooterContent,
   type CombinedPaneFooter,
+  type PaneFooterPressEvent,
   type PaneFooterSegment,
   type PaneHint,
 } from "./model";
@@ -140,7 +142,7 @@ function FooterContent({
   showBackground?: boolean;
 }) {
   const hasInfo = footer.info.length > 0;
-  const visibleHints = focused ? footer.hints : [];
+  const visibleHints = focused ? footer.hints.filter((hint) => !hint.disabled) : [];
   const hasHints = visibleHints.length > 0;
   const dividerColor = focused ? colors.borderFocused : colors.border;
   const backgroundColor = showBackground ? blendHex(colors.bg, dividerColor, focused ? 0.12 : 0.06) : undefined;

package/src/components/layout/pane/footer/model.ts

@@ -11,6 +11,13 @@ export interface PaneFooterSegment {
   disabled?: boolean;
 }
 
+export interface PaneFooterPressEvent {
+  pixelX?: number;
+  pixelY?: number;
+  stopPropagation?: () => void;
+  preventDefault?: () => void;
+}
+
 export interface PaneFooterPart {
   text: string;
   tone?: "label" | "value" | "muted" | "positive" | "negative" | "warning";
@@ -22,7 +29,7 @@ export interface PaneHint {
   id: string;
   key: string;
   label: string;
-  onPress?: () => void;
+  onPress?: (event?: PaneFooterPressEvent) => void;
   disabled?: boolean;
 }
 
@@ -35,7 +42,7 @@ export const EMPTY_FOOTER: CombinedPaneFooter = { info: [], hints: [] };
 
 export function hasPaneFooterContent(footer?: CombinedPaneFooter | null): boolean {
   if (!footer) return false;
-  return footer.info.length > 0 || footer.hints.length > 0;
+  return footer.info.length > 0 || footer.hints.some((hint) => !hint.disabled);
 }
 
 export function combinePaneFooterRegistrations(registrations: Map<string, PaneFooterRegistration>): CombinedPaneFooter {

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

@@ -1,6 +1,7 @@
 import { Box, Span, Text, useNativeRenderer, useUiCapabilities } from "../../../ui";
 import { useCallback, useRef, type ReactNode } from "react";
 import { blendHex, colors, floatingPaneTitleBg, paneTitleBg, paneTitleText } from "../../../theme/colors";
+import { displayWidth, truncateToDisplayWidth } from "../../../utils/format";
 
 const PANE_HEADER_HEIGHT = 1;
 const PANE_HEADER_GRIP = ":: ";
@@ -24,10 +25,7 @@ interface PaneHeaderProps {
 }
 
 function truncateTitle(title: string, maxWidth: number): string {
-  if (maxWidth <= 0) return "";
-  if (title.length <= maxWidth) return title;
-  if (maxWidth <= 2) return ".".repeat(maxWidth);
-  return `${title.slice(0, maxWidth - 2)}..`;
+  return truncateToDisplayWidth(title, maxWidth);
 }
 
 function captureTerminalPointerDrag(renderer: unknown, renderable: unknown): void {
@@ -218,7 +216,7 @@ export function PaneHeader({
     const contentWidth = PANE_HEADER_GRIP.length + closeText.length + actionText.length;
     const titleWidth = Math.max(0, innerWidth - contentWidth);
     const clippedTitle = truncateTitle(title, titleWidth);
-    const fillLen = Math.max(0, innerWidth - PANE_HEADER_GRIP.length - clippedTitle.length - actionText.length - closeText.length);
+    const fillLen = Math.max(0, innerWidth - PANE_HEADER_GRIP.length - displayWidth(clippedTitle) - actionText.length - closeText.length);
     const fill = "─".repeat(fillLen);
 
     return (
@@ -257,7 +255,7 @@ export function PaneHeader({
 
   const titleWidth = Math.max(0, width - PANE_HEADER_GRIP.length - actionText.length - closeText.length);
   const clippedTitle = truncateTitle(title, titleWidth);
-  const padding = " ".repeat(Math.max(0, titleWidth - clippedTitle.length));
+  const padding = " ".repeat(Math.max(0, titleWidth - displayWidth(clippedTitle)));
 
   return (
     <Box

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

@@ -16,6 +16,7 @@ interface PaneWrapperProps {
   flexGrow?: number;
   showActions?: boolean;
   onMouseDown?: (event: any) => void;
+  onMouseDownCapture?: (event: any) => void;
   onHeaderMouseMove?: (event: any) => void;
   onHeaderMouseDown?: (event: any) => void;
   onHeaderMouseDrag?: (event: any) => void;
@@ -36,6 +37,7 @@ export function PaneWrapper({
   flexGrow,
   showActions = false,
   onMouseDown,
+  onMouseDownCapture,
   onHeaderMouseMove,
   onHeaderMouseDown,
   onHeaderMouseDrag,
@@ -76,6 +78,7 @@ export function PaneWrapper({
         showBorderColor: true,
       })}
       onMouseDown={onMouseDown}
+      onMouseDownCapture={onMouseDownCapture}
     >
       {title && (
         <PaneHeader

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

@@ -0,0 +1,100 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { act } from "react";
+import { testRender } from "../../../renderers/opentui/test-utils";
+import { Text } from "../../../ui";
+import {
+  getPaneSidebarWidth,
+  PaneSidebar,
+  PaneSidebarAction,
+  PaneSidebarRow,
+  shouldShowPaneSidebar,
+} from "./sidebar";
+
+let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
+
+afterEach(async () => {
+  await act(async () => {
+    testSetup?.renderer.destroy();
+    testSetup = undefined;
+  });
+});
+
+describe("pane sidebar metrics", () => {
+  test("uses the shared responsive breakpoint and host-specific widths", () => {
+    expect(shouldShowPaneSidebar(2, 72, 8)).toBe(true);
+    expect(shouldShowPaneSidebar(1, 72, 8)).toBe(false);
+    expect(shouldShowPaneSidebar(1, 72, 8, 1)).toBe(true);
+    expect(shouldShowPaneSidebar(2, 71, 8)).toBe(false);
+    expect(shouldShowPaneSidebar(2, 72, 7)).toBe(false);
+
+    expect(getPaneSidebarWidth(72, false)).toBe(18);
+    expect(getPaneSidebarWidth(100, false)).toBe(24);
+    expect(getPaneSidebarWidth(72, true)).toBe(14);
+    expect(getPaneSidebarWidth(90, true)).toBe(17);
+    expect(getPaneSidebarWidth(200, true)).toBe(19);
+  });
+});
+
+test("renders a terminal divider and keeps nested actions from selecting their row", async () => {
+  let selections = 0;
+  let actions = 0;
+
+  await act(async () => {
+    testSetup = await testRender(
+      <PaneSidebar width={20} height={4} focused keyboardFocused>
+        <PaneSidebarRow
+          active={false}
+          ariaLabel="Alpha conversation"
+          onSelect={() => {
+            selections += 1;
+          }}
+        >
+          {({ foregroundColor, onMouseDown }) => (
+            <>
+              <Text fg={foregroundColor} onMouseDown={onMouseDown}> Alpha</Text>
+              <PaneSidebarAction
+                width={3}
+                ariaLabel="New conversation"
+                onPress={() => {
+                  actions += 1;
+                }}
+              >
+                {({ foregroundColor: actionColor, onMouseDown: onActionMouseDown }) => (
+                  <Text fg={actionColor} onMouseDown={onActionMouseDown}>+</Text>
+                )}
+              </PaneSidebarAction>
+            </>
+          )}
+        </PaneSidebarRow>
+      </PaneSidebar>,
+      { width: 24, height: 4 },
+    );
+  });
+  await act(async () => {
+    await testSetup!.renderOnce();
+  });
+
+  const frame = testSetup!.captureCharFrame();
+  const lines = frame.split("\n");
+  const row = lines.findIndex((line) => line.includes("Alpha"));
+  const labelColumn = lines[row]?.indexOf("Alpha") ?? -1;
+  const actionColumn = lines[row]?.indexOf("+") ?? -1;
+  expect(row).toBeGreaterThanOrEqual(0);
+  expect(labelColumn).toBeGreaterThanOrEqual(0);
+  expect(actionColumn).toBeGreaterThanOrEqual(0);
+  expect(lines.slice(0, 4).every((line) => line[19] === "│")).toBe(true);
+
+  await act(async () => {
+    await testSetup!.mockMouse.click(labelColumn, row);
+    await testSetup!.renderOnce();
+  });
+  expect(selections).toBe(1);
+  expect(actions).toBe(0);
+
+  await act(async () => {
+    await testSetup!.mockMouse.click(actionColumn, row);
+    await testSetup!.renderOnce();
+  });
+  expect(actions).toBe(1);
+  expect(selections).toBe(1);
+});