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

package/src/plugin/docs/panel/index.tsx

@@ -0,0 +1,200 @@
+import { useMemo, useCallback } from 'react';
+import { useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { useSystem } from '@/system/provider';
+import { Markdown } from 'tiptap-markdown';
+import { useStore } from 'zustand';
+import type { ExtendedNodeSpecJSON } from '@/components/contextMenus/NodePicker';
+import { useOnPressKey } from '@/hooks/useOnPressKey';
+import { removeTabFromLayout } from '@/components/layoutController/utils';
+import styles from './styles.module.css';
+
+export function DocumentationBrowserPanel() {
+  const sys = useSystem();
+  const selectedNodeType = useStore(
+    sys.refStore,
+    (x) => x.refs.selectedDocumentationType
+  );
+  const documentation = useStore(sys.documentationStore, (x) => x.docs);
+  const specs = useStore(sys.specStore, (x) => x.specs);
+  const icons = useStore(sys.legendStore, (x) => x.icons);
+  const defaultIcon = useStore(sys.legendStore, (x) => x.defaultIcon);
+  const valueTypeColors = useStore(sys.legendStore, (x) => x.valueTypeColors);
+
+  const nodeSpec = useMemo((): ExtendedNodeSpecJSON | null => {
+    if (!selectedNodeType) return null;
+    return specs.find((s) => s.type === selectedNodeType) ?? null;
+  }, [selectedNodeType, specs]);
+
+  const getIconForType = useCallback(
+    (valueType: string) => {
+      const IconComponent = icons[valueType] || defaultIcon;
+      return IconComponent;
+    },
+    [icons, defaultIcon]
+  );
+
+  const getColorForType = useCallback(
+    (valueType: string) => {
+      return valueTypeColors[valueType] || '#6c727e';
+    },
+    [valueTypeColors]
+  );
+
+  const nodeDoc = useMemo(() => {
+    if (!selectedNodeType) return null;
+    return documentation.get(selectedNodeType);
+  }, [selectedNodeType, documentation]);
+
+  const editor = useEditor(
+    {
+      extensions: [StarterKit, Markdown],
+      content: nodeDoc?.markdownDescription || '',
+      editable: false
+    },
+    [nodeDoc?.markdownDescription]
+  );
+
+  const closePanel = useCallback(() => {
+    const currentLayout = sys.tabStore.getState().layout;
+    const newLayout = removeTabFromLayout(currentLayout, 'docbrowser');
+    sys.tabStore.getState().setLayout(newLayout);
+  }, [sys]);
+
+  useOnPressKey('Escape', closePanel);
+
+  if (!selectedNodeType) {
+    return (
+      <div className={styles.container}>
+        <div className={styles.empty}>
+          <div className={styles.emptyIcon}>📚</div>
+          <div className={styles.emptyText}>No documentation selected</div>
+          <div className={styles.emptySub}>
+            Click the info icon on a node to view its documentation
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const hasMarkdown = nodeDoc?.markdownDescription;
+  const hasShortDescription =
+    nodeDoc?.shortDescription || nodeSpec?.description;
+  const hasTags = nodeDoc?.tags && nodeDoc.tags.length > 0;
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <div className={styles.titleSection}>
+          {nodeDoc?.icon && (
+            <div className={styles.iconLarge}>{nodeDoc.icon}</div>
+          )}
+          <div>
+            <h2 className={styles.title}>
+              {nodeSpec?.label || selectedNodeType}
+            </h2>
+            <div className={styles.nodeType}>{selectedNodeType}</div>
+          </div>
+        </div>
+        {hasTags && nodeDoc?.tags && (
+          <div className={styles.tags}>
+            {nodeDoc.tags.map((tag, index) => (
+              <span key={index} className={styles.tag}>
+                {tag}
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <div className={styles.content}>
+        {hasShortDescription && (
+          <div className={styles.description}>
+            {nodeDoc?.shortDescription || nodeSpec?.description}
+          </div>
+        )}
+
+        {hasMarkdown && nodeDoc?.markdownDescription ? (
+          <EditorContent editor={editor} />
+        ) : (
+          <div className={styles.noContent}>
+            <p>No detailed documentation available for this node.</p>
+          </div>
+        )}
+
+        {nodeSpec && (
+          <>
+            {nodeSpec.inputs && nodeSpec.inputs.length > 0 && (
+              <div className={styles.section}>
+                <h3 className={styles.sectionTitle}>Inputs</h3>
+                <div className={styles.socketList}>
+                  {nodeSpec.inputs.map((input, index) => {
+                    const IconComponent = getIconForType(input.valueType);
+                    const color = getColorForType(input.valueType);
+                    return (
+                      <div key={index} className={styles.socketItem}>
+                        <div className={styles.socketIcon} style={{ color }}>
+                          <IconComponent />
+                        </div>
+                        <div className={styles.socketName}>{input.name}</div>
+                        <div className={styles.socketType} style={{ color }}>
+                          {input.valueType}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+
+            {nodeSpec.outputs && nodeSpec.outputs.length > 0 && (
+              <div className={styles.section}>
+                <h3 className={styles.sectionTitle}>Outputs</h3>
+                <div className={styles.socketList}>
+                  {nodeSpec.outputs.map((output, index) => {
+                    const IconComponent = getIconForType(output.valueType);
+                    const color = getColorForType(output.valueType);
+                    return (
+                      <div key={index} className={styles.socketItem}>
+                        <div className={styles.socketIcon} style={{ color }}>
+                          <IconComponent />
+                        </div>
+                        <div className={styles.socketName}>{output.name}</div>
+                        <div className={styles.socketType} style={{ color }}>
+                          {output.valueType}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+
+            {nodeSpec.configuration && nodeSpec.configuration.length > 0 && (
+              <div className={styles.section}>
+                <h3 className={styles.sectionTitle}>Configuration</h3>
+                <div className={styles.socketList}>
+                  {nodeSpec.configuration.map((config, index) => {
+                    const IconComponent = getIconForType(config.valueType);
+                    const color = getColorForType(config.valueType);
+                    return (
+                      <div key={index} className={styles.socketItem}>
+                        <div className={styles.socketIcon} style={{ color }}>
+                          <IconComponent />
+                        </div>
+                        <div className={styles.socketName}>{config.name}</div>
+                        <div className={styles.socketType} style={{ color }}>
+                          {config.valueType}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/plugin/docs/panel/styles.module.css

@@ -0,0 +1,174 @@
+.container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background: var(--colors-bgCanvas);
+    color: var(--colors-fg);
+    overflow: hidden;
+}
+
+.header {
+    padding: 1rem;
+    border-bottom: 1px solid var(--vscode-input-border, var(--colors-borderSubtle));
+    background: var(--colors-bgPanel);
+}
+
+.titleSection {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    margin-bottom: 0.75rem;
+}
+
+.iconLarge {
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.5rem;
+    border: 1px solid var(--vscode-input-border, var(--colors-borderSubtle));
+    background: var(--colors-bgCanvas);
+    flex-shrink: 0;
+}
+
+.iconLarge svg {
+    width: 32px;
+    height: 32px;
+}
+
+.title {
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 600;
+    line-height: 1.3;
+}
+
+.nodeType {
+    font-size: 0.75rem;
+    opacity: 0.7;
+    margin-top: 0.25rem;
+    font-family: monospace;
+}
+
+.tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.tag {
+    font-size: 0.75rem;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.25rem;
+    background: var(--vscode-badge-background, #4d4d4d);
+    color: var(--vscode-badge-foreground, #ffffff);
+}
+
+.content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1rem;
+}
+
+.description {
+    font-size: 1rem;
+    line-height: 1.5;
+    margin-bottom: 1.5rem;
+    padding: 0.75rem;
+    background: var(--vscode-textBlockQuote-background, rgba(127, 127, 127, 0.1));
+    border-left: 4px solid var(--vscode-textBlockQuote-border, #007acc);
+    border-radius: 0.25rem;
+}
+
+
+.noContent {
+    padding: 2rem;
+    text-align: center;
+    opacity: 0.6;
+}
+
+.section {
+    margin-top: 2rem;
+}
+
+.sectionTitle {
+    font-size: 1rem;
+    font-weight: 600;
+    margin-bottom: 0.75rem;
+    padding-bottom: 0.25rem;
+    border-bottom: 1px solid var(--vscode-input-border, var(--colors-borderSubtle));
+}
+
+.socketList {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.socketItem {
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+    padding: 0.5rem;
+    background: var(--colors-bgPanel);
+    border-radius: 0.25rem;
+    border: 1px solid var(--vscode-input-border, var(--colors-borderSubtle));
+}
+
+.socketIcon {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.socketIcon svg {
+    width: 16px;
+    height: 16px;
+}
+
+.socketName {
+    font-weight: 500;
+    flex: 1;
+}
+
+.socketType {
+    font-family: monospace;
+    font-size: 0.85rem;
+    font-weight: 500;
+    padding: 0.125rem 0.5rem;
+    border-radius: 0.25rem;
+    background: rgba(0, 0, 0, 0.2);
+}
+
+.empty {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    text-align: center;
+}
+
+.emptyIcon {
+    font-size: 4rem;
+    margin-bottom: 1rem;
+    opacity: 0.3;
+}
+
+.emptyText {
+    font-size: 1.25rem;
+    font-weight: 500;
+    margin-bottom: 0.5rem;
+    opacity: 0.8;
+}
+
+.emptySub {
+    font-size: 0.9rem;
+    opacity: 0.6;
+}

package/src/plugin/graphrunner/actions.ts

@@ -0,0 +1,253 @@
+import type { System } from '../../system/system';
+import type { StoreApi } from 'zustand';
+import type { GraphRunnerClientStore } from './store';
+import type { GraphRunnerClient } from './client';
+import { executing } from '@/annotations';
+import { sleep } from '@/util/sleep';
+import { type ValueJSON } from '@kiberon-labs/behave-graph';
+
+// Helper to clear executing state from all nodes
+async function clearAllExecutingStates(system: System) {
+  await sleep(1); // Delay to allow any final traces to process
+  system.nodeStore.getState().setNodes((nodes) =>
+    nodes.map((node) => {
+      if ('data' in node && node.data.annotations?.[executing]) {
+        return {
+          ...node,
+          data: {
+            ...node.data,
+            annotations: {
+              ...node.data.annotations,
+              [executing]: false
+            }
+          }
+        };
+      }
+      return node;
+    })
+  );
+}
+
+/**
+ * Setup persistent event listeners on the client for trace, logs, and run lifecycle
+ * This should be called once when the client is connected
+ */
+export function setupClientEventListeners(
+  client: GraphRunnerClient,
+  system: System,
+  store: StoreApi<GraphRunnerClientStore>
+) {
+  const { setIsExecuting, setCurrentRunId, setCurrentGraphId, setIsPaused } =
+    store.getState();
+
+  // Listen for trace events - these apply to all runs
+  client.on('trace', async (message) => {
+    const traceStore = system.traceStore.getState();
+    if (message.event === 'start') {
+      let name = message.nodeId;
+      if (
+        message.data &&
+        typeof message.data === 'object' &&
+        'typeName' in message.data
+      ) {
+        const typeName = (message.data as { typeName?: unknown }).typeName;
+        if (typeof typeName === 'string') {
+          name = typeName;
+        }
+      }
+      traceStore.addSpan({
+        nodeId: message.nodeId,
+        name,
+        start: message.timestamp || performance.now(),
+        end: 1,
+        lane: 0
+      });
+
+      // Mark node as executing
+      system.nodeStore.getState().setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === message.nodeId && 'data' in node
+            ? {
+                ...node,
+                data: {
+                  ...node.data,
+                  annotations: {
+                    ...node.data.annotations,
+                    [executing]: true
+                  }
+                }
+              }
+            : node
+        )
+      );
+    } else if (message.event === 'end') {
+      traceStore.updateSpan(message.nodeId, {
+        end: message.timestamp || performance.now()
+      });
+
+      //Delay to allow UI to show executing state
+      await sleep(1);
+
+      // Mark node as no longer executing
+      system.nodeStore.getState().setNodes((nodes) =>
+        nodes.map((node) =>
+          node.id === message.nodeId && 'data' in node
+            ? {
+                ...node,
+                data: {
+                  ...node.data,
+                  annotations: {
+                    ...node.data.annotations,
+                    [executing]: false
+                  }
+                }
+              }
+            : node
+        )
+      );
+    }
+  });
+
+  // Listen for log messages
+  client.on('log', (message) => {
+    const logStore = system.logsStore.getState();
+    const formattedMessage = `[${message.runId}/${message.graphId}] ${message.message}${message.data !== undefined ? ` ${JSON.stringify(message.data)}` : ''}`;
+    logStore.append({
+      time: new Date(),
+      data: {
+        message: formattedMessage
+      },
+      type: message.level as any
+    });
+  });
+
+  // Listen for variable change events from server
+  client.on('variableChanged', (message) => {
+    const variableStore = system.variableStore.getState();
+    const id = message.variableName;
+
+    // Get existing variable or create new one
+    const existingVariable = variableStore.variables[id];
+
+    if (existingVariable) {
+      // Update existing variable
+      system.variableStore.getState().setVariable(id, {
+        ...existingVariable,
+        initialValue: message.newValue as ValueJSON
+      });
+    } else {
+      // Create new variable if it doesn't exist
+      const inferredType = typeof message.newValue;
+      const newVariable = {
+        id,
+        name: message.variableName,
+        valueTypeName: inferredType === 'object' ? 'string' : inferredType,
+        initialValue: message.newValue as ValueJSON
+      };
+      variableStore.setVariable(id, newVariable);
+    }
+  });
+
+  // Listen for run completion events
+  client.on('completed', (message) => {
+    const currentRunId = store.getState().currentRunId;
+    if (message.runId === currentRunId) {
+      system.notifications.success(`Graph completed: ${message.graphId}`);
+      setIsExecuting(false);
+      setCurrentRunId(null);
+      setCurrentGraphId(null);
+      setIsPaused(false);
+      clearAllExecutingStates(system);
+    }
+  });
+
+  client.on('error', (message) => {
+    const currentRunId = store.getState().currentRunId;
+    if (message.runId === currentRunId) {
+      system.notifications.error(`Graph failed: ${message.graphId}`);
+      setIsExecuting(false);
+      setCurrentRunId(null);
+      setCurrentGraphId(null);
+      setIsPaused(false);
+      clearAllExecutingStates(system);
+    }
+  });
+
+  client.on('stopped', (message) => {
+    const currentRunId = store.getState().currentRunId;
+    if (message.runId === currentRunId) {
+      system.notifications.info(`Graph stopped: ${message.graphId}`);
+      setIsExecuting(false);
+      setCurrentRunId(null);
+      setCurrentGraphId(null);
+      setIsPaused(false);
+      clearAllExecutingStates(system);
+    }
+  });
+
+  // Realtime state change listeners
+  client.on('nodeRemoved', (message) => {
+    const currentRunId = store.getState().currentRunId;
+    if (message.runId === currentRunId) {
+      // Update node store to reflect removal
+      system.nodeStore
+        .getState()
+        .setNodes((nodes) =>
+          nodes.filter((node) => node.id !== message.nodeId)
+        );
+      system.notifications.info(`Node removed: ${message.nodeId}`);
+    }
+  });
+
+  client.on('linkCreated', (message) => {
+    const currentRunId = store.getState().currentRunId;
+    if (message.runId === currentRunId) {
+      system.notifications.info(
+        `Link created: ${message.fromNodeId}/${message.fromSocket} -> ${message.toNodeId}/${message.toSocket}`
+      );
+    }
+  });
+
+  client.on('linkRemoved', (message) => {
+    const currentRunId = store.getState().currentRunId;
+    if (message.runId === currentRunId) {
+      system.notifications.info(
+        `Link removed: ${message.fromNodeId}/${message.fromSocket} -> ${message.toNodeId}/${message.toSocket}`
+      );
+    }
+  });
+
+  client.on('nodeParamUpdated', (message) => {
+    const currentRunId = store.getState().currentRunId;
+    if (message.runId === currentRunId) {
+      system.notifications.info(`Parameter updated on ${message.nodeId}`);
+    }
+  });
+
+  client.on('affectedNodes', (message) => {
+    const currentRunId = store.getState().currentRunId;
+    if (message.runId === currentRunId) {
+      // Highlight affected nodes
+      system.nodeStore.getState().setNodes((nodes) =>
+        nodes.map((node) => {
+          if (message.nodeIds.includes(node.id)) {
+            return {
+              ...node,
+              data: {
+                ...node.data,
+                annotations: {
+                  ...node.data?.annotations,
+                  [executing]: true
+                }
+              }
+            };
+          }
+          return node;
+        })
+      );
+      system.notifications.info(
+        `Executing ${message.reason}: ${message.nodeIds.length} node(s)`
+      );
+    }
+  });
+}

package/src/plugin/graphrunner/buttons.tsx

@@ -0,0 +1,87 @@
+import { VscodeButton } from '@vscode-elements/react-elements';
+import { useStore } from 'zustand';
+import { Play, PauseWindow, Square, ArrowRight } from 'iconoir-react';
+import type { StoreApi } from 'zustand';
+import type { GraphRunnerClientStore } from './store';
+
+interface GraphRunnerButtonsProps {
+  store: StoreApi<GraphRunnerClientStore>;
+  onPlay: () => void;
+  onPause: () => void;
+  onResume: () => void;
+  onStep: () => void;
+  onStop: () => void;
+}
+
+export const GraphRunnerButtons = ({
+  store,
+  onPlay,
+  onPause,
+  onResume,
+  onStep,
+  onStop
+}: GraphRunnerButtonsProps) => {
+  const connectionState = useStore(store, (state) => state.connectionState);
+  const isExecuting = useStore(store, (state) => state.isExecuting);
+  const isPaused = useStore(store, (state) => state.isPaused);
+
+  const isConnected = connectionState === 'connected';
+
+  return (
+    <>
+      {!isExecuting && (
+        <VscodeButton
+          secondary
+          iconOnly
+          title="Play Graph"
+          onClick={onPlay}
+          disabled={!isConnected}
+        >
+          <Play />
+        </VscodeButton>
+      )}
+      {isExecuting && !isPaused && (
+        <VscodeButton
+          secondary
+          iconOnly
+          title="Pause Graph"
+          onClick={onPause}
+          disabled={!isConnected}
+        >
+          <PauseWindow />
+        </VscodeButton>
+      )}
+      {isExecuting && isPaused && (
+        <>
+          <VscodeButton
+            secondary
+            iconOnly
+            title="Resume Graph"
+            onClick={onResume}
+            disabled={!isConnected}
+          >
+            <Play />
+          </VscodeButton>
+          <VscodeButton
+            secondary
+            iconOnly
+            title="Step Forward"
+            onClick={onStep}
+            disabled={!isConnected}
+          >
+            <ArrowRight />
+          </VscodeButton>
+        </>
+      )}
+      <VscodeButton
+        secondary
+        iconOnly
+        title="Stop Graph"
+        onClick={onStop}
+        disabled={!isExecuting}
+      >
+        <Square />
+      </VscodeButton>
+    </>
+  );
+};