gloomberb 0.9.1 → 0.9.3

package/src/components/command-bar/surface/pane.test.tsx

@@ -117,6 +117,42 @@ function registerOptionalTextPane(pluginRegistry: MutablePaneRegistry): void {
   });
 }
 
+function registerQueryOnlyPane(pluginRegistry: MutablePaneRegistry): void {
+  mutableRegistryMap(pluginRegistry.panes).set("prediction-markets", {
+    id: "prediction-markets",
+    name: "Prediction Markets",
+    component: () => null,
+    defaultPosition: "left",
+    defaultMode: "floating",
+  });
+  mutableRegistryMap(pluginRegistry.paneTemplates).set("new-prediction-markets-pane", {
+    id: "new-prediction-markets-pane",
+    paneId: "prediction-markets",
+    label: "Prediction Markets",
+    description: "Open a new prediction markets browser pane",
+    keywords: ["prediction", "markets", "polymarket", "kalshi", "events"],
+    shortcut: { prefix: "PM", argPlaceholder: "query", argKind: "text" },
+  });
+}
+
+function registerShortcutOnlyPane(pluginRegistry: MutablePaneRegistry): void {
+  mutableRegistryMap(pluginRegistry.panes).set("top-news", {
+    id: "top-news",
+    name: "Top News",
+    component: () => null,
+    defaultPosition: "right",
+    defaultMode: "floating",
+  });
+  mutableRegistryMap(pluginRegistry.paneTemplates).set("top-news-pane", {
+    id: "top-news-pane",
+    paneId: "top-news",
+    label: "Top News",
+    description: "Curated top market stories ranked by importance",
+    keywords: ["top", "news", "headlines", "stories"],
+    shortcut: { prefix: "TOP" },
+  });
+}
+
 describe("CommandBar pane and layout routes", () => {
   const layoutModeConfig = (config: AppConfig): AppConfig => {
     const research = cloneLayout(config.layout);
@@ -271,6 +307,46 @@ describe("CommandBar pane and layout routes", () => {
     expect(testSetup.captureCharFrame()).not.toContain("Create Pane");
   });
 
+  for (const scenario of [
+    {
+      query: "prediction markets",
+      register: registerQueryOnlyPane,
+      templateId: "new-prediction-markets-pane",
+    },
+    {
+      query: "top news",
+      register: registerShortcutOnlyPane,
+      templateId: "top-news-pane",
+    },
+  ] as const) {
+    test(`creates ${scenario.templateId} directly when it has no config fields`, async () => {
+      const created: CreatedPaneCall[] = [];
+
+      testSetup = await testRender(<CommandBarHarness
+        query={scenario.query}
+        live
+        configurePluginRegistry={(pluginRegistry) => {
+          scenario.register(pluginRegistry);
+          recordPaneCreations(pluginRegistry, created);
+        }}
+      />, {
+        width: 100,
+        height: 18,
+      });
+
+      await testSetup.renderOnce();
+
+      await act(async () => {
+        testSetup!.mockInput.pressEnter();
+        await Bun.sleep(0);
+        await testSetup!.renderOnce();
+      });
+
+      expect(created).toEqual([{ templateId: scenario.templateId, options: undefined }]);
+      expect(testSetup.captureCharFrame()).not.toContain("Create Pane");
+    });
+  }
+
   test("shows pane templates that share the same shortcut", async () => {
     testSetup = await testRender(<CommandBarHarness
       query="DUP"

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

@@ -26,6 +26,11 @@ export type DataTableKeyEvent = TableViewKeyEvent;
 
 const DATA_TABLE_SELECTION_COMMIT_DELAY_MS = 150;
 
+export interface DataTableRootKeyContext {
+  selectedIndex: number;
+  itemCount: number;
+}
+
 export type DataTableSelectionChangeReason =
   | "keyboard"
   | "pointer"
@@ -95,7 +100,10 @@ export interface DataTableViewProps<
   hoveredIdx?: number | null;
   setHoveredIdx?: (index: number | null) => void;
   keyboardNavigation?: boolean;
-  onRootKeyDown?: (event: DataTableKeyEvent) => boolean | void;
+  onRootKeyDown?: (
+    event: DataTableKeyEvent,
+    context: DataTableRootKeyContext,
+  ) => boolean | void;
   resetScrollKey?: unknown;
 }
 
@@ -486,7 +494,10 @@ export function DataTableView<
     if (event.defaultPrevented || event.propagationStopped) return;
     if (!focused || !keyboardNavigation) return;
 
-    if (onRootKeyDown?.(event)) return;
+    if (onRootKeyDown?.(event, {
+      selectedIndex: effectiveSelectedIndexRef.current,
+      itemCount: tableProps.items.length,
+    })) return;
     if (tableProps.items.length === 0) return;
 
     if (isNextTableRowKey(event)) {

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

@@ -6,6 +6,7 @@ import { formatTimeAgo } from "../../utils/format";
 import { isPlainKey } from "../../utils/keyboard";
 import { toTimestampMillis } from "../../utils/timestamp";
 import { DataTableStackView } from "../data-table/stack-view";
+import type { DataTableRootKeyContext } from "../data-table/view";
 import {
   activeStackIndex,
   sortIndexedStackRows,
@@ -45,9 +46,16 @@ interface FeedDataTableStackViewProps {
   rootAfter?: ReactNode;
   onRootKeyDown?: (event: {
     name?: string;
+    sequence?: string;
+    ctrl?: boolean;
+    meta?: boolean;
+    super?: boolean;
+    alt?: boolean;
+    option?: boolean;
+    shift?: boolean;
     preventDefault?: () => void;
     stopPropagation?: () => void;
-  }) => boolean | void;
+  }, context: DataTableRootKeyContext) => boolean | void;
   sourceLabel?: string;
   titleLabel?: string;
   emptyStateTitle?: string;

package/src/components/index.ts

@@ -8,7 +8,7 @@ export type { TickerListVisibleRange } from "./ticker/list-table-view";
 export { TickerBadgeList } from "./ticker/badge/list";
 export { InputSearchBar } from "./input-search-bar";
 export { DataTableView } from "./data-table/view";
-export type { DataTableKeyEvent } from "./data-table/view";
+export type { DataTableKeyEvent, DataTableRootKeyContext } from "./data-table/view";
 export { DataTableStackView } from "./data-table/stack-view";
 export { FeedDataTableStackView } from "./feed-data-table/stack-view";
 export type { FeedDataTableItem } from "./feed-data-table/stack-view";

package/src/components/input-search-bar.test.tsx

@@ -0,0 +1,103 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { act, useCallback, useRef, useState, type Dispatch, type SetStateAction } from "react";
+import { testRender } from "../renderers/opentui/test-utils";
+import { AppContext, createInitialState, type AppAction } from "../state/app/context";
+import { createDefaultConfig } from "../types/config";
+import type { InputRenderable } from "../ui";
+import { InputSearchBar } from "./input-search-bar";
+
+let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
+let setSearchActive: Dispatch<SetStateAction<boolean>> | null = null;
+
+afterEach(async () => {
+  setSearchActive = null;
+  if (!testSetup) return;
+  await act(async () => {
+    testSetup!.renderer.destroy();
+  });
+  testSetup = undefined;
+});
+
+function Harness({
+  actions,
+  onNavigateDown,
+}: {
+  actions: AppAction[];
+  onNavigateDown?: () => void;
+}) {
+  const state = createInitialState(createDefaultConfig("/tmp/gloomberb-input-search-bar"));
+  const inputRef = useRef<InputRenderable | null>(null);
+  const [active, setActive] = useState(true);
+  setSearchActive = setActive;
+  const dispatch = useCallback((action: AppAction) => {
+    actions.push(action);
+  }, [actions]);
+
+  return (
+    <AppContext value={{ state, dispatch }}>
+      <InputSearchBar
+        value=""
+        focused
+        active={active}
+        width={30}
+        focusToken={0}
+        inputRef={inputRef}
+        placeholder="search"
+        debounceMs={100}
+        onNavigateDown={onNavigateDown}
+        onFocus={() => {}}
+        onBlur={() => {}}
+        onQueryChange={() => {}}
+      />
+    </AppContext>
+  );
+}
+
+describe("InputSearchBar", () => {
+  test("captures app input while the search input is active", async () => {
+    const actions: AppAction[] = [];
+
+    testSetup = await testRender(<Harness actions={actions} />, { width: 40, height: 4 });
+    await act(async () => {
+      await testSetup!.renderOnce();
+    });
+
+    expect(actions).toEqual([{ type: "SET_INPUT_CAPTURED", captured: true }]);
+    if (!setSearchActive) throw new Error("search setter was not registered");
+
+    await act(async () => {
+      setSearchActive(false);
+      await testSetup!.renderOnce();
+    });
+
+    expect(actions).toEqual([
+      { type: "SET_INPUT_CAPTURED", captured: true },
+      { type: "SET_INPUT_CAPTURED", captured: false },
+    ]);
+  });
+
+  test("moves from the active search input to the table with Down", async () => {
+    const actions: AppAction[] = [];
+    let navigatedDown = 0;
+
+    testSetup = await testRender(
+      <Harness
+        actions={actions}
+        onNavigateDown={() => {
+          navigatedDown += 1;
+        }}
+      />,
+      { width: 40, height: 4 },
+    );
+    await act(async () => {
+      await testSetup!.renderOnce();
+    });
+
+    await act(async () => {
+      testSetup!.mockInput.pressArrow("down");
+      await testSetup!.renderOnce();
+    });
+
+    expect(navigatedDown).toBe(1);
+  });
+});

package/src/components/input-search-bar.tsx

@@ -1,6 +1,9 @@
 import { useCallback, useEffect, useState, type RefObject } from "react";
 import { Box, Input, Text, type InputRenderable } from "../ui";
 import { colors } from "../theme/colors";
+import { useAppInputCapture } from "../state/app/input-capture";
+import { useShortcut } from "../react/input";
+import { isPlainArrowDown, stopSearchFocusNavigation } from "../utils/search-focus-navigation";
 
 export function InputSearchBar({
   value,
@@ -12,6 +15,7 @@ export function InputSearchBar({
   placeholder,
   debounceMs,
   normalizeValue = identity,
+  onNavigateDown,
   onFocus,
   onBlur,
   onQueryChange,
@@ -25,11 +29,23 @@ export function InputSearchBar({
   placeholder: string;
   debounceMs: number;
   normalizeValue?: (value: string) => string;
+  onNavigateDown?: () => void;
   onFocus: () => void;
   onBlur: () => void;
   onQueryChange: (query: string) => void;
 }) {
   const [draft, setDraft] = useState(value);
+  useAppInputCapture(focused && active);
+
+  useShortcut((event) => {
+    if (!onNavigateDown || !isPlainArrowDown(event)) return;
+    stopSearchFocusNavigation(event);
+    onNavigateDown();
+  }, {
+    allowEditable: true,
+    enabled: focused && active && !!onNavigateDown,
+    phase: "before",
+  });
 
   useEffect(() => {
     setDraft(value);

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

@@ -13,7 +13,7 @@ import { PaneContent } from "./pane/content";
 import { resolvePaneBodyFrame } from "./pane/sizing";
 import { getPaneDisplayTitle } from "./pane/title";
 import { TITLEBAR_OVERLAY_HEIGHT_PX, getTitlebarLeadingInset } from "./titlebar-overlay";
-import { WindowControls } from "./window-controls";
+import { WindowControls, WINDOWS_CONTROL_GROUP_WIDTH_PX } from "./window-controls";
 import {
   createDoubleEscapeCloseState,
   recordDoubleEscapeClose,
@@ -174,8 +174,10 @@ export function DetachedPaneShell({ pluginRegistry, desktopWindowBridge }: Detac
                 alignItems="center"
                 flexGrow={1}
                 minWidth={0}
+                backgroundColor={titleBackground}
                 paddingLeft={titleBarOverlay ? titlebarLeadingInset : 1}
                 paddingRight={showWindowControls ? 0 : 1}
+                style={{ position: "relative" }}
               >
                 <Box flexGrow={1} minWidth={0} overflow="hidden">
                   <Text fg={paneTitleText(focused, true)} selectable={false} data-gloom-role="pane-title">{title}</Text>
@@ -192,7 +194,8 @@ export function DetachedPaneShell({ pluginRegistry, desktopWindowBridge }: Detac
                     {" ... "}
                   </Text>
                 )}
-                {showWindowControls ? <WindowControls /> : null}
+                {showWindowControls ? <Box flexShrink={0} width={`${WINDOWS_CONTROL_GROUP_WIDTH_PX}px`} /> : null}
+                {showWindowControls ? <WindowControls windowKind="detached" /> : null}
               </Box>
             </Box>
             <PaneBodyFrame layoutProps={bodyFrame.layoutProps} backgroundColor={background}>

package/src/components/layout/header.tsx

@@ -1,5 +1,5 @@
-import { Box, SpinnerMark, Text, TextAttributes, useUiCapabilities } from "../../ui";
-import { useEffect, type ReactNode } from "react";
+import { Box, SpinnerMark, Text, TextAttributes, useRendererHost, useUiCapabilities } from "../../ui";
+import { useCallback, useEffect, type ReactNode } from "react";
 import { blendHex, colors, priceColor } from "../../theme/colors";
 import { useThemeColors } from "../../theme/theme-context";
 import { useAppActive } from "../../state/app/activity";
@@ -18,7 +18,7 @@ import { formatMarketPrice } from "../../market-data/market/format";
 import { marketStateLabel, marketStateColor, getActiveQuoteDisplay } from "../../market-data/market/status";
 import { VERSION } from "../../version";
 import { getTitlebarLeadingInset } from "./titlebar-overlay";
-import { WindowControls } from "./window-controls";
+import { WindowControls, WINDOWS_CONTROL_GROUP_WIDTH_PX } from "./window-controls";
 
 const SPY_REFRESH_MS = 5 * 60_000; // 5 min
 const UPDATE_NOTICE_DURATION_MS = 5_000;
@@ -124,6 +124,7 @@ function UpdateStatus() {
 
 export function Header() {
   useThemeColors();
+  const rendererHost = useRendererHost();
   const baseCurrency = useAppSelector(selectBaseCurrency);
   const appActive = useAppActive();
   const { titleBarOverlay, windowControls } = useUiCapabilities();
@@ -150,6 +151,11 @@ export function Header() {
     ? `SPY ${formatMarketPrice(activeSpyQuote.price, { assetCategory: "ETF" })} ${formatPercentRaw(activeSpyQuote.changePercent)}`
     : "SPY —";
 
+  const startWindowDrag = useCallback(() => {
+    if (!titleBarOverlay) return;
+    void rendererHost.startWindowDrag?.();
+  }, [rendererHost, titleBarOverlay]);
+
   // Market status
   const mktState = spyQuote?.marketState;
   const mktLabel = mktState ? marketStateLabel(mktState) : "";
@@ -164,11 +170,12 @@ export function Header() {
         backgroundColor={colors.header}
         data-gloom-role="app-header"
         data-titlebar-overlay="true"
-        className="electrobun-webkit-app-region-drag"
+        onMouseDown={startWindowDrag}
         style={{
           boxShadow: `0 -1px 0 ${colors.header}, inset 0 1px 0 ${colors.header}`,
           paddingLeft: 8,
           paddingRight: showWindowControls ? 0 : 12,
+          position: "relative",
         }}
       >
         <Box paddingLeft={titlebarLeadingInset} flexDirection="row" alignItems="center" gap={1}>
@@ -201,6 +208,7 @@ export function Header() {
         <Box paddingRight={showWindowControls ? 1 : 0}>
           <Text fg={colors.headerText}>{baseCurrency}</Text>
         </Box>
+        {showWindowControls ? <Box flexShrink={0} width={`${WINDOWS_CONTROL_GROUP_WIDTH_PX}px`} /> : null}
         {showWindowControls ? <WindowControls /> : null}
       </Box>
     );
@@ -213,7 +221,7 @@ export function Header() {
       backgroundColor={colors.header}
       data-gloom-role="app-header"
       data-titlebar-overlay={titleBarOverlay ? "true" : undefined}
-      className={titleBarOverlay ? "electrobun-webkit-app-region-drag" : undefined}
+      onMouseDown={startWindowDrag}
     >
       <Box paddingLeft={titleBarOverlay ? titlebarLeadingInset : 1}>
         <Text attributes={TextAttributes.BOLD} fg={colors.headerText}>

package/src/components/layout/shell/active-drag.ts

@@ -4,6 +4,7 @@ import {
   getRememberedFloatingRect,
   resizeSplitAtPath,
   simulateDrop,
+  type DockGeometryOptions,
   type DockLeafLayout,
   type DropTarget,
   type LayoutBounds,
@@ -32,6 +33,7 @@ interface UseShellActiveDragOptions {
   bounds: LayoutBounds;
   contentHeight: number;
   dispatch: Dispatch<AppAction>;
+  dockGeometryOptions: DockGeometryOptions;
   dockLeafLayouts: DockLeafLayout[];
   dragRuntime: ShellDragRuntimeState;
   focusPane: (paneId: string) => void;
@@ -51,6 +53,7 @@ export function useShellActiveDrag({
   bounds,
   contentHeight,
   dispatch,
+  dockGeometryOptions,
   dockLeafLayouts,
   dragRuntime,
   focusPane,
@@ -117,7 +120,7 @@ export function useShellActiveDrag({
           const hoveredCell = hoveredOverlay.cells.find((cell) => pointInRect(cell.rect, hitX, hitShellY));
           if (hoveredCell) {
             const target: DropTarget = { kind: "leaf", targetId: hoveredOverlay.targetId, position: hoveredCell.position };
-            const simulation = simulateDrop(baseLayout, drag.paneId, target, bounds);
+            const simulation = simulateDrop(baseLayout, drag.paneId, target, bounds, dockGeometryOptions);
             if (simulation.previewRect) {
               updateDockPreview({ kind: "dock", target, rect: simulation.previewRect });
             } else {
@@ -199,6 +202,7 @@ export function useShellActiveDrag({
     bounds,
     contentHeight,
     dispatch,
+    dockGeometryOptions,
     dividerPreviewRef,
     dockLeafLayouts,
     dockPreviewRef,

package/src/components/layout/shell/drag/runtime.ts

@@ -6,8 +6,10 @@ import {
   type MutableRefObject,
   type SetStateAction,
 } from "react";
+import { useRafCallback } from "../../../../react/use-raf-callback";
 import {
   type DockDividerLayout,
+  type DockGeometryOptions,
   type DockLeafLayout,
   type FloatingRect,
   type LayoutBounds,
@@ -91,17 +93,26 @@ export function useShellDragRuntimeState({
 }): ShellDragRuntimeState {
   const dragRef = useRef<DragMode | null>(null);
   const [dragFloatingRect, setDragFloatingRect] = useState<{ paneId: string; rect: FloatingRect } | null>(null);
+  const pendingDragFloatingRectRef = useRef<{ paneId: string; rect: FloatingRect } | null>(null);
   const [dragCursor, setDragCursor] = useState<{ x: number; y: number } | null>(null);
   const [dividerPreview, setDividerPreview] = useState<DividerPreviewState | null>(null);
   const [dockPreview, setDockPreview] = useState<DragPreview | null>(null);
   const dividerPreviewRef = useRef<DividerPreviewState | null>(null);
   const dockPreviewRef = useRef<DragPreview | null>(null);
+  const flushDragFloatingRect = useRafCallback(() => {
+    setDragFloatingRect(pendingDragFloatingRectRef.current);
+  });
 
   const updateDragFloatingRect = useCallback((next: { paneId: string; rect: FloatingRect } | null) => {
-    setDragFloatingRect(next
+    pendingDragFloatingRectRef.current = next
       ? { paneId: next.paneId, rect: constrainFloatingRectToBounds(next.rect, width, contentHeight) }
-      : null);
-  }, [contentHeight, width]);
+      : null;
+    if (!next) {
+      setDragFloatingRect(null);
+      return;
+    }
+    flushDragFloatingRect();
+  }, [contentHeight, flushDragFloatingRect, width]);
 
   const updateDividerPreview = useCallback((next: DividerPreviewState | null) => {
     dividerPreviewRef.current = next;
@@ -146,6 +157,7 @@ interface UseShellPointerRuntimeOptions {
   closePaneMenu: () => void;
   contentHeight: number;
   dispatch: Dispatch<AppAction>;
+  dockGeometryOptions: DockGeometryOptions;
   dockDividerLayouts: DockDividerLayout[];
   dockLeafLayouts: DockLeafLayout[];
   dragRuntime: ShellDragRuntimeState;
@@ -166,6 +178,7 @@ interface UseShellPointerRuntimeOptions {
   setHoveredMenuItemId: Dispatch<SetStateAction<string | null>>;
   setMenuState: Dispatch<SetStateAction<ActionMenuState | null>>;
   snapGuides: ReturnType<typeof makeSnapGuides>;
+  transientFocusActive: boolean;
   updateWindowModePreviewLayout: (nextLayout: LayoutConfig, paneId?: string) => void;
   visibleFloatingPanes: VisibleFloatingPane[];
   visibleLayout: LayoutConfig;
@@ -179,6 +192,7 @@ export function useShellPointerRuntime({
   closePaneMenu,
   contentHeight,
   dispatch,
+  dockGeometryOptions,
   dockDividerLayouts,
   dockLeafLayouts,
   dragRuntime,
@@ -195,6 +209,7 @@ export function useShellPointerRuntime({
   setHoveredMenuItemId,
   setMenuState,
   snapGuides,
+  transientFocusActive,
   updateWindowModePreviewLayout,
   visibleFloatingPanes,
   visibleLayout,
@@ -206,6 +221,7 @@ export function useShellPointerRuntime({
     bounds,
     contentHeight,
     dispatch,
+    dockGeometryOptions,
     dockLeafLayouts,
     focusPane,
     dragRuntime,
@@ -237,6 +253,7 @@ export function useShellPointerRuntime({
     selectWindowModePane,
     setHoveredMenuItemId,
     setMenuState,
+    transientFocusActive,
     visibleFloatingPanes,
     width,
     windowMode,
@@ -254,6 +271,7 @@ export function useShellPointerRuntime({
     selectWindowModePane,
     setHoveredMenuItemId,
     setMenuState,
+    transientFocusActive,
     windowMode,
   });
 

package/src/components/layout/shell/fullscreen.ts

@@ -0,0 +1,10 @@
+import { isPaneInLayout } from "../../../plugins/pane-manager";
+import { cloneLayout, type LayoutConfig } from "../../../types/config";
+
+export function resolvePaneFocusSourceLayout(
+  layout: LayoutConfig,
+  paneId: string | null,
+): LayoutConfig | null {
+  if (!paneId || !isPaneInLayout(layout, paneId)) return null;
+  return cloneLayout(layout);
+}