@unoverse-platform/studio 0.1.97 → 0.1.99

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/IdentityView.tsx

@@ -1,6 +1,6 @@
 /**
  * Identity view — the org's four documents (organisation, brand, purpose, story) as the
- * pack holds them: design/<org>/identity/<doc>/. Left: a navigator, one group per org
+ * 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.
  *
@@ -9,7 +9,7 @@
  * 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/edgy/elements/organisation.md).
+ * (docs/unoverse/data/objects/elements/organisation.md).
  *
  * Shared by both Studios (packages/studio/screens); the host supplies fetch + toggles.
  */
@@ -146,7 +146,7 @@ export function IdentityView({ org = "all" }: { org?: string } = {}) {
           noun="identity documents"
           org={org}
           folder="identity"
-          shape="identity/ holds four definitions: organisation, brand, purpose and story, each a manifest and a document whose props carry the brief and the org's own words."
+          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>

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/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>

package/screens/TemplatesView.tsx

@@ -647,7 +647,11 @@ export function TemplatesView({
             ...restState,
             ...defaultsOf(c),
             ...(data ?? {}),
-            ...(view ? { view, defaultState: view } : { defaultState: "inline" }),
+            // ALL THREE SPELLINGS, as the activation below writes them: `state` is the ruled
+            // public-axis word (2026-08-29) and what a synthesized `Switch on: state` reads;
+            // with only the legacy two, the ladder placed a deal in the grid while the deal
+            // drew its FIRST face (observed 2026-09-11: list tiles inside a grid).
+            ...(view ? { state: view, view, defaultState: view } : { defaultState: "inline" }),
           },
         },
       });
@@ -815,19 +819,30 @@ export function TemplatesView({
       // 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 => {
+        // THE HASH NAMES THE STATE IT OPENS IN (STATE_MODEL rule 3; owner 2026-09-11: a
+        // preview is written `deal#grid`, the same address grammar as everywhere else).
+        // Split ONCE, for both forms: a mount state wraps each name as `{ "deal#grid": {} }`
+        // before it gets here, so the split lives beside the lookup, not on one branch.
+        const split = (ref: string): [string, string | undefined] => {
+          const [name, hash] = ref.split("#");
+          return [name, hash || undefined];
+        };
         if (typeof item === "string") {
-          const def = byName(item);
+          const [name, hash] = split(item);
+          const def = byName(name);
           // 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;
+          // the state chip to move. A hash seeds the instance's own view, as an envelope.
+          return def ? { def, ...(hash ? { envelope: true, view: hash } : flatPreview ? { envelope: true } : {}) } : null;
         }
-        const [name, body] = Object.entries(item ?? {})[0] ?? [];
-        if (!name) return null;
+        const [rawName, body] = Object.entries(item ?? {})[0] ?? [];
+        if (!rawName) return null;
+        const [name, hash] = split(rawName);
         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 face = typeof view === "string" && view ? view : hash;
+        return { def, envelope: true, ...(face ? { view: face } : {}), ...(Object.keys(data).length ? { data } : {}) };
       };
       const set = entry
         ? entry.map(toSpec).filter((s): s is SeedSpec => Boolean(s))
@@ -1008,9 +1023,9 @@ export function TemplatesView({
               onClick={() => setMetaOpen((o) => !o)}
               className="flex items-center gap-1 rounded border px-2 py-0.5 font-medium"
               style={{ borderColor: theme.color["border.subtle"], color: metaOpen ? theme.color["text.primary"] : theme.color["text.secondary"], background: metaOpen ? theme.color["surface.sunken"] : "transparent" }}
-              title="Show the MCP app manifest"
+              title="Show the app's manifest: its meta, its binding, its shape"
             >
-              {selectedDef?.app ? "ⓘ MCP app" : "ⓘ Details"} <span className="opacity-60">{metaOpen ? "▴" : "▾"}</span>
+              ⓘ Manifest <span className="opacity-60">{metaOpen ? "▴" : "▾"}</span>
             </button>
           )}
 

package/screens/index.ts

@@ -24,6 +24,8 @@ export { TemplatesView } from "./TemplatesView";
 export { TemplatesLibraryView } from "./TemplatesLibraryView";
 export { DesignSystemView } from "./DesignSystemView";
 export { SkillsView } from "./SkillsView";
+// Agents: the one file authored for the map (docs.unoverse.ai/design/tasks), one lane in both Studios.
+export { AgentsView } from "./AgentsView";
 export { IdentityView } from "./IdentityView";
 export { PromptBlocksView } from "./PromptBlocksView";
 export { IdentityHeader } from "./IdentityHeader";

package/src/App.tsx

@@ -15,7 +15,7 @@ import {
   TemplatesView,
   TemplatesLibraryView,
   DesignSystemView,
-  SkillsView,
+  SkillsView, AgentsView,
   IdentityView,
   PromptBlocksView,
 } from "@unoverse/studio";
@@ -32,22 +32,25 @@ import {
   LayoutTemplate,
   Palette,
   Sparkles,
+  Bot,
   SquareDashed,
   TextQuote,
   Landmark,
   type LucideIcon,
 } from "lucide-react";
 
-type View = "apps" | "templates" | "components" | "atoms" | "tokens" | "identity" | "skills" | "prompts" | "nodes";
+type View = "apps" | "agents" | "templates" | "components" | "atoms" | "tokens" | "identity" | "skills" | "prompts" | "nodes";
 
 const NAV: { key: View; label: string; group: string; Icon: LucideIcon }[] = [
+  // Owner's order (2026-09-06): apps, agents, skills, templates, then the parts.
   { key: "apps", label: "Apps", group: "Build", Icon: LayoutDashboard },
+  { key: "agents", label: "Agents", group: "Build", Icon: Bot },
+  { key: "skills", label: "Skills", group: "Build", Icon: Sparkles },
   { key: "templates", label: "Templates", group: "Build", Icon: LayoutTemplate },
   { key: "components", label: "Components", group: "Build", Icon: SquareDashed },
   { key: "atoms", label: "Atoms", group: "Build", Icon: Atom },
   { key: "tokens", label: "Styles", group: "Build", Icon: Palette },
   { key: "identity", label: "Identity", group: "AI", Icon: Landmark },
-  { key: "skills", label: "Skills", group: "AI", Icon: Sparkles },
   { key: "prompts", label: "Prompt Blocks", group: "AI", Icon: TextQuote },
   { key: "nodes", label: "Nodes", group: "Code", Icon: Boxes },
 ];
@@ -196,6 +199,8 @@ function Shell() {
           // Standalone Studio authors offline: open apps in MOCK (the defaultLive=true
           // resting mode is Canvas's, where the universe is right there).
           <TemplatesView theme={theme} themeName={variant} org={org} defaultLive={false} />
+        ) : view === "agents" ? (
+          <AgentsView org={org} />
         ) : view === "templates" ? (
           <TemplatesLibraryView theme={theme} org={org} />
         ) : view === "components" ? (

package/src/host.ts

@@ -129,19 +129,6 @@ class LocalUnoverseClient {
     return def;
   }
 
-  /**
-   * The SYNCHRONOUS cached-definition peek (see the SDK client). Studio's `readDefinition`
-   * fetches every time and keeps no cache — deliberately, so an edit on disk shows up on
-   * the next read — so there is nothing to peek and the honest answer is `null`.
-   *
-   * `null` means "no opinion", never "no": the one caller (the latch derivation on send)
-   * treats it as "no latch", which is right here. Studio previews a definition; it has no
-   * live conversation to address a component from. Present so the structural contract holds
-   * — the SDK takes this client by shape, so a missing method is a crash, not a type error.
-   */
-  peekDefinition(_uri: string): UnoverseDefinition | null {
-    return null;
-  }
 
   async readTheme(name = "light"): Promise<ResolvedTheme> {
     const r = await fetch(`/local/theme?ref=${encodeURIComponent(name)}`);
@@ -187,7 +174,7 @@ export function usePersistentState<T>(key: string, initial: T): [T, React.Dispat
   return [value, setValue];
 }
 
-export type RegistryKind = "node" | "skill" | "app" | "prompt" | "component" | "template" | "identity";
+export type RegistryKind = "node" | "skill" | "app" | "prompt" | "component" | "template" | "identity" | "agent";
 
 /**
  * Registry toggles decide what a RUNNING universe exposes; they persist to