@q1k-oss/btree-workflows 0.0.1 → 0.0.2

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

@@ -1,31 +0,0 @@
-{
-  "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

@@ -1,17 +0,0 @@
-<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

@@ -1,103 +0,0 @@
-: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

@@ -1,176 +0,0 @@
-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

@@ -1,89 +0,0 @@
-.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

@@ -1,64 +0,0 @@
-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

@@ -1,64 +0,0 @@
-.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

@@ -1,34 +0,0 @@
-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

@@ -1,107 +0,0 @@
-.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; }