@datalayer/agent-runtimes 1.3.34 → 1.3.36

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/apps/appspec.d.ts

@@ -33,8 +33,15 @@ export declare const APP_KINDS: AppKind[];
 export declare const APP_ACCENTS: AppAccent[];
 /** The four ways an application sits in another product's page (LOOP D-07). */
 export declare const APP_EMBED_MODES: AppEmbedMode[];
-/** The characters an Appspec may name for its floating assistant (LOOP T-24). */
-export declare const APP_ASSISTANT_CHARACTERS: AppAssistantCharacter[];
+/**
+ * How an Appspec names the character of its floating assistant (LOOP T-24):
+ * the id a plugin contributes it under, `paperclip` or `acme-owl` — as
+ * agentspecs' `ASSISTANT_CHARACTER_ID`. Which ids exist is what the enabled
+ * plugins contribute (`assistantCharacterNamed`), not the spec's to say.
+ */
+export declare const APP_ASSISTANT_CHARACTER_ID: RegExp;
+/** Whether a value is shaped as a character id an Appspec may name. */
+export declare function isAssistantCharacterId(value: unknown): value is AppAssistantCharacter;
 /** The layout a kind starts with. */
 export declare const DEFAULT_LAYOUTS: Record<AppKind, AppLayout>;
 /** What an application keeps of what it did, when it does not say. */

package/lib/loop/apps/appspec.js

@@ -23,13 +23,19 @@ export const APP_EMBED_MODES = [
     'panel',
     'assistant',
 ];
-/** The characters an Appspec may name for its floating assistant (LOOP T-24). */
-export const APP_ASSISTANT_CHARACTERS = [
-    'paperclip',
-    'wizard',
-    'cat',
-    'eyes',
-];
+/**
+ * How an Appspec names the character of its floating assistant (LOOP T-24):
+ * the id a plugin contributes it under, `paperclip` or `acme-owl` — as
+ * agentspecs' `ASSISTANT_CHARACTER_ID`. Which ids exist is what the enabled
+ * plugins contribute (`assistantCharacterNamed`), not the spec's to say.
+ */
+export const APP_ASSISTANT_CHARACTER_ID = /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/;
+/** Whether a value is shaped as a character id an Appspec may name. */
+export function isAssistantCharacterId(value) {
+    return (typeof value === 'string' &&
+        value.length <= 64 &&
+        APP_ASSISTANT_CHARACTER_ID.test(value));
+}
 const ACTION_CLASS_NAMES = [
     'read',
     'write',
@@ -218,7 +224,7 @@ function parseInterface(data, kind) {
     if (isData(data.surface)) {
         parsed.surface = parseSurface(data.surface);
     }
-    if (APP_ASSISTANT_CHARACTERS.includes(data.assistant)) {
+    if (isAssistantCharacterId(data.assistant)) {
         parsed.assistant = data.assistant;
     }
     return parsed;

package/lib/loop/apps/checks.js

@@ -39,7 +39,7 @@ import { getTeamSpec } from '../../specs/teams';
 import { getToolSpec } from '../../specs/tools';
 import { getTrack } from '../../specs/tracks';
 import { pluginsOffSetupNotes } from '../plugins/canvas-blocks';
-import { parseAppspec } from './appspec';
+import { isAssistantCharacterId, parseAppspec } from './appspec';
 import { classesOf, splitRef, toolBehaviours } from './rules';
 export const NOT_READY = 'Not ready';
 export const NEEDS_ATTENTION = 'Needs attention';
@@ -378,7 +378,6 @@ const ENUMS = {
     ],
     visibility: ['private', 'invited', 'organization', 'link', 'public'],
     mode: ['inline', 'bubble', 'panel', 'assistant'],
-    character: ['paperclip', 'wizard', 'cat', 'eyes'],
     trigger: ['schedule', 'event', 'once'],
     criterion: ['metric', 'noul', 'choice', 'score'],
     direction: ['higher', 'lower'],
@@ -506,7 +505,9 @@ export function documentShapeProblems(document) {
     mapping(d.interface, 'interface', ui => {
         oneOf(ui.layout, ENUMS.layout, 'interface.layout');
         oneOf(ui.accent, ENUMS.accent, 'interface.accent');
-        oneOf(ui.assistant, ENUMS.character, 'interface.assistant');
+        if (ui.assistant !== undefined && !isAssistantCharacterId(ui.assistant)) {
+            at('interface.assistant', 'names a character by the id a plugin contributes it under, lowercase words joined by a hyphen: `paperclip`, `acme-owl`');
+        }
         text(ui.welcome, 'interface.welcome');
         texts(ui.components, 'interface.components');
         records(ui.starters, 'interface.starters', (item, where) => {

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/index.d.ts

@@ -0,0 +1,38 @@
+/**
+ * The floating assistant in the LOOP workspace (LOOP T-24): the character a
+ * page draws over its workspace, chosen from what the enabled plugins
+ * contribute to `loop.assistant.character` — the application's own
+ * (`interface.assistant`) when its Appspec names one, else the person's
+ * choice from their settings, else the paper clip. It acts out the chat's
+ * turn (T-22), says the agent's newest words in its balloon while the
+ * conversation is out of sight (T-23), opens the conversation when clicked,
+ * is dragged about and sent away as the chat's own assistant is (T-27).
+ *
+ * The workspace's chat is the conversation: on a page layout, its side panel
+ * is opened and closed; where the conversation is always on screen, a click
+ * takes the person to its composer.
+ *
+ * @module loop/plugins/assistant
+ */
+import type { JSX } from 'react';
+import { type AssistantState } from '../../../chat/assistant/state';
+import { type ChatTurnSnapshot } from '../../core';
+export declare const LOOP_ASSISTANT_PLUGIN_NAME = "@datalayer/loop-plugin-assistant";
+export type LoopAssistantConfig = {
+    /** The character the application's Appspec names; it wins. */
+    app?: string;
+    /** The character the person chose in their settings. */
+    person?: string;
+};
+/**
+ * What the character acts out, from the workspace's chat turn (T-22): it
+ * thinks while the agent thinks, works while a tool runs (the turn's
+ * `activity`), speaks while the answer is written, and idles otherwise.
+ */
+export declare function assistantStateOfTurn(turn: ChatTurnSnapshot, moment?: {
+    arriving?: boolean;
+    leaving?: boolean;
+}): AssistantState;
+export declare function LoopAssistant({ app, person, }: LoopAssistantConfig): JSX.Element | null;
+export declare const LoopAssistantPlugin: import("@datalayer/reactor").ReactorPlugin<LoopAssistantConfig, unknown, unknown>;
+export default LoopAssistantPlugin;