gloomberb 0.5.1 → 0.6.0

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

@@ -1,9 +1,12 @@
+import { Box, Text, useUiCapabilities } from "../../ui";
 import type { ReactNode } from "react";
 import { colors, floatingPaneBg } from "../../theme/colors";
 import { PaneHeader } from "./pane-header";
-import { getPaneBodyHeight, getPaneBodyHorizontalInset } from "./pane-sizing";
+import { hasPaneFooterContent, PaneFooterBar, type CombinedPaneFooter } from "./pane-footer";
+import { getPaneBodyHeight, shouldReservePaneFooter } from "./pane-sizing";
 
 interface FloatingPaneWrapperProps {
+  paneId?: string;
   title: string;
   x: number;
   y: number;
@@ -12,20 +15,54 @@ interface FloatingPaneWrapperProps {
   zIndex: number;
   focused: boolean;
   showActions?: boolean;
+  onMouseDown?: (event: any) => void;
   onMouseMove?: (event: any) => void;
+  onHeaderMouseDown?: (event: any) => void;
+  onHeaderMouseDrag?: (event: any) => void;
+  onHeaderMouseDragEnd?: (event: any) => void;
+  onHeaderContextMenu?: (event: any) => void;
+  onActionMouseDown?: (event: any) => void;
+  onCloseMouseDown?: (event: any) => void;
+  onResizeMouseDown?: (event: any) => void;
+  onResizeMouseDrag?: (event: any) => void;
+  onResizeMouseDragEnd?: (event: any) => void;
+  footer?: CombinedPaneFooter | null;
   children: ReactNode;
 }
 
-/** Pure visual wrapper — all mouse handling done by Shell at root level */
+/** Pure visual wrapper; Shell owns the interaction state and supplies handlers. */
 export function FloatingPaneWrapper({
-  title, x, y, width, height, zIndex, focused, showActions = false, onMouseMove, children,
+  paneId,
+  title,
+  x,
+  y,
+  width,
+  height,
+  zIndex,
+  focused,
+  showActions = false,
+  onMouseDown,
+  onMouseMove,
+  onHeaderMouseDown,
+  onHeaderMouseDrag,
+  onHeaderMouseDragEnd,
+  onHeaderContextMenu,
+  onActionMouseDown,
+  onCloseMouseDown,
+  onResizeMouseDown,
+  onResizeMouseDrag,
+  onResizeMouseDragEnd,
+  footer,
+  children,
 }: FloatingPaneWrapperProps) {
+  const { nativePaneChrome } = useUiCapabilities();
   const bg = floatingPaneBg(focused);
-  const bodyHeight = getPaneBodyHeight(height);
-  const bodyInset = getPaneBodyHorizontalInset(focused);
+  const showFooter = hasPaneFooterContent(footer);
+  const reserveFooter = shouldReservePaneFooter(nativePaneChrome, showFooter);
+  const bodyHeight = getPaneBodyHeight(height, reserveFooter);
 
   return (
-    <box
+    <Box
       position="absolute"
       top={y}
       left={x}
@@ -34,19 +71,55 @@ export function FloatingPaneWrapper({
       zIndex={zIndex}
       backgroundColor={bg}
       flexDirection="column"
+      overflow="hidden"
+      {...(nativePaneChrome ? {
+        "data-gloom-role": "pane-window",
+        "data-gloom-pane-id": paneId,
+        "data-floating": "true",
+        "data-focused": focused ? "true" : "false",
+        style: { "--pane-border-color": focused ? colors.borderFocused : colors.border },
+      } : {})}
+      onMouseDown={onMouseDown}
       onMouseMove={onMouseMove}
     >
-      <PaneHeader title={title} width={width} focused={focused} floating showActions={showActions} />
+      <PaneHeader
+        title={title}
+        width={width}
+        focused={focused}
+        floating
+        showActions={showActions}
+        onHeaderMouseDown={onHeaderMouseDown}
+        onHeaderMouseDrag={onHeaderMouseDrag}
+        onHeaderMouseDragEnd={onHeaderMouseDragEnd}
+        onHeaderContextMenu={onHeaderContextMenu}
+        onActionMouseDown={onActionMouseDown}
+        onCloseMouseDown={onCloseMouseDown}
+      />
 
       {/* Content */}
-      <box height={bodyHeight} overflow="hidden" paddingLeft={bodyInset} paddingRight={bodyInset}>
+      <Box height={bodyHeight} overflow="hidden">
         {children}
-      </box>
+      </Box>
 
-      {/* Resize handle at bottom-right corner */}
-      <box position="absolute" bottom={0} right={0} width={2} height={1}>
-        <text fg={focused ? colors.borderFocused : colors.textDim} selectable={false}>{focused ? "─◢" : " ◢"}</text>
-      </box>
-    </box>
+      {reserveFooter && <PaneFooterBar footer={footer} focused={focused} width={width} reserveRight={2} />}
+
+      {nativePaneChrome ? (
+        <Box
+          position="absolute"
+          bottom={0}
+          right={0}
+          width={2}
+          height={1}
+          data-gloom-role="resize-handle"
+          onMouseDown={onResizeMouseDown}
+          onMouseDrag={onResizeMouseDrag}
+          onMouseDragEnd={onResizeMouseDragEnd}
+        />
+      ) : (
+        <Box position="absolute" bottom={0} right={0} width={2} height={1}>
+          <Text fg={focused ? colors.borderFocused : colors.textDim} selectable={false}>{focused ? "─◢" : " ◢"}</Text>
+        </Box>
+      )}
+    </Box>
   );
 }

package/src/components/layout/header.tsx

@@ -1,22 +1,58 @@
-import { useState, useEffect } from "react";
-import { TextAttributes } from "@opentui/core";
-import "opentui-spinner/react";
+import { Box, SpinnerMark, Text, TextAttributes, useUiCapabilities } from "../../ui";
+import { useEffect, type ReactNode } from "react";
 import { colors, priceColor } from "../../theme/colors";
 import { useAppActive } from "../../state/app-activity";
-import { useAppState } from "../../state/app-context";
+import { useAppDispatch, useAppSelector } from "../../state/app-context";
+import {
+  selectBaseCurrency,
+  selectUpdateAvailable,
+  selectUpdateCheckInProgress,
+  selectUpdateNotice,
+  selectUpdateProgress,
+} from "../../state/selectors-ui";
 import { getSharedMarketDataCoordinator } from "../../market-data/coordinator";
 import { useQuoteEntry, useResolvedEntryValue } from "../../market-data/hooks";
 import { formatPercentRaw } from "../../utils/format";
 import { formatMarketPrice } from "../../utils/market-format";
 import { marketStateLabel, marketStateColor, getExtendedHoursInfo } from "../../utils/market-status";
 import { VERSION } from "../../version";
+import { TITLEBAR_TRAFFIC_LIGHT_WIDTH } from "./titlebar-overlay";
 
 const SPY_REFRESH_MS = 5 * 60_000; // 5 min
 const UPDATE_NOTICE_DURATION_MS = 5_000;
 
+function DesktopHeaderPill({
+  children,
+  backgroundColor = "rgba(8, 12, 15, 0.34)",
+  borderColor = "rgba(132, 145, 161, 0.22)",
+}: {
+  children: ReactNode;
+  backgroundColor?: string;
+  borderColor?: string;
+}) {
+  return (
+    <Box
+      height={1}
+      flexDirection="row"
+      alignItems="center"
+      backgroundColor={backgroundColor}
+      style={{
+        border: `1px solid ${borderColor}`,
+        borderRadius: 5,
+        paddingInline: 6,
+      }}
+    >
+      {children}
+    </Box>
+  );
+}
+
 function UpdateStatus() {
-  const { state, dispatch } = useAppState();
-  const { updateAvailable, updateProgress, updateCheckInProgress, updateNotice } = state;
+  const dispatch = useAppDispatch();
+  const updateAvailable = useAppSelector(selectUpdateAvailable);
+  const updateProgress = useAppSelector(selectUpdateProgress);
+  const updateCheckInProgress = useAppSelector(selectUpdateCheckInProgress);
+  const updateNotice = useAppSelector(selectUpdateNotice);
 
   useEffect(() => {
     if (!updateNotice || updateAvailable || updateProgress || updateCheckInProgress) return;
@@ -29,64 +65,65 @@ function UpdateStatus() {
   if (updateProgress) {
     if (updateProgress.phase === "downloading") {
       return (
-        <box flexDirection="row" gap={1}>
-          <spinner name="dots" color={colors.headerText} />
-          <text fg={colors.headerText}>
+        <Box flexDirection="row" gap={1}>
+          <SpinnerMark name="dots" color={colors.headerText} />
+          <Text fg={colors.headerText}>
             Downloading v{updateAvailable?.version}: {updateProgress.percent ?? 0}%
-          </text>
-        </box>
+          </Text>
+        </Box>
       );
     }
     if (updateProgress.phase === "replacing") {
       return (
-        <box flexDirection="row" gap={1}>
-          <spinner name="dots" color={colors.headerText} />
-          <text fg={colors.headerText}>Installing update...</text>
-        </box>
+        <Box flexDirection="row" gap={1}>
+          <SpinnerMark name="dots" color={colors.headerText} />
+          <Text fg={colors.headerText}>Installing update...</Text>
+        </Box>
       );
     }
     if (updateProgress.phase === "done") {
-      return <text fg={colors.headerText}>Update installed, restart to apply</text>;
+      return <Text fg={colors.headerText}>{updateProgress.message ?? "Update installed, restart to apply"}</Text>;
     }
     if (updateProgress.phase === "error") {
-      return <text fg={colors.headerText}>Update failed: {updateProgress.error}</text>;
+      return <Text fg={colors.headerText}>Update failed: {updateProgress.error}</Text>;
     }
   }
 
   if (updateCheckInProgress) {
     return (
-      <box flexDirection="row" gap={1}>
-        <spinner name="dots" color={colors.headerText} />
-        <text fg={colors.headerText}>Checking for updates...</text>
-      </box>
+      <Box flexDirection="row" gap={1}>
+        <SpinnerMark name="dots" color={colors.headerText} />
+        <Text fg={colors.headerText}>Checking for updates...</Text>
+      </Box>
     );
   }
 
   if (updateAvailable) {
     if (updateAvailable.updateAction.kind === "manual") {
       return (
-        <text fg={colors.headerText}>
+        <Text fg={colors.headerText}>
           v{updateAvailable.version} available — run {updateAvailable.updateAction.command}
-        </text>
+        </Text>
       );
     }
     return (
-      <text fg={colors.headerText}>
+      <Text fg={colors.headerText}>
         v{updateAvailable.version} available — starting download...
-      </text>
+      </Text>
     );
   }
 
   if (updateNotice) {
-    return <text fg={colors.headerText}>{updateNotice}</text>;
+    return <Text fg={colors.headerText}>{updateNotice}</Text>;
   }
 
   return null;
 }
 
 export function Header() {
-  const { state } = useAppState();
+  const baseCurrency = useAppSelector(selectBaseCurrency);
   const appActive = useAppActive();
+  const { titleBarOverlay } = useUiCapabilities();
   const spyQuoteEntry = useQuoteEntry("SPY", null);
   const spyQuote = useResolvedEntryValue(spyQuoteEntry);
 
@@ -115,38 +152,91 @@ export function Header() {
   const mktLabel = mktState ? marketStateLabel(mktState) : "";
   const mktColor = mktState ? marketStateColor(mktState) : colors.headerText;
 
+  if (titleBarOverlay) {
+    return (
+      <Box
+        flexDirection="row"
+        height={1}
+        alignItems="center"
+        backgroundColor={colors.header}
+        data-gloom-role="app-header"
+        data-titlebar-overlay="true"
+        className="electrobun-webkit-app-region-drag"
+        style={{
+          boxShadow: `0 -1px 0 ${colors.header}, inset 0 1px 0 ${colors.header}`,
+          paddingLeft: 8,
+          paddingRight: 12,
+        }}
+      >
+        <Box paddingLeft={TITLEBAR_TRAFFIC_LIGHT_WIDTH} flexDirection="row" alignItems="center" gap={1}>
+          <Text attributes={TextAttributes.BOLD} fg={colors.headerText}>
+            Gloomberb
+          </Text>
+          <DesktopHeaderPill
+            backgroundColor="rgba(84, 201, 159, 0.12)"
+            borderColor="rgba(84, 201, 159, 0.28)"
+          >
+            <Text fg={colors.headerText} style={{ fontSize: 11 }}>v{VERSION}</Text>
+          </DesktopHeaderPill>
+        </Box>
+        <Box flexGrow={1} paddingLeft={2} paddingRight={2} minWidth={0}>
+          <UpdateStatus />
+        </Box>
+        {mktLabel ? (
+          <Box paddingRight={1}>
+            <DesktopHeaderPill borderColor="rgba(132, 145, 161, 0.18)">
+              <Text fg={mktColor}>{mktLabel}</Text>
+            </DesktopHeaderPill>
+          </Box>
+        ) : null}
+        <Box paddingRight={1}>
+          <Text fg={spyColor}>{spyText}</Text>
+        </Box>
+        {extText ? (
+          <Box paddingRight={1}>
+            <Text fg={extText.color}>{extText.text}</Text>
+          </Box>
+        ) : null}
+        <Text fg={colors.headerText}>{baseCurrency}</Text>
+      </Box>
+    );
+  }
+
   return (
-    <box
+    <Box
       flexDirection="row"
       height={1}
       backgroundColor={colors.header}
+      data-gloom-role="app-header"
+      data-titlebar-overlay={titleBarOverlay ? "true" : undefined}
+      className={titleBarOverlay ? "electrobun-webkit-app-region-drag" : undefined}
     >
-      <box paddingLeft={1}>
-        <text attributes={TextAttributes.BOLD} fg={colors.headerText}>
+      <Box paddingLeft={titleBarOverlay ? TITLEBAR_TRAFFIC_LIGHT_WIDTH : 1}>
+        <Text attributes={TextAttributes.BOLD} fg={colors.headerText}>
           Gloomberb v{VERSION}
-        </text>
-      </box>
-      <box flexGrow={1} paddingLeft={2}>
+        </Text>
+      </Box>
+      <Box flexGrow={1} paddingLeft={2}>
         <UpdateStatus />
-      </box>
+      </Box>
       {mktLabel && (
-        <box paddingRight={1}>
-          <text fg={mktColor}>{mktLabel}</text>
-        </box>
+        <Box paddingRight={1}>
+          <Text fg={mktColor}>{mktLabel}</Text>
+        </Box>
       )}
-      <box paddingRight={extText ? 0 : 1}>
-        <text fg={spyColor}>{spyText}</text>
-      </box>
+      <Box paddingRight={extText ? 0 : 1}>
+        <Text fg={spyColor}>{spyText}</Text>
+      </Box>
       {extText && (
-        <box paddingRight={1} paddingLeft={1}>
-          <text fg={extText.color}>{extText.text}</text>
-        </box>
+        <Box paddingRight={1} paddingLeft={1}>
+          <Text fg={extText.color}>{extText.text}</Text>
+        </Box>
       )}
-      <box paddingRight={1}>
-        <text fg={colors.headerText}>
-          {state.config.baseCurrency}
-        </text>
-      </box>
-    </box>
+      <Box paddingRight={1}>
+        <Text fg={colors.headerText}>
+          {baseCurrency}
+        </Text>
+      </Box>
+    </Box>
   );
 }

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

@@ -0,0 +1,40 @@
+import { memo, useCallback } from "react";
+import { PaneInstanceProvider } from "../../state/app-context";
+import type { PaneDef } from "../../types/plugin";
+
+interface PaneContentProps {
+  component: PaneDef["component"];
+  paneId: string;
+  paneType: string;
+  focused: boolean;
+  width: number;
+  height: number;
+  onClose?: (paneId: string) => void;
+}
+
+export const PaneContent = memo(function PaneContent({
+  component: Component,
+  paneId,
+  paneType,
+  focused,
+  width,
+  height,
+  onClose,
+}: PaneContentProps) {
+  const close = useCallback(() => {
+    onClose?.(paneId);
+  }, [onClose, paneId]);
+
+  return (
+    <PaneInstanceProvider paneId={paneId}>
+      <Component
+        paneId={paneId}
+        paneType={paneType}
+        focused={focused}
+        width={width}
+        height={height}
+        close={onClose ? close : undefined}
+      />
+    </PaneInstanceProvider>
+  );
+});

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

@@ -0,0 +1,195 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { act } from "react";
+import { Box } from "../../ui";
+import { testRender } from "../../renderers/opentui/test-utils";
+import {
+  hasPaneFooterContent,
+  PaneFooterBar,
+  PaneFooterProvider,
+  usePaneFooter,
+} from "./pane-footer";
+import { useExternalLinkFooter } from "../use-external-link-footer";
+
+let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
+
+afterEach(() => {
+  if (testSetup) {
+    testSetup.renderer.destroy();
+    testSetup = undefined;
+  }
+});
+
+function Registration({
+  visible = true,
+  onRefresh,
+}: {
+  visible?: boolean;
+  onRefresh?: () => void;
+}) {
+  usePaneFooter("test", () => {
+    if (!visible) return null;
+    return {
+      info: [
+        {
+          id: "rows",
+          parts: [
+            { text: "Rows", tone: "label" },
+            { text: "12", tone: "value", bold: true },
+          ],
+        },
+      ],
+      hints: [
+        { id: "refresh", key: "r", label: "efresh", onPress: onRefresh },
+      ],
+    };
+  }, [onRefresh, visible]);
+  return null;
+}
+
+function ExternalLinkRegistration() {
+  useExternalLinkFooter({
+    registrationId: "external-link",
+    focused: true,
+    url: "https://example.com/story?utm=raw",
+    source: "Reuters",
+  });
+  return null;
+}
+
+function FooterHarness({
+  focused = false,
+  visible = true,
+  onRefresh,
+}: {
+  focused?: boolean;
+  visible?: boolean;
+  onRefresh?: () => void;
+}) {
+  return (
+    <PaneFooterProvider>
+      {(footer) => (
+        <Box width={64} height={1}>
+          <Registration visible={visible} onRefresh={onRefresh} />
+          <PaneFooterBar footer={footer} focused={focused} width={64} />
+        </Box>
+      )}
+    </PaneFooterProvider>
+  );
+}
+
+function ExternalLinkFooterHarness() {
+  return (
+    <PaneFooterProvider>
+      {(footer) => (
+        <Box width={80} height={1}>
+          <ExternalLinkRegistration />
+          <PaneFooterBar footer={footer} focused width={80} />
+        </Box>
+      )}
+    </PaneFooterProvider>
+  );
+}
+
+describe("PaneFooterBar", () => {
+  test("reports when footer has content", () => {
+    expect(hasPaneFooterContent(null)).toBe(false);
+    expect(hasPaneFooterContent({ info: [], hints: [] })).toBe(false);
+    expect(hasPaneFooterContent({
+      info: [{ id: "rows", parts: [{ text: "Rows", tone: "label" }] }],
+      hints: [],
+    })).toBe(true);
+  });
+
+  test("renders focused info left and hints right", async () => {
+    testSetup = await testRender(<FooterHarness focused />, { width: 64, height: 1 });
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Rows 12");
+    expect(frame).toContain("[r]efresh");
+  });
+
+  test("hides hints on inactive footers but keeps info visible", async () => {
+    testSetup = await testRender(<FooterHarness />, { width: 64, height: 1 });
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Rows 12");
+    expect(frame).not.toContain("[r]efresh");
+  });
+
+  test("keeps raw external URLs out of footer text", async () => {
+    testSetup = await testRender(<ExternalLinkFooterHarness />, { width: 80, height: 1 });
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("source Reuters");
+    expect(frame).toContain("[o]pen");
+    expect(frame).not.toContain("https://example.com");
+  });
+
+  test("calls hint onPress from mouse interaction", async () => {
+    let refreshCount = 0;
+    testSetup = await testRender(<FooterHarness focused onRefresh={() => { refreshCount += 1; }} />, { width: 64, height: 1 });
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    const line = testSetup.captureCharFrame().split("\n")[0] ?? "";
+    const col = line.indexOf("[r]efresh");
+    expect(col).toBeGreaterThanOrEqual(0);
+
+    await act(async () => {
+      await testSetup!.mockMouse.click(col + 1, 0);
+      await testSetup!.renderOnce();
+    });
+    expect(refreshCount).toBe(1);
+  });
+
+  test("keeps focused border from hiding content", async () => {
+    testSetup = await testRender(<FooterHarness focused />, { width: 64, height: 1 });
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("└");
+    expect(frame).toContain("┘");
+    expect(frame).toContain("Rows 12");
+    expect(frame).toContain("[r]efresh");
+  });
+
+  test("draws focused empty footer border before the resize handle", async () => {
+    testSetup = await testRender(
+      <PaneFooterBar footer={{ info: [], hints: [] }} focused width={12} reserveRight={2} />,
+      { width: 12, height: 1 },
+    );
+    await testSetup.renderOnce();
+
+    const line = testSetup.captureCharFrame().split("\n")[0] ?? "";
+    expect(line).toContain("└─────────");
+  });
+
+  test("clears a registration when the component unmounts", async () => {
+    testSetup = await testRender(<FooterHarness visible={false} />, { width: 64, height: 1 });
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).not.toContain("Rows 12");
+    expect(frame).not.toContain("[r]efresh");
+  });
+});