gloomberb 0.16.2 → 0.16.4

package/src/components/layout/shell/pane/management-shortcuts.ts

@@ -33,6 +33,7 @@ interface ShellPaneManagementShortcutOptions {
   startWindowMode(paneId?: string, mode?: WindowEditMode): void;
   toggleFocusedPaneFullscreen(): boolean;
   toggleFocusedPaneFloating(): boolean;
+  toggleFocusedPaneNewLayout(): boolean;
 }
 
 export function useShellPaneManagementShortcuts({
@@ -54,6 +55,7 @@ export function useShellPaneManagementShortcuts({
   startWindowMode,
   toggleFocusedPaneFullscreen,
   toggleFocusedPaneFloating,
+  toggleFocusedPaneNewLayout,
 }: ShellPaneManagementShortcutOptions): void {
   const doubleEscapeCloseRef = useRef(createDoubleEscapeCloseState());
   const keybindings = useKeybindings();
@@ -153,6 +155,9 @@ export function useShellPaneManagementShortcuts({
       case "toggle-floating":
         handled = toggleFocusedPaneFloating();
         break;
+      case "new-layout":
+        handled = toggleFocusedPaneNewLayout();
+        break;
       case "pop-out":
         handled = popOutFocusedPane();
         break;

package/src/components/layout/shell/pane/new-layout.ts

@@ -0,0 +1,116 @@
+import { useCallback, type Dispatch } from "react";
+import { formatAdvertisedChord, type ResolvedKeybindings } from "../../../../app/keybindings";
+import { tf } from "../../../../i18n";
+import {
+  createSavedLayoutId,
+  paneMoveBackTarget,
+  paneNewLayoutBlock,
+  type PaneMoveBackTarget,
+  type PaneNewLayoutBlock,
+} from "../../../../layout/pane-layout-move";
+import type { PluginRegistry } from "../../../../plugins/registry";
+import { resolveTickerForPane, type AppAction, type AppState } from "../../../../state/app/context";
+import { findPaneInstance } from "../../../../types/config";
+import type { ShortcutDisplayMode } from "../../../../utils/shortcut-labels";
+import { getBasePaneDisplayTitle } from "../../pane/title";
+import type { PaneMenuLayoutMove } from "../menu";
+
+const BLOCK_MESSAGES: Partial<Record<PaneNewLayoutBlock, string>> = {
+  "only-pane": "Already the only pane in this layout",
+  "no-ticker": "Select a ticker in the list this pane follows first",
+};
+
+// The first move of a session says how to undo it; after that the layout tab is enough.
+let moveBackHintShown = false;
+
+interface UseShellPaneLayoutMovesOptions {
+  closePaneMenu: () => void;
+  dispatch: Dispatch<AppAction>;
+  keybindings: ResolvedKeybindings;
+  /** Leaves anything that shows this pane over the layout, such as fullscreen, before it moves. */
+  leavePane: (paneId: string) => void;
+  pluginRegistry: PluginRegistry;
+  shortcutDisplayMode: ShortcutDisplayMode;
+  stateRef: { current: AppState };
+}
+
+/**
+ * Move to New Layout and Move Back for the shell's pane menu, its shortcut
+ * and the command bar. The layout work is in `layout/pane-layout-move`.
+ */
+export function useShellPaneLayoutMoves({
+  closePaneMenu,
+  dispatch,
+  keybindings,
+  leavePane,
+  pluginRegistry,
+  shortcutDisplayMode,
+  stateRef,
+}: UseShellPaneLayoutMovesOptions) {
+  const blockFor = useCallback((paneId: string): PaneNewLayoutBlock | null => {
+    const state = stateRef.current;
+    return paneNewLayoutBlock(state.config.layout, paneId, (instanceId) => resolveTickerForPane(state, instanceId));
+  }, [stateRef]);
+
+  const moveBackTargetFor = useCallback(
+    (paneId: string): PaneMoveBackTarget | null => paneMoveBackTarget(stateRef.current.config, paneId),
+    [stateRef],
+  );
+
+  const movePaneToNewLayout = useCallback((paneId: string): boolean => {
+    const block = blockFor(paneId);
+    if (block === "missing" || block === "detached") return false;
+    const blockMessage = block ? BLOCK_MESSAGES[block] : undefined;
+    if (blockMessage) {
+      pluginRegistry.notify({ body: blockMessage, type: "info" });
+      return true;
+    }
+    const state = stateRef.current;
+    const instance = findPaneInstance(state.config.layout, paneId);
+    if (!instance) return false;
+    const def = pluginRegistry.panes.get(instance.paneId);
+    const name = (def ? getBasePaneDisplayTitle(state, instance, def, pluginRegistry.panes) : instance.title)?.trim()
+      || instance.paneId;
+    closePaneMenu();
+    leavePane(paneId);
+    dispatch({ type: "MOVE_PANE_TO_NEW_LAYOUT", paneId, name, sourceLayoutId: createSavedLayoutId() });
+    if (!moveBackHintShown) {
+      moveBackHintShown = true;
+      const shortcut = formatAdvertisedChord(keybindings, "pane-new-layout", shortcutDisplayMode);
+      pluginRegistry.notify({
+        body: shortcut
+          ? tf("Moved to a layout of its own. {shortcut} moves it back.", { shortcut })
+          : "Moved to a layout of its own. Move Back in its menu returns it.",
+        type: "info",
+      });
+    }
+    return true;
+  }, [blockFor, closePaneMenu, dispatch, keybindings, leavePane, pluginRegistry, shortcutDisplayMode, stateRef]);
+
+  const movePaneBack = useCallback((paneId: string): boolean => {
+    if (!moveBackTargetFor(paneId)) return false;
+    closePaneMenu();
+    leavePane(paneId);
+    dispatch({ type: "MOVE_PANE_BACK", paneId });
+    return true;
+  }, [closePaneMenu, dispatch, leavePane, moveBackTargetFor]);
+
+  /** The shortcut: a pane alone in the layout it was moved to goes back, any other gets a layout of its own. */
+  const togglePaneNewLayout = useCallback((paneId: string | null): boolean => {
+    if (!paneId) return false;
+    if (blockFor(paneId) === "only-pane" && movePaneBack(paneId)) return true;
+    return movePaneToNewLayout(paneId);
+  }, [blockFor, movePaneBack, movePaneToNewLayout]);
+
+  /** What the pane menu offers: Move to New Layout unless the pane is alone, Move Back when it came from elsewhere. */
+  const paneLayoutMoveMenu = useCallback((paneId: string): PaneMenuLayoutMove => {
+    const block = blockFor(paneId);
+    const back = moveBackTargetFor(paneId);
+    return {
+      ...(block === null || block === "no-ticker" ? { moveToNewLayout: () => { movePaneToNewLayout(paneId); } } : {}),
+      ...(back ? { moveBack: { layoutName: back.name, onSelect: () => { movePaneBack(paneId); } } } : {}),
+    };
+  }, [blockFor, moveBackTargetFor, movePaneBack, movePaneToNewLayout]);
+
+  return { movePaneBack, movePaneToNewLayout, paneLayoutMoveMenu, togglePaneNewLayout };
+}

package/src/components/layout/shell/shortcuts.ts

@@ -12,6 +12,7 @@ export type PaneManagementShortcut =
   | "menu"
   | "settings"
   | "toggle-fullscreen"
+  | "new-layout"
   | "toggle-floating"
   | "pop-out"
   | "copy-screenshot"
@@ -28,6 +29,7 @@ const PANE_ACTION_TO_SHORTCUT: Partial<Record<CoreKeybindingActionId, PaneManage
   "pane-menu": "menu",
   "pane-settings": "settings",
   "pane-fullscreen": "toggle-fullscreen",
+  "pane-new-layout": "new-layout",
   "pane-float": "toggle-floating",
   "pane-pop-out": "pop-out",
   "pane-screenshot": "copy-screenshot",
@@ -42,7 +44,7 @@ const PANE_ACTION_TO_SHORTCUT: Partial<Record<CoreKeybindingActionId, PaneManage
 };
 
 export type PaneManagementAccelerators = Record<
-  "menu" | "settings" | "fullscreen" | "toggleFloating" | "popOut" | "copyScreenshot" | "exportCsv" | "share" | "close"
+  "menu" | "settings" | "fullscreen" | "newLayout" | "toggleFloating" | "popOut" | "copyScreenshot" | "exportCsv" | "share" | "close"
   | "closeAllFloating" | "layoutGallery" | "gridlockAll" | "windowMode" | "windowResizeMode",
   string | undefined
 >;
@@ -53,6 +55,7 @@ export function paneManagementAccelerators(keybindings: ResolvedKeybindings): Pa
     menu: menuAcceleratorFor(keybindings, "pane-menu"),
     settings: menuAcceleratorFor(keybindings, "pane-settings"),
     fullscreen: menuAcceleratorFor(keybindings, "pane-fullscreen"),
+    newLayout: menuAcceleratorFor(keybindings, "pane-new-layout"),
     toggleFloating: menuAcceleratorFor(keybindings, "pane-float"),
     popOut: menuAcceleratorFor(keybindings, "pane-pop-out"),
     copyScreenshot: menuAcceleratorFor(keybindings, "pane-screenshot"),
@@ -98,7 +101,7 @@ export function inputCaptureAllowsPaneManagementShortcut(
   // A screenshot does not edit the field that captured input. Keep it available
   // from composers (ASKG, chat, etc.) on both desktop modifier layouts.
   if (shortcut === "copy-screenshot") return event.ctrl || event.meta || event.super === true;
-  if (shortcut === "toggle-fullscreen") return event.meta || event.super === true;
+  if (shortcut === "toggle-fullscreen" || shortcut === "new-layout") return event.meta || event.super === true;
   if (shortcut !== "close" && shortcut !== "close-all-floating") return false;
   return event.meta || event.super || event.targetEditable !== true;
 }

package/src/components/layout/shell/terminal-pointer-runtime.ts

@@ -87,8 +87,8 @@ export function useShellTerminalPointerRuntime({
   windowMode,
 }: UseShellTerminalPointerRuntimeOptions) {
   const {
-    dragFloatingRect,
-    dragRef,
+    live,
+    startDrag,
     updateDividerPreview,
     updateDragFloatingRect,
   } = dragRuntime;
@@ -112,7 +112,7 @@ export function useShellTerminalPointerRuntime({
 
       for (const { pane, rect: visibleRect } of sortedFloatingPanes(visibleFloatingPanes)) {
         const paneId = pane.instance.instanceId;
-        const rect = getVisibleFloatingRect(visibleRect, paneId, dragFloatingRect, width, contentHeight);
+        const rect = getVisibleFloatingRect(visibleRect, paneId, live.get().floating, width, contentHeight);
         if (!pointInRect({ x: rect.x, y: rect.y, width: rect.width, height: rect.height }, event.x, shellY)) continue;
 
         const relativeX = event.x - rect.x;
@@ -120,13 +120,13 @@ export function useShellTerminalPointerRuntime({
         selectWindowModePane(paneId);
 
         if (relativeX >= rect.width - 2 && relativeY >= rect.height - 1) {
-          dragRef.current = {
+          startDrag({
             type: "float-resize",
             paneId,
             startX: preciseX,
             startY: preciseShellY,
             origRect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
-          };
+          });
           updateDragFloatingRect({ paneId, rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height } });
         }
 
@@ -138,7 +138,7 @@ export function useShellTerminalPointerRuntime({
       if (!transientFocusActive) {
         for (const divider of dockDividerLayouts) {
           if (!pointInRect(divider.rect, event.x, shellY)) continue;
-          dragRef.current = {
+          startDrag({
             type: "divider",
             path: divider.path,
             axis: divider.axis,
@@ -146,7 +146,7 @@ export function useShellTerminalPointerRuntime({
             startY: preciseShellY,
             startRatio: divider.ratio,
             bounds: divider.bounds,
-          };
+          });
           updateDividerPreview({
             pathKey: divider.path.join("."),
             rect: divider.rect,
@@ -179,7 +179,7 @@ export function useShellTerminalPointerRuntime({
 
       for (const { pane, rect: visibleRect } of sortedFloatingPanes(visibleFloatingPanes)) {
         const paneId = pane.instance.instanceId;
-        const rect = getVisibleFloatingRect(visibleRect, paneId, dragFloatingRect, width, contentHeight);
+        const rect = getVisibleFloatingRect(visibleRect, paneId, live.get().floating, width, contentHeight);
         if (!pointInRect({ x: rect.x, y: rect.y, width: rect.width, height: rect.height }, event.x, shellY)) continue;
         const relativeX = event.x - rect.x;
         const relativeY = shellY - rect.y;
@@ -212,13 +212,13 @@ export function useShellTerminalPointerRuntime({
           return;
         }
         if (!transientFocusActive && relativeX >= rect.width - 2 && relativeY >= rect.height - 1) {
-          dragRef.current = {
+          startDrag({
             type: "float-resize",
             paneId,
             startX: preciseX,
             startY: preciseShellY,
             origRect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
-          };
+          });
           updateDragFloatingRect({ paneId, rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height } });
           event.stopPropagation();
           event.preventDefault();
@@ -230,14 +230,14 @@ export function useShellTerminalPointerRuntime({
           return;
         }
         if (relativeY === 0) {
-          dragRef.current = {
+          startDrag({
             type: "pane-drag",
             paneId,
             mode: "floating",
             startX: preciseX,
             startY: preciseShellY,
             origRect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
-          };
+          });
           updateDragFloatingRect({ paneId, rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height } });
           event.stopPropagation();
           event.preventDefault();
@@ -248,7 +248,7 @@ export function useShellTerminalPointerRuntime({
 
       for (const divider of dockDividerLayouts) {
         if (!pointInRect(divider.rect, event.x, shellY)) continue;
-        dragRef.current = {
+        startDrag({
           type: "divider",
           path: divider.path,
           axis: divider.axis,
@@ -256,7 +256,7 @@ export function useShellTerminalPointerRuntime({
           startY: preciseShellY,
           startRatio: divider.ratio,
           bounds: divider.bounds,
-        };
+        });
         updateDividerPreview({
           pathKey: divider.path.join("."),
           rect: divider.rect,
@@ -308,14 +308,14 @@ export function useShellTerminalPointerRuntime({
           return;
         }
         if (relativeY === 0) {
-          dragRef.current = {
+          startDrag({
             type: "pane-drag",
             paneId: leaf.instanceId,
             mode: "docked",
             startX: preciseX,
             startY: preciseShellY,
             origRect: { x: leaf.rect.x, y: leaf.rect.y, width: leaf.rect.width, height: leaf.rect.height },
-          };
+          });
           event.stopPropagation();
           event.preventDefault();
           return;
@@ -333,12 +333,11 @@ export function useShellTerminalPointerRuntime({
     contentHeight,
     dockDividerLayouts,
     dockLeafLayouts,
-    dragFloatingRect,
-    dragRef,
     focusPane,
     focusedPaneId,
     handleActiveDrag,
     handleFloatingClose,
+    live,
     restoreFullscreen,
     menuState,
     openPaneMenu,
@@ -346,6 +345,7 @@ export function useShellTerminalPointerRuntime({
     selectWindowModePane,
     setHoveredMenuItemId,
     setMenuState,
+    startDrag,
     transientFocusActive,
     updateDividerPreview,
     updateDragFloatingRect,

package/src/components/layout/shell/visible-layout.ts

@@ -1,8 +1,22 @@
 import {
   removeUnavailablePaneTypes,
+  restoreHiddenPanes,
   type PaneTypeAvailability,
 } from "../../../layout/pane-manager";
-import type { LayoutConfig } from "../../../types/config";
+import type { PluginRegistry } from "../../../plugins/registry";
+import type { LayoutConfig, PaneInstanceConfig } from "../../../types/config";
+
+/** The pane types of every plugin that is switched off. */
+export function collectDisabledPaneIds(
+  pluginRegistry: Pick<PluginRegistry, "getPluginPaneIds">,
+  disabledPlugins: readonly string[],
+): Set<string> {
+  const paneIds = new Set<string>();
+  for (const pluginId of new Set(disabledPlugins)) {
+    for (const paneId of pluginRegistry.getPluginPaneIds(pluginId)) paneIds.add(paneId);
+  }
+  return paneIds;
+}
 
 export function resolveShellVisibleLayout(
   layout: LayoutConfig,
@@ -15,3 +29,32 @@ export function resolveShellVisibleLayout(
     { disabledPaneIds },
   );
 }
+
+/** A pane the shell leaves off screen: its plugin is off, or nothing registered its type. */
+function isShellHiddenPane(
+  instance: PaneInstanceConfig,
+  disabledPaneIds: ReadonlySet<string>,
+  registeredPaneIds: PaneTypeAvailability,
+): boolean {
+  const registered = typeof registeredPaneIds === "function"
+    ? !!registeredPaneIds(instance.paneId)
+    : registeredPaneIds.has(instance.paneId);
+  return !registered || disabledPaneIds.has(instance.paneId);
+}
+
+/**
+ * What to save after an edit made on the visible layout: the edit, with every
+ * pane the shell hid put back from the saved layout.
+ */
+export function restoreShellHiddenPanes(
+  saved: LayoutConfig,
+  edited: LayoutConfig,
+  disabledPaneIds: ReadonlySet<string>,
+  registeredPaneIds: PaneTypeAvailability,
+): LayoutConfig {
+  return restoreHiddenPanes(
+    saved,
+    edited,
+    (instance) => isShellHiddenPane(instance, disabledPaneIds, registeredPaneIds),
+  );
+}

package/src/components/layout/shell/window-mode/overlays.tsx

@@ -1,3 +1,4 @@
+import { useCallback } from "react";
 import { Box, Text } from "../../../../ui";
 import type {
   DockGeometryOptions,
@@ -8,6 +9,7 @@ import type {
 } from "../../../../layout/pane-manager";
 import { colors } from "../../../../theme/colors";
 import { constrainFloatingRectToBounds } from "../drag";
+import { useLiveDrag, type LiveDragGeometry, type LiveDragStore } from "../drag/live";
 import {
   getFloatingResizeCornerPosition,
   type WindowEditDockMovePreview,
@@ -27,9 +29,9 @@ interface ShellWindowModeOverlaysProps {
   contentHeight: number;
   dockGeometryOptions: DockGeometryOptions;
   dockLeafLayouts: DockLeafLayout[];
-  dragFloatingRect: { paneId: string; rect: FloatingRect } | null;
   focusedPaneId: string | null;
   getPaneTitle: (pane: ResolvedPane) => string;
+  live: LiveDragStore;
   menuOpen: boolean;
   nativePaneChrome: boolean;
   nativeWindowModePanelRect: LayoutBounds | null;
@@ -64,9 +66,9 @@ export function ShellWindowModeOverlays({
   contentHeight,
   dockGeometryOptions,
   dockLeafLayouts,
-  dragFloatingRect,
   focusedPaneId,
   getPaneTitle,
+  live,
   menuOpen,
   nativePaneChrome,
   nativeWindowModePanelRect,
@@ -84,9 +86,15 @@ export function ShellWindowModeOverlays({
   const highlightedDockedLeaf = highlightedPaneId && !highlightedFloatingPane
     ? dockLeafLayouts.find((leaf) => leaf.instanceId === highlightedPaneId)
     : null;
+  // The terminal frame follows a floating pane while it moves; desktop panes draw their own.
+  const followedPaneId = !nativePaneChrome && highlightedFloatingPane ? highlightedFloatingPane.pane.instance.instanceId : null;
+  const selectDragRect = useCallback((geometry: LiveDragGeometry) => (
+    followedPaneId && geometry.floating?.paneId === followedPaneId ? geometry.floating.rect : null
+  ), [followedPaneId]);
+  const dragRect = useLiveDrag(live, selectDragRect);
   const highlightedRect = highlightedFloatingPane
-    ? dragFloatingRect?.paneId === highlightedFloatingPane.pane.instance.instanceId
-      ? constrainFloatingRectToBounds(dragFloatingRect.rect, width, contentHeight)
+    ? dragRect
+      ? constrainFloatingRectToBounds(dragRect, width, contentHeight)
       : highlightedFloatingPane.rect
     : highlightedDockedLeaf?.rect ?? null;
   const highlightedZIndex = highlightedFloatingPane

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

@@ -13,6 +13,7 @@ import { blendHex, hoverBg } from "../../theme/colors";
 import { t, tf } from "../../i18n";
 import { useThemeColors } from "../../theme/theme-context";
 import { useAppDispatch, useAppSelector } from "../../state/app/context";
+import { useAppChromeShown } from "./presentation";
 import { useViewport } from "../../react/input";
 import {
   advertisedChord,
@@ -53,6 +54,7 @@ import {
   useClaimedStatusWidgetColumns,
   usePublishStatusWidgetRoom,
 } from "./status-widget-space";
+import { StarPromptStatusLine } from "../../app/star-prompt/status-line";
 
 type StatusBarEvent = { stopPropagation?: () => void; preventDefault?: () => void };
 type HoveredControl = string | null;
@@ -145,7 +147,7 @@ export function StatusBar({ onOpenChangelog }: { onOpenChangelog?: (version: str
   const { width: termWidth } = useViewport();
   const layouts = useAppSelector((state) => state.config.layouts);
   const activeLayoutIdx = useAppSelector((state) => state.config.activeLayoutIndex);
-  const statusBarVisible = useAppSelector((state) => state.statusBarVisible);
+  const statusBarVisible = useAppChromeShown().statusBar;
   const layout = useAppSelector((state) => state.config.layout);
   const { transientLayout } = useTransientLayout();
   const [hoveredControl, setHoveredControl] = useState<string | null>(null);
@@ -498,6 +500,7 @@ function TerminalStatusBar({
       {showTidyWindows && <TerminalTidyWindows {...props} />}
       <Box flexGrow={1} minWidth={0} />
       <StatusBarSummary nativePaneChrome={false} {...props} />
+      <StarPromptStatusLine />
       <PluginSlot name="status:widget" />
       <StatusBarFeedback nativePaneChrome={false} {...props} />
     </Box>

package/src/components/markdown-text.tsx

@@ -30,23 +30,27 @@ interface ParsedLine {
   indent?: number;
 }
 
+// A backslash escapes the punctuation markdown would read ("\\*" is a star), and
+// an italic span may hold a bold one ("*covers **96%** of value*").
 const INLINE_RE =
-  /(\*\*(?<bold>[^*]+)\*\*|(?<!\*)\*(?!\*)(?<italic>[^*]+)\*(?!\*)|`(?<code>[^`]+)`|~~(?<strike>[^~]+)~~)/g;
+  /(\\(?<escaped>[\\`*_~#>[\]()-])|\*\*(?<bold>[^*]+)\*\*|(?<!\*)\*(?!\*)(?<italic>(?:[^*]|\*\*[^*]+\*\*)+?)\*(?!\*)|`(?<code>[^`]+)`|~~(?<strike>[^~]+)~~)/g;
 
 function parseInlineMarkdown(text: string): StyledSegment[] {
   const segments: StyledSegment[] = [];
   let cursor = 0;
 
-  INLINE_RE.lastIndex = 0;
+  const pattern = new RegExp(INLINE_RE.source, "g");
   let match: RegExpExecArray | null;
-  while ((match = INLINE_RE.exec(text)) !== null) {
+  while ((match = pattern.exec(text)) !== null) {
     if (match.index > cursor) {
       segments.push({ text: text.slice(cursor, match.index) });
     }
-    if (match.groups?.bold != null) {
+    if (match.groups?.escaped != null) {
+      segments.push({ text: match.groups.escaped });
+    } else if (match.groups?.bold != null) {
       segments.push({ text: match.groups.bold, bold: true });
     } else if (match.groups?.italic != null) {
-      segments.push({ text: match.groups.italic, italic: true });
+      for (const inner of parseInlineMarkdown(match.groups.italic)) segments.push({ ...inner, italic: true });
     } else if (match.groups?.code != null) {
       segments.push({ text: match.groups.code, code: true });
     } else if (match.groups?.strike != null) {

package/src/components/metric-treemap/heat-surface.tsx

@@ -209,6 +209,17 @@ function useItemsById<T>(scene: MetricTreemapScene<T>, items: readonly MetricTre
 
 const VISIBLE_FADE_DISTANCE = 0.03;
 
+/** Text up a tall tile reads bottom to top, as a chart's vertical axis title does; the move sits right of the ticker. */
+const VERTICAL_LABEL_STYLE: CSSProperties = {
+  position: "relative",
+  display: "block",
+  flexShrink: 0,
+  maxHeight: "100%",
+  overflow: "hidden",
+  writingMode: "vertical-rl",
+  transform: "rotate(180deg)",
+};
+
 const DomHeatTile = memo(function DomHeatTile({
   id, rect, canvasWidth, canvasHeight, gap, label, value, valueSuffix, background, foreground,
   selected, reducedMotion, glide, pulseCount, events,
@@ -230,7 +241,10 @@ const DomHeatTile = memo(function DomHeatTile({
   events: SurfaceEvents;
 }) {
   const text = heatTileLabelPx(rect.width - gap * 2, rect.height - gap * 2, label, value);
-  const shownValue = heatTileValueWithSuffix(value, valueSuffix, { width: rect.width - gap * 2, valuePx: text.valuePx });
+  const shownValue = heatTileValueWithSuffix(value, valueSuffix, {
+    width: (text.vertical ? rect.height : rect.width) - gap * 2,
+    valuePx: text.valuePx,
+  });
   // Where this tile sat before the last relayout, kept to slide it from there.
   const placedRef = useRef(rect);
   const glideRef = useRef<{ dx: number; dy: number; count: number }>({ dx: 0, dy: 0, count: 0 });
@@ -305,13 +319,23 @@ const DomHeatTile = memo(function DomHeatTile({
   const lineStyle: CSSProperties = {
     position: "relative",
     display: "block",
-    maxWidth: "100%",
+    maxWidth: text.vertical ? undefined : "100%",
     overflow: "hidden",
     whiteSpace: "nowrap",
     textAlign: "center",
     letterSpacing: 0,
     color: foreground,
   };
+  const lines = (
+    <>
+      {text.tier !== "none" && (
+        <Text style={{ ...lineStyle, fontSize: text.tickerPx, fontWeight: 700, lineHeight: 1.12 }}>{label}</Text>
+      )}
+      {text.tier === "full" && value && (
+        <Text style={{ ...lineStyle, fontSize: text.valuePx, fontWeight: 500, lineHeight: 1.12 }}>{shownValue}</Text>
+      )}
+    </>
+  );
   return (
     <Box
       data-gloom-role="heat-tile"
@@ -347,12 +371,7 @@ const DomHeatTile = memo(function DomHeatTile({
           }}
         />
       )}
-      {text.tier !== "none" && (
-        <Text style={{ ...lineStyle, fontSize: text.tickerPx, fontWeight: 700, lineHeight: 1.12 }}>{label}</Text>
-      )}
-      {text.tier === "full" && value && (
-        <Text style={{ ...lineStyle, fontSize: text.valuePx, fontWeight: 500, lineHeight: 1.12 }}>{shownValue}</Text>
-      )}
+      {text.vertical ? <Box style={VERTICAL_LABEL_STYLE}>{lines}</Box> : lines}
     </Box>
   );
 });