gloomberb 0.6.1 → 0.7.1

package/src/components/data-table-stack-view.tsx

@@ -1,50 +1,23 @@
 import { useShortcut } from "../react/input";
-import { type ScrollBoxRenderable } from "../ui";
-import { type ReactNode, type RefObject } from "react";
-import { DataTableView } from "./data-table-view";
-import { PageStackView, type DataTableColumn, type DataTableProps } from "./ui";
-
-interface KeyboardEventLike {
-  name?: string;
-  preventDefault?: () => void;
-  stopPropagation?: () => void;
-}
+import { type ReactNode } from "react";
+import {
+  DataTableView,
+  type DataTableKeyEvent,
+  type DataTableViewProps,
+} from "./data-table-view";
+import { PageStackView, type DataTableColumn } from "./ui";
 
 export interface DataTableStackViewProps<
   T,
   C extends DataTableColumn = DataTableColumn,
-> extends Omit<
-    DataTableProps<T, C>,
-    | "headerScrollRef"
-    | "scrollRef"
-    | "syncHeaderScroll"
-    | "onBodyScrollActivity"
-    | "hoveredIdx"
-    | "setHoveredIdx"
-  > {
+> extends Omit<DataTableViewProps<T, C>, "focused" | "selectedIndex"> {
   focused: boolean;
   detailOpen: boolean;
   onBack: () => void;
   detailContent: ReactNode;
   detailTitle?: string;
   selectedIndex: number;
-  onSelectIndex?: (index: number, item: T) => void;
-  onActivateIndex?: (index: number, item: T) => void;
-  isNavigable?: (item: T, index: number) => boolean;
-  rootBefore?: ReactNode;
-  rootAfter?: ReactNode;
-  rootWidth?: number;
-  rootHeight?: number;
-  rootBackgroundColor?: string;
-  headerScrollRef?: RefObject<ScrollBoxRenderable | null>;
-  scrollRef?: RefObject<ScrollBoxRenderable | null>;
-  syncHeaderScroll?: () => void;
-  onBodyScrollActivity?: () => void;
-  hoveredIdx?: number | null;
-  setHoveredIdx?: (index: number | null) => void;
-  keyboardNavigation?: boolean;
-  onRootKeyDown?: (event: KeyboardEventLike) => boolean | void;
-  onDetailKeyDown?: (event: KeyboardEventLike) => boolean | void;
+  onDetailKeyDown?: (event: DataTableKeyEvent) => boolean | void;
 }
 
 export function DataTableStackView<
@@ -56,42 +29,9 @@ export function DataTableStackView<
   onBack,
   detailContent,
   detailTitle,
-  selectedIndex,
-  onSelectIndex,
-  onActivateIndex,
-  isNavigable,
-  rootBefore,
-  rootAfter,
-  rootWidth,
-  rootHeight,
-  rootBackgroundColor,
-  headerScrollRef,
-  scrollRef,
-  syncHeaderScroll,
-  onBodyScrollActivity,
-  hoveredIdx,
-  setHoveredIdx,
   keyboardNavigation = true,
-  onRootKeyDown,
   onDetailKeyDown,
-  columns,
-  items,
-  sortColumnId,
-  sortDirection,
-  onHeaderClick,
-  getItemKey,
-  isSelected,
-  onSelect,
-  onActivate,
-  renderCell,
-  renderSectionHeader,
-  getRowBackgroundColor,
-  emptyContent,
-  emptyStateTitle,
-  emptyStateHint,
-  virtualize = true,
-  overscan,
-  showHorizontalScrollbar,
+  ...tableProps
 }: DataTableStackViewProps<T, C>) {
   useShortcut((event) => {
     if (!focused || !detailOpen || !keyboardNavigation) return;
@@ -100,42 +40,9 @@ export function DataTableStackView<
 
   const rootContent = (
     <DataTableView<T, C>
+      {...tableProps}
       focused={focused && !detailOpen}
-      selectedIndex={selectedIndex}
-      onSelectIndex={onSelectIndex}
-      onActivateIndex={onActivateIndex}
-      isNavigable={isNavigable}
-      rootBefore={rootBefore}
-      rootAfter={rootAfter}
-      rootWidth={rootWidth}
-      rootHeight={rootHeight}
-      rootBackgroundColor={rootBackgroundColor}
-      headerScrollRef={headerScrollRef}
-      scrollRef={scrollRef}
-      syncHeaderScroll={syncHeaderScroll}
-      onBodyScrollActivity={onBodyScrollActivity}
-      hoveredIdx={hoveredIdx}
-      setHoveredIdx={setHoveredIdx}
       keyboardNavigation={keyboardNavigation}
-      onRootKeyDown={onRootKeyDown}
-      columns={columns}
-      items={items}
-      sortColumnId={sortColumnId}
-      sortDirection={sortDirection}
-      onHeaderClick={onHeaderClick}
-      getItemKey={getItemKey}
-      isSelected={isSelected}
-      onSelect={onSelect}
-      onActivate={onActivate}
-      renderCell={renderCell}
-      renderSectionHeader={renderSectionHeader}
-      getRowBackgroundColor={getRowBackgroundColor}
-      emptyContent={emptyContent}
-      emptyStateTitle={emptyStateTitle}
-      emptyStateHint={emptyStateHint}
-      virtualize={virtualize}
-      overscan={overscan}
-      showHorizontalScrollbar={showHorizontalScrollbar}
     />
   );
 

package/src/components/data-table-view.tsx

@@ -2,24 +2,26 @@ import {
   useCallback,
   useEffect,
   useMemo,
-  useRef,
   useState,
   type ReactNode,
   type RefObject,
 } from "react";
-import { Box, type ScrollBoxRenderable } from "../ui";
+import type { ScrollBoxRenderable } from "../ui";
 import { useShortcut } from "../react/input";
 import { DataTable, type DataTableColumn, type DataTableProps } from "./ui";
-
-export interface DataTableKeyEvent {
-  name?: string;
-  ctrl?: boolean;
-  meta?: boolean;
-  option?: boolean;
-  shift?: boolean;
-  preventDefault?: () => void;
-  stopPropagation?: () => void;
-}
+import {
+  isNextTableRowKey,
+  isPreviousTableRowKey,
+  isTableActivationKey,
+  stopTableKey,
+  TableViewFrame,
+  type TableViewKeyEvent,
+  useResetTableScroll,
+  useTableBodyScrollActivity,
+  useTableViewState,
+} from "./table-view-shared";
+
+export type DataTableKeyEvent = TableViewKeyEvent;
 
 export interface DataTableViewProps<
   T,
@@ -54,23 +56,6 @@ export interface DataTableViewProps<
   resetScrollKey?: unknown;
 }
 
-function isActivationKey(name: string | undefined): boolean {
-  return name === "enter" || name === "return";
-}
-
-function isNextRowKey(name: string | undefined): boolean {
-  return name === "j" || name === "down";
-}
-
-function isPreviousRowKey(name: string | undefined): boolean {
-  return name === "k" || name === "up";
-}
-
-function stopTableKey(event: DataTableKeyEvent) {
-  event.stopPropagation?.();
-  event.preventDefault?.();
-}
-
 export function DataTableView<
   T,
   C extends DataTableColumn = DataTableColumn,
@@ -97,17 +82,19 @@ export function DataTableView<
   scrollToIndex,
   ...tableProps
 }: DataTableViewProps<T, C>) {
-  const internalHeaderScrollRef = useRef<ScrollBoxRenderable>(null);
-  const internalScrollRef = useRef<ScrollBoxRenderable>(null);
-  const [internalHoveredIdx, setInternalHoveredIdx] = useState<number | null>(
-    null,
-  );
-
-  const effectiveHeaderScrollRef = headerScrollRef ?? internalHeaderScrollRef;
-  const effectiveScrollRef = scrollRef ?? internalScrollRef;
-  const effectiveHoveredIdx =
-    hoveredIdx !== undefined ? hoveredIdx : internalHoveredIdx;
-  const effectiveSetHoveredIdx = setHoveredIdx ?? setInternalHoveredIdx;
+  const {
+    effectiveHeaderScrollRef,
+    effectiveScrollRef,
+    effectiveHoveredIdx,
+    effectiveSetHoveredIdx,
+    effectiveSyncHeaderScroll,
+  } = useTableViewState({
+    headerScrollRef,
+    scrollRef,
+    syncHeaderScroll,
+    hoveredIdx,
+    setHoveredIdx,
+  });
   const [fallbackSelectedIndex, setFallbackSelectedIndex] = useState<
     number | null
   >(null);
@@ -148,36 +135,16 @@ export function DataTableView<
     setFallbackSelectedIndex(nextIndex);
   }, [fallbackSelectedIndex, navigableIndices, usesFallbackSelection]);
 
-  const defaultSyncHeaderScroll = useCallback(() => {
-    const body = effectiveScrollRef.current;
-    const header = effectiveHeaderScrollRef.current;
-    if (!body || !header) return;
-    if (header.scrollLeft !== body.scrollLeft) {
-      header.scrollLeft = body.scrollLeft;
-    }
-  }, [effectiveHeaderScrollRef, effectiveScrollRef]);
-  const effectiveSyncHeaderScroll = syncHeaderScroll ?? defaultSyncHeaderScroll;
-
-  const handleBodyScrollActivity = useCallback(() => {
-    if (onBodyScrollActivity) {
-      onBodyScrollActivity();
-      return;
-    }
-    queueMicrotask(effectiveSyncHeaderScroll);
-  }, [effectiveSyncHeaderScroll, onBodyScrollActivity]);
+  const handleBodyScrollActivity = useTableBodyScrollActivity({
+    onBodyScrollActivity,
+    syncHeaderScroll: effectiveSyncHeaderScroll,
+  });
 
-  useEffect(() => {
-    if (resetScrollKey === undefined) return;
-    const body = effectiveScrollRef.current;
-    if (body) {
-      body.scrollTop = 0;
-      body.scrollLeft = 0;
-    }
-    const header = effectiveHeaderScrollRef.current;
-    if (header) {
-      header.scrollLeft = 0;
-    }
-  }, [effectiveHeaderScrollRef, effectiveScrollRef, resetScrollKey]);
+  useResetTableScroll({
+    headerScrollRef: effectiveHeaderScrollRef,
+    scrollRef: effectiveScrollRef,
+    resetScrollKey,
+  });
 
   const selectIndex = useCallback((index: number) => {
     if (index < 0 || index >= tableProps.items.length) return;
@@ -226,34 +193,32 @@ export function DataTableView<
     if (onRootKeyDown?.(event)) return;
     if (tableProps.items.length === 0) return;
 
-    if (isNextRowKey(event.name)) {
+    if (isNextTableRowKey(event.name)) {
       stopTableKey(event);
       selectByOffset(1);
       return;
     }
 
-    if (isPreviousRowKey(event.name)) {
+    if (isPreviousTableRowKey(event.name)) {
       stopTableKey(event);
       selectByOffset(-1);
       return;
     }
 
-    if (isActivationKey(event.name)) {
+    if (isTableActivationKey(event.name)) {
       stopTableKey(event);
       activateSelection();
     }
   });
 
   return (
-    <Box
-      flexDirection="column"
-      flexGrow={1}
+    <TableViewFrame
       width={rootWidth}
       height={rootHeight}
       backgroundColor={rootBackgroundColor}
-      overflow="hidden"
+      before={rootBefore}
+      after={rootAfter}
     >
-      {rootBefore}
       <DataTable<T, C>
         {...tableProps}
         headerScrollRef={effectiveHeaderScrollRef}
@@ -273,7 +238,6 @@ export function DataTableView<
           )
         )}
       />
-      {rootAfter}
-    </Box>
+    </TableViewFrame>
   );
 }

package/src/components/feed-data-table-stack-view.tsx

@@ -5,6 +5,12 @@ import { colors } from "../theme/colors";
 import { formatTimeAgo } from "../utils/format";
 import { toTimestampMillis } from "../utils/timestamp";
 import { DataTableStackView } from "./data-table-stack-view";
+import {
+  activeStackIndex,
+  sortIndexedStackRows,
+  type IndexedStackRow,
+  type StackSortPreference,
+} from "./feed-stack-controller";
 import { ExternalLink, type DataTableCell, type DataTableColumn } from "./ui";
 import { wrapTextLines } from "../utils/text-wrap";
 
@@ -23,15 +29,9 @@ export interface FeedDataTableItem {
 type DetailColumnId = "time" | "source" | "title";
 type DetailColumn = DataTableColumn & { id: DetailColumnId };
 
-interface DetailRow {
-  item: FeedDataTableItem;
-  itemIndex: number;
-}
+type DetailRow = IndexedStackRow<FeedDataTableItem>;
 
-interface SortPreference {
-  columnId: DetailColumnId;
-  direction: "asc" | "desc";
-}
+type SortPreference = StackSortPreference<DetailColumnId>;
 
 interface FeedDataTableStackViewProps {
   width: number;
@@ -151,19 +151,12 @@ export function FeedDataTableStackView({
     [items, sourceLabel, titleLabel, width],
   );
   const sortedRows = useMemo(() => {
-    const direction = sortPreference.direction === "asc" ? 1 : -1;
-    return items
-      .map((item, itemIndex) => ({ item, itemIndex }))
-      .sort((a, b) => {
-        const primary = compareRows(a, b, sortPreference.columnId) * direction;
-        return primary !== 0 ? primary : a.itemIndex - b.itemIndex;
-      });
+    return sortIndexedStackRows(items, sortPreference, compareRows);
   }, [items, sortPreference]);
   const selectedRowIndex = sortedRows.findIndex(
     (row) => row.itemIndex === selectedIdx,
   );
-  const activeRowIndex =
-    selectedRowIndex >= 0 ? selectedRowIndex : sortedRows.length > 0 ? 0 : -1;
+  const activeRowIndex = activeStackIndex(sortedRows.length, selectedRowIndex);
   const openItem = useMemo(
     () =>
       openItemId

package/src/components/feed-stack-controller.ts

@@ -0,0 +1,39 @@
+export interface StackSortPreference<C extends string> {
+  columnId: C;
+  direction: "asc" | "desc";
+}
+
+export interface IndexedStackRow<T> {
+  item: T;
+  itemIndex: number;
+}
+
+export function sortStackItems<T, C extends string>(
+  items: T[],
+  preference: StackSortPreference<C>,
+  compare: (a: T, b: T, columnId: C) => number,
+  tieBreak: (a: T, b: T) => number = () => 0,
+): T[] {
+  const direction = preference.direction === "asc" ? 1 : -1;
+  return [...items].sort((a, b) => {
+    const primary = compare(a, b, preference.columnId) * direction;
+    return primary !== 0 ? primary : tieBreak(a, b);
+  });
+}
+
+export function sortIndexedStackRows<T, C extends string>(
+  items: T[],
+  preference: StackSortPreference<C>,
+  compare: (a: IndexedStackRow<T>, b: IndexedStackRow<T>, columnId: C) => number,
+): Array<IndexedStackRow<T>> {
+  return sortStackItems(
+    items.map((item, itemIndex) => ({ item, itemIndex })),
+    preference,
+    compare,
+    (a, b) => a.itemIndex - b.itemIndex,
+  );
+}
+
+export function activeStackIndex(length: number, selectedIndex: number): number {
+  return selectedIndex >= 0 ? selectedIndex : length > 0 ? 0 : -1;
+}

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 { 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/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;
@@ -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,
@@ -60,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
@@ -97,11 +118,21 @@ export function FloatingPaneWrapper({
       />
 
       {/* Content */}
-      <Box height={bodyHeight} overflow="hidden">
+      <Box {...bodyLayoutProps} overflow="hidden" backgroundColor={bg}>
         {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 +148,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,7 @@
 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 { useThemeColors } from "../../theme/theme-context";
 import { useAppActive } from "../../state/app-activity";
 import { useAppDispatch, useAppSelector } from "../../state/app-context";
 import {
@@ -23,8 +24,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;
@@ -121,6 +122,7 @@ function UpdateStatus() {
 }
 
 export function Header() {
+  useThemeColors();
   const baseCurrency = useAppSelector(selectBaseCurrency);
   const appActive = useAppActive();
   const { titleBarOverlay } = useUiCapabilities();
@@ -173,8 +175,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 +186,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}