@unoverse-platform/studio 0.1.96 → 0.1.98

package/local/source.ts

@@ -14,13 +14,12 @@
  * install, and §Design-system resolution is what keeps the token contract stable.
  *
  * So the writable set is exactly the developer's own work:
- *   rx/<project>/**   every project listOrgs() reports, via projectDir()
- *   prompts/**        skills and prompt blocks
- *   nodes/**          their own node packages
+ *   design/<project>/**   every project listOrgs() reports, via projectDir(); their own
+ *                         node packages live inside it (design/<project>/nodes/)
  * Everything else is readable and not writable, the marketplace and anything resolved out
  * of node_modules included.
  *
- * See docs/architecture/LOCAL_STUDIO.md §Authoring in Studio.
+ * See docs/architecture/authoring/LOCAL_STUDIO.md §Authoring in Studio.
  */
 import { designHome } from "./design-home.mjs";
 import { resolve, sep, relative } from "path";
@@ -51,11 +50,7 @@ export function writableRoots(
   projectRoot: string,
   loaders: { listOrgs: () => string[]; projectDir: (name: string) => string },
 ): string[] {
-  const roots = [
-    ...loaders.listOrgs().map((org) => loaders.projectDir(org)),
-    resolve(projectRoot, "prompts"),
-    resolve(projectRoot, "nodes"),
-  ];
+  const roots = loaders.listOrgs().map((org) => loaders.projectDir(org));
   return roots.map((r) => resolve(r)).filter((r) => existsSync(r));
 }
 

package/package.json

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

package/screens/AgentsView.tsx

@@ -0,0 +1,173 @@
+/**
+ * Agents view — the Agents a project authored (docs.unoverse.ai/design/tasks). Left: a
+ * navigator. Right: the selected Agent's meta, its door, and the Available switch.
+ *
+ * An Agent is a workflow with no interface of its own, listed on the map so a conversation
+ * can reach for it: the one thing authored for the map alone (`design/<org>/agents/<name>.yaml`).
+ * Every other asset (a component, a template, an app) keeps its meta on its own manifest and
+ * its switch on its own lane. Switched on, all of them are tasks on the map.
+ */
+import { useEffect, useState } from "react";
+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 AgentItem {
+  /** `<org>/<name>`: the identity every registry row and toggle keys on. */
+  name: string;
+  org: string;
+  id: string;
+  title?: string;
+  description?: string;
+  whenToUse?: string;
+  instructions?: string;
+  skills?: string[];
+  category?: string;
+  version?: string;
+  message?: string;
+  /** The face while it runs. */
+  app: string;
+  /** The door. */
+  workflow?: string;
+  trigger?: string;
+  output?: string;
+  path: string;
+}
+
+const ACCENT = "#7c3aed";
+/** An Agent's mark: a bot's head, antenna up, two eyes. */
+const AGENT_ICON = `data:image/svg+xml;utf8,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="${ACCENT}" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="9" width="16" height="11" rx="3"/><path d="M12 9V5"/><circle cx="12" cy="4" r="1.2" fill="${ACCENT}"/><circle cx="9" cy="14.5" r="1.3" fill="${ACCENT}" stroke="none"/><circle cx="15" cy="14.5" r="1.3" fill="${ACCENT}" stroke="none"/><path d="M2 13v4M22 13v4"/></svg>`)}`;
+
+export function AgentsView({ org = "all" }: { org?: string } = {}) {
+  const [agents, setAgents] = useState<AgentItem[]>([]);
+  const available = useRegistryToggles("agent");
+  const [selected, setSelected] = usePersistentState<string | null>("wb:agents:selected", null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetchUnoverse(`/dev/agents${org !== "all" ? `?org=${encodeURIComponent(org)}` : ""}`)
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
+      .then((d) => {
+        const list: AgentItem[] = d.items ?? [];
+        setAgents(list);
+        const restore = list.find((a) => a.name === selected) ?? list[0];
+        setSelected(restore ? restore.name : null);
+      })
+      .catch((e) => setError(String(e?.message ?? e)));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [org]);
+
+  const detail = agents.find((a) => a.name === selected) ?? null;
+
+  const byCategory = Object.entries(
+    agents.reduce<Record<string, AgentItem[]>>((acc, a) => {
+      (acc[a.category ?? "Uncategorized"] ??= []).push(a);
+      return acc;
+    }, {}),
+  ).sort(([a], [b]) => a.localeCompare(b));
+
+  if (agents.length === 0) {
+    return (
+      <div className={SCREEN}>
+        <nav className={NAV} />
+        <EmptyLibrary
+          noun="agents"
+          org={org}
+          folder="agents"
+          shape="An Agent is one YAML file: a workflow with no interface, listed for the map with its selection text and its door (a canvas, its Input Trigger, the output node)."
+          error={error}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className={SCREEN}>
+      {/* NAVIGATOR */}
+      <nav className={NAV}>
+        {byCategory.map(([cat, items]) => (
+          <div key={cat} className="mb-3">
+            <div className={NAV_SECTION}>{cat}</div>
+            {items.map((a) => (
+              <button
+                key={a.name}
+                onClick={() => setSelected(a.name)}
+                className={`block w-full rounded px-2 py-1.5 text-left transition ${navItem(selected === a.name)}`}
+              >
+                <div className="flex min-w-0 items-baseline gap-2 text-sm font-medium">
+                  <span className="min-w-0 flex-1 truncate">{a.title ?? a.id}</span>
+                  <span className="shrink-0 text-[10px] text-gray-500">{a.org}</span>
+                </div>
+                <div className="truncate text-[11px] text-gray-500">{a.description}</div>
+              </button>
+            ))}
+          </div>
+        ))}
+      </nav>
+
+      {/* DETAIL */}
+      <div className={PANE}>
+        {!selected || !detail ? (
+          <div className={EMPTY}>Select an Agent</div>
+        ) : (
+          <div className={DOC}>
+            {/* AVAILABLE — the master switch. Which canvases actually carry this Agent is
+                installed per workflow, in Canvas's Content Library. */}
+            <IdentityHeader
+              right={<ToggleSwitch on={available.isEnabled(selected)} onClick={() => available.toggle(selected)} label="Available" />}
+              logoUrl={AGENT_ICON}
+              accent={ACCENT}
+              name={selected}
+              category={detail.category}
+              version={detail.version}
+              description={detail.description}
+              whenToUse={detail.whenToUse}
+            />
+            <p className="mb-3 text-[11px] text-gray-500">Available means canvases may install this Agent. Which ones actually have it is chosen per workflow, in Canvas’s Content Library.</p>
+
+            {detail.instructions && (
+              <>
+                <div className="mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-500">What to do</div>
+                <pre className="mb-5 overflow-x-auto whitespace-pre-wrap rounded-lg border border-gray-200 bg-gray-50 p-4 font-mono text-[12.5px] leading-relaxed text-gray-800">{detail.instructions}</pre>
+              </>
+            )}
+            {detail.skills && detail.skills.length > 0 && (
+              <>
+                <div className="mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-500">Skills required</div>
+                <div className="mb-5 flex flex-wrap gap-1.5">
+                  {detail.skills.map((s) => (
+                    <span key={s} className="rounded-full bg-gray-900/5 px-2 py-0.5 text-[11px] text-gray-600">{s}</span>
+                  ))}
+                </div>
+              </>
+            )}
+
+            <div className="mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-500">Door</div>
+            <dl className="mb-5 grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 rounded-lg border border-gray-200 bg-gray-50 p-4 font-mono text-[12px] text-gray-800">
+              <dt className="text-gray-500">workflow</dt>
+              <dd>{detail.workflow}</dd>
+              <dt className="text-gray-500">trigger</dt>
+              <dd>{detail.trigger}</dd>
+              <dt className="text-gray-500">output</dt>
+              <dd>{detail.output}</dd>
+              <dt className="text-gray-500">face</dt>
+              <dd className="break-all">{detail.app}</dd>
+              {detail.message && (
+                <>
+                  <dt className="text-gray-500">message</dt>
+                  <dd>{detail.message}</dd>
+                </>
+              )}
+              <dt className="text-gray-500">input schema</dt>
+              <dd>the Input Trigger's, on the canvas</dd>
+              <dt className="text-gray-500">file</dt>
+              <dd>{detail.path}</dd>
+            </dl>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/screens/ComponentsView.tsx

@@ -613,9 +613,9 @@ export function ComponentsView({ theme, org = "all" }: { theme: ResolvedTheme; o
                   color: metaOpen ? theme.color["text.primary"] : theme.color["text.secondary"],
                   background: metaOpen ? theme.color["surface.sunken"] : "transparent",
                 }}
-                title="Show the component's manifest (spatial discovery meta)"
+                title="Show the component's manifest: its meta and its arrival"
               >
-                ⓘ Meta <span className="opacity-60">{metaOpen ? "▴" : "▾"}</span>
+                ⓘ Manifest <span className="opacity-60">{metaOpen ? "▴" : "▾"}</span>
               </button>
             )}
 

package/screens/EmptyLibrary.tsx

@@ -11,7 +11,7 @@
  * 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
+ * `apps/unoverse/design/marketplace/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.
  */

package/screens/IdentityHeader.tsx

@@ -75,7 +75,7 @@ export function IdentityHeader({
         {id && <div className="mt-0.5 font-mono text-[11px] text-gray-400">{id}</div>}
         {description && <p className="mt-1 max-w-3xl text-sm leading-relaxed text-gray-600">{description}</p>}
         {whenToUse && (
-          <div className="mt-2 max-w-3xl rounded-r py-1.5 pl-3" style={{ borderLeft: `3px solid ${accent}`, background: "#f3f4f6" }}>
+          <div className="mt-2 max-w-3xl rounded-lg px-3 py-2" style={{ background: "#f3f4f6" }}>
             <div className="mb-0.5 text-[10px] font-semibold uppercase tracking-wider" style={{ color: accent }}>
               When to use
             </div>

package/screens/IdentityView.tsx

@@ -0,0 +1,206 @@
+/**
+ * Identity view — the org's four documents (organisation, brand, purpose, story) as the
+ * pack holds them: design/<org>/identity/<doc>.yaml. Left: a navigator, one group per org
+ * (or the one org this Studio is bound to). Right: the selected document's manifest words,
+ * then each prop with its brief and its default, the org's own words.
+ *
+ * READ-ONLY, like Skills: the documents are authored in the pack (the create skill fills
+ * them from the org's own sources) and published with it. The one control is the same
+ * master switch every other kind has: Available puts a document in the spatial catalogue,
+ * and each canvas installs it from there. The Organisation's switch is the grounding: on,
+ * every run as this org wakes with it; it never sits on the map
+ * (docs/unoverse/data/objects/elements/organisation.md).
+ *
+ * Shared by both Studios (packages/studio/screens); the host supplies fetch + toggles.
+ */
+import { useEffect, useMemo, useState } from "react";
+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 IdentityProp {
+  name: string;
+  type: string;
+  description: string;
+  maxLength?: number;
+  maxItems?: number;
+  default: unknown;
+}
+
+interface IdentityItem {
+  /** The registry name, `<org>/<doc>`: the same word every other surface addresses it by. */
+  name: string;
+  org: string;
+  doc: "organisation" | "brand" | "purpose" | "story";
+  manifest: { title?: string; description?: string; whenToUse?: string; category?: string; version?: string };
+  props: IdentityProp[];
+  path: string;
+}
+
+const ORDER = ["organisation", "brand", "purpose", "story"] as const;
+const isEmpty = (v: unknown): boolean => v == null || (typeof v === "string" && !v.trim()) || (Array.isArray(v) && v.length === 0);
+
+function Value({ value }: { value: unknown }) {
+  if (isEmpty(value)) return <div className="rounded-lg border border-dashed border-gray-200 px-4 py-3 text-[13px] italic text-gray-400">Not written yet.</div>;
+  if (typeof value === "string") return <p className="whitespace-pre-wrap text-[15px] leading-7 text-gray-900">{value}</p>;
+  if (Array.isArray(value)) return <Tree items={value} />;
+  return <pre className="rounded-lg bg-gray-50 p-3 text-xs text-gray-700">{JSON.stringify(value, null, 2)}</pre>;
+}
+
+function Tree({ items, depth = 0 }: { items: unknown[]; depth?: number }) {
+  if (items.every((it) => typeof it === "string")) {
+    return (
+      <ul className="space-y-2">
+        {items.map((it, i) => (
+          <li key={i} className="flex gap-3 text-[15px] leading-7 text-gray-900">
+            <span className="mt-[11px] h-1.5 w-1.5 shrink-0 rounded-full bg-gray-300" />
+            <span>{String(it)}</span>
+          </li>
+        ))}
+      </ul>
+    );
+  }
+  return (
+    <div className={depth ? "ml-5 mt-2" : "divide-y divide-gray-100 rounded-xl border border-gray-200"}>
+      {items.map((it, i) => {
+        const o = (it ?? {}) as Record<string, unknown>;
+        const kids = (o.units ?? o.goals ?? o.brands) as unknown[] | undefined;
+        const sentence = (o.what ?? o.why) as string | undefined;
+        return (
+          <div key={i} className={depth ? "py-2" : "px-4 py-3"}>
+            <div className="text-[14px] font-semibold text-gray-900">{String(o.name ?? "")}</div>
+            {sentence ? <div className="mt-0.5 text-[13.5px] leading-6 text-gray-600">{sentence}</div> : null}
+            {Array.isArray(kids) && kids.length > 0 ? <Tree items={kids} depth={depth + 1} /> : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+/** One prop: its name, the value set as reading text, and the brief behind a small toggle. */
+function Field({ prop }: { prop: IdentityProp }) {
+  const [brief, setBrief] = useState(false);
+  const limit = prop.maxItems ? `up to ${prop.maxItems}` : prop.maxLength ? `up to ${prop.maxLength} characters` : "";
+  return (
+    <section className="py-6 first:pt-0 last:pb-0">
+      <div className="mb-2 flex items-baseline justify-between gap-4">
+        <h3 className="text-[11px] font-semibold uppercase tracking-[0.12em] text-gray-500">{prop.name}</h3>
+        {prop.description ? (
+          <button type="button" onClick={() => setBrief((b) => !b)} className={`text-[11px] font-medium transition ${brief ? "text-indigo-600" : "text-gray-400 hover:text-gray-600"}`}>
+            {brief ? "Hide the brief" : "Brief"}
+          </button>
+        ) : null}
+      </div>
+      {brief && prop.description ? (
+        <div className="mb-3 rounded-lg border border-indigo-100 bg-indigo-50/60 px-4 py-3 text-[12.5px] leading-relaxed text-indigo-900">
+          {prop.description}
+          {limit ? <div className="mt-1.5 text-[11px] text-indigo-500">{limit}</div> : null}
+        </div>
+      ) : null}
+      <Value value={prop.default} />
+    </section>
+  );
+}
+
+export function IdentityView({ org = "all" }: { org?: string } = {}) {
+  const [items, setItems] = useState<IdentityItem[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [selected, setSelected] = usePersistentState<string | null>("wb:identity:selected", null);
+  const available = useRegistryToggles("identity");
+
+  useEffect(() => {
+    fetchUnoverse(`/dev/identity${org !== "all" ? `?org=${encodeURIComponent(org)}` : ""}`)
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
+      .then((d) => {
+        const list: IdentityItem[] = d.items ?? [];
+        setItems(list);
+        const restore = list.find((i) => i.name === selected) ?? list[0];
+        setSelected(restore ? restore.name : null);
+      })
+      .catch((e) => setError(String(e?.message ?? e)));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [org]);
+
+  const byOrg = useMemo(
+    () =>
+      Object.entries(
+        items.reduce<Record<string, IdentityItem[]>>((acc, i) => {
+          (acc[i.org] ??= []).push(i);
+          return acc;
+        }, {}),
+      )
+        .sort(([a], [b]) => a.localeCompare(b))
+        .map(([o, docs]) => [o, [...docs].sort((a, b) => ORDER.indexOf(a.doc) - ORDER.indexOf(b.doc))] as const),
+    [items],
+  );
+  const current = items.find((i) => i.name === selected) ?? null;
+
+  if (items.length === 0) {
+    return (
+      <div className={SCREEN}>
+        <nav className={NAV} />
+        <EmptyLibrary
+          noun="identity documents"
+          org={org}
+          folder="identity"
+          shape="identity/ holds four files: organisation, brand, purpose and story, each an instance of its marketplace object, carrying the org's own words as defaults. The briefs are the object's."
+          error={error}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className={SCREEN}>
+      <nav className={NAV}>
+        {byOrg.map(([o, docs]) => (
+          <div key={o} className="mb-3">
+            <div className={NAV_SECTION}>{o}</div>
+            {docs.map((d) => (
+              <button key={d.name} onClick={() => setSelected(d.name)} className={`block w-full rounded px-2 py-1.5 text-left transition ${navItem(selected === d.name)}`}>
+                <div className="text-sm font-medium">{d.manifest.title ?? d.doc}</div>
+                <div className="truncate text-[11px] text-gray-500">{d.manifest.description}</div>
+              </button>
+            ))}
+          </div>
+        ))}
+      </nav>
+
+      <div className={PANE}>
+        {!current ? (
+          <div className={EMPTY}>Select a document</div>
+        ) : (
+          <div className={DOC}>
+            <IdentityHeader
+              name={current.name}
+              category={current.manifest.category}
+              version={current.manifest.version}
+              id={`design/${current.org}/${current.path}`}
+              description={current.manifest.description}
+              whenToUse={current.manifest.whenToUse}
+              right={<ToggleSwitch on={available.isEnabled(current.name)} onClick={() => available.toggle(current.name)} label={current.doc === "organisation" ? "Grounding" : "Available"} />}
+            />
+            <p className="mb-6 text-[12px] leading-relaxed text-gray-500">
+              {current.doc === "organisation"
+                ? "Grounding on means every extraction and every Agent that runs as this org reads this document whole: its what and its vocabulary. Off, the org grounds on nothing."
+                : "Available puts this document in the spatial catalogue. Which maps carry it is chosen per canvas, in Canvas’s Content Library."}
+              {" "}Written in the pack; the create skill fills it from the org’s own sources.
+            </p>
+            <p className="mb-6 text-[11px] text-gray-500">
+              Reference in a prompt as <span className="font-mono text-gray-600">{`{{identity.${current.doc}}}`}</span> for the whole document
+              {current.props[0] ? <>, or one field as <span className="font-mono text-gray-600">{`{{identity.${current.doc}.${current.props[0].name}}}`}</span></> : null}.
+              Every document at once is <span className="font-mono text-gray-600">{"{{identity}}"}</span>.
+            </p>
+
+            <div className="divide-y divide-gray-100">
+              {current.props.map((p) => <Field key={p.name} prop={p} />)}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/screens/PromptBlocksView.tsx

@@ -1,6 +1,6 @@
 /**
  * Prompt-blocks view — browse the reusable prompt-snippet library
- * (apps/unoverse/prompts/blocks) served by the Unoverse server's /prompt-blocks
+ * (apps/unoverse/design/marketplace/blocks) served by the Unoverse server's /prompt-blocks
  * route. Left: a navigator of blocks grouped by category. Right: the selected block's
  * metadata + full markdown content, with an enable toggle.
  *

package/screens/SourceView.tsx

@@ -19,7 +19,7 @@
  * lost on the next install, and the design system is what keeps the token contract stable.
  * The verdict is the host's, never a rule reimplemented here.
  *
- * See docs/architecture/LOCAL_STUDIO.md §Authoring in Studio.
+ * See docs/architecture/authoring/LOCAL_STUDIO.md §Authoring in Studio.
  */
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Compartment, EditorState } from "@codemirror/state";

package/screens/TemplatesLibraryView.tsx

@@ -17,7 +17,7 @@
  * NOT TemplatesView.tsx: that name is taken by the Apps screen (the legacy noun).
  */
 import { useEffect, useMemo, useState, useSyncExternalStore, useCallback, type MouseEvent as ReactMouseEvent } from "react";
-import { ComponentStore, StreamedUnoverseApp, type ResolvedTheme } from "@unoverse/sdk";
+import { ComponentStore, UnoverseComponent, type ResolvedTheme } from "@unoverse/sdk";
 import { client, authedFetch, usePersistentState, useRegistryToggles, ToggleSwitch } from "studio-host";
 import { NAV, SCREEN, navItem } from "./chrome";
 
@@ -68,6 +68,13 @@ interface TemplateDef {
 }
 
 const PREVIEW_CHAT = "preview";
+/** THE TEMPLATE ITSELF, as ONE INSTANCE (TEMPLATE_MODEL §5d, ruled 2026-09-06). A template
+ *  that streams in is an instance that draws itself: its ✕ and its inline chip write ITS
+ *  state, and its root Switch draws the layout that face names. The preview used to render
+ *  the template as an APP over the store, where those writes have no slice and are inert
+ *  (app.tsx: "template chrome has NO component slice"). Now it renders the same instance
+ *  the runtime renders. */
+const TEMPLATE_NODE = "~template";
 
 const VIEWPORTS: { id: string; label: string; w: number | null }[] = [
   { id: "mobile", label: "Mobile", w: 390 },
@@ -155,6 +162,31 @@ export function TemplatesLibraryView({ theme, org }: { theme: ResolvedTheme; org
   const current = templates.find((t) => refOf(t) === selected);
   const uri = useMemo(() => (current ? `unoverse://templates/${refOf(current)}` : ""), [current]);
 
+  // COPY FOR CANVAS — the same clipboard payload ComponentsView writes (gravity-workflow,
+  // the shape the canvas's own Cmd+C emits), so Cmd+V on any canvas pastes this template as
+  // the ONE generic `Component` node. The server synthesizes templates into that node beside
+  // the components (runtime/components/meta.ts, "templates synthesize too", §9c): selected by
+  // `config.component`, rendered at its own home (unoverse://templates/<ref>) through the
+  // node's componentUrls map, and filled through the node's MCP port — an Agent wired to it
+  // reads the briefs and fills every `input: true` part. Identity only in config, never the
+  // mock values: the fills come from the delivery, and a copied mock would freeze into the
+  // workflow. Width 768, the tablet stage this view designs at; height hugs the render.
+  const [copiedForCanvas, setCopiedForCanvas] = useState(false);
+  const copyForCanvas = async () => {
+    if (!current) return;
+    const node = {
+      id: `${current.name.toLowerCase()}1`,
+      type: "Component",
+      position: { x: 0, y: 0 },
+      data: { label: current.title ?? current.name, status: "ready", config: { component: refOf(current) } },
+      style: { width: 768 },
+      draggable: true,
+    };
+    await navigator.clipboard.writeText(JSON.stringify({ type: "gravity-workflow", version: 2, nodes: [node], edges: [] }, null, 2));
+    setCopiedForCanvas(true);
+    setTimeout(() => setCopiedForCanvas(false), 1600);
+  };
+
   // REAL INSTANCES, fresh per selection (the Components screen's own pattern): the
   // manifest's preview refs seed the store, and from there the standard runtime owns
   // everything — a tap re-faces an instance, the name-matched layout surfaces, its
@@ -199,6 +231,17 @@ export function TemplatesLibraryView({ theme, org }: { theme: ResolvedTheme; org
       store.apply({ type: "COMPONENT_INIT", chatId: PREVIEW_CHAT, nodeId, component: { type: ref, props: seed ?? {} } });
       if (face) store.mergeComponentState(PREVIEW_CHAT, nodeId, { state: face });
     }
+    // THE TEMPLATE ITSELF, wearing its base face. The server-sent address is the
+    // templates URI, so the instance resolves the template definition, not a component.
+    const ref = refOf(current);
+    store.apply({
+      type: "COMPONENT_INIT",
+      chatId: PREVIEW_CHAT,
+      nodeId: TEMPLATE_NODE,
+      component: { type: ref, componentUrl: `unoverse://templates/${ref}`, props: {} },
+    });
+    const base = current.defaultLayout ?? (current.layouts ? Object.keys(current.layouts)[0] : undefined);
+    if (base) store.mergeComponentState(PREVIEW_CHAT, TEMPLATE_NODE, { state: base });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [store, current]);
 
@@ -210,13 +253,25 @@ export function TemplatesLibraryView({ theme, org }: { theme: ResolvedTheme; org
     useCallback(() => store.getStructureVersion(), [store]),
   );
   const shapeNames = current?.layouts ? Object.keys(current.layouts) : [];
+  // TWO WAYS A TEMPLATE REACHES A SCREEN (TEMPLATE_MODEL §5d). One HOLDS things: its state
+  // is entered by what arrives into it (a card writing itself into `page`), so the face is
+  // derived from the items it holds — a MOUNT. The other IS the thing: a whole-surface task
+  // with nothing browsed, whose own ✕ and chip write its own state. Which one is a fact of
+  // the template: does its base arrangement seed any items?
+  const holdsItems = useMemo(() => seeds.some((sd) => !sd.framed), [seeds]);
   const activeState = useMemo(() => {
     void storeVersion;
+    if (!holdsItems) {
+      const own = store.get(PREVIEW_CHAT, TEMPLATE_NODE) as Record<string, unknown> | undefined;
+      const face = own?.state ?? own?.view ?? own?.defaultState;
+      return typeof face === "string" && shapeNames.includes(face) ? face : (shapeNames[0] ?? "");
+    }
     for (const name of shapeNames.slice(1)) {
       const hit = store
         .getResponses()
         .some((r) => r.components.some((p) => {
           const { chatId, nodeId } = store.split(p);
+          if (nodeId === TEMPLATE_NODE) return false;
           const slice = store.get(chatId, nodeId) as Record<string, unknown> | undefined;
           return (slice?.state ?? slice?.view ?? slice?.defaultState) === name;
         }));
@@ -224,7 +279,16 @@ export function TemplatesLibraryView({ theme, org }: { theme: ResolvedTheme; org
     }
     return shapeNames[0] ?? "";
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [storeVersion, store, current]);
+  }, [storeVersion, store, current, holdsItems]);
+  // A MOUNT'S FACE IS DERIVED, and the instance's root Switch draws by ITS state, so the
+  // derivation is mirrored onto the instance: a card tapping into `page` turns the page
+  // shape, exactly as the mount would. A self-faced template needs no mirror — its own
+  // state IS the derivation above.
+  useEffect(() => {
+    if (!holdsItems || !activeState) return;
+    const own = store.get(PREVIEW_CHAT, TEMPLATE_NODE) as Record<string, unknown> | undefined;
+    if ((own?.state ?? own?.view ?? own?.defaultState) !== activeState) store.mergeComponentState(PREVIEW_CHAT, TEMPLATE_NODE, { state: activeState });
+  }, [store, holdsItems, activeState]);
 
   // GROUPED BY CATEGORY, exactly as Components groups its rail — the shelf is no longer a
   // flat list the moment small templates land on it (the `Blocks` shelf: pair, feature,
@@ -311,9 +375,23 @@ export function TemplatesLibraryView({ theme, org }: { theme: ResolvedTheme; org
                   color: metaOpen ? theme.color["text.primary"] : theme.color["text.secondary"],
                   background: metaOpen ? theme.color["surface.sunken"] : "transparent",
                 }}
-                title="Show the template's manifest (spatial discovery meta)"
+                title="Show the template's manifest: its meta"
               >
-                ⓘ Meta <span className="opacity-60">{metaOpen ? "▴" : "▾"}</span>
+                ⓘ Manifest <span className="opacity-60">{metaOpen ? "▴" : "▾"}</span>
+              </button>
+            )}
+            {current && (
+              <button
+                onClick={copyForCanvas}
+                className="rounded border px-2 py-0.5 text-[11px] font-medium transition"
+                style={{
+                  borderColor: theme.color["border.subtle"],
+                  color: copiedForCanvas ? theme.color["text.primary"] : theme.color["text.secondary"],
+                  background: copiedForCanvas ? theme.color["surface.sunken"] : "transparent",
+                }}
+                title="Copy this template as a canvas node — paste (Cmd+V) on any workflow canvas; wire an Agent to its port to fill it"
+              >
+                {copiedForCanvas ? "✓ Copied — paste on canvas" : "⧉ Copy for Canvas"}
               </button>
             )}
             {shapeNames.length > 1 && (
@@ -337,10 +415,17 @@ export function TemplatesLibraryView({ theme, org }: { theme: ResolvedTheme; org
                         // detail shape surfaced with nothing in it. Slots with an
                         // authored `state:` are skipped, and the detail pill opens
                         // the first ITEM.
+                        // A SELF-FACED TEMPLATE (a task: nothing browsed) is one instance,
+                        // and the pill writes ITS state — the same write its own chip and
+                        // ✕ make. A mount's pill re-faces the items it holds, below.
+                        if (!holdsItems) {
+                          store.mergeComponentState(PREVIEW_CHAT, TEMPLATE_NODE, { state: name });
+                          return;
+                        }
                         const items = store
                           .getResponses()
                           .flatMap((r) => r.components)
-                          .filter((ptr) => !framedIds.has(store.split(ptr).nodeId));
+                          .filter((ptr) => { const n = store.split(ptr).nodeId; return n !== TEMPLATE_NODE && !framedIds.has(n); });
                         for (const [j, ptr] of items.entries()) {
                           const { chatId, nodeId } = store.split(ptr);
                           const slice = store.get(chatId, nodeId) as Record<string, unknown> | undefined;
@@ -419,7 +504,7 @@ export function TemplatesLibraryView({ theme, org }: { theme: ResolvedTheme; org
 
           <div className="flex-1 overflow-auto p-10">
             <div className="mx-auto max-w-full transition-[width] duration-200" style={{ width: stageWidth ?? "100%" }}>
-              {uri && <StreamedUnoverseApp key={uri} client={client} store={store} uri={uri} theme={theme} />}
+              {uri && <UnoverseComponent key={uri} client={client} store={store} chatId={PREVIEW_CHAT} nodeId={TEMPLATE_NODE} theme={theme} />}
             </div>
           </div>
         </section>