@datalayer/agent-runtimes 1.3.40 → 1.3.42

package/lib/chat/ChatFloating.d.ts

@@ -8,13 +8,36 @@
  * 1. AG-UI mode: When `endpoint` is provided
  * 2. Store mode: When `useStore` is true
  * 3. Any protocol supported by ChatBase (AG-UI, A2A, ACP, Vercel AI)
+ * 4. A conversation its host draws (`conversation`): the LOOP workspace,
+ *    which the embed's bubble, panel and assistant hold (LOOP R-01) — the
+ *    floating chrome around it, told by the host what it is doing and what
+ *    it last said
  *
  * @module chat/ChatFloating
  */
 import React from 'react';
 import { type AssistantCharacter } from './assistant/characters';
 import type { AssistantCharacterData } from './assistant/formats/types';
+import { type AssistantSaying } from './assistant/state';
+import { type PresenceState } from './presence/presenceStatus';
 import type { ChatCommonProps, ChatViewMode, ThemeOverrides } from '../types';
+/**
+ * A conversation the host draws in the floating window, in place of the
+ * chat: the LOOP workspace (LOOP R-01). The window keeps its chrome — the
+ * button, its blink and its balloon, the panel, the assistant, dragging and
+ * dismissing — and is told by the host what the conversation is doing and
+ * what it last said, which it would otherwise read from its own chat.
+ */
+export type FloatingConversation = {
+    /** What the window holds, under its header (the face, the title, close). */
+    body: React.ReactNode;
+    /** What it is doing: idle, thinking, working, waiting for the person. */
+    presence: PresenceState;
+    /** Its newest words, said in the balloon until heard. */
+    saying?: AssistantSaying;
+    /** Whether its newest item is the answer being written. */
+    answering: boolean;
+};
 /**
  * ChatFloating props — extends ChatCommonProps with floating/popup-specific configuration.
  */
@@ -110,10 +133,16 @@ export interface ChatFloatingProps extends ChatCommonProps {
      * @default false
      */
     showPanelBackdrop?: boolean;
+    /**
+     * A conversation the host draws in the window instead of the chat — the
+     * LOOP workspace, as the embed's floating modes do (LOOP R-01). The chat's
+     * own props (`protocol`, `suggestions`, …) are then not read.
+     */
+    conversation?: FloatingConversation;
 }
 /**
  * ChatFloating component
  * A floating chat window built on ChatBase
  */
-export declare function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode, title, description, position, defaultOpen, width, height, showHeader, showButton, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, promptVariant, mentionableAgents, poweredByProps, clickOutsideToClose, escapeToClose, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip, brandColor, buttonGlow, offset, animationDuration, renderToolResult, frontendTools, initialState: _initialState, suggestions, submitOnSuggestionClick, hideMessagesAfterToolUI, defaultViewMode, onViewModeChange, sidebarMountPoint, showPanelBackdrop, availableModels, showModelSelector, showToolsMenu, showSkillsMenu, showTokenUsage, showContextRing, themeVariant, themeOverrides, colorMode, runtimeId, historyEndpoint, authToken, historyAuthToken, pendingPrompt, showInformation, onInformationClick, onToolCallStart, onToolCallComplete, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, panelProps, launching, launchingMessage, assistantCharacter, }: ChatFloatingProps): React.JSX.Element;
+export declare function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode, title, description, position, defaultOpen, width, height, showHeader, showButton, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, promptVariant, mentionableAgents, poweredByProps, clickOutsideToClose, escapeToClose, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip, brandColor, buttonGlow, offset, animationDuration, renderToolResult, frontendTools, initialState: _initialState, suggestions, submitOnSuggestionClick, hideMessagesAfterToolUI, defaultViewMode, onViewModeChange, sidebarMountPoint, showPanelBackdrop, availableModels, showModelSelector, showToolsMenu, showSkillsMenu, showTokenUsage, showContextRing, themeVariant, themeOverrides, colorMode, runtimeId, historyEndpoint, authToken, historyAuthToken, pendingPrompt, showInformation, onInformationClick, onToolCallStart, onToolCallComplete, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, panelProps, launching, launchingMessage, assistantCharacter, conversation, }: ChatFloatingProps): React.JSX.Element;
 export default ChatFloating;

package/lib/chat/ChatFloating.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /*
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
@@ -13,6 +13,10 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * 1. AG-UI mode: When `endpoint` is provided
  * 2. Store mode: When `useStore` is true
  * 3. Any protocol supported by ChatBase (AG-UI, A2A, ACP, Vercel AI)
+ * 4. A conversation its host draws (`conversation`): the LOOP workspace,
+ *    which the embed's bubble, panel and assistant hold (LOOP R-01) — the
+ *    floating chrome around it, told by the host what it is doing and what
+ *    it last said
  *
  * @module chat/ChatFloating
  */
@@ -59,7 +63,7 @@ const clamp = (value, max) => Math.max(8, Math.min(value, Math.max(8, max)));
  * ChatFloating component
  * A floating chat window built on ChatBase
  */
-export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode = true, title = 'Chat', description = 'Start a conversation with the AI agent.', position = 'bottom-right', defaultOpen = false, width = 400, height = 550, showHeader = true, showButton = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = '/', showPoweredBy = true, promptVariant, mentionableAgents, poweredByProps, clickOutsideToClose = false, escapeToClose = true, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip = 'Chat with AI', brandColor, buttonGlow = true, offset = 20, animationDuration = 200, renderToolResult, frontendTools, initialState: _initialState, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, defaultViewMode = 'floating', onViewModeChange, sidebarMountPoint = null, showPanelBackdrop = false, availableModels, showModelSelector = false, showToolsMenu = false, showSkillsMenu = false, showTokenUsage = true, showContextRing = false, themeVariant, themeOverrides, colorMode, runtimeId, historyEndpoint, authToken, historyAuthToken, pendingPrompt, showInformation = false, onInformationClick, onToolCallStart, onToolCallComplete, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, panelProps, launching = false, launchingMessage, assistantCharacter = DEFAULT_ASSISTANT_CHARACTER, }) {
+export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode = true, title = 'Chat', description = 'Start a conversation with the AI agent.', position = 'bottom-right', defaultOpen = false, width = 400, height = 550, showHeader = true, showButton = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = '/', showPoweredBy = true, promptVariant, mentionableAgents, poweredByProps, clickOutsideToClose = false, escapeToClose = true, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip = 'Chat with AI', brandColor, buttonGlow = true, offset = 20, animationDuration = 200, renderToolResult, frontendTools, initialState: _initialState, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, defaultViewMode = 'floating', onViewModeChange, sidebarMountPoint = null, showPanelBackdrop = false, availableModels, showModelSelector = false, showToolsMenu = false, showSkillsMenu = false, showTokenUsage = true, showContextRing = false, themeVariant, themeOverrides, colorMode, runtimeId, historyEndpoint, authToken, historyAuthToken, pendingPrompt, showInformation = false, onInformationClick, onToolCallStart, onToolCallComplete, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, panelProps, launching = false, launchingMessage, assistantCharacter = DEFAULT_ASSISTANT_CHARACTER, conversation, }) {
     // Store-based state
     const storeIsOpen = useChatOpen();
     const storeMessages = useChatMessages();
@@ -121,7 +125,7 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
         open: false,
         pendingApproval: false,
     });
-    const [answering, setAnswering] = useState(false);
+    const [ownAnswering, setAnswering] = useState(false);
     const [arriving, setArriving] = useState(false);
     const [leaving, setLeaving] = useState(false);
     const [assistantAway, setAssistantAway] = useState(keptAway);
@@ -130,8 +134,13 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
         keepAway('none');
         setAssistantAway('none');
     }, []);
-    /* The agent's newest words, said in the balloon until heard (T-23). */
-    const [saying, setSaying] = useState();
+    /*
+     * The agent's newest words, said in the balloon until heard (T-23): the
+     * chat's own, or what the host's conversation says it said.
+     */
+    const [ownSaying, setSaying] = useState();
+    const saying = conversation ? conversation.saying : ownSaying;
+    const answering = conversation ? conversation.answering : ownAnswering;
     const [heardId, setHeardId] = useState();
     const [freshSaying, setFreshSaying] = useState(false);
     useEffect(() => {
@@ -146,7 +155,7 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
         if (isOpen && saying) {
             setHeardId(saying.id);
         }
-    }, [isOpen, saying]);
+    }, [isOpen, saying?.id]);
     const stageRef = useRef(null);
     const stageDrag = useViewportDrag(stageRef, { whole: true });
     useEffect(() => {
@@ -157,7 +166,7 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
         const timer = setTimeout(() => setArriving(false), 1800);
         return () => clearTimeout(timer);
     }, [assistantShown]);
-    const assistantState = assistantStateOf(presenceState(chatBusy, chatTool), {
+    const assistantState = assistantStateOf(conversation ? conversation.presence : presenceState(chatBusy, chatTool), {
         arriving,
         leaving,
         speaking: answering,
@@ -271,11 +280,16 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
         const measure = () => {
             const rect = host.getBoundingClientRect();
             setPanelHostRect(prev => {
-                const next = {
-                    top: rect.top,
-                    height: rect.height,
-                    right: Math.max(0, window.innerWidth - rect.right),
-                };
+                // A host that holds nothing of the page — an embed's own element,
+                // everything in it fixed to the viewport — has no height to align
+                // to: the panel is then the viewport's right edge, at full height.
+                const next = rect.height < 1
+                    ? { top: 0, height: window.innerHeight, right: 0 }
+                    : {
+                        top: rect.top,
+                        height: rect.height,
+                        right: Math.max(0, window.innerWidth - rect.right),
+                    };
                 if (prev &&
                     Math.abs(prev.top - next.top) < 1 &&
                     Math.abs(prev.height - next.height) < 1 &&
@@ -459,6 +473,22 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
         document.addEventListener('keydown', handleKeyDown);
         return () => document.removeEventListener('keydown', handleKeyDown);
     }, [escapeToClose, isOpen, handleToggle]);
+    /*
+     * A host's conversation takes the caret when the window opens, as the
+     * chat's own does (`autoFocus`): its composer, once the window shows.
+     */
+    const hostsConversation = Boolean(conversation);
+    useEffect(() => {
+        if (!hostsConversation || !isOpen) {
+            return undefined;
+        }
+        const timer = setTimeout(() => {
+            popupRef.current
+                ?.querySelector('[data-chat-composer] textarea, [data-chat-composer] [contenteditable="true"], textarea')
+                ?.focus();
+        }, animationDuration);
+        return () => clearTimeout(timer);
+    }, [hostsConversation, isOpen, animationDuration, focusTrigger]);
     // Click outside to close
     useEffect(() => {
         if (!clickOutsideToClose || !isOpen)
@@ -698,7 +728,23 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
                     borderColor: 'border.muted',
                     touchAction: 'none',
                     '&:active': { cursor: 'grabbing' },
-                }, children: _jsx(GrabberIcon, { size: 16 }) })), _jsx(ChatBase, { title: title, showHeader: showHeader, useStore: useStoreMode, protocol: protocol, themeVariant: themeVariant, themeOverrides: themeOverrides, colorMode: colorMode, autoFocus: isOpen, focusTrigger: focusTrigger, launching: launching, launchingMessage: launchingMessage, brandIcon: brandIcon || _jsx(AiAgentIcon, { colored: true, size: 20 }), headerButtons: {
+                }, children: _jsx(GrabberIcon, { size: 16 }) })), conversation ? (_jsxs(_Fragment, { children: [showHeader ? (_jsxs(Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 2,
+                            flexShrink: 0,
+                            px: 3,
+                            py: 2,
+                            borderBottom: '1px solid',
+                            borderColor: 'border.default',
+                        }, children: [brandIcon || _jsx(AiAgentIcon, { colored: true, size: 20 }), _jsx(Text, { sx: {
+                                    flex: 1,
+                                    minWidth: 0,
+                                    fontWeight: 'semibold',
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap',
+                                }, children: title }), closeButton] })) : null, _jsx(Box, { "data-floating-conversation": true, sx: { flex: '1 1 auto', minHeight: 0, display: 'flex' }, children: conversation.body })] })) : (_jsx(ChatBase, { title: title, showHeader: showHeader, useStore: useStoreMode, protocol: protocol, themeVariant: themeVariant, themeOverrides: themeOverrides, colorMode: colorMode, autoFocus: isOpen, focusTrigger: focusTrigger, launching: launching, launchingMessage: launchingMessage, brandIcon: brandIcon || _jsx(AiAgentIcon, { colored: true, size: 20 }), headerButtons: {
                     showNewChat: showNewChatButton,
                     showClear: showClearButton && messages.length > 0,
                     showSettings: showSettingsButton && !!onSettingsClick,
@@ -714,7 +760,7 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
                     ...poweredByProps,
                 }, renderToolResult: renderToolResult, description: description, onStateUpdate: onStateUpdate, onNewChat: onNewChat, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, hideMessagesAfterToolUI: hideMessagesAfterToolUI, avatarConfig: {
                     showAvatars: true,
-                }, placeholder: "Type a message...", backgroundColor: "canvas.subtle", frontendTools: frontendTools, showModelSelector: showModelSelector, availableModels: availableModels, showToolsMenu: showToolsMenu, showSkillsMenu: showSkillsMenu, showTokenUsage: showTokenUsage, showContextRing: showContextRing, runtimeId: runtimeId, historyEndpoint: historyEndpoint, historyAuthToken: historyAuthToken, pendingPrompt: pendingPrompt, showInformation: showInformation, onInformationClick: onInformationClick, onToolCallStart: onToolCallStart, onToolCallComplete: onToolCallComplete, showToolApprovalBanner: showToolApprovalBanner, pendingApprovals: pendingApprovals, onApproveApproval: onApproveApproval, onRejectApproval: onRejectApproval, ...panelProps, onLoadingChange: handleLoadingChange, onDisplayItemsChange: handleDisplayItemsChange, children: children })] }));
+                }, placeholder: "Type a message...", backgroundColor: "canvas.subtle", frontendTools: frontendTools, showModelSelector: showModelSelector, availableModels: availableModels, showToolsMenu: showToolsMenu, showSkillsMenu: showSkillsMenu, showTokenUsage: showTokenUsage, showContextRing: showContextRing, runtimeId: runtimeId, historyEndpoint: historyEndpoint, historyAuthToken: historyAuthToken, pendingPrompt: pendingPrompt, showInformation: showInformation, onInformationClick: onInformationClick, onToolCallStart: onToolCallStart, onToolCallComplete: onToolCallComplete, showToolApprovalBanner: showToolApprovalBanner, pendingApprovals: pendingApprovals, onApproveApproval: onApproveApproval, onRejectApproval: onRejectApproval, ...panelProps, onLoadingChange: handleLoadingChange, onDisplayItemsChange: handleDisplayItemsChange, children: children }))] }));
     /*
      * The floating popup's button. Words not yet heard make it blink for the
      * person's attention, until the chat is opened; hovered, they show in a

package/lib/chat/presence/Presence.d.ts

@@ -9,6 +9,15 @@
  */
 import type { ReactNode } from 'react';
 import { type PresenceState } from './presenceStatus';
+/**
+ * A face at `size`: an emoji drawn in Fluent Emoji, the same on every
+ * platform (LOOP T-20) — the system's, as text, only for one Datalayer ships
+ * no drawing of — or a host's own drawing, left as it is.
+ */
+export declare function FaceDrawing({ face, size }: {
+    face: ReactNode;
+    size: number;
+}): import("react").JSX.Element;
 export declare function PresenceFace({ face, size, state, }: {
     /**
      * The face: an emoji, drawn at `size`, or a host's own drawing of it — an

package/lib/chat/presence/Presence.js

@@ -1,7 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from '@primer/react';
+import { FluentEmoji } from '@datalayer/core/lib/components/emoji';
 import { PRESENCE_LINES } from './presenceStatus';
 const ACCENT = 'var(--loop-accent, var(--fgColor-accent))';
+/**
+ * A face at `size`: an emoji drawn in Fluent Emoji, the same on every
+ * platform (LOOP T-20) — the system's, as text, only for one Datalayer ships
+ * no drawing of — or a host's own drawing, left as it is.
+ */
+export function FaceDrawing({ face, size }) {
+    return typeof face === 'string' ? (_jsx(FluentEmoji, { emoji: face, size: size, label: "" })) : (_jsx(_Fragment, { children: face }));
+}
 export function PresenceFace({ face, size, state, }) {
     const active = state === 'thinking' || state === 'working';
     return (_jsxs(Box, { as: "span", "aria-hidden": true, "data-presence": state, sx: {
@@ -31,7 +40,7 @@ export function PresenceFace({ face, size, state, }) {
                     '@media (prefers-reduced-motion: reduce)': {
                         animation: 'none',
                     },
-                } }), face] }));
+                } }), _jsx(FaceDrawing, { face: face, size: size })] }));
 }
 export function PresenceLine({ state }) {
     return (_jsx(Text, { role: "status", "aria-live": "polite", "data-presence-line": state, sx: {

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

@@ -27,7 +27,11 @@
  *   page its host draws (`page`, R-02) — the Studio's run page, at its
  *   address and embedded;
  * - its **frame**, when the host asks (`frame`): the `window-frame` plugin's
- *   window, its title the application's face and name.
+ *   window, its title the application's face and name;
+ * - its **sidebar**, when the host asks (`sidebar`, R-01b): its rules and
+ *   the approvals waiting for the person (`app-rules`), and what it did
+ *   (`app-activity`), beside its page — what its builder reads in the
+ *   Studio's Preview.
  *
  * Which plugins a kind needs, and how its workspace is laid out, is one
  * function: `appPreset`, the preset per kind, as `loopPlugins` is for the
@@ -42,6 +46,7 @@ import type { ThemeOverrides } from '../../types/chat';
 import { type AppHostPageProps } from '../plugins/app-page';
 import { type LoopEmbedProps } from '../embed/LoopEmbed';
 import type { LoopPresetOptions } from '../presets';
+import type { ChatSaid } from '../plugins/chat';
 import type { PresenceState } from '../../chat/presence/presenceStatus';
 /** The id of an agent or a Cog, without its version. */
 export declare const agentIdOf: (app: Pick<AppSpec, "agent" | "team">) => string;
@@ -78,6 +83,20 @@ export type AppRendererProps = Omit<LoopEmbedProps, 'agentId'> & {
      * stable function, such as a state setter.
      */
     onPresence?: (state: PresenceState) => void;
+    /**
+     * Told what the application last said, and whether its newest words are
+     * an answer — for a host that says them outside the conversation: the
+     * embed's floating chrome, its balloon and its blink (R-01). A stable
+     * function, such as a state setter.
+     */
+    onSaying?: (said: ChatSaid) => void;
+    /**
+     * Draw its rules and the approvals waiting for the person, and its
+     * activity, beside its page (R-01b): what its builder reads in the
+     * Studio's Preview. The activity is read from its record, kept under
+     * `instance.appUid`.
+     */
+    sidebar?: 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.
@@ -127,8 +146,9 @@ 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); laid out
- *   as `interface.layout` says;
+ *   comment on each answer when its record keeps feedback (V-18); with
+ *   `sidebar`, its rules and approvals card and its activity feed (R-01b);
+ *   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).
  *
@@ -138,14 +158,18 @@ export type AppPreset = {
 export declare function appPreset(app: AppSpec, options?: {
     page?: ComponentType<AppHostPageProps>;
     pluginsOff?: readonly string[];
+    /** Its rules and approvals, and its activity, beside its page. */
+    sidebar?: boolean;
+    /** What its record is kept under: its activity's. */
+    appUid?: string;
 }): AppPreset;
 /**
  * What an application's agent is created with on a Datalayer runtime: under
  * the application's id, over AG-UI, with the application's own document —
  * so that the runtime registers it and decides every tool call by its rules
  * (LOOP R-03, R-05), as `loop apps run --cloud` does. One payload for every
- * place it runs: the workspace (`AppRenderer`) and the embed's floating
- * modes (`AppEmbed`).
+ * place it runs, all of them the workspace (`AppRenderer`): the Studio's
+ * Preview, the hosted page, and the embed inline and floating.
  */
 export declare function appDatalayerCreatePayload(app: AppSpec, instance?: AppInstance): Record<string, unknown>;
 /**
@@ -164,5 +188,5 @@ export declare const DATALAYER_BOOTSTRAP_AGENTSPEC = "example-simple";
  * 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, page, pluginsOff, ...embed }: AppRendererProps): React.JSX.Element;
+export declare function AppRenderer({ app, plugins, instance, onPresence, onSaying, sidebar, frame, page, pluginsOff, ...embed }: AppRendererProps): React.JSX.Element;
 export default AppRenderer;

package/lib/loop/apps/AppRenderer.js

@@ -32,7 +32,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *   page its host draws (`page`, R-02) — the Studio's run page, at its
  *   address and embedded;
  * - its **frame**, when the host asks (`frame`): the `window-frame` plugin's
- *   window, its title the application's face and name.
+ *   window, its title the application's face and name;
+ * - its **sidebar**, when the host asks (`sidebar`, R-01b): its rules and
+ *   the approvals waiting for the person (`app-rules`), and what it did
+ *   (`app-activity`), beside its page — what its builder reads in the
+ *   Studio's Preview.
  *
  * Which plugins a kind needs, and how its workspace is laid out, is one
  * function: `appPreset`, the preset per kind, as `loopPlugins` is for the
@@ -47,6 +51,8 @@ import { APP_PAGE_SURFACE, defineAppHostPagePlugin, defineAppPagePlugin, hasAppP
 import { CANVAS_BLOCK_PLUGINS, canvasBlocksPluginName, } from '../plugins/canvas-blocks';
 import { LoopEmbed } from '../embed/LoopEmbed';
 import { dumpAppspec } from './appspec';
+import { defineAppActivityPlugin } from '../plugins/app-activity';
+import { defineAppRulesPlugin } from '../plugins/app-rules';
 import { defineAppFeedbackPlugin } from './AppFeedback';
 import { keepsFeedback } from './feedback';
 /** The id of an agent or a Cog, without its version. */
@@ -134,8 +140,9 @@ 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); laid out
- *   as `interface.layout` says;
+ *   comment on each answer when its record keeps feedback (V-18); with
+ *   `sidebar`, its rules and approvals card and its activity feed (R-01b);
+ *   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).
  *
@@ -167,6 +174,14 @@ export function appPreset(app, options = {}) {
             // 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)] : []),
+            // What its builder reads beside its page (R-01b): its rules and the
+            // approvals waiting, and what it did.
+            ...(options.sidebar
+                ? [
+                    defineAppRulesPlugin(app),
+                    defineAppActivityPlugin(app, options.appUid),
+                ]
+                : []),
         ],
         workspace: appLayoutOptions(app),
     };
@@ -176,8 +191,8 @@ export function appPreset(app, options = {}) {
  * the application's id, over AG-UI, with the application's own document —
  * so that the runtime registers it and decides every tool call by its rules
  * (LOOP R-03, R-05), as `loop apps run --cloud` does. One payload for every
- * place it runs: the workspace (`AppRenderer`) and the embed's floating
- * modes (`AppEmbed`).
+ * place it runs, all of them the workspace (`AppRenderer`): the Studio's
+ * Preview, the hosted page, and the embed inline and floating.
  */
 export function appDatalayerCreatePayload(app, instance) {
     return {
@@ -227,7 +242,7 @@ export function appThemeOverrides(app) {
         }
         : undefined;
 }
-export function AppRenderer({ app, plugins = NO_PLUGINS, instance, onPresence, frame = false, page, pluginsOff, ...embed }) {
+export function AppRenderer({ app, plugins = NO_PLUGINS, instance, onPresence, onSaying, sidebar = 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
@@ -238,7 +253,12 @@ export function AppRenderer({ app, plugins = NO_PLUGINS, instance, onPresence, f
     const off = [...(pluginsOff ?? [])].sort().join(',');
     const preset = useMemo(() => {
         try {
-            return appPreset(app, { page, pluginsOff });
+            return appPreset(app, {
+                page,
+                pluginsOff,
+                sidebar,
+                appUid: instance?.appUid,
+            });
         }
         catch (error) {
             return {
@@ -247,7 +267,7 @@ export function AppRenderer({ app, plugins = NO_PLUGINS, instance, onPresence, f
         }
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [source, page, off]);
+    [source, page, off, sidebar, instance?.appUid]);
     const allPlugins = useMemo(() => ('problem' in preset ? plugins : [...preset.plugins, ...plugins]), [preset, plugins]);
     /*
      * On Datalayer, the application runs on a runtime: allocated with a plain
@@ -296,6 +316,7 @@ export function AppRenderer({ app, plugins = NO_PLUGINS, instance, onPresence, f
             face: app.emoji,
             welcome: app.interface.welcome || app.description,
             onPresence,
+            onSaying,
         }, showTokenUsage: false, datalayerCreatePayload: datalayerCreatePayload, ...embed, plugins: allPlugins }));
 }
 export default AppRenderer;

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

@@ -9,5 +9,6 @@ export * from './AppRenderer';
 export * from './appspec';
 export * from './checks';
 export * from './feedback';
+export * from './records';
 export * from './rules';
 export * from './yaml';

package/lib/loop/apps/index.js

@@ -13,5 +13,6 @@ export * from './AppRenderer';
 export * from './appspec';
 export * from './checks';
 export * from './feedback';
+export * from './records';
 export * from './rules';
 export * from './yaml';

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

@@ -0,0 +1,42 @@
+/**
+ * The record of an application (LOOP R-07), as ai-agents keeps it: what it
+ * did, session by session, written by the runtime it ran on — read here for
+ * its activity feed (R-01b, R-15): the sessions, newest first, and what each
+ * one did, step by step.
+ *
+ * Pure but for `fetch`: no React.
+ *
+ * @module loop/apps/records
+ */
+/** What a record entry is. */
+export type RecordKind = 'session' | 'tool_call' | 'decision' | 'check' | 'approval' | 'output' | 'feedback'
+/** A turn of a conversation: what was asked, what it answered. */
+ | 'turn';
+/** One entry of an application's record. */
+export type RecordEntry = {
+    uid: string;
+    sessionUid: string;
+    deploymentUid: string;
+    version: number;
+    kind: RecordKind;
+    summary: string;
+    payload: Record<string, unknown>;
+    createdAt: string;
+};
+/** Where the record is read, and as whom. */
+export type RecordsContext = {
+    /** The ai-agents service. */
+    aiAgentsUrl: string;
+    /** The reader's token: the record is its owner's. */
+    token: string;
+};
+/** Each kind in a word, as the feed labels it. */
+export declare const RECORD_KIND_WORDS: Record<RecordKind, string>;
+/** An entry as ai-agents answers with it. */
+export declare function entryOf(raw: Record<string, unknown>): RecordEntry;
+/** A session in a sentence: how many calls, what stopped it, how it ended. */
+export declare function sessionSentence(entries: readonly RecordEntry[]): string;
+/** The sessions of an application, newest first: their opening entries. */
+export declare function listSessions(context: RecordsContext, appUid: string, limit?: number): Promise<RecordEntry[]>;
+/** What one session did, in order. */
+export declare function readSession(context: RecordsContext, sessionUid: string): Promise<RecordEntry[]>;

package/lib/loop/apps/records.js

@@ -0,0 +1,81 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/** Each kind in a word, as the feed labels it. */
+export const RECORD_KIND_WORDS = {
+    session: 'Session',
+    tool_call: 'Tool call',
+    decision: 'Rule',
+    check: 'Check',
+    approval: 'Approval',
+    output: 'Answer',
+    feedback: 'Feedback',
+    turn: 'Turn',
+};
+/** An entry as ai-agents answers with it. */
+export function entryOf(raw) {
+    return {
+        uid: String(raw.uid ?? ''),
+        sessionUid: String(raw.session_uid ?? ''),
+        deploymentUid: String(raw.deployment_uid ?? ''),
+        version: Number(raw.version) || 0,
+        kind: String(raw.kind ?? 'output'),
+        summary: String(raw.summary ?? ''),
+        payload: raw.payload && typeof raw.payload === 'object'
+            ? raw.payload
+            : {},
+        createdAt: String(raw.created_at ?? ''),
+    };
+}
+/** A session in a sentence: how many calls, what stopped it, how it ended. */
+export function sessionSentence(entries) {
+    const calls = entries.filter(entry => entry.kind === 'tool_call').length;
+    const checks = entries.filter(entry => entry.kind === 'check');
+    const outputs = entries.filter(entry => entry.kind === 'output');
+    const last = outputs[outputs.length - 1];
+    const parts = [
+        calls === 0
+            ? 'No tool called'
+            : `${calls} tool call${calls === 1 ? '' : 's'}`,
+    ];
+    if (checks.length) {
+        parts.push(`${checks.length} step${checks.length === 1 ? '' : 's'} a check did not let pass`);
+    }
+    if (last?.summary.startsWith('Stopped:')) {
+        parts.push('stopped');
+    }
+    else if (outputs.length) {
+        parts.push(`${outputs.length} answer${outputs.length === 1 ? '' : 's'}`);
+    }
+    return `${parts.join(', ')}.`;
+}
+async function read(context, path, failure) {
+    if (!context.aiAgentsUrl) {
+        throw new Error('The record service is not configured.');
+    }
+    const response = await fetch(`${context.aiAgentsUrl.replace(/\/+$/, '')}/api/ai-agents/v1/apps${path}`, {
+        headers: context.token
+            ? { Authorization: `Bearer ${context.token}` }
+            : {},
+    });
+    const body = (await response.json().catch(() => ({})));
+    if (!response.ok || body.success === false) {
+        throw new Error(`${failure}: ${String(body.detail ?? response.status)}`);
+    }
+    return body;
+}
+/** The sessions of an application, newest first: their opening entries. */
+export async function listSessions(context, appUid, limit = 20) {
+    const body = await read(context, `/sessions?app_uid=${encodeURIComponent(appUid)}&limit=${limit}`, 'The sessions could not be read');
+    return Array.isArray(body.sessions)
+        ? body.sessions.map(entryOf)
+        : [];
+}
+/** What one session did, in order. */
+export async function readSession(context, sessionUid) {
+    const body = await read(context, `/records?session_uid=${encodeURIComponent(sessionUid)}&limit=500`, 'The session could not be read');
+    return Array.isArray(body.entries)
+        ? body.entries.map(entryOf)
+        : [];
+}

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

@@ -76,3 +76,16 @@ export declare function behaviourFor(app: Pick<AppSpec, 'connections' | 'rules'>
 export declare function toolBehaviours(app: Pick<AppSpec, 'connections' | 'rules'>): Record<string, AppBehaviour>;
 /** Where what a tool is asked changes what the application does about it. */
 export declare function toolEscalations(app: Pick<AppSpec, 'connections' | 'rules'>): Record<string, AppEscalation[]>;
+/**
+ * The four behaviours, as a person reads them: what the Studio's rules card
+ * and an application's own rules and approvals card (R-01b) say. The same
+ * words as the Studio's vocabulary.
+ */
+export declare const BEHAVIOUR_WORDS: Record<AppBehaviour, {
+    says: string;
+    means: string;
+}>;
+/** What a class of action is, as a person reads it. */
+export declare const ACTION_WORDS: Record<ActionClass, string>;
+/** What a rule's target is, in words: a class of action, or a tool by its name. */
+export declare function coverOf(target: string): string;

package/lib/loop/apps/rules.js

@@ -311,3 +311,39 @@ export function toolEscalations(app) {
     }
     return escalations;
 }
+// --- in words ----------------------------------------------------------------------
+/**
+ * The four behaviours, as a person reads them: what the Studio's rules card
+ * and an application's own rules and approvals card (R-01b) say. The same
+ * words as the Studio's vocabulary.
+ */
+export const BEHAVIOUR_WORDS = {
+    do_it: { says: 'Do it', means: 'It does it without asking.' },
+    if_asked: {
+        says: 'Do it if I asked',
+        means: 'Only what you approved in advance.',
+    },
+    ask_first: { says: 'Ask me first', means: 'It waits for your yes.' },
+    leave_to_me: {
+        says: 'Leave it to me',
+        means: 'It never does it, and hands it to you.',
+    },
+};
+/** What a class of action is, as a person reads it. */
+export const ACTION_WORDS = {
+    read: 'Read',
+    write: 'Create or change',
+    send: 'Send',
+    buy: 'Buy',
+    delete: 'Delete',
+    publish: 'Share or publish',
+};
+/** What a rule's target is, in words: a class of action, or a tool by its name. */
+export function coverOf(target) {
+    const words = own(ACTION_WORDS, target);
+    if (words) {
+        return words;
+    }
+    const [server, name] = splitRef(target);
+    return server ? `${name} (${server})` : name;
+}

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

@@ -45,6 +45,8 @@ export type AppEmbedProps = {
  * no person's choice, since a visitor to another product has none here.
  */
 export declare function embedAssistantCharacter(app: AppSpec, plugins?: PluginRef[]): AssistantCharacterChosen;
+/** What a floating application says to a visitor Datalayer does not know. */
+export declare const signedOutSentence: (app: Pick<AppSpec, "name">) => string;
 /** 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;