diff --git a/MANIFEST.in b/MANIFEST.in
index af36243..7a711b1 100644
--- a/MANIFEST.in
+++ b/MANIFEST.in
@@ -9,6 +9,9 @@ include pytest.ini
 # Include DAZ Studio scripts
 recursive-include vangard/scripts *.dsa
 
+# Include Pro mode static files
+recursive-include vangard/static *.html *.css *.js *.png *.jpg *.svg *.ico
+
 # Include test files (for source distributions)
 recursive-include tests *.py
 
diff --git a/PARAMETER_FIX_SUMMARY.md b/PARAMETER_FIX_SUMMARY.md
new file mode 100644
index 0000000..7790996
--- /dev/null
+++ b/PARAMETER_FIX_SUMMARY.md
@@ -0,0 +1,232 @@
+# Parameter Display Fix - Summary
+
+## Problem Identified
+
+The Pro mode interface was showing "This command has no parameters" for all commands, even though they had parameters defined in `config.yaml`.
+
+### Root Cause
+
+The JavaScript `extractParameters()` function wasn't resolving OpenAPI `$ref` references. FastAPI generates schemas like:
+
+```json
+{
+  "requestBody": {
+    "content": {
+      "application/json": {
+        "schema": {
+          "$ref": "#/components/schemas/Load_sceneRequest"
+        }
+      }
+    }
+  }
+}
+```
+
+The actual parameter definitions were in `components.schemas.Load_sceneRequest.properties`, but the code wasn't looking there.
+
+## Solution Implemented
+
+### 1. Fixed JavaScript Parameter Extraction
+
+**File: `vangard/static/js/app.js`**
+
+**Changes:**
+- Added `openApiSchema` to state to store full schema
+- Modified `extractParameters()` to:
+  - Accept full schema as parameter
+  - Resolve `$ref` references by traversing the schema
+  - Handle `anyOf` pattern for optional nullable fields
+  - Support `x-uiclass` extension for special UI widgets
+
+**Before:**
+```javascript
+function extractParameters(operation) {
+    const schema = operation.requestBody.content['application/json'].schema;
+    const properties = schema.properties || {};
+    // ... (would fail if schema has $ref)
+}
+```
+
+**After:**
+```javascript
+function extractParameters(operation, fullSchema) {
+    let schema = operation.requestBody.content['application/json'].schema;
+
+    // Resolve $ref if present
+    if (schema.$ref) {
+        const refPath = schema.$ref.split('/').slice(1);
+        schema = refPath.reduce((obj, key) => obj[key], fullSchema);
+    }
+
+    const properties = schema.properties || {};
+    // ... (now works with $ref)
+}
+```
+
+### 2. Added UIClass Support
+
+**Feature:** Special UI widgets for file/folder selection
+
+**Supported UIClass Values:**
+- `pick-file` - File browser button
+- `pick-folder` - Folder browser button
+
+**UI Implementation:**
+- Text input field (user can type path manually)
+- Browse button (for future native file picker)
+- Styled wrapper with icon buttons
+
+**CSS Added:**
+```css
+.file-picker-wrapper {
+    display: flex;
+    gap: var(--spacing-sm);
+    align-items: stretch;
+}
+
+.file-picker-input {
+    flex: 1;
+}
+
+.file-picker-button {
+    white-space: nowrap;
+    padding: var(--spacing-md) var(--spacing-lg);
+}
+```
+
+## How to Use UIClass (Optional Feature)
+
+### Adding UIClass to config.yaml
+
+You can now add a `uiclass` field to any argument to get special UI widgets in Pro mode:
+
+```yaml
+commands:
+  - name: "load-scene"
+    class: "vangard.commands.LoadMergeSU.LoadMergeSU"
+    help: "Load or merge DAZ Studio scene files"
+    arguments:
+      - names: ["scene_file"]
+        dest: "scene_file"
+        type: "str"
+        required: true
+        help: "Path to the DAZ Studio scene file"
+        uiclass: "pick-file"  # ← Add this for file picker UI
+
+      - names: ["-m", "--merge"]
+        dest: "merge"
+        action: "store_true"
+        help: "Merge with existing scene instead of replacing"
+```
+
+### UIClass in Action
+
+**Without UIClass (standard text input):**
+```
+┌─────────────────────────────────────┐
+│ /path/to/scene.duf                  │
+└─────────────────────────────────────┘
+```
+
+**With `uiclass: "pick-file"`:**
+```
+┌─────────────────────────────┬──────────────────┐
+│ /path/to/scene.duf          │ 📄 Browse File   │
+└─────────────────────────────┴──────────────────┘
+```
+
+**With `uiclass: "pick-folder"`:**
+```
+┌─────────────────────────────┬──────────────────┐
+│ /path/to/output/directory   │ 📁 Browse Folder │
+└─────────────────────────────┴──────────────────┘
+```
+
+## Test Results
+
+Tested with multiple commands:
+
+- ✅ **load-scene**: 2 parameters (scene_file, merge)
+- ✅ **batch-render**: 13 parameters (all extracting correctly)
+- ✅ **create-cam**: 3 parameters (cam_name, cam_class, focus)
+- ✅ **help**: 1 parameter (command_name)
+
+All commands now display their parameters correctly!
+
+## Implementation Status
+
+### ✅ Completed
+- [x] JavaScript $ref resolution
+- [x] anyOf pattern handling for optional fields
+- [x] UIClass support in form generation
+- [x] File picker UI widget
+- [x] Folder picker UI widget
+- [x] CSS styling for pickers
+- [x] Documentation (UICLASS_GUIDE.md)
+
+### 🚧 Future Enhancements
+- [ ] Native file/folder browser dialogs (HTML5 File API)
+- [ ] Drag-and-drop file support
+- [ ] Path autocomplete
+- [ ] Recent paths history
+- [ ] Additional UIClass types (color picker, slider, dropdown, etc.)
+
+## Files Modified
+
+1. **vangard/static/js/app.js**
+   - Added `openApiSchema` to state
+   - Fixed `extractParameters()` to resolve $ref
+   - Added UIClass widget generation
+   - Updated `loadCommands()` to pass full schema
+
+2. **vangard/static/css/styles.css**
+   - Added `.file-picker-wrapper` styling
+   - Added `.file-picker-input` styling
+   - Added `.file-picker-button` styling
+
+3. **New Documentation**
+   - `UICLASS_GUIDE.md` - Complete guide for UIClass feature
+
+## Testing
+
+To verify the fix works:
+
+1. Start Pro mode:
+   ```bash
+   vangard-pro
+   ```
+
+2. Open browser to: http://127.0.0.1:8000/ui
+
+3. Click any command (e.g., "load-scene")
+
+4. **Expected:** You should now see parameter fields:
+   - "Scene File" with a text input (required field marked with *)
+   - "Merge" with a checkbox
+
+5. Commands without parameters will show "This command has no parameters"
+
+## Benefits
+
+1. **Fixed Core Issue**: All command parameters now display correctly
+2. **Better UX**: Added special widgets for file/folder selection
+3. **Extensible**: Easy to add more UIClass types in the future
+4. **Backwards Compatible**: UIClass is optional, existing commands work fine
+5. **CLI Unaffected**: UIClass only affects Pro mode, other modes unchanged
+
+## Next Steps (Optional)
+
+If you want to add file/folder pickers to your commands:
+
+1. Edit `config.yaml`
+2. Add `uiclass: "pick-file"` or `uiclass: "pick-folder"` to relevant arguments
+3. Restart the Pro server
+4. The UI will automatically show browse buttons for those fields
+
+See `UICLASS_GUIDE.md` for complete examples and documentation.
+
+---
+
+**Status: ✅ FIXED AND TESTED**
+
+Parameters now display correctly in Vangard Pro mode!
diff --git a/PRO_IMPLEMENTATION_SUMMARY.md b/PRO_IMPLEMENTATION_SUMMARY.md
new file mode 100644
index 0000000..ae3f228
--- /dev/null
+++ b/PRO_IMPLEMENTATION_SUMMARY.md
@@ -0,0 +1,352 @@
+# Vangard Pro Mode - Implementation Summary
+
+## What We Built
+
+A professional, colorful web interface for Vangard that provides a visual, form-based alternative to command-line interaction. This is designed for users who are less comfortable with CLI tools and prefer point-and-click interfaces.
+
+## 🎯 Key Features
+
+### 1. **Visual Command Discovery**
+- Sidebar with all commands displayed as cards with icons
+- Search functionality to filter commands
+- Alphabetically sorted for easy navigation
+- Command count badge
+
+### 2. **Dynamic Form Generation**
+- Forms automatically generated from `config.yaml`
+- Type-aware input fields (text, number, checkbox, array)
+- Required field indicators
+- Help tooltips for parameter descriptions
+- File browser support (ready for future enhancement)
+
+### 3. **Professional Design**
+- **Dark theme by default** (professional for 3D work)
+- Glassmorphism effects and modern UI patterns
+- Smooth animations and transitions
+- **Colorful** with vibrant accent colors
+- Responsive layout (works on desktop and tablet)
+
+### 4. **User Experience**
+- Loading overlays during command execution
+- Toast notifications (success/error/info)
+- Real-time output display with syntax highlighting
+- Theme toggle (dark/light mode)
+- Collapsible output panel
+
+### 5. **Technical Excellence**
+- **Zero framework dependencies** on frontend (vanilla JS)
+- Leverages existing FastAPI infrastructure
+- Works with existing command system
+- Auto-generates forms from OpenAPI schema
+
+## 📁 Files Created
+
+### Backend
+- **`vangard/pro.py`** - FastAPI server that serves both API and static files
+  - Extends existing `vangard.server` functionality
+  - Serves static HTML/CSS/JS
+  - Provides fallback if static files missing
+
+### Frontend
+- **`vangard/static/index.html`** - Main HTML structure
+  - Header with search and theme toggle
+  - Sidebar for command list
+  - Main content area for forms and output
+  - Toast notification container
+  - Loading overlay
+
+- **`vangard/static/css/styles.css`** - Professional stylesheet (300+ lines)
+  - CSS custom properties for theming
+  - Dark/light theme support
+  - Glassmorphism effects
+  - Responsive design
+  - Smooth transitions and animations
+  - Custom scrollbars
+
+- **`vangard/static/js/app.js`** - Application logic (500+ lines)
+  - Fetches commands from OpenAPI schema
+  - Generates command list dynamically
+  - Creates forms based on parameter types
+  - Handles form submission via Fetch API
+  - Manages state (selected command, theme, etc.)
+  - Toast notifications
+  - Search functionality
+
+### Documentation
+- **`PRO_MODE.md`** - User guide for Pro mode
+  - Quick start instructions
+  - Feature overview
+  - Usage guide
+  - Customization tips
+  - Troubleshooting
+
+- **`PRO_IMPLEMENTATION_SUMMARY.md`** - This file
+  - Technical overview
+  - Implementation details
+  - Testing instructions
+
+### Configuration Updates
+- **`setup.py`** - Added `vangard-pro` console script and static files
+- **`pyproject.toml`** - Added `vangard-pro` script entry
+- **`MANIFEST.in`** - Include static files in distribution
+- **`vangard/main.py`** - Added 'pro' mode option
+
+## 🎨 Design System
+
+### Color Palette
+```
+Primary:   #6366f1 (Indigo - professional but vibrant)
+Success:   #10b981 (Emerald green)
+Warning:   #f59e0b (Amber)
+Error:     #ef4444 (Red)
+Accent:    #8b5cf6 (Purple - for highlights)
+
+Dark Theme:
+  Background: #0f172a (Dark slate)
+  Surface:    #1e293b (Lighter slate)
+  Text:       #f1f5f9 (Light gray)
+
+Light Theme:
+  Background: #f8fafc (Very light blue)
+  Surface:    #ffffff (White)
+  Text:       #0f172a (Dark slate)
+```
+
+### Visual Style
+- **Glassmorphism**: Frosted glass effect on cards
+- **Gradient accents**: Linear gradients on logo and headings
+- **Shadow depth**: Multiple shadow levels for hierarchy
+- **Border radius**: Rounded corners throughout
+- **Smooth animations**: 150ms-300ms transitions
+
+### Typography
+- **System fonts**: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto
+- **Monospace**: Monaco, Courier New (for output)
+- **Font weights**: 400 (normal), 600 (semi-bold), 700 (bold)
+
+## 🏗️ Architecture
+
+```
+┌─────────────────────────────────────────────────┐
+│             Browser (http://localhost:8000)      │
+│                                                  │
+│  index.html  →  app.js  →  styles.css           │
+│      ↓            ↓                              │
+│  Fetches      Generates      Applies            │
+│  /openapi.json  forms        themes             │
+└──────────────────┬────────────────────────────┘
+                   │ HTTP POST
+                   ↓
+┌─────────────────────────────────────────────────┐
+│          FastAPI Server (vangard/pro.py)        │
+│                                                  │
+│  GET /         →  Serves index.html             │
+│  GET /static/* →  Serves CSS/JS                 │
+│  GET /docs     →  Swagger UI                    │
+│  POST /api/*   →  Command endpoints             │
+└──────────────────┬────────────────────────────┘
+                   │
+                   ↓
+┌─────────────────────────────────────────────────┐
+│       Command Classes (vangard/commands/)       │
+│                                                  │
+│  LoadMergeSU, BatchRenderSU, etc.               │
+└──────────────────┬────────────────────────────┘
+                   │
+                   ↓
+┌─────────────────────────────────────────────────┐
+│              DAZ Studio (subprocess)            │
+│                                                  │
+│  Executes .dsa scripts                          │
+└─────────────────────────────────────────────────┘
+```
+
+## 🚀 How to Use
+
+### Launch Pro Mode
+
+```bash
+# Method 1: Direct command
+vangard-pro
+
+# Method 2: Through main launcher
+vangard pro
+```
+
+### Access the Interface
+
+Open your browser to: **http://127.0.0.1:8000**
+
+### Workflow
+
+1. **Browse Commands**: Scroll through the sidebar or use search
+2. **Select Command**: Click on a command card
+3. **Fill Form**: Enter required parameters (marked with *)
+4. **Execute**: Click "Execute Command" button
+5. **View Output**: Results appear in the output panel below
+
+## 🧪 Testing Checklist
+
+### Functional Tests
+
+- [ ] **Launch**: `vangard-pro` starts server successfully
+- [ ] **Load Page**: Browser loads interface at http://127.0.0.1:8000
+- [ ] **Commands Load**: Sidebar populates with commands from config.yaml
+- [ ] **Search**: Filter commands by typing in search box
+- [ ] **Select Command**: Click command card shows form
+- [ ] **Form Generation**: Form fields match command parameters
+- [ ] **Required Fields**: Red asterisk appears on required fields
+- [ ] **Help Tooltips**: Info icon shows parameter description
+- [ ] **Form Submission**: Execute button sends data to API
+- [ ] **Output Display**: Results appear in output panel
+- [ ] **Loading State**: Loading overlay appears during execution
+- [ ] **Toast Notification**: Success/error toast appears
+- [ ] **Theme Toggle**: Switch between dark and light themes
+- [ ] **Close Command**: X button returns to welcome screen
+
+### Visual Tests
+
+- [ ] **Responsive**: Layout adapts to different screen sizes
+- [ ] **Animations**: Smooth transitions on hover and clicks
+- [ ] **Scrolling**: Custom scrollbar appears in sidebar
+- [ ] **Colors**: Professional color scheme matches design
+- [ ] **Typography**: Fonts render correctly and are readable
+- [ ] **Icons**: Command icons display properly
+
+### Edge Cases
+
+- [ ] **No Parameters**: Commands without params show "no parameters" message
+- [ ] **Array Inputs**: Comma-separated values work correctly
+- [ ] **Boolean Inputs**: Checkboxes toggle properly
+- [ ] **Number Inputs**: Number fields accept integers/floats
+- [ ] **Empty Search**: Shows all commands when search is cleared
+- [ ] **API Error**: Error toast appears if API request fails
+
+## 🔄 Integration with Existing System
+
+### What's Reused
+✅ Entire FastAPI server infrastructure (`vangard.server`)
+✅ Command classes and execution logic
+✅ Config.yaml for command definitions
+✅ OpenAPI schema generation
+✅ DAZ Studio integration
+
+### What's New
+✨ Static file serving
+✨ Frontend HTML/CSS/JS
+✨ Professional UI/UX
+✨ Visual command browser
+
+### No Breaking Changes
+- CLI mode: Still works exactly the same
+- Interactive mode: Unchanged
+- Server mode: Unchanged (Pro uses same endpoints)
+- GUI mode: Unchanged
+
+## 📊 Comparison with Other Modes
+
+| Feature              | CLI | Interactive | GUI (tkinter) | Server | **Pro** |
+|----------------------|-----|-------------|---------------|--------|---------|
+| No command syntax    | ❌  | ❌          | ✅            | ✅     | ✅      |
+| Visual interface     | ❌  | ❌          | ✅            | ❌     | ✅      |
+| Modern design        | ❌  | ❌          | ❌            | N/A    | ✅      |
+| Form-based input     | ❌  | ❌          | ✅            | ✅     | ✅      |
+| Command discovery    | ❌  | ⚠️          | ⚠️            | ✅     | ✅      |
+| Searchable commands  | ❌  | ❌          | ❌            | ❌     | ✅      |
+| Real-time feedback   | ✅  | ✅          | ✅            | ✅     | ✅      |
+| Remote access        | ❌  | ❌          | ❌            | ✅     | ✅      |
+| API documentation    | ❌  | ❌          | ❌            | ✅     | ✅      |
+| Theme customization  | ❌  | ❌          | ❌            | ❌     | ✅      |
+
+## 🎯 Target Users
+
+**Perfect for:**
+- Artists and content creators
+- Users uncomfortable with command-line tools
+- Visual learners
+- Users who prefer clicking over typing
+- Teams that need a shared web interface
+- Users who want to discover commands visually
+
+**Still use CLI/Interactive for:**
+- Quick one-off commands
+- Scripting and automation
+- SSH/remote terminal sessions
+- Power users comfortable with command-line
+
+## 🔮 Future Enhancements
+
+### Phase 2 (Near Future)
+- [ ] Command favorites/recents
+- [ ] File path browser widget
+- [ ] WebSocket for real-time output streaming
+- [ ] Command history
+- [ ] Keyboard shortcuts
+
+### Phase 3 (Future)
+- [ ] Batch command execution
+- [ ] Command templates/presets
+- [ ] Multi-user authentication
+- [ ] Desktop app packaging (pywebview or Electron)
+- [ ] Progress bars for long operations
+- [ ] Command scheduling
+
+## 🐛 Known Limitations
+
+1. **Output Streaming**: Currently shows results after completion (not real-time)
+2. **File Picker**: Uses text input for file paths (no native file browser yet)
+3. **Large Outputs**: Very large outputs might slow down the browser
+4. **Single User**: No authentication/multi-user support yet
+
+## 📝 Code Quality
+
+### Frontend
+- **Vanilla JavaScript**: No build step required, easy to understand
+- **Modular Structure**: Clear separation of concerns (state, UI, API)
+- **Documented**: Comments explain complex logic
+- **ES6+**: Modern JavaScript features (async/await, arrow functions)
+
+### Backend
+- **Extends Existing**: Builds on proven `vangard.server` code
+- **Type Hints**: Python type annotations throughout
+- **Error Handling**: Proper try/catch and HTTP status codes
+- **Separation**: Static serving separated from API logic
+
+### Styling
+- **CSS Variables**: Easy theming via custom properties
+- **BEM-like Naming**: Consistent class naming convention
+- **Responsive**: Mobile-first with media queries
+- **No Frameworks**: Pure CSS for maximum control
+
+## 🎓 Learning Resources
+
+If you want to extend or customize Pro mode:
+
+### Frontend
+- **JavaScript**: [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
+- **Fetch API**: [Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
+- **CSS Grid/Flexbox**: [CSS Tricks Guide](https://css-tricks.com/)
+
+### Backend
+- **FastAPI**: [Official Docs](https://fastapi.tiangolo.com/)
+- **Uvicorn**: [Uvicorn Docs](https://www.uvicorn.org/)
+
+## 🎉 Summary
+
+We've successfully created a **professional, colorful, web-based interface** for Vangard that:
+
+✅ Provides visual command discovery
+✅ Generates forms automatically from config
+✅ Offers a modern, polished user experience
+✅ Works alongside existing CLI/GUI modes
+✅ Requires zero changes to existing commands
+✅ Uses proven web technologies
+✅ Can be extended and customized easily
+
+**Launch it now and see it in action:**
+```bash
+vangard-pro
+# Then open http://127.0.0.1:8000 in your browser
+```
+
+Enjoy your new professional interface! 🚀
diff --git a/PRO_MODE.md b/PRO_MODE.md
new file mode 100644
index 0000000..bf62238
--- /dev/null
+++ b/PRO_MODE.md
@@ -0,0 +1,259 @@
+# Vangard Pro Mode
+
+Professional web interface for DAZ Studio automation - designed for users who prefer visual, form-based interactions over command-line interfaces.
+
+## Overview
+
+Vangard Pro is a modern, colorful web interface that provides:
+
+- **Visual Command Discovery**: Browse all available commands with icons and descriptions
+- **Dynamic Form Generation**: Automatically generated forms based on command parameters
+- **Real-time Validation**: Instant feedback on required fields and input types
+- **Professional Design**: Dark theme with glassmorphism effects and smooth animations
+- **User-Friendly**: No command-line knowledge required
+
+## Quick Start
+
+### 1. Install the Package
+
+```bash
+pip install -e .
+```
+
+### 2. Launch Pro Mode
+
+```bash
+# Direct launch
+vangard-pro
+
+# Or through the main launcher
+vangard pro
+```
+
+The server will start at: **http://127.0.0.1:8000**
+
+### 3. Open in Browser
+
+Navigate to http://127.0.0.1:8000 in your web browser to access the Pro interface.
+
+## Features
+
+### Command Browser
+
+- **Searchable Command List**: Quickly find commands by name or description
+- **Command Icons**: Visual indicators for different command types
+- **Organized Categories**: Commands are alphabetically sorted for easy navigation
+
+### Dynamic Forms
+
+- **Auto-generated Forms**: Forms are created automatically from command definitions
+- **Input Validation**: Required fields are clearly marked
+- **Type-specific Inputs**: Different input types (text, number, checkbox, etc.) based on parameter types
+- **Help Tooltips**: Hover over the info icon to see parameter descriptions
+
+### Output Display
+
+- **Real-time Feedback**: See command execution results immediately
+- **Syntax Highlighting**: Color-coded output (success, error, info)
+- **Collapsible Output**: Hide/show output panel as needed
+- **Timestamped Logs**: Each output line includes a timestamp
+
+### User Experience
+
+- **Loading Indicators**: Visual feedback during command execution
+- **Toast Notifications**: Non-intrusive success/error messages
+- **Theme Toggle**: Switch between dark and light themes
+- **Responsive Design**: Works on desktop and tablet devices
+
+## Architecture
+
+```
+User Browser
+    ↓
+vangard/static/index.html (Frontend)
+    ↓
+JavaScript App (app.js)
+    ↓ (HTTP POST)
+FastAPI Server (vangard/pro.py)
+    ↓
+Command Classes
+    ↓
+DAZ Studio
+```
+
+### Technology Stack
+
+**Backend:**
+- FastAPI (Web server)
+- Python command classes
+- Existing Vangard infrastructure
+
+**Frontend:**
+- Vanilla JavaScript (no framework dependencies)
+- CSS3 with custom properties for theming
+- HTML5 semantic markup
+
+### Design System
+
+**Color Palette:**
+- Primary: Indigo (#6366f1)
+- Success: Emerald Green (#10b981)
+- Warning: Amber (#f59e0b)
+- Error: Red (#ef4444)
+- Accent: Purple (#8b5cf6)
+
+**Visual Style:**
+- Dark theme by default (professional for 3D work)
+- Glassmorphism effects
+- Smooth transitions and animations
+- Icon-based visual language
+
+## Usage Guide
+
+### Selecting a Command
+
+1. Browse the command list in the left sidebar
+2. Use the search box to filter commands by name or description
+3. Click on a command to view its details and form
+
+### Filling Out Forms
+
+1. **Required Fields**: Marked with a red asterisk (*)
+2. **Optional Fields**: Can be left empty
+3. **Help Icons**: Click the ⓘ icon to see parameter descriptions
+4. **Array Inputs**: Enter comma-separated values for array parameters
+
+### Executing Commands
+
+1. Fill out the form with the required parameters
+2. Click the "Execute Command" button
+3. Watch the loading indicator while the command runs
+4. View the results in the output panel below the form
+
+### Viewing Output
+
+- **Success Output**: Displayed in green
+- **Error Output**: Displayed in red
+- **Info Output**: Displayed in blue
+- **Clear Output**: Click the trash icon to clear the output
+- **Collapse/Expand**: Click the arrow icon to toggle the output panel
+
+## API Documentation
+
+While using Pro mode, you can also access the interactive API documentation:
+
+- **Swagger UI**: http://127.0.0.1:8000/docs
+- **OpenAPI Schema**: http://127.0.0.1:8000/openapi.json
+
+## Customization
+
+### Adding Custom Icons
+
+Edit `/vangard/static/js/app.js` and update the `COMMAND_ICONS` object:
+
+```javascript
+const COMMAND_ICONS = {
+    'your-command': '🎨',  // Add your custom icon mapping
+    // ...
+};
+```
+
+### Changing Colors
+
+Edit `/vangard/static/css/styles.css` and modify the CSS variables in the `:root` selector:
+
+```css
+:root {
+    --color-primary: #your-color;
+    /* ... */
+}
+```
+
+### Custom Styling
+
+All styles are in `/vangard/static/css/styles.css`. The CSS is organized into sections:
+
+- Base Styles
+- Header
+- Sidebar
+- Main Content
+- Forms
+- Output
+- Utilities
+
+## Comparison with Other Modes
+
+| Feature | CLI | Interactive | GUI | Server | **Pro** |
+|---------|-----|-------------|-----|--------|---------|
+| Visual Interface | ❌ | ❌ | ✅ | ❌ | ✅ |
+| No Command Syntax | ❌ | ❌ | ✅ | ✅ | ✅ |
+| Form-based Input | ❌ | ❌ | ✅ | ✅ | ✅ |
+| Modern Design | ❌ | ❌ | ❌ | N/A | ✅ |
+| Real-time Feedback | ✅ | ✅ | ✅ | ✅ | ✅ |
+| Command Discovery | ❌ | ⚠️ | ⚠️ | ✅ | ✅ |
+| API Access | ❌ | ❌ | ❌ | ✅ | ✅ |
+| Web-based | ❌ | ❌ | ❌ | ✅ | ✅ |
+
+## Troubleshooting
+
+### Port Already in Use
+
+If port 8000 is already in use, you can modify the port in `/vangard/pro.py`:
+
+```python
+uvicorn.run(
+    "vangard.pro:app",
+    host="127.0.0.1",
+    port=8001,  # Change to your preferred port
+    # ...
+)
+```
+
+### Static Files Not Loading
+
+Ensure the static files are properly included in your installation:
+
+```bash
+pip install -e . --force-reinstall
+```
+
+### Browser Compatibility
+
+Pro mode works best with modern browsers:
+- Chrome/Edge 90+
+- Firefox 88+
+- Safari 14+
+
+## Future Enhancements
+
+Potential features for future versions:
+
+- [ ] Command history and favorites
+- [ ] Batch command execution
+- [ ] WebSocket support for real-time output streaming
+- [ ] File upload widget for file path parameters
+- [ ] Command templates and presets
+- [ ] Multi-language support
+- [ ] Keyboard shortcuts
+- [ ] Desktop app packaging (via pywebview or Electron)
+
+## Contributing
+
+To contribute to Pro mode:
+
+1. Frontend code: `/vangard/static/`
+2. Backend code: `/vangard/pro.py`
+3. Follow the existing code style and design patterns
+4. Test in multiple browsers before submitting PRs
+
+## License
+
+Same as the main Vangard project - GNU Affero General Public License v3.0.
+
+---
+
+**Questions or Issues?**
+
+- Check the main [README.md](README.md) for general project information
+- Review [CLAUDE.md](CLAUDE.md) for development guidance
+- Open an issue on the project repository
diff --git a/PRO_VISUAL_REFERENCE.md b/PRO_VISUAL_REFERENCE.md
new file mode 100644
index 0000000..dd56779
--- /dev/null
+++ b/PRO_VISUAL_REFERENCE.md
@@ -0,0 +1,358 @@
+# Vangard Pro - Visual Reference
+
+## Interface Overview
+
+```
+╔════════════════════════════════════════════════════════════════════════╗
+║  🎬 Vangard Pro          🔍 [Search...]    🌙  📚                      ║
+╠═══════════════════╦════════════════════════════════════════════════════╣
+║                   ║                                                    ║
+║  Commands    [38] ║           Welcome to Vangard Pro                  ║
+║  ───────────────  ║                                                    ║
+║                   ║              🎨  (Floating Icon)                   ║
+║  🔍 [________]    ║                                                    ║
+║                   ║  Professional interface for DAZ Studio automation  ║
+║  ┌─────────────┐ ║                                                    ║
+║  │ 📦 action   │ ║    ┌──────┐  ┌──────┐  ┌──────┐                  ║
+║  │ Execute...  │ ║    │  ⚡  │  │  🎯  │  │  🔄  │                  ║
+║  └─────────────┘ ║    │ Fast │  │Visual│  │Real- │                  ║
+║                   ║    │  &   │  │ Cmd  │  │ time │                  ║
+║  ┌─────────────┐ ║    │Intui-│  │Build-│  │Feed- │                  ║
+║  │ 🎬 batch... │ ║    │ tive │  │  er  │  │ back │                  ║
+║  │ Batch re... │ ║    └──────┘  └──────┘  └──────┘                  ║
+║  └─────────────┘ ║                                                    ║
+║                   ║    Select a command from the sidebar to get started║
+║  ┌─────────────┐ ║                                                    ║
+║  │ 📷 create...│ ║                                                    ║
+║  │ Create a... │ ║                                                    ║
+║  └─────────────┘ ║                                                    ║
+║                   ║                                                    ║
+║  ┌─────────────┐ ║                                                    ║
+║  │ 💾 save...  │ ║                                                    ║
+║  │ Save sce... │ ║                                                    ║
+║  └─────────────┘ ║                                                    ║
+║        ⋮          ║                                                    ║
+║                   ║                                                    ║
+║                   ║                                                    ║
+╚═══════════════════╩════════════════════════════════════════════════════╝
+```
+
+## Command Form View
+
+```
+╔════════════════════════════════════════════════════════════════════════╗
+║  🎬 Vangard Pro          🔍 [load]         🌙  📚                      ║
+╠═══════════════════╦════════════════════════════════════════════════════╣
+║                   ║                                                    ║
+║  Commands    [38] ║  📂  Load Scene                              ✕    ║
+║  ───────────────  ║      Load or merge DAZ Studio scene files         ║
+║                   ║  ─────────────────────────────────────────────    ║
+║  🔍 [load____]    ║                                                    ║
+║                   ║  ┌───────────────────────────────────────────┐   ║
+║  ┌─────────────┐ ║  │                                            │   ║
+║  │ 📂 load-... │ ║  │  Scene File *  ⓘ                          │   ║
+║  │ Load or ... │ ║  │  [________________________________]        │   ║
+║  └─────────────┘ ║  │                                            │   ║
+║    (ACTIVE)       ║  │  ☐  Merge with existing scene             │   ║
+║                   ║  │                                            │   ║
+║  ┌─────────────┐ ║  │                                            │   ║
+║  │ 📂 saveas   │ ║  │                                            │   ║
+║  │ Make a c... │ ║  │                                            │   ║
+║  └─────────────┘ ║  │  [Reset]              [ ▶ Execute Command]│   ║
+║                   ║  └───────────────────────────────────────────┘   ║
+║                   ║                                                    ║
+║                   ║  ┌───────────────────────────────────────────┐   ║
+║                   ║  │ Output                    🗑️  ▼            │   ║
+║                   ║  ├───────────────────────────────────────────┤   ║
+║                   ║  │ [14:23:45] Executing load-scene...        │   ║
+║                   ║  │ [14:23:46] ✓ Scene loaded successfully    │   ║
+║                   ║  │                                            │   ║
+║                   ║  └───────────────────────────────────────────┘   ║
+║                   ║                                                    ║
+╚═══════════════════╩════════════════════════════════════════════════════╝
+
+                                                      ┌─────────────────┐
+                                                      │ ✓ Command       │
+                                                      │   executed      │
+                                                      │   successfully  │
+                                                      └─────────────────┘
+                                                       (Toast Notification)
+```
+
+## Color Scheme Examples
+
+### Dark Theme (Default)
+```
+Header:    ████ #1e293b (Slate)
+Sidebar:   ████ #1e293b (Slate)
+Background:████ #0f172a (Dark Slate)
+Primary:   ████ #6366f1 (Indigo)
+Success:   ████ #10b981 (Green)
+Error:     ████ #ef4444 (Red)
+Accent:    ████ #8b5cf6 (Purple)
+Text:      ████ #f1f5f9 (Light)
+```
+
+### Light Theme
+```
+Header:    ████ #ffffff (White)
+Sidebar:   ████ #ffffff (White)
+Background:████ #f8fafc (Very Light Blue)
+Primary:   ████ #6366f1 (Indigo)
+Success:   ████ #10b981 (Green)
+Error:     ████ #ef4444 (Red)
+Accent:    ████ #8b5cf6 (Purple)
+Text:      ████ #0f172a (Dark)
+```
+
+## Component Examples
+
+### Command Card (Hover State)
+```
+┌──────────────────────────────┐
+│ 📦  action                   │  ← Icon + Name
+│     Execute the specified... │  ← Description (truncated)
+└──────────────────────────────┘
+
+Hover Effect:
+┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓  ← Indigo background
+┃ 📦  action                   ┃  ← White text
+┃     Execute the specified... ┃  ← Semi-transparent white
+┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛  ← Shadow + Slide right
+```
+
+### Form Field Types
+
+**Text Input:**
+```
+Label *  ⓘ
+┌────────────────────────────┐
+│ Enter value here...        │
+└────────────────────────────┘
+```
+
+**Number Input:**
+```
+Quantity *  ⓘ
+┌────────────────────────────┐
+│ 42                      ▲▼ │
+└────────────────────────────┘
+```
+
+**Checkbox:**
+```
+☑  Merge with existing scene
+```
+
+**Array Input:**
+```
+Files *  ⓘ
+┌────────────────────────────┐
+│ file1.duf, file2.duf       │
+└────────────────────────────┘
+Enter multiple values separated by commas
+```
+
+### Button States
+
+**Primary Button (Normal):**
+```
+┌──────────────────────┐
+│ ▶ Execute Command    │  ← Indigo background
+└──────────────────────┘
+```
+
+**Primary Button (Hover):**
+```
+┏━━━━━━━━━━━━━━━━━━━━━━┓
+┃ ▶ Execute Command    ┃  ← Darker indigo + shadow + lift
+┗━━━━━━━━━━━━━━━━━━━━━━┛
+```
+
+**Secondary Button:**
+```
+┌──────────────────────┐
+│ Reset                │  ← Gray background
+└──────────────────────┘
+```
+
+### Output Panel
+
+**Collapsed:**
+```
+┌────────────────────────────────────┐
+│ Output              🗑️  ▶          │
+└────────────────────────────────────┘
+```
+
+**Expanded:**
+```
+┌────────────────────────────────────┐
+│ Output              🗑️  ▼          │
+├────────────────────────────────────┤
+│ [14:23:45] Executing command...    │  ← Info (blue)
+│ [14:23:46] ✓ Success message       │  ← Success (green)
+│ [14:23:47] ✕ Error message         │  ← Error (red)
+│                                    │
+└────────────────────────────────────┘
+```
+
+### Toast Notifications
+
+**Success:**
+```
+┏━━━━━━━━━━━━━━━━━━━━━━━━━┓
+┃ │ ✓  Command executed    ┃  ← Green left border
+┃ │    successfully         ┃
+┗━━━━━━━━━━━━━━━━━━━━━━━━━┛
+```
+
+**Error:**
+```
+┏━━━━━━━━━━━━━━━━━━━━━━━━━┓
+┃ │ ✕  Command failed      ┃  ← Red left border
+┃ │    Try again           ┃
+┗━━━━━━━━━━━━━━━━━━━━━━━━━┛
+```
+
+**Info:**
+```
+┏━━━━━━━━━━━━━━━━━━━━━━━━━┓
+┃ │ ⓘ  Loading commands... ┃  ← Blue left border
+┗━━━━━━━━━━━━━━━━━━━━━━━━━┛
+```
+
+### Loading Overlay
+```
+╔════════════════════════════════════╗
+║                                    ║
+║           ◐  (Spinning)            ║  ← Animated spinner
+║                                    ║
+║      Executing command...          ║
+║                                    ║
+╚════════════════════════════════════╝
+      (Semi-transparent backdrop)
+```
+
+## Icon Mapping
+
+```
+Command Type         Icon    Example Commands
+─────────────────────────────────────────────
+Help/Info            ❓      help
+Load/Open            📂      load-scene, load-merge
+Save                 💾      save-scene, saveas
+Render               🎬      scene-render, batch-render
+Batch Operations     📦      batch-render
+Create/New           ✨      create-light
+Camera               📷      create-cam, copy-camera
+Scene                🎭      scene-render
+Rotate               🔄      rotate-render
+Transform            🔀      transform-copy
+Copy                 📋      copy-camera
+Paste                📌      paste-transform
+Group                🗂️      create-group
+Node                 🔗      create-node
+Apply                ✅      apply-pose
+Pose/Character       🧍      apply-pose
+Product/List         🛍️      listproducts
+Export               📤      export-scene
+Import               📥      import-assets
+Action/Execute       ⚡      action
+Default              📦      (fallback for unmatched)
+```
+
+## Responsive Breakpoints
+
+### Desktop (> 768px)
+```
+┌─────────┬────────────────────────┐
+│ Sidebar │    Main Content        │
+│ (320px) │    (flexible)          │
+│         │                        │
+└─────────┴────────────────────────┘
+```
+
+### Tablet/Mobile (< 768px)
+```
+┌────────────────────────────────┐
+│         Sidebar                │
+│        (40vh max)              │
+├────────────────────────────────┤
+│      Main Content              │
+│      (scrollable)              │
+│                                │
+└────────────────────────────────┘
+```
+
+## Animation Examples
+
+### Card Hover
+- **Transform**: `translateX(4px)` (slide right)
+- **Duration**: `150ms`
+- **Easing**: `cubic-bezier(0.4, 0, 0.2, 1)`
+- **Background**: Color transition to primary
+- **Shadow**: Increase shadow depth
+
+### Button Hover
+- **Transform**: `translateY(-2px)` (lift up)
+- **Duration**: `150ms`
+- **Shadow**: Add shadow underneath
+- **Background**: Darken color
+
+### Toast Slide-In
+- **Initial**: `translateX(400px)` + `opacity: 0`
+- **Final**: `translateX(0)` + `opacity: 1`
+- **Duration**: `300ms`
+- **Easing**: `ease-out`
+
+### Loading Spinner
+- **Animation**: `rotate(360deg)`
+- **Duration**: `1s`
+- **Timing**: `linear`
+- **Iteration**: `infinite`
+
+## Typography Scale
+
+```
+Logo/Hero:       32px / 2rem    (Bold, Gradient)
+Page Title:      30px / 1.875rem (Bold)
+Section Header:  24px / 1.5rem   (Semi-bold)
+Card Title:      18px / 1.125rem (Semi-bold)
+Body Text:       16px / 1rem     (Normal)
+Small Text:      14px / 0.875rem (Normal)
+Tiny Text:       12px / 0.75rem  (Normal)
+Code/Output:     14px / 0.875rem (Monospace)
+```
+
+## Shadow Depth System
+
+```
+Level 1 (sm):  0 1px 2px rgba(0,0,0,0.05)     [Subtle elements]
+Level 2 (md):  0 4px 6px rgba(0,0,0,0.1)      [Cards, inputs]
+Level 3 (lg):  0 10px 15px rgba(0,0,0,0.1)    [Modals, panels]
+Level 4 (xl):  0 20px 25px rgba(0,0,0,0.1)    [Overlays, toasts]
+```
+
+## Border Radius System
+
+```
+Small:   6px / 0.375rem  [Tags, badges]
+Medium:  8px / 0.5rem    [Inputs, buttons]
+Large:   12px / 0.75rem  [Cards]
+XLarge:  16px / 1rem     [Panels, modals]
+```
+
+## Spacing System
+
+```
+XS:  4px  / 0.25rem  [Tight spacing]
+SM:  8px  / 0.5rem   [Related items]
+MD:  16px / 1rem     [Standard spacing]
+LG:  24px / 1.5rem   [Section gaps]
+XL:  32px / 2rem     [Major sections]
+```
+
+---
+
+**Note**: This is a text-based representation. The actual interface has smooth animations, glassmorphism effects, and vibrant colors that create a professional, modern appearance.
diff --git a/UICLASS_GUIDE.md b/UICLASS_GUIDE.md
new file mode 100644
index 0000000..de488c9
--- /dev/null
+++ b/UICLASS_GUIDE.md
@@ -0,0 +1,220 @@
+# UIClass Field Guide - Special UI Widgets for Pro Mode
+
+The `uiclass` field in `config.yaml` allows you to specify special UI widgets for parameters in Vangard Pro mode.
+
+## Overview
+
+When you add a `uiclass` field to a command argument in `config.yaml`, the Pro interface will render a specialized UI widget instead of a plain text input.
+
+## Supported UIClass Values
+
+### `pick-folder`
+Renders a text input with a "Browse Folder" button for selecting directories.
+
+**Use case:** When the parameter expects a folder/directory path.
+
+**Example:**
+```yaml
+arguments:
+  - names: ["output_dir"]
+    dest: "output_dir"
+    type: "str"
+    required: true
+    help: "Output directory for rendered images"
+    uiclass: "pick-folder"
+```
+
+**Renders as:**
+```
+Output Dir *  ⓘ
+┌────────────────────────────────┬──────────────────┐
+│ /path/to/output/directory      │ 📁 Browse Folder │
+└────────────────────────────────┴──────────────────┘
+```
+
+---
+
+### `pick-file`
+Renders a text input with a "Browse File" button for selecting files.
+
+**Use case:** When the parameter expects a file path.
+
+**Example:**
+```yaml
+arguments:
+  - names: ["scene_file"]
+    dest: "scene_file"
+    type: "str"
+    required: true
+    help: "Path to the DAZ Studio scene file (.duf)"
+    uiclass: "pick-file"
+```
+
+**Renders as:**
+```
+Scene File *  ⓘ
+┌────────────────────────────────┬────────────────┐
+│ /path/to/scene.duf             │ 📄 Browse File │
+└────────────────────────────────┴────────────────┘
+```
+
+---
+
+## How It Works
+
+### In config.yaml
+
+Add the `uiclass` field to any argument:
+
+```yaml
+commands:
+  - name: "my-command"
+    class: "vangard.commands.MyCommand.MyCommand"
+    help: "Example command with special UI widgets"
+    arguments:
+      # Regular text input
+      - names: ["name"]
+        dest: "name"
+        type: "str"
+        required: true
+        help: "Name of the item"
+
+      # File picker widget
+      - names: ["input_file"]
+        dest: "input_file"
+        type: "str"
+        required: true
+        help: "Input file path"
+        uiclass: "pick-file"
+
+      # Folder picker widget
+      - names: ["-o", "--output"]
+        dest: "output"
+        type: "str"
+        default: null
+        help: "Output directory"
+        uiclass: "pick-folder"
+```
+
+### In the Pro Interface
+
+When a user selects this command:
+
+1. **Regular parameters** render as standard text inputs
+2. **Parameters with `uiclass: "pick-file"`** render with a file browser button
+3. **Parameters with `uiclass: "pick-folder"`** render with a folder browser button
+
+The user can either:
+- Type the path directly in the text field
+- Click the browse button to select via GUI (coming soon)
+
+### Technical Details
+
+The `uiclass` value is passed to the frontend via OpenAPI schema using the `x-uiclass` extension field. The JavaScript form generator recognizes these values and creates the appropriate UI widgets.
+
+## Current Implementation Status
+
+### ✅ Implemented
+- Backend support for reading `uiclass` from config.yaml
+- OpenAPI schema includes `x-uiclass` extension
+- Frontend recognizes and renders file/folder picker widgets
+- Styled buttons and layout for pickers
+
+### 🚧 Coming Soon
+- Native file/folder browser dialogs (using HTML5 File API)
+- Drag-and-drop support for file inputs
+- Path validation and autocomplete
+- Recently used paths history
+
+### 💡 Future UIClass Types (Planned)
+
+#### `pick-color`
+Color picker widget for color parameters
+```yaml
+uiclass: "pick-color"
+```
+
+#### `slider`
+Slider widget for numeric ranges
+```yaml
+uiclass: "slider"
+# Optional: Add min, max, step
+```
+
+#### `dropdown`
+Dropdown menu for enum/choice parameters
+```yaml
+uiclass: "dropdown"
+# Optional: Add choices list
+```
+
+#### `multiline`
+Textarea for long text input
+```yaml
+uiclass: "multiline"
+```
+
+#### `date-picker`
+Date selection widget
+```yaml
+uiclass: "date-picker"
+```
+
+## Example: Complete Command with UIClass
+
+Here's a complete example of a command using multiple uiclass values:
+
+```yaml
+commands:
+  - name: "batch-process"
+    class: "vangard.commands.BatchProcess.BatchProcess"
+    help: "Batch process multiple scene files"
+    arguments:
+      # Folder picker for input directory
+      - names: ["input_dir"]
+        dest: "input_dir"
+        type: "str"
+        required: true
+        help: "Directory containing scene files to process"
+        uiclass: "pick-folder"
+
+      # Folder picker for output directory
+      - names: ["-o", "--output"]
+        dest: "output"
+        type: "str"
+        required: true
+        help: "Output directory for processed files"
+        uiclass: "pick-folder"
+
+      # Regular text input for pattern
+      - names: ["-p", "--pattern"]
+        dest: "pattern"
+        type: "str"
+        default: "*.duf"
+        help: "File pattern to match (e.g., *.duf)"
+
+      # Boolean checkbox
+      - names: ["--recursive"]
+        dest: "recursive"
+        action: "store_true"
+        help: "Process subdirectories recursively"
+```
+
+## Benefits
+
+1. **Better UX**: Users can browse for files/folders instead of typing paths
+2. **Less Errors**: Reduces typos and invalid paths
+3. **Discoverability**: Makes it obvious which parameters expect paths
+4. **Platform Native**: Can use native file dialogs (when implemented)
+5. **Backwards Compatible**: CLI/server modes ignore uiclass, only Pro mode uses it
+
+## Notes
+
+- The `uiclass` field is **optional** and only affects the Pro web interface
+- Other modes (CLI, Interactive, Server) ignore this field
+- If `uiclass` is not specified, the parameter uses the default UI for its type
+- The text input is always available, so users can type paths if they prefer
+
+---
+
+**Ready to use!** Just add `uiclass` fields to your command arguments in `config.yaml` and they'll automatically render as special widgets in Pro mode.
diff --git a/config.yaml b/config.yaml
index e453326..30e0454 100644
--- a/config.yaml
+++ b/config.yaml
@@ -387,4 +387,79 @@ commands:
         dest: "iray_config_file"
         type: "str"
         default: null
-        help: "For target iray-server the configuration options file to use for iRay server/master configuration. Values in this file can be overridden by additional command line arguments"
\ No newline at end of file
+        help: "For target iray-server the configuration options file to use for iRay server/master configuration. Values in this file can be overridden by additional command line arguments"
+
+  - name: "save-viewport"
+    class: "vangard.commands.SaveViewportSU.SaveViewportSU"
+    help: "Capture and save the active viewport to image files for a range of frames"
+    arguments:
+      - names: ["-f", "--save-file"]
+        dest: "save_file"
+        type: "str"
+        required: true
+        help: "Output file path root (without extension). Frame number and extension will be appended."
+      - names: ["-c", "--view-camera"]
+        dest: "view_camera"
+        type: "str"
+        default: null
+        help: "Name of the camera to set in the viewport before capturing. If not specified, uses the current viewport camera."
+      - names: ["-e", "--image-format"]
+        dest: "image_format"
+        type: "str"
+        default: "png"
+        help: "Image file format/extension (e.g. png, jpg). Default is png."
+      - names: ["-s", "--frame-start"]
+        dest: "frame_start"
+        type: "int"
+        default: null
+        help: "First frame to capture. Defaults to the current scene frame."
+      - names: ["-n", "--frame-end"]
+        dest: "frame_end"
+        type: "int"
+        default: null
+        help: "End frame (exclusive) for capture range. Defaults to frame_start + 1 (single frame)."
+
+  - name: "face-render-lora"
+    class: "vangard.commands.FaceRenderLoraSU.FaceRenderLoraSU"
+    help: "Render a series of orbital camera angles around a figure's face for LoRA training image generation"
+    arguments:
+      - names: ["-o", "--output-dir"]
+        dest: "output_dir"
+        type: "str"
+        default: "y:/ai/charflow/output/face_lora/"
+        help: "Directory to write rendered images to."
+      - names: ["-p", "--file-prefix"]
+        dest: "file_prefix"
+        type: "str"
+        default: "face"
+        help: "Filename prefix for output images. Angle label and extension are appended."
+      - names: ["-W", "--wid"]
+        dest: "wid"
+        type: "int"
+        default: 768
+        help: "Render width in pixels."
+      - names: ["-H", "--height"]
+        dest: "height"
+        type: "int"
+        default: 768
+        help: "Render height in pixels."
+      - names: ["-d", "--camera-distance"]
+        dest: "camera_distance"
+        type: "int"
+        default: 80
+        help: "Camera distance from the face center in DAZ scene units (cm)."
+      - names: ["-y", "--face-y-offset"]
+        dest: "face_y_offset"
+        type: "int"
+        default: 5
+        help: "Vertical offset from the head bone origin toward eye/nose level."
+      - names: ["-n", "--node-label"]
+        dest: "node_label"
+        type: "str"
+        default: null
+        help: "Label of the figure node to target. If not specified, the first skeleton in the scene is used."
+      - names: ["-t", "--test-mode"]
+        dest: "test_mode"
+        action: "store_true"
+        default: false
+        help: "If set, show a message box at each angle instead of rendering."
\ No newline at end of file
diff --git a/config_reference.md b/config_reference.md
new file mode 100644
index 0000000..2b17c07
--- /dev/null
+++ b/config_reference.md
@@ -0,0 +1,26 @@
+# Command Line Utility Reference
+
+| Command Name | Description | Arguments |
+|---|---|---|
+| `action` | Execute the specified action with optional settings as a series of key=value pairs separated by commas | <details><summary>View 2 Arguments</summary><div style="padding-left: 16px; margin-top: 8px;"><table><thead><tr><th>Arg Name</th><th>Description</th><th>Type</th><th>Optional</th></tr></thead><tbody><tr><td><code>action_class</code></td><td>Class name of the action to execute</td><td>str</td><td>No</td></tr><tr><td><code>-s, --settings</code></td><td>Settings for the action as a series of key=value pairs separated by commas</td><td>str</td><td>Yes</td></tr></tbody></table></div></details> |
+| `apply-pose` | Apply the given named posed as pose file to the currently selected node or specified node | <details><summary>View 2 Arguments</summary><div style="padding-left: 16px; margin-top: 8px;"><table><thead><tr><th>Arg Name</th><th>Description</th><th>Type</th><th>Optional</th></tr></thead><tbody><tr><td><code>pose_file</code></td><td>Absolute path to the pose file to be applied</td><td>str</td><td>No</td></tr><tr><td><code>-t, --target-node</code></td><td>Label of the node to apply the pose to. If not specified, apply to the currently selected node.</td><td>str</td><td>Yes</td></tr></tbody></table></div></details> |
+| `batch-render` | Given a pattern of scene files, load each one and render it to the target location (default is studio-iray) with the given output file pattern | <details><summary>View 13 Arguments</summary><div style="padding-left: 16px; margin-top: 8px;"><table><thead><tr><th>Arg Name</th><th>Description</th><th>Type</th><th>Optional</th></tr></thead><tbody><tr><td><code>-s, --scene-files</code></td><td>Pattern of scene files to load, including glob support. See README for examples</td><td>str</td><td>Yes</td></tr><tr><td><code>-o, --output-path</code></td><td>Path to directory where output files are to be written. If not specified, use the location of the scene file.</td><td>str</td><td>Yes</td></tr><tr><td><code>-t, --target</code></td><td>Target of the render. Allowed values are local-to-file, local-to-window, or iray-server-bridge</td><td>str</td><td>Yes</td></tr><tr><td><code>-r, --resolution</code></td><td>Resolution to render, overriding the resolution of the scene file, in WxH format (e.g. 1920x1080)</td><td>str</td><td>Yes</td></tr><tr><td><code>-c, --cameras</code></td><td>Cameras to render for. Can be one of &#x27;all_visible&#x27;, &#x27;viewport&#x27;, or a pattern that maps to one or more visible cameras</td><td>str</td><td>Yes</td></tr><tr><td><code>-j, --job-name-pattern</code></td><td>Pattern to use for naming job names or render output files. In the pattern, %s refers to the scene name, %c the camera name, %f the frame number, and %r the render count</td><td>str</td><td>Yes</td></tr><tr><td><code>-f, --frames</code></td><td>Frames to render. Comma-separated list of frames that can include ranges and range patterns. See README for full detail and example.</td><td>str</td><td>Yes</td></tr><tr><td><code>--iray-server</code></td><td>For target iray-server the IP address or hostname of the iRay server/master to use.</td><td>str</td><td>Yes</td></tr><tr><td><code>--iray-protocol</code></td><td>Sets the http protocol to use. Allowed values are http or https.</td><td>str</td><td>Yes</td></tr><tr><td><code>--iray-port</code></td><td>For target iray-server the TCP port of the iRay server/master.</td><td>str</td><td>Yes</td></tr><tr><td><code>--iray-user</code></td><td>For target iray-server the username to connect to the iRay server/master. Must be specified here or in config file specified by --iray-config-file</td><td>str</td><td>Yes</td></tr><tr><td><code>--iray-password</code></td><td>For target iray-server the password to connect to the iRay server/master. Must be specified here or in config file specified by --iray-config-file</td><td>str</td><td>Yes</td></tr><tr><td><code>--iray-config-file</code></td><td>For target iray-server the configuration options file to use for iRay server/master configuration. Values in this file can be overridden by additional command line arguments</td><td>str</td><td>Yes</td></tr></tbody></table></div></details> |
+| `copy-camera` | Copy the specified camera (by label) to the specified target camera, or the current viewport camera if target not specified | <details><summary>View 2 Arguments</summary><div style="padding-left: 16px; margin-top: 8px;"><table><thead><tr><th>Arg Name</th><th>Description</th><th>Type</th><th>Optional</th></tr></thead><tbody><tr><td><code>-s, --source-camera</code></td><td>Camera to copy from</td><td>str</td><td>Yes</td></tr><tr><td><code>-t, --target-camera</code></td><td>Camera to copy to (optional)</td><td>str</td><td>Yes</td></tr></tbody></table></div></details> |
+| `create-cam` | Create a perspective camera with given name and camera type as parameters to generate the name of the camera along with the selected node label. | <details><summary>View 3 Arguments</summary><div style="padding-left: 16px; margin-top: 8px;"><table><thead><tr><th>Arg Name</th><th>Description</th><th>Type</th><th>Optional</th></tr></thead><tbody><tr><td><code>cam_name</code></td><td>Name of the camera</td><td>str</td><td>No</td></tr><tr><td><code>cam_class</code></td><td>Class (type) of camera</td><td>str</td><td>No</td></tr><tr><td><code>-f, --focus</code></td><td>If true, turn DOF on the new camera</td><td>flag (boolean)</td><td>Yes</td></tr></tbody></table></div></details> |
+| `create-group` | Group the selected nodes in the scene to the name specified. | <details><summary>View 1 Argument</summary><div style="padding-left: 16px; margin-top: 8px;"><table><thead><tr><th>Arg Name</th><th>Description</th><th>Type</th><th>Optional</th></tr></thead><tbody><tr><td><code>group_name</code></td><td>Name of the new group.</td><td>str</td><td>No</td></tr></tbody></table></div></details> |
+| `drop-object` | Drop one object on top of another, respecting bounding box boundaries. | <details><summary>View 2 Arguments</summary><div style="padding-left: 16px; margin-top: 8px;"><table><thead><tr><th>Arg Name</th><th>Description</th><th>Type</th><th>Optional</th></tr></thead><tbody><tr><td><code>source_node</code></td><td>Label of the object to be dropped</td><td>str</td><td>No</td></tr><tr><td><code>target_node</code></td><td>Label of the object to be dropped onto</td><td>str</td><td>No</td></tr></tbody></table></div></details> |
+| `face-render-lora` | Render a series of orbital camera angles around a figure's face for LoRA training image generation | <details><summary>View 8 Arguments</summary><div style="padding-left: 16px; margin-top: 8px;"><table><thead><tr><th>Arg Name</th><th>Description</th><th>Type</th><th>Optional</th></tr></thead><tbody><tr><td><code>-o, --output-dir</code></td><td>Directory to write rendered images to.</td><td>str</td><td>Yes</td></tr><tr><td><code>-p, --file-prefix</code></td><td>Filename prefix for output images. Angle label and extension are appended.</td><td>str</td><td>Yes</td></tr><tr><td><code>-W, --wid</code></td><td>Render width in pixels.</td><td>int</td><td>Yes</td></tr><tr><td><code>-H, --height</code></td><td>Render height in pixels.</td><td>int</td><td>Yes</td></tr><tr><td><code>-d, --camera-distance</code></td><td>Camera distance from the face center in DAZ scene units (cm).</td><td>int</td><td>Yes</td></tr><tr><td><code>-y, --face-y-offset</code></td><td>Vertical offset from the head bone origin toward eye/nose level.</td><td>int</td><td>Yes</td></tr><tr><td><code>-n, --node-label</code></td><td>Label of the figure node to target. If not specified, the first skeleton in the scene is used.</td><td>str</td><td>Yes</td></tr><tr><td><code>-t, --test-mode</code></td><td>If set, show a message box at each angle instead of rendering.</td><td>flag (boolean)</td><td>Yes</td></tr></tbody></table></div></details> |
+| `help` | Displays help information for commands. | <details><summary>View 1 Argument</summary><div style="padding-left: 16px; margin-top: 8px;"><table><thead><tr><th>Arg Name</th><th>Description</th><th>Type</th><th>Optional</th></tr></thead><tbody><tr><td><code>command_name</code></td><td>The specific command to get help for.</td><td>str</td><td>Yes</td></tr></tbody></table></div></details> |
+| `inc-scene` | Save the current scene file incrementing the file name with a numerical, incrementing, suffix. | <details><summary>View 2 Arguments</summary><div style="padding-left: 16px; margin-top: 8px;"><table><thead><tr><th>Arg Name</th><th>Description</th><th>Type</th><th>Optional</th></tr></thead><tbody><tr><td><code>-n, --number</code></td><td>If specified, replace the numeric suffix at the end of the scene file name with the given number (or add it if one doesn&#x27;t exist).</td><td>int</td><td>Yes</td></tr><tr><td><code>-i, --increment</code></td><td>If specified, increment the scene file suffix by the given amount (default = 1).</td><td>int</td><td>Yes</td></tr></tbody></table></div></details> |
+| `listproducts` | Dump some basic product metadata for all products in the content management system to the specified output file. | <details><summary>View 1 Argument</summary><div style="padding-left: 16px; margin-top: 8px;"><table><thead><tr><th>Arg Name</th><th>Description</th><th>Type</th><th>Optional</th></tr></thead><tbody><tr><td><code>output_file</code></td><td>Path to save output to</td><td>str</td><td>No</td></tr></tbody></table></div></details> |
+| `load-scene` | Load the specified scene file, replacing the current scene if --merge is not used. | <details><summary>View 2 Arguments</summary><div style="padding-left: 16px; margin-top: 8px;"><table><thead><tr><th>Arg Name</th><th>Description</th><th>Type</th><th>Optional</th></tr></thead><tbody><tr><td><code>scene_file</code></td><td>Path to scene file to load</td><td>str</td><td>No</td></tr><tr><td><code>-m, --merge</code></td><td>If specified, merge the new scene into the current scene instead of replacing.</td><td>flag (boolean)</td><td>Yes</td></tr></tbody></table></div></details> |
+| `lora-trainer-prep` | Render a matrixed series of images suitable for LORA training. | <details><summary>View 2 Arguments</summary><div style="padding-left: 16px; margin-top: 8px;"><table><thead><tr><th>Arg Name</th><th>Description</th><th>Type</th><th>Optional</th></tr></thead><tbody><tr><td><code>scene_files</code></td><td>A glob pattern that identifies the scene files to load. Each scene file should include a single model which has the hair and clothing applied</td><td>str</td><td>No</td></tr><tr><td><code>lora_trainer_config</code></td><td>Path to config file defining the render matrix of shots x poses x expressions</td><td>str</td><td>No</td></tr></tbody></table></div></details> |
+| `product-list` | List the product information for objects in the current scene | <details><summary>View 3 Arguments</summary><div style="padding-left: 16px; margin-top: 8px;"><table><thead><tr><th>Arg Name</th><th>Description</th><th>Type</th><th>Optional</th></tr></thead><tbody><tr><td><code>-t, --target-file</code></td><td>File to write output information to</td><td>str</td><td>Yes</td></tr><tr><td><code>-n, --node-context</code></td><td>If specified, present the output in the context of nodes. Otherwise the default is to present output in the context of products.</td><td>flag (boolean)</td><td>Yes</td></tr><tr><td><code>-s, --selected-only</code></td><td>Only identify products for the currently selected node.</td><td>flag (boolean)</td><td>Yes</td></tr></tbody></table></div></details> |
+| `rotate-random` | Rotate and render the selected character. | <details><summary>View 2 Arguments</summary><div style="padding-left: 16px; margin-top: 8px;"><table><thead><tr><th>Arg Name</th><th>Description</th><th>Type</th><th>Optional</th></tr></thead><tbody><tr><td><code>object_name</code></td><td>Label of the object to rotate prior to rendering</td><td>str</td><td>No</td></tr><tr><td><code>lower</code></td><td>Starting rotation (in degrees)</td><td>int</td><td>Yes</td></tr></tbody></table></div></details> |
+| `rotate-render` | Rotate and render the selected character. | <details><summary>View 6 Arguments</summary><div style="padding-left: 16px; margin-top: 8px;"><table><thead><tr><th>Arg Name</th><th>Description</th><th>Type</th><th>Optional</th></tr></thead><tbody><tr><td><code>object_name</code></td><td>Label of the object to rotate prior to rendering</td><td>str</td><td>No</td></tr><tr><td><code>lower</code></td><td>Starting rotation (in degrees)</td><td>int</td><td>Yes</td></tr><tr><td><code>upper</code></td><td>Ending rotation (in degrees). rotation-start must be smaller than rotation-end</td><td>int</td><td>Yes</td></tr><tr><td><code>slices</code></td><td>How many rotations between start and end to rotate. If set to zero, only render, do not rotate.</td><td>int</td><td>Yes</td></tr><tr><td><code>-o, --output-file</code></td><td>Absolute path to directory to render images in. Default is to generate one from the scene file name.</td><td>str</td><td>Yes</td></tr><tr><td><code>-s, --skip-render</code></td><td>Flag whether to render or the rotated character or not. Setting this flag skips the rendering step.</td><td>flag (boolean)</td><td>Yes</td></tr></tbody></table></div></details> |
+| `save-content-item` | Save the selected items in the content library to the specified target location | <details><summary>View 1 Argument</summary><div style="padding-left: 16px; margin-top: 8px;"><table><thead><tr><th>Arg Name</th><th>Description</th><th>Type</th><th>Optional</th></tr></thead><tbody><tr><td><code>target_dir</code></td><td>Location to save content item to</td><td>str</td><td>No</td></tr></tbody></table></div></details> |
+| `save-subset` | Save the selected items to a scene subset file | <details><summary>View 3 Arguments</summary><div style="padding-left: 16px; margin-top: 8px;"><table><thead><tr><th>Arg Name</th><th>Description</th><th>Type</th><th>Optional</th></tr></thead><tbody><tr><td><code>subset_file</code></td><td>Location to save content item to</td><td>str</td><td>No</td></tr><tr><td><code>-d, --directory</code></td><td>Directory to store the subset file in</td><td>str</td><td>Yes</td></tr><tr><td><code>-c, --category</code></td><td>Category to associate subset with</td><td>str</td><td>Yes</td></tr></tbody></table></div></details> |
+| `save-viewport` | Capture and save the active viewport to image files for a range of frames | <details><summary>View 5 Arguments</summary><div style="padding-left: 16px; margin-top: 8px;"><table><thead><tr><th>Arg Name</th><th>Description</th><th>Type</th><th>Optional</th></tr></thead><tbody><tr><td><code>-f, --save-file</code></td><td>Output file path root (without extension). Frame number and extension will be appended.</td><td>str</td><td>No</td></tr><tr><td><code>-c, --view-camera</code></td><td>Name of the camera to set in the viewport before capturing. If not specified, uses the current viewport camera.</td><td>str</td><td>Yes</td></tr><tr><td><code>-e, --image-format</code></td><td>Image file format/extension (e.g. png, jpg). Default is png.</td><td>str</td><td>Yes</td></tr><tr><td><code>-s, --frame-start</code></td><td>First frame to capture. Defaults to the current scene frame.</td><td>int</td><td>Yes</td></tr><tr><td><code>-n, --frame-end</code></td><td>End frame (exclusive) for capture range. Defaults to frame_start + 1 (single frame).</td><td>int</td><td>Yes</td></tr></tbody></table></div></details> |
+| `saveas` | Make a copy of the current scene file to the specified location, simulating a Save As... function | <details><summary>View 1 Argument</summary><div style="padding-left: 16px; margin-top: 8px;"><table><thead><tr><th>Arg Name</th><th>Description</th><th>Type</th><th>Optional</th></tr></thead><tbody><tr><td><code>save_file</code></td><td>Path to save a copy of the current scene file to</td><td>str</td><td>No</td></tr></tbody></table></div></details> |
+| `scene-render` | Direct render the current scene, or a new scene file if specified, to the given output file. | <details><summary>View 2 Arguments</summary><div style="padding-left: 16px; margin-top: 8px;"><table><thead><tr><th>Arg Name</th><th>Description</th><th>Type</th><th>Optional</th></tr></thead><tbody><tr><td><code>-s, --scene-file</code></td><td>Name of the scene file to load.</td><td>str</td><td>Yes</td></tr><tr><td><code>-o, --output-file</code></td><td>Path to output file to save to</td><td>str</td><td>Yes</td></tr></tbody></table></div></details> |
+| `transform-copy` | Perform translate, rotate, and/or scale operations on target node to match the transforms on the target node. | <details><summary>View 6 Arguments</summary><div style="padding-left: 16px; margin-top: 8px;"><table><thead><tr><th>Arg Name</th><th>Description</th><th>Type</th><th>Optional</th></tr></thead><tbody><tr><td><code>source_node</code></td><td>Node to translate from</td><td>str</td><td>No</td></tr><tr><td><code>target_node</code></td><td>Node to translate to</td><td>str</td><td>No</td></tr><tr><td><code>-r, --rotate</code></td><td>Apply the rotation transform</td><td>flag (boolean)</td><td>Yes</td></tr><tr><td><code>-t, --translate</code></td><td>Apply the translation transform</td><td>flag (boolean)</td><td>Yes</td></tr><tr><td><code>-s, --scale</code></td><td>Apply the scaling transform</td><td>flag (boolean)</td><td>Yes</td></tr><tr><td><code>-a, --all</code></td><td>Apply rotation, translation, and scaling trasforms</td><td>flag (boolean)</td><td>Yes</td></tr></tbody></table></div></details> |
diff --git a/pyproject.toml b/pyproject.toml
index 31214ad..22e1ceb 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -46,6 +46,7 @@ vangard-cli = "vangard.cli:main"
 vangard-interactive = "vangard.interactive:main"
 vangard-server = "vangard.server:main"
 vangard-gui = "vangard.gui:main"
+vangard-pro = "vangard.pro:main"
 
 [project.urls]
 Homepage = "https://github.com/yourusername/vangard-script-utils"
diff --git a/setup.py b/setup.py
index 4e220df..8c468e8 100644
--- a/setup.py
+++ b/setup.py
@@ -31,7 +31,13 @@ def get_long_description():
     url="https://github.com/yourusername/vangard-script-utils",  # Update with actual URL
     packages=find_packages(exclude=["tests", "tests.*"]),
     package_data={
-        'vangard': ['scripts/*.dsa'],
+        'vangard': [
+            'scripts/*.dsa',
+            'static/*.html',
+            'static/css/*.css',
+            'static/js/*.js',
+            'static/assets/**/*',
+        ],
     },
     include_package_data=True,
     install_requires=[
@@ -55,6 +61,7 @@ def get_long_description():
             'vangard-interactive=vangard.interactive:main',
             'vangard-server=vangard.server:main',
             'vangard-gui=vangard.gui:main',
+            'vangard-pro=vangard.pro:main',
         ],
     },
     python_requires='>=3.8',
diff --git a/tests/commands/test_face_render_lora_su.py b/tests/commands/test_face_render_lora_su.py
new file mode 100644
index 0000000..46720d7
--- /dev/null
+++ b/tests/commands/test_face_render_lora_su.py
@@ -0,0 +1,192 @@
+"""
+Tests for FaceRenderLoraSU command (face-render-lora)
+
+Tests orbital face render generation for LoRA training datasets.
+"""
+import pytest
+from argparse import Namespace
+from unittest import mock
+from vangard.commands.FaceRenderLoraSU import FaceRenderLoraSU
+
+
+class TestFaceRenderLoraSU:
+    """Test suite for FaceRenderLoraSU command"""
+
+    @mock.patch('vangard.commands.BaseCommand.BaseCommand.exec_remote_script')
+    def test_face_render_defaults(self, mock_exec):
+        """Test face render with all default values"""
+        args = Namespace(
+            output_dir='y:/ai/charflow/output/face_lora/',
+            file_prefix='face',
+            wid=768,
+            height=768,
+            camera_distance=80,
+            face_y_offset=5,
+            node_label=None,
+            test_mode=False,
+        )
+
+        cmd = FaceRenderLoraSU(parser=mock.Mock(), config={})
+        cmd.process(args)
+
+        mock_exec.assert_called_once()
+        call_kwargs = mock_exec.call_args.kwargs
+
+        assert call_kwargs['script_name'] == "FaceRenderLoraSU.dsa"
+        assert call_kwargs['script_vars']['output_dir'] == 'y:/ai/charflow/output/face_lora/'
+        assert call_kwargs['script_vars']['file_prefix'] == 'face'
+        assert call_kwargs['script_vars']['wid'] == 768
+        assert call_kwargs['script_vars']['height'] == 768
+        assert call_kwargs['script_vars']['camera_distance'] == 80
+        assert call_kwargs['script_vars']['face_y_offset'] == 5
+        assert call_kwargs['script_vars']['node_label'] is None
+        assert call_kwargs['script_vars']['test_mode'] is False
+
+    @mock.patch('vangard.commands.BaseCommand.BaseCommand.exec_remote_script')
+    def test_face_render_custom_output_dir(self, mock_exec):
+        """Test face render with a custom output directory"""
+        args = Namespace(
+            output_dir='C:/lora_output/my_character/',
+            file_prefix='face',
+            wid=768,
+            height=768,
+            camera_distance=80,
+            face_y_offset=5,
+            node_label=None,
+            test_mode=False,
+        )
+
+        cmd = FaceRenderLoraSU(parser=mock.Mock(), config={})
+        cmd.process(args)
+
+        call_kwargs = mock_exec.call_args.kwargs
+        assert call_kwargs['script_vars']['output_dir'] == 'C:/lora_output/my_character/'
+
+    @mock.patch('vangard.commands.BaseCommand.BaseCommand.exec_remote_script')
+    def test_face_render_custom_resolution(self, mock_exec):
+        """Test face render with non-default resolution"""
+        args = Namespace(
+            output_dir='y:/ai/charflow/output/face_lora/',
+            file_prefix='face',
+            wid=512,
+            height=512,
+            camera_distance=80,
+            face_y_offset=5,
+            node_label=None,
+            test_mode=False,
+        )
+
+        cmd = FaceRenderLoraSU(parser=mock.Mock(), config={})
+        cmd.process(args)
+
+        call_kwargs = mock_exec.call_args.kwargs
+        assert call_kwargs['script_vars']['wid'] == 512
+        assert call_kwargs['script_vars']['height'] == 512
+
+    @mock.patch('vangard.commands.BaseCommand.BaseCommand.exec_remote_script')
+    def test_face_render_custom_camera_distance(self, mock_exec):
+        """Test face render with adjusted camera distance"""
+        args = Namespace(
+            output_dir='y:/ai/charflow/output/face_lora/',
+            file_prefix='face',
+            wid=768,
+            height=768,
+            camera_distance=60,
+            face_y_offset=5,
+            node_label=None,
+            test_mode=False,
+        )
+
+        cmd = FaceRenderLoraSU(parser=mock.Mock(), config={})
+        cmd.process(args)
+
+        call_kwargs = mock_exec.call_args.kwargs
+        assert call_kwargs['script_vars']['camera_distance'] == 60
+
+    @mock.patch('vangard.commands.BaseCommand.BaseCommand.exec_remote_script')
+    def test_face_render_with_node_label(self, mock_exec):
+        """Test face render targeting a specific scene node"""
+        args = Namespace(
+            output_dir='y:/ai/charflow/output/face_lora/',
+            file_prefix='face',
+            wid=768,
+            height=768,
+            camera_distance=80,
+            face_y_offset=5,
+            node_label='Genesis 9',
+            test_mode=False,
+        )
+
+        cmd = FaceRenderLoraSU(parser=mock.Mock(), config={})
+        cmd.process(args)
+
+        call_kwargs = mock_exec.call_args.kwargs
+        assert call_kwargs['script_vars']['node_label'] == 'Genesis 9'
+
+    @mock.patch('vangard.commands.BaseCommand.BaseCommand.exec_remote_script')
+    def test_face_render_test_mode(self, mock_exec):
+        """Test face render in test mode (shows message boxes instead of rendering)"""
+        args = Namespace(
+            output_dir='y:/ai/charflow/output/face_lora/',
+            file_prefix='face',
+            wid=768,
+            height=768,
+            camera_distance=80,
+            face_y_offset=5,
+            node_label=None,
+            test_mode=True,
+        )
+
+        cmd = FaceRenderLoraSU(parser=mock.Mock(), config={})
+        cmd.process(args)
+
+        call_kwargs = mock_exec.call_args.kwargs
+        assert call_kwargs['script_vars']['test_mode'] is True
+
+    @mock.patch('vangard.commands.BaseCommand.BaseCommand.exec_remote_script')
+    def test_face_render_custom_file_prefix(self, mock_exec):
+        """Test face render with a custom file prefix"""
+        args = Namespace(
+            output_dir='y:/ai/charflow/output/face_lora/',
+            file_prefix='victoria_face',
+            wid=768,
+            height=768,
+            camera_distance=80,
+            face_y_offset=5,
+            node_label=None,
+            test_mode=False,
+        )
+
+        cmd = FaceRenderLoraSU(parser=mock.Mock(), config={})
+        cmd.process(args)
+
+        call_kwargs = mock_exec.call_args.kwargs
+        assert call_kwargs['script_vars']['file_prefix'] == 'victoria_face'
+
+    @mock.patch('vangard.commands.BaseCommand.BaseCommand.exec_remote_script')
+    def test_face_render_full_specification(self, mock_exec):
+        """Test face render with all arguments explicitly set"""
+        args = Namespace(
+            output_dir='C:/renders/lora/chars/',
+            file_prefix='char01',
+            wid=1024,
+            height=1024,
+            camera_distance=100,
+            face_y_offset=8,
+            node_label='My Character',
+            test_mode=False,
+        )
+
+        cmd = FaceRenderLoraSU(parser=mock.Mock(), config={})
+        cmd.process(args)
+
+        call_kwargs = mock_exec.call_args.kwargs
+        assert call_kwargs['script_name'] == "FaceRenderLoraSU.dsa"
+        assert call_kwargs['script_vars']['output_dir'] == 'C:/renders/lora/chars/'
+        assert call_kwargs['script_vars']['file_prefix'] == 'char01'
+        assert call_kwargs['script_vars']['wid'] == 1024
+        assert call_kwargs['script_vars']['height'] == 1024
+        assert call_kwargs['script_vars']['camera_distance'] == 100
+        assert call_kwargs['script_vars']['face_y_offset'] == 8
+        assert call_kwargs['script_vars']['node_label'] == 'My Character'
+        assert call_kwargs['script_vars']['test_mode'] is False
diff --git a/tests/commands/test_save_viewport_su.py b/tests/commands/test_save_viewport_su.py
new file mode 100644
index 0000000..aab2828
--- /dev/null
+++ b/tests/commands/test_save_viewport_su.py
@@ -0,0 +1,146 @@
+"""
+Tests for SaveViewportSU command (save-viewport)
+
+Tests viewport image capture with optional camera, format, and frame range.
+"""
+import pytest
+from argparse import Namespace
+from unittest import mock
+from vangard.commands.SaveViewportSU import SaveViewportSU
+
+
+class TestSaveViewportSU:
+    """Test suite for SaveViewportSU command"""
+
+    @mock.patch('vangard.commands.BaseCommand.BaseCommand.exec_remote_script')
+    def test_save_viewport_minimal(self, mock_exec):
+        """Test basic viewport save with only the required argument"""
+        args = Namespace(
+            save_file='C:/output/frame',
+            view_camera=None,
+            image_format='png',
+            frame_start=None,
+            frame_end=None,
+        )
+
+        cmd = SaveViewportSU(parser=mock.Mock(), config={})
+        cmd.process(args)
+
+        mock_exec.assert_called_once()
+        call_kwargs = mock_exec.call_args.kwargs
+
+        assert call_kwargs['script_name'] == "SaveViewportSU.dsa"
+        assert call_kwargs['script_vars']['save_file'] == 'C:/output/frame'
+        assert call_kwargs['script_vars']['view_camera'] is None
+        assert call_kwargs['script_vars']['image_format'] == 'png'
+        assert call_kwargs['script_vars']['frame_start'] is None
+        assert call_kwargs['script_vars']['frame_end'] is None
+
+    @mock.patch('vangard.commands.BaseCommand.BaseCommand.exec_remote_script')
+    def test_save_viewport_with_camera(self, mock_exec):
+        """Test viewport save with a named camera"""
+        args = Namespace(
+            save_file='C:/output/frame',
+            view_camera='FrontCamera',
+            image_format='png',
+            frame_start=None,
+            frame_end=None,
+        )
+
+        cmd = SaveViewportSU(parser=mock.Mock(), config={})
+        cmd.process(args)
+
+        call_kwargs = mock_exec.call_args.kwargs
+        assert call_kwargs['script_vars']['view_camera'] == 'FrontCamera'
+
+    @mock.patch('vangard.commands.BaseCommand.BaseCommand.exec_remote_script')
+    def test_save_viewport_jpg_format(self, mock_exec):
+        """Test viewport save with jpg image format"""
+        args = Namespace(
+            save_file='C:/output/frame',
+            view_camera=None,
+            image_format='jpg',
+            frame_start=None,
+            frame_end=None,
+        )
+
+        cmd = SaveViewportSU(parser=mock.Mock(), config={})
+        cmd.process(args)
+
+        call_kwargs = mock_exec.call_args.kwargs
+        assert call_kwargs['script_vars']['image_format'] == 'jpg'
+
+    @mock.patch('vangard.commands.BaseCommand.BaseCommand.exec_remote_script')
+    def test_save_viewport_single_frame(self, mock_exec):
+        """Test viewport save for a single explicit frame"""
+        args = Namespace(
+            save_file='C:/output/frame',
+            view_camera=None,
+            image_format='png',
+            frame_start=10,
+            frame_end=11,
+        )
+
+        cmd = SaveViewportSU(parser=mock.Mock(), config={})
+        cmd.process(args)
+
+        call_kwargs = mock_exec.call_args.kwargs
+        assert call_kwargs['script_vars']['frame_start'] == 10
+        assert call_kwargs['script_vars']['frame_end'] == 11
+
+    @mock.patch('vangard.commands.BaseCommand.BaseCommand.exec_remote_script')
+    def test_save_viewport_frame_range(self, mock_exec):
+        """Test viewport save over a multi-frame range"""
+        args = Namespace(
+            save_file='C:/output/frame',
+            view_camera=None,
+            image_format='png',
+            frame_start=0,
+            frame_end=30,
+        )
+
+        cmd = SaveViewportSU(parser=mock.Mock(), config={})
+        cmd.process(args)
+
+        call_kwargs = mock_exec.call_args.kwargs
+        assert call_kwargs['script_vars']['frame_start'] == 0
+        assert call_kwargs['script_vars']['frame_end'] == 30
+
+    @mock.patch('vangard.commands.BaseCommand.BaseCommand.exec_remote_script')
+    def test_save_viewport_full_specification(self, mock_exec):
+        """Test viewport save with all arguments provided"""
+        args = Namespace(
+            save_file='Y:/renders/viewport/shot',
+            view_camera='OrbitCam',
+            image_format='jpg',
+            frame_start=5,
+            frame_end=15,
+        )
+
+        cmd = SaveViewportSU(parser=mock.Mock(), config={})
+        cmd.process(args)
+
+        call_kwargs = mock_exec.call_args.kwargs
+        assert call_kwargs['script_name'] == "SaveViewportSU.dsa"
+        assert call_kwargs['script_vars']['save_file'] == 'Y:/renders/viewport/shot'
+        assert call_kwargs['script_vars']['view_camera'] == 'OrbitCam'
+        assert call_kwargs['script_vars']['image_format'] == 'jpg'
+        assert call_kwargs['script_vars']['frame_start'] == 5
+        assert call_kwargs['script_vars']['frame_end'] == 15
+
+    @mock.patch('vangard.commands.BaseCommand.BaseCommand.exec_remote_script')
+    def test_save_viewport_path_with_spaces(self, mock_exec):
+        """Test viewport save with spaces in the output path"""
+        args = Namespace(
+            save_file='C:/My Renders/Viewport Capture/frame',
+            view_camera=None,
+            image_format='png',
+            frame_start=None,
+            frame_end=None,
+        )
+
+        cmd = SaveViewportSU(parser=mock.Mock(), config={})
+        cmd.process(args)
+
+        call_kwargs = mock_exec.call_args.kwargs
+        assert call_kwargs['script_vars']['save_file'] == 'C:/My Renders/Viewport Capture/frame'
diff --git a/vangard/commands/FaceRenderLoraSU.py b/vangard/commands/FaceRenderLoraSU.py
new file mode 100644
index 0000000..c1b7b12
--- /dev/null
+++ b/vangard/commands/FaceRenderLoraSU.py
@@ -0,0 +1,5 @@
+from .BaseCommand import BaseCommand
+
+
+class FaceRenderLoraSU(BaseCommand):
+    pass
diff --git a/vangard/commands/SaveViewportSU.py b/vangard/commands/SaveViewportSU.py
new file mode 100644
index 0000000..0c50be1
--- /dev/null
+++ b/vangard/commands/SaveViewportSU.py
@@ -0,0 +1,8 @@
+
+
+
+from .BaseCommand import BaseCommand
+
+
+class SaveViewportSU(BaseCommand):
+    pass
diff --git a/vangard/main.py b/vangard/main.py
index 3ae8817..9666ea8 100644
--- a/vangard/main.py
+++ b/vangard/main.py
@@ -7,6 +7,7 @@
 from vangard import interactive
 from vangard import server
 from vangard import gui
+from vangard import pro
 
 def main():
     parser = argparse.ArgumentParser(
@@ -28,7 +29,10 @@ def main():
     # GUI mode
     subparsers.add_parser("gui", help="Run in a simple GUI window.")
 
-    
+    # Pro mode
+    subparsers.add_parser("pro", help="Run the professional web interface.")
+
+
     args = parser.parse_args()
 
     print (f"Selected mode: {args.mode}")
@@ -39,7 +43,9 @@ def main():
     elif args.mode == "server":
         server.main()
     elif args.mode == "gui":  # <--- ADD THE LOGIC TO LAUNCH THE GUI
-        gui.main()        
+        gui.main()
+    elif args.mode == "pro":
+        pro.main()        
 
 if __name__ == "__main__":
     main()
\ No newline at end of file
diff --git a/vangard/pro.py b/vangard/pro.py
new file mode 100644
index 0000000..ad54258
--- /dev/null
+++ b/vangard/pro.py
@@ -0,0 +1,91 @@
+"""
+Vangard Pro Mode - Professional Web Interface
+A modern, visual web interface for DAZ Studio automation.
+"""
+import uvicorn
+from fastapi import FastAPI
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import HTMLResponse, FileResponse
+import os
+from pathlib import Path
+
+from vangard.server import create_fastapi_app
+
+def create_pro_app():
+    """
+    Creates a FastAPI app that serves both the API and the Pro web interface.
+    """
+    # Get the base API app with all command endpoints
+    app = create_fastapi_app()
+
+    # Update app metadata for Pro mode
+    app.title = "Vangard Pro - Professional DAZ Studio Interface"
+    app.description = "Modern visual interface for DAZ Studio automation commands"
+
+    # Determine the static files directory
+    static_dir = Path(__file__).parent / "static"
+
+    # Mount static files (CSS, JS, assets)
+    if static_dir.exists():
+        app.mount("/static", StaticFiles(directory=str(static_dir)), name="static")
+
+    @app.get("/ui", response_class=HTMLResponse, include_in_schema=False, tags=["Pro Interface"])
+    async def serve_pro_interface():
+        """Serve the Pro web interface."""
+        index_path = static_dir / "index.html"
+        if index_path.exists():
+            return FileResponse(index_path)
+        else:
+            # Fallback message if static files aren't set up yet
+            return HTMLResponse("""
+            <html>
+                <head><title>Vangard Pro</title></head>
+                <body style="font-family: sans-serif; padding: 40px; text-align: center;">
+                    <h1>Vangard Pro Interface</h1>
+                    <p>Static files not found. Please ensure the static/ directory exists.</p>
+                    <p>API documentation available at: <a href="/docs">/docs</a></p>
+                </body>
+            </html>
+            """)
+
+    # Override the root to redirect to UI
+    from fastapi.responses import RedirectResponse
+
+    @app.get("/pro", response_class=HTMLResponse, include_in_schema=False)
+    async def redirect_to_ui():
+        """Redirect /pro to /ui for convenience."""
+        return RedirectResponse(url="/ui")
+
+    return app
+
+# Create the app instance
+app = create_pro_app()
+
+def main():
+    """
+    Main entry point for Vangard Pro mode.
+    Launches the FastAPI server with the Pro web interface.
+    """
+    print("=" * 60)
+    print("🚀 Vangard Pro - Professional Interface")
+    print("=" * 60)
+    print()
+    print("Starting server...")
+    print()
+    print("📱 Pro Interface:    http://127.0.0.1:8000/ui")
+    print("📚 API Docs:         http://127.0.0.1:8000/docs")
+    print("💡 Health Check:     http://127.0.0.1:8000/")
+    print()
+    print("Press Ctrl+C to stop the server")
+    print("=" * 60)
+
+    uvicorn.run(
+        "vangard.pro:app",
+        host="127.0.0.1",
+        port=8000,
+        reload=False,
+        log_level="info"
+    )
+
+if __name__ == "__main__":
+    main()
diff --git a/vangard/scripts/CreateGroupNodeSU.dsa b/vangard/scripts/CreateGroupNodeSU.dsa
index 798b8eb..fa32d01 100644
--- a/vangard/scripts/CreateGroupNodeSU.dsa
+++ b/vangard/scripts/CreateGroupNodeSU.dsa
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-includeDir_oFILE = DzFile( getScriptFileName() );
+includeDir_oFILE = DzFile( getScriptFileName());
 util_path = includeDir_oFILE.path() + "/DazCopilotUtils.dsa";
 include (util_path);
 
diff --git a/vangard/scripts/DazCopilotUtils.dsa b/vangard/scripts/DazCopilotUtils.dsa
index b63d415..e306701 100644
--- a/vangard/scripts/DazCopilotUtils.dsa
+++ b/vangard/scripts/DazCopilotUtils.dsa
@@ -581,6 +581,7 @@ function init_script_utils(log_source_id) {
         updateModifierKeyState();
     }
 
+    /*
     var sVars = null; // Initialize to null
     if (App.scriptArgs && App.scriptArgs.length > 0 && App.scriptArgs[0]) {
         try {
@@ -609,6 +610,9 @@ function init_script_utils(log_source_id) {
 
 
     return sVars;
+    */
+
+    return getArguments()[0];
 }
 
 
diff --git a/vangard/scripts/FaceRenderLoraSU.dsa b/vangard/scripts/FaceRenderLoraSU.dsa
new file mode 100644
index 0000000..b9d022c
--- /dev/null
+++ b/vangard/scripts/FaceRenderLoraSU.dsa
@@ -0,0 +1,185 @@
+// DAZ Studio version 4.24.0.4 filetype DAZ Script
+
+// ============================================================
+// face_lora_render.dsa  -  DAZ Studio Script
+// Renders a series of orbital camera angles around the face
+// for use as LoRA training images.
+//
+// Usage:
+//   1. Open your character scene in DAZ Studio
+//   2. Edit the CONFIGURATION section below
+//   3. Run via: Scripts > Run Script  (or drag onto viewport)
+// ============================================================
+
+includeDir_oFILE = DzFile( getScriptFileName() );
+util_path = includeDir_oFILE.path() + "/DazCopilotUtils.dsa";
+include (util_path);
+
+var focus_script = null;
+
+function FaceRenderLoraSU() {
+
+    sFunctionName = 'FaceRenderLoraSU';
+
+    oScriptVars = init_script_utils (sFunctionName);
+
+    var bTestMode = getScriptArgValue('test_mode', false);
+    var sOutputDir = getScriptArgValue('output_dir', "y:/ai/charflow/output/face_lora/");
+    var sFilePrefix = getScriptArgValue('file_prefix', "face");
+    var iRenderWidth = getScriptArgValue('wid', 768);
+    var iRenderHeight = getScriptArgValue('height', 768);
+    var iCameraDistance = getScriptArgValue('camera_distance', 80);
+    var iFaceYOffset = getScriptArgValue('face_y_offset', 5);
+    var sSelectedNode = getScriptArgValue('node_label', null);
+    
+    // ========== CONFIGURATION ==========
+    // TODO: Use defualts from here or grab from the oScriptVars
+
+    // Camera distance from face center in DAZ scene units (cm).
+    // Increase if the face is too large / getting clipped at edges.
+    // Decrease if there is too much neck/shoulder showing.
+    //var iCameraDistance = 80;
+
+    // Fine-tune the face center height relative to the head bone origin.
+    // The head bone sits at the base of the skull; this lifts the aim point
+    // up toward nose/eye level.  Adjust if the camera aims too high or low.
+    //var iFaceYOffset = 5;
+
+    // ========== END CONFIGURATION ==========
+
+
+    //var DEG2RAD = Math.PI / 180;
+
+    // Camera angles  [azimuth°,  elevation°,  label]
+    //   Azimuth  :  0 = front,  +ve = character right,  -ve = character left
+    //   Elevation:  0 = level,  +ve = above (looking down), -ve = below (looking up)
+    var ANGLES = [
+        [   0,   0,  "01_front"          ],
+        [  15,   0,  "02_front_r15"      ],
+        [ -15,   0,  "03_front_l15"      ],
+        [  30,   0,  "04_3q_r30"         ],
+        [ -30,   0,  "05_3q_l30"         ],
+        [  45,   0,  "06_3q_r45"         ],
+        [ -45,   0,  "07_3q_l45"         ],
+        [  60,   0,  "08_nearprofile_r"  ],
+        [ -60,   0,  "09_nearprofile_l"  ],
+        [   0,  15,  "10_front_high"     ],
+        [   0, -10,  "11_front_low"      ],
+        [  30,  15,  "12_3q_r30_high"    ],
+        [ -30,  15,  "13_3q_l30_high"    ],
+        [  45,  10,  "14_3q_r45_high"    ],
+        [ -45,  10,  "15_3q_l45_high"    ],
+    ];
+
+    // ---- Helpers ----
+
+    // TODO:
+    // Returns the first DzSkeleton found in the scene (your figure), or use
+    // a named node from oScriptVars
+    
+    function findFigure() {
+        var nodes = Scene.getNodeList();
+        for (var i = 0; i < nodes.length; i++) {
+	    if (sSelectedNode == null) {
+		if (nodes[i].inherits("DzSkeleton")) return nodes[i];
+	    } else {
+		if (nodes[i].getLabel() == sSelectedNode) return nodes[i];
+	    }
+        }
+        return null;
+    }
+
+
+    // Renders the current frame to `filePath` at the configured resolution.
+    function renderToFile(sFilePath) {
+        var mgr  = App.getRenderMgr();
+        var opts = mgr.getRenderOptions();
+
+        opts.renderImgFilename = sFilePath;
+        opts.width             = iRenderWidth;
+        opts.height            = iRenderHeight;
+        opts.renderImgToId = DzRenderOptions.DirectToFile;
+
+	mgr.doRender(opts);
+
+        while (mgr.isRendering()) {
+            App.processEvents();
+        }	
+    }
+    
+    // ---- Main ----
+
+    var currentCam = getViewportCamera();
+
+    var camera = createPerspectiveCamera ("TEMP", "LoraCamera", "TEMP")
+
+    setViewportCamera(camera);
+
+    if (!camera) {
+        MessageBox.critical(
+            "No active camera found.\nPlease add a Perspective camera to the scene.",
+            "face_lora_render",
+            "&OK"
+        );
+        return;
+    }
+
+    var figure  = findFigure();
+    var facePos = getFaceCenter(figure, iFaceYOffset);
+
+    if (!figure) {
+        MessageBox.information(
+            "No figure found in scene.\n" +
+            "Using default face position (Y = 162 cm).\n" +
+            "Adjust iFaceYOffset in the script if framing is off.",
+            "face_lora_render",
+            "&OK"
+        );
+    }
+
+    // Create output directory if it does not exist
+    var dir = new DzDir(sOutputDir);
+    if (!dir.exists()) dir.mkpath(sOutputDir);
+
+    print("=== face_lora_render ===");
+    print("Figure  : " + (figure ? figure.getLabel() : "none (fallback)"));
+    print("Face at : " + facePos.x.toFixed(1) + ", " + facePos.y.toFixed(1) + ", " + facePos.z.toFixed(1));
+    print("Output  : " + sOutputDir);
+    print("Angles  : " + ANGLES.length);
+    print("------------------------");
+
+    for (var i = 10;  i < ANGLES.length; i++) {
+        var az    = ANGLES[i][0];
+        var el    = ANGLES[i][1];
+        var label = ANGLES[i][2];
+        var path  = sOutputDir + sFilePrefix + "_" + label + ".png";
+
+        setCameraOrbit(camera, facePos, az, el, iCameraDistance);
+
+        print("[" + (i + 1) + "/" + ANGLES.length + "] " + label + " -> " + path);
+
+	if (bTestMode) {
+            MessageBox.information("[" + (i + 1) + "/" + ANGLES.length + "] " + label + " -> " + path, "face_lora_render", "&OK");
+	} else {
+            renderToFile(path);
+	}
+	break;
+    }
+
+    setViewportCamera(currentCam);
+
+    Scene.removeNode(camera);
+
+    print("========================");
+    print("Done.");
+
+    MessageBox.information(
+        ANGLES.length + " images saved to:\n" + sOutputDir,
+        "face_lora_render — Complete",
+        "&OK"
+    );
+
+}
+
+FaceRenderLoraSU();
+
diff --git a/vangard/scripts/SaveViewportSU.dsa b/vangard/scripts/SaveViewportSU.dsa
new file mode 100644
index 0000000..d14c04e
--- /dev/null
+++ b/vangard/scripts/SaveViewportSU.dsa
@@ -0,0 +1,102 @@
+/*
+ * Copyright (C) 2025 Blue Moon Foundry Software
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+includeDir_oFILE = DzFile( getScriptFileName() );
+util_path = includeDir_oFILE.path() + "/DazCopilotUtils.dsa";
+include (util_path);
+
+var focus_script = null;
+
+function SaveViewportSU() {
+
+    sFunctionName = 'SaveViewportSU';
+
+    oScriptVars = init_script_utils (sFunctionName);
+    sViewCam    = oScriptVars['view_camera'];
+    sFileRoot   = oScriptVars['save_file'];
+    sFileExt    = oScriptVars['image_format'];
+    iFrameStart = oScriptVars['frame_start'];
+    oFrameEnd   = oScriptVars['frame_end'];
+
+
+    if( MainWindow ){
+
+
+
+        iCurrentFrame = Scene.getFrame();
+
+        // Get the active viewport
+        var oViewportMgr    = MainWindow.getViewportMgr();
+        var oViewport       = oViewportMgr.getActiveViewport().get3DViewport();
+        var oViewportCamera = oViewport.getCamera();
+
+
+        if (sViewCam != null) {
+              log_info (
+			{
+				'request': {
+                    'view_cam': sViewCam,
+				},
+				'message': "Shift camera for viewport to selected camera."
+			}
+		    );
+            oViewport.setCameraByName(sViewCam);
+        }
+        if (iFrameStart == null) {
+            iFrameStart = Scene.getFrame();
+        }
+        if (oFrameEnd == null) {
+            oFrameEnd = iFrameStart+1
+        }
+
+        for (var x = iFrameStart; x < oFrameEnd; x++) {
+
+            Scene.setFrame(x);
+
+            // Capture the contents of the active viewport
+            var oImg = oViewport.captureImage();
+        
+            // Get the image manager
+            var oImgMgr = App.getImageMgr();
+        
+            var sFilePath = String("%1_%2.%3").arg(sFileRoot).arg(x).arg(sFileExt);
+	
+            log_info (
+			{
+				'request': {
+                    'frame': x,
+					'path': sFilePath
+				},
+				'message': "Wrote viewport image to file."
+			}
+		    );
+
+            // Save the image to a file
+            oImgMgr.saveImage( String(sFilePath) , oImg );
+            
+        }
+
+        
+        oViewport.setCamera( oViewportCamera );
+        Scene.setFrame(iCurrentFrame);
+    }
+
+    close_script_utils();
+}
+
+SaveViewportSU();
+
diff --git a/vangard/static/css/styles.css b/vangard/static/css/styles.css
new file mode 100644
index 0000000..110e164
--- /dev/null
+++ b/vangard/static/css/styles.css
@@ -0,0 +1,745 @@
+/* ============================================
+   Vangard Pro - Professional Stylesheet
+   Modern, colorful, glassmorphism design
+   ============================================ */
+
+/* CSS Variables for Theming */
+:root {
+    /* Color Palette */
+    --color-primary: #6366f1;
+    --color-primary-dark: #4f46e5;
+    --color-primary-light: #818cf8;
+    --color-success: #10b981;
+    --color-warning: #f59e0b;
+    --color-error: #ef4444;
+    --color-accent: #8b5cf6;
+
+    /* Dark Theme Colors */
+    --color-bg: #0f172a;
+    --color-surface: #1e293b;
+    --color-surface-light: #334155;
+    --color-text: #f1f5f9;
+    --color-text-muted: #94a3b8;
+    --color-border: #334155;
+
+    /* Spacing */
+    --spacing-xs: 0.25rem;
+    --spacing-sm: 0.5rem;
+    --spacing-md: 1rem;
+    --spacing-lg: 1.5rem;
+    --spacing-xl: 2rem;
+
+    /* Border Radius */
+    --radius-sm: 0.375rem;
+    --radius-md: 0.5rem;
+    --radius-lg: 0.75rem;
+    --radius-xl: 1rem;
+
+    /* Shadows */
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+
+    /* Transitions */
+    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Light Theme Overrides */
+body.light-theme {
+    --color-bg: #f8fafc;
+    --color-surface: #ffffff;
+    --color-surface-light: #f1f5f9;
+    --color-text: #0f172a;
+    --color-text-muted: #64748b;
+    --color-border: #e2e8f0;
+}
+
+/* ============================================
+   Base Styles
+   ============================================ */
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    background: var(--color-bg);
+    color: var(--color-text);
+    line-height: 1.6;
+    overflow-x: hidden;
+}
+
+/* ============================================
+   Header
+   ============================================ */
+
+.header {
+    background: var(--color-surface);
+    border-bottom: 1px solid var(--color-border);
+    backdrop-filter: blur(10px);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    box-shadow: var(--shadow-md);
+}
+
+.header-content {
+    max-width: 100%;
+    padding: var(--spacing-md) var(--spacing-xl);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--spacing-lg);
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+}
+
+.logo-icon {
+    font-size: 2rem;
+}
+
+.logo h1 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.header-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+}
+
+.search-box {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.search-icon {
+    position: absolute;
+    left: var(--spacing-md);
+    font-size: 1rem;
+    pointer-events: none;
+}
+
+.search-box input {
+    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) 2.5rem;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    background: var(--color-surface-light);
+    color: var(--color-text);
+    font-size: 0.875rem;
+    width: 250px;
+    transition: all var(--transition-normal);
+}
+
+.search-box input:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+    width: 300px;
+}
+
+.icon-button {
+    background: var(--color-surface-light);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    padding: var(--spacing-sm);
+    font-size: 1.2rem;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    color: var(--color-text);
+    text-decoration: none;
+}
+
+.icon-button:hover {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+
+/* ============================================
+   Container & Layout
+   ============================================ */
+
+.container {
+    display: flex;
+    height: calc(100vh - 73px);
+    overflow: hidden;
+}
+
+/* ============================================
+   Sidebar
+   ============================================ */
+
+.sidebar {
+    width: 320px;
+    background: var(--color-surface);
+    border-right: 1px solid var(--color-border);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.sidebar-header {
+    padding: var(--spacing-lg);
+    border-bottom: 1px solid var(--color-border);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.sidebar-header h2 {
+    font-size: 1.125rem;
+    font-weight: 600;
+}
+
+.command-count {
+    background: var(--color-primary);
+    color: white;
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--radius-sm);
+    font-size: 0.75rem;
+    font-weight: 600;
+}
+
+.command-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--spacing-sm);
+}
+
+/* Custom Scrollbar */
+.command-list::-webkit-scrollbar {
+    width: 8px;
+}
+
+.command-list::-webkit-scrollbar-track {
+    background: var(--color-surface);
+}
+
+.command-list::-webkit-scrollbar-thumb {
+    background: var(--color-surface-light);
+    border-radius: var(--radius-sm);
+}
+
+.command-list::-webkit-scrollbar-thumb:hover {
+    background: var(--color-border);
+}
+
+.command-item {
+    background: var(--color-surface-light);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    padding: var(--spacing-md);
+    margin-bottom: var(--spacing-sm);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+}
+
+.command-item:hover {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+    transform: translateX(4px);
+    box-shadow: var(--shadow-md);
+}
+
+.command-item.active {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+    box-shadow: var(--shadow-lg);
+}
+
+.command-item-icon {
+    font-size: 1.5rem;
+    flex-shrink: 0;
+}
+
+.command-item-content {
+    flex: 1;
+    min-width: 0;
+}
+
+.command-item-name {
+    font-weight: 600;
+    font-size: 0.875rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.command-item-desc {
+    font-size: 0.75rem;
+    color: var(--color-text-muted);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.command-item:hover .command-item-desc,
+.command-item.active .command-item-desc {
+    color: rgba(255, 255, 255, 0.8);
+}
+
+/* ============================================
+   Main Content
+   ============================================ */
+
+.main-content {
+    flex: 1;
+    overflow-y: auto;
+    background: var(--color-bg);
+}
+
+/* Welcome Screen */
+.welcome-screen {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: var(--spacing-xl);
+}
+
+.welcome-card {
+    text-align: center;
+    max-width: 600px;
+}
+
+.welcome-icon {
+    font-size: 5rem;
+    margin-bottom: var(--spacing-lg);
+    animation: float 3s ease-in-out infinite;
+}
+
+@keyframes float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-20px); }
+}
+
+.welcome-card h2 {
+    font-size: 2.5rem;
+    margin-bottom: var(--spacing-md);
+    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.welcome-card > p {
+    font-size: 1.125rem;
+    color: var(--color-text-muted);
+    margin-bottom: var(--spacing-xl);
+}
+
+.welcome-features {
+    display: flex;
+    justify-content: center;
+    gap: var(--spacing-xl);
+    margin-bottom: var(--spacing-xl);
+    flex-wrap: wrap;
+}
+
+.feature {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-lg);
+    background: var(--color-surface);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--color-border);
+    min-width: 150px;
+}
+
+.feature-icon {
+    font-size: 2rem;
+}
+
+.welcome-hint {
+    color: var(--color-text-muted);
+    font-size: 0.875rem;
+    margin-top: var(--spacing-lg);
+}
+
+/* Command Form Container */
+.command-form-container {
+    padding: var(--spacing-xl);
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.command-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: var(--spacing-xl);
+    padding-bottom: var(--spacing-lg);
+    border-bottom: 2px solid var(--color-border);
+}
+
+.command-title {
+    display: flex;
+    gap: var(--spacing-lg);
+    align-items: flex-start;
+}
+
+.command-icon {
+    font-size: 3rem;
+}
+
+.command-title h2 {
+    font-size: 1.875rem;
+    margin-bottom: var(--spacing-sm);
+}
+
+.command-title p {
+    color: var(--color-text-muted);
+    font-size: 1rem;
+}
+
+.close-button {
+    background: transparent;
+    border: 1px solid var(--color-border);
+}
+
+.close-button:hover {
+    background: var(--color-error);
+    border-color: var(--color-error);
+}
+
+/* Form Styles */
+.command-form {
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-xl);
+    padding: var(--spacing-xl);
+    box-shadow: var(--shadow-lg);
+}
+
+.form-fields {
+    display: grid;
+    gap: var(--spacing-lg);
+    margin-bottom: var(--spacing-xl);
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+}
+
+.form-label {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    font-weight: 600;
+    font-size: 0.875rem;
+}
+
+.required-indicator {
+    color: var(--color-error);
+    font-weight: bold;
+}
+
+.help-icon {
+    color: var(--color-text-muted);
+    cursor: help;
+    font-size: 0.875rem;
+}
+
+.form-input,
+.form-select {
+    padding: var(--spacing-md);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    background: var(--color-surface-light);
+    color: var(--color-text);
+    font-size: 0.875rem;
+    transition: all var(--transition-fast);
+}
+
+.form-input:focus,
+.form-select:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
+
+.form-checkbox-wrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+}
+
+.form-checkbox {
+    width: 1.25rem;
+    height: 1.25rem;
+    cursor: pointer;
+}
+
+.file-picker-wrapper {
+    display: flex;
+    gap: var(--spacing-sm);
+    align-items: stretch;
+}
+
+.file-picker-input {
+    flex: 1;
+}
+
+.file-picker-button {
+    white-space: nowrap;
+    padding: var(--spacing-md) var(--spacing-lg);
+}
+
+.form-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--spacing-md);
+    padding-top: var(--spacing-lg);
+    border-top: 1px solid var(--color-border);
+}
+
+.btn {
+    padding: var(--spacing-md) var(--spacing-xl);
+    border: none;
+    border-radius: var(--radius-md);
+    font-size: 0.875rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+}
+
+.btn-primary {
+    background: var(--color-primary);
+    color: white;
+}
+
+.btn-primary:hover {
+    background: var(--color-primary-dark);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+
+.btn-secondary {
+    background: var(--color-surface-light);
+    color: var(--color-text);
+    border: 1px solid var(--color-border);
+}
+
+.btn-secondary:hover {
+    background: var(--color-border);
+}
+
+.button-icon {
+    font-size: 1rem;
+}
+
+/* Output Panel */
+.output-panel {
+    margin-top: var(--spacing-xl);
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-xl);
+    overflow: hidden;
+    box-shadow: var(--shadow-lg);
+}
+
+.output-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--spacing-md) var(--spacing-lg);
+    background: var(--color-surface-light);
+    border-bottom: 1px solid var(--color-border);
+}
+
+.output-header h3 {
+    font-size: 1rem;
+    font-weight: 600;
+}
+
+.output-actions {
+    display: flex;
+    gap: var(--spacing-sm);
+}
+
+.output-content {
+    padding: var(--spacing-lg);
+    font-family: 'Monaco', 'Courier New', monospace;
+    font-size: 0.875rem;
+    max-height: 400px;
+    overflow-y: auto;
+    line-height: 1.5;
+}
+
+.output-line {
+    margin-bottom: var(--spacing-sm);
+}
+
+.output-line.success {
+    color: var(--color-success);
+}
+
+.output-line.error {
+    color: var(--color-error);
+}
+
+.output-line.info {
+    color: var(--color-primary-light);
+}
+
+/* Loading States */
+.loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacing-xl);
+    color: var(--color-text-muted);
+}
+
+.spinner {
+    width: 40px;
+    height: 40px;
+    border: 3px solid var(--color-border);
+    border-top-color: var(--color-primary);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+.spinner.large {
+    width: 60px;
+    height: 60px;
+    border-width: 4px;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+.loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(15, 23, 42, 0.8);
+    backdrop-filter: blur(4px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.loading-spinner {
+    text-align: center;
+}
+
+.loading-spinner p {
+    margin-top: var(--spacing-lg);
+    font-size: 1.125rem;
+    color: var(--color-text);
+}
+
+/* Toast Notifications */
+.toast-container {
+    position: fixed;
+    top: var(--spacing-xl);
+    right: var(--spacing-xl);
+    z-index: 2000;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-md);
+}
+
+.toast {
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    padding: var(--spacing-md) var(--spacing-lg);
+    box-shadow: var(--shadow-xl);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-md);
+    min-width: 300px;
+    animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateX(400px);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+.toast.success {
+    border-left: 4px solid var(--color-success);
+}
+
+.toast.error {
+    border-left: 4px solid var(--color-error);
+}
+
+.toast.info {
+    border-left: 4px solid var(--color-primary);
+}
+
+.toast-icon {
+    font-size: 1.5rem;
+}
+
+.toast-message {
+    flex: 1;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .sidebar {
+        width: 100%;
+        max-height: 40vh;
+        border-right: none;
+        border-bottom: 1px solid var(--color-border);
+    }
+
+    .container {
+        flex-direction: column;
+    }
+
+    .search-box input {
+        width: 150px;
+    }
+
+    .search-box input:focus {
+        width: 200px;
+    }
+}
diff --git a/vangard/static/index.html b/vangard/static/index.html
new file mode 100644
index 0000000..6f912e6
--- /dev/null
+++ b/vangard/static/index.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vangard Pro - DAZ Studio Automation</title>
+    <link rel="stylesheet" href="/static/css/styles.css">
+</head>
+<body>
+    <!-- Header -->
+    <header class="header">
+        <div class="header-content">
+            <div class="logo">
+                <span class="logo-icon">🎬</span>
+                <h1>Vangard Pro</h1>
+            </div>
+            <div class="header-actions">
+                <div class="search-box">
+                    <span class="search-icon">🔍</span>
+                    <input type="text" id="searchInput" placeholder="Search commands..." />
+                </div>
+                <button class="icon-button" id="themeToggle" title="Toggle Theme">
+                    <span class="theme-icon">🌙</span>
+                </button>
+                <a href="/docs" target="_blank" class="icon-button" title="API Documentation">
+                    <span>📚</span>
+                </a>
+            </div>
+        </div>
+    </header>
+
+    <!-- Main Container -->
+    <div class="container">
+        <!-- Sidebar -->
+        <aside class="sidebar">
+            <div class="sidebar-header">
+                <h2>Commands</h2>
+                <span class="command-count" id="commandCount">0</span>
+            </div>
+            <div class="command-list" id="commandList">
+                <!-- Commands will be dynamically loaded here -->
+                <div class="loading">
+                    <div class="spinner"></div>
+                    <p>Loading commands...</p>
+                </div>
+            </div>
+        </aside>
+
+        <!-- Main Content -->
+        <main class="main-content">
+            <!-- Welcome Screen -->
+            <div class="welcome-screen" id="welcomeScreen">
+                <div class="welcome-card">
+                    <div class="welcome-icon">🎨</div>
+                    <h2>Welcome to Vangard Pro</h2>
+                    <p>Professional interface for DAZ Studio automation</p>
+                    <div class="welcome-features">
+                        <div class="feature">
+                            <span class="feature-icon">⚡</span>
+                            <span>Fast & Intuitive</span>
+                        </div>
+                        <div class="feature">
+                            <span class="feature-icon">🎯</span>
+                            <span>Visual Command Builder</span>
+                        </div>
+                        <div class="feature">
+                            <span class="feature-icon">🔄</span>
+                            <span>Real-time Feedback</span>
+                        </div>
+                    </div>
+                    <p class="welcome-hint">Select a command from the sidebar to get started</p>
+                </div>
+            </div>
+
+            <!-- Command Form -->
+            <div class="command-form-container" id="commandFormContainer" style="display: none;">
+                <div class="command-header">
+                    <div class="command-title">
+                        <span class="command-icon" id="commandIcon">📦</span>
+                        <div>
+                            <h2 id="commandName">Command Name</h2>
+                            <p id="commandDescription">Command description</p>
+                        </div>
+                    </div>
+                    <button class="icon-button close-button" id="closeCommand" title="Close">
+                        <span>✕</span>
+                    </button>
+                </div>
+
+                <form id="commandForm" class="command-form">
+                    <div id="formFields" class="form-fields">
+                        <!-- Form fields will be dynamically generated here -->
+                    </div>
+
+                    <div class="form-actions">
+                        <button type="button" class="btn btn-secondary" id="resetForm">Reset</button>
+                        <button type="submit" class="btn btn-primary" id="executeButton">
+                            <span class="button-icon">▶</span>
+                            <span>Execute Command</span>
+                        </button>
+                    </div>
+                </form>
+
+                <!-- Output Panel -->
+                <div class="output-panel" id="outputPanel" style="display: none;">
+                    <div class="output-header">
+                        <h3>Output</h3>
+                        <div class="output-actions">
+                            <button class="icon-button" id="clearOutput" title="Clear Output">
+                                <span>🗑️</span>
+                            </button>
+                            <button class="icon-button" id="toggleOutput" title="Collapse">
+                                <span>▼</span>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="output-content" id="outputContent">
+                        <!-- Output will be displayed here -->
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <!-- Toast Notification Container -->
+    <div class="toast-container" id="toastContainer"></div>
+
+    <!-- Loading Overlay -->
+    <div class="loading-overlay" id="loadingOverlay" style="display: none;">
+        <div class="loading-spinner">
+            <div class="spinner large"></div>
+            <p>Executing command...</p>
+        </div>
+    </div>
+
+    <script src="/static/js/app.js"></script>
+</body>
+</html>
diff --git a/vangard/static/js/app.js b/vangard/static/js/app.js
new file mode 100644
index 0000000..563936c
--- /dev/null
+++ b/vangard/static/js/app.js
@@ -0,0 +1,549 @@
+/**
+ * Vangard Pro - JavaScript Application
+ * Handles dynamic UI generation and API interactions
+ */
+
+// ============================================
+// State Management
+// ============================================
+
+const state = {
+    commands: [],
+    selectedCommand: null,
+    theme: localStorage.getItem('theme') || 'dark',
+    openApiSchema: null  // Store full schema for $ref resolution
+};
+
+// Command icon mapping (emoji-based)
+const COMMAND_ICONS = {
+    'help': '❓',
+    'load': '📂',
+    'save': '💾',
+    'render': '🎬',
+    'batch': '📦',
+    'create': '✨',
+    'camera': '📷',
+    'cam': '📷',
+    'scene': '🎭',
+    'rotate': '🔄',
+    'transform': '🔀',
+    'copy': '📋',
+    'paste': '📌',
+    'group': '🗂️',
+    'node': '🔗',
+    'apply': '✅',
+    'pose': '🧍',
+    'product': '🛍️',
+    'list': '📋',
+    'export': '📤',
+    'import': '📥',
+    'action': '⚡',
+    'default': '📦'
+};
+
+// ============================================
+// Initialization
+// ============================================
+
+document.addEventListener('DOMContentLoaded', async () => {
+    // Initialize theme
+    applyTheme();
+
+    // Load commands from API
+    await loadCommands();
+
+    // Setup event listeners
+    setupEventListeners();
+});
+
+// ============================================
+// Theme Management
+// ============================================
+
+function applyTheme() {
+    if (state.theme === 'light') {
+        document.body.classList.add('light-theme');
+    } else {
+        document.body.classList.remove('light-theme');
+    }
+
+    const themeIcon = document.querySelector('.theme-icon');
+    if (themeIcon) {
+        themeIcon.textContent = state.theme === 'light' ? '☀️' : '🌙';
+    }
+}
+
+function toggleTheme() {
+    state.theme = state.theme === 'dark' ? 'light' : 'dark';
+    localStorage.setItem('theme', state.theme);
+    applyTheme();
+}
+
+// ============================================
+// API Communication
+// ============================================
+
+async function loadCommands() {
+    try {
+        const response = await fetch('/openapi.json');
+        const schema = await response.json();
+
+        // Store full schema for $ref resolution
+        state.openApiSchema = schema;
+
+        // Extract commands from OpenAPI schema
+        state.commands = Object.entries(schema.paths)
+            .filter(([path, _]) => path.startsWith('/api/'))
+            .map(([path, operations]) => {
+                const commandName = path.replace('/api/', '');
+                const postOp = operations.post;
+
+                return {
+                    name: commandName,
+                    description: postOp.summary || 'No description available',
+                    parameters: extractParameters(postOp, schema),
+                    icon: getCommandIcon(commandName)
+                };
+            })
+            .sort((a, b) => a.name.localeCompare(b.name));
+
+        renderCommandList();
+    } catch (error) {
+        console.error('Failed to load commands:', error);
+        showToast('Failed to load commands', 'error');
+    }
+}
+
+function extractParameters(operation, fullSchema) {
+    if (!operation.requestBody?.content?.['application/json']?.schema) {
+        return [];
+    }
+
+    let schema = operation.requestBody.content['application/json'].schema;
+
+    // Resolve $ref if present
+    if (schema.$ref) {
+        const refPath = schema.$ref.split('/').slice(1); // Remove leading #
+        schema = refPath.reduce((obj, key) => obj[key], fullSchema);
+    }
+
+    const properties = schema.properties || {};
+    const required = schema.required || [];
+
+    return Object.entries(properties).map(([name, prop]) => {
+        // Handle anyOf pattern (used for optional nullable fields)
+        let actualType = prop.type;
+        let actualDefault = prop.default;
+
+        if (prop.anyOf && Array.isArray(prop.anyOf)) {
+            // Find the non-null type
+            const nonNullType = prop.anyOf.find(t => t.type && t.type !== 'null');
+            if (nonNullType) {
+                actualType = nonNullType.type;
+            }
+        }
+
+        return {
+            name,
+            type: actualType || 'string',
+            required: required.includes(name),
+            description: prop.description || prop.title || '',
+            default: actualDefault !== undefined ? actualDefault : prop.default,
+            items: prop.items, // For array types
+            uiclass: prop['x-uiclass'] || null // Custom UI widget hint
+        };
+    });
+}
+
+function getCommandIcon(commandName) {
+    // Try to match command name with icon keywords
+    for (const [keyword, icon] of Object.entries(COMMAND_ICONS)) {
+        if (commandName.toLowerCase().includes(keyword)) {
+            return icon;
+        }
+    }
+    return COMMAND_ICONS.default;
+}
+
+async function executeCommand(commandName, formData) {
+    try {
+        showLoadingOverlay(true);
+
+        const response = await fetch(`/api/${commandName}`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(formData)
+        });
+
+        const result = await response.json();
+
+        showLoadingOverlay(false);
+
+        if (response.ok) {
+            displayOutput(result, 'success');
+            showToast('Command executed successfully', 'success');
+        } else {
+            displayOutput(result, 'error');
+            showToast(result.detail || 'Command execution failed', 'error');
+        }
+    } catch (error) {
+        showLoadingOverlay(false);
+        console.error('Command execution error:', error);
+        displayOutput({ error: error.message }, 'error');
+        showToast('An error occurred', 'error');
+    }
+}
+
+// ============================================
+// UI Rendering
+// ============================================
+
+function renderCommandList() {
+    const commandList = document.getElementById('commandList');
+    const commandCount = document.getElementById('commandCount');
+
+    commandCount.textContent = state.commands.length;
+
+    if (state.commands.length === 0) {
+        commandList.innerHTML = '<div class="loading"><p>No commands available</p></div>';
+        return;
+    }
+
+    commandList.innerHTML = state.commands.map(cmd => `
+        <div class="command-item" data-command="${cmd.name}">
+            <div class="command-item-icon">${cmd.icon}</div>
+            <div class="command-item-content">
+                <div class="command-item-name">${cmd.name}</div>
+                <div class="command-item-desc">${truncate(cmd.description, 50)}</div>
+            </div>
+        </div>
+    `).join('');
+
+    // Add click handlers
+    commandList.querySelectorAll('.command-item').forEach(item => {
+        item.addEventListener('click', () => {
+            const commandName = item.dataset.command;
+            selectCommand(commandName);
+        });
+    });
+}
+
+function selectCommand(commandName) {
+    const command = state.commands.find(cmd => cmd.name === commandName);
+    if (!command) return;
+
+    state.selectedCommand = command;
+
+    // Update active state in sidebar
+    document.querySelectorAll('.command-item').forEach(item => {
+        item.classList.toggle('active', item.dataset.command === commandName);
+    });
+
+    // Hide welcome, show form
+    document.getElementById('welcomeScreen').style.display = 'none';
+    document.getElementById('commandFormContainer').style.display = 'block';
+
+    // Render command form
+    renderCommandForm(command);
+}
+
+function renderCommandForm(command) {
+    // Update header
+    document.getElementById('commandIcon').textContent = command.icon;
+    document.getElementById('commandName').textContent = command.name;
+    document.getElementById('commandDescription').textContent = command.description;
+
+    // Generate form fields
+    const formFields = document.getElementById('formFields');
+
+    if (command.parameters.length === 0) {
+        formFields.innerHTML = '<p class="no-params">This command has no parameters</p>';
+    } else {
+        formFields.innerHTML = command.parameters.map(param =>
+            generateFormField(param)
+        ).join('');
+    }
+
+    // Hide output panel initially
+    document.getElementById('outputPanel').style.display = 'none';
+}
+
+function generateFormField(param) {
+    const isRequired = param.required;
+    const fieldId = `field_${param.name}`;
+
+    let inputHtml = '';
+
+    // Check for special UI classes first
+    if (param.uiclass === 'pick-folder' || param.uiclass === 'pick-file') {
+        const buttonText = param.uiclass === 'pick-folder' ? '📁 Browse Folder' : '📄 Browse File';
+        inputHtml = `
+            <div class="file-picker-wrapper">
+                <input
+                    type="text"
+                    id="${fieldId}"
+                    name="${param.name}"
+                    class="form-input file-picker-input"
+                    ${isRequired ? 'required' : ''}
+                    ${param.default !== undefined ? `value="${param.default}"` : ''}
+                    placeholder="${param.description || 'Enter or browse for path'}"
+                >
+                <button
+                    type="button"
+                    class="btn btn-secondary file-picker-button"
+                    onclick="alert('File picker coming soon! For now, please type the path manually.')"
+                    title="Browse for ${param.uiclass === 'pick-folder' ? 'folder' : 'file'}"
+                >
+                    ${buttonText}
+                </button>
+            </div>
+            <small style="color: var(--color-text-muted); font-size: 0.75rem;">
+                Tip: You can type the path directly or use the browse button
+            </small>
+        `;
+    } else if (param.type === 'boolean') {
+        inputHtml = `
+            <div class="form-checkbox-wrapper">
+                <input
+                    type="checkbox"
+                    id="${fieldId}"
+                    name="${param.name}"
+                    class="form-checkbox"
+                    ${param.default === true ? 'checked' : ''}
+                >
+                <label for="${fieldId}">${param.description || param.name}</label>
+            </div>
+        `;
+    } else if (param.type === 'integer' || param.type === 'number') {
+        inputHtml = `
+            <input
+                type="number"
+                id="${fieldId}"
+                name="${param.name}"
+                class="form-input"
+                ${isRequired ? 'required' : ''}
+                ${param.default !== undefined ? `value="${param.default}"` : ''}
+                ${param.type === 'integer' ? 'step="1"' : 'step="any"'}
+            >
+        `;
+    } else if (param.type === 'array') {
+        inputHtml = `
+            <input
+                type="text"
+                id="${fieldId}"
+                name="${param.name}"
+                class="form-input"
+                placeholder="Comma-separated values"
+                ${isRequired ? 'required' : ''}
+            >
+            <small style="color: var(--color-text-muted); font-size: 0.75rem;">
+                Enter multiple values separated by commas
+            </small>
+        `;
+    } else {
+        // Default to text input
+        inputHtml = `
+            <input
+                type="text"
+                id="${fieldId}"
+                name="${param.name}"
+                class="form-input"
+                ${isRequired ? 'required' : ''}
+                ${param.default !== undefined ? `value="${param.default}"` : ''}
+                placeholder="${param.description || param.name}"
+            >
+        `;
+    }
+
+    return `
+        <div class="form-group">
+            <label for="${fieldId}" class="form-label">
+                ${formatParameterName(param.name)}
+                ${isRequired ? '<span class="required-indicator">*</span>' : ''}
+                ${param.description ? `<span class="help-icon" title="${param.description}">ⓘ</span>` : ''}
+            </label>
+            ${inputHtml}
+        </div>
+    `;
+}
+
+function displayOutput(result, type = 'info') {
+    const outputPanel = document.getElementById('outputPanel');
+    const outputContent = document.getElementById('outputContent');
+
+    outputPanel.style.display = 'block';
+
+    const timestamp = new Date().toLocaleTimeString();
+    const outputLine = document.createElement('div');
+    outputLine.className = `output-line ${type}`;
+
+    if (typeof result === 'object') {
+        outputLine.innerHTML = `<strong>[${timestamp}]</strong> ${JSON.stringify(result, null, 2)}`;
+    } else {
+        outputLine.innerHTML = `<strong>[${timestamp}]</strong> ${result}`;
+    }
+
+    outputContent.appendChild(outputLine);
+    outputContent.scrollTop = outputContent.scrollHeight;
+}
+
+// ============================================
+// Event Handlers
+// ============================================
+
+function setupEventListeners() {
+    // Theme toggle
+    document.getElementById('themeToggle')?.addEventListener('click', toggleTheme);
+
+    // Search
+    document.getElementById('searchInput')?.addEventListener('input', handleSearch);
+
+    // Close command
+    document.getElementById('closeCommand')?.addEventListener('click', closeCommandForm);
+
+    // Form submission
+    document.getElementById('commandForm')?.addEventListener('submit', handleFormSubmit);
+
+    // Reset form
+    document.getElementById('resetForm')?.addEventListener('click', resetForm);
+
+    // Clear output
+    document.getElementById('clearOutput')?.addEventListener('click', clearOutput);
+
+    // Toggle output
+    document.getElementById('toggleOutput')?.addEventListener('click', toggleOutput);
+}
+
+function handleSearch(event) {
+    const query = event.target.value.toLowerCase();
+
+    document.querySelectorAll('.command-item').forEach(item => {
+        const name = item.querySelector('.command-item-name').textContent.toLowerCase();
+        const desc = item.querySelector('.command-item-desc').textContent.toLowerCase();
+
+        if (name.includes(query) || desc.includes(query)) {
+            item.style.display = 'flex';
+        } else {
+            item.style.display = 'none';
+        }
+    });
+}
+
+function closeCommandForm() {
+    document.getElementById('welcomeScreen').style.display = 'flex';
+    document.getElementById('commandFormContainer').style.display = 'none';
+
+    // Clear active states
+    document.querySelectorAll('.command-item').forEach(item => {
+        item.classList.remove('active');
+    });
+
+    state.selectedCommand = null;
+}
+
+async function handleFormSubmit(event) {
+    event.preventDefault();
+
+    if (!state.selectedCommand) return;
+
+    const formData = {};
+    const form = event.target;
+    const formElements = form.elements;
+
+    // Collect form data
+    for (let i = 0; i < formElements.length; i++) {
+        const element = formElements[i];
+
+        if (element.name) {
+            if (element.type === 'checkbox') {
+                formData[element.name] = element.checked;
+            } else if (element.value !== '') {
+                // Check if this is an array parameter
+                const param = state.selectedCommand.parameters.find(p => p.name === element.name);
+                if (param && param.type === 'array') {
+                    // Split comma-separated values
+                    formData[element.name] = element.value.split(',').map(v => v.trim());
+                } else if (param && (param.type === 'integer' || param.type === 'number')) {
+                    formData[element.name] = Number(element.value);
+                } else {
+                    formData[element.name] = element.value;
+                }
+            }
+        }
+    }
+
+    await executeCommand(state.selectedCommand.name, formData);
+}
+
+function resetForm() {
+    document.getElementById('commandForm').reset();
+    document.getElementById('outputPanel').style.display = 'none';
+}
+
+function clearOutput() {
+    document.getElementById('outputContent').innerHTML = '';
+    document.getElementById('outputPanel').style.display = 'none';
+}
+
+function toggleOutput() {
+    const outputContent = document.getElementById('outputContent');
+    const toggleButton = document.getElementById('toggleOutput');
+
+    if (outputContent.style.display === 'none') {
+        outputContent.style.display = 'block';
+        toggleButton.querySelector('span').textContent = '▼';
+    } else {
+        outputContent.style.display = 'none';
+        toggleButton.querySelector('span').textContent = '▶';
+    }
+}
+
+// ============================================
+// Utility Functions
+// ============================================
+
+function showLoadingOverlay(show) {
+    const overlay = document.getElementById('loadingOverlay');
+    overlay.style.display = show ? 'flex' : 'none';
+}
+
+function showToast(message, type = 'info') {
+    const container = document.getElementById('toastContainer');
+
+    const icons = {
+        success: '✓',
+        error: '✕',
+        info: 'ⓘ'
+    };
+
+    const toast = document.createElement('div');
+    toast.className = `toast ${type}`;
+    toast.innerHTML = `
+        <span class="toast-icon">${icons[type]}</span>
+        <span class="toast-message">${message}</span>
+    `;
+
+    container.appendChild(toast);
+
+    // Auto-remove after 3 seconds
+    setTimeout(() => {
+        toast.style.animation = 'slideIn 0.3s ease-out reverse';
+        setTimeout(() => toast.remove(), 300);
+    }, 3000);
+}
+
+function truncate(str, length) {
+    if (str.length <= length) return str;
+    return str.substring(0, length) + '...';
+}
+
+function formatParameterName(name) {
+    // Convert snake_case or kebab-case to Title Case
+    return name
+        .replace(/[_-]/g, ' ')
+        .split(' ')
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ');
+}