@unoverse-platform/studio 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unoverse-platform/studio",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "description": "Unoverse Studio: the local authoring app. Reads your own rx/ folder, no backend.",
   "scripts": {
@@ -20,7 +20,8 @@
     "react-dom": "^18.2.0",
     "react-oidc-context": "^3.1.0",
     "tailwindcss": "^4.0.0",
-    "vite": "^6.0.0"
+    "vite": "^6.0.0",
+    "@modelcontextprotocol/sdk": "^1.25.1"
   },
   "license": "MIT",
   "bin": {

package/screens/NativeAppHost.tsx

@@ -0,0 +1,106 @@
+/**
+ * THE NATIVE HOST (2026-07-28) — the whole point of MCP apps, applied to Studio itself.
+ *
+ * Live preview does NOT render with a compiled-in SDK. Studio is a bare MCP client:
+ * it reads `ui://unoverse/app.html` from the connected universe (the SAME single-file
+ * renderer ChatGPT and Claude load), puts it in an iframe, and posts it the standard
+ * `unoverse:config` message (web/sdk/src/main.tsx boot contract). From that moment the
+ * app drives its own MCP + /stream + voice connections against the universe — Studio
+ * hosts it exactly like any third-party surface would. The renderer loads when it is
+ * required, from the thing that owns it. Nothing is vendored, nothing is bundled.
+ */
+import { useEffect, useRef, useState } from "react";
+import { Client } from "@modelcontextprotocol/sdk/client/index.js";
+import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
+
+const APP_UI_URI = "ui://unoverse/app.html";
+
+export function NativeAppHost({
+  server,
+  token,
+  templateId,
+  userId,
+  conversationId,
+}: {
+  /** Universe origin, e.g. http://localhost:4105 — the /mcp and /stream host. */
+  server: string;
+  token?: string;
+  templateId?: string;
+  userId: string;
+  conversationId: string;
+}) {
+  const [html, setHtml] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const frame = useRef<HTMLIFrameElement>(null);
+
+  // Pull the app shell from the universe — one resources/read, then the client closes.
+  useEffect(() => {
+    let cancelled = false;
+    setHtml(null);
+    setError(null);
+    (async () => {
+      const authFetch = token
+        ? async (url: string | URL, init?: RequestInit): Promise<Response> => {
+            const headers = new Headers(init?.headers);
+            headers.set("Authorization", `Bearer ${token}`);
+            return fetch(url, { ...init, headers });
+          }
+        : undefined;
+      const client = new Client({ name: "unoverse-studio-host", version: "1.0.0" });
+      try {
+        const transport = new StreamableHTTPClientTransport(
+          new URL(`${server.replace(/\/$/, "")}/mcp`),
+          authFetch ? { fetch: authFetch } : undefined,
+        );
+        await client.connect(transport);
+        const res = await client.readResource({ uri: APP_UI_URI });
+        const text = (res.contents?.[0] as { text?: string } | undefined)?.text;
+        if (!text) throw new Error(`${APP_UI_URI} returned no content — is the webSDK built on the universe?`);
+        if (!cancelled) setHtml(text);
+      } catch (e) {
+        if (!cancelled) setError(e instanceof Error ? e.message : String(e));
+      } finally {
+        client.close().catch(() => {});
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [server, token]);
+
+  // The boot contract: post `unoverse:config` on iframe load, and re-post whenever the
+  // config changes (also the token-refresh channel — main.tsx applies updates in place).
+  const postConfig = () => {
+    frame.current?.contentWindow?.postMessage(
+      {
+        type: "unoverse:config",
+        config: { serverUrl: server, apiUrl: server, templateId, userId, conversationId, token },
+      },
+      "*",
+    );
+  };
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(postConfig, [token, templateId, userId, conversationId, server, html]);
+
+  if (error)
+    return (
+      <div className="flex h-full items-center justify-center p-8 text-center text-sm text-red-500">
+        <div>
+          <div className="font-semibold">The universe did not serve the app</div>
+          <div className="mt-1 opacity-80">{error}</div>
+        </div>
+      </div>
+    );
+  if (!html)
+    return <div className="flex h-full items-center justify-center text-sm opacity-60">Loading the app from the universe…</div>;
+  return (
+    <iframe
+      ref={frame}
+      srcDoc={html}
+      onLoad={postConfig}
+      title="unoverse app"
+      style={{ width: "100%", height: "100%", border: 0, display: "block" }}
+      allow="microphone; autoplay"
+    />
+  );
+}

package/screens/TemplatesView.tsx

@@ -12,6 +12,7 @@ import { useAuth } from "react-oidc-context";
 import { usePersistentState, useRegistryToggles, ToggleSwitch } from "studio-host";
 import { ComponentStore } from "@unoverse/sdk";
 import { StreamedUnoverseTemplate, useUnoverseConnection, computeAppWidth, resolveActiveLayout, type ResolvedTheme, type UseVoiceServiceConfig } from "@unoverse/sdk";
+import { NativeAppHost } from "./NativeAppHost";
 import { client, authedFetch, hasAuth, UNOVERSE_BASE } from "studio-host";
 
 // Per-APP test conversation: each app chats in its own conversation id, so testing
@@ -278,10 +279,12 @@ export function TemplatesView({ theme: defaultTheme, themeName, org = "all" }: {
     [binding?.workflow, binding?.trigger, tokenSub],
   );
 
-  // The data-plane connection. Open it only when: Live mode, authenticated (or no OIDC),
-  // AND the selected app actually has a workflow binding (a plain template with no app
-  // has nothing to call).
-  const canConnect = live && Boolean(binding?.workflow) && (!hasAuth || Boolean(auth?.isAuthenticated));
+  // NATIVE (2026-07-28): Live mode is the NATIVE HOST — an iframe running the
+  // universe-served ui:// app (NativeAppHost), which opens its OWN connections. The
+  // in-page data-plane connection below is therefore never opened; it remains only
+  // because Mock rendering shares this machinery (store, states, width).
+  const liveIsNative = live && Boolean(binding?.workflow) && (!hasAuth || Boolean(auth?.isAuthenticated));
+  const canConnect = false;
   const rawConn = useUnoverseConnection(config, session, store, { enabled: canConnect });
   // HARD INVARIANT (workbench doc Mode A — "Mock does not connect with server"): a Mock
   // session must NEVER reach the backend. The SDK only gates the inbound SSE stream on
@@ -874,6 +877,17 @@ export function TemplatesView({ theme: defaultTheme, themeName, org = "all" }: {
                   ...((selectedDef?.fluidHeight ?? true) ? { height: "100%" } : {}),
                 }}
               >
+              {liveIsNative ? (
+                /* NATIVE: the universe serves the app; Studio just hosts it. Same
+                   ui:// shell ChatGPT loads, same boot contract, its own connections. */
+                <NativeAppHost
+                  server={UNOVERSE_BASE || `http://${connCfg.server}`}
+                  token={token}
+                  templateId={`${selectedDef?.org ? `${selectedDef.org}/` : ""}${selected ?? ""}`}
+                  userId={session.userId}
+                  conversationId={session.conversationId}
+                />
+              ) : (
               <StreamedUnoverseTemplate
                 client={client}
                 store={store}
@@ -968,6 +982,7 @@ export function TemplatesView({ theme: defaultTheme, themeName, org = "all" }: {
                   setVersion((v) => v + 1);
                 }}
               />
+              )}
               </div>
             </div>
           )}

package/vite.config.ts

@@ -39,14 +39,14 @@ export default defineConfig({
       "@unoverse/studio": resolve(__dirname, "screens/index.ts"),
       // The host seam. Canvas aliases this to a universe; here it is the local disk.
       "studio-host": resolve(__dirname, "src/host.ts"),
-      // The renderer, vendored source (same convention as Canvas and the old studio).
-      // THE VENDORED COPY WHEN THERE IS ONE. The monorepo path below exists only here;
-      // an installed Studio has `vendor/sdk`, written by prepack (scripts/vendor-sdk.mjs).
-      // Preferring the vendor directory is what makes the published package work at all,
-      // and falling back keeps the monorepo editing the real source with HMR.
-      "@unoverse/sdk": existsSync(resolve(__dirname, "vendor/sdk/lib/index.ts"))
-        ? resolve(__dirname, "vendor/sdk/lib/index.ts")
-        : resolve(__dirname, "../unoverse/web/sdk/src/lib/index.ts"),
+      // The renderer. THE REAL SOURCE WHEN IT EXISTS (the monorepo), the vendored copy
+      // otherwise (an installed package, where prepack wrote vendor/sdk and the monorepo
+      // path resolves to nothing). The old order preferred vendor — so the moment a
+      // publish ran vendor-sdk.mjs, the monorepo's own Studio silently switched onto a
+      // FROZEN SDK copy and live SDK edits stopped appearing (2026-07-28).
+      "@unoverse/sdk": existsSync(resolve(__dirname, "../unoverse/web/sdk/src/lib/index.ts"))
+        ? resolve(__dirname, "../unoverse/web/sdk/src/lib/index.ts")
+        : resolve(__dirname, "vendor/sdk/lib/index.ts"),
     },
   },
   ssr: {