gloomberb 0.13.3 → 0.14.0

package/src/components/ui/data-table/opentui/index.tsx

@@ -8,6 +8,7 @@ import { measurePerf } from "../../../../utils/perf-marks";
 import { useDoubleClickActivation } from "../../../use-double-click-activation";
 import { useScrollBoxScrollActivity } from "../../../table-view-shared";
 import { EmptyState } from "../../status";
+import { observeScrollBoxContentSize, observeScrollBoxViewportSize } from "../../../../renderers/opentui/scrollbox-layout";
 import {
   expandTableColumns,
   fitTableCellText,
@@ -23,6 +24,7 @@ import type {
   DataTableVisibleRange,
 } from "../types";
 import { resolveDataTableVisibleRange } from "../visible-range";
+import { useStableColumns } from "../stable-columns";
 import {
   resolveDataTableScrollTop,
   resolveDataTableVisibleWindow,
@@ -57,6 +59,7 @@ function OpenTuiDataTableRowInner<
   contentWidth,
   displayColumns,
   focusPane,
+  frozenColumnOffset,
   getRowBackgroundColor,
   handleRowMouseDown,
   horizontalPadding,
@@ -76,6 +79,7 @@ function OpenTuiDataTableRowInner<
   contentWidth: number;
   displayColumns: C[];
   focusPane: () => void;
+  frozenColumnOffset?: number;
   getRowBackgroundColor?: DataTableProps<T, C>["getRowBackgroundColor"];
   handleRowMouseDown: (
     targetKey: string,
@@ -147,12 +151,20 @@ function OpenTuiDataTableRowInner<
         onRowContextMenu?.(item, index, event);
       }}
     >
-      {displayColumns.map((column) => {
+      {displayColumns.map((column, columnIndex) => {
         const cell = renderCell(item, column, index, rowState);
+        const frozen = columnIndex === 0 && frozenColumnOffset !== undefined;
+        const columnStart = displayColumns.slice(0, columnIndex).reduce((sum, current) => sum + current.width + columnGap, 0);
+        const inset = !frozen && frozenColumnOffset !== undefined
+          ? Math.min(column.width, Math.max(0, frozenColumnOffset + (displayColumns[0]?.width ?? 0) + columnGap - columnStart)) : 0;
         return (
           <Box
             key={column.id}
-            width={column.width + columnGap}
+            width={column.width + columnGap + (frozen ? horizontalPadding : 0)}
+            marginLeft={frozen ? -horizontalPadding : 0}
+            position="relative"
+            left={frozen ? frozenColumnOffset : undefined}
+            zIndex={frozen ? 1 : undefined}
             backgroundColor={cell.backgroundColor ?? rowBg}
             onMouseDown={(event: any) => {
               focusPane();
@@ -170,14 +182,19 @@ function OpenTuiDataTableRowInner<
               handleRowMouseDown(itemKey, { item, index }, event);
             }}
           >
-            {cell.content !== undefined ? (
-              cell.content
-            ) : (
+            {cell.content !== undefined ? (frozenColumnOffset === undefined ? cell.content : (
+              <>
+                {frozen && <Text position="absolute" left={0} top={0}>{" ".repeat(column.width + columnGap + horizontalPadding)}</Text>}
+                <Box marginLeft={frozen ? horizontalPadding : inset} width={Math.max(0, column.width - inset)} overflow="hidden">
+                  {cell.content}
+                </Box>
+              </>
+            )) : (
               <Text
                 attributes={cell.attributes ?? TextAttributes.NONE}
                 fg={cell.color ?? (selected ? colors.selectedText : colors.text)}
               >
-                {fitTableCellText(cell.text, column.width, column.align)}
+                {`${frozen ? " ".repeat(horizontalPadding) : ""}${" ".repeat(inset)}${inset < column.width ? fitTableCellText(cell.text, column.width - inset, column.align) : ""}${frozen ? " ".repeat(columnGap) : ""}`}
               </Text>
             )}
           </Box>
@@ -190,7 +207,7 @@ function OpenTuiDataTableRowInner<
 const OpenTuiDataTableRow = memo(OpenTuiDataTableRowInner) as typeof OpenTuiDataTableRowInner;
 
 export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>({
-  columns,
+  columns: columnsProp,
   items,
   sortColumnId,
   sortDirection,
@@ -224,17 +241,24 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
   horizontalPadding = 1,
   fillAvailableWidth = true,
   showHorizontalScrollbar = true,
+  freezeFirstColumn = false,
   scrollToIndex,
   scrollToIndexAlign = "nearest",
   scrollToIndexVersion = 0,
 }: DataTableProps<T, C>) {
+  const columns = useStableColumns(columnsProp);
   const colors = useThemeColors();
   const dispatch = useAppDispatch();
   const paneInstanceId = usePaneInstance()?.instanceId ?? null;
   const appViewport = useViewport();
   const nativeRenderer = useNativeRenderer();
   const [scrollVersion, setScrollVersion] = useState(0);
+  const [frozenColumnOffset, setFrozenColumnOffset] = useState(0);
+  useEffect(() => {
+    if (freezeFirstColumn) setFrozenColumnOffset(scrollRef.current?.scrollLeft ?? 0);
+  }, [freezeFirstColumn, scrollRef]);
   const lastAppliedScrollRequestRef = useRef<string | null>(null);
+  const controlledScrollTopRef = useRef<number | null>(null);
   const lastVisibleRangeRef = useRef<{
     key: string | number | undefined;
     range: DataTableVisibleRange;
@@ -323,22 +347,44 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
     if (virtualize) {
       setScrollVersion((current) => current + 1);
     }
-    onBodyScrollActivity();
+    const controlledTop = controlledScrollTopRef.current;
+    controlledScrollTopRef.current = null;
+    const source = controlledTop !== null && scrollRef.current?.scrollTop === controlledTop
+      ? "programmatic"
+      : "user";
+    onBodyScrollActivity(source);
     emitVisibleRange();
     nativeRenderer.requestRender();
-  }, [emitVisibleRange, nativeRenderer, onBodyScrollActivity, virtualize]);
+  }, [emitVisibleRange, nativeRenderer, onBodyScrollActivity, scrollRef, virtualize]);
+  const syncHorizontalScroll = useCallback(() => {
+    syncHeaderScroll();
+    if (freezeFirstColumn) setFrozenColumnOffset(scrollRef.current?.scrollLeft ?? 0);
+  }, [freezeFirstColumn, scrollRef, syncHeaderScroll]);
   useScrollBoxScrollActivity({
     scrollRef,
     onVerticalScroll: handleBodyScrollActivity,
-    onHorizontalScroll: syncHeaderScroll,
+    onHorizontalScroll: syncHorizontalScroll,
+  });
+  const syncBodyScroll = useCallback(() => {
+    const header = headerScrollRef.current;
+    const body = scrollRef.current;
+    if (!header || !body || body.scrollLeft === header.scrollLeft) return;
+    body.scrollLeft = header.scrollLeft;
+    if (freezeFirstColumn) setFrozenColumnOffset(body.scrollLeft ?? 0);
+    nativeRenderer.requestRender();
+  }, [freezeFirstColumn, headerScrollRef, nativeRenderer, scrollRef]);
+  useScrollBoxScrollActivity({
+    scrollRef: headerScrollRef,
+    onHorizontalScroll: syncBodyScroll,
   });
   const handleBodySizeChange = useCallback(() => {
     measureContentWidth();
-    if (virtualize) {
-      setScrollVersion((current) => current + 1);
-    }
+    setScrollVersion((current) => current + 1);
     queueMicrotask(emitVisibleRange);
-  }, [emitVisibleRange, measureContentWidth, virtualize]);
+  }, [emitVisibleRange, measureContentWidth]);
+
+  useEffect(() => observeScrollBoxContentSize(scrollRef.current, handleBodySizeChange), [handleBodySizeChange, scrollRef]);
+  useEffect(() => observeScrollBoxViewportSize(scrollRef.current, handleBodySizeChange), [handleBodySizeChange, scrollRef]);
 
   useEffect(() => {
     emitVisibleRange();
@@ -350,9 +396,14 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
   }, [dispatch, paneInstanceId]);
 
   const applyScrollToIndex = useCallback(() => {
-    if (scrollToIndex == null || items.length === 0) return true;
+    if (scrollToIndex == null) return true;
+    if (items.length === 0) return false;
     const scrollBox = scrollRef.current;
-    if (!scrollBox?.viewport) return false;
+    // An empty or unmeasured body clamps scrollTo to zero. Keep the request
+    // pending until the rows and viewport have completed native layout.
+    if (!scrollBox?.viewport
+      || scrollBox.viewport.height <= 0
+      || scrollBox.scrollHeight < items.length) return false;
 
     const targetIndex = Math.max(0, Math.min(scrollToIndex, items.length - 1));
     const visibleHeight = Math.max(
@@ -370,6 +421,7 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
 
     if (nextTop === currentTop) return true;
     scrollBox.scrollTo(nextTop);
+    controlledScrollTopRef.current = scrollBox.scrollTop;
     return scrollBox.scrollTop === nextTop;
   }, [
     appViewport.height,
@@ -406,6 +458,17 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
   }, [columns.length, headerScrollRef, horizontalScrollbarVisible, items.length, measuredViewportHeight, scrollRef]);
 
   useEffect(() => {
+    if (items.length === 0) {
+      lastAppliedScrollRequestRef.current = null;
+      const body = scrollRef.current;
+      if (body && body.scrollTop !== 0) {
+        // Removing a scrolled dataset is a layout reset, not user navigation.
+        // Reveal its loading state and let the next dataset center normally.
+        body.scrollTo(0);
+        controlledScrollTopRef.current = body.scrollTop;
+      }
+      return;
+    }
     if (scrollToIndex == null) {
       lastAppliedScrollRequestRef.current = null;
       return;
@@ -414,6 +477,7 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
     const scrollRequestKey = [
       scrollToIndex,
       scrollToIndexVersion,
+      scrollToIndexAlign,
       measuredViewportHeight ?? "pending",
     ].join(":");
     if (lastAppliedScrollRequestRef.current === scrollRequestKey) return;
@@ -422,22 +486,17 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
       lastAppliedScrollRequestRef.current = scrollRequestKey;
       return;
     }
-    let cancelled = false;
-    const retry = () => {
-      if (cancelled) return;
-      if (applyScrollToIndex()) {
-        lastAppliedScrollRequestRef.current = scrollRequestKey;
-      }
-    };
-    process.nextTick(retry);
-    return () => {
-      cancelled = true;
-    };
+    // Body/content size events retry a pending request after measurement;
+    // completed requests remain consumed while users scroll or rows append.
   }, [
     applyScrollToIndex,
+    items.length,
     measuredViewportHeight,
+    scrollRef,
     scrollToIndex,
+    scrollToIndexAlign,
     scrollToIndexVersion,
+    scrollVersion,
   ]);
 
   return (
@@ -452,7 +511,7 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
       <ScrollBox
         id={headerScrollId}
         ref={headerScrollRef}
-        width="100%"
+        width={measuredViewportWidth || "100%"}
         height={1}
         backgroundColor={colors.panel}
         scrollX={showHorizontalScrollbar}
@@ -467,22 +526,30 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
           backgroundColor={colors.panel}
         >
           {displayColumns.map((column, columnIndex) => {
+            const frozen = freezeFirstColumn && columnIndex === 0;
+            const columnStart = displayColumns.slice(0, columnIndex).reduce((sum, current) => sum + current.width + columnGap, 0);
+            const inset = freezeFirstColumn && !frozen
+              ? Math.min(column.width, Math.max(0, frozenColumnOffset + (displayColumns[0]?.width ?? 0) + columnGap - columnStart)) : 0;
             const isSorted = sortColumnId === column.id;
             const indicator = isSorted
               ? sortDirection === "asc"
                 ? " ▲"
                 : " ▼"
               : "";
-            const labelText = fitTableHeaderText(
+            const labelText = " ".repeat(inset) + (inset < column.width ? fitTableHeaderText(
               column.label + indicator,
-              column.width,
+              column.width - inset,
               column.align,
               columnIndex < displayColumns.length - 1,
-            );
+            ) : "");
             return (
               <Box
                 key={column.id}
-                width={column.width + columnGap}
+                width={column.width + columnGap + (frozen ? horizontalPadding : 0)}
+                marginLeft={frozen ? -horizontalPadding : 0}
+                position="relative"
+                left={frozen ? frozenColumnOffset : undefined}
+                zIndex={frozen ? 1 : undefined}
                 backgroundColor={column.headerBackgroundColor ?? colors.panel}
                 onMouseDown={(event: any) => {
                   focusPane();
@@ -495,7 +562,7 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
                   attributes={TextAttributes.BOLD}
                   fg={isSorted ? colors.text : column.headerColor ?? colors.textDim}
                 >
-                  {labelText}
+                  {frozen ? `${" ".repeat(horizontalPadding)}${labelText}${" ".repeat(columnGap)}` : labelText}
                 </Text>
               </Box>
             );
@@ -541,6 +608,7 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
                     contentWidth={contentWidth}
                     displayColumns={displayColumns}
                     focusPane={focusPane}
+                    frozenColumnOffset={freezeFirstColumn ? frozenColumnOffset : undefined}
                     getRowBackgroundColor={getRowBackgroundColor}
                     handleRowMouseDown={handleRowMouseDown}
                     horizontalPadding={horizontalPadding}

package/src/components/ui/data-table/stable-columns.ts

@@ -0,0 +1,34 @@
+import { useRef } from "react";
+import type { DataTableColumn } from "./types";
+
+/**
+ * Panes often build their column list inline, so its identity changes on every
+ * render even when nothing in it did. Row memoization keys on the derived
+ * display columns, so a fresh array would re-render every visible row on each
+ * keypress. Compares every own field of every column so a pane-specific field
+ * that changes still gets through.
+ */
+export function columnsEqual<C extends DataTableColumn>(
+  previous: readonly C[],
+  next: readonly C[],
+): boolean {
+  if (previous === next) return true;
+  if (previous.length !== next.length) return false;
+  for (let index = 0; index < previous.length; index += 1) {
+    const left = previous[index] as Record<string, unknown>;
+    const right = next[index] as Record<string, unknown>;
+    if (left === right) continue;
+    const leftKeys = Object.keys(left);
+    if (leftKeys.length !== Object.keys(right).length) return false;
+    for (const key of leftKeys) {
+      if (!Object.is(left[key], right[key])) return false;
+    }
+  }
+  return true;
+}
+
+export function useStableColumns<C extends DataTableColumn>(columns: readonly C[]): readonly C[] {
+  const stable = useRef(columns);
+  if (!columnsEqual(stable.current, columns)) stable.current = columns;
+  return stable.current;
+}

package/src/components/ui/data-table/types.ts

@@ -54,7 +54,8 @@ export interface DataTableProps<
   headerScrollRef: RefObject<ScrollBoxRenderable | null>;
   scrollRef: RefObject<ScrollBoxRenderable | null>;
   syncHeaderScroll: () => void;
-  onBodyScrollActivity: () => void;
+  /** Controlled browser scrolling reports its origin; all scrolls still notify pagination. */
+  onBodyScrollActivity: (source?: "programmatic" | "user") => void;
   headerScrollId?: string;
   bodyScrollId?: string;
   getItemKey: (item: T, index: number) => string;
@@ -93,6 +94,10 @@ export interface DataTableProps<
   horizontalPadding?: number;
   fillAvailableWidth?: boolean;
   showHorizontalScrollbar?: boolean;
+  /** Keep the row identifier visible during horizontal scrolling. */
+  freezeFirstColumn?: boolean;
+  /** Append export-only source records after the displayed table. */
+  getExportMetadata?: () => readonly (readonly unknown[])[];
   scrollToIndex?: number | null;
   scrollToIndexAlign?: DataTableScrollAlign;
   scrollToIndexVersion?: number;

package/src/components/ui/display.desktop.test.tsx

@@ -0,0 +1,55 @@
+import { afterEach, expect, test } from "bun:test";
+import { act, useState } from "react";
+import { createDomTestHarness } from "../../renderers/electrobun/view/test-utils";
+import { syncTheme } from "../../theme/colors";
+import { ThemeProvider } from "../../theme/theme-context";
+import { DEFAULT_THEME } from "../../theme/themes";
+import { Button } from "./button";
+import { Badge, Divider, SectionHeading } from "./display";
+import { PaneStatusBody } from "./status";
+
+const { render, window } = createDomTestHarness();
+afterEach(() => syncTheme(DEFAULT_THEME));
+
+test("stable display content follows theme changes and status transitions expose only the active state", async () => {
+  let updateTheme!: (theme: string) => void;
+  let updateState!: (state: "loading" | "error" | "ready") => void;
+  let retries = 0;
+  const display = <><SectionHeading title="Details" /><Badge label="Live" tone="positive" /><Divider /></>;
+  function View() {
+    const [theme, setTheme] = useState(DEFAULT_THEME);
+    const [state, setState] = useState<"loading" | "error" | "ready">("loading");
+    updateTheme = setTheme;
+    updateState = setState;
+    return (
+      <ThemeProvider themeId={theme}>
+        {display}
+        <PaneStatusBody
+          loading={state === "loading"}
+          error={state === "error" ? "Please retry this request." : null}
+          subject="history"
+          actions={<Button label="Retry" onPress={() => { retries += 1; }} />}
+        >
+          <span>Loaded history</span>
+        </PaneStatusBody>
+      </ThemeProvider>
+    );
+  }
+  const container = await render(<View />);
+  const headingColor = () => (container.querySelector('[data-gloom-ui="section-heading"] span') as HTMLElement).style.color;
+  const original = headingColor();
+  expect(container.querySelector('[data-gloom-status="loading"]')).not.toBeNull();
+  await act(async () => { updateTheme("midnight"); updateState("error"); });
+  expect(headingColor()).not.toBe(original);
+  expect(container.querySelector('[data-gloom-status="loading"]')).toBeNull();
+  expect(container.querySelector('[data-gloom-status="empty"]')).toBeNull();
+  expect(container.querySelector('[data-gloom-status="error"]')?.textContent).toContain("Please retry this request.");
+  await act(async () => {
+    container.querySelector("button")!.dispatchEvent(new window.MouseEvent("click", { bubbles: true }) as unknown as Event);
+    updateState("ready");
+  });
+  expect(retries).toBe(1);
+  expect(container.querySelector('[data-gloom-status]')).toBeNull();
+  expect(container.textContent).toContain("Loaded history");
+  expect(container.querySelector('[data-gloom-ui="divider"]')?.textContent).toBe("");
+});

package/src/components/ui/display.test.tsx

@@ -0,0 +1,36 @@
+import { afterEach, expect, test } from "bun:test";
+import { act } from "react";
+import { testRender } from "../../renderers/opentui/test-utils";
+import { Box, Text } from "../../ui";
+import { KeyValueRow } from "./display";
+import { EmptyState } from "./status";
+
+let setup: Awaited<ReturnType<typeof testRender>> | undefined;
+afterEach(async () => {
+  if (setup) await act(async () => setup!.renderer.destroy());
+  setup = undefined;
+});
+
+test("metric rows use available width and narrow status messages keep their final line", async () => {
+  setup = await testRender(
+    <Box flexDirection="column" width={30}>
+      <KeyValueRow width={30} labelWidth={8} label="Margin" value="100,000 -> 200,000" />
+      <Box flexDirection="row">
+        <KeyValueRow width={5} labelWidth={16} label="Long label" value="42" />
+        <Text>| next</Text>
+      </Box>
+      <Box width={22}>
+        <EmptyState status="error" title="Provider unavailable." message="The provider could not complete the request; please retry shortly." />
+      </Box>
+    </Box>,
+    { width: 40, height: 12 },
+  );
+  await act(async () => {
+    await setup!.renderOnce();
+    await setup!.renderOnce();
+  });
+  const lines = setup.captureCharFrame().split("\n");
+  expect(lines[0]).toContain("100,000 -> 200,000");
+  expect(lines[1]?.indexOf("| next")).toBe(5);
+  expect(lines.map((line) => line.trim()).join(" ")).toContain("retry shortly.");
+});

package/src/components/ui/display.tsx

@@ -0,0 +1,124 @@
+import type { ReactNode } from "react";
+import { t } from "../../i18n";
+import { blendHex } from "../../theme/colors";
+import { useThemeColors } from "../../theme/theme-context";
+import { Box, Text, TextAttributes } from "../../ui";
+import { truncateToDisplayWidth } from "../../utils/format";
+
+export { Prose } from "./prose";
+export type { ProseProps } from "./prose";
+
+export interface SectionHeadingProps {
+  title: string;
+  marginTop?: number;
+  width?: number;
+  wrap?: boolean;
+}
+
+export function SectionHeading({ title, marginTop = 0, width, wrap = false }: SectionHeadingProps) {
+  const colors = useThemeColors();
+  return (
+    <Box height={wrap ? undefined : 1} marginTop={marginTop} width={width} overflow="hidden" data-gloom-ui="section-heading">
+      <Text fg={colors.textDim} attributes={TextAttributes.BOLD} wrapText={wrap}>
+        {wrap || width === undefined ? t(title) : truncateToDisplayWidth(t(title), width)}
+      </Text>
+    </Box>
+  );
+}
+
+export interface SectionProps extends SectionHeadingProps {
+  children: ReactNode;
+}
+
+export function Section({ title, children, width, marginTop = 1, wrap }: SectionProps) {
+  return (
+    <Box flexDirection="column" width={width} marginTop={marginTop} data-gloom-ui="section">
+      <SectionHeading title={title} width={width} wrap={wrap} />
+      {children}
+    </Box>
+  );
+}
+
+export interface KeyValueRowProps {
+  label: string;
+  value: string;
+  detail?: string;
+  color?: string;
+  width?: number;
+  labelWidth?: number;
+  emphasis?: boolean;
+}
+
+/** Aligned labels and values; a bounded row reserves room for an optional detail. */
+export function KeyValueRow({ label, value, detail, color, width, labelWidth, emphasis = true }: KeyValueRowProps) {
+  const colors = useThemeColors();
+  const rowWidth = width === undefined ? undefined : Math.max(0, Math.floor(width));
+  const preferredLabelWidth = Math.max(0, labelWidth ?? (rowWidth === undefined ? 14 : Math.min(12, Math.max(8, Math.floor(rowWidth * 0.32)))));
+  const labelColumns = rowWidth === undefined ? preferredLabelWidth : Math.min(preferredLabelWidth, Math.max(0, rowWidth - 1));
+  const availableWidth = rowWidth === undefined ? undefined : rowWidth - labelColumns;
+  const valueWidth = availableWidth === undefined ? undefined : detail
+    ? Math.min(availableWidth, Math.max(8, Math.floor(rowWidth! * 0.42)))
+    : availableWidth;
+  const detailWidth = availableWidth === undefined ? undefined : availableWidth - valueWidth!;
+  return (
+    <Box height={1} width={rowWidth} flexDirection="row" overflow="hidden" data-gloom-ui="key-value-row">
+      <Box width={labelColumns} flexShrink={0} overflow="hidden">
+        <Text fg={colors.textDim}>{t(label)}</Text>
+      </Box>
+      <Box width={valueWidth} flexShrink={0} overflow="hidden">
+        <Text fg={color ?? colors.text} attributes={emphasis ? TextAttributes.BOLD : undefined}>
+          {valueWidth === undefined ? value : truncateToDisplayWidth(value, valueWidth)}
+        </Text>
+      </Box>
+      {detail && (detailWidth === undefined || detailWidth > 0) && (
+        <Text fg={colors.textDim}>
+          {detailWidth === undefined ? `  ${detail}` : truncateToDisplayWidth(detail, detailWidth)}
+        </Text>
+      )}
+    </Box>
+  );
+}
+
+export interface BadgeProps {
+  label: string;
+  tone?: "neutral" | "accent" | "positive" | "negative" | "warning";
+  /** For a domain scale, such as a sentiment score or chart series. */
+  color?: string;
+  variant?: "subtle" | "solid";
+}
+
+export function Badge({ label, tone = "neutral", color, variant = "subtle" }: BadgeProps) {
+  const colors = useThemeColors();
+  const accent = color ?? (tone === "neutral" ? colors.textDim : tone === "accent" ? colors.borderFocused : colors[tone]);
+  const solid = variant === "solid";
+  const neutral = solid && tone === "neutral" && !color;
+  return (
+    <Box height={1} paddingX={1} backgroundColor={neutral ? colors.selected : solid ? accent : blendHex(colors.bg, accent, 0.28)} data-gloom-ui="badge">
+      <Text fg={neutral ? colors.selectedText : solid ? colors.bg : accent} attributes={TextAttributes.BOLD}>{t(label)}</Text>
+    </Box>
+  );
+}
+
+export interface DividerProps {
+  width?: number | `${number}%`;
+  height?: number | `${number}%`;
+  orientation?: "horizontal" | "vertical";
+}
+
+/** Host borders draw terminal rules and real CSS borders without text glyphs in the DOM. */
+export function Divider({ width, height, orientation = "horizontal" }: DividerProps) {
+  const colors = useThemeColors();
+  const vertical = orientation === "vertical";
+  return (
+    <Box
+      width={width ?? (vertical ? 1 : "100%")}
+      height={height ?? (vertical ? "100%" : 1)}
+      flexShrink={0}
+      border={vertical ? ["left"] : ["top"]}
+      borderColor={colors.border}
+      style={{ border: 0, [vertical ? "borderLeft" : "borderTop"]: `1px solid ${colors.border}` }}
+      role="separator"
+      data-gloom-ui="divider"
+    />
+  );
+}

package/src/components/ui/external-link.test.tsx

@@ -0,0 +1,25 @@
+import { expect, test } from "bun:test";
+import { act } from "react";
+import { createDomTestHarness } from "../../renderers/electrobun/view/test-utils";
+import { ExternalLinkText } from "./external-link";
+
+const { render } = createDomTestHarness();
+
+test("a shared external link opens by keyboard and mouse without activating its parent", async () => {
+  const opened: string[] = [];
+  let parentPresses = 0;
+  const container = await render(
+    <div onMouseDown={() => { parentPresses += 1; }} onKeyDown={() => { parentPresses += 1; }}>
+      <ExternalLinkText url="https://example.com/article" label="Read article" onOpen={(url) => opened.push(url)} />
+    </div>,
+  );
+  const link = container.querySelector<HTMLElement>('[role="link"]')!;
+  link.focus();
+  await act(async () => {
+    link.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true, cancelable: true }));
+    link.dispatchEvent(new MouseEvent("mousedown", { button: 0, bubbles: true }));
+  });
+  expect(opened).toEqual(["https://example.com/article", "https://example.com/article"]);
+  expect(parentPresses).toBe(0);
+  expect(document.activeElement).toBe(link);
+});

package/src/components/ui/external-link.tsx

@@ -1,6 +1,6 @@
 import { Box, Text } from "../../ui";
 import { TextAttributes } from "../../ui";
-import { colors } from "../../theme/colors";
+import { useThemeColors } from "../../theme/theme-context";
 import { safeExternalUrl } from "../../utils/external-url";
 import { linkContextMenuItems, useContextMenu, useRendererHost, useUiCapabilities } from "../../ui";
 
@@ -37,13 +37,14 @@ function handleOpen(
 }
 
 export function ExternalLinkText(
-  { url, label, color = colors.textBright, onOpen = openUrl }: {
+  { url, label, color, onOpen = openUrl }: {
     url: string;
     label?: string;
     color?: string;
     onOpen?: (url: string) => void;
   },
 ) {
+  const colors = useThemeColors();
   const rendererHost = useRendererHost();
   const { showContextMenu } = useContextMenu();
   const { nativeContextMenu } = useUiCapabilities();
@@ -63,8 +64,15 @@ export function ExternalLinkText(
   );
   return (
     <Text
-      fg={color}
+      fg={color ?? colors.textBright}
       attributes={TextAttributes.UNDERLINE}
+      cursor="pointer"
+      role="link"
+      tabIndex={0}
+      wrapText
+      onKeyDown={(event: any) => {
+        if (event.key === "Enter" || event.name === "return") handleOpen(url, resolvedOpen, event);
+      }}
       data-gloom-context-menu-surface="true"
       onMouseDown={(event: any) => {
         if (event.button === 2) {