@datalayer/agent-runtimes 1.3.81 → 1.3.83

package/lib/loop/apps/AppComposer.js

@@ -0,0 +1,67 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { ActionList, ActionMenu } from '@primer/react';
+import { contribution, definePlugin, signal } from '@datalayer/reactor';
+import { useSignalValue } from '@datalayer/reactor/react';
+import { LoopCommand, LoopRunProps, LoopSlots } from '../core';
+import { commandPrompt, modeChoice, modeDefaults } from './composer';
+/** The plugin's name, before the application's id. */
+export const APP_COMPOSER_PLUGIN_NAME = '@datalayer/loop-plugin-app-composer';
+/**
+ * The plugin that puts an application's commands in the composer's `/` menu
+ * and its modes beside the composer. Nothing for an application with
+ * neither: its plugin contributes nothing.
+ */
+export function defineAppComposerPlugin(app) {
+    const modes = app.interface.modes ?? [];
+    /** The option of each mode the person is in. */
+    const chosen = signal(modeDefaults(app));
+    function ModeSwitches() {
+        const now = useSignalValue(chosen);
+        return (_jsx(_Fragment, { children: modes.map(mode => {
+                const on = mode.options.find(option => option.id === now[mode.id]) ??
+                    mode.options[0];
+                return (_jsxs(ActionMenu, { children: [_jsxs(ActionMenu.Button, { size: "small", variant: "invisible", "aria-label": `${mode.label}: ${on.label}`, children: [mode.label, ": ", on.label] }), _jsx(ActionMenu.Overlay, { width: "medium", children: _jsx(ActionList, { selectionVariant: "single", children: _jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: mode.label }), mode.options.map(option => (_jsxs(ActionList.Item, { selected: option.id === on.id, onSelect: () => {
+                                                chosen.value = modeChoice(app, {
+                                                    ...chosen.peek(),
+                                                    [mode.id]: option.id,
+                                                });
+                                            }, children: [option.label, option.description ? (_jsx(ActionList.Description, { variant: "block", children: option.description })) : null] }, option.id)))] }) }) })] }, mode.id));
+            }) }));
+    }
+    return definePlugin({
+        name: `${APP_COMPOSER_PLUGIN_NAME}-${app.id}`,
+        displayName: `${app.name}: commands and modes`,
+        description: `The commands and modes ${app.name} offers in its composer.`,
+        octicon: 'command-palette',
+        emoji: '\u{2318}',
+        contributes: [
+            ...(app.interface.commands ?? []).map(command => contribution(LoopCommand, {
+                name: command.name,
+                description: command.description,
+                group: app.name,
+                composer: true,
+                run: async ({ argv }) => ({ prompt: commandPrompt(command, argv) }),
+            }, { id: `app-command-${command.name}` })),
+            ...(modes.length > 0
+                ? [
+                    contribution(LoopRunProps, {
+                        id: 'app-modes',
+                        props: () => ({ loop: { modes: { ...chosen.peek() } } }),
+                    }, { id: 'app-modes' }),
+                ]
+                : []),
+        ],
+        build: () => ({
+            components: modes.length > 0
+                ? [
+                    {
+                        id: 'app-modes',
+                        slot: LoopSlots.promptAction,
+                        order: 5,
+                        Component: ModeSwitches,
+                    },
+                ]
+                : [],
+        }),
+    });
+}

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

@@ -108,6 +108,12 @@ export type AppRendererProps = Omit<LoopEmbedProps, 'agentId'> & {
      * `instance.appUid`.
      */
     sidebar?: boolean;
+    /**
+     * Draw its computer alone beside its page (R-23): what a deployment's
+     * owner and the editors of its application see of it at its address — its
+     * runtime shows it to them only (decided 2026-10-06). Implied by `sidebar`.
+     */
+    computer?: boolean;
     /**
      * Draw the application in a window (the `window-frame` plugin), its title
      * the application's face and name. A host's own `frameTitle` wins.
@@ -157,11 +163,13 @@ export type AppPreset = {
  *   its page (`app-page`) when it has one, with the Canvas's block plugins
  *   but those of the UI plugins its organization turned off (`pluginsOff`),
  *   whose contributions are the blocks it may draw (R-01b); a thumb and a
- *   comment on each answer when its record keeps feedback (V-18); what it
+ *   comment on each answer when its record keeps feedback (V-18); its
+ *   commands in the composer's `/` menu and its modes beside it (P-19); what it
  *   keeps and for how long, under its prompt before the first message, when
  *   `kept` says it (R-31); with
  *   `sidebar`, its rules and approvals card, its activity feed and its
- *   computer (R-01b, R-23);
+ *   computer (R-01b, R-23); with `computer`, its computer alone — at its
+ *   address, for its owner and the editors of its application;
  *   laid out as `interface.layout` says;
  * - a **decision**: the page its host draws (`page`), as the one view of a
  *   workspace without a conversation (R-02).
@@ -174,6 +182,8 @@ export declare function appPreset(app: AppSpec, options?: {
     pluginsOff?: readonly string[];
     /** Its rules and approvals, its activity and its computer, beside its page. */
     sidebar?: boolean;
+    /** Its computer alone beside its page (R-23): for its owner and editors at its address. */
+    computer?: boolean;
     /** What its record is kept under: its activity's. */
     appUid?: string;
     /**
@@ -207,8 +217,9 @@ 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.
+ * what the page around it set does not reach in. The accents are `loop`'s
+ * colours: over another theme (T-30) nothing is laid, the theme's own rule.
  */
-export declare function appThemeOverrides(app: AppSpec): ThemeOverrides | undefined;
-export declare function AppRenderer({ app, plugins, instance, onPresence, onSaying, paused, sidebar, frame, page, pluginsOff, ...embed }: AppRendererProps): React.JSX.Element;
+export declare function appThemeOverrides(app: AppSpec, variant: string): ThemeOverrides | undefined;
+export declare function AppRenderer({ app, plugins, instance, onPresence, onSaying, paused, sidebar, computer, frame, page, pluginsOff, ...embed }: AppRendererProps): React.JSX.Element;
 export default AppRenderer;

package/lib/loop/apps/AppRenderer.js

@@ -45,7 +45,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @module loop/apps/AppRenderer
  */
 import { useMemo } from 'react';
-import { loopAccentStyles } from '@datalayer/primer-addons';
+import { loopAccentStyles, useSystemColorMode, useThemeStore, } from '@datalayer/primer-addons';
 import { defineAgentCapacityPlugin } from '../plugins/agent-capacity';
 import { APP_PAGE_SURFACE, defineAppHostPagePlugin, defineAppPagePlugin, hasAppPage, } from '../plugins/app-page';
 import { CANVAS_BLOCK_PLUGINS, canvasBlocksPluginName, } from '../plugins/canvas-blocks';
@@ -54,6 +54,8 @@ import { dumpAppspec } from './appspec';
 import { defineAppActivityPlugin } from '../plugins/app-activity';
 import { defineAppComputerPlugin } from '../plugins/app-computer';
 import { defineAppRulesPlugin } from '../plugins/app-rules';
+import { defineAppComposerPlugin } from './AppComposer';
+import { modeEffect } from './composer';
 import { defineAppFeedbackPlugin } from './AppFeedback';
 import { defineAppKeptPlugin } from './AppKept';
 import { keepsFeedback } from './feedback';
@@ -105,6 +107,14 @@ export function defineAppPlugin(app) {
         // application's model when it names one (`loop/apps/agent`).
         instructions: app.instructions,
         model: app.model,
+        // Its modes (LOOP P-19), as the session API applies them: the
+        // instructions of the options chosen and the model one names, for the
+        // run they are sent with.
+        ...((app.interface.modes ?? []).length > 0
+            ? {
+                modeEffect: (chosen) => modeEffect(app, chosen),
+            }
+            : {}),
     });
 }
 /**
@@ -146,11 +156,13 @@ export function appLayoutOptions(app) {
  *   its page (`app-page`) when it has one, with the Canvas's block plugins
  *   but those of the UI plugins its organization turned off (`pluginsOff`),
  *   whose contributions are the blocks it may draw (R-01b); a thumb and a
- *   comment on each answer when its record keeps feedback (V-18); what it
+ *   comment on each answer when its record keeps feedback (V-18); its
+ *   commands in the composer's `/` menu and its modes beside it (P-19); what it
  *   keeps and for how long, under its prompt before the first message, when
  *   `kept` says it (R-31); with
  *   `sidebar`, its rules and approvals card, its activity feed and its
- *   computer (R-01b, R-23);
+ *   computer (R-01b, R-23); with `computer`, its computer alone — at its
+ *   address, for its owner and the editors of its application;
  *   laid out as `interface.layout` says;
  * - a **decision**: the page its host draws (`page`), as the one view of a
  *   workspace without a conversation (R-02).
@@ -180,6 +192,12 @@ export function appPreset(app, options = {}) {
         plugins: [
             defineAppPlugin(app),
             ...(withPage ? [defineAppPagePlugin(app), ...blocks] : []),
+            // Its commands in the composer's `/` menu and its modes beside the
+            // composer (LOOP P-19): only for an application that has some.
+            ...((app.interface.commands ?? []).length > 0 ||
+                (app.interface.modes ?? []).length > 0
+                ? [defineAppComposerPlugin(app)]
+                : []),
             // A thumb and a comment on each answer, kept in its record (LOOP
             // V-18): only for an application whose record keeps feedback.
             ...(keepsFeedback(app) ? [defineAppFeedbackPlugin(app)] : []),
@@ -196,7 +214,9 @@ export function appPreset(app, options = {}) {
                     // Its computer, live (R-23).
                     defineAppComputerPlugin(app),
                 ]
-                : []),
+                : options.computer
+                    ? [defineAppComputerPlugin(app)]
+                    : []),
         ],
         workspace: appLayoutOptions(app),
     };
@@ -249,18 +269,19 @@ 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.
+ * what the page around it set does not reach in. The accents are `loop`'s
+ * colours: over another theme (T-30) nothing is laid, the theme's own rule.
  */
-export function appThemeOverrides(app) {
+export function appThemeOverrides(app, variant) {
     const accent = app.interface?.accent;
-    return accent
+    return accent && variant === 'loop'
         ? {
             light: loopAccentStyles(accent, 'light'),
             dark: loopAccentStyles(accent, 'dark'),
         }
         : undefined;
 }
-export function AppRenderer({ app, plugins = NO_PLUGINS, instance, onPresence, onSaying, paused = false, sidebar = false, frame = false, page, pluginsOff, ...embed }) {
+export function AppRenderer({ app, plugins = NO_PLUGINS, instance, onPresence, onSaying, paused = false, sidebar = false, computer = false, frame = false, page, pluginsOff, ...embed }) {
     /*
      * The kind's plugins, made once per application. `LoopEmbed` rebuilds its
      * whole reactor when its plugins change, so a new plugin on every render
@@ -282,6 +303,7 @@ export function AppRenderer({ app, plugins = NO_PLUGINS, instance, onPresence, o
                 page,
                 pluginsOff,
                 sidebar,
+                computer,
                 appUid: instance?.appUid,
                 ...(deployed ? { kept: { visitor } } : {}),
             });
@@ -293,7 +315,7 @@ export function AppRenderer({ app, plugins = NO_PLUGINS, instance, onPresence, o
         }
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [source, page, off, sidebar, instance?.appUid, deployed, visitor]);
+    [source, page, off, sidebar, computer, instance?.appUid, deployed, visitor]);
     const allPlugins = useMemo(() => ('problem' in preset ? plugins : [...preset.plugins, ...plugins]), [preset, plugins]);
     /*
      * On Datalayer, the application runs on a runtime: allocated with a plain
@@ -311,10 +333,24 @@ export function AppRenderer({ app, plugins = NO_PLUGINS, instance, onPresence, o
         instance?.deploymentUid,
         instance?.version,
     ]);
+    /*
+     * The theme it runs in (T-30): the one its host says, else the one its
+     * Appspec names, else the page's — the person's own. Its mode likewise;
+     * `auto` is the device's.
+     */
+    const pageTheme = useThemeStore(state => state.theme);
+    const system = useSystemColorMode();
+    const named = app.interface?.theme;
+    const worn = embed.themeVariant ?? named?.variant ?? pageTheme;
+    const namedMode = named?.mode === 'auto'
+        ? system
+        : named?.mode === 'light' || named?.mode === 'dark'
+            ? named.mode
+            : undefined;
     const accent = app.interface?.accent;
-    const themeOverrides = useMemo(() => appThemeOverrides(app), 
+    const themeOverrides = useMemo(() => appThemeOverrides(app, worn), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [accent]);
+    [accent, worn]);
     if ('problem' in preset) {
         return (_jsx("div", { role: "status", style: { padding: 16 }, children: preset.problem }));
     }
@@ -330,13 +366,10 @@ export function AppRenderer({ app, plugins = NO_PLUGINS, instance, onPresence, o
             }
             : {}), 
         // Its rules, activity and computer on a rail, one at a time (T-07).
-        sidebarRail: sidebar, teamPicker: false, showAgentVariants: false, graph: false, pluginsPanel: false, datalayerAgentSpecId: DATALAYER_BOOTSTRAP_AGENTSPEC, 
+        sidebarRail: sidebar || computer, teamPicker: false, showAgentVariants: false, graph: false, pluginsPanel: false, datalayerAgentSpecId: DATALAYER_BOOTSTRAP_AGENTSPEC, 
         // Where an application runs is decided by its host — the Studio's
         // Preview, the hosted page — not offered to its user.
-        targetFixed: true, 
-        // Applications first (LOOP T-12): an application's conversation wears
-        // the `loop` theme; a host may say otherwise.
-        themeVariant: "loop", themeOverrides: themeOverrides, 
+        targetFixed: true, ...(named ? { themeVariant: named.variant } : {}), ...(namedMode ? { colorMode: namedMode } : {}), 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

@@ -24,13 +24,20 @@
  *
  * @module loop/apps/appspec
  */
-import type { AppAccent, AppAssistantCharacter, AppEmbedMode, AppVoiceSpec, AppKind, AppLayout, AppSpec } from '../../types/agentspecs';
+import type { AppAccent, AppThemeMode, AppThemeVariant, AppAssistantCharacter, AppEmbedMode, AppVoiceSpec, AppKind, AppLayout, AppSpec } from '../../types/agentspecs';
 /** The version of the spec itself. */
 export declare const APP_SCHEMA = "loop.app/v1";
 /** The face of an application that has not chosen one. */
 export declare const DEFAULT_EMOJI = "\uD83D\uDC40";
 export declare const APP_KINDS: AppKind[];
 export declare const APP_ACCENTS: AppAccent[];
+/**
+ * The themes an application may run in (LOOP T-30): Appearance's, as
+ * primer-addons lists them (`themeVariants`), in its order.
+ */
+export declare const APP_THEME_VARIANTS: AppThemeVariant[];
+/** The colour modes a theme is worn in. */
+export declare const APP_THEME_MODES: AppThemeMode[];
 /** The four ways an application sits in another product's page (LOOP D-07). */
 export declare const APP_EMBED_MODES: AppEmbedMode[];
 /**

package/lib/loop/apps/appspec.js

@@ -16,6 +16,23 @@ export const APP_ACCENTS = [
     'sun',
     'violet',
 ];
+/**
+ * The themes an application may run in (LOOP T-30): Appearance's, as
+ * primer-addons lists them (`themeVariants`), in its order.
+ */
+export const APP_THEME_VARIANTS = [
+    'datalayer',
+    'spatial',
+    'lovely',
+    'matrix',
+    'earth',
+    'sand',
+    'ivory',
+    'sun',
+    'loop',
+];
+/** The colour modes a theme is worn in. */
+export const APP_THEME_MODES = ['light', 'dark', 'auto'];
 /** The four ways an application sits in another product's page (LOOP D-07). */
 export const APP_EMBED_MODES = [
     'inline',
@@ -105,7 +122,8 @@ export function emptyAppspec(kind = 'chat') {
             accent: 'green',
             welcome: '',
             starters: [],
-            settings: [],
+            commands: [],
+            modes: [],
             components: [],
             outputs: [],
         },
@@ -129,6 +147,7 @@ export function emptyAppspec(kind = 'chat') {
         notifications: [],
         setup: [],
         enabled: true,
+        unavailable_because: '',
         tags: [],
         icon: DEFAULT_ICON,
         emoji: DEFAULT_EMOJI,
@@ -167,6 +186,7 @@ const KNOWN_KEYS = [
     'notifications',
     'decision',
     'enabled',
+    'unavailable_because',
     'tags',
     'icon',
     'emoji',
@@ -190,23 +210,38 @@ function parseRule(data) {
         behaviour: oneOf(data.behaviour, BEHAVIOURS, 'ask_first'),
     };
 }
-function parseSetting(data) {
-    const setting = {
+/** A slash command (LOOP P-19); a wrong one is said by the checks. */
+function parseCommand(data) {
+    return {
+        name: text(data.name),
+        description: text(data.description),
+        prompt: text(data.prompt),
+    };
+}
+/** One position of a mode switch, what it does said only when said. */
+function parseModeOption(data) {
+    const option = {
         id: text(data.id),
-        type: oneOf(data.type, ['select', 'text', 'toggle', 'slider', 'number'], 'text'),
         label: text(data.label),
-        options: texts(data.options),
     };
-    if (['string', 'boolean', 'number'].includes(typeof data.default)) {
-        setting.default = data.default;
-    }
-    if (typeof data.min === 'number') {
-        setting.min = data.min;
+    for (const key of ['description', 'instructions', 'model']) {
+        if (typeof data[key] === 'string' && data[key]) {
+            option[key] = data[key];
+        }
     }
-    if (typeof data.max === 'number') {
-        setting.max = data.max;
+    return option;
+}
+/** A mode switch (LOOP P-19). */
+function parseMode(data) {
+    const mode = {
+        id: text(data.id),
+        label: text(data.label),
+        options: records(data.options).map(parseModeOption),
+    };
+    if (typeof data.default === 'string' && data.default) {
+        mode.default = data.default;
     }
-    return setting;
+    return mode;
 }
 function parseSurface(data) {
     return {
@@ -246,11 +281,18 @@ function parseInterface(data, kind) {
             label: text(starter.label),
             message: text(starter.message),
         })),
-        settings: records(data.settings).map(parseSetting),
+        commands: records(data.commands).map(parseCommand),
+        modes: records(data.modes).map(parseMode),
         components: texts(data.components),
         voice: parseVoice(data.voice),
         outputs: texts(data.outputs),
     };
+    // Its settings are the JSON Schema of a form (C-16), kept as written: what
+    // is not one — the list of settings of earlier versions among it — is not
+    // read, and is said by the checks.
+    if (isData(data.settings)) {
+        parsed.settings = JSON.parse(JSON.stringify(data.settings));
+    }
     if (isData(data.surface)) {
         parsed.surface = parseSurface(data.surface);
     }
@@ -260,6 +302,14 @@ function parseInterface(data, kind) {
     if (data.balloon === 'history' || data.balloon === 'current') {
         parsed.balloon = data.balloon;
     }
+    // A theme of Appearance's, or none: an unknown one is said by the checks.
+    if (isData(data.theme) &&
+        APP_THEME_VARIANTS.includes(data.theme.variant)) {
+        parsed.theme = { variant: data.theme.variant };
+        if (APP_THEME_MODES.includes(data.theme.mode)) {
+            parsed.theme.mode = data.theme.mode;
+        }
+    }
     return parsed;
 }
 function parseCriterion(data) {
@@ -433,6 +483,7 @@ export function parseAppspec(document) {
         memory: text(data.memory),
         notifications: texts(data.notifications),
         enabled: flag(data.enabled, true),
+        unavailable_because: text(data.unavailable_because),
         tags: texts(data.tags),
         icon: text(data.icon, DEFAULT_ICON),
         emoji: text(data.emoji, DEFAULT_EMOJI) || DEFAULT_EMOJI,
@@ -516,19 +567,27 @@ function dumpInterface(spec, kind) {
         label: starter.label,
         message: starter.message,
     })))
-        .list('settings', spec.settings.map(setting => {
+        .list('commands', spec.commands.map(command => ({
+        name: command.name,
+        description: command.description,
+        prompt: command.prompt,
+    })))
+        .list('modes', spec.modes.map(mode => {
         const written = new Writer()
-            .text('id', setting.id, '\u0000')
-            .text('type', setting.type, '\u0000')
-            .text('label', setting.label, '\u0000')
-            .list('options', setting.options);
-        for (const key of ['default', 'min', 'max']) {
-            if (setting[key] !== undefined) {
-                written.data[key] = setting[key];
-            }
+            .text('id', mode.id, '\u0000')
+            .text('label', mode.label, '\u0000')
+            .list('options', mode.options.map(option => new Writer()
+            .text('id', option.id, '\u0000')
+            .text('label', option.label, '\u0000')
+            .text('description', option.description ?? '')
+            .text('instructions', option.instructions ?? '')
+            .text('model', option.model ?? '').data));
+        if (mode.default) {
+            written.data.default = mode.default;
         }
         return written.data;
     }))
+        .part('settings', spec.settings ? { ...spec.settings } : {})
         .list('components', spec.components);
     if (spec.surface) {
         writer.data.surface = dumpSurface(spec.surface);
@@ -539,6 +598,11 @@ function dumpInterface(spec, kind) {
     if (spec.balloon) {
         writer.data.balloon = spec.balloon;
     }
+    if (spec.theme) {
+        writer.data.theme = spec.theme.mode
+            ? { variant: spec.theme.variant, mode: spec.theme.mode }
+            : { variant: spec.theme.variant };
+    }
     // Its voice, when it says one (VO-41): a spec made before voice has none.
     if (spec.voice) {
         writer.part('voice', new Writer()
@@ -678,6 +742,7 @@ export function dumpAppspec(app) {
     }
     writer
         .value('enabled', app.enabled, true)
+        .text('unavailable_because', app.unavailable_because)
         .list('tags', app.tags)
         .text('icon', app.icon ?? DEFAULT_ICON, DEFAULT_ICON)
         .text('emoji', app.emoji, DEFAULT_EMOJI)