@mindlogic-ai/logician-ui 4.0.0-alpha.36 → 4.0.0-alpha.37

package/src/components/Workflow/createNode.ts

@@ -1,4 +1,10 @@
-import type { GraphNode } from './Workflow.types';
+import type {
+  GraphNode,
+  NodeTypeDef,
+  Position,
+  WorkflowTranslate,
+} from './Workflow.types';
+import { resolveDefaultConfig } from './Workflow.types';
 
 /**
  * Unique id for edges and other internal graph elements that aren't referenced
@@ -29,7 +35,10 @@ export function nextNodeId(
   nodes: ReadonlyArray<GraphNode>
 ): string {
   if (kind === 'start') return 'start';
-  const re = new RegExp(`^${kind}_(\\d+)$`);
+  // Escape the kind: namespaced kinds (`math.add`) would otherwise read `.` as
+  // a wildcard and count unrelated ids toward the counter.
+  const escaped = kind.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const re = new RegExp(`^${escaped}_(\\d+)$`);
   let max = 0;
   for (const n of nodes) {
     const m = re.exec(n.id);
@@ -65,3 +74,62 @@ export function cloneNode(
     config: structuredClone(node.config),
   };
 }
+
+/** String-only translator handed to `NodeTypeDef.localizeDefaults`. */
+export type DefaultsTranslate = (
+  key: string,
+  params?: Record<string, string>
+) => string;
+
+/**
+ * Tear the string lookup off the host translator so `localizeDefaults` doesn't
+ * depend on the React-fragment interpolation path.
+ */
+export function toDefaultsTranslate(
+  translate: WorkflowTranslate
+): DefaultsTranslate {
+  return (key, params) => translate(key, params) as string;
+}
+
+/**
+ * Build a fresh node of `def`'s kind — the ONE place a node is created from a
+ * node type, shared by the palette drop and `useWorkflowActions().addNode`, so
+ * both paths produce the same id and starting config:
+ *
+ * - id: `nextNodeId` (`{kind}_{N}`), so authors can type it into `{{...}}`
+ *   references — the same scheme duplicate/paste use;
+ * - config: `defaultConfig`, then `localizeDefaults(translate)`, then
+ *   `hostDefaults(hostBridge)`, each shallow-merged over the previous.
+ */
+export function createNodeFromType(
+  def: NodeTypeDef,
+  {
+    position,
+    nodes,
+    translate,
+    hostBridge,
+  }: {
+    position: Position;
+    /** Current node list — continues the per-kind id counter. */
+    nodes: ReadonlyArray<GraphNode>;
+    translate: DefaultsTranslate;
+    hostBridge?: unknown;
+  }
+): GraphNode {
+  const base = resolveDefaultConfig(def) as Record<string, unknown>;
+  const overlay = def.localizeDefaults?.(translate) as
+    | Record<string, unknown>
+    | undefined;
+  // Host-data overlay (e.g. a starting LLM picked from the tenant's live model
+  // list) — applied last so it wins over any static placeholder in
+  // `defaultConfig`. Absent on a generic host, leaving the static defaults.
+  const bridged = def.hostDefaults?.(hostBridge) as
+    | Record<string, unknown>
+    | undefined;
+  return {
+    id: nextNodeId(def.kind, nodes),
+    kind: def.kind,
+    position,
+    config: { ...base, ...overlay, ...bridged },
+  };
+}

package/src/components/Workflow/index.ts

@@ -35,6 +35,14 @@ export {
 } from './graphObserver';
 export type { GraphAction } from './graphReducer';
 export { emptyGraph, graphReducer } from './graphReducer';
+export type {
+  AddAfterSource,
+  AddNodeOptions,
+  AddNodeResult,
+  AddNodeTarget,
+  WorkflowActions,
+} from './useWorkflowActions';
+export { useWorkflowActions } from './useWorkflowActions';
 export { Workflow } from './Workflow';
 export type {
   ConnectionCtx,

package/src/components/Workflow/layout/autoLayout.ts

@@ -122,11 +122,11 @@ function orderEdgesForDagre(
  * height is a typical two-row card. Callers should pass real measured sizes
  * when available so ranks pack tightly.
  */
-const FALLBACK_WIDTH = parseInt(CARD_WIDTH, 10);
-const FALLBACK_HEIGHT = 76;
+export const FALLBACK_WIDTH = parseInt(CARD_WIDTH, 10);
+export const FALLBACK_HEIGHT = 76;
 
-const DEFAULT_RANK_GAP = 80;
-const DEFAULT_NODE_GAP = 40;
+export const DEFAULT_RANK_GAP = 80;
+export const DEFAULT_NODE_GAP = 40;
 
 /**
  * Compute a tidy, hierarchical layout for a workflow graph and return a new

package/src/components/Workflow/placement.test.ts

@@ -0,0 +1,156 @@
+import { describe, expect, it } from 'vitest';
+
+import { findFreeExit, planNodePlacement } from './placement';
+import type { Graph, GraphNode, NodeTypeDef } from './Workflow.types';
+
+// Handle shapes of FactChat's start / agent / end / note / classify types.
+const HANDLES: Record<string, NodeTypeDef['handles']> = {
+  start: () => ({ inputs: [], outputs: [{ id: 'out' }] }),
+  agent: () => ({ inputs: [{ id: 'in' }], outputs: [{ id: 'out' }] }),
+  end: () => ({ inputs: [{ id: 'in' }], outputs: [] }),
+  note: () => ({ inputs: [], outputs: [] }),
+  classify: () => ({
+    inputs: [{ id: 'in' }],
+    outputs: [{ id: 'cat_a' }, { id: 'cat_b' }],
+  }),
+};
+const getNodeType = (kind: string) =>
+  HANDLES[kind] ? ({ kind, handles: HANDLES[kind] } as NodeTypeDef) : undefined;
+
+const node = (id: string, kind: string, x = 0, y = 0): GraphNode => ({
+  id,
+  kind,
+  position: { x, y },
+  config: {},
+});
+
+const plan = (
+  graph: Graph,
+  kind: string,
+  after: string | null,
+  types: typeof getNodeType = getNodeType
+) =>
+  planNodePlacement({
+    graph,
+    getNodeType: types,
+    node: node(`${kind}_9`, kind),
+    target: after ? { after } : { at: 'viewportCenter' },
+    viewportCenter: { x: 500, y: 300 },
+    edgeId: 'e_new',
+  });
+
+describe('planNodePlacement', () => {
+  const start = node('start', 'start');
+
+  it('places the node right of the source and connects its free exit', () => {
+    const result = plan({ nodes: [start], edges: [] }, 'agent', 'start');
+
+    // 174 (card width) + 80 (rank gap).
+    expect(result.position).toEqual({ x: 254, y: 0 });
+    expect(result.edge).toEqual({
+      id: 'e_new',
+      source: 'start',
+      target: 'agent_9',
+      sourceHandle: 'out',
+      targetHandle: 'in',
+    });
+  });
+
+  it('uses the measured source width when React Flow has one', () => {
+    const result = planNodePlacement({
+      graph: { nodes: [start], edges: [] },
+      getNodeType,
+      node: node('agent_9', 'agent'),
+      target: { after: 'start' },
+      viewportCenter: { x: 0, y: 0 },
+      edgeId: 'e_new',
+      getNodeSize: (id) =>
+        id === 'start' ? { width: 300, height: 90 } : undefined,
+    });
+    expect(result.position).toEqual({ x: 380, y: 0 });
+  });
+
+  it('moves the node down when the spot to the right is taken', () => {
+    const blocker = node('agent_1', 'agent', 254, 0);
+    const result = plan({ nodes: [start, blocker], edges: [] }, 'end', 'start');
+
+    // 0 + 76 (fallback height) + 40 (node gap).
+    expect(result.position).toEqual({ x: 254, y: 116 });
+  });
+
+  it('centres an unconnected node in the viewport for { at: viewportCenter }', () => {
+    const result = plan({ nodes: [start], edges: [] }, 'agent', null);
+
+    expect(result.position).toEqual({ x: 413, y: 262 });
+    expect(result.edge).toBeNull();
+  });
+
+  it('falls back to the viewport centre when the node has no free exit', () => {
+    const end = node('end_1', 'end', 400, 0);
+    const taken: Graph = {
+      nodes: [start, end],
+      edges: [{ id: 'e_1', source: 'start', target: 'end_1' }],
+    };
+
+    // From End (no exits), and from Start whose only exit is taken.
+    for (const after of ['end_1', 'start', 'missing']) {
+      const result = plan(taken, 'agent', after);
+      expect(result.edge).toBeNull();
+      expect(result.position).toEqual({ x: 413, y: 262 });
+    }
+  });
+
+  it('places a Note right of the source but adds no edge into it', () => {
+    const result = plan({ nodes: [start], edges: [] }, 'note', 'start');
+
+    expect(result.position).toEqual({ x: 254, y: 0 });
+    expect(result.edge).toBeNull();
+  });
+
+  it('wires the next free exit of a multi-exit node', () => {
+    const classify = node('classify_1', 'classify');
+    const graph: Graph = {
+      nodes: [classify],
+      edges: [
+        { id: 'e_1', source: 'classify_1', target: 'x', sourceHandle: 'cat_a' },
+      ],
+    };
+    expect(plan(graph, 'agent', 'classify_1').edge?.sourceHandle).toBe('cat_b');
+  });
+
+  it('respects canConnect on either endpoint', () => {
+    const rejectingTarget = (kind: string) => {
+      const def = getNodeType(kind);
+      return def && kind === 'agent'
+        ? { ...def, canConnect: () => 'agents cannot follow start' }
+        : def;
+    };
+    const result = plan(
+      { nodes: [start], edges: [] },
+      'agent',
+      'start',
+      rejectingTarget
+    );
+    // Still placed after the source, just not wired.
+    expect(result.position).toEqual({ x: 254, y: 0 });
+    expect(result.edge).toBeNull();
+  });
+});
+
+describe('findFreeExit', () => {
+  it('treats an edge without sourceHandle as sitting on the first exit', () => {
+    const graph: Graph = {
+      nodes: [node('classify_1', 'classify')],
+      edges: [{ id: 'e_1', source: 'classify_1', target: 'x' }],
+    };
+    expect(findFreeExit(graph, getNodeType, 'classify_1')?.sourceHandle).toBe(
+      'cat_b'
+    );
+  });
+
+  it('returns null for no node id', () => {
+    expect(findFreeExit({ nodes: [], edges: [] }, getNodeType, null)).toBe(
+      null
+    );
+  });
+});

package/src/components/Workflow/placement.ts

@@ -0,0 +1,172 @@
+import { isValidConnection } from './connectionRules';
+import {
+  DEFAULT_NODE_GAP,
+  DEFAULT_RANK_GAP,
+  FALLBACK_HEIGHT,
+  FALLBACK_WIDTH,
+} from './layout/autoLayout';
+import type {
+  Graph,
+  GraphEdge,
+  GraphNode,
+  NodeTypeDef,
+  Position,
+} from './Workflow.types';
+
+type GetNodeType = (kind: string) => NodeTypeDef | undefined;
+
+export type NodeSize = { width: number; height: number };
+
+/**
+ * Size assumed for a node React Flow has not measured yet — including the node
+ * being added. Same fallback auto-arrange uses.
+ */
+export const FALLBACK_NODE_SIZE: NodeSize = {
+  width: FALLBACK_WIDTH,
+  height: FALLBACK_HEIGHT,
+};
+
+/**
+ * Where `addNode` puts a new node.
+ *
+ * - `{ after: nodeId }` — to the right of that node, wired from its first free
+ *   exit. Falls back to `{ at: 'viewportCenter' }` when the node is unknown or
+ *   has no free exit (End, Note, every exit already holds its one edge).
+ * - `{ at: 'viewportCenter' }` — unconnected, centred in the visible canvas.
+ */
+export type AddNodeTarget = { after: string } | { at: 'viewportCenter' };
+
+/**
+ * A node's first exit with no outbound edge, or `null` when the node is
+ * unknown, has no exits (End, Note) or every exit already holds its one edge.
+ * An edge without a `sourceHandle` sits on the first exit (see
+ * `existingEdgeFromHandle`).
+ */
+export function findFreeExit(
+  graph: Graph,
+  getNodeType: GetNodeType,
+  nodeId: string | null | undefined
+): { node: GraphNode; sourceHandle: string } | null {
+  if (!nodeId) return null;
+  const node = graph.nodes.find((n) => n.id === nodeId);
+  if (!node) return null;
+  const outputs = getNodeType(node.kind)?.handles(node.config).outputs ?? [];
+  const free = outputs.find(
+    (handle) =>
+      !graph.edges.some(
+        (edge) =>
+          edge.source === node.id &&
+          (edge.sourceHandle ?? outputs[0].id) === handle.id
+      )
+  );
+  return free ? { node, sourceHandle: free.id } : null;
+}
+
+const overlaps = (a: Position, aSize: NodeSize, b: Position, bSize: NodeSize) =>
+  a.x < b.x + bSize.width &&
+  a.x + aSize.width > b.x &&
+  a.y < b.y + bSize.height &&
+  a.y + aSize.height > b.y;
+
+/** Moves `start` down until a fallback-sized card there covers no node. */
+function nudgeToFreeSpot(
+  start: Position,
+  nodes: ReadonlyArray<GraphNode>,
+  getNodeSize: (id: string) => NodeSize | undefined
+): Position {
+  const position = { ...start };
+  // Each pass clears at least one node, so this ends within nodes.length passes.
+  for (let pass = 0; pass <= nodes.length; pass += 1) {
+    const blocker = nodes.find((n) =>
+      overlaps(
+        position,
+        FALLBACK_NODE_SIZE,
+        n.position,
+        getNodeSize(n.id) ?? FALLBACK_NODE_SIZE
+      )
+    );
+    if (!blocker) break;
+    const blockerHeight = (getNodeSize(blocker.id) ?? FALLBACK_NODE_SIZE)
+      .height;
+    position.y = blocker.position.y + blockerHeight + DEFAULT_NODE_GAP;
+  }
+  return position;
+}
+
+export type PlanNodePlacementArgs = {
+  graph: Graph;
+  getNodeType: GetNodeType;
+  /** The node being added; its `position` is ignored and replaced. */
+  node: GraphNode;
+  target: AddNodeTarget;
+  /** Flow coordinates of the visible canvas centre. */
+  viewportCenter: Position;
+  /** Id for the auto-connect edge, used only when one is created. */
+  edgeId: string;
+  /** Measured size of an existing node, when React Flow has one. */
+  getNodeSize?: (id: string) => NodeSize | undefined;
+};
+
+/**
+ * Where an added node goes and which edge, if any, wires it in. Pure — the
+ * `addNode` action feeds it the live graph, viewport and measured sizes.
+ *
+ * With `{ after }` on a node that has a free exit, the new node goes to that
+ * node's right and an edge runs from the exit into the new node's first entry.
+ * The edge is dropped (the node still goes to the right) when the new kind has
+ * no entry (Note) or the connection fails `isValidConnection` — which runs both
+ * node types' `canConnect` hooks, the same rules a manual drag obeys. Every
+ * other case lands unconnected at the viewport centre. Either way the node
+ * moves down past any node already in that spot.
+ */
+export function planNodePlacement({
+  graph,
+  getNodeType,
+  node,
+  target,
+  viewportCenter,
+  edgeId,
+  getNodeSize = () => undefined,
+}: PlanNodePlacementArgs): { position: Position; edge: GraphEdge | null } {
+  const source =
+    'after' in target ? findFreeExit(graph, getNodeType, target.after) : null;
+
+  if (!source) {
+    const centered = {
+      x: viewportCenter.x - FALLBACK_NODE_SIZE.width / 2,
+      y: viewportCenter.y - FALLBACK_NODE_SIZE.height / 2,
+    };
+    return {
+      position: nudgeToFreeSpot(centered, graph.nodes, getNodeSize),
+      edge: null,
+    };
+  }
+
+  const sourceSize = getNodeSize(source.node.id) ?? FALLBACK_NODE_SIZE;
+  const position = nudgeToFreeSpot(
+    {
+      x: source.node.position.x + sourceSize.width + DEFAULT_RANK_GAP,
+      y: source.node.position.y,
+    },
+    graph.nodes,
+    getNodeSize
+  );
+
+  const placed: GraphNode = { ...node, position };
+  const targetHandle = getNodeType(node.kind)?.handles(node.config).inputs[0]
+    ?.id;
+  if (!targetHandle) return { position, edge: null };
+
+  const connection = {
+    source: source.node.id,
+    target: node.id,
+    sourceHandle: source.sourceHandle,
+    targetHandle,
+  };
+  const withNode: Graph = { ...graph, nodes: [...graph.nodes, placed] };
+  if (!isValidConnection(connection, withNode, getNodeType)) {
+    return { position, edge: null };
+  }
+
+  return { position, edge: { id: edgeId, ...connection } };
+}

package/src/components/Workflow/stories/Workflow.stories.tsx

@@ -2,11 +2,16 @@ import { Box, HStack, VStack } from '@chakra-ui/react';
 import type { Meta, StoryFn } from '@storybook/react';
 import { useState } from 'react';
 
+import { Button } from '@/components/Button';
+import { PlusIcon } from '@/components/Icon';
+import { IconButton } from '@/components/IconButton';
 import { Subtext, Subtitle } from '@/components/Typography';
 
 import { NodeInspector } from '../canvas/DrawerShell';
+import { useWorkflowActions } from '../useWorkflowActions';
 import { Workflow } from '../Workflow';
 import type { Graph, WorkflowSelection } from '../Workflow.types';
+import { useWorkflow } from '../WorkflowContext';
 import { toyGraph, toyNodeTypes } from './toyNodeTypes';
 
 /**
@@ -109,3 +114,77 @@ export const LeftDockedInspector: StoryFn<typeof Workflow> = () => (
     <NodeInspector dock="left" />
   </Workflow>
 );
+
+/** "+" beside the selected node: adds an Add node wired after it. */
+function AddAfterButton({ nodeId }: { nodeId: string }) {
+  const { addNode, getAddAfterSource } = useWorkflowActions();
+  const source = getAddAfterSource(nodeId);
+  if (!source) return null;
+  return (
+    <IconButton
+      aria-label={`Add after ${source.label}`}
+      size="sm"
+      variant="solid"
+      colorPalette="primary"
+      borderRadius="full"
+      onClick={() => addNode('math.add', { after: nodeId })}
+    >
+      <PlusIcon boxSize="xs" aria-hidden />
+    </IconButton>
+  );
+}
+
+/** Click-to-add list — what a touch palette does instead of drag-and-drop. */
+function TapPalette() {
+  const { nodeTypes, editor } = useWorkflow();
+  const { addNode, getAddAfterSource } = useWorkflowActions();
+  const source = getAddAfterSource(editor.selectedNodeId);
+  return (
+    <VStack
+      w="240px"
+      p={4}
+      align="stretch"
+      borderLeftWidth="1px"
+      borderColor="border.default"
+      bg="bg.surface"
+    >
+      <Subtitle>Tap to add</Subtitle>
+      <Subtext color="slate.500" data-testid="add-target">
+        {source ? `Connect after ${source.label}` : 'Add at the centre'}
+      </Subtext>
+      {Object.values(nodeTypes).map((def) => (
+        <Button
+          key={def.kind}
+          size="sm"
+          variant="outline"
+          onClick={() =>
+            addNode(
+              def.kind,
+              source ? { after: source.nodeId } : { at: 'viewportCenter' }
+            )
+          }
+        >
+          {def.label}
+        </Button>
+      ))}
+    </VStack>
+  );
+}
+
+/**
+ * `useWorkflowActions().addNode` + `renderSelectedNodeToolbar`: add nodes
+ * without drag-and-drop. Select a node and press its "+" (or a button in the
+ * side list) to add a node wired from its first free exit; with nothing
+ * selected — or a node with no free exit — the node lands at the view centre.
+ * One undo (⌘Z) reverts node and edge together.
+ */
+export const AddNodeWithoutDrag: StoryFn<typeof Workflow> = () => (
+  <Workflow
+    nodeTypes={toyNodeTypes}
+    defaultGraph={toyGraph as Graph}
+    showPalette={false}
+    renderSelectedNodeToolbar={(node) => <AddAfterButton nodeId={node.id} />}
+  >
+    <TapPalette />
+  </Workflow>
+);