Add "Clear Terminal" button to Web UI

- Added "Clear Terminal" button to the controls in `index.html`.
- Implemented `clearTerminalBtn.onclick` handler in `terminal.js`.
- The handler clears the terminal content but preserves the `robot-art` ASCII art element.
- Verified functionality using a Playwright script.
- Updated README.md roadmap to mark the task as complete.

Author: google-labs-jules[bot]

README.md

@@ -368,7 +368,7 @@ This section outlines the major feature enhancements and maintenance tasks plann
 - **Monitoring and Observability:** Deploy a monitoring stack like Prometheus and Grafana to collect and visualize metrics from Nomad, Consul, and the application itself.
 - **Web UI/UX Improvements:**
   - Replace ASCII art with a more dynamic animated character.
-  - Add a "Clear Terminal" button to the UI.
+  - [x] Add a "Clear Terminal" button to the UI.
   - Improve the status display to be more readable than a raw JSON dump.
 - **Bolster Automated Testing:**
   - Implement Ansible Molecule tests for critical roles.

ansible/roles/pipecatapp/files/static/index.html

@@ -106,6 +106,7 @@ <h1>Mission Control <span id="status-light"></span></h1>
         <input type="text" id="save-name-input" placeholder="Enter state name...">
         <button id="save-state-btn">Save State</button>
         <button id="load-state-btn">Load State</button>
+        <button id="clear-terminal-btn">Clear Terminal</button>
     </div>
     <div id="terminal">
         <pre id="robot-art" style="text-align: center; font-family: 'Courier New', Courier, monospace;"></pre>

ansible/roles/pipecatapp/files/static/terminal.js

@@ -15,6 +15,7 @@ document.addEventListener("DOMContentLoaded", function() {
     const saveNameInput = document.getElementById("save-name-input");
     const saveStateBtn = document.getElementById("save-state-btn");
     const loadStateBtn = document.getElementById("load-state-btn");
+    const clearTerminalBtn = document.getElementById("clear-terminal-btn");
     const statusLight = document.getElementById("status-light");
     const testAndEvaluationBtn = document.getElementById("test-and-evaluation-btn");
     const statusDisplay = document.getElementById("status-display");
@@ -155,6 +156,19 @@ document.addEventListener("DOMContentLoaded", function() {
         .catch(error => logToTerminal(`Error loading state: ${error}`, "error"));
     };
 
+    clearTerminalBtn.onclick = function() {
+        // Find the robot art element within the terminal
+        const robotArt = document.getElementById("robot-art");
+
+        // Clear all content of the terminal
+        terminal.innerHTML = '';
+
+        // Re-append the robot art if it was found
+        if (robotArt) {
+            terminal.appendChild(robotArt);
+        }
+    };
+
     ws.onmessage = function(event) {
         try {
             const msg = JSON.parse(event.data);