@vertesia/ui 1.5.0-dev.20260910.052912Z → 1.5.1

package/src/features/agent/chat/AskUserWidget.tsx

@@ -13,6 +13,21 @@ export interface AskUserOption {
     icon?: React.ReactNode;
 }
 
+export function isAskUserOptions(value: unknown): value is AskUserOption[] {
+    return (
+        Array.isArray(value) &&
+        value.every((option: unknown) => {
+            if (!option || typeof option !== 'object' || Array.isArray(option)) return false;
+            const { id, label, description } = option as Partial<AskUserOption>;
+            return (
+                typeof id === 'string' &&
+                typeof label === 'string' &&
+                (description == null || typeof description === 'string')
+            );
+        })
+    );
+}
+
 /** Props for the AskUserWidget component */
 export interface AskUserWidgetProps {
     /** The question or prompt to display */
@@ -153,11 +168,12 @@ export function AskUserWidget({
 
     const styles = VARIANT_STYLES[variant];
     const DefaultIcon = VARIANT_ICONS[variant];
-    const safeOptions = Array.isArray(options) ? options : [];
+    const validOptions = isAskUserOptions(options);
+    const safeOptions = validOptions ? options : [];
     const invalidOptionsReported = React.useRef(false);
 
     React.useEffect(() => {
-        if (options === undefined || Array.isArray(options) || invalidOptionsReported.current) return;
+        if (options === undefined || validOptions || invalidOptionsReported.current) return;
 
         invalidOptionsReported.current = true;
         Env.logger.warn('AskUserWidget received invalid options; rendering without options', {
@@ -166,8 +182,7 @@ export function AskUserWidget({
                 received_type: typeof options,
             },
         });
-        console.warn('[AskUserWidget] Invalid options received; rendering without options.');
-    }, [options]);
+    }, [options, validOptions]);
 
     const toggleOption = (optionId: string) => {
         setSelectedOptions((prev) => {

package/src/features/agent/chat/ModernAgentConversation.test.tsx

@@ -61,6 +61,8 @@ vi.mock('./ModernAgentOutput/Header', () => ({
 vi.mock('./ModernAgentOutput/MessageInput', () => ({
     default: (props: {
         onSend: (message: string) => void;
+        value?: string;
+        onValueChange?: (value: string) => void;
         activeTaskCount?: number;
         activeWorkstreams?: Array<{ workstream_id: string; status: string }>;
         onSelectWorkstream?: (workstreamId: string) => void;
@@ -81,6 +83,11 @@ vi.mock('./ModernAgentOutput/MessageInput', () => ({
         return (
             <div>
                 {props.approvalModeSlot}
+                <textarea
+                    aria-label="composer draft"
+                    value={props.value}
+                    onChange={(event) => props.onValueChange?.(event.target.value)}
+                />
                 <button type="button" onClick={() => props.onSend('follow up')}>
                     composer send
                 </button>
@@ -1278,7 +1285,7 @@ describe('ModernAgentConversation send handling', () => {
             expect.objectContaining({ workstream_id: 'beta', status: 'running' }),
             expect.objectContaining({ workstream_id: 'gamma', status: 'completed' }),
         ]);
-        expect(latestRightPanelProps.activeTab).toBe('plan');
+        expect(latestRightPanelProps.activeTab).toBe('workstreams');
         expect(latestMessageInputProps.activeTaskCount).toBe(2);
         expect(latestMessageInputProps.activeWorkstreams).toEqual([
             expect.objectContaining({ workstream_id: 'alpha', status: 'running' }),
@@ -1706,6 +1713,80 @@ describe('ModernAgentConversation send handling', () => {
         );
     });
 
+    it('restores the composer draft after an option response without sending it as part of that response', async () => {
+        const requestMessage = {
+            ...createMessage(AgentMessageType.REQUEST_INPUT, 'What is your favorite color?'),
+            details: {
+                request_id: 'ask-user-1',
+                ux: {
+                    options: [
+                        { id: 'red', label: 'Red' },
+                        { id: 'blue', label: 'Blue' },
+                    ],
+                },
+            },
+        };
+        mockStreamState({ messages: [], isCompleted: false, agentRunStatus: 'RUNNING' });
+
+        const view = renderConversation({ hideMessageInput: false });
+        fireEvent.change(screen.getByRole('textbox', { name: 'composer draft' }), {
+            target: { value: 'My pending message' },
+        });
+
+        mockStreamState({ messages: [requestMessage], isCompleted: false, agentRunStatus: 'RUNNING' });
+        view.rerender(
+            <ModernAgentConversation
+                agentRunId="agent-run-1"
+                title="Agent"
+                hideHeader
+                hideMessageInput={false}
+                showRightPanel={false}
+            />,
+        );
+
+        await act(async () => {
+            fireEvent.click(screen.getByRole('button', { name: 'Blue' }));
+            await Promise.resolve();
+        });
+        await waitFor(() => {
+            expect(mocks.sendSignal).toHaveBeenCalledWith(
+                'agent-run-1',
+                'UserInput',
+                expect.objectContaining({ message: 'blue' }),
+            );
+        });
+
+        mockStreamState({
+            messages: [
+                requestMessage,
+                {
+                    ...createMessage(AgentMessageType.QUESTION, 'blue'),
+                    details: { request_input_response: { request_id: 'ask-user-1' } },
+                },
+            ],
+            isCompleted: false,
+            agentRunStatus: 'RUNNING',
+        });
+        view.rerender(
+            <ModernAgentConversation
+                agentRunId="agent-run-1"
+                title="Agent"
+                hideHeader
+                hideMessageInput={false}
+                showRightPanel={false}
+            />,
+        );
+
+        expect((screen.getByRole('textbox', { name: 'composer draft' }) as HTMLTextAreaElement).value).toBe(
+            'My pending message',
+        );
+        expect(mocks.sendSignal).not.toHaveBeenCalledWith(
+            'agent-run-1',
+            'UserInput',
+            expect.objectContaining({ message: 'My pending message' }),
+        );
+    });
+
     it('does not resurrect an answered request overlay after remounting before the persisted echo arrives', async () => {
         const requestMessage = {
             ...createMessage(AgentMessageType.REQUEST_INPUT, 'What is your favorite color?'),
@@ -1960,6 +2041,74 @@ describe('ModernAgentConversation send handling', () => {
         );
     });
 
+    it('continues a run that ended while shown as running when the send is rejected with 409', async () => {
+        mockStreamState({
+            messages: [createMessage(AgentMessageType.ANSWER, 'still running')],
+            agentRunStatus: 'RUNNING',
+        });
+        mocks.sendSignal
+            .mockRejectedValueOnce(Object.assign(new Error('This agent run has ended.'), { status: 409 }))
+            .mockResolvedValueOnce({});
+
+        renderConversation({ onRestart: vi.fn() });
+        mocks.retrieve.mockResolvedValue({ status: 'completed' });
+
+        fireEvent.click(screen.getByRole('button', { name: 'inline send' }));
+
+        await waitFor(() => {
+            expect(mocks.sendSignal).toHaveBeenCalledTimes(2);
+        });
+
+        expect(mocks.restart).toHaveBeenCalledWith('agent-run-1');
+        expect(mocks.reconnect).toHaveBeenCalledTimes(1);
+        expect(mocks.restart.mock.invocationCallOrder[0]).toBeLessThan(mocks.sendSignal.mock.invocationCallOrder[1]);
+        await waitFor(() => {
+            expect(mocks.updateOptimisticMessageStatus).toHaveBeenCalledWith(expect.any(String), 'received');
+        });
+        expect(mocks.updateOptimisticMessageStatus).not.toHaveBeenCalledWith(expect.any(String), 'failed');
+    });
+
+    it('shows how the run ended instead of continuing it when it failed', async () => {
+        mockStreamState({
+            messages: [createMessage(AgentMessageType.ANSWER, 'still running')],
+            agentRunStatus: 'RUNNING',
+        });
+        mocks.sendSignal.mockRejectedValue(Object.assign(new Error('This agent run has ended.'), { status: 409 }));
+
+        renderConversation({ onRestart: vi.fn() });
+        mocks.retrieve.mockResolvedValue({ status: 'failed' });
+
+        fireEvent.click(screen.getByRole('button', { name: 'inline send' }));
+
+        await waitFor(() => {
+            expect(mocks.updateOptimisticMessageStatus).toHaveBeenCalledWith(expect.any(String), 'failed');
+        });
+        expect(mocks.restart).not.toHaveBeenCalled();
+        expect(mocks.reconnect).toHaveBeenCalledTimes(1);
+        expect(mocks.sendSignal).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not restart a run that answers 409 while still running', async () => {
+        mockStreamState({
+            messages: [createMessage(AgentMessageType.ANSWER, 'still running')],
+            agentRunStatus: 'RUNNING',
+        });
+        mocks.sendSignal.mockRejectedValue(
+            Object.assign(new Error('Agent run workflow is not ready yet; retry shortly.'), { status: 409 }),
+        );
+
+        renderConversation({ onRestart: vi.fn() });
+        mocks.retrieve.mockResolvedValue({ status: 'running' });
+
+        fireEvent.click(screen.getByRole('button', { name: 'inline send' }));
+
+        await waitFor(() => {
+            expect(mocks.updateOptimisticMessageStatus).toHaveBeenCalledWith(expect.any(String), 'failed');
+        });
+        expect(mocks.restart).not.toHaveBeenCalled();
+        expect(mocks.reconnect).not.toHaveBeenCalled();
+    });
+
     it('marks a sent message as sending and then received', async () => {
         mockStreamState({
             messages: [createMessage(AgentMessageType.ANSWER, 'still running')],

package/src/features/agent/chat/ModernAgentConversation.tsx

@@ -150,6 +150,24 @@ async function closeStagedFileBatch(
     }
 }
 
+const TERMINAL_WORKFLOW_STATUSES = new Set(['COMPLETED', 'FAILED', 'CANCELED', 'CANCELLED', 'TERMINATED', 'TIMED_OUT']);
+
+function isTerminalWorkflowStatus(status: string | null | undefined): boolean {
+    return !!status && TERMINAL_WORKFLOW_STATUSES.has(status.toUpperCase());
+}
+
+/**
+ * Whether the next message can continue an ended run by restarting it. FAILED runs are excluded: a
+ * failed run is a dead end, so the failed box and its explicit Restart action are shown instead.
+ */
+function canContinueWorkflowStatus(status: string | null | undefined, canRestart: boolean): boolean {
+    return canRestart && isTerminalWorkflowStatus(status) && status?.toUpperCase() !== 'FAILED';
+}
+
+function isConflictError(err: unknown): boolean {
+    return typeof err === 'object' && err !== null && 'status' in err && err.status === 409;
+}
+
 function getTimestampMs(timestamp: number | string | undefined): number {
     if (typeof timestamp === 'number') return timestamp;
     if (!timestamp) return Date.now();
@@ -1553,7 +1571,7 @@ function ModernAgentConversationInner({
         showInput,
         showSlidingPanel,
         setShowSlidingPanel,
-    } = useAgentPlans(messages, interactive, isModal);
+    } = useAgentPlans(messages, interactive);
 
     const {
         openDocuments,
@@ -1585,6 +1603,9 @@ function ModernAgentConversationInner({
     const conversationRef = useRef<HTMLDivElement | null>(null);
     const conversationLayoutRef = useRef<HTMLDivElement | null>(null);
     const [isSending, setIsSending] = useState(false);
+    // Request-input overlays replace the composer while the user chooses a response. Keep the
+    // ordinary composer draft here so that temporary unmount does not discard it.
+    const [composerValue, setComposerValue] = useState('');
     const [isCompactingContext, setIsCompactingContext] = useState(false);
     const [internalViewMode, setInternalViewMode] = useState<AgentConversationViewMode>('sliding');
     const viewMode = controlledViewMode ?? internalViewMode;
@@ -1659,17 +1680,10 @@ function ModernAgentConversationInner({
         return agentRunStatus;
     }, [lastMainMessage, agentRunStatus]);
 
-    const isWorkflowTerminal = useMemo(() => {
-        const normalizedStatus = effectiveWorkflowStatus?.toUpperCase();
-        return (
-            normalizedStatus === 'COMPLETED' ||
-            normalizedStatus === 'FAILED' ||
-            normalizedStatus === 'CANCELED' ||
-            normalizedStatus === 'CANCELLED' ||
-            normalizedStatus === 'TERMINATED' ||
-            normalizedStatus === 'TIMED_OUT'
-        );
-    }, [effectiveWorkflowStatus]);
+    const isWorkflowTerminal = useMemo(
+        () => isTerminalWorkflowStatus(effectiveWorkflowStatus),
+        [effectiveWorkflowStatus],
+    );
 
     // When a terminal conversation can be restarted (host provided a restart handler),
     // we keep the composer visible and seamlessly resume the agent on the next message
@@ -1677,8 +1691,8 @@ function ModernAgentConversationInner({
     // FAILED runs are excluded: a failed run is a dead end, so we surface the failed box /
     // `failedAction` (e.g. an explicit Restart button) instead of silently resuming.
     const canContinueConversation = useMemo(
-        () => isWorkflowTerminal && effectiveWorkflowStatus?.toUpperCase() !== 'FAILED' && !!onRestart,
-        [isWorkflowTerminal, effectiveWorkflowStatus, onRestart],
+        () => canContinueWorkflowStatus(effectiveWorkflowStatus, !!onRestart),
+        [effectiveWorkflowStatus, onRestart],
     );
     const shouldRenderMessageInputArea = !hideMessageInput || canContinueConversation;
 
@@ -1706,6 +1720,8 @@ function ModernAgentConversationInner({
     isWorkflowTerminalRef.current = isWorkflowTerminal;
     const canContinueConversationRef = useRef(canContinueConversation);
     canContinueConversationRef.current = canContinueConversation;
+    const canRestartRef = useRef(!!onRestart);
+    canRestartRef.current = !!onRestart;
 
     // ────────────────────────────────────────────
     // Computed values
@@ -1937,9 +1953,10 @@ function ModernAgentConversationInner({
     // Unified right panel state
     // ────────────────────────────────────────────
     type RightPanelTab = 'plan' | 'workstreams' | 'documents' | 'uploads' | 'artifacts' | 'payload' | 'conversation';
-    const [rightPanelTab, setRightPanelTab] = useState<RightPanelTab>(
-        conversationContent || conversationTab ? 'conversation' : 'plan',
+    const [rightPanelTab, setRightPanelTab] = useState<RightPanelTab | undefined>(
+        conversationContent || conversationTab ? 'conversation' : undefined,
     );
+    const defaultRightPanelTab = plans.length > 0 || panelWorkstreams.length === 0 ? 'plan' : 'workstreams';
     const [selectedArtifactPath, setSelectedArtifactPath] = useState<string | null>(null);
     const [rightPanelWidth, setRightPanelWidth] = useState(400);
     const [isRightPanelResizing, setIsRightPanelResizing] = useState(false);
@@ -2328,13 +2345,32 @@ function ModernAgentConversationInner({
             if (requestInputId) {
                 markRequestInputIdAnsweredForSession(agentRunId, requestInputId);
             }
+            const restartAndReconnect = async () => {
+                await client.agents.restart(agentRunId);
+                reconnectStream();
+            };
             const deliver = (async () => {
                 await waitForPendingToolApprovalModeChange();
                 if (isWorkflowTerminalRef.current) {
-                    await client.agents.restart(agentRunId);
-                    reconnectStream();
+                    await restartAndReconnect();
+                }
+                try {
+                    await sendUserInput();
+                } catch (err: unknown) {
+                    // The run can end while this view still shows it running — for example when it
+                    // reaches its maximum duration while idle — and the signal then answers 409.
+                    // Re-read its status and, if it ended and can be continued, continue it the way
+                    // a run already known to be ended is continued above.
+                    if (!isConflictError(err)) throw err;
+                    const run = await client.agents.retrieve(agentRunId);
+                    if (!canContinueWorkflowStatus(run.status, canRestartRef.current)) {
+                        // Reconnecting re-reads the status, so the view shows how the run ended.
+                        if (isTerminalWorkflowStatus(run.status)) reconnectStream();
+                        throw err;
+                    }
+                    await restartAndReconnect();
+                    await sendUserInput();
                 }
-                await sendUserInput();
                 markReceived();
             })();
 
@@ -2903,6 +2939,8 @@ function ModernAgentConversationInner({
                                     {composerContext}
                                     <MessageInput
                                         onSend={handleSendMessage}
+                                        value={composerValue}
+                                        onValueChange={setComposerValue}
                                         onStop={allowWorkflowControl ? handleStopWorkflow : undefined}
                                         approvalModeSlot={
                                             interactive && toolApprovalMode ? (
@@ -3081,8 +3119,8 @@ function ModernAgentConversationInner({
                                     conversationContent={conversationTab ? conversationAreaJsx : conversationContent}
                                     // Panel control
                                     onClose={handleCloseRightPanel}
-                                    defaultTab={rightPanelTab}
-                                    activeTab={rightPanelTab}
+                                    defaultTab={rightPanelTab ?? defaultRightPanelTab}
+                                    activeTab={rightPanelTab ?? defaultRightPanelTab}
                                     onTabChange={setRightPanelTab}
                                 />
                             </div>

package/src/features/agent/chat/ModernAgentOutput/AllMessagesMixed.test.tsx

@@ -1599,6 +1599,68 @@ describe('AllMessagesMixed summary view', () => {
         expect(screen.getAllByText(/quotes\.md/).length).toBeGreaterThan(0);
     });
 
+    describe.each(['summary', 'stacked', 'activity'] as const)('request input in %s view', (mode) => {
+        function renderPrompt(options: unknown) {
+            const onSendMessage = vi.fn();
+            const prompt = makeMessage({
+                timestamp: 2_000,
+                type: AgentMessageType.REQUEST_INPUT,
+                message: 'Choose a response',
+                details: { request_id: 'robust-ask', ux: { options, variant: 'default', multiSelect: false } },
+            });
+            if (mode === 'stacked') {
+                renderStacked([prompt], false, { onSendMessage });
+            } else if (mode === 'activity') {
+                renderSummary(
+                    [
+                        makeMessage({
+                            timestamp: 1_000,
+                            message: 'Waiting for input',
+                            details: {
+                                event_class: 'activity',
+                                tool: 'ask_user',
+                                tool_run_id: 'ask-run',
+                                tool_status: 'running',
+                                activity_group_id: 'ask-group',
+                            },
+                        }),
+                        { ...prompt, details: { ...prompt.details, activity_group_id: 'ask-group', tool: 'ask_user' } },
+                        makeMessage({ timestamp: 3_000, message: 'Finished', type: AgentMessageType.COMPLETE }),
+                    ],
+                    true,
+                    new Map(),
+                    { onSendMessage },
+                );
+                fireEvent.click(screen.getByRole('button', { name: /Worked\s*for/ }));
+            } else {
+                renderSummary([prompt], false, new Map(), { onSendMessage });
+            }
+            return onSendMessage;
+        }
+
+        it.each([
+            { name: 'a string', options: 'null' },
+            { name: 'null', options: null },
+            { name: 'a null entry', options: [null] },
+            { name: 'an object label', options: [{ id: 'a', label: {} }] },
+            { name: 'mixed valid and invalid entries', options: [{ id: 'a', label: 'A' }, null] },
+        ])('allows text submission for $name', ({ options }) => {
+            const onSendMessage = renderPrompt(options);
+            fireEvent.change(screen.getByRole('textbox'), { target: { value: 'Custom response' } });
+            fireEvent.click(screen.getByRole('button', { name: 'Send' }));
+            expect(onSendMessage).toHaveBeenCalledWith('Custom response', {
+                request_input_response: { request_id: 'robust-ask' },
+            });
+        });
+
+        it('preserves valid choices and their response IDs', () => {
+            const onSendMessage = renderPrompt([{ id: 'a', label: 'Choice A' }]);
+            fireEvent.click(screen.getByRole('button', { name: 'Choice A' }));
+            expect(onSendMessage).toHaveBeenCalledWith('a', { request_input_response: { request_id: 'robust-ask' } });
+            expect(screen.queryByRole('textbox')).toBeNull();
+        });
+    });
+
     it('renders pending ask options compactly in summary view', () => {
         renderSummary([
             makeMessage({

package/src/features/agent/chat/ModernAgentOutput/AllMessagesMixed.tsx

@@ -30,7 +30,7 @@ import {
 } from 'lucide-react';
 import React, { Component, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { AnimatedThinkingDots, PulsatingCircle } from '../AnimatedThinkingDots';
-import { AskUserWidget } from '../AskUserWidget';
+import { AskUserWidget, isAskUserOptions } from '../AskUserWidget';
 import { DocumentEditingActionCard, parseMarkdownEditingAction } from '../DocumentEditingActionCard.js';
 import { ThinkingMessages } from '../WaitingMessages';
 import {
@@ -758,11 +758,12 @@ function SummaryMessage({
     const requestInputDetails = message.details as AskUserMessageDetails | undefined;
     if (message.type === AgentMessageType.REQUEST_INPUT && requestInputDetails?.ux) {
         const uxConfig = requestInputDetails.ux;
+        const hasSelectableOptions = isAskUserOptions(uxConfig.options) && uxConfig.options.length > 0;
         return (
             <div className="mx-auto w-full max-w-3xl px-1">
                 <AskUserWidget
                     question={content}
-                    options={uxConfig.options}
+                    options={hasSelectableOptions ? uxConfig.options : undefined}
                     variant={uxConfig.variant}
                     multiSelect={uxConfig.multiSelect}
                     onSelect={(optionId) =>
@@ -776,7 +777,7 @@ function SummaryMessage({
                     onMultiSelect={(optionIds) =>
                         sendRequestInputResponse(onSendMessage, message, optionIds.join(', '))
                     }
-                    allowFreeResponse={!uxConfig.options?.length || !!uxConfig.free_response}
+                    allowFreeResponse={!hasSelectableOptions || !!uxConfig.free_response}
                     placeholder={uxConfig.free_response?.placeholder}
                     submitLabel={uxConfig.free_response?.submit_label}
                     onSubmit={(value) =>
@@ -2300,11 +2301,13 @@ function SummaryActivityRow({
                                 <div className="mt-3 space-y-3">
                                     {requestInputMessages.map((message) => {
                                         const uxConfig = message.details.ux;
+                                        const hasSelectableOptions =
+                                            isAskUserOptions(uxConfig.options) && uxConfig.options.length > 0;
                                         return (
                                             <AskUserWidget
                                                 key={getAgentMessageRenderKey(message, 'work-request-input')}
                                                 question={getRequestInputDisplayText(message)}
-                                                options={uxConfig.options}
+                                                options={hasSelectableOptions ? uxConfig.options : undefined}
                                                 variant={uxConfig.variant}
                                                 multiSelect={uxConfig.multiSelect}
                                                 onSelect={(optionId) =>
@@ -2322,9 +2325,7 @@ function SummaryActivityRow({
                                                         optionIds.join(', '),
                                                     )
                                                 }
-                                                allowFreeResponse={
-                                                    !uxConfig.options?.length || !!uxConfig.free_response
-                                                }
+                                                allowFreeResponse={!hasSelectableOptions || !!uxConfig.free_response}
                                                 placeholder={uxConfig.free_response?.placeholder}
                                                 submitLabel={uxConfig.free_response?.submit_label}
                                                 onSubmit={(value) =>

package/src/features/agent/chat/ModernAgentOutput/MessageInput.tsx

@@ -55,6 +55,10 @@ function formatTokenCountInK(tokens: number): string {
 
 interface MessageInputProps {
     onSend: (message: string) => void;
+    /** Controlled composer draft. When omitted, the composer manages its own draft. */
+    value?: string;
+    /** Called whenever the composer draft changes. */
+    onValueChange?: (value: string) => void;
     onStop?: () => void;
     disabled?: boolean;
     isSending?: boolean;
@@ -121,6 +125,8 @@ interface MessageInputProps {
 
 export default function MessageInput({
     onSend,
+    value: controlledValue,
+    onValueChange,
     onStop,
     approvalModeSlot,
     mcpSlot,
@@ -163,7 +169,17 @@ export default function MessageInput({
     const resolvedPlaceholder = placeholder ?? t('agent.typeYourMessage');
     const ref = useRef<HTMLTextAreaElement | null>(null);
     const fileInputRef = useRef<HTMLInputElement | null>(null);
-    const [value, setValue] = useState('');
+    const [uncontrolledValue, setUncontrolledValue] = useState('');
+    const value = controlledValue ?? uncontrolledValue;
+    const setValue = useCallback(
+        (nextValue: string) => {
+            if (controlledValue === undefined) {
+                setUncontrolledValue(nextValue);
+            }
+            onValueChange?.(nextValue);
+        },
+        [controlledValue, onValueChange],
+    );
     const [isObjectModalOpen, setIsObjectModalOpen] = useState(false);
     const [isDocSearchOpen, setIsDocSearchOpen] = useState(false);
     const [isDragOver, setIsDragOver] = useState(false);

package/src/features/agent/chat/ModernAgentOutput/MessageItem.tsx

@@ -28,7 +28,7 @@ import { memo, useEffect, useMemo, useRef, useState } from 'react';
 import dayjs from '../../../../core/utils/dayjs.js';
 import { useDownloadFile } from '../../../store/objects/components/useDownloadFile.js';
 import { PulsatingCircle } from '../AnimatedThinkingDots';
-import { AskUserWidget } from '../AskUserWidget';
+import { AskUserWidget, isAskUserOptions } from '../AskUserWidget';
 import { DocumentEditingActionCard, parseMarkdownEditingAction } from '../DocumentEditingActionCard.js';
 import { useImageLightbox } from '../ImageLightbox';
 import { getArtifactCacheKey, useArtifactUrlCache } from '../useArtifactUrlCache.js';
@@ -375,6 +375,7 @@ function MessageItemComponent({
     // UX config for REQUEST_INPUT messages (narrowed const so it stays typed inside the JSX closures below)
     const askUserUx =
         message.type === AgentMessageType.REQUEST_INPUT ? (message.details as AskUserMessageDetails)?.ux : undefined;
+    const hasSelectableAskUserOptions = isAskUserOptions(askUserUx?.options) && askUserUx.options.length > 0;
 
     // PERFORMANCE: Memoize markdown components to prevent MarkdownRenderer remounts
     const markdownComponents = useMemo(
@@ -616,7 +617,7 @@ function MessageItemComponent({
                     {askUserUx ? (
                         <AskUserWidget
                             question={typeof messageContent === 'string' ? messageContent : ''}
-                            options={askUserUx.options}
+                            options={hasSelectableAskUserOptions ? askUserUx.options : undefined}
                             variant={askUserUx.variant}
                             multiSelect={askUserUx.multiSelect}
                             onSelect={(optionId) =>
@@ -630,7 +631,7 @@ function MessageItemComponent({
                             onMultiSelect={(optionIds) =>
                                 sendRequestInputResponse(onSendMessage, message, optionIds.join(', '))
                             }
-                            allowFreeResponse={!askUserUx.options?.length || !!askUserUx.free_response}
+                            allowFreeResponse={!hasSelectableAskUserOptions || !!askUserUx.free_response}
                             placeholder={askUserUx.free_response?.placeholder}
                             submitLabel={askUserUx.free_response?.submit_label}
                             onSubmit={(value) =>

package/src/features/agent/chat/hooks/useAgentPlans.test.ts

@@ -0,0 +1,52 @@
+import { act, cleanup, renderHook } from '@testing-library/react';
+import { type AgentMessage, AgentMessageType } from '@vertesia/common';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { useAgentPlans } from './useAgentPlans.js';
+
+const question: AgentMessage = {
+    timestamp: 1,
+    workflow_run_id: 'run-1',
+    workstream_id: 'main',
+    type: AgentMessageType.QUESTION,
+    message: 'Help with a task',
+};
+const plan: AgentMessage = {
+    ...question,
+    timestamp: 2,
+    type: AgentMessageType.PLAN,
+    details: { plan: [{ id: 1, goal: 'Review the task', status: 'pending' }] },
+};
+
+describe('useAgentPlans sidebar visibility', () => {
+    beforeEach(() => sessionStorage.clear());
+    afterEach(cleanup);
+
+    it('stays closed while history loads and when history has no plan', () => {
+        const { result, rerender } = renderHook(({ messages }) => useAgentPlans(messages, true), {
+            initialProps: { messages: [] as AgentMessage[] },
+        });
+        expect(result.current.showSlidingPanel).toBe(false);
+        rerender({ messages: [question] });
+        expect(result.current.showSlidingPanel).toBe(false);
+    });
+
+    it('opens when a plan arrives and resets for a new empty run', () => {
+        const { result, rerender } = renderHook(({ messages }) => useAgentPlans(messages, true), {
+            initialProps: { messages: [question] },
+        });
+        rerender({ messages: [question, plan] });
+        expect(result.current.showSlidingPanel).toBe(true);
+        expect(result.current.plans).toHaveLength(1);
+        rerender({ messages: [] });
+        expect(result.current.showSlidingPanel).toBe(false);
+    });
+
+    it('preserves manual opening when subsequent messages have no plan', () => {
+        const { result, rerender } = renderHook(({ messages }) => useAgentPlans(messages, true), {
+            initialProps: { messages: [question] },
+        });
+        act(() => result.current.setShowSlidingPanel(true));
+        rerender({ messages: [question, { ...question, timestamp: 3, type: AgentMessageType.ANSWER }] });
+        expect(result.current.showSlidingPanel).toBe(true);
+    });
+});