@datalayer/agent-runtimes 1.3.29 → 1.3.32

package/lib/loop/plugins/canvas-blocks/index.d.ts

@@ -0,0 +1,63 @@
+/**
+ * The Canvas's palette as a contribution point (LOOP C-12): each UI plugin of
+ * the catalogue that renders components (`agentspecs/ui-plugins`, C-13) is a
+ * Reactor plugin contributing its components to `loop.canvas.block`. The
+ * palette lists what the enabled plugins contribute, and nothing else; a
+ * plugin disabled takes its blocks off it, and an application that uses one
+ * of them says so in its setup notes (`blockSetupNotes`).
+ *
+ * A new kind of block arrives as a plugin contributing to the point, never as
+ * a change to the Canvas.
+ *
+ * @module loop/plugins/canvas-blocks
+ */
+import { type ReactorPlatform, type ReactorPlugin } from '@datalayer/reactor';
+import type { AppSpec, ComponentSpec, UIPluginSpec } from '../../../types/agentspecs';
+import { LoopCanvasBlock, type CanvasBlockContribution } from '../../core/canvasBlocks';
+/** What is read of a reactor here: its contributions to the point, and who is enabled. */
+type BlocksReader = {
+    getContributions: (point: typeof LoopCanvasBlock) => ReadonlyArray<{
+        value: CanvasBlockContribution;
+    }>;
+};
+/** The name of the Reactor plugin that contributes a UI plugin's blocks. */
+export declare const canvasBlocksPluginName: (uiPlugin: string) => string;
+/** A UI plugin of the catalogue as the Reactor plugin contributing its components as blocks. */
+export declare function uiPluginBlocks(uiPlugin: UIPluginSpec): ReactorPlugin<Record<string, never>, unknown, unknown>;
+/**
+ * The plugins of the catalogue's UI plugins that render components and may
+ * be named today (`enabled` in the catalogue).
+ */
+export declare const CANVAS_BLOCK_PLUGINS: ReactorPlugin<Record<string, never>, unknown, unknown>[];
+/**
+ * A reactor holding the block plugins given, started, with those named in
+ * `disabled` switched off. A name no plugin has is an error.
+ */
+export declare function canvasBlocksReactor(disabled?: readonly string[], plugins?: ReactorPlugin<any, any, any>[]): ReactorPlatform;
+/**
+ * The palette of an organization: the block plugins of the UI plugins it has
+ * turned off (`plugins_off` in IAM, catalogue ids such as 'a2ui') switched
+ * off. A UI plugin of the catalogue that contributes no block takes nothing
+ * off; an id the catalogue does not have is said by `unknownPluginsOff`.
+ */
+export declare function canvasBlocksReactorOf(pluginsOff: readonly string[]): ReactorPlatform;
+/** The ids an organization turns off that no UI plugin of the catalogue has. */
+export declare function unknownPluginsOff(pluginsOff: readonly string[]): string[];
+/**
+ * What an application's page uses from a UI plugin its organization has
+ * turned off, as its setup notes say it (`blockSetupNotes`, on the palette of
+ * `canvasBlocksReactorOf`).
+ */
+export declare function pluginsOffSetupNotes(app: Pick<AppSpec, 'interface'>, pluginsOff: readonly string[]): string[];
+/** The blocks the enabled plugins contribute, in contribution order: the palette. */
+export declare function canvasBlocksOf(reactor: BlocksReader): ComponentSpec[];
+/** The components an application's page names: those it may use, and those its surface places. */
+export declare function componentsUsedBy(app: Pick<AppSpec, 'interface'>): string[];
+/**
+ * What an application's page uses that no enabled plugin contributes, as its
+ * setup notes say it: one sentence per UI plugin of the catalogue whose
+ * blocks it uses while its plugin is off. A component the catalogue does not
+ * have is not a note but a problem of the instant checks.
+ */
+export declare function blockSetupNotes(app: Pick<AppSpec, 'interface'>, reactor: BlocksReader): string[];
+export {};

package/lib/loop/plugins/canvas-blocks/index.js

@@ -0,0 +1,118 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * The Canvas's palette as a contribution point (LOOP C-12): each UI plugin of
+ * the catalogue that renders components (`agentspecs/ui-plugins`, C-13) is a
+ * Reactor plugin contributing its components to `loop.canvas.block`. The
+ * palette lists what the enabled plugins contribute, and nothing else; a
+ * plugin disabled takes its blocks off it, and an application that uses one
+ * of them says so in its setup notes (`blockSetupNotes`).
+ *
+ * A new kind of block arrives as a plugin contributing to the point, never as
+ * a change to the Canvas.
+ *
+ * @module loop/plugins/canvas-blocks
+ */
+import { buildReactorFromPlugins, contribution, definePlugin, } from '@datalayer/reactor';
+import { listUIPlugins } from '../../../specs/uiPlugins';
+import { LoopCanvasBlock, } from '../../core/canvasBlocks';
+/** The name of the Reactor plugin that contributes a UI plugin's blocks. */
+export const canvasBlocksPluginName = (uiPlugin) => `@datalayer/loop-plugin-ui-${uiPlugin}`;
+/** A UI plugin of the catalogue as the Reactor plugin contributing its components as blocks. */
+export function uiPluginBlocks(uiPlugin) {
+    return definePlugin({
+        name: canvasBlocksPluginName(uiPlugin.id),
+        displayName: uiPlugin.name,
+        description: `The blocks of ${uiPlugin.name} on the Canvas: ${uiPlugin.components.map(component => component.name).join(', ')}.`,
+        octicon: 'apps',
+        contributes: uiPlugin.components.map(component => contribution(LoopCanvasBlock, { id: component.id, uiPlugin: uiPlugin.id, component }, { id: component.id })),
+    });
+}
+/**
+ * The plugins of the catalogue's UI plugins that render components and may
+ * be named today (`enabled` in the catalogue).
+ */
+export const CANVAS_BLOCK_PLUGINS = listUIPlugins()
+    .filter(uiPlugin => uiPlugin.enabled && uiPlugin.components.length > 0)
+    .map(uiPluginBlocks);
+/**
+ * A reactor holding the block plugins given, started, with those named in
+ * `disabled` switched off. A name no plugin has is an error.
+ */
+export function canvasBlocksReactor(disabled = [], plugins = CANVAS_BLOCK_PLUGINS) {
+    const reactor = buildReactorFromPlugins(plugins);
+    reactor.start();
+    for (const name of disabled) {
+        if (!reactor.hasPlugin(name)) {
+            throw new Error(`No plugin of the Canvas is named "${name}"; they are ${plugins.map(plugin => plugin.name).join(', ') || 'none'}.`);
+        }
+        reactor.disable(name);
+    }
+    return reactor;
+}
+/**
+ * The palette of an organization: the block plugins of the UI plugins it has
+ * turned off (`plugins_off` in IAM, catalogue ids such as 'a2ui') switched
+ * off. A UI plugin of the catalogue that contributes no block takes nothing
+ * off; an id the catalogue does not have is said by `unknownPluginsOff`.
+ */
+export function canvasBlocksReactorOf(pluginsOff) {
+    const blockPlugins = new Set(CANVAS_BLOCK_PLUGINS.map(plugin => plugin.name));
+    return canvasBlocksReactor(pluginsOff
+        .map(canvasBlocksPluginName)
+        .filter(name => blockPlugins.has(name)));
+}
+/** The ids an organization turns off that no UI plugin of the catalogue has. */
+export function unknownPluginsOff(pluginsOff) {
+    const known = new Set(listUIPlugins().map(uiPlugin => uiPlugin.id));
+    return pluginsOff.filter(id => !known.has(id));
+}
+/**
+ * What an application's page uses from a UI plugin its organization has
+ * turned off, as its setup notes say it (`blockSetupNotes`, on the palette of
+ * `canvasBlocksReactorOf`).
+ */
+export function pluginsOffSetupNotes(app, pluginsOff) {
+    return pluginsOff.length > 0
+        ? blockSetupNotes(app, canvasBlocksReactorOf(pluginsOff))
+        : [];
+}
+/** The blocks the enabled plugins contribute, in contribution order: the palette. */
+export function canvasBlocksOf(reactor) {
+    return reactor
+        .getContributions(LoopCanvasBlock)
+        .map(entry => entry.value.component);
+}
+/** The components an application's page names: those it may use, and those its surface places. */
+export function componentsUsedBy(app) {
+    return [
+        ...new Set([
+            ...(app.interface.components ?? []),
+            ...(app.interface.surface?.components ?? []).map(node => String(node.component)),
+        ]),
+    ];
+}
+/**
+ * What an application's page uses that no enabled plugin contributes, as its
+ * setup notes say it: one sentence per UI plugin of the catalogue whose
+ * blocks it uses while its plugin is off. A component the catalogue does not
+ * have is not a note but a problem of the instant checks.
+ */
+export function blockSetupNotes(app, reactor) {
+    const contributed = new Set(reactor.getContributions(LoopCanvasBlock).map(entry => entry.value.id));
+    const off = new Map();
+    for (const name of componentsUsedBy(app)) {
+        if (contributed.has(name)) {
+            continue;
+        }
+        for (const uiPlugin of listUIPlugins()) {
+            const component = uiPlugin.components.find(each => each.id === name);
+            if (component) {
+                off.set(uiPlugin, [...(off.get(uiPlugin) ?? []), component.name]);
+            }
+        }
+    }
+    return [...off.entries()].map(([uiPlugin, names]) => `The UI plugin “${uiPlugin.name}” is not enabled, and its page uses its ${names.length === 1 ? 'block' : 'blocks'} ${names.join(', ')}: ${names.length === 1 ? 'it is' : 'they are'} off the Canvas until it is.`);
+}

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

@@ -8,13 +8,13 @@ import { computed, signal } from '@datalayer/reactor';
 const NO_STANCE = signal(undefined);
 import { useContributions, useSignalValue, useGate, useReactorPlatform, ReactorLazy, ReactorSlot, useSlotComponents, } from '@datalayer/reactor/react';
 import { ChatBase } from '../../../chat/base/ChatBase';
-import { readServerCatalogue } from '../../../chat/base/modelChoice';
+import { offeredModels as offeredModelsFor, readServerCatalogue, readServerDecisions, } from '../../../chat/base/modelChoice';
 import { SUGGESTION_CHIP_WIDTH } from '../../../chat/display/EmptyState';
 import { AnonymousKeyExpired } from '@datalayer/core/lib/components/anonymous/AnonymousKeyExpired';
 import { useAnonymousSessionStore } from '../../../runtimes/browser/anonymousToken';
 import { browserProtocolConfig } from '../../../runtimes/browser';
 import { useBrowserInference } from '../../../hooks/useBrowserInference';
-import { getAgentspecs } from '../../../specs/agents';
+import { agentInstructions, inPageAgentRefusal, resolveAgentspec, } from '../../apps/agent';
 import { targetRunsAgentInPage, } from '../agents/switchable';
 import { agentIcon } from '../agents/agentIcons';
 import { specSubagents } from '../agents/specSubagents';
@@ -393,7 +393,7 @@ export default function ChatView({ workspace }) {
         }
         setTransient(null);
         // A new turn: whatever the panel showed is gone, this message is it.
-        turnFeedRef.current?.begin(message);
+        turnFeedRef.current?.begin(message, controlsRef.current?.thread());
         const outcome = await workspace.submit(message);
         if (!outcome.handled) {
             /*
@@ -655,9 +655,23 @@ export default function ChatView({ workspace }) {
      * icon for want of this lookup — it used the document tools and called
      * nobody.
      */
-    const blueprintSpecId = useContributions(LoopAgentBlueprint)[0]?.value.specId;
-    const spec = getAgentspecs(member?.specId ?? agentId) ??
-        (blueprintSpecId ? getAgentspecs(blueprintSpecId) : undefined);
+    const blueprint = useContributions(LoopAgentBlueprint)[0]?.value;
+    const blueprintSpecId = blueprint?.specId;
+    /*
+     * An agent of the catalogue or a Cog's, as a runtime resolves it: an
+     * application on a Cog looked up among the agentspecs alone was turned in
+     * the page with no instructions at all (LOOP H-01).
+     */
+    const spec = resolveAgentspec(member?.specId ?? agentId) ??
+        (blueprintSpecId ? resolveAgentspec(blueprintSpecId) : undefined);
+    /*
+     * The blueprint's words and model — an application's — on top of its
+     * spec's, for the agent it contributes; never for a team's member.
+     */
+    const blueprintTurn = member ? undefined : blueprint;
+    // Turned in the page, an agent that resolves to nothing is refused rather
+    // than run bare.
+    const inPageRefusal = inPage && !member ? inPageAgentRefusal(blueprintSpecId, spec) : undefined;
     /*
      * The team's name for a member first, then the spec's own.
      *
@@ -945,12 +959,12 @@ export default function ChatView({ workspace }) {
      * for something that was never theirs.
      */
     const expiredKeyIsTemporary = !signedInUser;
-    const chatDisabled = gateBlocked || keyExpired;
+    const chatDisabled = gateBlocked || keyExpired || Boolean(inPageRefusal);
     const disabledReason = keyExpired
         ? expiredKeyIsTemporary
             ? 'This demo runs on a shared key, and its time is up. Sign in to keep going.'
             : 'Your key has expired. Sign in to keep going.'
-        : gateReason;
+        : (inPageRefusal ?? gateReason);
     /*
      * The prompt's text, held here rather than inside `InputPrompt`.
      *
@@ -981,7 +995,7 @@ export default function ChatView({ workspace }) {
      * the member being addressed changes.
      */
     const [pickedModel, setPickedModel] = useState();
-    const activeModel = pickedModel ?? spec?.model ?? workspace.model ?? '';
+    const activeModel = pickedModel ?? blueprintTurn?.model ?? spec?.model ?? workspace.model ?? '';
     /*
      * The team, in the shape the footer asks for.
      *
@@ -1071,7 +1085,7 @@ export default function ChatView({ workspace }) {
     const protocol = useMemo(() => inPage
         ? browserProtocolConfig({
             agentId: member?.specId ?? agentId,
-            instructions: spec?.systemPrompt,
+            instructions: agentInstructions(spec, blueprintTurn?.instructions),
             model: activeModel || undefined,
             inference,
             // Who this member may hand work to, and what they are told. Both
@@ -1111,6 +1125,7 @@ export default function ChatView({ workspace }) {
         agentTools,
         team,
         spec,
+        blueprintTurn,
         activeModel,
         agentServerUrl,
     ]);
@@ -1128,7 +1143,10 @@ export default function ChatView({ workspace }) {
     const configQuery = useConfig(!inPage, protocol.type === 'ag-ui' ? protocol.configEndpoint : undefined, undefined, agentId);
     const skillsQuery = useSkills(true);
     const skillActions = useSkillActions(agentId);
-    const [catalogModels, setCatalogModels] = useState([]);
+    // `undefined` until the runtime answers: its answer is then the list.
+    const [catalogModels, setCatalogModels] = useState(undefined);
+    // The typed-decision models the runtime lists apart: shown, never picked.
+    const [decisions, setDecisions] = useState(undefined);
     useEffect(() => {
         /*
          * Only where there is a server to ask.
@@ -1143,23 +1161,32 @@ export default function ChatView({ workspace }) {
             return undefined;
         }
         let cancelled = false;
-        void fetch(`${agentServerUrl}/api/v1/configure/models`)
-            .then(response => (response.ok ? response.json() : { models: [] }))
+        // The agent's own models (its model and model_additionals), each saying
+        // whether its inference serves it.
+        void fetch(`${agentServerUrl}/api/v1/configure/models?agent_id=${encodeURIComponent(agentId)}`)
+            .then(response => (response.ok ? response.json() : null))
             .then(payload => {
             if (!cancelled) {
                 // In the chat's shape: the route says `available`, the menu and
                 // the opening pick read `isAvailable`, and an unmapped row passes
                 // for usable. See `readServerCatalogue`.
-                setCatalogModels(readServerCatalogue(payload));
+                // A runtime that did not answer offers nothing: the agentspecs
+                // catalogue is not its answer.
+                setCatalogModels(payload ? readServerCatalogue(payload) : []);
+                setDecisions(payload ? readServerDecisions(payload) : undefined);
             }
         })
             // No catalogue is not an error worth a banner: the menu simply has
             // nothing to offer, and the agent answers on whatever it was given.
-            .catch(() => undefined);
+            .catch(() => {
+            if (!cancelled) {
+                setCatalogModels([]);
+            }
+        });
         return () => {
             cancelled = true;
         };
-    }, [agentServerUrl, inPage]);
+    }, [agentServerUrl, agentId, inPage]);
     /*
      * What to offer when the server has no catalogue of its own.
      *
@@ -1168,16 +1195,14 @@ export default function ChatView({ workspace }) {
      * with nothing in it is a control that opens onto an empty list — so the
      * agentspecs catalogue stands in, filtered to the models marked available.
      */
-    const offeredModels = useMemo(() => catalogModels.length > 0
-        ? catalogModels
-        : Object.values(AI_MODEL_CATALOGUE)
-            // A typed-judgment model answers typed questions, not a chat.
-            .filter(model => model.available && isChatModel(model))
-            .map(model => ({
-            id: model.id,
-            name: model.name,
-            provider: model.provider,
-        })), [catalogModels]);
+    const offeredModels = useMemo(() => offeredModelsFor(catalogModels, () => Object.values(AI_MODEL_CATALOGUE)
+        // A typed-decision model answers typed questions, not a chat.
+        .filter(model => model.available && isChatModel(model))
+        .map(model => ({
+        id: model.id,
+        name: model.name,
+        provider: model.provider,
+    }))), [catalogModels]);
     /*
      * The tools the agent can call, from both sides.
      *
@@ -1313,6 +1338,7 @@ export default function ChatView({ workspace }) {
         agentUsage: contextUsage ?? undefined,
         showModelSelector: true,
         models: offeredModels,
+        decisions,
         selectedModel: activeModel,
         onModelSelect: model => void selectModel(model),
         showToolsMenu: true,

package/lib/loop/plugins/chat/turnState.d.ts

@@ -15,8 +15,11 @@ import type { ChatTurnSnapshot, ChatTurnStatus } from '../../core';
 export type TurnFeed = {
     /** The turn, for readers. */
     turn: ReadonlySignal<ChatTurnSnapshot>;
-    /** A new turn: the previous one is gone, this one holds the message. */
-    begin: (user: string) => void;
+    /**
+     * A new turn: the previous one is gone, this one holds the message, and
+     * the conversation it went to, when the chat knows it.
+     */
+    begin: (user: string, thread?: string) => void;
     /** The reply so far. Moves the turn to `streaming` on its first text. */
     assistant: (text: string) => void;
     /** The agent stopped, one way or another. */

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

@@ -19,13 +19,14 @@ export function createTurnFeed() {
     const turn = signal(IDLE);
     return {
         turn,
-        begin: user => {
+        begin: (user, thread) => {
             // The window's fill carries over: it is the conversation's, not the
             // turn's, and the footer under a fresh turn should not read empty
             // until the agent reports again.
             turn.value = {
                 id: turn.value.id + 1,
                 user,
+                ...(thread ? { thread } : {}),
                 status: 'thinking',
                 usage: turn.value.usage,
             };

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

@@ -0,0 +1,31 @@
+/**
+ * The split: the conversation and the work side by side, one hairline
+ * between them that a person drags (LOOP T-07, an Appspec's `layout: split`).
+ *
+ * The page layout's other arrangement. Where `page` puts the work on a sheet
+ * and the conversation in a panel that opens when wanted, `split` keeps both
+ * on screen: the conversation on the left — its transcript with the composer
+ * under it — and the work on the right, the way the reference screens show a
+ * mail, a document or the agent's computer beside the chat.
+ *
+ * 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.
+ *
+ * @module loop/plugins/page-layout/SplitLayout
+ */
+import type { JSX } from 'react';
+import type { ChatLayoutParts } from '../../core';
+/** The conversation's share of the width when the split opens. */
+export declare const SPLIT_DEFAULT_SHARE = 0.4;
+/** The narrowest and widest the conversation may be made. */
+export declare const SPLIT_MIN_SHARE = 0.2;
+export declare const SPLIT_MAX_SHARE = 0.8;
+/** How far an arrow key moves the hairline. */
+export declare const SPLIT_KEY_STEP = 0.05;
+/** A share, held within the bounds. */
+export declare function clampSplitShare(share: number): number;
+/** Where a key moves the hairline, or `null` for a key it ignores. */
+export declare function splitShareForKey(share: number, key: string): number | null;
+export declare function SplitLayout({ editors, hasEditor, transcript, prompt, chips, picker, transient, }: ChatLayoutParts): JSX.Element;
+export default SplitLayout;

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

@@ -0,0 +1,129 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from 'react';
+import { Box } from '@datalayer/primer-addons';
+/** 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. */
+export const SPLIT_MIN_SHARE = 0.2;
+export const SPLIT_MAX_SHARE = 0.8;
+/** How far an arrow key moves the hairline. */
+export const SPLIT_KEY_STEP = 0.05;
+/** A share, held within the bounds. */
+export function clampSplitShare(share) {
+    if (!Number.isFinite(share)) {
+        return SPLIT_DEFAULT_SHARE;
+    }
+    return Math.min(SPLIT_MAX_SHARE, Math.max(SPLIT_MIN_SHARE, share));
+}
+/** Where a key moves the hairline, or `null` for a key it ignores. */
+export function splitShareForKey(share, key) {
+    switch (key) {
+        case 'ArrowLeft':
+            return clampSplitShare(share - SPLIT_KEY_STEP);
+        case 'ArrowRight':
+            return clampSplitShare(share + SPLIT_KEY_STEP);
+        case 'Home':
+            return SPLIT_MIN_SHARE;
+        case 'End':
+            return SPLIT_MAX_SHARE;
+        default:
+            return null;
+    }
+}
+export function SplitLayout({ editors, hasEditor, transcript, prompt, chips, picker, transient, }) {
+    const [share, setShare] = useState(SPLIT_DEFAULT_SHARE);
+    const row = useRef(null);
+    const dragging = useRef(false);
+    const shareAt = useCallback((clientX) => {
+        const box = row.current?.getBoundingClientRect();
+        if (!box || box.width <= 0) {
+            return null;
+        }
+        return clampSplitShare((clientX - box.left) / box.width);
+    }, []);
+    const onPointerDown = (event) => {
+        dragging.current = true;
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        event.preventDefault();
+    };
+    const onPointerMove = (event) => {
+        if (!dragging.current) {
+            return;
+        }
+        const next = shareAt(event.clientX);
+        if (next !== null) {
+            setShare(next);
+        }
+    };
+    const onPointerUp = (event) => {
+        dragging.current = false;
+        event.currentTarget.releasePointerCapture?.(event.pointerId);
+    };
+    const onKeyDown = (event) => {
+        const next = splitShareForKey(share, event.key);
+        if (next !== null) {
+            event.preventDefault();
+            setShare(next);
+        }
+    };
+    const percent = Math.round(share * 100);
+    return (_jsxs(Box, { "data-testid": "loop-split-layout", sx: {
+            flex: '1 1 auto',
+            minHeight: 0,
+            display: 'flex',
+            flexDirection: 'column',
+        }, children: [picker, _jsxs(Box, { ref: row, sx: {
+                    flex: '1 1 auto',
+                    minHeight: 0,
+                    display: 'flex',
+                    // The hidden editors position themselves against this row.
+                    position: 'relative',
+                    overflow: 'hidden',
+                }, children: [_jsxs(Box, { "data-testid": "loop-split-conversation", sx: {
+                            flex: hasEditor ? `0 0 ${percent}%` : '1 1 auto',
+                            minWidth: 0,
+                            minHeight: 0,
+                            display: 'flex',
+                            flexDirection: 'column',
+                            // The transcript draws a rule on its left when an editor is on
+                            // screen, for the split it sits on the right of. Here it is on
+                            // the left, and the hairline is the separator: the rule is
+                            // pushed out of the row, which clips it.
+                            ml: hasEditor ? '-1px' : 0,
+                        }, children: [transcript, chips, prompt] }), hasEditor ? (_jsx(Box, { role: "separator", "aria-orientation": "vertical", "aria-label": "Resize the conversation and the page", "aria-valuemin": Math.round(SPLIT_MIN_SHARE * 100), "aria-valuemax": Math.round(SPLIT_MAX_SHARE * 100), "aria-valuenow": percent, tabIndex: 0, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, onKeyDown: onKeyDown, sx: {
+                            // A hairline to the eye, a few pixels to the pointer.
+                            flex: '0 0 7px',
+                            mx: '-3px',
+                            zIndex: 1,
+                            cursor: 'col-resize',
+                            touchAction: 'none',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            outline: 'none',
+                            '&::before': {
+                                content: '""',
+                                width: '1px',
+                                height: '100%',
+                                bg: 'border.default',
+                            },
+                            '&:hover::before, &:focus-visible::before': {
+                                width: '3px',
+                                bg: 'accent.emphasis',
+                            },
+                        } })) : null, _jsx(Box, { "data-testid": "loop-split-page", sx: hasEditor
+                            ? {
+                                flex: '1 1 0',
+                                minWidth: 0,
+                                minHeight: 0,
+                                display: 'flex',
+                            }
+                            : // Mounted but out of sight: the editors keep their place.
+                                {
+                                    position: 'absolute',
+                                    inset: 0,
+                                    visibility: 'hidden',
+                                    pointerEvents: 'none',
+                                    zIndex: -1,
+                                }, children: editors })] }), transient] }));
+}
+export default SplitLayout;

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

@@ -3,10 +3,23 @@ import type { ChatViewMode } from '../../../types/chat';
 import { type TurnPanelFooter } from './TurnPanel';
 export { pageLayoutPanelOpen, pageLayoutSheet, openPagePanel as openConversationPanel, } from '@datalayer/primer-addons/lib/reactor';
 export type { TurnPanelFooter } from './TurnPanel';
+export { SplitLayout, SPLIT_DEFAULT_SHARE, SPLIT_KEY_STEP, SPLIT_MAX_SHARE, SPLIT_MIN_SHARE, clampSplitShare, splitShareForKey, } from './SplitLayout';
 export type { PageSize, PageSizeFormat, } from '@datalayer/primer-addons/lib/reactor';
 export declare const LOOP_PAGE_LAYOUT_PLUGIN_NAME = "@datalayer/loop-plugin-page-layout";
 /** What a host may set on the page layout. */
 export type LoopPageLayoutConfig = {
+    /**
+     * How the parts are arranged.
+     *
+     * `page` (the default): the work on a centred sheet, the composer over
+     * it, the conversation in a panel that opens when wanted. `split`: the
+     * conversation and the work side by side, the conversation on the left
+     * with the composer under it, one hairline between them that a person
+     * drags (`SplitLayout`) — an Appspec's `layout: split`. The split keeps
+     * the conversation on screen, so it has no turn panel, no conversation
+     * toggle and no display modes; the other settings are the page's.
+     */
+    arrangement?: 'page' | 'split';
     /**
      * Where the turn panel hangs on the composer.
      *

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

@@ -6,12 +6,14 @@ import { PageLayout, PagePanelToggle, openPagePanel, } from '@datalayer/primer-a
 import { ChatViewModeToggle } from '../../../chat/header/ChatViewModeToggle';
 import { LoopChatLayout, LoopChatTurn, LoopPromptPanel, LoopSlots, } from '../../core';
 import { TurnPanel } from './TurnPanel';
+import { SplitLayout } from './SplitLayout';
 /*
  * The layout's state is primer-addons', re-exported under the names the
  * Loop always had: a host that opened the conversation panel by calling
  * `openConversationPanel()` keeps doing so.
  */
 export { pageLayoutPanelOpen, pageLayoutSheet, openPagePanel as openConversationPanel, } from '@datalayer/primer-addons/lib/reactor';
+export { SplitLayout, SPLIT_DEFAULT_SHARE, SPLIT_KEY_STEP, SPLIT_MAX_SHARE, SPLIT_MIN_SHARE, clampSplitShare, splitShareForKey, } from './SplitLayout';
 export const LOOP_PAGE_LAYOUT_PLUGIN_NAME = '@datalayer/loop-plugin-page-layout';
 /* A signal to read when no chat contributed a turn: the hook needs one. */
 const NO_TURN = signal({ id: 0, status: 'idle' });
@@ -91,6 +93,7 @@ function ConversationToggle() {
 export const LoopPageLayoutPlugin = definePlugin({
     name: LOOP_PAGE_LAYOUT_PLUGIN_NAME,
     config: {
+        arrangement: 'page',
         turnPanel: 'below',
         turnPanelFooter: 'full',
         prompt: 'docked',
@@ -98,10 +101,16 @@ export const LoopPageLayoutPlugin = definePlugin({
         pageSize: undefined,
     },
     displayName: 'Page layout',
-    description: 'The editor — or, in the chat view, the conversation — on a centred sheet, the prompt docked above it at the same width or floating over it as a draggable card, the current turn under the prompt, the conversation in a side panel.',
+    description: 'The editor — or, in the chat view, the conversation — on a centred sheet, the prompt docked above it at the same width or floating over it as a draggable card, the current turn under the prompt, the conversation in a side panel; or, split, the conversation and the work side by side with a hairline to drag.',
     octicon: 'file',
     emoji: '\u{1F4C4}',
     build: ({ config, ...ctx }) => {
+        if (config.arrangement === 'split') {
+            // The conversation is on screen: the composer docked under it, and
+            // nothing that stands in for a transcript out of sight.
+            ctx.contribute(LoopChatLayout, { id: 'split-layout', prompt: 'docked', Component: SplitLayout }, { id: 'split-layout' });
+            return { components: [] };
+        }
         /*
           The layout, contributed per build because the composer's stance is
           configuration: `docked-top` means the layout owns the composer's width

package/lib/loop/presets.d.ts

@@ -34,6 +34,11 @@ export type LoopPresetOptions = {
      * A surface id rather than a fixed union, because the surfaces are
      * contributed: an editor plugin the preset has never heard of is still a
      * valid answer, and `'none'` is how a host asks for the chat alone.
+     *
+     * The notebook when unsaid, and none when `editors` is off. Said with
+     * `editors` off, it is honoured: the surface of a plugin the host mounts —
+     * an application's page — opens beside the chat without the notebook and
+     * the document.
      */
     defaultEditor?: ChatPluginConfig['defaultSurface'];
     /** Whether the chat offers its surface switcher. */
@@ -82,6 +87,13 @@ export type LoopPresetOptions = {
      * `LoopChatLayout` point.
      */
     pageLayout?: boolean;
+    /**
+     * How the page layout arranges the parts: `page` (the default), the work
+     * on a sheet with the conversation in a panel; or `split`, the
+     * conversation and the work side by side with a hairline to drag. Only
+     * read with `pageLayout`.
+     */
+    pageLayoutArrangement?: 'page' | 'split';
     /**
      * Where the page layout hangs the current turn on the composer: `below`
      * (the default), `above`, or `none`. Only read with `pageLayout`.