gloomberb 0.11.2 → 0.12.0

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

@@ -1,4 +1,4 @@
-import { Box, Span, Text, TextAttributes, contextMenuDivider, useContextMenu, useUiCapabilities } from "../../ui";
+import { Box, Text, TextAttributes, contextMenuDivider, useContextMenu, useUiCapabilities } from "../../ui";
 import { useDialog, type PromptContext } from "../../ui/dialog";
 import { useCallback, useMemo, useState } from "react";
 import { blendHex, hoverBg } from "../../theme/colors";
@@ -11,6 +11,7 @@ import {
   selectSavedLayouts,
   selectStatusBarVisible,
 } from "../../state/selectors-ui";
+import { useViewport } from "../../react/input";
 import { getSharedRegistry } from "../../plugins/registry";
 import {
   gridlockAllPanes,
@@ -20,6 +21,7 @@ import { notifyGridlockComplete } from "../../plugins/gridlock-notification";
 import { PluginSlot } from "../../react/plugins/plugin-slot";
 import type { ContextMenuItem } from "../../types/context-menu";
 import type { LayoutConfig } from "../../types/config";
+import { VERSION } from "../../version";
 import { ConfirmDialog } from "../ui/confirm-dialog";
 import { Tabs } from "../ui/tabs";
 import { useTransientLayout } from "./transient-layout";
@@ -28,6 +30,11 @@ type StatusBarEvent = { stopPropagation?: () => void; preventDefault?: () => voi
 type HoveredControl = string | null;
 type SetHoveredControl = (updater: (current: HoveredControl) => HoveredControl) => void;
 
+/** Rendered width of the Tidy Windows control, including its leading gap. */
+const TIDY_WINDOWS_COLUMNS = 15;
+/** Space held back for the `status:widget` plugin slot, which sizes itself. */
+const STATUS_WIDGET_COLUMNS = 20;
+
 type LayoutTabItem = {
   label: string;
   value: string;
@@ -45,8 +52,9 @@ type StatusBarViewProps = {
   hoveredControl: HoveredControl;
   layoutTabItems: LayoutTabItem[];
   layoutTabsWidth: number;
-  openCommandBar: (event?: StatusBarEvent) => void;
+  openChangelog?: (event?: StatusBarEvent) => void;
   openLayoutContextMenu: (index: number, event: any) => void | Promise<unknown>;
+  rightAvailableWidth: number;
   setHoveredControl: SetHoveredControl;
   showTidyWindows: boolean;
 };
@@ -58,12 +66,13 @@ function truncate(text: string, width: number): string {
   return `${text.slice(0, width - 2)}..`;
 }
 
-export function StatusBar() {
+export function StatusBar({ onOpenChangelog }: { onOpenChangelog?: (version: string) => void } = {}) {
   const { nativePaneChrome, nativeContextMenu } = useUiCapabilities();
   const { showContextMenu } = useContextMenu();
   const dialog = useDialog();
   const registry = getSharedRegistry();
   const dispatch = useAppDispatch();
+  const { width: termWidth } = useViewport();
   const layouts = useAppSelector(selectSavedLayouts);
   const activeLayoutIdx = useAppSelector(selectActiveLayoutIndex);
   const statusBarVisible = useAppSelector(selectStatusBarVisible);
@@ -143,10 +152,10 @@ export function StatusBar() {
     });
   };
 
-  const openCommandBar = (event?: StatusBarEvent) => {
+  const openChangelog = (event?: StatusBarEvent) => {
     event?.preventDefault?.();
     event?.stopPropagation?.();
-    dispatch({ type: "SET_COMMAND_BAR", open: true, query: "" });
+    onOpenChangelog?.(VERSION);
   };
 
   const requestDeleteLayout = useCallback(async (index: number) => {
@@ -263,6 +272,10 @@ export function StatusBar() {
 
   if (!statusBarVisible) return null;
 
+  const leftWidth = 1
+    + (hasMultipleLayouts ? layoutTabsWidth : 0)
+    + (showTidyWindows ? TIDY_WINDOWS_COLUMNS : 0);
+
   const viewProps: StatusBarViewProps = {
     activeLayoutIdx,
     activeLayoutValue,
@@ -273,8 +286,9 @@ export function StatusBar() {
     hoveredControl,
     layoutTabItems,
     layoutTabsWidth,
-    openCommandBar,
+    openChangelog: onOpenChangelog ? openChangelog : undefined,
     openLayoutContextMenu,
+    rightAvailableWidth: Math.max(0, termWidth - leftWidth - STATUS_WIDGET_COLUMNS),
     setHoveredControl,
     showTidyWindows,
   };
@@ -311,7 +325,9 @@ function NativeStatusBar({
     >
       <StatusBarLayoutControl nativePaneChrome {...props} />
       {showTidyWindows && <NativeTidyWindows {...props} />}
-      <StatusBarWidgets />
+      <Box flexGrow={1} minWidth={0} />
+      <StatusBarSummary nativePaneChrome {...props} />
+      <PluginSlot name="status:widget" />
     </Box>
   );
 }
@@ -336,7 +352,9 @@ function TerminalStatusBar({
     >
       <StatusBarLayoutControl nativePaneChrome={false} {...props} />
       {showTidyWindows && <TerminalTidyWindows {...props} />}
-      <StatusBarWidgets />
+      <Box flexGrow={1} minWidth={0} />
+      <StatusBarSummary nativePaneChrome={false} {...props} />
+      <PluginSlot name="status:widget" />
     </Box>
   );
 }
@@ -346,24 +364,19 @@ function StatusBarLayoutControl({
   handleLayoutSelect,
   handleLayoutReorder,
   hasMultipleLayouts,
-  hoveredControl,
   layoutTabItems,
   layoutTabsWidth,
   nativePaneChrome,
-  openCommandBar,
-  setHoveredControl,
 }: Pick<
   StatusBarViewProps,
   | "activeLayoutValue"
   | "handleLayoutSelect"
   | "handleLayoutReorder"
   | "hasMultipleLayouts"
-  | "hoveredControl"
   | "layoutTabItems"
   | "layoutTabsWidth"
-  | "openCommandBar"
-  | "setHoveredControl"
 > & { nativePaneChrome: boolean }) {
+  if (!hasMultipleLayouts) return null;
   return (
     <Box
       paddingLeft={1}
@@ -371,49 +384,76 @@ function StatusBarLayoutControl({
       flexDirection="row"
       {...(nativePaneChrome ? { alignItems: "center", gap: 1 } : {})}
     >
-      {hasMultipleLayouts ? (
-        <Box width={layoutTabsWidth} height={1}>
-          <Tabs
-            tabs={layoutTabItems}
-            activeValue={activeLayoutValue}
-            onSelect={handleLayoutSelect}
-            onReorder={handleLayoutReorder}
-            compact
-            variant="pill"
-          />
-        </Box>
-      ) : (
-        <CommandBarHint
-          hoveredControl={hoveredControl}
-          nativePaneChrome={nativePaneChrome}
-          openCommandBar={openCommandBar}
-          setHoveredControl={setHoveredControl}
+      <Box width={layoutTabsWidth} height={1}>
+        <Tabs
+          tabs={layoutTabItems}
+          activeValue={activeLayoutValue}
+          onSelect={handleLayoutSelect}
+          onReorder={handleLayoutReorder}
+          compact
+          variant="pill"
         />
-      )}
+      </Box>
     </Box>
   );
 }
 
-function CommandBarHint({
+/**
+ * The version chip, dropped when the row runs out of room. Live market status
+ * lives at the header's right edge, not here, so nothing in the status bar
+ * repeats it.
+ */
+function StatusBarSummary({
+  hoveredControl,
+  nativePaneChrome,
+  openChangelog,
+  rightAvailableWidth,
+  setHoveredControl,
+}: Pick<
+  StatusBarViewProps,
+  "hoveredControl" | "openChangelog" | "rightAvailableWidth" | "setHoveredControl"
+> & { nativePaneChrome: boolean }) {
+  const versionLabel = `v${VERSION}`;
+  if (rightAvailableWidth < versionLabel.length + 1) return null;
+  return (
+    <VersionChip
+      hoveredControl={hoveredControl}
+      label={versionLabel}
+      nativePaneChrome={nativePaneChrome}
+      openChangelog={openChangelog}
+      setHoveredControl={setHoveredControl}
+    />
+  );
+}
+
+function VersionChip({
   hoveredControl,
+  label,
   nativePaneChrome,
-  openCommandBar,
+  openChangelog,
   setHoveredControl,
-}: Pick<StatusBarViewProps, "hoveredControl" | "openCommandBar" | "setHoveredControl"> & {
+}: Pick<StatusBarViewProps, "hoveredControl" | "openChangelog" | "setHoveredControl"> & {
+  label: string;
   nativePaneChrome: boolean;
 }) {
   const colors = useThemeColors();
-  const hovered = hoveredControl === "command-bar";
+  const hovered = hoveredControl === "version";
   return (
-    <Text
-      fg={hovered ? colors.text : colors.textDim}
-      {...(!nativePaneChrome ? { bg: hovered ? hoverBg(colors) : undefined } : {})}
-      onMouseOver={() => setHoveredControl((current) => (current === "command-bar" ? current : "command-bar"))}
-      onMouseDown={openCommandBar}
-      {...(nativePaneChrome ? { "data-gloom-interactive": "true" } : {})}
-    >
-      <Span fg={colors.text}>Ctrl+P</Span> {t("command bar")}
-    </Text>
+    <Box paddingRight={1} flexShrink={0}>
+      <Text
+        fg={hovered && openChangelog ? colors.text : colors.textDim}
+        {...(!nativePaneChrome ? { bg: hovered && openChangelog ? hoverBg(colors) : undefined } : {})}
+        title={openChangelog ? tf("Open changelog for {version}", { version: label }) : undefined}
+        aria-label={openChangelog ? tf("Open changelog for {version}", { version: label }) : undefined}
+        role={openChangelog ? "button" : undefined}
+        onMouseOver={() => setHoveredControl((current) => (current === "version" ? current : "version"))}
+        onMouseDown={openChangelog}
+        {...(nativePaneChrome && openChangelog ? { "data-gloom-interactive": "true" } : {})}
+        style={openChangelog ? { cursor: "pointer" } : undefined}
+      >
+        {label}
+      </Text>
+    </Box>
   );
 }
 
@@ -459,12 +499,3 @@ function TerminalTidyWindows({
     </Box>
   );
 }
-
-function StatusBarWidgets() {
-  return (
-    <>
-      <Box flexGrow={1} />
-      <PluginSlot name="status:widget" />
-    </>
-  );
-}

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

@@ -5,30 +5,11 @@ import { blendHex } from "../../theme/colors";
 import { useThemeColors } from "../../theme/theme-context";
 import { t } from "../../i18n";
 import { Button, ListView, type ListViewItem } from "../ui";
+import { modalSurfaceStyle } from "../ui/frame";
 import type { ButtonProps } from "../ui/button";
 import { Tabs } from "../ui/tabs";
 import { TITLEBAR_OVERLAY_HEIGHT_PX } from "../layout/titlebar-overlay";
 
-function desktopSurfaceStyle(
-  borderColor: string,
-  backgroundColor: string,
-  shadowColor: string,
-  highlightColor: string,
-) {
-  return {
-    width: "min(540px, 100%)",
-    height: "auto",
-    maxHeight: "calc(100vh - 88px)",
-    padding: 14,
-    backgroundColor,
-    border: `1px solid ${borderColor}`,
-    borderRadius: 6,
-    boxShadow: `0 18px 48px color-mix(in srgb, ${shadowColor} 46%, transparent), inset 0 1px 0 color-mix(in srgb, ${highlightColor} 5%, transparent)`,
-    boxSizing: "border-box" as const,
-    overflowY: "auto" as const,
-  };
-}
-
 export function OnboardingModal({
   children,
   width = 66,
@@ -61,12 +42,7 @@ export function OnboardingModal({
       >
         <Box
           flexDirection="column"
-          style={desktopSurfaceStyle(
-            blendHex(colors.border, colors.borderFocused, 0.18),
-            blendHex(colors.panel, colors.bg, 0.12),
-            colors.bg,
-            colors.textBright,
-          )}
+          style={modalSurfaceStyle(colors)}
           data-gloom-role="onboarding-modal"
         >
           {children}

package/src/components/price-sparkline/index.ts

@@ -1,46 +1,73 @@
 import type { PricePoint } from "../../types/financials";
-import { colors } from "../../theme/colors";
-import { renderChart, resolveChartPalette, type StyledContent } from "../chart/core/renderer";
-import type { ProjectedChartPoint } from "../chart/core/data";
 
-function coercePointDate(value: PricePoint["date"]): Date {
-  return value instanceof Date ? value : new Date(value as Date | string | number);
+// Braille cells pack a 2x4 dot grid; these are the Unicode bit offsets by dot.
+const BRAILLE_DOT_BITS = [
+  [0x01, 0x02, 0x04, 0x40],
+  [0x08, 0x10, 0x20, 0x80],
+] as const;
+const BRAILLE_BASE = 0x2800;
+
+function plotLine(
+  dots: Uint8Array,
+  dotWidth: number,
+  dotHeight: number,
+  x0: number,
+  y0: number,
+  x1: number,
+  y1: number,
+): void {
+  const steps = Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0), 1);
+  for (let step = 0; step <= steps; step += 1) {
+    const x = Math.round(x0 + ((x1 - x0) * step) / steps);
+    const y = Math.round(y0 + ((y1 - y0) * step) / steps);
+    if (x >= 0 && x < dotWidth && y >= 0 && y < dotHeight) dots[y * dotWidth + x] = 1;
+  }
+}
+
+/** Draws closes as a braille line, one text row per cell row. */
+function renderBrailleSparkline(values: readonly number[], width: number, height: number): string[] {
+  const cellWidth = Math.max(1, Math.floor(width));
+  const cellHeight = Math.max(1, Math.floor(height));
+  const dotWidth = cellWidth * 2;
+  const dotHeight = cellHeight * 4;
+  const dots = new Uint8Array(dotWidth * dotHeight);
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const range = max - min || 1;
+  const toX = (index: number) => (index / Math.max(values.length - 1, 1)) * (dotWidth - 1);
+  const toY = (value: number) => (1 - (value - min) / range) * (dotHeight - 1);
+  for (let index = 1; index < values.length; index += 1) {
+    plotLine(dots, dotWidth, dotHeight, toX(index - 1), toY(values[index - 1]!), toX(index), toY(values[index]!));
+  }
+  const rows: string[] = [];
+  for (let row = 0; row < cellHeight; row += 1) {
+    let text = "";
+    for (let column = 0; column < cellWidth; column += 1) {
+      let bits = 0;
+      for (let dx = 0; dx < 2; dx += 1) {
+        for (let dy = 0; dy < 4; dy += 1) {
+          if (dots[(row * 4 + dy) * dotWidth + column * 2 + dx]) bits |= BRAILLE_DOT_BITS[dx]![dy]!;
+        }
+      }
+      text += String.fromCharCode(BRAILLE_BASE + bits);
+    }
+    rows.push(text);
+  }
+  return rows;
 }
 
+/** Text fallback for terminals without pixel graphics: the top row of a braille line. */
 export function renderPriceSparkline(
   priceHistory: PricePoint[],
   options: { width?: number; height?: number; maxPoints?: number } = {},
-): StyledContent | null {
+): string | null {
   if (priceHistory.length < 2) return null;
-
   const width = Math.max(4, Math.floor(options.width ?? 10));
   const height = Math.max(1, Math.floor(options.height ?? 1));
   const maxPoints = Math.max(1, Math.floor(options.maxPoints ?? Math.max(20, width * 2)));
-  const pointsWindow = priceHistory.slice(-maxPoints);
-  const points: ProjectedChartPoint[] = pointsWindow.map((pt) => ({
-    date: coercePointDate(pt.date),
-    open: pt.open ?? pt.close,
-    high: pt.high ?? pt.close,
-    low: pt.low ?? pt.close,
-    close: pt.close,
-    volume: pt.volume ?? 0,
-  }));
-
-  const first = pointsWindow[0]?.close ?? 0;
-  const last = pointsWindow[pointsWindow.length - 1]?.close ?? 0;
-  const trend = last > first ? "positive" : last < first ? "negative" : "neutral";
-  const palette = resolveChartPalette(colors, trend);
-
-  const result = renderChart(points, {
-    width,
-    height,
-    showVolume: false,
-    volumeHeight: 0,
-    cursorX: null,
-    cursorY: null,
-    mode: "line",
-    colors: palette,
-  });
-
-  return result.lines[0] ?? null;
+  const values = priceHistory.slice(-maxPoints)
+    .map((point) => point.close)
+    .filter((value) => Number.isFinite(value));
+  if (values.length < 2) return null;
+  return renderBrailleSparkline(values, width, height)[0] ?? null;
 }

package/src/components/price-sparkline/view.tsx

@@ -130,7 +130,7 @@ function TerminalPriceSparkline({
 
   return (
     <ChartSurface width={width} height={height} flexDirection="column" bitmaps={bitmap ? [bitmap] : null}>
-      {fallback ? <Text content={fallback} /> : null}
+      {fallback ? <Text fg={color}>{fallback}</Text> : null}
     </ChartSurface>
   );
 }

package/src/components/sign-in-gate.test.tsx

@@ -0,0 +1,128 @@
+/** @jsxImportSource react */
+import { Window } from "happy-dom";
+
+const testWindow = new Window({ url: "http://localhost" });
+const domGlobals = {
+  IS_REACT_ACT_ENVIRONMENT: true,
+  window: testWindow,
+  document: testWindow.document,
+  navigator: testWindow.navigator,
+  KeyboardEvent: testWindow.KeyboardEvent,
+  MouseEvent: testWindow.MouseEvent,
+  HTMLElement: testWindow.HTMLElement,
+  Node: testWindow.Node,
+};
+
+/** Bun shares one process across test files, so the DOM globals must not leak. */
+const priorGlobals = Object.fromEntries(
+  Object.keys(domGlobals).map((key) => [key, (globalThis as Record<string, unknown>)[key]]),
+);
+Object.assign(globalThis, domGlobals);
+
+import { afterAll, afterEach, expect, test } from "bun:test";
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { UiHostProvider, type RendererHost, type UiHost } from "../ui";
+import { WebBox } from "../renderers/electrobun/view/host/box";
+import { WebText, WebSpan } from "../renderers/electrobun/view/host/text";
+import { WebScrollBox } from "../renderers/electrobun/view/host/scroll-box";
+import { WebInput } from "../renderers/electrobun/view/host/input";
+import { WebButton, WebTextField } from "../renderers/electrobun/view/desktop/controls";
+import { WebInputHostProvider } from "../renderers/electrobun/view/input-host";
+import { useShortcut } from "../react/input";
+import { SignInGate } from "./sign-in-gate";
+
+const renderer: RendererHost = {
+  requestExit() {},
+  async openExternal() {},
+  async copyText() {},
+  async readText() { return ""; },
+  notify() {},
+};
+
+const ui = {
+  kind: "desktop-web",
+  capabilities: { cellWidthPx: 8, cellHeightPx: 18, fractionalViewport: true },
+  Box: WebBox,
+  Text: WebText,
+  Span: WebSpan,
+  ScrollBox: WebScrollBox,
+  Button: WebButton,
+  Input: WebInput,
+  TextField: WebTextField,
+  SpinnerMark: () => null,
+} as unknown as UiHost;
+
+afterAll(() => {
+  for (const [key, value] of Object.entries(priorGlobals)) {
+    if (value === undefined) delete (globalThis as Record<string, unknown>)[key];
+    else (globalThis as Record<string, unknown>)[key] = value;
+  }
+});
+
+let root: ReturnType<typeof createRoot> | undefined;
+
+afterEach(async () => {
+  if (root) {
+    await act(async () => root!.unmount());
+    root = undefined;
+  }
+});
+
+/** Stands in for the app's own global shortcuts, which register unscoped. */
+function AppShortcutSpy({ onKey }: { onKey: () => void }) {
+  useShortcut(onKey, { phase: "before", allowEditable: true });
+  return null;
+}
+
+async function renderGate(onAppKey: () => void): Promise<HTMLElement> {
+  const container = testWindow.document.createElement("div");
+  testWindow.document.body.appendChild(container);
+  root = createRoot(container as unknown as HTMLElement);
+  await act(async () => {
+    root!.render(
+      <UiHostProvider ui={ui} renderer={renderer}>
+        <WebInputHostProvider>
+          <AppShortcutSpy onKey={onAppKey} />
+          <SignInGate />
+        </WebInputHostProvider>
+      </UiHostProvider>,
+    );
+  });
+  return container as unknown as HTMLElement;
+}
+
+function pressKey(key: string, target?: Element): void {
+  const event = new testWindow.KeyboardEvent("keydown", { key, bubbles: true, cancelable: true });
+  (target ?? testWindow.document.body).dispatchEvent(event);
+}
+
+test("holds every app shortcut while the gate is up", async () => {
+  let appKeys = 0;
+  await renderGate(() => { appKeys += 1; });
+
+  await act(async () => {
+    for (const key of ["k", "Tab", "1", "?", "q", "`"]) pressKey(key);
+  });
+
+  expect(appKeys).toBe(0);
+});
+
+test("still delivers typing to the gate's own fields", async () => {
+  let appKeys = 0;
+  const container = await renderGate(() => { appKeys += 1; });
+
+  const email = container.querySelector('input[type="email"]') as HTMLInputElement | null;
+  expect(email).not.toBeNull();
+
+  await act(async () => {
+    email!.value = "trader@example.com";
+    email!.dispatchEvent(new testWindow.Event("input", { bubbles: true }) as unknown as Event);
+    pressKey("t", email!);
+  });
+
+  // The hold sits on the window listener, which fires after the field already
+  // took the key, so the value survives while the app still sees nothing.
+  expect(email!.value).toBe("trader@example.com");
+  expect(appKeys).toBe(0);
+});