gloomberb 0.9.5 → 0.9.6

package/src/plugins/builtin/portfolio-list/grid.tsx

@@ -0,0 +1,197 @@
+import { useCallback, useMemo } from "react";
+import {
+  buildMetricTreemapNavigationTiles,
+  findMetricTreemapNeighbor,
+  MetricTreemapSurface,
+  type MetricTreemapDirection,
+  type MetricTreemapItem,
+} from "../../../components";
+import { useShortcut } from "../../../react/input";
+import type { ColumnConfig } from "../../../types/config";
+import type { TickerFinancials } from "../../../types/financials";
+import type { TickerRecord } from "../../../types/ticker";
+import { useUiCapabilities } from "../../../ui";
+import { isPlainKey } from "../../../utils/keyboard";
+import { getColumnValue, getSortValue, type ColumnContext } from "./metrics";
+import { getPortfolioPositionMetrics } from "./position-metrics";
+
+const MARKET_CAP_COLUMN: ColumnConfig = { id: "market_cap", label: "Mkt Cap", width: 10, align: "right" };
+const MARKET_VALUE_COLUMN: ColumnConfig = { id: "mkt_value", label: "Mkt Value", width: 10, align: "right" };
+const CHANGE_PCT_COLUMN: ColumnConfig = { id: "change_pct", label: "Change", width: 8, align: "right" };
+const DAY_PNL_COLUMN: ColumnConfig = { id: "day_pnl", label: "Day P&L", width: 10, align: "right" };
+const VOLUME_COLUMN: ColumnConfig = { id: "volume", label: "Volume", width: 9, align: "right" };
+const WEIGHT_COLUMN: ColumnConfig = { id: "weight", label: "Weight", width: 8, align: "right" };
+
+function numericValue(value: number | string | null): number | null {
+  return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
+
+function quoteCurrency(ticker: TickerRecord, financials: TickerFinancials | undefined): string {
+  return financials?.quote?.currency || ticker.metadata.currency || "USD";
+}
+
+function positionAdjustedChangePercent(
+  ticker: TickerRecord,
+  financials: TickerFinancials | undefined,
+  context: ColumnContext,
+  isPortfolioTab: boolean,
+): number | null {
+  const changePercent = numericValue(getSortValue(CHANGE_PCT_COLUMN, ticker, financials, context));
+  if (changePercent == null || !isPortfolioTab) return changePercent;
+  const positionMetrics = getPortfolioPositionMetrics(ticker, context.activeTab, quoteCurrency(ticker, financials));
+  return positionMetrics.totalPriceUnits < 0 ? -changePercent : changePercent;
+}
+
+function buildPortfolioGridItems(
+  tickers: TickerRecord[],
+  financialsMap: Map<string, TickerFinancials>,
+  context: ColumnContext,
+  isPortfolioTab: boolean,
+): Array<MetricTreemapItem<TickerRecord>> {
+  return tickers.map((ticker) => {
+    const symbol = ticker.metadata.ticker;
+    const financials = financialsMap.get(symbol);
+    const weightColumn = isPortfolioTab ? MARKET_VALUE_COLUMN : MARKET_CAP_COLUMN;
+    const primaryColumn = isPortfolioTab ? MARKET_VALUE_COLUMN : MARKET_CAP_COLUMN;
+    const fallbackColumn = isPortfolioTab ? MARKET_CAP_COLUMN : VOLUME_COLUMN;
+    const weight = numericValue(getSortValue(weightColumn, ticker, financials, context))
+      ?? numericValue(getSortValue(fallbackColumn, ticker, financials, context))
+      ?? 1;
+    const primary = getColumnValue(primaryColumn, ticker, financials, context).text;
+    const change = getColumnValue(CHANGE_PCT_COLUMN, ticker, financials, context).text;
+    const secondary = isPortfolioTab
+      ? `${getColumnValue(DAY_PNL_COLUMN, ticker, financials, context).text} ${change}`
+      : change;
+    const tertiary = isPortfolioTab
+      ? getColumnValue(WEIGHT_COLUMN, ticker, financials, context).text
+      : getColumnValue(VOLUME_COLUMN, ticker, financials, context).text;
+
+    return {
+      id: symbol,
+      label: symbol,
+      weight: Math.max(1, Math.abs(weight)),
+      colorValue: positionAdjustedChangePercent(ticker, financials, context, isPortfolioTab),
+      primaryText: primary,
+      secondaryText: secondary,
+      tertiaryText: tertiary,
+      data: ticker,
+    };
+  });
+}
+
+export function PortfolioGrid({
+  sortedTickers,
+  financialsMap,
+  columnContext,
+  isPortfolioTab,
+  cursorSymbol,
+  setCursorSymbol,
+  onRowActivate,
+  onToggleViewMode,
+  focused,
+  width,
+  height,
+}: {
+  sortedTickers: TickerRecord[];
+  financialsMap: Map<string, TickerFinancials>;
+  columnContext: ColumnContext;
+  isPortfolioTab: boolean;
+  cursorSymbol: string | null;
+  setCursorSymbol: (symbol: string) => void;
+  onRowActivate: (ticker: TickerRecord) => void;
+  onToggleViewMode: () => void;
+  focused?: boolean;
+  width: number;
+  height: number;
+}) {
+  const { cellWidthPx = 8, cellHeightPx = 18, nativePaneChrome } = useUiCapabilities();
+  const chartWidth = Math.max(1, width - 2);
+  const cellAspect = Math.max(0.5, Math.min(4, cellHeightPx / Math.max(1, cellWidthPx)));
+  const items = useMemo(
+    () => buildPortfolioGridItems(sortedTickers, financialsMap, columnContext, isPortfolioTab),
+    [columnContext, financialsMap, isPortfolioTab, sortedTickers],
+  );
+  const navigationTiles = useMemo(
+    () => buildMetricTreemapNavigationTiles(items, chartWidth, height, cellAspect, nativePaneChrome ? "float" : "integer"),
+    [cellAspect, chartWidth, height, items, nativePaneChrome],
+  );
+  const selectedIdx = cursorSymbol
+    ? sortedTickers.findIndex((ticker) => ticker.metadata.ticker === cursorSymbol)
+    : -1;
+  const activeIdx = selectedIdx >= 0 ? selectedIdx : (sortedTickers.length > 0 ? 0 : -1);
+
+  const selectIndex = useCallback((index: number) => {
+    const ticker = sortedTickers[index];
+    if (ticker) setCursorSymbol(ticker.metadata.ticker);
+  }, [setCursorSymbol, sortedTickers]);
+
+  const selectNeighbor = useCallback((direction: MetricTreemapDirection) => {
+    const target = findMetricTreemapNeighbor(navigationTiles, cursorSymbol, direction);
+    if (target) setCursorSymbol(target.item.data.metadata.ticker);
+  }, [cursorSymbol, navigationTiles, setCursorSymbol]);
+
+  useShortcut((event) => {
+    if (!focused) return;
+    if (isPlainKey(event, "s")) {
+      event.preventDefault();
+      event.stopPropagation();
+      onToggleViewMode();
+      return;
+    }
+    if (isPlainKey(event, "j")) {
+      event.preventDefault();
+      event.stopPropagation();
+      selectIndex(Math.min((activeIdx >= 0 ? activeIdx : 0) + 1, sortedTickers.length - 1));
+      return;
+    }
+    if (isPlainKey(event, "k")) {
+      event.preventDefault();
+      event.stopPropagation();
+      selectIndex(Math.max((activeIdx >= 0 ? activeIdx : 0) - 1, 0));
+      return;
+    }
+    if (isPlainKey(event, "left", "h")) {
+      event.preventDefault();
+      event.stopPropagation();
+      selectNeighbor("left");
+      return;
+    }
+    if (isPlainKey(event, "right", "l")) {
+      event.preventDefault();
+      event.stopPropagation();
+      selectNeighbor("right");
+      return;
+    }
+    if (isPlainKey(event, "up")) {
+      event.preventDefault();
+      event.stopPropagation();
+      selectNeighbor("up");
+      return;
+    }
+    if (isPlainKey(event, "down")) {
+      event.preventDefault();
+      event.stopPropagation();
+      selectNeighbor("down");
+      return;
+    }
+    if (isPlainKey(event, "enter", "return")) {
+      const ticker = sortedTickers[activeIdx];
+      if (!ticker) return;
+      event.preventDefault();
+      event.stopPropagation();
+      onRowActivate(ticker);
+    }
+  }, { enabled: focused });
+
+  return (
+    <MetricTreemapSurface
+      items={items}
+      width={width}
+      height={height}
+      selectedId={cursorSymbol}
+      onSelect={(item) => setCursorSymbol(item.data.metadata.ticker)}
+      onActivate={(item) => onRowActivate(item.data)}
+      emptyStateTitle={isPortfolioTab ? "No portfolio positions" : "No watchlist tickers"}
+    />
+  );
+}

package/src/plugins/builtin/portfolio-list/pane/index.test.tsx

@@ -687,6 +687,47 @@ describe("PortfolioListPane cash and margin UI", () => {
     expect(frame).toContain("25.00%");
   });
 
+  test("renders portfolio grid from portfolio table values and opens the selected ticker", async () => {
+    const portfolioId = "broker:ibkr-flex:DU12345";
+    const config = createPortfolioConfig(portfolioId, [createBrokerInstance("flex")]);
+    const pinned: Array<{ symbol: string; options: { floating?: boolean; paneType?: string } | undefined }> = [];
+    const runtime = createTestPluginRuntime({
+      pinTicker: (symbol, options) => {
+        pinned.push({ symbol, options });
+      },
+    });
+
+    testSetup = await testRender(
+      <PortfolioHarness
+        config={config}
+        collectionId={portfolioId}
+        runtime={runtime}
+        stateMutator={(state) => {
+          state.paneState[TEST_PANE_ID] = {
+            ...state.paneState[TEST_PANE_ID],
+            viewMode: "grid",
+          };
+        }}
+      />,
+      { width: 100, height: 12 },
+    );
+
+    await flushFrame();
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Grid");
+    expect(frame).toContain("AAPL");
+    expect(frame).toContain("1.3k");
+    expect(frame).toContain("+4.17%");
+
+    await act(async () => {
+      testSetup!.mockInput.pressEnter();
+      await testSetup!.renderOnce();
+    });
+
+    expect(pinned).toEqual([{ symbol: "AAPL", options: { floating: true, paneType: TICKER_RESEARCH_PANE_ID } }]);
+  });
+
   test("keeps option avg cost on premium scale and multiplies quoted value by contract size", async () => {
     const portfolioId = "broker:ibkr-flex:DU12345";
     const optionTicker = "SPY  260619C00500000";

package/src/plugins/builtin/portfolio-list/pane/index.tsx

@@ -36,6 +36,7 @@ import {
 } from "../settings";
 import { useQuoteFlashMap } from "../../../../components/quote-flash";
 import { PortfolioTickerTable } from "../table";
+import { PortfolioGrid } from "../grid";
 import { useThrottledCursorSymbol } from "../use-throttled-cursor-symbol";
 import { isManualPortfolio } from "../mutations";
 import { QuickAddTickerInput, type QuickAddCollectionKind } from "../quick-add";
@@ -49,6 +50,8 @@ import {
 import { usePortfolioPaneStreaming } from "./streaming";
 import { usePortfolioSupplementalData } from "./supplemental";
 
+type PortfolioViewMode = "table" | "grid";
+
 export function PortfolioListPane({ focused, width, height }: PaneProps) {
   const { pinTicker } = usePluginTickerActions();
   const paneInstance = usePaneInstance();
@@ -65,6 +68,7 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
   const [committedCursorSymbol, setCommittedCursorSymbol] = usePaneStateValue<string | null>("cursorSymbol", null);
   const [collectionSorts, setCollectionSorts] = usePaneStateValue<Record<string, CollectionSortPreference>>("collectionSorts", {});
   const [cashDrawerExpanded, setCashDrawerExpanded] = usePaneStateValue<boolean>("cashDrawerExpanded", false);
+  const [viewMode, setViewMode] = usePaneStateValue<PortfolioViewMode>("viewMode", "table");
 
   const [now, setNow] = useState(Date.now());
   const [streamWindow, setStreamWindow] = useState({ start: 0, end: 24 });
@@ -174,7 +178,8 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
     ? (cashDrawerExpanded ? Math.min(6, Math.max(3, 2 + accountState.visibleCashBalances.length)) : 1)
     : 0;
   const showCollectionTabs = visibleCollections.length > 1;
-  const headerHeight = showCollectionTabs ? 1 : 0;
+  const viewTabsHeight = 1;
+  const headerHeight = viewTabsHeight + (showCollectionTabs ? 1 : 0);
   const drawerHeight = showCashDrawer
     ? Math.min(requestedDrawerHeight, Math.max(1, height - (headerHeight + 2)))
     : 0;
@@ -214,6 +219,10 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
     pinTicker(symbol, { floating: true, paneType: TICKER_RESEARCH_PANE_ID });
   }, [pinTicker]);
 
+  const toggleViewMode = useCallback(() => {
+    setViewMode((current) => current === "table" ? "grid" : "table");
+  }, [setViewMode]);
+
   const handleRowActivate = useCallback((ticker: TickerRecord) => {
     flushCursorSymbol(ticker.metadata.ticker);
     openTickerFloating(ticker.metadata.ticker);
@@ -245,6 +254,13 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
       return true;
     }
 
+    if (key === "s") {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+      toggleViewMode();
+      return true;
+    }
+
     return false;
   }, [
     cashDrawerExpanded,
@@ -254,6 +270,7 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
     setCashDrawerExpanded,
     showCashDrawer,
     sortedTickers,
+    toggleViewMode,
   ]);
 
   useEffect(() => {
@@ -281,12 +298,18 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
     }
   }, [cursorSymbol, setCursorSymbol, sortedTickers]);
 
+  const effectiveStreamWindow = useMemo(() => (
+    viewMode === "grid"
+      ? { start: 0, end: Math.min(sortedTickers.length, 96) }
+      : streamWindow
+  ), [sortedTickers.length, streamWindow, viewMode]);
+
   usePortfolioPaneStreaming({
     appActive,
     focused,
     sortedTickers,
     cursorSymbol,
-    streamWindow,
+    streamWindow: effectiveStreamWindow,
     isPortfolioTab,
     financialsMap,
     visibleWarmupRequirements,
@@ -341,7 +364,7 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
   }, [activeCollectionId, config, currentPortfolio]);
   const showQuickAdd = !!(activeCollectionId && activeCollectionEntry && quickAddCollectionKind);
   const quickAddHeight = showQuickAdd ? 1 : 0;
-  const tableHeight = Math.max(1, height - headerHeight - drawerHeight - quickAddHeight);
+  const contentHeight = Math.max(1, height - headerHeight - drawerHeight - quickAddHeight);
   const quickAddRow = activeCollectionId && activeCollectionEntry && quickAddCollectionKind ? (
     <QuickAddTickerInput
       collectionId={activeCollectionId}
@@ -357,6 +380,23 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
   return (
     <Box flexDirection="column" width={width} height={height}>
       <Box flexDirection="column" height={headerHeight}>
+        <Box flexDirection="row" height={1}>
+          <Box flexShrink={1} overflow="hidden">
+            <Tabs
+              tabs={[
+                { label: "Table", value: "table" },
+                { label: "Grid", value: "grid" },
+              ]}
+              activeValue={viewMode}
+              onSelect={(value) => setViewMode(value as PortfolioViewMode)}
+              compact
+              variant="bare"
+              focused={focused && !quickAddFocused}
+              keyboardNavigation={false}
+            />
+          </Box>
+        </Box>
+
         {showCollectionTabs && (
           <Box flexDirection="row" height={1}>
             <Box flexShrink={1} overflow="hidden">
@@ -372,25 +412,41 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
         )}
       </Box>
 
-      <PortfolioTickerTable
-        columns={columns}
-        focused={focused && !quickAddFocused}
-        sortColumnId={activeSort.columnId}
-        sortDirection={activeSort.direction}
-        onHeaderClick={handleHeaderClick}
-        sortedTickers={sortedTickers}
-        cursorSymbol={cursorSymbol}
-        setCursorSymbol={setCursorSymbol}
-        financialsMap={financialsMap}
-        columnContext={columnContext}
-        flashSymbols={flashSymbols}
-        onRootKeyDown={handleTableKeyDown}
-        onVisibleRangeChange={handleVisibleRangeChange}
-        visibleRangeBuffer={3}
-        resetScrollKey={activeCollectionId}
-        onRowActivate={handleRowActivate}
-        rootHeight={tableHeight}
-      />
+      {viewMode === "table" ? (
+        <PortfolioTickerTable
+          columns={columns}
+          focused={focused && !quickAddFocused}
+          sortColumnId={activeSort.columnId}
+          sortDirection={activeSort.direction}
+          onHeaderClick={handleHeaderClick}
+          sortedTickers={sortedTickers}
+          cursorSymbol={cursorSymbol}
+          setCursorSymbol={setCursorSymbol}
+          financialsMap={financialsMap}
+          columnContext={columnContext}
+          flashSymbols={flashSymbols}
+          onRootKeyDown={handleTableKeyDown}
+          onVisibleRangeChange={handleVisibleRangeChange}
+          visibleRangeBuffer={3}
+          resetScrollKey={activeCollectionId}
+          onRowActivate={handleRowActivate}
+          rootHeight={contentHeight}
+        />
+      ) : (
+        <PortfolioGrid
+          sortedTickers={sortedTickers}
+          financialsMap={financialsMap}
+          columnContext={columnContext}
+          isPortfolioTab={isPortfolioTab}
+          cursorSymbol={cursorSymbol}
+          setCursorSymbol={(symbol) => setCursorSymbol(symbol)}
+          onRowActivate={handleRowActivate}
+          onToggleViewMode={toggleViewMode}
+          focused={focused && !quickAddFocused}
+          width={width}
+          height={contentHeight}
+        />
+      )}
 
       {quickAddRow}
 

package/src/plugins/ibkr/gateway/service/index.test.ts

@@ -1,4 +1,7 @@
 import { describe, expect, test } from "bun:test";
+import { mkdtempSync, readFileSync, rmSync } from "fs";
+import { tmpdir } from "os";
+import { join } from "path";
 import { BarSizeSetting, ConnectionState, SecType, type ContractDetails } from "@stoqey/ib";
 import { Subject, of } from "rxjs";
 import {
@@ -246,6 +249,25 @@ test("remote gateway snapshots are side-effect-free", async () => {
   }
 });
 
+test("native gateway loader bundles without a runtime ./native specifier", async () => {
+  const outdir = mkdtempSync(join(tmpdir(), "gloomberb-ibkr-service-"));
+  try {
+    const result = await Bun.build({
+      entrypoints: [join(import.meta.dir, "index.ts")],
+      outdir,
+      target: "bun",
+    });
+
+    expect(result.success).toBe(true);
+    const entry = readFileSync(join(outdir, "index.js"), "utf8");
+    expect(entry).toContain("src/plugins/ibkr/gateway/service/native.ts");
+    expect(entry).not.toContain('"./native"');
+    expect(entry).not.toContain("'./native'");
+  } finally {
+    rmSync(outdir, { recursive: true, force: true });
+  }
+});
+
 describe("tick-by-tick quote updates", () => {
   const contract = {
     symbol: "AAPL",

package/src/plugins/ibkr/gateway/service/index.ts

@@ -17,18 +17,18 @@ import type {
   IbkrSnapshot,
   ResolvedIbkrGatewayConnection,
 } from "../types";
+import {
+  loadNativeGatewayModule as loadDefaultNativeGatewayModule,
+  type NativeGatewayModule,
+} from "./native-loader";
 
 export type {
   IbkrGatewayConfig,
   ResolvedIbkrGatewayConnection,
 } from "../types";
 
-type NativeGatewayService = any;
 type NativeGatewayManager = any;
-type NativeGatewayModule = {
-  ibkrGatewayManager: NativeGatewayManager;
-  setResolvedIbkrGatewayListener(listener: ResolvedGatewayListener | null): void;
-};
+type NativeGatewayService = any;
 type Listener = () => void;
 type ResolvedGatewayListener = (
   instanceId: string | undefined,
@@ -47,9 +47,6 @@ let loadedNativeGatewayModule: NativeGatewayModule | null = null;
 let nativeGatewayModulePromise: Promise<NativeGatewayModule> | null = null;
 let nativeGatewayManager: NativeGatewayManager | null = null;
 let nativeGatewayModuleLoader: () => Promise<NativeGatewayModule>;
-const importNativeGatewayModule = new Function("specifier", "return import(specifier)") as (
-  specifier: string,
-) => Promise<NativeGatewayModule>;
 
 const snapshots = new Map<string, IbkrSnapshot>();
 const listeners = new Map<string, Set<Listener>>();
@@ -60,7 +57,7 @@ function getSnapshotEntry(instanceId?: string): IbkrSnapshot {
 }
 
 function defaultNativeGatewayModuleLoader(): Promise<NativeGatewayModule> {
-  return importNativeGatewayModule("./native");
+  return loadDefaultNativeGatewayModule();
 }
 
 nativeGatewayModuleLoader = defaultNativeGatewayModuleLoader;

package/src/plugins/ibkr/gateway/service/native-loader.ts

@@ -0,0 +1,12 @@
+import type { ResolvedIbkrGatewayConnection } from "../types";
+
+export type NativeGatewayModule = {
+  ibkrGatewayManager: any;
+  setResolvedIbkrGatewayListener(
+    listener: ((instanceId: string | undefined, connection: ResolvedIbkrGatewayConnection) => void | Promise<void>) | null,
+  ): void;
+};
+
+export function loadNativeGatewayModule(): Promise<NativeGatewayModule> {
+  return import("./native");
+}

package/src/remote/app-host.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useMemo } from "react";
+import type { Dispatch } from "react";
+import type { PluginRegistry } from "../plugins/registry";
+import type { AppAction, AppState } from "../state/app/context";
+import type { DesktopWindowBridge } from "../types/desktop-window";
+import { createAppRemoteController } from "./controller";
+import { useRemoteUiRegistry } from "./semantic-tree";
+import type { RemoteControlRequest, RemoteControlResponse } from "./types";
+
+export type RemoteControlHandler = (request: RemoteControlRequest) => Promise<RemoteControlResponse>;
+
+export interface RemoteControlAdapter {
+  startServer?(options: { dataDir: string; handle: RemoteControlHandler }): void | (() => void | Promise<void>);
+  registerHandler?(handler: RemoteControlHandler | null): void | (() => void);
+}
+
+interface RemoteControlHostProps {
+  adapter?: RemoteControlAdapter;
+  dispatch: Dispatch<AppAction>;
+  getState: () => AppState;
+  pluginRegistry: PluginRegistry;
+  desktopWindowBridge?: DesktopWindowBridge;
+}
+
+export function RemoteControlHost({
+  adapter,
+  dispatch,
+  getState,
+  pluginRegistry,
+  desktopWindowBridge,
+}: RemoteControlHostProps) {
+  const uiRegistry = useRemoteUiRegistry();
+  const controller = useMemo(() => createAppRemoteController({
+    dispatch,
+    getState,
+    pluginRegistry,
+    uiRegistry,
+    desktopWindowBridge,
+    afterMutation: async () => {
+      await Promise.resolve();
+      await new Promise((resolve) => {
+        let settled = false;
+        const finish = () => {
+          if (settled) return;
+          settled = true;
+          resolve(undefined);
+        };
+        if (typeof requestAnimationFrame === "function") {
+          requestAnimationFrame(finish);
+        }
+        setTimeout(finish, 50);
+      });
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    },
+  }), [desktopWindowBridge, dispatch, getState, pluginRegistry, uiRegistry]);
+  const dataDir = getState().config.dataDir;
+
+  useEffect(() => {
+    if (!adapter?.startServer) return;
+    const cleanup = adapter.startServer({ dataDir, handle: controller.handle });
+    if (!cleanup) return;
+    return () => {
+      void cleanup();
+    };
+  }, [adapter, controller, dataDir]);
+
+  useEffect(() => {
+    if (!adapter?.registerHandler) return;
+    const cleanup = adapter.registerHandler(controller.handle);
+    if (!cleanup) return;
+    return () => {
+      cleanup();
+    };
+  }, [adapter, controller]);
+
+  return null;
+}

package/src/remote/client.ts

@@ -0,0 +1,34 @@
+import type { RemoteAppKind, RemoteControlRequest, RemoteControlResponse } from "./types";
+import { readRemoteEndpoint } from "./endpoint";
+
+export interface SendRemoteControlRequestOptions {
+  dataDir: string;
+  appKind?: RemoteAppKind;
+}
+
+export async function sendRemoteControlRequest(
+  request: RemoteControlRequest,
+  options: SendRemoteControlRequestOptions,
+): Promise<RemoteControlResponse> {
+  const endpoint = await readRemoteEndpoint(options.dataDir, options.appKind);
+  const response = await fetch(`http://127.0.0.1:${endpoint.port}/rpc`, {
+    method: "POST",
+    headers: {
+      authorization: `Bearer ${endpoint.token}`,
+      "content-type": "application/json",
+    },
+    body: JSON.stringify(request),
+  });
+  const payload = await response.json() as RemoteControlResponse;
+  if (!response.ok && payload.ok !== false) {
+    return {
+      ok: false,
+      error: {
+        code: "remote_http_error",
+        message: `Remote control request failed with HTTP ${response.status}.`,
+        details: payload,
+      },
+    };
+  }
+  return payload;
+}