gloomberb 0.11.2 → 0.12.0

package/src/cli/pane-functions/screenshot.test.ts

@@ -3,12 +3,15 @@ import type { RemoteUiNodeSnapshot } from "../../remote/types";
 import {
   chartSeriesEvidenceWithinRange,
   chartEvidenceMismatchesFor,
+  isPaneScreenshotUsable,
   missingActiveTabSelections,
+  resolveDesktopShotApiProxy,
   shotDataEvidenceFor,
   shotExpectedText,
   shotPriceHistoryRange,
   shotSemanticRowCount,
   shotUnavailableSymbols,
+  stripDesktopShotCredentials,
   type PaneScreenshotExpectedChartEvidence,
   type PaneScreenshotExpectedSelection,
 } from "./screenshot";
@@ -18,6 +21,79 @@ import type { ResolvedPaneFunction } from "./resolver";
 import { buildCustomChartPreset } from "../../plugins/builtin/chart-composer/presets";
 import { CHART_COMPOSER_PANE_ID } from "../../types/config";
 
+describe("pane screenshot rendered readiness", () => {
+  const rendered = {
+    rowCount: 2,
+    loadingStateDetected: false,
+    errorStateDetected: false,
+    emptyStateDetected: false,
+    complete: true,
+    semanticMismatch: false,
+    requiresStructuredDataEvidence: false,
+    hasStructuredDataEvidence: false,
+  };
+
+  test("requires rows without loading, error, or empty states", () => {
+    expect(isPaneScreenshotUsable(rendered)).toBe(true);
+    expect(isPaneScreenshotUsable({ ...rendered, rowCount: 0 })).toBe(false);
+    expect(isPaneScreenshotUsable({ ...rendered, loadingStateDetected: true })).toBe(false);
+    expect(isPaneScreenshotUsable({ ...rendered, errorStateDetected: true })).toBe(false);
+    expect(isPaneScreenshotUsable({ ...rendered, emptyStateDetected: true })).toBe(false);
+  });
+
+  test("preserves mapped capability completeness and evidence checks", () => {
+    expect(isPaneScreenshotUsable({ ...rendered, complete: false })).toBe(false);
+    expect(isPaneScreenshotUsable({ ...rendered, semanticMismatch: true })).toBe(false);
+    expect(isPaneScreenshotUsable({
+      ...rendered,
+      requiresStructuredDataEvidence: true,
+    })).toBe(false);
+    expect(isPaneScreenshotUsable({
+      ...rendered,
+      requiresStructuredDataEvidence: true,
+      hasStructuredDataEvidence: true,
+    })).toBe(true);
+  });
+});
+
+describe("pane screenshot payload credentials", () => {
+  test("keeps the restored session in the proxy and strips credential fields from page data", () => {
+    const sessionToken = "private-shot-session";
+    const proxy = resolveDesktopShotApiProxy({
+      persistence: {
+        pluginState: {
+          get: (_pluginId: string, key: string) => key === "resume:session"
+            ? { value: { sessionToken }, schemaVersion: 1, updatedAt: 1 }
+            : null,
+        },
+      },
+    } as any);
+    const payload = stripDesktopShotCredentials({
+      config: {
+        theme: "tokyo",
+        pluginConfig: {
+          service: { apiKey: "private-api-key", display: "compact" },
+        },
+        brokerInstances: [{ config: { password: "private-password", region: "US" } }],
+      },
+      paneState: {
+        pane: { pluginState: { service: { accessToken: "private-access", tab: "latest" } } },
+      },
+    });
+
+    expect(proxy.sessionToken).toBe(sessionToken);
+    expect(payload).toEqual({
+      config: {
+        theme: "tokyo",
+        pluginConfig: { service: { display: "compact" } },
+        brokerInstances: [{ config: { region: "US" } }],
+      },
+      paneState: { pane: { pluginState: { service: { tab: "latest" } } } },
+    });
+    expect(JSON.stringify(payload)).not.toContain("private-");
+  });
+});
+
 describe("pane screenshot active-state verification", () => {
   const expected: PaneScreenshotExpectedSelection[] = [
     { control: "statement", label: "Cash Flow" },

package/src/cli/pane-functions/screenshot.ts

@@ -1,12 +1,16 @@
 import { dirname, resolve } from "path";
 import { mkdir } from "fs/promises";
 import type { PaneRuntimeState } from "../../core/state/app/state";
-import { CHART_COMPOSER_PANE_ID } from "../../types/config";
+import { CHART_COMPOSER_PANE_ID, type AppConfig } from "../../types/config";
 import type { OptionsChain, PricePoint, TickerFinancials } from "../../types/financials";
 import type { TickerRecord } from "../../types/ticker";
 import { slugifyName } from "../../utils/slugify";
+import { getTheme, getThemeIds } from "../../theme/themes";
+
+const DEFAULT_SHOT_DEVICE_SCALE_FACTOR = 2;
 import {
   renderDesktopPaneScreenshot,
+  type DesktopPaneShotApiProxy,
   type DesktopPaneShotPayload,
   type DesktopPaneShotRenderResult,
 } from "../desktop-pane-shot";
@@ -39,8 +43,16 @@ import {
   getVisibleWindowForDateRange,
 } from "../../components/chart/core/date-window";
 import { parseChartSpec } from "../../plugins/builtin/chart-composer/chart-spec";
+import {
+  defaultValuationSeriesLoader,
+  requiredSeries as valuationRequiredSeries,
+} from "../../plugins/builtin/market-valuation/client";
+import type { DatedObservation } from "../../plugins/builtin/market-valuation/series";
+import { defaultStatLoader } from "../../plugins/builtin/econ-statistics/client";
+import { STATS } from "../../plugins/builtin/econ-statistics/stats";
 import { publicTickerKey } from "../../utils/exchanges";
 import { apiClient } from "../../api-client";
+import { getCloudApiBaseUrl } from "../../api-client/request";
 import type { FredSeriesCacheEntry } from "../../data/fred-series";
 import type { ResolvedSeries } from "../../time-series/types";
 import { chartSeriesSourceKey, createChartSeriesResolver } from "../../capabilities";
@@ -57,6 +69,102 @@ import {
 const DESKTOP_CELL_WIDTH_PX = 8;
 const DESKTOP_CELL_HEIGHT_PX = 18;
 const OPTIONS_PANE_ID = "options";
+const MARKET_VALUATION_PANE_ID = "market-valuation";
+const ECON_STATISTICS_PANE_ID = "econ-statistics";
+const CLOUD_PLUGIN_ID = "gloomberb-cloud";
+const CLOUD_SESSION_KEYS = ["resume:session", "session"] as const;
+const CREDENTIAL_FIELD_NAMES = new Set([
+  "accesstoken",
+  "accessurl",
+  "apikey",
+  "apisecret",
+  "authorization",
+  "cookie",
+  "credentials",
+  "oauth",
+  "passphrase",
+  "password",
+  "privatekey",
+  "refreshtoken",
+  "secret",
+  "sessiontoken",
+  "token",
+]);
+
+interface PersistedShotCloudSession {
+  sessionToken?: unknown;
+}
+
+/**
+ * The proxy receives the desktop session out of band. Keeping this separate
+ * from DesktopPaneShotPayload prevents the token from entering the page,
+ * semantic evidence, or JSON CLI output.
+ */
+function isCredentialField(key: string): boolean {
+  const normalized = key.replace(/[^a-z0-9]/gi, "").toLowerCase();
+  return CREDENTIAL_FIELD_NAMES.has(normalized)
+    || normalized.endsWith("password")
+    || normalized.endsWith("passphrase")
+    || normalized.endsWith("secret")
+    || normalized.endsWith("token")
+    || normalized.endsWith("credential")
+    || normalized.endsWith("cookie")
+    || normalized.endsWith("apikey")
+    || normalized.endsWith("accesskey")
+    || normalized.endsWith("privatekey")
+    || normalized.endsWith("authorization")
+    || normalized.endsWith("accessurl");
+}
+
+/** Removes credential-shaped object fields before data enters the page or JSON output. */
+export function stripDesktopShotCredentials<T>(value: T): T {
+  if (Array.isArray(value)) {
+    return value.map((entry) => stripDesktopShotCredentials(entry)) as T;
+  }
+  if (!value || typeof value !== "object" || value instanceof Date) return value;
+  const clean: Record<string, unknown> = {};
+  for (const [key, entry] of Object.entries(value as Record<string, unknown>)) {
+    if (isCredentialField(key)) continue;
+    clean[key] = stripDesktopShotCredentials(entry);
+  }
+  return clean as T;
+}
+
+export function resolveDesktopShotApiProxy(
+  context: Pick<MarketContext, "persistence">,
+): DesktopPaneShotApiProxy {
+  let sessionToken: string | null = null;
+  for (const key of CLOUD_SESSION_KEYS) {
+    const value = context.persistence.pluginState.get<PersistedShotCloudSession>(
+      CLOUD_PLUGIN_ID,
+      key,
+      1,
+    )?.value;
+    if (typeof value?.sessionToken === "string" && value.sessionToken.length > 0) {
+      sessionToken = value.sessionToken;
+      break;
+    }
+  }
+  return {
+    baseUrl: getCloudApiBaseUrl(),
+    sessionToken,
+  };
+}
+
+/** Same reason as the valuation legs: the renderer cannot fill its own cache. */
+async function collectShotStatSeries(
+  resolved: ResolvedPaneFunction,
+): Promise<Array<[string, DatedObservation[]]>> {
+  if (resolved.pane.id !== ECON_STATISTICS_PANE_ID) return [];
+  const loaded = await Promise.all(STATS.map(async (def) => {
+    try {
+      return [def.seriesId, await defaultStatLoader(def)] as [string, DatedObservation[]];
+    } catch {
+      return null;
+    }
+  }));
+  return loaded.filter((entry): entry is [string, DatedObservation[]] => !!entry);
+}
 
 async function collectShotFredSeries(
   resolved: ResolvedPaneFunction,
@@ -81,6 +189,25 @@ async function collectShotFredSeries(
   return loaded.filter((entry): entry is [string, FredSeriesCacheEntry] => !!entry);
 }
 
+/**
+ * The pane reads its legs from a client cache the shot renderer cannot fill itself,
+ * so fetch them here on the Bun side and hand them over with the payload.
+ */
+async function collectShotValuationSeries(
+  resolved: ResolvedPaneFunction,
+): Promise<Array<[string, DatedObservation[]]>> {
+  if (resolved.pane.id !== MARKET_VALUATION_PANE_ID) return [];
+  const loaded = await Promise.all(valuationRequiredSeries().map(async (def) => {
+    try {
+      const series = await defaultValuationSeriesLoader(def);
+      return [def.key, series.observations] as [string, DatedObservation[]];
+    } catch {
+      return null;
+    }
+  }));
+  return loaded.filter((entry): entry is [string, DatedObservation[]] => !!entry);
+}
+
 async function collectShotCapabilitySeries(
   resolved: ResolvedPaneFunction,
 ): Promise<Array<[string, ResolvedSeries]>> {
@@ -196,6 +323,27 @@ export type PaneScreenshotDataEvidence =
   | PaneScreenshotFundamentalSeriesEvidence
   | PaneScreenshotFinancialStatementEvidence;
 
+export interface PaneScreenshotReadinessSignals {
+  rowCount: number;
+  loadingStateDetected: boolean;
+  errorStateDetected: boolean;
+  emptyStateDetected: boolean;
+  complete: boolean;
+  semanticMismatch: boolean;
+  requiresStructuredDataEvidence: boolean;
+  hasStructuredDataEvidence: boolean;
+}
+
+export function isPaneScreenshotUsable(signals: PaneScreenshotReadinessSignals): boolean {
+  return signals.rowCount > 0
+    && !signals.loadingStateDetected
+    && !signals.errorStateDetected
+    && !signals.emptyStateDetected
+    && signals.complete
+    && !signals.semanticMismatch
+    && (!signals.requiresStructuredDataEvidence || signals.hasStructuredDataEvidence);
+}
+
 export interface PaneScreenshotResult {
   kind: "pane-screenshot";
   target: string;
@@ -238,9 +386,20 @@ async function buildDesktopShotPayload(
   options: Record<string, string | true>,
   widthPx: number,
   heightPx: number,
+  theme: string | null,
+  scale: number,
+  watermark: string | null,
 ): Promise<DesktopPaneShotPayload> {
-  const widthCells = Math.max(1, Math.round(widthPx / DESKTOP_CELL_WIDTH_PX));
-  const heightCells = Math.max(1, Math.round(heightPx / DESKTOP_CELL_HEIGHT_PX));
+  // The requested size is the output size. Scale shrinks the CSS viewport and
+  // raises the device scale factor by the same factor, so a 1200px wide shot at
+  // scale 1.5 lays out 100 cells instead of 150 and every glyph is 1.5x larger.
+  // Snap to whole cells: rounding up used to make the pane a few pixels taller
+  // than the capture, which clipped the bottom axis of charts.
+  const widthCells = Math.max(1, Math.floor(widthPx / scale / DESKTOP_CELL_WIDTH_PX));
+  const heightCells = Math.max(1, Math.floor(heightPx / scale / DESKTOP_CELL_HEIGHT_PX));
+  widthPx = widthCells * DESKTOP_CELL_WIDTH_PX;
+  heightPx = heightCells * DESKTOP_CELL_HEIGHT_PX;
+  const deviceScaleFactor = DEFAULT_SHOT_DEVICE_SCALE_FACTOR * scale;
   const initialPaneState = optionPaneState(resolved.options);
   const pluginState = capabilityPluginState(resolved.capability, resolved.options);
   if (Object.keys(pluginState).length > 0) {
@@ -252,9 +411,9 @@ async function buildDesktopShotPayload(
   if (isFinancialAnalysisFunction(resolved) && !initialPaneState.activeTabId) {
     initialPaneState.activeTabId = "financials";
   }
-  const paneState: Record<string, PaneRuntimeState> = {
+  const paneState = stripDesktopShotCredentials<Record<string, PaneRuntimeState>>({
     [resolved.instance.instanceId]: initialPaneState,
-  };
+  });
   const layout = {
     dockRoot: null,
     instances: [resolved.instance],
@@ -268,8 +427,9 @@ async function buildDesktopShotPayload(
     }],
     detached: [],
   };
-  const config = {
+  const config = stripDesktopShotCredentials<AppConfig>({
     ...context.config,
+    ...(theme ? { theme: resolveShotTheme(theme) } : {}),
     layout,
     layouts: [{
       name: "CLI Shot",
@@ -280,14 +440,16 @@ async function buildDesktopShotPayload(
     }],
     activeLayoutIndex: 0,
     onboardingComplete: true,
-  };
+  });
 
   const tickers: TickerRecord[] = [];
   const financials: Array<[string, TickerFinancials]> = [];
   const optionsChains: Array<[string, OptionsChain]> = [];
-  const [fredSeries, capabilitySeries] = await Promise.all([
+  const [fredSeries, capabilitySeries, valuationSeries, statSeries] = await Promise.all([
     collectShotFredSeries(resolved),
     collectShotCapabilitySeries(resolved),
+    collectShotValuationSeries(resolved),
+    collectShotStatSeries(resolved),
   ]);
   const includeOptionsChains = resolved.pane.id === OPTIONS_PANE_ID || resolved.template?.paneId === OPTIONS_PANE_ID;
   for (const symbol of collectShotSymbols(resolved, rawArg)) {
@@ -327,15 +489,30 @@ async function buildDesktopShotPayload(
     heightCells,
     widthPx,
     heightPx,
+    deviceScaleFactor,
+    watermark,
     tickers,
     financials,
     optionsChains,
     fredSeries,
+    valuationSeries,
+    statSeries,
     capabilitySeries,
     paneState,
   };
 }
 
+function resolveShotTheme(requested: string): string {
+  const normalized = requested.trim().toLowerCase().replace(/[\s_]+/g, "-");
+  const ids = getThemeIds();
+  const match = ids.find((id) => id.toLowerCase() === normalized)
+    ?? ids.find((id) => getTheme(id).name.toLowerCase().replace(/[\s_]+/g, "-") === normalized);
+  if (!match) {
+    throw new Error(`Unknown theme "${requested}". Available themes: ${ids.join(", ")}`);
+  }
+  return match;
+}
+
 export function shotPriceHistoryRange(resolved: ResolvedPaneFunction): TimeRange | null {
   switch (resolved.capability.id) {
     case "chart-composer":
@@ -364,6 +541,9 @@ export async function renderDesktopShot({
   outputPath,
   width,
   height,
+  theme,
+  scale,
+  watermark,
   options,
 }: {
   resolved: ResolvedPaneFunction;
@@ -372,14 +552,41 @@ export async function renderDesktopShot({
   outputPath: string;
   width: number;
   height: number;
+  theme?: string | null;
+  scale?: number;
+  watermark?: string | null;
   options: Record<string, string | true>;
 }): Promise<PaneScreenshotResult> {
   await mkdir(dirname(outputPath), { recursive: true });
-  const payload = await buildDesktopShotPayload(resolved, context, rawArg, options, width, height);
-  const render = await renderDesktopPaneScreenshot(payload, outputPath);
+  const apiProxy = resolveDesktopShotApiProxy(context);
+  const previousSessionToken = apiClient.getSessionToken();
+  let payload: DesktopPaneShotPayload;
+  let render: DesktopPaneShotRenderResult;
+  apiClient.setSessionToken(apiProxy.sessionToken);
+  try {
+    payload = await buildDesktopShotPayload(
+      resolved,
+      context,
+      rawArg,
+      options,
+      width,
+      height,
+      theme ?? null,
+      scale ?? 1,
+      watermark ?? null,
+    );
+    render = await renderDesktopPaneScreenshot(payload, outputPath, apiProxy);
+  } finally {
+    apiClient.setSessionToken(previousSessionToken);
+  }
   const symbols = payload.financials.map(([symbol]) => symbol);
-  const rowCount = shotSemanticRowCount(resolved, payload, render.semanticUi);
-  const unavailableSymbols = shotUnavailableSymbols(resolved, payload, render.semanticUi);
+  const usesLiveDomEvidence = resolved.capability.screenshotReadiness === "live-dom";
+  const rowCount = usesLiveDomEvidence
+    ? render.rows.length
+    : shotSemanticRowCount(resolved, payload, render.semanticUi);
+  const unavailableSymbols = usesLiveDomEvidence
+    ? []
+    : shotUnavailableSymbols(resolved, payload, render.semanticUi);
   const complete = unavailableSymbols.length === 0;
   const expectedText = shotExpectedText(resolved, symbols, payload);
   const normalizedVisibleText = render.visibleText.toLowerCase();
@@ -397,12 +604,21 @@ export async function renderDesktopShot({
   const semanticMismatch = missingExpectedText.length > 0
     || missingExpectedSelections.length > 0
     || chartEvidenceMismatches.length > 0;
-  const empty = render.emptyStateDetected || rowCount === 0 || semanticMismatch;
-  const usable = resolved.capability.botSafe
-    && resolved.capability.screenshotReadiness === "ready"
-    && !empty
-    && complete
-    && (!requiresStructuredDataEvidence(resolved) || dataEvidence !== null);
+  const empty = render.loadingStateDetected
+    || render.errorStateDetected
+    || render.emptyStateDetected
+    || rowCount === 0
+    || semanticMismatch;
+  const usable = isPaneScreenshotUsable({
+    rowCount,
+    loadingStateDetected: render.loadingStateDetected,
+    errorStateDetected: render.errorStateDetected,
+    emptyStateDetected: render.emptyStateDetected,
+    complete,
+    semanticMismatch,
+    requiresStructuredDataEvidence: requiresStructuredDataEvidence(resolved),
+    hasStructuredDataEvidence: dataEvidence !== null,
+  });
   return {
     kind: "pane-screenshot",
     target: resolved.token,
@@ -414,7 +630,7 @@ export async function renderDesktopShot({
       screenshotReadiness: resolved.capability.screenshotReadiness,
     },
     symbols,
-    options: resolved.options,
+    options: stripDesktopShotCredentials(resolved.options),
     rowCount,
     empty,
     complete,
@@ -424,7 +640,7 @@ export async function renderDesktopShot({
     dataEvidence,
     outputPath,
     render: {
-      ...render,
+      ...stripDesktopShotCredentials(render),
       expectedText,
       missingExpectedText,
       expectedSelections,

package/src/cli/registry.ts

@@ -4,7 +4,6 @@ import type {
   CliCommandDef,
   CliDispatchResult,
   GloomPlugin,
-  PluginCliCommandDescriptor,
 } from "../types/plugin";
 import type { LoadedExternalPlugin } from "../plugins/loader";
 import { getPluginCatalog } from "../plugins/catalog";
@@ -35,7 +34,6 @@ export interface CliCommandRegistry {
   config: AppConfig | null;
   plugins: GloomPlugin[];
   externalPlugins: LoadedExternalPlugin[];
-  descriptors: Array<{ pluginId: string; descriptor: PluginCliCommandDescriptor }>;
 }
 
 interface BuildCliCommandRegistryOptions {
@@ -71,19 +69,6 @@ function getCommandUsageLabel(command: CliCommandDef): string {
   return command.help?.usage?.[0] ?? command.name;
 }
 
-function descriptorToCommand(descriptor: PluginCliCommandDescriptor): CliCommandDef | null {
-  if (!descriptor.execute) return null;
-  return {
-    name: descriptor.name,
-    aliases: descriptor.aliases,
-    description: descriptor.summary,
-    help: descriptor.examples?.length
-      ? { usage: descriptor.examples }
-      : undefined,
-    execute: descriptor.execute,
-  };
-}
-
 function renderHelpSections(registry: CliCommandRegistry): string[] {
   const lines: string[] = [];
 
@@ -172,7 +157,6 @@ export function buildCliCommandRegistry({
   }
 
   const loadablePlugins: GloomPlugin[] = [];
-  const descriptors: Array<{ pluginId: string; descriptor: PluginCliCommandDescriptor }> = [];
   for (const entry of catalog) {
     if (entry.error) {
       registryLog.warn(`Skipping external plugin "${entry.plugin.id}" for CLI registration.`, {
@@ -185,11 +169,6 @@ export function buildCliCommandRegistry({
     for (const command of entry.plugin.cliCommands ?? []) {
       registerCommand(command, entry.plugin.id, "plugin");
     }
-    for (const descriptor of entry.plugin.cli?.commands ?? []) {
-      descriptors.push({ pluginId: entry.plugin.id, descriptor });
-      const command = descriptorToCommand(descriptor);
-      if (command) registerCommand(command, entry.plugin.id, "plugin");
-    }
   }
 
   const commands = allCommands.filter((entry) => (
@@ -210,7 +189,6 @@ export function buildCliCommandRegistry({
     config,
     plugins: loadablePlugins.filter((plugin) => !disabledPlugins.has(plugin.id)),
     externalPlugins,
-    descriptors,
   };
 }
 

package/src/cli/restore-plugins.ts

@@ -0,0 +1,34 @@
+import { saveConfig } from "../data/config/store";
+import { loadCliConfigIfAvailable } from "./context";
+import { seedExtractedPlugins } from "../plugins/seed";
+import { debugLog } from "../utils/debug-log";
+
+const log = debugLog.createLogger("plugin-seed");
+
+/**
+ * Reinstalls plugins that moved out of this repository into their own.
+ *
+ * Runs before the plugin catalog is read so a restored plugin is available in
+ * the same session, and stays quiet on failure: an offline launch should start
+ * normally and try again next time, not block on a network request.
+ */
+export async function restoreExtractedPlugins(): Promise<void> {
+  try {
+    const config = await loadCliConfigIfAvailable();
+    // No data directory yet means a first run: there is nothing to restore.
+    if (!config) return;
+    const { installPlugin } = await import("./commands/plugins");
+    const result = await seedExtractedPlugins(config, installPlugin);
+
+    const seeded = [...new Set(result.seeded)].sort();
+    const existing = [...new Set(config.seededPlugins ?? [])].sort();
+    if (seeded.join() === existing.join()) return;
+
+    await saveConfig({ ...config, seededPlugins: seeded });
+    if (result.installed.length > 0) {
+      log.info(`Restored ${result.installed.join(", ")} into ~/.gloomberb/plugins`);
+    }
+  } catch (error) {
+    log.error(`Plugin restore skipped: ${error}`);
+  }
+}

package/src/cli/result.ts

@@ -1,5 +1,6 @@
 import type { CliGlobalOptions } from "./options";
 import { renderTable, type CliTableColumn } from "../utils/cli-output";
+import { serializeCsv } from "../utils/csv";
 
 export interface CliResult<T = unknown> {
   data: T;
@@ -57,11 +58,6 @@ function inferColumns(rows: Record<string, unknown>[]): CliResultColumn<Record<s
   return [...keys].map((key) => ({ key, header: key }));
 }
 
-function csvEscape(value: string): string {
-  if (!/[",\n\r]/.test(value)) return value;
-  return `"${value.replace(/"/g, '""')}"`;
-}
-
 function serializeColumns<Row>(columns?: CliResultColumn<Row>[]) {
   return columns?.map((column) => ({
     key: column.key,
@@ -78,11 +74,12 @@ function renderCsv<Row extends Record<string, unknown>>(
   const resolvedColumns = columns && columns.length > 0
     ? columns
     : inferColumns(rows as Record<string, unknown>[]) as CliResultColumn<Row>[];
-  const header = resolvedColumns.map((column) => csvEscape(column.header)).join(",");
-  const body = rows.map((row) => resolvedColumns
-    .map((column) => csvEscape(normalizeCell(column.value ? column.value(row) : row[column.key])))
-    .join(","));
-  return [header, ...body].join("\n");
+  return serializeCsv([
+    resolvedColumns.map((column) => column.header),
+    ...rows.map((row) => resolvedColumns.map((column) => (
+      column.value ? column.value(row) : row[column.key]
+    ))),
+  ]);
 }
 
 function renderTextTable<Row extends Record<string, unknown>>(

package/src/components/chart/{static/chart → composite}/axis-overlays.test.tsx

@@ -4,9 +4,9 @@ import {
   UiHostProvider,
   type RendererHost,
   type UiHost,
-} from "../../../../ui";
-import { WebBox } from "../../../../renderers/electrobun/view/host/box";
-import { WebText } from "../../../../renderers/electrobun/view/host/text";
+} from "../../../ui";
+import { WebBox } from "../../../renderers/electrobun/view/host/box";
+import { WebText } from "../../../renderers/electrobun/view/host/text";
 import { StaticXAxisLabels } from "./axis-overlays";
 
 const renderer: RendererHost = {

package/src/components/chart/{static/chart → composite}/axis-overlays.tsx

@@ -1,19 +1,14 @@
-import { Box, Text, useUiCapabilities, useUiHost } from "../../../../ui";
+import { Box, Text, useUiCapabilities, useUiHost } from "../../../ui";
+import type { CompositeChartXMarker } from "./types";
 
-export interface StaticChartXMarker {
-  id: string;
-  xRatio: number;
-  label?: string;
-  color?: string;
-  lineChar?: string;
-}
+export type StaticChartXMarker = CompositeChartXMarker;
 
 export interface StaticChartXAxisLabel {
   label: string;
   ratio: number;
 }
 
-export function clampRatio(value: number): number {
+function clampRatio(value: number): number {
   if (!Number.isFinite(value)) return 0;
   return Math.max(0, Math.min(1, value));
 }
@@ -222,7 +217,7 @@ export function StaticXMarkerOverlay({
   height,
   fallbackColor,
 }: {
-  markers: StaticChartXMarker[];
+  markers: readonly StaticChartXMarker[];
   width: number;
   height: number;
   fallbackColor?: string;
@@ -288,7 +283,7 @@ export function StaticXMarkerLabels({
   width,
   fallbackColor,
 }: {
-  markers: StaticChartXMarker[];
+  markers: readonly StaticChartXMarker[];
   width: number;
   fallbackColor?: string;
 }) {