gloomberb 0.6.0 → 0.7.0

package/src/components/index.ts

@@ -1,6 +1,8 @@
 
 export { PriceSelectorDialog } from "./price-selector-dialog";
 export { StaticChartSurface } from "./chart/static-chart-surface";
+export { SpeedometerGauge } from "./speedometer-gauge";
+export type { SpeedometerSegment } from "./speedometer-gauge";
 export type { QuoteFlashDirection } from "./ticker-list-table";
 export { TickerListTableView } from "./ticker-list-table-view";
 export type { TickerListVisibleRange } from "./ticker-list-table-view";
@@ -10,14 +12,16 @@ export type { DataTableKeyEvent } 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";
-export { usePaneFooter } from "./layout/pane-footer";
+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 { useExternalLinkFooter } from "./use-external-link-footer";
 export { Button } from "./ui/button";
+export { ConfirmDialog } from "./ui/confirm-dialog";
 export { ChoiceDialog } from "./ui/choice-dialog";
 export type { ChoiceDialogChoice, ChoiceDialogProps } from "./ui/choice-dialog";
 export type { DataTableCell, DataTableColumn } from "./ui/data-table";
-export { DialogFrame } from "./ui/frame";
 export { EmptyState } from "./ui/status";
 export { getMessageComposerBlockHeight, MessageComposer } from "./ui/message-composer";
 export { NumberField, TextField } from "./ui/fields";

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

@@ -30,6 +30,24 @@ interface FloatingPaneWrapperProps {
   children: ReactNode;
 }
 
+function TerminalFloatingPaneBorder({ width, height }: { width: number; height: number }) {
+  const borderWidth = Math.max(0, Math.floor(width));
+  const borderHeight = Math.max(0, Math.floor(height));
+  const bodyHeight = Math.max(0, borderHeight - 2);
+  if (borderWidth < 2 || bodyHeight <= 0) return null;
+
+  return (
+    <>
+      <Box position="absolute" top={1} left={0} width={1} height={bodyHeight}>
+        <Text fg={colors.border} selectable={false}>{"│".repeat(bodyHeight)}</Text>
+      </Box>
+      <Box position="absolute" top={1} left={borderWidth - 1} width={1} height={bodyHeight}>
+        <Text fg={colors.border} selectable={false}>{"│".repeat(bodyHeight)}</Text>
+      </Box>
+    </>
+  );
+}
+
 /** Pure visual wrapper; Shell owns the interaction state and supplies handlers. */
 export function FloatingPaneWrapper({
   paneId,
@@ -101,7 +119,17 @@ export function FloatingPaneWrapper({
         {children}
       </Box>
 
-      {reserveFooter && <PaneFooterBar footer={footer} focused={focused} width={width} reserveRight={2} />}
+      {reserveFooter && (
+        <PaneFooterBar
+          footer={footer}
+          focused={focused}
+          width={width}
+          reserveRight={2}
+          showBorder={!nativePaneChrome && !focused}
+        />
+      )}
+
+      {!nativePaneChrome && !focused && <TerminalFloatingPaneBorder width={width} height={height} />}
 
       {nativePaneChrome ? (
         <Box
@@ -117,7 +145,7 @@ export function FloatingPaneWrapper({
         />
       ) : (
         <Box position="absolute" bottom={0} right={0} width={2} height={1}>
-          <Text fg={focused ? colors.borderFocused : colors.textDim} selectable={false}>{focused ? "─◢" : " ◢"}</Text>
+          <Text fg={focused ? colors.borderFocused : colors.border} selectable={false}>{"─◢"}</Text>
         </Box>
       )}
     </Box>

package/src/components/layout/header.tsx

@@ -1,6 +1,6 @@
 import { Box, SpinnerMark, Text, TextAttributes, useUiCapabilities } from "../../ui";
 import { useEffect, type ReactNode } from "react";
-import { colors, priceColor } from "../../theme/colors";
+import { blendHex, colors, priceColor } from "../../theme/colors";
 import { useAppActive } from "../../state/app-activity";
 import { useAppDispatch, useAppSelector } from "../../state/app-context";
 import {
@@ -23,8 +23,8 @@ const UPDATE_NOTICE_DURATION_MS = 5_000;
 
 function DesktopHeaderPill({
   children,
-  backgroundColor = "rgba(8, 12, 15, 0.34)",
-  borderColor = "rgba(132, 145, 161, 0.22)",
+  backgroundColor = blendHex(colors.header, colors.bg, 0.28),
+  borderColor = blendHex(colors.border, colors.headerText, 0.22),
 }: {
   children: ReactNode;
   backgroundColor?: string;
@@ -173,8 +173,8 @@ export function Header() {
             Gloomberb
           </Text>
           <DesktopHeaderPill
-            backgroundColor="rgba(84, 201, 159, 0.12)"
-            borderColor="rgba(84, 201, 159, 0.28)"
+            backgroundColor={blendHex(colors.header, colors.headerText, 0.1)}
+            borderColor={blendHex(colors.border, colors.headerText, 0.28)}
           >
             <Text fg={colors.headerText} style={{ fontSize: 11 }}>v{VERSION}</Text>
           </DesktopHeaderPill>
@@ -184,8 +184,11 @@ export function Header() {
         </Box>
         {mktLabel ? (
           <Box paddingRight={1}>
-            <DesktopHeaderPill borderColor="rgba(132, 145, 161, 0.18)">
-              <Text fg={mktColor}>{mktLabel}</Text>
+            <DesktopHeaderPill
+              backgroundColor={blendHex(colors.header, mktColor, 0.12)}
+              borderColor={blendHex(colors.border, mktColor, 0.3)}
+            >
+              <Text fg={mktColor} style={{ fontSize: 11, fontWeight: 700 }}>{mktLabel}</Text>
             </DesktopHeaderPill>
           </Box>
         ) : null}

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

@@ -1,5 +1,6 @@
 import { memo, useCallback } from "react";
 import { PaneInstanceProvider } from "../../state/app-context";
+import { PaneKeyboardScrollController } from "../../state/pane-scroll-registry";
 import type { PaneDef } from "../../types/plugin";
 
 interface PaneContentProps {
@@ -27,6 +28,7 @@ export const PaneContent = memo(function PaneContent({
 
   return (
     <PaneInstanceProvider paneId={paneId}>
+      <PaneKeyboardScrollController paneId={paneId} focused={focused} />
       <Component
         paneId={paneId}
         paneType={paneType}

package/src/components/layout/pane-cycle-order.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, test } from "bun:test";
+import type { PluginRegistry } from "../../plugins/registry";
+import { createDefaultConfig } from "../../types/config";
+import { getVisiblePaneCycleOrder } from "./pane-cycle-order";
+
+function createRegistry(options: {
+  paneIds: readonly string[];
+  disabledPaneIds?: Record<string, readonly string[]>;
+}): PluginRegistry {
+  return {
+    panes: new Map(options.paneIds.map((paneId) => [paneId, {}])),
+    getPluginPaneIds: (pluginId: string) => [...(options.disabledPaneIds?.[pluginId] ?? [])],
+  } as unknown as PluginRegistry;
+}
+
+describe("getVisiblePaneCycleOrder", () => {
+  test("skips disabled and unregistered panes when cycling focus", () => {
+    const config = createDefaultConfig("/tmp/gloomberb-pane-cycle-order");
+    const registry = createRegistry({
+      paneIds: ["portfolio-list", "chat", "ticker-detail"],
+      disabledPaneIds: { chat: ["chat"] },
+    });
+
+    expect(getVisiblePaneCycleOrder(config.layout, registry, ["chat"])).toEqual([
+      "portfolio-list:main",
+      "ticker-detail:main",
+      "ticker-detail:nvda",
+    ]);
+  });
+});

package/src/components/layout/pane-cycle-order.ts

@@ -0,0 +1,32 @@
+import { getDockedPaneIds } from "../../plugins/pane-manager";
+import type { PluginRegistry } from "../../plugins/registry";
+import { findPaneInstance, type LayoutConfig } from "../../types/config";
+
+function disabledPaneTypes(pluginRegistry: PluginRegistry, disabledPlugins: readonly string[]): Set<string> {
+  const paneTypes = new Set<string>();
+  for (const pluginId of disabledPlugins) {
+    for (const paneId of pluginRegistry.getPluginPaneIds(pluginId)) {
+      paneTypes.add(paneId);
+    }
+  }
+  return paneTypes;
+}
+
+export function getVisiblePaneCycleOrder(
+  layout: LayoutConfig,
+  pluginRegistry: PluginRegistry,
+  disabledPlugins: readonly string[],
+): string[] {
+  const disabledTypes = disabledPaneTypes(pluginRegistry, disabledPlugins);
+  const isVisiblePane = (instanceId: string) => {
+    const instance = findPaneInstance(layout, instanceId);
+    return !!instance
+      && !disabledTypes.has(instance.paneId)
+      && pluginRegistry.panes.has(instance.paneId);
+  };
+
+  return [
+    ...getDockedPaneIds(layout),
+    ...layout.floating.map((entry) => entry.instanceId),
+  ].filter(isVisiblePane);
+}

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

@@ -158,6 +158,21 @@ export function PaneFooterProvider({
   );
 }
 
+export function PaneFooterScope({
+  active,
+  children,
+}: {
+  active: boolean;
+  children: ReactNode;
+}) {
+  const context = useContext(PaneFooterContext);
+  return (
+    <PaneFooterContext.Provider value={active ? context : null}>
+      {children}
+    </PaneFooterContext.Provider>
+  );
+}
+
 export function usePaneFooter(
   registrationId: string,
   factory: () => PaneFooterRegistration | null | undefined,
@@ -342,17 +357,24 @@ export function PaneFooterBar({
   focused,
   width = 0,
   reserveRight = 0,
+  showBorder = false,
 }: {
   footer?: CombinedPaneFooter | null;
   focused: boolean;
   width?: number;
   reserveRight?: number;
+  showBorder?: boolean;
 }) {
   const { nativePaneChrome } = useUiCapabilities();
   const resolvedFooter = footer ?? EMPTY_FOOTER;
   const empty = !hasPaneFooterContent(resolvedFooter);
   const borderColor = focused ? colors.borderFocused : colors.border;
   const topBorderColor = colors.border;
+  const nativeBackgroundColor = empty
+    ? "transparent"
+    : focused
+      ? blendHex(colors.bg, colors.borderFocused, 0.06)
+      : blendHex(colors.panel, colors.border, 0.12);
   const reservedRight = Math.max(0, reserveRight);
   const rightPadding = reservedRight > 0 ? reservedRight : 1;
 
@@ -370,7 +392,7 @@ export function PaneFooterBar({
         style={{
           "--pane-footer-border-color": empty ? "transparent" : topBorderColor,
           borderTop: `1px solid ${empty ? "transparent" : topBorderColor}`,
-          backgroundColor: empty ? "transparent" : focused ? "rgba(84, 201, 159, 0.05)" : "rgba(20, 25, 30, 0.55)",
+          backgroundColor: nativeBackgroundColor,
           boxShadow: empty ? "none" : "inset 0 1px 0 rgba(255,255,255,0.03)",
         }}
       >
@@ -384,15 +406,15 @@ export function PaneFooterBar({
     );
   }
 
-  if (focused) {
+  if (focused || showBorder) {
     const contentWidth = Math.max(0, Math.floor(width) - 1 - reservedRight - (reservedRight > 0 ? 0 : 1));
     return (
-      <Box height={1} width={width} flexDirection="row" data-gloom-role="pane-footer" data-focused="true" data-empty={empty ? "true" : "false"}>
+      <Box height={1} width={width} flexDirection="row" data-gloom-role="pane-footer" data-focused={focused ? "true" : "false"} data-empty={empty ? "true" : "false"}>
         <Text fg={borderColor} selectable={false}>└</Text>
         <Box width={contentWidth} height={1} overflow="hidden">
           {empty
             ? <Text fg={borderColor} selectable={false}>{"─".repeat(contentWidth)}</Text>
-            : <FooterContent footer={resolvedFooter} focused width={contentWidth} />}
+            : <FooterContent footer={resolvedFooter} focused={focused} width={contentWidth} />}
         </Box>
         {reservedRight === 0 && <Text fg={borderColor} selectable={false}>┘</Text>}
       </Box>

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

@@ -108,7 +108,6 @@ export function PaneHeader({
   const backgroundColor = floating ? floatingPaneTitleBg(focused) : paneTitleBg(focused);
   const actionText = showActions ? PANE_HEADER_ACTION : "     ";
   const closeText = floating ? PANE_HEADER_CLOSE : "";
-  const bc = colors.borderFocused;
   const textColor = paneTitleText(focused, floating);
 
   if (nativePaneChrome) {
@@ -184,9 +183,10 @@ export function PaneHeader({
     );
   }
 
-  if (focused) {
+  if (focused || floating) {
     // Build: ┌─:: Title ─────────── ... x─┐
     // Reserve 2 for corners, 1 for ─ after ┌, 1 for ─ before ┐
+    const borderColor = focused ? colors.borderFocused : colors.border;
     const innerWidth = Math.max(0, width - 4);
     const contentWidth = PANE_HEADER_GRIP.length + closeText.length + actionText.length;
     const titleWidth = Math.max(0, innerWidth - contentWidth);
@@ -196,9 +196,9 @@ export function PaneHeader({
 
     return (
       <Box height={PANE_HEADER_HEIGHT} width={width} backgroundColor={backgroundColor} flexDirection="row">
-        <Text fg={bc} selectable={false}>{"┌─"}</Text>
+        <Text fg={borderColor} selectable={false}>{"┌─"}</Text>
         <Text fg={textColor} selectable={false}>{`${PANE_HEADER_GRIP}${clippedTitle}`}</Text>
-        <Text fg={bc} selectable={false}>{fill}</Text>
+        <Text fg={borderColor} selectable={false}>{fill}</Text>
         <TerminalPaneButton
           text={actionText}
           fg={textColor}
@@ -213,7 +213,7 @@ export function PaneHeader({
             onMouseDown={onCloseMouseDown}
           />
         )}
-        <Text fg={bc} selectable={false}>{"─┐"}</Text>
+        <Text fg={borderColor} selectable={false}>{"─┐"}</Text>
       </Box>
     );
   }

package/src/components/layout/pane-keyboard-scroll.test.tsx

@@ -0,0 +1,226 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { act, useReducer, type ReactNode } from "react";
+import { testRender } from "../../renderers/opentui/test-utils";
+import { useShortcut } from "../../react/input";
+import { AppContext, appReducer, createInitialState } from "../../state/app-context";
+import { Box, ScrollBox, Text, type ScrollBoxRenderable } from "../../ui";
+import { DataTableStackView } from "../data-table-stack-view";
+import { type DataTableColumn } from "../ui";
+import { createDefaultConfig } from "../../types/config";
+import type { PaneProps } from "../../types/plugin";
+import { PaneContent } from "./pane-content";
+
+let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
+let scrollRef: ScrollBoxRenderable | null = null;
+let hiddenScrollRef: ScrollBoxRenderable | null = null;
+
+afterEach(() => {
+  if (testSetup) {
+    act(() => {
+      testSetup!.renderer.destroy();
+    });
+    testSetup = undefined;
+  }
+  scrollRef = null;
+  hiddenScrollRef = null;
+});
+
+function emitDownArrow() {
+  return act(async () => {
+    testSetup!.mockInput.pressArrow("down");
+    await testSetup!.renderOnce();
+  });
+}
+
+async function renderHarness(component: ReactNode) {
+  await act(async () => {
+    testSetup = await testRender(component, { width: 30, height: 5 });
+  });
+  await act(async () => {
+    await testSetup!.renderOnce();
+    await testSetup!.renderOnce();
+    await testSetup!.renderOnce();
+  });
+}
+
+function LongScrollPane({ width, height }: PaneProps) {
+  return (
+    <Box width={width} height={height}>
+      <ScrollBox
+        ref={(node) => {
+          scrollRef = node;
+        }}
+        height={height}
+        scrollY
+        focusable={false}
+      >
+        <Box flexDirection="column">
+          {Array.from({ length: 20 }, (_, index) => (
+            <Box key={index} height={1}>
+              <Text>{`Row ${index}`}</Text>
+            </Box>
+          ))}
+        </Box>
+      </ScrollBox>
+    </Box>
+  );
+}
+
+function ConsumingScrollPane(props: PaneProps) {
+  useShortcut((event) => {
+    if (event.name !== "down") return;
+    event.preventDefault();
+    event.stopPropagation();
+  });
+  return <LongScrollPane {...props} />;
+}
+
+function HiddenMountedTabPane({ width, height }: PaneProps) {
+  const renderRows = () => Array.from({ length: 20 }, (_, index) => (
+    <Box key={index} height={1}>
+      <Text>{`Tab row ${index}`}</Text>
+    </Box>
+  ));
+
+  return (
+    <Box width={width} height={height}>
+      <ScrollBox
+        ref={(node) => {
+          scrollRef = node;
+        }}
+        height={height}
+        scrollY
+        focusable={false}
+      >
+        <Box flexDirection="column">{renderRows()}</Box>
+      </ScrollBox>
+      <Box visible={false} height={height}>
+        <ScrollBox
+          ref={(node) => {
+            hiddenScrollRef = node;
+          }}
+          height={height}
+          scrollY
+          focusable={false}
+        >
+          <Box flexDirection="column">{renderRows()}</Box>
+        </ScrollBox>
+      </Box>
+    </Box>
+  );
+}
+
+interface TestRow {
+  id: string;
+}
+
+const columns: DataTableColumn[] = [{ id: "label", label: "Label", width: 10, align: "left" }];
+const rows: TestRow[] = [{ id: "row-1" }];
+
+function StackDetailPane({ focused, width, height }: PaneProps) {
+  const detailContent = (
+    <ScrollBox
+      ref={(node) => {
+        scrollRef = node;
+      }}
+      flexGrow={1}
+      scrollY
+      focusable={false}
+    >
+      <Box flexDirection="column">
+        {Array.from({ length: 20 }, (_, index) => (
+          <Box key={index} height={1}>
+            <Text>{`Tweet detail row ${index}`}</Text>
+          </Box>
+        ))}
+      </Box>
+    </ScrollBox>
+  );
+
+  return (
+    <DataTableStackView<TestRow>
+      focused={focused}
+      detailOpen
+      onBack={() => {}}
+      detailContent={detailContent}
+      detailTitle="Tweet"
+      selectedIndex={0}
+      rootWidth={width}
+      rootHeight={height}
+      columns={columns}
+      items={rows}
+      sortColumnId={null}
+      sortDirection="asc"
+      onHeaderClick={() => {}}
+      getItemKey={(row) => row.id}
+      isSelected={(_row, index) => index === 0}
+      onSelect={() => {}}
+      renderCell={(row) => ({ text: row.id })}
+      emptyStateTitle="No rows"
+    />
+  );
+}
+
+function Harness({
+  component = LongScrollPane,
+  focused = true,
+}: {
+  component?: (props: PaneProps) => ReactNode;
+  focused?: boolean;
+}) {
+  const initialState = createInitialState(createDefaultConfig("/tmp/gloomberb-pane-keyboard-scroll-test"));
+  const [state, dispatch] = useReducer(appReducer, initialState);
+
+  return (
+    <AppContext value={{ state, dispatch }}>
+      <PaneContent
+        component={component}
+        paneId="test-pane:main"
+        paneType="test-pane"
+        focused={focused}
+        width={30}
+        height={5}
+      />
+    </AppContext>
+  );
+}
+
+describe("pane keyboard scrolling", () => {
+  test("scrolls the focused pane's vertical scrollbox with arrow keys", async () => {
+    await renderHarness(<Harness />);
+
+    expect(scrollRef?.scrollTop).toBe(0);
+    await emitDownArrow();
+
+    expect(scrollRef?.scrollTop).toBe(3);
+  });
+
+  test("does not steal arrows from existing pane shortcut handlers", async () => {
+    await renderHarness(<Harness component={ConsumingScrollPane} />);
+
+    expect(scrollRef?.scrollTop).toBe(0);
+    await emitDownArrow();
+
+    expect(scrollRef?.scrollTop).toBe(0);
+  });
+
+  test("ignores mounted scrollboxes inside hidden tabs", async () => {
+    await renderHarness(<Harness component={HiddenMountedTabPane} />);
+
+    expect(scrollRef?.scrollTop).toBe(0);
+    expect(hiddenScrollRef?.scrollTop).toBe(0);
+    await emitDownArrow();
+
+    expect(scrollRef?.scrollTop).toBe(3);
+    expect(hiddenScrollRef?.scrollTop).toBe(0);
+  });
+
+  test("scrolls stack detail content without requiring a pane-local detail handler", async () => {
+    await renderHarness(<Harness component={StackDetailPane} />);
+
+    expect(scrollRef?.scrollTop).toBe(0);
+    await emitDownArrow();
+
+    expect(scrollRef?.scrollTop).toBe(3);
+  });
+});