gloomberb 0.9.0 → 0.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gloomberb",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "description": "Market research and portfolio tracker for the terminal",
   "module": "src/index.tsx",
   "type": "module",
@@ -21,6 +21,7 @@
     "desktop:dev": "electrobun dev --watch",
     "desktop:build": "electrobun build",
     "desktop:release": "electrobun build --env=stable",
+    "desktop:release:windows": "electrobun build --env=stable --targets=win-x64",
     "test": "bun test",
     "release": "./scripts/release.sh"
   },
@@ -40,6 +41,8 @@
     "@types/bun": "^1.3.14",
     "@types/react-dom": "^19.2.3",
     "electrobun": "^1.18.1",
+    "png-to-ico": "^2.1.8",
+    "rcedit": "^4.0.1",
     "react-dom": "19.2.7"
   },
   "peerDependencies": {
@@ -59,6 +62,7 @@
     "web-tree-sitter": "0.25.10"
   },
   "patchedDependencies": {
-    "@opentui/core@0.3.2": "patches/@opentui%2Fcore@0.3.2.patch"
+    "@opentui/core@0.3.2": "patches/@opentui%2Fcore@0.3.2.patch",
+    "electrobun@1.18.1": "patches/electrobun@1.18.1.patch"
   }
 }

package/patches/electrobun@1.18.1.patch

@@ -0,0 +1,85 @@
+diff --git a/dist/api/bun/core/BrowserWindow.ts b/dist/api/bun/core/BrowserWindow.ts
+index c26c2c977ee1fc25a8dc144b85bac8626a45f572..8920a2905380228c23cba66c20d9bfd19ee13e02 100644
+--- a/dist/api/bun/core/BrowserWindow.ts
++++ b/dist/api/bun/core/BrowserWindow.ts
+@@ -8,9 +8,18 @@ import { type RPCWithTransport } from "../../shared/rpc.js";
+ import { getNextWindowId } from "./windowIds";
+ import { GpuWindowMap } from "./GpuWindow";
+ import { WGPUView } from "./WGPUView";
++import { existsSync } from "fs";
++import { resolve } from "path";
+ 
+ const buildConfig = await BuildConfig.get();
+ 
++function defaultWindowIconPath(): string | null {
++	if (process.platform !== "win32") return null;
++
++	const iconPath = resolve("../Resources/app.ico");
++	return existsSync(iconPath) ? iconPath : null;
++}
++
+ export type WindowOptionsType<T = undefined> = {
+ 	trafficLightOffset?: {
+ 		x: number;
+@@ -28,6 +37,7 @@ export type WindowOptionsType<T = undefined> = {
+ 	html: string | null;
+ 	preload: string | null;
+ 	viewsRoot: string | null;
++	iconPath?: string | null;
+ 	renderer: "native" | "cef";
+ 	rpc?: T;
+ 	styleMask?: {};
+@@ -124,6 +134,7 @@ export class BrowserWindow<T extends RPCWithTransport = RPCWithTransport> {
+ 	html: string | null = null;
+ 	preload: string | null = null;
+ 	viewsRoot: string | null = null;
++	iconPath: string | null = null;
+ 	renderer: "native" | "cef" = "native";
+ 	transparent: boolean = false;
+ 	passthrough: boolean = false;
+@@ -155,6 +166,7 @@ export class BrowserWindow<T extends RPCWithTransport = RPCWithTransport> {
+ 		this.html = options.html || null;
+ 		this.preload = options.preload || null;
+ 		this.viewsRoot = options.viewsRoot || null;
++		this.iconPath = options.iconPath ?? defaultWindowIconPath();
+ 		this.renderer = options.renderer || defaultOptions.renderer;
+ 		this.transparent = options.transparent ?? false;
+ 		this.passthrough = options.passthrough ?? false;
+@@ -181,6 +193,7 @@ export class BrowserWindow<T extends RPCWithTransport = RPCWithTransport> {
+ 			id: this.id,
+ 			title: this.title,
+ 			url: this.url || "",
++			iconPath: this.iconPath,
+ 			frame: {
+ 				width: this.frame.width,
+ 				height: this.frame.height,
+diff --git a/dist/api/bun/proc/native.ts b/dist/api/bun/proc/native.ts
+index f0f6c2532ba2eb467ec1d452a25c835b6db72661..ae77cf58d32392ad4cc8e2103ac7ed27baae8bea 100644
+--- a/dist/api/bun/proc/native.ts
++++ b/dist/api/bun/proc/native.ts
+@@ -829,6 +829,7 @@ const _ffiImpl = {
+ 			id: number;
+ 			url: string | null;
+ 			title: string;
++			iconPath?: string | null;
+ 			frame: {
+ 				width: number;
+ 				height: number;
+@@ -862,6 +863,7 @@ const _ffiImpl = {
+ 				id,
+ 				url: _url,
+ 				title,
++				iconPath,
+ 				frame: { x, y, width, height },
+ 				styleMask: {
+ 					Borderless,
+@@ -926,6 +928,9 @@ const _ffiImpl = {
+ 			}
+ 
+ 			native_.symbols.setWindowTitle(windowPtr, toCString(title));
++			if (iconPath) {
++				native_.symbols.setWindowIcon(windowPtr, toCString(iconPath));
++			}
+ 			if (!hidden) {
+ 				native_.symbols.showWindow(windowPtr, activate);
+ 			}

package/src/app/global-shortcuts.test.tsx

@@ -135,6 +135,18 @@ describe("useAppGlobalShortcuts", () => {
     expect(event.propagationStopped).toBe(true);
   });
 
+  test("toggles the command bar with Ctrl-K", async () => {
+    const actions: AppAction[] = [];
+    const state = createInitialState(createDefaultConfig("/tmp/gloomberb-global-shortcuts"));
+    await renderHarness(state, createRegistry(), (action) => actions.push(action));
+
+    const event = await emitKeypress({ name: "k", ctrl: true });
+
+    expect(actions).toEqual([{ type: "TOGGLE_COMMAND_BAR" }]);
+    expect(event.defaultPrevented).toBe(true);
+    expect(event.propagationStopped).toBe(true);
+  });
+
   test("opens ticker search with backtick", async () => {
     const actions: AppAction[] = [];
     const state = createInitialState(createDefaultConfig("/tmp/gloomberb-global-shortcuts"));

package/src/app/global-shortcuts.ts

@@ -52,7 +52,7 @@ export function useAppGlobalShortcuts({
 
     if (!isDetachedWindow && (
       (event.name === "p" && event.ctrl)
-      || (event.name === "k" && (event.meta || event.super))
+      || (event.name === "k" && (event.ctrl || event.meta || event.super))
     )) {
       event.preventDefault();
       event.stopPropagation();

package/src/components/chart/comparison-stock-chart/helpers.ts

@@ -2,8 +2,6 @@ import type { PricePoint } from "../../../types/financials";
 import type { LocalPlotPointer } from "../core/pointer";
 import type { ComparisonChartRenderMode } from "../core/types";
 import type { projectComparisonChartData } from "../comparison/data";
-import { formatPercentRaw } from "../../../utils/format";
-import { formatMarketPriceWithCurrency } from "../../../market-data/market/format";
 
 export function clamp(value: number, min: number, max: number): number {
   return Math.max(min, Math.min(max, value));
@@ -42,36 +40,6 @@ export function buildComparisonNativeBitmapKey(
   ].join("::");
 }
 
-export function getLegendColumns(width: number): number {
-  if (width >= 110) return 3;
-  if (width >= 72) return 2;
-  return 1;
-}
-
-export function clipText(text: string, width: number): string {
-  if (width <= 0) return "";
-  if (text.length <= width) return text.padEnd(width);
-  if (width <= 3) return text.slice(0, width);
-  return `${text.slice(0, width - 3)}...`;
-}
-
-export function formatLegendSummary(
-  symbol: string,
-  rawValue: number | null,
-  baseValue: number | null,
-  currency: string,
-  priceRange: number | undefined,
-): string {
-  if (rawValue === null) return `${symbol} waiting`;
-  const price = formatMarketPriceWithCurrency(rawValue, currency, {
-    minimumFractionDigits: 2,
-    precisionOffset: 1,
-    priceRange,
-  });
-  if (baseValue === null || baseValue === 0) return `${symbol} ${price}`;
-  return `${symbol} ${price} ${formatPercentRaw(((rawValue - baseValue) / baseValue) * 100)}`;
-}
-
 export function getInitialComparisonMode(mode: string | undefined): ComparisonChartRenderMode {
   return mode === "line" ? "line" : "area";
 }

package/src/components/chart/comparison-stock-chart/layout-metrics.ts

@@ -1,5 +1,4 @@
 import type { ChartAxisMode } from "../core/types";
-import { getLegendColumns } from "./helpers";
 
 export interface ComparisonChartLayoutMetrics {
   axisGap: number;
@@ -36,15 +35,16 @@ export function resolveComparisonChartLayoutMetrics({
   const controlRows = 2;
   const timeAxisRows = 1;
   const helpRows = 0;
-  const legendColumns = getLegendColumns(width);
-  const legendNeededRows = symbolCount > 0 ? Math.ceil(symbolCount / legendColumns) : 0;
-  const legendRows = legendNeededRows > 0
-    ? Math.min(4, Math.max(Math.min(height - (headerRows + controlRows + timeAxisRows + helpRows + 4), legendNeededRows), 1))
+  const legendColumns = 1;
+  const legendNeededRows = symbolCount > 0 ? symbolCount + 1 : 0;
+  const legendAvailableRows = Math.max(height - (headerRows + controlRows + timeAxisRows + helpRows + 6), 0);
+  const legendRows = legendNeededRows > 0 && legendAvailableRows > 0
+    ? Math.min(5, Math.max(2, Math.min(legendAvailableRows, legendNeededRows)))
     : 0;
   const chartHeight = Math.max(height - headerRows - controlRows - timeAxisRows - helpRows - legendRows, 4);
   const minChartWidth = 20;
   const measurementChartWidth = Math.max(width - axisSectionWidthBudget - axisGap, minChartWidth);
-  const legendItemWidth = Math.max(Math.floor((width - Math.max(legendColumns - 1, 0)) / legendColumns), 20);
+  const legendItemWidth = Math.max(width, 20);
 
   return {
     axisGap,

package/src/components/chart/comparison-stock-chart/legend.tsx

@@ -1,73 +1,70 @@
-import { Box, ScrollBox, Text, TextAttributes } from "../../../ui";
-import { blendHex, colors } from "../../../theme/colors";
 import type { ComparisonChartProjection } from "../comparison/data";
-import { clipText, formatLegendSummary } from "./helpers";
+import { PriceReturnTable, type PriceReturnTableRow } from "../../price-performance";
+import type { PriceReturnField } from "../../../market-data/performance";
 
 interface ComparisonChartLegendProps {
   legendActiveIndex: number | null;
-  legendColumns: number;
   legendItemWidth: number;
   legendRows: number;
   onOpenSymbol: (symbol: string) => void;
   onSelectSymbol: (symbol: string) => void;
+  performanceBySymbol: ReadonlyMap<string, PriceReturnField[]>;
   projection: ComparisonChartProjection;
   selectedSymbol: string | null;
   symbols: string[];
-  visiblePriceRange: number | undefined;
+}
+
+function buildRangeReturnField(
+  item: ComparisonChartProjection["series"][number] | null,
+  legendActiveIndex: number | null,
+): PriceReturnField {
+  const activeRaw = legendActiveIndex !== null
+    ? item?.points[legendActiveIndex]?.rawValue ?? null
+    : item?.latestRawValue ?? null;
+  const baseValue = item?.baseValue ?? null;
+  const value = activeRaw != null && baseValue != null && baseValue !== 0
+    ? (activeRaw - baseValue) / baseValue
+    : null;
+  return {
+    id: "RNG",
+    label: "Rng",
+    value,
+  };
 }
 
 export function ComparisonChartLegend({
   legendActiveIndex,
-  legendColumns,
   legendItemWidth,
   legendRows,
   onOpenSymbol,
   onSelectSymbol,
+  performanceBySymbol,
   projection,
   selectedSymbol,
   symbols,
-  visiblePriceRange,
 }: ComparisonChartLegendProps) {
   if (legendRows <= 0) return null;
 
-  const legendRowsData = Array.from({ length: Math.ceil(symbols.length / legendColumns) }, (_, rowIndex) => (
-    symbols.slice(rowIndex * legendColumns, rowIndex * legendColumns + legendColumns)
-  ));
+  const rows: PriceReturnTableRow[] = symbols.map((symbol) => {
+    const item = projection.series.find((entry) => entry.symbol === symbol) ?? null;
+    return {
+      symbol,
+      color: item?.color ?? "#888888",
+      fields: [
+        buildRangeReturnField(item, legendActiveIndex),
+        ...(performanceBySymbol.get(symbol) ?? []),
+      ],
+      selected: selectedSymbol === symbol,
+    };
+  });
 
   return (
-    <ScrollBox height={legendRows} scrollY>
-      <Box flexDirection="column">
-        {legendRowsData.map((legendRow, rowIndex) => (
-          <Box key={`legend-row:${rowIndex}`} flexDirection="row" gap={1}>
-            {legendRow.map((symbol) => {
-              const item = projection.series.find((entry) => entry.symbol === symbol) ?? null;
-              const isSelected = selectedSymbol === symbol;
-              const activeRaw = legendActiveIndex !== null
-                ? item?.points[legendActiveIndex]?.rawValue ?? null
-                : item?.latestRawValue ?? null;
-              const currency = item?.currency ?? "USD";
-              const summary = formatLegendSummary(symbol, activeRaw, item?.baseValue ?? null, currency, visiblePriceRange);
-
-              return (
-                <Box
-                  key={symbol}
-                  width={legendItemWidth}
-                  backgroundColor={isSelected ? blendHex(colors.panel, colors.borderFocused, 0.18) : colors.panel}
-                  onMouseMove={() => onSelectSymbol(symbol)}
-                  onMouseDown={() => {
-                    onSelectSymbol(symbol);
-                    onOpenSymbol(symbol);
-                  }}
-                >
-                  <Text fg={item?.color ?? colors.textDim} attributes={isSelected ? TextAttributes.BOLD : 0}>
-                    {clipText(`${isSelected ? ">" : " "} ${summary}`, legendItemWidth)}
-                  </Text>
-                </Box>
-              );
-            })}
-          </Box>
-        ))}
-      </Box>
-    </ScrollBox>
+    <PriceReturnTable
+      height={legendRows}
+      onOpenSymbol={onOpenSymbol}
+      onSelectSymbol={onSelectSymbol}
+      rows={rows}
+      width={legendItemWidth}
+    />
   );
 }

package/src/components/chart/comparison-stock-chart/view.tsx

@@ -5,6 +5,11 @@ import { blendHex, colors } from "../../../theme/colors";
 import { useThemeColors } from "../../../theme/theme-context";
 import { usePaneSettingValue } from "../../../state/app/context";
 import { useQuoteStreaming } from "../../../state/hooks/quote-streaming";
+import {
+  appendQuoteToPriceReturnHistory,
+  buildPriceReturnFields,
+  type PriceReturnField,
+} from "../../../market-data/performance";
 import type { QuoteSubscriptionTarget } from "../../../types/data-provider";
 import {
   type ChartRendererPreference,
@@ -170,6 +175,27 @@ function useComparisonChartQuoteStreaming({
   useQuoteStreaming(streamingTargets);
 }
 
+function getOneYearReturn(fields: readonly PriceReturnField[]): number | null {
+  return fields.find((field) => field.id === "1Y")?.value ?? null;
+}
+
+function sortSymbolsByOneYearReturn(
+  symbols: readonly string[],
+  performanceBySymbol: ReadonlyMap<string, PriceReturnField[]>,
+): string[] {
+  const originalIndex = new Map(symbols.map((symbol, index) => [symbol, index]));
+  return [...symbols].sort((left, right) => {
+    const leftReturn = getOneYearReturn(performanceBySymbol.get(left) ?? []);
+    const rightReturn = getOneYearReturn(performanceBySymbol.get(right) ?? []);
+    if (leftReturn != null && rightReturn != null && leftReturn !== rightReturn) {
+      return rightReturn - leftReturn;
+    }
+    if (leftReturn != null && rightReturn == null) return -1;
+    if (leftReturn == null && rightReturn != null) return 1;
+    return (originalIndex.get(left) ?? 0) - (originalIndex.get(right) ?? 0);
+  });
+}
+
 function ComparisonStockChartView({
   paneId,
   width,
@@ -250,6 +276,22 @@ function ComparisonStockChartView({
     symbolSources,
     viewState,
   });
+  const performanceBySymbol = useMemo(() => {
+    const bySymbol = new Map<string, PriceReturnField[]>();
+    for (const source of symbolSources) {
+      const sourceHistory = appendQuoteToPriceReturnHistory(source.priceHistory, source.quote);
+      const fallbackHistory = series.find((entry) => entry.symbol === source.symbol)?.points ?? [];
+      bySymbol.set(
+        source.symbol,
+        buildPriceReturnFields(sourceHistory.length >= 2 ? sourceHistory : fallbackHistory),
+      );
+    }
+    return bySymbol;
+  }, [series, symbolSources]);
+  const summarySymbols = useMemo(
+    () => sortSymbolsByOneYearReturn(symbols, performanceBySymbol),
+    [performanceBySymbol, symbols],
+  );
 
   useEffect(() => {
     if (symbols.includes(viewState.selectedSymbol ?? "")) return;
@@ -311,7 +353,7 @@ function ComparisonStockChartView({
     cursorY: viewState.cursorY,
     renderer,
     setViewState,
-    symbols,
+    symbols: summarySymbols,
   });
   const {
     activePreset,
@@ -352,7 +394,6 @@ function ComparisonStockChartView({
     result,
     staticScene,
     timeAxisLabel,
-    visiblePriceRange,
   } = useComparisonChartRenderOutput({
     axisMode,
     chartColors,
@@ -386,7 +427,7 @@ function ComparisonStockChartView({
     setResolution,
     setViewState,
     supportMap,
-    symbols,
+    symbols: summarySymbols,
     updateDisplayCursorTarget,
     viewState,
     visibleDateWindow,
@@ -479,15 +520,14 @@ function ComparisonStockChartView({
       legend={(
         <ComparisonChartLegend
           legendActiveIndex={legendActiveIndex}
-          legendColumns={legendColumns}
           legendItemWidth={legendItemWidth}
           legendRows={legendRows}
           onOpenSymbol={onOpenSymbol}
           onSelectSymbol={setSelectedSymbol}
+          performanceBySymbol={performanceBySymbol}
           projection={projection}
           selectedSymbol={viewState.selectedSymbol}
-          symbols={symbols}
-          visiblePriceRange={visiblePriceRange}
+          symbols={summarySymbols}
         />
       )}
       plotBitmaps={plotBitmaps}

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

@@ -12,7 +12,8 @@ import { PaneBodyFrame, getPaneWindowAttributes } from "./pane/frame";
 import { PaneContent } from "./pane/content";
 import { resolvePaneBodyFrame } from "./pane/sizing";
 import { getPaneDisplayTitle } from "./pane/title";
-import { TITLEBAR_OVERLAY_HEIGHT_PX, TITLEBAR_TRAFFIC_LIGHT_WIDTH } from "./titlebar-overlay";
+import { TITLEBAR_OVERLAY_HEIGHT_PX, getTitlebarLeadingInset } from "./titlebar-overlay";
+import { WindowControls, WINDOWS_CONTROL_GROUP_WIDTH_PX } from "./window-controls";
 import {
   createDoubleEscapeCloseState,
   recordDoubleEscapeClose,
@@ -41,7 +42,9 @@ export function DetachedPaneShell({ pluginRegistry, desktopWindowBridge }: Detac
     typeof document === "undefined" ? true : document.hasFocus()
   ));
   const { width, height } = useViewport();
-  const { cellHeightPx = 18, nativePaneChrome, titleBarOverlay } = useUiCapabilities();
+  const { cellHeightPx = 18, nativePaneChrome, titleBarOverlay, windowControls } = useUiCapabilities();
+  const showWindowControls = windowControls === "windows";
+  const titlebarLeadingInset = titleBarOverlay ? getTitlebarLeadingInset() : 0;
   const instance = useAppSelector((state) => findPaneInstance(state.config.layout, desktopWindowBridge.paneId) ?? null);
   const paneDef = instance ? pluginRegistry.panes.get(instance.paneId) ?? null : null;
   const hasPaneSettings = !!instance && pluginRegistry.hasPaneSettings(instance.instanceId);
@@ -171,8 +174,10 @@ export function DetachedPaneShell({ pluginRegistry, desktopWindowBridge }: Detac
                 alignItems="center"
                 flexGrow={1}
                 minWidth={0}
-                paddingLeft={titleBarOverlay ? TITLEBAR_TRAFFIC_LIGHT_WIDTH : 1}
-                paddingRight={1}
+                backgroundColor={titleBackground}
+                paddingLeft={titleBarOverlay ? titlebarLeadingInset : 1}
+                paddingRight={showWindowControls ? 0 : 1}
+                style={{ position: "relative" }}
               >
                 <Box flexGrow={1} minWidth={0} overflow="hidden">
                   <Text fg={paneTitleText(focused, true)} selectable={false} data-gloom-role="pane-title">{title}</Text>
@@ -189,6 +194,8 @@ export function DetachedPaneShell({ pluginRegistry, desktopWindowBridge }: Detac
                     {" ... "}
                   </Text>
                 )}
+                {showWindowControls ? <Box flexShrink={0} width={`${WINDOWS_CONTROL_GROUP_WIDTH_PX}px`} /> : null}
+                {showWindowControls ? <WindowControls windowKind="detached" /> : null}
               </Box>
             </Box>
             <PaneBodyFrame layoutProps={bodyFrame.layoutProps} backgroundColor={background}>

package/src/components/layout/header.tsx

@@ -1,5 +1,5 @@
-import { Box, SpinnerMark, Text, TextAttributes, useUiCapabilities } from "../../ui";
-import { useEffect, type ReactNode } from "react";
+import { Box, SpinnerMark, Text, TextAttributes, useRendererHost, useUiCapabilities } from "../../ui";
+import { useCallback, useEffect, type ReactNode } from "react";
 import { blendHex, colors, priceColor } from "../../theme/colors";
 import { useThemeColors } from "../../theme/theme-context";
 import { useAppActive } from "../../state/app/activity";
@@ -17,7 +17,8 @@ import { formatPercentRaw } from "../../utils/format";
 import { formatMarketPrice } from "../../market-data/market/format";
 import { marketStateLabel, marketStateColor, getActiveQuoteDisplay } from "../../market-data/market/status";
 import { VERSION } from "../../version";
-import { TITLEBAR_TRAFFIC_LIGHT_WIDTH } from "./titlebar-overlay";
+import { getTitlebarLeadingInset } from "./titlebar-overlay";
+import { WindowControls, WINDOWS_CONTROL_GROUP_WIDTH_PX } from "./window-controls";
 
 const SPY_REFRESH_MS = 5 * 60_000; // 5 min
 const UPDATE_NOTICE_DURATION_MS = 5_000;
@@ -123,9 +124,12 @@ function UpdateStatus() {
 
 export function Header() {
   useThemeColors();
+  const rendererHost = useRendererHost();
   const baseCurrency = useAppSelector(selectBaseCurrency);
   const appActive = useAppActive();
-  const { titleBarOverlay } = useUiCapabilities();
+  const { titleBarOverlay, windowControls } = useUiCapabilities();
+  const showWindowControls = windowControls === "windows";
+  const titlebarLeadingInset = titleBarOverlay ? getTitlebarLeadingInset() : 0;
   const spyQuoteEntry = useQuoteEntry("SPY", null);
   const spyQuote = useResolvedEntryValue(spyQuoteEntry);
 
@@ -147,6 +151,11 @@ export function Header() {
     ? `SPY ${formatMarketPrice(activeSpyQuote.price, { assetCategory: "ETF" })} ${formatPercentRaw(activeSpyQuote.changePercent)}`
     : "SPY —";
 
+  const startWindowDrag = useCallback(() => {
+    if (!titleBarOverlay) return;
+    void rendererHost.startWindowDrag?.();
+  }, [rendererHost, titleBarOverlay]);
+
   // Market status
   const mktState = spyQuote?.marketState;
   const mktLabel = mktState ? marketStateLabel(mktState) : "";
@@ -161,14 +170,15 @@ export function Header() {
         backgroundColor={colors.header}
         data-gloom-role="app-header"
         data-titlebar-overlay="true"
-        className="electrobun-webkit-app-region-drag"
+        onMouseDown={startWindowDrag}
         style={{
           boxShadow: `0 -1px 0 ${colors.header}, inset 0 1px 0 ${colors.header}`,
           paddingLeft: 8,
-          paddingRight: 12,
+          paddingRight: showWindowControls ? 0 : 12,
+          position: "relative",
         }}
       >
-        <Box paddingLeft={TITLEBAR_TRAFFIC_LIGHT_WIDTH} flexDirection="row" alignItems="center" gap={1}>
+        <Box paddingLeft={titlebarLeadingInset} flexDirection="row" alignItems="center" gap={1}>
           <Text attributes={TextAttributes.BOLD} fg={colors.headerText}>
             Gloomberb
           </Text>
@@ -195,7 +205,11 @@ export function Header() {
         <Box paddingRight={1}>
           <Text fg={spyColor}>{spyText}</Text>
         </Box>
-        <Text fg={colors.headerText}>{baseCurrency}</Text>
+        <Box paddingRight={showWindowControls ? 1 : 0}>
+          <Text fg={colors.headerText}>{baseCurrency}</Text>
+        </Box>
+        {showWindowControls ? <Box flexShrink={0} width={`${WINDOWS_CONTROL_GROUP_WIDTH_PX}px`} /> : null}
+        {showWindowControls ? <WindowControls /> : null}
       </Box>
     );
   }
@@ -207,9 +221,9 @@ export function Header() {
       backgroundColor={colors.header}
       data-gloom-role="app-header"
       data-titlebar-overlay={titleBarOverlay ? "true" : undefined}
-      className={titleBarOverlay ? "electrobun-webkit-app-region-drag" : undefined}
+      onMouseDown={startWindowDrag}
     >
-      <Box paddingLeft={titleBarOverlay ? TITLEBAR_TRAFFIC_LIGHT_WIDTH : 1}>
+      <Box paddingLeft={titleBarOverlay ? titlebarLeadingInset : 1}>
         <Text attributes={TextAttributes.BOLD} fg={colors.headerText}>
           Gloomberb v{VERSION}
         </Text>
@@ -230,6 +244,7 @@ export function Header() {
           {baseCurrency}
         </Text>
       </Box>
+      {showWindowControls ? <WindowControls /> : null}
     </Box>
   );
 }

package/src/components/layout/titlebar-overlay.ts

@@ -1,2 +1,18 @@
 export const TITLEBAR_TRAFFIC_LIGHT_WIDTH = 8;
 export const TITLEBAR_OVERLAY_HEIGHT_PX = 28;
+
+function currentPlatform(): string {
+  const globalWithNavigator = globalThis as typeof globalThis & {
+    navigator?: {
+      platform?: string;
+      userAgentData?: { platform?: string };
+    };
+  };
+  return globalWithNavigator.navigator?.userAgentData?.platform
+    ?? globalWithNavigator.navigator?.platform
+    ?? "";
+}
+
+export function getTitlebarLeadingInset(platform = currentPlatform()): number {
+  return /mac/i.test(platform) ? TITLEBAR_TRAFFIC_LIGHT_WIDTH : 0;
+}