@datalayer/agent-runtimes 1.0.28 → 1.3.10

package/lib/chat/prompt/footer/BelowPromptFooter.d.ts

@@ -0,0 +1,25 @@
+/**
+ * The region under the prompt box: its controls.
+ *
+ * The agents, tools, skills and model menus are one band today; the region is
+ * a list because it has already had two, and because a host adding a third
+ * should not have to edit the prompt to do it.
+ *
+ * Under the box rather than inside it because these choose what the *session*
+ * does, not what the sentence says — and because the box is the field, which
+ * ought to look like one.
+ *
+ * @module chat/prompt/footer/BelowPromptFooter
+ */
+import type { ReactNode } from 'react';
+import { type PromptStack } from '../stack';
+export interface BelowPromptFooterProps {
+    /** The bands, top to bottom. */
+    stacks?: readonly PromptStack[];
+    /** A single band, for the common case. Rendered before `stacks`. */
+    children?: ReactNode;
+    /** Dim and disable every band. */
+    disabled?: boolean;
+}
+export declare function BelowPromptFooter({ stacks, children, disabled, }: BelowPromptFooterProps): import("react").JSX.Element;
+export default BelowPromptFooter;

package/lib/chat/prompt/footer/BelowPromptFooter.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PromptStacks } from '../stack';
+export function BelowPromptFooter({ stacks, children, disabled, }) {
+    // `children` and `stacks` compose rather than compete: the shorthand band
+    // comes first, and declared bands follow it.
+    const bands = [
+        ...(children ? [{ id: 'default', content: children }] : []),
+        ...(stacks ?? []),
+    ];
+    return _jsx(PromptStacks, { stacks: bands, disabled: disabled });
+}
+export default BelowPromptFooter;

package/lib/chat/prompt/footer/InPromptFooter.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The region inside the prompt box, below the input.
+ *
+ * Its last band is the one the prompt always has: a left slot for dropdowns
+ * and indicators, and the submit / stop button on the right. Bands declared by
+ * the caller are stacked above it, so a host can put something between the
+ * input and the send button without this component knowing what it is.
+ *
+ * What sits *under* the box is `BelowPromptFooter`, which is a different
+ * region with different rules — see `chat/prompt/stack`.
+ *
+ * @module chat/prompt/footer/InPromptFooter
+ */
+import type { ReactNode } from 'react';
+import { type PromptStack } from '../stack';
+export interface InPromptFooterProps {
+    /** Bands above the control band. */
+    stacks?: readonly PromptStack[];
+    /** Content on the left of the control band (dropdowns, indicators). */
+    children?: ReactNode;
+    /** Content on the right, just before the send / stop button. */
+    rightContent?: ReactNode;
+    /** Whether the agent is loading / streaming. */
+    isLoading?: boolean;
+    /** Whether the send button should be disabled. */
+    sendDisabled?: boolean;
+    /** Whether the connected kernel is currently busy. */
+    isKernelBusy?: boolean;
+    /** Callback when the send button is clicked. */
+    onSend: () => void;
+    /** Callback when the stop button is clicked. */
+    onStop?: () => void;
+}
+export declare function InPromptFooter({ stacks, children, rightContent, isLoading, sendDisabled, isKernelBusy, onSend, onStop, }: InPromptFooterProps): import("react").JSX.Element;
+export default InPromptFooter;

package/lib/chat/prompt/footer/InPromptFooter.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { IconButton } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { PaperAirplaneIcon, SquareCircleIcon, PauseIcon, } from '@primer/octicons-react';
+import { PromptStacks } from '../stack';
+export function InPromptFooter({ stacks, children, rightContent, isLoading = false, sendDisabled = false, isKernelBusy = false, onSend, onStop, }) {
+    return (_jsxs(_Fragment, { children: [stacks && stacks.length > 0 ? _jsx(PromptStacks, { stacks: stacks }) : null, _jsxs(Box, { "data-prompt-stack": "controls", sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 2,
+                    px: 2,
+                    pt: 1,
+                    pb: 2,
+                }, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, flex: 1 }, children: children }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [rightContent, isLoading ? (_jsx(IconButton, { icon: SquareCircleIcon, "aria-label": "Stop", "data-prompt-action": "stop", onClick: onStop, size: "small", variant: "invisible" })) : isKernelBusy ? (_jsx(IconButton, { icon: PauseIcon, "aria-label": "Pause (kernel busy)", onClick: onStop, size: "small", variant: "invisible", disabled: !onStop })) : (_jsx(IconButton, { icon: PaperAirplaneIcon, "aria-label": "Send", onClick: onSend, disabled: sendDisabled, size: "small", variant: "invisible" }))] })] })] }));
+}
+export default InPromptFooter;

package/lib/chat/prompt/footer/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Everything below the input, in both zones.
+ *
+ * @module chat/prompt/footer
+ */
+export { InPromptFooter, type InPromptFooterProps } from './InPromptFooter';
+export { BelowPromptFooter, type BelowPromptFooterProps, } from './BelowPromptFooter';

package/lib/chat/prompt/footer/index.js

@@ -0,0 +1,11 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Everything below the input, in both zones.
+ *
+ * @module chat/prompt/footer
+ */
+export { InPromptFooter } from './InPromptFooter';
+export { BelowPromptFooter, } from './BelowPromptFooter';

package/lib/chat/prompt/header/BelowPromptHeader.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The region under the prompt box, before its controls.
+ *
+ * What *describes* the prompt rather than acts on it: the context ring and the
+ * token counts live here. It sits under the box because it is about the
+ * conversation's budget rather than about the sentence being written, and
+ * above `BelowPromptFooter` because a reading belongs nearer the thing it
+ * reports on than the controls do.
+ *
+ * @module chat/prompt/header/BelowPromptHeader
+ */
+import type { ReactNode } from 'react';
+import { type PromptStack } from '../stack';
+export interface BelowPromptHeaderProps {
+    /** The bands, top to bottom. */
+    stacks?: readonly PromptStack[];
+    /** A single band, for the common case. Rendered before `stacks`. */
+    children?: ReactNode;
+    /** Dim and disable every band. */
+    disabled?: boolean;
+}
+export declare function BelowPromptHeader({ stacks, children, disabled, }: BelowPromptHeaderProps): import("react").JSX.Element;
+export default BelowPromptHeader;

package/lib/chat/prompt/header/BelowPromptHeader.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PromptStacks } from '../stack';
+export function BelowPromptHeader({ stacks, children, disabled, }) {
+    // `children` and `stacks` compose rather than compete: the shorthand band
+    // comes first, and declared bands follow it.
+    const bands = [
+        ...(children ? [{ id: 'default', content: children }] : []),
+        ...(stacks ?? []),
+    ];
+    return _jsx(PromptStacks, { stacks: bands, disabled: disabled });
+}
+export default BelowPromptHeader;

package/lib/chat/prompt/header/InPromptHeader.d.ts

@@ -0,0 +1,31 @@
+/**
+ * The region inside the prompt box, above the input.
+ *
+ * Where the inline agent chips and any indicator that belongs *to what is
+ * being written* go. Bounded by the prompt's own border, so what is here reads
+ * as part of the field rather than as furniture around it.
+ *
+ * Takes a list of bands like every other region — see `chat/prompt/stack`. It
+ * had one slot before, which is why a second thing above the input meant
+ * editing the prompt.
+ *
+ * @module chat/prompt/header/InPromptHeader
+ */
+import type { ReactNode } from 'react';
+import { type PromptStack } from '../stack';
+export interface InPromptHeaderProps {
+    /** The bands, top to bottom. */
+    stacks?: readonly PromptStack[];
+    /**
+     * A single band, for the common case.
+     *
+     * Equivalent to one stack called `default`, rendered before `stacks`; kept
+     * because most callers have exactly one thing to put here and a list would
+     * be ceremony.
+     */
+    children?: ReactNode;
+    /** Dim and disable every band. */
+    disabled?: boolean;
+}
+export declare function InPromptHeader({ stacks, children, disabled, }: InPromptHeaderProps): import("react").JSX.Element;
+export default InPromptHeader;

package/lib/chat/prompt/header/InPromptHeader.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PromptStacks } from '../stack';
+export function InPromptHeader({ stacks, children, disabled, }) {
+    // `children` and `stacks` compose rather than compete: the shorthand band
+    // comes first, and declared bands follow it.
+    const bands = [
+        ...(children ? [{ id: 'default', content: children }] : []),
+        ...(stacks ?? []),
+    ];
+    // The band above the input sits tighter to it than to the box's edge, which
+    // is the asymmetry the prompt had before these regions were named.
+    return (_jsx(PromptStacks, { stacks: bands.map(stack => ({ pt: 2, pb: 1, ...stack })), disabled: disabled }));
+}
+export default InPromptHeader;

package/lib/chat/prompt/header/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Everything above the input, in both zones.
+ *
+ * @module chat/prompt/header
+ */
+export { InPromptHeader, type InPromptHeaderProps } from './InPromptHeader';
+export { BelowPromptHeader, type BelowPromptHeaderProps, } from './BelowPromptHeader';

package/lib/chat/prompt/header/index.js

@@ -0,0 +1,11 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Everything above the input, in both zones.
+ *
+ * @module chat/prompt/header
+ */
+export { InPromptHeader } from './InPromptHeader';
+export { BelowPromptHeader, } from './BelowPromptHeader';

package/lib/chat/prompt/index.d.ts

@@ -3,9 +3,13 @@
  *
  * @module chat/prompt
  */
-export { InputPrompt, type InputPromptProps, type InputPromptVariant, } from './InputPrompt';
-export { InputPromptHeader, type InputPromptHeaderProps, } from './InputPromptHeader';
-export { InputPromptFooter, type InputPromptFooterProps, } from './InputPromptFooter';
+export { InputPrompt, type InputPromptPlacement, type InputPromptProps, } from './InputPrompt';
+export { FloatingCard, type FloatingCardProps } from './FloatingCard';
+export { InputPromptBase, type InputPromptBaseProps, type InputPromptVariant, } from './InputPromptBase';
+export * from './header';
+export * from './footer';
+export { PromptStacks, type PromptStack, type PromptStacksProps, } from './stack';
 export { InputPromptText, type InputPromptTextProps } from './InputPromptText';
 export { InputPromptLexical, type InputPromptLexicalProps, } from './InputPromptLexical';
-export { InputToolbar, type InputToolbarProps } from './InputFooter';
+export * from './menus';
+export * from './plugins/AgentMentionPlugin';

package/lib/chat/prompt/index.js

@@ -8,8 +8,20 @@
  * @module chat/prompt
  */
 export { InputPrompt, } from './InputPrompt';
-export { InputPromptHeader, } from './InputPromptHeader';
-export { InputPromptFooter, } from './InputPromptFooter';
+export { FloatingCard } from './FloatingCard';
+export { InputPromptBase, } from './InputPromptBase';
+/*
+ * The four regions around the input, and the band they are all made of.
+ *
+ * | | above the input | below the input |
+ * | --- | --- | --- |
+ * | inside the box | `InPromptHeader` | `InPromptFooter` |
+ * | under the box | `BelowPromptHeader` | `BelowPromptFooter` |
+ */
+export * from './header';
+export * from './footer';
+export { PromptStacks, } from './stack';
 export { InputPromptText } from './InputPromptText';
 export { InputPromptLexical, } from './InputPromptLexical';
-export { InputToolbar } from './InputFooter';
+export * from './menus';
+export * from './plugins/AgentMentionPlugin';

package/lib/chat/prompt/menus/AgentsMenu.d.ts

@@ -0,0 +1,14 @@
+import type { FooterAgent } from '../../../types';
+/**
+ * Who answers the next message.
+ *
+ * A `listbox`, stated rather than left to default. Primer decides what a group
+ * heading must be from the list's role and throws either way round — with no
+ * role a heading needs an `as`, with `listbox` or `menu` it refuses one — so
+ * saying what this is keeps the heading correct by construction.
+ */
+export declare function AgentsMenu({ agents, selectedAgentId, onSelectAgent, }: {
+    agents: FooterAgent[];
+    selectedAgentId?: string;
+    onSelectAgent?: (agentId: string) => void;
+}): import("react").JSX.Element;

package/lib/chat/prompt/menus/AgentsMenu.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Who answers the next message.
+ *
+ * @module chat/prompt/menus/AgentsMenu
+ */
+import { Text, Button, ActionMenu, ActionList, Tooltip } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { AiAgentIcon } from '@datalayer/icons-react';
+/**
+ * Who answers the next message.
+ *
+ * A `listbox`, stated rather than left to default. Primer decides what a group
+ * heading must be from the list's role and throws either way round — with no
+ * role a heading needs an `as`, with `listbox` or `menu` it refuses one — so
+ * saying what this is keeps the heading correct by construction.
+ */
+export function AgentsMenu({ agents, selectedAgentId, onSelectAgent, }) {
+    const active = agents.find(agent => agent.id === selectedAgentId);
+    const ActiveIcon = active?.icon ?? AiAgentIcon;
+    /* Both facts, because the count alone does not say who is answering and the
+       name alone does not say there is a choice. */
+    const label = [
+        active ? `Agent — ${active.name}` : 'Choose an agent',
+        `${agents.length} available`,
+    ].join(' · ');
+    return (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Tooltip, { text: label, direction: "n", children: _jsx(Button, { type: "button", variant: "invisible", size: "small", "aria-label": label, leadingVisual: ActiveIcon, children: _jsx(Text, { sx: { fontSize: 0 }, children: agents.length }) }) }) }), _jsx(ActionMenu.Overlay, { side: "outside-top", align: "start", width: "large", children: _jsx(Box, { sx: { width: 440, maxWidth: 'calc(100vw - 16px)' }, children: _jsx(ActionList, { selectionVariant: "single", role: "listbox", "aria-label": "Agent", children: agents.map(agent => (_jsxs(ActionList.Item, { selected: agent.id === selectedAgentId, onSelect: () => onSelectAgent?.(agent.id), children: [_jsx(ActionList.LeadingVisual, { children: agent.icon ? _jsx(agent.icon, {}) : _jsx(AiAgentIcon, {}) }), agent.name, agent.description ? (_jsx(ActionList.Description, { variant: "block", 
+                                    /* `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: agent.description })) : null] }, agent.id))) }) }) })] }));
+}

package/lib/chat/prompt/menus/InlineAgentsMenu.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Who answers, shown inside the prompt.
+ *
+ * The same choice `AgentsMenu` offers under the prompt, drawn as a chip above
+ * where the typing goes. Two places for one control is deliberate: the footer
+ * is where a person goes to *change* things, and this says who they are
+ * addressing while they write it — the question a half-typed message raises,
+ * answered without leaving the box.
+ *
+ * `Inline` is the naming for anything drawn inside the prompt rather than in
+ * the bar beneath it.
+ *
+ * @module chat/prompt/menus/InlineAgentsMenu
+ */
+import type { JSX } from 'react';
+import type { FooterAgent } from '../../../types';
+export declare function InlineAgentsMenu({ agents, selectedAgentId, onSelectAgent, }: {
+    agents: FooterAgent[];
+    selectedAgentId?: string;
+    onSelectAgent?: (agentId: string) => void;
+}): JSX.Element;
+export default InlineAgentsMenu;

package/lib/chat/prompt/menus/InlineAgentsMenu.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, Button, ActionMenu, ActionList, Tooltip } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { AiAgentIcon } from '@datalayer/icons-react';
+export function InlineAgentsMenu({ agents, selectedAgentId, onSelectAgent, }) {
+    const active = agents.find(agent => agent.id === selectedAgentId);
+    const ActiveIcon = active?.icon ?? AiAgentIcon;
+    const label = [
+        active ? `Answering: ${active.name}` : 'Choose an agent',
+        `${agents.length} available`,
+    ].join(' · ');
+    return (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Tooltip, { text: label, direction: "s", children: _jsx(Button, { type: "button", variant: "invisible", size: "small", "aria-label": label, leadingVisual: ActiveIcon, sx: { px: 1, color: 'fg.muted' }, children: _jsx(Text, { sx: { fontSize: 0 }, children: agents.length }) }) }) }), _jsx(ActionMenu.Overlay, { side: "outside-bottom", align: "start", width: "large", children: _jsx(Box, { sx: { width: 440, maxWidth: 'calc(100vw - 16px)' }, children: _jsx(ActionList, { selectionVariant: "single", role: "listbox", "aria-label": "Agent", children: agents.map(agent => (_jsxs(ActionList.Item, { selected: agent.id === selectedAgentId, onSelect: () => onSelectAgent?.(agent.id), children: [_jsx(ActionList.LeadingVisual, { children: agent.icon ? _jsx(agent.icon, {}) : _jsx(AiAgentIcon, {}) }), agent.name, agent.description ? (_jsx(ActionList.Description, { variant: "block", 
+                                    /* `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: agent.description })) : null] }, agent.id))) }) }) })] }));
+}
+export default InlineAgentsMenu;

package/lib/chat/prompt/menus/ModelSelector.d.ts

@@ -0,0 +1,7 @@
+import type { ModelConfig } from '../../../types';
+export declare function ModelSelector({ models, selectedModel, onModelSelect, isA2AProtocol, }: {
+    models: ModelConfig[];
+    selectedModel: string;
+    onModelSelect: (modelId: string) => void;
+    isA2AProtocol: boolean;
+}): import("react").JSX.Element;

package/lib/chat/prompt/menus/ModelSelector.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Which model answers.
+ *
+ * @module chat/prompt/menus/ModelSelector
+ */
+import { Text, Button, ActionMenu, ActionList, Tooltip } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { AiModelIcon } from '@primer/octicons-react';
+export function ModelSelector({ models, selectedModel, onModelSelect, isA2AProtocol, }) {
+    const active = models.find(model => model.id === selectedModel);
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-end',
+        }, children: [_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Tooltip, { text: isA2AProtocol
+                                ? 'This protocol does not take a model override'
+                                : `Model — ${active?.name ?? 'none selected'}`, direction: "n", children: _jsx(Button, { type: "button", variant: "invisible", size: "small", "aria-label": `Model — ${active?.name ?? 'none selected'}`, leadingVisual: AiModelIcon, disabled: isA2AProtocol, sx: isA2AProtocol
+                                    ? { opacity: 0.5, cursor: 'not-allowed' }
+                                    : undefined }) }) }), _jsx(ActionMenu.Overlay, { side: "outside-top", align: "end", children: _jsx(ActionList, { selectionVariant: "single", children: models.map(modelItem => (_jsxs(ActionList.Item, { selected: selectedModel === modelItem.id, onSelect: () => onModelSelect(modelItem.id), disabled: modelItem.isAvailable === false || isA2AProtocol, sx: modelItem.isAvailable === false
+                                    ? { color: 'fg.muted' }
+                                    : undefined, children: [modelItem.name, modelItem.isAvailable === false && (_jsx(ActionList.Description, { variant: "block", children: modelItem.unavailableReason ?? 'Missing API key' }))] }, modelItem.id))) }) })] }), isA2AProtocol && (_jsx(Text, { sx: { fontSize: 0, color: 'attention.fg', mt: 1 }, children: "A2A: Model set by agent config" }))] }));
+}

package/lib/chat/prompt/menus/SkillsMenu.d.ts

@@ -0,0 +1,10 @@
+import type { SkillInfo } from '../../../types';
+export declare function SkillsMenu({ skills, skillsLoading, enabledSkills, onToggleSkill, onToggleAllSkills, approvedSkills, onToggleSkillApproval, }: {
+    skills: SkillInfo[];
+    skillsLoading: boolean;
+    enabledSkills: Set<string>;
+    onToggleSkill: (skillId: string) => void;
+    onToggleAllSkills: (skillIds: string[], enable: boolean) => void;
+    approvedSkills: Set<string>;
+    onToggleSkillApproval: (skillId: string) => void;
+}): import("react").JSX.Element;

package/lib/chat/prompt/menus/SkillsMenu.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Which skills are loaded, and which are merely available.
+ *
+ * @module chat/prompt/menus/SkillsMenu
+ */
+import { Text, Button, ActionMenu, ActionList, Tooltip, ToggleSwitch, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { BriefcaseIcon } from '@primer/octicons-react';
+export function SkillsMenu({ skills, skillsLoading, enabledSkills, onToggleSkill, onToggleAllSkills, approvedSkills, onToggleSkillApproval, }) {
+    // A count, not a word — see `ToolsMenu`. The names go in the tooltip, which
+    // is where a person asking "which skills?" is already looking.
+    const summary = skillsLoading
+        ? 'loading…'
+        : skills.length === 0
+            ? 'none loaded'
+            : `${enabledSkills.size} of ${skills.length} enabled`;
+    return (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Tooltip, { text: `Skills — ${summary}`, direction: "n", children: _jsx(Button, { type: "button", variant: "invisible", size: "small", "aria-label": `Skills — ${summary}`, leadingVisual: BriefcaseIcon, children: _jsx(Text, { sx: { fontSize: 0 }, children: skills.length }) }) }) }), _jsx(ActionMenu.Overlay, { side: "outside-top", align: "start", width: "large", children: _jsx(Box, { sx: { maxHeight: '60vh', overflowY: 'auto' }, children: _jsx(ActionList, { children: skillsLoading ? (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: { color: 'fg.muted' }, children: "Loading skills..." }) })) : skills.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'space-between',
+                                        px: 3,
+                                        py: 2,
+                                        borderBottom: '1px solid',
+                                        borderColor: 'border.muted',
+                                    }, children: [_jsxs(Text, { id: "toggle-all-skills", sx: {
+                                                fontSize: 0,
+                                                fontWeight: 'semibold',
+                                                color: 'fg.muted',
+                                            }, children: ["Enable all (", enabledSkills.size, "/", skills.length, ")"] }), _jsx(ToggleSwitch, { size: "small", checked: enabledSkills.size === skills.length, onClick: () => onToggleAllSkills(skills.map(s => s.id), enabledSkills.size !== skills.length), "aria-labelledby": "toggle-all-skills" })] }), skills.map(skill => (_jsxs(Box, { sx: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'space-between',
+                                        px: 3,
+                                        py: 2,
+                                        '&:hover': {
+                                            backgroundColor: 'canvas.subtle',
+                                        },
+                                    }, children: [_jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Text, { id: `toggle-skill-${skill.id}`, sx: { fontWeight: 'semibold' }, children: skill.name }), skill.status && (_jsx(Text, { sx: {
+                                                                fontSize: '10px',
+                                                                px: 1,
+                                                                borderRadius: 2,
+                                                                bg: skill.status === 'loaded'
+                                                                    ? 'success.subtle'
+                                                                    : skill.status === 'enabled'
+                                                                        ? 'attention.subtle'
+                                                                        : 'neutral.subtle',
+                                                                color: skill.status === 'loaded'
+                                                                    ? 'success.fg'
+                                                                    : skill.status === 'enabled'
+                                                                        ? 'attention.fg'
+                                                                        : 'fg.muted',
+                                                            }, children: skill.status }))] }), skill.description && (_jsx(Text, { sx: {
+                                                        display: 'block',
+                                                        fontSize: 0,
+                                                        color: 'fg.muted',
+                                                        overflow: 'hidden',
+                                                        textOverflow: 'ellipsis',
+                                                        whiteSpace: 'nowrap',
+                                                    }, children: skill.description }))] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 3 }, children: [_jsxs(Box, { sx: {
+                                                        display: 'flex',
+                                                        flexDirection: 'column',
+                                                        alignItems: 'center',
+                                                        gap: '2px',
+                                                    }, children: [_jsx(Text, { sx: { fontSize: '10px', color: 'fg.muted' }, children: "Enabled" }), _jsx(ToggleSwitch, { size: "small", checked: enabledSkills.has(skill.id), onClick: () => onToggleSkill(skill.id), "aria-labelledby": `toggle-skill-${skill.id}` })] }), _jsxs(Box, { sx: {
+                                                        display: 'flex',
+                                                        flexDirection: 'column',
+                                                        alignItems: 'center',
+                                                        gap: '2px',
+                                                    }, children: [_jsx(Text, { sx: { fontSize: '10px', color: 'fg.muted' }, children: "Approved" }), _jsx(ToggleSwitch, { size: "small", checked: approvedSkills.has(skill.id), onClick: () => onToggleSkillApproval(skill.id), "aria-labelledby": `toggle-skill-${skill.id}` })] })] })] }, skill.id)))] })) : (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: { color: 'fg.muted', fontStyle: 'italic' }, children: "No skills available" }) })) }) }) })] }));
+}

package/lib/chat/prompt/menus/SuggestionsMenu.d.ts

@@ -0,0 +1,13 @@
+/** One opener: what the menu shows, and what lands in the box. */
+export type PromptSuggestion = {
+    title: string;
+    message: string;
+    /** A section this opener sits under — the addressed member's own, say. */
+    group?: string;
+};
+export declare function SuggestionsMenu({ suggestions, onPick, }: {
+    suggestions: PromptSuggestion[];
+    /** Put this text in the box. Not a send. */
+    onPick: (message: string) => void;
+}): import("react").JSX.Element;
+export default SuggestionsMenu;

package/lib/chat/prompt/menus/SuggestionsMenu.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * The agent's openers, one click from the box.
+ *
+ * Beside the agents, tools, skills and model menus, because it belongs to
+ * the same question — what should the next message be — and because the
+ * chips and the empty state that also offer these are not always on screen:
+ * on a page layout the transcript is a side panel, and after the first
+ * message the empty state is gone. Picking one *prompts* the box with the
+ * text; it does not send. The person reads it, edits it if they like, and
+ * sends it themselves.
+ *
+ * @module chat/prompt/menus/SuggestionsMenu
+ */
+import { Text, Button, ActionMenu, ActionList, Tooltip } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { LightBulbIcon } from '@primer/octicons-react';
+import { groupSuggestions } from '../../display/groupSuggestions';
+export function SuggestionsMenu({ suggestions, onPick, }) {
+    const summary = suggestions.length === 0 ? 'none' : `${suggestions.length} to choose from`;
+    return (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Tooltip, { text: `Suggestions — ${summary}`, direction: "n", children: _jsx(Button, { type: "button", variant: "invisible", size: "small", "aria-label": `Suggestions — ${summary}`, leadingVisual: LightBulbIcon, children: _jsx(Text, { sx: { fontSize: 0 }, children: suggestions.length }) }) }) }), _jsx(ActionMenu.Overlay, { side: "outside-top", align: "start", width: "large", children: _jsx(Box, { sx: { maxHeight: '60vh', overflowY: 'auto' }, children: _jsx(ActionList, { children: suggestions.length === 0 ? (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: { color: 'fg.muted' }, children: "This agent offers no suggestions." }) })) : (
+                        // In blocks: the team's openers, then the addressed member's
+                        // own under its name — the same shape the empty state draws.
+                        // No `as` on the heading: inside a menu Primer refuses one.
+                        groupSuggestions(suggestions).map(block => (_jsxs(ActionList.Group, { children: [block.group ? (_jsx(ActionList.GroupHeading, { children: block.group })) : null, block.items.map(suggestion => (_jsxs(ActionList.Item, { onSelect: () => onPick(suggestion.message), children: [suggestion.title, suggestion.message !== suggestion.title ? (_jsx(ActionList.Description, { variant: "block", children: suggestion.message })) : null] }, `${suggestion.title} ${suggestion.message}`)))] }, block.group ?? '')))) }) }) })] }));
+}
+export default SuggestionsMenu;

package/lib/chat/prompt/menus/ToolsMenu.d.ts

@@ -0,0 +1,13 @@
+import type { BuiltinTool, MCPServerConfig } from '../../../types';
+export declare function ToolsMenu({ codemodeEnabled, onToggleCodemode, mcpServers, enabledMcpTools, enabledMcpToolCount, onToggleMcpTool, onToggleAllMcpServerTools, approvedMcpTools, onToggleMcpToolApproval, availableTools, }: {
+    codemodeEnabled: boolean;
+    onToggleCodemode?: (enabled: boolean) => void | Promise<void>;
+    mcpServers: MCPServerConfig[];
+    enabledMcpTools: Map<string, Set<string>>;
+    enabledMcpToolCount: number;
+    onToggleMcpTool: (serverId: string, toolName: string) => void;
+    onToggleAllMcpServerTools: (serverId: string, toolNames: string[], enable: boolean) => void;
+    approvedMcpTools: Map<string, Set<string>>;
+    onToggleMcpToolApproval: (serverId: string, toolName: string) => void;
+    availableTools: BuiltinTool[];
+}): import("react").JSX.Element;