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

package/src/plugin/graphrunner/index.tsx

@@ -0,0 +1,255 @@
+/**
+ * WebSocket client plugin for the Behave-Graph Execution Protocol
+ * Provides UI and store integration for remote graph execution
+ */
+
+import { type System } from '../../system/system';
+import { graphRunnerClientStoreFactory } from './store';
+import { GraphRunnerClient } from './client';
+import { GraphRunnerPanel } from './panel';
+import { ErrorBoundary } from 'react-error-boundary';
+import { MenuItemElement } from '../../components/menubar/menuItem';
+import type { StoreApi } from 'zustand';
+import type { GraphRunnerClientStore } from './store';
+import { GraphRunnerButtons } from './buttons';
+import { plugin } from '@/system/plugin';
+import { isBehaveNode } from '@/util/isBehaveNode';
+import type { Node } from 'reactflow';
+import { GraphRunner } from './runner';
+
+export * from './types';
+export * from './client';
+export * from './transport';
+export * from './panel';
+export * from './runner';
+export * from './store';
+export * from './session';
+/**
+ * Options for the GraphRunner plugin
+ */
+export interface GraphRunnerClientPluginOptions {
+  /**
+   * Preconfigured GraphRunner client instance.
+   * If provided, the plugin will use this client instead of creating a new one.
+   * Useful when the client is already connected via a custom transport (e.g., VSCode IPC).
+   */
+  client?: GraphRunnerClient;
+
+  /**
+   * Preconfigured store instance.
+   * If provided, the plugin will use this store instead of creating a new one.
+   * Useful for sharing state with external components.
+   */
+  store?: StoreApi<GraphRunnerClientStore>;
+
+  /**
+   * Whether to skip automatic connection.
+   * Default: false (will attempt to connect if client is not provided or not connected)
+   */
+  skipAutoConnect?: boolean;
+
+  /**
+   * Whether to add the menu item to the Window menu.
+   * Default: true
+   */
+  addMenuItem?: boolean;
+}
+
+/**
+ * Plugin initialization function
+ * Registers the GraphRunnerClient store and actions with the system
+ */
+export async function graphRunnerClientPluginLoader(
+  system: System,
+  options: GraphRunnerClientPluginOptions = {}
+) {
+  // Use provided store or create a new one
+  const store = options.store ?? graphRunnerClientStoreFactory(system);
+
+  // If a preconfigured client is provided, set it in the store
+  if (options.client) {
+    store.getState().setClient(options.client);
+
+    // If client is already connected, update connection state
+    if (options.client.isConnected()) {
+      store.getState().setConnectionState('connected');
+
+      // Populate connection info if available
+      const connectionInfo = {
+        serverId: options.client.getServerId(),
+        userId: options.client.getUserId(),
+        authenticated: options.client.isAuthenticated(),
+        capabilities: options.client.getCachedCapabilities(),
+        sessionId: null // Session management is external when client is provided
+      };
+      store.getState().setConnectionInfo(connectionInfo);
+    }
+  }
+
+  // Create and decorate actions
+  const runner = new GraphRunner(system, store);
+  system.decorate('runner', runner);
+
+  // Add toolbar buttons for graph execution control
+  system.toolbarStore.getState().addGroup({
+    id: 'graph-runner-controls',
+    label: 'Graph Runner',
+    buttons: [
+      <GraphRunnerButtons
+        key="graph-runner-buttons"
+        store={store}
+        onPlay={() => runner.play()}
+        onPause={() => runner.pause()}
+        onResume={() => runner.resume()}
+        onStep={() => runner.step()}
+        onStop={() => runner.stop()}
+      />
+    ]
+  });
+
+  system.hotKeyStore.getState().register({
+    action: 'PLAY',
+    description: 'Triggers playing the graph',
+    trigger: 'p',
+    handler: () => {
+      if (runner.store.getState().isExecuting) {
+        runner.stop();
+      } else {
+        runner.play();
+      }
+    }
+  });
+
+  // Register the panel with TabLoader
+  system.tabLoader.register('graphRunner', () => {
+    return {
+      id: 'graphRunner',
+      closable: true,
+      title: 'Remote Graph Runner',
+      group: 'default',
+      content: () => (
+        <ErrorBoundary fallback={'Error loading Graph Runner panel'}>
+          <GraphRunnerPanel system={system} />
+        </ErrorBoundary>
+      )
+    };
+  });
+
+  // Add menu item to Window menu (unless disabled)
+  if (options.addMenuItem !== false) {
+    const menuStore = system.menubarStore;
+    const currentItems = menuStore.getState().items;
+    const windowMenu = currentItems.find((menu) => menu.name === 'window');
+
+    if (windowMenu) {
+      // Add the Graph Runner menu item to the Window menu
+      const newMenuItem = {
+        name: 'graphRunner',
+        render: function GraphRunnerMenuItem() {
+          return (
+            <MenuItemElement
+              onClick={() => system.tabStore.getState().openTab('graphRunner')}
+              key="graphRunner"
+            >
+              Remote Graph Runner
+            </MenuItemElement>
+          );
+        }
+      };
+
+      menuStore
+        .getState()
+        .setSubMenuItems('window', [...windowMenu.items, newMenuItem]);
+    }
+  }
+
+  system.pubsub.subscribe('node:added', (_, node: Node) => {
+    if (!isBehaveNode(node)) {
+      return;
+    }
+
+    const client = runner.store.getState().client;
+    const currentRunId = runner.store.getState().currentRunId;
+    const graphId = runner.store.getState().currentGraphId;
+
+    // Only send if we have an active run and realtime is enabled
+    if (client && currentRunId && graphId) {
+      const capabilities = runner.store.getState().connectionInfo.capabilities;
+      if (capabilities?.realtime) {
+        client.addNode(
+          currentRunId,
+          node.id,
+          node.data.type,
+          node.data as Record<string, unknown>,
+          node.position
+        );
+      }
+    }
+  });
+
+  system.pubsub.subscribe('edge:added', (_, edge) => {
+    const client = runner.store.getState().client;
+    const currentRunId = runner.store.getState().currentRunId;
+    const graphId = runner.store.getState().currentGraphId;
+
+    // Only send if we have an active run and realtime is enabled
+    if (client && currentRunId && graphId && edge.source && edge.target) {
+      const capabilities = runner.store.getState().connectionInfo.capabilities;
+      if (capabilities?.realtime) {
+        client.createLink(
+          currentRunId,
+          edge.source,
+          edge.sourceHandle || '',
+          edge.target,
+          edge.targetHandle || ''
+        );
+      }
+    }
+  });
+
+  system.pubsub.subscribe('edge:removed', (_, edge) => {
+    const client = runner.store.getState().client;
+    const currentRunId = runner.store.getState().currentRunId;
+    const graphId = runner.store.getState().currentGraphId;
+
+    // Only send if we have an active run and realtime is enabled
+    if (client && currentRunId && graphId && edge.source && edge.target) {
+      const capabilities = runner.store.getState().connectionInfo.capabilities;
+      if (capabilities?.realtime) {
+        client.removeLink(
+          currentRunId,
+          edge.source,
+          edge.sourceHandle || '',
+          edge.target,
+          edge.targetHandle || ''
+        );
+      }
+    }
+  });
+
+  system.pubsub.subscribe('node:removed', (_, node: Node) => {
+    if (!isBehaveNode(node)) {
+      return;
+    }
+
+    const client = runner.store.getState().client;
+    const currentRunId = runner.store.getState().currentRunId;
+    const graphId = runner.store.getState().currentGraphId;
+
+    // Only send if we have an active run and realtime is enabled
+    if (client && currentRunId && graphId) {
+      const capabilities = runner.store.getState().connectionInfo.capabilities;
+      if (capabilities?.realtime) {
+        client.removeNode(currentRunId, node.id);
+      }
+    }
+  });
+
+  if (!options.skipAutoConnect) {
+    await runner.connect();
+  }
+}
+
+export const graphRunnerClientPlugin = plugin(graphRunnerClientPluginLoader, {
+  name: 'graph-runner-client'
+});

package/src/plugin/graphrunner/panel.tsx

@@ -0,0 +1,386 @@
+import React, { useState } from 'react';
+import { useStore } from 'zustand';
+import type { System } from '../../system/system';
+import type { AuthCredentials } from './types';
+import {
+  VscodeButton,
+  VscodeTextfield,
+  VscodeCheckbox,
+  VscodeSingleSelect,
+  VscodeOption,
+  VscodeLabel,
+  VscodeBadge,
+  VscodeTree,
+  VscodeTreeItem,
+  VscodeCollapsible
+} from '@vscode-elements/react-elements';
+import styles from './styles.module.css';
+
+interface GraphRunnerPanelProps {
+  system: System;
+}
+
+export const GraphRunnerPanel: React.FC<GraphRunnerPanelProps> = ({
+  system
+}) => {
+  const store = system.runner.store;
+
+  const connectionState = useStore(store, (state) => state.connectionState);
+  const connectionConfig = useStore(store, (state) => state.connectionConfig);
+  const connectionInfo = useStore(store, (state) => state.connectionInfo);
+  const error = useStore(store, (state) => state.error);
+  const serverVariables = useStore(store, (state) => state.serverVariables);
+  const serverEvents = useStore(store, (state) => state.serverEvents);
+  const nodeTypes = useStore(store, (state) => state.nodeTypes);
+  const messageActivity = useStore(store, (state) => state.messageActivity);
+  const clearLogsOnRun = useStore(store, (state) => state.clearLogsOnRun);
+  const clearTracesOnRun = useStore(store, (state) => state.clearTracesOnRun);
+  const enableTracing = useStore(store, (state) => state.enableTracing);
+
+  const icons = useStore(system.legendStore, (state) => state.icons);
+  const defaultIcon = useStore(
+    system.legendStore,
+    (state) => state.defaultIcon
+  );
+
+  const [url, setUrl] = useState(connectionConfig.url);
+  const [authType, setAuthType] = useState<'none' | 'bearer' | 'apiKey'>(
+    connectionConfig.auth.type
+  );
+  const [authToken, setAuthToken] = useState('');
+  const [autoReconnect, setAutoReconnect] = useState(
+    connectionConfig.autoReconnect
+  );
+
+  const handleConnect = async () => {
+    const auth: AuthCredentials =
+      authType === 'bearer'
+        ? { type: 'bearer', token: authToken }
+        : authType === 'apiKey'
+          ? { type: 'apiKey', key: authToken }
+          : { type: 'none' };
+
+    store.getState().setConnectionConfig({ url, auth, autoReconnect });
+
+    await system.runner.connect();
+  };
+
+  const handleDisconnect = async () => {
+    await system.runner.disconnect();
+  };
+
+  const handleRefreshMetadata = async () => {
+    await system.runner.refreshMetadata();
+  };
+
+  const handleClearMessages = () => {
+    store.getState().clearMessageActivity();
+  };
+
+  const isConnected = connectionState === 'connected';
+  const isConnecting =
+    connectionState === 'connecting' || connectionState === 'authenticating';
+
+  return (
+    <div className={styles.panel}>
+      {/* Scrollable Content Container */}
+      <div className={styles.scrollContainer}>
+        <h3 className={styles.title}>
+          Remote Graph Runner
+          <VscodeBadge variant="tab-header-counter">
+            {isConnected ? 'Connected' : 'Disconnected'}
+          </VscodeBadge>
+        </h3>
+
+        <div>
+          {/* Connection Form */}
+          <VscodeCollapsible heading="Connection Settings">
+            <div className={styles.connectionForm}>
+              <div>
+                <VscodeLabel>Server URL</VscodeLabel>
+                <VscodeTextfield
+                  value={url}
+                  onChange={(e: any) => setUrl(e.target.value)}
+                  placeholder="ws://localhost:8080"
+                  disabled={isConnected || isConnecting}
+                  className={styles.formField}
+                />
+              </div>
+
+              <div>
+                <VscodeLabel>Authentication</VscodeLabel>
+                <VscodeSingleSelect
+                  value={authType}
+                  onChange={(e: any) =>
+                    setAuthType(e.target.value as 'none' | 'bearer' | 'apiKey')
+                  }
+                  disabled={isConnected || isConnecting}
+                  className={styles.formField}
+                >
+                  <VscodeOption value="none">None</VscodeOption>
+                  <VscodeOption value="bearer">Bearer Token</VscodeOption>
+                  <VscodeOption value="apiKey">API Key</VscodeOption>
+                </VscodeSingleSelect>
+              </div>
+
+              {authType !== 'none' && (
+                <div>
+                  <VscodeLabel>
+                    {authType === 'bearer' ? 'Token' : 'API Key'}
+                  </VscodeLabel>
+                  <VscodeTextfield
+                    type="password"
+                    value={authToken}
+                    onChange={(e: any) => setAuthToken(e.target.value)}
+                    placeholder={
+                      authType === 'bearer'
+                        ? 'Enter bearer token'
+                        : 'Enter API key'
+                    }
+                    disabled={isConnected || isConnecting}
+                    className={styles.formField}
+                  />
+                </div>
+              )}
+
+              <VscodeCheckbox
+                checked={autoReconnect}
+                onChange={(e: any) => setAutoReconnect(e.target.checked)}
+                disabled={isConnected || isConnecting}
+              >
+                Auto-reconnect
+              </VscodeCheckbox>
+
+              <div className={styles.section}>
+                <h4 className={styles.sectionTitle}>Execution Preferences</h4>
+                <VscodeCheckbox
+                  checked={enableTracing}
+                  onChange={(e: any) =>
+                    store.getState().setEnableTracing(e.target.checked)
+                  }
+                >
+                  Enable execution tracing
+                </VscodeCheckbox>
+                <VscodeCheckbox
+                  checked={clearLogsOnRun}
+                  onChange={(e: any) =>
+                    store.getState().setClearLogsOnRun(e.target.checked)
+                  }
+                >
+                  Clear logs on new run
+                </VscodeCheckbox>
+                <VscodeCheckbox
+                  checked={clearTracesOnRun}
+                  onChange={(e: any) =>
+                    store.getState().setClearTracesOnRun(e.target.checked)
+                  }
+                >
+                  Clear traces on new run
+                </VscodeCheckbox>
+              </div>
+
+              <div className={styles.buttonGroup}>
+                {!isConnected && (
+                  <VscodeButton
+                    onClick={handleConnect}
+                    disabled={isConnecting || !url}
+                    className={styles.button}
+                  >
+                    {isConnecting ? 'Connecting...' : 'Connect'}
+                  </VscodeButton>
+                )}
+                {isConnected && (
+                  <>
+                    <VscodeButton
+                      onClick={handleDisconnect}
+                      className={styles.button}
+                    >
+                      Disconnect
+                    </VscodeButton>
+                    <VscodeButton
+                      onClick={handleRefreshMetadata}
+                      className={styles.button}
+                    >
+                      Refresh
+                    </VscodeButton>
+                  </>
+                )}
+              </div>
+            </div>
+          </VscodeCollapsible>
+
+          {/* Error Display */}
+          {error && (
+            <div className={styles.errorBox}>
+              <strong>Error:</strong> {error}
+            </div>
+          )}
+
+          {/* Connection Info */}
+          {isConnected && (
+            <VscodeCollapsible heading="Status">
+              <div className={styles.infoBox}>
+                <div>
+                  <strong>Status:</strong> Connected
+                </div>
+                {connectionInfo.serverId && (
+                  <div className={styles.infoField}>
+                    <strong>Server:</strong> {connectionInfo.serverId}
+                  </div>
+                )}
+                {connectionInfo.sessionId && (
+                  <div className={styles.infoField}>
+                    <strong>Session:</strong> {connectionInfo.sessionId}
+                  </div>
+                )}
+                {connectionInfo.userId && (
+                  <div className={styles.infoField}>
+                    <strong>User:</strong> {connectionInfo.userId}
+                  </div>
+                )}
+                {connectionInfo.capabilities && (
+                  <div className={styles.infoField}>
+                    <strong>Capabilities:</strong>{' '}
+                    {Object.entries(connectionInfo.capabilities)
+                      .filter(([_, v]) => v === true)
+                      .map(([k]) => k)
+                      .join(', ')}
+                  </div>
+                )}
+              </div>
+            </VscodeCollapsible>
+          )}
+          {isConnected && (
+            <>
+              <VscodeCollapsible heading="Variables">
+                <VscodeBadge slot="decorations">
+                  {serverVariables.length}
+                </VscodeBadge>
+                <VscodeTree>
+                  {serverVariables.map((variable) => {
+                    const Icon = icons[variable.valueTypeName] ?? defaultIcon;
+                    const IconComponent = Icon as React.FC<{ slot?: string }>;
+                    return (
+                      <VscodeTreeItem key={variable.name}>
+                        <IconComponent slot="icon-leaf" />
+                        <span>{variable.name}</span>
+                      </VscodeTreeItem>
+                    );
+                  })}
+                </VscodeTree>
+              </VscodeCollapsible>
+
+              <VscodeCollapsible heading="Events">
+                <VscodeBadge slot="decorations">
+                  {serverEvents.length}
+                </VscodeBadge>
+
+                <div className={styles.tabPanelGap}>
+                  {serverEvents.length === 0 ? (
+                    <p className={styles.emptyMessage}>
+                      No server events available
+                    </p>
+                  ) : (
+                    <VscodeTree>
+                      {serverEvents.map((event) => (
+                        <VscodeTreeItem key={event.name}>
+                          <span className={styles.treeItemTitle}>
+                            {event.name}
+                          </span>
+                          <VscodeTreeItem key={event.name}>
+                            <span slot="description">{event.description}</span>
+                            {event.payloadSchema != null ? (
+                              <pre className={styles.codeBlock}>
+                                {JSON.stringify(event.payloadSchema, null, 2)}
+                              </pre>
+                            ) : null}
+                          </VscodeTreeItem>
+                        </VscodeTreeItem>
+                      ))}
+                    </VscodeTree>
+                  )}
+                </div>
+              </VscodeCollapsible>
+
+              <VscodeCollapsible heading="Nodes">
+                <VscodeBadge slot="decorations">{nodeTypes.length}</VscodeBadge>
+                <div className={styles.tabPanelGap}>
+                  {nodeTypes.length === 0 ? (
+                    <p className={styles.emptyMessage}>
+                      No node types available
+                    </p>
+                  ) : (
+                    <VscodeTree>
+                      {nodeTypes.map((node) => (
+                        <VscodeTreeItem>
+                          {node.type}
+
+                          <span slot="description">{node.category}</span>
+                        </VscodeTreeItem>
+                      ))}
+                    </VscodeTree>
+                  )}
+                </div>
+              </VscodeCollapsible>
+              <VscodeCollapsible heading="Message Activity">
+                <VscodeBadge slot="decorations">
+                  {messageActivity.length}
+                </VscodeBadge>
+                <div className={styles.tabPanelGapLarge}>
+                  <div className={styles.messagesToolbar}>
+                    <div className={styles.messagesCount}>
+                      {messageActivity.length} message
+                      {messageActivity.length !== 1 ? 's' : ''}
+                    </div>
+                    {messageActivity.length > 0 && (
+                      <VscodeButton onClick={handleClearMessages}>
+                        Clear
+                      </VscodeButton>
+                    )}
+                  </div>
+                  {messageActivity.length === 0 ? (
+                    <p className={styles.emptyMessage}>No messages yet</p>
+                  ) : (
+                    <div className={styles.tabPanelGap}>
+                      {messageActivity.map((activity) => {
+                        const time = new Date(
+                          activity.timestamp
+                        ).toLocaleTimeString();
+                        const directionColor =
+                          activity.direction === 'sent'
+                            ? 'var(--vscode-gitDecoration-modifiedResourceForeground)'
+                            : 'var(--vscode-gitDecoration-addedResourceForeground)';
+
+                        return (
+                          <div key={activity.id} className={styles.messageCard}>
+                            <div className={styles.messageHeader}>
+                              <div className={styles.messageDirection}>
+                                <span
+                                  className={styles.messageDirectionIcon}
+                                  style={{ color: directionColor }}
+                                >
+                                  {activity.direction === 'sent' ? '→' : '←'}
+                                </span>
+                                <span className={styles.messageType}>
+                                  {activity.message.type}
+                                </span>
+                              </div>
+                              <span className={styles.messageTime}>{time}</span>
+                            </div>
+                            <pre className={styles.messageContent}>
+                              {JSON.stringify(activity.message, null, 2)}
+                            </pre>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  )}
+                </div>
+              </VscodeCollapsible>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};