@mindlogic-ai/logician-ui 3.1.0 → 3.2.0-alpha.0

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

@@ -0,0 +1,178 @@
+import { describe, expect, it } from 'vitest';
+
+import { historyReducer, initHistory, MAX_HISTORY } from './graphHistory';
+import { emptyGraph } from './graphReducer';
+import type { GraphNode } from './Workflow.types';
+
+const node = (id: string): GraphNode => ({
+  id,
+  kind: 'x',
+  position: { x: 0, y: 0 },
+  config: {},
+});
+
+describe('historyReducer', () => {
+  it('records a step and undoes it', () => {
+    const start = initHistory(emptyGraph);
+    const added = historyReducer(start, { type: 'addNode', node: node('n1') });
+    expect(added.present.nodes).toHaveLength(1);
+    expect(added.past).toHaveLength(1);
+
+    const undone = historyReducer(added, { type: 'undo' });
+    expect(undone.present.nodes).toHaveLength(0);
+    expect(undone.future).toHaveLength(1);
+  });
+
+  it('redoes an undone step', () => {
+    let state = initHistory(emptyGraph);
+    state = historyReducer(state, { type: 'addNode', node: node('n1') });
+    state = historyReducer(state, { type: 'undo' });
+    state = historyReducer(state, { type: 'redo' });
+    expect(state.present.nodes).toHaveLength(1);
+    expect(state.future).toHaveLength(0);
+  });
+
+  it('is a no-op when there is nothing to undo or redo', () => {
+    const start = initHistory(emptyGraph);
+    expect(historyReducer(start, { type: 'undo' })).toBe(start);
+    expect(historyReducer(start, { type: 'redo' })).toBe(start);
+  });
+
+  it('drops the redo stack once a new edit lands', () => {
+    let state = initHistory(emptyGraph);
+    state = historyReducer(state, { type: 'addNode', node: node('n1') });
+    state = historyReducer(state, { type: 'undo' });
+    expect(state.future).toHaveLength(1);
+    state = historyReducer(state, { type: 'addNode', node: node('n2') });
+    expect(state.future).toHaveLength(0);
+  });
+
+  it('coalesces consecutive config edits to the same node', () => {
+    let state = initHistory({ nodes: [node('n1')], edges: [] });
+    state = historyReducer(state, {
+      type: 'updateNodeConfig',
+      id: 'n1',
+      config: { v: 1 },
+    });
+    state = historyReducer(state, {
+      type: 'updateNodeConfig',
+      id: 'n1',
+      config: { v: 2 },
+    });
+    // Two edits to one node = one undo step back to the original config.
+    expect(state.past).toHaveLength(1);
+    const undone = historyReducer(state, { type: 'undo' });
+    expect(undone.present.nodes[0].config).toEqual({});
+  });
+
+  it('coalesces consecutive label edits to the same edge and undoes them', () => {
+    let state = initHistory({
+      nodes: [node('a'), node('b')],
+      edges: [{ id: 'e', source: 'a', target: 'b' }],
+    });
+    state = historyReducer(state, {
+      type: 'updateEdge',
+      id: 'e',
+      patch: { label: 'y' },
+    });
+    state = historyReducer(state, {
+      type: 'updateEdge',
+      id: 'e',
+      patch: { label: 'ye' },
+    });
+    state = historyReducer(state, {
+      type: 'updateEdge',
+      id: 'e',
+      patch: { label: 'yes' },
+    });
+    // Three keystrokes to one edge collapse into a single undo step.
+    expect(state.past).toHaveLength(1);
+    expect(state.present.edges[0].label).toBe('yes');
+    const undone = historyReducer(state, { type: 'undo' });
+    expect(undone.present.edges[0].label).toBeUndefined();
+  });
+
+  it('does not coalesce edits to different nodes', () => {
+    let state = initHistory({ nodes: [node('n1'), node('n2')], edges: [] });
+    state = historyReducer(state, {
+      type: 'updateNodeConfig',
+      id: 'n1',
+      config: { v: 1 },
+    });
+    state = historyReducer(state, {
+      type: 'updateNodeConfig',
+      id: 'n2',
+      config: { v: 1 },
+    });
+    expect(state.past).toHaveLength(2);
+  });
+
+  it('does not record a step for a no-op action', () => {
+    let state = initHistory(emptyGraph);
+    state = historyReducer(state, { type: 'addNode', node: node('n1') });
+    // Re-adding an existing id is a no-op in graphReducer (same reference) —
+    // it must not push a history step.
+    const after = historyReducer(state, {
+      type: 'addNode',
+      node: node('n1'),
+    });
+    expect(after).toBe(state);
+  });
+
+  it('clears history on replace', () => {
+    let state = initHistory(emptyGraph);
+    state = historyReducer(state, { type: 'addNode', node: node('n1') });
+    state = historyReducer(state, {
+      type: 'replace',
+      graph: { nodes: [node('n2')], edges: [] },
+    });
+    expect(state.past).toHaveLength(0);
+    expect(state.future).toHaveLength(0);
+    expect(historyReducer(state, { type: 'undo' })).toBe(state);
+  });
+
+  it('records an arrange as one undo step without clearing prior history', () => {
+    let state = initHistory({ nodes: [node('n1')], edges: [] });
+    // A real edit first, so we can prove the arrange preserves it.
+    state = historyReducer(state, {
+      type: 'updateNodeConfig',
+      id: 'n1',
+      config: { v: 1 },
+    });
+    state = historyReducer(state, {
+      type: 'arrangeNodes',
+      positions: { n1: { x: 200, y: 100 } },
+    });
+    // Two distinct undo steps (the edit + the arrange) — unlike `replace`,
+    // which would have reset the stack.
+    expect(state.past).toHaveLength(2);
+    expect(state.present.nodes[0].position).toEqual({ x: 200, y: 100 });
+    // One undo reverts just the arrange; the config edit survives.
+    const undone = historyReducer(state, { type: 'undo' });
+    expect(undone.present.nodes[0].position).toEqual({ x: 0, y: 0 });
+    expect(undone.present.nodes[0].config).toEqual({ v: 1 });
+  });
+
+  it('caps the past stack at MAX_HISTORY', () => {
+    let state = initHistory(emptyGraph);
+    for (let i = 0; i < MAX_HISTORY + 10; i++) {
+      state = historyReducer(state, { type: 'addNode', node: node(`n${i}`) });
+    }
+    expect(state.past).toHaveLength(MAX_HISTORY);
+  });
+
+  it('reverts an auto-connected node and its edge together in one undo', () => {
+    let state = initHistory({ nodes: [node('a')], edges: [] });
+    state = historyReducer(state, {
+      type: 'addNodeWithEdge',
+      node: { id: 'b', kind: 'agent', position: { x: 100, y: 0 }, config: {} },
+      autoConnectFrom: { edge: { id: 'e1', source: 'a', target: 'b' } },
+    });
+    expect(state.present.nodes).toHaveLength(2);
+    expect(state.present.edges).toHaveLength(1);
+    // A single undo must remove BOTH the node and the auto-created edge.
+    state = historyReducer(state, { type: 'undo' });
+    expect(state.present.nodes).toHaveLength(1);
+    expect(state.present.edges).toHaveLength(0);
+  });
+});

package/src/components/Workflow/graphHistory.ts

@@ -0,0 +1,91 @@
+import { type GraphAction, graphReducer } from './graphReducer';
+import type { Graph } from './Workflow.types';
+
+/** Max retained undo steps. Older steps are dropped once exceeded. */
+export const MAX_HISTORY = 50;
+
+export type HistoryState = {
+  past: Graph[];
+  present: Graph;
+  future: Graph[];
+  /**
+   * Coalescing key of the action that produced `present`. A new action with
+   * the same key merges into the current step instead of pushing a new one,
+   * so a burst of edits to one node stays a single undo unit.
+   */
+  lastKey: string | null;
+};
+
+export type HistoryAction = GraphAction | { type: 'undo' } | { type: 'redo' };
+
+export const initHistory = (graph: Graph): HistoryState => ({
+  past: [],
+  present: graph,
+  future: [],
+  lastKey: null,
+});
+
+/**
+ * Key used to collapse a run of edits into one undo step. `updateNodeConfig`
+ * / `updateNodePosition` targeting the same node coalesce (typing a prompt or
+ * dragging a node is one undo); structural actions return `null` (never
+ * coalesce).
+ */
+const coalesceKey = (action: GraphAction): string | null => {
+  switch (action.type) {
+    case 'updateNodeConfig':
+    case 'updateNodePosition':
+    case 'updateEdge':
+      return `${action.type}:${action.id}`;
+    default:
+      return null;
+  }
+};
+
+export function historyReducer(
+  state: HistoryState,
+  action: HistoryAction
+): HistoryState {
+  if (action.type === 'undo') {
+    if (state.past.length === 0) return state;
+    return {
+      past: state.past.slice(0, -1),
+      present: state.past[state.past.length - 1],
+      future: [state.present, ...state.future],
+      lastKey: null,
+    };
+  }
+
+  if (action.type === 'redo') {
+    if (state.future.length === 0) return state;
+    const [next, ...rest] = state.future;
+    return {
+      past: [...state.past, state.present],
+      present: next,
+      future: rest,
+      lastKey: null,
+    };
+  }
+
+  const present = graphReducer(state.present, action);
+  // Pure no-op actions (dedupe guards, unknown ids) must not create history.
+  if (present === state.present) return state;
+
+  // `replace` is an external resync (draft load, server push), not a user
+  // edit — it establishes a fresh baseline, so history is cleared.
+  if (action.type === 'replace') {
+    return { past: [], present, future: [], lastKey: null };
+  }
+
+  const key = coalesceKey(action);
+  if (key !== null && key === state.lastKey) {
+    return { ...state, present };
+  }
+
+  return {
+    past: [...state.past, state.present].slice(-MAX_HISTORY),
+    present,
+    future: [],
+    lastKey: key,
+  };
+}

package/src/components/Workflow/graphObserver.ts

@@ -0,0 +1,21 @@
+'use client';
+
+import { createContext, useContext } from 'react';
+
+import type { Graph } from './Workflow.types';
+
+/**
+ * Optional ancestor-provided hook to observe an uncontrolled <Workflow>'s
+ * graph without taking over its state (which `graph` + `onGraphChange` would).
+ *
+ * Used by the Storybook JSON-preview decorator so every story can render the
+ * serialized graph payload. No provider exists in production, so <Workflow>
+ * treats it as a no-op.
+ */
+export type WorkflowGraphObserver = (graph: Graph) => void;
+
+export const WorkflowGraphObserverContext =
+  createContext<WorkflowGraphObserver | null>(null);
+
+export const useWorkflowGraphObserver = () =>
+  useContext(WorkflowGraphObserverContext);

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

@@ -0,0 +1,314 @@
+import { describe, expect, it } from 'vitest';
+
+import { emptyGraph, graphReducer } from './graphReducer';
+import type { Graph } from './Workflow.types';
+
+describe('graphReducer', () => {
+  it('adds and removes a node', () => {
+    const afterAdd = graphReducer(emptyGraph, {
+      type: 'addNode',
+      node: { id: 'n1', kind: 'x', position: { x: 0, y: 0 }, config: {} },
+    });
+    expect(afterAdd.nodes).toHaveLength(1);
+    const afterDelete = graphReducer(afterAdd, {
+      type: 'deleteNode',
+      id: 'n1',
+    });
+    expect(afterDelete.nodes).toHaveLength(0);
+  });
+
+  it('deduplicates node ids', () => {
+    const base = graphReducer(emptyGraph, {
+      type: 'addNode',
+      node: { id: 'n1', kind: 'x', position: { x: 0, y: 0 }, config: {} },
+    });
+    const after = graphReducer(base, {
+      type: 'addNode',
+      node: { id: 'n1', kind: 'x', position: { x: 0, y: 0 }, config: {} },
+    });
+    expect(after).toBe(base);
+  });
+
+  it('arranges nodes to the given positions', () => {
+    const g: Graph = {
+      nodes: [
+        { id: 'a', kind: 'x', position: { x: 0, y: 0 }, config: {} },
+        { id: 'b', kind: 'x', position: { x: 0, y: 0 }, config: {} },
+      ],
+      edges: [],
+    };
+    const after = graphReducer(g, {
+      type: 'arrangeNodes',
+      positions: { a: { x: 10, y: 20 }, b: { x: 30, y: 40 } },
+    });
+    expect(after.nodes).toEqual([
+      { id: 'a', kind: 'x', position: { x: 10, y: 20 }, config: {} },
+      { id: 'b', kind: 'x', position: { x: 30, y: 40 }, config: {} },
+    ]);
+  });
+
+  it('keeps a node missing from the arrange map at its current position', () => {
+    const g: Graph = {
+      nodes: [
+        { id: 'a', kind: 'x', position: { x: 1, y: 1 }, config: {} },
+        { id: 'b', kind: 'x', position: { x: 2, y: 2 }, config: {} },
+      ],
+      edges: [],
+    };
+    const after = graphReducer(g, {
+      type: 'arrangeNodes',
+      positions: { a: { x: 10, y: 20 } },
+    });
+    expect(after.nodes[0].position).toEqual({ x: 10, y: 20 });
+    expect(after.nodes[1].position).toEqual({ x: 2, y: 2 });
+  });
+
+  it('is a no-op (same reference) when an arrange moves nothing', () => {
+    const g: Graph = {
+      nodes: [{ id: 'a', kind: 'x', position: { x: 5, y: 5 }, config: {} }],
+      edges: [],
+    };
+    const after = graphReducer(g, {
+      type: 'arrangeNodes',
+      positions: { a: { x: 5, y: 5 } },
+    });
+    expect(after).toBe(g);
+  });
+
+  it('deleting a node cascades its edges', () => {
+    const g = {
+      nodes: [
+        { id: 'a', kind: 'x', position: { x: 0, y: 0 }, config: {} },
+        { id: 'b', kind: 'x', position: { x: 0, y: 0 }, config: {} },
+      ],
+      edges: [{ id: 'e', source: 'a', target: 'b' }],
+    };
+    const after = graphReducer(g, { type: 'deleteNode', id: 'a' });
+    expect(after.edges).toHaveLength(0);
+  });
+
+  it('updates node config and position immutably', () => {
+    const g = graphReducer(emptyGraph, {
+      type: 'addNode',
+      node: { id: 'n', kind: 'x', position: { x: 0, y: 0 }, config: { v: 1 } },
+    });
+    const moved = graphReducer(g, {
+      type: 'updateNodePosition',
+      id: 'n',
+      position: { x: 5, y: 5 },
+    });
+    expect(moved.nodes[0].position).toEqual({ x: 5, y: 5 });
+    expect(g.nodes[0].position).toEqual({ x: 0, y: 0 });
+
+    const updated = graphReducer(moved, {
+      type: 'updateNodeConfig',
+      id: 'n',
+      config: { v: 2 },
+    });
+    expect(updated.nodes[0].config).toEqual({ v: 2 });
+  });
+
+  it('updateNodeConfig remaps an outbound edge handle atomically', () => {
+    const g: Graph = {
+      nodes: [
+        { id: 'c', kind: 'classify', position: { x: 0, y: 0 }, config: {} },
+        { id: 'a', kind: 'agent', position: { x: 0, y: 0 }, config: {} },
+      ],
+      edges: [
+        { id: 'e1', source: 'c', target: 'a', sourceHandle: 'cat_old' },
+        { id: 'e2', source: 'c', target: 'a', sourceHandle: 'cat_keep' },
+      ],
+    };
+    const after = graphReducer(g, {
+      type: 'updateNodeConfig',
+      id: 'c',
+      config: { renamed: true },
+      remapEdgeHandle: { from: 'cat_old', to: 'cat_new' },
+    });
+    expect(after.nodes[0].config).toEqual({ renamed: true });
+    expect(after.edges.find((e) => e.id === 'e1')?.sourceHandle).toBe(
+      'cat_new'
+    );
+    // Untouched: a different handle on the same node, and other nodes.
+    expect(after.edges.find((e) => e.id === 'e2')?.sourceHandle).toBe(
+      'cat_keep'
+    );
+  });
+
+  it('rejects duplicate edges between the same handles', () => {
+    const g = {
+      nodes: [
+        { id: 'a', kind: 'x', position: { x: 0, y: 0 }, config: {} },
+        { id: 'b', kind: 'x', position: { x: 0, y: 0 }, config: {} },
+      ],
+      edges: [
+        {
+          id: 'e1',
+          source: 'a',
+          target: 'b',
+          sourceHandle: 'out',
+          targetHandle: 'in',
+        },
+      ],
+    };
+    const after = graphReducer(g, {
+      type: 'addEdge',
+      edge: {
+        id: 'e2',
+        source: 'a',
+        target: 'b',
+        sourceHandle: 'out',
+        targetHandle: 'in',
+      },
+    });
+    expect(after.edges).toHaveLength(1);
+  });
+
+  it('deletes an edge by id', () => {
+    const g = {
+      nodes: [
+        { id: 'a', kind: 'x', position: { x: 0, y: 0 }, config: {} },
+        { id: 'b', kind: 'x', position: { x: 0, y: 0 }, config: {} },
+      ],
+      edges: [{ id: 'e', source: 'a', target: 'b' }],
+    };
+    const after = graphReducer(g, { type: 'deleteEdge', id: 'e' });
+    expect(after.edges).toHaveLength(0);
+  });
+
+  it('updateEdge merges a partial patch (e.g. label) without touching others', () => {
+    const g: Graph = {
+      nodes: [
+        { id: 'a', kind: 'x', position: { x: 0, y: 0 }, config: {} },
+        { id: 'b', kind: 'x', position: { x: 0, y: 0 }, config: {} },
+      ],
+      edges: [
+        { id: 'e1', source: 'a', target: 'b' },
+        { id: 'e2', source: 'b', target: 'a' },
+      ],
+    };
+    const after = graphReducer(g, {
+      type: 'updateEdge',
+      id: 'e1',
+      patch: { label: 'yes' },
+    });
+    expect(after.edges[0]).toEqual({
+      id: 'e1',
+      source: 'a',
+      target: 'b',
+      sourceHandle: undefined,
+      targetHandle: undefined,
+      label: 'yes',
+    });
+    // Untouched edge is preserved; original state is not mutated.
+    expect(after.edges[1].label).toBeUndefined();
+    expect(g.edges[0].label).toBeUndefined();
+  });
+
+  it('updateEdge is a no-op for an unknown edge id', () => {
+    const g = {
+      nodes: [{ id: 'a', kind: 'x', position: { x: 0, y: 0 }, config: {} }],
+      edges: [{ id: 'e', source: 'a', target: 'a' }],
+    };
+    const after = graphReducer(g, {
+      type: 'updateEdge',
+      id: 'missing',
+      patch: { label: 'x' },
+    });
+    expect(after).toBe(g);
+  });
+
+  it('reconnects an edge endpoint to a new node', () => {
+    const g = {
+      nodes: [
+        { id: 'a', kind: 'x', position: { x: 0, y: 0 }, config: {} },
+        { id: 'b', kind: 'x', position: { x: 0, y: 0 }, config: {} },
+        { id: 'c', kind: 'x', position: { x: 0, y: 0 }, config: {} },
+      ],
+      edges: [{ id: 'e', source: 'a', target: 'b' }],
+    };
+    const after = graphReducer(g, {
+      type: 'reconnectEdge',
+      id: 'e',
+      source: 'a',
+      target: 'c',
+    });
+    expect(after.edges).toEqual([{ id: 'e', source: 'a', target: 'c' }]);
+    expect(g.edges[0].target).toBe('b');
+  });
+
+  it('reconnectEdge is a no-op for an unknown edge id', () => {
+    const g = {
+      nodes: [{ id: 'a', kind: 'x', position: { x: 0, y: 0 }, config: {} }],
+      edges: [{ id: 'e', source: 'a', target: 'a' }],
+    };
+    const after = graphReducer(g, {
+      type: 'reconnectEdge',
+      id: 'missing',
+      source: 'a',
+      target: 'a',
+    });
+    expect(after).toBe(g);
+  });
+
+  it('reconnectEdge rejects a move that duplicates another edge', () => {
+    const g = {
+      nodes: [
+        { id: 'a', kind: 'x', position: { x: 0, y: 0 }, config: {} },
+        { id: 'b', kind: 'x', position: { x: 0, y: 0 }, config: {} },
+        { id: 'c', kind: 'x', position: { x: 0, y: 0 }, config: {} },
+      ],
+      edges: [
+        { id: 'e1', source: 'a', target: 'b' },
+        { id: 'e2', source: 'a', target: 'c' },
+      ],
+    };
+    const after = graphReducer(g, {
+      type: 'reconnectEdge',
+      id: 'e2',
+      source: 'a',
+      target: 'b',
+    });
+    expect(after).toBe(g);
+  });
+
+  it('addNodeWithEdge adds a node and an auto-connect edge atomically', () => {
+    const g = {
+      nodes: [{ id: 'a', kind: 'agent', position: { x: 0, y: 0 }, config: {} }],
+      edges: [],
+    };
+    const after = graphReducer(g, {
+      type: 'addNodeWithEdge',
+      node: { id: 'b', kind: 'agent', position: { x: 100, y: 0 }, config: {} },
+      autoConnectFrom: {
+        edge: { id: 'e1', source: 'a', target: 'b' },
+      },
+    });
+    expect(after.nodes).toHaveLength(2);
+    expect(after.edges).toHaveLength(1);
+    expect(after.edges[0]).toMatchObject({ source: 'a', target: 'b' });
+  });
+
+  it('addNodeWithEdge adds only the node when autoConnectFrom is null', () => {
+    const after = graphReducer(emptyGraph, {
+      type: 'addNodeWithEdge',
+      node: { id: 'b', kind: 'agent', position: { x: 0, y: 0 }, config: {} },
+      autoConnectFrom: null,
+    });
+    expect(after.nodes).toHaveLength(1);
+    expect(after.edges).toHaveLength(0);
+  });
+
+  it('addNodeWithEdge is a no-op for a duplicate node id', () => {
+    const g = {
+      nodes: [{ id: 'b', kind: 'agent', position: { x: 0, y: 0 }, config: {} }],
+      edges: [],
+    };
+    const after = graphReducer(g, {
+      type: 'addNodeWithEdge',
+      node: { id: 'b', kind: 'agent', position: { x: 0, y: 0 }, config: {} },
+      autoConnectFrom: null,
+    });
+    expect(after).toBe(g);
+  });
+});