gloomberb 0.3.7 → 0.4.1

package/src/plugins/prediction-markets/pane.test.tsx

@@ -83,7 +83,58 @@ describe("prediction markets pane interactions", () => {
     expect(frame).toContain("Will the Fed cut rates?");
   });
 
-  test("renders the merged market browser and supports venue switching", async () => {
+  test("shows a venue warning instead of a raw fetch error when one catalog fails", async () => {
+    attachPredictionMarketsPersistence(new MemoryPersistence());
+
+    globalThis.fetch = (async (input: Request | string | URL) => {
+      const url = String(input);
+      if (url.includes("gamma-api.polymarket.com")) {
+        throw new Error("Unable to connect. Was there a typo in the url or port?");
+      }
+      if (url.includes("/trade-api/v2/events?")) {
+        return new Response(
+          JSON.stringify({
+            events: [
+              {
+                title: "Fed series",
+                category: "Economics",
+                event_ticker: "FED-1",
+                series_ticker: "FED",
+                markets: [
+                  {
+                    ticker: "KAL-1",
+                    title: "Will the Fed cut rates?",
+                    yes_sub_title: "Yes",
+                    event_ticker: "FED-1",
+                    status: "open",
+                    market_type: "binary",
+                    last_price_dollars: "0.48",
+                    volume_24h_fp: "15000",
+                    volume_fp: "90000",
+                    open_interest_fp: "45000",
+                  },
+                ],
+              },
+            ],
+          }),
+          { status: 200 },
+        );
+      }
+      return new Response(JSON.stringify({}), { status: 200 });
+    }) as unknown as typeof fetch;
+
+    testSetup = await testRender(<Harness />, { width: 120, height: 34 });
+    await flushFrames(testSetup);
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Will the Fed cut rates?");
+    expect(frame).toContain(
+      "Polymarket unavailable right now; showing Kalshi markets.",
+    );
+    expect(frame).not.toContain("Was there a typo in the url or port?");
+  });
+
+  test("selects a market on single click and opens detail on double click", async () => {
     installPredictionMarketMocks();
 
     testSetup = await testRender(<Harness />, { width: 120, height: 34 });
@@ -115,9 +166,45 @@ describe("prediction markets pane interactions", () => {
 
     frame = testSetup.captureCharFrame();
     expect(frame).toContain("Will the Fed cut rates?");
+    expect(frame).not.toContain("Kalshi primary rule");
+
+    await act(async () => {
+      await testSetup!.mockMouse.click(kalshiCol + 1, kalshiRow);
+      await testSetup!.renderOnce();
+    });
+    await flushFrames(testSetup);
+
+    frame = testSetup.captureCharFrame();
     expect(frame).toContain("Kalshi primary rule");
   });
 
+  test("focuses the pane when a market row is clicked", async () => {
+    installPredictionMarketMocks();
+
+    testSetup = await testRender(
+      <Harness initialFocusedPaneId="portfolio-list:main" />,
+      { width: 120, height: 34 },
+    );
+    await flushFrames(testSetup);
+
+    expect(harnessStateRef.current?.focusedPaneId).toBe("portfolio-list:main");
+
+    const frame = testSetup.captureCharFrame();
+    const lines = frame.split("\n");
+    const kalshiRow = lines.findIndex((line) =>
+      line.includes("Will the Fed cut rates?"),
+    );
+    const kalshiCol = lines[kalshiRow]?.indexOf("Will the Fed cut rates?") ?? -1;
+
+    await act(async () => {
+      await testSetup!.mockMouse.click(kalshiCol + 1, kalshiRow);
+      await testSetup!.renderOnce();
+    });
+    await flushFrames(testSetup);
+
+    expect(harnessStateRef.current?.focusedPaneId).toBe(TEST_PANE_ID);
+  });
+
   test("loads selected detail once instead of refetching in a render loop", async () => {
     const { fetchUrls } = installPredictionMarketMocks();
 
@@ -134,6 +221,8 @@ describe("prediction markets pane interactions", () => {
     await act(async () => {
       await testSetup!.mockMouse.click(kalshiCol + 1, kalshiRow);
       await testSetup!.renderOnce();
+      await testSetup!.mockMouse.click(kalshiCol + 1, kalshiRow);
+      await testSetup!.renderOnce();
     });
     await flushFrames(testSetup, 8);
 
@@ -157,7 +246,7 @@ describe("prediction markets pane interactions", () => {
     expect(testSetup.captureCharFrame()).not.toContain("Loading market detail...");
   });
 
-  test("moves selection through the list with keyboard navigation", async () => {
+  test("moves selection through the list with keyboard navigation without opening detail", async () => {
     installPredictionMarketMocks();
 
     testSetup = await testRender(<Harness />, { width: 120, height: 34 });
@@ -176,6 +265,102 @@ describe("prediction markets pane interactions", () => {
 
     const frame = testSetup.captureCharFrame();
     expect(frame).toContain("Will the Fed cut rates?");
+    expect(frame).not.toContain("Kalshi primary rule");
+    expect(frame).not.toContain("<- Back");
+  });
+
+  test("keeps a clicked header sort instead of snapping back to the default sort", async () => {
+    installPredictionMarketMocks();
+
+    testSetup = await testRender(<Harness />, { width: 120, height: 34 });
+    await flushFrames(testSetup);
+
+    const frame = testSetup.captureCharFrame();
+    const lines = frame.split("\n");
+    const headerRow = lines.findIndex((line) => line.includes("VENUE"));
+    const headerCol = lines[headerRow]?.indexOf("VENUE") ?? -1;
+
+    expect(headerRow).toBeGreaterThan(-1);
+    expect(headerCol).toBeGreaterThan(-1);
+
+    await act(async () => {
+      await testSetup!.mockMouse.click(headerCol + 1, headerRow);
+      await testSetup!.renderOnce();
+    });
+    await flushFrames(testSetup, 4);
+
+    const nextFrame = testSetup.captureCharFrame();
+    const nextLines = nextFrame.split("\n");
+    const kalshiRow = nextLines.findIndex((line) =>
+      line.includes("Will the Fed cut rates?"),
+    );
+    const polymarketRow = nextLines.findIndex((line) =>
+      line.includes("Will inflation fall?"),
+    );
+
+    expect(
+      harnessStateRef.current?.paneState[TEST_PANE_ID]?.pluginState?.[
+        "prediction-markets"
+      ]?.sortPreference,
+    ).toEqual({ columnId: "venue", direction: "asc" });
+    expect(nextLines[headerRow]).toContain("VENUE ▲");
+    expect(kalshiRow).toBeGreaterThan(-1);
+    expect(polymarketRow).toBeGreaterThan(-1);
+    expect(kalshiRow).toBeLessThan(polymarketRow);
+  });
+
+  test("cycles the ends header through reverse date order before resetting", async () => {
+    installPredictionMarketMocks();
+
+    testSetup = await testRender(<Harness />, { width: 120, height: 34 });
+    await flushFrames(testSetup);
+
+    const frame = testSetup.captureCharFrame();
+    const lines = frame.split("\n");
+    const headerRow = lines.findIndex((line) => line.includes("ENDS"));
+    const headerCol = lines[headerRow]?.indexOf("ENDS") ?? -1;
+
+    expect(headerRow).toBeGreaterThan(-1);
+    expect(headerCol).toBeGreaterThan(-1);
+
+    await act(async () => {
+      await testSetup!.mockMouse.click(headerCol + 1, headerRow);
+      await testSetup!.renderOnce();
+    });
+    await flushFrames(testSetup, 2);
+
+    const sortedFrame = testSetup.captureCharFrame();
+    const sortedLines = sortedFrame.split("\n");
+    const sortedHeaderRow = sortedLines.findIndex((line) => line.includes("ENDS"));
+    const sortedHeaderCol = sortedLines[sortedHeaderRow]?.indexOf("ENDS") ?? -1;
+
+    expect(sortedHeaderRow).toBeGreaterThan(-1);
+    expect(sortedHeaderCol).toBeGreaterThan(-1);
+
+    await act(async () => {
+      await testSetup!.mockMouse.click(sortedHeaderCol + 1, sortedHeaderRow);
+      await testSetup!.renderOnce();
+    });
+    await flushFrames(testSetup, 4);
+
+    const nextFrame = testSetup.captureCharFrame();
+    const nextLines = nextFrame.split("\n");
+    const kalshiRow = nextLines.findIndex((line) =>
+      line.includes("Will the Fed cut rates?"),
+    );
+    const polymarketRow = nextLines.findIndex((line) =>
+      line.includes("Will inflation fall?"),
+    );
+
+    expect(
+      harnessStateRef.current?.paneState[TEST_PANE_ID]?.pluginState?.[
+        "prediction-markets"
+      ]?.sortPreference,
+    ).toEqual({ columnId: "ends", direction: "desc" });
+    expect(nextLines[headerRow]).toContain("ENDS ▼");
+    expect(kalshiRow).toBeGreaterThan(-1);
+    expect(polymarketRow).toBeGreaterThan(-1);
+    expect(kalshiRow).toBeLessThan(polymarketRow);
   });
 
   test("does not wrap to the last row when moving up without a selection", async () => {
@@ -197,7 +382,7 @@ describe("prediction markets pane interactions", () => {
     ).toBe("polymarket:pm-1");
   });
 
-  test("supports detail outcome navigation and escape focus return from the keyboard", async () => {
+  test("supports detail outcome navigation and backspace return from the keyboard", async () => {
     attachPredictionMarketsPersistence(new MemoryPersistence());
 
     globalThis.fetch = (async (input: Request | string | URL) => {
@@ -326,17 +511,15 @@ describe("prediction markets pane interactions", () => {
       ]?.selectedDetailMarketKey,
     ).toBe("kalshi:KXFED-27APR-T4.50");
 
-    await emitKeypress(testSetup, { name: "esc", sequence: "\u001b" });
+    await emitKeypress(testSetup, { name: "backspace", sequence: "\u007f" });
     await flushFrames(testSetup);
 
-    expect(
-      harnessStateRef.current?.paneState[TEST_PANE_ID]?.pluginState?.[
-        "prediction-markets"
-      ]?.focusRegion,
-    ).toBe("list");
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("search markets");
+    expect(frame).not.toContain("Rule 2");
   });
 
-  test("starts with no detail pane and toggles the detail pane off on repeat selection", async () => {
+  test("opens full-page detail from a row double click and preserves the browse selection", async () => {
     installPredictionMarketMocks();
 
     testSetup = await testRender(<Harness />, { width: 120, height: 34 });
@@ -352,62 +535,19 @@ describe("prediction markets pane interactions", () => {
     await act(async () => {
       await testSetup!.mockMouse.click(kalshiCol + 1, kalshiRow);
       await testSetup!.renderOnce();
-    });
-    await flushFrames(testSetup);
-
-    await act(async () => {
       await testSetup!.mockMouse.click(kalshiCol + 1, kalshiRow);
       await testSetup!.renderOnce();
     });
     await flushFrames(testSetup);
 
+    const detailFrame = testSetup.captureCharFrame();
+    expect(detailFrame).toContain("<- Back");
+    expect(detailFrame).toContain("Kalshi primary rule");
     expect(
       harnessStateRef.current?.paneState[TEST_PANE_ID]?.pluginState?.[
         "prediction-markets"
       ]?.selectedRowKey,
-    ).toBeNull();
-  });
-
-  test("resizes the list/detail split by dragging the divider", async () => {
-    installPredictionMarketMocks();
-
-    testSetup = await testRender(<Harness />, { width: 120, height: 34 });
-    await flushFrames(testSetup);
-
-    let frame = testSetup.captureCharFrame();
-    const lines = frame.split("\n");
-    const kalshiRow = lines.findIndex((line) =>
-      line.includes("Will the Fed cut rates?"),
-    );
-    const kalshiCol = lines[kalshiRow]?.indexOf("Will the Fed cut rates?") ?? -1;
-
-    await act(async () => {
-      await testSetup!.mockMouse.click(kalshiCol + 1, kalshiRow);
-      await testSetup!.renderOnce();
-    });
-    await flushFrames(testSetup);
-
-    frame = testSetup.captureCharFrame();
-    const dividerLines = frame.split("\n");
-    const dividerRow = dividerLines.findIndex((line) => line.includes("│"));
-    const dividerCol = dividerLines[dividerRow]?.indexOf("│") ?? -1;
-
-    await act(async () => {
-      await testSetup!.mockMouse.drag(
-        dividerCol,
-        dividerRow,
-        dividerCol + 10,
-        dividerRow,
-      );
-      await testSetup!.renderOnce();
-    });
-    await flushFrames(testSetup);
-
-    expect(
-      harnessStateRef.current?.paneState[TEST_PANE_ID]?.pluginState?.[
-        "prediction-markets"
-      ]?.detailSplitRatio,
-    ).toBeGreaterThan(0.42);
+    ).toBe("kalshi:KAL-1");
   });
 
   test("switches categories with arrows and venues with shift+arrows", async () => {

package/src/plugins/prediction-markets/pane.tsx

@@ -1,106 +1,29 @@
-import { useRef } from "react";
-import { TextAttributes, type BoxRenderable } from "@opentui/core";
-import { TabBar } from "../../components";
+import { TextAttributes } from "@opentui/core";
+import { PageStackView, TabBar } from "../../components";
+import type { PaneProps } from "../../types/plugin";
+import { colors } from "../../theme/colors";
+import { PREDICTION_CATEGORY_OPTIONS } from "./categories";
 import { usePredictionMarketsController } from "./controller";
 import { PredictionMarketDetailPane } from "./detail/pane";
 import { BROWSE_TABS, VENUE_TABS } from "./navigation";
 import { PredictionMarketsTable } from "./table";
-import { PREDICTION_CATEGORY_OPTIONS } from "./categories";
 import type { PredictionBrowseTab, PredictionCategoryId } from "./types";
-import type { PaneProps } from "../../types/plugin";
-import { colors } from "../../theme/colors";
-
-function clamp(value: number, min: number, max: number): number {
-  return Math.min(Math.max(value, min), max);
-}
 
 export function PredictionMarketsPane({ focused, width, height }: PaneProps) {
   const controller = usePredictionMarketsController({ focused });
-  const rootRef = useRef<BoxRenderable>(null);
-  const splitDragRef = useRef<{ startX: number; startRatio: number } | null>(
-    null,
-  );
-  const minTableWidth = 44;
-  const minDetailWidth = 36;
-  const effectiveMinTableWidth = controller.selectedSummary
-    ? Math.min(minTableWidth, Math.max(width - minDetailWidth - 1, 20))
-    : width;
-  const effectiveMinDetailWidth = controller.selectedSummary
-    ? Math.min(minDetailWidth, Math.max(width - effectiveMinTableWidth - 1, 20))
-    : 0;
-  const listWidth = controller.selectedSummary
-    ? clamp(
-        Math.round(width * controller.detailSplitRatio),
-        effectiveMinTableWidth,
-        Math.max(effectiveMinTableWidth, width - effectiveMinDetailWidth - 1),
-      )
-    : width;
-  const detailWidth = controller.selectedSummary
-    ? Math.max(width - listWidth - 1, effectiveMinDetailWidth)
-    : 0;
-  const dividerColor =
-    controller.focusRegion === "detail" ? colors.borderFocused : colors.border;
-
-  const handlePaneMouse = (event: {
-    type?: string;
-    x?: number;
-    preventDefault?: () => void;
-    stopPropagation?: () => void;
-  }) => {
-    if (!controller.selectedSummary || !rootRef.current) {
-      splitDragRef.current = null;
-      return;
-    }
-
-    const localX = (event.x ?? 0) - rootRef.current.x;
-    const dividerX = listWidth;
-
-    if (
-      event.type === "down" &&
-      localX >= dividerX &&
-      localX <= dividerX + 1
-    ) {
-      splitDragRef.current = {
-        startX: localX,
-        startRatio: controller.detailSplitRatio,
-      };
-      event.preventDefault?.();
-      event.stopPropagation?.();
-      return;
-    }
+  const catalogStatusColor =
+    controller.catalogStatus?.tone === "danger"
+      ? colors.negative
+      : colors.borderFocused;
 
-    if (!splitDragRef.current) return;
-
-    if (event.type === "drag") {
-      const delta = localX - splitDragRef.current.startX;
-      const nextListWidth = clamp(
-        Math.round(width * splitDragRef.current.startRatio) + delta,
-        effectiveMinTableWidth,
-        Math.max(effectiveMinTableWidth, width - effectiveMinDetailWidth - 1),
-      );
-      controller.actions.setDetailSplitRatio(nextListWidth / Math.max(width, 1));
-      event.preventDefault?.();
-      event.stopPropagation?.();
-      return;
-    }
-
-    if (event.type === "up" || event.type === "drag-end") {
-      splitDragRef.current = null;
-      event.preventDefault?.();
-      event.stopPropagation?.();
-    }
-  };
-
-  return (
+  const browseContent = (
     <box
-      ref={rootRef}
       flexDirection="column"
       width={width}
       height={height}
       backgroundColor={colors.panel}
-      onMouse={handlePaneMouse}
     >
-      {!controller.paneSettings.hideTabs && (
+      {!controller.paneSettings.hideTabs ? (
         <TabBar
           tabs={VENUE_TABS.map((tab) => ({
             label: tab.label,
@@ -110,7 +33,7 @@ export function PredictionMarketsPane({ focused, width, height }: PaneProps) {
           onSelect={controller.actions.setVenue}
           compact
         />
-      )}
+      ) : null}
 
       <box flexDirection="row" height={1} paddingX={1} gap={2}>
         <box
@@ -118,9 +41,7 @@ export function PredictionMarketsPane({ focused, width, height }: PaneProps) {
           onMouseDown={controller.actions.focusSearch}
           width={Math.max(18, Math.floor(width * 0.32))}
         >
-          <text fg={colors.textDim}>
-            {controller.searchFocused ? "?" : "/"}
-          </text>
+          <text fg={colors.textDim}>{controller.searchFocused ? "?" : "/"}</text>
           <box width={1} />
           {controller.searchFocused ? (
             <input
@@ -168,7 +89,7 @@ export function PredictionMarketsPane({ focused, width, height }: PaneProps) {
         </box>
       </box>
 
-      {PREDICTION_CATEGORY_OPTIONS.length > 1 && (
+      {PREDICTION_CATEGORY_OPTIONS.length > 1 ? (
         <scrollbox height={1} scrollX focusable={false}>
           <box flexDirection="row" paddingX={1} gap={2}>
             {PREDICTION_CATEGORY_OPTIONS.map((category) => {
@@ -194,71 +115,75 @@ export function PredictionMarketsPane({ focused, width, height }: PaneProps) {
             })}
           </box>
         </scrollbox>
-      )}
+      ) : null}
 
-      {controller.catalogError && (
-        <box height={1} paddingX={1}>
-          <text fg={colors.negative}>{controller.catalogError}</text>
+      {controller.catalogStatus ? (
+        <box height={1} paddingX={1} width={width} backgroundColor={colors.panel}>
+          <text fg={catalogStatusColor}>{controller.catalogStatus.message}</text>
         </box>
-      )}
-
-      <box flexDirection="row" flexGrow={1}>
-        <box
-          width={listWidth}
-          flexDirection="column"
-          onMouseDown={controller.actions.focusList}
-        >
-          <PredictionMarketsTable
-            columns={controller.visibleColumns}
-            rows={controller.visibleRows}
-            selectedRowKey={controller.selectedRow?.key ?? null}
-            hoveredIdx={controller.hoveredIdx}
-            setHoveredIdx={controller.actions.setHoveredIdx}
-            setSelectedRowKey={controller.actions.selectRow}
-            watchlist={controller.watchlistSet}
-            onToggleWatchlist={controller.actions.toggleWatchlist}
-            sortPreference={controller.sortPreference}
-            onHeaderClick={controller.actions.handleSortHeaderClick}
-            headerScrollRef={controller.headerScrollRef}
-            scrollRef={controller.scrollRef}
-            syncHeaderScroll={controller.layout.syncHeaderScroll}
-            onBodyScrollActivity={controller.layout.onBodyScrollActivity}
-          />
-        </box>
-
-        {controller.selectedSummary && (
-          <>
-            <box width={1}>
-              <text fg={dividerColor}>│</text>
-            </box>
-
-            <box
-              width={detailWidth}
-              flexDirection="column"
-              paddingX={1}
-              onMouseDown={controller.actions.focusDetail}
-            >
-              <PredictionMarketDetailPane
-                detail={controller.detail}
-                detailError={controller.detailError}
-                detailLoadCount={controller.detailLoadCount}
-                detailTab={controller.detailTab}
-                detailWidth={Math.max(detailWidth - 2, 24)}
-                focused={controller.focusRegion === "detail"}
-                height={height}
-                historyRange={controller.historyRange}
-                onDetailTabChange={controller.actions.setDetailTab}
-                onHistoryRangeChange={controller.actions.setHistoryRange}
-                onPreviewOrder={controller.actions.previewOrder}
-                onSelectMarket={controller.actions.selectMarket}
-                scrollRef={controller.detailScrollRef}
-                selectedRow={controller.selectedRow}
-                selectedSummary={controller.selectedSummary}
-              />
-            </box>
-          </>
-        )}
+      ) : null}
+
+      <box flexDirection="column" flexGrow={1}>
+        <PredictionMarketsTable
+          columns={controller.visibleColumns}
+          rows={controller.visibleRows}
+          selectedRowKey={controller.selectedRow?.key ?? null}
+          hoveredIdx={controller.hoveredIdx}
+          setHoveredIdx={controller.actions.setHoveredIdx}
+          onSelectRow={(rowKey) => controller.actions.setBrowseSelection(rowKey)}
+          onOpenRow={controller.actions.openSelectedRow}
+          watchlist={controller.watchlistSet}
+          onToggleWatchlist={controller.actions.toggleWatchlist}
+          sortPreference={controller.sortPreference}
+          onHeaderClick={controller.actions.handleSortHeaderClick}
+          headerScrollRef={controller.headerScrollRef}
+          scrollRef={controller.scrollRef}
+          syncHeaderScroll={controller.layout.syncHeaderScroll}
+          onBodyScrollActivity={controller.layout.onBodyScrollActivity}
+        />
       </box>
     </box>
   );
+
+  const detailContent =
+    controller.selectedSummary && controller.selectedRow ? (
+      <box
+        flexDirection="column"
+        flexGrow={1}
+        width={width}
+        height={Math.max(height - 1, 1)}
+        paddingX={1}
+        backgroundColor={colors.panel}
+      >
+        <PredictionMarketDetailPane
+          detail={controller.detail}
+          detailError={controller.detailError}
+          detailLoadCount={controller.detailLoadCount}
+          detailTab={controller.detailTab}
+          detailWidth={Math.max(width - 2, 24)}
+          focused={focused && controller.detailOpen}
+          height={Math.max(height - 1, 1)}
+          historyRange={controller.historyRange}
+          onDetailTabChange={controller.actions.setDetailTab}
+          onHistoryRangeChange={controller.actions.setHistoryRange}
+          onPreviewOrder={controller.actions.previewOrder}
+          onSelectMarket={controller.actions.selectMarket}
+          scrollRef={controller.detailScrollRef}
+          selectedRow={controller.selectedRow}
+          selectedSummary={controller.selectedSummary}
+        />
+      </box>
+    ) : (
+      <box flexGrow={1} backgroundColor={colors.panel} />
+    );
+
+  return (
+    <PageStackView
+      focused={focused}
+      detailOpen={controller.detailOpen && !!controller.selectedSummary}
+      onBack={controller.actions.closeDetail}
+      rootContent={browseContent}
+      detailContent={detailContent}
+    />
+  );
 }

package/src/plugins/prediction-markets/services/fetch.ts

@@ -19,6 +19,10 @@ export function attachPredictionMarketsPersistence(
   predictionMarketsPersistence = persistence;
 }
 
+export function resetPredictionMarketsPersistence(): void {
+  predictionMarketsPersistence = null;
+}
+
 export function getPredictionMarketsPersistence(): PluginPersistence | null {
   return predictionMarketsPersistence;
 }

package/src/plugins/prediction-markets/table.tsx

@@ -14,7 +14,8 @@ export function PredictionMarketsTable({
   selectedRowKey,
   hoveredIdx,
   setHoveredIdx,
-  setSelectedRowKey,
+  onSelectRow,
+  onOpenRow,
   watchlist,
   onToggleWatchlist,
   sortPreference,
@@ -29,7 +30,8 @@ export function PredictionMarketsTable({
   selectedRowKey: string | null;
   hoveredIdx: number | null;
   setHoveredIdx: (index: number | null) => void;
-  setSelectedRowKey: (rowKey: string) => void;
+  onSelectRow: (rowKey: string) => void;
+  onOpenRow: (rowKey: string) => void;
   watchlist: Set<string>;
   onToggleWatchlist: (row: PredictionListRow) => void;
   sortPreference: PredictionSortPreference;
@@ -56,7 +58,8 @@ export function PredictionMarketsTable({
       setHoveredIdx={setHoveredIdx}
       getItemKey={(row) => row.key}
       isSelected={(row) => selectedRowKey === row.key}
-      onSelect={(row) => setSelectedRowKey(row.key)}
+      onSelect={(row) => onSelectRow(row.key)}
+      onActivate={(row) => onOpenRow(row.key)}
       virtualize
       renderCell={(row, column, _index, rowState) => {
         const watchlisted = row.watchMarketKeys.some((marketKey) =>