@datalayer/agent-runtimes 1.3.84 → 1.3.85

package/lib/examples/AgentA2ATeamExample.d.ts

@@ -19,15 +19,16 @@
  * list_invoices…" while Accounting calls Odoo. Then the report appears. The
  * page's own state is `useA2ATeam`'s, which the landing's home page runs too.
  *
- * Under the graph, each member has its own Agent Inspector: Sales' — its
- * model turns, its `ask_accounting` call, the A2A messages it sends and
- * receives — and Accounting's — what it received over A2A, its Odoo MCP
- * calls, `write_notebook`, its status updates and artifacts, as the A2A
- * stream tells them. Both read one record (`useAgentInspector`), fed by the
- * team (`useA2ATeam`'s `inspector`) and by the fetch the A2A client sends
- * with (`inspectA2AFetch`); an A2A message shows in both, sent in one and
- * received in the other. Right-click a member for its menu: *Inspect the
- * agent…* opens its inspector over the page.
+ * Under the graph, each member has its own Agent Inspector, core's OTEL
+ * view of the page's OpenTelemetry spans: Sales' — its model turns
+ * (`invoke_agent`), its `ask_accounting` call (`execute_tool`), the A2A
+ * requests it sends and what came back, event by event — and Accounting's —
+ * the A2A requests sent to it (`peer.service`), its Odoo MCP calls,
+ * `write_notebook`, as the A2A stream tells them. Both read one tracer
+ * (`useAgentInspector`), fed by the team (`useA2ATeam`'s `inspector`) and by
+ * the fetch the A2A client sends with (`traceA2AFetch`); an A2A request
+ * shows in both. Right-click a member for its menu: *Inspect the agent…*
+ * opens its inspector over the page.
  *
  * Sales' suggestions — its Appspec's starters — are chips in its balloon
  * while it waits for a question: one clicked is asked, as if typed.

package/lib/examples/AgentA2ATeamExample.js

@@ -10,9 +10,9 @@ import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
 import { useBrowserInference } from '../hooks/useBrowserInference';
 import { readJwtClaims, tokenLifetimeMs, useAnonymousSessionStore, } from '../runtimes/browser/anonymousToken';
 import { connectA2APeer } from '../runtimes/browser/a2aPeer';
-import { A2ATeamGraph, NOTEBOOK_AND_WORDS, teamConnectionsOf, teamToolClassifier, useA2ATeam, usePeerSandbox, } from '../components/teams';
+import { A2ATeamGraph, SceneView, NOTEBOOK_AND_WORDS, teamConnectionsOf, teamToolClassifier, useA2ATeam, usePeerSandbox, } from '../components/teams';
 import { ACCOUNTING_APP_0_0_1, SALES_APP_0_0_1 } from '../specs/apps';
-import { AgentInspector, classifyToolCall, inspectA2AFetch, useAgentInspector, } from '../components/inspector';
+import { AgentInspector, classifyToolCall, traceA2AFetch, useAgentInspector, } from '../components/inspector';
 import { SALES_AND_ACCOUNTING_TEAM_SPEC_0_0_1 } from '../specs/teams/teams';
 const TEAM = SALES_AND_ACCOUNTING_TEAM_SPEC_0_0_1;
 const SALES = SALES_APP_0_0_1;
@@ -46,8 +46,18 @@ function AgentA2ATeam() {
     }, [accountingKey]);
     const [accountingKeyEnded, setAccountingKeyEnded] = useState(() => accountingKeyClock !== undefined &&
         accountingKeyClock.expiresAt <= Date.now());
-    // One record of what both members do, each inspector showing its own.
-    const { sink: inspector } = useAgentInspector();
+    // One tracer of what both members do, each inspector showing its own.
+    const { tracer: inspector } = useAgentInspector();
+    // The members as the transcript names them: the spans' services, and the
+    // connections a tool call is of (Accounting → Odoo).
+    const sceneMembers = useMemo(() => [
+        { id: SALES.id, name: SALES.name },
+        {
+            id: ACCOUNTING.id,
+            name: ACCOUNTING.name,
+            connections: ACCOUNTING_CONNECTIONS,
+        },
+    ], []);
     const [peer, setPeer] = useState(null);
     const [peerError, setPeerError] = useState(null);
     const [draft, setDraft] = useState('');
@@ -61,9 +71,9 @@ function AgentA2ATeam() {
         connectA2APeer({
             url: accountingUrl,
             key: accountingKey,
-            // The A2A traffic, recorded: Sales sends, Accounting answers.
-            fetch: inspectA2AFetch(globalThis.fetch.bind(globalThis), {
-                sink: inspector,
+            // The A2A traffic, as spans: Sales sends, Accounting answers.
+            fetch: traceA2AFetch(globalThis.fetch.bind(globalThis), {
+                tracer: inspector,
                 asker: SALES.name,
                 peer: ACCOUNTING.name,
                 classifyTool: teamToolClassifier(ACCOUNTING_CONNECTIONS, classifyToolCall),
@@ -116,66 +126,66 @@ function AgentA2ATeam() {
                     px: 2,
                     pt: 2,
                     mb: 3,
-                }, children: _jsx(A2ATeamGraph, { entry: {
-                        id: SALES.id,
-                        name: SALES.name,
-                        emoji: SALES.emoji,
-                        character: SALES.interface.assistant ?? 'paperclip',
-                        where: salesMember.runsIn === 'browser'
-                            ? 'in your browser'
-                            : 'on a runtime',
-                        persona: team.entryPersona,
-                        onToggle: () => composer.current?.focus(),
-                        conversationLabel: `Ask ${SALES.name}`,
-                        onAway: team.setEntryAway,
-                        history: team.entryHistory,
-                        expandTarget: notebookArea,
-                        notebookTitle: `${ACCOUNTING.name}\u2019s notebook`,
-                        suggestions: team.ready && !team.busy ? suggestions : undefined,
-                        onSuggestion: suggestion => send(suggestion.prompt),
-                        inspector,
-                        onStop: team.busy ? team.stop : undefined,
-                        about: {
+                }, children: _jsx(SceneView, { members: sceneMembers, tracer: inspector, emptyText: "Ask Sales: what it says to Accounting, what Accounting reads in Odoo and answers, line by line, shows here.", children: _jsx(A2ATeamGraph, { entry: {
+                            id: SALES.id,
                             name: SALES.name,
-                            spec: `${SALES.id}:${SALES.version}`,
-                            model: SALES.model || undefined,
-                            where: 'in your browser',
-                            description: SALES.description || undefined,
-                        },
-                    }, peer: {
-                        id: ACCOUNTING.id,
-                        name: ACCOUNTING.name,
-                        // Its face as its card says it, once it is reached.
-                        emoji: peer?.face?.emoji ?? ACCOUNTING.emoji,
-                        character: ACCOUNTING.interface.assistant ?? 'wizard',
-                        where: accountingWhere,
-                        persona: team.peerPersona,
-                        onAway: team.setPeerAway,
-                        history: team.peerHistory,
-                        connections: ACCOUNTING_CONNECTIONS,
-                        inspector,
-                        sandbox: accountingSandbox,
-                        about: {
+                            emoji: SALES.emoji,
+                            character: SALES.interface.assistant ?? 'paperclip',
+                            where: salesMember.runsIn === 'browser'
+                                ? 'in your browser'
+                                : 'on a runtime',
+                            persona: team.entryPersona,
+                            onToggle: () => composer.current?.focus(),
+                            conversationLabel: `Ask ${SALES.name}`,
+                            onAway: team.setEntryAway,
+                            history: team.entryHistory,
+                            expandTarget: notebookArea,
+                            notebookTitle: `${ACCOUNTING.name}\u2019s notebook`,
+                            suggestions: team.ready && !team.busy ? suggestions : undefined,
+                            onSuggestion: suggestion => send(suggestion.prompt),
+                            inspector,
+                            onStop: team.busy ? team.stop : undefined,
+                            about: {
+                                name: SALES.name,
+                                spec: `${SALES.id}:${SALES.version}`,
+                                model: SALES.model || undefined,
+                                where: 'in your browser',
+                                description: SALES.description || undefined,
+                            },
+                        }, peer: {
+                            id: ACCOUNTING.id,
                             name: ACCOUNTING.name,
-                            spec: `${ACCOUNTING.id}:${ACCOUNTING.version}`,
-                            model: ACCOUNTING.model || undefined,
+                            // Its face as its card says it, once it is reached.
+                            emoji: peer?.face?.emoji ?? ACCOUNTING.emoji,
+                            character: ACCOUNTING.interface.assistant ?? 'wizard',
                             where: accountingWhere,
-                            // What its A2A card says, once it is reached.
-                            description: peer?.card.description || ACCOUNTING.description || undefined,
-                            skills: peer?.card.skills.map(skill => skill.name),
-                            protocol: peer ? 'a2a' : undefined,
-                            url: peer ? accountingUrl : undefined,
-                        },
-                    }, flow: team.flow, calls: team.calls, 
-                    // Room for the balloons: suggestions, *more* and a notebook.
-                    balloonRoom: 320, connected: peer !== null, label: peer ? `A2A · ${peer.skill.name}` : 'A2A · not connected' }) }), _jsx(Box, { ref: notebookArea, sx: { mb: team.notebook ? 3 : 0 }, "data-team-notebook-placement": "under-graph" }), _jsx(Box, { sx: {
+                            persona: team.peerPersona,
+                            onAway: team.setPeerAway,
+                            history: team.peerHistory,
+                            connections: ACCOUNTING_CONNECTIONS,
+                            inspector,
+                            sandbox: accountingSandbox,
+                            about: {
+                                name: ACCOUNTING.name,
+                                spec: `${ACCOUNTING.id}:${ACCOUNTING.version}`,
+                                model: ACCOUNTING.model || undefined,
+                                where: accountingWhere,
+                                // What its A2A card says, once it is reached.
+                                description: peer?.card.description || ACCOUNTING.description || undefined,
+                                skills: peer?.card.skills.map(skill => skill.name),
+                                protocol: peer ? 'a2a' : undefined,
+                                url: peer ? accountingUrl : undefined,
+                            },
+                        }, flow: team.flow, calls: team.calls, 
+                        // Room for the balloons: suggestions, *more* and a notebook.
+                        balloonRoom: 320, connected: peer !== null, label: peer ? `A2A · ${peer.skill.name}` : 'A2A · not connected' }) }) }), _jsx(Box, { ref: notebookArea, sx: { mb: team.notebook ? 3 : 0 }, "data-team-notebook-placement": "under-graph" }), _jsx(Box, { sx: {
                     display: 'grid',
                     gridTemplateColumns: ['1fr', '1fr', '1fr 1fr'],
                     gap: 3,
                     mb: 3,
-                }, "data-team-inspectors": "", children: [SALES, ACCOUNTING].map(member => (_jsxs(Box, { sx: { minWidth: 0 }, "data-team-inspector": member.id, children: [_jsxs(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: [member.emoji, " ", member.name, "\u2019s Agent Inspector"] }), _jsx(AgentInspector, { sink: inspector, agent: member.name, maxHeight: 360, exportName: `agent-inspector-${member.id}`, emptyText: member === SALES
-                                ? 'Its model turns, its call to Accounting and the A2A messages it sends and receives show here.'
-                                : 'What it receives over A2A, its Odoo MCP calls and what it sends back show here.' })] }, member.id))) }), _jsxs(Box, { sx: { display: 'flex', gap: 3, flexWrap: 'wrap' }, children: [_jsxs(Box, { sx: { flex: '1 1 420px', minWidth: 0 }, children: [_jsxs(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: ["Ask ", SALES.name] }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, mt: 0 }, children: ["Or choose one of ", SALES.name, "\u2019s suggestions in its balloon."] }), _jsx(Textarea, { ref: composer, block: true, rows: 3, value: draft, placeholder: "Ask for a financial report\u2026", onChange: event => setDraft(event.target.value), onKeyDown: event => {
+                }, "data-team-inspectors": "", children: [SALES, ACCOUNTING].map(member => (_jsxs(Box, { sx: { minWidth: 0 }, "data-team-inspector": member.id, children: [_jsxs(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: [member.emoji, " ", member.name, "\u2019s Agent Inspector"] }), _jsx(AgentInspector, { tracer: inspector, agent: member.name, compact: true, maxHeight: 360, exportName: `agent-inspector-${member.id}`, emptyText: member === SALES
+                                ? 'Its model turns, its call to Accounting and the A2A requests it sends, with what came back, show here.'
+                                : 'The A2A requests sent to it, its Odoo MCP calls and what it sends back show here.' })] }, member.id))) }), _jsxs(Box, { sx: { display: 'flex', gap: 3, flexWrap: 'wrap' }, children: [_jsxs(Box, { sx: { flex: '1 1 420px', minWidth: 0 }, children: [_jsxs(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: ["Ask ", SALES.name] }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, mt: 0 }, children: ["Or choose one of ", SALES.name, "\u2019s suggestions in its balloon."] }), _jsx(Textarea, { ref: composer, block: true, rows: 3, value: draft, placeholder: "Ask for a financial report\u2026", onChange: event => setDraft(event.target.value), onKeyDown: event => {
                                     if (event.key === 'Enter' && !event.shiftKey) {
                                         event.preventDefault();
                                         send(draft);

package/lib/examples/AssistantExample.js

@@ -15,7 +15,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * and so are the characters clippy.js publishes, fetched when picked.
  */
 import { useEffect, useRef, useState } from 'react';
-import { useAgentInspector } from '../components/inspector/agentInspector';
+import { useAgentInspector } from '../components/inspector/agentSpans';
 import { buildReactorFromPlugins } from '@datalayer/reactor';
 import { Button, Heading, Text, ToggleSwitch } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
@@ -96,7 +96,7 @@ const AssistantExample = () => {
     // How the balloon shows the conversation (T-23): history, or current.
     const [balloon, setBalloon] = useState('history');
     // What the agent does, for the menu's *Inspect the agent…*.
-    const { sink: inspector } = useAgentInspector();
+    const { tracer: inspector } = useAgentInspector();
     // Pixel, the test sprite, read once through the clippy.js reader.
     const [pixel, setPixel] = useState();
     useEffect(() => {

package/lib/loop/apps/AppComposer.d.ts

@@ -23,7 +23,8 @@
  *   conversation keeps its profile: the picker says so and picks no other.
  *
  * Given the application as the person reads it (`translatedAppspec`, LOOP
- * P-26), its words are theirs; the composer's own, `language`'s.
+ * P-26), its words are theirs; the composer's own, the chat's language's
+ * (`useChatLanguage`).
  *
  * @module loop/apps/AppComposer
  */

package/lib/loop/apps/AppComposer.js

@@ -28,7 +28,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  *   conversation keeps its profile: the picker says so and picks no other.
  *
  * Given the application as the person reads it (`translatedAppspec`, LOOP
- * P-26), its words are theirs; the composer's own, `language`'s.
+ * P-26), its words are theirs; the composer's own, the chat's language's
+ * (`useChatLanguage`).
  *
  * @module loop/apps/AppComposer
  */
@@ -40,8 +41,8 @@ import { useSignalValue } from '@datalayer/reactor/react';
 import { readFile, } from '../../components/a2ui/datalayer/FileUpload';
 import { LoopChatExtras, LoopCommand, LoopRunProps, LoopSlots, } from '../core';
 import { commandPrompt, modeChoice, modeDefaults, profileChoice, startersFor, } from './composer';
-import { DEFAULT_LANGUAGE } from './appspec';
 import { interfaceWords } from './language';
+import { useChatLanguage } from '../../chat/ChatLanguage';
 import { uploadsAccept, uploadsInWords, uploadsRefusal } from './uploads';
 /**
  * Files chosen in the composer, held for the next message: the refusal the
@@ -89,7 +90,6 @@ export const needsAppComposer = (app) => (app.interface.commands ?? []).length >
  * Nothing for an application with none: its plugin contributes nothing.
  */
 export function defineAppComposerPlugin(app) {
-    const words = interfaceWords(app.interface.language ?? DEFAULT_LANGUAGE);
     const profiles = app.interface.profiles ?? [];
     /** The profile picked, and whether the conversation has started with it. */
     const profile = signal(profileChoice(app)?.id);
@@ -98,6 +98,8 @@ export function defineAppComposerPlugin(app) {
         openers: startersAsOpeners(startersFor(app, profile.value)),
     }));
     function ProfilePicker() {
+        // In the chat's language, as the chat's own words (P-26).
+        const words = interfaceWords(useChatLanguage());
         const now = profileChoice(app, useSignalValue(profile));
         const kept = useSignalValue(started);
         if (!now) {
@@ -131,6 +133,7 @@ export function defineAppComposerPlugin(app) {
     /** The files held for the next message, and the last refusal (P-21). */
     const held = signal({ files: [], refused: null });
     function Attach() {
+        const words = interfaceWords(useChatLanguage());
         const now = useSignalValue(held);
         const input = useRef(null);
         if (!uploads) {

package/lib/loop/apps/AppRenderer.d.ts

@@ -176,7 +176,8 @@ export type AppPreset = {
  *   whose contributions are the blocks it may draw (R-01b); a thumb and a
  *   comment on each answer when its record keeps feedback (V-18); its
  *   commands in the composer's `/` menu and its modes beside it (P-19); the
- *   side panel and the pages its code opens (`app-elements`, P-18); what it
+ *   side panel and the pages its code opens (`app-elements`, P-18); the
+ *   components its developer wrote (`app-components`, P-17); what it
  *   keeps and for how long, under its prompt before the first message, when
  *   `kept` says it (R-31); with
  *   `sidebar`, its rules and approvals card, its activity feed and its

package/lib/loop/apps/AppRenderer.js

@@ -58,6 +58,7 @@ import { LoopEmbed } from '../embed/LoopEmbed';
 import { dumpAppspec } from './appspec';
 import { defineAppActivityPlugin } from '../plugins/app-activity';
 import { AppElementsPlugin } from '../plugins/app-elements';
+import { defineAppComponentsPlugin, hasCustomComponents, } from '../plugins/app-components';
 import { defineAppComputerPlugin } from '../plugins/app-computer';
 import { defineAppRulesPlugin } from '../plugins/app-rules';
 import { defineAppComposerPlugin, needsAppComposer, startersAsOpeners, } from './AppComposer';
@@ -67,6 +68,7 @@ import { defineAppFeedbackPlugin } from './AppFeedback';
 import { defineAppKeptPlugin } from './AppKept';
 import { keepsFeedback } from './feedback';
 import { keptBeforeFirstMessage } from './kept';
+import { ChatLanguage } from '../../chat/ChatLanguage';
 /** The id of an agent or a Cog, without its version. */
 export const agentIdOf = (app) => {
     const reference = app.agent || app.team;
@@ -167,7 +169,8 @@ export function appLayoutOptions(app) {
  *   whose contributions are the blocks it may draw (R-01b); a thumb and a
  *   comment on each answer when its record keeps feedback (V-18); its
  *   commands in the composer's `/` menu and its modes beside it (P-19); the
- *   side panel and the pages its code opens (`app-elements`, P-18); what it
+ *   side panel and the pages its code opens (`app-elements`, P-18); the
+ *   components its developer wrote (`app-components`, P-17); what it
  *   keeps and for how long, under its prompt before the first message, when
  *   `kept` says it (R-31); with
  *   `sidebar`, its rules and approvals card, its activity feed and its
@@ -203,6 +206,9 @@ export function appPreset(app, options = {}) {
         plugins: [
             defineAppPlugin(app, shown),
             ...(withPage ? [defineAppPagePlugin(shown), ...blocks] : []),
+            // The components its developer wrote (LOOP P-17): blocks of its page
+            // and renderers of its page, its elements and its answers — its own.
+            ...(hasCustomComponents(app) ? [defineAppComponentsPlugin(app)] : []),
             // Its commands in the composer's `/` menu, its modes and its profiles
             // beside the composer (LOOP P-19, P-20) and what a person may attach
             // there (P-21): only for an application that has some.
@@ -385,31 +391,34 @@ export function AppRenderer({ app, plugins = NO_PLUGINS, instance, onPresence, o
     if ('problem' in preset) {
         return (_jsx("div", { role: "status", style: { padding: 16 }, children: preset.problem }));
     }
-    return (_jsx(LoopEmbed
-    // The application's own agent: created under its id, so that its
-    // spec is applied to an agent of its own, never to the one it extends.
-    , { 
+    return (
+    // The chat's own words in the person's language too (P-26): the host's,
+    // else the browser's.
+    _jsx(ChatLanguage, { language: language, children: _jsx(LoopEmbed
         // The application's own agent: created under its id, so that its
         // spec is applied to an agent of its own, never to the one it extends.
-        agentId: app.id, ...preset.workspace, ...(frame
-            ? {
-                frameTitle: [app.emoji, shown.name].filter(Boolean).join(' '),
-            }
-            : {}), 
-        // Its rules, activity and computer on a rail, one at a time (T-07).
-        sidebarRail: sidebar || computer, teamPicker: false, showAgentVariants: false, graph: false, pluginsPanel: false, datalayerAgentSpecId: DATALAYER_BOOTSTRAP_AGENTSPEC, 
-        // Where an application runs is decided by its host — the Studio's
-        // Preview, the hosted page — not offered to its user.
-        targetFixed: true, ...(named ? { themeVariant: named.variant } : {}), ...(namedMode ? { colorMode: namedMode } : {}), themeOverrides: themeOverrides, 
-        // Its own face, name and welcome in the chat (T-08); no counters: a
-        // person using an application is not asking about tokens.
-        presence: {
-            name: shown.name,
-            face: app.emoji,
-            welcome: shown.interface.welcome || shown.description,
-            paused,
-            onPresence,
-            onSaying,
-        }, showTokenUsage: false, datalayerCreatePayload: datalayerCreatePayload, ...embed, plugins: allPlugins }));
+        , { 
+            // The application's own agent: created under its id, so that its
+            // spec is applied to an agent of its own, never to the one it extends.
+            agentId: app.id, ...preset.workspace, ...(frame
+                ? {
+                    frameTitle: [app.emoji, shown.name].filter(Boolean).join(' '),
+                }
+                : {}), 
+            // Its rules, activity and computer on a rail, one at a time (T-07).
+            sidebarRail: sidebar || computer, teamPicker: false, showAgentVariants: false, graph: false, pluginsPanel: false, datalayerAgentSpecId: DATALAYER_BOOTSTRAP_AGENTSPEC, 
+            // Where an application runs is decided by its host — the Studio's
+            // Preview, the hosted page — not offered to its user.
+            targetFixed: true, ...(named ? { themeVariant: named.variant } : {}), ...(namedMode ? { colorMode: namedMode } : {}), themeOverrides: themeOverrides, 
+            // Its own face, name and welcome in the chat (T-08); no counters: a
+            // person using an application is not asking about tokens.
+            presence: {
+                name: shown.name,
+                face: app.emoji,
+                welcome: shown.interface.welcome || shown.description,
+                paused,
+                onPresence,
+                onSaying,
+            }, showTokenUsage: false, datalayerCreatePayload: datalayerCreatePayload, ...embed, plugins: allPlugins }) }));
 }
 export default AppRenderer;

package/lib/loop/apps/appspec.d.ts

@@ -24,7 +24,7 @@
  *
  * @module loop/apps/appspec
  */
-import type { AppAccent, AppThemeMode, AppThemeVariant, AppAssistantCharacter, AppEmbedMode, AppVoiceSpec, AppKind, AppLayout, AppSpec } from '../../types/agentspecs';
+import type { AppAccent, AppThemeMode, AppThemeVariant, AppAssistantCharacter, AppEmbedMode, AppCustomComponentSpec, AppVoiceSpec, AppKind, AppLayout, AppPageOutputComponent, AppSpec } from '../../types/agentspecs';
 /** The version of the spec itself. */
 export declare const APP_SCHEMA = "loop.app/v1";
 /** The language an application's own words are in, unless it says (LOOP P-26). */
@@ -62,6 +62,16 @@ export declare function retentionDays(keepFor: string): number;
 export declare function emptyAppspec(kind?: AppKind): AppSpec;
 /** An application's voice (VOICE.md VO-41): off unless said. */
 export declare const DEFAULT_VOICE: AppVoiceSpec;
+/** What a page's output may be drawn with (LOOP P-05), and the property of each that shows its value. */
+export declare const PAGE_OUTPUT_SHOWS: Record<AppPageOutputComponent, string>;
+/** The height of a component its developer wrote (P-17), unless it says. */
+export declare const DEFAULT_CUSTOM_HEIGHT = 240;
+/**
+ * The property a page's output fills with its value (P-05): a catalog
+ * component's (`PAGE_OUTPUT_SHOWS`), or what a component of the
+ * application's own shows first (P-17). Undefined for any other.
+ */
+export declare function pageOutputShows(component: string, own?: readonly AppCustomComponentSpec[]): string | undefined;
 /** What reading a document gives: the application, and what the document got wrong. */
 export interface ParsedAppspec {
     app: AppSpec;

package/lib/loop/apps/appspec.js

@@ -363,6 +363,103 @@ function parseUploads(data) {
         maxFiles: numberOf(data.max_files, DEFAULT_MAX_FILES),
     };
 }
+/** What a page's output may be drawn with (LOOP P-05), and the property of each that shows its value. */
+export const PAGE_OUTPUT_SHOWS = {
+    Text: 'text',
+    Image: 'url',
+    Table: 'rows',
+    Chart: 'points',
+};
+/** The height of a component its developer wrote (P-17), unless it says. */
+export const DEFAULT_CUSTOM_HEIGHT = 240;
+/**
+ * A component its developer wrote (LOOP P-17), as written: its schema and
+ * example kept whole, so that the checks say what is wrong with them.
+ */
+function parseCustomComponent(data) {
+    const component = {
+        name: text(data.name),
+        description: text(data.description),
+        props: isData(data.props)
+            ? JSON.parse(JSON.stringify(data.props))
+            : { type: 'object', properties: {} },
+        shows: texts(data.shows),
+        sends: texts(data.sends),
+        source: text(data.source),
+        integrity: text(data.integrity),
+        height: numberOf(data.height, DEFAULT_CUSTOM_HEIGHT),
+    };
+    if (isData(data.example)) {
+        component.example = JSON.parse(JSON.stringify(data.example));
+    }
+    return component;
+}
+function dumpCustomComponent(component) {
+    const written = new Writer()
+        .text('name', component.name, '\u0000')
+        .text('description', component.description, '\u0000');
+    written.data.props = JSON.parse(JSON.stringify(component.props));
+    written
+        .list('shows', component.shows)
+        .list('sends', component.sends)
+        .text('source', component.source, '\u0000')
+        .text('integrity', component.integrity)
+        .value('height', component.height, DEFAULT_CUSTOM_HEIGHT);
+    if (component.example) {
+        written.data.example = JSON.parse(JSON.stringify(component.example));
+    }
+    return written.data;
+}
+/**
+ * The property a page's output fills with its value (P-05): a catalog
+ * component's (`PAGE_OUTPUT_SHOWS`), or what a component of the
+ * application's own shows first (P-17). Undefined for any other.
+ */
+export function pageOutputShows(component, own = []) {
+    if (component in PAGE_OUTPUT_SHOWS) {
+        return PAGE_OUTPUT_SHOWS[component];
+    }
+    return own.find(each => each.name === component)?.shows[0];
+}
+/**
+ * A widget's page written in its code (P-05), as written: its inputs a form
+ * kept whole, an output drawn with another component kept as written so that
+ * the checks say it.
+ */
+function parsePage(data) {
+    const page = {
+        function: text(data.function),
+        inputs: (isData(data.inputs)
+            ? JSON.parse(JSON.stringify(data.inputs))
+            : {}),
+        outputs: records(data.outputs).map(output => ({
+            name: text(output.name),
+            title: text(output.title),
+            component: text(output.component, 'Text'),
+            props: isData(output.props)
+                ? JSON.parse(JSON.stringify(output.props))
+                : {},
+        })),
+        live: data.live !== false,
+    };
+    if (isData(data.inputs_ui)) {
+        page.inputsUi = JSON.parse(JSON.stringify(data.inputs_ui));
+    }
+    return page;
+}
+function dumpPage(page) {
+    const written = new Writer().text('function', page.function, '\u0000');
+    written.data.inputs = JSON.parse(JSON.stringify(page.inputs));
+    if (page.inputsUi) {
+        written.data.inputs_ui = { ...page.inputsUi };
+    }
+    written.list('outputs', page.outputs.map(output => new Writer()
+        .text('name', output.name, '\u0000')
+        .text('title', output.title)
+        .text('component', output.component, 'Text')
+        .part('props', { ...output.props }).data));
+    return written.value('live', page.live, true).data;
+}
 function parseInterface(data, kind) {
     const parsed = {
         layout: oneOf(data.layout, ['chat', 'page', 'split'], DEFAULT_LAYOUTS[kind]),
@@ -392,9 +489,16 @@ function parseInterface(data, kind) {
     if (isData(data.uploads)) {
         parsed.uploads = parseUploads(data.uploads);
     }
+    // Components its developer wrote (P-17): absent when it has none.
+    if (Array.isArray(data.custom_components)) {
+        parsed.customComponents = records(data.custom_components).map(parseCustomComponent);
+    }
     if (isData(data.surface)) {
         parsed.surface = parseSurface(data.surface);
     }
+    if (isData(data.page)) {
+        parsed.page = parsePage(data.page);
+    }
     if (isAssistantCharacterId(data.assistant)) {
         parsed.assistant = data.assistant;
     }
@@ -452,6 +556,11 @@ function parseDeployment(data) {
                 ? {
                     host: {
                         context: texts(data.embedded.host.context),
+                        // Kept as written when said: a value that is none is refused
+                        // by the checks, never read as `claimed` (D-21).
+                        ...(data.embedded.host.user !== undefined
+                            ? { user: text(data.embedded.host.user) }
+                            : {}),
                         functions: records(data.embedded.host.functions).map(fn => ({
                             name: text(fn.name),
                             description: text(fn.description),
@@ -752,9 +861,13 @@ function dumpInterface(spec, kind) {
             .value('max_files', spec.uploads.maxFiles, DEFAULT_MAX_FILES).data;
     }
     writer.list('components', spec.components);
+    writer.list('custom_components', (spec.customComponents ?? []).map(dumpCustomComponent));
     if (spec.surface) {
         writer.data.surface = dumpSurface(spec.surface);
     }
+    if (spec.page) {
+        writer.data.page = dumpPage(spec.page);
+    }
     if (spec.assistant) {
         writer.data.assistant = spec.assistant;
     }
@@ -905,7 +1018,8 @@ export function dumpAppspec(app) {
                     JSON.stringify(NO_HOST_PARAMETERS)
                     ? {}
                     : { parameters: fn.parameters }),
-            }))).data).data).data)
+            })))
+                .value('user', app.deployment.embedded.host.user ?? 'claimed', 'claimed').data).data).data)
         .text('goal', app.goal)
         .list('triggers', app.triggers.map(trigger => new Writer()
         .text('type', trigger.type, '\u0000')

package/lib/loop/apps/checks.d.ts

@@ -20,6 +20,14 @@ export declare const componentNamed: (name: string) => ComponentSpec | undefined
  * once; a tool says what it does, by class, each class once.
  */
 export declare function ownCodeProblems(app: AppSpec): string[];
+/**
+ * What agentspecs refuses of a widget's page written in its code (LOOP
+ * P-05): a page that is not a widget's, inputs that are not a form, outputs
+ * of one name twice, drawn with another component, saying in their `props`
+ * what their value fills or lacking what their component needs, and an input
+ * named as a setting — both are on the page at `/inputs/<name>`.
+ */
+export declare function pageProblems(app: AppSpec): string[];
 /** How an organization's own context is named: never a catalogue id (agentspecs' `ORGANIZATION_FRAME_PREFIX`). */
 /**
  * What stops a Form block from asking (LOOP C-16), in agentspecs'