@q1k-oss/btree-workflows 0.0.1

package/behaviour-tree-workflows-landing/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "btree-workflows-playground",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@codemirror/lang-yaml": "^6.1.1",
+    "@codemirror/lint": "^6.8.2",
+    "@codemirror/state": "^6.4.1",
+    "@codemirror/theme-one-dark": "^6.1.2",
+    "@codemirror/view": "^6.34.1",
+    "codemirror": "^6.0.1",
+    "js-yaml": "^4.1.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@types/js-yaml": "^4.0.9",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "^5.6.3",
+    "vite": "^6.0.3"
+  }
+}

package/behaviour-tree-workflows-landing/public/favicon.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+  <circle cx="16" cy="4" r="3.5" fill="#818cf8" stroke="#6366f1" stroke-width="1"/>
+  <circle cx="6" cy="16" r="3" fill="#34d399" stroke="#10b981" stroke-width="1"/>
+  <circle cx="16" cy="16" r="3" fill="#fbbf24" stroke="#f59e0b" stroke-width="1"/>
+  <circle cx="26" cy="16" r="3" fill="#34d399" stroke="#10b981" stroke-width="1"/>
+  <circle cx="3" cy="27" r="2.5" fill="#60a5fa" stroke="#3b82f6" stroke-width="1"/>
+  <circle cx="10" cy="27" r="2.5" fill="#60a5fa" stroke="#3b82f6" stroke-width="1"/>
+  <circle cx="22" cy="27" r="2.5" fill="#60a5fa" stroke="#3b82f6" stroke-width="1"/>
+  <circle cx="29" cy="27" r="2.5" fill="#60a5fa" stroke="#3b82f6" stroke-width="1"/>
+  <line x1="16" y1="7.5" x2="6" y2="13" stroke="#475569" stroke-width="1.2"/>
+  <line x1="16" y1="7.5" x2="16" y2="13" stroke="#475569" stroke-width="1.2"/>
+  <line x1="16" y1="7.5" x2="26" y2="13" stroke="#475569" stroke-width="1.2"/>
+  <line x1="6" y1="19" x2="3" y2="24.5" stroke="#475569" stroke-width="1.2"/>
+  <line x1="6" y1="19" x2="10" y2="24.5" stroke="#475569" stroke-width="1.2"/>
+  <line x1="26" y1="19" x2="22" y2="24.5" stroke="#475569" stroke-width="1.2"/>
+  <line x1="26" y1="19" x2="29" y2="24.5" stroke="#475569" stroke-width="1.2"/>
+</svg>

package/behaviour-tree-workflows-landing/src/App.css

@@ -0,0 +1,103 @@
+:root {
+  --color-bg: #0f172a;
+  --color-surface-1: #1e293b;
+  --color-surface-2: #334155;
+  --color-border: #334155;
+  --color-text: #e2e8f0;
+  --color-text-muted: #94a3b8;
+  --color-accent: #818cf8;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body, #root {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  background: var(--color-bg);
+  color: var(--color-text);
+  -webkit-font-smoothing: antialiased;
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.app__error {
+  padding: 6px 20px;
+  background: rgba(248, 113, 113, 0.1);
+  border-bottom: 1px solid rgba(248, 113, 113, 0.3);
+  font-size: 12px;
+  color: #f87171;
+  font-family: 'JetBrains Mono', monospace;
+}
+
+.app__error span {
+  font-weight: 600;
+}
+
+.app__main {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.app__editor {
+  width: 40%;
+  min-width: 300px;
+  border-right: 1px solid var(--color-border);
+  overflow: hidden;
+}
+
+.app__tree {
+  flex: 1;
+  overflow: hidden;
+}
+
+.app__bottom {
+  display: flex;
+  height: 220px;
+  flex-shrink: 0;
+}
+
+.app__log {
+  width: 50%;
+  border-right: 1px solid var(--color-border);
+  overflow: hidden;
+}
+
+.app__blackboard {
+  flex: 1;
+  overflow: hidden;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-surface-2);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #475569;
+}

package/behaviour-tree-workflows-landing/src/App.tsx

@@ -0,0 +1,176 @@
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import type { TreeNode } from '@btree/types';
+import type { NodeEvent } from '@btree/events';
+import { NodeStatus } from '@btree/types';
+import { Header } from './components/Header';
+import { ExampleSelector } from './components/ExampleSelector';
+import { Toolbar } from './components/Toolbar';
+import { YamlEditor } from './components/YamlEditor';
+import { TreeVisualizer } from './components/TreeVisualizer';
+import { ExecutionLog } from './components/ExecutionLog';
+import { BlackboardInspector } from './components/BlackboardInspector';
+import { examples } from './lib/yaml-examples';
+import { parseYamlToTree, executeTree } from './lib/execution-engine';
+import './App.css';
+
+export default function App() {
+  const [selectedExampleId, setSelectedExampleId] = useState(examples[0].id);
+  const [yamlValue, setYamlValue] = useState(examples[0].yaml);
+  const [tree, setTree] = useState<TreeNode | null>(null);
+  const [nodeCount, setNodeCount] = useState(0);
+  const [parseError, setParseError] = useState<string | null>(null);
+  const [isRunning, setIsRunning] = useState(false);
+  const [status, setStatus] = useState<string>('IDLE');
+  const [events, setEvents] = useState<NodeEvent<unknown>[]>([]);
+  const [nodeStates, setNodeStates] = useState<Map<string, string>>(new Map());
+  const [blackboard, setBlackboard] = useState<Record<string, unknown>>({});
+  const [executable, setExecutable] = useState(true);
+  const debounceRef = useRef<ReturnType<typeof setTimeout>>();
+
+  // Parse YAML on initial load
+  useEffect(() => {
+    const result = parseYamlToTree(examples[0].yaml);
+    if (result.tree) {
+      setTree(result.tree);
+      setNodeCount(result.nodeCount);
+    }
+    setExecutable(examples[0].executable);
+  }, []);
+
+  const handleYamlChange = useCallback((newYaml: string) => {
+    setYamlValue(newYaml);
+
+    // Debounce parsing
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      const result = parseYamlToTree(newYaml);
+      if (result.tree) {
+        setTree(result.tree);
+        setNodeCount(result.nodeCount);
+        setParseError(null);
+      } else {
+        setParseError(result.error);
+      }
+    }, 300);
+  }, []);
+
+  const handleExampleSelect = useCallback((example: typeof examples[0]) => {
+    setSelectedExampleId(example.id);
+    setYamlValue(example.yaml);
+    setExecutable(example.executable);
+
+    const result = parseYamlToTree(example.yaml);
+    if (result.tree) {
+      setTree(result.tree);
+      setNodeCount(result.nodeCount);
+      setParseError(null);
+    } else {
+      setParseError(result.error);
+    }
+
+    // Reset execution state
+    setStatus('IDLE');
+    setEvents([]);
+    setNodeStates(new Map());
+    setBlackboard({});
+  }, []);
+
+  const handleRun = useCallback(async () => {
+    if (!tree || isRunning) return;
+
+    // Re-parse to get a fresh tree (nodes may retain state from previous runs)
+    const result = parseYamlToTree(yamlValue);
+    if (!result.tree) return;
+
+    setIsRunning(true);
+    setStatus('RUNNING');
+    setEvents([]);
+    setNodeStates(new Map());
+    setBlackboard({});
+
+    const execResult = await executeTree(result.tree, (event) => {
+      setEvents((prev) => [...prev, event]);
+
+      // Update node states in real-time
+      const data = event.data as Record<string, unknown> | undefined;
+      if (event.type === 'tick_start') {
+        setNodeStates((prev) => {
+          const next = new Map(prev);
+          next.set(event.nodeId, 'running');
+          return next;
+        });
+      } else if (event.type === 'tick_end' && data?.status) {
+        const s = (data.status as string).toLowerCase();
+        setNodeStates((prev) => {
+          const next = new Map(prev);
+          next.set(event.nodeId, s);
+          return next;
+        });
+      } else if (event.type === 'error') {
+        setNodeStates((prev) => {
+          const next = new Map(prev);
+          next.set(event.nodeId, 'failure');
+          return next;
+        });
+      }
+    });
+
+    setStatus(execResult.status);
+    setBlackboard(execResult.blackboard);
+    setIsRunning(false);
+  }, [tree, isRunning, yamlValue]);
+
+  const handleReset = useCallback(() => {
+    setStatus('IDLE');
+    setEvents([]);
+    setNodeStates(new Map());
+    setBlackboard({});
+
+    // Re-parse the current YAML
+    const result = parseYamlToTree(yamlValue);
+    if (result.tree) {
+      setTree(result.tree);
+      setNodeCount(result.nodeCount);
+    }
+  }, [yamlValue]);
+
+  return (
+    <div className="app">
+      <Header />
+      <ExampleSelector
+        examples={examples}
+        selectedId={selectedExampleId}
+        onSelect={handleExampleSelect}
+      />
+      <Toolbar
+        status={status}
+        isRunning={isRunning}
+        executable={executable}
+        nodeCount={nodeCount}
+        onRun={handleRun}
+        onReset={handleReset}
+      />
+      {parseError && (
+        <div className="app__error">
+          <span>Parse Error:</span> {parseError}
+        </div>
+      )}
+      <div className="app__main">
+        <div className="app__editor">
+          <YamlEditor value={yamlValue} onChange={handleYamlChange} />
+        </div>
+        <div className="app__tree">
+          <TreeVisualizer tree={tree} nodeStates={nodeStates} />
+        </div>
+      </div>
+      <div className="app__bottom">
+        <div className="app__log">
+          <ExecutionLog events={events} />
+        </div>
+        <div className="app__blackboard">
+          <BlackboardInspector data={blackboard} />
+        </div>
+      </div>
+    </div>
+  );
+}

package/behaviour-tree-workflows-landing/src/components/BlackboardInspector.css

@@ -0,0 +1,89 @@
+.blackboard-inspector {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.blackboard-inspector__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-text-muted);
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-surface-1);
+  flex-shrink: 0;
+}
+
+.blackboard-inspector__count {
+  font-weight: 400;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+}
+
+.blackboard-inspector__body {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.blackboard-inspector__empty {
+  padding: 20px;
+  text-align: center;
+  color: var(--color-text-muted);
+  font-size: 12px;
+}
+
+.blackboard-inspector__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.blackboard-inspector__table th {
+  text-align: left;
+  padding: 6px 12px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-muted);
+  background: var(--color-surface-1);
+  border-bottom: 1px solid var(--color-border);
+  position: sticky;
+  top: 0;
+}
+
+.blackboard-inspector__table td {
+  padding: 4px 12px;
+  border-bottom: 1px solid var(--color-border);
+  vertical-align: top;
+}
+
+.bb-key {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+  color: #818cf8;
+  white-space: nowrap;
+  width: 1%;
+}
+
+.bb-value {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+  color: var(--color-text);
+}
+
+.bb-value pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.bb-value--multi pre {
+  font-size: 10px;
+  max-height: 120px;
+  overflow-y: auto;
+}

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import './BlackboardInspector.css';
+
+interface BlackboardInspectorProps {
+  data: Record<string, unknown>;
+}
+
+function formatValue(value: unknown): string {
+  if (value === null) return 'null';
+  if (value === undefined) return 'undefined';
+  if (typeof value === 'string') return `"${value}"`;
+  if (typeof value === 'object') {
+    try {
+      return JSON.stringify(value, null, 2);
+    } catch {
+      return String(value);
+    }
+  }
+  return String(value);
+}
+
+function isMultiline(value: unknown): boolean {
+  const str = formatValue(value);
+  return str.length > 60 || str.includes('\n');
+}
+
+export const BlackboardInspector: React.FC<BlackboardInspectorProps> = ({ data }) => {
+  const entries = Object.entries(data);
+
+  return (
+    <div className="blackboard-inspector">
+      <div className="blackboard-inspector__header">
+        Blackboard
+        <span className="blackboard-inspector__count">{entries.length} keys</span>
+      </div>
+      <div className="blackboard-inspector__body">
+        {entries.length === 0 ? (
+          <div className="blackboard-inspector__empty">
+            Blackboard is empty. Run a workflow to populate it.
+          </div>
+        ) : (
+          <table className="blackboard-inspector__table">
+            <thead>
+              <tr>
+                <th>Key</th>
+                <th>Value</th>
+              </tr>
+            </thead>
+            <tbody>
+              {entries.map(([key, value]) => (
+                <tr key={key}>
+                  <td className="bb-key">{key}</td>
+                  <td className={`bb-value ${isMultiline(value) ? 'bb-value--multi' : ''}`}>
+                    <pre>{formatValue(value)}</pre>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+    </div>
+  );
+};

package/behaviour-tree-workflows-landing/src/components/ExampleSelector.css

@@ -0,0 +1,64 @@
+.example-selector {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 20px;
+  background: var(--color-surface-1);
+  border-bottom: 1px solid var(--color-border);
+  overflow-x: auto;
+}
+
+.example-selector__label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--color-text-muted);
+  flex-shrink: 0;
+}
+
+.example-selector__list {
+  display: flex;
+  gap: 6px;
+  flex-wrap: nowrap;
+}
+
+.example-selector__btn {
+  font-family: 'Inter', sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  padding: 4px 12px;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  background: var(--color-surface-2);
+  color: var(--color-text-muted);
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.example-selector__btn:hover {
+  border-color: var(--color-accent);
+  color: var(--color-text);
+}
+
+.example-selector__btn--active {
+  background: rgba(129, 140, 248, 0.15);
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+}
+
+.example-selector__btn--viewonly {
+  opacity: 0.75;
+}
+
+.example-selector__tag {
+  font-size: 9px;
+  padding: 1px 4px;
+  border-radius: 3px;
+  background: rgba(251, 191, 36, 0.2);
+  color: #fbbf24;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { YamlExample } from '../lib/yaml-examples';
+import './ExampleSelector.css';
+
+interface ExampleSelectorProps {
+  examples: YamlExample[];
+  selectedId: string;
+  onSelect: (example: YamlExample) => void;
+}
+
+export const ExampleSelector: React.FC<ExampleSelectorProps> = ({
+  examples,
+  selectedId,
+  onSelect,
+}) => {
+  return (
+    <div className="example-selector">
+      <span className="example-selector__label">Examples:</span>
+      <div className="example-selector__list">
+        {examples.map((ex) => (
+          <button
+            key={ex.id}
+            className={`example-selector__btn ${selectedId === ex.id ? 'example-selector__btn--active' : ''} ${!ex.executable ? 'example-selector__btn--viewonly' : ''}`}
+            onClick={() => onSelect(ex)}
+            title={ex.description + (ex.executable ? '' : ' (view only)')}
+          >
+            {ex.name}
+            {!ex.executable && <span className="example-selector__tag">view</span>}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};

package/behaviour-tree-workflows-landing/src/components/ExecutionLog.css

@@ -0,0 +1,107 @@
+.execution-log {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.execution-log__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-text-muted);
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-surface-1);
+  flex-shrink: 0;
+}
+
+.execution-log__count {
+  font-weight: 400;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+}
+
+.execution-log__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 0;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+}
+
+.execution-log__empty {
+  padding: 20px;
+  text-align: center;
+  color: var(--color-text-muted);
+  font-family: 'Inter', sans-serif;
+  font-size: 12px;
+}
+
+.log-entry {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 2px 12px;
+  color: var(--color-text-muted);
+  line-height: 1.6;
+}
+
+.log-entry:hover {
+  background: var(--color-surface-2);
+}
+
+.log-entry__time {
+  flex-shrink: 0;
+  width: 60px;
+  color: #475569;
+  text-align: right;
+}
+
+.log-entry__icon {
+  flex-shrink: 0;
+  width: 24px;
+  text-align: center;
+  font-weight: 600;
+}
+
+.log-entry__type {
+  flex-shrink: 0;
+  width: 120px;
+  color: #818cf8;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.log-entry__name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text);
+}
+
+.log-entry__status {
+  flex-shrink: 0;
+  font-weight: 500;
+}
+
+.log-entry__error {
+  color: #f87171;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.log-entry--success .log-entry__icon { color: #34d399; }
+.log-entry--failure .log-entry__icon { color: #f87171; }
+.log-entry--running .log-entry__icon { color: #fbbf24; }
+.log-entry--error .log-entry__icon { color: #f87171; }
+
+.log-entry--success .log-entry__status { color: #34d399; }
+.log-entry--failure .log-entry__status { color: #f87171; }
+.log-entry--running .log-entry__status { color: #fbbf24; }