@datalayer/agent-runtimes 1.3.75 → 1.3.79

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

@@ -13,8 +13,10 @@ import { ASSISTANT_WORDS, assistantStateOf, keepAway, keptAway, latestSaying, }
 import { useApproveToolRequest, useRejectToolRequest, useToolApprovalsQuery, } from '../../../hooks/useToolApprovals';
 import { approvalsOfApp, ruleOfApproval } from '../app-rules/AppRulesCard';
 import { useViewportDrag } from '../../../chat/useViewportDrag';
-import { LoopAssistantCharacter, LoopAssistantMenu, LoopChatLayout, LoopChatTurn, LoopSlots, } from '../../core';
+import { LoopAssistantCharacter, LoopAssistantMenu, LoopChatLayout, LoopChatTurn, LoopSlots, IDLE_SANDBOX_SNAPSHOT_SIGNAL, IDLE_SANDBOX_TARGET_SIGNAL, } from '../../core';
 import { assistantCharacterFor } from '../assistant-characters';
+import { useOptionalSandboxService } from '../agents/useSandboxService';
+import { TARGET_SPECS } from '../agents/switchable';
 export const LOOP_ASSISTANT_PLUGIN_NAME = '@datalayer/loop-plugin-assistant';
 /** The character's size, in pixels, as the chat's own assistant. */
 const SIZE = 88;
@@ -69,7 +71,7 @@ function focusComposer() {
     const composer = document.querySelector('[data-chat-composer] textarea, [data-chat-composer] [contenteditable="true"]');
     composer?.focus();
 }
-export function LoopAssistant({ app, person, appId, decisions, balloon: displayGiven = 'history', }) {
+export function LoopAssistant({ app, person, appId, decisions, balloon: displayGiven = 'history', workspace, }) {
     // The balloon's display, as its menu chose it; the Appspec's until then.
     const [chosenDisplay, setChosenDisplay] = useState();
     const display = chosenDisplay ?? displayGiven;
@@ -115,6 +117,53 @@ export function LoopAssistant({ app, person, appId, decisions, balloon: displayG
             setHeardId(saying.id);
         }
     }, [open, saying?.id]);
+    // The workspace's sandbox (the agents plugin's), for the menu's *Agent
+    // Details…* and *Code Sandbox Details…*.
+    const sandboxService = useOptionalSandboxService();
+    const snapshot = useSignalValue(sandboxService?.snapshot ?? IDLE_SANDBOX_SNAPSHOT_SIGNAL);
+    const target = useSignalValue(sandboxService?.target ?? IDLE_SANDBOX_TARGET_SIGNAL);
+    const agentId = workspace?.agentId || undefined;
+    const agentAbout = useMemo(() => ({
+        name: appId,
+        spec: appId,
+        model: workspace?.model,
+        where: target ? TARGET_SPECS[target]?.label : undefined,
+        agentId,
+        apiBase: snapshot.agentBaseUrl ??
+            (workspace?.serverUrl || sandboxService?.serverUrl || undefined),
+    }), [
+        appId,
+        target,
+        agentId,
+        workspace?.model,
+        workspace?.serverUrl,
+        sandboxService,
+        snapshot.agentBaseUrl,
+    ]);
+    const agentSandbox = useMemo(() => {
+        // Offered whenever the workspace has a sandbox, running or not yet.
+        if (!sandboxService || !target) {
+            return undefined;
+        }
+        const live = snapshot.state === 'running' || snapshot.state === 'starting';
+        const kinds = {
+            browser: 'browser',
+            local: 'local',
+            jupyter: 'jupyter',
+            datalayer: 'cloud',
+        };
+        return {
+            kind: kinds[target] ?? 'runtime',
+            status: live ? snapshot.state : 'not running',
+            variant: snapshot.variant,
+            url: snapshot.jupyterUrl,
+            token: snapshot.jupyterToken,
+            kernelId: snapshot.kernelId,
+            agentId,
+            connection: target === 'browser' ? sandboxService.getKernelConnection() : undefined,
+            serverUrl: snapshot.agentBaseUrl ?? sandboxService.serverUrl,
+        };
+    }, [sandboxService, target, snapshot, agentId]);
     const stageRef = useRef(null);
     const drag = useViewportDrag(stageRef, { whole: true });
     const decide = useMemo(() => decisions?.serverUrl
@@ -204,7 +253,7 @@ export function LoopAssistant({ app, person, appId, decisions, balloon: displayG
     };
     return (_jsxs(_Fragment, { children: [appId && signedIn ? (_jsx(WaitingApprovals, { appId: appId, onWaiting: setApproval })) : null, _jsx(AssistantStage, { character: chosen.character, state: state, size: SIZE, place: drag.position
                     ? { left: `${drag.position.left}px`, top: `${drag.position.top}px` }
-                    : { right: '24px', bottom: '24px' }, stageRef: stageRef, onDragStart: drag.onHandlePointerDown, open: open, onToggle: onToggle, balloon: balloon, balloonDisplay: display, insist: insist, onDismiss: onDismiss, decide: decide, onResetPosition: drag.position ? drag.reset : undefined, onBalloonDisplayChange: setChosenDisplay, about: appId ? { name: appId, spec: appId } : undefined, contextMenu: menuContributions })] }));
+                    : { right: '24px', bottom: '24px' }, stageRef: stageRef, onDragStart: drag.onHandlePointerDown, open: open, onToggle: onToggle, balloon: balloon, balloonDisplay: display, insist: insist, onDismiss: onDismiss, decide: decide, onResetPosition: drag.position ? drag.reset : undefined, onBalloonDisplayChange: setChosenDisplay, about: agentAbout, sandbox: agentSandbox, contextMenu: menuContributions })] }));
 }
 export const LoopAssistantPlugin = definePlugin({
     name: LOOP_ASSISTANT_PLUGIN_NAME,
@@ -219,7 +268,7 @@ export const LoopAssistantPlugin = definePlugin({
     description: 'The chat as a character on the page: the application’s own, or the one the person chose, from the characters the enabled plugins contribute.',
     octicon: 'paperclip',
     build: ({ config }) => {
-        const Configured = () => (_jsx(LoopAssistant, { app: config.app, person: config.person, appId: config.appId, decisions: config.decisions, balloon: config.balloon }));
+        const Configured = ({ workspace, }) => (_jsx(LoopAssistant, { workspace: workspace, app: config.app, person: config.person, appId: config.appId, decisions: config.decisions, balloon: config.balloon }));
         return {
             components: [
                 { id: 'loop-assistant', slot: LoopSlots.root, Component: Configured },

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

@@ -17,6 +17,13 @@ type ContributionsReader = {
 };
 export declare const ASSISTANT_CHARACTERS_PLUGIN_NAME = "@datalayer/loop-plugin-assistant-characters";
 export declare const AssistantCharactersPlugin: ReactorPlugin<Record<string, never>, unknown, unknown>;
+/**
+ * A plugin contributing one character (LOOP T-24, T-26): a character a
+ * person brought — a `.acs` or a clippy.js character read in their page —
+ * offered beside the contributed ones under the id it is chosen by. The
+ * character stays in the page: the plugin only says it is there.
+ */
+export declare function defineAssistantCharacterPlugin(id: string, character: AssistantCharacter | AssistantCharacterData): ReactorPlugin<Record<string, never>, unknown, unknown>;
 /** The characters the enabled plugins contribute, in contribution order. */
 export declare function assistantCharactersOf(reactor: ContributionsReader): {
     id: string;

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

@@ -20,6 +20,23 @@ export const AssistantCharactersPlugin = definePlugin({
     octicon: 'paperclip',
     contributes: ASSISTANT_CHARACTERS.map(character => contribution(LoopAssistantCharacter, { id: character.id, character }, { id: character.id })),
 });
+/**
+ * A plugin contributing one character (LOOP T-24, T-26): a character a
+ * person brought — a `.acs` or a clippy.js character read in their page —
+ * offered beside the contributed ones under the id it is chosen by. The
+ * character stays in the page: the plugin only says it is there.
+ */
+export function defineAssistantCharacterPlugin(id, character) {
+    return definePlugin({
+        name: `${ASSISTANT_CHARACTERS_PLUGIN_NAME}-${id}`,
+        displayName: `Assistant character: ${character.name}`,
+        description: `${character.name}, a character for the floating assistant.`,
+        octicon: 'paperclip',
+        contributes: [
+            contribution(LoopAssistantCharacter, { id, character }, { id }),
+        ],
+    });
+}
 /** The characters the enabled plugins contribute, in contribution order. */
 export function assistantCharactersOf(reactor) {
     return reactor

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

@@ -1146,7 +1146,10 @@ export default function ChatView({ workspace }) {
      */
     const visitors = reactor.getConfig(AGENTS_PLUGIN_NAME)?.datalayerVisitors;
     const visitor = useVisitorToken(visitors);
-    const iamToken = visitors ? visitor.token : memberToken;
+    // An embedded application's own token, for a visitor the platform does
+    // not know (LOOP R-20): it runs a session of its deployment, and no more.
+    const embedToken = reactor.getConfig(AGENTS_PLUGIN_NAME)?.embedToken;
+    const iamToken = visitors ? visitor.token : embedToken || memberToken;
     const protocol = useMemo(() => inPage
         ? browserProtocolConfig({
             agentId: member?.specId ?? agentId,

package/lib/loop/plugins/page-layout/SplitLayout.d.ts

@@ -10,7 +10,8 @@
  *
  * The hairline is a separator a person can move with the pointer or the
  * keyboard (arrows by a step, Home and End to the bounds); the share it
- * leaves the conversation is kept while the workspace is mounted.
+ * leaves the conversation is kept while the workspace is mounted. The page
+ * opens at the theme's pace (T-10, `paneOpening`).
  *
  * @module loop/plugins/page-layout/SplitLayout
  */

package/lib/loop/plugins/page-layout/SplitLayout.js

@@ -1,6 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useRef, useState } from 'react';
 import { Box } from '@datalayer/primer-addons';
+import { paneOpening } from '../../shell/paneMotion';
 /** The conversation's share of the width when the split opens. */
 export const SPLIT_DEFAULT_SHARE = 0.4;
 /** The narrowest and widest the conversation may be made. */
@@ -116,6 +117,9 @@ export function SplitLayout({ editors, hasEditor, transcript, prompt, chips, pic
                                 minWidth: 0,
                                 minHeight: 0,
                                 display: 'flex',
+                                // The page opening beside the conversation, at the theme's
+                                // pace (T-10): no motion where the theme sets none.
+                                ...paneOpening('right'),
                             }
                             : // Mounted but out of sight: the editors keep their place.
                                 {

package/lib/loop/presets.d.ts

@@ -139,6 +139,10 @@ export type LoopPresetOptions = {
     datalayerCreatePayload?: Record<string, unknown>;
     /** A conversation without an account, on the visitors' runtime (LOOP R-30). */
     datalayerVisitors?: AgentsConfig['datalayerVisitors'];
+    /** A deployment's agent, already on the runtime it is kept on (LOOP R-33). */
+    datalayerKept?: AgentsConfig['datalayerKept'];
+    /** An embed token: the embedded application's session, and nothing else (LOOP R-20). */
+    embedToken?: string;
     /** The target is the host's to fix, even with the agent control hidden. */
     targetFixed?: boolean;
     /** The theme the conversation wears, by name; the person's unless said. */

package/lib/loop/presets.js

@@ -52,7 +52,7 @@ import { LoopPageLayoutPlugin } from './plugins/page-layout';
  * be installed or signed into, and the switches a demonstration wants are off.
  */
 export function loopPlugins(options = {}) {
-    const { serverUrl, target = 'browser', defaultEditor: askedEditor, showViewSelector = true, hideChatHeader = false, chatHeaderButtons = false, promptPlacement, autoFocusPrompt = true, suggestionLabels = true, fullScreenTopOffset = 0, showAgentVariants = false, agentSummary = true, teamId, teamPicker = true, pageLayout = false, pageLayoutArrangement = 'page', pageLayoutTurnPanel = 'below', pageLayoutPrompt = 'docked', pageLayoutPromptAnchor = 'top', pageLayoutSize, pageLayoutTurnPanelFooter = 'full', localAgent, localAgentSpec, datalayerAgentSpecId, datalayerCreatePayload, datalayerVisitors, targetFixed, themeVariant, themeOverrides, colorMode, presence, showTokenUsage, floatingPrompt = false, editorSelector = false, editors = true, conversation = true, graph = false, commandPalette = false, pluginsPanel = false, windowFrame = false, firstPromptHook, } = options;
+    const { serverUrl, target = 'browser', defaultEditor: askedEditor, showViewSelector = true, hideChatHeader = false, chatHeaderButtons = false, promptPlacement, autoFocusPrompt = true, suggestionLabels = true, fullScreenTopOffset = 0, showAgentVariants = false, agentSummary = true, teamId, teamPicker = true, pageLayout = false, pageLayoutArrangement = 'page', pageLayoutTurnPanel = 'below', pageLayoutPrompt = 'docked', pageLayoutPromptAnchor = 'top', pageLayoutSize, pageLayoutTurnPanelFooter = 'full', localAgent, localAgentSpec, datalayerAgentSpecId, datalayerCreatePayload, datalayerVisitors, datalayerKept, embedToken, targetFixed, themeVariant, themeOverrides, colorMode, presence, showTokenUsage, floatingPrompt = false, editorSelector = false, editors = true, conversation = true, graph = false, commandPalette = false, pluginsPanel = false, windowFrame = false, firstPromptHook, } = options;
     const defaultEditor = askedEditor ?? (editors ? 'notebook' : 'none');
     // A workspace without a conversation: the theme, the shell's points, and
     // the host's chrome; its view is a host's plugin's.
@@ -112,6 +112,8 @@ export function loopPlugins(options = {}) {
             datalayerAgentSpecId,
             datalayerCreatePayload,
             datalayerVisitors,
+            datalayerKept,
+            embedToken,
             targetFixed,
             showAgentVariants,
             showAgentSummary: agentSummary,

package/lib/loop/shell/LoopWorkspace.d.ts

@@ -117,6 +117,13 @@ export type LoopWorkspaceProps = {
      * and no row is drawn in its place.
      */
     headerContainer?: HTMLElement | null;
+    /**
+     * The sidebar as a rail (LOOP T-07): a narrow column of line icons, one per
+     * panel, and the chosen panel beside it — rather than every panel stacked
+     * in one column. False by default; an application's shell asks for it. In
+     * a `panel` layout the sidebar stays a stack under the view.
+     */
+    sidebarRail?: boolean;
 };
 /** Build the platform for a set of plugins. */
 export declare function buildLoopReactor(extensions: PluginRef[]): ReactorPlatform;

package/lib/loop/shell/LoopWorkspace.js

@@ -7,26 +7,27 @@ import { ReactorSlot, ReactorViewHost, useContributions, useReactorEvent, useSlo
 import { LoopCommand, LoopSlots, LoopViewType, canOpenView, createPromptChannel, parseCommand, loopSurfaceId, } from '../core';
 import { SIDEBAR_WIDTH } from '../plugins/plugins-panel';
 import { ViewSwitcher } from './ViewSwitcher';
+import { SidebarRail } from './SidebarRail';
 /** Build the platform for a set of plugins. */
 export function buildLoopReactor(extensions) {
     return buildReactorFromPlugins(extensions);
 }
 export function LoopWorkspace(props) {
-    const { serverUrl, agentId, conversationId, model, sandbox = { state: 'idle' }, extensions = [], reactor: providedReactor, manageReactor = true, initialViewType, onSend, layout = 'page', showViewSelector = true, showHeader = true, chatHeaderActions, headerActions, headerContainer, } = props;
+    const { serverUrl, agentId, conversationId, model, sandbox = { state: 'idle' }, extensions = [], reactor: providedReactor, manageReactor = true, initialViewType, onSend, layout = 'page', showViewSelector = true, showHeader = true, chatHeaderActions, headerActions, headerContainer, sidebarRail = false, } = props;
     // Building the platform is a one-time act: rebuilding it on every render
     // would restart every plugin.
     const reactor = useMemo(() => providedReactor ?? buildLoopReactor(extensions), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [providedReactor]);
     useReactor(reactor, { autoStart: manageReactor });
-    return (_jsx(WorkspaceBody, { serverUrl: serverUrl, agentId: agentId, conversationId: conversationId, model: model, initialSandbox: sandbox, initialViewType: initialViewType, onSend: onSend, layout: layout, showViewSelector: showViewSelector, showHeader: showHeader, chatHeaderActions: chatHeaderActions, headerActions: headerActions, headerContainer: headerContainer }));
+    return (_jsx(WorkspaceBody, { serverUrl: serverUrl, agentId: agentId, conversationId: conversationId, model: model, initialSandbox: sandbox, initialViewType: initialViewType, onSend: onSend, layout: layout, showViewSelector: showViewSelector, showHeader: showHeader, chatHeaderActions: chatHeaderActions, headerActions: headerActions, headerContainer: headerContainer, sidebarRail: sidebarRail }));
 }
 /**
  * Split from `LoopWorkspace` so the hooks below run with the platform already
  * registered — `useContributions` needs a reactor in the store, and `useReactor`
  * registers it during the parent's render.
  */
-function WorkspaceBody({ serverUrl, agentId: initialAgentId, conversationId, model, initialSandbox, initialViewType, onSend, layout = 'page', showViewSelector = true, showHeader = true, chatHeaderActions, headerActions, headerContainer, }) {
+function WorkspaceBody({ serverUrl, agentId: initialAgentId, conversationId, model, initialSandbox, initialViewType, onSend, layout = 'page', showViewSelector = true, showHeader = true, chatHeaderActions, headerActions, headerContainer, sidebarRail = false, }) {
     /*
      * Which agent the session is talking to.
      *
@@ -210,7 +211,7 @@ function WorkspaceBody({ serverUrl, agentId: initialAgentId, conversationId, mod
                             minWidth: 0,
                             minHeight: 0,
                             position: 'relative',
-                        }, children: _jsx(ReactorViewHost, { point: LoopViewType, active: effectiveViewType, props: { viewType: effectiveViewType, workspace }, fallback: _jsx(Centered, { children: "Loading\u2026" }), empty: _jsx(Centered, { children: "No view is available yet." }), errorFallback: error => (_jsxs(Centered, { children: ["This view failed to load: ", error.message] })) }) }), sidebar.length > 0 ? (_jsx(Box, { as: "aside", sx: {
+                        }, children: _jsx(ReactorViewHost, { point: LoopViewType, active: effectiveViewType, props: { viewType: effectiveViewType, workspace }, fallback: _jsx(Centered, { children: "Loading\u2026" }), empty: _jsx(Centered, { children: "No view is available yet." }), errorFallback: error => (_jsxs(Centered, { children: ["This view failed to load: ", error.message] })) }) }), sidebar.length > 0 && sidebarRail && !compact ? (_jsx(SidebarRail, { components: sidebar, props: { workspace }, width: SIDEBAR_WIDTH })) : sidebar.length > 0 ? (_jsx(Box, { as: "aside", sx: {
                             flex: '0 0 auto',
                             // Wide enough for a plugin's name, its description and a switch
                             // on one line. The panel truncates to the same number, and takes

package/lib/loop/shell/SidebarRail.d.ts

@@ -0,0 +1,53 @@
+/**
+ * The rail (LOOP T-07): the workspace's sidebar as a narrow column of line
+ * icons, one per panel, and the one panel chosen beside it.
+ *
+ * The sidebar stacks every panel its plugins contribute — an application's
+ * rules and approvals, its activity, its computer — one under the other.
+ * With the rail, each is an icon: one weight, no colour, the chosen one on a
+ * grey rounded square, as the reference screens draw their rail. A click
+ * shows that panel, a click on the chosen one closes the column, and the
+ * panel opens at the theme's pace (T-10).
+ *
+ * A panel names itself on the rail by the `rail` its plugin gives its
+ * component (`LoopSidebarComponent`); without one it is shown by its id
+ * under a generic icon. Every panel stays mounted while another is shown,
+ * so a feed keeps its place and a live computer its connection.
+ *
+ * @module loop/shell/SidebarRail
+ */
+import type { ElementType, JSX } from 'react';
+import type { ReactorSlotComponent } from '@datalayer/reactor/react';
+/** How a sidebar panel shows on the rail. */
+export type LoopSidebarRail = {
+    /** Its name, said to a screen reader and shown on hover. */
+    label: string;
+    /** A line icon (an octicon). */
+    icon: ElementType;
+};
+/** A component of the sidebar slot, with how it shows on the rail. */
+export type LoopSidebarComponent = ReactorSlotComponent & {
+    rail?: LoopSidebarRail;
+};
+/** One entry of the rail. */
+export type RailItem = {
+    id: string;
+    label: string;
+    icon: ElementType;
+};
+/** The rail's entries, in the slot's order. */
+export declare function railItemsOf(components: ReadonlyArray<LoopSidebarComponent>): RailItem[];
+/** What a click on an entry leaves chosen: it, or nothing when it was. */
+export declare function railChoiceAfter(chosen: string | null, clicked: string): string | null;
+/** The rail's width: one icon and its air. */
+export declare const RAIL_WIDTH = 48;
+export type SidebarRailProps = {
+    /** The sidebar's components, as the slot gives them. */
+    components: ReadonlyArray<LoopSidebarComponent>;
+    /** What each panel is rendered with. */
+    props: Record<string, unknown>;
+    /** The panel's width when open. */
+    width: number;
+};
+export declare function SidebarRail({ components, props, width, }: SidebarRailProps): JSX.Element;
+export default SidebarRail;

package/lib/loop/shell/SidebarRail.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box } from '@datalayer/primer-addons';
+import { SidebarExpandIcon } from '@primer/octicons-react';
+import { paneOpening } from './paneMotion';
+/** The rail's entries, in the slot's order. */
+export function railItemsOf(components) {
+    return components.map(component => ({
+        id: component.id,
+        label: component.rail?.label ?? component.id,
+        icon: component.rail?.icon ?? SidebarExpandIcon,
+    }));
+}
+/** What a click on an entry leaves chosen: it, or nothing when it was. */
+export function railChoiceAfter(chosen, clicked) {
+    return chosen === clicked ? null : clicked;
+}
+/** The rail's width: one icon and its air. */
+export const RAIL_WIDTH = 48;
+export function SidebarRail({ components, props, width, }) {
+    const items = railItemsOf(components);
+    // The first panel open to start with: what the column is for.
+    const [chosen, setChosen] = useState(items[0]?.id ?? null);
+    // A panel that left the slot is no longer chosen.
+    const open = items.some(item => item.id === chosen) ? chosen : null;
+    return (_jsxs(Box, { as: "aside", "data-loop-rail-sidebar": "", sx: { flex: '0 0 auto', display: 'flex', minHeight: 0 }, children: [_jsx(Box, { "data-loop-rail-panel": open ?? undefined, sx: {
+                    display: open ? 'block' : 'none',
+                    width: `${width}px`,
+                    minWidth: 0,
+                    borderLeft: 'var(--theme-hairline, 1px) solid',
+                    borderColor: 'border.default',
+                    overflowY: 'auto',
+                    px: 3,
+                    py: 3,
+                }, children: components.map(component => {
+                    const { Component } = component;
+                    const shown = component.id === open;
+                    return (_jsx(Box, { id: `loop-rail-panel-${component.id}`, role: "region", "aria-label": railItemsOf([component])[0].label, hidden: !shown, sx: shown ? paneOpening('right') : undefined, children: _jsx(Component, { ...props }) }, component.id));
+                }) }), _jsx(Box, { as: "nav", "aria-label": "Panels", sx: {
+                    width: `${RAIL_WIDTH}px`,
+                    flex: `0 0 ${RAIL_WIDTH}px`,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: 1,
+                    py: 2,
+                    borderLeft: 'var(--theme-hairline, 1px) solid',
+                    borderColor: 'border.default',
+                }, children: items.map(item => {
+                    const Icon = item.icon;
+                    const active = item.id === open;
+                    return (_jsx(Box, { as: "button", type: "button", "data-loop-rail-item": item.id, "aria-label": item.label, title: item.label, "aria-pressed": active, "aria-controls": `loop-rail-panel-${item.id}`, onClick: () => setChosen(railChoiceAfter(open, item.id)), sx: {
+                            width: 32,
+                            height: 32,
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            p: 0,
+                            border: 'none',
+                            borderRadius: 2,
+                            cursor: 'pointer',
+                            // One weight, no colour: the ink, quieter when not chosen.
+                            color: active ? 'fg.default' : 'fg.muted',
+                            bg: active ? 'neutral.muted' : 'transparent',
+                            '&:hover': { color: 'fg.default', bg: 'neutral.subtle' },
+                            '&:focus-visible': {
+                                outline: '2px solid',
+                                outlineColor: 'var(--focus-outlineColor, #0969da)',
+                                outlineOffset: '1px',
+                            },
+                        }, children: _jsx(Icon, { size: 16 }) }, item.id));
+                }) })] }));
+}
+export default SidebarRail;

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

@@ -8,3 +8,5 @@ export { ViewSwitcher, type ViewSwitcherProps } from './ViewSwitcher';
 export { PluginToggles, type PluginTogglesProps } from './PluginToggles';
 export { fullScreenNode, useWorkspaceFullScreen, type WorkspaceFullScreen, } from './useWorkspaceFullScreen';
 export { WorkspaceFullScreenAction } from './WorkspaceFullScreenAction';
+export { SidebarRail, RAIL_WIDTH, railChoiceAfter, railItemsOf, type LoopSidebarComponent, type LoopSidebarRail, type RailItem, type SidebarRailProps, } from './SidebarRail';
+export { paneOpening, paneOpenAnimation, paneOpenKeyframes, } from './paneMotion';

package/lib/loop/shell/index.js

@@ -12,3 +12,5 @@ export { ViewSwitcher } from './ViewSwitcher';
 export { PluginToggles } from './PluginToggles';
 export { fullScreenNode, useWorkspaceFullScreen, } from './useWorkspaceFullScreen';
 export { WorkspaceFullScreenAction } from './WorkspaceFullScreenAction';
+export { SidebarRail, RAIL_WIDTH, railChoiceAfter, railItemsOf, } from './SidebarRail';
+export { paneOpening, paneOpenAnimation, paneOpenKeyframes, } from './paneMotion';

package/lib/loop/shell/paneMotion.d.ts

@@ -0,0 +1,21 @@
+/**
+ * A pane opening, at the theme's pace (LOOP T-10): the third of the three
+ * things that move — a message arriving, a status changing, a pane opening.
+ *
+ * Read from the theme's tokens, `--theme-motion-pane` and
+ * `--theme-motion-easing`: a theme that sets no motion (every theme but
+ * `loop`) gives `0ms`, and nothing moves; nor does anything when the person
+ * asked for reduced motion.
+ *
+ * @module loop/shell/paneMotion
+ */
+/** The keyframes' name for a pane opening from a side: one per side. */
+export declare const paneOpenKeyframes: (from: "left" | "right") => string;
+/** The CSS `animation` of a pane opening from a side. */
+export declare const paneOpenAnimation: (from: "left" | "right") => string;
+/**
+ * The styles of a pane that opens from a side: it comes in a little from
+ * that side as it appears. Applied to an element when it is shown (mounted,
+ * or out of `display: none`), which is when a CSS animation starts.
+ */
+export declare function paneOpening(from: 'left' | 'right'): Record<string, unknown>;

package/lib/loop/shell/paneMotion.js

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * A pane opening, at the theme's pace (LOOP T-10): the third of the three
+ * things that move — a message arriving, a status changing, a pane opening.
+ *
+ * Read from the theme's tokens, `--theme-motion-pane` and
+ * `--theme-motion-easing`: a theme that sets no motion (every theme but
+ * `loop`) gives `0ms`, and nothing moves; nor does anything when the person
+ * asked for reduced motion.
+ *
+ * @module loop/shell/paneMotion
+ */
+/** The keyframes' name for a pane opening from a side: one per side. */
+export const paneOpenKeyframes = (from) => from === 'left' ? 'loopPaneOpenLeft' : 'loopPaneOpenRight';
+/** The CSS `animation` of a pane opening from a side. */
+export const paneOpenAnimation = (from) => `${paneOpenKeyframes(from)} var(--theme-motion-pane, 0ms) var(--theme-motion-easing, ease) both`;
+/**
+ * The styles of a pane that opens from a side: it comes in a little from
+ * that side as it appears. Applied to an element when it is shown (mounted,
+ * or out of `display: none`), which is when a CSS animation starts.
+ */
+export function paneOpening(from) {
+    const shift = from === 'left' ? '-12px' : '12px';
+    return {
+        animation: paneOpenAnimation(from),
+        [`@keyframes ${paneOpenKeyframes(from)}`]: {
+            from: { opacity: 0, transform: `translateX(${shift})` },
+            to: { opacity: 1, transform: 'none' },
+        },
+        '@media (prefers-reduced-motion: reduce)': {
+            animation: 'none',
+        },
+    };
+}

package/lib/specs/apps.js

@@ -99,10 +99,11 @@ export const ACCOUNTING_APP_0_0_1 = {
             },
         ],
         verified: {
-            live: [],
+            live: [
+                "Answered live over A2A on a developer's machine (2026-10-06), asked for the open customer invoices: it read the aged receivables from the Odoo books and said that the list of invoices had failed. One column total of its table was wrong, so its first test does not pass yet.",
+            ],
             recorded: [],
             unverified: [
-                "It has not run against Odoo live over A2A: agent-runtimes' tests serve it with fasta2a in process, on a fake agent.",
                 'Its tests have not been run as a set: no validation run is attached to it.',
             ],
         },
@@ -1788,7 +1789,7 @@ export const SALES_APP_0_0_1 = {
             live: [],
             recorded: [],
             unverified: [
-                'It has not talked to Accounting live: the agent-runtimes example AgentA2ATeamExample runs it in the browser against an Accounting runtime that someone starts.',
+                "It has not talked to Accounting live yet: a developer's example runs it in the browser, against an Accounting that someone starts.",
                 'Its tests have not been run as a set: no validation run is attached to it.',
             ],
         },
@@ -2639,8 +2640,10 @@ export const APP_SOURCES = {
                 },
             ],
             verified: {
+                live: [
+                    "Answered live over A2A on a developer's machine (2026-10-06), asked for the open customer invoices: it read the aged receivables from the Odoo books and said that the list of invoices had failed. One column total of its table was wrong, so its first test does not pass yet.",
+                ],
                 unverified: [
-                    "It has not run against Odoo live over A2A: agent-runtimes' tests serve it with fasta2a in process, on a fake agent.",
                     'Its tests have not been run as a set: no validation run is attached to it.',
                 ],
             },
@@ -3835,7 +3838,7 @@ export const APP_SOURCES = {
             ],
             verified: {
                 unverified: [
-                    'It has not talked to Accounting live: the agent-runtimes example AgentA2ATeamExample runs it in the browser against an Accounting runtime that someone starts.',
+                    "It has not talked to Accounting live yet: a developer's example runs it in the browser, against an Accounting that someone starts.",
                     'Its tests have not been run as a set: no validation run is attached to it.',
                 ],
             },