fix: warning into banner

Author: jan-beranek

app/index.html

@@ -13,8 +13,11 @@ <h1>LLM Visual Evaluator</h1>
   </header>
 
   <main class="layout" role="main">
-    <div id="corsWarning" style="display:none; margin:8px 8px 0 8px; padding:8px; border:1px solid #e9b34f; background:#fff8e6; color:#8a6100; border-radius:6px;">
-      Running from file:// has origin "null" and many providers block it. To avoid CORS issues, open this app from a permitted origin (e.g., your GitHub Pages URL).
+    <div id="corsWarning" role="alert" aria-live="polite">
+      <span>
+        Running from file:// has origin "null" and many providers block it. To avoid CORS issues, open this app from a permitted origin (e.g., your GitHub Pages URL).
+      </span>
+      <button id="corsClose" type="button" class="banner-close" aria-label="Dismiss CORS warning" title="Dismiss">×</button>
     </div>
     <!-- Inputs Panel (Left) -->
     <section class="panel inputs" aria-label="Inputs panel">

app/src/main.js

@@ -64,6 +64,7 @@ const historyTable = new HistoryTable(historyTableEl, historyStore);
 const historyDialog = new HistoryDialog(document.getElementById('historyDialog'), historyStore, overlay, resultsTable, imageLoader);
 const storageRoot = document.getElementById('sidebar-storage');
 const corsWarning = document.getElementById('corsWarning');
+const corsClose = document.getElementById('corsClose');
 
 let activeBatch = null;
 
@@ -78,10 +79,18 @@ renderPromptTemplateTab();
 // Show CORS warning if opened from file:// to avoid Origin null
 try {
   if (location.protocol === 'file:') {
-    if (corsWarning) corsWarning.style.display = 'block';
+    const hidden = typeof localStorage !== 'undefined' && localStorage.getItem('hideCorsWarning') === '1';
+    if (corsWarning && !hidden) corsWarning.style.display = 'block';
   }
 } catch {}
 
+if (corsClose && corsWarning) {
+  corsClose.addEventListener('click', () => {
+    corsWarning.style.display = 'none';
+    try { localStorage.setItem('hideCorsWarning', '1'); } catch {}
+  });
+}
+
 function setBadge(text) {
   badge.textContent = text;
 }

app/styles.css

@@ -19,6 +19,37 @@ body {
   background: var(--bg);
 }
 
+/* Top overlay banner for CORS warning */
+#corsWarning {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  padding: 10px 36px 10px 12px;
+  border-bottom: 1px solid #e9b34f;
+  background: #fff8e6;
+  color: #8a6100;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
+}
+#corsWarning .banner-close {
+  position: absolute;
+  right: 8px;
+  top: 8px;
+  background: transparent;
+  border: none;
+  color: #8a6100;
+  cursor: pointer;
+  font-size: 18px;
+  line-height: 1;
+  padding: 2px 6px;
+  border-radius: 6px;
+}
+#corsWarning .banner-close:hover {
+  background: rgba(0,0,0,0.06);
+}
+
 .app-header, .app-footer {
   display:flex; align-items:center; justify-content:space-between;
   padding: 10px 14px; border-bottom: 1px solid var(--border);