Add HTMX error handler, Mermaid try-catch, remove unused CSS

loglux · loglux · commit 67149f5e6be6 · 2026-03-21T23:01:50.000Z
- Global htmx:responseError handler shows error message on failed requests
- Wrap Mermaid re-render in try-catch to prevent silent failures
- Remove unused .facts CSS class (30 lines of dead code)
diff --git a/app/web/static/styles.css b/app/web/static/styles.css
@@ -885,37 +885,6 @@ h3 {
   color: var(--text);
 }
 
-.facts {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 0;
-  margin: 4px 0;
-  border: 1px solid rgb(255 255 255 / 5%);
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.facts div {
-  padding: 10px 14px;
-}
-
-.facts div + div {
-  border-left: 1px solid rgb(255 255 255 / 5%);
-}
-
-.facts dt {
-  color: rgb(154 165 177 / 60%);
-  font-size: 11px;
-  margin-bottom: 2px;
-}
-
-.facts dd {
-  margin: 0;
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--text);
-}
-
 /* Split pane (sidebar + detail) */
 .settings-split {
   display: grid;
@@ -1030,7 +999,6 @@ h3 {
   }
 
   .inline-grid,
-  .facts,
   .fetch-row {
     grid-template-columns: 1fr;
   }
diff --git a/app/web/templates/base.html b/app/web/templates/base.html
@@ -7,6 +7,14 @@
     <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
     <link rel="stylesheet" href="/static/styles.css" />
     <script src="https://unpkg.com/htmx.org@1.9.12"></script>
+    <script>
+    document.addEventListener('htmx:responseError', function(e) {
+      var target = e.detail.target;
+      if (target) {
+        target.innerHTML = '<div class="error">Request failed (' + e.detail.xhr.status + '). Please try again.</div>';
+      }
+    });
+    </script>
   </head>
   <body>
     <div class="bg-grid"></div>
diff --git a/app/web/templates/chat.html b/app/web/templates/chat.html
@@ -180,8 +180,8 @@ <h2>No session selected</h2>
 
 // Re-render Mermaid diagrams after HTMX swap (for /schema command)
 document.body.addEventListener('htmx:afterSwap', function() {
-  if (typeof mermaid !== 'undefined') {
-    mermaid.run();
+  if (typeof mermaid !== 'undefined' && mermaid.run) {
+    try { mermaid.run(); } catch (e) { console.error('Mermaid render:', e); }
   }
 });
 </script>
