@miragon/mcp-toolkit-ui 2.6.0 → 2.7.0

package/src/app/mcp-app-view.tsx

@@ -1,23 +1,39 @@
-import { useState, useCallback } from "react"
+import { useState, useCallback, useMemo, type ReactNode } from "react"
+import { LucideProvider } from "lucide-react"
 import { ToolCancelledError, useDisplayMode, useHostContext, useToolContext } from "mcp-use/react"
-import type { LayoutConfig, PipelineStepRef } from "@miragon/mcp-toolkit-core"
+import { ToastProvider, useToast } from "../components/Toast.js"
+import { ToolkitLocaleFallback, useToolkitMessages } from "../locale/locale-provider.js"
+import type { ViewMessages } from "../locale/toolkit-messages.js"
 import { AppQueryProvider, queryClient } from "../providers/query-provider.js"
-import { useToolResultRecovery } from "../hooks/use-tool-result-recovery.js"
-import { parseToolResult } from "../lib/parse-tool-result.js"
+import {
+  resolveRecoveryToolName,
+  useToolResultRecovery,
+} from "../hooks/use-tool-result-recovery.js"
+import { ICON_STROKE } from "../lib/icon-stroke.js"
 import { useHostBridge } from "./host-bridge.js"
 import {
-  DEFAULT_LABELS,
+  applyBuilderCommit,
+  fullscreenAvailable,
   isCompleteViewData,
   StepErrors,
   ViewBody,
-  ViewPlaceholder,
   ViewToolbar,
+  type BuilderCommit,
+  type DescribeStep,
   type McpAppViewLabels,
   type ViewData,
+  type ViewTitleLevel,
+  type ViewTitleMode,
 } from "./mcp-app-view-chrome.js"
+import { ViewPlaceholder, type DescribeViewError } from "./mcp-app-view-states.js"
+import type { LayoutBuilderLabels } from "./layout-builder.js"
+import { useRetryFocus, useViewLifecycle } from "./use-view-lifecycle.js"
+import { DEFAULT_SLOW_HINT_MS, decodeViewResult } from "./view-lifecycle.js"
 import type { WidgetComponent } from "./widget-renderer.js"
 
-export type { McpAppViewLabels } from "./mcp-app-view-chrome.js"
+export type { McpAppViewLabels, ViewTitleLevel, ViewTitleMode } from "./mcp-app-view-chrome.js"
+export type { DescribeStep } from "./mcp-app-view-chrome.js"
+export type { DescribeViewError } from "./mcp-app-view-states.js"
 
 export interface McpAppViewProps {
   /**
@@ -46,222 +62,313 @@ export interface McpAppViewProps {
    */
   builderEnabled?: boolean
   /**
-   * Override UI strings (loading, refresh, fullscreen, build).
-   * Defaults to English.
+   * Override chrome strings (loading, error, refresh, fullscreen, edit, …).
+   * Defaults to the active locale's toolkit catalog: the nearest
+   * `LocaleProvider`, else the host's locale (`en`/`de`, English otherwise).
    */
   labels?: McpAppViewLabels
+  /** Override strings of the embedded view builder (defaults: the locale's catalog). */
+  builderLabels?: LayoutBuilderLabels
+  /**
+   * How the toolbar shows the view title, so a view carries ONE title:
+   * `"show"` (default) renders it as a heading, `"hide"` leaves the title to
+   * the widget's own header, `"slot"` renders {@link McpAppViewProps.renderTitle}.
+   */
+  titleMode?: ViewTitleMode
+  /** Heading level of the toolbar title in `"show"` mode. Default `2`. */
+  titleLevel?: ViewTitleLevel
+  /** Renders the toolbar title in `"slot"` mode; receives the view's title. */
+  renderTitle?: (title: string | undefined) => ReactNode
+  /** Delay before the loading placeholder adds its "taking longer" hint. Default 8000 ms. */
+  slowHintAfterMs?: number
+  /**
+   * Map a raw rendering error (the tool's `isError` text) onto human text.
+   * The raw reason always stays available under "Details".
+   */
+  describeError?: DescribeViewError
+  /** Human title of a pipeline step in the failed-steps alert (default: the step id). */
+  describeStep?: DescribeStep
 }
 
-export function McpAppView({
-  widgets,
-  refreshToolName = "refresh-view",
-  builderEnabled,
-  labels,
-}: McpAppViewProps) {
-  const effectiveLabels = { ...DEFAULT_LABELS, ...labels }
-  // Since mcp-use 2.x the shell reads the view channels through the dedicated
-  // hooks (all require the surrounding `bootstrapView` mount that
-  // `mountMcpToolkitApp` provides) and calls tools through the HostBridge that
-  // `McpUseHostBridgeProvider` installs.
-  const tool = useToolContext()
-  const { displayMode, requestDisplayMode } = useDisplayMode()
-  const { safeArea, hostContext } = useHostContext()
-  const bridge = useHostBridge()
-  const callTool = useCallback(
-    (name: string, args: Record<string, unknown>) => bridge.callTool(name, args),
-    [bridge],
+/**
+ * The toolkit's MCP App view: lifecycle placeholder (waiting / error /
+ * cancelled), toolbar, failed-steps alert and the rendered layout (or the
+ * builder). Mounts a `ToastProvider` and binds the toolkit's own strings to
+ * the host's locale unless a `LocaleProvider` sets one, so the chrome follows
+ * the host language; `useLocale()` in consumer widgets is unaffected. Lucide
+ * icons draw at the CI stroke (2.5) throughout, the toast stack included.
+ */
+export function McpAppView(props: McpAppViewProps) {
+  const { locale } = useHostContext()
+  return (
+    <ToolkitLocaleFallback locale={locale}>
+      {/* Wraps the ToastProvider, whose toast stack renders beside the shell. */}
+      <LucideProvider strokeWidth={ICON_STROKE}>
+        <ToastProvider>
+          <McpAppViewShell {...props} />
+        </ToastProvider>
+      </LucideProvider>
+    </ToolkitLocaleFallback>
   )
+}
 
-  const isPending = tool.status === "pending"
-  // Since mcp-use 2.7.1 a host cancellation of the rendering call latches as a
-  // terminal `status: "error"` — show it instead of the skeleton, and never
-  // let the recovery below re-run the call the user stopped.
-  const isCancelled = tool.status === "error" && tool.error instanceof ToolCancelledError
-  const initialViewData = tool.status === "ready" ? (tool.toolOutput as ViewData) : undefined
-  const toolInput = tool.toolInput
-
+/**
+ * Host-delivered payload → local `viewData`, recovered payloads included.
+ * Render-phase setState (not an effect) so the React Compiler doesn't flag a
+ * cascading render.
+ */
+function useHostViewData(
+  initialViewData: ViewData | undefined,
+  isPending: boolean,
+  recovered: ViewData | null,
+) {
   const [viewData, setViewData] = useState<ViewData | null>(null)
-  const [isRefreshing, setIsRefreshing] = useState(false)
-
-  // In-iframe build mode is purely a UI state — the LLM never sees the
-  // catalogue, the user toggles into build by clicking the toolbar button.
-  const [buildMode, setBuildMode] = useState(false)
-
-  // Sync host-provided initialViewData → local viewData via render-phase
-  // setState (rather than an effect) so the React Compiler doesn't flag a
-  // cascading render. The guard against transient empty toolOutput stays:
-  // widgetProps may briefly drop `context`/`layout` when displayMode toggles,
-  // and we don't want that to clobber a valid viewData.
-  //
   // `prev` MUST start as `null`, not `initialViewData`: hosts that expose the
   // complete tool output before the app's first render (e.g. window.openai
   // globals injected ahead of script execution) would otherwise never trip the
-  // identity check — initialViewData never changes again, the sync never runs,
-  // and the app idles on the loading skeleton forever.
-  const [prevInitialViewData, setPrevInitialViewData] = useState<typeof initialViewData | null>(
-    null,
-  )
-  if (initialViewData !== prevInitialViewData) {
-    setPrevInitialViewData(initialViewData)
-    if (!isPending && isCompleteViewData(initialViewData)) {
-      setViewData(initialViewData)
-    }
+  // identity check — the sync never runs and the app idles on the skeleton.
+  // The completeness guard stays: widgetProps may briefly drop
+  // `context`/`layout` when displayMode toggles.
+  const [prevInitial, setPrevInitial] = useState<ViewData | undefined | null>(null)
+  if (initialViewData !== prevInitial) {
+    setPrevInitial(initialViewData)
+    if (!isPending && isCompleteViewData(initialViewData)) setViewData(initialViewData)
   }
-
-  // Hosts that strip `structuredContent` from the tool-result notification
-  // (claude.ai / Claude Desktop) never latch a result under mcp-use 2.x — the
-  // `useToolContext` latch ignores content-only results, so `isPending` stays
-  // true forever. The recovery therefore also arms itself on a grace timer
-  // once the originating tool is known, re-executes it via `callTool`
-  // (responses carry `structuredContent` intact), and fills the gap.
-  // Conforming hosts deliver a valid payload up front, so it never fires
-  // there.
-  const recovery = useToolResultRecovery<ViewData>({
-    resultReady: !isPending,
-    cancelled: isCancelled,
-    props: initialViewData,
-    isValid: isCompleteViewData,
-    toolInput,
-    hostContext,
-    callTool,
-  })
   const [prevRecovered, setPrevRecovered] = useState<ViewData | null>(null)
-  if (recovery.data !== prevRecovered) {
-    setPrevRecovered(recovery.data)
+  if (recovered !== prevRecovered) {
+    setPrevRecovered(recovered)
     // The host-delivered payload always wins; recovery only fills the gap.
-    if (recovery.data && !viewData) setViewData(recovery.data)
+    if (recovered && !viewData) setViewData(recovered)
   }
+  return [viewData, setViewData] as const
+}
 
-  const toggleFullscreen = useCallback(async () => {
-    const newMode = displayMode === "fullscreen" ? "inline" : "fullscreen"
-    try {
-      // Advisory since 2.x: the promise only confirms the host processed the
-      // request. `displayMode` from `useDisplayMode` updates reactively when
-      // (and only when) the host actually applies the change.
-      await requestDisplayMode({ mode: newMode })
-    } catch (e) {
-      console.error("Failed to toggle display mode:", e)
-    }
-  }, [displayMode, requestDisplayMode])
-
-  // Stable callTool callback (avoids a new object reference on every render)
-  const callToolFn = useCallback(
-    async (name: string, args: object) => {
-      return callTool(name, args as Record<string, unknown>)
-    },
-    [callTool],
-  )
-
+/**
+ * Refresh via the refresh tool. A failure keeps the data and says so in a
+ * toast in catalog words only; the raw reason goes to the console, never to
+ * the user.
+ */
+function useViewRefresh(options: {
+  viewData: ViewData | null
+  setViewData: (next: ViewData) => void
+  callTool: (name: string, args: Record<string, unknown>) => Promise<unknown>
+  refreshToolName: string
+  labels: Pick<ViewMessages, "refreshFailed" | "refreshFailedHint">
+}) {
+  const { viewData, setViewData, callTool, refreshToolName, labels } = options
+  const toast = useToast()
+  const [isRefreshing, setIsRefreshing] = useState(false)
   const refreshView = useCallback(async () => {
     if (!viewData?._refreshParams) return
     setIsRefreshing(true)
+    let failure: unknown = null
     try {
       const result = await callTool(
         refreshToolName,
         viewData._refreshParams as unknown as Record<string, unknown>,
       )
-      // Decode through the shared structured-first parser (one convention with
-      // `useToolQuery`); a refresh returns the view envelope as `structuredContent`.
-      const refreshed = parseToolResult<ViewData | null>(result)
-      if (refreshed?.context && refreshed?.layout) {
-        setViewData(refreshed)
-      }
-      void queryClient.invalidateQueries()
+      // One decoding convention with `useToolQuery` (structured-first), with a
+      // typed outcome: an unusable payload is a failure, never exception text.
+      const outcome = decodeViewResult(result, isCompleteViewData)
+      if (outcome.ok) setViewData(outcome.data)
+      else failure = outcome.reason ?? "the refresh tool returned no view"
+      // The call went through, so self-fetching widgets refresh as well;
+      // a tool error refreshes nothing.
+      if (outcome.ok || !outcome.isError) void queryClient.invalidateQueries()
     } catch (e) {
-      console.error("Failed to refresh view:", e)
+      failure = e
     } finally {
       setIsRefreshing(false)
     }
-  }, [callTool, refreshToolName, viewData])
+    if (failure === null) return
+    console.warn("[mcp-toolkit] refresh failed:", failure)
+    toast.show({
+      tone: "danger",
+      title: labels.refreshFailed,
+      description: labels.refreshFailedHint,
+    })
+  }, [callTool, labels, refreshToolName, setViewData, toast, viewData])
+  return { isRefreshing, refreshView }
+}
+
+/**
+ * The fullscreen toggle, gated on the host's offer. A rejected request shows
+ * a toast in catalog words; the raw reason goes to the console.
+ */
+function useFullscreenToggle(
+  labels: Pick<ViewMessages, "fullscreenFailed" | "fullscreenFailedHint">,
+) {
+  const { displayMode, availableDisplayModes, requestDisplayMode } = useDisplayMode()
+  const toast = useToast()
+  const toggle = useCallback(async () => {
+    const mode = displayMode === "fullscreen" ? "inline" : "fullscreen"
+    try {
+      // Advisory since 2.x: `displayMode` updates when the host applies it.
+      await requestDisplayMode({ mode })
+    } catch (e) {
+      console.warn("[mcp-toolkit] display-mode request failed:", e)
+      toast.show({
+        tone: "danger",
+        title: labels.fullscreenFailed,
+        description: labels.fullscreenFailedHint,
+      })
+    }
+  }, [displayMode, labels, requestDisplayMode, toast])
+  return {
+    isFullscreen: displayMode === "fullscreen",
+    canFullscreen: fullscreenAvailable(displayMode, availableDisplayModes),
+    toggle,
+  }
+}
+
+function McpAppViewShell({
+  widgets,
+  refreshToolName = "refresh-view",
+  builderEnabled,
+  labels,
+  builderLabels,
+  titleMode = "show",
+  titleLevel = 2,
+  renderTitle,
+  slowHintAfterMs = DEFAULT_SLOW_HINT_MS,
+  describeError,
+  describeStep,
+}: McpAppViewProps) {
+  const messages = useToolkitMessages()
+  const L = useMemo(() => ({ ...messages.view, ...labels }), [messages.view, labels])
+  // The mcp-use 2.x view channels (all need the `bootstrapView` mount
+  // `mountMcpToolkitApp` provides); tools go through the HostBridge.
+  const tool = useToolContext()
+  const { safeArea, hostContext } = useHostContext()
+  const bridge = useHostBridge()
+  const callTool = useCallback(
+    (name: string, args: Record<string, unknown>) => bridge.callTool(name, args),
+    [bridge],
+  )
+  // The widget-facing shape (`args: object`, so generated input interfaces
+  // without an index signature pass straight through).
+  const callToolFn = useCallback(
+    (name: string, args: object) => bridge.callTool(name, args as Record<string, unknown>),
+    [bridge],
+  )
+  const isPending = tool.status === "pending"
+  // Since mcp-use 2.7.1 a host cancellation latches as `status: "error"`.
+  const isCancelled = tool.status === "error" && tool.error instanceof ToolCancelledError
+  const isCallError = tool.status === "error" && !isCancelled
+  const initialViewData = tool.status === "ready" ? (tool.toolOutput as ViewData) : undefined
 
-  // Called by LayoutBuilder when the user clicks Done. Commits the draft
-  // layout (and any keys/steps edits) into the parent viewData so the
-  // WidgetRenderer takes over showing the just-built layout.
+  // Hosts that strip `structuredContent` (claude.ai) never latch a result under
+  // mcp-use 2.x; the recovery re-executes the call once to fill the gap. It
+  // never fires on a cancelled or failed call (#176): those render their state.
+  const recovery = useToolResultRecovery<ViewData>({
+    resultReady: !isPending,
+    cancelled: isCancelled,
+    errored: isCallError,
+    props: initialViewData,
+    isValid: isCompleteViewData,
+    toolInput: tool.toolInput,
+    hostContext,
+    callTool,
+  })
+  const [viewData, setViewData] = useHostViewData(initialViewData, isPending, recovery.data)
+  const { lifecycle, retry: retryCall } = useViewLifecycle({
+    hasViewData: viewData !== null,
+    callStatus: tool.status,
+    cancelled: isCancelled,
+    callError: isCallError ? tool.error : undefined,
+    recoveryFailed: recovery.failed,
+    toolName: resolveRecoveryToolName(hostContext),
+    toolInput: tool.toolInput,
+    callTool,
+    isValid: isCompleteViewData,
+    onResult: setViewData,
+    slowHintAfterMs,
+  })
+  const { frameRef, retry } = useRetryFocus(lifecycle.phase, retryCall)
+  const { isRefreshing, refreshView } = useViewRefresh({
+    viewData,
+    setViewData,
+    callTool,
+    refreshToolName,
+    labels: L,
+  })
+  const fullscreen = useFullscreenToggle(L)
+  // In-iframe build mode is purely a UI state — the LLM never sees the catalogue.
+  const [buildMode, setBuildMode] = useState(false)
   const exitBuildMode = useCallback(
-    (commit?: {
-      layout: LayoutConfig
-      keys?: Record<string, unknown>
-      steps?: PipelineStepRef[]
-      title?: string
-      context?: ViewData["context"]
-    }) => {
-      if (commit) {
-        setViewData((prev) =>
-          prev
-            ? {
-                ...prev,
-                layout: commit.layout,
-                title: commit.title ?? prev.title,
-                context: commit.context ?? prev.context,
-                _refreshParams: {
-                  keys: commit.keys,
-                  steps: commit.steps,
-                  layout: commit.layout,
-                  title: commit.title ?? prev.title,
-                },
-              }
-            : prev,
-        )
-      }
+    (commit?: BuilderCommit) => {
+      if (commit) setViewData((prev) => (prev ? applyBuilderCommit(prev, commit) : prev))
       setBuildMode(false)
     },
-    [],
+    [setViewData],
   )
 
-  // `isPending` must not gate the render: on hosts that strip
-  // `structuredContent` the 2.x latch stays "pending" forever, and recovered
-  // viewData still has to replace the skeleton.
+  // `isPending` must not gate the render: on stripping hosts the latch stays
+  // "pending" forever, and recovered viewData still has to replace it. The
+  // frame is the stable focus target of a retry (`useRetryFocus`).
   if (!viewData) {
-    return <ViewPlaceholder cancelled={isCancelled} labels={effectiveLabels} />
+    return (
+      <div ref={frameRef} tabIndex={-1} data-slot="mcp-app-view" className="outline-hidden">
+        <ViewPlaceholder
+          lifecycle={lifecycle}
+          labels={L}
+          onRetry={retry}
+          describeError={describeError}
+        />
+      </div>
+    )
   }
 
-  const isFullscreen = displayMode === "fullscreen"
-
-  // Follow the server's own signal by default: render-view reports
-  // `builderAvailable` (derived from `app.builder`), so the Build button only
-  // shows when the catalogue/dashboard tools are actually registered. An
-  // explicit `builderEnabled` prop forces the affordance on or off.
-  const builderAvailable = builderEnabled ?? viewData.builderAvailable ?? false
-
   return (
-    <main
-      style={{
-        // Fullscreen: the widget owns the viewport, so we take the full window
-        // and handle our own scrolling. Inline: the host (Claude, ChatGPT) owns
-        // sizing + scrolling and observes our intrinsic height via
-        // `bootstrapView`'s auto-resize, so we let content dictate height and
-        // avoid setting overflowY (which would clip our own content inside a
-        // host that's already auto-sized to us).
-        ...(isFullscreen ? { minHeight: "100vh", overflowY: "auto" as const } : null),
-        paddingTop: safeArea.top,
-        paddingRight: safeArea.right,
-        paddingBottom: safeArea.bottom,
-        paddingLeft: safeArea.left,
-      }}
-    >
-      <ViewToolbar
-        hidden={buildMode}
-        viewData={viewData}
-        builderAvailable={builderAvailable}
-        isFullscreen={isFullscreen}
-        isRefreshing={isRefreshing}
-        labels={effectiveLabels}
-        onRefresh={refreshView}
-        onEnterBuildMode={() => setBuildMode(true)}
-        onToggleFullscreen={toggleFullscreen}
-      />
-
-      <StepErrors hidden={buildMode} errors={viewData.context.errors} />
-
-      <AppQueryProvider callTool={callToolFn}>
-        <ViewBody
-          buildMode={buildMode}
+    <div ref={frameRef} tabIndex={-1} data-slot="mcp-app-view" className="outline-hidden">
+      <main
+        style={{
+          // Fullscreen: the view owns the viewport and scrolls itself. Inline:
+          // the host sizes us from our intrinsic height (bootstrapView's
+          // auto-resize), so no overflow clipping there.
+          ...(fullscreen.isFullscreen ? { minHeight: "100vh", overflowY: "auto" as const } : null),
+          paddingTop: safeArea.top,
+          paddingRight: safeArea.right,
+          paddingBottom: safeArea.bottom,
+          paddingLeft: safeArea.left,
+        }}
+      >
+        <ViewToolbar
+          hidden={buildMode}
           viewData={viewData}
-          widgets={widgets}
-          callTool={callToolFn}
-          onExit={exitBuildMode}
+          builderAvailable={builderEnabled ?? viewData.builderAvailable ?? false}
+          isFullscreen={fullscreen.isFullscreen}
+          canFullscreen={fullscreen.canFullscreen}
+          isRefreshing={isRefreshing}
+          labels={L}
+          titleMode={titleMode}
+          titleLevel={titleLevel}
+          renderTitle={renderTitle}
+          onRefresh={refreshView}
+          onEnterBuildMode={() => setBuildMode(true)}
+          onToggleFullscreen={fullscreen.toggle}
         />
-      </AppQueryProvider>
-    </main>
+
+        <StepErrors
+          hidden={buildMode}
+          errors={viewData.context.errors}
+          steps={viewData._refreshParams?.steps}
+          labels={L}
+          describeStep={describeStep}
+          onRetry={viewData._refreshParams ? () => void refreshView() : undefined}
+        />
+
+        <AppQueryProvider callTool={callToolFn}>
+          <ViewBody
+            buildMode={buildMode}
+            viewData={viewData}
+            widgets={widgets}
+            callTool={callToolFn}
+            builderLabels={builderLabels}
+            onExit={exitBuildMode}
+          />
+        </AppQueryProvider>
+      </main>
+    </div>
   )
 }

package/src/app/mcp-toolkit-app.tsx

@@ -1,11 +1,33 @@
-import { ThemeProvider, bootstrapView } from "mcp-use/react"
+import { useLayoutEffect, type ReactNode } from "react"
+import { ThemeProvider, bootstrapView, useHostContext } from "mcp-use/react"
+import { adoptHostFontVariables } from "../theme/host-fonts.js"
 import { McpAppView, type McpAppViewProps } from "./mcp-app-view.js"
 import { McpUseHostBridgeProvider } from "./mcp-use-host-bridge.js"
 
+/**
+ * Keeps Geist first when the host sends its font. mcp-use's `ThemeProvider`
+ * writes the host's SEP-1865 style variables inline on `<html>`, including
+ * `--font-sans`/`--font-mono`, which share their names with the toolkit's font
+ * roles and would replace the Geist-first stacks whole. This component sits
+ * ABOVE that provider on purpose: a parent's layout effect runs after its
+ * children's, so the host variables are already applied when it moves the
+ * font pair into the fallback slot (`adoptHostFontVariables`). Both effects
+ * key on the same host-context snapshot, so they run in the same commit.
+ */
+function HostFontRoles({ children }: { children: ReactNode }) {
+  const { hostContext } = useHostContext()
+  useLayoutEffect(() => {
+    if (typeof document === "undefined") return
+    adoptHostFontVariables(document.documentElement.style, hostContext?.styles?.variables)
+  }, [hostContext])
+  return children
+}
+
 /**
  * Consumer-facing root for a toolkit-rendered MCP App. Composes the mcp-use
  * 2.x view plumbing around `McpAppView`: `ThemeProvider` applies the host's
- * theme/style variables to the document, and `McpUseHostBridgeProvider`
+ * theme/style variables to the document (with the host's font kept behind
+ * Geist, see `adoptHostFontVariables`), and `McpUseHostBridgeProvider`
  * installs the `HostBridge` (and view-scope flag) every toolkit widget below
  * resolves through `useHostBridge()`.
  *
@@ -16,11 +38,13 @@ import { McpUseHostBridgeProvider } from "./mcp-use-host-bridge.js"
  */
 export function McpToolkitApp(props: McpAppViewProps) {
   return (
-    <ThemeProvider>
-      <McpUseHostBridgeProvider>
-        <McpAppView {...props} />
-      </McpUseHostBridgeProvider>
-    </ThemeProvider>
+    <HostFontRoles>
+      <ThemeProvider>
+        <McpUseHostBridgeProvider>
+          <McpAppView {...props} />
+        </McpUseHostBridgeProvider>
+      </ThemeProvider>
+    </HostFontRoles>
   )
 }