gloomberb 0.9.3 → 0.9.5

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

@@ -29,6 +29,10 @@ export interface DataTableSectionHeader {
 
 export type DataTableScrollAlign = "nearest" | "center";
 
+export interface DataTableRowState {
+  selected: boolean;
+}
+
 export interface DataTableProps<
   T,
   C extends DataTableColumn = DataTableColumn,
@@ -42,14 +46,13 @@ export interface DataTableProps<
   scrollRef: RefObject<ScrollBoxRenderable | null>;
   syncHeaderScroll: () => void;
   onBodyScrollActivity: () => void;
-  hoveredIdx: number | null;
-  setHoveredIdx: (index: number | null) => void;
   headerScrollId?: string;
   bodyScrollId?: string;
   getItemKey: (item: T, index: number) => string;
   isSelected: (item: T, index: number) => boolean;
   onSelect: (item: T, index: number) => void;
   onActivate?: (item: T, index: number) => void;
+  onTableMouseDown?: (event: any) => void;
   onRowMouseDown?: (item: T, index: number, event: any) => boolean | void;
   onRowContextMenu?: (item: T, index: number, event: any) => void;
   rowContextMenuSurface?: boolean;
@@ -57,7 +60,7 @@ export interface DataTableProps<
     item: T,
     column: C,
     index: number,
-    rowState: { selected: boolean; hovered: boolean },
+    rowState: DataTableRowState,
   ) => DataTableCell;
   renderSectionHeader?: (
     item: T,
@@ -66,7 +69,7 @@ export interface DataTableProps<
   getRowBackgroundColor?: (
     item: T,
     index: number,
-    rowState: { selected: boolean; hovered: boolean },
+    rowState: DataTableRowState,
   ) => string | undefined;
   emptyContent?: ReactNode;
   bodyAfter?: ReactNode;
@@ -74,6 +77,9 @@ export interface DataTableProps<
   emptyStateHint?: string;
   virtualize?: boolean;
   overscan?: number;
+  columnGap?: number;
+  horizontalPadding?: number;
+  fillAvailableWidth?: boolean;
   showHorizontalScrollbar?: boolean;
   scrollToIndex?: number | null;
   scrollToIndexAlign?: DataTableScrollAlign;

package/src/components/ui/fields.tsx

@@ -12,6 +12,7 @@ export interface TextFieldProps {
   inputRef?: RefObject<InputRenderable | null>;
   onChange?: (value: string) => void;
   onSubmit?: (value: string) => void;
+  onBlur?: (value: string) => void;
   hint?: string;
   type?: "text" | "password";
   variant?: "default" | "plain";
@@ -36,6 +37,7 @@ export function TextField({
   inputRef,
   onChange,
   onSubmit,
+  onBlur,
   hint,
   type = "text",
   variant = "default",
@@ -56,6 +58,7 @@ export function TextField({
         inputRef={inputRef}
         onChange={onChange}
         onSubmit={onSubmit}
+        onBlur={onBlur}
         hint={hint}
         type={type}
         variant={variant}
@@ -118,17 +121,18 @@ export function TextField({
           selectionFg={isPassword ? backgroundColor : undefined}
           showCursor={!isPassword}
           onCursorChange={() => syncCursorOffset()}
-          onInput={(nextValue) => {
+          onInput={(nextValue: string) => {
             currentValueRef.current = nextValue;
             syncCursorOffset(nextValue);
             onChange?.(nextValue);
           }}
-          onChange={(nextValue) => {
+          onChange={(nextValue: string) => {
             currentValueRef.current = nextValue;
             syncCursorOffset(nextValue);
             onChange?.(nextValue);
           }}
           onSubmit={() => onSubmit?.(currentValueRef.current)}
+          onBlur={() => onBlur?.(currentValueRef.current)}
         />
         {isPassword && (
           <Box
@@ -178,11 +182,12 @@ function sanitizeNumberInput(value: string, allowDecimal: boolean, allowNegative
   return next;
 }
 
-export interface NumberFieldProps extends Omit<TextFieldProps, "onChange" | "onSubmit"> {
+export interface NumberFieldProps extends Omit<TextFieldProps, "onChange" | "onSubmit" | "onBlur"> {
   allowDecimal?: boolean;
   allowNegative?: boolean;
   onChange?: (value: string) => void;
   onSubmit?: (value: string) => void;
+  onBlur?: (value: string) => void;
 }
 
 export function NumberField({
@@ -190,6 +195,7 @@ export function NumberField({
   allowNegative = false,
   onChange,
   onSubmit,
+  onBlur,
   ...props
 }: NumberFieldProps) {
   return (
@@ -197,6 +203,7 @@ export function NumberField({
       {...props}
       onChange={(nextValue) => onChange?.(sanitizeNumberInput(nextValue, allowDecimal, allowNegative))}
       onSubmit={(nextValue) => onSubmit?.(sanitizeNumberInput(nextValue, allowDecimal, allowNegative))}
+      onBlur={(nextValue) => onBlur?.(sanitizeNumberInput(nextValue, allowDecimal, allowNegative))}
     />
   );
 }

package/src/components/ui/list-view.tsx

@@ -166,7 +166,7 @@ export function ListView({
         key={item.id}
         height={1}
         backgroundColor={rowBg}
-        onMouseMove={() => {
+        onMouseOver={() => {
           if (!disabled) {
             setHoveredIndex((current) => (current === index ? current : index));
             if (selectOnHover) onSelect?.(index);

package/src/components/ui/page-stack-view.tsx

@@ -69,7 +69,7 @@ export function PageStackView({
 
   if (!detailOpen) {
     return (
-      <Box flexDirection="column" flexGrow={1} overflow="hidden">
+      <Box flexDirection="column" flexGrow={1} flexShrink={1} flexBasis={0} minWidth={0} minHeight={0} overflow="hidden">
         {rootContent}
       </Box>
     );
@@ -79,6 +79,10 @@ export function PageStackView({
     <Box
       flexDirection="column"
       flexGrow={1}
+      flexShrink={1}
+      flexBasis={0}
+      minWidth={0}
+      minHeight={0}
       overflow="hidden"
       onMouseDown={handleMouseDown}
     >
@@ -111,7 +115,7 @@ export function PageStackView({
         )}
         {backHint ? <Text fg={colors.textMuted}>{backHint}</Text> : null}
       </Box>
-      <Box flexDirection="column" flexGrow={1} overflow="hidden">
+      <Box flexDirection="column" flexGrow={1} flexShrink={1} flexBasis={0} minWidth={0} minHeight={0} overflow="hidden">
         {detailContent}
       </Box>
     </Box>

package/src/components/ui/table-layout.test.ts

@@ -18,6 +18,22 @@ describe("table layout", () => {
     expect(hasMeaningfulTableHorizontalOverflow(tableWidth, tableWidth - 2)).toBe(true);
   });
 
+  test("supports tables without inter-column gaps", () => {
+    const tableWidth = getTableWidth([
+      { width: 12 },
+      { width: 8 },
+    ], 0);
+    const noPaddingWidth = getTableWidth([
+      { width: 12 },
+      { width: 8 },
+    ], 0, 0);
+
+    expect(tableWidth).toBe(22);
+    expect(noPaddingWidth).toBe(20);
+    expect(hasMeaningfulTableHorizontalOverflow(tableWidth, tableWidth, 0)).toBe(false);
+    expect(hasMeaningfulTableHorizontalOverflow(tableWidth, tableWidth - 1, 0)).toBe(true);
+  });
+
   test("keeps non-flex web table columns fixed", () => {
     const template = buildTableGridTemplateColumns([
       { width: 4, align: "right" },
@@ -39,4 +55,13 @@ describe("table layout", () => {
 
     expect(template).toBe("minmax(calc(8 * var(--cell-w)), 12fr) minmax(calc(8 * var(--cell-w)), 8fr)");
   });
+
+  test("keeps fixed web table columns when fill width is disabled", () => {
+    const template = buildTableGridTemplateColumns([
+      { width: 12 },
+      { width: 8, align: "right" },
+    ], false);
+
+    expect(template).toBe("minmax(calc(8 * var(--cell-w)), calc(12 * var(--cell-w))) minmax(calc(8 * var(--cell-w)), calc(8 * var(--cell-w)))");
+  });
 });

package/src/components/ui/table-layout.ts

@@ -10,19 +10,29 @@ export interface TableWidthColumn {
 const TRAILING_COLUMN_GUTTER_WIDTH = 1;
 const WEB_CELL_UNIT = "var(--cell-w)";
 
-export function getTableWidth(columns: readonly TableWidthColumn[]): number {
-  return columns.reduce((sum, column) => sum + column.width + 1, 2);
+export function getTableWidth(
+  columns: readonly TableWidthColumn[],
+  columnGap = 1,
+  horizontalPadding = 1,
+): number {
+  return columns.reduce((sum, column) => sum + column.width + columnGap, horizontalPadding * 2);
 }
 
-export function hasMeaningfulTableHorizontalOverflow(tableWidth: number, viewportWidth: number): boolean {
-  return viewportWidth > 0 && tableWidth - viewportWidth > TRAILING_COLUMN_GUTTER_WIDTH;
+export function hasMeaningfulTableHorizontalOverflow(
+  tableWidth: number,
+  viewportWidth: number,
+  columnGap = TRAILING_COLUMN_GUTTER_WIDTH,
+): boolean {
+  return viewportWidth > 0 && tableWidth - viewportWidth > columnGap;
 }
 
 export function expandTableColumns<C extends TableWidthColumn>(
   columns: readonly C[],
   targetWidth: number,
+  columnGap = 1,
+  horizontalPadding = 1,
 ): C[] {
-  const currentWidth = getTableWidth(columns);
+  const currentWidth = getTableWidth(columns, columnGap, horizontalPadding);
   const extraWidth = Math.floor(targetWidth) - currentWidth;
   if (extraWidth <= 0) return [...columns];
 
@@ -62,12 +72,18 @@ function cellWidthCss(width: number): string {
   return `calc(${width} * ${WEB_CELL_UNIT})`;
 }
 
-export function buildTableGridTemplateColumns(columns: readonly TableWidthColumn[]): string {
+export function buildTableGridTemplateColumns(
+  columns: readonly TableWidthColumn[],
+  fillAvailableWidth = true,
+): string {
   const hasFlexColumn = columns.some((column) => (column.flexGrow ?? 0) > 0);
   return columns
     .map((column) => {
       const width = normalizedColumnWidth(column);
       const minWidth = cellWidthCss(columnMinCh(column));
+      if (!fillAvailableWidth) {
+        return `minmax(${minWidth}, ${cellWidthCss(width)})`;
+      }
       if (!hasFlexColumn || (column.flexGrow ?? 0) > 0) {
         return `minmax(${minWidth}, ${columnFlexWeight(column)}fr)`;
       }

package/src/components/ui/tabs.tsx

@@ -31,6 +31,7 @@ export interface TabsProps {
   focused?: boolean;
   keyboardNavigation?: boolean;
   scrollable?: boolean;
+  scrollId?: string;
 }
 
 const WHEEL_DELTA_PER_CELL = 8;
@@ -47,6 +48,7 @@ export function Tabs({
   focused = false,
   keyboardNavigation = true,
   scrollable = true,
+  scrollId,
 }: TabsProps) {
   const ui = useUiHost();
   const NativeTabs = ui.Tabs;
@@ -57,11 +59,11 @@ export function Tabs({
     navigationValueRef.current = activeValue;
   }
   const palette = {
-    activeFg: variant === "bare" ? colors.textBright : colors.text,
+    activeFg: focused || variant === "bare" ? colors.textBright : colors.text,
     inactiveFg: colors.textDim,
     disabledFg: colors.textMuted,
     hoverFg: colors.text,
-    activeUnderline: colors.borderFocused,
+    activeUnderline: focused ? colors.textBright : colors.borderFocused,
     inactiveUnderline: colors.bg,
     hoverUnderline: colors.border,
     hoverBg: hoverBg(),
@@ -118,6 +120,7 @@ export function Tabs({
         closeMode={closeMode}
         addLabel={addLabel}
         onAdd={onAdd}
+        focused={focused}
         palette={palette}
       />
     );
@@ -133,7 +136,9 @@ export function Tabs({
       closeMode={closeMode}
       addLabel={addLabel}
       onAdd={onAdd}
+      focused={focused}
       scrollable={scrollable}
+      scrollId={scrollId}
       palette={palette}
     />
   );
@@ -157,7 +162,9 @@ function OpenTuiTabs({
   closeMode = "always",
   addLabel = "+",
   onAdd,
+  focused = false,
   scrollable = true,
+  scrollId,
   palette,
 }: TabsProps & {
   palette: {
@@ -187,7 +194,7 @@ function OpenTuiTabs({
   useEffect(() => {
     const scrollBox = scrollRef.current;
     const activeIndex = tabs.findIndex((tab) => tab.value === activeValue);
-    const viewportWidth = scrollBox?.viewport?.width ?? 0;
+    const viewportWidth = scrollBox?.viewport?.width || scrollBox?.width || 0;
     if (!scrollBox || activeIndex < 0 || viewportWidth <= 0) return;
 
     const activeLeft = tabWidths.slice(0, activeIndex).reduce((sum, width) => sum + width, 0);
@@ -195,14 +202,15 @@ function OpenTuiTabs({
     const currentLeft = scrollBox.scrollLeft ?? 0;
     const currentRight = currentLeft + viewportWidth;
     const maxScrollLeft = Math.max(0, totalWidth - viewportWidth);
+    const scrollToLeft = (left: number) => {
+      scrollBox.scrollLeft = left;
+      scrollBox.scrollTo({ x: left, y: scrollBox.scrollTop });
+    };
 
     if (activeLeft < currentLeft) {
-      scrollBox.scrollTo({ x: activeLeft, y: scrollBox.scrollTop });
+      scrollToLeft(activeLeft);
     } else if (activeRight > currentRight) {
-      scrollBox.scrollTo({
-        x: Math.min(activeRight - viewportWidth, maxScrollLeft),
-        y: scrollBox.scrollTop,
-      });
+      scrollToLeft(Math.min(activeRight - viewportWidth, maxScrollLeft));
     }
   }, [activeValue, tabWidths, tabs, totalWidth]);
 
@@ -214,7 +222,7 @@ function OpenTuiTabs({
     const direction = event?.scroll?.direction;
     if (!direction) return;
     const scrollBox = scrollRef.current;
-    const viewportWidth = scrollBox?.viewport?.width ?? 0;
+    const viewportWidth = scrollBox?.viewport?.width || scrollBox?.width || 0;
     if (!scrollBox || viewportWidth <= 0 || totalWidth <= viewportWidth) return;
 
     event.preventDefault?.();
@@ -228,6 +236,7 @@ function OpenTuiTabs({
       0,
       Math.min(maxScrollLeft, (scrollBox.scrollLeft ?? 0) + directionSign * deltaCells),
     );
+    scrollBox.scrollLeft = nextLeft;
     scrollBox.scrollTo({ x: nextLeft, y: scrollBox.scrollTop });
   };
 
@@ -236,10 +245,16 @@ function OpenTuiTabs({
       {tabs.map((tab, index) => {
         const active = tab.value === activeValue;
         const hovered = hoveredValue === tab.value && !tab.disabled;
+        const focusedActive = focused && active;
         const tabWidth = tabWidths[index] ?? tab.label.length + 2;
         const showClose = !!tab.onClose && (closeMode === "always" || active);
         const attributes = (active ? TextAttributes.BOLD : 0)
-          | (variant === "underline" && !compact && (active || hovered) ? TextAttributes.UNDERLINE : 0);
+          | (
+            (variant === "underline" && !compact && (active || hovered))
+              || (variant === "bare" && focusedActive)
+              ? TextAttributes.UNDERLINE
+              : 0
+          );
         const startHover = tab.disabled
           ? undefined
           : () => {
@@ -272,7 +287,6 @@ function OpenTuiTabs({
             flexDirection="row"
             backgroundColor={active && variant === "pill" ? palette.activeBg : hovered ? palette.hoverBg : undefined}
             onMouseOver={startHover}
-            onMouseMove={startHover}
             onMouseOut={endHover}
             onMouseDown={selectTab}
             onDoubleClick={tab.disabled || !tab.onDoubleClick ? undefined : () => tab.onDoubleClick?.(tab.value)}
@@ -304,7 +318,7 @@ function OpenTuiTabs({
           width={addWidth}
           height={1}
           backgroundColor={hoveredValue === "__add__" ? palette.hoverBg : undefined}
-          onMouseMove={() => setHoveredValue((current) => (current === "__add__" ? current : "__add__"))}
+          onMouseOver={() => setHoveredValue((current) => (current === "__add__" ? current : "__add__"))}
           onMouseOut={() => setHoveredValue((current) => (current === "__add__" ? null : current))}
           onMouseDown={(event: TabPointerEvent) => {
             event.preventDefault();
@@ -323,6 +337,7 @@ function OpenTuiTabs({
 
   return (
     <ScrollBox
+      id={scrollId}
       ref={scrollRef}
       width="100%"
       height={1}

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

@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, test } from "bun:test";
 import { act, useEffect, useRef, useState } from "react";
 import { TestDialogProvider, testRender } from "../../renderers/opentui/test-utils";
+import { TextAttributes } from "../../ui";
 import type { BoxRenderable, ScrollBoxRenderable } from "@opentui/core";
 import { ChoiceDialog } from "./choice-dialog";
 import { DataTable, type DataTableColumn } from "./data-table";
@@ -50,7 +51,6 @@ function DataTableActivationHarness() {
   const headerScrollRef = useRef<ScrollBoxRenderable>(null);
   const scrollRef = useRef<ScrollBoxRenderable>(null);
   const [selectedId, setSelectedId] = useState<string | null>(null);
-  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null);
 
   return (
     <DataTable
@@ -63,8 +63,6 @@ function DataTableActivationHarness() {
       scrollRef={scrollRef}
       syncHeaderScroll={() => {}}
       onBodyScrollActivity={() => {}}
-      hoveredIdx={hoveredIdx}
-      setHoveredIdx={setHoveredIdx}
       getItemKey={(row) => row.id}
       isSelected={(row) => selectedId === row.id}
       onSelect={(row) => {
@@ -88,7 +86,6 @@ function DataTableSectionHarness() {
   const headerScrollRef = useRef<ScrollBoxRenderable>(null);
   const scrollRef = useRef<ScrollBoxRenderable>(null);
   const [selectedId, setSelectedId] = useState<string | null>(null);
-  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null);
   const rows: SectionTableRow[] = [
     { kind: "header", id: "macro", label: "Macro Releases" },
     { kind: "row", id: "cpi", name: "CPI" },
@@ -105,8 +102,6 @@ function DataTableSectionHarness() {
       scrollRef={scrollRef}
       syncHeaderScroll={() => {}}
       onBodyScrollActivity={() => {}}
-      hoveredIdx={hoveredIdx}
-      setHoveredIdx={setHoveredIdx}
       getItemKey={(row) => row.id}
       isSelected={(row) => row.kind === "row" && row.id === selectedId}
       onSelect={(row) => {
@@ -128,12 +123,18 @@ function DataTableHorizontalScrollHarness({
   containerWidth = 32,
   containerHeight = 5,
   rowCount = 1,
+  columnGap,
+  horizontalPadding,
+  fillAvailableWidth,
   showHorizontalScrollbar,
 }: {
   columns?: DataTableColumn[];
   containerWidth?: number;
   containerHeight?: number;
   rowCount?: number;
+  columnGap?: number;
+  horizontalPadding?: number;
+  fillAvailableWidth?: boolean;
   showHorizontalScrollbar?: boolean;
 }) {
   const headerScrollRef = useRef<ScrollBoxRenderable>(null);
@@ -162,15 +163,48 @@ function DataTableHorizontalScrollHarness({
       getItemKey={(row) => row.id}
       renderCell={(row) => ({ text: row.name })}
       emptyStateTitle="No rows."
+      columnGap={columnGap}
+      horizontalPadding={horizontalPadding}
+      fillAvailableWidth={fillAvailableWidth}
       showHorizontalScrollbar={showHorizontalScrollbar}
     />
   );
 }
 
+function DataTableColumnGapHarness() {
+  const headerScrollRef = useRef<ScrollBoxRenderable>(null);
+  const scrollRef = useRef<ScrollBoxRenderable>(null);
+  const items = [{ id: "row-0", left: "AA", right: "BB" }];
+
+  return (
+    <DataTableView
+      rootWidth={8}
+      rootHeight={4}
+      selection={{ kind: "none" }}
+      columns={[
+        { id: "left", label: "L", width: 2, align: "left" },
+        { id: "right", label: "R", width: 2, align: "left" },
+      ]}
+      items={items}
+      sortColumnId={null}
+      sortDirection="asc"
+      onHeaderClick={() => {}}
+      headerScrollRef={headerScrollRef}
+      scrollRef={scrollRef}
+      getItemKey={(row) => row.id}
+      renderCell={(row, column) => ({ text: column.id === "left" ? row.left : row.right })}
+      emptyStateTitle="No rows."
+      columnGap={0}
+      horizontalPadding={0}
+      fillAvailableWidth={false}
+      showHorizontalScrollbar={false}
+    />
+  );
+}
+
 function DataTableVirtualizationHarness() {
   const headerScrollRef = useRef<ScrollBoxRenderable>(null);
   const scrollRef = useRef<ScrollBoxRenderable>(null);
-  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null);
   const rows = Array.from({ length: 100 }, (_, index) => ({
     id: `row-${index}`,
     name: `Row ${index}`,
@@ -196,8 +230,6 @@ function DataTableVirtualizationHarness() {
       scrollRef={scrollRef}
       syncHeaderScroll={() => {}}
       onBodyScrollActivity={() => {}}
-      hoveredIdx={hoveredIdx}
-      setHoveredIdx={setHoveredIdx}
       getItemKey={(row) => row.id}
       isSelected={() => false}
       onSelect={() => {}}
@@ -360,6 +392,31 @@ describe("shared UI kit", () => {
     expect(lastSelected).toBe("chart");
   });
 
+  test("marks the active bare tab when it has keyboard focus", async () => {
+    testSetup = await testRender(
+      <Tabs
+        tabs={[
+          { label: "One", value: "one" },
+          { label: "Two", value: "two" },
+        ]}
+        activeValue="one"
+        onSelect={() => {}}
+        variant="bare"
+        compact
+        focused
+      />,
+      { width: 24, height: 2 },
+    );
+
+    await act(async () => {
+      await testSetup!.renderOnce();
+    });
+
+    const activeSpan = testSetup.captureSpans().lines[0]?.spans.find((span) => span.text.includes("One"));
+    expect(activeSpan).toBeDefined();
+    expect((activeSpan!.attributes & TextAttributes.UNDERLINE)).toBe(TextAttributes.UNDERLINE);
+  });
+
   test("selects tabs by clicking their text labels", async () => {
     let lastSelected = "overview";
     const selectedValues: string[] = [];
@@ -737,6 +794,27 @@ describe("shared UI kit", () => {
     expect(tableScrollBoxForTest?.horizontalScrollBar.visible).toBe(false);
   });
 
+  test("renders data table columns without spacer cells when column gap is zero", async () => {
+    const state = createInitialState(createDefaultConfig("/tmp/gloomberb-test"));
+    testSetup = await testRender(
+      <AppContext value={{ state, dispatch: () => {} }}>
+        <PaneInstanceProvider paneId="portfolio-list:main">
+          <DataTableColumnGapHarness />
+        </PaneInstanceProvider>
+      </AppContext>,
+      { width: 8, height: 4 },
+    );
+
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("AABB");
+    expect(frame).not.toContain("AA BB");
+  });
+
   test("hides data table horizontal scrolling when content fits", async () => {
     const state = createInitialState(createDefaultConfig("/tmp/gloomberb-test"));
     tableScrollBoxForTest = null;

package/src/core/state/app/layout-reducer.ts

@@ -1,4 +1,4 @@
-import { cloneLayout, DEFAULT_LAYOUT, type SavedLayout } from "../../../types/config";
+import { cloneLayout, createBlankLayout, type SavedLayout } from "../../../types/config";
 import {
   clonePaneStateMap,
   cloneSavedLayout,
@@ -96,7 +96,7 @@ export function reduceLayoutAction(state: AppState, action: AppAction): AppState
       );
       const newLayout: SavedLayout = {
         name: action.name,
-        layout: cloneLayout(DEFAULT_LAYOUT),
+        layout: createBlankLayout(),
         paneState: {},
       };
       const layouts = [...currentConfig.layouts, newLayout];

package/src/plugins/builtin/account-management/form-components.tsx

@@ -85,7 +85,7 @@ export function PickerRow({
   return (
     <Box
       flexDirection="column"
-      onMouseMove={onFocus}
+      onMouseOver={onFocus}
       onMouseDown={(event?: { stopPropagation?: () => void; preventDefault?: () => void }) => {
         event?.stopPropagation?.();
         event?.preventDefault?.();
@@ -135,7 +135,7 @@ export function CheckboxRow({
     <Box
       flexDirection="column"
       backgroundColor={hovered ? hoverBg() : undefined}
-      onMouseMove={() => {
+      onMouseOver={() => {
         setHovered(true);
         onFocus();
       }}

package/src/plugins/builtin/alerts/pane.tsx

@@ -214,7 +214,7 @@ export function AlertsPane({ focused, width, height, close }: PaneProps) {
     alert: AlertRule,
     column: AlertColumn,
     _index: number,
-    rowState: { selected: boolean; hovered: boolean },
+    rowState: { selected: boolean },
   ): DataTableCell => {
     const selectedColor = rowState.selected ? colors.selectedText : undefined;
     const actionMouseDown = (handler: () => void) => (

package/src/plugins/builtin/analytics/index.test.tsx

@@ -293,12 +293,14 @@ describe("PortfolioAnalyticsPane", () => {
               currency: "USD",
               source: "flex",
               updatedAt: new Date(2026, 2, 27).getTime(),
+              asOfDate: "2026-03-26",
               totalCashValue: -50000,
               settledCash: -45000,
               availableFunds: 15000,
               excessLiquidity: 12000,
               buyingPower: 30000,
               netLiquidation: 125000,
+              grossPositionValue: 113636,
               dailyPnl: 900,
               unrealizedPnl: 777,
               realizedPnl: -25,
@@ -318,6 +320,8 @@ describe("PortfolioAnalyticsPane", () => {
 
     const frame = testSetup!.captureCharFrame();
     expect(frame).toContain("Net Liq       125k");
+    expect(frame).toContain("Val           113.6k");
+    expect(frame).toContain("Margin Lev    1.1x");
     expect(frame).toContain("Cash          -50k");
     expect(frame).toContain("Day           +900");
     expect(frame).toContain("P&L           +777");
@@ -326,8 +330,8 @@ describe("PortfolioAnalyticsPane", () => {
     expect(frame).toContain("Avail         15k");
     expect(frame).toContain("Excess        12k");
     expect(frame).toContain("BP            30k");
-    expect(frame).toContain("Synced        just now");
-    expect(frame).toContain("Source        Flex Mar 27");
+    expect(frame).toContain("As Of         Mar 26");
+    expect(frame).toContain("Source        Flex Mar 26");
   });
 
   test("falls back from a Gateway portfolio to a configured Flex profile for IBKR history", async () => {