gloomberb 0.8.2 → 0.9.0

package/src/components/ui/tabs.tsx

@@ -30,6 +30,7 @@ export interface TabsProps {
   onAdd?: () => void;
   focused?: boolean;
   keyboardNavigation?: boolean;
+  scrollable?: boolean;
 }
 
 const WHEEL_DELTA_PER_CELL = 8;
@@ -45,6 +46,7 @@ export function Tabs({
   onAdd,
   focused = false,
   keyboardNavigation = true,
+  scrollable = true,
 }: TabsProps) {
   const ui = useUiHost();
   const NativeTabs = ui.Tabs;
@@ -131,6 +133,7 @@ export function Tabs({
       closeMode={closeMode}
       addLabel={addLabel}
       onAdd={onAdd}
+      scrollable={scrollable}
       palette={palette}
     />
   );
@@ -154,6 +157,7 @@ function OpenTuiTabs({
   closeMode = "always",
   addLabel = "+",
   onAdd,
+  scrollable = true,
   palette,
 }: TabsProps & {
   palette: {
@@ -227,6 +231,96 @@ function OpenTuiTabs({
     scrollBox.scrollTo({ x: nextLeft, y: scrollBox.scrollTop });
   };
 
+  const tabRow = (
+    <Box flexDirection="row" width={totalWidth} height={1}>
+      {tabs.map((tab, index) => {
+        const active = tab.value === activeValue;
+        const hovered = hoveredValue === tab.value && !tab.disabled;
+        const tabWidth = tabWidths[index] ?? tab.label.length + 2;
+        const showClose = !!tab.onClose && (closeMode === "always" || active);
+        const attributes = (active ? TextAttributes.BOLD : 0)
+          | (variant === "underline" && !compact && (active || hovered) ? TextAttributes.UNDERLINE : 0);
+        const startHover = tab.disabled
+          ? undefined
+          : () => {
+              setHoveredValue((current) => (current === tab.value ? current : tab.value));
+            };
+        const endHover = tab.disabled
+          ? undefined
+          : () => {
+              setHoveredValue((current) => (current === tab.value ? null : current));
+            };
+        const selectTab = tab.disabled
+          ? undefined
+          : (event: TabPointerEvent) => {
+              if (event.button === 2 && tab.onContextMenu) {
+                event.preventDefault?.();
+                event.stopPropagation?.();
+                tab.onContextMenu(tab.value, event);
+                return;
+              }
+              event.preventDefault();
+              event.stopPropagation?.();
+              onSelect(tab.value);
+            };
+
+        return (
+          <Box
+            key={tab.value}
+            width={tabWidth}
+            height={1}
+            flexDirection="row"
+            backgroundColor={active && variant === "pill" ? palette.activeBg : hovered ? palette.hoverBg : undefined}
+            onMouseOver={startHover}
+            onMouseMove={startHover}
+            onMouseOut={endHover}
+            onMouseDown={selectTab}
+            onDoubleClick={tab.disabled || !tab.onDoubleClick ? undefined : () => tab.onDoubleClick?.(tab.value)}
+          >
+            <Text
+              fg={tab.disabled ? palette.disabledFg : active && variant === "pill" ? palette.activePillFg : active ? palette.activeFg : hovered ? palette.hoverFg : palette.inactiveFg}
+              attributes={attributes}
+              onMouseDown={selectTab}
+            >
+              {` ${tab.label} `}
+            </Text>
+            {showClose && (
+              <Text
+                fg={active && variant === "pill" ? palette.activePillFg : palette.closeFg}
+                onMouseDown={(event: any) => {
+                  event.preventDefault?.();
+                  event.stopPropagation?.();
+                  tab.onClose?.(tab.value);
+                }}
+              >
+                {"x "}
+              </Text>
+            )}
+          </Box>
+        );
+      })}
+      {onAdd && (
+        <Box
+          width={addWidth}
+          height={1}
+          backgroundColor={hoveredValue === "__add__" ? palette.hoverBg : undefined}
+          onMouseMove={() => setHoveredValue((current) => (current === "__add__" ? current : "__add__"))}
+          onMouseOut={() => setHoveredValue((current) => (current === "__add__" ? null : current))}
+          onMouseDown={(event: TabPointerEvent) => {
+            event.preventDefault();
+            onAdd();
+          }}
+        >
+          <Text fg={hoveredValue === "__add__" ? palette.hoverFg : palette.addFg}>
+            {` ${addLabel} `}
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+
+  if (!scrollable) return tabRow;
+
   return (
     <ScrollBox
       ref={scrollRef}
@@ -237,86 +331,7 @@ function OpenTuiTabs({
       horizontalScrollbarOptions={{ visible: false }}
       onMouseScroll={handleMouseScroll}
     >
-      <Box flexDirection="row" width={totalWidth} height={1}>
-        {tabs.map((tab, index) => {
-          const active = tab.value === activeValue;
-          const hovered = hoveredValue === tab.value && !tab.disabled;
-          const tabWidth = tabWidths[index] ?? tab.label.length + 2;
-          const showClose = !!tab.onClose && (closeMode === "always" || active);
-          const attributes = (active ? TextAttributes.BOLD : 0)
-            | (variant === "underline" && !compact && (active || hovered) ? TextAttributes.UNDERLINE : 0);
-          const startHover = tab.disabled
-            ? undefined
-            : () => {
-                setHoveredValue((current) => (current === tab.value ? current : tab.value));
-              };
-          const endHover = tab.disabled
-            ? undefined
-            : () => {
-                setHoveredValue((current) => (current === tab.value ? null : current));
-              };
-
-          return (
-            <Box
-              key={tab.value}
-              width={tabWidth}
-              height={1}
-              flexDirection="row"
-              backgroundColor={active && variant === "pill" ? palette.activeBg : hovered ? palette.hoverBg : undefined}
-              onMouseOver={startHover}
-              onMouseMove={startHover}
-              onMouseOut={endHover}
-              onMouseDown={tab.disabled ? undefined : (event: TabPointerEvent) => {
-                if (event.button === 2 && tab.onContextMenu) {
-                  event.preventDefault?.();
-                  event.stopPropagation?.();
-                  tab.onContextMenu(tab.value, event);
-                  return;
-                }
-                event.preventDefault();
-                onSelect(tab.value);
-              }}
-              onDoubleClick={tab.disabled || !tab.onDoubleClick ? undefined : () => tab.onDoubleClick?.(tab.value)}
-            >
-              <Text
-                fg={tab.disabled ? palette.disabledFg : active && variant === "pill" ? palette.activePillFg : active ? palette.activeFg : hovered ? palette.hoverFg : palette.inactiveFg}
-                attributes={attributes}
-              >
-                {` ${tab.label} `}
-              </Text>
-              {showClose && (
-                <Text
-                  fg={active && variant === "pill" ? palette.activePillFg : palette.closeFg}
-                  onMouseDown={(event: any) => {
-                    event.preventDefault?.();
-                    event.stopPropagation?.();
-                    tab.onClose?.(tab.value);
-                  }}
-                >
-                  {"x "}
-                </Text>
-              )}
-            </Box>
-          );
-        })}
-        {onAdd && (
-          <Box
-            width={addWidth}
-            height={1}
-            backgroundColor={hoveredValue === "__add__" ? palette.hoverBg : undefined}
-            onMouseMove={() => setHoveredValue((current) => (current === "__add__" ? current : "__add__"))}
-            onMouseOut={() => setHoveredValue((current) => (current === "__add__" ? null : current))}
-            onMouseDown={(event: TabPointerEvent) => {
-              event.preventDefault();
-              onAdd();
-            }}
-          >
-            <Text fg={hoveredValue === "__add__" ? palette.hoverFg : palette.addFg}>
-              {` ${addLabel} `}
-            </Text>
-          </Box>
-        )}
-      </Box>
+      {tabRow}
     </ScrollBox>
   );
 }

package/src/components/ui/ui.test.tsx

@@ -360,6 +360,60 @@ describe("shared UI kit", () => {
     expect(lastSelected).toBe("chart");
   });
 
+  test("selects tabs by clicking their text labels", async () => {
+    let lastSelected = "overview";
+    const selectedValues: string[] = [];
+
+    function PointerTabsHarness() {
+      const [activeValue, setActiveValue] = useState("overview");
+      return (
+        <Tabs
+          tabs={[
+            { label: "Overview", value: "overview" },
+            { label: "News", value: "news" },
+            { label: "Chart", value: "chart" },
+          ]}
+          activeValue={activeValue}
+          onSelect={(value) => {
+            lastSelected = value;
+            selectedValues.push(value);
+            setActiveValue(value);
+          }}
+          scrollable={false}
+        />
+      );
+    }
+
+    testSetup = await testRender(<PointerTabsHarness />, { width: 40, height: 4 });
+
+    await act(async () => {
+      await testSetup!.renderOnce();
+    });
+
+    let frame = testSetup.captureCharFrame();
+    const newsCol = frame.split("\n")[0]!.indexOf("News");
+    expect(newsCol).toBeGreaterThanOrEqual(0);
+
+    await act(async () => {
+      await testSetup!.mockMouse.click(newsCol + 1, 0);
+      await testSetup!.renderOnce();
+    });
+
+    expect(lastSelected).toBe("news");
+
+    frame = testSetup.captureCharFrame();
+    const chartCol = frame.split("\n")[0]!.indexOf("Chart");
+    expect(chartCol).toBeGreaterThanOrEqual(0);
+
+    await act(async () => {
+      await testSetup!.mockMouse.click(chartCol + 1, 0);
+      await testSetup!.renderOnce();
+    });
+
+    expect(selectedValues).toEqual(["news", "chart"]);
+    expect(lastSelected).toBe("chart");
+  });
+
   test("renders tab actions for editable tab sets", async () => {
     testSetup = await testRender(
       <Tabs

package/src/core/state/app/types.ts

@@ -26,10 +26,18 @@ export interface CollectionSortPreference {
   direction: SortDirection;
 }
 
-interface CommandBarLaunchRequest {
+interface CommandBarLaunchRequestBase {
+  sequence: number;
+}
+
+interface CommandBarPluginLaunchRequest extends CommandBarLaunchRequestBase {
   kind: "plugin-command";
   commandId: string;
-  sequence: number;
+}
+
+interface CommandBarTickerSearchLaunchRequest extends CommandBarLaunchRequestBase {
+  kind: "ticker-search";
+  query?: string;
 }
 
 export interface AppState {
@@ -44,7 +52,7 @@ export interface AppState {
   recentTickers: string[];
   commandBarOpen: boolean;
   commandBarQuery: string;
-  commandBarLaunchRequest: CommandBarLaunchRequest | null;
+  commandBarLaunchRequest: CommandBarPluginLaunchRequest | CommandBarTickerSearchLaunchRequest | null;
   themePreview: string | null;
   refreshing: Set<string>;
   initialized: boolean;
@@ -74,7 +82,7 @@ export type AppAction =
       type: "SET_COMMAND_BAR";
       open: boolean;
       query?: string;
-      launch?: { kind: "plugin-command"; commandId: string } | null;
+      launch?: { kind: "plugin-command"; commandId: string } | { kind: "ticker-search"; query?: string } | null;
     }
   | { type: "SET_COMMAND_BAR_QUERY"; query: string }
   | { type: "SET_REFRESHING"; symbol: string; refreshing: boolean }

package/src/plugins/builtin/chat/content/channel-navigation.ts

@@ -1,12 +1,15 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { Dispatch, MutableRefObject, SetStateAction } from "react";
 import type { ChatChannel, ChatUserSummary } from "../../../../api-client";
+import { useThrottledCommitValue } from "../../../../react/use-throttled-commit-value";
 import {
   DEFAULT_CHAT_CHANNEL_ID,
   normalizeChannelId,
 } from "../channels";
 import type { ChatContentController } from "./types";
 
+const CHANNEL_NAVIGATION_COMMIT_DELAY_MS = 150;
+
 function isConversationChannelId(channelId: string): boolean {
   return channelId.startsWith("dm:") || channelId.startsWith("grp:") || channelId.startsWith("group:");
 }
@@ -38,15 +41,16 @@ export function useChatChannelNavigation({
   resetTranscriptSelection: () => void;
   showChannelSidebar: boolean;
 }): {
-  changeChannel: (nextChannelId: string) => void;
   cycleChannel: (direction: 1 | -1) => boolean;
   directExpanded: boolean;
   focusChannelSidebar: () => boolean;
   focusChatContent: () => boolean;
   moveSidebarChannelSelection: (direction: "up" | "down") => boolean;
   openDirectMessage: (target: ChatUserSummary) => Promise<void>;
+  selectSidebarChannel: (channelId: string) => void;
   setDirectExpanded: Dispatch<SetStateAction<boolean>>;
   setSidebarFocused: (nextFocused: boolean) => void;
+  sidebarCursorChannelId: string;
   sidebarFocused: boolean;
   sidebarFocusedRef: MutableRefObject<boolean>;
 } {
@@ -70,6 +74,13 @@ export function useChatChannelNavigation({
     resetTranscriptSelection();
     onChannelChange?.(normalized);
   }, [channelIdRef, onChannelChange, resetTranscriptSelection]);
+  const {
+    value: sidebarCursorChannelId,
+    valueRef: sidebarCursorChannelIdRef,
+    setValue: setSidebarCursorChannelId,
+    flushValue: flushSidebarCursorChannelId,
+    replaceValue: replaceSidebarCursorChannelId,
+  } = useThrottledCommitValue(channelId, changeChannel, CHANNEL_NAVIGATION_COMMIT_DELAY_MS);
 
   const openDirectMessage = useCallback(async (target: ChatUserSummary) => {
     if (!target.id && !target.username) return;
@@ -79,10 +90,10 @@ export function useChatChannelNavigation({
         username: target.username ?? undefined,
       });
       setDirectExpanded(true);
-      changeChannel(channel.id);
+      setSidebarCursorChannelId(channel.id, { immediate: true });
       closeProfilePopover();
     } catch {}
-  }, [changeChannel, closeProfilePopover, controller]);
+  }, [closeProfilePopover, controller, setSidebarCursorChannelId]);
 
   useEffect(() => {
     if (!onChannelChange || channelsLoading || channels.length === 0) return;
@@ -109,9 +120,9 @@ export function useChatChannelNavigation({
     const nextIndex = (currentIndex + direction + channels.length) % channels.length;
     const nextChannel = channels[nextIndex];
     if (!nextChannel) return false;
-    changeChannel(nextChannel.id);
+    setSidebarCursorChannelId(nextChannel.id, { immediate: true });
     return true;
-  }, [changeChannel, channelIdRef, channels, onChannelChange]);
+  }, [channelIdRef, channels, onChannelChange, setSidebarCursorChannelId]);
 
   const focusChannelSidebar = useCallback(() => {
     if (!showChannelSidebar || !onChannelChange) return false;
@@ -119,28 +130,49 @@ export function useChatChannelNavigation({
       blurInput();
     }
     resetTranscriptSelection();
+    replaceSidebarCursorChannelId(channelId);
     setSidebarFocused(true);
     return true;
-  }, [blurInput, inputFocused, onChannelChange, resetTranscriptSelection, setSidebarFocused, showChannelSidebar]);
+  }, [
+    blurInput,
+    channelId,
+    inputFocused,
+    onChannelChange,
+    replaceSidebarCursorChannelId,
+    resetTranscriptSelection,
+    setSidebarFocused,
+    showChannelSidebar,
+  ]);
 
   const focusChatContent = useCallback(() => {
     if (!showChannelSidebar) return false;
+    flushSidebarCursorChannelId(sidebarCursorChannelIdRef.current);
     setSidebarFocused(false);
     return true;
-  }, [setSidebarFocused, showChannelSidebar]);
+  }, [flushSidebarCursorChannelId, setSidebarFocused, showChannelSidebar, sidebarCursorChannelIdRef]);
 
   const moveSidebarChannelSelection = useCallback((direction: "up" | "down") => {
     if (!showChannelSidebar || sidebarNavigationChannels.length <= 1 || !onChannelChange) return false;
-    const currentIndex = sidebarNavigationChannels.findIndex((channel) => channel.id === channelIdRef.current);
+    const currentIndex = sidebarNavigationChannels.findIndex((channel) => channel.id === sidebarCursorChannelIdRef.current);
     const baseIndex = currentIndex >= 0 ? currentIndex : 0;
     const nextIndex = direction === "down"
       ? Math.min(baseIndex + 1, sidebarNavigationChannels.length - 1)
       : Math.max(baseIndex - 1, 0);
     const nextChannel = sidebarNavigationChannels[nextIndex];
     if (!nextChannel || nextIndex === baseIndex) return true;
-    changeChannel(nextChannel.id);
+    setSidebarCursorChannelId(nextChannel.id);
     return true;
-  }, [changeChannel, channelIdRef, onChannelChange, showChannelSidebar, sidebarNavigationChannels]);
+  }, [
+    onChannelChange,
+    setSidebarCursorChannelId,
+    showChannelSidebar,
+    sidebarCursorChannelIdRef,
+    sidebarNavigationChannels,
+  ]);
+
+  const selectSidebarChannel = useCallback((nextChannelId: string) => {
+    setSidebarCursorChannelId(nextChannelId, { immediate: true });
+  }, [setSidebarCursorChannelId]);
 
   useEffect(() => {
     if (focused && showChannelSidebar) return;
@@ -148,15 +180,16 @@ export function useChatChannelNavigation({
   }, [focused, setSidebarFocused, showChannelSidebar]);
 
   return {
-    changeChannel,
     cycleChannel,
     directExpanded,
     focusChannelSidebar,
     focusChatContent,
     moveSidebarChannelSelection,
     openDirectMessage,
+    selectSidebarChannel,
     setDirectExpanded,
     setSidebarFocused,
+    sidebarCursorChannelId,
     sidebarFocused,
     sidebarFocusedRef,
   };

package/src/plugins/builtin/chat/content/index.tsx

@@ -212,15 +212,16 @@ export function ChatContent({
   });
 
   const {
-    changeChannel,
     cycleChannel,
     directExpanded,
     focusChannelSidebar,
     focusChatContent,
     moveSidebarChannelSelection,
     openDirectMessage,
+    selectSidebarChannel,
     setDirectExpanded,
     setSidebarFocused,
+    sidebarCursorChannelId,
     sidebarFocused,
     sidebarFocusedRef,
   } = useChatChannelNavigation({
@@ -367,7 +368,7 @@ export function ChatContent({
         <ChannelSidebar
           channels={channels}
           channelStates={channelStates}
-          activeChannelId={channelId}
+          activeChannelId={sidebarFocused ? sidebarCursorChannelId : channelId}
           onlineCount={onlineCount}
           width={channelSidebarWidth}
           height={height}
@@ -376,7 +377,7 @@ export function ChatContent({
           loading={channelsLoading}
           canManageNotifications={!!user?.emailVerified}
           directExpanded={directExpanded}
-          onSelect={changeChannel}
+          onSelect={selectSidebarChannel}
           onFocusRequest={() => setSidebarFocused(true)}
           onToggleNotifications={(nextChannelId, enabled) => {
             controller.setChannelNotificationsEnabled(nextChannelId, enabled);
@@ -392,7 +393,7 @@ export function ChatContent({
         flexGrow={nativePaneChrome ? 1 : undefined}
         backgroundColor={chatContentBg}
         position="relative"
-        onMouseDown={() => setSidebarFocused(false)}
+        onMouseDown={() => focusChatContent()}
         style={nativeFillStyle}
       >
       {!nativePaneChrome && (

package/src/plugins/builtin/chat/content/shortcuts.ts

@@ -75,6 +75,13 @@ export function useChatContentShortcuts({
     const isEnterKey = event.name === "return" || event.name === "enter";
 
     if (sidebarFocusedRef.current && showChannelSidebar) {
+      if (isEnterKey) {
+        event.preventDefault?.();
+        event.stopPropagation?.();
+        focusChatContent();
+        return;
+      }
+
       if (isPlainKey(event, "left")) {
         event.preventDefault?.();
         event.stopPropagation?.();

package/src/plugins/builtin/chat/sidebar.test.tsx

@@ -9,6 +9,7 @@ import { PluginRenderProvider } from "../../runtime";
 import { gloomberbCloudPlugin } from "../cloud";
 import { ChatContent } from "../chat";
 import { chatController } from "./controller";
+import { useChatChannelNavigation } from "./content/channel-navigation";
 import {
   cleanupChatTest,
   createChatTestControls,
@@ -285,6 +286,76 @@ describe("ChatContent channel sidebar", () => {
     expect(setup().captureCharFrame()).toContain("#equities");
   });
 
+  test("coalesces rapid sidebar navigation to the final channel", async () => {
+    const controller = createController({ sessionToken: "token-123" });
+    const channels = [
+      { id: "everyone", name: "everyone", created_at: "2026-03-26T12:10:05.684Z" },
+      { id: "equities", name: "equities", created_at: "2026-05-09T00:00:00.000Z" },
+      { id: "options", name: "options", created_at: "2026-05-09T00:00:00.000Z" },
+      { id: "macro", name: "macro", created_at: "2026-05-09T00:00:00.000Z" },
+      { id: "crypto", name: "crypto", created_at: "2026-05-09T00:00:00.000Z" },
+    ];
+    const channelChanges: string[] = [];
+    let navigation: ReturnType<typeof useChatChannelNavigation> | null = null;
+    let latestCursorChannelId = "";
+    let latestCommittedChannelId = "";
+
+    function NavigationHarness() {
+      const [channelId, setChannelId] = useState("equities");
+      const channelIdRef = useRef(channelId);
+      channelIdRef.current = channelId;
+      const handleChannelChange = useCallback((nextChannelId: string) => {
+        channelChanges.push(nextChannelId);
+        setChannelId(nextChannelId);
+      }, []);
+      navigation = useChatChannelNavigation({
+        blurInput: () => {},
+        channelId,
+        channelIdRef,
+        channels,
+        channelsLoading: false,
+        closeProfilePopover: () => {},
+        controller,
+        focused: true,
+        inputFocused: false,
+        onChannelChange: handleChannelChange,
+        resetTranscriptSelection: () => {},
+        showChannelSidebar: true,
+      });
+      latestCursorChannelId = navigation.sidebarCursorChannelId;
+      latestCommittedChannelId = channelId;
+
+      return null;
+    }
+
+    await act(async () => {
+      testSetup = await testRender(<NavigationHarness />, {
+        width: 90,
+        height: 12,
+      });
+    });
+
+    await act(async () => {
+      navigation?.focusChannelSidebar();
+      navigation?.moveSidebarChannelSelection("down");
+      navigation?.moveSidebarChannelSelection("down");
+      navigation?.moveSidebarChannelSelection("down");
+      await setup().renderOnce();
+    });
+
+    expect(latestCursorChannelId).toBe("crypto");
+    expect(latestCommittedChannelId).toBe("equities");
+    expect(channelChanges).toEqual([]);
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 180));
+      await setup().renderOnce();
+    });
+
+    expect(channelChanges).toEqual(["crypto"]);
+    expect(latestCommittedChannelId).toBe("crypto");
+  });
+
   test("keeps the channel sidebar visible while a channel loads", async () => {
     const controller = createController({ sessionToken: "token-123" });
     installServerChannels(controller);

package/src/plugins/builtin/help/components.tsx

@@ -29,7 +29,7 @@ export function ShortcutRow({
   return (
     <Box flexDirection="row" gap={1}>
       <Box flexDirection="row" gap={1} flexShrink={0}>
-        {badges.map((badge) => <ShortcutBadge key={badge} label={badge} />)}
+        {badges.map((badge, index) => <ShortcutBadge key={`${badge}:${index}`} label={badge} />)}
       </Box>
       <Box flexGrow={1}>
         <Text fg={colors.text} wrapText>{description}</Text>