@datalayer/agent-runtimes 1.3.83 → 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

@@ -9,17 +9,53 @@
  *   one menu each; the option picked goes with every run as
  *   `forwardedProps.loop.modes` (`LoopRunProps`), and the runtime tells the
  *   agent its instructions, on the model it names, for that run.
+ * - What a person may **send** without being asked (LOOP P-21,
+ *   `interface.uploads`): a paper clip beside the composer takes images,
+ *   files and recordings of the kinds and sizes the Appspec says — one it
+ *   does not take is refused in a sentence and never read — and the files
+ *   held go with the next message as `forwardedProps.loop.files`, then are
+ *   let go. The runtime refuses again what was sent all the same.
+ * - Its **profiles** (LOOP P-20, `interface.profiles`): a picker beside the
+ *   composer, on the first unless another is picked. The profile picked goes
+ *   with every run as `forwardedProps.loop.profile`, and its starters (else
+ *   the application's) are what the empty chat offers, by category
+ *   (`LoopChatExtras.openers`). Once the first message is sent, the
+ *   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, the chat's language's
+ * (`useChatLanguage`).
  *
  * @module loop/apps/AppComposer
  */
-import type { JSX } from 'react';
-import type { AppSpec } from '../../types/agentspecs';
+import { type JSX } from 'react';
+import type { AppSpec, AppStarterSpec } from '../../types/agentspecs';
+import { type GivenFile } from '../../components/a2ui/datalayer/FileUpload';
+import { type ChatSuggestionItem } from '../core';
+/** What the composer holds to send: the files, and why the last were refused. */
+export type HeldUploads = {
+    files: GivenFile[];
+    refused: string | null;
+};
+/**
+ * Files chosen in the composer, held for the next message: the refusal the
+ * runtime would say for what the application does not take, else the files
+ * read. Nothing is read when one is refused.
+ */
+export declare function holdUploads(app: Pick<AppSpec, 'name' | 'interface'>, held: readonly GivenFile[], chosen: readonly File[], read?: (file: File) => Promise<GivenFile>): Promise<HeldUploads>;
 /** The plugin's name, before the application's id. */
 export declare const APP_COMPOSER_PLUGIN_NAME = "@datalayer/loop-plugin-app-composer";
+/** Starters as the empty chat offers them: each under its category (P-20). */
+export declare function startersAsOpeners(starters: readonly AppStarterSpec[]): ChatSuggestionItem[];
+/**
+ * Whether an application needs its composer plugin: commands, modes,
+ * uploads or profiles to offer there.
+ */
+export declare const needsAppComposer: (app: AppSpec) => boolean;
 /**
  * The plugin that puts an application's commands in the composer's `/` menu
- * and its modes beside the composer. Nothing for an application with
- * neither: its plugin contributes nothing.
+ * and its modes, its profiles and its paper clip beside the composer.
+ * Nothing for an application with none: its plugin contributes nothing.
  */
 export declare function defineAppComposerPlugin(app: AppSpec): import("@datalayer/reactor").ReactorPlugin<Record<string, never>, unknown, {
     components: {

package/lib/loop/apps/AppComposer.js

@@ -1,17 +1,118 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { ActionList, ActionMenu } from '@primer/react';
-import { contribution, definePlugin, signal } from '@datalayer/reactor';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * An application's commands and modes in the composer (LOOP P-19).
+ *
+ * - Each of its **commands** is a workspace command (`LoopCommand`), listed
+ *   in the composer's `/` menu (`composer`): picking it writes `/<name> `,
+ *   and sending runs it — its prompt goes to the agent, the words typed
+ *   after it in place of `{input}`.
+ * - Its **modes** are switches beside the composer (`LoopSlots.promptAction`),
+ *   one menu each; the option picked goes with every run as
+ *   `forwardedProps.loop.modes` (`LoopRunProps`), and the runtime tells the
+ *   agent its instructions, on the model it names, for that run.
+ * - What a person may **send** without being asked (LOOP P-21,
+ *   `interface.uploads`): a paper clip beside the composer takes images,
+ *   files and recordings of the kinds and sizes the Appspec says — one it
+ *   does not take is refused in a sentence and never read — and the files
+ *   held go with the next message as `forwardedProps.loop.files`, then are
+ *   let go. The runtime refuses again what was sent all the same.
+ * - Its **profiles** (LOOP P-20, `interface.profiles`): a picker beside the
+ *   composer, on the first unless another is picked. The profile picked goes
+ *   with every run as `forwardedProps.loop.profile`, and its starters (else
+ *   the application's) are what the empty chat offers, by category
+ *   (`LoopChatExtras.openers`). Once the first message is sent, the
+ *   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, the chat's language's
+ * (`useChatLanguage`).
+ *
+ * @module loop/apps/AppComposer
+ */
+import { useRef } from 'react';
+import { ActionList, ActionMenu, IconButton, Text, Token } from '@primer/react';
+import { PaperclipIcon } from '@primer/octicons-react';
+import { computed, contribution, definePlugin, signal, } from '@datalayer/reactor';
 import { useSignalValue } from '@datalayer/reactor/react';
-import { LoopCommand, LoopRunProps, LoopSlots } from '../core';
-import { commandPrompt, modeChoice, modeDefaults } from './composer';
+import { readFile, } from '../../components/a2ui/datalayer/FileUpload';
+import { LoopChatExtras, LoopCommand, LoopRunProps, LoopSlots, } from '../core';
+import { commandPrompt, modeChoice, modeDefaults, profileChoice, startersFor, } from './composer';
+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
+ * runtime would say for what the application does not take, else the files
+ * read. Nothing is read when one is refused.
+ */
+export async function holdUploads(app, held, chosen, read = readFile) {
+    const refused = uploadsRefusal(app, [
+        ...held,
+        ...chosen.map(file => ({
+            name: file.name,
+            type: file.type,
+            size: file.size,
+        })),
+    ]);
+    if (refused) {
+        return { files: [...held], refused };
+    }
+    return {
+        files: [...held, ...(await Promise.all(chosen.map(read)))],
+        refused: null,
+    };
+}
 /** The plugin's name, before the application's id. */
 export const APP_COMPOSER_PLUGIN_NAME = '@datalayer/loop-plugin-app-composer';
+/** Starters as the empty chat offers them: each under its category (P-20). */
+export function startersAsOpeners(starters) {
+    return starters.map(starter => ({
+        text: starter.label,
+        message: starter.message,
+        ...(starter.category ? { group: starter.category } : {}),
+    }));
+}
+/**
+ * Whether an application needs its composer plugin: commands, modes,
+ * uploads or profiles to offer there.
+ */
+export const needsAppComposer = (app) => (app.interface.commands ?? []).length > 0 ||
+    (app.interface.modes ?? []).length > 0 ||
+    (app.interface.profiles ?? []).length > 0 ||
+    Boolean(app.interface.uploads);
 /**
  * The plugin that puts an application's commands in the composer's `/` menu
- * and its modes beside the composer. Nothing for an application with
- * neither: its plugin contributes nothing.
+ * and its modes, its profiles and its paper clip beside the composer.
+ * Nothing for an application with none: its plugin contributes nothing.
  */
 export function defineAppComposerPlugin(app) {
+    const profiles = app.interface.profiles ?? [];
+    /** The profile picked, and whether the conversation has started with it. */
+    const profile = signal(profileChoice(app)?.id);
+    const started = signal(false);
+    const openers = computed(() => ({
+        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) {
+            return null;
+        }
+        const said = `${words.profile}: ${now.label}`;
+        if (kept) {
+            return (_jsx(Text, { title: `${said} (${words.profileKept})`, sx: { fontSize: 0, color: 'fg.muted', px: 2 }, children: said }));
+        }
+        return (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Button, { size: "small", variant: "invisible", "aria-label": said, children: said }), _jsx(ActionMenu.Overlay, { width: "medium", children: _jsx(ActionList, { selectionVariant: "single", children: _jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: words.profile }), profiles.map(item => (_jsxs(ActionList.Item, { selected: item.id === now.id, onSelect: () => {
+                                        profile.value = profileChoice(app, item.id)?.id;
+                                    }, children: [item.label, item.description ? (_jsx(ActionList.Description, { variant: "block", children: item.description })) : null] }, item.id)))] }) }) })] }));
+    }
     const modes = app.interface.modes ?? [];
     /** The option of each mode the person is in. */
     const chosen = signal(modeDefaults(app));
@@ -28,13 +129,49 @@ export function defineAppComposerPlugin(app) {
                                             }, children: [option.label, option.description ? (_jsx(ActionList.Description, { variant: "block", children: option.description })) : null] }, option.id)))] }) }) })] }, mode.id));
             }) }));
     }
+    const uploads = app.interface.uploads;
+    /** 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) {
+            return null;
+        }
+        return (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: PaperclipIcon, size: "small", variant: "invisible", "aria-label": `${words.attach}. ${uploadsInWords(uploads)}`, onClick: () => input.current?.click() }), _jsx("input", { ref: input, type: "file", hidden: true, multiple: uploads.maxFiles > 1, accept: uploadsAccept(uploads), "aria-label": words.attach, onChange: event => {
+                        const chosen = Array.from(event.target.files ?? []);
+                        event.target.value = '';
+                        void holdUploads(app, held.peek().files, chosen).then(next => {
+                            held.value = next;
+                        });
+                    } }), now.files.map(file => (_jsx(Token, { text: file.name, size: "small", onRemove: () => {
+                        held.value = {
+                            files: held.peek().files.filter(kept => kept !== file),
+                            refused: null,
+                        };
+                    } }, file.name))), now.refused ? (_jsx(Text, { role: "alert", sx: { fontSize: 0, color: 'danger.fg' }, children: now.refused })) : null] }));
+    }
     return definePlugin({
         name: `${APP_COMPOSER_PLUGIN_NAME}-${app.id}`,
-        displayName: `${app.name}: commands and modes`,
-        description: `The commands and modes ${app.name} offers in its composer.`,
+        displayName: `${app.name}: commands, modes, profiles and uploads`,
+        description: `The commands, modes, profiles and files ${app.name} takes in its composer.`,
         octicon: 'command-palette',
         emoji: '\u{2318}',
         contributes: [
+            ...(profiles.length > 0
+                ? [
+                    contribution(LoopRunProps, {
+                        id: 'app-profile',
+                        // Sent with every run; from the first, the conversation keeps it.
+                        props: () => {
+                            started.value = true;
+                            return { loop: { profile: profile.peek() } };
+                        },
+                    }, { id: 'app-profile' }),
+                    contribution(LoopChatExtras, { id: 'app-profile-starters', extras: openers }, { id: 'app-profile-starters' }),
+                ]
+                : []),
             ...(app.interface.commands ?? []).map(command => contribution(LoopCommand, {
                 name: command.name,
                 description: command.description,
@@ -50,18 +187,56 @@ export function defineAppComposerPlugin(app) {
                     }, { id: 'app-modes' }),
                 ]
                 : []),
-        ],
-        build: () => ({
-            components: modes.length > 0
+            ...(uploads
                 ? [
-                    {
-                        id: 'app-modes',
-                        slot: LoopSlots.promptAction,
-                        order: 5,
-                        Component: ModeSwitches,
-                    },
+                    contribution(LoopRunProps, {
+                        id: 'app-uploads',
+                        // The files held go with this message, once, and are let go.
+                        props: () => {
+                            const files = held.peek().files;
+                            if (files.length === 0) {
+                                return {};
+                            }
+                            held.value = { files: [], refused: null };
+                            return { loop: { files } };
+                        },
+                    }, { id: 'app-uploads' }),
                 ]
-                : [],
+                : []),
+        ],
+        build: () => ({
+            components: [
+                ...(profiles.length > 0
+                    ? [
+                        {
+                            id: 'app-profile',
+                            slot: LoopSlots.promptAction,
+                            order: 3,
+                            Component: ProfilePicker,
+                        },
+                    ]
+                    : []),
+                ...(modes.length > 0
+                    ? [
+                        {
+                            id: 'app-modes',
+                            slot: LoopSlots.promptAction,
+                            order: 5,
+                            Component: ModeSwitches,
+                        },
+                    ]
+                    : []),
+                ...(uploads
+                    ? [
+                        {
+                            id: 'app-uploads',
+                            slot: LoopSlots.promptAction,
+                            order: 4,
+                            Component: Attach,
+                        },
+                    ]
+                    : []),
+            ],
         }),
     });
 }

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

@@ -28,6 +28,11 @@
  *   address and embedded;
  * - its **frame**, when the host asks (`frame`): the `window-frame` plugin's
  *   window, its title the application's face and name;
+ * - its **language** (LOOP P-26): what a person reads of it — its name,
+ *   welcome, starters, settings, commands, modes and profiles — in the first
+ *   language they prefer that its Appspec is translated into (`language`,
+ *   else the browser's), its own words otherwise (`translatedAppspec`);
+ *   what it does is the same in every language;
  * - its **sidebar**, when the host asks (`sidebar`, R-01b): its rules and
  *   the approvals waiting for the person (`app-rules`), what it did
  *   (`app-activity`), and its computer, live (`app-computer`, R-23), beside
@@ -62,7 +67,7 @@ export declare const agentIdOf: (app: Pick<AppSpec, "agent" | "team">) => string
  * An application run by a team is not supported in the workspace yet: a team
  * is not an agent spec, and is refused here rather than launched as one.
  */
-export declare function defineAppPlugin(app: AppSpec): ReactorPlugin<Record<string, never>, unknown, unknown>;
+export declare function defineAppPlugin(app: AppSpec, shown?: AppSpec): ReactorPlugin<Record<string, never>, unknown, unknown>;
 /** Which instance of an application runs, as the platform knows it (LOOP R-07). */
 export type AppInstance = {
     /** Its `app` item. */
@@ -132,6 +137,12 @@ export type AppRendererProps = Omit<LoopEmbedProps, 'agentId'> & {
      * Canvas's palette. Compared by content.
      */
     pluginsOff?: readonly string[];
+    /**
+     * The language the person reads it in, as BCP 47 tags it (`fr`, `pt-BR`):
+     * the platform's setting when the host knows it. The browser's languages
+     * when unsaid (LOOP P-26).
+     */
+    language?: string;
 };
 /** What `interface.layout` sets on the workspace. */
 export type AppLayoutOptions = Pick<LoopPresetOptions, 'editors' | 'showViewSelector' | 'defaultEditor' | 'pageLayout' | 'pageLayoutArrangement' | 'pageLayoutPrompt' | 'pageLayoutPromptAnchor' | 'pageLayoutTurnPanelFooter'>;
@@ -164,7 +175,9 @@ export type AppPreset = {
  *   but those of the UI plugins its organization turned off (`pluginsOff`),
  *   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); what it
+ *   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); 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
@@ -186,6 +199,11 @@ export declare function appPreset(app: AppSpec, options?: {
     computer?: boolean;
     /** What its record is kept under: its activity's. */
     appUid?: string;
+    /**
+     * The application as the person reads it (P-26): its words in their
+     * language. Its own when unsaid.
+     */
+    shown?: AppSpec;
     /**
      * Say what it keeps before the first message (R-31): at its address and
      * embedded, not in its builder's Preview — to a `visitor` not signed
@@ -221,5 +239,5 @@ export declare const DATALAYER_BOOTSTRAP_AGENTSPEC = "example-simple";
  * colours: over another theme (T-30) nothing is laid, the theme's own rule.
  */
 export declare function appThemeOverrides(app: AppSpec, variant: string): ThemeOverrides | undefined;
-export declare function AppRenderer({ app, plugins, instance, onPresence, onSaying, paused, sidebar, computer, frame, page, pluginsOff, ...embed }: AppRendererProps): React.JSX.Element;
+export declare function AppRenderer({ app, plugins, instance, onPresence, onSaying, paused, sidebar, computer, frame, page, pluginsOff, language, ...embed }: AppRendererProps): React.JSX.Element;
 export default AppRenderer;