@tollbooth-dpyc/web 0.2.0 → 0.3.0

package/README.md

@@ -10,7 +10,9 @@ features. It is the peer of the `tollbooth-dpyc` Python wheel.
 - **MCP client** — one shared connection to the operator, typed wrappers for
   the standard tools (balance, top-up, statement, price, profile)
 - **React components** — `NpubGate`, `NostrProfilePanel`, `SessionKeyClaim`, `WalletCard`,
-  `AvatarPicker`, `useSession`
+  `AvatarPicker`, `DebugPanel`, `useSession`, `useDebugLog`
+- **Debug log** — every call, result and error from `callTool`, scrubbed of
+  nsecs, hex keys, tokens and proofs before it is stored
 - **Pages proxy** — the `/mcp` Cloudflare Pages Function
 
 ## Use
@@ -39,6 +41,26 @@ import { makeMcpProxy } from "@tollbooth-dpyc/web/pages-proxy";
 export const onRequest = makeMcpProxy("https://chartremotely-mcp.fastmcp.app/mcp");
 ```
 
+### Debug panel
+
+`callTool` logs to a shared, scrubbed ring buffer; `DebugPanel` shows it as a
+bar along the bottom of the page with Copy and Clear. Put it once near the root.
+Anything the site alone needs goes in as children, drawn above the log:
+
+```tsx
+import { configureDebugLog, debugPush } from "@tollbooth-dpyc/web";
+import { DebugPanel } from "@tollbooth-dpyc/web/react";
+
+configureDebugLog({ persist: true });   // optional: outlive a reload; max defaults to 200
+
+<DebugPanel>
+  <button onClick={loadSchedulerRuns}>Scheduler ↻</button>
+</DebugPanel>
+```
+
+A site's own `debugPush` lines are scrubbed the same way. Stamps follow the
+zone the site stores under `<prefix>:timezone`, if any.
+
 ### Styling
 
 Components use Tailwind classes coloured only through CSS variables. Tell

package/dist/debugLog.d.ts

@@ -1,18 +1,50 @@
 /**
- * An in-memory activity log of MCP calls, for a site's debug panel.
+ * An activity log of MCP calls, for a site's debug panel.
  *
  * A ring buffer with subscribers, so the one `callTool` can push and any panel
- * can listen. It survives route changes and is gone on reload. Arguments are
- * logged only as the wrapper's own parameters — the npub/proof envelope is
- * added after logging, so no proof ever lands here.
+ * can listen. Newest first. It survives route changes; with
+ * `configureDebugLog({ persist: true })` it survives a reload too, so an error
+ * that flips the view can still be read and copied afterward.
+ *
+ * Every message is scrubbed on the way in: an nsec, a 64-hex key, a bearer
+ * token, and the value of any secret-named field (dpop_token, proof, poison,
+ * password, api_key, …) never reach the buffer, the clipboard or storage.
+ * That is the one guarantee a panel relies on — it renders what is here.
+ *
+ * Merged from the fleet's copies (goodearth, beesknees, cypher, excalibur,
+ * optionality, roastify, taxsort). None of them scrubbed; this one does.
  */
 export interface DebugEntry {
     ts: string;
     type: "info" | "call" | "result" | "error";
     message: string;
 }
+export interface DebugLogOptions {
+    /** How many entries to keep. Default 200. */
+    max?: number;
+    /** Keep the log in localStorage so it outlives a reload. Default false. */
+    persist?: boolean;
+}
+/**
+ * Scrub secrets from a log line. Deliberately over-eager: a 64-hex event id
+ * is hidden along with a hex private key, because the two look alike.
+ */
+export declare function redact(message: string): string;
+/** Set the cap and persistence. Call after `configureTollbooth`. */
+export declare function configureDebugLog(options: DebugLogOptions): void;
 export declare function debugPush(type: DebugEntry["type"], message: string): void;
 export declare function clearDebug(): void;
+/** The entries, newest first. The same array until the log changes. */
 export declare function debugEntries(): readonly DebugEntry[];
 /** Subscribe to changes. Returns an unsubscribe function. */
 export declare function onDebug(fn: () => void): () => void;
+/** The whole log as plain text, newest first — for Copy and bug reports. */
+export declare function debugLogText(): string;
+export type DebugSeverity = "ok" | "notice" | "failure";
+/** How a panel should flag an entry: a fault, a patron's next step, or neither. */
+export declare function debugSeverity(entry: DebugEntry): DebugSeverity;
+/**
+ * Fold uncaught errors and promise rejections into the log, once per page
+ * (guarded, so StrictMode and remounts do not double-register).
+ */
+export declare function captureGlobalErrors(): void;

package/dist/debugLog.js

@@ -1,29 +1,195 @@
 /**
- * An in-memory activity log of MCP calls, for a site's debug panel.
+ * An activity log of MCP calls, for a site's debug panel.
  *
  * A ring buffer with subscribers, so the one `callTool` can push and any panel
- * can listen. It survives route changes and is gone on reload. Arguments are
- * logged only as the wrapper's own parameters — the npub/proof envelope is
- * added after logging, so no proof ever lands here.
+ * can listen. Newest first. It survives route changes; with
+ * `configureDebugLog({ persist: true })` it survives a reload too, so an error
+ * that flips the view can still be read and copied afterward.
+ *
+ * Every message is scrubbed on the way in: an nsec, a 64-hex key, a bearer
+ * token, and the value of any secret-named field (dpop_token, proof, poison,
+ * password, api_key, …) never reach the buffer, the clipboard or storage.
+ * That is the one guarantee a panel relies on — it renders what is here.
+ *
+ * Merged from the fleet's copies (goodearth, beesknees, cypher, excalibur,
+ * optionality, roastify, taxsort). None of them scrubbed; this one does.
  */
-const log = [];
+import { tollboothConfig } from "./config.js";
+const DEFAULT_MAX = 200;
+let max = DEFAULT_MAX;
+let persist = false;
+// Replaced, never mutated, so a snapshot reader (useSyncExternalStore) sees a
+// new array exactly when something changed.
+let log = [];
 const listeners = new Set();
-const MAX = 60;
-export function debugPush(type, message) {
-    log.unshift({ ts: new Date().toLocaleTimeString(), type, message });
-    if (log.length > MAX)
-        log.length = MAX;
+// ── Redaction ──────────────────────────────────────────────────────────────
+const REDACTED = "[redacted]";
+/** Field names whose value is a secret wherever it appears. */
+const SECRET_FIELD = "(?:nsec|ncryptsec|dpop_token|proof|poison|password|passphrase|secret|token|authorization|api_?key|private_?key|client_secret|[a-z0-9_]*_(?:nsec|token|secret|password|passphrase|api_?key|private_?key))";
+// `"dpop_token":"…"`, `\"dpop_token\":\"…\"` (JSON inside a JSON string),
+// `dpop_token=…` (a query string) and `dpop_token: '…'` (a Python repr). A
+// quoted value is taken whole, spaces and all; a bare one up to a delimiter.
+function fieldValue(names) {
+    return new RegExp(`((?:\\\\*["'])?\\b${names}(?:\\\\*["'])?\\s*[:=]\\s*)(?:(\\\\*["'])[^"'\\\\]*|[^"'\\\\,}\\]&\\s]+)`, "gi");
+}
+const FIELD_VALUE = fieldValue(SECRET_FIELD);
+// update_patron_credential / update_operator_credential carry the secret as
+// `value` beside a `field` naming it, so any `value` in such a call goes too.
+const CREDENTIAL_VALUE = fieldValue("value");
+const HAS_FIELD = /\\*["']field\\*["']\s*:/i;
+const NSEC = /\b(?:nsec|ncryptsec)1[02-9ac-hj-np-z]{20,}/gi;
+const HEX_KEY = /\b[0-9a-f]{64,}\b/gi; // keys, and signatures (128)
+const BEARER = /\bBearer\s+[A-Za-z0-9._~+/=-]+/g;
+function scrubbed(_match, head, quote) {
+    return `${head}${quote ?? ""}${REDACTED}`;
+}
+/**
+ * Scrub secrets from a log line. Deliberately over-eager: a 64-hex event id
+ * is hidden along with a hex private key, because the two look alike.
+ */
+export function redact(message) {
+    let out = message
+        .replace(NSEC, REDACTED)
+        .replace(BEARER, `Bearer ${REDACTED}`)
+        .replace(FIELD_VALUE, scrubbed);
+    if (HAS_FIELD.test(out))
+        out = out.replace(CREDENTIAL_VALUE, scrubbed);
+    return out.replace(HEX_KEY, REDACTED);
+}
+// ── Storage (best effort) ──────────────────────────────────────────────────
+function storageKey(name) {
+    try {
+        return `${tollboothConfig().storagePrefix}:${name}`;
+    }
+    catch {
+        return null; // not configured yet: nothing to read or write
+    }
+}
+function readLocal(name) {
+    const k = storageKey(name);
+    if (!k)
+        return null;
+    try {
+        return globalThis.localStorage?.getItem(k) ?? null;
+    }
+    catch {
+        return null;
+    }
+}
+function writeLocal(name, value) {
+    const k = storageKey(name);
+    if (!k)
+        return;
+    try {
+        globalThis.localStorage?.setItem(k, value);
+    }
+    catch {
+        /* quota or blocked site data — the in-memory log still works */
+    }
+}
+const LOG_KEY = "debug-log:v1";
+function save() {
+    if (persist)
+        writeLocal(LOG_KEY, JSON.stringify(log));
+}
+function hydrate() {
+    try {
+        const parsed = JSON.parse(readLocal(LOG_KEY) ?? "[]");
+        if (!Array.isArray(parsed))
+            return [];
+        return parsed
+            .filter((e) => !!e && typeof e.message === "string" && typeof e.ts === "string")
+            .map((e) => ({ ts: e.ts, type: e.type, message: redact(e.message) }));
+    }
+    catch {
+        return [];
+    }
+}
+/**
+ * The patron's display zone, if the site stores one under `<prefix>:timezone`
+ * ("auto" or absent means the browser's own), so stamps match the rest of the UI.
+ */
+function stamp(now) {
+    try {
+        const pref = readLocal("timezone");
+        const zone = pref && pref !== "auto" ? pref : undefined;
+        return now.toLocaleTimeString(undefined, zone ? { timeZone: zone } : undefined);
+    }
+    catch {
+        return now.toLocaleTimeString();
+    }
+}
+function emit() {
+    save();
     listeners.forEach((fn) => fn());
 }
+// ── API ────────────────────────────────────────────────────────────────────
+/** Set the cap and persistence. Call after `configureTollbooth`. */
+export function configureDebugLog(options) {
+    if (options.max !== undefined) {
+        if (!Number.isInteger(options.max) || options.max < 1)
+            throw new Error("max must be a positive integer");
+        max = options.max;
+    }
+    if (options.persist !== undefined) {
+        persist = options.persist;
+        if (persist)
+            log = [...log, ...hydrate()];
+    }
+    log = log.slice(0, max);
+    emit();
+}
+export function debugPush(type, message) {
+    log = [{ ts: stamp(new Date()), type, message: redact(String(message)) }, ...log].slice(0, max);
+    emit();
+}
 export function clearDebug() {
-    log.length = 0;
-    listeners.forEach((fn) => fn());
+    log = [];
+    emit();
 }
+/** The entries, newest first. The same array until the log changes. */
 export function debugEntries() {
     return log;
 }
 /** Subscribe to changes. Returns an unsubscribe function. */
 export function onDebug(fn) {
     listeners.add(fn);
-    return () => listeners.delete(fn);
+    return () => {
+        listeners.delete(fn);
+    };
+}
+/** The whole log as plain text, newest first — for Copy and bug reports. */
+export function debugLogText() {
+    return log.map((e) => `${e.ts}  ${e.type.toUpperCase()}  ${e.message}`).join("\n");
+}
+// Auth and funding outcomes are situations, not faults: the service answered
+// correctly and the patron has a step to take (sign in, top up). These SDK
+// error codes read as a notice and stay out of the failure count.
+const NOTICE_CODE = /error_code\\?"\s*:\s*\\?"(npub_missing|proof_missing|proof_required|proof_refresh_needed|dpop_token_missing|oauth_not_yet_authorized|oauth_token_expired|upstream_auth_refresh_needed|insufficient_balance|authority_insufficient_balance|upstream_subscription_required|operator_llm_unfunded)\\?"/i;
+function isFailure(entry) {
+    if (entry.type === "error")
+        return true;
+    if (entry.type !== "result")
+        return false;
+    const m = entry.message;
+    return m.includes('"success":false') || m.includes('"ok":false') || m.includes('"error"') || m.includes("error_code");
+}
+/** How a panel should flag an entry: a fault, a patron's next step, or neither. */
+export function debugSeverity(entry) {
+    if (!isFailure(entry))
+        return "ok";
+    return NOTICE_CODE.test(entry.message) ? "notice" : "failure";
+}
+// ── Page-wide capture ──────────────────────────────────────────────────────
+let captured = false;
+/**
+ * Fold uncaught errors and promise rejections into the log, once per page
+ * (guarded, so StrictMode and remounts do not double-register).
+ */
+export function captureGlobalErrors() {
+    if (captured || typeof globalThis.addEventListener !== "function")
+        return;
+    captured = true;
+    globalThis.addEventListener("error", (e) => debugPush("error", `window.error: ${e.message}`));
+    globalThis.addEventListener("unhandledrejection", (e) => debugPush("error", `unhandledrejection: ${String(e.reason)}`));
 }

package/dist/index.d.ts

@@ -11,4 +11,4 @@ export { canSignFor, isProven, type Claim } from "./signedIn.ts";
 export { readSignInFailure, type Situation } from "./signInSituation.ts";
 export { canSignProfile, fetchProfile, publishProfile } from "./nostrProfile.ts";
 export * from "./avatar.ts";
-export { clearDebug, debugEntries, debugPush, onDebug, type DebugEntry } from "./debugLog.ts";
+export { captureGlobalErrors, clearDebug, configureDebugLog, debugEntries, debugLogText, debugPush, debugSeverity, onDebug, redact, type DebugEntry, type DebugLogOptions, type DebugSeverity, } from "./debugLog.ts";

package/dist/index.js

@@ -10,4 +10,4 @@ export { canSignFor, isProven } from "./signedIn.js";
 export { readSignInFailure } from "./signInSituation.js";
 export { canSignProfile, fetchProfile, publishProfile } from "./nostrProfile.js";
 export * from "./avatar.js";
-export { clearDebug, debugEntries, debugPush, onDebug } from "./debugLog.js";
+export { captureGlobalErrors, clearDebug, configureDebugLog, debugEntries, debugLogText, debugPush, debugSeverity, onDebug, redact, } from "./debugLog.js";

package/dist/react/DebugPanel.d.ts

@@ -0,0 +1,28 @@
+/**
+ * The on-screen MCP activity log — a bar fixed to the bottom of the page that
+ * shows every call, result and error, so anyone can see what the front end is
+ * doing and paste it into a bug report.
+ *
+ * Collapsed it is one tab whose colour says whether anything failed (red) or
+ * is waiting on the patron (a notice: sign in, top up). Open, it lists the log
+ * newest first with Copy and Clear. Everything shown comes from the scrubbed
+ * store, so no nsec, proof or token can be painted here.
+ *
+ * `children` is the site's own section — eXcalibur puts its scheduler controls
+ * there — drawn above the log while the panel is open.
+ *
+ * Touch-first: every control is a real button at least 40px square, nothing
+ * hides behind hover, and the page under the bar stays tappable.
+ */
+import { type ReactNode } from "react";
+export interface DebugPanelProps {
+    /** The tab's label. Default "Debug". */
+    title?: string;
+    /** Open on first visit; afterwards the patron's last choice wins. */
+    defaultOpen?: boolean;
+    /** Fold uncaught errors and proof expiries into the log. Default true. */
+    captureErrors?: boolean;
+    /** The site's own section, shown above the log while open. */
+    children?: ReactNode;
+}
+export default function DebugPanel({ title, defaultOpen, captureErrors, children, }: DebugPanelProps): import("react").JSX.Element;

package/dist/react/DebugPanel.js

@@ -0,0 +1,81 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The on-screen MCP activity log — a bar fixed to the bottom of the page that
+ * shows every call, result and error, so anyone can see what the front end is
+ * doing and paste it into a bug report.
+ *
+ * Collapsed it is one tab whose colour says whether anything failed (red) or
+ * is waiting on the patron (a notice: sign in, top up). Open, it lists the log
+ * newest first with Copy and Clear. Everything shown comes from the scrubbed
+ * store, so no nsec, proof or token can be painted here.
+ *
+ * `children` is the site's own section — eXcalibur puts its scheduler controls
+ * there — drawn above the log while the panel is open.
+ *
+ * Touch-first: every control is a real button at least 40px square, nothing
+ * hides behind hover, and the page under the bar stays tappable.
+ */
+import { useEffect, useState } from "react";
+import { onProofExpired } from "../client.js";
+import { captureGlobalErrors, clearDebug, debugLogText, debugPush, debugSeverity, } from "../debugLog.js";
+import { readStored, writeStored } from "../storage.js";
+import { useDebugLog } from "./useDebugLog.js";
+const OPEN_KEY = "debug-open";
+const TYPE_INK = {
+    info: "text-[var(--tb-accent)]",
+    call: "text-[var(--tb-warn-ink)]",
+    result: "text-[var(--tb-ok)]",
+    error: "text-[var(--tb-err-ink)]",
+};
+const FLAGGED = {
+    failure: { row: "bg-[var(--tb-err-bg)]", ink: "text-[var(--tb-err-ink)] font-bold" },
+    notice: { row: "bg-[var(--tb-notice-bg)]", ink: "text-[var(--tb-notice-ink)]" },
+};
+const tab = "min-h-10 min-w-10 rounded-t-lg px-4 text-xs font-medium border border-b-0 transition-colors";
+const plainTab = `${tab} bg-[var(--tb-surface-2)] text-[var(--tb-ink)] border-[var(--tb-line)]`;
+export default function DebugPanel({ title = "Debug", defaultOpen = false, captureErrors = true, children, }) {
+    const log = useDebugLog();
+    const [open, setOpen] = useState(() => {
+        const saved = readStored(OPEN_KEY);
+        return saved === "" ? defaultOpen : saved === "1";
+    });
+    const [copied, setCopied] = useState("");
+    useEffect(() => {
+        if (!captureErrors)
+            return;
+        captureGlobalErrors();
+        return onProofExpired((msg) => debugPush("info", `proof expired → back to sign-in: ${msg}`));
+    }, [captureErrors]);
+    useEffect(() => {
+        if (!copied)
+            return;
+        const id = setTimeout(() => setCopied(""), 1500);
+        return () => clearTimeout(id);
+    }, [copied]);
+    function toggle() {
+        const next = !open;
+        setOpen(next);
+        writeStored(OPEN_KEY, next ? "1" : "0");
+    }
+    function copy() {
+        const text = debugLogText();
+        const clip = globalThis.navigator?.clipboard;
+        if (!clip) {
+            setCopied("failed");
+            return;
+        }
+        clip.writeText(text).then(() => setCopied("ok"), () => setCopied("failed"));
+    }
+    const failures = log.filter((e) => debugSeverity(e) === "failure").length;
+    const notices = log.filter((e) => debugSeverity(e) === "notice").length;
+    const toggleTone = failures > 0
+        ? "bg-[var(--tb-err-bg)] text-[var(--tb-err-ink)] border-[var(--tb-err-line)]"
+        : notices > 0
+            ? "bg-[var(--tb-notice-bg)] text-[var(--tb-notice-ink)] border-[var(--tb-notice-line)]"
+            : "bg-[var(--tb-surface-2)] text-[var(--tb-ink)] border-[var(--tb-line)]";
+    return (_jsxs("div", { className: "pointer-events-none fixed inset-x-0 bottom-0 z-50 flex flex-col items-end", children: [_jsxs("div", { className: "pointer-events-auto flex flex-wrap justify-end gap-1 pr-3", children: [open && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: copy, className: plainTab, "aria-label": "Copy the whole log", children: copied === "ok" ? "Copied" : copied === "failed" ? "Copy failed" : "Copy" }), _jsx("button", { type: "button", onClick: clearDebug, className: plainTab, children: "Clear" })] })), _jsxs("button", { type: "button", onClick: toggle, "aria-expanded": open, className: `${tab} ${toggleTone}`, children: [open ? "Hide" : title, " (", log.length, failures > 0 ? ` · ${failures} err` : "", notices > 0 ? ` · ${notices} notice` : "", ")"] })] }), open && (_jsxs("div", { className: "pointer-events-auto max-h-[40vh] w-full overflow-y-auto border-t border-[var(--tb-line)] bg-[var(--tb-surface)] p-3 font-mono text-xs text-[var(--tb-ink)]", children: [children && _jsx("div", { className: "mb-2 border-b border-[var(--tb-line)] pb-2 font-sans", children: children }), log.length === 0 && _jsx("div", { className: "text-[var(--tb-muted)]", children: "No MCP activity yet." }), log.map((entry, i) => {
+                        const sev = debugSeverity(entry);
+                        const flag = sev === "ok" ? null : FLAGGED[sev];
+                        return (_jsxs("div", { className: `-mx-1 flex gap-2 rounded px-1 py-0.5 ${flag?.row ?? ""}`, children: [_jsx("span", { className: "shrink-0 text-[var(--tb-muted)]", children: entry.ts }), _jsxs("span", { className: `w-14 shrink-0 ${flag?.ink ?? TYPE_INK[entry.type]}`, children: [sev === "notice" ? "notice" : entry.type, sev === "failure" && entry.type !== "error" ? " !" : ""] }), _jsx("span", { className: `min-w-0 break-all ${flag?.ink ?? ""}`, children: entry.message })] }, log.length - i));
+                    })] }))] }));
+}

package/dist/react/index.d.ts

@@ -1,7 +1,9 @@
 export { default as Avatar } from "./Avatar.tsx";
 export { default as AvatarPicker } from "./AvatarPicker.tsx";
+export { default as DebugPanel, type DebugPanelProps } from "./DebugPanel.tsx";
 export { default as NpubGate } from "./NpubGate.tsx";
 export { default as NostrProfilePanel } from "./NostrProfilePanel.tsx";
 export { default as SessionKeyClaim } from "./SessionKeyClaim.tsx";
 export { default as WalletCard } from "./WalletCard.tsx";
 export { useSession, type Session } from "./useSession.ts";
+export { useDebugLog } from "./useDebugLog.ts";

package/dist/react/index.js

@@ -1,7 +1,9 @@
 export { default as Avatar } from "./Avatar.js";
 export { default as AvatarPicker } from "./AvatarPicker.js";
+export { default as DebugPanel } from "./DebugPanel.js";
 export { default as NpubGate } from "./NpubGate.js";
 export { default as NostrProfilePanel } from "./NostrProfilePanel.js";
 export { default as SessionKeyClaim } from "./SessionKeyClaim.js";
 export { default as WalletCard } from "./WalletCard.js";
 export { useSession } from "./useSession.js";
+export { useDebugLog } from "./useDebugLog.js";

package/dist/react/useDebugLog.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The debug log's entries, newest first, re-rendering whenever they change.
+ * Entries are already scrubbed of secrets by `debugPush`.
+ */
+import { type DebugEntry } from "../debugLog.ts";
+export declare function useDebugLog(): readonly DebugEntry[];

package/dist/react/useDebugLog.js

@@ -0,0 +1,9 @@
+/**
+ * The debug log's entries, newest first, re-rendering whenever they change.
+ * Entries are already scrubbed of secrets by `debugPush`.
+ */
+import { useSyncExternalStore } from "react";
+import { debugEntries, onDebug } from "../debugLog.js";
+export function useDebugLog() {
+    return useSyncExternalStore(onDebug, debugEntries, debugEntries);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tollbooth-dpyc/web",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Shared browser SDK for Tollbooth DPYC operator front ends: npub sign-in, proofs, MCP client, profile and wallet",
   "license": "Apache-2.0",
   "author": "Lonnie VanZandt",

package/theme.css

@@ -25,6 +25,9 @@
   --tb-err-bg: #fdecec;
   --tb-err-line: #f2b8b8;
   --tb-err-ink: #9b1c1c;
+  --tb-notice-bg: #f4ecfd;
+  --tb-notice-line: #d6bdf5;
+  --tb-notice-ink: #5b2a91;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -43,5 +46,8 @@
     --tb-err-bg: #2c1515;
     --tb-err-line: #5e2525;
     --tb-err-ink: #f4a3a3;
+    --tb-notice-bg: #241532;
+    --tb-notice-line: #4d2d6e;
+    --tb-notice-ink: #d8b4fe;
   }
 }