Fix GUI rerun confirmation dialog

Author: Paururo

frontend/src/App.css

@@ -4067,6 +4067,79 @@ h4 {
   color: var(--text-secondary);
 }
 
+/* ═════════════════ In-app Confirmation Dialog ═════════════════ */
+
+.confirm-dialog-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 3000;
+  display: grid;
+  place-items: center;
+  padding: 1.5rem;
+  background: rgba(10, 12, 18, 0.58);
+  backdrop-filter: blur(3px);
+}
+
+.confirm-dialog {
+  width: min(520px, 100%);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-elevated);
+  color: var(--text-primary);
+  padding: 1.25rem;
+}
+
+.confirm-dialog h3 {
+  margin: 0 0 0.75rem;
+  color: var(--text-primary);
+  font-size: 1rem;
+  font-weight: 800;
+}
+
+.confirm-dialog-text {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 0.88rem;
+  line-height: 1.55;
+  white-space: pre-line;
+}
+
+.confirm-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  margin-top: 1.25rem;
+}
+
+.confirm-dialog-btn {
+  border: 0;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 0.86rem;
+  font-weight: 800;
+  padding: 0.65rem 0.95rem;
+  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s var(--ease);
+}
+
+.confirm-dialog-btn:hover,
+.confirm-dialog-btn:focus {
+  outline: none;
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-hover);
+}
+
+.confirm-dialog-btn--secondary {
+  background: var(--bg-elevated);
+  color: var(--text-primary);
+  border: 1px solid var(--border);
+}
+
+.confirm-dialog-btn--primary {
+  background: var(--mnv-m);
+  color: #ffffff;
+}
+
 /* ═════════════════ Responsive ═════════════════ */
 
 /* Narrower window: shrink sidebar, single-col params */

frontend/src/App.tsx

@@ -271,6 +271,11 @@ interface ProgressEvent {
   total: number;
 }
 
+interface ConfirmationPrompt {
+  message: string;
+  resolve: (confirmed: boolean) => void;
+}
+
 function App() {
   const [tab, setTab] = useState<Tab>("analysis");
   const [config, setConfig] = useState<AnalysisConfig>(DEFAULT_CONFIG);
@@ -288,6 +293,7 @@ function App() {
   const [appVersion, setAppVersion] = useState("v1.1.3");
   const [batchProgress, setBatchProgress] = useState<{ current: number; total: number } | null>(null);
   const [runProgress, setRunProgress] = useState<ProgressEvent | null>(null);
+  const [confirmationPrompt, setConfirmationPrompt] = useState<ConfirmationPrompt | null>(null);
 
   const configRef = useRef(config);
   useEffect(() => { configRef.current = config; }, [config]);
@@ -611,6 +617,19 @@ function App() {
     }
   }, []);
 
+  const askForConfirmation = useCallback((message: string) => {
+    return new Promise<boolean>((resolve) => {
+      setConfirmationPrompt({ message, resolve });
+    });
+  }, []);
+
+  const resolveConfirmation = useCallback((confirmed: boolean) => {
+    setConfirmationPrompt((prompt) => {
+      prompt?.resolve(confirmed);
+      return null;
+    });
+  }, []);
+
   const confirmOutputWrites = useCallback(async (toRun: SampleEntry[]) => {
     if (toRun.length === 0) return true;
 
@@ -655,11 +674,11 @@ function App() {
         );
       }
 
-      return window.confirm(`${sections.join("\n\n")}\n\nContinue?`);
+      return askForConfirmation(`${sections.join("\n\n")}\n\nContinue?`);
     } catch {
       return true;
     }
-  }, []);
+  }, [askForConfirmation]);
 
   const handleRunAll = useCallback(() => {
     const toRun = samples.filter((s) => s.status === "pending" || s.status === "error");
@@ -1181,6 +1200,36 @@ function App() {
         )}
       </main>
 
+      {confirmationPrompt && (
+        <div className="confirm-dialog-backdrop" role="presentation">
+          <div
+            className="confirm-dialog"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="confirm-dialog-title"
+          >
+            <h3 id="confirm-dialog-title">Confirm output overwrite</h3>
+            <p className="confirm-dialog-text">{confirmationPrompt.message}</p>
+            <div className="confirm-dialog-actions">
+              <button
+                type="button"
+                className="confirm-dialog-btn confirm-dialog-btn--secondary"
+                onClick={() => resolveConfirmation(false)}
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                className="confirm-dialog-btn confirm-dialog-btn--primary"
+                onClick={() => resolveConfirmation(true)}
+              >
+                Continue
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Global drop overlay */}
       {dragActive && (
         <div className="drop-overlay">