auto open log panel on errors

Author: vk2seb

src/index.html

@@ -21,10 +21,7 @@
     </div>
 
    <div class="flash-loading" id="flash-loading">
-       <div class="loading-text">
-           Flash operation in progress...<br>
-           <span style="font-size: 16px; opacity: 0.7;">See log panel →</span>
-       </div>
+       <div class="loading-text"></div>
        <div class="spinner"></div>
        <div class="progress-log" id="progress-log">
            <div class="progress-log-content" id="progress-log-content"></div>

src/js/browse-bitstreams.js

@@ -75,6 +75,10 @@ export async function openBrowseDialog(slotId) {
     } catch (error) {
         console.error('Failed to load bitstreams:', error);
         listContainer.innerHTML = `<div class="loading">Error loading bitstreams: ${error.message}</div>`;
+        
+        // Also log the error and open log panel
+        const { showGlobalMessage } = await import('./ui-helpers.js');
+        showGlobalMessage(`Failed to load bitstreams: ${error.message}`, 'error');
     }
 }
 

src/js/device-connection.js

@@ -73,8 +73,8 @@ export async function scanForTiliqua() {
             errorMsg = "WebUSB is not supported in this browser";
             additionalInfo = "Please use Chrome, Edge, or another Chromium-based browser. WebUSB requires a Chromium-based browser.";
         }
-        showGlobalMessage(`Could not find Tiliqua debugger: ${errorMsg}`);
-        showGlobalMessage(additionalInfo);
+        showGlobalMessage(`Could not find Tiliqua debugger: ${errorMsg}`, 'error');
+        showGlobalMessage(additionalInfo, 'error');
         const deviceInfo = document.getElementById('device-info');
         deviceInfo.textContent = `Error: ${errorMsg}`;
         deviceInfo.className = 'device-info error';

src/js/ui-helpers.js

@@ -7,6 +7,11 @@ export function showGlobalMessage(message, type = 'info') {
     logLine.innerHTML = `${message}`;
     logContent.appendChild(logLine);
     logContent.scrollTop = logContent.scrollHeight;
+    
+    // Auto-open log panel for error messages
+    if (type === 'error') {
+        openLogPanel();
+    }
 }
 
 export function addToGlobalLog(slotId, message, type = 'info') {
@@ -29,6 +34,11 @@ export function addToGlobalLog(slotId, message, type = 'info') {
     }
     logContent.scrollTop = logContent.scrollHeight;
 
+    // Auto-open log panel for error messages
+    if (type === 'error') {
+        openLogPanel();
+    }
+    
     // Update progress log if flash operation is in progress
     updateProgressLog();
 }
@@ -145,7 +155,7 @@ export function updateFlashLoadingMessage(message) {
     const flashLoading = document.getElementById('flash-loading');
     const loadingText = flashLoading.querySelector('.loading-text');
     if (loadingText) {
-        loadingText.innerHTML = `${message}<br><span style="font-size: 16px; opacity: 0.7;">See log panel →</span>`;
+        loadingText.innerHTML = `${message}`;
     }
 }
 
@@ -171,6 +181,13 @@ export function updateSlotToFlashedStatus(slotId, manifest) {
     }
 }
 
+export function openLogPanel() {
+    const logPanel = document.getElementById('log-panel');
+    if (logPanel && !logPanel.classList.contains('show')) {
+        logPanel.classList.add('show');
+    }
+}
+
 export function updateProgressLog() {
     const flashLoading = document.getElementById('flash-loading');
     const progressLogContent = document.getElementById('progress-log-content');

src/styles.css

@@ -728,7 +728,7 @@ input[type="file"] {
 
 .loading-indicator .loading-text {
     color: #fff;
-    font-size: 24px;
+    font-size: 36px;
     font-weight: 500;
     letter-spacing: 1px;
     text-transform: uppercase;
@@ -914,4 +914,4 @@ input[type="file"] {
     color: #4a9eff;
     margin-left: 15px;
     font-weight: 400;
-}
+}