Improved UI

IDEAS.md

@@ -0,0 +1,20 @@
+
+- center the main title
+
+## Editor area (on the left)
+
+- line numbering
+- syntax highlighting of keywords (green), durations (blue), parameters or qualitative (orange), comments (gray)
+- Undo / Redo buttons ?
+- highlight the line in case of error at verification, with a message indicating the error below the script area
+
+## Robot area (on the right)
+
+- better icons
+
+## Console area (bottom)
+- only one console at the bottom. Simplified messages, output for both script and robot?
+
+## Misc
+
+

rmscript_app/static/app.js

@@ -1,7 +1,6 @@
 // RMScript App - Frontend Application
-// Connects to the settings_app backend for compilation and server-side execution
 
-// API is served from same origin (settings_app)
+// API is served from same origin
 const API_BASE = '';
 
 // Global state
@@ -10,46 +9,98 @@ const state = {
     isExecuting: false
 };
 
-// DOM elements
-const elements = {
-    editor: document.getElementById('editor'),
-    compileStatus: document.getElementById('compileStatus'),
-    robotStatus: document.getElementById('robotStatus'),
-    console: document.getElementById('console'),
-    irDisplay: document.getElementById('irDisplay'),
-    executionInfo: document.getElementById('executionInfo'),
-    executeBtn: document.getElementById('executeBtn')
-};
+// Debounce timer for real-time validation
+let validationTimer = null;
+const VALIDATION_DELAY = 500;
 
-// Example scripts
+// Example scripts with better names
 const examples = {
-    basic: `look left
+    look_around: {
+        name: 'Look around',
+        code: `look left
 wait 1s
 look right
 wait 1s
-look center`,
-
-    complex: `look left
-antenna both up
-wait 1s
-look right
-antenna both down
-wait 0.5s
-look center`,
+look center`
+    },
+
+    nod: {
+        name: 'Nod',
+        code: `look up
+wait 0.3s
+look down
+wait 0.3s
+look up
+wait 0.3s
+look down
+wait 0.3s
+look center`
+    },
 
-    repeat: `repeat 3
+    dance: {
+        name: 'Dance',
+        code: `repeat 3
   look left
-  wait 0.5s
+  antenna both up
+  wait 0.4s
   look right
-  wait 0.5s
-look center`
+  antenna both down
+  wait 0.4s
+look center
+antenna both up`
+    },
+
+    antenna_wave: {
+        name: 'Antenna wave',
+        code: `antenna left up
+wait 0.3s
+antenna right up
+antenna left down
+wait 0.3s
+antenna right down
+antenna left up
+wait 0.3s
+antenna both up`
+    }
 };
 
-// Update compile status UI
+// DOM elements (populated after DOM loads)
+let elements = {};
+
+// Action type to icon mapping
+const ACTION_ICONS = {
+    action: '🔄',
+    wait: '⏳',
+    picture: '📷',
+    sound: '🔊'
+};
+
+function getActionIcon(action) {
+    if (action.type === 'action') {
+        if (action.antennas) return '📡';
+        if (action.head_pose) return '🔄';
+        if (action.body_yaw !== null && action.body_yaw !== undefined) return '↩️';
+        return '🔄';
+    }
+    return ACTION_ICONS[action.type] || '▶️';
+}
+
+// Get editor content
+function getEditorContent() {
+    return elements.editor ? elements.editor.value : '';
+}
+
+// Set editor content
+function setEditorContent(content) {
+    if (elements.editor) {
+        elements.editor.value = content;
+    }
+}
+
+// Update compile status UI (below editor)
 function updateCompileStatus(status, message) {
-    const dot = status === 'success' ? 'green' : status === 'error' ? 'red' : 'gray';
-    elements.compileStatus.className = `status ${status}`;
-    elements.compileStatus.innerHTML = `<span><span class="status-dot ${dot}"></span>${message}</span>`;
+    elements.compileStatus.className = `compile-status ${status}`;
+    elements.compileStatus.querySelector('.status-message').textContent = message;
 }
 
 // Log to console
@@ -66,25 +117,280 @@ function clearConsole() {
     elements.console.innerHTML = '';
 }
 
+// Check if editor has content
+function editorHasContent() {
+    return getEditorContent().trim().length > 0;
+}
+
+// Handle dropdown selection for examples
+function handleExampleSelect(selectElement) {
+    const exampleName = selectElement.value;
+    if (!exampleName) return;
+
+    selectElement.selectedIndex = 0;
+
+    if (editorHasContent()) {
+        if (!confirm(`Load "${examples[exampleName].name}" example? This will replace your current script.`)) {
+            return;
+        }
+    }
+    loadExample(exampleName);
+}
+
 // Load example script
 function loadExample(exampleName) {
-    if (examples[exampleName]) {
-        elements.editor.value = examples[exampleName];
-        log(`Loaded ${exampleName} example`, 'info');
+    const example = examples[exampleName];
+    if (example) {
+        setEditorContent(example.code);
+        log(`Loaded "${example.name}" example`, 'info');
+        scheduleValidation();
     }
 }
 
 // Clear editor
 function clearEditor() {
-    elements.editor.value = '';
+    if (editorHasContent()) {
+        if (!confirm('Clear the editor? This will remove your current script.')) {
+            return;
+        }
+    }
+    setEditorContent('');
     state.currentIR = null;
-    elements.irDisplay.innerHTML = '<div style="color: #999; text-align: center; padding: 20px;">No IR yet. Verify a script first!</div>';
+    elements.irDisplay.innerHTML = '<div style="color: #999; text-align: center; padding: 20px;">No actions yet. Write a script and click Run!</div>';
     updateCompileStatus('idle', 'Ready');
+    hideError();
+    log('Editor cleared', 'info');
+}
+
+// localStorage key for saved scripts
+const STORAGE_KEY = 'rmscript_saved_scripts';
+
+function getSavedScripts() {
+    try {
+        const data = localStorage.getItem(STORAGE_KEY);
+        return data ? JSON.parse(data) : [];
+    } catch {
+        return [];
+    }
+}
+
+function saveSavedScripts(scripts) {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(scripts));
+}
+
+function saveScript() {
+    const source = getEditorContent().trim();
+    if (!source) {
+        log('Cannot save empty script', 'warning');
+        return;
+    }
+
+    const name = prompt('Enter a name for your script:');
+    if (!name || !name.trim()) {
+        return;
+    }
+
+    const scripts = getSavedScripts();
+    const existingIndex = scripts.findIndex(s => s.name === name.trim());
+
+    const scriptData = {
+        name: name.trim(),
+        source: source,
+        savedAt: new Date().toISOString()
+    };
+
+    if (existingIndex >= 0) {
+        if (!confirm(`A script named "${name}" already exists. Overwrite it?`)) {
+            return;
+        }
+        scripts[existingIndex] = scriptData;
+    } else {
+        scripts.unshift(scriptData);
+    }
+
+    saveSavedScripts(scripts);
+    log(`Script saved as "${name}"`, 'success');
+}
+
+function showLoadDialog() {
+    const scripts = getSavedScripts();
+    const listContainer = document.getElementById('savedScriptsList');
+
+    if (scripts.length === 0) {
+        listContainer.innerHTML = '<div class="no-saved-scripts">No saved scripts yet.<br>Use the Save button to save your scripts.</div>';
+    } else {
+        listContainer.innerHTML = scripts.map((script, index) => {
+            const date = new Date(script.savedAt).toLocaleString();
+            return `
+                <div class="saved-script-item" onclick="loadSavedScript(${index})">
+                    <div class="saved-script-info">
+                        <div class="saved-script-name">${escapeHtml(script.name)}</div>
+                        <div class="saved-script-date">Saved: ${date}</div>
+                    </div>
+                    <button class="saved-script-delete" onclick="deleteSavedScript(event, ${index})">Delete</button>
+                </div>
+            `;
+        }).join('');
+    }
+
+    document.getElementById('loadModal').style.display = 'flex';
+}
+
+function hideLoadDialog() {
+    document.getElementById('loadModal').style.display = 'none';
+}
+
+function loadSavedScript(index) {
+    const scripts = getSavedScripts();
+    if (index >= 0 && index < scripts.length) {
+        const script = scripts[index];
+
+        if (editorHasContent()) {
+            if (!confirm(`Load "${script.name}"? This will replace your current script.`)) {
+                return;
+            }
+        }
+
+        setEditorContent(script.source);
+        log(`Loaded "${script.name}"`, 'info');
+        scheduleValidation();
+        hideLoadDialog();
+    }
+}
+
+function deleteSavedScript(event, index) {
+    event.stopPropagation();
+    const scripts = getSavedScripts();
+
+    if (index >= 0 && index < scripts.length) {
+        const script = scripts[index];
+        if (confirm(`Delete "${script.name}"?`)) {
+            scripts.splice(index, 1);
+            saveSavedScripts(scripts);
+            log(`Deleted "${script.name}"`, 'info');
+            showLoadDialog();
+        }
+    }
+}
+
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+// Cheat sheet
+function showCheatSheet() {
+    document.getElementById('cheatSheetModal').style.display = 'flex';
+}
+
+function hideCheatSheet() {
+    document.getElementById('cheatSheetModal').style.display = 'none';
+}
+
+// Browser Sound Feedback using Web Audio API
+let audioContext = null;
+
+function getAudioContext() {
+    if (!audioContext) {
+        audioContext = new (window.AudioContext || window.webkitAudioContext)();
+    }
+    return audioContext;
+}
+
+function playTone(frequency, duration, type = 'sine') {
+    try {
+        const ctx = getAudioContext();
+        const oscillator = ctx.createOscillator();
+        const gainNode = ctx.createGain();
+
+        oscillator.connect(gainNode);
+        gainNode.connect(ctx.destination);
+
+        oscillator.frequency.value = frequency;
+        oscillator.type = type;
+
+        gainNode.gain.setValueAtTime(0.3, ctx.currentTime);
+        gainNode.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + duration);
+
+        oscillator.start(ctx.currentTime);
+        oscillator.stop(ctx.currentTime + duration);
+    } catch (e) {
+        console.log('Audio not available:', e);
+    }
+}
+
+function playStartSound() {
+    playTone(523, 0.1);
+    setTimeout(() => playTone(659, 0.1), 100);
+    setTimeout(() => playTone(784, 0.15), 200);
+}
+
+function playSuccessSound() {
+    playTone(523, 0.2);
+    setTimeout(() => playTone(659, 0.2), 50);
+    setTimeout(() => playTone(784, 0.3), 100);
+}
+
+function playErrorSound() {
+    playTone(400, 0.15);
+    setTimeout(() => playTone(300, 0.2), 150);
+}
+
+// Show error in compile status
+function showError(message, lineNumber) {
+    const prefix = lineNumber ? `Line ${lineNumber}: ` : '';
+    updateCompileStatus('error', prefix + message);
+    elements.editor.classList.add('has-error');
+}
+
+function hideError() {
+    elements.editor.classList.remove('has-error');
 }
 
-// Verify script (syntax and semantics only)
+// Real-time validation
+async function validateRealtime() {
+    const source = getEditorContent().trim();
+
+    if (!source) {
+        updateCompileStatus('idle', 'Ready');
+        hideError();
+        return;
+    }
+
+    try {
+        const response = await fetch(`${API_BASE}/api/verify`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ source })
+        });
+
+        const result = await response.json();
+
+        if (result.success) {
+            updateCompileStatus('success', 'Valid script');
+            hideError();
+        } else {
+            updateCompileStatus('error', 'Invalid script');
+            if (result.errors && result.errors.length > 0) {
+                showError(result.errors[0].message, result.errors[0].line);
+            }
+        }
+    } catch (error) {
+        updateCompileStatus('error', 'Backend error');
+    }
+}
+
+function scheduleValidation() {
+    if (validationTimer) {
+        clearTimeout(validationTimer);
+    }
+    validationTimer = setTimeout(validateRealtime, VALIDATION_DELAY);
+}
+
+// Verify script
 async function verifyScript() {
-    const source = elements.editor.value.trim();
+    const source = getEditorContent().trim();
 
     if (!source) {
         log('Editor is empty', 'warning');
@@ -109,19 +415,23 @@ async function verifyScript() {
             if (result.name) log(`  Name: ${result.name}`, 'info');
             if (result.description) log(`  Description: ${result.description}`, 'info');
 
-            if (result.warnings.length > 0) {
+            if (result.warnings && result.warnings.length > 0) {
                 result.warnings.forEach(w => {
                     log(`  Warning (line ${w.line}): ${w.message}`, 'warning');
                 });
             }
 
             updateCompileStatus('success', 'Valid script');
+            hideError();
         } else {
             log('Verification failed', 'error');
             result.errors.forEach(e => {
                 log(`  Error (line ${e.line}): ${e.message}`, 'error');
             });
             updateCompileStatus('error', 'Invalid script');
+            if (result.errors && result.errors.length > 0) {
+                showError(result.errors[0].message, result.errors[0].line);
+            }
         }
     } catch (error) {
         log(`Backend error: ${error.message}`, 'error');
@@ -131,7 +441,7 @@ async function verifyScript() {
 
 // Compile script to IR
 async function compileScript() {
-    const source = elements.editor.value.trim();
+    const source = getEditorContent().trim();
 
     if (!source) {
         log('Editor is empty', 'warning');
@@ -153,7 +463,7 @@ async function compileScript() {
         if (result.success) {
             log(`Compiled ${result.ir.length} actions`, 'success');
 
-            if (result.warnings.length > 0) {
+            if (result.warnings && result.warnings.length > 0) {
                 result.warnings.forEach(w => {
                     log(`  Warning (line ${w.line}): ${w.message}`, 'warning');
                 });
@@ -179,14 +489,16 @@ async function compileScript() {
 }
 
 // Display IR in the UI
-function displayIR(ir) {
+function displayIR(ir, currentActionIndex = -1) {
     if (!ir || ir.length === 0) {
-        elements.irDisplay.innerHTML = '<div style="color: #999; text-align: center; padding: 20px;">No actions</div>';
+        elements.irDisplay.innerHTML = '<div style="color: #999; text-align: center; padding: 20px;">No actions yet. Write a script and click Run!</div>';
         return;
     }
 
     const html = ir.map((action, idx) => {
         let details = '';
+        const icon = getActionIcon(action);
+        const isCurrent = idx === currentActionIndex;
 
         if (action.type === 'action') {
             details = `Duration: ${action.duration}s`;
@@ -204,9 +516,12 @@ function displayIR(ir) {
         }
 
         return `
-            <div class="ir-action">
-                <div class="ir-action-type">${idx + 1}. ${action.type.toUpperCase()}</div>
-                <div class="ir-action-details">${details}</div>
+            <div class="ir-action${isCurrent ? ' current' : ''}" data-action-index="${idx}">
+                <span class="ir-action-icon">${icon}</span>
+                <div class="ir-action-content">
+                    <div class="ir-action-type">${idx + 1}. ${action.type.toUpperCase()}</div>
+                    <div class="ir-action-details">${details}</div>
+                </div>
             </div>
         `;
     }).join('');
@@ -214,25 +529,77 @@ function displayIR(ir) {
     elements.irDisplay.innerHTML = html;
 }
 
-// Execute script on robot (server-side via SDK)
+// Update timeline status
+function updateTimeline(status, message, icon = '🤖') {
+    const timeline = elements.executionTimeline;
+    if (!timeline) return;
+
+    timeline.innerHTML = `
+        <div class="timeline-status ${status}">
+            <span class="timeline-icon">${icon}</span>
+            <span class="timeline-text">${message}</span>
+        </div>
+    `;
+}
+
+// Helper to describe an action for timeline display
+function describeAction(action) {
+    if (action.type === 'wait') return 'Wait';
+    if (action.type === 'picture') return 'Take picture';
+    if (action.type === 'sound') return `Play sound`;
+    if (action.type === 'action') {
+        if (action.head_pose) return 'Head movement';
+        if (action.antennas) return 'Antenna';
+        if (action.body_yaw !== null && action.body_yaw !== undefined) return 'Turn body';
+        return 'Movement';
+    }
+    return action.type;
+}
+
+// Sleep helper
+function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+// Simulate execution progress (runs in parallel with actual execution)
+async function simulateProgress(ir) {
+    for (let i = 0; i < ir.length; i++) {
+        if (!state.isExecuting) break;  // Stop if execution ended
+
+        displayIR(ir, i);  // Highlight current action
+        const desc = describeAction(ir[i]);
+        updateTimeline('running', `Step ${i + 1}/${ir.length}: ${desc}`, '▶️');
+
+        // Wait for action duration
+        const duration = ir[i].duration || 0.5;
+        await sleep(duration * 1000);
+    }
+}
+
+// Execute script on robot
 async function executeScript() {
     if (state.isExecuting) {
         log('Already executing a script', 'warning');
         return;
     }
 
-    // Compile the current editor content
     const ir = await compileScript();
     if (!ir) {
         log('Cannot execute - compilation failed', 'error');
+        updateTimeline('error', 'Compilation failed', '❌');
         return;
     }
 
-    // Execute via server-side SDK
     state.isExecuting = true;
     elements.executeBtn.disabled = true;
-    clearExecutionInfo();
-    logExecution('Sending to robot...', 'info');
+    elements.executeBtn.classList.add('running');
+    elements.executeBtn.textContent = 'Running...';
+    clearConsole();
+    log('Sending to robot...', 'info');
+    playStartSound();
+
+    // Start progress simulation in parallel with actual execution
+    const progressPromise = simulateProgress(ir);
 
     try {
         const response = await fetch(`${API_BASE}/api/execute`, {
@@ -243,40 +610,78 @@ async function executeScript() {
 
         const result = await response.json();
 
+        // Wait for progress simulation to complete
+        await progressPromise;
+
         if (result.success) {
-            logExecution(`Execution complete! ${result.actions_executed} actions executed.`, 'success');
+            log(`Done! ${result.actions_executed} actions executed.`, 'success');
+            updateTimeline('idle', 'Robot connected. Ready to run!', '🤖');
+            displayIR(ir, -1);  // Clear highlighting
+            playSuccessSound();
         } else {
-            logExecution(`Execution failed: ${result.message}`, 'error');
+            log(`Execution failed: ${result.message}`, 'error');
+            updateTimeline('error', `Failed: ${result.message}`, '❌');
+            displayIR(ir, -1);
+            playErrorSound();
         }
     } catch (error) {
-        logExecution(`Execution error: ${error.message}`, 'error');
+        log(`Execution error: ${error.message}`, 'error');
+        updateTimeline('error', `Error: ${error.message}`, '❌');
+        displayIR(ir, -1);
+        playErrorSound();
     } finally {
         state.isExecuting = false;
         elements.executeBtn.disabled = false;
+        elements.executeBtn.classList.remove('running');
+        elements.executeBtn.textContent = 'Run on robot';
     }
 }
 
-// Log execution info
+// Log execution info (now uses main console)
 function logExecution(message, type = 'info') {
-    const line = document.createElement('div');
-    line.className = `console-line ${type}`;
-    line.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
-    elements.executionInfo.appendChild(line);
-    elements.executionInfo.scrollTop = elements.executionInfo.scrollHeight;
-}
-
-// Clear execution info
-function clearExecutionInfo() {
-    elements.executionInfo.innerHTML = '';
+    log(message, type);
 }
 
 // Initialize application
 function init() {
     console.log('Initializing RMScript App');
-    loadExample('basic');
+
+    // Get DOM elements
+    elements = {
+        editor: document.getElementById('editor'),
+        compileStatus: document.getElementById('compileStatus'),
+        console: document.getElementById('console'),
+        irDisplay: document.getElementById('irDisplay'),
+        executeBtn: document.getElementById('executeBtn'),
+        executionTimeline: document.getElementById('executionTimeline')
+    };
+
+    // Set up real-time validation on editor input
+    elements.editor.addEventListener('input', scheduleValidation);
+
+    // Load initial example
+    setEditorContent(examples.look_around.code);
+    log('Loaded "Look around" example', 'info');
+
+    // Trigger initial validation
+    setTimeout(validateRealtime, 100);
+
     console.log('RMScript App ready');
 }
 
+// Make functions available globally for onclick handlers
+window.handleExampleSelect = handleExampleSelect;
+window.clearEditor = clearEditor;
+window.saveScript = saveScript;
+window.showLoadDialog = showLoadDialog;
+window.hideLoadDialog = hideLoadDialog;
+window.loadSavedScript = loadSavedScript;
+window.deleteSavedScript = deleteSavedScript;
+window.showCheatSheet = showCheatSheet;
+window.hideCheatSheet = hideCheatSheet;
+window.verifyScript = verifyScript;
+window.executeScript = executeScript;
+
 // Start when DOM is loaded
 if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', init);

rmscript_app/static/index.html

@@ -3,62 +3,145 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>RMScript App</title>
+    <title>Program your Reachy Mini Robot</title>
     <link rel="stylesheet" href="/static/style.css">
 </head>
 <body>
+    <!-- Page Header -->
+    <header class="page-header">
+        <span class="header-icon">🤖</span>
+        <h1>Program your Reachy Mini Robot</h1>
+    </header>
+
     <div class="container">
         <!-- Left Panel: Editor -->
         <div class="panel editor-panel">
-            <h1>RMScript Editor</h1>
-            <p class="subtitle">Write and execute rmscript on your Reachy Mini</p>
-
-            <div id="compileStatus" class="status idle">
-                <span><span class="status-dot gray"></span>Ready</span>
-            </div>
-
-            <div class="section-title">Examples</div>
-            <div class="example-buttons">
-                <button class="secondary" onclick="loadExample('basic')">Basic</button>
-                <button class="secondary" onclick="loadExample('complex')">Complex</button>
-                <button class="secondary" onclick="loadExample('repeat')">Repeat</button>
-                <button class="secondary" onclick="clearEditor()">Clear</button>
+            <div class="editor-toolbar">
+                <div class="toolbar-left">
+                    <button class="btn-save small" onclick="saveScript()">Save</button>
+                    <button class="btn-load small" onclick="showLoadDialog()">Load</button>
+                    <button class="btn-clear small" onclick="clearEditor()">Clear</button>
+                    <select id="examplesDropdown" class="examples-dropdown" onchange="handleExampleSelect(this)">
+                        <option value="" disabled selected>Examples...</option>
+                        <option value="look_around">Look around</option>
+                        <option value="nod">Nod</option>
+                        <option value="dance">Dance</option>
+                        <option value="antenna_wave">Antenna wave</option>
+                    </select>
+                </div>
+                <div class="toolbar-right">
+                    <button class="btn-help small" onclick="showCheatSheet()">Help</button>
+                </div>
             </div>
 
-            <textarea id="editor" class="editor" placeholder='look left
+            <textarea id="editor" class="editor" placeholder="look left
 wait 1s
-look right'></textarea>
+look right" spellcheck="false"></textarea>
+
+            <div id="compileStatus" class="compile-status idle">
+                <span class="status-dot"></span>
+                <span class="status-message">Ready</span>
+            </div>
 
             <div class="button-group">
-                <button onclick="verifyScript()">Verify</button>
-                <button id="executeBtn" onclick="executeScript()">Execute</button>
+                <button id="executeBtn" onclick="executeScript()">Run on robot</button>
             </div>
 
             <div class="section-title">Console</div>
             <div id="console" class="console">
-                <div class="console-line info">Ready. Write some rmscript and click Verify!</div>
+                <div class="console-line info">Ready. Write a script and click Run!</div>
             </div>
         </div>
 
-        <!-- Right Panel: Execution Info -->
+        <!-- Right Panel: Robot Control -->
         <div class="panel">
-            <h1>Robot Control</h1>
-            <p class="subtitle">Scripts execute via SDK with proper timing</p>
+            <h2>Robot Control</h2>
 
-            <div id="robotStatus" class="status connected">
-                <span><span class="status-dot green"></span>App Running</span>
+            <div id="executionTimeline" class="execution-timeline">
+                <div class="timeline-status idle">
+                    <span class="timeline-icon">🤖</span>
+                    <span class="timeline-text">Robot connected. Ready to run!</span>
+                </div>
             </div>
 
-            <div class="section-title">Compiled IR</div>
+            <div class="section-title">Robot's action list</div>
             <div id="irDisplay" class="ir-display">
                 <div style="color: #999; text-align: center; padding: 20px;">
-                    No IR yet. Verify a script first!
+                    No actions yet. Write a script and click Run!
                 </div>
             </div>
 
-            <div class="section-title" style="margin-top: 20px;">Execution Info</div>
-            <div id="executionInfo" class="console" style="max-height: 150px;">
-                <div class="console-line info">Ready to execute scripts</div>
+        </div>
+    </div>
+
+    <!-- Load Script Modal -->
+    <div id="loadModal" class="modal" style="display: none;">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3>Load Saved Script</h3>
+                <button class="modal-close" onclick="hideLoadDialog()">&times;</button>
+            </div>
+            <div class="modal-body">
+                <div id="savedScriptsList"></div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Cheat Sheet Modal -->
+    <div id="cheatSheetModal" class="modal" style="display: none;">
+        <div class="modal-content cheat-sheet-modal">
+            <div class="modal-header">
+                <h3>RMScript Commands</h3>
+                <button class="modal-close" onclick="hideCheatSheet()">&times;</button>
+            </div>
+            <div class="modal-body cheat-sheet-body">
+                <div class="cheat-section">
+                    <h4>Head Movement</h4>
+                    <code>look left</code> <code>look right</code> <code>look up</code> <code>look down</code> <code>look center</code>
+                    <p class="cheat-note">Add angle: <code>look left 45</code> or use words: <code>look left tiny</code></p>
+                </div>
+
+                <div class="cheat-section">
+                    <h4>Body Rotation</h4>
+                    <code>turn left</code> <code>turn right</code> <code>turn center</code>
+                </div>
+
+                <div class="cheat-section">
+                    <h4>Antennas</h4>
+                    <code>antenna both up</code> <code>antenna left down</code> <code>antenna right up</code>
+                    <p class="cheat-note">Directions: up, down, left, right</p>
+                </div>
+
+                <div class="cheat-section">
+                    <h4>Timing</h4>
+                    <code>wait 1s</code> <code>wait 0.5s</code>
+                    <p class="cheat-note">Duration after commands: <code>look left fast</code> <code>look left slow</code></p>
+                </div>
+
+                <div class="cheat-section">
+                    <h4>Repeat</h4>
+                    <pre>repeat 3
+  look left
+  wait 0.5s
+  look right</pre>
+                    <p class="cheat-note">Indent commands inside repeat blocks</p>
+                </div>
+
+                <div class="cheat-section">
+                    <h4>Combine with "and"</h4>
+                    <code>look left and antenna both up</code>
+                    <p class="cheat-note">Movements happen simultaneously</p>
+                </div>
+
+                <div class="cheat-section">
+                    <h4>Strength Words</h4>
+                    <code>tiny</code> <code>small</code> <code>medium</code> <code>large</code> <code>maximum</code>
+                </div>
+
+                <div class="cheat-section">
+                    <h4>Speed Words</h4>
+                    <code>superfast</code> <code>fast</code> <code>slow</code> <code>superslow</code>
+                </div>
             </div>
         </div>
     </div>

rmscript_app/static/style.css

@@ -11,6 +11,26 @@ body {
     padding: 20px;
 }
 
+/* Page Header */
+.page-header {
+    max-width: 1400px;
+    margin: 0 auto 20px auto;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.page-header h1 {
+    color: white;
+    font-size: 28px;
+    font-weight: 700;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.header-icon {
+    font-size: 32px;
+}
+
 .container {
     max-width: 1400px;
     margin: 0 auto;
@@ -43,78 +63,118 @@ h1 {
     font-size: 14px;
 }
 
-.status {
-    padding: 12px;
+/* Compile Status (below editor) */
+.compile-status {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 12px;
     border-radius: 8px;
     margin-bottom: 15px;
     font-size: 14px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
 }
 
-.status.idle {
+.compile-status.idle {
     background: #f5f5f5;
     color: #666;
 }
 
-.status.success {
-    background: #d4edda;
-    color: #155724;
-}
-
-.status.error {
-    background: #f8d7da;
-    color: #721c24;
+.compile-status.idle .status-dot {
+    background: #999;
 }
 
-.status.connected {
+.compile-status.success {
     background: #d4edda;
     color: #155724;
 }
 
-.status.disconnected {
+.compile-status.success .status-dot {
+    background: #28a745;
+    box-shadow: 0 0 8px #28a745;
+}
+
+.compile-status.error {
     background: #f8d7da;
     color: #721c24;
 }
 
+.compile-status.error .status-dot {
+    background: #dc3545;
+}
+
 .status-dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
-    margin-right: 8px;
-    display: inline-block;
-}
-
-.status-dot.green {
-    background: #28a745;
-    box-shadow: 0 0 10px #28a745;
-}
-
-.status-dot.red {
-    background: #dc3545;
-}
-
-.status-dot.gray {
-    background: #999;
+    flex-shrink: 0;
 }
 
+/* Editor Textarea */
 .editor {
     width: 100%;
-    min-height: 400px;
+    height: 350px;
+    min-height: 350px;
+    max-height: 350px;
     padding: 15px;
     font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
-    font-size: 14px;
+    font-size: 16px;
     border: 2px solid #e0e0e0;
     border-radius: 8px;
-    resize: vertical;
+    resize: none;
     margin-bottom: 15px;
-    line-height: 1.5;
+    line-height: 1.6;
+    background: #fafafa;
+    color: #333;
 }
 
 .editor:focus {
     outline: none;
     border-color: #667eea;
+    background: white;
+}
+
+.editor.has-error {
+    border-color: #dc3545;
+}
+
+/* Editor Toolbar */
+.editor-toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+}
+
+.toolbar-left {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+.toolbar-right {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+/* Examples Dropdown */
+.examples-dropdown {
+    padding: 8px 12px;
+    border: 2px solid #e0e0e0;
+    border-radius: 8px;
+    font-size: 14px;
+    background: white;
+    cursor: pointer;
+    min-width: 160px;
+}
+
+.examples-dropdown:hover {
+    border-color: #667eea;
+}
+
+.examples-dropdown:focus {
+    outline: none;
+    border-color: #667eea;
 }
 
 .button-group {
@@ -167,6 +227,47 @@ button.danger:hover:not(:disabled) {
     background: #c82333;
 }
 
+button.small {
+    flex: 0 1 auto;
+    padding: 8px 16px;
+    font-size: 12px;
+}
+
+/* Toolbar button colors */
+button.btn-save {
+    background: #28a745;
+}
+
+button.btn-save:hover:not(:disabled) {
+    background: #218838;
+}
+
+button.btn-load {
+    background: #dc3545;
+}
+
+button.btn-load:hover:not(:disabled) {
+    background: #c82333;
+}
+
+button.btn-clear {
+    background: #e0e0e0;
+    color: #333;
+}
+
+button.btn-clear:hover:not(:disabled) {
+    background: #d0d0d0;
+}
+
+button.btn-help {
+    background: #ffc107;
+    color: #333;
+}
+
+button.btn-help:hover:not(:disabled) {
+    background: #e0a800;
+}
+
 .console {
     background: #1e1e1e;
     color: #d4d4d4;
@@ -208,24 +309,11 @@ button.danger:hover:not(:disabled) {
     letter-spacing: 0.5px;
 }
 
-.example-buttons {
-    display: flex;
-    gap: 8px;
-    margin-bottom: 15px;
-    flex-wrap: wrap;
-}
-
-.example-buttons button {
-    flex: 0 1 auto;
-    padding: 8px 16px;
-    font-size: 12px;
-}
-
 .ir-display {
     background: #f8f9fa;
-    padding: 15px;
+    padding: 10px;
     border-radius: 8px;
-    max-height: 300px;
+    max-height: 500px;
     overflow-y: auto;
     font-size: 13px;
     margin-top: 15px;
@@ -233,8 +321,8 @@ button.danger:hover:not(:disabled) {
 
 .ir-action {
     background: white;
-    padding: 10px;
-    margin-bottom: 8px;
+    padding: 6px 10px;
+    margin-bottom: 4px;
     border-radius: 4px;
     border-left: 4px solid #667eea;
 }
@@ -242,11 +330,281 @@ button.danger:hover:not(:disabled) {
 .ir-action-type {
     font-weight: 600;
     color: #667eea;
-    margin-bottom: 4px;
+    margin-bottom: 2px;
+    font-size: 12px;
 }
 
 .ir-action-details {
+    font-size: 11px;
+    color: #666;
+    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+}
+
+/* Modal Styles */
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.modal-content {
+    background: white;
+    border-radius: 12px;
+    width: 90%;
+    max-width: 500px;
+    max-height: 80vh;
+    overflow: hidden;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+.modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+.modal-header h3 {
+    margin: 0;
+    color: #333;
+}
+
+.modal-close {
+    background: none;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+    color: #666;
+    padding: 0;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+}
+
+.modal-close:hover {
+    color: #333;
+    background: #f0f0f0;
+    border-radius: 4px;
+    transform: none;
+    box-shadow: none;
+}
+
+.modal-body {
+    padding: 20px;
+    max-height: 60vh;
+    overflow-y: auto;
+}
+
+/* Saved Scripts List */
+.saved-script-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    margin-bottom: 8px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.saved-script-item:hover {
+    background: #f5f5f5;
+    border-color: #667eea;
+}
+
+.saved-script-info {
+    flex: 1;
+}
+
+.saved-script-name {
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 4px;
+}
+
+.saved-script-date {
     font-size: 12px;
     color: #666;
+}
+
+.saved-script-delete {
+    background: #dc3545;
+    color: white;
+    border: none;
+    padding: 6px 12px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 12px;
+    flex: none;
+}
+
+.saved-script-delete:hover {
+    background: #c82333;
+    transform: none;
+    box-shadow: none;
+}
+
+.no-saved-scripts {
+    text-align: center;
+    color: #666;
+    padding: 40px 20px;
+}
+
+/* Execution Timeline */
+.execution-timeline {
+    margin-bottom: 20px;
+}
+
+.timeline-status {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 15px;
+    border-radius: 8px;
+    font-size: 15px;
+    transition: all 0.3s;
+}
+
+.timeline-status.idle {
+    background: #f5f5f5;
+    color: #666;
+}
+
+.timeline-status.running {
+    background: #fff3cd;
+    color: #856404;
+    animation: pulse 1.5s infinite;
+}
+
+.timeline-status.done {
+    background: #d4edda;
+    color: #155724;
+}
+
+.timeline-status.error {
+    background: #f8d7da;
+    color: #721c24;
+}
+
+.timeline-icon {
+    font-size: 24px;
+}
+
+.timeline-text {
+    flex: 1;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.7; }
+}
+
+/* Running Button Animation */
+button.running {
+    position: relative;
+    background: #28a745 !important;
+}
+
+button.running::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+    animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+}
+
+/* Action Icons in IR Display */
+.ir-action {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+}
+
+.ir-action-icon {
+    font-size: 16px;
+    min-width: 24px;
+    text-align: center;
+}
+
+.ir-action-content {
+    flex: 1;
+}
+
+.ir-action.current {
+    background: #fff3cd;
+    border-left-color: #ffc107;
+}
+
+/* Cheat Sheet Modal */
+.cheat-sheet-modal {
+    max-width: 600px;
+}
+
+.cheat-sheet-body {
+    max-height: 70vh;
+}
+
+.cheat-section {
+    margin-bottom: 20px;
+    padding-bottom: 15px;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+.cheat-section:last-child {
+    border-bottom: none;
+    margin-bottom: 0;
+}
+
+.cheat-section h4 {
+    color: #667eea;
+    margin-bottom: 8px;
+    font-size: 14px;
+}
+
+.cheat-section code {
+    display: inline-block;
+    background: #f5f5f5;
+    padding: 4px 8px;
+    border-radius: 4px;
     font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+    font-size: 13px;
+    margin: 2px 4px 2px 0;
+    color: #333;
+}
+
+.cheat-section pre {
+    background: #f5f5f5;
+    padding: 10px;
+    border-radius: 4px;
+    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+    font-size: 13px;
+    margin: 8px 0;
+    overflow-x: auto;
+}
+
+.cheat-note {
+    font-size: 12px;
+    color: #666;
+    margin-top: 6px;
+    margin-bottom: 0;
 }