@q1k-oss/btree-workflows 0.0.1

package/behaviour-tree-workflows-landing/src/components/YamlEditor.tsx

@@ -0,0 +1,96 @@
+import React, { useRef, useEffect } from 'react';
+import { EditorView, keymap } from '@codemirror/view';
+import { EditorState } from '@codemirror/state';
+import { basicSetup } from 'codemirror';
+import { yaml } from '@codemirror/lang-yaml';
+import { oneDark } from '@codemirror/theme-one-dark';
+import { linter, type Diagnostic } from '@codemirror/lint';
+import { validateYamlString } from '../lib/execution-engine';
+import { indentWithTab } from '@codemirror/commands';
+import './YamlEditor.css';
+
+interface YamlEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export const YamlEditor: React.FC<YamlEditorProps> = ({ value, onChange }) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const viewRef = useRef<EditorView | null>(null);
+  const valueRef = useRef(value);
+
+  // Keep ref current
+  valueRef.current = value;
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const yamlLinter = linter((view) => {
+      const text = view.state.doc.toString();
+      if (!text.trim()) return [];
+
+      const result = validateYamlString(text);
+      if (result.valid) return [];
+
+      const diagnostics: Diagnostic[] = result.errors.map((errMsg) => ({
+        from: 0,
+        to: Math.min(text.length, 1),
+        severity: 'error' as const,
+        message: errMsg,
+      }));
+      return diagnostics;
+    }, { delay: 500 });
+
+    const state = EditorState.create({
+      doc: value,
+      extensions: [
+        basicSetup,
+        yaml(),
+        oneDark,
+        yamlLinter,
+        keymap.of([indentWithTab]),
+        EditorView.updateListener.of((update) => {
+          if (update.docChanged) {
+            const newVal = update.state.doc.toString();
+            onChange(newVal);
+          }
+        }),
+        EditorView.theme({
+          '&': { height: '100%', fontSize: '13px' },
+          '.cm-scroller': { fontFamily: "'JetBrains Mono', monospace" },
+          '.cm-content': { padding: '8px 0' },
+        }),
+      ],
+    });
+
+    const view = new EditorView({
+      state,
+      parent: containerRef.current,
+    });
+
+    viewRef.current = view;
+
+    return () => {
+      view.destroy();
+      viewRef.current = null;
+    };
+    // Only run on mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Sync external value changes
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    const currentText = view.state.doc.toString();
+    if (currentText !== value) {
+      view.dispatch({
+        changes: { from: 0, to: currentText.length, insert: value },
+      });
+    }
+  }, [value]);
+
+  return (
+    <div className="yaml-editor" ref={containerRef} />
+  );
+};

package/behaviour-tree-workflows-landing/src/lib/count-nodes.ts

@@ -0,0 +1,11 @@
+import type { TreeNode } from '@btree/types';
+
+export function countNodes(node: TreeNode): number {
+  let count = 1;
+  if (node.children) {
+    for (const child of node.children) {
+      count += countNodes(child);
+    }
+  }
+  return count;
+}

package/behaviour-tree-workflows-landing/src/lib/execution-engine.ts

@@ -0,0 +1,96 @@
+import { Registry, registerStandardNodes } from '@btree/index';
+import { ScopedBlackboard } from '@btree/blackboard';
+import { NodeEventEmitter } from '@btree/events';
+import { loadTreeFromYaml, validateYaml } from '@btree/yaml/index';
+import type { TreeNode, TemporalContext } from '@btree/types';
+import { NodeStatus } from '@btree/types';
+import type { NodeEvent } from '@btree/events';
+import { countNodes } from './count-nodes';
+
+let _registry: Registry | null = null;
+
+export function getRegistry(): Registry {
+  if (!_registry) {
+    _registry = new Registry();
+    registerStandardNodes(_registry);
+  }
+  return _registry;
+}
+
+export interface ParseResult {
+  tree: TreeNode | null;
+  error: string | null;
+  nodeCount: number;
+}
+
+export function parseYamlToTree(yamlString: string): ParseResult {
+  const registry = getRegistry();
+  try {
+    const tree = loadTreeFromYaml(yamlString, registry);
+    return { tree, error: null, nodeCount: countNodes(tree) };
+  } catch (err) {
+    return {
+      tree: null,
+      error: err instanceof Error ? err.message : String(err),
+      nodeCount: 0,
+    };
+  }
+}
+
+export function validateYamlString(yamlString: string): { valid: boolean; errors: string[] } {
+  const registry = getRegistry();
+  const result = validateYaml(yamlString, registry, { collectAllErrors: true });
+  return {
+    valid: result.valid,
+    errors: result.errors.map((e) => e.message),
+  };
+}
+
+export interface ExecutionResult {
+  status: NodeStatus;
+  blackboard: Record<string, unknown>;
+  events: NodeEvent<unknown>[];
+  error?: string;
+}
+
+export type EventCallback = (event: NodeEvent<unknown>) => void;
+
+export async function executeTree(
+  tree: TreeNode,
+  onEvent?: EventCallback,
+): Promise<ExecutionResult> {
+  const blackboard = new ScopedBlackboard();
+  const eventEmitter = new NodeEventEmitter();
+  const events: NodeEvent<unknown>[] = [];
+
+  eventEmitter.onAll((event: NodeEvent<unknown>) => {
+    events.push(event);
+    onEvent?.(event);
+  });
+
+  const registry = getRegistry();
+
+  const context: TemporalContext = {
+    blackboard,
+    treeRegistry: registry,
+    timestamp: Date.now(),
+    eventEmitter,
+    sessionId: `playground-${Date.now()}`,
+  };
+
+  try {
+    const status = await tree.tick(context);
+    return {
+      status,
+      blackboard: blackboard.toJSON(),
+      events,
+    };
+  } catch (err) {
+    return {
+      status: NodeStatus.FAILURE,
+      blackboard: blackboard.toJSON(),
+      events,
+      error: err instanceof Error ? err.message : String(err),
+    };
+  }
+}

package/behaviour-tree-workflows-landing/src/lib/tree-layout.ts

@@ -0,0 +1,136 @@
+import type { TreeNode } from '@btree/types';
+
+export interface LayoutNode {
+  id: string;
+  name: string;
+  type: string;
+  category: 'composite' | 'decorator' | 'action' | 'condition';
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  children: LayoutNode[];
+  status: string;
+}
+
+export interface LayoutEdge {
+  fromX: number;
+  fromY: number;
+  toX: number;
+  toY: number;
+}
+
+const NODE_WIDTH = 160;
+const NODE_HEIGHT = 44;
+const H_GAP = 16;
+const V_GAP = 56;
+
+const COMPOSITE_TYPES = new Set([
+  'Sequence', 'Selector', 'Parallel', 'Conditional', 'ForEach',
+  'While', 'Recovery', 'ReactiveSequence', 'MemorySequence', 'SubTree',
+]);
+
+const DECORATOR_TYPES = new Set([
+  'Timeout', 'Delay', 'Repeat', 'Invert', 'ForceSuccess', 'ForceFailure',
+  'RunOnce', 'KeepRunningUntilFailure', 'Precondition', 'SoftAssert',
+]);
+
+const CONDITION_TYPES = new Set([
+  'CheckCondition', 'AlwaysCondition',
+]);
+
+function getCategory(type: string): LayoutNode['category'] {
+  if (COMPOSITE_TYPES.has(type)) return 'composite';
+  if (DECORATOR_TYPES.has(type)) return 'decorator';
+  if (CONDITION_TYPES.has(type)) return 'condition';
+  return 'action';
+}
+
+function computeSubtreeWidth(node: TreeNode): number {
+  if (!node.children || node.children.length === 0) {
+    return NODE_WIDTH;
+  }
+  const childrenWidth = node.children.reduce(
+    (sum, child) => sum + computeSubtreeWidth(child),
+    0,
+  );
+  return Math.max(NODE_WIDTH, childrenWidth + H_GAP * (node.children.length - 1));
+}
+
+function layoutNode(
+  node: TreeNode,
+  x: number,
+  y: number,
+  nodeStates: Map<string, string>,
+): LayoutNode {
+  const subtreeWidth = computeSubtreeWidth(node);
+  const nodeX = x + subtreeWidth / 2 - NODE_WIDTH / 2;
+
+  const layoutChildren: LayoutNode[] = [];
+  if (node.children && node.children.length > 0) {
+    let childX = x;
+    const childY = y + NODE_HEIGHT + V_GAP;
+    for (const child of node.children) {
+      const childWidth = computeSubtreeWidth(child);
+      layoutChildren.push(layoutNode(child, childX, childY, nodeStates));
+      childX += childWidth + H_GAP;
+    }
+  }
+
+  return {
+    id: node.id,
+    name: node.name || node.id,
+    type: node.type,
+    category: getCategory(node.type),
+    x: nodeX,
+    y,
+    width: NODE_WIDTH,
+    height: NODE_HEIGHT,
+    children: layoutChildren,
+    status: nodeStates.get(node.id) || 'idle',
+  };
+}
+
+export function layoutTree(
+  root: TreeNode,
+  nodeStates: Map<string, string> = new Map(),
+): { root: LayoutNode; width: number; height: number; edges: LayoutEdge[] } {
+  const layoutRoot = layoutNode(root, 0, 0, nodeStates);
+
+  function getMaxY(node: LayoutNode): number {
+    let maxY = node.y + node.height;
+    for (const child of node.children) {
+      maxY = Math.max(maxY, getMaxY(child));
+    }
+    return maxY;
+  }
+
+  function getMaxX(node: LayoutNode): number {
+    let maxX = node.x + node.width;
+    for (const child of node.children) {
+      maxX = Math.max(maxX, getMaxX(child));
+    }
+    return maxX;
+  }
+
+  const edges: LayoutEdge[] = [];
+  function collectEdges(node: LayoutNode) {
+    for (const child of node.children) {
+      edges.push({
+        fromX: node.x + node.width / 2,
+        fromY: node.y + node.height,
+        toX: child.x + child.width / 2,
+        toY: child.y,
+      });
+      collectEdges(child);
+    }
+  }
+  collectEdges(layoutRoot);
+
+  return {
+    root: layoutRoot,
+    width: getMaxX(layoutRoot),
+    height: getMaxY(layoutRoot),
+    edges,
+  };
+}