gloomberb 0.16.3 → 0.16.4

package/src/plugins/registry/index.ts

@@ -54,7 +54,13 @@ import {
   type ResolvedRegistryPaneQuickSetting,
   type ResolvedRegistryPaneSettings,
 } from "./pane-settings";
-import { RegistryResumeStateListeners, createPluginPaneSettingsState, createPluginResumeState } from "./plugin-state";
+import {
+  RegistryResumeStateListeners,
+  bindPluginContextNamespaces,
+  createPluginPaneSettingsState,
+  createPluginResumeState,
+  type NamespacedPluginContext,
+} from "./plugin-state";
 import { createPluginSetupCommand, isPluginConfigured } from "./setup-command";
 import {
   bindSharedRegistry,
@@ -76,6 +82,12 @@ interface PluginRegistryOptions {
 }
 
 export type { WindowEditMode } from "./host-actions";
+
+/** A switched-off plugin, named for a "Turn on" offer. */
+export interface DisabledPluginOwner {
+  id: string;
+  name: string;
+}
 export {
   getSharedMarketData,
   getSharedRegistry,
@@ -167,6 +179,7 @@ export class PluginRegistry implements PluginRuntimeAccess {
     bindSharedRegistry(this, marketData);
     this.capabilities = new CapabilityRegistry({
       isPluginEnabled: (pluginId) => !this.getConfig().disabledPlugins.includes(pluginId),
+      pluginName: (pluginId) => this.plugins.get(pluginId)?.name,
       isCapabilityEnabled: (capability, pluginId) => {
         const disabledSources = this.getConfig().disabledSources ?? [];
         return !disabledSources.includes(capability.sourceId ?? capability.id) && !this.getConfig().disabledPlugins.includes(pluginId);
@@ -407,6 +420,41 @@ export class PluginRegistry implements PluginRuntimeAccess {
     return this.contributions.paneTemplatesMap.owners.get(templateId);
   }
 
+  /**
+   * The plugin that owns this pane type when it is switched off. A pane of a
+   * switched-off plugin stays hidden, so callers offer to turn it on instead
+   * of adding one.
+   */
+  getDisabledPaneOwner(
+    paneType: string,
+    disabledPlugins: readonly string[] = this.getConfig().disabledPlugins,
+  ): DisabledPluginOwner | null {
+    return this.disabledOwner(this.getPanePluginId(paneType), disabledPlugins);
+  }
+
+  /** The same for a template: its own plugin, or the one owning the pane it opens. */
+  getDisabledPaneTemplateOwner(
+    templateId: string,
+    disabledPlugins: readonly string[] = this.getConfig().disabledPlugins,
+  ): DisabledPluginOwner | null {
+    const paneType = this.paneTemplates.get(templateId)?.paneId;
+    return this.disabledOwner(this.getPaneTemplatePluginId(templateId), disabledPlugins)
+      ?? (paneType ? this.getDisabledPaneOwner(paneType, disabledPlugins) : null);
+  }
+
+  /** The plugin behind a research tab when it is switched off, which hides the tab. */
+  getDisabledTickerResearchTabOwner(
+    tabId: string,
+    disabledPlugins: readonly string[] = this.getConfig().disabledPlugins,
+  ): DisabledPluginOwner | null {
+    return this.disabledOwner(this.getTickerResearchTabPluginId(tabId), disabledPlugins);
+  }
+
+  private disabledOwner(pluginId: string | undefined, disabledPlugins: readonly string[]): DisabledPluginOwner | null {
+    if (!pluginId || !disabledPlugins.includes(pluginId)) return null;
+    return { id: pluginId, name: this.plugins.get(pluginId)?.name ?? pluginId };
+  }
+
   getBrokerPluginId(brokerType: string): string | undefined {
     return this.contributions.brokersMap.owners.get(brokerType);
   }
@@ -429,10 +477,42 @@ export class PluginRegistry implements PluginRuntimeAccess {
     }
   }
 
+  /**
+   * The state parts of a plugin's context. `namespaceKey` is the plugin's id,
+   * or the namespace a composed module keeps; both resolve the way a render
+   * context's id does.
+   */
+  private createNamespacedContext(namespaceKey: string): NamespacedPluginContext {
+    const stateId = this.stateNamespace(namespaceKey);
+    return {
+      persistence: createPluginPersistence(
+        this.persistence.pluginState,
+        this.persistence.resources,
+        `plugin:${stateId}`,
+        stateId,
+      ),
+      resume: createPluginResumeState({
+        pluginId: stateId,
+        getResumeState: (key, version) => this.getResumeState(namespaceKey, key, version),
+        setResumeState: (key, value, version) => this.setResumeState(namespaceKey, key, value, version),
+        deleteResumeState: (key) => this.deleteResumeState(namespaceKey, key),
+        getPaneRuntimeState: (paneId) => this.getPaneRuntimeState(paneId),
+        updatePaneRuntimeState: (paneId, patch) => this.updatePaneRuntimeState(paneId, patch),
+      }),
+      teamState: createPluginTeamState(stateId),
+      configState: {
+        get: (key) => this.getConfigState(namespaceKey, key),
+        set: (key, value) => this.setConfigState(namespaceKey, key, value),
+        delete: (key) => this.deleteConfigState(namespaceKey, key),
+        keys: () => this.getConfigStateKeys(namespaceKey),
+      },
+    };
+  }
+
   private createContext(pluginId: string): GloomPluginContext {
     const contributions = this.contributions;
     const items = contributions.getOrCreatePluginItems(pluginId);
-    return {
+    return bindPluginContextNamespaces({
       registerPane: (pane) => contributions.registerPane(pluginId, pane),
       registerPaneTemplate: (template) => contributions.registerPaneTemplate(pluginId, template, true),
       registerCommand: (command) => contributions.registerCommand(pluginId, command),
@@ -468,33 +548,13 @@ export class PluginRegistry implements PluginRuntimeAccess {
       marketData: this.marketData,
       connectionHealth: this.connectionHealth,
       tickerRepository: this.tickerRepository,
-      persistence: createPluginPersistence(
-        this.persistence.pluginState,
-        this.persistence.resources,
-        `plugin:${this.stateNamespace(pluginId)}`,
-        this.stateNamespace(pluginId),
-      ),
+      ...this.createNamespacedContext(pluginId),
       log: debugLog.createLogger(pluginId),
-      resume: createPluginResumeState({
-        pluginId: this.stateNamespace(pluginId),
-        getResumeState: (key, version) => this.getResumeState(pluginId, key, version),
-        setResumeState: (key, value, version) => this.setResumeState(pluginId, key, value, version),
-        deleteResumeState: (key) => this.deleteResumeState(pluginId, key),
-        getPaneRuntimeState: (paneId) => this.getPaneRuntimeState(paneId),
-        updatePaneRuntimeState: (paneId, patch) => this.updatePaneRuntimeState(paneId, patch),
-      }),
-      teamState: createPluginTeamState(this.stateNamespace(pluginId)),
       paneSettings: createPluginPaneSettingsState({
         getLayout: () => this.getLayout(),
         updateLayout: (layout) => this.updateLayout(layout),
         resolvePaneTarget: (paneId) => this.resolvePaneTarget(paneId),
       }),
-      configState: {
-        get: (key) => this.getConfigState(pluginId, key),
-        set: (key, value) => this.setConfigState(pluginId, key, value),
-        delete: (key) => this.deleteConfigState(pluginId, key),
-        keys: () => this.getConfigStateKeys(pluginId),
-      },
       createBrokerInstance: (brokerType, label, values) => this.createBrokerInstance(brokerType, label, values),
       updateBrokerInstance: this.updateBrokerInstance,
       syncBrokerInstance: this.syncBrokerInstance,
@@ -519,7 +579,7 @@ export class PluginRegistry implements PluginRuntimeAccess {
       // Every plugin event is also a host event; TypeScript cannot see that through the generic key.
       emit: (event, payload) => this.events.emit(event, payload as HostEvents[typeof event]),
       notify: (notification) => this.notify(notification),
-    };
+    }, (stateId) => this.createNamespacedContext(stateId));
   }
 
   private registryLog = debugLog.createLogger("registry");

package/src/plugins/registry/plugin-state.ts

@@ -1,7 +1,7 @@
 import type { PaneRuntimeState } from "../../core/state/app/state";
 import { deletePaneSetting, setPaneSetting } from "../../pane-settings";
 import type { LayoutConfig } from "../../types/config";
-import type { PluginPaneSettingsState, PluginResumeState } from "../../types/plugin";
+import type { GloomPluginContext, PluginPaneSettingsState, PluginResumeState } from "../../types/plugin";
 import { deletePluginPaneStateValue, setPluginPaneStateValue } from "../../layout/pane-state";
 
 export class RegistryResumeStateListeners {
@@ -35,6 +35,30 @@ export class RegistryResumeStateListeners {
   }
 }
 
+/** The parts of a plugin context that read and write under its state namespace. */
+export type NamespacedPluginContext = Pick<GloomPluginContext, "persistence" | "resume" | "configState" | "teamState">;
+
+const namespacedContexts = new WeakMap<GloomPluginContext, (stateId: string) => NamespacedPluginContext>();
+
+/** Lets `pluginContextInNamespace` rebuild this context's state parts for another namespace. */
+export function bindPluginContextNamespaces(
+  context: GloomPluginContext,
+  createNamespaced: (stateId: string) => NamespacedPluginContext,
+): GloomPluginContext {
+  namespacedContexts.set(context, createNamespaced);
+  return context;
+}
+
+/**
+ * The same plugin context with its persistence, resume, config and team state
+ * under another namespace. Contributions still register to the plugin that
+ * owns the context. A context the registry did not create comes back as is.
+ */
+export function pluginContextInNamespace(context: GloomPluginContext, stateId: string): GloomPluginContext {
+  const createNamespaced = namespacedContexts.get(context);
+  return createNamespaced ? { ...context, ...createNamespaced(stateId) } : context;
+}
+
 interface PluginResumeStateOptions {
   pluginId: string;
   getResumeState: <T = unknown>(key: string, schemaVersion?: number) => T | null;

package/src/plugins/runtime/context.tsx

@@ -2,6 +2,7 @@ import {
   createContext,
   createElement,
   useContext,
+  useMemo,
   type ReactNode,
 } from "react";
 import type { BrokerAdapter } from "../../types/broker";
@@ -67,6 +68,34 @@ export function withPluginRender<P>(
   );
 }
 
+function PluginStateNamespace({ stateId, children }: { stateId: string; children: ReactNode }) {
+  const outer = useContext(PluginRenderContext);
+  const runtime = outer?.runtime;
+  const value = useMemo(() => (runtime ? { pluginId: stateId, runtime } : null), [runtime, stateId]);
+  if (!value) return children;
+  return <PluginRenderContext value={value}>{children}</PluginRenderContext>;
+}
+
+/**
+ * Renders a component under another state namespace of the plugin render
+ * context it is already in. A built-in module that moved to another plugin
+ * keeps reading and writing the pane and plugin state it already has.
+ */
+export function withPluginStateNamespace<P>(
+  stateId: string,
+  component: (props: P) => ReactNode,
+): (props: P) => ReactNode {
+  const scoped = (props: P) => (
+    <PluginStateNamespace stateId={stateId}>
+      {createElement(component as (props: any) => ReactNode, props)}
+    </PluginStateNamespace>
+  );
+  // Names the namespace in React's tools, and to tests that check a moved
+  // module still reads the state it had.
+  scoped.displayName = `PluginStateNamespace(${stateId})`;
+  return scoped;
+}
+
 export function usePluginRenderContext(): PluginRenderContextValue {
   const context = useContext(PluginRenderContext);
   if (!context) {

package/src/react/input.ts

@@ -57,9 +57,20 @@ interface ShortcutEntry extends ShortcutRegistration {
 
 export interface ShortcutRegistry {
   register(registration: ShortcutRegistration): () => void;
+  /**
+   * Runs `listener` for every key, before any handler is picked for it. State
+   * it sets has rendered by the time the handlers run (when the host can
+   * flush), so they read it instead of what the last frame held.
+   */
+  beforeDispatch(listener: (event: KeyEventLike) => void): () => void;
   dispatch(event: KeyEventLike): void;
 }
 
+export interface ShortcutRegistryOptions {
+  /** The renderer's synchronous render flush, which `beforeDispatch` listeners run inside. */
+  flushSync?: (run: () => void) => void;
+}
+
 const SHORTCUT_PHASES: ReadonlyArray<ShortcutEntry["phase"]> = [
   "capture",
   "before",
@@ -88,9 +99,10 @@ function orderShortcutEntries(entries: ShortcutEntry[]): ShortcutEntry[] {
   });
 }
 
-export function createShortcutRegistry(): ShortcutRegistry {
+export function createShortcutRegistry({ flushSync }: ShortcutRegistryOptions = {}): ShortcutRegistry {
   let nextOrder = 1;
   const entries = new Map<number, ShortcutEntry>();
+  const beforeListeners = new Set<(event: KeyEventLike) => void>();
 
   return {
     register(registration) {
@@ -104,7 +116,20 @@ export function createShortcutRegistry(): ShortcutRegistry {
         entries.delete(order);
       };
     },
+    beforeDispatch(listener) {
+      beforeListeners.add(listener);
+      return () => {
+        beforeListeners.delete(listener);
+      };
+    },
     dispatch(event) {
+      if (beforeListeners.size > 0) {
+        const run = () => {
+          for (const listener of [...beforeListeners]) listener(event);
+        };
+        if (flushSync) flushSync(run);
+        else run();
+      }
       const eligible = orderShortcutEntries(
         [...entries.values()].filter((entry) => (
           entry.isEnabled() && shouldDeliverShortcut(event, entry.allowsEditable())
@@ -151,11 +176,24 @@ export function useRegisteredShortcut(
   }), [options?.phase, options?.scope, registry]);
 }
 
+export function useRegisteredBeforeShortcut(
+  registry: ShortcutRegistry,
+  listener: (event: KeyEventLike) => void,
+): void {
+  const listenerRef = useRef(listener);
+  listenerRef.current = listener;
+  useLayoutEffect(
+    () => registry.beforeDispatch((event) => listenerRef.current(event)),
+    [registry],
+  );
+}
+
 export interface InputHost {
   useShortcut(
     handler: (event: KeyEventLike) => void,
     options?: ShortcutOptions,
   ): void;
+  useBeforeShortcut(listener: (event: KeyEventLike) => void): void;
   useViewport(): { width: number; height: number };
 }
 
@@ -186,6 +224,15 @@ export function useShortcut(
   useInputHost().useShortcut(handler, options);
 }
 
+/**
+ * Runs before every key reaches any shortcut handler, whatever its phase or
+ * scope, for state the handlers read: set it here and it has rendered by the
+ * time they run. Not for acting on the key.
+ */
+export function useBeforeShortcut(listener: (event: KeyEventLike) => void): void {
+  useInputHost().useBeforeShortcut(listener);
+}
+
 export function shouldDeliverShortcut(
   event: KeyEventLike,
   allowEditable: boolean,

package/src/remote/app-host.tsx

@@ -23,6 +23,11 @@ export function useRemoteControlHandler(): RemoteControlHandler | null {
 export interface RemoteControlAdapter {
   startServer?(options: { dataDir: string; handle: RemoteControlHandler }): void | (() => void | Promise<void>);
   registerHandler?(handler: RemoteControlHandler | null): void | (() => void);
+  /**
+   * Set where a remote assistant may drive this app through Gloom Cloud: what
+   * kind of app it is and the machine name it shows under.
+   */
+  terminalDevice?: { kind: "desktop" | "tui"; name: string };
 }
 
 interface RemoteControlHostProps {

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/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" />