@miragon/mcp-toolkit-ui 2.6.0 → 2.8.0

package/src/app/view-lifecycle.ts

@@ -0,0 +1,334 @@
+/**
+ * The `McpAppView` lifecycle as an explicit state machine (toolkit#176).
+ *
+ * Before the view payload exists the shell is in exactly one phase:
+ *
+ *   waiting ──result──▶ result
+ *      │  ╲
+ *      │   ╲──tool error / failed recovery / unrecoverable result──▶ error ──retry──▶ waiting
+ *      │    ╲
+ *      │     ╲──stripped result the policy must not re-load──▶ error (blocked)
+ *      │
+ *      └──host cancelled──▶ cancelled (terminal: the user stopped it)
+ *
+ * `waiting` carries a `slow` flag once loading outlasts the slow-hint delay.
+ * An `isError` result (or a failed call) is an `error`, never an endless
+ * skeleton, and a retry re-runs the originating tool once on the user's click.
+ * A latched result that is no view on a host that names no originating tool
+ * is an `error` too: nothing could recover it, so waiting would never end.
+ * A `blocked` error is no failure: the tool ran, the host kept its result
+ * from the view, and the recovery policy forbids re-running it. It offers to
+ * load the view only for a tool the host does not report as writing, so one
+ * click never runs a write a second time (CI §9).
+ * Pure functions only: the hook in `use-view-lifecycle.ts` feeds them.
+ */
+import { parseToolResult } from "../lib/parse-tool-result.js"
+
+/** `useToolContext().status` of the rendering call. */
+export type RenderCallStatus = "pending" | "ready" | "error"
+
+/** The user-triggered retry of the rendering call. */
+export type RetryState =
+  | { status: "idle"; attempt: number }
+  | { status: "running"; attempt: number }
+  | { status: "failed"; attempt: number; reason: string | undefined }
+
+export const RETRY_IDLE: RetryState = { status: "idle", attempt: 0 }
+
+export type RetryAction =
+  { type: "start" } | { type: "failed"; reason: string | undefined } | { type: "succeeded" }
+
+/** start → running (next attempt); failed → failed with reason; succeeded → idle. */
+export function retryReducer(state: RetryState, action: RetryAction): RetryState {
+  switch (action.type) {
+    case "start":
+      return { status: "running", attempt: state.attempt + 1 }
+    case "failed":
+      return { status: "failed", attempt: state.attempt, reason: action.reason }
+    case "succeeded":
+      return { status: "idle", attempt: state.attempt }
+  }
+}
+
+export interface ViewLifecycleInput {
+  /** A renderable payload is in hand (host-delivered, recovered or retried). */
+  hasViewData: boolean
+  /** Status of the original rendering call. */
+  callStatus: RenderCallStatus
+  /** The host cancelled the original rendering call. */
+  cancelled: boolean
+  /** Message of the original call's error, when it failed. */
+  callErrorReason: string | undefined
+  /**
+   * The automatic stripped-result recovery ran and failed, or was needed but
+   * could not run because the host names no tool.
+   */
+  recoveryFailed: boolean
+  /**
+   * The host did not pass the result to the view, and the recovery policy
+   * forbids re-running the tool: it ran, but the view never got its result.
+   * Default `false`.
+   */
+  recoveryBlocked?: boolean
+  /**
+   * The host reports the originating tool as writing (`readOnlyHint: false`
+   * or `destructiveHint: true`). A blocked state then offers no retry: one
+   * click would run the write a second time. Default `false`.
+   */
+  toolWrites?: boolean
+  /** The user-triggered retry. */
+  retryState: RetryState
+  /** Loading has outlasted the slow-hint delay. */
+  slow: boolean
+  /** The originating tool is known, so a retry can re-run it. */
+  canRetry: boolean
+}
+
+/**
+ * What an `error` phase stands for: `"failed"` (the call, the recovery or the
+ * retry failed) or `"blocked"` (the tool ran, but the host did not pass its
+ * result to the view, and the recovery policy keeps the view from re-running it).
+ */
+export type ViewErrorKind = "failed" | "blocked"
+
+export type ViewLifecycle =
+  | { phase: "result" }
+  | { phase: "waiting"; slow: boolean }
+  | { phase: "cancelled" }
+  | {
+      phase: "error"
+      reason: string | undefined
+      canRetry: boolean
+      /** Absent for a failure; `"blocked"` for a result the view must not re-load. */
+      kind?: ViewErrorKind
+    }
+
+/**
+ * Resolve the single phase the view is in. Precedence: a payload always wins;
+ * a running retry is waiting; a failed retry is an error with ITS reason; a
+ * cancellation is terminal; a failed call is an error; a blocked recovery is
+ * a `blocked` error, retryable only for a tool not reported as writing; a
+ * failed recovery or a latched non-view result nothing can recover is an
+ * error; everything else is still waiting.
+ */
+export function resolveViewLifecycle(input: ViewLifecycleInput): ViewLifecycle {
+  if (input.hasViewData) return { phase: "result" }
+  const { retryState } = input
+  if (retryState.status === "running") return { phase: "waiting", slow: input.slow }
+  if (retryState.status === "failed") {
+    return { phase: "error", reason: retryState.reason, canRetry: input.canRetry }
+  }
+  if (input.cancelled) return { phase: "cancelled" }
+  if (input.callStatus === "error") {
+    return { phase: "error", reason: input.callErrorReason, canRetry: input.canRetry }
+  }
+  if (input.recoveryBlocked) {
+    const canRetry = input.canRetry && !input.toolWrites
+    return { phase: "error", reason: undefined, canRetry, kind: "blocked" }
+  }
+  if (input.recoveryFailed) return { phase: "error", reason: undefined, canRetry: input.canRetry }
+  // A latched result without a renderable view: the recovery re-runs the
+  // originating tool, so it can only help when the host names that tool.
+  if (input.callStatus === "ready" && !input.canRetry) {
+    return { phase: "error", reason: undefined, canRetry: false }
+  }
+  return { phase: "waiting", slow: input.slow }
+}
+
+/**
+ * The phase with its slow flag: a wait turns slow only while the wait that
+ * outlasted the delay (`slowWait`, a {@link waitKey}) is still the current one,
+ * so a new attempt starts without the hint.
+ */
+export function withSlowHint(
+  lifecycle: ViewLifecycle,
+  slowWait: string | null,
+  currentWait: string | null,
+): ViewLifecycle {
+  return lifecycle.phase === "waiting" && slowWait !== null && slowWait === currentWait
+    ? { phase: "waiting", slow: true }
+    : lifecycle
+}
+
+/**
+ * Where keyboard focus goes after the user pressed retry (the button unmounts
+ * as the view starts waiting): the view frame while waiting, the new retry
+ * button when the retry failed, the frame again once the view or a
+ * cancellation replaced the state. `settled` ends the hand-off.
+ */
+export function retryFocusTarget(phase: ViewLifecycle["phase"]): {
+  target: "frame" | "retry"
+  settled: boolean
+} {
+  if (phase === "waiting") return { target: "frame", settled: false }
+  if (phase === "error") return { target: "retry", settled: true }
+  return { target: "frame", settled: true }
+}
+
+/**
+ * Identity of the current wait, so the slow-hint timer restarts for every new
+ * wait (the first load, then each retry attempt) and never for a finished one.
+ * `null` when the view is not waiting.
+ */
+export function waitKey(lifecycle: ViewLifecycle, retryState: RetryState): string | null {
+  return lifecycle.phase === "waiting" ? `${retryState.status}:${retryState.attempt}` : null
+}
+
+/** Default delay before the waiting placeholder adds its slow hint. */
+export const DEFAULT_SLOW_HINT_MS = 8000
+
+/**
+ * A decoded view call (a retry or a refresh), typed so a failure never turns
+ * into UI text: `isError` tells a tool error (with its raw `reason`, for the
+ * Details disclosure or the console) from a payload that is no view.
+ */
+export type ViewResultOutcome<T> =
+  { ok: true; data: T } | { ok: false; isError: boolean; reason: string | undefined }
+
+/**
+ * Decode a view call's result: the payload when it is a complete view,
+ * otherwise a failure — a tool error with its `isError` text, or a payload
+ * the shell cannot render (no reason).
+ */
+export function decodeViewResult<T>(
+  result: unknown,
+  isValid: (value: unknown) => value is T,
+): ViewResultOutcome<T> {
+  let decoded: unknown
+  try {
+    decoded = parseToolResult<unknown>(result)
+  } catch (err) {
+    return { ok: false, isError: true, reason: errorMessage(err) }
+  }
+  return isValid(decoded)
+    ? { ok: true, data: decoded }
+    : { ok: false, isError: false, reason: undefined }
+}
+
+/** What {@link describeViewForModel} reports on. */
+export interface ViewModelContextInput {
+  lifecycle: ViewLifecycle
+  /** The originating tool, when the host names it. */
+  toolName: string | undefined
+  /** The shown payload's failed data steps (result phase). */
+  stepErrors?: readonly { stepId: string; reason: string }[]
+  /** The step-error alert offers a retry (the view can refresh). */
+  stepsRetryable?: boolean
+  /**
+   * When the view re-loaded the shown payload itself (epoch ms, see
+   * {@link reloadedAtOf}); `null` for a payload the host delivered.
+   */
+  reloadedAt?: number | null
+  /**
+   * How it re-loaded: it re-ran the tool because the host did not pass the
+   * result along (`"recovery"`, the default: its own recovery or the user's
+   * retry), the user refreshed the view (`"refresh"`), or the user applied an
+   * edit from the view builder, which ran the data steps again (`"builder"`).
+   */
+  reloadedBy?: "recovery" | "refresh" | "builder"
+}
+
+/**
+ * Where the shown payload came from: the host's tool result, the view's own
+ * re-execution when the host stripped it, the user's retry, a refresh, or the
+ * user's Apply in the view builder (its figures are the builder's own run of
+ * the data steps).
+ */
+export type ViewSource = "host" | "recovered" | "retry" | "refresh" | "builder"
+
+/**
+ * When a payload counts as re-loaded by the view itself (N23): `at` when its
+ * figures can differ from the result the chat answered from, else `null`. A
+ * recovery, a refresh and a builder Apply always; a retry only after a call
+ * whose result reached the chat (a stripped or unusable one), never after a
+ * failed or cancelled call, of which the model never had figures. The host's
+ * own payload never.
+ */
+export function reloadedAtOf(source: ViewSource, at: number, callFailed: boolean): number | null {
+  if (source === "host") return null
+  if (source === "retry" && callFailed) return null
+  return at
+}
+
+/** How the view says, to the model, that it loaded the shown figures itself. */
+const RELOADED_BY: Record<
+  NonNullable<ViewModelContextInput["reloadedBy"]>,
+  (at: string) => string
+> = {
+  recovery: (at) =>
+    `re-ran the tool at ${at} because the host did not pass the original result to the view`,
+  refresh: (at) => `was refreshed by the user at ${at}`,
+  builder: (at) =>
+    `was edited by the user in the view builder, which loaded its data again at ${at}`,
+}
+
+/**
+ * The view's own line of model context (toolkit#176 K20): what failed and
+ * that the user sees an error instead of the view; a blocked recovery (the
+ * tool ran, its result never reached the view, and the model must not re-run
+ * it just to show the view); failed data steps; a payload the view re-loaded
+ * itself (a recovery, a retry, a refresh, a builder Apply), whose figures can
+ * differ from the tool result the model answered from (N23). `null` while
+ * there is nothing to report (waiting, or a plain host-delivered view).
+ * English: it is read by the model, never shown.
+ */
+export function describeViewForModel(input: ViewModelContextInput): string | null {
+  const subject = input.toolName ? `The view of ${input.toolName}` : "The view"
+  const { lifecycle } = input
+  if (lifecycle.phase === "error") {
+    if (lifecycle.kind === "blocked") {
+      return describeBlockedForModel(subject, input.toolName, lifecycle.canRetry)
+    }
+    const reason = lifecycle.reason ? ` (reason: ${lifecycle.reason})` : ""
+    const offer = lifecycle.canRetry ? "an error message with a retry button" : "an error message"
+    return `${subject} could not be shown${reason}. The user sees ${offer} instead of the view.`
+  }
+  if (lifecycle.phase === "cancelled") {
+    return `${subject} was cancelled before it rendered. The user sees a note that the call was cancelled.`
+  }
+  if (lifecycle.phase === "waiting") return null
+  const lines: string[] = []
+  if (input.reloadedAt != null) {
+    const at = new Date(input.reloadedAt).toISOString()
+    const how = RELOADED_BY[input.reloadedBy ?? "recovery"](at)
+    lines.push(
+      `${subject} ${how}; its figures are live as of then and can differ from the original result.`,
+    )
+  }
+  const failed = input.stepErrors ?? []
+  if (failed.length > 0) {
+    const steps = failed.map((e) => `${e.stepId}: ${e.reason}`).join("; ")
+    const lead = lines.length > 0 ? "Some" : `${subject} is shown, but some`
+    const offer = input.stepsRetryable ? "an alert with a retry button" : "an alert"
+    lines.push(`${lead} of its data could not be loaded (${steps}). The user sees ${offer}.`)
+  }
+  return lines.length > 0 ? lines.join(" ") : null
+}
+
+/**
+ * The model's line for a blocked recovery: the tool ran (nothing failed), the
+ * host kept its result from the view, the view did not re-run it, and the
+ * model must not re-run it just to show the view, a write least of all.
+ */
+function describeBlockedForModel(
+  subject: string,
+  toolName: string | undefined,
+  canRetry: boolean,
+): string {
+  const tool = toolName ?? "the tool"
+  const offer = canRetry
+    ? "a note with a button that loads the view"
+    : "a note to ask in the chat for the current state"
+  return (
+    `${subject} is not shown: ${tool} ran, but the host did not pass its result to the view, ` +
+    `and the view did not re-run it. The user sees ${offer} instead of the view. ` +
+    `Do not re-run ${tool} just to show the view.`
+  )
+}
+
+/** A displayable message for anything thrown. */
+export function errorMessage(err: unknown): string | undefined {
+  if (err instanceof Error) return err.message || undefined
+  if (typeof err === "string") return err || undefined
+  return undefined
+}

package/src/app/widget-fixture.effects.test.tsx

@@ -0,0 +1,51 @@
+// @vitest-environment happy-dom
+import { useEffect } from "react"
+import { afterEach, describe, expect, it } from "vitest"
+import { useToast } from "../components/Toast.js"
+import { TOOLKIT_MESSAGES } from "../locale/toolkit-messages.js"
+import { renderWithEffects, type EffectRender } from "../render-effects.js"
+import { WidgetFixtureHost } from "./widget-fixture.js"
+
+/**
+ * The harness's toast stack inside the host's locale scope, with its effects
+ * running: a toast exists only after a widget's effect shows it, so the SSR
+ * suite (`widget-fixture.render.test.tsx`) never sees its words. Its one
+ * localized word is the dismiss button's name; it follows `globals.locale`
+ * like `McpAppView`'s stack does, which holds only while the `ToastProvider`
+ * sits inside the `ToolkitLocaleFallback`.
+ */
+
+/** A widget that reports a write's outcome as a toast once it mounts. */
+function SavesOnMount() {
+  const toast = useToast()
+  useEffect(() => {
+    toast.show({ tone: "success", title: "Saved" })
+  }, [toast])
+  return <p>widget</p>
+}
+
+let mounted: EffectRender | null = null
+
+afterEach(async () => {
+  await mounted?.unmount()
+  mounted = null
+})
+
+/** The dismiss button's accessible name of the toast the widget raised. */
+async function dismissLabel(globals?: Record<string, unknown>): Promise<string | null> {
+  mounted = await renderWithEffects(<WidgetFixtureHost widget={SavesOnMount} globals={globals} />)
+  const toast = mounted.container.querySelector('[data-slot="toast"]')
+  expect(toast?.textContent, "the widget's toast reached the stack").toContain("Saved")
+  return toast?.querySelector("button")?.getAttribute("aria-label") ?? null
+}
+
+describe("WidgetFixtureHost toast stack (effects)", () => {
+  it("names a toast's dismiss button in globals.locale", async () => {
+    expect(await dismissLabel({ locale: "de" })).toBe(TOOLKIT_MESSAGES.de.common.dismiss)
+  })
+
+  it("names it in English without a host locale", async () => {
+    expect(await dismissLabel()).toBe(TOOLKIT_MESSAGES.en.common.dismiss)
+    expect(TOOLKIT_MESSAGES.en.common.dismiss).not.toBe(TOOLKIT_MESSAGES.de.common.dismiss)
+  })
+})

package/src/app/widget-fixture.render.test.tsx

@@ -0,0 +1,81 @@
+import { renderToStaticMarkup } from "react-dom/server"
+import { describe, expect, it } from "vitest"
+import { Check } from "lucide-react"
+import { ListFooter } from "../components/ListFooter.js"
+import { ICON_STROKE } from "../lib/icon-stroke.js"
+import { LocaleProvider, useLocale } from "../locale/locale-provider.js"
+import { useHostBridge } from "./host-bridge.js"
+import { WidgetFixtureHost } from "./widget-fixture.js"
+
+/**
+ * The harness gives a widget what `McpAppView` gives it in a host, so a
+ * preview in the widget playground shows what a user sees: the toolkit's
+ * strings in the host locale (`globals.locale`), the host theme on the
+ * bridge (`globals.theme`), the CI icon stroke and a toast stack.
+ */
+
+/** A widget made of toolkit chrome: the list footer's text follows the toolkit locale. */
+function Footer() {
+  return <ListFooter shown={8} total={1234} hasMore onLoadMore={() => {}} noun="Aufgaben" />
+}
+
+const render = (globals?: Record<string, unknown>, widget = Footer) =>
+  renderToStaticMarkup(<WidgetFixtureHost widget={widget} globals={globals} />)
+
+describe("WidgetFixtureHost host scope", () => {
+  it("renders the toolkit's strings and number format in globals.locale", () => {
+    const html = render({ locale: "de-DE" })
+    expect(html).toContain("Zeigt 8 von 1.234 Aufgaben")
+    expect(html).toContain("Mehr laden")
+  })
+
+  it("defaults to English and falls back to it for a blank locale", () => {
+    for (const globals of [undefined, { locale: "" }, { locale: 42 }]) {
+      const html = render(globals)
+      expect(html).toContain("Showing 8 of 1,234 Aufgaben")
+      expect(html).toContain("Load more")
+    }
+  })
+
+  it("lets a LocaleProvider around the harness win over globals.locale", () => {
+    const html = renderToStaticMarkup(
+      <LocaleProvider locale="de">
+        <WidgetFixtureHost widget={Footer} globals={{ locale: "en-US" }} />
+      </LocaleProvider>,
+    )
+    expect(html).toContain("Mehr laden")
+  })
+
+  it("leaves useLocale() of the widget alone, like McpAppView does", () => {
+    function ShowsLocale() {
+      return <p>{useLocale()}</p>
+    }
+    expect(render({ locale: "de-DE" }, ShowsLocale)).toContain("<p>en</p>")
+  })
+
+  it("reports globals.theme on the bridge", () => {
+    function ShowsTheme() {
+      return <p>{useHostBridge().theme}</p>
+    }
+    expect(render({ theme: "dark" }, ShowsTheme)).toContain("<p>dark</p>")
+    expect(render(undefined, ShowsTheme)).toContain("<p>light</p>")
+  })
+
+  it("draws Lucide icons at the view's stroke", () => {
+    expect(render(undefined, () => <Check />)).toContain(`stroke-width="${ICON_STROKE}"`)
+  })
+
+  it("mounts the toast stack as the view's one polite live region", () => {
+    // Like McpAppView's: fixed attributes, no role and no name, so the first
+    // toast lands in a region the browser already tracks. Its words (the
+    // dismiss label in the host locale) need a toast, so effects:
+    // widget-fixture.effects.test.tsx.
+    const html = render()
+    const viewport = /<div data-slot="toast-viewport"[^>]*>/.exec(html)?.[0]
+    expect(viewport).toBeDefined()
+    expect(viewport).toContain('aria-live="polite"')
+    expect(viewport).toContain('aria-atomic="false"')
+    expect(viewport).not.toContain("aria-label")
+    expect(viewport).not.toContain("role=")
+  })
+})

package/src/app/widget-fixture.tsx

@@ -1,5 +1,9 @@
 import { createContext, useContext, useMemo, type ComponentType, type ReactNode } from "react"
+import { LucideProvider } from "lucide-react"
 import type { PipelineContext, StepResult, WidgetProps } from "@miragon/mcp-toolkit-core"
+import { ToastProvider } from "../components/Toast.js"
+import { ICON_STROKE } from "../lib/icon-stroke.js"
+import { ToolkitLocaleFallback } from "../locale/locale-provider.js"
 import { AppQueryProvider } from "../providers/query-provider.js"
 import { HostBridgeProvider, createStandaloneHostBridge } from "./host-bridge.js"
 
@@ -143,10 +147,10 @@ export function useFixtureHost(): FixtureHostValue | null {
 }
 
 /**
- * Default host-context values the harness reports. Only `theme` is read since
- * the mcp-use 2.x move (the other host globals were consumed by the 1.x
- * `window.openai` shim); the object keeps its shape so existing playground
- * setups that spread overrides keep compiling.
+ * Default host-context values the harness reports. `theme` and `locale` are
+ * read since the mcp-use 2.x move (the other host globals were consumed by
+ * the 1.x `window.openai` shim); the object keeps its shape so existing
+ * playground setups that spread overrides keep compiling.
  */
 const DEFAULT_GLOBALS = {
   theme: "light",
@@ -192,9 +196,12 @@ export interface WidgetFixtureHostProps {
    */
   tools?: Record<string, FixtureToolEntry>
   /**
-   * Host context overrides, merged over {@link DEFAULT_GLOBALS}. Since the
-   * mcp-use 2.x move only `theme` influences the simulated host; the other
-   * keys are accepted for compatibility with existing playground setups.
+   * Host context overrides, merged over {@link DEFAULT_GLOBALS}. Two keys
+   * influence the simulated host: `theme` (`"light"` | `"dark"`, reported by
+   * `useHostBridge().theme`) and `locale` (a BCP 47 tag: the toolkit's own
+   * strings and number format follow it, exactly as under `McpAppView`; a
+   * `LocaleProvider` around or inside the widget still wins). The other keys
+   * are accepted for compatibility with existing playground setups.
    */
   globals?: Record<string, unknown>
   /**
@@ -247,6 +254,10 @@ export function buildFixtureWidgetProps(
  *   would (adapted widgets report through this bridge outside a real view).
  * - **The toolkit `AppQueryProvider`** — so widgets that fetch via `useToolQuery`
  *   (e.g. generated `use*` hooks) resolve against the same registry.
+ * - **What `McpAppView` gives a widget** — the toolkit's strings in the host
+ *   locale (`globals.locale`, as `McpAppView` does with the host's), the
+ *   toast stack (`useToast()` shows real toasts) and the icon stroke of the
+ *   view (2.5), so the preview matches what a host renders.
  *
  * ### Boundaries
  * The harness simulates the **host-portable pattern** (`useHostBridge`,
@@ -282,10 +293,14 @@ export function WidgetFixtureHost({
   // The standalone host bridge is the harness's single simulation source: it
   // logs every verb through the `HostActionLog` channel for the playground's
   // activity log. Depends on the callback props directly — a fresh Provider
-  // value on callback change is fine for a dev harness. Only `globals.theme`
-  // still influences the simulated host (the remaining globals fed the 1.x
-  // `window.openai` shim).
+  // value on callback change is fine for a dev harness. `globals.theme` and
+  // `globals.locale` influence the simulated host (the remaining globals fed
+  // the 1.x `window.openai` shim).
   const bridgeTheme = (globals?.theme ?? DEFAULT_GLOBALS.theme) === "dark" ? "dark" : "light"
+  const hostLocale =
+    typeof globals?.locale === "string" && globals.locale.trim() !== ""
+      ? globals.locale
+      : DEFAULT_GLOBALS.locale
   const bridge = useMemo(
     () =>
       createStandaloneHostBridge({
@@ -308,11 +323,19 @@ export function WidgetFixtureHost({
   // widgets and raw `({ data })` widgets read their fixture from one mount.
   const RenderWidget = Widget as ComponentType<Record<string, unknown>>
 
+  // The same scope `McpAppView` puts around a widget: the toolkit's strings
+  // in the host locale, the CI icon stroke and a toast stack.
   return (
     <FixtureHostContext.Provider value={value}>
       <HostBridgeProvider bridge={bridge}>
         <AppQueryProvider callTool={callTool}>
-          <RenderWidget {...widgetProps} data={data} />
+          <ToolkitLocaleFallback locale={hostLocale}>
+            <LucideProvider strokeWidth={ICON_STROKE}>
+              <ToastProvider>
+                <RenderWidget {...widgetProps} data={data} />
+              </ToastProvider>
+            </LucideProvider>
+          </ToolkitLocaleFallback>
         </AppQueryProvider>
       </HostBridgeProvider>
     </FixtureHostContext.Provider>