Add error modal that displays errors sent to the client

Author: MaartenS11

src/main/resources/debugger.html

@@ -174,6 +174,29 @@
   #mock-args-fields input { flex: 1; min-width: 0; }
   #mock-footer { display: flex; justify-content: flex-end; gap: 8px; }
 
+  /* Error modal */
+  #error-overlay {
+    position: fixed; inset: 0; background: rgba(0,0,0,0.55);
+    display: flex; align-items: center; justify-content: center; z-index: 200;
+  }
+  #error-overlay.hidden { display: none; }
+  #error-modal {
+    background: var(--modal-bg); border: 1px solid var(--border); border-radius: 6px;
+    padding: 20px; min-width: 420px; max-width: 640px;
+    display: flex; flex-direction: column; gap: 14px;
+    box-shadow: 0 8px 28px rgba(0,0,0,0.45);
+  }
+  #error-modal h3 {
+    font-size: 14px; font-weight: 600; color: #f48771;
+    display: flex; align-items: center; gap: 8px;
+  }
+  #error-modal-msg {
+    font-size: 12px; line-height: 1.5; color: var(--fg);
+    white-space: pre-wrap; word-break: break-word;
+    max-height: 40vh; overflow-y: auto;
+  }
+  #error-footer { display: flex; justify-content: flex-end; }
+
   /* Dockview tab styling — VS Code style */
   #dockview-container .dv-tabs-and-actions-container {
     background-color: var(--panel-bg) !important;
@@ -208,7 +231,7 @@
 <div id="toolbar">
   <button class="icon-btn" id="btn-pause-continue" title="Continue"><i class="codicon codicon-debug-continue" style="color:var(--icon-green)"></i></button>
   <button class="icon-btn" id="btn-reset" title="Reset"><i class="codicon codicon-debug-restart"></i></button>
-  <button class="icon-btn" id="btn-choicepoint-filter" title="Configure choicepoint filter"><span class="svg-icon" style="mask-image:url(/icons/settings-gear.svg);-webkit-mask-image:url(/icons/settings-gear.svg)"></span></button>
+  <button class="icon-btn" id="btn-choicepoint-filter" title="Configure choicepoint filter"><span class="svg-icon" style="mask-image:url(/icons/settings-choicepoint.svg);-webkit-mask-image:url(/icons/settings-choicepoint.svg)"></span></button>
   <button class="icon-btn" id="btn-rewind-choicepoint" title="Rewind to first choicepoint"><span class="svg-icon" style="mask-image:url(/icons/debug-rewind-back-choicepoint.svg);-webkit-mask-image:url(/icons/debug-rewind-back-choicepoint.svg)"></span></button>
   <button class="icon-btn" id="btn-step-back-choicepoint" title="Step back to choicepoint"><span class="svg-icon" style="mask-image:url(/icons/debug-step-back-choicepoint.svg);-webkit-mask-image:url(/icons/debug-step-back-choicepoint.svg)"></span></button>
   <button class="icon-btn" id="btn-step-back" title="Step Back"><i class="codicon codicon-debug-step-back"></i></button>
@@ -220,6 +243,15 @@
 </div>
 <div id="mocks-bar"></div>
 <div id="dockview-container" class="dockview-theme-abyss"></div>
+<div id="error-overlay" class="hidden">
+  <div id="error-modal">
+    <h3><i class="codicon codicon-error"></i> Error</h3>
+    <div id="error-modal-msg"></div>
+    <div id="error-footer">
+      <button id="btn-error-ok">OK</button>
+    </div>
+  </div>
+</div>
 <div id="mock-overlay" class="hidden">
   <div id="mock-modal">
     <h3>Add Mock</h3>
@@ -323,7 +355,25 @@ <h3>Add Mock</h3>
   applyTheme(currentTheme === 'dark' ? 'light' : 'dark');
 });
 
-function setStatus(msg) { console.log('[status]', msg); }
+function showError(msg) {
+  document.getElementById('error-modal-msg').textContent = msg;
+  document.getElementById('error-overlay').classList.remove('hidden');
+}
+function hideError() {
+  document.getElementById('error-overlay').classList.add('hidden');
+}
+document.getElementById('btn-error-ok').addEventListener('click', hideError);
+document.getElementById('error-overlay').addEventListener('click', e => {
+  if (e.target.id === 'error-overlay') hideError();
+});
+document.addEventListener('keydown', e => {
+  if (e.key === 'Escape' && !document.getElementById('error-overlay').classList.contains('hidden')) hideError();
+});
+
+function setStatus(msg) {
+  console.log('[status]', msg);
+  if (msg.startsWith('Error') || msg.startsWith('Invalid')) showError(msg);
+}
 
 function updateButtons() {
   ['btn-step', 'btn-step-back', 'btn-step-back-choicepoint', 'btn-rewind-choicepoint', 'btn-reset', 'btn-mock', 'btn-predict'].forEach(id => {
@@ -906,7 +956,7 @@ <h3>Add Mock</h3>
   setStatus('Running…');
   try {
     const r = await fetch(url, { method: 'POST' });
-    if (!r.ok) throw new Error('HTTP ' + r.status);
+    if (!r.ok) throw new Error(await r.text() || ('HTTP ' + r.status));
     const graph = await r.json();
     renderGraph(graph);
     const [source] = await Promise.all([fetchSource(), fetchMocks()]);
@@ -982,7 +1032,7 @@ <h3>Add Mock</h3>
   setStatus('Running…');
   try {
     const r = await fetch(url, { method: 'POST' });
-    if (!r.ok) throw new Error(`No nodes matching "${choicePointFilterRegex}" could be found in the past!`);
+    if (!r.ok) throw new Error(await r.text() || ('HTTP ' + r.status));
     const graph = await r.json();
     renderGraph(graph);
     const [source] = await Promise.all([fetchSource(), fetchMocks()]);