gloomberb 0.4.1 → 0.5.0

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

@@ -1,16 +1,28 @@
 import { afterEach, describe, expect, test } from "bun:test";
-import { act, useState } from "react";
+import { act, useEffect, useRef, useState } from "react";
 import { testRender } from "@opentui/react/test-utils";
+import { DialogProvider } from "@opentui-ui/dialog/react";
+import type { BoxRenderable, ScrollBoxRenderable } from "@opentui/core";
 import { Button } from "./button";
+import { DataTable } from "./data-table";
 import { TextField } from "./fields";
 import { ListView } from "./list-view";
+import { MultiSelectChips } from "./multi-select-chips";
+import { MultiSelectDialogButton } from "./multi-select-dialog";
+import { toggleMultiSelectValue } from "./multi-select";
 import { ProgressBar } from "./loading";
 import { Notice } from "./status";
 import { Tabs } from "./tabs";
 import { ToggleList } from "../toggle-list";
+import { AppContext, PaneInstanceProvider, createInitialState } from "../../state/app-context";
+import { createDefaultConfig } from "../../types/config";
 
 let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
 let setListSelection: ((index: number) => void) | null = null;
+let selectedTableRow: string | null = null;
+let activatedTableRow: string | null = null;
+let selectedChips: string[] = [];
+let tableHorizontalScrollbarVisible: boolean | null = null;
 
 function ScrollableListHarness() {
   const [selectedIndex, setSelectedIndex] = useState(0);
@@ -29,12 +41,163 @@ function ScrollableListHarness() {
   );
 }
 
+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
+      columns={[{ id: "name", label: "NAME", width: 12, align: "left" }]}
+      items={[{ id: "alpha", name: "Alpha" }]}
+      sortColumnId={null}
+      sortDirection="asc"
+      onHeaderClick={() => {}}
+      headerScrollRef={headerScrollRef}
+      scrollRef={scrollRef}
+      syncHeaderScroll={() => {}}
+      onBodyScrollActivity={() => {}}
+      hoveredIdx={hoveredIdx}
+      setHoveredIdx={setHoveredIdx}
+      getItemKey={(row) => row.id}
+      isSelected={(row) => selectedId === row.id}
+      onSelect={(row) => {
+        selectedTableRow = row.id;
+        setSelectedId(row.id);
+      }}
+      onActivate={(row) => {
+        activatedTableRow = row.id;
+      }}
+      renderCell={(row) => ({ text: row.name })}
+      emptyStateTitle="No rows."
+    />
+  );
+}
+
+type SectionTableRow =
+  | { kind: "header"; id: string; label: string }
+  | { kind: "row"; id: string; name: string };
+
+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" },
+  ];
+
+  return (
+    <DataTable
+      columns={[{ id: "name", label: "NAME", width: 16, align: "left" }]}
+      items={rows}
+      sortColumnId={null}
+      sortDirection="asc"
+      onHeaderClick={() => {}}
+      headerScrollRef={headerScrollRef}
+      scrollRef={scrollRef}
+      syncHeaderScroll={() => {}}
+      onBodyScrollActivity={() => {}}
+      hoveredIdx={hoveredIdx}
+      setHoveredIdx={setHoveredIdx}
+      getItemKey={(row) => row.id}
+      isSelected={(row) => row.kind === "row" && row.id === selectedId}
+      onSelect={(row) => {
+        if (row.kind !== "row") return;
+        selectedTableRow = row.id;
+        setSelectedId(row.id);
+      }}
+      renderSectionHeader={(row) => (
+        row.kind === "header" ? { text: row.label } : null
+      )}
+      renderCell={(row) => ({ text: row.kind === "row" ? row.name : "" })}
+      emptyStateTitle="No rows."
+    />
+  );
+}
+
+function DataTableNoHorizontalScrollHarness() {
+  const headerScrollRef = useRef<ScrollBoxRenderable>(null);
+  const scrollRef = useRef<ScrollBoxRenderable>(null);
+  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null);
+
+  useEffect(() => {
+    tableHorizontalScrollbarVisible = scrollRef.current?.horizontalScrollBar.visible ?? null;
+  });
+
+  return (
+    <DataTable
+      columns={[{ id: "name", label: "NAME", width: 12, align: "left" }]}
+      items={[{ id: "alpha", name: "Alpha" }]}
+      sortColumnId={null}
+      sortDirection="asc"
+      onHeaderClick={() => {}}
+      headerScrollRef={headerScrollRef}
+      scrollRef={scrollRef}
+      syncHeaderScroll={() => {}}
+      onBodyScrollActivity={() => {}}
+      hoveredIdx={hoveredIdx}
+      setHoveredIdx={setHoveredIdx}
+      getItemKey={(row) => row.id}
+      isSelected={() => false}
+      onSelect={() => {}}
+      renderCell={(row) => ({ text: row.name })}
+      emptyStateTitle="No rows."
+      showHorizontalScrollbar={false}
+    />
+  );
+}
+
+function MultiSelectChipsHarness() {
+  const [values, setValues] = useState(["sma"]);
+  selectedChips = values;
+
+  return (
+    <MultiSelectChips
+      label="IND"
+      selectedValues={values}
+      onChange={setValues}
+      idPrefix="indicator-chip"
+      options={[
+        { value: "sma", label: "SMA" },
+        { value: "ema", label: "EMA" },
+      ]}
+    />
+  );
+}
+
+function MultiSelectDialogButtonHarness() {
+  const [values, setValues] = useState(["sma"]);
+
+  return (
+    <DialogProvider dialogOptions={{ style: { backgroundColor: "#000000", borderColor: "#ffffff", borderStyle: "single" } }}>
+      <MultiSelectDialogButton
+        label="IND"
+        title="Chart Indicators"
+        selectedValues={values}
+        onChange={setValues}
+        idPrefix="indicator-dialog"
+        options={[
+          { value: "sma", label: "SMA" },
+          { value: "ema", label: "EMA" },
+        ]}
+      />
+    </DialogProvider>
+  );
+}
+
 afterEach(() => {
   if (testSetup) {
     testSetup.renderer.destroy();
     testSetup = undefined;
   }
   setListSelection = null;
+  selectedTableRow = null;
+  activatedTableRow = null;
+  selectedChips = [];
+  tableHorizontalScrollbarVisible = null;
 });
 
 describe("shared UI kit", () => {
@@ -90,6 +253,79 @@ describe("shared UI kit", () => {
     expect(frame).toContain("Headlines and previews");
   });
 
+  test("toggles multi-select chips with the mouse", async () => {
+    testSetup = await testRender(<MultiSelectChipsHarness />, { width: 32, height: 3 });
+
+    await act(async () => {
+      await testSetup!.renderOnce();
+    });
+
+    let frame = testSetup.captureCharFrame();
+    expect(frame).toContain("[x] SMA");
+    expect(frame).toContain("[ ] EMA");
+    const emaChip = testSetup.renderer.root.findDescendantById("indicator-chip:ema") as BoxRenderable | undefined;
+    expect(emaChip).toBeDefined();
+
+    await act(async () => {
+      await testSetup!.mockMouse.click(emaChip!.x + 1, emaChip!.y);
+    });
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    await act(async () => {
+      await testSetup!.renderOnce();
+    });
+
+    frame = testSetup.captureCharFrame();
+    expect(frame).toContain("[x] SMA");
+    expect(frame).toContain("[x] EMA");
+    expect(selectedChips).toEqual(["sma", "ema"]);
+  });
+
+  test("opens compact multi-select dialogs from a button", async () => {
+    testSetup = await testRender(<MultiSelectDialogButtonHarness />, { width: 60, height: 18 });
+
+    await act(async () => {
+      await testSetup!.renderOnce();
+    });
+
+    let frame = testSetup.captureCharFrame();
+    expect(frame).toContain("IND: SMA");
+    const button = testSetup.renderer.root.findDescendantById("indicator-dialog:button") as BoxRenderable | undefined;
+    expect(button).toBeDefined();
+    expect(button!.width).toBe(" IND: SMA ".length);
+
+    await act(async () => {
+      await testSetup!.mockMouse.click(button!.x + 1, button!.y);
+      await Promise.resolve();
+      await testSetup!.renderOnce();
+    });
+
+    frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Chart Indicators");
+    expect(frame).toContain("[✓] SMA");
+    expect(frame).toContain("[ ] EMA");
+    expect(frame).not.toContain("Toggle");
+    expect(frame).not.toContain("space toggle");
+
+    await act(async () => {
+      await testSetup!.mockMouse.click(0, 0);
+      await Promise.resolve();
+      await testSetup!.renderOnce();
+    });
+
+    frame = testSetup.captureCharFrame();
+    expect(frame).not.toContain("Chart Indicators");
+  });
+
+  test("keeps shared multi-select values in option order when toggling", () => {
+    const options = [
+      { value: "sma", label: "SMA" },
+      { value: "ema", label: "EMA" },
+    ];
+
+    expect(toggleMultiSelectValue(options, ["sma"], "ema")).toEqual(["sma", "ema"]);
+    expect(toggleMultiSelectValue(options, ["sma", "ema"], "sma")).toEqual(["ema"]);
+  });
+
   test("auto-scrolls a scrollable list to keep the selected row visible", async () => {
     testSetup = await testRender(
       <ScrollableListHarness />,
@@ -131,4 +367,110 @@ describe("shared UI kit", () => {
     expect(frame).toContain("******");
     expect(frame).not.toContain("secret");
   });
+
+  test("does not allow selecting masked password fields", async () => {
+    testSetup = await testRender(
+      <TextField
+        type="password"
+        value="secret"
+        focused
+        width={12}
+        onChange={() => {}}
+      />,
+      { width: 16, height: 3 },
+    );
+
+    await testSetup.renderOnce();
+
+    await act(async () => {
+      await testSetup!.mockMouse.drag(1, 0, 6, 0);
+      await testSetup!.renderOnce();
+    });
+
+    expect(testSetup.renderer.getSelection()).toBeNull();
+  });
+
+  test("activates data table rows on a second click", async () => {
+    const state = createInitialState(createDefaultConfig("/tmp/gloomberb-test"));
+    testSetup = await testRender(
+      <AppContext value={{ state, dispatch: () => {} }}>
+        <PaneInstanceProvider paneId="portfolio-list:main">
+          <DataTableActivationHarness />
+        </PaneInstanceProvider>
+      </AppContext>,
+      { width: 32, height: 5 },
+    );
+
+    await act(async () => {
+      await testSetup!.renderOnce();
+    });
+    await act(async () => {
+      await testSetup!.mockMouse.click(2, 1);
+      await testSetup!.renderOnce();
+    });
+
+    expect(selectedTableRow).toBe("alpha");
+    expect(activatedTableRow).toBeNull();
+
+    await act(async () => {
+      await testSetup!.mockMouse.click(2, 1);
+      await testSetup!.renderOnce();
+    });
+
+    expect(activatedTableRow).toBe("alpha");
+  });
+
+  test("renders data table section headers as non-selectable rows", async () => {
+    const state = createInitialState(createDefaultConfig("/tmp/gloomberb-test"));
+    testSetup = await testRender(
+      <AppContext value={{ state, dispatch: () => {} }}>
+        <PaneInstanceProvider paneId="portfolio-list:main">
+          <DataTableSectionHarness />
+        </PaneInstanceProvider>
+      </AppContext>,
+      { width: 32, height: 6 },
+    );
+
+    await act(async () => {
+      await testSetup!.renderOnce();
+    });
+
+    let frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Macro Releases");
+    expect(frame).toContain("CPI");
+
+    await act(async () => {
+      await testSetup!.mockMouse.click(2, 1);
+      await testSetup!.renderOnce();
+    });
+    expect(selectedTableRow).toBeNull();
+
+    await act(async () => {
+      await testSetup!.mockMouse.click(2, 2);
+      await testSetup!.renderOnce();
+    });
+
+    frame = testSetup.captureCharFrame();
+    expect(selectedTableRow).toBe("cpi");
+    expect(frame).toContain("CPI");
+  });
+
+  test("hides data table horizontal scrolling when disabled", async () => {
+    const state = createInitialState(createDefaultConfig("/tmp/gloomberb-test"));
+    testSetup = await testRender(
+      <AppContext value={{ state, dispatch: () => {} }}>
+        <PaneInstanceProvider paneId="portfolio-list:main">
+          <DataTableNoHorizontalScrollHarness />
+        </PaneInstanceProvider>
+      </AppContext>,
+      { width: 32, height: 5 },
+    );
+
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    expect(tableHorizontalScrollbarVisible).toBe(false);
+  });
 });

package/src/data/plugin-state-store.ts

@@ -1,5 +1,6 @@
 import type { Database } from "bun:sqlite";
 import { safeParseJson, serializeJson } from "./sqlite-json";
+import { withSqliteBusyRetry } from "./sqlite-retry";
 
 export const DEFAULT_PLUGIN_STATE_SCHEMA_VERSION = 1;
 
@@ -23,11 +24,13 @@ export class PluginStateStore {
 
   get<T>(pluginId: string, key: string, schemaVersion = DEFAULT_PLUGIN_STATE_SCHEMA_VERSION): PluginStateRecord<T> | null {
     const cacheKey = `${pluginId}:${key}`;
-    const row = this.db
-      .query<{ schema_version: number; value: string; updated_at: number }, [string, string]>(
-        "SELECT schema_version, value, updated_at FROM plugin_state WHERE plugin_id = ? AND key = ?",
-      )
-      .get(pluginId, key);
+    const row = withSqliteBusyRetry("load plugin state", () => (
+      this.db
+        .query<{ schema_version: number; value: string; updated_at: number }, [string, string]>(
+          "SELECT schema_version, value, updated_at FROM plugin_state WHERE plugin_id = ? AND key = ?",
+        )
+        .get(pluginId, key)
+    ));
     if (!row) {
       this.cache.delete(cacheKey);
       return null;
@@ -63,12 +66,14 @@ export class PluginStateStore {
   set(pluginId: string, key: string, value: unknown, schemaVersion = DEFAULT_PLUGIN_STATE_SCHEMA_VERSION): void {
     const rawValue = serializeJson(value);
     const updatedAt = Date.now();
-    this.db
-      .query(
-        `INSERT OR REPLACE INTO plugin_state (plugin_id, key, schema_version, value, updated_at)
-         VALUES (?, ?, ?, ?, ?)`,
-      )
-      .run(pluginId, key, schemaVersion, rawValue, updatedAt);
+    withSqliteBusyRetry("save plugin state", () => {
+      this.db
+        .query(
+          `INSERT OR REPLACE INTO plugin_state (plugin_id, key, schema_version, value, updated_at)
+           VALUES (?, ?, ?, ?, ?)`,
+        )
+        .run(pluginId, key, schemaVersion, rawValue, updatedAt);
+    });
     this.cache.set(`${pluginId}:${key}`, {
       value,
       schemaVersion,
@@ -78,21 +83,27 @@ export class PluginStateStore {
   }
 
   delete(pluginId: string, key: string): void {
-    this.db.query("DELETE FROM plugin_state WHERE plugin_id = ? AND key = ?").run(pluginId, key);
+    withSqliteBusyRetry("delete plugin state", () => {
+      this.db.query("DELETE FROM plugin_state WHERE plugin_id = ? AND key = ?").run(pluginId, key);
+    });
     this.cache.delete(`${pluginId}:${key}`);
   }
 
   keys(pluginId: string): string[] {
-    return this.db
-      .query<{ key: string }, [string]>(
-        "SELECT key FROM plugin_state WHERE plugin_id = ? ORDER BY key",
-      )
-      .all(pluginId)
-      .map((row) => row.key);
+    return withSqliteBusyRetry("list plugin state keys", () => (
+      this.db
+        .query<{ key: string }, [string]>(
+          "SELECT key FROM plugin_state WHERE plugin_id = ? ORDER BY key",
+        )
+        .all(pluginId)
+        .map((row) => row.key)
+    ));
   }
 
   clear(pluginId: string): void {
-    this.db.query("DELETE FROM plugin_state WHERE plugin_id = ?").run(pluginId);
+    withSqliteBusyRetry("clear plugin state", () => {
+      this.db.query("DELETE FROM plugin_state WHERE plugin_id = ?").run(pluginId);
+    });
     for (const cacheKey of this.cache.keys()) {
       if (cacheKey.startsWith(`${pluginId}:`)) {
         this.cache.delete(cacheKey);