gloomberb 0.6.0 → 0.7.0

package/src/components/command-bar/confirm-body.tsx

@@ -0,0 +1,51 @@
+import { Box, Text } from "../../ui";
+import { colors } from "../../theme/colors";
+import { Button, Spinner } from "../ui";
+import { truncateText } from "./view-model";
+import type { CommandBarConfirmRoute } from "./workflow-types";
+
+export function CommandBarConfirmBody({
+  route,
+  bodyHeight,
+  contentPadding,
+  paletteText,
+  queryDisplayWidth,
+  onConfirm,
+}: {
+  route: CommandBarConfirmRoute;
+  bodyHeight: number;
+  contentPadding: number;
+  paletteText: string;
+  queryDisplayWidth: number;
+  onConfirm: () => void;
+}) {
+  return (
+    <Box flexDirection="column" height={bodyHeight} paddingX={contentPadding}>
+      {route.body.map((line, index) => (
+        <Box key={`confirm:${index}`} height={1}>
+          <Text fg={paletteText}>{truncateText(line, queryDisplayWidth)}</Text>
+        </Box>
+      ))}
+      <Box height={1} />
+      {route.error && (
+        <Box height={1}>
+          <Text fg={colors.negative}>{truncateText(route.error, queryDisplayWidth)}</Text>
+        </Box>
+      )}
+      {route.pending && (
+        <Box height={1}>
+          <Spinner label="Working…" />
+        </Box>
+      )}
+      <Box flexGrow={1} />
+      <Box flexDirection="row" gap={1}>
+        <Button
+          label={route.confirmLabel}
+          variant={route.tone === "danger" ? "danger" : "primary"}
+          onPress={onConfirm}
+          disabled={route.pending}
+        />
+      </Box>
+    </Box>
+  );
+}

package/src/components/command-bar/list-model.ts

@@ -0,0 +1,77 @@
+import { buildSections } from "./view-model";
+
+export interface ResultItem {
+  id: string;
+  label: string;
+  detail: string;
+  category: string;
+  kind: "command" | "ticker" | "search" | "theme" | "plugin" | "action" | "info";
+  right?: string;
+  searchText?: string;
+  themeId?: string;
+  pluginToggle?: () => void | Promise<void>;
+  secondaryAction?: () => void | Promise<void>;
+  checked?: boolean;
+  current?: boolean;
+  disabled?: boolean;
+  action: () => void | Promise<void>;
+}
+
+type ListScreenKind = "root" | "mode" | "picker" | "pane-settings";
+
+export interface ListScreenState {
+  kind: ListScreenKind;
+  title: string;
+  subtitle?: string;
+  query: string;
+  selectedIdx: number;
+  hoveredIdx: number | null;
+  results: ResultItem[];
+  searching: boolean;
+  emptyLabel: string;
+  emptyDetail: string;
+  footerLeft: string;
+  footerRight: string;
+}
+
+export type CommandBarListRow =
+  | { kind: "spacer"; id: string }
+  | { kind: "heading"; id: string; label: string }
+  | { kind: "item"; item: ResultItem; globalIdx: number }
+  | { kind: "message"; id: string; label: string; dim?: boolean }
+  | { kind: "spinner"; id: string; label: string }
+  | { kind: "filler"; id: string };
+
+export function orderListResults(results: ResultItem[]): ResultItem[] {
+  return buildSections(results).flatMap((section) => section.items);
+}
+
+export function buildListRows(listState: ListScreenState): CommandBarListRow[] {
+  const rows: CommandBarListRow[] = [];
+  const sections = buildSections(listState.results);
+  let globalIdx = 0;
+  sections.forEach((section, sectionIndex) => {
+    if (sectionIndex > 0) {
+      rows.push({ kind: "spacer", id: `spacer:${sectionIndex}:${section.category}` });
+    }
+    rows.push({ kind: "heading", id: `heading:${sectionIndex}:${section.category}`, label: section.category });
+    for (const item of section.items) {
+      rows.push({ kind: "item", item, globalIdx });
+      globalIdx += 1;
+    }
+  });
+  return rows;
+}
+
+export function buildNativeListRows(listState: ListScreenState, rows: CommandBarListRow[]): CommandBarListRow[] {
+  if (listState.searching && rows.length === 0) {
+    return [{ kind: "spinner", id: "searching", label: "Searching…" }];
+  }
+  if (rows.length === 0) {
+    return [{ kind: "message", id: "empty", label: listState.emptyLabel }];
+  }
+  if (listState.searching) {
+    return [...rows, { kind: "spinner", id: "searching", label: "Searching…" }];
+  }
+  return rows;
+}

package/src/components/command-bar/view-model.ts

@@ -10,11 +10,6 @@ export interface CommandBarModeInfo {
   hint: string;
 }
 
-export interface CommandBarFooterHints {
-  left: string;
-  right: string;
-}
-
 export interface CommandBarSection<T> {
   category: string;
   items: T[];
@@ -83,20 +78,6 @@ export function buildSections<T extends { category: string }>(items: T[]): Array
     .map(({ section }) => section);
 }
 
-export function getFooterHints(mode: CommandBarMode, isNarrow: boolean): CommandBarFooterHints {
-  const moveAndSelect = isNarrow ? "up/down move  enter select" : "up/down move  enter select";
-  if (mode === "plugins") {
-    return {
-      left: isNarrow ? "space toggle" : `${moveAndSelect}  space toggle`,
-      right: "esc cancel",
-    };
-  }
-  if (mode === "layout") {
-    return { left: moveAndSelect, right: "esc cancel" };
-  }
-  return { left: moveAndSelect, right: "esc cancel" };
-}
-
 export function getEmptyState(mode: CommandBarMode, query: string, searchQuery?: string): { label: string; detail: string } {
   switch (mode) {
     case "search":

package/src/components/command-bar/workflow-ops.ts

@@ -14,6 +14,7 @@ import { cleanPortfolioPaneSettings, resolvePortfolioPaneCollectionId } from "..
 import {
   buildComparisonChartPaneTitle,
   COMPARISON_CHART_PANE_ID,
+  MIN_COMPARISON_CHART_SYMBOLS,
 } from "../../plugins/builtin/comparison-chart";
 import { getPaneTemplateDisplayLabel } from "./pane-template-display";
 
@@ -415,6 +416,9 @@ export async function applyPaneSettingFieldValue(
       descriptor.context.activeCollectionId,
       deps,
     );
+    if (symbols.length < MIN_COMPARISON_CHART_SYMBOLS) {
+      throw new Error(`Enter at least ${MIN_COMPARISON_CHART_SYMBOLS} tickers.`);
+    }
     const nextLayout = updatePaneInstance(state.config.layout, targetId, (instance) => ({
       ...instance,
       title: buildComparisonChartPaneTitle(symbols),

package/src/components/data-table-stack-view.test.tsx

@@ -160,6 +160,13 @@ async function emitKeypress(event: { name?: string; sequence?: string }) {
   });
 }
 
+async function emitTerminalMouseBack(x: number, y: number) {
+  await act(async () => {
+    await testSetup!.mockMouse.emitMouseEvent("down", x, y, 128 as any);
+    await testSetup!.renderOnce();
+  });
+}
+
 describe("DataTableStackView", () => {
   test("owns table navigation, detail open, and back navigation", async () => {
     testSetup = await testRender(<Harness />, { width: 60, height: 12 });
@@ -179,16 +186,44 @@ describe("DataTableStackView", () => {
 
     await emitKeypress({ name: "escape", sequence: "\u001b" });
     await renderSettled();
-    expect(testSetup.captureCharFrame()).toContain("Second detail");
-
-    await emitKeypress({ name: "backspace", sequence: "\u007f" });
-    await renderSettled();
 
     const rootFrame = testSetup.captureCharFrame();
     expect(rootFrame).toContain("Second row");
     expect(rootFrame).not.toContain("Second detail");
   });
 
+  test("closes detail from backspace", async () => {
+    testSetup = await testRender(<Harness />, { width: 60, height: 12 });
+
+    await renderSettled();
+    await emitKeypress({ name: "enter", sequence: "\r" });
+    await renderSettled();
+    expect(testSetup.captureCharFrame()).toContain("First detail");
+
+    await emitKeypress({ name: "backspace", sequence: "\u007f" });
+    await renderSettled();
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("First row");
+    expect(frame).not.toContain("First detail");
+  });
+
+  test("closes detail from the terminal mouse back button", async () => {
+    testSetup = await testRender(<Harness />, { width: 60, height: 12 });
+
+    await renderSettled();
+    await emitKeypress({ name: "enter", sequence: "\r" });
+    await renderSettled();
+    expect(testSetup.captureCharFrame()).toContain("First detail");
+
+    await emitTerminalMouseBack(30, 4);
+    await renderSettled();
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("First row");
+    expect(frame).not.toContain("First detail");
+  });
+
   test("skips section rows while navigating through the stack view", async () => {
     testSetup = await testRender(<GroupedHarness />, { width: 60, height: 12 });
 

package/src/components/data-table-stack-view.tsx

@@ -1,50 +1,23 @@
 import { useShortcut } from "../react/input";
-import { type ScrollBoxRenderable } from "../ui";
-import { type ReactNode, type RefObject } from "react";
-import { DataTableView } from "./data-table-view";
-import { PageStackView, type DataTableColumn, type DataTableProps } from "./ui";
-
-interface KeyboardEventLike {
-  name?: string;
-  preventDefault?: () => void;
-  stopPropagation?: () => void;
-}
+import { type ReactNode } from "react";
+import {
+  DataTableView,
+  type DataTableKeyEvent,
+  type DataTableViewProps,
+} from "./data-table-view";
+import { PageStackView, type DataTableColumn } from "./ui";
 
 export interface DataTableStackViewProps<
   T,
   C extends DataTableColumn = DataTableColumn,
-> extends Omit<
-    DataTableProps<T, C>,
-    | "headerScrollRef"
-    | "scrollRef"
-    | "syncHeaderScroll"
-    | "onBodyScrollActivity"
-    | "hoveredIdx"
-    | "setHoveredIdx"
-  > {
+> extends Omit<DataTableViewProps<T, C>, "focused" | "selectedIndex"> {
   focused: boolean;
   detailOpen: boolean;
   onBack: () => void;
   detailContent: ReactNode;
   detailTitle?: string;
   selectedIndex: number;
-  onSelectIndex?: (index: number, item: T) => void;
-  onActivateIndex?: (index: number, item: T) => void;
-  isNavigable?: (item: T, index: number) => boolean;
-  rootBefore?: ReactNode;
-  rootAfter?: ReactNode;
-  rootWidth?: number;
-  rootHeight?: number;
-  rootBackgroundColor?: string;
-  headerScrollRef?: RefObject<ScrollBoxRenderable | null>;
-  scrollRef?: RefObject<ScrollBoxRenderable | null>;
-  syncHeaderScroll?: () => void;
-  onBodyScrollActivity?: () => void;
-  hoveredIdx?: number | null;
-  setHoveredIdx?: (index: number | null) => void;
-  keyboardNavigation?: boolean;
-  onRootKeyDown?: (event: KeyboardEventLike) => boolean | void;
-  onDetailKeyDown?: (event: KeyboardEventLike) => boolean | void;
+  onDetailKeyDown?: (event: DataTableKeyEvent) => boolean | void;
 }
 
 export function DataTableStackView<
@@ -56,42 +29,9 @@ export function DataTableStackView<
   onBack,
   detailContent,
   detailTitle,
-  selectedIndex,
-  onSelectIndex,
-  onActivateIndex,
-  isNavigable,
-  rootBefore,
-  rootAfter,
-  rootWidth,
-  rootHeight,
-  rootBackgroundColor,
-  headerScrollRef,
-  scrollRef,
-  syncHeaderScroll,
-  onBodyScrollActivity,
-  hoveredIdx,
-  setHoveredIdx,
   keyboardNavigation = true,
-  onRootKeyDown,
   onDetailKeyDown,
-  columns,
-  items,
-  sortColumnId,
-  sortDirection,
-  onHeaderClick,
-  getItemKey,
-  isSelected,
-  onSelect,
-  onActivate,
-  renderCell,
-  renderSectionHeader,
-  getRowBackgroundColor,
-  emptyContent,
-  emptyStateTitle,
-  emptyStateHint,
-  virtualize = true,
-  overscan,
-  showHorizontalScrollbar,
+  ...tableProps
 }: DataTableStackViewProps<T, C>) {
   useShortcut((event) => {
     if (!focused || !detailOpen || !keyboardNavigation) return;
@@ -100,42 +40,9 @@ export function DataTableStackView<
 
   const rootContent = (
     <DataTableView<T, C>
+      {...tableProps}
       focused={focused && !detailOpen}
-      selectedIndex={selectedIndex}
-      onSelectIndex={onSelectIndex}
-      onActivateIndex={onActivateIndex}
-      isNavigable={isNavigable}
-      rootBefore={rootBefore}
-      rootAfter={rootAfter}
-      rootWidth={rootWidth}
-      rootHeight={rootHeight}
-      rootBackgroundColor={rootBackgroundColor}
-      headerScrollRef={headerScrollRef}
-      scrollRef={scrollRef}
-      syncHeaderScroll={syncHeaderScroll}
-      onBodyScrollActivity={onBodyScrollActivity}
-      hoveredIdx={hoveredIdx}
-      setHoveredIdx={setHoveredIdx}
       keyboardNavigation={keyboardNavigation}
-      onRootKeyDown={onRootKeyDown}
-      columns={columns}
-      items={items}
-      sortColumnId={sortColumnId}
-      sortDirection={sortDirection}
-      onHeaderClick={onHeaderClick}
-      getItemKey={getItemKey}
-      isSelected={isSelected}
-      onSelect={onSelect}
-      onActivate={onActivate}
-      renderCell={renderCell}
-      renderSectionHeader={renderSectionHeader}
-      getRowBackgroundColor={getRowBackgroundColor}
-      emptyContent={emptyContent}
-      emptyStateTitle={emptyStateTitle}
-      emptyStateHint={emptyStateHint}
-      virtualize={virtualize}
-      overscan={overscan}
-      showHorizontalScrollbar={showHorizontalScrollbar}
     />
   );
 

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

@@ -2,24 +2,26 @@ import {
   useCallback,
   useEffect,
   useMemo,
-  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 { DataTable, type DataTableColumn, type DataTableProps } from "./ui";
-
-export interface DataTableKeyEvent {
-  name?: string;
-  ctrl?: boolean;
-  meta?: boolean;
-  option?: boolean;
-  shift?: boolean;
-  preventDefault?: () => void;
-  stopPropagation?: () => void;
-}
+import {
+  isNextTableRowKey,
+  isPreviousTableRowKey,
+  isTableActivationKey,
+  stopTableKey,
+  TableViewFrame,
+  type TableViewKeyEvent,
+  useResetTableScroll,
+  useTableBodyScrollActivity,
+  useTableViewState,
+} from "./table-view-shared";
+
+export type DataTableKeyEvent = TableViewKeyEvent;
 
 export interface DataTableViewProps<
   T,
@@ -54,23 +56,6 @@ export interface DataTableViewProps<
   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 DataTableView<
   T,
   C extends DataTableColumn = DataTableColumn,
@@ -97,17 +82,19 @@ export function DataTableView<
   scrollToIndex,
   ...tableProps
 }: DataTableViewProps<T, C>) {
-  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 [fallbackSelectedIndex, setFallbackSelectedIndex] = useState<
     number | null
   >(null);
@@ -148,36 +135,16 @@ export function DataTableView<
     setFallbackSelectedIndex(nextIndex);
   }, [fallbackSelectedIndex, navigableIndices, usesFallbackSelection]);
 
-  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();
-      return;
-    }
-    queueMicrotask(effectiveSyncHeaderScroll);
-  }, [effectiveSyncHeaderScroll, onBodyScrollActivity]);
+  const handleBodyScrollActivity = useTableBodyScrollActivity({
+    onBodyScrollActivity,
+    syncHeaderScroll: effectiveSyncHeaderScroll,
+  });
 
-  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;
-    }
-  }, [effectiveHeaderScrollRef, effectiveScrollRef, resetScrollKey]);
+  useResetTableScroll({
+    headerScrollRef: effectiveHeaderScrollRef,
+    scrollRef: effectiveScrollRef,
+    resetScrollKey,
+  });
 
   const selectIndex = useCallback((index: number) => {
     if (index < 0 || index >= tableProps.items.length) return;
@@ -226,34 +193,32 @@ export function DataTableView<
     if (onRootKeyDown?.(event)) return;
     if (tableProps.items.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();
     }
   });
 
   return (
-    <Box
-      flexDirection="column"
-      flexGrow={1}
+    <TableViewFrame
       width={rootWidth}
       height={rootHeight}
       backgroundColor={rootBackgroundColor}
-      overflow="hidden"
+      before={rootBefore}
+      after={rootAfter}
     >
-      {rootBefore}
       <DataTable<T, C>
         {...tableProps}
         headerScrollRef={effectiveHeaderScrollRef}
@@ -273,7 +238,6 @@ export function DataTableView<
           )
         )}
       />
-      {rootAfter}
-    </Box>
+    </TableViewFrame>
   );
 }

package/src/components/feed-data-table-stack-view.tsx

@@ -5,6 +5,12 @@ import { colors } from "../theme/colors";
 import { formatTimeAgo } from "../utils/format";
 import { toTimestampMillis } from "../utils/timestamp";
 import { DataTableStackView } from "./data-table-stack-view";
+import {
+  activeStackIndex,
+  sortIndexedStackRows,
+  type IndexedStackRow,
+  type StackSortPreference,
+} from "./feed-stack-controller";
 import { ExternalLink, type DataTableCell, type DataTableColumn } from "./ui";
 import { wrapTextLines } from "../utils/text-wrap";
 
@@ -23,15 +29,9 @@ export interface FeedDataTableItem {
 type DetailColumnId = "time" | "source" | "title";
 type DetailColumn = DataTableColumn & { id: DetailColumnId };
 
-interface DetailRow {
-  item: FeedDataTableItem;
-  itemIndex: number;
-}
+type DetailRow = IndexedStackRow<FeedDataTableItem>;
 
-interface SortPreference {
-  columnId: DetailColumnId;
-  direction: "asc" | "desc";
-}
+type SortPreference = StackSortPreference<DetailColumnId>;
 
 interface FeedDataTableStackViewProps {
   width: number;
@@ -151,19 +151,12 @@ export function FeedDataTableStackView({
     [items, sourceLabel, titleLabel, width],
   );
   const sortedRows = useMemo(() => {
-    const direction = sortPreference.direction === "asc" ? 1 : -1;
-    return items
-      .map((item, itemIndex) => ({ item, itemIndex }))
-      .sort((a, b) => {
-        const primary = compareRows(a, b, sortPreference.columnId) * direction;
-        return primary !== 0 ? primary : a.itemIndex - b.itemIndex;
-      });
+    return sortIndexedStackRows(items, sortPreference, compareRows);
   }, [items, sortPreference]);
   const selectedRowIndex = sortedRows.findIndex(
     (row) => row.itemIndex === selectedIdx,
   );
-  const activeRowIndex =
-    selectedRowIndex >= 0 ? selectedRowIndex : sortedRows.length > 0 ? 0 : -1;
+  const activeRowIndex = activeStackIndex(sortedRows.length, selectedRowIndex);
   const openItem = useMemo(
     () =>
       openItemId

package/src/components/feed-stack-controller.ts

@@ -0,0 +1,39 @@
+export interface StackSortPreference<C extends string> {
+  columnId: C;
+  direction: "asc" | "desc";
+}
+
+export interface IndexedStackRow<T> {
+  item: T;
+  itemIndex: number;
+}
+
+export function sortStackItems<T, C extends string>(
+  items: T[],
+  preference: StackSortPreference<C>,
+  compare: (a: T, b: T, columnId: C) => number,
+  tieBreak: (a: T, b: T) => number = () => 0,
+): T[] {
+  const direction = preference.direction === "asc" ? 1 : -1;
+  return [...items].sort((a, b) => {
+    const primary = compare(a, b, preference.columnId) * direction;
+    return primary !== 0 ? primary : tieBreak(a, b);
+  });
+}
+
+export function sortIndexedStackRows<T, C extends string>(
+  items: T[],
+  preference: StackSortPreference<C>,
+  compare: (a: IndexedStackRow<T>, b: IndexedStackRow<T>, columnId: C) => number,
+): Array<IndexedStackRow<T>> {
+  return sortStackItems(
+    items.map((item, itemIndex) => ({ item, itemIndex })),
+    preference,
+    compare,
+    (a, b) => a.itemIndex - b.itemIndex,
+  );
+}
+
+export function activeStackIndex(length: number, selectedIndex: number): number {
+  return selectedIndex >= 0 ? selectedIndex : length > 0 ? 0 : -1;
+}