@tollbooth-dpyc/web 1.5.0 → 1.5.1

package/README.md

@@ -227,6 +227,10 @@ function Nav() {
   the lapsed-sign-in note), or the gate alone. The frame is a column: "page"
   grows with the content; "viewport" pins it to the screen and lets the
   content shrink, so the debug log's spacer never pushes a bottom rail off.
+  `shell.statusState` is `"connecting"`, `"ready"` or `"failed"`;
+  `shell.statusError` is the failure as one short, scrubbed line; and
+  `shell.retryStatus()` runs the check again — so a banner can say
+  "connection failed" rather than "Connecting…" through an outage.
 - `SiteNav`: brand, pages (icon, label, badge), `trailing`, and an account
   menu (avatar → identity, links, Log out). Below `collapse` (default
   `(max-width: 639px)`; `false` never) the pages fold into a menu button.

package/dist/react/AppShell.d.ts

@@ -12,8 +12,9 @@
  * `signedOut` the gate is the page.
  *
  * Inside, `useAppShell()` gives any component the same `shell` — the npub,
- * `signOut`, the `service_status` answer — so a site keeps no session context
- * of its own.
+ * `signOut`, the `service_status` answer and whether that check is still
+ * connecting, answered or failed (with `retryStatus()` to ask again) — so a
+ * site keeps no session context of its own.
  *
  * Also done here, once: the stored theme applied before paint and followed
  * across tabs; the npub's kind-0 picture seeded as its avatar; `DebugPanel`
@@ -24,11 +25,18 @@ import { type ServiceStatus } from "../standardTools.ts";
 import { type Theme } from "../theme.ts";
 import { type DebugPanelProps } from "./DebugPanel.tsx";
 import { type ShellFit } from "./shellLayout.ts";
+import { type StatusState } from "./statusCheck.ts";
 import { type Session } from "./useSession.ts";
 export interface AppShellContext {
     session: Session;
     /** The `service_status` answer, or null until (or unless) it comes. */
     status: ServiceStatus | null;
+    /** Where the `service_status` check stands: "connecting", "ready" or "failed". */
+    statusState: StatusState;
+    /** Why the last check failed — short, human, scrubbed of secrets — or null. */
+    statusError: string | null;
+    /** Run the `service_status` check again (back to "connecting" until it settles). */
+    retryStatus: () => void;
     /** The sign-in gate, ready to place. */
     gate: ReactNode;
 }

package/dist/react/AppShell.js

@@ -13,20 +13,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * `signedOut` the gate is the page.
  *
  * Inside, `useAppShell()` gives any component the same `shell` — the npub,
- * `signOut`, the `service_status` answer — so a site keeps no session context
- * of its own.
+ * `signOut`, the `service_status` answer and whether that check is still
+ * connecting, answered or failed (with `retryStatus()` to ask again) — so a
+ * site keeps no session context of its own.
  *
  * Also done here, once: the stored theme applied before paint and followed
  * across tabs; the npub's kind-0 picture seeded as its avatar; `DebugPanel`
  * mounted last, so its spacer is the page's last thing (see `shellLayout`).
  */
-import { createContext, useContext, useEffect, useLayoutEffect, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useReducer, useRef } from "react";
 import { hydrateAvatarFromNostr } from "../avatar.js";
+import { debugPush } from "../debugLog.js";
 import { serviceStatus } from "../standardTools.js";
 import { bootstrapTheme } from "../theme.js";
 import DebugPanel, {} from "./DebugPanel.js";
 import NpubGate from "./NpubGate.js";
 import { shellLayout } from "./shellLayout.js";
+import { STATUS_CONNECTING, statusReducer } from "./statusCheck.js";
 import { useSession } from "./useSession.js";
 import { useTheme } from "./useTheme.js";
 const Ctx = createContext(null);
@@ -39,27 +42,41 @@ export function useAppShell() {
 }
 export default function AppShell({ children, signedOut, footer, debug = {}, theme = "dark", fit = "page", startFresh, classNames: c = {}, }) {
     const session = useSession();
-    const [status, setStatus] = useState(null);
+    const [check, dispatch] = useReducer(statusReducer, STATUS_CONNECTING);
+    const attempt = useRef(0);
     useTheme(theme);
     useLayoutEffect(() => {
         bootstrapTheme(theme);
     }, [theme]);
+    // Only the newest check settles the state: a slow first answer must not
+    // overwrite a retry's, and an unmounted shell settles nothing.
+    const retryStatus = useCallback(() => {
+        const mine = ++attempt.current;
+        dispatch({ type: "start" });
+        serviceStatus({ bestEffort: true }).then((s) => {
+            if (attempt.current === mine)
+                dispatch({ type: "ok", status: s });
+        }, (e) => {
+            // service_status is a quiet call, so its failure is logged here.
+            debugPush("error", `service_status failed: ${e instanceof Error ? e.message : String(e)}`);
+            if (attempt.current === mine)
+                dispatch({ type: "fail", error: e });
+        });
+    }, []);
     useEffect(() => {
-        let live = true;
-        serviceStatus({ bestEffort: true })
-            .then((s) => live && setStatus(s))
-            .catch(() => live && setStatus(null));
+        retryStatus();
         return () => {
-            live = false;
+            attempt.current++;
         };
-    }, []);
+    }, [retryStatus]);
     const { npub, signedIn, notice, refresh } = session;
     useEffect(() => {
         if (signedIn && npub)
             void hydrateAvatarFromNostr(npub);
     }, [signedIn, npub]);
+    const { status, state: statusState, error: statusError } = check;
     const gate = (_jsx(NpubGate, { onLogin: refresh, operatorHash: status?.operator_npub_hash, notice: notice, startFresh: startFresh }));
-    const shell = { session, status, gate };
+    const shell = { session, status, statusState, statusError, retryStatus, gate };
     const layout = shellLayout(fit);
     return (_jsx(Ctx.Provider, { value: shell, children: _jsxs("div", { className: c.root, style: layout.root, children: [_jsx("div", { className: c.body, style: layout.body, children: signedIn ? children(shell) : signedOut ? signedOut(shell) : gate }), typeof footer === "function" ? footer(shell) : footer, debug !== false && _jsx(DebugPanel, { ...debug })] }) }));
 }

package/dist/react/index.d.ts

@@ -1,6 +1,7 @@
 export { default as AccountPage, type AccountPageClassNames, type AccountPageProps, type AccountSectionText, type AccountThemeProps, type AccountTimezoneProps, } from "./AccountPage.tsx";
 export { ACCOUNT_SECTIONS, type AccountSection } from "./accountSections.ts";
 export { default as AppShell, useAppShell, type AppShellClassNames, type AppShellContext, type AppShellProps, } from "./AppShell.tsx";
+export { statusErrorMessage, type StatusState } from "./statusCheck.ts";
 export type { ShellFit } from "./shellLayout.ts";
 export { default as Avatar } from "./Avatar.tsx";
 export { default as AvatarPicker } from "./AvatarPicker.tsx";

package/dist/react/index.js

@@ -1,6 +1,7 @@
 export { default as AccountPage, } from "./AccountPage.js";
 export { ACCOUNT_SECTIONS } from "./accountSections.js";
 export { default as AppShell, useAppShell, } from "./AppShell.js";
+export { statusErrorMessage } from "./statusCheck.js";
 export { default as Avatar } from "./Avatar.js";
 export { default as AvatarPicker } from "./AvatarPicker.js";
 export { default as BuildInfoPanel, } from "./BuildInfoPanel.js";

package/dist/react/statusCheck.d.ts

@@ -0,0 +1,34 @@
+/**
+ * The shell's `service_status` check as three states a site can tell apart:
+ * still connecting, answered, or failed. Before this a failed check read as
+ * "no answer yet", so a banner said "Connecting…" through a whole outage.
+ *
+ * Pure: `AppShell` feeds it events, and the tests feed it the same ones.
+ */
+import type { ServiceStatus } from "../standardTools.ts";
+export type StatusState = "connecting" | "ready" | "failed";
+export interface StatusCheck {
+    state: StatusState;
+    /** The last `service_status` answer; kept through a retry. */
+    status: ServiceStatus | null;
+    /** Why the last check failed — short, human, scrubbed — or null. */
+    error: string | null;
+}
+export type StatusEvent = {
+    type: "start";
+} | {
+    type: "ok";
+    status: ServiceStatus;
+} | {
+    type: "fail";
+    error: unknown;
+};
+export declare const STATUS_CONNECTING: StatusCheck;
+/** The longest `statusError` a banner is handed. */
+export declare const STATUS_ERROR_MAX = 140;
+/**
+ * A failed check as one short line: scrubbed of secrets, the runtime tool
+ * name dropped, whitespace collapsed, cut at `STATUS_ERROR_MAX`.
+ */
+export declare function statusErrorMessage(error: unknown): string;
+export declare function statusReducer(check: StatusCheck, event: StatusEvent): StatusCheck;

package/dist/react/statusCheck.js

@@ -0,0 +1,39 @@
+/**
+ * The shell's `service_status` check as three states a site can tell apart:
+ * still connecting, answered, or failed. Before this a failed check read as
+ * "no answer yet", so a banner said "Connecting…" through a whole outage.
+ *
+ * Pure: `AppShell` feeds it events, and the tests feed it the same ones.
+ */
+import { redact } from "../debugLog.js";
+import { isNetworkError } from "../networkError.js";
+export const STATUS_CONNECTING = { state: "connecting", status: null, error: null };
+/** The longest `statusError` a banner is handed. */
+export const STATUS_ERROR_MAX = 140;
+/**
+ * A failed check as one short line: scrubbed of secrets, the runtime tool
+ * name dropped, whitespace collapsed, cut at `STATUS_ERROR_MAX`.
+ */
+export function statusErrorMessage(error) {
+    const raw = error instanceof Error ? error.message : String(error ?? "");
+    const why = redact(raw)
+        .replace(/^[a-z0-9_]*service_status:\s*/i, "")
+        .replace(/\s+/g, " ")
+        .trim();
+    const line = isNetworkError(error)
+        ? why
+            ? `Could not reach the service — ${why}`
+            : "Could not reach the service"
+        : why || "The service did not answer";
+    return line.length > STATUS_ERROR_MAX ? `${line.slice(0, STATUS_ERROR_MAX - 1)}…` : line;
+}
+export function statusReducer(check, event) {
+    switch (event.type) {
+        case "start":
+            return { state: "connecting", status: check.status, error: null };
+        case "ok":
+            return { state: "ready", status: event.status, error: null };
+        case "fail":
+            return { state: "failed", status: check.status, error: statusErrorMessage(event.error) };
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tollbooth-dpyc/web",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "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",