@datalayer/agent-runtimes 1.3.83 → 1.3.85

package/lib/loop/apps/settingsInputs.js

@@ -0,0 +1,147 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * The nine inputs a setting is drawn with (LOOP P-20): each a JSON Schema
+ * field and, where the field's own widget is not the one wanted, the widget a
+ * form's uiSchema names for it (`ui:widget`) — what `@datalayer/primer-rjsf`
+ * draws. agentspecs' `SETTING_INPUTS`, `FORM_WIDGETS` and
+ * `form_ui_problems`, said again for the page, in its sentences.
+ *
+ * Pure: no React, no network.
+ *
+ * @module loop/apps/settingsInputs
+ */
+/** The nine inputs: the field each is, and the widget it is drawn with. */
+export const SETTING_INPUTS = {
+    Select: { field: 'a field with an `enum`', widget: 'select (its own)' },
+    Slider: {
+        field: 'a `number` or an `integer` with a `minimum` and a `maximum`',
+        widget: 'range',
+    },
+    Switch: { field: 'a `boolean`', widget: 'switch' },
+    TextInput: { field: 'a `string`', widget: 'text (its own), or textarea' },
+    Checkbox: { field: 'a `boolean`', widget: 'checkbox (its own)' },
+    DatePicker: {
+        field: 'a `string` of `format: date`',
+        widget: 'date (its own)',
+    },
+    MultiSelect: {
+        field: 'an `array` of `uniqueItems` whose `items` have an `enum`',
+        widget: 'select (its own), or checkboxes',
+    },
+    RadioGroup: { field: 'a field with an `enum`', widget: 'radio' },
+    Tags: {
+        field: 'an `array` of `string` items without an `enum`',
+        widget: 'tags',
+    },
+};
+/** The widgets a form's `ui` may name (`ui:widget`). */
+export const FORM_WIDGETS = [
+    'select',
+    'radio',
+    'range',
+    'updown',
+    'switch',
+    'checkbox',
+    'text',
+    'textarea',
+    'date',
+    'checkboxes',
+    'tags',
+];
+const isData = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
+/** Why a widget cannot draw a field, in words; null when it can. */
+export function widgetRefusal(widget, field) {
+    const kind = field.type;
+    const items = isData(field.items) ? field.items : {};
+    switch (widget) {
+        case 'select':
+        case 'radio':
+            if ('enum' in field || (widget === 'radio' && kind === 'boolean')) {
+                return null;
+            }
+            if (widget === 'select' && kind === 'array' && 'enum' in items) {
+                return null;
+            }
+            return 'draws a choice: the field has an `enum`';
+        case 'range':
+            return (kind === 'number' || kind === 'integer') &&
+                'minimum' in field &&
+                'maximum' in field
+                ? null
+                : 'is a slider: a `number` or an `integer` with a `minimum` and a `maximum`';
+        case 'updown':
+            return kind === 'number' || kind === 'integer'
+                ? null
+                : 'draws a `number` or an `integer`';
+        case 'switch':
+        case 'checkbox':
+            return kind === 'boolean' ? null : 'draws a `boolean`';
+        case 'text':
+        case 'textarea':
+            return kind === 'string' ? null : 'draws a `string`';
+        case 'date':
+            return kind === 'string' ? null : 'draws a `string` of `format: date`';
+        case 'checkboxes':
+            return kind === 'array' && 'enum' in items
+                ? null
+                : 'draws an `array` whose `items` have an `enum`';
+        case 'tags':
+            return kind === 'array' && items.type === 'string' && !('enum' in items)
+                ? null
+                : 'draws an `array` of `string` items without an `enum`';
+        default:
+            return `is no widget: ${FORM_WIDGETS.join(', ')}`;
+    }
+}
+const quoted = (value) => `“${String(value)}”`;
+/**
+ * What is wrong with how a form's fields are drawn, in agentspecs'
+ * `form_ui_problems` sentences: by field name, the `ui:` options of each —
+ * `ui:widget` one of {@link FORM_WIDGETS} that draws the field — and
+ * `ui:order` at its top.
+ */
+export function formUiProblems(said, schema, ui) {
+    if (!isData(ui)) {
+        return [`${said} is drawn by field name: its \`ui\` is a mapping.`];
+    }
+    const fields = isData(schema.properties) ? schema.properties : {};
+    const problems = [];
+    for (const [name, options] of Object.entries(ui)) {
+        if (name === 'ui:order') {
+            const order = Array.isArray(options) ? options : null;
+            const unknown = (order ?? []).filter(item => item !== '*' && !(String(item) in fields));
+            if (order === null || unknown.length > 0) {
+                problems.push(`${said} orders fields it does not ask: ${unknown.map(quoted).join(', ') || String(options)}.`);
+            }
+            continue;
+        }
+        if (name.startsWith('ui:')) {
+            continue;
+        }
+        if (!(name in fields)) {
+            problems.push(`${said} says how to draw ${quoted(name)}, which it does not ask.`);
+            continue;
+        }
+        if (!isData(options)) {
+            problems.push(`${said}'s field ${quoted(name)} is drawn with \`ui:\` options, a mapping.`);
+            continue;
+        }
+        const wrong = Object.keys(options).filter(key => !key.startsWith('ui:') && key !== 'items');
+        if (wrong.length > 0) {
+            problems.push(`${said}'s field ${quoted(name)} is drawn with \`ui:\` options, not ${wrong.map(quoted).join(', ')}.`);
+        }
+        const widget = options['ui:widget'];
+        const field = fields[name];
+        if (widget === undefined || !isData(field)) {
+            continue;
+        }
+        const refusal = widgetRefusal(String(widget), field);
+        if (refusal) {
+            problems.push(`${said}'s field ${quoted(name)} is drawn with ${quoted(widget)}, which ${refusal}.`);
+        }
+    }
+    return problems;
+}

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

@@ -0,0 +1,43 @@
+/**
+ * What a person sends (LOOP P-21), as rules: the kinds of file an
+ * application takes in its composer without asking (`interface.uploads`),
+ * each with its largest size, and how many at once — and why a file is
+ * refused, in the sentence the runtime says when it was sent all the same.
+ * agentspecs' own (`AppUploads.refusal`, `too_many`, `upload_kind_takes`),
+ * said again for the page.
+ *
+ * Pure: no React, no network.
+ *
+ * @module loop/apps/uploads
+ */
+import type { AppSpec, AppUploadsSpec } from '../../types/agentspecs';
+/** The largest file a person may send an application, in megabytes. */
+export declare const MAX_UPLOAD_MB = 25;
+/** What a kind takes when it does not say, in megabytes. */
+export declare const DEFAULT_UPLOAD_MB = 10;
+/** How many files go with one message when it does not say. */
+export declare const DEFAULT_MAX_FILES = 5;
+/** A media type, a family of them, or an extension, lowercase. */
+export declare const UPLOAD_KIND: RegExp;
+/** A file as the person gives it: its name, its type, its size in bytes. */
+export type SentFile = {
+    name: string;
+    type: string;
+    size: number;
+};
+/**
+ * Whether a kind of file takes a file: an extension (`.csv`) by its name, a
+ * media type (`application/pdf`) or a family (`image/*`) by its type.
+ */
+export declare function kindTakes(kind: string, file: Pick<SentFile, 'name' | 'type'>): boolean;
+/** Whether any of `kinds` takes a file; any file when there are none. */
+export declare const acceptsFile: (kinds: readonly string[] | undefined, file: Pick<SentFile, "name" | "type">) => boolean;
+/** The `accept` of a file input for what the application takes. */
+export declare const uploadsAccept: (uploads: AppUploadsSpec) => string;
+/**
+ * Why files sent without being asked are refused, in a sentence — the
+ * runtime's — or `null` when the application takes every one of them.
+ */
+export declare function uploadsRefusal(app: Pick<AppSpec, 'name' | 'interface'>, files: readonly SentFile[]): string | null;
+/** What the composer says it takes, in a sentence. */
+export declare function uploadsInWords(uploads: AppUploadsSpec): string;

package/lib/loop/apps/uploads.js

@@ -0,0 +1,66 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/** The largest file a person may send an application, in megabytes. */
+export const MAX_UPLOAD_MB = 25;
+/** What a kind takes when it does not say, in megabytes. */
+export const DEFAULT_UPLOAD_MB = 10;
+/** How many files go with one message when it does not say. */
+export const DEFAULT_MAX_FILES = 5;
+/** A media type, a family of them, or an extension, lowercase. */
+export const UPLOAD_KIND = /^(?:[a-z0-9][a-z0-9.+-]*\/(?:\*|[a-z0-9][a-z0-9.+-]*)|\.[a-z0-9][a-z0-9_+-]*)$/;
+/**
+ * Whether a kind of file takes a file: an extension (`.csv`) by its name, a
+ * media type (`application/pdf`) or a family (`image/*`) by its type.
+ */
+export function kindTakes(kind, file) {
+    const wanted = kind.trim().toLowerCase();
+    if (wanted.startsWith('.')) {
+        return file.name.toLowerCase().endsWith(wanted);
+    }
+    const type = (file.type || '').split(';', 1)[0].trim().toLowerCase();
+    if (wanted.endsWith('/*')) {
+        return type.startsWith(wanted.slice(0, -1));
+    }
+    return type === wanted;
+}
+/** Whether any of `kinds` takes a file; any file when there are none. */
+export const acceptsFile = (kinds, file) => !kinds?.length || kinds.some(kind => kindTakes(kind, file));
+const megabytes = (size) => `${(size / (1024 * 1024)).toFixed(1)} MB`;
+/** The `accept` of a file input for what the application takes. */
+export const uploadsAccept = (uploads) => uploads.kinds.map(kind => kind.type).join(',');
+/**
+ * Why files sent without being asked are refused, in a sentence — the
+ * runtime's — or `null` when the application takes every one of them.
+ */
+export function uploadsRefusal(app, files) {
+    if (files.length === 0) {
+        return null;
+    }
+    const uploads = app.interface.uploads;
+    if (!uploads) {
+        return `${app.name} takes no file sent with a message: its Appspec names none it takes (interface.uploads).`;
+    }
+    if (files.length > uploads.maxFiles) {
+        return `${files.length} files were sent at once: ${app.name} takes at most ${uploads.maxFiles}.`;
+    }
+    for (const file of files) {
+        const kind = uploads.kinds.find(candidate => kindTakes(candidate.type, file));
+        if (!kind) {
+            const taken = uploads.kinds.map(candidate => candidate.type).join(', ');
+            return `${file.name} is not a kind of file ${app.name} takes: it takes ${taken}.`;
+        }
+        if (file.size > kind.maxMb * 1024 * 1024) {
+            return `${file.name} is ${megabytes(file.size)}: ${app.name} takes ${kind.type} of at most ${kind.maxMb} MB.`;
+        }
+    }
+    return null;
+}
+/** What the composer says it takes, in a sentence. */
+export function uploadsInWords(uploads) {
+    const kinds = uploads.kinds
+        .map(kind => `${kind.type} up to ${kind.maxMb} MB`)
+        .join(', ');
+    return `Takes ${kinds}; ${uploads.maxFiles} at most at once.`;
+}

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

@@ -519,7 +519,7 @@ export type AgentBlueprintContribution = {
      * P-19) tell a run turned in the page, and the model it runs on — as the
      * runtime's session API applies them. Unsaid for an agent with no modes.
      */
-    modeEffect?: (chosen: Record<string, string>) => AppModeEffect;
+    modeEffect?: (chosen: Record<string, string>, profile?: string) => AppModeEffect;
 };
 export declare const LoopAgentBlueprint: import("@datalayer/reactor").ContributionPoint<AgentBlueprintContribution>;
 /** One conversation opener a plugin offers on the empty chat. */
@@ -529,6 +529,12 @@ export type ChatSuggestionItem = {
     /** What is submitted; the chip's words when absent. */
     message?: string;
     emoji?: string;
+    /**
+     * The heading it is offered under: openers of one group together, under
+     * its name, those without one first — an application's starter's category
+     * (LOOP P-20).
+     */
+    group?: string;
 };
 /**
  * Conversation openers, contributed ahead of the spec's own.
@@ -573,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.
  *
@@ -649,6 +656,13 @@ export type LoopChatExtrasValue = {
      * offering a first question to somebody who has already asked one.
      */
     hideOpeners?: boolean;
+    /**
+     * Openers in place of the contributed ones, live: what an application
+     * offers with the profile picked in its composer (LOOP P-20) — the empty
+     * chat offers these, and changes them when the profile changes, without
+     * rebuilding the reactor. `hiddenOpeners` still applies.
+     */
+    openers?: ChatSuggestionItem[];
     /**
      * Told what the agent has used, each time the chat learns it.
      *

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
@@ -91,6 +97,20 @@ export declare function useEmbedSession({ app, serverUrl, embedToken, resume, }:
     embedToken?: string;
     resume?: boolean;
 }): EmbedSession;
+/**
+ * Window messages from the page (LOOP P-25): on the host's own server, the
+ * page is handed how to post one to the application's session
+ * (`host.onWindowPort`) — the session the chat goes on with, its uid known
+ * from its first message — and what the code answers is raised on the page
+ * as `window-message` events. The session returned is the one to draw: its
+ * thread told when it starts.
+ */
+export declare function useWindowPort({ serverUrl, embedToken, session, host, }: {
+    serverUrl?: string;
+    embedToken?: string;
+    session: EmbedSession;
+    host?: AppEmbedHost;
+}): EmbedSession;
 /**
  * The page and the application talking (LOOP D-10): the tools of the host
  * the Appspec names, given to its agent through a chat-extras plugin made
@@ -136,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
@@ -146,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;
@@ -156,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,9 +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 { embedSessionKey, reattachSession, sessionGoneSentence, sessionKeeper, visitOfToken, } from './embedSession';
+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
@@ -120,6 +124,55 @@ export function useEmbedSession({ app, serverUrl, embedToken, resume = true, })
         ...(found.said ? { said: found.said } : {}),
     };
 }
+/**
+ * Window messages from the page (LOOP P-25): on the host's own server, the
+ * page is handed how to post one to the application's session
+ * (`host.onWindowPort`) — the session the chat goes on with, its uid known
+ * from its first message — and what the code answers is raised on the page
+ * as `window-message` events. The session returned is the one to draw: its
+ * thread told when it starts.
+ */
+export function useWindowPort({ serverUrl, embedToken, session, host, }) {
+    const hostRef = useRef(host);
+    hostRef.current = host;
+    const given = session.thread;
+    const uid = useRef(given?.messages.length ? given.id : undefined);
+    // A thread of its own where the embed keeps none, so that its uid is known.
+    const own = useMemo(() => ({ id: generateMessageId(), messages: [] }), []);
+    const base = given ?? (serverUrl && session.ready ? own : undefined);
+    const thread = useMemo(() => base && {
+        ...base,
+        onStarted: (id) => {
+            uid.current = id;
+            base.onStarted?.(id);
+        },
+    }, [base]);
+    useEffect(() => {
+        const port = host?.onWindowPort;
+        if (!serverUrl || !port) {
+            return undefined;
+        }
+        port(async (data) => {
+            if (!uid.current) {
+                throw new Error(WINDOW_NOT_YET);
+            }
+            const said = await postWindowMessage({
+                serverUrl,
+                uid: uid.current,
+                ...(embedToken ? { token: embedToken } : {}),
+                data,
+            });
+            for (const answer of said) {
+                hostRef.current?.onEvent?.({
+                    type: 'window-message',
+                    detail: { data: answer },
+                });
+            }
+        });
+        return () => port(null);
+    }, [serverUrl, embedToken, host]);
+    return thread ? { ...session, thread } : session;
+}
 /** What the embed says once of its session, above the conversation. */
 function SessionSaid({ said }) {
     return said ? (_jsx(Text, { as: "p", role: "status", sx: { px: 3, py: 2, m: 0, fontSize: 1 }, children: said })) : null;
@@ -145,7 +198,34 @@ 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',
+        detail: { data },
+    })), []);
     const said = useRef({ answering: false });
     const before = useRef('idle');
     const told = useRef('');
@@ -199,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);
@@ -219,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.
@@ -227,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,
@@ -276,9 +357,16 @@ 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 session = useEmbedSession({ app, serverUrl, embedToken, resume });
+    const kept = useEmbedSession({ app, serverUrl, embedToken, resume });
+    // Window messages from the page, on the host's own server (P-25).
+    const session = useWindowPort({
+        serverUrl,
+        embedToken,
+        session: kept,
+        host,
+    });
     const system = useSystemMode();
     // The theme the application names (T-30), `loop` when none; its mode
     // the host's, else the application's, else the visitor's system's.
@@ -297,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