@datalayer/agent-runtimes 1.3.39 → 1.3.42

package/lib/loop/embed/AppEmbed.js

@@ -22,10 +22,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *   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
- * with the application's spec in its payload, so the runtime enforces its
- * rules there as it does inline.
+ * The three floating modes are `ChatFloating`'s chrome around the same
+ * `AppRenderer` (R-01): the application's preset per kind and its layout in
+ * the window, its agent created with its spec in its payload and spoken to
+ * at its session endpoint (R-04), so the runtime enforces its rules there as
+ * it does inline; the chrome told by the workspace what it is doing and
+ * what it last said, for the balloon and the blink.
  *
  * 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) — around the
@@ -34,14 +36,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @module loop/embed/AppEmbed
  */
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { registerPortalRoot } from '@primer/react';
-import { DatalayerThemeProvider, loopTheme } from '@datalayer/primer-addons';
+import { Text, registerPortalRoot } from '@primer/react';
 import { useIAMStore } from '@datalayer/core/lib/state/substates/IAMState';
+import { FluentEmoji } from '@datalayer/core/lib/components/emoji';
+import { DatalayerThemeProvider, loopTheme } from '@datalayer/primer-addons';
 import { ChatFloating } from '../../chat/ChatFloating';
-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 { AppRenderer } from '../apps/AppRenderer';
 import { AssistantCharactersPlugin, assistantCharacterFor, assistantCharactersFrom, } from '../plugins/assistant-characters';
 import { floatingViewOf } from './embedConfig';
 import { embedThemeOverrides, embedThemeStyles } from './embedTheme';
@@ -56,116 +56,43 @@ const NO_PLUGINS = [];
 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);
-    return blueprint?.value.createPayload ?? { name: app.id };
-}
-/**
- * The application's agent on the host's agent-runtimes server: created
- * there with the application's spec unless it is there already, as the
- * workspace's Local target does.
- */
-function useServerAgent(app, serverUrl) {
-    const [state, setState] = useState({
-        waiting: 'Starting…',
-    });
-    const source = JSON.stringify(app);
-    useEffect(() => {
-        let cancelled = false;
-        const base = serverUrl.replace(/\/+$/, '');
-        setState({ waiting: 'Starting…' });
-        ensureServerAgent(base, app.id, serverCreatePayload(app)).then(() => {
-            if (!cancelled) {
-                setState({
-                    protocol: {
-                        type: 'ag-ui',
-                        // Its session API: each thread a session (LOOP R-04).
-                        endpoint: `${base}/api/v1/apps/agents/${encodeURIComponent(app.id)}/ag-ui/`,
-                        agentId: app.id,
-                    },
-                });
-            }
-        }, (error) => {
-            if (!cancelled) {
-                setState({
-                    error: error instanceof Error ? error.message : String(error),
-                });
-            }
-        });
-        return () => {
-            cancelled = true;
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [serverUrl, source]);
-    return state;
+/** What a floating application says to a visitor Datalayer does not know. */
+export const signedOutSentence = (app) => `${app.name} runs on Datalayer, which needs you signed in. An application embedded for visitors who are not needs its embed token (LOOP D-14), or an agent-runtimes server of the host's own (the "server" attribute).`;
+/** The application's face, as the floating window's button and header draw it. */
+function Face({ emoji }) {
+    // In Fluent Emoji, at a line's size (T-19, T-20).
+    return _jsx(FluentEmoji, { emoji: emoji, size: 20, label: "" });
 }
 /**
- * The application's agent on a Datalayer runtime: allocated with a plain
- * agentspec, the agent created there with the application's spec — the
- * runtime `AppRenderer` launches inline (R-03, R-05).
+ * The bubble, the panel and the assistant: `ChatFloating`'s chrome in that
+ * mode — the button, its blink and its balloon, the panel at the edge, the
+ * character dragged about and sent away — holding the application as
+ * `AppRenderer` draws it inline (R-01): its kind's preset, its layout, its
+ * agent created with its spec and spoken to at its session endpoint (R-04).
+ * The workspace tells the chrome what the application is doing and what it
+ * last said (`onPresence`, `onSaying`).
  */
-function useDatalayerAgent(app, instance) {
-    const token = useIAMStore(state => state.token);
-    const source = JSON.stringify(app);
-    const agentConfig = useMemo(() => ({
-        name: app.id,
-        protocol: 'ag-ui',
-        agentSpecId: DATALAYER_BOOTSTRAP_AGENTSPEC,
-        createPayload: appDatalayerCreatePayload(app, instance),
-    }), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [source, instance?.appUid, instance?.deploymentUid, instance?.version]);
-    const { runtime, error } = useAgentRuntimes({
-        agentSpecId: DATALAYER_BOOTSTRAP_AGENTSPEC,
-        agentConfig,
-        variant: 'cloud-pydanticai',
-        // Only for a visitor Datalayer knows: a runtime is somebody's to pay for.
-        autoStart: Boolean(token),
-        autoCreateAgent: Boolean(token),
-    });
-    if (!token) {
-        return {
-            error: `${app.name} runs on Datalayer, which needs you signed in. An application embedded for visitors who are not needs its embed token (LOOP D-14), or an agent-runtimes server of the host's own (the "server" attribute).`,
-        };
-    }
-    if (error) {
-        return { error };
-    }
-    if (!runtime?.agentBaseUrl) {
-        return { waiting: 'Starting…' };
-    }
-    return {
-        protocol: {
-            type: 'ag-ui',
-            // Its session API: each thread a session (LOOP R-04).
-            endpoint: `${runtime.agentBaseUrl}/api/v1/apps/agents/${encodeURIComponent(app.id)}/ag-ui/`,
-            agentId: app.id,
-            authToken: token,
-        },
-    };
-}
-/** The application's face, as the floating chat's button and header draw it. */
-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, themeOverrides, character, agent, }) {
+function FloatingApp({ app, view, colorMode, themeOverrides, character, serverUrl, instance, }) {
+    const [presence, setPresence] = useState('idle');
+    const [said, setSaid] = useState({ answering: false });
     const welcome = app.interface.welcome || app.description;
-    return (_jsx(ChatFloating
-    // A new agent is a new conversation.
-    , { 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", 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 }) {
-    return (_jsx(FloatingChat, { ...props, agent: useServerAgent(props.app, serverUrl) }));
-}
-/** Floating, its agent on a Datalayer runtime. */
-function DatalayerFloating({ instance, ...props }) {
-    return (_jsx(FloatingChat, { ...props, agent: useDatalayerAgent(props.app, instance) }));
+    // A runtime is somebody's to pay for: on Datalayer, only for a visitor
+    // Datalayer knows — said, and nothing launched, for one it does not.
+    const token = useIAMStore(state => state.token);
+    const signedOut = !serverUrl && !token;
+    return (_jsx(ChatFloating, { defaultViewMode: view, ...(character ? { assistantCharacter: character } : {}), title: app.name, description: welcome, brandIcon: _jsx(Face, { emoji: app.emoji }), buttonIcon: _jsx(Face, { emoji: app.emoji }), buttonTooltip: `Talk to ${app.name}`, colorMode: colorMode, useStore: false, conversation: {
+            body: signedOut ? (_jsx(Text, { as: "p", role: "status", sx: { p: 3, m: 0, fontSize: 1 }, children: signedOutSentence(app) })) : (_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, in the embed's mode.
+                themeOverrides: themeOverrides, colorMode: colorMode, 
+                // The window draws its face, its name and close.
+                hideChatHeader: true, 
+                // Mounted closed: the caret goes in when the window opens.
+                autoFocusPrompt: false, onPresence: setPresence, onSaying: setSaid })),
+            presence,
+            saying: said.saying,
+            answering: said.answering,
+        } }));
 }
 /**
  * Overlays — menus, dialogs — drawn inside the embed's own root, under the
@@ -228,9 +155,10 @@ export function AppEmbed({ app, mode, accent, colorMode = 'auto', font, serverUr
     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, 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, 
+            : { height, display: 'flex', flexDirection: 'column' }, children: [ownPortal ? _jsx(OwnPortalRoot, {}) : null, view ? (_jsx(FloatingApp, { app: app, view: view, serverUrl: serverUrl, 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 }))] }));
+                // its conversation too, in the embed's mode: the host's or its
+                // visitor's system's, not a Datalayer setting.
+                themeOverrides: themeOverrides, colorMode: resolvedMode }))] }));
 }
 export default AppEmbed;

package/lib/loop/embed/LoopEmbed.js

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

package/lib/loop/index.d.ts

@@ -51,6 +51,8 @@ export { AgentA2uiPlugin, AGENT_A2UI_PLUGIN_NAME } from './plugins/agent-a2ui';
 export { AgentA2uiJupyterOutputPlugin, AGENT_A2UI_JUPYTER_OUTPUT_PLUGIN_NAME, } from './plugins/agent-a2ui-jupyter-output';
 export { defineA2uiScenePlugin, type A2uiSceneOptions, } from './plugins/a2ui-scene';
 export { APP_KIND_PATHS, APP_PAGE_PLUGIN_NAME, APP_PAGE_SURFACE, AppPage, appKindPaths, appPageAction, appPageData, defineAppPagePlugin, hasAppPage, surfaceUnshown, type AppKindPaths, type AppPageAction, type AppPageKind, type AppPagePath, } from './plugins/app-page';
+export { APP_RULES_PLUGIN_NAME, APP_RULES_WORDS, AppRulesCard, defineAppRulesPlugin, } from './plugins/app-rules';
+export { APP_ACTIVITY_PLUGIN_NAME, APP_ACTIVITY_WORDS, AppActivity, defineAppActivityPlugin, } from './plugins/app-activity';
 export { GraphViewPlugin, GRAPH_PLUGIN_NAME, GRAPH_VIEW_TYPE, } from './plugins/graph';
 export { PluginsPanelPlugin, PLUGINS_PANEL_PLUGIN_NAME, PluginsPanel, } from './plugins/plugins-panel';
 export { AGENTS_PLUGIN_NAME, AgentsPlugin, SandboxSelector, browserSource, createBrowserSandboxService, createServerSandboxService, createSwitchableSandboxService, suppliedSource, useOptionalSandboxService, useSandboxService, type AgentsConfig, type AgentsOutput, type SandboxExecution, type SandboxService, type SandboxTarget, type ServiceManagerSource, type SwitchableSandboxService, } from './plugins/agents';

package/lib/loop/index.js

@@ -64,6 +64,8 @@ export { AgentA2uiPlugin, AGENT_A2UI_PLUGIN_NAME } from './plugins/agent-a2ui';
 export { AgentA2uiJupyterOutputPlugin, AGENT_A2UI_JUPYTER_OUTPUT_PLUGIN_NAME, } from './plugins/agent-a2ui-jupyter-output';
 export { defineA2uiScenePlugin, } from './plugins/a2ui-scene';
 export { APP_KIND_PATHS, APP_PAGE_PLUGIN_NAME, APP_PAGE_SURFACE, AppPage, appKindPaths, appPageAction, appPageData, defineAppPagePlugin, hasAppPage, surfaceUnshown, } from './plugins/app-page';
+export { APP_RULES_PLUGIN_NAME, APP_RULES_WORDS, AppRulesCard, defineAppRulesPlugin, } from './plugins/app-rules';
+export { APP_ACTIVITY_PLUGIN_NAME, APP_ACTIVITY_WORDS, AppActivity, defineAppActivityPlugin, } from './plugins/app-activity';
 export { GraphViewPlugin, GRAPH_PLUGIN_NAME, GRAPH_VIEW_TYPE, } from './plugins/graph';
 export { PluginsPanelPlugin, PLUGINS_PANEL_PLUGIN_NAME, PluginsPanel, } from './plugins/plugins-panel';
 export { AGENTS_PLUGIN_NAME, AgentsPlugin, SandboxSelector, browserSource, createBrowserSandboxService, createServerSandboxService, createSwitchableSandboxService, suppliedSource, useOptionalSandboxService, useSandboxService, } from './plugins/agents';

package/lib/loop/plugins/app-activity/AppActivity.d.ts

@@ -0,0 +1,21 @@
+/**
+ * What an application did, beside its page (LOOP R-01b, R-15, U-20): its
+ * sessions, newest first, each in a sentence, opened on what it did step by
+ * step — tool calls, the rules' decisions, the checks that stopped a step,
+ * the approvals, the answer. Read from the record ai-agents keeps (R-07),
+ * again each time a turn of the conversation ends.
+ *
+ * @module loop/plugins/app-activity/AppActivity
+ */
+import type { JSX } from 'react';
+/** What the feed says. */
+export declare const APP_ACTIVITY_WORDS: {
+    readonly title: "Activity";
+    readonly unsaved: "Recorded once it is saved on Datalayer: each session there — its address, or its Preview on Datalayer — is listed here.";
+    readonly signedOut: "Its activity is its owner’s: sign in to Datalayer to read it.";
+    readonly none: "Nothing yet: a session on Datalayer — its address, or the Preview on Datalayer — is recorded here.";
+};
+export declare function AppActivity({ appUid }: {
+    appUid?: string;
+}): JSX.Element;
+export default AppActivity;

package/lib/loop/plugins/app-activity/AppActivity.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Heading, Label, RelativeTime, Spinner, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { signal } from '@datalayer/reactor';
+import { useContributions, useSignalValue } from '@datalayer/reactor/react';
+import { useCoreStore } from '@datalayer/core/lib/state';
+import { useIAMStore } from '@datalayer/core/lib/state/substates/IAMState';
+import { LoopChatTurn } from '../../core';
+import { RECORD_KIND_WORDS, listSessions, readSession, sessionSentence, } from '../../apps/records';
+/** What the feed says. */
+export const APP_ACTIVITY_WORDS = {
+    title: 'Activity',
+    unsaved: 'Recorded once it is saved on Datalayer: each session there — its address, or its Preview on Datalayer — is listed here.',
+    signedOut: 'Its activity is its owner’s: sign in to Datalayer to read it.',
+    none: 'Nothing yet: a session on Datalayer — its address, or the Preview on Datalayer — is recorded here.',
+};
+const NO_TURN = signal({ id: 0, status: 'idle' });
+/** Read `load` while `when`, again whenever `key` changes. */
+function useRead(load, key, when = true) {
+    const [state, setState] = useState({ loading: when });
+    useEffect(() => {
+        if (!when) {
+            return undefined;
+        }
+        let cancelled = false;
+        setState(previous => ({ ...previous, loading: true }));
+        load().then(value => !cancelled && setState({ value, loading: false }), (error) => !cancelled &&
+            setState({
+                error: error instanceof Error ? error.message : String(error),
+                loading: false,
+            }));
+        return () => {
+            cancelled = true;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [key, when]);
+    return state;
+}
+function Session({ context, session, }) {
+    const [open, setOpen] = useState(false);
+    const entries = useRead(() => readSession(context, session.sessionUid), `${session.sessionUid}:${context.token}`, open);
+    return (_jsxs(Box, { as: "details", onToggle: (event) => setOpen(event.currentTarget.open), sx: { borderTop: '1px solid', borderColor: 'border.muted', py: 2 }, children: [_jsxs(Box, { as: "summary", sx: { cursor: 'pointer', fontSize: 1 }, children: [session.createdAt ? (_jsx(RelativeTime, { datetime: session.createdAt })) : ('A session'), session.version ? ` · version ${session.version}` : '', entries.value ? ` · ${sessionSentence(entries.value)}` : ''] }), !open ? null : entries.loading ? (_jsx(Spinner, { size: "small" })) : entries.error ? (_jsx(Text, { role: "alert", sx: { fontSize: 1 }, children: entries.error })) : (_jsx(Box, { as: "ol", sx: { pl: 3, mt: 2, mb: 0, fontSize: 1 }, children: (entries.value ?? []).map(entry => (_jsxs(Box, { as: "li", sx: { mb: 1 }, children: [_jsx(Label, { sx: { mr: 2 }, children: RECORD_KIND_WORDS[entry.kind] ?? entry.kind }), entry.summary] }, entry.uid))) }))] }));
+}
+export function AppActivity({ appUid }) {
+    const token = useIAMStore(state => state.token) ?? '';
+    const aiAgentsUrl = useCoreStore((state) => state.configuration)?.aiAgentsUrl ?? '';
+    // Read again as each turn ends: what it just did is in the record then.
+    const turnEntries = useContributions(LoopChatTurn);
+    const turn = useSignalValue(turnEntries[0]?.value.turn ?? NO_TURN);
+    const settled = turn.status !== 'thinking' && turn.status !== 'streaming';
+    const [ended, setEnded] = useState(0);
+    useEffect(() => {
+        if (settled) {
+            setEnded(turn.id);
+        }
+    }, [settled, turn.id]);
+    const context = { aiAgentsUrl, token };
+    const readable = Boolean(appUid && token);
+    const sessions = useRead(() => listSessions(context, appUid ?? ''), `${appUid}:${token}:${aiAgentsUrl}:${ended}`, readable);
+    return (_jsxs(Box, { "data-testid": "app-activity", children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: APP_ACTIVITY_WORDS.title }), !appUid ? (_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', m: 0 }, children: APP_ACTIVITY_WORDS.unsaved })) : !token ? (_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', m: 0 }, children: APP_ACTIVITY_WORDS.signedOut })) : sessions.loading && !sessions.value ? (_jsx(Spinner, { size: "small" })) : sessions.error ? (_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', m: 0 }, children: sessions.error })) : (sessions.value ?? []).length === 0 ? (_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', m: 0 }, children: APP_ACTIVITY_WORDS.none })) : ((sessions.value ?? []).map(session => (_jsx(Session, { context: context, session: session }, session.uid))))] }));
+}
+export default AppActivity;

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

@@ -0,0 +1,11 @@
+import { type ReactorPlugin } from '@datalayer/reactor';
+import type { AppSpec } from '../../../types/agentspecs';
+export declare const APP_ACTIVITY_PLUGIN_NAME = "@datalayer/loop-plugin-app-activity";
+/**
+ * The plugin that lists what an application did: its record is kept under
+ * its `app` item (`appUid`); without one — an application not saved on
+ * Datalayer — the feed says it is recorded once it is.
+ */
+export declare function defineAppActivityPlugin(app: AppSpec, appUid?: string): ReactorPlugin<Record<string, never>, unknown, unknown>;
+export { AppActivity, APP_ACTIVITY_WORDS } from './AppActivity';
+export default defineAppActivityPlugin;

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { definePlugin } from '@datalayer/reactor';
+import { LoopSlots } from '../../core';
+import { AppActivity } from './AppActivity';
+export const APP_ACTIVITY_PLUGIN_NAME = '@datalayer/loop-plugin-app-activity';
+/**
+ * The plugin that lists what an application did: its record is kept under
+ * its `app` item (`appUid`); without one — an application not saved on
+ * Datalayer — the feed says it is recorded once it is.
+ */
+export function defineAppActivityPlugin(app, appUid) {
+    // One component per plugin: the slot keeps it, and the application with it.
+    function Feed() {
+        return _jsx(AppActivity, { appUid: appUid });
+    }
+    const plugin = definePlugin({
+        name: `${APP_ACTIVITY_PLUGIN_NAME}-${app.id}`,
+        displayName: `${app.name}: activity`,
+        description: `What ${app.name} did, session by session, from its record.`,
+        octicon: 'pulse',
+        build: () => ({
+            components: [
+                {
+                    id: 'app-activity',
+                    slot: LoopSlots.sidebar,
+                    order: 20,
+                    Component: Feed,
+                },
+            ],
+        }),
+    });
+    return plugin;
+}
+export { AppActivity, APP_ACTIVITY_WORDS } from './AppActivity';
+export default defineAppActivityPlugin;

package/lib/loop/plugins/app-rules/AppRulesCard.d.ts

@@ -0,0 +1,40 @@
+/**
+ * An application's rules, and the approvals it waits on, beside its page
+ * (LOOP R-01b, U-19).
+ *
+ * The rules in words — each action, what it covers, what it does about it —
+ * and, under them, what is waiting for the person's yes: the approvals its
+ * agent asked for, as the existing tool-approvals path carries them (the
+ * ai-agents `/ws` stream, the Tool Approvals page's), answered here with
+ * *Approve* or *Reject* over the same socket.
+ *
+ * @module loop/plugins/app-rules/AppRulesCard
+ */
+import type { JSX } from 'react';
+import type { AppRuleSpec, AppSpec } from '../../../types/agentspecs';
+import { type ApprovalRecord } from '../../../hooks/useToolApprovals';
+/** What the card says. */
+export declare const APP_RULES_WORDS: {
+    readonly title: "Rules and approvals";
+    readonly byDefault: "With no rule of its own: reading is done, anything else waits for you.";
+    readonly none: "It has no rule of its own.";
+    readonly waiting: "Waiting for you";
+    readonly nothingWaiting: "Nothing is waiting for your yes.";
+    readonly signedOut: "Its approvals reach you here once you are signed in to Datalayer.";
+    readonly offline: "Approvals are not connected yet: what you approve or reject is not sent until they are.";
+    readonly approve: "Approve";
+    readonly reject: "Reject";
+};
+/** One rule, in words: its action, what it covers, and what it does about it. */
+export declare function ruleInWords(rule: AppRuleSpec): {
+    action: string;
+    covers: string;
+    says: string;
+    means: string;
+};
+/** The rule an approval was asked under, as the runtime wrote it in its arguments. */
+export declare const ruleOfApproval: (approval: ApprovalRecord) => string;
+export declare function AppRulesCard({ app }: {
+    app: AppSpec;
+}): JSX.Element;
+export default AppRulesCard;

package/lib/loop/plugins/app-rules/AppRulesCard.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Button, Heading, Label, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { useIAMStore } from '@datalayer/core/lib/state/substates/IAMState';
+import { BEHAVIOUR_WORDS, coverOf } from '../../apps/rules';
+import { useApproveToolRequest, useRejectToolRequest, useToolApprovalsQuery, } from '../../../hooks/useToolApprovals';
+/** What the card says. */
+export const APP_RULES_WORDS = {
+    title: 'Rules and approvals',
+    byDefault: 'With no rule of its own: reading is done, anything else waits for you.',
+    none: 'It has no rule of its own.',
+    waiting: 'Waiting for you',
+    nothingWaiting: 'Nothing is waiting for your yes.',
+    signedOut: 'Its approvals reach you here once you are signed in to Datalayer.',
+    offline: 'Approvals are not connected yet: what you approve or reject is not sent until they are.',
+    approve: 'Approve',
+    reject: 'Reject',
+};
+/** One rule, in words: its action, what it covers, and what it does about it. */
+export function ruleInWords(rule) {
+    const words = BEHAVIOUR_WORDS[rule.behaviour];
+    return {
+        action: rule.action,
+        covers: rule.appliesTo.map(coverOf).join(', '),
+        says: words.says,
+        means: words.means,
+    };
+}
+/** The rule an approval was asked under, as the runtime wrote it in its arguments. */
+export const ruleOfApproval = (approval) => typeof approval.tool_args?._rule === 'string' ? approval.tool_args._rule : '';
+function Approvals({ app }) {
+    // Its agent is created under the application's id: what it asks is under it.
+    const filters = useMemo(() => ({ agentId: app.id, status: 'pending' }), [app.id]);
+    const query = useToolApprovalsQuery(filters);
+    const approve = useApproveToolRequest();
+    const reject = useRejectToolRequest();
+    const waiting = query.data?.approvals ?? [];
+    return (_jsxs(Box, { "data-testid": "app-approvals", children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mt: 3, mb: 1 }, children: APP_RULES_WORDS.waiting }), approve.connectionState !== 'connected' ? (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', m: 0, mb: 1 }, children: APP_RULES_WORDS.offline })) : null, waiting.length === 0 ? (_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', m: 0 }, children: APP_RULES_WORDS.nothingWaiting })) : (_jsx(Box, { as: "ul", sx: { listStyle: 'none', p: 0, m: 0 }, children: waiting.map(approval => (_jsxs(Box, { as: "li", sx: {
+                        py: 2,
+                        borderTop: '1px solid',
+                        borderColor: 'border.muted',
+                        fontSize: 1,
+                    }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: approval.tool_name }), ruleOfApproval(approval) ? (_jsx(Text, { as: "p", sx: { m: 0, color: 'fg.muted', fontSize: 0 }, children: ruleOfApproval(approval) })) : null, _jsxs(Box, { sx: { display: 'flex', gap: 2, mt: 1 }, children: [_jsx(Button, { size: "small", variant: "primary", disabled: approve.isPending, onClick: () => approve.mutate({ id: approval.id }), children: APP_RULES_WORDS.approve }), _jsx(Button, { size: "small", disabled: reject.isPending, onClick: () => reject.mutate({ id: approval.id }), children: APP_RULES_WORDS.reject })] })] }, approval.id))) }))] }));
+}
+export function AppRulesCard({ app }) {
+    const signedIn = Boolean(useIAMStore(state => state.token));
+    return (_jsxs(Box, { "data-testid": "app-rules", sx: { mb: 4 }, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: APP_RULES_WORDS.title }), app.rules.length === 0 ? (_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', m: 0 }, children: APP_RULES_WORDS.none })) : (_jsx(Box, { as: "ul", sx: { listStyle: 'none', p: 0, m: 0 }, children: app.rules.map(ruleInWords).map((rule, index) => (_jsxs(Box, { as: "li", sx: { py: 1, fontSize: 1 }, children: [_jsx(Text, { children: rule.action }), ' ', _jsx(Label, { title: rule.means, children: rule.says }), _jsx(Text, { as: "p", sx: { m: 0, color: 'fg.muted', fontSize: 0 }, children: rule.covers })] }, index))) })), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 1, mb: 0 }, children: APP_RULES_WORDS.byDefault }), signedIn ? (_jsx(Approvals, { app: app })) : (_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', mt: 3, mb: 0 }, children: APP_RULES_WORDS.signedOut }))] }));
+}
+export default AppRulesCard;

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

@@ -0,0 +1,7 @@
+import { type ReactorPlugin } from '@datalayer/reactor';
+import type { AppSpec } from '../../../types/agentspecs';
+export declare const APP_RULES_PLUGIN_NAME = "@datalayer/loop-plugin-app-rules";
+/** The plugin that lists an application's rules and the approvals waiting for the person. */
+export declare function defineAppRulesPlugin(app: AppSpec): ReactorPlugin<Record<string, never>, unknown, unknown>;
+export { AppRulesCard, APP_RULES_WORDS, ruleInWords, ruleOfApproval, } from './AppRulesCard';
+export default defineAppRulesPlugin;

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { definePlugin } from '@datalayer/reactor';
+import { LoopSlots } from '../../core';
+import { AppRulesCard } from './AppRulesCard';
+export const APP_RULES_PLUGIN_NAME = '@datalayer/loop-plugin-app-rules';
+/** The plugin that lists an application's rules and the approvals waiting for the person. */
+export function defineAppRulesPlugin(app) {
+    // One component per plugin: the slot keeps it, and the application with it.
+    function Card() {
+        return _jsx(AppRulesCard, { app: app });
+    }
+    const plugin = definePlugin({
+        name: `${APP_RULES_PLUGIN_NAME}-${app.id}`,
+        displayName: `${app.name}: rules and approvals`,
+        description: `When ${app.name} acts alone, when it asks, and what waits for your yes.`,
+        octicon: 'shield-check',
+        build: () => ({
+            components: [
+                {
+                    id: 'app-rules',
+                    slot: LoopSlots.sidebar,
+                    order: 10,
+                    Component: Card,
+                },
+            ],
+        }),
+    });
+    return plugin;
+}
+export { AppRulesCard, APP_RULES_WORDS, ruleInWords, ruleOfApproval, } from './AppRulesCard';
+export default defineAppRulesPlugin;

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

@@ -43,8 +43,9 @@ import { messageText, turnWritersOf } from './turnState';
 import { isInactiveSurfaceContribution, orderToolContributions, toolsForChatView, } from './chatViewTools';
 import { useAgentCommandTools } from '../../../tools/adapters/commands';
 import { NONE_EDITOR, seedEditorChoice, setEditorOptions, } from '../shell/editorChoice';
-import { PresenceFace, PresenceLine } from '../../../chat/presence/Presence';
+import { FaceDrawing, PresenceFace, PresenceLine, } from '../../../chat/presence/Presence';
 import { presenceState, presenceToolOf, } from '../../../chat/presence/presenceStatus';
+import { latestSaying, newestIsAnswer, } from '../../../chat/assistant/state';
 /** No editor: the conversation on its own. */
 const NO_SURFACE = '';
 /**
@@ -203,6 +204,14 @@ export default function ChatView({ workspace }) {
     useEffect(() => {
         onPresence?.(presenceNow);
     }, [onPresence, presenceNow]);
+    // What it last said, for a host that says it outside the conversation —
+    // the embed's floating chrome (LOOP R-01): its balloon and its blink.
+    // Through a ref: the handler below is made once.
+    const onSayingRef = useRef(config?.presence?.onSaying);
+    onSayingRef.current = config?.presence?.onSaying;
+    const saidRef = useRef({
+        answering: false,
+    });
     const handleSendReady = useCallback((controls) => {
         controlsRef.current = controls;
         setSendReady(!!controls);
@@ -221,6 +230,17 @@ export default function ChatView({ workspace }) {
         setPresenceTool(previous => previous.open === open && previous.pendingApproval === pendingApproval
             ? previous
             : { open, pendingApproval });
+        const said = {
+            saying: latestSaying(items),
+            answering: newestIsAnswer(items),
+        };
+        const before = saidRef.current;
+        if (before.saying?.id !== said.saying?.id ||
+            before.saying?.text !== said.saying?.text ||
+            before.answering !== said.answering) {
+            saidRef.current = said;
+            onSayingRef.current?.(said);
+        }
         const feed = turnFeedRef.current;
         if (!feed) {
             return;
@@ -1100,6 +1120,12 @@ export default function ChatView({ workspace }) {
         // a new identity would resend the last suggestion.
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [suggestion]);
+    /*
+     * An application's session checks who is calling (LOOP R-32, R-04): its
+     * chat says so with the person's token. The embed hands its own.
+     */
+    const runsApp = Boolean(blueprintTurn?.createPayload?.app_spec);
+    const iamToken = useIAMStore(state => state.token);
     const protocol = useMemo(() => inPage
         ? browserProtocolConfig({
             agentId: member?.specId ?? agentId,
@@ -1132,9 +1158,10 @@ export default function ChatView({ workspace }) {
             // (LOOP R-04): each thread a session, recorded under its uid,
             // run in the name the application runs in, and taking what the
             // page did besides the message — the same AG-UI events back.
-            endpoint: blueprintTurn?.createPayload?.app_spec
+            endpoint: runsApp
                 ? `${agentServerUrl}/api/v1/apps/agents/${encodeURIComponent(agentId)}/ag-ui/`
                 : `${agentServerUrl}/api/v1/ag-ui/${agentId}/`,
+            ...(runsApp && iamToken ? { authToken: iamToken } : {}),
             agentId,
             // `/api/v1/configure`, not `/api/v1/configure/config`: the hooks
             // strip one trailing `config`/`configure` segment to find the API
@@ -1152,6 +1179,8 @@ export default function ChatView({ workspace }) {
         blueprintTurn,
         activeModel,
         agentServerUrl,
+        runsApp,
+        iamToken,
     ]);
     /*
      * The model catalogue, and the builtin tools and skills the agent reports.
@@ -1475,7 +1504,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, themeOverrides: config?.themeOverrides, 
+                        themeVariant: config?.themeVariant, themeOverrides: config?.themeOverrides, colorMode: config?.colorMode, 
                         // 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.
@@ -1516,7 +1545,7 @@ export default function ChatView({ workspace }) {
                         headerContent: presence ? _jsx(PresenceLine, { state: presenceNow }) : undefined, emptyState: {
                             // 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 })),
+                            icon: presence?.face ? (_jsx("span", { "aria-hidden": true, style: { fontSize: FACE_LARGE, lineHeight: 1 }, children: _jsx(FaceDrawing, { face: presence.face, size: FACE_LARGE }) })) : (_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