@tollbooth-dpyc/web 0.2.0 → 0.4.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`, `QuoteScroller`, `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,47 @@ 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.
+
+### Quote scroller
+
+Something to read while a page loads. The quotes are the site's own; the
+package only scrolls them. Name a remote corpus to edit the set without a
+redeploy — it is fetched once per page and replaces the inline set when it
+arrives, or never, if it cannot be had:
+
+```tsx
+import { QuoteScroller } from "@tollbooth-dpyc/web/react";
+import type { Quote } from "@tollbooth-dpyc/web";
+
+const QUOTES: Quote[] = [{ text: "Observe the seasons.", author: "Hesiod" }];
+
+<QuoteScroller
+  quotes={QUOTES}
+  source="https://raw.githubusercontent.com/lonniev/dpyc-community/main/quotes-agrarian.json"
+  heading="Reading the ledger…"
+  spinner
+/>
+```
+
 ### 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,5 @@ 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 { loadQuotes, peekQuotes, shuffle, validQuotes, type Quote } from "./quotes.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,5 @@ 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 { loadQuotes, peekQuotes, shuffle, validQuotes } from "./quotes.js";
+export { captureGlobalErrors, clearDebug, configureDebugLog, debugEntries, debugLogText, debugPush, debugSeverity, onDebug, redact, } from "./debugLog.js";

package/dist/quotes.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Quotations for a wait: something to read while a page loads, instead of a
+ * frozen "Loading…".
+ *
+ * Each site keeps its own set — agrarian for a farm, copywriters for a posting
+ * tool — and may name a remote corpus (a `{ quotes: [{ text, author }] }` JSON
+ * file) that supersedes it once it loads, so the set can be edited without a
+ * redeploy. The remote file is fetched at most once per page per URL; two
+ * sites or two corpora never share a cache entry. Anything that goes wrong —
+ * offline, a 404, a malformed file, an empty list — leaves the site's own set
+ * on screen.
+ */
+export interface Quote {
+    text: string;
+    author: string;
+}
+/** Keep only well-formed rows: both fields present as non-blank strings. */
+export declare function validQuotes(rows: unknown): Quote[];
+/** A shuffled copy (Fisher–Yates); the input is left alone. */
+export declare function shuffle<T>(items: ReadonlyArray<T>, random?: () => number): T[];
+/** The remote list already loaded for `source` this page, if there is one. */
+export declare function peekQuotes(source: string): Quote[] | undefined;
+/**
+ * The quotes at `source`, or `fallback` when they cannot be had. Fetched once
+ * per page per URL; a failure is remembered too, so a broken corpus costs one
+ * request, not one per spinner.
+ */
+export declare function loadQuotes(source: string, fallback: ReadonlyArray<Quote>, fetchImpl?: typeof fetch): Promise<Quote[]>;

package/dist/quotes.js

@@ -0,0 +1,77 @@
+/**
+ * Quotations for a wait: something to read while a page loads, instead of a
+ * frozen "Loading…".
+ *
+ * Each site keeps its own set — agrarian for a farm, copywriters for a posting
+ * tool — and may name a remote corpus (a `{ quotes: [{ text, author }] }` JSON
+ * file) that supersedes it once it loads, so the set can be edited without a
+ * redeploy. The remote file is fetched at most once per page per URL; two
+ * sites or two corpora never share a cache entry. Anything that goes wrong —
+ * offline, a 404, a malformed file, an empty list — leaves the site's own set
+ * on screen.
+ */
+/** Keep only well-formed rows: both fields present as non-blank strings. */
+export function validQuotes(rows) {
+    if (!Array.isArray(rows))
+        return [];
+    return rows.flatMap((row) => {
+        if (typeof row !== "object" || row === null)
+            return [];
+        const { text, author } = row;
+        if (typeof text !== "string" || typeof author !== "string")
+            return [];
+        if (!text.trim() || !author.trim())
+            return [];
+        return [{ text, author }];
+    });
+}
+/** A shuffled copy (Fisher–Yates); the input is left alone. */
+export function shuffle(items, random = Math.random) {
+    const copy = items.slice();
+    for (let i = copy.length - 1; i > 0; i--) {
+        const j = Math.floor(random() * (i + 1));
+        [copy[i], copy[j]] = [copy[j], copy[i]];
+    }
+    return copy;
+}
+// Per source URL: the validated remote list ([] when the fetch failed), and
+// the one request in flight so concurrent callers share it.
+const loaded = new Map();
+const inflight = new Map();
+/** The remote list already loaded for `source` this page, if there is one. */
+export function peekQuotes(source) {
+    const list = loaded.get(source);
+    return list && list.length ? list : undefined;
+}
+/**
+ * The quotes at `source`, or `fallback` when they cannot be had. Fetched once
+ * per page per URL; a failure is remembered too, so a broken corpus costs one
+ * request, not one per spinner.
+ */
+export async function loadQuotes(source, fallback, fetchImpl = globalThis.fetch) {
+    const pick = (list) => (list.length ? list : fallback.slice());
+    const done = loaded.get(source);
+    if (done)
+        return pick(done);
+    let pending = inflight.get(source);
+    if (!pending) {
+        pending = (async () => {
+            let list = [];
+            try {
+                const res = await fetchImpl(source, { cache: "no-cache" });
+                if (res.ok) {
+                    const body = (await res.json());
+                    list = validQuotes(body?.quotes);
+                }
+            }
+            catch {
+                list = [];
+            }
+            loaded.set(source, list);
+            inflight.delete(source);
+            return list;
+        })();
+        inflight.set(source, pending);
+    }
+    return pick(await pending);
+}

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/QuoteScroller.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Something worth reading while a page loads — rotating quotations instead of
+ * a frozen "Loading…". First written for optionality-mcp as a port of the
+ * Pricing Studio app's LoadingQuoteView, then copied across the fleet; this is
+ * the one copy.
+ *
+ * The site brings its own quotes (`quotes`), so the scroller always has
+ * something to show without the network. `source` may name a remote corpus
+ * that supersedes them once it loads (see `loadQuotes`).
+ *
+ * The order is shuffled and then walked, so nothing repeats until every quote
+ * has shown. It cross-fades (instantly under reduced motion), stops while the
+ * tab is hidden, and reserves the height of its longest quote so the page
+ * does not jump as quotes change. Coloured only through `--tb-*` tokens.
+ */
+import { type Quote } from "../quotes.ts";
+export interface QuoteScrollerProps {
+    /** The site's own quotes: shown at once, and kept if `source` fails. Pass a
+     *  module constant. */
+    quotes: ReadonlyArray<Quote>;
+    /** URL of a `{ quotes: [{ text, author }] }` JSON file that supersedes
+     *  `quotes` once it loads. */
+    source?: string;
+    /** A status line above the quotes ("Reading the ledger…"). */
+    heading?: string;
+    /** Show a spinner beside the heading. Default false. */
+    spinner?: boolean;
+    /** How long each quote stays, in ms. Default 3500. */
+    intervalMs?: number;
+    /** Classes for the outer box (padding, placement). */
+    className?: string;
+}
+export default function QuoteScroller({ quotes, source, heading, spinner, intervalMs, className, }: QuoteScrollerProps): import("react").JSX.Element;

package/dist/react/QuoteScroller.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Something worth reading while a page loads — rotating quotations instead of
+ * a frozen "Loading…". First written for optionality-mcp as a port of the
+ * Pricing Studio app's LoadingQuoteView, then copied across the fleet; this is
+ * the one copy.
+ *
+ * The site brings its own quotes (`quotes`), so the scroller always has
+ * something to show without the network. `source` may name a remote corpus
+ * that supersedes them once it loads (see `loadQuotes`).
+ *
+ * The order is shuffled and then walked, so nothing repeats until every quote
+ * has shown. It cross-fades (instantly under reduced motion), stops while the
+ * tab is hidden, and reserves the height of its longest quote so the page
+ * does not jump as quotes change. Coloured only through `--tb-*` tokens.
+ */
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Loader2 } from "lucide-react";
+import { loadQuotes, peekQuotes, shuffle } from "../quotes.js";
+const FADE_MS = 450;
+function useReducedMotion() {
+    const query = "(prefers-reduced-motion: reduce)";
+    const [reduced, setReduced] = useState(() => typeof window !== "undefined" && !!window.matchMedia?.(query).matches);
+    useEffect(() => {
+        const mq = window.matchMedia?.(query);
+        if (!mq)
+            return;
+        const on = () => setReduced(mq.matches);
+        mq.addEventListener("change", on);
+        return () => mq.removeEventListener("change", on);
+    }, []);
+    return reduced;
+}
+function usePageVisible() {
+    const [shown, setShown] = useState(() => typeof document === "undefined" || document.visibilityState !== "hidden");
+    useEffect(() => {
+        const on = () => setShown(document.visibilityState !== "hidden");
+        document.addEventListener("visibilitychange", on);
+        return () => document.removeEventListener("visibilitychange", on);
+    }, []);
+    return shown;
+}
+export default function QuoteScroller({ quotes, source, heading, spinner = false, intervalMs = 3500, className = "", }) {
+    const reduced = useReducedMotion();
+    const pageVisible = usePageVisible();
+    // Content, not identity: a site that passes an inline array still gets one
+    // shuffle, not one per render.
+    const signature = quotes.map((q) => `${q.text}\u0000${q.author}`).join("\u0001");
+    const [list, setList] = useState(() => shuffle((source && peekQuotes(source)) || quotes));
+    const [index, setIndex] = useState(0);
+    const [shown, setShown] = useState(false);
+    const key = `${source ?? ""}\u0002${signature}`;
+    const first = useRef(key);
+    useEffect(() => {
+        if (first.current !== key) {
+            first.current = key;
+            setList(shuffle((source && peekQuotes(source)) || quotes));
+            setIndex(0);
+        }
+        if (!source || peekQuotes(source))
+            return; // nothing to fetch, or already showing it
+        let alive = true;
+        void loadQuotes(source, quotes).then((loaded) => {
+            if (!alive || !peekQuotes(source))
+                return; // the site's own set is already up
+            setList(shuffle(loaded));
+            setIndex(0);
+        });
+        return () => {
+            alive = false;
+        };
+        // `key` stands for `quotes` and `source`, by content.
+    }, [key]);
+    // Fade the first quote in.
+    useEffect(() => {
+        const id = window.setTimeout(() => setShown(true), 30);
+        return () => window.clearTimeout(id);
+    }, []);
+    useEffect(() => {
+        if (list.length <= 1 || !pageVisible)
+            return;
+        const fade = reduced ? 0 : FADE_MS;
+        let swap;
+        const tick = window.setInterval(() => {
+            setShown(false);
+            swap = window.setTimeout(() => {
+                setIndex((i) => (i + 1) % list.length);
+                setShown(true);
+            }, fade);
+        }, intervalMs);
+        return () => {
+            window.clearInterval(tick);
+            window.clearTimeout(swap);
+            setShown(true);
+        };
+    }, [list, intervalMs, reduced, pageVisible]);
+    const longest = useMemo(() => list.reduce((a, q) => (!a || q.text.length + q.author.length > a.text.length + a.author.length ? q : a), undefined), [list]);
+    const q = list[index % Math.max(list.length, 1)];
+    return (_jsxs("div", { className: `px-4 py-6 text-center ${className}`, children: [heading && (_jsxs("div", { className: "mb-5 flex items-center justify-center gap-2 font-mono text-[11px] uppercase tracking-[0.3em] text-[var(--tb-accent)]", children: [spinner && _jsx(Loader2, { "aria-hidden": true, className: "h-3.5 w-3.5 motion-safe:animate-spin" }), heading] })), q && longest && (_jsxs("div", { className: "mx-auto grid max-w-xl", children: [_jsx(QuoteText, { quote: longest, className: "invisible [grid-area:1/1]", hidden: true }), _jsx(QuoteText, { quote: q, className: "[grid-area:1/1]", style: {
+                            opacity: shown ? 1 : 0,
+                            transition: reduced ? "none" : `opacity ${FADE_MS}ms ease`,
+                        }, live: true })] }))] }));
+}
+function QuoteText({ quote, className, style, hidden = false, live = false, }) {
+    return (_jsxs("figure", { className: `m-0 flex flex-col justify-center gap-3 ${className}`, style: style, "aria-hidden": hidden || undefined, "aria-live": live ? "polite" : undefined, "aria-atomic": live || undefined, children: [_jsxs("blockquote", { className: "m-0 font-serif text-[17px] italic leading-relaxed text-[var(--tb-ink)]", children: [_jsx("span", { className: "not-italic text-[var(--tb-accent)]", children: "\u201C" }), quote.text, _jsx("span", { className: "not-italic text-[var(--tb-accent)]", children: "\u201D" })] }), _jsx("figcaption", { className: "font-mono text-[10.5px] uppercase tracking-[0.22em] text-[var(--tb-muted)]", children: quote.author })] }));
+}

package/dist/react/index.d.ts

@@ -1,7 +1,10 @@
 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 QuoteScroller, type QuoteScrollerProps } from "./QuoteScroller.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,10 @@
 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 QuoteScroller } from "./QuoteScroller.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.4.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;
   }
 }