@datalayer/agent-runtimes 1.0.28 → 1.3.10

package/lib/loop/plugins/shell/useEditorPreviews.js

@@ -0,0 +1,217 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState, useSyncExternalStore } from 'react';
+import { Box, Text } from '@primer/react';
+import { getEditorChoice, subscribeEditorChoice } from './editorChoice';
+let jupyterReact = null;
+function loadJupyterReact() {
+    return jupyterReact
+        ? Promise.resolve(jupyterReact)
+        : import('@datalayer/jupyter-react').then(module => {
+            jupyterReact = module;
+            return module;
+        });
+}
+const PREVIEW_LENGTH = 56;
+function stripped(source) {
+    const line = source.split('\n').find(entry => entry.trim()) ?? '';
+    const trimmed = line.trim();
+    return trimmed.length > PREVIEW_LENGTH
+        ? `${trimmed.slice(0, PREVIEW_LENGTH - 1)}…`
+        : trimmed || '(empty)';
+}
+/** The card's body: one row per cell or block. */
+function PreviewList({ title, rows, }) {
+    return (_jsxs(Box, { children: [_jsx(Text, { sx: { fontWeight: 'semibold', display: 'block', mb: 1 }, children: title }), rows.length === 0 ? (_jsx(Text, { sx: { color: 'fg.muted' }, children: "Empty so far." })) : (rows.map((row, index) => (_jsxs(Box, { sx: { display: 'flex', gap: 2, py: '2px', alignItems: 'baseline' }, children: [_jsxs(Text, { sx: { color: 'fg.muted', flexShrink: 0, fontFamily: 'mono' }, children: [index, " \u00B7 ", row.kind] }), _jsx(Text, { sx: {
+                            fontFamily: 'mono',
+                            whiteSpace: 'nowrap',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                        }, children: row.text })] }, index))))] }));
+}
+/** The editors currently on offer, from the choice store — reactive. */
+function useOfferedEditors() {
+    return useSyncExternalStore(subscribeEditorChoice, () => getEditorChoice().options);
+}
+/** The live notebook rows for a surface id, followed through model signals. */
+function useNotebookRows(surfaceId, enabled) {
+    const [tick, setTick] = useState(0);
+    useEffect(() => {
+        if (!enabled) {
+            return undefined;
+        }
+        let cancelled = false;
+        const bump = () => setTick(value => value + 1);
+        const cleanups = [];
+        // Whether the module was already here when this run began: only its
+        // first arrival is news worth a re-render. Bumping on every resolution
+        // would re-run this tick-dependent effect forever.
+        const hadModule = jupyterReact !== null;
+        // The module first (cached after the first mount), then the store says
+        // when the notebook arrives and the model says when it changes. All
+        // guarded: the test environment mocks the store away.
+        void loadJupyterReact().then(({ notebookStore }) => {
+            if (cancelled) {
+                return;
+            }
+            try {
+                const unsubscribe = notebookStore.subscribe?.(bump);
+                if (unsubscribe) {
+                    cleanups.push(unsubscribe);
+                }
+                const model = notebookStore
+                    .getState()
+                    ?.notebooks?.get(surfaceId)?.model;
+                if (model) {
+                    const signals = [
+                        model
+                            .contentChanged,
+                        model.cells?.changed,
+                    ];
+                    for (const signal of signals) {
+                        if (signal?.connect) {
+                            signal.connect(bump);
+                            cleanups.push(() => signal.disconnect(bump));
+                        }
+                    }
+                }
+                // The first arrival is itself news: the memo below could not read
+                // the store before the module existed.
+                if (!hadModule) {
+                    bump();
+                }
+            }
+            catch {
+                // No live store here (tests, SSR): the selector shows no badge.
+            }
+        });
+        return () => {
+            cancelled = true;
+            for (const cleanup of cleanups) {
+                try {
+                    cleanup();
+                }
+                catch {
+                    /* a disposed model refuses disconnects; nothing to do */
+                }
+            }
+        };
+        // Reconnected on every bump: a bump may have brought the model with it,
+        // and re-attaching two listeners is cheaper than being clever about it.
+    }, [enabled, surfaceId, tick]);
+    return useMemo(() => {
+        if (!enabled) {
+            return null;
+        }
+        const model = safeModel(surfaceId);
+        if (!model) {
+            return null;
+        }
+        const rows = [];
+        const cells = model.cells;
+        for (let index = 0; index < cells.length; index += 1) {
+            const cell = cells.get(index);
+            rows.push({
+                kind: cell.type,
+                text: stripped(cell.sharedModel.getSource()),
+            });
+        }
+        return rows;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [enabled, surfaceId, tick]);
+}
+function safeModel(surfaceId) {
+    try {
+        return (jupyterReact?.notebookStore.getState()?.notebooks?.get(surfaceId)
+            ?.model ?? null);
+    }
+    catch {
+        return null;
+    }
+}
+/** The document's brief blocks, refreshed when the lexical store changes. */
+function useDocumentRows(surfaceId, enabled) {
+    const [rows, setRows] = useState(null);
+    useEffect(() => {
+        if (!enabled) {
+            setRows(null);
+            return undefined;
+        }
+        let cancelled = false;
+        let unsubscribe;
+        let pending = false;
+        // Lazily, and only because a document is actually on offer: this hook
+        // must not be the import that pulls lexical into every bundle. The
+        // Prism setup loads first, in the same chain — jupyter-lexical pulls
+        // `@lexical/code`, whose language components read the bare global
+        // `Prism` the instant they evaluate, and whichever dynamic import wins
+        // the race decides whether the global exists yet.
+        void import('@datalayer/jupyter-react/lib/css/PrismCss')
+            .then(() => import('@datalayer/jupyter-lexical'))
+            .then(({ lexicalStore }) => {
+            if (cancelled) {
+                return;
+            }
+            const refresh = () => {
+                if (pending) {
+                    return;
+                }
+                pending = true;
+                void lexicalStore
+                    .getState()
+                    .readAllBlocks(surfaceId, 'brief')
+                    .then(blocks => {
+                    pending = false;
+                    if (cancelled || !Array.isArray(blocks)) {
+                        return;
+                    }
+                    setRows(blocks.map(block => ({
+                        kind: block.block_type ?? 'block',
+                        text: stripped(block.preview ?? ''),
+                    })));
+                })
+                    .catch(() => {
+                    pending = false;
+                    // No adapter yet: the document has not mounted. No badge, no lie.
+                    if (!cancelled) {
+                        setRows(null);
+                    }
+                });
+            };
+            refresh();
+            unsubscribe = lexicalStore.subscribe(refresh);
+        });
+        return () => {
+            cancelled = true;
+            unsubscribe?.();
+        };
+    }, [enabled, surfaceId]);
+    return rows;
+}
+/**
+ * Live previews for the editor selector, keyed by surface id.
+ *
+ * Only the editors actually on offer are read — the store subscriptions and
+ * the lexical import cost nothing in a workspace without them.
+ */
+export function useEditorPreviews(surfaceId) {
+    const offered = useOfferedEditors();
+    const notebookRows = useNotebookRows(surfaceId, offered.includes('notebook'));
+    const documentRows = useDocumentRows(surfaceId, offered.includes('document'));
+    return useMemo(() => {
+        const previews = {};
+        if (notebookRows) {
+            previews.notebook = {
+                badge: String(notebookRows.length),
+                details: _jsx(PreviewList, { title: "Cells", rows: notebookRows }),
+            };
+        }
+        if (documentRows) {
+            previews.document = {
+                badge: String(documentRows.length),
+                details: _jsx(PreviewList, { title: "Blocks", rows: documentRows }),
+            };
+        }
+        return previews;
+    }, [notebookRows, documentRows]);
+}
+export default useEditorPreviews;

package/lib/loop/plugins/subagent-activity/SubagentPulse.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The pulse: a delegated agent's icon, fading in and out in the prompt's
+ * header band for as long as that agent is working.
+ *
+ * Read from the agent runtime store, which both the server's monitoring
+ * stream and the in-page loop fill with the same events — so the pulse does
+ * not care where the delegation runs. The icon is the member's own when the
+ * name is a team member's, and the generic agent mark otherwise; the tooltip
+ * says who it is.
+ *
+ * @module loop/plugins/subagent-activity/SubagentPulse
+ */
+import type { JSX } from 'react';
+export declare const PULSE_ANIMATION = "loop-subagent-pulse";
+export declare function SubagentPulse(): JSX.Element | null;
+export default SubagentPulse;

package/lib/loop/plugins/subagent-activity/SubagentPulse.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { useOptionalReactorPlatform } from '@datalayer/reactor/react';
+import { useAgentRuntimeActiveSubagentToolCallId, useAgentRuntimeSubagentActivity, } from '../../../stores';
+import { agentIcon } from '../agents/agentIcons';
+import { AGENTS_PLUGIN_NAME } from '../agents/plugin';
+export const PULSE_ANIMATION = 'loop-subagent-pulse';
+const KEYFRAMES = `@keyframes ${PULSE_ANIMATION} {
+  0%, 100% { opacity: 0.25; }
+  50% { opacity: 1; }
+}`;
+export function SubagentPulse() {
+    const activeKey = useAgentRuntimeActiveSubagentToolCallId();
+    const events = useAgentRuntimeSubagentActivity(activeKey ?? undefined);
+    // Optional: the pulse may be drawn where no reactor runs, and then it
+    // simply has no team to look the icon up in.
+    const reactor = useOptionalReactorPlatform();
+    const name = events[0]?.subagentName ?? activeKey ?? '';
+    const member = reactor
+        ?.getOutput(AGENTS_PLUGIN_NAME)
+        ?.team?.members.find(entry => entry.name === name);
+    const Icon = agentIcon(member?.icon);
+    if (!activeKey) {
+        return null;
+    }
+    const overA2A = events.some(event => event.transport === 'a2a');
+    const label = overA2A
+        ? `${name} is working over A2A…`
+        : `${name} is working…`;
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: KEYFRAMES }), _jsx(Tooltip, { text: label, direction: "n", children: _jsx(Box, { as: "button", type: "button", "aria-label": label, "data-subagent-pulse": name, sx: {
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        width: 28,
+                        height: 28,
+                        p: 0,
+                        border: 0,
+                        bg: 'transparent',
+                        color: 'accent.fg',
+                        cursor: 'default',
+                        animation: `${PULSE_ANIMATION} 1.4s ease-in-out infinite`,
+                    }, children: _jsx(Icon, { size: 16 }) }) })] }));
+}
+export default SubagentPulse;

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

@@ -0,0 +1,12 @@
+import { SubagentPulse } from './SubagentPulse';
+export declare const SUBAGENT_ACTIVITY_PLUGIN_NAME = "@datalayer/loop-plugin-subagent-activity";
+export declare const SubagentActivityPlugin: import("@datalayer/reactor").ReactorPlugin<Record<string, never>, unknown, {
+    components: {
+        id: string;
+        slot: "loop.inpromptMenu";
+        order: number;
+        Component: typeof SubagentPulse;
+    }[];
+}>;
+export { SubagentPulse } from './SubagentPulse';
+export default SubagentActivityPlugin;

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

@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * `@datalayer/loop-plugin-subagent-activity` — a delegation, visible.
+ *
+ * While an agent has handed work to a subagent, that subagent's icon pulses
+ * in the composer's own header — the band inside the prompt box, above the
+ * text — where a person is looking while they wait. Without it a delegation
+ * was a pause: the parent went quiet, and whether anything was happening
+ * showed only in a side panel a host may not draw.
+ *
+ * @module loop/plugins/subagent-activity
+ */
+import { definePlugin } from '@datalayer/reactor';
+import { LoopSlots } from '../../core';
+import { InputPromptPlugin } from '../input-prompt';
+import { SubagentPulse } from './SubagentPulse';
+export const SUBAGENT_ACTIVITY_PLUGIN_NAME = '@datalayer/loop-plugin-subagent-activity';
+export const SubagentActivityPlugin = definePlugin({
+    name: SUBAGENT_ACTIVITY_PLUGIN_NAME,
+    displayName: 'Subagent activity',
+    description: "A delegated agent's icon, pulsing in the prompt's header while it works.",
+    octicon: 'people',
+    emoji: '\u{1F465}',
+    // The band it pulses in is the composer's: no composer, nowhere to be.
+    dependencies: [InputPromptPlugin],
+    build: () => ({
+        components: [
+            {
+                id: 'subagent-pulse',
+                slot: LoopSlots.inpromptMenu,
+                // In the prompt's header band, beside the agent chip.
+                order: 0,
+                Component: SubagentPulse,
+            },
+        ],
+    }),
+});
+export { SubagentPulse } from './SubagentPulse';
+export default SubagentActivityPlugin;

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

@@ -0,0 +1,46 @@
+/**
+ * The mould the view plugins are cast from.
+ *
+ * A view plugin — chat, notebook, document — puts one icon in the composer's
+ * footer that switches the workspace to its view. The icon lives *in the
+ * prompt* because that is where the writing hand already is: changing what
+ * stands beside the conversation should not mean leaving it. Each plugin
+ * therefore **requires** the input-prompt plugin — an icon with no footer to
+ * sit in is a control that does not exist — and the reactor mounts the
+ * composer with it and takes both down together.
+ *
+ * The icon knows its own standing: the active view's icon shows in the
+ * accent colour, and an editor's icon withdraws entirely while its editor is
+ * not on offer (no notebook plugin, no notebook button). The chat's icon is
+ * always there — the conversation is the view that remains.
+ *
+ * @module loop/plugins/view-switch
+ */
+import type { ComponentType, JSX } from 'react';
+export type ViewPluginOptions = {
+    /** Short slug: `chat`, `notebook`, … names the plugin `…-<key>-view`. */
+    key: string;
+    /** The editor surface the icon switches to; `NONE_EDITOR` for the chat. */
+    viewId: string;
+    displayName: string;
+    description: string;
+    /** The footer icon, with its tooltip text. */
+    icon: ComponentType<{
+        size?: number;
+    }>;
+    tooltip: string;
+    /** Registry icon name. */
+    octicon?: string;
+    emoji?: string;
+    /** Where the icon stands among its siblings in the footer. */
+    order: number;
+};
+export declare function defineViewPlugin(options: ViewPluginOptions): import("@datalayer/reactor").ReactorPlugin<Record<string, never>, unknown, {
+    components: {
+        id: string;
+        slot: "loop.promptAction";
+        order: number;
+        Component: () => JSX.Element | null;
+    }[];
+}>;
+export default defineViewPlugin;

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

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSyncExternalStore } from 'react';
+import { IconButton } from '@primer/react';
+import { definePlugin } from '@datalayer/reactor';
+import { useContributions } from '@datalayer/reactor/react';
+import { LoopEditorView, LoopSlots } from '../../core';
+import { NONE_EDITOR, chooseEditor, getEditorChoice, subscribeEditorChoice, } from '../shell/editorChoice';
+import { InputPromptPlugin } from '../input-prompt';
+/** One footer icon: switches to its view, shows when the view is real. */
+function makeViewSwitchAction({ viewId, icon, tooltip, }) {
+    return function ViewSwitchAction() {
+        /*
+         * Field by field, never the wrapper: `getEditorChoice()` builds a fresh
+         * object per call, and `useSyncExternalStore` re-renders whenever the
+         * snapshot's identity changes — a fresh object every check is an
+         * infinite loop. The id is a string and the options array keeps its
+         * reference between changes, so these two are stable snapshots.
+         */
+        const editorId = useSyncExternalStore(subscribeEditorChoice, () => getEditorChoice().editorId);
+        /*
+         * From the contributions, not the choice store's `options`: the store's
+         * list is published by the header selector's render, and a workspace
+         * that mounts no selector would leave it empty with every editor
+         * standing. The point is the source of truth about what exists.
+         */
+        const editors = useContributions(LoopEditorView);
+        // An editor's icon withdraws while its editor is not contributed: a
+        // button that switches to nothing is the trap the fail-loud rules exist
+        // to prevent. The chat has no such condition to fail.
+        if (viewId !== NONE_EDITOR &&
+            !editors.some(entry => entry.value.surfaceId === viewId)) {
+            return null;
+        }
+        const selected = (editorId || NONE_EDITOR) === viewId;
+        return (_jsx(IconButton, { icon: icon, "aria-label": tooltip, size: "small", variant: "invisible", onClick: () => {
+                if (!chooseEditor(viewId)) {
+                    console.warn(`[loop] No chat is on screen to switch to '${viewId}'.`);
+                }
+            }, sx: selected ? { color: 'accent.fg' } : undefined }));
+    };
+}
+export function defineViewPlugin(options) {
+    const { key, viewId, displayName, description, icon, tooltip, order } = options;
+    const Component = makeViewSwitchAction({ viewId, icon, tooltip });
+    return definePlugin({
+        name: `@datalayer/loop-plugin-${key}-view`,
+        displayName,
+        description,
+        octicon: options.octicon ?? 'eye',
+        emoji: options.emoji,
+        // The footer the icon sits in is the input-prompt plugin's: a view
+        // plugin without it would be a control with nowhere to exist, so this is
+        // a hard dependency — the composer mounts with it, and disabling the
+        // composer takes the view icons down too.
+        dependencies: [InputPromptPlugin],
+        build: () => ({
+            components: [
+                {
+                    id: `${key}-view-action`,
+                    slot: LoopSlots.promptAction,
+                    order,
+                    Component,
+                },
+            ],
+        }),
+    });
+}
+export default defineViewPlugin;

package/lib/loop/plugins/window-frame/WindowFrame.d.ts

@@ -0,0 +1,48 @@
+/**
+ * A window around the workspace.
+ *
+ * Chrome that says "this is an application" without imitating a particular
+ * one: a rounded, shadowed card with a title bar carrying window controls on
+ * the leading edge, a name, and whatever the host offers on the trailing edge.
+ *
+ * It exists so that a page embedding Loop does not have to draw one. The
+ * landing page had this markup, which is the wrong side of the boundary for it
+ * to live on — a change to how Loop presents itself would have had to be made
+ * in a repository that only renders it.
+ *
+ * Both edges are reactor slots, so what goes in them is contributed rather
+ * than passed down: a plugin adds a control without the frame knowing what it
+ * is, and without the host that mounted the frame having to forward it.
+ *
+ * @module loop/plugins/window-frame/WindowFrame
+ */
+import type { ReactNode } from 'react';
+export type WindowFrameProps = {
+    /** What the window contains — the workspace, normally. */
+    children: ReactNode;
+    /**
+     * What the window is called, shown in the title bar.
+     *
+     * Optional: a host that names the workspace on the line above it has no use
+     * for a second label, but a window bar is where a window's name goes, so the
+     * space stays for one that does.
+     */
+    title?: ReactNode;
+    /**
+     * How tall the body stands. Any CSS length.
+     *
+     * The host's call rather than the frame's: how much of the page Loop should
+     * take is a question about the page.
+     *
+     * Omitted, the frame fills whatever it was given and the body takes what the
+     * title bar leaves. That is the right answer for a full-page host, and it
+     * avoids the alternative — subtracting the bar's height in a `calc` on the
+     * host's side, which is a number that silently goes wrong the first time the
+     * bar gains a row.
+     */
+    height?: string | number;
+    /** Anything the slots' components should receive. */
+    slotProps?: Record<string, unknown>;
+};
+export declare function WindowFrame({ children, title, height, slotProps, }: WindowFrameProps): React.JSX.Element;
+export default WindowFrame;

package/lib/loop/plugins/window-frame/WindowFrame.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@datalayer/primer-addons';
+import { ReactorSlot, useOptionalSlotComponents, } from '@datalayer/reactor/react';
+import { WINDOW_ACTIONS_SLOT, WINDOW_CONTROLS_SLOT } from './slots';
+export function WindowFrame({ children, title, height, slotProps = {}, }) {
+    /*
+     * Asked rather than assumed, so the trailing group is not an empty flex box
+     * taking a gap's worth of space in a bar that is mostly title.
+     *
+     * The tolerant read, because the frame is *outside* the workspace it frames:
+     * a host composes `<WindowFrame>` around whatever builds the reactor, so on
+     * the first render there is no platform at all. The bar draws without its
+     * actions and fills them in when the workspace registers one.
+     */
+    const actions = useOptionalSlotComponents(WINDOW_ACTIONS_SLOT);
+    return (_jsxs(Box, { sx: {
+            position: 'relative',
+            // Filling is the default: with no height given the frame takes the
+            // space it was handed and the body gets the remainder.
+            ...(height === undefined
+                ? { height: '100%', display: 'flex', flexDirection: 'column' }
+                : null),
+            borderRadius: '14px',
+            overflow: 'hidden',
+            border: '1px solid',
+            borderColor: 'border.default',
+            bg: 'canvas.default',
+            // Lifted off the field, so the workspace reads as a thing sitting on
+            // the page rather than a hole cut into it.
+            boxShadow: '0 24px 60px -28px rgba(0, 0, 0, 0.55)',
+        }, children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 2,
+                    px: 3,
+                    py: 2,
+                    borderBottom: '1px solid',
+                    borderColor: 'border.default',
+                    bg: 'canvas.subtle',
+                    // The bar may be the page's first line of type as well as its
+                    // chrome, so it takes a second row on a narrow screen rather than
+                    // shedding its actions off the edge.
+                    flexWrap: 'wrap',
+                    rowGap: 2,
+                    // Never squeezed by the body beside it.
+                    flex: '0 0 auto',
+                }, children: [_jsx(Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '6px',
+                            mr: 1,
+                            flexShrink: 0,
+                        }, children: _jsx(ReactorSlot, { slot: WINDOW_CONTROLS_SLOT, props: slotProps }) }), _jsx(Box, { sx: { minWidth: 0, flex: '1 1 auto' }, children: title }), actions.length > 0 ? (_jsx(Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 2,
+                            flexShrink: 0,
+                            ml: 'auto',
+                        }, children: _jsx(ReactorSlot, { slot: WINDOW_ACTIONS_SLOT, props: slotProps }) })) : null] }), _jsx(Box, { sx: height === undefined
+                    ? { flex: '1 1 auto', minHeight: 0 }
+                    : { height, minHeight: 0 }, children: children })] }));
+}
+export default WindowFrame;

package/lib/loop/plugins/window-frame/index.d.ts

@@ -0,0 +1,6 @@
+import type { ReactorReactOutput } from '@datalayer/reactor/react';
+export { WindowFrame, type WindowFrameProps } from './WindowFrame';
+export { WINDOW_ACTIONS_SLOT, WINDOW_CONTROLS_SLOT } from './slots';
+export declare const WINDOW_FRAME_PLUGIN_NAME = "@datalayer/loop-plugin-window-frame";
+export declare const WindowFramePlugin: import("@datalayer/reactor").ReactorPlugin<Record<string, never>, unknown, ReactorReactOutput>;
+export default WindowFramePlugin;

package/lib/loop/plugins/window-frame/index.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * `@datalayer/loop-plugin-window-frame` — Loop in a window.
+ *
+ * The frame a page puts around an embedded Loop, and the two slots that make
+ * its title bar extensible. The plugin itself contributes only the window
+ * controls; everything else in the bar is somebody's contribution.
+ *
+ * Why a plugin and not just a component: the point of the frame is the slots,
+ * and a slot is only useful if something can be contributed to it without the
+ * host forwarding it. A page adds a button by mounting a plugin, exactly as it
+ * would add anything else to the workspace — and a plugin that ships a control
+ * takes the control with it when it is switched off.
+ *
+ * The frame is composed rather than injected: a plugin cannot wrap the shell,
+ * so the host renders `<WindowFrame>` around whatever it is framing. That is
+ * the one thing the host still does, and it is the one thing only the host
+ * knows — how much of its page to give away.
+ *
+ * ```tsx
+ * const reactor = buildLoopReactor([...loopPlugins(), WindowFramePlugin]);
+ *
+ * <WindowFrame title="Loop" height="60vh">
+ *   <LoopWorkspace reactor={reactor} … />
+ * </WindowFrame>
+ * ```
+ *
+ * @module loop/plugins/window-frame
+ */
+import { definePlugin } from '@datalayer/reactor';
+import { Box } from '@datalayer/primer-addons';
+import { LoopSlots } from '../../core';
+import { WorkspaceFullScreenAction } from '../../shell/WorkspaceFullScreenAction';
+import { WINDOW_CONTROLS_SLOT } from './slots';
+export { WindowFrame } from './WindowFrame';
+export { WINDOW_ACTIONS_SLOT, WINDOW_CONTROLS_SLOT } from './slots';
+export const WINDOW_FRAME_PLUGIN_NAME = '@datalayer/loop-plugin-window-frame';
+/**
+ * The three dots.
+ *
+ * They say "this is an application" without imitating a particular one, which
+ * is why they are dots and not a close button that closes nothing. Contributed
+ * rather than drawn into the frame so a host with its own idea of window
+ * controls can switch this plugin off and fill the slot itself.
+ */
+function WindowControls() {
+    return (_jsx(_Fragment, { children: ['danger.emphasis', 'attention.emphasis', 'success.emphasis'].map(token => (_jsx(Box, { sx: { width: 10, height: 10, borderRadius: '50%', bg: token } }, token))) }));
+}
+export const WindowFramePlugin = definePlugin({
+    name: WINDOW_FRAME_PLUGIN_NAME,
+    displayName: 'Window frame',
+    description: 'Draws Loop as a window, and opens its title bar to controls and actions.',
+    octicon: 'browser',
+    emoji: '\u{1FA9F}',
+    build: () => ({
+        components: [
+            {
+                id: 'window-controls',
+                slot: WINDOW_CONTROLS_SLOT,
+                Component: WindowControls,
+            },
+            // Full screen is window chrome, so the window plugin is where it comes
+            // from: the workspace header gains the same control the chat header
+            // carries, which is what keeps it reachable for a shell that hides the
+            // chat's chrome. Registered after the editor selector, so it sits on
+            // the far trailing edge of the row.
+            {
+                id: 'full-screen',
+                slot: LoopSlots.header,
+                Component: WorkspaceFullScreenAction,
+            },
+        ],
+    }),
+});
+export default WindowFramePlugin;