@finos/legend-cube-builder 0.0.3 → 0.0.4

package/src/components/CubeEntrySourceBanner.tsx

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2026-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import { LEGEND_CUBE_TEST_ID } from '../__lib__/LegendCubeTesting.js';
+import {
+  CUBE_ENTRY_SOURCE_ERROR_TITLE,
+  type CubeEntrySourceState,
+} from '../stores/CubeEntrySource.js';
+import { CubeButton } from './CubeButton.js';
+
+/** Why the source a link named couldn't be added, in the graph region (spec §17.13, U9(b)) */
+export const CubeEntrySourceBanner = observer(
+  (props: { entry: CubeEntrySourceState }) => {
+    const { entry } = props;
+    if (entry.isOpening) {
+      return (
+        <div
+          className="shrink-0 border-b border-[var(--color-border-default)] px-2 py-1 text-base text-[var(--color-text-secondary)]"
+          role="status"
+        >
+          Opening the linked source…
+        </div>
+      );
+    }
+    if (entry.error === undefined) {
+      return null;
+    }
+    return (
+      <div
+        className="flex shrink-0 items-start gap-2 border-b border-[var(--color-border-default)] bg-[var(--color-status-error-bg)] px-2 py-1 text-base text-[var(--color-status-error)]"
+        role="alert"
+        data-testid={LEGEND_CUBE_TEST_ID.ENTRY_SOURCE_ERROR}
+      >
+        <span className="min-w-0 flex-1 break-words">
+          <span className="font-medium">{CUBE_ENTRY_SOURCE_ERROR_TITLE}</span>{' '}
+          {entry.error.message}
+          {entry.error.detail !== undefined && (
+            <details>
+              <summary className="cursor-pointer">Details</summary>
+              <pre className="whitespace-pre-wrap text-sm">
+                {entry.error.detail}
+              </pre>
+            </details>
+          )}
+        </span>
+        <CubeButton onClick={() => entry.dismissError()}>Dismiss</CubeButton>
+      </div>
+    );
+  },
+);

package/src/components/CubeNodeIcon.tsx

@@ -19,12 +19,18 @@ import {
   AlignMiddleIcon,
   AlignTopIcon,
   ArrowsJoinIcon,
+  CalculatorIcon,
+  CompareIcon,
   CompressIcon,
   DataCubeIcon,
+  DatabaseImportIcon,
   clsx,
   FilterIcon,
+  LayerGroupIcon,
+  PackageIcon,
   PencilIcon,
   QuestionSquareIcon,
+  SigmaIcon,
   SortIcon,
   TableIcon,
 } from '@finos/legend-art';
@@ -34,13 +40,20 @@ const NODE_ICONS: Readonly<
   Record<string, React.FC<{ className?: string; title?: string }>>
 > = {
   table: TableIcon,
+  dataProduct: PackageIcon,
+  ingest: DatabaseImportIcon,
   filter: FilterIcon,
   join: ArrowsJoinIcon,
+  concat: LayerGroupIcon,
+  difference: CompareIcon,
+  extend: CalculatorIcon,
   limit: AlignTopIcon,
   drop: AlignBottomIcon,
   slice: AlignMiddleIcon,
   distinct: CompressIcon,
   restrict: DataCubeIcon.TableColumns,
+  group: DataCubeIcon.TableGroupBy,
+  partition: SigmaIcon,
   rename: PencilIcon,
   sort: SortIcon,
 };

package/src/components/CubeSchemaColumnsTable.tsx

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2026-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Schema } from '@finos/legend-cube';
+import { getColumnTypeLabel } from '../__lib__/LegendCubeLabels.js';
+import { CubeColumnTypeIcon } from './editors/CubeColumnPicker.js';
+
+/** A source's columns, with their precise types and whether they can be empty */
+export const CubeSchemaColumnsTable: React.FC<{ schema: Schema }> = ({
+  schema,
+}) => (
+  <table className="w-full text-base" aria-label="Columns">
+    <thead>
+      <tr className="text-left text-[var(--color-text-secondary)]">
+        <th className="font-normal">Column</th>
+        <th className="font-normal">Type</th>
+      </tr>
+    </thead>
+    <tbody>
+      {schema.columns.map((column) => (
+        <tr key={column.name}>
+          <td className="break-all pr-2">{column.name}</td>
+          <td title={column.type.fullName}>
+            <span className="flex items-center gap-1">
+              <CubeColumnTypeIcon
+                type={column.type}
+                className="text-[var(--color-text-secondary)]"
+              />
+              {getColumnTypeLabel(column)}
+            </span>
+          </td>
+        </tr>
+      ))}
+    </tbody>
+  </table>
+);

package/src/components/canvas/CubeCanvas.tsx

@@ -36,6 +36,7 @@ import { observer } from 'mobx-react-lite';
 import { useEffect, useMemo, useRef } from 'react';
 import { useDrop } from 'react-dnd';
 import { LEGEND_CUBE_TEST_ID } from '../../__lib__/LegendCubeTesting.js';
+import { canAddCubeNode } from '../../stores/CubeAddPlacement.js';
 import type { CubeEditorState } from '../../stores/CubeEditorState.js';
 import {
   buildCubeCanvasEdges,
@@ -56,6 +57,7 @@ import {
 import { CubeCanvasEdge } from './CubeCanvasEdge.js';
 import { layoutCubeQuery } from './CubeCanvasLayout.js';
 import { CubeCanvasNode } from './CubeCanvasNode.js';
+import { CubeNodeEditorPopper } from '../editors/CubeNodeEditorPopper.js';
 
 // React Flow re-renders every node when these change identity
 const NODE_TYPES = { [CUBE_CANVAS_NODE_TYPE]: CubeCanvasNode };
@@ -93,9 +95,8 @@ const CubeCanvasFlow = observer((props: { editorState: CubeEditorState }) => {
   );
   const edges = useMemo(() => buildCubeCanvasEdges(query), [query]);
   // the view fits the graph again whenever the layout moves a node, or the
-  // canvas changes size (e.g. the node editor opens beside it, or the
-  // splitter above the grid moves), once React Flow has measured every node:
-  // it fits only measured ones
+  // canvas changes size (e.g. the splitter above the grid moves), once React
+  // Flow has measured every node: it fits only measured ones
   const layoutSignature = useMemo(
     () => JSON.stringify([...positions]),
     [positions],
@@ -135,7 +136,10 @@ const CubeCanvasFlow = observer((props: { editorState: CubeEditorState }) => {
           return;
         }
         if (event.ctrlKey || event.metaKey) {
-          editorState.select(flowNode.id);
+          // applies and closes the open editor first, opening none (spec §17.5)
+          if (editorState.nodeEditor.finish()) {
+            editorState.select(flowNode.id);
+          }
         } else {
           editorState.nodeEditor.open(flowNode.id);
         }
@@ -160,14 +164,31 @@ const CubeCanvasFlow = observer((props: { editorState: CubeEditorState }) => {
         }
         event.preventDefault();
         if (event.ctrlKey || event.metaKey) {
-          editorState.select(nodeId);
+          if (editorState.nodeEditor.finish()) {
+            editorState.select(nodeId);
+          }
         } else {
           editorState.nodeEditor.open(nodeId);
+          // the keyboard goes on in the editor, once it is shown
+          window.setTimeout(() =>
+            document
+              .querySelector<HTMLElement>(
+                `[data-testid="${LEGEND_CUBE_TEST_ID.NODE_EDITOR}"]`,
+              )
+              ?.focus(),
+          );
         }
       }}
       isValidConnection={(connection) =>
         !readOnly && isCubeCanvasConnectionValid(query, connection)
       }
+      // a connection changes the query, so the open editor applies first,
+      // whether the handles are dragged or clicked
+      onConnectStart={() => editorState.nodeEditor.finish()}
+      // a click on the canvas's background closes the floating editor; a
+      // press there that pans leaves it open
+      onPaneClick={() => editorState.nodeEditor.finish()}
+      onClickConnectStart={() => editorState.nodeEditor.finish()}
       onConnect={(connection) => {
         if (connection.targetHandle) {
           editorState.connect(
@@ -192,6 +213,7 @@ const CubeCanvasFlow = observer((props: { editorState: CubeEditorState }) => {
       <Background />
       <Controls showInteractive={false} />
       <MiniMap pannable={true} zoomable={true} style={MINI_MAP_STYLE} />
+      <CubeNodeEditorPopper editorState={editorState} positions={positions} />
     </ReactFlow>
   );
 });
@@ -199,9 +221,10 @@ const CubeCanvasFlow = observer((props: { editorState: CubeEditorState }) => {
 /**
  * The query as a graph, laid out left to right (spec §17.3). Click a node to
  * edit it, Ctrl or Cmd-click it to run the query up to it, drag from a node's
- * output to another node's input to connect them. A palette item dropped
- * around the nodes is added unconnected. Right-click it, or a node, for the
- * context menu.
+ * output to another node's input to connect them. A transform dropped
+ * around the nodes goes after the selected node; a source, dropped anywhere,
+ * opens the source dialog on its tab (PLAN §11.8). Right-click it, or a
+ * node, for the context menu.
  */
 export const CubeCanvas = observer(
   (props: { editorState: CubeEditorState }) => {
@@ -210,7 +233,8 @@ export const CubeCanvas = observer(
     const [, dropConnector] = useDrop<CubePaletteDragItem>(
       () => ({
         accept: [CUBE_DND_TYPE.PALETTE_ITEM],
-        canDrop: () => !editorState.readOnly,
+        canDrop: (item) =>
+          !editorState.readOnly && canAddCubeNode(editorState, item.nodeType),
         // a node under the pointer, whether it took the drop or refused it,
         // keeps it from the canvas
         drop: (item, monitor) =>
@@ -231,21 +255,32 @@ export const CubeCanvas = observer(
       >
         <ContextMenu
           className="h-full w-full"
+          // an empty query has no menu: there is nothing to add after (U3)
+          disabled={editorState.document.query.isEmpty}
           content={<CubeCanvasContextMenu editorState={editorState} />}
           menuProps={{ elevation: 7 }}
         >
           {editorState.document.query.isEmpty ? (
             <div className="flex h-full items-center justify-center p-4 text-base text-[var(--color-text-secondary)]">
               <span>
-                No tables yet:{' '}
                 <button
                   className="text-[var(--color-accent)] underline disabled:text-[var(--color-text-disabled)] disabled:no-underline"
-                  disabled={editorState.readOnly}
-                  onClick={() => editorState.sourcePicker.open()}
+                  title={editorState.sourcePicker.disabledReason}
+                  disabled={
+                    editorState.sourcePicker.disabledReason !== undefined
+                  }
+                  onClick={() => editorState.sourcePicker.openToChoose()}
                 >
-                  add a table
+                  Connect to a source
                 </button>{' '}
-                to start.
+                to start a new one, or{' '}
+                <button
+                  className="text-[var(--color-accent)] underline"
+                  onClick={() => editorState.examples.open()}
+                >
+                  open an example
+                </button>
+                .
               </span>
             </div>
           ) : (

package/src/components/canvas/CubeCanvasContextMenu.tsx

@@ -18,21 +18,22 @@ import {
   MenuContent,
   MenuContentDivider,
   MenuContentItem,
-  MenuContentItemIcon,
-  MenuContentItemLabel,
 } from '@finos/legend-art';
-import type { AnyNodeDefinition } from '@finos/legend-cube';
 import { observer } from 'mobx-react-lite';
 import { forwardRef } from 'react';
 import type { CubeEditorState } from '../../stores/CubeEditorState.js';
-import { CubeNodeIcon } from '../CubeNodeIcon.js';
+import { CubeAddMenuItems } from '../CubeAddItems.js';
 
 /**
  * The canvas's context menu (spec §17.4): the palette, then what can be done
- * to the node it was opened on. On a node, a palette item is added after it;
- * around the nodes, on its own. Every item shows, disabled when it can't be
- * done, so Swap Inputs can be found. The node comes through props: a menu
- * opened around the nodes has none.
+ * to the node it was opened on. On a node, a transform is added after it;
+ * around the nodes, after the selected node; a source opens the source
+ * dialog on its tab (PLAN §11.8, U3 and U4). Every item shows, disabled when
+ * it can't be done, so Swap Inputs can be found. The node comes through
+ * props: a menu opened around the nodes has none. Each item applies the node
+ * editor first, so its edits are never dropped; a palette item adds nothing
+ * when they had to be. Swap Inputs on the edited node is its editor's own,
+ * which applies and follows it.
  */
 export const CubeCanvasContextMenu = observer(
   forwardRef<
@@ -41,45 +42,45 @@ export const CubeCanvasContextMenu = observer(
   >(function CubeCanvasContextMenu(props, ref) {
     const { editorState, nodeId } = props;
     const { query } = editorState.document;
-    const { registry } = editorState;
-    const paletteItem = (definition: AnyNodeDefinition): React.ReactNode => (
-      <MenuContentItem
-        key={definition.type}
-        disabled={!editorState.canAddNode(definition.type, nodeId)}
-        onClick={() => editorState.addNode(definition.type, nodeId)}
-      >
-        <MenuContentItemIcon>
-          <CubeNodeIcon icon={definition.icon} />
-        </MenuContentItemIcon>
-        <MenuContentItemLabel>
-          {definition.label}
-          {definition.beta ? ' (BETA)' : ''}
-        </MenuContentItemLabel>
-      </MenuContentItem>
-    );
+    const finishing =
+      (run: () => void): (() => void) =>
+      () => {
+        if (editorState.nodeEditor.finish()) {
+          run();
+        }
+      };
     return (
       <MenuContent ref={ref}>
-        {registry.sources.map(paletteItem)}
-        <MenuContentDivider />
-        {registry.transforms.map(paletteItem)}
+        <CubeAddMenuItems editorState={editorState} nodeId={nodeId} />
         <MenuContentDivider />
         <MenuContentItem
           title="Execute runs the query up to this node"
           disabled={nodeId === undefined || !query.canSelect(nodeId)}
-          onClick={() => nodeId !== undefined && editorState.select(nodeId)}
+          onClick={finishing(
+            () => nodeId !== undefined && editorState.select(nodeId),
+          )}
         >
           Select
         </MenuContentItem>
         <MenuContentItem
           disabled={nodeId === undefined || !editorState.canRemoveNode(nodeId)}
-          onClick={() => nodeId !== undefined && editorState.removeNode(nodeId)}
+          onClick={finishing(
+            () => nodeId !== undefined && editorState.removeNode(nodeId),
+          )}
         >
           Remove
         </MenuContentItem>
         <MenuContentItem
           title="Swap the node's two inputs, e.g. a Join's Left and Right"
           disabled={nodeId === undefined || !editorState.canSwapInputs(nodeId)}
-          onClick={() => nodeId !== undefined && editorState.swapInputs(nodeId)}
+          onClick={
+            nodeId !== undefined && nodeId === editorState.nodeEditor.nodeId
+              ? // its own editor applies, swaps and stays open on it
+                () => editorState.nodeEditor.swapInputs()
+              : finishing(
+                  () => nodeId !== undefined && editorState.swapInputs(nodeId),
+                )
+          }
         >
           Swap Inputs
         </MenuContentItem>

package/src/components/canvas/CubeCanvasDnd.ts

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import { addCubeNode, canAddCubeNode } from '../../stores/CubeAddPlacement.js';
 import type { CubeEditorState } from '../../stores/CubeEditorState.js';
 
 // Drag and drop on the canvas (spec §17.3): palette items and nodes are
@@ -42,8 +43,9 @@ const isNodeDragItem = (item: CubeDragItem): item is CubeNodeDragItem =>
 
 /**
  * Whether dropping the item on the node does anything, which also decides
- * whether the node lights up under it: a palette item is spliced in after
- * the node, another node connects to it or else moves after it
+ * whether the node lights up under it: a transform is spliced in after the
+ * node, another node connects to it or else moves after it. A source is the
+ * canvas's, whatever node it is dropped on (PLAN §11.8, U4).
  */
 export const canDropOnCubeNode = (
   editorState: CubeEditorState,
@@ -52,7 +54,8 @@ export const canDropOnCubeNode = (
 ): boolean =>
   isNodeDragItem(item)
     ? editorState.canDropNode(item.nodeId, targetId)
-    : editorState.canAddNode(item.nodeType, targetId);
+    : editorState.registry.get(item.nodeType)?.kind !== 'source' &&
+      canAddCubeNode(editorState, item.nodeType, targetId);
 
 export const dropOnCubeNode = (
   editorState: CubeEditorState,
@@ -62,21 +65,25 @@ export const dropOnCubeNode = (
   if (isNodeDragItem(item)) {
     editorState.dropNode(item.nodeId, targetId);
   } else {
-    editorState.addNode(item.nodeType, targetId);
+    addCubeNode(editorState, item.nodeType, targetId);
   }
 };
 
 /**
- * A palette item dropped on the canvas around the nodes: a transform is
- * added unconnected, a source opens the picker. A drop on a node is the
- * node's, taken or refused, never the canvas's.
+ * A palette item dropped on the canvas (PLAN §11.8, U3 and U4): a transform
+ * around the nodes goes after the selected node; a source opens the source
+ * dialog on its tab, even dropped on a node, which leaves it to the canvas.
+ * A transform dropped on a node is the node's, taken or refused.
  */
 export const dropOnCubeCanvas = (
   editorState: CubeEditorState,
   item: CubeDragItem,
   isOverNode: boolean,
 ): void => {
-  if (!isOverNode && !isNodeDragItem(item)) {
-    editorState.addNode(item.nodeType);
+  if (
+    !isNodeDragItem(item) &&
+    (!isOverNode || editorState.registry.get(item.nodeType)?.kind === 'source')
+  ) {
+    addCubeNode(editorState, item.nodeType);
   }
 };

package/src/components/canvas/CubeCanvasElements.ts

@@ -17,6 +17,7 @@
 import {
   isIncompleteError,
   isSchemasError,
+  isTypingError,
   type Query,
   type QueryNode,
 } from '@finos/legend-cube';
@@ -134,12 +135,17 @@ export const getCubeCanvasNodeStatus = (
   return {
     isCapture: editorState.document.query.selected === node.id,
     isInvalid: (ownErrors ?? []).some(
-      (error) => !isIncompleteError(error) && !isSchemasError(error),
+      (error) =>
+        !isIncompleteError(error) &&
+        !isSchemasError(error) &&
+        !isTypingError(error),
     ),
     isIncomplete: (ownErrors ?? []).some(
       (error) => isIncompleteError(error) || isSchemasError(error),
     ),
-    isResolving: editorState.isPendingSource(node),
+    // a source typed again, or an Extend waiting for its columns' types
+    isResolving:
+      editorState.isPendingSource(node) || editorState.isTypingNode(node),
     hasEngineError: editorState.hostIssues.has(node.id),
     hasWarnings: warnings.length > 0,
     tooltip: [

package/src/components/canvas/CubeCanvasNode.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { clsx, ContextMenu, WarningIcon } from '@finos/legend-art';
+import { clsx, ContextMenu, Tooltip, WarningIcon } from '@finos/legend-art';
 import { Handle, type NodeProps, Position } from '@xyflow/react';
 import { observer } from 'mobx-react-lite';
 import { useRef } from 'react';
@@ -55,7 +55,11 @@ export const CubeCanvasNode = observer(
     const [, dragConnector] = useDrag<CubeNodeDragItem>(
       () => ({
         type: CUBE_DND_TYPE.NODE,
-        item: { nodeId: node.id },
+        // the drop changes the query, so the open editor applies first
+        item: () => {
+          editorState.nodeEditor.finish();
+          return { nodeId: node.id };
+        },
         canDrag: () => !editorState.readOnly,
       }),
       [editorState, node.id],
@@ -94,49 +98,63 @@ export const CubeCanvasNode = observer(
             style={{ top: getInputHandleOffset(index, node.ports.length) }}
           />
         ))}
-        <div
-          ref={ref}
-          className={clsx(
-            // React Flow must leave the mouse to the HTML drag: 'nodrag' keeps
-            // it from moving the node, 'nopan' from panning the canvas
-            'legend-cube__node nodrag nopan flex h-full w-full items-center gap-2 rounded border bg-[var(--color-bg-panel)] px-2 text-base text-[var(--color-text-primary)]',
-            status.isInvalid
-              ? 'border-[var(--color-status-error)]'
-              : status.isIncomplete
-                ? 'border-dashed border-[var(--color-status-warn)]'
-                : 'border-[var(--color-border-default)]',
-            {
-              'legend-cube__node--selected ring-2 ring-[var(--color-accent)]':
-                status.isCapture,
-              'legend-cube__node--invalid': status.isInvalid,
-              'legend-cube__node--incomplete': status.isIncomplete,
-              'legend-cube__node--resolving animate-pulse': status.isResolving,
-              'legend-cube__node--engine-error bg-[var(--color-status-error-bg)]':
-                status.hasEngineError,
-              'legend-cube__node--warning': status.hasWarnings,
-              'legend-cube__node--drop-target outline-dashed outline-2 outline-[var(--color-accent)]':
-                isDropTarget,
-            },
-          )}
-          title={status.tooltip}
-          aria-current={status.isCapture}
-          data-testid={LEGEND_CUBE_TEST_ID.CANVAS_NODE}
+        <Tooltip
+          // after a moment, above the node, one message a line (U1(c))
+          title={<div className="whitespace-pre-line">{status.tooltip}</div>}
+          placement="top"
+          enterDelay={500}
+          enterNextDelay={500}
+          disableInteractive={true}
+          // it describes the node, whose name stays its description
+          describeChild={true}
+          slotProps={{ tooltip: { className: 'max-w-[40rem]' } }}
         >
-          <CubeNodeIcon
-            icon={editorState.registry.get(node.type)?.icon}
-            className="shrink-0 text-lg text-[var(--color-text-secondary)]"
-          />
-          <span className="line-clamp-2 min-w-0 break-words leading-tight">
-            {node.describe()}
-          </span>
-          {status.hasWarnings && (
-            // the warning's text is in the node's tooltip
-            <WarningIcon
-              className="ml-auto shrink-0 text-[var(--color-status-warn)]"
-              aria-hidden={true}
+          <div
+            ref={ref}
+            className={clsx(
+              // React Flow must leave the mouse to the HTML drag: 'nodrag' keeps
+              // it from moving the node, 'nopan' from panning the canvas
+              'legend-cube__node nodrag nopan flex h-full w-full items-center gap-2 rounded border bg-[var(--color-bg-panel)] px-2 text-base text-[var(--color-text-primary)]',
+              status.isInvalid
+                ? 'border-[var(--color-status-error)]'
+                : status.isIncomplete
+                  ? 'border-dashed border-[var(--color-status-warn)]'
+                  : 'border-[var(--color-border-default)]',
+              {
+                'legend-cube__node--selected ring-2 ring-[var(--color-accent)]':
+                  status.isCapture,
+                'legend-cube__node--invalid': status.isInvalid,
+                'legend-cube__node--incomplete': status.isIncomplete,
+                'legend-cube__node--resolving animate-pulse':
+                  status.isResolving,
+                'legend-cube__node--engine-error bg-[var(--color-status-error-bg)]':
+                  status.hasEngineError,
+                'legend-cube__node--warning': status.hasWarnings,
+                'legend-cube__node--drop-target outline-dashed outline-2 outline-[var(--color-accent)]':
+                  isDropTarget,
+              },
+            )}
+            // the tooltip's text, for assistive technology and tests
+            aria-description={status.tooltip}
+            aria-current={status.isCapture}
+            data-testid={LEGEND_CUBE_TEST_ID.CANVAS_NODE}
+          >
+            <CubeNodeIcon
+              icon={editorState.registry.get(node.type)?.icon}
+              className="shrink-0 text-lg text-[var(--color-text-secondary)]"
             />
-          )}
-        </div>
+            <span className="line-clamp-2 min-w-0 break-words leading-tight">
+              {node.describe()}
+            </span>
+            {status.hasWarnings && (
+              // the warning's text is in the node's tooltip
+              <WarningIcon
+                className="ml-auto shrink-0 text-[var(--color-status-warn)]"
+                aria-hidden={true}
+              />
+            )}
+          </div>
+        </Tooltip>
         <Handle
           id={CUBE_OUTPUT_HANDLE_ID}
           type="source"

package/src/components/canvas/CubeCanvasNodeFocus.ts

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2026-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Gives the keyboard focus back to a node on the canvas, as its editor
+ * closes from the keyboard (PLAN §11.8), when the focus was in the editor or
+ * nowhere: focus the user put elsewhere stays there
+ */
+export const returnFocusToCubeCanvasNode = (
+  nodeId: string,
+  editor: Element | null,
+  focused: Element | null,
+): void => {
+  if (
+    focused !== null &&
+    focused !== document.body &&
+    !editor?.contains(focused)
+  ) {
+    return;
+  }
+  Array.from(document.querySelectorAll<HTMLElement>('.react-flow__node'))
+    .find((element) => element.dataset.id === nodeId)
+    ?.focus();
+};