@unoverse-platform/studio 0.1.115 → 0.1.117

package/vendor/sdk/lib/dom/component.ts

@@ -16,7 +16,7 @@ import { matches } from "../core/conditions";
 import { heldPointer, stateOfUri } from "../core/apps";
 import { keyframesCss } from "../style";
 import type { ActionHandler } from "../actions";
-import { setChildren, setStyle } from "./element";
+import { printWhenStill, setChildren, setStyle } from "./element";
 import { isolatedRoot } from "./isolate";
 import { mountQueue } from "./mounted";
 import { regionView, type Leaf, type Region } from "./region";
@@ -26,6 +26,8 @@ import type { Data } from "./types";
 /** What reads definitions and themes: the MCP client, or anything answering the same calls. */
 export interface DefinitionSource extends ThemeSource {
   readDefinition(address: string): Promise<UnoverseDefinition>;
+  /** Runs the task a component carries (its lifecycle hook) as the viewer; absent, no hook runs here. */
+  runTask?(uri: string, phase: "onStart" | "onEnterView", props?: Record<string, unknown>, state?: string): Promise<Record<string, unknown>>;
 }
 
 export interface ComponentOptions {
@@ -129,6 +131,7 @@ export function mountComponent(options: ComponentOptions): ComponentMount {
         appStore,
         // Server actions carry the INSTANCE context (which component, its current slice).
         sendToServer: onAction ? (t, payload) => onAction(t, payload, { chatId, nodeId, type: store.getType(chatId, nodeId), state: store.get(chatId, nodeId) }) : undefined,
+        print: printWhenStill,
       });
       return;
     }
@@ -138,6 +141,10 @@ export function mountComponent(options: ComponentOptions): ComponentMount {
       if (values.length) {
         localSlice = { ...localSlice, ...Object.fromEntries(values.map((v) => [v.key, v.value])) };
         draw();
+        // A CHANGED VIEW IS NEWS here too: a live card's stream reports it and the server runs
+        // the `onEnterView` hook; a card drawn from a record asks for the same hook itself.
+        const face = values.find((v) => v.key === "state" || v.key === "view" || v.key === "defaultState");
+        if (face && typeof face.value === "string" && face.value) enterView(face.value);
       }
     }
     o.onAction?.(action, scope, meta);
@@ -190,6 +197,7 @@ export function mountComponent(options: ComponentOptions): ComponentMount {
         def = d;
         defaults = Object.fromEntries(Object.entries((d.props ?? {}) as Record<string, { default?: unknown }>).map(([k, v]) => [k, v?.default]));
         draw();
+        runHooks(asked);
       })
       .catch((e) => {
         if (!alive || defUri !== asked) return;
@@ -198,6 +206,35 @@ export function mountComponent(options: ComponentOptions): ComponentMount {
       });
   };
 
+  /**
+   * A COMPONENT FETCHES ITS OWN DATA WHEREVER IT IS DRAWN (docs/design/lifecycle-hooks.md). A live
+   * card's hooks run on the app's stream: `onStart` when the server renders it, `onEnterView` when
+   * its state changes. A card drawn from a record has no stream, so it asks the server to run the
+   * same hooks here, with the record's fields as `props`: `onStart`, then `onEnterView` for the
+   * state it opens in. What comes back merges into the drawing as it arrives, as on the stream.
+   * Fire-and-forget: the drawing never waits, and a failed hook leaves the card as it was.
+   */
+  const mergeTask = (uri: string) => (fields: Record<string, unknown>) => {
+    if (!alive || defUri !== uri || !fields || !Object.keys(fields).length) return;
+    localSlice = { ...localSlice, ...fields };
+    draw();
+  };
+  const quietTask = (uri: string) => (e: unknown) => console.warn(`[unoverse] "${uri}" task failed:`, e);
+  /** The `onEnterView` hook for a state this record-drawn card just entered, with its fields so far. */
+  const enterView = (state: string) => {
+    const uri = defUri;
+    if (o.store || !o.client.runTask || !uri) return;
+    const data = { ...defaults, ...(def?.state ?? {}), ...(sourceData() ?? {}), ...localSlice } as Data;
+    o.client.runTask(uri, "onEnterView", data, state).then(mergeTask(uri)).catch(quietTask(uri));
+  };
+  const runHooks = (uri: string) => {
+    if (o.store || !o.client.runTask) return;
+    const data = (sourceData() ?? {}) as Data;
+    const opening = String(data.state ?? (def?.state as Data | undefined)?.state ?? "");
+    o.client.runTask(uri, "onStart", data).then(mergeTask(uri)).catch(quietTask(uri));
+    if (opening) enterView(opening);
+  };
+
   const loadTheme = () => {
     if (o.theme || !def) return;
     const name = def.org ? `${def.org}/light` : "light";

package/vendor/sdk/lib/dom/element.ts

@@ -63,6 +63,29 @@ export function setChildren(parent: Node, nodes: Node[]): void {
   while (parent.childNodes.length > i) parent.removeChild(parent.lastChild!);
 }
 
+/**
+ * The web host's `print` action: print once the screen is still (fullscreen ended, no animation
+ * running, a view transition included, and the document unchanged for 300ms), so the preview never
+ * captures a page mid-change. Resolves when the dialog closes. Capped at five seconds.
+ */
+export function printWhenStill(): Promise<void> {
+  return new Promise((done) => {
+    let quietSince = performance.now();
+    const mo = new MutationObserver(() => (quietSince = performance.now()));
+    mo.observe(document, { subtree: true, childList: true, attributes: true, characterData: true });
+    const started = performance.now();
+    const tick = () => {
+      const now = performance.now();
+      const animating = (document.getAnimations?.() ?? []).some((a) => a.playState === "running");
+      const busy = document.fullscreenElement || animating || now - quietSince < 300;
+      if (busy && now - started < 5000) return void requestAnimationFrame(tick);
+      mo.disconnect();
+      requestAnimationFrame(() => { window.print(); done(); });
+    };
+    requestAnimationFrame(tick);
+  });
+}
+
 /** A text node whose content follows the value (strings and numbers; anything else is empty). */
 export function textOf(v: unknown): string {
   return typeof v === "string" ? v : typeof v === "number" || typeof v === "bigint" ? String(v) : "";

package/vendor/sdk/lib/dom/markdown.ts

@@ -143,10 +143,14 @@ function externalLink(env: Env): Rec {
       const { props, children: kids } = t as El;
       const theme = env.theme();
       const { s } = prose(theme);
-      attrs = setProps(el, { ...props, target: "_blank", rel: "noopener noreferrer" }, attrs);
+      // A LINK TO THE SAME SITE (a path, `/signal/person/?id=…`) is the page's own next view: it
+      // opens in place, without the external glyph. Any other address opens in a new tab.
+      const href = typeof (props as { href?: unknown }).href === "string" ? String((props as { href?: unknown }).href) : "";
+      const ownSite = href.startsWith("/") && !href.startsWith("//");
+      attrs = setProps(el, ownSite ? { ...props } : { ...props, target: "_blank", rel: "noopener noreferrer" }, attrs);
       setStyle(el, env.inheritLink() ? { ...s("link"), color: "inherit" } : s("link"));
       const li = (theme.icons?.externalLink ?? {}) as Parameters<typeof svgOf>[1];
-      if (!li.children?.length) arrow = null;
+      if (ownSite || !li.children?.length) arrow = null;
       else if (arrow?.glyph !== li) arrow = { glyph: li, svg: svgOf(env.doc, li, s("linkIcon")) };
       children(env, el, recs, kids);
       if (arrow) el.appendChild(arrow.svg);

package/vendor/sdk/lib/dom/primitives.ts

@@ -116,9 +116,13 @@ export function boxView(ctx: RenderCtx): Prim {
     setChildren(host, [...styles(rules), ...kids, ...(!stageSize && sel && pick && chip ? [chip] : [])]);
   };
 
+  // The stage scales to its frame in CSS where the browser can (container units), so a layout
+  // the observer never sees, print above all, still scales right; the measured scale is the fallback.
+  const cssScale = typeof CSS !== "undefined" && CSS.supports?.("transform", "scale(calc(100cqw / 1px))");
   const applyStage = () => {
     if (!host || !stageSize) return;
-    setStyle(host, { ...hostStyle, position: "absolute", top: 0, left: 0, width: stageSize[0], height: stageSize[1], transform: `scale(${scale})`, transformOrigin: "0 0" });
+    const transform = cssScale ? `scale(calc(100cqw / ${stageSize[0]}px))` : `scale(${scale})`;
+    setStyle(host, { ...hostStyle, position: "absolute", top: 0, left: 0, width: stageSize[0], height: stageSize[1], transform, transformOrigin: "0 0" });
   };
 
   const selection: Behaviour = (el) => {
@@ -149,6 +153,91 @@ export function boxView(ctx: RenderCtx): Prim {
     return () => d.removeEventListener("mouseup", up);
   };
 
+  // `pan`: DRAG TO MOVE AROUND a box whose content is larger than it (a zoomed map, a wide table).
+  // Press and drag scrolls the box's own overflow, the way a map pans; the wheel, a trackpad and a
+  // touch drag already do. When the content grows or shrinks (zoomed in or out), the view keeps the
+  // same point in its centre. Opt-in per box (`pan: true`); generic, it knows no content.
+  const pan: Behaviour = (el) => {
+    let drag: { x: number; y: number; left: number; top: number; id: number } | null = null;
+    let moved = false;
+    const down = (e: PointerEvent) => {
+      if (e.button !== 0) return;
+      drag = { x: e.clientX, y: e.clientY, left: el.scrollLeft, top: el.scrollTop, id: e.pointerId };
+      moved = false;
+    };
+    // A DRAG SELECTS NOTHING: no text highlight and no picture picked up and dragged off, which the
+    // browser otherwise does to whatever the pointer passes over.
+    const noDrag = (e: Event) => e.preventDefault();
+    const move = (e: PointerEvent) => {
+      if (!drag || e.pointerId !== drag.id) return;
+      const dx = e.clientX - drag.x;
+      const dy = e.clientY - drag.y;
+      if (!moved && Math.abs(dx) + Math.abs(dy) < 4) return;
+      if (!moved) {
+        moved = true;
+        el.setPointerCapture?.(drag.id);
+        el.style.cursor = "grabbing";
+        el.ownerDocument.getSelection?.()?.removeAllRanges();
+      }
+      el.scrollLeft = drag.left - dx;
+      el.scrollTop = drag.top - dy;
+    };
+    const up = (e: PointerEvent) => {
+      if (!drag || e.pointerId !== drag.id) return;
+      if (moved) el.releasePointerCapture?.(drag.id);
+      drag = null;
+      el.style.cursor = "grab";
+    };
+    // A drag is not a tap: the click that ends a drag never reaches what was under the pointer.
+    const swallow = (e: MouseEvent) => {
+      if (!moved) return;
+      e.stopPropagation();
+      e.preventDefault();
+      moved = false;
+    };
+    // KEEP THE CENTRE through a change of content size.
+    let w = el.scrollWidth;
+    let h = el.scrollHeight;
+    const ro = new ResizeObserver(() => {
+      const nw = el.scrollWidth;
+      const nh = el.scrollHeight;
+      if (nw === w && nh === h) return;
+      const cx = (el.scrollLeft + el.clientWidth / 2) / (w || 1);
+      const cy = (el.scrollTop + el.clientHeight / 2) / (h || 1);
+      el.scrollLeft = cx * nw - el.clientWidth / 2;
+      el.scrollTop = cy * nh - el.clientHeight / 2;
+      w = nw;
+      h = nh;
+    });
+    for (const kid of Array.from(el.children)) ro.observe(kid);
+    // IT OPENS ON THE MIDDLE of its content, not the top-left corner.
+    el.scrollLeft = (el.scrollWidth - el.clientWidth) / 2;
+    el.scrollTop = (el.scrollHeight - el.clientHeight) / 2;
+    el.style.cursor = "grab";
+    el.style.userSelect = "none";
+    el.style.setProperty("-webkit-user-select", "none");
+    el.addEventListener("dragstart", noDrag);
+    el.addEventListener("selectstart", noDrag);
+    el.addEventListener("pointerdown", down);
+    el.addEventListener("pointermove", move);
+    el.addEventListener("pointerup", up);
+    el.addEventListener("pointercancel", up);
+    el.addEventListener("click", swallow, true);
+    return () => {
+      ro.disconnect();
+      el.style.cursor = "";
+      el.style.userSelect = "";
+      el.style.removeProperty("-webkit-user-select");
+      el.removeEventListener("dragstart", noDrag);
+      el.removeEventListener("selectstart", noDrag);
+      el.removeEventListener("pointerdown", down);
+      el.removeEventListener("pointermove", move);
+      el.removeEventListener("pointerup", up);
+      el.removeEventListener("pointercancel", up);
+      el.removeEventListener("click", swallow, true);
+    };
+  };
+
   const autoScroll: Behaviour = (el) => {
     const nearBottom = () => el.scrollHeight - el.scrollTop - el.clientHeight < 140;
     const stick = () => {
@@ -222,22 +311,24 @@ export function boxView(ctx: RenderCtx): Prim {
       setAttr(host, "class", chrome.className);
       setAttr(host, "data-unoverse-id", inspectId(n));
       if (stageEl && size) {
-        setStyle(stageEl, { position: "relative", width: "100%", aspectRatio: `${size[0]} / ${size[1]}` });
+        setStyle(stageEl, { position: "relative", width: "100%", aspectRatio: `${size[0]} / ${size[1]}`, containerType: "inline-size" });
         applyStage();
         const outer = stageEl;
         stageWatch.set(`stage:${size[0]}`, outer, (el) => {
-          const ro = new ResizeObserver(() => {
+          const measure = () => {
             scale = el.clientWidth / (stageSize?.[0] ?? 1);
             applyStage();
-          });
+          };
+          const ro = new ResizeObserver(measure);
           ro.observe(el);
           return () => ro.disconnect();
         });
       } else {
         setStyle(host, hostStyle);
         // One behaviour per element, in this order (the element can carry only one).
-        const which = n.autoScroll === true ? "autoScroll" : n.revealOnStick === true ? "revealOnStick" : sel ? "selection" : null;
-        behaviour.set(which, host, which === "autoScroll" ? autoScroll : which === "revealOnStick" ? revealOnStick : selection);
+        const which =
+          n.autoScroll === true ? "autoScroll" : n.revealOnStick === true ? "revealOnStick" : n.pan === true ? "pan" : sel ? "selection" : null;
+        behaviour.set(which, host, which === "autoScroll" ? autoScroll : which === "revealOnStick" ? revealOnStick : which === "pan" ? pan : selection);
         if (!sel) pick = null;
       }
       fill();

package/vendor/sdk/lib/voiceService.ts

@@ -25,6 +25,8 @@ export interface VoiceSession {
   chatId?: string;
   workflowId: string;
   targetTriggerNode: string;
+  /** The task the page's address names (docs/mcp/MCP_TASKS.md § 5c): carried with the call. */
+  task?: string;
 }
 
 export interface VoiceServiceConfig {
@@ -273,7 +275,7 @@ export function createVoiceService(config: VoiceServiceConfig): VoiceService {
               userId: session.userId,
               providerId: "gravity-voice",
               isAudio: true,
-              metadata: { ...(start?.metadata ?? {}), targetTriggerNode, action: "START_CALL", isAction: true, workflowId, continuousStream: true },
+              metadata: { ...(session.task ? { task: session.task } : {}), ...(start?.metadata ?? {}), targetTriggerNode, action: "START_CALL", isAction: true, workflowId, continuousStream: true },
             },
             conversationId: session.conversationId,
           }),

package/vendor/sdk/main.ts

@@ -1,7 +1,7 @@
 /**
  * ⛔ NO REACT ANYWHERE IN THIS SDK (owner, 2026-10-01; web/sdk/CLAUDE.md).
  *
- * The `ui://` app entry (§6d): what a HOST loads (the unoverse server's SAB host in an iframe,
+ * The `ui://` app entry (§6d): what a HOST loads (the unoverse server's a host in an iframe,
  * or Claude/ChatGPT). Boots the app engine on the LOCAL vendored SDK. The host provides config
  * (server, bearer, session facts) via `window.__UNOVERSE_APP_CONFIG` or a postMessage
  * `{ type: "unoverse:config", config }` (also the token-refresh channel).

package/vendor/sdk/pageInterfaces.ts

@@ -18,6 +18,7 @@
  * The frame shares the page's origin (EMBED_CLIENT.md §1), so the page's document is reachable
  * from here, and a part drawn into the page is as live as one drawn in the frame.
  */
+import { taskUri, taskUriOf } from "../../../../../packages/base/src/definitions/registry/taskUri.js";
 import { ComponentStore } from "./lib/core/store";
 import type { UnoverseDefinition } from "./lib/core/types";
 import type { ActionHandler, ActionMeta } from "./lib/actions";
@@ -25,6 +26,20 @@ import { mountComponent, type ComponentMount, type DefinitionSource } from "./li
 import type { VoiceService } from "./lib/voiceService";
 
 const MARK = "data-unoverse-interface";
+/** WHAT THE PAGE HANDS A TEMPLATE'S TASK (docs/design/lifecycle-hooks.md): a JSON object on the
+ *  marked element, such as the id in the page's address. Its task reads it as `props.input`;
+ *  the page hands values, never calls. */
+const INPUT = "data-unoverse-input";
+function inputOf(el: HTMLElement): Record<string, unknown> | undefined {
+  const raw = el.getAttribute(INPUT);
+  if (!raw) return undefined;
+  try {
+    const v = JSON.parse(raw);
+    return v && typeof v === "object" && !Array.isArray(v) ? (v as Record<string, unknown>) : undefined;
+  } catch {
+    return undefined;
+  }
+}
 const CHAT = "page";
 const TEMPLATE_NODE = "~template";
 
@@ -60,6 +75,17 @@ function keyOwner(doc: Document): HTMLElement | null {
 
 /** A page template's address, from the name its element is marked with. */
 const uriOf = (name: string) => (name.includes("://") ? name : `unoverse://templates/${name}`);
+/**
+ * THE TASK A PAGE TEMPLATE IS, by its one URI (docs/mcp/MCP_TASKS.md § 2a): the template's own
+ * address (`unoverse://templates/<org>/<name>`, what draws it) names the task
+ * `unoverse://tasks/<org>/<name>`, which is what starts it (`metadata.task`) and what its progress
+ * is published under (`tasks.<uri>`). The shared parser, bundled, so the page and the platform
+ * read a task's name one way.
+ */
+const taskOf = (uri: string): string => {
+  const short = uri.replace(/^unoverse:\/\/templates\//, "");
+  return taskUri(short) ?? taskUriOf(null, short) ?? uri;
+};
 
 /** THE AVATARS: page templates whose steps are the call's phases (`listening`, `speaking`).
  *  They are how the page is spoken to, so they are never the task in view; they follow the call. */
@@ -67,7 +93,7 @@ const avatars = new Set<HTMLElement>();
 const CALL_PHASES = ["listening", "speaking"];
 
 /** The workflow a template names in its manifest (UNOVERSE_HOST_PAGE.md rule 4). */
-export type Binding = { workflow?: string; trigger?: string; pipeline?: string };
+export type Binding = { workflow?: string; trigger?: string; pipeline?: string; autoTrigger?: boolean };
 
 /** THE TASK IN VIEW: the marked template, not an avatar, spanning the middle of the screen. */
 function taskInView(doc: Document): HTMLElement | null {
@@ -121,6 +147,8 @@ interface PageTemplateOptions {
   waiting: () => boolean;
   onBinding: (uri: string, binding: Binding) => void;
   onCall: ActionHandler;
+  /** Run the task this template carries (its lifecycle hook) as the viewer; its fields come back. */
+  runTask: (uri: string, phase: "onStart", input?: Record<string, unknown>) => Promise<Record<string, unknown>>;
 }
 
 /** One marked template: read it, give it its parts, draw it. */
@@ -132,6 +160,12 @@ function mountPageTemplate(o: PageTemplateOptions): { refresh(): void; destroy()
   let def: { stateTree?: StateTree } | null = null;
   let comp: ComponentMount | null = null;
   let alive = true;
+  // THE TASK IT CARRIES, ASKED AT ONCE (docs/design/lifecycle-hooks.md): in parallel with reading
+  // the template, not after it. A template without an `onStart` hook answers `{}` and is ignored.
+  const early = o.runTask(uri, "onStart", inputOf(el)).catch((e) => {
+    console.warn(`[unoverse] page template "${uri}" task failed:`, e);
+    return {} as Record<string, unknown>;
+  });
 
   // Where the template draws: its element, or the dock while a fullscreen template holds one
   // and this template is an avatar.
@@ -142,10 +176,14 @@ function mountPageTemplate(o: PageTemplateOptions): { refresh(): void; destroy()
   };
 
   const ready = () => {
-    comp = mountComponent({ client, store, chatId: CHAT, nodeId: TEMPLATE_NODE, onAction: o.onCall, place: () => [dock.slot], appStore, doc: el.ownerDocument, arrowKeys: false });
-    place();
-    stops.push(dock.watch(place), store.subscribe(() => dock.check()));
-    dock.check();
+    // DRAWN WHEN ITS DATA IS IN: a template with a task shows nothing until the task answers, so
+    // its sample values (the preview a studio draws) never flash on a live page.
+    const show = () => {
+      comp = mountComponent({ client, store, chatId: CHAT, nodeId: TEMPLATE_NODE, onAction: o.onCall, place: () => [dock.slot], appStore, doc: el.ownerDocument, arrowKeys: false });
+      place();
+      stops.push(dock.watch(place), store.subscribe(() => dock.check()));
+      dock.check();
+    };
 
     // A TEMPLATE FOLLOWS ITS TASK. Whatever runs the task publishes where it is as
     // `tasks.<its URI>` in the app state (SIGNAL.md 6c): this template moves to that step, and its
@@ -161,6 +199,47 @@ function mountPageTemplate(o: PageTemplateOptions): { refresh(): void; destroy()
         for (const nodeId of parts.filter((id) => id.startsWith(`${part}~`))) store.mergeComponentState(CHAT, nodeId, values as Record<string, unknown>);
       }
     };
+    // A TASK'S VALUES THAT NAME NO PART are the template's own props (a list it holds, a line
+    // above it): they fill the template itself, as a part's fill its part.
+    const fillOwn = (byPart: Record<string, unknown>) => {
+      const own = Object.fromEntries(Object.entries(byPart).filter(([key]) => key !== "state" && !parts.some((id) => id.startsWith(`${key}~`))));
+      if (!Object.keys(own).length) return;
+      syncHeld({ ...((store.get(CHAT, TEMPLATE_NODE) ?? {}) as Record<string, unknown>), ...own });
+      store.mergeComponentState(CHAT, TEMPLATE_NODE, own);
+    };
+
+    // WHAT THE TEMPLATE HOLDS (docs/design/templates.md "Holding a component"): one instance of
+    // the held component per item of the template's own data, keyed as the server keys it in an
+    // app (server runtime/screen/held.ts) and as `heldPointer` looks it up, so each card draws in
+    // its spot and keeps its own state. Re-sent only when an item changes. MADE BEFORE the data
+    // that names them reaches the template: a spot looks for its instance as it draws, once.
+    const heldSpecs = Object.values(((def as { held?: Record<string, { component: string; items: string[] }[]> } | null)?.held) ?? {}).flat();
+    const lastHeld = new Map<string, string>();
+    const syncHeld = (data: Record<string, unknown>) => {
+      if (!heldSpecs.length) return;
+      for (const spec of heldSpecs) {
+        if (!(spec.items[0] in data)) continue;
+        let level: unknown[] = [data];
+        for (const field of spec.items)
+          level = level.flatMap((o) => {
+            const list = o && typeof o === "object" ? (o as Record<string, unknown>)[field] : undefined;
+            return Array.isArray(list) ? list : [];
+          });
+        level.forEach((item, index) => {
+          if (!item || typeof item !== "object" || Array.isArray(item)) return;
+          const row = item as Record<string, unknown>;
+          const id = row.universal_id ?? row.ref ?? row.id;
+          const key = typeof id === "string" || typeof id === "number" ? String(id) : String(index);
+          const nodeId = `${TEMPLATE_NODE}:${spec.component}:${key}`;
+          const next = JSON.stringify(row);
+          if (lastHeld.get(nodeId) === next) return;
+          lastHeld.set(nodeId, next);
+          if (!store.getType(CHAT, nodeId)) store.apply({ type: "COMPONENT_INIT", chatId: CHAT, nodeId, component: { type: spec.component, props: row } });
+          else store.apply({ type: "COMPONENT_DATA", chatId: CHAT, nodeId, data: row });
+        });
+      }
+    };
+    syncHeld((store.get(CHAT, TEMPLATE_NODE) ?? {}) as Record<string, unknown>);
     const moveTo = (at: unknown) => {
       if (typeof at !== "string") return;
       const tree = def?.stateTree?.find((t) => t.on && t.states?.some((x) => x.name === at));
@@ -169,12 +248,13 @@ function mountPageTemplate(o: PageTemplateOptions): { refresh(): void; destroy()
       if (tpl?.[tree.on] !== at) store.mergeComponentState(CHAT, TEMPLATE_NODE, { [tree.on]: at });
     };
     const follow = () => {
-      const task = ((appStore.getAppState().tasks ?? {}) as Record<string, { step?: string; props?: Record<string, unknown> }>)[uri];
+      const task = ((appStore.getAppState().tasks ?? {}) as Record<string, { step?: string; props?: Record<string, unknown> }>)[taskOf(uri)];
       if (task?.props && typeof task.props === "object") {
         const next = JSON.stringify(task.props);
         if (next !== lastProps) {
           lastProps = next;
           fillParts(task.props);
+          fillOwn(task.props);
         }
       }
       // A NEW STEP MOVES IT, once. A step the person took since (Enter) stands until the task
@@ -214,6 +294,18 @@ function mountPageTemplate(o: PageTemplateOptions): { refresh(): void; destroy()
     follow();
     stops.push(appStore.subscribe(follow));
 
+    // THE TASK IT CARRIES (docs/design/lifecycle-hooks.md): a template whose manifest has an
+    // `onStart` hook asks the server to run it as it loads, as the viewer, and fills its own
+    // fields with the answer, its held cards made first, as a workflow's fill does.
+    const hooks = (def as { lifecycle?: Array<{ phase?: string }> } | null)?.lifecycle ?? [];
+    if (hooks.some((h) => h.phase === "onStart"))
+      void early.then((fields) => {
+        if (!alive) return;
+        if (fields && Object.keys(fields).length) fillOwn(fields);
+        show();
+      });
+    else show();
+
     const doc = pageDocument();
     if (doc) {
       // THE ARROW KEYS STEP IT, on the PAGE (the keys are the page's), when its state says
@@ -336,6 +428,7 @@ export interface PageInterfacesOptions {
   appStore: ComponentStore;
   toServer: (t: string, data: Record<string, unknown>, meta?: ActionMeta) => void;
   startTask: (binding: Binding, task: string, submit?: Record<string, unknown>) => void;
+  runTask: (uri: string, phase: "onStart", input?: Record<string, unknown>) => Promise<Record<string, unknown>>;
 }
 
 /**
@@ -374,7 +467,7 @@ export function mountPageInterfaces(o: PageInterfacesOptions): { destroy(): void
     if (action === "submit" || action === "cancel") {
       o.toServer(action, data, meta);
       const state = (meta?.state ?? data) as Record<string, unknown> | undefined;
-      if (action === "submit" && (bindings[uri]?.workflow || bindings[uri]?.pipeline) && state && typeof state === "object") o.startTask(bindings[uri], uri, state);
+      if (action === "submit" && (bindings[uri]?.workflow || bindings[uri]?.pipeline) && state && typeof state === "object") o.startTask(bindings[uri], taskOf(uri), state);
     } else if (action === "startCall") {
       const t = target();
       if (!t || started.has(t)) return;
@@ -382,7 +475,7 @@ export function mountPageInterfaces(o: PageInterfacesOptions): { destroy(): void
       refreshAll();
       // The press is the click the browser needs before it plays a voice the workflow may have.
       o.voice.unlock();
-      o.startTask(bindings[t], t);
+      o.startTask(bindings[t], taskOf(t));
     } else if (action === "endCall") void o.voice.endCall();
     else if (action === "toggleMute") o.voice.toggleMute();
     // Another app on the page, opened or closed by its `<org>/<app>` (its own tag, EMBED_CLIENT.md).
@@ -425,9 +518,17 @@ export function mountPageInterfaces(o: PageInterfacesOptions): { destroy(): void
           onBinding: (u, b) => {
             if (bindings[u]) return;
             bindings[u] = b;
+            // A TASK THAT STARTS ITSELF (UNOVERSE_HOST_PAGE.md rule 4b): a binding that says
+            // `autoTrigger: true` starts its task once, as the page draws the template, the way
+            // an app's does on load. Nothing to press, and never twice on one page.
+            if (b.autoTrigger && !started.has(u)) {
+              started.add(u);
+              o.startTask(b, u);
+            }
             refreshAll();
           },
           onCall: onCallFor(uri),
+          runTask: o.runTask,
         }),
       );
     }