@datalayer/agent-runtimes 1.0.28 → 1.3.10

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

@@ -1,64 +1,217 @@
 /**
- * InputPrompt — Integrated chat input component.
+ * The prompt, with everything under it.
  *
- * Layout (top → bottom):
- *   1. Header   – slot for dropdowns / indicators
- *   2. Input    – "text" (textarea) or "lexical" (plain-text Lexical editor)
- *   3. Footer   – left slot for controls, submit / stop buttons on the right
- *
- * The component is wrapped in a rounded container with a subtle border,
- * giving it a more integrated visual appearance.
+ * Wraps the editor and adds the row beneath: the agent, tools, skills and
+ * model menus, and the context-window bar. The menus themselves live in
+ * `./menus` — they were private sub-components here, which made one module
+ * carry four unrelated overlays.
  *
  * @module chat/prompt/InputPrompt
  */
 import type { ReactNode } from 'react';
-/** Input variant type. */
-export type InputPromptVariant = 'text' | 'lexical';
-/**
- * Props for the InputPrompt component.
- */
+import type { KernelMessage } from '@jupyterlab/services';
+import type { BuiltinTool, ContextSnapshotData, MCPServerConfig, McpToolsetsStatusResponse, ModelConfig, SkillInfo } from '../../types';
+import { type InputPromptVariant } from './InputPromptBase';
+import type { PromptSuggestion } from './menus/SuggestionsMenu';
+import type { MentionableAgent } from './plugins/AgentMentionPlugin';
+/** One agent the footer may offer. */
+import type { FooterAgent } from '../../types/chat';
+export type { FooterAgent };
+/** Where the prompt stands: in the flow, or in a draggable card over it. */
+export type InputPromptPlacement = 'docked' | 'floating';
 export interface InputPromptProps {
-    /** Input variant — "text" (default) or "lexical" */
-    variant?: InputPromptVariant;
-    /** Placeholder text */
+    input: string;
+    setInput: (value: string) => void;
+    isLoading: boolean;
+    kernelStatus?: KernelMessage.Status;
+    connectionConfirmed: boolean;
     placeholder?: string;
-    /** Whether the agent is loading / streaming */
-    isLoading?: boolean;
-    /** Whether the connected kernel is currently busy */
-    isKernelBusy?: boolean;
-    /** Callback when a message is submitted */
-    onSend: (message: string) => void;
-    /** Callback when the stop button is clicked */
-    onStop?: () => void;
-    /** Auto-focus the input on mount */
-    autoFocus?: boolean;
-    /** Trigger value change to refocus input */
+    /**
+     * Openers to type out in the placeholder, one after another, on a loop.
+     *
+     * Forwarded to the prompt itself — see `InputPromptBase`. The chat's own
+     * suggestions, usually: the empty state offers them until the first message
+     * and then stops, while the box they would be typed into is there the whole
+     * time.
+     */
+    typingSuggestions?: string[];
+    autoFocus: boolean;
     focusTrigger?: number;
-    /** Whether to show a border on top of the outer wrapper */
-    showBorderTop?: boolean;
-    /** Whether to use a subtle background */
-    showBackground?: boolean;
-    /** Custom outer padding (default: 3) */
-    padding?: number;
-    /** Whether the prompt is disabled */
-    disabled?: boolean;
-    /** Whether the prompt is read-only */
-    readOnly?: boolean;
-    /** Additional sx props for the outer container */
-    sx?: Record<string, unknown>;
-    /** Controlled input value (external state) */
-    value?: string;
-    /** Controlled input onChange (external state) */
-    onChange?: (value: string) => void;
-    /** Content rendered in the header slot */
+    padding: number;
+    /**
+     * The host's own controls, at the trailing edge of the footer bar.
+     *
+     * The bar under the input carries the session's menus — agent, tools,
+     * skills, model — and this is the opening for whatever the host wants
+     * beside them: an icon with an action, a badge, a shortcut. The menus stay
+     * at the leading edge; extras hold the trailing one, so additions read as
+     * additions rather than reshuffling the controls people know.
+     */
+    footerExtras?: ReactNode;
+    /**
+     * Panels inside the prompt's card, above and below the composer itself.
+     *
+     * Inside rather than beside, so a floating prompt carries them: the loop's
+     * page layout hangs the current turn under the composer this way, and it
+     * travels with the card when the card is dragged.
+     */
+    leadingPanel?: ReactNode;
+    trailingPanel?: ReactNode;
+    /**
+     * Where the prompt stands.
+     *
+     * `'docked'` (the default) renders it in the flow, claiming its strip of
+     * the layout. `'floating'` wraps the same prompt — editor, header, usage
+     * band, the tools/skills/model footer — in a draggable `FloatingCard`:
+     * absolutely positioned against the nearest positioned ancestor,
+     * bottom-centre until picked up by its handle. For a host whose page is
+     * mostly canvas, where a docked composer would claim a permanent strip
+     * of it. Dragging is the floating placement's own feature; nothing else
+     * need be wired for it.
+     */
+    placement?: InputPromptPlacement;
+    /**
+     * Which edge a floating prompt starts on: `bottom` (the default) or
+     * `top`, for a layout whose composer is the command line over a page.
+     * Ignored when docked.
+     */
+    floatingAnchor?: 'bottom' | 'top';
+    /** @deprecated Use `placement="floating"`; `true` maps to exactly that. */
+    draggable?: boolean;
+    /**
+     * Where to mount the prompt, docked or floating.
+     *
+     * When given, the prompt renders into this element through a portal
+     * instead of in place — for a host that composes the prompt in one part
+     * of its tree but wants it standing in another (a workspace overlay, a
+     * header-owned dock). The floating card measures its drag bounds against
+     * the nearest *positioned* ancestor of this element, so give it one.
+     */
+    container?: Element | null;
+    /**
+     * Called with the message when it is sent.
+     *
+     * The argument is handed straight through from `InputPromptBase`, which has
+     * always passed it — the type here simply said `() => void` and hid that, so
+     * a caller wanting the text had to read the source to learn it was there.
+     * Declaring it costs callers that ignore it nothing.
+     */
+    onSend: (message: string) => void;
+    onStop: () => void;
+    disableInputPrompt?: boolean;
+    /**
+     * Which editor the prompt uses.
+     *
+     * Forwarded to `InputPrompt`, which is the one prompt component either way —
+     * this toolbar is chrome around it, not a second implementation. Without the
+     * pass-through the toolbar could only ever be the plain textarea, so a host
+     * wanting the `@` menu had to stop using the toolbar to get it.
+     */
+    promptVariant?: InputPromptVariant;
+    /** Agents the prompt may address by typing `@`. Lexical only. */
+    mentionableAgents?: MentionableAgent[];
+    /**
+     * What was sent to this agent before this page loaded, oldest first.
+     *
+     * The runtime's own memory of it, read with the rest of the initial state;
+     * the arrow keys walk back through it, and through whatever is sent here
+     * afterwards.
+     */
+    promptHistory?: readonly string[];
+    /** Rendered inside the prompt, above where the typing goes. */
     headerContent?: ReactNode;
-    /** Content rendered on the left side of the footer */
-    footerContent?: ReactNode;
-    /** Content rendered on the right side of the footer, next to send/stop */
-    footerRightContent?: ReactNode;
+    /**
+     * Whether the agent chooser is offered.
+     *
+     * Beside the tools, the skills and the model rather than in a bar at the top
+     * of the workspace: all four decide what the *next message* does, and a
+     * person setting them up is composing, not configuring.
+     */
+    showAgentsMenu?: boolean;
+    /** Everyone this conversation may be addressed to. */
+    agents?: FooterAgent[];
+    /** Who is being addressed now. */
+    selectedAgentId?: string;
+    /** Address somebody else. */
+    onSelectAgent?: (agentId: string) => void;
+    /**
+     * Whether the agent chip is also drawn inside the prompt.
+     *
+     * True by default: the chip says who is answering while a person is
+     * writing, which the footer's menu says too but further from the eye.
+     *
+     * False for a host that would rather have one place for every control than
+     * two — the footer keeps the chooser either way, so nothing is lost but the
+     * duplication.
+     */
+    showInlineAgentsMenu?: boolean;
+    showTokenUsage: boolean;
+    /**
+     * Whether the usage bar draws its context ring.
+     *
+     * False by default — see `TokenUsageBar`. The numbers appear either way;
+     * this is the pie beside them.
+     */
+    showContextRing?: boolean;
+    agentUsage?: ContextSnapshotData;
+    showModelSelector: boolean;
+    showToolsMenu: boolean;
+    showSkillsMenu: boolean;
+    /**
+     * Whether the footer offers the agent's suggestions.
+     *
+     * True by default: beside agents, tools, skills and model, a menu of the
+     * openers the agent's spec (or its team) offers. Picking one puts the text
+     * in the box — it does not send. The list is `suggestions`, or, when a
+     * host gave only `typingSuggestions`, those.
+     */
+    showSuggestionsMenu?: boolean;
+    /** The openers behind that menu: what the item shows, and what lands. */
+    suggestions?: PromptSuggestion[];
+    codemodeEnabled: boolean;
+    /**
+     * Optional callback invoked when the user toggles codemode from the Tools
+     * menu. When omitted the toggle renders as read-only.
+     */
+    onToggleCodemode?: (enabled: boolean) => void | Promise<void>;
+    isA2AProtocol: boolean;
+    hasConfigData: boolean;
+    hasSkillsData: boolean;
+    /**
+     * Whether the config request is still in flight.
+     *
+     * Separate from `hasConfigData` because "not here yet" and "not coming" want
+     * different words, and only the caller can tell them apart. Without it the
+     * bar said "Loading controls..." for ever whenever a request failed or the
+     * agent had no config endpoint to ask.
+     */
+    configLoading?: boolean;
+    models?: ModelConfig[];
+    selectedModel?: string;
+    onModelSelect?: (modelId: string) => void;
+    availableTools?: BuiltinTool[];
+    /** MCP servers to render (already filtered by selection) */
+    mcpServers?: MCPServerConfig[];
+    enabledMcpTools?: Map<string, Set<string>>;
+    enabledMcpToolCount?: number;
+    onToggleMcpTool?: (serverId: string, toolName: string) => void;
+    onToggleAllMcpServerTools?: (serverId: string, toolNames: string[], enable: boolean) => void;
+    /** Approved MCP tools per server (default: all tools approved) */
+    approvedMcpTools?: Map<string, Set<string>>;
+    onToggleMcpToolApproval?: (serverId: string, toolName: string) => void;
+    skills?: SkillInfo[];
+    skillsLoading?: boolean;
+    enabledSkills?: Set<string>;
+    onToggleSkill?: (skillId: string) => void;
+    onToggleAllSkills?: (skillIds: string[], enable: boolean) => void;
+    /** Approved skills set (default: all skills approved) */
+    approvedSkills?: Set<string>;
+    onToggleSkillApproval?: (skillId: string) => void;
+    /** API base URL passed to MCP indicator */
+    apiBase?: string;
+    /** Auth token passed to MCP indicator */
+    authToken?: string;
+    /** Pre-fetched MCP status from WebSocket — bypasses REST polling */
+    mcpStatusData?: McpToolsetsStatusResponse | null;
 }
-/**
- * InputPrompt — Integrated chat input with header, input area, and footer.
- */
-export declare function InputPrompt({ variant, placeholder, isLoading, isKernelBusy, onSend, onStop, autoFocus, focusTrigger, showBorderTop, showBackground, padding, disabled, readOnly, sx, value: controlledValue, onChange: controlledOnChange, headerContent, footerContent, footerRightContent, }: InputPromptProps): import("react/jsx-runtime").JSX.Element;
-export default InputPrompt;
+export declare function InputPrompt({ input, setInput, isLoading, kernelStatus, connectionConfirmed, placeholder, typingSuggestions, autoFocus, focusTrigger, padding, placement, floatingAnchor, draggable, container, footerExtras, leadingPanel, trailingPanel, onSend, onStop, disableInputPrompt, promptVariant, mentionableAgents, promptHistory, headerContent, showAgentsMenu, showInlineAgentsMenu, agents, selectedAgentId, onSelectAgent, showTokenUsage, showContextRing, agentUsage, showModelSelector, showToolsMenu, showSkillsMenu, showSuggestionsMenu, suggestions, codemodeEnabled, onToggleCodemode, isA2AProtocol, hasConfigData, hasSkillsData, configLoading, models, selectedModel, onModelSelect, availableTools, mcpServers, enabledMcpTools, enabledMcpToolCount, onToggleMcpTool, onToggleAllMcpServerTools, approvedMcpTools, onToggleMcpToolApproval, skills, skillsLoading, enabledSkills, onToggleSkill, onToggleAllSkills, approvedSkills, onToggleSkillApproval, apiBase, authToken, mcpStatusData, }: InputPromptProps): import("react").JSX.Element;

package/lib/chat/prompt/InputPrompt.js

@@ -1,83 +1,164 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, lazy, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { Box } from '@datalayer/primer-addons';
-import { InputPromptHeader } from './InputPromptHeader';
-import { InputPromptFooter } from './InputPromptFooter';
-import { InputPromptText } from './InputPromptText';
-import { InputPromptLexical } from './InputPromptLexical';
-/**
- * InputPrompt — Integrated chat input with header, input area, and footer.
+import { Text } from '@primer/react';
+import { InputPromptBase } from './InputPromptBase';
+import { FloatingCard } from './FloatingCard';
+import { BelowPromptHeader } from './header';
+import { BelowPromptFooter } from './footer';
+import { AgentsMenu, InlineAgentsMenu, ToolsMenu, SkillsMenu, ModelSelector, SuggestionsMenu, } from './menus';
+import { McpStatusIndicator } from '../indicators/McpStatusIndicator';
+import { SkillsStatusIndicator } from '../indicators/SkillsStatusIndicator';
+/*
+ * The context-window pie, fetched when there is usage to draw.
+ *
+ * It renders with ECharts — about 350 KiB compressed — and this composer is
+ * part of every embedded workspace, so a static import put ECharts in the
+ * first download of any page with a chat, whether or not it ever showed a
+ * figure. Usage arrives after the first turn at the earliest, and a host that
+ * hides the counters never draws it.
  */
-export function InputPrompt({ variant = 'text', placeholder = 'Ask anything…', isLoading = false, isKernelBusy = false, onSend, onStop, autoFocus = false, focusTrigger, showBorderTop = true, showBackground = true, padding = 3, disabled = false, readOnly = false, sx, value: controlledValue, onChange: controlledOnChange, headerContent, footerContent, footerRightContent, }) {
-    // ---- Controlled / uncontrolled state -----------------------------------
-    const [internalInput, setInternalInput] = useState('');
-    const input = controlledValue !== undefined ? controlledValue : internalInput;
-    const setInput = controlledOnChange !== undefined ? controlledOnChange : setInternalInput;
-    // ---- Refs (text variant only) ------------------------------------------
-    const inputRef = useRef(null);
-    // ---- Auto-focus --------------------------------------------------------
-    useEffect(() => {
-        if (autoFocus && variant === 'text' && inputRef.current) {
-            const t = setTimeout(() => inputRef.current?.focus(), 100);
-            return () => clearTimeout(t);
-        }
-    }, [autoFocus, variant]);
-    // ---- Refocus when focusTrigger changes ---------------------------------
-    useEffect(() => {
-        if (focusTrigger !== undefined &&
-            focusTrigger > 0 &&
-            variant === 'text' &&
-            inputRef.current) {
-            const t = setTimeout(() => inputRef.current?.focus(), 150);
-            return () => clearTimeout(t);
-        }
-    }, [focusTrigger, variant]);
-    // ---- Refocus after loading completes -----------------------------------
-    const wasLoadingRef = useRef(false);
-    useEffect(() => {
-        if (wasLoadingRef.current &&
-            !isLoading &&
-            variant === 'text' &&
-            inputRef.current) {
-            const t = setTimeout(() => inputRef.current?.focus(), 50);
-            return () => clearTimeout(t);
-        }
-        wasLoadingRef.current = isLoading;
-    }, [isLoading, variant]);
-    // ---- Send / Stop handlers ----------------------------------------------
-    const handleSend = useCallback(() => {
-        if (!input.trim() || isLoading || disabled || readOnly)
-            return;
-        const message = input.trim();
-        if (controlledValue === undefined) {
-            setInput('');
-        }
-        onSend(message);
-    }, [input, isLoading, disabled, readOnly, onSend, setInput, controlledValue]);
-    const handleStop = useCallback(() => {
-        onStop?.();
-    }, [onStop]);
-    // ---- Render ------------------------------------------------------------
-    return (_jsx(Box, { sx: sx, children: _jsx(Box, { sx: {
-                p: padding,
-                ...(showBorderTop && {
-                    borderTop: '1px solid',
-                    borderColor: 'border.default',
-                }),
-                ...(showBackground && {
-                    bg: 'canvas.subtle',
-                }),
-            }, children: _jsxs(Box, { sx: {
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                    borderRadius: 2,
-                    bg: 'canvas.default',
-                    overflow: 'hidden',
-                    transition: 'border-color 0.2s ease',
-                    '&:focus-within': {
-                        borderColor: 'accent.fg',
-                        boxShadow: (t) => `0 0 0 1px ${t?.colors?.accent?.fg ?? '#16A085'}`,
-                    },
-                }, children: [_jsx(InputPromptHeader, { children: headerContent }), variant === 'lexical' ? (_jsx(InputPromptLexical, { value: input, onChange: setInput, placeholder: placeholder, disabled: isLoading || disabled, readOnly: readOnly, onSubmit: handleSend, autoFocus: autoFocus })) : (_jsx(InputPromptText, { value: input, onChange: setInput, placeholder: placeholder, disabled: isLoading || disabled, readOnly: readOnly, onSubmit: handleSend, inputRef: inputRef })), _jsx(InputPromptFooter, { isLoading: isLoading, isKernelBusy: isKernelBusy, sendDisabled: !input.trim() || disabled || readOnly, onSend: handleSend, onStop: handleStop, rightContent: footerRightContent, children: footerContent })] }) }) }));
+const ContextPie = lazy(() => import('../usage/ContextPie').then(module => ({
+    default: module.ContextPie,
+})));
+/* Shared, so a defaulted prop is the same object on every render: a fresh
+   `new Map()` per render is a new dependency for anything memoising on it. */
+const EMPTY_TOOL_MAP = new Map();
+const EMPTY_ID_SET = new Set();
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export function InputPrompt({ input, setInput, isLoading, kernelStatus, connectionConfirmed, placeholder, typingSuggestions, autoFocus, focusTrigger, padding, placement, floatingAnchor = 'bottom', draggable = false, container, footerExtras, leadingPanel, trailingPanel, onSend, onStop, disableInputPrompt = false, promptVariant, mentionableAgents, promptHistory, headerContent, showAgentsMenu = false, showInlineAgentsMenu = true, agents = [], selectedAgentId, onSelectAgent, showTokenUsage, showContextRing = false, agentUsage, showModelSelector, showToolsMenu, showSkillsMenu, showSuggestionsMenu = true, suggestions, codemodeEnabled, onToggleCodemode, isA2AProtocol, hasConfigData, hasSkillsData, configLoading = false, models = [], selectedModel = '', onModelSelect = () => { }, availableTools = [], mcpServers = [], enabledMcpTools = EMPTY_TOOL_MAP, enabledMcpToolCount = 0, onToggleMcpTool = () => { }, onToggleAllMcpServerTools = () => { }, approvedMcpTools = EMPTY_TOOL_MAP, onToggleMcpToolApproval = () => { }, skills = [], skillsLoading = false, enabledSkills = EMPTY_ID_SET, onToggleSkill = () => { }, onToggleAllSkills = () => { }, approvedSkills = EMPTY_ID_SET, onToggleSkillApproval = () => { }, apiBase, authToken, mcpStatusData, }) {
+    const isKernelBusy = kernelStatus === 'busy';
+    /*
+     * Each menu is offered when it is switched on *and* has something behind it.
+     *
+     * The bar used to ask one question — has any request come back — and answer
+     * for all four menus at once. So a chat with a model list and no config
+     * endpoint showed "Loading controls..." over a model menu that was ready,
+     * and went on showing it, because the request it was waiting for was never
+     * going to arrive.
+     */
+    /*
+     * Offered for one agent as much as for several.
+     *
+     * `> 1` treated the control as a *switch* — useless with nothing to switch
+     * to — but it is also a label: it says who is answering, which is worth
+     * knowing in a chat with exactly one agent and no other place that says so.
+     * The menu then simply has one row, already selected.
+     */
+    /*
+     * Offered because the host asked for them, not because they have contents.
+     *
+     * Each of these used to require something behind it — a model in the list, a
+     * config request answered, a skill loaded — so a chat that had asked for all
+     * four showed however many happened to be populated, and the row's shape
+     * changed as answers arrived. Worse, "no skills" and "skills not reported"
+     * looked identical: both were an absent menu.
+     *
+     * A menu that opens onto nothing says nothing is there, which is an answer.
+     * An absent menu is not.
+     */
+    const agentsOffered = showAgentsMenu && agents.length > 0;
+    /* The same control, drawn in the prompt as well as under it. */
+    const inlineAgents = agentsOffered && showInlineAgentsMenu;
+    const modelsOffered = showModelSelector;
+    const toolsOffered = showToolsMenu;
+    const skillsOffered = showSkillsMenu;
+    /*
+     * The suggestions control: the openers as a menu, when there are any.
+     *
+     * `suggestions` when the host gave them; otherwise the typing openers,
+     * which are the same sentences in the placeholder's clothes. Picking one
+     * writes the box and bumps a local focus nonce, so the caret lands where
+     * the words did without the host having to wire anything.
+     */
+    const suggestionItems = suggestions ??
+        (typingSuggestions ?? []).map(text => ({ title: text, message: text }));
+    const suggestionsOffered = showSuggestionsMenu && suggestionItems.length > 0;
+    const [pickedFocus, setPickedFocus] = useState(0);
+    const anyOffered = agentsOffered || modelsOffered || toolsOffered || skillsOffered;
+    const extrasOffered = Boolean(footerExtras);
+    /* Still coming, as opposed to never coming. Only a menu that was asked for
+       and is genuinely waiting justifies the word "loading". */
+    const stillLoading = (showToolsMenu && !hasConfigData && configLoading) ||
+        (showSkillsMenu && !hasSkillsData && skillsLoading);
+    // No bar at all when there is nothing to put in it and nothing on its way:
+    // an empty bordered strip is worse than no strip.
+    const showSelectorsBar = anyOffered || stillLoading || extrasOffered;
+    /*
+     * The agents are in hand the moment the bar renders — they come from the
+     * team the workspace was opened with, not from a query — so a bar that
+     * carries them has content whether or not the tool and skill requests have
+     * come back yet. Without this a workspace with only an agent chooser sat on
+     * "Loading controls..." for ever.
+     */
+    /*
+     * Shown as soon as the agent accounts for itself, not once it has spent
+     * something.
+     *
+     * `totalTokens > 0` kept the bar hidden until after the first answer, so it
+     * arrived mid-conversation and pushed the prompt down with it — and the
+     * counts beside the ring could never read zero, which is the one state that
+     * says "connected, nothing sent yet". Both harnesses now report a snapshot
+     * from the start; this shows it.
+     */
+    const hasContext = Boolean(agentUsage && !agentUsage.error);
+    const body = (_jsxs(Box, { children: [leadingPanel, _jsx(InputPromptBase, { variant: promptVariant, mentionableAgents: mentionableAgents, promptHistory: promptHistory, 
+                /*
+                  Whatever the host puts inside the prompt, and the agent chip beside
+                  it. Both, rather than either: a host contributing its own controls
+                  should not lose the one control that says who is being addressed.
+                */
+                headerContent: inlineAgents || headerContent ? (_jsxs(_Fragment, { children: [inlineAgents ? (_jsx(InlineAgentsMenu, { agents: agents, selectedAgentId: selectedAgentId, onSelectAgent: onSelectAgent })) : null, headerContent] })) : undefined, placeholder: placeholder || 'Type a message...', typingSuggestions: typingSuggestions, isLoading: isLoading, isKernelBusy: isKernelBusy, disabled: disableInputPrompt, readOnly: !connectionConfirmed, onSend: onSend, onStop: onStop, autoFocus: autoFocus, focusTrigger: (focusTrigger ?? 0) + pickedFocus, padding: padding, value: input, onChange: setInput, footerRightContent: _jsxs(_Fragment, { children: [_jsx(McpStatusIndicator, { apiBase: apiBase, authToken: authToken, data: mcpStatusData }), _jsx(SkillsStatusIndicator, { skillsCount: skills.length, enabledCount: enabledSkills.size, loading: skillsLoading })] }) }), _jsx(BelowPromptHeader, { disabled: disableInputPrompt, stacks: showTokenUsage
+                    ? [
+                        {
+                            id: 'context-usage',
+                            // `ContextPie` is the band: it brings its own padding and
+                            // background and expects the full width. As a flex item it
+                            // shrank to its content and left a pale stripe beside it.
+                            layout: 'block',
+                            /*
+                              No band when there is nothing to put in it.
+          
+                              The 8px was there to stop the layout jumping when usage
+                              arrived late. For an agent that never reports any — an
+                              in-page one with no server keeping the account — it is a
+                              permanent white stripe between the prompt and its footer,
+                              reserved for a thing that is not coming.
+                            */
+                            minHeight: hasContext && agentUsage ? 28 : 0,
+                            px: 0,
+                            py: 0,
+                            content: hasContext && agentUsage ? (_jsx(Suspense, { fallback: null, children: _jsx(ContextPie, { agentUsage: agentUsage, padding: padding, showContextRing: showContextRing }) })) : null,
+                        },
+                    ]
+                    : [] }), _jsx(BelowPromptFooter, { disabled: disableInputPrompt, stacks: showSelectorsBar
+                    ? [
+                        {
+                            id: 'session-controls',
+                            px: padding,
+                            py: 0.5,
+                            minHeight: 36,
+                            bordered: true,
+                            subtle: true,
+                            content: (_jsx(_Fragment, { children: anyOffered || extrasOffered || suggestionsOffered ? (_jsxs(_Fragment, { children: [agentsOffered && (_jsx(AgentsMenu, { agents: agents, selectedAgentId: selectedAgentId, onSelectAgent: onSelectAgent })), toolsOffered && (_jsx(ToolsMenu, { codemodeEnabled: codemodeEnabled, onToggleCodemode: onToggleCodemode, mcpServers: mcpServers, enabledMcpTools: enabledMcpTools, enabledMcpToolCount: enabledMcpToolCount, onToggleMcpTool: onToggleMcpTool, onToggleAllMcpServerTools: onToggleAllMcpServerTools, approvedMcpTools: approvedMcpTools, onToggleMcpToolApproval: onToggleMcpToolApproval, availableTools: availableTools })), skillsOffered && (_jsx(SkillsMenu, { skills: skills, skillsLoading: skillsLoading, enabledSkills: enabledSkills, onToggleSkill: onToggleSkill, onToggleAllSkills: onToggleAllSkills, approvedSkills: approvedSkills, onToggleSkillApproval: onToggleSkillApproval })), modelsOffered && (_jsx(ModelSelector, { models: models, selectedModel: selectedModel, onModelSelect: onModelSelect, isA2AProtocol: isA2AProtocol })), suggestionsOffered && (_jsx(SuggestionsMenu, { suggestions: suggestionItems, onPick: text => {
+                                                setInput(text);
+                                                setPickedFocus(n => n + 1);
+                                            } })), extrasOffered && (_jsx(Box, { sx: {
+                                                marginLeft: 'auto',
+                                                display: 'inline-flex',
+                                                alignItems: 'center',
+                                                gap: 1,
+                                            }, children: footerExtras }))] })) : (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Loading controls..." })) })),
+                        },
+                    ]
+                    : [] }), trailingPanel] }));
+    // The same prompt either way: the placement only decides where it stands
+    // (`draggable` is the old spelling of `'floating'`), and the container
+    // only decides which subtree it stands in.
+    const floating = (placement ?? (draggable ? 'floating' : 'docked')) === 'floating';
+    const framed = floating ? (_jsx(FloatingCard, { anchor: floatingAnchor, children: body })) : (body);
+    return container ? createPortal(framed, container) : framed;
 }
-export default InputPrompt;

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

@@ -0,0 +1,112 @@
+/**
+ * InputPromptBase — the editor, its header and its footer component.
+ *
+ * Layout (top → bottom):
+ *   1. Header   – slot for dropdowns / indicators
+ *   2. Input    – "text" (textarea) or "lexical" (plain-text Lexical editor)
+ *   3. Footer   – left slot for controls, submit / stop buttons on the right
+ *
+ * The component is wrapped in a rounded container with a subtle border,
+ * giving it a more integrated visual appearance.
+ *
+ * It also keeps the prompt history the arrow keys walk: seeded from the
+ * runtime, extended by what is sent from here.
+ *
+ * @module chat/prompt/InputPromptBase
+ */
+import type { ReactNode } from 'react';
+import type { PromptStack } from './stack';
+import type { MentionableAgent } from './plugins/AgentMentionPlugin';
+/** Input variant type. */
+export type InputPromptVariant = 'text' | 'lexical';
+/**
+ * Props for the InputPrompt component.
+ */
+export interface InputPromptBaseProps {
+    /**
+     * Which editor the prompt uses — `'lexical'` (default) or `'text'`.
+     *
+     * Lexical is the one with the `@` menu and the mention chips, and a host had
+     * to opt into it by name to get either — so every prompt that had not been
+     * told about the feature silently did without it. `'text'` remains for a
+     * host that wants a plain textarea and nothing else.
+     */
+    variant?: InputPromptVariant;
+    /** Placeholder text */
+    placeholder?: string;
+    /**
+     * Suggestions to type out in the placeholder, one after another, on a loop.
+     *
+     * The chat's own openers, usually. An empty composer asks "what can I ask
+     * this thing?" and the empty state answers it only until the first message
+     * is sent; typing the answers into the box keeps answering it afterwards.
+     *
+     * The placeholder only — never the value. It stops while the prompt has
+     * focus and for a reader who has asked for reduced motion. Absent or empty
+     * leaves `placeholder` standing still.
+     */
+    typingSuggestions?: string[];
+    /** Whether the agent is loading / streaming */
+    isLoading?: boolean;
+    /** Whether the connected kernel is currently busy */
+    isKernelBusy?: boolean;
+    /** Callback when a message is submitted */
+    onSend: (message: string) => void;
+    /** Callback when the stop button is clicked */
+    onStop?: () => void;
+    /** Auto-focus the input on mount */
+    autoFocus?: boolean;
+    /** Trigger value change to refocus input */
+    focusTrigger?: number;
+    /** Whether to show a border on top of the outer wrapper */
+    showBorderTop?: boolean;
+    /** Whether to use a subtle background */
+    showBackground?: boolean;
+    /** Custom outer padding (default: 3) */
+    padding?: number;
+    /** Whether the prompt is disabled */
+    disabled?: boolean;
+    /** Whether the prompt is read-only */
+    readOnly?: boolean;
+    /**
+     * Agents this prompt may address by typing `@`.
+     *
+     * Lexical only: the plain textarea has nowhere to draw a menu, and a
+     * suggestion a person cannot see is worse than none.
+     */
+    mentionableAgents?: MentionableAgent[];
+    /**
+     * What was sent to this agent before this composer mounted, oldest first.
+     *
+     * Seeds the history the arrow keys walk: up shows the previous prompt, down
+     * the next, and past the newest whatever was being typed. Whatever is sent
+     * from here joins the list as it goes.
+     */
+    promptHistory?: readonly string[];
+    /** Additional sx props for the outer container */
+    sx?: Record<string, unknown>;
+    /** Controlled input value (external state) */
+    value?: string;
+    /** Controlled input onChange (external state) */
+    onChange?: (value: string) => void;
+    /** Content rendered in the header slot */
+    headerContent?: ReactNode;
+    /**
+     * Extra bands above the input, inside the box.
+     *
+     * `headerContent` is the single-band shorthand; this is how a host adds a
+     * second without the prompt knowing what is in it.
+     */
+    headerStacks?: readonly PromptStack[];
+    /** Content rendered on the left side of the footer */
+    footerContent?: ReactNode;
+    /** Extra bands between the input and the control band. */
+    footerStacks?: readonly PromptStack[];
+    /** Content rendered on the right side of the footer, next to send/stop */
+    footerRightContent?: ReactNode;
+}
+/**
+ * InputPromptBase — the editor, its header and its footer with header, input area, and footer.
+ */
+export declare function InputPromptBase({ variant, placeholder, typingSuggestions, isLoading, isKernelBusy, onSend, onStop, autoFocus, focusTrigger, showBorderTop, showBackground, padding, disabled, readOnly, mentionableAgents, promptHistory, sx, value: controlledValue, onChange: controlledOnChange, headerContent, headerStacks, footerContent, footerStacks, footerRightContent, }: InputPromptBaseProps): import("react").JSX.Element;
+export default InputPromptBase;