gloomberb 0.11.0 → 0.11.2

package/src/layout-marketplace/gallery.tsx

@@ -0,0 +1,323 @@
+import { useCallback, useMemo, useState } from "react";
+import { ConfirmDialog } from "../components/ui/confirm-dialog";
+import { useShortcut } from "../react/input";
+import { useAppDispatch, useAppSelector } from "../state/app/context";
+import { selectActiveLayoutIndex, selectSavedLayouts } from "../state/selectors-ui";
+import { useDialog, useDialogState, type PromptContext } from "../ui/dialog";
+import { useRendererHost, useUiHost } from "../ui";
+import { requestAuthDialog } from "../plugins/builtin/cloud/auth-dialog";
+import { usePlanAccess } from "../plugins/builtin/shared/plan-access";
+import type { PluginRegistry } from "../plugins/registry";
+import type { LayoutConfig } from "../types/config";
+import { LayoutGalleryDesktop } from "./gallery-desktop";
+import { LayoutGalleryTerminal } from "./gallery-terminal";
+import { LayoutNameDialog } from "./name-dialog";
+import {
+  buildCommunityEntries,
+  buildOwnedEntries,
+  filterGalleryEntries,
+  missingPaneIds,
+  type GalleryEntry,
+} from "./model";
+import { publicMarketplaceLayoutUrl } from "./api";
+import {
+  materializeMarketplaceLayout,
+  publishableMarketplaceLayout,
+} from "./payload";
+import { useLayoutMarketplace } from "./use-marketplace";
+
+export interface LayoutGalleryController {
+  query: string;
+  setQuery: (query: string) => void;
+  owned: GalleryEntry[];
+  community: GalleryEntry[];
+  /** Owned entries first, then community, in the order the destination renders them. */
+  entries: GalleryEntry[];
+  selectedId: string | null;
+  select: (id: string | null) => void;
+  detail: GalleryEntry | null;
+  openDetail: (entry: GalleryEntry) => void;
+  closeDetail: () => void;
+  activate: (entry: GalleryEntry) => void;
+  install: (entry: GalleryEntry) => void;
+  discover: ReturnType<typeof useLayoutMarketplace>;
+  signedIn: boolean;
+  requestSignIn: () => void;
+  publishCurrent: () => void;
+  copyLink: (entry: GalleryEntry) => void;
+  publishing: boolean;
+  newLayout: () => void;
+  renameLayout: (entry: GalleryEntry) => void;
+  duplicateLayout: (entry: GalleryEntry) => void;
+  deleteLayout: (entry: GalleryEntry) => void;
+  canDelete: boolean;
+  close: () => void;
+  panes: PluginRegistry["panes"];
+  missingPaneIds: (layout: LayoutConfig) => string[];
+}
+
+export function LayoutMarketplaceGallery({
+  pluginRegistry,
+  focused = true,
+  width,
+  height,
+  onClose,
+}: {
+  pluginRegistry: PluginRegistry;
+  focused?: boolean;
+  width?: number;
+  height?: number;
+  onClose?: () => void;
+}) {
+  const dispatch = useAppDispatch();
+  const dialog = useDialog();
+  const renderer = useRendererHost();
+  const dialogOpen = useDialogState((state) => state.isOpen);
+  const layouts = useAppSelector(selectSavedLayouts);
+  const activeIndex = useAppSelector(selectActiveLayoutIndex);
+  const currentLayout = useAppSelector((state) => state.config.layout);
+  const currentPaneState = useAppSelector((state) => state.paneState);
+  const { signedIn } = usePlanAccess();
+  const discover = useLayoutMarketplace(true, signedIn);
+  const [query, setQuery] = useState("");
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [detailId, setDetailId] = useState<string | null>(null);
+  const [publishing, setPublishing] = useState(false);
+
+  const panes = pluginRegistry.panes;
+  const owned = useMemo(
+    () => filterGalleryEntries(buildOwnedEntries(layouts, activeIndex), query, panes),
+    [activeIndex, layouts, panes, query],
+  );
+  const community = useMemo(
+    () => filterGalleryEntries(buildCommunityEntries(discover.state.items), query, panes),
+    [discover.state.items, panes, query],
+  );
+  const entries = useMemo(() => [...owned, ...community], [community, owned]);
+  const detail = useMemo(
+    () => entries.find((entry) => entry.id === detailId) ?? null,
+    [detailId, entries],
+  );
+
+  const close = useCallback(() => {
+    if (onClose) onClose();
+    else pluginRegistry.hidePane("layout-marketplace");
+  }, [onClose, pluginRegistry]);
+
+  const activate = useCallback((entry: GalleryEntry) => {
+    if (entry.kind === "community") {
+      setDetailId(entry.id);
+      setSelectedId(entry.id);
+      return;
+    }
+    close();
+    if (entry.index !== null && entry.index !== activeIndex) {
+      dispatch({ type: "SWITCH_LAYOUT", index: entry.index });
+    }
+  }, [activeIndex, close, dispatch]);
+
+  const install = useCallback((entry: GalleryEntry) => {
+    const installed = materializeMarketplaceLayout(entry);
+    close();
+    dispatch({
+      type: "INSTALL_LAYOUT_COPY",
+      name: entry.name,
+      layout: installed.layout,
+      paneState: installed.paneState,
+    });
+    pluginRegistry.notify({ body: `Layout "${entry.name}" added`, type: "success" });
+  }, [close, dispatch, pluginRegistry]);
+
+  const requestSignIn = useCallback(() => {
+    if (!requestAuthDialog({ mode: "login" })) {
+      pluginRegistry.notify({ body: "Open Account Management to log in.", type: "info" });
+    }
+  }, [pluginRegistry]);
+
+  const promptName = useCallback(async (options: {
+    title: string;
+    label: string;
+    confirmLabel: string;
+    initialValue?: string;
+  }) => {
+    const name = await dialog.prompt<string | undefined>({
+      closeOnClickOutside: true,
+      content: (context: unknown) => (
+        <LayoutNameDialog
+          {...(context as PromptContext<string | undefined>)}
+          title={options.title}
+          label={options.label}
+          confirmLabel={options.confirmLabel}
+          initialValue={options.initialValue ?? ""}
+        />
+      ),
+    }).catch(() => undefined);
+    return typeof name === "string" ? name.trim() : "";
+  }, [dialog]);
+
+  const newLayout = useCallback(async () => {
+    const name = await promptName({
+      title: "New Layout",
+      label: "Layout name",
+      confirmLabel: "Create Layout",
+    });
+    if (!name) return;
+    close();
+    dispatch({ type: "NEW_LAYOUT", name });
+    pluginRegistry.notify({ body: `Layout "${name}" created`, type: "success" });
+  }, [close, dispatch, pluginRegistry, promptName]);
+
+  const renameLayout = useCallback(async (entry: GalleryEntry) => {
+    if (entry.index === null) return;
+    const name = await promptName({
+      title: "Rename Layout",
+      label: "New name",
+      confirmLabel: "Rename Layout",
+      initialValue: entry.name,
+    });
+    if (!name || name === entry.name) return;
+    dispatch({ type: "RENAME_LAYOUT", index: entry.index, name });
+  }, [dispatch, promptName]);
+
+  const duplicateLayout = useCallback((entry: GalleryEntry) => {
+    if (entry.index === null) return;
+    close();
+    dispatch({ type: "DUPLICATE_LAYOUT", index: entry.index });
+    pluginRegistry.notify({ body: `Layout "${entry.name}" duplicated`, type: "success" });
+  }, [close, dispatch, pluginRegistry]);
+
+  const deleteLayout = useCallback(async (entry: GalleryEntry) => {
+    if (entry.index === null || layouts.length <= 1) return;
+    const confirmed = await dialog.prompt<boolean>({
+      closeOnClickOutside: true,
+      content: (context: unknown) => (
+        <ConfirmDialog
+          {...(context as PromptContext<boolean>)}
+          title="Delete Layout"
+          body={[`Delete layout "${entry.name}"? This cannot be undone.`]}
+          confirmLabel="Delete Layout"
+          cancelLabel="Cancel"
+          width={48}
+        />
+      ),
+    }).catch(() => false);
+    if (confirmed !== true) return;
+    dispatch({ type: "DELETE_LAYOUT", index: entry.index });
+    pluginRegistry.notify({ body: `Layout "${entry.name}" deleted`, type: "success" });
+  }, [dialog, dispatch, layouts.length, pluginRegistry]);
+
+  const copyLink = useCallback((entry: GalleryEntry) => {
+    if (!entry.marketplaceId) return;
+    void renderer.copyText(publicMarketplaceLayoutUrl(entry.marketplaceId)).then(() => {
+      pluginRegistry.notify({ body: "Layout link copied", type: "success" });
+    }).catch(() => {
+      pluginRegistry.notify({ body: "Could not copy the layout link.", type: "error" });
+    });
+  }, [pluginRegistry, renderer]);
+
+  const publishCurrent = useCallback(async () => {
+    if (!signedIn) {
+      requestSignIn();
+      return;
+    }
+    const name = layouts[activeIndex]?.name || "Community Layout";
+    const confirmed = await dialog.prompt<boolean>({
+      closeOnClickOutside: true,
+      content: (context: unknown) => (
+        <ConfirmDialog
+          {...(context as PromptContext<boolean>)}
+          title="Publish Current Layout"
+          body={[
+            `Publish "${name}" to Discover?`,
+            "Pane setup, queries, chart views, drawings, and portable pane state will be public.",
+            "Credentials, accounts, portfolios, and fields marked private are excluded.",
+          ]}
+          confirmLabel="Publish Layout"
+          cancelLabel="Cancel"
+          confirmVariant="primary"
+          width={52}
+        />
+      ),
+    }).catch(() => false);
+    if (confirmed !== true) return;
+    setPublishing(true);
+    try {
+      const item = await discover.publish(
+        name,
+        publishableMarketplaceLayout(currentLayout, currentPaneState, panes),
+      );
+      try {
+        await renderer.copyText(publicMarketplaceLayoutUrl(item.id));
+        pluginRegistry.notify({ body: `Layout "${name}" published · link copied`, type: "success" });
+      } catch {
+        pluginRegistry.notify({ body: `Layout "${name}" published`, type: "success" });
+      }
+    } catch (error) {
+      pluginRegistry.notify({
+        body: error instanceof Error ? error.message : "Could not publish this layout.",
+        type: "error",
+      });
+    } finally {
+      setPublishing(false);
+    }
+  }, [activeIndex, currentLayout, currentPaneState, dialog, discover, layouts, panes, pluginRegistry, renderer, requestSignIn, signedIn]);
+
+  useShortcut((event) => {
+    if (event.name !== "escape") return;
+    event.preventDefault();
+    event.stopPropagation();
+    if (detailId) setDetailId(null);
+    else close();
+  }, { enabled: focused && !dialogOpen, phase: "before", allowEditable: true, scope: "layout-gallery" });
+
+  const controller: LayoutGalleryController = {
+    query,
+    setQuery,
+    owned,
+    community,
+    entries,
+    selectedId,
+    select: setSelectedId,
+    detail,
+    openDetail: (entry) => {
+      setSelectedId(entry.id);
+      setDetailId(entry.id);
+    },
+    closeDetail: () => setDetailId(null),
+    activate,
+    install,
+    discover,
+    signedIn,
+    requestSignIn,
+    publishCurrent,
+    copyLink,
+    publishing,
+    newLayout,
+    renameLayout,
+    duplicateLayout,
+    deleteLayout,
+    canDelete: layouts.length > 1,
+    close,
+    panes,
+    missingPaneIds: (layout) => missingPaneIds(layout, panes),
+  };
+
+  return useUiHost().kind === "desktop-web"
+    ? (
+      <LayoutGalleryDesktop
+        controller={controller}
+        focused={focused}
+        width={width}
+        height={height}
+      />
+    )
+    : (
+      <LayoutGalleryTerminal
+        controller={controller}
+        dialogOpen={dialogOpen}
+        focused={focused}
+        width={width}
+        height={height}
+      />
+    );
+}

package/src/layout-marketplace/geometry.test.ts

@@ -0,0 +1,47 @@
+import { expect, test } from "bun:test";
+import { cloneLayout, createDefaultConfig } from "../types/config";
+import { buildLayoutPreviewRects } from "./geometry";
+
+const layout = (() => {
+  const next = cloneLayout(createDefaultConfig("/tmp/gloomberb-test").layout);
+  next.floating = [{ instanceId: "chat:main", x: 40, y: 6, width: 30, height: 10 }];
+  next.detached = [{ instanceId: "quote-monitor:main", x: 70, y: 2, width: 24, height: 8 }];
+  return next;
+})();
+
+test("maps docked, floating, and detached panes into in-bounds preview rects", () => {
+  const bounds = { width: 40, height: 7 };
+  const rects = buildLayoutPreviewRects(layout, bounds, { width: 120, height: 40 });
+
+  expect(rects.filter((entry) => entry.kind === "docked").length).toBe(3);
+  expect(rects.filter((entry) => entry.kind === "floating").length).toBe(1);
+  expect(rects.filter((entry) => entry.kind === "detached").length).toBe(1);
+  for (const { rect } of rects) {
+    expect(rect.width).toBeGreaterThanOrEqual(2);
+    expect(rect.height).toBeGreaterThanOrEqual(2);
+    expect(rect.x + rect.width).toBeLessThanOrEqual(bounds.width);
+    expect(rect.y + rect.height).toBeLessThanOrEqual(bounds.height);
+  }
+});
+
+test("keeps pixel previews fractional and layered above docked panes", () => {
+  const bounds = { width: 320, height: 180 };
+  const rects = buildLayoutPreviewRects(layout, bounds, { width: 120, height: 40 }, {
+    minSize: 10,
+    fractional: true,
+  });
+
+  const docked = rects.filter((entry) => entry.kind === "docked");
+  const floating = rects.find((entry) => entry.kind === "floating")!;
+  const detached = rects.find((entry) => entry.kind === "detached")!;
+  expect(floating.depth).toBeGreaterThan(docked[0]!.depth);
+  expect(detached.depth).toBeGreaterThan(floating.depth);
+  expect(floating.instanceId).toBe("chat:main");
+  // 40/120 of a 320px card, kept fractional instead of snapped to whole cells.
+  expect(floating.rect.x).toBeCloseTo(106.67, 1);
+  for (const { rect } of rects) {
+    expect(rect.width).toBeGreaterThanOrEqual(10);
+    expect(rect.x + rect.width).toBeLessThanOrEqual(bounds.width + 0.001);
+    expect(rect.y + rect.height).toBeLessThanOrEqual(bounds.height + 0.001);
+  }
+});

package/src/layout-marketplace/geometry.ts

@@ -0,0 +1,80 @@
+import { getDockLeafLayouts, type LayoutBounds } from "../plugins/pane-manager";
+import type { LayoutConfig } from "../types/config";
+
+export type LayoutPreviewKind = "docked" | "floating" | "detached";
+
+export interface LayoutPreviewRect {
+  key: string;
+  instanceId: string;
+  kind: LayoutPreviewKind;
+  rect: LayoutBounds;
+  /** Paint order: floating sits over docked, detached over both. */
+  depth: number;
+}
+
+/** Below this a rect is too small to hold a readable pane header. */
+const DEFAULT_MIN_SIZE = 2;
+
+function snapRect(
+  rect: LayoutBounds,
+  bounds: { width: number; height: number },
+  minSize: number,
+  round: (value: number) => number,
+): LayoutBounds {
+  const maxX = Math.max(0, bounds.width - minSize);
+  const maxY = Math.max(0, bounds.height - minSize);
+  const x = Math.max(0, Math.min(maxX, round(rect.x)));
+  const y = Math.max(0, Math.min(maxY, round(rect.y)));
+  return {
+    x,
+    y,
+    width: Math.max(minSize, Math.min(bounds.width - x, round(rect.x + rect.width) - x)),
+    height: Math.max(minSize, Math.min(bounds.height - y, round(rect.y + rect.height) - y)),
+  };
+}
+
+/**
+ * Docked panes come from the real dock geometry at preview scale; floating and
+ * detached panes are stored in screen cells, so they are scaled by the screen
+ * the layout is being previewed against. Units are whatever the caller passes:
+ * terminal cells or CSS pixels.
+ */
+export function buildLayoutPreviewRects(
+  layout: LayoutConfig,
+  bounds: { width: number; height: number },
+  screen: { width: number; height: number },
+  options?: { minSize?: number; fractional?: boolean },
+): LayoutPreviewRect[] {
+  const minSize = options?.minSize ?? DEFAULT_MIN_SIZE;
+  const round = options?.fractional ? (value: number) => value : Math.round;
+  const scaleX = bounds.width / Math.max(1, screen.width);
+  const scaleY = bounds.height / Math.max(1, screen.height);
+  const scaled = (
+    entries: readonly { instanceId: string; x: number; y: number; width: number; height: number }[],
+    kind: LayoutPreviewKind,
+    depth: number,
+  ): LayoutPreviewRect[] => entries.map((entry) => ({
+    key: `${kind}:${entry.instanceId}`,
+    instanceId: entry.instanceId,
+    kind,
+    depth,
+    rect: snapRect({
+      x: entry.x * scaleX,
+      y: entry.y * scaleY,
+      width: entry.width * scaleX,
+      height: entry.height * scaleY,
+    }, bounds, minSize, round),
+  }));
+
+  return [
+    ...getDockLeafLayouts(layout, { x: 0, y: 0, ...bounds }, { precise: true }).map((leaf) => ({
+      key: `docked:${leaf.instanceId}`,
+      instanceId: leaf.instanceId,
+      kind: "docked" as const,
+      depth: 1,
+      rect: snapRect(leaf.rect, bounds, minSize, round),
+    })),
+    ...scaled(layout.floating, "floating", 2),
+    ...scaled(layout.detached ?? [], "detached", 3),
+  ];
+}

package/src/layout-marketplace/mini-workspace.test.tsx

@@ -0,0 +1,122 @@
+/** @jsxImportSource react */
+import { Window } from "happy-dom";
+
+const testWindow = new Window({ url: "http://localhost" });
+const domGlobals = {
+  IS_REACT_ACT_ENVIRONMENT: true,
+  window: testWindow,
+  document: testWindow.document,
+  navigator: testWindow.navigator,
+  HTMLElement: testWindow.HTMLElement,
+  Node: testWindow.Node,
+};
+
+/** Bun shares one process across test files, so the DOM globals must not leak. */
+const priorGlobals = Object.fromEntries(
+  Object.keys(domGlobals).map((key) => [key, (globalThis as Record<string, unknown>)[key]]),
+);
+Object.assign(globalThis, domGlobals);
+
+import { afterAll, 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 "../renderers/electrobun/view/host/box";
+import { WebText } from "../renderers/electrobun/view/host/text";
+import { cloneLayout, createDefaultConfig } from "../types/config";
+import type { PaneDef } from "../types/plugin";
+import { MiniWorkspace } from "./mini-workspace";
+
+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;
+
+afterAll(() => {
+  for (const [key, value] of Object.entries(priorGlobals)) {
+    if (value === undefined) delete (globalThis as Record<string, unknown>)[key];
+    else (globalThis as Record<string, unknown>)[key] = value;
+  }
+});
+
+function paneDef(id: string, name: string, icon: string): PaneDef {
+  return { id, name, icon, component: () => null, defaultPosition: "left" };
+}
+
+const panes = new Map<string, PaneDef>([
+  ["portfolio-list", paneDef("portfolio-list", "Portfolio", "P")],
+  ["ticker-research", paneDef("ticker-research", "Ticker Research", "T")],
+  ["chat", paneDef("chat", "Chat", "M")],
+  ["ticker-chart", paneDef("ticker-chart", "Chart", "C")],
+]);
+
+function testLayout() {
+  const layout = cloneLayout(createDefaultConfig("/tmp/gloomberb-mini-workspace-test").layout);
+  layout.instances = [
+    ...layout.instances,
+    { instanceId: "ticker-chart:1", paneId: "ticker-chart", binding: { kind: "fixed", symbol: "NVDA" } },
+    { instanceId: "mystery:1", paneId: "mystery-pane" },
+  ];
+  layout.floating = [{ instanceId: "ticker-chart:1", x: 20, y: 6, width: 60, height: 20 }];
+  layout.detached = [{ instanceId: "mystery:1", x: 120, y: 4, width: 50, height: 18 }];
+  return layout;
+}
+
+async function renderPreview() {
+  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}>
+        <MiniWorkspace layout={testLayout()} panes={panes} width={320} height={160} />
+      </UiHostProvider>,
+    );
+  });
+  return { container, root };
+}
+
+test("draws every pane with a readable header instead of an empty rectangle", async () => {
+  const { container, root } = await renderPreview();
+
+  const labels = [...container.querySelectorAll("text")].map((node) => node.textContent ?? "");
+  expect(labels.length).toBe(5);
+  expect(labels.some((label) => label.includes("Portfolio"))).toBe(true);
+  expect(labels.some((label) => label.includes("Chat"))).toBe(true);
+  // A published fixed ticker is public metadata and belongs on the header.
+  expect(labels.some((label) => label.includes("Chart") && label.includes("NVDA"))).toBe(true);
+  // An uninstalled pane type keeps its id as the label rather than going blank.
+  expect(labels.some((label) => label.includes("mystery-pane"))).toBe(true);
+  expect(labels.every((label) => label.trim().length > 0)).toBe(true);
+
+  await act(async () => root.unmount());
+});
+
+test("layers floating and detached panes and hatches missing pane types", async () => {
+  const { container, root } = await renderPreview();
+
+  const svg = container.querySelector("svg")!;
+  expect(svg.getAttribute("aria-label")).toContain("Chart NVDA");
+  // Missing pane types get the hatch fill; installed panes keep real imagery.
+  expect(container.querySelector("rect[fill^='url(#gloom-missing-pane-']")).not.toBeNull();
+  expect(container.querySelectorAll("path[stroke-linejoin='round']").length).toBeGreaterThan(0);
+
+  const groups = [...container.querySelectorAll("g")];
+  const detachedIndex = groups.findIndex((group) => group.textContent?.includes("mystery-pane"));
+  const floatingIndex = groups.findIndex((group) => group.textContent?.includes("NVDA"));
+  const dockedIndex = groups.findIndex((group) => group.textContent?.includes("Portfolio"));
+  expect(dockedIndex).toBeLessThan(floatingIndex);
+  expect(floatingIndex).toBeLessThan(detachedIndex);
+
+  await act(async () => root.unmount());
+});