@unoverse-platform/studio 0.1.36 → 0.1.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unoverse-platform/studio",
-  "version": "0.1.36",
+  "version": "0.1.38",
   "type": "module",
   "description": "Unoverse Studio: the local authoring app. Reads your own rx/ folder, no backend.",
   "scripts": {

package/screens/ComponentsView.tsx

@@ -315,7 +315,9 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
     if (!current) return;
     // Width from the def; height stays AUTO — the canvas node hugs the rendered
     // component's height (components flex width, own height).
-    const size = (current as any).nodeSize ?? { width: 400 };
+    // 768 = tablet, this view's own default stage width: a component copied to the
+    // canvas lands at the width it was just designed at, not narrower.
+    const size = (current as any).nodeSize ?? { width: 768 };
     const node = {
       id: `${current.name.toLowerCase()}1`,
       type: "Component",
@@ -323,7 +325,11 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
       data: {
         label: current.name,
         status: "ready",
-        config: { component: current.name, ...defaultsOf(current) },
+        // IDENTITY ONLY — config is what the AUTHOR wires, never a copy of the sample
+        // data. UIComponentNode layers props [schema defaults] < [executed] < [config], so
+        // anything written here outranks the live definition permanently: spreading the
+        // previews in froze them into the workflow at copy time.
+        config: { component: current.name },
       },
       style: { width: size.width },
       draggable: true,

package/screens/NativeAppHost.tsx

@@ -30,8 +30,10 @@ export function NativeAppHost({
   userId: string;
   conversationId: string;
   /** The iframe app owns the ONLY live connection — it posts `unoverse:status`
-   *  (appEngine) and this relays it, so the host's badge can tell the truth. */
-  onStatus?: (s: { ready: boolean; connected: boolean }) => void;
+   *  (appEngine) and this relays it, so the host's badge can tell the truth.
+   *  `refused` carries the server's terminal refusal text (register_session refused
+   *  the session — public-entry gate, requires.role, stale token); undefined otherwise. */
+  onStatus?: (s: { ready: boolean; connected: boolean; refused?: string }) => void;
 }) {
   const [html, setHtml] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
@@ -44,7 +46,8 @@ export function NativeAppHost({
     const onSize = (e: MessageEvent) => {
       if (e.source !== frame.current?.contentWindow) return;
       if (e.data?.type === "unoverse:size" && e.data.width) setAppWidth(String(e.data.width));
-      if (e.data?.type === "unoverse:status") onStatus?.({ ready: !!e.data.ready, connected: !!e.data.connected });
+      if (e.data?.type === "unoverse:status")
+        onStatus?.({ ready: !!e.data.ready, connected: !!e.data.connected, refused: typeof e.data.refused === "string" ? e.data.refused : undefined });
     };
     window.addEventListener("message", onSize);
     return () => window.removeEventListener("message", onSize);

package/screens/TemplatesView.tsx

@@ -208,7 +208,7 @@ export function TemplatesView({
   // connection and posts `unoverse:status` up; the in-page `conn` below is never
   // opened in native mode, so a badge reading it said "Offline" while the app
   // streamed (observed live). Native status wins whenever the iframe has reported.
-  const [nativeStatus, setNativeStatus] = useState<{ ready: boolean; connected: boolean } | null>(null);
+  const [nativeStatus, setNativeStatus] = useState<{ ready: boolean; connected: boolean; refused?: string } | null>(null);
   useEffect(() => setNativeStatus(null), [selected, live]);
   // LIVE output inspector — the last submitted app output, projected through the
   // component's declared `outputs` (the same object the held tool call returns to
@@ -774,11 +774,13 @@ export function TemplatesView({
                 style={{ borderColor: theme.color["border.subtle"], color: theme.color["text.secondary"] }}
                 title="Live connection settings"
               >
+                {/* Refused wins over connected: the transport is up, but the server has
+                    terminally refused the session — "Connecting…" would be a lie. */}
                 <span
                   className="inline-block h-2 w-2 shrink-0 rounded-full"
-                  style={{ background: (nativeStatus?.ready ?? conn.isReady) ? "#22c55e" : (nativeStatus?.connected ?? conn.isConnected) ? "#eab308" : "#9ca3af" }}
+                  style={{ background: nativeStatus?.refused ? "#ef4444" : (nativeStatus?.ready ?? conn.isReady) ? "#22c55e" : (nativeStatus?.connected ?? conn.isConnected) ? "#eab308" : "#9ca3af" }}
                 />
-                <span className="font-medium">{(nativeStatus?.ready ?? conn.isReady) ? "Connected" : (nativeStatus?.connected ?? conn.isConnected) ? "Connecting…" : "Offline"}</span>
+                <span className="font-medium">{nativeStatus?.refused ? "Refused" : (nativeStatus?.ready ?? conn.isReady) ? "Connected" : (nativeStatus?.connected ?? conn.isConnected) ? "Connecting…" : "Offline"}</span>
                 {binding?.workflow && <span className="font-mono text-[10px] opacity-60">· {binding.workflow}</span>}
                 <span className="opacity-60">▾</span>
               </button>
@@ -791,10 +793,17 @@ export function TemplatesView({
                   >
                     <div className="mb-2 flex items-center justify-between">
                       <span className="text-[10px] font-semibold uppercase tracking-wider opacity-60">Live connection</span>
-                      <span className="text-[10px]" style={{ color: (nativeStatus?.ready ?? conn.isReady) ? "#22c55e" : (nativeStatus?.connected ?? conn.isConnected) ? "#eab308" : theme.color["text.tertiary"] }}>
-                        {(nativeStatus?.ready ?? conn.isReady) ? "ready" : (nativeStatus?.connected ?? conn.isConnected) ? "connecting…" : "offline"}
+                      <span className="text-[10px]" style={{ color: nativeStatus?.refused ? "#ef4444" : (nativeStatus?.ready ?? conn.isReady) ? "#22c55e" : (nativeStatus?.connected ?? conn.isConnected) ? "#eab308" : theme.color["text.tertiary"] }}>
+                        {nativeStatus?.refused ? "refused" : (nativeStatus?.ready ?? conn.isReady) ? "ready" : (nativeStatus?.connected ?? conn.isConnected) ? "connecting…" : "offline"}
                       </span>
                     </div>
+                    {nativeStatus?.refused && (
+                      /* The server's own refusal text, verbatim — it already names the fix
+                         (sign in again, toggle the trigger public, …). */
+                      <div className="mb-2 rounded border px-2 py-1.5 text-[11px] leading-snug" style={{ borderColor: "#ef4444", color: "#ef4444" }}>
+                        {nativeStatus.refused}
+                      </div>
+                    )}
                     {/* Read-only: the app decides. Server is environment; Workflow + Trigger
                         come from the selected app's manifest binding (no manual entry). */}
                     {(

package/vendor/sdk/appEngine.tsx

@@ -55,6 +55,19 @@ export function AppEngine(cfg: AppConfig) {
     [serverUrl],
   );
   const [binding, setBinding] = useState<{ workflow?: string; trigger?: string; service?: string }>({});
+  // RENDER-TIME reset (React's derived-state-from-props pattern), not an effect: on an
+  // app switch the connection effect and a reset effect share one commit, and the
+  // connection runs first — so an effect-based reset still let one session open with the
+  // OLD app's trigger against the NEW app's conversation before correcting (observed
+  // live 2026-08-16, twice: first with no reset, then with the reset as an effect).
+  // Setting state during render makes React re-render BEFORE the commit, so the
+  // connection effect only ever sees either the old app intact or an empty binding —
+  // never the cross-app hybrid.
+  const [boundFor, setBoundFor] = useState(templateId);
+  if (boundFor !== templateId) {
+    setBoundFor(templateId);
+    setBinding({});
+  }
   // STATE-OWNED WIDTH (rx data): the layout root's `appWidth` = the core surface's
   // constant width; an occupied panel slot's `appWidth` adds to it (computeAppWidth).
   // No declared width → the host keeps its own default. There is no other path.
@@ -68,11 +81,22 @@ export function AppEngine(cfg: AppConfig) {
   const [def, setDef] = useState<UnoverseDefinition | null>(null);
   const lastWidthRef = useRef<string | undefined>(undefined);
   // Named app sizes resolve via the served theme (theme.appSize), like every token.
-  const theme = useUnoverseTheme(client, def ? (def.org ? `${def.org}/light` : "light") : null);
+  // The theme's name is the template's org. When templateId already carries it
+  // ("org/name" — every production boot), start the theme read IMMEDIATELY, in
+  // parallel with the template read; waiting for the definition just to learn an org
+  // we were handed serialized two round trips for nothing. Bare ids (dev) still wait.
+  const orgFromId = templateId.includes("/") ? templateId.split("/")[0] : null;
+  const theme = useUnoverseTheme(
+    client,
+    orgFromId ? `${orgFromId}/light` : def ? (def.org ? `${def.org}/light` : "light") : null,
+  );
 
   // The app owns which workflow it runs — read it from its manifest (§4b), not from config.
   useEffect(() => {
     let alive = true;
+    // The stale-binding reset lives at RENDER time (boundFor, above) — resetting here,
+    // in an effect, ran too late: the connection effect had already opened a session on
+    // the previous app's trigger within the same commit.
     client
       .connect()
       .then(() => (client as any).client.readResource({ uri: `unoverse://apps/${templateId.toLowerCase()}` }))
@@ -119,6 +143,17 @@ export function AppEngine(cfg: AppConfig) {
   }, [surface, conversationId, userId, analyticsDebug]);
 
   useEffect(() => {
+    // A NEW APP RE-ANNOUNCES ITS WIDTH, ALWAYS. The native host keeps ONE iframe for every
+    // app (its srcdoc is keyed on the server, not the app — it just re-posts
+    // `unoverse:config` with a new templateId) and this engine is re-rendered in place, so
+    // the change-guard below outlives the switch — while the host RESETS its frame to the
+    // default on it (NativeAppHost/TemplatesView). Two apps of the same declared width is
+    // the ordinary case (one org, one `chat` size), and the incoming app then reported
+    // nothing: its frame sat at the host default (100%) while its core panel held its
+    // declared width, leaving a dead band beside it (observed live 2026-08-13,
+    // bpp-voice-layout). Clearing the guard here makes the first report after an app
+    // switch unconditional; the guard still suppresses repeats within one app.
+    lastWidthRef.current = undefined;
     const report = () => {
       // NAME-SYNC: width is computed off the ACTIVE layout (multi-layout templates
       // swap whole arrangements); single-layout defs resolve to their root.
@@ -154,8 +189,10 @@ export function AppEngine(cfg: AppConfig) {
   // reads "offline" forever while this session streams (observed live). Report the
   // truth the same way size is reported; hosts that don't listen lose nothing.
   useEffect(() => {
-    postToEmbedHost({ type: "unoverse:status", ready: !!conn.isReady, connected: !!conn.isConnected });
-  }, [conn.isReady, conn.isConnected]);
+    // `refused` carries the server's terminal refusal text (register_session isError) —
+    // the one state a "Connecting…" badge must not sit on forever.
+    postToEmbedHost({ type: "unoverse:status", ready: !!conn.isReady, connected: !!conn.isConnected, refused: conn.refusal ?? undefined });
+  }, [conn.isReady, conn.isConnected, conn.refusal]);
 
   // VOICE (§2e-1): a `service: "voice"` app runs the native voice service — which now lives
   // in the shared renderer (StreamedUnoverseTemplate), identical to Studio. The host only

package/vendor/sdk/lib/connection.tsx

@@ -45,6 +45,12 @@ export interface UnoverseSessionParams {
 export interface UnoverseConnection {
   isConnected: boolean;
   isReady: boolean;
+  /** The server's refusal text when register_session answered isError (public-entry
+   *  gate, requires.role, stale token) — null while unrefused. A refusal is TERMINAL
+   *  for the attempt (the server has answered; retrying the same identity loops), so
+   *  hosts must surface this instead of showing "connecting" forever. Cleared when a
+   *  new connect sequence starts. */
+  refusal: string | null;
   /** Composer target: optimistic user turn + REST workflow trigger. */
   sendMessage: (text: string) => void;
   /** Fire the bound workflow WITHOUT a user turn — the "load → run the workflow" ping
@@ -112,6 +118,7 @@ export function useUnoverseConnection(
 
   const [isConnected, setIsConnected] = useState(false);
   const [isReady, setIsReady] = useState(false);
+  const [refusal, setRefusal] = useState<string | null>(null);
   const clientRef = useRef<Client | null>(null);
   // First-seen component keys for this connection (repeat INIT → props merge).
   const seenRef = useRef<Set<string>>(new Set());
@@ -128,62 +135,108 @@ export function useUnoverseConnection(
       return;
     }
     let cancelled = false;
+    let attempt = 0;
+    let retryTimer: ReturnType<typeof setTimeout> | null = null;
+    // Kept ACROSS reconnects on purpose: after a re-bind the server may re-push
+    // components this session already placed, and a repeat INIT on a seen key merges
+    // props instead of re-placing (applyServerMessage) — the screen never jumps.
     seenRef.current = new Set();
 
-    // Declare the ELICITATION capability (form mode) — the native collection path
-    // (UNOVERSE_MCP_TEMPLATE_PROTOCOL §3.3): the server pauses inside an app tool
-    // call and asks THIS session for the user's structured input. The interactive
-    // component already on screen IS the form; its `submit` answers the elicitation.
-    const client = new Client(
-      { name: "unoverse-channel", version: "0.0.1" },
-      { capabilities: { elicitation: {} }, jsonSchemaValidator: new CfWorkerJsonSchemaValidator() },
-    );
-    client.setRequestHandler(ElicitRequestSchema, async (req) => {
-      // Pend until the user submits the component (the channel calls resolveElicitation
-      // from its submit branch). The branded UI renders the request — never a generic form.
-      // The accept content MUST match the requestedSchema (spec: flat primitives only) —
-      // project the submitted component state to the REQUESTED keys, or the SDK rejects
-      // the response (view-state like a `courses` array fails the primitive union).
-      const requested =
-        (req.params as unknown as { requestedSchema?: { properties?: Record<string, unknown> } }).requestedSchema?.properties ?? {};
-      return await new Promise((resolve) => {
-        pendingElicitRef.current = (state: Record<string, unknown>) => {
-          pendingElicitRef.current = null;
-          const content: Record<string, unknown> = {};
-          for (const k of Object.keys(requested)) if (state[k] !== undefined) content[k] = state[k];
-          resolve({ action: "accept", content } as never);
-        };
+    /**
+     * SESSION-DEATH RECOVERY (the MCP spec's own rule): a session id the server no
+     * longer knows answers 404, and the client MUST start a NEW session rather than
+     * mourn the old one. Sessions are process memory server-side, so every restart —
+     * a dev edit, a prod deploy — orphans every open channel; before this, the error
+     * was logged once ("stream connect failed" / "client error") and the surface sat
+     * disconnected forever. Now ANY client error recycles the whole client and
+     * re-runs the connect sequence with backoff: register_session is idempotent, a
+     * re-bind emits SESSION_READY, and mount-reads re-hydrate state, so downstream
+     * already copes. Blunt on purpose — a transport error we fail to recognise as
+     * session death costs one spurious reconnect, while one we miss is a dead screen.
+     */
+    const recycle = (dead: Client, why: unknown) => {
+      // Only the CURRENT client may trigger recovery: a dying client's teardown fires
+      // stray errors (observed: four AbortErrors in one restart) and each would
+      // otherwise schedule its own storm of reconnects.
+      if (cancelled || clientRef.current !== dead) return;
+      clientRef.current = null;
+      void dead.close().catch(() => {});
+      setIsConnected(false);
+      setIsReady(false);
+      const delay = Math.min(15_000, 500 * 2 ** Math.min(attempt++, 5));
+      console.warn(`[unoverse] session lost — reconnecting in ${delay}ms (attempt ${attempt})`, why);
+      retryTimer = setTimeout(() => void connect(), delay);
+    };
+
+    const connect = async () => {
+      if (cancelled) return;
+      // Declare the ELICITATION capability (form mode) — the native collection path
+      // (UNOVERSE_MCP_TEMPLATE_PROTOCOL §3.3): the server pauses inside an app tool
+      // call and asks THIS session for the user's structured input. The interactive
+      // component already on screen IS the form; its `submit` answers the elicitation.
+      const client = new Client(
+        { name: "unoverse-channel", version: "0.0.1" },
+        { capabilities: { elicitation: {} }, jsonSchemaValidator: new CfWorkerJsonSchemaValidator() },
+      );
+      client.setRequestHandler(ElicitRequestSchema, async (req) => {
+        // Pend until the user submits the component (the channel calls resolveElicitation
+        // from its submit branch). The branded UI renders the request — never a generic form.
+        // The accept content MUST match the requestedSchema (spec: flat primitives only) —
+        // project the submitted component state to the REQUESTED keys, or the SDK rejects
+        // the response (view-state like a `courses` array fails the primitive union).
+        const requested =
+          (req.params as unknown as { requestedSchema?: { properties?: Record<string, unknown> } }).requestedSchema?.properties ?? {};
+        return await new Promise((resolve) => {
+          pendingElicitRef.current = (state: Record<string, unknown>) => {
+            pendingElicitRef.current = null;
+            const content: Record<string, unknown> = {};
+            for (const k of Object.keys(requested)) if (state[k] !== undefined) content[k] = state[k];
+            resolve({ action: "accept", content } as never);
+          };
+        });
       });
-    });
-    // The SDK fire-and-forgets the standalone GET SSE open on `initialized`; a failure
-    // lands ONLY here. Unset, a dead inbound stream is invisible — no events, no error.
-    client.onerror = (e) => console.error("[unoverse] client error:", e);
-    clientRef.current = client;
+      // The SDK fire-and-forgets the standalone GET SSE open on `initialized`; a failure
+      // lands ONLY here. This is also where a dead session surfaces mid-life (the SDK's
+      // own GET reconnect meets the restarted server's 404) — so it feeds recovery.
+      client.onerror = (e) => {
+        // TEARDOWN NOISE, not an error: closing a client aborts its SSE streams and the
+        // SDK reports every abort here. When the close was OURS (effect cleanup on an
+        // app switch, or a recycle that already replaced this client), a red error log
+        // reads as breakage — it made a clean app switch look like a failure (observed
+        // live 2026-08-16). Quiet log, no recovery; a live client's errors still recycle.
+        if (cancelled || clientRef.current !== client) {
+          // eslint-disable-next-line no-console
+          console.debug("[unoverse] client closed:", (e as Error)?.message ?? e);
+          return;
+        }
+        console.error("[unoverse] client error:", e);
+        recycle(client, e);
+      };
+      clientRef.current = client;
 
-    // The server pushes the live stream as `notifications/unoverse/event` over the
-    // GET SSE channel. Custom notification methods land on the fallback handler —
-    // route their `params` (one ServerMessage) into the store.
-    client.fallbackNotificationHandler = async (notification) => {
-      if (notification.method !== UNOVERSE_EVENT) return;
-      const msg = (notification.params ?? {}) as unknown as ServerMessage;
-      if ((msg as { type?: string }).type === "SESSION_READY") {
-        setIsReady(true);
-        return;
-      }
-      // A manifest-declared analytics moment, resolved SERVER-side beside the lifecycle
-      // hook that shares it (componentLifecycle.ts). The SDK adds nothing and decides
-      // nothing here: it hands the event to the same sink every node-attached emit uses,
-      // and the host realm delivers or drops it. News, never instruction — it does not
-      // touch the store.
-      const evt = msg as unknown as { type?: string; event?: string; params?: Record<string, unknown> };
-      if (evt.type === "ANALYTICS_EVENT") {
-        if (typeof evt.event === "string" && evt.event) emitAnalytics(evt.event, evt.params ?? {});
-        return;
-      }
-      applyServerMessage(store, msg, seenRef.current);
-    };
+      // The server pushes the live stream as `notifications/unoverse/event` over the
+      // GET SSE channel. Custom notification methods land on the fallback handler —
+      // route their `params` (one ServerMessage) into the store.
+      client.fallbackNotificationHandler = async (notification) => {
+        if (notification.method !== UNOVERSE_EVENT) return;
+        const msg = (notification.params ?? {}) as unknown as ServerMessage;
+        if ((msg as { type?: string }).type === "SESSION_READY") {
+          setIsReady(true);
+          return;
+        }
+        // A manifest-declared analytics moment, resolved SERVER-side beside the lifecycle
+        // hook that shares it (componentLifecycle.ts). The SDK adds nothing and decides
+        // nothing here: it hands the event to the same sink every node-attached emit uses,
+        // and the host realm delivers or drops it. News, never instruction — it does not
+        // touch the store.
+        const evt = msg as unknown as { type?: string; event?: string; params?: Record<string, unknown> };
+        if (evt.type === "ANALYTICS_EVENT") {
+          if (typeof evt.event === "string" && evt.event) emitAnalytics(evt.event, evt.params ?? {});
+          return;
+        }
+        applyServerMessage(store, msg, seenRef.current);
+      };
 
-    (async () => {
       // Inject the bearer on every underlying request (fresh per call → refresh-safe).
       const authFetch = getAccessToken
         ? async (url: string | URL, init?: RequestInit): Promise<Response> => {
@@ -199,11 +252,12 @@ export function useUnoverseConnection(
           authFetch ? { fetch: authFetch } : undefined,
         );
         await client.connect(transport);
-        if (cancelled) {
+        if (cancelled || clientRef.current !== client) {
           await client.close().catch(() => {});
           return;
         }
         setIsConnected(true);
+        setRefusal(null); // a fresh attempt owns a fresh verdict
         // Bind this stream to the session — the server then pushes the live component
         // stream and an immediate SESSION_READY.
         const bind = await client.callTool({
@@ -211,21 +265,35 @@ export function useUnoverseConnection(
           arguments: { userId, conversationId, workflowId, targetTriggerNode, chatId },
         });
         // A refusal (public-entry gate, requires.role, …) is an isError tool RESULT,
-        // not a thrown error — surface it, or the session is an eternal silent
-        // "Connecting…" (the server logs the same refusal as REFUSED:).
+        // not a thrown error — surface it and STOP, never retry: the server has
+        // answered, and re-asking with the same identity is a polite way to loop
+        // (the server logs the same refusal as REFUSED:). The reason is kept as state,
+        // not just logged: a console.error alone left the host chip on "Connecting…"
+        // forever with the cause visible to nobody (observed live 2026-08-16).
         if ((bind as { isError?: boolean }).isError) {
           const c = (bind as { content?: Array<{ type?: string; text?: string }> }).content;
-          console.error("[unoverse] session refused:", c?.[0]?.text ?? "unauthorized");
+          const reason = c?.[0]?.text ?? "unauthorized";
+          console.error("[unoverse] session refused:", reason);
+          setRefusal(reason);
+          return;
         }
+        // A completed re-bind is health — the next death starts its backoff fresh.
+        attempt = 0;
       } catch (e) {
-        if (!cancelled) console.error("[unoverse] stream connect failed", e);
+        if (cancelled) return;
+        console.error("[unoverse] stream connect failed", e);
+        recycle(client, e);
       }
-    })();
+    };
+
+    void connect();
 
     return () => {
       cancelled = true;
+      if (retryTimer !== null) clearTimeout(retryTimer);
       setIsConnected(false);
       setIsReady(false);
+      setRefusal(null);
       void clientRef.current?.close().catch(() => {});
       clientRef.current = null;
     };
@@ -357,5 +425,5 @@ export function useUnoverseConnection(
     return true;
   }, []);
 
-  return { isConnected, isReady, sendMessage, trigger, sendAction, resolveElicitation, activeTemplate };
+  return { isConnected, isReady, refusal, sendMessage, trigger, sendAction, resolveElicitation, activeTemplate };
 }