@datalayer/agent-runtimes 1.3.35 → 1.3.37

package/lib/components/a2ui/datalayer/schema.js

@@ -0,0 +1,108 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * The A2UI schema of a component of Datalayer's own, read from the catalog
+ * (LOOP C-13, C-18): each property its JSON Schema declares, typed as it
+ * says; each thing it shows or sends a binding into the data model — a path
+ * the application publishes, or a value given in place; its `action`, what
+ * it dispatches when a person acts on it, written as A2UI writes a Button's.
+ *
+ * A2UI's renderer reads a component's schema to tell its properties apart —
+ * a binding it resolves and writes back through, an action it dispatches, a
+ * plain value it hands over — so the schema is built with the zod A2UI reads
+ * (v3), from the catalog, and cannot drift from what the Canvas, the YAML
+ * and Python check a component against.
+ *
+ * @module components/a2ui/datalayer/schema
+ */
+import { z } from 'zod/v3';
+import { ActionSchema, DataBindingSchema } from '@a2ui/web_core/v0_9';
+import { COMPONENT_CATALOGUE } from '../../../specs/uiPlugins';
+/** The components of Datalayer's own the catalog has, by id. */
+export const OWN_COMPONENT_IDS = Object.values(COMPONENT_CATALOGUE)
+    .filter(component => !component.standard)
+    .map(component => component.id);
+/** A component of Datalayer's own, from the catalog; it throws for any other. */
+export function ownComponent(id) {
+    const component = COMPONENT_CATALOGUE[id];
+    if (!component) {
+        throw new Error(`The catalog has no component ${id}.`);
+    }
+    if (component.standard || !component.properties || !component.bindings) {
+        throw new Error(`${id} is A2UI's own: its schema is the basic catalog's, not Datalayer's.`);
+    }
+    return component;
+}
+/**
+ * What a component shows or sends: a list, a record, words, a number, true
+ * or false given in place, or a path into the data model. A2UI resolves it
+ * — and gives the component a setter for it when it is a path.
+ */
+const BindingSchema = z
+    .union([
+    z.array(z.any()),
+    z.record(z.string(), z.unknown()),
+    z.string(),
+    z.number(),
+    z.boolean(),
+    DataBindingSchema,
+])
+    .describe('REF:#/$defs/DynamicValue|Datalayer: what the component shows or sends — a path the application publishes or takes, or a value given in place.');
+/** A property as its JSON Schema types it. */
+function propertySchema(name, property) {
+    if (property.enum) {
+        return z.enum(property.enum);
+    }
+    switch (property.type) {
+        case 'string':
+            return z.string();
+        case 'integer':
+        case 'number':
+            return z.number();
+        case 'boolean':
+            return z.boolean();
+        case 'array':
+            return z.array(z.any());
+        case 'object':
+            return z.record(z.string(), z.unknown());
+        default:
+            throw new Error(`${name} is typed ${String(property.type)}, which a component's property cannot be.`);
+    }
+}
+/** The names a component shows and sends through, each once. */
+export function bindingNames(component) {
+    const { shows, sends } = component.bindings;
+    return [...new Set([...shows, ...sends])];
+}
+/**
+ * The A2UI schema of a component of Datalayer's own: its properties as its
+ * JSON Schema has them, its bindings, its `action`, and the `weight` every
+ * basic component takes inside a Row or a Column. Strict, as the basic
+ * catalog's are: a key it does not declare refuses the tree.
+ */
+export function ownComponentSchema(id) {
+    const component = ownComponent(id);
+    const json = component.properties;
+    const required = new Set(json.required ?? []);
+    const shape = {};
+    for (const [name, property] of Object.entries(json.properties ?? {})) {
+        const schema = propertySchema(name, property);
+        shape[name] = required.has(name) ? schema : schema.optional();
+    }
+    for (const name of bindingNames(component)) {
+        if (name in shape) {
+            throw new Error(`${id} both declares ${name} as a property and binds through it.`);
+        }
+        shape[name] = BindingSchema.optional();
+    }
+    shape.action = ActionSchema
+        .describe('REF:#/$defs/Action|What it dispatches when a person acts on it.')
+        .optional();
+    shape.weight = z
+        .number()
+        .describe('The relative weight of this component within a Row or Column.')
+        .optional();
+    return z.object(shape).strict();
+}

package/lib/components/a2ui/index.d.ts

@@ -3,3 +3,4 @@ export * from './A2uiSurfaceComposed';
 export * from './styles';
 export * from './visibleWhen';
 export * from './visibility';
+export * from './datalayer';

package/lib/components/a2ui/index.js

@@ -7,3 +7,4 @@ export * from './A2uiSurfaceComposed';
 export * from './styles';
 export * from './visibleWhen';
 export * from './visibility';
+export * from './datalayer';

package/lib/components/a2ui/visibleWhen.d.ts

@@ -11,7 +11,9 @@ export declare function nodeIsShown(props: Record<string, unknown>): boolean;
 /** A component, its schema declaring `visible_when`, drawn behind the guard. */
 export declare function withVisibleWhen(component: ReactComponentImplementation): ReactComponentImplementation;
 /**
- * The catalog Datalayer's renderer draws from: A2UI's basic catalog, under
- * its own id — the payloads name it — with `visible_when` on every component.
+ * The catalog Datalayer's renderer draws from: A2UI's basic catalog and
+ * Datalayer's own components (Table, Chart, File upload, Chat, Evidence,
+ * Form — `./datalayer`), under the basic catalog's id — the payloads name
+ * it — with `visible_when` on every component.
  */
 export declare const datalayerCatalog: Catalog<ReactComponentImplementation, import("@a2ui/web_core/v0_9").FunctionImplementation>;

package/lib/components/a2ui/visibleWhen.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { basicCatalog, useSignalValue, } from '@a2ui/react/v0_9';
 import { Catalog, DynamicBooleanSchema, ResolvedBinding, isWritable, } from '@a2ui/web_core/v0_9';
 import { VISIBLE_WHEN, isShown } from './visibility';
+import { OWN_COMPONENTS } from './datalayer';
 /**
  * Whether a node's resolved properties let it be drawn: no condition, or one
  * that holds. A2UI resolves a dynamic property to a binding whether the block
@@ -48,7 +49,9 @@ export function withVisibleWhen(component) {
     };
 }
 /**
- * The catalog Datalayer's renderer draws from: A2UI's basic catalog, under
- * its own id — the payloads name it — with `visible_when` on every component.
+ * The catalog Datalayer's renderer draws from: A2UI's basic catalog and
+ * Datalayer's own components (Table, Chart, File upload, Chat, Evidence,
+ * Form — `./datalayer`), under the basic catalog's id — the payloads name
+ * it — with `visible_when` on every component.
  */
-export const datalayerCatalog = new Catalog(basicCatalog.id, basicCatalog.protocolVersion, [...basicCatalog.components.values()].map(withVisibleWhen), [...basicCatalog.functions.values()], basicCatalog.themeSchema, basicCatalog.instructions);
+export const datalayerCatalog = new Catalog(basicCatalog.id, basicCatalog.protocolVersion, [...basicCatalog.components.values(), ...OWN_COMPONENTS].map(withVisibleWhen), [...basicCatalog.functions.values()], basicCatalog.themeSchema, basicCatalog.instructions);

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

@@ -1,5 +1,6 @@
 import type { ReactorPlugin } from '@datalayer/reactor';
 import type { AppSpec } from '../../types/agentspecs';
+import type { ThemeOverrides } from '../../types/chat';
 import { type LoopEmbedProps } from '../embed/LoopEmbed';
 import type { LoopPresetOptions } from '../presets';
 import type { PresenceState } from '../../chat/presence/presenceStatus';
@@ -79,5 +80,12 @@ export declare function appDatalayerCreatePayload(app: AppSpec, instance?: AppIn
 /** No host plugins: one array, so that it never reads as a change. */
 /** The agentspec a runtime is allocated with before an application's agent is created on it. */
 export declare const DATALAYER_BOOTSTRAP_AGENTSPEC = "example-simple";
+/**
+ * The application's accent over the theme its conversation wears, in both
+ * modes (LOOP T-05): its bubbles and its one button in its own colour, and
+ * not in the theme's default — the chat sets its theme again inside it, so
+ * what the page around it set does not reach in.
+ */
+export declare function appThemeOverrides(app: AppSpec): ThemeOverrides | undefined;
 export declare function AppRenderer({ app, plugins, instance, onPresence, frame, ...embed }: AppRendererProps): React.JSX.Element;
 export default AppRenderer;

package/lib/loop/apps/AppRenderer.js

@@ -34,6 +34,7 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
  * @module loop/apps/AppRenderer
  */
 import { useMemo } from 'react';
+import { loopAccentStyles } from '@datalayer/primer-addons';
 import { defineAgentCapacityPlugin } from '../plugins/agent-capacity';
 import { APP_PAGE_SURFACE, defineAppPagePlugin, hasAppPage, } from '../plugins/app-page';
 import { LoopEmbed } from '../embed/LoopEmbed';
@@ -158,6 +159,21 @@ export function appDatalayerCreatePayload(app, instance) {
 /** The agentspec a runtime is allocated with before an application's agent is created on it. */
 export const DATALAYER_BOOTSTRAP_AGENTSPEC = 'example-simple';
 const NO_PLUGINS = [];
+/**
+ * The application's accent over the theme its conversation wears, in both
+ * modes (LOOP T-05): its bubbles and its one button in its own colour, and
+ * not in the theme's default — the chat sets its theme again inside it, so
+ * what the page around it set does not reach in.
+ */
+export function appThemeOverrides(app) {
+    const accent = app.interface?.accent;
+    return accent
+        ? {
+            light: loopAccentStyles(accent, 'light'),
+            dark: loopAccentStyles(accent, 'dark'),
+        }
+        : undefined;
+}
 export function AppRenderer({ app, plugins = NO_PLUGINS, instance, onPresence, frame = false, ...embed }) {
     /*
      * The application plugin, made once per application. `LoopEmbed` rebuilds
@@ -198,6 +214,10 @@ export function AppRenderer({ app, plugins = NO_PLUGINS, instance, onPresence, f
     const datalayerCreatePayload = useMemo(() => (app.agent ? appDatalayerCreatePayload(app, instance) : undefined), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [source, instance?.appUid, instance?.deploymentUid, instance?.version]);
+    const accent = app.interface?.accent;
+    const themeOverrides = useMemo(() => appThemeOverrides(app), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [accent]);
     if (!appPlugin) {
         return (_jsxs("div", { role: "status", style: { padding: 16 }, children: ["\u201C", app.name, "\u201D is run by a team, which the workspace does not run as an application yet."] }));
     }
@@ -217,7 +237,7 @@ export function AppRenderer({ app, plugins = NO_PLUGINS, instance, onPresence, f
         targetFixed: true, 
         // Applications first (LOOP T-12): an application's conversation wears
         // the `loop` theme; a host may say otherwise.
-        themeVariant: "loop", 
+        themeVariant: "loop", themeOverrides: themeOverrides, 
         // Its own face, name and welcome in the chat (T-08); no counters: a
         // person using an application is not asking about tokens.
         presence: {

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

@@ -1,6 +1,8 @@
 import type { CSSProperties, JSX, ReactNode } from 'react';
+import type { PluginRef } from '@datalayer/reactor';
 import type { AppAccent, AppEmbedMode, AppSpec } from '../../types/agentspecs';
 import { type AppInstance } from '../apps/AppRenderer';
+import { type AssistantCharacterChosen } from '../plugins/assistant-characters';
 import { type EmbedColorMode } from './embedConfig';
 export type AppEmbedProps = {
     /** The application. */
@@ -29,7 +31,20 @@ export type AppEmbedProps = {
      * shadow root's styles stop at its edge. A React host leaves it off.
      */
     ownPortal?: boolean;
+    /**
+     * The host's plugins, for the assistant's character: what they contribute
+     * to `loop.assistant.character` is there beside Datalayer's four. The
+     * element passes none.
+     */
+    plugins?: PluginRef[];
 };
+/**
+ * The character the assistant mode draws (T-24, D-07): the application's own
+ * (`interface.assistant`), else the paper clip, from what Datalayer's
+ * characters and the host's plugins contribute — as a page decides it, with
+ * no person's choice, since a visitor to another product has none here.
+ */
+export declare function embedAssistantCharacter(app: AppSpec, plugins?: PluginRef[]): AssistantCharacterChosen;
 /** The `loop` theme, with the application's (or the host's) accent and face. */
 export declare function EmbedThemed({ accent, colorMode, font, children, style, }: {
     accent: AppAccent;
@@ -38,5 +53,5 @@ export declare function EmbedThemed({ accent, colorMode, font, children, style,
     children: ReactNode;
     style?: CSSProperties;
 }): JSX.Element;
-export declare function AppEmbed({ app, mode, accent, colorMode, font, serverUrl, instance, height, ownPortal, }: AppEmbedProps): JSX.Element;
+export declare function AppEmbed({ app, mode, accent, colorMode, font, serverUrl, instance, height, ownPortal, plugins, }: AppEmbedProps): JSX.Element;
 export default AppEmbed;

package/lib/loop/embed/AppEmbed.js

@@ -17,7 +17,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * - **panel** — the conversation at the right edge of the page, at full
  *   height;
  * - **assistant** — the application's character on the page, speaking in a
- *   balloon (§6.9), the one its Appspec names (`interface.assistant`).
+ *   balloon (§6.9): the one its Appspec names (`interface.assistant`), else
+ *   the paper clip, looked up in what is contributed — Datalayer's four and
+ *   the host's own plugins (T-24); an id nothing contributes is said, never
+ *   replaced.
  *
  * The three floating modes are `ChatFloating`'s, given the application's
  * name, welcome, starters and accent, and its agent's endpoint — created
@@ -25,7 +28,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * rules there as it does inline.
  *
  * In the `loop` theme with the application's accent (T-12, T-05), which the
- * host may override with the face and the mode (D-11).
+ * host may override with the face and the mode (D-11) — around the
+ * conversation and inside it, where the chat sets its theme again.
  *
  * @module loop/embed/AppEmbed
  */
@@ -38,8 +42,20 @@ import { useAgentRuntimes } from '../../hooks/useAgentRuntimes';
 import { AppRenderer, DATALAYER_BOOTSTRAP_AGENTSPEC, appDatalayerCreatePayload, defineAppPlugin, } from '../apps/AppRenderer';
 import { LoopAgentBlueprint } from '../core';
 import { ensureServerAgent } from '../plugins/agents/switchable';
+import { AssistantCharactersPlugin, assistantCharacterFor, assistantCharactersFrom, } from '../plugins/assistant-characters';
 import { floatingViewOf } from './embedConfig';
-import { embedThemeStyles } from './embedTheme';
+import { embedThemeOverrides, embedThemeStyles } from './embedTheme';
+/** No host plugins: one array, so that it never reads as a change. */
+const NO_PLUGINS = [];
+/**
+ * The character the assistant mode draws (T-24, D-07): the application's own
+ * (`interface.assistant`), else the paper clip, from what Datalayer's
+ * characters and the host's plugins contribute — as a page decides it, with
+ * no person's choice, since a visitor to another product has none here.
+ */
+export function embedAssistantCharacter(app, plugins = NO_PLUGINS) {
+    return assistantCharacterFor(assistantCharactersFrom([AssistantCharactersPlugin, ...plugins]), { app: app.interface.assistant });
+}
 /** What the application's agent is created with on an agent-runtimes server. */
 function serverCreatePayload(app) {
     const blueprint = (defineAppPlugin(app).contributes ?? []).find((item) => item.point === LoopAgentBlueprint);
@@ -132,14 +148,14 @@ function Face({ emoji }) {
     return (_jsx("span", { "aria-hidden": true, style: { fontSize: 18, lineHeight: 1 }, children: emoji }));
 }
 /** The bubble, the panel and the assistant: `ChatFloating` in that mode. */
-function FloatingChat({ app, view, colorMode, agent, }) {
+function FloatingChat({ app, view, colorMode, themeOverrides, character, agent, }) {
     const welcome = app.interface.welcome || app.description;
     return (_jsx(ChatFloating
     // A new agent is a new conversation.
-    , { defaultViewMode: view, assistantCharacter: app.interface.assistant ?? 'paperclip', protocol: agent.protocol, authToken: agent.protocol?.authToken, title: app.name, description: welcome, brandIcon: _jsx(Face, { emoji: app.emoji }), buttonIcon: _jsx(Face, { emoji: app.emoji }), buttonTooltip: `Talk to ${app.name}`, suggestions: app.interface.starters.map(starter => ({
+    , { defaultViewMode: view, ...(character ? { assistantCharacter: character } : {}), protocol: agent.protocol, authToken: agent.protocol?.authToken, title: app.name, description: welcome, brandIcon: _jsx(Face, { emoji: app.emoji }), buttonIcon: _jsx(Face, { emoji: app.emoji }), buttonTooltip: `Talk to ${app.name}`, suggestions: app.interface.starters.map(starter => ({
             title: starter.label,
             message: starter.message,
-        })), themeVariant: "loop", colorMode: colorMode, showTokenUsage: false, showSettingsButton: false, showPoweredBy: false, useStore: false, launching: !agent.protocol && !agent.error, launchingMessage: agent.waiting, disabled: Boolean(agent.error), disableReason: agent.error }, agent.protocol?.endpoint ?? 'waiting'));
+        })), themeVariant: "loop", themeOverrides: themeOverrides, colorMode: colorMode, showTokenUsage: false, showSettingsButton: false, showPoweredBy: false, useStore: false, launching: !agent.protocol && !agent.error, launchingMessage: agent.waiting, disabled: Boolean(agent.error), disableReason: agent.error }, agent.protocol?.endpoint ?? 'waiting'));
 }
 /** Floating, its agent on the host's agent-runtimes server. */
 function ServerFloating({ serverUrl, ...props }) {
@@ -192,14 +208,27 @@ export function EmbedThemed({ accent, colorMode, font, children, style, }) {
      */
     _jsx("div", { "data-color-mode": colorMode, style: { display: 'contents' }, children: _jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: loopTheme, themeStyles: themeStyles, baseStyles: style, children: children }) }));
 }
-export function AppEmbed({ app, mode, accent, colorMode = 'auto', font, serverUrl, instance, height = 640, ownPortal = false, }) {
+export function AppEmbed({ app, mode, accent, colorMode = 'auto', font, serverUrl, instance, height = 640, ownPortal = false, plugins = NO_PLUGINS, }) {
     const system = useSystemMode();
     const resolvedMode = colorMode === 'auto' ? system : colorMode;
     const shownAs = mode ?? app.deployment.embedded?.mode ?? 'inline';
     const view = floatingViewOf(shownAs);
-    return (_jsxs(EmbedThemed, { accent: accent ?? app.interface.accent, colorMode: resolvedMode, font: font, style: view
+    const worn = accent ?? app.interface.accent;
+    const themeOverrides = useMemo(() => embedThemeOverrides({ accent: worn, font }), [worn, font]);
+    const named = app.interface.assistant;
+    const assistant = useMemo(() => view === 'assistant' ? embedAssistantCharacter(app, plugins) : undefined, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [view, named, plugins]);
+    if (assistant && 'problem' in assistant) {
+        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, 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 && serverUrl ? (_jsx(ServerFloating, { app: app, view: view, serverUrl: serverUrl, colorMode: resolvedMode })) : view ? (_jsx(DatalayerFloating, { app: app, view: view, instance: instance, colorMode: resolvedMode })) : (_jsx(AppRenderer, { app: app, target: serverUrl ? 'local' : 'datalayer', ...(serverUrl ? { serverUrl } : {}), instance: instance }))] }));
+            : { height, display: 'flex', flexDirection: 'column' }, children: [ownPortal ? _jsx(OwnPortalRoot, {}) : null, view && serverUrl ? (_jsx(ServerFloating, { app: app, view: view, serverUrl: serverUrl, colorMode: resolvedMode, themeOverrides: themeOverrides, character: character })) : view ? (_jsx(DatalayerFloating, { app: app, view: view, instance: instance, colorMode: resolvedMode, themeOverrides: themeOverrides, character: character })) : (_jsx(AppRenderer, { app: app, target: serverUrl ? 'local' : 'datalayer', ...(serverUrl ? { serverUrl } : {}), instance: instance, 
+                // The host's accent and face over the application's own, inside
+                // its conversation too.
+                themeOverrides: themeOverrides }))] }));
 }
 export default AppEmbed;

package/lib/loop/embed/LoopEmbed.js

@@ -66,6 +66,8 @@ export function LoopEmbed({ agentId = '', showHeader = false, chatHeaderActions,
         preset.datalayerAgentSpecId,
         preset.targetFixed,
         preset.themeVariant,
+        // By its content, as the payload below.
+        JSON.stringify(preset.themeOverrides ?? null),
         preset.presence?.name,
         preset.presence?.face,
         preset.presence?.welcome,

package/lib/loop/embed/element.js

@@ -37,7 +37,7 @@ import { loopThemeStyles } from '@datalayer/primer-addons';
 import { coreStore } from '@datalayer/core/lib/state/substates/CoreState';
 import { parseAppspec } from '../apps/appspec';
 import { readAppspecYaml } from '../apps/yaml';
-import { AppEmbed } from './AppEmbed';
+import { AppEmbed, embedAssistantCharacter } from './AppEmbed';
 import { EMBED_HOST_VARIABLES, EMBED_OBSERVED_ATTRIBUTES, EMBED_TAG, EmbedAttributeError, embedLookOf, inlineHeightOf, } from './embedConfig';
 import { embedShadowCss } from './embedTheme';
 /** What the framed run page and the element say to each other. */
@@ -362,6 +362,15 @@ export function defineDatalayerAppElement(options = {}) {
                 this.say(error.message);
                 return;
             }
+            // A character nothing contributes is said in place, as an attribute
+            // that is not one is (D-07, T-24).
+            if (look.mode === 'assistant') {
+                const chosen = embedAssistantCharacter(source.app);
+                if ('problem' in chosen) {
+                    this.say(chosen.problem);
+                    return;
+                }
+            }
             this.setAttribute('data-embed-mode', look.mode);
             const shadow = this.skeleton(loopThemeStyles.css);
             const mount = document.createElement('div');

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

@@ -1,5 +1,6 @@
 import { type ThemeStyles } from '@datalayer/primer-addons';
 import type { AppAccent } from '../../types/agentspecs';
+import type { ThemeOverrides } from '../../types/chat';
 /**
  * The `loop` theme as the embed wears it: the application's accent over it
  * in both modes (T-05), and the host's face when it named one.
@@ -8,6 +9,17 @@ export declare function embedThemeStyles({ accent, font, }: {
     accent: AppAccent;
     font?: string;
 }): ThemeStyles;
+/**
+ * The same accent and face laid over the conversation's own theme (T-05,
+ * D-11): the chat sets the `loop` theme again inside it, which would put the
+ * theme's mint and face back over what the embed set around it. The
+ * accent's properties in each mode, and, when the host named a face, every
+ * property of the theme that names its own.
+ */
+export declare function embedThemeOverrides({ accent, font, }: {
+    accent: AppAccent;
+    font?: string;
+}): ThemeOverrides;
 /**
  * The element's own stylesheet, written into its shadow root.
  *

package/lib/loop/embed/embedTheme.js

@@ -30,6 +30,21 @@ export function embedThemeStyles({ accent, font = '', }) {
         dark: mode('dark'),
     };
 }
+/**
+ * The same accent and face laid over the conversation's own theme (T-05,
+ * D-11): the chat sets the `loop` theme again inside it, which would put the
+ * theme's mint and face back over what the embed set around it. The
+ * accent's properties in each mode, and, when the host named a face, every
+ * property of the theme that names its own.
+ */
+export function embedThemeOverrides({ accent, font = '', }) {
+    const mode = (which) => {
+        const theme = loopThemeStyles[which];
+        const faced = Object.fromEntries(Object.entries(withFace(theme, font)).filter(([name, value]) => typeof value === 'string' && value !== theme[name]));
+        return { ...faced, ...loopAccentStyles(accent, which) };
+    };
+    return { light: mode('light'), dark: mode('dark') };
+}
 /**
  * The element's own stylesheet, written into its shadow root.
  *

package/lib/loop/plugins/assistant-characters/index.d.ts

@@ -5,7 +5,7 @@
  *
  * @module loop/plugins/assistant-characters
  */
-import { type ReactorPlugin } from '@datalayer/reactor';
+import { type PluginRef, type ReactorPlugin } from '@datalayer/reactor';
 import { type AssistantCharacter } from '../../../chat/assistant/characters';
 import type { AssistantCharacterData } from '../../../chat/assistant/formats/types';
 import { LoopAssistantCharacter, type AssistantCharacterContribution } from '../../core';
@@ -22,6 +22,15 @@ export declare function assistantCharactersOf(reactor: ContributionsReader): {
     id: string;
     character: AssistantCharacter | AssistantCharacterData;
 }[];
+/**
+ * What these plugins contribute, enabled on their own: for a host with no
+ * workspace to read them from — the embed's floating assistant (D-07) —
+ * which enables Datalayer's characters and whatever plugins it is given.
+ */
+export declare function assistantCharactersFrom(plugins: PluginRef[]): {
+    id: string;
+    character: AssistantCharacter | AssistantCharacterData;
+}[];
 /**
  * The character an application names, from what is contributed; an id no
  * enabled plugin contributes is an error that says which ids there are.

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

@@ -9,7 +9,7 @@
  *
  * @module loop/plugins/assistant-characters
  */
-import { contribution, definePlugin, } from '@datalayer/reactor';
+import { buildReactorFromPlugins, contribution, definePlugin, } from '@datalayer/reactor';
 import { ASSISTANT_CHARACTERS, DEFAULT_ASSISTANT_CHARACTER, } from '../../../chat/assistant/characters';
 import { LoopAssistantCharacter, } from '../../core';
 export const ASSISTANT_CHARACTERS_PLUGIN_NAME = '@datalayer/loop-plugin-assistant-characters';
@@ -26,6 +26,21 @@ export function assistantCharactersOf(reactor) {
         .getContributions(LoopAssistantCharacter)
         .map(entry => entry.value);
 }
+/**
+ * What these plugins contribute, enabled on their own: for a host with no
+ * workspace to read them from — the embed's floating assistant (D-07) —
+ * which enables Datalayer's characters and whatever plugins it is given.
+ */
+export function assistantCharactersFrom(plugins) {
+    const reactor = buildReactorFromPlugins(plugins);
+    reactor.start();
+    try {
+        return assistantCharactersOf(reactor);
+    }
+    finally {
+        reactor.stop();
+    }
+}
 /**
  * The character an application names, from what is contributed; an id no
  * enabled plugin contributes is an error that says which ids there are.

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Box, IconButton, SegmentedControl, Text, Truncate, } from '@primer/react';
-import { useColorPalette } from '@datalayer/primer-addons';
+import { loopShapeVars, useColorPalette } from '@datalayer/primer-addons';
 import { ScreenFullIcon, ScreenNormalIcon } from '@primer/octicons-react';
 import { computed, signal } from '@datalayer/reactor';
 /* A signal to read when the layout publishes no live stance: the hook needs one. */
@@ -54,6 +54,11 @@ const NO_SURFACE = '';
  * small control reads as an error state, and this one is an invitation.
  */
 const FULLSCREEN_HINT_PERIOD_MS = 1400;
+/**
+ * An application's face in the empty state: the page's size of the three a
+ * face is drawn at (LOOP T-19, `--loop-face-large`, 72px).
+ */
+const FACE_LARGE = parseInt(loopShapeVars['--loop-face-large'], 10);
 export default function ChatView({ workspace }) {
     /* 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
@@ -1326,7 +1331,14 @@ export default function ChatView({ workspace }) {
         mentionableAgents: mentionable,
         headerContent: inpromptMenu.length > 0 ? (_jsx(ReactorSlot, { slot: LoopSlots.inpromptMenu, props: { workspace } })) : undefined,
         footerExtras: promptActions.length > 0 ? (_jsx(ReactorSlot, { slot: LoopSlots.promptAction, props: { workspace } })) : undefined,
-        showAgentsMenu: true,
+        /*
+          An application's conversation keeps none of the session's controls
+          under its composer — the agents, the model, the tools and their servers,
+          the skills (LOOP T-17, T-18): a person using an application is not
+          choosing them, and its builder chose them in its spec. An agent's chat
+          keeps them.
+        */
+        showAgentsMenu: !presence,
         showInlineAgentsMenu: false,
         agents: footerAgents,
         selectedAgentId: selectedMemberId,
@@ -1336,18 +1348,18 @@ export default function ChatView({ workspace }) {
         showTokenUsage: chatExtras.showTokenUsage ?? config?.showTokenUsage ?? true,
         showContextRing: true,
         agentUsage: contextUsage ?? undefined,
-        showModelSelector: true,
+        showModelSelector: !presence,
         models: offeredModels,
         decisions,
         selectedModel: activeModel,
         onModelSelect: model => void selectModel(model),
-        showToolsMenu: true,
+        showToolsMenu: !presence,
         availableTools: offeredTools,
         mcpServers: configQuery.data?.mcpServers ?? [],
         // Live from the host example, when one feeds it: the footer's MCP status
         // indicator. (Codemode surfaces through the toggle below, not a blob.)
         mcpStatusData: chatExtras.mcpStatusData ?? undefined,
-        showSkillsMenu: true,
+        showSkillsMenu: !presence,
         skills: skillsQuery.data?.skills ?? [],
         skillsLoading: skillsQuery.isLoading,
         enabledSkills,
@@ -1444,7 +1456,7 @@ export default function ChatView({ workspace }) {
                     // The theme it wears, when the host names one (an application's).
                     , { 
                         // The theme it wears, when the host names one (an application's).
-                        themeVariant: config?.themeVariant, 
+                        themeVariant: config?.themeVariant, themeOverrides: config?.themeOverrides, 
                         // The header says why, beside the title, for the same reason the
                         // placeholder does: a dead control with no explanation is worse
                         // than an absent one.
@@ -1483,9 +1495,9 @@ export default function ChatView({ workspace }) {
                         // An application says what it is doing, in plain words, beside
                         // its name (T-08); an agent's chat keeps its header as it is.
                         headerContent: presence ? _jsx(PresenceLine, { state: presenceNow }) : undefined, emptyState: {
-                            // An application's own face, large: the thing a person's eye
-                            // lands on first (LOOP T-08).
-                            icon: presence?.face ? (_jsx("span", { "aria-hidden": true, style: { fontSize: 48, lineHeight: 1 }, children: presence.face })) : (_jsx(BrandIcon, { size: 48 })),
+                            // An application's own face, at the page's size of the three
+                            // (LOOP T-08, T-19): the thing a person's eye lands on first.
+                            icon: presence?.face ? (_jsx("span", { "aria-hidden": true, style: { fontSize: FACE_LARGE, lineHeight: 1 }, children: presence.face })) : (_jsx(BrandIcon, { size: 48 })),
                             // `ChatEmptyState` reads its heading from here and nowhere
                             // else — the `title` above reaches the header only — so
                             // without this the agent introduced itself as "Start a

package/lib/loop/plugins/chat/index.d.ts

@@ -1,4 +1,5 @@
 import type { PresenceState } from '../../../chat/presence/presenceStatus';
+import type { ThemeOverrides } from '../../../types/chat';
 /** What a host may set on the chat. */
 /** Who is answering, as the person meets them. */
 export interface ChatPresence {
@@ -22,6 +23,11 @@ export type ChatPluginConfig = {
      * the theme's bubbles, pills and colours whatever the page around it wears.
      */
     themeVariant?: string;
+    /**
+     * Laid over that theme, by mode: an application's accent (LOOP T-05), so
+     * that its bubbles and its one button wear its colour and not the theme's.
+     */
+    themeOverrides?: ThemeOverrides;
     /**
      * Who is answering, as the person meets them (LOOP T-08): a name, a face
      * and a welcome, in place of the agent's id and a generic icon. An

package/lib/loop/presets.d.ts

@@ -23,6 +23,7 @@ import { type PluginRef } from '@datalayer/reactor';
 import { type AgentsConfig, type SandboxTarget } from './plugins/agents';
 import { type ChatPluginConfig, type ChatPresence } from './plugins/chat';
 import { type PageSize } from './plugins/page-layout';
+import type { ThemeOverrides } from '../types/chat';
 export type LoopPresetOptions = {
     /** Where the agent runtimes service is. */
     serverUrl?: string;
@@ -140,6 +141,8 @@ export type LoopPresetOptions = {
     targetFixed?: boolean;
     /** The theme the conversation wears, by name; the person's unless said. */
     themeVariant?: string;
+    /** Laid over that theme, by mode: an application's accent (LOOP T-05). */
+    themeOverrides?: ThemeOverrides;
     /** Who is answering, as the person meets them (LOOP T-08). */
     presence?: ChatPresence;
     /** Whether the counters are shown under the prompt; on unless said. */

package/lib/loop/presets.js

@@ -52,7 +52,7 @@ import { LoopPageLayoutPlugin } from './plugins/page-layout';
  * be installed or signed into, and the switches a demonstration wants are off.
  */
 export function loopPlugins(options = {}) {
-    const { serverUrl, target = 'browser', defaultEditor: askedEditor, showViewSelector = true, hideChatHeader = false, chatHeaderButtons = false, promptPlacement, autoFocusPrompt = true, suggestionLabels = true, fullScreenTopOffset = 0, showAgentVariants = false, agentSummary = true, teamId, teamPicker = true, pageLayout = false, pageLayoutArrangement = 'page', pageLayoutTurnPanel = 'below', pageLayoutPrompt = 'docked', pageLayoutPromptAnchor = 'top', pageLayoutSize, pageLayoutTurnPanelFooter = 'full', localAgent, localAgentSpec, datalayerAgentSpecId, datalayerCreatePayload, targetFixed, themeVariant, presence, showTokenUsage, floatingPrompt = false, editorSelector = false, editors = true, graph = false, commandPalette = false, pluginsPanel = false, windowFrame = false, firstPromptHook, } = options;
+    const { serverUrl, target = 'browser', defaultEditor: askedEditor, showViewSelector = true, hideChatHeader = false, chatHeaderButtons = false, promptPlacement, autoFocusPrompt = true, suggestionLabels = true, fullScreenTopOffset = 0, showAgentVariants = false, agentSummary = true, teamId, teamPicker = true, pageLayout = false, pageLayoutArrangement = 'page', pageLayoutTurnPanel = 'below', pageLayoutPrompt = 'docked', pageLayoutPromptAnchor = 'top', pageLayoutSize, pageLayoutTurnPanelFooter = 'full', localAgent, localAgentSpec, datalayerAgentSpecId, datalayerCreatePayload, targetFixed, themeVariant, themeOverrides, presence, showTokenUsage, floatingPrompt = false, editorSelector = false, editors = true, graph = false, commandPalette = false, pluginsPanel = false, windowFrame = false, firstPromptHook, } = options;
     const defaultEditor = askedEditor ?? (editors ? 'notebook' : 'none');
     return [
         // The chat owns the editor beside it, so which one opens is its
@@ -70,6 +70,7 @@ export function loopPlugins(options = {}) {
             suggestionLabels,
             fullScreenTopOffset,
             themeVariant,
+            themeOverrides,
             presence,
             showTokenUsage,
         }),