From e25b15ade7e1d8367b5f6e96d631b0ac61f2a9dc Mon Sep 17 00:00:00 2001
From: Benj-AI-e <benjie+ai@graphile.com>
Date: Thu, 5 Feb 2026 09:42:17 +0000
Subject: [PATCH] Style Ruru error boundary

---
 grafast/ruru-components/ruru.css     | 120 +++++++++++++++++++++++++++
 grafast/ruru-components/src/ruru.tsx |  91 ++++++++++++--------
 2 files changed, 176 insertions(+), 35 deletions(-)

diff --git a/grafast/ruru-components/ruru.css b/grafast/ruru-components/ruru.css
index 76fa24932a..d8176d2373 100644
--- a/grafast/ruru-components/ruru.css
+++ b/grafast/ruru-components/ruru.css
@@ -71,6 +71,126 @@
   padding: 10px;
 }
 
+.ruru-error-boundary {
+  background-color: hsl(var(--color-base));
+  color: hsl(var(--color-neutral));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: var(--px-24);
+}
+
+.ruru-error-card {
+  width: min(720px, 100%);
+  background-color: hsl(var(--color-base));
+  border-radius: var(--border-radius-12);
+  border: 1px solid hsla(var(--color-neutral), var(--alpha-background-heavy));
+  box-shadow: var(--popover-box-shadow);
+  padding: var(--px-24);
+  display: flex;
+  flex-direction: column;
+  gap: var(--px-12);
+}
+
+.ruru-error-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--px-4);
+}
+
+.ruru-error-eyebrow {
+  font-size: var(--font-size-caption);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: hsla(var(--color-neutral), var(--alpha-secondary));
+  margin: 0;
+}
+
+.ruru-error-title {
+  font-size: var(--font-size-h2);
+  margin: 0;
+}
+
+.ruru-error-lede {
+  color: hsla(var(--color-neutral), var(--alpha-secondary));
+  margin: 0;
+}
+
+.ruru-error-details {
+  background-color: hsla(var(--color-neutral), var(--alpha-background-light));
+  border-radius: var(--border-radius-8);
+  border: 1px solid hsla(var(--color-neutral), var(--alpha-background-heavy));
+  padding: var(--px-12);
+}
+
+.ruru-error-details-label {
+  font-size: var(--font-size-caption);
+  color: hsla(var(--color-neutral), var(--alpha-tertiary));
+  margin-bottom: var(--px-8);
+}
+
+.ruru-error-stack {
+  margin: 0;
+  max-height: 240px;
+  overflow: auto;
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-caption);
+  white-space: pre-wrap;
+}
+
+.ruru-error-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--px-8);
+}
+
+.ruru-error-button {
+  appearance: none;
+  border-radius: var(--border-radius-8);
+  border: 1px solid hsla(var(--color-neutral), var(--alpha-background-heavy));
+  background-color: hsla(var(--color-neutral), var(--alpha-background-light));
+  color: hsl(var(--color-neutral));
+  padding: var(--px-8) var(--px-16);
+  font-size: var(--font-size-body);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+}
+
+.ruru-error-button:hover {
+  background-color: hsla(var(--color-neutral), var(--alpha-background-medium));
+}
+
+.ruru-error-button:focus-visible {
+  outline: hsla(var(--color-neutral), var(--alpha-background-heavy)) auto 1px;
+}
+
+.ruru-error-button-primary {
+  background-color: hsl(var(--color-primary));
+  border-color: hsl(var(--color-primary));
+  color: hsl(var(--color-base));
+}
+
+.ruru-error-button-primary:hover {
+  background-color: hsla(var(--color-primary), var(--alpha-background-heavy));
+}
+
+.ruru-error-button-danger {
+  background-color: hsl(var(--color-warning));
+  border-color: hsl(var(--color-warning));
+  color: hsl(var(--color-base));
+}
+
+.ruru-error-button-danger:hover {
+  background-color: hsla(var(--color-warning), var(--alpha-background-heavy));
+}
+
+.ruru-error-note,
+.ruru-error-status {
+  margin: 0;
+  color: hsla(var(--color-neutral), var(--alpha-secondary));
+}
+
 .explain-plan,
 .explain-sql {
   font-size: 0.75rem;
diff --git a/grafast/ruru-components/src/ruru.tsx b/grafast/ruru-components/src/ruru.tsx
index 48e2d3a40f..34ac10b52f 100644
--- a/grafast/ruru-components/src/ruru.tsx
+++ b/grafast/ruru-components/src/ruru.tsx
@@ -96,43 +96,64 @@ const RuruError: FC<FallbackProps> = ({ error, resetErrorBoundary }) => {
     setHardResetStage(null);
   }, []);
   return (
-    <div>
-      <h2>{errorTitle}</h2>
-      <p>
-        The following particulars are provided in the hope that they may ferret
-        out the cause of this regrettable occurrence, clarity notwithstanding.
-      </p>
-      <pre>
-        <code>{error?.stack ?? error?.message ?? String(error)}</code>
-      </pre>
-      {hardResetStage === "done" ? (
-        <p>Reloading...</p>
-      ) : hardResetStage === "confirming" ? (
-        <>
-          <p>
-            <button onClick={deleteLocalData}>
-              CONFIRM! DELETE LOCAL DATA!
+    <div className="graphiql-container ruru-error-boundary">
+      <div className="ruru-error-card">
+        <div className="ruru-error-header">
+          <p className="ruru-error-eyebrow">Ruru</p>
+          <h2 className="ruru-error-title">{errorTitle}</h2>
+        </div>
+        <p className="ruru-error-lede">
+          The following particulars are provided in the hope that they may
+          ferret out the cause of this regrettable occurrence, clarity
+          notwithstanding.
+        </p>
+        <div className="ruru-error-details">
+          <div className="ruru-error-details-label">Error details</div>
+          <pre className="ruru-error-stack">
+            <code>{error?.stack ?? error?.message ?? String(error)}</code>
+          </pre>
+        </div>
+        {hardResetStage === "done" ? (
+          <p className="ruru-error-status">Reloading…</p>
+        ) : hardResetStage === "confirming" ? (
+          <div className="ruru-error-actions">
+            <button
+              className="ruru-error-button ruru-error-button-danger"
+              onClick={deleteLocalData}
+            >
+              Confirm, delete local data
+            </button>
+            <button className="ruru-error-button" onClick={abort}>
+              Cancel
             </button>
-          </p>
-          <p>
-            <button onClick={abort}>Cancel</button>
-          </p>
-        </>
-      ) : (
-        <>
-          <p>
-            <button onClick={tryAgain}>Try again</button>
-          </p>
-          {triedAgain ? (
-            <p>
-              <button onClick={destructivelyTryAgain}>
-                Delete all saved data (query history, tabs, variables, headers,
-                selected panels, etc) and try again
+          </div>
+        ) : (
+          <>
+            <div className="ruru-error-actions">
+              <button
+                className="ruru-error-button ruru-error-button-primary"
+                onClick={tryAgain}
+              >
+                Try again
               </button>
-            </p>
-          ) : null}
-        </>
-      )}
+              {triedAgain ? (
+                <button
+                  className="ruru-error-button ruru-error-button-danger"
+                  onClick={destructivelyTryAgain}
+                >
+                  Delete saved data and try again
+                </button>
+              ) : null}
+            </div>
+            {triedAgain ? (
+              <p className="ruru-error-note">
+                This clears query history, tabs, variables, headers, and
+                selected panels.
+              </p>
+            ) : null}
+          </>
+        )}
+      </div>
     </div>
   );
 };