baobab/core/actor/README_UI.md

Baobab Actor UI

A WASM-based user interface for monitoring and dispatching jobs to Baobab actors. This UI provides a web-based dashboard for interacting with actors, running scripts, monitoring jobs, and managing example scripts.

Features

• Dashboard: Overview of actor status, job statistics, and configuration
• Inspector: Interactive script editor for dispatching jobs directly to Redis
• Jobs: Real-time job monitoring and status tracking
• Examples: Run pre-defined example scripts from a specified directory

Prerequisites

• Rust with wasm32-unknown-unknown target installed
• wasm-pack for building WASM applications
• Python 3 (for the built-in HTTP server)

Installation

1. Install the required Rust target:

rustup target add wasm32-unknown-unknown

2. Install wasm-pack:

cargo install wasm-pack

Usage

Basic Usage

Run the actor UI with minimal configuration:

cargo run --bin baobab_actor_ui -- --id my_actor --path /path/to/actor/binary

Full Configuration

cargo run --bin baobab_actor_ui -- \
  --id osis \
  --path /path/to/actor/osis \
  --example-dir /path/to/examples \
  --redis-url redis://localhost:6379 \
  --port 8080

Command Line Options

• --id: Actor ID to connect to (required)
• --path: Path to the actor binary (required)
• --example-dir: Directory containing example .rhai scripts (optional)
• --redis-url: Redis connection URL (default: redis://localhost:6379)
• --port: Port to serve the UI on (default: 8080)
• --skip-build: Skip building WASM and serve existing build

Development

For development with hot reload, you can use Trunk:

# Install trunk
cargo install trunk

# Serve with hot reload
trunk serve --features wasm

UI Components

Dashboard

• Actor status overview
• Job statistics (completed, pending, failed)
• Configuration information
• System metrics

Inspector

• Interactive script editor with syntax highlighting
• Job parameter configuration (JSON format)
• Real-time execution output
• Direct Redis job dispatch

Jobs

• Real-time job queue monitoring
• Job status tracking (Pending, Running, Completed, Failed)
• Job details viewer
• Job history and logs

Examples

• Browse available example scripts
• One-click script execution
• Script content preview
• Execution results display

Architecture

The UI is built using:

• Yew: Rust-based WebAssembly framework for building web applications
• Bootstrap 5: CSS framework for responsive design
• Bootstrap Icons: Icon library for UI elements
• WASM-bindgen: Rust/JavaScript interop for WebAssembly

Redis Integration

Since Redis clients don't work directly in WASM, the UI communicates with Redis through:

• HTTP API endpoints for job dispatch and monitoring
• WebSocket connections for real-time updates (planned)
• Backend service proxy for Redis operations

Example Scripts

When using the --example-dir parameter, the UI will load .rhai scripts from the specified directory. Example structure:

examples/
├── hello_world.rhai
├── math_operations.rhai
├── data_processing.rhai
└── workflow_example.rhai

Each script should be a valid Rhai script that can be executed by the actor.

Building for Production

1. Build the WASM application:

wasm-pack build --target web --features wasm --out-dir pkg

2. Serve the files using any HTTP server:

python3 -m http.server 8080

Troubleshooting

WASM Build Issues

• Ensure wasm32-unknown-unknown target is installed
• Check that wasm-pack is available in PATH
• Verify all WASM dependencies are properly configured

Runtime Issues

• Check browser console for JavaScript errors
• Ensure Redis is running and accessible
• Verify actor binary path is correct
• Check network connectivity for Bootstrap CDN resources

Performance

• The UI is optimized for modern browsers with WebAssembly support
• For better performance, consider serving static assets locally
• Monitor browser memory usage for long-running sessions

Contributing

When adding new features:

1. Update the appropriate page component in src/ui/pages/
2. Add new components to src/ui/components/
3. Update the router configuration if needed
4. Test with both mock and real data
5. Update this README with new features

License

This project follows the same license as the parent Baobab project.