@clawpump/claw-agent 0.1.4 → 0.1.6

package/agent/web/src/pages/X402Page.tsx

@@ -0,0 +1,207 @@
+import { useCallback, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Check, Copy, ExternalLink, Search, Sparkles, Zap } from "lucide-react";
+import { api } from "@/lib/api";
+import type { X402Result } from "@/lib/api";
+import { Button } from "@nous-research/ui/ui/components/button";
+import { Badge } from "@nous-research/ui/ui/components/badge";
+import { Spinner } from "@nous-research/ui/ui/components/spinner";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@nous-research/ui/ui/components/card";
+
+function bestPrice(r: X402Result): string | null {
+  const chains = r.pricing ?? [];
+  for (const c of chains) {
+    if (c.priceLabel) return c.priceLabel;
+  }
+  return null;
+}
+
+function CopyButton({ value }: { value: string }) {
+  const [copied, setCopied] = useState(false);
+  const onCopy = useCallback(() => {
+    navigator.clipboard
+      .writeText(value)
+      .then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+      })
+      .catch(() => {});
+  }, [value]);
+  return (
+    <button
+      type="button"
+      onClick={onCopy}
+      title="Copy resource URL"
+      aria-label="Copy resource URL"
+      className="inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+    >
+      {copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
+    </button>
+  );
+}
+
+function buildPrompt(r: X402Result): string {
+  const price = bestPrice(r);
+  const name = r.name ? ` ("${r.name}"${price ? `, ${price}` : ""})` : "";
+  return `Use this x402 API and pay it with my ClawPump wallet: ${r.resourceUrl}${name}. First check what inputs it needs, then call it.`;
+}
+
+export default function X402Page() {
+  const navigate = useNavigate();
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState<X402Result[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [searched, setSearched] = useState(false);
+
+  const search = useCallback(() => {
+    const q = query.trim();
+    if (!q) return;
+    setLoading(true);
+    setError(null);
+    setSearched(true);
+    api
+      .searchX402(q)
+      .then((resp) => {
+        if (resp.ok) {
+          setResults(resp.results ?? []);
+        } else {
+          setError(resp.error ?? "Search failed");
+          setResults([]);
+        }
+      })
+      .catch((e) => setError(e instanceof Error ? e.message : String(e)))
+      .finally(() => setLoading(false));
+  }, [query]);
+
+  return (
+    <div className="mx-auto max-w-3xl space-y-4 p-4">
+      <div className="flex items-center gap-2">
+        <Zap className="h-5 w-5 text-muted-foreground" />
+        <h1 className="text-lg font-semibold">x402 Marketplace</h1>
+      </div>
+
+      <p className="text-sm text-muted-foreground">
+        Search the Dexter x402 marketplace via the ClawPump MCP. Results are paid
+        APIs an agent can pay for from its own ClawPump wallet.
+      </p>
+
+      <div className="flex gap-2">
+        <div className="relative flex-1">
+          <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <input
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") search();
+            }}
+            placeholder="e.g. image generation, ETH price, weather…"
+            className="w-full rounded-md border border-border bg-background py-2 pl-9 pr-3 text-sm outline-none focus:border-primary"
+          />
+        </div>
+        <Button onClick={search} disabled={loading || !query.trim()}>
+          Search
+        </Button>
+      </div>
+
+      {error && (
+        <Card className="border-destructive/40">
+          <CardContent className="py-3 text-sm text-destructive">{error}</CardContent>
+        </Card>
+      )}
+
+      {loading ? (
+        <div className="flex justify-center py-12">
+          <Spinner />
+        </div>
+      ) : searched && results.length === 0 && !error ? (
+        <Card>
+          <CardContent className="py-8 text-center text-sm text-muted-foreground">
+            No results.
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="space-y-3">
+          {results.map((r, i) => {
+            const price = bestPrice(r);
+            return (
+              <Card key={r.resourceUrl ?? i}>
+                <CardHeader className="flex flex-row items-start justify-between gap-2 pb-2">
+                  <div className="min-w-0">
+                    <CardTitle className="truncate text-sm font-semibold">
+                      {r.name || r.host || "Untitled"}
+                    </CardTitle>
+                    {r.description && (
+                      <p className="mt-1 line-clamp-2 text-xs text-muted-foreground">
+                        {r.description}
+                      </p>
+                    )}
+                  </div>
+                  <div className="flex shrink-0 flex-col items-end gap-1">
+                    {price && (
+                      <span className="font-mono text-sm font-semibold text-emerald-400">
+                        {price}
+                      </span>
+                    )}
+                    {r.verified && (
+                      <Badge tone="success" className="shrink-0">
+                        verified
+                      </Badge>
+                    )}
+                  </div>
+                </CardHeader>
+                <CardContent className="space-y-2">
+                  <div className="flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground">
+                    {r.category && <Badge tone="secondary">{r.category}</Badge>}
+                    {r.method && (
+                      <span className="rounded bg-muted px-1.5 py-0.5 font-mono">
+                        {r.method}
+                      </span>
+                    )}
+                    {typeof r.qualityScore === "number" && (
+                      <span>quality {r.qualityScore}</span>
+                    )}
+                  </div>
+                  {r.resourceUrl && (
+                    <div className="flex items-center gap-1">
+                      <a
+                        href={r.resourceUrl}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="inline-flex min-w-0 items-center gap-1 truncate font-mono text-xs text-emerald-300 hover:underline"
+                      >
+                        <span className="truncate">{r.resourceUrl}</span>
+                        <ExternalLink className="h-3 w-3 shrink-0" />
+                      </a>
+                      <CopyButton value={r.resourceUrl} />
+                    </div>
+                  )}
+                  {r.resourceUrl && (
+                    <div className="pt-1">
+                      <Button
+                        size="sm"
+                        onClick={() =>
+                          navigate(
+                            `/chat?prompt=${encodeURIComponent(buildPrompt(r))}`,
+                          )
+                        }
+                        prefix={<Sparkles className="h-4 w-4" />}
+                      >
+                        Use in chat
+                      </Button>
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

package/agent/web/src/plugins/registry.ts

@@ -17,7 +17,7 @@ import React, {
   useContext,
   createContext,
 } from "react";
-import { api, fetchJSON } from "@/lib/api";
+import { api, fetchJSON, authedFetch, buildWsUrl, buildWsAuthParam } from "@/lib/api";
 import { cn, timeAgo, isoTimeAgo } from "@/lib/utils";
 import { Badge } from "@nous-research/ui/ui/components/badge";
 import { Button } from "@nous-research/ui/ui/components/button";
@@ -88,15 +88,18 @@ export function getRegisteredCount(): number {
 // Expose SDK + registry on window
 // ---------------------------------------------------------------------------
 
-declare global {
-  interface Window {
-    __HERMES_PLUGIN_SDK__: unknown;
-    __HERMES_PLUGINS__: {
-      register: typeof registerPlugin;
-      registerSlot: typeof registerSlot;
-    };
-  }
-}
+/**
+ * Version of the plugin SDK contract (see ``plugins/sdk.d.ts``). Bump the
+ * major on any backwards-incompatible change to the exposed surface;
+ * additive changes (new optional fields / helpers) don't require a bump.
+ * Exposed at runtime as ``window.__HERMES_PLUGIN_SDK__.sdkVersion`` so a
+ * plugin (or a future host-side compatibility gate) can read it.
+ */
+export const SDK_CONTRACT_VERSION = "1.1.0";
+
+// Window globals for the plugin SDK are declared in ``plugins/sdk.d.ts`` —
+// the single source of truth for the public contract. Don't redeclare them
+// here (duplicate ambient declarations with differing modifiers conflict).
 
 export function exposePluginSDK() {
   window.__HERMES_PLUGINS__ = {
@@ -105,6 +108,9 @@ export function exposePluginSDK() {
   };
 
   window.__HERMES_PLUGIN_SDK__ = {
+    // Contract version of the plugin SDK surface (see plugins/sdk.d.ts).
+    // Bump on backwards-incompatible changes; additive changes don't need it.
+    sdkVersion: SDK_CONTRACT_VERSION,
     // React core — plugins use these instead of importing react
     React,
     hooks: {
@@ -119,8 +125,19 @@ export function exposePluginSDK() {
 
     // Hermes API client
     api,
-    // Raw fetchJSON for plugin-specific endpoints
+    // Raw fetchJSON for plugin-specific JSON endpoints
     fetchJSON,
+    // Authenticated fetch for non-JSON endpoints (uploads / blob downloads).
+    // Handles loopback-token vs gated-cookie auth so plugins never read
+    // window.__HERMES_SESSION_TOKEN__ directly.
+    authedFetch,
+    // Build a ws(s):// URL with the correct auth param for the active mode
+    // (single-use ticket in gated mode, token in loopback). Use this for any
+    // plugin WebSocket instead of hand-assembling the URL.
+    buildWsUrl,
+    // Lower-level: resolve just the [authParamName, authParamValue] pair, for
+    // plugins that need to build the WS URL themselves.
+    buildWsAuthParam,
 
     // UI components — Nous DS where available, shadcn/ui primitives elsewhere.
     components: {

package/agent/web/src/plugins/sdk.d.ts

@@ -0,0 +1,160 @@
+/**
+ * Hermes Dashboard Plugin SDK — typed contract (SPIKE)
+ * ====================================================
+ *
+ * This is the public type surface for ``window.__HERMES_PLUGIN_SDK__`` and
+ * ``window.__HERMES_PLUGINS__``, the globals the dashboard host exposes to
+ * plugin bundles (see ``web/src/plugins/registry.ts::exposePluginSDK``).
+ *
+ * STATUS: spike. This file documents the contract and gives plugin authors
+ * (in-repo IIFEs and external bundles alike) editor types without bundling
+ * their own copies of React / the API client. It is intentionally a
+ * hand-authored ambient declaration rather than ``typeof
+ * window.__HERMES_PLUGIN_SDK__`` because:
+ *   1. The runtime object is assembled from many internal modules
+ *      (``@/lib/api``, ``@nous-research/ui``, …). Deriving the type would
+ *      leak those internal import paths into the public contract and couple
+ *      external plugins to the host's internal module layout.
+ *   2. A hand-authored contract is the *versioned API boundary* — changing
+ *      it is a deliberate act, visible in review, not an accidental
+ *      consequence of refactoring an internal helper.
+ *
+ * Versioning: bump ``HermesPluginSDK["sdkVersion"]`` (and the
+ * ``SDK_CONTRACT_VERSION`` const the host exposes) on any
+ * backwards-incompatible change to this surface. Additive changes
+ * (new optional fields, new helpers) don't require a major bump.
+ *
+ * OPEN QUESTIONS for productionising this spike (do not block the auth fix):
+ *   - Ship as a published ``@hermes/dashboard-plugin-sdk`` types package, or
+ *     keep in-repo and copy into external plugin repos?
+ *   - Should the host assert at runtime that a plugin's declared
+ *     ``manifest.sdk_version`` is compatible before executing it?
+ *   - The ``components`` map is typed loosely as ``Record<string,
+ *     ComponentType>`` here; do we want exact per-component prop types
+ *     (pulls @nous-research/ui types into the contract) or is the loose
+ *     shape the right boundary for external authors?
+ */
+
+import type { ComponentType } from "react";
+
+// ---------------------------------------------------------------------------
+// Auth-relevant helpers (the surface this PR adds/sanctions)
+// ---------------------------------------------------------------------------
+
+/**
+ * JSON ``fetch`` for dashboard ``/api/...`` endpoints. Handles auth in both
+ * modes (loopback session-token header / gated cookie), throws
+ * ``Error("<status>: <body>")`` on non-2xx, and triggers the global
+ * 401 → /login redirect in gated mode. Use for all JSON plugin endpoints.
+ */
+export type FetchJSON = <T = unknown>(
+  url: string,
+  init?: RequestInit,
+  options?: { allowUnauthorized?: boolean },
+) => Promise<T>;
+
+/**
+ * Authenticated ``fetch`` for NON-JSON endpoints (uploads via ``FormData``,
+ * binary/blob downloads). Same auth handling as ``fetchJSON`` but returns
+ * the raw ``Response``, does not parse, does not throw on non-2xx, and does
+ * not run the 401 redirect. Plugins MUST use this (or ``fetchJSON``) instead
+ * of calling ``fetch`` with a hand-read ``window.__HERMES_SESSION_TOKEN__``.
+ */
+export type AuthedFetch = (url: string, init?: RequestInit) => Promise<Response>;
+
+/**
+ * Build an absolute ``ws(s)://`` URL for a dashboard WebSocket endpoint with
+ * the correct auth query param for the active mode (single-use ``ticket`` in
+ * gated OAuth mode, ``token`` in loopback). Plugins MUST use this for any
+ * WebSocket instead of hand-assembling the URL + reading the session token.
+ */
+export type BuildWsUrl = (
+  path: string,
+  params?: Record<string, string>,
+) => Promise<string>;
+
+/** Lower-level: just the ``[authParamName, authParamValue]`` pair. */
+export type BuildWsAuthParam = () => Promise<[string, string]>;
+
+// ---------------------------------------------------------------------------
+// Registry surface (window.__HERMES_PLUGINS__)
+// ---------------------------------------------------------------------------
+
+export interface PluginRegistry {
+  /** Register the plugin's main tab component by manifest name. */
+  register(name: string, component: ComponentType<Record<string, never>>): void;
+  /** Register a component into a named host slot. */
+  registerSlot(slot: string, name: string, component: ComponentType): void;
+}
+
+// ---------------------------------------------------------------------------
+// SDK surface (window.__HERMES_PLUGIN_SDK__)
+// ---------------------------------------------------------------------------
+
+export interface HermesPluginSDK {
+  /** Contract version of this SDK surface (see SDK_CONTRACT_VERSION). */
+  readonly sdkVersion: string;
+
+  /** React core — use instead of importing/bundling react. */
+  React: typeof import("react").default;
+  hooks: {
+    useState: typeof import("react").useState;
+    useEffect: typeof import("react").useEffect;
+    useCallback: typeof import("react").useCallback;
+    useMemo: typeof import("react").useMemo;
+    useRef: typeof import("react").useRef;
+    useContext: typeof import("react").useContext;
+    createContext: typeof import("react").createContext;
+  };
+
+  /**
+   * Typed convenience client for core dashboard endpoints. Typed permissively
+   * at the boundary (methods vary in arity and return type — most return
+   * ``Promise<T>``, a few return a URL string synchronously); plugins call the
+   * specific methods they need. See ``web/src/lib/api.ts`` for the concrete shape.
+   */
+  api: Record<string, (...args: never[]) => unknown>;
+
+  /** JSON fetch with host auth handling. */
+  fetchJSON: FetchJSON;
+  /** Authenticated raw fetch for uploads / blob downloads. */
+  authedFetch: AuthedFetch;
+  /** Build an auth'd WebSocket URL for the active mode. */
+  buildWsUrl: BuildWsUrl;
+  /** Resolve just the WS auth query-param pair. */
+  buildWsAuthParam: BuildWsAuthParam;
+
+  /**
+   * Shared UI primitives (Nous DS / shadcn). Typed permissively at the
+   * boundary: the host's concrete components (some of which require props like
+   * ``active``/``value``/``name``) must be assignable here, and external plugin
+   * authors render them dynamically without the host's internal prop types.
+   * ``ComponentType<never>`` accepts any component regardless of its prop
+   * requirements (props are contravariant).
+   */
+  components: Record<string, ComponentType<never>>;
+
+  utils: {
+    cn: (...classes: Array<string | false | null | undefined>) => string;
+    /** Relative-time formatter. Accepts an epoch-ms number. */
+    timeAgo: (ts: number) => string;
+    /** Relative-time formatter for an ISO-8601 string. */
+    isoTimeAgo: (iso: string) => string;
+  };
+
+  /**
+   * i18n hook. Returns the host's i18n context value; typed loosely at the
+   * boundary so the contract doesn't couple to the host's internal
+   * ``I18nContextValue`` shape. Plugins typically call ``useI18n().t(...)``.
+   */
+  useI18n: () => unknown;
+}
+
+declare global {
+  interface Window {
+    __HERMES_PLUGIN_SDK__?: HermesPluginSDK;
+    __HERMES_PLUGINS__?: PluginRegistry;
+  }
+}
+
+export {};

package/agent/web/src/themes/context.tsx

@@ -8,6 +8,12 @@ import {
   type ReactNode,
 } from "react";
 import { BUILTIN_THEMES, defaultTheme } from "./presets";
+import {
+  FONT_CHOICES,
+  THEME_DEFAULT_FONT_ID,
+  getFontChoice,
+  type FontChoice,
+} from "./fonts";
 import type {
   DashboardTheme,
   ThemeAssets,
@@ -28,6 +34,12 @@ import { api } from "@/lib/api";
  *  a visible flash of the default palette on theme-overridden installs. */
 const STORAGE_KEY = "hermes-dashboard-theme";
 
+/** LocalStorage key for the font override (independent of theme). Holds a
+ *  font id from the catalog in `fonts.ts`, or the `THEME_DEFAULT_FONT_ID`
+ *  sentinel / absent = "use the active theme's font". Pre-applied before
+ *  the React tree mounts (see `main.tsx`) to avoid a font flash. */
+const FONT_STORAGE_KEY = "hermes-dashboard-font";
+
 /** Renames of built-in theme keys we've shipped previously. Without this,
  *  users who saved one of the old names in localStorage (or had it
  *  persisted server-side) would silently fall back to `defaultTheme`
@@ -296,6 +308,40 @@ function injectFontStylesheet(url: string | undefined) {
   INJECTED_FONT_URLS.add(url);
 }
 
+// ---------------------------------------------------------------------------
+// Font override (independent of theme)
+// ---------------------------------------------------------------------------
+
+/** The active font-override id, mirrored at module scope so `applyTheme`
+ *  can re-assert it after every theme switch (theme application rewrites
+ *  `--theme-font-sans`, so the override has to win again afterwards). */
+let _ACTIVE_FONT_OVERRIDE: string = THEME_DEFAULT_FONT_ID;
+
+/** Apply (or clear) the font override on `:root`. When a catalog font is
+ *  active we override `--theme-font-sans` and `--theme-font-display` and
+ *  inject its webfont; the theme keeps ownership of `--theme-font-mono`
+ *  (code/terminal) so picking a body font doesn't mangle code blocks.
+ *  Passing the theme-default sentinel removes the override so the theme's
+ *  own font shows through. */
+function applyFontOverride(fontId: string | undefined) {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  const choice: FontChoice | undefined = getFontChoice(fontId);
+  if (!choice) {
+    // Clear → fall back to whatever the active theme set (applyTheme already
+    // wrote the theme's --theme-font-sans/-display before this runs).
+    root.style.removeProperty("--theme-font-override-sans");
+    return;
+  }
+  injectFontStylesheet(choice.fontUrl);
+  // Set both the override marker var (used by the picker for diagnostics)
+  // and the live consumed vars. We re-set the consumed vars directly so the
+  // change is immediate and survives the next applyTheme via _ACTIVE_FONT_OVERRIDE.
+  root.style.setProperty("--theme-font-override-sans", choice.stack);
+  root.style.setProperty("--theme-font-sans", choice.stack);
+  root.style.setProperty("--theme-font-display", choice.stack);
+}
+
 // ---------------------------------------------------------------------------
 // Apply a full theme to :root
 // ---------------------------------------------------------------------------
@@ -350,6 +396,10 @@ function applyTheme(theme: DashboardTheme) {
     "--theme-terminal-background",
     theme.terminalBackground ?? "#000000",
   );
+
+  // Re-assert the font override last: theme application just rewrote
+  // --theme-font-sans/-display, so an active override has to win again.
+  applyFontOverride(_ACTIVE_FONT_OVERRIDE);
 }
 
 // ---------------------------------------------------------------------------
@@ -386,6 +436,16 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
     Record<string, DashboardTheme>
   >({});
 
+  /** Active font-override id (independent of theme). `THEME_DEFAULT_FONT_ID`
+   *  = no override. Seeded from localStorage so it's applied flash-free. */
+  const [fontId, setFontId] = useState<string>(() => {
+    if (typeof window === "undefined") return THEME_DEFAULT_FONT_ID;
+    const stored = window.localStorage.getItem(FONT_STORAGE_KEY);
+    const valid = stored && getFontChoice(stored) ? stored : THEME_DEFAULT_FONT_ID;
+    _ACTIVE_FONT_OVERRIDE = valid;
+    return valid;
+  });
+
   // Resolve a theme name to a full DashboardTheme, falling back to default
   // only when neither a built-in nor a user theme is found.
   const resolveTheme = useCallback(
@@ -399,12 +459,14 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
     [userThemeDefs],
   );
 
-  // Re-apply on every themeName change, or when user themes arrive from
-  // the API (since the active theme might be a user theme whose definition
-  // hadn't loaded yet on first render).
+  // Apply the active theme (and re-assert the font override at its tail)
+  // whenever the theme, the resolver, OR the font override changes. Folding
+  // font into the same effect means clearing the override re-runs applyTheme,
+  // which restores the theme's own font; setting it re-asserts the override.
   useEffect(() => {
+    _ACTIVE_FONT_OVERRIDE = fontId;
     applyTheme(resolveTheme(themeName));
-  }, [themeName, resolveTheme]);
+  }, [themeName, resolveTheme, fontId]);
 
   // Load server-side themes (built-ins + user YAMLs) once on mount.
   useEffect(() => {
@@ -452,6 +514,30 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // Load the server-persisted font override once on mount. The server is
+  // the source of truth across browsers; localStorage just avoids the flash.
+  useEffect(() => {
+    let cancelled = false;
+    api
+      .getFontPref()
+      .then((resp) => {
+        if (cancelled) return;
+        const serverId =
+          resp?.font && getFontChoice(resp.font) ? resp.font : THEME_DEFAULT_FONT_ID;
+        if (serverId !== fontId) {
+          setFontId(serverId);
+          if (typeof window !== "undefined") {
+            window.localStorage.setItem(FONT_STORAGE_KEY, serverId);
+          }
+        }
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const setTheme = useCallback(
     (name: string) => {
       // Accept any name the server told us exists OR any built-in.
@@ -470,14 +556,26 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
     [availableThemes, userThemeDefs],
   );
 
+  const setFont = useCallback((id: string) => {
+    const next = getFontChoice(id) ? id : THEME_DEFAULT_FONT_ID;
+    setFontId(next);
+    if (typeof window !== "undefined") {
+      window.localStorage.setItem(FONT_STORAGE_KEY, next);
+    }
+    api.setFontPref(next).catch(() => {});
+  }, []);
+
   const value = useMemo<ThemeContextValue>(
     () => ({
       theme: resolveTheme(themeName),
       themeName,
       availableThemes,
       setTheme,
+      fontId,
+      fontChoices: FONT_CHOICES,
+      setFont,
     }),
-    [themeName, availableThemes, setTheme, resolveTheme],
+    [themeName, availableThemes, setTheme, resolveTheme, fontId, setFont],
   );
 
   return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
@@ -496,6 +594,9 @@ const ThemeContext = createContext<ThemeContextValue>({
     description: t.description,
   })),
   setTheme: () => {},
+  fontId: THEME_DEFAULT_FONT_ID,
+  fontChoices: FONT_CHOICES,
+  setFont: () => {},
 });
 
 interface ThemeContextValue {
@@ -503,4 +604,10 @@ interface ThemeContextValue {
   setTheme: (name: string) => void;
   theme: DashboardTheme;
   themeName: string;
+  /** Active font-override id (`THEME_DEFAULT_FONT_ID` = no override). */
+  fontId: string;
+  /** Curated font catalog for the picker. */
+  fontChoices: FontChoice[];
+  /** Set the font override (independent of theme). */
+  setFont: (id: string) => void;
 }