# 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:
```bash
rustup target add wasm32-unknown-unknown
```

2. Install wasm-pack:
```bash
cargo install wasm-pack
```

## Usage

### Basic Usage

Run the actor UI with minimal configuration:

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

### Full Configuration

```bash
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:

```bash
# 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:
```bash
wasm-pack build --target web --features wasm --out-dir pkg
```

2. Serve the files using any HTTP server:
```bash
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.