Renderer Processes

Overview

The renderer processes in SmartAdmin handle all user interface components and interactions. Built on Electron's renderer architecture, these processes provide secure, sandboxed environments for different application features while maintaining communication with the main process through IPC channels.

---

Renderer Architecture

Process Structure

Renderer Processes/
├── Main Chat Interface (index.html/js)
├── Settings Panel (settings.html/js)
├── Action Script Manager (actionScript.html/js)
├── User Login (login.html/js)
├── Admin Dashboard (dashboard.html/js)
├── Splash Screen (splashScreen.html)
└── Notification Window (notification.html)

Security Model

• Context Isolation: Disabled (development mode)
• Node Integration: Enabled for convenience
• Preload Scripts: Secure API bridges
• CSP: Content Security Policy enforcement

---

1. Main Chat Interface (src/pages/index.html/js/css)

Purpose

Primary AI chat interface providing conversational AI interaction with RAG enhancement.

Key Features

Chat Management

// Message handling
async function sendMessage(message) {
    const response = await window.electronAPI.sendMessage(message);
    if (response.success) {
        displayMessage(response.response, 'ai');
    }
}

// History management
function clearChatHistory() {
    chatContainer.innerHTML = '';
    window.electronAPI.clearChatHistory();
}

UI Components

• Message Input: Multi-line text area with send button
• Chat Display: Scrollable message history with user/AI differentiation
• Action Buttons: Clear history, settings, action scripts
• Status Indicators: AI initialization status, connection state

Message Rendering

function displayMessage(content, sender) {
    const messageDiv = document.createElement('div');
    messageDiv.className = `message ${sender}-message`;
    
    // Markdown rendering for AI responses
    if (sender === 'ai') {
        messageDiv.innerHTML = marked.parse(content);
    } else {
        messageDiv.textContent = content;
    }
    
    chatContainer.appendChild(messageDiv);
    scrollToBottom();
}

Keyboard Shortcuts

• Enter: Send message
• Shift+Enter: New line
• Ctrl+L: Clear chat history

State Management

let isAIInitialized = false;
let currentUser = null;
let chatHistory = [];

---

2. Settings Panel (src/pages/settings.html/js/css)

Purpose

Comprehensive configuration management for all application settings.

Settings Categories

AI Configuration

// AI Provider Selection
const aiProviders = ['localLLM', 'openrouter', 'openai'];

// Model Settings
const modelSettings = {
    temperature: 0.7,
    maxTokens: 512,
    topK: 20,
    topP: 0.7,
    repeatPenalty: 1.1
};

Database Settings

• PostgreSQL connection parameters
• Connection testing functionality
• Backup/restore configurations

Automation Settings

• Browser preferences
• Action script directories
• Playwright configurations

User Interface

• Theme selection
• Language preferences
• Notification settings

Settings Persistence

async function saveSettings() {
    const formData = new FormData(settingsForm);
    const settings = Object.fromEntries(formData);
    
    const result = await window.electronAPI.saveSettings(settings);
    if (result.success) {
        showNotification('Settings saved successfully', 'success');
    }
}

Validation System

function validateSettings(settings) {
    const errors = [];
    
    // API key validation
    if (settings.agentType === 'openrouter' && !settings.openRouterApiKey) {
        errors.push('OpenRouter API key is required');
    }
    
    // Path validation
    if (settings.llamaModelPath && !await window.electronAPI.validatePath(settings.llamaModelPath)) {
        errors.push('Invalid model path');
    }
    
    return errors;
}

---

3. Action Script Manager (src/pages/actionScript.html/js/css)

Purpose

Browser automation script creation, editing, and management interface.

Core Features

Script Management

// Load available actions
async function loadActions() {
    const result = await window.electronAPI.getActions();
    if (result.success) {
        displayActions(result.actions);
    }
}

// Create new action
async function createNewAction(url, filename, scriptDetails) {
    const result = await window.electronAPI.createActions({
        url,
        filename,
        scriptDetails
    });
    
    if (result.success) {
        refreshActionList();
    }
}

Script Editor

// Code editing interface
function initializeCodeEditor() {
    const editor = CodeMirror.fromTextArea(codeTextarea, {
        mode: 'javascript',
        lineNumbers: true,
        theme: 'monokai',
        autoCloseBrackets: true,
        matchBrackets: true
    });
    
    return editor;
}

// Save script changes
async function saveActionCode(filename, code) {
    const result = await window.electronAPI.updateActionCode({
        filename,
        code
    });
    
    if (result.success) {
        showNotification('Script saved', 'success');
    }
}

Parameter Management

// Extract parameters from script
async function extractParameters(filename) {
    const result = await window.electronAPI.extractActionParameters({ filename });
    if (result.success) {
        displayParameterForm(result.parameters);
    }
}

// Parameter form generation
function generateParameterInputs(parameters) {
    return parameters.map(param => `
        <div class="parameter-input">
            <label>${param.name}</label>
            <input type="${param.type}" 
                   name="${param.name}" 
                   placeholder="${param.description}"
                   ${param.required ? 'required' : ''}>
        </div>
    `).join('');
}

Action Execution

// Run automation script
async function runAction(actionData, parameters) {
    showExecutionProgress();
    
    const result = await window.electronAPI.runAction({
        filename: actionData.filename,
        action: actionData,
        parameters
    });
    
    hideExecutionProgress();
    
    if (result.success) {
        showNotification('Action completed successfully', 'success');
    } else {
        showNotification(`Action failed: ${result.error}`, 'error');
    }
}

UI Components

• Action List: Grid view of available scripts
• Code Editor: Syntax-highlighted JavaScript editor
• Parameter Form: Dynamic form generation for script parameters
• Execution Monitor: Progress tracking for running scripts
• Template Gallery: Pre-built action templates

---

4. User Authentication (src/pages/login.html/js/css)

Purpose

User authentication interface with session management.

Authentication Flow

// Login process
async function handleLogin(event) {
    event.preventDefault();
    
    const loginData = {
        username: usernameInput.value,
        password: passwordInput.value,
        method: loginMethodSelect.value
    };
    
    showLoadingSpinner();
    
    const result = await window.electronAPI.uparcelLogin(loginData);
    
    hideLoadingSpinner();
    
    if (result.success) {
        window.close(); // Close login window
    } else {
        showError(result.message);
    }
}

Session Management

// Check existing session
async function checkExistingSession() {
    const session = await window.electronAPI.readUserSession();
    if (session && session.isValid) {
        // Auto-close if already authenticated
        window.close();
    }
}

UI Features

• Login Form: Username/password with method selection
• Loading States: Progress indicators during authentication
• Error Display: User-friendly error messages
• Remember Me: Session persistence options

5. Admin Dashboard (src/pages/dashboard.html/js/css)

Purpose

Administrative interface for user management and system monitoring.

Dashboard Components

User Management

// User list display
function displayUsers(users) {
    const userList = users.map(user => `
        <tr>
            <td>${user.username}</td>
            <td>${user.email}</td>
            <td>${user.status}</td>
            <td>${user.lastLogin}</td>
            <td>
                <button onclick="editUser('${user.id}')">Edit</button>
                <button onclick="banUser('${user.id}')">Ban</button>
            </td>
        </tr>
    `).join('');
    
    userTableBody.innerHTML = userList;
}

System Monitoring

// Real-time metrics
function updateSystemMetrics() {
    setInterval(async () => {
        const metrics = await window.electronAPI.getSystemMetrics();
        updateMetricsDisplay(metrics);
    }, 5000);
}

Administrative Actions

• User management (create, edit, ban, delete)
• System configuration
• Usage analytics
• Backup management

---

6. Notification System (src/pages/notification.html)

Purpose

System-wide notification display with customizable appearance.

Display Management

// Show notification
function showNotification(message, type, duration = 5000) {
    const notification = createNotificationElement(message, type);
    document.body.appendChild(notification);
    
    // Auto-hide after duration
    setTimeout(() => {
        hideNotification(notification);
    }, duration);
}

---

Common UI Patterns

Loading States

function showLoadingSpinner() {
    const spinner = document.createElement('div');
    spinner.className = 'loading-spinner';
    spinner.innerHTML = '<div class="spinner"></div>';
    document.body.appendChild(spinner);
}

function hideLoadingSpinner() {
    const spinner = document.querySelector('.loading-spinner');
    if (spinner) spinner.remove();
}

Error Handling

function handleError(error, context) {
    console.error(`Error in ${context}:`, error);
    showNotification(`An error occurred: ${error.message}`, 'error');
}

Form Validation

function validateForm(formElement) {
    const inputs = formElement.querySelectorAll('input[required]');
    const errors = [];
    
    inputs.forEach(input => {
        if (!input.value.trim()) {
            errors.push(`${input.name} is required`);
        }
    });
    
    return errors;
}

---

Styling Architecture

CSS Structure

/* Global styles */
:root {
    --primary-color: #007acc;
    --secondary-color: #f5f5f5;
    --error-color: #f44336;
    --success-color: #4caf50;
    --border-radius: 8px;
    --box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Component-specific styles */
.chat-container {
    height: 400px;
    overflow-y: auto;
    border: 1px solid var(--secondary-color);
    border-radius: var(--border-radius);
}

.message {
    padding: 10px;
    margin: 5px 0;
    border-radius: var(--border-radius);
}

.user-message {
    background-color: #e3f2fd;
    margin-left: 20%;
}

.ai-message {
    background-color: #f5f5f5;
    margin-right: 20%;
}

Responsive Design

/* Mobile-first approach */
@media (max-width: 768px) {
    .chat-container {
        height: 300px;
    }
    
    .message {
        margin-left: 0;
        margin-right: 0;
    }
}

---