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

package/src/plugin/graphrunner/store.ts

@@ -0,0 +1,196 @@
+import { createStore } from 'zustand';
+import type { GraphRunnerClient } from './client';
+import type {
+  AuthCredentials,
+  GraphRunnerCapabilities,
+  ServerVariable,
+  ServerEvent,
+  GraphRunnerMessage
+} from './types';
+import type { System } from '../../system';
+import type { NodeSpecJSON } from '@kiberon-labs/behave-graph';
+import type { StoreApi } from 'zustand';
+
+export interface MessageActivity {
+  id: string;
+  timestamp: number;
+  direction: 'sent' | 'received';
+  message: GraphRunnerMessage;
+}
+
+export interface ConnectionConfig {
+  url: string;
+  auth: AuthCredentials;
+  autoReconnect: boolean;
+}
+
+export interface ConnectionInfo {
+  serverId: string | null;
+  userId: string | null;
+  sessionId: string | null;
+  authenticated: boolean;
+  capabilities: GraphRunnerCapabilities | null;
+}
+
+export interface GraphRunnerClientStore {
+  // Connection state
+  connectionState:
+    | 'disconnected'
+    | 'connecting'
+    | 'authenticating'
+    | 'connected';
+  connectionConfig: ConnectionConfig;
+  connectionInfo: ConnectionInfo;
+  error: string | null;
+
+  // Client instance
+  client: GraphRunnerClient | null;
+
+  // Server metadata
+  serverVariables: ServerVariable[];
+  serverEvents: ServerEvent[];
+  nodeTypes: NodeSpecJSON[];
+
+  // Message activity
+  messageActivity: MessageActivity[];
+  maxActivityMessages: number;
+
+  // Execution preferences (global defaults applied to every run)
+  clearLogsOnRun: boolean;
+  clearTracesOnRun: boolean;
+  enableTracing: boolean;
+
+  // Actions
+  setConnectionConfig: (config: Partial<ConnectionConfig>) => void;
+  setClient: (client: GraphRunnerClient | null) => void;
+  setConnectionState: (
+    state: 'disconnected' | 'connecting' | 'authenticating' | 'connected'
+  ) => void;
+  setConnectionInfo: (info: Partial<ConnectionInfo>) => void;
+  setError: (error: string | null) => void;
+  setServerVariables: (variables: ServerVariable[]) => void;
+  setServerEvents: (events: ServerEvent[]) => void;
+  setNodeTypes: (nodeTypes: NodeSpecJSON[]) => void;
+  clearServerMetadata: () => void;
+  addMessageActivity: (
+    direction: 'sent' | 'received',
+    message: GraphRunnerMessage
+  ) => void;
+  clearMessageActivity: () => void;
+  setClearLogsOnRun: (clear: boolean) => void;
+  setClearTracesOnRun: (clear: boolean) => void;
+  setEnableTracing: (enable: boolean) => void;
+}
+
+export const graphRunnerClientStoreFactory = (
+  system: System
+): StoreApi<GraphRunnerClientStore> => {
+  return createStore<GraphRunnerClientStore>((set) => ({
+    // Initial state
+    connectionState: 'disconnected',
+    connectionConfig: {
+      url: '',
+      auth: { type: 'none' },
+      autoReconnect: true
+    },
+    connectionInfo: {
+      serverId: null,
+      userId: null,
+      sessionId: null,
+      authenticated: false,
+      capabilities: null
+    },
+    error: null,
+    client: null,
+    serverVariables: [],
+    serverEvents: [],
+    nodeTypes: [],
+    messageActivity: [],
+    maxActivityMessages: 50,
+    clearLogsOnRun: true,
+    clearTracesOnRun: true,
+    // Off by default: tracing costs two events per node execution and is the
+    // single biggest per-frame overhead for display-rate graphs. Opt in via the
+    // "Enable execution tracing" checkbox in the graph runner panel.
+    enableTracing: false,
+
+    // Actions
+    setConnectionConfig: (config) =>
+      set((state) => ({
+        connectionConfig: { ...state.connectionConfig, ...config }
+      })),
+
+    setClient: (client) => set({ client }),
+
+    setConnectionState: (connectionState) => {
+      set({ connectionState });
+    },
+
+    setConnectionInfo: (info) =>
+      set((state) => ({
+        connectionInfo: { ...state.connectionInfo, ...info }
+      })),
+
+    setError: (error) => set({ error }),
+
+    setServerVariables: (serverVariables) => {
+      set({ serverVariables });
+      const variableStore = system.variableStore.getState();
+      for (const serverVar of serverVariables) {
+        variableStore.setVariable(serverVar.id, serverVar);
+      }
+    },
+
+    setServerEvents: (serverEvents) => {
+      set({ serverEvents });
+      const eventStore = system.eventsStore.getState();
+      for (const event of serverEvents) {
+        eventStore.addCustomEvent(event);
+      }
+    },
+
+    setNodeTypes: (nodeTypes) => {
+      set({ nodeTypes });
+      system.registry.getState().updateSpecs(nodeTypes);
+    },
+
+    clearServerMetadata: () =>
+      set({
+        serverVariables: [],
+        serverEvents: [],
+        nodeTypes: []
+      }),
+
+    addMessageActivity: (direction, message) =>
+      set((state) => {
+        // Trace traffic is high-frequency (per node execution / per frame) and
+        // has its own dedicated panel; recording it here allocated a new
+        // activity array per event and instantly evicted every other message
+        // from the 50-entry ring. Received server messages are cast into this
+        // union by the callers, so compare the raw type string.
+        const type = (message as { type: string }).type;
+        if (type === 'trace' || type === 'traceBatch') {
+          return state;
+        }
+        const activity: MessageActivity = {
+          id: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+          timestamp: Date.now(),
+          direction,
+          message
+        };
+        const newActivity = [activity, ...state.messageActivity].slice(
+          0,
+          state.maxActivityMessages
+        );
+        return { messageActivity: newActivity };
+      }),
+
+    clearMessageActivity: () => set({ messageActivity: [] }),
+
+    setClearLogsOnRun: (clearLogsOnRun) => set({ clearLogsOnRun }),
+
+    setClearTracesOnRun: (clearTracesOnRun) => set({ clearTracesOnRun }),
+
+    setEnableTracing: (enableTracing) => set({ enableTracing })
+  }));
+};

package/src/plugin/graphrunner/styles.module.css

@@ -0,0 +1,171 @@
+.panel {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.scrollContainer {
+    flex: 1;
+    overflow: auto;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.title {
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.connectionForm {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.formField {
+    width: 100%;
+}
+
+.buttonGroup {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+
+.button {
+    flex: 1 1 auto;
+    min-width: 120px;
+}
+
+.errorBox {
+    padding: 0.75rem;
+    background-color: var(--ds-error-bg);
+    border: 1px solid var(--ds-error-border);
+    border-radius: 4px;
+    font-size: 0.875rem;
+    color: var(--ds-error-fg);
+    word-break: break-word;
+}
+
+.infoBox {
+    padding: 0.75rem;
+    background-color: var(--ds-info-bg);
+    border: 1px solid var(--ds-info-border);
+    border-radius: 4px;
+    font-size: 0.875rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.infoField {
+    word-break: break-word;
+}
+
+.tabPanelGap {
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.tabPanelGapLarge {
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.emptyMessage {
+    font-size: 0.875rem;
+    color: var(--ds-fg-muted);
+    margin: 0;
+}
+
+.codeBlock {
+    font-size: 0.75rem;
+    font-family: var(--ds-font-mono);
+    color: var(--ds-editor-fg);
+    margin: 0;
+    padding: 0.5rem;
+    background-color: var(--ds-code-bg);
+    border-radius: 2px;
+    overflow: auto;
+}
+
+.messagesToolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    position: sticky;
+    top: 0;
+    background-color: var(--ds-editor-bg);
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--ds-panel-border);
+    z-index: 1;
+}
+
+.messagesCount {
+    font-size: 0.875rem;
+    color: var(--ds-fg-muted);
+}
+
+.messageCard {
+    padding: 0.75rem;
+    border: 1px solid var(--ds-panel-border);
+    border-radius: 4px;
+    background-color: var(--ds-editor-bg);
+    font-size: 0.875rem;
+}
+
+.messageHeader {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.messageDirection {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    word-break: break-word;
+}
+
+.messageDirectionIcon {
+    font-weight: bold;
+}
+
+.messageType {
+    font-weight: bold;
+}
+
+.messageTime {
+    color: var(--ds-fg-muted);
+    font-size: 0.75rem;
+    white-space: nowrap;
+}
+
+.messageContent {
+    margin: 0;
+    padding: 0.5rem;
+    background-color: var(--ds-code-bg);
+    border-radius: 2px;
+    font-size: 0.75rem;
+    font-family: var(--ds-font-mono);
+    overflow: auto;
+    max-height: 200px;
+    word-break: break-all;
+}
+
+.treeItemTitle {
+    font-weight: 500;
+}

package/src/plugin/graphrunner/transport.ts

@@ -0,0 +1,250 @@
+/**
+ * Transport abstraction for the Graph Runner client
+ * Allows different transport implementations (WebSocket, HTTP, SSE, etc.)
+ */
+
+import type { GraphRunnerMessage, ServerGraphRunnerMessage } from './types';
+
+export type TransportState =
+  | 'disconnected'
+  | 'connecting'
+  | 'connected'
+  | 'error';
+
+export interface TransportConfig {
+  url: string;
+  reconnectInterval?: number;
+  heartbeatInterval?: number;
+}
+
+export interface ITransport<
+  Send = ServerGraphRunnerMessage | GraphRunnerMessage,
+  Receive = GraphRunnerMessage | ServerGraphRunnerMessage
+> {
+  /**
+   * Get current connection state
+   */
+  getState(): TransportState;
+
+  /**
+   * Connect to the server
+   */
+  connect(): Promise<void>;
+
+  /**
+   * Disconnect from the server
+   */
+  disconnect(): void;
+
+  /**
+   * Send a message to the server
+   */
+  send(message: Send): void;
+
+  /**
+   * Register a message handler
+   */
+  onMessage(handler: (message: Receive) => void): void;
+
+  /**
+   * Register a connection state change handler
+   */
+  onStateChange(handler: (state: TransportState) => void): void;
+
+  /**
+   * Register an error handler
+   */
+  onError(handler: (error: Error) => void): void;
+
+  /**
+   * Remove all handlers
+   */
+  removeAllHandlers(): void;
+}
+
+/**
+ * Optional capability: a transport that can interactively control a run
+ * (pause / resume / step). Remote transports may not support it; the client
+ * detects support via {@link supportsExecutionControl} rather than reaching into
+ * transport internals.
+ */
+export interface IExecutionControl {
+  pauseExecution(runId: string): void;
+  resumeExecution(runId: string): Promise<void>;
+  stepExecution(runId: string): Promise<void>;
+  isPaused(runId: string): boolean;
+}
+
+/** Type guard: does this transport implement {@link IExecutionControl}? */
+export function supportsExecutionControl(
+  transport: unknown
+): transport is IExecutionControl {
+  return (
+    !!transport &&
+    typeof (transport as IExecutionControl).pauseExecution === 'function' &&
+    typeof (transport as IExecutionControl).resumeExecution === 'function' &&
+    typeof (transport as IExecutionControl).stepExecution === 'function'
+  );
+}
+
+/**
+ * WebSocket transport implementation
+ */
+export class WebSocketTransport
+  implements ITransport<GraphRunnerMessage, ServerGraphRunnerMessage>
+{
+  private ws: WebSocket | null = null;
+  private config: Required<TransportConfig>;
+  private state: TransportState = 'disconnected';
+  private messageHandlers: Array<(message: ServerGraphRunnerMessage) => void> =
+    [];
+  private stateChangeHandlers: Array<(state: TransportState) => void> = [];
+  private errorHandlers: Array<(error: Error) => void> = [];
+  private reconnectTimeout: number | null = null;
+  private heartbeatInterval: number | null = null;
+
+  constructor(config: TransportConfig) {
+    this.config = {
+      url: config.url,
+      reconnectInterval: config.reconnectInterval ?? 5000,
+      heartbeatInterval: config.heartbeatInterval ?? 30000
+    };
+  }
+
+  getState(): TransportState {
+    return this.state;
+  }
+
+  async connect(): Promise<void> {
+    if (this.ws?.readyState === WebSocket.OPEN) {
+      return;
+    }
+
+    return new Promise((resolve, reject) => {
+      this.setState('connecting');
+      this.ws = new WebSocket(this.config.url);
+
+      this.ws.onopen = () => {
+        this.setState('connected');
+        this.startHeartbeat();
+        resolve();
+      };
+
+      this.ws.onerror = () => {
+        this.setState('error');
+        const error = new Error('WebSocket connection error');
+        this.notifyError(error);
+        reject(error);
+      };
+
+      this.ws.onclose = () => {
+        this.handleDisconnect();
+      };
+
+      this.ws.onmessage = (event) => {
+        this.handleMessage(event);
+      };
+    });
+  }
+
+  disconnect(): void {
+    if (this.reconnectTimeout) {
+      clearTimeout(this.reconnectTimeout);
+      this.reconnectTimeout = null;
+    }
+    if (this.heartbeatInterval) {
+      clearInterval(this.heartbeatInterval);
+      this.heartbeatInterval = null;
+    }
+    if (this.ws) {
+      this.ws.close();
+      this.ws = null;
+    }
+    this.setState('disconnected');
+  }
+
+  send(message: GraphRunnerMessage): void {
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+      throw new Error('WebSocket is not connected');
+    }
+    this.ws.send(JSON.stringify(message));
+  }
+
+  onMessage(handler: (message: ServerGraphRunnerMessage) => void): void {
+    this.messageHandlers.push(handler);
+  }
+
+  onStateChange(handler: (state: TransportState) => void): void {
+    this.stateChangeHandlers.push(handler);
+  }
+
+  onError(handler: (error: Error) => void): void {
+    this.errorHandlers.push(handler);
+  }
+
+  removeAllHandlers(): void {
+    this.messageHandlers = [];
+    this.stateChangeHandlers = [];
+    this.errorHandlers = [];
+  }
+
+  private setState(state: TransportState): void {
+    this.state = state;
+    this.stateChangeHandlers.forEach((handler) => handler(state));
+  }
+
+  private notifyError(error: Error): void {
+    this.errorHandlers.forEach((handler) => handler(error));
+  }
+
+  private handleMessage(event: MessageEvent): void {
+    try {
+      const message: ServerGraphRunnerMessage = JSON.parse(event.data);
+      this.messageHandlers.forEach((handler) => handler(message));
+    } catch (error) {
+      console.error('Failed to parse message:', error);
+      this.notifyError(
+        error instanceof Error ? error : new Error(String(error))
+      );
+    }
+  }
+
+  private handleDisconnect(): void {
+    this.setState('disconnected');
+    if (this.heartbeatInterval) {
+      clearInterval(this.heartbeatInterval);
+      this.heartbeatInterval = null;
+    }
+
+    // Auto-reconnect
+    if (!this.reconnectTimeout) {
+      this.reconnectTimeout = window.setTimeout(() => {
+        this.reconnectTimeout = null;
+        this.reconnect();
+      }, this.config.reconnectInterval);
+    }
+  }
+
+  private async reconnect(): Promise<void> {
+    try {
+      await this.connect();
+    } catch (error) {
+      console.error('Reconnection failed:', error);
+    }
+  }
+
+  private startHeartbeat(): void {
+    if (this.heartbeatInterval) {
+      clearInterval(this.heartbeatInterval);
+    }
+    this.heartbeatInterval = window.setInterval(() => {
+      if (this.ws?.readyState === WebSocket.OPEN) {
+        try {
+          this.send({ type: 'ping', timestamp: Date.now() });
+        } catch (error) {
+          console.error('Failed to send heartbeat:', error);
+        }
+      }
+    }, this.config.heartbeatInterval);
+  }
+}