@unoverse-platform/studio 0.1.103 → 0.1.104

package/vendor/sdk/pageInterfaces.ts

@@ -0,0 +1,452 @@
+/**
+ * THE PAGE'S OWN TEMPLATES (docs/unoverse/design/sdk/UNOVERSE_HOST_PAGE.md rule 3), plain DOM.
+ *
+ * A website that is the app marks where its unoverse templates go:
+ *
+ *   <div data-unoverse-interface="unoverse/presence-avatar"></div>
+ *
+ * This runtime is already loaded (the embed started the app with no chrome). It reads each
+ * marked template by URI over MCP, exactly as it reads the app, and draws it INTO the page's
+ * element, in its own shadow root. One runtime, many shadow roots: one client, one
+ * conversation, one sign-in for every part of the page.
+ *
+ * A template ARRIVES WITH ITS PAGE, as Studio previews it and as a delivery lands it: one
+ * instance per linked part (`static:`), at its face, with the part's own values (the served
+ * `sections` and their `seeds`), then the template itself. Drawn bare, its parts' slots hold
+ * nothing and only the frame shows.
+ *
+ * The frame shares the page's origin (EMBED_CLIENT.md §1), so the page's document is reachable
+ * from here, and a part drawn into the page is as live as one drawn in the frame.
+ */
+import { ComponentStore } from "./lib/core/store";
+import type { UnoverseDefinition } from "./lib/core/types";
+import type { ActionHandler, ActionMeta } from "./lib/actions";
+import { mountComponent, type ComponentMount, type DefinitionSource } from "./lib/dom/component";
+import type { VoiceService } from "./lib/voiceService";
+
+const MARK = "data-unoverse-interface";
+const CHAT = "page";
+const TEMPLATE_NODE = "~template";
+
+/** The page this runtime serves, or null when there is none it may reach (an MCP host). */
+function pageDocument(): Document | null {
+  try {
+    return window.parent !== window ? window.parent.document : null;
+  } catch {
+    return null; // a cross-origin host: there is no page of ours to draw into
+  }
+}
+
+/**
+ * WHICH TEMPLATE THE ARROW KEYS BELONG TO: exactly one. The one the visitor last pressed in;
+ * before any press, the one taking the most of the screen. Every template's state is its own,
+ * so a key must never move two.
+ */
+let engaged: HTMLElement | null = null;
+function keyOwner(doc: Document): HTMLElement | null {
+  const full = doc.fullscreenElement as HTMLElement | null;
+  if (full?.hasAttribute(MARK)) return full; // a fullscreen template is the only one on screen
+  if (engaged && doc.contains(engaged)) return engaged;
+  const vh = doc.defaultView?.innerHeight ?? 0;
+  let best: HTMLElement | null = null;
+  let area = 0;
+  for (const el of doc.querySelectorAll<HTMLElement>(`[${MARK}]`)) {
+    const r = el.getBoundingClientRect();
+    const seen = Math.max(0, Math.min(r.bottom, vh) - Math.max(r.top, 0)) * r.width;
+    if (seen > area) (area = seen), (best = el);
+  }
+  return best;
+}
+
+/** A page template's address, from the name its element is marked with. */
+const uriOf = (name: string) => (name.includes("://") ? name : `unoverse://templates/${name}`);
+
+/** THE AVATARS: page templates whose steps are the call's phases (`listening`, `speaking`).
+ *  They are how the page is spoken to, so they are never the task in view; they follow the call. */
+const avatars = new Set<HTMLElement>();
+const CALL_PHASES = ["listening", "speaking"];
+
+/** The workflow a template names in its manifest (UNOVERSE_HOST_PAGE.md rule 4). */
+export type Binding = { workflow?: string; trigger?: string };
+
+/** THE TASK IN VIEW: the marked template, not an avatar, spanning the middle of the screen. */
+function taskInView(doc: Document): HTMLElement | null {
+  const mid = (doc.defaultView?.innerHeight ?? 0) / 2;
+  for (const el of doc.querySelectorAll<HTMLElement>(`[${MARK}]`)) {
+    if (avatars.has(el)) continue;
+    const r = el.getBoundingClientRect();
+    if (r.top <= mid && r.bottom >= mid) return el;
+  }
+  return null;
+}
+
+type Section = { kind?: string; face?: string; ref?: string; preview?: string[]; seeds?: Record<string, Record<string, unknown>> };
+type StateTree = { name: string; on?: string; initial?: string; states?: { name: string }[]; fullscreen?: boolean; arrows?: boolean }[];
+
+/**
+ * THE AVATAR'S SPOT WHILE A TEMPLATE IS FULLSCREEN. The browser shows only the fullscreen
+ * element, so the avatar's own element (in the site's navigation) is hidden. A fullscreen
+ * state's layout carries a `Place`; it draws this element, and the page's avatar draws there
+ * until the place goes. It is the same avatar, so it keeps following the call.
+ */
+class Dock {
+  readonly slot: HTMLDivElement;
+  at: HTMLElement | null = null;
+  private watchers = new Set<() => void>();
+  constructor(doc: Document) {
+    this.slot = doc.createElement("div");
+  }
+  /** Whether a place is drawing the slot now; checked after any template draws. */
+  check(): void {
+    queueMicrotask(() => {
+      const at = this.slot.isConnected ? this.slot : null;
+      if (at === this.at) return;
+      this.at = at;
+      this.watchers.forEach((f) => f());
+    });
+  }
+  watch(f: () => void): () => void {
+    this.watchers.add(f);
+    return () => void this.watchers.delete(f);
+  }
+}
+
+interface PageTemplateOptions {
+  client: DefinitionSource;
+  uri: string;
+  el: HTMLElement;
+  voice: VoiceService;
+  appStore: ComponentStore;
+  dock: Dock;
+  waiting: () => boolean;
+  onBinding: (uri: string, binding: Binding) => void;
+  onCall: ActionHandler;
+}
+
+/** One marked template: read it, give it its parts, draw it. */
+function mountPageTemplate(o: PageTemplateOptions): { refresh(): void; destroy(): void } {
+  const { client, uri, el, voice, appStore, dock } = o;
+  const store = new ComponentStore();
+  const stops: (() => void)[] = [];
+  let parts: string[] = [];
+  let def: { stateTree?: StateTree } | null = null;
+  let comp: ComponentMount | null = null;
+  let alive = true;
+
+  // Where the template draws: its element, or the dock while a fullscreen template holds one
+  // and this template is an avatar.
+  const place = () => {
+    if (!comp) return;
+    const into = dock.at && avatars.has(el) ? dock.at : el;
+    for (const n of comp.nodes) if (n.parentNode !== into) into.appendChild(n);
+  };
+
+  const ready = () => {
+    comp = mountComponent({ client, store, chatId: CHAT, nodeId: TEMPLATE_NODE, onAction: o.onCall, place: () => [dock.slot], appStore, doc: el.ownerDocument, arrowKeys: false });
+    place();
+    stops.push(dock.watch(place), store.subscribe(() => dock.check()));
+    dock.check();
+
+    // A TEMPLATE FOLLOWS ITS TASK. Whatever runs the task publishes where it is as
+    // `tasks.<its URI>` in the app state (SIGNAL.md 6c): this template moves to that step, and its
+    // `props`, keyed by part, merge into those parts. THE SAME TEMPLATE, STREAMED, hydrates this
+    // copy part by part; a copy still on its first step moves to the next as its values land.
+    let lastProps = "";
+    let lastStreamed = "";
+    const lastPart = new Map<string, string>();
+    const fillParts = (byPart: Record<string, unknown>) => {
+      for (const [part, values] of Object.entries(byPart)) {
+        if (!values || typeof values !== "object" || Array.isArray(values)) continue;
+        for (const nodeId of parts.filter((id) => id.startsWith(`${part}~`))) store.mergeComponentState(CHAT, nodeId, values as Record<string, unknown>);
+      }
+    };
+    const moveTo = (at: unknown) => {
+      if (typeof at !== "string") return;
+      const tree = def?.stateTree?.find((t) => t.on && t.states?.some((x) => x.name === at));
+      if (!tree?.on) return;
+      const tpl = store.get(CHAT, TEMPLATE_NODE) as Record<string, unknown> | undefined;
+      if (tpl?.[tree.on] !== at) store.mergeComponentState(CHAT, TEMPLATE_NODE, { [tree.on]: at });
+    };
+    const follow = () => {
+      const task = ((appStore.getAppState().tasks ?? {}) as Record<string, { step?: string; props?: Record<string, unknown> }>)[uri];
+      if (task?.props && typeof task.props === "object") {
+        const next = JSON.stringify(task.props);
+        if (next !== lastProps) {
+          lastProps = next;
+          fillParts(task.props);
+        }
+      }
+      moveTo(task?.step);
+      for (const r of appStore.getResponses()) {
+        for (const pointer of r.components) {
+          const { chatId, nodeId } = appStore.split(pointer);
+          // A PART FOLLOWS THE COMPONENT OF ITS NAME, STREAMED (an Agent's agent-card); it keeps its own face.
+          const kind = (appStore.typeOf(pointer) ?? "").split("/").pop() ?? "";
+          if (kind && parts.some((id) => id.startsWith(`${kind}~`))) {
+            const { state: _face, ...values } = (appStore.get(chatId, nodeId) ?? {}) as Record<string, unknown>;
+            const next = JSON.stringify(values);
+            if (lastPart.get(kind) !== next) {
+              lastPart.set(kind, next);
+              fillParts({ [kind]: values });
+            }
+            continue;
+          }
+          if ((appStore.getComponentUrl(chatId, nodeId) ?? "").split("#")[0] !== uri) continue;
+          const streamed = appStore.get(chatId, nodeId) ?? {};
+          const next = JSON.stringify(streamed);
+          if (next === lastStreamed) continue;
+          lastStreamed = next;
+          // A copy with no part filled yet changes nothing, so the template stays on its first step.
+          if (!parts.some((id) => { const v = (streamed as Record<string, unknown>)[id.split("~")[0]]; return !!v && typeof v === "object" && !Array.isArray(v); })) continue;
+          fillParts(streamed as Record<string, unknown>);
+          const tree = def?.stateTree?.find((t) => t.on && (t.states?.length ?? 0) > 1);
+          const tpl = store.get(CHAT, TEMPLATE_NODE) as Record<string, unknown> | undefined;
+          if (tree?.on && (tpl?.[tree.on] ?? tree.initial) === tree.initial) moveTo(tree.states![1].name);
+        }
+      }
+    };
+    follow();
+    stops.push(appStore.subscribe(follow));
+
+    const doc = pageDocument();
+    if (doc) {
+      // THE ARROW KEYS STEP IT, on the PAGE (the keys are the page's), when its state says
+      // `arrows: true`. Typing never steps, and only the template that owns the keys moves.
+      const onKey = (e: KeyboardEvent) => {
+        if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
+        if (keyOwner(doc) !== el) return;
+        const t = e.target as HTMLElement | null;
+        if (t && (t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName))) return;
+        const tpl = store.get(CHAT, TEMPLATE_NODE) as Record<string, unknown> | undefined;
+        const face = String(tpl?.state ?? "");
+        const tree = def?.stateTree?.find((s) => s.name === face);
+        const steps = tree?.states?.map((s) => s.name) ?? [];
+        if (!tree?.on || !tree.arrows || steps.length < 2) return;
+        const cur = String(tpl?.[tree.on] ?? tree.initial ?? steps[0]);
+        const i = steps.indexOf(cur) + (e.key === "ArrowRight" ? 1 : -1);
+        if (i < 0 || i >= steps.length) return;
+        e.preventDefault();
+        store.mergeComponentState(CHAT, TEMPLATE_NODE, { [tree.on]: steps[i] });
+      };
+      doc.addEventListener("keydown", onKey);
+      stops.push(() => doc.removeEventListener("keydown", onKey));
+
+      // FULLSCREEN IS A STATE. Entering a state marked `fullscreen` takes this element
+      // fullscreen, inside the store write the visitor's click made (a browser grants fullscreen
+      // only to a click); leaving it hands the screen back. Refused, or left with Esc, the
+      // template goes back to the state it came from.
+      const states = () => def?.stateTree ?? [];
+      const isFull = (name: string) => states().some((t) => t.name === name && t.fullscreen);
+      const face = () => String((store.get(CHAT, TEMPLATE_NODE) as Record<string, unknown> | undefined)?.state ?? "");
+      let from = isFull(face()) ? (states().find((t) => !t.fullscreen)?.name ?? "") : face();
+      let asking = false;
+      const back = () => store.mergeComponentState(CHAT, TEMPLATE_NODE, { state: from });
+      const sync = () => {
+        const now = face();
+        if (!isFull(now)) {
+          from = now;
+          if (doc.fullscreenElement === el) void doc.exitFullscreen();
+          return;
+        }
+        if (doc.fullscreenElement === el || asking) return;
+        asking = true;
+        el.requestFullscreen()
+          .catch(back)
+          .finally(() => (asking = false));
+      };
+      const onChange = () => {
+        if (doc.fullscreenElement !== el && !asking && isFull(face())) back();
+      };
+      stops.push(store.subscribe(sync));
+      doc.addEventListener("fullscreenchange", onChange);
+      stops.push(() => doc.removeEventListener("fullscreenchange", onChange));
+    }
+
+    // AN AVATAR FOLLOWS THE CALL: its steps are the call's phases, so its step is the call's
+    // state; `waiting` rides beside it (a task in view the call is not working yet).
+    if (avatars.has(el)) {
+      const tree = def?.stateTree?.find((t) => CALL_PHASES.every((p) => t.states?.some((x) => x.name === p)));
+      if (tree?.on) {
+        const on = tree.on;
+        let last = "";
+        const call = () => {
+          const next = JSON.stringify([voice.state.callState, o.waiting()]);
+          if (next === last) return;
+          last = next;
+          store.mergeComponentState(CHAT, TEMPLATE_NODE, { [on]: voice.state.callState, waiting: o.waiting() });
+        };
+        call();
+        stops.push(voice.subscribe(call));
+        refreshCall = call;
+      }
+    }
+  };
+  let refreshCall = () => {};
+
+  client
+    .readDefinition(uri)
+    .then((raw) => {
+      if (!alive || !raw) return;
+      const d = raw as UnoverseDefinition & { defaultLayout?: string; layouts?: Record<string, unknown>; sections?: Record<string, Section[]>; binding?: Binding; stateTree?: StateTree };
+      if (d.binding?.workflow) o.onBinding(uri, d.binding);
+      def = d;
+      const base = d.defaultLayout ?? (d.layouts ? Object.keys(d.layouts)[0] : undefined);
+      parts = [];
+      for (const sec of (base && d.sections?.[base]) || []) {
+        const refs = sec.ref ? [sec.ref] : sec.kind === "director" ? (sec.preview ?? []) : [];
+        refs.forEach((ref, i) => {
+          const nodeId = `${sec.face}~${ref}~${i}`;
+          parts.push(nodeId);
+          store.apply({ type: "COMPONENT_INIT", chatId: CHAT, nodeId, component: { type: ref, props: sec.seeds?.[ref] ?? {} } });
+          if (sec.face) store.mergeComponentState(CHAT, nodeId, { state: sec.face });
+        });
+      }
+      const ref = uri.replace(/^unoverse:\/\/templates\//, "");
+      store.apply({ type: "COMPONENT_INIT", chatId: CHAT, nodeId: TEMPLATE_NODE, component: { type: ref, componentUrl: uri, props: {} } });
+      if (base) store.mergeComponentState(CHAT, TEMPLATE_NODE, { state: base });
+      if ((d.stateTree ?? []).some((t) => CALL_PHASES.every((p) => t.states?.some((x) => x.name === p)))) avatars.add(el);
+      ready();
+    })
+    .catch((e) => console.warn(`[unoverse] page template "${uri}" failed to load:`, e));
+
+  return {
+    /** Something this template shows from outside it changed (whether a task waits). */
+    refresh: () => refreshCall(),
+    destroy() {
+      alive = false;
+      stops.forEach((s) => s());
+      comp?.destroy();
+      comp?.nodes.forEach((n) => n.parentNode?.removeChild(n));
+    },
+  };
+}
+
+export interface PageInterfacesOptions {
+  org: string;
+  client: DefinitionSource;
+  voice: VoiceService;
+  appStore: ComponentStore;
+  toServer: (t: string, data: Record<string, unknown>, meta?: ActionMeta) => void;
+  startTask: (binding: Binding, task: string, submit?: Record<string, unknown>) => void;
+}
+
+/**
+ * ONE APP STATE FOR THE WHOLE PAGE. Each template keeps its own slice in its own store, and all
+ * of them read and write the app's state in `appStore`, the store the call and the workflow
+ * write to. A name one template saves is a name every other template can show.
+ */
+export function mountPageInterfaces(o: PageInterfacesOptions): { destroy(): void } {
+  const doc = pageDocument();
+  if (!doc) return { destroy() {} };
+  const win = doc.defaultView;
+  const dock = new Dock(doc);
+  const mounted = new Map<HTMLElement, ReturnType<typeof mountPageTemplate>>();
+  // Each template's own workflow, as it loads; a template without one is never called.
+  const bindings: Record<string, Binding> = {};
+  // The tasks this page has started. Each starts once: a second press starts nothing.
+  const started = new Set<string>();
+  // The task in view, by its URI, measured again as the page scrolls or resizes.
+  let inView: string | null = null;
+
+  // THE AVATAR STARTS THE TASK'S WORKFLOW (UNOVERSE_HOST_PAGE.md rule 4), like any button. A task
+  // in view with a workflow, not already running, is WAITING: a press starts it at the
+  // template's trigger. Nothing in view, or nothing bound: nothing.
+  const target = () => (inView && bindings[inView]?.workflow ? inView : null);
+  const waiting = () => {
+    const t = target();
+    return !!t && !started.has(t);
+  };
+  const refreshAll = () => mounted.forEach((m) => m.refresh());
+
+  // A TEMPLATE'S OWN ACTIONS go where the app's go: its `submit` answers whoever opened the task;
+  // a template with its own workflow also has that workflow called with the answers (the
+  // task's last call, design/tasks.md "The submit"). The call's three are the page's.
+  const onCallFor = (uri: string): ActionHandler => (spec, data, meta) => {
+    const action = typeof spec === "string" ? spec : spec?.type;
+    if (action === "submit" || action === "cancel") {
+      o.toServer(action, data, meta);
+      const state = (meta?.state ?? data) as Record<string, unknown> | undefined;
+      if (action === "submit" && bindings[uri]?.workflow && state && typeof state === "object") o.startTask(bindings[uri], uri, state);
+    } else if (action === "startCall") {
+      const t = target();
+      if (!t || started.has(t)) return;
+      started.add(t);
+      refreshAll();
+      // The press is the click the browser needs before it plays a voice the workflow may have.
+      o.voice.unlock();
+      o.startTask(bindings[t], t);
+    } else if (action === "endCall") void o.voice.endCall();
+    else if (action === "toggleMute") o.voice.toggleMute();
+    // Another app on the page, opened or closed by its `<org>/<app>` (its own tag, EMBED_CLIENT.md).
+    else if (action === "toggleApp") {
+      const app = (data as { app?: unknown } | undefined)?.app;
+      if (typeof app === "string") (win as (Window & { unoverseApps?: Record<string, { toggle(): void }> }) | null)?.unoverseApps?.[app]?.toggle();
+    }
+  };
+
+  const measure = () => {
+    const name = taskInView(doc)?.getAttribute(MARK);
+    const next = name ? uriOf(name) : null;
+    if (next === inView) return;
+    inView = next;
+    refreshAll();
+  };
+  const scan = () => {
+    // Only this app's own org's templates: another app on the page draws its own.
+    const found = [...doc.querySelectorAll<HTMLElement>(`[${MARK}]`)].filter((el) => el.getAttribute(MARK)?.startsWith(`${o.org}/`));
+    for (const [el, m] of mounted)
+      if (!found.includes(el)) {
+        m.destroy();
+        mounted.delete(el);
+      }
+    for (const el of found) {
+      if (mounted.has(el)) continue;
+      const name = el.getAttribute(MARK) ?? "";
+      if (!name) continue;
+      const uri = uriOf(name);
+      mounted.set(
+        el,
+        mountPageTemplate({
+          client: o.client,
+          uri,
+          el,
+          voice: o.voice,
+          appStore: o.appStore,
+          dock,
+          waiting,
+          onBinding: (u, b) => {
+            if (bindings[u]) return;
+            bindings[u] = b;
+            refreshAll();
+          },
+          onCall: onCallFor(uri),
+        }),
+      );
+    }
+    measure();
+  };
+  scan();
+  // The page may render its parts after this runtime starts (a client-rendered page), so it
+  // keeps looking; only a change in the marked set mounts or drops a template.
+  const watch = new MutationObserver(scan);
+  watch.observe(doc.body, { childList: true, subtree: true });
+  // A press inside a marked template makes it the one the keys move; outside every template
+  // the keys go back to the one most in view.
+  const onPress = (e: Event) => {
+    engaged = (e.composedPath().find((n) => n instanceof HTMLElement && n.hasAttribute(MARK)) as HTMLElement | undefined) ?? null;
+  };
+  doc.addEventListener("pointerdown", onPress, true);
+  win?.addEventListener("scroll", measure, { passive: true });
+  win?.addEventListener("resize", measure);
+
+  return {
+    destroy() {
+      watch.disconnect();
+      doc.removeEventListener("pointerdown", onPress, true);
+      win?.removeEventListener("scroll", measure);
+      win?.removeEventListener("resize", measure);
+      mounted.forEach((m) => m.destroy());
+      mounted.clear();
+    },
+  };
+}

package/vendor/sdk/responseView.ts

@@ -0,0 +1,193 @@
+/**
+ * THE RESPONSE VIEW, in plain DOM: what an UNNAMED result draws (THE NAMING RULE,
+ * docs/mcp/UNOVERSE_MCP_APP_PROTOCOL § THE NAMING RULE).
+ *
+ * An MCP Action's result carries `interface: { kind: "components", components }`, the
+ * component events the run produced. This view draws EXACTLY those: seed a fresh store with
+ * the events, resolve the theme, draw each instance with the standard component. No app
+ * mount, no home state, no auto-trigger: an app mounts only when something NAMES it.
+ *
+ * Definitions and theme resolve over the result's serverUrl (`/mcp` reads): the response is
+ * data; the vocabulary lives on the universe.
+ */
+import { UnoverseClient } from "./lib/core/client";
+import { ComponentStore } from "./lib/core/store";
+import { applyServerMessage } from "./lib/core/connection";
+import { mountComponent, type ComponentMount } from "./lib/dom/component";
+import { openConnection, type UnoverseConnection } from "./lib/dom/connection";
+import { setChildren } from "./lib/dom/element";
+import { fetchTheme } from "./lib/dom/theme";
+import type { ResolvedTheme } from "./lib/core/types";
+import { handAnswerToHost, hostMode, onDisplayMode, showAs } from "./mcpAppBridge";
+
+export interface ResponseViewOptions {
+  serverUrl: string;
+  /** The run's component events (COMPONENT_INIT / COMPONENT_DATA), as collected server-side
+   *  and carried in the result's `interface.components`. */
+  events: Record<string, unknown>[];
+  /** THE LIVE PAGE: with the caller's identity and a page handle, the view listens on
+   *  /stream under that page's conversation, so a later `-update` call (which opens no
+   *  window) hydrates THESE instances in place. docs/mcp/MCP_2026-07-28.md §3a. */
+  live?: { userId: string; conversationId: string; token?: string };
+  /** The client reading definitions; one per server by default. */
+  client?: UnoverseClient;
+}
+
+export interface ResponseView {
+  destroy(): void;
+}
+
+/** Draw a result's components into `el`. */
+export function mountResponseView(el: HTMLElement, o: ResponseViewOptions): ResponseView {
+  const doc = el.ownerDocument;
+  const client = o.client ?? new UnoverseClient(`${o.serverUrl}/mcp`, {});
+
+  // Seed with the same pure mapper the live stream uses, so a seeded component is
+  // indistinguishable from a streamed one (merge-not-replace and all).
+  const store = new ComponentStore();
+  const seen = new Set<string>();
+  for (const e of o.events) {
+    try {
+      applyServerMessage(store, e as never, seen);
+    } catch {
+      /* one malformed event must not blank the whole response */
+    }
+  }
+
+  // One card per INSTANCE, in arrival order. A PART LIVES IN ITS PAGE: the page's slot draws
+  // it from the store, so it never gets a card of its own here.
+  const instances: { chatId: string; nodeId: string }[] = [];
+  const keys = new Set<string>();
+  for (const e of o.events) {
+    const ev = e as { type?: string; chatId?: string; nodeId?: string; part?: boolean };
+    if (ev.type !== "COMPONENT_INIT" || !ev.chatId || !ev.nodeId || ev.part) continue;
+    const key = `${ev.chatId}:${ev.nodeId}`;
+    if (keys.has(key)) continue;
+    keys.add(key);
+    instances.push({ chatId: ev.chatId, nodeId: ev.nodeId });
+  }
+
+  // Hydrate in place: pushes for this page's conversation merge into the seeded store.
+  const token = o.live?.token;
+  const conn: UnoverseConnection | null =
+    o.live?.userId && o.live?.conversationId
+      ? openConnection(
+          { apiUrl: o.serverUrl, streamUrl: o.serverUrl, getAccessToken: token ? async () => token : undefined },
+          { workflowId: "", targetTriggerNode: "", userId: o.live.userId, conversationId: o.live.conversationId, chatId: o.live.conversationId },
+          store,
+        )
+      : null;
+
+  // THE HOST'S DISPLAY MODE IS THE TASK'S STATE (MCP Apps, Display Modes: the host decides
+  // the mode and tells the window each change, `host-context-changed` `displayMode`).
+  //   1. When the window connects, the task tells the host where it wants to be.
+  //   2. After that the host's mode is the truth: in the chat the task shows its `inline`
+  //      face; in the panel it shows open, in the face it last had open.
+  //   3. Our own changes (a chip tapped, a ✕, a push from the server) ask the host for the
+  //      mode their state needs, and the host's answer settles it.
+  // Outside an MCP Apps host there is no mode, and none of this runs.
+  const stateOf = (i: { chatId: string; nodeId: string }) => {
+    const s = store.get(i.chatId, i.nodeId) as Record<string, unknown> | undefined;
+    const view = s?.state ?? s?.initialView;
+    return typeof view === "string" ? view : undefined;
+  };
+  // The face each task last had open, to show again when the host opens it.
+  const openFace = new Map<string, string>();
+  const faceToOpen = (i: { chatId: string; nodeId: string }) => {
+    const last = openFace.get(`${i.chatId}:${i.nodeId}`);
+    if (last) return last;
+    const menu = (store.get(i.chatId, i.nodeId) as { publicStates?: unknown } | undefined)?.publicStates;
+    return Array.isArray(menu) ? (menu.find((v) => typeof v === "string" && v !== "inline") as string | undefined) : undefined;
+  };
+  const setState = (i: { chatId: string; nodeId: string }, state: string) =>
+    store.apply({ type: "COMPONENT_DATA", chatId: i.chatId, nodeId: i.nodeId, data: { state } } as never);
+  /** The host's mode, applied to the task: in the chat its `inline` face, in the panel open. */
+  const follow = (mode: string) => {
+    for (const i of instances) {
+      const v = stateOf(i);
+      if (mode !== "fullscreen" && v !== undefined && v !== "inline") setState(i, "inline");
+      if (mode === "fullscreen" && v === "inline") {
+        const face = faceToOpen(i);
+        if (face) setState(i, face);
+      }
+    }
+  };
+  /** Ask the host for the mode the task's state needs; however the ask ends (granted,
+   *  refused, failed, nothing to ask), the task then takes the mode the host is showing. */
+  const ask = () => {
+    const view = instances.map(stateOf).find((v) => v !== undefined);
+    if (view === undefined || hostMode() === null) return;
+    void showAs(view).finally(() => {
+      const mode = hostMode();
+      if (mode !== null) follow(mode);
+    });
+  };
+  let told = false;
+  const stopFollow = store.subscribe(() => {
+    for (const i of instances) {
+      const v = stateOf(i);
+      if (v && v !== "inline") openFace.set(`${i.chatId}:${i.nodeId}`, v);
+    }
+    if (told) ask();
+  });
+  const stopMode = onDisplayMode((mode) => {
+    if (hostMode() === null) return;
+    if (!told) {
+      told = true;
+      return ask();
+    }
+    follow(mode);
+  });
+
+  // Fills the panel, fits its content in the chat (the bridge sizes the page by display
+  // mode). No padding: the component's own edge is the window's edge.
+  const box = doc.createElement("div");
+  Object.assign(box.style, { display: "flex", flexDirection: "column", gap: "12px", boxSizing: "border-box", height: "100%" });
+  const cards: ComponentMount[] = [];
+  const wrappers: HTMLDivElement[] = [];
+  let alive = true;
+
+  const draw = (theme: ResolvedTheme | undefined) => {
+    if (!alive) return;
+    instances.forEach((i, n) => {
+      const opts = {
+        client,
+        store,
+        chatId: i.chatId,
+        nodeId: i.nodeId,
+        theme,
+        doc,
+        // Steps run locally (`setValue` into this instance's slice). A SUBMIT inside an
+        // outside host goes back to the host's model: no server call waits for it there.
+        onAction: (action: unknown, data: Record<string, unknown>, meta?: { state?: Record<string, unknown> }) => {
+          const t = typeof action === "string" ? action : (action as { type?: string })?.type;
+          if (t === "submit") handAnswerToHost((meta?.state ?? data) as Record<string, unknown>);
+        },
+      };
+      if (cards[n]) return cards[n].update(opts as never);
+      const w = doc.createElement("div");
+      Object.assign(w.style, { flex: "1", minHeight: "0", display: "flex", flexDirection: "column" });
+      cards[n] = mountComponent(opts as never);
+      wrappers[n] = w;
+      setChildren(w, cards[n].nodes);
+    });
+    setChildren(box, wrappers);
+  };
+
+  if (instances.length) {
+    el.appendChild(box);
+    draw(undefined);
+    fetchTheme(client, "light").then(draw, () => {});
+  }
+
+  return {
+    destroy() {
+      alive = false;
+      stopFollow();
+      stopMode();
+      conn?.close();
+      cards.forEach((c) => c.destroy());
+      box.remove();
+    },
+  };
+}

package/vite.config.ts

@@ -66,8 +66,8 @@ export default defineConfig({
     external: ["@unoverse-platform/plugin-base", "@unoverse-platform/marketplace"],
   },
   optimizeDeps: {
-    // The SDK pulls in the MCP SDK, whose ajv-provider does `import Ajv from "ajv"`.
-    // ajv is CJS with no default ESM export, so pre-bundle for the interop shim.
-    include: ["ajv", "@modelcontextprotocol/sdk/client/index.js", "@modelcontextprotocol/sdk/client/streamableHttp.js"],
+    // MCP SDK v2's client (Studio's host and the vendored webSDK) picks its bundled
+    // CfWorker validator in a browser, so it no longer pulls ajv in.
+    include: ["@modelcontextprotocol/client"],
   },
 });