@datalayer/agent-runtimes 1.0.28 → 1.3.10

package/lib/chat/base/ChatBase.js

@@ -30,16 +30,22 @@ import { DEFAULT_SERVICE_URLS } from '@datalayer/core/lib/api/constants';
 import { useChatStore } from '../../stores/chatStore';
 import { useConversationStore } from '../../stores/conversationStore';
 import { generateMessageId, createUserMessage, createAssistantMessage, } from '../../types/messages';
+import { AgentDetails } from '../../agents/AgentDetails';
+import { AI_MODEL_CATALOGUE } from '../../specs/models';
 import { internalQueryClient, isToolCallMessage, convertHistoryToDisplayItems, createProtocolAdapter, getApiBaseFromConfig, sanitizeAssistantContent, } from '../../utils';
 import { useConfig, useSkills, useSkillActions, useContextSnapshot, useSandbox, } from '../../hooks';
 import { useAgentRuntimeWebSocket } from '../../hooks/useAgentRuntimes';
 import { agentRuntimeStore, useAgentRuntimeStore, useAgentRuntimeWsState, } from '../../stores/agentRuntimeStore';
-import { ChatBaseHeader } from '../header/ChatHeaderBase';
+import { ChatBaseHeader, } from '../header/ChatHeaderBase';
+import { useChatAvailability } from './ChatAvailability';
 import { ChatEmptyState } from '../display/EmptyState';
+import { notebookToolSurfacesRenderer } from '../messages/NotebookToolSurfaces';
 import { FloatingBrandButton } from '../display/FloatingBrandButton';
 import { PoweredByTag } from '../display/PoweredByTag';
+import { EphemeralSurfaceControl } from '../EphemeralSurfaceControl';
 import { ChatMessageList, } from '../messages/ChatMessageList';
-import { InputToolbar } from '../prompt/InputFooter';
+import { InputPrompt } from '../prompt/InputPrompt';
+import { isFloatingChatViewMode } from '../viewModes';
 import { ToolApprovalBanner, ToolApprovalDialog, } from '../tools';
 import { EphemeralNotebook } from '../notebook/EphemeralNotebook';
 // EphemeralDocument statically imports `@datalayer/jupyter-lexical` (which
@@ -492,11 +498,11 @@ export function ChatBase(props) {
 // ---------------------------------------------------------------------------
 // ChatBaseInner — contains all actual logic
 // ---------------------------------------------------------------------------
-function ChatBaseInner({ title, subtitle, showHeader = false, showTokenUsage = true, showLoadingIndicator = true, showErrors = true, showInput = true, showModelSelector = true, showToolsMenu = true, showSkillsMenu = true, disableInputPrompt = false, overlay, launching = false, launchingMessage, autoConnect = true, codemodeEnabled = false, onToggleCodemode, initialModel, availableModels, mcpServers, initialSkills: _initialSkills, className, loadingState, headerActions, kernelIndicatorState, kernelIndicatorPlacement = 'left', kernel, kernelEnvironmentName, kernelCpu, kernelMemory, kernelGpu, themeVariant, colorMode, chatViewMode, onChatViewModeChange, 
+function ChatBaseInner({ title, subtitle, showHeader = false, showTokenUsage = true, showContextRing = false, showLoadingIndicator = true, showErrors = true, showInput = true, showModelSelector = true, showToolsMenu = true, showSkillsMenu = true, disableInputPrompt = false, promptVariant, mentionableAgents: mentionableAgentsProp, showAgentsMenu = true, agents: agentsProp, selectedAgentId, onSelectAgent, disabled: disabledProp, disableReason: disableReasonProp, overlay, launching = false, launchingMessage, autoConnect = true, codemodeEnabled = false, onToggleCodemode, initialModel, availableModels, mcpServers, initialSkills: _initialSkills, className, loadingState, headerActions, kernelIndicatorState, kernelIndicatorPlacement = 'left', kernel, kernelEnvironmentName, kernelCpu, kernelMemory, kernelGpu, themeVariant, colorMode, chatViewMode, onChatViewModeChange, disabledViewModes, 
 // Mode selection
-useStore: useStoreMode = true, protocol: protocolRaw, onSendMessage, enableStreaming = false, 
+useStore: useStoreMode = true, protocol: protocolRaw, onSendMessage, onSendReady, onLoadingChange, onContextSnapshot, enableStreaming = false, 
 // Extended props
-brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, emptyState, renderToolResult, footerContent, showInformation = false, onInformationClick, headerContent, children, borderRadius, backgroundColor, border, boxShadow, compact = false, placeholder, description = 'Start a conversation with the AI agent.', onStateUpdate, onNewChat, onClear, onMessagesChange, autoFocus = false, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, focusTrigger, frontendTools: frontendToolsProp, enableEphemeralNotebook = false, initialEphemeralNotebookOpen = true, onEphemeralNotebookOpenChange, enableEphemeralDocument = false, initialEphemeralSurfaceMode, onEphemeralSurfaceModeChange, collapsed = false, onExpandFromCollapsed, ephemeralNotebookToolbar, ephemeralNotebookToolbarExtraItems, ephemeralDocumentToolbarExtraItems, ephemeralNotebookCollaborationProvider, ephemeralNotebookCollaborationDocumentId, ephemeralDocumentCollaboration, ephemeralRuntimeOverride, 
+brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, emptyState, renderToolResult, renderHeader, showTurnFooter = true, notebookToolSurfacesId, footerContent, showInformation = false, onInformationClick, headerContent, children, borderRadius, backgroundColor, border, boxShadow, compact = false, placeholder, description = 'Start a conversation with the AI agent.', onStateUpdate, onNewChat, onClear, onMessagesChange, onItemsChange, onDisplayItemsChange, autoFocus = false, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, focusTrigger, frontendTools: frontendToolsProp, enableEphemeralNotebook = false, initialEphemeralNotebookOpen = true, onEphemeralNotebookOpenChange, enableEphemeralDocument = false, initialEphemeralSurfaceMode, onEphemeralSurfaceModeChange, collapsed = false, onExpandFromCollapsed, ephemeralNotebookToolbar, ephemeralNotebookToolbarExtraItems, ephemeralDocumentToolbarExtraItems, ephemeralNotebookCollaborationProvider, ephemeralNotebookCollaborationDocumentId, ephemeralDocumentCollaboration, ephemeralRuntimeOverride, 
 // Tool invocation hooks
 onToolCallStart, onToolCallComplete, 
 // Identity/Authorization props
@@ -510,12 +516,20 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
     useEffect(() => {
         setupPrimerPortals();
     }, []);
+    // Whether there is anything to talk to. The host usually knows — a browser
+    // sandbox has no agent beside it — and says so once for everything beneath
+    // it; an explicit prop still wins for one particular chat.
+    const ambientAvailability = useChatAvailability();
+    const disabled = disabledProp ?? ambientAvailability.disabled;
+    const disableReason = disableReasonProp ?? ambientAvailability.disableReason;
     const { theme } = useThemeStore();
     const assistantIconColor = getColorPalette(theme, 'dark').textLight;
     // ── Built-in pending approvals from the agent-runtime Zustand store ──
     // When the parent doesn't supply the `pendingApprovals` prop, derive them
     // from the shared store so the banner works out-of-the-box.
     const storeApprovals = useAgentRuntimeStore(s => s.approvals);
+    // Bumped when the transcript changed on the server outside a run.
+    const historyVersion = useAgentRuntimeStore(s => s.historyVersion);
     const storeMcpStatus = useAgentRuntimeStore(s => s.mcpStatus);
     const effectiveMcpStatusData = mcpStatusData ?? storeMcpStatus;
     const protocolConfig = typeof protocolRaw === 'object'
@@ -578,7 +592,40 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
     const notebookVisible = enableEphemeralNotebook && ephemeralSurfaceMode === 'notebook';
     const documentVisible = enableEphemeralDocument && ephemeralSurfaceMode === 'document';
     const surfaceVisible = notebookVisible || documentVisible;
-    const surfaceCollapsed = surfaceVisible && collapsed && Boolean(onExpandFromCollapsed);
+    /*
+     * Collapsed means collapsed, whether or not there is a way back.
+     *
+     * Offering to reopen the conversation is what `onExpandFromCollapsed`
+     * decides, and the affordance below is guarded by it. Requiring it HERE
+     * meant a surface asked to collapse with nothing to expand into — a Code
+     * Sandbox, where nothing is listening — kept the conversation on screen
+     * instead.
+     */
+    const surfaceCollapsed = surfaceVisible && collapsed;
+    /*
+     * The switch between the notebook and the document, for a collapsed chat.
+     *
+     * It normally sits in the chat's header, which is exactly what a collapsed
+     * chat does not draw — so a page without a conversation opened whichever
+     * surface came first and could never leave it. On the surface's own toolbar
+     * it is reachable either way. "Chat only" is not among the choices here:
+     * closing the surface would leave nothing at all.
+     */
+    const collapsedSurfaceControl = surfaceCollapsed
+        ? {
+            key: 'ephemeral-surface',
+            type: 'custom',
+            // Last of the toolbar, away from what acts on the surface itself.
+            order: 900,
+            render: () => (_jsx(EphemeralSurfaceControl, { mode: ephemeralSurfaceMode, onChange: handleEphemeralSurfaceModeChange, enableNotebook: enableEphemeralNotebook, enableDocument: enableEphemeralDocument, enableChatOnly: false })),
+        }
+        : null;
+    const notebookToolbarItems = collapsedSurfaceControl
+        ? [...(ephemeralNotebookToolbarExtraItems ?? []), collapsedSurfaceControl]
+        : ephemeralNotebookToolbarExtraItems;
+    const documentToolbarItems = collapsedSurfaceControl
+        ? [...(ephemeralDocumentToolbarExtraItems ?? []), collapsedSurfaceControl]
+        : ephemeralDocumentToolbarExtraItems;
     // Track the ephemeral notebook's live kernel connection so the chat header
     // renders the same rich `KernelIndicator` details (kernel id, client id,
     // server/ws url, status) as the notebook editor. Without this the header
@@ -624,8 +671,9 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
     }, [documentVisible]);
     // When a companion surface is shown, the chat can be docked as a sidebar
     // (default) or floated over it, driven by the header view-mode toggle.
-    const surfaceChatFloating = surfaceVisible &&
-        (chatViewMode === 'floating' || chatViewMode === 'floating-small');
+    const surfaceChatFloating = surfaceVisible && isFloatingChatViewMode(chatViewMode);
+    // The two smaller floating modes share the compact card over a surface.
+    const compactFloating = chatViewMode === 'floating-small' || chatViewMode === 'floating-draggable';
     // Notebook frontend tools are always created (hooks must be unconditional)
     // but only merged into the tools sent to the agent while the notebook is
     // visible, so the agent can manipulate the live notebook cells. Document
@@ -1110,6 +1158,18 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
     const isA2AProtocol = protocol?.type === 'a2a';
     // ---- Component state ----
     const [displayItems, setDisplayItems] = useState([]);
+    /*
+     * What the harness itself reported, for an agent with no server behind it.
+     *
+     * The last turn *and* the running session. Both, because the bar shows both
+     * — "· 12k ▲ 900 ▼" is the conversation so far and "· turn 800 ▲ 120 ▼" is
+     * what the last exchange cost — and a snapshot carrying only a total leaves
+     * those two lines out entirely.
+     */
+    const [localUsage, setLocalUsage] = useState(null);
+    /* Whether the (i) has been pressed. Its own state rather than a view mode:
+       it is a detour from the conversation, not a place the chat lives. */
+    const [showDetails, setShowDetails] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
     const [liveKernelStatus, setLiveKernelStatus] = useState();
     const [isStreaming, setIsStreaming] = useState(false);
@@ -1231,8 +1291,247 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
         });
         return set;
     }, [localSkillApproval, skillsQuery.data]);
+    /*
+     * What the Tools menu lists.
+     *
+     * The server's builtin tools when there are any, and otherwise the tools
+     * this page gave the agent. An in-page agent has no config endpoint to ask
+     * — that is the whole point of it — so the menu was empty for the one kind
+     * of agent whose tools the browser already knows in full.
+     */
+    const builtinTools = useMemo(() => {
+        /*
+         * Both lists, not one or the other.
+         *
+         * The server's builtin tools and the ones this page handed the agent are
+         * both things it can call, and a menu naming only the first was wrong for
+         * every agent given frontend tools — which is every notebook agent, whose
+         * ability to run a cell lives entirely on this side.
+         *
+         * Server first, because that is the order they were introduced in and a
+         * list that reorders itself as a request lands is one nobody can scan.
+         * De-duplicated by name: a tool implemented on both sides is one tool.
+         */
+        const fromConfig = configQuery.data?.builtinTools ?? [];
+        /*
+         * Including the tools this chat does *not* run.
+         *
+         * An in-page agent's tools are handed to the harness rather than to the
+         * chat — the SDK owns the loop and calls them directly, and giving them
+         * to both would run each one twice — so `frontendTools` is empty for
+         * exactly the agent whose tools live entirely in the page. The menu was
+         * therefore emptiest where the tools were most real.
+         *
+         * Executing a tool and listing it are different jobs. The protocol config
+         * names what the agent can call, which is the question this menu asks.
+         */
+        const inProtocol = protocol?.options
+            ?.frontendTools ?? [];
+        const seen = new Set(fromConfig.map(tool => tool.name));
+        const fromPage = [...(frontendTools ?? []), ...inProtocol]
+            .filter(tool => {
+            if (seen.has(tool.name)) {
+                return false;
+            }
+            seen.add(tool.name);
+            return true;
+        })
+            .map(tool => ({ id: tool.name, name: tool.name }));
+        return [...fromConfig, ...fromPage];
+    }, [configQuery.data?.builtinTools, frontendTools, protocol?.options]);
+    /*
+     * Who is answering, as one row when that is all there is.
+     *
+     * A host with a team passes its own list. Everything else gets the agent
+     * this chat is actually talking to — which the control states rather than
+     * switches, and which nothing else on screen said. It used to be omitted
+     * entirely, so the chip and the footer menu were both simply absent.
+     */
+    const footerAgents = useMemo(() => agentsProp ??
+        (activeAgentId
+            ? [
+                {
+                    id: activeAgentId,
+                    name: title || activeAgentId,
+                    /*
+                      What this agent is for, beside its name.
+                      
+                      The menu renders a description when there is one and a bare
+                      name when there is not, and a single-agent list built from the
+                      id alone therefore opened onto one word. `subtitle` is what a
+                      host writes to say what its chat does, which is the same
+                      sentence a person clicking the agent control is asking for.
+                    */
+                    description: subtitle || description,
+                },
+            ]
+            : []), [agentsProp, activeAgentId, title, subtitle, description]);
+    /*
+     * The models on offer.
+     *
+     * An in-page agent has no config endpoint, and asking one for a catalogue is
+     * asking a page about itself. It does know the model it was built with — the
+     * protocol carries it — so the control names that rather than disappearing.
+     */
+    const browserModel = typeof protocol?.options?.model ===
+        'string'
+        ? (protocol?.options).model
+        : undefined;
+    const offeredModels = useMemo(() => {
+        const fromConfig = availableModels || configQuery.data?.models;
+        if (fromConfig?.length) {
+            return fromConfig;
+        }
+        /*
+         * The catalogue, filtered to what is worth offering.
+         *
+         * A server tells the chat which models it can reach and that answer wins.
+         * Without one — an in-page agent, or a server that has not answered yet —
+         * this used to offer the single model the protocol was built with, which
+         * is a menu with nothing to choose.
+         *
+         * `available` is the filter, not the whole catalogue: twenty-six models,
+         * most of them superseded, is a list nobody reads. The specs say which
+         * four are current.
+         */
+        const catalogued = Object.values(AI_MODEL_CATALOGUE)
+            .filter(model => model.available)
+            .map(model => ({
+            id: model.id,
+            name: model.name,
+            provider: model.provider,
+        }));
+        if (catalogued.length > 0) {
+            return catalogued;
+        }
+        return browserModel
+            ? [{ id: browserModel, name: browserModel, provider: 'inference' }]
+            : [];
+    }, [availableModels, configQuery.data?.models, browserModel]);
+    /*
+     * Who `@` may address.
+     *
+     * The same people the footer offers, unless a host supplies its own list.
+     * It used to be the host's or nothing, so a chat that had not been told
+     * about mentions had no menu at all — and the menu is also how a person
+     * *discovers* that agents can be addressed.
+     *
+     * The one being addressed is listed and disabled rather than dropped: a
+     * menu of one that hides its only row is a menu that looks broken, and
+     * "you are already talking to this one" is a useful thing to be told.
+     */
+    const mentionableAgents = useMemo(() => mentionableAgentsProp ??
+        footerAgents.map(agent => ({
+            name: agent.name,
+            description: agent.description,
+            icon: agent.icon,
+            disabled: agent.id === (selectedAgentId ?? footerAgents[0]?.id),
+            disabledReason: `You are already talking to ${agent.name}`,
+        })), [mentionableAgentsProp, footerAgents, selectedAgentId]);
     const contextSnapshotQuery = useContextSnapshot(configQueriesEnabled && showTokenUsage, protocol?.configEndpoint, protocol?.agentId, protocol?.authToken);
-    const agentUsage = externalContextSnapshot ?? contextSnapshotQuery.data;
+    /*
+     * The window, from whoever can account for it.
+     *
+     * A host's own snapshot first, then the server's, then what the harness
+     * reported as it finished. The last is a partial picture — it knows the
+     * turn's tokens and the model's window, not how they divide between the
+     * system prompt, the tools and the history — so the fields it cannot
+     * honestly fill are left at zero rather than guessed at.
+     */
+    const localSnapshot = useMemo(() => {
+        /*
+         * Only for a harness that has no server keeping the account.
+         *
+         * `enableConfigQuery` is what says a runtime is reporting its own context
+         * over the socket; where one is, this must not shadow it with a partial
+         * picture assembled from turn totals.
+         */
+        if (protocol?.enableConfigQuery) {
+            return undefined;
+        }
+        /* A conservative window. The harness reports what a turn cost, not what
+           the model can hold, and 200k is the smaller of the sizes the models
+           this reaches actually offer — so the bar reads as fuller than the truth
+           rather than emptier, which is the safer way to be wrong about a
+           limit. */
+        const contextWindow = 200_000;
+        return {
+            totalTokens: localUsage?.totalTokens ?? 0,
+            contextWindow,
+            sumResponseInputTokens: localUsage?.sessionInput ?? 0,
+            sumResponseOutputTokens: localUsage?.sessionOutput ?? 0,
+            systemPromptTokens: 0,
+            userMessageTokens: 0,
+            assistantMessageTokens: 0,
+            toolTokens: 0,
+            toolCallTokens: 0,
+            toolReturnTokens: 0,
+            historyToolCallTokens: 0,
+            historyToolReturnTokens: 0,
+            currentToolCallTokens: 0,
+            currentToolReturnTokens: 0,
+            turnUsage: {
+                inputTokens: localUsage?.turnInput ?? 0,
+                outputTokens: localUsage?.turnOutput ?? 0,
+                // Not counted by the harness, and left at zero rather than invented:
+                // the bar reads these only for the numbers it prints beside the ring.
+                requests: 0,
+                toolCalls: 0,
+                toolNames: [],
+                durationSeconds: 0,
+            },
+            sessionUsage: {
+                inputTokens: localUsage?.sessionInput ?? 0,
+                outputTokens: localUsage?.sessionOutput ?? 0,
+                requests: 0,
+                toolCalls: 0,
+                turns: 0,
+                durationSeconds: 0,
+            },
+        };
+    }, [localUsage, protocol?.enableConfigQuery]);
+    /*
+     * Nothing carried over from the agent before this one.
+     *
+     * The runtime store keeps one snapshot, not one per agent, so after a
+     * switch it still holds whatever the previous agent last reported — and the
+     * bar went on showing that conversation's numbers under a new agent's name
+     * until the new one answered. `localUsage` had the same problem from the
+     * other direction: it accumulates a session, and a session belongs to an
+     * agent.
+     *
+     * So the local tally is cleared on a switch, and the store's snapshot is
+     * ignored until it is replaced by a different object — which is the only
+     * signal available that it is the new agent's and not the old one's.
+     */
+    const seenAgent = useRef(activeAgentId);
+    const snapshotAtSwitch = useRef(null);
+    const storeSnapshot = contextSnapshotQuery.data;
+    const storeSnapshotRef = useRef(storeSnapshot);
+    storeSnapshotRef.current = storeSnapshot;
+    useEffect(() => {
+        if (seenAgent.current === activeAgentId) {
+            return;
+        }
+        seenAgent.current = activeAgentId;
+        setLocalUsage(null);
+        snapshotAtSwitch.current = storeSnapshotRef.current ?? null;
+    }, [activeAgentId]);
+    const freshStoreSnapshot = storeSnapshot && storeSnapshot !== snapshotAtSwitch.current
+        ? storeSnapshot
+        : undefined;
+    const agentUsage = externalContextSnapshot ?? freshStoreSnapshot ?? localSnapshot;
+    /*
+     * Handed on to a host that draws its own prompt.
+     *
+     * The loop workspace is one: it renders the composer itself, so the usage
+     * bar beside it can only show what this component passes out. Without this
+     * an in-page agent — whose only account of the window is the totals the
+     * harness reports here — left that bar permanently empty.
+     */
+    useEffect(() => {
+        onContextSnapshot?.(agentUsage);
+    }, [agentUsage, onContextSnapshot]);
     const sandboxStatusQuery = useSandbox(configQueriesEnabled && showHeader, protocol?.configEndpoint, protocol?.authToken, protocol?.agentId);
     // ---- Refs ----
     const adapterRef = useRef(null);
@@ -1266,6 +1565,36 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
     const onToolCallCompleteRef = useRef(onToolCallComplete);
     onToolCallCompleteRef.current = onToolCallComplete;
     const handleRespondRef = useRef(null);
+    // A decision made outside the chat — a host page's own approval banner —
+    // is answered exactly as the tool card's buttons answer it: through the
+    // run's continuation, addressed to the tool call the approval belongs to.
+    useEffect(() => {
+        let lastSeq = agentRuntimeStore.getState().toolDecisionRequest?.seq ?? 0;
+        return agentRuntimeStore.subscribe(state => state.toolDecisionRequest, request => {
+            if (!request || request.seq === lastSeq)
+                return;
+            lastSeq = request.seq;
+            const respond = handleRespondRef.current;
+            if (!respond)
+                return;
+            const normalize = (name) => (name ?? '').toLowerCase().replace(/[-_]/g, '');
+            const calls = Array.from(toolCallsRef.current.values());
+            // By the approval id the tool result carries, else by the tool
+            // name of a call still waiting — the same two matches the card makes.
+            const call = calls.find(entry => entry.result
+                ?.approvalId === request.approvalId) ??
+                calls.find(entry => normalize(entry.toolName) === normalize(request.toolName) &&
+                    (entry.status === 'executing' || entry.status === 'inProgress'));
+            if (!call)
+                return;
+            void respond(call.toolCallId, {
+                type: 'tool-approval-decision',
+                approved: request.approved,
+                approvalId: request.approvalId,
+                toolName: call.toolName,
+            });
+        });
+    }, []);
     const applyServerApprovalDecision = useCallback((approval, approved, note) => {
         if (!approval?.id) {
             return false;
@@ -1394,8 +1723,17 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
     }, [adjustTextareaHeight]);
     // ---- Initialize model and tools when config is available ----
     useEffect(() => {
-        if ((configQuery.data || availableModels) && !selectedModel) {
-            const modelsList = availableModels || configQuery.data?.models || [];
+        /*
+         * `offeredModels`, not the two sources it is built from.
+         *
+         * It also carries the model an in-page agent was built with, for the case
+         * where there is no config endpoint to ask — and this gate read the raw
+         * sources, so that model was offered by the menu and never selected. The
+         * menu draws nothing without a selection, so a browser agent had a model
+         * list of one and no model control at all.
+         */
+        if (offeredModels.length > 0 && !selectedModel) {
+            const modelsList = offeredModels;
             const preferredModel = initialModel || configQuery.data?.defaultModel;
             if (preferredModel) {
                 const modelExists = modelsList.some(m => m.id === preferredModel);
@@ -1439,6 +1777,7 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
         }
     }, [
         configQuery.data,
+        offeredModels,
         selectedModel,
         initialModel,
         availableModels,
@@ -1729,6 +2068,10 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
     }, [useStoreMode, runtimeId]);
     // ---- Conversation history loading ----
     const prevHistoryScopeRef = useRef(undefined);
+    const historyVersionRef = useRef(0);
+    // Set when the next load must come from a fresh snapshot, not the one in
+    // the store: what the store holds is the transcript before the change.
+    const freshSnapshotRef = useRef(false);
     useEffect(() => {
         if (historyScopeId !== prevHistoryScopeRef.current) {
             if (historyScopeId) {
@@ -1742,6 +2085,18 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
         }
         if (!historyScopeId)
             return;
+        if (historyVersion !== historyVersionRef.current) {
+            historyVersionRef.current = historyVersion;
+            if (historyVersion > 0) {
+                // The transcript changed on the server outside a run — a rewind to a
+                // checkpoint. Forget what is shown and load what the agent now has.
+                useConversationStore.getState().clearMessages(historyScopeId);
+                setDisplayItems([]);
+                toolCallsRef.current.clear();
+                historyRetryAttemptsRef.current.set(historyScopeId, 0);
+                freshSnapshotRef.current = true;
+            }
+        }
         const store = useConversationStore.getState();
         const currentlyFetching = store.isFetching(historyScopeId);
         const storedMessages = store.getMessages(historyScopeId);
@@ -1770,7 +2125,10 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
             store.markFetched(historyScopeId);
             setHistoryLoaded(true);
         };
-        const existingMessages = fullContextToMessages();
+        const existingMessages = freshSnapshotRef.current
+            ? []
+            : fullContextToMessages();
+        freshSnapshotRef.current = false;
         if (existingMessages.length > 0) {
             applyMessages(existingMessages);
             return;
@@ -1859,6 +2217,7 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
         wsState,
         activeAgentId,
         historyRefreshTick,
+        historyVersion,
     ]);
     // Keep in-memory store in sync with displayItems
     useEffect(() => {
@@ -1882,6 +2241,15 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
             onMessagesChange?.(messages);
         }
     }, [displayItems, messages, onMessagesChange]);
+    // Every change, streaming included — for a caller following the reply as
+    // it arrives rather than counting messages. See `onItemsChange`.
+    useEffect(() => {
+        onItemsChange?.(displayItems.filter((item) => !isToolCallMessage(item)));
+    }, [displayItems, onItemsChange]);
+    // And everything, tool calls included — see `onDisplayItemsChange`.
+    useEffect(() => {
+        onDisplayItemsChange?.(displayItems);
+    }, [displayItems, onDisplayItemsChange]);
     const padding = compact ? 2 : 3;
     // Derive approval config from protocol for built-in tool approval support
     const approvalConfig = useMemo(() => {
@@ -1912,12 +2280,42 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
         // surface and launching overlay still render; we simply do not connect.
         if (!autoConnect)
             return;
+        // Nor when there is nothing to connect to. A browser sandbox has no agent
+        // behind it, and dialling one would only produce errors the person cannot
+        // act on — the header already says why the chat is off.
+        if (disabled)
+            return;
         const adapter = createProtocolAdapter(protocol);
         if (!adapter)
             return;
         adapterRef.current = adapter;
         setAdapterReady(true);
         unsubscribeRef.current = adapter.subscribe((event) => {
+            /*
+             * Nothing more from a turn the reader has stopped.
+             *
+             * Stopping aborts the request and asks the backend to cancel, and
+             * neither is instant: an SSE stream already in flight keeps delivering,
+             * and a model mid-sentence keeps being paid for tokens that are on the
+             * wire. Until this guard, every one of those still ran through the
+             * handler below — so the transcript went on typing itself for as long
+             * as the turn had left, which is the whole of the "I pressed stop and
+             * it kept going" report. `stoppedRef` was already set here and only two
+             * places downstream ever read it.
+             *
+             * `state-update` and `error` are still let through: they carry the
+             * connection's own condition rather than the turn's output, and a chat
+             * that stops listening to those after a stop is a chat that cannot tell
+             * you it has since disconnected. `done` too — it is what closes the
+             * turn out; suppressing it would leave the session believing a stopped
+             * turn is still running.
+             */
+            if (stoppedRef.current &&
+                event.type !== 'state-update' &&
+                event.type !== 'error' &&
+                event.type !== 'done') {
+                return;
+            }
             switch (event.type) {
                 case 'message':
                     if (event.usage) {
@@ -2206,6 +2604,34 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
                     }
                     break;
                 case 'done':
+                    /*
+                     * What the turn cost, when nobody else is counting.
+                     *
+                     * A server-side agent reports its context through
+                     * `/configure/context`, and that answer wins. An in-page agent has
+                     * no server to ask — so the usage the harness reports here was the
+                     * only account of the window there was, and it was being dropped.
+                     * The bar and its ring simply never appeared for a browser agent.
+                     */
+                    {
+                        const turnInput = event.usage?.promptTokens ?? 0;
+                        const turnOutput = event.usage?.completionTokens ?? 0;
+                        // The parts sum to the total when the harness did not send one:
+                        // keying on `totalTokens` alone dropped turns whose provider
+                        // counted input and output but never totalled them.
+                        const total = event.usage?.totalTokens ?? turnInput + turnOutput;
+                        if (total > 0) {
+                            setLocalUsage(previous => ({
+                                turnInput,
+                                turnOutput,
+                                // Added up, not replaced: the session is every turn so far,
+                                // and the harness reports one turn at a time.
+                                sessionInput: (previous?.sessionInput ?? 0) + turnInput,
+                                sessionOutput: (previous?.sessionOutput ?? 0) + turnOutput,
+                                totalTokens: total,
+                            }));
+                        }
+                    }
                     // The adapter signals the entire multi-turn conversation
                     // (including all continuations) has finished.
                     if (suppressAssistantTextForToolOnlyRef.current &&
@@ -2584,13 +3010,27 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
         setIsLoading(false);
         setIsStreaming(false);
         agentRuntimeStore.getState().requestRefresh(activeAgentId);
+        // The boxes under the delegation cards read the runtime store, not the
+        // tool calls above; without this they keep their dots until the server's
+        // own stop event arrives — if it ever does.
+        agentRuntimeStore.getState().stopSubagentActivity();
         suppressAssistantTextForToolOnlyRef.current = false;
         currentAssistantMessageRef.current = null;
         // Also interrupt any code running in the sandbox (best-effort).
         sandboxStatusQuery.interrupt();
-        // Interrupt the connected notebook kernel as well (best-effort),
-        // matching the toolbar's stop/interrupt behavior.
-        if (kernel && kernel.status === 'busy') {
+        /*
+         * Interrupt the connected notebook kernel too, whatever it claims to be
+         * doing.
+         *
+         * This used to fire only when `kernel.status === 'busy'`, and that status
+         * is a value pushed from the server: a cell submitted a moment ago is
+         * running while the client still reads `idle`, which is precisely the
+         * window somebody hits Stop in. The check therefore skipped the interrupt
+         * exactly when it was wanted. Interrupting an idle kernel costs nothing —
+         * there is no execution to raise `KeyboardInterrupt` in — so the test was
+         * only ever able to do harm.
+         */
+        if (kernel) {
             void kernel.interrupt().catch(() => { });
         }
     }, [
@@ -2615,6 +3055,39 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
         onNewChat?.();
         headerButtons?.onNewChat?.();
     }, [clearStoreMessages, onNewChat, headerButtons, useStoreMode, runtimeId]);
+    // Hand the send function to a host that owns the input box (the LOOP
+    // workspace). Withdrawn on unmount so nothing holds a stale sender.
+    useEffect(() => {
+        if (!onSendReady)
+            return undefined;
+        if (!adapterReady && !onSendMessage) {
+            onSendReady(null);
+            return undefined;
+        }
+        onSendReady({
+            send: (message) => {
+                void handleSend(message);
+            },
+            stop: handleStop,
+            // The same reset the header's + performs, for a host whose controls
+            // live outside this component — the LOOP prompt's + reaches it here.
+            newChat: handleNewChat,
+        });
+        return () => {
+            onSendReady(null);
+        };
+    }, [
+        onSendReady,
+        adapterReady,
+        onSendMessage,
+        handleSend,
+        handleStop,
+        handleNewChat,
+    ]);
+    // Streaming state, for a host that draws the prompt.
+    useEffect(() => {
+        onLoadingChange?.(isLoading);
+    }, [onLoadingChange, isLoading]);
     // ---- handleClear ----
     const handleClear = useCallback(() => {
         if (window.confirm('Clear all messages?')) {
@@ -2628,6 +3101,18 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
             headerButtons?.onClear?.();
         }
     }, [clearStoreMessages, onClear, headerButtons, useStoreMode, runtimeId]);
+    // ---- Turn removal (the TurnFooter's remove action) ----
+    const handleRemoveItems = useCallback((ids) => {
+        const drop = new Set(ids);
+        setDisplayItems(prev => prev.filter(item => !drop.has(item.id)));
+        // The tool-call registry mirrors the transcript; a removed turn's calls
+        // must not linger there or a late protocol event would resurrect them.
+        for (const [toolCallId, toolCall] of toolCallsRef.current.entries()) {
+            if (drop.has(toolCall.id)) {
+                toolCallsRef.current.delete(toolCallId);
+            }
+        }
+    }, []);
     // ---- HITL respond handler (passed to MessageList) ----
     const handleRespond = useCallback(async (toolCallId, result) => {
         const existingToolCall = toolCallsRef.current.get(toolCallId);
@@ -2812,7 +3297,7 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
         // Decision dispatch happens here; continuation is resumed on server echo.
         await onRejectApproval?.(approvalId, note);
     }, [onRejectApproval]);
-    // ---- Compute data for InputToolbar ----
+    // ---- Compute data for the prompt ----
     // Merge real-time WebSocket MCP status into the cached config data so the
     // dropdown reflects live availability even when the config query was cached
     // before the MCP servers finished starting.
@@ -2875,6 +3360,17 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
         return merged;
     }, [configMcpServers, effectiveMcpStatusData, mcpServers]);
     // ---- Not ready ----
+    /*
+     * The transcript's tool renderer: the host's own, or — when a notebook was
+     * named — the built-in surfaces that show what each cell tool did. Baked
+     * in here rather than in any workspace, so every chat with a headless
+     * notebook gets the same transcript. Above the early return below, as
+     * every hook must be.
+     */
+    const effectiveRenderToolResult = useMemo(() => renderToolResult ??
+        (notebookToolSurfacesId
+            ? notebookToolSurfacesRenderer(notebookToolSurfacesId)
+            : undefined), [renderToolResult, notebookToolSurfacesId]);
     if (!ready) {
         return (_jsx(Box, { className: className, sx: {
                 display: 'flex',
@@ -2896,8 +3392,21 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
     const indicatorApiBase = protocol?.configEndpoint
         ? protocol.configEndpoint.replace(/\/api\/v1\/(config|configure)\/?$/, '')
         : undefined;
+    /*
+     * Whether the composer may be typed in.
+     *
+     * It waits for the config query because that is the round trip proving the
+     * agent is reachable. The condition has to mirror `configQueriesEnabled`
+     * exactly, though: a protocol that never runs the query has nothing to wait
+     * for, and waiting anyway leaves the input `readOnly` for good — selectable,
+     * focusable, and silently ignoring every keystroke.
+     *
+     * `=== false` was too narrow for that. A config that simply omits the flag —
+     * an in-page agent has no endpoint to ask — is equally never going to
+     * produce data.
+     */
     const connectionConfirmed = !protocol ||
-        protocol.enableConfigQuery === false ||
+        !protocol.enableConfigQuery ||
         !!configQuery.data ||
         !!skillsQuery.data;
     const resolvedDescription = description || configQuery.data?.welcomeMessage || '';
@@ -2906,26 +3415,112 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
         ? suggestions
         : Array.isArray(serverSuggestions) && serverSuggestions.length > 0
             ? serverSuggestions
-                .map(item => String(item || '').trim())
-                .filter(Boolean)
-                .map(item => ({ title: item, message: item }))
+                /*
+                  Either shape. A running agent may be older than the catalogue it
+                  was built from, where a suggestion was a bare string —
+                  `String(item)` on the mapping form yields "[object Object]",
+                  which is a chip that sends nonsense rather than one that is
+                  absent.
+                */
+                .map(item => {
+                if (typeof item === 'string') {
+                    const text = item.trim();
+                    return { title: text, message: text };
+                }
+                const text = (item?.text ?? '').trim();
+                // The summary is the label when the spec gave one.
+                const summary = (item?.summary ?? '').trim();
+                return { title: summary || text, message: text };
+            })
+                .filter(item => item.message)
             : undefined;
     const messagesContent = children ? (children) : (_jsx(Box, { sx: {
             display: 'flex',
             flexDirection: 'column',
             minHeight: 0,
+            /*
+              A reading column, not a full-bleed sheet.
+    
+              The transcript keeps a book-page width and centres itself; on a
+              narrow chat column the cap never binds and nothing changes. The
+              rows inside carry their own horizontal padding, which becomes the
+              margin once the cap does bind.
+            */
+            width: '100%',
+            maxWidth: 920,
+            mx: 'auto',
             bg: 'canvas.default',
-        }, children: _jsx(ChatMessageList, { displayItems: displayItems, isLoading: isLoading, isStreaming: isStreaming, showLoadingIndicator: showLoadingIndicator, hideMessagesAfterToolUI: hideMessagesAfterToolUI, avatarConfig: defaultAvatarConfig, padding: padding, renderToolResult: renderToolResult, approvalConfig: approvalConfig, messagesEndRef: messagesEndRef, onRespond: handleRespond, emptyContent: launching ? null : (_jsx(ChatEmptyState, { emptyState: emptyState, brandIcon: brandIcon, description: resolvedDescription, suggestions: resolvedSuggestions, submitOnSuggestionClick: submitOnSuggestionClick, onSuggestionSubmit: handleSuggestionSubmit, onSuggestionFill: handleSuggestionFill })) }) }));
-    const inputToolbar = showInput ? (_jsx(InputToolbar, { input: input, setInput: setInput, isLoading: isLoading, kernelStatus: liveKernelStatus, connectionConfirmed: connectionConfirmed, placeholder: placeholder, autoFocus: autoFocus, focusTrigger: focusTrigger, padding: padding, onSend: () => handleSend(), onStop: handleStop, disableInputPrompt: disableInputPrompt || !!overlay || launching, showTokenUsage: showTokenUsage, agentUsage: agentUsage, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, showSkillsMenu: showSkillsMenu, codemodeEnabled: codemodeEnabled, onToggleCodemode: onToggleCodemode, isA2AProtocol: isA2AProtocol, hasConfigData: !!configQuery.data, hasSkillsData: !!skillsQuery.data, models: availableModels || configQuery.data?.models || [], selectedModel: selectedModel, onModelSelect: setSelectedModel, availableTools: configQuery.data?.builtinTools || [], mcpServers: filteredMcpServers, enabledMcpTools: enabledMcpTools, enabledMcpToolCount: getEnabledMcpToolNames().length, onToggleMcpTool: toggleMcpTool, onToggleAllMcpServerTools: toggleAllMcpServerTools, approvedMcpTools: approvedMcpTools, onToggleMcpToolApproval: toggleMcpToolApproval, skills: skillsQuery.data?.skills || [], skillsLoading: !!skillsQuery.isLoading, enabledSkills: enabledSkills, onToggleSkill: toggleSkill, onToggleAllSkills: toggleAllSkills, approvedSkills: approvedSkills, onToggleSkillApproval: toggleSkillApproval, apiBase: indicatorApiBase, authToken: protocol?.authToken, mcpStatusData: effectiveMcpStatusData })) : null;
+        }, children: _jsx(ChatMessageList, { displayItems: displayItems, isLoading: isLoading, isStreaming: isStreaming, showLoadingIndicator: showLoadingIndicator, hideMessagesAfterToolUI: hideMessagesAfterToolUI, avatarConfig: defaultAvatarConfig, padding: padding, renderToolResult: effectiveRenderToolResult, approvalConfig: approvalConfig, messagesEndRef: messagesEndRef, onRespond: handleRespond, showTurnFooters: showTurnFooter, agentUsage: agentUsage, onRemoveItems: handleRemoveItems, emptyContent: launching ? null : (_jsx(ChatEmptyState, { emptyState: emptyState, brandIcon: brandIcon, description: resolvedDescription, suggestions: resolvedSuggestions, submitOnSuggestionClick: submitOnSuggestionClick, onSuggestionSubmit: handleSuggestionSubmit, onSuggestionFill: handleSuggestionFill })) }) }));
+    const inputToolbar = showInput ? (_jsx(InputPrompt, { input: input, setInput: setInput, isLoading: isLoading, kernelStatus: liveKernelStatus, connectionConfirmed: connectionConfirmed, placeholder: placeholder, 
+        /*
+          The same openers the empty state offers, typed into the box they would
+          be typed into.
+  
+          `message` rather than `title`: the animation is meant to look like
+          somebody typing, and what they would have typed is the message the
+          chip sends, not the label on it.
+        */
+        typingSuggestions: resolvedSuggestions?.map(item => item.message || item.title), autoFocus: autoFocus, focusTrigger: focusTrigger, padding: padding, onSend: () => handleSend(), onStop: handleStop, disableInputPrompt: disableInputPrompt || disabled || !!overlay || launching, promptVariant: promptVariant, mentionableAgents: mentionableAgents, 
+        // The runtime's memory of what was sent to this agent, for the arrow
+        // keys — part of the same initial state as the models and tools.
+        promptHistory: configQuery.data?.promptHistory, showTokenUsage: showTokenUsage, showContextRing: showContextRing, agentUsage: agentUsage, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, showSkillsMenu: showSkillsMenu, codemodeEnabled: codemodeEnabled, onToggleCodemode: onToggleCodemode, isA2AProtocol: isA2AProtocol, showAgentsMenu: showAgentsMenu, agents: footerAgents, selectedAgentId: selectedAgentId ?? footerAgents[0]?.id, onSelectAgent: onSelectAgent, hasConfigData: !!configQuery.data, hasSkillsData: !!skillsQuery.data, 
+        // So the bar can tell "not here yet" from "not coming": a chat whose
+        // agent has no config endpoint waits for ever otherwise.
+        configLoading: configQuery.isLoading, models: offeredModels, selectedModel: selectedModel, onModelSelect: setSelectedModel, availableTools: builtinTools, mcpServers: filteredMcpServers, enabledMcpTools: enabledMcpTools, enabledMcpToolCount: getEnabledMcpToolNames().length, onToggleMcpTool: toggleMcpTool, onToggleAllMcpServerTools: toggleAllMcpServerTools, approvedMcpTools: approvedMcpTools, onToggleMcpToolApproval: toggleMcpToolApproval, skills: skillsQuery.data?.skills || [], skillsLoading: !!skillsQuery.isLoading, enabledSkills: enabledSkills, onToggleSkill: toggleSkill, onToggleAllSkills: toggleAllSkills, approvedSkills: approvedSkills, onToggleSkillApproval: toggleSkillApproval, apiBase: indicatorApiBase, authToken: protocol?.authToken, mcpStatusData: effectiveMcpStatusData })) : null;
     // Shared header element. It is rendered either at the top of the chat (when
     // no ephemeral notebook is shown) or INSIDE the chat body column (when the
     // notebook is visible) so the header always follows the chat body across all
     // view modes (docked sidebar, floating popup, floating-small).
-    const chatHeaderElement = showHeader ? (_jsx(ChatBaseHeader, { title: title, subtitle: subtitle, brandIcon: brandIcon, headerContent: headerContent, headerActions: headerActions, showInformation: showInformation, onInformationClick: onInformationClick, padding: padding, kernelIndicatorState: kernelIndicatorState, kernelIndicatorPlacement: kernelIndicatorPlacement, runtimeStatus: sandboxStatusData ?? sandboxStatusQuery.data, kernel: notebookVisible
+    //
+    // Assembled as a props object first: `renderHeader` lets a host take these
+    // exact props — kernel indicator, runtime status, actions, all of it — and
+    // draw the bar itself. The loop's chat-header plugin is that host: the
+    // header then *arrives as a plugin* without this component re-deriving any
+    // of what only it knows.
+    const chatHeaderProps = {
+        title,
+        subtitle,
+        disableReason: disabled ? disableReason : undefined,
+        brandIcon,
+        headerContent,
+        headerActions,
+        showInformation,
+        /*
+          A default, so the button does something.
+    
+          `showInformation` drew an (i) and then forwarded a click to whatever
+          the host supplied — and a host that supplied nothing got a button that
+          did nothing at all, which is worse than no button. `Chat` still passes
+          its own handler and keeps its own pane; everything else gets this one.
+        */
+        onInformationClick: onInformationClick ?? (() => setShowDetails(true)),
+        padding,
+        kernelIndicatorState,
+        kernelIndicatorPlacement,
+        runtimeStatus: sandboxStatusData ?? sandboxStatusQuery.data,
+        kernel: notebookVisible
             ? (notebookKernel ?? kernel)
             : documentVisible
                 ? (documentKernel ?? kernel)
-                : kernel, kernelEnvironmentName: kernelEnvironmentName, kernelCpu: kernelCpu, kernelMemory: kernelMemory, kernelGpu: kernelGpu, headerButtons: headerButtons, messageCount: messages.length, onNewChat: handleNewChat, onClear: handleClear, chatViewMode: chatViewMode, onChatViewModeChange: onChatViewModeChange, showEphemeralSurfaceControl: enableEphemeralNotebook || enableEphemeralDocument, enableEphemeralNotebookOption: enableEphemeralNotebook, enableEphemeralDocumentOption: enableEphemeralDocument, ephemeralSurfaceMode: ephemeralSurfaceMode, onEphemeralSurfaceModeChange: handleEphemeralSurfaceModeChange })) : null;
+                : kernel,
+        kernelEnvironmentName,
+        kernelCpu,
+        kernelMemory,
+        kernelGpu,
+        headerButtons,
+        messageCount: messages.length,
+        onNewChat: handleNewChat,
+        onClear: handleClear,
+        chatViewMode,
+        onChatViewModeChange,
+        disabledViewModes,
+        showEphemeralSurfaceControl: enableEphemeralNotebook || enableEphemeralDocument,
+        enableEphemeralNotebookOption: enableEphemeralNotebook,
+        enableEphemeralDocumentOption: enableEphemeralDocument,
+        ephemeralSurfaceMode,
+        onEphemeralSurfaceModeChange: handleEphemeralSurfaceModeChange,
+    };
+    const chatHeaderElement = showHeader ? (renderHeader ? (renderHeader(chatHeaderProps)) : (_jsx(ChatBaseHeader, { ...chatHeaderProps }))) : null;
     // ========================================================================
     // Render
     // ========================================================================
@@ -2936,12 +3531,46 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
             height: '100%',
             maxHeight: '100%',
             minHeight: 0,
+            /*
+              As wide as the host, always.
+    
+              The root set its height and said nothing about width, so mounted in
+              a flex row — which is how the LOOP chat mounts it — it was a
+              shrink-to-fit item: as wide as its widest line and no wider,
+              anchored to the left of a row it should have filled, and re-sizing
+              with every streamed chunk. That is what made the person's own
+              bubble drift while the agent answered. A chat fills the column it
+              is given; the column decides the width, not the transcript.
+            */
+            flex: '1 1 auto',
+            width: '100%',
+            minWidth: 0,
             bg: backgroundColor || 'canvas.default',
             borderRadius,
             border,
             boxShadow,
             overflow: 'hidden',
-        }, children: [!surfaceVisible && chatHeaderElement, showToolApprovalBanner &&
+        }, children: [!surfaceVisible && chatHeaderElement, showDetails && (
+            /*
+              A column, not a row.
+           
+              This is a flex container holding one child, and `AgentDetails` sets a
+              height but no width — so in a row it was a flex item with `flex-basis:
+              auto` and no grow, which is to say it was as wide as its longest line
+              of text and no wider. On the LOOP workspace, where the chat column is
+              already narrow, that read as the panel occupying half the space it was
+              given, with the rest of the surface blank beside it.
+           
+              Turning the axis makes width the *cross* axis, and a flex item
+              stretches across that by default. `Chat.tsx` mounts the same component
+              the same way and has always looked right for exactly this reason.
+            */
+            _jsx(Box, { sx: {
+                    flex: '1 1 auto',
+                    minHeight: 0,
+                    display: 'flex',
+                    flexDirection: 'column',
+                }, children: _jsx(AgentDetails, { name: title || 'AI Agent', icon: brandIcon, protocol: protocol?.type ?? 'unknown', url: protocol?.endpoint || '', messageCount: displayItems.length, agentId: activeAgentId, apiBase: protocol?.configEndpoint, onBack: () => setShowDetails(false) }) })), showToolApprovalBanner &&
                 pendingApprovals &&
                 pendingApprovals.length > 0 && (_jsx(ToolApprovalBannerSection, { pendingApprovals: pendingApprovals, onApprove: handleBannerApprove, onReject: handleBannerReject })), showErrors && error && (_jsxs(Box, { sx: {
                     display: 'flex',
@@ -2972,13 +3601,13 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
                                         borderRight: '1px solid',
                                         borderColor: 'border.default',
                                     }),
-                        }, children: launching || overlay ? (_jsx(CompanionSurfaceSkeleton, { mode: notebookVisible ? 'notebook' : 'document' })) : notebookVisible ? (_jsx(EphemeralNotebook, { notebookId: ephemeralNotebookId, runtimePodName: runtimeId || activeAgentId, runtimeOverride: ephemeralRuntimeOverride, themeVariant: themeVariant, colorMode: colorMode, nbformat: persistedEphemeralNbformat ?? undefined, onNbformatChange: handleEphemeralNotebookChange, toolbarComponent: ephemeralNotebookToolbar, toolbarExtraItems: ephemeralNotebookToolbarExtraItems, collaborationProvider: ephemeralNotebookCollaborationProvider })) : (_jsx(React.Suspense, { fallback: null, children: _jsx(EphemeralDocument, { documentId: ephemeralDocumentId, runtimePodName: runtimeId || activeAgentId, runtimeOverride: ephemeralRuntimeOverride, themeVariant: themeVariant, colorMode: colorMode, content: persistedEphemeralDocument ?? undefined, onContentChange: handleEphemeralDocumentChange, onToolsReady: handleDocumentToolsReady, onKernelChange: handleDocumentKernelChange, collaboration: ephemeralDocumentCollaboration, toolbarExtraItems: ephemeralDocumentToolbarExtraItems }) })) }), !surfaceCollapsed && (_jsxs(Box, { sx: surfaceChatFloating
+                        }, children: launching || overlay ? (_jsx(CompanionSurfaceSkeleton, { mode: notebookVisible ? 'notebook' : 'document' })) : notebookVisible ? (_jsx(EphemeralNotebook, { notebookId: ephemeralNotebookId, runtimeName: runtimeId || activeAgentId, runtimeOverride: ephemeralRuntimeOverride, themeVariant: themeVariant, colorMode: colorMode, nbformat: persistedEphemeralNbformat ?? undefined, onNbformatChange: handleEphemeralNotebookChange, toolbarComponent: ephemeralNotebookToolbar, toolbarExtraItems: notebookToolbarItems, collaborationProvider: ephemeralNotebookCollaborationProvider })) : (_jsx(React.Suspense, { fallback: null, children: _jsx(EphemeralDocument, { documentId: ephemeralDocumentId, runtimeName: runtimeId || activeAgentId, runtimeOverride: ephemeralRuntimeOverride, themeVariant: themeVariant, colorMode: colorMode, content: persistedEphemeralDocument ?? undefined, onContentChange: handleEphemeralDocumentChange, onToolsReady: handleDocumentToolsReady, onKernelChange: handleDocumentKernelChange, collaboration: ephemeralDocumentCollaboration, toolbarExtraItems: documentToolbarItems }) })) }), !surfaceCollapsed && (_jsxs(Box, { sx: surfaceChatFloating
                             ? {
                                 position: 'absolute',
                                 right: 16,
-                                width: chatViewMode === 'floating-small' ? 360 : 440,
+                                width: compactFloating ? 360 : 440,
                                 maxWidth: 'calc(100% - 32px)',
-                                ...(chatViewMode === 'floating-small'
+                                ...(compactFloating
                                     ? { bottom: 16, height: '62%' }
                                     : { top: 16, bottom: 16 }),
                                 display: 'flex',