gloomberb 0.7.0 → 0.7.2

package/src/components/command-bar/command-registry.ts

@@ -1,5 +1,4 @@
 import type { AppAction } from "../../state/app-context";
-import { themes, getThemeIds } from "../../theme/themes";
 
 export type CommandExecutor = (dispatch: React.Dispatch<AppAction>, context: CommandContext) => void | Promise<void>;
 
@@ -239,15 +238,6 @@ export const commands: Command[] = [
   },
 ];
 
-/** Get theme options for the command bar */
-export function getThemeOptions(): Array<{ id: string; name: string; description: string }> {
-  return getThemeIds().map((id) => ({
-    id,
-    name: themes[id]!.name,
-    description: themes[id]!.description,
-  }));
-}
-
 /** Find a command whose prefix matches the start of the input */
 export function matchPrefix(input: string, commandList: Command[] = commands): { command: Command; arg: string } | null {
   const upper = input.toUpperCase().trim();

package/src/components/command-bar/helpers.ts

@@ -14,7 +14,7 @@ import type {
 } from "./workflow-types";
 import type { CollectionKind, CollectionMembershipAction } from "./workflow-ops";
 
-export type RouteCommandId = "security-description" | "theme" | "plugins" | "layout";
+export type RouteCommandId = "security-description" | "plugins" | "layout";
 export type CollectionCommandId = "add-watchlist" | "add-portfolio" | "remove-watchlist" | "remove-portfolio";
 
 export function summarizeError(error: unknown): Record<string, string> {
@@ -30,7 +30,6 @@ export function summarizeError(error: unknown): Record<string, string> {
 
 export function isRouteCommandId(commandId: string): commandId is RouteCommandId {
   return commandId === "security-description"
-    || commandId === "theme"
     || commandId === "plugins"
     || commandId === "layout";
 }
@@ -237,12 +236,10 @@ export function normalizeWizardFields(steps: WizardStep[]): {
   return { fields, description, initialValues, pendingLabel, successLabel };
 }
 
-export function routeCommandIdToScreen(commandId: RouteCommandId): "ticker-search" | "themes" | "plugins" | "layout" {
+export function routeCommandIdToScreen(commandId: RouteCommandId): "ticker-search" | "plugins" | "layout" {
   switch (commandId) {
     case "security-description":
       return "ticker-search";
-    case "theme":
-      return "themes";
     case "plugins":
       return "plugins";
     case "layout":

package/src/components/command-bar/list-model.ts

@@ -5,10 +5,9 @@ export interface ResultItem {
   label: string;
   detail: string;
   category: string;
-  kind: "command" | "ticker" | "search" | "theme" | "plugin" | "action" | "info";
+  kind: "command" | "ticker" | "search" | "plugin" | "action" | "info";
   right?: string;
   searchText?: string;
-  themeId?: string;
   pluginToggle?: () => void | Promise<void>;
   secondaryAction?: () => void | Promise<void>;
   checked?: boolean;

package/src/components/command-bar/theme-picker.tsx

@@ -0,0 +1,254 @@
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { Box, ScrollBox, Text } from "../../ui";
+import { TextAttributes, type ScrollBoxRenderable } from "../../ui";
+import { getThemeIds, themes as themeRegistry } from "../../theme/themes";
+import { truncateText } from "./view-model";
+
+const THEME_PREVIEW_DEBOUNCE_MS = 120;
+const THEME_OPTIONS = getThemeIds().map((id) => ({
+  id,
+  name: themeRegistry[id]!.name,
+}));
+
+interface ThemePickerScrollEvent {
+  stopPropagation: () => void;
+  preventDefault: () => void;
+  scroll?: { direction?: string; delta?: number };
+}
+
+interface ThemePickerProps {
+  filter: string;
+  committedThemeId: string;
+  height: number;
+  contentPadding: number;
+  labelWidth: number;
+  trailingWidth: number;
+  queryDisplayWidth: number;
+  nativePaneChrome: boolean;
+  paletteBg: string;
+  paletteHoverBg: string;
+  paletteSelectedBg: string;
+  paletteSelectedText: string;
+  paletteSubtleText: string;
+  paletteText: string;
+  panelBg: string;
+  onPreview: (themeId: string | null) => void;
+  onCommit: (themeId: string) => void;
+}
+
+export interface ThemePickerHandle {
+  move: (delta: number) => boolean;
+  commit: () => boolean;
+  cancelPreview: () => void;
+}
+
+function clampIndex(index: number, length: number): number {
+  return Math.max(0, Math.min(index, Math.max(0, length - 1)));
+}
+
+export const ThemePicker = memo(forwardRef<ThemePickerHandle, ThemePickerProps>(function ThemePicker({
+  filter,
+  committedThemeId,
+  height,
+  contentPadding,
+  labelWidth,
+  trailingWidth,
+  queryDisplayWidth,
+  nativePaneChrome,
+  paletteBg,
+  paletteHoverBg,
+  paletteSelectedBg,
+  paletteSelectedText,
+  paletteSubtleText,
+  paletteText,
+  panelBg,
+  onPreview,
+  onCommit,
+}: ThemePickerProps, ref) {
+  const scrollRef = useRef<ScrollBoxRenderable | null>(null);
+  const previewTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const pendingPreviewIdRef = useRef<string | null>(null);
+  const committedThemeIdRef = useRef(committedThemeId);
+  const onPreviewRef = useRef(onPreview);
+  const onCommitRef = useRef(onCommit);
+  const normalizedFilter = filter.trim().toLowerCase();
+  const themes = useMemo(() => {
+    if (!normalizedFilter) return THEME_OPTIONS;
+    return THEME_OPTIONS.filter((theme) => (
+      theme.name.toLowerCase().includes(normalizedFilter)
+      || theme.id.toLowerCase().includes(normalizedFilter)
+    ));
+  }, [normalizedFilter]);
+  const [selectedIndex, setSelectedIndex] = useState(() => (
+    Math.max(0, themes.findIndex((theme) => theme.id === committedThemeId))
+  ));
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+  const themesRef = useRef(themes);
+  const selectedIndexRef = useRef(selectedIndex);
+
+  themesRef.current = themes;
+  selectedIndexRef.current = selectedIndex;
+  committedThemeIdRef.current = committedThemeId;
+  onPreviewRef.current = onPreview;
+  onCommitRef.current = onCommit;
+
+  const cancelPreview = useCallback(() => {
+    if (previewTimerRef.current) {
+      clearTimeout(previewTimerRef.current);
+      previewTimerRef.current = null;
+    }
+    pendingPreviewIdRef.current = null;
+  }, []);
+
+  const requestPreview = useCallback((themeId: string) => {
+    pendingPreviewIdRef.current = themeId;
+    if (previewTimerRef.current) {
+      clearTimeout(previewTimerRef.current);
+    }
+    previewTimerRef.current = setTimeout(() => {
+      previewTimerRef.current = null;
+      const nextThemeId = pendingPreviewIdRef.current;
+      pendingPreviewIdRef.current = null;
+      if (!nextThemeId) return;
+      onPreviewRef.current(nextThemeId === committedThemeIdRef.current ? null : nextThemeId);
+    }, THEME_PREVIEW_DEBOUNCE_MS);
+  }, []);
+
+  const move = useCallback((delta: number): boolean => {
+    const options = themesRef.current;
+    if (options.length === 0 || delta === 0) return false;
+    const nextIndex = clampIndex(selectedIndexRef.current + delta, options.length);
+    if (nextIndex === selectedIndexRef.current) return false;
+    selectedIndexRef.current = nextIndex;
+    setSelectedIndex(nextIndex);
+    setHoveredIndex(null);
+    requestPreview(options[nextIndex]!.id);
+    return true;
+  }, [requestPreview]);
+
+  const commit = useCallback((): boolean => {
+    const selected = themesRef.current[selectedIndexRef.current];
+    if (!selected) return false;
+    cancelPreview();
+    onCommitRef.current(selected.id);
+    return true;
+  }, [cancelPreview]);
+
+  useImperativeHandle(ref, () => ({
+    move,
+    commit,
+    cancelPreview,
+  }), [cancelPreview, commit, move]);
+
+  useEffect(() => {
+    const preferredIndex = themes.findIndex((theme) => theme.id === committedThemeId);
+    const nextIndex = preferredIndex >= 0 ? preferredIndex : 0;
+    selectedIndexRef.current = nextIndex;
+    setSelectedIndex(nextIndex);
+    setHoveredIndex(null);
+  }, [committedThemeId, themes]);
+
+  useEffect(() => cancelPreview, [cancelPreview]);
+
+  useLayoutEffect(() => {
+    const scrollBox = scrollRef.current;
+    if (!scrollBox) return;
+    if (scrollBox.verticalScrollBar) scrollBox.verticalScrollBar.visible = false;
+    if (themes.length === 0) return;
+    const viewportHeight = Math.max(1, scrollBox.viewport?.height ?? height);
+    if (selectedIndex < scrollBox.scrollTop) {
+      scrollBox.scrollTo(selectedIndex);
+    } else if (selectedIndex >= scrollBox.scrollTop + viewportHeight) {
+      scrollBox.scrollTo(selectedIndex - viewportHeight + 1);
+    }
+  }, [height, selectedIndex, themes.length]);
+
+  const handleScroll = useCallback((event: ThemePickerScrollEvent) => {
+    event.stopPropagation();
+    event.preventDefault();
+    const delta = Math.max(1, Math.round(event.scroll?.delta ?? 1));
+    const direction = event.scroll?.direction;
+    if (direction === "down" || direction === "right") {
+      move(delta);
+    } else if (direction === "up" || direction === "left") {
+      move(-delta);
+    }
+  }, [move]);
+
+  if (themes.length === 0) {
+    return (
+      <Box height={height} paddingX={contentPadding}>
+        <Text fg={paletteSubtleText}>{truncateText("No themes match", queryDisplayWidth)}</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <ScrollBox
+      ref={scrollRef}
+      flexDirection="column"
+      height={height}
+      scrollY
+      focusable={false}
+      {...(!nativePaneChrome ? { onMouseScroll: handleScroll } : {})}
+    >
+      {themes.map((theme, index) => {
+        const selected = index === selectedIndex;
+        const hovered = index === hoveredIndex && !selected;
+        const current = theme.id === committedThemeId;
+        const label = truncateText(theme.name, labelWidth);
+        const trailing = current ? "current" : "";
+        return (
+          <Box
+            key={theme.id}
+            flexDirection="row"
+            height={1}
+            paddingX={contentPadding}
+            backgroundColor={selected
+              ? paletteSelectedBg
+              : hovered
+                ? paletteHoverBg
+                : (nativePaneChrome ? panelBg : paletteBg)}
+            onMouseMove={() => setHoveredIndex(index)}
+            onMouseOut={() => setHoveredIndex(null)}
+            onMouseDown={(event: any) => {
+              event.stopPropagation?.();
+              event.preventDefault?.();
+              selectedIndexRef.current = index;
+              setSelectedIndex(index);
+              cancelPreview();
+              onCommitRef.current(theme.id);
+            }}
+            {...(!nativePaneChrome ? { onMouseScroll: handleScroll } : {})}
+            data-command-bar-row-selected={nativePaneChrome && selected ? "true" : undefined}
+            style={nativePaneChrome ? { borderRadius: 6 } : undefined}
+          >
+            <Box width={labelWidth}>
+              <Text
+                fg={selected ? paletteSelectedText : paletteText}
+                attributes={current ? TextAttributes.BOLD : undefined}
+              >
+                {label}
+              </Text>
+            </Box>
+            <Box width={trailingWidth}>
+              <Text fg={selected ? paletteSelectedText : paletteSubtleText}>
+                {truncateText(trailing, trailingWidth)}
+              </Text>
+            </Box>
+          </Box>
+        );
+      })}
+    </ScrollBox>
+  );
+}));

package/src/components/command-bar/view-model.test.ts

@@ -46,7 +46,7 @@ describe("command bar view model helpers", () => {
     expect(sections.map((section) => section.category)).toEqual(["Tickers", "Config", "Danger", "Debug"]);
   });
 
-  test("derives row presentation for toggles and current theme rows", () => {
+  test("derives row presentation for toggles and current rows", () => {
     expect(getRowPresentation({
       id: "plugin:news",
       label: "News",
@@ -61,11 +61,11 @@ describe("command bar view model helpers", () => {
     });
 
     expect(getRowPresentation({
-      id: "theme:amber",
+      id: "current:amber",
       label: "Amber",
       detail: "Warm terminal palette",
-      category: "Themes",
-      kind: "theme",
+      category: "Config",
+      kind: "command",
       right: "amber",
       current: true,
     }, false, true)).toMatchObject({

package/src/components/command-bar/view-model.ts

@@ -20,7 +20,7 @@ export interface CommandBarItemView {
   label: string;
   detail: string;
   category: string;
-  kind: "command" | "ticker" | "search" | "theme" | "plugin" | "action" | "info";
+  kind: "command" | "ticker" | "search" | "plugin" | "action" | "info";
   right?: string;
   checked?: boolean;
   current?: boolean;

package/src/components/command-bar/workflow-types.ts

@@ -38,11 +38,10 @@ export interface CommandBarRouteBase {
 
 export interface CommandBarModeRoute extends CommandBarRouteBase {
   kind: "mode";
-  screen: "ticker-search" | "themes" | "plugins" | "layout";
+  screen: "ticker-search" | "plugins" | "layout";
   query: string;
   selectedIdx: number;
   hoveredIdx: number | null;
-  themeBaseId?: string;
   payload?: Record<string, unknown>;
 }
 

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

@@ -1,16 +1,22 @@
 import { Box, Text, useRendererHost, useUiCapabilities } from "../../ui";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useShortcut, useViewport } from "../../react/input";
 import { useAppDispatch, useAppSelector } from "../../state/app-context";
 import type { DesktopWindowBridge } from "../../types/desktop-window";
 import { findPaneInstance } from "../../types/config";
 import type { PluginRegistry } from "../../plugins/registry";
 import { colors, floatingPaneBg, floatingPaneTitleBg, paneTitleText } from "../../theme/colors";
+import { useThemeColors } from "../../theme/theme-context";
 import { hasPaneFooterContent, PaneFooterBar, PaneFooterProvider } from "./pane-footer";
 import { PaneContent } from "./pane-content";
-import { getPaneBodyWidth } from "./pane-sizing";
+import { getPaneBodyWidth, NATIVE_PANE_BODY_LAYOUT_PROPS } from "./pane-sizing";
 import { getPaneDisplayTitle } from "./pane-title";
 import { TITLEBAR_OVERLAY_HEIGHT_PX, TITLEBAR_TRAFFIC_LIGHT_WIDTH } from "./titlebar-overlay";
+import {
+  createDoubleEscapeCloseState,
+  recordDoubleEscapeClose,
+  resetDoubleEscapeClose,
+} from "../../utils/double-escape-close";
 
 interface DetachedPaneShellProps {
   pluginRegistry: PluginRegistry;
@@ -23,12 +29,13 @@ function stopMouse(event?: { stopPropagation?: () => void; preventDefault?: () =
 }
 
 export function DetachedPaneShell({ pluginRegistry, desktopWindowBridge }: DetachedPaneShellProps) {
+  useThemeColors();
   const dispatch = useAppDispatch();
   const rendererHost = useRendererHost();
   const config = useAppSelector((state) => state.config);
   const paneState = useAppSelector((state) => state.paneState);
-  const focusedPaneId = useAppSelector((state) => state.focusedPaneId);
   const inputCaptured = useAppSelector((state) => state.inputCaptured);
+  const doubleEscapeCloseRef = useRef(createDoubleEscapeCloseState());
   const [windowFocused, setWindowFocused] = useState(() => (
     typeof document === "undefined" ? true : document.hasFocus()
   ));
@@ -52,12 +59,6 @@ export function DetachedPaneShell({ pluginRegistry, desktopWindowBridge }: Detac
     dispatch({ type: "FOCUS_PANE", paneId: desktopWindowBridge.paneId });
   }, [desktopWindowBridge.paneId, dispatch]);
 
-  useEffect(() => {
-    if (windowFocused && focusedPaneId !== desktopWindowBridge.paneId) {
-      focusPane();
-    }
-  }, [desktopWindowBridge.paneId, focusPane, focusedPaneId, windowFocused]);
-
   useEffect(() => {
     if (typeof window === "undefined" || typeof document === "undefined") return;
 
@@ -81,6 +82,21 @@ export function DetachedPaneShell({ pluginRegistry, desktopWindowBridge }: Detac
     };
   }, [focusPane]);
 
+  useShortcut((event) => {
+    const doubleEscapeState = doubleEscapeCloseRef.current;
+    const isEscape = event.name === "escape" || event.name === "esc";
+    if (isEscape) {
+      if (recordDoubleEscapeClose(doubleEscapeState, desktopWindowBridge.paneId, Date.now())) {
+        event.preventDefault();
+        event.stopPropagation();
+        void desktopWindowBridge.closeDetachedPane?.(desktopWindowBridge.paneId);
+      }
+      return;
+    }
+
+    resetDoubleEscapeClose(doubleEscapeState);
+  }, { phase: "before" });
+
   useShortcut((event) => {
     if (event.name !== "w" || (!event.ctrl && !event.meta && !event.super)) return;
     if (inputCaptured && event.ctrl && !event.meta && !event.super) return;
@@ -116,6 +132,9 @@ export function DetachedPaneShell({ pluginRegistry, desktopWindowBridge }: Detac
         const bodyHeight = Math.max(1, height - headerHeightRows - footerHeightRows);
         const background = floatingPaneBg(focused);
         const titleBackground = floatingPaneTitleBg(focused);
+        const bodyLayoutProps = nativePaneChrome
+          ? NATIVE_PANE_BODY_LAYOUT_PROPS
+          : { height: bodyHeight };
 
         return (
           <Box
@@ -166,7 +185,7 @@ export function DetachedPaneShell({ pluginRegistry, desktopWindowBridge }: Detac
                 )}
               </Box>
             </Box>
-            <Box height={bodyHeight} overflow="hidden" backgroundColor={background}>
+            <Box {...bodyLayoutProps} overflow="hidden" backgroundColor={background}>
               <PaneContent
                 component={paneDef.component}
                 paneId={instance.instanceId}

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

@@ -3,7 +3,7 @@ import type { ReactNode } from "react";
 import { colors, floatingPaneBg } 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 FloatingPaneWrapperProps {
   paneId?: string;
@@ -78,6 +78,9 @@ export function FloatingPaneWrapper({
   const showFooter = hasPaneFooterContent(footer);
   const reserveFooter = shouldReservePaneFooter(nativePaneChrome, showFooter);
   const bodyHeight = getPaneBodyHeight(height, reserveFooter);
+  const bodyLayoutProps = nativePaneChrome
+    ? NATIVE_PANE_BODY_LAYOUT_PROPS
+    : { height: bodyHeight };
 
   return (
     <Box
@@ -115,7 +118,7 @@ export function FloatingPaneWrapper({
       />
 
       {/* Content */}
-      <Box height={bodyHeight} overflow="hidden">
+      <Box {...bodyLayoutProps} overflow="hidden" backgroundColor={bg}>
         {children}
       </Box>
 

package/src/components/layout/header.tsx

@@ -1,6 +1,7 @@
 import { Box, SpinnerMark, Text, TextAttributes, useUiCapabilities } from "../../ui";
 import { useEffect, type ReactNode } from "react";
 import { blendHex, colors, priceColor } from "../../theme/colors";
+import { useThemeColors } from "../../theme/theme-context";
 import { useAppActive } from "../../state/app-activity";
 import { useAppDispatch, useAppSelector } from "../../state/app-context";
 import {
@@ -121,6 +122,7 @@ function UpdateStatus() {
 }
 
 export function Header() {
+  useThemeColors();
   const baseCurrency = useAppSelector(selectBaseCurrency);
   const appActive = useAppActive();
   const { titleBarOverlay } = useUiCapabilities();

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-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>