@datalayer/agent-runtimes 1.3.83 → 1.3.85

package/lib/loop/plugins/app-components/index.js

@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * `app-components` — the components an application's developer wrote (LOOP
+ * P-17), registered as that application's A2UI contributions: each a block
+ * of its Canvas's palette (`loop.canvas.block`, as a UI plugin's components
+ * are) and a renderer of the catalog its page, its elements and its answers
+ * are drawn with (`loop.a2ui.component`). One plugin per application, in its
+ * workspace's preset only: the catalog grows for it, it does not open.
+ *
+ * Its components are reviewed before they get here — `checkAppspec` refuses
+ * an invalid declaration — and drawn in a sandboxed frame of no origin
+ * (`components/a2ui/custom`).
+ *
+ * @module loop/plugins/app-components
+ */
+import { contribution, definePlugin, } from '@datalayer/reactor';
+import { customImplementation } from '../../../components/a2ui/custom';
+import { customComponentEntry } from '../../apps/customComponents';
+import { LoopA2uiComponent } from '../../core/a2uiComponents';
+import { LoopCanvasBlock } from '../../core/canvasBlocks';
+/** The name of the plugin that contributes an application's own components. */
+export const appComponentsPluginName = (appId) => `@datalayer/loop-plugin-app-components-${appId}`;
+/** Whether an application's developer wrote components of its own. */
+export const hasCustomComponents = (app) => (app.interface.customComponents ?? []).length > 0;
+/**
+ * The plugin contributing the components an application's developer wrote:
+ * a block and a renderer for each. `fetcher` is how their modules are
+ * fetched; the page's `fetch` unless given (tests).
+ */
+export function defineAppComponentsPlugin(app, fetcher) {
+    const own = app.interface.customComponents ?? [];
+    if (own.length === 0) {
+        throw new Error(`“${app.name}” has no component of its own to contribute.`);
+    }
+    return definePlugin({
+        name: appComponentsPluginName(app.id),
+        displayName: `${app.name}'s components`,
+        description: `The components ${app.name}'s developer wrote: ${own.map(component => component.name).join(', ')}.`,
+        octicon: 'apps',
+        contributes: own.flatMap(component => [
+            contribution(LoopCanvasBlock, {
+                id: component.name,
+                uiPlugin: `app:${app.id}`,
+                component: customComponentEntry(component, app.version),
+            }, { id: component.name }),
+            contribution(LoopA2uiComponent, {
+                id: component.name,
+                app: app.id,
+                implementation: customImplementation(component, app.version, fetcher),
+            }, { id: component.name }),
+        ]),
+    });
+}

package/lib/loop/plugins/app-elements/AppElements.d.ts

@@ -0,0 +1,27 @@
+/**
+ * The elements an application's code opened beside the conversation (LOOP
+ * P-18): a side panel on the trailing edge, and a page of its own over the
+ * workspace — each drawn from the same A2UI surface an answer is drawn from
+ * (`InlineSurface`), its buttons sent to the application's actions as an
+ * answer's are (`answerAction`), and closed with its own button.
+ *
+ * Drawn from the workspace's root slot, positioned against the workspace:
+ * nothing is drawn, and nothing is laid out, while nothing is open.
+ *
+ * @module loop/plugins/app-elements/AppElements
+ */
+import type { JSX } from 'react';
+import { type LoopElement } from '../../../chat/base/loopElement';
+import type { LoopWorkspaceContext } from '../../core';
+/** How wide the side panel is, at most. */
+export declare const APP_PANEL_WIDTH = 380;
+/** What is open now: the panels in the order they opened, and the last page. */
+export declare function elementsByPlace(open: readonly LoopElement[]): {
+    panels: LoopElement[];
+    page: LoopElement | null;
+};
+/** Every element open in a side panel or on a page, drawn where it belongs. */
+export declare function AppElements({ workspace, }: {
+    workspace?: LoopWorkspaceContext;
+}): JSX.Element | null;
+export default AppElements;

package/lib/loop/plugins/app-elements/AppElements.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useSyncExternalStore } from 'react';
+import { IconButton, Text } from '@primer/react';
+import { XIcon } from '@primer/octicons-react';
+import { Box } from '@datalayer/primer-addons';
+import { closeLoopElement, onLoopElements, openLoopElements, } from '../../../chat/base/loopElement';
+import { InlineSurface, SURFACE_CATALOG_ID, } from '../a2ui-surface/InlineSurface';
+import { answerAction, readA2uiToolResult } from '../a2ui-surface/toolResult';
+import { useOwnCatalog } from '../a2ui-surface/ownComponents';
+/** How wide the side panel is, at most. */
+export const APP_PANEL_WIDTH = 380;
+/** What is open now: the panels in the order they opened, and the last page. */
+export function elementsByPlace(open) {
+    const pages = open.filter(element => element.where === 'page');
+    return {
+        panels: open.filter(element => element.where === 'panel'),
+        page: pages.length > 0 ? pages[pages.length - 1] : null,
+    };
+}
+function ElementBody({ element, send, }) {
+    const parsed = useMemo(() => readA2uiToolResult(element.shows, SURFACE_CATALOG_ID), [element.shows]);
+    // With the components its developer wrote (P-17).
+    const catalog = useOwnCatalog();
+    const onAction = (action) => {
+        // A button of what its code shows: its action goes to the application,
+        // as a button of an answer does (LOOP P-04).
+        const pressed = answerAction(action);
+        if (pressed)
+            send?.(pressed.message, pressed.forwardedProps);
+    };
+    if (!parsed?.messages || parsed.messages.length === 0) {
+        return _jsx(Text, { sx: { color: 'fg.muted' }, children: "Nothing to show." });
+    }
+    return (_jsx(InlineSurface
+    // Drawn again whole when the code changes it.
+    , { messages: parsed.messages, onAction: onAction, catalog: catalog }, JSON.stringify(element.shows)));
+}
+function ElementHeader({ element }) {
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: 2,
+            mb: 2,
+        }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'bold', m: 0 }, children: element.title }), _jsx(IconButton, { icon: XIcon, variant: "invisible", size: "small", "aria-label": `Close ${element.title}`, onClick: () => closeLoopElement(element.id) })] }));
+}
+/** Every element open in a side panel or on a page, drawn where it belongs. */
+export function AppElements({ workspace, }) {
+    const open = useSyncExternalStore(onLoopElements, openLoopElements, openLoopElements);
+    const { panels, page } = elementsByPlace(open);
+    const send = workspace?.viewControls.send;
+    if (panels.length === 0 && page === null)
+        return null;
+    return (_jsxs(_Fragment, { children: [panels.length > 0 ? (_jsx(Box, { as: "aside", "aria-label": "Side panel", sx: {
+                    position: 'absolute',
+                    top: 0,
+                    right: 0,
+                    bottom: 0,
+                    width: `min(${APP_PANEL_WIDTH}px, 100%)`,
+                    zIndex: 1,
+                    overflowY: 'auto',
+                    borderLeft: '1px solid',
+                    borderColor: 'border.default',
+                    bg: 'canvas.subtle',
+                    boxShadow: 'shadow.medium',
+                    p: 3,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 3,
+                }, children: panels.map(element => (_jsxs(Box, { as: "section", "aria-label": element.title, children: [_jsx(ElementHeader, { element: element }), _jsx(ElementBody, { element: element, send: send })] }, element.id))) })) : null, page !== null ? (_jsxs(Box, { role: "dialog", "aria-label": page.title, sx: {
+                    position: 'absolute',
+                    inset: 0,
+                    zIndex: 2,
+                    overflowY: 'auto',
+                    bg: 'canvas.default',
+                    p: [3, 4],
+                }, children: [_jsx(ElementHeader, { element: page }), _jsx(ElementBody, { element: page, send: send })] })) : null] }));
+}
+export default AppElements;

package/lib/loop/plugins/app-elements/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * `app-elements` — what an application's code opens beside the
+ * conversation (LOOP P-18): `session.show(..., where="panel")` a side panel,
+ * `where="page"` a page of its own over the workspace, each closed by the
+ * code (`session.close`) or by the person. Inline, an element is a message,
+ * which the chat draws (P-04); this plugin draws the other two.
+ *
+ * The chat keeps what is open (`chat/base/loopElement`), from the session
+ * API's `loop.element` events; this plugin draws it from the workspace's
+ * root slot, positioned against the workspace, so that nothing is laid out
+ * while nothing is open.
+ *
+ * @module loop/plugins/app-elements
+ */
+import { type ReactorPlugin } from '@datalayer/reactor';
+export declare const APP_ELEMENTS_PLUGIN_NAME = "@datalayer/loop-plugin-app-elements";
+/** The plugin that draws an application's side panel and pages. */
+export declare const AppElementsPlugin: ReactorPlugin<Record<string, never>, unknown, unknown>;
+export { AppElements, APP_PANEL_WIDTH, elementsByPlace } from './AppElements';
+export default AppElementsPlugin;

package/lib/loop/plugins/app-elements/index.js

@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * `app-elements` — what an application's code opens beside the
+ * conversation (LOOP P-18): `session.show(..., where="panel")` a side panel,
+ * `where="page"` a page of its own over the workspace, each closed by the
+ * code (`session.close`) or by the person. Inline, an element is a message,
+ * which the chat draws (P-04); this plugin draws the other two.
+ *
+ * The chat keeps what is open (`chat/base/loopElement`), from the session
+ * API's `loop.element` events; this plugin draws it from the workspace's
+ * root slot, positioned against the workspace, so that nothing is laid out
+ * while nothing is open.
+ *
+ * @module loop/plugins/app-elements
+ */
+import { definePlugin } from '@datalayer/reactor';
+import { clearLoopElements } from '../../../chat/base/loopElement';
+import { LoopSlots } from '../../core';
+import { AppElements } from './AppElements';
+export const APP_ELEMENTS_PLUGIN_NAME = '@datalayer/loop-plugin-app-elements';
+/** The plugin that draws an application's side panel and pages. */
+export const AppElementsPlugin = definePlugin({
+    name: APP_ELEMENTS_PLUGIN_NAME,
+    displayName: 'Side panel and pages',
+    description: 'What an application opens beside the conversation: a side panel, or a page of its own.',
+    octicon: 'sidebar-expand',
+    build: () => ({
+        components: [
+            {
+                id: 'app-elements',
+                slot: LoopSlots.root,
+                Component: AppElements,
+            },
+        ],
+    }),
+    // A workspace that goes takes what it had open with it.
+    register: () => clearLoopElements,
+});
+export { AppElements, APP_PANEL_WIDTH, elementsByPlace } from './AppElements';
+export default AppElementsPlugin;

package/lib/loop/plugins/app-page/AppPage.d.ts

@@ -9,12 +9,21 @@
  * palette (`loop.canvas.block`, R-01b) and nothing else, so that what the
  * Canvas can place and what the page can draw are one list: a page that
  * uses a block no enabled plugin contributes says so, in place of the page.
+ * The components its developer wrote (LOOP P-17) are among them, contributed
+ * by its own plugin (`app-components`) with their renderers.
+ *
+ * A widget's page written in its code (LOOP P-05) runs in a session of its
+ * own, beside the conversation: as an input changes, the page sends them all
+ * to the session's `page` action and shows what its code answered at
+ * `/outputs/<name>`, in place — no message is sent (`./pageRun`).
  *
  * @module loop/plugins/app-page/AppPage
  */
 import type { JSX } from 'react';
 import type { AppSpec } from '../../../types/agentspecs';
 import { type LoopWorkspaceContext } from '../../core';
+/** How long the page waits after an input changed before it runs (P-05). */
+export declare const PAGE_RUN_DELAY_MS = 300;
 /** The components a page's messages place, each once. */
 export declare function componentsOnPage(messages: readonly unknown[]): string[];
 /**

package/lib/loop/plugins/app-page/AppPage.js

@@ -1,12 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useIAMStore } from '@datalayer/core/lib/state/substates/IAMState';
 import { Box } from '@datalayer/primer-addons';
 import { signal } from '@datalayer/reactor';
 import { useContributions, useSignalValue } from '@datalayer/reactor/react';
 import { catalogOfBlocks } from '../../../components/a2ui';
 import { LoopCanvasBlock, LoopChatTurn, } from '../../core';
 import { InlineSurface, SURFACE_CATALOG_ID, } from '../a2ui-surface/InlineSurface';
-import { appPageAction, appPageData, appPageMessages } from './appPageModel';
+import { useOwnComponents } from '../a2ui-surface/ownComponents';
+import { appPageAction, appPageData, appPageMessages, pageInputsOf, pageOf, } from './appPageModel';
+import { openPageSession, outputsData, runPageIn, } from './pageRun';
+/** How long the page waits after an input changed before it runs (P-05). */
+export const PAGE_RUN_DELAY_MS = 300;
 /** No chat in the workspace: the page reads a turn that never starts. */
 const NO_TURN = signal({ id: 0, status: 'idle' });
 const NO_CONVERSATION = signal([]);
@@ -42,13 +47,15 @@ export function AppPage({ app, workspace }) {
     const blocks = useContributions(LoopCanvasBlock);
     const contributed = [...new Set(blocks.map(entry => entry.value.id))].sort();
     const drawnWith = contributed.join(',');
+    // The renderers of the components its developer wrote (P-17).
+    const own = useOwnComponents();
     const drawing = useMemo(() => {
         const missing = blocksMissing(componentsOnPage(messages), contributed);
         if (missing) {
             return { problem: missing };
         }
         try {
-            return { catalog: catalogOfBlocks(contributed) };
+            return { catalog: catalogOfBlocks(contributed, own) };
         }
         catch (error) {
             return {
@@ -56,9 +63,97 @@ export function AppPage({ app, workspace }) {
             };
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [messages, drawnWith]);
-    const data = useMemo(() => appPageData(app, turn, conversation), [app, turn, conversation]);
+    }, [messages, drawnWith, own]);
     const [refusal, setRefusal] = useState(null);
+    // A widget's page written in its code (P-05): its outputs, as last answered.
+    const page = pageOf(app);
+    const [outputs, setOutputs] = useState({});
+    const data = useMemo(() => ({
+        ...appPageData(app, turn, conversation),
+        ...outputsData(outputs),
+    }), [app, turn, conversation, outputs]);
+    const token = useIAMStore(state => state.token) ?? '';
+    const pageContext = useRef({ serverUrl: '', agentId: '' });
+    pageContext.current = {
+        serverUrl: workspace.sandbox?.agentBaseUrl || workspace.serverUrl || '',
+        agentId: workspace.agentId || app.id,
+        token: token || undefined,
+    };
+    const pageSession = useRef(null);
+    const pageRunning = useRef(false);
+    const pageNext = useRef(null);
+    const pageSent = useRef('');
+    const alive = useRef(true);
+    // The latest inputs win: one run at a time, the last ones written next.
+    const runPage = useCallback((inputs) => {
+        pageNext.current = inputs;
+        if (pageRunning.current) {
+            return;
+        }
+        pageRunning.current = true;
+        void (async () => {
+            while (pageNext.current && alive.current) {
+                const next = pageNext.current;
+                pageNext.current = null;
+                const context = pageContext.current;
+                try {
+                    pageSession.current ??= openPageSession(context);
+                    const turn = await runPageIn(context, await pageSession.current, next);
+                    if (!alive.current)
+                        break;
+                    if ('refused' in turn) {
+                        setRefusal(turn.refused);
+                    }
+                    else {
+                        setRefusal(null);
+                        setOutputs(turn.outputs);
+                    }
+                }
+                catch (error) {
+                    // No session: the next change opens one again.
+                    pageSession.current = null;
+                    if (alive.current) {
+                        setRefusal(error instanceof Error ? error.message : String(error));
+                    }
+                }
+            }
+            pageRunning.current = false;
+        })();
+    }, []);
+    // A live page runs as its inputs change, from the start (their defaults).
+    const unwatch = useRef(null);
+    useEffect(() => {
+        alive.current = true;
+        return () => {
+            alive.current = false;
+            unwatch.current?.();
+        };
+    }, []);
+    const onSurface = useCallback((surface) => {
+        if (!page?.live) {
+            return;
+        }
+        unwatch.current?.();
+        let timer;
+        const changed = (value) => {
+            const inputs = pageInputsOf(app, value);
+            const said = JSON.stringify(inputs);
+            if (said === pageSent.current) {
+                return;
+            }
+            clearTimeout(timer);
+            timer = setTimeout(() => {
+                pageSent.current = said;
+                runPage(inputs);
+            }, PAGE_RUN_DELAY_MS);
+        };
+        const watching = surface.dataModel.subscribe('/inputs', changed);
+        changed(watching.value);
+        unwatch.current = () => {
+            clearTimeout(timer);
+            watching.unsubscribe();
+        };
+    }, [app, page?.live, runPage]);
     // The workspace changes as the chat reports itself; the handler reads the latest.
     const workspaceRef = useRef(workspace);
     workspaceRef.current = workspace;
@@ -72,7 +167,10 @@ export function AppPage({ app, workspace }) {
             return;
         }
         setRefusal(null);
-        if ('stop' in outcome) {
+        if ('runPage' in outcome) {
+            runPage(outcome.runPage);
+        }
+        else if ('stop' in outcome) {
             controls.stop?.();
         }
         else if ('newChat' in outcome) {
@@ -102,9 +200,9 @@ export function AppPage({ app, workspace }) {
                 surface?.dataModel.set(path, '');
             }
         }
-    }, [app]);
+    }, [app, runPage]);
     return (_jsx(Box, { "data-testid": "app-page", sx: { height: '100%', minHeight: 0, overflow: 'auto', p: 3 }, children: 'problem' in drawing ? (_jsx(Box, { role: "status", sx: { color: 'fg.muted', fontSize: 1 }, children: drawing.problem })) : (_jsx(InlineSurface
         // A new list of blocks is a new surface, drawn with it.
-        , { messages: messages, data: data, onAction: onAction, validationError: refusal, catalog: drawing.catalog }, drawnWith)) }));
+        , { messages: messages, data: data, onAction: onAction, validationError: refusal, catalog: drawing.catalog, ...(page ? { onSurface } : {}) }, drawnWith)) }));
 }
 export default AppPage;

package/lib/loop/plugins/app-page/appPageModel.d.ts

@@ -23,7 +23,7 @@
  *
  * @module loop/plugins/app-page/appPageModel
  */
-import type { AppFormField, AppFormSchema, AppSpec } from '../../../types/agentspecs';
+import type { AppFormField, AppFormSchema, AppPageSpec, AppSpec } from '../../../types/agentspecs';
 import type { ChatTurnSnapshot, ConversationEntry } from '../../core';
 /** The id of the editor surface an application's page is drawn in. */
 export declare const APP_PAGE_SURFACE = "app-page";
@@ -92,6 +92,12 @@ export declare function settingDefaults(settings: AppFormSchema | undefined): Re
  * shown and written. Empty lists for a decision, or a kind not known.
  */
 export declare function appKindPaths(app: Pick<AppSpec, 'kind' | 'interface'>): AppKindPaths;
+/** The page its code writes (P-05): a widget's, or none. */
+export declare const pageOf: (app: Pick<AppSpec, "kind" | "interface">) => AppPageSpec | undefined;
+/** The path an output of its page is shown at (P-05). */
+export declare const outputPath: (name: string) => string;
+/** The action that runs a widget's page written in its code (P-05). */
+export declare const PAGE_ACTION = "page";
 /**
  * Whether the workspace draws the application's page: a chat, a widget or a
  * worker whose layout has one (`page`, `split`). A `chat` layout is the
@@ -149,6 +155,12 @@ export declare function givenFiles(files: unknown): {
  * them against the settings' form.
  */
 export declare function settingsOf(app: Pick<AppSpec, 'interface'>, inputs: unknown): Record<string, unknown>;
+/**
+ * The inputs of a widget's page written in its code (P-05), as the page
+ * holds them, typed as its form says, for the session's `page` action: the
+ * runtime checks them against the same form.
+ */
+export declare function pageInputsOf(app: Pick<AppSpec, 'kind' | 'interface'>, inputs: unknown): Record<string, unknown>;
 /**
  * What the page did besides its message, for the session API: the action of
  * the block pressed, the files given with it, the settings it holds. Sent
@@ -182,6 +194,10 @@ export type AppPageOutcome = {
     stop: true;
 } | {
     newChat: true;
+}
+/** A widget's page, to run on these inputs (P-05): no message is sent. */
+ | {
+    runPage: Record<string, unknown>;
 } | {
     refused: string;
 };

package/lib/loop/plugins/app-page/appPageModel.js

@@ -2,6 +2,7 @@
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
+import { pageOutputShows } from '../../apps/appspec';
 /** The id of the editor surface an application's page is drawn in. */
 export const APP_PAGE_SURFACE = 'app-page';
 /** The id of the A2UI surface itself, inside it. */
@@ -178,12 +179,49 @@ export function appKindPaths(app) {
         meaning: `The setting “${settingTitle(id, field)}”.`,
         words: settingTitle(id, field),
     }));
+    // A widget's page written in its code (P-05): its inputs taken, its
+    // outputs published, and the action that runs it.
+    const page = pageOf(app);
+    if (!page) {
+        return {
+            ...kind,
+            publishes: [...kind.publishes, ...inputs],
+            accepts: [...kind.accepts, ...inputs],
+        };
+    }
+    const pageInputs = settingFields(page.inputs).map(([id, field]) => ({
+        path: inputPath(id),
+        meaning: `The input “${settingTitle(id, field)}” of its page.`,
+        words: settingTitle(id, field),
+    }));
+    const outputs = page.outputs.map(output => ({
+        path: outputPath(output.name),
+        meaning: `What its page shows as “${output.title || output.name}”, drawn with a ${output.component}, for its inputs.`,
+        words: output.title || output.name,
+        ...(output.component === 'Table' || output.component === 'Chart'
+            ? { list: true }
+            : {}),
+    }));
     return {
         ...kind,
-        publishes: [...kind.publishes, ...inputs],
-        accepts: [...kind.accepts, ...inputs],
+        publishes: [...kind.publishes, ...inputs, ...pageInputs, ...outputs],
+        accepts: [...kind.accepts, ...inputs, ...pageInputs],
+        actions: [...kind.actions, PAGE],
     };
 }
+/** The page its code writes (P-05): a widget's, or none. */
+export const pageOf = (app) => app.kind === 'widget' ? app.interface.page : undefined;
+/** The path an output of its page is shown at (P-05). */
+export const outputPath = (name) => `/outputs/${name}`;
+/** The action that runs a widget's page written in its code (P-05). */
+export const PAGE_ACTION = 'page';
+const PAGE = {
+    name: PAGE_ACTION,
+    meaning: 'Run its page on its inputs: every value written under /inputs, its outputs shown in place at /outputs.',
+    words: 'Run its page',
+    context: [],
+    asks: {},
+};
 /** The components its surface has, or none. */
 const surfaceComponents = (app) => app.interface.surface?.components ?? [];
 /**
@@ -257,7 +295,10 @@ export function appPageInitialData(app) {
         // Each setting at its default, as the settings' form holds it; a
         // ChoicePicker a builder placed at a setting holds a list of the values
         // chosen.
-        const inputs = settingDefaults(app.interface.settings);
+        const inputs = {
+            ...settingDefaults(app.interface.settings),
+            ...settingDefaults(pageOf(app)?.inputs),
+        };
         for (const node of app.interface.surface?.components ?? []) {
             const bound = node.value?.path;
             const id = typeof bound === 'string' && bound.startsWith('/inputs/')
@@ -269,6 +310,9 @@ export function appPageInitialData(app) {
         }
         tree.inputs = inputs;
     }
+    if (pageOf(app)) {
+        tree.outputs = {};
+    }
     if (paths.accepts.some(entry => entry.path === DRAFT.path)) {
         tree.draft = '';
     }
@@ -362,11 +406,23 @@ export function givenFiles(files) {
  * them against the settings' form.
  */
 export function settingsOf(app, inputs) {
+    return formValuesOf(app.interface.settings, inputs);
+}
+/**
+ * The inputs of a widget's page written in its code (P-05), as the page
+ * holds them, typed as its form says, for the session's `page` action: the
+ * runtime checks them against the same form.
+ */
+export function pageInputsOf(app, inputs) {
+    return formValuesOf(pageOf(app)?.inputs, inputs);
+}
+/** A form's values as the page holds them, each typed as its field says. */
+function formValuesOf(form, inputs) {
     const values = inputs && typeof inputs === 'object'
         ? inputs
         : {};
     const settings = {};
-    for (const [id, field] of settingFields(app.interface.settings)) {
+    for (const [id, field] of settingFields(form)) {
         const held = values[id];
         if (held === undefined || held === null) {
             continue;
@@ -425,6 +481,8 @@ export function appPageAction(app, event, read, lastInputs = '') {
         ...(settings ? { settings } : {}),
     });
     switch (event.name) {
+        case PAGE_ACTION:
+            return { runPage: pageInputsOf(app, read('/inputs')) };
         case 'stop':
             return { stop: true };
         case 'new':
@@ -486,17 +544,72 @@ const button = (id, label, name, primary = false) => [
  * filled — no action, no button: they go with the next run.
  */
 function settingsForm(app) {
+    const page = pageOf(app);
+    if (page) {
+        return pageForm(app, page);
+    }
     return app.interface.settings && settingFields(app.interface.settings).length
         ? [
             {
                 id: 'settings',
                 component: 'Form',
                 schema: app.interface.settings,
+                // Drawn with the inputs its uiSchema names (P-20).
+                ...(app.interface.settingsUi ? { ui: app.interface.settingsUi } : {}),
                 values: { path: '/inputs' },
             },
         ]
         : [];
 }
+/**
+ * A widget's page written in its code (P-05): one Form of its settings and
+ * its inputs, written at `/inputs` as they are filled — the page runs its
+ * code on them as they change — then each output, under its title, drawn
+ * with its component from `/outputs/<name>`; a Run button when it is not
+ * live.
+ */
+function pageForm(app, page) {
+    const settings = app.interface.settings;
+    const schema = {
+        ...page.inputs,
+        type: 'object',
+        properties: { ...settings?.properties, ...page.inputs.properties },
+        required: [...(settings?.required ?? []), ...(page.inputs.required ?? [])],
+    };
+    const ui = { ...app.interface.settingsUi, ...page.inputsUi };
+    const outputs = page.outputs.flatMap(output => [
+        ...(output.title
+            ? [
+                {
+                    id: `output-${output.name}-title`,
+                    component: 'Text',
+                    text: output.title,
+                    variant: 'h4',
+                },
+            ]
+            : []),
+        {
+            ...output.props,
+            id: `output-${output.name}`,
+            component: output.component,
+            [pageOutputShows(output.component, app.interface.customComponents) ??
+                'text']: {
+                path: outputPath(output.name),
+            },
+        },
+    ]);
+    return [
+        {
+            id: 'inputs',
+            component: 'Form',
+            schema,
+            ...(Object.keys(ui).length > 0 ? { ui } : {}),
+            values: { path: '/inputs' },
+        },
+        ...(page.live ? [] : button('run-page', 'Run', PAGE_ACTION, true)),
+        ...outputs,
+    ];
+}
 /**
  * The page drawn when the application has a page layout and no surface
  * composed: what its kind publishes, its settings as inputs, and the
@@ -510,6 +623,11 @@ export function defaultAppSurface(app) {
             body.push(text('question', '/question', 'h3'), text('answer', '/answer'), text('status', '/status', 'caption'), ...inputs);
             break;
         case 'widget':
+            if (pageOf(app)) {
+                // Its page is its code's (P-05): the inputs, and what it shows for them.
+                body.push(...inputs);
+                break;
+            }
             body.push(...inputs, { id: 'actions', component: 'Row', children: ['run', 'stop'] }, ...button('run', 'Run', 'run', true), ...button('stop', 'Stop', 'stop'), text('status', '/status', 'caption'), text('output', '/output'));
             break;
         case 'worker':

package/lib/loop/plugins/app-page/index.d.ts

@@ -41,4 +41,5 @@ export type AppHostPageProps = {
 export declare function defineAppHostPagePlugin(app: AppSpec, Page: ComponentType<AppHostPageProps>): ReactorPlugin<Record<string, never>, unknown, unknown>;
 export { AppPage, type AppPageProps } from './AppPage';
 export * from './appPageModel';
+export * from './pageRun';
 export default defineAppPagePlugin;

package/lib/loop/plugins/app-page/index.js

@@ -62,4 +62,5 @@ export function defineAppHostPagePlugin(app, Page) {
 }
 export { AppPage } from './AppPage';
 export * from './appPageModel';
+export * from './pageRun';
 export default defineAppPagePlugin;