@hexclave/next 1.0.74 → 1.0.76

package/src/pushed-config-error-overlay/index.ts

@@ -5,258 +5,21 @@
 
 import { captureError } from "@hexclave/shared/dist/utils/errors";
 import { runAsynchronously } from "@hexclave/shared/dist/utils/promises";
-import { isLocalhost } from "@hexclave/shared/dist/utils/urls";
-import { envVars } from "../generated/env";
-import { getInPageUiBaseCSS } from "../in-page-ui/base-styles";
-import { canMountIntoDom, getGlobalUiInstance, h, setGlobalUiInstance, setHtml } from "../in-page-ui/dom";
+import { isLikelyDevelopmentEnvironment } from "../in-page-ui/dev-environment";
+import { canMountIntoDom, getGlobalUiInstance, h, setGlobalUiInstance } from "../in-page-ui/dom";
+import { getIssueCardCSS, renderIssueCard, renderIssuePill, trapFocusInIssueCard, type IssueCardFocusTrap } from "../in-page-ui/issue-card";
 import type { StackClientApp } from "../lib/hexclave-app";
 
 const GLOBAL_INSTANCE_KEY = "__hexclave-pushed-config-error-overlay";
 const MINIMIZED_STORAGE_KEY = "hexclave-pushed-config-error-minimized-key";
 const REFRESH_INTERVAL_MS = 5_000;
-const HEXCLAVE_LOGO_SVG = '<svg width="16" height="16" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="miter"><path d="M 24 4 L 41.32 14 L 41.32 34 L 24 44 L 6.68 34 L 6.68 14 Z"/><path d="M 11 16.87 L 14 15.13 L 14 32.87 L 11 31.13 Z" fill="currentColor" stroke="none"/><path d="M 11 16.87 L 14 15.13 L 14 32.87 L 11 31.13 Z" fill="currentColor" stroke="none" transform="rotate(120 24 24)"/><path d="M 11 16.87 L 14 15.13 L 14 32.87 L 11 31.13 Z" fill="currentColor" stroke="none" transform="rotate(240 24 24)"/></svg>';
-const COPY_ICON_SVG = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
 
 type ConfigIssue = {
   kind: "error" | "warning",
   messages: string[],
 };
 
-const css = getInPageUiBaseCSS(".hexclave-config-error-overlay") + `
-  .hexclave-config-error-overlay .hce-backdrop {
-    position: fixed;
-    inset: 0;
-    z-index: 2147483647;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 24px;
-    background: rgba(0, 0, 0, 0.46);
-    backdrop-filter: blur(6px);
-    overflow: auto;
-  }
-
-  .hexclave-config-error-overlay .hce-card {
-    --hce-status: var(--sdt-error);
-    width: min(720px, calc(100vw - 32px));
-    max-height: min(640px, calc(100dvh - 48px));
-    border: 1px solid color-mix(in srgb, var(--hce-status) 35%, var(--sdt-border));
-    border-radius: 18px;
-    background: var(--sdt-overlay-bg);
-    box-shadow: var(--sdt-shadow);
-    backdrop-filter: blur(18px);
-    display: flex;
-    overflow: hidden;
-  }
-
-  .hexclave-config-error-overlay .hce-card-warning {
-    --hce-status: var(--sdt-warning);
-  }
-
-  .hexclave-config-error-overlay .hce-card-inner {
-    padding: 18px;
-    width: 100%;
-    overflow: auto;
-  }
-
-  .hexclave-config-error-overlay .hce-header {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 12px;
-    margin-bottom: 12px;
-  }
-
-  .hexclave-config-error-overlay .hce-title-row {
-    display: flex;
-    align-items: flex-start;
-    gap: 10px;
-    min-width: 0;
-  }
-
-  .hexclave-config-error-overlay .hce-logo {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 34px;
-    height: 34px;
-    border-radius: 10px;
-    background: var(--hce-status);
-    color: white;
-    box-shadow: 0 10px 30px color-mix(in srgb, var(--hce-status) 32%, transparent);
-  }
-
-  .hexclave-config-error-overlay .hce-badge {
-    display: inline-flex;
-    flex-shrink: 0;
-    padding: 2px 6px;
-    border-radius: 999px;
-    background: var(--hce-status);
-    color: white;
-    font-size: 10px;
-    font-weight: 700;
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-  }
-
-  .hexclave-config-error-overlay .hce-title {
-    color: var(--sdt-text);
-    margin-top: 4px;
-    font-size: 18px;
-    font-weight: 700;
-    line-height: 1.25;
-  }
-
-  .hexclave-config-error-overlay .hce-actions {
-    display: flex;
-    gap: 4px;
-  }
-
-  .hexclave-config-error-overlay .hce-icon-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    border: 1px solid var(--sdt-border);
-    border-radius: 8px;
-    background: var(--sdt-bg-elevated);
-    color: var(--sdt-text-secondary);
-    cursor: pointer;
-    font: inherit;
-    line-height: 1;
-    vertical-align: top;
-  }
-
-  .hexclave-config-error-overlay .hce-icon-btn svg {
-    display: block;
-    flex-shrink: 0;
-  }
-
-  .hexclave-config-error-overlay .hce-text-btn {
-    align-items: center;
-    gap: 6px;
-    min-height: 28px;
-    padding: 0 10px;
-    width: auto;
-    font-size: 12px;
-    line-height: 1;
-  }
-
-  .hexclave-config-error-overlay .hce-icon-btn:hover {
-    background: var(--sdt-bg-hover);
-    color: var(--sdt-text);
-  }
-
-  .hexclave-config-error-overlay .hce-body {
-    color: var(--sdt-text-secondary);
-    font-size: 14px;
-    line-height: 1.5;
-  }
-
-  .hexclave-config-error-overlay .hce-message-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 10px;
-    margin-top: 14px;
-    margin-bottom: 8px;
-  }
-
-  .hexclave-config-error-overlay .hce-message-label {
-    color: var(--sdt-text);
-    font-size: 12px;
-    font-weight: 650;
-  }
-
-  .hexclave-config-error-overlay .hce-message {
-    padding: 12px;
-    max-height: min(260px, max(96px, 30dvh));
-    overflow: auto;
-    border: 1px solid var(--sdt-border-subtle);
-    border-radius: 10px;
-    background: var(--sdt-bg-subtle);
-    color: var(--sdt-text);
-    font-family: var(--sdt-font-mono);
-    font-size: 12px;
-    white-space: pre-wrap;
-    overflow-wrap: anywhere;
-  }
-
-  .hexclave-config-error-overlay .hce-footer {
-    margin-top: 10px;
-    color: var(--sdt-text-tertiary);
-    font-size: 12px;
-  }
-
-  .hexclave-config-error-overlay .hce-pill {
-    position: fixed;
-    right: 18px;
-    bottom: 18px;
-    z-index: 2147483647;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 12px 8px 8px;
-    --hce-status: var(--sdt-error);
-    border: 1px solid color-mix(in srgb, var(--hce-status) 35%, var(--sdt-border));
-    border-radius: 999px;
-    background: var(--sdt-overlay-bg);
-    box-shadow: var(--sdt-trigger-shadow);
-    color: var(--sdt-text);
-    cursor: pointer;
-    font: inherit;
-    backdrop-filter: blur(18px);
-  }
-
-  .hexclave-config-error-overlay .hce-pill-warning {
-    --hce-status: var(--sdt-warning);
-  }
-
-  .hexclave-config-error-overlay .hce-pill-logo {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 26px;
-    height: 26px;
-    border-radius: 999px;
-    background: var(--hce-status);
-    color: white;
-  }
-
-  @media (max-height: 520px) {
-    .hexclave-config-error-overlay .hce-backdrop {
-      align-items: flex-start;
-      padding: 12px;
-    }
-
-    .hexclave-config-error-overlay .hce-card {
-      width: min(720px, calc(100vw - 24px));
-      max-height: calc(100dvh - 24px);
-    }
-
-    .hexclave-config-error-overlay .hce-card-inner {
-      padding: 12px;
-    }
-
-    .hexclave-config-error-overlay .hce-header {
-      margin-bottom: 8px;
-    }
-
-    .hexclave-config-error-overlay .hce-title {
-      font-size: 16px;
-    }
-
-    .hexclave-config-error-overlay .hce-body {
-      font-size: 13px;
-    }
-
-    .hexclave-config-error-overlay .hce-message {
-      max-height: max(80px, 24dvh);
-    }
-  }
-`;
+const css = getIssueCardCSS(".hexclave-config-error-overlay");
 
 function storageGet(key: string): string | null {
   try {
@@ -283,53 +46,7 @@ function storageRemove(key: string): void {
 }
 
 function shouldMount(): boolean {
-  if (!canMountIntoDom()) {
-    return false;
-  }
-
-  const nodeEnv = envVars.NODE_ENV;
-  if (nodeEnv !== undefined) {
-    return nodeEnv === "development";
-  }
-
-  try {
-    const url = new URL(window.location.href);
-    if (url.protocol === "file:") {
-      return true;
-    }
-  } catch {
-    return false;
-  }
-  return isLocalhost(window.location.href);
-}
-
-async function copyTextToClipboard(text: string): Promise<void> {
-  const clipboard: unknown = Reflect.get(navigator, "clipboard");
-  const writeText = clipboard != null && typeof clipboard === "object"
-    ? Reflect.get(clipboard, "writeText")
-    : null;
-  if (typeof writeText === "function") {
-    await writeText.call(clipboard, text);
-    return;
-  }
-
-  const textarea = h("textarea", {
-    style: {
-      position: "fixed",
-      left: "-9999px",
-      top: "0",
-      opacity: "0",
-    },
-    readonly: "true",
-  }) as HTMLTextAreaElement;
-  textarea.value = text;
-  document.body.appendChild(textarea);
-  textarea.select();
-  const copied = document.execCommand("copy");
-  textarea.remove();
-  if (!copied) {
-    throw new Error("Browser refused to copy the config error message.");
-  }
+  return canMountIntoDom() && isLikelyDevelopmentEnvironment();
 }
 
 function buildConfigIssueAiPrompt(issue: ConfigIssue): string {
@@ -363,12 +80,23 @@ export function mountPushedConfigErrorOverlay(app: StackClientApp<true>): () =>
   let lastErrorKey: string | null = null;
   let lastConsoleErrorKey: string | null = null;
   let minimized = false;
+  // The card element is replaced on every poll, so the trap has to be rebound to the new one each time or it would keep
+  // trapping Tab inside the detached card. Focus is only *moved* into the card when a card first appears for an issue;
+  // doing it on every render would yank focus out of whatever the developer is doing every few seconds.
+  let focusedIssueKey: string | null = null;
+  let focusTrap: IssueCardFocusTrap | null = null;
+  const releaseFocusIfHeld = () => {
+    focusTrap?.release();
+    focusTrap = null;
+    focusedIssueKey = null;
+  };
 
   const render = (issue: ConfigIssue | null) => {
     root.replaceChildren(style);
     if (issue == null) {
       lastErrorKey = null;
       minimized = false;
+      releaseFocusIfHeld();
       return;
     }
 
@@ -400,113 +128,43 @@ export function mountPushedConfigErrorOverlay(app: StackClientApp<true>): () =>
     }
 
     if (minimized) {
-      const logoSpan = h("span", { className: "hce-pill-logo" });
-      setHtml(logoSpan, HEXCLAVE_LOGO_SVG);
-      root.appendChild(h("button", {
-        className: issue.kind === "error" ? "hce-pill" : "hce-pill hce-pill-warning",
-        type: "button",
+      releaseFocusIfHeld();
+      root.appendChild(renderIssuePill({
+        kind: issue.kind,
+        label: issue.kind === "error" ? "Config error" : "Config warning",
+        ariaLabel: `Show Hexclave config ${issueLabel}`,
         onClick: () => {
           minimized = false;
           storageRemove(MINIMIZED_STORAGE_KEY);
           render(issue);
         },
-      },
-      logoSpan,
-      h("span", null, issue.kind === "error" ? "Config error" : "Config warning")));
+      }));
       return;
     }
 
-    const logoSpan = h("span", { className: "hce-logo" });
-    setHtml(logoSpan, HEXCLAVE_LOGO_SVG);
-    const copyButton = h("button", {
-      className: "hce-icon-btn hce-text-btn",
-      type: "button",
-      title: issue.kind === "error" ? "Copy error message" : "Copy warning message",
-      "aria-label": issue.kind === "error" ? "Copy config error message" : "Copy config warning message",
-      onClick: () => {
-        runAsynchronously(async () => {
-          await copyTextToClipboard(issueMessage);
-          copyButton.textContent = "Copied";
-          setTimeout(() => {
-            setHtml(copyButton, `${COPY_ICON_SVG}Copy`);
-          }, 1500);
-        }, {
-          noErrorLogging: true,
-          onError: (copyError) => {
-            captureError("pushed-config-error-overlay-copy", copyError);
-            copyButton.textContent = "Copy failed";
-            setTimeout(() => {
-              setHtml(copyButton, `${COPY_ICON_SVG}Copy`);
-            }, 1500);
-          },
-        });
+    root.appendChild(renderIssueCard({
+      kind: issue.kind,
+      badge: `Config ${issueLabel}`,
+      title: issueTitle,
+      bodyText,
+      messageLabel: issue.kind === "error" ? "Error message" : "Warning message",
+      message: issueMessage,
+      footerText,
+      ariaLabel: `Hexclave config ${issueLabel}`,
+      aiPrompt: buildConfigIssueAiPrompt(issue),
+      onCopyError: (copyError) => captureError("pushed-config-error-overlay-copy", copyError),
+      onCopyAiPromptError: (copyError) => captureError("pushed-config-error-overlay-copy-ai-prompt", copyError),
+      onMinimize: () => {
+        minimized = true;
+        storageSet(MINIMIZED_STORAGE_KEY, issueKey);
+        render(issue);
       },
-    });
-    setHtml(copyButton, `${COPY_ICON_SVG}Copy`);
-
-    const aiPromptCopyButton = h("button", {
-      className: "hce-icon-btn",
-      type: "button",
-      title: "Copy AI prompt",
-      "aria-label": issue.kind === "error" ? "Copy AI prompt for config error" : "Copy AI prompt for config warning",
-      onClick: () => {
-        runAsynchronously(async () => {
-          await copyTextToClipboard(buildConfigIssueAiPrompt(issue));
-          aiPromptCopyButton.textContent = "✓";
-          setTimeout(() => {
-            setHtml(aiPromptCopyButton, COPY_ICON_SVG);
-          }, 1500);
-        }, {
-          noErrorLogging: true,
-          onError: (copyError) => {
-            captureError("pushed-config-error-overlay-copy-ai-prompt", copyError);
-            aiPromptCopyButton.textContent = "!";
-            setTimeout(() => {
-              setHtml(aiPromptCopyButton, COPY_ICON_SVG);
-            }, 1500);
-          },
-        });
-      },
-    });
-    setHtml(aiPromptCopyButton, COPY_ICON_SVG);
-
-    root.appendChild(h("div", { className: "hce-backdrop" },
-      h("div", { className: issue.kind === "error" ? "hce-card" : "hce-card hce-card-warning", role: "alertdialog", "aria-modal": "true", "aria-label": `Hexclave config ${issueLabel}` },
-      h("div", { className: "hce-card-inner" },
-        h("div", { className: "hce-header" },
-          h("div", { className: "hce-title-row" },
-            logoSpan,
-            h("div", null,
-              h("span", { className: "hce-badge" }, `Config ${issueLabel}`),
-              h("div", { className: "hce-title" }, issueTitle),
-            ),
-          ),
-          h("div", { className: "hce-actions" },
-            aiPromptCopyButton,
-            h("button", {
-              className: "hce-icon-btn",
-              type: "button",
-              title: "Minimize",
-              "aria-label": issue.kind === "error" ? "Minimize config error" : "Minimize config warning",
-              onClick: () => {
-                minimized = true;
-                storageSet(MINIMIZED_STORAGE_KEY, issueKey);
-                render(issue);
-              },
-            }, "–"),
-          ),
-        ),
-        h("div", { className: "hce-body" },
-          bodyText,
-          h("div", { className: "hce-message-header" },
-            h("div", { className: "hce-message-label" }, issue.kind === "error" ? "Error message" : "Warning message"),
-            copyButton,
-          ),
-          h("div", { className: "hce-message" }, issueMessage),
-          h("div", { className: "hce-footer" }, footerText),
-        ),
-      ),
-    )));
+    }));
+    const isNewIssue = focusedIssueKey !== issueKey;
+    const previouslyFocused = isNewIssue ? undefined : focusTrap?.previouslyFocused ?? null;
+    focusTrap?.release({ restoreFocus: isNewIssue });
+    focusedIssueKey = issueKey;
+    focusTrap = trapFocusInIssueCard(root, { moveFocusIntoCard: isNewIssue, previouslyFocused });
   };
 
   const refresh = () => {
@@ -540,6 +198,7 @@ export function mountPushedConfigErrorOverlay(app: StackClientApp<true>): () =>
   const cleanup = () => {
     disposed = true;
     clearInterval(interval);
+    releaseFocusIfHeld();
     root.remove();
     if (getGlobalUiInstance(GLOBAL_INSTANCE_KEY)?.cleanup === cleanup) {
       setGlobalUiInstance(GLOBAL_INSTANCE_KEY, null);

package/src/setup-error-overlay/index.test.ts

@@ -0,0 +1,133 @@
+
+//===========================================
+// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY UNLESS YOU ALSO EDIT THE CORRESPONDING FILE IN packages/template
+//===========================================
+// @vitest-environment jsdom
+
+import { HexclaveSetupError } from "@hexclave/shared/dist/utils/errors";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { SETUP_ERROR_OVERLAY_GLOBAL_INSTANCE_KEY, showSetupErrorOverlay } from ".";
+
+function createSetupError() {
+  return new HexclaveSetupError({
+    title: "A domain in your authentication flow is not one of your project's trusted domains",
+    message: "Nested cross-domain auth callback URL https://demo.example.test/ is not trusted.",
+    howToFix: ["Add https://demo.example.test to your project's trusted domains."],
+  });
+}
+
+function overlayRoots() {
+  return document.querySelectorAll(".hexclave-setup-error-overlay");
+}
+
+describe("setup error overlay", () => {
+  afterEach(() => {
+    vi.unstubAllEnvs();
+    for (const root of overlayRoots()) {
+      root.remove();
+    }
+    Reflect.deleteProperty(window, SETUP_ERROR_OVERLAY_GLOBAL_INSTANCE_KEY);
+  });
+
+  it("renders setup errors with their fix instructions, even outside development", () => {
+    vi.stubEnv("NODE_ENV", "production");
+    const error = createSetupError();
+
+    const cleanup = showSetupErrorOverlay(error);
+    try {
+      expect(overlayRoots()).toHaveLength(1);
+      const text = document.body.textContent;
+      expect(text).toContain(error.title);
+      expect(text).toContain(error.message);
+      expect(text).toContain(error.howToFix[0]);
+      expect(document.querySelector("[role='alertdialog']")).not.toBeNull();
+    } finally {
+      cleanup();
+    }
+
+    expect(overlayRoots()).toHaveLength(0);
+  });
+
+  it("minimizes into a pill and back", () => {
+    vi.stubEnv("NODE_ENV", "production");
+    const cleanup = showSetupErrorOverlay(createSetupError());
+    try {
+      const minimizeButton = document.querySelector<HTMLButtonElement>("[aria-label='Minimize Hexclave setup error']");
+      expect(minimizeButton).not.toBeNull();
+      minimizeButton?.click();
+      expect(document.querySelector("[role='alertdialog']")).toBeNull();
+
+      const pill = document.querySelector<HTMLButtonElement>("[aria-label='Show Hexclave setup error']");
+      expect(pill).not.toBeNull();
+      pill?.click();
+      expect(document.querySelector("[role='alertdialog']")).not.toBeNull();
+    } finally {
+      cleanup();
+    }
+  });
+
+  it("keeps keyboard focus inside the card and gives it back afterwards", () => {
+    vi.stubEnv("NODE_ENV", "production");
+    const pageButton = document.body.appendChild(document.createElement("button"));
+    pageButton.focus();
+
+    const cleanup = showSetupErrorOverlay(createSetupError());
+    try {
+      const card = document.querySelector<HTMLElement>("[role='alertdialog']");
+      expect(document.activeElement).toBe(card);
+
+      const cardButtons = [...(card?.querySelectorAll("button") ?? [])];
+      expect(cardButtons.length).toBeGreaterThan(1);
+      cardButtons[cardButtons.length - 1].focus();
+      document.dispatchEvent(new KeyboardEvent("keydown", { key: "Tab", bubbles: true, cancelable: true }));
+      expect(document.activeElement).toBe(cardButtons[0]);
+      document.dispatchEvent(new KeyboardEvent("keydown", { key: "Tab", bubbles: true, cancelable: true, shiftKey: true }));
+      expect(document.activeElement).toBe(cardButtons[cardButtons.length - 1]);
+
+      // Tabbing away from the card is what the trap exists to prevent, even when the page itself moves focus.
+      pageButton.focus();
+      document.dispatchEvent(new KeyboardEvent("keydown", { key: "Tab", bubbles: true, cancelable: true }));
+      expect(document.activeElement).toBe(cardButtons[0]);
+    } finally {
+      cleanup();
+    }
+
+    expect(document.activeElement).toBe(pageButton);
+    pageButton.remove();
+  });
+
+  it("keeps the first card instead of stacking later errors on top of it", () => {
+    vi.stubEnv("NODE_ENV", "production");
+    const firstError = createSetupError();
+    const cleanup = showSetupErrorOverlay(firstError);
+    try {
+      const secondCleanup = showSetupErrorOverlay(new HexclaveSetupError({
+        title: "Another setup error",
+        message: "Another setup error happened.",
+        howToFix: ["Fix the other thing."],
+      }));
+      secondCleanup();
+
+      expect(overlayRoots()).toHaveLength(1);
+      expect(document.body.textContent).toContain(firstError.message);
+      expect(document.body.textContent).not.toContain("Another setup error happened.");
+    } finally {
+      cleanup();
+    }
+  });
+
+  it("only shows errors that are not setup errors while developing", () => {
+    vi.stubEnv("NODE_ENV", "production");
+    showSetupErrorOverlay(new Error("Some internal failure."))();
+    expect(overlayRoots()).toHaveLength(0);
+
+    vi.stubEnv("NODE_ENV", "development");
+    const cleanup = showSetupErrorOverlay(new Error("Some internal failure."));
+    try {
+      expect(overlayRoots()).toHaveLength(1);
+      expect(document.body.textContent).toContain("Some internal failure.");
+    } finally {
+      cleanup();
+    }
+  });
+});