gloomberb 0.10.4 → 0.11.0

package/src/renderers/electrobun/view/app-services.ts

@@ -11,6 +11,9 @@ import { getRendererBuiltinPlugins } from "../../../plugins/catalog-ui";
 import { createRemoteAssetDataClient } from "./remote/asset-data-client";
 import { RemotePersistence } from "./remote/persistence";
 import { RemoteTickerRepository } from "./remote/ticker-repository";
+import { connectBackendConnectionHealth } from "./remote/connection-health-backend";
+import { backendRequest, getElectrobunBackendInitSnapshot } from "./backend-rpc";
+import { createCapabilityInvoker } from "./remote/capability-invoker";
 
 const servicesLog = debugLog.createLogger("services");
 
@@ -22,11 +25,20 @@ export function createElectrobunAppServices({ config }: AppServicesFactoryOption
   const tickerRepository = measurePerf("startup.services.ticker-repository", () => new RemoteTickerRepository());
   const dataProvider = measurePerf("startup.services.data-provider", () => createRemoteAssetDataClient());
   const marketData = new MarketDataCoordinator(dataProvider);
+  const invokeCapability = createCapabilityInvoker({
+    request: backendRequest,
+    shouldApplyDeadline: () => false,
+    timeoutMs: 0,
+  });
   const pluginRegistry = new PluginRegistry(dataProvider, tickerRepository, persistence, {
     enableCapabilityHandlers: false,
     wrapBrokerAdapter: (broker) => createRemoteBrokerAdapter(broker),
+    remoteCapabilityManifests: () => getElectrobunBackendInitSnapshot()?.capabilityManifests ?? [],
+    remoteCapabilityInvoke: (capabilityId, operationId, payload, options) => (
+      invokeCapability(capabilityId, operationId, payload, options)
+    ),
   });
-  const newsService = new NewsService();
+  const newsService = new NewsService({ connectionHealth: pluginRegistry.connectionHealth });
 
   pluginRegistry.getConfigFn = () => config;
   pluginRegistry.getLayoutFn = () => config.layout;
@@ -55,6 +67,14 @@ export function createElectrobunAppServices({ config }: AppServicesFactoryOption
   measurePerf("startup.services.news-start", () => {
     newsService.start();
   });
+  let destroyed = false;
+  let disposeRemoteConnectionHealth: (() => void) | null = null;
+  const ready = Promise.all(pluginReadyPromises).then(() => {
+    if (destroyed) return;
+    const dispose = connectBackendConnectionHealth(pluginRegistry.connectionHealth);
+    if (destroyed) dispose();
+    else disposeRemoteConnectionHealth = dispose;
+  });
   servicesLog.info("create desktop web services complete", { pluginCount: plugins.length });
 
   return {
@@ -63,8 +83,11 @@ export function createElectrobunAppServices({ config }: AppServicesFactoryOption
     dataProvider,
     marketData,
     pluginRegistry,
-    ready: Promise.all(pluginReadyPromises).then(() => {}),
+    ready,
     destroy() {
+      destroyed = true;
+      disposeRemoteConnectionHealth?.();
+      disposeRemoteConnectionHealth = null;
       setSharedMarketDataCoordinator(null);
       setSharedNewsService(null);
       newsService.stop();

package/src/renderers/electrobun/view/build-assets.ts

@@ -24,6 +24,8 @@ const COMMON_ALIAS_RULES: AliasRule[] = [
   ["native/surface/manager", "native-stubs/chart/surface-manager.ts"],
   ["native/surface/sync", "native-stubs/chart/surface-sync.ts"],
   ["./native-loader", "plugins/ibkr/gateway/service/index.ts", "native-stubs/ibkr-native-loader.ts"],
+  ["./native-loader", "plugins/broker-sync/robinhood.ts", "native-stubs/broker-sync-native-loader.ts"],
+  ["./native-loader", "plugins/broker-sync/simplefin.ts", "native-stubs/broker-sync-native-loader.ts"],
 ];
 
 export function electrobunViewPath(...parts: string[]): string {
@@ -55,6 +57,9 @@ async function buildElectrobunViewBundle({
     minify: true,
     define: {
       "process.env.NODE_ENV": "\"production\"",
+      // The webview has no `process`, so the cloud endpoint override the terminal
+      // already reads from the environment is baked in at build time.
+      __GLOOMBERB_API_URL__: JSON.stringify(process.env.GLOOMBERB_API_URL ?? ""),
     },
     plugins: [
       {

package/src/renderers/electrobun/view/cli-pane-shot-entry.tsx

@@ -1,7 +1,8 @@
 /** @jsxImportSource react */
 import { createRoot } from "react-dom/client";
-import { useEffect, type ComponentType, type ReactNode } from "react";
+import { useEffect, type ReactNode } from "react";
 import { AppProvider, useAppDispatch } from "../../../state/app/context";
+import { createCliPaneShotConnectionHealth } from "./cli-pane-shot-health";
 import { MarketDataCoordinator, setSharedMarketDataCoordinator } from "../../../market-data/coordinator";
 import { instrumentFromTicker } from "../../../market-data/request-types";
 import { UiHostProvider, type RendererHost } from "../../../ui/host";
@@ -11,8 +12,7 @@ import { webNativeRenderer } from "./native-renderer";
 import { WebToastHostProvider } from "./toast-host";
 import { webUiHost } from "./ui-host";
 import { getLoadablePlugins } from "../../../plugins/catalog";
-import { setSharedMarketDataForTests } from "../../../plugins/registry";
-import { PluginRenderProvider, type PluginRuntimeAccess } from "../../../plugins/runtime";
+import { PluginRegistry, setSharedMarketDataForTests } from "../../../plugins/registry";
 import {
   RemoteUiRegistryProvider,
   useRemoteUiRegistry,
@@ -29,6 +29,11 @@ import {
 } from "../../../time-series/resolution";
 import type { TimeRange } from "../../../components/chart/core/types";
 import type { AppConfig } from "../../../types/config";
+import type {
+  AppPersistencePort,
+  AppTickerRepositoryPort,
+} from "../../../core/app-service-ports";
+import type { CachedResourceRecord, ResourceCacheKey, SetResourceOptions } from "../../../data/resource-store";
 import type { CachedFinancialsTarget, DataProvider, QuoteSubscriptionTarget } from "../../../types/data-provider";
 import type { OptionsChain, TickerFinancials } from "../../../types/financials";
 import type { TickerRecord } from "../../../types/ticker";
@@ -37,6 +42,8 @@ import type { PaneDef } from "../../../types/plugin";
 import { canonicalTickerKey, parsePublicTickerKey } from "../../../utils/exchanges";
 import { hydrateFredSeries, type FredSeriesCacheEntry } from "../../../data/fred-series";
 import { clipPriceHistoryToRange } from "../../../time-series/history-window";
+import type { ResolvedSeries } from "../../../time-series/types";
+import { chartSeriesSourceKey } from "../../../capabilities";
 
 interface CliPaneShotPayload {
   config: AppConfig;
@@ -47,6 +54,7 @@ interface CliPaneShotPayload {
   financials: Array<[string, TickerFinancials]>;
   optionsChains: Array<[string, OptionsChain]>;
   fredSeries: Array<[string, FredSeriesCacheEntry]>;
+  capabilitySeries: Array<[string, ResolvedSeries]>;
   paneState: Record<string, PaneRuntimeState>;
 }
 
@@ -64,7 +72,11 @@ declare global {
 // frames can capture the shell before those requests register, leaving a
 // loading chart or stale performance table in an otherwise valid PNG.
 const SHOT_READY_STABLE_FRAMES = 10;
-const SHOT_LOADING_TEXT_PATTERN = /\b(Loading|Rendering pane)\b/i;
+// Loading is detected from an explicit marker rendered by Spinner and
+// PaneStatusBody. Matching on body text instead made any pane whose real
+// content contains the word "loading" (a changelog release note, a news
+// headline) wait forever and time out.
+const SHOT_LOADING_SELECTOR = "[data-gloom-status=\"loading\"]";
 const TRACKED_RESPONSE_METHODS = new Set<PropertyKey>([
   "arrayBuffer",
   "blob",
@@ -76,6 +88,7 @@ const TRACKED_RESPONSE_METHODS = new Set<PropertyKey>([
 let pendingShotWork = 0;
 let didInstallShotFetchTracker = false;
 let shotDataProvider: DataProvider | null = null;
+let shotRegistry: PluginRegistry | null = null;
 const SHOT_CHART_RESOLUTION_SUPPORT = normalizeChartResolutionSupport(
   TIME_RANGE_ORDER.map((maxRange) => ({
     resolution: getPresetResolution(maxRange),
@@ -133,7 +146,23 @@ function resolveShotWork<T>(value: T): Promise<T> {
 }
 
 function isShotLoadingTextVisible(): boolean {
-  return SHOT_LOADING_TEXT_PATTERN.test(document.body.textContent ?? "");
+  return document.querySelector(SHOT_LOADING_SELECTOR) !== null;
+}
+
+/**
+ * The payload crosses into the webview as JSON, so every `Date` arrives as a
+ * string while the types still claim `Date`. Anything calling `date.getTime()`
+ * then throws, which is what made the valuation graph preset fail while the
+ * price presets passed.
+ */
+function revivePayloadDates(payload: CliPaneShotPayload): void {
+  for (const [, data] of payload.financials) {
+    const history = data.priceHistory;
+    if (!Array.isArray(history)) continue;
+    for (const point of history) {
+      if (!(point.date instanceof Date)) point.date = new Date(point.date as unknown as string);
+    }
+  }
 }
 
 function hasUnresolvedChartData(): boolean {
@@ -248,8 +277,17 @@ function createShotDataProvider(payload: CliPaneShotPayload): DataProvider {
           ?? financials.get(normalizeSymbol(target.symbol)))?.quote ?? null,
       })));
     },
-    getExchangeRate() {
-      return resolveShotWork(1);
+    getExchangeRate(fromCurrency: string) {
+      // Returning 1 for every currency used to render the FX matrix as a grid
+      // of 1.0000, which reads as real data. Only the identity conversion is
+      // known offline; anything else has to fail so the pane reports it as
+      // unavailable instead of inventing a parity rate.
+      if (normalizeSymbol(fromCurrency) === normalizeSymbol(payload.config.baseCurrency)) {
+        return resolveShotWork(1);
+      }
+      return trackShotWork(Promise.reject(
+        new Error(`No screenshot exchange rate available for ${fromCurrency}.`),
+      ));
     },
     getOptionsChain(ticker, exchange) {
       return trackShotWork(Promise.resolve().then(() => {
@@ -313,58 +351,147 @@ function installShotMarketData(payload: CliPaneShotPayload): void {
   setSharedMarketDataCoordinator(coordinator);
 }
 
-function createRuntime(payload: CliPaneShotPayload): PluginRuntimeAccess {
-  const resumeState = new Map<string, unknown>();
-  function getResumeState<T = unknown>(_pluginId: string, key: string): T | null {
-    return (resumeState.get(key) as T | undefined) ?? null;
-  }
-  function getConfigState<T = unknown>(pluginId: string, key: string): T | null {
-    return (payload.config.pluginConfig[pluginId]?.[key] as T | undefined) ?? null;
-  }
+/**
+ * The screenshot renderer has no database and no Electrobun backend. Plugins
+ * still need somewhere to read and write state while the render runs, so state
+ * lives in memory for the lifetime of the page and the resource cache always
+ * reports a miss instead of pretending something was persisted.
+ */
+function createShotPersistence(): AppPersistencePort {
+  const pluginState = new Map<string, { value: unknown; schemaVersion: number; updatedAt: number }>();
+  const stateKey = (pluginId: string, key: string) => `${pluginId}:${key}`;
   return {
-    getMarketData: () => shotDataProvider,
-    getCapability: () => null,
-    getBrokerAdapter: () => null,
-    connectBrokerInstance: async () => {},
-    updateBrokerInstance: async () => {},
-    syncBrokerInstance: async () => {},
-    removeBrokerInstance: async () => {},
-    pinTicker: () => {},
-    navigateTicker: () => {},
-    selectTicker: () => {},
-    switchTab: () => {},
-    switchPanel: () => {},
-    openCommandBar: () => {},
-    showPane: () => {},
-    createPaneFromTemplate: () => {},
-    hidePane: () => {},
-    focusPane: () => {},
-    openPaneSettings: () => {},
-    openPluginCommandWorkflow: () => {},
-    notify: () => {},
-    subscribeResumeState: () => () => {},
-    getResumeState,
-    setResumeState: (_pluginId, key, value) => {
-      resumeState.set(key, value);
+    pluginState: {
+      get: <T,>(pluginId: string, key: string, schemaVersion = 1) => {
+        const record = pluginState.get(stateKey(pluginId, key));
+        if (!record || record.schemaVersion !== schemaVersion) return null;
+        return { value: record.value as T, schemaVersion: record.schemaVersion, updatedAt: record.updatedAt };
+      },
+      set: (pluginId: string, key: string, value: unknown, schemaVersion = 1) => {
+        pluginState.set(stateKey(pluginId, key), { value, schemaVersion, updatedAt: Date.now() });
+      },
+      delete: (pluginId: string, key: string) => {
+        pluginState.delete(stateKey(pluginId, key));
+      },
+      keys: (pluginId: string) => [...pluginState.keys()]
+        .filter((entry) => entry.startsWith(`${pluginId}:`))
+        .map((entry) => entry.slice(pluginId.length + 1))
+        .sort(),
+      clear: (pluginId: string) => {
+        for (const entry of [...pluginState.keys()]) {
+          if (entry.startsWith(`${pluginId}:`)) pluginState.delete(entry);
+        }
+      },
     },
-    deleteResumeState: (_pluginId, key) => {
-      resumeState.delete(key);
+    resources: {
+      get: () => null,
+      list: () => [],
+      set: <T,>(key: ResourceCacheKey, value: T, options: SetResourceOptions): CachedResourceRecord<T> => {
+        const fetchedAt = options.fetchedAt ?? Date.now();
+        return {
+          namespace: key.namespace,
+          kind: key.kind,
+          entityKey: key.entityKey,
+          variantKey: key.variantKey ?? "",
+          sourceKey: key.sourceKey ?? "",
+          value,
+          fetchedAt,
+          staleAt: fetchedAt + options.cachePolicy.staleMs,
+          expiresAt: fetchedAt + options.cachePolicy.expireMs,
+          schemaVersion: options.schemaVersion ?? 1,
+          provenance: options.provenance ?? null,
+          lastAccessedAt: fetchedAt,
+          sizeBytes: 0,
+        };
+      },
+      delete: () => {},
     },
-    getConfigState,
-    setConfigState: async () => {},
-    setConfigStates: async () => {},
-    deleteConfigState: async () => {},
-    getConfigStateKeys: (pluginId) => Object.keys(payload.config.pluginConfig[pluginId] ?? {}),
+    sessions: {
+      get: () => null,
+      set: () => {},
+      delete: () => {},
+    },
+    close() {},
   };
 }
 
-function findPaneDef(paneId: string): { pluginId: string; pane: PaneDef } | null {
+function createShotTickerRepository(tickers: TickerRecord[]): AppTickerRepositoryPort {
+  const bySymbol = new Map(tickers.map((ticker) => [ticker.metadata.ticker, ticker]));
+  return {
+    loadAllTickers: async () => [...bySymbol.values()],
+    loadTicker: async (symbol) => bySymbol.get(normalizeSymbol(symbol)) ?? bySymbol.get(symbol) ?? null,
+    saveTicker: async () => {},
+    createTicker: async (metadata) => ({ metadata }),
+    deleteTicker: async () => {},
+  };
+}
+
+/**
+ * Screenshots render the same tree the desktop app renders, so they need the
+ * same registry: plugin-contributed tabs, slots, shortcuts, context menus and
+ * setup-registered panes all resolve through it. Only the capability surface is
+ * replaced, because the offline render can answer chart series from the payload
+ * but cannot reach a backend.
+ */
+async function installShotPluginRegistry(payload: CliPaneShotPayload): Promise<PluginRegistry> {
+  const capabilitySeries = new Map(payload.capabilitySeries ?? []);
+  const capabilityIds = [...new Set(payload.config.layout.instances.flatMap((instance) => {
+    const chartSpec = instance.settings?.chartSpec;
+    if (!chartSpec || typeof chartSpec !== "object" || !Array.isArray((chartSpec as any).series)) return [];
+    return (chartSpec as any).series.flatMap((series: any) => (
+      series?.source?.kind === "capability" && typeof series.source.capabilityId === "string"
+        ? [series.source.capabilityId]
+        : []
+    ));
+  }))];
+
+  const registry = new PluginRegistry(
+    shotDataProvider!,
+    createShotTickerRepository(payload.tickers),
+    createShotPersistence(),
+    {
+      enableCapabilityHandlers: false,
+      connectionHealth: createCliPaneShotConnectionHealth(),
+      remoteCapabilityManifests: () => capabilityIds.map((id) => ({
+        id,
+        kind: "chart-series",
+        name: id,
+        operations: [{ id: "resolve", kind: "query", rendererSafe: true }],
+      })),
+      remoteCapabilityInvoke: async <T,>(capabilityId: string, operationId: string, input: unknown) => {
+        if (operationId !== "resolve" || !input || typeof input !== "object") {
+          throw new Error(`Screenshot capability operation ${capabilityId}.${operationId} is unavailable.`);
+        }
+        const request = input as { seriesId?: string };
+        const value = capabilitySeries.get(chartSeriesSourceKey({
+          kind: "capability",
+          capabilityId,
+          seriesId: request.seriesId ?? "",
+        }));
+        if (!value) throw new Error(`No screenshot chart series data is available for ${request.seriesId ?? capabilityId}.`);
+        return value as T;
+      },
+    },
+  );
+  registry.getConfigFn = () => payload.config;
+  registry.getLayoutFn = () => payload.config.layout;
+  registry.getPaneRuntimeStateFn = (paneId) => payload.paneState[paneId] ?? null;
+
   for (const plugin of getLoadablePlugins()) {
-    for (const pane of plugin.panes ?? []) {
-      if (pane.id === paneId) return { pluginId: plugin.id, pane };
+    try {
+      await registry.register(plugin);
+    } catch (error) {
+      // One failing plugin must not cost the screenshot every other pane.
+      console.error(`[shot] Plugin ${plugin.id} failed to register:`, error);
     }
   }
-  return null;
+  shotRegistry = registry;
+  return registry;
+}
+
+function findPaneDef(paneId: string): { pluginId: string; pane: PaneDef } | null {
+  const pane = shotRegistry?.panes.get(paneId);
+  return pane ? { pluginId: shotRegistry?.getPanePluginId(paneId) ?? "", pane } : null;
 }
 
 function HydratePayload({
@@ -413,16 +540,8 @@ function ShotPane({ payload }: { payload: CliPaneShotPayload }) {
   const found = findPaneDef(instance.paneId);
   if (!found) throw new Error(`Pane ${instance.paneId} is not registered in the desktop renderer.`);
 
-  const runtime = createRuntime(payload);
-  const PaneComponent = found.pane.component as ComponentType<any>;
-  const pane: PaneDef = {
-    ...found.pane,
-    component: (props) => (
-      <PluginRenderProvider pluginId={found.pluginId} runtime={runtime}>
-        <PaneComponent {...props} />
-      </PluginRenderProvider>
-    ),
-  };
+  // The registry already bound its runtime to this pane component.
+  const pane = found.pane;
   const titleState = {
     config: payload.config,
     paneState: payload.paneState,
@@ -462,12 +581,16 @@ function ShotPane({ payload }: { payload: CliPaneShotPayload }) {
   );
 }
 
-function render() {
+async function render() {
   const payload = window.__GLOOM_CLI_SHOT_PAYLOAD__;
   if (!payload) throw new Error("Missing CLI pane screenshot payload.");
+  revivePayloadDates(payload);
   installShotFetchTracker();
   hydrateFredSeries(payload.fredSeries ?? []);
   installShotMarketData(payload);
+  // Panes contributed from an async setup() only exist once every plugin has
+  // finished registering, so the tree cannot mount before that resolves.
+  await installShotPluginRegistry(payload);
 
   const rootElement = document.getElementById("root");
   if (!rootElement) throw new Error("Missing root element.");
@@ -498,9 +621,7 @@ function render() {
   );
 }
 
-try {
-  render();
-} catch (error) {
+render().catch((error) => {
   window.__GLOOM_CLI_SHOT_ERROR__ = error instanceof Error ? error.stack ?? error.message : String(error);
   throw error;
-}
+});

package/src/renderers/electrobun/view/cli-pane-shot-health.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, test } from "bun:test";
+import { createCliPaneShotConnectionHealth } from "./cli-pane-shot-health";
+
+describe("CLI pane shot connection health", () => {
+  test("seeds stable request, socket, and error rows", () => {
+    const sources = createCliPaneShotConnectionHealth(1_000).getSnapshot().sources;
+
+    expect(sources.map((source) => source.id)).toEqual([
+      "gloom-cloud-http",
+      "gloom-cloud-socket",
+      "gloom-cloud-fred",
+      "asset-data.yahoo",
+    ]);
+    expect(sources.map((source) => ({
+      status: source.status,
+      operation: source.lastOperation,
+      latency: source.lastLatencyMs,
+    }))).toEqual([
+      { status: "connected", operation: "GET /market/quotes", latency: 84 },
+      { status: "connected", operation: null, latency: null },
+      { status: "idle", operation: null, latency: null },
+      { status: "error", operation: "getPriceHistory", latency: 240 },
+    ]);
+  });
+});

package/src/renderers/electrobun/view/cli-pane-shot-health.ts

@@ -0,0 +1,31 @@
+import {
+  ConnectionHealthRegistry,
+  GLOOM_CLOUD_HTTP_CONNECTION_ID,
+  GLOOM_CLOUD_SOCKET_CONNECTION_ID,
+  registerGloomCloudConnectionSources,
+} from "../../../core/connection-health";
+
+export function createCliPaneShotConnectionHealth(now = Date.now()): ConnectionHealthRegistry {
+  const health = new ConnectionHealthRegistry({ now: () => now });
+  registerGloomCloudConnectionSources(health);
+  health.reportRequest(GLOOM_CLOUD_HTTP_CONNECTION_ID, {
+    operation: "GET /market/quotes",
+    success: true,
+    latencyMs: 84,
+  });
+  health.reportSocketState(GLOOM_CLOUD_SOCKET_CONNECTION_ID, "open", "api.gloom.sh/cloud/ws");
+  health.registerSource({
+    id: "asset-data.yahoo",
+    name: "Yahoo Finance",
+    kind: "asset-data",
+    ownerId: "market-data",
+    priority: 20,
+  });
+  health.reportRequest("asset-data.yahoo", {
+    operation: "getPriceHistory",
+    success: false,
+    latencyMs: 240,
+    error: "Rate limited",
+  });
+  return health;
+}

package/src/renderers/electrobun/view/data-table/index.tsx

@@ -199,16 +199,12 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
     scheduleVisibleRangeMeasure();
   }, [items.length, scheduleVisibleRangeMeasure, visibleRangeKey]);
 
+  // Rows sit on a whole-cell grid, so the offset is computed in rows and only
+  // then converted to pixels. Letting the virtualizer scroll by pixels landed
+  // mid-row and clipped the first and last visible rows into slivers.
   useEffect(() => {
     if (scrollToIndex == null || items.length === 0) return;
     const targetIndex = Math.max(0, Math.min(scrollToIndex, items.length - 1));
-    if (virtualize) {
-      rowVirtualizer.scrollToIndex(targetIndex, {
-        align: scrollToIndexAlign === "center" ? "center" : "auto",
-      });
-      scheduleVisibleRangeMeasure();
-      return;
-    }
     const element = bodyElementRef.current;
     if (!element) return;
     const viewportRows = Math.max(1, Math.floor(element.clientHeight / WEB_CELL_HEIGHT) - 1);
@@ -227,12 +223,10 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
     scheduleVisibleRangeMeasure();
   }, [
     items.length,
-    rowVirtualizer,
     scrollToIndex,
     scrollToIndexAlign,
     scrollToIndexVersion,
     scheduleVisibleRangeMeasure,
-    virtualize,
   ]);
 
   useScrollBoxHandle(
@@ -276,6 +270,9 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
     overflowX: horizontalScrollEnabled ? "auto" : "hidden",
     overflowY: "auto",
     backgroundColor: CSS_BG,
+    // Trim the viewport to whole rows so the bottom row is never a sliver.
+    // Browsers without CSS round() drop this and keep the previous behavior.
+    maxHeight: "round(down, 100%, var(--cell-h))",
   };
 
   return (
@@ -333,11 +330,13 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
                   lineHeight: "var(--cell-h)",
                 }}
               >
-                <div style={cellTextStyle(CSS_TEXT_BRIGHT, TextAttributes.BOLD)}>
+                {/* cellTextStyle is inline-block for real cells, so the title and
+                    hint would share one line and read as a single run-on string. */}
+                <div style={{ ...cellTextStyle(CSS_TEXT_BRIGHT, TextAttributes.BOLD), display: "block" }}>
                   {emptyStateTitle}
                 </div>
                 {emptyStateHint ? (
-                  <div style={cellTextStyle(CSS_TEXT_DIM, TextAttributes.NONE)}>
+                  <div style={{ ...cellTextStyle(CSS_TEXT_DIM, TextAttributes.NONE), display: "block" }}>
                     {emptyStateHint}
                   </div>
                 ) : null}

package/src/renderers/electrobun/view/data-table/row.tsx

@@ -208,10 +208,12 @@ function WebDataTableRowInner<
         style={{
           ...baseRowStyle,
           backgroundColor: sectionHeader.backgroundColor ?? CSS_BG,
+          cursor: sectionHeader.onMouseDown ? "pointer" : undefined,
         }}
         onMouseDown={(event) => {
           focusPane();
           onTableMouseDown?.(event);
+          sectionHeader.onMouseDown?.(event);
           event.preventDefault();
         }}
       >

package/src/renderers/electrobun/view/desktop/controls.test.tsx

@@ -0,0 +1,68 @@
+/** @jsxImportSource react */
+import { Window } from "happy-dom";
+
+const testWindow = new Window({ url: "http://localhost" });
+Object.assign(globalThis, {
+  IS_REACT_ACT_ENVIRONMENT: true,
+  window: testWindow,
+  document: testWindow.document,
+  navigator: testWindow.navigator,
+  KeyboardEvent: testWindow.KeyboardEvent,
+  HTMLElement: testWindow.HTMLElement,
+  Node: testWindow.Node,
+});
+
+import { expect, test } from "bun:test";
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { UiHostProvider, type RendererHost, type UiHost } from "../../../../ui";
+import { WebBox } from "../host/box";
+import { WebText } from "../host/text";
+import { WebSegmentedControl } from "./controls";
+
+const renderer: RendererHost = {
+  requestExit() {},
+  async openExternal() {},
+  async copyText() {},
+  async readText() { return ""; },
+  notify() {},
+};
+
+const ui = {
+  kind: "desktop-web",
+  capabilities: { cellWidthPx: 8, fractionalViewport: true },
+  Box: WebBox,
+  Text: WebText,
+} as unknown as UiHost;
+
+test("desktop segmented controls expose radio semantics and keyboard selection", async () => {
+  const selected: string[] = [];
+  const container = testWindow.document.createElement("div");
+  testWindow.document.body.appendChild(container);
+  const root = createRoot(container as unknown as HTMLElement);
+  await act(async () => {
+    root.render(
+      <UiHostProvider ui={ui} renderer={renderer}>
+        <WebSegmentedControl
+          options={[{ label: "Call", value: "call" }, { label: "Put", value: "put" }]}
+          value="call"
+          onChange={(value) => selected.push(value)}
+        />
+      </UiHostProvider>,
+    );
+  });
+
+  const group = container.querySelector('[role="radiogroup"]');
+  const radios = [...container.querySelectorAll('[role="radio"]')] as unknown as HTMLElement[];
+  expect(group).not.toBeNull();
+  expect(radios.map((radio) => radio.getAttribute("aria-checked"))).toEqual(["true", "false"]);
+
+  await act(async () => {
+    radios[0]!.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }));
+    radios[1]!.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+  });
+  expect(selected).toEqual(["put", "put"]);
+
+  await act(async () => root.unmount());
+  container.remove();
+});