@datalayer/agent-runtimes 1.3.84 → 1.3.86

package/lib/loop/apps/customComponents.js

@@ -0,0 +1,260 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Components a developer writes (LOOP P-17): an A2UI component of one
+ * application only, declared in its Appspec (`interface.custom_components`)
+ * with its name, its properties as a JSON Schema, what it shows and sends,
+ * and the address of the built ES module that draws it.
+ *
+ * Reviewed like any component of the catalog — what agentspecs refuses is
+ * refused here in the same sentences — and listed beside the catalog's for
+ * that application alone (`appComponents`): the catalog grows for it, it
+ * does not open. How it is drawn, in a sandboxed frame of no origin, is
+ * `components/a2ui/custom`.
+ *
+ * @module loop/apps/customComponents
+ */
+import { getComponent } from '../../specs/uiPlugins';
+/** Its name: a word starting with a capital letter, as the catalog's are named. */
+export const CUSTOM_COMPONENT_NAME = /^[A-Z][A-Za-z0-9]{0,63}$/;
+/** What one of its properties may be typed: what the renderer tells apart. */
+export const CUSTOM_PROPERTY_TYPES = [
+    'string',
+    'integer',
+    'number',
+    'boolean',
+    'array',
+    'object',
+];
+/** What every component of a surface already has, and a custom one cannot declare. */
+export const CUSTOM_RESERVED_NAMES = [
+    'id',
+    'component',
+    'action',
+    'weight',
+    'visible_when',
+    'children',
+    'child',
+];
+/**
+ * Where its module is loaded from: an address served over HTTPS, or this
+ * machine while it is written. A file of the application's folder waits for
+ * its packaging (P-29).
+ */
+export const CUSTOM_SOURCE = /^(?:https:\/\/[A-Za-z0-9.-]+(?::\d+)?|http:\/\/(?:localhost|127\.0\.0\.1)(?::\d+)?)\/\S*$/;
+/** A Subresource Integrity hash: the module as it was reviewed. */
+export const INTEGRITY = /^sha(?:256|384|512)-[A-Za-z0-9+/]+={0,2}$/;
+const PROPERTY_NAME = /^[A-Za-z_][A-Za-z0-9_]*$/;
+const isRecord = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
+const isBound = (value) => isRecord(value) && 'path' in value;
+const quoted = (name) => `'${name}'`;
+/** Why a value is not one a property takes, or null. */
+function valueRefused(name, field, value) {
+    if (Array.isArray(field.enum)) {
+        return field.enum.includes(value)
+            ? null
+            : `${quoted(name)} is one of ${field.enum.map(each => quoted(String(each))).join(', ')}`;
+    }
+    const kind = String(field.type);
+    const takes = {
+        string: v => typeof v === 'string',
+        integer: v => typeof v === 'number' && Number.isInteger(v),
+        number: v => typeof v === 'number',
+        boolean: v => typeof v === 'boolean',
+        array: v => Array.isArray(v),
+        object: isRecord,
+    };
+    if (typeof value === 'boolean' && kind !== 'boolean') {
+        return `${quoted(name)} is ${kind}, not true or false`;
+    }
+    return takes[kind]?.(value) ? null : `${quoted(name)} is ${kind}`;
+}
+/** Its properties, as its schema declares them. */
+const fieldsOf = (component) => (isRecord(component.props.properties)
+    ? component.props.properties
+    : {});
+/**
+ * What its schema refuses of the properties given, in the words agentspecs
+ * says them: one it does not have, a value of another type, one it needs.
+ * `bound` are given elsewhere — bound to what the application publishes.
+ */
+export function customPropsRefused(component, props, bound = []) {
+    const fields = fieldsOf(component);
+    const problems = Object.keys(props)
+        .filter(name => !(name in fields))
+        .map(name => `it has no property ${quoted(name)}`);
+    for (const [name, value] of Object.entries(props)) {
+        if (name in fields && !isBound(value)) {
+            const refused = valueRefused(name, fields[name], value);
+            if (refused) {
+                problems.push(refused);
+            }
+        }
+    }
+    const required = Array.isArray(component.props.required)
+        ? component.props.required
+        : [];
+    for (const name of required) {
+        if (!(name in props) && !bound.includes(name)) {
+            problems.push(`it needs ${quoted(name)}`);
+        }
+    }
+    return problems;
+}
+/** What stops one component its developer wrote from being reviewed, in sentences. */
+export function customComponentProblems(component) {
+    const said = `The component ${component.name || '(unnamed)'}`;
+    const problems = [];
+    if (!CUSTOM_COMPONENT_NAME.test(component.name)) {
+        problems.push(`Cannot use “${component.name}” as a component's name: a word starting with a capital letter, as Gauge.`);
+    }
+    else if (getComponent(component.name)) {
+        problems.push(`${said} is a component of the catalog: name yours otherwise.`);
+    }
+    if (!component.description.trim()) {
+        problems.push(`${said} says what it is for, under \`description\`.`);
+    }
+    if (!/^[a-z][a-z0-9+.-]*:/.test(component.source)) {
+        problems.push(`${said}'s module “${component.source}” is a file of the application's folder: it is drawn once the application is packaged with it (LOOP P-29); give the address of a built ES module.`);
+    }
+    else if (!CUSTOM_SOURCE.test(component.source)) {
+        problems.push(`${said}'s module “${component.source}” is loaded over \`https://\`, or from \`http://localhost\` while it is written.`);
+    }
+    if (component.integrity && !INTEGRITY.test(component.integrity)) {
+        problems.push(`${said}'s integrity “${component.integrity}” is no Subresource Integrity hash: \`sha384-\` and the hash in base64.`);
+    }
+    if (component.height < 40 || component.height > 2000) {
+        problems.push(`${said} is between 40 and 2000 pixels high.`);
+    }
+    const schema = component.props;
+    if (schema.type !== 'object' || !isRecord(schema.properties)) {
+        problems.push(`${said}'s props are the JSON Schema of an object, with its \`properties\`.`);
+        return problems;
+    }
+    const fields = fieldsOf(component);
+    for (const [name, field] of Object.entries(fields)) {
+        if (!PROPERTY_NAME.test(name) ||
+            CUSTOM_RESERVED_NAMES.includes(name)) {
+            problems.push(`${said} cannot have a property named ${quoted(name)}.`);
+            continue;
+        }
+        if (!isRecord(field)) {
+            problems.push(`${said}'s property ${quoted(name)} is not a schema.`);
+            continue;
+        }
+        if ('enum' in field) {
+            const values = field.enum;
+            if (!Array.isArray(values) ||
+                values.length === 0 ||
+                !values.every(value => typeof value === 'string')) {
+                problems.push(`${said}'s property ${quoted(name)} is an \`enum\` of words, one at least.`);
+            }
+        }
+        else if (!CUSTOM_PROPERTY_TYPES.includes(field.type)) {
+            problems.push(`${said}'s property ${quoted(name)} is typed ${quoted(String(field.type))}: one of ${CUSTOM_PROPERTY_TYPES.join(', ')}, or an \`enum\`.`);
+            continue;
+        }
+        if ('default' in field) {
+            const refused = valueRefused(name, field, field.default);
+            if (refused) {
+                problems.push(`${said}'s default for ${refused}.`);
+            }
+        }
+    }
+    const required = Array.isArray(schema.required)
+        ? schema.required
+        : [];
+    const missing = required.filter(name => !(name in fields));
+    if (missing.length > 0) {
+        problems.push(`${said} requires ${missing.map(quoted).join(', ')}, which its props do not have.`);
+    }
+    for (const name of [...component.shows, ...component.sends]) {
+        if (!PROPERTY_NAME.test(name) ||
+            CUSTOM_RESERVED_NAMES.includes(name)) {
+            problems.push(`${said} cannot bind through ${quoted(name)}.`);
+        }
+        else if (name in fields) {
+            problems.push(`${said} both has the property ${quoted(name)} and binds through it.`);
+        }
+    }
+    for (const [bindings, what] of [
+        [component.shows, 'shows'],
+        [component.sends, 'sends'],
+    ]) {
+        if (new Set(bindings).size !== bindings.length) {
+            problems.push(`${said} ${what} the same binding twice.`);
+        }
+    }
+    if (component.example) {
+        const bindings = new Set([...component.shows, ...component.sends]);
+        const given = Object.fromEntries(Object.entries(component.example).filter(([key]) => !bindings.has(key)));
+        const refused = customPropsRefused(component, given);
+        if (refused.length > 0) {
+            problems.push(`${said}'s example is refused: ${refused.join('; ')}.`);
+        }
+    }
+    return problems;
+}
+/** What stops the components an application's developer wrote, in sentences. */
+export function customComponentsProblems(app) {
+    const own = app.interface.customComponents ?? [];
+    const problems = own.flatMap(customComponentProblems);
+    const names = own.map(component => component.name);
+    if (new Set(names).size !== names.length) {
+        problems.push('Two of its own components have the same name.');
+    }
+    return problems;
+}
+/** A component its developer wrote, by name, or undefined. */
+export function customComponentOf(app, name) {
+    return (app.interface.customComponents ?? []).find(component => component.name === name);
+}
+/**
+ * It as the catalog lists a component (C-13): what the palette, the
+ * components page and the checks read — under the application's version, its
+ * category `custom`.
+ */
+export function customComponentEntry(component, version) {
+    return {
+        id: component.name,
+        name: component.name,
+        description: component.description,
+        category: 'custom',
+        emoji: '🧩',
+        version,
+        standard: false,
+        properties: component.props,
+        bindings: { shows: [...component.shows], sends: [...component.sends] },
+        events: component.sends.length > 0 ? ['send'] : [],
+        ...(component.example ? { example: component.example } : {}),
+    };
+}
+/**
+ * The components an application may place: the catalog's own, given, and
+ * those its developer wrote, for it alone. A name of its own that the
+ * catalog has is not listed twice: the checks refuse it.
+ */
+export function appComponents(app, catalog) {
+    const names = new Set(catalog.map(component => component.id));
+    return [
+        ...catalog,
+        ...(app.interface.customComponents ?? [])
+            .filter(component => !names.has(component.name))
+            .map(component => customComponentEntry(component, app.version)),
+    ];
+}
+/** What its schema refuses of a node of a surface drawn by it, in sentences; empty when nothing. */
+export function customNodeRefused(component, node) {
+    const skip = new Set([
+        ...CUSTOM_RESERVED_NAMES,
+        ...component.shows,
+        ...component.sends,
+    ]);
+    const given = Object.fromEntries(Object.entries(node).filter(([key]) => !skip.has(key)));
+    const bound = Object.entries(given)
+        .filter(([, value]) => isBound(value))
+        .map(([key]) => key);
+    return customPropsRefused(component, given, bound);
+}

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

@@ -6,12 +6,19 @@
  *
  * @module loop/apps/hostTools
  */
-import type { AppHostBridgeSpec } from '../../types/agentspecs';
+import type { AppHostBridgeSpec, AppHostUser } from '../../types/agentspecs';
 /** The tool its agent reads what the page passes it with. */
 export declare const HOST_CONTEXT_TOOL = "host_context";
 /** The tool its agent calls a function of the page with. */
 export declare const hostTool: (name: string) => string;
 /** How a value or a function of the host is named. */
 export declare const HOST_NAME: RegExp;
+/** What the page's word on its visitor may be worth (LOOP D-21). */
+export declare const HOST_USERS: readonly AppHostUser[];
+/**
+ * Whether a session is opened only for a user the host's server signed
+ * (LOOP D-21): `deployment.embedded.host.user: signed`.
+ */
+export declare function signedUser(bridge: AppHostBridgeSpec | undefined): boolean;
 /** The tools its agent is given for the host. */
 export declare function hostToolsOf(bridge: AppHostBridgeSpec | undefined): string[];

package/lib/loop/apps/hostTools.js

@@ -8,6 +8,15 @@ export const HOST_CONTEXT_TOOL = 'host_context';
 export const hostTool = (name) => `host_${name}`;
 /** How a value or a function of the host is named. */
 export const HOST_NAME = /^[a-z][a-z0-9_]{0,62}$/;
+/** What the page's word on its visitor may be worth (LOOP D-21). */
+export const HOST_USERS = ['claimed', 'signed'];
+/**
+ * Whether a session is opened only for a user the host's server signed
+ * (LOOP D-21): `deployment.embedded.host.user: signed`.
+ */
+export function signedUser(bridge) {
+    return bridge?.user === 'signed';
+}
 /** The tools its agent is given for the host. */
 export function hostToolsOf(bridge) {
     if (!bridge) {

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

@@ -18,3 +18,4 @@ export * from './records';
 export * from './rules';
 export * from './saved';
 export * from './yaml';
+export * from './customComponents';

package/lib/loop/apps/index.js

@@ -22,3 +22,4 @@ export * from './records';
 export * from './rules';
 export * from './saved';
 export * from './yaml';
+export * from './customComponents';

package/lib/loop/core/a2uiComponents.d.ts

@@ -0,0 +1,10 @@
+import type { ReactComponentImplementation } from '@a2ui/react/v0_9';
+export type A2uiComponentContribution = {
+    /** The name a surface gives it (e.g. 'Gauge'). */
+    id: string;
+    /** The application whose developer wrote it, by id. */
+    app: string;
+    /** Its renderer, as A2UI's catalog registers one. */
+    implementation: ReactComponentImplementation;
+};
+export declare const LoopA2uiComponent: import("@datalayer/reactor").ContributionPoint<A2uiComponentContribution>;

package/lib/loop/core/a2uiComponents.js

@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * A component an application adds to the A2UI catalog it is drawn with (LOOP
+ * P-17), as a contribution point, re-exported by `loop/core`: the components
+ * its developer wrote, contributed by the application's own plugin, so that
+ * its page, the elements its code shows and its answers draw them — in that
+ * application's workspace, and in no other.
+ *
+ * @module loop/core/a2uiComponents
+ */
+import { defineContributionPoint } from '@datalayer/reactor';
+export const LoopA2uiComponent = defineContributionPoint('loop.a2ui.component');

package/lib/loop/core/index.d.ts

@@ -579,6 +579,7 @@ export type AssistantMenuContribution = {
 };
 export declare const LoopAssistantMenu: import("@datalayer/reactor").ContributionPoint<AssistantMenuContribution>;
 export { LoopCanvasBlock, type CanvasBlockContribution } from './canvasBlocks';
+export { LoopA2uiComponent, type A2uiComponentContribution, } from './a2uiComponents';
 /**
  * The per-example chat extras a host feeds the loop's conversation live.
  *

package/lib/loop/core/index.js

@@ -146,6 +146,9 @@ export const LoopAssistantMenu = defineContributionPoint('loop.assistant.menu');
 // A block the Canvas may place (LOOP C-12), in a module of its own so that
 // the palette is read without the rest of the contracts.
 export { LoopCanvasBlock } from './canvasBlocks';
+// A component an application adds to the catalog it is drawn with (LOOP
+// P-17): the components its developer wrote, for its workspace alone.
+export { LoopA2uiComponent, } from './a2uiComponents';
 export const LoopChatExtras = defineContributionPoint('loop.chat.extras');
 export const LoopOpeningNotebook = defineContributionPoint('loop.notebook.opening');
 export const LoopOpeningDocument = defineContributionPoint('loop.document.opening');

package/lib/loop/embed/AppEmbed.d.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties, JSX, ReactNode } from 'react';
-import type { PluginRef } from '@datalayer/reactor';
+import { type PluginRef } from '@datalayer/reactor';
 import type { AppAccent, AppEmbedMode, AppSpec, AppThemeVariant } from '../../types/agentspecs';
 import type { ResumedThread, ThemeOverrides } from '../../types/chat';
 import type { AssistantCharacter } from '../../chat/assistant/characters';
@@ -24,6 +24,12 @@ export type AppEmbedProps = {
     colorMode?: EmbedColorMode;
     /** The host's face, a CSS font family; the theme's by default. */
     font?: string;
+    /**
+     * The language the visitor reads it in, as BCP 47 tags it (`fr`, `pt-BR`):
+     * its translation into it and the chat's own words (LOOP P-26). The
+     * visitor's browser's by default.
+     */
+    language?: string;
     /**
      * An agent-runtimes server the application's agent runs on. Without one,
      * it runs on a Datalayer runtime, launched with the visitor's Datalayer
@@ -150,6 +156,8 @@ export type AppFloatingProps = {
     host?: AppEmbedHost;
     /** The visit's session, picked up again after a reload (D-13). */
     session?: EmbedSession;
+    /** The language the visitor reads it in (P-26); the browser's by default. */
+    language?: string;
 };
 /**
  * The bubble, the panel and the assistant: `ChatFloating`'s chrome in that
@@ -160,7 +168,7 @@ export type AppFloatingProps = {
  * The workspace tells the chrome what the application is doing and what it
  * last said (`onPresence`, `onSaying`).
  */
-export declare function AppFloating({ app, view, colorMode, themeVariant, themeOverrides, character, serverUrl, instance, embedToken, renderer, host, session, }: AppFloatingProps): JSX.Element;
+export declare function AppFloating({ app, view, colorMode, themeVariant, themeOverrides, character, serverUrl, instance, embedToken, renderer, host, session, language, }: AppFloatingProps): JSX.Element;
 /** The application's theme (`loop` unless it names one), with its (or the host's) accent and face. */
 export declare function EmbedThemed({ accent, colorMode, font, variant, children, style, }: {
     accent: AppAccent;
@@ -170,5 +178,5 @@ export declare function EmbedThemed({ accent, colorMode, font, variant, children
     children: ReactNode;
     style?: CSSProperties;
 }): JSX.Element;
-export declare function AppEmbed({ app, mode, accent, colorMode, font, serverUrl, instance, embedToken, height, ownPortal, plugins, host, resume, }: AppEmbedProps): JSX.Element;
+export declare function AppEmbed({ app, mode, accent, colorMode, font, language, serverUrl, instance, embedToken, height, ownPortal, plugins, host, resume, }: AppEmbedProps): JSX.Element;
 export default AppEmbed;

package/lib/loop/embed/AppEmbed.js

@@ -40,6 +40,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * @module loop/embed/AppEmbed
  */
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { contribution, definePlugin } from '@datalayer/reactor';
 import { Text, registerPortalRoot } from '@primer/react';
 import { useIAMStore } from '@datalayer/core/lib/state/substates/IAMState';
 import { FluentEmoji } from '@datalayer/core/lib/components/emoji';
@@ -50,10 +51,12 @@ import { AppRenderer, } from '../apps/AppRenderer';
 import { AssistantCharactersPlugin, assistantCharacterFor, assistantCharactersFrom, } from '../plugins/assistant-characters';
 import { floatingViewOf } from './embedConfig';
 import { createChatExtrasPlugin } from '../plugins/chat-extras';
-import { hostFrontendTools } from './hostBridge';
+import { hostFrontendTools, hostUserRunProps, } from './hostBridge';
+import { LoopRunProps } from '../core';
 import { embedThemeOverrides, embedThemeStyles } from './embedTheme';
 import { WINDOW_NOT_YET, embedSessionKey, postWindowMessage, reattachSession, sessionGoneSentence, sessionKeeper, visitOfToken, } from './embedSession';
 import { onLoopWindowMessage } from '../../chat/base/loopWindow';
+import { ChatLanguage, useChatWords } from '../../chat/ChatLanguage';
 /**
  * The visit's session, kept and picked up again (LOOP D-13): on the host's
  * server with an embed token that names its visit, the session the chat
@@ -195,7 +198,29 @@ export function useHostBridge(app, host) {
         // The tools change with what the Appspec names, and the rules that decide them.
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [handle, key]);
-    const plugins = useMemo(() => (bridge ? [handle.plugin] : NO_HOST_PLUGINS), [bridge, handle]);
+    // Who its user is (D-21): the token the host's server signed goes with
+    // every run, for an application that takes only a signed user.
+    const signed = bridge?.user === 'signed';
+    const userPlugin = useMemo(() => {
+        const runProps = hostUserRunProps(app, () => hostRef.current ?? {});
+        return runProps
+            ? definePlugin({
+                name: `loop-host-user-${app.id}`,
+                displayName: `${app.name}: who its user is`,
+                description: `The token naming its user that the host's server signed, sent with every run of ${app.name}.`,
+                octicon: 'person',
+                emoji: '\u{1F464}',
+                contributes: [
+                    contribution(LoopRunProps, runProps, { id: 'host-user' }),
+                ],
+            })
+            : undefined;
+        // Made again only when whether it is signed changes.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [app.id, signed]);
+    const plugins = useMemo(() => bridge
+        ? [handle.plugin, ...(userPlugin ? [userPlugin] : [])]
+        : NO_HOST_PLUGINS, [bridge, handle, userPlugin]);
     // What its code tells the page during a turn (LOOP P-25), raised on it.
     useEffect(() => onLoopWindowMessage(data => hostRef.current?.onEvent?.({
         type: 'window-message',
@@ -254,7 +279,8 @@ function Face({ emoji }) {
  * The workspace tells the chrome what the application is doing and what it
  * last said (`onPresence`, `onSaying`).
  */
-export function AppFloating({ app, view, colorMode, themeVariant, themeOverrides, character, serverUrl, instance, embedToken, renderer, host, session, }) {
+export function AppFloating({ app, view, colorMode, themeVariant, themeOverrides, character, serverUrl, instance, embedToken, renderer, host, session, language, }) {
+    const chatText = useChatWords();
     const [presence, setPresence] = useState('idle');
     const [said, setSaid] = useState({ answering: false });
     const bridge = useHostBridge(app, host);
@@ -274,7 +300,7 @@ export function AppFloating({ app, view, colorMode, themeVariant, themeOverrides
     const signedOut = !serverUrl && !token && !renderer?.datalayerVisitors;
     return (_jsx(ChatFloating, { defaultViewMode: view, ...(character ? { assistantCharacter: character } : {}), ...(app.interface.balloon
             ? { balloonDisplay: app.interface.balloon }
-            : {}), title: app.name, description: welcome, brandIcon: _jsx(Face, { emoji: app.emoji }), buttonIcon: _jsx(Face, { emoji: app.emoji }), buttonTooltip: `Talk to ${app.name}`, colorMode: colorMode, useStore: false, conversation: {
+            : {}), title: app.name, description: welcome, brandIcon: _jsx(Face, { emoji: app.emoji }), buttonIcon: _jsx(Face, { emoji: app.emoji }), buttonTooltip: chatText.talkTo(app.name), colorMode: colorMode, useStore: false, conversation: {
             body: signedOut ? (_jsx(Text, { as: "p", role: "status", sx: { p: 3, m: 0, fontSize: 1 }, children: signedOutSentence(app) })) : session && !session.ready ? null : (_jsxs(_Fragment, { children: [_jsx(SessionSaid, { said: session?.said }), _jsx(AppRenderer, { app: app, target: serverUrl ? 'local' : 'datalayer', ...(serverUrl ? { serverUrl } : {}), ...(serverUrl && embedToken ? { embedToken } : {}), instance: instance, 
                         // The host's accent and face over the application's own, inside
                         // its conversation too, in the embed's mode.
@@ -282,7 +308,7 @@ export function AppFloating({ app, view, colorMode, themeVariant, themeOverrides
                         // The window draws its face, its name and close.
                         hideChatHeader: true, 
                         // Mounted closed: the caret goes in when the window opens.
-                        autoFocusPrompt: false, onPresence: onPresence, onSaying: onSaying, plugins: bridge.plugins, ...(session?.thread ? { thread: session.thread } : {}), ...renderer })] })),
+                        autoFocusPrompt: false, onPresence: onPresence, onSaying: onSaying, plugins: bridge.plugins, ...(session?.thread ? { thread: session.thread } : {}), ...(language ? { language } : {}), ...renderer })] })),
             presence,
             saying: said.saying,
             answering: said.answering,
@@ -331,7 +357,7 @@ export function EmbedThemed({ accent, colorMode, font, variant, children, style,
      */
     _jsx("div", { "data-color-mode": colorMode, style: { display: 'contents' }, children: _jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: getThemeConfig(variant).primerTheme, themeStyles: themeStyles, baseStyles: style, children: children }) }));
 }
-export function AppEmbed({ app, mode, accent, colorMode, font, serverUrl, instance, embedToken, height = 640, ownPortal = false, plugins = NO_PLUGINS, host, resume = true, }) {
+export function AppEmbed({ app, mode, accent, colorMode, font, language, serverUrl, instance, embedToken, height = 640, ownPortal = false, plugins = NO_PLUGINS, host, resume = true, }) {
     const bridge = useHostBridge(app, host);
     const kept = useEmbedSession({ app, serverUrl, embedToken, resume });
     // Window messages from the page, on the host's own server (P-25).
@@ -359,15 +385,15 @@ export function AppEmbed({ app, mode, accent, colorMode, font, serverUrl, instan
         return (_jsx("p", { role: "status", className: "datalayer-app-said", children: assistant.problem }));
     }
     const character = assistant?.character;
-    return (_jsxs(EmbedThemed, { accent: worn, colorMode: resolvedMode, font: font, variant: variant, style: view
-            ? // Floating: nothing in the page's flow, nothing painted behind.
-                { backgroundColor: 'transparent' }
-            : { height, display: 'flex', flexDirection: 'column' }, children: [ownPortal ? _jsx(OwnPortalRoot, {}) : null, view ? (_jsx(AppFloating, { app: app, view: view, serverUrl: serverUrl, instance: instance, embedToken: embedToken, colorMode: resolvedMode, themeVariant: variant, themeOverrides: themeOverrides, character: character, host: host, session: session })) : !session.ready ? null : (_jsxs(_Fragment, { children: [_jsx(SessionSaid, { said: session.said }), _jsx(AppRenderer, { app: app, target: serverUrl ? 'local' : 'datalayer', ...(serverUrl ? { serverUrl } : {}), ...(serverUrl && embedToken ? { embedToken } : {}), instance: instance, 
-                        // The host's accent and face over the application's own, inside
-                        // its conversation too, in the embed's mode: the host's or its
-                        // visitor's system's, not a Datalayer setting.
-                        themeOverrides: themeOverrides, colorMode: resolvedMode, themeVariant: variant, 
-                        // What the page gives it, and what it tells the page (D-10).
-                        plugins: bridge.plugins, onPresence: bridge.onPresence, onSaying: bridge.onSaying, ...(session.thread ? { thread: session.thread } : {}) })] }))] }));
+    return (_jsx(ChatLanguage, { language: language, children: _jsxs(EmbedThemed, { accent: worn, colorMode: resolvedMode, font: font, variant: variant, style: view
+                ? // Floating: nothing in the page's flow, nothing painted behind.
+                    { backgroundColor: 'transparent' }
+                : { height, display: 'flex', flexDirection: 'column' }, children: [ownPortal ? _jsx(OwnPortalRoot, {}) : null, view ? (_jsx(AppFloating, { app: app, view: view, serverUrl: serverUrl, instance: instance, embedToken: embedToken, colorMode: resolvedMode, themeVariant: variant, themeOverrides: themeOverrides, character: character, host: host, session: session, ...(language ? { language } : {}) })) : !session.ready ? null : (_jsxs(_Fragment, { children: [_jsx(SessionSaid, { said: session.said }), _jsx(AppRenderer, { app: app, target: serverUrl ? 'local' : 'datalayer', ...(serverUrl ? { serverUrl } : {}), ...(serverUrl && embedToken ? { embedToken } : {}), instance: instance, 
+                            // The host's accent and face over the application's own, inside
+                            // its conversation too, in the embed's mode: the host's or its
+                            // visitor's system's, not a Datalayer setting.
+                            themeOverrides: themeOverrides, colorMode: resolvedMode, themeVariant: variant, 
+                            // What the page gives it, and what it tells the page (D-10).
+                            plugins: bridge.plugins, onPresence: bridge.onPresence, onSaying: bridge.onSaying, ...(session.thread ? { thread: session.thread } : {}), ...(language ? { language } : {}) })] }))] }) }));
 }
 export default AppEmbed;

package/lib/loop/embed/element.d.ts

@@ -31,6 +31,11 @@ export declare function appspecOfText(text: string): AppSpec;
 export declare function runnable({ app, problems }: ParsedAppspec): AppSpec;
 /** The run page an application on Datalayer is framed from. */
 export declare function frameSrcOf(origin: string, app: string, token?: string): string;
+/**
+ * A framed run page told the visitor's language (P-26): `language=` in its
+ * query, before the fragment that holds the token.
+ */
+export declare function frameInLanguage(src: string, language?: string): string;
 /**
  * An application on Datalayer, read with its embed token: what the space
  * keeps of it (`model_s`, the stored definition), whose `spec` is the