gloomberb 0.9.4 → 0.9.6

package/src/components/layout/pane/footer/index.tsx

@@ -2,6 +2,7 @@ import { Box, Span, Text, TextAttributes, useUiCapabilities } from "../../../../
 import { useRef } from "react";
 import { colors, blendHex } from "../../../../theme/colors";
 import { getShortcutHintWidth, ShortcutHint } from "../../../ui/shortcut-hint";
+import { useRemoteUiNode } from "../../../../remote/semantic-tree";
 import {
   EMPTY_FOOTER,
   hasPaneFooterContent,
@@ -50,6 +51,15 @@ function stopMouseEvent(event?: { stopPropagation?: () => void; preventDefault?:
 
 function SegmentView({ segment }: { segment: PaneFooterSegment }) {
   const interactive = !!segment.onPress && !segment.disabled;
+  useRemoteUiNode(interactive ? {
+    role: "pane-footer-segment",
+    label: segment.parts.map((part) => part.text).join(" "),
+    disabled: segment.disabled,
+    actions: {
+      press: () => segment.onPress?.(),
+    },
+    metadata: { id: segment.id },
+  } : null);
   const attributes = segment.parts.some((part) => part.bold) || interactive ? TextAttributes.BOLD : 0;
   const triggerMouseDownRef = useRef(false);
   const startSegmentPress = (event?: { stopPropagation?: () => void; preventDefault?: () => void }) => {
@@ -93,6 +103,19 @@ function totalHintsWidth(hints: PaneHint[]): number {
 }
 
 function HintView({ hint, prefixSpace }: { hint: PaneHint; prefixSpace: boolean }) {
+  useRemoteUiNode({
+    role: "pane-hint",
+    label: `${hint.key}${hint.label}`,
+    disabled: hint.disabled,
+    actions: {
+      press: hint.onPress ? () => hint.onPress?.() : undefined,
+    },
+    metadata: {
+      id: hint.id,
+      key: hint.key,
+      label: hint.label,
+    },
+  });
   return (
     <ShortcutHint
       hotkey={hint.key}

package/src/components/layout/pane/header.tsx

@@ -14,6 +14,7 @@ interface PaneHeaderProps {
   windowModeSelected?: boolean;
   floating?: boolean;
   showActions?: boolean;
+  onHeaderMouseMove?: (event: any) => void;
   onHeaderMouseDown?: (event: any) => void;
   onHeaderMouseDrag?: (event: any) => void;
   onHeaderMouseDragEnd?: (event: any) => void;
@@ -111,6 +112,7 @@ export function PaneHeader({
   windowModeSelected = false,
   floating = false,
   showActions = false,
+  onHeaderMouseMove,
   onHeaderMouseDown,
   onHeaderMouseDrag,
   onHeaderMouseDragEnd,
@@ -143,6 +145,7 @@ export function PaneHeader({
         data-focused={focused ? "true" : "false"}
         data-window-mode-selected={windowModeSelected ? "true" : "false"}
         onMouseDown={onHeaderMouseDown}
+        onMouseMove={onHeaderMouseMove}
         onMouseDrag={onHeaderMouseDrag}
         onMouseDragEnd={onHeaderMouseDragEnd}
         onContextMenu={onHeaderContextMenu}
@@ -226,6 +229,7 @@ export function PaneHeader({
         backgroundColor={backgroundColor}
         flexDirection="row"
         onMouseDown={handleTerminalHeaderMouseDown}
+        onMouseMove={onHeaderMouseMove}
         onMouseDrag={onHeaderMouseDrag}
         onMouseDragEnd={onHeaderMouseDragEnd}
       >
@@ -263,6 +267,7 @@ export function PaneHeader({
       backgroundColor={backgroundColor}
       flexDirection="row"
       onMouseDown={handleTerminalHeaderMouseDown}
+      onMouseMove={onHeaderMouseMove}
       onMouseDrag={onHeaderMouseDrag}
       onMouseDragEnd={onHeaderMouseDragEnd}
     >

package/src/components/layout/pane/index.tsx

@@ -16,7 +16,7 @@ interface PaneWrapperProps {
   flexGrow?: number;
   showActions?: boolean;
   onMouseDown?: (event: any) => void;
-  onMouseMove?: (event: any) => void;
+  onHeaderMouseMove?: (event: any) => void;
   onHeaderMouseDown?: (event: any) => void;
   onHeaderMouseDrag?: (event: any) => void;
   onHeaderMouseDragEnd?: (event: any) => void;
@@ -36,7 +36,7 @@ export function PaneWrapper({
   flexGrow,
   showActions = false,
   onMouseDown,
-  onMouseMove,
+  onHeaderMouseMove,
   onHeaderMouseDown,
   onHeaderMouseDrag,
   onHeaderMouseDragEnd,
@@ -76,7 +76,6 @@ export function PaneWrapper({
         showBorderColor: true,
       })}
       onMouseDown={onMouseDown}
-      onMouseMove={onMouseMove}
     >
       {title && (
         <PaneHeader
@@ -85,6 +84,7 @@ export function PaneWrapper({
           focused={focused}
           windowModeSelected={windowModeSelected}
           showActions={showActions}
+          onHeaderMouseMove={onHeaderMouseMove}
           onHeaderMouseDown={onHeaderMouseDown}
           onHeaderMouseDrag={onHeaderMouseDrag}
           onHeaderMouseDragEnd={onHeaderMouseDragEnd}

package/src/components/layout/shell/action-menu-overlay.tsx

@@ -52,7 +52,7 @@ export function ShellActionMenuOverlay({
             height={1}
             width={innerWidth}
             backgroundColor={hovered ? colors.selected : colors.panel}
-            onMouseMove={() => onHoverItem(item.id)}
+            onMouseOver={() => onHoverItem(item.id)}
             onMouseDown={(mouseEvent: any) => {
               mouseEvent.stopPropagation();
               mouseEvent.preventDefault();

package/src/components/layout/shell/cursor-occlusion.ts

@@ -23,6 +23,8 @@ interface ResolveShellCursorOcclusionRectsOptions {
   width: number;
 }
 
+const MAX_RENDERABLE_ANCESTOR_DEPTH = 256;
+
 export function resolveShellCursorOcclusionRects({
   contentHeight,
   dragFloatingRect,
@@ -102,7 +104,13 @@ function readRenderableBounds(renderable: unknown): LayoutBounds | null {
 
 function readRenderablePaneId(renderable: unknown): string | null {
   let current = renderable;
-  while (current && typeof current === "object") {
+  const seen = new Set<object>();
+  let depth = 0;
+
+  while (current && typeof current === "object" && !seen.has(current)) {
+    if (depth >= MAX_RENDERABLE_ANCESTOR_DEPTH) return null;
+    seen.add(current);
+    depth += 1;
     const record = current as Record<string, unknown>;
     const paneId = record["data-gloom-pane-id"];
     if (typeof paneId === "string") return paneId;

package/src/components/layout/shell/index.test.tsx

@@ -1271,6 +1271,7 @@ describe("Shell", () => {
         layouts: [{ name: "Default", layout: cloneLayout(mixedLayout) }],
       }),
       focusedPaneId: "ticker-detail:main",
+      previousFocusedPaneId: "portfolio-list:main",
     };
     const actions: Array<any> = [];
 
@@ -1294,6 +1295,7 @@ describe("Shell", () => {
     expect(updateLayout?.layout.instances.map((instance: { instanceId: string }) => instance.instanceId)).toEqual(["portfolio-list:main"]);
     expect(updateLayout?.layout.floating).toEqual([]);
     expect(updateLayout?.layout.dockRoot).toEqual({ kind: "pane", instanceId: "portfolio-list:main" });
+    expect(updateLayout?.focusedPaneId).toBe("portfolio-list:main");
   });
 
   test("closes the focused floating pane with Cmd+W", async () => {

package/src/components/layout/shell/index.tsx

@@ -95,6 +95,7 @@ export function Shell({
   const config = useAppSelector((state) => state.config);
   const paneState = useAppSelector((state) => state.paneState);
   const focusedPaneId = useAppSelector(selectFocusedPaneId);
+  const previousFocusedPaneId = useAppSelector((state) => state.previousFocusedPaneId);
   const activePanel = useAppSelector((state) => state.activePanel);
   const commandBarOpen = useAppSelector(selectCommandBarOpen);
   const inputCaptured = useAppSelector((state) => state.inputCaptured);
@@ -154,15 +155,18 @@ export function Shell({
   ), [nativePaneChrome]);
   const bounds = useMemo<LayoutBounds>(() => ({ x: 0, y: 0, width, height: contentHeight }), [contentHeight, width]);
 
-  const persistLayout = useCallback((nextLayout: LayoutConfig, options?: { pushHistory?: boolean }) => {
+  const persistLayout = useCallback((nextLayout: LayoutConfig, options?: { pushHistory?: boolean; focusedPaneId?: string | null }) => {
     if (options?.pushHistory !== false) {
       dispatch({ type: "PUSH_LAYOUT_HISTORY" });
     }
-    dispatch({ type: "UPDATE_LAYOUT", layout: nextLayout });
+    const hasFocusTarget = !!options && Object.prototype.hasOwnProperty.call(options, "focusedPaneId");
+    dispatch(hasFocusTarget
+      ? { type: "UPDATE_LAYOUT", layout: nextLayout, focusedPaneId: options.focusedPaneId ?? null }
+      : { type: "UPDATE_LAYOUT", layout: nextLayout });
     scheduleConfigSave(syncConfigActiveLayoutState(
       { ...config, layout: nextLayout },
       paneState,
-      focusedPaneId,
+      hasFocusTarget ? (options.focusedPaneId ?? null) : focusedPaneId,
       activePanel,
     ));
   }, [activePanel, config, dispatch, focusedPaneId, paneState]);
@@ -261,6 +265,7 @@ export function Shell({
     nativePaneChrome,
     paneMap,
     persistLayout,
+    previousFocusedPaneId,
     pluginRegistry,
     rendererHost,
     visibleLayout,
@@ -525,7 +530,14 @@ export function Shell({
       height={nativePaneChrome ? undefined : contentHeight}
       position={nativePaneChrome ? "relative" : undefined}
       overflow="hidden"
-      {...(!nativePaneChrome ? { onMouse: handleMouse } : {})}
+      {...(!nativePaneChrome
+        ? {
+          onMouseDown: handleMouse,
+          onMouseDrag: handleMouse,
+          onMouseDragEnd: handleMouse,
+          onMouseUp: handleMouse,
+        }
+        : {})}
     >
       <Box
         position="absolute"

package/src/components/layout/shell/pane/actions.ts

@@ -14,6 +14,15 @@ import type { LayoutConfig } from "../../../../types/config";
 import type { RendererHost } from "../../../../ui";
 import { capturePaneScreenshotPngBase64 } from "../../../../utils/dom-screenshot";
 
+function removedFocusRestoreOptions(
+  layout: LayoutConfig,
+  currentFocusedPaneId: string | null,
+  paneId: string | null,
+): { focusedPaneId: string } | undefined {
+  if (currentFocusedPaneId && isPaneInLayout(layout, currentFocusedPaneId)) return undefined;
+  return paneId && isPaneInLayout(layout, paneId) ? { focusedPaneId: paneId } : undefined;
+}
+
 interface UseShellPaneActionsOptions {
   closePaneMenu: () => void;
   contentHeight: number;
@@ -22,7 +31,8 @@ interface UseShellPaneActionsOptions {
   focusPane: (paneId: string) => void;
   nativePaneChrome: boolean;
   paneMap: Map<string, ResolvedPane>;
-  persistLayout: (nextLayout: LayoutConfig, options?: { pushHistory?: boolean }) => void;
+  persistLayout: (nextLayout: LayoutConfig, options?: { pushHistory?: boolean; focusedPaneId?: string | null }) => void;
+  previousFocusedPaneId: string | null;
   pluginRegistry: PluginRegistry;
   rendererHost: RendererHost;
   visibleLayout: LayoutConfig;
@@ -38,6 +48,7 @@ export function useShellPaneActions({
   nativePaneChrome,
   paneMap,
   persistLayout,
+  previousFocusedPaneId,
   pluginRegistry,
   rendererHost,
   visibleLayout,
@@ -70,15 +81,17 @@ export function useShellPaneActions({
 
   const closeFocusedPane = useCallback(() => {
     if (!focusedPaneId || !isPaneInLayout(visibleLayout, focusedPaneId)) return false;
-    persistLayout(removePane(visibleLayout, focusedPaneId));
+    const nextLayout = removePane(visibleLayout, focusedPaneId);
+    persistLayout(nextLayout, removedFocusRestoreOptions(nextLayout, focusedPaneId, previousFocusedPaneId));
     return true;
-  }, [focusedPaneId, persistLayout, visibleLayout]);
+  }, [focusedPaneId, persistLayout, previousFocusedPaneId, visibleLayout]);
 
   const closeAllFloatingPanes = useCallback(() => {
     if (visibleLayout.floating.length === 0) return false;
-    persistLayout(removeFloatingPanes(visibleLayout));
+    const nextLayout = removeFloatingPanes(visibleLayout);
+    persistLayout(nextLayout, removedFocusRestoreOptions(nextLayout, focusedPaneId, previousFocusedPaneId));
     return true;
-  }, [persistLayout, visibleLayout]);
+  }, [focusedPaneId, persistLayout, previousFocusedPaneId, visibleLayout]);
 
   const copyFocusedPaneScreenshot = useCallback(() => {
     if (!focusedPaneId || !nativePaneChrome || !rendererHost.copyPngImage) return false;
@@ -118,8 +131,9 @@ export function useShellPaneActions({
   }, [contentHeight, persistLayout, visibleLayout, width]);
 
   const handleFloatingClose = useCallback((paneId: string) => {
-    persistLayout(removePane(visibleLayout, paneId));
-  }, [persistLayout, visibleLayout]);
+    const nextLayout = removePane(visibleLayout, paneId);
+    persistLayout(nextLayout, removedFocusRestoreOptions(nextLayout, focusedPaneId, previousFocusedPaneId));
+  }, [focusedPaneId, persistLayout, previousFocusedPaneId, visibleLayout]);
 
   return {
     closeAllFloatingPanes,

package/src/components/layout/shell/pane/layers.tsx

@@ -132,7 +132,7 @@ export function ShellPaneLayers({
                     windowModeSelected={windowModeSelected}
                     footer={footer}
                     onMouseDown={nativePaneChrome ? (event) => handleNativePaneMouseDown(leaf.instanceId, event) : undefined}
-                    onMouseMove={() => setHoveredPaneIfChanged(leaf.instanceId)}
+                    onHeaderMouseMove={() => setHoveredPaneIfChanged(leaf.instanceId)}
                     onHeaderMouseDown={nativePaneChrome && !transientFocusActive ? (event) => startNativeDockedDrag(leaf.instanceId, rect, event) : undefined}
                     onHeaderMouseDrag={nativePaneChrome && !transientFocusActive ? handleNativeDrag : undefined}
                     onHeaderMouseDragEnd={nativePaneChrome && !transientFocusActive ? handleNativeDrag : undefined}
@@ -192,7 +192,7 @@ export function ShellPaneLayers({
                   showActions={showActions}
                   footer={footer}
                   onMouseDown={nativePaneChrome ? (event) => handleNativePaneMouseDown(pane.instance.instanceId, event) : undefined}
-                  onMouseMove={() => setHoveredPaneIfChanged(pane.instance.instanceId)}
+                  onHeaderMouseMove={() => setHoveredPaneIfChanged(pane.instance.instanceId)}
                   onHeaderMouseDown={nativePaneChrome ? (event) => startNativeFloatingDrag(pane.instance.instanceId, preview, event) : undefined}
                   onHeaderMouseDrag={nativePaneChrome ? handleNativeDrag : undefined}
                   onHeaderMouseDragEnd={nativePaneChrome ? handleNativeDrag : undefined}

package/src/components/layout/status-bar.tsx

@@ -364,7 +364,7 @@ function CommandBarHint({
     <Text
       fg={hovered ? colors.text : colors.textDim}
       {...(!nativePaneChrome ? { bg: hovered ? hoverBg() : undefined } : {})}
-      onMouseMove={() => setHoveredControl((current) => (current === "command-bar" ? current : "command-bar"))}
+      onMouseOver={() => setHoveredControl((current) => (current === "command-bar" ? current : "command-bar"))}
       onMouseDown={openCommandBar}
       {...(nativePaneChrome ? { "data-gloom-interactive": "true" } : {})}
     >
@@ -385,7 +385,7 @@ function NativeGridlockTip({
       <Text
         fg={hoveredControl === "gridlock-tip" ? colors.textBright : colors.borderFocused}
         attributes={TextAttributes.BOLD}
-        onMouseMove={() => setHoveredControl((current) => (current === "gridlock-tip" ? current : "gridlock-tip"))}
+        onMouseOver={() => setHoveredControl((current) => (current === "gridlock-tip" ? current : "gridlock-tip"))}
         onMouseDown={handleGridlockTip}
         data-gloom-interactive="true"
       >
@@ -393,7 +393,7 @@ function NativeGridlockTip({
       </Text>
       <Text
         fg={hoveredControl === "gridlock-tip-dismiss" ? colors.text : colors.textDim}
-        onMouseMove={() => setHoveredControl((current) => (current === "gridlock-tip-dismiss" ? current : "gridlock-tip-dismiss"))}
+        onMouseOver={() => setHoveredControl((current) => (current === "gridlock-tip-dismiss" ? current : "gridlock-tip-dismiss"))}
         onMouseDown={dismissGridlockTip}
         data-gloom-interactive="true"
       >
@@ -415,14 +415,14 @@ function TerminalGridlockTip({
       <Box width={1} />
       <Box
         backgroundColor={hoveredControl === "gridlock-tip" ? hoverBg() : colors.header}
-        onMouseMove={() => setHoveredControl((current) => (current === "gridlock-tip" ? current : "gridlock-tip"))}
+        onMouseOver={() => setHoveredControl((current) => (current === "gridlock-tip" ? current : "gridlock-tip"))}
         onMouseDown={handleGridlockTip}
       >
         <Text fg={colors.headerText}> Gridlock All </Text>
       </Box>
       <Text
         fg={hoveredControl === "gridlock-tip-dismiss" ? colors.text : colors.textDim}
-        onMouseMove={() => setHoveredControl((current) => (current === "gridlock-tip-dismiss" ? current : "gridlock-tip-dismiss"))}
+        onMouseOver={() => setHoveredControl((current) => (current === "gridlock-tip-dismiss" ? current : "gridlock-tip-dismiss"))}
         onMouseDown={dismissGridlockTip}
       >
         {" x"}

package/src/components/metric-treemap/index.tsx

@@ -0,0 +1,317 @@
+import { useMemo, useState, type CSSProperties } from "react";
+import { Box, Text, TextAttributes, useUiCapabilities } from "../../ui";
+import { blendHex, colors, priceColor } from "../../theme/colors";
+import { blendForContrast, higherContrast } from "../../theme/color-utils";
+import { padTo } from "../../utils/format";
+import {
+  buildMetricTreemap,
+  buildMetricTreemapRects,
+  type FloatMetricTreemapTile,
+  type MetricTreemapItem,
+  type MetricTreemapTile,
+} from "./layout";
+
+export {
+  buildMetricTreemapNavigationTiles,
+  findMetricTreemapNeighbor,
+  type MetricTreemapDirection,
+  type MetricTreemapItem,
+} from "./layout";
+
+type PreventableMouseEvent = { preventDefault(): void };
+
+export interface MetricTreemapSurfaceProps<T> {
+  items: MetricTreemapItem<T>[];
+  width: number;
+  height: number;
+  selectedId: string | null;
+  onSelect: (item: MetricTreemapItem<T>) => void;
+  onActivate?: (item: MetricTreemapItem<T>) => void;
+  emptyStateTitle?: string;
+}
+
+function metricTileColor(item: MetricTreemapItem): string {
+  if (item.colorValue == null) return colors.neutral;
+  return priceColor(item.colorValue);
+}
+
+function desktopMetricTileColor(item: MetricTreemapItem): string {
+  if (item.colorValue == null || item.colorValue === 0) {
+    return colors.neutral;
+  }
+  const intensity = Math.max(0.38, Math.min(0.88, Math.log1p(Math.abs(item.colorValue)) / Math.log1p(30)));
+  return blendHex(colors.panel, item.colorValue > 0 ? colors.positive : colors.negative, intensity);
+}
+
+const TILE_TEXT_MIN_CONTRAST = 4.5;
+
+function tileTextColor(backgroundColor: string): string {
+  const preferred = higherContrast(
+    higherContrast(colors.text, colors.textBright, backgroundColor),
+    colors.selectedText,
+    backgroundColor,
+  );
+  const fallback = higherContrast("#000000", "#ffffff", backgroundColor);
+  return blendForContrast(preferred, backgroundColor, fallback, TILE_TEXT_MIN_CONTRAST);
+}
+
+function visibleLines(item: MetricTreemapItem): string[] {
+  return [
+    item.label,
+    item.primaryText,
+    item.secondaryText,
+    item.tertiaryText,
+  ].filter((line): line is string => !!line);
+}
+
+function Tile<T>({ tile, selected, onSelect, onActivate }: {
+  tile: MetricTreemapTile<T>;
+  selected: boolean;
+  onSelect: () => void;
+  onActivate?: () => void;
+}) {
+  const renderWidth = Math.max(1, tile.width - (tile.width > 2 ? 1 : 0));
+  const renderHeight = Math.max(1, tile.height - (tile.height > 2 ? 1 : 0));
+  const innerWidth = Math.max(1, renderWidth - 1);
+  const backgroundColor = selected ? colors.selected : metricTileColor(tile.item);
+  const textColor = tileTextColor(backgroundColor);
+  const attributes = selected ? TextAttributes.BOLD : TextAttributes.NONE;
+  const lines = visibleLines(tile.item);
+
+  return (
+    <Box
+      position="absolute"
+      left={tile.x}
+      top={tile.y}
+      width={renderWidth}
+      height={renderHeight}
+      backgroundColor={backgroundColor}
+      onMouseDown={(event: PreventableMouseEvent) => {
+        event.preventDefault();
+        onSelect();
+      }}
+      onMouseOver={onSelect}
+      onMouseMove={onSelect}
+      onDoubleClick={onActivate}
+    >
+      {lines.slice(0, renderHeight).map((line, index) => (
+        <Text key={`${tile.item.id}:${index}`} fg={textColor} attributes={attributes}>
+          {padTo(line, innerWidth)}
+        </Text>
+      ))}
+    </Box>
+  );
+}
+
+function pct(value: number, total: number): string {
+  return `${total > 0 ? value / total * 100 : 0}%`;
+}
+
+function DesktopTile<T>({ tile, chartWidth, chartHeight, selected, hovered, onSelect, onActivate, onHover }: {
+  tile: FloatMetricTreemapTile<T>;
+  chartWidth: number;
+  chartHeight: number;
+  selected: boolean;
+  hovered: boolean;
+  onSelect: () => void;
+  onActivate?: () => void;
+  onHover: (hovered: boolean) => void;
+}) {
+  const lines = visibleLines(tile.item);
+  const canShowDetails = tile.width >= 7 && tile.height >= 3;
+  const canShowExtra = tile.height >= 3.7;
+  const canShowLabel = tile.width >= 4 && tile.height >= 1.4;
+  const isTiny = tile.width < 5 || tile.height < 2;
+  const backgroundColor = desktopMetricTileColor(tile.item);
+  const textColor = tileTextColor(backgroundColor);
+  const style: CSSProperties = {
+    position: "absolute",
+    left: `calc(${pct(tile.x, chartWidth)} + 1px)`,
+    top: `calc(${pct(tile.y, chartHeight)} + 1px)`,
+    width: `max(1px, calc(${pct(tile.width, chartWidth)} - 2px))`,
+    height: `max(1px, calc(${pct(tile.height, chartHeight)} - 2px))`,
+    minWidth: 1,
+    minHeight: 1,
+    padding: isTiny ? "3px 4px" : "7px 8px",
+    overflow: "hidden",
+    borderRadius: 5,
+    border: selected
+      ? `1px solid ${colors.textBright}`
+      : hovered
+        ? `1px solid ${blendHex(colors.textBright, backgroundColor, 0.55)}`
+        : `1px solid ${blendHex(backgroundColor, colors.textBright, 0.11)}`,
+    boxShadow: selected
+      ? `inset 0 0 0 1px ${blendHex(backgroundColor, colors.textBright, 0.55)}`
+      : hovered
+        ? `inset 0 0 0 1px ${blendHex(backgroundColor, colors.textBright, 0.18)}`
+        : "none",
+    backgroundColor,
+    color: textColor,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "stretch",
+    justifyContent: "flex-start",
+    gap: 2,
+    cursor: "pointer",
+    transition: "border-color 120ms ease, box-shadow 120ms ease, filter 120ms ease",
+    filter: hovered ? "brightness(1.08)" : undefined,
+  };
+  const textStyle: CSSProperties = {
+    display: "block",
+    minWidth: 0,
+    width: "100%",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    lineHeight: 1.1,
+    letterSpacing: 0,
+    textShadow: `0 1px 1px ${blendHex(backgroundColor, colors.bg, 0.35)}`,
+  };
+  const startHover = () => {
+    onHover(true);
+    onSelect();
+  };
+
+  return (
+    <Box
+      data-gloom-role="metric-treemap-desktop-tile"
+      style={style}
+      onMouseDown={(event: PreventableMouseEvent) => {
+        event.preventDefault();
+        onSelect();
+      }}
+      onDoubleClick={onActivate}
+      onMouseOver={startHover}
+      onMouseMove={startHover}
+      onMouseOut={() => onHover(false)}
+    >
+      {canShowLabel && (
+        <Text
+          fg={textColor}
+          attributes={selected ? TextAttributes.BOLD : TextAttributes.NONE}
+          style={{
+            ...textStyle,
+            fontSize: isTiny ? 11 : 13,
+            fontWeight: 700,
+          }}
+        >
+          {lines[0]}
+        </Text>
+      )}
+      {canShowDetails && lines.slice(1, canShowExtra ? 4 : 3).map((line, index) => (
+        <Text key={`${tile.item.id}:detail:${index}`} fg={textColor} style={{ ...textStyle, fontSize: 12, fontWeight: 600 }}>
+          {line}
+        </Text>
+      ))}
+    </Box>
+  );
+}
+
+function DesktopMetricTreemapSurface<T>({ items, width, height, selectedId, onSelect, onActivate, cellAspect, emptyStateTitle }: MetricTreemapSurfaceProps<T> & {
+  cellAspect: number;
+}) {
+  const [hoveredId, setHoveredId] = useState<string | null>(null);
+  const chartWidth = Math.max(1, width - 2);
+  const tiles = useMemo(() => buildMetricTreemapRects(items, chartWidth, height, cellAspect), [cellAspect, chartWidth, height, items]);
+
+  if (tiles.length === 0) {
+    return (
+      <Box width={width} height={height} paddingX={1} paddingY={1}>
+        <Text fg={colors.textDim}>{emptyStateTitle ?? "No chart data"}</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      width={width}
+      height={height}
+      paddingX={1}
+      style={{
+        backgroundColor: colors.bg,
+        overflow: "hidden",
+      }}
+    >
+      <Box
+        data-gloom-role="metric-treemap"
+        width={chartWidth}
+        height={height}
+        style={{
+          position: "relative",
+          width: "100%",
+          height: "100%",
+          backgroundColor: colors.bg,
+          overflow: "hidden",
+        }}
+      >
+        {tiles.map((tile) => (
+          <DesktopTile
+            key={tile.item.id}
+            tile={tile}
+            chartWidth={chartWidth}
+            chartHeight={height}
+            selected={tile.item.id === selectedId}
+            hovered={tile.item.id === hoveredId}
+            onSelect={() => onSelect(tile.item)}
+            onActivate={onActivate ? () => onActivate(tile.item) : undefined}
+            onHover={(isHovered) => setHoveredId((current) => (isHovered ? tile.item.id : current === tile.item.id ? null : current))}
+          />
+        ))}
+      </Box>
+    </Box>
+  );
+}
+
+export function MetricTreemapSurface<T>({
+  items,
+  width,
+  height,
+  selectedId,
+  onSelect,
+  onActivate,
+  emptyStateTitle,
+}: MetricTreemapSurfaceProps<T>) {
+  const { cellWidthPx = 8, cellHeightPx = 18, nativePaneChrome } = useUiCapabilities();
+  const chartWidth = Math.max(1, width - 2);
+  const cellAspect = Math.max(0.5, Math.min(4, cellHeightPx / Math.max(1, cellWidthPx)));
+  const tiles = useMemo(() => buildMetricTreemap(items, chartWidth, height, cellAspect), [cellAspect, chartWidth, height, items]);
+
+  if (nativePaneChrome) {
+    return (
+      <DesktopMetricTreemapSurface
+        items={items}
+        width={width}
+        height={height}
+        selectedId={selectedId}
+        onSelect={onSelect}
+        onActivate={onActivate}
+        cellAspect={cellAspect}
+        emptyStateTitle={emptyStateTitle}
+      />
+    );
+  }
+
+  if (tiles.length === 0) {
+    return (
+      <Box width={width} height={height} paddingX={1} paddingY={1}>
+        <Text fg={colors.textDim}>{emptyStateTitle ?? "No chart data"}</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box width={width} height={height} paddingX={1} backgroundColor={colors.bg}>
+      <Box position="relative" width={chartWidth} height={height} backgroundColor={colors.bg}>
+        {tiles.map((tile) => (
+          <Tile
+            key={tile.item.id}
+            tile={tile}
+            selected={tile.item.id === selectedId}
+            onSelect={() => onSelect(tile.item)}
+            onActivate={onActivate ? () => onActivate(tile.item) : undefined}
+          />
+        ))}
+      </Box>
+    </Box>
+  );
+}