@q1k-oss/btree-workflows 0.0.1

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

@@ -0,0 +1,85 @@
+import React, { useRef, useEffect } from 'react';
+import type { NodeEvent } from '@btree/events';
+import './ExecutionLog.css';
+
+interface ExecutionLogProps {
+  events: NodeEvent<unknown>[];
+}
+
+function formatTime(ts: number, base: number): string {
+  const diff = ts - base;
+  return `+${diff}ms`;
+}
+
+function getEventIcon(type: string, data?: Record<string, unknown>): string {
+  if (type === 'tick_start') return '>';
+  if (type === 'tick_end') {
+    const status = data?.status as string | undefined;
+    if (status === 'SUCCESS') return 'ok';
+    if (status === 'FAILURE') return '!!';
+    if (status === 'RUNNING') return '..';
+    return '--';
+  }
+  if (type === 'error') return 'ERR';
+  if (type === 'log') return 'LOG';
+  return '  ';
+}
+
+function getEventClass(type: string, data?: Record<string, unknown>): string {
+  if (type === 'error') return 'log-entry--error';
+  if (type === 'tick_end') {
+    const status = data?.status as string | undefined;
+    if (status === 'SUCCESS') return 'log-entry--success';
+    if (status === 'FAILURE') return 'log-entry--failure';
+    if (status === 'RUNNING') return 'log-entry--running';
+  }
+  return '';
+}
+
+export const ExecutionLog: React.FC<ExecutionLogProps> = ({ events }) => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const baseTime = events.length > 0 ? events[0].timestamp : 0;
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [events.length]);
+
+  return (
+    <div className="execution-log">
+      <div className="execution-log__header">
+        Execution Log
+        <span className="execution-log__count">{events.length} events</span>
+      </div>
+      <div className="execution-log__body" ref={scrollRef}>
+        {events.length === 0 ? (
+          <div className="execution-log__empty">Run a workflow to see events</div>
+        ) : (
+          events.map((event, i) => {
+            const data = event.data as Record<string, unknown> | undefined;
+            return (
+              <div
+                key={i}
+                className={`log-entry ${getEventClass(event.type, data)}`}
+              >
+                <span className="log-entry__time">{formatTime(event.timestamp, baseTime)}</span>
+                <span className="log-entry__icon">{getEventIcon(event.type, data)}</span>
+                <span className="log-entry__type">{event.nodeType}</span>
+                <span className="log-entry__name">{event.nodeName || event.nodeId}</span>
+                {data?.status && (
+                  <span className="log-entry__status">{data.status as string}</span>
+                )}
+                {data?.error && (
+                  <span className="log-entry__error">
+                    {(data.error as Record<string, string>).message}
+                  </span>
+                )}
+              </div>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,50 @@
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  height: 48px;
+  background: var(--color-surface-1);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.header__brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.header__logo {
+  flex-shrink: 0;
+}
+
+.header__title {
+  font-weight: 600;
+  font-size: 15px;
+  color: var(--color-text);
+}
+
+.header__badge {
+  font-size: 11px;
+  font-weight: 500;
+  padding: 2px 8px;
+  border-radius: 10px;
+  background: rgba(129, 140, 248, 0.15);
+  color: #818cf8;
+}
+
+.header__links {
+  display: flex;
+  gap: 16px;
+}
+
+.header__links a {
+  font-size: 13px;
+  color: var(--color-text-muted);
+  text-decoration: none;
+  transition: color 0.15s;
+}
+
+.header__links a:hover {
+  color: var(--color-text);
+}

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import './Header.css';
+
+export const Header: React.FC = () => {
+  return (
+    <header className="header">
+      <div className="header__brand">
+        <svg className="header__logo" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" width="28" height="28">
+          <circle cx="16" cy="4" r="3.5" fill="#818cf8" stroke="#6366f1" strokeWidth="1"/>
+          <circle cx="6" cy="16" r="3" fill="#34d399" stroke="#10b981" strokeWidth="1"/>
+          <circle cx="16" cy="16" r="3" fill="#fbbf24" stroke="#f59e0b" strokeWidth="1"/>
+          <circle cx="26" cy="16" r="3" fill="#34d399" stroke="#10b981" strokeWidth="1"/>
+          <line x1="16" y1="7.5" x2="6" y2="13" stroke="#475569" strokeWidth="1.2"/>
+          <line x1="16" y1="7.5" x2="16" y2="13" stroke="#475569" strokeWidth="1.2"/>
+          <line x1="16" y1="7.5" x2="26" y2="13" stroke="#475569" strokeWidth="1.2"/>
+        </svg>
+        <span className="header__title">btree-workflows</span>
+        <span className="header__badge">Playground</span>
+      </div>
+      <nav className="header__links">
+        <a href="https://github.com/nicholasgriffintn/behaviour-tree-workflows" target="_blank" rel="noopener noreferrer">GitHub</a>
+        <a href="https://www.npmjs.com/package/@wayfarer-ai/btree-workflows" target="_blank" rel="noopener noreferrer">npm</a>
+      </nav>
+    </header>
+  );
+};

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

@@ -0,0 +1,45 @@
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  font-family: 'JetBrains Mono', monospace;
+  font-weight: 500;
+  border-radius: 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.status-badge--md {
+  font-size: 12px;
+  padding: 4px 10px;
+}
+
+.status-badge--sm {
+  font-size: 10px;
+  padding: 2px 6px;
+}
+
+.status-badge--idle {
+  background: var(--color-surface-2);
+  color: var(--color-text-muted);
+}
+
+.status-badge--success {
+  background: rgba(52, 211, 153, 0.15);
+  color: #34d399;
+}
+
+.status-badge--failure {
+  background: rgba(248, 113, 113, 0.15);
+  color: #f87171;
+}
+
+.status-badge--running {
+  background: rgba(251, 191, 36, 0.15);
+  color: #fbbf24;
+  animation: pulse-badge 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse-badge {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.6; }
+}

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import './StatusBadge.css';
+
+interface StatusBadgeProps {
+  status: string;
+  size?: 'sm' | 'md';
+}
+
+export const StatusBadge: React.FC<StatusBadgeProps> = ({ status, size = 'md' }) => {
+  return (
+    <span className={`status-badge status-badge--${status.toLowerCase()} status-badge--${size}`}>
+      {status}
+    </span>
+  );
+};

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

@@ -0,0 +1,74 @@
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 20px;
+  background: var(--color-surface-1);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.toolbar__left,
+.toolbar__right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.toolbar__btn {
+  font-family: 'Inter', sans-serif;
+  font-size: 13px;
+  font-weight: 500;
+  padding: 6px 16px;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  background: var(--color-surface-2);
+  color: var(--color-text);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  transition: all 0.15s;
+}
+
+.toolbar__btn:hover:not(:disabled) {
+  border-color: var(--color-accent);
+}
+
+.toolbar__btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.toolbar__btn--run {
+  background: rgba(129, 140, 248, 0.15);
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+}
+
+.toolbar__btn--run:hover:not(:disabled) {
+  background: rgba(129, 140, 248, 0.25);
+}
+
+.toolbar__spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid transparent;
+  border-top-color: var(--color-accent);
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.toolbar__hint {
+  font-size: 11px;
+  color: #fbbf24;
+}
+
+.toolbar__info {
+  font-size: 12px;
+  color: var(--color-text-muted);
+  font-family: 'JetBrains Mono', monospace;
+}

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import { StatusBadge } from './StatusBadge';
+import './Toolbar.css';
+
+interface ToolbarProps {
+  status: string;
+  isRunning: boolean;
+  executable: boolean;
+  nodeCount: number;
+  onRun: () => void;
+  onReset: () => void;
+}
+
+export const Toolbar: React.FC<ToolbarProps> = ({
+  status,
+  isRunning,
+  executable,
+  nodeCount,
+  onRun,
+  onReset,
+}) => {
+  return (
+    <div className="toolbar">
+      <div className="toolbar__left">
+        <button
+          className="toolbar__btn toolbar__btn--run"
+          onClick={onRun}
+          disabled={isRunning || !executable}
+          title={!executable ? 'This example requires Temporal activities and can only be visualized' : ''}
+        >
+          {isRunning ? (
+            <span className="toolbar__spinner" />
+          ) : (
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
+              <path d="M3 1.5v11l9-5.5z"/>
+            </svg>
+          )}
+          {isRunning ? 'Running...' : 'Run'}
+        </button>
+        <button className="toolbar__btn" onClick={onReset} disabled={isRunning}>
+          Reset
+        </button>
+        {!executable && (
+          <span className="toolbar__hint">View-only: requires Temporal activities</span>
+        )}
+      </div>
+      <div className="toolbar__right">
+        <span className="toolbar__info">{nodeCount} nodes</span>
+        <StatusBadge status={status} />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,67 @@
+.tree-visualizer {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  background: var(--color-bg);
+  background-image:
+    radial-gradient(circle, var(--color-border) 1px, transparent 1px);
+  background-size: 24px 24px;
+}
+
+.tree-visualizer--empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tree-visualizer--empty p {
+  font-size: 13px;
+  color: var(--color-text-muted);
+}
+
+.tree-visualizer__svg {
+  width: 100%;
+  height: 100%;
+  cursor: grab;
+}
+
+.tree-visualizer__svg:active {
+  cursor: grabbing;
+}
+
+.tree-node--running {
+  animation: pulse-node 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse-node {
+  0%, 100% { stroke-opacity: 1; }
+  50% { stroke-opacity: 0.4; }
+}
+
+.tree-visualizer__legend {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  display: flex;
+  gap: 12px;
+  background: var(--color-surface-1);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  padding: 4px 10px;
+  font-size: 11px;
+  color: var(--color-text-muted);
+}
+
+.tree-visualizer__legend span {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.legend-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}

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

@@ -0,0 +1,192 @@
+import React, { useRef, useState, useCallback, useEffect } from 'react';
+import type { TreeNode } from '@btree/types';
+import { layoutTree, type LayoutNode, type LayoutEdge } from '../lib/tree-layout';
+import './TreeVisualizer.css';
+
+interface TreeVisualizerProps {
+  tree: TreeNode | null;
+  nodeStates: Map<string, string>;
+}
+
+const CATEGORY_COLORS: Record<string, string> = {
+  composite: '#818cf8',
+  decorator: '#fbbf24',
+  action: '#34d399',
+  condition: '#60a5fa',
+};
+
+const STATUS_BORDER: Record<string, string> = {
+  idle: '#475569',
+  running: '#fbbf24',
+  success: '#34d399',
+  failure: '#f87171',
+};
+
+const PADDING = 40;
+
+function NodeRect({ node }: { node: LayoutNode }) {
+  const fill = CATEGORY_COLORS[node.category] || '#818cf8';
+  const stroke = STATUS_BORDER[node.status] || STATUS_BORDER.idle;
+  const isRunning = node.status === 'running';
+
+  // Truncate name
+  const displayName = node.name.length > 18 ? node.name.slice(0, 16) + '...' : node.name;
+
+  return (
+    <g>
+      <rect
+        x={node.x}
+        y={node.y}
+        width={node.width}
+        height={node.height}
+        rx={8}
+        ry={8}
+        fill={`${fill}20`}
+        stroke={stroke}
+        strokeWidth={isRunning ? 2.5 : 1.5}
+        className={isRunning ? 'tree-node--running' : ''}
+      />
+      <text
+        x={node.x + node.width / 2}
+        y={node.y + 16}
+        textAnchor="middle"
+        fill={fill}
+        fontSize={10}
+        fontFamily="'JetBrains Mono', monospace"
+        fontWeight={500}
+      >
+        {node.type}
+      </text>
+      <text
+        x={node.x + node.width / 2}
+        y={node.y + 32}
+        textAnchor="middle"
+        fill="#94a3b8"
+        fontSize={10}
+        fontFamily="'Inter', sans-serif"
+      >
+        {displayName}
+      </text>
+    </g>
+  );
+}
+
+function EdgeLine({ edge }: { edge: LayoutEdge }) {
+  const midY = (edge.fromY + edge.toY) / 2;
+  const d = `M ${edge.fromX} ${edge.fromY} C ${edge.fromX} ${midY}, ${edge.toX} ${midY}, ${edge.toX} ${edge.toY}`;
+  return (
+    <path
+      d={d}
+      fill="none"
+      stroke="#334155"
+      strokeWidth={1.2}
+    />
+  );
+}
+
+function RenderTree({ node }: { node: LayoutNode }) {
+  return (
+    <>
+      <NodeRect node={node} />
+      {node.children.map((child) => (
+        <RenderTree key={child.id} node={child} />
+      ))}
+    </>
+  );
+}
+
+export const TreeVisualizer: React.FC<TreeVisualizerProps> = ({ tree, nodeStates }) => {
+  const svgRef = useRef<SVGSVGElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [viewBox, setViewBox] = useState({ x: 0, y: 0, w: 800, h: 600 });
+  const [isPanning, setIsPanning] = useState(false);
+  const panStart = useRef({ x: 0, y: 0, vx: 0, vy: 0 });
+
+  const layout = tree ? layoutTree(tree, nodeStates) : null;
+
+  useEffect(() => {
+    if (layout) {
+      setViewBox({
+        x: -PADDING,
+        y: -PADDING,
+        w: layout.width + PADDING * 2,
+        h: layout.height + PADDING * 2,
+      });
+    }
+  }, [layout?.width, layout?.height]);
+
+  const handleWheel = useCallback((e: React.WheelEvent) => {
+    e.preventDefault();
+    const factor = e.deltaY > 0 ? 1.1 : 0.9;
+    setViewBox((vb) => {
+      const mx = e.nativeEvent.offsetX;
+      const my = e.nativeEvent.offsetY;
+      const svg = svgRef.current;
+      if (!svg) return vb;
+      const rect = svg.getBoundingClientRect();
+      const px = vb.x + (mx / rect.width) * vb.w;
+      const py = vb.y + (my / rect.height) * vb.h;
+      const nw = vb.w * factor;
+      const nh = vb.h * factor;
+      return {
+        x: px - (mx / rect.width) * nw,
+        y: py - (my / rect.height) * nh,
+        w: nw,
+        h: nh,
+      };
+    });
+  }, []);
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    setIsPanning(true);
+    panStart.current = { x: e.clientX, y: e.clientY, vx: viewBox.x, vy: viewBox.y };
+  }, [viewBox]);
+
+  const handleMouseMove = useCallback((e: React.MouseEvent) => {
+    if (!isPanning) return;
+    const svg = svgRef.current;
+    if (!svg) return;
+    const rect = svg.getBoundingClientRect();
+    const dx = ((e.clientX - panStart.current.x) / rect.width) * viewBox.w;
+    const dy = ((e.clientY - panStart.current.y) / rect.height) * viewBox.h;
+    setViewBox((vb) => ({ ...vb, x: panStart.current.vx - dx, y: panStart.current.vy - dy }));
+  }, [isPanning, viewBox.w, viewBox.h]);
+
+  const handleMouseUp = useCallback(() => {
+    setIsPanning(false);
+  }, []);
+
+  if (!tree || !layout) {
+    return (
+      <div className="tree-visualizer tree-visualizer--empty">
+        <p>Write or select a YAML workflow to visualize the tree</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="tree-visualizer" ref={containerRef}>
+      <svg
+        ref={svgRef}
+        className="tree-visualizer__svg"
+        viewBox={`${viewBox.x} ${viewBox.y} ${viewBox.w} ${viewBox.h}`}
+        onWheel={handleWheel}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseUp}
+      >
+        {layout.edges.map((edge, i) => (
+          <EdgeLine key={i} edge={edge} />
+        ))}
+        <RenderTree node={layout.root} />
+      </svg>
+      <div className="tree-visualizer__legend">
+        <span><span className="legend-dot" style={{ background: '#818cf8' }}/>Composite</span>
+        <span><span className="legend-dot" style={{ background: '#fbbf24' }}/>Decorator</span>
+        <span><span className="legend-dot" style={{ background: '#34d399' }}/>Action</span>
+        <span><span className="legend-dot" style={{ background: '#60a5fa' }}/>Condition</span>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,18 @@
+.yaml-editor {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.yaml-editor .cm-editor {
+  height: 100%;
+}
+
+.yaml-editor .cm-editor.cm-focused {
+  outline: none;
+}
+
+.yaml-editor .cm-gutters {
+  border-right: 1px solid var(--color-border);
+  background: var(--color-surface-1);
+}