gloomberb 0.6.1 → 0.7.1

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

@@ -0,0 +1,64 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { act, type Dispatch } from "react";
+import { testRender } from "../../renderers/opentui/test-utils";
+import { AppProvider, useAppDispatch, type AppAction } from "../../state/app-context";
+import { applyTheme, colors } from "../../theme/colors";
+import { getTheme } from "../../theme/themes";
+import { createDefaultConfig } from "../../types/config";
+import { PaneContent } from "./pane-content";
+
+let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
+let capturedDispatch: Dispatch<AppAction> | null = null;
+
+function DispatchCapture() {
+  capturedDispatch = useAppDispatch();
+  return null;
+}
+
+function ThemeColorProbe() {
+  return <text>{colors.textBright}</text>;
+}
+
+describe("PaneContent", () => {
+  afterEach(() => {
+    testSetup?.renderer.destroy();
+    testSetup = undefined;
+    capturedDispatch = null;
+    applyTheme("amber");
+  });
+
+  test("rerenders memoized pane bodies when the theme preview changes", async () => {
+    const config = {
+      ...createDefaultConfig("/tmp/gloomberb-test"),
+      theme: "amber",
+    };
+
+    testSetup = await testRender(
+      <AppProvider config={config}>
+        <DispatchCapture />
+        <PaneContent
+          component={ThemeColorProbe}
+          paneId="theme-preview:test"
+          paneType="test"
+          focused
+          width={24}
+          height={4}
+        />
+      </AppProvider>,
+      { width: 32, height: 6 },
+    );
+
+    await testSetup.renderOnce();
+    expect(testSetup.captureCharFrame()).toContain(getTheme("amber").textBright);
+
+    await act(async () => {
+      capturedDispatch?.({ type: "PREVIEW_THEME", theme: "green" });
+      await testSetup!.renderOnce();
+    });
+    await testSetup.renderOnce();
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain(getTheme("green").textBright);
+    expect(frame).not.toContain(getTheme("amber").textBright);
+  });
+});

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

@@ -1,6 +1,7 @@
 import { memo, useCallback } from "react";
 import { PaneInstanceProvider } from "../../state/app-context";
 import { PaneKeyboardScrollController } from "../../state/pane-scroll-registry";
+import { useThemeColors } from "../../theme/theme-context";
 import type { PaneDef } from "../../types/plugin";
 
 interface PaneContentProps {
@@ -22,6 +23,7 @@ export const PaneContent = memo(function PaneContent({
   height,
   onClose,
 }: PaneContentProps) {
+  useThemeColors();
   const close = useCallback(() => {
     onClose?.(paneId);
   }, [onClose, paneId]);

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

@@ -357,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;
 
@@ -385,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)",
         }}
       >
@@ -399,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-sizing.ts

@@ -2,14 +2,21 @@
 const PANE_HEADER_ROWS = 1;
 const PANE_FOOTER_ROWS = 1;
 
+export const NATIVE_PANE_BODY_LAYOUT_PROPS = {
+  flexGrow: 1,
+  flexBasis: 0,
+  minHeight: 0,
+} as const;
+
 export function shouldReservePaneFooter(nativePaneChrome: boolean | undefined, showFooter: boolean): boolean {
   return !nativePaneChrome || showFooter;
 }
 
 export function getPaneBodyHeight(height: number, reserveFooter = true): number {
-  return Math.max(1, height - PANE_HEADER_ROWS - (reserveFooter ? PANE_FOOTER_ROWS : 0));
+  const cellHeight = Math.max(1, Math.floor(height));
+  return Math.max(1, cellHeight - PANE_HEADER_ROWS - (reserveFooter ? PANE_FOOTER_ROWS : 0));
 }
 
 export function getPaneBodyWidth(width: number): number {
-  return Math.max(1, width);
+  return Math.max(1, Math.floor(width));
 }

package/src/components/layout/pane-title.ts

@@ -8,7 +8,10 @@ export function getPaneDisplayTitle(
   paneDef: PaneDef,
 ): string {
   if (instance.paneId === "chat") {
-    return instance.title ?? "#everyone";
+    const channelId = typeof instance.settings?.channelId === "string" && instance.settings.channelId.trim()
+      ? instance.settings.channelId.trim()
+      : "everyone";
+    return instance.title ?? `#${channelId}`;
   }
 
   if (instance.paneId === "ticker-detail") {

package/src/components/layout/pane.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from "react";
 import { colors, paneBg } from "../../theme/colors";
 import { PaneHeader } from "./pane-header";
 import { hasPaneFooterContent, PaneFooterBar, type CombinedPaneFooter } from "./pane-footer";
-import { getPaneBodyHeight, shouldReservePaneFooter } from "./pane-sizing";
+import { getPaneBodyHeight, NATIVE_PANE_BODY_LAYOUT_PROPS, shouldReservePaneFooter } from "./pane-sizing";
 
 interface PaneWrapperProps {
   paneId?: string;
@@ -47,8 +47,15 @@ export function PaneWrapper({
   const showFooter = hasPaneFooterContent(footer);
   const reserveFooter = shouldReservePaneFooter(nativePaneChrome, showFooter);
   const bodyHeight = typeof height === "number"
-    ? title ? getPaneBodyHeight(height, reserveFooter) : height
+    ? title ? getPaneBodyHeight(height, reserveFooter) : Math.max(1, Math.floor(height))
     : undefined;
+  const bodyLayoutProps = nativePaneChrome
+    ? NATIVE_PANE_BODY_LAYOUT_PROPS
+    : {
+        height: bodyHeight,
+        flexGrow: bodyHeight == null ? 1 : 0,
+        flexBasis: bodyHeight == null ? 0 : undefined,
+      };
 
   return (
     <Box
@@ -82,10 +89,9 @@ export function PaneWrapper({
         />
       )}
       <Box
-        height={bodyHeight}
-        flexGrow={bodyHeight == null ? 1 : 0}
-        flexBasis={bodyHeight == null ? 0 : undefined}
+        {...bodyLayoutProps}
         overflow="hidden"
+        backgroundColor={bg}
       >
         {children}
       </Box>