@datalayer/agent-runtimes 1.3.84 → 1.3.86

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,46 @@
+/**
+ * A widget's page written in its code, run on its inputs (LOOP P-05).
+ *
+ * The page opens a session of the application's agent on its runtime
+ * (`POST /api/v1/apps/sessions`), then, each time an input changes, sends
+ * them all as the session's `page` action (`POST …/sessions/{uid}/actions`,
+ * `{name: "page", payload: {inputs}}`). The runtime checks them against the
+ * page's form — refused with 422 and a sentence — runs its code's
+ * `@app.page` on them, and answers its outputs as a `CUSTOM` event named
+ * `loop.page`, `{inputs, outputs}`, which the page shows in place. Nothing is
+ * said in the conversation.
+ *
+ * @module loop/plugins/app-page/pageRun
+ */
+/** The `CUSTOM` event that says what a page shows. */
+export declare const LOOP_PAGE = "loop.page";
+/** Where the page reaches the application's session API, and as whom. */
+export type PageRunContext = {
+    /** The agent-runtimes server that runs the application. */
+    serverUrl: string;
+    /** The application's agent there. */
+    agentId: string;
+    /** The person's token; none on the machine itself. */
+    token?: string;
+    fetcher?: typeof fetch;
+};
+/** What a turn of the session API said: the events of its stream, parsed. */
+export declare function streamEvents(stream: string): Array<Record<string, unknown>>;
+/** What a run of the page answered: its outputs, by name, or why there are none. */
+export type PageTurn = {
+    outputs: Record<string, unknown>;
+    inputs: Record<string, unknown>;
+} | {
+    refused: string;
+};
+/** The page's turn, read from the stream the runtime answered. */
+export declare function pageTurnOf(stream: string): PageTurn;
+/** Open the session its page runs in; its uid, as the runtime says it. */
+export declare function openPageSession(context: PageRunContext): Promise<string>;
+/**
+ * Run the page on its inputs in a session: its outputs, or the runtime's
+ * sentence — its form refusing an input, its code failing.
+ */
+export declare function runPageIn(context: PageRunContext, uid: string, inputs: Record<string, unknown>): Promise<PageTurn>;
+/** Each output as the page's data holds it, by path. */
+export declare function outputsData(outputs: Record<string, unknown>): Record<string, unknown>;

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

@@ -0,0 +1,111 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * A widget's page written in its code, run on its inputs (LOOP P-05).
+ *
+ * The page opens a session of the application's agent on its runtime
+ * (`POST /api/v1/apps/sessions`), then, each time an input changes, sends
+ * them all as the session's `page` action (`POST …/sessions/{uid}/actions`,
+ * `{name: "page", payload: {inputs}}`). The runtime checks them against the
+ * page's form — refused with 422 and a sentence — runs its code's
+ * `@app.page` on them, and answers its outputs as a `CUSTOM` event named
+ * `loop.page`, `{inputs, outputs}`, which the page shows in place. Nothing is
+ * said in the conversation.
+ *
+ * @module loop/plugins/app-page/pageRun
+ */
+/** The `CUSTOM` event that says what a page shows. */
+export const LOOP_PAGE = 'loop.page';
+/** What a turn of the session API said: the events of its stream, parsed. */
+export function streamEvents(stream) {
+    const events = [];
+    for (const block of stream.split('\n\n')) {
+        const data = block
+            .split('\n')
+            .filter(line => line.startsWith('data:'))
+            .map(line => line.slice('data:'.length).trim())
+            .join('');
+        if (!data)
+            continue;
+        try {
+            events.push(JSON.parse(data));
+        }
+        catch {
+            // Not an event: skipped, as a reader of the stream skips it.
+        }
+    }
+    return events;
+}
+/** The page's turn, read from the stream the runtime answered. */
+export function pageTurnOf(stream) {
+    let shown = null;
+    for (const event of streamEvents(stream)) {
+        if (event.type === 'RUN_ERROR') {
+            return { refused: String(event.message ?? 'Its page could not run.') };
+        }
+        if (event.type === 'CUSTOM' && event.name === LOOP_PAGE) {
+            const value = (event.value ?? {});
+            shown = { outputs: value.outputs ?? {}, inputs: value.inputs ?? {} };
+        }
+    }
+    return (shown ?? {
+        refused: 'Its page showed nothing: its code answered no outputs.',
+    });
+}
+const base = (context) => `${context.serverUrl.replace(/\/+$/, '')}/api/v1/apps/sessions`;
+async function posted(context, url, body) {
+    const response = await (context.fetcher ?? fetch)(url, {
+        method: 'POST',
+        headers: {
+            'content-type': 'application/json',
+            ...(context.token ? { Authorization: `Bearer ${context.token}` } : {}),
+        },
+        body: JSON.stringify(body),
+    });
+    if (!response.ok) {
+        let detail = '';
+        try {
+            const said = (await response.json());
+            detail = typeof said.detail === 'string' ? said.detail : '';
+        }
+        catch {
+            // No sentence: the status says it.
+        }
+        throw new Error(detail || `Its page was refused (${response.status}).`);
+    }
+    return response.text();
+}
+/** Open the session its page runs in; its uid, as the runtime says it. */
+export async function openPageSession(context) {
+    const stream = await posted(context, base(context), {
+        agent: context.agentId,
+    });
+    for (const event of streamEvents(stream)) {
+        if (event.type === 'CUSTOM' && event.name === 'loop.session') {
+            const uid = event.value?.uid;
+            if (typeof uid === 'string' && uid) {
+                return uid;
+            }
+        }
+    }
+    throw new Error('The runtime opened no session for its page.');
+}
+/**
+ * Run the page on its inputs in a session: its outputs, or the runtime's
+ * sentence — its form refusing an input, its code failing.
+ */
+export async function runPageIn(context, uid, inputs) {
+    try {
+        const stream = await posted(context, `${base(context)}/${encodeURIComponent(uid)}/actions`, { name: 'page', payload: { inputs } });
+        return pageTurnOf(stream);
+    }
+    catch (error) {
+        return { refused: error instanceof Error ? error.message : String(error) };
+    }
+}
+/** Each output as the page's data holds it, by path. */
+export function outputsData(outputs) {
+    return Object.fromEntries(Object.entries(outputs).map(([name, value]) => [`/outputs/${name}`, value]));
+}

package/lib/loop/plugins/assistant/index.js

@@ -9,7 +9,7 @@ import { pageLayoutPanelOpen, togglePagePanel, } from '@datalayer/primer-addons/
 import { AssistantStage } from '../../../chat/assistant/AssistantStage';
 import { decisionsAskerAt } from '../../../chat/assistant/decisions';
 import { peekLine } from '../../../chat/assistant/ConversationBalloon';
-import { ASSISTANT_WORDS, assistantStateOf, keepAway, keptAway, latestSaying, } from '../../../chat/assistant/state';
+import { assistantStateOf, keepAway, keptAway, latestSaying, } from '../../../chat/assistant/state';
 import { useApproveToolRequest, useRejectToolRequest, useToolApprovalsQuery, } from '../../../hooks/useToolApprovals';
 import { approvalsOfApp, ruleOfApproval } from '../app-rules/AppRulesCard';
 import { useViewportDrag } from '../../../chat/useViewportDrag';
@@ -17,6 +17,7 @@ import { LoopAssistantCharacter, LoopAssistantMenu, LoopChatLayout, LoopChatTurn
 import { assistantCharacterFor } from '../assistant-characters';
 import { useOptionalSandboxService } from '../agents/useSandboxService';
 import { TARGET_SPECS } from '../agents/switchable';
+import { useChatWords } from '../../../chat/ChatLanguage';
 export const LOOP_ASSISTANT_PLUGIN_NAME = '@datalayer/loop-plugin-assistant';
 /** The character's size, in pixels, as the chat's own assistant. */
 const SIZE = 88;
@@ -72,6 +73,7 @@ function focusComposer() {
     composer?.focus();
 }
 export function LoopAssistant({ app, person, appId, decisions, balloon: displayGiven = 'history', workspace, }) {
+    const chatText = useChatWords();
     // The balloon's display, as its menu chose it; the Appspec's until then.
     const [chosenDisplay, setChosenDisplay] = useState();
     const display = chosenDisplay ?? displayGiven;
@@ -203,18 +205,18 @@ export function LoopAssistant({ app, person, appId, decisions, balloon: displayG
     const atWork = turn.status === 'streaming' || turn.status === 'thinking';
     const current = display === 'current';
     const balloon = state === 'paused'
-        ? { text: ASSISTANT_WORDS.paused }
+        ? { text: chatText.paused }
         : approval
-            ? { text: ASSISTANT_WORDS.approval, approval }
+            ? { text: chatText.waitingForYou, approval }
             : presence === 'waiting'
-                ? { text: ASSISTANT_WORDS.waiting }
+                ? { text: chatText.waitingOpen }
                 : tool
                     ? { text: turn.activity ?? '', tool, busy: true }
                     : current && (atWork || unheard)
                         ? {
                             text: turn.status === 'thinking'
-                                ? 'Thinking…'
-                                : (saying?.text ?? 'Thinking…'),
+                                ? chatText.thinking
+                                : (saying?.text ?? chatText.thinking),
                             more: saying?.more,
                             speaking: turn.status === 'streaming',
                             busy: atWork,

package/lib/loop/plugins/chat/ChatView.js

@@ -49,6 +49,7 @@ import { NONE_EDITOR, seedEditorChoice, setEditorOptions, } from '../shell/edito
 import { FaceDrawing, PresenceFace, PresenceLine, } from '../../../chat/presence/Presence';
 import { presenceState, presenceToolOf, } from '../../../chat/presence/presenceStatus';
 import { latestSaying, newestIsAnswer, } from '../../../chat/assistant/state';
+import { useChatWords } from '../../../chat/ChatLanguage';
 /** No editor: the conversation on its own. */
 const NO_SURFACE = '';
 /**
@@ -64,6 +65,7 @@ const FULLSCREEN_HINT_PERIOD_MS = 1400;
  */
 const FACE_LARGE = parseInt(loopShapeVars['--loop-face-large'], 10);
 export default function ChatView({ workspace }) {
+    const chatText = useChatWords();
     /* The active theme's own colours. Read from the store rather than a
        provider, so a workspace mounted without the addons theme still gets the
        default palette instead of throwing. */
@@ -76,7 +78,7 @@ export default function ChatView({ workspace }) {
     // where it sets anything else about this plugin.
     const reactor = useReactorPlatform();
     const config = reactor.getConfig(CHAT_PLUGIN_NAME);
-    const placeholder = config?.placeholder ?? 'Ask anything, type / for commands or @ for mention';
+    const placeholder = config?.placeholder || chatText.placeholder;
     const defaultSurface = config?.defaultSurface ?? 'notebook';
     /*
      * The input-prompt plugin's own configuration, read from here rather than
@@ -1040,8 +1042,8 @@ export default function ChatView({ workspace }) {
     const chatDisabled = gateBlocked || keyExpired || Boolean(inPageRefusal) || ambient.disabled;
     const disabledReason = keyExpired
         ? expiredKeyIsTemporary
-            ? 'This demo runs on a shared key, and its time is up. Sign in to keep going.'
-            : 'Your key has expired. Sign in to keep going.'
+            ? chatText.demoKeyExpired
+            : chatText.keyExpired
         : (inPageRefusal ??
             gateReason ??
             (ambient.disabled ? ambient.disableReason : undefined));
@@ -1773,7 +1775,7 @@ export default function ChatView({ workspace }) {
                         renderToolResult: chatExtras.renderToolResult, showTurnFooter: chatExtras.showTokenUsage ?? config?.showTokenUsage ?? true, onContextSnapshot: handleContextSnapshot, onLoadingChange: handleLoadingChange, onItemsChange: handleMessagesChange, onDisplayItemsChange: handleDisplayItemsChange, enableStreaming: true }) }), besideChat && !promptHidden ? prompt : null] }) }));
     // Off when the host asked for the menu alone: the composer's suggestions
     // control carries the same openers (`suggestions` above).
-    const chipsEl = config?.suggestionLabels !== false && chatSuggestions.length > 0 ? (_jsx(Box, { "aria-label": "Suggested prompts", sx: { display: 'flex', flexWrap: 'wrap', gap: 2, px: 2, pb: '6px' }, children: chatSuggestions.map(item => (_jsx(Box, { as: "button", type: "button", 
+    const chipsEl = config?.suggestionLabels !== false && chatSuggestions.length > 0 ? (_jsx(Box, { "aria-label": chatText.suggestedPrompts, sx: { display: 'flex', flexWrap: 'wrap', gap: 2, px: 2, pb: '6px' }, children: chatSuggestions.map(item => (_jsx(Box, { as: "button", type: "button", 
             // The whole request, where the chip shows only its summary.
             title: item.message, disabled: busy || chatDisabled, onClick: () => void handleSend(item.message), sx: {
                 appearance: 'none',