@unoverse-platform/studio 0.1.115 → 0.1.116

package/local/catalog.ts

@@ -28,6 +28,7 @@ type Loaders = {
   listIdentity: (org?: string) => unknown[];
   /** The Agents of one org or every org: `<org>/<name>` items with their meta and door. */
   listAgents: (org?: string) => unknown[];
+  listAgentFolders: (org?: string) => unknown[];
   resolveTheme: (name: string) => unknown;
   DEFAULT_ORG: string;
   /** A project's on-disk home. The writable set is built from these (see source.ts). */
@@ -112,6 +113,7 @@ export async function loadCatalog(
   const homes = await load(resolve(baseSrc, "definitions/registry/homes.ts"));
   const identity = await load(resolve(baseSrc, "definitions/registry/orgDocuments.ts"));
   const agents = await load(resolve(baseSrc, "definitions/registry/agents.ts"));
+  const agentFolders = await load(resolve(baseSrc, "definitions/registry/agentFolders.ts"));
 
   return {
     listDefinitions: defs.listDefinitions as Loaders["listDefinitions"],
@@ -135,6 +137,7 @@ export async function loadCatalog(
       return out;
     }) as Loaders["listIdentity"],
     listAgents: agents.listAgents as Loaders["listAgents"],
+    listAgentFolders: agentFolders.listAgentFolders as Loaders["listAgentFolders"],
     resolveTheme: theme.resolveTheme as Loaders["resolveTheme"],
     DEFAULT_ORG: theme.DEFAULT_ORG as string,
     projectDir: defs.projectDir as Loaders["projectDir"],

package/local/plugin.ts

@@ -15,7 +15,7 @@
  *
  * See docs/architecture/authoring/LOCAL_STUDIO.md.
  */
-import { designHome, authoringRoot, orgRepoName, lintOptions, platformHome } from "./design-home.mjs";
+import { authoringRoot, orgRepoName, lintOptions, platformHome } from "./design-home.mjs";
 import { createRequire } from "node:module";
 import { fileURLToPath } from "node:url";
 import { resolve, dirname } from "path";
@@ -177,12 +177,15 @@ function readMarkdownLibrary(dir: string): MarkdownEntry[] {
  * Scoping is the server's `?org=`: an org sees the universal tier plus its own and never
  * another org's, the rule RX_ORG_MODEL.md settled for a project's assets.
  */
-function readLibrary(projectRoot: string, marketplace: string, folder: "skills" | "blocks", orgs: string[], org?: string): MarkdownEntry[] {
+function readLibrary(projectDir: (org: string) => string, marketplace: string, folder: "skills" | "blocks", orgs: string[], org?: string): MarkdownEntry[] {
   const out = readMarkdownLibrary(resolve(marketplace, folder));
   for (const o of orgs) {
     if (org && org !== "all" && o !== org) continue;
-    // The org's own folder: the repo root in an org repo (UNO-88), else design/<org>/.
-    const orgHome = orgRepoName(projectRoot) ? projectRoot : resolve(designHome(projectRoot), o);
+    // The org's own folder, found as every other screen here finds it (base projectDir): the
+    // repo root in an org repo (UNO-88), else its authored folder, else the copy the universe
+    // installed. Working it out here alone missed the installed copy, so Studio run from the
+    // platform listed no org's skills while the server listed them all.
+    const orgHome = projectDir(o);
     for (const e of readMarkdownLibrary(resolve(orgHome, folder))) {
       // A SKILL's lookup name carries its org, because that is the name every reader
       // addresses it by and two orgs may hold one bare name. A BLOCK's does not: the
@@ -445,9 +448,9 @@ export function localStudioHost(): Plugin {
             case path === "/dev/identity":
               return json(res, { items: c.listIdentity(org) });
 
-            // Agents: the one file authored for the map, design/<org>/agents/<name>.yaml.
+            // Agents: folders in the one shape (agents/<name>/agent.yaml), and the older flat files.
             case path === "/dev/agents":
-              return json(res, { items: c.listAgents(org) });
+              return json(res, { items: c.listAgents(org), folders: c.listAgentFolders(org) });
 
             case path === "/dev/atoms":
               return json(res, { atoms: c.listDefinitions("atom") });
@@ -611,17 +614,17 @@ export function localStudioHost(): Plugin {
               return json(res, selection ?? { empty: true });
 
             case path === "/skills":
-              return json(res, { skills: readLibrary(projectRoot, c.marketplace, "skills", c.listOrgs(), org) });
+              return json(res, { skills: readLibrary(c.projectDir, c.marketplace, "skills", c.listOrgs(), org) });
 
             case path.startsWith("/skills/"): {
               const name = decodeURIComponent(path.slice("/skills/".length).replace(/\/file$/, ""));
-              const found = readLibrary(projectRoot, c.marketplace, "skills", c.listOrgs()).find((s) => s.name === name || s.id === name);
+              const found = readLibrary(c.projectDir, c.marketplace, "skills", c.listOrgs()).find((s) => s.name === name || s.id === name);
               // SkillsView reads `d.skill`, matching the server's shape. Not the bare object.
               return found ? json(res, { skill: found }) : json(res, { error: "skill not found" }, 404);
             }
 
             case path === "/prompt-blocks":
-              return json(res, { blocks: readLibrary(projectRoot, c.marketplace, "blocks", c.listOrgs(), org) });
+              return json(res, { blocks: readLibrary(c.projectDir, c.marketplace, "blocks", c.listOrgs(), org) });
 
             // Registry toggles are a DEPLOYED concept: they persist to installed_plugins
             // and decide what a running universe exposes. Local Studio has no database and

package/package.json

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

package/screens/AgentChain.tsx

@@ -0,0 +1,216 @@
+/**
+ * AN AGENT, DRAWN (docs/architecture/signal/AGENTS.md § 3): a chain read straight off its
+ * agent.yaml, the way a pipeline's chain is read off its pipeline.yaml (Spatial's PipelineChain).
+ * Three kinds, drawn as three: its SKILLS feed in from above (what it knows: read into it before
+ * it starts, never called), its TRIGGERS wake it, and its TASKS are what it does (its org's own,
+ * then the marketplace MCPs). Below: its soul, access and settings. Nothing here is written for any
+ * one Agent: a new folder draws its own chain.
+ */
+import { BookOpen, CalendarDays, ChevronDown, ChevronRight, Compass, Mail, MessageSquare, Mic, Plug, Radio, Workflow } from "lucide-react";
+
+export interface AgentFolderItem {
+  ref: string;
+  org: string;
+  name: string;
+  title?: string;
+  role?: string;
+  description?: string;
+  whenToUse?: string;
+  category?: string;
+  version?: string;
+  /** Its picture, an image URL. */
+  avatar?: string;
+  skills: string[];
+  model?: { use?: string; reasoning?: string; fallback?: string };
+  budget?: { perDay?: string; perRun?: string };
+  tasks: string[];
+  access: string[];
+  triggers: { name: string; node?: string; wakes?: string }[];
+  checkIn?: string;
+  memory?: { agent?: string };
+  askWhenUnsure?: string;
+  soul: string;
+  path: string;
+  /** Each skill in words, from its SKILL.md (server: devRoutes `withAbout`). */
+  skillsAbout?: { name: string; title: string; description: string }[];
+  /** Each marketplace MCP among its tasks, by URI, as its node names itself. */
+  mcpsAbout?: Record<string, { title: string; description: string }>;
+}
+
+const WAY_ICONS: Record<string, typeof Radio> = { spatial: Compass, slack: MessageSquare, email: Mail, voice: Mic, calendar: CalendarDays };
+const WAKES: Record<string, string> = { mentions: "wakes on a mention", replies: "wakes on a reply", events: "wakes when an event starts" };
+/** What a permission lets it reach, in words; the strict ones said plainly (AGENTS.md § 7a). */
+const ACCESS_WORDS: Record<string, string> = {
+  "signal:read-all": "Can see everyone in Signal",
+  "signal:write": "Can add people to Signal",
+};
+
+/** Triggers | › | the Agent | › | what it does: the skills row above shares these columns. */
+const COLUMNS = "minmax(0,1fr) auto minmax(0,1.1fr) auto minmax(0,1fr)";
+const LABEL = "mb-2 text-[10px] font-semibold uppercase tracking-wider text-gray-500";
+const TILE = "flex items-center gap-2.5 rounded-lg border border-gray-200 bg-white px-3 py-2";
+const GLYPH = "flex h-7 w-7 shrink-0 items-center justify-center rounded-md border border-gray-200 bg-white text-gray-800";
+
+/** `unoverse://tasks/<org>/<name>` → its name, and its org when it is not the Agent's own. */
+function taskLabel(uri: string, org: string): { name: string; from?: string } {
+  const m = /^unoverse:\/\/tasks\/([^/]+)\/(.+)$/.exec(uri);
+  if (!m) return { name: uri };
+  return m[1] === org ? { name: m[2] } : { name: m[2], from: m[1] };
+}
+
+export function AgentChain({ agent: given }: { agent: AgentFolderItem }) {
+  // Every list may be absent (a hand-written file, an older server): drawn as empty, never a crash.
+  const agent: AgentFolderItem = {
+    ...given,
+    skills: given.skills ?? [],
+    tasks: given.tasks ?? [],
+    access: given.access ?? [],
+    triggers: given.triggers ?? [],
+    soul: given.soul ?? "",
+  };
+  const ways = agent.triggers;
+  // Its skills in words; a server that sends none still draws each by name.
+  const skills = agent.skillsAbout ?? agent.skills.map((name) => ({ name, title: name, description: "" }));
+  // What it does, in two kinds: its org's own tasks, then the marketplace MCPs it was given.
+  const mcps = agent.tasks.filter((uri) => agent.mcpsAbout?.[uri]);
+  const own = agent.tasks.filter((uri) => !agent.mcpsAbout?.[uri]);
+  return (
+    <>
+      {/* WHAT IT KNOWS: its skills, feeding into it from above */}
+      <div className="mb-1 grid gap-3" style={{ gridTemplateColumns: COLUMNS }}>
+        <div />
+        <ChevronRight size={18} className="invisible" />
+        <div>
+          <div className={LABEL}>Skills · how it works</div>
+          {skills.length === 0 && <div className="text-[12px] text-gray-500">None</div>}
+          <div className="flex flex-col gap-2">
+            {skills.map((k) => (
+              <div key={k.name} className="flex items-start gap-2.5 rounded-lg border border-dashed border-gray-300 bg-white px-3 py-2" title={k.name}>
+                <span className={GLYPH}><BookOpen size={15} strokeWidth={1.8} /></span>
+                <div className="min-w-0">
+                  <div className="truncate text-[13px] font-medium text-gray-900">{k.title}</div>
+                  {k.description && <div className="line-clamp-2 text-[11px] text-gray-500">{k.description}</div>}
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="flex justify-center py-1 text-gray-300"><ChevronDown size={18} /></div>
+        </div>
+        <ChevronRight size={18} className="invisible" />
+        <div />
+      </div>
+
+      {/* THE CHAIN: triggers → the Agent → what it does */}
+      {/* Top-aligned: the Agent sits right under its skills, however many tasks it has. */}
+      <div className="mb-6 grid items-start gap-3" style={{ gridTemplateColumns: COLUMNS }}>
+        <div className="flex flex-col gap-2">
+          <div className={LABEL}>Triggers · what wakes it</div>
+          {ways.length === 0 && <div className="text-[12px] text-gray-500">None yet</div>}
+          {ways.map((w) => {
+            const Icon = WAY_ICONS[w.name] ?? Radio;
+            return (
+              <div key={w.name} className={TILE}>
+                <span className={GLYPH}><Icon size={15} strokeWidth={1.8} /></span>
+                <div className="min-w-0">
+                  <div className="truncate text-[13px] font-medium capitalize text-gray-900">{w.name}</div>
+                  <div className="truncate text-[11px] text-gray-500">{w.name === "spatial" ? "found in Spatial" : [w.node, w.wakes ? WAKES[w.wakes] ?? w.wakes : null].filter(Boolean).join(", ")}</div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        <ChevronRight size={18} className="mt-14 text-gray-300" />
+
+        <div className="mt-6 rounded-xl border border-gray-300 bg-gray-50 p-4">
+          <div className="mb-3 flex items-center gap-3">
+            {agent.avatar && <img src={agent.avatar} alt="" className="h-12 w-12 shrink-0 rounded-full border border-gray-200 object-cover" />}
+            <div className="min-w-0">
+              <div className="text-[15px] font-semibold text-gray-900">{agent.title ?? agent.name}</div>
+              {agent.role && <div className="text-[12px] text-gray-600">{agent.role}</div>}
+            </div>
+          </div>
+          <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-[12px]">
+            <dt className="text-gray-500">Model</dt>
+            <dd className="truncate font-mono text-gray-800">{agent.model?.use ?? "not set"}</dd>
+            <dt className="text-gray-500">Budget</dt>
+            <dd className="text-gray-800">
+              {agent.budget?.perDay ? `${agent.budget.perDay} a day` : "not set"}
+              {agent.budget?.perRun ? `, ${agent.budget.perRun} a run` : ""}
+            </dd>
+            <dt className="text-gray-500">Memory</dt>
+            <dd className="text-gray-800">{agent.memory?.agent === "on" ? "its own" : "off"}</dd>
+          </dl>
+        </div>
+
+        <ChevronRight size={18} className="mt-14 text-gray-300" />
+
+        <div className="flex flex-col gap-2">
+          <div className={LABEL}>Tasks · what it does</div>
+          {agent.tasks.length === 0 && <div className="text-[12px] text-gray-500">None</div>}
+          {own.map((uri) => {
+            const t = taskLabel(uri, agent.org);
+            return (
+              <div key={uri} className={TILE} title={uri}>
+                <span className={GLYPH}><Workflow size={15} strokeWidth={1.8} /></span>
+                <div className="min-w-0">
+                  <div className="truncate text-[13px] font-medium text-gray-900">{t.name.replace(/-/g, " ")}</div>
+                  {t.from && <div className="truncate text-[11px] text-gray-500">from {t.from}</div>}
+                </div>
+              </div>
+            );
+          })}
+          {mcps.length > 0 && <div className={`${LABEL} mt-2`}>From the marketplace</div>}
+          {mcps.map((uri) => {
+            const m = agent.mcpsAbout![uri];
+            return (
+              <div key={uri} className={TILE} title={uri}>
+                <span className={GLYPH}><Plug size={15} strokeWidth={1.8} /></span>
+                <div className="min-w-0">
+                  <div className="truncate text-[13px] font-medium text-gray-900">{m.title}</div>
+                  {m.description && <div className="line-clamp-2 text-[11px] text-gray-500">{m.description}</div>}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* WHO IT IS */}
+      <div className={LABEL}>Soul</div>
+      {agent.soul.trim() ? (
+        <div className="mb-5 space-y-2 rounded-lg border border-gray-200 bg-gray-50 p-4 text-[13px] leading-relaxed text-gray-800">
+          {/* Paragraphs as written: a blank line parts them, a line break inside one is a space. */}
+          {agent.soul.trim().split(/\n\s*\n/).map((para, i) => (
+            <p key={i}>{para.replace(/\s*\n\s*/g, " ")}</p>
+          ))}
+        </div>
+      ) : (
+        <p className="mb-5 text-[12px] text-gray-500">No SOUL.md beside agent.yaml.</p>
+      )}
+
+      <div className={LABEL}>Access</div>
+      <div className="mb-5 flex flex-wrap gap-1.5">
+        {agent.access.length === 0 && <span className="text-[12px] text-gray-500">No one's information</span>}
+        {agent.access.map((a) => (
+          <span key={a} title={a} className="rounded-full border border-gray-200 bg-white px-2 py-0.5 text-[11px] text-gray-700">
+            {ACCESS_WORDS[a] ?? a}
+          </span>
+        ))}
+      </div>
+
+      <div className={LABEL}>Settings</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 text-[12px] text-gray-800">
+        {agent.model?.reasoning && (<><dt className="text-gray-500">Reasoning</dt><dd>{agent.model.reasoning}</dd></>)}
+        {agent.model?.fallback && (<><dt className="text-gray-500">Fallback model</dt><dd className="font-mono">{agent.model.fallback}</dd></>)}
+        <dt className="text-gray-500">Check-in</dt>
+        <dd>{agent.checkIn ? `every ${agent.checkIn}` : "only when reached"}</dd>
+        {agent.askWhenUnsure && (<><dt className="text-gray-500">Asks when unsure</dt><dd>in {agent.askWhenUnsure}</dd></>)}
+        <dt className="text-gray-500">Email</dt>
+        <dd>its connected mailbox, set in Signal</dd>
+        <dt className="text-gray-500">Folder</dt>
+        <dd className="font-mono">{agent.path}</dd>
+      </dl>
+    </>
+  );
+}

package/screens/AgentsView.tsx

@@ -1,6 +1,7 @@
 /**
- * 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.
+ * Agents view — the Agents a project authored. Left: a navigator. Right: the selected Agent.
+ * An Agent in the one shape (agents/<name>/agent.yaml and its soul, AGENTS.md § 3) is drawn as a
+ * chain read off its file (AgentChain); an older flat Agent file shows its door until converted.
  *
  * 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`).
@@ -13,6 +14,7 @@ import { usePersistentState, useRegistryToggles, ToggleSwitch } from "studio-hos
 import { IdentityHeader } from "./IdentityHeader";
 import { DOC, EMPTY, NAV, NAV_SECTION, PANE, SCREEN, navItem } from "./chrome";
 import { EmptyLibrary } from "./EmptyLibrary";
+import { AgentChain, type AgentFolderItem } from "./AgentChain";
 
 interface AgentItem {
   /** `<org>/<name>`: the identity every registry row and toggle keys on. */
@@ -42,6 +44,8 @@ const AGENT_ICON = `data:image/svg+xml;utf8,${encodeURIComponent(`<svg xmlns="ht
 
 export function AgentsView({ org = "all" }: { org?: string } = {}) {
   const [agents, setAgents] = useState<AgentItem[]>([]);
+  // AGENTS IN THE ONE SHAPE (agents/<name>/agent.yaml, AGENTS.md § 3), beside the older files.
+  const [folders, setFolders] = useState<AgentFolderItem[]>([]);
   const available = useRegistryToggles("agent");
   const [selected, setSelected] = usePersistentState<string | null>("wb:agents:selected", null);
   const [error, setError] = useState<string | null>(null);
@@ -51,15 +55,18 @@ export function AgentsView({ org = "all" }: { org?: string } = {}) {
       .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
       .then((d) => {
         const list: AgentItem[] = d.items ?? [];
+        const own: AgentFolderItem[] = d.folders ?? [];
         setAgents(list);
-        const restore = list.find((a) => a.name === selected) ?? list[0];
-        setSelected(restore ? restore.name : null);
+        setFolders(own);
+        const keys = [...own.map((f) => f.ref), ...list.map((a) => a.name)];
+        setSelected(keys.includes(selected ?? "") ? selected : (keys[0] ?? 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 folder = folders.find((f) => f.ref === selected) ?? null;
 
   const byCategory = Object.entries(
     agents.reduce<Record<string, AgentItem[]>>((acc, a) => {
@@ -68,7 +75,7 @@ export function AgentsView({ org = "all" }: { org?: string } = {}) {
     }, {}),
   ).sort(([a], [b]) => a.localeCompare(b));
 
-  if (agents.length === 0) {
+  if (agents.length === 0 && folders.length === 0) {
     return (
       <div className={SCREEN}>
         <nav className={NAV} />
@@ -87,6 +94,24 @@ export function AgentsView({ org = "all" }: { org?: string } = {}) {
     <div className={SCREEN}>
       {/* NAVIGATOR */}
       <nav className={NAV}>
+        {folders.length > 0 && (
+          <div className="mb-3">
+            <div className={NAV_SECTION}>Agents</div>
+            {folders.map((f) => (
+              <button
+                key={f.ref}
+                onClick={() => setSelected(f.ref)}
+                className={`block w-full rounded px-2 py-1.5 text-left transition ${navItem(selected === f.ref)}`}
+              >
+                <div className="flex min-w-0 items-baseline gap-2 text-sm font-medium">
+                  <span className="min-w-0 flex-1 truncate">{f.title ?? f.name}</span>
+                  <span className="shrink-0 text-[10px] text-gray-500">{f.org}</span>
+                </div>
+                <div className="truncate text-[11px] text-gray-500">{f.role ?? f.description}</div>
+              </button>
+            ))}
+          </div>
+        )}
         {byCategory.map(([cat, items]) => (
           <div key={cat} className="mb-3">
             <div className={NAV_SECTION}>{cat}</div>
@@ -109,7 +134,21 @@ export function AgentsView({ org = "all" }: { org?: string } = {}) {
 
       {/* DETAIL */}
       <div className={PANE}>
-        {!selected || !detail ? (
+        {selected && folder ? (
+          <div className={DOC}>
+            <IdentityHeader
+              right={<ToggleSwitch on={available.isEnabled(selected)} onClick={() => available.toggle(selected)} label="Available" />}
+              logoUrl={folder.avatar ?? AGENT_ICON}
+              accent={ACCENT}
+              name={folder.title ? `${folder.title}${folder.role ? `, ${folder.role}` : ""}` : selected}
+              category={folder.category}
+              version={folder.version}
+              description={folder.description}
+              whenToUse={folder.whenToUse}
+            />
+            <AgentChain agent={folder} />
+          </div>
+        ) : !selected || !detail ? (
           <div className={EMPTY}>Select an Agent</div>
         ) : (
           <div className={DOC}>

package/screens/SkillsView.tsx

@@ -14,6 +14,7 @@
  * "run". So this is a neutral chrome surface, not a themed render.
  */
 import { useEffect, useState } from "react";
+import Markdown from "markdown-to-jsx";
 import { fetchUnoverse } from "studio-host";
 import { usePersistentState, useRegistryToggles, ToggleSwitch } from "studio-host";
 import { IdentityHeader } from "./IdentityHeader";
@@ -182,9 +183,9 @@ export function SkillsView({ org = "all" }: { org?: string } = {}) {
             {loadingDetail && !detail ? (
               <div className="text-sm text-gray-500">Loading…</div>
             ) : (
-              <pre className="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>
+              <div className="rounded-lg border border-gray-200 bg-white p-6 text-sm leading-relaxed text-gray-800">
+                <Markdown options={{ overrides: INSTRUCTION_STYLES }}>{detail?.instructions ?? ""}</Markdown>
+              </div>
             )}
 
             {detail?.contentHash && (
@@ -196,3 +197,20 @@ export function SkillsView({ org = "all" }: { org?: string } = {}) {
     </div>
   );
 }
+
+/** SKILL.md as it reads, not as it is typed: each markdown element styled for the pane. */
+const INSTRUCTION_STYLES = {
+  h1: { props: { className: "mb-3 text-lg font-semibold text-gray-900" } },
+  h2: { props: { className: "mb-2 mt-6 text-base font-semibold text-gray-900" } },
+  h3: { props: { className: "mb-2 mt-4 text-sm font-semibold text-gray-900" } },
+  p: { props: { className: "mb-3" } },
+  ul: { props: { className: "mb-3 list-disc space-y-1 pl-5" } },
+  ol: { props: { className: "mb-3 list-decimal space-y-1 pl-5" } },
+  a: { props: { className: "text-blue-600 underline" } },
+  code: { props: { className: "rounded bg-gray-100 px-1 py-0.5 font-mono text-[12px]" } },
+  pre: { props: { className: "mb-3 overflow-x-auto rounded-lg bg-gray-50 p-3 font-mono text-[12px] [&>code]:bg-transparent [&>code]:p-0" } },
+  table: { props: { className: "mb-3 w-full border-collapse text-left text-[13px]" } },
+  th: { props: { className: "border-b border-gray-200 px-2 py-1 font-semibold" } },
+  td: { props: { className: "border-b border-gray-100 px-2 py-1 align-top" } },
+  blockquote: { props: { className: "mb-3 rounded bg-gray-50 px-3 py-2 text-gray-600" } },
+};

package/screens/index.ts

@@ -26,6 +26,9 @@ 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";
+// An Agent drawn off its agent.yaml: Studio's lane, and Signal's Agent page beside its runs.
+export { AgentChain } from "./AgentChain";
+export type { AgentFolderItem } from "./AgentChain";
 export { IdentityView } from "./IdentityView";
 export { PromptBlocksView } from "./PromptBlocksView";
 export { IdentityHeader } from "./IdentityHeader";

package/vendor/base/src/agent-mcp/discovery.ts

@@ -5,6 +5,7 @@
  * kinds into one shape, so a model gets one tool per row regardless of which kind it was.
  * Also the etiquette an interactive app carries, and the anchoring a follow-up search needs.
  */
+import { taskUri } from "../definitions/registry/taskUri.js";
 import type { AgentToolExchange, DiscoveredMCP, AppInvocationContext, OfferedFunction } from "./types.js";
 
 /** The discovery tools whose results can carry `object_type: "mcp"` rows. */
@@ -89,7 +90,9 @@ export function parseDiscoveredMCPs(calls: AgentToolExchange[]): DiscoveredMCP[]
           workflowId: item.metadata.workflow || item.workflow_id,
           nodeId: item.metadata.trigger,
           methodName,
-          taskTool: String(methodName),
+          // The task's one URI when the map row holds it (docs/mcp/MCP_TASKS.md § 2a), else its name;
+          // the wire call names the tool from either by the one rule (invoke.ts).
+          taskTool: String(taskUri(item.metadata?.task) ?? methodName),
           schema: { methods: { [methodName]: { description: taskDescription, input } } },
         });
       } else if (item.metadata?.schema?.methods) {