@kiberon-labs/behave-graph-flow 1.0.0 → 2.0.0

package/src/system/system.ts

@@ -0,0 +1,223 @@
+import { UndoManager } from './undoRedo';
+import { type StoreApi } from 'zustand';
+import type { Edge, Node, Viewport } from 'reactflow';
+import { tabStoreFactory, type TabStore } from '@/store/tabs';
+import { TabLoader } from './tabLoader';
+import {
+  systemSettingsFactory,
+  type SystemSettingsStore
+} from '../store/settings.js';
+import { logStoreFactory, type LogStore } from '@/store/logs';
+import { legendStoreFactory, type LegendStore } from '@/store/legend';
+import { menubarStoreFactory, type MenuBarStore } from '@/store/menubar';
+import { hotKeyStoreFactory, type HotkeyStore } from '@/store/hotKeys';
+import { PubSub } from './pubsub';
+import {
+  edgeStoreFactory,
+  flowStoreFactory,
+  nodeStoreFactory,
+  type EdgeStore,
+  type FlowStore,
+  type NodeStore
+} from '@/store/flow';
+import { controlsStoreFactory, type ControlsStore } from '@/store/controls';
+import { variableStoreFactory, type VariableStore } from '@/store/variables';
+import { selectionStoreFactory, type SelectionStore } from '@/store/selection';
+import { refStoreFactory, type RefStore } from '@/store/refs';
+import { Graph } from './graph';
+import { actionStoreFactory, type ActionStore } from '@/store/actions';
+import { registryStoreFactory, type RegistryStore } from '@/store/registry';
+import { specsStoreFactory, type SpecsStore } from '@/store/specs';
+import { traceStoreFactory, type TraceStore } from '@/store/traces';
+import { specificStoreFactory, type SpecificStore } from '@/store/specific';
+import {
+  socketGeneratorStoreFactory,
+  type SocketGeneratorStore
+} from '@/store/socketGenerator';
+import { eventsStoreFactory, type EventsStore } from '@/store/events';
+import {
+  documentationStoreFactory,
+  type DocumentationStore
+} from '@/store/documentation';
+import { toolbarStoreFactory, type ToolbarStore } from '@/store/toolbar';
+import { layerStoreFactory, type LayerStore } from '@/store/layers';
+import { setupSystemActions } from '@/plugin/alignment';
+import { Notifications } from './notifications';
+import { chatStoreFactory, type ChatStore } from '@/store/chat';
+import type { Renderable } from 'react-hot-toast';
+import type { INodeRegistry } from '@/types/NodeMetadata';
+import type { LoadablePlugin } from './plugin';
+import type { UIGraphJSON } from '@/types/graph';
+import type { GraphJSON } from '@kiberon-labs/behave-graph';
+import type { LayoutBase } from 'rc-dock';
+
+export type NotificationType = 'info' | 'success' | 'error' | 'loading';
+
+export interface NotificationData {
+  type: NotificationType;
+  message: string;
+  options?: {
+    id?: string;
+    duration?: number;
+    position?: any;
+    icon?: Renderable;
+    style?: React.CSSProperties;
+    className?: string;
+    ariaLive?: any;
+  };
+}
+
+export interface PubSys {
+  'edge:added': Edge;
+  'node:added': Node;
+  'edge:removed': Edge;
+  'node:removed': Node;
+  graphAnnotationsChanged: {
+    [key: string]: any;
+  };
+  'aiNode:trigger': {
+    nodeId: string;
+  };
+  saveViewport: {
+    index: number;
+    viewport: Viewport;
+  };
+  missingViewPort: {
+    index: number;
+  };
+
+  notification: NotificationData;
+  'notification:dismiss': {
+    toastId?: string;
+  };
+  'layout:saved': LayoutBase;
+  'graph:saved': UIGraphJSON;
+  'graph:inner:saved': GraphJSON;
+  'chat:userMessage': {
+    content: string;
+  };
+}
+
+/**
+ * Use this to extend the System interface when adding plugins
+ */
+export interface ISystem {}
+
+export class System implements ISystem {
+  public readonly actionStore: StoreApi<ActionStore>;
+  public readonly pubsub = new PubSub<PubSys>();
+  public readonly undoManager = new UndoManager();
+  public readonly flowStore: StoreApi<FlowStore>;
+  public readonly controlStore: StoreApi<ControlsStore>;
+  public readonly variableStore: StoreApi<VariableStore>;
+  public readonly selectionStore: StoreApi<SelectionStore>;
+  public readonly refStore: StoreApi<RefStore>;
+  public readonly tabStore: StoreApi<TabStore>;
+  protected deps: Record<string, unknown> = {};
+  public readonly registry: StoreApi<RegistryStore>;
+  public readonly tabLoader: TabLoader;
+  public readonly systemSettings: StoreApi<SystemSettingsStore>;
+  public readonly logsStore: StoreApi<LogStore>;
+  public readonly legendStore: StoreApi<LegendStore>;
+  public readonly hotKeyStore: StoreApi<HotkeyStore>;
+  public readonly edgeStore: StoreApi<EdgeStore>;
+  public readonly nodeStore: StoreApi<NodeStore>;
+  public readonly specStore: StoreApi<SpecsStore>;
+  public readonly specificStore: StoreApi<SpecificStore>;
+  public readonly socketGeneratorStore: StoreApi<SocketGeneratorStore>;
+  public readonly eventsStore: StoreApi<EventsStore>;
+  public readonly documentationStore: StoreApi<DocumentationStore>;
+  public readonly toolbarStore: StoreApi<ToolbarStore>;
+  public readonly layerStore: StoreApi<LayerStore>;
+  public readonly menubarStore: StoreApi<MenuBarStore>;
+  public readonly graph: Graph;
+  public readonly traceStore: StoreApi<TraceStore>;
+  public readonly chatStore: StoreApi<ChatStore>;
+  public readonly notifications: Notifications = new Notifications(this);
+
+  /**
+   * Create a new System instance
+   * @param registry - INodeRegistry containing nodes and values metadata
+   */
+  constructor(registry?: INodeRegistry) {
+    this.tabStore = tabStoreFactory();
+    this.controlStore = controlsStoreFactory();
+    this.variableStore = variableStoreFactory();
+    this.refStore = refStoreFactory();
+    this.systemSettings = systemSettingsFactory();
+    this.logsStore = logStoreFactory();
+    this.legendStore = legendStoreFactory();
+    this.eventsStore = eventsStoreFactory();
+    this.nodeStore = nodeStoreFactory(this);
+    this.edgeStore = edgeStoreFactory(this);
+    this.flowStore = flowStoreFactory(this);
+    this.selectionStore = selectionStoreFactory(this);
+    this.hotKeyStore = hotKeyStoreFactory(this);
+    this.actionStore = actionStoreFactory(this);
+    this.registry = registryStoreFactory();
+    this.specStore = specsStoreFactory(this);
+    this.socketGeneratorStore = socketGeneratorStoreFactory();
+    this.specificStore = specificStoreFactory();
+    this.documentationStore = documentationStoreFactory();
+    this.toolbarStore = toolbarStoreFactory();
+    this.layerStore = layerStoreFactory(this);
+
+    this.chatStore = chatStoreFactory();
+    this.graph = new Graph(this);
+
+    // Handle registry initialization
+    if (registry) {
+      this.registry.getState().updateRegistry(registry);
+      this.specStore.getState().setSpecs(registry.specs);
+    }
+
+    this.menubarStore = menubarStoreFactory();
+    this.tabLoader = new TabLoader(this);
+
+    this.traceStore = traceStoreFactory(this);
+
+    // Setup system-level action subscribers
+    setupSystemActions(this);
+  }
+
+  /**
+   * Adds a new dependency to the system
+   * @param name
+   * @param val
+   */
+  decorate(name: keyof System, val: any) {
+    //@ts-ignore
+    this[name] = val;
+  }
+
+  /**
+   * Load a plugin into the system
+   * @param pluginInit - Plugin initialization function
+   * @param options - Optional configuration options for the plugin
+   * @template TOptions - Type of options object
+   *
+   * @example
+   * // Plugin without options
+   * system.registerPlugin(docsPlugin);
+   *
+   * @example
+   * // Plugin with typed options
+   * interface MyPluginOptions {
+   *   enabled: boolean;
+   *   apiKey: string;
+   * }
+   *
+   * const myPlugin: Plugin<MyPluginOptions> = (system, options) => {
+   *   console.log('Plugin enabled:', options.enabled);
+   * };
+   *
+   * system.registerPlugin(myPlugin, { enabled: true, apiKey: 'secret' });
+   */
+  async registerPlugin<TOptions = void>(
+    plugin: LoadablePlugin<TOptions>,
+    options?: TOptions
+  ): Promise<void> {
+    await plugin.loader(this, options as TOptions);
+    console.log(`Plugin loaded: ${plugin.opts.name}`);
+  }
+}

package/src/system/tabLoader.tsx

@@ -0,0 +1,265 @@
+import { Flow } from '@/components/Flow';
+import type { TabBase, TabData } from 'rc-dock';
+import { ErrorBoundary } from 'react-error-boundary';
+import type { System } from './system';
+import { Settings } from '@/components/panels/systemSettings';
+import { LogsPanel } from '@/components/panels/logs';
+import { VariablesPanel } from '@/components/panels/variables';
+import { NodeInputsPanel } from '@/components/panels/nodeInputs';
+import { AlignmentPanel } from '@/components/panels/alignment';
+import { SearchPanel } from '@/components/panels/search';
+import { KeymapsPanel } from '@/components/panels/keymaps';
+import { EventsPanel } from '@/components/panels/events';
+import { TracesPanel } from '@/components/panels/traces';
+import { LegendPanel } from '@/components/panels/legend';
+import { HistoryPanel } from '@/components/panels/history';
+import { HotKeys } from '@/components/hotKeys';
+import { NodePickerPanel } from '@/components/panels/nodePicker';
+import { PanelPanel } from '@/components/panels/panel';
+import { ConversationPanel } from '@/components/panels/conversation';
+import { LayersPanel } from '@/components/panels/layers';
+
+export class TabLoader {
+  public readonly tabs: Record<string, () => TabData> = {};
+
+  constructor(_system: System) {
+    this.register('graph', () => {
+      return {
+        id: 'graph',
+        closable: true,
+        cached: true,
+        group: 'graph',
+        title: 'Graph',
+        content: () => (
+          <ErrorBoundary fallback={'whoops'}>
+            <HotKeys>
+              <Flow />
+            </HotKeys>
+          </ErrorBoundary>
+        )
+      };
+    });
+
+    this.register('system:settings', () => {
+      return {
+        id: 'system:settings',
+        closable: true,
+        group: 'default',
+        title: 'System Settings',
+        content: () => (
+          <ErrorBoundary fallback={'whoops'}>
+            <Settings />
+          </ErrorBoundary>
+        )
+      };
+    });
+
+    this.register('distribution', () => {
+      return {
+        id: 'distribution',
+        closable: true,
+        group: 'default',
+        title: 'Distribution + Alignment',
+        content: () => (
+          <ErrorBoundary fallback={'whoops'}>
+            <AlignmentPanel />
+          </ErrorBoundary>
+        )
+      };
+    });
+
+    this.register('variables', () => {
+      return {
+        id: 'variables',
+        closable: true,
+        title: 'Variables',
+        group: 'default',
+        content: () => (
+          <ErrorBoundary fallback={'whoops'}>
+            <VariablesPanel />
+          </ErrorBoundary>
+        )
+      };
+    });
+
+    this.register('logs', () => {
+      return {
+        id: 'logs',
+        closable: true,
+        title: 'Logs',
+        group: 'default',
+        content: () => (
+          <ErrorBoundary fallback={'whoops'}>
+            <LogsPanel />
+          </ErrorBoundary>
+        )
+      };
+    });
+    this.register('find', () => {
+      return {
+        id: 'find',
+        closable: true,
+        title: 'Find',
+        group: 'default',
+        content: () => (
+          <ErrorBoundary fallback={'whoops'}>
+            <SearchPanel />
+          </ErrorBoundary>
+        )
+      };
+    });
+
+    this.register('nodeInputs', () => {
+      return {
+        id: 'nodeInputs',
+        closable: true,
+        title: 'Node Inputs',
+        group: 'default',
+        content: () => (
+          <ErrorBoundary fallback={'whoops'}>
+            <NodeInputsPanel />
+          </ErrorBoundary>
+        )
+      };
+    });
+
+    this.register('keymaps', () => {
+      return {
+        id: 'keymaps',
+        closable: true,
+        title: 'Keyboard Shortcuts',
+        group: 'default',
+        content: () => (
+          <ErrorBoundary fallback={'whoops'}>
+            <KeymapsPanel />
+          </ErrorBoundary>
+        )
+      };
+    });
+
+    this.register('events', () => {
+      return {
+        id: 'events',
+        closable: true,
+        title: 'Events',
+        group: 'default',
+        content: () => (
+          <ErrorBoundary fallback={'whoops'}>
+            <EventsPanel />
+          </ErrorBoundary>
+        )
+      };
+    });
+
+    this.register('traces', () => {
+      return {
+        id: 'traces',
+        closable: true,
+        title: 'Traces',
+        group: 'default',
+        content: () => (
+          <ErrorBoundary fallback={'whoops'}>
+            <TracesPanel />
+          </ErrorBoundary>
+        )
+      };
+    });
+
+    this.register('legend', () => {
+      return {
+        id: 'legend',
+        closable: true,
+        title: 'Legend',
+        group: 'default',
+        content: () => (
+          <ErrorBoundary fallback={'whoops'}>
+            <LegendPanel />
+          </ErrorBoundary>
+        )
+      };
+    });
+
+    this.register('history', () => {
+      return {
+        id: 'history',
+        closable: true,
+        title: 'History',
+        group: 'default',
+        content: () => (
+          <ErrorBoundary fallback={'whoops'}>
+            <HistoryPanel />
+          </ErrorBoundary>
+        )
+      };
+    });
+
+    this.register('layers', () => {
+      return {
+        id: 'layers',
+        closable: true,
+        title: 'Layers',
+        group: 'default',
+        content: () => (
+          <ErrorBoundary fallback={'whoops'}>
+            <LayersPanel />
+          </ErrorBoundary>
+        )
+      };
+    });
+
+    this.register('nodepicker', () => {
+      return {
+        id: 'nodepicker',
+        closable: true,
+        cached: true,
+        title: 'Add Node',
+        group: 'headless',
+        content: () => (
+          <ErrorBoundary fallback={'whoops'}>
+            <NodePickerPanel />
+          </ErrorBoundary>
+        )
+      };
+    });
+
+    this.register('panels', () => {
+      return {
+        id: 'panels',
+        closable: true,
+        title: 'Panels',
+        group: 'default',
+        content: () => (
+          <ErrorBoundary fallback={'whoops'}>
+            <PanelPanel />
+          </ErrorBoundary>
+        )
+      };
+    });
+
+    this.register('conversation', () => {
+      return {
+        id: 'conversation',
+        closable: true,
+        cached: true,
+        title: 'Conversation',
+        group: 'default',
+        content: () => (
+          <ErrorBoundary fallback={'whoops'}>
+            <ConversationPanel />
+          </ErrorBoundary>
+        )
+      };
+    });
+  }
+
+  load(tab: TabBase): TabData | undefined {
+    if (!tab.id) {
+      return;
+    }
+    return this.tabs[tab.id]?.();
+  }
+
+  register(id: string, loader: () => TabData) {
+    this.tabs[id] = loader;
+  }
+}

package/src/system/undoRedo.ts

@@ -0,0 +1,103 @@
+import { create } from 'zustand';
+
+export interface Command {
+  name: string;
+  execute(): void;
+  undo(): void;
+  /**
+   * Optional redo method if different from execute
+   */
+  redo?(): void;
+}
+
+export type UndoStackEntry = {
+  name: string;
+};
+
+export type UndoStore = {
+  canUndo: boolean;
+  canRedo: boolean;
+  history: UndoStackEntry[];
+  redoStack: UndoStackEntry[];
+  setSnapshot: (snapshot: {
+    canUndo: boolean;
+    canRedo: boolean;
+    history: UndoStackEntry[];
+    redoStack: UndoStackEntry[];
+  }) => void;
+};
+
+export const undoStoreFactory = () =>
+  create<UndoStore>((set) => ({
+    canUndo: false,
+    canRedo: false,
+    history: [],
+    redoStack: [],
+    setSnapshot: (snapshot) => set(() => snapshot)
+  }));
+
+export class UndoManager {
+  private history: Command[] = [];
+  private stack: Command[] = [];
+  private limit = 100; // optional limit
+  public store = undoStoreFactory();
+
+  constructor() {
+    this.syncStore();
+  }
+
+  private syncStore() {
+    this.store.getState().setSnapshot({
+      canUndo: this.canUndo(),
+      canRedo: this.canRedo(),
+      history: this.history.map((c) => ({ name: c.name })),
+      redoStack: this.stack.map((c) => ({ name: c.name }))
+    });
+  }
+
+  execute(command: Command) {
+    command.execute();
+    this.history.push(command);
+    this.stack = []; // clear redo stack
+
+    if (this.history.length > this.limit) {
+      this.history.shift();
+    }
+
+    this.syncStore();
+  }
+
+  undo() {
+    const command = this.history.pop();
+    if (command) {
+      command.undo();
+      this.stack.push(command);
+      this.syncStore();
+    }
+  }
+
+  redo() {
+    const command = this.stack.pop();
+    if (command) {
+      if (command.redo) {
+        command.redo();
+      } else {
+        command.execute();
+      }
+      this.history.push(command);
+      this.syncStore();
+    }
+  }
+
+  canUndo() {
+    return this.history.length > 0;
+  }
+  canRedo() {
+    return this.stack.length > 0;
+  }
+  clear() {
+    this.history = [];
+    this.stack = [];
+    this.syncStore();
+  }
+}

package/src/transformers/Uigraph.ts

@@ -0,0 +1,60 @@
+import type { System } from '@/system/system';
+import { annotatedTitle, uiVersion } from '@/annotations';
+import type { UIGraphJSON } from '@/types/graph';
+
+const DEFAULT_UI_GRAPH_VERSION = '1.0.0';
+const DEFAULT_UI_GRAPH_NAME = 'Untitled Graph';
+
+function getStringAnnotation(
+  annotations: Record<string, unknown>,
+  key: string
+): string | undefined {
+  const value = annotations[key];
+  return typeof value === 'string' && value.trim().length > 0
+    ? value
+    : undefined;
+}
+
+/**
+ * Assembles the full UI graph definition for saving.
+ */
+export function buildUIGraphJSON(system: System): UIGraphJSON {
+  system.flowStore.getState().invalidateCache();
+
+  const flow = system.flowStore.getState().getGraph();
+  const nodes = system.nodeStore.getState().nodes;
+  const edges = system.edgeStore.getState().edges;
+
+  const annotations = system.graph.getAnnotations?.() ?? {};
+
+  const reactflow = system.refStore.getState().getRef('reactflow');
+  const viewport = reactflow?.getViewport?.() ??
+    system.graph.viewports[0] ?? { x: 0, y: 0, zoom: 1 };
+
+  const graphVersion =
+    getStringAnnotation(annotations, uiVersion) ?? DEFAULT_UI_GRAPH_VERSION;
+  const graphName =
+    getStringAnnotation(annotations, annotatedTitle) ??
+    flow.name ??
+    DEFAULT_UI_GRAPH_NAME;
+
+  const viewports = system.graph.viewports.length
+    ? system.graph.viewports.map((v) => ({ x: v.x, y: v.y, zoom: v.zoom }))
+    : undefined;
+
+  return {
+    v: graphVersion,
+    name: graphName,
+    annotations,
+    data: {
+      layers: system.layerStore.getState().serialize()
+    },
+    flow,
+    nodes,
+    edges,
+    user: {
+      viewport: { x: viewport.x, y: viewport.y, zoom: viewport.zoom },
+      viewports
+    }
+  };
+}

package/src/transformers/behaveToFlow.ts

@@ -1,3 +1,4 @@
+import type { IBehaveNode } from '@/types/nodes';
 import type { GraphJSON } from '@kiberon-labs/behave-graph';
 import type { Edge, Node } from 'reactflow';
 import { v4 as uuidv4 } from 'uuid';
@@ -7,9 +8,9 @@ export const behaveToFlow = (graph: GraphJSON): [Node[], Edge[]] => {
   const edges: Edge[] = [];
 
   graph.nodes?.forEach((nodeJSON) => {
-    const node: Node = {
+    const node: IBehaveNode = {
       id: nodeJSON.id,
-      type: nodeJSON.type,
+      type: 'behaveNode',
       position: {
         x: nodeJSON.metadata?.positionX
           ? Number(nodeJSON.metadata?.positionX)
@@ -18,11 +19,21 @@ export const behaveToFlow = (graph: GraphJSON): [Node[], Edge[]] => {
           ? Number(nodeJSON.metadata?.positionY)
           : 0
       },
-      data: {} as { [key: string]: any }
+      data: {
+        annotations: {},
+        configuration: {},
+        type: nodeJSON.type,
+        ports: {},
+        dynamicPorts: {}
+      }
     };
 
     nodes.push(node);
 
+    if (nodeJSON.configuration && typeof nodeJSON.configuration === 'object') {
+      node.data.configuration = { ...nodeJSON.configuration };
+    }
+
     if (nodeJSON.parameters) {
       for (const [inputKey, input] of Object.entries(nodeJSON.parameters)) {
         if ('link' in input && input.link !== undefined) {
@@ -35,7 +46,8 @@ export const behaveToFlow = (graph: GraphJSON): [Node[], Edge[]] => {
           });
         }
         if ('value' in input) {
-          node.data[inputKey] = input.value;
+          node.data.ports ??= {};
+          node.data.ports[inputKey] = input.value;
         }
       }
     }