gloomberb 0.16.2 → 0.16.4

package/src/remote/controller.ts

@@ -30,6 +30,7 @@ import type {
 } from "./types";
 import type { RemoteUiRegistry } from "./semantic-tree";
 import { commandBarResultsFromNodes, isCommandBarInputNode } from "./command-bar";
+import { findCommandBarResult, findMatchingUiNode } from "./matching";
 import { REMOTE_AGENT_HELP, remoteControlSchema } from "./schema";
 import {
   fail,
@@ -48,7 +49,6 @@ import {
 } from "./layout-helpers";
 import { createRemoteResources } from "./resources";
 import { dismissTopmostDialog, isDialogOpen as isAnyDialogOpen } from "../ui/dialog-stack";
-import { findFormNode } from "./form";
 import { asRecord } from "../utils/guards";
 import { runAutomated } from "../telemetry/usage-counts";
 
@@ -247,20 +247,7 @@ export function createAppRemoteController({
   };
 
   const activateCommandBarResult = async (input: Record<string, unknown>): Promise<unknown> => {
-    const nodeId = optionalString(input, "nodeId");
-    const index = optionalNumber(input, "index");
-    const itemId = optionalString(input, "itemId");
-    const label = optionalString(input, "label");
-    const results = commandBarResultsFromNodes(uiRegistry?.snapshot() ?? []);
-    const result = nodeId
-      ? results.find((entry) => entry.nodeId === nodeId)
-      : itemId
-        ? results.find((entry) => entry.itemId === itemId)
-        : label
-          ? results.find((entry) => entry.label === label)
-      : typeof index === "number"
-        ? results.find((entry) => entry.index === index)
-        : results.find((entry) => entry.selected) ?? results[0];
+    const result = findCommandBarResult(commandBarResultsFromNodes(uiRegistry?.snapshot() ?? []), input);
     if (!result) throw new Error("No matching command-bar result is visible.");
     if (!result.actions.includes("activate")) {
       throw new Error(`Command-bar result "${result.nodeId}" does not expose activate.`);
@@ -270,45 +257,8 @@ export function createAppRemoteController({
   };
 
   const invokeMatchingUiNode = async (input: Record<string, unknown>): Promise<unknown> => {
-    const role = optionalString(input, "role");
-    const label = optionalString(input, "label");
-    const contains = optionalString(input, "contains");
-    const index = optionalNumber(input, "index");
     const action = optionalString(input, "action") ?? "press";
-    const metadataFilter = asRecord(input.metadata);
-    const nodes = uiRegistry?.snapshot() ?? [];
-    // A dialog over the form (a listing picker, a sign-in) keeps its controls
-    // out of reach, as it does from the mouse.
-    const formCovered = findFormNode(nodes)?.metadata?.covered === true;
-    const candidates = nodes.filter((node) => {
-      if (formCovered && node.metadata?.scope === "form") return false;
-      if (role && node.role !== role) return false;
-      if (label && node.label !== label && node.metadata?.item && typeof node.metadata.item === "object") {
-        const item = node.metadata.item as Record<string, unknown>;
-        if (item.label !== label && item.id !== label) return false;
-      } else if (label && node.label !== label) {
-        return false;
-      }
-      if (contains) {
-        const haystack = [
-          node.label,
-          node.role,
-          JSON.stringify(node.metadata ?? {}),
-        ].filter((entry): entry is string => typeof entry === "string").join(" ").toLowerCase();
-        if (!haystack.includes(contains.toLowerCase())) return false;
-      }
-      for (const [key, value] of Object.entries(metadataFilter)) {
-        if (node.metadata?.[key] !== value) return false;
-      }
-      if (!node.actions.includes(action)) return false;
-      if (node.disabled) return false;
-      return true;
-    });
-    // An open form or confirm covers every pane, so its own controls come
-    // first: its Cancel, not a pane's Cancel behind it.
-    const inForm = candidates.filter((node) => node.metadata?.scope === "form");
-    const matches = inForm.length > 0 ? inForm : candidates;
-    const node = typeof index === "number" ? matches[index] : matches[0];
+    const node = findMatchingUiNode(uiRegistry?.snapshot() ?? [], input);
     if (!node) throw new Error("No matching semantic UI node is visible.");
     const result = await uiRegistry?.invoke(node.id, action, input.input);
     return getAfterMutationSummary({ invokedNode: node, result });

package/src/remote/matching.ts

@@ -0,0 +1,69 @@
+import { optionalNumber, optionalString } from "./controller-utils";
+import { findFormNode } from "./form";
+import type { RemoteUiNodeSnapshot } from "./types";
+import { asRecord } from "../utils/guards";
+
+/** The visible command-bar row commandBar.activateResult picks for this input. */
+export function findCommandBarResult<T extends { nodeId: string; itemId?: unknown; label?: unknown; index?: unknown; selected: boolean }>(
+  results: readonly T[],
+  input: Record<string, unknown>,
+): T | undefined {
+  const nodeId = optionalString(input, "nodeId");
+  const index = optionalNumber(input, "index");
+  const itemId = optionalString(input, "itemId");
+  const label = optionalString(input, "label");
+  return nodeId
+    ? results.find((entry) => entry.nodeId === nodeId)
+    : itemId
+      ? results.find((entry) => entry.itemId === itemId)
+      : label
+        ? results.find((entry) => entry.label === label)
+    : typeof index === "number"
+      ? results.find((entry) => entry.index === index)
+      : results.find((entry) => entry.selected) ?? results[0];
+}
+
+/** The semantic UI node ui.invokeMatching acts on for this input, or undefined. */
+export function findMatchingUiNode(
+  nodes: RemoteUiNodeSnapshot[],
+  input: Record<string, unknown>,
+): RemoteUiNodeSnapshot | undefined {
+  const role = optionalString(input, "role");
+  const label = optionalString(input, "label");
+  const contains = optionalString(input, "contains");
+  const index = optionalNumber(input, "index");
+  const action = optionalString(input, "action") ?? "press";
+  const metadataFilter = asRecord(input.metadata);
+  // A dialog over the form (a listing picker, a sign-in) keeps its controls
+  // out of reach, as it does from the mouse.
+  const formCovered = findFormNode(nodes)?.metadata?.covered === true;
+  const candidates = nodes.filter((node) => {
+    if (formCovered && node.metadata?.scope === "form") return false;
+    if (role && node.role !== role) return false;
+    if (label && node.label !== label && node.metadata?.item && typeof node.metadata.item === "object") {
+      const item = node.metadata.item as Record<string, unknown>;
+      if (item.label !== label && item.id !== label) return false;
+    } else if (label && node.label !== label) {
+      return false;
+    }
+    if (contains) {
+      const haystack = [
+        node.label,
+        node.role,
+        JSON.stringify(node.metadata ?? {}),
+      ].filter((entry): entry is string => typeof entry === "string").join(" ").toLowerCase();
+      if (!haystack.includes(contains.toLowerCase())) return false;
+    }
+    for (const [key, value] of Object.entries(metadataFilter)) {
+      if (node.metadata?.[key] !== value) return false;
+    }
+    if (!node.actions.includes(action)) return false;
+    if (node.disabled) return false;
+    return true;
+  });
+  // An open form or confirm covers every pane, so its own controls come
+  // first: its Cancel, not a pane's Cancel behind it.
+  const inForm = candidates.filter((node) => node.metadata?.scope === "form");
+  const matches = inForm.length > 0 ? inForm : candidates;
+  return typeof index === "number" ? matches[index] : matches[0];
+}

package/src/remote/schema.ts

@@ -115,7 +115,7 @@ export const REMOTE_OPERATIONS: RemoteOperationSchema[] = [
   op("pane.close", "Close a pane instance or pane type.", "{ paneId: string }", "local-write", paneIdInput),
   op(
     "pane.createFromTemplate",
-    "Create a pane from a registered template.",
+    "Open a pane from a registered template. It only opens the pane: it adds nothing to a portfolio or watchlist.",
     "{ templateId: string, options?: object }",
     "local-write",
     objectSchema({ templateId: requiredStringSchema, options: openObjectSchema }, ["templateId"]),

package/src/remote/semantic-tree.tsx

@@ -11,6 +11,8 @@ type RemoteUiAction = (input?: unknown) => unknown | Promise<unknown>;
 
 export interface RemoteUiNodeRegistration {
   role: string;
+  /** The pane instance the node is drawn in, set from RemoteUiPaneScope. */
+  paneId?: string;
   label?: string;
   disabled?: boolean;
   actions?: Record<string, RemoteUiAction | undefined>;
@@ -56,6 +58,7 @@ export function createRemoteUiRegistry(): RemoteUiRegistry {
             .map(([action]) => action)
             .sort(),
           metadata: registration.getMetadata?.() ?? registration.metadata,
+          ...(registration.paneId ? { paneId: registration.paneId } : {}),
         };
       });
     },
@@ -110,6 +113,13 @@ export function useRemoteUiScope(): string | null {
   return useContext(RemoteUiScopeContext);
 }
 
+const RemoteUiPaneContext = createContext<string | null>(null);
+
+/** Tags the nodes drawn below with the pane instance they belong to. */
+export function RemoteUiPaneScope({ paneId, children }: { paneId: string; children: ReactNode }) {
+  return <RemoteUiPaneContext value={paneId}>{children}</RemoteUiPaneContext>;
+}
+
 let nextRemoteNodeSequence = 0;
 
 /**
@@ -120,9 +130,12 @@ let nextRemoteNodeSequence = 0;
  */
 export function useRemoteUiNode(registration: RemoteUiNodeRegistration | null | undefined): string | null {
   const registry = useRemoteUiRegistry();
+  const paneId = useContext(RemoteUiPaneContext);
   const nodeIdRef = useRef<string | null>(null);
   const registrationRef = useRef(registration);
   registrationRef.current = registration;
+  const paneIdRef = useRef(paneId);
+  paneIdRef.current = paneId;
   const dynamicRegistrationRef = useRef<RemoteUiNodeRegistration | null>(null);
   const registered = registration != null;
   if (registered && !nodeIdRef.current) {
@@ -130,6 +143,7 @@ export function useRemoteUiNode(registration: RemoteUiNodeRegistration | null |
     nodeIdRef.current = `ui:${nextRemoteNodeSequence.toString(36)}`;
     dynamicRegistrationRef.current = {
       get role() { return registrationRef.current?.role ?? "unknown"; },
+      get paneId() { return registrationRef.current?.paneId ?? paneIdRef.current ?? undefined; },
       get label() { return registrationRef.current?.label; },
       get disabled() { return registrationRef.current?.disabled; },
       get actions() { return registrationRef.current?.actions; },

package/src/remote/types.ts

@@ -172,6 +172,8 @@ export interface RemoteControlSchema {
 export interface RemoteUiNodeSnapshot {
   id: string;
   role: string;
+  /** The pane instance the node is drawn in; absent outside panes. */
+  paneId?: string;
   label?: string;
   disabled?: boolean;
   actions: string[];

package/src/renderers/browser/app-services.ts

@@ -5,6 +5,7 @@ import { createAppRuntime } from "../../core/app-runtime";
 import { createGloomberbCloudCapabilities, createGloomberbCloudProvider } from "../../sources/gloomberb-cloud";
 import { AssetDataRouter } from "../../sources/provider-router";
 import { JsonPersistence } from "../../data/json-persistence";
+import { isBrokerAccountSnapshotKey } from "../../brokers/account-cache";
 import { JsonTickerRepository } from "../../data/json-ticker-repository";
 
 export function createBrowserAppServices({ config, plugins, externalPlugins }: AppServicesFactoryOptions) {
@@ -15,7 +16,8 @@ export function createBrowserAppServices({ config, plugins, externalPlugins }: A
   );
   return createAppRuntime({
     config, plugins, externalPlugins, dataProvider,
-    persistence: new JsonPersistence(localStorage),
+    // Broker account snapshots are kept with the positions, so a reload keeps the account's equity and cash.
+    persistence: new JsonPersistence(localStorage, { keepResource: isBrokerAccountSnapshotKey }),
     tickerRepository: new JsonTickerRepository(localStorage),
     configure({ pluginRegistry, newsService }) {
       dataProvider.attachRegistry(pluginRegistry);

package/src/renderers/dom/data-table/dom.ts

@@ -143,6 +143,24 @@ export function useScrollBoxHandle(
     get scrollWidth() {
       return toCellX(elementRef.current?.scrollWidth ?? 0);
     },
+    // Whole rows are rounded, so the scroll keys read the ends in pixels.
+    get scrollTopPx() {
+      return options.headerOnly ? 0 : Math.max(0, elementRef.current?.scrollTop ?? 0);
+    },
+    get scrollHeightPx() {
+      const element = elementRef.current;
+      if (!element) return 0;
+      return options.headerOnly ? tableHeaderPx() : Math.max(0, element.scrollHeight - (options.viewportTopInsetPx ?? 0));
+    },
+    get viewportPx() {
+      const element = elementRef.current;
+      return {
+        width: Math.max(0, element?.clientWidth ?? 0),
+        height: options.headerOnly
+          ? tableHeaderPx()
+          : Math.max(0, (element?.clientHeight ?? 0) - (options.viewportTopInsetPx ?? 0)),
+      };
+    },
     get viewport() {
       const element = elementRef.current;
       if (options.headerOnly) {
@@ -161,6 +179,19 @@ export function useScrollBoxHandle(
     },
     horizontalScrollBar,
     verticalScrollBar,
+    scrollToPixels(target: number | { x?: number; y?: number }, y?: number) {
+      const element = elementRef.current;
+      if (!element || options.headerOnly) return;
+      if (typeof target === "number") {
+        element.scrollTop = Math.max(0, target);
+        if (typeof y === "number") element.scrollLeft = Math.max(0, y);
+        return;
+      }
+      element.scrollTo({
+        left: Math.max(0, target.x ?? element.scrollLeft),
+        top: Math.max(0, target.y ?? element.scrollTop),
+      });
+    },
     scrollTo(target: number | { x?: number; y?: number }, y?: number) {
       const element = elementRef.current;
       if (!element) return;

package/src/renderers/dom/data-table/index.tsx

@@ -11,6 +11,7 @@ import {
 } from "react";
 import { EmptyState } from "../../../components/ui/status";
 import { usePaneInstance } from "../../../state/app/context";
+import { useRegisterPaneScrollBox } from "../../../state/pane-scroll-registry";
 import { useRafCallback } from "../../../react/use-raf-callback";
 import { measurePerf } from "../../../utils/perf-marks";
 import type {
@@ -284,6 +285,10 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
     bodyVertical.bar,
     { viewportTopInsetPx: headerPx },
   );
+  // The terminal table body is a ScrollBox the pane scroll keys already reach;
+  // this is the same for the desktop one. A table with a cursor takes the keys
+  // first, so only a table without one is scrolled by them.
+  useRegisterPaneScrollBox(scrollRef, { enabled: true });
 
   useEffect(() => {
     headerHorizontal.bar.visible = false;

package/src/renderers/dom/desktop/icons.tsx

@@ -88,6 +88,20 @@ const ICONS: Record<IconName, ReactNode> = {
       <path d="M2 9.1 4.7 6.6l1.6 1.5 1.8-2 2.4 2.5" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round" />
     </>
   ),
+  // A hand with the thumb raised, on the 24-unit grid; the thumbs down is the
+  // same hand turned over.
+  "thumbs-up": (
+    <g transform="scale(0.5)">
+      <rect x="3" y="10" width="4" height="10" rx="1" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" />
+      <path d="M7 10l3.5-6.5a1.8 1.8 0 0 1 3.3 1.2L13 9.5h5.6a2 2 0 0 1 2 2.4l-1.4 6.5a2 2 0 0 1-2 1.6H7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
+    </g>
+  ),
+  "thumbs-down": (
+    <g transform="scale(0.5) rotate(180 12 12)">
+      <rect x="3" y="10" width="4" height="10" rx="1" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" />
+      <path d="M7 10l3.5-6.5a1.8 1.8 0 0 1 3.3 1.2L13 9.5h5.6a2 2 0 0 1 2 2.4l-1.4 6.5a2 2 0 0 1-2 1.6H7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
+    </g>
+  ),
   restore: (
     <>
       <rect x="2" y="4" width="6" height="6" rx="0.8" stroke="currentColor" strokeWidth="1.1" />

package/src/renderers/dom/desktop/query-bar.tsx

@@ -10,6 +10,53 @@ import { WebIcon } from "./icons";
 
 /** Input width of a text filter that names none, in cells (the terminal's default). */
 const DEFAULT_TEXT_FIELD_CELLS = 20;
+/** Beyond this many choices an inline filter is a strip that scrolls by itself, as the terminal's does. */
+const STRIP_OPTION_LIMIT = 6;
+
+function isStrip(item: HostQueryBarItem): boolean {
+  return item.kind === "select" && item.inline === true && item.options.length > STRIP_OPTION_LIMIT;
+}
+
+/**
+ * The choices of an inline filter. A long one (expiries, chart ranges) is a
+ * strip that scrolls on its own, so the label and the controls beside it stay
+ * in view while it brings the chosen one into view.
+ */
+function InlineChoices({ item }: { item: HostQueryBarItem }) {
+  const stripRef = useRef<HTMLDivElement | null>(null);
+  const strip = isStrip(item);
+  const overflow = useHorizontalOverflow(stripRef, [item.options.length, strip]);
+  return (
+    <div className="gloom-qb-inline" data-item-id={item.id} data-narrowing={item.narrowing ? "true" : undefined}
+      data-strip={strip ? "true" : undefined}>
+      <span className="gloom-qb-label">{item.label}</span>
+      <div
+        ref={stripRef}
+        className="gloom-qb-view gloom-qb-segments"
+        role="radiogroup"
+        aria-label={item.label}
+        style={strip ? overflow.maskStyle : undefined}
+        onWheel={strip ? overflow.onWheel : undefined}
+      >
+        {item.options.map((option) => (
+          <button
+            key={option.value}
+            type="button"
+            role="radio"
+            aria-checked={option.selected}
+            disabled={option.disabled}
+            title={option.hint ? `${option.label} (${option.hint})` : undefined}
+            data-active={option.selected ? "true" : undefined}
+            onMouseDown={(event) => event.stopPropagation()}
+            onClick={() => item.onSelect(option.value)}
+          >
+            <span className="gloom-qb-text">{option.label}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
 
 function Chevron() {
   return <span className="gloom-qb-chevron"><WebIcon name="chevron-down" size={9} /></span>;
@@ -87,30 +134,7 @@ function FilterChip({ item, open, onOpenChange }: { item: HostQueryBarItem; open
   useEffect(() => {
     if (open) triggerRef.current?.scrollIntoView({ block: "nearest", inline: "nearest" });
   }, [open]);
-  if (item.kind === "select" && item.inline) {
-    return (
-      <div className="gloom-qb-inline" data-item-id={item.id} data-narrowing={item.narrowing ? "true" : undefined}>
-        <span className="gloom-qb-label">{item.label}</span>
-        <div className="gloom-qb-view gloom-qb-segments" role="radiogroup" aria-label={item.label}>
-          {item.options.map((option) => (
-            <button
-              key={option.value}
-              type="button"
-              role="radio"
-              aria-checked={option.selected}
-              disabled={option.disabled}
-              title={option.hint ? `${option.label} (${option.hint})` : undefined}
-              data-active={option.selected ? "true" : undefined}
-              onMouseDown={(event) => event.stopPropagation()}
-              onClick={() => item.onSelect(option.value)}
-            >
-              <span className="gloom-qb-text">{option.label}</span>
-            </button>
-          ))}
-        </div>
-      </div>
-    );
-  }
+  if (item.kind === "select" && item.inline) return <InlineChoices item={item} />;
   if (item.kind === "toggle") {
     return (
       <button
@@ -190,27 +214,30 @@ export function WebQueryBar({ search, items, view, onClearAll, meta, openRequest
   const overflow = useHorizontalOverflow(scrollRef, [items.length, !!search, !!view, !!onClearAll, meta]);
   const searchRef = useRef<HTMLDivElement | null>(null);
   // When an inline choice or the view changes (a shortcut, the next expiry),
-  // bring the new selection into a scrolled bar. Not on mount: a view at the
-  // right edge must not scroll the search away when the pane opens.
+  // bring the new selection into a scrolled bar. On mount only a strip that
+  // scrolls by itself shows its choice: an expiry chosen far down the strip
+  // is what the pane shows, but scrolling the whole bar to a view at the right
+  // edge would hide the search when the pane opens.
   const selectionKey = [
     ...items.filter((item) => item.inline).map((item) => `${item.id}=${item.options.find((option) => option.selected)?.value ?? ""}`),
     `view=${view?.value ?? ""}`,
   ].join("|");
-  const previousSelectionKey = useRef(selectionKey);
+  const previousSelectionKey = useRef<string | null>(null);
   useEffect(() => {
     const previous = previousSelectionKey.current;
     previousSelectionKey.current = selectionKey;
     if (previous === selectionKey) return;
-    const before = new Map(previous.split("|").map((entry) => entry.split("=") as [string, string]));
+    const before = previous == null ? null : new Map(previous.split("|").map((entry) => entry.split("=") as [string, string]));
     const bar = scrollRef.current;
     if (!bar) return;
     for (const entry of selectionKey.split("|")) {
       const [id, value] = entry.split("=") as [string, string];
-      if (before.get(id) === value) continue;
+      if (before?.get(id) === value) continue;
       const group = id === "view"
         ? bar.querySelector(":scope > .gloom-qb-view")
-        : bar.querySelector(`[data-item-id="${CSS.escape(id)}"]`);
-      group?.querySelector<HTMLElement>("button[data-active=true]")?.scrollIntoView({ block: "nearest", inline: "nearest" });
+        : [...bar.querySelectorAll("[data-item-id]")].find((item) => item.getAttribute("data-item-id") === id);
+      if (!before && group?.getAttribute("data-strip") !== "true") continue;
+      group?.querySelector<HTMLElement>("button[data-active=true]")?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
     }
   }, [selectionKey]);
   useEffect(() => {
@@ -280,7 +307,7 @@ export function WebQueryBar({ search, items, view, onClearAll, meta, openRequest
       )}
       {searchNode}
       {items.length > 0 && (
-        <div className="gloom-qb-filters">
+        <div className="gloom-qb-filters" data-strip={items.some(isStrip) ? "true" : undefined}>
           {items.map((item) => (
             <FilterChip key={item.id} item={item} open={openId === item.id} onOpenChange={(open) => setOpen(item.id, open)} />
           ))}