@datalayer/agent-runtimes 1.0.28 → 1.3.10

package/lib/loop/plugins/agents/AnonymousKeyBadge.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The trial clock, in the chat's own header.
+ *
+ * Contributed by this plugin rather than drawn by the chat, for the same
+ * reason the sandbox selector is: only the plugin that owns where the agent
+ * runs can say whether the visitor's key is being spent at all. On a
+ * server-backed agent it is not — that runtime holds credentials of its own
+ * and never saw the key — so a countdown there would be a clock on nothing.
+ *
+ * It reads the shared session and never starts one. The chat is what mints the
+ * key, because the chat is what sends it; a header badge that could mint one
+ * would start the visitor's minute the moment the workspace painted, whether
+ * or not they ever asked the agent anything.
+ *
+ * @module loop/plugins/agents/AnonymousKeyBadge
+ */
+import type { JSX } from 'react';
+import type { LoopWorkspaceContext } from '../../core';
+/**
+ * The same badge, dressed for the workspace header's trailing cluster.
+ *
+ * Flex `order` rather than registration order: the agents plugin registers
+ * before the editor selector, so in document order the badge sat on the
+ * *leading* side of the selector's `marginLeft: 'auto'`. `1` puts it past
+ * that margin, right beside the full-screen icon (which says `2`) — the
+ * clock reads as chrome about the session, and the trailing corner is where
+ * that lives.
+ */
+export declare function AnonymousKeyHeaderBadge({ workspace, }: {
+    workspace: LoopWorkspaceContext;
+}): JSX.Element;
+export declare function AnonymousKeyBadge({ workspace, }: {
+    workspace: LoopWorkspaceContext;
+}): JSX.Element | null;
+export default AnonymousKeyBadge;

package/lib/loop/plugins/agents/AnonymousKeyBadge.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from '@primer/react';
+/* Both by file rather than through their barrels. The barrels reach the
+   sign-in form and the whole in-page harness, and a plugin that only draws a
+   countdown should not put either in the graph of every host that mounts
+   it. */
+import { AnonymousKeyTimer } from '@datalayer/core/lib/components/anonymous/AnonymousKeyTimer';
+import { useAnonymousSession, useAnonymousSessionStore, } from '../../../runtimes/browser/anonymousToken';
+import { targetRunsAgentInPage } from './switchable';
+/**
+ * The same badge, dressed for the workspace header's trailing cluster.
+ *
+ * Flex `order` rather than registration order: the agents plugin registers
+ * before the editor selector, so in document order the badge sat on the
+ * *leading* side of the selector's `marginLeft: 'auto'`. `1` puts it past
+ * that margin, right beside the full-screen icon (which says `2`) — the
+ * clock reads as chrome about the session, and the trailing corner is where
+ * that lives.
+ */
+export function AnonymousKeyHeaderBadge({ workspace, }) {
+    return (_jsx(Box, { sx: { order: 1, display: 'inline-flex', alignItems: 'center' }, children: _jsx(AnonymousKeyBadge, { workspace: workspace }) }));
+}
+export function AnonymousKeyBadge({ workspace, }) {
+    const session = useAnonymousSession();
+    const target = workspace.sandbox.target ?? 'local';
+    // Not this agent's business. A runtime authenticates itself, and whether
+    // some other part of the page holds a trial key is not something this
+    // conversation should be reporting.
+    if (!targetRunsAgentInPage(target)) {
+        return null;
+    }
+    /*
+     * Nothing to show at either end.
+     *
+     * `idle` is a signed-in member, who is on no clock at all; `expired` is
+     * covered by the panel that takes over the conversation, which says
+     * considerably more than a spent ring would.
+     */
+    if (session.status === 'idle' || session.status === 'expired') {
+        return null;
+    }
+    // Before a key lands there is no clock to draw yet — only which way it went.
+    if (!session.expiresAt) {
+        return (_jsx(Text, { sx: { fontSize: 0, color: session.error ? 'danger.fg' : 'fg.muted' }, title: session.error, children: session.error ? 'No trial key' : 'Getting a trial key…' }));
+    }
+    return (_jsx(AnonymousKeyTimer, { expiresAt: session.expiresAt, grantedMs: session.grantedMs, 
+        // The countdown recomputes from the wall clock, so it notices the moment
+        // has passed even where the store's own timer was throttled — a
+        // backgrounded tab, a laptop that slept. Whichever gets there first
+        // wins; the second call is a no-op.
+        onExpire: () => useAnonymousSessionStore.getState().expire() }));
+}
+export default AnonymousKeyBadge;

package/lib/loop/plugins/agents/DatalayerAgentBridge.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The Datalayer target: a real agent, launched from a spec.
+ *
+ * It used to be a *sandbox* setting. Choosing Datalayer told the host's own
+ * agent-runtimes server to run its sandbox on a Datalayer runtime, which gave
+ * a Jupyter server in the cloud and an agent still running locally. That is a
+ * different thing from what the target says it is, and it showed: a person
+ * picked Datalayer and stayed on whatever agent the host had.
+ *
+ * So this target goes through the agent hook instead — the same one every
+ * example uses — and asks for an agentspec by name. The platform allocates a
+ * runtime, creates the agent on it from the spec, and hands back both halves:
+ * the Jupyter ingress the notebook binds to, and the agent-runtimes base URL
+ * the chat talks to. Both are reported into the sandbox service, because that
+ * is where every surface already reads from.
+ *
+ * A component rather than part of the switchable service, because launching is
+ * a hook and a service is not a React thing. It renders nothing.
+ *
+ * @module loop/plugins/agents/DatalayerAgentBridge
+ */
+import type { JSX } from 'react';
+export declare function DatalayerAgentBridge(): JSX.Element | null;
+export default DatalayerAgentBridge;

package/lib/loop/plugins/agents/DatalayerAgentBridge.js

@@ -0,0 +1,102 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useEffect, useMemo } from 'react';
+import { useReactorPlatform, useSignalValue } from '@datalayer/reactor/react';
+import { useAgentRuntimes } from '../../../hooks/useAgentRuntimes';
+import { AGENTSPECS } from '../../../specs/agents/agents';
+import { IDLE_SANDBOX_TARGET_SIGNAL } from '../../core';
+import { AGENTS_PLUGIN_NAME } from './plugin';
+import { useOptionalSandboxService } from './useSandboxService';
+/**
+ * The tutor.
+ *
+ * The front door of the notebook team, and the agent a person landing on a
+ * Datalayer runtime should meet first. A host that wants another names it in
+ * this plugin's config.
+ */
+const DEFAULT_DATALAYER_AGENTSPEC = 'jupyter-tutor';
+export function DatalayerAgentBridge() {
+    const reactor = useReactorPlatform();
+    const agentSpecId = reactor.getConfig(AGENTS_PLUGIN_NAME)?.datalayerAgentSpecId ??
+        DEFAULT_DATALAYER_AGENTSPEC;
+    const service = useOptionalSandboxService();
+    const target = useSignalValue(service?.target ?? IDLE_SANDBOX_TARGET_SIGNAL);
+    const onDatalayer = target === 'datalayer';
+    /*
+     * The agent hook, asked for a spec.
+     *
+     * `autoStart` only while Datalayer is the target: mounting this bridge must
+     * not allocate a cloud runtime for somebody working in their browser, and a
+     * runtime allocated by accident is one somebody pays for.
+     */
+    /*
+     * The spec, restated as the config the agent is created from.
+     *
+     * `agentSpecId` as a hook option says which runtime to allocate. Creating
+     * the agent on it reads `agentConfig`, and that is a different object —
+     * which this passed nothing for, so the create refused with "Agent model is
+     * required. Provide config.model from the selected spec/config." The
+     * failure surfaced as `connected-dead` because nothing else about it
+     * reached the page.
+     *
+     * The Notebook Agent example does not hit this: it builds a config with the
+     * spec id in it and hands that over. Same thing, said in the place the
+     * creation actually looks.
+     */
+    const agentConfig = useMemo(() => ({
+        name: agentSpecId,
+        agentSpecId,
+        model: AGENTSPECS[agentSpecId]?.model,
+        description: AGENTSPECS[agentSpecId]?.description,
+    }), [agentSpecId]);
+    const { runtime, status, error } = useAgentRuntimes({
+        agentSpecId,
+        agentConfig,
+        variant: 'cloud-pydanticai',
+        autoStart: onDatalayer,
+        autoCreateAgent: onDatalayer,
+    });
+    useEffect(() => {
+        if (!service || !onDatalayer) {
+            return;
+        }
+        if (error) {
+            // The reason travels with the state. "connected-dead" and a column of
+            // "unknown" is what a reader saw before, which names the symptom and
+            // hides the cause.
+            // `error` is already a message from the hook; `String()` on it would
+            // only matter if it were not, and would print `[object Object]` if so.
+            service.setState('error', error);
+            return;
+        }
+        if (!runtime?.jupyterBaseUrl) {
+            // Still allocating. Said as a lifecycle state rather than a status, so
+            // the surfaces show "starting" instead of claiming there is nothing.
+            service.setState(status === 'error' ? 'error' : 'starting');
+            return;
+        }
+        service.report({
+            variant: 'datalayer',
+            // The *sandbox*, not the agent. `runtime.isReady` answers "is the agent
+            // registered and reachable", which is a separate and later event than
+            // "does this runtime serve kernels". Gating the sandbox on it left the
+            // workspace showing a live r1 server URL with no notebook and no chat
+            // behind it, and a kernel indicator reporting `connected-dead` for a
+            // pod that was up: the ingress was usable the whole time, nothing had
+            // been told it was.
+            sandbox_running: Boolean(runtime.serviceManager),
+            jupyter_url: runtime.jupyterBaseUrl,
+            // The ingress token travels with the manager the platform built, not
+            // on the connection itself.
+            jupyter_token: runtime.serviceManager?.serverSettings?.token,
+            kernel_id: runtime.kernelId,
+            // Where the agent actually is. Without this the chat would address the
+            // host's server for an agent that is not on it.
+            agent_base_url: runtime.agentBaseUrl,
+        });
+    }, [service, onDatalayer, runtime, status, error]);
+    return null;
+}
+export default DatalayerAgentBridge;

package/lib/loop/plugins/agents/DatalayerAgentMount.d.ts

@@ -0,0 +1,18 @@
+/**
+ * The Datalayer agent bridge, loaded only when something renders it.
+ *
+ * The bridge itself uses the agent hook, and that hook reaches the whole
+ * runtime stack — JupyterLab services, Lumino, the web components. Imported
+ * statically by the plugin, all of it lands in the module graph of every host
+ * that merely *mounts* the plugin, which is a large bill for a target most
+ * workspaces never pick, and enough to break anything loading the plugin
+ * outside a browser.
+ *
+ * So the plugin refers to this, and this defers the rest. It renders nothing
+ * either way.
+ *
+ * @module loop/plugins/agents/DatalayerAgentMount
+ */
+import type { JSX } from 'react';
+export declare function DatalayerAgentMount(): JSX.Element;
+export default DatalayerAgentMount;

package/lib/loop/plugins/agents/DatalayerAgentMount.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense, lazy } from 'react';
+const DatalayerAgentBridge = lazy(async () => {
+    const module = await import('./DatalayerAgentBridge');
+    return { default: module.DatalayerAgentBridge };
+});
+export function DatalayerAgentMount() {
+    // No fallback: there is nothing to show while it loads, because there is
+    // nothing to show afterwards either.
+    return (_jsx(Suspense, { fallback: null, children: _jsx(DatalayerAgentBridge, {}) }));
+}
+export default DatalayerAgentMount;

package/lib/loop/plugins/agents/SandboxSelector.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Where the code runs: browser, local, or cloud.
+ *
+ * Three positions rather than a settings page, in the header rather than a
+ * menu, because "where is my code running?" is a question a person asks while
+ * they are working — and the honest answer changes what they can do.
+ *
+ * Contributed by the sandbox plugin, so every workspace that mounts it gets the
+ * control: the examples, the standalone page, and the Datalayer app.
+ *
+ * @module loop/plugins/agents/SandboxSelector
+ */
+import type { JSX } from 'react';
+import type { LoopWorkspaceContext } from '../../core';
+export declare function SandboxSelector(_props: {
+    workspace: LoopWorkspaceContext;
+}): JSX.Element | null;
+export default SandboxSelector;

package/lib/loop/plugins/agents/SandboxSelector.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { Box, SegmentedControl, Spinner, Text } from '@primer/react';
+import { KernelIndicator } from '@datalayer/jupyter-react/kernel-indicator';
+import { useSignalValue } from '@datalayer/reactor/react';
+import { IDLE_SANDBOX_SNAPSHOT_SIGNAL, sandboxIndicatorState, } from '../../core';
+import { useOptionalSandboxService } from './useSandboxService';
+import { SANDBOX_TARGETS, TARGET_SPECS, } from './switchable';
+export function SandboxSelector(_props) {
+    const service = useOptionalSandboxService();
+    const [moving, setMoving] = useState(false);
+    const [failure, setFailure] = useState(null);
+    // Hooks run before the early return, so a workspace without the sandbox
+    // plugin does not change hook order on the next render.
+    const snapshot = useSignalValue(service?.snapshot ?? IDLE_SANDBOX_SNAPSHOT_SIGNAL);
+    const status = useSignalValue(service?.status ?? EMPTY_STATUS);
+    const target = useSignalValue(service?.target ?? DEFAULT_TARGET);
+    const choose = useCallback(async (next) => {
+        if (!service || next === target) {
+            return;
+        }
+        setMoving(true);
+        setFailure(null);
+        try {
+            await service.setTarget(next);
+        }
+        catch (error) {
+            // Said where the person clicked. A switch that fails silently leaves
+            // them looking at a control that did nothing and no reason why.
+            setFailure(error instanceof Error ? error.message : String(error));
+        }
+        finally {
+            setMoving(false);
+        }
+    }, [service, target]);
+    if (!service) {
+        return null;
+    }
+    const index = Math.max(0, SANDBOX_TARGETS.indexOf(target));
+    return (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, minWidth: 0 }, children: [_jsx(Box, { sx: {
+                    width: 16,
+                    flexShrink: 0,
+                    display: 'flex',
+                    justifyContent: 'center',
+                }, children: moving ? _jsx(Spinner, { size: "small" }) : null }), _jsx(KernelIndicator, { state: sandboxIndicatorState(snapshot.state, status?.execution_state, status?.is_executing), kernelId: snapshot.kernelId ?? status?.kernel_id, kernelName: status?.kernel_name, serverUrl: snapshot.jupyterUrl ?? status?.jupyter_url, websocketUrl: toWebsocketUrl(snapshot.jupyterUrl ?? status?.jupyter_url), 
+                /*
+                  The target that was chosen, not the variant last reported.
+        
+                  `snapshot.variant` is whatever the sandbox most recently said it
+                  was, and it lags a switch — so the indicator sat next to a segmented
+                  control reading "Datalayer" and named a Jupyter server, which is two
+                  answers to one question. The chosen target is the one the reader
+                  just gave; the variant is a detail, and it is in the overlay.
+                */
+                environmentName: TARGET_SPECS[target].label, overlayTitle: `${TARGET_SPECS[target].label} Kernel`, position: "se", bordered: false }), _jsx(SegmentedControl, { "aria-label": "Where code runs", size: "small", ...{ style: { listStyle: 'none', margin: 0, padding: 0 } }, sx: {
+                    // SegmentedControl is a list. Some example-page typography styles
+                    // restore list markers globally, so reset both the list and its
+                    // direct items here instead of leaking a page-specific CSS fix into
+                    // the plugin.
+                    listStyle: 'none',
+                    m: 0,
+                    p: 0,
+                    '& > li': { listStyle: 'none' },
+                    '& > li::marker': { content: 'none' },
+                }, children: SANDBOX_TARGETS.map((entry, position) => (_jsx(SegmentedControl.Button, { selected: position === index, sx: { listStyle: 'none' }, title: TARGET_SPECS[entry].hint, onClick: () => void choose(entry), children: TARGET_SPECS[entry].label }, entry))) }), failure || snapshot.errorReason ? (
+            // The reason, in the header, in full. It used to read "switch failed"
+            // with the cause hidden in a `title` — which is why a switch that
+            // could not reach the server looked like a click that did nothing.
+            // A failure the person has to hover to read is a failure they will
+            // not read.
+            _jsx(Text, { sx: {
+                    fontSize: 0,
+                    color: 'danger.fg',
+                    lineHeight: 1.3,
+                    /*
+                      Bounded, and allowed to shrink.
+                      
+                      At 460px with nothing to stop it growing, a failure message was
+                      wider than everything else in the header put together — so the
+                      row it shares compressed to fit it, and the segmented control
+                      the reader had just clicked shifted out from under the pointer.
+                      Two lines here cost nothing; a reflowed header costs the click.
+                    */
+                    maxWidth: 280,
+                    minWidth: 0,
+                }, title: failure ?? snapshot.errorReason, children: failure ?? snapshot.errorReason })) : (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, title: TARGET_SPECS[SANDBOX_TARGETS[index]].hint, children: snapshot.state }))] }));
+}
+function toWebsocketUrl(url) {
+    return url?.replace(/^http/, 'ws');
+}
+const EMPTY_STATUS = {
+    value: null,
+    peek: () => null,
+};
+const DEFAULT_TARGET = {
+    value: 'local',
+    peek: () => 'local',
+};
+export default SandboxSelector;

package/lib/loop/plugins/agents/SandboxStatusBridge.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Keeping the workspace told about the sandbox.
+ *
+ * The service owns the connection; this only carries what it learns into the
+ * workspace context, where the `canOpen` gates can see it. It lives in a slot
+ * rather than inside a view, because the sandbox does not stop existing when
+ * someone switches to the chat tab.
+ *
+ * Deliberately imports nothing heavier than the reactor's React bridge: this
+ * module is reached from the plugin's entry point, so anything it pulls in
+ * lands in the shell's bundle.
+ *
+ * @module loop/plugins/agents/SandboxStatusBridge
+ */
+import type { JSX } from 'react';
+import type { LoopWorkspaceContext } from '../../core';
+export declare function SandboxStatusBridge({ workspace, }: {
+    workspace: LoopWorkspaceContext;
+}): JSX.Element | null;

package/lib/loop/plugins/agents/SandboxStatusBridge.js

@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useEffect } from 'react';
+import { useSignalValue } from '@datalayer/reactor/react';
+import { IDLE_SANDBOX_SNAPSHOT_SIGNAL, IDLE_SANDBOX_TARGET_SIGNAL, } from '../../core';
+import { useOptionalSandboxService } from './useSandboxService';
+export function SandboxStatusBridge({ workspace, }) {
+    const service = useOptionalSandboxService();
+    const snapshot = useSignalValue(service?.snapshot ?? IDLE_SANDBOX_SNAPSHOT_SIGNAL);
+    // Watched as a signal so a switch re-renders this bridge, and carried into
+    // the snapshot so it re-renders everyone reading the workspace.
+    const target = useSignalValue(service?.target ?? IDLE_SANDBOX_TARGET_SIGNAL);
+    const { setSandbox, agentId } = workspace;
+    useEffect(() => service?.connect(agentId), [service, agentId]);
+    useEffect(() => {
+        if (service) {
+            setSandbox({ ...snapshot, target });
+        }
+    }, [service, snapshot, target, setSandbox]);
+    return null;
+}

package/lib/loop/plugins/agents/SandboxView.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The sandbox view: what is running, and how to reach it.
+ *
+ * The browser twin of `/code-sandbox` in the terminal — the same facts, drawn
+ * rather than printed.
+ *
+ * @module loop/plugins/agents/SandboxView
+ */
+import type { JSX } from 'react';
+import type { LoopViewProps } from '../../core';
+export default function SandboxView(_props: LoopViewProps): JSX.Element;

package/lib/loop/plugins/agents/SandboxView.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Label, Text } from '@primer/react';
+import { useSignalValue } from '@datalayer/reactor/react';
+import { useSandboxService } from './useSandboxService';
+function Row({ label, value }) {
+    return (_jsxs(Box, { sx: { display: 'flex', gap: 3, py: 1, fontSize: 1 }, children: [_jsx(Text, { sx: { color: 'fg.muted', minWidth: '140px' }, children: label }), _jsx(Text, { sx: { fontFamily: 'mono', wordBreak: 'break-all' }, children: value || _jsx(Text, { sx: { color: 'fg.subtle' }, children: "\u2014" }) })] }));
+}
+export default function SandboxView(_props) {
+    const service = useSandboxService();
+    const snapshot = useSignalValue(service.snapshot);
+    const status = useSignalValue(service.status);
+    const lastExecution = useSignalValue(service.lastExecution);
+    const tone = snapshot.state === 'running'
+        ? 'success'
+        : snapshot.state === 'error'
+            ? 'danger'
+            : 'attention';
+    return (_jsxs(Box, { sx: { height: '100%', overflowY: 'auto', px: 4, py: 3 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mb: 3 }, children: [_jsx(Text, { sx: { fontSize: 3, fontWeight: 'bold' }, children: "Code Sandbox" }), _jsx(Label, { variant: tone, children: snapshot.state })] }), _jsx(Row, { label: "Variant", value: snapshot.variant }), _jsx(Row, { label: "Kernel", value: status?.kernel_name ?? snapshot.kernelId }), _jsx(Row, { label: "Kernel id", value: snapshot.kernelId }), _jsx(Row, { label: "Jupyter server", value: snapshot.jupyterUrl }), _jsx(Row, { label: "Execution state", value: status?.execution_state }), snapshot.state !== 'running' ? (_jsx(Box, { sx: {
+                    mt: 3,
+                    p: 3,
+                    bg: 'attention.subtle',
+                    borderRadius: 2,
+                    fontSize: 1,
+                }, children: "No sandbox is attached. Views that need one \u2014 the notebook, the document \u2014 stay unavailable until there is a kernel to bind to." })) : null, lastExecution ? (_jsxs(Box, { sx: { mt: 4 }, children: [_jsx(Text, { sx: { fontSize: 2, fontWeight: 'bold' }, children: "Last execution" }), _jsx(Box, { sx: {
+                            mt: 2,
+                            p: 2,
+                            bg: 'canvas.subtle',
+                            borderRadius: 2,
+                            fontFamily: 'mono',
+                            fontSize: 0,
+                            whiteSpace: 'pre-wrap',
+                        }, children: lastExecution.code }), lastExecution.stdout ? (_jsx(Box, { sx: {
+                            mt: 1,
+                            fontFamily: 'mono',
+                            fontSize: 0,
+                            whiteSpace: 'pre-wrap',
+                        }, children: lastExecution.stdout })) : null, lastExecution.error ? (_jsx(Box, { sx: {
+                            mt: 1,
+                            color: 'danger.fg',
+                            fontFamily: 'mono',
+                            fontSize: 0,
+                        }, children: lastExecution.error })) : null] })) : null] }));
+}

package/lib/loop/plugins/agents/TeamMemberPicker.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Who the next prompt goes to.
+ *
+ * An icon rather than a labelled control, because a team of two does not earn
+ * a segmented control in a header that already carries the sandbox, the model
+ * and the status. The overlay is where the names live, and a check says which
+ * one is listening.
+ *
+ * The supervisor is marked rather than hidden. It is the team's front door and
+ * the default, and a person who picks somebody else should be able to see what
+ * they moved away from.
+ *
+ * @module loop/plugins/agents/TeamMemberPicker
+ */
+import type { JSX } from 'react';
+export declare function TeamMemberPicker(): JSX.Element | null;
+export default TeamMemberPicker;

package/lib/loop/plugins/agents/TeamMemberPicker.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ActionList, AnchoredOverlay, IconButton, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { AiAgentIcon } from '@datalayer/icons-react';
+import { useSignalValue } from '@datalayer/reactor/react';
+import { agentIcon } from './agentIcons';
+import { useOptionalTeamSelection } from './useTeamSelection';
+/** One member's mark, as its spec names it. */
+function MemberIcon({ icon }) {
+    const Icon = agentIcon(icon);
+    return _jsx(Icon, {});
+}
+export function TeamMemberPicker() {
+    const selection = useOptionalTeamSelection();
+    // No team, or a team of one: there is nothing to choose between, and a
+    // control that opens onto a single option is furniture. Returning before the
+    // inner component means its hooks are never called conditionally.
+    if (!selection || selection.members.length < 2) {
+        return null;
+    }
+    return _jsx(TeamMemberMenu, { selection: selection });
+}
+function TeamMemberMenu({ selection, }) {
+    const [open, setOpen] = useState(false);
+    const selectedId = useSignalValue(selection.selected);
+    const active = selection.members.find(member => member.id === selectedId);
+    return (_jsx(AnchoredOverlay
+    // 480px. `AnchoredOverlay` sizes through Primer's `Overlay`, which reads
+    // a named width off `data-width-*` — so an `sx` width on the child is
+    // not enough on its own, and the box below states the same number from
+    // the inside for the case where it loses.
+    , { 
+        // 480px. `AnchoredOverlay` sizes through Primer's `Overlay`, which reads
+        // a named width off `data-width-*` — so an `sx` width on the child is
+        // not enough on its own, and the box below states the same number from
+        // the inside for the case where it loses.
+        width: "large", open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), renderAnchor: anchorProps => (_jsx(IconButton
+        // Primer types the anchor's `aria-labelledby` and `IconButton`'s
+        // `aria-label` as mutually exclusive, and the overlay supplies the
+        // former. Dropped rather than fought: the label below says more
+        // than an id pointing at an icon would.
+        , { ...anchorProps, "aria-labelledby": undefined, icon: AiAgentIcon, "aria-label": active
+                ? `Talking to ${active.name}. Choose another agent.`
+                : 'Choose an agent', variant: "invisible", size: "small" })), children: _jsx(Box, { sx: { width: 440, maxWidth: 'calc(100vw - 16px)' }, children: _jsxs(ActionList, { selectionVariant: "single", role: "listbox", "aria-label": `Agents in ${selection.team.name}`, children: [_jsx(ActionList.GroupHeading, { children: selection.team.name }), selection.members.map(member => (_jsxs(ActionList.Item, { selected: member.id === selectedId, onSelect: () => {
+                            selection.select(member.id);
+                            setOpen(false);
+                        }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(MemberIcon, { icon: member.icon }) }), _jsxs(Box, { as: "span", sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [member.name, member.isSupervisor ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "supervisor" })) : null] }), member.description ? (_jsx(ActionList.Description, { variant: "block", 
+                                /* Wrapped and breakable. `minWidth: 0` is the load-bearing
+                                 one: a grid item defaults to `min-content`, so without it
+                                 the description refuses to be narrower than its longest
+                                 unbroken run and pushes the row wide. */
+                                sx: {
+                                    display: 'block',
+                                    whiteSpace: 'normal',
+                                    overflowWrap: 'anywhere',
+                                    minWidth: 0,
+                                }, children: member.description })) : null] }, member.id)))] }) }) }));
+}
+export default TeamMemberPicker;

package/lib/loop/plugins/agents/agentIcons.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The octicon an agentspec asked for.
+ *
+ * Every spec names one — `mortar-board` for the tutor, `fold` for the
+ * compactor — and until something resolves it, every agent in a menu is drawn
+ * with the same fallback and the names do all the work.
+ *
+ * An explicit map rather than `import * as octicons`. The namespace import
+ * resolves any name in one line and pulls the whole icon set into the bundle
+ * with it, which a landing page that lazy-loads this workspace pays for on
+ * every visit. These are the names the catalogue actually uses.
+ *
+ * @module loop/plugins/agents/agentIcons
+ */
+import { type Icon } from '@primer/octicons-react';
+/**
+ * The icon for a spec's `icon` value, or the generic agent one.
+ *
+ * Never undefined: a menu row with a gap where its neighbours have icons reads
+ * as a rendering fault, and "some agent" is a true thing to draw.
+ */
+export declare function agentIcon(name?: string): Icon;
+export default agentIcon;