gloomberb 0.6.1 → 0.7.1

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

@@ -0,0 +1,218 @@
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+  type RefObject,
+} from "react";
+import { Box, type ScrollBoxRenderable } from "../ui";
+
+export interface TableViewKeyEvent {
+  name?: string;
+  ctrl?: boolean;
+  meta?: boolean;
+  option?: boolean;
+  shift?: boolean;
+  preventDefault?: () => void;
+  stopPropagation?: () => void;
+}
+
+export interface TableViewFrameProps {
+  width?: number;
+  height?: number;
+  backgroundColor?: string;
+  before?: ReactNode;
+  after?: ReactNode;
+  children: ReactNode;
+}
+
+export function TableViewFrame({
+  width,
+  height,
+  backgroundColor,
+  before,
+  after,
+  children,
+}: TableViewFrameProps) {
+  return (
+    <Box
+      flexDirection="column"
+      flexGrow={1}
+      width={width}
+      height={height}
+      backgroundColor={backgroundColor}
+      overflow="hidden"
+    >
+      {before}
+      {children}
+      {after}
+    </Box>
+  );
+}
+
+export function isTableActivationKey(name: string | undefined): boolean {
+  return name === "enter" || name === "return";
+}
+
+export function isNextTableRowKey(name: string | undefined): boolean {
+  return name === "j" || name === "down";
+}
+
+export function isPreviousTableRowKey(name: string | undefined): boolean {
+  return name === "k" || name === "up";
+}
+
+export function stopTableKey(event: TableViewKeyEvent) {
+  event.stopPropagation?.();
+  event.preventDefault?.();
+}
+
+export function useTableViewState({
+  headerScrollRef,
+  scrollRef,
+  syncHeaderScroll,
+  hoveredIdx,
+  setHoveredIdx,
+}: {
+  headerScrollRef?: RefObject<ScrollBoxRenderable | null>;
+  scrollRef?: RefObject<ScrollBoxRenderable | null>;
+  syncHeaderScroll?: () => void;
+  hoveredIdx?: number | null;
+  setHoveredIdx?: (index: number | null) => void;
+}) {
+  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 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]);
+
+  return {
+    effectiveHeaderScrollRef,
+    effectiveScrollRef,
+    effectiveHoveredIdx,
+    effectiveSetHoveredIdx,
+    effectiveSyncHeaderScroll: syncHeaderScroll ?? defaultSyncHeaderScroll,
+  };
+}
+
+export function useTableBodyScrollActivity({
+  onBodyScrollActivity,
+  syncHeaderScroll,
+  afterScroll,
+}: {
+  onBodyScrollActivity?: () => void;
+  syncHeaderScroll: () => void;
+  afterScroll?: () => void;
+}) {
+  return useCallback(() => {
+    if (onBodyScrollActivity) {
+      onBodyScrollActivity();
+    } else {
+      queueMicrotask(syncHeaderScroll);
+    }
+    if (afterScroll) {
+      queueMicrotask(afterScroll);
+    }
+  }, [afterScroll, onBodyScrollActivity, syncHeaderScroll]);
+}
+
+export function useScrollBoxScrollActivity({
+  scrollRef,
+  onVerticalScroll,
+  onHorizontalScroll,
+}: {
+  scrollRef: RefObject<ScrollBoxRenderable | null>;
+  onVerticalScroll?: () => void;
+  onHorizontalScroll?: () => void;
+}) {
+  const onVerticalScrollRef = useRef(onVerticalScroll);
+  const onHorizontalScrollRef = useRef(onHorizontalScroll);
+  const verticalScrollScheduledRef = useRef(false);
+  const horizontalScrollScheduledRef = useRef(false);
+
+  useEffect(() => {
+    onVerticalScrollRef.current = onVerticalScroll;
+    onHorizontalScrollRef.current = onHorizontalScroll;
+  }, [onHorizontalScroll, onVerticalScroll]);
+
+  useEffect(() => {
+    const scrollBox = scrollRef.current;
+    if (!scrollBox) return;
+    let active = true;
+
+    const handleVerticalChange = () => {
+      if (verticalScrollScheduledRef.current) return;
+      verticalScrollScheduledRef.current = true;
+      queueMicrotask(() => {
+        verticalScrollScheduledRef.current = false;
+        if (!active) return;
+        onVerticalScrollRef.current?.();
+      });
+    };
+    const handleHorizontalChange = () => {
+      if (horizontalScrollScheduledRef.current) return;
+      horizontalScrollScheduledRef.current = true;
+      queueMicrotask(() => {
+        horizontalScrollScheduledRef.current = false;
+        if (!active) return;
+        onHorizontalScrollRef.current?.();
+      });
+    };
+
+    scrollBox.verticalScrollBar.on("change", handleVerticalChange);
+    scrollBox.horizontalScrollBar.on("change", handleHorizontalChange);
+
+    return () => {
+      active = false;
+      scrollBox.verticalScrollBar.off("change", handleVerticalChange);
+      scrollBox.horizontalScrollBar.off("change", handleHorizontalChange);
+    };
+  }, [scrollRef]);
+}
+
+export function useResetTableScroll({
+  headerScrollRef,
+  scrollRef,
+  resetScrollKey,
+  afterReset,
+}: {
+  headerScrollRef: RefObject<ScrollBoxRenderable | null>;
+  scrollRef: RefObject<ScrollBoxRenderable | null>;
+  resetScrollKey?: unknown;
+  afterReset?: () => void;
+}) {
+  const afterResetRef = useRef(afterReset);
+
+  useEffect(() => {
+    afterResetRef.current = afterReset;
+  }, [afterReset]);
+
+  useEffect(() => {
+    if (resetScrollKey === undefined) return;
+    const body = scrollRef.current;
+    if (body) {
+      body.scrollTop = 0;
+      body.scrollLeft = 0;
+    }
+    const header = headerScrollRef.current;
+    if (header) {
+      header.scrollLeft = 0;
+    }
+    if (afterResetRef.current) {
+      queueMicrotask(afterResetRef.current);
+    }
+  }, [headerScrollRef, resetScrollKey, scrollRef]);
+}

package/src/components/ticker-list-table-view.tsx

@@ -2,15 +2,24 @@ import {
   useCallback,
   useEffect,
   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 { TickerListTable, type TickerListTableProps } from "./ticker-list-table";
 import type { TickerRecord } from "../types/ticker";
 import type { DataTableKeyEvent } from "./data-table-view";
+import {
+  isNextTableRowKey,
+  isPreviousTableRowKey,
+  isTableActivationKey,
+  stopTableKey,
+  TableViewFrame,
+  useResetTableScroll,
+  useTableBodyScrollActivity,
+  useTableViewState,
+} from "./table-view-shared";
 
 export interface TickerListVisibleRange {
   start: number;
@@ -47,23 +56,6 @@ export interface TickerListTableViewProps extends Omit<
   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 TickerListTableView({
   focused = false,
   rootBefore,
@@ -86,20 +78,23 @@ export function TickerListTableView({
   resetScrollKey,
   ...tableProps
 }: TickerListTableViewProps) {
-  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 selectedIndex = tableProps.tickers.findIndex(
     (ticker) => ticker.metadata.ticker === tableProps.cursorSymbol,
   );
+  const lastScrollCursorSymbolRef = useRef<string | null | undefined>(undefined);
 
   const emitVisibleRange = useCallback(() => {
     if (!onVisibleRangeChange) return;
@@ -113,24 +108,11 @@ export function TickerListTableView({
     onVisibleRangeChange({ start, end });
   }, [effectiveScrollRef, onVisibleRangeChange, tableProps.tickers.length, visibleRangeBuffer]);
 
-  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();
-    } else {
-      queueMicrotask(effectiveSyncHeaderScroll);
-    }
-    queueMicrotask(emitVisibleRange);
-  }, [effectiveSyncHeaderScroll, emitVisibleRange, onBodyScrollActivity]);
+  const handleBodyScrollActivity = useTableBodyScrollActivity({
+    onBodyScrollActivity,
+    syncHeaderScroll: effectiveSyncHeaderScroll,
+    afterScroll: emitVisibleRange,
+  });
 
   useEffect(() => {
     const scrollBox = effectiveScrollRef.current;
@@ -139,19 +121,12 @@ export function TickerListTableView({
     emitVisibleRange();
   }, [emitVisibleRange, effectiveScrollRef, rootHeight, tableProps.tickers.length]);
 
-  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;
-    }
-    queueMicrotask(emitVisibleRange);
-  }, [effectiveHeaderScrollRef, effectiveScrollRef, emitVisibleRange, resetScrollKey]);
+  useResetTableScroll({
+    headerScrollRef: effectiveHeaderScrollRef,
+    scrollRef: effectiveScrollRef,
+    resetScrollKey,
+    afterReset: emitVisibleRange,
+  });
 
   const selectIndex = useCallback((index: number) => {
     if (index < 0 || index >= tableProps.tickers.length) return;
@@ -192,19 +167,19 @@ export function TickerListTableView({
     if (onRootKeyDown?.(event)) return;
     if (tableProps.tickers.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();
     }
@@ -212,7 +187,19 @@ export function TickerListTableView({
 
   useEffect(() => {
     const scrollBox = effectiveScrollRef.current;
-    if (!scrollBox?.viewport || selectedIndex < 0) return;
+    if (!scrollBox?.viewport || selectedIndex < 0) {
+      queueMicrotask(emitVisibleRange);
+      return;
+    }
+
+    const shouldScrollToCursor =
+      lastScrollCursorSymbolRef.current !== tableProps.cursorSymbol;
+    lastScrollCursorSymbolRef.current = tableProps.cursorSymbol;
+
+    if (!shouldScrollToCursor) {
+      queueMicrotask(emitVisibleRange);
+      return;
+    }
 
     const viewportHeight = Math.max(scrollBox.viewport.height, 1);
     if (selectedIndex < scrollBox.scrollTop) {
@@ -221,18 +208,16 @@ export function TickerListTableView({
       scrollBox.scrollTo(selectedIndex - viewportHeight + 1);
     }
     queueMicrotask(emitVisibleRange);
-  }, [effectiveScrollRef, emitVisibleRange, selectedIndex]);
+  }, [effectiveScrollRef, emitVisibleRange, selectedIndex, tableProps.cursorSymbol]);
 
   return (
-    <Box
-      flexDirection="column"
-      flexGrow={1}
+    <TableViewFrame
       width={rootWidth}
       height={rootHeight}
       backgroundColor={rootBackgroundColor}
-      overflow="hidden"
+      before={rootBefore}
+      after={rootAfter}
     >
-      {rootBefore}
       <TickerListTable
         {...tableProps}
         headerScrollRef={effectiveHeaderScrollRef}
@@ -242,7 +227,6 @@ export function TickerListTableView({
         hoveredIdx={effectiveHoveredIdx}
         setHoveredIdx={effectiveSetHoveredIdx}
       />
-      {rootAfter}
-    </Box>
+    </TableViewFrame>
   );
 }

package/src/components/ticker-list-table.test.tsx

@@ -1,13 +1,17 @@
 import { afterEach, describe, expect, test } from "bun:test";
-import { act, useState } from "react";
+import { act, useEffect, useRef, useState } from "react";
 import { testRender } from "../renderers/opentui/test-utils";
 import type { ColumnConfig } from "../types/config";
 import type { TickerFinancials } from "../types/financials";
 import type { TickerRecord } from "../types/ticker";
+import type { ScrollBoxRenderable } from "../ui";
 import { TickerListTable, type TickerTableCell } from "./ticker-list-table";
+import { TickerListTableView } from "./ticker-list-table-view";
 
 let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
 let setHarnessCursorSymbol: ((symbol: string) => void) | null = null;
+let setHarnessTickers: ((tickers: TickerRecord[]) => void) | null = null;
+let tableScrollRef: ScrollBoxRenderable | null = null;
 let resolveCellCallCount = 0;
 
 const columns: ColumnConfig[] = [
@@ -60,6 +64,16 @@ function TickerListTableHarness() {
 
 function LargeTickerListTableHarness() {
   const [cursorSymbol, setCursorSymbol] = useState("T0");
+  const scrollRef = useRef<ScrollBoxRenderable>(null);
+
+  useEffect(() => {
+    tableScrollRef = scrollRef.current;
+    return () => {
+      if (tableScrollRef === scrollRef.current) {
+        tableScrollRef = null;
+      }
+    };
+  });
 
   return (
     <TickerListTable
@@ -71,6 +85,35 @@ function LargeTickerListTableHarness() {
       setCursorSymbol={setCursorSymbol}
       resolveCell={resolveCell}
       financialsMap={financialsMap}
+      scrollRef={scrollRef}
+    />
+  );
+}
+
+function ReorderingTickerListTableViewHarness() {
+  const [rows, setRows] = useState(manyTickers);
+  const scrollRef = useRef<ScrollBoxRenderable>(null);
+  setHarnessTickers = setRows;
+
+  useEffect(() => {
+    tableScrollRef = scrollRef.current;
+    return () => {
+      if (tableScrollRef === scrollRef.current) {
+        tableScrollRef = null;
+      }
+    };
+  });
+
+  return (
+    <TickerListTableView
+      focused
+      columns={columns}
+      tickers={rows}
+      cursorSymbol="T0"
+      setCursorSymbol={() => {}}
+      resolveCell={resolveCell}
+      financialsMap={financialsMap}
+      scrollRef={scrollRef}
     />
   );
 }
@@ -84,6 +127,8 @@ afterEach(async () => {
   }
   resolveCellCallCount = 0;
   setHarnessCursorSymbol = null;
+  setHarnessTickers = null;
+  tableScrollRef = null;
 });
 
 describe("TickerListTable", () => {
@@ -125,5 +170,41 @@ describe("TickerListTable", () => {
     expect(frame).toContain("T0");
     expect(frame).not.toContain("T999");
     expect(resolveCellCallCount).toBeLessThan(40);
+
+    await act(async () => {
+      for (let index = 0; index < 12; index++) {
+        await testSetup!.mockMouse.scroll(2, 2, "down");
+      }
+      await Promise.resolve();
+      await testSetup!.renderOnce();
+    });
+
+    const scrollTop = tableScrollRef?.scrollTop ?? 0;
+    expect(scrollTop).toBeGreaterThan(0);
+    expect(testSetup.captureCharFrame()).toContain(`T${scrollTop}`);
+  });
+
+  test("preserves manual scroll when market data reorders rows around the same cursor", async () => {
+    testSetup = await testRender(
+      <ReorderingTickerListTableViewHarness />,
+      { width: 20, height: 8 },
+    );
+
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    tableScrollRef!.scrollTop = 20;
+    expect(tableScrollRef?.scrollTop).toBe(20);
+
+    await act(async () => {
+      setHarnessTickers?.([...manyTickers.slice(1), manyTickers[0]!]);
+      await Promise.resolve();
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    expect(tableScrollRef?.scrollTop).toBe(20);
   });
 });

package/src/components/ticker-list-table.tsx

@@ -1,8 +1,18 @@
-import { Box, ScrollBox, Text, tickerContextMenuItems, useContextMenu, useRendererHost, useUiCapabilities } from "../ui";
+import {
+  Box,
+  ScrollBox,
+  Text,
+  tickerContextMenuItems,
+  useContextMenu,
+  useNativeRenderer,
+  useRendererHost,
+  useUiCapabilities,
+} from "../ui";
 import { memo, useCallback, useMemo, useRef, useState, type RefObject } from "react";
 import { TextAttributes, type ScrollBoxRenderable } from "../ui";
 import { EmptyState } from "./ui";
 import { colors, hoverBg } from "../theme/colors";
+import { useThemeColors } from "../theme/theme-context";
 import { getSharedRegistry } from "../plugins/registry";
 import type { ColumnConfig } from "../types/config";
 import type { TickerFinancials, PricePoint } from "../types/financials";
@@ -12,8 +22,8 @@ import { renderChart, resolveChartPalette, type StyledContent } from "./chart/ch
 import type { ProjectedChartPoint } from "./chart/chart-data";
 import { tableContentWidthProps, useMeasuredTableContentWidth } from "./ui/table-layout";
 import { useViewport } from "../react/input";
-import { useRafCallback } from "../react/use-raf-callback";
 import { measurePerf } from "../utils/perf-marks";
+import { useScrollBoxScrollActivity } from "./table-view-shared";
 
 export interface TickerTableCell {
   text: string;
@@ -102,6 +112,7 @@ const TickerListHeader = memo(function TickerListHeader({
   onHeaderClick?: (columnId: string) => void;
   onSizeChange?: () => void;
 }) {
+  useThemeColors();
   return (
     <ScrollBox
       ref={headerScrollRef}
@@ -211,6 +222,7 @@ const TickerListRow = memo(function TickerListRow({
   priceHistory?: PricePoint[];
   contentWidth: number;
 }) {
+  useThemeColors();
   const lastActivatedAtRef = useRef<number | null>(null);
   const rowBg = isSelected ? colors.selected : isHovered ? hoverBg() : colors.bg;
 
@@ -328,6 +340,7 @@ export function TickerListTable({
   const hoveredIdxRef = useRef(hoveredIdx);
   const appViewport = useViewport();
   const renderer = useRendererHost();
+  const nativeRenderer = useNativeRenderer();
   const { showContextMenu } = useContextMenu();
   const { nativeContextMenu } = useUiCapabilities();
   const [scrollVersion, setScrollVersion] = useState(0);
@@ -387,12 +400,16 @@ export function TickerListTable({
       setScrollVersion((current) => current + 1);
     }
     onBodyScrollActivity?.();
-  }, [onBodyScrollActivity, virtualize]);
+    nativeRenderer.requestRender();
+  }, [nativeRenderer, onBodyScrollActivity, virtualize]);
   const syncHeader = useCallback(() => {
     syncHeaderScroll?.();
   }, [syncHeaderScroll]);
-  const scheduleBodyScrollActivity = useRafCallback(handleBodyScrollActivity);
-  const scheduleHeaderScrollSync = useRafCallback(syncHeader);
+  useScrollBoxScrollActivity({
+    scrollRef: effectiveScrollRef,
+    onVerticalScroll: handleBodyScrollActivity,
+    onHorizontalScroll: syncHeader,
+  });
   const setHoveredIdxIfChanged = useCallback((index: number | null) => {
     if (hoveredIdxRef.current === index) return;
     setHoveredIdx(index);
@@ -448,10 +465,6 @@ export function TickerListTable({
         scrollX
         scrollY
         focusable={false}
-        onMouseDown={scheduleHeaderScrollSync}
-        onMouseUp={scheduleBodyScrollActivity}
-        onMouseDrag={scheduleBodyScrollActivity}
-        onMouseScroll={scheduleBodyScrollActivity}
         onSizeChange={measureContentWidth}
       >
         {tickers.length === 0 ? (

package/src/components/ui/confirm-dialog.tsx

@@ -0,0 +1,66 @@
+import { useCallback, type ReactNode } from "react";
+import { Box, Text } from "../../ui";
+import { colors } from "../../theme/colors";
+import { type PromptContext, useDialogKeyboard } from "../../ui/dialog";
+import { Button, type ButtonVariant } from "./button";
+import { DialogFrame } from "./frame";
+
+export interface ConfirmDialogProps extends PromptContext<boolean> {
+  title: string;
+  body: ReactNode | string | string[];
+  confirmLabel: string;
+  cancelLabel?: string;
+  confirmVariant?: ButtonVariant;
+  width?: number;
+  footer?: string;
+}
+
+export function ConfirmDialog({
+  resolve,
+  title,
+  body,
+  confirmLabel,
+  cancelLabel = "Cancel",
+  confirmVariant = "danger",
+  width = 52,
+  footer,
+}: ConfirmDialogProps) {
+  const confirm = useCallback(() => resolve(true), [resolve]);
+  const cancel = useCallback(() => resolve(false), [resolve]);
+
+  useDialogKeyboard((event) => {
+    event.stopPropagation();
+    if (event.name === "enter" || event.name === "return") {
+      confirm();
+      return;
+    }
+    if (event.name === "escape") {
+      cancel();
+    }
+  });
+
+  return (
+    <DialogFrame title={title} footer={footer ?? `Enter ${confirmLabel.toLowerCase()} · Esc cancel`}>
+      <Box flexDirection="column" width={width}>
+        {renderBody(body)}
+        <Box height={1} />
+        <Box flexDirection="row" gap={1}>
+          <Button label={confirmLabel} variant={confirmVariant} onPress={confirm} />
+          <Button label={cancelLabel} variant="secondary" onPress={cancel} />
+        </Box>
+      </Box>
+    </DialogFrame>
+  );
+}
+
+function renderBody(body: ReactNode | string | string[]): ReactNode {
+  if (Array.isArray(body)) {
+    return body.map((line, index) => (
+      <Text key={`${line}:${index}`} fg={index === 0 ? colors.text : colors.textDim}>{line}</Text>
+    ));
+  }
+  if (typeof body === "string") {
+    return <Text fg={colors.text}>{body}</Text>;
+  }
+  return body;
+}