@vertesia/ui 1.5.0 → 1.5.1

package/lib/widgets/xml-viewer/hooks/useCollapsible.d.ts

@@ -1,8 +1,8 @@
 export declare function useCollapsible(level: number): {
     collapsed: boolean;
     buttonProps: {
-        role?: undefined;
         onClick?: undefined;
+        role?: undefined;
         style?: undefined;
     } | {
         onClick: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertesia/ui",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "Vertesia UI components and and hooks",
   "type": "module",
   "main": "./lib/index.js",
@@ -92,11 +92,11 @@
     "vega": "^6.3.1",
     "vega-embed": "^7.1.0",
     "vega-lite": "^6.4.3",
-    "@vertesia/fusion-ux": "1.5.0",
-    "@vertesia/common": "1.5.0",
-    "@vertesia/json": "1.5.0",
-    "@vertesia/rich-text": "1.5.0",
-    "@vertesia/client": "1.5.0"
+    "@vertesia/client": "1.5.1",
+    "@vertesia/fusion-ux": "1.5.1",
+    "@vertesia/rich-text": "1.5.1",
+    "@vertesia/json": "1.5.1",
+    "@vertesia/common": "1.5.1"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.2",
@@ -179,7 +179,7 @@
     "url": "https://github.com/vertesia/composableai.git",
     "directory": "packages/ui"
   },
-  "gitHead": "3485742020066ab1fd3292487cf3a9577b5e4d91",
+  "gitHead": "7ab3acd95af12b8c254e1b3852e67d5078790f98",
   "scripts": {
     "clean:lib": "rimraf ./lib ./tsconfig.tsbuildinfo",
     "clean": "rimraf ./node_modules ./lib ./tsconfig.tsbuildinfo",

package/src/core/components/SelectList.tsx

@@ -88,6 +88,7 @@ export function SelectList<T>({
                         onSelect={onSelect}
                         layout={layout}
                         noCheck={noCheck}
+                        isSelected={isSelected}
                     />
                 );
             })}
@@ -99,17 +100,19 @@ interface SelectListOptionProps<T> {
     onSelect: (value: T) => void;
     layout: OptionLayout;
     noCheck?: boolean;
+    isSelected: boolean;
 }
 
-function SelectListOption<T>({ option, onSelect, layout, noCheck }: SelectListOptionProps<T>) {
+function SelectListOption<T>({ option, onSelect, layout, noCheck, isSelected }: SelectListOptionProps<T>) {
     return (
         <Button
             variant="unstyled"
             size="none"
             className={clsx(
-                'group !flex w-full items-center cursor-pointer gap-x-2 hover:bg-muted',
+                'group flex! w-full items-center cursor-pointer gap-x-2 hover:bg-muted',
                 layout.reverse && 'flex-row-reverse',
                 layout.className,
+                isSelected && 'bg-muted',
             )}
             onClick={() => onSelect(option)}
         >

package/src/core/components/SidePanel.tsx

@@ -2,6 +2,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { Minus, X } from 'lucide-react';
 import type React from 'react';
 import { useState } from 'react';
+import { Portal } from './Portal.js';
 import { Button } from './shadcn/button';
 
 interface SidePanelProps {
@@ -72,78 +73,82 @@ export function SidePanel({
     const initialX = isLeft ? '-100%' : '100%';
 
     return (
-        <AnimatePresence>
-            {isOpen && (
-                <div className="relative z-20">
-                    {/* Backdrop */}
-                    {backdrop && (
-                        <motion.div
-                            className="fixed inset-0 bg-black/70"
-                            initial={{ opacity: 0 }}
-                            animate={{ opacity: 1 }}
-                            exit={{ opacity: 0 }}
-                            onClick={onClose}
-                        />
-                    )}
+        <Portal>
+            <AnimatePresence>
+                {isOpen && (
+                    <div className="relative z-20">
+                        {/* Backdrop */}
+                        {backdrop && (
+                            <motion.div
+                                className="fixed inset-0 bg-black/70"
+                                initial={{ opacity: 0 }}
+                                animate={{ opacity: 1 }}
+                                exit={{ opacity: 0 }}
+                                onClick={onClose}
+                            />
+                        )}
 
-                    <div className={`fixed inset-y-0 ${positionClass} overflow-hidden`}>
-                        <div className="absolute inset-0 overflow-hidden">
-                            <div
-                                className={`pointer-events-none fixed inset-y-0 ${positionClass} flex max-w-full ${paddingClass}`}
-                            >
-                                <motion.div
-                                    className={`pointer-events-auto ${borderClass}`}
-                                    style={{ width: `${_panelWidth}px` }}
-                                    initial={{ x: initialX }}
-                                    animate={{ x: 0 }}
-                                    exit={{ x: initialX }}
-                                    transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+                        <div className={`fixed inset-y-0 ${positionClass} overflow-hidden`}>
+                            <div className="absolute inset-0 overflow-hidden">
+                                <div
+                                    className={`pointer-events-none fixed inset-y-0 ${positionClass} flex max-w-full ${paddingClass}`}
                                 >
-                                    <div className="relative flex h-full">
-                                        {/* Drag Handle */}
-                                        {resizable && (
-                                            // biome-ignore lint/a11y/noStaticElementInteractions: drag handle is pointer-only (no keyboard equivalent for continuous resize); ARIA role omitted to avoid useAriaPropsForRole false positive.
-                                            // biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label kept for AT users; div has no semantic role because separator/slider would require valuenow/min/max
+                                    <motion.div
+                                        className={`pointer-events-auto ${borderClass}`}
+                                        style={{ width: `${_panelWidth}px` }}
+                                        initial={{ x: initialX }}
+                                        animate={{ x: 0 }}
+                                        exit={{ x: initialX }}
+                                        transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+                                    >
+                                        <div className="relative flex h-full">
+                                            {/* Drag Handle */}
+                                            {resizable && (
+                                                // biome-ignore lint/a11y/noStaticElementInteractions: drag handle is pointer-only (no keyboard equivalent for continuous resize); ARIA role omitted to avoid useAriaPropsForRole false positive.
+                                                // biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label kept for AT users; div has no semantic role because separator/slider would require valuenow/min/max
+                                                <div
+                                                    aria-label="Resize panel"
+                                                    className={`absolute ${dragHandleClass} top-0 bottom-0 w-3 z-25 cursor-ew-resize hover:bg-primary transition-colors flex items-center justify-center`}
+                                                    onMouseDown={handleDragStart}
+                                                >
+                                                    <Minus className="rotate-90 font-semibold" strokeWidth={4} />
+                                                </div>
+                                            )}
                                             <div
-                                                aria-label="Resize panel"
-                                                className={`absolute ${dragHandleClass} top-0 bottom-0 w-3 z-25 cursor-ew-resize hover:bg-primary transition-colors flex items-center justify-center`}
-                                                onMouseDown={handleDragStart}
+                                                className={`flex-1 min-w-0 flex flex-col bg-background shadow-xl ${className}`}
                                             >
-                                                <Minus className="rotate-90 font-semibold" strokeWidth={4} />
-                                            </div>
-                                        )}
-                                        <div
-                                            className={`flex-1 min-w-0 flex flex-col bg-background shadow-xl ${className}`}
-                                        >
-                                            {/* Sticky header */}
-                                            {title && (
-                                                <div className="sticky top-0 z-10 bg-background px-2 sm:px-4 py-2 border-b">
-                                                    <div className="flex items-start justify-between">
-                                                        <h2 className="w-full text-base font-semibold leading-6">
-                                                            <div className="text-2xl">{title ?? ''}</div>
-                                                        </h2>
-                                                        <div className="ms-3 flex h-7 items-center">
-                                                            <CloseButton onClose={onClose} />
+                                                {/* Sticky header */}
+                                                {title && (
+                                                    <div className="sticky top-0 z-10 bg-background px-2 sm:px-4 py-2 border-b">
+                                                        <div className="flex items-start justify-between">
+                                                            <h2 className="w-full text-base font-semibold leading-6">
+                                                                <div className="text-2xl">{title ?? ''}</div>
+                                                            </h2>
+                                                            <div className="ms-3 flex h-7 items-center">
+                                                                <CloseButton onClose={onClose} />
+                                                            </div>
                                                         </div>
                                                     </div>
-                                                </div>
-                                            )}
+                                                )}
 
-                                            {/* Scrollable content */}
-                                            <div
-                                                className={contentClassName ?? 'flex-1 overflow-auto px-2 sm:px-4 py-4'}
-                                            >
-                                                <div className="w-full h-full flex-1 flex flex-col">{children}</div>
+                                                {/* Scrollable content */}
+                                                <div
+                                                    className={
+                                                        contentClassName ?? 'flex-1 overflow-auto px-2 sm:px-4 py-4'
+                                                    }
+                                                >
+                                                    <div className="w-full h-full flex-1 flex flex-col">{children}</div>
+                                                </div>
                                             </div>
                                         </div>
-                                    </div>
-                                </motion.div>
+                                    </motion.div>
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
-            )}
-        </AnimatePresence>
+                )}
+            </AnimatePresence>
+        </Portal>
     );
 }
 

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/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/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);
+    });
+});