@unoverse-platform/studio 0.1.26 → 0.1.27

package/package.json

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

package/screens/AtomsView.tsx

@@ -14,6 +14,10 @@ import { usePersistentState } from "studio-host";
 interface PropDef {
   type?: string;
   default?: unknown;
+  /** Studio-only sample value — demo content that must NEVER reach a live render. A prop's
+   *  `default` is a RUNTIME fallback, so sample copy cannot live there: it would show in
+   *  place of an empty stream. Same key ComponentsView reads, for the same reason. */
+  preview?: unknown;
 }
 interface AtomDef {
   name: string;
@@ -55,7 +59,7 @@ const VIEWPORTS: { id: string; label: string; w: number | null }[] = [
 const toText = (v: unknown) => (typeof v === "string" ? v : v == null ? "" : JSON.stringify(v));
 const defaultsOf = (a: AtomDef): Record<string, unknown> =>
   Object.fromEntries(
-    Object.entries(a.props ?? {}).map(([k, v]) => [k, v.default ?? (v.type === "array" ? [] : v.type === "object" ? {} : v.type === "boolean" ? false : "")]),
+    Object.entries(a.props ?? {}).map(([k, v]) => [k, v.preview ?? v.default ?? (v.type === "array" ? [] : v.type === "object" ? {} : v.type === "boolean" ? false : "")]),
   );
 const slug = (n: string) => n.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
 
@@ -180,7 +184,41 @@ export function AtomsView({ theme }: { theme: ResolvedTheme }) {
 
           <div className="flex-1 overflow-auto p-10">
             <div className="mx-auto max-w-full transition-[width] duration-200" style={{ width: stageWidth ?? "100%" }}>
-              {uri && <UnoverseComponent client={client} uri={uri} data={values} theme={theme} />}
+              {uri && (
+                <UnoverseComponent
+                  client={client}
+                  uri={uri}
+                  data={values}
+                  theme={theme}
+                  // TYPING IN A PREVIEW. A controlled Input reports every keystroke as an
+                  // `input` action carrying WHICH field changed. Rendering from a plain
+                  // object means this view owns the slice, so it applies that write itself:
+                  // without it the box shows the control's value and never what was typed.
+                  onAction={(action, payload) => {
+                    if (action === "input") {
+                      const { field, text: typed } = (payload ?? {}) as { field?: string; text?: string };
+                      if (!field) return;
+                      setValues((v) => ({ ...v, [field]: typed ?? "" }));
+                      setText((t) => ({ ...t, [field]: typed ?? "" }));
+                      return;
+                    }
+                    // A SWITCH FLIPS IN THE PREVIEW. An atom never owns its own write — the
+                    // HOST supplies the action, because only the host knows which key the
+                    // answer belongs to. With no host here, a toggle would sit dead on the
+                    // stage and read as broken, so the preview stands in for one: `toggle`
+                    // inverts this atom's boolean props, which is exactly what the host's
+                    // `setValue` would do with the field's real name.
+                    if (action === "toggle") {
+                      const flags = Object.entries(current?.props ?? {})
+                        .filter(([, def]) => def.type === "boolean")
+                        .map(([key]) => key);
+                      if (!flags.length) return;
+                      setValues((v) => ({ ...v, ...Object.fromEntries(flags.map((k) => [k, !v[k]])) }));
+                      setText((t) => ({ ...t, ...Object.fromEntries(flags.map((k) => [k, String(!values[k])])) }));
+                    }
+                  }}
+                />
+              )}
             </div>
           </div>
         </section>

package/screens/ComponentsView.tsx

@@ -8,7 +8,7 @@ import { ComponentStore } from "@unoverse/sdk";
 import { UnoverseComponent, type ResolvedTheme } from "@unoverse/sdk";
 import { client, authedFetch, hasSourceAccess } from "studio-host";
 import { SourceView } from "./SourceView";
-import { stateActivation, faceOf, switchLayers } from "./states";
+import { stateActivation, faceOf, faceAxisOf, switchLayers } from "./states";
 import { usePersistentState, useRegistryToggles, ToggleSwitch } from "studio-host";
 
 const CHAT_ID = "demo";
@@ -21,6 +21,9 @@ interface PropDef {
    *  when seeding the preview stage. */
   preview?: unknown;
   input?: boolean;
+  /** Closed value set — the control renders as a dropdown instead of free text
+   *  (e.g. an orb's nine animation states). Mirrors the node configSchema's enum. */
+  enum?: (string | number)[];
 }
 interface ComponentDef {
   name: string;
@@ -127,6 +130,21 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
     setValues(defaults);
     setText(Object.fromEntries(Object.entries(defaults).map(([k, v]) => [k, toText(v)])));
     store.apply({ type: "COMPONENT_INIT", chatId: CHAT_ID, nodeId: c.name, component: { type: c.name, props: defaults } });
+    // SEED THE ARRIVAL FACE, from the one place it lives. `manifest.defaultState` is the
+    // render contract, and the server merges it into the composed `state` block
+    // (definitions.ts — "so the SDK, which merges def.state beneath live data, renders
+    // that face on arrival"). The RENDERER honours it; this toolbar reads the live SLICE,
+    // which is empty on open, so it fell back to "inline" and highlighted a face that was
+    // not on screen. Reading the same `state.defaultState` the renderer resolves keeps one
+    // source of truth. Picking a face overwrites it exactly as before, and a component
+    // that declares no arrival face still falls back to inline.
+    // v2 (STATE_MODEL §5): the compiled scalar `state.view` (the tree's initial) is
+    // the arrival face; `state.defaultState` is the legacy spelling. Seed whichever
+    // the def declares, under the same key the renderer resolves.
+    const st = c.state as Record<string, unknown> | undefined;
+    if (typeof st?.view === "string") store.apply({ type: "COMPONENT_DATA", chatId: CHAT_ID, nodeId: c.name, data: { view: st.view } });
+    else if (typeof st?.defaultState === "string")
+      store.apply({ type: "COMPONENT_DATA", chatId: CHAT_ID, nodeId: c.name, data: { defaultState: st.defaultState } });
   }
 
   useEffect(() => {
@@ -155,31 +173,42 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
   // that key into the slice — the same generic setValue/COMPONENT_DATA path a real
   // component's own buttons use. `focused` also drives the grow-to-fill container.
   const slice = selected ? store.get(CHAT_ID, selected) : undefined;
-  const masterState = ((slice?.defaultState ?? slice?.displayState) as string | undefined) ?? "inline";
-  // A component's FACES come from its OWN root `Switch on defaultState` cases — an
-  // OPEN name set (inline/focused/course/…), never a hardcoded pair. `inline` is the
-  // universal default face and always leads. A flat component (no Switch) has ONE
+  // The PUBLIC AXIS (STATE_MODEL v2): `view`, with `defaultState`/`displayState` as
+  // legacy read fallbacks. Writes go to whichever spelling the root actually switches
+  // on (faceAxisOf), so a v2 component and a legacy one both flip.
+  const faceAxis = current?.root ? faceAxisOf(current.root) : "defaultState";
+  const masterState =
+    ((slice?.view ?? slice?.defaultState ?? slice?.displayState) as string | undefined) ??
+    ((current as { initialView?: string } | undefined)?.initialView ?? "inline");
+  // A component's FACES come from its OWN root Switch on the public axis — an OPEN
+  // name set (inline/focused/course/…), never a hardcoded pair. The BASE face (a v2
+  // tree's initial, else `inline`) always leads. A flat component (no Switch) has ONE
   // look; the face control would be a lie, so it's hidden.
   const facesOf = (root: unknown): string[] => {
     const found: string[] = [];
     const walk = (n: any): void => {
       if (!n || typeof n !== "object") return;
       if (Array.isArray(n)) { n.forEach(walk); return; }
-      if (n.type === "Switch" && n.on === "defaultState" && n.cases && typeof n.cases === "object") {
+      if (n.type === "Switch" && (n.on === "view" || n.on === "defaultState") && n.cases && typeof n.cases === "object") {
         for (const k of Object.keys(n.cases)) if (k !== "default" && !found.includes(k)) found.push(k);
       }
       Object.values(n).forEach(walk);
     };
     walk(root);
-    return ["inline", ...found.filter((f) => f !== "inline")];
+    const base = (current as { initialView?: string } | undefined)?.initialView ?? "inline";
+    return [base, ...found.filter((f) => f !== base)];
   };
-  const faces = current?.root ? facesOf(current.root) : ["inline"];
+  // STATE MODEL v2: a component with a served `stateTree` declares its states — the
+  // viewer READS the declaration, never scans layouts (scanning surfaced embedded
+  // components' content Switches — a Document's tab cases — as fake states).
+  const stateTree = (current as { stateTree?: { name: string; layout?: string; on?: string; initial?: string; states?: { name: string; layout?: string }[] }[] } | undefined)?.stateTree;
+  const faces = stateTree?.length ? stateTree.map((s) => s.name) : current?.root ? facesOf(current.root) : ["inline"];
   const hasFaces = faces.length > 1;
-  // Any non-inline face gets the grow-to-fill container (focused/course/… are the fuller looks).
-  const isFocused = hasFaces && masterState !== "inline";
+  // Any non-base face gets the grow-to-fill container (focused/course/… are the fuller looks).
+  const isFocused = hasFaces && masterState !== faces[0];
   const setMasterState = (ms: string) => {
     if (!selected) return;
-    store.apply({ type: "COMPONENT_DATA", chatId: CHAT_ID, nodeId: selected, data: { defaultState: ms } });
+    store.apply({ type: "COMPONENT_DATA", chatId: CHAT_ID, nodeId: selected, data: { [faceAxis]: ms } });
   };
 
   // CONTEXTUAL SUB-STATES — a face's own internal steps (a Switch inside the face on a
@@ -196,11 +225,23 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
   // states of this component: they turn on DATA (`kind`) or on another component's slice
   // (`tab`), and writing them into this slice does nothing. A component's states are the
   // keys it declares in `state` — that is what the toolbar is allowed to write.
+  // EVERY face derives its own steps, inline included. Inline was excluded on the
+  // assumption that only a fuller face has steps, but a collapsed card varies by step
+  // too (card-finder's status line), and those steps are the INLINE face's — its own
+  // `layouts/inline-<step>` files, never the focus face's. Excluding it meant a face
+  // with real steps showed none, and the rule "a face's steps show while it is active"
+  // was applied to every face but one.
   const subStatesOf = (faceName: string): { on: string; name: string }[] => {
-    if (!current?.root || !hasFaces || faceName === "inline") return [];
-    // The component's OWN state keys — everything else in the subtree belongs to an
-    // inlined atom or shared component, or is plain data. The derivation itself is
-    // the SHARED layer resolver (states.ts, UNOVERSE_LAYERS.md §3c).
+    if (!current?.root || !hasFaces) return [];
+    // STATE MODEL v2: the tree IS the declaration — a face's substates are exactly
+    // the nested states it declares (with its own `on` discriminant). Nothing else
+    // is a state: an embedded Document's `tab` Switch never appears, because it is
+    // not in the tree. No tree → the legacy Switch-scan (shared layer resolver).
+    if (stateTree?.length) {
+      const entry = stateTree.find((s) => s.name === faceName);
+      if (!entry?.on || !entry.states?.length) return [];
+      return entry.states.map((st) => ({ on: entry.on!, name: st.name }));
+    }
     const ownKeys = new Set(Object.keys((current.state ?? {}) as Record<string, unknown>));
     return switchLayers(faceOf(current.root, faceName), ownKeys);
   };
@@ -346,7 +387,44 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
                     no states/ folder, no rail entry at all (inline needs no dedicated state). */}
                 {/* Hidden in dev mode: the file rail lists these as `states/` and
                     `layouts/`, and opening one is what puts the preview into it. */}
-                {selected === c.name && !sourceOpen && (c.states?.length ?? 0) > 0 && (
+                {/* STATE MODEL v2 — STATES OWN LAYOUTS, and this rail is that sentence
+                    drawn: it lists the ACTIVE state's layouts (its own drawing, then
+                    its private steps' drawings), straight from the declared tree.
+                    Clicking a step's layout puts the preview into that step. The
+                    states themselves live in the toolbar pills above — one control
+                    per axis, no duplication. */}
+                {selected === c.name && !sourceOpen && stateTree?.length ? (
+                  (() => {
+                    const st = stateTree.find((s) => s.name === masterState);
+                    if (!st) return null;
+                    // Only the STEPS list, by their STATE NAMES (Detail / Apply) — the
+                    // layout filename is plumbing, and the shell (the state's own
+                    // layout) is always on, so neither appears. One step is not a
+                    // choice either: nothing lists.
+                    const entries = (st.states ?? []).map((sub) => ({ label: sub.name, step: sub.name }));
+                    if (entries.length < 2 || !st.on) return null;
+                    const cur = (store.get(CHAT_ID, c.name) as Record<string, unknown>)[st.on] ?? st.initial;
+                    return (
+                      <div className="my-0.5 ml-2 flex flex-col gap-px border-l border-gray-700 pl-2">
+                        {entries.map((e) => (
+                          <button
+                            key={e.label}
+                            onClick={() => {
+                              store.apply({ type: "COMPONENT_DATA", chatId: CHAT_ID, nodeId: c.name, data: { [st.on!]: e.step } });
+                              setStoreTick((v) => v + 1);
+                            }}
+                            className={`block w-full truncate rounded px-2 py-0.5 text-left text-xs capitalize transition ${
+                              cur === e.step ? "bg-emerald-500/10 text-emerald-300" : "text-gray-400 hover:bg-white/5 hover:text-gray-200"
+                            }`}
+                          >
+                            {e.label}
+                          </button>
+                        ))}
+                      </div>
+                    );
+                  })()
+                ) : null}
+                {selected === c.name && !sourceOpen && !stateTree?.length && (c.states?.length ?? 0) > 0 && (
                   <div className="my-0.5 ml-2 flex flex-col gap-px border-l border-gray-700 pl-2">
                     {(c.states ?? []).map((s) => {
                       const data = stateActivation(c.root, s);
@@ -372,11 +450,10 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
                     })}
                   </div>
                 )}
-                {/* CONTEXTUAL SUB-STATES — the ACTIVE face's internal steps (its private
-                    Switch, e.g. focus's detail ⇄ book). Layouts on top, states down the
-                    left: these list here ONLY while their face is active — they aren't
-                    states of the other faces. First named case = the face's default. */}
-                {selected === c.name && !sourceOpen && subStates.length > 0 && (
+                {/* CONTEXTUAL SUB-STATES (LEGACY Switch-scan only — a v2 tree renders
+                    its steps nested above): the ACTIVE face's internal steps (its
+                    private Switch). Listed only while their face is active. */}
+                {selected === c.name && !sourceOpen && !stateTree?.length && subStates.length > 0 && (
                   <div className="my-0.5 ml-2 flex flex-col gap-px border-l border-gray-700 pl-2">
                     {subStates.map((s, i) => {
                       const cur = (store.get(CHAT_ID, c.name) as Record<string, unknown>)[s.on];
@@ -448,6 +525,10 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
                 as `layouts/`, in the same order, and opening one switches the preview. Two
                 controls for one choice is one too many, and the rail is the one that also
                 tells you which file you are reading. */}
+            {/* STATE MODEL v2: STATES LIVE ON TOP — this pill row is THE state control
+                (one button per public state, from the declared tree). The rail below
+                lists the ACTIVE state's LAYOUTS: states own layouts, so clicking a
+                state up here reveals its drawings down there. */}
             {hasFaces && !sourceOpen && (
               <div className="flex items-center gap-1 rounded p-0.5 text-[11px]" style={{ background: theme.color["border.subtle"] }}>
                 {faces.map((ms) => (
@@ -686,6 +767,16 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
                               spellCheck={false}
                               className="w-full max-w-2xl resize-y rounded-md border border-gray-700 bg-[#2c2c2e] px-3 py-2 font-mono text-xs text-gray-200 focus:border-emerald-500 focus:outline-none"
                             />
+                          ) : Array.isArray(def.enum) && def.enum.length ? (
+                            <select
+                              value={text[key] ?? ""}
+                              onChange={(e) => setField(key, e.target.value, def.type)}
+                              className="w-full max-w-2xl rounded-md border border-gray-700 bg-[#2c2c2e] px-3 py-2 text-gray-200 focus:border-emerald-500 focus:outline-none"
+                            >
+                              {def.enum.map((opt) => (
+                                <option key={String(opt)} value={String(opt)}>{String(opt)}</option>
+                              ))}
+                            </select>
                           ) : (
                             <input
                               value={text[key] ?? ""}

package/screens/NativeAppHost.tsx

@@ -21,6 +21,7 @@ export function NativeAppHost({
   templateId,
   userId,
   conversationId,
+  onStatus,
 }: {
   /** Universe origin, e.g. http://localhost:4105 — the /mcp and /stream host. */
   server: string;
@@ -28,6 +29,9 @@ export function NativeAppHost({
   templateId?: string;
   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;
 }) {
   const [html, setHtml] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
@@ -38,13 +42,13 @@ export function NativeAppHost({
   const [appWidth, setAppWidth] = useState<string | null>(null);
   useEffect(() => {
     const onSize = (e: MessageEvent) => {
-      if (e.source === frame.current?.contentWindow && e.data?.type === "unoverse:size" && e.data.width) {
-        setAppWidth(String(e.data.width));
-      }
+      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 });
     };
     window.addEventListener("message", onSize);
     return () => window.removeEventListener("message", onSize);
-  }, []);
+  }, [onStatus]);
   // A different app starts back at the host default until it reports.
   useEffect(() => setAppWidth(null), [templateId]);
 

package/screens/TemplatesView.tsx

@@ -25,7 +25,7 @@ import { usePersistentState, useRegistryToggles, ToggleSwitch } from "studio-hos
 import { ComponentStore } from "@unoverse/sdk";
 import { StreamedUnoverseTemplate, useUnoverseConnection, computeAppWidth, resolveActiveLayout, visible, type ResolvedTheme, type UseVoiceServiceConfig } from "@unoverse/sdk";
 import { NativeAppHost } from "./NativeAppHost";
-import { inArrangement } from "./states";
+import { inArrangement, viewOfSlice } from "./states";
 import { client, authedFetch, hasAuth, UNOVERSE_BASE } from "studio-host";
 
 // Per-APP test conversation: each app chats in its own conversation id, so testing
@@ -140,7 +140,10 @@ export function TemplatesView({
   theme: defaultTheme,
   themeName,
   org = "all",
-  defaultLive = false,
+  // Templates open LIVE by default (Gavin, 2026-08-08): an app IS its live binding —
+  // Mock is the authoring affordance you step INTO (states are mock-only), not the
+  // resting mode.
+  defaultLive = true,
 }: {
   theme: ResolvedTheme;
   themeName: string;
@@ -201,6 +204,12 @@ export function TemplatesView({
   const [version, setVersion] = useState(0); // local bump to reflect store changes in the toolbar
   const [stageWidth, setStageWidth] = useState<number | null>(null); // default Full — testing should see the real channel width
   const [connOpen, setConnOpen] = useState(false); // Live connection popover
+  // THE TRUTH ABOUT LIVE (native host): the iframe app owns the only real
+  // 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);
+  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
   // the calling LLM). Shown as a subtle dismissible card over the stage.
@@ -272,7 +281,7 @@ export function TemplatesView({
     for (const turn of store.getResponses())
       for (const p of turn.components) {
         const { chatId, nodeId } = store.split(p);
-        const v = (store.get(chatId, nodeId) as Record<string, unknown>)?.defaultState;
+        const v = viewOfSlice(store.get(chatId, nodeId));
         if (typeof v === "string" && claims.has(v) && store.touchOf(p) > at) {
           at = store.touchOf(p);
           view = v;
@@ -328,7 +337,10 @@ export function TemplatesView({
       conversationId: chatIdFor(selected ?? "app"),
       chatId: chatIdFor(selected ?? "app"),
     }),
-    [binding?.workflow, binding?.trigger, tokenSub],
+    // `selected` MUST be a dep: it feeds conversationId/chatId. Without it, an app
+    // switch where the binding values happen to match kept the PREVIOUS app's
+    // conversation identity — one app's session leaking into another's shell.
+    [binding?.workflow, binding?.trigger, tokenSub, selected],
   );
 
   // NATIVE (2026-07-28): Live mode is the NATIVE HOST — an iframe running the
@@ -469,17 +481,22 @@ export function TemplatesView({
   function seed(comps: Def[]) {
     // nodeId is per-INSTANCE (`name-i`), so previewComponents may repeat a name to
     // seed several instances — e.g. ["course-card", "course-card"] previews a rail of cards.
-    comps.forEach((c, i) =>
+    comps.forEach((c, i) => {
+      // STATE MODEL v2: the PUBLIC AXIS never rides the seed — the state chip is the
+      // controller. Strip BOTH spellings from the def's state block (`view` is the
+      // compiled tree initial; leaving it in the slice would shadow the chip's
+      // legacy-spelling activation — viewOf reads `view` first) and land inline.
+      const { view: _v, defaultState: _d, ...restState } = ((c as { state?: Record<string, unknown> }).state ?? {}) as Record<string, unknown>;
       store.apply({
         type: "COMPONENT_INIT",
         chatId: chatIdFor(selected ?? "app"),
         nodeId: `${c.name}-${i}`,
         component: {
           type: c.name,
-          props: { ...defaultsOf(c), ...((c as { state?: Record<string, unknown> }).state ?? {}), defaultState: "inline" },
+          props: { ...defaultsOf(c), ...restState, defaultState: "inline" },
         },
-      }),
-    );
+      });
+    });
     setSeeded(comps.map((c) => c.name));
     setVersion((v) => v + 1);
   }
@@ -572,7 +589,9 @@ export function TemplatesView({
         // Component states need a body to grab; app declares no previewComponents →
         // fall back to the SAMPLE ANSWER (the Markdown component's own default content)
         // so the conversation still previews a real assistant turn.
-        const sample = components.filter((c) => c.name.toLowerCase() === "markdownrenderer");
+        // Matched without separators: the item was renamed to kebab-case, and comparing
+        // against the collapsed spelling silently matched a stale pre-rename copy instead.
+        const sample = components.filter((c) => c.name.toLowerCase().replace(/[-_]/g, "") === "markdownrenderer");
         seededSet = set.length ? set : sample;
         seed(seededSet);
         // A mock preview is a FINISHED turn — complete it so streaming chrome
@@ -598,7 +617,11 @@ export function TemplatesView({
       // Every seeded instance enters the previewed state — the author's `preview`
       // map already said exactly what belongs here (a multi-instance surface like a
       // card rail previews full; a limit:1 surface shows the newest).
-      seededSet.forEach((c, i) => store.mergeComponentState(chatIdFor(selected ?? "app"), `${c.name}-${i}`, { [whereSel.field!]: whereSel.eq ?? true }));
+      // The public axis writes BOTH spellings (STATE_MODEL v2 alias: `view` shadows
+      // `defaultState` in viewOf) so activation lands whichever the slice carries.
+      const axis = whereSel.field === "view" || whereSel.field === "defaultState";
+      const data = axis ? { view: whereSel.eq ?? true, defaultState: whereSel.eq ?? true } : { [whereSel.field!]: whereSel.eq ?? true };
+      seededSet.forEach((c, i) => store.mergeComponentState(chatIdFor(selected ?? "app"), `${c.name}-${i}`, data));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [store, selected, components, templates, live, activeState, activeLayout]);
@@ -627,11 +650,13 @@ export function TemplatesView({
                 </span>
               )}
             </button>
-            {/* Storybook-style layer views — the template's states/ folder (UNOVERSE_LAYERS.md §7).
-                Mock view only: states are a preview affordance, not a live control. LAYOUTS are
-                NOT listed here — they get the toolbar pill row (the component-faces treatment);
-                the rail keeps only the template's LOCAL states. */}
-            {!live && selected === t.name && (t.states?.length ?? 0) > 0 && (
+            {/* The template's LOCAL states — its states/ folder. STATE MODEL v2: these
+                are PRIVATE SUBSTATES of the BASE arrangement (welcome/conversation guard
+                inside main's chrome), never states of a reaction arrangement — so they
+                list ONLY while the base pill (Main) is active. Reaction states get the
+                toolbar pill row; showing these under Focus/Product taught the old
+                two-axis model and let the rail lie about what Focus contains. */}
+            {!live && selected === t.name && activeLayout === null && (t.states?.length ?? 0) > 0 && (
               <div className="my-0.5 ml-2 flex flex-col gap-px border-l border-gray-700 pl-2">
                 {t.states!.filter((s) => !(t.layouts && s.name in t.layouts!)).filter((s) => stateInLayout(s, t)).map((s) => (
                   <button
@@ -679,7 +704,11 @@ export function TemplatesView({
                   <button
                     key={n}
                     onClick={() => {
-                      setActiveLayout(isDefault ? null : n); // the layout AXIS only — the local state stays put
+                      setActiveLayout(isDefault ? null : n);
+                      // STATE MODEL v2: the base's substates (welcome/conversation) exist
+                      // only inside the base arrangement — entering a reaction state
+                      // clears any picked one; returning to base lands on the first.
+                      setActiveState(isDefault ? (selectedDef.states?.filter((s) => !(selectedDef.layouts && s.name in selectedDef.layouts!))[0] ?? null) : null);
                       setSeedKey((k) => k + 1);
                     }}
                     className="rounded px-2 py-0.5 font-medium capitalize transition"
@@ -737,9 +766,9 @@ export function TemplatesView({
               >
                 <span
                   className="inline-block h-2 w-2 shrink-0 rounded-full"
-                  style={{ background: conn.isReady ? "#22c55e" : conn.isConnected ? "#eab308" : "#9ca3af" }}
+                  style={{ background: (nativeStatus?.ready ?? conn.isReady) ? "#22c55e" : (nativeStatus?.connected ?? conn.isConnected) ? "#eab308" : "#9ca3af" }}
                 />
-                <span className="font-medium">{conn.isReady ? "Connected" : conn.isConnected ? "Connecting…" : "Offline"}</span>
+                <span className="font-medium">{(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>
@@ -752,8 +781,8 @@ 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: conn.isReady ? "#22c55e" : conn.isConnected ? "#eab308" : theme.color["text.tertiary"] }}>
-                        {conn.isReady ? "ready" : conn.isConnected ? "connecting…" : "offline"}
+                      <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>
                     </div>
                     {/* Read-only: the app decides. Server is environment; Workflow + Trigger
@@ -974,6 +1003,7 @@ export function TemplatesView({
                   templateId={`${selectedDef?.org ? `${selectedDef.org}/` : ""}${selected ?? ""}`}
                   userId={session.userId}
                   conversationId={session.conversationId}
+                  onStatus={setNativeStatus}
                 />
               ) : (
               <StreamedUnoverseTemplate

package/screens/states.ts

@@ -21,11 +21,22 @@ function walkTree(n: unknown, visit: (node: Record<string, unknown>) => boolean
   return Object.values(o).some((v) => walkTree(v, visit));
 }
 
-/** The subtree a face draws: the root's `Switch on defaultState` case of that name. */
+/** The PUBLIC axis (STATE_MODEL v2): `view`, with `defaultState` as the legacy alias. */
+export const VIEW_AXES = ["view", "defaultState"] as const;
+const isViewAxis = (on: unknown): boolean => on === "view" || on === "defaultState";
+
+/** The state an instance is showing, read off its slice on the public axis. Reading
+ *  only the legacy alias leaves every migrated component looking state-less. */
+export const viewOfSlice = (slice: unknown): unknown => {
+  const s = (slice ?? {}) as Record<string, unknown>;
+  return s.view ?? s.defaultState;
+};
+
+/** The subtree a face draws: the root's Switch-on-the-public-axis case of that name. */
 export function faceOf(root: unknown, face: string): unknown {
   let found: unknown;
   walkTree(root, (o) => {
-    if (o.type === "Switch" && o.on === "defaultState" && o.cases && typeof o.cases === "object" && (o.cases as Record<string, unknown>)[face]) {
+    if (o.type === "Switch" && isViewAxis(o.on) && o.cases && typeof o.cases === "object" && (o.cases as Record<string, unknown>)[face]) {
       found = (o.cases as Record<string, unknown>)[face];
       return true;
     }
@@ -33,16 +44,28 @@ export function faceOf(root: unknown, face: string): unknown {
   return found;
 }
 
+/** Which public-axis spelling the root actually switches on (writes must match it). */
+export function faceAxisOf(root: unknown): "view" | "defaultState" {
+  let axis: "view" | "defaultState" = "defaultState";
+  walkTree(root, (o) => {
+    if (o.type === "Switch" && isViewAxis(o.on) && o.cases && typeof o.cases === "object") {
+      axis = o.on as "view" | "defaultState";
+      return true;
+    }
+  });
+  return axis;
+}
+
 /**
  * The STEPS a subtree owns: every case of a `Switch` that turns on one of the thing's
- * OWN state keys (`defaultState` excluded — that Switch picks faces, not steps).
+ * OWN state keys (the public axis excluded — that Switch picks faces, not steps).
  * Switches on data fields (`kind`, a nested component's key) are content selection,
  * not layers — which is why the caller passes the declared keys.
  */
 export function switchLayers(tree: unknown, ownKeys: ReadonlySet<string>): { on: string; name: string }[] {
   const out: { on: string; name: string }[] = [];
   walkTree(tree, (o) => {
-    if (o.type === "Switch" && typeof o.on === "string" && o.on !== "defaultState" && ownKeys.has(o.on) && o.cases && typeof o.cases === "object") {
+    if (o.type === "Switch" && typeof o.on === "string" && !isViewAxis(o.on) && ownKeys.has(o.on) && o.cases && typeof o.cases === "object") {
       for (const k of Object.keys(o.cases)) if (k !== "default" && !out.some((s) => s.name === k)) out.push({ on: o.on, name: k });
     }
   });

package/vendor/sdk/appEngine.tsx

@@ -42,7 +42,12 @@ export interface AppConfig {
 export function AppEngine(cfg: AppConfig) {
   const { serverUrl, apiUrl, templateId, getAccessToken, userId, conversationId, surface, analyticsDebug } = cfg;
 
-  const store = useMemo(() => new ComponentStore(), []);
+  // ONE STORE PER CONVERSATION. The host may reuse this engine (the native-host
+  // iframe posts new config on app switch), and a template swap keeps the store by
+  // law (the template owns nothing) — but a CONVERSATION swap must not: carrying the
+  // old timeline across conversations rendered one app's history inside another's
+  // shell (observed live, 2026-08-08: one org's chat inside another org's app).
+  const store = useMemo(() => new ComponentStore(), [userId, conversationId]);
   const client = useMemo(
     () => new UnoverseClient(`${serverUrl}/mcp`, { getAccessToken: getAccessToken as any }),
     [serverUrl],
@@ -109,7 +114,7 @@ export function AppEngine(cfg: AppConfig) {
     const report = () => {
       // NAME-SYNC: width is computed off the ACTIVE layout (multi-layout templates
       // swap whole arrangements); single-layout defs resolve to their root.
-      const w = computeAppWidth(resolveActiveLayout(def as never, store), store, theme?.appSize);
+      const w = computeAppWidth(resolveActiveLayout(def as never, store), store, theme?.appSize, def as never);
       if (w && w !== lastWidthRef.current) {
         lastWidthRef.current = w;
         window.parent?.postMessage({ type: "unoverse:size", width: w }, "*");
@@ -136,6 +141,17 @@ export function AppEngine(cfg: AppConfig) {
     { enabled: !!userId && !!binding.workflow },
   );
 
+  // STATUS TO THE HOST. In native-host mode the iframe owns the only real
+  // connection, so a host badge watching its own (never-opened) in-page connection
+  // 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(() => {
+    window.parent?.postMessage(
+      { type: "unoverse:status", ready: !!conn.isReady, connected: !!conn.isConnected },
+      "*",
+    );
+  }, [conn.isReady, conn.isConnected]);
+
   // 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
   // supplies the connection identity it already holds; startCall/endCall/toggleMute are

package/vendor/sdk/lib/core/actions.ts

@@ -63,12 +63,16 @@ export function dispatchAction(
     // Structure-bumping write (not the deferred COMPONENT_DATA path): templates re-resolve
     // their `select.where` slots the moment a component changes its own state (§5b).
     ctx.store.mergeComponentState(ctx.chatId, ctx.nodeId, patch);
-    // A CHANGED LAYOUT IS NEWS. `defaultState` is the view a component is showing, so a
-    // write to it means this instance just entered a different face — the moment an
-    // `onEnterView` hook exists for. Reported on the channel path every other server
-    // action already uses; the server decides whether any hook cares. Nothing to author:
-    // the setValue already carries the fact, so no component repeats it in a `then`.
-    if (ctx.nodeId && "defaultState" in patch) ctx.sendToServer?.("viewEntered", { layout: patch.defaultState });
+    // A CHANGED VIEW IS NEWS. The public axis (`view`, legacy alias `defaultState`) is
+    // the state a component is showing, so a write to it means this instance just
+    // entered a different state — the moment an `onEnterView` hook exists for. Reported
+    // on the channel path every other server action uses; the server decides whether
+    // any hook cares. The payload carries both spellings during the migration (the
+    // server's lifecycle scope historically read `layout`).
+    if (ctx.nodeId && ("view" in patch || "defaultState" in patch)) {
+      const entered = patch.view ?? patch.defaultState;
+      ctx.sendToServer?.("viewEntered", { layout: entered, view: entered });
+    }
   } else if (spec.type === "setTemplateValue") {
     // Write the dev's chosen keys into TEMPLATE state — the template-state twin of setValue.
     // No component scope. The dev builds disclosure / focus / etc. from a key THEY name