@datalayer/agent-runtimes 1.0.29 → 1.3.10

package/lib/loop/plugins/notebook/openingNotebook.d.ts

@@ -0,0 +1,72 @@
+/**
+ * What is already in the notebook when the workspace opens.
+ *
+ * A cell with a result in it, rather than an empty one.
+ *
+ * The empty cell was honest and useless. A visitor arriving at a page whose
+ * argument is "an agent works in a real notebook" met a blank editor and an
+ * agent with nothing to talk about — so the first thing they had to do, before
+ * seeing anything, was think of a task. Worse, every opener the agent offers
+ * refers to *this notebook*: "analyze this dataset", "find anomalies in this
+ * notebook". Against an empty document those are questions with no answer.
+ *
+ * So the notebook opens on a small analysis that has already run. The reader
+ * sees code, a table of numbers under it, and an agent beside it that can be
+ * asked about them — which is the entire product in one screen, with nothing
+ * required of them first.
+ *
+ * Three things it has to be, and they pull against each other:
+ *
+ * - **Real.** The output is what this code actually prints. Nobody is going to
+ *   check, and that is exactly why it matters: a fabricated output in a
+ *   product demonstration is a lie told to somebody deciding whether to trust
+ *   the product.
+ * - **Small.** It is read in the corner of a landing page, at whatever height
+ *   is left after the chrome. One cell, six rows out.
+ * - **Worth asking about.** The frame is deliberately unfinished — regional
+ *   revenue with an obvious gap in it — so that "find the anomalies" and "plot
+ *   revenue by region" have somewhere to land.
+ *
+ * The execution count is `1` and the outputs are populated, so the notebook
+ * reads as a session somebody already started. It is not connected to the
+ * kernel that will run the next cell; the moment anyone runs anything, real
+ * output replaces this.
+ *
+ * @module loop/plugins/notebook/openingNotebook
+ */
+import type { INotebookContent } from '@jupyterlab/nbformat';
+/**
+ * The frame the opening cell builds, rendered as pandas prints it.
+ *
+ * Written out rather than computed, and taken from a real run rather than
+ * typed: the column alignment is pandas' own, and eyeballing it produces
+ * something that looks approximately right and is wrong in every column. A
+ * fabricated output in a product demonstration is a lie told to somebody
+ * deciding whether to trust the product.
+ */
+/** As pandas prints the frame. Shared with the opening document, which shows the same result. */
+export declare const OPENING_FRAME_REPR = "  region quarter  revenue\n0  North      Q1   182400\n1  North      Q2   196750\n2  South      Q1   141200\n3  South      Q2    18900\n4   West      Q1   203100\n5   West      Q2   211480";
+/**
+ * The code of the opening cell, as nbformat wants it: one string per line.
+ *
+ * Exported because two things need it and they must not drift. The notebook
+ * below shows it as a cell that has already run — execution count `1`, output
+ * present — and the workspace runs the same text on the sandbox as soon as one
+ * is ready, so that the claim the cell makes is true of the kernel behind it.
+ *
+ * Without the second half the notebook is a picture of a session rather than
+ * one: `sales` is on screen and undefined, and the first thing the agent does
+ * with it raises `NameError` in front of the visitor.
+ */
+export declare const OPENING_SOURCE: string[];
+/** The same code as one string, for a sandbox that takes source rather than cells. */
+export declare function openingCode(): string;
+/**
+ * The notebook a LOOP workspace opens on.
+ *
+ * Exported as a factory rather than a constant: `EphemeralNotebook` keeps the
+ * object it is first given and edits it in place, so two workspaces sharing one
+ * literal would share one document.
+ */
+export declare function openingNotebook(): INotebookContent;
+export default openingNotebook;

package/lib/loop/plugins/notebook/openingNotebook.js

@@ -0,0 +1,90 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * The frame the opening cell builds, rendered as pandas prints it.
+ *
+ * Written out rather than computed, and taken from a real run rather than
+ * typed: the column alignment is pandas' own, and eyeballing it produces
+ * something that looks approximately right and is wrong in every column. A
+ * fabricated output in a product demonstration is a lie told to somebody
+ * deciding whether to trust the product.
+ */
+/** As pandas prints the frame. Shared with the opening document, which shows the same result. */
+export const OPENING_FRAME_REPR = `  region quarter  revenue
+0  North      Q1   182400
+1  North      Q2   196750
+2  South      Q1   141200
+3  South      Q2    18900
+4   West      Q1   203100
+5   West      Q2   211480`;
+/**
+ * The code of the opening cell, as nbformat wants it: one string per line.
+ *
+ * Exported because two things need it and they must not drift. The notebook
+ * below shows it as a cell that has already run — execution count `1`, output
+ * present — and the workspace runs the same text on the sandbox as soon as one
+ * is ready, so that the claim the cell makes is true of the kernel behind it.
+ *
+ * Without the second half the notebook is a picture of a session rather than
+ * one: `sales` is on screen and undefined, and the first thing the agent does
+ * with it raises `NameError` in front of the visitor.
+ */
+export const OPENING_SOURCE = [
+    'import pandas as pd\n',
+    '\n',
+    '# Quarterly revenue by region.\n',
+    'sales = pd.DataFrame(\n',
+    '    {\n',
+    '        "region": ["North", "North", "South", "South", "West", "West"],\n',
+    '        "quarter": ["Q1", "Q2", "Q1", "Q2", "Q1", "Q2"],\n',
+    '        "revenue": [182400, 196750, 141200, 18900, 203100, 211480],\n',
+    '    }\n',
+    ')\n',
+    '\n',
+    'sales',
+];
+/** The same code as one string, for a sandbox that takes source rather than cells. */
+export function openingCode() {
+    return OPENING_SOURCE.join('');
+}
+/**
+ * The notebook a LOOP workspace opens on.
+ *
+ * Exported as a factory rather than a constant: `EphemeralNotebook` keeps the
+ * object it is first given and edits it in place, so two workspaces sharing one
+ * literal would share one document.
+ */
+export function openingNotebook() {
+    return {
+        cells: [
+            {
+                cell_type: 'code',
+                id: 'opening-analysis',
+                metadata: {},
+                execution_count: 1,
+                source: OPENING_SOURCE,
+                outputs: [
+                    {
+                        output_type: 'execute_result',
+                        execution_count: 1,
+                        data: { 'text/plain': [OPENING_FRAME_REPR] },
+                        metadata: {},
+                    },
+                ],
+            },
+        ],
+        metadata: {
+            kernelspec: {
+                display_name: 'Python 3',
+                language: 'python',
+                name: 'python3',
+            },
+            language_info: { name: 'python' },
+        },
+        nbformat: 4,
+        nbformat_minor: 5,
+    };
+}
+export default openingNotebook;

package/lib/loop/plugins/notebook-toolbar/index.d.ts

@@ -0,0 +1,4 @@
+import { NOTEBOOK_TOOLBAR_PLUGIN_NAME } from './names';
+export { NOTEBOOK_TOOLBAR_PLUGIN_NAME };
+export declare const NotebookToolbarPlugin: import("@datalayer/reactor").LazyPluginRef;
+export default NotebookToolbarPlugin;

package/lib/loop/plugins/notebook-toolbar/index.js

@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * `@datalayer/loop-plugin-notebook-toolbar` — the notebook's own toolbar items.
+ *
+ * A plugin of its own rather than part of the notebook editor, because the
+ * toolbar is where several parties meet. The editor offers a point and draws
+ * whatever is contributed to it; this plugin provides the bar itself and puts
+ * the notebook's own furniture on it — a light saying what the notebook is
+ * running on — and opens a second point for everyone else, which is where the
+ * chat's agent actions arrive.
+ *
+ * Switch this off and the notebook has **no toolbar at all**, not an empty
+ * one, and the chat's buttons go with it: they had nowhere to sit. The
+ * notebook itself keeps working, which is the point of the split.
+ *
+ * Lazy, and waiting on the toolbar point rather than on startup. Nothing has to
+ * name it: the notebook renders its toolbar, that read fires the point's
+ * activation event, and the module arrives. A workspace where nobody opens a
+ * notebook never fetches it at all — which is the whole reason its manifest
+ * lives here and its code does not.
+ *
+ * @module loop/plugins/notebook-toolbar
+ */
+import { defineLazyPlugin, onContributionPoint } from '@datalayer/reactor';
+import { LoopNotebookToolbar, LoopNotebookToolbarItem } from '../../core';
+import { NOTEBOOK_TOOLBAR_PLUGIN_NAME } from './names';
+export { NOTEBOOK_TOOLBAR_PLUGIN_NAME };
+export const NotebookToolbarPlugin = defineLazyPlugin({
+    name: NOTEBOOK_TOOLBAR_PLUGIN_NAME,
+    displayName: 'Notebook toolbar',
+    description: 'Shows what the notebook is running on, on its toolbar.',
+    octicon: 'circle',
+    emoji: '\u{1F7E2}',
+    activationEvents: [onContributionPoint(LoopNotebookToolbar)],
+    // The bar is what accepts buttons, so the plugin that owns the bar is the
+    // one that opens the point. Declared here rather than inside the module, so
+    // the graph shows the point — and the chat's contributions to it — before
+    // this plugin's code has been fetched.
+    contributionPoints: [LoopNotebookToolbarItem],
+    load: () => import('./plugin'),
+});
+export default NotebookToolbarPlugin;

package/lib/loop/plugins/notebook-toolbar/items.d.ts

@@ -0,0 +1,10 @@
+import type { ToolbarItem } from '@datalayer/primer-addons';
+/**
+ * The standard notebook toolbar items.
+ *
+ * Pushed to the trailing edge by a spacer, because the indicator reports
+ * rather than acts: the buttons are what a person reaches for, and a status
+ * light sitting among them reads like one more thing to press.
+ */
+export declare function notebookToolbarItems(notebookId: string): ToolbarItem[];
+export default notebookToolbarItems;

package/lib/loop/plugins/notebook-toolbar/items.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { KernelIndicator, NOTEBOOK_TOOLBAR_ITEM_ORDERS, useNotebookStore, } from '@datalayer/jupyter-react';
+/** Trailing edge of the toolbar: past the last item the notebook contributes. */
+const KERNEL_INDICATOR_ORDER = NOTEBOOK_TOOLBAR_ITEM_ORDERS.cellType + 100;
+/**
+ * The kernel indicator for one notebook.
+ *
+ * A component rather than a value captured when the item was built, because a
+ * notebook gets its kernel *after* its toolbar first renders — the adapter is
+ * registered, then the kernel is attached, then it connects. Reading the store
+ * from inside the render means each of those steps reaches the indicator; a
+ * kernel captured at build time would stay `null` and the light would sit at
+ * an unknown state forever.
+ */
+function NotebookKernelIndicator({ notebookId, }) {
+    const notebookStore = useNotebookStore();
+    const kernel = notebookStore.selectNotebookAdapter(notebookId)?.kernel ?? null;
+    return (_jsx(KernelIndicator, { kernel: kernel, 
+        // Borderless: the toolbar already draws the frame around it.
+        bordered: false }));
+}
+/**
+ * The standard notebook toolbar items.
+ *
+ * Pushed to the trailing edge by a spacer, because the indicator reports
+ * rather than acts: the buttons are what a person reaches for, and a status
+ * light sitting among them reads like one more thing to press.
+ */
+export function notebookToolbarItems(notebookId) {
+    return [
+        {
+            key: 'loop-kernel-indicator-spacer',
+            type: 'spacer',
+            order: KERNEL_INDICATOR_ORDER - 1,
+        },
+        {
+            key: 'loop-kernel-indicator',
+            type: 'custom',
+            order: KERNEL_INDICATOR_ORDER,
+            group: 'kernel',
+            render: () => _jsx(NotebookKernelIndicator, { notebookId: notebookId }),
+        },
+    ];
+}
+export default notebookToolbarItems;

package/lib/loop/plugins/notebook-toolbar/names.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The plugin's name, on its own.
+ *
+ * Imported by both the manifest and the module it loads, and by hosts that
+ * want to name the plugin without pulling either in.
+ *
+ * @module loop/plugins/notebook-toolbar/names
+ */
+export declare const NOTEBOOK_TOOLBAR_PLUGIN_NAME = "@datalayer/loop-plugin-notebook-toolbar";

package/lib/loop/plugins/notebook-toolbar/names.js

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * The plugin's name, on its own.
+ *
+ * Imported by both the manifest and the module it loads, and by hosts that
+ * want to name the plugin without pulling either in.
+ *
+ * @module loop/plugins/notebook-toolbar/names
+ */
+export const NOTEBOOK_TOOLBAR_PLUGIN_NAME = '@datalayer/loop-plugin-notebook-toolbar';

package/lib/loop/plugins/notebook-toolbar/plugin.d.ts

@@ -0,0 +1,2 @@
+export declare const NotebookToolbarPlugin: import("@datalayer/reactor").ReactorPlugin<Record<string, never>, unknown, unknown>;
+export default NotebookToolbarPlugin;

package/lib/loop/plugins/notebook-toolbar/plugin.js

@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * The notebook toolbar plugin's module — everything behind its manifest.
+ *
+ * Separate from the entry point so that `@datalayer/jupyter-react`, which the
+ * kernel indicator reaches for, is fetched when a notebook toolbar is first
+ * read rather than with the shell.
+ *
+ * @module loop/plugins/notebook-toolbar/plugin
+ */
+import { contribution, definePlugin } from '@datalayer/reactor';
+import { LoopNotebookToolbar } from '../../core';
+import { notebookToolbarItems } from './items';
+import { NOTEBOOK_TOOLBAR_PLUGIN_NAME } from './names';
+export const NotebookToolbarPlugin = definePlugin({
+    name: NOTEBOOK_TOOLBAR_PLUGIN_NAME,
+    contributes: [
+        contribution(LoopNotebookToolbar, { items: ({ editorId }) => notebookToolbarItems(editorId) }, { id: 'toolbar', order: 100 }),
+    ],
+});
+export default NotebookToolbarPlugin;

package/lib/loop/plugins/notebook-view/index.d.ts

@@ -0,0 +1,10 @@
+export declare const NOTEBOOK_VIEW_PLUGIN_NAME = "@datalayer/loop-plugin-notebook-view";
+export declare const NotebookViewPlugin: import("@datalayer/reactor").ReactorPlugin<Record<string, never>, unknown, {
+    components: {
+        id: string;
+        slot: "loop.promptAction";
+        order: number;
+        Component: () => import("react").JSX.Element | null;
+    }[];
+}>;
+export default NotebookViewPlugin;

package/lib/loop/plugins/notebook-view/index.js

@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * `@datalayer/loop-plugin-notebook-view` — the notebook, one click away.
+ *
+ * The footer icon that opens the notebook beside the conversation. It shows
+ * only while a notebook is actually contributed, and requires the
+ * input-prompt plugin, whose footer the icon sits in.
+ *
+ * @module loop/plugins/notebook-view
+ */
+// The same icon the notebook's own editor view declares, so the footer
+// button and the selector entry read as one thing.
+import { RowsIcon } from '@primer/octicons-react';
+import { defineViewPlugin } from '../view-switch';
+export const NOTEBOOK_VIEW_PLUGIN_NAME = '@datalayer/loop-plugin-notebook-view';
+export const NotebookViewPlugin = defineViewPlugin({
+    key: 'notebook',
+    viewId: 'notebook',
+    displayName: 'Notebook view',
+    description: 'The notebook beside the chat, from the composer footer.',
+    icon: RowsIcon,
+    tooltip: 'Show the notebook',
+    octicon: 'rows',
+    emoji: '\u{1F4D3}',
+    order: 11,
+});
+export default NotebookViewPlugin;

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

@@ -0,0 +1,25 @@
+/**
+ * The turn panel: the current turn, hung on the composer.
+ *
+ * On the page layout the transcript is a side panel that starts closed, so
+ * without this a person who asks something sees cells appear and no word from
+ * whoever is writing them. This shows the turn where the eye already is: the
+ * message just sent, then the reply as it streams — and, while a tool runs,
+ * what the agent is doing in the page ("Analyst is adding a cell…") — in the
+ * prompt's own card. Under it, by configuration, the transcript's turn footer,
+ * only its copy and dismiss actions, or nothing. A new message replaces it
+ * all: the turn feed is the last turn only, and that is the panel's contract.
+ *
+ * The reply is rendered as the transcript renders it — the same markdown
+ * pipeline, a size down — so a table or a list reads as one here too. What
+ * the panel is not is a second transcript: one turn, compact, and the whole
+ * conversation one click away.
+ *
+ * @module loop/plugins/page-layout/TurnPanel
+ */
+import type { JSX } from 'react';
+export type TurnPanelFooter = 'full' | 'actions' | 'none';
+export declare function TurnPanel({ footer, }: {
+    footer?: TurnPanelFooter;
+}): JSX.Element | null;
+export default TurnPanel;

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

@@ -0,0 +1,126 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Box, IconButton, Text } from '@primer/react';
+import { CheckIcon, CommentDiscussionIcon, CopyIcon, XIcon, } from '@primer/octicons-react';
+import { useContributions, useSignalValue } from '@datalayer/reactor/react';
+import { signal } from '@datalayer/reactor';
+import { TurnFooter } from '../../../chat/messages/TurnFooter';
+import { LoopChatTurn } from '../../core';
+import { Streamdown } from 'streamdown';
+import { streamdownMarkdownStyles } from '../../../chat/styles/streamdownStyles';
+import { normalizeAssistantMarkdown } from '../../../chat/messages/assistantMarkdown';
+import { openPagePanel, pageLayoutSheet, } from '@datalayer/primer-addons/lib/reactor';
+/* A signal to read when no chat contributed a turn: the hook needs one. */
+const NO_TURN = signal({ id: 0, status: 'idle' });
+/** How much of the reply the panel shows before it scrolls. */
+const MAX_HEIGHT = 168;
+/** The three dots, while the agent has said nothing yet. */
+function Thinking() {
+    return (_jsxs(Box, { as: "span", "aria-label": "The agent is thinking", sx: {
+            display: 'inline-flex',
+            gap: '4px',
+            alignItems: 'center',
+            height: '1.5em',
+            '& > i': {
+                width: 5,
+                height: 5,
+                borderRadius: '50%',
+                bg: 'fg.muted',
+                animation: 'loop-turn-dot 1.2s ease-in-out infinite',
+            },
+            '& > i:nth-of-type(2)': { animationDelay: '0.15s' },
+            '& > i:nth-of-type(3)': { animationDelay: '0.3s' },
+            '@keyframes loop-turn-dot': {
+                '0%, 80%, 100%': { opacity: 0.25 },
+                '40%': { opacity: 1 },
+            },
+        }, children: [_jsx("i", {}), _jsx("i", {}), _jsx("i", {})] }));
+}
+export function TurnPanel({ footer = 'full', }) {
+    const entries = useContributions(LoopChatTurn);
+    const turn = useSignalValue(entries[0]?.value.turn ?? NO_TURN);
+    const sheet = useSignalValue(pageLayoutSheet);
+    const replyRef = useRef(null);
+    /*
+     * Dismissed, per turn: the panel goes away until the next message — the
+     * transcript keeps the turn, one click away. Keyed on the turn's id so a
+     * new turn shows again unasked.
+     */
+    const [dismissedId, setDismissedId] = useState(null);
+    const [copied, setCopied] = useState(false);
+    // Follow the reply as it grows: the newest words are the ones wanted.
+    useEffect(() => {
+        const el = replyRef.current;
+        if (el) {
+            el.scrollTop = el.scrollHeight;
+        }
+    }, [turn.assistant]);
+    useEffect(() => {
+        if (!copied) {
+            return;
+        }
+        const timer = window.setTimeout(() => setCopied(false), 1400);
+        return () => window.clearTimeout(timer);
+    }, [copied]);
+    const copyTurn = useCallback(async () => {
+        const text = [turn.user, turn.assistant].filter(Boolean).join('\n\n');
+        await navigator.clipboard?.writeText(text);
+        setCopied(true);
+    }, [turn.user, turn.assistant]);
+    // With the transcript on the sheet, the turn is already on the page.
+    if (sheet === 'panel' ||
+        turn.status === 'idle' ||
+        !turn.user ||
+        dismissedId === turn.id) {
+        return null;
+    }
+    const working = turn.status === 'thinking' || turn.status === 'streaming';
+    return (_jsxs(Box, { "data-turn-panel": "", sx: {
+            borderTop: '1px solid',
+            borderColor: 'border.muted',
+            px: 3,
+            pt: 2,
+            pb: footer === 'none' ? 2 : 1,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 2,
+            bg: 'canvas.default',
+        }, children: [_jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-end' }, children: _jsx(Text, { sx: {
+                        fontSize: 0,
+                        lineHeight: 1.45,
+                        px: 2,
+                        py: 1,
+                        borderRadius: '10px',
+                        bg: 'accent.subtle',
+                        color: 'fg.default',
+                        maxWidth: '85%',
+                        overflow: 'hidden',
+                        display: '-webkit-box',
+                        WebkitLineClamp: 2,
+                        WebkitBoxOrient: 'vertical',
+                    }, children: turn.user }) }), _jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'flex-start' }, children: [_jsx(Box, { ref: replyRef, sx: {
+                            flex: '1 1 auto',
+                            minWidth: 0,
+                            maxHeight: MAX_HEIGHT,
+                            overflowY: 'auto',
+                            fontSize: 0,
+                            lineHeight: 1.5,
+                            color: turn.assistant ? 'fg.default' : 'fg.muted',
+                            // Rendered markdown brings its own flow; the plain fallbacks
+                            // below keep their line breaks.
+                            whiteSpace: turn.assistant ? 'normal' : 'pre-wrap',
+                            overflowWrap: 'anywhere',
+                        }, children: turn.assistant ? (_jsx(Box, { sx: { ...streamdownMarkdownStyles, fontSize: 0 }, children: _jsx(Streamdown, { children: normalizeAssistantMarkdown(turn.assistant) }) })) : turn.activity ? (_jsx(Text, { sx: { color: 'fg.muted', fontStyle: 'italic' }, children: turn.activity })) : working ? (_jsx(Thinking, {})) : turn.status === 'error' ? ('The agent could not answer.') : ('Done — the result is in the page.') }), _jsx(IconButton, { icon: CommentDiscussionIcon, size: "small", variant: "invisible", "aria-label": "Open the conversation", onClick: openPagePanel, sx: { color: 'fg.muted', flexShrink: 0 } })] }), turn.assistant && turn.activity ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontStyle: 'italic' }, children: turn.activity })) : null, footer === 'full' ? (
+            // The same footer the transcript draws under a turn: the window's
+            // fill, this turn's tokens in and out, copy, and dismiss.
+            _jsx(TurnFooter, { usage: turn.usage, live: working, latest: true, padding: 0, onCopy: copyTurn, onRemove: () => setDismissedId(turn.id) })) : footer === 'actions' ? (
+            // The actions without the counters, for a host whose readers are not
+            // asking about tokens.
+            _jsxs(Box, { sx: {
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                    gap: 1,
+                    mt: -1,
+                }, children: [_jsx(IconButton, { icon: copied ? CheckIcon : CopyIcon, size: "small", variant: "invisible", "aria-label": copied ? 'Copied' : 'Copy this turn', onClick: () => void copyTurn(), sx: { color: 'fg.muted' } }), _jsx(IconButton, { icon: XIcon, size: "small", variant: "invisible", "aria-label": "Dismiss until the next turn", onClick: () => setDismissedId(turn.id), sx: { color: 'fg.muted' } })] })) : null] }));
+}
+export default TurnPanel;

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

@@ -0,0 +1,35 @@
+import { type TurnPanelFooter } from './TurnPanel';
+export { pageLayoutPanelOpen, pageLayoutSheet, openPagePanel as openConversationPanel, } from '@datalayer/primer-addons/lib/reactor';
+export type { TurnPanelFooter } from './TurnPanel';
+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 = {
+    /**
+     * Where the turn panel hangs on the composer.
+     *
+     * `below` (the default): under the composer, where a reply reads as the
+     * answer to what was just typed above it. `above`: over it, for a host
+     * whose composer sits at the bottom of the page and wants the reply to
+     * rise. `none`: no panel — the conversation is the side panel only.
+     */
+    turnPanel: 'below' | 'above' | 'none';
+    /**
+     * How the composer stands over the page.
+     *
+     * `docked` (the default): in a band above the canvas, at the sheet's own
+     * width, so the prompt and the page read as one column. `floating`: a
+     * draggable card anchored to the top of the canvas, hovering over a strip
+     * kept clear for it — the document application's title bar, movable.
+     */
+    prompt: 'docked' | 'floating';
+    /**
+     * What the turn panel draws under the reply.
+     *
+     * `full` (the default): the transcript's turn footer — the window's fill,
+     * this turn's tokens, copy, dismiss. `actions`: copy and dismiss only, for
+     * a host whose readers are not asking about tokens. `none`: nothing.
+     */
+    turnPanelFooter: TurnPanelFooter;
+};
+export declare const LoopPageLayoutPlugin: import("@datalayer/reactor").ReactorPlugin<LoopPageLayoutConfig, unknown, unknown>;
+export default LoopPageLayoutPlugin;

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

@@ -0,0 +1,80 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CommentDiscussionIcon } from '@primer/octicons-react';
+import { definePlugin, signal } from '@datalayer/reactor';
+import { useContributions, useSignalValue } from '@datalayer/reactor/react';
+import { PageLayout, PagePanelToggle, } from '@datalayer/primer-addons/lib/reactor';
+import { LoopChatLayout, LoopChatTurn, LoopPromptPanel, LoopSlots, } from '../../core';
+import { TurnPanel } from './TurnPanel';
+/*
+ * 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 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' });
+/**
+ * The chat view's parts on the page layout.
+ *
+ * The editors are the page, the transcript the panel, the composer the band;
+ * what the agent is doing — the turn's `activity` — is the line at the top
+ * of the sheet, so the change is seen where it happens.
+ */
+function LoopPageLayout({ parts, promptMode, }) {
+    const turnEntries = useContributions(LoopChatTurn);
+    const turn = useSignalValue(turnEntries[0]?.value.turn ?? NO_TURN);
+    return (_jsx(PageLayout, { page: parts.editors, hasPage: parts.hasEditor, panel: parts.transcript, band: parts.prompt, chips: parts.chips, picker: parts.picker, transient: parts.transient, activity: turn.activity, bandMode: promptMode }));
+}
+/** The header button that opens and closes the conversation panel. */
+function ConversationToggle() {
+    return (_jsx(PagePanelToggle, { panelName: "conversation", icon: CommentDiscussionIcon, sx: { order: 2 } }));
+}
+export const LoopPageLayoutPlugin = definePlugin({
+    name: LOOP_PAGE_LAYOUT_PLUGIN_NAME,
+    config: { turnPanel: 'below', turnPanelFooter: 'full', prompt: 'docked' },
+    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.',
+    octicon: 'file',
+    emoji: '\u{1F4C4}',
+    build: ({ config, ...ctx }) => {
+        /*
+          The layout, contributed per build because the composer's stance is
+          configuration: `docked-top` means the layout owns the composer's width
+          — `PageLayout` gives it a mount point the width of the sheet, so the
+          prompt and the page read as one column; `floating-top` is the draggable
+          card, sized by itself, over a strip of canvas kept clear for it. The
+          component closes over the choice once, per build.
+        */
+        const promptMode = config.prompt;
+        const ConfiguredLayout = (parts) => (_jsx(LoopPageLayout, { parts: parts, promptMode: promptMode }));
+        ctx.contribute(LoopChatLayout, {
+            id: 'page-layout',
+            prompt: promptMode === 'floating' ? 'floating-top' : 'docked-top',
+            Component: ConfiguredLayout,
+        }, { id: 'page-layout' });
+        // The turn panel is configuration-dependent, so it is contributed here
+        // rather than statically: which side, what footer, or not at all. The
+        // component closes over the footer choice once, per build.
+        if (config.turnPanel !== 'none') {
+            const footer = config.turnPanelFooter;
+            const ConfiguredTurnPanel = () => (_jsx(TurnPanel, { footer: footer }));
+            ctx.contribute(LoopPromptPanel, {
+                id: 'page-layout-turn',
+                placement: config.turnPanel,
+                order: 0,
+                Component: ConfiguredTurnPanel,
+            }, { id: 'page-layout-turn' });
+        }
+        return {
+            components: [
+                {
+                    id: 'page-layout-conversation-toggle',
+                    slot: LoopSlots.header,
+                    Component: ConversationToggle,
+                },
+            ],
+        };
+    },
+});
+export default LoopPageLayoutPlugin;

package/lib/loop/plugins/plugins-panel/index.d.ts

@@ -0,0 +1,14 @@
+import type { ReactorReactOutput } from '@datalayer/reactor/react';
+export declare const PLUGINS_PANEL_PLUGIN_NAME = "@datalayer/loop-plugin-plugins-panel";
+/**
+ * How wide the panel is, and the aside around it.
+ *
+ * Declared here rather than in the shell so the two cannot disagree: the panel
+ * truncates its descriptions to the width it was given, and truncating to a
+ * width the container does not actually have is how text ends up cut short in
+ * the middle of empty space.
+ */
+export declare const SIDEBAR_WIDTH = 420;
+export declare const PluginsPanelPlugin: import("@datalayer/reactor").ReactorPlugin<Record<string, never>, unknown, ReactorReactOutput>;
+export { PluginsManagerView as PluginsPanel } from '@datalayer/reactor-manager';
+export default PluginsPanelPlugin;