@unoverse-platform/studio 0.1.78 → 0.1.80

package/package.json

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

package/screens/EmptyLibrary.tsx

@@ -0,0 +1,75 @@
+/**
+ * A SECTION WITH NOTHING IN IT — the shared empty state for the catalogue screens.
+ *
+ * Chrome, in the sense `chrome.ts` means it: it says how a section presents having no
+ * content, never what the content would have been. Skills and Prompt Blocks both need
+ * it, and both had grown their own cramped version wedged into the 220px navigator,
+ * where a sentence with a file path in it wraps three times and reads as an error.
+ *
+ * IT BELONGS IN THE PANE, not the navigator. The pane is the wide half and the half a
+ * person is already looking at; an empty navigator beside it reads as "nothing here"
+ * without needing to say so.
+ *
+ * AND IT MUST NAME THE RIGHT FOLDER. The old copy always said
+ * `apps/unoverse/prompts/blocks/`, which is the UNIVERSAL tier. Studio scoped to an org
+ * is telling you where to author for THAT org, and sending someone to the universal
+ * folder would have them write a platform-wide asset when they wanted their own.
+ */
+import { DOC, PANE } from "./chrome";
+
+export function EmptyLibrary({
+  /** What is missing, in the plural and lowercase: "skills", "prompt blocks". */
+  noun,
+  /** The org in scope, when there is one. "all" and undefined both mean unscoped. */
+  org,
+  /** Where an item of this kind lives, relative to an org: "skills", "blocks". */
+  folder,
+  /** What a single one of them IS, for the line that explains the shape. */
+  shape,
+  /** A load failure. Takes precedence: a broken request is not an empty library. */
+  error,
+}: {
+  noun: string;
+  org?: string;
+  folder: string;
+  shape: string;
+  error?: string | null;
+}) {
+  const scoped = org && org !== "all" ? org : null;
+
+  return (
+    <div className={PANE}>
+      <div className={DOC}>
+        {error ? (
+          <>
+            <h2 className="text-lg font-medium text-gray-900">Couldn’t load {noun}</h2>
+            <p className="mt-2 text-sm leading-relaxed text-gray-600">{error}</p>
+          </>
+        ) : (
+          <>
+            <h2 className="text-lg font-medium text-gray-900">
+              No {noun}{scoped ? <> for <span className="font-mono text-[15px]">{scoped}</span></> : null} yet
+            </h2>
+            <p className="mt-2 text-sm leading-relaxed text-gray-600">{shape}</p>
+            <div className="mt-5 rounded-lg border border-gray-200 bg-gray-50 p-4">
+              <div className="text-[10px] font-semibold uppercase tracking-wider text-gray-500">
+                {scoped ? `Author one for ${scoped}` : "Author one"}
+              </div>
+              <div className="mt-1.5 font-mono text-[12.5px] text-gray-800">
+                {scoped ? `design/${scoped}/${folder}/` : `design/<org>/${folder}/`}
+              </div>
+              {/* THE OTHER TIER, said once and quietly. An org asset is private to that
+                  org; an unqualified one is universal and every client can install it.
+                  Which folder you choose IS that decision, so this is the moment to
+                  mention it and the only place that does. */}
+              <div className="mt-3 text-[11px] leading-relaxed text-gray-500">
+                Anything here belongs to {scoped ?? "one org"} alone. A {noun.replace(/s$/, "")} every
+                client should get goes in the universal tier instead, unqualified by an org.
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/screens/PromptBlocksView.tsx

@@ -16,6 +16,7 @@ import { fetchUnoverse } from "studio-host";
 import { usePersistentState, useRegistryToggles, ToggleSwitch } from "studio-host";
 import { IdentityHeader } from "./IdentityHeader";
 import { DOC, EMPTY, NAV, NAV_SECTION, PANE, SCREEN, navItem } from "./chrome";
+import { EmptyLibrary } from "./EmptyLibrary";
 
 interface PromptBlock {
   id: string;
@@ -25,6 +26,8 @@ interface PromptBlock {
   tags: string[];
   category?: string;
   enabled?: boolean;
+  /** The owning org (server-tagged); the universal marketplace tier has none. */
+  org?: string;
 }
 
 /** "spatial-search" → "spatialSearch" — the key used in `{{prompt.<key>}}`. */
@@ -32,25 +35,27 @@ function toCamelCase(str: string): string {
   return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
 }
 
-export function PromptBlocksView() {
+export function PromptBlocksView({ org = "all" }: { org?: string } = {}) {
   const [blocks, setBlocks] = useState<PromptBlock[]>([]);
   const [selected, setSelected] = usePersistentState<string | null>("wb:prompt-blocks:selected", null);
   const [error, setError] = useState<string | null>(null);
   const toggles = useRegistryToggles("prompt");
 
-  // Load the library once.
+  // Scoped to the org, the same contract as Components and Skills: "all" = universal +
+  // every org's, tagged; an org = universal + its own only (RX_ORG_MODEL: project-private).
   useEffect(() => {
-    fetchUnoverse("/prompt-blocks")
+    fetchUnoverse(`/prompt-blocks${org !== "all" ? `?org=${encodeURIComponent(org)}` : ""}`)
       .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
       .then((d) => {
         const list: PromptBlock[] = d.blocks ?? [];
         setBlocks(list);
+        // The remembered id may belong to an org this scope cannot see, hence the fallback.
         const restore = list.find((b) => b.id === selected) ?? list[0];
-        if (restore) setSelected(restore.id);
+        setSelected(restore ? restore.id : null);
       })
       .catch((e) => setError(String(e?.message ?? e)));
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [org]);
 
   const detail = useMemo(() => blocks.find((b) => b.id === selected) ?? null, [blocks, selected]);
 
@@ -61,17 +66,27 @@ export function PromptBlocksView() {
     }, {}),
   ).sort(([a], [b]) => a.localeCompare(b));
 
+  // NOTHING TO LIST is a whole-section state, not a line in the navigator: the pane says
+  // it, at a readable width, and the empty navigator beside it needs no words of its own.
+  if (blocks.length === 0) {
+    return (
+      <div className={SCREEN}>
+        <nav className={NAV} />
+        <EmptyLibrary
+          noun="prompt blocks"
+          org={org}
+          folder="blocks"
+          shape="A prompt block is a Markdown file. Agents pull one in with {{prompt.<name>}}."
+          error={error}
+        />
+      </div>
+    );
+  }
+
   return (
     <div className={SCREEN}>
       {/* NAVIGATOR */}
       <nav className={NAV}>
-        {blocks.length === 0 && (
-          <div className="p-2 text-xs text-gray-400">
-            {error
-              ? `Couldn't load prompt blocks (${error}).`
-              : "No prompt blocks. Add .md files to apps/unoverse/prompts/blocks/."}
-          </div>
-        )}
         {byCategory.map(([cat, items]) => (
           <div key={cat} className="mb-3">
             <div className={NAV_SECTION}>{cat}</div>
@@ -84,6 +99,10 @@ export function PromptBlocksView() {
                 <div className="flex items-center gap-1.5 text-sm font-medium">
                   {toggles.isEnabled(b.id) && <span className="h-1.5 w-1.5 rounded-full bg-emerald-400" title="Enabled" />}
                   {b.name}
+                  {/* WHOSE this is, same mark as Components and Skills. Untagged = the
+                      universal tier. An org's block and the universal one of that id
+                      render the same name, so the tag is the only difference on screen. */}
+                  {b.org ? <span className="text-[10px] text-emerald-500/80">{b.org}</span> : null}
                 </div>
                 <div className="truncate font-mono text-[11px] text-gray-500">{`{{prompt.${toCamelCase(b.id)}}}`}</div>
               </button>

package/screens/SkillsView.tsx

@@ -18,12 +18,15 @@ import { fetchUnoverse } from "studio-host";
 import { usePersistentState, useRegistryToggles, ToggleSwitch } from "studio-host";
 import { IdentityHeader } from "./IdentityHeader";
 import { DOC, EMPTY, NAV, NAV_SECTION, PANE, SCREEN, navItem } from "./chrome";
+import { EmptyLibrary } from "./EmptyLibrary";
 
 interface SkillSummary {
   /** The LOOKUP name, org-qualified where the skill lives under one. Round-trips verbatim. */
   name: string;
   /** What a person reads. Absent on a universe serving an older platform image. */
   title?: string;
+  /** The owning org (server-tagged); the universal marketplace tier has none. */
+  org?: string;
   description: string;
   version?: string;
   category?: string;
@@ -39,7 +42,7 @@ interface SkillDetail extends SkillSummary {
   contentHash: string;
 }
 
-export function SkillsView() {
+export function SkillsView({ org = "all" }: { org?: string } = {}) {
   const [skills, setSkills] = useState<SkillSummary[]>([]);
   const available = useRegistryToggles("skill");
   const [selected, setSelected] = usePersistentState<string | null>("wb:skills:selected", null);
@@ -47,20 +50,24 @@ export function SkillsView() {
   const [loadingDetail, setLoadingDetail] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  // Load the library list once.
+  // THE ORG SCOPE, the same contract ComponentsView uses: "all" = the universal tier +
+  // every org's, tagged; an org = the universal tier + that org's own only. A project's
+  // assets are project-private (RX_ORG_MODEL.md), so a Studio bound to one org must never
+  // list another's — which is exactly what it did until this argument existed.
   useEffect(() => {
-    fetchUnoverse("/skills")
+    fetchUnoverse(`/skills${org !== "all" ? `?org=${encodeURIComponent(org)}` : ""}`)
       .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
       .then((d) => {
         const list: SkillSummary[] = d.skills ?? [];
         setSkills(list);
-        // Restore the persisted selection across reloads; fall back to the first.
+        // Restore the persisted selection across reloads; fall back to the first. The
+        // remembered name may belong to an org this scope cannot see, hence the fallback.
         const restore = list.find((s) => s.name === selected) ?? list[0];
-        if (restore) setSelected(restore.name);
+        setSelected(restore ? restore.name : null);
       })
       .catch((e) => setError(String(e?.message ?? e)));
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [org]);
 
   // Load the full SKILL.md whenever the selection changes.
   useEffect(() => {
@@ -93,17 +100,27 @@ export function SkillsView() {
     }, {}),
   ).sort(([a], [b]) => a.localeCompare(b));
 
+  // NOTHING TO LIST is a whole-section state, not a line in the navigator. Same shape as
+  // Prompt Blocks, from the same component, so the two sections cannot drift apart again.
+  if (skills.length === 0) {
+    return (
+      <div className={SCREEN}>
+        <nav className={NAV} />
+        <EmptyLibrary
+          noun="skills"
+          org={org}
+          folder="skills"
+          shape="A skill is a folder holding a SKILL.md: how an Agent should behave in one situation."
+          error={error}
+        />
+      </div>
+    );
+  }
+
   return (
     <div className={SCREEN}>
       {/* NAVIGATOR */}
       <nav className={NAV}>
-        {skills.length === 0 && (
-          <div className="p-2 text-xs text-gray-400">
-            {error
-              ? `Couldn't load skills (${error}).`
-              : "No skills in the library. A skill is a folder holding a SKILL.md, under design/<org>/skills/."}
-          </div>
-        )}
         {byCategory.map(([cat, items]) => (
           <div key={cat} className="mb-3">
             <div className={NAV_SECTION}>{cat}</div>
@@ -115,6 +132,11 @@ export function SkillsView() {
               >
                 <div className="flex items-center gap-1.5 text-sm font-medium">
                   {s.title ?? s.name}
+                  {/* WHOSE this is. A mark, not a section, matching ComponentsView: the org
+                      tag says "yours"; untagged means the universal marketplace tier. Two
+                      orgs' copies of one skill render the SAME title, so without this the
+                      list shows what reads as a duplicate and names no difference. */}
+                  {s.org ? <span className="text-[10px] text-emerald-500/80">{s.org}</span> : null}
                 </div>
                 <div className="truncate text-[11px] text-gray-500">{s.description}</div>
               </button>
@@ -133,7 +155,9 @@ export function SkillsView() {
                 installed per workflow, in Canvas's Content Library. */}
             <IdentityHeader
               right={<ToggleSwitch on={available.isEnabled(selected)} onClick={() => available.toggle(selected)} label="Available" />}
-              name={detail?.name ?? selected}
+              // The LOOKUP name, not the frontmatter's bare one: it carries the org, and
+              // it is the identity every other surface addresses this skill by.
+              name={selected}
               category={detail?.category}
               version={detail?.version}
               description={detail?.description}

package/screens/TemplatesView.tsx

@@ -126,7 +126,15 @@ interface Def {
     // instances). Supersedes the legacy flat `previewComponents`.
     // Per-state mock: an ARRAY seeds components; an OBJECT is authored app-state
     // data (what the workflow would have echoed) merged verbatim on pick.
-    preview?: Record<string, string[] | Record<string, unknown>>;
+    // Array entries: instance seeds. Each item is a bare name (legacy: the picked
+    // state's chip decides the view) or the ENVELOPE form (UNOVERSE_INTERFACE_MODEL §3),
+    // a single-key object naming the component and carrying ITS OWN view + data:
+    //   preview: { page: [ { deal-list: { view: deals } }, { deal: { view: page } } ] }
+    // An envelope instance is never view-forced, so two instances can preview in two
+    // different slots — the thing the chip-driven mock could not say.
+    preview?:
+      | (string | Record<string, Record<string, unknown>>)[]
+      | Record<string, (string | Record<string, Record<string, unknown>>)[] | Record<string, unknown>>;
     previewComponents?: string[];
     fluidHeight?: boolean;
     // The app's named default state on load (the single authored field, OPEN name):
@@ -208,6 +216,10 @@ export function TemplatesView({
     useCallback(() => store.getVersion(), [store]),
   );
   const [seeded, setSeeded] = useState<string[]>([]);
+  /** THE CONTAINER TABS (UNOVERSE_INTERFACE_MODEL): per seeded interface — its instance
+   *  key, its PUBLIC states, and its current view — so the header draws one tab strip
+   *  per container showing the states of the interface it holds, not one app-level row. */
+  const [seededSpecs, setSeededSpecs] = useState<{ name: string; nodeId: string; states: string[]; container?: string }[]>([]);
   const [metaOpen, setMetaOpen] = usePersistentState<boolean>("wb:apps:meta", false); // MCP details panel
   const [copiedUri, setCopiedUri] = useState(false);
   const [version, setVersion] = useState(0); // local bump to reflect store changes in the toolbar
@@ -547,14 +559,40 @@ export function TemplatesView({
   // seeding always lands inline (the universal default), and the app's focus
   // state chip writes `focused` into the slice (the where-activation below), exactly
   // what a real arrival-in-focus or a component's own expand button would do.
-  function seed(comps: Def[]) {
+  /** One instance to mock: the def, plus (envelope form) its OWN view and data. A spec
+   *  with no view is a legacy seed: it lands inline and the state chip may move it. */
+  interface SeedSpec {
+    def: Def;
+    view?: string;
+    data?: Record<string, unknown>;
+    /** Envelope (object) entry: with no explicit view, the interface wakes in its OWN
+     *  first declared state — a bare legacy name still lands inline for the chip. */
+    envelope?: boolean;
+  }
+
+  /** A component's own arrival face. Served defs carry the COMPILED tree
+   *  (`initialView` + `publicStates`, definitions.ts); the raw tree is the fallback
+   *  for uncompiled shapes. */
+  const initialOf = (def: Def): string | undefined => {
+    const d = def as { initialView?: string; publicStates?: string[]; state?: { view?: { initial?: string; states?: Record<string, unknown> } } };
+    return d.initialView ?? d.publicStates?.[0] ?? d.state?.view?.initial ?? Object.keys(d.state?.view?.states ?? {})[0];
+  };
+
+  function seed(comps: SeedSpec[]) {
     // 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) => {
-      // 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
+    comps.forEach(({ def: c, view: declaredView, data, envelope }, i) => {
+      // An envelope interface with NO stated view wakes in its own arrival face —
+      // `- deal-list` just IS a deal list, in its first declared state, no ceremony.
+      const view = declaredView ?? (envelope ? initialOf(c) : undefined);
+      // STATE MODEL v2: for a LEGACY seed the PUBLIC AXIS never rides it — 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.
+      // An ENVELOPE seed (UNOVERSE_INTERFACE_MODEL §3) is the opposite by design: the
+      // instance ARRIVES with its own view, both spellings, exactly as a real moment
+      // would deliver it — and the chip never overrides it (the activation loop skips
+      // envelope instances).
       const { view: _v, defaultState: _d, ...restState } = ((c as { state?: Record<string, unknown> }).state ?? {}) as Record<string, unknown>;
       store.apply({
         type: "COMPONENT_INIT",
@@ -567,11 +605,31 @@ export function TemplatesView({
           // mock seed without it resolved bare `unoverse://components/<name>` and the
           // resolver rightly refused to guess between two orgs' clones.
           componentUrl: `unoverse://components/${c.org ? `${c.org}/` : ""}${c.name}`,
-          props: { ...defaultsOf(c), ...restState, defaultState: "inline" },
+          // ORDER MATTERS: prop DEFAULTS come after the flattened state scalars,
+          // because a projected axis (loadState) appears in BOTH — as the tree's first
+          // substate in state (its live arrival) and as a prop default (its preview) —
+          // and "the component's defaults ARE its preview" means the default wins here.
+          props: {
+            ...restState,
+            ...defaultsOf(c),
+            ...(data ?? {}),
+            ...(view ? { view, defaultState: view } : { defaultState: "inline" }),
+          },
         },
       });
     });
-    setSeeded(comps.map((c) => c.name));
+    setSeeded(comps.map((c) => c.def.name));
+    // The tab strips: one per seeded interface, filed under the container whose claim
+    // matches the state it was seeded into (no claim match → filed under its own name).
+    const cts = (selectedDef?.app as { containers?: Record<string, { claim?: { state?: string } }> } | undefined)?.containers;
+    setSeededSpecs(
+      comps.map(({ def: c, view: declaredView, envelope }, i) => {
+        const view = declaredView ?? (envelope ? initialOf(c) : undefined);
+        const states = ((c as { publicStates?: string[] }).publicStates ?? []).filter(Boolean);
+        const container = cts ? Object.keys(cts).find((k) => cts[k]?.claim?.state === view) : undefined;
+        return { name: c.name, nodeId: `${c.name}-${i}`, states, container };
+      }),
+    );
     setVersion((v) => v + 1);
   }
 
@@ -635,20 +693,64 @@ export function TemplatesView({
     //  • "hasMessages" / a component state / default → seed the mock conversation
     //  • { field, eq } (app-state selector, e.g. defaultState="focus") → set it after seeding
     // An explicit preview entry for the state OVERRIDES all of it — the author decided.
-    const previewMap = selectedDef?.app?.preview;
+    const rawPreview = selectedDef?.app?.preview;
+    const previewMap = rawPreview && !Array.isArray(rawPreview) ? rawPreview : undefined;
     // An OBJECT preview entry is authored APP-STATE mock data — what the workflow
     // would have echoed (comments, railState, an anchor) — merged as-is so a state's
     // pill previews with real content. Arrays keep the existing meaning: component seeds.
     const stateEntry = activeState ? previewMap?.[activeState.name] : undefined;
     const stateData = stateEntry && !Array.isArray(stateEntry) ? (stateEntry as Record<string, unknown>) : undefined;
-    const layoutEntry = activeLayout ? previewMap?.[activeLayout] : stateEntry;
+    // THE BASE ARRANGEMENT IS PREVIEWABLE TOO. Picking the default-layout pill sets
+    // `activeLayout` to null (that IS how "the base" is spelled here), so a
+    // `preview.<base>` entry used to be unreachable by construction and the base always
+    // previewed empty. That held while every base was a conversation — the app's own
+    // chrome, where seeding a component is noise — but a document-first app's base
+    // carries its component INLINE (the unmatched-view fallback), and it has to be
+    // authorable. An explicit entry is the author deciding, exactly as the comment
+    // above says; absent one, `stateEntry` is undefined and the old behaviour stands.
+    // `defaultLayout` rides the def ONLY for multi-layout apps (definitions.ts emits it
+    // with `def.layouts`, deliberately absent otherwise). A ONE-layout app names its base
+    // in the manifest's `layout`, so falling straight to "main" here made a single-
+    // arrangement app's `preview.<base>` entry unreachable and the mock seeded NOTHING.
+    const baseLayout = selectedDef?.defaultLayout ?? (selectedDef?.app as { layout?: string } | undefined)?.layout ?? "main";
+    // THE CONTAINER-MODEL FORM (UNOVERSE_INTERFACE_MODEL §5): an app with no states has
+    // no per-state keys to file a mock under — `preview:` is simply THE list of
+    // interfaces. A flat array is that app's one and only mock, whatever the pills say.
+    // CONTAINER PREVIEWS (UNOVERSE_INTERFACE_MODEL §4): each container mocks ITSELF —
+    // `preview: deal-list` under `rail: { claim: { state: deals } }` seeds a deal-list
+    // already IN `deals`. The claim supplies the state, so the author never writes one;
+    // an explicit state in the preview body still wins.
+    // A container names THE INTERFACE IT HOLDS (UNOVERSE_INTERFACE_MODEL §2, the PLACE
+    // verb); the interface's own defaults ARE its mock, seeded into the container's
+    // first state. Nothing else to author.
+    const containers = (selectedDef?.app as { containers?: Record<string, { states?: Record<string, { interface?: string; state?: string }>; interface?: string }> } | undefined)?.containers;
+    const publicStatesOf = (name: string): string[] => {
+      const hit = components.find((x) => x.name.toLowerCase() === name.toLowerCase());
+      return ((hit as { publicStates?: string[] } | undefined)?.publicStates ?? []).filter(Boolean);
+    };
+    const containerEntries = containers
+      ? Object.values(containers).flatMap((c): (string | Record<string, Record<string, unknown>>)[] => {
+          // Every state's interface seeds INTO ITS STATE: an explicit `state:` wins, else
+          // the container state's own NAME when the interface declares that face (the
+          // `page` state holds the deal in `page`), else the interface's own initial.
+          if (c.states)
+            return Object.entries(c.states).flatMap(([stName, st]): (string | Record<string, Record<string, unknown>>)[] => {
+              if (typeof st.interface !== "string" || !st.interface) return [];
+              const face = st.state ?? (publicStatesOf(st.interface).includes(stName) ? stName : undefined);
+              return [face ? { [st.interface]: { view: face } } : st.interface];
+            });
+          return typeof c.interface === "string" && c.interface ? [c.interface] : [];
+        })
+      : undefined;
+    const flatPreview = containerEntries?.length ? containerEntries : Array.isArray(rawPreview) ? rawPreview : undefined;
+    const layoutEntry = flatPreview ?? (activeLayout ? previewMap?.[activeLayout] : (stateEntry ?? previewMap?.[baseLayout]));
     const entry = Array.isArray(layoutEntry) ? layoutEntry : undefined;
     const wantEmpty = !entry && !activeLayout && typeof when === "string" && when === "isEmpty";
     // A COMPONENT is only seeded for a reaction-contract state (select.where) — the
     // surface needs one to grab (Focus). Plain app states (welcome, conversation)
     // preview the APP's own chrome; a component in the transcript there is noise.
     const wantComponent = Boolean(layoutSel) || Boolean((activeState?.where as { field?: string } | undefined)?.field);
-    let seededSet: Def[] = [];
+    let seededSet: SeedSpec[] = [];
     if (!wantEmpty) {
       // ORG-AWARE: names are unique only within a tier, so a bare preview ref must
       // resolve to the SELECTED APP's own org first, then the universal tier — never
@@ -658,10 +760,28 @@ export function TemplatesView({
         const hits = components.filter((c) => c.name.toLowerCase() === name.toLowerCase());
         return hits.find((c) => (c.org ?? "").toLowerCase() === appOrg) ?? hits.find((c) => !c.org) ?? hits[0];
       };
+      // An entry item is a bare NAME (legacy seed, chip-driven) or the ENVELOPE form:
+      // a single-key object naming the component and carrying its own view + data
+      // (UNOVERSE_INTERFACE_MODEL §3). Envelope instances arrive already in their view.
+      const toSpec = (item: string | Record<string, Record<string, unknown>>): SeedSpec | null => {
+        if (typeof item === "string") {
+          const def = byName(item);
+          // In the FLAT (container-model) list every entry is an envelope: a bare name
+          // wakes in its own arrival face. Only the keyed legacy form seeds inline for
+          // the state chip to move.
+          return def ? { def, ...(flatPreview ? { envelope: true } : {}) } : null;
+        }
+        const [name, body] = Object.entries(item ?? {})[0] ?? [];
+        if (!name) return null;
+        const def = byName(name);
+        if (!def) return null;
+        const { view, ...data } = (body ?? {}) as Record<string, unknown>;
+        return { def, envelope: true, ...(typeof view === "string" && view ? { view } : {}), ...(Object.keys(data).length ? { data } : {}) };
+      };
       const set = entry
-        ? entry.map(byName).filter((c): c is Def => Boolean(c))
+        ? entry.map(toSpec).filter((s): s is SeedSpec => Boolean(s))
         : wantComponent
-          ? seedSet(templates, components, selected)
+          ? seedSet(templates, components, selected).map((def): SeedSpec => ({ def }))
           : [];
       // Seed when there's preview content OR a picked state that needs a live conversation.
       if (set.length || activeState) {
@@ -676,7 +796,7 @@ export function TemplatesView({
         // 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;
+        seededSet = set.length ? set : sample.map((def): SeedSpec => ({ def }));
         seed(seededSet);
         // A mock preview is a FINISHED turn — complete it so streaming chrome
         // ("Writing…", dots) doesn't hang forever (mock has no settle watcher).
@@ -698,14 +818,20 @@ export function TemplatesView({
     // buttons perform.
     const whereSel = layoutSel ?? (activeState?.where as { field?: string; eq?: unknown } | undefined);
     if (whereSel?.field) {
-      // 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).
+      // Every LEGACY 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).
       // The public axis writes BOTH spellings (STATE_MODEL v2 alias: `view` shadows
       // `defaultState` in viewOf) so activation lands whichever the slice carries.
+      // An ENVELOPE instance is NEVER moved: it declared its own view, and forcing it
+      // would recreate the one-view-for-all mock the envelope form exists to retire
+      // (UNOVERSE_INTERFACE_MODEL §3, §7).
       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));
+      seededSet.forEach((c, i) => {
+        if (c.view) return;
+        store.mergeComponentState(chatIdFor(selected ?? "app"), `${c.def.name}-${i}`, data);
+      });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [store, selected, components, templates, live, activeState, activeLayout]);
@@ -770,7 +896,23 @@ export function TemplatesView({
               layout first, then each named layout. Picking one runs the SAME activation a
               reaction surface uses (its served `where` selector seeds a component into the
               view of that name), so the preview machinery needs zero special-casing. */}
-          {!live && selectedDef?.layouts && (
+          {!live && selectedDef?.layouts && (() => {
+            // THE PILL SHOWS THE APP'S ACTUAL STATE, NOT THE LAST ONE PICKED. `activeLayout`
+            // is a manual override — null means "let the app decide" — so highlighting off
+            // it made the row lie the moment a COMPONENT moved the app: tapping a card's
+            // View Details put the app in `page` while the row still read `card`, and the
+            // reaction contract looked broken when it was working.
+            // Derived through the SDK's own `resolveActiveLayout(def, store)` — byte for
+            // byte the call the renderer makes (app.tsx) — so the row and the stage can
+            // never disagree. `storeVersion` above already re-renders this chrome on every
+            // store write, which is exactly what a component's setValue is.
+            // `as never`: the same bridge the width calc below already uses for this
+            // exact call — the view's local `Def` is a structural subset of the SDK type.
+            const activeRoot = resolveActiveLayout(selectedDef as never, store);
+            const derived =
+              Object.entries(selectedDef.layouts ?? {}).find(([, node]) => node === activeRoot)?.[0] ??
+              (selectedDef.defaultLayout ?? "main");
+            return (
             <div className="flex items-center gap-1 rounded p-0.5 text-[11px]" style={{ background: theme.color["border.subtle"] }}>
               {[selectedDef.defaultLayout ?? "main",
                 // AUTHORED ORDER: the served states list is already stateOrder-ranked —
@@ -779,7 +921,7 @@ export function TemplatesView({
                 ...Object.keys(selectedDef.layouts).filter((n) => n !== (selectedDef.defaultLayout ?? "main") && !(selectedDef.states ?? []).some((s) => s.name === n)),
               ].map((n) => {
                 const isDefault = n === (selectedDef.defaultLayout ?? "main");
-                const on = isDefault ? !activeLayout : activeLayout === n;
+                const on = n === derived;
                 return (
                   <button
                     key={n}
@@ -799,7 +941,8 @@ export function TemplatesView({
                 );
               })}
             </div>
-          )}
+            );
+          })()}
           {/* AVAILABLE — the master switch (see ComponentsView for the two-level model).
               Studio offers; each canvas installs from what is offered. */}
           {selected && (
@@ -1112,6 +1255,31 @@ export function TemplatesView({
               <StreamedUnoverseApp
                 client={client}
                 store={store}
+                // THE CONTAINER'S OWN TABS (UNOVERSE_INTERFACE_MODEL §3): dev chrome drawn
+                // ON the container, never in the app header (that row was the legacy
+                // app-state pills). Inline styles — this renders inside the shadow root.
+                containerChrome={
+                  !live
+                    ? ({ states, active, set }) => (
+                          <div style={{ display: "flex", gap: 4, padding: "6px 8px", minHeight: 34, alignItems: "center", borderBottom: `1px solid ${theme.color["border.subtle"] ?? "#eee"}`, background: theme.color["surface.base"] ?? "#fff", flex: "0 0 auto" }}>
+                            {(states.length > 1 ? states : []).map((st) => (
+                              <button
+                                key={st}
+                                onClick={() => set(st)}
+                                style={{
+                                  border: "none", cursor: "pointer", borderRadius: 6, padding: "2px 10px",
+                                  fontSize: 12, fontWeight: 600, textTransform: "capitalize",
+                                  background: st === active ? (theme.color["surface.sunken"] ?? "#f2f2f4") : "transparent",
+                                  color: st === active ? (theme.color["text.primary"] ?? "#111") : (theme.color["text.tertiary"] ?? "#888"),
+                                }}
+                              >
+                                {st}
+                              </button>
+                            ))}
+                          </div>
+                        )
+                    : undefined
+                }
                 // The workflow can SELECT the app (WORKFLOW_STARTED metadata.app →
                 // store.activeApp); that overrides the manual pick. Loaded via the
                 // official resources/read unoverse://apps/{org}/{name}/definition.

package/src/App.tsx

@@ -197,11 +197,11 @@ function Shell() {
         ) : view === "tokens" ? (
           <DesignSystemView theme={theme} foundation={foundation} org={org} />
         ) : view === "skills" ? (
-          <SkillsView />
+          <SkillsView org={org} />
         ) : view === "nodes" ? (
           <NodesView />
         ) : (
-          <PromptBlocksView />
+          <PromptBlocksView org={org} />
         )}
       </main>
     </div>

package/vendor/sdk/lib/app.tsx

@@ -55,6 +55,11 @@ export interface StreamedUnoverseAppProps {
   props?: Record<string, unknown>;
   /** Render inside a Shadow DOM for full CSS isolation (default true). See UnoverseComponent. */
   isolate?: boolean;
+  /** DEV CHROME ON A CONTAINER (UNOVERSE_INTERFACE_MODEL §3): a host-supplied render
+   *  hook drawn ABOVE a Container's content — Studio uses it for per-container state
+   *  tabs. The SDK stays styleless: it hands the facts (name, the container's states,
+   *  the held interface's active state, a setter) and draws whatever comes back. */
+  containerChrome?: (info: { name: string; states: string[]; active?: string; set: (state: string) => void }) => ReactNode;
   /** The `voice` NATIVE SERVICE config (UNOVERSE_SPEC §2e-1). Present ONLY for a
    *  `service: "voice"` app — the host supplies the connection identity (apiUrl/wsUrl/
    *  token/session) it already holds; the renderer OWNS the service so every host is
@@ -72,7 +77,7 @@ const INERT_VOICE: UseVoiceServiceConfig = {
   session: { userId: "", conversationId: "", workflowId: "", targetTriggerNode: "" },
 };
 
-export function StreamedUnoverseApp({ client, store, uri, onAction, theme: themeProp, props, isolate = true, voice: voiceConfig }: StreamedUnoverseAppProps) {
+export function StreamedUnoverseApp({ client, store, uri, onAction, theme: themeProp, props, isolate = true, voice: voiceConfig, containerChrome }: StreamedUnoverseAppProps) {
   const [def, setDef] = useState<UnoverseDefinition | null>(null);
   const [error, setError] = useState<string | null>(null);
   // The voice native service lives HERE (shared), not in each host. Called every render
@@ -288,12 +293,61 @@ export function StreamedUnoverseApp({ client, store, uri, onAction, theme: theme
 
   // ComponentSlot — filter the timeline to matching component pointers (KeyService).
   const resolveSlot = (node: UnoverseNode, key?: React.Key): ReactNode => {
-    // ONE STATE AT A TIME: a reaction surface renders ONLY while its view IS the
-    // template's active state. Everything else is not part of this interface — its
-    // data is untouched and re-presents the moment its state is active again.
-    // Surfaces never stack; panel combinations cannot exist.
+    // A CONTAINER (UNOVERSE_INTERFACE_MODEL §3): the layout places it by NAME and owns
+    // its width; the manifest's `containers:` block owns its claim. Resolved here into
+    // the slot it is — one authoring word (`state`), translated to the wire key.
+    if (node.type === "Container") {
+      // A CONTAINER (UNOVERSE_INTERFACE_MODEL §3): its states each HOLD AN INTERFACE —
+      // the page state holds the deal, the chat state holds text-chat — and the tabs
+      // switch between them. The container's ACTIVE state is app chrome (`setAppValue`
+      // territory, the one thing an app owns), keyed `container:<name>`; the shorthand
+      // `interface:` is a one-state container and never draws tabs.
+      const cname = (node as { name?: string }).name ?? "";
+      const spec = (def as { containers?: Record<string, { states?: Record<string, { interface?: string; width?: string }>; interface?: string }> } | null)
+        ?.containers?.[cname];
+      const stateNames = spec?.states ? Object.keys(spec.states) : [];
+      const appState = store.getAppState() as Record<string, unknown>;
+      const active = (appState[`container:${cname}`] as string | undefined) ?? stateNames[0];
+      const heldInterface = spec?.states ? spec.states[active ?? ""]?.interface : spec?.interface;
+      // AN EMPTY STATE HOLDS NOTHING (`closed: {}` is a collapsed drawer): a declared
+      // container whose active state names no interface renders EMPTY — never a bare
+      // slot, which would grab every interface in the store and un-collapse the drawer.
+      const emptyState = Boolean(spec?.states) && !heldInterface;
+      node = {
+        ...node,
+        type: "ComponentSlot",
+        select: heldInterface
+          ? ({ type: heldInterface, limit: 1 } as never)
+          : emptyState
+            ? ({ limit: 0 } as never)
+            : (node.select ?? {}),
+      } as UnoverseNode;
+      if (containerChrome && spec) {
+        const set = (state: string) => store.mergeAppState({ [`container:${cname}`]: state });
+        const inner = node;
+        // THE STATE'S WIDTH: a container state may declare one (a collapsed drawer's slim
+        // edge). Resolved like every panel width (app-size name, else raw CSS); absent,
+        // the wrapper hugs the held interface, whose active state owns its size.
+        const declaredW = spec?.states?.[active ?? ""]?.width;
+        const stateW = declaredW ? (cssWidth(theme.appSize?.[declaredW] ?? declaredW) ?? declaredW) : undefined;
+        return (
+          <div key={key} style={{ display: "flex", flexDirection: "column", minHeight: 0, height: "100%", ...(stateW ? { width: stateW, flex: "0 0 auto", overflow: "hidden" } : {}) }}>
+            {containerChrome({ name: cname, states: stateNames, active, set })}
+            <div style={{ flex: 1, minHeight: 0, overflow: "auto" }}>{resolveSlot(inner, `${String(key ?? cname)}-inner`)}</div>
+          </div>
+        );
+      }
+    }
+    // DECLARE = REARRANGE, CLAIM = FILL (UNOVERSE_INTERFACE_MODEL §4). A claim on a
+    // DECLARED reaction state renders only while that view IS the app's active state:
+    // those surfaces are what the app rearranges around, and they never stack. A claim
+    // on an UNDECLARED view is a CONTAINER: it fills whenever an interface holds that
+    // view, independent of every other region — which is how a base arrangement holds
+    // a list and an open page at once. Until 2026-08-25 the gate applied to every
+    // claim, so a base layout's claimed regions could never fill at all.
     const claim = node.select?.where;
-    if (isViewField(claim?.field) && typeof claim?.eq === "string" && claim.eq !== surfacedView) {
+    const declaredClaim = typeof claim?.eq === "string" && (def?.stateOrder ?? []).includes(claim.eq);
+    if (isViewField(claim?.field) && typeof claim?.eq === "string" && declaredClaim && claim.eq !== surfacedView) {
       return node.fallback ? renderNode(node.fallback, {}, dispatch, theme, key ?? "fallback", undefined, def?.defs) : null;
     }
     const pointers = selectPointers(store, node);

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

@@ -299,7 +299,7 @@ export function resolveLatch(
 
 /** Resolve a ComponentSlot's `select` against the store → ordered pointers. */
 export function selectPointers(store: ComponentStore, node: UnoverseNode): string[] {
-  const sel = node.select ?? {};
+  const sel = (node.select ?? {}) as { from?: string; type?: string; where?: { field?: string; eq?: unknown; ne?: unknown }; limit?: number };
   let pointers =
     sel.from === "all"
       ? store.getResponses().flatMap((r) => r.components)
@@ -309,13 +309,21 @@ export function selectPointers(store: ComponentStore, node: UnoverseNode): strin
   // component whose own slice matches, ordered newest state-write first so `limit: 1`
   // = "most recent wins". The generic replacement for type-pinned surfaces — a
   // template reacts to whatever component enters the state, never to a named type.
+  // `type` — the PLACE claim (UNOVERSE_INTERFACE_MODEL §2): a container that names its
+  // interface holds it whatever state it is in. Placement, not reaction — the one case
+  // where selecting by definition name is the point rather than the anti-pattern.
+  if (sel.type) pointers = pointers.filter((p) => store.typeOf(p) === sel.type);
   if (sel.where) {
     const { field, eq, ne } = sel.where;
+    const within = (sel.where as { in?: unknown[] }).in;
     pointers = pointers.filter((p) => {
       const { chatId, nodeId } = store.split(p);
       const slice = store.get(chatId, nodeId) as Record<string, unknown>;
       // The public axis reads through the alias (view ?? defaultState); other fields raw.
-      const v = isViewField(field) ? viewOf(slice) : slice[field];
+      const v = isViewField(field) ? viewOf(slice) : field ? slice[field] : undefined;
+      // `in` — the container claim (UNOVERSE_INTERFACE_MODEL §3): a container with
+      // several states fills on any of them. Same closed condition set as visibleWhen.
+      if (Array.isArray(within)) return within.includes(v);
       return ne !== undefined ? v !== ne : v === eq;
     });
     pointers = [...pointers].sort((a, b) => store.touchOf(b) - store.touchOf(a));

package/vendor/sdk/lib/render.tsx

@@ -146,7 +146,7 @@ export function renderNode(
   if (node.type === "Orb") return <OrbView key={key} node={node} data={data} theme={theme} />;
   if (node.type === "Input") return <InputView key={key} node={node} data={data} theme={theme} onAction={onAction} />;
   if (node.type === "Markdown") return <MarkdownView key={key} node={node} data={data} theme={theme} />;
-  if (node.type === "ComponentSlot" || node.type === "Timeline") return slot ? slot(node, key) : null;
+  if (node.type === "ComponentSlot" || node.type === "Timeline" || node.type === "Container") return slot ? slot(node, key) : null;
 
   // `Ref` — REFERENCE, NOT COPY. The design system's shared pieces travel once and are
   // cached; a definition names one and specialises it here (core/refs.ts: `props` remap,