akanjs 3.0.2 → 3.1.0-rc.0

package/webkit/McpAppBridge.ts

@@ -0,0 +1,291 @@
+"use client";
+import { type ErrorResponsePayload, type FetchBridge, type FetchBridgeCall, restoreRemoteError } from "akanjs/fetch";
+
+interface JsonRpcMessage {
+  jsonrpc: "2.0";
+  id?: string | number | null;
+  method?: string;
+  params?: Record<string, unknown>;
+  result?: unknown;
+  error?: { code: number; message: string; data?: unknown };
+}
+
+export interface McpToolResultLike {
+  content?: { type: string; text?: string }[];
+  structuredContent?: unknown;
+  isError?: boolean;
+  _meta?: Record<string, unknown>;
+}
+
+export interface McpAppTool {
+  name: string;
+  description?: string;
+  inputSchema: Record<string, unknown>;
+  annotations?: { readOnlyHint?: boolean; destructiveHint?: boolean; openWorldHint?: boolean };
+}
+
+export interface McpAppToolServer {
+  list: () => McpAppTool[];
+  call: (name: string, args: Record<string, unknown>, signal: AbortSignal) => Promise<McpToolResultLike>;
+}
+
+export interface McpHostCapabilities {
+  openLinks?: object;
+  downloadFile?: object;
+  updateModelContext?: { text?: object };
+  serverTools?: { listChanged?: boolean };
+}
+
+export type McpDownloadContent =
+  | { type: "resource"; resource: { uri: string; mimeType?: string; text?: string; blob?: string } }
+  | { type: "resource_link"; uri: string; name: string; mimeType?: string };
+
+export interface McpHostContext {
+  theme?: "light" | "dark";
+  displayMode?: "inline" | "fullscreen" | "pip";
+  locale?: string;
+  timeZone?: string;
+  containerDimensions?: { width?: number; height?: number; maxWidth?: number; maxHeight?: number };
+  styles?: { variables?: Record<string, string | undefined> };
+}
+
+interface McpAppSnapshotRecord {
+  key: string;
+  args: Record<string, unknown>;
+  value: unknown;
+}
+
+export type McpAppStart =
+  | { ok: true; href: string; snapshot: McpAppSnapshotRecord[]; account: Record<string, unknown> | null }
+  | { ok: false; message: string };
+
+export class McpAppBridge {
+  static readonly protocolVersion = "2026-01-26";
+  static readonly initializeTimeoutMs = 15_000;
+  static readonly #hostRequests = new Set(["ping", "ui/resource-teardown"]);
+
+  readonly #pending = new Map<number, { resolve: (value: unknown) => void; reject: (error: Error) => void }>();
+  readonly #contextListeners = new Set<(context: McpHostContext) => void>();
+  readonly #toolResult: Promise<McpToolResultLike>;
+  #resolveToolResult: (result: McpToolResultLike) => void = () => undefined;
+  #context: McpHostContext = {};
+  #capabilities: McpHostCapabilities = {};
+  #tools: McpAppToolServer | null = null;
+  #heldToolRequests: JsonRpcMessage[] = [];
+  #toolsListed = false;
+  readonly #toolCalls = new Map<string | number, AbortController>();
+  #seq = 0;
+
+  constructor() {
+    this.#toolResult = new Promise((resolve) => {
+      this.#resolveToolResult = resolve;
+    });
+    window.addEventListener("message", (event) => {
+      if (event.source !== window.parent) return;
+      const message = event.data as JsonRpcMessage | null;
+      if (message?.jsonrpc === "2.0") this.#receive(message);
+    });
+  }
+
+  get hostContext(): McpHostContext {
+    return this.#context;
+  }
+
+  get hostCapabilities(): McpHostCapabilities {
+    return this.#capabilities;
+  }
+
+  /** Whether the host asked for the view's own tools, which is the only sign it offers them to its model. */
+  get toolsListed(): boolean {
+    return this.#toolsListed;
+  }
+
+  async connect(): Promise<McpAppStart> {
+    const initialize = this.request("ui/initialize", {
+      protocolVersion: McpAppBridge.protocolVersion,
+      appCapabilities: { availableDisplayModes: ["inline", "fullscreen"], tools: { listChanged: true } },
+      appInfo: { name: process.env.AKAN_PUBLIC_APP_NAME ?? "akan", version: "0" },
+    });
+    const timeout = new Promise<null>((resolve) => setTimeout(() => resolve(null), McpAppBridge.initializeTimeoutMs));
+    const initialized = (await Promise.race([initialize, timeout]).catch(() => null)) as {
+      hostContext?: McpHostContext;
+      hostCapabilities?: McpHostCapabilities;
+    } | null;
+    if (!initialized) return { ok: false, message: "The host did not answer this view." };
+    this.#context = { ...initialized.hostContext, ...this.#context };
+    this.#capabilities = initialized.hostCapabilities ?? {};
+    this.notify("ui/notifications/initialized", {});
+    const result = await this.#toolResult;
+    const page = (result.structuredContent ?? {}) as { href?: unknown };
+    const text = result.content?.find((block) => block.type === "text")?.text;
+    if (result.isError || typeof page.href !== "string")
+      return { ok: false, message: text ?? "This screen is not available here." };
+    const snapshot = result._meta?.["akanjs/snapshot"];
+    const account = result._meta?.["akanjs/account"];
+    return {
+      ok: true,
+      href: page.href,
+      snapshot: Array.isArray(snapshot) ? (snapshot as McpAppSnapshotRecord[]) : [],
+      account: account && typeof account === "object" ? (account as Record<string, unknown>) : null,
+    };
+  }
+
+  onHostContext(listener: (context: McpHostContext) => void) {
+    this.#contextListeners.add(listener);
+    return () => this.#contextListeners.delete(listener);
+  }
+
+  request(
+    method: string,
+    params: Record<string, unknown>,
+    { timeoutMs }: { timeoutMs?: number } = {},
+  ): Promise<unknown> {
+    const id = ++this.#seq;
+    return new Promise((resolve, reject) => {
+      this.#pending.set(id, { resolve, reject });
+      window.parent.postMessage({ jsonrpc: "2.0", id, method, params }, "*");
+      if (timeoutMs)
+        setTimeout(() => {
+          if (!this.#pending.delete(id)) return;
+          reject(new Error(`The host did not answer ${method}`));
+        }, timeoutMs);
+    });
+  }
+
+  notify(method: string, params: Record<string, unknown>) {
+    window.parent.postMessage({ jsonrpc: "2.0", method, params }, "*");
+  }
+
+  async callTool(name: string, args: Record<string, unknown>) {
+    return (await this.request("tools/call", {
+      name,
+      arguments: args,
+      _meta: { "akanjs/view": true },
+    })) as McpToolResultLike;
+  }
+
+  async openLink(url: string) {
+    const result = (await this.request("ui/open-link", { url })) as { isError?: boolean } | null;
+    if (result?.isError) throw new Error(`The host declined to open ${url}`);
+  }
+
+  async downloadFile(contents: McpDownloadContent[]) {
+    await this.request("ui/download-file", { contents });
+  }
+
+  async updateModelContext(text: string) {
+    await this.request("ui/update-model-context", { content: [{ type: "text", text }] }, { timeoutMs: 10_000 });
+  }
+
+  serveTools(server: McpAppToolServer) {
+    this.#tools = server;
+    const held = this.#heldToolRequests;
+    this.#heldToolRequests = [];
+    for (const message of held) this.#handle(message);
+  }
+
+  toolsChanged() {
+    this.notify("notifications/tools/list_changed", {});
+  }
+
+  fetchBridge(snapshot: McpAppSnapshotRecord[]): FetchBridge {
+    const seeded = new Map(snapshot.map((record) => [McpAppBridge.#callKey(record.key, record.args), record.value]));
+    return {
+      call: async (request: FetchBridgeCall) => {
+        const callKey = McpAppBridge.#callKey(request.key, request.args);
+        if (request.type === "query" && seeded.has(callKey)) {
+          const value = seeded.get(callKey);
+          seeded.delete(callKey);
+          return value;
+        }
+        return McpAppBridge.#valueOf(request, await this.callTool(request.key, McpAppBridge.#defined(request.args)));
+      },
+    };
+  }
+
+  #receive(message: JsonRpcMessage) {
+    if (message.method) {
+      this.#handle(message);
+      return;
+    }
+    if (typeof message.id !== "number") return;
+    const pending = this.#pending.get(message.id);
+    if (!pending) return;
+    this.#pending.delete(message.id);
+    if (message.error) pending.reject(new Error(message.error.message));
+    else pending.resolve(message.result);
+  }
+
+  #handle({ id, method = "", params = {} }: JsonRpcMessage) {
+    if (method === "ui/notifications/tool-result") this.#resolveToolResult(params as McpToolResultLike);
+    if (method === "notifications/cancelled") this.#toolCalls.get(params.requestId as string | number)?.abort();
+    if (method === "ui/notifications/tool-cancelled")
+      this.#resolveToolResult({ isError: true, content: [{ type: "text", text: "The tool call was cancelled." }] });
+    
+    if (method === "ui/notifications/host-context-changed") {
+      const changed = params as McpHostContext;
+      const { styles, ...kept } = this.#context;
+      this.#context = { ...(changed.theme && !changed.styles ? kept : { ...kept, styles }), ...changed };
+      for (const listener of this.#contextListeners) listener(this.#context);
+    }
+    if (id === undefined || id === null) return;
+    if (method === "tools/list" || method === "tools/call") {
+      
+      if (this.#tools) void this.#answerTool(id, method, params, this.#tools);
+      else this.#heldToolRequests.push({ jsonrpc: "2.0", id, method, params });
+      return;
+    }
+    
+    const reply = McpAppBridge.#hostRequests.has(method)
+      ? { result: {} }
+      : { error: { code: -32601, message: `Method not found: ${method}` } };
+    window.parent.postMessage({ jsonrpc: "2.0", id, ...reply }, "*");
+  }
+
+  async #answerTool(id: string | number, method: string, params: Record<string, unknown>, tools: McpAppToolServer) {
+    const controller = new AbortController();
+    let reply: Pick<JsonRpcMessage, "result" | "error">;
+    try {
+      if (method === "tools/list") {
+        this.#toolsListed = true;
+        reply = { result: { tools: tools.list() } };
+      } else {
+        const { name, arguments: args } = params as { name?: unknown; arguments?: unknown };
+        if (typeof name !== "string") throw new Error("tools/call names no tool");
+        const callArgs = args && typeof args === "object" ? (args as Record<string, unknown>) : {};
+        this.#toolCalls.set(id, controller);
+        reply = { result: await tools.call(name, callArgs, controller.signal) };
+      }
+    } catch (error) {
+      reply = { error: { code: -32603, message: error instanceof Error ? error.message : String(error) } };
+    } finally {
+      this.#toolCalls.delete(id);
+    }
+    if (!controller.signal.aborted) window.parent.postMessage({ jsonrpc: "2.0", id, ...reply }, "*");
+  }
+
+  static #valueOf({ key, returns }: FetchBridgeCall, result: McpToolResultLike) {
+    const text = result.content?.find((block) => block.type === "text")?.text ?? "";
+    const failure = result._meta?.["akanjs/error"] as ErrorResponsePayload | undefined;
+    if (result.isError && failure?.error) throw restoreRemoteError(failure, failure.statusCode ?? 400);
+    if (result.isError) throw new Error(text || `${key} failed`);
+    if (result._meta && "akanjs/value" in result._meta) return result._meta["akanjs/value"];
+    const structured = result.structuredContent as Record<string, unknown> | undefined;
+    if (structured !== undefined) return returns.arrDepth ? structured.items : structured;
+    if (returns.nullable && text === "null") return null;
+    const parsed = returns.modelType || returns.arrDepth || ["Int", "Float", "Boolean"].includes(returns.refName);
+    return parsed ? (JSON.parse(text) as unknown) : text;
+  }
+
+  static #defined(args: Record<string, unknown>) {
+    return Object.fromEntries(Object.entries(args).filter(([, value]) => value !== undefined));
+  }
+
+  static #callKey(key: string, args: Record<string, unknown>) {
+    const sorted = Object.keys(args)
+      .filter((name) => args[name] !== undefined && args[name] !== null)
+      .sort()
+      .map((name) => [name, args[name]]);
+    return `${key}:${JSON.stringify(sorted)}`;
+  }
+}

package/webkit/McpAppView.ts

@@ -0,0 +1,258 @@
+"use client";
+import { router, setCookie } from "akanjs/client";
+import { Logger, parseAkanI18nEnv } from "akanjs/common";
+import { st } from "akanjs/store";
+import type { McpAppBridge, McpDownloadContent, McpHostContext } from "./McpAppBridge";
+
+export class McpAppView {
+  static readonly contentGap = 24;
+  
+  static readonly hostTokens = {
+    "--color-background-primary": ["--background", "--card", "--popover"],
+    "--color-background-secondary": ["--muted"],
+    "--color-text-primary": ["--foreground", "--card-foreground", "--popover-foreground"],
+    "--color-text-secondary": ["--muted-foreground"],
+    "--color-border-primary": ["--border", "--input"],
+    "--color-ring-primary": ["--ring"],
+    "--font-sans": ["--font-sans"],
+    "--font-mono": ["--font-mono"],
+  } as const;
+
+  readonly #bridge: McpAppBridge;
+  readonly #blobs = new Map<string, Blob>();
+  #lastHeight = 0;
+  #theme: string | undefined;
+
+  constructor(bridge: McpAppBridge) {
+    this.#bridge = bridge;
+  }
+
+  /** `href` in the host's language when the app speaks it: the page run used the server's MCP language. */
+  static localize(href: string, locale: string | undefined, locales: readonly string[]) {
+    const lang = locale?.split("-")[0]?.toLowerCase();
+    const current = /^\/([^/?#]+)/.exec(href)?.[1];
+    if (!lang || !current || !locales.includes(lang) || !locales.includes(current)) return href;
+    return `/${lang}${href.slice(current.length + 1)}`;
+  }
+
+  mount() {
+    this.#apply(this.#bridge.hostContext);
+    this.#bridge.onHostContext((context) => this.#apply(context));
+    this.#watchSize();
+    this.#keepBlobs();
+    this.#routeLinks();
+  }
+
+  /** In place of the app, for a result that names no screen: the host still sizes the view to what it shows. */
+  showUnavailable(message: string) {
+    this.#apply(this.#bridge.hostContext);
+    const notice = document.createElement("p");
+    notice.textContent = message;
+    notice.style.cssText = "margin:0;padding:16px;font:14px/1.5 system-ui,sans-serif;color:var(--foreground)";
+    document.getElementById("root")?.replaceChildren();
+    document.body.style.overflow = "visible";
+    document.body.replaceChildren(notice);
+    this.#bridge.notify("ui/notifications/size-changed", { height: Math.ceil(notice.getBoundingClientRect().height) });
+  }
+
+  #apply({ theme, displayMode, styles }: McpHostContext) {
+    const root = document.documentElement;
+    root.dataset.akanEmbed = displayMode ?? "inline";
+    
+    if (theme && theme !== this.#theme) {
+      this.#theme = theme;
+      setCookie("theme", theme);
+      root.dataset.theme = theme;
+      st.do.setTheme(theme);
+      
+      root.style.colorScheme = theme;
+    }
+    const variables = styles?.variables ?? {};
+    for (const [hostKey, tokens] of Object.entries(McpAppView.hostTokens)) {
+      const value = variables[hostKey];
+      for (const token of tokens)
+        if (value) root.style.setProperty(token, value);
+        else root.style.removeProperty(token);
+    }
+  }
+
+  #watchSize() {
+    let scheduled = false;
+    const report = () => {
+      if (scheduled) return;
+      scheduled = true;
+      requestAnimationFrame(() => {
+        scheduled = false;
+        const height = McpAppView.#contentHeight();
+        if (height === this.#lastHeight) return;
+        this.#lastHeight = height;
+        this.#bridge.notify("ui/notifications/size-changed", { height });
+      });
+    };
+    const resized = new ResizeObserver(report);
+    resized.observe(document.documentElement);
+    const observeContent = () => {
+      for (const content of document.querySelectorAll(".akan-page-content"))
+        for (const child of content.children) resized.observe(child);
+    };
+    new MutationObserver(() => {
+      observeContent();
+      report();
+    }).observe(document.body, { childList: true, subtree: true, attributes: true });
+    
+    document.addEventListener("load", report, true);
+    void document.fonts.ready.then(report);
+    observeContent();
+    report();
+  }
+
+  static #contentHeight() {
+    const content = document.querySelector<HTMLElement>('[id^="pageContainer-"]:not([inert]) .akan-page-content');
+    if (!content) return Math.ceil(document.documentElement.scrollHeight);
+    const viewport = window.innerHeight;
+    const style = getComputedStyle(content);
+    const top = content.getBoundingClientRect().top - content.scrollTop;
+    let bottom = top + Number.parseFloat(style.paddingTop || "0");
+    const pending: Element[] = [content];
+    for (let box = pending.pop(); box; box = pending.pop())
+      for (const child of box.children) {
+        const rect = child.getBoundingClientRect();
+        if (getComputedStyle(child).position === "fixed") continue;
+        if (rect.height === 0 || rect.height >= viewport - 1 || Math.abs(rect.bottom - viewport) <= 1)
+          pending.push(child);
+        else bottom = Math.max(bottom, rect.bottom);
+      }
+    const height = bottom - top + Number.parseFloat(style.paddingBottom || "0") + McpAppView.contentGap;
+    return Math.ceil(Math.max(height + McpAppView.#overlayHeight(), McpAppView.#dialogHeight()));
+  }
+
+  static #overlayHeight() {
+    let height = 0;
+    for (const overlay of document.querySelectorAll<HTMLElement>("[data-akan-embed-overlay]"))
+      height += overlay.getBoundingClientRect().height;
+    return height;
+  }
+
+  static #dialogHeight() {
+    let height = 0;
+    for (const dialog of document.querySelectorAll<HTMLElement>('[aria-modal="true"]')) {
+      if (!dialog.getClientRects().length) continue;
+      let natural = 0;
+      for (const child of dialog.children)
+        if (!["absolute", "fixed"].includes(getComputedStyle(child).position)) natural += child.scrollHeight;
+      height = Math.max(height, natural + McpAppView.contentGap * 2);
+    }
+    return height;
+  }
+
+  #routeLinks() {
+    const { locales } = parseAkanI18nEnv();
+    const base = McpAppView.#parse(document.baseURI);
+    const open = (raw: string) => {
+      if (!raw) return;
+      
+      if (raw.startsWith("#")) {
+        document.getElementById(decodeURIComponent(raw.slice(1)))?.scrollIntoView();
+        return;
+      }
+      const url = McpAppView.#parse(raw, document.baseURI);
+      if (!url) return;
+      const [, lang] = url.pathname.split("/");
+      if (url.origin === base?.origin && lang && locales.includes(lang))
+        router.push(`${url.pathname}${url.search}${url.hash}`);
+      else if (["http:", "https:", "mailto:", "tel:"].includes(url.protocol))
+        this.#bridge.openLink(url.href).catch((error: unknown) => {
+          Logger.warn(`The host did not open ${url.href}: ${error instanceof Error ? error.message : error}`);
+        });
+    };
+    const download = (href: string, name: string | null) =>
+      this.#download(href, name).catch((error: unknown) => {
+        Logger.warn(`The host did not save ${href}: ${error instanceof Error ? error.message : error}`);
+      });
+    document.addEventListener("click", (event) => {
+      if (event.defaultPrevented || event.button !== 0) return;
+      if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+      const anchor = (event.target as Element | null)?.closest?.("a[href]");
+      if (!(anchor instanceof HTMLAnchorElement)) return;
+      event.preventDefault();
+      const href = anchor.getAttribute("href") ?? "";
+      if (!anchor.hasAttribute("download")) open(href);
+      else void download(href, anchor.getAttribute("download"));
+    });
+    window.open = (url?: string | URL) => {
+      if (url !== undefined) open(String(url));
+      return null;
+    };
+    
+    const click = HTMLAnchorElement.prototype.click;
+    HTMLAnchorElement.prototype.click = function (this: HTMLAnchorElement) {
+      if (this.isConnected || !this.hasAttribute("download")) click.call(this);
+      else void download(this.getAttribute("href") ?? "", this.getAttribute("download"));
+    };
+  }
+
+  async #download(href: string, suggested: string | null) {
+    const content = await this.#downloadOf(href, suggested || null);
+    if (!content) throw new Error("it is neither a web address nor a file this view made");
+    if (this.#bridge.hostCapabilities.downloadFile) await this.#bridge.downloadFile([content]);
+    else if (content.type === "resource_link") await this.#bridge.openLink(content.uri);
+    else throw new Error("this host does not save files");
+  }
+
+  async #downloadOf(href: string, suggested: string | null): Promise<McpDownloadContent | null> {
+    const blob = this.#blobs.get(href) ?? (href.startsWith("data:") ? McpAppView.#dataBlob(href) : null);
+    if (blob) {
+      const name = suggested ?? "download";
+      const bytes = new Uint8Array(await blob.arrayBuffer());
+      return {
+        type: "resource",
+        resource: {
+          uri: `file:///${encodeURIComponent(name)}`,
+          mimeType: blob.type || "application/octet-stream",
+          blob: McpAppView.#base64(bytes),
+        },
+      };
+    }
+    const url = McpAppView.#parse(href, document.baseURI);
+    if (!url || !["http:", "https:"].includes(url.protocol)) return null;
+    return { type: "resource_link", uri: url.href, name: suggested ?? url.pathname.split("/").at(-1) ?? "download" };
+  }
+
+  #keepBlobs() {
+    const create = URL.createObjectURL.bind(URL);
+    const revoke = URL.revokeObjectURL.bind(URL);
+    URL.createObjectURL = (object: Blob | MediaSource) => {
+      const url = create(object);
+      if (object instanceof Blob) this.#blobs.set(url, object);
+      return url;
+    };
+    URL.revokeObjectURL = (url: string) => {
+      this.#blobs.delete(url);
+      revoke(url);
+    };
+  }
+
+  static #dataBlob(href: string) {
+    const match = /^data:([^,]*?)(;base64)?,(.*)$/s.exec(href);
+    if (!match) return null;
+    const [, type = "", base64, body = ""] = match;
+    const bytes = base64
+      ? Uint8Array.from(atob(body), (char) => char.charCodeAt(0))
+      : new TextEncoder().encode(decodeURIComponent(body));
+    return new Blob([bytes], { type: type.split(";")[0] });
+  }
+
+  static #base64(bytes: Uint8Array) {
+    let binary = "";
+    for (let at = 0; at < bytes.length; at += 0x8000) binary += String.fromCharCode(...bytes.subarray(at, at + 0x8000));
+    return btoa(binary);
+  }
+
+  static #parse(raw: string, base?: string) {
+    try {
+      return new URL(raw, base);
+    } catch {
+      return null;
+    }
+  }
+}

package/webkit/bootCsr.tsx

@@ -1,9 +1,14 @@
 "use client";
-import { csrContext, Device, getStoredAuthToken, initAuth } from "akanjs/client";
+import { csrContext, csrLocation, Device, getStoredAuthToken, initAuth } from "akanjs/client";
 import { Logger, parseAkanI18nEnv, parseBasePaths } from "akanjs/common";
+import { FetchClient } from "akanjs/fetch";
+import { st } from "akanjs/store";
 import { useSyncExternalStore } from "react";
 import * as ReactDOM from "react-dom/client";
 import { type CsrRouteContext, CsrRouteTable } from "./CsrRouteTable";
+import { McpAppAgent } from "./McpAppAgent";
+import { McpAppBridge } from "./McpAppBridge";
+import { McpAppView } from "./McpAppView";
 import { RenderLayer } from "./RenderLayer";
 import { useCsrValues } from "./useCsrValues";
 
@@ -18,8 +23,15 @@ export const bootCsr = async (context: CsrRouteContext) => {
   window.document.body.style.overflow = "hidden";
   initializeMobileTargetFromSearch();
   if (window.location.pathname === "/404") return;
+  
+  let remount: () => void = () => undefined;
+  const embedded = globalThis.__AKAN_EMBED__ ? await bootMcpApp(i18n.locales, () => remount()) : false;
+  if (embedded === null) return;
 
-  const [device, jwt] = await Promise.all([Device.load({ supportLanguages: i18n.locales }), getStoredAuthToken()]);
+  const [device, jwt] = await Promise.all([
+    Device.load({ supportLanguages: i18n.locales }),
+    embedded ? undefined : getStoredAuthToken(),
+  ]);
   const mobileTarget = window.__AKAN_MOBILE_TARGET__;
   
   if (mobileTarget && window.location.pathname === "/")
@@ -28,8 +40,8 @@ export const bootCsr = async (context: CsrRouteContext) => {
       "",
       `${mobileHomePath(device.lang, mobileTarget)}${window.location.search}${window.location.hash}`,
     );
-  const pathname = window.location.pathname;
-  if (!mobileTarget && !pathname.startsWith(`/${device.lang}`))
+  const pathname = csrLocation.pathname;
+  if (!mobileTarget && !embedded && !pathname.startsWith(`/${device.lang}`))
     window.location.replace(`/${device.lang}${pathname}${window.location.search}${window.location.hash}`);
 
   if (jwt) initAuth({ jwt });
@@ -62,10 +74,19 @@ export const bootCsr = async (context: CsrRouteContext) => {
     );
   };
 
+  st.set({ searchParams: searchParamsOf(csrLocation.search) });
   const el = document.getElementById("root");
   if (!el) throw new Error("No root element");
-  const root = ReactDOM.createRoot(el);
+  let root = ReactDOM.createRoot(el);
   root.render(<RouterProvider />);
+
+  remount = () => {
+    setTimeout(() => {
+      root.unmount();
+      root = ReactDOM.createRoot(el);
+      root.render(<RouterProvider />);
+    }, 0);
+  };
 };
 
 /**
@@ -74,6 +95,34 @@ export const bootCsr = async (context: CsrRouteContext) => {
  */
 export const replacePages = async (context: CsrRouteContext) => (await CsrRouteTable.active?.replace(context)) ?? false;
 
+function searchParamsOf(search: string): { [key: string]: string | string[] } {
+  const params: { [key: string]: string | string[] } = {};
+  for (const [key, value] of new URLSearchParams(search)) {
+    const current = params[key];
+    params[key] = current === undefined ? value : Array.isArray(current) ? [...current, value] : [current, value];
+  }
+  return params;
+}
+
+async function bootMcpApp(locales: readonly string[], reload: () => void) {
+  const bridge = new McpAppBridge();
+  const view = new McpAppView(bridge);
+  const start = await bridge.connect();
+  if (!start.ok) {
+    view.showUnavailable(start.message);
+    return null;
+  }
+  if (globalThis.__AKAN_EMBED__) globalThis.__AKAN_EMBED__.account = start.account;
+  csrLocation.useMemory(McpAppView.localize(start.href, bridge.hostContext.locale, locales), {
+    leave: () => view.showUnavailable("This screen is not available here."),
+    reload,
+  });
+  FetchClient.setBridge(bridge.fetchBridge(start.snapshot));
+  view.mount();
+  new McpAppAgent(bridge).start();
+  return true;
+}
+
 function initializeMobileTargetFromSearch() {
   if (window.__AKAN_MOBILE_TARGET__) return;
 

package/webkit/index.ts

@@ -19,3 +19,4 @@ export { usePageTool } from "./usePageTool";
 export type { ScreenScopeItem } from "./useScreenScope";
 export { useScreenScope } from "./useScreenScope";
 export { useThrottle } from "./useThrottle";
+export { useVisualViewportFrame, type VisualViewportFrame } from "./useVisualViewportFrame";