A powerful web-based configuration and debugging tool for PepperDash Essentials systems. This React application provides real-time system monitoring, configuration management, and troubleshooting capabilities through an intuitive web interface.

New to the application? Start with the Getting Started Tutorial for a guided introduction.

Need to solve a specific problem? Check the How-to Guides for step-by-step solutions.

Setting up the development environment:

# Install dependencies
npm install

# Create a .env.local file in the project root with your target processor:
# PROGRAM_HOST=https://your-processor-ip
# VITE_PROGRAM_ID=app01

# Start development server
npm run start

The app will be available at http://localhost:5173/cws/debug/.

This project uses the Diataxis framework to provide you with the right information at the right time:

"Take me by the hand and teach me"

• Getting Started Tutorial - Your first steps with the web config app
• Debug Console Tutorial - Master the debug console
• Device Management Tutorial - Device inspection and management

"Show me how to solve this specific problem"

• Troubleshooting Connection Issues
• Filter and Search Debug Messages
• Export and Analyze Configuration
• Monitor System Performance
• Restart and Reload Configuration

"Tell me the facts"

• UI Components Reference - Complete component documentation
• API Endpoints Reference - All available REST endpoints
• Configuration Schema Reference - Configuration file structure
• Device Types Reference - Supported device types and properties
• Log Levels and Filters Reference - Complete logging reference

"Help me understand why and how this works"

• System Architecture - How the web app integrates with Essentials
• Debug Console Design - How real-time debugging works
• Configuration Management - How configuration is handled
• Security Considerations - Security model and best practices

• 🔍 Real-Time Debug Console: Monitor system behavior with live message streaming
• ⚙️ Device Management: Inspect and understand configured devices
• 📄 Configuration Viewer: View and analyze complete system configuration
• 📦 Version Information: Check loaded assemblies and software versions
• 🏷️ Type Registry: Browse supported device types and capabilities
• 🔄 System Control: Restart system and reload configuration safely

Runs the app in development mode via Vite. The page will reload when you make edits. Available at http://localhost:5173/cws/debug/.

Launches the Vitest test runner in interactive watch mode.

Compiles TypeScript and builds the app for production to the dist/ folder with optimized bundles.

Serves the production build locally for inspection before deployment.

Create a .env.local file in the project root (never commit this file):

PROGRAM_HOST=https://your-processor-ip    # Required: Target processor IP
VITE_PROGRAM_ID=app01                     # Optional: Default application slot

Development Prerequisites:

• Node.js 18+
• npm
• Network access to target PepperDash Essentials processor
• Modern web browser

Frontend Stack:

• React 19 with TypeScript
• Redux Toolkit for state management (including WebSocket middleware)
• React Router v7 for navigation
• Bootstrap 5 for UI components
• WebSocket for real-time communication

Integration:

• Connects to PepperDash Essentials processors via HTTPS API at /cws/<appId>/api/
• Uses WebSocket for real-time debug message streaming
• In development, Vite proxies all /cws/ API requests to PROGRAM_HOST
• In production, served as static files from the processor's built-in web server at /cws/debug/

• HTTPS Required: All communication encrypted
• Self-Signed Certificates: Common for internal network devices; must be accepted in the browser before use
• Processor Authentication: Leverages processor's built-in security
• Network-Level Security: Relies on internal network protection

Supported Browsers:

• Chrome 70+
• Firefox 65+
• Safari 12+
• Edge 79+

Required Features:

• WebSocket support for real-time debugging
• Modern JavaScript (ES6+) support
• CSS Grid and Flexbox for responsive layouts

New Users:

1. Start with Getting Started Tutorial
2. Learn Debug Console Basics
3. Explore Device Management

Troubleshooting:

• Check How-to Guides for specific solutions
• Review Connection Troubleshooting for access issues
• Use Performance Monitoring for system health

Advanced Usage:

• Understand System Architecture
• Learn Debug Console Design
• Reference API Documentation

This project follows standard React development practices:

• TypeScript for type safety
• ESLint and Prettier for code formatting
• Component-based architecture with feature organization
• Redux Toolkit for predictable state management

MIT License - see LICENSE file for details.

For Application Issues:

• Check the How-to Guides for common solutions
• Review system requirements and browser compatibility
• Verify network connectivity to target processor

For PepperDash Essentials Questions:

• Consult PepperDash documentation and support resources
• Verify Essentials framework version compatibility
• Check processor configuration and network settings

Built with ❤️ for the PepperDash community. This web application makes PepperDash Essentials systems more accessible and manageable through modern web interfaces.